@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/lib/components/shared/configurable-operation-multi-selector.tsx

@@ -0,0 +1,260 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { InputComponent } from '@/vdb/framework/component-registry/dynamic-component.js';
+import { api } from '@/vdb/graphql/api.js';
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { DefinedInitialDataOptions, useQuery, UseQueryOptions } from '@tanstack/react-query';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { Plus } from 'lucide-react';
+import { ConfigurableOperationInput } from './configurable-operation-input.js';
+
+/**
+ * Props interface for ConfigurableOperationMultiSelector component
+ */
+export interface ConfigurableOperationMultiSelectorProps {
+    /** Array of currently selected configurable operations */
+    value: ConfigurableOperationInputType[];
+    /** Callback function called when the selection changes */
+    onChange: (value: ConfigurableOperationInputType[]) => void;
+    /** GraphQL document for querying available operations (alternative to queryOptions) */
+    queryDocument?: any;
+    /** Pre-configured query options for more complex queries (alternative to queryDocument) */
+    queryOptions?: UseQueryOptions<any> | DefinedInitialDataOptions<any>;
+    /** Unique key for the query cache */
+    queryKey: string;
+    /** Dot-separated path to extract operations from query result (e.g., "promotionConditions") */
+    dataPath: string;
+    /** Text to display on the add button */
+    buttonText: string;
+    /** Title to show at the top of the dropdown menu (only when showEnhancedDropdown is true) */
+    dropdownTitle?: string;
+    /** Text to display when no operations are available (defaults to "No options found") */
+    emptyText?: string;
+    /**
+     * Controls the dropdown display style:
+     * - true: Enhanced dropdown with larger width (w-80), section title, operation descriptions + codes
+     * - false: Simple dropdown with standard width (w-96), just operation descriptions
+     *
+     * Enhanced style is used by promotion conditions/actions for better UX with complex operations.
+     * Simple style is used by collection filters for a cleaner, more compact appearance.
+     */
+    showEnhancedDropdown?: boolean;
+}
+
+type QueryData = {
+    [key: string]: ConfigurableOperationDefFragment[];
+};
+
+/**
+ * ConfigurableOperationMultiSelector - A reusable component for selecting multiple configurable operations
+ *
+ * This component provides a standardized interface for selecting multiple configurable operations such as:
+ * - Collection filters
+ * - Promotion conditions
+ * - Promotion actions
+ *
+ * Features:
+ * - Displays all selected operations with their configuration forms
+ * - Provides a dropdown to add new operations from available options
+ * - Handles individual operation updates and removals
+ * - Supports position-based combination mode for operations
+ * - Flexible query patterns (direct document or pre-configured options)
+ * - Two dropdown styles: enhanced (with operation codes) or simple
+ *
+ * @example
+ * ```tsx
+ * // Enhanced dropdown style (promotions)
+ * <ConfigurableOperationMultiSelector
+ *   value={conditions}
+ *   onChange={setConditions}
+ *   queryDocument={promotionConditionsDocument}
+ *   queryKey="promotionConditions"
+ *   dataPath="promotionConditions"
+ *   buttonText="Add condition"
+ *   dropdownTitle="Available Conditions"
+ *   showEnhancedDropdown={true}
+ * />
+ *
+ * // Simple dropdown style (collections)
+ * <ConfigurableOperationMultiSelector
+ *   value={filters}
+ *   onChange={setFilters}
+ *   queryOptions={getCollectionFiltersQueryOptions}
+ *   queryKey="getCollectionFilters"
+ *   dataPath="collectionFilters"
+ *   buttonText="Add collection filter"
+ *   showEnhancedDropdown={false}
+ * />
+ * ```
+ */
+export function ConfigurableOperationMultiSelector({
+    value,
+    onChange,
+    queryDocument,
+    queryOptions,
+    queryKey,
+    dataPath,
+    buttonText,
+    dropdownTitle,
+    emptyText = 'No options found',
+    showEnhancedDropdown = true,
+}: Readonly<ConfigurableOperationMultiSelectorProps>) {
+    const { data } = useQuery<QueryData>(
+        queryOptions || {
+            queryKey: [queryKey],
+            queryFn: () => api.query(queryDocument),
+            staleTime: 1000 * 60 * 60 * 5,
+        },
+    );
+
+    // Extract operations from the data using the provided path
+    const operations = dataPath.split('.').reduce<any>((obj, key) => {
+        if (obj && typeof obj === 'object') {
+            return obj[key];
+        }
+        return undefined;
+    }, data) as ConfigurableOperationDefFragment[] | undefined;
+
+    const onOperationSelected = (operation: ConfigurableOperationDefFragment) => {
+        const operationDef = operations?.find(
+            (op: ConfigurableOperationDefFragment) => op.code === operation.code,
+        );
+        if (!operationDef) {
+            return;
+        }
+        onChange([
+            ...value,
+            {
+                code: operation.code,
+                arguments: operationDef.args.map(arg => ({
+                    name: arg.name,
+                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+                })),
+            },
+        ]);
+    };
+
+    const onOperationValueChange = (
+        operation: ConfigurableOperationInputType,
+        newVal: ConfigurableOperationInputType,
+    ) => {
+        onChange(value.map(op => (op.code === operation.code ? newVal : op)));
+    };
+
+    const onOperationRemove = (index: number) => {
+        onChange(value.filter((_, i) => i !== index));
+    };
+
+    const onCombinationModeChange = (index: number, newValue: boolean | string) => {
+        const updatedValue = [...value];
+        const operation = updatedValue[index];
+        if (operation) {
+            const updatedOperation = {
+                ...operation,
+                arguments: operation.arguments.map(arg =>
+                    arg.name === 'combineWithAnd' ? { ...arg, value: newValue.toString() } : arg,
+                ),
+            };
+            updatedValue[index] = updatedOperation;
+            onChange(updatedValue);
+        }
+    };
+
+    const hasOperations = value && value.length > 0;
+
+    return (
+        <div className="space-y-4">
+            {hasOperations && (
+                <div className="space-y-0">
+                    {value.map((operation, index) => {
+                        const operationDef = operations?.find(
+                            (op: ConfigurableOperationDefFragment) => op.code === operation.code,
+                        );
+                        if (!operationDef) {
+                            return null;
+                        }
+                        const hasCombinationMode = operation.arguments.find(arg => arg.name === 'combineWithAnd');
+                        return (
+                            <div key={index + operation.code}>
+                                {index > 0 && hasCombinationMode ? (
+                                    <div className="my-2">
+                                        <InputComponent
+                                            id="vendure:combinationModeInput"
+                                            value={
+                                                operation.arguments.find(arg => arg.name === 'combineWithAnd')
+                                                    ?.value ?? 'true'
+                                            }
+                                            onChange={(newValue: boolean | string) =>
+                                                onCombinationModeChange(index, newValue)
+                                            }
+                                            position={index}
+                                        />
+                                    </div>
+                                ) : (
+                                    <div className="h-4" />
+                                )}
+                                <ConfigurableOperationInput
+                                    operationDefinition={operationDef}
+                                    value={operation}
+                                    onChange={value => onOperationValueChange(operation, value)}
+                                    onRemove={() => onOperationRemove(index)}
+                                    position={index}
+                                />
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+
+            <div className={hasOperations ? 'pt-2' : ''}>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="outline" className="w-full sm:w-auto">
+                            <Plus className="h-4 w-4" />
+                            <Trans>{buttonText}</Trans>
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent className={showEnhancedDropdown ? 'w-80' : 'w-96'} align="start">
+                        {showEnhancedDropdown && dropdownTitle && (
+                            <div className="px-2 py-1.5 text-sm font-medium text-muted-foreground">
+                                {dropdownTitle}
+                            </div>
+                        )}
+                        {operations?.length ? (
+                            operations.map((operation: ConfigurableOperationDefFragment) => (
+                                <DropdownMenuItem
+                                    key={operation.code}
+                                    onClick={() => onOperationSelected(operation)}
+                                    className={
+                                        showEnhancedDropdown
+                                            ? 'flex flex-col items-start py-3 cursor-pointer'
+                                            : undefined
+                                    }
+                                >
+                                    {showEnhancedDropdown ? (
+                                        <>
+                                            <div className="font-medium text-sm">{operation.description}</div>
+                                            <div className="text-xs text-muted-foreground font-mono mt-1">
+                                                {operation.code}
+                                            </div>
+                                        </>
+                                    ) : (
+                                        operation.description
+                                    )}
+                                </DropdownMenuItem>
+                            ))
+                        ) : (
+                            <DropdownMenuItem>{emptyText}</DropdownMenuItem>
+                        )}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+        </div>
+    );
+}

package/src/lib/components/shared/configurable-operation-selector.tsx

@@ -0,0 +1,156 @@
+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 } from '@/vdb/graphql/fragments.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';
+import { ConfigurableOperationInput } from './configurable-operation-input.js';
+
+/**
+ * Props interface for ConfigurableOperationSelector component
+ */
+export interface ConfigurableOperationSelectorProps {
+    /** Current selected configurable operation value */
+    value: ConfigurableOperationInputType | undefined;
+    /** Callback function called when the selection changes */
+    onChange: (value: ConfigurableOperationInputType | undefined) => void;
+    /** GraphQL document for querying available operations */
+    queryDocument: any;
+    /** Unique key for the query cache */
+    queryKey: string;
+    /** Dot-separated path to extract operations from query result (e.g., "paymentMethodHandlers") */
+    dataPath: string;
+    /** Text to display on the selection button */
+    buttonText: string;
+    /** Text to display when no operations are available (defaults to "No options found") */
+    emptyText?: string;
+}
+
+type QueryData = {
+    [key: string]: {
+        [key: string]: ConfigurableOperationDefFragment[];
+    };
+};
+
+/**
+ * ConfigurableOperationSelector - A reusable component for selecting a single configurable operation
+ * 
+ * This component provides a standardized interface for selecting configurable operations such as:
+ * - Payment method handlers
+ * - Payment eligibility checkers  
+ * - Shipping calculators
+ * - Shipping eligibility checkers
+ * 
+ * Features:
+ * - Displays the selected operation with its configuration form
+ * - Provides a dropdown to select from available operations
+ * - Handles operation selection with default argument values
+ * - Supports removal of selected operations
+ * 
+ * @example
+ * ```tsx
+ * <ConfigurableOperationSelector
+ *   value={selectedHandler}
+ *   onChange={setSelectedHandler}
+ *   queryDocument={paymentHandlersDocument}
+ *   queryKey="paymentMethodHandlers"
+ *   dataPath="paymentMethodHandlers"
+ *   buttonText="Select Payment Handler"
+ * />
+ * ```
+ */
+export function ConfigurableOperationSelector({
+    value,
+    onChange,
+    queryDocument,
+    queryKey,
+    dataPath,
+    buttonText,
+    emptyText = 'No options found',
+}: Readonly<ConfigurableOperationSelectorProps>) {
+    const { data } = useQuery<QueryData>({
+        queryKey: [queryKey],
+        queryFn: () => api.query(queryDocument),
+        staleTime: 1000 * 60 * 60 * 5,
+    });
+
+    // Extract operations from the data using the provided path
+    const operations = dataPath.split('.').reduce<any>((obj, key) => {
+        if (obj && typeof obj === 'object') {
+            return obj[key];
+        }
+        return undefined;
+    }, data) as ConfigurableOperationDefFragment[] | undefined;
+
+    const onOperationSelected = (operation: ConfigurableOperationDefFragment) => {
+        const operationDef = operations?.find(
+            (op: ConfigurableOperationDefFragment) => op.code === operation.code,
+        );
+        if (!operationDef) {
+            return;
+        }
+        onChange({
+            code: operation.code,
+            arguments: operationDef.args.map(arg => ({
+                name: arg.name,
+                value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+            })),
+        });
+    };
+
+    const onOperationValueChange = (newVal: ConfigurableOperationInputType) => {
+        onChange(newVal);
+    };
+
+    const onOperationRemove = () => {
+        onChange(undefined);
+    };
+
+    const operationDef = operations?.find((op: ConfigurableOperationDefFragment) => op.code === value?.code);
+
+    return (
+        <div className="flex flex-col gap-2 mt-4">
+            {value && operationDef && (
+                <div className="flex flex-col gap-2">
+                    <ConfigurableOperationInput
+                        operationDefinition={operationDef}
+                        value={value}
+                        onChange={value => onOperationValueChange(value)}
+                        onRemove={() => onOperationRemove()}
+                    />
+                </div>
+            )}
+            <DropdownMenu>
+                {!value?.code && (
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="outline" className="w-fit">
+                            <Plus />
+                            <Trans>{buttonText}</Trans>
+                        </Button>
+                    </DropdownMenuTrigger>
+                )}
+                <DropdownMenuContent className="w-96">
+                    {operations?.length ? (
+                        operations.map((operation: ConfigurableOperationDefFragment) => (
+                            <DropdownMenuItem
+                                key={operation.code}
+                                onClick={() => onOperationSelected(operation)}
+                            >
+                                {operation.description}
+                            </DropdownMenuItem>
+                        ))
+                    ) : (
+                        <DropdownMenuItem>{emptyText}</DropdownMenuItem>
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

package/src/lib/components/shared/confirmation-dialog.tsx

@@ -8,8 +8,8 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
     AlertDialogTrigger,
-} from '@/components/ui/alert-dialog.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/alert-dialog.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useState } from 'react';
 
 export function ConfirmationDialog({

package/src/lib/components/shared/copyable-text.tsx

@@ -1,9 +1,8 @@
 import { useCopyToClipboard } from '@uidotdev/usehooks';
-import { CopyIcon } from 'lucide-react';
+import { CheckIcon, CopyIcon } from 'lucide-react';
 import { useState } from 'react';
-import { CheckIcon } from 'lucide-react';
 
-export function CopyableText({ text }: { text: string }) {
+export function CopyableText({ text }: Readonly<{ text: string }>) {
     const [copiedId, setCopiedId] = useState<string | null>(null);
     const [, copy] = useCopyToClipboard();
 
@@ -15,7 +14,7 @@ export function CopyableText({ text }: { text: string }) {
 
     return (
         <div className="flex items-center gap-2">
-            <div className="font-mono text-sm">{text}</div>
+            <div className="font-mono">{text}</div>
             <button
                 onClick={() => handleCopy(text, 'page')}
                 className="p-1 hover:bg-muted rounded-md transition-colors"

package/src/lib/components/shared/country-selector.tsx

@@ -1,9 +1,15 @@
-import { Button } from '@/components/ui/button.js';
-import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 import { Plus, Search } from 'lucide-react';
 import { useState } from 'react';
@@ -43,10 +49,12 @@ export function CountrySelector(props: CountrySelectorProps) {
             api.query(countryListDocument, {
                 options: {
                     sort: { name: 'ASC' },
-                    filter: searchTerm ? {
-                        name: { contains: searchTerm },
-                        code: { contains: searchTerm },
-                    } : undefined,
+                    filter: searchTerm
+                        ? {
+                              name: { contains: searchTerm },
+                              code: { contains: searchTerm },
+                          }
+                        : undefined,
                     filterOperator: searchTerm ? 'OR' : undefined,
                 },
             }),
@@ -69,19 +77,15 @@ export function CountrySelector(props: CountrySelectorProps) {
                 <Command shouldFilter={false}>
                     <div className="flex items-center border-b px-3">
                         <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-                        <CommandInput 
-                            placeholder="Search countries..." 
+                        <CommandInput
+                            placeholder="Search countries..."
                             onValueChange={handleSearch}
                             className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
                         />
                     </div>
                     <CommandList>
                         <CommandEmpty>
-                            {isLoading ? (
-                                <Trans>Loading...</Trans>
-                            ) : (
-                                <Trans>No countries found</Trans>
-                            )}
+                            {isLoading ? <Trans>Loading...</Trans> : <Trans>No countries found</Trans>}
                         </CommandEmpty>
                         {data?.countries.items.map(country => (
                             <CommandItem
@@ -102,4 +106,3 @@ export function CountrySelector(props: CountrySelectorProps) {
         </Popover>
     );
 }
-

package/src/lib/components/shared/currency-selector.tsx

@@ -1,9 +1,9 @@
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { CurrencyCode } from '@/constants.js';
+import { CurrencyCode } from '@/vdb/constants.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { MultiSelect } from './multi-select.js';
-import { useLingui } from '@/lib/trans.js';
 
-export interface CurrencySelectorProps<T extends boolean> {    
+export interface CurrencySelectorProps<T extends boolean> {
     value: T extends true ? string[] : string;
     onChange: (value: T extends true ? string[] : string) => void;
     multiple?: T;
@@ -17,7 +17,7 @@ export function CurrencySelector<T extends boolean>(props: CurrencySelectorProps
 
     const items = (availableCurrencyCodes ?? Object.values(CurrencyCode)).map(currencyCode => ({
         value: currencyCode,
-        label: formatCurrencyName(currencyCode)
+        label: formatCurrencyName(currencyCode),
     }));
 
     return (