@vendure/dashboard 3.3.8-master-202507260236 → 3.3.8-master-202507300243

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-eligibility-checker-selector.tsx

@@ -1,21 +1,7 @@
-import { ConfigurableOperationInput } from '@/vdb/components/shared/configurable-operation-input.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { api } from '@/vdb/graphql/api.js';
-import {
-    configurableOperationDefFragment,
-    ConfigurableOperationDefFragment,
-} from '@/vdb/graphql/fragments.js';
+import { ConfigurableOperationSelector } from '@/vdb/components/shared/configurable-operation-selector.js';
+import { configurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
-import { Plus } from 'lucide-react';
 
 export const shippingEligibilityCheckersDocument = graphql(
     `
@@ -37,69 +23,14 @@ export function ShippingEligibilityCheckerSelector({
     value,
     onChange,
 }: ShippingEligibilityCheckerSelectorProps) {
-    const { data: checkersData } = useQuery({
-        queryKey: ['shippingEligibilityCheckers'],
-        queryFn: () => api.query(shippingEligibilityCheckersDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const checkers = checkersData?.shippingEligibilityCheckers;
-
-    const onCheckerSelected = (checker: ConfigurableOperationDefFragment) => {
-        const checkerDef = checkers?.find(c => c.code === checker.code);
-        if (!checkerDef) {
-            return;
-        }
-        onChange({
-            code: checker.code,
-            arguments: checkerDef.args.map(arg => ({
-                name: arg.name,
-                value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-            })),
-        });
-    };
-
-    const onOperationValueChange = (newVal: ConfigurableOperationInputType) => {
-        onChange(newVal);
-    };
-
-    const onOperationRemove = () => {
-        onChange(undefined);
-    };
-
-    const checkerDef = checkers?.find(c => c.code === value?.code);
-
     return (
-        <div className="flex flex-col gap-2 mt-4">
-            {value && checkerDef && (
-                <div className="flex flex-col gap-2">
-                    <ConfigurableOperationInput
-                        operationDefinition={checkerDef}
-                        value={value}
-                        onChange={value => onOperationValueChange(value)}
-                        onRemove={() => onOperationRemove()}
-                    />
-                </div>
-            )}
-            <DropdownMenu>
-                {!value && (
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="outline">
-                            <Plus />
-                            <Trans context="Add new promotion action">
-                                Select Shipping Eligibility Checker
-                            </Trans>
-                        </Button>
-                    </DropdownMenuTrigger>
-                )}
-                <DropdownMenuContent className="w-96">
-                    {checkers?.map(checker => (
-                        <DropdownMenuItem key={checker.code} onClick={() => onCheckerSelected(checker)}>
-                            {checker.description}
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
+        <ConfigurableOperationSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={shippingEligibilityCheckersDocument}
+            queryKey="shippingEligibilityCheckers"
+            dataPath="shippingEligibilityCheckers"
+            buttonText="Select Shipping Eligibility Checker"
+        />
     );
 }

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods_.$id.tsx

@@ -130,12 +130,14 @@ function ShippingMethodDetailPage() {
                             render={({ field }) => <Input {...field} />}
                         />
                     </DetailFormGrid>
-                    <TranslatableFormFieldWrapper
-                        control={form.control}
-                        name="description"
-                        label={<Trans>Description</Trans>}
-                        render={({ field }) => <Textarea {...field} />}
-                    />
+                    <div className="mb-6">
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="description"
+                            label={<Trans>Description</Trans>}
+                            render={({ field }) => <Textarea {...field} />}
+                        />
+                    </div>
                     <DetailFormGrid>
                         <FormFieldWrapper
                             control={form.control}

package/src/lib/components/data-input/combination-mode-input.tsx

@@ -0,0 +1,52 @@
+import { DataInputComponent } from '@/vdb/framework/component-registry/component-registry.js';
+import { Trans } from '@/vdb/lib/trans.js';
+
+export const CombinationModeInput: DataInputComponent = ({ value, onChange, position, ...props }) => {
+    const booleanValue = value === 'true' || value === true;
+
+    // Only show for items after the first one
+    const selectable = position !== undefined && position > 0;
+
+    const setCombinationModeAnd = () => {
+        onChange(true);
+    };
+
+    const setCombinationModeOr = () => {
+        onChange(false);
+    };
+
+    if (!selectable) {
+        return null;
+    }
+
+    return (
+        <div className="flex items-center justify-center -mt-4 -mb-4">
+            <div className="bg-muted border px-3 py-1.5 rounded-full flex gap-1.5 text-xs shadow-sm">
+                <button
+                    type="button"
+                    className={`px-2 py-0.5 rounded-full transition-colors ${
+                        booleanValue
+                            ? 'bg-primary text-background'
+                            : 'text-muted-foreground hover:bg-muted-foreground/10'
+                    }`}
+                    onClick={setCombinationModeAnd}
+                    {...props}
+                >
+                    <Trans>AND</Trans>
+                </button>
+                <button
+                    type="button"
+                    className={`px-2 py-0.5 rounded-full transition-colors ${
+                        !booleanValue
+                            ? 'bg-primary text-background'
+                            : 'text-muted-foreground hover:bg-muted-foreground/10'
+                    }`}
+                    onClick={setCombinationModeOr}
+                    {...props}
+                >
+                    <Trans>OR</Trans>
+                </button>
+            </div>
+        </div>
+    );
+};

package/src/lib/components/data-input/configurable-operation-list-input.tsx

@@ -0,0 +1,433 @@
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { ConfigArgType } from '@vendure/core';
+import { Plus, X } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
+import { Switch } from '../ui/switch.js';
+import { Textarea } from '../ui/textarea.js';
+import { DateTimeInput } from './datetime-input.js';
+
+export interface EnhancedListInputProps {
+    definition: ConfigurableOperationDefFragment['args'][number];
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}
+
+/**
+ * A dynamic array input component for configurable operation arguments that handle lists of values.
+ *
+ * This component allows users to add, edit, and remove multiple items from an array-type argument.
+ * Each item in the array is rendered using the appropriate input control based on the argument's
+ * type and UI configuration (e.g., text input, select dropdown, boolean switch, date picker).
+ *
+ * The component supports:
+ * - Adding new items with appropriate input controls
+ * - Editing existing items inline
+ * - Removing items from the array
+ * - Various data types: string, number, boolean, datetime, currency
+ * - Multiple UI components: select, textarea, currency input, etc.
+ * - Keyboard shortcuts (Enter to add items)
+ * - Read-only mode for display purposes
+ *
+ * Used primarily in configurable operations (promotions, shipping methods, payment methods)
+ * where an argument accepts multiple values, such as a list of product IDs, category codes,
+ * or discount amounts.
+ *
+ * @example
+ * // For a promotion condition that accepts multiple product category codes
+ * <EnhancedListInput
+ *   definition={argDefinition}
+ *   value='["electronics", "books", "clothing"]'
+ *   onChange={handleChange}
+ * />
+ */
+export function ConfigurableOperationListInput({
+    definition,
+    value,
+    onChange,
+    readOnly,
+}: Readonly<EnhancedListInputProps>) {
+    const [newItemValue, setNewItemValue] = useState('');
+
+    // Parse the current array value
+    const arrayValue = parseArrayValue(value);
+
+    const handleArrayChange = (newArray: string[]) => {
+        onChange(JSON.stringify(newArray));
+    };
+
+    const handleAddItem = () => {
+        if (newItemValue.trim()) {
+            const newArray = [...arrayValue, newItemValue.trim()];
+            handleArrayChange(newArray);
+            setNewItemValue('');
+        }
+    };
+
+    const handleRemoveItem = (index: number) => {
+        const newArray = arrayValue.filter((_, i) => i !== index);
+        handleArrayChange(newArray);
+    };
+
+    const handleUpdateItem = (index: number, newValue: string) => {
+        const newArray = arrayValue.map((item, i) => (i === index ? newValue : item));
+        handleArrayChange(newArray);
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleAddItem();
+        }
+    };
+
+    // Render individual item input based on the underlying type
+    const renderItemInput = (itemValue: string, index: number) => {
+        const argType = definition.type as ConfigArgType;
+        const uiComponent = (definition.ui as any)?.component;
+
+        const commonProps = {
+            value: itemValue,
+            onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+                handleUpdateItem(index, e.target.value),
+            disabled: readOnly,
+        };
+
+        switch (uiComponent) {
+            case 'boolean-form-input':
+                return (
+                    <Switch
+                        checked={itemValue === 'true'}
+                        onCheckedChange={checked => handleUpdateItem(index, checked.toString())}
+                        disabled={readOnly}
+                    />
+                );
+
+            case 'select-form-input': {
+                const options = (definition.ui as any)?.options || [];
+                return (
+                    <Select
+                        value={itemValue}
+                        onValueChange={val => handleUpdateItem(index, val)}
+                        disabled={readOnly}
+                    >
+                        <SelectTrigger>
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {options.map((option: any) => (
+                                <SelectItem key={option.value} value={option.value}>
+                                    {typeof option.label === 'string'
+                                        ? option.label
+                                        : option.label?.[0]?.value || option.value}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                );
+            }
+            case 'textarea-form-input':
+                return (
+                    <Textarea
+                        {...commonProps}
+                        placeholder="Enter text..."
+                        rows={2}
+                        className="bg-background"
+                    />
+                );
+
+            case 'date-form-input':
+                return (
+                    <DateTimeInput
+                        value={itemValue ? new Date(itemValue) : new Date()}
+                        onChange={val => handleUpdateItem(index, val.toISOString())}
+                        disabled={readOnly}
+                    />
+                );
+
+            case 'number-form-input': {
+                const ui = definition.ui as any;
+                const isFloat = argType === 'float';
+                return (
+                    <Input
+                        type="number"
+                        value={itemValue}
+                        onChange={e => handleUpdateItem(index, e.target.value)}
+                        disabled={readOnly}
+                        min={ui?.min}
+                        max={ui?.max}
+                        step={ui?.step || (isFloat ? 0.01 : 1)}
+                    />
+                );
+            }
+            case 'currency-form-input':
+                return (
+                    <div className="flex items-center">
+                        <span className="mr-2 text-sm text-muted-foreground">$</span>
+                        <Input
+                            type="number"
+                            value={itemValue}
+                            onChange={e => handleUpdateItem(index, e.target.value)}
+                            disabled={readOnly}
+                            min={0}
+                            step={1}
+                            className="flex-1"
+                        />
+                    </div>
+                );
+        }
+
+        // Fall back to type-based rendering
+        switch (argType) {
+            case 'boolean':
+                return (
+                    <Switch
+                        checked={itemValue === 'true'}
+                        onCheckedChange={checked => handleUpdateItem(index, checked.toString())}
+                        disabled={readOnly}
+                    />
+                );
+
+            case 'int':
+            case 'float': {
+                const isFloat = argType === 'float';
+                return (
+                    <Input
+                        type="number"
+                        value={itemValue}
+                        onChange={e => handleUpdateItem(index, e.target.value)}
+                        disabled={readOnly}
+                        step={isFloat ? 0.01 : 1}
+                    />
+                );
+            }
+            case 'datetime':
+                return (
+                    <DateTimeInput
+                        value={itemValue ? new Date(itemValue) : new Date()}
+                        onChange={val => handleUpdateItem(index, val.toISOString())}
+                        disabled={readOnly}
+                    />
+                );
+
+            default:
+                return <Input type="text" {...commonProps} placeholder="Enter value..." />;
+        }
+    };
+
+    // Render new item input (similar logic but for newItemValue)
+    const renderNewItemInput = () => {
+        const argType = definition.type as ConfigArgType;
+        const uiComponent = (definition.ui as any)?.component;
+
+        const commonProps = {
+            value: newItemValue,
+            onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+                setNewItemValue(e.target.value),
+            disabled: readOnly,
+            onKeyPress: handleKeyPress,
+        };
+
+        switch (uiComponent) {
+            case 'boolean-form-input': {
+                return (
+                    <Switch
+                        checked={newItemValue === 'true'}
+                        onCheckedChange={checked => setNewItemValue(checked.toString())}
+                        disabled={readOnly}
+                    />
+                );
+            }
+            case 'select-form-input': {
+                const options = (definition.ui as any)?.options || [];
+                return (
+                    <Select value={newItemValue} onValueChange={setNewItemValue} disabled={readOnly}>
+                        <SelectTrigger>
+                            <SelectValue placeholder="Select value..." />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {options.map((option: any) => (
+                                <SelectItem key={option.value} value={option.value}>
+                                    {typeof option.label === 'string'
+                                        ? option.label
+                                        : option.label?.[0]?.value || option.value}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                );
+            }
+            case 'textarea-form-input': {
+                return (
+                    <Textarea
+                        {...commonProps}
+                        placeholder="Enter text..."
+                        rows={2}
+                        className="bg-background"
+                    />
+                );
+            }
+            case 'date-form-input': {
+                return <DateTimeInput value={newItemValue} onChange={setNewItemValue} disabled={readOnly} />;
+            }
+            case 'number-form-input': {
+                const ui = definition.ui as any;
+                const isFloat = argType === 'float';
+                return (
+                    <Input
+                        type="number"
+                        value={newItemValue}
+                        onChange={e => setNewItemValue(e.target.value)}
+                        disabled={readOnly}
+                        min={ui?.min}
+                        max={ui?.max}
+                        step={ui?.step || (isFloat ? 0.01 : 1)}
+                        placeholder="Enter number..."
+                        onKeyPress={handleKeyPress}
+                        className="bg-background"
+                    />
+                );
+            }
+            case 'currency-form-input': {
+                return (
+                    <div className="flex items-center">
+                        <span className="mr-2 text-sm text-muted-foreground">$</span>
+                        <Input
+                            type="number"
+                            value={newItemValue}
+                            onChange={e => setNewItemValue(e.target.value)}
+                            disabled={readOnly}
+                            min={0}
+                            step={1}
+                            placeholder="Enter amount..."
+                            onKeyPress={handleKeyPress}
+                            className="flex-1 bg-background"
+                        />
+                    </div>
+                );
+            }
+        }
+
+        // Fall back to type-based rendering
+        switch (argType) {
+            case 'boolean':
+                return (
+                    <Switch
+                        checked={newItemValue === 'true'}
+                        onCheckedChange={checked => setNewItemValue(checked.toString())}
+                        disabled={readOnly}
+                    />
+                );
+            case 'int':
+            case 'float': {
+                const isFloat = argType === 'float';
+                return (
+                    <Input
+                        type="number"
+                        value={newItemValue}
+                        onChange={e => setNewItemValue(e.target.value)}
+                        disabled={readOnly}
+                        step={isFloat ? 0.01 : 1}
+                        placeholder="Enter number..."
+                        onKeyPress={handleKeyPress}
+                        className="bg-background"
+                    />
+                );
+            }
+            case 'datetime': {
+                return (
+                    <DateTimeInput
+                        value={newItemValue ? new Date(newItemValue) : new Date()}
+                        onChange={val => setNewItemValue(val.toISOString())}
+                        disabled={readOnly}
+                    />
+                );
+            }
+            default: {
+                return (
+                    <Input
+                        type="text"
+                        {...commonProps}
+                        placeholder="Enter value..."
+                        className="bg-background"
+                    />
+                );
+            }
+        }
+    };
+
+    if (readOnly) {
+        return (
+            <div className="space-y-2">
+                {arrayValue.map((item, index) => (
+                    <div key={index + item} className="flex items-center gap-2 p-2 bg-muted rounded-md">
+                        <span className="flex-1">{item}</span>
+                    </div>
+                ))}
+                {arrayValue.length === 0 && <div className="text-sm text-muted-foreground">No items</div>}
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-2">
+            {/* Existing items */}
+            {arrayValue.map((item, index) => (
+                <div key={index + item} className="flex items-center gap-2">
+                    <div className="flex-1">{renderItemInput(item, index)}</div>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleRemoveItem(index)}
+                        disabled={readOnly}
+                        type="button"
+                    >
+                        <X className="h-4 w-4" />
+                    </Button>
+                </div>
+            ))}
+
+            {/* Add new item */}
+            <div className="flex items-center gap-2 p-2 border border-dashed rounded-md">
+                <div className="flex-1">{renderNewItemInput()}</div>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleAddItem}
+                    disabled={readOnly || !newItemValue.trim()}
+                    type="button"
+                >
+                    <Plus className="h-4 w-4" />
+                </Button>
+            </div>
+
+            {arrayValue.length === 0 && (
+                <div className="text-sm text-muted-foreground">
+                    No items added yet. Use the input above to add items.
+                </div>
+            )}
+        </div>
+    );
+}
+
+function parseArrayValue(value: string): string[] {
+    if (!value) return [];
+
+    try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed.map(String) : [String(parsed)];
+    } catch {
+        // If not JSON, try comma-separated values
+        return value.includes(',')
+            ? value
+                  .split(',')
+                  .map(s => s.trim())
+                  .filter(Boolean)
+            : value
+              ? [value]
+              : [];
+    }
+}