From f6170e01f6566fa83dc8573a863507fb2590f41e Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Mon, 24 Jun 2024 19:10:28 +0530
Subject: [PATCH] fix: tour messages display issue in all flow

---
 apps/OpenSign/src/components/pdf/PdfHeader.js |  5 ++--
 .../src/components/pdf/RecipientList.js       |  2 +-
 .../src/components/pdf/SignerListPlace.js     |  2 +-
 .../src/components/pdf/WidgetComponent.js     |  6 ++--
 apps/OpenSign/src/pages/PdfRequestFiles.js    | 21 +++++++------
 apps/OpenSign/src/pages/PlaceHolderSign.js    | 30 +++++++++++--------
 apps/OpenSign/src/pages/SignyourselfPdf.js    |  3 +-
 .../OpenSign/src/pages/TemplatePlaceholder.js |  7 ++---
 8 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/PdfHeader.js b/apps/OpenSign/src/components/pdf/PdfHeader.js
index 75924a094..c90521eb2 100644
--- a/apps/OpenSign/src/components/pdf/PdfHeader.js
+++ b/apps/OpenSign/src/components/pdf/PdfHeader.js
@@ -29,7 +29,6 @@ function Header({
   isShowHeader,
   decline,
   currentSigner,
-  dataTut4,
   alreadySign,
   isSignYourself,
   setIsEmail,
@@ -180,7 +179,7 @@ function Header({
                         className={`${
                           isMailSend ? "" : "op-link-primary"
                         } op-link no-underline font-[650] text-[14px]`}
-                        data-tut={dataTut4}
+                        data-tut="headerArea"
                       >
                         {completeBtnTitle ? completeBtnTitle : "Send"}
                       </div>
@@ -284,7 +283,7 @@ function Header({
                 </button>
                 <button
                   disabled={isMailSend && true}
-                  data-tut="reactourFour"
+                  data-tut="headerArea"
                   className="op-btn op-btn-primary op-btn-sm mr-[3px]"
                   onClick={() => alertSendEmail()}
                 >
diff --git a/apps/OpenSign/src/components/pdf/RecipientList.js b/apps/OpenSign/src/components/pdf/RecipientList.js
index d3b1aee5f..b31c907d4 100644
--- a/apps/OpenSign/src/components/pdf/RecipientList.js
+++ b/apps/OpenSign/src/components/pdf/RecipientList.js
@@ -89,7 +89,7 @@ const RecipientList = (props) => {
               onDrop={(e) =>
                 props.sendInOrder && !isMobile && handleChangeSequence(e, ind)
               }
-              data-tut="reactourFirst"
+              data-tut="recipientArea"
               onMouseEnter={() => setIsHover(ind)}
               onMouseLeave={() => setIsHover(null)}
               className={`${
diff --git a/apps/OpenSign/src/components/pdf/SignerListPlace.js b/apps/OpenSign/src/components/pdf/SignerListPlace.js
index d3d2de108..149995ae5 100644
--- a/apps/OpenSign/src/components/pdf/SignerListPlace.js
+++ b/apps/OpenSign/src/components/pdf/SignerListPlace.js
@@ -72,7 +72,7 @@ function SignerListPlace(props) {
         ) : (
           <div
             role="button"
-            data-tut="reactourAddbtn"
+            data-tut="addRecipient"
             className="op-btn op-btn-accent op-btn-outline w-full mt-[14px]"
             disabled={props?.isMailSend ? true : false}
             onClick={() => props.setIsAddSigner(true)}
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js
index b9380774c..51b10c4ff 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.js
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.js
@@ -250,7 +250,6 @@ function WidgetComponent({
       {isMobile ? (
         !isMailSend && (
           <div
-            data-tut={dataTut}
             id="navbar"
             className="fixed z-[99] bottom-0 right-0"
             style={{ width: window.innerWidth + "px" }}
@@ -258,7 +257,7 @@ function WidgetComponent({
             <div className="mx-1">
               {isSigners && (
                 <div
-                  data-tut={dataTut}
+                  data-tut="recipientArea"
                   className="py-[10px] flex justify-center items-center op-card"
                   style={{
                     background: blockColor
@@ -316,7 +315,7 @@ function WidgetComponent({
               ) : (
                 setIsAddSigner && (
                   <div
-                    data-tut="reactourAddbtn"
+                    data-tut="addRecipient"
                     className="op-btn op-btn-accent w-full my-[2px]"
                     onClick={() => setIsAddSigner(true)}
                   >
@@ -327,6 +326,7 @@ function WidgetComponent({
               )}
             </div>
             <div
+              data-tut="addWidgets"
               ref={scrollContainerRef}
               className="bg-base-100 border-[2px] border-t-primary"
             >
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index 577609148..e2c21a10c 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -182,7 +182,7 @@ function PdfRequestFiles() {
     const localuser = localStorage.getItem(
       `Parse/${appInfo.appId}/currentUser`
     );
-    const currentUser = JSON.parse(JSON.stringify(localuser));
+    const currentUser = JSON.parse(localuser);
     await handleSendOTP(currentUser?.email);
     setOtpLoader(false);
     alert("OTP sent on you email");
@@ -194,7 +194,7 @@ function PdfRequestFiles() {
     const localuser = localStorage.getItem(
       `Parse/${appInfo.appId}/currentUser`
     );
-    const currentUser = JSON.parse(JSON.stringify(localuser));
+    const currentUser = JSON.parse(localuser);
     try {
       const resEmail = await Parse.Cloud.run("verifyemail", {
         otp: otp,
@@ -221,7 +221,7 @@ function PdfRequestFiles() {
     const localuser = localStorage.getItem(
       `Parse/${appInfo.appId}/currentUser`
     );
-    const currentUser = JSON.parse(JSON.stringify(localuser));
+    const currentUser = JSON.parse(localuser);
     await handleSendOTP(currentUser?.email);
   };
   async function checkIsSubscribed(extUserId, contactId) {
@@ -500,7 +500,7 @@ function PdfRequestFiles() {
         const localuser = localStorage.getItem(
           `Parse/${appInfo.appId}/currentUser`
         );
-        const currentUser = JSON.parse(JSON.stringify(localuser));
+        const currentUser = JSON.parse(localuser);
         const currentUserEmail = currentUser.email;
         const res = await contractUsers(currentUserEmail);
         if (res === "Error: Something went wrong!") {
@@ -1288,7 +1288,7 @@ function PdfRequestFiles() {
         style: { fontSize: "13px" }
       },
       {
-        selector: '[data-tut="reactourForth"]',
+        selector: '[data-tut="pdfArea"]',
         content: () => (
           <TourContentWithBtn
             message={`Click any of the placeholders appearing on the document to sign. You will then see options to draw your signature, type it, or upload an image .`}
@@ -1706,11 +1706,7 @@ function PdfRequestFiles() {
                       zoomPercent={zoomPercent}
                     />
 
-                    <div
-                      ref={divRef}
-                      data-tut="reactourSecond"
-                      className="h-[95%]"
-                    >
+                    <div ref={divRef} data-tut="pdfArea" className="h-[95%]">
                       {containerWH && (
                         <RenderPdf
                           pageNumber={pageNumber}
@@ -1776,7 +1772,10 @@ function PdfRequestFiles() {
 
                     {unsignedSigners.length > 0 && (
                       <>
-                        <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
+                        <div
+                          data-tut="reactourFirst"
+                          className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300"
+                        >
                           <span>Yet to sign</span>
                         </div>
                         <div className="mt-[5px]">
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index f417b8717..38560771e 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -1278,7 +1278,7 @@ function PlaceHolderSign() {
 
   const tourConfig = [
     {
-      selector: '[data-tut="reactourFirst"]',
+      selector: '[data-tut="recipientArea"]',
       content: () => (
         <TourContentWithBtn
           message={`Select a recipient from this list to add a place-holder where he is supposed to sign.The placeholder will appear in the same colour as the recipient name once you drop it on the document.`}
@@ -1289,7 +1289,18 @@ function PlaceHolderSign() {
       style: { fontSize: "13px" }
     },
     {
-      selector: '[data-tut="reactourSecond"]',
+      selector: '[data-tut="addRecipient"]',
+      content: () => (
+        <TourContentWithBtn
+          message={`Clicking "Add recipients" button will allow you to add more signer.`}
+          isChecked={handleDontShow}
+        />
+      ),
+      position: "top",
+      style: { fontSize: "13px" }
+    },
+    {
+      selector: '[data-tut="addWidgets"]',
       content: () => (
         <TourContentWithBtn
           message={`Drag or click on a field to add it to the document.`}
@@ -1300,7 +1311,7 @@ function PlaceHolderSign() {
       style: { fontSize: "13px" }
     },
     {
-      selector: '[data-tut="reactourThird"]',
+      selector: '[data-tut="pdfArea"]',
       content: () => (
         <TourContentWithBtn
           message={`The PDF content area already displays the template's existing placeholders. For your convenience, these placeholders will match the color of the recipient's name, making them easily identifiable.`}
@@ -1312,7 +1323,7 @@ function PlaceHolderSign() {
     },
 
     {
-      selector: '[data-tut="reactourFour"]',
+      selector: '[data-tut="headerArea"]',
       content: () => (
         <TourContentWithBtn
           message={`Clicking "Send" will save the document. In the next step you can customize the emails to be sent out to the recipients or copy the signing links and share those with the recipients yourself.`}
@@ -2048,14 +2059,9 @@ function PlaceHolderSign() {
                     alertSendEmail={alertSendEmail}
                     isShowHeader={true}
                     currentSigner={true}
-                    dataTut4="reactourFour"
                   />
 
-                  <div
-                    ref={divRef}
-                    data-tut="reactourSecond"
-                    className="h-[95%]"
-                  >
+                  <div ref={divRef} data-tut="pdfArea" className="h-[95%]">
                     {containerWH && (
                       <RenderPdf
                         pageNumber={pageNumber}
@@ -2109,8 +2115,6 @@ function PlaceHolderSign() {
                   {isMobile ? (
                     <div>
                       <WidgetComponent
-                        dataTut="reactourFirst"
-                        dataTut2="reactourSecond"
                         pdfUrl={isMailSend}
                         dragSignature={dragSignature}
                         signRef={signRef}
@@ -2169,7 +2173,7 @@ function PlaceHolderSign() {
                           roleName={roleName}
                           // handleAddSigner={handleAddSigner}
                         />
-                        <div data-tut="reactourSecond">
+                        <div data-tut="addWidgets">
                           <WidgetComponent
                             isMailSend={isMailSend}
                             dragSignature={dragSignature}
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index 32b89b5ec..a087907e6 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -986,7 +986,7 @@ function SignYourSelf() {
   };
   const tourConfig = [
     {
-      selector: '[data-tut="reactourFirst"]',
+      selector: '[data-tut="addWidgets"]',
       content: () => (
         <TourContentWithBtn
           message={`Select and drag your preferred widgets onto the PDF to customize your document before signing. Choose the perfect spots for each modification to tailor the document to your needs.`}
@@ -1382,7 +1382,6 @@ function SignYourSelf() {
                 {!isCompleted ? (
                   <div>
                     <WidgetComponent
-                      dataTut="reactourFirst"
                       pdfUrl={pdfUrl}
                       dragSignature={dragSignature}
                       signRef={signRef}
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index d5aee2e9d..fbfe2ca60 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -813,7 +813,7 @@ const TemplatePlaceholder = () => {
       action: () => handleCloseRoleModal()
     },
     {
-      selector: '[data-tut="reactourSecond"]',
+      selector: '[data-tut="addWidgets"]',
       content: () => (
         <TourContentWithBtn
           message={`Drag or click on a field to add it to the document.`}
@@ -835,7 +835,7 @@ const TemplatePlaceholder = () => {
       style: { fontSize: "13px" }
     },
     {
-      selector: '[data-tut="reactourFour"]',
+      selector: '[data-tut="headerArea"]',
       content: () => (
         <TourContentWithBtn
           message={`Clicking ‘Save’ will store the current template. After saving, you’ll be prompted to create a new document from this template if you wish.`}
@@ -1545,7 +1545,6 @@ const TemplatePlaceholder = () => {
               {isMobile ? (
                 <div>
                   <WidgetComponent
-                    dataTut="reactourFirst"
                     dataTut2="reactourSecond"
                     pdfUrl={isMailSend}
                     dragSignature={dragSignature}
@@ -1609,7 +1608,7 @@ const TemplatePlaceholder = () => {
                       blockColor={blockColor}
                       setBlockColor={setBlockColor}
                     />
-                    <div data-tut="reactourSecond">
+                    <div data-tut="addWidgets">
                       <WidgetComponent
                         isMailSend={isMailSend}
                         dragSignature={dragSignature}