@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202510012036

package/src/app/routes/_authenticated/_products/product-option-groups.graphql.ts

@@ -0,0 +1,103 @@
+import { graphql } from '@/vdb/graphql/graphql.js';
+
+export const productOptionGroupDetailDocument = graphql(`
+    query ProductOptionGroupDetail($id: ID!) {
+        productOptionGroup(id: $id) {
+            id
+            createdAt
+            updatedAt
+            name
+            code
+            languageCode
+            translations {
+                id
+                languageCode
+                name
+            }
+            customFields
+        }
+    }
+`);
+
+export const productIdNameDocument = graphql(`
+    query ProductIdName($id: ID!) {
+        product(id: $id) {
+            id
+            name
+        }
+    }
+`);
+
+export const productOptionGroupIdNameDocument = graphql(`
+    query ProductOptionGroupIdName($id: ID!) {
+        productOptionGroup(id: $id) {
+            id
+            name
+        }
+    }
+`);
+
+export const createProductOptionGroupDocument = graphql(`
+    mutation CreateProductOptionGroup($input: CreateProductOptionGroupInput!) {
+        createProductOptionGroup(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateProductOptionGroupDocument = graphql(`
+    mutation UpdateProductOptionGroup($input: UpdateProductOptionGroupInput!) {
+        updateProductOptionGroup(input: $input) {
+            id
+        }
+    }
+`);
+
+export const productOptionDetailDocument = graphql(`
+    query ProductOptionDetail($id: ID!) {
+        productOption(id: $id) {
+            id
+            createdAt
+            updatedAt
+            name
+            code
+            languageCode
+            translations {
+                id
+                languageCode
+                name
+            }
+            group {
+                id
+                name
+                code
+            }
+            customFields
+        }
+    }
+`);
+
+export const createProductOptionDocument = graphql(`
+    mutation CreateProductOption($input: CreateProductOptionInput!) {
+        createProductOption(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateProductOptionDocument = graphql(`
+    mutation UpdateProductOption($input: UpdateProductOptionInput!) {
+        updateProductOption(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteProductOptionDocument = graphql(`
+    mutation DeleteProductOption($id: ID!) {
+        deleteProductOption(id: $id) {
+            result
+            message
+        }
+    }
+`);

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

@@ -15,6 +15,7 @@ export const productListDocument = graphql(`
                 name
                 slug
                 enabled
+                description
             }
             totalItems
         }
@@ -44,7 +45,11 @@ export const productDetailFragment = graphql(
                 slug
                 description
             }
-
+            optionGroups {
+                id
+                code
+                name
+            }
             facetValues {
                 id
                 name
@@ -55,7 +60,6 @@ export const productDetailFragment = graphql(
                     code
                 }
             }
-            customFields
         }
     `,
     [assetFragment],
@@ -104,45 +108,45 @@ export const productDetailDocument = graphql(
     [productDetailFragment],
 );
 
-export const productDetailWithVariantsDocument = graphql(
-    `
-        query ProductDetailWithVariants($id: ID!) {
-            product(id: $id) {
-                ...ProductDetail
-                variantList {
-                    totalItems
-                }
-                optionGroups {
+export const productDetailWithVariantsDocument = graphql(`
+    query ProductDetailWithVariants($id: ID!) {
+        product(id: $id) {
+            id
+            createdAt
+            updatedAt
+            name
+            variantList {
+                totalItems
+            }
+            optionGroups {
+                id
+                code
+                name
+                options {
                     id
                     code
                     name
-                    options {
-                        id
-                        code
-                        name
-                    }
                 }
-                variants {
+            }
+            variants {
+                id
+                name
+                sku
+                price
+                currencyCode
+                priceWithTax
+                createdAt
+                updatedAt
+                options {
                     id
+                    code
                     name
-                    sku
-                    price
-                    currencyCode
-                    priceWithTax
-                    createdAt
-                    updatedAt
-                    options {
-                        id
-                        code
-                        name
-                        groupId
-                    }
+                    groupId
                 }
             }
         }
-    `,
-    [productDetailFragment],
-);
+    }
+`);
 
 export const createProductDocument = graphql(`
     mutation CreateProduct($input: CreateProductInput!) {
@@ -332,3 +336,11 @@ export const createProductVariantsDocument = graphql(`
         }
     }
 `);
+
+export const reindexDocument = graphql(`
+    mutation Reindex {
+        reindex {
+            id
+        }
+    }
+`);

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

@@ -3,9 +3,12 @@ import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useMutation } from '@tanstack/react-query';
 import { createFileRoute, Link } from '@tanstack/react-router';
-import { PlusIcon } from 'lucide-react';
+import { PlusIcon, RefreshCwIcon } from 'lucide-react';
+import { toast } from 'sonner';
 import {
     AssignFacetValuesToProductsBulkAction,
     AssignProductsToChannelBulkAction,
@@ -13,7 +16,7 @@ import {
     DuplicateProductsBulkAction,
     RemoveProductsFromChannelBulkAction,
 } from './components/product-bulk-actions.js';
-import { productListDocument } from './products.graphql.js';
+import { productListDocument, reindexDocument } from './products.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_products/products')({
     component: ProductListPage,
@@ -21,14 +24,28 @@ export const Route = createFileRoute('/_authenticated/_products/products')({
 });
 
 function ProductListPage() {
+    const { t } = useLingui();
+    const reindexMutation = useMutation({
+        mutationFn: () => api.mutate(reindexDocument, {}),
+        onSuccess: () => {
+            toast.success(t`Search index rebuild started`);
+        },
+        onError: () => {
+            toast.error(t`Search index rebuild could not be started`);
+        },
+    });
+
+    const handleRebuildSearchIndex = () => {
+        reindexMutation.mutate();
+    };
+
     return (
         <ListPage
             pageId="product-list"
             listQuery={productListDocument}
-            title="Products"
+            title={<Trans>Products</Trans>}
             customizeColumns={{
                 name: {
-                    header: 'Product Name',
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
             }}
@@ -37,6 +54,12 @@ function ProductListPage() {
                     name: { contains: searchTerm },
                 };
             }}
+            defaultVisibility={{
+                name: true,
+                featuredAsset: true,
+                slug: true,
+                enabled: true,
+            }}
             route={Route}
             bulkActions={[
                 {
@@ -62,6 +85,12 @@ function ProductListPage() {
             ]}
         >
             <PageActionBarRight>
+                <PermissionGuard requires={['UpdateCatalog']}>
+                    <Button variant="outline" onClick={handleRebuildSearchIndex}>
+                        <RefreshCwIcon />
+                        <Trans>Rebuild search index</Trans>
+                    </Button>
+                </PermissionGuard>
                 <PermissionGuard requires={['CreateProduct', 'CreateCatalog']}>
                     <Button asChild>
                         <Link to="./new">

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

@@ -1,4 +1,5 @@
 import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
+import { SlugInput } from '@/vdb/components/data-input/slug-input.js';
 import { AssignedFacetValues } from '@/vdb/components/shared/assigned-facet-values.js';
 import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
@@ -6,7 +7,7 @@ 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 { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
+import { FormControl, FormDescription, FormItem, FormMessage } from '@/vdb/components/ui/form.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Switch } from '@/vdb/components/ui/switch.js';
 import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
@@ -22,12 +23,13 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { useRef } from 'react';
 import { toast } from 'sonner';
 import { CreateProductVariantsDialog } from './components/create-product-variants-dialog.js';
+import { ProductOptionGroupBadge } from './components/product-option-group-badge.js';
 import { ProductVariantsTable } from './components/product-variants-table.js';
 import { createProductDocument, productDetailDocument, updateProductDocument } from './products.graphql.js';
 
@@ -52,7 +54,7 @@ function ProductDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const refreshRef = useRef<() => void>(() => {});
 
     const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
@@ -81,14 +83,16 @@ function ProductDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t(creatingNewEntity ? 'Successfully created product' : 'Successfully updated product'));
+            toast.success(
+                creatingNewEntity ? t`Successfully created product` : t`Successfully updated product`,
+            );
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t(creatingNewEntity ? 'Failed to create product' : 'Failed to update product'), {
+            toast.error(creatingNewEntity ? t`Failed to create product` : t`Failed to update product`, {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },
@@ -133,7 +137,15 @@ function ProductDetailPage() {
                             control={form.control}
                             name="slug"
                             label={<Trans>Slug</Trans>}
-                            render={({ field }) => <Input {...field} />}
+                            render={({ field }) => (
+                                <SlugInput
+                                    {...field}
+                                    entityName="Product"
+                                    fieldName="slug"
+                                    watchFieldName="name"
+                                    entityId={entity?.id}
+                                />
+                            )}
                         />
                     </DetailFormGrid>
 
@@ -175,21 +187,26 @@ function ProductDetailPage() {
                         />
                     </PageBlock>
                 )}
-                <PageBlock column="side" blockId="facet-values">
+                {entity?.optionGroups.length ? (
+                    <PageBlock column="side" blockId="option-groups" title={<Trans>Product Options</Trans>}>
+                        <div className="flex flex-wrap gap-1.5">
+                            {entity.optionGroups.map(g => (
+                                <ProductOptionGroupBadge key={g.id} id={g.id} name={g.name} />
+                            ))}
+                        </div>
+                    </PageBlock>
+                ) : null}
+                <PageBlock column="side" blockId="facet-values" title={<Trans>Facet Values</Trans>}>
                     <FormFieldWrapper
                         control={form.control}
                         name="facetValueIds"
-                        label={<Trans>Facet values</Trans>}
                         render={({ field }) => (
                             <AssignedFacetValues facetValues={entity?.facetValues ?? []} {...field} />
                         )}
                     />
                 </PageBlock>
-                <PageBlock column="side" blockId="assets">
+                <PageBlock column="side" blockId="assets" title={<Trans>Assets</Trans>}>
                     <FormItem>
-                        <FormLabel>
-                            <Trans>Assets</Trans>
-                        </FormLabel>
                         <FormControl>
                             <EntityAssets
                                 assets={entity?.assets}

package/src/app/routes/_authenticated/_products/products_.$id_.variants.tsx

@@ -17,8 +17,8 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@
 import { Page, PageBlock, PageLayout, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
 import { api } from '@/vdb/graphql/api.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { Plus, Save, Trash2 } from 'lucide-react';
@@ -82,7 +82,7 @@ function AddOptionValueDialog({
     onSuccess?: () => void;
 }>) {
     const [open, setOpen] = useState(false);
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const form = useForm<AddOptionValueFormValues>({
         resolver: zodResolver(addOptionValueSchema),
@@ -94,14 +94,14 @@ function AddOptionValueDialog({
     const createOptionMutation = useMutation({
         mutationFn: api.mutate(createProductOptionDocument),
         onSuccess: () => {
-            toast.success(i18n.t('Successfully added option value'));
+            toast.success(t`Successfully added option value`);
             setOpen(false);
             form.reset();
             onSuccess?.();
         },
         onError: error => {
-            toast.error(i18n.t('Failed to add option value'), {
-                description: error instanceof Error ? error.message : i18n.t('Unknown error'),
+            toast.error(t`Failed to add option value`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
             });
         },
     });
@@ -141,7 +141,7 @@ function AddOptionValueDialog({
                             name="name"
                             label={<Trans>Option value name</Trans>}
                             render={({ field }) => (
-                                <Input {...field} placeholder={i18n.t('e.g., Red, Large, Cotton')} />
+                                <Input {...field} placeholder={t`e.g., Red, Large, Cotton`} />
                             )}
                         />
                         <DialogFooter>
@@ -158,7 +158,7 @@ function AddOptionValueDialog({
 
 function ManageProductVariants() {
     const { id } = Route.useParams();
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const [optionsToAddToVariant, setOptionsToAddToVariant] = useState<
         Record<string, Record<string, string>>
     >({});
@@ -171,7 +171,7 @@ function ManageProductVariants() {
     const updateVariantMutation = useMutation({
         mutationFn: api.mutate(updateProductVariantDocument),
         onSuccess: () => {
-            toast.success(i18n.t('Variant updated successfully'));
+            toast.success(t`Variant updated successfully`);
             refetch();
         },
     });
@@ -179,7 +179,7 @@ function ManageProductVariants() {
     const deleteVariantMutation = useMutation({
         mutationFn: api.mutate(deleteProductVariantDocument),
         onSuccess: () => {
-            toast.success(i18n.t('Variant deleted successfully'));
+            toast.success(t`Variant deleted successfully`);
             refetch();
         },
     });
@@ -187,7 +187,7 @@ function ManageProductVariants() {
     const removeOptionGroupMutation = useMutation({
         mutationFn: api.mutate(removeOptionGroupFromProductDocument),
         onSuccess: () => {
-            toast.success(i18n.t('Option group removed'));
+            toast.success(t`Option group removed`);
             refetch();
         },
     });
@@ -233,7 +233,7 @@ function ManageProductVariants() {
     };
 
     const deleteVariant = async (variant: Variant) => {
-        if (confirm(i18n.t('Are you sure you want to delete this variant?'))) {
+        if (confirm(t`Are you sure you want to delete this variant?`)) {
             await deleteVariantMutation.mutateAsync({ id: variant.id });
         }
     };

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