Merge pull request #249 from OpenSignLabs/placeholder-resize

Author: nxglabs

microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js

@@ -51,7 +51,6 @@ function PdfFile() {
     };
     setIsLoading(load);
     const driveDetails = await getDrive();
-
     if (driveDetails) {
       if (driveDetails.length > 0) {
         setPdfData(driveDetails);

microfrontends/SignDocuments/src/Component/PdfRequestFiles.js

@@ -19,7 +19,8 @@ import {
   urlValidator,
   multiSignEmbed,
   embedDocId,
-  pdfNewWidthFun
+  pdfNewWidthFun,
+  signPdfFun
 } from "../utils/Utils";
 import Loader from "./component/loader";
 import HandleError from "./component/HandleError";
@@ -60,6 +61,7 @@ function PdfRequestFiles() {
   const [isUiLoading, setIsUiLoading] = useState(false);
   const [isDecline, setIsDecline] = useState({ isDeclined: false });
   const [currentSigner, setCurrentSigner] = useState(false);
+
   const [isCompleted, setIsCompleted] = useState({
     isCertificate: false,
     isModal: false
@@ -73,6 +75,7 @@ function PdfRequestFiles() {
   const [alreadySign, setAlreadySign] = useState(false);
   const [containerWH, setContainerWH] = useState({});
   const divRef = useRef(null);
+  const isMobile = window.innerWidth < 767;
   const rowLevel =
     localStorage.getItem("rowlevel") &&
     JSON.parse(localStorage.getItem("rowlevel"));
@@ -345,14 +348,32 @@ function PdfRequestFiles() {
                   );
 
                   //function for call to embed signature in pdf and get digital signature pdf
+
                   signPdfFun(
                     newImgUrl,
                     documentId,
+                    signerObjectId,
+                    pdfOriginalWidth,
+                    pngUrl,
                     data,
                     pdfBase64,
                     pageNo,
-                    pngUrl
-                  );
+                    containerWH
+                  )
+                    .then((res) => {
+                      if (res && res.status === "success") {
+                        setPdfUrl(res.data);
+                        setIsSigned(true);
+                        setSignedSigners([]);
+                        setUnSignedSigners([]);
+                        getDocumentDetails();
+                      } else {
+                        alert("something went wrong");
+                      }
+                    })
+                    .catch((err) => {
+                      alert("something went wrong");
+                    });
                 })
                 .catch((error) => {
                   console.error("Error:", error);
@@ -372,7 +393,29 @@ function PdfRequestFiles() {
             false
           );
 
-          signPdfFun(pdfBytes, documentId, pngUrl);
+          //function for call to embed signature in pdf and get digital signature pdf
+          signPdfFun(
+            pdfBytes,
+            documentId,
+            signerObjectId,
+            pdfOriginalWidth,
+            pngUrl,
+            containerWH
+          )
+            .then((res) => {
+              if (res && res.status === "success") {
+                setPdfUrl(res.data);
+                setIsSigned(true);
+                setSignedSigners([]);
+                setUnSignedSigners([]);
+                getDocumentDetails();
+              } else {
+                alert("something went wrong");
+              }
+            })
+            .catch((err) => {
+              alert("something went wrong");
+            });
         }
 
         setIsSignPad(false);
@@ -383,147 +426,6 @@ function PdfRequestFiles() {
     }
   }
 
-  //function for call cloud function signPdf and generate digital signature
-  const signPdfFun = async (
-    base64Url,
-    documentId,
-    xyPosData,
-    pdfBase64Url,
-    pageNo,
-    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 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.yBottom * (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: xPos(xyPosData),
-          Bottom: bottomY,
-          Width: xyPosData.Width ? xyPosData.Width : 150,
-          Height: height,
-          Page: pageNo
-        }
-      };
-    } else if (
-      xyPosData &&
-      xyPosData.length > 0 &&
-      xyPosData[0].pos.length > 0
-    ) {
-      signgleSign = {
-        pdfFile: base64Url,
-        docId: documentId,
-        userId: signerObjectId
-      };
-    }
-
-    await axios
-      .post(
-        `${localStorage.getItem("baseUrl")}functions/signPdf`,
-        signgleSign,
-        {
-          headers: {
-            "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);
-          setIsSigned(true);
-          setSignedSigners([]);
-          setUnSignedSigners([]);
-          getDocumentDetails();
-        }
-      })
-      .catch((err) => {
-        console.log("axois err ", err);
-        alert("something went wrong");
-      });
-  };
   //function for get pdf page details
   const pageDetails = async (pdf) => {
     const load = {
@@ -870,8 +772,8 @@ function PdfRequestFiles() {
             {/* pdf render view */}
             <div
               style={{
-                marginLeft: pdfOriginalWidth > 500 && "20px",
-                marginRight: pdfOriginalWidth > 500 && "20px"
+                marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
+                marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
               }}
             >
               {/* this modal is used show this document is already sign */}
@@ -936,27 +838,30 @@ function PdfRequestFiles() {
                 pdfUrl={pdfUrl}
                 alreadySign={alreadySign}
               />
-
-              <RenderPdf
-                pageNumber={pageNumber}
-                pdfOriginalWidth={pdfOriginalWidth}
-                pdfNewWidth={pdfNewWidth}
-                setIsSignPad={setIsSignPad}
-                setIsStamp={setIsStamp}
-                setSignKey={setSignKey}
-                pdfDetails={pdfDetails}
-                signerPos={signerPos}
-                successEmail={false}
-                pdfUrl={pdfUrl}
-                numPages={numPages}
-                pageDetails={pageDetails}
-                pdfRequest={true}
-                signerObjectId={signerObjectId}
-                signedSigners={signedSigners}
-                setCurrentSigner={setCurrentSigner}
-                setPdfLoadFail={setPdfLoadFail}
-                pdfLoadFail={pdfLoadFail}
-              />
+              {containerWH && (
+                <RenderPdf
+                  pageNumber={pageNumber}
+                  pdfOriginalWidth={pdfOriginalWidth}
+                  pdfNewWidth={pdfNewWidth}
+                  setIsSignPad={setIsSignPad}
+                  setIsStamp={setIsStamp}
+                  setSignKey={setSignKey}
+                  pdfDetails={pdfDetails}
+                  signerPos={signerPos}
+                  successEmail={false}
+                  pdfUrl={pdfUrl}
+                  numPages={numPages}
+                  pageDetails={pageDetails}
+                  pdfRequest={true}
+                  signerObjectId={signerObjectId}
+                  signedSigners={signedSigners}
+                  setCurrentSigner={setCurrentSigner}
+                  setPdfLoadFail={setPdfLoadFail}
+                  pdfLoadFail={pdfLoadFail}
+                  setSignerPos={setSignerPos}
+                  containerWH={containerWH}
+                />
+              )}
             </div>
             <div>
               <div className="signerComponent">