@vendure/dashboard 3.3.6-master-202507011151 → 3.3.6-master-202507020234

package/src/app/routes/_authenticated/_customers/components/customer-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteCustomersDocument } from '../customers.graphql.js';
+
+export const DeleteCustomersBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteCustomersDocument}
+            entityName="customers"
+            requiredPermissions={['DeleteCustomer']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_customers/customers.graphql.ts

@@ -1,5 +1,4 @@
 import { graphql } from '@/graphql/graphql.js';
-import { gql } from 'awesome-graphql-client';
 
 export const customerListDocument = graphql(`
     query GetCustomerList($options: CustomerListOptions) {
@@ -202,3 +201,12 @@ export const removeCustomerFromGroupDocument = graphql(`
         }
     }
 `);
+
+export const deleteCustomersDocument = graphql(`
+    mutation DeleteCustomers($ids: [ID!]!) {
+        deleteCustomers(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_customers/customers.tsx

@@ -6,6 +6,7 @@ import { ListPage } from '@/framework/page/list-page.js';
 import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import { DeleteCustomersBulkAction } from './components/customer-bulk-actions.js';
 import { CustomerStatusBadge } from './components/customer-status-badge.js';
 import { customerListDocument, deleteCustomerDocument } from './customers.graphql.js';
 
@@ -66,6 +67,12 @@ function CustomerListPage() {
                 firstName: false,
                 lastName: false,
             }}
+            bulkActions={[
+                {
+                    component: DeleteCustomersBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateCustomer']}>

package/src/app/routes/_authenticated/_facets/components/facet-bulk-actions.tsx

@@ -0,0 +1,104 @@
+import { toast } from 'sonner';
+
+import { AssignToChannelBulkAction } from '@/components/shared/assign-to-channel-bulk-action.js';
+import { RemoveFromChannelBulkAction } from '@/components/shared/remove-from-channel-bulk-action.js';
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { api } from '@/graphql/api.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import { useChannel } from '@/index.js';
+import { useLingui } from '@/lib/trans.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
+
+import {
+    assignFacetsToChannelDocument,
+    deleteFacetsDocument,
+    removeFacetsFromChannelDocument,
+} from '../facets.graphql.js';
+
+export const DeleteFacetsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteFacetsDocument}
+            entityName="facets"
+            requiredPermissions={['DeleteCatalog', 'DeleteFacet']}
+            selection={selection}
+            table={table}
+        />
+    );
+};
+
+export const AssignFacetsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="facets"
+            mutationFn={api.mutate(assignFacetsToChannelDocument)}
+            requiredPermissions={['UpdateCatalog', 'UpdateFacet']}
+            buildInput={(channelId: string) => ({
+                facetIds: selection.map(s => s.id),
+                channelId,
+            })}
+        />
+    );
+};
+
+export const RemoveFacetsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { selectedChannel } = useChannel();
+    const { i18n } = useLingui();
+
+    return (
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="facets"
+            mutationFn={api.mutate(removeFacetsFromChannelDocument)}
+            requiredPermissions={['UpdateCatalog', 'UpdateFacet']}
+            buildInput={() => ({
+                facetIds: selection.map(s => s.id),
+                channelId: selectedChannel?.id,
+            })}
+            onSuccess={result => {
+                const typedResult = result as ResultOf<typeof removeFacetsFromChannelDocument>;
+                if (typedResult?.removeFacetsFromChannel) {
+                    const errors: string[] = [];
+
+                    for (const item of typedResult.removeFacetsFromChannel) {
+                        if ('id' in item) {
+                            // Do nothing
+                        } else if ('message' in item) {
+                            errors.push(item.message);
+                            toast.error(i18n.t(`Failed to remove facet from channel: ${item.message}`));
+                        }
+                    }
+
+                    const successCount = selection.length - errors.length;
+
+                    if (successCount > 0) {
+                        toast.success(i18n.t(`Successfully removed ${successCount} facets from channel`));
+                    }
+                }
+            }}
+        />
+    );
+};
+
+export const DuplicateFacetsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DuplicateBulkAction
+            entityType="Facet"
+            duplicatorCode="facet-duplicator"
+            duplicatorArguments={[
+                {
+                    name: 'includeValues',
+                    value: 'true',
+                },
+            ]}
+            requiredPermissions={['UpdateCatalog', 'UpdateFacet']}
+            entityName="Facet"
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_facets/facets.graphql.ts

@@ -102,3 +102,33 @@ export const deleteFacetDocument = graphql(`
         }
     }
 `);
+
+export const assignFacetsToChannelDocument = graphql(`
+    mutation AssignFacetsToChannel($input: AssignFacetsToChannelInput!) {
+        assignFacetsToChannel(input: $input) {
+            id
+        }
+    }
+`);
+
+export const removeFacetsFromChannelDocument = graphql(`
+    mutation RemoveFacetsFromChannel($input: RemoveFacetsFromChannelInput!) {
+        removeFacetsFromChannel(input: $input) {
+            ... on Facet {
+                id
+            }
+            ... on ErrorResult {
+                message
+            }
+        }
+    }
+`);
+
+export const deleteFacetsDocument = graphql(`
+    mutation DeleteFacets($ids: [ID!]!) {
+        deleteFacets(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_facets/facets.tsx

@@ -8,6 +8,12 @@ import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { ResultOf } from 'gql.tada';
 import { PlusIcon } from 'lucide-react';
+import {
+    AssignFacetsToChannelBulkAction,
+    DeleteFacetsBulkAction,
+    DuplicateFacetsBulkAction,
+    RemoveFacetsFromChannelBulkAction,
+} from './components/facet-bulk-actions.js';
 import { FacetValuesSheet } from './components/facet-values-sheet.js';
 import { deleteFacetDocument, facetListDocument } from './facets.graphql.js';
 
@@ -80,6 +86,24 @@ function FacetListPage() {
                     },
                 };
             }}
+            bulkActions={[
+                {
+                    order: 100,
+                    component: AssignFacetsToChannelBulkAction,
+                },
+                {
+                    order: 200,
+                    component: RemoveFacetsFromChannelBulkAction,
+                },
+                {
+                    order: 300,
+                    component: DuplicateFacetsBulkAction,
+                },
+                {
+                    order: 400,
+                    component: DeleteFacetsBulkAction,
+                },
+            ]}
             route={Route}
         >
             <PageActionBarRight>

package/src/app/routes/_authenticated/_payment-methods/components/payment-method-bulk-actions.tsx

@@ -0,0 +1,58 @@
+import { AssignToChannelBulkAction } from '@/components/shared/assign-to-channel-bulk-action.js';
+import { RemoveFromChannelBulkAction } from '@/components/shared/remove-from-channel-bulk-action.js';
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { api } from '@/graphql/api.js';
+import { useChannel } from '@/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+
+import {
+    assignPaymentMethodsToChannelDocument,
+    deletePaymentMethodsDocument,
+    removePaymentMethodsFromChannelDocument,
+} from '../payment-methods.graphql.js';
+
+export const DeletePaymentMethodsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deletePaymentMethodsDocument}
+            entityName="payment methods"
+            requiredPermissions={['DeletePaymentMethod']}
+            selection={selection}
+            table={table}
+        />
+    );
+};
+
+export const AssignPaymentMethodsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="payment methods"
+            mutationFn={api.mutate(assignPaymentMethodsToChannelDocument)}
+            requiredPermissions={['UpdatePaymentMethod']}
+            buildInput={(channelId: string) => ({
+                paymentMethodIds: selection.map(s => s.id),
+                channelId,
+            })}
+        />
+    );
+};
+
+export const RemovePaymentMethodsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { selectedChannel } = useChannel();
+
+    return (
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="payment methods"
+            mutationFn={api.mutate(removePaymentMethodsFromChannelDocument)}
+            requiredPermissions={['UpdatePaymentMethod']}
+            buildInput={() => ({
+                paymentMethodIds: selection.map(s => s.id),
+                channelId: selectedChannel?.id,
+            })}
+        />
+    );
+};

package/src/app/routes/_authenticated/_payment-methods/payment-methods.graphql.ts

@@ -81,3 +81,30 @@ export const deletePaymentMethodDocument = graphql(`
         }
     }
 `);
+
+export const deletePaymentMethodsDocument = graphql(`
+    mutation DeletePaymentMethods($ids: [ID!]!) {
+        deletePaymentMethods(ids: $ids) {
+            result
+            message
+        }
+    }
+`);
+
+export const assignPaymentMethodsToChannelDocument = graphql(`
+    mutation AssignPaymentMethodsToChannel($input: AssignPaymentMethodsToChannelInput!) {
+        assignPaymentMethodsToChannel(input: $input) {
+            id
+            name
+        }
+    }
+`);
+
+export const removePaymentMethodsFromChannelDocument = graphql(`
+    mutation RemovePaymentMethodsFromChannel($input: RemovePaymentMethodsFromChannelInput!) {
+        removePaymentMethodsFromChannel(input: $input) {
+            id
+            name
+        }
+    }
+`);

package/src/app/routes/_authenticated/_payment-methods/payment-methods.tsx

@@ -2,10 +2,16 @@ import { BooleanDisplayBadge } from '@/components/data-display/boolean.js';
 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 { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import {
+    AssignPaymentMethodsToChannelBulkAction,
+    DeletePaymentMethodsBulkAction,
+    RemovePaymentMethodsFromChannelBulkAction,
+} from './components/payment-method-bulk-actions.js';
 import { deletePaymentMethodDocument, paymentMethodListQuery } from './payment-methods.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods')({
@@ -50,15 +56,31 @@ function PaymentMethodListPage() {
                     cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
                 },
             }}
+            bulkActions={[
+                {
+                    component: AssignPaymentMethodsToChannelBulkAction,
+                    order: 100,
+                },
+                {
+                    component: RemovePaymentMethodsFromChannelBulkAction,
+                    order: 200,
+                },
+                {
+                    component: DeletePaymentMethodsBulkAction,
+                    order: 500,
+                },
+            ]}
         >
-            <PermissionGuard requires={['CreatePaymentMethod']}>
-                <Button asChild>
-                    <Link to="./new">
-                        <PlusIcon className="mr-2 h-4 w-4" />
-                        New Payment Method
-                    </Link>
-                </Button>
-            </PermissionGuard>
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreatePaymentMethod']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            New Payment Method
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
         </ListPage>
     );
 }

package/src/app/routes/_authenticated/_payment-methods/payment-methods_.$id.tsx

@@ -38,7 +38,10 @@ export const Route = createFileRoute('/_authenticated/_payment-methods/payment-m
         pageId,
         queryDocument: paymentMethodDetailDocument,
         breadcrumb(_isNew, entity) {
-            return [{ path: '/payment-methods', label: 'Payment methods' }, entity?.name];
+            return [
+                { path: '/payment-methods', label: 'Payment methods' },
+                _isNew ? <Trans>New payment method</Trans> : entity?.name,
+            ];
         },
     }),
     errorComponent: ({ error }) => <ErrorPage message={error.message} />,

package/src/app/routes/_authenticated/_product-variants/components/product-variant-bulk-actions.tsx

@@ -1,17 +1,17 @@
-import { useMutation } from '@tanstack/react-query';
-import { LayersIcon, TagIcon, TrashIcon } from 'lucide-react';
+import { TagIcon } from 'lucide-react';
 import { useState } from 'react';
-import { toast } from 'sonner';
 
 import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
+import { AssignToChannelBulkAction } from '@/components/shared/assign-to-channel-bulk-action.js';
+import { usePriceFactor } from '@/components/shared/assign-to-channel-dialog.js';
+import { RemoveFromChannelBulkAction } from '@/components/shared/remove-from-channel-bulk-action.js';
 import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
 import { api } from '@/graphql/api.js';
-import { ResultOf } from '@/graphql/graphql.js';
 import { useChannel, usePaginatedList } from '@/index.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { Trans } from '@/lib/trans.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 
 import { AssignFacetValuesDialog } from '../../_products/components/assign-facet-values-dialog.js';
-import { AssignToChannelDialog } from '../../_products/components/assign-to-channel-dialog.js';
 import {
     assignProductVariantsToChannelDocument,
     deleteProductVariantsDocument,
@@ -22,78 +22,34 @@ import {
 } from '../product-variants.graphql.js';
 
 export const DeleteProductVariantsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { refetchPaginatedList } = usePaginatedList();
-    const { i18n } = useLingui();
-    const { mutate } = useMutation({
-        mutationFn: api.mutate(deleteProductVariantsDocument),
-        onSuccess: (result: ResultOf<typeof deleteProductVariantsDocument>) => {
-            let deleted = 0;
-            const errors: string[] = [];
-            for (const item of result.deleteProductVariants) {
-                if (item.result === 'DELETED') {
-                    deleted++;
-                } else if (item.message) {
-                    errors.push(item.message);
-                }
-            }
-            if (0 < deleted) {
-                toast.success(i18n.t(`Deleted ${deleted} product variants`));
-            }
-            if (0 < errors.length) {
-                toast.error(i18n.t(`Failed to delete ${errors.length} product variants`));
-            }
-            refetchPaginatedList();
-            table.resetRowSelection();
-        },
-        onError: () => {
-            toast.error(`Failed to delete ${selection.length} product variants`);
-        },
-    });
     return (
-        <DataTableBulkActionItem
-            requiresPermission={['DeleteCatalog', 'DeleteProduct']}
-            onClick={() => mutate({ ids: selection.map(s => s.id) })}
-            label={<Trans>Delete</Trans>}
-            confirmationText={
-                <Trans>Are you sure you want to delete {selection.length} product variants?</Trans>
-            }
-            icon={TrashIcon}
-            className="text-destructive"
+        <DeleteBulkAction
+            mutationDocument={deleteProductVariantsDocument}
+            entityName="product variants"
+            requiredPermissions={['DeleteCatalog', 'DeleteProduct']}
+            selection={selection}
+            table={table}
         />
     );
 };
 
 export const AssignProductVariantsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { refetchPaginatedList } = usePaginatedList();
-    const { channels } = useChannel();
-    const [dialogOpen, setDialogOpen] = useState(false);
-
-    if (channels.length < 2) {
-        return null;
-    }
-
-    const handleSuccess = () => {
-        refetchPaginatedList();
-        table.resetRowSelection();
-    };
+    const { priceFactor, priceFactorField } = usePriceFactor();
 
     return (
-        <>
-            <DataTableBulkActionItem
-                requiresPermission={['UpdateCatalog', 'UpdateProduct']}
-                onClick={() => setDialogOpen(true)}
-                label={<Trans>Assign to channel</Trans>}
-                icon={LayersIcon}
-            />
-            <AssignToChannelDialog
-                open={dialogOpen}
-                onOpenChange={setDialogOpen}
-                entityIds={selection.map(s => s.id)}
-                entityType="variants"
-                mutationFn={api.mutate(assignProductVariantsToChannelDocument)}
-                onSuccess={handleSuccess}
-            />
-        </>
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="variants"
+            mutationFn={api.mutate(assignProductVariantsToChannelDocument)}
+            requiredPermissions={['UpdateCatalog', 'UpdateProduct']}
+            buildInput={(channelId: string) => ({
+                productVariantIds: selection.map(s => s.id),
+                channelId,
+                priceFactor,
+            })}
+            additionalFields={priceFactorField}
+        />
     );
 };
 
@@ -101,49 +57,19 @@ export const RemoveProductVariantsFromChannelBulkAction: BulkActionComponent<any
     selection,
     table,
 }) => {
-    const { refetchPaginatedList } = usePaginatedList();
     const { selectedChannel } = useChannel();
-    const { i18n } = useLingui();
-    const { mutate } = useMutation({
-        mutationFn: api.mutate(removeProductVariantsFromChannelDocument),
-        onSuccess: () => {
-            toast.success(i18n.t(`Successfully removed ${selection.length} product variants from channel`));
-            refetchPaginatedList();
-            table.resetRowSelection();
-        },
-        onError: error => {
-            toast.error(
-                `Failed to remove ${selection.length} product variants from channel: ${error.message}`,
-            );
-        },
-    });
-
-    if (!selectedChannel) {
-        return null;
-    }
-
-    const handleRemove = () => {
-        mutate({
-            input: {
-                productVariantIds: selection.map(s => s.id),
-                channelId: selectedChannel.id,
-            },
-        });
-    };
 
     return (
-        <DataTableBulkActionItem
-            requiresPermission={['UpdateCatalog', 'UpdateProduct']}
-            onClick={handleRemove}
-            label={<Trans>Remove from current channel</Trans>}
-            confirmationText={
-                <Trans>
-                    Are you sure you want to remove {selection.length} product variants from the current
-                    channel?
-                </Trans>
-            }
-            icon={LayersIcon}
-            className="text-warning"
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="product variants"
+            mutationFn={api.mutate(removeProductVariantsFromChannelDocument)}
+            requiredPermissions={['UpdateCatalog', 'UpdateProduct']}
+            buildInput={() => ({
+                productVariantIds: selection.map(s => s.id),
+                channelId: selectedChannel?.id,
+            })}
         />
     );
 };