fix: blocking screen by warning for expired and decline document

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