@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

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

@@ -1,88 +1,90 @@
-import { Money } from "@/components/data-display/money.js";
-import { PaginatedListDataTable } from "@/components/shared/paginated-list-data-table.js";
-import { Badge } from "@/components/ui/badge.js";
-import { Button } from "@/components/ui/button.js";
-import { Link } from "@tanstack/react-router";
-import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
-import { useState } from "react";
-import { customerOrderListDocument } from "../customers.graphql.js";
+import { Money } from '@/vdb/components/data-display/money.js';
+import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Link } from '@tanstack/react-router';
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { customerOrderListDocument } from '../customers.graphql.js';
 
 interface CustomerOrderTableProps {
     customerId: string;
 }
 
-export function CustomerOrderTable({ customerId }: CustomerOrderTableProps) {
+export function CustomerOrderTable({ customerId }: Readonly<CustomerOrderTableProps>) {
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [sorting, setSorting] = useState<SortingState>([{ id: 'orderPlacedAt', desc: true }]);
     const [filters, setFilters] = useState<ColumnFiltersState>([]);
 
-    return <PaginatedListDataTable
-        listQuery={customerOrderListDocument}
-        transformVariables={variables => {
-            return {
-                ...variables,
-                customerId,
-            };
-        }}
-        defaultVisibility={{
-            id: false,
-            createdAt: false,
-            updatedAt: false,
-            type: false,
-            currencyCode: false,
-            total: false,
-        }}
-        customizeColumns={{
-            total: {
-                header: 'Total',
-                cell: ({ cell, row }) => {
-                    const value = cell.getValue();
-                    const currencyCode = row.original.currencyCode;
-                    return <Money value={value} currencyCode={currencyCode} />;
+    return (
+        <PaginatedListDataTable
+            listQuery={customerOrderListDocument}
+            transformVariables={variables => {
+                return {
+                    ...variables,
+                    customerId,
+                };
+            }}
+            defaultVisibility={{
+                id: false,
+                createdAt: false,
+                updatedAt: false,
+                type: false,
+                currencyCode: false,
+                total: false,
+            }}
+            customizeColumns={{
+                total: {
+                    header: 'Total',
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue();
+                        const currencyCode = row.original.currencyCode;
+                        return <Money value={value} currency={currencyCode} />;
+                    },
                 },
-            },
-            totalWithTax: {
-                header: 'Total with Tax',
-                cell: ({ cell, row }) => {
-                    const value = cell.getValue();
-                    const currencyCode = row.original.currencyCode;
-                    return <Money value={value} currencyCode={currencyCode} />;
+                totalWithTax: {
+                    header: 'Total with Tax',
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue();
+                        const currencyCode = row.original.currencyCode;
+                        return <Money value={value} currency={currencyCode} />;
+                    },
                 },
-            },
-            state: {
-                header: 'State',
-                cell: ({ cell }) => {
-                    const value = cell.getValue() as string;
-                    return <Badge variant="outline">{value}</Badge>;
+                state: {
+                    header: 'State',
+                    cell: ({ cell }) => {
+                        const value = cell.getValue() as string;
+                        return <Badge variant="outline">{value}</Badge>;
+                    },
                 },
-            },
-            code: {
-                header: 'Code',
-                cell: ({ cell, row }) => {
-                    const value = cell.getValue() as string;
-                    const id = row.original.id;
-                    return (
-                        <Button asChild variant="ghost">
-                            <Link to={`/orders/${id}`}>{value}</Link>
-                        </Button>
-                    );
+                code: {
+                    header: 'Code',
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue() as string;
+                        const id = row.original.id;
+                        return (
+                            <Button asChild variant="ghost">
+                                <Link to={`/orders/${id}`}>{value}</Link>
+                            </Button>
+                        );
+                    },
                 },
-            },
-        }}
-        page={page}
-        itemsPerPage={pageSize}
-        sorting={sorting}
-        columnFilters={filters}
-        onPageChange={(_, page, perPage) => {
-            setPage(page);
-            setPageSize(perPage);
-        }}
-        onSortChange={(_, sorting) => {
-            setSorting(sorting);
-        }}
-        onFilterChange={(_, filters) => {
-            setFilters(filters);
-        }}
-    />;
+            }}
+            page={page}
+            itemsPerPage={pageSize}
+            sorting={sorting}
+            columnFilters={filters}
+            onPageChange={(_, page, perPage) => {
+                setPage(page);
+                setPageSize(perPage);
+            }}
+            onSortChange={(_, sorting) => {
+                setSorting(sorting);
+            }}
+            onFilterChange={(_, filters) => {
+                setFilters(filters);
+            }}
+        />
+    );
 }

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

@@ -1,6 +1,6 @@
-import { Badge } from '@/components/ui/badge.js';
-import { BadgeX, BadgeCheck } from 'lucide-react';
-import { Trans } from '@/lib/trans.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { BadgeCheck, BadgeX } from 'lucide-react';
 
 export type CustomerStatus = 'guest' | 'registered' | 'verified';
 
@@ -8,7 +8,7 @@ export interface CustomerStatusBadgeProps {
     user?: { verified: boolean } | null;
 }
 
-export function CustomerStatusBadge({ user }: CustomerStatusBadgeProps) {
+export function CustomerStatusBadge({ user }: Readonly<CustomerStatusBadgeProps>) {
     const status = user ? (user.verified ? 'verified' : 'registered') : 'guest';
     return (
         <Badge variant="outline">

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';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 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

@@ -1,11 +1,12 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import { 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/_customers/customers_.$id.tsx

@@ -1,9 +1,9 @@
-import { CustomerGroupChip } from '@/components/shared/customer-group-chip.js';
-import { CustomerGroupSelector } from '@/components/shared/customer-group-selector.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
+import { CustomerGroupChip } from '@/vdb/components/shared/customer-group-chip.js';
+import { CustomerGroupSelector } from '@/vdb/components/shared/customer-group-selector.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -11,9 +11,9 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { Input } from '@/components/ui/input.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -23,11 +23,11 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { api } from '@/graphql/api.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { useMutation } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Plus } from 'lucide-react';
@@ -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}>
+        <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/components/edit-facet-value.tsx

@@ -1,11 +1,11 @@
-import { usePaginatedList } from '@/components/shared/paginated-list-data-table.js';
-import { Button } from '@/components/ui/button.js';
-import { Form, FormControl, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Trans } from '@/lib/trans.js';
+import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Form, FormControl, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
 
@@ -40,7 +40,7 @@ export interface EditFacetValueProps {
     onSuccess?: () => void;
 }
 
-export function EditFacetValue({ facetValueId, onSuccess }: EditFacetValueProps) {
+export function EditFacetValue({ facetValueId, onSuccess }: Readonly<EditFacetValueProps>) {
     const {
         settings: { contentLanguage },
     } = useUserSettings();

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

@@ -0,0 +1,104 @@
+import { toast } from 'sonner';
+
+import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
+import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
+import { api } from '@/vdb/graphql/api.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useLingui } from '@/vdb/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/components/facet-values-sheet.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Sheet,
     SheetContent,
@@ -5,11 +6,10 @@ import {
     SheetHeader,
     SheetTitle,
     SheetTrigger,
-} from '@/components/ui/sheet.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/sheet.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { PanelLeftOpen } from 'lucide-react';
 import { FacetValuesTable } from './facet-values-table.js';
-import { Button } from '@/components/ui/button.js';
 
 export interface FacetValuesSheetProps {
     facetName: string;
@@ -17,7 +17,7 @@ export interface FacetValuesSheetProps {
     children?: React.ReactNode;
 }
 
-export function FacetValuesSheet({ facetName, facetId, children }: FacetValuesSheetProps) {
+export function FacetValuesSheet({ facetName, facetId, children }: Readonly<FacetValuesSheetProps>) {
     return (
         <Sheet>
             <SheetTrigger asChild>

package/src/app/routes/_authenticated/_facets/components/facet-values-table.tsx

@@ -1,12 +1,14 @@
-import { PaginatedListDataTable } from '@/components/shared/paginated-list-data-table.js';
-import { Button } from '@/components/ui/button.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { Link } from '@tanstack/react-router';
+import { Button } from '@/vdb/components/ui/button.js';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
-import { useState } from 'react';
-import { EditFacetValue } from './edit-facet-value.js';
+import { PlusIcon } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { deleteFacetValuesDocument } from '../facets.graphql.js';
 
 export const facetValueListDocument = graphql(`
     query FacetValueList($options: FacetValueListOptions) {
@@ -24,74 +26,83 @@ export const facetValueListDocument = graphql(`
     }
 `);
 
-
 export interface FacetValuesTableProps {
     facetId: string;
+    registerRefresher?: (refresher: () => void) => void;
 }
 
-export function FacetValuesTable({ facetId }: FacetValuesTableProps) {
+export function FacetValuesTable({ facetId, registerRefresher }: Readonly<FacetValuesTableProps>) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [filters, setFilters] = useState<ColumnFiltersState>([]);
-    
+    const refreshRef = useRef<() => void>(() => {});
+
     return (
-        <PaginatedListDataTable
-            listQuery={addCustomFields(facetValueListDocument)}
-            page={page}
-            itemsPerPage={pageSize}
-            sorting={sorting}
-            columnFilters={filters}
-            onPageChange={(_, page, perPage) => {
-                setPage(page);
-                setPageSize(perPage);
-            }}
-            onSortChange={(_, sorting) => {
-                setSorting(sorting);
-            }}
-            onFilterChange={(_, filters) => {
-                setFilters(filters);
-            }}
-            transformVariables={variables => {
-                const filter = variables.options?.filter ?? {};
-                return {
-                    options: {
-                        filter: {
-                            ...filter,
-                            facetId: { eq: facetId },
+        <>
+            <PaginatedListDataTable
+                listQuery={addCustomFields(facetValueListDocument)}
+                deleteMutation={deleteFacetValuesDocument}
+                page={page}
+                itemsPerPage={pageSize}
+                sorting={sorting}
+                columnFilters={filters}
+                onPageChange={(_, page, perPage) => {
+                    setPage(page);
+                    setPageSize(perPage);
+                }}
+                onSortChange={(_, sorting) => {
+                    setSorting(sorting);
+                }}
+                onFilterChange={(_, filters) => {
+                    setFilters(filters);
+                }}
+                registerRefresher={refresher => {
+                    refreshRef.current = refresher;
+                    registerRefresher?.(refresher);
+                }}
+                transformVariables={variables => {
+                    const filter = variables.options?.filter ?? {};
+                    return {
+                        options: {
+                            filter: {
+                                ...filter,
+                                facetId: { eq: facetId },
+                            },
+                            sort: variables.options?.sort,
+                            take: pageSize,
+                            skip: (page - 1) * pageSize,
                         },
-                        sort: variables.options?.sort,
-                        take: pageSize,
-                        skip: (page - 1) * pageSize,
-                    },
-                };
-            }}
-            onSearchTermChange={searchTerm => {
-                return {
+                    };
+                }}
+                onSearchTermChange={searchTerm => {
+                    return {
+                        name: {
+                            contains: searchTerm,
+                        },
+                    };
+                }}
+                customizeColumns={{
                     name: {
-                        contains: searchTerm,
-                    },
-                };
-            }}
-            additionalColumns={{
-                actions: {
-                    header: 'Actions',
-                    cell: ({ row }) => {
-                        const [open, setOpen] = useState(false);
-                        const facetValue = row.original;
-                        return (
-                            <Popover open={open} onOpenChange={setOpen}>
-                                <PopoverTrigger asChild>
-                                    <Button type="button" variant="outline" size="sm"><Trans>Edit</Trans></Button>
-                                </PopoverTrigger>
-                                <PopoverContent className="w-80">
-                                    <EditFacetValue facetValueId={facetValue.id} onSuccess={() => setOpen(false)} />
-                                </PopoverContent>
-                            </Popover>
-                        );
+                        header: 'Name',
+                        cell: ({ row }) => (
+                            <DetailPageButton
+                                id={row.original.id}
+                                label={row.original.name}
+                                href={`/facets/${facetId}/values/${row.original.id}`}
+                            />
+                        ),
                     },
-                },
-            }}
-        />
+                }}
+            />
+            <div className="mt-4">
+                <Button asChild variant="outline">
+                    <Link to="./values/new">
+                        <PlusIcon />
+                        <Trans>Add facet value</Trans>
+                    </Link>
+                </Button>
+            </div>
+        </>
     );
 }