150 lines
4.3 KiB
TypeScript
150 lines
4.3 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
import { StoreCart } from '@medusajs/types';
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@kit/ui/shadcn/dialog';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@kit/ui/table';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import BookingContainer from '../booking/booking-container';
|
|
import CartServiceItem from './cart-service-item';
|
|
import MobileCartServiceItems from './mobile-cart-service-items';
|
|
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 CartServiceItems({
|
|
cart,
|
|
items,
|
|
productColumnLabelKey,
|
|
unavailableLineItemIds,
|
|
}: {
|
|
cart: StoreCart;
|
|
items: EnrichedCartItem[];
|
|
productColumnLabelKey: string;
|
|
unavailableLineItemIds?: string[];
|
|
}) {
|
|
const [editingItem, setEditingItem] = useState<EnrichedCartItem | null>(null);
|
|
if (!items || items.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Table className="hidden border-separate rounded-lg border sm:block">
|
|
<TableHeader className="text-ui-fg-subtle txt-medium-plus">
|
|
<TableRow>
|
|
<TableHead className="px-4 sm:px-6">
|
|
<Trans i18nKey={productColumnLabelKey} />
|
|
</TableHead>
|
|
<TableHead className="px-4 sm:px-6">
|
|
<Trans i18nKey="cart:table.time" />
|
|
</TableHead>
|
|
<TableHead className="px-4 sm:px-6">
|
|
<Trans i18nKey="cart:table.location" />
|
|
</TableHead>
|
|
<TableHead className="px-4 sm:px-6">
|
|
<Trans i18nKey="cart:table.quantity" />
|
|
</TableHead>
|
|
<TableHead className="min-w-[100px] px-4 sm:px-6">
|
|
<Trans i18nKey="cart:table.price" />
|
|
</TableHead>
|
|
<TableHead className="min-w-[100px] px-4 text-right sm:px-6">
|
|
<Trans i18nKey="cart:table.total" />
|
|
</TableHead>
|
|
<TableHead className="px-4 sm:px-6"></TableHead>
|
|
<TableHead className="px-4 sm:px-6"></TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{items
|
|
.sort((a, b) =>
|
|
(a.created_at ?? '') > (b.created_at ?? '') ? -1 : 1,
|
|
)
|
|
.map((item) => (
|
|
<CartServiceItem
|
|
key={item.id}
|
|
item={item}
|
|
currencyCode={cart.currency_code}
|
|
isUnavailable={unavailableLineItemIds?.includes(item.id)}
|
|
setEditingItem={setEditingItem}
|
|
/>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
<div className="sm:hidden">
|
|
{items
|
|
.sort((a, b) =>
|
|
(a.created_at ?? '') > (b.created_at ?? '') ? -1 : 1,
|
|
)
|
|
.map((item) => (
|
|
<MobileCartServiceItems
|
|
key={item.id}
|
|
item={item}
|
|
currencyCode={cart.currency_code}
|
|
isUnavailable={unavailableLineItemIds?.includes(item.id)}
|
|
productColumnLabelKey={productColumnLabelKey}
|
|
setEditingItem={setEditingItem}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<EditCartServiceItemModal
|
|
item={editingItem}
|
|
onComplete={() => setEditingItem(null)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|