Merge branch 'develop' into MED-97

app/admin/_components/admin-menu-navigation.tsx

@@ -1,12 +1,11 @@
+import { SIDEBAR_WIDTH_PROPERTY } from '@/packages/ui/src/shadcn/constants';
+
 import { AppLogo } from '@kit/shared/components/app-logo';
 import { ProfileAccountDropdownContainer } from '@kit/shared/components/personal-account-dropdown-container';
-import { SIDEBAR_WIDTH_PROPERTY } from '@/packages/ui/src/shadcn/constants';
 
 import type { UserWorkspace } from '../../home/(user)/_lib/server/load-user-workspace';
 
-export function AdminMenuNavigation(props: {
-  workspace: UserWorkspace;
-}) {
+export function AdminMenuNavigation(props: { workspace: UserWorkspace }) {
   const { accounts } = props.workspace;
 
   return (
@@ -17,9 +16,7 @@ export function AdminMenuNavigation(props: {
 
       <div className="flex items-center justify-end gap-3">
         <div>
-          <ProfileAccountDropdownContainer
-            accounts={accounts}
-          />
+          <ProfileAccountDropdownContainer accounts={accounts} />
         </div>
       </div>
     </div>

app/admin/accounts/[id]/page.tsx

@@ -3,8 +3,8 @@ import { cache } from 'react';
 import { AdminAccountPage } from '@kit/admin/components/admin-account-page';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
 
-import { getAccount } from '~/lib/services/account.service';
 import { withI18n } from '~/lib/i18n/with-i18n';
+import { getAccount } from '~/lib/services/account.service';
 
 interface Params {
   params: Promise<{

app/admin/accounts/page.tsx

@@ -8,6 +8,7 @@ import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
 import { Button } from '@kit/ui/button';
 import { PageBody, PageHeader } from '@kit/ui/page';
+
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 interface SearchParams {

app/admin/layout.tsx

@@ -5,8 +5,8 @@ import { cookies } from 'next/headers';
 import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
 import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
 
-import { AdminSidebar } from '~/admin/_components/admin-sidebar';
 import { AdminMenuNavigation } from '~/admin/_components/admin-menu-navigation';
+import { AdminSidebar } from '~/admin/_components/admin-sidebar';
 import { AdminMobileNavigation } from '~/admin/_components/mobile-navigation';
 
 import { loadUserWorkspace } from '../home/(user)/_lib/server/load-user-workspace';

app/admin/page.tsx

@@ -1,6 +1,7 @@
 import { AdminDashboard } from '@kit/admin/components/admin-dashboard';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
 import { PageBody, PageHeader } from '@kit/ui/page';
+
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 function AdminPage() {

app/api/job/handler/sync-connected-online.ts

@@ -2,10 +2,45 @@ import axios from 'axios';
 
 import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
 
-import type { ISearchLoadResponse } from '~/lib/types/connected-online';
+import { logSyncResult } from '~/lib/services/audit.service';
+import { SyncStatus } from '~/lib/types/audit';
+import type {
+  ISearchLoadResponse,
+  P_JobTitleTranslation,
+} from '~/lib/types/connected-online';
+
+function createTranslationMap(translations: P_JobTitleTranslation[]) {
+  const result: Map<
+    number,
+    Map<number, { textEN: string; textRU: string; textET: string }>
+  > = new Map();
+
+  for (const translation of translations) {
+    const { ClinicID, TextET, TextEN, TextRU, SyncID } = translation;
+
+    if (!result.has(ClinicID)) {
+      result.set(ClinicID, new Map());
+    }
+
+    result.get(ClinicID)!.set(SyncID, {
+      textET: TextET,
+      textEN: TextEN,
+      textRU: TextRU,
+    });
+  }
+
+  return result;
+}
+
+function getSpokenLanguages(spokenLanguages?: string) {
+  if (!spokenLanguages || !spokenLanguages.length) return [];
+  return spokenLanguages.split(',');
+}
 
 export default async function syncConnectedOnline() {
-  const isProd = process.env.NODE_ENV === 'production';
+  const isProd = !['test', 'localhost'].some((pathString) =>
+    process.env.NEXT_PUBLIC_SITE_URL?.includes(pathString),
+  );
 
   const baseUrl = process.env.CONNECTED_ONLINE_URL;
 
@@ -16,14 +51,19 @@ export default async function syncConnectedOnline() {
   const supabase = getSupabaseServerAdminClient();
 
   try {
-    const response = await axios.post<{ d: string }>(`${baseUrl}/Search_Load`, {
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8',
+    const searchLoadResponse = await axios.post<{ d: string }>(
+      `${baseUrl}/Search_Load`,
+      {
+        headers: {
+          'Content-Type': 'application/json; charset=utf-8',
+        },
+        param: "{'Value':'|et|-1'}", // get all available services in Estonian
       },
-      param: "{'Value':'|et|-1'}", // get all available services in Estonian
-    });
+    );
 
-    const responseData: ISearchLoadResponse = JSON.parse(response.data.d);
+    const responseData: ISearchLoadResponse = JSON.parse(
+      searchLoadResponse.data.d,
+    );
 
     if (responseData?.ErrorCode !== 0) {
       throw new Error('Failed to get Connected Online data');
@@ -43,18 +83,23 @@ export default async function syncConnectedOnline() {
 
     let clinics;
     let services;
+    let serviceProviders;
+    let jobTitleTranslations;
     // Filter out "Dentas Demo OÜ" in prod or only sync "Dentas Demo OÜ" in any other environment
-    if (isProd) {
-      clinics = responseData.Data.T_Lic.filter((clinic) => clinic.ID !== 2);
-      services = responseData.Data.T_Service.filter(
-        (service) => service.ClinicID !== 2,
-      );
-    } else {
-      clinics = responseData.Data.T_Lic.filter((clinic) => clinic.ID === 2);
-      services = responseData.Data.T_Service.filter(
-        (service) => service.ClinicID === 2,
-      );
-    }
+    const isDemoClinic = (clinicId: number) =>
+      isProd ? clinicId !== 2 : clinicId === 2;
+    clinics = responseData.Data.T_Lic.filter(({ ID }) => isDemoClinic(ID));
+    services = responseData.Data.T_Service.filter(({ ClinicID }) =>
+      isDemoClinic(ClinicID),
+    );
+    serviceProviders = responseData.Data.T_Doctor.filter(({ ClinicID }) =>
+      isDemoClinic(ClinicID),
+    );
+    jobTitleTranslations = createTranslationMap(
+      responseData.Data.P_JobTitleTranslations.filter(({ ClinicID }) =>
+        isDemoClinic(ClinicID),
+      ),
+    );
 
     const mappedClinics = clinics.map((clinic) => {
       return {
@@ -64,6 +109,8 @@ export default async function syncConnectedOnline() {
         name: clinic.Name,
         personal_code_required: !!clinic.PersonalCodeRequired,
         phone_number: clinic.Phone || null,
+        key: clinic.Key,
+        address: clinic.Address,
       };
     });
 
@@ -71,7 +118,7 @@ export default async function syncConnectedOnline() {
       return {
         id: service.ID,
         clinic_id: service.ClinicID,
-        sync_id: service.SyncID,
+        sync_id: Number(service.SyncID),
         name: service.Name,
         description: service.Description || null,
         price: service.Price,
@@ -87,45 +134,133 @@ export default async function syncConnectedOnline() {
       };
     });
 
+    const mappedServiceProviders = serviceProviders.map((serviceProvider) => {
+      const jobTitleTranslation = serviceProvider.JobTitleID
+        ? jobTitleTranslations
+            .get(serviceProvider.ClinicID)
+            ?.get(serviceProvider.JobTitleID)
+        : null;
+      return {
+        id: serviceProvider.ID,
+        prefix: serviceProvider.Prefix,
+        name: serviceProvider.Name,
+        spoken_languages: getSpokenLanguages(serviceProvider.SpokenLanguages),
+        job_title_et: jobTitleTranslation?.textET,
+        job_title_en: jobTitleTranslation?.textEN,
+        job_title_ru: jobTitleTranslation?.textRU,
+        job_title_id: serviceProvider.JobTitleID,
+        is_deleted: !!serviceProvider.Deleted,
+        clinic_id: serviceProvider.ClinicID,
+      };
+    });
+
     const { error: providersError } = await supabase
       .schema('medreport')
       .from('connected_online_providers')
       .upsert(mappedClinics);
 
+    if (providersError) {
+      return logSyncResult({
+        operation: 'CONNECTED_ONLINE_SYNC',
+        comment:
+          'Error saving connected online providers: ' +
+          JSON.stringify(providersError),
+        status: SyncStatus.Fail,
+        changed_by_role: 'service_role',
+      });
+    }
+
     const { error: servicesError } = await supabase
       .schema('medreport')
       .from('connected_online_services')
-      .upsert(mappedServices, { onConflict: 'id', ignoreDuplicates: false });
+      .upsert(mappedServices, {
+        onConflict: 'id',
+        ignoreDuplicates: false,
+      });
 
-    if (providersError || servicesError) {
-      return supabase
-        .schema('audit')
-        .from('sync_entries')
-        .insert({
-          operation: 'CONNECTED_ONLINE_SYNC',
-          comment: providersError
-            ? 'Error saving providers: ' + JSON.stringify(providersError)
-            : 'Error saving services: ' + JSON.stringify(servicesError),
-          status: 'FAIL',
-          changed_by_role: 'service_role',
-        });
+    if (servicesError) {
+      return logSyncResult({
+        operation: 'CONNECTED_ONLINE_SYNC',
+        comment:
+          'Error saving connected online services: ' +
+          JSON.stringify(servicesError),
+        status: SyncStatus.Fail,
+        changed_by_role: 'service_role',
+      });
     }
 
-    await supabase.schema('audit').from('sync_entries').insert({
+    const { error: serviceProvidersError } = await supabase
+      .schema('medreport')
+      .from('connected_online_service_providers')
+      .upsert(mappedServiceProviders, {
+        onConflict: 'id',
+        ignoreDuplicates: false,
+      });
+
+    if (serviceProvidersError) {
+      return logSyncResult({
+        operation: 'CONNECTED_ONLINE_SYNC',
+        comment:
+          'Error saving service providers: ' +
+          JSON.stringify(serviceProvidersError),
+        status: SyncStatus.Fail,
+        changed_by_role: 'service_role',
+      });
+    }
+
+    for (const mappedClinic of mappedClinics) {
+      const defaultLoadResponse = await axios.post<{ d: string }>(
+        `${baseUrl}/Default_Load`,
+        {
+          headers: {
+            'Content-Type': 'application/json; charset=utf-8',
+          },
+          param: `{'Value':'${mappedClinic.key}|et'}`,
+        },
+      );
+
+      const defaultLoadResponseData = JSON.parse(defaultLoadResponse.data.d);
+
+      if (defaultLoadResponseData?.ErrorCode !== 0) {
+        throw new Error('Failed to get Connected Online location data');
+      }
+
+      const clinicLocations: {
+        SyncID: number;
+        Address: string;
+        Name: string;
+      }[] = defaultLoadResponseData.Data.T_SelectableLocation;
+
+      if (clinicLocations?.length) {
+        const mappedLocations = clinicLocations.map(
+          ({ SyncID, Address, Name }) => ({
+            address: Address,
+            clinic_id: mappedClinic.id,
+            sync_id: SyncID,
+            name: Name,
+          }),
+        );
+
+        await supabase
+          .schema('medreport')
+          .from('connected_online_locations')
+          .insert(mappedLocations)
+          .throwOnError();
+      }
+    }
+
+    await logSyncResult({
       operation: 'CONNECTED_ONLINE_SYNC',
-      status: 'SUCCESS',
+      status: SyncStatus.Success,
       changed_by_role: 'service_role',
     });
   } catch (e) {
-    await supabase
-      .schema('audit')
-      .from('sync_entries')
-      .insert({
-        operation: 'CONNECTED_ONLINE_SYNC',
-        status: 'FAIL',
-        comment: JSON.stringify(e),
-        changed_by_role: 'service_role',
-      });
+    await logSyncResult({
+      operation: 'CONNECTED_ONLINE_SYNC',
+      status: SyncStatus.Fail,
+      comment: JSON.stringify(e),
+      changed_by_role: 'service_role',
+    });
     throw new Error(
       `Failed to sync Connected Online data, error: ${JSON.stringify(e)}`,
     );

app/home/(user)/(dashboard)/booking/[handle]/page.tsx

@@ -1,12 +1,20 @@
+import { redirect } from 'next/navigation';
+
 import { HomeLayoutPageHeader } from '@/app/home/(user)/_components/home-page-header';
 import { loadCategory } from '@/app/home/(user)/_lib/server/load-category';
 
+import { pathsConfig } from '@kit/shared/config';
 import { AppBreadcrumbs } from '@kit/ui/makerkit/app-breadcrumbs';
-import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
+import BookingContainer from '~/home/(user)/_components/booking/booking-container';
+import { loadCurrentUserAccount } from '~/home/(user)/_lib/server/load-user-account';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
+import {
+  PageViewAction,
+  createPageViewLog,
+} from '~/lib/services/audit/pageView.service';
 
 export const generateMetadata = async () => {
   const i18n = await createI18nServerInstance();
@@ -17,9 +25,30 @@ export const generateMetadata = async () => {
   };
 };
 
-async function BookingHandlePage({ params }: { params: { handle: string } }) {
-  const handle = await params.handle;
+async function BookingHandlePage({
+  params,
+}: {
+  params: Promise<{ handle: string }>;
+}) {
+  const { handle } = await params;
   const { category } = await loadCategory({ handle });
+  const { account } = await loadCurrentUserAccount();
+
+  if (!category) {
+    return <div>Category not found</div>;
+  }
+
+  if (!account) {
+    return redirect(pathsConfig.auth.signIn);
+  }
+
+  await createPageViewLog({
+    accountId: account.id,
+    action: PageViewAction.VIEW_TTO_SERVICE_BOOKING,
+    extraData: {
+      handle,
+    },
+  });
 
   return (
     <>
@@ -30,10 +59,10 @@ async function BookingHandlePage({ params }: { params: { handle: string } }) {
       />
       <HomeLayoutPageHeader
         title={<Trans i18nKey={'booking:title'} />}
-        description={<Trans i18nKey={'booking:description'} />}
+        description=""
       />
 
-      <PageBody></PageBody>
+      <BookingContainer category={category} />
     </>
   );
 }

app/home/(user)/(dashboard)/cart/montonio-callback/client-component.tsx

@@ -34,8 +34,15 @@ export default function MontonioCallbackClient({
       setHasProcessed(true);
 
       try {
-        const { orderId } = await processMontonioCallback(orderToken);
-        router.push(`/home/order/${orderId}/confirmed`);
+        const result = await processMontonioCallback(orderToken);
+        if (result.success) {
+          return router.push(`/home/order/${result.orderId}/confirmed`);
+        }
+        if (result.failedServiceBookings?.length) {
+          router.push(
+            `/home/cart/montonio-callback/error?reasonFailed=${result.failedServiceBookings.map(({ reason }) => reason).join(',')}`,
+          );
+        }
       } catch (error) {
         console.error('Failed to place order', error);
         router.push('/home/cart/montonio-callback/error');

app/home/(user)/(dashboard)/cart/montonio-callback/error/page.tsx

@@ -1,8 +1,11 @@
+import { use } from 'react';
+
 import Link from 'next/link';
 
 import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
 import { PageBody, PageHeader } from '@/packages/ui/src/makerkit/page';
 
+import { toArray } from '@kit/shared/utils';
 import { Button } from '@kit/ui/button';
 import { Alert, AlertDescription } from '@kit/ui/shadcn/alert';
 import { AlertTitle } from '@kit/ui/shadcn/alert';
@@ -16,7 +19,15 @@ export async function generateMetadata() {
   };
 }
 
-export default async function MontonioCheckoutCallbackErrorPage() {
+export default async function MontonioCheckoutCallbackErrorPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ reasonFailed: string }>;
+}) {
+  const params = await searchParams;
+
+  const failedBookingData: string[] = toArray(params.reasonFailed?.split(','));
+
   return (
     <div className={'flex h-full flex-1 flex-col'}>
       <PageHeader title={<Trans i18nKey="cart:montonioCallback.title" />} />
@@ -28,9 +39,15 @@ export default async function MontonioCheckoutCallbackErrorPage() {
             </AlertTitle>
 
             <AlertDescription>
-              <p>
+              {failedBookingData.length ? (
+                failedBookingData.map((failureReason, index) => (
+                  <p key={index}>
+                    <Trans i18nKey={`checkout.error.${failureReason}`} />
+                  </p>
+                ))
+              ) : (
                 <Trans i18nKey={'checkout.error.description'} />
-              </p>
+              )}
             </AlertDescription>
           </Alert>
 

app/home/(user)/(dashboard)/cart/page.tsx

@@ -6,11 +6,14 @@ import { listProductTypes } from '@lib/data/products';
 import { Trans } from '@kit/ui/trans';
 
 import { withI18n } from '~/lib/i18n/with-i18n';
+import { getCartReservations } from '~/lib/services/reservation.service';
+import { findProductTypeIdByHandle } from '~/lib/utils';
 
 import Cart from '../../_components/cart';
 import CartTimer from '../../_components/cart/cart-timer';
 import { loadCurrentUserAccount } from '../../_lib/server/load-user-account';
 import { AccountBalanceService } from '@kit/accounts/services/account-balance.service';
+import { EnrichedCartItem } from '../../_components/cart/types';
 
 export async function generateMetadata() {
   const { t } = await createI18nServerInstance();
@@ -37,29 +40,32 @@ async function CartPage() {
 
   const balanceSummary = await new AccountBalanceService().getBalanceSummary(account.id);
 
-  const analysisPackagesType = productTypes.find(
-    ({ metadata }) => metadata?.handle === 'analysis-packages',
+  const synlabAnalysisTypeId = findProductTypeIdByHandle(
+    productTypes,
+    'synlab-analysis',
   );
-  const synlabAnalysisType = productTypes.find(
-    ({ metadata }) => metadata?.handle === 'synlab-analysis',
+  const analysisPackagesTypeId = findProductTypeIdByHandle(
+    productTypes,
+    'analysis-packages',
   );
+
   const synlabAnalyses =
-    analysisPackagesType && synlabAnalysisType && cart?.items
+    analysisPackagesTypeId && synlabAnalysisTypeId && cart?.items
       ? cart.items.filter((item) => {
           const productTypeId = item.product?.type_id;
           if (!productTypeId) {
             return false;
           }
-          return [analysisPackagesType.id, synlabAnalysisType.id].includes(
+          return [analysisPackagesTypeId, synlabAnalysisTypeId].includes(
             productTypeId,
           );
         })
       : [];
-  const ttoServiceItems =
-    cart?.items?.filter(
-      (item) => !synlabAnalyses.some((analysis) => analysis.id === item.id),
-    ) ?? [];
 
+  let ttoServiceItems: EnrichedCartItem[] = [];
+  if (cart?.items?.length) {
+    ttoServiceItems = await getCartReservations(cart);
+  }
   const otherItemsSorted = ttoServiceItems.sort((a, b) =>
     (a.updated_at ?? '') > (b.updated_at ?? '') ? -1 : 1,
   );

app/home/(user)/(dashboard)/order/[orderId]/page.tsx

@@ -26,17 +26,7 @@ async function OrderConfirmedPage(props: {
   params: Promise<{ orderId: string }>;
 }) {
   const params = await props.params;
-
-  const order = await getAnalysisOrder({
-    analysisOrderId: Number(params.orderId),
-  }).catch(() => null);
-  if (!order) {
-    redirect(pathsConfig.app.myOrders);
-  }
-
-  const medusaOrder = await retrieveOrder(order.medusa_order_id).catch(
-    () => null,
-  );
+  const medusaOrder = await retrieveOrder(params.orderId).catch(() => null);
   if (!medusaOrder) {
     redirect(pathsConfig.app.myOrders);
   }
@@ -46,7 +36,12 @@ async function OrderConfirmedPage(props: {
       <PageHeader title={<Trans i18nKey="cart:order.title" />} />
       <Divider />
       <div className="small:grid-cols-[1fr_360px] grid grid-cols-1 gap-x-40 gap-y-6 lg:px-4">
-        <OrderDetails order={order} />
+        <OrderDetails
+          order={{
+            id: medusaOrder.id,
+            created_at: medusaOrder.created_at,
+          }}
+        />
         <Divider />
         <OrderItems medusaOrder={medusaOrder} />
         <CartTotals medusaOrder={medusaOrder} />

app/home/(user)/(dashboard)/order/page.tsx

@@ -11,7 +11,8 @@ import { PageBody } from '@kit/ui/makerkit/page';
 import { Trans } from '@kit/ui/trans';
 
 import { withI18n } from '~/lib/i18n/with-i18n';
-import { getAnalysisOrders } from '~/lib/services/order.service';
+import { getAnalysisOrders, getTtoOrders } from '~/lib/services/order.service';
+import { findProductTypeIdByHandle } from '~/lib/utils';
 import { listOrders } from '~/medusa/lib/data/orders';
 
 import { HomeLayoutPageHeader } from '../../_components/home-page-header';
@@ -28,19 +29,25 @@ export async function generateMetadata() {
 }
 
 async function OrdersPage() {
-  const [medusaOrders, analysisOrders, { productTypes }] = await Promise.all([
+  const [medusaOrders, analysisOrders, ttoOrders, { productTypes }] = await Promise.all([
     listOrders(ORDERS_LIMIT),
     getAnalysisOrders(),
+    getTtoOrders(),
     listProductTypes(),
   ]);
 
-  if (!medusaOrders || !productTypes) {
+  if (!medusaOrders || !productTypes || !ttoOrders) {
     redirect(pathsConfig.auth.signIn);
   }
 
-  const analysisPackagesType = productTypes.find(
-    ({ metadata }) => metadata?.handle === 'analysis-packages',
-  )!;
+  const analysisPackagesTypeId = findProductTypeIdByHandle(
+    productTypes,
+    'analysis-package',
+  );
+  const ttoServiceTypeId = findProductTypeIdByHandle(
+    productTypes,
+    'tto-service',
+  );
 
   return (
     <>
@@ -49,34 +56,45 @@ async function OrdersPage() {
         description={<Trans i18nKey={'orders:description'} />}
       />
       <PageBody>
-        {analysisOrders.map((analysisOrder) => {
-          const medusaOrder = medusaOrders.find(
-            ({ id }) => id === analysisOrder.medusa_order_id,
+        {medusaOrders.map((medusaOrder) => {
+          const analysisOrder = analysisOrders.find(
+            ({ medusa_order_id }) => medusa_order_id === medusaOrder.id,
           );
+
           if (!medusaOrder) {
             return null;
           }
 
           const medusaOrderItems = medusaOrder.items || [];
           const medusaOrderItemsAnalysisPackages = medusaOrderItems.filter(
-            (item) => item.product_type_id === analysisPackagesType?.id,
+            (item) => item.product_type_id === analysisPackagesTypeId,
+          );
+          const medusaOrderItemsTtoServices = medusaOrderItems.filter(
+            (item) => item.product_type_id === ttoServiceTypeId,
           );
           const medusaOrderItemsOther = medusaOrderItems.filter(
-            (item) => item.product_type_id !== analysisPackagesType?.id,
+            (item) =>
+              !item.product_type_id ||
+              ![analysisPackagesTypeId, ttoServiceTypeId].includes(
+                item.product_type_id,
+              ),
           );
 
           return (
-            <React.Fragment key={analysisOrder.id}>
+            <React.Fragment key={medusaOrder.id}>
               <Divider className="my-6" />
               <OrderBlock
+                medusaOrderId={medusaOrder.id}
                 analysisOrder={analysisOrder}
+                medusaOrderStatus={medusaOrder.status}
                 itemsAnalysisPackage={medusaOrderItemsAnalysisPackages}
+                itemsTtoService={medusaOrderItemsTtoServices}
                 itemsOther={medusaOrderItemsOther}
               />
             </React.Fragment>
           );
         })}
-        {analysisOrders.length === 0 && (
+        {analysisOrders.length === 0 && ttoOrders.length === 0 && (
           <h5 className="mt-6">
             <Trans i18nKey="orders:noOrders" />
           </h5>

app/home/(user)/(dashboard)/page.tsx

@@ -16,6 +16,7 @@ import Dashboard from '../_components/dashboard';
 import DashboardCards from '../_components/dashboard-cards';
 import Recommendations from '../_components/recommendations';
 import RecommendationsSkeleton from '../_components/recommendations-skeleton';
+import { isValidOpenAiEnv } from '../_lib/server/is-valid-open-ai-env';
 import { loadCurrentUserAccount } from '../_lib/server/load-user-account';
 
 export const generateMetadata = async () => {
@@ -52,17 +53,16 @@ async function UserHomePage() {
       />
       <PageBody>
         <Dashboard account={account} bmiThresholds={bmiThresholds} />
-        {process.env.OPENAI_API_KEY &&
-          process.env.PROMPT_ID_ANALYSIS_RECOMMENDATIONS && (
-            <>
-              <h4>
-                <Trans i18nKey="dashboard:recommendations.title" />
-              </h4>
-              <Suspense fallback={<RecommendationsSkeleton />}>
-                <Recommendations account={account} />
-              </Suspense>
-            </>
-          )}
+        {(await isValidOpenAiEnv()) && (
+          <>
+            <h4>
+              <Trans i18nKey="dashboard:recommendations.title" />
+            </h4>
+            <Suspense fallback={<RecommendationsSkeleton />}>
+              <Recommendations account={account} />
+            </Suspense>
+          </>
+        )}
       </PageBody>
     </>
   );

app/home/(user)/_components/booking/booking-calendar.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { isBefore, isSameDay } from 'date-fns';
+import { uniq } from 'lodash';
+
+import { Calendar } from '@kit/ui/shadcn/calendar';
+import { Card } from '@kit/ui/shadcn/card';
+import { cn } from '@kit/ui/utils';
+
+import { useBooking } from './booking.provider';
+
+export default function BookingCalendar() {
+  const { selectedDate, setSelectedDate, isLoadingTimeSlots, timeSlots } =
+    useBooking();
+  const availableDates = uniq(timeSlots?.map((timeSlot) => timeSlot.StartTime));
+
+  return (
+    <Card className="mb-4">
+      <Calendar
+        mode="single"
+        selected={selectedDate}
+        onSelect={setSelectedDate}
+        disabled={(date) => {
+          const today = new Date();
+          today.setHours(0, 0, 0, 0);
+          return (
+            isBefore(date, today) ||
+            !availableDates.some((dateWithBooking) =>
+              isSameDay(date, dateWithBooking),
+            )
+          );
+        }}
+        className={cn('rounded-md border', {
+          'pointer-events-none rounded-md border opacity-50':
+            isLoadingTimeSlots,
+        })}
+      />
+    </Card>
+  );
+}

app/home/(user)/_components/booking/booking-container.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { StoreProduct } from '@medusajs/types';
+
+import { Trans } from '@kit/ui/trans';
+
+import { EnrichedCartItem } from '../cart/types';
+import BookingCalendar from './booking-calendar';
+import { BookingProvider } from './booking.provider';
+import LocationSelector from './location-selector';
+import ServiceSelector from './service-selector';
+import TimeSlots from './time-slots';
+
+const BookingContainer = ({
+  category,
+  cartItem,
+  onComplete,
+}: {
+  category: { products: StoreProduct[]; countryCode: string };
+  cartItem?: EnrichedCartItem;
+  onComplete?: () => void;
+}) => {
+  const products = cartItem?.product ? [cartItem.product] : category.products;
+
+  if (!cartItem || !products?.length) {
+    <p>
+      <Trans i18nKey="booking:noProducts" />
+    </p>;
+  }
+
+  return (
+    <BookingProvider category={{ products }} service={cartItem?.product}>
+      <div className="xs:flex-row flex max-h-full flex-col gap-6">
+        <div className="flex flex-col">
+          <ServiceSelector products={products} />
+          <BookingCalendar />
+          <LocationSelector />
+        </div>
+        <TimeSlots
+          countryCode={category.countryCode}
+          cartItem={cartItem}
+          onComplete={onComplete}
+        />
+      </div>
+    </BookingProvider>
+  );
+};
+
+export default BookingContainer;

app/home/(user)/_components/booking/booking.context.ts

@@ -0,0 +1,77 @@
+import { createContext } from 'react';
+
+import { StoreProduct } from '@medusajs/types';
+import { noop } from 'lodash';
+
+import { Tables } from '@kit/supabase/database';
+
+export type Location = Tables<
+  { schema: 'medreport' },
+  'connected_online_locations'
+>;
+
+export type TimeSlotResponse = {
+  timeSlots: TimeSlot[];
+  locations: Location[];
+};
+
+export type TimeSlot = {
+  ClinicID: number;
+  LocationID: number;
+  UserID: number;
+  SyncUserID: number;
+  ServiceID: number;
+  HKServiceID: number;
+  StartTime: Date;
+  EndTime: Date;
+  PayorCode: string;
+  serviceProvider?: ServiceProvider;
+  syncedService?: SyncedService;
+} & { location?: Location };
+
+export type ServiceProvider = {
+  name: string;
+  id: number;
+  jobTitleEn: string | null;
+  jobTitleEt: string | null;
+  jobTitleRu: string | null;
+  clinicId: number;
+};
+
+export type SyncedService = Tables<
+  { schema: 'medreport' },
+  'connected_online_services'
+> & {
+  providerClinic: ProviderClinic;
+};
+
+export type ProviderClinic = Tables<
+  { schema: 'medreport' },
+  'connected_online_providers'
+> & { locations: Location[] };
+
+const BookingContext = createContext<{
+  timeSlots: TimeSlot[] | null;
+  selectedService: StoreProduct | null;
+  locations: Location[] | null;
+  selectedLocationId: number | null;
+  selectedDate?: Date;
+  isLoadingTimeSlots?: boolean;
+  setSelectedService: (selectedService: StoreProduct | null) => void;
+  setSelectedLocationId: (selectedLocationId: number | null) => void;
+  updateTimeSlots: (serviceIds: number[]) => Promise<void>;
+  setSelectedDate: (selectedDate?: Date) => void;
+}>({
+  timeSlots: null,
+  selectedService: null,
+  locations: null,
+  selectedLocationId: null,
+  selectedDate: new Date(),
+  isLoadingTimeSlots: false,
+  setSelectedService: (_) => _,
+  setSelectedLocationId: (_) => _,
+  updateTimeSlots: async (_) => noop(),
+  setSelectedDate: (_) => _,
+});
+
+export { BookingContext };

app/home/(user)/_components/booking/booking.provider.tsx

@@ -0,0 +1,80 @@
+import React, { useContext, useEffect, useState } from 'react';
+
+import { StoreProduct } from '@medusajs/types';
+
+import { getAvailableTimeSlotsForDisplay } from '~/lib/services/connected-online.service';
+
+import { BookingContext, Location, TimeSlot } from './booking.context';
+
+export function useBooking() {
+  const context = useContext(BookingContext);
+
+  if (!context) {
+    throw new Error('useBooking must be used within a BookingProvider.');
+  }
+
+  return context;
+}
+
+export const BookingProvider: React.FC<{
+  children: React.ReactElement;
+  category: { products: StoreProduct[] };
+  service?: StoreProduct;
+}> = ({ children, category, service }) => {
+  const [selectedService, setSelectedService] = useState<StoreProduct | null>(
+    (service ?? category?.products?.[0]) || null,
+  );
+  const [selectedLocationId, setSelectedLocationId] = useState<number | null>(
+    null,
+  );
+  const [selectedDate, setSelectedDate] = useState<Date>();
+  const [timeSlots, setTimeSlots] = useState<TimeSlot[] | null>(null);
+  const [locations, setLocations] = useState<Location[] | null>(null);
+  const [isLoadingTimeSlots, setIsLoadingTimeSlots] = useState(false);
+
+  useEffect(() => {
+    const metadataServiceIds = selectedService?.metadata?.serviceIds as string;
+    if (metadataServiceIds) {
+      const json = JSON.parse(metadataServiceIds);
+      if (Array.isArray(json)) {
+        updateTimeSlots(json);
+      }
+    }
+  }, [selectedService, selectedLocationId]);
+
+  const updateTimeSlots = async (serviceIds: number[]) => {
+    setIsLoadingTimeSlots(true);
+    try {
+      console.log('serviceIds', serviceIds, selectedLocationId);
+      const response = await getAvailableTimeSlotsForDisplay(
+        serviceIds,
+        selectedLocationId,
+      );
+      setTimeSlots(response.timeSlots);
+      setLocations(response.locations);
+    } catch (error) {
+      setTimeSlots(null);
+    } finally {
+      setIsLoadingTimeSlots(false);
+    }
+  };
+
+  return (
+    <BookingContext.Provider
+      value={{
+        timeSlots,
+        locations,
+        selectedService,
+        selectedLocationId,
+        setSelectedLocationId,
+        selectedDate,
+        isLoadingTimeSlots,
+        setSelectedService,
+        updateTimeSlots,
+        setSelectedDate,
+      }}
+    >
+      {children}
+    </BookingContext.Provider>
+  );
+};

app/home/(user)/_components/booking/location-selector.tsx

@@ -0,0 +1,55 @@
+import { Label } from '@medusajs/ui';
+import { useTranslation } from 'react-i18next';
+
+import { RadioGroup, RadioGroupItem } from '@kit/ui/radio-group';
+import { Card } from '@kit/ui/shadcn/card';
+import { Trans } from '@kit/ui/trans';
+
+import { useBooking } from './booking.provider';
+
+const LocationSelector = () => {
+  const { t } = useTranslation();
+  const { selectedLocationId, setSelectedLocationId, locations } = useBooking();
+
+  const onLocationSelect = (locationId: number | string | null) => {
+    if (locationId === 'all') return setSelectedLocationId(null);
+    setSelectedLocationId(Number(locationId));
+  };
+
+  return (
+    <Card className="mb-4 p-4">
+      <h5 className="text-semibold mb-2">
+        <Trans i18nKey="booking:locations" />
+      </h5>
+      <div className="flex flex-col">
+        <RadioGroup
+          className="mb-2 flex flex-col"
+          onValueChange={(val) => onLocationSelect(val)}
+        >
+          <div className="flex items-center gap-2">
+            <RadioGroupItem
+              value={'all'}
+              id={'all'}
+              checked={selectedLocationId === null}
+            />
+            <Label htmlFor={'all'}>{t('booking:showAllLocations')}</Label>
+          </div>
+          {locations?.map((location) => (
+            <div key={location.sync_id} className="flex items-center gap-2">
+              <RadioGroupItem
+                value={location.sync_id.toString()}
+                id={location.sync_id.toString()}
+                checked={selectedLocationId === location.sync_id}
+              />
+              <Label htmlFor={location.sync_id.toString()}>
+                {location.name}
+              </Label>
+            </div>
+          ))}
+        </RadioGroup>
+      </div>
+    </Card>
+  );
+};
+
+export default LocationSelector;

app/home/(user)/_components/booking/service-selector.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+
+import { StoreProduct } from '@medusajs/types';
+import { ChevronDown } from 'lucide-react';
+
+import { Card } from '@kit/ui/shadcn/card';
+import { Label } from '@kit/ui/shadcn/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@kit/ui/shadcn/popover';
+import { RadioGroup, RadioGroupItem } from '@kit/ui/shadcn/radio-group';
+import { Trans } from '@kit/ui/trans';
+
+import { useBooking } from './booking.provider';
+
+const ServiceSelector = ({ products }: { products: StoreProduct[] }) => {
+  const { selectedService, setSelectedService } = useBooking();
+  const [collapsed, setCollapsed] = useState(false);
+  const [firstFourProducts] = useState<StoreProduct[]>(products?.slice(0, 4));
+
+  const onServiceSelect = async (productId: StoreProduct['id']) => {
+    const product = products.find((p) => p.id === productId);
+    setSelectedService(product ?? null);
+    setCollapsed(false);
+  };
+
+  return (
+    <Card className="mb-4 p-4">
+      <h5 className="text-semibold mb-2">
+        <Trans i18nKey="booking:services" />
+      </h5>
+      <Popover open={collapsed} onOpenChange={setCollapsed}>
+        <div className="flex flex-col">
+          <RadioGroup
+            defaultValue={selectedService?.id || ''}
+            className="mb-2 flex flex-col"
+            onValueChange={onServiceSelect}
+          >
+            {firstFourProducts?.map((product) => (
+              <div key={product.id} className="flex items-center gap-2">
+                <RadioGroupItem
+                  value={product.id}
+                  id={product.id}
+                  checked={selectedService?.id === product.id}
+                />
+                <Label htmlFor={product.id}>{product.title}</Label>
+              </div>
+            ))}
+          </RadioGroup>
+          {products.length > 4 && (
+            <PopoverTrigger asChild>
+              <div
+                onClick={() => setCollapsed((_) => !_)}
+                className="flex cursor-pointer items-center justify-between border-t py-1"
+              >
+                <span>
+                  <Trans i18nKey="booking:showAll" />
+                </span>
+                <ChevronDown />
+              </div>
+            </PopoverTrigger>
+          )}
+        </div>
+        <PopoverContent sideOffset={10}>
+          <RadioGroup onValueChange={onServiceSelect}>
+            {products?.map((product) => (
+              <div key={product.id + '-2'} className="flex items-center gap-2">
+                <RadioGroupItem
+                  value={product.id}
+                  id={product.id + '-2'}
+                  checked={selectedService?.id === product.id}
+                />
+                <Label htmlFor={product.id + '-2'}>{product.title}</Label>
+              </div>
+            ))}
+          </RadioGroup>
+        </PopoverContent>
+      </Popover>
+    </Card>
+  );
+};
+
+export default ServiceSelector;

app/home/(user)/_components/booking/time-slots.tsx

@@ -0,0 +1,319 @@
+import { useMemo, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { formatCurrency } from '@/packages/shared/src/utils';
+import { addHours, isAfter, isSameDay } from 'date-fns';
+import { orderBy } from 'lodash';
+import { useTranslation } from 'react-i18next';
+
+import { pathsConfig } from '@kit/shared/config';
+import { formatDateAndTime } from '@kit/shared/utils';
+import { Button } from '@kit/ui/shadcn/button';
+import { Card } from '@kit/ui/shadcn/card';
+import { toast } from '@kit/ui/sonner';
+import { Trans } from '@kit/ui/trans';
+import { cn } from '@kit/ui/utils';
+
+import { updateReservationTime } from '~/lib/services/reservation.service';
+
+import { createInitialReservationAction } from '../../_lib/server/actions';
+import { EnrichedCartItem } from '../cart/types';
+import { ServiceProvider, TimeSlot } from './booking.context';
+import { useBooking } from './booking.provider';
+
+const getServiceProviderTitle = (
+  currentLocale: string,
+  serviceProvider?: ServiceProvider,
+) => {
+  if (!serviceProvider) return null;
+  if (currentLocale === 'en') return serviceProvider.jobTitleEn;
+  if (currentLocale === 'ru') return serviceProvider.jobTitleRu;
+
+  return serviceProvider.jobTitleEt;
+};
+
+const PAGE_SIZE = 7;
+
+const TimeSlots = ({
+  countryCode,
+  cartItem,
+  onComplete,
+}: {
+  countryCode: string;
+  cartItem?: EnrichedCartItem;
+  onComplete?: () => void;
+}) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const {
+    t,
+    i18n: { language: currentLocale },
+  } = useTranslation();
+
+  const booking = useBooking();
+
+  const router = useRouter();
+
+  const selectedDate = booking.selectedDate ?? new Date();
+
+  const filteredBookings = useMemo(
+    () =>
+      orderBy(
+        booking?.timeSlots?.filter(({ StartTime }) => {
+          const firstAvailableTimeToSelect = isSameDay(selectedDate, new Date())
+            ? addHours(new Date(), 0.5)
+            : selectedDate;
+          return isAfter(StartTime, firstAvailableTimeToSelect);
+        }) ?? [],
+        'StartTime',
+        'asc',
+      ),
+    [booking.timeSlots, selectedDate],
+  );
+
+  const totalPages = Math.ceil(filteredBookings.length / PAGE_SIZE);
+
+  const paginatedBookings = useMemo(() => {
+    const startIndex = (currentPage - 1) * PAGE_SIZE;
+    const endIndex = startIndex + PAGE_SIZE;
+    return filteredBookings.slice(startIndex, endIndex);
+  }, [filteredBookings, currentPage, PAGE_SIZE]);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const generatePageNumbers = () => {
+    const pages = [];
+    const maxVisiblePages = 5;
+
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (currentPage <= 3) {
+        for (let i = 1; i <= 4; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        pages.push(1);
+        pages.push('...');
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push('...');
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  if (!booking?.timeSlots?.length) {
+    return null;
+  }
+
+  const handleBookTime = async (timeSlot: TimeSlot, comments?: string) => {
+    const selectedService = booking.selectedService;
+
+    const selectedVariant = selectedService?.variants?.[0];
+
+    const syncedService = timeSlot.syncedService;
+    if (!syncedService || !selectedVariant) {
+      return toast.error(t('booking:serviceNotFound'));
+    }
+
+    const bookTimePromise = createInitialReservationAction(
+      selectedVariant,
+      countryCode,
+      Number(syncedService.id),
+      syncedService?.clinic_id,
+      timeSlot.UserID,
+      timeSlot.SyncUserID,
+      timeSlot.StartTime,
+      booking.selectedLocationId ? booking.selectedLocationId : null,
+      comments,
+    ).then(() => {
+      if (onComplete) {
+        onComplete();
+      }
+      router.push(pathsConfig.app.cart);
+    });
+
+    toast.promise(() => bookTimePromise, {
+      success: <Trans i18nKey={'booking:bookTimeSuccess'} />,
+      error: <Trans i18nKey={'booking:bookTimeError'} />,
+      loading: <Trans i18nKey={'booking:bookTimeLoading'} />,
+    });
+  };
+
+  const handleChangeTime = async (
+    timeSlot: TimeSlot,
+    reservationId: number,
+    cartId: string,
+  ) => {
+    const syncedService = timeSlot.syncedService;
+    if (!syncedService) {
+      return toast.error(t('booking:serviceNotFound'));
+    }
+
+    const bookTimePromise = updateReservationTime({
+      reservationId,
+      newStartTime: timeSlot.StartTime,
+      newServiceId: Number(syncedService.id),
+      newAppointmentUserId: timeSlot.UserID,
+      newSyncUserId: timeSlot.SyncUserID,
+      newLocationId: booking.selectedLocationId
+        ? booking.selectedLocationId
+        : null,
+      cartId,
+    });
+
+    toast.promise(() => bookTimePromise, {
+      success: <Trans i18nKey={'booking:bookTimeSuccess'} />,
+      error: <Trans i18nKey={'booking:bookTimeError'} />,
+      loading: <Trans i18nKey={'booking:bookTimeLoading'} />,
+    });
+
+    if (onComplete) {
+      onComplete();
+    }
+  };
+
+  const handleTimeSelect = async (timeSlot: TimeSlot) => {
+    if (cartItem?.reservation.id) {
+      return handleChangeTime(
+        timeSlot,
+        cartItem.reservation.id,
+        cartItem.cart_id,
+      );
+    }
+
+    return handleBookTime(timeSlot);
+  };
+
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <div className="flex h-full w-full flex-col gap-2 overflow-auto">
+        {paginatedBookings.map((timeSlot, index) => {
+          const isEHIF = timeSlot.HKServiceID > 0;
+          const serviceProviderTitle = getServiceProviderTitle(
+            currentLocale,
+            timeSlot.serviceProvider,
+          );
+          const price =
+            booking.selectedService?.variants?.[0]?.calculated_price
+              ?.calculated_amount ?? cartItem?.unit_price;
+          return (
+            <Card
+              className="xs:flex xs:justify-between grid w-full justify-center-safe gap-3 p-4"
+              key={index}
+            >
+              <div>
+                <span>{formatDateAndTime(timeSlot.StartTime.toString())}</span>
+                <div className="flex">
+                  <h5
+                    className={cn(
+                      (serviceProviderTitle || isEHIF) &&
+                        "after:mx-2 after:content-['·']",
+                    )}
+                  >
+                    {timeSlot.serviceProvider?.name}
+                  </h5>
+                  {serviceProviderTitle && (
+                    <span
+                      className={cn(isEHIF && "after:mx-2 after:content-['·']")}
+                    >
+                      {serviceProviderTitle}
+                    </span>
+                  )}
+                  {isEHIF && <span>{t('booking:ehifBooking')}</span>}
+                </div>
+                <div className="flex text-xs">{timeSlot.location?.address}</div>
+              </div>
+              <div className="flex-end not-last:xs:justify-center flex items-center justify-between gap-2">
+                <span className="text-sm font-semibold">
+                  {formatCurrency({
+                    currencyCode: 'EUR',
+                    locale: 'et-EE',
+                    value: price ?? '',
+                  })}
+                </span>
+                <Button onClick={() => handleTimeSelect(timeSlot)} size="sm">
+                  <Trans i18nKey="common:book" />
+                </Button>
+              </div>
+            </Card>
+          );
+        })}
+
+        {!paginatedBookings.length && (
+          <div className="wrap text-muted-foreground flex size-full content-center-safe justify-center-safe">
+            <p>{t('booking:noResults')}</p>
+          </div>
+        )}
+      </div>
+
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between">
+          <div className="text-muted-foreground text-sm">
+            {t('common:pageOfPages', {
+              page: currentPage,
+              total: totalPages,
+            })}
+          </div>
+
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePageChange(currentPage - 1)}
+              disabled={currentPage === 1}
+            >
+              <Trans i18nKey="common:previous" defaultValue="Previous" />
+            </Button>
+
+            {generatePageNumbers().map((page, index) => (
+              <Button
+                key={index}
+                variant={page === currentPage ? 'default' : 'outline'}
+                size="sm"
+                onClick={() =>
+                  typeof page === 'number' && handlePageChange(page)
+                }
+                disabled={page === '...'}
+                className={cn(
+                  'min-w-[2rem]',
+                  page === '...' && 'cursor-default hover:bg-transparent',
+                )}
+              >
+                {page}
+              </Button>
+            ))}
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePageChange(currentPage + 1)}
+              disabled={currentPage === totalPages}
+            >
+              <Trans i18nKey="common:next" defaultValue="Next" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TimeSlots;

app/home/(user)/_components/cart/cart-service-item.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useState } from 'react';
+
+import { formatCurrency, formatDateAndTime } from '@/packages/shared/src/utils';
+import { useTranslation } from 'react-i18next';
+
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@kit/ui/dialog';
+import { TableCell, TableRow } from '@kit/ui/table';
+import { Trans } from '@kit/ui/trans';
+
+import BookingContainer from '../booking/booking-container';
+import CartItemDelete from './cart-item-delete';
+import { EnrichedCartItem } from './types';
+
+const EditCartServiceItemModal = ({
+  item,
+  onComplete,
+}: {
+  item: EnrichedCartItem | null;
+  onComplete: () => void;
+}) => {
+  if (!item) return null;
+
+  return (
+    <Dialog defaultOpen>
+      <DialogContent className="xs:max-w-[90vw] flex max-h-screen max-w-full flex-col items-center gap-4 space-y-4 overflow-y-scroll">
+        <DialogHeader className="items-center text-center">
+          <DialogTitle>
+            <Trans i18nKey="cart:editServiceItem.title" />
+          </DialogTitle>
+          <DialogDescription>
+            <Trans i18nKey="cart:editServiceItem.description" />
+          </DialogDescription>
+        </DialogHeader>
+        <div>
+          {item.product && item.reservation.countryCode ? (
+            <BookingContainer
+              category={{
+                products: [item.product],
+                countryCode: item.reservation.countryCode,
+              }}
+              cartItem={item}
+              onComplete={onComplete}
+            />
+          ) : (
+            <p>
+              <Trans i18nKey="booking:noProducts" />
+            </p>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default function CartServiceItem({
+  item,
+  currencyCode,
+  isUnavailable,
+}: {
+  item: EnrichedCartItem;
+  currencyCode: string;
+  isUnavailable?: boolean;
+}) {
+  const [editingItem, setEditingItem] = useState<EnrichedCartItem | null>(null);
+  const {
+    i18n: { language },
+  } = useTranslation();
+
+  return (
+    <>
+      <TableRow className="w-full" data-testid="product-row">
+        <TableCell className="w-[100%] px-4 text-left sm:px-6">
+          <p
+            className="txt-medium-plus text-ui-fg-base"
+            data-testid="product-title"
+          >
+            {item.product_title}
+          </p>
+        </TableCell>
+
+        <TableCell className="px-4 sm:px-6">
+          {formatDateAndTime(item.reservation.startTime.toString())}
+        </TableCell>
+
+        <TableCell className="px-4 sm:px-6">
+          {item.reservation.location?.address ?? '-'}
+        </TableCell>
+
+        <TableCell className="px-4 sm:px-6">{item.quantity}</TableCell>
+
+        <TableCell className="min-w-[80px] px-4 sm:px-6">
+          {formatCurrency({
+            value: item.unit_price,
+            currencyCode,
+            locale: language,
+          })}
+        </TableCell>
+
+        <TableCell className="min-w-[80px] px-4 text-right sm:px-6">
+          {formatCurrency({
+            value: item.total,
+            currencyCode,
+            locale: language,
+          })}
+        </TableCell>
+
+        <TableCell className="px-4 text-right sm:px-6">
+          <span className="flex justify-end gap-x-1">
+            <Button size="sm" onClick={() => setEditingItem(item)}>
+              <Trans i18nKey="common:change" />
+            </Button>
+          </span>
+        </TableCell>
+
+        <TableCell className="px-4 text-right sm:px-6">
+          <span className="flex w-[60px] justify-end gap-x-1">
+            <CartItemDelete id={item.id} />
+          </span>
+        </TableCell>
+      </TableRow>
+      {isUnavailable && (
+        <TableRow>
+          <TableCell
+            colSpan={8}
+            className="text-destructive px-4 text-left sm:px-6"
+          >
+            <Trans i18nKey="booking:timeSlotUnavailable" />
+          </TableCell>
+        </TableRow>
+      )}
+      <EditCartServiceItemModal
+        item={editingItem}
+        onComplete={() => setEditingItem(null)}
+      />
+    </>
+  );
+}

app/home/(user)/_components/cart/cart-service-items.tsx

@@ -0,0 +1,72 @@
+import { StoreCart } from '@medusajs/types';
+
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@kit/ui/table';
+import { Trans } from '@kit/ui/trans';
+
+import CartServiceItem from './cart-service-item';
+import { EnrichedCartItem } from './types';
+
+export default function CartServiceItems({
+  cart,
+  items,
+  productColumnLabelKey,
+  unavailableLineItemIds,
+}: {
+  cart: StoreCart;
+  items: EnrichedCartItem[];
+  productColumnLabelKey: string;
+  unavailableLineItemIds?: string[];
+}) {
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <Table className="border-separate rounded-lg border">
+      <TableHeader className="text-ui-fg-subtle txt-medium-plus">
+        <TableRow>
+          <TableHead className="px-4 sm:px-6">
+            <Trans i18nKey={productColumnLabelKey} />
+          </TableHead>
+          <TableHead className="px-4 sm:px-6">
+            <Trans i18nKey="cart:table.time" />
+          </TableHead>
+          <TableHead className="px-4 sm:px-6">
+            <Trans i18nKey="cart:table.location" />
+          </TableHead>
+          <TableHead className="px-4 sm:px-6">
+            <Trans i18nKey="cart:table.quantity" />
+          </TableHead>
+          <TableHead className="min-w-[100px] px-4 sm:px-6">
+            <Trans i18nKey="cart:table.price" />
+          </TableHead>
+          <TableHead className="min-w-[100px] px-4 text-right sm:px-6">
+            <Trans i18nKey="cart:table.total" />
+          </TableHead>
+          <TableHead className="px-4 sm:px-6"></TableHead>
+          <TableHead className="px-4 sm:px-6"></TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {items
+          .sort((a, b) =>
+            (a.created_at ?? '') > (b.created_at ?? '') ? -1 : 1,
+          )
+          .map((item) => (
+            <CartServiceItem
+              key={item.id}
+              item={item}
+              currencyCode={cart.currency_code}
+              isUnavailable={unavailableLineItemIds?.includes(item.id)}
+            />
+          ))}
+      </TableBody>
+    </Table>
+  );
+}

app/home/(user)/_components/cart/index.tsx

@@ -13,10 +13,12 @@ import { Trans } from '@kit/ui/trans';
 
 import AnalysisLocation from './analysis-location';
 import CartItems from './cart-items';
+import CartServiceItems from './cart-service-items';
 import DiscountCode from './discount-code';
 import { initiatePayment } from '../../_lib/server/cart-actions';
 import { useRouter } from 'next/navigation';
 import { AccountBalanceSummary } from '@kit/accounts/services/account-balance.service';
+import { EnrichedCartItem } from './types';
 
 const IS_DISCOUNT_SHOWN = true as boolean;
 
@@ -30,7 +32,7 @@ export default function Cart({
   accountId: string;
   cart: StoreCart | null;
   synlabAnalyses: StoreCartLineItem[];
-  ttoServiceItems: StoreCartLineItem[];
+  ttoServiceItems: EnrichedCartItem[];
   balanceSummary: AccountBalanceSummary | null;
 }) {
   const {
@@ -39,6 +41,9 @@ export default function Cart({
 
   const [isInitiatingSession, setIsInitiatingSession] = useState(false);
   const router = useRouter();
+  const [unavailableLineItemIds, setUnavailableLineItemIds] =
+    useState<string[]>();
+
   const items = cart?.items ?? [];
   const hasCartItems = cart && Array.isArray(items) && items.length > 0;
 
@@ -66,12 +71,15 @@ export default function Cart({
     setIsInitiatingSession(true);
 
     try {
-      const { url, isFullyPaidByBenefits, orderId } = await initiatePayment({
+      const { url, isFullyPaidByBenefits, orderId, unavailableLineItemIds } = await initiatePayment({
         accountId,
         balanceSummary: balanceSummary!,
         cart: cart!,
         language,
       });
+      if (unavailableLineItemIds) {
+        setUnavailableLineItemIds(unavailableLineItemIds);
+      }
       if (url) {
         window.location.href = url;
       } else if (isFullyPaidByBenefits) {
@@ -99,10 +107,11 @@ export default function Cart({
           items={synlabAnalyses}
           productColumnLabelKey="cart:items.synlabAnalyses.productColumnLabel"
         />
-        <CartItems
+        <CartServiceItems
           cart={cart}
           items={ttoServiceItems}
           productColumnLabelKey="cart:items.ttoServices.productColumnLabel"
+          unavailableLineItemIds={unavailableLineItemIds}
         />
       </div>
       {hasCartItems && (
@@ -202,6 +211,10 @@ export default function Cart({
                 cart={{ ...cart }}
                 synlabAnalyses={synlabAnalyses}
               />
+              <AnalysisLocation
+                cart={{ ...cart }}
+                synlabAnalyses={synlabAnalyses}
+              />
             </CardContent>
           </Card>
         )}

app/home/(user)/_components/cart/types.ts

@@ -1,3 +1,6 @@
+import { StoreCartLineItem } from "@medusajs/types";
+import { Reservation } from "~/lib/types/reservation";
+
 export interface MontonioOrderToken {
   uuid: string;
   accessKey: string;
@@ -10,6 +13,12 @@ export interface MontonioOrderToken {
     | 'PENDING'
     | 'EXPIRED'
     | 'REFUNDED';
+    | 'PAID'
+    | 'FAILED'
+    | 'CANCELLED'
+    | 'PENDING'
+    | 'EXPIRED'
+    | 'REFUNDED';
   paymentMethod: string;
   grandTotal: number;
   currency: string;
@@ -20,3 +29,10 @@ export interface MontonioOrderToken {
   iat: number;
   exp: number;
 }
+
+export enum CartItemType {
+  analysisOrders = 'analysisOrders',
+  ttoServices = 'ttoServices',
+}
+
+export type EnrichedCartItem = StoreCartLineItem & { reservation: Reservation };

app/home/(user)/_components/order-analyses-cards.tsx

@@ -103,7 +103,6 @@ export default function OrderAnalysesCards({
                   {title}
                   {description && (
                     <>
-                      {'  '}
                       <InfoTooltip
                         content={
                           <div className="flex flex-col gap-2">

app/home/(user)/_components/order/order-details.tsx

@@ -2,16 +2,18 @@ import { formatDate } from 'date-fns';
 
 import { Trans } from '@kit/ui/trans';
 
-import type { AnalysisOrder } from '~/lib/types/analysis-order';
-
-export default function OrderDetails({ order }: { order: AnalysisOrder }) {
+export default function OrderDetails({
+  order,
+}: {
+  order: { id: string; created_at: string | Date };
+}) {
   return (
     <div className="flex flex-col gap-y-2">
       <div>
         <span className="font-bold">
           <Trans i18nKey="cart:orderConfirmed.orderNumber" />:{' '}
         </span>
-        <span className="break-all">{order.medusa_order_id}</span>
+        <span className="break-all">{order.id}</span>
       </div>
 
       <div>

app/home/(user)/_components/orders/order-block.tsx

@@ -5,51 +5,77 @@ import { Eye } from 'lucide-react';
 
 import { Trans } from '@kit/ui/makerkit/trans';
 
-import type { AnalysisOrder } from '~/lib/types/analysis-order';
+import type { AnalysisOrder } from '~/lib/types/order';
 
 import OrderItemsTable from './order-items-table';
 
 export default function OrderBlock({
   analysisOrder,
+  medusaOrderStatus,
   itemsAnalysisPackage,
+  itemsTtoService,
   itemsOther,
+  medusaOrderId,
 }: {
-  analysisOrder: AnalysisOrder;
+  analysisOrder?: AnalysisOrder;
+  medusaOrderStatus: string;
   itemsAnalysisPackage: StoreOrderLineItem[];
+  itemsTtoService: StoreOrderLineItem[];
   itemsOther: StoreOrderLineItem[];
+  medusaOrderId: string;
 }) {
   return (
     <div className="flex flex-col gap-4">
       <h4>
         <Trans
           i18nKey="analysis-results:orderTitle"
-          values={{ orderNumber: analysisOrder.medusa_order_id }}
+          values={{ orderNumber: medusaOrderId }}
         />
-        {` (${analysisOrder.id})`}
       </h4>
-      <div className="flex gap-2">
-        <h5>
-          <Trans i18nKey={`orders:status.${analysisOrder.status}`} />
-        </h5>
-        <Link
-          href={`/home/order/${analysisOrder.id}`}
-          className="text-small-regular flex items-center justify-between"
-        >
-          <button className="text-ui-fg-subtle hover:text-ui-fg-base flex cursor-pointer gap-x-1">
-            <Eye />
-          </button>
-        </Link>
-      </div>
+      {analysisOrder && (
+        <div className="flex gap-2">
+          <h5>
+            <Trans i18nKey={`orders:status.${analysisOrder.status}`} />
+          </h5>
+          <Link
+            href={`/home/order/${analysisOrder.id}`}
+            className="text-small-regular flex items-center justify-between"
+          >
+            <button className="text-ui-fg-subtle hover:text-ui-fg-base flex cursor-pointer gap-x-1">
+              <Eye />
+            </button>
+          </Link>
+        </div>
+      )}
       <div className="flex flex-col gap-4">
-        <OrderItemsTable
-          items={itemsAnalysisPackage}
-          title="orders:table.analysisPackage"
-          analysisOrder={analysisOrder}
-        />
+        {analysisOrder && (
+          <OrderItemsTable
+            items={itemsAnalysisPackage}
+            title="orders:table.analysisPackage"
+            order={{
+              medusaOrderId: analysisOrder.medusa_order_id,
+              id: analysisOrder.id,
+              status: analysisOrder.status,
+            }}
+          />
+        )}
+        {itemsTtoService && (
+          <OrderItemsTable
+            items={itemsTtoService}
+            title="orders:table.ttoService"
+            type="ttoService"
+            order={{
+              status: medusaOrderStatus.toUpperCase(),
+              medusaOrderId,
+            }}
+          />
+        )}
         <OrderItemsTable
           items={itemsOther}
           title="orders:table.otherOrders"
-          analysisOrder={analysisOrder}
+          order={{
+            status: analysisOrder?.status,
+          }}
         />
       </div>
     </div>

app/home/(user)/_components/orders/order-items-table.tsx

@@ -4,7 +4,6 @@ import { useRouter } from 'next/navigation';
 
 import { StoreOrderLineItem } from '@medusajs/types';
 import { formatDate } from 'date-fns';
-import { Eye } from 'lucide-react';
 
 import { pathsConfig } from '@kit/shared/config';
 import { Button } from '@kit/ui/button';
@@ -18,18 +17,22 @@ import {
 } from '@kit/ui/table';
 import { Trans } from '@kit/ui/trans';
 
-import type { AnalysisOrder } from '~/lib/types/analysis-order';
+import type { Order } from '~/lib/types/order';
 
 import { logAnalysisResultsNavigateAction } from './actions';
 
+export type OrderItemType = 'analysisOrder' | 'ttoService';
+
 export default function OrderItemsTable({
   items,
   title,
-  analysisOrder,
+  order,
+  type = 'analysisOrder',
 }: {
   items: StoreOrderLineItem[];
   title: string;
-  analysisOrder: AnalysisOrder;
+  order: Order;
+  type?: OrderItemType;
 }) {
   const router = useRouter();
 
@@ -37,9 +40,15 @@ export default function OrderItemsTable({
     return null;
   }
 
-  const openAnalysisResults = async () => {
-    await logAnalysisResultsNavigateAction(analysisOrder.medusa_order_id);
-    router.push(`${pathsConfig.app.analysisResults}/${analysisOrder.id}`);
+  const isAnalysisOrder = type === 'analysisOrder';
+
+  const openDetailedView = async () => {
+    if (isAnalysisOrder && order?.medusaOrderId && order?.id) {
+      await logAnalysisResultsNavigateAction(order.medusaOrderId);
+      router.push(`${pathsConfig.app.analysisResults}/${order.id}`);
+    } else {
+      router.push(`${pathsConfig.app.myOrders}/${order.medusaOrderId}`);
+    }
   };
 
   return (
@@ -55,7 +64,7 @@ export default function OrderItemsTable({
           <TableHead className="px-6">
             <Trans i18nKey="orders:table.status" />
           </TableHead>
-          <TableHead className="px-6"></TableHead>
+          {isAnalysisOrder && <TableHead className="px-6"></TableHead>}
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -76,11 +85,13 @@ export default function OrderItemsTable({
               </TableCell>
 
               <TableCell className="min-w-[180px] px-6">
-                <Trans i18nKey={`orders:status.${analysisOrder.status}`} />
+                <Trans
+                  i18nKey={`orders:status.${type}.${order?.status ?? 'CONFIRMED'}`}
+                />
               </TableCell>
 
               <TableCell className="px-6 text-right">
-                <Button size="sm" onClick={openAnalysisResults}>
+                <Button size="sm" onClick={openDetailedView}>
                   <Trans i18nKey="analysis-results:view" />
                 </Button>
               </TableCell>

app/home/(user)/_components/service-categories.tsx

@@ -4,17 +4,20 @@ import React from 'react';
 
 import { redirect } from 'next/navigation';
 
-import { createPath, pathsConfig } from '@/packages/shared/src/config';
+import { pathsConfig } from '@/packages/shared/src/config';
+import { StoreProduct } from '@medusajs/types';
 import { ComponentInstanceIcon } from '@radix-ui/react-icons';
 
 import { cn } from '@kit/ui/shadcn';
-import { Card, CardDescription, CardTitle } from '@kit/ui/shadcn/card';
+import { Card, CardDescription } from '@kit/ui/shadcn/card';
 
 export interface ServiceCategory {
   name: string;
   handle: string;
   color: string;
   description: string;
+  products: StoreProduct[];
+  countryCode: string;
 }
 
 const ServiceCategories = ({

app/home/(user)/_lib/server/actions.ts

@@ -0,0 +1,43 @@
+'use server';
+
+import { updateLineItem } from '@lib/data/cart';
+import { StoreProductVariant } from '@medusajs/types';
+
+import { handleAddToCart } from '~/lib/services/medusaCart.service';
+import { createInitialReservation } from '~/lib/services/reservation.service';
+
+export async function createInitialReservationAction(
+  selectedVariant: Pick<StoreProductVariant, 'id'>,
+  countryCode: string,
+  serviceId: number,
+  clinicId: number,
+  appointmentUserId: number,
+  syncUserId: number,
+  startTime: Date,
+  locationId: number | null,
+  comments?: string,
+) {
+  const { addedItem } = await handleAddToCart({
+    selectedVariant,
+    countryCode,
+  });
+
+  if (addedItem) {
+    const reservation = await createInitialReservation({
+      serviceId,
+      clinicId,
+      appointmentUserId,
+      syncUserID: syncUserId,
+      startTime,
+      medusaLineItemId: addedItem.id,
+      locationId,
+      comments,
+    });
+
+    await updateLineItem({
+      lineId: addedItem.id,
+      quantity: addedItem.quantity,
+      metadata: { connectedOnlineReservationId: reservation.id },
+    });
+  }
+}

app/home/(user)/_lib/server/cart-actions.ts

@@ -17,6 +17,9 @@ import { AccountWithParams } from "@/packages/features/accounts/src/types/accoun
 import { createI18nServerInstance } from "~/lib/i18n/i18n.server";
 import { getSupabaseServerAdminClient } from "@/packages/supabase/src/clients/server-admin-client";
 import { createNotificationsApi } from "@/packages/features/notifications/src/server/api";
+import { FailureReason } from '~/lib/types/connected-online';
+import { getOrderedTtoServices } from '~/lib/services/reservation.service';
+import { bookAppointment } from '~/lib/services/connected-online.service';
 
 const ANALYSIS_PACKAGES_TYPE_HANDLE = 'analysis-packages';
 const ANALYSIS_TYPE_HANDLE = 'synlab-analysis';
@@ -77,14 +80,14 @@ export const initiatePayment = async ({
       if (!montonioPaymentSessionId) {
         throw new Error('Montonio payment session ID is missing');
       }
-      const url = await handleNavigateToPayment({
+      const props = await handleNavigateToPayment({
         language,
         paymentSessionId: montonioPaymentSessionId,
         amount: totalByMontonio,
         currencyCode: cart.currency_code,
         cartId: cart.id,
       });
-      return { url };
+      return { ...props, isFullyPaidByBenefits };
     } else {
       // place order if all paid already
       const { orderId } = await handlePlaceOrder({ cart });
@@ -109,13 +112,13 @@ export const initiatePayment = async ({
       if (!webhookResponse.ok) {
         throw new Error('Failed to send company benefits webhook');
       }
-      return { isFullyPaidByBenefits, orderId };
+      return { isFullyPaidByBenefits, orderId, unavailableLineItemIds: [] };
     }
   } catch (error) {
     console.error('Error initiating payment', error);
   }
 
-  return { url: null }
+  return { url: null, isFullyPaidByBenefits: false, orderId: null, unavailableLineItemIds: [] };
 }
 
 export async function handlePlaceOrder({
@@ -136,6 +139,8 @@ export async function handlePlaceOrder({
       medusaOrder,
     });
 
+    const orderContainsSynlabItems = !!orderedAnalysisElements?.length;
+
     try {
       const existingAnalysisOrder = await getAnalysisOrder({
         medusaOrderId: medusaOrder.id,
@@ -148,15 +153,38 @@ export async function handlePlaceOrder({
       // ignored
     }
 
-    const orderId = await createAnalysisOrder({
-      medusaOrder,
-      orderedAnalysisElements,
-    });
+    let orderId: number | undefined = undefined;
+    if (orderContainsSynlabItems) {
+      orderId = await createAnalysisOrder({
+        medusaOrder,
+        orderedAnalysisElements,
+      });
+    }
+
     const orderResult = await getOrderResultParameters(medusaOrder);
 
     const { medusaOrderId, email, analysisPackageOrder, analysisItemsOrder } =
       orderResult;
 
+    const orderedTtoServices = await getOrderedTtoServices({ medusaOrder });
+    let bookServiceResults: {
+      success: boolean;
+      reason?: FailureReason;
+      serviceId?: number;
+    }[] = [];
+    if (orderedTtoServices?.length) {
+      const bookingPromises = orderedTtoServices.map((service) =>
+        bookAppointment(
+          service.service_id,
+          service.clinic_id,
+          service.service_user_id,
+          service.sync_user_id,
+          service.start_time,
+        ),
+      );
+      bookServiceResults = await Promise.all(bookingPromises);
+    }
+
     if (email) {
       if (analysisPackageOrder) {
         await sendAnalysisPackageOrderEmail({
@@ -184,6 +212,17 @@ export async function handlePlaceOrder({
       await sendOrderToMedipost({ medusaOrderId, orderedAnalysisElements });
     }
 
+    if (bookServiceResults.some(({ success }) => success === false)) {
+      const failedServiceBookings = bookServiceResults.filter(
+        ({ success }) => success === false,
+      );
+      return {
+        success: false,
+        failedServiceBookings,
+        orderId,
+      };
+    }
+
     return { success: true, orderId };
   } catch (error) {
     console.error('Failed to place order', error);

app/home/(user)/_lib/server/is-valid-open-ai-env.ts

@@ -0,0 +1,13 @@
+import OpenAI from 'openai';
+
+export const isValidOpenAiEnv = async () => {
+  const client = new OpenAI();
+
+  try {
+    await client.models.list();
+    return true;
+  } catch (e) {
+    console.log('No openAI env');
+    return false;
+  }
+};

app/home/(user)/_lib/server/load-analyses.ts

@@ -45,10 +45,6 @@ async function analysesLoader() {
       })
     : null;
 
-  const serviceCategories = productCategories.filter(
-    ({ parent_category }) => parent_category?.handle === 'tto-categories',
-  );
-
   return {
     analyses:
       categoryProducts?.response.products

app/home/(user)/_lib/server/load-category.ts

@@ -1,20 +1,30 @@
 import { cache } from 'react';
 
-import { getProductCategories } from '@lib/data';
+import { getProductCategories, listProducts } from '@lib/data';
 
-import { ServiceCategory } from '../../_components/service-categories';
-
-async function categoryLoader({
-  handle,
-}: {
-  handle: string;
-}): Promise<{ category: ServiceCategory | null }> {
-  const response = await getProductCategories({
-    handle,
-    fields: '*products, is_active, metadata',
-  });
+import { loadCountryCodes } from './load-analyses';
 
+async function categoryLoader({ handle }: { handle: string }) {
+  const [response, countryCodes] = await Promise.all([
+    getProductCategories({
+      handle,
+      limit: 1,
+    }),
+    loadCountryCodes(),
+  ]);
   const category = response.product_categories[0];
+  const countryCode = countryCodes[0]!;
+
+  if (!response.product_categories?.[0]?.id) {
+    return { category: null };
+  }
+
+  const {
+    response: { products: categoryProducts },
+  } = await listProducts({
+    countryCode,
+    queryParams: { limit: 100, category_id: response.product_categories[0].id },
+  });
 
   return {
     category: {
@@ -25,6 +35,8 @@ async function categoryLoader({
       description: category?.description || '',
       handle: category?.handle || '',
       name: category?.name || '',
+      countryCode,
+      products: categoryProducts,
     },
   };
 }

app/home/(user)/_lib/server/load-tto-services.ts

@@ -10,38 +10,36 @@ async function ttoServicesLoader() {
   });
 
   const heroCategories = response.product_categories?.filter(
-    ({ parent_category, is_active, metadata }) =>
-      parent_category?.handle === 'tto-categories' &&
-      is_active &&
-      metadata?.isHero,
+    ({ parent_category, metadata }) =>
+      parent_category?.handle === 'tto-categories' && metadata?.isHero,
   );
 
   const ttoCategories = response.product_categories?.filter(
-    ({ parent_category, is_active, metadata }) =>
-      parent_category?.handle === 'tto-categories' &&
-      is_active &&
-      !metadata?.isHero,
+    ({ parent_category, metadata }) =>
+      parent_category?.handle === 'tto-categories' && !metadata?.isHero,
   );
 
   return {
     heroCategories:
-      heroCategories.map<ServiceCategory>(
-        ({ name, handle, metadata, description }) => ({
+      heroCategories.map<Omit<ServiceCategory, 'countryCode'>>(
+        ({ name, handle, metadata, description, products }) => ({
           name,
           handle,
           color:
             typeof metadata?.color === 'string' ? metadata.color : 'primary',
           description,
+          products: products ?? [],
         }),
       ) ?? [],
     ttoCategories:
-      ttoCategories.map<ServiceCategory>(
-        ({ name, handle, metadata, description }) => ({
+      ttoCategories.map<Omit<ServiceCategory, 'countryCode'>>(
+        ({ name, handle, metadata, description, products }) => ({
           name,
           handle,
           color:
             typeof metadata?.color === 'string' ? metadata.color : 'primary',
           description,
+          products: products ?? [],
         }),
       ) ?? [],
   };

app/home/[account]/_components/team-account-layout-sidebar.tsx

@@ -52,7 +52,6 @@ function SidebarContainer(props: {
       <SidebarContent>
         <SidebarNavigation config={config} />
       </SidebarContent>
-
     </Sidebar>
   );
 }

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

@@ -30,7 +30,9 @@ const HealthBenefitFields = () => {
               <Select {...field} onValueChange={field.onChange}>
                 <SelectTrigger>
                   <SelectValue
-                    placeholder={<Trans i18nKey="common:formField:occurrence" />}
+                    placeholder={
+                      <Trans i18nKey="common:formField:occurrence" />
+                    }
                   />
                 </SelectTrigger>
 

app/home/[account]/members/page.tsx

@@ -55,7 +55,9 @@ async function TeamAccountMembersPage({ params }: TeamAccountMembersPageProps) {
     <>
       <TeamAccountLayoutPageHeader
         title={<Trans i18nKey={'common:routes.companyMembers'} />}
-        description={<AppBreadcrumbs values={{ [account.slug]: account.name }}/>}
+        description={
+          <AppBreadcrumbs values={{ [account.slug]: account.name }} />
+        }
       />
 
       <PageBody>

app/home/[account]/settings/page.tsx

@@ -48,7 +48,9 @@ async function TeamAccountSettingsPage(props: TeamAccountSettingsPageProps) {
     <>
       <TeamAccountLayoutPageHeader
         title={<Trans i18nKey={'teams:settings.pageTitle'} />}
-        description={<AppBreadcrumbs values={{ [account.slug]: account.name }} />}
+        description={
+          <AppBreadcrumbs values={{ [account.slug]: account.name }} />
+        }
       />
 
       <PageBody>