#168 - Align Modal to Center of PDF if Signed

Author: rishabjasrotia

microfrontends/SignDocuments/package-lock.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": {

microfrontends/SignDocuments/package.json

@@ -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>

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 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>