MED-193: improve mobile design for cart tables

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

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import { formatCurrency, formatDateAndTime } from '@/packages/shared/src/utils';
+import { useTranslation } from 'react-i18next';
+
+import { Trans } from '@kit/ui/makerkit/trans';
+import { Button } from '@kit/ui/shadcn/button';
+import { Table, TableBody, TableCell, TableRow } from '@kit/ui/shadcn/table';
+
+import CartItemDelete from './cart-item-delete';
+import MobileCartRow from './mobile-cart-row';
+import { EnrichedCartItem } from './types';
+
+const MobileCartServiceItems = ({
+  item,
+  currencyCode,
+  isUnavailable,
+  productColumnLabelKey,
+  setEditingItem,
+}: {
+  item: EnrichedCartItem;
+  currencyCode: string;
+  isUnavailable?: boolean;
+  productColumnLabelKey: string;
+  setEditingItem: (item: EnrichedCartItem | null) => void;
+}) => {
+  const {
+    i18n: { language },
+  } = useTranslation();
+
+  return (
+    <Table className="border-separate rounded-lg border p-2">
+      <TableBody>
+        <MobileCartRow
+          titleKey={productColumnLabelKey}
+          value={item.product_title}
+        />
+        <MobileCartRow
+          titleKey="cart:table.time"
+          value={formatDateAndTime(item.reservation.startTime.toString())}
+        />
+        <MobileCartRow
+          titleKey="cart:table.location"
+          value={item.reservation.location?.address ?? '-'}
+        />
+        <MobileCartRow titleKey="cart:table.quantity" value={item.quantity} />
+        <MobileCartRow
+          titleKey="cart:table.price"
+          value={formatCurrency({
+            value: item.unit_price,
+            currencyCode,
+            locale: language,
+          })}
+        />
+        <MobileCartRow
+          titleKey="cart:table.total"
+          value={
+            item.total &&
+            formatCurrency({
+              value: item.total,
+              currencyCode,
+              locale: language,
+            })
+          }
+        />
+        <TableRow>
+          <TableCell />
+          <TableCell className="flex w-full items-center justify-end gap-4 p-0 pt-2">
+            <CartItemDelete id={item.id} />
+            <Button onClick={() => setEditingItem(item)}>
+              <Trans i18nKey="common:change" />
+            </Button>
+          </TableCell>
+        </TableRow>
+
+        {isUnavailable && (
+          <TableRow>
+            <TableCell
+              colSpan={8}
+              className="text-destructive px-4 text-left sm:px-6"
+            >
+              <Trans i18nKey="booking:timeSlotUnavailable" />
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default MobileCartServiceItems;