@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.1-master-202508011655

package/src/app/routes/_authenticated/_roles/components/permissions-grid.tsx

@@ -3,13 +3,13 @@ import {
     AccordionContent,
     AccordionItem,
     AccordionTrigger,
-} from "@/components/ui/accordion.js";
-import { Button } from '@/components/ui/button.js';
-import { Switch } from '@/components/ui/switch.js';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip.js';
-import { useGroupedPermissions } from '@/hooks/use-grouped-permissions.js';
-import { ServerConfig } from '@/providers/server-config.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/accordion.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { useGroupedPermissions } from '@/vdb/hooks/use-grouped-permissions.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { ServerConfig } from '@/vdb/providers/server-config.js';
 import { useState } from 'react';
 
 interface PermissionsGridProps {
@@ -18,7 +18,7 @@ interface PermissionsGridProps {
     readonly?: boolean;
 }
 
-export function PermissionsGrid({ value, onChange, readonly = false }: PermissionsGridProps) {
+export function PermissionsGrid({ value, onChange, readonly = false }: Readonly<PermissionsGridProps>) {
     const { i18n } = useLingui();
     const groupedPermissions = useGroupedPermissions();
 
@@ -41,24 +41,25 @@ export function PermissionsGrid({ value, onChange, readonly = false }: Permissio
 
     // Get default expanded sections based on which ones have active permissions
     const defaultExpandedSections = groupedPermissions
-        .map((section) => ({
+        .map(section => ({
             section,
             hasActivePermissions: section.permissions.some(permission => value.includes(permission.name)),
         }))
         .filter(({ hasActivePermissions }) => hasActivePermissions)
         .map(({ section }) => section.id);
-    
+
     const [accordionValue, setAccordionValue] = useState<string[]>(defaultExpandedSections);
 
     return (
         <div className="w-full">
-            <Accordion type="multiple" value={accordionValue.length ? accordionValue : defaultExpandedSections} onValueChange={setAccordionValue} className="space-y-4">
+            <Accordion
+                type="multiple"
+                value={accordionValue.length ? accordionValue : defaultExpandedSections}
+                onValueChange={setAccordionValue}
+                className="space-y-4"
+            >
                 {groupedPermissions.map((section, index) => (
-                    <AccordionItem
-                        key={index}
-                        value={section.id}
-                        className="border rounded-lg px-6"
-                    >
+                    <AccordionItem key={index} value={section.id} className="border rounded-lg px-6">
                         <AccordionTrigger className="hover:no-underline">
                             <div className="flex flex-col items-start gap-1 text-sm py-2">
                                 <div>{i18n.t(section.label)}</div>
@@ -94,7 +95,10 @@ export function PermissionsGrid({ value, onChange, readonly = false }: Permissio
                                             <TooltipProvider>
                                                 <Tooltip>
                                                     <TooltipTrigger asChild>
-                                                        <label htmlFor={permission.name} className="text-sm whitespace-nowrap">
+                                                        <label
+                                                            htmlFor={permission.name}
+                                                            className="text-sm whitespace-nowrap"
+                                                        >
                                                             {i18n.t(permission.name)}
                                                         </label>
                                                     </TooltipTrigger>

package/src/app/routes/_authenticated/_roles/components/role-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteRolesDocument } from '../roles.graphql.js';
+
+export const DeleteRolesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteRolesDocument}
+            entityName="roles"
+            requiredPermissions={['DeleteAdministrator']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_roles/roles.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const roleItemFragment = graphql(`
     fragment RoleItem on Role {
@@ -65,3 +65,12 @@ export const deleteRoleDocument = graphql(`
         }
     }
 `);
+
+export const deleteRolesDocument = graphql(`
+    mutation DeleteRoles($ids: [ID!]!) {
+        deleteRoles(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_roles/roles.tsx

@@ -1,16 +1,17 @@
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { RoleCodeLabel } from '@/components/shared/role-code-label.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
-import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/constants.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { RoleCodeLabel } from '@/vdb/components/shared/role-code-label.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/vdb/constants.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { LayersIcon, PlusIcon } from 'lucide-react';
 import { ExpandablePermissions } from './components/expandable-permissions.js';
+import { DeleteRolesBulkAction } from './components/role-bulk-actions.js';
 import { deleteRoleDocument, roleListQuery } from './roles.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_roles/roles')({
@@ -80,6 +81,12 @@ function RoleListPage() {
                     },
                 },
             }}
+            bulkActions={[
+                {
+                    component: DeleteRolesBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateAdministrator']}>

package/src/app/routes/_authenticated/_roles/roles_.$id.tsx

@@ -1,10 +1,10 @@
-import { ChannelSelector } from '@/components/shared/channel-selector.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { ChannelSelector } from '@/vdb/components/shared/channel-selector.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     DetailFormGrid,
     Page,
@@ -13,18 +13,21 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { PermissionsGrid } from './components/permissions-grid.js';
 import { createRoleDocument, roleDetailDocument, updateRoleDocument } from './roles.graphql.js';
 
+const pageId = 'role-detail';
+
 export const Route = createFileRoute('/_authenticated/_roles/roles_/$id')({
     component: RoleDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: roleDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -43,6 +46,7 @@ function RoleDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: roleDetailDocument,
         createDocument: createRoleDocument,
         updateDocument: updateRoleDocument,
@@ -71,7 +75,7 @@ function RoleDetailPage() {
     });
 
     return (
-        <Page pageId="role-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New role</Trans> : (entity?.description ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_sellers/components/seller-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteSellersDocument } from '../sellers.graphql.js';
+
+export const DeleteSellersBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteSellersDocument}
+            entityName="sellers"
+            requiredPermissions={['DeleteSeller']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_sellers/sellers.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const sellerItemFragment = graphql(`
     fragment SellerItem on Seller {
@@ -59,3 +59,12 @@ export const deleteSellerDocument = graphql(`
         }
     }
 `);
+
+export const deleteSellersDocument = graphql(`
+    mutation DeleteSellers($ids: [ID!]!) {
+        deleteSellers(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_sellers/sellers.tsx

@@ -1,11 +1,12 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import { DeleteSellersBulkAction } from './components/seller-bulk-actions.js';
 import { deleteSellerDocument, sellerListQuery } from './sellers.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_sellers/sellers')({
@@ -35,6 +36,12 @@ function SellerListPage() {
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
             }}
+            bulkActions={[
+                {
+                    component: DeleteSellersBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateSeller']}>

package/src/app/routes/_authenticated/_sellers/sellers_.$id.tsx

@@ -1,9 +1,9 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     Page,
@@ -12,17 +12,20 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { createSellerDocument, sellerDetailDocument, updateSellerDocument } from './sellers.graphql.js';
 
+const pageId = 'seller-detail';
+
 export const Route = createFileRoute('/_authenticated/_sellers/sellers_/$id')({
     component: SellerDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: sellerDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/sellers', label: 'Sellers' },
@@ -38,7 +41,8 @@ function SellerDetailPage() {
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { i18n } = useLingui();
 
-    const { form, submitHandler, entity, isPending } = useDetailPage({
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: sellerDetailDocument,
         createDocument: createSellerDocument,
         updateDocument: updateSellerDocument,
@@ -54,7 +58,7 @@ function SellerDetailPage() {
             toast(i18n.t('Successfully updated seller'));
             form.reset(form.getValues());
             if (creatingNewEntity) {
-                await navigate({ to: `../${data?.id}`, from: Route.id });
+                await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
@@ -65,7 +69,7 @@ function SellerDetailPage() {
     });
 
     return (
-        <Page pageId="seller-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New seller</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_shipping-methods/components/fulfillment-handler-selector.tsx

@@ -1,7 +1,7 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { api } from '@/graphql/api.js';
-import { configurableOperationDefFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { api } from '@/vdb/graphql/api.js';
+import { configurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 import { useQuery } from '@tanstack/react-query';
 
 export const fulfillmentHandlersDocument = graphql(
@@ -20,8 +20,8 @@ interface FulfillmentHandlerSelectorProps {
     onChange: (value: string | undefined) => void;
 }
 
-export function FulfillmentHandlerSelector({ value, onChange }: FulfillmentHandlerSelectorProps) {
-    const { data: fulfillmentHandlersData } = useQuery({    
+export function FulfillmentHandlerSelector({ value, onChange }: Readonly<FulfillmentHandlerSelectorProps>) {
+    const { data: fulfillmentHandlersData } = useQuery({
         queryKey: ['fulfillmentHandlers'],
         queryFn: () => api.query(fulfillmentHandlersDocument),
         staleTime: 1000 * 60 * 60 * 5,

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

@@ -1,18 +1,7 @@
-import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
-import { Button } from '@/components/ui/button.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { api } from '@/graphql/api.js';
-import { configurableOperationDefFragment, ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
+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 { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
-import { Plus } from 'lucide-react';
 
 export const shippingCalculatorsDocument = graphql(
     `
@@ -30,72 +19,15 @@ interface ShippingCalculatorSelectorProps {
     onChange: (value: ConfigurableOperationInputType | undefined) => void;
 }
 
-export function ShippingCalculatorSelector({ value, onChange }: 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);
-
+export function ShippingCalculatorSelector({ value, onChange }: Readonly<ShippingCalculatorSelectorProps>) {
     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"
+        />
     );
 }

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

@@ -1,18 +1,7 @@
-import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
-import { Button } from '@/components/ui/button.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { api } from '@/graphql/api.js';
-import { configurableOperationDefFragment, ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
+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 { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
-import { Plus } from 'lucide-react';
 
 export const shippingEligibilityCheckersDocument = graphql(
     `
@@ -30,72 +19,18 @@ interface ShippingEligibilityCheckerSelectorProps {
     onChange: (value: ConfigurableOperationInputType | undefined) => void;
 }
 
-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);
-
+export function ShippingEligibilityCheckerSelector({
+    value,
+    onChange,
+}: ShippingEligibilityCheckerSelectorProps) {
     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/components/shipping-method-bulk-actions.tsx

@@ -0,0 +1,61 @@
+import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
+import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+
+import {
+    assignShippingMethodsToChannelDocument,
+    deleteShippingMethodsDocument,
+    removeShippingMethodsFromChannelDocument,
+} from '../shipping-methods.graphql.js';
+
+export const DeleteShippingMethodsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteShippingMethodsDocument}
+            entityName="shipping methods"
+            requiredPermissions={['DeleteShippingMethod']}
+            selection={selection}
+            table={table}
+        />
+    );
+};
+
+export const AssignShippingMethodsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="shipping methods"
+            mutationFn={api.mutate(assignShippingMethodsToChannelDocument)}
+            requiredPermissions={['UpdateShippingMethod']}
+            buildInput={(channelId: string) => ({
+                shippingMethodIds: selection.map(s => s.id),
+                channelId,
+            })}
+        />
+    );
+};
+
+export const RemoveShippingMethodsFromChannelBulkAction: BulkActionComponent<any> = ({
+    selection,
+    table,
+}) => {
+    const { selectedChannel } = useChannel();
+
+    return (
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="shipping methods"
+            mutationFn={api.mutate(removeShippingMethodsFromChannelDocument)}
+            requiredPermissions={['UpdateShippingMethod']}
+            buildInput={() => ({
+                shippingMethodIds: selection.map(s => s.id),
+                channelId: selectedChannel?.id,
+            })}
+        />
+    );
+};