@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/components/commerce/quote-comment-form.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import {useState, useTransition} from 'react';
+import {Button} from '@/components/ui/button';
+import {Textarea} from '@/components/ui/textarea';
+import {Send} from 'lucide-react';
+import {addQuoteComment} from '@/app/[locale]/account/quotes/actions';
+
+interface QuoteCommentFormProps {
+    quoteId: string;
+}
+
+export function QuoteCommentForm({quoteId}: QuoteCommentFormProps) {
+    const [text, setText] = useState('');
+    const [isPending, startTransition] = useTransition();
+    const [result, setResult] = useState<{success: boolean; message?: string} | null>(null);
+
+    function handleSubmit() {
+        if (!text.trim()) return;
+        startTransition(async () => {
+            const res = await addQuoteComment(quoteId, text.trim());
+            setResult(res);
+            if (res.success) {
+                setText('');
+                setResult(null);
+            }
+        });
+    }
+
+    return (
+        <div className="space-y-2">
+            <Textarea
+                placeholder="Add a comment..."
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+                rows={2}
+                disabled={isPending}
+            />
+            {result && !result.success && (
+                <p className="text-sm text-red-600">{result.message || 'Failed to add comment'}</p>
+            )}
+            <Button
+                size="sm"
+                onClick={handleSubmit}
+                disabled={isPending || !text.trim()}
+            >
+                <Send className="h-4 w-4 mr-1"/>
+                Send
+            </Button>
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/quote-csv-export-button.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import {Download} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+
+interface QuoteCsvExportButtonProps {
+    quoteNumber: string;
+    lineItems: Array<{
+        sku: string;
+        productName: string;
+        quantity: number;
+        unitPrice: number;
+        note?: string | null;
+    }>;
+    subtotal: number;
+    shippingCost: number;
+    total: number;
+    v1LineItems?: Array<{
+        sku: string;
+        unitPrice: number;
+    }>;
+}
+
+function escapeCsv(value: string): string {
+    if (value.includes(',') || value.includes('"') || value.includes('\n')) {
+        return `"${value.replace(/"/g, '""')}"`;
+    }
+    return value;
+}
+
+export function QuoteCsvExportButton({
+    quoteNumber,
+    lineItems,
+    subtotal,
+    shippingCost,
+    total,
+    v1LineItems,
+}: QuoteCsvExportButtonProps) {
+    const hasComparison = v1LineItems && v1LineItems.length > 0;
+    const v1BySku = new Map(v1LineItems?.map(item => [item.sku, item]) ?? []);
+
+    function handleExport() {
+        const headers = ['SKU', 'Product Name', 'Quantity', 'Unit Price', 'Line Total'];
+        if (hasComparison) {
+            headers.push('Original Price', 'Difference');
+        }
+
+        const rows: string[][] = [headers];
+
+        for (const item of lineItems) {
+            const unitPrice = (item.unitPrice / 100).toFixed(2);
+            const lineTotal = ((item.unitPrice * item.quantity) / 100).toFixed(2);
+            const row = [
+                escapeCsv(item.sku),
+                escapeCsv(item.productName),
+                String(item.quantity),
+                unitPrice,
+                lineTotal,
+            ];
+
+            if (hasComparison) {
+                const v1Item = v1BySku.get(item.sku);
+                if (v1Item) {
+                    const originalPrice = (v1Item.unitPrice / 100).toFixed(2);
+                    const diff = ((item.unitPrice - v1Item.unitPrice) / 100).toFixed(2);
+                    row.push(originalPrice, diff);
+                } else {
+                    row.push('', 'New');
+                }
+            }
+
+            rows.push(row);
+        }
+
+        // Summary rows
+        rows.push([]);
+        rows.push(['', '', '', 'Subtotal', (subtotal / 100).toFixed(2)]);
+        rows.push(['', '', '', 'Shipping', (shippingCost / 100).toFixed(2)]);
+        rows.push(['', '', '', 'Total', (total / 100).toFixed(2)]);
+
+        const csv = rows.map(row => row.join(',')).join('\n');
+        const blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${quoteNumber}.csv`;
+        link.click();
+        URL.revokeObjectURL(url);
+    }
+
+    return (
+        <Button variant="outline" size="sm" onClick={handleExport}>
+            <Download className="h-4 w-4 mr-2"/>
+            Export CSV
+        </Button>
+    );
+}

package/dist/assets/storefront/src/components/commerce/quote-product-search.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { useState, useTransition, useRef, useEffect, useCallback } from 'react';
+import Image from 'next/image';
+import { Input } from '@/components/ui/input';
+import { Plus, Search, Loader2 } from 'lucide-react';
+import { searchVariantsForQuote } from '@/app/[locale]/account/quotes/actions';
+import type { QuoteLineItemDraft } from './quote-request-form';
+import { useTranslations } from 'next-intl';
+
+interface QuoteProductSearchProps {
+    onAddItem: (item: QuoteLineItemDraft) => void;
+    currencyCode: string;
+}
+
+export function QuoteProductSearch({ onAddItem, currencyCode }: QuoteProductSearchProps) {
+    const t = useTranslations('Quotes');
+    const [searchTerm, setSearchTerm] = useState('');
+    const [results, setResults] = useState<Array<{
+        productVariantId: string;
+        productName: string;
+        variantName: string;
+        sku: string;
+        imageUrl?: string;
+        price: number;
+        currencyCode: string;
+        inStock: boolean;
+    }>>([]);
+    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 searchVariantsForQuote(term);
+            setResults(data);
+            setIsOpen(true);
+        });
+    }, []);
+
+    const handleSearch = (term: string) => {
+        setSearchTerm(term);
+        clearTimeout(debounceRef.current);
+        if (term.length < 2) {
+            setResults([]);
+            setIsOpen(false);
+            return;
+        }
+        debounceRef.current = setTimeout(() => doSearch(term), 300);
+    };
+
+    // Close dropdown on outside click
+    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);
+    }, []);
+
+    const handleAdd = (item: typeof results[number]) => {
+        onAddItem({
+            productVariantId: item.productVariantId,
+            productName: item.productName,
+            variantName: item.variantName,
+            sku: item.sku,
+            imageUrl: item.imageUrl,
+            quantity: 1,
+            unitPrice: item.price,
+            currencyCode: item.currencyCode || currencyCode,
+            inStock: item.inStock,
+        });
+        setSearchTerm('');
+        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={searchTerm}
+                    onChange={e => handleSearch(e.target.value)}
+                    onKeyDown={e => { if (e.key === 'Escape') setIsOpen(false); }}
+                    placeholder={t('requestForm.searchPlaceholder')}
+                    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.productVariantId}
+                            type="button"
+                            className="flex items-center gap-3 w-full p-3 hover:bg-muted/50 text-left"
+                            onClick={() => handleAdd(item)}
+                        >
+                            {item.imageUrl ? (
+                                <Image
+                                    src={`${item.imageUrl}?preset=tiny`}
+                                    alt={item.productName}
+                                    width={32}
+                                    height={32}
+                                    className="rounded object-cover"
+                                />
+                            ) : (
+                                <div className="h-8 w-8 rounded bg-muted" />
+                            )}
+                            <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.inStock && (
+                                        <span className="shrink-0 text-[10px] font-medium px-1 py-0.5 rounded bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300">
+                                            {t('requestForm.outOfStock')}
+                                        </span>
+                                    )}
+                                </div>
+                                <p className="text-xs text-muted-foreground">{item.sku}</p>
+                            </div>
+                            <Plus className="h-4 w-4 text-muted-foreground" />
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/quote-request-form.tsx

@@ -0,0 +1,252 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import Image from 'next/image';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Price } from '@/components/commerce/price';
+import { Minus, Plus, Trash2, Send } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+export interface QuoteLineItemDraft {
+    productVariantId: string;
+    productName: string;
+    variantName: string;
+    sku: string;
+    imageUrl?: string;
+    quantity: number;
+    unitPrice: number;
+    currencyCode: string;
+    note?: string;
+    inStock?: boolean;
+}
+
+interface QuoteRequestFormProps {
+    initialLineItems: QuoteLineItemDraft[];
+    sender: {
+        name: string;
+        email: string;
+        company?: string;
+    };
+    mode: 'from-cart' | 'standalone';
+    onSubmit: (
+        lineItems: Array<{ productVariantId: string; quantity: number; note?: string }>,
+        note?: string,
+    ) => Promise<{ success: false; message: string } | void>;
+    onCancel?: () => void;
+    renderSearch?: (addItem: (item: QuoteLineItemDraft) => void) => React.ReactNode;
+}
+
+export function QuoteRequestForm({
+    initialLineItems,
+    sender,
+    mode,
+    onSubmit,
+    onCancel,
+    renderSearch,
+}: QuoteRequestFormProps) {
+    const t = useTranslations('Quotes');
+    const [lineItems, setLineItems] = useState<QuoteLineItemDraft[]>(initialLineItems);
+    const [note, setNote] = useState('');
+    const [isPending, startTransition] = useTransition();
+    const [error, setError] = useState<string | null>(null);
+
+    const updateQuantity = (index: number, delta: number) => {
+        setLineItems(prev =>
+            prev.map((item, i) =>
+                i === index ? { ...item, quantity: Math.max(1, item.quantity + delta) } : item,
+            ),
+        );
+    };
+
+    const setQuantity = (index: number, quantity: number) => {
+        setLineItems(prev =>
+            prev.map((item, i) => (i === index ? { ...item, quantity: Math.max(1, quantity) } : item)),
+        );
+    };
+
+    const removeItem = (index: number) => {
+        setLineItems(prev => prev.filter((_, i) => i !== index));
+    };
+
+    const addItem = (item: QuoteLineItemDraft) => {
+        setLineItems(prev => {
+            const existing = prev.findIndex(li => li.productVariantId === item.productVariantId);
+            if (existing >= 0) {
+                return prev.map((li, i) =>
+                    i === existing ? { ...li, quantity: li.quantity + 1 } : li,
+                );
+            }
+            return [...prev, item];
+        });
+    };
+
+    const subtotal = lineItems.reduce((sum, item) => sum + item.unitPrice * item.quantity, 0);
+    const currencyCode = lineItems[0]?.currencyCode ?? 'USD';
+
+    const handleSubmit = () => {
+        if (lineItems.length === 0) return;
+        setError(null);
+        startTransition(async () => {
+            const result = await onSubmit(
+                lineItems.map(li => ({
+                    productVariantId: li.productVariantId,
+                    quantity: li.quantity,
+                    note: li.note || undefined,
+                })),
+                note || undefined,
+            );
+            if (result && !result.success) {
+                setError(result.message);
+            }
+        });
+    };
+
+    return (
+        <div className="space-y-6">
+            {/* Sender info */}
+            <div className="rounded-lg border bg-muted/30 p-4">
+                <div className="text-sm">
+                    <span className="font-medium">{sender.name}</span>
+                    <span className="text-muted-foreground ml-2">{sender.email}</span>
+                    {sender.company && (
+                        <span className="text-muted-foreground ml-2">({sender.company})</span>
+                    )}
+                </div>
+            </div>
+
+            {/* Line items */}
+            <div className="space-y-3">
+                <Label className="text-sm font-medium">{t('requestForm.lineItemsLabel')}</Label>
+                {lineItems.length === 0 ? (
+                    <p className="text-sm text-muted-foreground py-4 text-center">
+                        {t('requestForm.noItemsMessage')}
+                    </p>
+                ) : (
+                    <div className="divide-y rounded-lg border">
+                        {lineItems.map((item, index) => (
+                            <div key={`${item.productVariantId}-${index}`} className="flex items-center gap-4 p-3">
+                                {item.imageUrl ? (
+                                    <Image
+                                        src={`${item.imageUrl}?preset=tiny`}
+                                        alt={item.productName}
+                                        width={48}
+                                        height={48}
+                                        className="rounded object-cover"
+                                    />
+                                ) : (
+                                    <div className="h-12 w-12 rounded bg-muted flex items-center justify-center text-xs text-muted-foreground">
+                                        N/A
+                                    </div>
+                                )}
+                                <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.inStock === false && (
+                                            <span className="shrink-0 text-[10px] font-medium px-1 py-0.5 rounded bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300">
+                                                {t('requestForm.outOfStock')}
+                                            </span>
+                                        )}
+                                    </div>
+                                    <p className="text-xs text-muted-foreground">{item.sku}</p>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        size="icon"
+                                        className="h-7 w-7"
+                                        onClick={() => updateQuantity(index, -1)}
+                                        disabled={item.quantity <= 1}
+                                    >
+                                        <Minus className="h-3 w-3" />
+                                    </Button>
+                                    <Input
+                                        type="number"
+                                        min={1}
+                                        value={item.quantity}
+                                        onChange={e => setQuantity(index, parseInt(e.target.value, 10) || 1)}
+                                        className="h-8 w-20 text-center text-sm"
+                                    />
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        size="icon"
+                                        className="h-7 w-7"
+                                        onClick={() => updateQuantity(index, 1)}
+                                    >
+                                        <Plus className="h-3 w-3" />
+                                    </Button>
+                                </div>
+                                <div className="text-sm text-right w-24">
+                                    <Price value={item.unitPrice * item.quantity} currencyCode={item.currencyCode} />
+                                </div>
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                                    onClick={() => removeItem(index)}
+                                >
+                                    <Trash2 className="h-3.5 w-3.5" />
+                                </Button>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {/* Product search slot */}
+            {renderSearch && renderSearch(addItem)}
+
+            {/* Subtotal */}
+            {lineItems.length > 0 && (
+                <div className="flex justify-end text-sm">
+                    <span className="text-muted-foreground mr-2">{t('requestForm.subtotalLabel')}</span>
+                    <span className="font-medium">
+                        <Price value={subtotal} currencyCode={currencyCode} />
+                    </span>
+                </div>
+            )}
+
+            {/* Message */}
+            <div className="space-y-2">
+                <Label htmlFor="quote-note" className="text-sm font-medium">
+                    {t('requestForm.messageLabel')}
+                </Label>
+                <Textarea
+                    id="quote-note"
+                    value={note}
+                    onChange={e => setNote(e.target.value)}
+                    placeholder={t('requestForm.messagePlaceholder')}
+                    rows={3}
+                />
+            </div>
+
+            {/* Error */}
+            {error && <p className="text-sm text-destructive">{error}</p>}
+
+            {/* Actions */}
+            <div className="flex gap-3 justify-end">
+                {onCancel && (
+                    <Button type="button" variant="outline" onClick={onCancel} disabled={isPending}>
+                        {t('requestForm.cancelButton')}
+                    </Button>
+                )}
+                <Button
+                    onClick={handleSubmit}
+                    disabled={isPending || lineItems.length === 0}
+                >
+                    <Send className="h-4 w-4 mr-2" />
+                    {isPending
+                        ? t('requestForm.submittingButton')
+                        : mode === 'from-cart'
+                          ? t('requestForm.submitFromCartButton')
+                          : t('requestForm.submitButton')}
+                </Button>
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/quote-status-badge.tsx

@@ -0,0 +1,41 @@
+import {Badge} from '@/components/ui/badge';
+import {
+    FileEdit,
+    Search,
+    Clock,
+    Send,
+    MessageSquare,
+    CheckCircle,
+    XCircle,
+    Ban,
+    TimerOff,
+    type LucideIcon,
+} from 'lucide-react';
+
+const STATUS_CONFIG: Record<string, { color: string; label: string; icon: LucideIcon }> = {
+    DRAFT: {color: 'bg-gray-100 text-gray-800', label: 'Draft', icon: FileEdit},
+    IN_REVIEW: {color: 'bg-amber-100 text-amber-800', label: 'In Review', icon: Search},
+    AWAITING_APPROVAL: {color: 'bg-amber-100 text-amber-800', label: 'Awaiting Approval', icon: Clock},
+    QUOTED: {color: 'bg-blue-100 text-blue-800', label: 'Quoted', icon: Send},
+    CHANGES_REQUESTED: {color: 'bg-orange-100 text-orange-800', label: 'Changes Requested', icon: MessageSquare},
+    ACCEPTED: {color: 'bg-green-100 text-green-800', label: 'Accepted', icon: CheckCircle},
+    REJECTED: {color: 'bg-red-100 text-red-800', label: 'Rejected', icon: XCircle},
+    CANCELLED: {color: 'bg-red-100 text-red-800', label: 'Cancelled', icon: Ban},
+    EXPIRED: {color: 'bg-gray-100 text-gray-600', label: 'Expired', icon: TimerOff},
+};
+
+interface QuoteStatusBadgeProps {
+    status: string;
+}
+
+export function QuoteStatusBadge({status}: QuoteStatusBadgeProps) {
+    const config = STATUS_CONFIG[status] || {color: 'bg-gray-100 text-gray-800', label: status, icon: Clock};
+    const Icon = config.icon;
+
+    return (
+        <Badge className={config.color} variant="secondary">
+            <Icon className="h-3 w-3 mr-1"/>
+            {config.label}
+        </Badge>
+    );
+}

package/dist/assets/storefront/src/components/commerce/quote-validity-indicator.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import {useLocale} from 'next-intl';
+import {formatDate} from '@/lib/format';
+
+interface QuoteValidityIndicatorProps {
+    validUntil: string;
+}
+
+export function QuoteValidityIndicator({validUntil}: QuoteValidityIndicatorProps) {
+    const locale = useLocale();
+    const daysRemaining = Math.ceil(
+        (new Date(validUntil).getTime() - Date.now()) / (1000 * 60 * 60 * 24),
+    );
+
+    if (daysRemaining < 0) {
+        return <span className="text-red-600 font-medium">Expired</span>;
+    }
+
+    if (daysRemaining === 0) {
+        return <span className="text-amber-600 font-medium">Expires today</span>;
+    }
+
+    if (daysRemaining <= 7) {
+        return (
+            <span className={`font-medium ${daysRemaining <= 3 ? 'text-amber-600' : 'text-muted-foreground'}`}>
+                Expires in {daysRemaining} day{daysRemaining !== 1 ? 's' : ''}
+            </span>
+        );
+    }
+
+    return <span>{formatDate(validUntil, locale)}</span>;
+}