@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/account/quick-order/quick-order-form.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import type { ResultOf } from '@/graphql';
+import { formatPrice } from '@/lib/format';
+import type { ValidateQuickOrderMutation } from '@/lib/vendure/mutations';
+import { Heart, Info, ShoppingCart, Trash2 } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useCallback, useMemo, useState, useTransition } from 'react';
+import { toast } from 'sonner';
+import { addQuickOrderToCart, validateQuickOrder, type QuickOrderInput } from './actions';
+import { FileUploadTab } from './file-upload-tab';
+import { ManualEntryTab } from './manual-entry-tab';
+import { PreviewTable } from './preview-table';
+import { SaveToListDialog } from './save-to-list-dialog';
+import { TextInputTab } from './text-input-tab';
+
+type ValidationResult = ResultOf<typeof ValidateQuickOrderMutation>['validateQuickOrderItems'];
+export type ValidatedItem = ValidationResult['items'][number];
+type ParseErrorBase = ValidationResult['parseErrors'][number];
+export type ParseError = ParseErrorBase & { rawLine?: string };
+
+function isAddable(item: ValidatedItem) {
+    return item.status === 'VALID' || item.status === 'WARNING';
+}
+
+export function QuickOrderForm() {
+    const t = useTranslations('QuickOrder');
+    const locale = useLocale();
+    const [items, setItems] = useState<ValidatedItem[]>([]);
+    const [parseErrors, setParseErrors] = useState<ParseError[]>([]);
+    const [isValidating, startValidation] = useTransition();
+    const [isAddingToCart, startAddToCart] = useTransition();
+    const [showSaveDialog, setShowSaveDialog] = useState(false);
+    const [resetKey, setResetKey] = useState(0);
+
+    const validItems = useMemo(() => items.filter(isAddable), [items]);
+    const summary = useMemo(() => {
+        if (items.length === 0) return null;
+        return {
+            validCount: items.filter((i) => i.status === 'VALID').length,
+            invalidCount: items.filter((i) => i.status === 'INVALID').length,
+            warningCount: items.filter((i) => i.status === 'WARNING').length,
+        };
+    }, [items]);
+    const listPriceTotal = useMemo(
+        () => validItems.reduce((sum, i) => sum + (i.lineTotalWithTax ?? 0), 0),
+        [validItems],
+    );
+
+    const handleValidate = useCallback((input: QuickOrderInput) => {
+        startValidation(async () => {
+            const result = await validateQuickOrder(input);
+            if (!result.success) {
+                toast.error(result.error);
+                return;
+            }
+            setItems(result.data.items);
+            const rawText = input.text ?? input.csvContent;
+            const lines = rawText?.split(/\r?\n/);
+            setParseErrors(
+                result.data.parseErrors.map((err) => ({
+                    ...err,
+                    rawLine: lines?.[err.lineNumber - 1]?.trim(),
+                })),
+            );
+        });
+    }, []);
+
+    const handleAddToCart = () => {
+        if (validItems.length === 0) {
+            toast.error(t('toast.noValidItems'));
+            return;
+        }
+        startAddToCart(async () => {
+            const input: QuickOrderInput = {
+                items: validItems.map((i) => ({ sku: i.sku, quantity: i.quantity })),
+            };
+            const result = await addQuickOrderToCart(input);
+            if (!result.success) {
+                toast.error(result.error);
+                return;
+            }
+            if (result.data.addedCount > 0) {
+                toast.success(t('toast.addedToCart', { count: result.data.addedCount }));
+            }
+            const hasAddFailures = result.data.messages.length > 0;
+            if (hasAddFailures) {
+                for (const msg of result.data.messages) {
+                    toast.warning(msg.message);
+                }
+            } else if (result.data.skippedCount > 0) {
+                toast.warning(t('toast.skipped', { count: result.data.skippedCount }));
+            }
+            const remaining = hasAddFailures ? items : items.filter((i) => i.status === 'INVALID');
+            setItems(remaining);
+            if (remaining.length === 0) {
+                setParseErrors([]);
+                setResetKey((k) => k + 1);
+            }
+        });
+    };
+
+    const handleUpdateQuantity = useCallback((index: number, quantity: number) => {
+        setItems((prev) =>
+            prev.map((item, i) => {
+                if (i !== index) return item;
+                return {
+                    ...item,
+                    quantity,
+                    lineTotalWithTax: item.unitPriceWithTax != null ? item.unitPriceWithTax * quantity : null,
+                };
+            }),
+        );
+    }, []);
+
+    const handleRemoveItem = useCallback((index: number) => {
+        setItems((prev) => prev.filter((_, i) => i !== index));
+    }, []);
+
+    const handleClear = () => {
+        setItems([]);
+        setParseErrors([]);
+        setResetKey((k) => k + 1);
+    };
+
+    const hasResults = items.length > 0 || parseErrors.length > 0;
+    const currencyCode = validItems[0]?.currencyCode ?? undefined;
+
+    return (
+        <TooltipProvider>
+            <div className="space-y-6">
+                <Tabs defaultValue="manual">
+                    <TabsList>
+                        <TabsTrigger value="manual">{t('tabs.manual')}</TabsTrigger>
+                        <TabsTrigger value="paste">{t('tabs.paste')}</TabsTrigger>
+                        <TabsTrigger value="upload">{t('tabs.upload')}</TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="manual">
+                        <ManualEntryTab
+                            key={resetKey}
+                            onValidate={handleValidate}
+                            isValidating={isValidating}
+                        />
+                    </TabsContent>
+                    <TabsContent value="paste">
+                        <TextInputTab
+                            key={resetKey}
+                            onValidate={handleValidate}
+                            isValidating={isValidating}
+                        />
+                    </TabsContent>
+                    <TabsContent value="upload">
+                        <FileUploadTab
+                            key={resetKey}
+                            onValidate={handleValidate}
+                            isValidating={isValidating}
+                        />
+                    </TabsContent>
+                </Tabs>
+
+                {isValidating && (
+                    <div className="text-sm text-muted-foreground">{t('status.validating')}</div>
+                )}
+
+                <PreviewTable
+                    items={items}
+                    parseErrors={parseErrors}
+                    onUpdateQuantity={handleUpdateQuantity}
+                    onRemoveItem={handleRemoveItem}
+                />
+
+                {hasResults && (
+                    <div className="flex items-center flex-wrap gap-x-4 gap-y-2 pt-2 border-t">
+                        <div className="text-sm text-muted-foreground whitespace-nowrap">
+                            {summary && (
+                                <>
+                                    {t('summary.itemsReady', { count: validItems.length })}
+                                    {summary.invalidCount > 0 &&
+                                        `, ${t('summary.invalid', { count: summary.invalidCount })}`}
+                                    {summary.warningCount > 0 &&
+                                        ` (${t('summary.withWarnings', { count: summary.warningCount })})`}
+                                </>
+                            )}
+                            {listPriceTotal > 0 && (
+                                <span className="ml-2 font-medium text-foreground inline-flex items-center gap-1">
+                                    &middot; {t('summary.listPriceTotal')}{' '}
+                                    {formatPrice(listPriceTotal, locale, currencyCode)}
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                                        </TooltipTrigger>
+                                        <TooltipContent className="max-w-xs">
+                                            <p>{t('summary.listPriceTooltip')}</p>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </span>
+                            )}
+                        </div>
+                        <div className="flex items-center gap-2 ml-auto">
+                            <Button type="button" variant="ghost" size="sm" onClick={handleClear}>
+                                <Trash2 className="h-4 w-4 mr-1" />
+                                {t('actions.clearAll')}
+                            </Button>
+                            {validItems.length > 0 && (
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => setShowSaveDialog(true)}
+                                >
+                                    <Heart className="h-4 w-4 mr-1" />
+                                    {t('actions.saveAsList')}
+                                </Button>
+                            )}
+                            <Button
+                                type="button"
+                                size="sm"
+                                onClick={handleAddToCart}
+                                disabled={isAddingToCart || validItems.length === 0}
+                            >
+                                <ShoppingCart className="h-4 w-4 mr-1" />
+                                {isAddingToCart
+                                    ? t('actions.adding')
+                                    : t('actions.addToCart', { count: validItems.length })}
+                            </Button>
+                        </div>
+                    </div>
+                )}
+
+                <SaveToListDialog
+                    open={showSaveDialog}
+                    onOpenChange={setShowSaveDialog}
+                    validItems={validItems.flatMap((i) =>
+                        i.productVariant ? [{ variantId: i.productVariant.id, quantity: i.quantity }] : [],
+                    )}
+                />
+            </div>
+        </TooltipProvider>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/quick-order/save-to-list-dialog.tsx

@@ -0,0 +1,153 @@
+import { useState, useTransition, useEffect } from 'react';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogFooter,
+    DialogClose,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { toast } from 'sonner';
+import { useTranslations } from 'next-intl';
+import { getActiveUserShoppingLists } from '@/app/[locale]/account/shopping-lists/actions';
+import { saveToShoppingList } from './actions';
+
+interface ShoppingList {
+    id: string;
+    name: string;
+}
+
+interface SaveToListDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    validItems: Array<{ variantId: string; quantity: number }>;
+}
+
+export function SaveToListDialog({ open, onOpenChange, validItems }: SaveToListDialogProps) {
+    const t = useTranslations('QuickOrder.saveDialog');
+    const tToast = useTranslations('QuickOrder.toast');
+    const [lists, setLists] = useState<ShoppingList[]>([]);
+    const [mode, setMode] = useState<'new' | 'existing'>('new');
+    const [newListName, setNewListName] = useState('');
+    const [selectedListId, setSelectedListId] = useState<string>('');
+    const [isSaving, startTransition] = useTransition();
+
+    useEffect(() => {
+        if (!open) return;
+        setMode('new');
+        setSelectedListId('');
+        getActiveUserShoppingLists().then(data => {
+            if (data) {
+                setLists(data.map(l => ({ id: l.id, name: l.name })));
+                if (data.length > 0) setSelectedListId(data[0].id);
+            }
+        }).catch(() => {
+            setLists([]);
+        });
+    }, [open]);
+
+    const handleSave = () => {
+        if (validItems.length === 0) return;
+
+        startTransition(async () => {
+            if (mode === 'new' && !newListName.trim()) {
+                toast.error(t('enterListName'));
+                return;
+            }
+            const result = await saveToShoppingList(
+                validItems,
+                mode === 'existing' ? selectedListId : undefined,
+                mode === 'new' ? newListName : undefined,
+            );
+            if (!result.success) {
+                toast.error(result.error);
+                return;
+            }
+            toast.success(tToast('addedToList', { count: result.addedCount }));
+            if (result.failedCount > 0) {
+                toast.warning(tToast('failedToAdd', { count: result.failedCount }));
+            }
+            onOpenChange(false);
+            setNewListName('');
+        });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{t('title')}</DialogTitle>
+                    <DialogDescription>
+                        {t('description', { count: validItems.length })}
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-2">
+                    {lists.length > 0 && (
+                        <div className="flex gap-2">
+                            <Button
+                                type="button"
+                                variant={mode === 'new' ? 'default' : 'outline'}
+                                size="sm"
+                                onClick={() => setMode('new')}
+                            >
+                                {t('newList')}
+                            </Button>
+                            <Button
+                                type="button"
+                                variant={mode === 'existing' ? 'default' : 'outline'}
+                                size="sm"
+                                onClick={() => setMode('existing')}
+                            >
+                                {t('existingList')}
+                            </Button>
+                        </div>
+                    )}
+                    {mode === 'new' ? (
+                        <div className="space-y-2">
+                            <Label htmlFor="list-name">{t('listName')}</Label>
+                            <Input
+                                id="list-name"
+                                value={newListName}
+                                onChange={e => setNewListName(e.target.value)}
+                                placeholder={t('listNamePlaceholder')}
+                            />
+                        </div>
+                    ) : (
+                        <div className="space-y-2">
+                            <Label>{t('selectList')}</Label>
+                            <Select value={selectedListId} onValueChange={setSelectedListId}>
+                                <SelectTrigger className="w-full">
+                                    <SelectValue placeholder={t('selectListPlaceholder')} />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {lists.map(list => (
+                                        <SelectItem key={list.id} value={list.id}>
+                                            {list.name}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    )}
+                </div>
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button type="button" variant="outline">{t('cancel')}</Button>
+                    </DialogClose>
+                    <Button
+                        type="button"
+                        onClick={handleSave}
+                        disabled={isSaving || validItems.length === 0}
+                    >
+                        {isSaving ? t('saving') : t('save')}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/quick-order/sku-autocomplete.tsx

@@ -0,0 +1,118 @@
+import { useState, useTransition, useRef, useEffect, useCallback } from 'react';
+import type { ResultOf } from '@/graphql';
+import type { QuickOrderSearchQuery } from '@/lib/vendure/queries';
+import { Input } from '@/components/ui/input';
+import { Search, Loader2 } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { searchQuickOrderProducts } from './actions';
+import { formatPrice } from '@/lib/format';
+
+export type SearchResult = ResultOf<typeof QuickOrderSearchQuery>['quickOrderSearch'][number];
+
+interface SkuAutocompleteProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSelect: (result: SearchResult) => void;
+    placeholder?: string;
+}
+
+const OUT_OF_STOCK_BADGE = 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300';
+
+export function SkuAutocomplete({ value, onChange, onSelect, placeholder }: SkuAutocompleteProps) {
+    const t = useTranslations('QuickOrder');
+    const locale = useLocale();
+    const [results, setResults] = useState<SearchResult[]>([]);
+    const [isPending, startTransition] = useTransition();
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+    const doSearch = useCallback((term: string) => {
+        if (term.length < 2) {
+            setResults([]);
+            setIsOpen(false);
+            return;
+        }
+        startTransition(async () => {
+            const data = await searchQuickOrderProducts(term);
+            setResults(data);
+            setIsOpen(true);
+        });
+    }, []);
+
+    const handleChange = (term: string) => {
+        onChange(term);
+        clearTimeout(debounceRef.current);
+        if (term.length < 2) {
+            setResults([]);
+            setIsOpen(false);
+            return;
+        }
+        debounceRef.current = setTimeout(() => doSearch(term), 300);
+    };
+
+    useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            clearTimeout(debounceRef.current);
+        };
+    }, []);
+
+    const handleSelect = (item: SearchResult) => {
+        onSelect(item);
+        onChange(item.sku);
+        setResults([]);
+        setIsOpen(false);
+    };
+
+    return (
+        <div className="relative" ref={containerRef}>
+            <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                    value={value}
+                    onChange={e => handleChange(e.target.value)}
+                    onKeyDown={e => { if (e.key === 'Escape') setIsOpen(false); }}
+                    placeholder={placeholder ?? t('manual.skuPlaceholder')}
+                    className="pl-10"
+                />
+                {isPending && (
+                    <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
+                )}
+            </div>
+            {isOpen && results.length > 0 && (
+                <div className="absolute z-10 mt-1 w-full rounded-lg border bg-background shadow-lg max-h-64 overflow-y-auto">
+                    {results.map(item => (
+                        <button
+                            key={item.variantId}
+                            type="button"
+                            className="flex items-center gap-3 w-full p-3 hover:bg-muted/50 text-left"
+                            onClick={() => handleSelect(item)}
+                        >
+                            <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-1.5">
+                                    <p className="text-sm font-medium truncate">{item.productName}</p>
+                                    {item.variantName && item.variantName !== item.productName && (
+                                        <span className="text-xs text-muted-foreground">({item.variantName})</span>
+                                    )}
+                                    {!item.inStock && (
+                                        <span className={`shrink-0 text-[10px] font-medium px-1 py-0.5 rounded ${OUT_OF_STOCK_BADGE}`}>
+                                            {t('status.outOfStock')}
+                                        </span>
+                                    )}
+                                </div>
+                                <p className="text-xs text-muted-foreground">{item.sku} &middot; {formatPrice(item.priceWithTax, locale, item.currencyCode)}</p>
+                            </div>
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/quick-order/text-input-tab.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { useTranslations } from 'next-intl';
+import type { QuickOrderInput } from './actions';
+
+interface TextInputTabProps {
+    onValidate: (input: QuickOrderInput) => void;
+    isValidating: boolean;
+}
+
+export function TextInputTab({ onValidate, isValidating }: TextInputTabProps) {
+    const t = useTranslations('QuickOrder');
+    const [text, setText] = useState('');
+
+    const handleValidate = () => {
+        if (!text.trim()) return;
+        onValidate({ text: text.trim() });
+    };
+
+    return (
+        <div className="space-y-3">
+            <Textarea
+                value={text}
+                onChange={e => setText(e.target.value)}
+                placeholder={t('textInput.placeholder')}
+                rows={10}
+                className="font-mono text-sm"
+            />
+            <Button
+                type="button"
+                size="sm"
+                onClick={handleValidate}
+                disabled={isValidating || !text.trim()}
+            >
+                {t('actions.validate')}
+            </Button>
+        </div>
+    );
+}