@vendure/dashboard 3.2.0

package/src/app/routes/_authenticated/_products/products.graphql.ts

@@ -0,0 +1,116 @@
+import { assetFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
+
+export const productListDocument = graphql(`
+    query ProductList($options: ProductListOptions) {
+        products(options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                featuredAsset {
+                    id
+                    preview
+                }
+                name
+                slug
+                enabled
+            }
+            totalItems
+        }
+    }
+`);
+
+export const productDetailFragment = graphql(
+    `
+        fragment ProductDetail on Product {
+            id
+            createdAt
+            updatedAt
+            enabled
+            name
+            slug
+            description
+            featuredAsset {
+                ...Asset
+            }
+            assets {
+                ...Asset
+            }
+            translations {
+                id
+                languageCode
+                name
+                slug
+                description
+            }
+
+            facetValues {
+                id
+                name
+                code
+                facet {
+                    id
+                    name
+                    code
+                }
+            }
+            customFields
+        }
+    `,
+    [assetFragment],
+);
+
+export const productVariantListDocument = graphql(`
+    query ProductVariantList($options: ProductVariantListOptions, $productId: ID) {
+        productVariants(options: $options, productId: $productId) {
+            items {
+                id
+                name
+                sku
+                currencyCode
+                price
+                priceWithTax
+            }
+        }
+    }
+`);
+
+export const productDetailDocument = graphql(
+    `
+        query ProductDetail($id: ID!) {
+            product(id: $id) {
+                ...ProductDetail
+                variantList {
+                    totalItems
+                }
+            }
+        }
+    `,
+    [productDetailFragment],
+);
+
+export const createProductDocument = graphql(`
+    mutation CreateProduct($input: CreateProductInput!) {
+        createProduct(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateProductDocument = graphql(`
+    mutation UpdateProduct($input: UpdateProductInput!) {
+        updateProduct(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteProductDocument = graphql(`
+    mutation DeleteProduct($id: ID!) {
+        deleteProduct(id: $id) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_products/products.tsx

@@ -0,0 +1,48 @@
+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 { PageActionBar, 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, TrashIcon } from 'lucide-react';
+import { deleteProductDocument, productListDocument } from './products.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_products/products')({
+    component: ProductListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Products</Trans> }),
+});
+
+function ProductListPage() {
+    return (
+        <ListPage
+            pageId="product-list"
+            listQuery={productListDocument}
+            deleteMutation={deleteProductDocument}
+            title="Products"
+            customizeColumns={{
+                name: {
+                    header: 'Product Name',
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+            }}
+            onSearchTermChange={searchTerm => {
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            route={Route}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateProduct', 'CreateCatalog']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            New Product
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}

package/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -0,0 +1,196 @@
+import { RichTextInput } from '@/components/data-input/richt-text-input.js';
+import { AssignedFacetValues } from '@/components/shared/assigned-facet-values.js';
+import { EntityAssets } from '@/components/shared/entity-assets.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 { TranslatableFormFieldWrapper } from '@/components/shared/translatable-form-field.js';
+import { Button } from '@/components/ui/button.js';
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/components/ui/form.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 { CreateProductVariantsDialog } from './components/create-product-variants-dialog.js';
+import { ProductVariantsTable } from './components/product-variants-table.js';
+import { createProductDocument, productDetailDocument, updateProductDocument } from './products.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_products/products_/$id')({
+    component: ProductDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: productDetailDocument,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/products', label: 'Products' },
+                isNew ? <Trans>New product</Trans> : entity?.name,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function ProductDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
+        queryDocument: productDetailDocument,
+        createDocument: createProductDocument,
+        updateDocument: updateProductDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                enabled: entity.enabled,
+                featuredAssetId: entity.featuredAsset?.id,
+                assetIds: entity.assets.map(asset => asset.id),
+                facetValueIds: entity.facetValues.map(facetValue => facetValue.id),
+                translations: entity.translations.map(translation => ({
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: translation.name,
+                    slug: translation.slug,
+                    description: translation.description,
+                    customFields: (translation as any).customFields,
+                })),
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(i18n.t('Successfully updated product'));
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../${data.id}`, from: Route.id });
+            }
+        },
+        onError: err => {
+            toast.error(i18n.t('Failed to update product'), {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId="product-detail" entity={entity} form={form} submitHandler={submitHandler}>
+            <PageTitle>{creatingNewEntity ? <Trans>New product</Trans> : (entity?.name ?? '')}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            <Trans>Update</Trans>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="side" blockId="enabled-toggle">
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="enabled"
+                        label={<Trans>Enabled</Trans>}
+                        description={<Trans>When enabled, a product is available in the shop</Trans>}
+                        render={({ field }) => (
+                            <Switch checked={field.value} onCheckedChange={field.onChange} />
+                        )}
+                    />
+                </PageBlock>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Product name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="slug"
+                            label={<Trans>Slug</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                    </DetailFormGrid>
+
+                    <TranslatableFormFieldWrapper
+                        control={form.control}
+                        name="description"
+                        label={<Trans>Description</Trans>}
+                        render={({ field }) => <RichTextInput {...field} />}
+                    />
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="Product" control={form.control} />
+                {entity && entity.variantList.totalItems > 0 && (
+                    <PageBlock column="main" blockId="product-variants-table">
+                        <ProductVariantsTable productId={params.id} />
+                    </PageBlock>
+                )}
+                {entity && entity.variantList.totalItems === 0 && (
+                    <PageBlock column="main" blockId="create-product-variants-dialog">
+                        <CreateProductVariantsDialog
+                            productId={entity.id}
+                            productName={entity.name}
+                            onSuccess={() => {
+                                refreshEntity();
+                            }}
+                        />
+                    </PageBlock>
+                )}
+                <PageBlock column="side" blockId="facet-values">
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="facetValueIds"
+                        label={<Trans>Facet values</Trans>}
+                        render={({ field }) => (
+                            <AssignedFacetValues facetValues={entity?.facetValues ?? []} {...field} />
+                        )}
+                    />
+                </PageBlock>
+                <PageBlock column="side" blockId="assets">
+                    <FormItem>
+                        <FormLabel>
+                            <Trans>Assets</Trans>
+                        </FormLabel>
+                        <FormControl>
+                            <EntityAssets
+                                assets={entity?.assets}
+                                featuredAsset={entity?.featuredAsset}
+                                compact={true}
+                                value={form.getValues()}
+                                onChange={value => {
+                                    form.setValue('featuredAssetId', value.featuredAssetId ?? undefined, {
+                                        shouldDirty: true,
+                                        shouldValidate: true,
+                                    });
+                                    form.setValue('assetIds', value.assetIds ?? [], {
+                                        shouldDirty: true,
+                                        shouldValidate: true,
+                                    });
+                                }}
+                            />
+                        </FormControl>
+                        <FormDescription></FormDescription>
+                        <FormMessage />
+                    </FormItem>
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_profile/profile.graphql.ts

@@ -0,0 +1,23 @@
+import { graphql } from '@/graphql/graphql.js';
+
+export const activeAdministratorDocument = graphql(`
+    query ActiveAdministrator {
+        activeAdministrator {
+            id
+            createdAt
+            updatedAt
+            firstName
+            lastName
+            emailAddress
+            customFields
+        }
+    }
+`);
+
+export const updateAdministratorDocument = graphql(`
+    mutation UpdateAdministrator($input: UpdateAdministratorInput!) {
+        updateAdministrator(input: $input) {
+            id
+        }
+    }
+`);

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

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

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

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