resolve minor ui issues

microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js

@@ -27,9 +27,9 @@ import {
 } from "../utils/Utils";
 import RenderPdf from "./component/renderPdf";
 import ModalComponent from "./component/modalComponent";
-import SelectSigners from "./component/SelectSigners";
-import AddUser from "./component/AddUser";
 import "../css/AddUser.css";
+import Title from "./component/Title";
+import LinkUserModal from "./component/LinkUserModal";
 const TemplatePlaceholder = () => {
   const navigate = useNavigate();
   const { templateId } = useParams();
@@ -151,6 +151,7 @@ const TemplatePlaceholder = () => {
   const [isModalRole, setIsModalRole] = useState(false);
   const [roleName, setRoleName] = useState("");
   const [isAddUser, setIsAddUser] = useState({});
+  const [isCreateDoc, setIsCreateDoc] = useState(false);
 
   const senderUser =
     localStorage.getItem(
@@ -206,12 +207,10 @@ const TemplatePlaceholder = () => {
         }
       }
     );
-    // console.log("templateDeatils.data ", templateDeatils.data);
     const documentData =
       templateDeatils.data && templateDeatils.data
         ? [templateDeatils.data]
         : [];
-    // console.log("documentData ", documentData)
     if (documentData && documentData.length > 0) {
       setPdfDetails(documentData);
       setIsSigners(true);
@@ -224,7 +223,7 @@ const TemplatePlaceholder = () => {
           documentData[0].Placeholders.length > 0
         ) {
           setSignerPos(documentData[0].Placeholders);
-          let signers = [...signersdata];
+          let signers = [...documentData[0].Signers];
           let updatedSigners = documentData[0].Placeholders.map((x) => {
             let matchingSigner = signers.find(
               (y) => x.signerObjId && x.signerObjId === y.objectId
@@ -263,12 +262,11 @@ const TemplatePlaceholder = () => {
           documentData[0].Placeholders.length > 0
         ) {
           let updatedSigners = documentData[0].Placeholders.map((x) => {
-              return {
-                Role: x.Role,
-                Id: x.Id,
-                blockColor: x.blockColor
-              };
-            
+            return {
+              Role: x.Role,
+              Id: x.Id,
+              blockColor: x.blockColor
+            };
           });
           setSignerPos(documentData[0].Placeholders);
           setUniqueId(updatedSigners[0].Id);
@@ -339,10 +337,8 @@ const TemplatePlaceholder = () => {
       getSignerPos(item, monitor);
     }
   };
-  console.log("signerdata ", signersdata)
 
   const getSignerPos = (item, monitor) => {
-    console.log("item ", item);
     const posZIndex = zIndex + 1;
     setZIndex(posZIndex);
     const newWidth = containerWH.width;
@@ -714,8 +710,6 @@ const TemplatePlaceholder = () => {
     };
     setIsLoading(loadObj);
     setIsSendAlert(false);
-    console.log("signerPos ", signerPos);
-
     let signers = [];
     if (signersdata?.length > 0) {
       signersdata.forEach((x) => {
@@ -838,14 +832,17 @@ const TemplatePlaceholder = () => {
       });
   };
   const handleCreateDocModal = async () => {
+    setIsCreateDocModal(false);
+    setIsCreateDoc(true);
     const hostUrl = getHostUrl();
     // handle create document
-    console.log("template ", pdfDetails);
     const res = await createDocument(pdfDetails, signerPos, signersdata);
     if (res.status === "success") {
       navigate(`${hostUrl}placeHolderSign/${res.id}`);
+      setIsCreateDoc(false);
     } else {
       setHandleError("Error: Something went wrong!");
+      setIsCreateDoc(false);
     }
   };
 
@@ -855,7 +852,6 @@ const TemplatePlaceholder = () => {
   };
   const handleAddRole = (e) => {
     e.preventDefault();
-    console.log("signerArr", signersdata.length);
     const count = signersdata.length > 0 ? signersdata.length + 1 : 1;
     const Id = randomId();
     const obj = {
@@ -912,6 +908,7 @@ const TemplatePlaceholder = () => {
 
   return (
     <div>
+      <Title title={"Template"} />
       <DndProvider backend={HTML5Backend}>
         {isLoading.isLoad ? (
           <Loader isLoading={isLoading} />
@@ -960,7 +957,7 @@ const TemplatePlaceholder = () => {
 
                 {/* signature modal */}
                 <Modal.Body>
-                  <p>Please Add field for all recipients.</p>
+                  <p>Please add field for all recipients.</p>
                 </Modal.Body>
 
                 <Modal.Footer>
@@ -1015,6 +1012,7 @@ const TemplatePlaceholder = () => {
                   )}
                 </Modal.Footer>
               </Modal>
+              {isCreateDoc && <Loader isLoading={isLoading} />}
               <ModalComponent
                 isShow={isShowEmail}
                 type={"signersAlert"}
@@ -1022,6 +1020,7 @@ const TemplatePlaceholder = () => {
               />
               {/* pdf header which contain funish back button */}
               <Header
+                completeBtnTitle={"Save"}
                 isPlaceholder={true}
                 pageNumber={pageNumber}
                 allPages={allPages}
@@ -1098,6 +1097,7 @@ const TemplatePlaceholder = () => {
                   isMailSend={isMailSend}
                   setSelectedEmail={setSelectedEmail}
                   selectedEmail={selectedEmail}
+                  handleAddSigner={handleAddSigner}
                 />
               </div>
             ) : (
@@ -1160,13 +1160,21 @@ const TemplatePlaceholder = () => {
                 }
                 className="addUserInput"
               />
+              <p
+                style={{
+                  color: "grey",
+                  fontSize: 11,
+                  margin: "2px 0 10px 5px"
+                }}
+              >
+                e.g: Account, Hr, Director, Manager, New joinee etc...
+              </p>
               <div>
                 <div
                   style={{
                     height: "1px",
                     backgroundColor: "#9f9f9f",
                     width: "100%",
-                    marginTop: "15px",
                     marginBottom: "15px"
                   }}
                 ></div>
@@ -1195,37 +1203,12 @@ const TemplatePlaceholder = () => {
         </Modal>
       </div>
       <div>
-        <div>
-          <Modal show={isAddUser[uniqueId]}>
-            <Modal.Header
-              className={"bg-info"}
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center"
-              }}
-            >
-              <span style={{ color: "white" }}>Add/choose user</span>
-              <span
-                style={{ color: "white", cursor: "pointer" }}
-                onClick={() => closePopup()}
-              >
-                X
-              </span>
-            </Modal.Header>
-            <Modal.Body>
-              {isAddUser && isAddUser[uniqueId] && (
-                <>
-                  <SelectSigners
-                    details={handleAddUser}
-                    closePopup={closePopup}
-                  />
-                  <AddUser details={handleAddUser} closePopup={closePopup} />
-                </>
-              )}
-            </Modal.Body>
-          </Modal>
-        </div>
+        <LinkUserModal
+          handleAddUser={handleAddUser}
+          isAddUser={isAddUser}
+          uniqueId={uniqueId}
+          closePopup={closePopup}
+        />
       </div>
     </div>
   );

microfrontends/SignDocuments/src/Component/placeHolderSign.js

@@ -28,8 +28,8 @@ import {
 import RenderPdf from "./component/renderPdf";
 import ModalComponent from "./component/modalComponent";
 import { useNavigate } from "react-router-dom";
-import AddUser from "./component/AddUser";
-import SelectSigners from "./component/SelectSigners";
+import LinkUserModal from "./component/LinkUserModal";
+import Title from "./component/Title";
 
 function PlaceHolderSign() {
   const navigate = useNavigate();
@@ -69,7 +69,6 @@ function PlaceHolderSign() {
   const [isShowEmail, setIsShowEmail] = useState(false);
   const [selectedEmail, setSelectedEmail] = useState(false);
   const [isResize, setIsResize] = useState(false);
-  const [isAlreadyPlace, setIsAlreadyPlace] = useState(false);
   const [zIndex, setZIndex] = useState(1);
   const [pdfLoadFail, setPdfLoadFail] = useState({
     status: false,
@@ -78,6 +77,7 @@ function PlaceHolderSign() {
   const [uniqueId, setUniqueId] = useState("");
   const [roleName, setRoleName] = useState("");
   const [isAddUser, setIsAddUser] = useState({});
+  const [signerExistModal, setSignerExistModal] = useState(false);
   const color = [
     "#93a3db",
     "#e6c3db",
@@ -215,7 +215,7 @@ function PlaceHolderSign() {
           documentData[0].Placeholders.length > 0
         ) {
           setSignerPos(documentData[0].Placeholders);
-          let signers = [...signersdata];
+          let signers = [...documentData[0].Signers];
           let updatedSigners = documentData[0].Placeholders.map((x) => {
             let matchingSigner = signers.find(
               (y) => x.signerObjId && x.signerObjId === y.objectId
@@ -254,12 +254,11 @@ function PlaceHolderSign() {
           documentData[0].Placeholders.length > 0
         ) {
           let updatedSigners = documentData[0].Placeholders.map((x) => {
-              return {
-                Role: x.Role,
-                Id: x.Id,
-                blockColor: x.blockColor
-              };
-            
+            return {
+              Role: x.Role,
+              Id: x.Id,
+              blockColor: x.blockColor
+            };
           });
           setSignerPos(documentData[0].Placeholders);
           setSignersData(updatedSigners);
@@ -693,11 +692,16 @@ function PlaceHolderSign() {
 
   const alertSendEmail = async () => {
     if (signerPos.length === signersdata.length) {
-      const alert = {
-        mssg: "confirm",
-        alert: true
-      };
-      setIsSendAlert(alert);
+      const IsSignerNotExist = signerPos?.some((x) => !x.signerObjId);
+      if (IsSignerNotExist) {
+        setSignerExistModal(true);
+      } else {
+        const alert = {
+          mssg: "confirm",
+          alert: true
+        };
+        setIsSendAlert(alert);
+      }
     } else {
       const alert = {
         mssg: "sure",
@@ -938,13 +942,9 @@ function PlaceHolderSign() {
   const closePopup = () => {
     setIsAddUser({});
   };
-
-  // console.log("isAddUser", isAddUser);
-  // console.log("signerdata", signersdata);
-  // console.log("signerPos", signerPos);
-
   return (
     <>
+      <Title title={"placeholder"} />
       <DndProvider backend={HTML5Backend}>
         {isLoading.isLoad ? (
           <Loader isLoading={isLoading} />
@@ -1006,7 +1006,7 @@ function PlaceHolderSign() {
                 {/* signature modal */}
                 <Modal.Body>
                   {isSendAlert.mssg === "sure" ? (
-                    <p>Please Add field for all recipients.</p>
+                    <p>Please add field for all recipients.</p>
                   ) : (
                     isSendAlert.mssg === "confirm" && (
                       <p>
@@ -1233,35 +1233,34 @@ function PlaceHolderSign() {
         )}
       </DndProvider>
       <div>
-        <Modal show={isAddUser[uniqueId]}>
-          <Modal.Header
-            className={"bg-info"}
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center"
-            }}
-          >
-            <span style={{ color: "white" }}>Add/choose user</span>
-            <span
-              style={{ color: "white", cursor: "pointer" }}
-              onClick={() => closePopup()}
-            >
-              X
-            </span>
+        <Modal show={signerExistModal}>
+          <Modal.Header className="bg-danger">
+            <span style={{ color: "white" }}>Users required</span>
           </Modal.Header>
+
+          {/* signature modal */}
           <Modal.Body>
-            {isAddUser && isAddUser[uniqueId] && (
-              <>
-                <SelectSigners
-                  details={handleAddUser}
-                  closePopup={closePopup}
-                />
-                <AddUser details={handleAddUser} closePopup={closePopup} />
-              </>
-            )}
+            <p>Please attach users to all fields</p>
           </Modal.Body>
+          <Modal.Footer>
+            <button
+              onClick={() => setSignerExistModal(false)}
+              style={{
+                color: "black"
+              }}
+              type="button"
+              className="finishBtn"
+            >
+              Close
+            </button>
+          </Modal.Footer>
         </Modal>
+        <LinkUserModal
+          handleAddUser={handleAddUser}
+          isAddUser={isAddUser}
+          uniqueId={uniqueId}
+          closePopup={closePopup}
+        />
       </div>
     </>
   );

microfrontends/SignDocuments/src/utils/Utils.js

@@ -1060,7 +1060,6 @@ export const createDocument = async (template, placeholders, signerData) => {
         }
       );
       if (res) {
-        console.log("res", res);
         return { status: "success", id: res.data.objectId };
       }
     } catch (err) {