MED-103: add booking functionality

2025-09-17 18:11:13 +03:00
parent 7c92b787ce
commit 22f7fa134b
44 changed files with 1923 additions and 479 deletions
--- a/app/api/job/handler/sync-connected-online.ts
+++ b/app/api/job/handler/sync-connected-online.ts
@@ -1,8 +1,42 @@
 import axios from 'axios';

+import { Tables } from '@kit/supabase/database';
 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';
@@ -16,14 +50,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,16 +82,35 @@ 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
+    const isDemoClinic = (clinicId: number) => clinicId === 2;
    if (isProd) {
-      clinics = responseData.Data.T_Lic.filter((clinic) => clinic.ID !== 2);
+      clinics = responseData.Data.T_Lic.filter(({ ID }) => !isDemoClinic(ID));
      services = responseData.Data.T_Service.filter(
-        (service) => service.ClinicID !== 2,
+        ({ ClinicID }) => !isDemoClinic(ClinicID),
+      );
+      serviceProviders = responseData.Data.T_Doctor.filter(
+        ({ ClinicID }) => !isDemoClinic(ClinicID),
+      );
+      jobTitleTranslations = createTranslationMap(
+        responseData.Data.P_JobTitleTranslations.filter(
+          ({ ClinicID }) => !isDemoClinic(ClinicID),
+        ),
      );
    } else {
-      clinics = responseData.Data.T_Lic.filter((clinic) => clinic.ID === 2);
-      services = responseData.Data.T_Service.filter(
-        (service) => service.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),
+        ),
      );
    }

@@ -64,6 +122,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,
      };
    });

@@ -87,45 +147,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)}`,
    );
--- a/app/home/(user)/(dashboard)/booking/[handle]/page.tsx
+++ b/app/home/(user)/(dashboard)/booking/[handle]/page.tsx
@@ -18,7 +18,11 @@ export const generateMetadata = async () => {
  };
 };

-async function BookingHandlePage({ params }: { params: { handle: string } }) {
+async function BookingHandlePage({
+  params,
+}: {
+  params: Promise<{ handle: string }>;
+}) {
  const { handle } = await params;
  const { category } = await loadCategory({ handle });

--- a/app/home/(user)/(dashboard)/cart/montonio-callback/actions.ts
+++ b/app/home/(user)/(dashboard)/cart/montonio-callback/actions.ts
@@ -1,45 +1,61 @@
 'use server';

+import { MontonioOrderToken } from '@/app/home/(user)/_components/cart/types';
+import { loadCurrentUserAccount } from '@/app/home/(user)/_lib/server/load-user-account';
+import { placeOrder, retrieveCart } from '@lib/data/cart';
+import { listProductTypes } from '@lib/data/products';
+import type { StoreOrder } from '@medusajs/types';
 import jwt from 'jsonwebtoken';
-import { z } from "zod";
-import { MontonioOrderToken } from "@/app/home/(user)/_components/cart/types";
-import { loadCurrentUserAccount } from "@/app/home/(user)/_lib/server/load-user-account";
-import { listProductTypes } from "@lib/data/products";
-import { placeOrder, retrieveCart } from "@lib/data/cart";
-import { createI18nServerInstance } from "~/lib/i18n/i18n.server";
-import { createAnalysisOrder, getAnalysisOrder } from '~/lib/services/order.service';
-import { getOrderedAnalysisIds, sendOrderToMedipost } from '~/lib/services/medipost.service';
+import { z } from 'zod';
+
+import type { AccountWithParams } from '@kit/accounts/api';
 import { createNotificationsApi } from '@kit/notifications/api';
 import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
-import type { AccountWithParams } from '@kit/accounts/api';
-import type { StoreOrder } from '@medusajs/types';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import {
+  bookAppointment,
+  getOrderedTtoServices,
+} from '~/lib/services/connected-online.service';
+import {
+  getOrderedAnalysisIds,
+  sendOrderToMedipost,
+} from '~/lib/services/medipost.service';
+import {
+  createAnalysisOrder,
+  getAnalysisOrder,
+} from '~/lib/services/order.service';
+
+import { FailureReason } from '../../../../../../lib/types/connected-online';

 const ANALYSIS_PACKAGES_TYPE_HANDLE = 'analysis-packages';
 const ANALYSIS_TYPE_HANDLE = 'synlab-analysis';
+const TTO_SERVICE_TYPE_HANDLE = 'tto-service';
 const MONTONIO_PAID_STATUS = 'PAID';

-const env = () => z
-  .object({
-    emailSender: z
-      .string({
-        error: 'EMAIL_SENDER is required',
-      })
-      .min(1),
-    siteUrl: z
-      .string({
-        error: 'NEXT_PUBLIC_SITE_URL is required',
-      })
-      .min(1),
-    isEnabledDispatchOnMontonioCallback: z
-      .boolean({
+const env = () =>
+  z
+    .object({
+      emailSender: z
+        .string({
+          error: 'EMAIL_SENDER is required',
+        })
+        .min(1),
+      siteUrl: z
+        .string({
+          error: 'NEXT_PUBLIC_SITE_URL is required',
+        })
+        .min(1),
+      isEnabledDispatchOnMontonioCallback: z.boolean({
        error: 'MEDIPOST_ENABLE_DISPATCH_ON_MONTONIO_CALLBACK is required',
      }),
-  })
-  .parse({
-    emailSender: process.env.EMAIL_SENDER,
-    siteUrl: process.env.NEXT_PUBLIC_SITE_URL!,
-    isEnabledDispatchOnMontonioCallback: process.env.MEDIPOST_ENABLE_DISPATCH_ON_MONTONIO_CALLBACK === 'true',
-  });
+    })
+    .parse({
+      emailSender: process.env.EMAIL_SENDER,
+      siteUrl: process.env.NEXT_PUBLIC_SITE_URL!,
+      isEnabledDispatchOnMontonioCallback:
+        process.env.MEDIPOST_ENABLE_DISPATCH_ON_MONTONIO_CALLBACK === 'true',
+    });

 const sendEmail = async ({
  account,
@@ -48,15 +64,17 @@ const sendEmail = async ({
  partnerLocationName,
  language,
 }: {
-  account: Pick<AccountWithParams, 'name' | 'id'>,
-  email: string,
-  analysisPackageName: string,
-  partnerLocationName: string,
-  language: string,
+  account: Pick<AccountWithParams, 'name' | 'id'>;
+  email: string;
+  analysisPackageName: string;
+  partnerLocationName: string;
+  language: string;
 }) => {
  const client = getSupabaseServerAdminClient();
  try {
-    const { renderSynlabAnalysisPackageEmail } = await import('@kit/email-templates');
+    const { renderSynlabAnalysisPackageEmail } = await import(
+      '@kit/email-templates'
+    );
    const { getMailer } = await import('@kit/mailers');

    const mailer = await getMailer();
@@ -78,15 +96,14 @@ const sendEmail = async ({
      .catch((error) => {
        throw new Error(`Failed to send email, message=${error}`);
      });
-    await createNotificationsApi(client)
-      .createNotification({
-        account_id: account.id,
-        body: html,
-      });
+    await createNotificationsApi(client).createNotification({
+      account_id: account.id,
+      body: html,
+    });
  } catch (error) {
    throw new Error(`Failed to send email, message=${error}`);
  }
-}
+};

 async function decodeOrderToken(orderToken: string) {
  const secretKey = process.env.MONTONIO_SECRET_KEY as string;
@@ -96,7 +113,7 @@ async function decodeOrderToken(orderToken: string) {
  }) as MontonioOrderToken;

  if (decoded.paymentStatus !== MONTONIO_PAID_STATUS) {
-    throw new Error("Payment not successful");
+    throw new Error('Payment not successful');
  }

  return decoded;
@@ -105,38 +122,49 @@ async function decodeOrderToken(orderToken: string) {
 async function getCartByOrderToken(decoded: MontonioOrderToken) {
  const [, , cartId] = decoded.merchantReferenceDisplay.split(':');
  if (!cartId) {
-    throw new Error("Cart ID not found");
+    throw new Error('Cart ID not found');
  }
  const cart = await retrieveCart(cartId);
  if (!cart) {
-    throw new Error("Cart not found");
+    throw new Error('Cart not found');
  }
  return cart;
 }

 async function getOrderResultParameters(medusaOrder: StoreOrder) {
  const { productTypes } = await listProductTypes();
-  const analysisPackagesType = productTypes.find(({ metadata }) => metadata?.handle === ANALYSIS_PACKAGES_TYPE_HANDLE);
-  const analysisType = productTypes.find(({ metadata }) => metadata?.handle === ANALYSIS_TYPE_HANDLE);
+  const analysisPackagesType = productTypes.find(
+    ({ metadata }) => metadata?.handle === ANALYSIS_PACKAGES_TYPE_HANDLE,
+  );
+  const analysisType = productTypes.find(
+    ({ metadata }) => metadata?.handle === ANALYSIS_TYPE_HANDLE,
+  );

-  const analysisPackageOrderItem = medusaOrder.items?.find(({ product_type_id }) => product_type_id === analysisPackagesType?.id);
-  const analysisItems = medusaOrder.items?.filter(({ product_type_id }) => product_type_id === analysisType?.id);
+  const analysisPackageOrderItem = medusaOrder.items?.find(
+    ({ product_type_id }) => product_type_id === analysisPackagesType?.id,
+  );
+  const analysisItems = medusaOrder.items?.filter(
+    ({ product_type_id }) => product_type_id === analysisType?.id,
+  );

  return {
    medusaOrderId: medusaOrder.id,
    email: medusaOrder.email,
    analysisPackageOrder: analysisPackageOrderItem
      ? {
-        partnerLocationName: analysisPackageOrderItem?.metadata?.partner_location_name as string ?? '',
-        analysisPackageName: analysisPackageOrderItem?.title ?? '',
-      }
-      : null,
-    analysisItemsOrder: Array.isArray(analysisItems) && analysisItems.length > 0
-      ? analysisItems.map(({ product }) => ({
-          analysisName: product?.title ?? '',
-          analysisId: product?.metadata?.analysisIdOriginal as string ?? '',
-        }))
+          partnerLocationName:
+            (analysisPackageOrderItem?.metadata
+              ?.partner_location_name as string) ?? '',
+          analysisPackageName: analysisPackageOrderItem?.title ?? '',
+        }
      : null,
+    analysisItemsOrder:
+      Array.isArray(analysisItems) && analysisItems.length > 0
+        ? analysisItems.map(({ product }) => ({
+            analysisName: product?.title ?? '',
+            analysisId: (product?.metadata?.analysisIdOriginal as string) ?? '',
+          }))
+        : null,
  };
 }

@@ -145,12 +173,12 @@ async function sendAnalysisPackageOrderEmail({
  email,
  analysisPackageOrder,
 }: {
-  account: AccountWithParams,
-  email: string,
+  account: AccountWithParams;
+  email: string;
  analysisPackageOrder: {
-    partnerLocationName: string,
-    analysisPackageName: string,
-  },
+    partnerLocationName: string;
+    analysisPackageName: string;
+  };
 }) {
  const { language } = await createI18nServerInstance();
  const { analysisPackageName, partnerLocationName } = analysisPackageOrder;
@@ -163,60 +191,114 @@ async function sendAnalysisPackageOrderEmail({
      language,
    });
  } catch (error) {
-    console.error("Failed to send email", error);
+    console.error('Failed to send email', error);
  }
 }

 export async function processMontonioCallback(orderToken: string) {
  const { account } = await loadCurrentUserAccount();
  if (!account) {
-    throw new Error("Account not found in context");
+    throw new Error('Account not found in context');
  }

  try {
    const decoded = await decodeOrderToken(orderToken);
    const cart = await getCartByOrderToken(decoded);

-    const medusaOrder = await placeOrder(cart.id, { revalidateCacheTags: false });
-    const orderedAnalysisElements = await getOrderedAnalysisIds({ medusaOrder });
+    const medusaOrder = await placeOrder(cart.id, {
+      revalidateCacheTags: false,
+    });
+    const orderedAnalysisElements = await getOrderedAnalysisIds({
+      medusaOrder,
+    });
+
+    const orderContainsSynlabItems = !!orderedAnalysisElements?.length;

    try {
-      const existingAnalysisOrder = await getAnalysisOrder({ medusaOrderId: medusaOrder.id });
-      console.info(`Analysis order already exists for medusaOrderId=${medusaOrder.id}, orderId=${existingAnalysisOrder.id}`);
+      const existingAnalysisOrder = await getAnalysisOrder({
+        medusaOrderId: medusaOrder.id,
+      });
+      console.info(
+        `Analysis order already exists for medusaOrderId=${medusaOrder.id}, orderId=${existingAnalysisOrder.id}`,
+      );
      return { success: true, orderId: existingAnalysisOrder.id };
    } catch {
      // ignored
    }

-    const orderId = await createAnalysisOrder({ medusaOrder, orderedAnalysisElements });
+    let orderId;
+    if (orderContainsSynlabItems) {
+      orderId = await createAnalysisOrder({
+        medusaOrder,
+        orderedAnalysisElements,
+      });
+    }
+
    const orderResult = await getOrderResultParameters(medusaOrder);

-    const { medusaOrderId, email, analysisPackageOrder, analysisItemsOrder } = orderResult;
+    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({ account, email, analysisPackageOrder });
+        await sendAnalysisPackageOrderEmail({
+          account,
+          email,
+          analysisPackageOrder,
+        });
      } else {
        console.info(`Order has no analysis package, skipping email.`);
      }

      if (analysisItemsOrder) {
        // @TODO send email for separate analyses
-        console.warn(`Order has analysis items, but no email template exists yet`);
+        console.warn(
+          `Order has analysis items, but no email template exists yet`,
+        );
      } else {
        console.info(`Order has no analysis items, skipping email.`);
      }
    } else {
-      console.error("Missing email to send order result email", orderResult);
+      console.error('Missing email to send order result email', orderResult);
    }

-    if (env().isEnabledDispatchOnMontonioCallback) {
+    if (env().isEnabledDispatchOnMontonioCallback && orderContainsSynlabItems) {
      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);
+    console.error('Failed to place order', error);
    throw new Error(`Failed to place order, message=${error}`);
  }
 }
--- a/app/home/(user)/(dashboard)/cart/montonio-callback/client-component.tsx
+++ b/app/home/(user)/(dashboard)/cart/montonio-callback/client-component.tsx
@@ -29,8 +29,13 @@ export default function MontonioCallbackClient({ orderToken, error }: {
      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');
--- a/app/home/(user)/(dashboard)/cart/montonio-callback/error/page.tsx
+++ b/app/home/(user)/(dashboard)/cart/montonio-callback/error/page.tsx
@@ -1,11 +1,17 @@
+import { use } from 'react';
+
 import Link from 'next/link';

-import { PageBody, PageHeader } from '@/packages/ui/src/makerkit/page';
 import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
-import { Trans } from '@kit/ui/trans';
+import { PageBody, PageHeader } from '@/packages/ui/src/makerkit/page';
+
+import { Button } from '@kit/ui/button';
 import { Alert, AlertDescription } from '@kit/ui/shadcn/alert';
 import { AlertTitle } from '@kit/ui/shadcn/alert';
-import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+import { FailureReason } from '~/lib/types/connected-online';
+import { toArray } from '~/lib/utils';

 export async function generateMetadata() {
  const { t } = await createI18nServerInstance();
@@ -15,7 +21,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" />} />
@@ -27,9 +41,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>

--- a/app/home/(user)/(dashboard)/cart/page.tsx
+++ b/app/home/(user)/(dashboard)/cart/page.tsx
@@ -1,15 +1,18 @@
-import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
-import { PageBody, PageHeader } from '@/packages/ui/src/makerkit/page';
-
 import { notFound } from 'next/navigation';

+import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
+import { PageBody, PageHeader } from '@/packages/ui/src/makerkit/page';
 import { retrieveCart } from '@lib/data/cart';
-import Cart from '../../_components/cart';
 import { listProductTypes } from '@lib/data/products';
-import CartTimer from '../../_components/cart/cart-timer';
+
 import { Trans } from '@kit/ui/trans';
+
 import { withI18n } from '~/lib/i18n/with-i18n';

+import { findProductTypeIdByHandle } from '~/lib/utils';
+import Cart from '../../_components/cart';
+import CartTimer from '../../_components/cart/cart-timer';
+
 export async function generateMetadata() {
  const { t } = await createI18nServerInstance();

@@ -20,34 +23,62 @@ export async function generateMetadata() {

 async function CartPage() {
  const cart = await retrieveCart().catch((error) => {
-    console.error("Failed to retrieve cart", error);
+    console.error('Failed to retrieve cart', error);
    return notFound();
  });

  const { productTypes } = await listProductTypes();
-  const analysisPackagesType = productTypes.find(({ metadata }) => metadata?.handle === 'analysis-packages');
-  const synlabAnalysisType = productTypes.find(({ metadata }) => metadata?.handle === 'synlab-analysis');
-  const synlabAnalyses = analysisPackagesType && synlabAnalysisType && cart?.items
-    ? cart.items.filter((item) => {
-        const productTypeId = item.product?.type_id;
-        if (!productTypeId) {
-          return false;
-        }
-        return [analysisPackagesType.id, synlabAnalysisType.id].includes(productTypeId);
-      })
-    : [];
-  const ttoServiceItems = cart?.items?.filter((item) => !synlabAnalyses.some((analysis) => analysis.id === item.id)) ?? [];

-  const otherItemsSorted = ttoServiceItems.sort((a, b) => (a.updated_at ?? "") > (b.updated_at ?? "") ? -1 : 1);
+  const synlabAnalysisTypeId = findProductTypeIdByHandle(
+    productTypes,
+    'synlab-analysis',
+  );
+  const analysisPackagesTypeId = findProductTypeIdByHandle(
+    productTypes,
+    'analysis-packages',
+  );
+  const ttoServiceTypeId = findProductTypeIdByHandle(
+    productTypes,
+    'tto-service',
+  );
+
+  const synlabAnalyses =
+    analysisPackagesTypeId && synlabAnalysisTypeId && cart?.items
+      ? cart.items.filter((item) => {
+          const productTypeId = item.product?.type_id;
+          if (!productTypeId) {
+            return false;
+          }
+          return [analysisPackagesTypeId, synlabAnalysisTypeId].includes(
+            productTypeId,
+          );
+        })
+      : [];
+  const ttoServiceItems =
+    ttoServiceTypeId && cart?.items
+      ? cart?.items?.filter((item) => {
+          const productTypeId = item.product?.type_id;
+          return productTypeId && productTypeId === ttoServiceTypeId;
+        })
+      : [];
+
+  const otherItemsSorted = ttoServiceItems.sort((a, b) =>
+    (a.updated_at ?? '') > (b.updated_at ?? '') ? -1 : 1,
+  );
  const item = otherItemsSorted[0];
-  const isTimerShown = ttoServiceItems.length > 0 && !!item && !!item.updated_at;
+  const isTimerShown =
+    ttoServiceItems.length > 0 && !!item && !!item.updated_at;

  return (
    <PageBody>
      <PageHeader title={<Trans i18nKey="cart:title" />}>
        {isTimerShown && <CartTimer cartItem={item} />}
      </PageHeader>
-      <Cart cart={cart} synlabAnalyses={synlabAnalyses} ttoServiceItems={ttoServiceItems} />
+      <Cart
+        cart={cart}
+        synlabAnalyses={synlabAnalyses}
+        ttoServiceItems={ttoServiceItems}
+      />
    </PageBody>
  );
 }
--- a/app/home/(user)/(dashboard)/order/page.tsx
+++ b/app/home/(user)/(dashboard)/order/page.tsx
@@ -1,18 +1,22 @@
+import React from 'react';
+
 import { redirect } from 'next/navigation';

-import { listOrders } from '~/medusa/lib/data/orders';
 import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
 import { listProductTypes } from '@lib/data/products';
-import { PageBody } from '@kit/ui/makerkit/page';
-import { pathsConfig } from '@kit/shared/config';
-
-import { Trans } from '@kit/ui/trans';
-import { HomeLayoutPageHeader } from '../../_components/home-page-header';
-import { getAnalysisOrders } from '~/lib/services/order.service';
-import OrderBlock from '../../_components/orders/order-block';
-import React from 'react';
 import { Divider } from '@medusajs/ui';
+
+import { pathsConfig } from '@kit/shared/config';
+import { PageBody } from '@kit/ui/makerkit/page';
+import { Trans } from '@kit/ui/trans';
+
 import { withI18n } from '~/lib/i18n/with-i18n';
+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';
+import OrderBlock from '../../_components/orders/order-block';

 export async function generateMetadata() {
  const { t } = await createI18nServerInstance();
@@ -25,13 +29,21 @@ export async function generateMetadata() {
 async function OrdersPage() {
  const medusaOrders = await listOrders();
  const analysisOrders = await getAnalysisOrders();
+  const ttoOrders = await getTtoOrders();
  const { productTypes } = await 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 (
    <>
@@ -40,26 +52,41 @@ 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);
-          const medusaOrderItemsOther = medusaOrderItems.filter((item) => item.product_type_id !== analysisPackagesType?.id);
+          const medusaOrderItemsAnalysisPackages = medusaOrderItems.filter(
+            (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 ||
+              ![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}
                itemsAnalysisPackage={medusaOrderItemsAnalysisPackages}
+                itemsTtoService={medusaOrderItemsTtoServices}
                itemsOther={medusaOrderItemsOther}
              />
            </React.Fragment>
-          )
+          );
        })}
        {analysisOrders.length === 0 && (
          <h5 className="mt-6">
--- a/app/home/(user)/_components/booking/booking-container.tsx
+++ b/app/home/(user)/_components/booking/booking-container.tsx
@@ -1,28 +1,57 @@
 'use client';

-import React from 'react';
+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 { ServiceCategory } from '../service-categories';
-import { BookingProvider } from './booking.provider';
+import { BookingProvider, useBooking } from './booking.provider';
 import LocationSelector from './location-selector';
 import ServiceSelector from './service-selector';
 import TimeSlots from './time-slots';

+const 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="rounded-md border"
+        {...(isLoadingTimeSlots && {
+          className: 'rounded-md border opacity-50 pointer-events-none',
+        })}
+      />
+    </Card>
+  );
+};
+
 const BookingContainer = ({ category }: { category: ServiceCategory }) => {
  return (
    <BookingProvider category={category}>
-      <div className="flex flex-row gap-6">
+      <div className="flex max-h-full flex-row gap-6">
        <div className="flex flex-col">
          <ServiceSelector products={category.products} />
-          <Card className="mb-4">
-            <Calendar />
-          </Card>
-          {/* <LocationSelector /> */}
+          <BookingCalendar />
+          <LocationSelector />
        </div>
-        <TimeSlots />
+        <TimeSlots countryCode={category.countryCode} />
      </div>
    </BookingProvider>
  );
--- a/app/home/(user)/_components/booking/booking.context.ts
+++ b/app/home/(user)/_components/booking/booking.context.ts
@@ -3,16 +3,75 @@ 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: string[];
+  timeSlots: TimeSlot[] | null;
  selectedService: StoreProduct | null;
-  setSelectedService: (selectedService: any) => void;
+  locations: Location[] | null;
+  selectedLocationId: number | null;
+  selectedDate?: Date;
+  isLoadingTimeSlots?: boolean;
+  setSelectedService: (selectedService?: StoreProduct) => void;
+  setSelectedLocationId: (selectedLocationId: number | null) => void;
  updateTimeSlots: (serviceId: number) => Promise<void>;
+  setSelectedDate: (selectedDate?: Date) => void;
 }>({
-  timeSlots: [],
+  timeSlots: null,
  selectedService: null,
+  locations: null,
+  selectedLocationId: null,
+  selectedDate: new Date(),
+  isLoadingTimeSlots: false,
  setSelectedService: (_) => _,
+  setSelectedLocationId: (_) => _,
  updateTimeSlots: async (_) => noop(),
+  setSelectedDate: (_) => _,
 });

 export { BookingContext };
--- a/app/home/(user)/_components/booking/booking.provider.tsx
+++ b/app/home/(user)/_components/booking/booking.provider.tsx
@@ -1,14 +1,14 @@
-import React, { useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';

 import { StoreProduct } from '@medusajs/types';

-import { getAvailableAppointmentsForService } from '~/lib/services/connected-online.service';
+import { getAvailableTimeSlotsForDisplay } from '~/lib/services/connected-online.service';

 import { ServiceCategory } from '../service-categories';
-import { BookingContext } from './booking.context';
+import { BookingContext, Location, TimeSlot } from './booking.context';

 export function useBooking() {
-  const context = React.useContext(BookingContext);
+  const context = useContext(BookingContext);

  if (!context) {
    throw new Error('useBooking must be used within a BookingProvider.');
@@ -24,21 +24,54 @@ export const BookingProvider: React.FC<{
  const [selectedService, setSelectedService] = useState<StoreProduct | null>(
    category.products[0] || null,
  );
-  const [timeSlots, setTimeSlots] = useState<string[]>([]);
+  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<boolean>(false);

-  const updateTimeSlots = async (serviceId: number) => {
-    const response = await getAvailableAppointmentsForService(serviceId);
-    console.log('updateTimeSlots response', response);
-    // Fetch time slots based on the selected service ID
+  useEffect(() => {
+    let metadataServiceIds = [];
+    try {
+      metadataServiceIds = JSON.parse(
+        selectedService?.metadata?.serviceIds as string,
+      );
+    } catch (e) {
+      return;
+    }
+    if (metadataServiceIds.length) {
+      updateTimeSlots(metadataServiceIds);
+    }
+  }, [selectedService?.metadata?.serviceIds, selectedLocationId]);
+
+  const updateTimeSlots = async (serviceIds: number[]) => {
+    setIsLoadingTimeSlots(true);
+    try {
+      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}
--- a/app/home/(user)/_components/booking/location-selector.tsx
+++ b/app/home/(user)/_components/booking/location-selector.tsx
@@ -1,9 +1,60 @@
-import React from 'react';
+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 = () => {
-  return <Card className="p-4">LocationSelector</Card>;
+  const { t } = useTranslation();
+  const {
+    selectedService,
+    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;
--- a/app/home/(user)/_components/booking/service-selector.tsx
+++ b/app/home/(user)/_components/booking/service-selector.tsx
@@ -1,9 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';

 import { StoreProduct } from '@medusajs/types';
-import { ArrowUp, ChevronDown } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';

-import { Button } from '@kit/ui/shadcn/button';
 import { Card } from '@kit/ui/shadcn/card';
 import { Label } from '@kit/ui/shadcn/label';
 import {
@@ -12,27 +11,26 @@ import {
  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, updateTimeSlots } = useBooking();
-  const [collapsed, setCollapsed] = React.useState(false);
-  const [firstFourProducts, setFirstFourProducts] = useState<StoreProduct[]>(
-    products.slice(0, 4),
-  );
+  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);
    setCollapsed(false);
-    await updateTimeSlots((product!.metadata!.serviceId as number) || 0);
  };

-  console.log('selectedService', selectedService);
  return (
    <Card className="mb-4 p-4">
-      <h5 className="text-semibold mb-2">Teenused</h5>
+      <h5 className="text-semibold mb-2">
+        <Trans i18nKey="booking:services" />
+      </h5>
      <Popover open={collapsed} onOpenChange={setCollapsed}>
        <div className="flex flex-col">
          <RadioGroup
@@ -56,7 +54,9 @@ const ServiceSelector = ({ products }: { products: StoreProduct[] }) => {
              onClick={() => setCollapsed((_) => !_)}
              className="flex cursor-pointer items-center justify-between border-t py-1"
            >
-              <span>Kuva kõik</span>
+              <span>
+                <Trans i18nKey="booking:showAll" />
+              </span>
              <ChevronDown />
            </div>
          </PopoverTrigger>
--- a/app/home/(user)/_components/booking/time-slots.tsx
+++ b/app/home/(user)/_components/booking/time-slots.tsx
@@ -1,94 +1,257 @@
-import React from 'react';
+import { useMemo, useState } from 'react';
+
+import { useRouter } from 'next/navigation';

 import { formatCurrency } from '@/packages/shared/src/utils';
-import { format } from 'date-fns';
+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 { AvailableAppointmentsResponse } from '~/lib/types/connected-online';
+import { createInitialReservationAction } from '../../_lib/server/actions';
+import { ServiceProvider, TimeSlot } from './booking.context';
+import { useBooking } from './booking.provider';

-const dummyData: AvailableAppointmentsResponse['Data']['T_Booking'] = [
-  {
-    ServiceID: 1,
-    StartTime: new Date('2024-10-10T10:00:00Z'),
-    EndTime: new Date('2024-10-10T11:00:00Z'),
-    HKServiceID: 0,
-    ClinicID: '',
-    LocationID: 0,
-    UserID: 0,
-    SyncUserID: 0,
-    PayorCode: '',
-  },
-  {
-    ServiceID: 1,
-    StartTime: new Date('2024-10-10T11:00:00Z'),
-    EndTime: new Date('2024-10-10T12:00:00Z'),
-    HKServiceID: 0,
-    ClinicID: '',
-    LocationID: 0,
-    UserID: 0,
-    SyncUserID: 0,
-    PayorCode: '',
-  },
-  {
-    ServiceID: 2,
-    StartTime: new Date('2024-10-10T12:00:00Z'),
-    EndTime: new Date('2024-10-10T13:00:00Z'),
-    HKServiceID: 0,
-    ClinicID: '',
-    LocationID: 0,
-    UserID: 0,
-    SyncUserID: 0,
-    PayorCode: '',
-  },
-];
+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 }: { countryCode: string }) => {
+  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(() => {
+      router.push(pathsConfig.app.cart);
+    });
+
+    toast.promise(() => bookTimePromise, {
+      success: <Trans i18nKey={'booking:bookTimeSuccess'} />,
+      error: <Trans i18nKey={'booking:bookTimeError'} />,
+      loading: <Trans i18nKey={'booking:bookTimeLoading'} />,
+    });
+  };

-const TimeSlots = () => {
  return (
-    <div className="flex w-full flex-col gap-2">
-      {dummyData.map((data) => (
-        <Card
-          className="flex justify-between p-4"
-          key={data.ServiceID + '-time-slot'}
-        >
-          <div>
-            <span>{format(data.StartTime.toString(), 'HH:mm')}</span>
-            <div className="flex">
-              <h5 className="after:mx-2 after:content-['·']">
-                Dr. Jüri Mardikas
-              </h5>
-              <span className="after:mx-2 after:content-['·']">Kardioloog</span>
-              <span>Tervisekassa aeg</span>
-            </div>
-            <div className="flex text-xs">
-              <span className="after:mx-2 after:content-['·']">
-                Ülemiste Tervisemaja 2
-              </span>
-              <span className="after:mx-2 after:content-['·']">
-                Ülemiste füsioteraapiakliinik
-              </span>
-              <span className="after:mx-2 after:content-['·']">
-                Sepapaja 2/1
-              </span>
-              <span>Tallinn</span>
-            </div>
+    <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;
+          return (
+            <Card className="flex justify-between 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 flex items-center justify-center gap-2">
+                <span className="text-sm font-semibold">
+                  {formatCurrency({
+                    currencyCode: 'EUR',
+                    locale: 'et-EE',
+                    value: price ?? '',
+                  })}
+                </span>
+                <Button onClick={() => handleBookTime(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 className="flex-end flex items-center justify-center gap-2">
-            <span className="text-sm font-semibold">
-              {formatCurrency({
-                currencyCode: 'EUR',
-                locale: 'et-EE',
-                value: 20,
-              })}
-            </span>
-            <Button>
-              <Trans i18nKey="Broneeri" />
+        )}
+      </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>
-        </Card>
-      ))}
+        </div>
+      )}
    </div>
  );
 };
--- a/app/home/(user)/_components/order-analyses-cards.tsx
+++ b/app/home/(user)/_components/order-analyses-cards.tsx
@@ -101,7 +101,6 @@ export default function OrderAnalysesCards({
                  {title}
                  {description && (
                    <>
-                      {'  '}
                      <InfoTooltip
                        content={
                          <div className='flex flex-col gap-2'>
--- a/app/home/(user)/_components/orders/order-block.tsx
+++ b/app/home/(user)/_components/orders/order-block.tsx
@@ -5,17 +5,19 @@ import OrderItemsTable from "./order-items-table";
 import Link from "next/link";
 import { Eye } from "lucide-react";

-export default function OrderBlock({ analysisOrder, itemsAnalysisPackage, itemsOther }: {
-  analysisOrder: AnalysisOrder,
+export default function OrderBlock({ analysisOrder, itemsAnalysisPackage, itemsTtoService, itemsOther, medusaOrderId }: {
+  analysisOrder?: AnalysisOrder,
  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 }} />
+        <Trans i18nKey="analysis-results:orderTitle" values={{ orderNumber: medusaOrderId }} />
      </h4>
-      <div className="flex gap-2">
+      {analysisOrder && <div className="flex gap-2">
        <h5>
          <Trans i18nKey={`orders:status.${analysisOrder.status}`} />
        </h5>
@@ -26,9 +28,10 @@ export default function OrderBlock({ analysisOrder, itemsAnalysisPackage, itemsO
            <Eye />
          </button>
        </Link>
-      </div>
+      </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" analysisOrder={analysisOrder} />}
+        {itemsTtoService && <OrderItemsTable items={itemsTtoService} title="orders:table.ttoService" type='ttoService' />}
        <OrderItemsTable items={itemsOther} title="orders:table.otherOrders" analysisOrder={analysisOrder} />
      </div>
    </div>
--- a/app/home/(user)/_components/orders/order-items-table.tsx
+++ b/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';
@@ -22,14 +21,18 @@ import { AnalysisOrder } from '~/lib/services/order.service';

 import { logAnalysisResultsNavigateAction } from './actions';

+export type OrderItemType = 'analysisOrder' | 'ttoService';
+
 export default function OrderItemsTable({
  items,
  title,
  analysisOrder,
+  type = 'analysisOrder',
 }: {
  items: StoreOrderLineItem[];
  title: string;
-  analysisOrder: AnalysisOrder;
+  analysisOrder?: AnalysisOrder;
+  type?: OrderItemType;
 }) {
  const router = useRouter();

@@ -37,9 +40,13 @@ export default function OrderItemsTable({
    return null;
  }

+  const isAnalysisOrder = type === 'analysisOrder';
+
  const openAnalysisResults = async () => {
-    await logAnalysisResultsNavigateAction(analysisOrder.medusa_order_id);
-    router.push(`${pathsConfig.app.analysisResults}/${analysisOrder.id}`);
+    if (analysisOrder) {
+      await logAnalysisResultsNavigateAction(analysisOrder.medusa_order_id);
+      router.push(`${pathsConfig.app.analysisResults}/${analysisOrder.id}`);
+    }
  };

  return (
@@ -52,10 +59,10 @@ export default function OrderItemsTable({
          <TableHead className="px-6">
            <Trans i18nKey="orders:table.createdAt" />
          </TableHead>
-          <TableHead className="px-6">
+          <TableHead className={'px-6'}>
            <Trans i18nKey="orders:table.status" />
          </TableHead>
-          <TableHead className="px-6"></TableHead>
+          {isAnalysisOrder && <TableHead className="px-6"></TableHead>}
        </TableRow>
      </TableHeader>
      <TableBody>
@@ -65,7 +72,7 @@ export default function OrderItemsTable({
          )
          .map((orderItem) => (
            <TableRow className="w-full" key={orderItem.id}>
-              <TableCell className="text-left w-[100%] px-6">
+              <TableCell className="w-[100%] px-6 text-left">
                <p className="txt-medium-plus text-ui-fg-base">
                  {orderItem.product_title}
                </p>
@@ -76,14 +83,18 @@ export default function OrderItemsTable({
              </TableCell>

              <TableCell className="min-w-[180px] px-6">
-                <Trans i18nKey={`orders:status.${analysisOrder.status}`} />
+                <Trans
+                  i18nKey={`orders:status.${type}.${analysisOrder?.status ?? 'CONFIRMED'}`}
+                />
              </TableCell>

-              <TableCell className="px-6 text-right">
-                <Button size="sm" onClick={openAnalysisResults}>
-                  <Trans i18nKey="analysis-results:view" />
-                </Button>
-              </TableCell>
+              {isAnalysisOrder && (
+                <TableCell className="px-6 text-right">
+                  <Button size="sm" onClick={openAnalysisResults}>
+                    <Trans i18nKey="analysis-results:view" />
+                  </Button>
+                </TableCell>
+              )}
            </TableRow>
          ))}
      </TableBody>
--- a/app/home/(user)/_components/service-categories.tsx
+++ b/app/home/(user)/_components/service-categories.tsx
@@ -17,6 +17,7 @@ export interface ServiceCategory {
  color: string;
  description: string;
  products: StoreProduct[];
+  countryCode: string;
 }

 const ServiceCategories = ({
--- a/app/home/(user)/_lib/server/actions.ts
+++ b/app/home/(user)/_lib/server/actions.ts
@@ -0,0 +1,65 @@
+'use server';
+
+import { StoreProductVariant } from '@medusajs/types';
+
+import {
+  bookAppointment,
+  createInitialReservation,
+} from '~/lib/services/connected-online.service';
+import { handleAddToCart } from '~/lib/services/medusaCart.service';
+
+import { updateLineItem } from '../../../../../packages/features/medusa-storefront/src/lib/data';
+
+export async function bookTimeAction(
+  serviceId: number,
+  clinicId: number,
+  appointmentUserId: number,
+  syncUserId: number,
+  startTime: Date,
+  comments?: string,
+) {
+  return bookAppointment(
+    serviceId,
+    clinicId,
+    appointmentUserId,
+    syncUserId,
+    startTime,
+    comments,
+  );
+}
+
+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,
+      startTime,
+      addedItem.id,
+      locationId,
+      comments,
+    );
+
+    await updateLineItem({
+      lineId: addedItem.id,
+      quantity: addedItem.quantity,
+      metadata: { connectedOnlineReservationId: reservation.id },
+    });
+  }
+}
--- a/app/home/(user)/_lib/server/load-analyses.ts
+++ b/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
--- a/app/home/(user)/_lib/server/load-category.ts
+++ b/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,7 +35,8 @@ async function categoryLoader({
      description: category?.description || '',
      handle: category?.handle || '',
      name: category?.name || '',
-      products: category?.products || [],
+      countryCode,
+      products: categoryProducts,
    },
  };
 }
--- a/app/home/(user)/_lib/server/load-tto-services.ts
+++ b/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 ?? [],
        }),
      ) ?? [],
  };