@vendure/dashboard 3.2.0 → 3.2.2

package/src/app/routes/_authenticated/_profile/profile.tsx

@@ -1,122 +1,122 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.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 } from '@tanstack/react-router';
-import { toast } from 'sonner';
-import { activeAdministratorDocument, updateAdministratorDocument } from './profile.graphql.js';
-
-export const Route = createFileRoute('/_authenticated/_profile/profile')({
-    component: ProfilePage,
-    loader: async ({ context }) => {
-        await context.queryClient.ensureQueryData({
-            queryFn: () => api.query(activeAdministratorDocument),
-            queryKey: ['DetailPage', 'profile'],
-        });
-        return {
-            breadcrumb: [{ path: '/profile', label: <Trans>Profile</Trans> }],
-        };
-    },
-    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
-});
-
-function ProfilePage() {
-    const { i18n } = useLingui();
-
-    const { form, submitHandler, isPending } = useDetailPage({
-        queryDocument: activeAdministratorDocument,
-        entityField: 'activeAdministrator',
-        updateDocument: updateAdministratorDocument,
-        setValuesForUpdate: entity => {
-            return {
-                id: entity.id,
-                firstName: entity.firstName,
-                lastName: entity.lastName,
-                emailAddress: entity.emailAddress,
-                password: '',
-                customFields: entity.customFields,
-            };
-        },
-        transformUpdateInput: input => {
-            return {
-                ...input,
-                password: input.password?.length ? input.password : undefined,
-            };
-        },
-        params: { id: 'undefined' },
-        onSuccess: async data => {
-            toast(i18n.t('Successfully updated profile'), {
-                position: 'top-right',
-            });
-            form.reset(form.getValues());
-        },
-        onError: err => {
-            toast(i18n.t('Failed to update profile'), {
-                position: 'top-right',
-                description: err instanceof Error ? err.message : 'Unknown error',
-            });
-        },
-    });
-
-    return (
-        <Page pageId="profile" form={form} submitHandler={submitHandler}>
-            <PageTitle>
-                <Trans>Profile</Trans>
-            </PageTitle>
-            <PageActionBar>
-                <PageActionBarRight>
-                    <Button
-                        type="submit"
-                        disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
-                    >
-                        <Trans>Update</Trans>
-                    </Button>
-                </PageActionBarRight>
-            </PageActionBar>
-            <PageLayout>
-                <PageBlock column="main" blockId="main-form">
-                    <DetailFormGrid>
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="firstName"
-                            label={<Trans>First name</Trans>}
-                            render={({ field }) => <Input {...field} />}
-                        />
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="lastName"
-                            label={<Trans>Last name</Trans>}
-                            render={({ field }) => <Input {...field} />}
-                        />
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="emailAddress"
-                            label={<Trans>Email Address or identifier</Trans>}
-                            render={({ field }) => <Input {...field} />}
-                        />
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="password"
-                            label={<Trans>Password</Trans>}
-                            render={({ field }) => <Input type="password" {...field} />}
-                        />
-                    </DetailFormGrid>
-                </PageBlock>
-                <CustomFieldsPageBlock column="main" entityType="Administrator" control={form.control} />
-            </PageLayout>
-        </Page>
-    );
-}
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.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 } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import { activeAdministratorDocument, updateAdministratorDocument } from './profile.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_profile/profile')({
+    component: ProfilePage,
+    loader: async ({ context }) => {
+        await context.queryClient.ensureQueryData({
+            queryFn: () => api.query(activeAdministratorDocument),
+            queryKey: ['DetailPage', 'profile'],
+        });
+        return {
+            breadcrumb: [{ path: '/profile', label: <Trans>Profile</Trans> }],
+        };
+    },
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function ProfilePage() {
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, isPending } = useDetailPage({
+        queryDocument: activeAdministratorDocument,
+        entityField: 'activeAdministrator',
+        updateDocument: updateAdministratorDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                firstName: entity.firstName,
+                lastName: entity.lastName,
+                emailAddress: entity.emailAddress,
+                password: '',
+                customFields: entity.customFields,
+            };
+        },
+        transformUpdateInput: input => {
+            return {
+                ...input,
+                password: input.password?.length ? input.password : undefined,
+            };
+        },
+        params: { id: 'undefined' },
+        onSuccess: async data => {
+            toast(i18n.t('Successfully updated profile'), {
+                position: 'top-right',
+            });
+            form.reset(form.getValues());
+        },
+        onError: err => {
+            toast(i18n.t('Failed to update profile'), {
+                position: 'top-right',
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId="profile" form={form} submitHandler={submitHandler}>
+            <PageTitle>
+                <Trans>Profile</Trans>
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <Button
+                        type="submit"
+                        disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                    >
+                        <Trans>Update</Trans>
+                    </Button>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="firstName"
+                            label={<Trans>First name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="lastName"
+                            label={<Trans>Last name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="emailAddress"
+                            label={<Trans>Email Address or identifier</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="password"
+                            label={<Trans>Password</Trans>}
+                            render={({ field }) => <Input type="password" {...field} />}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="Administrator" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_promotions/components/promotion-actions-selector.tsx

@@ -1,107 +1,107 @@
-import { graphql } from '@/graphql/graphql.js';
-import { configurableOperationDefFragment, ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
-import { useQuery } from '@tanstack/react-query';
-import { Button } from '@/components/ui/button.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { Separator } from '@/components/ui/separator.js';
-import { Plus } from 'lucide-react';
-import { Trans } from '@/lib/trans.js';
-import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
-import { api } from '@/graphql/api.js';
-import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
-
-export const promotionActionsDocument = graphql(
-    `
-        query GetPromotionActions {
-            promotionActions {
-                ...ConfigurableOperationDef
-            }
-        }
-    `,
-    [configurableOperationDefFragment],
-);
-
-interface PromotionActionsSelectorProps {
-    value: ConfigurableOperationInputType[];
-    onChange: (value: ConfigurableOperationInputType[]) => void;
-}
-
-export function PromotionActionsSelector({ value, onChange }: PromotionActionsSelectorProps) {
-    const { data: actionsData } = useQuery({
-        queryKey: ['promotionActions'],
-        queryFn: () => api.query(promotionActionsDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const actions = actionsData?.promotionActions;
-
-    const onActionSelected = (action: ConfigurableOperationDefFragment) => {
-        const actionDef = actions?.find(a => a.code === action.code);
-        if (!actionDef) {
-            return;
-        }
-        onChange([
-            ...value,
-            {
-                code: action.code,
-                arguments: actionDef.args.map(arg => ({
-                    name: arg.name,
-                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-                })),
-            },
-        ]);
-    };
-
-    const onOperationValueChange = (
-        action: ConfigurableOperationInputType,
-        newVal: ConfigurableOperationInputType,
-    ) => {
-        onChange(value.map(a => (a.code === action.code ? newVal : a)));
-    };
-
-    const onOperationRemove = (index: number) => {
-        onChange(value.filter((_, i) => i !== index));
-    };
-
-    return (
-        <div className="flex flex-col gap-2 mt-4">
-            {(value ?? []).map((action, index) => {
-                const actionDef = actions?.find(a => a.code === action.code);
-                if (!actionDef) {
-                    return null;
-                }
-                return (
-                    <div key={index} className="flex flex-col gap-2">
-                        <ConfigurableOperationInput
-                            operationDefinition={actionDef}
-                            value={action}
-                            onChange={value => onOperationValueChange(action, value)}
-                            onRemove={() => onOperationRemove(index)}
-                        />
-                        <Separator className="my-2" />
-                    </div>
-                );
-            })}
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="outline">
-                        <Plus />
-                        <Trans context="Add new promotion action">Add action</Trans>
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-96">
-                    {actions?.map(action => (
-                        <DropdownMenuItem key={action.code} onClick={() => onActionSelected(action)}>
-                            {action.description}
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
-    );
-}
+import { graphql } from '@/graphql/graphql.js';
+import { configurableOperationDefFragment, ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { Separator } from '@/components/ui/separator.js';
+import { Plus } from 'lucide-react';
+import { Trans } from '@/lib/trans.js';
+import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
+import { api } from '@/graphql/api.js';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+
+export const promotionActionsDocument = graphql(
+    `
+        query GetPromotionActions {
+            promotionActions {
+                ...ConfigurableOperationDef
+            }
+        }
+    `,
+    [configurableOperationDefFragment],
+);
+
+interface PromotionActionsSelectorProps {
+    value: ConfigurableOperationInputType[];
+    onChange: (value: ConfigurableOperationInputType[]) => void;
+}
+
+export function PromotionActionsSelector({ value, onChange }: PromotionActionsSelectorProps) {
+    const { data: actionsData } = useQuery({
+        queryKey: ['promotionActions'],
+        queryFn: () => api.query(promotionActionsDocument),
+        staleTime: 1000 * 60 * 60 * 5,
+    });
+
+    const actions = actionsData?.promotionActions;
+
+    const onActionSelected = (action: ConfigurableOperationDefFragment) => {
+        const actionDef = actions?.find(a => a.code === action.code);
+        if (!actionDef) {
+            return;
+        }
+        onChange([
+            ...value,
+            {
+                code: action.code,
+                arguments: actionDef.args.map(arg => ({
+                    name: arg.name,
+                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+                })),
+            },
+        ]);
+    };
+
+    const onOperationValueChange = (
+        action: ConfigurableOperationInputType,
+        newVal: ConfigurableOperationInputType,
+    ) => {
+        onChange(value.map(a => (a.code === action.code ? newVal : a)));
+    };
+
+    const onOperationRemove = (index: number) => {
+        onChange(value.filter((_, i) => i !== index));
+    };
+
+    return (
+        <div className="flex flex-col gap-2 mt-4">
+            {(value ?? []).map((action, index) => {
+                const actionDef = actions?.find(a => a.code === action.code);
+                if (!actionDef) {
+                    return null;
+                }
+                return (
+                    <div key={index} className="flex flex-col gap-2">
+                        <ConfigurableOperationInput
+                            operationDefinition={actionDef}
+                            value={action}
+                            onChange={value => onOperationValueChange(action, value)}
+                            onRemove={() => onOperationRemove(index)}
+                        />
+                        <Separator className="my-2" />
+                    </div>
+                );
+            })}
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline">
+                        <Plus />
+                        <Trans context="Add new promotion action">Add action</Trans>
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-96">
+                    {actions?.map(action => (
+                        <DropdownMenuItem key={action.code} onClick={() => onActionSelected(action)}>
+                            {action.description}
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}