@vendure/dashboard 3.2.0

package/src/app/routes/_authenticated/_roles/roles.graphql.ts

@@ -0,0 +1,67 @@
+import { graphql } from '@/graphql/graphql.js';
+
+export const roleItemFragment = graphql(`
+    fragment RoleItem on Role {
+        id
+        createdAt
+        updatedAt
+        code
+        description
+        permissions
+        channels {
+            id
+            code
+            token
+        }
+    }
+`);
+
+export const roleListQuery = graphql(
+    `
+        query RoleList($options: RoleListOptions) {
+            roles(options: $options) {
+                items {
+                    ...RoleItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [roleItemFragment],
+);
+
+export const roleDetailDocument = graphql(
+    `
+        query RoleDetail($id: ID!) {
+            role(id: $id) {
+                ...RoleItem
+            }
+        }
+    `,
+    [roleItemFragment],
+);
+
+export const createRoleDocument = graphql(`
+    mutation RoleCreate($input: CreateRoleInput!) {
+        createRole(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateRoleDocument = graphql(`
+    mutation UpdateRole($input: UpdateRoleInput!) {
+        updateRole(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteRoleDocument = graphql(`
+    mutation DeleteRole($id: ID!) {
+        deleteRole(id: $id) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_roles/roles.tsx

@@ -0,0 +1,96 @@
+import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { RoleCodeLabel } from '@/components/shared/role-code-label.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/constants.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 { LayersIcon, PlusIcon } from 'lucide-react';
+import { ExpandablePermissions } from './components/expandable-permissions.js';
+import { deleteRoleDocument, roleListQuery } from './roles.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_roles/roles')({
+    component: RoleListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Roles</Trans> }),
+});
+
+const SYSTEM_ROLES = [SUPER_ADMIN_ROLE_CODE, CUSTOMER_ROLE_CODE];
+
+function RoleListPage() {
+    return (
+        <ListPage
+            pageId="role-list"
+            title="Roles"
+            listQuery={roleListQuery}
+            deleteMutation={deleteRoleDocument}
+            route={Route}
+            defaultVisibility={{
+                description: true,
+                code: true,
+                channels: true,
+                permissions: true,
+            }}
+            customizeColumns={{
+                code: {
+                    header: 'Code',
+                    cell: ({ row }) => {
+                        return (
+                            <DetailPageButton
+                                id={row.original.id}
+                                label={<RoleCodeLabel code={row.original.code} />}
+                                disabled={SYSTEM_ROLES.includes(row.original.code)}
+                            />
+                        );
+                    },
+                },
+                permissions: {
+                    header: 'Permissions',
+                    cell: ({ row }) => {
+                        if (SYSTEM_ROLES.includes(row.original.code)) {
+                            return (
+                                <span className="text-muted-foreground">
+                                    <Trans>This is a default Role and cannot be modified</Trans>
+                                </span>
+                            );
+                        }
+
+                        return <ExpandablePermissions role={row.original} />;
+                    },
+                },
+                channels: {
+                    header: 'Channels',
+                    cell: ({ row }) => {
+                        if (SYSTEM_ROLES.includes(row.original.code)) {
+                            return null;
+                        }
+
+                        return (
+                            <div className="flex flex-wrap gap-2">
+                                {row.original.channels.map(channel => (
+                                    <Badge variant="secondary" key={channel.code}>
+                                        <LayersIcon /> <ChannelCodeLabel code={channel.code} />
+                                    </Badge>
+                                ))}
+                            </div>
+                        );
+                    },
+                },
+            }}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateAdministrator']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            New Role
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}

package/src/app/routes/_authenticated/_roles/roles_.$id.tsx

@@ -0,0 +1,142 @@
+import { ChannelSelector } from '@/components/shared/channel-selector.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 { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
+import {
+    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 { PermissionsGrid } from './components/permissions-grid.js';
+import { createRoleDocument, roleDetailDocument, updateRoleDocument } from './roles.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_roles/roles_/$id')({
+    component: RoleDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: roleDetailDocument,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/roles', label: 'Roles' },
+                isNew ? <Trans>New role</Trans> : entity?.description,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function RoleDetailPage() {
+    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: roleDetailDocument,
+        createDocument: createRoleDocument,
+        updateDocument: updateRoleDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                code: entity.code,
+                description: entity.description,
+                permissions: entity.permissions,
+                channelIds: entity.channels.map(channel => channel.id),
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(i18n.t('Successfully updated role'));
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(i18n.t('Failed to update role'), {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId="role-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>{creatingNewEntity ? <Trans>New role</Trans> : (entity?.description ?? '')}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateAdministrator']}>
+                        <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">
+                    <DetailFormGrid>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="description"
+                            label={<Trans>Description</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <PageBlock column="main" blockId="channels">
+                    <div className="space-y-8">
+                        <div className="md:grid md:grid-cols-2 gap-4">
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="channelIds"
+                                label={<Trans>Channels</Trans>}
+                                description={
+                                    <Trans>
+                                        The selected permissions will be applied to the these channels.
+                                    </Trans>
+                                }
+                                render={({ field }) => (
+                                    <ChannelSelector
+                                        multiple={true}
+                                        value={field.value ?? []}
+                                        onChange={value => field.onChange(value)}
+                                    />
+                                )}
+                            />
+                        </div>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="permissions"
+                            label={<Trans>Permissions</Trans>}
+                            render={({ field }) => (
+                                <PermissionsGrid
+                                    value={field.value ?? []}
+                                    onChange={value => field.onChange(value)}
+                                />
+                            )}
+                        />
+                    </div>
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_sellers/sellers.graphql.ts

@@ -0,0 +1,61 @@
+import { graphql } from '@/graphql/graphql.js';
+
+export const sellerItemFragment = graphql(`
+    fragment SellerItem on Seller {
+        id
+        createdAt
+        updatedAt
+        name
+    }
+`);
+
+export const sellerListQuery = graphql(
+    `
+        query SellerList {
+            sellers {
+                items {
+                    ...SellerItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [sellerItemFragment],
+);
+
+export const sellerDetailDocument = graphql(
+    `
+        query SellerDetail($id: ID!) {
+            seller(id: $id) {
+                ...SellerItem
+                customFields
+            }
+        }
+    `,
+    [sellerItemFragment],
+);
+
+export const updateSellerDocument = graphql(`
+    mutation UpdateSeller($input: UpdateSellerInput!) {
+        updateSeller(input: $input) {
+            id
+        }
+    }
+`);
+
+export const createSellerDocument = graphql(`
+    mutation CreateSeller($input: CreateSellerInput!) {
+        createSeller(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteSellerDocument = graphql(`
+    mutation DeleteSeller($id: ID!) {
+        deleteSeller(id: $id) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_sellers/sellers.tsx

@@ -0,0 +1,51 @@
+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 { deleteSellerDocument, sellerListQuery } from './sellers.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_sellers/sellers')({
+    component: SellerListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Sellers</Trans> }),
+});
+
+function SellerListPage() {
+    return (
+        <ListPage
+            pageId="seller-list"
+            listQuery={sellerListQuery}
+            deleteMutation={deleteSellerDocument}
+            route={Route}
+            title="Sellers"
+            defaultVisibility={{
+                name: true,
+            }}
+            onSearchTermChange={searchTerm => {
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            customizeColumns={{
+                name: {
+                    header: 'Name',
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+            }}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateSeller']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            New Seller
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}

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

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

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

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

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

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