@vendure/dashboard 3.2.0 → 3.2.2

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

@@ -1,161 +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>
-    );
-}
+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

@@ -1,58 +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>
-    );
-}
+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

@@ -1,3 +1,3 @@
-export * from './order-history.js';
-export * from './order-history-container.js';
-export * from './use-order-history.js';
+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

@@ -1,73 +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>
-      )}
-    </>
-  );
+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>
+      )}
+    </>
+  );
 }