fix two modal overlap during signyourself flow

Author: raktima-opensignlabs

microfrontends/SignDocuments/package-lock.json

@@ -15,7 +15,11 @@ import EmailComponent from "./component/emailComponent";
 import FieldsComponent from "./component/fieldsComponent";
 import Modal from "react-bootstrap/Modal";
 import ModalHeader from "react-bootstrap/esm/ModalHeader";
-import { convertPNGtoJPEG, contractDocument, getBase64FromIMG } from "../utils/Utils";
+import {
+  convertPNGtoJPEG,
+  contractDocument,
+  getBase64FromIMG
+} from "../utils/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
 import { onSaveImage, onSaveSign } from "../utils/Utils";
@@ -26,7 +30,7 @@ import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
 import { contractUsers, contactBook, urlValidator } from "../utils/Utils";
 import { modalAlign } from "../utils/Utils";
-import { $ } from 'select-dom';
+import { $ } from "select-dom";
 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
   const [pdfDetails, setPdfDetails] = useState([]);
@@ -169,20 +173,20 @@ function SignYourSelf() {
     //pdf from left and right component
     setPdfNewWidth(pdfWidth);
     if (documentId) {
-      getDocumentDetails();
+      getDocumentDetails(true);
     }
   }, []);
 
   //function for get document details for perticular signer with signer'object id
-  const getDocumentDetails = async () => {
+  const getDocumentDetails = async (showComplete) => {
     //getting document details
     const documentData = await contractDocument(documentId);
 
     if (documentData && documentData.length > 0) {
       setPdfDetails(documentData);
       const isCompleted =
         documentData[0].IsCompleted && documentData[0].IsCompleted;
-      if (isCompleted) {
+      if (isCompleted && showComplete) {
         const docStatus = {
           isCompleted: isCompleted
         };
@@ -615,7 +619,7 @@ function SignYourSelf() {
         // console.log("json ", json);
         setPdfUrl(json.result.data);
         if (json.result.data) {
-          getDocumentDetails();
+          getDocumentDetails(false);
         }
       })
       .catch((err) => {

microfrontends/SignDocuments/src/Component/SignYourselfPdf.js

@@ -28,9 +28,7 @@ function EmailComponent({
     setIsLoading(true);
     let sendMail;
     for (let i = 0; i < emailCount.length; i++) {
-
       try {
-
         const imgPng =
           "https://qikinnovation.ams3.digitaloceanspaces.com/logo.png";
         // "https://qikinnovation.ams3.digitaloceanspaces.com/mailLogo_2023-08-18T12%3A51%3A31.573Z.png";
@@ -111,16 +109,22 @@ function EmailComponent({
 
     const pdf = await getBase64FromUrl(pdfUrl);
     const isAndroidDevice = navigator.userAgent.match(/Android/i);
-    const isAppleDevice = (/iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) && !window.MSStream
+    const isAppleDevice =
+      (/iPad|iPhone|iPod/.test(navigator.platform) ||
+        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
+      !window.MSStream;
     if (isAndroidDevice || isAppleDevice) {
-      const byteArray = Uint8Array.from(atob(pdf).split('').map(char => char.charCodeAt(0)));
-      const blob = new Blob([byteArray], { type: 'application/pdf' });
+      const byteArray = Uint8Array.from(
+        atob(pdf)
+          .split("")
+          .map((char) => char.charCodeAt(0))
+      );
+      const blob = new Blob([byteArray], { type: "application/pdf" });
       const blobUrl = URL.createObjectURL(blob);
-      window.open(blobUrl, '_blank');
+      window.open(blobUrl, "_blank");
     } else {
       printModule({ printable: pdf, type: "pdf", base64: true });
     }
-
   };
 
   //handle download signed pdf
@@ -130,12 +134,11 @@ function EmailComponent({
 
   const sanitizeFileName = (pdfName) => {
     // Replace spaces with underscore
-    return pdfName.replace(/ /g, '_');
-  }
+    return pdfName.replace(/ /g, "_");
+  };
 
   const isAndroid = /Android/i.test(navigator.userAgent);
 
-
   return (
     <div>
       {/* isEmail */}
@@ -167,7 +170,7 @@ function EmailComponent({
         )}
 
         <ModalHeader style={{ background: themeColor() }}>
-          <span style={{ color: "white" }}>Email Documents</span>
+          <span style={{ color: "white" }}>Successfully signed!</span>
 
           <div style={{ display: "flex", flexDirection: "row" }}>
             <div></div>
@@ -259,14 +262,20 @@ function EmailComponent({
                 >
                   {emailCount.map((data, ind) => {
                     return (
-                      <div className="emailChip"
-                      style={{display:"flex", flexDirection:"row", alignItems:"center"}}
-                      key={ind}>
+                      <div
+                        className="emailChip"
+                        style={{
+                          display: "flex",
+                          flexDirection: "row",
+                          alignItems: "center"
+                        }}
+                        key={ind}
+                      >
                         <span
                           style={{
                             color: "white",
                             fontSize: "13px",
-                            marginRight: "20px"
+                            marginTop: "2px"
                           }}
                         >
                           {data}
@@ -278,7 +287,7 @@ function EmailComponent({
                           src={close}
                           width={10}
                           height={10}
-                          style={{ fontWeight: "600" }}
+                          style={{ fontWeight: "600", margin: "0 0 10px 2px" }}
                         />
                       </div>
                     );