feat: create email template for TTO reservation confirmation

feat: implement order notifications service with TTO reservation confirmation handling

feat: create migration for TTO booking email webhook trigger

app/home/[account]/billing/_components/health-benefit-form-client.tsx

@@ -1,11 +1,17 @@
 'use client';
 
 import { useState } from 'react';
+
 import { useRouter } from 'next/navigation';
 
 import { UpdateHealthBenefitSchema } from '@/packages/billing/core/src/schema';
+import {
+  Account,
+  CompanyParams,
+} from '@/packages/features/accounts/src/types/accounts';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
 import { Button } from '@kit/ui/button';
 import { Form } from '@kit/ui/form';
@@ -17,8 +23,6 @@ import { cn } from '~/lib/utils';
 
 import { updateHealthBenefit } from '../_lib/server/server-actions';
 import HealthBenefitFields from './health-benefit-fields';
-import { Account, CompanyParams } from '@/packages/features/accounts/src/types/accounts';
-import { useTranslation } from 'react-i18next';
 
 const HealthBenefitFormClient = ({
   account,
@@ -29,7 +33,7 @@ const HealthBenefitFormClient = ({
 }) => {
   const { t } = useTranslation('account');
   const router = useRouter();
-  
+
   const [currentCompanyParams, setCurrentCompanyParams] =
     useState<CompanyParams>(companyParams);
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -42,7 +46,7 @@ const HealthBenefitFormClient = ({
       amount: currentCompanyParams.benefit_amount || 0,
     },
   });
-  
+
   const isDirty = form.formState.isDirty;
 
   const onSubmit = (data: { occurrence: string; amount: number }) => {
@@ -75,7 +79,7 @@ const HealthBenefitFormClient = ({
         onSubmit={form.handleSubmit(onSubmit)}
       >
         <HealthBenefitFields />
-        
+
         <Button
           type="submit"
           className="relative"
@@ -96,5 +100,3 @@ const HealthBenefitFormClient = ({
 };
 
 export default HealthBenefitFormClient;
-
-

app/home/[account]/billing/_components/health-benefit-form.tsx

@@ -1,12 +1,15 @@
+import {
+  Account,
+  CompanyParams,
+} from '@/packages/features/accounts/src/types/accounts';
 import { PiggyBankIcon } from 'lucide-react';
 
 import { Separator } from '@kit/ui/shadcn/separator';
 import { Trans } from '@kit/ui/trans';
 
+import { TeamAccountBenefitExpensesOverview } from '../../_lib/server/load-team-account-benefit-expenses-overview';
 import HealthBenefitFormClient from './health-benefit-form-client';
 import YearlyExpensesOverview from './yearly-expenses-overview';
-import { TeamAccountBenefitExpensesOverview } from '../../_lib/server/load-team-account-benefit-expenses-overview';
-import { Account, CompanyParams } from '@/packages/features/accounts/src/types/accounts';
 
 const HealthBenefitForm = async ({
   account,
@@ -31,9 +34,9 @@ const HealthBenefitForm = async ({
           </h4>
         </div>
       </div>
-      
-      <div className="flex flex-col-reverse sm:flex-row gap-6">
-        <div className="border-border w-full sm:w-1/3 rounded-lg border">
+
+      <div className="flex flex-col-reverse gap-6 sm:flex-row">
+        <div className="border-border w-full rounded-lg border sm:w-1/3">
           <div className="p-6">
             <div className="flex h-16 w-16 items-center justify-center rounded-full bg-orange-100">
               <PiggyBankIcon className="h-[32px] w-[32px] stroke-orange-400 stroke-2" />
@@ -46,7 +49,7 @@ const HealthBenefitForm = async ({
           <Separator />
 
           <div className="p-6">
-            <HealthBenefitFormClient 
+            <HealthBenefitFormClient
               account={account}
               companyParams={companyParams}
             />
@@ -58,7 +61,7 @@ const HealthBenefitForm = async ({
             employeeCount={employeeCount}
             expensesOverview={expensesOverview}
           />
-          
+
           <p className="text-muted-foreground text-sm">
             <Trans i18nKey="billing:healthBenefitForm.info" />
           </p>

app/home/[account]/billing/_components/yearly-expenses-overview.tsx

@@ -1,9 +1,11 @@
 'use client';
 
+import { formatCurrency } from '@/packages/shared/src/utils';
+import { useTranslation } from 'react-i18next';
+
 import { Trans } from '@kit/ui/makerkit/trans';
 import { Separator } from '@kit/ui/separator';
-import { formatCurrency } from '@/packages/shared/src/utils';
-import { useTranslation } from 'react-i18next';
+
 import { TeamAccountBenefitExpensesOverview } from '../../_lib/server/load-team-account-benefit-expenses-overview';
 
 const YearlyExpensesOverview = ({
@@ -13,7 +15,9 @@ const YearlyExpensesOverview = ({
   employeeCount?: number;
   expensesOverview: TeamAccountBenefitExpensesOverview;
 }) => {
-  const { i18n: { language } } = useTranslation();
+  const {
+    i18n: { language },
+  } = useTranslation();
 
   return (
     <div className="border-border rounded-lg border p-6">
@@ -24,9 +28,7 @@ const YearlyExpensesOverview = ({
         <p className="text-sm font-medium">
           <Trans i18nKey="billing:expensesOverview.employeeCount" />
         </p>
-        <span className="text-primary text-sm font-bold">
-          {employeeCount}
-        </span>
+        <span className="text-primary text-sm font-bold">{employeeCount}</span>
       </div>
       <div className="mt-3 flex justify-between">
         <p className="text-sm font-medium">