94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { formatCurrency, formatDateAndTime } from '@/packages/shared/src/utils';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { Button } from '@kit/ui/button';
|
|
import { TableCell, TableRow } from '@kit/ui/table';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import CartItemDelete from './cart-item-delete';
|
|
import { EnrichedCartItem } from './types';
|
|
|
|
export default function CartServiceItem({
|
|
item,
|
|
currencyCode,
|
|
isUnavailable,
|
|
setEditingItem,
|
|
}: {
|
|
item: EnrichedCartItem;
|
|
currencyCode: string;
|
|
isUnavailable?: boolean;
|
|
setEditingItem: (item: EnrichedCartItem | null) => void;
|
|
}) {
|
|
const {
|
|
i18n: { language },
|
|
} = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
<TableRow className="w-full" data-testid="product-row">
|
|
<TableCell className="w-[100%] px-4 text-left sm:px-6">
|
|
<p
|
|
className="txt-medium-plus text-ui-fg-base"
|
|
data-testid="product-title"
|
|
>
|
|
{item.product_title}
|
|
</p>
|
|
</TableCell>
|
|
|
|
<TableCell className="px-4 sm:px-6">
|
|
{formatDateAndTime(item.reservation.startTime.toString())}
|
|
</TableCell>
|
|
|
|
<TableCell className="px-4 sm:px-6">
|
|
{item.reservation.location?.address ?? '-'}
|
|
</TableCell>
|
|
|
|
<TableCell className="px-4 sm:px-6">{item.quantity}</TableCell>
|
|
|
|
<TableCell className="min-w-[80px] px-4 sm:px-6">
|
|
{formatCurrency({
|
|
value: item.unit_price,
|
|
currencyCode,
|
|
locale: language,
|
|
})}
|
|
</TableCell>
|
|
|
|
<TableCell className="min-w-[80px] px-4 text-right sm:px-6">
|
|
{item.total &&
|
|
formatCurrency({
|
|
value: item.total,
|
|
currencyCode,
|
|
locale: language,
|
|
})}
|
|
</TableCell>
|
|
|
|
<TableCell className="px-4 text-right sm:px-6">
|
|
<span className="flex justify-end gap-x-1">
|
|
<Button size="sm" onClick={() => setEditingItem(item)}>
|
|
<Trans i18nKey="common:change" />
|
|
</Button>
|
|
</span>
|
|
</TableCell>
|
|
|
|
<TableCell className="px-4 text-right sm:px-6">
|
|
<span className="flex w-[60px] justify-end gap-x-1">
|
|
<CartItemDelete id={item.id} />
|
|
</span>
|
|
</TableCell>
|
|
</TableRow>
|
|
{isUnavailable && (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={8}
|
|
className="text-destructive px-4 text-left sm:px-6"
|
|
>
|
|
<Trans i18nKey="booking:timeSlotUnavailable" />
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</>
|
|
);
|
|
}
|