@vendure/dashboard 3.5.2-master-202512020233 → 3.5.2-master-202512170238

package/src/lib/components/data-input/datetime-input.tsx

@@ -185,7 +185,7 @@ function bcpTagToDatePickerLocale(
         case 'pt-BR':
             return module.ptBR;
         default: {
-            const lang = tag.split('-').at(0);
+            const lang = tag.split('-')[0];
             return lang ? module[lang as keyof typeof module] : undefined;
         }
     }

package/src/lib/components/data-input/relation-selector.tsx

@@ -28,7 +28,7 @@ export interface RelationSelectorConfig<T = any> {
     /** Number of items to load per page */
     pageSize?: number;
     /** Placeholder text for the search input */
-    placeholder?: React.ReactNode;
+    placeholder?: string;
     /** Whether to enable multi-select mode */
     multiple?: boolean;
     /** Custom filter function for search */

package/src/lib/components/data-input/struct-form-input.tsx

@@ -20,7 +20,7 @@ import {
     StructCustomFieldConfig,
     StructField,
 } from '@/vdb/framework/form-engine/form-engine-types.js';
-import { isStructFieldConfig } from '@/vdb/framework/form-engine/utils.js';
+import { isReadonlyField, isStructFieldConfig } from '@/vdb/framework/form-engine/utils.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { CustomFieldListInput } from './custom-field-list-input.js';
 import { DateTimeInput } from './datetime-input.js';
@@ -98,185 +98,61 @@ export function StructFormInput({ fieldDef, ...field }: Readonly<DashboardFormCo
         return input?.find(t => t.languageCode === displayLanguage)?.value;
     };
 
-    const isReadonly = fieldDef?.readonly === true;
-
-    // Helper function to render individual struct field inputs
-    const renderStructFieldInput = (
-        structField: StructField,
-        inputField: ControllerRenderProps<any, any>,
-    ) => {
-        const isList = structField.list ?? false;
-
-        // Helper function to render single input for a struct field
-        const renderSingleStructInput = (singleField: ControllerRenderProps<any, any>) => {
-            switch (structField.type) {
-                case 'string': {
-                    // Check if the field has options (dropdown)
-                    const stringField = structField as any; // GraphQL union types need casting
-                    if (stringField.options && stringField.options.length > 0) {
-                        return (
-                            <SelectWithOptions {...singleField} fieldDef={stringField} isListField={false} />
-                        );
-                    }
-                    return (
-                        <Input
-                            value={singleField.value ?? ''}
-                            onChange={e => singleField.onChange(e.target.value)}
-                            onBlur={singleField.onBlur}
-                            name={singleField.name}
-                            disabled={isReadonly}
-                        />
-                    );
-                }
-                case 'int':
-                case 'float': {
-                    const isFloat = structField.type === 'float';
-                    const numericField = structField as any; // GraphQL union types need casting
-                    const min = isFloat ? numericField.floatMin : numericField.intMin;
-                    const max = isFloat ? numericField.floatMax : numericField.intMax;
-                    const step = isFloat ? numericField.floatStep : numericField.intStep;
-
-                    return (
-                        <Input
-                            type="number"
-                            value={singleField.value ?? ''}
-                            onChange={e => {
-                                const value = e.target.valueAsNumber;
-                                singleField.onChange(isNaN(value) ? undefined : value);
-                            }}
-                            onBlur={singleField.onBlur}
-                            name={singleField.name}
-                            disabled={isReadonly}
-                            min={min}
-                            max={max}
-                            step={step}
-                        />
-                    );
-                }
-                case 'boolean':
-                    return (
-                        <Switch
-                            checked={singleField.value}
-                            onCheckedChange={singleField.onChange}
-                            disabled={isReadonly}
-                        />
-                    );
-                case 'datetime':
-                    return <DateTimeInput {...singleField} />;
-                default:
-                    return (
-                        <Input
-                            value={singleField.value ?? ''}
-                            onChange={e => singleField.onChange(e.target.value)}
-                            onBlur={singleField.onBlur}
-                            name={singleField.name}
-                            disabled={isReadonly}
-                        />
-                    );
-            }
-        };
-
-        // Handle string fields with options (dropdown) - already handles list case with multi-select
-        if (structField.type === 'string') {
-            const stringField = structField as any; // GraphQL union types need casting
-            if (stringField.options && stringField.options.length > 0) {
-                return (
-                    <SelectWithOptions
-                        {...inputField}
-                        fieldDef={stringField}
-                        disabled={isReadonly}
-                        isListField={isList}
-                    />
-                );
-            }
-        }
-
-        // For list struct fields, wrap with list input
-        if (isList) {
-            const getDefaultValue = () => {
-                switch (structField.type) {
-                    case 'string':
-                        return '';
-                    case 'int':
-                    case 'float':
-                        return 0;
-                    case 'boolean':
-                        return false;
-                    case 'datetime':
-                        return '';
-                    default:
-                        return '';
-                }
-            };
-
-            // Determine if the field type needs full width
-            const needsFullWidth = structField.type === 'text' || structField.type === 'localeText';
-
-            return (
-                <CustomFieldListInput
-                    {...inputField}
-                    disabled={isReadonly}
-                    renderInput={(index, listItemField) => renderSingleStructInput(listItemField)}
-                    defaultValue={getDefaultValue()}
-                />
-            );
-        }
-
-        // For non-list fields, render directly
-        return renderSingleStructInput(inputField);
-    };
+    const isReadonly = isReadonlyField(fieldDef);
 
     // Edit mode - memoized to prevent focus loss from re-renders
     const EditMode = useMemo(
-        () => (
-            <div className="space-y-4 border rounded-md p-4">
-                {!isReadonly && (
-                    <div className="flex justify-end">
-                        <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => setIsEditing(false)}
-                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                        >
-                            <CheckIcon className="h-4 w-4" />
-                            <span className="sr-only">Done</span>
-                        </Button>
-                    </div>
-                )}
-                {fieldDef?.fields?.map(structField => (
-                    <FormField
-                        key={structField.name}
-                        control={control}
-                        name={`${field.name}.${structField.name}`}
-                        render={({ field: structInputField }) => (
-                            <FormItem>
-                                <div className="flex items-baseline gap-4">
-                                    <div className="flex-1">
-                                        <FormLabel>
-                                            {getTranslation(structField.label) ?? structField.name}
-                                        </FormLabel>
-                                        {getTranslation(structField.description) && (
-                                            <FormDescription>
-                                                {getTranslation(structField.description)}
-                                            </FormDescription>
-                                        )}
+        () =>
+            fieldDef && isStructFieldConfig(fieldDef) ? (
+                <div className="space-y-4 border rounded-md p-4">
+                    {!isReadonly && (
+                        <div className="flex justify-end">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setIsEditing(false)}
+                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                            >
+                                <CheckIcon className="h-4 w-4" />
+                                <span className="sr-only">Done</span>
+                            </Button>
+                        </div>
+                    )}
+                    {fieldDef?.fields.map(structField => (
+                        <FormField
+                            key={structField.name}
+                            control={control}
+                            name={`${field.name}.${structField.name}`}
+                            render={({ field: structInputField }) => (
+                                <FormItem>
+                                    <div className="flex items-baseline gap-4">
+                                        <div className="flex-1">
+                                            <FormLabel>
+                                                {getTranslation(structField.label) ?? structField.name}
+                                            </FormLabel>
+                                            {getTranslation(structField.description) && (
+                                                <FormDescription>
+                                                    {getTranslation(structField.description)}
+                                                </FormDescription>
+                                            )}
+                                        </div>
+                                        <div className="flex-[2]">
+                                            <FormControl>
+                                                {renderStructFieldInput(structField, structInputField)}
+                                            </FormControl>
+                                            <FormMessage />
+                                        </div>
                                     </div>
-                                    <div className="flex-[2]">
-                                        <FormControl>
-                                            {renderStructFieldInput(structField, structInputField)}
-                                        </FormControl>
-                                        <FormMessage />
-                                    </div>
-                                </div>
-                            </FormItem>
-                        )}
-                    />
-                ))}
-            </div>
-        ),
-        [fieldDef, control, field.name, getTranslation, renderStructFieldInput, isReadonly],
+                                </FormItem>
+                            )}
+                        />
+                    ))}
+                </div>
+            ) : null,
+        [fieldDef, control, field.name, getTranslation, isReadonly],
     );
 
+    // Early return if not a struct field config
     if (!fieldDef || !isStructFieldConfig(fieldDef)) {
         return null;
     }
@@ -317,3 +193,128 @@ export function StructFormInput({ fieldDef, ...field }: Readonly<DashboardFormCo
         />
     );
 }
+
+// Helper function to render individual struct field inputs
+const renderStructFieldInput = (
+    structField: StructField,
+    inputField: ControllerRenderProps<any, any>,
+    isReadonly: boolean = false,
+) => {
+    const isList = structField.list ?? false;
+
+    // Helper function to render single input for a struct field
+    const renderSingleStructInput = (singleField: ControllerRenderProps<any, any>) => {
+        switch (structField.type) {
+            case 'string': {
+                // Check if the field has options (dropdown)
+                const stringField = structField as any; // GraphQL union types need casting
+                if (stringField.options && stringField.options.length > 0) {
+                    return <SelectWithOptions {...singleField} fieldDef={stringField} isListField={false} />;
+                }
+                return (
+                    <Input
+                        value={singleField.value ?? ''}
+                        onChange={e => singleField.onChange(e.target.value)}
+                        onBlur={singleField.onBlur}
+                        name={singleField.name}
+                        disabled={isReadonly}
+                    />
+                );
+            }
+            case 'int':
+            case 'float': {
+                const isFloat = structField.type === 'float';
+                const numericField = structField as any; // GraphQL union types need casting
+                const min = isFloat ? numericField.floatMin : numericField.intMin;
+                const max = isFloat ? numericField.floatMax : numericField.intMax;
+                const step = isFloat ? numericField.floatStep : numericField.intStep;
+
+                return (
+                    <Input
+                        type="number"
+                        value={singleField.value ?? ''}
+                        onChange={e => {
+                            const value = e.target.valueAsNumber;
+                            singleField.onChange(isNaN(value) ? undefined : value);
+                        }}
+                        onBlur={singleField.onBlur}
+                        name={singleField.name}
+                        disabled={isReadonly}
+                        min={min}
+                        max={max}
+                        step={step}
+                    />
+                );
+            }
+            case 'boolean':
+                return (
+                    <Switch
+                        checked={singleField.value}
+                        onCheckedChange={singleField.onChange}
+                        disabled={isReadonly}
+                    />
+                );
+            case 'datetime':
+                return <DateTimeInput {...singleField} />;
+            default:
+                return (
+                    <Input
+                        value={singleField.value ?? ''}
+                        onChange={e => singleField.onChange(e.target.value)}
+                        onBlur={singleField.onBlur}
+                        name={singleField.name}
+                        disabled={isReadonly}
+                    />
+                );
+        }
+    };
+
+    // Handle string fields with options (dropdown) - already handles list case with multi-select
+    if (structField.type === 'string') {
+        const stringField = structField as any; // GraphQL union types need casting
+        if (stringField.options && stringField.options.length > 0) {
+            return (
+                <SelectWithOptions
+                    {...inputField}
+                    fieldDef={stringField}
+                    disabled={isReadonly}
+                    isListField={isList}
+                />
+            );
+        }
+    }
+
+    // For list struct fields, wrap with list input
+    if (isList) {
+        const getDefaultValue = () => {
+            switch (structField.type) {
+                case 'string':
+                    return '';
+                case 'int':
+                case 'float':
+                    return 0;
+                case 'boolean':
+                    return false;
+                case 'datetime':
+                    return '';
+                default:
+                    return '';
+            }
+        };
+
+        // Determine if the field type needs full width
+        const needsFullWidth = structField.type === 'text' || structField.type === 'localeText';
+
+        return (
+            <CustomFieldListInput
+                {...inputField}
+                disabled={isReadonly}
+                renderInput={(index, listItemField) => renderSingleStructInput(listItemField)}
+                defaultValue={getDefaultValue()}
+            />
+        );
+    }
+
+    // For non-list fields, render directly
+    return renderSingleStructInput(inputField);
+};

package/src/lib/components/data-table/data-table.tsx

@@ -254,6 +254,7 @@ export function DataTable<TData>({
                                     title={filter?.title}
                                     options={filter?.options}
                                     optionsFn={filter?.optionsFn}
+                                    icon={filter?.icon}
                                 />
                             ))}
                         </Suspense>

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

@@ -18,6 +18,7 @@ import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { usePermissions } from '@/vdb/hooks/use-permissions.js';
 import { useSortedLanguages } from '@/vdb/hooks/use-sorted-languages.js';
+import { globalLanguageCodes } from '@/vdb/utils/global-languages.js';
 import { Trans } from '@lingui/react/macro';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AlertCircle, Lock } from 'lucide-react';
@@ -68,36 +69,12 @@ const updateChannelDocument = graphql(`
     }
 `);
 
-// All possible language codes for global settings - includes more than what might be globally enabled
-const ALL_LANGUAGE_CODES = [
-    'en',
-    'es',
-    'fr',
-    'de',
-    'it',
-    'pt',
-    'nl',
-    'pl',
-    'ru',
-    'ja',
-    'zh',
-    'ko',
-    'ar',
-    'hi',
-    'sv',
-    'da',
-    'nb',
-    'nn',
-    'fi',
-];
-
 interface ManageLanguagesDialogProps {
     open: boolean;
     onClose: () => void;
 }
 
 export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogProps) {
-    const { formatLanguageName } = useLocalFormat();
     const { activeChannel } = useChannel();
     const { hasPermissions } = usePermissions();
     const queryClient = useQueryClient();
@@ -309,7 +286,7 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
                                         value={globalLanguages}
                                         onChange={handleGlobalLanguagesChange}
                                         multiple={true}
-                                        availableLanguageCodes={ALL_LANGUAGE_CODES}
+                                        availableLanguageCodes={globalLanguageCodes}
                                     />
                                 </div>
                                 <p className="text-xs text-muted-foreground">

package/src/lib/components/shared/custom-fields-form.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/vdb/components/ui/form.js';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
 import { CustomFormComponent } from '@/vdb/framework/form-engine/custom-form-component.js';
+import { ConfigurableFieldDef } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { customFieldConfigFragment } from '@/vdb/providers/server-config.js';
@@ -20,7 +21,7 @@ import { Control } from 'react-hook-form';
 import { FormControlAdapter } from '../../framework/form-engine/form-control-adapter.js';
 import { TranslatableFormField } from './translatable-form-field.js';
 
-type CustomFieldConfig = ResultOf<typeof customFieldConfigFragment>;
+type CustomFieldConfig = Omit<ResultOf<typeof customFieldConfigFragment>, '__typename'>;
 
 interface CustomFieldsFormProps {
     entityType: string;
@@ -120,8 +121,8 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Readon
 }
 
 interface CustomFieldItemProps {
-    fieldDef: CustomFieldConfig;
-    control: Control<any, any>;
+    fieldDef: ConfigurableFieldDef;
+    control: Control<any>;
     fieldName: string;
 }
 
@@ -130,14 +131,19 @@ function CustomFieldItem({ fieldDef, control, fieldName }: Readonly<CustomFieldI
         settings: { displayLanguage },
     } = useUserSettings();
 
-    const getTranslation = (input: Array<{ languageCode: string; value: string }> | null | undefined) => {
+    const getTranslation = (
+        input: string | Array<{ languageCode: string; value: string }> | null | undefined,
+    ) => {
+        if (typeof input === 'string') {
+            return input;
+        }
         return input?.find(t => t.languageCode === displayLanguage)?.value;
     };
     const hasCustomFormComponent = fieldDef.ui?.component;
     const isLocaleField = fieldDef.type === 'localeString' || fieldDef.type === 'localeText';
     const shouldBeFullWidth = fieldDef.ui?.fullWidth === true;
     const containerClassName = shouldBeFullWidth ? 'col-span-2' : '';
-    const isReadonly = fieldDef.readonly ?? false;
+    const isReadonly = (fieldDef as CustomFieldConfig).readonly ?? false;
 
     // For locale fields, always use TranslatableFormField regardless of custom components
     if (isLocaleField) {
@@ -212,7 +218,6 @@ function CustomFieldItem({ fieldDef, control, fieldName }: Readonly<CustomFieldI
                                             <StructFormInput {...inputField} fieldDef={fieldDef} />
                                         )}
                                         defaultValue={{}} // Empty struct object as default
-                                        isFullWidth={true} // Structs should always be full-width
                                     />
                                 </FormControl>
                                 <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
@@ -266,9 +271,9 @@ function CustomFieldItem({ fieldDef, control, fieldName }: Readonly<CustomFieldI
 }
 
 interface CustomFieldFormItemProps {
-    fieldDef: CustomFieldConfig;
+    fieldDef: ConfigurableFieldDef;
     getTranslation: (
-        input: Array<{ languageCode: string; value: string }> | null | undefined,
+        input: string | Array<{ languageCode: string; value: string }> | null | undefined,
     ) => string | undefined;
     fieldName: string;
     children: React.ReactNode;

package/src/lib/components/ui/carousel.tsx

@@ -6,8 +6,8 @@ import useEmblaCarousel, {
 } from "embla-carousel-react"
 import { ArrowLeft, ArrowRight } from "lucide-react"
 
-import { cn } from "@/vdb/lib/utils"
-import { Button } from "@/vdb/components/ui/button"
+import { cn } from "@/vdb/lib/utils.js"
+import { Button } from "@/vdb/components/ui/button.js"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>

package/src/lib/components/ui/chart.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const

package/src/lib/components/ui/context-menu.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function ContextMenu({
   ...props

package/src/lib/components/ui/drawer.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function Drawer({
   ...props

package/src/lib/components/ui/grid-layout.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useState, useRef, useCallback, useEffect } from "react";
-import { cn } from "@/vdb/lib/utils";
+import { cn } from "@/vdb/lib/utils.js";
 
 export interface GridLayout {
     x: number;

package/src/lib/components/ui/input-group.tsx

@@ -127,6 +127,7 @@ function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>)
                 'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
                 className,
             )}
+            value={props.value}
             {...props}
         />
     );

package/src/lib/components/ui/input-otp.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
 import { MinusIcon } from "lucide-react"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function InputOTP({
   className,

package/src/lib/components/ui/menubar.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function Menubar({
   className,

package/src/lib/components/ui/navigation-menu.tsx

@@ -3,7 +3,7 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
 import { ChevronDownIcon } from "lucide-react"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function NavigationMenu({
   className,

package/src/lib/components/ui/progress.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function Progress({
   className,

package/src/lib/components/ui/radio-group.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 import { CircleIcon } from "lucide-react"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function RadioGroup({
   className,

package/src/lib/components/ui/resizable.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { GripVerticalIcon } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function ResizablePanelGroup({
   className,

package/src/lib/components/ui/select.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function Select({
   ...props