@vendure/dashboard 3.2.0 → 3.2.2

package/src/app/routes/_authenticated/_sellers/sellers_.$id.tsx

@@ -1,111 +1,111 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
-import {
-    CustomFieldsPageBlock,
-    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 { createSellerDocument, sellerDetailDocument, updateSellerDocument } from './sellers.graphql.js';
-
-export const Route = createFileRoute('/_authenticated/_sellers/sellers_/$id')({
-    component: SellerDetailPage,
-    loader: detailPageRouteLoader({
-        queryDocument: sellerDetailDocument,
-        breadcrumb: (isNew, entity) => [
-            { path: '/sellers', label: 'Sellers' },
-            isNew ? <Trans>New seller</Trans> : entity?.name,
-        ],
-    }),
-    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
-});
-
-function SellerDetailPage() {
-    const params = Route.useParams();
-    const navigate = useNavigate();
-    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
-
-    const { form, submitHandler, entity, isPending } = useDetailPage({
-        queryDocument: sellerDetailDocument,
-        createDocument: createSellerDocument,
-        updateDocument: updateSellerDocument,
-        setValuesForUpdate: entity => {
-            return {
-                id: entity.id,
-                name: entity.name,
-                customFields: entity.customFields,
-            };
-        },
-        params: { id: params.id },
-        onSuccess: async data => {
-            toast(i18n.t('Successfully updated seller'), {
-                position: 'top-right',
-            });
-            form.reset(form.getValues());
-            if (creatingNewEntity) {
-                await navigate({ to: `../${data?.id}`, from: Route.id });
-            }
-        },
-        onError: err => {
-            toast(i18n.t('Failed to update seller'), {
-                position: 'top-right',
-                description: err instanceof Error ? err.message : 'Unknown error',
-            });
-        },
-    });
-
-    return (
-        <Page pageId="seller-detail" form={form} submitHandler={submitHandler}>
-            <PageTitle>{creatingNewEntity ? <Trans>New seller</Trans> : (entity?.name ?? '')}</PageTitle>
-            <PageActionBar>
-                <PageActionBarRight>
-                    <PermissionGuard requires={['UpdateSeller']}>
-                        <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">
-                    <div className="md:flex w-full gap-4">
-                        <div className="w-1/2">
-                            <FormField
-                                control={form.control}
-                                name="name"
-                                render={({ field }) => (
-                                    <FormItem>
-                                        <FormLabel>
-                                            <Trans>Name</Trans>
-                                        </FormLabel>
-                                        <FormControl>
-                                            <Input placeholder="" {...field} />
-                                        </FormControl>
-                                        <FormMessage />
-                                    </FormItem>
-                                )}
-                            />
-                        </div>
-                    </div>
-                </PageBlock>
-                <CustomFieldsPageBlock column="main" entityType="Seller" control={form.control} />
-            </PageLayout>
-        </Page>
-    );
-}
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Button } from '@/components/ui/button.js';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
+import {
+    CustomFieldsPageBlock,
+    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 { createSellerDocument, sellerDetailDocument, updateSellerDocument } from './sellers.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_sellers/sellers_/$id')({
+    component: SellerDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: sellerDetailDocument,
+        breadcrumb: (isNew, entity) => [
+            { path: '/sellers', label: 'Sellers' },
+            isNew ? <Trans>New seller</Trans> : entity?.name,
+        ],
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function SellerDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending } = useDetailPage({
+        queryDocument: sellerDetailDocument,
+        createDocument: createSellerDocument,
+        updateDocument: updateSellerDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                name: entity.name,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast(i18n.t('Successfully updated seller'), {
+                position: 'top-right',
+            });
+            form.reset(form.getValues());
+            if (creatingNewEntity) {
+                await navigate({ to: `../${data?.id}`, from: Route.id });
+            }
+        },
+        onError: err => {
+            toast(i18n.t('Failed to update seller'), {
+                position: 'top-right',
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId="seller-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>{creatingNewEntity ? <Trans>New seller</Trans> : (entity?.name ?? '')}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateSeller']}>
+                        <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">
+                    <div className="md:flex w-full gap-4">
+                        <div className="w-1/2">
+                            <FormField
+                                control={form.control}
+                                name="name"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>
+                                            <Trans>Name</Trans>
+                                        </FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </div>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="Seller" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_shipping-methods/components/fulfillment-handler-selector.tsx

@@ -1,56 +1,56 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { api } from '@/graphql/api.js';
-import { configurableOperationDefFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useQuery } from '@tanstack/react-query';
-
-export const fulfillmentHandlersDocument = graphql(
-    `
-        query GetFulfillmentHandlers {
-            fulfillmentHandlers {
-                ...ConfigurableOperationDef
-            }
-        }
-    `,
-    [configurableOperationDefFragment],
-);
-
-interface FulfillmentHandlerSelectorProps {
-    value: string | undefined;
-    onChange: (value: string | undefined) => void;
-}
-
-export function FulfillmentHandlerSelector({ value, onChange }: FulfillmentHandlerSelectorProps) {
-    const { data: fulfillmentHandlersData } = useQuery({    
-        queryKey: ['fulfillmentHandlers'],
-        queryFn: () => api.query(fulfillmentHandlersDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const fulfillmentHandlers = fulfillmentHandlersData?.fulfillmentHandlers;
-
-    const onFulfillmentHandlerSelected = (code: string) => {
-        const fulfillmentHandler = fulfillmentHandlers?.find(fh => fh.code === code);
-        if (!fulfillmentHandler) {
-            return;
-        }
-        onChange(fulfillmentHandler.code);
-    };
-
-    return (
-        <div>
-            <Select onValueChange={onFulfillmentHandlerSelected} value={value ?? undefined}>
-                <SelectTrigger>
-                    <SelectValue placeholder="Select a fulfillment handler" />
-                </SelectTrigger>
-                <SelectContent>
-                    {fulfillmentHandlers?.map(fulfillmentHandler => (
-                        <SelectItem key={fulfillmentHandler.code} value={fulfillmentHandler.code}>
-                            {fulfillmentHandler.description}
-                        </SelectItem>
-                    ))}
-                </SelectContent>
-            </Select>
-        </div>
-    );
-}
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { api } from '@/graphql/api.js';
+import { configurableOperationDefFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
+import { useQuery } from '@tanstack/react-query';
+
+export const fulfillmentHandlersDocument = graphql(
+    `
+        query GetFulfillmentHandlers {
+            fulfillmentHandlers {
+                ...ConfigurableOperationDef
+            }
+        }
+    `,
+    [configurableOperationDefFragment],
+);
+
+interface FulfillmentHandlerSelectorProps {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+}
+
+export function FulfillmentHandlerSelector({ value, onChange }: FulfillmentHandlerSelectorProps) {
+    const { data: fulfillmentHandlersData } = useQuery({    
+        queryKey: ['fulfillmentHandlers'],
+        queryFn: () => api.query(fulfillmentHandlersDocument),
+        staleTime: 1000 * 60 * 60 * 5,
+    });
+
+    const fulfillmentHandlers = fulfillmentHandlersData?.fulfillmentHandlers;
+
+    const onFulfillmentHandlerSelected = (code: string) => {
+        const fulfillmentHandler = fulfillmentHandlers?.find(fh => fh.code === code);
+        if (!fulfillmentHandler) {
+            return;
+        }
+        onChange(fulfillmentHandler.code);
+    };
+
+    return (
+        <div>
+            <Select onValueChange={onFulfillmentHandlerSelected} value={value ?? undefined}>
+                <SelectTrigger>
+                    <SelectValue placeholder="Select a fulfillment handler" />
+                </SelectTrigger>
+                <SelectContent>
+                    {fulfillmentHandlers?.map(fulfillmentHandler => (
+                        <SelectItem key={fulfillmentHandler.code} value={fulfillmentHandler.code}>
+                            {fulfillmentHandler.description}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-calculator-selector.tsx

@@ -1,101 +1,101 @@
-import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
-import { Button } from '@/components/ui/button.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { api } from '@/graphql/api.js';
-import { configurableOperationDefFragment, ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
-import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
-import { Plus } from 'lucide-react';
-
-export const shippingCalculatorsDocument = graphql(
-    `
-        query GetShippingCalculators {
-            shippingCalculators {
-                ...ConfigurableOperationDef
-            }
-        }
-    `,
-    [configurableOperationDefFragment],
-);
-
-interface ShippingCalculatorSelectorProps {
-    value: ConfigurableOperationInputType | undefined;
-    onChange: (value: ConfigurableOperationInputType | undefined) => void;
-}
-
-export function ShippingCalculatorSelector({ value, onChange }: ShippingCalculatorSelectorProps) {
-    const { data: calculatorsData } = useQuery({
-        queryKey: ['shippingCalculators'],
-        queryFn: () => api.query(shippingCalculatorsDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const calculators = calculatorsData?.shippingCalculators;
-
-    const onCalculatorSelected = (calculator: ConfigurableOperationDefFragment) => {
-        const calculatorDef = calculators?.find(c => c.code === calculator.code);
-        if (!calculatorDef) {
-            return;
-        }
-        onChange(
-            {
-                code: calculator.code,
-                arguments: calculatorDef.args.map(arg => ({
-                    name: arg.name,
-                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-                })),
-            },
-        );
-    };
-
-    const onOperationValueChange = (
-        newVal: ConfigurableOperationInputType,
-    ) => {
-        onChange(newVal);
-    };
-
-    const onOperationRemove = () => {
-        onChange(undefined);
-    };
-
-    const calculatorDef = calculators?.find(c => c.code === value?.code);
-
-    return (
-        <div className="flex flex-col gap-2 mt-4">
-            {value && calculatorDef && (
-                <div className="flex flex-col gap-2">
-                    <ConfigurableOperationInput
-                        operationDefinition={calculatorDef}
-                        value={value}
-                        onChange={value => onOperationValueChange(value)}
-                        onRemove={() => onOperationRemove()}
-                    />
-                </div>
-            )}
-            <DropdownMenu>
-                {!value && (
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="outline">
-                            <Plus />
-                            <Trans context="Add new promotion action">Select Shipping Calculator</Trans>
-                        </Button>
-                    </DropdownMenuTrigger>
-                )}
-                <DropdownMenuContent className="w-96">
-                    {calculators?.map(calculator => (
-                        <DropdownMenuItem key={calculator.code} onClick={() => onCalculatorSelected(calculator)}>
-                            {calculator.description}
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
-    );
-}
+import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { api } from '@/graphql/api.js';
+import { configurableOperationDefFragment, ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { Plus } from 'lucide-react';
+
+export const shippingCalculatorsDocument = graphql(
+    `
+        query GetShippingCalculators {
+            shippingCalculators {
+                ...ConfigurableOperationDef
+            }
+        }
+    `,
+    [configurableOperationDefFragment],
+);
+
+interface ShippingCalculatorSelectorProps {
+    value: ConfigurableOperationInputType | undefined;
+    onChange: (value: ConfigurableOperationInputType | undefined) => void;
+}
+
+export function ShippingCalculatorSelector({ value, onChange }: ShippingCalculatorSelectorProps) {
+    const { data: calculatorsData } = useQuery({
+        queryKey: ['shippingCalculators'],
+        queryFn: () => api.query(shippingCalculatorsDocument),
+        staleTime: 1000 * 60 * 60 * 5,
+    });
+
+    const calculators = calculatorsData?.shippingCalculators;
+
+    const onCalculatorSelected = (calculator: ConfigurableOperationDefFragment) => {
+        const calculatorDef = calculators?.find(c => c.code === calculator.code);
+        if (!calculatorDef) {
+            return;
+        }
+        onChange(
+            {
+                code: calculator.code,
+                arguments: calculatorDef.args.map(arg => ({
+                    name: arg.name,
+                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+                })),
+            },
+        );
+    };
+
+    const onOperationValueChange = (
+        newVal: ConfigurableOperationInputType,
+    ) => {
+        onChange(newVal);
+    };
+
+    const onOperationRemove = () => {
+        onChange(undefined);
+    };
+
+    const calculatorDef = calculators?.find(c => c.code === value?.code);
+
+    return (
+        <div className="flex flex-col gap-2 mt-4">
+            {value && calculatorDef && (
+                <div className="flex flex-col gap-2">
+                    <ConfigurableOperationInput
+                        operationDefinition={calculatorDef}
+                        value={value}
+                        onChange={value => onOperationValueChange(value)}
+                        onRemove={() => onOperationRemove()}
+                    />
+                </div>
+            )}
+            <DropdownMenu>
+                {!value && (
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="outline">
+                            <Plus />
+                            <Trans context="Add new promotion action">Select Shipping Calculator</Trans>
+                        </Button>
+                    </DropdownMenuTrigger>
+                )}
+                <DropdownMenuContent className="w-96">
+                    {calculators?.map(calculator => (
+                        <DropdownMenuItem key={calculator.code} onClick={() => onCalculatorSelected(calculator)}>
+                            {calculator.description}
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}