@vendure/dashboard 3.7.1-master-202607110305 → 3.7.1

package/src/app/routes/_authenticated/_products/hooks/use-remove-option-group.ts

@@ -0,0 +1,90 @@
+import { api } from '@/vdb/graphql/api.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useLingui } from '@lingui/react/macro';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { removeOptionGroupFromProductDocument } from '../products.graphql.js';
+
+type RemoveOptionGroupResult = ResultOf<
+    typeof removeOptionGroupFromProductDocument
+>['removeOptionGroupFromProduct'];
+
+export interface UseRemoveOptionGroupOptions {
+    /** Called after a group is successfully (force-)removed, e.g. to refetch. */
+    onRemoved?: () => void;
+}
+
+/**
+ * @description
+ * Shared logic for removing an option group from a product (issue #4703). Owns the
+ * single mutation, the typed `ProductOptionInUseError` discrimination, the toasts,
+ * and the "in use" state that drives the force-remove confirmation. Consumers own
+ * only their trigger UI and the {@link ForceRemoveOptionGroupDialog} placement.
+ *
+ * `remove` handles the interactive single-group flow (surfacing the force dialog on
+ * `ProductOptionInUseError`); `removeOptionGroupAsync` is the low-level typed
+ * primitive for batch callers that inspect the result themselves.
+ */
+export function useRemoveOptionGroup(productId: string, options?: UseRemoveOptionGroupOptions) {
+    const { t } = useLingui();
+    // The group that hit ProductOptionInUseError and is awaiting force confirmation.
+    // When a single hook instance is shared across many groups (the Manage Variants
+    // page), this also identifies which group's force dialog is open. Per-instance
+    // callers (the detail-page badge) only ever see null or their own group id.
+    const [inUseGroupId, setInUseGroupId] = useState<string | null>(null);
+    const mutation = useMutation({ mutationFn: api.mutate(removeOptionGroupFromProductDocument) });
+
+    const removeOptionGroupAsync = (optionGroupId: string, force = false): Promise<RemoveOptionGroupResult> =>
+        mutation
+            .mutateAsync({ productId, optionGroupId, force })
+            .then(result => result.removeOptionGroupFromProduct);
+
+    const remove = async (optionGroupId: string) => {
+        try {
+            const result = await removeOptionGroupAsync(optionGroupId);
+            if (result.__typename === 'ProductOptionInUseError') {
+                setInUseGroupId(optionGroupId);
+                return;
+            }
+            toast.success(t`Option group removed`);
+            options?.onRemoved?.();
+        } catch (error) {
+            toast.error(t`Failed to remove option group`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
+            });
+        }
+    };
+
+    const forceRemove = async () => {
+        if (!inUseGroupId) {
+            return;
+        }
+        try {
+            await removeOptionGroupAsync(inUseGroupId, true);
+            setInUseGroupId(null);
+            toast.success(t`Option group removed`);
+            options?.onRemoved?.();
+        } catch (error) {
+            // Keep the dialog open on failure so the user can retry the force-remove
+            // without restarting the whole flow; only a success clears `inUseGroupId`.
+            toast.error(t`Failed to remove option group`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
+            });
+        }
+    };
+
+    return {
+        /** Remove a single group, surfacing the force dialog if it is in use. */
+        remove,
+        /** Confirm force-removal of the group currently in `inUseGroupId`. */
+        forceRemove,
+        /** Typed remove primitive for batch callers that inspect the result. */
+        removeOptionGroupAsync,
+        /** Non-null while the force-remove dialog should be shown for that group. */
+        inUseGroupId,
+        clearInUseGroup: () => setInUseGroupId(null),
+        isPending: mutation.isPending,
+    };
+}

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

@@ -23,7 +23,6 @@ import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-lo
 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 { useMutation } from '@tanstack/react-query';
 import { Layers, Package, PlusIcon } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
@@ -31,11 +30,11 @@ import { AddOptionGroupDialog } from './components/add-option-group-dialog.js';
 import { GenerateVariantsPanel } from './components/generate-variants-panel.js';
 import { ProductOptionGroupBadge } from './components/product-option-group-badge.js';
 import { ProductVariantsTable } from './components/product-variants-table.js';
+import { useRemoveOptionGroup } from './hooks/use-remove-option-group.js';
 import {
     assignProductsToChannelDocument,
     createProductDocument,
     productDetailDocument,
-    removeOptionGroupFromProductDocument,
     removeProductsFromChannelDocument,
     updateProductDocument,
 } from './products.graphql.js';
@@ -171,28 +170,22 @@ function ProductDetailPage() {
         },
     });
 
-    const removeOptionGroupMutation = useMutation({
-        mutationFn: api.mutate(removeOptionGroupFromProductDocument),
-    });
+    // The empty-string fallback only ever applies before `entity` has loaded;
+    // `removeAllOptionGroups` is reachable exclusively from the onBack handler below,
+    // which is rendered only once `entity` exists, so the real id is always used.
+    const { removeOptionGroupAsync } = useRemoveOptionGroup(entity?.id ?? '');
 
-    const removeAllOptionGroups = async (
-        productId: string,
-        optionGroups: Array<{ id: string }>,
-    ) => {
+    // Batch-removes every option group when the user backs out of variant setup. This is
+    // reached only while the product has zero variants, so ProductOptionInUseError cannot
+    // realistically fire here — the branch is kept as a defensive guard. Note the loop is
+    // not transactional: a mid-list failure leaves earlier groups already removed.
+    const removeAllOptionGroups = async (optionGroups: Array<{ id: string }>) => {
         try {
             for (const group of optionGroups) {
-                const result = await removeOptionGroupMutation.mutateAsync({
-                    productId,
-                    optionGroupId: group.id,
-                });
-                const removeResult = result?.removeOptionGroupFromProduct;
-                if (
-                    removeResult &&
-                    '__typename' in removeResult &&
-                    removeResult.__typename === 'ProductOptionInUseError'
-                ) {
+                const result = await removeOptionGroupAsync(group.id);
+                if (result.__typename === 'ProductOptionInUseError') {
                     toast.error(t`Could not remove option group`, {
-                        description: removeResult.message,
+                        description: result.message,
                     });
                     refreshEntity();
                     return;
@@ -301,7 +294,7 @@ function ProductDetailPage() {
                                 optionGroups={entity.optionGroups}
                                 onSuccess={() => refreshEntity()}
                                 onBack={{
-                                    handler: () => removeAllOptionGroups(entity.id, entity.optionGroups),
+                                    handler: () => removeAllOptionGroups(entity.optionGroups),
                                     confirmation: {
                                         title: t`Remove option groups?`,
                                         description: t`This will remove all option groups from this product and return to the variant setup choice.`,
@@ -320,6 +313,7 @@ function ProductDetailPage() {
                                     id={g.id}
                                     name={g.name}
                                     productId={entity.id}
+                                    onRemoved={() => refreshEntity()}
                                 />
                             ))}
                         </div>

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

@@ -1,16 +1,7 @@
 import { ConfirmationDialog } from '@/vdb/components/shared/confirmation-dialog.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-} from '@/vdb/components/ui/alert-dialog.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import {
@@ -41,11 +32,12 @@ import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { AddOptionGroupDialog } from './components/add-option-group-dialog.js';
 import { AddProductVariantDialog } from './components/add-product-variant-dialog.js';
+import { ForceRemoveOptionGroupDialog } from './components/force-remove-option-group-dialog.js';
+import { useRemoveOptionGroup } from './hooks/use-remove-option-group.js';
 import {
     createProductOptionDocument,
     deleteProductVariantDocument,
     productDetailWithVariantsDocument,
-    removeOptionGroupFromProductDocument,
     updateProductVariantDocument,
 } from './products.graphql.js';
 
@@ -198,29 +190,13 @@ function ManageProductVariants() {
         },
     });
 
-    const [forceRemoveGroupId, setForceRemoveGroupId] = useState<string | null>(null);
-
-    const removeOptionGroupMutation = useMutation({
-        mutationFn: api.mutate(removeOptionGroupFromProductDocument),
-        onSuccess: (result: any, variables: any) => {
-            const removeResult = result?.removeOptionGroupFromProduct;
-            if (removeResult && '__typename' in removeResult && removeResult.__typename === 'ProductOptionInUseError') {
-                setForceRemoveGroupId(variables.optionGroupId);
-                return;
-            }
-            toast.success(t`Option group removed`);
-            refetch();
-        },
-    });
-
-    const forceRemoveOptionGroupMutation = useMutation({
-        mutationFn: api.mutate(removeOptionGroupFromProductDocument),
-        onSuccess: () => {
-            setForceRemoveGroupId(null);
-            toast.success(t`Option group removed`);
-            refetch();
-        },
-    });
+    const {
+        remove: removeOptionGroup,
+        forceRemove: forceRemoveOptionGroup,
+        inUseGroupId: forceRemoveGroupId,
+        clearInUseGroup,
+        isPending: isRemovingOptionGroup,
+    } = useRemoveOptionGroup(id, { onRemoved: refetch });
 
     const setOptionToAddToVariant = (variantId: string, groupId: string, optionId: string | undefined) => {
         if (!optionId) {
@@ -316,22 +292,21 @@ function ManageProductVariants() {
                                         </div>
                                     </div>
                                     <div className="col-span-1 flex items-end justify-end">
-                                        <ConfirmationDialog
-                                            title={t`Remove option group`}
-                                            description={t`Are you sure you want to remove this option group from the product?`}
-                                            onConfirm={() => removeOptionGroupMutation.mutate({
-                                                productId: id,
-                                                optionGroupId: group.id,
-                                            })}
-                                        >
-                                            <Button
-                                                size="icon"
-                                                variant="ghost"
-                                                disabled={removeOptionGroupMutation.isPending}
+                                        <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
+                                            <ConfirmationDialog
+                                                title={t`Remove option group`}
+                                                description={t`Are you sure you want to remove this option group from the product?`}
+                                                onConfirm={() => removeOptionGroup(group.id)}
                                             >
-                                                <Trash2 className="h-4 w-4 text-destructive" />
-                                            </Button>
-                                        </ConfirmationDialog>
+                                                <Button
+                                                    size="icon"
+                                                    variant="ghost"
+                                                    disabled={isRemovingOptionGroup}
+                                                >
+                                                    <Trash2 className="h-4 w-4 text-destructive" />
+                                                </Button>
+                                            </ConfirmationDialog>
+                                        </PermissionGuard>
                                     </div>
                                 </div>
                             ))
@@ -485,32 +460,16 @@ function ManageProductVariants() {
                     )}
                 </PageBlock>
             </PageLayout>
-            <AlertDialog open={!!forceRemoveGroupId} onOpenChange={(open) => { if (!open) setForceRemoveGroupId(null); }}>
-                <AlertDialogContent>
-                    <AlertDialogHeader>
-                        <AlertDialogTitle><Trans>Force remove option group</Trans></AlertDialogTitle>
-                        <AlertDialogDescription>
-                            <Trans>This option group is in use by existing variants. Force removing it may affect those variants. Are you sure?</Trans>
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel onClick={() => setForceRemoveGroupId(null)}>
-                            <Trans>Cancel</Trans>
-                        </AlertDialogCancel>
-                        <AlertDialogAction onClick={() => {
-                            if (forceRemoveGroupId) {
-                                forceRemoveOptionGroupMutation.mutate({
-                                    productId: id,
-                                    optionGroupId: forceRemoveGroupId,
-                                    force: true,
-                                });
-                            }
-                        }}>
-                            <Trans>Force remove</Trans>
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <ForceRemoveOptionGroupDialog
+                open={!!forceRemoveGroupId}
+                onOpenChange={open => {
+                    if (!open) {
+                        clearInUseGroup();
+                    }
+                }}
+                onConfirm={forceRemoveOptionGroup}
+                isPending={isRemovingOptionGroup}
+            />
         </Page>
     );
 }