@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/account/orders/[code]/reorder-dialog.tsx

@@ -0,0 +1,386 @@
+'use client';
+
+import { AlertCircle, ShoppingCart } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useState, useTransition } from 'react';
+import { toast } from 'sonner';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
+import { Price } from '@/components/commerce/price';
+
+import {
+    commitReorder,
+    previewReorder,
+    type PreviewLineView,
+    type PreviewReorderResult,
+    type ReorderActionError,
+    type ReorderLineStatus,
+} from './reorder-actions';
+
+type Props = {
+    sourceOrderId: string;
+    sourceOrderCode: string;
+};
+
+const COMMIT_ELIGIBLE: ReorderLineStatus[] = [
+    'AVAILABLE',
+    'LOW_STOCK',
+    'PRICE_CHANGED',
+    'SUBSTITUTED',
+];
+
+const STATUS_MESSAGE_KEY: Record<ReorderLineStatus, string> = {
+    AVAILABLE: 'status.available',
+    LOW_STOCK: 'status.lowStock',
+    OUT_OF_STOCK: 'status.outOfStock',
+    UNAVAILABLE: 'status.unavailable',
+    SUBSTITUTED: 'status.substituted',
+    PRICE_CHANGED: 'status.priceChanged',
+    UNSUPPORTED: 'status.unsupported',
+};
+
+const STATUS_BADGE_VARIANT: Record<
+    ReorderLineStatus,
+    'secondary' | 'outline' | 'destructive'
+> = {
+    AVAILABLE: 'secondary',
+    LOW_STOCK: 'outline',
+    OUT_OF_STOCK: 'destructive',
+    UNAVAILABLE: 'destructive',
+    SUBSTITUTED: 'outline',
+    PRICE_CHANGED: 'outline',
+    UNSUPPORTED: 'destructive',
+};
+
+function translateActionError(t: ReturnType<typeof useTranslations>, error: ReorderActionError): string {
+    switch (error.code) {
+        case 'previewFailed':
+            return t('toast.previewError');
+        case 'commitFailed':
+            return t('toast.commitError');
+        case 'noItemsSelected':
+            return t('toast.noItemsSelected');
+        case 'tooManyLines':
+            return t('toast.tooManyLines', { count: error.count, max: error.max });
+    }
+}
+
+export function ReorderDialog({ sourceOrderId, sourceOrderCode }: Props) {
+    const t = useTranslations('Reorder');
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+
+    const [open, setOpen] = useState(false);
+    const [preview, setPreview] = useState<PreviewReorderResult | null>(null);
+    const [selected, setSelected] = useState<Record<string, boolean>>({});
+    const [quantities, setQuantities] = useState<Record<string, number>>({});
+    const [loadError, setLoadError] = useState<string | null>(null);
+    const [isLoadingPreview, startPreviewTransition] = useTransition();
+    const [isCommitting, startCommitTransition] = useTransition();
+
+    const loadPreview = useCallback(
+        (qtyOverrides?: Array<{ sourceLineId: string; quantity: number }>) => {
+            startPreviewTransition(async () => {
+                setLoadError(null);
+                const result = await previewReorder(sourceOrderId, qtyOverrides);
+                if (!result.success) {
+                    setLoadError(translateActionError(t, result.error));
+                    setPreview(null);
+                    return;
+                }
+                setPreview(result.data);
+                const nextSelected: Record<string, boolean> = {};
+                const nextQty: Record<string, number> = {};
+                for (const line of result.data.lines) {
+                    nextSelected[line.sourceLineId] = COMMIT_ELIGIBLE.includes(line.status);
+                    nextQty[line.sourceLineId] = line.quantity;
+                }
+                setSelected(nextSelected);
+                setQuantities(nextQty);
+            });
+        },
+        [sourceOrderId, t],
+    );
+
+    // Intentionally runs once on mount only: we want to auto-open if the URL
+    // has `?reorder=1` on the initial render. We strip the param immediately,
+    // so a re-render cannot re-trigger this effect. Subsequent opens go
+    // through `handleOpenChange` via the DialogTrigger.
+    useEffect(() => {
+        if (searchParams.get('reorder') !== '1') return;
+        setOpen(true);
+        loadPreview();
+        const next = new URLSearchParams(searchParams.toString());
+        next.delete('reorder');
+        const qs = next.toString();
+        router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const handleOpenChange = (value: boolean) => {
+        if (value) {
+            setOpen(true);
+            loadPreview();
+        } else {
+            setOpen(false);
+        }
+    };
+
+    const toggleLine = (line: PreviewLineView) => {
+        if (!COMMIT_ELIGIBLE.includes(line.status)) return;
+        setSelected(prev => ({ ...prev, [line.sourceLineId]: !prev[line.sourceLineId] }));
+    };
+
+    const setQty = (line: PreviewLineView, quantity: number) => {
+        const next = Math.max(1, Math.floor(quantity));
+        setQuantities(prev => ({ ...prev, [line.sourceLineId]: next }));
+    };
+
+    const indicativeSubtotal = (() => {
+        if (!preview) return 0;
+        return preview.lines.reduce((acc, line) => {
+            if (!selected[line.sourceLineId]) return acc;
+            return acc + line.originalUnitPriceWithTax * (quantities[line.sourceLineId] ?? line.quantity);
+        }, 0);
+    })();
+
+    const selectedCount = Object.values(selected).filter(Boolean).length;
+
+    const handleConfirm = () => {
+        if (!preview) return;
+        const lines = preview.lines
+            .filter(l => selected[l.sourceLineId] && l.productVariantId != null)
+            .map(l => ({
+                sourceLineId: l.sourceLineId,
+                productVariantId: l.productVariantId as string,
+                quantity: quantities[l.sourceLineId] ?? l.quantity,
+            }));
+
+        if (lines.length === 0) {
+            toast.error(t('toast.selectAtLeastOne'));
+            return;
+        }
+
+        startCommitTransition(async () => {
+            const result = await commitReorder(sourceOrderId, lines);
+            if (!result.success) {
+                toast.error(translateActionError(t, result.error));
+                return;
+            }
+            const { addedCount, failedCount, messages: serverMessages } = result.data;
+            if (addedCount > 0) {
+                const msg =
+                    failedCount > 0
+                        ? t('toast.addedSomeFailed', { added: addedCount, failed: failedCount })
+                        : t('toast.addedToCart', { count: addedCount });
+                toast.success(msg);
+            } else {
+                // Prefer a specific server-side message over the generic
+                // fallback — e.g. "Your cart is in ArrangingPayment and
+                // cannot accept new items" is vastly more useful than
+                // "No items could be added".
+                const specific = serverMessages.find(m => m.type === 'ERROR')?.message;
+                toast.error(specific ?? t('toast.nothingAddable'));
+                return;
+            }
+            setOpen(false);
+            router.push('/cart');
+        });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={handleOpenChange}>
+            <DialogTrigger asChild>
+                <Button variant="outline" size="sm" data-testid="reorder-trigger">
+                    <ShoppingCart className="h-4 w-4 mr-2" />
+                    {t('trigger')}
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="max-w-3xl">
+                <DialogHeader>
+                    <DialogTitle>{t('dialog.title', { code: sourceOrderCode })}</DialogTitle>
+                    <DialogDescription>{t('dialog.description')}</DialogDescription>
+                </DialogHeader>
+
+                {isLoadingPreview && (
+                    <p className="py-8 text-center text-sm text-muted-foreground">
+                        {t('dialog.loading')}
+                    </p>
+                )}
+
+                {loadError && (
+                    <div className="flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive">
+                        <AlertCircle className="h-4 w-4 mt-0.5" />
+                        <span>{loadError}</span>
+                    </div>
+                )}
+
+                {preview && !isLoadingPreview && preview.lines.length === 0 && (
+                    <p className="py-8 text-center text-sm text-muted-foreground">
+                        {t('dialog.empty')}
+                    </p>
+                )}
+
+                {preview &&
+                    !isLoadingPreview &&
+                    preview.lines.length > 0 &&
+                    preview.availableCount === 0 && (
+                        <div className="flex items-start gap-2 rounded-md border border-muted bg-muted/30 p-3 text-sm">
+                            <AlertCircle className="h-4 w-4 mt-0.5" />
+                            <span>{t('dialog.noneAvailable')}</span>
+                        </div>
+                    )}
+
+                {preview && !isLoadingPreview && preview.lines.length > 0 && (
+                    <>
+                        <div className="max-h-[50vh] overflow-y-auto divide-y">
+                            {preview.lines.map(line => {
+                                const isEligible = COMMIT_ELIGIBLE.includes(line.status);
+                                const qty = quantities[line.sourceLineId] ?? line.quantity;
+                                const productName = line.productName ?? t('dialog.discontinuedFallback');
+                                return (
+                                    <div
+                                        key={line.sourceLineId}
+                                        className="flex gap-3 py-3 items-start"
+                                    >
+                                        <div className="pt-1">
+                                            <Checkbox
+                                                checked={selected[line.sourceLineId] ?? false}
+                                                disabled={!isEligible}
+                                                onCheckedChange={() => toggleLine(line)}
+                                                aria-label={t('dialog.includeAriaLabel', {
+                                                    product: productName,
+                                                })}
+                                            />
+                                        </div>
+                                        <div className="relative h-14 w-14 rounded-md overflow-hidden bg-muted flex-shrink-0">
+                                            {line.imagePreview && (
+                                                <Image
+                                                    src={line.imagePreview}
+                                                    alt={productName}
+                                                    fill
+                                                    className="object-cover"
+                                                />
+                                            )}
+                                        </div>
+                                        <div className="flex-1 min-w-0">
+                                            <p className="font-medium truncate">{productName}</p>
+                                            {line.variantName && (
+                                                <p className="text-xs text-muted-foreground truncate">
+                                                    {line.variantName}
+                                                </p>
+                                            )}
+                                            <div className="mt-1 flex flex-wrap items-center gap-2">
+                                                <Badge variant={STATUS_BADGE_VARIANT[line.status]}>
+                                                    {t(STATUS_MESSAGE_KEY[line.status])}
+                                                </Badge>
+                                                {line.priceChanged && line.productVariantId && (
+                                                    <span className="text-xs text-muted-foreground">
+                                                        {t('dialog.priceWasLabel')}{' '}
+                                                        <Price
+                                                            value={line.originalUnitPriceWithTax}
+                                                            currencyCode={preview.currencyCode}
+                                                        />{' '}
+                                                        · {t('dialog.priceNowLabel')}{' '}
+                                                        <Price
+                                                            value={line.currentCatalogUnitPriceWithTax}
+                                                            currencyCode={preview.currencyCode}
+                                                        />
+                                                    </span>
+                                                )}
+                                            </div>
+                                            {line.messages.map((m, idx) => (
+                                                <p
+                                                    key={idx}
+                                                    className={
+                                                        'text-xs mt-1 ' +
+                                                        (m.type === 'ERROR'
+                                                            ? 'text-destructive'
+                                                            : 'text-muted-foreground')
+                                                    }
+                                                >
+                                                    {m.message}
+                                                </p>
+                                            ))}
+                                        </div>
+                                        <div className="flex flex-col items-end gap-1">
+                                            <input
+                                                type="number"
+                                                min={1}
+                                                value={qty}
+                                                onChange={e => setQty(line, Number(e.target.value))}
+                                                disabled={!isEligible}
+                                                className="w-20 rounded-md border px-2 py-1 text-right text-sm disabled:opacity-50"
+                                                aria-label={t('dialog.quantityAriaLabel', {
+                                                    product: productName,
+                                                })}
+                                            />
+                                            <p className="text-xs text-muted-foreground">
+                                                <Price
+                                                    value={line.originalUnitPriceWithTax}
+                                                    currencyCode={preview.currencyCode}
+                                                />{' '}
+                                                {t('dialog.eachLabel')}
+                                            </p>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+
+                        <div className="rounded-md border bg-muted/30 p-3 text-sm">
+                            <div className="flex items-center justify-between font-medium">
+                                <span>
+                                    {preview.unavailableCount > 0
+                                        ? t('dialog.itemsSelectedWithUnavailable', {
+                                              count: selectedCount,
+                                              unavailable: preview.unavailableCount,
+                                          })
+                                        : t('dialog.itemsSelected', { count: selectedCount })}
+                                </span>
+                                <span>
+                                    {t('dialog.indicativeTotalLabel')}{' '}
+                                    <Price
+                                        value={indicativeSubtotal}
+                                        currencyCode={preview.currencyCode}
+                                    />
+                                </span>
+                            </div>
+                            <p className="mt-1 text-xs text-muted-foreground">
+                                {t('dialog.disclaimer')}
+                            </p>
+                        </div>
+
+                        <DialogFooter>
+                            <Button variant="ghost" onClick={() => setOpen(false)}>
+                                {t('dialog.cancel')}
+                            </Button>
+                            <Button
+                                onClick={handleConfirm}
+                                disabled={isCommitting || selectedCount === 0}
+                            >
+                                {isCommitting
+                                    ? t('dialog.adding')
+                                    : t('dialog.addToCart', { count: selectedCount })}
+                            </Button>
+                        </DialogFooter>
+                    </>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/orders/loading.tsx

@@ -0,0 +1,45 @@
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@/components/ui/table';
+import {Skeleton} from '@/components/ui/skeleton';
+
+export default function OrdersLoading() {
+    return (
+        <div>
+            <h1 className="text-3xl font-bold mb-6">My Orders</h1>
+
+            <div className="border rounded-lg">
+                <Table>
+                    <TableHeader className="bg-muted">
+                        <TableRow>
+                            <TableHead>Order Number</TableHead>
+                            <TableHead>Date</TableHead>
+                            <TableHead>Status</TableHead>
+                            <TableHead>Items</TableHead>
+                            <TableHead className="text-right">Total</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {Array.from({length: 5}).map((_, i) => (
+                            <TableRow key={i}>
+                                <TableCell>
+                                    <Skeleton className="h-9 w-32"/>
+                                </TableCell>
+                                <TableCell>
+                                    <Skeleton className="h-4 w-24"/>
+                                </TableCell>
+                                <TableCell>
+                                    <Skeleton className="h-6 w-20"/>
+                                </TableCell>
+                                <TableCell>
+                                    <Skeleton className="h-4 w-16"/>
+                                </TableCell>
+                                <TableCell className="text-right">
+                                    <Skeleton className="h-4 w-20 ml-auto"/>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+    );
+}