From a482a92d34a82554cea0bbfd05b15544532f30b1 Mon Sep 17 00:00:00 2001
From: Rishab <33950743+rishabjasrotia@users.noreply.github.com>
Date: Thu, 16 Nov 2023 04:02:34 +0000
Subject: [PATCH] #168 - Align Modal to Center of PDF if Signed

---
 .../SignDocuments/package-lock.json           | 22 ++++++++++++++++++-
 microfrontends/SignDocuments/package.json     |  1 +
 .../src/Component/SignYourselfPdf.js          | 17 +++++++++++++-
 .../src/Component/recipientSignPdf.js         | 17 +++++++++++++-
 4 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/microfrontends/SignDocuments/package-lock.json b/microfrontends/SignDocuments/package-lock.json
index 30f707e44..4945bb084 100644
--- a/microfrontends/SignDocuments/package-lock.json
+++ b/microfrontends/SignDocuments/package-lock.json
@@ -36,6 +36,7 @@
         "react-scrollbars-custom": "^4.1.1",
         "react-signature-canvas": "^1.0.6",
         "reactour": "^1.19.1",
+        "select-dom": "^9.0.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -18702,6 +18703,20 @@
       "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.0.1.tgz",
       "integrity": "sha512-HSdN78VMvFCSGCkh0oYX/tY4R3P1DW61f8+TeZZ4j2VLgfwvw0bpRSOv4PCVKisktIwbzHCfZsx+rLbbDBqIBA=="
     },
+    "node_modules/select-dom": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/select-dom/-/select-dom-9.0.0.tgz",
+      "integrity": "sha512-AD1NfASSwJQc1Sy713R1vT9CMmUSUo2tg0j1FtkRGIxllTphDrkuH2pYYvhRlGaoq3pS6tcKkKS/diEZLy+7BQ==",
+      "dependencies": {
+        "typed-query-selector": "^2.11.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fregante"
+      }
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -20203,6 +20218,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typed-query-selector": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.11.0.tgz",
+      "integrity": "sha512-qBs4sfmnLlPOyo2oSdvHbIFHe2CPgU54/1UGfSNceb7LARpIEVxUaeRX0Doje6oKpuySS2stqy90R3YrynR8Kg=="
+    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -21527,4 +21547,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/microfrontends/SignDocuments/package.json b/microfrontends/SignDocuments/package.json
index 97970e988..5bc6f7685 100644
--- a/microfrontends/SignDocuments/package.json
+++ b/microfrontends/SignDocuments/package.json
@@ -32,6 +32,7 @@
     "react-scrollbars-custom": "^4.1.1",
     "react-signature-canvas": "^1.0.6",
     "reactour": "^1.19.1",
+    "select-dom": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
index 6591667bc..ec1ce695b 100644
--- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
@@ -25,6 +25,7 @@ import Nodata from "./component/Nodata";
 import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
 import { contractUsers, contactBook } from "../utils/Utils";
+import { $ } from 'select-dom';
 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
   const [pdfDetails, setPdfDetails] = useState([]);
@@ -995,6 +996,17 @@ function SignYourSelf() {
       });
   };
 
+  const modalAlign = () => {
+    let modalDialog = $('.modal-dialog').getBoundingClientRect();
+    let mobileHead = $('.mobileHead').getBoundingClientRect()
+    let modal = $('.modal-dialog');
+    if (modalDialog.left < mobileHead.left) {
+      let leftOffset = mobileHead.left - modalDialog.left;
+      modal.style.left = leftOffset + 'px';
+      modal.style.top = (window.innerHeight/2.5) + 'px';
+    }
+  };
+
   return (
     <DndProvider backend={HTML5Backend}>
       {isLoading.isLoad ? (
@@ -1036,7 +1048,10 @@ function SignYourSelf() {
           >
             {/* this modal is used show this document is already sign */}
 
-            <Modal show={showAlreadySignDoc.status}>
+            <Modal 
+              show={showAlreadySignDoc.status}
+              onShow={() => modalAlign()}
+            >
               <ModalHeader style={{ background: themeColor() }}>
                 <span style={{ color: "white" }}> Sign Documents</span>
               </ModalHeader>
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
index 77b3de40e..5c03b98b1 100644
--- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js
@@ -25,6 +25,7 @@ import Nodata from "./component/Nodata";
 import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
 import CustomModal from "./component/CustomModal";
+import { $ } from 'select-dom';
 function EmbedPdfImage() {
   const { id, contactBookId } = useParams();
   const [isSignPad, setIsSignPad] = useState(false);
@@ -953,6 +954,17 @@ function EmbedPdfImage() {
     );
   };
 
+  const modalAlign = () => {
+    let modalDialog = $('.modal-dialog').getBoundingClientRect();
+    let mobileHead = $('.mobileHead').getBoundingClientRect()
+    let modal = $('.modal-dialog');
+    if (modalDialog.left < mobileHead.left) {
+      let leftOffset = mobileHead.left - modalDialog.left;
+      modal.style.left = leftOffset + 'px';
+      modal.style.top = (window.innerHeight/2.5) + 'px';
+    }
+  };
+
   return (
     <DndProvider backend={HTML5Backend}>
       {isLoading.isLoad ? (
@@ -1016,7 +1028,10 @@ function EmbedPdfImage() {
             }}
           >
             {/* this modal is used show this document is already sign */}
-            <Modal show={isAlreadySign.status}>
+            <Modal 
+              show={isAlreadySign.status}
+              onShow={() => modalAlign()}
+            >
               <ModalHeader style={{ background: themeColor() }}>
                 <span style={{ color: "white" }}> Sign Documents</span>
               </ModalHeader>