@leandrosk/dashboard 3.5.5

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

@@ -0,0 +1,308 @@
+import { CombinationModeInput } from '@/vdb/components/data-input/combination-mode-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 } from '@/vdb/graphql/fragments.js';
+import { Trans } from '@lingui/react/macro';
+import { DefinedInitialDataOptions, useQuery, UseQueryOptions } from '@tanstack/react-query';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { Plus } from 'lucide-react';
+import { useCallback, useEffect, useRef } from '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;
+    /** Callback when validity of required args changes (all operations must be valid) */
+    onValidityChange?: (isValid: boolean) => void;
+}
+
+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,
+    onValidityChange,
+}: Readonly<ConfigurableOperationMultiSelectorProps>) {
+    // Track validity for each operation by code+index to handle reordering/removal.
+    // When operations change, we clear and let each ConfigurableOperationInput re-report.
+    const validityMapRef = useRef<Record<string, boolean>>({});
+    const prevValueRef = useRef(value);
+
+    // Create stable key for each operation (code + position)
+    const getOperationKey = (operation: ConfigurableOperationInputType, index: number) =>
+        `${operation.code}:${index}`;
+
+    const updateOperationValidity = useCallback(
+        (index: number, isValid: boolean) => {
+            const operation = value[index];
+            if (!operation) return;
+            const key = getOperationKey(operation, index);
+            validityMapRef.current[key] = isValid;
+            if (onValidityChange) {
+                const allValid =
+                    value.length === 0 ||
+                    value.every((op, i) => validityMapRef.current[getOperationKey(op, i)] !== false);
+                onValidityChange(allValid);
+            }
+        },
+        [onValidityChange, value],
+    );
+
+    // Reset validity map when operations array changes (add/remove/reorder)
+    useEffect(() => {
+        const prevCodes = prevValueRef.current.map(op => op.code).join(',');
+        const currCodes = value.map(op => op.code).join(',');
+        if (prevCodes !== currCodes) {
+            // Operations changed - clear map and let components re-report
+            validityMapRef.current = {};
+            // Temporarily report as valid until components re-validate
+            if (onValidityChange && value.length === 0) {
+                onValidityChange(true);
+            }
+        }
+        prevValueRef.current = value;
+    }, [value, onValidityChange]);
+
+    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() : arg.list ? '[]' : '',
+                })),
+            },
+        ]);
+    };
+
+    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">
+                                        <CombinationModeInput
+                                            value={
+                                                operation.arguments.find(arg => arg.name === 'combineWithAnd')
+                                                    ?.value ?? 'true'
+                                            }
+                                            onChange={(newValue: boolean | string) =>
+                                                onCombinationModeChange(index, newValue)
+                                            }
+                                            name={''}
+                                            ref={() => {}}
+                                            onBlur={() => {}}
+                                            position={index}
+                                        />
+                                    </div>
+                                ) : (
+                                    <div className="h-4" />
+                                )}
+                                <ConfigurableOperationInput
+                                    operationDefinition={operationDef}
+                                    value={operation}
+                                    onChange={value => onOperationValueChange(operation, value)}
+                                    onRemove={() => onOperationRemove(index)}
+                                    onValidityChange={isValid => updateOperationValidity(index, isValid)}
+                                />
+                            </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 max-h-[min(600px,50vh)] overflow-y-auto' : 'w-96 max-h-[min(600px,50vh)] overflow-y-auto'} 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,161 @@
+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 '@lingui/react/macro';
+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;
+    /** Callback when validity of required args changes */
+    onValidityChange?: (isValid: boolean) => void;
+}
+
+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',
+    onValidityChange,
+}: 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);
+        onValidityChange?.(true);
+    };
+
+    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={v => onOperationValueChange(v)}
+                        onRemove={() => onOperationRemove()}
+                        onValidityChange={onValidityChange}
+                    />
+                </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

@@ -0,0 +1,58 @@
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '@/vdb/components/ui/alert-dialog.js';
+import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
+
+export function ConfirmationDialog({
+                                       title,
+                                       description,
+                                       onConfirm,
+                                       children,
+                                       confirmText,
+                                       cancelText,
+                                   }: {
+    title: string;
+    description: string;
+    onConfirm: () => void;
+    confirmText?: string;
+    cancelText?: string;
+    children: React.ReactNode;
+}) {
+    const [open, setOpen] = useState(false);
+    return (
+        <AlertDialog open={open} onOpenChange={setOpen}>
+            <AlertDialogTrigger asChild onClick={() => setOpen(true)}>
+                {children}
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>{title}</AlertDialogTitle>
+                    <AlertDialogDescription>{description}</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel onClick={() => setOpen(false)}>
+                        {cancelText ?? <Trans>Cancel</Trans>}
+                    </AlertDialogCancel>
+                    <AlertDialogAction
+                        type="button"
+                        onClick={() => {
+                            onConfirm();
+                            setOpen(false);
+                        }}
+                    >
+                        {confirmText ?? <Trans>Continue</Trans>}
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}

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

@@ -0,0 +1,30 @@
+import { useCopyToClipboard } from '@uidotdev/usehooks';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+import { useState } from 'react';
+
+export function CopyableText({ text }: Readonly<{ text: string }>) {
+    const [copiedId, setCopiedId] = useState<string | null>(null);
+    const [, copy] = useCopyToClipboard();
+
+    const handleCopy = async (text: string, id: string) => {
+        await copy(text);
+        setCopiedId(id);
+        setTimeout(() => setCopiedId(null), 2000);
+    };
+
+    return (
+        <div className="flex items-center gap-2">
+            <div className="font-mono">{text}</div>
+            <button
+                onClick={() => handleCopy(text, 'page')}
+                className="p-1 hover:bg-muted rounded-md transition-colors"
+            >
+                {copiedId === 'page' ? (
+                    <CheckIcon className="h-4 w-4 text-green-500" />
+                ) : (
+                    <CopyIcon className="h-4 w-4" />
+                )}
+            </button>
+        </div>
+    );
+}

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

@@ -0,0 +1,108 @@
+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 '@lingui/react/macro';
+import { useQuery } from '@tanstack/react-query';
+import { Plus, Search } from 'lucide-react';
+import { useState } from 'react';
+
+const countryListDocument = graphql(`
+    query CountryList($options: CountryListOptions) {
+        countries(options: $options) {
+            items {
+                id
+                name
+                code
+            }
+            totalItems
+        }
+    }
+`);
+
+export interface Country {
+    id: string;
+    name: string;
+    code: string;
+}
+
+export interface CountrySelectorProps {
+    onSelect: (value: Country) => void;
+    label?: string | React.ReactNode;
+    readOnly?: boolean;
+}
+
+export function CountrySelector(props: CountrySelectorProps) {
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const { data, isLoading } = useQuery({
+        queryKey: ['countries', searchTerm],
+        queryFn: () =>
+            api.query(countryListDocument, {
+                options: {
+                    sort: { name: 'ASC' },
+                    filter: searchTerm
+                        ? {
+                              name: { contains: searchTerm },
+                              code: { contains: searchTerm },
+                          }
+                        : undefined,
+                    filterOperator: searchTerm ? 'OR' : undefined,
+                },
+            }),
+        staleTime: 1000 * 60 * 60, // 1 hour
+    });
+
+    const handleSearch = (value: string) => {
+        setSearchTerm(value);
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
+                    <Plus className="h-4 w-4" />
+                    {props.label ?? <Trans>Select country</Trans>}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-[350px]" align="start">
+                <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..."
+                            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>}
+                        </CommandEmpty>
+                        {data?.countries.items.map(country => (
+                            <CommandItem
+                                key={country.id}
+                                onSelect={() => {
+                                    props.onSelect(country);
+                                    setOpen(false);
+                                }}
+                                className="flex flex-col items-start"
+                            >
+                                <div className="font-medium">{country.name}</div>
+                                <div className="text-sm text-muted-foreground">{country.code}</div>
+                            </CommandItem>
+                        ))}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}