fix: horizontal pdf or large size pdf's scrollbar issue in signyourself and placeholder flow

Author: raktima-opensignlabs

microfrontends/SignDocuments/src/Component/PdfRequestFiles.js

@@ -18,7 +18,8 @@ import {
   getBase64FromUrl,
   urlValidator,
   multiSignEmbed,
-  embedDocId
+  embedDocId,
+  pdfNewWidthFun
 } from "../utils/Utils";
 import Loader from "./component/loader";
 import HandleError from "./component/HandleError";
@@ -92,19 +93,14 @@ function PdfRequestFiles() {
   const jsonSender = JSON.parse(senderUser);
 
   useEffect(() => {
-    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);
     if (documentId) {
       getDocumentDetails();
     }
   }, []);
   useEffect(() => {
     if (divRef.current) {
+      const pdfWidth = pdfNewWidthFun(divRef);
+      setPdfNewWidth(pdfWidth);
       setContainerWH({
         width: divRef.current.offsetWidth,
         height: divRef.current.offsetHeight

microfrontends/SignDocuments/src/Component/SignYourselfPdf.js

@@ -20,7 +20,8 @@ import {
   contractDocument,
   getBase64FromIMG,
   embedDocId,
-  multiSignEmbed
+  multiSignEmbed,
+  pdfNewWidthFun
 } from "../utils/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -81,7 +82,7 @@ function SignYourSelf() {
     status: false,
     type: "load"
   });
-
+  const divRef = useRef(null);
   const nodeRef = useRef(null);
   const [{ isOver }, drop] = useDrop({
     accept: "BOX",
@@ -168,17 +169,21 @@ function SignYourSelf() {
   const jsonSender = JSON.parse(senderUser);
 
   useEffect(() => {
-    const clientWidth = window.innerWidth;
-    const value = docId ? 80 : 80;
-    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);
     if (documentId) {
       getDocumentDetails(true);
     }
   }, []);
 
+  useEffect(() => {
+    if (divRef.current) {
+      const pdfWidth = pdfNewWidthFun(divRef);
+      setPdfNewWidth(pdfWidth);
+      if (documentId) {
+        getDocumentDetails();
+      }
+    }
+  }, [divRef.current]);
+
   //function for get document details for perticular signer with signer'object id
   const getDocumentDetails = async (showComplete) => {
     //getting document details
@@ -188,18 +193,19 @@ function SignYourSelf() {
       setPdfDetails(documentData);
       const isCompleted =
         documentData[0].IsCompleted && documentData[0].IsCompleted;
-      if (isCompleted && showComplete) {
+      if (isCompleted) {
         const docStatus = {
           isCompleted: isCompleted
         };
-
         setDocumentStatus(docStatus);
+        setPdfUrl(documentData[0].SignedUrl);
         const alreadySign = {
           status: true,
           mssg: "You have successfully signed the document!"
         };
-        setShowAlreadySignDoc(alreadySign);
-        setPdfUrl(documentData[0].SignedUrl);
+        if (showComplete) {
+          setShowAlreadySignDoc(alreadySign);
+        }
       }
     } else if (
       documentData === "Error: Something went wrong!" ||
@@ -874,7 +880,7 @@ function SignYourSelf() {
       ) : noData ? (
         <Nodata />
       ) : (
-        <div className="signatureContainer">
+        <div className="signatureContainer" ref={divRef}>
           {/* this component used for UI interaction and show their functionality */}
           {pdfLoadFail && !checkTourStatus && (
             <Tour

microfrontends/SignDocuments/src/Component/placeHolderSign.js

@@ -18,7 +18,7 @@ import Nodata from "./component/Nodata";
 import SignerListPlace from "./component/signerListPlace";
 import Header from "./component/header";
 import {
-  contactBook,
+  pdfNewWidthFun,
   contractDocument,
   contractUsers,
   getHostUrl
@@ -36,13 +36,10 @@ function PlaceHolderSign() {
   const [pageNumber, setPageNumber] = useState(1);
   const [signBtnPosition, setSignBtnPosition] = useState([]);
   const [xySignature, setXYSignature] = useState({});
-  const signRef = useRef(null);
-  const dragRef = useRef(null);
   const [dragKey, setDragKey] = useState();
   const [signersdata, setSignersData] = useState();
   const [signerObjId, setSignerObjId] = useState();
   const [signerPos, setSignerPos] = useState([]);
-
   const [isSelectListId, setIsSelectId] = useState();
   const [isSendAlert, setIsSendAlert] = useState({});
   const [isSend, setIsSend] = useState(false);
@@ -61,6 +58,9 @@ function PlaceHolderSign() {
   const [pdfOriginalWidth, setPdfOriginalWidth] = useState();
   const [contractName, setContractName] = useState("");
   const { docId } = useParams();
+  const signRef = useRef(null);
+  const dragRef = useRef(null);
+  const divRef = useRef(null);
   const [isShowEmail, setIsShowEmail] = useState(false);
   const [selectedEmail, setSelectedEmail] = useState(false);
   const [pdfLoadFail, setPdfLoadFail] = useState({
@@ -161,17 +161,17 @@ function PlaceHolderSign() {
   const jsonSender = JSON.parse(senderUser);
 
   useEffect(() => {
-    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);
     if (documentId) {
       getDocumentDetails();
     }
   }, []);
 
+  useEffect(() => {
+    if (divRef.current) {
+      const pdfWidth = pdfNewWidthFun(divRef);
+      setPdfNewWidth(pdfWidth);
+    }
+  }, [divRef.current]);
   //function for get document details
   const getDocumentDetails = async () => {
     //getting document details
@@ -833,7 +833,7 @@ function PlaceHolderSign() {
       ) : noData ? (
         <Nodata />
       ) : (
-        <div className="signatureContainer">
+        <div className="signatureContainer" ref={divRef}>
           {/* this component used for UI interaction and show their functionality */}
           {!checkTourStatus && (
             //this tour component used in your html component where you want to put

microfrontends/SignDocuments/src/Component/recipientSignPdf.js

@@ -14,7 +14,7 @@ import DefaultSignature from "./component/defaultSignature";
 import {
   getBase64FromUrl,
   getBase64FromIMG,
-  contactBookName,
+  pdfNewWidthFun,
   convertPNGtoJPEG,
   contractUsers,
   contactBook,
@@ -94,15 +94,12 @@ function EmbedPdfImage() {
   //check isGuestSigner is present in local if yes than handle login flow header in mobile view
   const isGuestSigner = localStorage.getItem("isGuestSigner");
   useEffect(() => {
-    const clientWidth = window.innerWidth;
-    const pdfWidth = clientWidth - 160 - 220 - 30;
-    //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);
     getDocumentDetails();
   }, []);
   useEffect(() => {
     if (divRef.current) {
+      const pdfWidth = pdfNewWidthFun(divRef);
+      setPdfNewWidth(pdfWidth);
       setContainerWH({
         width: divRef.current.offsetWidth,
         height: divRef.current.offsetHeight

microfrontends/SignDocuments/src/utils/Utils.js

@@ -479,3 +479,10 @@ export const embedDocId = async (pdfDoc, documentId, allPages) => {
     });
   }
 };
+
+export const pdfNewWidthFun = (divRef) => {
+  const clientWidth = divRef.current.offsetWidth;
+  const pdfWidth = clientWidth - 160 - 200;
+  //160 is width of left side, 200 is width of right side component
+  return pdfWidth;
+};