✨ [#4798] Added custom confirmation modal

src/openforms/js/components/admin/form_design/useConfirm.js

@@ -0,0 +1,45 @@
+import {useState} from 'react';
+
+import ActionButton from '../forms/ActionButton';
+import {Modal} from '../modals';
+
+const useConfirm = (title, message) => {
+  const [promise, setPromise] = useState(null);
+
+  const confirm = () =>
+    new Promise((resolve, reject) => {
+      setPromise({resolve});
+    });
+
+  const handleClose = () => {
+    setPromise(null);
+  };
+
+  const handleConfirm = () => {
+    promise?.resolve(true);
+    handleClose();
+  };
+
+  const handleCancel = () => {
+    promise?.resolve(false);
+    handleClose();
+  };
+
+  const ConfirmationModal = () => (
+    <Modal
+      title={title}
+      isOpen={promise !== null}
+      contentModifiers={['with-form']}
+      closeModal={handleCancel}
+    >
+      <div style={{flexGrow: 1}}>{message}</div>
+      <div className="button-group">
+        <ActionButton text="confirm" className="default" onClick={handleConfirm} />
+        <ActionButton text="cancel" onClick={handleCancel} />
+      </div>
+    </Modal>
+  );
+  return [ConfirmationModal, confirm];
+};
+
+export default useConfirm;

src/openforms/scss/components/admin/_button-group.scss

@@ -0,0 +1,5 @@
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}

src/openforms/scss/components/admin/_index.scss

@@ -1,4 +1,5 @@
 @import './button';
+@import './button-group';
 @import './edit-panel';
 @import './datetime';
 @import './list';