resolve minor ui issues

microfrontends/SignDocuments/src/Component/component/LinkUserModal.js

@@ -0,0 +1,53 @@
+import React from "react";
+import Modal from "react-bootstrap/Modal";
+import SelectSigners from "./SelectSigners";
+import AddUser from "./AddUser";
+
+const LinkUserModal = (props) => {
+  return (
+    <Modal show={props.isAddUser[props.uniqueId]}>
+      <Modal.Header
+        className={"bg-info"}
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }}
+      >
+        <span style={{ color: "white" }}>Add/Choose Signer</span>
+        <span
+          style={{ color: "white", cursor: "pointer" }}
+          onClick={() => props.closePopup()}
+        >
+          X
+        </span>
+      </Modal.Header>
+      <Modal.Body>
+        <SelectSigners
+          details={props.handleAddUser}
+          closePopup={props.closePopup}
+        />
+        <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
+          <span
+            style={{
+              height: 1,
+              width: "100%",
+              backgroundColor: "grey"
+            }}
+          ></span>
+          <span>OR</span>
+          <span
+            style={{
+              height: 1,
+              width: "100%",
+              backgroundColor: "grey"
+            }}
+          ></span>
+        </div>
+        <AddUser details={props.handleAddUser} closePopup={props.closePopup} />
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default LinkUserModal;

microfrontends/SignDocuments/src/Component/component/SelectSigners.js

@@ -1,7 +1,18 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import Parse from "parse";
 import "../../css/AddUser.css";
+import AsyncSelect from "react-select/async";
 
+const customStyles = {
+  control: (provided) => ({
+    ...provided,
+    fontSize: "13px" // Font size for the control
+  }),
+  option: (provided) => ({
+    ...provided,
+    fontSize: "13px" // Font size for the options
+  })
+};
 const SelectSigners = (props) => {
   const [userList, setUserList] = useState([]);
   const [selected, setSelected] = useState();
@@ -11,7 +22,22 @@ const SelectSigners = (props) => {
   Parse.serverURL = parseBaseUrl;
   Parse.initialize(parseAppId);
 
-  const GetUserList = async () => {
+  // `handleOptions` is used to set just save from quick form to selected option in dropdown
+  const handleOptions = (item) => {
+    setSelected(item);
+    const userData = userList.filter((x) => x.objectId === item.value);
+    if (userData.length > 0) {
+      setUserData(userData[0]);
+    }
+  };
+  const handleAdd = () => {
+    props.details(userData);
+    if (props.closePopup) {
+      props.closePopup();
+    }
+  };
+
+  const loadOptions = async (inputValue) => {
     try {
       const currentUser = Parse.User.current();
       const contactbook = new Parse.Query("contracts_Contactbook");
@@ -19,57 +45,40 @@ const SelectSigners = (props) => {
         "CreatedBy",
         Parse.User.createWithoutData(currentUser.id)
       );
+      if (inputValue.length > 1) {
+        contactbook.matches("Name", new RegExp(inputValue, "i"));
+      }
       contactbook.notEqualTo("IsDeleted", true);
       const contactRes = await contactbook.find();
       if (contactRes) {
         const res = JSON.parse(JSON.stringify(contactRes));
-        
-        console.log("userList ", res)
+        // console.log("userList ", res);
         setUserList(res);
+        return await res.map((item) => ({
+          label: item.Name,
+          value: item.objectId
+        }));
       }
     } catch (error) {
       console.log("err", error);
     }
   };
 
-  useEffect(() => {
-    GetUserList();
-  }, []);
-
-  // `handleOptions` is used to set just save from quick form to selected option in dropdown
-
-  const handleOptions = (e) => {
-    setSelected(e.target.value);
-    const userData = userList.filter((x) => x.objectId === e.target.value);
-    if(userData.length > 0){
-      setUserData(userData[0]);
-    }
-  };
-  const handleAdd = () => {
-    if (props.closePopup) {
-      props.closePopup();
-    }
-    console.log("userData ", userData)
-    props.details(userData);
-  };
   return (
     <div className="addusercontainer">
       <div className="form-wrapper">
         <div className="form-section">
           <label style={{ fontSize: 14 }}>Choose User</label>
-          <select
+          <AsyncSelect
+            cacheOptions
+            defaultOptions
             value={selected}
+            loadingMessage={() => "Loading..."}
+            noOptionsMessage={() => "User not Found"}
+            loadOptions={loadOptions}
             onChange={handleOptions}
-            className="addUserInput"
-          >
-            <option>select</option>
-            {userList.length > 0 &&
-              userList.map((x) => (
-                <option key={x.objectId} value={x.objectId}>
-                  {x.Name}
-                </option>
-              ))}
-          </select>
+            styles={customStyles}
+          />
         </div>
 
         <div className="buttoncontainer">

microfrontends/SignDocuments/src/Component/component/Title.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Helmet } from "react-helmet";
+
+function Title({ title }) {
+  return (
+    <Helmet>
+      <title>{`${title} - OpenSign™`}</title>
+      <meta name="description" content={`${title} - OpenSign™`} />
+      <link
+        rel="icon"
+        type="image/png"
+        href={localStorage.getItem("fev_Icon")}
+        sizes="40x40"
+      />
+    </Helmet>
+  );
+}
+
+export default Title;

microfrontends/SignDocuments/src/Component/component/fieldsComponent.js

@@ -32,7 +32,8 @@ function FieldsComponent({
   setIsShowEmail,
   isMailSend,
   selectedEmail,
-  setSelectedEmail
+  setSelectedEmail,
+  handleAddSigner
 }) {
   const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
 
@@ -158,7 +159,7 @@ function FieldsComponent({
                                 value={`${ind}|${JSON.stringify(obj)}`}
                                 // value={(obj)}
                               >
-                                {obj.Role ?obj.Role : obj.Email}
+                                {obj.Role ? obj.Role : obj.Email}
                               </SelectItem>
                             );
                           })}
@@ -181,6 +182,20 @@ function FieldsComponent({
                 </Select.Root>
               </div>
             )}
+            {handleAddSigner && (
+              <div
+                style={{
+                  margin: "5px 0 5px 0",
+                  backgroundColor: themeColor(),
+                  color: "white"
+                }}
+                className="addSignerBtn"
+                onClick={() => handleAddSigner()}
+              >
+                <i className="fa-solid fa-plus"></i>
+                <span style={{ marginLeft: 2 }}>Add</span>
+              </div>
+            )}
             <div
               data-tut={dataTut2}
               className="signLayoutContainer2"

microfrontends/SignDocuments/src/Component/component/header.js

@@ -34,7 +34,8 @@ function Header({
   dataTut4,
   alreadySign,
   isSignYourself,
-  setIsEmail
+  setIsEmail,
+  completeBtnTitle
 }) {
   const isMobile = window.innerWidth < 767;
   const navigate = useNavigate();
@@ -415,7 +416,7 @@ function Header({
                         }}
                         data-tut={dataTut4}
                       >
-                        Send
+                        {completeBtnTitle ? completeBtnTitle : "Send"}
                       </div>
                     ) : (
                       <div
@@ -573,7 +574,7 @@ function Header({
                   }}
                   className={isMailSend ? "sendMail" : "sendMail sendHover"}
                 >
-                  Send
+                  {completeBtnTitle ? completeBtnTitle : "Send"}
                 </button>
               </div>
             </>

microfrontends/SignDocuments/src/Component/component/signerListPlace.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import check from "../../assests/checkBox.png";
 import { themeColor } from "../../utils/ThemeColor/backColor";
 import "../../css/signerListPlace.css";
 
@@ -49,27 +48,26 @@ function SignerListPlace({
 
   //function for onhover signer name change background color
   const onHoverStyle = (ind, blockColor) => {
-    console.log("blockColor ", blockColor)
     const style = {
       background: blockColor ? blockColor : color[ind % color.length],
       padding: "10px",
       marginTop: "2px",
       display: "flex",
       flexDirection: "row",
-      borderBottom: "1px solid #e3e1e1"
+      borderBottom: "1px solid #e3e1e1",
+      alignItems: "center"
     };
     return style;
   };
   //function for onhover signer name remove background color
   const nonHoverStyle = (ind) => {
     const style = {
-      // width:"250px",
       padding: "10px",
       marginTop: "2px",
       display: "flex",
       flexDirection: "row",
       borderBottom: "1px solid #e3e1e1",
-      justifyContent: "space-between"
+      alignItems: "center"
     };
     return style;
   };
@@ -79,21 +77,27 @@ function SignerListPlace({
     return firstLetter;
   };
 
-  const darkenColor = ( color, factor ) => {
+  const darkenColor = (color, factor) => {
     // Remove '#' from the color code and parse it to get RGB values
-    const hex = color.replace('#', '');
+    const hex = color.replace("#", "");
     const r = parseInt(hex.substring(0, 2), 16);
     const g = parseInt(hex.substring(2, 4), 16);
     const b = parseInt(hex.substring(4, 6), 16);
-  
+
     // Darken the color by reducing each RGB component
     const darkerR = Math.floor(r * (1 - factor));
     const darkerG = Math.floor(g * (1 - factor));
     const darkerB = Math.floor(b * (1 - factor));
-  
+
     // Convert the darkened RGB components back to hex
-    return `#${(darkerR << 16 | darkerG << 8 | darkerB).toString(16).padStart(6, '0')}`;
-  }  
+    return `#${((darkerR << 16) | (darkerG << 8) | darkerB)
+      .toString(16)
+      .padStart(6, "0")}`;
+  };
+
+  const isWidgetExist = (Id) => {
+    return signerPos.some((x) => x.Id === Id);
+  };
 
   return (
     <div>
@@ -132,7 +136,8 @@ function SignerListPlace({
                   <div
                     style={{
                       display: "flex",
-                      flexDirection: "row"
+                      flexDirection: "row",
+                      alignItems: "center"
                     }}
                   >
                     <div
@@ -141,28 +146,33 @@ function SignerListPlace({
                         background: obj.blockColor
                           ? darkenColor(obj.blockColor, 0.4)
                           : nameColor[ind % nameColor.length],
-                        width: 20,
-                        height: 20,
+                        width: 30,
+                        height: 30,
                         display: "flex",
-                        borderRadius : 30 / 2,
+                        borderRadius: 30 / 2,
                         justifyContent: "center",
                         alignItems: "center",
-                        marginRight: "20px",
-                        marginTop: "5px"
+                        marginRight: "12px"
                       }}
                     >
                       <span
                         style={{
-                          fontSize: "8px",
+                          fontSize: "12px",
                           textAlign: "center",
                           fontWeight: "bold",
                           color: "white",
                           textTransform: "uppercase"
                         }}
                       >
-                        {obj.Name
-                          ? getFirstLetter(obj.Name)
-                          : getFirstLetter(obj.Role)}
+                        {isWidgetExist(obj.Id) ? (
+                          <i className="fa-solid fa-check"></i>
+                        ) : (
+                          <>
+                            {obj.Name
+                              ? getFirstLetter(obj.Name)
+                              : getFirstLetter(obj.Role)}
+                          </>
+                        )}
                       </span>
                     </div>
                     <div
@@ -205,20 +215,6 @@ function SignerListPlace({
                       <i className="fa-regular fa-trash-can"></i>
                     </div>
                   )}
-                  {signerPos.map((data, key) => {
-                    return (
-                      data.Id === obj.Id && (
-                        <div key={key}>
-                          <img
-                            alt="no img"
-                            src={check}
-                            width={20}
-                            height={20}
-                          />
-                        </div>
-                      )
-                    );
-                  })}
                   <hr />
                 </div>
               );