fix: multisign signature issue in mobile view

microfrontends/SignDocuments/src/Component/SignYourselfPdf.js

@@ -478,7 +478,7 @@ function SignYourSelf() {
       }
       //else if signature is more than one then embed all sign with the use of pdf-lib
       else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
-        const flag = false;
+        const flag = true;
         //embed document's object id to all pages in pdf document
         await embedDocId(pdfDoc, documentId, allPages);
 

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

@@ -1,11 +1,24 @@
 import React from "react";
 import Modal from "react-bootstrap/Modal";
 import ModalHeader from "react-bootstrap/esm/ModalHeader";
+import { themeColor } from "../../utils/ThemeColor/backColor";
 
-function AlertComponent({ isShow, alertMessage, setIsAlert }) {
+function AlertComponent({
+  isShow,
+  alertMessage,
+  setIsAlert,
+  isdefaultSign,
+  addDefaultSignature,
+  headBG
+}) {
   return (
     <Modal show={isShow}>
-      <ModalHeader className="bg-danger" style={{ color: "white" }}>
+      <ModalHeader
+        style={{
+          color: "white",
+          background: headBG ? themeColor() : "#dc3545"
+        }}
+      >
         <span>Alert</span>
       </ModalHeader>
 
@@ -13,21 +26,51 @@ function AlertComponent({ isShow, alertMessage, setIsAlert }) {
         <span>{alertMessage}</span>
       </Modal.Body>
       <Modal.Footer>
-        <button
-          onClick={() => {
-            setIsAlert({
-              isShow: false,
-              alertMessage: ""
-            });
-          }}
-          style={{
-            color: "black"
-          }}
-          type="button"
-          className="finishBtn"
-        >
-          Ok
-        </button>
+        {isdefaultSign ? (
+          <>
+            <button
+              onClick={() => addDefaultSignature()}
+              style={{
+                background: themeColor()
+              }}
+              type="button"
+              className="finishBtn"
+            >
+              Yes
+            </button>
+            <button
+              onClick={() => {
+                setIsAlert({
+                  isShow: false,
+                  alertMessage: ""
+                });
+              }}
+              style={{
+                color: "black"
+              }}
+              type="button"
+              className="finishBtn"
+            >
+              Close
+            </button>
+          </>
+        ) : (
+          <button
+            onClick={() => {
+              setIsAlert({
+                isShow: false,
+                alertMessage: ""
+              });
+            }}
+            style={{
+              color: "black"
+            }}
+            type="button"
+            className="finishBtn"
+          >
+            Ok
+          </button>
+        )}
       </Modal.Footer>
     </Modal>
   );

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

@@ -1,20 +1,17 @@
 import React from "react";
- 
 
 function DefaultSignature({
   themeColor,
   defaultSignImg,
-  setShowAlreadySignDoc,
-  xyPostion
+  xyPostion,
+  setIsAlert
 }) {
   const confirmToaddDefaultSign = () => {
     if (xyPostion.length > 0) {
-      const alreadySign = {
-        status: true,
-        mssg: "Are you sure you want to sign at requested locations?",
-        sure: true
-      };
-      setShowAlreadySignDoc(alreadySign);
+      setIsAlert({
+        isShow: true,
+        alertMessage: "Are you sure you want to sign at requested locations?"
+      });
     } else {
       alert("please select position!");
     }

microfrontends/SignDocuments/src/Component/recipientSignPdf.js

@@ -72,6 +72,10 @@ function EmbedPdfImage() {
   const [isDecline, setIsDecline] = useState({
     isDeclined: false
   });
+  const [addDefaultSign, setAddDefaultSign] = useState({
+    isShow: false,
+    alertMessage: ""
+  });
   const [pdfLoadFail, setPdfLoadFail] = useState({
     status: false,
     type: "load"
@@ -483,7 +487,10 @@ function EmbedPdfImage() {
                   });
               })
               .catch((error) => {
-                console.error("Error:", error);
+                setIsAlert({
+                  isShow: true,
+                  alertMessage: "something went wrong"
+                });
               });
           });
         }
@@ -632,7 +639,10 @@ function EmbedPdfImage() {
         }
       })
       .catch((err) => {
-        console.log("error updating field is decline ", err);
+        setIsAlert({
+          isShow: true,
+          alertMessage: "something went wrong"
+        });
       });
   };
 
@@ -658,7 +668,10 @@ function EmbedPdfImage() {
     }
 
     setXyPostion(xyDefaultPos);
-    setIsAlreadySign({ status: false });
+    setAddDefaultSign({
+      isShow: false,
+      alertMessage: ""
+    });
   };
 
   //function for update TourStatus
@@ -785,6 +798,15 @@ function EmbedPdfImage() {
             alertMessage={isAlert.alertMessage}
             setIsAlert={setIsAlert}
           />
+          <AlertComponent
+            isShow={addDefaultSign.isShow}
+            alertMessage={addDefaultSign.alertMessage}
+            setIsAlert={setAddDefaultSign}
+            isdefaultSign={true}
+            addDefaultSignature={addDefaultSignature}
+            headBG={themeColor()}
+          />
+
           {/* this modal is used for show expired alert */}
           <CustomModal
             containerWH={containerWH}
@@ -842,18 +864,6 @@ function EmbedPdfImage() {
                 >
                   Close
                 </button>
-                {isAlreadySign.sure && (
-                  <button
-                    onClick={() => addDefaultSignature()}
-                    style={{
-                      background: themeColor()
-                    }}
-                    type="button"
-                    className="finishBtn"
-                  >
-                    Yes
-                  </button>
-                )}
               </Modal.Footer>
             </Modal>
             {/* this is modal of signature pad */}
@@ -927,6 +937,7 @@ function EmbedPdfImage() {
                 xyPostion={xyPostion}
                 setXyPostion={setXyPostion}
                 setShowAlreadySignDoc={setIsAlreadySign}
+                setIsAlert={setAddDefaultSign}
               />
             </div>
           ) : (

microfrontends/SignDocuments/src/css/signature.css

@@ -8,6 +8,7 @@
 .penContainer {
   width: 460px;
 }
+
 .borderResize {
   position: absolute;
   display: inline-block;
@@ -15,17 +16,20 @@
   height: 14px;
 
 }
-.mailBtn{
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    padding: 3px 15px !important;
-    background-color: rgb(79 190 241);
-    border: none !important;
-    color: white !important;
+
+.mailBtn {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+  padding: 3px 15px !important;
+  background-color: rgb(79 190 241);
+  border: none !important;
+  color: white !important;
 }
+
 .mailBtn:hover {
   box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
 }
-.emailToast{
+
+.emailToast {
   position: absolute;
   z-index: 10;
   background: #aeedae;
@@ -34,7 +38,7 @@
   border-radius: 2px;
 }
 
- 
+
 .signatureBtn {
   border: 1.5px solid #47a3ad;
   margin-bottom: 10px;
@@ -162,14 +166,15 @@
 
 .placeholdCloseBtn {
   position: absolute;
-  right: -9px;
-  top: -15px;
+  right: -5px;
+  top: -5px;
   border-radius: 100%;
   font-size: 10px;
   cursor: pointer;
-  padding: 0px 5px;
+  padding: 0px 5.1px 1px 5px;
 }
-.placeholderBlock{
+
+.placeholderBlock {
   padding: 0px;
   z-index: 1;
   position: absolute;
@@ -179,7 +184,8 @@
   background: #daebe0;
   text-align: center;
   justify-content: center;
-  border-width: 0.2px
+  border-width: 0.2px;
+  
 }
 
 .finishBtn {