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

package/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -23,10 +23,10 @@ import {
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';
-import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
+import { PlusIcon } from 'lucide-react';
 import { useRef } from 'react';
 import { toast } from 'sonner';
-import { AddProductVariantDialog } from './components/add-product-variant-dialog.js';
 import { CreateProductVariantsDialog } from './components/create-product-variants-dialog.js';
 import { ProductVariantsTable } from './components/product-variants-table.js';
 import { createProductDocument, productDetailDocument, updateProductDocument } from './products.graphql.js';
@@ -154,13 +154,13 @@ function ProductDetailPage() {
                             }}
                             fromProductDetailPage={true}
                         />
-                        <div className="mt-4">
-                            <AddProductVariantDialog
-                                productId={params.id}
-                                onSuccess={() => {
-                                    refreshRef.current?.();
-                                }}
-                            />
+                        <div className="mt-4 flex gap-2">
+                            <Button asChild variant="outline">
+                                <Link to="./variants">
+                                    <PlusIcon className="mr-2 h-4 w-4" />
+                                    <Trans>Manage variants</Trans>
+                                </Link>
+                            </Button>
                         </div>
                     </PageBlock>
                 )}

package/src/app/routes/_authenticated/_products/products_.$id_.variants.tsx

@@ -0,0 +1,405 @@
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { Page, PageBlock, PageLayout, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
+import { api } from '@/vdb/graphql/api.js';
+import { ResultOf } 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 { createFileRoute } from '@tanstack/react-router';
+import { Plus, Save, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import * as z from 'zod';
+import { AddOptionGroupDialog } from './components/add-option-group-dialog.js';
+import { AddProductVariantDialog } from './components/add-product-variant-dialog.js';
+import {
+    createProductOptionDocument,
+    deleteProductVariantDocument,
+    productDetailWithVariantsDocument,
+    removeOptionGroupFromProductDocument,
+    updateProductVariantDocument,
+} from './products.graphql.js';
+
+const pageId = 'manage-product-variants';
+const getQueryKey = (id: string) => ['DetailPage', 'product', id, 'manage-variants'];
+
+export const Route = createFileRoute('/_authenticated/_products/products_/$id_/variants')({
+    component: ManageProductVariants,
+    loader: async ({ context, params, location }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+        const result = await context.queryClient.ensureQueryData({
+            queryKey: getQueryKey(params.id),
+            queryFn: () => api.query(productDetailWithVariantsDocument, { id: params.id }),
+        });
+        return {
+            breadcrumb: [
+                { path: '/products', label: 'Products' },
+                { path: `/products/${params.id}`, label: result.product?.name },
+                <Trans>Manage variants</Trans>,
+            ],
+        };
+    },
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+const optionGroupSchema = z.object({
+    name: z.string().min(1, 'Option group name is required'),
+    values: z.array(z.string()).min(1, 'At least one option value is required'),
+});
+
+const addOptionValueSchema = z.object({
+    name: z.string().min(1, 'Option value name is required'),
+});
+
+type AddOptionValueFormValues = z.infer<typeof addOptionValueSchema>;
+type Variant = NonNullable<ResultOf<typeof productDetailWithVariantsDocument>['product']>['variants'][0];
+
+function AddOptionValueDialog({
+    groupId,
+    groupName,
+    onSuccess,
+}: Readonly<{
+    groupId: string;
+    groupName: string;
+    onSuccess?: () => void;
+}>) {
+    const [open, setOpen] = useState(false);
+    const { i18n } = useLingui();
+
+    const form = useForm<AddOptionValueFormValues>({
+        resolver: zodResolver(addOptionValueSchema),
+        defaultValues: {
+            name: '',
+        },
+    });
+
+    const createOptionMutation = useMutation({
+        mutationFn: api.mutate(createProductOptionDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Successfully added option value'));
+            setOpen(false);
+            form.reset();
+            onSuccess?.();
+        },
+        onError: error => {
+            toast.error(i18n.t('Failed to add option value'), {
+                description: error instanceof Error ? error.message : i18n.t('Unknown error'),
+            });
+        },
+    });
+
+    const onSubmit = (values: AddOptionValueFormValues) => {
+        createOptionMutation.mutate({
+            input: {
+                productOptionGroupId: groupId,
+                code: values.name.toLowerCase().replace(/\s+/g, '-'),
+                translations: [
+                    {
+                        languageCode: 'en',
+                        name: values.name,
+                    },
+                ],
+            },
+        });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button size="icon" variant="ghost">
+                    <Plus className="h-3 w-3" />
+                </Button>
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Add option value to {groupName}</Trans>
+                    </DialogTitle>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Option value name</Trans>}
+                            render={({ field }) => (
+                                <Input {...field} placeholder={i18n.t('e.g., Red, Large, Cotton')} />
+                            )}
+                        />
+                        <DialogFooter>
+                            <Button type="submit" disabled={createOptionMutation.isPending}>
+                                <Trans>Add option value</Trans>
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+function ManageProductVariants() {
+    const { id } = Route.useParams();
+    const { i18n } = useLingui();
+    const [optionsToAddToVariant, setOptionsToAddToVariant] = useState<
+        Record<string, Record<string, string>>
+    >({});
+
+    const { data: productData, refetch } = useQuery({
+        queryFn: () => api.query(productDetailWithVariantsDocument, { id }),
+        queryKey: getQueryKey(id),
+    });
+
+    const updateVariantMutation = useMutation({
+        mutationFn: api.mutate(updateProductVariantDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Variant updated successfully'));
+            refetch();
+        },
+    });
+
+    const deleteVariantMutation = useMutation({
+        mutationFn: api.mutate(deleteProductVariantDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Variant deleted successfully'));
+            refetch();
+        },
+    });
+
+    const removeOptionGroupMutation = useMutation({
+        mutationFn: api.mutate(removeOptionGroupFromProductDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Option group removed'));
+            refetch();
+        },
+    });
+
+    const setOptionToAddToVariant = (variantId: string, groupId: string, optionId: string | undefined) => {
+        if (!optionId) {
+            const updated = { ...optionsToAddToVariant };
+            if (updated[variantId]) {
+                delete updated[variantId][groupId];
+            }
+            setOptionsToAddToVariant(updated);
+        } else {
+            setOptionsToAddToVariant(prev => ({
+                ...prev,
+                [variantId]: {
+                    ...prev[variantId],
+                    [groupId]: optionId,
+                },
+            }));
+        }
+    };
+
+    const addOptionToVariant = async (variant: Variant) => {
+        const optionsToAdd = optionsToAddToVariant[variant.id];
+        if (!optionsToAdd) return;
+
+        const existingOptionIds = variant.options.map(o => o.id);
+        const newOptionIds = Object.values(optionsToAdd).filter(Boolean);
+        const allOptionIds = [...existingOptionIds, ...newOptionIds];
+
+        await updateVariantMutation.mutateAsync({
+            input: {
+                id: variant.id,
+                optionIds: allOptionIds,
+            },
+        });
+
+        setOptionsToAddToVariant(prev => {
+            const updated = { ...prev };
+            delete updated[variant.id];
+            return updated;
+        });
+    };
+
+    const deleteVariant = async (variant: Variant) => {
+        if (confirm(i18n.t('Are you sure you want to delete this variant?'))) {
+            await deleteVariantMutation.mutateAsync({ id: variant.id });
+        }
+    };
+
+    const getOption = (variant: Variant, groupId: string) => {
+        return variant.options.find(o => o.groupId === groupId);
+    };
+
+    if (!productData?.product) {
+        return null;
+    }
+
+    return (
+        <Page pageId={pageId}>
+            <PageTitle>
+                {productData.product.name} - <Trans>Manage variants</Trans>
+            </PageTitle>
+            <PageLayout>
+                <PageBlock column="main" blockId="option-groups" title={<Trans>Option Groups</Trans>}>
+                    <div className="space-y-4 mb-4">
+                        {productData.product.optionGroups.length === 0 ? (
+                            <p className="text-sm text-muted-foreground">
+                                <Trans>
+                                    No option groups defined yet. Add option groups to create different
+                                    variants of your product (e.g., Size, Color, Material)
+                                </Trans>
+                            </p>
+                        ) : (
+                            productData.product.optionGroups.map(group => (
+                                <div key={group.id} className="grid grid-cols-12 gap-4 items-start">
+                                    <div className="col-span-3">
+                                        <label className="text-sm font-medium">
+                                            <Trans>Option</Trans>
+                                        </label>
+                                        <Input value={group.name} disabled />
+                                    </div>
+                                    <div className="col-span-8">
+                                        <label className="text-sm font-medium">
+                                            <Trans>Option values</Trans>
+                                        </label>
+                                        <div className="flex flex-wrap gap-2 mt-1">
+                                            {group.options.map(option => (
+                                                <Badge key={option.id} variant="secondary">
+                                                    {option.name}
+                                                </Badge>
+                                            ))}
+                                            <AddOptionValueDialog
+                                                groupId={group.id}
+                                                groupName={group.name}
+                                                onSuccess={() => refetch()}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                    <AddOptionGroupDialog productId={id} onSuccess={() => refetch()} />
+                </PageBlock>
+
+                <PageBlock column="main" blockId="product-variants" title={<Trans>Variants</Trans>}>
+                    <div className="mb-4">
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead>
+                                        <Trans>Name</Trans>
+                                    </TableHead>
+                                    <TableHead>
+                                        <Trans>SKU</Trans>
+                                    </TableHead>
+                                    {productData.product.optionGroups.map(group => (
+                                        <TableHead key={group.id}>{group.name}</TableHead>
+                                    ))}
+                                    <TableHead>
+                                        <Trans>Delete</Trans>
+                                    </TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {productData.product.variants.map(variant => (
+                                    <TableRow key={variant.id}>
+                                        <TableCell>{variant.name}</TableCell>
+                                        <TableCell>{variant.sku}</TableCell>
+                                        {productData.product?.optionGroups.map(group => {
+                                            const option = getOption(variant, group.id);
+                                            return (
+                                                <TableCell key={group.id}>
+                                                    {option ? (
+                                                        <Badge variant="outline">{option.name}</Badge>
+                                                    ) : (
+                                                        <div className="flex items-center gap-2">
+                                                            <Select
+                                                                value={
+                                                                    optionsToAddToVariant[variant.id]?.[
+                                                                        group.id
+                                                                    ] || ''
+                                                                }
+                                                                onValueChange={value =>
+                                                                    setOptionToAddToVariant(
+                                                                        variant.id,
+                                                                        group.id,
+                                                                        value || undefined,
+                                                                    )
+                                                                }
+                                                            >
+                                                                <SelectTrigger className="w-32">
+                                                                    <SelectValue />
+                                                                </SelectTrigger>
+                                                                <SelectContent>
+                                                                    {group.options.map(opt => (
+                                                                        <SelectItem
+                                                                            key={opt.id}
+                                                                            value={opt.id}
+                                                                        >
+                                                                            {opt.name}
+                                                                        </SelectItem>
+                                                                    ))}
+                                                                </SelectContent>
+                                                            </Select>
+                                                            <Button
+                                                                size="sm"
+                                                                variant={
+                                                                    optionsToAddToVariant[variant.id]?.[
+                                                                        group.id
+                                                                    ]
+                                                                        ? 'default'
+                                                                        : 'outline'
+                                                                }
+                                                                disabled={
+                                                                    !optionsToAddToVariant[variant.id]?.[
+                                                                        group.id
+                                                                    ]
+                                                                }
+                                                                onClick={() => addOptionToVariant(variant)}
+                                                            >
+                                                                <Save className="h-4 w-4" />
+                                                            </Button>
+                                                        </div>
+                                                    )}
+                                                </TableCell>
+                                            );
+                                        })}
+                                        <TableCell>
+                                            <Button
+                                                size="sm"
+                                                variant="ghost"
+                                                onClick={() => deleteVariant(variant)}
+                                            >
+                                                <Trash2 className="h-4 w-4 text-destructive" />
+                                            </Button>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </div>
+
+                    <AddProductVariantDialog
+                        productId={id}
+                        onSuccess={() => {
+                            refetch();
+                        }}
+                    />
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_promotions/components/promotion-bulk-actions.tsx

@@ -41,7 +41,7 @@ export const AssignPromotionsToChannelBulkAction: BulkActionComponent<any> = ({
 };
 
 export const RemovePromotionsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { selectedChannel } = useChannel();
+    const { activeChannel } = useChannel();
 
     return (
         <RemoveFromChannelBulkAction
@@ -52,7 +52,7 @@ export const RemovePromotionsFromChannelBulkAction: BulkActionComponent<any> = (
             requiredPermissions={['UpdatePromotion']}
             buildInput={() => ({
                 promotionIds: selection.map(s => s.id),
-                channelId: selectedChannel?.id,
+                channelId: activeChannel?.id,
             })}
         />
     );

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-method-bulk-actions.tsx

@@ -43,7 +43,7 @@ export const RemoveShippingMethodsFromChannelBulkAction: BulkActionComponent<any
     selection,
     table,
 }) => {
-    const { selectedChannel } = useChannel();
+    const { activeChannel } = useChannel();
 
     return (
         <RemoveFromChannelBulkAction
@@ -54,7 +54,7 @@ export const RemoveShippingMethodsFromChannelBulkAction: BulkActionComponent<any
             requiredPermissions={['UpdateShippingMethod']}
             buildInput={() => ({
                 shippingMethodIds: selection.map(s => s.id),
-                channelId: selectedChannel?.id,
+                channelId: activeChannel?.id,
             })}
         />
     );

package/src/app/routes/_authenticated/_stock-locations/components/stock-location-bulk-actions.tsx

@@ -1,7 +1,7 @@
 import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
 import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
-import { api } from '@/vdb/graphql/api.js';
 import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
+import { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 
@@ -40,7 +40,7 @@ export const AssignStockLocationsToChannelBulkAction: BulkActionComponent<any> =
 };
 
 export const RemoveStockLocationsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { selectedChannel } = useChannel();
+    const { activeChannel } = useChannel();
 
     return (
         <RemoveFromChannelBulkAction
@@ -51,7 +51,7 @@ export const RemoveStockLocationsFromChannelBulkAction: BulkActionComponent<any>
             requiredPermissions={['UpdateStockLocation']}
             buildInput={() => ({
                 stockLocationIds: selection.map(s => s.id),
-                channelId: selectedChannel?.id,
+                channelId: activeChannel?.id,
             })}
         />
     );

package/src/lib/components/data-input/rich-text-input.tsx

@@ -1,11 +1,11 @@
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 import TextStyle from '@tiptap/extension-text-style';
 import { BubbleMenu, Editor, EditorContent, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { BoldIcon, ItalicIcon, StrikethroughIcon } from 'lucide-react';
 import { useLayoutEffect, useRef } from 'react';
 import { Button } from '../ui/button.js';
-import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 
 // define your extension array
 const extensions = [
@@ -32,11 +32,15 @@ export function RichTextInput({ value, onChange, fieldDef }: Readonly<DashboardF
         },
         extensions: extensions,
         content: value,
-        editable: !readOnly,    
+        editable: !readOnly,
         onUpdate: ({ editor }) => {
             if (!readOnly) {
                 isInternalUpdate.current = true;
-                onChange(editor.getHTML());
+                console.log('onUpdate');
+                const newValue = editor.getHTML();
+                if (value !== newValue) {
+                    onChange(newValue);
+                }
             }
         },
         editorProps: {
@@ -61,7 +65,7 @@ export function RichTextInput({ value, onChange, fieldDef }: Readonly<DashboardF
     // Update editor's editable state when disabled prop changes
     useLayoutEffect(() => {
         if (editor) {
-            editor.setEditable(!readOnly);
+            editor.setEditable(!readOnly, false);
         }
     }, [readOnly, editor]);
 

package/src/lib/components/layout/channel-switcher.tsx

@@ -13,13 +13,15 @@ import {
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/vdb/components/ui/sidebar.js';
+import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
 import { Link } from '@tanstack/react-router';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ManageLanguagesDialog } from './manage-languages-dialog.js';
 
 /**
@@ -44,7 +46,7 @@ function getChannelInitialsFromCode(code: string) {
 
 export function ChannelSwitcher() {
     const { isMobile } = useSidebar();
-    const { channels, activeChannel, selectedChannel, setSelectedChannel } = useChannel();
+    const { channels, activeChannel, setActiveChannel } = useChannel();
     const serverConfig = useServerConfig();
     const { formatLanguageName } = useLocalFormat();
     const {
@@ -54,7 +56,7 @@ export function ChannelSwitcher() {
     const [showManageLanguagesDialog, setShowManageLanguagesDialog] = useState(false);
 
     // Use the selected channel if available, otherwise fall back to the active channel
-    const displayChannel = selectedChannel || activeChannel;
+    const displayChannel = activeChannel || activeChannel;
 
     // Get available languages from server config
     const availableLanguages = serverConfig?.availableLanguages || [];
@@ -65,6 +67,16 @@ export function ChannelSwitcher() {
         ? [displayChannel, ...channels.filter(ch => ch.id !== displayChannel.id)]
         : channels;
 
+    useEffect(() => {
+        if (activeChannel?.availableLanguageCodes) {
+            // Ensure the current content language is a valid one for the active
+            // channel
+            if (!activeChannel.availableLanguageCodes.includes(contentLanguage as any)) {
+                setContentLanguage(activeChannel.defaultLanguageCode);
+            }
+        }
+    }, [activeChannel, contentLanguage]);
+
     return (
         <>
             <SidebarMenu>
@@ -75,7 +87,11 @@ export function ChannelSwitcher() {
                                 size="lg"
                                 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                             >
-                                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                                <div
+                                    className={
+                                        'bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg'
+                                    }
+                                >
                                     <span className="truncate font-semibold text-xs uppercase">
                                         {getChannelInitialsFromCode(displayChannel?.code || '')}
                                     </span>
@@ -109,10 +125,15 @@ export function ChannelSwitcher() {
                             {orderedChannels.map((channel, index) => (
                                 <div key={channel.code}>
                                     <DropdownMenuItem
-                                        onClick={() => setSelectedChannel(channel.id)}
+                                        onClick={() => setActiveChannel(channel.id)}
                                         className="gap-2 p-2"
                                     >
-                                        <div className="flex size-8 items-center justify-center rounded border">
+                                        <div
+                                            className={cn(
+                                                'flex size-8 items-center justify-center rounded border',
+                                                channel.code === DEFAULT_CHANNEL_CODE ? 'bg-primary' : '',
+                                            )}
+                                        >
                                             <span className="truncate font-semibold text-xs uppercase">
                                                 {getChannelInitialsFromCode(channel.code)}
                                             </span>

package/src/lib/components/layout/manage-languages-dialog.tsx

@@ -96,11 +96,11 @@ interface ManageLanguagesDialogProps {
 
 export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogProps) {
     const { formatLanguageName } = useLocalFormat();
-    const { activeChannel, selectedChannel } = useChannel();
+    const { activeChannel } = useChannel();
     const { hasPermissions } = usePermissions();
     const queryClient = useQueryClient();
 
-    const displayChannel = selectedChannel || activeChannel;
+    const displayChannel = activeChannel;
 
     // Permission checks
     const canReadGlobalSettings = hasPermissions(['ReadSettings']) || hasPermissions(['ReadGlobalSettings']);