wip

front/src/common/BootstrapSNCF/ModalSNCF/ModalProvider.tsx

@@ -12,6 +12,7 @@ import React, {
 } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import cx from 'classnames';
+import ConfirmModal from './ConfirmModal';
 
 /**
  * Type of the modal context
@@ -47,6 +48,7 @@ export const ModalContext = createContext(initialModalContext);
 export const ModalSNCF: FC = () => {
   const modalRef = useRef<HTMLDivElement | null>(null);
   const { isOpen, content, closeModal, size, className } = useContext(ModalContext);
+  const [isConfirmModalOpen, setConfirmModalOpen] = useState(false);
 
   /**
    * Register click outside event to close the modal.
@@ -61,13 +63,8 @@ export const ModalSNCF: FC = () => {
         !modalRef.current.contains(event.target as HTMLElement)
       ) {
         const isXlModal = modalRef.current.classList.contains('modal-xl');
-        if (
-          isXlModal &&
-          window.confirm(
-            'Vous êtes sur le point de quitter le mode édition. Toute modification non sauvegardée sera perdue'
-          )
-        ) {
-          closeModal();
+        if (isXlModal) {
+          setConfirmModalOpen(true);
         } else if (!isXlModal) {
           closeModal();
         }
@@ -80,6 +77,15 @@ export const ModalSNCF: FC = () => {
     };
   }, [isOpen, closeModal]);
 
+  const handleConfirm = () => {
+    setConfirmModalOpen(false);
+    closeModal();
+  };
+
+  const handleCancel = () => {
+    setConfirmModalOpen(false);
+  };
+
   if (!content) {
     return null;
   }
@@ -91,6 +97,7 @@ export const ModalSNCF: FC = () => {
       role="dialog"
       aria-hidden="true"
     >
+      {isConfirmModalOpen && <ConfirmModal onConfirm={handleConfirm} onCancel={handleCancel} />}
       <div
         ref={modalRef}
         className={cx('modal-dialog modal-dialog-centered', className, size && `modal-${size}`)}