@vendure/dashboard 3.3.6-master-202506290242 → 3.3.6-master-202507010731

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.3.6-master-202506290242",
+    "version": "3.3.6-master-202507010731",
     "type": "module",
     "repository": {
         "type": "git",
@@ -86,8 +86,8 @@
         "@types/react-dom": "^19.0.4",
         "@types/react-grid-layout": "^1.3.5",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.3.6-master-202506290242",
-        "@vendure/core": "^3.3.6-master-202506290242",
+        "@vendure/common": "^3.3.6-master-202507010731",
+        "@vendure/core": "^3.3.6-master-202507010731",
         "@vitejs/plugin-react": "^4.3.4",
         "awesome-graphql-client": "^2.1.0",
         "class-variance-authority": "^0.7.1",
@@ -130,5 +130,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "6d4bc0d2c892f4b081fc037ea9b88aa86885cb2f"
+    "gitHead": "f5da386affaa5dcc54296a51228e2a7e5d3b0f84"
 }

package/src/app/routes/_authenticated/_administrators/administrators_.$id.tsx

@@ -26,9 +26,12 @@ import {
 } from './administrators.graphql.js';
 import { RolePermissionsDisplay } from './components/role-permissions-display.js';
 
+const pageId = 'administrator-detail';
+
 export const Route = createFileRoute('/_authenticated/_administrators/administrators_/$id')({
     component: AdministratorDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: administratorDetailDocument,
         breadcrumb: (isNew, entity) => {
             const name = `${entity?.firstName} ${entity?.lastName}`;
@@ -48,6 +51,7 @@ function AdministratorDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: administratorDetailDocument,
         createDocument: createAdministratorDocument,
         updateDocument: updateAdministratorDocument,
@@ -87,7 +91,7 @@ function AdministratorDetailPage() {
     const roleIds = form.watch('roleIds');
 
     return (
-        <Page pageId="administrator-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New administrator</Trans> : name}</PageTitle>
 
             <PageActionBar>

package/src/app/routes/_authenticated/_assets/assets_.$id.tsx

@@ -25,9 +25,13 @@ import { FocusIcon } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { assetDetailDocument, assetUpdateDocument } from './assets.graphql.js';
+
+const pageId = 'asset-detail';
+
 export const Route = createFileRoute('/_authenticated/_assets/assets_/$id')({
     component: AssetDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: assetDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -49,7 +53,8 @@ function AssetDetailPage() {
     const [height, setHeight] = useState(0);
     const [focalPoint, setFocalPoint] = useState<Point | undefined>(undefined);
     const [settingFocalPoint, setSettingFocalPoint] = useState(false);
-    const { form, submitHandler, entity, isPending } = useDetailPage({
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: assetDetailDocument,
         updateDocument: assetUpdateDocument,
         setValuesForUpdate: entity => {
@@ -86,7 +91,7 @@ function AssetDetailPage() {
         return null;
     }
     return (
-        <Page pageId="asset-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 <Trans>Edit asset</Trans>
             </PageTitle>

package/src/app/routes/_authenticated/_channels/channels_.$id.tsx

@@ -27,9 +27,12 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { channelDetailDocument, createChannelDocument, updateChannelDocument } from './channels.graphql.js';
 
+const pageId = 'channel-detail';
+
 export const Route = createFileRoute('/_authenticated/_channels/channels_/$id')({
     component: ChannelDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: channelDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -48,6 +51,7 @@ function ChannelDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: channelDetailDocument,
         createDocument: createChannelDocument,
         updateDocument: updateChannelDocument,
@@ -100,7 +104,7 @@ function ChannelDetailPage() {
     const codeIsDefault = entity?.code === DEFAULT_CHANNEL_CODE;
 
     return (
-        <Page pageId="channel-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? (
                     <Trans>New channel</Trans>

package/src/app/routes/_authenticated/_collections/collections.graphql.ts

@@ -131,3 +131,19 @@ export const getCollectionFiltersQueryOptions = queryOptions({
     queryKey: ['getCollectionFilters'],
     queryFn: () => api.query(getCollectionFiltersDocument),
 }) as DefinedInitialDataOptions<ResultOf<typeof getCollectionFiltersDocument>>;
+
+export const assignCollectionToChannelDocument = graphql(`
+    mutation AssignCollectionsToChannel($input: AssignCollectionsToChannelInput!) {
+        assignCollectionsToChannel(input: $input) {
+            id
+        }
+    }
+`);
+
+export const removeCollectionFromChannelDocument = graphql(`
+    mutation RemoveCollectionsFromChannel($input: RemoveCollectionsFromChannelInput!) {
+        removeCollectionsFromChannel(input: $input) {
+            id
+        }
+    }
+`);

package/src/app/routes/_authenticated/_collections/collections.tsx

@@ -5,7 +5,7 @@ import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/framework/page/list-page.js';
 import { api } from '@/graphql/api.js';
 import { Trans } from '@/lib/trans.js';
-import { useQueries } from '@tanstack/react-query';
+import { FetchQueryOptions, useQueries } from '@tanstack/react-query';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { ExpandedState, getExpandedRowModel } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
@@ -14,6 +14,10 @@ import { Folder, FolderOpen, PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 
 import { collectionListDocument, deleteCollectionDocument } from './collections.graphql.js';
+import {
+    AssignCollectionsToChannelBulkAction,
+    RemoveCollectionsFromChannelBulkAction,
+} from './components/collection-bulk-actions.js';
 import { CollectionContentsSheet } from './components/collection-contents-sheet.js';
 
 export const Route = createFileRoute('/_authenticated/_collections/collections')({
@@ -38,7 +42,7 @@ function CollectionListPage() {
                         },
                     }),
                 staleTime: 1000 * 60 * 5,
-            };
+            } satisfies FetchQueryOptions;
         }),
     });
     const childCollectionsByParentId = childrenQueries.reduce(
@@ -179,6 +183,16 @@ function CollectionListPage() {
                 };
             }}
             route={Route}
+            bulkActions={[
+                {
+                    component: AssignCollectionsToChannelBulkAction,
+                    order: 100,
+                },
+                {
+                    component: RemoveCollectionsFromChannelBulkAction,
+                    order: 200,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateCollection', 'CreateCatalog']}>

package/src/app/routes/_authenticated/_collections/collections_.$id.tsx

@@ -33,9 +33,12 @@ import { CollectionContentsPreviewTable } from './components/collection-contents
 import { CollectionContentsTable } from './components/collection-contents-table.js';
 import { CollectionFiltersSelector } from './components/collection-filters-selector.js';
 
+const pageId = 'collection-detail';
+
 export const Route = createFileRoute('/_authenticated/_collections/collections_/$id')({
     component: CollectionDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: collectionDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/collections', label: 'Collections' },
@@ -52,6 +55,7 @@ function CollectionDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: collectionDetailDocument,
         createDocument: createCollectionDocument,
         transformCreateInput: values => {
@@ -105,7 +109,7 @@ function CollectionDetailPage() {
     const currentInheritFiltersValue = form.watch('inheritFilters');
 
     return (
-        <Page pageId="collection-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New collection</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_collections/components/assign-collections-to-channel-dialog.tsx

@@ -0,0 +1,110 @@
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
+import { Button } from '@/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+
+import { useChannel } from '@/hooks/use-channel.js';
+
+interface AssignCollectionsToChannelDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    entityIds: string[];
+    mutationFn: (variables: any) => Promise<ResultOf<any>>;
+    onSuccess?: () => void;
+}
+
+export function AssignCollectionsToChannelDialog({
+    open,
+    onOpenChange,
+    entityIds,
+    mutationFn,
+    onSuccess,
+}: AssignCollectionsToChannelDialogProps) {
+    const { i18n } = useLingui();
+    const [selectedChannelId, setSelectedChannelId] = useState<string>('');
+    const { channels, selectedChannel } = useChannel();
+
+    // Filter out the currently selected channel from available options
+    const availableChannels = channels.filter(channel => channel.id !== selectedChannel?.id);
+
+    const { mutate, isPending } = useMutation({
+        mutationFn,
+        onSuccess: () => {
+            toast.success(i18n.t(`Successfully assigned ${entityIds.length} collections to channel`));
+            onSuccess?.();
+            onOpenChange(false);
+        },
+        onError: () => {
+            toast.error(`Failed to assign ${entityIds.length} collections to channel`);
+        },
+    });
+
+    const handleAssign = () => {
+        if (!selectedChannelId) {
+            toast.error('Please select a channel');
+            return;
+        }
+
+        const input = {
+            collectionIds: entityIds,
+            channelId: selectedChannelId,
+        };
+
+        mutate({ input });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Assign collections to channel</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>Select a channel to assign {entityIds.length} collections to</Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                        <label className="text-sm font-medium">
+                            <Trans>Channel</Trans>
+                        </label>
+                        <Select value={selectedChannelId} onValueChange={setSelectedChannelId}>
+                            <SelectTrigger>
+                                <SelectValue placeholder={i18n.t('Select a channel')} />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {availableChannels.map(channel => (
+                                    <SelectItem key={channel.id} value={channel.id}>
+                                        <ChannelCodeLabel code={channel.code} />
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleAssign} disabled={!selectedChannelId || isPending}>
+                        <Trans>Assign</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/app/routes/_authenticated/_collections/components/collection-bulk-actions.tsx

@@ -0,0 +1,99 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { LayersIcon } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { api } from '@/graphql/api.js';
+import { useChannel, usePaginatedList } from '@/index.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+
+import { Permission } from '@vendure/common/lib/generated-types';
+import {
+    assignCollectionToChannelDocument,
+    removeCollectionFromChannelDocument,
+} from '../collections.graphql.js';
+import { AssignCollectionsToChannelDialog } from './assign-collections-to-channel-dialog.js';
+
+export const AssignCollectionsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { channels } = useChannel();
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const queryClient = useQueryClient();
+
+    if (channels.length < 2) {
+        return null;
+    }
+
+    const handleSuccess = () => {
+        refetchPaginatedList();
+        table.resetRowSelection();
+        queryClient.invalidateQueries({ queryKey: ['childCollections'] });
+    };
+
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={[Permission.UpdateCatalog, Permission.UpdateCollection]}
+                onClick={() => setDialogOpen(true)}
+                label={<Trans>Assign to channel</Trans>}
+                icon={LayersIcon}
+            />
+            <AssignCollectionsToChannelDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                entityIds={selection.map(s => s.id)}
+                mutationFn={api.mutate(assignCollectionToChannelDocument)}
+                onSuccess={handleSuccess}
+            />
+        </>
+    );
+};
+
+export const RemoveCollectionsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { selectedChannel } = useChannel();
+    const { i18n } = useLingui();
+    const queryClient = useQueryClient();
+    const { mutate } = useMutation({
+        mutationFn: api.mutate(removeCollectionFromChannelDocument),
+        onSuccess: () => {
+            toast.success(i18n.t(`Successfully removed ${selection.length} collections from channel`));
+            refetchPaginatedList();
+            table.resetRowSelection();
+            queryClient.invalidateQueries({ queryKey: ['childCollections'] });
+        },
+        onError: error => {
+            toast.error(`Failed to remove ${selection.length} collections from channel: ${error.message}`);
+        },
+    });
+
+    if (!selectedChannel) {
+        return null;
+    }
+
+    const handleRemove = () => {
+        mutate({
+            input: {
+                collectionIds: selection.map(s => s.id),
+                channelId: selectedChannel.id,
+            },
+        });
+    };
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={[Permission.UpdateCatalog, Permission.UpdateCollection]}
+            onClick={handleRemove}
+            label={<Trans>Remove from current channel</Trans>}
+            confirmationText={
+                <Trans>
+                    Are you sure you want to remove {selection.length} collections from the current channel?
+                </Trans>
+            }
+            icon={LayersIcon}
+            className="text-warning"
+        />
+    );
+};

package/src/app/routes/_authenticated/_countries/countries.graphql.ts

@@ -24,7 +24,7 @@ export const countriesListQuery = graphql(
     [countryItemFragment],
 );
 
-export const countryDetailQuery = graphql(`
+export const countryDetailDocument = graphql(`
     query CountryDetail($id: ID!) {
         country(id: $id) {
             id

package/src/app/routes/_authenticated/_countries/countries_.$id.tsx

@@ -21,12 +21,15 @@ import { useDetailPage } from '@/framework/page/use-detail-page.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
-import { countryDetailQuery, createCountryDocument, updateCountryDocument } from './countries.graphql.js';
+import { countryDetailDocument, createCountryDocument, updateCountryDocument } from './countries.graphql.js';
+
+const pageId = 'country-detail';
 
 export const Route = createFileRoute('/_authenticated/_countries/countries_/$id')({
     component: CountryDetailPage,
     loader: detailPageRouteLoader({
-        queryDocument: countryDetailQuery,
+        pageId,
+        queryDocument: countryDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/countries', label: 'Countries' },
             isNew ? <Trans>New country</Trans> : entity?.name,
@@ -41,8 +44,9 @@ function CountryDetailPage() {
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { i18n } = useLingui();
 
-    const { form, submitHandler, entity, isPending } = useDetailPage({
-        queryDocument: countryDetailQuery,
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: countryDetailDocument,
         createDocument: createCountryDocument,
         updateDocument: updateCountryDocument,
         setValuesForUpdate: entity => {
@@ -71,7 +75,7 @@ function CountryDetailPage() {
     });
 
     return (
-        <Page pageId="country-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New country</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_customer-groups/customer-groups.graphql.ts

@@ -33,7 +33,7 @@ export const removeCustomersFromGroupDocument = graphql(`
     }
 `);
 
-export const customerGroupDocument = graphql(`
+export const customerGroupDetailDocument = graphql(`
     query CustomerGroup($id: ID!) {
         customerGroup(id: $id) {
             id

package/src/app/routes/_authenticated/_customer-groups/customer-groups_.$id.tsx

@@ -4,7 +4,6 @@ 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 { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -23,14 +22,17 @@ import { toast } from 'sonner';
 import { CustomerGroupMembersTable } from './components/customer-group-members-table.js';
 import {
     createCustomerGroupDocument,
-    customerGroupDocument,
+    customerGroupDetailDocument,
     updateCustomerGroupDocument,
 } from './customer-groups.graphql.js';
 
+const pageId = 'customer-group-detail';
+
 export const Route = createFileRoute('/_authenticated/_customer-groups/customer-groups_/$id')({
     component: CustomerGroupDetailPage,
     loader: detailPageRouteLoader({
-        queryDocument: customerGroupDocument,
+        pageId,
+        queryDocument: customerGroupDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/customer-groups', label: 'Customer groups' },
             isNew ? <Trans>New customer group</Trans> : entity?.name,
@@ -46,7 +48,8 @@ function CustomerGroupDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        queryDocument: addCustomFields(customerGroupDocument),
+        pageId,
+        queryDocument: customerGroupDetailDocument,
         createDocument: createCustomerGroupDocument,
         updateDocument: updateCustomerGroupDocument,
         setValuesForUpdate: entity => {
@@ -72,7 +75,7 @@ function CustomerGroupDetailPage() {
     });
 
     return (
-        <Page pageId="customer-group-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New customer group</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_customers/customers_.$id.tsx

@@ -47,9 +47,12 @@ import {
     updateCustomerDocument,
 } from './customers.graphql.js';
 
+const pageId = 'customer-detail';
+
 export const Route = createFileRoute('/_authenticated/_customers/customers_/$id')({
     component: CustomerDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: customerDetailDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/customers', label: 'Customers' },
@@ -67,6 +70,7 @@ function CustomerDetailPage() {
     const [newAddressOpen, setNewAddressOpen] = useState(false);
 
     const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
+        pageId,
         queryDocument: customerDetailDocument,
         createDocument: createCustomerDocument,
         updateDocument: updateCustomerDocument,
@@ -137,7 +141,7 @@ function CustomerDetailPage() {
     const customerName = entity ? `${entity.firstName} ${entity.lastName}` : '';
 
     return (
-        <Page pageId="customer-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New customer</Trans> : customerName}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_facets/facets_.$id.tsx

@@ -24,9 +24,12 @@ import { toast } from 'sonner';
 import { FacetValuesTable } from './components/facet-values-table.js';
 import { createFacetDocument, facetDetailDocument, updateFacetDocument } from './facets.graphql.js';
 
+const pageId = 'facet-detail';
+
 export const Route = createFileRoute('/_authenticated/_facets/facets_/$id')({
     component: FacetDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: facetDetailDocument,
         breadcrumb(isNew, entity) {
             return [{ path: '/facets', label: 'Facets' }, isNew ? <Trans>New facet</Trans> : entity?.name];
@@ -42,6 +45,7 @@ function FacetDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: facetDetailDocument,
         createDocument: createFacetDocument,
         updateDocument: updateFacetDocument,
@@ -82,7 +86,7 @@ function FacetDetailPage() {
     });
 
     return (
-        <Page pageId="facet-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New facet</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_orders/orders_.$id.tsx

@@ -25,6 +25,8 @@ import { OrderTaxSummary } from './components/order-tax-summary.js';
 import { PaymentDetails } from './components/payment-details.js';
 import { orderDetailDocument } from './orders.graphql.js';
 
+const pageId = 'order-detail';
+
 export const Route = createFileRoute('/_authenticated/_orders/orders_/$id')({
     component: OrderDetailPage,
     loader: async ({ context, params }) => {
@@ -58,7 +60,8 @@ function OrderDetailPage() {
     const params = Route.useParams();
     const { i18n } = useLingui();
 
-    const { form, submitHandler, entity, isPending } = useDetailPage({
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: orderDetailDocument,
         setValuesForUpdate: entity => {
             return {
@@ -83,7 +86,7 @@ function OrderDetailPage() {
     }
 
     return (
-        <Page pageId="order-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{entity?.code ?? ''}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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

@@ -30,9 +30,12 @@ import {
     updatePaymentMethodDocument,
 } from './payment-methods.graphql.js';
 
+const pageId = 'payment-method-detail';
+
 export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods_/$id')({
     component: PaymentMethodDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: paymentMethodDetailDocument,
         breadcrumb(_isNew, entity) {
             return [{ path: '/payment-methods', label: 'Payment methods' }, entity?.name];
@@ -48,6 +51,7 @@ function PaymentMethodDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: paymentMethodDetailDocument,
         createDocument: createPaymentMethodDocument,
         updateDocument: updatePaymentMethodDocument,
@@ -102,7 +106,7 @@ function PaymentMethodDetailPage() {
     });
 
     return (
-        <Page pageId="payment-method-detail" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New payment method</Trans> : (entity?.name ?? '')}
             </PageTitle>