feat: add confirmation dialog for deleting product variants in create and edit pages

This commit is contained in:
Yoga Pangestu 2026-08-01 12:19:53 +07:00
parent e05a0c7066
commit 97f114136b
2 changed files with 52 additions and 2 deletions

View File

@ -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);
}}
/>
</>
);
}

View File

@ -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);
}}
/>
</>
);
}