@vendure/dashboard 3.2.0

package/src/app/routes/_authenticated/_facets/facets.tsx

@@ -0,0 +1,97 @@
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { FacetValueChip } from '@/components/shared/facet-value-chip.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 { ResultOf } from 'gql.tada';
+import { PlusIcon } from 'lucide-react';
+import { FacetValuesSheet } from './components/facet-values-sheet.js';
+import { deleteFacetDocument, facetListDocument } from './facets.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_facets/facets')({
+    component: FacetListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Facets</Trans> }),
+});
+
+function FacetListPage() {
+    return (
+        <ListPage
+            pageId="facet-list"
+            title="Facets"
+            listQuery={facetListDocument}
+            deleteMutation={deleteFacetDocument}
+            customizeColumns={{
+                name: {
+                    header: 'Facet Name',
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+                valueList: {
+                    header: () => <Trans>Values</Trans>,
+                    cell: ({ cell }) => {
+                        const value = cell.getValue();
+                        if (!value) {
+                            return null;
+                        }
+                        const list = value as any as ResultOf<
+                            typeof facetListDocument
+                        >['facets']['items'][0]['valueList'];
+                        return (
+                            <div className="flex flex-wrap gap-2 items-center">
+                                {list.items.map(item => {
+                                    return (
+                                        <FacetValueChip
+                                            key={item.id}
+                                            facetValue={item}
+                                            removable={false}
+                                            displayFacetName={false}
+                                        />
+                                    );
+                                })}
+                                <FacetValuesSheet
+                                    facetId={cell.row.original.id}
+                                    facetName={cell.row.original.name}
+                                >
+                                    {list.totalItems > 3 ? (
+                                        <div>
+                                            <Trans>+ {list.totalItems - 3} more</Trans>
+                                        </div>
+                                    ) : (
+                                        <Trans>View values</Trans>
+                                    )}
+                                </FacetValuesSheet>
+                            </div>
+                        );
+                    },
+                },
+            }}
+            onSearchTermChange={searchTerm => {
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            transformVariables={variables => {
+                return {
+                    ...variables,
+                    facetValueListOptions: {
+                        take: 3,
+                    },
+                };
+            }}
+            route={Route}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateFacet', 'CreateCatalog']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            <Trans>New Facet</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}

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

@@ -0,0 +1,139 @@
+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,
+    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 { Trans, useLingui } from '@/lib/trans.js';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import { FacetValuesTable } from './components/facet-values-table.js';
+import { createFacetDocument, facetDetailDocument, updateFacetDocument } from './facets.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_facets/facets_/$id')({
+    component: FacetDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: facetDetailDocument,
+        breadcrumb(isNew, entity) {
+            return [{ path: '/facets', label: 'Facets' }, isNew ? <Trans>New facet</Trans> : entity?.name];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function FacetDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        queryDocument: facetDetailDocument,
+        createDocument: createFacetDocument,
+        updateDocument: updateFacetDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                isPrivate: entity.isPrivate,
+                code: entity.code,
+                translations: entity.translations.map(translation => ({
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: translation.name,
+                    customFields: (translation as any).customFields,
+                })),
+                values: [],
+                customFields: entity.customFields,
+            };
+        },
+        transformCreateInput: values => {
+            return {
+                ...values,
+                values: [],
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast(i18n.t('Successfully updated facet'), {
+                position: 'top-right',
+            });
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast(i18n.t('Failed to update facet'), {
+                position: 'top-right',
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId="facet-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>{creatingNewEntity ? <Trans>New facet</Trans> : (entity?.name ?? '')}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            <Trans>Update</Trans>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="side" blockId="privacy">
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="isPrivate"
+                        label={<Trans>Private</Trans>}
+                        description={<Trans>Private facets are not visible in the shop</Trans>}
+                        render={({ field }) => (
+                            <Switch checked={field.value} onCheckedChange={field.onChange} />
+                        )}
+                    />
+                </PageBlock>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="Facet" control={form.control} />
+                {entity && (
+                    <PageBlock column="main" blockId="facet-values" title={<Trans>Facet values</Trans>}>
+                        <FacetValuesTable facetId={entity?.id} />
+                    </PageBlock>
+                )}
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_global-settings/global-settings.graphql.ts

@@ -0,0 +1,28 @@
+import { graphql } from '@/graphql/graphql.js';
+
+export const globalSettingsDocument = graphql(`
+    query GlobalSettings {
+        globalSettings {
+            id
+            availableLanguages
+            trackInventory
+            outOfStockThreshold
+            customFields
+        }
+    }
+`);
+
+export const updateGlobalSettingsDocument = graphql(`
+    mutation UpdateGlobalSettings($input: UpdateGlobalSettingsInput!) {
+        updateGlobalSettings(input: $input) {
+            __typename
+            ... on GlobalSettings {
+                id
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+        }
+    }
+`);

package/src/app/routes/_authenticated/_global-settings/global-settings.tsx

@@ -0,0 +1,161 @@
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { LanguageSelector } from '@/components/shared/language-selector.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.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,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/framework/layout-engine/page-layout.js';
+import { useDetailPage } from '@/framework/page/use-detail-page.js';
+import { api } from '@/graphql/api.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import { globalSettingsDocument, updateGlobalSettingsDocument } from './global-settings.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_global-settings/global-settings')({
+    component: GlobalSettingsPage,
+    loader: async ({ context }) => {
+        await context.queryClient.ensureQueryData({
+            queryFn: () => api.query(globalSettingsDocument),
+            queryKey: ['DetailPage', 'globalSettings'],
+        });
+        return {
+            breadcrumb: [{ path: '/global-settings', label: <Trans>Global settings</Trans> }],
+        };
+    },
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function GlobalSettingsPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending } = useDetailPage({
+        queryDocument: globalSettingsDocument,
+        entityField: 'globalSettings',
+        updateDocument: updateGlobalSettingsDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                availableLanguages: entity.availableLanguages,
+                trackInventory: entity.trackInventory,
+                outOfStockThreshold: entity.outOfStockThreshold,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: 'undefined' },
+        onSuccess: async data => {
+            if (data.__typename === 'GlobalSettings') {
+                toast(i18n.t('Successfully updated global settings'), {
+                    position: 'top-right',
+                });
+                form.reset(form.getValues());
+                if (creatingNewEntity) {
+                    await navigate({ to: `../$id`, params: { id: data.id } });
+                }
+            } else {
+                toast(i18n.t('Failed to update global settings'), {
+                    position: 'top-right',
+                    description: data.message,
+                });
+            }
+        },
+        onError: err => {
+            toast(i18n.t('Failed to update global settings'), {
+                position: 'top-right',
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId="global-settings" form={form} submitHandler={submitHandler}>
+            <PageTitle>
+                <Trans>Global settings</Trans>
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateSettings', 'UpdateGlobalSettings']}>
+                        <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="availableLanguages"
+                            label={<Trans>Available languages</Trans>}
+                            description={
+                                <Trans>
+                                    Sets the languages that are available for all channels. Individual
+                                    channels can then support a subset of these languages.
+                                </Trans>
+                            }
+                            render={({ field }) => (
+                                <LanguageSelector
+                                    value={field.value ?? []}
+                                    onChange={field.onChange}
+                                    multiple={true}
+                                />
+                            )}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="outOfStockThreshold"
+                            label={<Trans>Global out of stock threshold</Trans>}
+                            description={
+                                <Trans>
+                                    Sets the stock level at which this a variant is considered to be out of
+                                    stock. Using a negative value enables backorder support. Can be overridden
+                                    by product variants.
+                                </Trans>
+                            }
+                            render={({ field }) => (
+                                <Input
+                                    value={field.value ?? []}
+                                    onChange={e => field.onChange(Number(e.target.valueAsNumber))}
+                                    type="number"
+                                />
+                            )}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="trackInventory"
+                            label={<Trans>Track inventory by default</Trans>}
+                            description={
+                                <Trans>
+                                    When tracked, product variant stock levels will be automatically adjusted
+                                    when sold. This setting can be overridden by individual product variants.
+                                </Trans>
+                            }
+                            render={({ field }) => (
+                                <Switch checked={field.value} onCheckedChange={field.onChange} />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="GlobalSettings" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/order-address.tsx

@@ -0,0 +1,58 @@
+import { ResultOf } from 'gql.tada';
+import { orderAddressFragment } from '../orders.graphql.js';
+import { Phone } from 'lucide-react';
+import { Separator } from '@/components/ui/separator.js';
+import { Globe } from 'lucide-react';
+
+type OrderAddress = ResultOf<typeof orderAddressFragment>;
+
+export function OrderAddress({ address }: { address?: OrderAddress }) {
+    if (!address) {
+        return null;
+    }
+
+    const {
+        fullName,
+        company,
+        streetLine1,
+        streetLine2,
+        city,
+        province,
+        postalCode,
+        country,
+        countryCode,
+        phoneNumber,
+    } = address;
+
+    return (
+        <div className="space-y-2">
+            {fullName && <p className="font-medium">{fullName}</p>}
+            {company && <p className="text-sm text-muted-foreground">{company}</p>}
+
+            <div className="text-sm">
+                {streetLine1 && <p>{streetLine1}</p>}
+                {streetLine2 && <p>{streetLine2}</p>}
+                <p>{[city, province, postalCode].filter(Boolean).join(', ')}</p>
+                {country && (
+                    <div className="flex items-center gap-1.5 mt-1">
+                        <Globe className="h-3 w-3 text-muted-foreground" />
+                        <span>{country}</span>
+                        {countryCode && (
+                            <span className="text-xs text-muted-foreground">({countryCode})</span>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            {phoneNumber && (
+                <>
+                    <Separator className="my-2" />
+                    <div className="flex items-center gap-1.5">
+                        <Phone className="h-3 w-3 text-muted-foreground" />
+                        <span className="text-sm">{phoneNumber}</span>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/order-history/index.ts

@@ -0,0 +1,3 @@
+export * from './order-history.js';
+export * from './order-history-container.js';
+export * from './use-order-history.js';

package/src/app/routes/_authenticated/_orders/components/order-history/order-history-container.tsx

@@ -0,0 +1,73 @@
+import { Alert, AlertDescription } from '@/components/ui/alert.js';
+import { Skeleton } from '@/components/ui/skeleton.js';
+import { TriangleAlert } from 'lucide-react';
+import { OrderHistory } from './order-history.js';
+import { useOrderHistory } from './use-order-history.js';
+import { Trans } from '@/lib/trans.js';
+import { Button } from '@/components/ui/button.js';
+interface OrderHistoryContainerProps {
+  orderId: string;
+}
+
+export function OrderHistoryContainer({ orderId }: OrderHistoryContainerProps) {
+  const { 
+    historyEntries, 
+    order, 
+    loading, 
+    error, 
+    addNote, 
+    updateNote, 
+    deleteNote,
+    fetchNextPage,
+    hasNextPage,
+  } = useOrderHistory({ orderId, pageSize: 10 });
+
+  if (loading && !order) {
+    return (
+      <div className="space-y-4">
+        <h2 className="text-xl font-semibold"><Trans>Order history</Trans></h2>
+        <div className="space-y-2">
+          <Skeleton className="h-20 w-full" />
+          <Skeleton className="h-24 w-full" />
+          <Skeleton className="h-24 w-full" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert variant="destructive">
+        <TriangleAlert className="h-4 w-4" />
+        <AlertDescription>
+          <Trans>Error loading order history: {error.message}</Trans>
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  if (!order) {
+    return (
+      <Alert>
+        <AlertDescription><Trans>Order not found</Trans></AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <>
+      <OrderHistory
+        order={order}
+        historyEntries={historyEntries ?? []}
+        onAddNote={addNote}
+        onUpdateNote={updateNote}
+        onDeleteNote={deleteNote}
+      />
+      {hasNextPage && (
+        <Button type="button" variant="outline" onClick={() => fetchNextPage()}>
+          <Trans>Load more</Trans>
+        </Button>
+      )}
+    </>
+  );
+} 

package/src/app/routes/_authenticated/_orders/components/order-history/order-history.tsx

@@ -0,0 +1,96 @@
+import { Badge } from '@/components/ui/badge.js';
+import { Trans } from '@/lib/trans.js';
+import { ArrowRightToLine, CheckIcon, CreditCardIcon, SquarePen } from 'lucide-react';
+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';
+
+interface OrderHistoryProps {
+    order: {
+        id: string;
+        createdAt: string;
+        currencyCode: string;
+    };
+    historyEntries: Array<HistoryEntryItem>;
+    onAddNote: (note: string, isPrivate: boolean) => void;
+    onUpdateNote?: (entryId: string, note: string, isPrivate: boolean) => void;
+    onDeleteNote?: (entryId: string) => void;
+}
+
+export function OrderHistory({ historyEntries, onAddNote, onUpdateNote, onDeleteNote }: OrderHistoryProps) {
+    const getTimelineIcon = (entry: OrderHistoryProps['historyEntries'][0]) => {
+        switch (entry.type) {
+            case 'ORDER_PAYMENT_TRANSITION':
+                return <CreditCardIcon className="h-4 w-4" />;
+            case 'ORDER_NOTE':
+                return <SquarePen className="h-4 w-4" />;
+            case 'ORDER_STATE_TRANSITION':
+                return <ArrowRightToLine className="h-4 w-4" />;
+            default:
+                return <CheckIcon className="h-4 w-4" />;
+        }
+    };
+
+    const getTitle = (entry: OrderHistoryProps['historyEntries'][0]) => {
+        switch (entry.type) {
+            case 'ORDER_PAYMENT_TRANSITION':
+                return <Trans>Payment settled</Trans>;
+            case 'ORDER_NOTE':
+                return <Trans>Note added</Trans>;
+            case 'ORDER_STATE_TRANSITION': {
+                if (entry.data.from === 'Created') {
+                    return <Trans>Order created</Trans>;
+                }
+                if (entry.data.to === 'Delivered') {
+                    return <Trans>Order fulfilled</Trans>;
+                }
+                if (entry.data.to === 'Cancelled') {
+                    return <Trans>Order cancelled</Trans>;
+                }
+                return <Trans>Order transitioned</Trans>;
+            }
+            default:
+                return <Trans>{entry.type.replace(/_/g, ' ').toLowerCase()}</Trans>;
+        }
+    };
+
+    return (
+        <div className="">
+            <div className="mb-4">
+                <HistoryNoteInput onAddNote={onAddNote} />
+            </div>
+            <HistoryTimeline onEditNote={onUpdateNote} onDeleteNote={onDeleteNote}>
+                {historyEntries.map(entry => (
+                    <HistoryEntry
+                        key={entry.id}
+                        entry={entry}
+                        isNoteEntry={entry.type === 'ORDER_NOTE'}
+                        timelineIcon={getTimelineIcon(entry)}
+                        title={getTitle(entry)}
+                    >
+                        {entry.type === 'ORDER_NOTE' && (
+                            <div className="flex items-center space-x-2">
+                                <Badge variant={entry.isPublic ? 'outline' : 'secondary'} className="text-xs">
+                                    {entry.isPublic ? 'Public' : 'Private'}
+                                </Badge>
+                                <span>{entry.data.note}</span>
+                            </div>
+                        )}
+                        <div className="text-sm text-muted-foreground">
+                            {entry.type === 'ORDER_STATE_TRANSITION' && entry.data.from !== 'Created' && (
+                                <Trans>
+                                    From {entry.data.from} to {entry.data.to}
+                                </Trans>
+                            )}
+                            {entry.type === 'ORDER_PAYMENT_TRANSITION' && (
+                                <Trans>
+                                    Payment #{entry.data.paymentId} transitioned to {entry.data.to}
+                                </Trans>
+                            )}
+                        </div>
+                    </HistoryEntry>
+                ))}
+            </HistoryTimeline>
+        </div>
+    );
+}