@vendure-platform/create 0.3.0 → 0.5.0

package/dist/assets/storefront/src/app/[locale]/account/shared-carts/[id]/shared-cart-detail-client.tsx

@@ -0,0 +1,555 @@
+'use client';
+
+import { Price } from '@/components/commerce/price';
+import { MANAGE_SHARED_CARTS_PERMISSION, roleAtLeast } from '@/components/commerce/shared-cart-role';
+import { SharedCartStatusBadge } from '@/components/commerce/shared-cart-status-badge';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { useRouter } from '@/i18n/navigation';
+import { useCompanyPermissions } from '@/lib/company-permissions-context';
+import { MIN_ORDER_QUANTITY, normalizeQuantity, sanitizeQuantityInput } from '@/lib/quantity';
+import { CreditCard, Loader2, Lock, Minus, MoreVertical, PackageOpen, Plus, Trash2 } from 'lucide-react';
+import Image from 'next/image';
+import { useCallback, useEffect, useRef, useState, useTransition } from 'react';
+import { toast } from 'sonner';
+import {
+    adjustSharedCartLine,
+    deleteSharedCart,
+    fetchSharedCart,
+    initiateSharedCartCheckout,
+    removeSharedCartLine,
+    type SharedCartData,
+    type SharedCartRole,
+} from '../actions';
+import { ActivityFeed } from './activity-feed';
+import { AddItemSearch } from './add-item-search';
+import { MembersPanel } from './members-panel';
+import { RenameSharedCartDialog } from './rename-dialog';
+
+const POLL_INTERVAL_MS = 7000;
+
+interface SharedCartDetailClientProps {
+    initialCart: SharedCartData;
+    viewerId: string;
+    locale: string;
+}
+
+export function SharedCartDetailClient({ initialCart, viewerId, locale }: SharedCartDetailClientProps) {
+    const router = useRouter();
+    const [cart, setCart] = useState<SharedCartData>(initialCart);
+    const [isRefreshing, startRefresh] = useTransition();
+    const { hasPermission } = useCompanyPermissions();
+
+    const requestSeq = useRef(0);
+    const load = useCallback(async () => {
+        const seq = ++requestSeq.current;
+        const next = await fetchSharedCart(initialCart.id);
+        if (next && seq === requestSeq.current) setCart(next);
+    }, [initialCart.id]);
+
+    const refresh = useCallback(() => {
+        startRefresh(load);
+    }, [load]);
+
+    useEffect(() => {
+        let timer: ReturnType<typeof setInterval> | undefined;
+        const start = () => {
+            stop();
+            if (!document.hidden) void load();
+            timer = setInterval(() => {
+                if (!document.hidden) void load();
+            }, POLL_INTERVAL_MS);
+        };
+        const stop = () => timer && clearInterval(timer);
+        const onVisibility = () => (document.hidden ? stop() : start());
+        start();
+        document.addEventListener('visibilitychange', onVisibility);
+        return () => {
+            stop();
+            document.removeEventListener('visibilitychange', onVisibility);
+        };
+    }, [load]);
+
+    const isOwner = cart.owner.id === viewerId;
+    const isCompanyAdmin = hasPermission(MANAGE_SHARED_CARTS_PERMISSION);
+    const viewerRole: SharedCartRole | undefined = cart.members.find((m) => m.customer.id === viewerId)?.role;
+    const canManage = isOwner || isCompanyAdmin;
+    const canEdit = isOwner || roleAtLeast(viewerRole, 'edit');
+    const canCheckout = isOwner || roleAtLeast(viewerRole, 'checkout');
+    const isOpen = cart.status === 'Open';
+    const isLocked = cart.status === 'Locked';
+    const isClosed = cart.status === 'Closed';
+    const editable = isOpen && canEdit;
+    const isInitiator = cart.order.customer?.id === viewerId;
+
+    return (
+        <div className="space-y-6">
+            <Header
+                cart={cart}
+                canManage={canManage}
+                isOpen={isOpen}
+                isLocked={isLocked}
+                onRenamed={refresh}
+                onDeleted={() => router.push('/account/shared-carts')}
+            />
+
+            {isLocked && (
+                <LockedBanner
+                    cart={cart}
+                    isInitiator={isInitiator}
+                    onResume={() => router.push('/checkout')}
+                />
+            )}
+            {isClosed && <ClosedBanner cart={cart} />}
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <div className="lg:col-span-2 space-y-6">
+                    <section className="border rounded-lg">
+                        <div className="flex items-center justify-between px-4 py-3 border-b">
+                            <h2 className="font-semibold">Items</h2>
+                            <span className="text-sm text-muted-foreground tabular-nums">
+                                {cart.order.totalQuantity} {cart.order.totalQuantity === 1 ? 'item' : 'items'}
+                            </span>
+                        </div>
+
+                        {editable && (
+                            <div className="px-4 py-3 border-b bg-muted/30">
+                                <AddItemSearch sharedCartId={cart.id} onAdded={refresh} />
+                            </div>
+                        )}
+
+                        {cart.order.lines.length === 0 ? (
+                            <div className="px-4 py-12 text-center text-sm text-muted-foreground">
+                                <PackageOpen className="h-6 w-6 mx-auto mb-2 opacity-60" />
+                                No items yet.
+                                {editable && ' Search above to add the first product.'}
+                            </div>
+                        ) : (
+                            <ul className="divide-y">
+                                {cart.order.lines.map((line) => (
+                                    <LineRow
+                                        key={line.id}
+                                        sharedCartId={cart.id}
+                                        line={line}
+                                        currencyCode={cart.order.currencyCode}
+                                        editable={editable}
+                                        onSettled={refresh}
+                                    />
+                                ))}
+                            </ul>
+                        )}
+                    </section>
+
+                    <ActivityFeed activity={cart.activity} lines={cart.order.lines} locale={locale} />
+                </div>
+
+                <aside className="space-y-6">
+                    <section className="border rounded-lg p-4 space-y-3">
+                        <h2 className="font-semibold">Summary</h2>
+                        <div className="flex justify-between text-sm">
+                            <span className="text-muted-foreground">Subtotal</span>
+                            <Price
+                                value={cart.order.subTotalWithTax}
+                                currencyCode={cart.order.currencyCode}
+                            />
+                        </div>
+                        <div className="flex justify-between font-semibold pt-2 border-t">
+                            <span>Total</span>
+                            <Price
+                                value={cart.order.totalWithTax}
+                                currencyCode={cart.order.currencyCode}
+                                taxLabel="incl"
+                            />
+                        </div>
+
+                        {isOpen && canCheckout && (
+                            <CheckoutButton
+                                sharedCartId={cart.id}
+                                disabled={cart.order.lines.length === 0}
+                                onStarted={() => router.push('/checkout')}
+                            />
+                        )}
+                        {isOpen && !canCheckout && (
+                            <p className="text-xs text-muted-foreground pt-1">
+                                A member with checkout access can place this order.
+                            </p>
+                        )}
+                    </section>
+
+                    <MembersPanel cart={cart} viewerId={viewerId} canManage={canManage} onChanged={refresh} />
+                </aside>
+            </div>
+
+            {isRefreshing && <span className="sr-only">Refreshing…</span>}
+        </div>
+    );
+}
+
+function Header({
+    cart,
+    canManage,
+    isOpen,
+    isLocked,
+    onRenamed,
+    onDeleted,
+}: {
+    cart: SharedCartData;
+    canManage: boolean;
+    isOpen: boolean;
+    isLocked: boolean;
+    onRenamed: () => void;
+    onDeleted: () => void;
+}) {
+    const [renameOpen, setRenameOpen] = useState(false);
+    const [deleteOpen, setDeleteOpen] = useState(false);
+    const [isPending, startTransition] = useTransition();
+
+    function handleDelete() {
+        startTransition(async () => {
+            const result = await deleteSharedCart(cart.id);
+            if (!result.success) {
+                toast.error(result.message ?? 'Could not delete the cart.');
+                return;
+            }
+            toast.success('Shared cart deleted.');
+            onDeleted();
+        });
+    }
+
+    return (
+        <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="min-w-0">
+                <div className="flex items-center gap-3 flex-wrap">
+                    <h1 className="text-2xl font-bold truncate">{cart.name}</h1>
+                    <SharedCartStatusBadge status={cart.status} />
+                </div>
+                {cart.description && (
+                    <p className="text-sm text-muted-foreground mt-1 max-w-prose">{cart.description}</p>
+                )}
+                <p className="text-xs text-muted-foreground mt-1">
+                    Owner: {cart.owner.firstName} {cart.owner.lastName}
+                </p>
+            </div>
+
+            {canManage && (
+                <>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" size="icon" aria-label="Cart actions">
+                                <MoreVertical className="h-4 w-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuItem onSelect={() => setRenameOpen(true)} disabled={!isOpen}>
+                                Rename
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                                onSelect={() => setDeleteOpen(true)}
+                                disabled={isLocked}
+                                className="text-destructive focus:text-destructive"
+                            >
+                                Delete cart
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+
+                    <RenameSharedCartDialog
+                        open={renameOpen}
+                        onOpenChange={setRenameOpen}
+                        cartId={cart.id}
+                        currentName={cart.name}
+                        currentDescription={cart.description ?? ''}
+                        onRenamed={onRenamed}
+                    />
+
+                    <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+                        <AlertDialogContent>
+                            <AlertDialogHeader>
+                                <AlertDialogTitle>Delete this shared cart?</AlertDialogTitle>
+                                <AlertDialogDescription>
+                                    This permanently removes “{cart.name}” and its items for everyone. This
+                                    can&apos;t be undone.
+                                </AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                                <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+                                <AlertDialogAction
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        handleDelete();
+                                    }}
+                                    disabled={isPending}
+                                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                                >
+                                    {isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+                                    Delete
+                                </AlertDialogAction>
+                            </AlertDialogFooter>
+                        </AlertDialogContent>
+                    </AlertDialog>
+                </>
+            )}
+        </div>
+    );
+}
+
+function LockedBanner({
+    cart,
+    isInitiator,
+    onResume,
+}: {
+    cart: SharedCartData;
+    isInitiator: boolean;
+    onResume: () => void;
+}) {
+    const initiator = cart.order.customer ?? cart.owner;
+
+    return (
+        <div className="flex flex-wrap items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-amber-900">
+            <Lock className="h-5 w-5 mt-0.5 shrink-0" />
+            <div className="min-w-0 flex-1 text-sm">
+                <p className="font-medium">Checkout in progress</p>
+                <p className="text-amber-800">
+                    {isInitiator ? (
+                        <>You started checkout for this cart. Resume to finish placing the order.</>
+                    ) : (
+                        <>
+                            {initiator.firstName} {initiator.lastName} is placing this order. The cart is
+                            read-only until checkout completes.
+                        </>
+                    )}
+                </p>
+            </div>
+            {isInitiator && (
+                <Button size="sm" onClick={onResume} className="shrink-0">
+                    <CreditCard className="mr-2 h-4 w-4" />
+                    Resume checkout
+                </Button>
+            )}
+        </div>
+    );
+}
+
+function ClosedBanner({ cart }: { cart: SharedCartData }) {
+    return (
+        <div className="flex items-start gap-3 rounded-lg border bg-muted px-4 py-3">
+            <PackageOpen className="h-5 w-5 mt-0.5 shrink-0 text-muted-foreground" />
+            <div className="text-sm">
+                <p className="font-medium">This cart is closed</p>
+                <p className="text-muted-foreground">
+                    {cart.order.code
+                        ? `It was checked out as order ${cart.order.code}.`
+                        : 'It has been checked out.'}
+                </p>
+            </div>
+        </div>
+    );
+}
+
+function LineRow({
+    sharedCartId,
+    line,
+    currencyCode,
+    editable,
+    onSettled,
+}: {
+    sharedCartId: string;
+    line: SharedCartData['order']['lines'][number];
+    currencyCode: string;
+    editable: boolean;
+    onSettled: () => void;
+}) {
+    const [isPending, startTransition] = useTransition();
+    const [quantityInput, setQuantityInput] = useState(String(line.quantity));
+    const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+    const skipBlurSubmitRef = useRef(false);
+
+    // Resync the field when polling/refresh brings a new quantity (e.g. a
+    // colleague edited the same line) — adjust-during-render, no effect.
+    const [syncedQuantity, setSyncedQuantity] = useState(line.quantity);
+    if (line.quantity !== syncedQuantity) {
+        setSyncedQuantity(line.quantity);
+        setQuantityInput(String(line.quantity));
+    }
+
+    const normalizedQuantity = normalizeQuantity(quantityInput);
+
+    function submitQuantity(value: number | string) {
+        const next = normalizeQuantity(value);
+        setQuantityInput(String(next));
+        if (next === line.quantity) return;
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+            startTransition(async () => {
+                const result = await adjustSharedCartLine(sharedCartId, line.id, next);
+                if (!result.success) {
+                    setQuantityInput(String(line.quantity));
+                    toast.error(result.message ?? 'Could not update quantity.');
+                }
+                onSettled();
+            });
+        }, 300);
+    }
+
+    useEffect(() => () => clearTimeout(debounceRef.current), []);
+
+    function remove() {
+        startTransition(async () => {
+            const result = await removeSharedCartLine(sharedCartId, line.id);
+            if (!result.success) toast.error(result.message ?? 'Could not remove item.');
+            onSettled();
+        });
+    }
+
+    return (
+        <li className="flex items-center gap-3 px-4 py-3">
+            <div className="h-12 w-12 shrink-0 rounded border bg-muted overflow-hidden">
+                {line.featuredAsset?.preview && (
+                    <Image
+                        src={`${line.featuredAsset.preview}?preset=tiny`}
+                        alt={line.productVariant.name}
+                        width={48}
+                        height={48}
+                        className="h-full w-full object-cover"
+                    />
+                )}
+            </div>
+            <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium truncate">{line.productVariant.name}</p>
+                <p className="text-xs text-muted-foreground">{line.productVariant.sku}</p>
+            </div>
+
+            {editable ? (
+                <div className="flex items-center border rounded-md">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 rounded-none"
+                        onMouseDown={() => {
+                            skipBlurSubmitRef.current = true;
+                        }}
+                        onClick={() => submitQuantity(normalizedQuantity - 1)}
+                        disabled={isPending || normalizedQuantity <= MIN_ORDER_QUANTITY}
+                        aria-label="Decrease quantity"
+                    >
+                        <Minus className="h-3 w-3" />
+                    </Button>
+                    <Input
+                        aria-label="Quantity"
+                        inputMode="numeric"
+                        pattern="[0-9]*"
+                        value={quantityInput}
+                        onChange={(e) => setQuantityInput(sanitizeQuantityInput(e.target.value))}
+                        onBlur={() => {
+                            if (skipBlurSubmitRef.current) {
+                                skipBlurSubmitRef.current = false;
+                                return;
+                            }
+                            if (debounceRef.current) clearTimeout(debounceRef.current);
+                            submitQuantity(quantityInput);
+                        }}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                if (debounceRef.current) clearTimeout(debounceRef.current);
+                                submitQuantity(quantityInput);
+                            } else if (e.key === 'Escape') {
+                                if (debounceRef.current) clearTimeout(debounceRef.current);
+                                setQuantityInput(String(line.quantity));
+                                e.currentTarget.blur();
+                            }
+                        }}
+                        disabled={isPending}
+                        className="h-8 w-12 border-0 text-center shadow-none focus-visible:ring-0 tabular-nums"
+                    />
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 rounded-none"
+                        onMouseDown={() => {
+                            skipBlurSubmitRef.current = true;
+                        }}
+                        onClick={() => submitQuantity(normalizedQuantity + 1)}
+                        disabled={isPending}
+                        aria-label="Increase quantity"
+                    >
+                        <Plus className="h-3 w-3" />
+                    </Button>
+                </div>
+            ) : (
+                <span className="text-sm text-muted-foreground tabular-nums">×{line.quantity}</span>
+            )}
+
+            <div className="w-24 text-right text-sm font-medium tabular-nums">
+                <Price value={line.linePriceWithTax} currencyCode={currencyCode} />
+            </div>
+
+            {editable && (
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                    onClick={remove}
+                    disabled={isPending}
+                    aria-label="Remove item"
+                >
+                    <Trash2 className="h-4 w-4" />
+                </Button>
+            )}
+        </li>
+    );
+}
+
+function CheckoutButton({
+    sharedCartId,
+    disabled,
+    onStarted,
+}: {
+    sharedCartId: string;
+    disabled: boolean;
+    onStarted: () => void;
+}) {
+    const [isPending, startTransition] = useTransition();
+
+    function handleClick() {
+        startTransition(async () => {
+            const result = await initiateSharedCartCheckout(sharedCartId);
+            if (!result.success) {
+                toast.error(result.message ?? 'Could not start checkout.');
+                return;
+            }
+            onStarted();
+        });
+    }
+
+    return (
+        <Button className="w-full" disabled={disabled || isPending} onClick={handleClick}>
+            {isPending ? (
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            ) : (
+                <CreditCard className="h-4 w-4 mr-2" />
+            )}
+            Proceed to checkout
+        </Button>
+    );
+}