@wilshop/dashboard 3.5.2

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

@@ -0,0 +1,258 @@
+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';
+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, 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';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} 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 '@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 {
+    assignProductsToChannelDocument,
+    createProductDocument,
+    productDetailDocument,
+    removeProductsFromChannelDocument,
+    updateProductDocument,
+} from './products.graphql.js';
+import { api } from '@/vdb/graphql/api.js';
+import { AssignedChannels } from '@/vdb/components/shared/assigned-channels.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+
+const pageId = 'product-detail';
+
+export const Route = createFileRoute('/_authenticated/_products/products_/$id')({
+    component: ProductDetailPage,
+    loader: detailPageRouteLoader({
+        pageId,
+        queryDocument: productDetailDocument,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/products', label: <Trans>Products</Trans> },
+                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 { t } = useLingui();
+    const refreshRef = useRef<() => void>(() => {});
+    const { channels } = useChannel();
+
+    const { form, submitHandler, entity, isPending, refreshEntity, resetForm } = useDetailPage({
+        pageId,
+        entityName: 'Product',
+        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),
+                channelIds: entity.channels.map(c => c.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 as any,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            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(creatingNewEntity ? t`Failed to create product` : t`Failed to update product`, {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <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}
+                        >
+                            {creatingNewEntity ? <Trans>Create</Trans> : <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 }) => (
+                                <SlugInput
+                                    {...field}
+                                    entityName="Product"
+                                    fieldName="slug"
+                                    watchFieldName="name"
+                                    entityId={entity?.id}
+                                />
+                            )}
+                        />
+                    </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}
+                            registerRefresher={refresher => {
+                                refreshRef.current = refresher;
+                            }}
+                            fromProductDetailPage={true}
+                        />
+                        <div className="mt-4 flex gap-2">
+                            <Button asChild variant="outline">
+                                <Link to="./variants">
+                                    <PlusIcon className="mr-2 h-4 w-4" />
+                                    <Trans>Manage variants</Trans>
+                                </Link>
+                            </Button>
+                        </div>
+                    </PageBlock>
+                )}
+                {entity && entity.variantList.totalItems === 0 && (
+                    <PageBlock column="main" blockId="create-product-variants-dialog">
+                        <CreateProductVariantsDialog
+                            productId={entity.id}
+                            productName={entity.name}
+                            onSuccess={() => {
+                                refreshEntity();
+                            }}
+                        />
+                    </PageBlock>
+                )}
+                {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"
+                        render={({ field }) => (
+                            <AssignedFacetValues facetValues={entity?.facetValues ?? []} {...field} />
+                        )}
+                    />
+                </PageBlock>
+                {channels.length > 1 && entity && (
+                    <PageBlock column="side" blockId="channels" title={<Trans>Channels</Trans>}>
+                        <AssignedChannels
+                            channels={entity.channels}
+                            entityId={entity.id}
+                            canUpdate={!creatingNewEntity}
+                            assignMutationFn={api.mutate(assignProductsToChannelDocument)}
+                            removeMutationFn={api.mutate(removeProductsFromChannelDocument)}
+                        />
+                    </PageBlock>
+                )}
+
+                <PageBlock column="side" blockId="assets" title={<Trans>Assets</Trans>}>
+                    <FormItem>
+                        <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/_products/products_.$id_.variants.tsx

@@ -0,0 +1,405 @@
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+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 { 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';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import * as z from 'zod';
+import { AddOptionGroupDialog } from './components/add-option-group-dialog.js';
+import { AddProductVariantDialog } from './components/add-product-variant-dialog.js';
+import {
+    createProductOptionDocument,
+    deleteProductVariantDocument,
+    productDetailWithVariantsDocument,
+    removeOptionGroupFromProductDocument,
+    updateProductVariantDocument,
+} from './products.graphql.js';
+
+const pageId = 'manage-product-variants';
+const getQueryKey = (id: string) => ['DetailPage', 'product', id, 'manage-variants'];
+
+export const Route = createFileRoute('/_authenticated/_products/products_/$id_/variants')({
+    component: ManageProductVariants,
+    loader: async ({ context, params, location }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+        const result = await context.queryClient.ensureQueryData({
+            queryKey: getQueryKey(params.id),
+            queryFn: () => api.query(productDetailWithVariantsDocument, { id: params.id }),
+        });
+        return {
+            breadcrumb: [
+                { path: '/products', label: <Trans>Products</Trans> },
+                { path: `/products/${params.id}`, label: result.product?.name },
+                <Trans>Manage Variants</Trans>,
+            ],
+        };
+    },
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+const optionGroupSchema = z.object({
+    name: z.string().min(1, 'Option group name is required'),
+    values: z.array(z.string()).min(1, 'At least one option value is required'),
+});
+
+const addOptionValueSchema = z.object({
+    name: z.string().min(1, 'Option value name is required'),
+});
+
+type AddOptionValueFormValues = z.infer<typeof addOptionValueSchema>;
+type Variant = NonNullable<ResultOf<typeof productDetailWithVariantsDocument>['product']>['variants'][0];
+
+function AddOptionValueDialog({
+    groupId,
+    groupName,
+    onSuccess,
+}: Readonly<{
+    groupId: string;
+    groupName: string;
+    onSuccess?: () => void;
+}>) {
+    const [open, setOpen] = useState(false);
+    const { t } = useLingui();
+
+    const form = useForm<AddOptionValueFormValues>({
+        resolver: zodResolver(addOptionValueSchema),
+        defaultValues: {
+            name: '',
+        },
+    });
+
+    const createOptionMutation = useMutation({
+        mutationFn: api.mutate(createProductOptionDocument),
+        onSuccess: () => {
+            toast.success(t`Successfully added option value`);
+            setOpen(false);
+            form.reset();
+            onSuccess?.();
+        },
+        onError: error => {
+            toast.error(t`Failed to add option value`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
+            });
+        },
+    });
+
+    const onSubmit = (values: AddOptionValueFormValues) => {
+        createOptionMutation.mutate({
+            input: {
+                productOptionGroupId: groupId,
+                code: values.name.toLowerCase().replace(/\s+/g, '-'),
+                translations: [
+                    {
+                        languageCode: 'en',
+                        name: values.name,
+                    },
+                ],
+            },
+        });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button size="icon" variant="ghost">
+                    <Plus className="h-3 w-3" />
+                </Button>
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Add option value to {groupName}</Trans>
+                    </DialogTitle>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Option value name</Trans>}
+                            render={({ field }) => (
+                                <Input {...field} placeholder={t`e.g., Red, Large, Cotton`} />
+                            )}
+                        />
+                        <DialogFooter>
+                            <Button type="submit" disabled={createOptionMutation.isPending}>
+                                <Trans>Add option value</Trans>
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+function ManageProductVariants() {
+    const { id } = Route.useParams();
+    const { t } = useLingui();
+    const [optionsToAddToVariant, setOptionsToAddToVariant] = useState<
+        Record<string, Record<string, string>>
+    >({});
+
+    const { data: productData, refetch } = useQuery({
+        queryFn: () => api.query(productDetailWithVariantsDocument, { id }),
+        queryKey: getQueryKey(id),
+    });
+
+    const updateVariantMutation = useMutation({
+        mutationFn: api.mutate(updateProductVariantDocument),
+        onSuccess: () => {
+            toast.success(t`Variant updated successfully`);
+            refetch();
+        },
+    });
+
+    const deleteVariantMutation = useMutation({
+        mutationFn: api.mutate(deleteProductVariantDocument),
+        onSuccess: () => {
+            toast.success(t`Variant deleted successfully`);
+            refetch();
+        },
+    });
+
+    const removeOptionGroupMutation = useMutation({
+        mutationFn: api.mutate(removeOptionGroupFromProductDocument),
+        onSuccess: () => {
+            toast.success(t`Option group removed`);
+            refetch();
+        },
+    });
+
+    const setOptionToAddToVariant = (variantId: string, groupId: string, optionId: string | undefined) => {
+        if (!optionId) {
+            const updated = { ...optionsToAddToVariant };
+            if (updated[variantId]) {
+                delete updated[variantId][groupId];
+            }
+            setOptionsToAddToVariant(updated);
+        } else {
+            setOptionsToAddToVariant(prev => ({
+                ...prev,
+                [variantId]: {
+                    ...prev[variantId],
+                    [groupId]: optionId,
+                },
+            }));
+        }
+    };
+
+    const addOptionToVariant = async (variant: Variant) => {
+        const optionsToAdd = optionsToAddToVariant[variant.id];
+        if (!optionsToAdd) return;
+
+        const existingOptionIds = variant.options.map(o => o.id);
+        const newOptionIds = Object.values(optionsToAdd).filter(Boolean);
+        const allOptionIds = [...existingOptionIds, ...newOptionIds];
+
+        await updateVariantMutation.mutateAsync({
+            input: {
+                id: variant.id,
+                optionIds: allOptionIds,
+            },
+        });
+
+        setOptionsToAddToVariant(prev => {
+            const updated = { ...prev };
+            delete updated[variant.id];
+            return updated;
+        });
+    };
+
+    const deleteVariant = async (variant: Variant) => {
+        if (confirm(t`Are you sure you want to delete this variant?`)) {
+            await deleteVariantMutation.mutateAsync({ id: variant.id });
+        }
+    };
+
+    const getOption = (variant: Variant, groupId: string) => {
+        return variant.options.find(o => o.groupId === groupId);
+    };
+
+    if (!productData?.product) {
+        return null;
+    }
+
+    return (
+        <Page pageId={pageId}>
+            <PageTitle>
+                {productData.product.name} - <Trans>Manage variants</Trans>
+            </PageTitle>
+            <PageLayout>
+                <PageBlock column="main" blockId="option-groups" title={<Trans>Option Groups</Trans>}>
+                    <div className="space-y-4 mb-4">
+                        {productData.product.optionGroups.length === 0 ? (
+                            <p className="text-sm text-muted-foreground">
+                                <Trans>
+                                    No option groups defined yet. Add option groups to create different
+                                    variants of your product (e.g., Size, Color, Material)
+                                </Trans>
+                            </p>
+                        ) : (
+                            productData.product.optionGroups.map(group => (
+                                <div key={group.id} className="grid grid-cols-12 gap-4 items-start">
+                                    <div className="col-span-3">
+                                        <label className="text-sm font-medium">
+                                            <Trans>Option</Trans>
+                                        </label>
+                                        <Input value={group.name} disabled />
+                                    </div>
+                                    <div className="col-span-8">
+                                        <label className="text-sm font-medium">
+                                            <Trans>Option values</Trans>
+                                        </label>
+                                        <div className="flex flex-wrap gap-2 mt-1">
+                                            {group.options.map(option => (
+                                                <Badge key={option.id} variant="secondary">
+                                                    {option.name}
+                                                </Badge>
+                                            ))}
+                                            <AddOptionValueDialog
+                                                groupId={group.id}
+                                                groupName={group.name}
+                                                onSuccess={() => refetch()}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                    <AddOptionGroupDialog productId={id} onSuccess={() => refetch()} />
+                </PageBlock>
+
+                <PageBlock column="main" blockId="product-variants" title={<Trans>Variants</Trans>}>
+                    <div className="mb-4">
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead>
+                                        <Trans>Name</Trans>
+                                    </TableHead>
+                                    <TableHead>
+                                        <Trans>SKU</Trans>
+                                    </TableHead>
+                                    {productData.product.optionGroups.map(group => (
+                                        <TableHead key={group.id}>{group.name}</TableHead>
+                                    ))}
+                                    <TableHead>
+                                        <Trans>Delete</Trans>
+                                    </TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {productData.product.variants.map(variant => (
+                                    <TableRow key={variant.id}>
+                                        <TableCell>{variant.name}</TableCell>
+                                        <TableCell>{variant.sku}</TableCell>
+                                        {productData.product?.optionGroups.map(group => {
+                                            const option = getOption(variant, group.id);
+                                            return (
+                                                <TableCell key={group.id}>
+                                                    {option ? (
+                                                        <Badge variant="outline">{option.name}</Badge>
+                                                    ) : (
+                                                        <div className="flex items-center gap-2">
+                                                            <Select
+                                                                value={
+                                                                    optionsToAddToVariant[variant.id]?.[
+                                                                        group.id
+                                                                    ] || ''
+                                                                }
+                                                                onValueChange={value =>
+                                                                    setOptionToAddToVariant(
+                                                                        variant.id,
+                                                                        group.id,
+                                                                        value || undefined,
+                                                                    )
+                                                                }
+                                                            >
+                                                                <SelectTrigger className="w-32">
+                                                                    <SelectValue />
+                                                                </SelectTrigger>
+                                                                <SelectContent>
+                                                                    {group.options.map(opt => (
+                                                                        <SelectItem
+                                                                            key={opt.id}
+                                                                            value={opt.id}
+                                                                        >
+                                                                            {opt.name}
+                                                                        </SelectItem>
+                                                                    ))}
+                                                                </SelectContent>
+                                                            </Select>
+                                                            <Button
+                                                                size="sm"
+                                                                variant={
+                                                                    optionsToAddToVariant[variant.id]?.[
+                                                                        group.id
+                                                                    ]
+                                                                        ? 'default'
+                                                                        : 'outline'
+                                                                }
+                                                                disabled={
+                                                                    !optionsToAddToVariant[variant.id]?.[
+                                                                        group.id
+                                                                    ]
+                                                                }
+                                                                onClick={() => addOptionToVariant(variant)}
+                                                            >
+                                                                <Save className="h-4 w-4" />
+                                                            </Button>
+                                                        </div>
+                                                    )}
+                                                </TableCell>
+                                            );
+                                        })}
+                                        <TableCell>
+                                            <Button
+                                                size="sm"
+                                                variant="ghost"
+                                                onClick={() => deleteVariant(variant)}
+                                            >
+                                                <Trash2 className="h-4 w-4 text-destructive" />
+                                            </Button>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </div>
+
+                    <AddProductVariantDialog
+                        productId={id}
+                        onSuccess={() => {
+                            refetch();
+                        }}
+                    />
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}