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

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,
+            })}
         />
     );
 };

package/src/app/routes/_authenticated/_products/components/product-bulk-actions.tsx

@@ -1,14 +1,15 @@
-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 { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 import {
     assignProductsToChannelDocument,
@@ -19,123 +20,53 @@ import {
     updateProductsDocument,
 } from '../products.graphql.js';
 import { AssignFacetValuesDialog } from './assign-facet-values-dialog.js';
-import { AssignToChannelDialog } from './assign-to-channel-dialog.js';
 
 export const DeleteProductsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { refetchPaginatedList } = usePaginatedList();
-    const { i18n } = useLingui();
-    const { mutate } = useMutation({
-        mutationFn: api.mutate(deleteProductsDocument),
-        onSuccess: (result: ResultOf<typeof deleteProductsDocument>) => {
-            let deleted = 0;
-            const errors: string[] = [];
-            for (const item of result.deleteProducts) {
-                if (item.result === 'DELETED') {
-                    deleted++;
-                } else if (item.message) {
-                    errors.push(item.message);
-                }
-            }
-            if (0 < deleted) {
-                toast.success(i18n.t(`Deleted ${deleted} products`));
-            }
-            if (0 < errors.length) {
-                toast.error(i18n.t(`Failed to delete ${errors.length} products`));
-            }
-            refetchPaginatedList();
-            table.resetRowSelection();
-        },
-        onError: () => {
-            toast.error(`Failed to delete ${selection.length} products`);
-        },
-    });
     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} products?</Trans>}
-            icon={TrashIcon}
-            className="text-destructive"
+        <DeleteBulkAction
+            mutationDocument={deleteProductsDocument}
+            entityName="products"
+            requiredPermissions={['DeleteCatalog', 'DeleteProduct']}
+            selection={selection}
+            table={table}
         />
     );
 };
 
 export const AssignProductsToChannelBulkAction: 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="products"
-                mutationFn={api.mutate(assignProductsToChannelDocument)}
-                onSuccess={handleSuccess}
-            />
-        </>
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="products"
+            mutationFn={api.mutate(assignProductsToChannelDocument)}
+            requiredPermissions={['UpdateCatalog', 'UpdateProduct']}
+            buildInput={(channelId: string) => ({
+                productIds: selection.map(s => s.id),
+                channelId,
+                priceFactor,
+            })}
+            additionalFields={priceFactorField}
+        />
     );
 };
 
 export const RemoveProductsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { refetchPaginatedList } = usePaginatedList();
     const { selectedChannel } = useChannel();
-    const { i18n } = useLingui();
-    const { mutate } = useMutation({
-        mutationFn: api.mutate(removeProductsFromChannelDocument),
-        onSuccess: () => {
-            toast.success(i18n.t(`Successfully removed ${selection.length} products from channel`));
-            refetchPaginatedList();
-            table.resetRowSelection();
-        },
-        onError: error => {
-            toast.error(`Failed to remove ${selection.length} products from channel: ${error.message}`);
-        },
-    });
-
-    if (!selectedChannel) {
-        return null;
-    }
-
-    const handleRemove = () => {
-        mutate({
-            input: {
-                productIds: 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} products from the current channel?
-                </Trans>
-            }
-            icon={LayersIcon}
-            className="text-warning"
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="products"
+            mutationFn={api.mutate(removeProductsFromChannelDocument)}
+            requiredPermissions={['UpdateCatalog', 'UpdateProduct']}
+            buildInput={() => ({
+                productIds: selection.map(s => s.id),
+                channelId: selectedChannel?.id,
+            })}
         />
     );
 };

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

@@ -0,0 +1,82 @@
+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 { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
+
+import {
+    assignPromotionsToChannelDocument,
+    deletePromotionsDocument,
+    removePromotionsFromChannelDocument,
+} from '../promotions.graphql.js';
+
+export const DeletePromotionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deletePromotionsDocument}
+            entityName="promotions"
+            requiredPermissions={['DeletePromotion']}
+            selection={selection}
+            table={table}
+        />
+    );
+};
+
+export const AssignPromotionsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="promotions"
+            mutationFn={api.mutate(assignPromotionsToChannelDocument)}
+            requiredPermissions={['UpdatePromotion']}
+            buildInput={(channelId: string) => ({
+                promotionIds: selection.map(s => s.id),
+                channelId,
+            })}
+        />
+    );
+};
+
+export const RemovePromotionsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { selectedChannel } = useChannel();
+
+    return (
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="promotions"
+            mutationFn={api.mutate(removePromotionsFromChannelDocument)}
+            requiredPermissions={['UpdatePromotion']}
+            buildInput={() => ({
+                promotionIds: selection.map(s => s.id),
+                channelId: selectedChannel?.id,
+            })}
+        />
+    );
+};
+
+export const DuplicatePromotionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DuplicateBulkAction
+            entityType="Promotion"
+            duplicatorCode="promotion-duplicator"
+            duplicatorArguments={[
+                {
+                    name: 'includeConditions',
+                    value: 'true',
+                },
+                {
+                    name: 'includeActions',
+                    value: 'true',
+                },
+            ]}
+            requiredPermissions={['CreatePromotion']}
+            entityName="Promotion"
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_promotions/promotions.graphql.ts

@@ -94,3 +94,28 @@ export const deletePromotionDocument = graphql(`
         }
     }
 `);
+
+export const assignPromotionsToChannelDocument = graphql(`
+    mutation AssignPromotionsToChannel($input: AssignPromotionsToChannelInput!) {
+        assignPromotionsToChannel(input: $input) {
+            id
+        }
+    }
+`);
+
+export const removePromotionsFromChannelDocument = graphql(`
+    mutation RemovePromotionsFromChannel($input: RemovePromotionsFromChannelInput!) {
+        removePromotionsFromChannel(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deletePromotionsDocument = graphql(`
+    mutation DeletePromotions($ids: [ID!]!) {
+        deletePromotions(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_promotions/promotions.tsx

@@ -7,6 +7,12 @@ 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 {
+    AssignPromotionsToChannelBulkAction,
+    DeletePromotionsBulkAction,
+    DuplicatePromotionsBulkAction,
+    RemovePromotionsFromChannelBulkAction,
+} from './components/promotion-bulk-actions.js';
 import { deletePromotionDocument, promotionListDocument } from './promotions.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_promotions/promotions')({
@@ -45,6 +51,24 @@ function PromotionListPage() {
                     cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
                 },
             }}
+            bulkActions={[
+                {
+                    order: 100,
+                    component: AssignPromotionsToChannelBulkAction,
+                },
+                {
+                    order: 200,
+                    component: RemovePromotionsFromChannelBulkAction,
+                },
+                {
+                    order: 300,
+                    component: DuplicatePromotionsBulkAction,
+                },
+                {
+                    order: 400,
+                    component: DeletePromotionsBulkAction,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreatePromotion']}>

package/src/app/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -102,7 +102,7 @@ function PromotionDetailPage() {
                 toast.success(i18n.t('Successfully updated promotion'));
                 resetForm();
                 if (creatingNewEntity) {
-                    await navigate({ to: `../${data.id}`, from: Route.id });
+                    await navigate({ to: `../$id`, params: { id: data.id } });
                 }
             } else {
                 toast.error(i18n.t('Failed to update promotion'), {

package/src/app/routes/_authenticated/_roles/components/role-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 { 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

@@ -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

@@ -11,6 +11,7 @@ import { Trans } from '@/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/_sellers/components/seller-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 { 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

@@ -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

@@ -7,6 +7,7 @@ import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { deleteSellerDocument, sellerListQuery } from './sellers.graphql.js';
+import { DeleteSellersBulkAction } from './components/seller-bulk-actions.js';
 
 export const Route = createFileRoute('/_authenticated/_sellers/sellers')({
     component: SellerListPage,
@@ -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

@@ -58,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 => {