handled placeholder from all devices, remove underline from certificate,login page style,solved reactour issue for document owner from login flow, need your sign reports finish button issue,remove commented code, delete button(cross) on email documents popup issue and solve some minor design issue

microfrontends/SignDocuments/src/Component/Certificate/Certificate.js

@@ -33,23 +33,23 @@ function Certificate({ pdfData }) {
     page: {
       borderRadius: "5px",
       padding: "10px",
-      backgroundColor: "white",
+      backgroundColor: "white"
     },
     section1: {
       border: "1px solid rgb(177, 174, 174)",
-      padding: "20px",
+      padding: "20px"
     },
     textStyle: {
       fontWeight: "bold",
       fontSize: "11px",
-      marginBottom: "10px",
+      marginBottom: "10px"
     },
     textStyle2: {
       fontWeight: "600",
       fontSize: "11px",
       marginBottom: "10px",
-      color: "gray",
+      color: "gray"
-    },
+    }
   });
 
   const generatedDate = () => {
@@ -57,7 +57,7 @@ function Certificate({ pdfData }) {
     const localExpireDate = newDate.toLocaleDateString("en-US", {
       day: "numeric",
       month: "long",
-      year: "numeric",
+      year: "numeric"
     });
 
     var currentOffset = newDate.getTimezoneOffset();
@@ -79,7 +79,7 @@ function Certificate({ pdfData }) {
           textAlign: "right",
           color: "gray",
           fontSize: "10px",
-          marginBottom: "30px",
+          marginBottom: "30px"
         }}
       >
         Generated On {localExpireDate} {hoursIST}:{minutesIST} IST
@@ -92,7 +92,7 @@ function Certificate({ pdfData }) {
     const localExpireDate = newDate.toLocaleDateString("en-US", {
       day: "numeric",
       month: "long",
-      year: "numeric",
+      year: "numeric"
     });
 
     var currentOffset = newDate.getTimezoneOffset();
@@ -136,7 +136,7 @@ function Certificate({ pdfData }) {
       )
     );
   };
- 
+
   return (
     isLoad && (
       <Document>
@@ -151,7 +151,7 @@ function Certificate({ pdfData }) {
                   fontSize: "20px",
                   fontWeight: "bold",
                   color: "#31bceb",
-                  marginBottom: "10px",
+                  marginBottom: "10px"
                 }}
               >
                 {" "}
@@ -165,7 +165,7 @@ function Certificate({ pdfData }) {
                       fontSize: "16px",
                       fontWeight: "bold",
                       color: "#31bceb",
-                      margin: "10px 0px 10px 0px",
+                      margin: "10px 0px 10px 0px"
                     }}
                   >
                     Summary
@@ -203,36 +203,40 @@ function Certificate({ pdfData }) {
                         fontSize: "16px",
                         fontWeight: "bold",
                         color: "#31bceb",
-                        margin: "10px 0px 10px 0px",
+                        margin: "10px 0px 10px 0px"
                       }}
                     >
                       Recipients
                     </Text>
 
                     <View>
-                      {multiSigner && multiSigner.map((data, ind) => {
+                      {multiSigner &&
-                        return (
+                        multiSigner.map((data, ind) => {
-                          <View
+                          return (
-                            key={ind}
-                            style={{ display: "flex", flexDirection: "column" }}
-                          >
                             <View
+                              key={ind}
                               style={{
-                                border: "0.4px solid #bdbbbb",
+                                display: "flex",
-                                marginBottom: "10px",
+                                flexDirection: "column"
                               }}
-                            ></View>
+                            >
-                            {signerName(data)}
+                              <View
+                                style={{
+                                  border: "0.4px solid #bdbbbb",
+                                  marginBottom: "10px"
+                                }}
+                              ></View>
+                              {signerName(data)}
 
-                            <Text style={styles.textStyle}>
+                              <Text style={styles.textStyle}>
-                              Accessed from : &nbsp;
+                                Accessed from : &nbsp;
-                              <Text style={styles.textStyle2}>
+                                <Text style={styles.textStyle2}>
-                                {data.ipAddress}
+                                  {data.ipAddress}
+                                </Text>
                               </Text>
-                            </Text>
+                            </View>
-                          </View>
+                          );
-                        );
+                        })}
-                      })}
                     </View>
                   </View>
                 ) : (
@@ -242,7 +246,7 @@ function Certificate({ pdfData }) {
                         fontSize: "16px",
                         fontWeight: "bold",
                         color: "#31bceb",
-                        margin: "10px 0px 10px 0px",
+                        margin: "10px 0px 10px 0px"
                       }}
                     >
                       Recipients
@@ -259,7 +263,8 @@ function Certificate({ pdfData }) {
                     <Text style={styles.textStyle}>
                       Accessed from : &nbsp;
                       <Text style={styles.textStyle2}>
-                        {pdfData[0].AuditTrail && pdfData[0].AuditTrail[0].ipAddress}
+                        {pdfData[0].AuditTrail &&
+                          pdfData[0].AuditTrail[0].ipAddress}
                       </Text>
                     </Text>
 

microfrontends/SignDocuments/src/Component/DraftDocument.js

@@ -42,7 +42,7 @@ function DraftDocument() {
       .then((Listdata) => {
         const json = Listdata.data;
         const res = json.results;
-        // console.log("res", res);
+        
         if (res[0] && res.length > 0) {
           setPdfDetails(res);
           const loadObj = {
@@ -74,20 +74,16 @@ function DraftDocument() {
 
     //checking document is completed and signer exist then navigate to pdfRequestFiles file
     if (data.IsCompleted && checkSignerExist) {
-      // window.location.hash = `/pdfRequestFiles`;
+    navigate(`${hostUrl}pdfRequestFiles`);
-
-      navigate(`${hostUrl}pdfRequestFiles`);
     }
     //checking document is completed and signer does not exist then navigate to recipientSignPdf file
     else if (data.IsCompleted && !checkSignerExist) {
-      // window.location.hash = `/recipientSignPdf/${data.objectId}/${data.ExtUserPtr.Phone}`;
       navigate(
         `${hostUrl}signaturePdf`
       );
     }
     //checking document is declined by someone then navigate to pdfRequestFiles file
     else if (isDecline) {
-      // window.location.hash = `/pdfRequestFiles`;
       navigate(`${hostUrl}pdfRequestFiles`);
     }
     //checking document has expired and signers exist and placeholder does not set yet then navigate to pdfRequestFiles file
@@ -97,7 +93,6 @@ function DraftDocument() {
       checkSignerExist &&
       !isPlaceholder
     ) {
-      // window.location.hash = `/placeHolderSign`;
       navigate(`${hostUrl}placeHolderSign`);
     }
     //checking document has expired and signers does not exist and document not signed yet then navigate to pdfRequestFiles file

microfrontends/SignDocuments/src/Component/ManageSign.js

@@ -8,7 +8,7 @@ import "../css/signature.css";
 import axios from "axios";
 import { toDataUrl } from "../utils/toDataUrl";
 
-// console.log("appName ", appName)
+ 
 const ManageSign = () => {
   let appName;
   const [penColor, setPenColor] = useState("blue");
@@ -68,7 +68,6 @@ const ManageSign = () => {
         if (res.data.results.length > 0) {
           setId(res.data.results[0].objectId);
           setSignName(res.data.results[0].SignatureName);
-          // console.log(res.data.results[0].ImageURL);
           setImage(res.data.results[0].ImageURL);
           if (res.data.results[0] && res.data.results[0].Initials) {
             setInitials(res.data.results[0].Initials);
@@ -143,7 +142,7 @@ const ManageSign = () => {
 
     if (!signName) {
       setNameWarning(true);
-      // setTimeout(() => setNameWarning(false), 1000);
+     
     } else if (!isvalue) {
       setWarning(true);
       setTimeout(() => setWarning(false), 1000);
@@ -337,12 +336,8 @@ const ManageSign = () => {
       <div
         className="mainDiv"
         style={{
-          // height: "100%",
-
           width: "100%",
           paddingRight: "10px",
-
-          // maxHeight:"500px",
         }}
       >
         <div style={{ margin: 20 }}>

microfrontends/SignDocuments/src/Component/PdfRequestFiles.js

@@ -12,8 +12,6 @@ import { useParams } from "react-router-dom";
 import SignPad from "./component/signPad";
 import RenderAllPdfPage from "./component/renderAllPdfPage";
 import {
-  contactBook,
-  contractUsers,
   getBase64FromIMG,
   getBase64FromUrl
 } from "../utils/Utils";
@@ -65,6 +63,7 @@ function PdfRequestFiles() {
   });
   const [isSigned, setIsSigned] = useState(false);
   const [isExpired, setIsExpired] = useState(false);
+  const [alreadySign, setAlreadySign] = useState(false);
 
   const rowLevel =
     localStorage.getItem("rowlevel") &&
@@ -89,6 +88,7 @@ function PdfRequestFiles() {
     const clientWidth = window.innerWidth;
     const value = docId ? 80 : 30;
     const pdfWidth = clientWidth - 160 - 200 - value;
+
     //160 is width of left side, 200 is width of right side component and 50 is space of middle compoent
     //pdf from left and right component
     setPdfNewWidth(pdfWidth);
@@ -99,27 +99,6 @@ function PdfRequestFiles() {
 
   //function for get document details for perticular signer with signer'object id
   const getDocumentDetails = async () => {
-    const contractUsersRes = await contractUsers(jsonSender.objectId);
-
-    if (contractUsersRes && contractUsersRes[0]) {
-      const objId = contractUsersRes[0].objectId;
-
-      setSignerObjectId(objId);
-    } else if (contractUsersRes === "Error: Something went wrong!") {
-      const loadObj = {
-        isLoad: false
-      };
-      setHandleError("Error: Something went wrong!");
-      setIsLoading(loadObj);
-    } else if (contractUsersRes.length === 0) {
-      const contractContactBook = await contactBook(jsonSender.objectId);
-      if (contractContactBook && contractContactBook[0]) {
-        const objId = contractUsersRes[0].objectId;
-
-        setSignerObjectId(objId);
-      }
-    }
-
     await axios
       .get(
         `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
@@ -136,13 +115,24 @@ function PdfRequestFiles() {
       .then((Listdata) => {
         const json = Listdata.data;
         const res = json.results;
-        // console.log("res", res);
+
         if (res[0] && res.length > 0) {
           const isCompleted = res[0].IsCompleted && res[0].IsCompleted;
           const expireDate = res[0].ExpiryDate.iso;
           const declined = res[0].IsDeclined && res[0].IsDeclined;
           const expireUpdateDate = new Date(expireDate).getTime();
           const currDate = new Date().getTime();
+          const getSigners = res[0].Signers;
+          const getCurrentSigner =
+            getSigners &&
+            getSigners.filter(
+              (data) => data.UserId.objectId === jsonSender.objectId
+            );
+
+          const currUserId = getCurrentSigner[0]
+            ? getCurrentSigner[0].objectId
+            : "";
+          setSignerObjectId(currUserId);
           if (res[0].SignedUrl) {
             setPdfUrl(res[0].SignedUrl);
           } else {
@@ -154,6 +144,7 @@ function PdfRequestFiles() {
               isCertificate: true,
               isModal: true
             };
+            setAlreadySign(true);
             setIsCompleted(data);
           } else if (declined) {
             const currentDecline = {
@@ -173,17 +164,34 @@ function PdfRequestFiles() {
                 (data) => data.Activity === "Signed"
               );
 
+            const checkAlreadySign =
+              json.results[0].AuditTrail &&
+              json.results[0].AuditTrail.length > 0 &&
+              json.results[0].AuditTrail.filter(
+                (data) =>
+                  data.UserPtr.objectId === currUserId &&
+                  data.Activity === "Signed"
+              );
+            if (
+              checkAlreadySign &&
+              checkAlreadySign[0] &&
+              checkAlreadySign.length > 0
+            ) {
+              setAlreadySign(true);
+            }
+
             let signers = [];
             let unSignedSigner = [];
 
             //check document is signed or not
             if (checkDocIdExist && checkDocIdExist.length > 0) {
+              setAlreadySign(true);
               setIsDocId(true);
               const signerRes = res[0].Signers;
               //comparison auditTrail user details with signers user details
               for (let i = 0; i < signerRes.length; i++) {
                 const signerId = signerRes[i].objectId;
-                // console.log("getSigner", getSigner);
+               
                 let isSigned = false;
                 for (let j = 0; j < checkDocIdExist.length; j++) {
                   const signedExist =
@@ -192,7 +200,6 @@ function PdfRequestFiles() {
                   // if match then add signed data in signer array and break loop
 
                   if (signerId === signedExist) {
-                    // console.log("signedExist", signedExist);
                     signers.push({ ...signerRes[i], ...signerRes[i] });
                     isSigned = true;
                     break;
@@ -202,8 +209,6 @@ function PdfRequestFiles() {
                 if (!isSigned) {
                   unSignedSigner.push({ ...signerRes[i], ...signerRes[i] });
                 }
-
-                // console.log("check Signers status",signers,unSignedSigner)
               }
               setSignedSigners(signers);
               setUnSignedSigners(unSignedSigner);
@@ -211,7 +216,6 @@ function PdfRequestFiles() {
               setSignerPos(res[0].Placeholders);
             } else {
               let unsigned = [];
-              // console.log("else condition");
               for (let i = 0; i < res.length; i++) {
                 unsigned.push(res[i].Signers);
               }
@@ -226,7 +230,6 @@ function PdfRequestFiles() {
             alert("No data found!");
           }
         } else {
-          // alert("No data found!");
           setNoData(true);
           const loadObj = {
             isLoad: false
@@ -279,7 +282,6 @@ function PdfRequestFiles() {
       });
   };
 
-  //  console.log("signer", signerPos, unsignedSigners, isCompleted);
   //function for embed signature or image url in pdf
   async function embedImages() {
     const checkUser = signerPos.filter(
@@ -320,7 +322,6 @@ function PdfRequestFiles() {
 
         //checking if signature is only one then send image url in jpeg formate to server
         if (pngUrl.length === 1 && pngUrl[0].pos.length === 1) {
-          // console.log("else condition");
           if (isDocId) {
             pdfBase64 = await getBase64FromUrl(url);
           } else {
@@ -330,7 +331,7 @@ function PdfRequestFiles() {
               const fontSize = 10;
               const textContent =
                 documentId && `OpenSign™ DocumentId: ${documentId}`;
-              // console.log("textcontent", documentId);
+
               const pages = pdfDoc.getPages();
               const page = pages[i];
 
@@ -472,10 +473,54 @@ function PdfRequestFiles() {
               const imgWidth = imgUrlList[id].Width
                 ? imgUrlList[id].Width
                 : 150;
-
+              const isMobile = window.innerWidth < 767;
+              const newWidth = window.innerWidth;
+              const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
+              const xPos = (pos) => {
+                //checking both condition mobile and desktop view
+                if (isMobile) {
+                  //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
+                  if (pos.isMobile) {
+                    const x = pos.xPosition * (pos.scale / scale);
+                    return x * scale + 50;
+                  } else {
+                    const x = pos.xPosition / scale;
+                    return x * scale;
+                  }
+                } else {
+                  //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
+                  if (pos.isMobile) {
+                    const x = pos.xPosition * pos.scale + 50;
+                    return x;
+                  } else {
+                    return pos.xPosition;
+                  }
+                }
+              };
+              const yPos = (pos) => {
+                //checking both condition mobile and desktop view
+                const y = pos.yPosition / scale;
+                if (isMobile) {
+                  //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
+                  if (pos.isMobile) {
+                    const y = pos.yPosition * (pos.scale / scale);
+                    return page.getHeight() - y * scale - imgHeight;
+                  } else {
+                    return page.getHeight() - y * scale - imgHeight;
+                  }
+                } else {
+                  //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
+                  if (pos.isMobile) {
+                    const y = pos.yPosition * pos.scale;
+                    return page.getHeight() - y - imgHeight;
+                  } else {
+                    return page.getHeight() - pos.yPosition - imgHeight;
+                  }
+                }
+              };
               page.drawImage(img, {
-                x: imgUrlList[id].xPosition,
+                x: xPos(imgUrlList[id]),
-                y: page.getHeight() - imgUrlList[id].yPosition - imgHeight,
+                y: yPos(imgUrlList[id]),
                 width: imgWidth,
                 height: imgHeight
               });
@@ -506,24 +551,91 @@ function PdfRequestFiles() {
     signerData
   ) => {
     let signgleSign;
-
+    const isMobile = window.innerWidth < 767;
+    const newWidth = window.innerWidth;
+    const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
     if (
       signerData &&
       signerData.length === 1 &&
       signerData[0].pos.length === 1
     ) {
       const height = xyPosData.Height ? xyPosData.Height : 60;
-      const bottomY = xyPosData.isDrag
+
-        ? xyPosData.yBottom - height
+      const xPos = (pos) => {
-        : xyPosData.yBottom - height + xyPosData.firstYPos;
+        //checking both condition mobile and desktop view
+        if (isMobile) {
+          //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
+          if (pos.isMobile) {
+            const x = pos.xPosition * (pos.scale / scale);
+            return x * scale + 50;
+          } else {
+            const x = pos.xPosition / scale;
+            return x * scale;
+          }
+        } else {
+          //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
+          if (pos.isMobile) {
+            const x = pos.xPosition * pos.scale + 50;
+            return x;
+          } else {
+            return pos.xPosition;
+          }
+        }
+      };
+
+      const yBottom = (pos) => {
+        let yPosition;
+        //checking both condition mobile and desktop view
+
+        if (isMobile) {
+          //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
+          if (pos.isMobile) {
+            const y = pos.yPosition * (pos.scale / scale);
+            yPosition = pos.isDrag
+              ? y * scale - height
+              : pos.firstYPos
+              ? y * scale - height + pos.firstYPos
+              : y * scale - height;
+            return yPosition;
+          } else {
+            const y = pos.yBottom / scale;
+
+            yPosition = pos.isDrag
+              ? y * scale - height
+              : pos.firstYPos
+              ? y * scale - height + pos.firstYPos
+              : y * scale - height;
+            return yPosition;
+          }
+        } else {
+          //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
+          if (pos.isMobile) {
+            const y = pos.yBottom * pos.scale;
+
+            yPosition = pos.isDrag
+              ? y - height
+              : pos.firstYPos
+              ? y - height + pos.firstYPos
+              : y - height;
+            return yPosition;
+          } else {
+            yPosition = pos.isDrag
+              ? pos.yBottom - height
+              : pos.firstYPos
+              ? pos.yBottom - height + pos.firstYPos
+              : pos.yBottom - height;
+            return yPosition;
+          }
+        }
+      };
+      const bottomY = yBottom(xyPosData);
       signgleSign = {
         pdfFile: pdfBase64Url,
         docId: documentId,
+        userId: signerObjectId,
         sign: {
           Base64: base64Url,
-          Left: xyPosData.resizeXPos
+          Left: xPos(xyPosData),
-            ? xyPosData.resizeXPos
-            : xyPosData.xPosition,
           Bottom: bottomY,
           Width: xyPosData.Width ? xyPosData.Width : 150,
           Height: height,
@@ -537,7 +649,8 @@ function PdfRequestFiles() {
     ) {
       signgleSign = {
         pdfFile: base64Url,
-        docId: documentId
+        docId: documentId,
+        userId: signerObjectId
       };
     }
 
@@ -565,7 +678,6 @@ function PdfRequestFiles() {
         }
       })
       .catch((err) => {
-        // this.setState({ loading: false });
         console.log("axois err ", err);
         alert("something went wrong");
       });
@@ -595,17 +707,12 @@ function PdfRequestFiles() {
   //function for image upload or update
   const onImageChange = (event) => {
     if (event.target.files && event.target.files[0]) {
-      // setIsSignPad(false);
-
       const imageType = event.target.files[0].type;
-
       const reader = new FileReader();
       reader.readAsDataURL(event.target.files[0]);
-
       reader.onloadend = function (e) {
         let width, height;
         const image = new Image();
-
         image.src = e.target.result;
         image.onload = function () {
           width = image.width;
@@ -783,8 +890,6 @@ function PdfRequestFiles() {
         return obj;
       });
 
-      // currentSigner[0].placeHolder.splice(i, 1, newUpdateUrl[0]);
-      // console.log("currentSigner sign", currentSigner);
       const newUpdatePos = currentSigner.map((obj, ind) => {
         if (obj.signerObjId === signerObjectId) {
           return { ...obj, placeHolder: newUpdateUrl };
@@ -842,8 +947,6 @@ function PdfRequestFiles() {
       });
   };
 
-  // console.log("unsigned", unsignedSigners, signerObjectId,isExpired);
-
   return (
     <DndProvider backend={HTML5Backend}>
       {isLoading.isLoad ? (
@@ -859,7 +962,7 @@ function PdfRequestFiles() {
               style={{
                 position: "absolute",
                 height: "100vh",
-                width: window.innerWidth,
+                width: "100%",
                 display: "flex",
                 justifyContent: "center",
                 flexDirection: "column",
@@ -1015,6 +1118,8 @@ function PdfRequestFiles() {
                 setIsDecline={setIsDecline}
                 decline={true}
                 currentSigner={currentSigner}
+                pdfUrl={pdfUrl}
+                alreadySign={alreadySign}
               />
 
               <RenderPdf
@@ -1045,7 +1150,6 @@ function PdfRequestFiles() {
                     <div
                       style={{
                         background: themeColor()
-                        //  color:"white"
                       }}
                       className="signedStyle"
                     >

microfrontends/SignDocuments/src/Component/SignYourselfPdf.js

@@ -27,8 +27,6 @@ import RenderPdf from "./component/renderPdf";
 import { contractUsers, contactBook } from "../utils/Utils";
 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
-  // pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
-
   const [pdfDetails, setPdfDetails] = useState([]);
   const [isSignPad, setIsSignPad] = useState(false);
   const [allPages, setAllPages] = useState(null);
@@ -310,52 +308,6 @@ function SignYourSelf() {
       };
       setIsLoading(loadObj);
     }
-
-    // await axios
-    //   .get(
-    //     `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-    //       "_appName"
-    //     )}_Contactbook?where={"UserId": {"__type": "Pointer","className": "_User", "objectId":"${
-    //       jsonSender.objectId
-    //     }"}}`,
-    //     {
-    //       headers: {
-    //         "Content-Type": "application/json",
-    //         "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-    //         "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-    //       },
-    //     }
-    //   )
-    //   .then((Listdata) => {
-    //     const json = Listdata.data;
-    //     const res = json.results;
-
-    //     if (res[0]) {
-    //       setSignerUserId(res[0].objectId);
-    //       const tourstatuss = res[0].TourStatus && res[0].TourStatus;
-
-    //       if (tourstatuss && tourstatuss.length > 0) {
-    //         setTourStatus(tourstatuss);
-    //         const checkTourRecipients = tourstatuss.filter(
-    //           (data) => data.signyourself
-    //         );
-    //         if (checkTourRecipients && checkTourRecipients.length > 0) {
-    //           setCheckTourStatus(checkTourRecipients[0].signyourself);
-    //         }
-    //       }
-    //     }
-    //     const loadObj = {
-    //       isLoad: false,
-    //     };
-    //     setIsLoading(loadObj);
-    //   })
-    //   .catch((err) => {
-    //     const loadObj = {
-    //       isLoad: false,
-    //     };
-    //     setHandleError("Error: Something went wrong!");
-    //     setIsLoading(loadObj);
-    //   });
   };
 
   //function for setting position after drop signature button over pdf
@@ -618,22 +570,33 @@ function SignYourSelf() {
               ? imgUrlList[id].Height
               : 60;
             const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150;
-            const isMobile = window.innerWidth < 712;
+            const isMobile = window.innerWidth < 767;
             const newWidth = window.innerWidth;
             const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
+
+            const posY = () => {
+              if (id === 0) {
+                return (
+                  page.getHeight() -
+                  imgUrlList[id].yPosition * scale -
+                  imgHeight
+                );
+              } else if (id > 0) {
+                return page.getHeight() - imgUrlList[id].yPosition * scale;
+              }
+            };
             page.drawImage(img, {
               x: isMobile
-                ? imgUrlList[id].xPosition * scale + 50
+                ? imgUrlList[id].xPosition * scale + imgWidth / 2
                 : imgUrlList[id].xPosition,
-              y:
+              y: posY(),
-                page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight,
               width: imgWidth,
               height: imgHeight
             });
           });
         }
         const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
-        // console.log("pdfbyte", pdfBytes);
+
         signPdfFun(pdfBytes, documentId);
       }
       setIsSignPad(false);
@@ -652,10 +615,10 @@ function SignYourSelf() {
     pageNo
   ) => {
     let singleSign;
-    const isMobile = window.innerWidth < 712;
+    const isMobile = window.innerWidth < 767;
     const newWidth = window.innerWidth;
     const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
-
+    const imgWidth = xyPosData.Width.Width ? xyPosData.Width.Width : 150;
     if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
       const height = xyPosData.Height ? xyPosData.Height : 60;
       const bottomY = xyPosData.isDrag
@@ -670,7 +633,7 @@ function SignYourSelf() {
         sign: {
           Base64: base64Url,
           Left: isMobile
-            ? xyPosData.xPosition * scale + 80
+            ? xyPosData.xPosition * scale + imgWidth / 2
             : xyPosData.xPosition,
           Bottom: bottomY,
           Width: xyPosData.Width ? xyPosData.Width : 150,
@@ -684,14 +647,13 @@ function SignYourSelf() {
         docId: documentId
       };
     }
-    // console.log("data",singleSign)
+
     await axios
       .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
         headers: {
           "Content-Type": "application/json",
           "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
           sessionToken: localStorage.getItem("accesstoken")
-          // sessiontoken,
         }
       })
       .then((Listdata) => {
@@ -718,7 +680,6 @@ function SignYourSelf() {
 
   //function for save x and y position and show signature  tab on that position
   const handleTabDrag = (key, e) => {
-    // console.log("key", key);
     setDragKey(key);
     setIsDragging(true);
   };
@@ -791,8 +752,6 @@ function SignYourSelf() {
   //function for image upload or update
   const onImageChange = (event) => {
     if (event.target.files && event.target.files[0]) {
-      // setIsSignPad(false);
-
       const imageType = event.target.files[0].type;
 
       const reader = new FileReader();
@@ -825,16 +784,11 @@ function SignYourSelf() {
 
         setImage({ src: image.src, imgType: imageType });
       };
-
-      //const imgUrl = URL.createObjectURL(event.target.files[0]);
-
-      //  const imgData = { width: newWidth, height: newHeight, src: imgUrl };
     }
   };
 
   //function for save button to save signature or image url
   const saveSign = (isDefaultSign) => {
-    // console.log("isDefault sign", isDefaultSign);
     const signatureImg = isDefaultSign ? defaultSignImg : signature;
     setIsSignPad(false);
 
@@ -878,9 +832,6 @@ function SignYourSelf() {
 
     if (updateFilter.length > 0) {
       const getXYdata = xyPostion[index].pos;
-
-      // const updateWidth = getXYdata[key].Width;
-      // const updateHeight = getXYdata[key].Height;
       const getPosData = getXYdata;
       const addSign = getPosData.map((url, ind) => {
         if (url.key === key) {
@@ -937,7 +888,7 @@ function SignYourSelf() {
 
     let filterData = xyPostion[index].pos.filter((data) => data.key !== key);
 
-    //  //delete and update block position
+    //delete and update block position
     if (filterData.length > 0) {
       updateResizeData.push(filterData);
       const newUpdatePos = xyPostion.map((obj, ind) => {
@@ -949,12 +900,10 @@ function SignYourSelf() {
 
       setXyPostion(newUpdatePos);
     } else {
-      // setXyPostion([]);
-
       const getRemainPage = xyPostion.filter(
         (data) => data.pageNumber !== pageNumber
       );
-      // console.log("remainPage",getRemainPage)
+
       if (getRemainPage && getRemainPage.length > 0) {
         setXyPostion(getRemainPage);
       } else {
@@ -996,7 +945,6 @@ function SignYourSelf() {
   };
   const tourConfig = [
     {
-      // updateDelay: 1500,
       selector: '[data-tut="reactourFirst"]',
       content: `Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`,
       position: "top",
@@ -1046,8 +994,6 @@ function SignYourSelf() {
       )
       .then((Listdata) => {
         // const json = Listdata.data;
-        // const res = json.results;
-        // console.log("res", json);
       })
       .catch((err) => {
         console.log("axois err ", err);

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

@@ -5,54 +5,14 @@ function DefaultSignature({
   themeColor,
   defaultSignImg,
   setShowAlreadySignDoc,
-  setDefaultSignImg,
+  xyPostion
-  userObjectId,
-  setIsLoading,
-  xyPostion,
 }) {
-  useEffect(() => {
-    getDefaultSignature(userObjectId);
-  }, []);
-
-  //function for fetch default sigature added bu users
-  const getDefaultSignature = async (userObjectId) => {
-    await axios
-      .get(
-        `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-          "_appName"
-        )}_Signature?where={"UserId": {"__type": "Pointer","className": "_User", "objectId":"${userObjectId}"}}`,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-          },
-        }
-      )
-      .then((Listdata) => {
-        const json = Listdata.data;
-        const res = json.results;
-
-        if (res[0] && res.length > 0) {
-          setDefaultSignImg(res[0].ImageURL);
-        }
-        const loadObj = {
-          isLoad: false,
-        };
-        setIsLoading(loadObj);
-      })
-      .catch((err) => {
-        // this.setState({ loading: false });
-        console.log("axois err ", err);
-      });
-  };
-
   const confirmToaddDefaultSign = () => {
     if (xyPostion.length > 0) {
       const alreadySign = {
         status: true,
         mssg: "Are you sure you want to sign at requested locations?",
-        sure: true,
+        sure: true
       };
       setShowAlreadySignDoc(alreadySign);
     } else {
@@ -67,7 +27,7 @@ function DefaultSignature({
           background: themeColor(),
           color: "white",
           padding: "5px",
-          fontFamily: "sans-serif",
+          fontFamily: "sans-serif"
         }}
       >
         Signature
@@ -78,7 +38,7 @@ function DefaultSignature({
           flexDirection: "column",
           alignItems: "center",
           marginTop: "10px",
-          fontWeight: "600",
+          fontWeight: "600"
         }}
       >
         {defaultSignImg ? (
@@ -90,7 +50,7 @@ function DefaultSignature({
                 style={{
                   width: "100%",
                   height: "100%",
-                  objectFit: "contain",
+                  objectFit: "contain"
                 }}
                 src={defaultSignImg}
               />
@@ -100,7 +60,7 @@ function DefaultSignature({
                 background: themeColor(),
                 color: "white",
                 marginTop: "20px",
-                cursor: "pointer",
+                cursor: "pointer"
               }}
               type="button"
               className="finishBtn finishnHover"
@@ -111,7 +71,9 @@ function DefaultSignature({
           </>
         ) : (
           <div style={{ margin: "10px" }}>
-            <span>Click a signature placeholder to start signing the document!</span>
+            <span>
+              Click a signature placeholder to start signing the document!
+            </span>
           </div>
         )}
       </div>

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

@@ -18,7 +18,7 @@ function EmailComponent({
   setSuccessEmail,
   signObjId,
   pdfName,
-  sender,
+  sender
 }) {
   const [emailCount, setEmailCount] = useState([]);
   const [emailValue, setEmailValue] = useState();
@@ -28,28 +28,9 @@ function EmailComponent({
     setIsLoading(true);
     let sendMail, recipent;
     for (let i = 0; i < emailCount.length; i++) {
-      // await axios
+       
-      //   .get(
-      //     `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem("_appName")}_Contactbook?where={"Email":"${emailCount[i]}"}`,
-      //     {
-      //       headers: {
-      //         "Content-Type": "application/json",
-      //         "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-      //         sessionToken: localStorage.getItem("accesstoken"),
-      //       },
-      //     }
-      //   )
-      //   .then((Listdata) => {
-      //     const json = Listdata.data;
-      //     if (json.results[0]) {
-      //       recipent = json.results[0];
-      //     }
-      //   })
-      //   .catch((err) => {
-      //     console.log("axois err ", err);
-      //   });
       try {
-        console.log("recipients", recipent);
+       
         const imgPng =
           "https://qikinnovation.ams3.digitaloceanspaces.com/logo.png";
         // "https://qikinnovation.ams3.digitaloceanspaces.com/mailLogo_2023-08-18T12%3A51%3A31.573Z.png";
@@ -58,15 +39,9 @@ function EmailComponent({
         const headers = {
           "Content-Type": "application/json",
           "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          sessionToken: localStorage.getItem("accesstoken"),
+          sessionToken: localStorage.getItem("accesstoken")
         };
-        // const serverUrl = localStorage.getItem("baseUrl");
+        
-        // const newServer = serverUrl.replaceAll("/", "%2F");
-
-        // const serverParams = `${newServer}&${localStorage.getItem(
-        //   "parseAppId"
-        // )}&${localStorage.getItem("_appName")}`;
-        // let pdfUrlWeb = `<span><a href=https://qik-ai-org.github.io/Sign-MicroappV2/#/login/${signObjId}/${recipent.Email}/${serverParams} style='cursor: pointer;'>  ${pdfName}</a><span>`;
         const themeBGcolor = themeColor();
         let params = {
           pdfName: pdfName,
@@ -83,8 +58,7 @@ function EmailComponent({
             pdfName +
             " Standard is attached to this email. Kindly download the document from the attachment.</p></div> </div><div><p>This is an automated email from Open Sign. For any queries regarding this email, please contact the sender " +
             sender.email +
-            " directly. If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.</p></div></div></body></html>",
+            " directly. If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.</p></div></div></body></html>"
-          //"html":"<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> </head>   <body> <div style='background-color: #f5f5f5; padding: 20px'> <div   style=' box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;background-color: white;padding-bottom: 20px;'> <div><img src="+imgPng +" height='50' style='padding: 20px' /></div>  <div  style=' padding: 2px;font-family: system-ui;background-color: #47a3ad;'><p style='font-size: 20px;font-weight: 400;color: white;padding-left: 20px;' > Digital Signature Request</p></div><div><p style='padding: 20px;font-family: system-ui;font-size: 14px;   margin-bottom: 10px;'> " + recipent.Name + " has requested you to review and sign" +pdfName+"</p><div style='padding: 5px 0px 5px 25px;display: flex;flex-direction: row;justify-content: space-around;'><span>Sender</span><span>" + recipent.Email + " </span></div><div style='display: flex; justify-content: center;margin-top: 10px;'><button style='padding: 8px 15px 8px 15px;background-color: #d46b0f;color: white;  border: 0px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;'>Sign here</button></div></div></div><div><p> This is an automated email from Open Sign. For any queries regarding this email, please contact the sender " + recipent.Email + " directly.If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.</p> </div></div></body> </html>"
         };
         sendMail = await axios.post(url, params, { headers: headers });
       } catch (error) {
@@ -138,7 +112,6 @@ function EmailComponent({
     const base64 = await getBase64FromUrl(pdfUrl);
     printModule({ printable: base64, type: "pdf", base64: true });
 
-    //  window.print('https://nxgcreator.s3.ap-south-1.amazonaws.com/exported_file_32_2023-08-22T04%3A59%3A13.432Z.pdf',);
   };
 
   //handle download signed pdf
@@ -146,6 +119,9 @@ function EmailComponent({
     saveAs(pdfUrl, `${pdfName}_signed_by_OpenSign™.pdf`);
   };
 
+  const isAndroid = /Android/i.test(navigator.userAgent);
+
+  
   return (
     <div>
       {/* isEmail */}
@@ -162,7 +138,7 @@ function EmailComponent({
               alignItems: "center",
               zIndex: "20",
               backgroundColor: "#e6f2f2",
-              opacity: 0.8,
+              opacity: 0.8
             }}
           >
             <img
@@ -181,26 +157,28 @@ function EmailComponent({
 
           <div style={{ display: "flex", flexDirection: "row" }}>
             <div></div>
-            <button
+            {!isAndroid && (
-              onClick={handleToPrint}
+              <button
-              style={{
+                onClick={handleToPrint}
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-              }}
-              className="btn btn-primary btn-sm"
-            >
-              <i
-                className="fa fa-print"
                 style={{
-                  fontSize: "15px",
+                  display: "flex",
-                  marginRight: "3px",
+                  flexDirection: "row",
-                  color: "white",
+                  alignItems: "center"
                 }}
-                aria-hidden="true"
+                className="btn btn-primary btn-sm"
-              ></i>
+              >
-              Print
+                <i
-            </button>
+                  className="fa fa-print"
+                  style={{
+                    fontSize: "15px",
+                    marginRight: "3px",
+                    color: "white"
+                  }}
+                  aria-hidden="true"
+                ></i>
+                Print
+              </button>
+            )}
 
             <button
               className="btn btn-danger btn-sm"
@@ -209,7 +187,7 @@ function EmailComponent({
                 display: "flex",
                 flexDirection: "row",
                 alignItems: "center",
-                marginLeft: "10px",
+                marginLeft: "10px"
               }}
             >
               <i
@@ -217,7 +195,7 @@ function EmailComponent({
                 style={{
                   color: "white",
                   fontSize: "15px",
-                  marginRight: "3px",
+                  marginRight: "3px"
                 }}
                 aria-hidden="true"
               ></i>
@@ -231,7 +209,7 @@ function EmailComponent({
             <div
               style={{
                 position: "absolute",
-                marginLeft: "50px",
+                marginLeft: "50px"
               }}
             >
               <img
@@ -249,7 +227,7 @@ function EmailComponent({
               verticalAlign: "baseline",
               fontWeight: "500",
               color: "#403f3e",
-              fontSize: "15px",
+              fontSize: "15px"
             }}
           >
             Recipients added here will get a copy of the signed document.
@@ -261,18 +239,20 @@ function EmailComponent({
                   style={{
                     display: "flex",
                     flexDirection: "row",
-                    width: "450px",
+                 
-                    flexWrap: "wrap",
+                    flexWrap: "wrap"
                   }}
                 >
                   {emailCount.map((data, ind) => {
                     return (
-                      <div className="emailChip" key={ind}>
+                      <div className="emailChip" 
+                      style={{display:"flex", flexDirection:"row", alignItems:"center"}}
+                      key={ind}>
                         <span
                           style={{
                             color: "white",
                             fontSize: "13px",
-                            marginRight: "20px",
+                            marginRight: "20px"
                           }}
                         >
                           {data}
@@ -317,7 +297,7 @@ function EmailComponent({
           )}
           <span
             style={{
-              cursor: emailValue && "pointer",
+              cursor: emailValue && "pointer"
             }}
             onClick={() => {
               if (emailValue) {
@@ -330,7 +310,7 @@ function EmailComponent({
                 backgroundColor: themeColor(),
                 padding: "2px 10px",
                 marginTop: "10px",
-                color: "white",
+                color: "white"
               }}
               className="fa fa-plus"
               aria-hidden="true"
@@ -342,7 +322,7 @@ function EmailComponent({
               background: "#e3e2e1",
               marginTop: "30px",
               padding: "5px",
-              borderRadius: "3px",
+              borderRadius: "3px"
             }}
           >
             <span style={{ fontWeight: "700" }}>Note:</span>
@@ -356,7 +336,7 @@ function EmailComponent({
         <Modal.Footer>
           <button
             style={{
-              color: "black",
+              color: "black"
             }}
             type="button"
             className="finishBtn"
@@ -368,7 +348,7 @@ function EmailComponent({
             disabled={emailCount.length === 0 && true}
             style={{
               background: themeColor(),
-              color: "white",
+              color: "white"
             }}
             type="button"
             className={emailCount.length === 0 ? "defaultBtn" : "finishBtn"}

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

@@ -36,8 +36,8 @@ function FieldsComponent({
 }) {
   const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
 
-  const isMobile = window.innerWidth < 712;
+  const isMobile = window.innerWidth <767;
-
+  
   const SelectItem = React.forwardRef(
     ({ children, className, ...props }, forwardedRef) => {
       return (
@@ -107,7 +107,7 @@ function FieldsComponent({
                   }}
                 >
                   <Select.Trigger
-                    className="SelectTrigger"
+                    className={selectedEmail ? "selectEmail": "SelectTrigger"}
                     style={{
                       background: isSelectListId
                         ? color[isSelectListId % color.length]
@@ -115,7 +115,10 @@ function FieldsComponent({
                     }}
                     aria-label="Food"
                   >
-                    <Select.Value placeholder="Select signer.." />
+                    <Select.Value
+                    
+                    placeholder="Select signer.." />
+                    {!selectedEmail && 
                     <Select.Icon className="SelectIcon">
                       <i
                         style={{
@@ -127,7 +130,7 @@ function FieldsComponent({
                         className="fa fa-angle-down"
                         aria-hidden="true"
                       ></i>
-                    </Select.Icon>
+                    </Select.Icon>}
                   </Select.Trigger>
                   <Select.Portal>
                     <Select.Content

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

@@ -33,8 +33,9 @@ function Header({
   decline,
   currentSigner,
   dataTut4,
+  alreadySign
 }) {
-  const isMobile = window.innerWidth < 712;
+  const isMobile = window.innerWidth < 767;
   const navigate = useNavigate();
 
   //for go to previous page
@@ -49,7 +50,7 @@ function Header({
   const handleDeclinePdfAlert = async () => {
     const currentDecline = {
       currnt: "Sure",
-      isDeclined: true,
+      isDeclined: true
     };
     setIsDecline(currentDecline);
   };
@@ -108,7 +109,7 @@ function Header({
                   fontSize: "13px",
                   fontWeight: "600",
                   marginLeft: "10px",
-                  marginRight: "10px",
+                  marginRight: "10px"
                 }}
               >
                 {pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
@@ -132,7 +133,7 @@ function Header({
                       color: themeColor(),
                       border: "none",
                       fontWeight: "650",
-                      fontSize: "16px",
+                      fontSize: "16px"
                     }}
                   >
                     <i className="fa fa-ellipsis-v" aria-hidden="true"></i>
@@ -151,7 +152,7 @@ function Header({
                       <div
                         style={{
                           display: "flex",
-                          flexDirection: "row",
+                          flexDirection: "row"
                         }}
                       >
                         <i
@@ -164,6 +165,7 @@ function Header({
                     </DropdownMenu.Item>
                     <DropdownMenu.Item className="DropdownMenuItem">
                       <PDFDownloadLink
+                        style={{ textDecoration: "none" }}
                         document={<Certificate pdfData={pdfDetails} />}
                         fileName={`completion certificate-${
                           pdfDetails[0] && pdfDetails[0].Name
@@ -175,22 +177,26 @@ function Header({
                             {loading ? (
                               "Loading document..."
                             ) : (
-                              <div
+                              <button
+                                type="button"
+                                className="defaultBtn certificateBtn"
                                 style={{
                                   display: "flex",
                                   flexDirection: "row",
+                                  alignItems: "center"
                                 }}
                               >
                                 <i
                                   className="fa fa-certificate"
                                   style={{
+                                    color: "white",
                                     fontSize: "15px",
-                                    marginRight: "3px",
+                                    marginRight: "3px"
                                   }}
                                   aria-hidden="true"
                                 ></i>
                                 Certificate
-                              </div>
+                              </button>
                             )}
                           </>
                         )}
@@ -216,7 +222,7 @@ function Header({
                           border: "none",
                           fontWeight: "650",
                           fontSize: "16px",
-                          marginRight: "10px",
+                          marginRight: "10px"
                         }}
                       >
                         Decline
@@ -224,18 +230,16 @@ function Header({
                     )}
                     {isPlaceholder ? (
                       <div
-                     
                         onClick={() => {
                           if (!isMailSend) {
                             alertSendEmail();
                           }
                         }}
-                      
                         style={{
                           color: isMailSend ? "gray" : themeColor(),
                           border: "none",
                           fontWeight: "650",
-                          fontSize: "16px",
+                          fontSize: "16px"
                         }}
                         data-tut={dataTut4}
                       >
@@ -243,7 +247,7 @@ function Header({
                       </div>
                     ) : (
                       <div
-                      data-tut="reactourThird"
+                        data-tut="reactourThird"
                         onClick={() => {
                           if (!pdfUrl) {
                             embedImages();
@@ -253,7 +257,7 @@ function Header({
                           color: themeColor(),
                           border: "none",
                           fontWeight: "650",
-                          fontSize: "16px",
+                          fontSize: "16px"
                         }}
                       >
                         Finish
@@ -277,10 +281,8 @@ function Header({
             pdfUrl || isAlreadySign.mssg ? (
               <div style={{ display: "flex", flexDirection: "row" }}>
                 {pdfDetails[0] && pdfDetails.length > 0 && (
-                  //    <Certificate
-                  //    pdfData={completePdfData}
-                  // />
                   <PDFDownloadLink
+                    style={{ textDecoration: "none" }}
                     document={<Certificate pdfData={pdfDetails} />}
                     fileName={`completion certificate-${
                       pdfDetails[0] && pdfDetails[0].Name
@@ -296,7 +298,7 @@ function Header({
                           style={{
                             display: "flex",
                             flexDirection: "row",
-                            alignItems: "center",
+                            alignItems: "center"
                           }}
                         >
                           <i
@@ -304,7 +306,7 @@ function Header({
                             style={{
                               color: "white",
                               fontSize: "15px",
-                              marginRight: "3px",
+                              marginRight: "3px"
                             }}
                             aria-hidden="true"
                           ></i>
@@ -319,7 +321,7 @@ function Header({
                   style={{
                     display: "flex",
                     flexDirection: "row",
-                    alignItems: "center",
+                    alignItems: "center"
                   }}
                   className="defaultBtn printBtn"
                 >
@@ -328,7 +330,7 @@ function Header({
                     style={{
                       fontSize: "15px",
                       marginRight: "3px",
-                      color: "white",
+                      color: "white"
                     }}
                     aria-hidden="true"
                   ></i>
@@ -340,7 +342,7 @@ function Header({
                   style={{
                     display: "flex",
                     flexDirection: "row",
-                    alignItems: "center",
+                    alignItems: "center"
                   }}
                   className="defaultBtn downloadBtn"
                   onClick={() => handleDownloadPdf()}
@@ -350,7 +352,7 @@ function Header({
                     style={{
                       color: "white",
                       fontSize: "15px",
-                      marginRight: "3px",
+                      marginRight: "3px"
                     }}
                     aria-hidden="true"
                   ></i>
@@ -361,7 +363,7 @@ function Header({
               <div style={{ display: "flex", flexDirection: "row" }}>
                 <button
                   style={{
-                    background: "#de4337",
+                    background: "#de4337"
                   }}
                   className="finishBtn hoverCss"
                   onClick={() => {
@@ -374,7 +376,7 @@ function Header({
                 <button
                   data-tut="reactourThird"
                   style={{
-                    background: !pdfUrl ? "#188ae2" : "#d3edeb",
+                    background: !pdfUrl ? "#188ae2" : "#d3edeb"
                   }}
                   className="finishBtn sendHover"
                   onClick={() => {
@@ -387,85 +389,6 @@ function Header({
                 </button>
               </div>
             )
-          ) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
-            <div style={{ display: "flex", flexDirection: "row" }}>
-              <PDFDownloadLink
-                document={<Certificate pdfData={pdfDetails} />}
-                fileName={`completion certificate-${
-                  pdfDetails[0] && pdfDetails[0].Name
-                }.pdf`}
-              >
-                {({ blob, url, loading, error }) =>
-                  loading ? (
-                    "Loading document..."
-                  ) : (
-                    <button
-                      type="button"
-                      style={{
-                        display: "flex",
-                        flexDirection: "row",
-                        alignItems: "center",
-                      }}
-                      className="defaultBtn certificateBtn"
-                    >
-                      <i
-                        className="fa fa-certificate"
-                        style={{
-                          color: "white",
-                          fontSize: "15px",
-                          marginRight: "3px",
-                        }}
-                        aria-hidden="true"
-                      ></i>
-                      Certificate
-                    </button>
-                  )
-                }
-              </PDFDownloadLink>
-              <button
-                onClick={handleToPrint}
-                type="button"
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                }}
-                className="defaultBtn printBtn"
-              >
-                <i
-                  className="fa fa-print"
-                  style={{
-                    fontSize: "15px",
-                    marginRight: "3px",
-                    color: "white",
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Print
-              </button>
-              <button
-                type="button"
-                className="defaultBtn downloadBtn"
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                  marginLeft: "10px",
-                }}
-                onClick={() => handleDownloadPdf()}
-              >
-                <i
-                  className="fa fa-download"
-                  style={{
-                    color: "white",
-                    fontSize: "15px",
-                    marginRight: "3px",
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Download
-              </button>
-            </div>
           ) : isPlaceholder ? (
             <>
               {!isMailSend &&
@@ -502,7 +425,7 @@ function Header({
                   data-tut="reactourFour"
                   style={{
                     background: isMailSend ? "rgb(203, 203, 203)" : "#188ae2",
-                    color: isMailSend && "rgb(77, 75, 75)",
+                    color: isMailSend && "rgb(77, 75, 75)"
                   }}
                   onClick={() => {
                     alertSendEmail();
@@ -514,10 +437,11 @@ function Header({
               </div>
             </>
           ) : isPdfRequestFiles ? (
-            isSigned ? (
+            alreadySign ? (
               <div style={{ display: "flex", flexDirection: "row" }}>
                 {isCompleted.isCertificate && (
                   <PDFDownloadLink
+                    style={{ textDecoration: "none" }}
                     document={<Certificate pdfData={pdfDetails} />}
                     fileName={`completion certificate-${
                       pdfDetails[0] && pdfDetails[0].Name
@@ -533,7 +457,7 @@ function Header({
                           style={{
                             display: "flex",
                             flexDirection: "row",
-                            alignItems: "center",
+                            alignItems: "center"
                           }}
                         >
                           <i
@@ -541,7 +465,7 @@ function Header({
                             style={{
                               color: "white",
                               fontSize: "15px",
-                              marginRight: "3px",
+                              marginRight: "3px"
                             }}
                             aria-hidden="true"
                           ></i>
@@ -558,7 +482,7 @@ function Header({
                   style={{
                     display: "flex",
                     flexDirection: "row",
-                    alignItems: "center",
+                    alignItems: "center"
                   }}
                 >
                   <i
@@ -566,7 +490,7 @@ function Header({
                     style={{
                       fontSize: "15px",
                       marginRight: "3px",
-                      color: "white",
+                      color: "white"
                     }}
                     aria-hidden="true"
                   ></i>
@@ -579,7 +503,7 @@ function Header({
                   style={{
                     display: "flex",
                     flexDirection: "row",
-                    alignItems: "center",
+                    alignItems: "center"
                   }}
                   onClick={() => handleDownloadPdf()}
                 >
@@ -588,7 +512,7 @@ function Header({
                     style={{
                       color: "white",
                       fontSize: "15px",
-                      marginRight: "3px",
+                      marginRight: "3px"
                     }}
                     aria-hidden="true"
                   ></i>
@@ -610,7 +534,7 @@ function Header({
                   <>
                     <button
                       style={{
-                        background: "#de4337",
+                        background: "#de4337"
                       }}
                       className="finishBtn hoverCss"
                       onClick={() => {
@@ -621,7 +545,7 @@ function Header({
                     </button>
                     <button
                       style={{
-                        background: "#188ae2",
+                        background: "#188ae2"
                       }}
                       type="button"
                       className="finishBtn sendHover"
@@ -635,6 +559,86 @@ function Header({
                 )}
               </div>
             )
+          ) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
+            <div style={{ display: "flex", flexDirection: "row" }}>
+              <PDFDownloadLink
+                style={{ textDecoration: "none" }}
+                document={<Certificate pdfData={pdfDetails} />}
+                fileName={`completion certificate-${
+                  pdfDetails[0] && pdfDetails[0].Name
+                }.pdf`}
+              >
+                {({ blob, url, loading, error }) =>
+                  loading ? (
+                    "Loading document..."
+                  ) : (
+                    <button
+                      type="button"
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        alignItems: "center"
+                      }}
+                      className="defaultBtn certificateBtn"
+                    >
+                      <i
+                        className="fa fa-certificate"
+                        style={{
+                          color: "white",
+                          fontSize: "15px",
+                          marginRight: "3px"
+                        }}
+                        aria-hidden="true"
+                      ></i>
+                      Certificate
+                    </button>
+                  )
+                }
+              </PDFDownloadLink>
+              <button
+                onClick={handleToPrint}
+                type="button"
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center"
+                }}
+                className="defaultBtn printBtn"
+              >
+                <i
+                  className="fa fa-print"
+                  style={{
+                    fontSize: "15px",
+                    marginRight: "3px",
+                    color: "white"
+                  }}
+                  aria-hidden="true"
+                ></i>
+                Print
+              </button>
+              <button
+                type="button"
+                className="defaultBtn downloadBtn"
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  marginLeft: "10px"
+                }}
+                onClick={() => handleDownloadPdf()}
+              >
+                <i
+                  className="fa fa-download"
+                  style={{
+                    color: "white",
+                    fontSize: "15px",
+                    marginRight: "3px"
+                  }}
+                  aria-hidden="true"
+                ></i>
+                Download
+              </button>
+            </div>
           ) : (
             <div>
               <button
@@ -649,7 +653,7 @@ function Header({
 
               <button
                 style={{
-                  background: "#188ae2",
+                  background: "#188ae2"
                 }}
                 type="button"
                 className="finishBtn sendHover"

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

@@ -5,8 +5,6 @@ import { Rnd } from "react-rnd";
 import { themeColor } from "../../utils/ThemeColor/backColor";
 import { Document, Page, pdfjs } from "react-pdf";
 
-// import Draggable from "react-draggable";
-
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
 function RenderPdf({
@@ -41,19 +39,64 @@ function RenderPdf({
   placeholder,
   pdfLoadFail
 }) {
-  const isMobile = window.innerWidth < 712;
+  const isMobile = window.innerWidth < 767;
-
+  const newWidth = window.innerWidth;
+  const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
   //function for render placeholder block over pdf document
 
   const checkSignedSignes = (data) => {
-    // console.log("data",data)
     const checkSign = signedSigners.filter(
       (sign) => sign.objectId === data.signerObjId
     );
     if (data.signerObjId === signerObjectId) {
       setCurrentSigner(true);
     }
+    const xPos = (pos) => {
+      //checking both condition mobile and desktop view
+      if (isMobile) {
+        //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
+        if (!pos.isMobile) {
+          return pos.xPosition / scale;
+        }
+        //pos.isMobile true -- placeholder save from mobile view(small device)  handle position in mobile view(small screen) view divided by scale
+        else {
+          return pos.xPosition * (pos.scale / scale);
+        }
+      } else {
+        //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
 
+        if (pos.isMobile) {
+          return pos.scale && pos.xPosition * pos.scale + 50;
+        }
+        //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
+        else {
+          return pos.xPosition;
+        }
+      }
+    };
+    const yPos = (pos) => {
+      //checking both condition mobile and desktop view
+      if (isMobile) {
+        //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
+        if (!pos.isMobile) {
+          return pos.yPosition / scale;
+        }
+        //pos.isMobile true -- placeholder save from mobile view(small device)  handle position in mobile view(small screen) view divided by scale
+        else {
+          return pos.yPosition * (pos.scale / scale);
+        }
+      } else {
+        //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
+
+        if (pos.isMobile) {
+          return pos.scale && pos.yPosition * pos.scale + 50;
+        }
+        //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
+        else {
+          return pos.yPosition;
+        }
+      }
+    };
     return (
       checkSign.length === 0 &&
       data.placeHolder.map((placeData, key) => {
@@ -96,10 +139,8 @@ function RenderPdf({
                       }}
                       lockAspectRatio={pos.Width && 2.5}
                       default={{
-                        x: pos.scale
+                        x: xPos(pos),
-                          ? pos.xPosition * pos.scale
+                        y: yPos(pos)
-                          : pos.xPosition,
-                        y: pos.scale ? pos.yPosition * pos.scale : pos.yPosition
                       }}
                       onClick={() => {
                         setIsSignPad(true);
@@ -160,8 +201,8 @@ function RenderPdf({
                       borderWidth: "0.2px"
                     }}
                     default={{
-                      x: pos.scale ? pos.xPosition * pos.scale : pos.xPosition,
+                      x: xPos(pos),
-                      y: pos.scale ? pos.yPosition * pos.scale : pos.yPosition
+                      y: yPos(pos)
                     }}
                     size={{
                       width: pos.Width ? pos.Width : 150,
@@ -174,7 +215,7 @@ function RenderPdf({
                         fontSize: "12px",
                         color: "black",
                         fontWeight: "600",
-                        // justifyContent: "center",
+
                         marginTop: "0px"
                       }}
                     >
@@ -191,26 +232,10 @@ function RenderPdf({
 
   return (
     <>
-      {isMobile ? (
+      {isMobile && scale ? (
-        // <RSC
-        //   style={{
-        //     position: "relative",
-        //     boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
-        //     width:
-        //       pdfOriginalWidth > pdfNewWidth ? pdfNewWidth : pdfOriginalWidth,
-        //     height: window.innerHeight - 110 + "px",
-        //     marginTop: "50px",
-        //   }}
-        //   noScrollY={false}
-        //   noScrollX={pdfNewWidth < pdfOriginalWidth ? false : true}
-        // >
         <div
           style={{
             border: "0.1px solid #ebe8e8"
-            // marginTop: "50px",
-
-            //  height:window.innerHeight-100+'px',
-            // width:window.innerWidth
           }}
           ref={drop}
           id="container"
@@ -273,9 +298,17 @@ function RenderPdf({
                                 height: pos.Height ? pos.Height : 60
                               }}
                               lockAspectRatio={pos.Width && 2.5}
+                              //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale
+
+                              //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
                               default={{
-                                x: pos.xPosition,
+                                x: !pos.isMobile
-                                y: pos.yPosition
+                                  ? pos.xPosition / scale
+                                  : pos.xPosition * (pos.scale / scale) - 50,
+
+                                y: !pos.isMobile
+                                  ? pos.yPosition / scale
+                                  : pos.yPosition * (pos.scale / scale)
                               }}
                               onClick={() => {
                                 setIsSignPad(true);
@@ -333,8 +366,16 @@ function RenderPdf({
                               }}
                               disableDragging={true}
                               default={{
-                                x: pos.xPosition,
+                                //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale
-                                y: pos.yPosition
+                                //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
+
+                                x: !pos.isMobile
+                                  ? pos.xPosition / scale
+                                  : pos.xPosition * (pos.scale / scale) - 50,
+
+                                y: !pos.isMobile
+                                  ? pos.yPosition / scale
+                                  : pos.yPosition * (pos.scale / scale)
                               }}
                               onClick={() => {
                                 setIsSignPad(true);
@@ -409,7 +450,14 @@ function RenderPdf({
                                       right: { display: "none" },
                                       bottomRight: { display: "block" }
                                     }}
-                                    onDragStop={handleStop}
+                                    onDragStop={(event, dragElement) =>
+                                      handleStop(
+                                        event,
+                                        dragElement,
+                                        data.signerObjId,
+                                        pos.key
+                                      )
+                                    }
                                     default={{
                                       x: pos.xPosition,
                                       y: pos.yPosition
@@ -437,13 +485,6 @@ function RenderPdf({
                                           data.signerObjId
                                         );
                                       }}
-                                      // onClick={(e) => {
-                                      //   e.stopPropagation();
-                                      //   handleDeleteSign(
-                                      //     pos.key,
-                                      //     data.signerObjId
-                                      //   );
-                                      // }}
                                       style={{
                                         position: "absolute",
                                         right: 0,
@@ -461,7 +502,7 @@ function RenderPdf({
                                         fontSize: "12px",
                                         color: "black",
                                         fontWeight: "600",
-                                        // justifyContent: "center",
+
                                         marginTop: "0px"
                                       }}
                                     >
@@ -532,7 +573,6 @@ function RenderPdf({
                             >
                               {" "}
                               <div
-                                // className="dragElm"
                                 onTouchStart={(e) => {
                                   if (!isDragging) {
                                     setTimeout(() => {
@@ -545,18 +585,12 @@ function RenderPdf({
                                 }}
                               >
                                 <div
-                                  // className="dragElm"
                                   ref={nodeRef}
                                   onTouchStart={(e) => {
                                     e.stopPropagation();
                                     handleDeleteSign(pos.key);
                                     setIsStamp(false);
                                   }}
-                                  // onClick={(e) => {
-                                  //   e.stopPropagation();
-                                  //   handleDeleteSign(pos.key);
-                                  //   setIsStamp(false);
-                                  // }}
                                   style={{
                                     position: "absolute",
                                     right: 0,
@@ -590,10 +624,8 @@ function RenderPdf({
                             <>
                               <Rnd
                                 allowAnyClick
-                                // cancel=".dragElm"
                                 ref={nodeRef}
                                 key={pos.key}
-                                // lockAspectRatio={2.5}
                                 lockAspectRatio={
                                   pos.Width ? pos.Width / pos.Height : 2.5
                                 }
@@ -616,53 +648,22 @@ function RenderPdf({
                                 onDrag={(e) => {
                                   handleTabDrag(pos.key, e);
                                 }}
-                                // onMouseUp={(e) => handleTabDrag(pos.key, e)}
                                 onDragStop={handleStop}
                                 size={{
                                   width: pos.Width ? pos.Width : 150,
                                   height: pos.Height ? pos.Height : 60
                                 }}
-                                // onMouseDown={(e) => {
-
-                                //   if (!isDragging) {
-                                //     console.log("child m=event",isDragging);
-                                //     setTimeout(() => {
-                                //       if(isDeleted){
-                                //         setIsSignPad(true);
-                                //         // setIsSignPad(false)
-                                //         setSignKey(pos.key);
-                                //         setIsStamp(pos.isStamp);
-
-                                //       }else{
-                                //          setIsSignPad(true);
-                                //         // setIsSignPad(false)
-                                //         setSignKey(pos.key);
-                                //         setIsStamp(pos.isStamp);
-                                //       }
-
-                                //     }, 500);
-                                //   }
-                                // }}
                                 default={{
                                   x: pos.xPosition,
                                   y: pos.yPosition
                                 }}
-
-                                // onClick={(e) => {
-                                //   if (!isDragging) {
-                                //     e.stopPropagation();
-                                //     setIsSignPad(true);
-                                //     setSignKey(pos.key);
-                                //     setIsStamp(pos.isStamp);
-                                //   }
-                                // }}
                               >
                                 <div
                                   onTouchStart={(e) => {
                                     if (!isDragging) {
                                       setTimeout(() => {
                                         setIsSignPad(true);
-                                        //setIsSignPad(false)
+
                                         setSignKey(pos.key);
                                         setIsStamp(pos.isStamp);
                                       }, 500);
@@ -686,21 +687,9 @@ function RenderPdf({
                                   }}
                                 >
                                   <div
-                                    //  onMouseDown={(e) => {
-                                    //    console.log("child m=event")
-                                    //    e.preventDefault();
-                                    //    setIsDragging(true)
-
-                                    //    handleDeleteSign(pos.key);
-                                    //    setIsStamp(false);
-                                    //    setTimeout(()=>{
-                                    //      setIsDragging(false)
-                                    //    },2000)
-                                    //  }}
                                     onTouchStart={(e) => {
                                       e.stopPropagation();
                                       e.preventDefault();
-                                      // setIsDragging(true);
 
                                       handleDeleteSign(pos.key);
                                       setIsStamp(false);
@@ -756,7 +745,6 @@ function RenderPdf({
               onLoadSuccess={pageDetails}
               ref={pdfRef}
               file={pdfUrl ? pdfUrl : pdfDetails[0] && pdfDetails[0].URL}
-              //   file="https://qikinnovation.ams3.digitaloceanspaces.com/exported_file_2068_2023-08-30T05%3A04%3A26.334Z.pdf" //  "https://api.printnode.com/static/test/pdf/multipage.pdf" //  {pdfUrl ? pdfUrl : signPdfUrl}
             >
               {Array.from(new Array(numPages), (el, index) => (
                 <Page
@@ -764,7 +752,6 @@ function RenderPdf({
                   pageNumber={pageNumber}
                   width={window.innerWidth}
                   height={window.innerHeight}
-                  // scale={1}
                   renderAnnotationLayer={false}
                   renderTextLayer={false}
                   onGetAnnotationsError={(error) => {
@@ -776,7 +763,6 @@ function RenderPdf({
           </div>
         </div>
       ) : (
-        // </RSC>
         <RSC
           style={{
             position: "relative",
@@ -854,12 +840,15 @@ function RenderPdf({
                                   height: pos.Height ? pos.Height : 60
                                 }}
                                 lockAspectRatio={pos.Width && 2.5}
+                                //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale
+
                                 default={{
-                                  x: pos.scale
+                                  x: pos.isMobile
-                                    ? pos.xPosition * pos.scale
+                                    ? pos.scale &&
+                                      pos.xPosition * pos.scale + 20
                                     : pos.xPosition,
-                                  y: pos.scale
+                                  y: pos.isMobile
-                                    ? pos.yPosition * pos.scale
+                                    ? pos.scale && pos.yPosition * pos.scale
                                     : pos.yPosition
                                 }}
                                 onClick={() => {
@@ -917,12 +906,15 @@ function RenderPdf({
                                   height: pos.Height ? pos.Height : 60
                                 }}
                                 disableDragging={true}
+                                //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale
+
                                 default={{
-                                  x: pos.scale
+                                  x: pos.isMobile
-                                    ? pos.xPosition * pos.scale
+                                    ? pos.scale &&
+                                      pos.xPosition * pos.scale + 20
                                     : pos.xPosition,
-                                  y: pos.scale
+                                  y: pos.isMobile
-                                    ? pos.yPosition * pos.scale
+                                    ? pos.scale && pos.yPosition * pos.scale
                                     : pos.yPosition
                                 }}
                                 onClick={() => {
@@ -998,7 +990,14 @@ function RenderPdf({
                                         right: { display: "none" },
                                         bottomRight: { display: "block" }
                                       }}
-                                      onDragStop={handleStop}
+                                      onDragStop={(event, dragElement) =>
+                                        handleStop(
+                                          event,
+                                          dragElement,
+                                          data.signerObjId,
+                                          pos.key
+                                        )
+                                      }
                                       default={{
                                         x: pos.xPosition,
                                         y: pos.yPosition
@@ -1043,7 +1042,7 @@ function RenderPdf({
                                           fontSize: "12px",
                                           color: "black",
                                           fontWeight: "600",
-                                          // justifyContent: "center",
+
                                           marginTop: "0px"
                                         }}
                                       >
@@ -1067,7 +1066,6 @@ function RenderPdf({
                               <Rnd
                                 ref={nodeRef}
                                 key={pos.key}
-                                // lockAspectRatio={2.5}
                                 lockAspectRatio={
                                   pos.Width ? pos.Width / pos.Height : 2.5
                                 }
@@ -1158,7 +1156,6 @@ function RenderPdf({
                               <Rnd
                                 ref={nodeRef}
                                 key={pos.key}
-                                // lockAspectRatio={2.5}
                                 lockAspectRatio={
                                   pos.Width ? pos.Width / pos.Height : 2.5
                                 }
@@ -1264,13 +1261,11 @@ function RenderPdf({
               onLoadSuccess={pageDetails}
               ref={pdfRef}
               file={pdfUrl ? pdfUrl : pdfDetails[0] && pdfDetails[0].URL}
-              //   file="https://qikinnovation.ams3.digitaloceanspaces.com/exported_file_2068_2023-08-30T05%3A04%3A26.334Z.pdf" //  "https://api.printnode.com/static/test/pdf/multipage.pdf" //  {pdfUrl ? pdfUrl : signPdfUrl}
             >
               {Array.from(new Array(numPages), (el, index) => (
                 <Page
                   key={index}
                   pageNumber={pageNumber}
-                  // width={pdfNewWidth}
                   renderAnnotationLayer={false}
                   renderTextLayer={false}
                   onGetAnnotationsError={(error) => {

microfrontends/SignDocuments/src/Component/login.js

@@ -6,41 +6,34 @@ import { useParams } from "react-router-dom";
 import { themeColor } from "../utils/ThemeColor/backColor";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-// import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
-function Login() {
-  const { id, userMail,contactBookId, serverUrl } = useParams();
-  let navigate = useNavigate();
-  //   const history = useHistory();
 
+function Login() {
+  const { id, userMail, contactBookId, serverUrl } = useParams();
+  let navigate = useNavigate();
   const [email, setEmail] = useState(userMail);
   const [OTP, setOTP] = useState("");
   const [EnterOTP, setEnterOtp] = useState(false);
   const [loading, setLoading] = useState(false);
-  
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     handleServerUrl();
   }, []);
-  //https://qik-ai-org.github.io/Sign-MicroappV2/#/login/LqgGeZHd17/raktima.c@qik.ai/https:%2F%2Fserver3.qik.ai%2Fdefaultssty%2F&defaultssty&contracts
+
-  // login/LqgGeZHd17/raktima.c@qik.ai/https:%2F%2Fserver3.qik.ai%2Fdefaultssty&defaultssty&contracts
   //function generate serverUrl and parseAppId from url and save it in local storage
   const handleServerUrl = () => {
-    // console.log("params", serverUrl);
     //split url in array from '&'
     localStorage.clear();
     const checkSplit = serverUrl.split("&");
     const server = checkSplit[0];
     const parseId = checkSplit[1];
     const appName = checkSplit[2];
-    // console.log("appName", appName);
 
     const newServer = server.replaceAll("%2F", "/");
     localStorage.setItem("baseUrl", newServer);
     localStorage.setItem("parseAppId", parseId);
     localStorage.setItem("_appName", appName);
     setIsLoading(false);
-    // console.log("checkSPlit", newServer, parseId, appName);
   };
 
   const handleChange = (event) => {
@@ -57,26 +50,20 @@ function Login() {
 
     const parseId =
       localStorage.getItem("parseAppId") && localStorage.getItem("parseAppId");
-    // console.log("server",serverUrl)
+
     if (serverUrl && localStorage) {
       setLoading(true);
       e.preventDefault();
       setEmail(email);
 
       try {
-        //   const { baseUrl, parseAppId, mobile } = this.state;
         let url = `${serverUrl}functions/SendOTPMailV1/`;
         const headers = {
           "Content-Type": "application/json",
-          "X-Parse-Application-Id": parseId,
+          "X-Parse-Application-Id": parseId
         };
         let body = {
-          email: email.toString(),
+          email: email.toString()
-          // appId: {
-          //   __type: "Pointer",
-          //   className: "w_appinfo",
-          //   objectId: localStorage.getItem("_app_objectId"),
-          // },
         };
         let Otp = await axios.post(url, body, { headers: headers });
 
@@ -85,7 +72,7 @@ function Login() {
           setEnterOtp(true);
         }
       } catch (error) {
-        //   this.setState({ loading: false });
+        alert("something went wrong!");
       }
     } else {
       alert("something went wrong!");
@@ -105,38 +92,30 @@ function Login() {
       setLoading(true);
 
       try {
-        //	AuthLoginAs
         let url = `${serverUrl}functions/AuthLoginAsMail/`;
         const headers = {
           "Content-Type": "application/json",
-          "X-Parse-Application-Id": parseId,
+          "X-Parse-Application-Id": parseId
         };
         let body = {
           email: email,
-          // email,
+          otp: OTP
-          otp: OTP,
         };
         let user = await axios.post(url, body, { headers: headers });
-        // console.log("user", user.data.result);
+
         if (user.data.result === "Invalid Otp") {
           alert("Invalid Otp");
           setLoading(false);
-        }else if(user.data.result === "user not found!"){
+        } else if (user.data.result === "user not found!") {
           alert("User not found!");
           setLoading(false);
-        }
+        } else {
-         else {
           let _user = user.data.result;
-
           localStorage.setItem("UserInformation", JSON.stringify(_user));
-          // localStorage.setItem("userEmail", email);
           localStorage.setItem("username", _user.name);
-          // console.log("session token", _user.sessionToken);
           localStorage.setItem("accesstoken", _user.sessionToken);
-
           setLoading(false);
           //navigate user to on signature page
-          //  history.push(`/recipientSignPdf/${id}/${_user.phone}`);
           navigate(`/recipientSignPdf/${id}/${contactBookId}`);
         }
       } catch (error) {}
@@ -146,7 +125,7 @@ function Login() {
   };
 
   return (
-    <React.Fragment>
+    <div style={{ padding: "2rem" }}>
       {isLoading ? (
         <div
           style={{
@@ -154,7 +133,7 @@ function Login() {
             justifyContent: "center",
             alignItems: "center",
             height: "100vh",
-            flexDirection: "column",
+            flexDirection: "column"
           }}
         >
           <img
@@ -172,137 +151,142 @@ function Login() {
             margin: "10px",
             border: "0.5px solid #c5c7c9",
             padding: "30px",
-            boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
+            boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"
-            // box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
           }}
         >
           <div className="main_head">
             <div className="main-logo">
-              <img alt="sign img" src="https://qikinnovation.ams3.digitaloceanspaces.com/logo.png" width="100%" />
+              <img
+                alt="sign img"
+                src="https://qikinnovation.ams3.digitaloceanspaces.com/logo.png"
+                width="100%"
+              />
             </div>
           </div>
 
           {!EnterOTP ? (
-            <form>
+            <div className="row">
-              <div className="row">
+              <div className="col-sm-6 KLO">
-                <div className="col-sm-6 KLO">
+                <span className="welcomeText">Welcome Back !</span>
-                  <h2>Welcome Back !</h2>
+                <br />
-                  <span className="KNLO">
+                <span className="KNLO">
-                    Verification code is sent to your email
+                  Verification code is sent to your email
-                  </span>
+                </span>
-                  <div className="card card-box">
+                <div className="card card-box"
-                    <div className="card-body">
+                style={{borderRadius:"0px"}}
-                      <input
+                >
-                        type="email"
+                  <div className="card-body">
-                        className="form-control"
+                    <input
-                        name="mobile"
+                      type="email"
-                        value={email}
+                      name="mobile"
-                        disabled
+                      value={email}
-                        height={30}
+                      disabled
-                        style={{ fontSize: "20px", fontWeight: "600" }}
+                      className="loginInput"
-                      />
+                    />
-                      <br />
+                    <br />
-                    </div>
-                  </div>
-                  <div
-                    className="col-md-4 col-sm-4"
-                    style={{
-                      textAlign: "center",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                    }}
-                  >
-                    {loading ? (
-                      <button
-                        className="btn btn-info loadinBtn "
-                        type="button"
-                        style={{ marginBottom: "4px", width: "210px" }}
-                        disabled
-                      >
-                        <span
-                          className="spinner-border spinner-border-sm "
-                          role="status"
-                          aria-hidden="true"
-                        ></span>
-                        Loading...
-                      </button>
-                    ) : (
-                      <button
-                        className="btn btn-sm otpButton"
-                        onClick={(e) => SendOtp(e)}
-                        style={{
-                          marginBottom: "4px",
-                          width: "210px",
-                          background: themeColor(),
-                          color: "white",
-                          fontWeight: "600",
-                        }}
-                      >
-                        Send OTP
-                      </button>
-                    )}
                   </div>
                 </div>
+                <div className="btnContainer">
+                  {loading ? (
+                    <button
+                      // className="btn btn-info loadinBtn "
+                      type="button"
+                      style={{
+                        background: themeColor(),
+                        color: "white"
+                      }}
+                      className="verifyBtn"
+                      disabled
+                    >
+                      <span
+                        className="spinner-border spinner-border-sm "
+                        role="status"
+                        aria-hidden="true"
+                      ></span>
+                      Loading...
+                    </button>
+                  ) : (
+                    <button
+                      className="verifyBtn"
+                      style={{
+                        background: themeColor(),
+                        color: "white",
+                        marginLeft: "0px !important"
+                      }}
+                      // className="btn btn-sm otpButton"
+                      onClick={(e) => SendOtp(e)}
+                      // style={{
+                      //   marginBottom: "4px",
+                      //   width: "210px",
+                      //   background: themeColor(),
+                      //   color: "white",
+                      //   fontWeight: "600"
+                      // }}
+                    >
+                      Send OTP
+                    </button>
+                  )}
+                </div>
               </div>
-            </form>
+            </div>
           ) : (
-            <form>
+            <div className="row">
-              <div className="row">
+              <div className="col-sm-6 KLO">
-                <div className="col-sm-6 KLO">
+                <span className="welcomeText">Welcome Back !</span>
-                  <h2>Welcome Back !</h2>
+                <br />
-                  <span className="KNLO">You will get a OTP via Email</span>
+                <span className="KNLO">You will get a OTP via Email</span>
-                  <div className="card card-box">
+                <div className="card card-box">
-                    <div className="card-body">
+                  <div className="card-body">
-                      <label>Enter Verification Code</label>
+                    <label>Enter Verification Code</label>
-                      <input
+                    <input
-                        type="number"
+                      type="number"
-                        className="form-control"
+                      className="loginInput"
-                        name="OTP"
+                      name="OTP"
-                        value={OTP}
+                      value={OTP}
-                        min="4"
+                      onChange={handleChange}
-                        max="4"
+                    />
-                        onChange={handleChange}
-                      />
 
-                      <br />
+                    <br />
-                    </div>
-                  </div>
-                  <div
-                    className="col-md-4 col-sm-4"
-                    style={{ textAlign: "center" }}
-                  >
-                    {loading ? (
-                      <button
-                        className="btn btn-info "
-                        type="button"
-                        style={{ marginBottom: "4px", width: "210px" }}
-                        disabled
-                      >
-                        <span
-                          className="spinner-border spinner-border-sm "
-                          role="status"
-                          aria-hidden="true"
-                        ></span>
-                        Loading...
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        onClick={(e) => VerifyOTP(e)}
-                        className="btn btn-info login-btn"
-                      >
-                        Verify
-                      </button>
-                    )}
                   </div>
                 </div>
+                <div>
+                  {loading ? (
+                    <button
+                      style={{
+                        background: themeColor(),
+                        color: "white"
+                      }}
+                      className="verifyBtn"
+                      type="button"
+                      disabled
+                    >
+                      <span
+                        className="spinner-border spinner-border-sm "
+                        role="status"
+                        aria-hidden="true"
+                      ></span>
+                      Loading...
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={(e) => VerifyOTP(e)}
+                      style={{
+                        background: themeColor(),
+                        color: "white"
+                      }}
+                      className="verifyBtn"
+                    >
+                      Verify
+                    </button>
+                  )}
+                </div>
               </div>
-            </form>
+            </div>
           )}
         </div>
       )}
-    </React.Fragment>
+    </div>
   );
 }
 

microfrontends/SignDocuments/src/Component/placeHolderSign.js

@@ -17,11 +17,13 @@ import HandleError from "./component/HandleError";
 import Nodata from "./component/Nodata";
 import SignerListPlace from "./component/signerListPlace";
 import Header from "./component/header";
-import { contactBook, contractUsers } from "../utils/Utils";
+import { contactBook, contractUsers, getHostUrl } from "../utils/Utils";
 import RenderPdf from "./component/renderPdf";
 import ModalComponent from "./component/modalComponent";
+import { useNavigate } from "react-router-dom";
 
 function PlaceHolderSign() {
+  const navigate = useNavigate();
   const [pdfDetails, setPdfDetails] = useState([]);
   const [isMailSend, setIsMailSend] = useState(false);
   const [allPages, setAllPages] = useState(null);
@@ -74,7 +76,9 @@ function PlaceHolderSign() {
     "#66ccff",
     "#ffffcc"
   ];
-
+  const isMobile = window.innerWidth < 767;
+  const newWidth = window.innerWidth;
+  const scale = pdfOriginalWidth / newWidth;
   const [{ isOver }, drop] = useDrop({
     accept: "BOX",
     drop: (item, monitor) => addPositionOfSignature(item, monitor),
@@ -119,7 +123,7 @@ function PlaceHolderSign() {
       isDragSignatureSS: !!monitor.isDragging()
     })
   });
-  const isMobile = window.innerWidth < 712;
+
   const [{ isDragStampSS }, dragStampSS] = useDrag({
     type: "BOX",
 
@@ -162,7 +166,7 @@ function PlaceHolderSign() {
       getDocumentDetails();
     }
   }, []);
-
+ 
   //function for get document details
   const getDocumentDetails = async () => {
     await axios
@@ -257,56 +261,10 @@ function PlaceHolderSign() {
         setIsLoading(loadObj);
       }
     }
-    // await axios
-    //   .get(
-    //     `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-    //       "_appName"
-    //     )}_Contactbook?where={"UserId": {"__type": "Pointer","className": "_User", "objectId":"${
-    //       jsonSender.objectId
-    //     }"}}`,
-    //     {
-    //       headers: {
-    //         "Content-Type": "application/json",
-    //         "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-    //         "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
-    //       },
-    //     }
-    //   )
-    //   .then((Listdata) => {
-    //     const json = Listdata.data;
-    //     const res = json.results;
-
-    //     if (res[0] && res.length) {
-    //       setSignerUserId(res[0].objectId);
-    //       const tourstatus = res[0].TourStatus && res[0].TourStatus;
-    //       if (tourstatus && tourstatus.length > 0) {
-    //         setTourStatus(tourstatus);
-    //         const checkTourRecipients = tourstatus.filter(
-    //           (data) => data.placeholder
-    //         );
-    //         if (checkTourRecipients && checkTourRecipients.length > 0) {
-    //           setCheckTourStatus(checkTourRecipients[0].placeholder);
-    //         }
-    //       }
-    //       const loadObj = {
-    //         isLoad: false,
-    //       };
-    //       setIsLoading(loadObj);
-    //     }
-    //   })
-    //   .catch((err) => {
-    //     const loadObj = {
-    //       isLoad: false,
-    //     };
-    //     setHandleError("Error: Something went wrong!");
-    //     setIsLoading(loadObj);
-    //   });
   };
 
   //function for setting position after drop signature button over pdf
   const addPositionOfSignature = (item, monitor) => {
-    const isMobile = window.innerWidth < 712;
-
     if (isMobile) {
       if (selectedEmail) {
         getSignerPos(item, monitor);
@@ -317,11 +275,8 @@ function PlaceHolderSign() {
       getSignerPos(item, monitor);
     }
   };
-
+ 
   const getSignerPos = (item, monitor) => {
-    const isMobile = window.innerWidth < 712;
-    const newWidth = window.innerWidth;
-    const scale = pdfOriginalWidth / newWidth;
     const key = Math.floor(1000 + Math.random() * 9000);
     let filterSignerPos = signerPos.filter(
       (data) => data.signerObjId === signerObjId
@@ -336,7 +291,8 @@ function PlaceHolderSign() {
         isStamp: monitor,
         key: key,
         isDrag: false,
-        scale: isMobile && scale,
+        scale: scale,
+        isMobile: isMobile,
         yBottom: window.innerHeight / 2 - 60
       };
       dropData.push(dropObj);
@@ -365,7 +321,8 @@ function PlaceHolderSign() {
         firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
         firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
         yBottom: ybottom,
-        scale: isMobile && scale
+        scale: scale,
+        isMobile: isMobile
       };
 
       dropData.push(dropObj);
@@ -394,16 +351,12 @@ function PlaceHolderSign() {
       //add entry of position for same signer on multiple page
       if (getPageNumer.length > 0) {
         const getPos = getPageNumer[0].pos;
-
-        //if (updateData.length > dropData.length) {
         const newSignPos = getPos.concat(dropData);
-
         let xyPos = {
           pageNumber: pageNumber,
           pos: newSignPos
         };
         updatePlace.push(xyPos);
-
         let placeHolderPos = {
           blockColor: color[isSelectListId],
           signerObjId: signerObjId,
@@ -417,7 +370,6 @@ function PlaceHolderSign() {
 
         signerPos.splice(colorIndex, 1, placeHolderPos);
       } else {
-        // const newSignPos = getPlaceHolder.push(xyPosArr[0]);
         const newSignPoss = getPlaceHolder.concat(xyPosArr[0]);
 
         let placeHolderPos = {
@@ -444,7 +396,7 @@ function PlaceHolderSign() {
         blockColor: color[isSelectListId],
         placeHolder: xyPosArr
       };
-
+     
       setSignerPos((prev) => [...prev, placeHolderPos]);
     }
   };
@@ -467,17 +419,19 @@ function PlaceHolderSign() {
   };
 
   //function for set and update x and y postion after drag and drop signature tab
-  const handleStop = (event, dragElement) => {
+  const handleStop = (event, dragElement, signerId, key) => {
     const containerRect = document
       .getElementById("container")
       .getBoundingClientRect();
-
+    const signId = signerId ? signerId : signerObjId;
+    const keyValue = key ? key : dragKey;
     const ybottom = containerRect.height - dragElement.y;
 
-    if (dragKey >= 0) {
+    if (keyValue >= 0) {
       const filterSignerPos = signerPos.filter(
-        (data) => data.signerObjId === signerObjId
+        (data) => data.signerObjId === signId
       );
+
       if (filterSignerPos.length > 0) {
         const getPlaceHolder = filterSignerPos[0].placeHolder;
 
@@ -490,7 +444,7 @@ function PlaceHolderSign() {
 
           const getPosData = getXYdata;
           const addSignPos = getPosData.map((url, ind) => {
-            if (url.key === dragKey) {
+            if (url.key === keyValue) {
               return {
                 ...url,
                 xPosition: dragElement.x,
@@ -509,16 +463,15 @@ function PlaceHolderSign() {
             return obj;
           });
           const newUpdateSigner = signerPos.map((obj, ind) => {
-            if (obj.signerObjId === signerObjId) {
+            if (obj.signerObjId === signId) {
               return { ...obj, placeHolder: newUpdateSignPos };
             }
             return obj;
           });
+
           setSignerPos(newUpdateSigner);
         }
       }
-
-      // }
     }
   };
 
@@ -556,6 +509,7 @@ function PlaceHolderSign() {
             }
             return obj;
           });
+
           setSignerPos(newUpdateSigner);
         } else {
           const updateFilter = signerPos.filter(
@@ -577,6 +531,7 @@ function PlaceHolderSign() {
               (data) => data.signerObjId !== signerId
             );
             signerupdate.push(newUpdatePos[0]);
+
             setSignerPos(signerupdate);
           } else {
             setSignerPos(updateFilter);
@@ -621,12 +576,14 @@ function PlaceHolderSign() {
             }
             return obj;
           });
+
           const newUpdateSigner = signerPos.map((obj, ind) => {
             if (obj.signerObjId === signerId) {
               return { ...obj, placeHolder: newUpdateSignPos };
             }
             return obj;
           });
+
           setSignerPos(newUpdateSigner);
         } else {
           const getXYdata = getPageNumer[0].pos;
@@ -650,12 +607,14 @@ function PlaceHolderSign() {
             }
             return obj;
           });
+
           const newUpdateSigner = signerPos.map((obj, ind) => {
             if (obj.signerObjId === signerId) {
               return { ...obj, placeHolder: newUpdateSignPos };
             }
             return obj;
           });
+
           setSignerPos(newUpdateSigner);
         }
       }
@@ -667,11 +626,9 @@ function PlaceHolderSign() {
     setSignBtnPosition([]);
     setPageNumber((prevPageNumber) => prevPageNumber + offset);
   }
-
+ 
   //function for capture position on hover signature button
   const handleDivClick = (e) => {
-    // if (signBtnPosition.length == 0) {
-
     const divRect = e.currentTarget.getBoundingClientRect();
     const mouseX = e.clientX - divRect.left;
     const mouseY = e.clientY - divRect.top;
@@ -721,17 +678,13 @@ function PlaceHolderSign() {
       month: "long",
       year: "numeric"
     });
-
     let sender = signersdata.ExtUserPtr.Email;
-    //  let sender ="raktima.c@qik.ai"
+   const signerMail = signersdata.Signers;
-    const signerMail = signersdata.Signers;
 
     for (let i = 0; i < signerMail.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";
-
         let url = `${localStorage.getItem("baseUrl")}functions/sendmailv3/`;
         const headers = {
           "Content-Type": "application/json",
@@ -800,14 +753,12 @@ function PlaceHolderSign() {
             }
           )
           .then((result) => {
-            //   const res = result.data;
             setIsSend(true);
             setIsMailSend(true);
             const loadObj = {
               isLoad: false
             };
             setIsLoading(loadObj);
-            // console.log("save res", res);
           })
           .catch((err) => {
             console.log("axois err ", err);
@@ -889,6 +840,12 @@ function PlaceHolderSign() {
         console.log("axois err ", err);
       });
   };
+  const handleRecipientSign = () => {
+    const hostUrl = getHostUrl();
+    navigate(
+      `${hostUrl}recipientSignPdf/${documentId}/${currentEmail[0].objectId}`
+    );
+  };
   return (
     <DndProvider backend={HTML5Backend}>
       {isLoading.isLoad ? (
@@ -993,7 +950,6 @@ function PlaceHolderSign() {
                 style={{
                   background: themeColor()
                 }}
-                // className="bg-danger"
               >
                 <span style={{ color: "white" }}>Send Mail </span>
               </Modal.Header>
@@ -1023,21 +979,19 @@ function PlaceHolderSign() {
                       No
                     </button>
 
-                    <a
+                    <button
-                      style={{ color: "white" }}
+                      onClick={() => {
-                      href={`https://qik-ai-org.github.io/Sign-MicroappV2/#/recipientSignPdf/${documentId}/${currentEmail[0].objectId}`}
+                        handleRecipientSign();
+                      }}
+                      style={{
+                        background: themeColor(),
+                        color: "white"
+                      }}
+                      type="button"
+                      className="finishBtn"
                     >
-                      <button
+                      Yes
-                        style={{
+                    </button>
-                          background: themeColor(),
-                          color: "white"
-                        }}
-                        type="button"
-                        className="finishBtn"
-                      >
-                        Yes
-                      </button>
-                    </a>
                   </>
                 ) : (
                   <button
@@ -1160,8 +1114,6 @@ function PlaceHolderSign() {
                     dragRef={dragRef}
                     isDragStamp={isDragStamp}
                     isSignYourself={false}
-                    // xyPostion={xyPostion}
-                    //  isSigners={false}
                     addPositionOfSignature={addPositionOfSignature}
                   />
                 </div>

microfrontends/SignDocuments/src/Component/recipientSignPdf.js

@@ -69,7 +69,7 @@ function EmbedPdfImage() {
   });
 
   const docId = id && id;
-  //"F0hg0twSJH";
+  const isMobile = window.innerWidth < 767;
   const index = xyPostion.findIndex((object) => {
     return object.pageNumber === pageNumber;
   });
@@ -85,12 +85,10 @@ function EmbedPdfImage() {
 
   //function for get document details for perticular signer with signer'object id
   const getDocumentDetails = async () => {
-    //aspfUo7wRl
     let currUserId, userObjectId;
-    const json = await contactBookName(contactBookId, "_Users");
+    const json = await contactBookName(contactBookId, "_Contactbook");
-
     if (json !== "Error: Something went wrong!" && json && json.results[0]) {
-      setContractName("_Users");
+      setContractName("_Contactbook");
       if (json.results[0]) {
         userObjectId = json.results[0].UserId.objectId;
         setUserObjectID(userObjectId);
@@ -123,9 +121,10 @@ function EmbedPdfImage() {
       setHandleError("Error: Something went wrong!");
       setIsLoading(loadObj);
     } else {
-      const json = await contactBookName(contactBookId, "_Contactbook");
+      const json = await contactBookName(contactBookId, "_Users");
-      if (json && json.results[0]) {
+
-        setContractName("_Contactbook");
+      if (json !== "Error: Something went wrong!" && json && json.results[0]) {
+        setContractName("_Users");
         if (json.results[0]) {
           userObjectId = json.results[0].UserId.objectId;
           setUserObjectID(userObjectId);
@@ -151,57 +150,14 @@ function EmbedPdfImage() {
           };
           setIsLoading(loadObj);
         }
+      } else if (json === "Error: Something went wrong!") {
+        const loadObj = {
+          isLoad: false
+        };
+        setHandleError("Error: Something went wrong!");
+        setIsLoading(loadObj);
       }
     }
-    // await axios
-    //   .get(//m4GJ12tm87
-    //     `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-    //       "_appName"
-    //     )}_Contactbook?where={"Phone":"${userPhone}"}`,
-    //     {
-    //       headers: {
-    //         "Content-Type": "application/json",
-    //         "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-    //         sessionToken: localStorage.getItem("accesstoken"),
-    //       },
-    //     }
-    //   )
-    //   .then((Listdata) => {
-    //     const json = Listdata.data;
-
-    //     if (json.results[0]) {
-    //       userObjectId = json.results[0].UserId.objectId;
-    //       setUserObjectID(userObjectId);
-    //       currUserId = json.results[0].objectId;
-
-    //       setSignerUserId(currUserId);
-    //       const tourstatus =
-    //         json.results[0].TourStatus && json.results[0].TourStatus;
-
-    //       if (tourstatus && tourstatus.length > 0) {
-    //         setTourStatus(tourstatus);
-    //         const checkTourRecipients = tourstatus.filter(
-    //           (data) => data.recipientssign
-    //         );
-    //         if (checkTourRecipients && checkTourRecipients.length > 0) {
-    //           setCheckTourStatus(checkTourRecipients[0].recipientssign);
-    //         }
-    //       }
-    //     } else {
-    //       setNoData(true);
-    //       const loadObj = {
-    //         isLoad: false,
-    //       };
-    //       setIsLoading(loadObj);
-    //     }
-    //   })
-    //   .catch((err) => {
-    //     const loadObj = {
-    //       isLoad: false,
-    //     };
-    //     setHandleError("Error: Something went wrong!");
-    //     setIsLoading(loadObj);
-    //   });
 
     await axios
       .get(
@@ -220,7 +176,6 @@ function EmbedPdfImage() {
       .then((Listdata) => {
         const json = Listdata.data;
         const res = json.results;
-        // console.log("res",res)
         if (res[0] && res.length > 0) {
           const declined = res[0].IsDeclined && res[0].IsDeclined;
           const isCompleted = res[0].IsCompleted && res[0].IsCompleted;
@@ -233,16 +188,12 @@ function EmbedPdfImage() {
             //then show alert with completed message
             const alreadySign = {
               status: true,
-              mssg: "This document has already been signed!"
+              mssg: "This document has been successfully signed!"
             };
             setIsAlreadySign(alreadySign);
             setPdfUrl(res[0].SignedUrl);
             setSignedPdfData(json.results);
             setCompletePdfData(res);
-            const loadObj = {
-              isLoad: false
-            };
-            setIsLoading(loadObj);
           } else if (declined) {
             const currentDecline = {
               currnt: "another",
@@ -251,11 +202,6 @@ function EmbedPdfImage() {
             setIsDecline(currentDecline);
 
             setSignedPdfData(json.results);
-
-            const loadObj = {
-              isLoad: false
-            };
-            setIsLoading(loadObj);
           } else if (currDate > expireUpdateDate) {
             setIsExpired(true);
             const checkDocIdExist =
@@ -282,11 +228,6 @@ function EmbedPdfImage() {
 
               const key = currUser[0].placeHolder[0].pos[0].key;
               setSignKey(key);
-
-              const loadObj = {
-                isLoad: false
-              };
-              setIsLoading(loadObj);
             }
             //for show current requested signer's placeholder
             else {
@@ -302,17 +243,7 @@ function EmbedPdfImage() {
 
               const key = currUser[0].placeHolder[0].pos[0].key;
               setSignKey(key);
-
-              const loadObj = {
-                isLoad: false
-              };
-              setIsLoading(loadObj);
             }
-
-            const loadObj = {
-              isLoad: false
-            };
-            setIsLoading(loadObj);
           } else {
             //checking document has signed by someone or not
 
@@ -326,6 +257,7 @@ function EmbedPdfImage() {
             //if signed by someone than go to in if condition
             // and second signer could not be add documentId
             //for that setIsDocId true
+
             if (checkDocIdExist && checkDocIdExist.length > 0) {
               setIsDocId(true);
 
@@ -336,7 +268,7 @@ function EmbedPdfImage() {
                   data.Activity === "Signed"
               );
 
-              // if checkAlreadyBySigner has some data that current user alredy sign this document
+              // if checkAlreadyBySigner has some data that current user already sign this document
               // then show alert with message
               if (checkAlreadyBySigner && checkAlreadyBySigner.length > 0) {
                 const alreadySign = {
@@ -345,10 +277,7 @@ function EmbedPdfImage() {
                 };
                 setIsAlreadySign(alreadySign);
                 setPdfUrl(res[0].SignedUrl);
-                const loadObj = {
+                setSignedPdfData(json.results);
-                  isLoad: false
-                };
-                setIsLoading(loadObj);
               }
               //else show placeholder of current requested signer
               else {
@@ -364,11 +293,6 @@ function EmbedPdfImage() {
 
                 const key = currUser[0].placeHolder[0].pos[0].key;
                 setSignKey(key);
-
-                const loadObj = {
-                  isLoad: false
-                };
-                setIsLoading(loadObj);
               }
             }
             //for show current requested signer's placeholder
@@ -385,19 +309,8 @@ function EmbedPdfImage() {
 
               const key = currUser[0].placeHolder[0].pos[0].key;
               setSignKey(key);
-
-              const loadObj = {
-                isLoad: false
-              };
-              setIsLoading(loadObj);
             }
           }
-        } else {
-          setNoData(true);
-          const loadObj = {
-            isLoad: false
-          };
-          setIsLoading(loadObj);
         }
       })
       .catch((err) => {
@@ -434,8 +347,12 @@ function EmbedPdfImage() {
         setIsLoading(loadObj);
       })
       .catch((err) => {
-        // this.setState({ loading: false });
         console.log("axois err ", err);
+        const loadObj = {
+          isLoad: false
+        };
+        setHandleError("Error: Something went wrong!");
+        setIsLoading(loadObj);
       });
   };
 
@@ -624,23 +541,62 @@ function EmbedPdfImage() {
               ? imgUrlList[id].Height
               : 60;
             const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150;
-            const isMobile = window.innerWidth < 712;
+            const isMobile = window.innerWidth < 767;
             const newWidth = window.innerWidth;
             const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
-            page.drawImage(img, {
+            const xPos = (pos) => {
-              x: isMobile
+              //checking both condition mobile and desktop view
-                ? imgUrlList[id].xPosition * scale + 50
+              if (isMobile) {
-                : imgUrlList[id].xPosition,
+                //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
+                if (pos.isMobile) {
+                  const x = pos.xPosition * (pos.scale / scale);
+                  return x * scale + 50;
+                } else {
+                  const x = pos.xPosition / scale;
+                  return x * scale;
+                }
+              } else {
+                //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
+                if (pos.isMobile) {
+                  const x = pos.xPosition * pos.scale + 50;
+                  return x;
+                } else {
+                  return pos.xPosition;
+                }
+              }
+            };
+            const yPos = (pos) => {
+              //checking both condition mobile and desktop view
 
-              y:
+              if (isMobile) {
-                page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight,
+                //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
+                if (pos.isMobile) {
+                  const y = pos.yPosition * (pos.scale / scale);
+                  return page.getHeight() - y * scale - imgHeight;
+                } else {
+                  const y = pos.yPosition / scale;
+                  return page.getHeight() - y * scale - imgHeight;
+                }
+              } else {
+                //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
+                if (pos.isMobile) {
+                  const y = pos.yPosition * pos.scale;
+                  return page.getHeight() - y - imgHeight;
+                } else {
+                  return page.getHeight() - pos.yPosition - imgHeight;
+                }
+              }
+            };
+
+            page.drawImage(img, {
+              x: xPos(imgUrlList[id]),
+              y: yPos(imgUrlList[id]),
               width: imgWidth,
               height: imgHeight
             });
           });
         }
         const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
-        //console.log("pdfbyte", pdfBytes);
         signPdfFun(pdfBytes, docId);
       }
 
@@ -658,29 +614,87 @@ function EmbedPdfImage() {
     pdfBase64Url,
     pageNo
   ) => {
-    let signgleSign;
+    let singleSign;
-    const isMobile = window.innerWidth < 712;
+    const isMobile = window.innerWidth < 767;
     const newWidth = window.innerWidth;
     const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
+    const height = xyPosData ? xyPosData.Height : 60;
+    const xPos = (pos) => {
+      //checking both condition mobile and desktop view
+      if (isMobile) {
+        //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
+        if (pos.isMobile) {
+          const x = pos.xPosition * (pos.scale / scale);
+          return x * scale + 50;
+        } else {
+          const x = pos.xPosition / scale;
+          return x * scale;
+        }
+      } else {
+        //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
+        if (pos.isMobile) {
+          const x = pos.xPosition * pos.scale + 50;
+          return x;
+        } else {
+          return pos.xPosition;
+        }
+      }
+    };
+
+    const yBottom = (pos) => {
+      let yPosition;
+      //checking both condition mobile and desktop view
+
+      if (isMobile) {
+        //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
+        if (pos.isMobile) {
+          const y = pos.yPosition * (pos.scale / scale);
+          yPosition = pos.isDrag
+            ? y * scale - height
+            : pos.firstYPos
+            ? y * scale - height + pos.firstYPos
+            : y * scale - height;
+          return yPosition;
+        } else {
+          const y = pos.yBottom / scale;
+
+          yPosition = pos.isDrag
+            ? y * scale - height
+            : pos.firstYPos
+            ? y * scale - height + pos.firstYPos
+            : y * scale - height;
+          return yPosition;
+        }
+      } else {
+        //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
+        if (pos.isMobile) {
+          const y = pos.yBottom * pos.scale;
+
+          yPosition = pos.isDrag
+            ? y - height
+            : pos.firstYPos
+            ? y - height + pos.firstYPos
+            : y - height;
+          return yPosition;
+        } else {
+          yPosition = pos.isDrag
+            ? pos.yBottom - height
+            : pos.firstYPos
+            ? pos.yBottom - height + pos.firstYPos
+            : pos.yBottom - height;
+          return yPosition;
+        }
+      }
+    };
     if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
-      const height = xyPosData.Height ? xyPosData.Height : 60;
+      const bottomY = yBottom(xyPosData);
-      const bottomY = xyPosData.isDrag
+      singleSign = {
-        ? xyPosData.yBottom * scale - height
-        : xyPosData.firstYPos
-        ? xyPosData.yBottom * scale - height + xyPosData.firstYPos
-        : xyPosData.yBottom * scale - height;
-      signgleSign = {
         pdfFile: pdfBase64Url,
         docId: docId,
+        userId: signerUserId,
         sign: {
           Base64: base64Url,
-          Left: isMobile
+          Left: xPos(xyPosData),
-            ? xyPosData.resizeXPos
-              ? xyPosData.resizeXPos * scale + 80
-              : xyPosData.xPosition * scale + 80
-            : xyPosData.resizeXPos
-            ? xyPosData.resizeXPos
-            : xyPosData.xPosition,
           Bottom: bottomY,
           Width: xyPosData.Width ? xyPosData.Width : 150,
           Height: height,
@@ -688,33 +702,25 @@ function EmbedPdfImage() {
         }
       };
     } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
-      signgleSign = {
+      singleSign = {
         pdfFile: base64Url,
-        docId: docId
+        docId: docId,
+        userId: signerUserId
       };
     }
 
     await axios
-      .post(
+      .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
-        `${localStorage.getItem("baseUrl")}functions/signPdf`,
+        headers: {
-        signgleSign,
+          "Content-Type": "application/json",
-        {
+          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          headers: {
+          sessionToken: localStorage.getItem("accesstoken")
-            "Content-Type": "application/json",
-            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            sessionToken: localStorage.getItem("accesstoken")
-          }
         }
-      )
+      })
       .then((Listdata) => {
         const json = Listdata.data;
 
         if (json.result.data) {
-          // setPdfUrl(json.result.data);
-          // const loadObj = {
-          //   isLoad: false,
-          // };
-          // setIsLoading(loadObj);
           getDocumentDetails();
         }
       })
@@ -731,8 +737,6 @@ function EmbedPdfImage() {
   //function for image upload or update
   const onImageChange = (event) => {
     if (event.target.files && event.target.files[0]) {
-      // setIsSignPad(false);
-
       const imageType = event.target.files[0].type;
 
       const reader = new FileReader();
@@ -872,7 +876,7 @@ function EmbedPdfImage() {
     } else {
       updatedTourStatus = [{ recipientssign: true }];
     }
-    // console.log("updatedTourStatus", updatedTourStatus);
+
     await axios
       .put(
         `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
@@ -899,7 +903,6 @@ function EmbedPdfImage() {
       });
   };
 
-  //  console.log("is sign",isAlreadySign.status)
   const tourFunction = () => {
     const tourConfig = [
       {
@@ -922,16 +925,17 @@ function EmbedPdfImage() {
       }
     ];
 
-    const stepsToShow =
+    let stepsToShow = [];
-      !defaultSignImg &&
+    if (!defaultSignImg || isMobile) {
-      tourConfig.filter(
+      stepsToShow = tourConfig.filter(
-        (step, index) => step.selector !== '[data-tut="reactourFirst"]'
+        (step) => step.selector !== '[data-tut="reactourFirst"]'
       );
+    }
 
     return (
       <Tour
         onRequestClose={closeTour}
-        steps={stepsToShow}
+        steps={stepsToShow && stepsToShow.length > 0 ? stepsToShow : tourConfig}
         isOpen={signTour}
         closeWithMask={false}
         rounded={5}
@@ -1112,7 +1116,7 @@ function EmbedPdfImage() {
             />
           </div>
 
-          {!pdfUrl && !isAlreadySign.status ? (
+          {!pdfUrl ? (
             <div data-tut="reactourFirst">
               {/* this component is used to render default signature of user in the right side of the component */}
 

microfrontends/SignDocuments/src/css/LoginPage.css

@@ -1,9 +1,46 @@
-.react-tel-input .form-control {
+.loginInput{
+  padding: 10px;
+
+  border-radius: 4px;
   width: 100%;
-  height: 45px;
+  font-size: 0.75rem;
-  margin-top: 4px;
+ border: 1px solid #e2dddd;;
+  background-color: #e0e5f5;
+     color: black;
+    
+    padding-left: 1rem!important;
+    padding-right: 1rem!important;
+    padding-top: 0.5rem!important;
+    
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-weight: inherit;
+    overflow: visible;
+    
+ }
+ .loginInput:focus{
+  outline: none;
+  border: none;
+ }
+.verifyBtn{
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+  padding: 3px 30px;
+  color: white;
+  font-weight: 500 !important;
+  font-size: 14px !important;
+  border: none;
+}
+.verifyBtn:focus {
+  border: none;
+  outline: none;
 }
 
+
+.verifyBtn:hover {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+  color: white;
+}
 .fakeimg {
   height: 200px;
   background: #aaa;
@@ -110,16 +147,17 @@
 
 .KNLO {
   color: #878787;
+  font-size: 13px;
 }
 
 .form-check-label {
   margin-left: 17px;
   margin-bottom: 12px;
 }
-
+.welcomeText{
-input:focus {
+  font-size: 30px;
-  border-color: #ccc !important;
 }
+ 
 
 @media only screen and (max-width: 600px) {
   .KLO1 {
@@ -148,4 +186,25 @@ input:focus {
 
 
 
+}
+@media screen and (max-width:366px) {
+
+  .main-logo {
+    width: 150px;
+    height: 46px;
+    display: inline-block;
+  }
+  .welcomeText{
+    font-size: 20px;
+  }
+  .KNLO {
+    color: #878787;
+    font-size: 10px;
+  }
+  .btnContainer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
 }

microfrontends/SignDocuments/src/utils/Utils.js

@@ -62,6 +62,7 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
     let newWidth, nweHeight;
     const aspectRatio = imgWH.width / imgWH.height;
     const getXYdata = xyPostion[index].pos;
+   
     if (aspectRatio === 1) {
       newWidth = aspectRatio * 100;
       nweHeight = aspectRatio * 100;
@@ -78,13 +79,15 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
       newWidth = aspectRatio * 10;
       nweHeight = 10;
     }
-    const getPosData = getXYdata;
+   
-    const addSign = getPosData.map((url, ind) => {
+    let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
+    
+    const addSign = getXYdata.map((url, ind) => {
       if (url.key === signKey) {
         return {
           ...url,
-          Width: newWidth,
+          Width: getPosData[0].Width ? getPosData[0].Width : 150,
-          Height: nweHeight,
+          Height: getPosData[0].Height ? getPosData[0].Height : 60,
           SignUrl: image.src,
           ImageType: image.imgType
         };
@@ -103,8 +106,7 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
   } else {
     const getXYdata = xyPostion[index].pos;
 
-    const getPosData = getXYdata;
+    let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
-
     const aspectRatio = imgWH.width / imgWH.height;
 
     let newWidth, newHeight;
@@ -125,12 +127,12 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
       newHeight = 10;
     }
 
-    const addSign = getPosData.map((url, ind) => {
+    const addSign = getXYdata.map((url, ind) => {
       if (url.key === signKey) {
         return {
           ...url,
-          Width: newWidth,
+          Width: getPosData[0].Width ? getPosData[0].Width : 150,
-          Height: newHeight,
+          Height: getPosData[0].Height ? getPosData[0].Height : 60,
           SignUrl: image.src,
           ImageType: image.imgType
         };
@@ -151,15 +153,10 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
 
 //function for save button to save signature or image url
 export function onSaveSign(xyPostion, index, signKey, signatureImg) {
-  // const updateFilter = xyPostion[index].pos.filter(
-  //   (data) => data.key === signKey && data.SignUrl
-  // );
-
   let getXYdata = xyPostion[index].pos;
-  let getPosData = getXYdata;
+  let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
-  // if (updateFilter.length > 0) {
+
-  // updateFilter[0].SignUrl = signatureImg;
+  const addSign = getXYdata.map((url, ind) => {
-  const addSign = getPosData.map((url, ind) => {
     if (url.key === signKey) {
       return {
         ...url,
@@ -178,27 +175,6 @@ export function onSaveSign(xyPostion, index, signKey, signatureImg) {
     return obj;
   });
   return newUpdateUrl;
-  // } else {
-  //   const addSign = getPosData.map((url, ind) => {
-  //     if (url.key === signKey) {
-  //       return {
-  //         ...url,
-  //         SignUrl: signatureImg,
-  //         Width: getPosData[0].Width ? getPosData[0].Width : 150,
-  //         Height: getPosData[0].Height ? getPosData[0].Height : 60
-  //       };
-  //     }
-  //     return url;
-  //   });
-
-  //   const newUpdateUrl = xyPostion.map((obj, ind) => {
-  //     if (ind === index) {
-  //       return { ...obj, pos: addSign };
-  //     }
-  //     return obj;
-  //   });
-  //   return newUpdateUrl;
-  // }
 }
 
 //function for getting contract_User details
@@ -278,5 +254,3 @@ export const contactBookName = async (objectId, className) => {
     });
   return result;
 };
-
-