@vendure/dashboard 3.4.2-master-202508290230 → 3.4.2-master-202509030226

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

@@ -1,5 +1,4 @@
 import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
-import { Button } from '@/vdb/components/ui/button.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';
@@ -9,11 +8,10 @@ import { graphql } from '@/vdb/graphql/graphql.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQuery } from '@tanstack/react-query';
-import { Plus, Trash2 } from 'lucide-react';
-import { useEffect, useMemo } from 'react';
-import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
+import { useEffect, useMemo, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { OptionValueInput } from './option-value-input.js';
+import { OptionGroupConfiguration, optionGroupSchema, OptionGroupsEditor } from './option-groups-editor.js';
 
 const getStockLocationsDocument = graphql(`
     query GetStockLocations($options: StockLocationListOptions) {
@@ -27,17 +25,6 @@ const getStockLocationsDocument = graphql(`
     }
 `);
 
-// 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;
@@ -88,9 +75,7 @@ const formSchema = z.object({
     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;
@@ -107,80 +92,52 @@ export function CreateProductVariants({
     });
     const stockLocations = stockLocationsResult?.stockLocations.items ?? [];
 
-    const form = useForm<FormValues>({
-        resolver: zodResolver(formSchema),
+    const [optionGroups, setOptionGroups] = useState<OptionGroupConfiguration['optionGroups']>([]);
+
+    const form = useForm<{ variants: Record<string, VariantForm> }>({
+        resolver: zodResolver(z.object({ variants: z.record(variantSchema) })),
         defaultValues: {
-            optionGroups: [],
             variants: {},
         },
         mode: 'onChange',
     });
 
-    const { control, watch, setValue } = form;
-    const {
-        fields: optionGroups,
-        append: appendOptionGroup,
-        remove: removeOptionGroup,
-    } = useFieldArray({
-        control,
-        name: 'optionGroups',
-    });
+    const { setValue } = form;
 
-    const watchedOptionGroups = watch('optionGroups');
     // memoize the variants
-    const variants = useMemo(
-        () => generateVariants(watchedOptionGroups),
-        [JSON.stringify(watchedOptionGroups)],
-    );
+    const variants = useMemo(() => generateVariants(optionGroups), [JSON.stringify(optionGroups)]);
 
     // 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 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 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 });
-            }
+            const filteredData: VariantConfiguration = {
+                optionGroups,
+                variants: activeVariants,
+            };
+
+            onChange?.({ data: filteredData });
         });
 
         return () => subscription.unsubscribe();
-    }, [form, onChange, variants]);
+    }, [form, onChange, variants, optionGroups]);
 
     // Initialize variant form values when variants change
     useEffect(() => {
@@ -202,64 +159,11 @@ export function CreateProductVariants({
         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>
+            <div className="mb-6">
+                <OptionGroupsEditor onChange={data => setOptionGroups(data.optionGroups)} />
+            </div>
 
             {stockLocations.length === 0 ? (
                 <Alert variant="destructive">
@@ -405,7 +309,7 @@ export function CreateProductVariants({
 }
 
 // Generate all possible combinations of option values
-function generateVariants(groups: OptionGroupForm[]): GeneratedVariant[] {
+function generateVariants(groups: OptionGroupConfiguration['optionGroups']): GeneratedVariant[] {
     // If there are no groups, return a single variant with no options
     if (!groups.length)
         return [
@@ -427,7 +331,7 @@ function generateVariants(groups: OptionGroupForm[]): GeneratedVariant[] {
 
     // Generate combinations
     const generateCombinations = (
-        optionGroups: OptionGroupForm[],
+        optionGroups: OptionGroupConfiguration['optionGroups'],
         currentIndex: number,
         currentCombination: VariantOption[],
     ): GeneratedVariant[] => {

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 '@/vdb/lib/trans.js';
+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

@@ -1,53 +1,32 @@
 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 { Plus, X } from 'lucide-react';
+import { X } from 'lucide-react';
 import { useState } from 'react';
-import { useFieldArray, useFormContext } from 'react-hook-form';
 
 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;
+    fields: Array<OptionValue>;
+    onAdd: (value: OptionValue) => void;
+    onRemove: (index: number) => void;
     disabled?: boolean;
 }
 
 export function OptionValueInput({
-    groupName,
-    groupIndex,
+    fields,
+    onAdd,
+    onRemove,
     disabled = false,
 }: Readonly<OptionValueInputProps>) {
-    const { control } = 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: Date.now().toString() });
+            onAdd({ value: newValue.trim(), id: Date.now().toString() });
             setNewValue('');
         }
     };
@@ -70,15 +49,6 @@ export function OptionValueInput({
                     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">
@@ -90,7 +60,7 @@ export function OptionValueInput({
                             variant="ghost"
                             size="sm"
                             className="h-4 w-4 p-0 ml-1"
-                            onClick={() => remove(index)}
+                            onClick={() => onRemove(index)}
                         >
                             <X className="h-3 w-3" />
                         </Button>

package/src/app/routes/_authenticated/_products/components/product-bulk-actions.tsx

@@ -55,7 +55,7 @@ export const AssignProductsToChannelBulkAction: BulkActionComponent<any> = ({ se
 };
 
 export const RemoveProductsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { selectedChannel } = useChannel();
+    const { activeChannel } = useChannel();
 
     return (
         <RemoveFromChannelBulkAction
@@ -66,7 +66,7 @@ export const RemoveProductsFromChannelBulkAction: BulkActionComponent<any> = ({
             requiredPermissions={['UpdateCatalog', 'UpdateProduct']}
             buildInput={() => ({
                 productIds: selection.map(s => s.id),
-                channelId: selectedChannel?.id,
+                channelId: activeChannel?.id,
             })}
         />
     );

package/src/app/routes/_authenticated/_products/products.graphql.ts

@@ -95,6 +95,46 @@ export const productDetailDocument = graphql(
     [productDetailFragment],
 );
 
+export const productDetailWithVariantsDocument = graphql(
+    `
+        query ProductDetailWithVariants($id: ID!) {
+            product(id: $id) {
+                ...ProductDetail
+                variantList {
+                    totalItems
+                }
+                optionGroups {
+                    id
+                    code
+                    name
+                    options {
+                        id
+                        code
+                        name
+                    }
+                }
+                variants {
+                    id
+                    name
+                    sku
+                    price
+                    currencyCode
+                    priceWithTax
+                    createdAt
+                    updatedAt
+                    options {
+                        id
+                        code
+                        name
+                        groupId
+                    }
+                }
+            }
+        }
+    `,
+    [productDetailFragment],
+);
+
 export const createProductDocument = graphql(`
     mutation CreateProduct($input: CreateProductInput!) {
         createProduct(input: $input) {
@@ -187,3 +227,99 @@ export const getProductsWithFacetValuesByIdsDocument = graphql(`
         }
     }
 `);
+
+export const addOptionGroupToProductDocument = graphql(`
+    mutation AddOptionGroupToProduct($productId: ID!, $optionGroupId: ID!) {
+        addOptionGroupToProduct(productId: $productId, optionGroupId: $optionGroupId) {
+            id
+            optionGroups {
+                id
+                code
+                name
+                options {
+                    id
+                    code
+                    name
+                }
+            }
+        }
+    }
+`);
+
+export const updateProductVariantDocument = graphql(`
+    mutation UpdateProductVariant($input: UpdateProductVariantInput!) {
+        updateProductVariant(input: $input) {
+            id
+            name
+            options {
+                id
+                code
+                name
+                groupId
+            }
+        }
+    }
+`);
+
+export const deleteProductVariantDocument = graphql(`
+    mutation DeleteProductVariant($id: ID!) {
+        deleteProductVariant(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+export const removeOptionGroupFromProductDocument = graphql(`
+    mutation RemoveOptionGroupFromProduct($productId: ID!, $optionGroupId: ID!) {
+        removeOptionGroupFromProduct(productId: $productId, optionGroupId: $optionGroupId) {
+            ... on Product {
+                id
+                optionGroups {
+                    id
+                    code
+                    name
+                }
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+        }
+    }
+`);
+
+export const createProductOptionGroupDocument = graphql(`
+    mutation CreateOptionGroups($input: CreateProductOptionGroupInput!) {
+        createProductOptionGroup(input: $input) {
+            id
+            name
+            code
+            options {
+                id
+                code
+                name
+            }
+        }
+    }
+`);
+
+export const createProductOptionDocument = graphql(`
+    mutation CreateProductOption($input: CreateProductOptionInput!) {
+        createProductOption(input: $input) {
+            id
+            code
+            name
+            groupId
+        }
+    }
+`);
+
+export const createProductVariantsDocument = graphql(`
+    mutation CreateProductVariants($input: [CreateProductVariantInput!]!) {
+        createProductVariants(input: $input) {
+            id
+            name
+        }
+    }
+`);