@vendure/dashboard 3.2.0

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

@@ -0,0 +1,169 @@
+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';
+
+import { customerHistoryDocument } from '../../customers.graphql.js';
+// Simplified mutation definitions - adjust based on your actual schema
+const addCustomerNoteDocument = graphql(`
+    mutation AddCustomerNote($customerId: ID!, $note: String!, $isPublic: Boolean!) {
+        addNoteToCustomer(input: { id: $customerId, note: $note, isPublic: $isPublic }) {
+            id
+            history(options: { take: 1, sort: { createdAt: DESC } }) {
+                items {
+                    id
+                    createdAt
+                    type
+                    isPublic
+                    data
+                }
+            }
+        }
+    }
+`);
+
+const updateCustomerNoteDocument = graphql(`
+    mutation UpdateCustomerNote($noteId: ID!, $note: String!) {
+        updateCustomerNote(input: { noteId: $noteId, note: $note }) {
+            id
+        }
+    }
+`);
+
+const deleteCustomerNoteDocument = graphql(`
+    mutation DeleteCustomerNote($noteId: ID!) {
+        deleteCustomerNote(id: $noteId) {
+            result
+            message
+        }
+    }
+`);
+
+export interface UseCustomerHistoryResult {
+    historyEntries: NonNullable<ResultOf<typeof customerHistoryDocument>['customer']>['history']['items'];
+    customer: ResultOf<typeof customerHistoryDocument>['customer'];
+    loading: boolean;
+    error: Error | null;
+    addNote: (note: string, isPrivate: boolean) => void;
+    updateNote: (noteId: string, note: string, isPrivate: boolean) => void;
+    deleteNote: (noteId: string) => void;
+    refetch: () => void;
+    fetchNextPage: () => void;
+    hasNextPage: boolean;
+}
+
+export function useCustomerHistory({
+    customerId,
+    pageSize = 10,
+}: {
+    customerId: string;
+    pageSize?: number;
+}): UseCustomerHistoryResult {
+    const [isLoading, setIsLoading] = useState(false);
+    const { i18n } = useLingui();
+
+    // Fetch order history
+    const {
+        data,
+        isLoading: isLoadingQuery,
+        error,
+        refetch,
+        fetchNextPage,
+        hasNextPage,
+    } = useInfiniteQuery({
+        queryFn: ({ pageParam = 0 }) =>
+            api.query(customerHistoryDocument, {
+                id: customerId,
+                options: {
+                    sort: { createdAt: 'DESC' },
+                    skip: pageParam * pageSize,
+                    take: pageSize,
+                },
+            }),
+        queryKey: ['CustomerHistory', customerId],
+        initialPageParam: 0,
+        getNextPageParam: (lastPage, pages, lastPageParam) => {
+            const totalItems = lastPage.customer?.history?.totalItems ?? 0;
+            const currentMaxItem = (lastPageParam + 1) * pageSize;
+            const nextPage = lastPageParam + 1;
+            return currentMaxItem < totalItems ? nextPage : undefined;
+        },
+    });
+
+    // Add note mutation
+    const { mutate: addNoteMutation } = useMutation({
+        mutationFn: api.mutate(addCustomerNoteDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Note added successfully'));
+            void refetch();
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to add note'));
+        },
+    });
+
+    const addNote = (note: string, isPrivate: boolean) => {
+        setIsLoading(true);
+        addNoteMutation({
+            customerId,
+            note,
+            isPublic: !isPrivate,
+        });
+    };
+
+    // Update note mutation
+    const { mutate: updateNoteMutation } = useMutation({
+        mutationFn: api.mutate(updateCustomerNoteDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Note updated successfully'));
+            void refetch();
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to update note'));
+        },
+    });
+    const updateNote = (noteId: string, note: string, isPrivate: boolean) => {
+        setIsLoading(true);
+
+        updateNoteMutation({
+            noteId,
+            note,
+        });
+    };
+
+    // Delete note mutation
+    const { mutate: deleteNoteMutation } = useMutation({
+        mutationFn: api.mutate(deleteCustomerNoteDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Note deleted successfully'));
+            void refetch();
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to delete note'));
+        },
+    });
+    const deleteNote = (noteId: string) => {
+        setIsLoading(true);
+        deleteNoteMutation({
+            noteId,
+        });
+    };
+
+    const historyEntries =
+        data?.pages.flatMap(page => page.customer?.history?.items).filter(x => x != null) ?? [];
+
+    return {
+        historyEntries,
+        customer: data?.pages[0]?.customer ?? null,
+        loading: isLoadingQuery || isLoading,
+        error,
+        addNote,
+        updateNote,
+        deleteNote,
+        refetch,
+        fetchNextPage,
+        hasNextPage,
+    };
+}

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

@@ -0,0 +1,88 @@
+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";
+
+interface CustomerOrderTableProps {
+    customerId: string;
+}
+
+export function CustomerOrderTable({ customerId }: 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} />;
+                },
+            },
+            totalWithTax: {
+                header: 'Total with Tax',
+                cell: ({ cell, row }) => {
+                    const value = cell.getValue();
+                    const currencyCode = row.original.currencyCode;
+                    return <Money value={value} currencyCode={currencyCode} />;
+                },
+            },
+            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>
+                    );
+                },
+            },
+        }}
+        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

@@ -0,0 +1,33 @@
+import { Badge } from '@/components/ui/badge.js';
+import { BadgeX, BadgeCheck } from 'lucide-react';
+import { Trans } from '@/lib/trans.js';
+
+export type CustomerStatus = 'guest' | 'registered' | 'verified';
+
+export interface CustomerStatusBadgeProps {
+    user?: { verified: boolean } | null;
+}
+
+export function CustomerStatusBadge({ user }: CustomerStatusBadgeProps) {
+    const status = user ? (user.verified ? 'verified' : 'registered') : 'guest';
+    return (
+        <Badge variant="outline">
+            {status === 'verified' ? (
+                <div className="flex items-center gap-2">
+                    <BadgeCheck className="w-4 h-4 text-success" />
+                    <Trans>Verified</Trans>
+                </div>
+            ) : status === 'registered' ? (
+                <div className="flex items-center gap-2">
+                    <BadgeCheck className="w-4 h-4" />
+                    <Trans>Registered</Trans>
+                </div>
+            ) : (
+                <div className="flex items-center gap-2">
+                    <BadgeX className="w-4 h-4" />
+                    <Trans>Unverified</Trans>
+                </div>
+            )}
+        </Badge>
+    );
+}

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

@@ -0,0 +1,204 @@
+import { graphql } from '@/graphql/graphql.js';
+import { gql } from 'awesome-graphql-client';
+
+export const customerListDocument = graphql(`
+    query GetCustomerList($options: CustomerListOptions) {
+        customers(options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                firstName
+                lastName
+                emailAddress
+                user {
+                    id
+                    verified
+                }
+            }
+            totalItems
+        }
+    }
+`);
+
+export const addressFragment = graphql(`
+    fragment Address on Address {
+        id
+        createdAt
+        updatedAt
+        fullName
+        company
+        streetLine1
+        streetLine2
+        city
+        province
+        postalCode
+        country {
+            id
+            code
+            name
+        }
+        phoneNumber
+        defaultShippingAddress
+        defaultBillingAddress
+    }
+`);
+
+export const customerDetailDocument = graphql(
+    `
+        query GetCustomerDetail($id: ID!) {
+            customer(id: $id) {
+                id
+                createdAt
+                updatedAt
+                title
+                firstName
+                lastName
+                phoneNumber
+                emailAddress
+                groups {
+                    id
+                    name
+                }
+                user {
+                    id
+                    identifier
+                    verified
+                    lastLogin
+                }
+                addresses {
+                    ...Address
+                }
+                customFields
+            }
+        }
+    `,
+    [addressFragment],
+);
+
+export const customerOrderListDocument = graphql(`
+    query GetCustomerOrderList($options: OrderListOptions, $customerId: ID!) {
+        customer(id: $customerId) {
+            id
+            orders(options: $options) {
+                items {
+                    id
+                    createdAt
+                    updatedAt
+                    type
+                    code
+                    orderPlacedAt
+                    state
+                    total
+                    totalWithTax
+                    currencyCode
+                }
+                totalItems
+            }
+        }
+    }
+`);
+
+export const createCustomerDocument = graphql(`
+    mutation CreateCustomer($input: CreateCustomerInput!) {
+        createCustomer(input: $input) {
+            __typename
+            ... on Customer {
+                id
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+        }
+    }
+`);
+
+export const updateCustomerDocument = graphql(`
+    mutation UpdateCustomer($input: UpdateCustomerInput!) {
+        updateCustomer(input: $input) {
+            __typename
+            ... on Customer {
+                id
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+        }
+    }
+`);
+
+export const deleteCustomerDocument = graphql(`
+    mutation DeleteCustomer($id: ID!) {
+        deleteCustomer(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+export const createCustomerAddressDocument = graphql(`
+    mutation CreateCustomerAddress($customerId: ID!, $input: CreateAddressInput!) {
+        createCustomerAddress(customerId: $customerId, input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateCustomerAddressDocument = graphql(`
+    mutation UpdateCustomerAddress($input: UpdateAddressInput!) {
+        updateCustomerAddress(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteCustomerAddressDocument = graphql(`
+    mutation DeleteCustomerAddress($id: ID!) {
+        deleteCustomerAddress(id: $id) {
+            success
+        }
+    }
+`);
+
+export const customerHistoryDocument = graphql(`
+    query GetCustomerHistory($id: ID!, $options: HistoryEntryListOptions) {
+        customer(id: $id) {
+            id
+            createdAt
+            updatedAt
+            history(options: $options) {
+                totalItems
+                items {
+                    id
+                    type
+                    createdAt
+                    isPublic
+                    administrator {
+                        id
+                        firstName
+                        lastName
+                    }
+                    data
+                }
+            }
+        }
+    }
+`);
+
+export const addCustomerToGroupDocument = graphql(`
+    mutation AddCustomerToGroup($customerId: ID!, $groupId: ID!) {
+        addCustomersToGroup(customerIds: [$customerId], customerGroupId: $groupId) {
+            id
+        }
+    }
+`);
+
+export const removeCustomerFromGroupDocument = graphql(`
+    mutation RemoveCustomerFromGroup($customerId: ID!, $groupId: ID!) {
+        removeCustomersFromGroup(customerIds: [$customerId], customerGroupId: $groupId) {
+            id
+        }
+    }
+`);

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

@@ -0,0 +1,82 @@
+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 { CustomerStatusBadge } from './components/customer-status-badge.js';
+import { customerListDocument, deleteCustomerDocument } from './customers.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_customers/customers')({
+    component: CustomerListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Customers</Trans> }),
+});
+
+function CustomerListPage() {
+    return (
+        <ListPage
+            title="Customers"
+            pageId="customer-list"
+            listQuery={customerListDocument}
+            deleteMutation={deleteCustomerDocument}
+            onSearchTermChange={searchTerm => {
+                return {
+                    lastName: {
+                        contains: searchTerm,
+                    },
+                    emailAddress: {
+                        contains: searchTerm,
+                    },
+                };
+            }}
+            transformVariables={variables => {
+                return {
+                    options: {
+                        ...variables.options,
+                        filterOperator: 'OR',
+                    },
+                };
+            }}
+            route={Route}
+            customizeColumns={{
+                user: {
+                    header: 'Status',
+                    cell: ({ cell }) => {
+                        const value = cell.getValue();
+                        return <CustomerStatusBadge user={value} />;
+                    },
+                },
+            }}
+            additionalColumns={{
+                name: {
+                    header: 'Name',
+                    cell: ({ row }) => {
+                        const value = `${row.original.firstName} ${row.original.lastName}`;
+                        return <DetailPageButton id={row.original.id} label={value} />;
+                    },
+                },
+            }}
+            defaultColumnOrder={['name', 'emailAddress', 'user', 'createdAt']}
+            defaultVisibility={{
+                id: false,
+                createdAt: false,
+                updatedAt: false,
+                firstName: false,
+                lastName: false,
+            }}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateCustomer']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon />
+                            <Trans>New Customer</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}