fix: invalid document url convert in arrayBuffer issue

Author: raktima-opensignlabs

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -97,6 +97,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 +168,10 @@ 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 fetch(url).then((res) => res.arrayBuffer());
+      setPdfArrayBuffer(arrayBuffer);
       if (isEnableSubscription) {
         await checkIsSubscribed(documentData[0]?.ExtUserPtr?.Email);
       }
@@ -543,13 +548,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 +566,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

@@ -121,6 +121,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 +264,10 @@ 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 fetch(url).then((res) => res.arrayBuffer());
+      setPdfArrayBuffer(arrayBuffer);
       setExtUserId(documentData[0]?.ExtUserPtr?.objectId);
       if (isEnableSubscription) {
         checkIsSubscribed(documentData[0]?.ExtUserPtr?.Email);
@@ -794,10 +799,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

@@ -102,6 +102,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 +191,10 @@ 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 fetch(url).then((res) => res.arrayBuffer());
+      setPdfArrayBuffer(arrayBuffer);
       isCompleted = documentData[0].IsCompleted && documentData[0].IsCompleted;
       if (isCompleted) {
         setIsCompleted(true);
@@ -255,9 +260,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 +564,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 +581,7 @@ function SignYourSelf() {
         xyPostion,
         pdfDoc,
         pdfOriginalWidth,
-        flag,
+        isSignYourSelfFlow,
         containerWH
       );
       // console.log("pdf", pdfBytes);