From 97f114136b626f11a42685b05cb38bae4911291b Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sat, 1 Aug 2026 12:19:53 +0700
Subject: [PATCH] feat: add confirmation dialog for deleting product variants
 in create and edit pages

---
 .../js/pages/admin/master/product/create.tsx  | 27 ++++++++++++++++++-
 .../js/pages/admin/master/product/edit.tsx    | 27 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/admin/master/product/create.tsx b/resources/js/pages/admin/master/product/create.tsx
index 08b52b9..eeadbf0 100644
--- a/resources/js/pages/admin/master/product/create.tsx
+++ b/resources/js/pages/admin/master/product/create.tsx
@@ -1,6 +1,7 @@
 import InputError from '@/components/input-error';
 import { RupiahInput } from '@/components/rupiah-input';
 import { FileUpload } from '@/components/file-upload';
+import { ConfirmDialog } from '@/components/confirm-dialog';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -132,6 +133,15 @@ export default function ProductCreate({ categories }: Props) {
     );
 
     const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+    const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+    const [deleteVariantIndex, setDeleteVariantIndex] = useState<number | null>(
+        null,
+    );
+
+    const confirmRemoveVariant = useCallback((index: number) => {
+        setDeleteVariantIndex(index);
+        setDeleteConfirmOpen(true);
+    }, []);
 
     const copyPrices = useCallback((variantIndex: number) => {
         setVariants((prev) => {
@@ -521,7 +531,7 @@ export default function ProductCreate({ categories }: Props) {
                                                                     variant="outline"
                                                                     size="icon"
                                                                     onClick={() =>
-                                                                        removeVariant(
+                                                                        confirmRemoveVariant(
                                                                             variantIndex,
                                                                         )
                                                                     }
@@ -785,6 +795,21 @@ export default function ProductCreate({ categories }: Props) {
                     )}
                 </Form>
             </div>
+
+            <ConfirmDialog
+                open={deleteConfirmOpen}
+                onOpenChange={setDeleteConfirmOpen}
+                title="Hapus Varian"
+                description="Apakah Anda yakin ingin menghapus varian ini?"
+                confirmLabel="Hapus"
+                onConfirm={() => {
+                    if (deleteVariantIndex !== null) {
+                        removeVariant(deleteVariantIndex);
+                    }
+                    setDeleteConfirmOpen(false);
+                    setDeleteVariantIndex(null);
+                }}
+            />
         </>
     );
 }
diff --git a/resources/js/pages/admin/master/product/edit.tsx b/resources/js/pages/admin/master/product/edit.tsx
index cf176fb..0101f1d 100644
--- a/resources/js/pages/admin/master/product/edit.tsx
+++ b/resources/js/pages/admin/master/product/edit.tsx
@@ -1,6 +1,7 @@
 import InputError from '@/components/input-error';
 import { RupiahInput } from '@/components/rupiah-input';
 import { FileUpload } from '@/components/file-upload';
+import { ConfirmDialog } from '@/components/confirm-dialog';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -199,6 +200,15 @@ export default function ProductEdit({ product, categories }: Props) {
     );
 
     const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+    const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+    const [deleteVariantIndex, setDeleteVariantIndex] = useState<number | null>(
+        null,
+    );
+
+    const confirmRemoveVariant = useCallback((index: number) => {
+        setDeleteVariantIndex(index);
+        setDeleteConfirmOpen(true);
+    }, []);
 
     const copyPrices = useCallback((variantIndex: number) => {
         setVariants((prev) => {
@@ -594,7 +604,7 @@ export default function ProductEdit({ product, categories }: Props) {
                                                                     variant="outline"
                                                                     size="icon"
                                                                     onClick={() =>
-                                                                        removeVariant(
+                                                                        confirmRemoveVariant(
                                                                             variantIndex,
                                                                         )
                                                                     }
@@ -861,6 +871,21 @@ export default function ProductEdit({ product, categories }: Props) {
                     )}
                 </Form>
             </div>
+
+            <ConfirmDialog
+                open={deleteConfirmOpen}
+                onOpenChange={setDeleteConfirmOpen}
+                title="Hapus Varian"
+                description="Apakah Anda yakin ingin menghapus varian ini?"
+                confirmLabel="Hapus"
+                onConfirm={() => {
+                    if (deleteVariantIndex !== null) {
+                        removeVariant(deleteVariantIndex);
+                    }
+                    setDeleteConfirmOpen(false);
+                    setDeleteVariantIndex(null);
+                }}
+            />
         </>
     );
 }