@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.1-master-202508011655

package/src/app/routes/_authenticated/_product-variants/product-variants_.$id.tsx

@@ -1,17 +1,17 @@
-import { MoneyInput } from '@/components/data-input/money-input.js';
-import { AssignedFacetValues } from '@/components/shared/assigned-facet-values.js';
-import { EntityAssets } from '@/components/shared/entity-assets.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { TaxCategorySelector } from '@/components/shared/tax-category-selector.js';
-import { TranslatableFormFieldWrapper } from '@/components/shared/translatable-form-field.js';
-import { Button } from '@/components/ui/button.js';
-import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { Switch } from '@/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
+import { AssignedFacetValues } from '@/vdb/components/shared/assigned-facet-values.js';
+import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TaxCategorySelector } from '@/vdb/components/shared/tax-category-selector.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } 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 { Switch } from '@/vdb/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -21,11 +21,11 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Fragment } from 'react/jsx-runtime';
 import { toast } from 'sonner';
@@ -36,12 +36,22 @@ import {
     updateProductVariantDocument,
 } from './product-variants.graphql.js';
 
+const pageId = 'product-variant-detail';
+
 export const Route = createFileRoute('/_authenticated/_product-variants/product-variants_/$id')({
     component: ProductVariantDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: productVariantDetailDocument,
-        breadcrumb(_isNew, entity) {
-            return [{ path: '/product-variants', label: 'Product variants' }, entity?.name];
+        breadcrumb(_isNew, entity, location) {
+            if ((location.search as any).from === 'product') {
+                return [
+                    { path: '/product', label: 'Products' },
+                    { path: `/products/${entity?.product.id}`, label: entity?.product.name ?? '' },
+                    entity?.name,
+                ];
+            }
+            return [{ path: '/product-variants', label: 'Product Variants' }, entity?.name];
         },
     }),
     errorComponent: ({ error }) => <ErrorPage message={error.message} />,
@@ -55,6 +65,7 @@ function ProductVariantDetailPage() {
     const { activeChannel } = useChannel();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: productVariantDetailDocument,
         createDocument: createProductVariantDocument,
         updateDocument: updateProductVariantDocument,
@@ -102,7 +113,7 @@ function ProductVariantDetailPage() {
     const [price, taxCategoryId] = form.watch(['price', 'taxCategoryId']);
 
     return (
-        <Page pageId="product-variant-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New product variant</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_products/components/add-product-variant-dialog.tsx

@@ -1,6 +1,6 @@
-import { MoneyInput } from '@/components/data-input/money-input.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { Button } from '@/components/ui/button.js';
+import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -8,13 +8,13 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { Form } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { api } from '@/graphql/api.js';
-import { graphql, ResultOf, VariablesOf } from '@/graphql/graphql.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql, ResultOf, VariablesOf } from '@/vdb/graphql/graphql.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';

package/src/app/routes/_authenticated/_products/components/assign-facet-values-dialog.tsx

@@ -0,0 +1,281 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { FacetValueChip } from '@/vdb/components/shared/facet-value-chip.js';
+import { FacetValue, FacetValueSelector } from '@/vdb/components/shared/facet-value-selector.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+
+import { getDetailQueryOptions } from '@/vdb/framework/page/use-detail-page.js';
+
+interface EntityWithFacetValues {
+    id: string;
+    name: string;
+    sku?: string;
+    facetValues: Array<{
+        id: string;
+        name: string;
+        code: string;
+        facet: {
+            id: string;
+            name: string;
+            code: string;
+        };
+    }>;
+}
+
+interface AssignFacetValuesDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    entityIds: string[];
+    entityType: 'products' | 'variants';
+    queryFn: (variables: any) => Promise<ResultOf<any>>;
+    mutationFn: (variables: any) => Promise<ResultOf<any>>;
+    detailDocument: any;
+    onSuccess?: () => void;
+}
+
+export function AssignFacetValuesDialog({
+    open,
+    onOpenChange,
+    entityIds,
+    entityType,
+    queryFn,
+    mutationFn,
+    detailDocument,
+    onSuccess,
+}: AssignFacetValuesDialogProps) {
+    const { i18n } = useLingui();
+    const [selectedValues, setSelectedValues] = useState<FacetValue[]>([]);
+    const [facetValuesRemoved, setFacetValuesRemoved] = useState(false);
+    const [removedFacetValues, setRemovedFacetValues] = useState<Set<string>>(new Set());
+    const queryClient = useQueryClient();
+
+    // Fetch existing facet values for the entities
+    const { data: entitiesData, isLoading } = useQuery({
+        queryKey: [`${entityType}WithFacetValues`, entityIds],
+        queryFn: () => queryFn({ ids: entityIds }),
+        enabled: open && entityIds.length > 0,
+    });
+
+    const { mutate, isPending } = useMutation({
+        mutationFn,
+        onSuccess: () => {
+            toast.success(i18n.t(`Successfully updated facet values for ${entityIds.length} ${entityType}`));
+            onSuccess?.();
+            onOpenChange(false);
+            // Reset state
+            setSelectedValues([]);
+            setFacetValuesRemoved(false);
+            setRemovedFacetValues(new Set());
+            entityIds.forEach(id => {
+                const { queryKey } = getDetailQueryOptions(detailDocument, { id });
+                queryClient.removeQueries({ queryKey });
+            });
+        },
+        onError: () => {
+            toast.error(`Failed to update facet values for ${entityIds.length} ${entityType}`);
+        },
+    });
+
+    const handleAssign = () => {
+        if (selectedValues.length === 0 && !facetValuesRemoved) {
+            toast.error('Please select at least one facet value or make changes to existing ones');
+            return;
+        }
+
+        const items =
+            entityType === 'products'
+                ? (entitiesData as any)?.products?.items
+                : (entitiesData as any)?.productVariants?.items;
+
+        if (!items) {
+            return;
+        }
+
+        const selectedFacetValueIds = selectedValues.map(sv => sv.id);
+
+        mutate({
+            input: items.map((entity: EntityWithFacetValues) => ({
+                id: entity.id,
+                facetValueIds: [
+                    ...new Set([
+                        ...entity.facetValues
+                            .filter((fv: any) => !removedFacetValues.has(fv.id))
+                            .map((fv: any) => fv.id),
+                        ...selectedFacetValueIds,
+                    ]),
+                ],
+            })),
+        });
+    };
+
+    const handleFacetValueSelect = (facetValue: FacetValue) => {
+        setSelectedValues(prev => [...prev, facetValue]);
+    };
+
+    const removeFacetValue = (entityId: string, facetValueId: string) => {
+        setRemovedFacetValues(prev => new Set([...prev, facetValueId]));
+        setFacetValuesRemoved(true);
+    };
+
+    const handleCancel = () => {
+        onOpenChange(false);
+        // Reset state
+        setSelectedValues([]);
+        setFacetValuesRemoved(false);
+        setRemovedFacetValues(new Set());
+    };
+
+    // Filter out removed facet values for display
+    const getDisplayFacetValues = (entity: EntityWithFacetValues) => {
+        return entity.facetValues.filter(fv => !removedFacetValues.has(fv.id));
+    };
+
+    const items =
+        entityType === 'products'
+            ? (entitiesData as any)?.products?.items
+            : (entitiesData as any)?.productVariants?.items;
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[800px] max-h-[80vh] overflow-hidden flex flex-col">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Edit facet values</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>
+                            Add or remove facet values for {entityIds.length} {entityType}
+                        </Trans>
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="flex-1 overflow-hidden flex flex-col gap-4">
+                    {/* Add new facet values section */}
+                    <div className="flex items-center gap-2">
+                        <div className="text-sm font-medium">
+                            <Trans>Add facet value</Trans>
+                        </div>
+                        <FacetValueSelector
+                            onValueSelect={handleFacetValueSelect}
+                            placeholder="Search facet values..."
+                        />
+                    </div>
+
+                    {/* Entities table */}
+                    <div className="flex-1 overflow-auto">
+                        {isLoading ? (
+                            <div className="flex items-center justify-center py-8">
+                                <div className="text-sm text-muted-foreground">Loading...</div>
+                            </div>
+                        ) : items ? (
+                            <div className="border rounded-md">
+                                <table className="w-full">
+                                    <thead className="bg-muted/50">
+                                        <tr>
+                                            <th className="text-left p-3 text-sm font-medium">
+                                                <Trans>
+                                                    {entityType === 'products' ? 'Product' : 'Variant'}
+                                                </Trans>
+                                            </th>
+                                            {entityType === 'variants' && (
+                                                <th className="text-left p-3 text-sm font-medium">
+                                                    <Trans>SKU</Trans>
+                                                </th>
+                                            )}
+                                            <th className="text-left p-3 text-sm font-medium">
+                                                <Trans>Current facet values</Trans>
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {items.map((entity: EntityWithFacetValues) => {
+                                            const displayFacetValues = getDisplayFacetValues(entity);
+                                            return (
+                                                <tr key={entity.id} className="border-t">
+                                                    <td className="p-3 align-top">
+                                                        <div className="font-medium">{entity.name}</div>
+                                                    </td>
+                                                    {entityType === 'variants' && (
+                                                        <td className="p-3 align-top">
+                                                            <div className="text-sm text-muted-foreground">
+                                                                {entity.sku}
+                                                            </div>
+                                                        </td>
+                                                    )}
+                                                    <td className="p-3">
+                                                        <div className="flex flex-wrap gap-2">
+                                                            {displayFacetValues.map(facetValue => (
+                                                                <FacetValueChip
+                                                                    key={facetValue.id}
+                                                                    facetValue={facetValue}
+                                                                    removable={true}
+                                                                    onRemove={() =>
+                                                                        removeFacetValue(
+                                                                            entity.id,
+                                                                            facetValue.id,
+                                                                        )
+                                                                    }
+                                                                />
+                                                            ))}
+                                                            {displayFacetValues.length === 0 && (
+                                                                <div className="text-sm text-muted-foreground">
+                                                                    <Trans>No facet values</Trans>
+                                                                </div>
+                                                            )}
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })}
+                                    </tbody>
+                                </table>
+                            </div>
+                        ) : null}
+                    </div>
+
+                    {/* Selected values summary */}
+                    {selectedValues.length > 0 && (
+                        <div className="border-t pt-4">
+                            <div className="text-sm font-medium mb-2">
+                                <Trans>New facet values to add:</Trans>
+                            </div>
+                            <div className="flex flex-wrap gap-2">
+                                {selectedValues.map(facetValue => (
+                                    <FacetValueChip
+                                        key={facetValue.id}
+                                        facetValue={facetValue}
+                                        removable={false}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={handleCancel}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button
+                        onClick={handleAssign}
+                        disabled={(selectedValues.length === 0 && !facetValuesRemoved) || isPending}
+                    >
+                        <Trans>Update</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

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

@@ -1,4 +1,5 @@
-import { Button } from '@/components/ui/button.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -6,13 +7,12 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { Form } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { Plus, Trash2 } from 'lucide-react';
@@ -99,10 +99,16 @@ const updateProductVariantDocument = graphql(`
 `);
 
 const formSchema = z.object({
-    optionGroups: z.array(z.object({
-        name: z.string().min(1, 'Option group name is required'),
-        options: z.array(z.string().min(1, 'Option name is required')).min(1, 'At least one option is required'),
-    })).min(1, 'At least one option group is required'),
+    optionGroups: z
+        .array(
+            z.object({
+                name: z.string().min(1, 'Option group name is required'),
+                options: z
+                    .array(z.string().min(1, 'Option name is required'))
+                    .min(1, 'At least one option is required'),
+            }),
+        )
+        .min(1, 'At least one option group is required'),
     existingVariantOptionIds: z.array(z.string()).min(1, 'Must select an option for the existing variant'),
 });
 
@@ -146,11 +152,11 @@ export function CreateProductOptionsDialog({
             setOpen(false);
             onSuccess?.();
         },
-        onError: (error) => {
+        onError: error => {
             toast.error(i18n.t('Failed to create product options'), {
                 description: error instanceof Error ? error.message : i18n.t('Unknown error'),
             });
-        }
+        },
     });
 
     const onSubmit = async (values: FormValues) => {
@@ -159,13 +165,13 @@ export function CreateProductOptionsDialog({
         try {
             // Create all option groups and their options
             const createdOptionGroups = await Promise.all(
-                values.optionGroups.map(async (group) => {
+                values.optionGroups.map(async group => {
                     const result = await createProductOptionGroupMutation.mutateAsync({
                         input: {
                             code: group.name.toLowerCase().replace(/\s+/g, '-'),
                             translations: [
                                 {
-                                    languageCode: "en",
+                                    languageCode: 'en',
                                     name: group.name,
                                 },
                             ],
@@ -173,7 +179,7 @@ export function CreateProductOptionsDialog({
                                 code: option.toLowerCase().replace(/\s+/g, '-'),
                                 translations: [
                                     {
-                                        languageCode: "en",
+                                        languageCode: 'en',
                                         name: option,
                                     },
                                 ],
@@ -188,14 +194,11 @@ export function CreateProductOptionsDialog({
                     });
 
                     return result.createProductOptionGroup;
-                })
+                }),
             );
 
             // Combine existing and newly created option groups
-            const allOptionGroups = [
-                ...(productData.product.optionGroups || []),
-                ...createdOptionGroups,
-            ];
+            const allOptionGroups = [...(productData.product.optionGroups || []), ...createdOptionGroups];
 
             // Map the selected option names to their IDs
             const selectedOptionIds = values.existingVariantOptionIds.map((optionName, index) => {
@@ -227,7 +230,7 @@ export function CreateProductOptionsDialog({
                         optionIds: selectedOptionIds,
                         translations: [
                             {
-                                languageCode: "en",
+                                languageCode: 'en',
                                 name: newVariantName,
                             },
                         ],
@@ -248,7 +251,10 @@ export function CreateProductOptionsDialog({
 
     const removeOptionGroup = (index: number) => {
         const currentGroups = form.getValues('optionGroups');
-        form.setValue('optionGroups', currentGroups.filter((_, i) => i !== index));
+        form.setValue(
+            'optionGroups',
+            currentGroups.filter((_, i) => i !== index),
+        );
     };
 
     const addOption = (groupIndex: number) => {
@@ -261,7 +267,9 @@ export function CreateProductOptionsDialog({
     const removeOption = (groupIndex: number, optionIndex: number) => {
         const currentGroups = form.getValues('optionGroups');
         const updatedGroups = [...currentGroups];
-        updatedGroups[groupIndex].options = updatedGroups[groupIndex].options.filter((_, i) => i !== optionIndex);
+        updatedGroups[groupIndex].options = updatedGroups[groupIndex].options.filter(
+            (_, i) => i !== optionIndex,
+        );
         form.setValue('optionGroups', updatedGroups);
     };
 
@@ -311,7 +319,10 @@ export function CreateProductOptionsDialog({
                                                     name={`optionGroups.${groupIndex}.options.${optionIndex}`}
                                                     label={<Trans>Option name</Trans>}
                                                     render={({ field }) => (
-                                                        <Input {...field} placeholder={i18n.t('e.g. Small')} />
+                                                        <Input
+                                                            {...field}
+                                                            placeholder={i18n.t('e.g. Small')}
+                                                        />
                                                     )}
                                                 />
                                                 {optionIndex > 0 && (
@@ -337,12 +348,7 @@ export function CreateProductOptionsDialog({
                                     </div>
                                 </div>
                             ))}
-                            <Button
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                onClick={addOptionGroup}
-                            >
+                            <Button type="button" variant="outline" size="sm" onClick={addOptionGroup}>
                                 <Plus className="mr-2 h-4 w-4" />
                                 <Trans>Add another option group</Trans>
                             </Button>
@@ -354,7 +360,10 @@ export function CreateProductOptionsDialog({
                                     <Trans>Assign options to existing variant</Trans>
                                 </h3>
                                 <p className="text-sm text-muted-foreground">
-                                    <Trans>Select which options should apply to the existing variant "{productData.product.variants[0].name}"</Trans>
+                                    <Trans>
+                                        Select which options should apply to the existing variant "
+                                        {productData.product.variants[0].name}"
+                                    </Trans>
                                 </p>
                                 {/* Show existing option groups first */}
                                 {productData.product.optionGroups?.map((group, groupIndex) => (
@@ -367,14 +376,16 @@ export function CreateProductOptionsDialog({
                                             <select
                                                 className="w-full p-2 border rounded-md"
                                                 value={field.value}
-                                                onChange={(e) => {
-                                                    const newValues = [...form.getValues('existingVariantOptionIds')];
+                                                onChange={e => {
+                                                    const newValues = [
+                                                        ...form.getValues('existingVariantOptionIds'),
+                                                    ];
                                                     newValues[groupIndex] = e.target.value;
                                                     form.setValue('existingVariantOptionIds', newValues);
                                                 }}
                                             >
                                                 <option value="">Select an option</option>
-                                                {group.options.map((option) => (
+                                                {group.options.map(option => (
                                                     <option key={option.id} value={option.name}>
                                                         {option.name}
                                                     </option>
@@ -394,9 +405,14 @@ export function CreateProductOptionsDialog({
                                             <select
                                                 className="w-full p-2 border rounded-md"
                                                 value={field.value}
-                                                onChange={(e) => {
-                                                    const newValues = [...form.getValues('existingVariantOptionIds')];
-                                                    newValues[(productData?.product?.optionGroups?.length || 0) + groupIndex] = e.target.value;
+                                                onChange={e => {
+                                                    const newValues = [
+                                                        ...form.getValues('existingVariantOptionIds'),
+                                                    ];
+                                                    newValues[
+                                                        (productData?.product?.optionGroups?.length || 0) +
+                                                            groupIndex
+                                                    ] = e.target.value;
                                                     form.setValue('existingVariantOptionIds', newValues);
                                                 }}
                                             >
@@ -420,7 +436,7 @@ export function CreateProductOptionsDialog({
                                     createProductOptionGroupMutation.isPending ||
                                     addOptionGroupToProductMutation.isPending ||
                                     updateProductVariantMutation.isPending ||
-                                    (productData?.product?.variants[0] && 
+                                    (productData?.product?.variants[0] &&
                                         form.watch('existingVariantOptionIds').some(value => !value))
                                 }
                             >
@@ -432,4 +448,4 @@ export function CreateProductOptionsDialog({
             </DialogContent>
         </Dialog>
     );
-} 
+}

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

@@ -1,22 +1,22 @@
-import { useCallback, useMemo, useState } from 'react';
-import { CreateProductVariants, VariantConfiguration } from './create-product-variants.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
+    DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
-    DialogDescription,
     DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { Button } from '@/components/ui/button.js';
-import { Plus } from 'lucide-react';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Trans } from '@/lib/trans.js';
-import { graphql } from '@/graphql/graphql.js';
-import { api } from '@/graphql/api.js';
+} from '@/vdb/components/ui/dialog.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { normalizeString } from '@/vdb/lib/utils.js';
 import { useMutation } from '@tanstack/react-query';
-import { normalizeString } from '@/lib/utils.js';
+import { Plus } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { CreateProductVariants, VariantConfiguration } from './create-product-variants.js';
 
 const createProductOptionsMutation = graphql(`
     mutation CreateOptionGroups($input: CreateProductOptionGroupInput!) {