@wilshop/dashboard 3.5.2

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

@@ -0,0 +1,370 @@
+import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@lingui/react/macro';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { OptionGroupConfiguration, optionGroupSchema, OptionGroupsEditor } from './option-groups-editor.js';
+import { MoneyInput } from '@/vdb/components/data-input/index.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+
+const getStockLocationsDocument = graphql(`
+    query GetStockLocations($options: StockLocationListOptions) {
+        stockLocations(options: $options) {
+            items {
+                id
+                name
+            }
+            totalItems
+        }
+    }
+`);
+
+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 VariantForm = z.infer<typeof variantSchema>;
+
+interface CreateProductVariantsProps {
+    currencyCode?: string;
+    onChange?: ({ data }: { data: VariantConfiguration }) => void;
+}
+
+export function CreateProductVariants({
+                                          currencyCode = 'USD',
+                                          onChange,
+                                      }: Readonly<CreateProductVariantsProps>) {
+    const { data: stockLocationsResult } = useQuery({
+        queryKey: ['stockLocations'],
+        queryFn: () => api.query(getStockLocationsDocument, { options: { take: 100 } }),
+    });
+    const { activeChannel } = useChannel();
+    const stockLocations = stockLocationsResult?.stockLocations.items ?? [];
+
+    const [optionGroups, setOptionGroups] = useState<OptionGroupConfiguration['optionGroups']>([]);
+
+    const form = useForm<{ variants: Record<string, VariantForm> }>({
+        resolver: zodResolver(z.object({ variants: z.record(variantSchema) })),
+        defaultValues: {
+            variants: {},
+        },
+        mode: 'onChange',
+    });
+
+    const { setValue } = form;
+
+    // memoize the variants
+    const variants = useMemo(() => generateVariants(optionGroups), [JSON.stringify(optionGroups)]);
+
+    // Use the handleSubmit approach for the entire form
+    useEffect(() => {
+        const subscription = form.watch(value => {
+            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 filteredData: VariantConfiguration = {
+                optionGroups,
+                variants: activeVariants,
+            };
+
+            onChange?.({ data: filteredData });
+        });
+
+        return () => subscription.unsubscribe();
+    }, [form, onChange, variants, optionGroups]);
+
+    // 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]);
+
+    return (
+        <FormProvider {...form}>
+            <div className="mb-6">
+                <OptionGroupsEditor onChange={data => setOptionGroups(data.optionGroups)} />
+            </div>
+
+            {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
+                                                                    defaultChecked={true}
+                                                                    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>
+                                                                <MoneyInput
+                                                                    {...field}
+                                                                    value={Number(field.value) || 0}
+                                                                    onChange={value => field.onChange(value.toString())}
+                                                                    currency={activeChannel?.defaultCurrencyCode}
+                                                                />
+                                                        </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: OptionGroupConfiguration['optionGroups']): 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: OptionGroupConfiguration['optionGroups'],
+        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-groups-editor.tsx

@@ -0,0 +1,180 @@
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Trans } from '@lingui/react/macro';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Plus, Trash2 } from 'lucide-react';
+import { useEffect } from 'react';
+import { Control, useFieldArray, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { OptionValueInput } from './option-value-input.js';
+
+export const optionValueSchema = z.object({
+    value: z.string().min(1, { message: 'Value cannot be empty' }),
+    id: z.string().min(1, { message: 'Value cannot be empty' }),
+});
+
+export 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' }),
+});
+
+const multiGroupFormSchema = z.object({
+    optionGroups: z.array(optionGroupSchema),
+});
+
+export type OptionGroup = z.infer<typeof optionGroupSchema>;
+export type MultiGroupForm = z.infer<typeof multiGroupFormSchema>;
+
+export interface SingleOptionGroup {
+    name: string;
+    values: Array<{
+        value: string;
+        id: string;
+    }>;
+}
+
+export interface OptionGroupConfiguration {
+    optionGroups: SingleOptionGroup[];
+}
+
+function validateOptionGroup(group: any): SingleOptionGroup | null {
+    if (!group || typeof group.name !== 'string' || !Array.isArray(group.values)) {
+        return null;
+    }
+
+    const validValues = group.values
+        .filter((v: any): v is NonNullable<typeof v> => !!v)
+        .filter((v: any) => typeof v.value === 'string' && typeof v.id === 'string')
+        .map((v: any) => ({
+            value: v.value,
+            id: v.id,
+        }));
+
+    return validValues.length > 0 ? { name: group.name, values: validValues } : null;
+}
+
+interface SingleOptionGroupEditorProps {
+    control: Control<any>;
+    fieldArrayPath: string;
+    disabled?: boolean;
+}
+
+export function SingleOptionGroupEditor({
+    control,
+    fieldArrayPath,
+    disabled,
+}: Readonly<SingleOptionGroupEditorProps>) {
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: [fieldArrayPath, 'values'].join('.'),
+    });
+
+    return (
+        <div className="space-y-4">
+            <div className="grid grid-cols-[1fr_2fr] gap-4 items-start">
+                <div>
+                    <FormFieldWrapper
+                        control={control}
+                        name={[fieldArrayPath, 'name'].join('.')}
+                        label={<Trans>Option Group Name</Trans>}
+                        render={({ field }) => <Input placeholder="e.g. Size" {...field} />}
+                    />
+                </div>
+
+                <div>
+                    <FormFieldWrapper
+                        control={control}
+                        name="values"
+                        label={<Trans>Option Values</Trans>}
+                        render={({ field }) => (
+                            <OptionValueInput
+                                fields={fields as any}
+                                onAdd={append}
+                                onRemove={remove}
+                                disabled={disabled}
+                            />
+                        )}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// Multi Option Groups Editor - for use in create product variants
+interface OptionGroupsEditorProps {
+    onChange?: (data: OptionGroupConfiguration) => void;
+    initialGroups?: OptionGroupConfiguration['optionGroups'];
+}
+
+export function OptionGroupsEditor({ onChange, initialGroups = [] }: Readonly<OptionGroupsEditorProps>) {
+    const form = useForm<MultiGroupForm>({
+        resolver: zodResolver(multiGroupFormSchema),
+        defaultValues: {
+            optionGroups: initialGroups.length > 0 ? initialGroups : [],
+        },
+        mode: 'onChange',
+    });
+
+    const { control } = form;
+    const {
+        fields: optionGroups,
+        append: appendOptionGroup,
+        remove: removeOptionGroup,
+    } = useFieldArray({
+        control,
+        name: 'optionGroups',
+    });
+
+    // Watch for changes and notify parent
+    useEffect(() => {
+        const subscription = form.watch(value => {
+            if (value?.optionGroups) {
+                const validOptionGroups = value.optionGroups
+                    .map(validateOptionGroup)
+                    .filter((group): group is SingleOptionGroup => group !== null);
+
+                const filteredData: OptionGroupConfiguration = {
+                    optionGroups: validOptionGroups,
+                };
+
+                onChange?.(filteredData);
+            }
+        });
+
+        return () => subscription.unsubscribe();
+    }, [form, onChange]);
+
+    const handleAddOptionGroup = () => {
+        appendOptionGroup({ name: '', values: [] });
+    };
+
+    return (
+        <Form {...form}>
+            <div className="space-y-4">
+                {optionGroups.map((group, index) => (
+                    <div key={group.id} className="flex items-start">
+                        <SingleOptionGroupEditor control={control} fieldArrayPath={`optionGroups.${index}`} />
+                        <div className="shrink-0 mt-6">
+                            <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}>
+                    <Plus className="mr-2 h-4 w-4" />
+                    <Trans>Add Option</Trans>
+                </Button>
+            </div>
+        </Form>
+    );
+}

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

@@ -0,0 +1,72 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { X } from 'lucide-react';
+import { useState } from 'react';
+
+interface OptionValue {
+    value: string;
+    id: string;
+}
+
+interface OptionValueInputProps {
+    fields: Array<OptionValue>;
+    onAdd: (value: OptionValue) => void;
+    onRemove: (index: number) => void;
+    disabled?: boolean;
+}
+
+export function OptionValueInput({
+    fields,
+    onAdd,
+    onRemove,
+    disabled = false,
+}: Readonly<OptionValueInputProps>) {
+    const [newValue, setNewValue] = useState('');
+
+    const handleAddValue = () => {
+        if (newValue.trim() && !fields.some(f => f.value === newValue.trim())) {
+            onAdd({ value: newValue.trim(), id: Date.now().toString() });
+            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"
+                />
+            </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={() => onRemove(index)}
+                        >
+                            <X className="h-3 w-3" />
+                        </Button>
+                    </Badge>
+                ))}
+            </div>
+        </div>
+    );
+}