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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.3.8-master-202507260236",
+    "version": "3.3.8-master-202507300243",
     "type": "module",
     "repository": {
         "type": "git",
@@ -95,8 +95,8 @@
         "@types/react-dom": "^19.0.4",
         "@types/react-grid-layout": "^1.3.5",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.3.8-master-202507260236",
-        "@vendure/core": "^3.3.8-master-202507260236",
+        "@vendure/common": "^3.3.8-master-202507300243",
+        "@vendure/core": "^3.3.8-master-202507300243",
         "@vitejs/plugin-react": "^4.3.4",
         "acorn": "^8.11.3",
         "acorn-walk": "^8.3.2",
@@ -146,5 +146,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "083e73889906a155b1f3959815db713e557898c9"
+    "gitHead": "3679d74357c979aa9c60d8f8b575190723e2bb8f"
 }

package/src/app/routes/_authenticated/_collections/components/collection-contents-preview-table.tsx

@@ -61,7 +61,7 @@ export function CollectionContentsPreviewTable({
 
     return (
         <div>
-            <Alert>
+            <Alert className="mb-4">
                 <Eye className="h-4 w-4" />
                 <AlertTitle>Preview</AlertTitle>
                 <AlertDescription>

package/src/app/routes/_authenticated/_collections/components/collection-filters-selector.tsx

@@ -1,17 +1,5 @@
-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 { Separator } from '@/vdb/components/ui/separator.js';
-import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
+import { ConfigurableOperationMultiSelector } from '@/vdb/components/shared/configurable-operation-multi-selector.js';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
-import { Plus } from 'lucide-react';
 import { getCollectionFiltersQueryOptions } from '../collections.graphql.js';
 
 export interface CollectionFiltersSelectorProps {
@@ -20,72 +8,17 @@ export interface CollectionFiltersSelectorProps {
 }
 
 export function CollectionFiltersSelector({ value, onChange }: Readonly<CollectionFiltersSelectorProps>) {
-    const { data: filtersData } = useQuery(getCollectionFiltersQueryOptions);
-
-    const filters = filtersData?.collectionFilters;
-
-    const onFilterSelected = (filter: ConfigurableOperationDefFragment) => {
-        const filterDef = filters?.find(f => f.code === filter.code);
-        if (!filterDef) {
-            return;
-        }
-        onChange([
-            ...value,
-            {
-                code: filter.code,
-                arguments: filterDef.args.map(arg => ({
-                    name: arg.name,
-                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-                })),
-            },
-        ]);
-    };
-
-    const onOperationValueChange = (
-        filter: ConfigurableOperationInputType,
-        newVal: ConfigurableOperationInputType,
-    ) => {
-        onChange(value.map(f => (f.code === filter.code ? newVal : f)));
-    };
-
-    const onOperationRemove = (index: number) => {
-        onChange(value.filter((_, i) => i !== index));
-    };
-
     return (
-        <div className="flex flex-col gap-2 mt-4">
-            {(value ?? []).map((filter, index) => {
-                const filterDef = filters?.find(f => f.code === filter.code);
-                if (!filterDef) {
-                    return null;
-                }
-                return (
-                    <div key={index} className="flex flex-col gap-2">
-                        <ConfigurableOperationInput
-                            operationDefinition={filterDef}
-                            value={filter}
-                            onChange={value => onOperationValueChange(filter, value)}
-                            onRemove={() => onOperationRemove(index)}
-                        />
-                        <Separator className="my-2" />
-                    </div>
-                );
-            })}
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="outline">
-                        <Plus />
-                        <Trans context="Add new collection filter">Add condition</Trans>
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-96">
-                    {filters?.map(filter => (
-                        <DropdownMenuItem key={filter.code} onClick={() => onFilterSelected(filter)}>
-                            {filter.description}
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
+        <div className="mt-4">
+            <ConfigurableOperationMultiSelector
+                value={value}
+                onChange={onChange}
+                queryOptions={getCollectionFiltersQueryOptions}
+                queryKey="getCollectionFilters"
+                dataPath="collectionFilters"
+                buttonText="Add collection filter"
+                showEnhancedDropdown={false}
+            />
         </div>
     );
 }

package/src/app/routes/_authenticated/_payment-methods/components/payment-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 paymentEligibilityCheckersDocument = graphql(
     `
@@ -37,71 +23,15 @@ export function PaymentEligibilityCheckerSelector({
     value,
     onChange,
 }: PaymentEligibilityCheckerSelectorProps) {
-    const { data: checkersData } = useQuery({
-        queryKey: ['paymentMethodEligibilityCheckers'],
-        queryFn: () => api.query(paymentEligibilityCheckersDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const checkers = checkersData?.paymentMethodEligibilityCheckers;
-
-    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?.code && (
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="outline">
-                            <Plus />
-                            <Trans>Select Payment Eligibility Checker</Trans>
-                        </Button>
-                    </DropdownMenuTrigger>
-                )}
-                <DropdownMenuContent className="w-96">
-                    {checkers?.length ? (
-                        checkers?.map(checker => (
-                            <DropdownMenuItem key={checker.code} onClick={() => onCheckerSelected(checker)}>
-                                {checker.description}
-                            </DropdownMenuItem>
-                        ))
-                    ) : (
-                        <DropdownMenuItem>No checkers found</DropdownMenuItem>
-                    )}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
+        <ConfigurableOperationSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={paymentEligibilityCheckersDocument}
+            queryKey="paymentMethodEligibilityCheckers"
+            dataPath="paymentMethodEligibilityCheckers"
+            buttonText="Select Payment Eligibility Checker"
+            emptyText="No checkers found"
+        />
     );
 }

package/src/app/routes/_authenticated/_payment-methods/components/payment-handler-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 paymentHandlersDocument = graphql(
     `
@@ -34,67 +20,14 @@ interface PaymentHandlerSelectorProps {
 }
 
 export function PaymentHandlerSelector({ value, onChange }: Readonly<PaymentHandlerSelectorProps>) {
-    const { data: handlersData } = useQuery({
-        queryKey: ['paymentMethodHandlers'],
-        queryFn: () => api.query(paymentHandlersDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const handlers = handlersData?.paymentMethodHandlers;
-
-    const onHandlerSelected = (handler: ConfigurableOperationDefFragment) => {
-        const handlerDef = handlers?.find(h => h.code === handler.code);
-        if (!handlerDef) {
-            return;
-        }
-        onChange({
-            code: handler.code,
-            arguments: handlerDef.args.map(arg => ({
-                name: arg.name,
-                value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-            })),
-        });
-    };
-
-    const onOperationValueChange = (newVal: ConfigurableOperationInputType) => {
-        onChange(newVal);
-    };
-
-    const onOperationRemove = () => {
-        onChange(undefined);
-    };
-
-    const handlerDef = handlers?.find(h => h.code === value?.code);
-
     return (
-        <div className="flex flex-col gap-2 mt-4">
-            {value && handlerDef && (
-                <div className="flex flex-col gap-2">
-                    <ConfigurableOperationInput
-                        operationDefinition={handlerDef}
-                        value={value}
-                        onChange={value => onOperationValueChange(value)}
-                        onRemove={() => onOperationRemove()}
-                    />
-                </div>
-            )}
-            <DropdownMenu>
-                {!value?.code && (
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="outline">
-                            <Plus />
-                            <Trans>Select Payment Handler</Trans>
-                        </Button>
-                    </DropdownMenuTrigger>
-                )}
-                <DropdownMenuContent className="w-96">
-                    {handlers?.map(handler => (
-                        <DropdownMenuItem key={handler.code} onClick={() => onHandlerSelected(handler)}>
-                            {handler.description}
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
+        <ConfigurableOperationSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={paymentHandlersDocument}
+            queryKey="paymentMethodHandlers"
+            dataPath="paymentMethodHandlers"
+            buttonText="Select Payment Handler"
+        />
     );
 }

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

@@ -1,22 +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 { Separator } from '@/vdb/components/ui/separator.js';
-import { api } from '@/vdb/graphql/api.js';
-import {
-    configurableOperationDefFragment,
-    ConfigurableOperationDefFragment,
-} from '@/vdb/graphql/fragments.js';
+import { ConfigurableOperationMultiSelector } from '@/vdb/components/shared/configurable-operation-multi-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 promotionActionsDocument = graphql(
     `
@@ -35,76 +20,16 @@ interface PromotionActionsSelectorProps {
 }
 
 export function PromotionActionsSelector({ value, onChange }: Readonly<PromotionActionsSelectorProps>) {
-    const { data: actionsData } = useQuery({
-        queryKey: ['promotionActions'],
-        queryFn: () => api.query(promotionActionsDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const actions = actionsData?.promotionActions;
-
-    const onActionSelected = (action: ConfigurableOperationDefFragment) => {
-        const actionDef = actions?.find(a => a.code === action.code);
-        if (!actionDef) {
-            return;
-        }
-        onChange([
-            ...value,
-            {
-                code: action.code,
-                arguments: actionDef.args.map(arg => ({
-                    name: arg.name,
-                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-                })),
-            },
-        ]);
-    };
-
-    const onOperationValueChange = (
-        action: ConfigurableOperationInputType,
-        newVal: ConfigurableOperationInputType,
-    ) => {
-        onChange(value.map(a => (a.code === action.code ? newVal : a)));
-    };
-
-    const onOperationRemove = (index: number) => {
-        onChange(value.filter((_, i) => i !== index));
-    };
-
     return (
-        <div className="flex flex-col gap-2 mt-4">
-            {(value ?? []).map((action, index) => {
-                const actionDef = actions?.find(a => a.code === action.code);
-                if (!actionDef) {
-                    return null;
-                }
-                return (
-                    <div key={index} className="flex flex-col gap-2">
-                        <ConfigurableOperationInput
-                            operationDefinition={actionDef}
-                            value={action}
-                            onChange={value => onOperationValueChange(action, value)}
-                            onRemove={() => onOperationRemove(index)}
-                        />
-                        <Separator className="my-2" />
-                    </div>
-                );
-            })}
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="outline">
-                        <Plus />
-                        <Trans context="Add new promotion action">Add action</Trans>
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-96">
-                    {actions?.map(action => (
-                        <DropdownMenuItem key={action.code} onClick={() => onActionSelected(action)}>
-                            {action.description}
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
+        <ConfigurableOperationMultiSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={promotionActionsDocument}
+            queryKey="promotionActions"
+            dataPath="promotionActions"
+            buttonText="Add action"
+            dropdownTitle="Available Actions"
+            showEnhancedDropdown={true}
+        />
     );
 }

package/src/app/routes/_authenticated/_promotions/components/promotion-conditions-selector.tsx

@@ -1,22 +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 { Separator } from '@/vdb/components/ui/separator.js';
-import { api } from '@/vdb/graphql/api.js';
-import {
-    configurableOperationDefFragment,
-    ConfigurableOperationDefFragment,
-} from '@/vdb/graphql/fragments.js';
+import { ConfigurableOperationMultiSelector } from '@/vdb/components/shared/configurable-operation-multi-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 promotionConditionsDocument = graphql(
     `
@@ -35,76 +20,16 @@ interface PromotionConditionsSelectorProps {
 }
 
 export function PromotionConditionsSelector({ value, onChange }: Readonly<PromotionConditionsSelectorProps>) {
-    const { data: conditionsData } = useQuery({
-        queryKey: ['promotionConditions'],
-        queryFn: () => api.query(promotionConditionsDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const conditions = conditionsData?.promotionConditions;
-
-    const onConditionSelected = (condition: ConfigurableOperationDefFragment) => {
-        const conditionDef = conditions?.find(c => c.code === condition.code);
-        if (!conditionDef) {
-            return;
-        }
-        onChange([
-            ...value,
-            {
-                code: condition.code,
-                arguments: conditionDef.args.map(arg => ({
-                    name: arg.name,
-                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-                })),
-            },
-        ]);
-    };
-
-    const onOperationValueChange = (
-        condition: ConfigurableOperationInputType,
-        newVal: ConfigurableOperationInputType,
-    ) => {
-        onChange(value.map(c => (c.code === condition.code ? newVal : c)));
-    };
-
-    const onOperationRemove = (index: number) => {
-        onChange(value.filter((_, i) => i !== index));
-    };
-
     return (
-        <div className="flex flex-col gap-2 mt-4">
-            {(value ?? []).map((condition, index) => {
-                const conditionDef = conditions?.find(c => c.code === condition.code);
-                if (!conditionDef) {
-                    return null;
-                }
-                return (
-                    <div key={index} className="flex flex-col gap-2">
-                        <ConfigurableOperationInput
-                            operationDefinition={conditionDef}
-                            value={condition}
-                            onChange={value => onOperationValueChange(condition, value)}
-                            onRemove={() => onOperationRemove(index)}
-                        />
-                        <Separator className="my-2" />
-                    </div>
-                );
-            })}
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="outline">
-                        <Plus />
-                        <Trans context="Add new promotion condition">Add condition</Trans>
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-96">
-                    {conditions?.map(condition => (
-                        <DropdownMenuItem key={condition.code} onClick={() => onConditionSelected(condition)}>
-                            {condition.description}
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
+        <ConfigurableOperationMultiSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={promotionConditionsDocument}
+            queryKey="promotionConditions"
+            dataPath="promotionConditions"
+            buttonText="Add condition"
+            dropdownTitle="Available Conditions"
+            showEnhancedDropdown={true}
+        />
     );
 }

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-calculator-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 shippingCalculatorsDocument = graphql(
     `
@@ -34,70 +20,14 @@ interface ShippingCalculatorSelectorProps {
 }
 
 export function ShippingCalculatorSelector({ value, onChange }: Readonly<ShippingCalculatorSelectorProps>) {
-    const { data: calculatorsData } = useQuery({
-        queryKey: ['shippingCalculators'],
-        queryFn: () => api.query(shippingCalculatorsDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const calculators = calculatorsData?.shippingCalculators;
-
-    const onCalculatorSelected = (calculator: ConfigurableOperationDefFragment) => {
-        const calculatorDef = calculators?.find(c => c.code === calculator.code);
-        if (!calculatorDef) {
-            return;
-        }
-        onChange({
-            code: calculator.code,
-            arguments: calculatorDef.args.map(arg => ({
-                name: arg.name,
-                value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-            })),
-        });
-    };
-
-    const onOperationValueChange = (newVal: ConfigurableOperationInputType) => {
-        onChange(newVal);
-    };
-
-    const onOperationRemove = () => {
-        onChange(undefined);
-    };
-
-    const calculatorDef = calculators?.find(c => c.code === value?.code);
-
     return (
-        <div className="flex flex-col gap-2 mt-4">
-            {value && calculatorDef && (
-                <div className="flex flex-col gap-2">
-                    <ConfigurableOperationInput
-                        operationDefinition={calculatorDef}
-                        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 Calculator</Trans>
-                        </Button>
-                    </DropdownMenuTrigger>
-                )}
-                <DropdownMenuContent className="w-96">
-                    {calculators?.map(calculator => (
-                        <DropdownMenuItem
-                            key={calculator.code}
-                            onClick={() => onCalculatorSelected(calculator)}
-                        >
-                            {calculator.description}
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
+        <ConfigurableOperationSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={shippingCalculatorsDocument}
+            queryKey="shippingCalculators"
+            dataPath="shippingCalculators"
+            buttonText="Select Shipping Calculator"
+        />
     );
 }