fix: blocking screen by warning for expired and decline document

Author: raktima-opensignlabs

microfrontends/SignDocuments/src/Component/PdfRequestFiles.js

@@ -62,7 +62,8 @@ function PdfRequestFiles() {
   const [isSigned, setIsSigned] = useState(false);
   const [isExpired, setIsExpired] = useState(false);
   const [alreadySign, setAlreadySign] = useState(false);
-
+  const [containerWH, setContainerWH] = useState({});
+  const divRef = useRef(null);
   const rowLevel =
     localStorage.getItem("rowlevel") &&
     JSON.parse(localStorage.getItem("rowlevel"));
@@ -94,6 +95,14 @@ function PdfRequestFiles() {
       getDocumentDetails();
     }
   }, []);
+  useEffect(() => {
+    if (divRef.current) {
+      setContainerWH({
+        width: divRef.current.offsetWidth,
+        height: divRef.current.offsetHeight
+      });
+    }
+  }, [divRef.current]);
 
   //function for get document details for perticular signer with signer'object id
   const getDocumentDetails = async () => {
@@ -982,9 +991,10 @@ function PdfRequestFiles() {
             </div>
           )}
 
-          <div className="signatureContainer">
+          <div className="signatureContainer" ref={divRef}>
             {/* this modal is used to show decline alert */}
             <CustomModal
+              containerWH={containerWH}
               show={isDecline.isDeclined}
               headMsg="Document Declined Alert!"
               bodyMssg={
@@ -1009,6 +1019,7 @@ function PdfRequestFiles() {
             />
             {/* this modal is used for show expired alert */}
             <CustomModal
+              containerWH={containerWH}
               show={isExpired}
               headMsg="Document Expired!"
               bodyMssg="This Document is no longer available."

microfrontends/SignDocuments/src/Component/component/CustomModal.js

@@ -8,11 +8,19 @@ function CustomModal({
   bodyMssg,
   footerMessage,
   declineDoc,
-  setIsDecline
+  setIsDecline,
+  containerWH
 }) {
+  const isMobile = window.innerWidth < 767;
   return (
     show && (
-      <div className="parentDiv">
+      <div
+        className="parentDiv"
+        style={{
+          width: containerWH && containerWH.width,
+          height: isMobile ? "100%" : containerWH && containerWH.height
+        }}
+      >
         <div className="childDiv">
           <div className="modalHeadDiv bg-danger">{headMsg && headMsg}</div>
           <div className="modalBodyDIv">

microfrontends/SignDocuments/src/Component/recipientSignPdf.js

@@ -67,12 +67,13 @@ function EmbedPdfImage() {
     status: false,
     type: "load"
   });
-
+  const [containerWH, setContainerWH] = useState({});
   const docId = id && id;
   const isMobile = window.innerWidth < 767;
   const index = xyPostion.findIndex((object) => {
     return object.pageNumber === pageNumber;
   });
+  const divRef = useRef(null);
 
   useEffect(() => {
     const clientWidth = window.innerWidth;
@@ -82,6 +83,14 @@ function EmbedPdfImage() {
     setPdfNewWidth(pdfWidth);
     getDocumentDetails();
   }, []);
+  useEffect(() => {
+    if (divRef.current) {
+      setContainerWH({
+        width: divRef.current.offsetWidth,
+        height: divRef.current.offsetHeight
+      });
+    }
+  }, [divRef.current]);
 
   //function for get document details for perticular signer with signer'object id
   const getDocumentDetails = async () => {
@@ -952,9 +961,10 @@ function EmbedPdfImage() {
       ) : noData ? (
         <Nodata />
       ) : (
-        <div className="signatureContainer">
+        <div className="signatureContainer" ref={divRef}>
           {/* this modal is used to show decline alert */}
           <CustomModal
+            containerWH={containerWH}
             show={isDecline.isDeclined}
             headMsg="Document Declined Alert!"
             bodyMssg={
@@ -977,6 +987,7 @@ function EmbedPdfImage() {
           />
           {/* this modal is used for show expired alert */}
           <CustomModal
+            containerWH={containerWH}
             show={isExpired}
             headMsg="Document Expired!"
             bodyMssg="This Document is no longer available."

microfrontends/SignDocuments/src/css/customModal.css

@@ -1,14 +1,11 @@
 .parentDiv {
-    width: 100%;
-    height: 100%;
     background: gray;
     position: absolute;
-    z-index: 100;
+    z-index: 20;
     background-color: rgba(0, 0, 0, 0.75);
     display: flex;
     flex-direction: column;
-    /* justify-content: center; */
-    align-items: center;
+     align-items: center;
 }
 
 .childDiv {
@@ -18,7 +15,7 @@
     justify-content: center;
     align-content: center;
     background-color: #fff;
-    margin:30px 20px;
+    margin: 30px 20px;
     border: 0px 1px 1px 1px solid rgba(0, 0, 0, .2);
     border-radius: 0.3rem;
     outline: 0;
@@ -47,7 +44,8 @@
 
     font-size: 15px !important;
 }
-.modalFooterDiv{
+
+.modalFooterDiv {
     margin: 10px;
     display: flex;
     justify-content: flex-end;