Merge pull request #610 from OpenSignLabs/fix_issue

fix: invalid document url convert in arrayBuffer issue

apps/OpenSign/src/components/pdf/PlaceholderType.js

@@ -550,7 +550,7 @@ function PlaceholderType(props) {
         (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
         <textarea
           ref={inputRef}
-          placeholder="Enter label"
+          placeholder="Enter text"
           rows={1}
           onKeyDown={handleEnterPress}
           value={textValue}

apps/OpenSign/src/constant/Utils.js

@@ -1895,3 +1895,19 @@ export const copytoData = (text) => {
     document.body.removeChild(textArea);
   }
 };
+
+export const convertPdfArrayBuffer = async (url) => {
+  try {
+    const response = await fetch(url);
+    // Check if the response was successful (status 200)
+    if (!response.ok) {
+      return "Error";
+    }
+    // Convert the response to ArrayBuffer
+    const arrayBuffer = await response.arrayBuffer();
+    return arrayBuffer;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return "Error";
+  }
+};

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -23,7 +23,8 @@ import {
   addDefaultSignatureImg,
   radioButtonWidget,
   replaceMailVaribles,
-  fetchSubscription
+  fetchSubscription,
+  convertPdfArrayBuffer
 } from "../constant/Utils";
 import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
@@ -97,6 +98,7 @@ function PdfRequestFiles() {
   const [currWidgetsDetails, setCurrWidgetsDetails] = useState({});
   const [isSubscriptionExpired, setIsSubscriptionExpired] = useState(false);
   const [extUserId, setExtUserId] = useState("");
+  const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
   const divRef = useRef(null);
   const isMobile = window.innerWidth < 767;
   const rowLevel =
@@ -167,6 +169,14 @@ function PdfRequestFiles() {
     //getting document details
     const documentData = await contractDocument(documentId);
     if (documentData && documentData.length > 0) {
+      const url = documentData[0] && documentData[0]?.URL;
+      //convert document url in array buffer format to use embed widgets in pdf using pdf-lib
+      const arrayBuffer = await convertPdfArrayBuffer(url);
+      if (arrayBuffer === "Error") {
+        setHandleError("Error: Something went wrong!");
+      } else {
+        setPdfArrayBuffer(arrayBuffer);
+      }
       if (isEnableSubscription) {
         await checkIsSubscribed(documentData[0]?.ExtUserPtr?.Email);
       }
@@ -543,13 +553,11 @@ function PdfRequestFiles() {
         setIsUiLoading(true);
         const pngUrl = checkUser[0].placeHolder;
         // Load a PDFDocument from the existing PDF bytes
-        const existingPdfBytes = await fetch(pdfUrl).then((res) =>
-          res.arrayBuffer()
-        );
+        const existingPdfBytes = pdfArrayBuffer;
         const pdfDoc = await PDFDocument.load(existingPdfBytes, {
           ignoreEncryption: true
         });
-        const flag = false;
+        const isSignYourSelfFlow = false;
         const extUserPtr = pdfDetails[0].ExtUserPtr;
         const HeaderDocId = extUserPtr?.HeaderDocId;
         //embed document's object id to all pages in pdf document
@@ -563,7 +571,7 @@ function PdfRequestFiles() {
           pngUrl,
           pdfDoc,
           pdfOriginalWidth,
-          flag,
+          isSignYourSelfFlow,
           containerWH
         );
         //get ExistUserPtr object id of user class to get tenantDetails

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -33,7 +33,8 @@ import {
   getTenantDetails,
   replaceMailVaribles,
   copytoData,
-  fetchSubscription
+  fetchSubscription,
+  convertPdfArrayBuffer
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import { useNavigate } from "react-router-dom";
@@ -121,6 +122,7 @@ function PlaceHolderSign() {
   const [isSubscribe, setIsSubscribe] = useState(false);
   const [requestSubject, setRequestSubject] = useState("");
   const [requestBody, setRequestBody] = useState("");
+  const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
   const [isAlreadyPlace, setIsAlreadyPlace] = useState({
     status: false,
     message: ""
@@ -263,6 +265,14 @@ function PlaceHolderSign() {
     //getting document details
     const documentData = await contractDocument(documentId);
     if (documentData && documentData.length > 0) {
+      const url = documentData[0] && documentData[0]?.URL;
+      //convert document url in array buffer format to use embed widgets in pdf using pdf-lib
+      const arrayBuffer = await convertPdfArrayBuffer(url);
+      if (arrayBuffer === "Error") {
+        setHandleError("Error: Something went wrong!");
+      } else {
+        setPdfArrayBuffer(arrayBuffer);
+      }
       setExtUserId(documentData[0]?.ExtUserPtr?.objectId);
       if (isEnableSubscription) {
         checkIsSubscribed(documentData[0]?.ExtUserPtr?.Email);
@@ -794,10 +804,7 @@ function PlaceHolderSign() {
     const prefillExist = signerPos.filter((data) => data.Role === "prefill");
     if (prefillExist && prefillExist.length > 0) {
       const placeholder = prefillExist[0].placeHolder;
-      const pdfUrl = pdfDetails[0].URL;
-      const existingPdfBytes = await fetch(pdfUrl).then((res) =>
-        res.arrayBuffer()
-      );
+      const existingPdfBytes = pdfArrayBuffer;
       const pdfDoc = await PDFDocument.load(existingPdfBytes, {
         ignoreEncryption: true
       });

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -28,7 +28,8 @@ import {
   getDate,
   textWidget,
   getTenantDetails,
-  checkIsSubscribed
+  checkIsSubscribed,
+  convertPdfArrayBuffer
 } from "../constant/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -102,6 +103,7 @@ function SignYourSelf() {
   const [isDontShow, setIsDontShow] = useState(false);
   const [extUserId, setExtUserId] = useState("");
   const [isCompleted, setIsCompleted] = useState(false);
+  const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
   const divRef = useRef(null);
   const nodeRef = useRef(null);
   const [, drop] = useDrop({
@@ -190,6 +192,14 @@ function SignYourSelf() {
     if (documentData && documentData.length > 0) {
       setPdfDetails(documentData);
       setExtUserId(documentData[0]?.ExtUserPtr?.objectId);
+      const url = documentData[0] && documentData[0]?.URL;
+      //convert document url in array buffer format to use embed widgets in pdf using pdf-lib
+      const arrayBuffer = await convertPdfArrayBuffer(url);
+      if (arrayBuffer === "Error") {
+        setHandleError("Error: Something went wrong!");
+      } else {
+        setPdfArrayBuffer(arrayBuffer);
+      }
       isCompleted = documentData[0].IsCompleted && documentData[0].IsCompleted;
       if (isCompleted) {
         setIsCompleted(true);
@@ -255,9 +265,7 @@ function SignYourSelf() {
         setHandleError("Error: Something went wrong!");
         setIsLoading(loadObj);
       });
-
     const contractUsersRes = await contractUsers(jsonSender.email);
-
     if (contractUsersRes[0] && contractUsersRes.length > 0) {
       setContractName("_Users");
       setSignerUserId(contractUsersRes[0].objectId);
@@ -561,22 +569,14 @@ function SignYourSelf() {
         setIsCeleb(false);
       }, 3000);
       setIsUiLoading(true);
-      const url = pdfDetails[0] && pdfDetails[0].URL;
-
-      const existingPdfBytes = await fetch(url).then((res) =>
-        res.arrayBuffer()
-      );
-
+      const existingPdfBytes = pdfArrayBuffer;
       // Load a PDFDocument from the existing PDF bytes
       const pdfDoc = await PDFDocument.load(existingPdfBytes, {
         ignoreEncryption: true
       });
-
-      const flag = true;
-
+      const isSignYourSelfFlow = true;
       const extUserPtr = pdfDetails[0].ExtUserPtr;
       const HeaderDocId = extUserPtr?.HeaderDocId;
-
       //embed document's object id to all pages in pdf document
       if (!HeaderDocId) {
         await embedDocId(pdfDoc, documentId, allPages);
@@ -586,7 +586,7 @@ function SignYourSelf() {
         xyPostion,
         pdfDoc,
         pdfOriginalWidth,
-        flag,
+        isSignYourSelfFlow,
         containerWH
       );
       // console.log("pdf", pdfBytes);