@wilshop/dashboard 3.5.2

package/src/app/routes/_authenticated/_products/components/create-product-options-dialog.tsx

@@ -0,0 +1,416 @@
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.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 { api } from '@/vdb/graphql/api.js';
+import { graphql } 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 { Plus, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import * as z from 'zod';
+import { addOptionGroupToProductDocument, createProductOptionGroupDocument } from '../products.graphql.js';
+
+const getProductDocument = graphql(`
+    query GetProduct($productId: ID!) {
+        product(id: $productId) {
+            id
+            name
+            variants {
+                id
+                name
+                sku
+                options {
+                    id
+                    code
+                    name
+                    groupId
+                }
+            }
+            optionGroups {
+                id
+                code
+                name
+                options {
+                    id
+                    code
+                    name
+                }
+            }
+        }
+    }
+`);
+
+const updateProductVariantDocument = graphql(`
+    mutation UpdateProductVariant($input: UpdateProductVariantInput!) {
+        updateProductVariant(input: $input) {
+            id
+            name
+            options {
+                id
+                code
+                name
+            }
+        }
+    }
+`);
+
+const formSchema = z.object({
+    optionGroups: z
+        .array(
+            z.object({
+                name: z.string().min(1, 'Option group name is required'),
+                options: z
+                    .array(z.string().min(1, 'Option name is required'))
+                    .min(1, 'At least one option is required'),
+            }),
+        )
+        .min(1, 'At least one option group is required'),
+    existingVariantOptionIds: z.array(z.string()).min(1, 'Must select an option for the existing variant'),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export function CreateProductOptionsDialog({
+    productId,
+    onSuccess,
+}: {
+    productId: string;
+    onSuccess?: () => void;
+}) {
+    const [open, setOpen] = useState(false);
+    const { t } = useLingui();
+
+    const { data: productData } = useQuery({
+        queryKey: ['product', productId],
+        queryFn: () => api.query(getProductDocument, { productId }),
+    });
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            optionGroups: [{ name: '', options: [''] }],
+            existingVariantOptionIds: [],
+        },
+    });
+
+    const createProductOptionGroupMutation = useMutation({
+        mutationFn: api.mutate(createProductOptionGroupDocument),
+    });
+
+    const addOptionGroupToProductMutation = useMutation({
+        mutationFn: api.mutate(addOptionGroupToProductDocument),
+    });
+
+    const updateProductVariantMutation = useMutation({
+        mutationFn: api.mutate(updateProductVariantDocument),
+        onSuccess: () => {
+            toast.success(t`Successfully created product options`);
+            setOpen(false);
+            onSuccess?.();
+        },
+        onError: error => {
+            toast.error(t`Failed to create product options`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
+            });
+        },
+    });
+
+    const onSubmit = async (values: FormValues) => {
+        if (!productData?.product) return;
+
+        try {
+            // Create all option groups and their options
+            const createdOptionGroups = await Promise.all(
+                values.optionGroups.map(async group => {
+                    const result = await createProductOptionGroupMutation.mutateAsync({
+                        input: {
+                            code: group.name.toLowerCase().replace(/\s+/g, '-'),
+                            translations: [
+                                {
+                                    languageCode: 'en',
+                                    name: group.name,
+                                },
+                            ],
+                            options: group.options.map(option => ({
+                                code: option.toLowerCase().replace(/\s+/g, '-'),
+                                translations: [
+                                    {
+                                        languageCode: 'en',
+                                        name: option,
+                                    },
+                                ],
+                            })),
+                        },
+                    });
+
+                    // Add the option group to the product
+                    await addOptionGroupToProductMutation.mutateAsync({
+                        productId,
+                        optionGroupId: result.createProductOptionGroup.id,
+                    });
+
+                    return result.createProductOptionGroup;
+                }),
+            );
+
+            // Combine existing and newly created option groups
+            const allOptionGroups = [...(productData.product.optionGroups || []), ...createdOptionGroups];
+
+            // Map the selected option names to their IDs
+            const selectedOptionIds = values.existingVariantOptionIds.map((optionName, index) => {
+                const group = allOptionGroups[index];
+                const option = group.options.find(opt => opt.name === optionName);
+                if (!option) {
+                    throw new Error(`Option "${optionName}" not found in group "${group.name}"`);
+                }
+                return option.id;
+            });
+
+            // Update the existing variant with the selected options
+            if (productData.product.variants[0]) {
+                // Create a new name by appending the selected option names
+                const selectedOptionNames = values.existingVariantOptionIds
+                    .map((optionName, index) => {
+                        const group = allOptionGroups[index];
+                        const option = group.options.find(opt => opt.name === optionName);
+                        return option?.name;
+                    })
+                    .filter(Boolean)
+                    .join(' ');
+
+                const newVariantName = `${productData.product.name} ${selectedOptionNames}`;
+
+                await updateProductVariantMutation.mutateAsync({
+                    input: {
+                        id: productData.product.variants[0].id,
+                        optionIds: selectedOptionIds,
+                        translations: [
+                            {
+                                languageCode: 'en',
+                                name: newVariantName,
+                            },
+                        ],
+                    },
+                });
+            }
+        } catch (error) {
+            toast.error(t`Failed to create product options`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
+            });
+        }
+    };
+
+    const addOptionGroup = () => {
+        const currentGroups = form.getValues('optionGroups');
+        form.setValue('optionGroups', [...currentGroups, { name: '', options: [''] }]);
+    };
+
+    const removeOptionGroup = (index: number) => {
+        const currentGroups = form.getValues('optionGroups');
+        form.setValue(
+            'optionGroups',
+            currentGroups.filter((_, i) => i !== index),
+        );
+    };
+
+    const addOption = (groupIndex: number) => {
+        const currentGroups = form.getValues('optionGroups');
+        const updatedGroups = [...currentGroups];
+        updatedGroups[groupIndex].options.push('');
+        form.setValue('optionGroups', updatedGroups);
+    };
+
+    const removeOption = (groupIndex: number, optionIndex: number) => {
+        const currentGroups = form.getValues('optionGroups');
+        const updatedGroups = [...currentGroups];
+        updatedGroups[groupIndex].options = updatedGroups[groupIndex].options.filter(
+            (_, i) => i !== optionIndex,
+        );
+        form.setValue('optionGroups', updatedGroups);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button variant="outline">
+                    <Plus className="mr-2 h-4 w-4" />
+                    <Trans>Create options</Trans>
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="max-w-2xl">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Create product options</Trans>
+                    </DialogTitle>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+                        <div className="space-y-4">
+                            {form.watch('optionGroups').map((group, groupIndex) => (
+                                <div key={groupIndex} className="space-y-4 p-4 border rounded-lg">
+                                    <div className="flex justify-between items-center">
+                                        <FormFieldWrapper
+                                            control={form.control}
+                                            name={`optionGroups.${groupIndex}.name`}
+                                            label={<Trans>Option group name</Trans>}
+                                            render={({ field }) => (
+                                                <Input {...field} placeholder={t`e.g. Size`} />
+                                            )}
+                                        />
+                                        {groupIndex > 0 && (
+                                            <Button
+                                                type="button"
+                                                variant="ghost"
+                                                onClick={() => removeOptionGroup(groupIndex)}
+                                            >
+                                                <Trans>Remove group</Trans>
+                                            </Button>
+                                        )}
+                                    </div>
+                                    <div className="space-y-2">
+                                        {group.options.map((_, optionIndex) => (
+                                            <div key={optionIndex} className="flex gap-2 items-end">
+                                                <FormFieldWrapper
+                                                    control={form.control}
+                                                    name={`optionGroups.${groupIndex}.options.${optionIndex}`}
+                                                    label={<Trans>Option name</Trans>}
+                                                    render={({ field }) => (
+                                                        <Input {...field} placeholder={t`e.g. Small`} />
+                                                    )}
+                                                />
+                                                {optionIndex > 0 && (
+                                                    <Button
+                                                        type="button"
+                                                        variant="ghost"
+                                                        size="icon"
+                                                        onClick={() => removeOption(groupIndex, optionIndex)}
+                                                    >
+                                                        <Trash2 className="h-4 w-4" />
+                                                    </Button>
+                                                )}
+                                            </div>
+                                        ))}
+                                        <Button
+                                            type="button"
+                                            variant="outline"
+                                            onClick={() => addOption(groupIndex)}
+                                        >
+                                            <Plus className="mr-2 h-4 w-4" />
+                                            <Trans>Add option</Trans>
+                                        </Button>
+                                    </div>
+                                </div>
+                            ))}
+                            <Button type="button" variant="outline" size="sm" onClick={addOptionGroup}>
+                                <Plus className="mr-2 h-4 w-4" />
+                                <Trans>Add another option group</Trans>
+                            </Button>
+                        </div>
+
+                        {productData?.product?.variants[0] && (
+                            <div className="space-y-4 p-4 border rounded-lg">
+                                <h3 className="font-medium">
+                                    <Trans>Assign options to existing variant</Trans>
+                                </h3>
+                                <p className="text-sm text-muted-foreground">
+                                    <Trans>
+                                        Select which options should apply to the existing variant "
+                                        {productData.product.variants[0].name}"
+                                    </Trans>
+                                </p>
+                                {/* Show existing option groups first */}
+                                {productData.product.optionGroups?.map((group, groupIndex) => (
+                                    <FormFieldWrapper
+                                        key={group.id}
+                                        control={form.control}
+                                        name={`existingVariantOptionIds.${groupIndex}`}
+                                        label={group.name}
+                                        render={({ field }) => (
+                                            <select
+                                                className="w-full p-2 border rounded-md"
+                                                value={field.value}
+                                                onChange={e => {
+                                                    const newValues = [
+                                                        ...form.getValues('existingVariantOptionIds'),
+                                                    ];
+                                                    newValues[groupIndex] = e.target.value;
+                                                    form.setValue('existingVariantOptionIds', newValues);
+                                                }}
+                                            >
+                                                <option value="">Select an option</option>
+                                                {group.options.map(option => (
+                                                    <option key={option.id} value={option.name}>
+                                                        {option.name}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        )}
+                                    />
+                                ))}
+                                {/* Then show new option groups */}
+                                {form.watch('optionGroups').map((group, groupIndex) => (
+                                    <FormFieldWrapper
+                                        key={`new-${groupIndex}`}
+                                        control={form.control}
+                                        name={`existingVariantOptionIds.${(productData?.product?.optionGroups?.length || 0) + groupIndex}`}
+                                        label={group.name || <Trans>Option group {groupIndex + 1}</Trans>}
+                                        render={({ field }) => (
+                                            <select
+                                                className="w-full p-2 border rounded-md"
+                                                value={field.value}
+                                                onChange={e => {
+                                                    const newValues = [
+                                                        ...form.getValues('existingVariantOptionIds'),
+                                                    ];
+                                                    newValues[
+                                                        (productData?.product?.optionGroups?.length || 0) +
+                                                            groupIndex
+                                                    ] = e.target.value;
+                                                    form.setValue('existingVariantOptionIds', newValues);
+                                                }}
+                                            >
+                                                <option value="">Select an option</option>
+                                                {group.options.map((option, optionIndex) => (
+                                                    <option key={optionIndex} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        )}
+                                    />
+                                ))}
+                            </div>
+                        )}
+
+                        <DialogFooter>
+                            <Button
+                                type="submit"
+                                disabled={
+                                    createProductOptionGroupMutation.isPending ||
+                                    addOptionGroupToProductMutation.isPending ||
+                                    updateProductVariantMutation.isPending ||
+                                    (productData?.product?.variants[0] &&
+                                        form.watch('existingVariantOptionIds').some(value => !value))
+                                }
+                            >
+                                <Trans>Create options</Trans>
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/app/routes/_authenticated/_products/components/create-product-variants-dialog.tsx

@@ -0,0 +1,190 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/vdb/components/ui/dialog.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans } from '@lingui/react/macro';
+import { normalizeString } from '@/vdb/lib/utils.js';
+import { useMutation } from '@tanstack/react-query';
+import { Plus } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import {
+    addOptionGroupToProductDocument,
+    createProductOptionGroupDocument,
+    createProductVariantsDocument,
+} from '../products.graphql.js';
+import { CreateProductVariants, VariantConfiguration } from './create-product-variants.js';
+
+export function CreateProductVariantsDialog({
+    productId,
+    productName,
+    onSuccess,
+}: {
+    productId: string;
+    productName: string;
+    onSuccess?: () => void;
+}) {
+    const { activeChannel } = useChannel();
+    const [variantData, setVariantData] = useState<VariantConfiguration | null>(null);
+    const [open, setOpen] = useState(false);
+
+    const createOptionGroupMutation = useMutation({
+        mutationFn: api.mutate(createProductOptionGroupDocument),
+    });
+
+    const addOptionGroupToProductMutation = useMutation({
+        mutationFn: api.mutate(addOptionGroupToProductDocument),
+    });
+
+    const createProductVariantsMutation = useMutation({
+        mutationFn: api.mutate(createProductVariantsDocument),
+    });
+
+    async function handleCreateVariants() {
+        if (!variantData || !activeChannel?.defaultLanguageCode) return;
+
+        try {
+            // 1. Create option groups and their options
+            const createdOptionGroups = await Promise.all(
+                variantData.optionGroups.map(async optionGroup => {
+                    const result = await createOptionGroupMutation.mutateAsync({
+                        input: {
+                            code: normalizeString(optionGroup.name, '-'),
+                            translations: [
+                                {
+                                    languageCode: activeChannel.defaultLanguageCode,
+                                    name: optionGroup.name,
+                                },
+                            ],
+                            options: optionGroup.values.map(value => ({
+                                code: normalizeString(value.value, '-'),
+                                translations: [
+                                    {
+                                        languageCode: activeChannel.defaultLanguageCode,
+                                        name: value.value,
+                                    },
+                                ],
+                            })),
+                        },
+                    });
+                    return result.createProductOptionGroup;
+                }),
+            );
+
+            // 2. Add option groups to product
+            await Promise.all(
+                createdOptionGroups.map(group =>
+                    addOptionGroupToProductMutation.mutateAsync({
+                        productId,
+                        optionGroupId: group.id,
+                    }),
+                ),
+            );
+
+            // 3. Create variants
+            const variantsToCreate = variantData.variants
+                .filter(variant => variant.enabled)
+                .map(variant => {
+                    const name = variant.options.length
+                        ? `${productName} ${variant.options.map(option => option.value).join(' ')}`
+                        : productName;
+
+                    return {
+                        productId,
+                        sku: variant.sku,
+                        price: Number(variant.price),
+                        stockOnHand: Number(variant.stock),
+                        optionIds: variant.options.map(option => {
+                            const optionGroup = createdOptionGroups.find(g => g.name === option.name);
+                            if (!optionGroup) {
+                                throw new Error(`Could not find option group ${option.name}`);
+                            }
+                            const createdOption = optionGroup.options.find(o => o.name === option.value);
+                            if (!createdOption) {
+                                throw new Error(
+                                    `Could not find option ${option.value} in group ${option.name}`,
+                                );
+                            }
+                            return createdOption.id;
+                        }),
+                        translations: [
+                            {
+                                languageCode: activeChannel.defaultLanguageCode,
+                                name: name,
+                            },
+                        ],
+                    };
+                });
+
+            await createProductVariantsMutation.mutateAsync({ input: variantsToCreate });
+            setOpen(false);
+            onSuccess?.();
+        } catch (error) {
+            console.error('Error creating variants:', error);
+            // Handle error (show toast notification, etc.)
+        }
+    }
+
+    const handleOnChange = useCallback(
+        ({ data }: { data: VariantConfiguration }) => setVariantData(data),
+        [],
+    );
+    const createCount = Object.values(variantData?.variants ?? {}).filter(v => v.enabled).length;
+
+    return (
+        <>
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogTrigger asChild>
+                    <Button type="button">
+                        <Plus className="mr-2 h-4 w-4" /> Create Variants
+                    </Button>
+                </DialogTrigger>
+
+                <DialogContent className="max-w-90vw">
+                    <DialogHeader>
+                        <DialogTitle>
+                            <Trans>Create Variants</Trans>
+                        </DialogTitle>
+                        <DialogDescription>
+                            <Trans>Create variants for your product</Trans>
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="mt-4">
+                        <CreateProductVariants
+                            onChange={handleOnChange}
+                            currencyCode={activeChannel?.defaultCurrencyCode}
+                        />
+                    </div>
+                    <DialogFooter>
+                        <Button
+                            type="button"
+                            onClick={handleCreateVariants}
+                            disabled={
+                                !variantData ||
+                                createOptionGroupMutation.isPending ||
+                                addOptionGroupToProductMutation.isPending ||
+                                createProductVariantsMutation.isPending ||
+                                createCount === 0
+                            }
+                        >
+                            {createOptionGroupMutation.isPending ||
+                            addOptionGroupToProductMutation.isPending ||
+                            createProductVariantsMutation.isPending ? (
+                                <Trans>Creating...</Trans>
+                            ) : (
+                                <Trans>Create {createCount} variants</Trans>
+                            )}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}