@vendure/dashboard 3.3.6-master-202507050232 → 3.4.0-minor-202506250934

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

@@ -1,11 +1,11 @@
-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 { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { Switch } from '@/vdb/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/vdb/constants.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 { TranslatableFormFieldWrapper } from '@/components/shared/translatable-form-field.js';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Switch } from '@/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -15,21 +15,18 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} 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';
+} 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';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
-import { countryDetailDocument, createCountryDocument, updateCountryDocument } from './countries.graphql.js';
-
-const pageId = 'country-detail';
+import { countryDetailQuery, createCountryDocument, updateCountryDocument } from './countries.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_countries/countries_/$id')({
     component: CountryDetailPage,
     loader: detailPageRouteLoader({
-        pageId,
-        queryDocument: countryDetailDocument,
+        queryDocument: countryDetailQuery,
         breadcrumb: (isNew, entity) => [
             { path: '/countries', label: 'Countries' },
             isNew ? <Trans>New country</Trans> : entity?.name,
@@ -44,9 +41,8 @@ function CountryDetailPage() {
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { i18n } = useLingui();
 
-    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        pageId,
-        queryDocument: countryDetailDocument,
+    const { form, submitHandler, entity, isPending } = useDetailPage({
+        queryDocument: countryDetailQuery,
         createDocument: createCountryDocument,
         updateDocument: updateCountryDocument,
         setValuesForUpdate: entity => {
@@ -75,7 +71,7 @@ function CountryDetailPage() {
     });
 
     return (
-        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId="country-detail" form={form} submitHandler={submitHandler}>
             <PageTitle>{creatingNewEntity ? <Trans>New country</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_customer-groups/components/customer-group-members-sheet.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@/vdb/components/ui/button.js';
 import {
     Sheet,
     SheetContent,
@@ -6,10 +5,11 @@ import {
     SheetHeader,
     SheetTitle,
     SheetTrigger,
-} from '@/vdb/components/ui/sheet.js';
-import { Trans } from '@/vdb/lib/trans.js';
+} from '@/components/ui/sheet.js';
+import { Trans } from '@/lib/trans.js';
 import { PanelLeftOpen } from 'lucide-react';
 import { CustomerGroupMembersTable } from './customer-group-members-table.js';
+import { Button } from '@/components/ui/button.js';
 
 export interface CustomerGroupMembersSheetProps {
     customerGroupName: string;
@@ -17,11 +17,7 @@ export interface CustomerGroupMembersSheetProps {
     children?: React.ReactNode;
 }
 
-export function CustomerGroupMembersSheet({
-    customerGroupName,
-    customerGroupId,
-    children,
-}: CustomerGroupMembersSheetProps) {
+export function CustomerGroupMembersSheet({ customerGroupName, customerGroupId, children }: CustomerGroupMembersSheetProps) {
     return (
         <Sheet>
             <SheetTrigger asChild>
@@ -36,10 +32,7 @@ export function CustomerGroupMembersSheet({
                         <Trans>Customer group members for {customerGroupName}</Trans>
                     </SheetTitle>
                     <SheetDescription>
-                        <Trans>
-                            These are the customers in the <strong>{customerGroupName}</strong> customer
-                            group.
-                        </Trans>
+                        <Trans>These are the customers in the <strong>{customerGroupName}</strong> customer group.</Trans>
                     </SheetDescription>
                 </SheetHeader>
                 <div className="px-4">

package/src/app/routes/_authenticated/_customer-groups/components/customer-group-members-table.tsx

@@ -1,19 +1,17 @@
-import { CustomerSelector } from '@/vdb/components/shared/customer-selector.js';
-import {
-    PaginatedListDataTable,
-    PaginatedListDataTableKey,
-} from '@/vdb/components/shared/paginated-list-data-table.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
-import { api } from '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { CustomerSelector } from '@/components/shared/customer-selector.js';
+import { PaginatedListDataTable, PaginatedListDataTableKey } from '@/components/shared/paginated-list-data-table.js';
+import { Button } from '@/components/ui/button.js';
+import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
 import { Link } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { useState } from 'react';
-import { toast } from 'sonner';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { addCustomerToGroupDocument } from '../../_customers/customers.graphql.js';
+import { toast } from 'sonner';
+import { useLingui } from '@/lib/trans.js';
 
 export const customerGroupMemberListDocument = graphql(`
     query CustomerGroupMemberList($id: ID!, $options: CustomerListOptions) {
@@ -38,10 +36,7 @@ export interface CustomerGroupMembersTableProps {
     canAddCustomers?: boolean;
 }
 
-export function CustomerGroupMembersTable({
-    customerGroupId,
-    canAddCustomers = true,
-}: CustomerGroupMembersTableProps) {
+export function CustomerGroupMembersTable({ customerGroupId, canAddCustomers = true }: CustomerGroupMembersTableProps) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
@@ -53,8 +48,8 @@ export function CustomerGroupMembersTable({
         mutationFn: api.mutate(addCustomerToGroupDocument),
         onSuccess: () => {
             toast.success(i18n.t('Customer added to group'));
-            queryClient.invalidateQueries({
-                queryKey: [PaginatedListDataTableKey, customerGroupMemberListDocument],
+            queryClient.invalidateQueries({ 
+                queryKey: [PaginatedListDataTableKey, customerGroupMemberListDocument] 
             });
         },
         onError: () => {
@@ -122,10 +117,10 @@ export function CustomerGroupMembersTable({
                 <CustomerSelector
                     onSelect={customer => {
                         addCustomerToGroup({
-                            customerId: customer.id,
-                            groupId: customerGroupId,
-                        });
-                    }}
+                        customerId: customer.id,
+                        groupId: customerGroupId,
+                    });
+                }}
                     label={<Trans>Add customer</Trans>}
                 />
             )}

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

@@ -1,4 +1,4 @@
-import { graphql } from '@/vdb/graphql/graphql.js';
+import { graphql } from '@/graphql/graphql.js';
 
 export const customerGroupListDocument = graphql(`
     query CustomerGroupList($options: CustomerGroupListOptions) {
@@ -33,7 +33,7 @@ export const removeCustomersFromGroupDocument = graphql(`
     }
 `);
 
-export const customerGroupDetailDocument = graphql(`
+export const customerGroupDocument = graphql(`
     query CustomerGroup($id: ID!) {
         customerGroup(id: $id) {
             id
@@ -69,12 +69,3 @@ export const deleteCustomerGroupDocument = graphql(`
         }
     }
 `);
-
-export const deleteCustomerGroupsDocument = graphql(`
-    mutation DeleteCustomerGroups($ids: [ID!]!) {
-        deleteCustomerGroups(ids: $ids) {
-            result
-            message
-        }
-    }
-`);

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

@@ -1,12 +1,11 @@
-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 { 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 { DeleteCustomerGroupsBulkAction } from './components/customer-group-bulk-actions.js';
 import { CustomerGroupMembersSheet } from './components/customer-group-members-sheet.js';
 import { customerGroupListDocument, deleteCustomerGroupDocument } from './customer-groups.graphql.js';
 
@@ -53,12 +52,6 @@ function CustomerGroupListPage() {
                     name: { contains: searchTerm },
                 };
             }}
-            bulkActions={[
-                {
-                    component: DeleteCustomerGroupsBulkAction,
-                    order: 500,
-                },
-            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateCustomerGroup']}>

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

@@ -1,9 +1,10 @@
-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 { 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 { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -13,26 +14,23 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} 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';
+} 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';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { CustomerGroupMembersTable } from './components/customer-group-members-table.js';
 import {
     createCustomerGroupDocument,
-    customerGroupDetailDocument,
+    customerGroupDocument,
     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({
-        pageId,
-        queryDocument: customerGroupDetailDocument,
+        queryDocument: customerGroupDocument,
         breadcrumb: (isNew, entity) => [
             { path: '/customer-groups', label: 'Customer groups' },
             isNew ? <Trans>New customer group</Trans> : entity?.name,
@@ -48,8 +46,7 @@ function CustomerGroupDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        pageId,
-        queryDocument: customerGroupDetailDocument,
+        queryDocument: addCustomFields(customerGroupDocument),
         createDocument: createCustomerGroupDocument,
         updateDocument: updateCustomerGroupDocument,
         setValuesForUpdate: entity => {
@@ -75,7 +72,7 @@ function CustomerGroupDetailPage() {
     });
 
     return (
-        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId="customer-group-detail" form={form} submitHandler={submitHandler}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New customer group</Trans> : (entity?.name ?? '')}
             </PageTitle>

package/src/app/routes/_authenticated/_customers/components/customer-address-card.tsx

@@ -1,27 +1,24 @@
-import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { ResultOf } from '@/graphql/graphql.js';
 
-import { ConfirmationDialog } from '@/vdb/components/shared/confirmation-dialog.js';
-import { Badge } from '@/vdb/components/ui/badge.js';
+import { addressFragment, deleteCustomerAddressDocument, updateCustomerAddressDocument } from '../customers.graphql.js';
 import {
-    Dialog,
     DialogContent,
-    DialogDescription,
+    Dialog,
+    DialogTrigger,
     DialogHeader,
     DialogTitle,
-    DialogTrigger,
-} from '@/vdb/components/ui/dialog.js';
-import { api } from '@/vdb/graphql/api.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
-import { useMutation } from '@tanstack/react-query';
+    DialogDescription,
+} from '@/components/ui/dialog.js';
+import { Trans } from '@/lib/trans.js';
+import { useLingui } from '@/lib/trans.js';
+import { AddressFormValues, CustomerAddressForm } from './customer-address-form.js';
 import { EditIcon, TrashIcon } from 'lucide-react';
 import { useState } from 'react';
+import { Badge } from '@/components/ui/badge.js';
+import { api } from '@/graphql/api.js';
+import { useMutation } from '@tanstack/react-query';
 import { toast } from 'sonner';
-import {
-    addressFragment,
-    deleteCustomerAddressDocument,
-    updateCustomerAddressDocument,
-} from '../customers.graphql.js';
-import { AddressFormValues, CustomerAddressForm } from './customer-address-form.js';
+import { ConfirmationDialog } from '@/components/shared/confirmation-dialog.js';
 
 export function CustomerAddressCard({
     address,
@@ -47,8 +44,8 @@ export function CustomerAddressCard({
         onError: () => {
             toast.error(i18n.t('Failed to delete address'));
         },
-    });
-
+    }); 
+    
     // Set up mutation for updating address
     const { mutate: updateAddress } = useMutation({
         mutationFn: api.mutate(updateCustomerAddressDocument),
@@ -132,7 +129,10 @@ export function CustomerAddressCard({
                                         <Trans>Edit the address details below.</Trans>
                                     </DialogDescription>
                                 </DialogHeader>
-                                <CustomerAddressForm address={address} onSubmit={onSubmit} />
+                                <CustomerAddressForm
+                                    address={address}
+                                    onSubmit={onSubmit}
+                                />
                             </DialogContent>
                         </Dialog>
                     )}

package/src/app/routes/_authenticated/_customers/components/customer-address-form.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@/vdb/components/ui/button.js';
-import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { Button } from '@/components/ui/button.js';
+import { Checkbox } from '@/components/ui/checkbox.js';
 import {
     Form,
     FormControl,
@@ -8,15 +8,15 @@ import {
     FormItem,
     FormLabel,
     FormMessage,
-} from '@/vdb/components/ui/form.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
-import { api } from '@/vdb/graphql/api.js';
-import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+} from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { api } from '@/graphql/api.js';
+import { graphql, ResultOf } from '@/graphql/graphql.js';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
-import { useForm } from 'react-hook-form';
+import { ControllerRenderProps, FieldPath, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { addressFragment } from '../customers.graphql.js';
 
@@ -58,7 +58,7 @@ interface CustomerAddressFormProps {
     onCancel?: () => void;
 }
 
-export function CustomerAddressForm({ address, onSubmit, onCancel }: Readonly<CustomerAddressFormProps>) {
+export function CustomerAddressForm({ address, onSubmit, onCancel }: CustomerAddressFormProps) {
     const { i18n } = useLingui();
 
     // Fetch available countries

package/src/app/routes/_authenticated/_customers/components/customer-history/customer-history-container.tsx

@@ -1,16 +1,16 @@
-import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Skeleton } from '@/vdb/components/ui/skeleton.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Alert, AlertDescription } from '@/components/ui/alert.js';
+import { Skeleton } from '@/components/ui/skeleton.js';
+import { Trans } from '@/lib/trans.js';
 import { TriangleAlert } from 'lucide-react';
 import { CustomerHistory } from './customer-history.js';
 import { useCustomerHistory } from './use-customer-history.js';
+import { Button } from '@/components/ui/button.js';
 
 interface CustomerHistoryContainerProps {
     customerId: string;
 }
 
-export function CustomerHistoryContainer({ customerId }: Readonly<CustomerHistoryContainerProps>) {
+export function CustomerHistoryContainer({ customerId }: CustomerHistoryContainerProps) {
     const {
         historyEntries,
         customer,

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

@@ -1,8 +1,8 @@
-import { HistoryEntry, HistoryEntryItem } from '@/vdb/components/shared/history-timeline/history-entry.js';
-import { HistoryNoteInput } from '@/vdb/components/shared/history-timeline/history-note-input.js';
-import { HistoryTimeline } from '@/vdb/components/shared/history-timeline/history-timeline.js';
-import { Badge } from '@/vdb/components/ui/badge.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { HistoryEntry, HistoryEntryItem } from '@/components/shared/history-timeline/history-entry.js';
+import { HistoryNoteInput } from '@/components/shared/history-timeline/history-note-input.js';
+import { HistoryTimeline } from '@/components/shared/history-timeline/history-timeline.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Trans } from '@/lib/trans.js';
 import { CheckIcon, SquarePen } from 'lucide-react';
 
 interface CustomerHistoryProps {
@@ -15,12 +15,7 @@ interface CustomerHistoryProps {
     onDeleteNote?: (entryId: string) => void;
 }
 
-export function CustomerHistory({
-    historyEntries,
-    onAddNote,
-    onUpdateNote,
-    onDeleteNote,
-}: CustomerHistoryProps) {
+export function CustomerHistory({ historyEntries, onAddNote, onUpdateNote, onDeleteNote }: CustomerHistoryProps) {
     const getTimelineIcon = (entry: CustomerHistoryProps['historyEntries'][0]) => {
         switch (entry.type) {
             case 'CUSTOMER_NOTE':
@@ -75,6 +70,7 @@ export function CustomerHistory({
                         </div>
                     </HistoryEntry>
                 ))}
+                
             </HistoryTimeline>
         </div>
     );

package/src/app/routes/_authenticated/_customers/components/customer-history/use-customer-history.ts

@@ -1,7 +1,7 @@
-import { api } from '@/vdb/graphql/api.js';
-import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
-import { useLingui } from '@/vdb/lib/trans.js';
-import { useInfiniteQuery, useMutation } from '@tanstack/react-query';
+import { api } from '@/graphql/api.js';
+import { graphql, ResultOf } from '@/graphql/graphql.js';
+import { useLingui } from '@/lib/trans.js';
+import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { toast } from 'sonner';