@vendure-platform/create 0.1.0

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

@@ -0,0 +1,54 @@
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import {Skeleton} from '@/components/ui/skeleton';
+
+export default function ProfileLoading() {
+    return (
+        <div className="space-y-6">
+            <div>
+                <h1 className="text-3xl font-bold">Profile</h1>
+                <p className="text-muted-foreground mt-2">
+                    Manage your account information
+                </p>
+            </div>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Account Information</CardTitle>
+                    <CardDescription>
+                        Your personal details
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <div>
+                        <p className="text-sm font-medium">Email</p>
+                        <Skeleton className="h-4 w-48 mt-1"/>
+                    </div>
+                    <div>
+                        <p className="text-sm font-medium">Name</p>
+                        <Skeleton className="h-4 w-32 mt-1"/>
+                    </div>
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Change Password</CardTitle>
+                    <CardDescription>
+                        Update your password
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <div className="space-y-2">
+                        <Skeleton className="h-4 w-32"/>
+                        <Skeleton className="h-10 w-full"/>
+                    </div>
+                    <div className="space-y-2">
+                        <Skeleton className="h-4 w-32"/>
+                        <Skeleton className="h-10 w-full"/>
+                    </div>
+                    <Skeleton className="h-10 w-32"/>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/profile/page.tsx

@@ -0,0 +1,44 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {getActiveCustomer} from '@/lib/vendure/actions';
+import {ChangePasswordForm} from './change-password-form';
+import {EditProfileForm} from './edit-profile-form';
+import {EditEmailForm} from './edit-email-form';
+import {getTranslations} from 'next-intl/server';
+
+export const metadata: Metadata = {
+    title: 'Profile',
+};
+
+async function ProfileContent() {
+    const [customer, t] = await Promise.all([getActiveCustomer(), getTranslations('Account')]);
+
+    return (
+        <div className="space-y-6">
+            <div>
+                <h1 className="text-3xl font-bold">{t('profile')}</h1>
+                <p className="text-muted-foreground mt-2">
+                    {t('manageAccountInfo')}
+                </p>
+            </div>
+
+            <EditProfileForm customer={customer} />
+
+            <EditEmailForm currentEmail={customer?.emailAddress || ''} />
+
+            <ChangePasswordForm />
+        </div>
+    );
+}
+
+export default function ProfilePage() {
+    return (
+        <Suspense fallback={
+            <div className="text-center py-12">
+                <p className="text-sm text-muted-foreground">Loading...</p>
+            </div>
+        }>
+            <ProfileContent />
+        </Suspense>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/quick-order/actions.ts

@@ -0,0 +1,103 @@
+'use server';
+
+import { createShoppingList } from '@/app/[locale]/account/shopping-lists/actions';
+import type { VariablesOf } from '@/graphql';
+import { readFragment } from '@/graphql';
+import { setAuthToken } from '@/lib/auth';
+import { cartGuard } from '@/lib/cart-guard';
+import { getGuardError } from '@/lib/cart-guard-utils';
+import { client } from '@/lib/vendure/api';
+import { ShoppingListFragment } from '@/lib/vendure/fragments';
+import {
+    AddQuickOrderToCartMutation,
+    AddToShoppingListMutation,
+    ValidateQuickOrderMutation,
+} from '@/lib/vendure/mutations';
+import { QuickOrderSearchQuery } from '@/lib/vendure/queries';
+import { updateTag } from 'next/cache';
+
+export type QuickOrderInput = VariablesOf<typeof ValidateQuickOrderMutation>['input'];
+
+export async function validateQuickOrder(input: QuickOrderInput) {
+    const [result, error] = await client.mutate(ValidateQuickOrderMutation, { input });
+    if (error) {
+        return { success: false as const, error: 'Failed to validate items' };
+    }
+    return { success: true as const, data: result.data.validateQuickOrderItems };
+}
+
+export async function addQuickOrderToCart(input: QuickOrderInput) {
+    const guard = await cartGuard();
+    const guardError = getGuardError(guard);
+    if (guardError) {
+        return { success: false as const, error: guardError };
+    }
+
+    const [result, error] = await client.mutate(AddQuickOrderToCartMutation, { input });
+    if (error) {
+        return { success: false as const, error: 'Failed to add items to cart' };
+    }
+
+    if (result.authToken) {
+        await setAuthToken(result.authToken);
+    }
+
+    const data = result.data.addQuickOrderItemsToOrder;
+    if (data.__typename === 'QuickOrderAddToOrderError') {
+        return { success: false as const, error: data.message };
+    }
+    updateTag('cart');
+    updateTag('active-order');
+    return { success: true as const, data, requiresReapproval: guard.requiresReapproval };
+}
+
+export async function saveToShoppingList(
+    items: Array<{ variantId: string; quantity: number }>,
+    listId?: string,
+    newListName?: string,
+) {
+    let targetListId = listId;
+
+    if (!targetListId && newListName) {
+        const createResult = await createShoppingList(newListName.trim());
+        if (!createResult.success || !createResult.shoppingList) {
+            return { success: false as const, error: 'Failed to create shopping list' };
+        }
+        const list = readFragment(ShoppingListFragment, createResult.shoppingList);
+        targetListId = list.id;
+    }
+
+    if (!targetListId) {
+        return { success: false as const, error: 'No shopping list specified' };
+    }
+
+    let addedCount = 0;
+    let failedCount = 0;
+    // Sequential to avoid race conditions — all mutations target the same list
+    for (const item of items) {
+        const [, error] = await client.mutate(AddToShoppingListMutation, {
+            productVariantId: item.variantId,
+            shoppingListId: targetListId,
+            quantity: item.quantity,
+        });
+        if (error) failedCount++;
+        else addedCount++;
+    }
+
+    updateTag('shopping-list');
+
+    if (addedCount === 0) {
+        return { success: false as const, error: 'Failed to add any items to the shopping list' };
+    }
+    return { success: true as const, addedCount, failedCount };
+}
+
+export async function searchQuickOrderProducts(term: string) {
+    if (!term || term.trim().length < 2) return [];
+    const [result, error] = await client.query(QuickOrderSearchQuery, {
+        term: term.trim(),
+        take: 8,
+    });
+    if (error) return [];
+    return result.data.quickOrderSearch;
+}

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

@@ -0,0 +1,148 @@
+import { Button } from '@/components/ui/button';
+import { CheckCircle2, FileText, Upload, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useRef, useState } from 'react';
+import type { QuickOrderInput } from './actions';
+
+const MAX_FILE_SIZE = 1024 * 1024; // 1MB
+const ACCEPTED_EXTENSIONS = new Set(['.csv', '.tsv', '.txt']);
+
+interface FileUploadTabProps {
+    onValidate: (input: QuickOrderInput) => void;
+    isValidating: boolean;
+}
+
+export function FileUploadTab({ onValidate, isValidating }: FileUploadTabProps) {
+    const t = useTranslations('QuickOrder.upload');
+    const tStatus = useTranslations('QuickOrder.status');
+    const [isDragging, setIsDragging] = useState(false);
+    const [fileName, setFileName] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const processFile = useCallback(
+        (file: File) => {
+            setError(null);
+            if (file.size > MAX_FILE_SIZE) {
+                setError(t('fileTooLarge'));
+                setFileName(null);
+                return;
+            }
+            const ext = '.' + (file.name.split('.').pop()?.toLowerCase() ?? '');
+            if (!ACCEPTED_EXTENSIONS.has(ext)) {
+                setError(t('unsupportedType'));
+                setFileName(null);
+                return;
+            }
+            const reader = new FileReader();
+            reader.onload = () => {
+                setFileName(file.name);
+                const content = reader.result as string;
+                if (ext === '.txt') {
+                    onValidate({ text: content });
+                } else {
+                    onValidate({ csvContent: content });
+                }
+            };
+            reader.onerror = () => {
+                setError(t('readError'));
+                setFileName(null);
+            };
+            reader.readAsText(file);
+        },
+        [onValidate, t],
+    );
+
+    const handleDrop = useCallback(
+        (e: React.DragEvent) => {
+            e.preventDefault();
+            setIsDragging(false);
+            const file = e.dataTransfer.files[0];
+            if (file) processFile(file);
+        },
+        [processFile],
+    );
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (file) processFile(file);
+        if (inputRef.current) inputRef.current.value = '';
+    };
+
+    const handleClear = () => {
+        setFileName(null);
+        setError(null);
+    };
+
+    return (
+        <div className="space-y-3">
+            <input
+                ref={inputRef}
+                type="file"
+                accept=".csv,.tsv,.txt"
+                onChange={handleFileChange}
+                className="hidden"
+            />
+            {fileName ? (
+                <div className="flex items-center gap-3 p-4 rounded-lg border bg-muted/30">
+                    <CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
+                    <FileText className="h-5 w-5 text-muted-foreground shrink-0" />
+                    <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{fileName}</p>
+                        <p className="text-xs text-muted-foreground">
+                            {isValidating ? tStatus('validating') : t('uploadedSuccess')}
+                        </p>
+                    </div>
+                    <div className="flex items-center gap-1 shrink-0">
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => inputRef.current?.click()}
+                        >
+                            {t('changeFile')}
+                        </Button>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8"
+                            onClick={handleClear}
+                        >
+                            <X className="h-4 w-4" />
+                        </Button>
+                    </div>
+                </div>
+            ) : (
+                <div
+                    onDragOver={(e) => {
+                        e.preventDefault();
+                        setIsDragging(true);
+                    }}
+                    onDragLeave={() => setIsDragging(false)}
+                    onDrop={handleDrop}
+                    onClick={() => inputRef.current?.click()}
+                    className={`
+                        relative flex flex-col items-center justify-center gap-3 p-10 rounded-lg border-2 border-dashed cursor-pointer transition-colors
+                        ${
+                            isDragging
+                                ? 'border-primary bg-primary/5'
+                                : 'border-muted-foreground/25 hover:border-muted-foreground/50 hover:bg-muted/50'
+                        }
+                    `}
+                >
+                    <Upload className="h-8 w-8 text-muted-foreground" />
+                    <div className="text-center">
+                        <p className="text-sm font-medium">
+                            {isDragging ? t('dropHere') : t('dragDrop')}
+                        </p>
+                        <p className="text-xs text-muted-foreground mt-1">
+                            {t('supportedFormats')}
+                        </p>
+                    </div>
+                </div>
+            )}
+            {error && <p className="text-sm text-destructive">{error}</p>}
+        </div>
+    );
+}

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

@@ -0,0 +1,112 @@
+import { useCallback, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Plus, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { SkuAutocomplete, type SearchResult } from './sku-autocomplete';
+import type { QuickOrderInput } from './actions';
+
+interface ManualRow {
+    id: string;
+    sku: string;
+    quantity: number;
+    variant?: SearchResult;
+}
+
+interface ManualEntryTabProps {
+    onValidate: (input: QuickOrderInput) => void;
+    isValidating: boolean;
+}
+
+export function ManualEntryTab({ onValidate, isValidating }: ManualEntryTabProps) {
+    const t = useTranslations('QuickOrder');
+    const nextId = useRef(3);
+    function createRow(): ManualRow {
+        return { id: String(++nextId.current), sku: '', quantity: 1 };
+    }
+
+    const [rows, setRows] = useState<ManualRow[]>([
+        { id: '1', sku: '', quantity: 1 },
+        { id: '2', sku: '', quantity: 1 },
+        { id: '3', sku: '', quantity: 1 },
+    ]);
+
+    const updateRow = useCallback((id: string, updates: Partial<ManualRow>) => {
+        setRows(prev => prev.map(r => r.id === id ? { ...r, ...updates } : r));
+    }, []);
+
+    const removeRow = useCallback((id: string) => {
+        setRows(prev => prev.length > 1 ? prev.filter(r => r.id !== id) : prev);
+    }, []);
+
+    const handleSelect = useCallback((rowId: string, result: SearchResult) => {
+        updateRow(rowId, { sku: result.sku, variant: result });
+    }, [updateRow]);
+
+    const handleValidate = () => {
+        const items = rows
+            .filter(r => r.sku.trim())
+            .map(r => ({ sku: r.sku.trim(), quantity: Math.max(1, r.quantity) }));
+        if (items.length === 0) return;
+        onValidate({ items });
+    };
+
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                <div className="flex-1">{t('table.sku')}</div>
+                <div className="w-24">{t('table.qty')}</div>
+                <div className="w-9" />
+            </div>
+            {rows.map(row => (
+                <div key={row.id} className="flex items-center gap-2">
+                    <div className="flex-1">
+                        <SkuAutocomplete
+                            value={row.sku}
+                            onChange={val => updateRow(row.id, { sku: val, variant: undefined })}
+                            onSelect={result => handleSelect(row.id, result)}
+                            placeholder={t('manual.skuPlaceholder')}
+                        />
+                    </div>
+                    <Input
+                        type="number"
+                        min={1}
+                        value={row.quantity}
+                        onChange={e => updateRow(row.id, { quantity: parseInt(e.target.value) || 1 })}
+                        className="w-24"
+                        placeholder={t('manual.qtyPlaceholder')}
+                    />
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => removeRow(row.id)}
+                        disabled={rows.length === 1}
+                        className="shrink-0"
+                    >
+                        <X className="h-4 w-4" />
+                    </Button>
+                </div>
+            ))}
+            <div className="flex items-center gap-3">
+                <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setRows(prev => [...prev, createRow()])}
+                >
+                    <Plus className="h-4 w-4 mr-1" />
+                    {t('actions.addRow')}
+                </Button>
+                <Button
+                    type="button"
+                    size="sm"
+                    onClick={handleValidate}
+                    disabled={isValidating || rows.every(r => !r.sku.trim())}
+                >
+                    {t('actions.validate')}
+                </Button>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,26 @@
+import type { Metadata } from 'next';
+import { getActiveCustomer } from '@/lib/vendure/actions';
+import { redirect } from '@/i18n/navigation';
+import { getTranslations } from 'next-intl/server';
+import { QuickOrderForm } from './quick-order-form';
+
+export const metadata: Metadata = {
+    title: 'Quick Order',
+};
+
+export default async function QuickOrderPage() {
+    const [customer, t] = await Promise.all([
+        getActiveCustomer(),
+        getTranslations('QuickOrder'),
+    ]);
+    if (!customer) {
+        return await redirect('/sign-in');
+    }
+    return (
+        <div>
+            <h1 className="text-3xl font-bold mb-6">{t('pageTitle')}</h1>
+            <p className="text-muted-foreground mb-6">{t('pageDescription')}</p>
+            <QuickOrderForm />
+        </div>
+    );
+}

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

@@ -0,0 +1,170 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { formatPrice } from '@/lib/format';
+import { AlertTriangle, CheckCircle2, X, XCircle } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import type { ParseError, ValidatedItem } from './quick-order-form';
+
+interface PreviewTableProps {
+    items: ValidatedItem[];
+    parseErrors: ParseError[];
+    onUpdateQuantity: (index: number, quantity: number) => void;
+    onRemoveItem: (index: number) => void;
+}
+
+const STATUS_ICON = {
+    VALID: <CheckCircle2 className="h-4 w-4 text-green-600" />,
+    INVALID: <XCircle className="h-4 w-4 text-destructive" />,
+    WARNING: <AlertTriangle className="h-4 w-4 text-yellow-600" />,
+} as const;
+
+const MESSAGE_STYLE = {
+    ERROR: 'text-destructive',
+    WARNING: 'text-yellow-600',
+    INFO: 'text-muted-foreground',
+} as const;
+
+const STOCK_BADGE_STYLE = {
+    OUT_OF_STOCK: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+    LOW_STOCK: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300',
+} as const;
+
+function StockBadge({ status }: { status: string | null }) {
+    const t = useTranslations('QuickOrder.status');
+    if (status !== 'OUT_OF_STOCK' && status !== 'LOW_STOCK') return null;
+    const label = status === 'OUT_OF_STOCK' ? t('outOfStock') : t('lowStock');
+    return (
+        <span className={`ml-2 text-[10px] font-medium px-1 py-0.5 rounded ${STOCK_BADGE_STYLE[status]}`}>
+            {label}
+        </span>
+    );
+}
+
+function itemKey(item: ValidatedItem, index: number) {
+    return item.originalLineNumber != null
+        ? `${item.sku}-${item.originalLineNumber}`
+        : `${item.sku}-${index}`;
+}
+
+export function PreviewTable({ items, parseErrors, onUpdateQuantity, onRemoveItem }: PreviewTableProps) {
+    const t = useTranslations('QuickOrder');
+    const locale = useLocale();
+
+    if (items.length === 0 && parseErrors.length === 0) return null;
+
+    return (
+        <div className="space-y-3">
+            {parseErrors.length > 0 && (
+                <div className="rounded-lg border border-destructive/50 bg-destructive/5 p-3">
+                    <p className="text-sm font-medium text-destructive mb-1">
+                        {t('parseErrors', { count: parseErrors.length })}
+                    </p>
+                    <ul className="text-xs text-destructive space-y-0.5">
+                        {parseErrors.map((err, i) => (
+                            <li key={i}>
+                                {err.rawLine && (
+                                    <code className="mr-1 px-1 py-0.5 rounded bg-destructive/10 font-mono">
+                                        {err.rawLine}
+                                    </code>
+                                )}
+                                &mdash; {err.message}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+
+            {items.length > 0 && (
+                <div className="border rounded-lg">
+                    <Table>
+                        <TableHeader className="bg-muted">
+                            <TableRow>
+                                <TableHead className="w-12" />
+                                <TableHead>{t('table.sku')}</TableHead>
+                                <TableHead>{t('table.product')}</TableHead>
+                                <TableHead className="w-24">{t('table.qty')}</TableHead>
+                                <TableHead className="text-right">{t('table.unitPrice')}</TableHead>
+                                <TableHead className="text-right">{t('table.total')}</TableHead>
+                                <TableHead className="w-12" />
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {items.map((item, index) => (
+                                <TableRow
+                                    key={itemKey(item, index)}
+                                    className={item.status === 'INVALID' ? 'bg-destructive/5' : undefined}
+                                >
+                                    <TableCell>{STATUS_ICON[item.status]}</TableCell>
+                                    <TableCell className="font-mono text-sm">{item.sku}</TableCell>
+                                    <TableCell>
+                                        {item.productVariant ? (
+                                            <div>
+                                                <span>{item.productVariant.name}</span>
+                                                <StockBadge status={item.stockStatus} />
+                                            </div>
+                                        ) : (
+                                            <span className="text-muted-foreground">&mdash;</span>
+                                        )}
+                                        {item.messages.length > 0 && (
+                                            <div className="mt-1 space-y-0.5">
+                                                {item.messages.map((msg, i) => (
+                                                    <p
+                                                        key={i}
+                                                        className={`text-xs ${MESSAGE_STYLE[msg.type]}`}
+                                                    >
+                                                        {msg.message}
+                                                    </p>
+                                                ))}
+                                            </div>
+                                        )}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Input
+                                            type="number"
+                                            min={1}
+                                            value={item.quantity}
+                                            disabled={item.status === 'INVALID'}
+                                            onChange={(e) =>
+                                                onUpdateQuantity(
+                                                    index,
+                                                    Math.max(1, parseInt(e.target.value) || 1),
+                                                )
+                                            }
+                                            className="w-20 h-8 text-sm"
+                                        />
+                                    </TableCell>
+                                    <TableCell className="text-right">
+                                        {item.unitPriceWithTax != null ? (
+                                            formatPrice(item.unitPriceWithTax, locale, item.currencyCode ?? undefined)
+                                        ) : (
+                                            <span className="text-muted-foreground">&mdash;</span>
+                                        )}
+                                    </TableCell>
+                                    <TableCell className="text-right">
+                                        {item.lineTotalWithTax != null ? (
+                                            formatPrice(item.lineTotalWithTax, locale, item.currencyCode ?? undefined)
+                                        ) : (
+                                            <span className="text-muted-foreground">&mdash;</span>
+                                        )}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon"
+                                            className="h-7 w-7"
+                                            onClick={() => onRemoveItem(index)}
+                                        >
+                                            <X className="h-3.5 w-3.5" />
+                                        </Button>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
+            )}
+        </div>
+    );
+}