@vendure/dashboard 3.2.0 → 3.2.2

package/src/app/routes/_authenticated/_tax-rates/tax-rates_.$id.tsx

@@ -1,148 +1,148 @@
-import { AffixedInput } from '@/components/data-input/affixed-input.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 { TaxCategorySelector } from '@/components/shared/tax-category-selector.js';
-import { ZoneSelector } from '@/components/shared/zone-selector.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 { createTaxRateDocument, taxRateDetailQuery, updateTaxRateDocument } from './tax-rates.graphql.js';
-
-export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates_/$id')({
-    component: TaxRateDetailPage,
-    loader: detailPageRouteLoader({
-        queryDocument: taxRateDetailQuery,
-        breadcrumb(isNew, entity) {
-            return [
-                { path: '/tax-rates', label: 'Tax rates' },
-                isNew ? <Trans>New tax rate</Trans> : entity?.name,
-            ];
-        },
-    }),
-    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
-});
-
-function TaxRateDetailPage() {
-    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: taxRateDetailQuery,
-        createDocument: createTaxRateDocument,
-        updateDocument: updateTaxRateDocument,
-        setValuesForUpdate: entity => {
-            return {
-                id: entity.id,
-                name: entity.name,
-                value: entity.value,
-                enabled: entity.enabled,
-                categoryId: entity.category.id,
-                zoneId: entity.zone.id,
-                customerGroupId: entity.customerGroup?.id,
-                customFields: entity.customFields,
-            };
-        },
-        params: { id: params.id },
-        onSuccess: async data => {
-            toast.success(i18n.t('Successfully updated tax rate'));
-            resetForm();
-            if (creatingNewEntity) {
-                await navigate({ to: `../$id`, params: { id: data.id } });
-            }
-        },
-        onError: err => {
-            toast.error(i18n.t('Failed to update tax rate'), {
-                description: err instanceof Error ? err.message : 'Unknown error',
-            });
-        },
-    });
-
-    return (
-        <Page pageId="tax-rate-detail" form={form} submitHandler={submitHandler}>
-            <PageTitle>{creatingNewEntity ? <Trans>New tax rate</Trans> : (entity?.name ?? '')}</PageTitle>
-            <PageActionBar>
-                <PageActionBarRight>
-                    <PermissionGuard requires={['UpdateTaxRate']}>
-                        <Button
-                            type="submit"
-                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
-                        >
-                            <Trans>Update</Trans>
-                        </Button>
-                    </PermissionGuard>
-                </PageActionBarRight>
-            </PageActionBar>
-            <PageLayout>
-                <PageBlock column="side" blockId="enabled">
-                    <FormFieldWrapper
-                        control={form.control}
-                        name="enabled"
-                        label={<Trans>Enabled</Trans>}
-                        render={({ field }) => (
-                            <Switch checked={field.value} onCheckedChange={field.onChange} />
-                        )}
-                    />
-                </PageBlock>
-                <PageBlock column="main" blockId="main-form">
-                    <DetailFormGrid>
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="name"
-                            label={<Trans>Name</Trans>}
-                            render={({ field }) => <Input {...field} />}
-                        />
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="value"
-                            label={<Trans>Rate</Trans>}
-                            render={({ field }) => (
-                                <AffixedInput
-                                    type="number"
-                                    suffix="%"
-                                    value={field.value}
-                                    onChange={e => field.onChange(e.target.valueAsNumber)}
-                                />
-                            )}
-                        />
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="categoryId"
-                            label={<Trans>Tax category</Trans>}
-                            render={({ field }) => (
-                                <TaxCategorySelector value={field.value} onChange={field.onChange} />
-                            )}
-                        />
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="zoneId"
-                            label={<Trans>Zone</Trans>}
-                            render={({ field }) => (
-                                <ZoneSelector value={field.value} onChange={field.onChange} />
-                            )}
-                        />
-                    </DetailFormGrid>
-                </PageBlock>
-                <CustomFieldsPageBlock column="main" entityType="TaxRate" control={form.control} />
-            </PageLayout>
-        </Page>
-    );
-}
+import { AffixedInput } from '@/components/data-input/affixed-input.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 { TaxCategorySelector } from '@/components/shared/tax-category-selector.js';
+import { ZoneSelector } from '@/components/shared/zone-selector.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 { createTaxRateDocument, taxRateDetailQuery, updateTaxRateDocument } from './tax-rates.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates_/$id')({
+    component: TaxRateDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: taxRateDetailQuery,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/tax-rates', label: 'Tax rates' },
+                isNew ? <Trans>New tax rate</Trans> : entity?.name,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function TaxRateDetailPage() {
+    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: taxRateDetailQuery,
+        createDocument: createTaxRateDocument,
+        updateDocument: updateTaxRateDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                name: entity.name,
+                value: entity.value,
+                enabled: entity.enabled,
+                categoryId: entity.category.id,
+                zoneId: entity.zone.id,
+                customerGroupId: entity.customerGroup?.id,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(i18n.t('Successfully updated tax rate'));
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(i18n.t('Failed to update tax rate'), {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId="tax-rate-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>{creatingNewEntity ? <Trans>New tax rate</Trans> : (entity?.name ?? '')}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateTaxRate']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            <Trans>Update</Trans>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="side" blockId="enabled">
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="enabled"
+                        label={<Trans>Enabled</Trans>}
+                        render={({ field }) => (
+                            <Switch checked={field.value} onCheckedChange={field.onChange} />
+                        )}
+                    />
+                </PageBlock>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="value"
+                            label={<Trans>Rate</Trans>}
+                            render={({ field }) => (
+                                <AffixedInput
+                                    type="number"
+                                    suffix="%"
+                                    value={field.value}
+                                    onChange={e => field.onChange(e.target.valueAsNumber)}
+                                />
+                            )}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="categoryId"
+                            label={<Trans>Tax category</Trans>}
+                            render={({ field }) => (
+                                <TaxCategorySelector value={field.value} onChange={field.onChange} />
+                            )}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="zoneId"
+                            label={<Trans>Zone</Trans>}
+                            render={({ field }) => (
+                                <ZoneSelector value={field.value} onChange={field.onChange} />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="TaxRate" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_zones/components/zone-countries-sheet.tsx

@@ -1,31 +1,31 @@
-import { Button } from '@/components/ui/button.js';
-import { ScrollArea } from '@/components/ui/scroll-area.js';
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet.js';
-import { ZoneCountriesTable } from './zone-countries-table.js';
-
-interface ZoneCountriesSheetProps {
-    zoneId: string;
-    zoneName: string;
-    children?: React.ReactNode;
-}
-
-export function ZoneCountriesSheet({ zoneId, zoneName, children }: ZoneCountriesSheetProps) {
-    return (
-        <Sheet>
-            <SheetTrigger asChild>
-                <Button variant="outline" size="sm" className="flex items-center gap-2">
-                    {children}
-                </Button>
-            </SheetTrigger>
-            <SheetContent className="min-w-[800px]">
-                <SheetHeader>
-                    <SheetTitle>{zoneName}</SheetTitle>
-                </SheetHeader>
-                <div className="flex items-center gap-2"></div>
-                <ScrollArea className="px-6 max-h-[600px]">
-                    <ZoneCountriesTable zoneId={zoneId} />
-                </ScrollArea>
-            </SheetContent>
-        </Sheet>
-    );
-}
+import { Button } from '@/components/ui/button.js';
+import { ScrollArea } from '@/components/ui/scroll-area.js';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet.js';
+import { ZoneCountriesTable } from './zone-countries-table.js';
+
+interface ZoneCountriesSheetProps {
+    zoneId: string;
+    zoneName: string;
+    children?: React.ReactNode;
+}
+
+export function ZoneCountriesSheet({ zoneId, zoneName, children }: ZoneCountriesSheetProps) {
+    return (
+        <Sheet>
+            <SheetTrigger asChild>
+                <Button variant="outline" size="sm" className="flex items-center gap-2">
+                    {children}
+                </Button>
+            </SheetTrigger>
+            <SheetContent className="min-w-[800px]">
+                <SheetHeader>
+                    <SheetTitle>{zoneName}</SheetTitle>
+                </SheetHeader>
+                <div className="flex items-center gap-2"></div>
+                <ScrollArea className="px-6 max-h-[600px]">
+                    <ZoneCountriesTable zoneId={zoneId} />
+                </ScrollArea>
+            </SheetContent>
+        </Sheet>
+    );
+}

package/src/app/routes/_authenticated/_zones/components/zone-countries-table.tsx

@@ -1,79 +1,79 @@
-import { DataTable } from '@/components/data-table/data-table.js';
-import { api } from '@/graphql/api.js';
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { ColumnDef } from '@tanstack/react-table';
-import { useMemo, useState } from 'react';
-import { addCountryToZoneMutation, removeCountryFromZoneMutation, zoneMembersQuery } from '../zones.graphql.js';
-import { CountrySelector } from '@/components/shared/country-selector.js';
-
-interface ZoneCountriesTableProps {
-    zoneId: string;
-    canAddCountries?: boolean;
-}
-
-export function ZoneCountriesTable({ zoneId, canAddCountries = false }: ZoneCountriesTableProps) {
-    const { data, refetch } = useQuery({
-        queryKey: ['zone', zoneId],
-        queryFn: () => api.query(zoneMembersQuery, { zoneId }),
-    });
-
-    const { mutate: addCountryToZone } = useMutation({
-        mutationFn: api.mutate(addCountryToZoneMutation),
-        onSuccess: () => {
-            refetch();
-        },
-    });
-
-    const { mutate: removeCountryFromZone } = useMutation({
-        mutationFn: api.mutate(removeCountryFromZoneMutation),
-        onSuccess: () => {
-            refetch();
-        },
-    });
-
-    const [page, setPage] = useState(1);
-    const [pageSize, setPageSize] = useState(10);
-
-    const paginatedItems = useMemo(() => {
-        return data?.zone?.members?.slice((page - 1) * pageSize, page * pageSize);
-    }, [data, page, pageSize]);
-
-    const columns: ColumnDef<any>[] = [
-        {
-            header: 'Country',
-            accessorKey: 'name',
-        },
-        {
-            header: 'Enabled',
-            accessorKey: 'enabled',
-        },
-        {
-            header: 'Code',
-            accessorKey: 'code',
-        },
-    ];
-
-    return (
-        <div>
-            <DataTable
-                columns={columns}
-                data={paginatedItems ?? []}
-                onPageChange={(table, page, itemsPerPage) => {
-                setPage(page);
-                setPageSize(itemsPerPage);
-            }}
-                totalItems={data?.zone?.members?.length ?? 0}
-            />
-            {canAddCountries && (
-                <CountrySelector
-                    onSelect={country => {
-                        addCountryToZone({
-                            zoneId,
-                            memberIds: [country.id],
-                        });
-                    }}
-                />
-            )}
-        </div>
-    );
-}
+import { DataTable } from '@/components/data-table/data-table.js';
+import { api } from '@/graphql/api.js';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { ColumnDef } from '@tanstack/react-table';
+import { useMemo, useState } from 'react';
+import { addCountryToZoneMutation, removeCountryFromZoneMutation, zoneMembersQuery } from '../zones.graphql.js';
+import { CountrySelector } from '@/components/shared/country-selector.js';
+
+interface ZoneCountriesTableProps {
+    zoneId: string;
+    canAddCountries?: boolean;
+}
+
+export function ZoneCountriesTable({ zoneId, canAddCountries = false }: ZoneCountriesTableProps) {
+    const { data, refetch } = useQuery({
+        queryKey: ['zone', zoneId],
+        queryFn: () => api.query(zoneMembersQuery, { zoneId }),
+    });
+
+    const { mutate: addCountryToZone } = useMutation({
+        mutationFn: api.mutate(addCountryToZoneMutation),
+        onSuccess: () => {
+            refetch();
+        },
+    });
+
+    const { mutate: removeCountryFromZone } = useMutation({
+        mutationFn: api.mutate(removeCountryFromZoneMutation),
+        onSuccess: () => {
+            refetch();
+        },
+    });
+
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+
+    const paginatedItems = useMemo(() => {
+        return data?.zone?.members?.slice((page - 1) * pageSize, page * pageSize);
+    }, [data, page, pageSize]);
+
+    const columns: ColumnDef<any>[] = [
+        {
+            header: 'Country',
+            accessorKey: 'name',
+        },
+        {
+            header: 'Enabled',
+            accessorKey: 'enabled',
+        },
+        {
+            header: 'Code',
+            accessorKey: 'code',
+        },
+    ];
+
+    return (
+        <div>
+            <DataTable
+                columns={columns}
+                data={paginatedItems ?? []}
+                onPageChange={(table, page, itemsPerPage) => {
+                setPage(page);
+                setPageSize(itemsPerPage);
+            }}
+                totalItems={data?.zone?.members?.length ?? 0}
+            />
+            {canAddCountries && (
+                <CountrySelector
+                    onSelect={country => {
+                        addCountryToZone({
+                            zoneId,
+                            memberIds: [country.id],
+                        });
+                    }}
+                />
+            )}
+        </div>
+    );
+}