1 files changed, 36 insertions, 12 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
index 87efd1554..85c50e5ed 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
@@ -36,6 +36,7 @@ import {
 import { Notification } from "../../../../utils/types.js";
 import { CardTable } from "./Table.js";
 import { HttpStatusCode } from "@gnu-taler/taler-util";
+import { ConfirmModal, DeleteModal } from "../../../../components/modal/index.js";
 
 interface Props {
   onUnauthorized: () => VNode;
@@ -53,6 +54,8 @@ export default function ProductList({
 }: Props): VNode {
   const result = useInstanceProducts();
   const { deleteProduct, updateProduct } = useProductAPI();
+  const [deleting, setDeleting] =
+    useState<MerchantBackend.Products.ProductDetail & WithId | null>(null);
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
 
   const { i18n } = useTranslationContext();
@@ -97,22 +100,43 @@ export default function ProductList({
         }
         onSelect={(product) => onSelect(product.id)}
         onDelete={(prod: MerchantBackend.Products.ProductDetail & WithId) =>
-          deleteProduct(prod.id)
-            .then(() =>
+          setDeleting(prod)
+        }
+      />
+
+      {deleting && (
+        <ConfirmModal
+          label={`Delete product`}
+          description={`Delete the product "${deleting.description}"`}
+          danger
+          active
+          onCancel={() => setDeleting(null)}
+          onConfirm={async (): Promise<void> => {
+            try {
+              await deleteProduct(deleting.id);
               setNotif({
-                message: i18n.str`product delete successfully`,
+                message: i18n.str`Product "${deleting.description}" (ID: ${deleting.id}) has been deleted`,
                 type: "SUCCESS",
-              }),
-            )
-            .catch((error) =>
+              });
+            } catch (error) {
               setNotif({
-                message: i18n.str`could not delete the product`,
+                message: i18n.str`Failed to delete product`,
                 type: "ERROR",
-                description: error.message,
-              }),
-            )
-        }
-      />
+                description: error instanceof Error ? error.message : undefined,
+              });
+            }
+            setDeleting(null);
+          }}
+        >
+          <p>
+            If you delete the product named <b>&quot;{deleting.description}&quot;</b> (ID:{" "}
+            <b>{deleting.id}</b>), the stock and related information will be lost
+          </p>
+          <p class="warning">
+            Deleting an product <b>cannot be undone</b>.
+          </p>
+        </ConfirmModal>
+      )}
     </section>
   );
 }