From f8ba0d357bfb0c9958b4d397e965782b8a8e29e3 Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Wed, 27 Mar 2024 17:31:11 +0530
Subject: [PATCH] fix: mismatch between signature URL in the signature widget
 and the initial widget on the signature pad.

---
 .../src/components/pdf/Placeholder.js         |  1 +
 apps/OpenSign/src/components/pdf/RenderPdf.js |  1 +
 apps/OpenSign/src/components/pdf/SignPad.js   | 51 ++++++++++++-------
 apps/OpenSign/src/constant/Utils.js           |  2 +
 apps/OpenSign/src/pages/PdfRequestFiles.js    |  7 ++-
 apps/OpenSign/src/pages/PlaceHolderSign.js    |  2 +-
 apps/OpenSign/src/pages/SignyourselfPdf.js    |  7 ++-
 7 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
index 0b292b58f..29ee1eca4 100644
--- a/apps/OpenSign/src/components/pdf/Placeholder.js
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -275,6 +275,7 @@ function Placeholder(props) {
     }
   };
   const handleOnClickPlaceholder = () => {
+    props.setCurrWidgetsDetails && props.setCurrWidgetsDetails(props.pos);
     if (!props.isNeedSign) {
       props.setWidgetType(props.pos.type);
     }
diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js
index 7e7cadef6..8d656d383 100644
--- a/apps/OpenSign/src/components/pdf/RenderPdf.js
+++ b/apps/OpenSign/src/components/pdf/RenderPdf.js
@@ -272,6 +272,7 @@ function RenderPdf({
                         unSignedWidgetId={unSignedWidgetId}
                         setSelectWidgetId={setSelectWidgetId}
                         selectWidgetId={selectWidgetId}
+                        setCurrWidgetsDetails={setCurrWidgetsDetails}
                       />
                     </React.Fragment>
                   )
diff --git a/apps/OpenSign/src/components/pdf/SignPad.js b/apps/OpenSign/src/components/pdf/SignPad.js
index 32f29bdfe..0e59b965f 100644
--- a/apps/OpenSign/src/components/pdf/SignPad.js
+++ b/apps/OpenSign/src/components/pdf/SignPad.js
@@ -20,7 +20,9 @@ function SignPad({
   isInitial,
   setIsInitial,
   setIsStamp,
-  widgetType
+  widgetType,
+  currWidgetsDetails,
+  setCurrWidgetsDetails
 }) {
   const [penColor, setPenColor] = useState("blue");
   const allColor = ["blue", "red", "black"];
@@ -31,6 +33,7 @@ function SignPad({
   const [signValue, setSignValue] = useState("");
   const [textWidth, setTextWidth] = useState(null);
   const [textHeight, setTextHeight] = useState(null);
+  const [signatureType, setSignatureType] = useState("draw");
   const fontOptions = [
     { value: "Fasthand" },
     { value: "Dancing Script" },
@@ -48,19 +51,11 @@ function SignPad({
       `Parse/${localStorage.getItem("parseAppId")}/currentUser`
     );
   const jsonSender = JSON.parse(senderUser);
-
   const currentUserName = jsonSender && jsonSender.name;
 
-  useEffect(() => {
-    const trimmedName = currentUserName.trim();
-    const firstCharacter = trimmedName.charAt(0);
-    const userName = isInitial ? firstCharacter : currentUserName;
-    setSignValue(userName);
-    setFontSelect("Fasthand");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   //function for clear signature image
   const handleClear = () => {
+    setCurrWidgetsDetails({});
     if (isTab === "draw") {
       if (canvasRef.current) {
         canvasRef.current.clear();
@@ -100,27 +95,28 @@ function SignPad({
 
         <button
           onClick={() => {
+            setCurrWidgetsDetails({});
             if (!image) {
               if (isTab === "mysignature") {
                 setIsSignImg("");
                 if (isInitial) {
-                  onSaveSign("initials");
+                  onSaveSign(signatureType, "initials");
                 } else {
-                  onSaveSign("default");
+                  onSaveSign(null, "default");
                 }
               } else {
                 if (isTab === "type") {
                   setIsSignImg("");
-                  onSaveSign(false, textWidth, textHeight);
+                  onSaveSign(null, false, textWidth, textHeight);
                 } else {
-                  onSaveSign();
+                  onSaveSign(signatureType);
                 }
               }
 
               setPenColor("blue");
             } else {
               setIsSignImg("");
-              onSaveImage();
+              onSaveImage(signatureType);
             }
             setIsSignPad(false);
             setIsInitial(false);
@@ -150,11 +146,25 @@ function SignPad({
       </div>
     );
   };
-
+  //useEffect for set already draw or save signature url/text url of signature text type and draw type for initial type and signature type widgets
   useEffect(() => {
-    if (canvasRef.current && isSignImg) {
-      canvasRef.current.fromDataURL(isSignImg);
+    if (currWidgetsDetails && canvasRef.current) {
+      const isWidgetType = currWidgetsDetails?.type;
+      const signatureType = currWidgetsDetails?.signatureType;
+      const url = currWidgetsDetails?.SignUrl;
+
+      //checking widget type and draw type signature url
+      if (isWidgetType === "initials" && signatureType === "draw" && url) {
+        canvasRef.current.fromDataURL(url);
+      } else if (
+        isWidgetType === "signature" &&
+        signatureType === "draw" &&
+        url
+      ) {
+        canvasRef.current.fromDataURL(url);
+      }
     }
+
     const trimmedName = currentUserName.trim();
     const firstCharacter = trimmedName.charAt(0);
     const userName = isInitial ? firstCharacter : currentUserName;
@@ -349,6 +359,7 @@ function SignPad({
                               setIsDefaultSign(false);
                               setIsImageSelect(true);
                               setIsTab("uploadImage");
+                              setSignatureType("");
                             }}
                             style={{
                               color:
@@ -373,6 +384,7 @@ function SignPad({
                               setIsDefaultSign(false);
                               setIsImageSelect(false);
                               setIsTab("type");
+                              setSignatureType("");
                               setImage();
                             }}
                             style={{
@@ -400,6 +412,7 @@ function SignPad({
                                 setIsDefaultSign(true);
                                 setIsImageSelect(true);
                                 setIsTab("mysignature");
+                                setSignatureType("");
                                 setImage();
                               }}
                               style={{
@@ -430,6 +443,7 @@ function SignPad({
                                   setIsDefaultSign(true);
                                   setIsImageSelect(true);
                                   setIsTab("mysignature");
+                                  setSignatureType("");
                                   setImage();
                                 }}
                                 style={{
@@ -469,6 +483,7 @@ function SignPad({
                   setIsDefaultSign(false);
                   setImage();
                   setIsTab("draw");
+                  setSignatureType("draw");
                   setSignValue("");
                   setIsStamp(false);
                 }}
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index 40b71434b..044d6c0d6 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -935,6 +935,7 @@ export const embedDocId = async (pdfDoc, documentId, allPages) => {
 
 //function for save button to save signature or image url
 export function onSaveSign(
+  type,
   xyPostion,
   index,
   signKey,
@@ -975,6 +976,7 @@ export function onSaveSign(
         Width: posWidth,
         Height: posHeight,
         SignUrl: signatureImg,
+        signatureType: type && type,
         options: {
           ...position.options,
           response: signatureImg
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index 7f2bf551d..4b430c934 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -87,6 +87,7 @@ function PdfRequestFiles() {
   const [widgetsTour, setWidgetsTour] = useState(false);
   const [minRequiredCount, setminRequiredCount] = useState();
   const [sendInOrder, setSendInOrder] = useState(false);
+  const [currWidgetsDetails, setCurrWidgetsDetails] = useState({});
   const divRef = useRef(null);
   const isMobile = window.innerWidth < 767;
   const rowLevel =
@@ -731,7 +732,7 @@ function PdfRequestFiles() {
   };
 
   //function for save button to save signature or image url
-  const saveSign = (isDefaultSign, width, height) => {
+  const saveSign = (type, isDefaultSign, width, height) => {
     const isTypeText = width && height ? true : false;
     const signatureImg = isDefaultSign
       ? isDefaultSign === "initials"
@@ -767,6 +768,7 @@ function PdfRequestFiles() {
     const placeholderPosition = currentSigner[0].placeHolder;
     //function of save signature image and get updated position with signature image url
     const getUpdatePosition = onSaveSign(
+      type,
       placeholderPosition,
       getIndex,
       signKey,
@@ -1133,6 +1135,8 @@ function PdfRequestFiles() {
                 isInitial={isInitial}
                 setIsInitial={setIsInitial}
                 setIsStamp={setIsStamp}
+                currWidgetsDetails={currWidgetsDetails}
+                setCurrWidgetsDetails={setCurrWidgetsDetails}
               />
               {/* pdf header which contain funish back button */}
               <Header
@@ -1179,6 +1183,7 @@ function PdfRequestFiles() {
                   unSignedWidgetId={unSignedWidgetId}
                   setSelectWidgetId={setSelectWidgetId}
                   selectWidgetId={selectWidgetId}
+                  setCurrWidgetsDetails={setCurrWidgetsDetails}
                 />
               )}
             </div>
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 3dbdce63b..b152c8cf8 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -97,7 +97,7 @@ function PlaceHolderSign() {
   const [widgetType, setWidgetType] = useState("");
   const [isUiLoading, setIsUiLoading] = useState(false);
   const [isRadio, setIsRadio] = useState(false);
-  const [currWidgetsDetails, setCurrWidgetsDetails] = useState([]);
+  const [currWidgetsDetails, setCurrWidgetsDetails] = useState({});
   const [selectWidgetId, setSelectWidgetId] = useState("");
   const [isCheckbox, setIsCheckbox] = useState(false);
   const [isNameModal, setIsNameModal] = useState(false);
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index 69915f333..4a28e7313 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -90,7 +90,7 @@ function SignYourSelf() {
   const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
     status: false
   });
-  const [currWidgetsDetails, setCurrWidgetsDetails] = useState([]);
+  const [currWidgetsDetails, setCurrWidgetsDetails] = useState({});
   const [isCheckbox, setIsCheckbox] = useState(false);
   const [widgetType, setWidgetType] = useState("");
   const [pdfLoadFail, setPdfLoadFail] = useState({
@@ -708,7 +708,7 @@ function SignYourSelf() {
   };
 
   //function for save button to save signature or image url
-  const saveSign = (isDefaultSign, width, height) => {
+  const saveSign = (type, isDefaultSign, width, height) => {
     const isTypeText = width && height ? true : false;
     const signatureImg = isDefaultSign
       ? isDefaultSign === "initials"
@@ -731,6 +731,7 @@ function SignYourSelf() {
       }
     }
     const getUpdatePosition = onSaveSign(
+      type,
       xyPostion,
       index,
       signKey,
@@ -1105,6 +1106,8 @@ function SignYourSelf() {
                 setIsInitial={setIsInitial}
                 setIsStamp={setIsStamp}
                 widgetType={widgetType}
+                currWidgetsDetails={currWidgetsDetails}
+                setCurrWidgetsDetails={setCurrWidgetsDetails}
               />
               {/*render email component to send email after finish signature on document */}
               <EmailComponent