@vendure/dashboard 3.2.0

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

@@ -0,0 +1,274 @@
+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 {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog.js';
+import { Input } from '@/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    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';
+import { useMutation } from '@tanstack/react-query';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { CustomerAddressCard } from './components/customer-address-card.js';
+import { CustomerAddressForm } from './components/customer-address-form.js';
+import { CustomerHistoryContainer } from './components/customer-history/customer-history-container.js';
+import { CustomerOrderTable } from './components/customer-order-table.js';
+import { CustomerStatusBadge } from './components/customer-status-badge.js';
+import {
+    addCustomerToGroupDocument,
+    createCustomerAddressDocument,
+    createCustomerDocument,
+    customerDetailDocument,
+    removeCustomerFromGroupDocument,
+    updateCustomerDocument,
+} from './customers.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_customers/customers_/$id')({
+    component: CustomerDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: customerDetailDocument,
+        breadcrumb: (isNew, entity) => [
+            { path: '/customers', label: 'Customers' },
+            isNew ? <Trans>New customer</Trans> : `${entity?.firstName} ${entity?.lastName}`,
+        ],
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function CustomerDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { i18n } = useLingui();
+    const [newAddressOpen, setNewAddressOpen] = useState(false);
+
+    const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
+        queryDocument: customerDetailDocument,
+        createDocument: createCustomerDocument,
+        updateDocument: updateCustomerDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                title: entity.title,
+                emailAddress: entity.emailAddress,
+                firstName: entity.firstName,
+                lastName: entity.lastName,
+                phoneNumber: entity.phoneNumber,
+                addresses: entity.addresses,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            if (data.__typename === 'Customer') {
+                toast.success(i18n.t('Successfully updated customer'));
+                resetForm();
+                if (creatingNewEntity) {
+                    await navigate({ to: `../$id`, params: { id: data.id } });
+                }
+            } else {
+                toast.error(i18n.t('Failed to update customer'), {
+                    description: data.message,
+                });
+            }
+        },
+        onError: err => {
+            toast.error(i18n.t('Failed to update customer'), {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    const { mutate: createAddress } = useMutation({
+        mutationFn: api.mutate(createCustomerAddressDocument),
+        onSuccess: () => {
+            setNewAddressOpen(false);
+            refreshEntity();
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to create address'));
+        },
+    });
+
+    const { mutate: addCustomerToGroup } = useMutation({
+        mutationFn: api.mutate(addCustomerToGroupDocument),
+        onSuccess: () => {
+            refreshEntity();
+        },
+        onError: () => {
+            toast(i18n.t('Failed to add customer to group'));
+        },
+    });
+
+    const { mutate: removeCustomerFromGroup } = useMutation({
+        mutationFn: api.mutate(removeCustomerFromGroupDocument),
+        onSuccess: () => {
+            refreshEntity();
+        },
+        onError: () => {
+            toast(i18n.t('Failed to remove customer from group'));
+        },
+    });
+
+    const customerName = entity ? `${entity.firstName} ${entity.lastName}` : '';
+
+    return (
+        <Page pageId="customer-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>{creatingNewEntity ? <Trans>New customer</Trans> : customerName}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateCustomer']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            <Trans>Update</Trans>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="title"
+                            label={<Trans>Title</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <div></div>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="firstName"
+                            label={<Trans>First name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="lastName"
+                            label={<Trans>Last name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="emailAddress"
+                            label={<Trans>Email address</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="phoneNumber"
+                            label={<Trans>Phone number</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="Customer" control={form.control} />
+
+                {entity && (
+                    <>
+                        <PageBlock column="main" blockId="addresses" title={<Trans>Addresses</Trans>}>
+                            <DetailFormGrid>
+                                {entity?.addresses?.map(address => (
+                                    <CustomerAddressCard
+                                        key={address.id}
+                                        address={address}
+                                        editable
+                                        deletable
+                                        onUpdate={() => {
+                                            refreshEntity();
+                                        }}
+                                        onDelete={() => {
+                                            refreshEntity();
+                                        }}
+                                    />
+                                ))}
+                            </DetailFormGrid>
+
+                            <Dialog open={newAddressOpen} onOpenChange={setNewAddressOpen}>
+                                <DialogTrigger asChild>
+                                    <Button variant="outline">
+                                        <Plus className="w-4 h-4" /> <Trans>Add new address</Trans>
+                                    </Button>
+                                </DialogTrigger>
+                                <DialogContent>
+                                    <DialogHeader>
+                                        <DialogTitle>
+                                            <Trans>Add new address</Trans>
+                                        </DialogTitle>
+                                        <DialogDescription>
+                                            <Trans>Add a new address to the customer.</Trans>
+                                        </DialogDescription>
+                                    </DialogHeader>
+                                    <CustomerAddressForm
+                                        onSubmit={values => {
+                                            const { id, ...input } = values;
+                                            createAddress({
+                                                customerId: entity.id,
+                                                input,
+                                            });
+                                        }}
+                                    />
+                                </DialogContent>
+                            </Dialog>
+                        </PageBlock>
+
+                        <PageBlock column="main" blockId="orders" title={<Trans>Orders</Trans>}>
+                            <CustomerOrderTable customerId={entity.id} />
+                        </PageBlock>
+                        <PageBlock column="main" blockId="history" title={<Trans>Customer history</Trans>}>
+                            <CustomerHistoryContainer customerId={entity.id} />
+                        </PageBlock>
+                        <PageBlock column="side" blockId="status" title={<Trans>Status</Trans>}>
+                            <CustomerStatusBadge user={entity.user} />
+                        </PageBlock>
+                        <PageBlock column="side" blockId="groups" title={<Trans>Customer groups</Trans>}>
+                            <div
+                                className={`flex flex-col gap-2 ${entity?.groups?.length > 0 ? 'mb-2' : ''}`}
+                            >
+                                {entity?.groups?.map(group => (
+                                    <CustomerGroupChip
+                                        key={group.id}
+                                        group={group}
+                                        onRemove={groupId =>
+                                            removeCustomerFromGroup({ customerId: entity.id, groupId })
+                                        }
+                                    />
+                                ))}
+                            </div>
+                            <CustomerGroupSelector
+                                onSelect={group =>
+                                    addCustomerToGroup({ customerId: entity.id, groupId: group.id })
+                                }
+                            />
+                        </PageBlock>
+                    </>
+                )}
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_facets/components/edit-facet-value.tsx

@@ -0,0 +1,129 @@
+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 { useMutation, useQuery } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+
+const facetValuesDocument = graphql(`
+    query FacetValue($options: FacetValueListOptions) {
+        facetValues(options: $options) {
+            items {
+                id
+                name
+                code
+                customFields
+                translations {
+                    id
+                    languageCode
+                    name
+                }
+            }
+        }
+    }
+`);
+
+const updateFacetValueDocument = graphql(`
+    mutation UpdateFacetValue($input: [UpdateFacetValueInput!]!) {
+        updateFacetValues(input: $input) {
+            id
+        }
+    }
+`);
+
+export interface EditFacetValueProps {
+    facetValueId: string;
+    onSuccess?: () => void;
+}
+
+export function EditFacetValue({ facetValueId, onSuccess }: EditFacetValueProps) {
+    const {
+        settings: { contentLanguage },
+    } = useUserSettings();
+    const { refetchPaginatedList } = usePaginatedList();
+    const { data: facetValues } = useQuery({
+        queryKey: ['facetValues', facetValueId],
+        queryFn: () => api.query(facetValuesDocument, { options: { filter: { id: { eq: facetValueId } } } }),
+    });
+    const { mutate: updateFacetValue } = useMutation({
+        mutationFn: api.mutate(updateFacetValueDocument),
+        onSuccess: () => {
+            refetchPaginatedList();
+            onSuccess?.();
+        },
+    });
+    const facetValue = facetValues?.facetValues.items[0];
+
+    const form = useForm({
+        values: {
+            name: facetValue?.name ?? '',
+            code: facetValue?.code ?? '',
+        },
+    });
+
+    if (!facetValue) {
+        return <div>Facet value not found</div>;
+    }
+
+    const handleSave = (values: { name: string; code: string }) => {
+        const translations = facetValue.translations.map(translation => {
+            if (translation.languageCode === contentLanguage) {
+                return {
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: values.name,
+                };
+            }
+            return translation;
+        });
+        updateFacetValue({
+            input: [
+                {
+                    id: facetValue.id,
+                    translations,
+                    code: values.code,
+                },
+            ],
+        });
+    };
+
+    return (
+        <div className="grid gap-4">
+            <div className="space-y-2">
+                <h4 className="font-medium leading-none">Edit Facet Value</h4>
+                <p className="text-sm text-muted-foreground">Update the name and code of this facet value.</p>
+            </div>
+            <Form {...form}>
+                <form onSubmit={form.handleSubmit(handleSave)} className="grid gap-2">
+                    <FormItem>
+                        <FormLabel>
+                            <Trans>Name</Trans>
+                        </FormLabel>
+                        <FormControl>
+                            <Input placeholder="" {...form.register('name')} />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                    <FormItem>
+                        <FormLabel>
+                            <Trans>Code</Trans>
+                        </FormLabel>
+                        <FormControl>
+                            <Input placeholder="" {...form.register('code')} />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                    <div className="flex justify-end">
+                        <Button type="submit" size="sm">
+                            <Trans>Save changes</Trans>
+                        </Button>
+                    </div>
+                </form>
+            </Form>
+        </div>
+    );
+}

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

@@ -0,0 +1,46 @@
+import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from '@/components/ui/sheet.js';
+import { Trans } from '@/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;
+    facetId: string;
+    children?: React.ReactNode;
+}
+
+export function FacetValuesSheet({ facetName, facetId, children }: FacetValuesSheetProps) {
+    return (
+        <Sheet>
+            <SheetTrigger asChild>
+                <Button variant="outline" size="sm" className="flex items-center gap-2">
+                    {children}
+                    <PanelLeftOpen className="w-4 h-4" />
+                </Button>
+            </SheetTrigger>
+            <SheetContent className="min-w-[90vw] lg:min-w-[800px]">
+                <SheetHeader>
+                    <SheetTitle>
+                        <Trans>Facet values for {facetName}</Trans>
+                    </SheetTitle>
+                    <SheetDescription>
+                        <Trans>
+                            These are the facet values for the <strong>{facetName}</strong> facet.
+                        </Trans>
+                    </SheetDescription>
+                </SheetHeader>
+                <div className="px-4">
+                    <FacetValuesTable facetId={facetId} />
+                </div>
+            </SheetContent>
+        </Sheet>
+    );
+}

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

@@ -0,0 +1,97 @@
+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 { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { EditFacetValue } from './edit-facet-value.js';
+
+export const facetValueListDocument = graphql(`
+    query FacetValueList($options: FacetValueListOptions) {
+        facetValues(options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                name
+                code
+                customFields
+            }
+            totalItems
+        }
+    }
+`);
+
+
+export interface FacetValuesTableProps {
+    facetId: string;
+}
+
+export function FacetValuesTable({ facetId }: FacetValuesTableProps) {
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+    
+    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 },
+                        },
+                        sort: variables.options?.sort,
+                        take: pageSize,
+                        skip: (page - 1) * pageSize,
+                    },
+                };
+            }}
+            onSearchTermChange={searchTerm => {
+                return {
+                    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>
+                        );
+                    },
+                },
+            }}
+        />
+    );
+}

package/src/app/routes/_authenticated/_facets/facets.graphql.ts

@@ -0,0 +1,104 @@
+import { graphql } from '@/graphql/graphql.js';
+
+export const facetValueFragment = graphql(`
+    fragment FacetValue on FacetValue {
+        id
+        createdAt
+        updatedAt
+        languageCode
+        code
+        name
+        translations {
+            id
+            languageCode
+            name
+        }
+        facet {
+            id
+            createdAt
+            updatedAt
+            name
+            code
+        }
+    }
+`);
+
+export const facetWithValuesFragment = graphql(
+    `
+        fragment FacetWithValueList on Facet {
+            id
+            createdAt
+            updatedAt
+            name
+            code
+            languageCode
+            isPrivate
+            valueList(options: $facetValueListOptions) {
+                totalItems
+                items {
+                    ...FacetValue
+                }
+            }
+        }
+    `,
+    [facetValueFragment],
+);
+
+export const facetListDocument = graphql(
+    `
+        query FacetList($options: FacetListOptions, $facetValueListOptions: FacetValueListOptions) {
+            facets(options: $options) {
+                items {
+                    ...FacetWithValueList
+                }
+                totalItems
+            }
+        }
+    `,
+    [facetWithValuesFragment],
+);
+
+export const facetDetailDocument = graphql(`
+    query FacetDetail($id: ID!) {
+        facet(id: $id) {
+            id
+            createdAt
+            updatedAt
+            name
+            code
+            languageCode
+            isPrivate
+            translations {
+                id
+                languageCode
+                name
+            }
+            customFields
+        }
+    }
+`);
+
+export const createFacetDocument = graphql(`
+    mutation CreateFacet($input: CreateFacetInput!) {
+        createFacet(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateFacetDocument = graphql(`
+    mutation UpdateFacet($input: UpdateFacetInput!) {
+        updateFacet(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteFacetDocument = graphql(`
+    mutation DeleteFacet($id: ID!) {
+        deleteFacet(id: $id) {
+            result
+            message
+        }
+    }
+`);