Merge pull request #598 from OpenSignLabs/tour_message

feat : add recipient button in placeholder flow to add new signers in document signer's list

Author: prafull-opensignlabs

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

@@ -38,15 +38,17 @@ function PlaceholderType(props) {
     "December"
   ];
   const validateExpression = (regexValidation) => {
-    let regexObject = regexValidation;
-    if (props.pos?.options.validation.type === "regex") {
-      regexObject = RegexParser(regexValidation);
-    }
-    // new RegExp(regexValidation);
-    let isValidate = regexObject.test(textValue);
-    if (!isValidate) {
-      props?.setValidateAlert(true);
-      inputRef.current.focus();
+    if (textValue) {
+      let regexObject = regexValidation;
+      if (props.pos?.options.validation.type === "regex") {
+        regexObject = RegexParser(regexValidation);
+      }
+      // new RegExp(regexValidation);
+      let isValidate = regexObject.test(textValue);
+      if (!isValidate) {
+        props?.setValidateAlert(true);
+        inputRef.current.focus();
+      }
     }
   };
 

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

@@ -230,7 +230,11 @@ const RecipientList = (props) => {
                       </span>
                     </>
                   )}
-                  {obj.Name && <span className={"useEmail"}>{obj.Role}</span>}
+                  {obj.Name && (
+                    <span className={"useEmail"}>
+                      {obj?.Role || obj?.Email}
+                    </span>
+                  )}
                 </div>
               </div>
               {isMobile && props.sendInOrder && (

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

@@ -4,7 +4,6 @@ import { Document, Page } from "react-pdf";
 import { themeColor } from "../../constant/const";
 
 function RenderAllPdfPage({
-  pdfUrl,
   signPdfUrl,
   allPages,
   setAllPages,
@@ -50,8 +49,7 @@ function RenderAllPdfPage({
               <Document
                 loading={"Loading Document.."}
                 onLoadSuccess={onDocumentLoad}
-                file={pdfUrl ? pdfUrl : signPdfUrl}
-                //   file="https://api.printnode.com/static/test/pdf/multipage.pdf"
+                file={signPdfUrl}
               >
                 {Array.from(new Array(allPages), (el, index) => (
                   <div

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

@@ -296,9 +296,11 @@ function RenderPdf({
             {type && (
               <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
             )}
-            <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
-              {`(${Role})`}
-            </div>
+            {Role && (
+              <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
+                {`(${Role})`}
+              </div>
+            )}
           </>
         );
       } else {

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

@@ -71,7 +71,7 @@ function SignerListPlace(props) {
       <div className="signerList">
         <RecipientList {...props} />
       </div>
-      {props.handleAddSigner && (
+      {props.handleAddSigner ? (
         <div
           data-tut="reactourAddbtn"
           className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad]  hover:text-white cursor-pointer"
@@ -84,6 +84,19 @@ function SignerListPlace(props) {
           <i className="fa-solid fa-plus"></i>
           <span style={{ marginLeft: 2 }}>Add role</span>
         </div>
+      ) : (
+        <div
+          data-tut="reactourAddbtn"
+          className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad]  hover:text-white cursor-pointer"
+          onClick={() => props.setIsAddSigner(true)}
+          style={{
+            opacity: props.isMailSend && "0.5",
+            pointerEvents: props.isMailSend && "none"
+          }}
+        >
+          <i className="fa-solid fa-plus"></i>
+          <span style={{ marginLeft: 2 }}>Add recipients</span>
+        </div>
       )}
     </div>
   );

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

@@ -38,7 +38,8 @@ function WidgetComponent({
   sendInOrder,
   isTemplateFlow,
   setBlockColor,
-  blockColor
+  blockColor,
+  setIsAddSigner
 }) {
   const [isSignersModal, setIsSignersModal] = useState(false);
 
@@ -319,7 +320,7 @@ function WidgetComponent({
                 </span>
               </div>
             )}
-            {handleAddSigner && (
+            {handleAddSigner ? (
               <div
                 data-tut="reactourAddbtn"
                 style={{
@@ -333,6 +334,20 @@ function WidgetComponent({
                 <i className="fa-solid fa-plus"></i>
                 <span style={{ marginLeft: 2 }}>Add role</span>
               </div>
+            ) : (
+              <div
+                data-tut="reactourAddbtn"
+                style={{
+                  margin: "5px 0 5px 0",
+                  backgroundColor: themeColor,
+                  color: "white"
+                }}
+                className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad] hover:text-white cursor-pointer"
+                onClick={() => setIsAddSigner(true)}
+              >
+                <i className="fa-solid fa-plus"></i>
+                <span style={{ marginLeft: 2 }}>Add recipients</span>
+              </div>
             )}
 
             <div
@@ -391,7 +406,7 @@ function WidgetComponent({
       )}
       {isSignersModal && (
         <ModalUi
-          title={"Roles"}
+          title={title ? title : "Recipients"}
           isOpen={isSignersModal}
           handleClose={handleModal}
         >
@@ -424,7 +439,7 @@ function WidgetComponent({
                 textAlign: "center"
               }}
             >
-              Please add a role
+              Please add a {title ? title : "recipients"}
             </div>
           )}
         </ModalUi>

apps/OpenSign/src/components/shared/fields/SelectSigners.js

@@ -53,9 +53,22 @@ const SelectSigners = (props) => {
       const contactRes = await contactbook.find();
       if (contactRes) {
         const res = JSON.parse(JSON.stringify(contactRes));
-        // console.log("userList ", res);
-        setUserList(res);
-        return await res.map((item) => ({
+        //compareArrays is a function where compare between two array (total signersList and dcument signers list)
+        //and filter signers from total signer's list which already present in document's signers list
+        const compareArrays = (res, signerObj) => {
+          return res.filter(
+            (item1) =>
+              !signerObj.find((item2) => item2.objectId === item1.objectId)
+          );
+        };
+
+        //get update signer's List if signersdata is present
+        const updateSignersList =
+          props?.signersData && compareArrays(res, props?.signersData);
+
+        const result = updateSignersList ? updateSignersList : res;
+        setUserList(result);
+        return await result.map((item) => ({
           label: item.Email,
           value: item.objectId
         }));

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -1173,7 +1173,7 @@ function PdfRequestFiles() {
                 </ModalUi>
                 {/* this component used to render all pdf pages in left side */}
                 <RenderAllPdfPage
-                  signPdfUrl={pdfDetails[0].URL}
+                  signPdfUrl={pdfDetails[0] && pdfDetails[0].SignedUrl}
                   allPages={allPages}
                   setAllPages={setAllPages}
                   setPageNumber={setPageNumber}

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -68,6 +68,7 @@ function PlaceHolderSign() {
   const [isSendAlert, setIsSendAlert] = useState({});
   const [isSend, setIsSend] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [isAddSigner, setIsAddSigner] = useState(false);
   const [isLoading, setIsLoading] = useState({
     isLoad: true,
     message: "This might take some time"
@@ -350,15 +351,15 @@ function PlaceHolderSign() {
           const updatedSigners = documentData[0].Signers.map((x, index) => ({
             ...x,
             Id: randomId(),
-            Role: "User " + (index + 1),
+            // Role: "User " + (index + 1),
             blockColor: color[index % color.length]
           }));
           setSignersData(updatedSigners);
           setUniqueId(updatedSigners[0].Id);
           setBlockColor(updatedSigners[0].blockColor);
         }
       } else {
-        setRoleName("User 1");
+        // setRoleName("User 1");
         if (
           documentData[0].Placeholders &&
           documentData[0].Placeholders.length > 0
@@ -1525,8 +1526,25 @@ function PlaceHolderSign() {
     }
   };
 
+  //function to add new signer in document signers list
+  const handleAddNewRecipients = (data) => {
+    const newId = randomId();
+    signersdata.push({
+      ...data,
+      className: "contracts_Contactbook",
+      Id: newId,
+      blockColor: color[signersdata.length]
+    });
+    setUniqueId(newId);
+    setIsSelectId(signersdata.length - 1);
+    setBlockColor(color[signersdata.length]);
+    setContractName("contracts_Contactbook");
+    setSignerObjId(data.objectId);
+  };
+
   const closePopup = () => {
     setIsAddUser({});
+    setIsAddSigner(false);
   };
 
   //function for handle ontext change and save again text in delta in Request Email flow
@@ -1546,6 +1564,30 @@ function PlaceHolderSign() {
       style: { fontSize: "13px" }
     }
   ];
+
+  // `handleDeleteUser` function is used to delete record and placeholder when user click on delete which is place next user name in recipients list
+  const handleDeleteUser = (Id) => {
+    const updateSigner = signersdata
+      .filter((x) => x.Id !== Id)
+      .map((x, i) => ({ ...x, blockColor: color[i] }));
+    setSignersData(updateSigner);
+    const updatePlaceholderUser = signerPos
+      .filter((x) => x.Id !== Id)
+      .map((x, i) => ({ ...x, blockColor: color[i] }));
+    const index = signersdata.findIndex((x) => x.Id === Id);
+    if (index === signersdata.length - 1) {
+      setUniqueId(updateSigner[updateSigner.length - 1]?.Id || "");
+      setIsSelectId(index - 1 || 0);
+      setBlockColor(color[index - 1 || 0]);
+    } else {
+      setUniqueId(updateSigner[index]?.Id || "");
+      setIsSelectId(index);
+      setBlockColor(color[index]);
+    }
+
+    setSignerPos(updatePlaceholderUser);
+    setIsMailSend(false);
+  };
   return (
     <>
       <Title title={state?.title ? state.title : "New Document"} />
@@ -1712,9 +1754,7 @@ function PlaceHolderSign() {
                                     "cursor-pointer underline text-blue-700 focus:outline-none"
                                   }
                                   onClick={() => {
-                                    isSubscribe ||
-                                      (!isEnableSubscription &&
-                                        setIsCustomize(!isCustomize));
+                                    setIsCustomize(!isCustomize);
                                   }}
                                 >
                                   Cutomize Email
@@ -1982,6 +2022,8 @@ function PlaceHolderSign() {
                   setSignersData={setSignersData}
                   blockColor={blockColor}
                   setBlockColor={setBlockColor}
+                  setIsAddSigner={setIsAddSigner}
+                  handleDeleteUser={handleDeleteUser}
                 />
               </div>
             ) : (
@@ -2007,6 +2049,9 @@ function PlaceHolderSign() {
                       blockColor={blockColor}
                       setBlockColor={setBlockColor}
                       isMailSend={isMailSend}
+                      setIsAddSigner={setIsAddSigner}
+                      handleDeleteUser={handleDeleteUser}
+                      roleName={roleName}
                       // handleAddSigner={handleAddSigner}
                     />
                     <div data-tut="reactourSecond">
@@ -2033,35 +2078,6 @@ function PlaceHolderSign() {
         )}
       </DndProvider>
       <div>
-        {/* <ModalUi
-          headerColor={"#dc3545"}
-          isOpen={signerExistModal}
-          title={"Users required"}
-          handleClose={() => {
-            setSignerExistModal(false);
-          }}
-        >
-          <div style={{ height: "100%", padding: 20 }}>
-            <p>Please assign signers to all placeholders</p>
-
-            <div
-              style={{
-                height: "1px",
-                backgroundColor: "#9f9f9f",
-                width: "100%",
-                marginTop: "15px",
-                marginBottom: "15px"
-              }}
-            ></div>
-            <button
-              onClick={() => setSignerExistModal(false)}
-              type="button"
-              className="finishBtn cancelBtn"
-            >
-              Close
-            </button>
-          </div>
-        </ModalUi> */}
         <ModalUi
           headerColor={"#dc3545"}
           isOpen={isAlreadyPlace.status}
@@ -2095,6 +2111,13 @@ function PlaceHolderSign() {
           isAddUser={isAddUser}
           uniqueId={uniqueId}
           closePopup={closePopup}
+          signersData={signersdata}
+        />
+        <LinkUserModal
+          handleAddUser={handleAddNewRecipients}
+          isAddSigner={isAddSigner}
+          closePopup={closePopup}
+          signersData={signersdata}
         />
         <WidgetNameModal
           widgetName={widgetName}

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -1001,7 +1001,6 @@ function SignYourSelf() {
             {/* this component used to render all pdf pages in left side */}
 
             <RenderAllPdfPage
-              pdfUrl={pdfUrl}
               signPdfUrl={pdfDetails[0] && pdfDetails[0].URL}
               allPages={allPages}
               setAllPages={setAllPages}