@vendure/dashboard 3.4.3-master-202509230228 → 3.4.3-master-202509250229

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-method-test-result-wrapper.tsx

@@ -0,0 +1,87 @@
+import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Card, CardContent, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { PlayIcon } from 'lucide-react';
+import React from 'react';
+
+interface ShippingMethodTestResultWrapperProps {
+    okToRun: boolean;
+    testDataUpdated: boolean;
+    hasTestedOnce: boolean;
+    onRunTest: () => void;
+    loading?: boolean;
+    children: React.ReactNode;
+    emptyState?: React.ReactNode;
+    showEmptyState?: boolean;
+    runTestLabel?: React.ReactNode;
+    loadingLabel?: React.ReactNode;
+}
+
+export function ShippingMethodTestResultWrapper({
+    okToRun,
+    testDataUpdated,
+    hasTestedOnce,
+    onRunTest,
+    loading = false,
+    children,
+    emptyState,
+    showEmptyState = false,
+    runTestLabel = <Trans>Run Test</Trans>,
+    loadingLabel = <Trans>Testing shipping method...</Trans>,
+}: Readonly<ShippingMethodTestResultWrapperProps>) {
+    const canRunTest = okToRun && testDataUpdated;
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center justify-between">
+                    <span>
+                        <Trans>Test Results</Trans>
+                    </span>
+                    {okToRun && (
+                        <Button
+                            onClick={onRunTest}
+                            disabled={!canRunTest || loading}
+                            size="sm"
+                            className="ml-auto"
+                        >
+                            <PlayIcon className="mr-1 h-4 w-4" />
+                            {runTestLabel}
+                        </Button>
+                    )}
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                {!okToRun && (
+                    <Alert>
+                        <AlertDescription>
+                            <Trans>
+                                Please add products and complete the shipping address to run the test.
+                            </Trans>
+                        </AlertDescription>
+                    </Alert>
+                )}
+
+                {okToRun && testDataUpdated && hasTestedOnce && (
+                    <Alert variant="destructive">
+                        <AlertDescription>
+                            <Trans>
+                                Test data has been updated. Click "Run Test" to see updated results.
+                            </Trans>
+                        </AlertDescription>
+                    </Alert>
+                )}
+
+                {loading && (
+                    <div className="text-center py-8">
+                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+                        <p className="mt-2 text-sm text-muted-foreground">{loadingLabel}</p>
+                    </div>
+                )}
+
+                {!loading && showEmptyState && emptyState}
+                {!loading && !showEmptyState && children}
+            </CardContent>
+        </Card>
+    );
+}

package/src/app/routes/_authenticated/_shipping-methods/components/test-address-form.tsx

@@ -0,0 +1,255 @@
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { AccordionContent, AccordionItem, AccordionTrigger } from '@/vdb/components/ui/accordion.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+
+// Query document to fetch available countries
+const getAvailableCountriesDocument = graphql(`
+    query GetAvailableCountries {
+        countries(options: { filter: { enabled: { eq: true } } }) {
+            items {
+                id
+                code
+                name
+            }
+        }
+    }
+`);
+
+export interface TestAddress {
+    fullName: string;
+    company?: string;
+    streetLine1: string;
+    streetLine2?: string;
+    city: string;
+    province: string;
+    postalCode: string;
+    countryCode: string;
+    phoneNumber?: string;
+}
+
+interface TestAddressFormProps {
+    onAddressChange: (address: TestAddress) => void;
+}
+
+export function TestAddressForm({ onAddressChange }: Readonly<TestAddressFormProps>) {
+    const form = useForm<TestAddress>({
+        defaultValues: (() => {
+            try {
+                const stored = localStorage.getItem('shippingTestAddress');
+                return stored
+                    ? JSON.parse(stored)
+                    : {
+                          fullName: '',
+                          company: '',
+                          streetLine1: '',
+                          streetLine2: '',
+                          city: '',
+                          province: '',
+                          postalCode: '',
+                          countryCode: '',
+                          phoneNumber: '',
+                      };
+            } catch {
+                return {
+                    fullName: '',
+                    company: '',
+                    streetLine1: '',
+                    streetLine2: '',
+                    city: '',
+                    province: '',
+                    postalCode: '',
+                    countryCode: '',
+                    phoneNumber: '',
+                };
+            }
+        })(),
+    });
+
+    // Fetch available countries
+    const { data: countriesData, isLoading: isLoadingCountries } = useQuery({
+        queryKey: ['availableCountries'],
+        queryFn: () => api.query(getAvailableCountriesDocument),
+        staleTime: 1000 * 60 * 60 * 24, // 24 hours
+    });
+
+    const previousValuesRef = useRef<string>('');
+
+    // Use form subscription instead of watch() to avoid infinite loops
+    useEffect(() => {
+        const subscription = form.watch(value => {
+            const currentValueString = JSON.stringify(value);
+
+            // Only update if values actually changed
+            if (currentValueString !== previousValuesRef.current) {
+                previousValuesRef.current = currentValueString;
+
+                try {
+                    localStorage.setItem('shippingTestAddress', currentValueString);
+                } catch {
+                    // Ignore localStorage errors
+                }
+
+                if (value) {
+                    onAddressChange(value as TestAddress);
+                }
+            }
+        });
+
+        return () => subscription.unsubscribe();
+    }, [form, onAddressChange]);
+
+    useEffect(() => {
+        const initialAddress = form.getValues();
+        onAddressChange(initialAddress);
+    }, []);
+
+    const currentValues = form.getValues();
+
+    const getAddressSummary = () => {
+        const parts = [
+            currentValues.fullName,
+            currentValues.streetLine1,
+            currentValues.city,
+            currentValues.province,
+            currentValues.postalCode,
+            currentValues.countryCode,
+        ].filter(Boolean);
+        return parts.length > 0 ? parts.join(', ') : '';
+    };
+
+    const isComplete = !!(
+        currentValues.fullName &&
+        currentValues.streetLine1 &&
+        currentValues.city &&
+        currentValues.province &&
+        currentValues.postalCode &&
+        currentValues.countryCode
+    );
+
+    return (
+        <AccordionItem value="shipping-address">
+            <AccordionTrigger>
+                <div className="flex items-center justify-between w-full pr-2">
+                    <span>
+                        <Trans>Shipping Address</Trans>
+                    </span>
+                    {isComplete && (
+                        <span className="text-sm text-muted-foreground truncate max-w-md">
+                            {getAddressSummary()}
+                        </span>
+                    )}
+                </div>
+            </AccordionTrigger>
+            <AccordionContent className="px-2">
+                <Form {...form}>
+                    <div className="space-y-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="fullName"
+                                label={<Trans>Full Name</Trans>}
+                                render={({ field }) => <Input {...field} placeholder="John Smith" />}
+                            />
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="company"
+                                label={<Trans>Company</Trans>}
+                                render={({ field }) => (
+                                    <Input {...field} value={field.value || ''} placeholder="Company name" />
+                                )}
+                            />
+                        </div>
+
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="streetLine1"
+                            label={<Trans>Street Address</Trans>}
+                            render={({ field }) => <Input {...field} placeholder="123 Main Street" />}
+                        />
+
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="streetLine2"
+                            label={<Trans>Street Address 2</Trans>}
+                            render={({ field }) => (
+                                <Input
+                                    {...field}
+                                    value={field.value || ''}
+                                    placeholder="Apartment, suite, etc."
+                                />
+                            )}
+                        />
+
+                        <div className="grid grid-cols-3 gap-4">
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="city"
+                                label={<Trans>City</Trans>}
+                                render={({ field }) => <Input {...field} placeholder="New York" />}
+                            />
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="province"
+                                label={<Trans>State / Province</Trans>}
+                                render={({ field }) => <Input {...field} placeholder="NY" />}
+                            />
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="postalCode"
+                                label={<Trans>Postal Code</Trans>}
+                                render={({ field }) => <Input {...field} placeholder="10001" />}
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="countryCode"
+                                label={<Trans>Country</Trans>}
+                                renderFormControl={false}
+                                render={({ field }) => (
+                                    <Select
+                                        onValueChange={field.onChange}
+                                        value={field.value}
+                                        disabled={isLoadingCountries}
+                                    >
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Select a country" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {countriesData?.countries.items.map(country => (
+                                                <SelectItem key={country.code} value={country.code}>
+                                                    {country.name}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                )}
+                            />
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="phoneNumber"
+                                label={<Trans>Phone Number</Trans>}
+                                render={({ field }) => (
+                                    <Input
+                                        {...field}
+                                        value={field.value || ''}
+                                        placeholder="+1 (555) 123-4567"
+                                    />
+                                )}
+                            />
+                        </div>
+                    </div>
+                </Form>
+            </AccordionContent>
+        </AccordionItem>
+    );
+}

package/src/app/routes/_authenticated/_shipping-methods/components/test-order-builder.tsx

@@ -0,0 +1,243 @@
+import {
+    ProductVariantSelector,
+    ProductVariantSelectorProps,
+} from '@/vdb/components/shared/product-variant-selector.js';
+import { AssetLike, VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { AccordionContent, AccordionItem, AccordionTrigger } from '@/vdb/components/ui/accordion.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    VisibilityState,
+} from '@tanstack/react-table';
+import { Trash2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export interface TestOrderLine {
+    id: string;
+    name: string;
+    featuredAsset?: AssetLike;
+    sku: string;
+    unitPriceWithTax: number;
+    quantity: number;
+}
+
+interface TestOrderBuilderProps {
+    onOrderLinesChange: (lines: TestOrderLine[]) => void;
+}
+
+export function TestOrderBuilder({ onOrderLinesChange }: Readonly<TestOrderBuilderProps>) {
+    const { formatCurrency } = useLocalFormat();
+    const { activeChannel } = useChannel();
+    const [lines, setLines] = useState<TestOrderLine[]>(() => {
+        try {
+            const stored = localStorage.getItem('shippingTestOrder');
+            return stored ? JSON.parse(stored) : [];
+        } catch {
+            return [];
+        }
+    });
+    const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+
+    const currencyCode = activeChannel?.defaultCurrencyCode ?? 'USD';
+    const subTotal = lines.reduce((sum, l) => sum + l.unitPriceWithTax * l.quantity, 0);
+
+    useEffect(() => {
+        try {
+            localStorage.setItem('shippingTestOrder', JSON.stringify(lines));
+        } catch {
+            // Ignore localStorage errors
+        }
+        onOrderLinesChange(lines);
+    }, [lines, onOrderLinesChange]);
+
+    const addProduct = (product: Parameters<ProductVariantSelectorProps['onProductVariantSelect']>[0]) => {
+        if (!lines.find(l => l.id === product.productVariantId)) {
+            const newLine: TestOrderLine = {
+                id: product.productVariantId,
+                name: product.productVariantName,
+                featuredAsset: product.productAsset ?? undefined,
+                quantity: 1,
+                sku: product.sku,
+                unitPriceWithTax: product.priceWithTax || 0,
+            };
+            setLines(prev => [...prev, newLine]);
+        }
+    };
+
+    const updateQuantity = (lineId: string, newQuantity: number) => {
+        if (newQuantity <= 0) {
+            removeLine(lineId);
+            return;
+        }
+        setLines(prev => prev.map(line => (line.id === lineId ? { ...line, quantity: newQuantity } : line)));
+    };
+
+    const removeLine = (lineId: string) => {
+        setLines(prev => prev.filter(line => line.id !== lineId));
+    };
+
+    const columns: ColumnDef<TestOrderLine>[] = [
+        {
+            header: 'Image',
+            accessorKey: 'preview',
+            cell: ({ row }) => {
+                const asset = row.original.featuredAsset ?? null;
+                return <VendureImage asset={asset} preset="tiny" />;
+            },
+        },
+        {
+            header: 'Product',
+            accessorKey: 'name',
+        },
+        {
+            header: 'SKU',
+            accessorKey: 'sku',
+        },
+        {
+            header: 'Unit price',
+            accessorKey: 'unitPriceWithTax',
+            cell: ({ row }) => {
+                return formatCurrency(row.original.unitPriceWithTax, currencyCode);
+            },
+        },
+        {
+            header: 'Quantity',
+            accessorKey: 'quantity',
+            cell: ({ row }) => {
+                return (
+                    <div className="flex gap-2 items-center">
+                        <Input
+                            type="number"
+                            min="1"
+                            value={row.original.quantity}
+                            onChange={e => updateQuantity(row.original.id, parseInt(e.target.value) || 1)}
+                            className="w-16"
+                        />
+                        <Button
+                            variant="outline"
+                            type="button"
+                            size="icon"
+                            onClick={() => removeLine(row.original.id)}
+                            className="h-8 w-8"
+                        >
+                            <Trash2 className="h-4 w-4" />
+                        </Button>
+                    </div>
+                );
+            },
+        },
+        {
+            header: 'Total',
+            accessorKey: 'total',
+            cell: ({ row }) => {
+                const total = row.original.unitPriceWithTax * row.original.quantity;
+                return formatCurrency(total, currencyCode);
+            },
+        },
+    ];
+
+    const table = useReactTable({
+        data: lines,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        rowCount: lines.length,
+        onColumnVisibilityChange: setColumnVisibility,
+        state: {
+            columnVisibility,
+        },
+    });
+
+    return (
+        <AccordionItem value="test-order">
+            <AccordionTrigger>
+                <div className="flex items-center justify-between w-full pr-2">
+                    <span>
+                        <Trans>Test Order</Trans>
+                    </span>
+                    {lines.length > 0 && (
+                        <span className="text-sm text-muted-foreground">
+                            {lines.length} item{lines.length !== 1 ? 's' : ''} •{' '}
+                            {formatCurrency(subTotal, currencyCode)}
+                        </span>
+                    )}
+                </div>
+            </AccordionTrigger>
+            <AccordionContent className="space-y-4 px-2">
+                {lines.length > 0 ? (
+                    <div className="w-full">
+                        <Table>
+                            <TableHeader>
+                                {table.getHeaderGroups().map(headerGroup => (
+                                    <TableRow key={headerGroup.id}>
+                                        {headerGroup.headers.map(header => {
+                                            return (
+                                                <TableHead key={header.id}>
+                                                    {header.isPlaceholder
+                                                        ? null
+                                                        : flexRender(
+                                                              header.column.columnDef.header,
+                                                              header.getContext(),
+                                                          )}
+                                                </TableHead>
+                                            );
+                                        })}
+                                    </TableRow>
+                                ))}
+                            </TableHeader>
+                            <TableBody>
+                                {table.getRowModel().rows.map(row => (
+                                    <TableRow key={row.id}>
+                                        {row.getVisibleCells().map(cell => (
+                                            <TableCell key={cell.id}>
+                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))}
+                                <TableRow>
+                                    <TableCell colSpan={columns.length} className="h-12">
+                                        <div className="my-4 flex justify-center">
+                                            <div className="max-w-lg">
+                                                <ProductVariantSelector onProductVariantSelect={addProduct} />
+                                            </div>
+                                        </div>
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={columns.length - 1}
+                                        className="text-right font-medium"
+                                    >
+                                        <Trans>Subtotal</Trans>
+                                    </TableCell>
+                                    <TableCell className="font-medium">
+                                        {formatCurrency(subTotal, currencyCode)}
+                                    </TableCell>
+                                </TableRow>
+                            </TableBody>
+                        </Table>
+                    </div>
+                ) : (
+                    <div className="space-y-4">
+                        <div className="text-center py-8 text-muted-foreground">
+                            <Trans>Add products to create a test order</Trans>
+                        </div>
+                        <div className="flex justify-center">
+                            <div className="max-w-lg">
+                                <ProductVariantSelector onProductVariantSelect={addProduct} />
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </AccordionContent>
+        </AccordionItem>
+    );
+}

package/src/app/routes/_authenticated/_shipping-methods/components/test-shipping-methods-result.tsx

@@ -0,0 +1,97 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { Check } from 'lucide-react';
+import { MetadataBadges } from './metadata-badges.js';
+import { PriceDisplay } from './price-display.js';
+import { ShippingMethodTestResultWrapper } from './shipping-method-test-result-wrapper.js';
+
+export interface ShippingMethodQuote {
+    id: string;
+    name: string;
+    code: string;
+    description: string;
+    price: number;
+    priceWithTax: number;
+    metadata?: Record<string, any>;
+}
+
+interface ShippingEligibilityTestResultProps {
+    testResult?: ShippingMethodQuote[];
+    okToRun: boolean;
+    testDataUpdated: boolean;
+    hasTestedOnce: boolean;
+    onRunTest: () => void;
+    loading?: boolean;
+}
+
+export function TestShippingMethodsResult({
+    testResult,
+    okToRun,
+    testDataUpdated,
+    hasTestedOnce,
+    onRunTest,
+    loading = false,
+}: Readonly<ShippingEligibilityTestResultProps>) {
+    const { activeChannel } = useChannel();
+    const currencyCode = activeChannel?.defaultCurrencyCode ?? 'USD';
+    const hasResults = testResult && testResult.length > 0;
+    const showEmptyState = testResult && testResult.length === 0 && !loading && !testDataUpdated;
+
+    return (
+        <ShippingMethodTestResultWrapper
+            okToRun={okToRun}
+            testDataUpdated={testDataUpdated}
+            hasTestedOnce={hasTestedOnce}
+            onRunTest={onRunTest}
+            loading={loading}
+            showEmptyState={showEmptyState}
+            emptyState={
+                <div className="text-center py-8">
+                    <p className="text-muted-foreground">
+                        <Trans>No eligible shipping methods found for this order.</Trans>
+                    </p>
+                </div>
+            }
+            loadingLabel={<Trans>Testing shipping methods...</Trans>}
+        >
+            {hasResults && (
+                <div className="space-y-3">
+                    <div className="flex items-center gap-2 mb-4">
+                        <span className="text-sm font-medium">
+                            <Trans>
+                                Found {testResult.length} eligible shipping method
+                                {testResult.length !== 1 ? 's' : ''}
+                            </Trans>
+                        </span>
+                    </div>
+                    {testResult.map(method => (
+                        <div
+                            key={method.id}
+                            className="flex items-center text-sm justify-between p-3 rounded-lg bg-muted/50"
+                        >
+                            <div className="flex-1">
+                                <div className="flex gap-1">
+                                    <Check className="h-5 w-5 text-success" />
+                                    <div className="">{method.name}</div>
+                                </div>
+                                <Badge variant="secondary">{method.code}</Badge>
+                                {method.description && (
+                                    <div className="text-sm text-muted-foreground mt-1">
+                                        {method.description}
+                                    </div>
+                                )}
+                                <MetadataBadges metadata={method.metadata} />
+                            </div>
+                            <PriceDisplay
+                                price={method.price}
+                                priceWithTax={method.priceWithTax}
+                                currencyCode={currencyCode}
+                            />
+                        </div>
+                    ))}
+                </div>
+            )}
+        </ShippingMethodTestResultWrapper>
+    );
+}