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

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/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

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -67,6 +67,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"
@@ -1527,8 +1528,28 @@ function PlaceHolderSign() {
     }
   };
 
+  //function to add new signer in document signers list
+  const handleAddNewRecipients = (data) => {
+    const newId = randomId();
+    const newRole = `User ${signersdata?.length + 1} `;
+
+    signersdata.push({
+      ...data,
+      className: "contracts_Contactbook",
+      Id: newId,
+      Role: newRole
+    });
+    setUniqueId(newId);
+    setIsSelectId(signersdata.length - 1);
+    setBlockColor(color[signersdata.length - 1]);
+    setRoleName(newRole);
+    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
@@ -1984,6 +2005,7 @@ function PlaceHolderSign() {
                   setSignersData={setSignersData}
                   blockColor={blockColor}
                   setBlockColor={setBlockColor}
+                  setIsAddSigner={setIsAddSigner}
                 />
               </div>
             ) : (
@@ -2009,6 +2031,7 @@ function PlaceHolderSign() {
                       blockColor={blockColor}
                       setBlockColor={setBlockColor}
                       isMailSend={isMailSend}
+                      setIsAddSigner={setIsAddSigner}
                       // handleAddSigner={handleAddSigner}
                     />
                     <div data-tut="reactourSecond">
@@ -2035,35 +2058,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}
@@ -2098,6 +2092,11 @@ function PlaceHolderSign() {
           uniqueId={uniqueId}
           closePopup={closePopup}
         />
+        <LinkUserModal
+          handleAddUser={handleAddNewRecipients}
+          isAddSigner={isAddSigner}
+          closePopup={closePopup}
+        />
         <WidgetNameModal
           widgetName={widgetName}
           defaultdata={currWidgetsDetails}

apps/OpenSign/src/primitives/LinkUserModal.js

@@ -7,7 +7,10 @@ const LinkUserModal = (props) => {
   return (
     <ModalUi
       title={"Add/Choose Signer"}
-      isOpen={props.isAddUser[props.uniqueId]}
+      isOpen={
+        props?.isAddSigner ||
+        (props?.isAddUser && props?.isAddUser[props?.uniqueId])
+      }
       handleClose={props.closePopup}
     >
       <SelectSigners