add fields to tto order view

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>
   );
 }