@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/account/shopping-lists/[id]/shopping-list-detail-client.tsx

@@ -0,0 +1,562 @@
+'use client';
+
+import { useCallback, useRef, useState, useTransition } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useRouter } from '@/i18n/navigation';
+import Image from 'next/image';
+import {Link} from '@/i18n/navigation';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import {
+    ArrowLeft,
+    Copy,
+    MoreHorizontal,
+    Minus,
+    Pencil,
+    Plus,
+    ShoppingCart,
+    Trash2,
+    MoveRight,
+    Check,
+    MessageSquare,
+} from 'lucide-react';
+import { Price } from '@/components/commerce/price';
+import { formatDate } from '@/lib/format';
+import { toast } from 'sonner';
+import { Textarea } from '@/components/ui/textarea';
+import {
+    updateShoppingList,
+    deleteShoppingList,
+    setShoppingListVisibility,
+    removeFromShoppingList,
+    addShoppingListItemsToOrder,
+    moveShoppingListItems,
+    updateShoppingListItem,
+} from '../actions';
+
+interface ShoppingListDetailClientProps {
+    currencyCode: string;
+    shoppingList: {
+        id: string;
+        name: string;
+        description: string | null;
+        isPublic: boolean;
+        publicCode: string | null;
+        totalItems: number;
+        items: Array<{
+            id: string;
+            createdAt: string;
+            productVariantId: string;
+            purchased: boolean;
+            note: string | null;
+            quantity: number;
+            productVariant: {
+                id: string;
+                name: string;
+                sku: string;
+                priceWithTax: number;
+                stockLevel: string;
+                product: {
+                    id: string;
+                    name: string;
+                    slug: string;
+                    featuredAsset: { id: string; preview: string } | null;
+                };
+            };
+        }>;
+    };
+    otherShoppingLists: Array<{
+        id: string;
+        name: string;
+    }>;
+}
+
+const OUT_OF_STOCK = 'OUT_OF_STOCK';
+
+type ItemUpdateFn = (itemId: string, updates: { quantity?: number; note?: string }) => void;
+
+function ItemQuantityControl({
+    itemId,
+    initialQuantity,
+    onUpdate,
+    disabled,
+}: {
+    itemId: string;
+    initialQuantity: number;
+    onUpdate: ItemUpdateFn;
+    disabled: boolean;
+}) {
+    const t = useTranslations('ShoppingLists.detail');
+    const [quantity, setQuantity] = useState(initialQuantity);
+    const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+    const debouncedUpdate = useCallback(
+        (newQty: number) => {
+            clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(() => {
+                onUpdate(itemId, { quantity: newQty });
+            }, 500);
+        },
+        [itemId, onUpdate],
+    );
+
+    const handleChange = (newQty: number) => {
+        if (newQty < 1) return;
+        setQuantity(newQty);
+        debouncedUpdate(newQty);
+    };
+
+    return (
+        <div className="flex items-center gap-1 mt-1.5">
+            <span className="text-xs text-muted-foreground mr-1">{t('quantityLabel')}</span>
+            <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="h-6 w-6"
+                disabled={disabled || quantity <= 1}
+                onClick={() => handleChange(quantity - 1)}
+            >
+                <Minus className="h-3 w-3" />
+            </Button>
+            <span className="text-sm font-medium w-8 text-center">{quantity}</span>
+            <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="h-6 w-6"
+                disabled={disabled}
+                onClick={() => handleChange(quantity + 1)}
+            >
+                <Plus className="h-3 w-3" />
+            </Button>
+        </div>
+    );
+}
+
+function ItemNoteEditor({
+    itemId,
+    initialNote,
+    onUpdate,
+    disabled,
+}: {
+    itemId: string;
+    initialNote: string | null;
+    onUpdate: ItemUpdateFn;
+    disabled: boolean;
+}) {
+    const t = useTranslations('ShoppingLists.detail');
+    const [isEditing, setIsEditing] = useState(false);
+    const [note, setNote] = useState(initialNote ?? '');
+    const savingRef = useRef(false);
+
+    const handleSave = () => {
+        if (savingRef.current) return;
+        savingRef.current = true;
+        setIsEditing(false);
+        const trimmed = note.trim();
+        if (trimmed !== (initialNote ?? '')) {
+            onUpdate(itemId, { note: trimmed });
+        }
+        savingRef.current = false;
+    };
+
+    if (!isEditing) {
+        return (
+            <button
+                type="button"
+                onClick={() => setIsEditing(true)}
+                disabled={disabled}
+                className="flex items-center gap-1 mt-1 text-sm text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
+            >
+                <MessageSquare className="h-3 w-3" />
+                {initialNote ? (
+                    <span className="italic">{initialNote}</span>
+                ) : (
+                    <span>{t('addNoteButton')}</span>
+                )}
+            </button>
+        );
+    }
+
+    return (
+        <div className="mt-1.5">
+            <Textarea
+                value={note}
+                onChange={(e) => setNote(e.target.value)}
+                onBlur={handleSave}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        handleSave();
+                    }
+                    if (e.key === 'Escape') {
+                        setNote(initialNote ?? '');
+                        setIsEditing(false);
+                    }
+                }}
+                placeholder={t('notePlaceholder')}
+                className="text-sm min-h-[60px]"
+                autoFocus
+                disabled={disabled}
+            />
+        </div>
+    );
+}
+
+export function ShoppingListDetailClient({ shoppingList, otherShoppingLists, currencyCode }: ShoppingListDetailClientProps) {
+    const tRoot = useTranslations('ShoppingLists');
+    const t = useTranslations('ShoppingLists.detail');
+    const router = useRouter();
+    const locale = useLocale();
+    const [isPending, startTransition] = useTransition();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editName, setEditName] = useState(shoppingList.name);
+
+    const handleRename = () => {
+        if (!editName.trim() || editName === shoppingList.name) {
+            setIsEditing(false);
+            return;
+        }
+        startTransition(async () => {
+            const result = await updateShoppingList(shoppingList.id, editName.trim());
+            if (result.success) {
+                toast.success('Shopping list renamed');
+                setIsEditing(false);
+                router.refresh();
+            } else {
+                toast.error(result.error || 'Failed to rename');
+            }
+        });
+    };
+
+    const handleToggleVisibility = (checked: boolean) => {
+        startTransition(async () => {
+            const result = await setShoppingListVisibility(shoppingList.id, checked);
+            if (result.success) {
+                toast.success(checked ? 'Shopping list is now public' : 'Shopping list is now private');
+                router.refresh();
+            } else {
+                toast.error(result.error || 'Failed to update visibility');
+            }
+        });
+    };
+
+    const handleCopyShareLink = () => {
+        if (shoppingList.publicCode) {
+            const url = `${window.location.origin}/shopping-list/${shoppingList.publicCode}`;
+            navigator.clipboard.writeText(url);
+            toast.success('Share link copied to clipboard');
+        }
+    };
+
+    const handleRemoveItem = (itemId: string) => {
+        startTransition(async () => {
+            const result = await removeFromShoppingList([itemId], shoppingList.id);
+            if (result.success) {
+                toast.success('Item removed');
+                router.refresh();
+            } else {
+                toast.error(result.error || 'Failed to remove item');
+            }
+        });
+    };
+
+    const handleAddItemToCart = (itemId: string) => {
+        startTransition(async () => {
+            const result = await addShoppingListItemsToOrder([itemId]);
+            if (result.success) {
+                toast.success('Added to cart');
+                router.refresh();
+            } else {
+                toast.error(result.error || 'Failed to add to cart');
+            }
+        });
+    };
+
+    const handleAddAllToCart = () => {
+        const itemIds = shoppingList.items
+            .filter((item) => item.productVariant.stockLevel !== OUT_OF_STOCK)
+            .map((item) => item.id);
+        if (itemIds.length === 0) return;
+        startTransition(async () => {
+            const result = await addShoppingListItemsToOrder(itemIds);
+            if (result.success) {
+                toast.success('All items added to cart');
+                router.refresh();
+            } else {
+                toast.error(result.error || 'Failed to add items to cart');
+            }
+        });
+    };
+
+    const handleMoveItem = (itemId: string, targetShoppingListId: string) => {
+        startTransition(async () => {
+            const result = await moveShoppingListItems([itemId], targetShoppingListId);
+            if (result.success) {
+                toast.success('Item moved');
+                router.refresh();
+            } else {
+                toast.error(result.error || 'Failed to move item');
+            }
+        });
+    };
+
+    const handleDelete = () => {
+        startTransition(async () => {
+            await deleteShoppingList(shoppingList.id);
+        });
+    };
+
+    const handleUpdateItem = (itemId: string, updates: { quantity?: number; note?: string }) => {
+        startTransition(async () => {
+            const result = await updateShoppingListItem({ id: itemId, ...updates });
+            if (result.success) {
+                router.refresh();
+            } else {
+                toast.error(result.error || 'Failed to update item');
+            }
+        });
+    };
+
+    const items = shoppingList.items;
+    const inStockItems = items.filter((item) => item.productVariant.stockLevel !== OUT_OF_STOCK);
+
+    return (
+        <div>
+            {/* Header */}
+            <div className="mb-6">
+                <Button asChild variant="ghost" size="sm" className="mb-4">
+                    <Link href="/account/shopping-lists">
+                        <ArrowLeft className="mr-2 h-4 w-4" />
+                        {t('backButton')}
+                    </Link>
+                </Button>
+
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                        {isEditing ? (
+                            <div className="flex items-center gap-2">
+                                <Input
+                                    value={editName}
+                                    onChange={(e) => setEditName(e.target.value)}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter') handleRename();
+                                        if (e.key === 'Escape') setIsEditing(false);
+                                    }}
+                                    className="text-2xl font-bold h-auto py-1"
+                                    autoFocus
+                                />
+                                <Button size="sm" onClick={handleRename} disabled={isPending}>
+                                    <Check className="h-4 w-4" />
+                                </Button>
+                            </div>
+                        ) : (
+                            <>
+                                <h1 className="text-3xl font-bold">{shoppingList.name}</h1>
+                                <Button variant="ghost" size="sm" onClick={() => setIsEditing(true)}>
+                                    <Pencil className="h-4 w-4" />
+                                </Button>
+                            </>
+                        )}
+                    </div>
+
+                    <div className="flex items-center gap-4">
+                        <div className="flex items-center gap-2">
+                            <Label htmlFor="visibility-toggle" className="text-sm">
+                                {shoppingList.isPublic ? t('publicLabel') : t('privateLabel')}
+                            </Label>
+                            <Switch
+                                id="visibility-toggle"
+                                checked={shoppingList.isPublic}
+                                onCheckedChange={handleToggleVisibility}
+                                disabled={isPending}
+                            />
+                        </div>
+
+                        {shoppingList.isPublic && shoppingList.publicCode && (
+                            <Button variant="outline" size="sm" onClick={handleCopyShareLink}>
+                                <Copy className="mr-2 h-4 w-4" />
+                                {t('copyShareLinkButton')}
+                            </Button>
+                        )}
+
+                        <AlertDialog>
+                            <AlertDialogTrigger asChild>
+                                <Button variant="destructive" size="sm">
+                                    <Trash2 className="mr-2 h-4 w-4" />
+                                    {t('deleteButton')}
+                                </Button>
+                            </AlertDialogTrigger>
+                            <AlertDialogContent>
+                                <AlertDialogHeader>
+                                    <AlertDialogTitle>{t('deleteDialogTitle')}</AlertDialogTitle>
+                                    <AlertDialogDescription>
+                                        {t('deleteDialogDescription', {name: shoppingList.name})}
+                                    </AlertDialogDescription>
+                                </AlertDialogHeader>
+                                <AlertDialogFooter>
+                                    <AlertDialogCancel>{t('cancelButton')}</AlertDialogCancel>
+                                    <AlertDialogAction onClick={handleDelete}>
+                                        {t('deleteConfirm')}
+                                    </AlertDialogAction>
+                                </AlertDialogFooter>
+                            </AlertDialogContent>
+                        </AlertDialog>
+                    </div>
+                </div>
+
+                {shoppingList.description && (
+                    <p className="text-muted-foreground mt-2">{shoppingList.description}</p>
+                )}
+            </div>
+
+            {/* Actions bar */}
+            {items.length > 0 && (
+                <div className="flex items-center justify-between mb-4">
+                    <p className="text-sm text-muted-foreground">
+                        {tRoot('itemCount', {count: shoppingList.totalItems})}
+                    </p>
+                    <Button onClick={handleAddAllToCart} disabled={isPending || inStockItems.length === 0}>
+                        <ShoppingCart className="mr-2 h-4 w-4" />
+                        {inStockItems.length === items.length
+                            ? t('addAllToCartButton')
+                            : t('addInStockToCartButton', {count: inStockItems.length})}
+                    </Button>
+                </div>
+            )}
+
+            {/* Item list */}
+            {items.length === 0 ? (
+                <div className="text-center py-12">
+                    <p className="text-gray-500">{t('emptyMessage')}</p>
+                    <Button asChild variant="outline" className="mt-4">
+                        <Link href="/">{t('browseProductsButton')}</Link>
+                    </Button>
+                </div>
+            ) : (
+                <div className="space-y-4">
+                    {items.map((item) => (
+                        <div
+                            key={item.id}
+                            className="flex items-center gap-4 border rounded-lg p-4"
+                        >
+                            {/* Thumbnail */}
+                            <Link href={`/product/${item.productVariant.product.slug}`} className="shrink-0">
+                                {item.productVariant.product.featuredAsset ? (
+                                    <Image
+                                        src={item.productVariant.product.featuredAsset.preview + '?preset=thumb'}
+                                        alt={item.productVariant.product.name}
+                                        width={80}
+                                        height={80}
+                                        className="rounded-md object-cover"
+                                    />
+                                ) : (
+                                    <div className="w-20 h-20 bg-muted rounded-md" />
+                                )}
+                            </Link>
+
+                            {/* Info */}
+                            <div className="flex-1 min-w-0">
+                                <Link
+                                    href={`/product/${item.productVariant.product.slug}`}
+                                    className="font-medium hover:underline"
+                                >
+                                    {item.productVariant.product.name}
+                                </Link>
+                                <p className="text-sm text-muted-foreground">{item.productVariant.name}</p>
+                                <div className="flex items-center gap-2 mt-1">
+                                    <Price value={item.productVariant.priceWithTax} currencyCode={currencyCode} />
+                                    {item.purchased && (
+                                        <Badge variant="secondary">{t('purchasedBadge')}</Badge>
+                                    )}
+                                    {item.productVariant.stockLevel === OUT_OF_STOCK ? (
+                                        <Badge variant="destructive">{t('outOfStockBadge')}</Badge>
+                                    ) : (
+                                        <Badge variant="outline" className="text-green-600 border-green-600">{t('inStockBadge')}</Badge>
+                                    )}
+                                </div>
+                                <ItemQuantityControl
+                                    key={`qty-${item.id}-${item.quantity}`}
+                                    itemId={item.id}
+                                    initialQuantity={item.quantity}
+                                    onUpdate={handleUpdateItem}
+                                    disabled={isPending}
+                                />
+                                <ItemNoteEditor
+                                    key={`note-${item.id}-${item.note}`}
+                                    itemId={item.id}
+                                    initialNote={item.note}
+                                    onUpdate={handleUpdateItem}
+                                    disabled={isPending}
+                                />
+                                <p className="text-xs text-muted-foreground mt-1">
+                                    {t('addedDate', {date: formatDate(item.createdAt, locale)})}
+                                </p>
+                            </div>
+
+                            {/* Actions */}
+                            <div className="flex items-center gap-2 shrink-0">
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => handleAddItemToCart(item.id)}
+                                    disabled={isPending || item.productVariant.stockLevel === OUT_OF_STOCK}
+                                    title={item.productVariant.stockLevel === OUT_OF_STOCK ? t('outOfStockTitle') : t('addToCartTitle')}
+                                >
+                                    <ShoppingCart className="h-4 w-4" />
+                                </Button>
+
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger asChild>
+                                        <Button variant="ghost" size="sm">
+                                            <MoreHorizontal className="h-4 w-4" />
+                                        </Button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent align="end">
+                                        {otherShoppingLists.length > 0 && otherShoppingLists.map((target) => (
+                                            <DropdownMenuItem
+                                                key={target.id}
+                                                onClick={() => handleMoveItem(item.id, target.id)}
+                                            >
+                                                <MoveRight className="mr-2 h-4 w-4" />
+                                                {t('moveToMenuItem', {listName: target.name})}
+                                            </DropdownMenuItem>
+                                        ))}
+                                        <DropdownMenuItem
+                                            onClick={() => handleRemoveItem(item.id)}
+                                            className="text-destructive"
+                                        >
+                                            <Trash2 className="mr-2 h-4 w-4" />
+                                            {t('removeMenuItem')}
+                                        </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}