#168 - Align Modal to Center of PDF if Signed

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

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": {

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>

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>