@vendure/dashboard 3.2.0

package/src/app/routes/_authenticated/_products/components/create-product-variants.tsx

@@ -0,0 +1,462 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@/lib/trans.js';
+import { Plus, Trash2 } from 'lucide-react';
+import { useEffect, useMemo } from 'react';
+import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useQuery } from '@tanstack/react-query';
+import { Alert, AlertDescription } from '@/components/ui/alert.js';
+import { Button } from '@/components/ui/button.js';
+import { Card } from '@/components/ui/card.js';
+import { Checkbox } from '@/components/ui/checkbox.js';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
+import { graphql } from '@/graphql/graphql.js';
+import { api } from '@/graphql/api.js';
+import { OptionValueInput } from './option-value-input.js';
+
+const getStockLocationsDocument = graphql(`
+    query GetStockLocations($options: StockLocationListOptions) {
+        stockLocations(options: $options) {
+            items {
+                id
+                name
+            }
+            totalItems
+        }
+    }
+`);
+
+// Define schemas for validation
+const optionValueSchema = z.object({
+    value: z.string().min(1, { message: 'Value cannot be empty' }),
+    id: z.string().min(1, { message: 'Value cannot be empty' }),
+});
+
+const optionGroupSchema = z.object({
+    name: z.string().min(1, { message: 'Option name is required' }),
+    values: z.array(optionValueSchema).min(1, { message: 'At least one value is required' }),
+});
+
+
+type VariantOption = {
+    name: string;
+    value: string;
+    id: string;
+};
+
+type GeneratedVariant = {
+    id: string;
+    name: string;
+    values: string[];
+    options: VariantOption[];
+    enabled: boolean;
+    sku: string;
+    price: string;
+    stock: string;
+};
+
+export interface VariantConfiguration {
+    optionGroups: Array<{
+        name: string;
+        values: Array<{
+            value: string;
+            id: string;
+        }>;
+    }>;
+    variants: Array<{
+        enabled: boolean;
+        sku: string;
+        price: string;
+        stock: string;
+        options: VariantOption[];
+    }>;
+}
+
+const variantSchema = z.object({
+    enabled: z.boolean().default(true),
+    sku: z.string().min(1, { message: 'SKU is required' }),
+    price: z.string().refine(val => !isNaN(Number(val)) && Number(val) >= 0, {
+        message: 'Price must be a positive number',
+    }),
+    stock: z.string().refine(val => !isNaN(Number(val)) && parseInt(val, 10) >= 0, {
+        message: 'Stock must be a non-negative integer',
+    }),
+});
+
+const formSchema = z.object({
+    optionGroups: z.array(optionGroupSchema),
+    variants: z.record(variantSchema),
+});
+
+type OptionGroupForm = z.infer<typeof optionGroupSchema>;
+type VariantForm = z.infer<typeof variantSchema>;
+type FormValues = z.infer<typeof formSchema>;
+
+interface CreateProductVariantsProps {
+    currencyCode?: string;
+    onChange?: ({ data }: { data: VariantConfiguration }) => void;
+}
+
+export function CreateProductVariants({ currencyCode = 'USD', onChange }: CreateProductVariantsProps) {
+    const { data: stockLocationsResult } = useQuery({
+        queryKey: ['stockLocations'],
+        queryFn: () => api.query(getStockLocationsDocument, { options: { take: 100 } }),
+    });
+    const stockLocations = stockLocationsResult?.stockLocations.items ?? [];
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            optionGroups: [],
+            variants: {},
+        },
+        mode: 'onChange',
+    });
+
+    const { control, watch, setValue } = form;
+    const {
+        fields: optionGroups,
+        append: appendOptionGroup,
+        remove: removeOptionGroup,
+    } = useFieldArray({
+        control,
+        name: 'optionGroups',
+    });
+
+    const watchedOptionGroups = watch('optionGroups');
+    // memoize the variants
+    const variants = useMemo(() => generateVariants(watchedOptionGroups), [JSON.stringify(watchedOptionGroups)]);
+
+    // Use the handleSubmit approach for the entire form
+    useEffect(() => {
+        const subscription = form.watch((value, { name, type }) => {
+            if (value?.optionGroups) {
+                const formVariants = value.variants || {};
+                const activeVariants: VariantConfiguration['variants'] = [];
+
+                variants.forEach(variant => {
+                    if (variant && typeof variant === 'object') {
+                        const formVariant = formVariants[variant.id];
+                        if (formVariant) {
+                            activeVariants.push({
+                                enabled: formVariant.enabled ?? true,
+                                sku: formVariant.sku ?? '',
+                                price: formVariant.price ?? '',
+                                stock: formVariant.stock ?? '',
+                                options: variant.options,
+                            });
+                        }
+                    }
+                });
+
+                const validOptionGroups = value.optionGroups
+                    .filter((group): group is NonNullable<typeof group> => !!group)
+                    .filter(group => typeof group.name === 'string' && Array.isArray(group.values))
+                    .map(group => ({
+                        name: group.name,
+                        values: (group.values || [])
+                            .filter((v): v is NonNullable<typeof v> => !!v)
+                            .filter(v => typeof v.value === 'string' && typeof v.id === 'string')
+                            .map(v => ({
+                                value: v.value,
+                                id: v.id,
+                            })),
+                    }))
+                    .filter(group => group.values.length > 0) as VariantConfiguration['optionGroups'];
+
+                const filteredData: VariantConfiguration = {
+                    optionGroups: validOptionGroups,
+                    variants: activeVariants,
+                };
+
+                onChange?.({ data: filteredData });
+            }
+        });
+
+        return () => subscription.unsubscribe();
+    }, [form, onChange, variants]);
+
+    // Initialize variant form values when variants change
+    useEffect(() => {
+        // Initialize any new variants with default values
+        const currentVariants = form.getValues().variants || {};
+        const updatedVariants = { ...currentVariants };
+
+        variants.forEach(variant => {
+            if (!updatedVariants[variant.id]) {
+                updatedVariants[variant.id] = {
+                    enabled: true,
+                    sku: '',
+                    price: '',
+                    stock: '',
+                };
+            }
+        });
+
+        setValue('variants', updatedVariants);
+    }, [variants, form, setValue]);
+
+    const handleAddOptionGroup = () => {
+        appendOptionGroup({ name: '', values: [] });
+    };
+
+    return (
+        <FormProvider {...form}>
+            {optionGroups.map((group, index) => (
+                <div key={group.id} className="grid grid-cols-[1fr_2fr_auto] gap-4 mb-6 items-start">
+                    <div>
+                        <FormField
+                            control={form.control}
+                            name={`optionGroups.${index}.name`}
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>
+                                        <Trans>Option</Trans>
+                                    </FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="e.g. Size" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                    </div>
+
+                    <div>
+                        <FormItem>
+                            <FormLabel>
+                                <Trans>Option Values</Trans>
+                            </FormLabel>
+                            <FormControl>
+                                <OptionValueInput
+                                    groupName={watch(`optionGroups.${index}.name`) || ''}
+                                    groupIndex={index}
+                                    disabled={!watch(`optionGroups.${index}.name`)}
+                                />
+                            </FormControl>
+                        </FormItem>
+                    </div>
+
+                    <div className="pt-8">
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => removeOptionGroup(index)}
+                            title="Remove Option"
+                        >
+                            <Trash2 className="h-4 w-4" />
+                        </Button>
+                    </div>
+                </div>
+            ))}
+
+            <Button type="button" variant="secondary" onClick={handleAddOptionGroup} className="mb-6">
+                <Plus className="mr-2 h-4 w-4" />
+                <Trans>Add Option</Trans>
+            </Button>
+
+            {stockLocations.length === 0 ? (
+                <Alert variant="destructive">
+                    <AlertDescription>
+                        <Trans>No stock locations available on current channel</Trans>
+                    </AlertDescription>
+                </Alert>
+            ) : (
+                <>
+                    {stockLocations.length > 1 && (
+                        <div className="mb-4">
+                            <FormLabel>
+                                <Trans>Add Stock to Location</Trans>
+                            </FormLabel>
+                            <select className="w-full rounded-md border border-input bg-background px-3 py-2">
+                                {stockLocations.map(location => (
+                                    <option key={location.id} value={location.id}>
+                                        {location.name}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                    )}
+
+                    {variants.length > 0 && (
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    {variants.length > 1 && (
+                                        <TableHead>
+                                            <Trans>Create</Trans>
+                                        </TableHead>
+                                    )}
+                                    {variants.length > 1 && (
+                                        <TableHead>
+                                            <Trans>Variant</Trans>
+                                        </TableHead>
+                                    )}
+                                    <TableHead>
+                                        <Trans>SKU</Trans>
+                                    </TableHead>
+                                    <TableHead>
+                                        <Trans>Price</Trans>
+                                    </TableHead>
+                                    <TableHead>
+                                        <Trans>Stock on Hand</Trans>
+                                    </TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {variants.map(variant => (
+                                    <TableRow key={variant.id}>
+                                        {variants.length > 1 && (
+                                            <TableCell>
+                                                <FormField
+                                                    control={form.control}
+                                                    name={`variants.${variant.id}.enabled`}
+                                                    render={({ field }) => (
+                                                        <FormItem className="flex items-center space-x-2">
+                                                            <FormControl>
+                                                                <Checkbox
+                                                                    checked={field.value}
+                                                                    onCheckedChange={field.onChange}
+                                                                />
+                                                            </FormControl>
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </TableCell>
+                                        )}
+
+                                        {variants.length > 1 && (
+                                            <TableCell>{variant.values.join(' ')}</TableCell>
+                                        )}
+
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name={`variants.${variant.id}.sku`}
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input {...field} placeholder="SKU" />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name={`variants.${variant.id}.price`}
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <div className="relative">
+                                                                <span className="absolute left-3 top-2.5">
+                                                                    {currencyCode}
+                                                                </span>
+                                                                <Input
+                                                                    {...field}
+                                                                    className="pl-12"
+                                                                    placeholder="0.00"
+                                                                />
+                                                            </div>
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name={`variants.${variant.id}.stock`}
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                type="number"
+                                                                min="0"
+                                                                step="1"
+                                                            />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    )}
+                </>
+            )}
+        </FormProvider>
+    );
+}
+
+// Generate all possible combinations of option values
+function generateVariants(groups: OptionGroupForm[]): GeneratedVariant[] {
+    // If there are no groups, return a single variant with no options
+    if (!groups.length)
+        return [
+            {
+                id: 'default',
+                name: '',
+                values: [],
+                options: [],
+                enabled: true,
+                sku: '',
+                price: '',
+                stock: '',
+            },
+        ];
+
+    // Make sure all groups have at least one value
+    const validGroups = groups.filter(group => group.name && group.values && group.values.length > 0);
+    if (!validGroups.length) return [];
+
+    // Generate combinations
+    const generateCombinations = (
+        optionGroups: OptionGroupForm[],
+        currentIndex: number,
+        currentCombination: VariantOption[],
+    ): GeneratedVariant[] => {
+        if (currentIndex === optionGroups.length) {
+            return [
+                {
+                    id: currentCombination.map(c => c.id).join('-'),
+                    name: currentCombination.map(c => c.value).join(' '),
+                    values: currentCombination.map(c => c.value),
+                    options: currentCombination,
+                    enabled: true,
+                    sku: '',
+                    price: '',
+                    stock: '',
+                },
+            ];
+        }
+
+        const currentGroup = optionGroups[currentIndex];
+        const results: GeneratedVariant[] = [];
+
+        currentGroup.values.forEach(optionValue => {
+            const newCombination = [
+                ...currentCombination,
+                { name: currentGroup.name, value: optionValue.value, id: optionValue.id },
+            ];
+
+            const subResults = generateCombinations(optionGroups, currentIndex + 1, newCombination);
+            results.push(...subResults);
+        });
+
+        return results;
+    };
+
+    return generateCombinations(validGroups, 0, []);
+}

package/src/app/routes/_authenticated/_products/components/option-value-input.tsx

@@ -0,0 +1,96 @@
+import { useFieldArray } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
+import { useState } from "react";
+import { Input } from "@/components/ui/input.js";
+import { Button } from "@/components/ui/button.js";
+import { Badge } from "@/components/ui/badge.js";
+import { Plus, X } from "lucide-react";
+
+interface OptionValue {
+    value: string;
+    id: string;
+}
+
+interface FormValues {
+    optionGroups: {
+        name: string;
+        values: OptionValue[];
+    }[];
+    variants: Record<string, {
+        enabled: boolean;
+        sku: string;
+        price: string;
+        stock: string;
+    }>;
+}
+
+interface OptionValueInputProps {
+    groupName: string;
+    groupIndex: number;
+    disabled?: boolean;
+}
+
+export function OptionValueInput({ groupName, groupIndex, disabled = false }: OptionValueInputProps) {
+    const { control, watch } = useFormContext<FormValues>();
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: `optionGroups.${groupIndex}.values`,
+    });
+
+    const [newValue, setNewValue] = useState('');
+
+    const handleAddValue = () => {
+        if (newValue.trim() && !fields.some(f => f.value === newValue.trim())) {
+            append({ value: newValue.trim(), id: crypto.randomUUID() });
+            setNewValue('');
+        }
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleAddValue();
+        }
+    };
+
+    return (
+        <div className="space-y-2">
+            <div className="flex items-center gap-2">
+                <Input
+                    value={newValue}
+                    onChange={e => setNewValue(e.target.value)}
+                    onKeyDown={handleKeyPress}
+                    placeholder="Enter value and press Enter"
+                    disabled={disabled}
+                    className="flex-1"
+                />
+                <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={handleAddValue}
+                    disabled={disabled || !newValue.trim()}
+                >
+                    <Plus className="h-4 w-4" />
+                </Button>
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+                {fields.map((field, index) => (
+                    <Badge key={field.id} variant="secondary" className="flex items-center gap-1 py-1 px-2">
+                        {field.value}
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-4 w-4 p-0 ml-1"
+                            onClick={() => remove(index)}
+                        >
+                            <X className="h-3 w-3" />
+                        </Button>
+                    </Badge>
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_products/components/product-variants-table.tsx

@@ -0,0 +1,87 @@
+import { PaginatedListDataTable } from "@/components/shared/paginated-list-data-table.js";
+import { productVariantListDocument } from "../products.graphql.js";
+import { useState } from "react";
+import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
+import { Money } from "@/components/data-display/money.js";
+import { useLocalFormat } from "@/hooks/use-local-format.js";
+import { Link } from "@tanstack/react-router";
+import { Button } from "@/components/ui/button.js";
+
+interface ProductVariantsTableProps {
+    productId: string;
+}
+
+export function ProductVariantsTable({ productId }: ProductVariantsTableProps) {
+    const { formatCurrencyName } = useLocalFormat();
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+
+    return <PaginatedListDataTable
+        listQuery={productVariantListDocument}
+        transformVariables={variables => ({
+            ...variables,
+            productId,
+        })}
+        defaultVisibility={{
+            id: false,
+            currencyCode: false,
+        }}
+        customizeColumns={{
+            name: {
+                header: 'Variant name',
+                cell: ({ row }) => {
+                    const variant = row.original as any;
+                    return (
+                        <Button asChild variant="ghost">
+                            <Link to={`../../product-variants/${variant.id}`}>{variant.name} </Link>
+                        </Button>
+                    );
+                },
+            },
+            currencyCode: {
+                cell: ({ cell, row }) => {
+                    const value = cell.getValue();
+                    return formatCurrencyName(value as string, 'full');
+                },
+            },
+            price: {
+                cell: ({ cell, row }) => {
+                    const variant = row.original as any;
+                    const value = cell.getValue();
+                    const currencyCode = variant.currencyCode;
+                    if (typeof value === 'number') {
+                        return <Money value={value} currency={currencyCode} />;
+                    }
+                    return value;
+                },
+            },
+            priceWithTax: {
+                cell: ({ cell, row }) => {
+                    const variant = row.original as any;
+                    const value = cell.getValue();
+                    const currencyCode = variant.currencyCode;
+                    if (typeof value === 'number') {
+                        return <Money value={value} currency={currencyCode} />;
+                    }
+                    return value;
+                },
+            },
+        }}
+        page={page}
+        itemsPerPage={pageSize}
+        sorting={sorting}
+        columnFilters={filters}
+        onPageChange={(_, page, perPage) => {
+            setPage(page);
+            setPageSize(perPage);
+        }}
+        onSortChange={(_, sorting) => {
+            setSorting(sorting);
+        }}
+        onFilterChange={(_, filters) => {
+            setFilters(filters);
+        }}
+    />;
+}