@vendure/dashboard 3.2.0 → 3.2.1

package/src/app/routes/_authenticated/_promotions/components/promotion-conditions-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 promotionConditionsDocument = graphql(
-    `
-        query GetPromotionConditions {
-            promotionConditions {
-                ...ConfigurableOperationDef
-            }
-        }
-    `,
-    [configurableOperationDefFragment],
-);
-
-interface PromotionConditionsSelectorProps {
-    value: ConfigurableOperationInputType[];
-    onChange: (value: ConfigurableOperationInputType[]) => void;
-}
-
-export function PromotionConditionsSelector({ value, onChange }: PromotionConditionsSelectorProps) {
-    const { data: conditionsData } = useQuery({
-        queryKey: ['promotionConditions'],
-        queryFn: () => api.query(promotionConditionsDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const conditions = conditionsData?.promotionConditions;
-
-    const onConditionSelected = (condition: ConfigurableOperationDefFragment) => {
-        const conditionDef = conditions?.find(c => c.code === condition.code);
-        if (!conditionDef) {
-            return;
-        }
-        onChange([
-            ...value,
-            {
-                code: condition.code,
-                arguments: conditionDef.args.map(arg => ({
-                    name: arg.name,
-                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-                })),
-            },
-        ]);
-    };
-
-    const onOperationValueChange = (
-        condition: ConfigurableOperationInputType,
-        newVal: ConfigurableOperationInputType,
-    ) => {
-        onChange(value.map(c => (c.code === condition.code ? newVal : c)));
-    };
-
-    const onOperationRemove = (index: number) => {
-        onChange(value.filter((_, i) => i !== index));
-    };
-
-    return (
-        <div className="flex flex-col gap-2 mt-4">
-            {(value ?? []).map((condition, index) => {
-                const conditionDef = conditions?.find(c => c.code === condition.code);
-                if (!conditionDef) {
-                    return null;
-                }
-                return (
-                    <div key={index} className="flex flex-col gap-2">
-                        <ConfigurableOperationInput
-                            operationDefinition={conditionDef}
-                            value={condition}
-                            onChange={value => onOperationValueChange(condition, value)}
-                            onRemove={() => onOperationRemove(index)}
-                        />
-                        <Separator className="my-2" />
-                    </div>
-                );
-            })}
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="outline">
-                        <Plus />
-                        <Trans context="Add new promotion condition">Add condition</Trans>
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-96">
-                    {conditions?.map(condition => (
-                        <DropdownMenuItem key={condition.code} onClick={() => onConditionSelected(condition)}>
-                            {condition.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 promotionConditionsDocument = graphql(
+    `
+        query GetPromotionConditions {
+            promotionConditions {
+                ...ConfigurableOperationDef
+            }
+        }
+    `,
+    [configurableOperationDefFragment],
+);
+
+interface PromotionConditionsSelectorProps {
+    value: ConfigurableOperationInputType[];
+    onChange: (value: ConfigurableOperationInputType[]) => void;
+}
+
+export function PromotionConditionsSelector({ value, onChange }: PromotionConditionsSelectorProps) {
+    const { data: conditionsData } = useQuery({
+        queryKey: ['promotionConditions'],
+        queryFn: () => api.query(promotionConditionsDocument),
+        staleTime: 1000 * 60 * 60 * 5,
+    });
+
+    const conditions = conditionsData?.promotionConditions;
+
+    const onConditionSelected = (condition: ConfigurableOperationDefFragment) => {
+        const conditionDef = conditions?.find(c => c.code === condition.code);
+        if (!conditionDef) {
+            return;
+        }
+        onChange([
+            ...value,
+            {
+                code: condition.code,
+                arguments: conditionDef.args.map(arg => ({
+                    name: arg.name,
+                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+                })),
+            },
+        ]);
+    };
+
+    const onOperationValueChange = (
+        condition: ConfigurableOperationInputType,
+        newVal: ConfigurableOperationInputType,
+    ) => {
+        onChange(value.map(c => (c.code === condition.code ? newVal : c)));
+    };
+
+    const onOperationRemove = (index: number) => {
+        onChange(value.filter((_, i) => i !== index));
+    };
+
+    return (
+        <div className="flex flex-col gap-2 mt-4">
+            {(value ?? []).map((condition, index) => {
+                const conditionDef = conditions?.find(c => c.code === condition.code);
+                if (!conditionDef) {
+                    return null;
+                }
+                return (
+                    <div key={index} className="flex flex-col gap-2">
+                        <ConfigurableOperationInput
+                            operationDefinition={conditionDef}
+                            value={condition}
+                            onChange={value => onOperationValueChange(condition, value)}
+                            onRemove={() => onOperationRemove(index)}
+                        />
+                        <Separator className="my-2" />
+                    </div>
+                );
+            })}
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline">
+                        <Plus />
+                        <Trans context="Add new promotion condition">Add condition</Trans>
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-96">
+                    {conditions?.map(condition => (
+                        <DropdownMenuItem key={condition.code} onClick={() => onConditionSelected(condition)}>
+                            {condition.description}
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_promotions/promotions.graphql.ts

@@ -1,96 +1,96 @@
-import { configurableOperationFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
-
-export const promotionListDocument = graphql(`
-    query PromotionList {
-        promotions {
-            items {
-                id
-                createdAt
-                updatedAt
-                name
-                enabled
-                description
-                couponCode
-                startsAt
-                endsAt
-                usageLimit
-                perCustomerUsageLimit
-            }
-            totalItems
-        }
-    }
-`);
-
-export const promotionDetailDocument = graphql(
-    `
-        query PromotionDetail($id: ID!) {
-            promotion(id: $id) {
-                id
-                createdAt
-                updatedAt
-                name
-                description
-                enabled
-                couponCode
-                perCustomerUsageLimit
-                usageLimit
-                startsAt
-                endsAt
-                conditions {
-                    ...ConfigurableOperation
-                }
-                actions {
-                    ...ConfigurableOperation
-                }
-                translations {
-                    id
-                    languageCode
-                    name
-                    description
-                }
-                customFields
-            }
-        }
-    `,
-    [configurableOperationFragment],
-);
-
-export const createPromotionDocument = graphql(`
-    mutation CreatePromotion($input: CreatePromotionInput!) {
-        createPromotion(input: $input) {
-            __typename
-            ... on Promotion {
-                id
-            }
-            ... on ErrorResult {
-                errorCode
-                message
-            }
-        }
-    }
-`);
-
-export const updatePromotionDocument = graphql(`
-    mutation UpdatePromotion($input: UpdatePromotionInput!) {
-        updatePromotion(input: $input) {
-            __typename
-            ... on Promotion {
-                id
-            }
-            ... on ErrorResult {
-                errorCode
-                message
-            }
-        }
-    }
-`);
-
-export const deletePromotionDocument = graphql(`
-    mutation DeletePromotion($id: ID!) {
-        deletePromotion(id: $id) {
-            result
-            message
-        }
-    }
-`);
+import { configurableOperationFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
+
+export const promotionListDocument = graphql(`
+    query PromotionList {
+        promotions {
+            items {
+                id
+                createdAt
+                updatedAt
+                name
+                enabled
+                description
+                couponCode
+                startsAt
+                endsAt
+                usageLimit
+                perCustomerUsageLimit
+            }
+            totalItems
+        }
+    }
+`);
+
+export const promotionDetailDocument = graphql(
+    `
+        query PromotionDetail($id: ID!) {
+            promotion(id: $id) {
+                id
+                createdAt
+                updatedAt
+                name
+                description
+                enabled
+                couponCode
+                perCustomerUsageLimit
+                usageLimit
+                startsAt
+                endsAt
+                conditions {
+                    ...ConfigurableOperation
+                }
+                actions {
+                    ...ConfigurableOperation
+                }
+                translations {
+                    id
+                    languageCode
+                    name
+                    description
+                }
+                customFields
+            }
+        }
+    `,
+    [configurableOperationFragment],
+);
+
+export const createPromotionDocument = graphql(`
+    mutation CreatePromotion($input: CreatePromotionInput!) {
+        createPromotion(input: $input) {
+            __typename
+            ... on Promotion {
+                id
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+        }
+    }
+`);
+
+export const updatePromotionDocument = graphql(`
+    mutation UpdatePromotion($input: UpdatePromotionInput!) {
+        updatePromotion(input: $input) {
+            __typename
+            ... on Promotion {
+                id
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+        }
+    }
+`);
+
+export const deletePromotionDocument = graphql(`
+    mutation DeletePromotion($id: ID!) {
+        deletePromotion(id: $id) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_promotions/promotions.tsx

@@ -1,61 +1,61 @@
-import { BooleanDisplayBadge } from '@/components/data-display/boolean.js';
-import { DetailPageButton } from '@/components/shared/detail-page-button.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 { PlusIcon } from 'lucide-react';
-import { deletePromotionDocument, promotionListDocument } from './promotions.graphql.js';
-
-export const Route = createFileRoute('/_authenticated/_promotions/promotions')({
-    component: PromotionListPage,
-    loader: () => ({ breadcrumb: () => <Trans>Promotions</Trans> }),
-});
-
-function PromotionListPage() {
-    return (
-        <ListPage
-            pageId="promotion-list"
-            listQuery={promotionListDocument}
-            deleteMutation={deletePromotionDocument}
-            route={Route}
-            title="Promotions"
-            defaultVisibility={{
-                name: true,
-                couponCode: true,
-                enabled: true,
-                startsAt: true,
-                endsAt: true,
-            }}
-            onSearchTermChange={searchTerm => {
-                return {
-                    name: { contains: searchTerm },
-                    couponCode: { contains: searchTerm },
-                };
-            }}
-            customizeColumns={{
-                name: {
-                    header: 'Name',
-                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
-                },
-                enabled: {
-                    header: 'Enabled',
-                    cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
-                },
-            }}
-        >
-            <PageActionBarRight>
-                <PermissionGuard requires={['CreatePromotion']}>
-                    <Button asChild>
-                        <Link to="./new">
-                            <PlusIcon className="mr-2 h-4 w-4" />
-                            <Trans>New Promotion</Trans>
-                        </Link>
-                    </Button>
-                </PermissionGuard>
-            </PageActionBarRight>
-        </ListPage>
-    );
-}
+import { BooleanDisplayBadge } from '@/components/data-display/boolean.js';
+import { DetailPageButton } from '@/components/shared/detail-page-button.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 { PlusIcon } from 'lucide-react';
+import { deletePromotionDocument, promotionListDocument } from './promotions.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_promotions/promotions')({
+    component: PromotionListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Promotions</Trans> }),
+});
+
+function PromotionListPage() {
+    return (
+        <ListPage
+            pageId="promotion-list"
+            listQuery={promotionListDocument}
+            deleteMutation={deletePromotionDocument}
+            route={Route}
+            title="Promotions"
+            defaultVisibility={{
+                name: true,
+                couponCode: true,
+                enabled: true,
+                startsAt: true,
+                endsAt: true,
+            }}
+            onSearchTermChange={searchTerm => {
+                return {
+                    name: { contains: searchTerm },
+                    couponCode: { contains: searchTerm },
+                };
+            }}
+            customizeColumns={{
+                name: {
+                    header: 'Name',
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+                enabled: {
+                    header: 'Enabled',
+                    cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
+                },
+            }}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreatePromotion']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            <Trans>New Promotion</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}