MED-193: improve mobile design for cart tables

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

@@ -1,76 +1,26 @@
 '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,
+  setEditingItem,
 }: {
   item: EnrichedCartItem;
   currencyCode: string;
   isUnavailable?: boolean;
+  setEditingItem: (item: EnrichedCartItem | null) => void;
 }) {
-  const [editingItem, setEditingItem] = useState<EnrichedCartItem | null>(null);
   const {
     i18n: { language },
   } = useTranslation();
@@ -106,11 +56,12 @@ export default function CartServiceItem({
         </TableCell>
 
         <TableCell className="min-w-[80px] px-4 text-right sm:px-6">
-          {formatCurrency({
-            value: item.total,
-            currencyCode,
-            locale: language,
-          })}
+          {item.total &&
+            formatCurrency({
+              value: item.total,
+              currencyCode,
+              locale: language,
+            })}
         </TableCell>
 
         <TableCell className="px-4 text-right sm:px-6">
@@ -137,10 +88,6 @@ export default function CartServiceItem({
           </TableCell>
         </TableRow>
       )}
-      <EditCartServiceItemModal
-        item={editingItem}
-        onComplete={() => setEditingItem(null)}
-      />
     </>
   );
 }