add fields to tto order view

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

@@ -1,27 +1,63 @@
 import { formatDate } from 'date-fns';
 
+import { Database } from '@kit/supabase/database';
 import { Trans } from '@kit/ui/trans';
 
 export default function OrderDetails({
   order,
 }: {
-  order: { id: string; created_at: string | Date };
+  order: {
+    id: string;
+    created_at: string | Date;
+    location: Pick<
+      Database['medreport']['Tables']['connected_online_locations']['Row'],
+      'name' | 'address'
+    > | null;
+    serviceProvider: Pick<
+      Database['medreport']['Tables']['connected_online_providers']['Row'],
+      'email' | 'phone_number' | 'name'
+    > | null;
+  };
 }) {
+  const { id, created_at, location, serviceProvider } = order;
+
   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.id}</span>
+        <span className="break-all">{id}</span>
       </div>
 
       <div>
         <span className="font-bold">
           <Trans i18nKey="cart:orderConfirmed.orderDate" />:{' '}
         </span>
-        <span>{formatDate(order.created_at, 'dd.MM.yyyy HH:mm')}</span>
+        <span>{formatDate(created_at, 'dd.MM.yyyy HH:mm')}</span>
       </div>
+      {(location?.name || location?.address) && (
+        <div>
+          <span className="font-bold">
+            <Trans i18nKey="cart:orderConfirmed.location" />:{' '}
+          </span>
+          <span>
+            {location.name || location.address}{' '}
+            {location?.name ? location.address : ''}
+          </span>
+        </div>
+      )}
+
+      {serviceProvider && (
+        <div className="flex flex-col">
+          <span className="font-bold">
+            <Trans i18nKey="cart:orderConfirmed.serviceProvider" />:{' '}
+          </span>
+          <span>{serviceProvider.name}</span>
+          <span>{serviceProvider.phone_number}</span>
+          <span>{serviceProvider.email}</span>
+        </div>
+      )}
     </div>
   );
 }

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

@@ -5,13 +5,14 @@ import { Eye } from 'lucide-react';
 
 import { Trans } from '@kit/ui/makerkit/trans';
 
-import type { AnalysisOrder } from '~/lib/types/order';
+import type { AnalysisOrder, TTOOrder } from '~/lib/types/order';
 
 import OrderItemsTable from './order-items-table';
 
 export default function OrderBlock({
   analysisOrder,
   ttoLocation,
+  ttoReservation,
   medusaOrderStatus,
   itemsAnalysisPackage,
   itemsTtoService,
@@ -20,6 +21,7 @@ export default function OrderBlock({
 }: {
   analysisOrder?: AnalysisOrder;
   ttoLocation?: { name: string };
+  ttoReservation?: TTOOrder;
   medusaOrderStatus: string;
   itemsAnalysisPackage: StoreOrderLineItem[];
   itemsTtoService: StoreOrderLineItem[];
@@ -70,6 +72,8 @@ export default function OrderBlock({
               status: medusaOrderStatus.toUpperCase(),
               medusaOrderId,
               location: ttoLocation?.name,
+              bookingCode: ttoReservation?.booking_code,
+              clinicId: ttoReservation?.clinic_id,
             }}
           />
         )}

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

@@ -1,7 +1,10 @@
 'use client';
 
+import { useState } from 'react';
+
 import { useRouter } from 'next/navigation';
 
+import ConfirmationModal from '@/packages/shared/src/components/confirmation-modal';
 import { StoreOrderLineItem } from '@medusajs/types';
 import { formatDate } from 'date-fns';
 
@@ -19,6 +22,7 @@ import { Trans } from '@kit/ui/trans';
 
 import type { Order } from '~/lib/types/order';
 
+import { cancelTtoBooking } from '../../_lib/server/actions';
 import { logAnalysisResultsNavigateAction } from './actions';
 
 export type OrderItemType = 'analysisOrder' | 'ttoService';
@@ -35,12 +39,14 @@ export default function OrderItemsTable({
   type?: OrderItemType;
 }) {
   const router = useRouter();
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
 
   if (!items || items.length === 0) {
     return null;
   }
 
   const isAnalysisOrder = type === 'analysisOrder';
+  const isTtoservice = type === 'ttoService';
 
   const openDetailedView = async () => {
     if (isAnalysisOrder && order?.medusaOrderId && order?.id) {
@@ -50,7 +56,7 @@ export default function OrderItemsTable({
       router.push(`${pathsConfig.app.myOrders}/${order.medusaOrderId}`);
     }
   };
-
+  console.log('order', order);
   return (
     <Table className="border-separate rounded-lg border">
       <TableHeader className="text-ui-fg-subtle txt-medium-plus">
@@ -103,10 +109,30 @@ export default function OrderItemsTable({
                 <Button size="sm" onClick={openDetailedView}>
                   <Trans i18nKey="analysis-results:view" />
                 </Button>
+                {isTtoservice && order.bookingCode && (
+                  <Button
+                    size="sm"
+                    className="bg-warning/90 hover:bg-warning mt-2 w-full"
+                    onClick={() => setIsConfirmOpen(true)}
+                  >
+                    <Trans i18nKey="analysis-results:cancel" />
+                  </Button>
+                )}
               </TableCell>
             </TableRow>
           ))}
       </TableBody>
+      {order?.bookingCode && order?.clinicId && (
+        <ConfirmationModal
+          isOpen={isConfirmOpen}
+          onClose={() => setIsConfirmOpen(false)}
+          onConfirm={async () => {
+            await cancelTtoBooking(order.bookingCode!, order.clinicId!);
+          }}
+          titleKey="orders:confirmBookingCancel.title"
+          descriptionKey="orders:confirmBookingCancel.description"
+        />
+      )}
     </Table>
   );
 }