confirm before delete!

components/publisher/PublisherForm.js

@@ -7,13 +7,13 @@ import axiosInstance from '../../src/axiosSecure';
 //import { getDate } from "date-fns";
 
 import PwaManager from "../PwaManager";
+import common from "../../src/helpers/common";
+import ProtectedRoute from '../../components/protectedRoute';
 import { monthNamesBG, GetTimeFormat, GetDateFormat } from "../../src/helpers/const"
 import PublisherSearchBox from './PublisherSearchBox';
 import AvailabilityList from "../availability/AvailabilityList";
 import ShiftsList from "../publisher/ShiftsList.tsx";
-import common from "../../src/helpers/common";
-
-import ProtectedRoute from '../../components/protectedRoute';
+import ConfirmationModal from "../ConfirmationModal";
 import { UserRole } from "@prisma/client";
 
 // import { Tabs, List } from 'tw-elements'
@@ -66,6 +66,8 @@ export default function PublisherForm({ item, me }) {
   }
 
   const [helpers, setHelper] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   const fetchModules = async () => {
     const h = (await import("../../src/helpers/const.js")).default;
     //console.log("fetchModules: " + JSON.stringify(h));
@@ -312,9 +314,17 @@ export default function PublisherForm({ item, me }) {
             <div className="panel-actions">
               <Link href={urls.indexUrl} className="action-button"> Отмени </Link>
               {/* delete */}
-              <button className="button bg-red-500 hover:bg-red-700 focus:outline-none focus:shadow-outline" type="button" onClick={handleDelete}>
+              <button className="button bg-red-500 hover:bg-red-700 focus:outline-none focus:shadow-outline" type="button" onClick={() => setIsModalOpen(true)}>
                 Изтрий
               </button>
+              <ConfirmationModal
+                isOpen={isModalOpen}
+                onClose={() => setIsModalOpen(false)}
+                onConfirm={handleDelete}
+                message="Сигурни ли сте, че искате да изтриете този профил? Това действие не може да бъде отменено."
+              />
+
+              {/* save */}
               <button className="button bg-blue-500 hover:bg-blue-700 focus:outline-none focus:shadow-outline" type="submit">
                 {router.query?.id ? "Update" : "Create"}
               </button>