@wilshop/dashboard 3.5.2

package/src/app/routes/_authenticated/_products/products_.$productId.option-groups.$id.tsx

@@ -0,0 +1,177 @@
+import { SlugInput } from '@/vdb/components/data-input/index.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { createFileRoute, ParsedLocation, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import { ProductOptionsTable } from './components/product-options-table.js';
+import {
+    createProductOptionGroupDocument,
+    productIdNameDocument,
+    productOptionGroupDetailDocument,
+    updateProductOptionGroupDocument,
+} from './product-option-groups.graphql.js';
+
+const pageId = 'product-option-group-detail';
+
+export const Route = createFileRoute('/_authenticated/_products/products_/$productId/option-groups/$id')({
+    component: ProductOptionGroupDetailPage,
+    loader: async ({ context, params }: { context: any; params: any; location: ParsedLocation }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+
+        const { extendedQuery: extendedQueryDocument } = extendDetailFormQuery(
+            addCustomFields(productOptionGroupDetailDocument),
+            pageId,
+        );
+        const result = await context.queryClient.ensureQueryData(
+            getDetailQueryOptions(extendedQueryDocument, { id: params.id }),
+        );
+        const productResult = await context.queryClient.fetchQuery({
+            queryKey: [pageId, 'productIdName', params.productId],
+            queryFn: () => api.query(productIdNameDocument, { id: params.productId }),
+        });
+        const entityName = 'ProductOptionGroup';
+
+        if (!result.productOptionGroup) {
+            throw new Error(`${entityName} with the ID ${params.id} was not found`);
+        }
+        return {
+            breadcrumb: [
+                { path: '/products', label: <Trans>Products</Trans> },
+                { path: `/products/${productResult.product.id}`, label: productResult.product.name },
+                { path: `/products/${productResult.product.id}`, label: <Trans>Option Groups</Trans> },
+                result.productOptionGroup?.name,
+            ],
+        };
+    },
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function ProductOptionGroupDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { t } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: productOptionGroupDetailDocument,
+        createDocument: createProductOptionGroupDocument,
+        updateDocument: updateProductOptionGroupDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                code: entity.code,
+                translations: entity.translations.map(translation => ({
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: translation.name,
+                    customFields: (translation as any).customFields,
+                })),
+                options: [],
+                customFields: entity.customFields,
+            };
+        },
+        transformCreateInput: values => {
+            return {
+                ...values,
+                options: [],
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast(
+                creatingNewEntity
+                    ? t`Successfully created product option group`
+                    : t`Successfully updated product option group`,
+            );
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast(
+                creatingNewEntity
+                    ? t`Failed to create product option group`
+                    : t`Failed to update product option group`,
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
+        },
+    });
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>
+                {creatingNewEntity ? <Trans>New product option group</Trans> : (entity?.name ?? '')}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => (
+                                <SlugInput
+                                    fieldName="code"
+                                    watchFieldName="name"
+                                    entityName="ProductOptionGroup"
+                                    entityId={entity?.id}
+                                    {...field}
+                                />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="ProductOptionGroup" control={form.control} />
+                {entity && (
+                    <PageBlock column="main" blockId="product-options" title={<Trans>Product Options</Trans>}>
+                        <ProductOptionsTable productOptionGroupId={entity?.id} />
+                    </PageBlock>
+                )}
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_products/products_.$productId.option-groups.$productOptionGroupId.options_.$id.tsx

@@ -0,0 +1,204 @@
+import { SlugInput } from '@/vdb/components/data-input/index.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { createFileRoute, ParsedLocation, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import {
+    createProductOptionDocument,
+    productIdNameDocument,
+    productOptionDetailDocument,
+    productOptionGroupIdNameDocument,
+    updateProductOptionDocument,
+} from './product-option-groups.graphql.js';
+
+const pageId = 'product-option-detail';
+
+export const Route = createFileRoute(
+    '/_authenticated/_products/products_/$productId/option-groups/$productOptionGroupId/options_/$id',
+)({
+    component: ProductOptionDetailPage,
+    loader: async ({ context, params }: { context: any; params: any; location: ParsedLocation }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+
+        const isNew = params.id === NEW_ENTITY_PATH;
+        let optionGroupName: string | undefined;
+        let optionGroupId = params.productOptionGroupId;
+        const { extendedQuery: extendedQueryDocument } = extendDetailFormQuery(
+            addCustomFields(productOptionDetailDocument),
+            pageId,
+        );
+
+        const result = isNew
+            ? null
+            : await context.queryClient.ensureQueryData(
+                  getDetailQueryOptions(extendedQueryDocument, { id: params.id }),
+              );
+        const productResult = await context.queryClient.fetchQuery({
+            queryKey: [pageId, 'productIdName', params.productId],
+            queryFn: () => api.query(productIdNameDocument, { id: params.productId }),
+        });
+        const entityName = 'ProductOption';
+
+        if (!result?.productOption && !isNew) {
+            throw new Error(`${entityName} with the ID ${params.id} was not found`);
+        }
+        if (isNew) {
+            const optionGroupResult = await context.queryClient.fetchQuery({
+                queryKey: [pageId, 'optionGroupIdName', optionGroupId],
+                queryFn: () => api.query(productOptionGroupIdNameDocument, { id: optionGroupId }),
+            });
+            optionGroupName = optionGroupResult.productOptionGroup?.name;
+        } else {
+            optionGroupName = result.productOption.group.name;
+        }
+        const productId = params.productId;
+        return {
+            breadcrumb: [
+                { path: '/products', label: <Trans>Products</Trans> },
+                { path: `/products/${productId}`, label: productResult.product.name },
+                { path: `/products/${productId}`, label: <Trans>Option Groups</Trans> },
+                {
+                    path: `/products/${productId}/option-groups/${optionGroupId}`,
+                    label: optionGroupName,
+                },
+                isNew ? <Trans>New option</Trans> : result.productOption?.name,
+            ],
+        };
+    },
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function ProductOptionDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { t } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: productOptionDetailDocument,
+        createDocument: createProductOptionDocument,
+        updateDocument: updateProductOptionDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                code: entity.code,
+                name: entity.name,
+                translations: entity.translations.map(translation => ({
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: translation.name,
+                    customFields: (translation as any).customFields,
+                })),
+                customFields: entity.customFields as any,
+            };
+        },
+        transformCreateInput: (value): any => {
+            return {
+                ...value,
+                productOptionGroupId: params.productOptionGroupId,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast(
+                creatingNewEntity
+                    ? t`Successfully created product option`
+                    : t`Successfully updated product option`,
+            );
+            resetForm();
+            const created = Array.isArray(data) ? data[0] : data;
+            if (creatingNewEntity && created) {
+                await navigate({ to: `../$id`, params: { id: (created as any).id } });
+            }
+        },
+        onError: err => {
+            toast(
+                creatingNewEntity ? t`Failed to create product option` : t`Failed to update product option`,
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
+        },
+    });
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>
+                {creatingNewEntity ? <Trans>New product option</Trans> : ((entity as any)?.name ?? '')}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="side" blockId="option-group-info">
+                    {entity?.group && (
+                        <div className="space-y-2">
+                            <div className="text-sm font-medium">
+                                <Trans>Product Option Group</Trans>
+                            </div>
+                            <div className="text-sm text-muted-foreground">{entity?.group.name}</div>
+                            <div className="text-xs text-muted-foreground">{entity?.group.code}</div>
+                        </div>
+                    )}
+                </PageBlock>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => (
+                                <SlugInput
+                                    fieldName="code"
+                                    watchFieldName="name"
+                                    entityName="ProductOption"
+                                    entityId={entity?.id}
+                                    {...field}
+                                />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="ProductOption" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

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

@@ -0,0 +1,23 @@
+import { graphql } from '@/vdb/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,119 @@
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+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 { t } = 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(t`Successfully updated profile`);
+            form.reset(form.getValues());
+        },
+        onError: err => {
+            toast(t`Failed to update profile`, {
+                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,35 @@
+import { ConfigurableOperationMultiSelector } from '@/vdb/components/shared/configurable-operation-multi-selector.js';
+import { configurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.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 }: Readonly<PromotionActionsSelectorProps>) {
+    return (
+        <ConfigurableOperationMultiSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={promotionActionsDocument}
+            queryKey="promotionActions"
+            dataPath="promotionActions"
+            buttonText="Add action"
+            dropdownTitle="Available Actions"
+            showEnhancedDropdown={true}
+        />
+    );
+}

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

@@ -0,0 +1,72 @@
+import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
+import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
+
+import {
+    assignPromotionsToChannelDocument,
+    deletePromotionsDocument,
+    removePromotionsFromChannelDocument,
+} from '../promotions.graphql.js';
+
+export const DeletePromotionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deletePromotionsDocument}
+            entityName="promotions"
+            requiredPermissions={['DeletePromotion']}
+            selection={selection}
+            table={table}
+        />
+    );
+};
+
+export const AssignPromotionsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="promotions"
+            mutationFn={api.mutate(assignPromotionsToChannelDocument)}
+            requiredPermissions={['UpdatePromotion']}
+            buildInput={(channelId: string) => ({
+                promotionIds: selection.map(s => s.id),
+                channelId,
+            })}
+        />
+    );
+};
+
+export const RemovePromotionsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { activeChannel } = useChannel();
+
+    return (
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="promotions"
+            mutationFn={api.mutate(removePromotionsFromChannelDocument)}
+            requiredPermissions={['UpdatePromotion']}
+            buildInput={() => ({
+                promotionIds: selection.map(s => s.id),
+                channelId: activeChannel?.id,
+            })}
+        />
+    );
+};
+
+export const DuplicatePromotionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DuplicateBulkAction
+            entityType="Promotion"
+            duplicatorCode="promotion-duplicator"
+            requiredPermissions={['CreatePromotion']}
+            entityName="Promotion"
+            selection={selection}
+            table={table}
+        />
+    );
+};

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

@@ -0,0 +1,35 @@
+import { ConfigurableOperationMultiSelector } from '@/vdb/components/shared/configurable-operation-multi-selector.js';
+import { configurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.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 }: Readonly<PromotionConditionsSelectorProps>) {
+    return (
+        <ConfigurableOperationMultiSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={promotionConditionsDocument}
+            queryKey="promotionConditions"
+            dataPath="promotionConditions"
+            buttonText="Add condition"
+            dropdownTitle="Available Conditions"
+            showEnhancedDropdown={true}
+        />
+    );
+}