92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
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 MobileTableRow from './mobile-table-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>
|
|
<MobileTableRow
|
|
titleKey={productColumnLabelKey}
|
|
value={item.product_title}
|
|
/>
|
|
<MobileTableRow
|
|
titleKey="cart:table.time"
|
|
value={formatDateAndTime(item.reservation.startTime.toString())}
|
|
/>
|
|
<MobileTableRow
|
|
titleKey="cart:table.location"
|
|
value={item.reservation.location?.address ?? '-'}
|
|
/>
|
|
<MobileTableRow titleKey="cart:table.quantity" value={item.quantity} />
|
|
<MobileTableRow
|
|
titleKey="cart:table.price"
|
|
value={formatCurrency({
|
|
value: item.unit_price,
|
|
currencyCode,
|
|
locale: language,
|
|
})}
|
|
/>
|
|
<MobileTableRow
|
|
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;
|