Merge pull request #296 from OpenSignLabs/staging

sync fork

.all-contributorsrc

@@ -196,6 +196,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "VikramNagwal",
+      "name": "Vikram",
+      "avatar_url": "https://avatars.githubusercontent.com/u/123088024?v=4",
+      "profile": "https://github.com/VikramNagwal",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

.env.local_dev

@@ -45,14 +45,14 @@ DO_REGION=us-west
 USE_LOCAL=TRUE
 
 # Email mailgun or set SMTP_ENABLE true to use SMTP config (The app will not initialize if any of these 3 variables are not set) *********************************************************************************************************************
-MAILGUN_API_KEY=XXXXX
+MAILGUN_API_KEY=
 MAILGUN_DOMAIN=mail.yourdomain.com
 MAILGUN_SENDER=postmaster@mail.yourdomain.com
 SMTP_ENABLE=
-SMTP_HOST=
-SMTP_PORT=
-SMTP_USER_EMAIL=
-SMTP_PASS=
+SMTP_HOST=smtp.yourhost.com
+SMTP_PORT=443
+SMTP_USER_EMAIL=mailer@yourdomain.com
+SMTP_PASS=password
 
 
 # Base64 encoded PFX or p12 document signing certificate file *********************************************************************************************************************

README.md

@@ -131,6 +131,9 @@ We would like to thank all our contributors and users for their support and feed
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Govinda04"><img src="https://avatars.githubusercontent.com/u/50038172?v=4?s=100" width="100px;" alt="Govinda Kocharekar"/><br /><sub><b>Govinda Kocharekar</b></sub></a><br /><a href="#code-Govinda04" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://bilal.cc"><img src="https://avatars.githubusercontent.com/u/55330484?v=4?s=100" width="100px;" alt="Bilal Ahmad Bhat"/><br /><sub><b>Bilal Ahmad Bhat</b></sub></a><br /><a href="#code-crediblebilal" title="Code">💻</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/VikramNagwal"><img src="https://avatars.githubusercontent.com/u/123088024?v=4?s=100" width="100px;" alt="Vikram"/><br /><sub><b>Vikram</b></sub></a><br /><a href="#code-VikramNagwal" title="Code">💻</a></td>
+    </tr>
   </tbody>
 </table>
 

apps/OpenSign/public/version.txt

@@ -1 +0,0 @@
-v1.0.5-beta

apps/OpenSign/src/components/AppendFormInForm.js

@@ -46,6 +46,7 @@ const AppendFormInForm = (props) => {
   // Define a function to handle form submission
   const handleSubmit = async (e) => {
     e.preventDefault();
+    e.stopPropagation();
     setIsLoader(true);
     Parse.serverURL = parseBaseUrl;
     Parse.initialize(parseAppId);
@@ -105,13 +106,18 @@ const AppendFormInForm = (props) => {
           const res = await contactQuery.save();
 
           const parseData = JSON.parse(JSON.stringify(res));
-          props.details({
-            value: parseData[props.valueKey],
-            label: parseData[props.displayKey]
-          });
+          if (props.details) {
+            props.details({
+              value: parseData[props.valueKey],
+              label: parseData[props.displayKey]
+            });
+          }
           if (props.closePopup) {
             props.closePopup();
           }
+          if (props.handleUserData) {
+            props.handleUserData(parseData);
+          }
 
           setIsLoader(false);
           // Reset the form fields
@@ -158,13 +164,18 @@ const AppendFormInForm = (props) => {
           const res = await contactQuery.save();
 
           const parseData = JSON.parse(JSON.stringify(res));
-          props.details({
-            value: parseData[props.valueKey],
-            label: parseData[props.displayKey]
-          });
+          if (props.details) {
+            props.details({
+              value: parseData[props.valueKey],
+              label: parseData[props.displayKey]
+            });
+          }
           if (props.closePopup) {
             props.closePopup();
           }
+          if (props.handleUserData) {
+            props.handleUserData(parseData);
+          }
           setIsLoader(false);
           // Reset the form fields
           setAddYourself(false);

apps/OpenSign/src/components/TreeWidget.js

@@ -5,7 +5,7 @@ import Parse from "parse";
 import axios from "axios";
 import "../styles/spinner.css";
 import TreeFormComponent from "./TreeFormComponent";
-import TreeEditForm from "./TreeEditForm";
+// import TreeEditForm from "./TreeEditForm";
 import "../styles/modal.css";
 import Modal from "react-modal";
 
@@ -22,7 +22,7 @@ const TreeWidget = (props) => {
   const [schemaState, setSchemaState] = useState({});
   const [TabURL, setTabURL] = useState("");
   const [editable, setEditable] = useState(false);
-  const [editId, setEditId] = useState("");
+  // const [editId, setEditId] = useState("");
   const [defaultState, setDefaultState] = useState(false);
   const [isShowModal, setIsShowModal] = useState(false);
   const selectFolderHandle = async () => {

apps/OpenSign/src/components/fields/CreateFolder.js

@@ -0,0 +1,147 @@
+import React, { useEffect, useState } from "react";
+import Parse from "parse";
+import Alert from "../../primitives/Alert";
+
+const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
+  const folderPtr = {
+    __type: "Pointer",
+    className: folderCls,
+    objectId: parentFolderId
+  };
+  const [name, setName] = useState("");
+  const [folderList, setFolderList] = useState([]);
+  const [isAlert, setIsAlert] = useState(false);
+  const [selectedParent, setSelectedParent] = useState();
+  const [alert, setAlert] = useState({ type: "info", message: "" });
+  useEffect(() => {
+    fetchFolder();
+    // eslint-disable-next-line
+  }, []);
+
+  const fetchFolder = async () => {
+    try {
+      const FolderQuery = new Parse.Query(folderCls);
+      if (parentFolderId) {
+        FolderQuery.equalTo("Folder", folderPtr);
+        FolderQuery.equalTo("Type", "Folder");
+      } else {
+        FolderQuery.doesNotExist("Folder");
+        FolderQuery.equalTo("Type", "Folder");
+      }
+
+      const res = await FolderQuery.find();
+      if (res) {
+        const result = JSON.parse(JSON.stringify(res));
+        if (result) {
+          setFolderList(result);
+        }
+      }
+    } catch (error) {
+      console.log("Err ", error);
+    }
+  };
+  const handleCreateFolder = async (event) => {
+    event.preventDefault();
+    if (name) {
+      const currentUser = Parse.User.current();
+      const exsitQuery = new Parse.Query(folderCls);
+      exsitQuery.equalTo("Name", name);
+      exsitQuery.equalTo("Type", "Folder");
+      if (parentFolderId) {
+        exsitQuery.equalTo("Folder", folderPtr);
+      }
+      const templExist = await exsitQuery.first();
+      if (templExist) {
+        setAlert({ type: "dange", message: "Folder already exist!" });
+        setIsAlert(true);
+        setTimeout(() => {
+          setIsAlert(false);
+        }, 1000);
+      } else {
+        const template = new Parse.Object(folderCls);
+        template.set("Name", name);
+        template.set("Type", "Folder");
+
+        if (selectedParent) {
+          template.set("Folder", {
+            __type: "Pointer",
+            className: folderCls,
+            objectId: selectedParent
+          });
+        } else if (parentFolderId) {
+          template.set("Folder", folderPtr);
+        }
+        template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
+        const res = await template.save();
+        if (res) {
+          if (onSuccess) {
+            setAlert({
+              type: "success",
+              message: "Folder created successfully!"
+            });
+            setIsAlert(true);
+            setTimeout(() => {
+              setIsAlert(false);
+            }, 1000);
+            onSuccess(res);
+          }
+        }
+      }
+    } else {
+      setAlert({ type: "info", message: "Please fill folder name" });
+      setIsAlert(true);
+      setTimeout(() => {
+        setIsAlert(false);
+      }, 1000);
+    }
+  };
+  const handleOptions = (e) => {
+    setSelectedParent(e.target.value);
+  };
+  return (
+    <div>
+      {isAlert && <Alert type={alert.type}>{alert.message}</Alert>}
+      <div id="createFolder">
+        <h1 className="text-base font-semibold">Create Folder</h1>
+        <div className="text-xs mt-2">
+          <label className="block">
+            Name<span className="text-red-500 text-[13px]">*</span>
+          </label>
+          <input
+            className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+        </div>
+        <div className="text-xs mt-2">
+          <label className="block">Parent Folder</label>
+          <select
+            value={selectedParent}
+            onChange={handleOptions}
+            className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+          >
+            <option>select</option>
+            {folderList.length > 0 &&
+              folderList.map((x) => (
+                <option key={x.objectId} value={x.objectId}>
+                  {x.Name}
+                </option>
+              ))}
+          </select>
+        </div>
+        <div>
+          <button
+            onClick={handleCreateFolder}
+            className="flex items-center rounded p-2 bg-[#32a3ac] text-white mt-3"
+          >
+            <i className="fa-solid fa-plus mr-1"></i>
+            <span>Create</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateFolder;

apps/OpenSign/src/components/fields/DropboxChoose.js

@@ -41,7 +41,8 @@ export default function DropboxChooser({ children, onSuccess, onCancel }) {
     [onSuccess, onCancel]
   );
 
-  const handleChoose = useCallback(() => {
+  const handleChoose = useCallback((e) => {
+    e.preventDefault()
     if (window.Dropbox) {
       window.Dropbox.choose(options);
     }

apps/OpenSign/src/components/fields/FileUpload.js

@@ -258,7 +258,7 @@ const FileUpload = (props) => {
           <div className="flex gap-2 justify-center items-center">
             <div className="flex justify-between items-center px-2 py-[3px] w-full font-bold rounded border-[1px] border-[#ccc] text-gray-500 bg-white text-[13px]">
               <div className="break-all">
-                file selected : {props.formData.split("/")[3]}
+                file selected : {props.formData?.split("/")[3]?.split("_")[1]}
               </div>
               <div
                 onClick={() => {
@@ -271,10 +271,12 @@ const FileUpload = (props) => {
                 <i className="fa-solid fa-xmark"></i>
               </div>
             </div>
-            <DropboxChooser
-              onSuccess={dropboxSuccess}
-              onCancel={dropboxCancel}
-            />
+            {process.env.REACT_APP_DROPBOX_API_KEY && (
+              <DropboxChooser
+                onSuccess={dropboxSuccess}
+                onCancel={dropboxCancel}
+              />
+            )}
           </div>
         ) : (
           <div className="flex gap-2 justify-center items-center">
@@ -294,10 +296,12 @@ const FileUpload = (props) => {
               accept="application/pdf,application/vnd.ms-excel"
               onChange={onChange}
             />
-            <DropboxChooser
-              onSuccess={dropboxSuccess}
-              onCancel={dropboxCancel}
-            />
+            {process.env.REACT_APP_DROPBOX_API_KEY && (
+              <DropboxChooser
+                onSuccess={dropboxSuccess}
+                onCancel={dropboxCancel}
+              />
+            )}
           </div>
         )}
       </>

apps/OpenSign/src/components/fields/SelectFolder.js

@@ -0,0 +1,355 @@
+import React, { useEffect, useState } from "react";
+import Parse from "parse";
+import CreateFolder from "./CreateFolder";
+import ModalUi from "../../primitives/ModalUi";
+
+const SelectFolder = ({ required, onSuccess, folderCls }) => {
+  const [isOpen, SetIsOpen] = useState(false);
+  const [clickFolder, setClickFolder] = useState("");
+  const [selectFolder, setSelectedFolder] = useState({});
+  const [folderList, setFolderList] = useState([]);
+  const [tabList, setTabList] = useState([]);
+  const [isLoader, setIsLoader] = useState(false);
+  const [folderPath, setFolderPath] = useState("");
+  const [isAdd, setIsAdd] = useState(false);
+  useEffect(() => {
+    if (isOpen) {
+      setIsAdd(false);
+      setClickFolder({});
+      setFolderList([]);
+      setTabList([]);
+      fetchFolder();
+    }
+    // eslint-disable-next-line
+  }, [isOpen]);
+  const fetchFolder = async (folderPtr) => {
+    setIsLoader(true);
+    try {
+      const FolderQuery = new Parse.Query(folderCls);
+      if (folderPtr) {
+        FolderQuery.equalTo("Folder", folderPtr);
+        FolderQuery.equalTo("Type", "Folder");
+      } else {
+        FolderQuery.doesNotExist("Folder");
+        FolderQuery.equalTo("Type", "Folder");
+      }
+
+      const res = await FolderQuery.find();
+      if (res) {
+        const result = JSON.parse(JSON.stringify(res));
+        if (result) {
+          setFolderList(result);
+          setIsLoader(false);
+        }
+        setIsLoader(false);
+      }
+    } catch (error) {
+      setIsLoader(false);
+    }
+  };
+  const handleSelect = (item) => {
+    setFolderList([]);
+    setClickFolder({ ObjectId: item.objectId, Name: item.Name });
+    if (tabList.length > 0) {
+      const tab = tabList.some((x) => x.objectId === item.objectId);
+      if (!tab) {
+        setTabList((tabs) => [...tabs, item]);
+        const folderPtr = {
+          __type: "Pointer",
+          className: folderCls,
+          objectId: item.objectId
+        };
+        fetchFolder(folderPtr);
+      }
+    } else {
+      setTabList((tabs) => [...tabs, item]);
+      const folderPtr = {
+        __type: "Pointer",
+        className: folderCls,
+        objectId: item.objectId
+      };
+
+      fetchFolder(folderPtr);
+    }
+  };
+
+  const handleSubmit = () => {
+    let url = "Root";
+    tabList.forEach((t) => {
+      url = url + " / " + t.Name;
+    });
+    setFolderPath(url);
+    setSelectedFolder(clickFolder);
+    if (onSuccess) {
+      onSuccess(clickFolder);
+    }
+    SetIsOpen(false);
+  };
+  const handleCancel = () => {
+    SetIsOpen(false);
+    setClickFolder({});
+    setFolderList([]);
+    setTabList([]);
+  };
+
+  const removeTabListItem = async (e, i) => {
+    e.preventDefault();
+    // setEditable(false);
+    if (!isAdd) {
+      setIsLoader(true);
+      let folderPtr;
+      if (i) {
+        setFolderList([]);
+        let list = tabList.filter((itm, j) => {
+          if (j <= i) {
+            return itm;
+          }
+        });
+        let _len = list.length - 1;
+        folderPtr = {
+          __type: "Pointer",
+          className: folderCls,
+          objectId: list[_len].objectId
+        };
+        setTabList(list);
+      } else {
+        setClickFolder({});
+        setSelectedFolder({});
+        setFolderList([]);
+        setTabList([]);
+      }
+      fetchFolder(folderPtr);
+    }
+  };
+  const handleCreate = () => {
+    setIsAdd(!isAdd);
+  };
+  const handleAddFolder = () => {
+    setFolderList([]);
+    if (clickFolder && clickFolder.ObjectId) {
+      fetchFolder({
+        __type: "Pointer",
+        className: folderCls,
+        objectId: clickFolder.ObjectId
+      });
+    } else {
+      fetchFolder();
+    }
+  };
+  return (
+    <div className="text-xs mt-2 ">
+      <div>
+        <label className="block">
+          Select Folder
+          {required && <span className="text-red-500 text-[13px]">*</span>}
+        </label>
+      </div>
+      <div className="rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
+        <div>
+          <i
+            className="far fa-folder-open text-[40px] text-[#33bbff]"
+            style={{ fontSize: "40px" }}
+            aria-hidden="true"
+          ></i>
+        </div>
+        <div className="font-semibold ">
+          <div className="flex items-center gap-2">
+            <p>
+              {selectFolder && selectFolder.Name ? selectFolder.Name : "Root"}
+            </p>
+            <div className="text-black text-sm" onClick={() => SetIsOpen(true)}>
+              <i
+                className="fa fa-pencil"
+                title="Select Folder"
+                aria-hidden="true"
+              ></i>
+            </div>
+          </div>
+          <p className="text-[10px] text-gray-400">
+            {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
+          </p>
+        </div>
+      </div>
+      <ModalUi
+        title={"Select Folder"}
+        isOpen={isOpen}
+        handleClose={handleCancel}
+      >
+        <div className="w-full min-w-[300px] md:min-w-[500px] px-3">
+          <div className="py-2 text-[#ac4848] text-[14px] font-[500]">
+            <span
+              className="cursor-pointer"
+              title="Root"
+              onClick={(e) => removeTabListItem(e)}
+            >
+              Root /{" "}
+            </span>
+            {tabList &&
+              tabList.map((tab, i) => (
+                <React.Fragment key={`${tab.objectId}-${i}`}>
+                  <span
+                    className="cursor-pointer"
+                    title={tab.Name}
+                    onClick={(e) => removeTabListItem(e, i)}
+                  >
+                    {tab.Name}
+                  </span>
+                  {" / "}
+                </React.Fragment>
+              ))}
+            <hr />
+          </div>
+          <div className="mt-2 mb-3">
+            {!isAdd &&
+              folderList.length > 0 &&
+              folderList.map((folder) => (
+                <div
+                  key={folder.Name}
+                  className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer"
+                  onClick={() => handleSelect(folder)}
+                >
+                  <div className="flex items-center gap-2">
+                    <i
+                      className="fa fa-folder text-[#33bbff] text-[1.4rem]"
+                      aria-hidden="true"
+                    ></i>
+                    <span className="font-semibold">{folder.Name}</span>
+                  </div>
+                </div>
+              ))}
+            {isAdd && (
+              <CreateFolder
+                parentFolderId={clickFolder && clickFolder.ObjectId}
+                folderCls={folderCls}
+                onSuccess={handleAddFolder}
+              />
+            )}
+            {isLoader && (
+              <div className="flex justify-center">
+                <i className="fa-solid fa-spinner fa-spin-pulse text-[30px]"></i>
+              </div>
+            )}
+          </div>
+        </div>
+        <hr />
+        <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
+          <div
+            className="text-[30px] cursor-pointer text-[#32a3ac]"
+            title="Save Here"
+            onClick={handleCreate}
+          >
+            {isAdd ? (
+              <i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
+            ) : (
+              <i className="fa-solid fa-square-plus" aria-hidden="true"></i>
+            )}
+          </div>
+          <div
+            className="text-[30px] cursor-pointer"
+            title="Save Here"
+            onClick={handleSubmit}
+          >
+            <i className="fas fa-save" aria-hidden="true"></i>
+          </div>
+        </div>
+      </ModalUi>
+      {/* {isOpen && (
+        <div
+          className={`fixed z-40 top-20 left-1/2 transform -translate-x-1/2 border-[1px] text-sm bg-white rounded `}
+        >
+          <div className="flex justify-between items-center py-[.75rem] px-[1.25rem] bg-[#f5f5f5]">
+            <div className="font-semibold text-lg text-black">
+              Select Folder
+            </div>
+            <div
+              onClick={handleCancel}
+              className="px-2 py-1 border-[1px] border-[#8a8a8a] bg-white rounded cursor-pointer"
+            >
+              <i className="fa-solid fa-xmark"></i>
+            </div>
+          </div>
+          <hr />
+          <div className="w-full min-w-[300px] md:min-w-[500px] px-3">
+            <div className="py-2 text-[#ac4848] text-[14px] font-[500]">
+              <span
+                className="cursor-pointer"
+                title="Root"
+                onClick={(e) => removeTabListItem(e)}
+              >
+                Root /{" "}
+              </span>
+              {tabList &&
+                tabList.map((tab, i) => (
+                  <React.Fragment key={`${tab.objectId}-${i}`}>
+                    <span
+                      className="cursor-pointer"
+                      title={tab.Name}
+                      onClick={(e) => removeTabListItem(e, i)}
+                    >
+                      {tab.Name}
+                    </span>
+                    {" / "}
+                  </React.Fragment>
+                ))}
+              <hr />
+            </div>
+            <div className="mt-2 mb-3">
+              {!isAdd &&
+                folderList.length > 0 &&
+                folderList.map((folder) => (
+                  <div
+                    key={folder.Name}
+                    className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer"
+                    onClick={() => handleSelect(folder)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <i
+                        className="fa fa-folder text-[#33bbff] text-[1.4rem]"
+                        aria-hidden="true"
+                      ></i>
+                      <span className="font-semibold">{folder.Name}</span>
+                    </div>
+                  </div>
+                ))}
+              {isAdd && (
+                <CreateFolder
+                  parentFolderId={clickFolder && clickFolder.ObjectId}
+                  folderCls={folderCls}
+                  onSuccess={handleAddFolder}
+                />
+              )}
+              {isLoader && (
+                <div className="flex justify-center">
+                  <i className="fa-solid fa-spinner fa-spin-pulse text-[30px]"></i>
+                </div>
+              )}
+            </div>
+          </div>
+          <hr />
+          <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
+            <div
+              className="text-[30px] cursor-pointer text-[#33bbff]"
+              title="Save Here"
+              onClick={handleCreate}
+            >
+              {isAdd ? (
+                <i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
+              ) : (
+                <i className="fa-solid fa-square-plus" aria-hidden="true"></i>
+              )}
+            </div>
+            <div
+              className="text-[30px] cursor-pointer"
+              title="Save Here"
+              onClick={handleSubmit}
+            >
+              <i className="fas fa-save" aria-hidden="true"></i>
+            </div>
+          </div>
+        </div>
+      )} */}
+    </div>
+  );
+};
+
+export default SelectFolder;

apps/OpenSign/src/components/fields/SignersInput.js

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from "react";
+import Select from "react-select";
+import AppendFormInForm from "../AppendFormInForm";
+import Modal from "react-modal";
+import Parse from "parse";
+function arrayMove(array, from, to) {
+  array = array.slice();
+  array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
+  return array;
+}
+
+/**
+ * react-sortable-hoc is depcreated not usable from react 18.x.x
+ *  need to replace it with @dnd-kit
+ * code changes required
+ */
+
+const SignersInput = (props) => {
+  Modal.setAppElement("body");
+  const [state, setState] = useState(undefined);
+  // const [editFormData, setEditFormData] = useState([]);
+  const [selected, setSelected] = React.useState([]);
+  const [isModal, setIsModel] = useState(false);
+  const onChange = (selectedOptions) => setSelected(selectedOptions);
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+
+  const onSortEnd = ({ oldIndex, newIndex }) => {
+    const newValue = arrayMove(selected, oldIndex, newIndex);
+    setSelected(newValue);
+  };
+
+  const GetSelectListData = async () => {
+    try {
+      const currentUser = Parse.User.current();
+      const contactbook = new Parse.Query("contracts_Contactbook");
+      contactbook.equalTo(
+        "CreatedBy",
+        Parse.User.createWithoutData(currentUser.id)
+      );
+      contactbook.notEqualTo("IsDeleted", true);
+      const contactRes = await contactbook.find();
+      if (contactRes) {
+        const res = JSON.parse(JSON.stringify(contactRes));
+        let list = [];
+
+        // let _selected = [];
+        res.forEach((x) => {
+          let obj = {
+            label: x.Name,
+            value: x.objectId,
+            isChecked: true
+          };
+
+          list.push(obj);
+        });
+        setState(list);
+      }
+    } catch (error) {
+      console.log("err", error);
+    }
+  };
+
+  useEffect(() => {
+    GetSelectListData();
+  }, []);
+
+  useEffect(() => {
+    if (selected && selected.length) {
+      let newData = [];
+      selected.forEach((x) => {
+        newData.push(x.value);
+      });
+      if (props.onChange) {
+        props.onChange(newData);
+      }
+    }
+
+    // eslint-disable-next-line
+  }, [selected]);
+
+  const handleModalCloseClick = () => {
+    setIsModel(false);
+    setModalIsOpen(false);
+  };
+
+  const openModal = () => {
+    setModalIsOpen(true);
+  };
+
+  // `handleNewDetails` is used to set just save from quick form to selected option in dropdown
+  const handleNewDetails = (data) => {
+    setState([...state, data]);
+    if (selected.length > 0) {
+      setSelected([...selected, data]);
+    } else {
+      setSelected([data]);
+    }
+  };
+
+  return (
+    <div className="text-xs mt-2 ">
+      <label className="block">
+        Signers
+        {props.required && <span className="text-red-500 text-[13px]">*</span>}
+      </label>
+      <div style={{ display: "flex", gap: 5 }}>
+        <div style={{ flexWrap: "wrap", width: "100%" }}>
+          <Select
+            onSortEnd={onSortEnd}
+            distance={4}
+            isMulti
+            options={state || []}
+            value={selected}
+            onChange={onChange}
+            closeMenuOnSelect={false}
+          />
+        </div>
+        <div
+          onClick={() => {
+            setIsModel(true);
+            openModal();
+          }}
+          style={{
+            cursor: "pointer",
+            borderRadius: 4,
+            border: "1px solid #ccc",
+            minHeight: 38,
+            minWidth: 48,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          }}
+        >
+          <i className="fas fa-plus"></i>
+        </div>
+        <Modal
+          isOpen={modalIsOpen}
+          onRequestClose={handleModalCloseClick}
+          shouldCloseOnOverlayClick={false}
+          id="modal1"
+          contentLabel="Modal"
+          style={{
+            content: {
+              top: "50%",
+              left: "50%",
+              right: "auto",
+              bottom: "auto",
+              transform: "translate(-50%, -50%)",
+              padding: 0
+            },
+            overlay: {
+              width: "100%",
+              backgroundColor: "rgba(0, 0, 0, 0.75)",
+              zIndex: 50
+            }
+          }}
+        >
+          <div className="min-w-full md:min-w-[500px]">
+            <div
+              type="button"
+              className="flex justify-between items-center p-3 border-b-[1px] border-gray-300"
+            >
+              <div className=" text-black text-xl font-semibold pl-3">
+                Add Signer
+              </div>
+              <button onClick={handleModalCloseClick}>
+                <i
+                  style={{ fontSize: 25 }}
+                  className="fa fa-times-circle"
+                  aria-hidden="true"
+                ></i>
+              </button>
+            </div>
+
+            {isModal && (
+              <AppendFormInForm
+                valueKey={"objectId"}
+                displayKey={"Name"}
+                details={handleNewDetails}
+                closePopup={handleModalCloseClick}
+              />
+            )}
+          </div>
+        </Modal>
+      </div>
+    </div>
+  );
+};
+
+export default SignersInput;

apps/OpenSign/src/constant/const.js

@@ -0,0 +1,2 @@
+export const contactCls = "contracts_Contactbook";
+export const templateCls = "contracts_Template";

apps/OpenSign/src/index.css

@@ -4,4 +4,15 @@
 
 body{
     background-color: white;
-}
+}
+
+/* Custom CSS to hide scrollbar */
+.hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  
+.hide-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+  

apps/OpenSign/src/json/FormJson.js

@@ -113,7 +113,7 @@ export const formJson = (id) => {
     });
     formData = {
       jsonSchema: {
-        title: "New Document",
+        title: "Request signatures",
         description: "",
         type: "object",
         required: ["URL", "Name", "Note", "TimeToCompleteDays", "Signers"],

apps/OpenSign/src/json/ReportJson.js

@@ -1,7 +1,9 @@
 export default function reportJson(id) {
   // console.log("json ", json);
-  const head = ["Sr.No", "Name", "Note", "Folder", "File", "Owner", "Signers"];
-  const contactbook = ["Sr.No", "Name", "Email", "Phone"];
+  const head = ["Sr.No", "Title", "Note", "Folder", "File", "Owner", "Signers"];
+  const contactbook = ["Sr.No", "Title", "Email", "Phone"];
+  const dashboardReportHead = ["Title", "File", "Owner", "Signers"];
+
   switch (id) {
     // draft documents report
     case "ByHuevtCFY":
@@ -103,7 +105,7 @@ export default function reportJson(id) {
     case "d9k3UfYHBc":
       return {
         reportName: "Recently sent for signatures",
-        heading: head,
+        heading: dashboardReportHead,
         actions: [
           {
             btnLabel: "View",
@@ -119,7 +121,7 @@ export default function reportJson(id) {
     case "5Go51Q7T8r":
       return {
         reportName: "Recent signature requests",
-        heading: head,
+        heading: dashboardReportHead,
         actions: [
           {
             btnLabel: "Sign",
@@ -135,7 +137,7 @@ export default function reportJson(id) {
     case "kC5mfynCi4":
       return {
         reportName: "Drafts",
-        heading: head,
+        heading: ["Title", "Note", "Folder", "File", "Owner", "Signers"],
         actions: [
           {
             btnLabel: "sign",
@@ -159,6 +161,31 @@ export default function reportJson(id) {
             textColor: "white",
             btnIcon: "fa-solid fa-trash"
           }
+        ],
+        form: "ContactBook"
+      };
+    // template report
+    case "6TeaPr321t":
+      return {
+        reportName: "Templates",
+        heading: head,
+        actions: [
+          {
+            btnLabel: "Use",
+            btnColor: "#4bd396",
+            textColor: "white",
+            btnIcon: "fa fa-plus",
+            redirectUrl:
+              "remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/placeHolderSign"
+          },
+          {
+            btnLabel: "Edit",
+            btnColor: "#00c9d5",
+            textColor: "white",
+            btnIcon: "fa fa-plus",
+            redirectUrl:
+              "remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/template"
+          }
         ]
       };
     default:

apps/OpenSign/src/primitives/Alert.js

@@ -0,0 +1,30 @@
+import React from "react";
+
+const Alert = ({ children, type }) => {
+  const textcolor = type ? theme(type) : theme();
+  function theme(color) {
+    switch (color) {
+      case "success":
+        return "border-[#c3e6cb] bg-[#d4edda] text-[#155724]";
+      case "info":
+        return "border-[#adcdeb] bg-[#c1daf0] text-[#153756]";
+      case "danger":
+        return "border-[#f0a8a8] bg-[#f4bebe] text-[#c42121]";
+      default:
+        return "border-[#d6d6d6] bg-[#d9d9d9] text-[#575757]";
+    }
+  }
+  return (
+    <>
+      {children && (
+        <div
+          className={`z-40 fixed top-20 left-1/2 transform -translate-x-1/2 border-[1px] text-sm ${textcolor} rounded py-[.75rem] px-[1.25rem] `}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Alert;

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -3,6 +3,8 @@ import pad from "../assets/images/pad.svg";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import "../styles/report.css";
+import ModalUi from "./ModalUi";
+import AppendFormInForm from "../components/AppendFormInForm";
 const ReportTable = ({
   ReportName,
   List,
@@ -11,13 +13,15 @@ const ReportTable = ({
   heading,
   setIsNextRecord,
   isMoreDocs,
-  docPerPage
+  docPerPage,
+  form
 }) => {
   const navigate = useNavigate();
   const [currentPage, setCurrentPage] = useState(1);
   const [actLoader, setActLoader] = useState({});
   const [isAlert, setIsAlert] = useState(false);
   const [isErr, setIsErr] = useState(false);
+  const [isPopup, setIsPopup] = useState(false);
   // For loop is used to calculate page numbers visible below table
   // Initialize pageNumbers using useMemo to avoid unnecessary re-creation
   const pageNumbers = useMemo(() => {
@@ -55,10 +59,109 @@ const ReportTable = ({
   }, [isMoreDocs, pageNumbers, currentPage, setIsNextRecord]);
 
   // `handlemicroapp` is used to open microapp
-  const handlemicroapp = (item, url) => {
-    localStorage.removeItem("rowlevel");
-    navigate("/rpmf/" + url);
-    localStorage.setItem("rowlevel", JSON.stringify(item));
+  const handlemicroapp = async (item, url, btnLabel) => {
+    if (ReportName === "Templates") {
+      if (btnLabel === "Edit") {
+        navigate(`/asmf/${url}/${item.objectId}`);
+      } else {
+        setActLoader({ [item.objectId]: true });
+        try {
+          const params = {
+            templateId: item.objectId
+          };
+          const templateDeatils = await axios.post(
+            `${localStorage.getItem("baseUrl")}functions/getTemplate`,
+            params,
+            {
+              headers: {
+                "Content-Type": "application/json",
+                "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+                sessionToken: localStorage.getItem("accesstoken")
+              }
+            }
+          );
+
+          // console.log("templateDeatils.data ", templateDeatils.data);
+          const templateData =
+            templateDeatils.data && templateDeatils.data.result;
+          if (!templateData.error) {
+            const Doc = templateData;
+
+            let placeholdersArr = [];
+            if (Doc.Placeholders?.length > 0) {
+              placeholdersArr = Doc.Placeholders;
+            }
+            let signers = [];
+            if (Doc.Signers?.length > 0) {
+              Doc.Signers?.forEach((x) => {
+                if (x.objectId) {
+                  const obj = {
+                    __type: "Pointer",
+                    className: "contracts_Contactbook",
+                    objectId: x.objectId
+                  };
+                  signers.push(obj);
+                }
+              });
+            }
+            const data = {
+              Name: Doc.Name,
+              URL: Doc.URL,
+              SignedUrl: Doc.SignedUrl,
+              Description: Doc.Description,
+              Note: Doc.Note,
+              Placeholders: placeholdersArr,
+              ExtUserPtr: {
+                __type: "Pointer",
+                className: "contracts_Users",
+                objectId: Doc.ExtUserPtr.objectId
+              },
+              CreatedBy: {
+                __type: "Pointer",
+                className: "_User",
+                objectId: Doc.CreatedBy.objectId
+              },
+              Signers: signers
+            };
+
+            const res = await axios.post(
+              `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+                "_appName"
+              )}_Document`,
+              data,
+              {
+                headers: {
+                  "Content-Type": "application/json",
+                  "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+                  "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+                }
+              }
+            );
+
+            // console.log("Res ", res.data);
+            if (res.data && res.data.objectId) {
+              setActLoader({});
+              setIsAlert(true);
+              navigate(`/asmf/${url}/${res.data.objectId}`);
+            }
+          } else {
+            setIsAlert(true);
+            setIsErr(true);
+            setActLoader({});
+          }
+        } catch (err) {
+          console.log("err", err);
+          setIsAlert(true);
+          setIsErr(true);
+          setActLoader({});
+        }
+      }
+    } else {
+      localStorage.removeItem("rowlevel");
+      navigate("/rpmf/" + url);
+      localStorage.setItem("rowlevel", JSON.stringify(item));
+    }
+
     // localStorage.setItem("rowlevelMicro");
   };
   const handlebtn = async (item) => {
@@ -101,6 +204,13 @@ const ReportTable = ({
   const paginateFront = () => setCurrentPage(currentPage + 1);
   const paginateBack = () => setCurrentPage(currentPage - 1);
 
+  const handlePopup = () => {
+    setIsPopup(!isPopup);
+  };
+
+  const handleUserData = (data) => {
+    setList((prevData) => [data, ...prevData]);
+  };
   return (
     <div className="p-2 overflow-x-scroll w-full bg-white rounded-md">
       {isAlert && (
@@ -115,7 +225,14 @@ const ReportTable = ({
         </div>
       )}
 
-      <h2 className="text-[23px] font-light my-2">{ReportName}</h2>
+      <div className="flex flex-row items-center justify-between my-2 mx-3 text-[20px] md:text-[23px]">
+        <div className="font-light">{ReportName}</div>
+        {form && (
+          <div className="cursor-pointer" onClick={() => handlePopup()}>
+            <i className="fa-solid fa-square-plus text-sky-400 text-[25px]"></i>
+          </div>
+        )}
+      </div>
       <table className="table-auto w-full border-collapse">
         <thead className="text-[14px]">
           <tr className="border-y-[1px]">
@@ -135,7 +252,9 @@ const ReportTable = ({
               {currentLists.map((item, index) =>
                 ReportName === "Contactbook" ? (
                   <tr className="border-y-[1px]" key={index}>
-                    <td className="px-4 py-2">{index + 1}</td>
+                    {heading.includes("Sr.No") && (
+                      <td className="px-4 py-2">{index + 1}</td>
+                    )}
                     <td className="px-4 py-2 font-semibold">{item?.Name} </td>
                     <td className="px-4 py-2">{item?.Email || "-"}</td>
                     <td className="px-4 py-2">{item?.Phone || "-"}</td>
@@ -179,12 +298,18 @@ const ReportTable = ({
                   </tr>
                 ) : (
                   <tr className="border-y-[1px]" key={index}>
-                    <td className="px-4 py-2">{index + 1}</td>
+                    {heading.includes("Sr.No") && (
+                      <td className="px-4 py-2">{index + 1}</td>
+                    )}
                     <td className="px-4 py-2 font-semibold">{item?.Name} </td>
-                    <td className="px-4 py-2">{item?.Note || "-"}</td>
-                    <td className="px-4 py-2">
-                      {item?.Folder?.Name || "OpenSignDrive"}
-                    </td>
+                    {heading.includes("Note") && (
+                      <td className="px-4 py-2">{item?.Note || "-"}</td>
+                    )}
+                    {heading.includes("Folder") && (
+                      <td className="px-4 py-2">
+                        {item?.Folder?.Name || "OpenSignDrive"}
+                      </td>
+                    )}
                     <td className="px-4 py-2">
                       <a
                         target="_blank"
@@ -209,7 +334,11 @@ const ReportTable = ({
                             key={index}
                             onClick={() =>
                               act?.redirectUrl
-                                ? handlemicroapp(item, act.redirectUrl)
+                                ? handlemicroapp(
+                                    item,
+                                    act.redirectUrl,
+                                    act.btnLabel
+                                  )
                                 : handlebtn(item)
                             }
                             className={`flex justify-center items-center w-full gap-1 px-2 py-1 rounded shadow`}
@@ -235,7 +364,6 @@ const ReportTable = ({
                               {act?.btnLabel ? act.btnLabel : "view"}
                             </span>
                           </button>
-                          // )
                         ))}
                     </td>
                   </tr>
@@ -293,6 +421,12 @@ const ReportTable = ({
           <div className="text-sm font-semibold">No Data Available</div>
         </div>
       )}
+      <ModalUi title={"Add Contact"} isOpen={isPopup} handleClose={handlePopup}>
+        <AppendFormInForm
+          handleUserData={handleUserData}
+          closePopup={handlePopup}
+        />
+      </ModalUi>
     </div>
   );
 };

apps/OpenSign/src/primitives/Modal.js

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+
+const Modal = ({ children, Title }) => {
+  const [isOpen, SetIsOpen] = useState(false);
+  return (
+    <>
+      {children && (
+        <div
+          className={`fixed top-20 left-1/2 transform -translate-x-1/2 border-[1px] text-sm bg-white rounded `}
+        >
+          <div className="flex justify-between items-center py-[.75rem] px-[1.25rem] ">
+            <div className="font-semibold text-xl text-black">{Title}</div>
+            <div
+              onClick={() => SetIsOpen()}
+              className="px-2 py-1 bg-gray-400 rounded cursor-pointer"
+            >
+              <i className="fa-solid fa-xmark"></i>
+            </div>
+          </div>
+          <hr />
+          {isOpen && <div>{children}</div>}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Modal;

apps/OpenSign/src/primitives/ModalUi.js

@@ -0,0 +1,26 @@
+import React from "react";
+const ModalUi = ({ children, title, isOpen, handleClose }) => {
+
+  return (
+    <>
+      {isOpen && (
+        <div className="fixed z-[999] top-0 left-0 w-[100%] h-[100%] bg-black bg-opacity-[75%]">
+          <div className="fixed z-[1000] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 md:min-w-[500px] overflow-y-auto hide-scrollbar">
+            <div className="flex justify-between bg-[#32a3ac] rounded-t items-center py-[10px] px-[20px] text-white">
+              <div className="text-[1.2rem] font-normal">{title}</div>
+              <div
+                className="text-[1.5rem] cursor-pointer"
+                onClick={() => handleClose && handleClose()}
+              >
+                &times;
+              </div>
+            </div>
+            <div >{children}</div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ModalUi;

apps/OpenSign/src/primitives/TemplateForm.js

@@ -0,0 +1,322 @@
+import React, { useState } from "react";
+import sanitizeFileName from "./sanitizeFileName";
+import Parse from "parse";
+import DropboxChooser from "../components/fields/DropboxChoose";
+import Alert from "./Alert";
+import SelectFolder from "../components/fields/SelectFolder";
+// import SignersInput from "../components/fields/SignersInput";
+import Title from "../components/Title";
+import { useNavigate } from "react-router-dom";
+import { templateCls } from "../constant/const";
+
+const TemplateForm = () => {
+  const navigate = useNavigate();
+  const [signers, setSigners] = useState([]);
+  const [folder, setFolder] = useState({ ObjectId: "", Name: "" });
+  const [formData, setFormData] = useState({
+    Name: "",
+    Description: "",
+    Note: "Please review and sign this document"
+  });
+  const [fileupload, setFileUpload] = useState([]);
+  const [fileload, setfileload] = useState(false);
+  const [percentage, setpercentage] = useState(0);
+  const [isAlert, setIsAlert] = useState(false);
+  const handleStrInput = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleFileInput = (e) => {
+    setpercentage(0);
+    try {
+      let files = e.target.files;
+      if (typeof files[0] !== "undefined") {
+        const mb = Math.round(files[0].bytes / Math.pow(1024, 2));
+        if (mb > 10) {
+          alert(
+            `The selected file size is too large. Please select a file less than ${Math.round(
+              10
+            )} MB`
+          );
+          return;
+        }
+
+        handleFileUpload(files[0]);
+      } else {
+        alert("Please select file.");
+        return false;
+      }
+    } catch (error) {
+      alert(error.message);
+      return false;
+    }
+  };
+
+  const handleFileUpload = async (file) => {
+    Parse.serverURL = process.env.REACT_APP_SERVERURL;
+    Parse.initialize(process.env.REACT_APP_APPID);
+    setfileload(true);
+    const fileName = file.name;
+    const name = sanitizeFileName(fileName);
+    const pdfFile = file;
+    const parseFile = new Parse.File(name, pdfFile);
+
+    try {
+      const response = await parseFile.save({
+        progress: (progressValue, loaded, total, { type }) => {
+          if (type === "upload" && progressValue !== null) {
+            const percentCompleted = Math.round((loaded * 100) / total);
+            setpercentage(percentCompleted);
+          }
+        }
+      });
+
+      // The response object will contain information about the uploaded file
+      // You can access the URL of the uploaded file using response.url()
+      setFileUpload(response.url());
+      setfileload(false);
+      if (response.url()) {
+        return response.url();
+      }
+    } catch (error) {
+      setfileload(false);
+      setpercentage(0);
+      console.error("Error uploading file:", error);
+    }
+  };
+
+  const dropboxSuccess = async (files) => {
+    setfileload(true);
+    const file = files[0];
+    const url = file.link;
+    const mb = Math.round(file.bytes / Math.pow(1024, 2));
+
+    if (mb > 10) {
+      setTimeout(() => {
+        alert(
+          `The selected file size is too large. Please select a file less than 10 MB`
+        );
+      }, 500);
+      return;
+    } else {
+      const name = sanitizeFileName(file.name);
+
+      const parseFile = new Parse.File(name, { uri: url });
+
+      try {
+        const response = await parseFile.save({
+          progress: (progressValue, loaded, total, { type }) => {
+            if (type === "upload" && progressValue !== null) {
+              const percentCompleted = Math.round((loaded * 100) / total);
+              setpercentage(percentCompleted);
+            }
+          }
+        });
+        setFileUpload(response.url());
+        setfileload(false);
+
+        if (response.url()) {
+          return response.url();
+        }
+      } catch (error) {
+        setfileload(false);
+        setpercentage(0);
+        console.error("Error uploading file:", error);
+      }
+    }
+  };
+  const dropboxCancel = async () => {};
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const currentUser = Parse.User.current();
+      const template = new Parse.Object(templateCls);
+      Object.entries(formData).forEach((item) =>
+        template.set(item[0], item[1])
+      );
+      template.set("URL", fileupload);
+      template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
+      if (folder && folder.ObjectId) {
+        template.set("Folder", {
+          __type: "Pointer",
+          className: templateCls,
+          objectId: folder.ObjectId
+        });
+      }
+      if (signers && signers.length > 0) {
+        template.set("Signers", signers);
+      }
+      const ExtCls = JSON.parse(localStorage.getItem("Extand_Class"));
+      template.set("ExtUserPtr", {
+        __type: "Pointer",
+        className: "contracts_Users",
+        objectId: ExtCls[0].objectId
+      });
+
+      const res = await template.save();
+      if (res) {
+        setIsAlert(true);
+        setTimeout(() => {
+          setIsAlert(false);
+        }, 1000);
+        setSigners([]);
+        setFolder({ ObjectId: "", Name: "" });
+        setFormData({
+          Name: "",
+          Description: "",
+          Note: ""
+        });
+        setFileUpload([]);
+        setpercentage(0);
+        navigate(
+          "/asmf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/template/" +
+            res.id
+        );
+      }
+    } catch (err) {
+      console.log("err ", err);
+      setIsAlert(true);
+    }
+  };
+
+  const handleFolder = (data) => {
+    setFolder(data);
+  };
+  // const handleSigners = (data) => {
+  //   if (data && data.length > 0) {
+  //     const updateSigners = data.map((x) => ({
+  //       __type: "Pointer",
+  //       className: "contracts_Contactbook",
+  //       objectId: x
+  //     }));
+  //     setSigners(updateSigners);
+  //   }
+  // };
+
+  const handleReset = () => {
+    setSigners([]);
+    setFolder({ ObjectId: "", Name: "" });
+    setFormData({
+      Name: "",
+      Description: "",
+      Note: ""
+    });
+    setFileUpload([]);
+    setpercentage(0);
+  };
+  return (
+    <div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
+      <Title title="New Template" />
+      {isAlert && <Alert type="success">Template created successfully!</Alert>}
+      <form onSubmit={handleSubmit}>
+        <h1 className="text-[20px] font-semibold mb-4">New Template</h1>
+        {fileload && (
+          <div className="flex items-center gap-x-2">
+            <div className="h-2 rounded-full w-[200px] md:w-[400px] bg-gray-200">
+              <div
+                className="h-2 rounded-full bg-blue-500"
+                style={{ width: `${percentage}%` }}
+              ></div>
+            </div>
+            <span className="text-black text-sm">{percentage}%</span>
+          </div>
+        )}
+        <div className="text-xs">
+          <label className="block">
+            File<span className="text-red-500 text-[13px]">*</span>
+          </label>
+          {fileupload.length > 0 ? (
+            <div className="flex gap-2 justify-center items-center">
+              <div className="flex justify-between items-center px-2 py-2 w-full font-bold rounded border-[1px] border-[#ccc] text-gray-500 bg-white text-[13px]">
+                <div className="break-all">
+                  file selected : {fileupload?.split("/")[3]?.split("_")[1]}
+                </div>
+                <div
+                  onClick={() => {
+                    setFileUpload([]);
+                  }}
+                  className="cursor-pointer px-[10px] text-[20px] font-bold bg-white text-red-500"
+                >
+                  <i className="fa-solid fa-xmark"></i>
+                </div>
+              </div>
+              {process.env.REACT_APP_DROPBOX_API_KEY && (
+                <DropboxChooser
+                  onSuccess={dropboxSuccess}
+                  onCancel={dropboxCancel}
+                />
+              )}
+            </div>
+          ) : (
+            <div className="flex gap-2 justify-center items-center">
+              <input
+                type="file"
+                className="bg-white px-2 py-1.5 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                onChange={(e) => handleFileInput(e)}
+                accept="application/pdf,application/vnd.ms-excel"
+                required
+              />
+              {process.env.REACT_APP_DROPBOX_API_KEY && (
+                <DropboxChooser
+                  onSuccess={dropboxSuccess}
+                  onCancel={dropboxCancel}
+                />
+              )}
+            </div>
+          )}
+        </div>
+        <div className="text-xs mt-2">
+          <label className="block">
+            Title<span className="text-red-500 text-[13px]">*</span>
+          </label>
+          <input
+            name="Name"
+            className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+            value={formData.Name}
+            onChange={(e) => handleStrInput(e)}
+            required
+          />
+        </div>
+        <div className="text-xs mt-2">
+          <label className="block">
+            Note<span className="text-red-500 text-[13px]">*</span>
+          </label>
+          <input
+            name="Note"
+            className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+            value={formData.Note}
+            onChange={(e) => handleStrInput(e)}
+            required
+          />
+        </div>
+        <div className="text-xs mt-2">
+          <label className="block">Description</label>
+          <input
+            name="Description"
+            className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+            value={formData.Description}
+            onChange={(e) => handleStrInput(e)}
+          />
+        </div>
+        {/* <SignersInput onChange={handleSigners} /> */}
+        <SelectFolder onSuccess={handleFolder} folderCls={templateCls} />
+        <div className="flex items-center mt-3 gap-2 text-white">
+          <button
+            className="bg-[#1ab6ce] rounded-sm shadow-md text-[14px] font-semibold uppercase text-white py-1.5 px-2.5 focus:outline-none"
+            type="submit"
+          >
+            Submit
+          </button>
+          <div
+            className="bg-[#188ae2] rounded-sm shadow-md text-[14px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
+            onClick={() => handleReset()}
+          >
+            Reset
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default TemplateForm;

apps/OpenSign/src/routes/Form.js

@@ -25,6 +25,7 @@ import TreeWidget from "../components/TreeWidget";
 import parse from "html-react-parser";
 import Title from "../components/Title";
 import { formJson } from "../json/FormJson";
+import TemplateForm from "../primitives/TemplateForm";
 const widget = {
   TimeWidget: TimeWidget
 };
@@ -41,15 +42,19 @@ const fields = () => {
 function FormBuilderFn(props) {
   const { id } = useParams();
   const navigate = useNavigate();
-  return (
-    <FormBuilder
-      removeState={props.removeState}
-      removeLevel2State={props.removeLevel2State}
-      removeLevel3State={props.removeLevel3State}
-      id={id}
-      navigate={navigate}
-    />
-  );
+  if (id === "template") {
+    return <TemplateForm />;
+  } else {
+    return (
+      <FormBuilder
+        removeState={props.removeState}
+        removeLevel2State={props.removeLevel2State}
+        removeLevel3State={props.removeLevel3State}
+        id={id}
+        navigate={navigate}
+      />
+    );
+  }
 }
 class FormBuilder extends Component {
   state = {

apps/OpenSign/src/routes/Report.js

@@ -15,6 +15,7 @@ const Report = () => {
   const [heading, setHeading] = useState([]);
   const [isNextRecord, setIsNextRecord] = useState(false);
   const [isMoreDocs, setIsMoreDocs] = useState(true);
+  const [form, setForm]= useState("")
   const abortController = new AbortController();
   const docPerPage = 10;
 
@@ -50,6 +51,7 @@ const Report = () => {
       setActions(json.actions);
       setHeading(json.heading);
       setReportName(json.reportName);
+      setForm(json.form)
       Parse.serverURL = localStorage.getItem("BaseUrl12");
       Parse.initialize(localStorage.getItem("AppID12"));
       const currentUser = Parse.User.current().id;
@@ -154,6 +156,7 @@ const Report = () => {
               setIsNextRecord={setIsNextRecord}
               isMoreDocs={isMoreDocs}
               docPerPage={docPerPage}
+              form={form}
             />
           ) : (
             <div className="flex items-center justify-center h-screen w-full bg-white rounded">

apps/OpenSignServer/cloud/main.js

@@ -17,6 +17,8 @@ import getUserDetails from './parsefunction/getUserDetails.js';
 import getDocument from './parsefunction/getDocument.js';
 import getDrive from './parsefunction/getDrive.js';
 import getReport from './parsefunction/getReport.js';
+import TemplateAfterSave from './parsefunction/TemplateAfterSave.js';
+import GetTemplate from './parsefunction/GetTemplate.js';
 
 Parse.Cloud.define('AddUserToRole', addUserToGroups);
 Parse.Cloud.define('UserGroups', getUserGroups);
@@ -26,9 +28,6 @@ Parse.Cloud.define('googlesign', GoogleSign);
 Parse.Cloud.define('zohodetails', ZohoDetails);
 Parse.Cloud.define('usersignup', usersignup);
 Parse.Cloud.define('facebooksign', FacebookSign);
-Parse.Cloud.afterSave('contracts_Document', DocumentAftersave);
-Parse.Cloud.afterSave('contracts_Contactbook', ContactbookAftersave);
-Parse.Cloud.afterSave('contracts_Users', ContractUsersAftersave);
 Parse.Cloud.define('SendOTPMailV1', sendMailOTPv1);
 Parse.Cloud.define('sendmail', SendMailv1);
 Parse.Cloud.define('AuthLoginAsMail', AuthLoginAsMail);
@@ -36,4 +35,9 @@ Parse.Cloud.define('getUserId', getUserId);
 Parse.Cloud.define('getUserDetails', getUserDetails);
 Parse.Cloud.define('getDocument', getDocument);
 Parse.Cloud.define('getDrive', getDrive)
-Parse.Cloud.define('getReport', getReport)
+Parse.Cloud.define('getReport', getReport)
+Parse.Cloud.define("getTemplate", GetTemplate)
+Parse.Cloud.afterSave('contracts_Document', DocumentAftersave);
+Parse.Cloud.afterSave('contracts_Contactbook', ContactbookAftersave);
+Parse.Cloud.afterSave('contracts_Users', ContractUsersAftersave);
+Parse.Cloud.afterSave("contracts_Template", TemplateAfterSave)

apps/OpenSignServer/cloud/parsefunction/GetTemplate.js

@@ -0,0 +1,53 @@
+import axios from 'axios';
+
+export default async function GetTemplate(request) {
+  const serverUrl = process.env.SERVER_URL;
+  const templateId = request.params.templateId;
+
+  try {
+    const userRes = await axios.get(serverUrl + '/users/me', {
+      headers: {
+        'X-Parse-Application-Id': process.env.APP_ID,
+        'X-Parse-Session-Token': request.headers['sessiontoken'],
+      },
+    });
+    const userId = userRes.data && userRes.data.objectId;
+    // console.log("templateId ", templateId)
+    // console.log("userId ",userId)
+    if (templateId && userId) {
+      try {
+        const template = new Parse.Query('contracts_Template');
+        template.equalTo('objectId', templateId);
+        template.include('ExtUserPtr');
+        template.include('Signers');
+        template.include('CreateBy');
+        const res = await template.first({ useMasterKey: true });
+        // console.log("res ", res)
+        if (res) {
+          // console.log("res ",res)
+          const acl = res.getACL();
+          console.log("acl", acl.getReadAccess(userId))
+          if (acl && acl.getReadAccess(userId)) {
+            return res;
+          } else {
+            return { error: "You don't have access of this document!" };
+          }
+        } else {
+          return { error: "You don't have access of this document!" };
+        }
+      } catch (err) {
+        console.log('err', err);
+        return err;
+      }
+    } else {
+      return { error: 'Please pass required parameters!' };
+    }
+  } catch (err) {
+    console.log('err', err);
+    if (err.code == 209) {
+      return { error: 'Invalid session token' };
+    } else {
+      return { error: "You don't have access of this document!" };
+    }
+  }
+}

apps/OpenSignServer/cloud/parsefunction/TemplateAfterSave.js

@@ -0,0 +1,83 @@
+export default async function TemplateAfterSave(request) {
+  try {
+    if (!request.original) {
+      console.log('new entry is insert in contracts_Template');
+      // update acl of New Document If There are signers present in array
+      const signers = request.object.get('Signers');
+
+      if (signers && signers.length > 0) {
+        await updateAclDoc(request.object.id);
+      } else {
+        await updateSelfDoc(request.object.id);
+      }
+    } else {
+      if (request.user) {
+        const signers = request.object.get('Signers');
+        if (signers && signers.length > 0) {
+          await updateAclDoc(request.object.id);
+        } else {
+          await updateSelfDoc(request.object.id);
+        }
+      }
+    }
+  } catch (err) {
+    console.log('err in aftersave of contracts_Template');
+    console.log(err);
+  }
+
+  async function updateAclDoc(objId) {
+    // console.log("In side updateAclDoc func")
+    // console.log(objId)
+    const Query = new Parse.Query('contracts_Template');
+    Query.include('Signers');
+    const updateACL = await Query.get(objId, { useMasterKey: true });
+    const res = JSON.parse(JSON.stringify(updateACL));
+    // console.log("res");
+    // console.log(JSON.stringify(res));
+    const UsersPtr = res.Signers.map(item => item.UserId);
+
+    if (res.Signers[0].ExtUserPtr) {
+      const ExtUserSigners = res.Signers.map(item => {
+        return {
+          __type: 'Pointer',
+          className: 'contracts_Users',
+          objectId: item.ExtUserPtr.objectId,
+        };
+      });
+      updateACL.set('Signers', ExtUserSigners);
+    }
+
+    // console.log("UsersPtr")
+    // console.log(JSON.stringify(UsersPtr))
+    const newACL = new Parse.ACL();
+    newACL.setPublicReadAccess(false);
+    newACL.setPublicWriteAccess(false);
+    newACL.setReadAccess(request.user, true);
+    newACL.setWriteAccess(request.user, true);
+
+    UsersPtr.forEach(x => {
+      newACL.setReadAccess(x.objectId, true);
+      newACL.setWriteAccess(x.objectId, true);
+    });
+
+    updateACL.setACL(newACL);
+    updateACL.save(null, { useMasterKey: true });
+  }
+
+  async function updateSelfDoc(objId) {
+    // console.log("Inside updateSelfDoc func")
+    
+    const Query = new Parse.Query('contracts_Template');
+    const updateACL = await Query.get(objId, { useMasterKey: true });
+    // const res = JSON.parse(JSON.stringify(updateACL));
+    // console.log("res");
+    // console.log(JSON.stringify(res));
+    const newACL = new Parse.ACL();
+    newACL.setPublicReadAccess(false);
+    newACL.setPublicWriteAccess(false);
+    newACL.setReadAccess(request.user, true);
+    newACL.setWriteAccess(request.user, true);
+    updateACL.setACL(newACL);
+    updateACL.save(null, { useMasterKey: true });
+  }
+}

apps/OpenSignServer/cloud/parsefunction/getDocument.js

@@ -40,7 +40,7 @@ export default async function getDocument(request) {
       return { error: 'Please pass required parameters!' };
     }
   } catch (err) {
-    console.log('err');
+    console.log('err', err);
     if (err.code == 209) {
       return { error: 'Invalid session token' };
     } else {

apps/OpenSignServer/cloud/parsefunction/getReport.js

@@ -19,7 +19,7 @@ export default async function getReport(request) {
     const userId = userRes.data && userRes.data.objectId;
     if (userId) {
       const json = reportId && reportJson(reportId, userId);
-      const clsName = reportId === '5KhaPr482K' ? 'contracts_Contactbook' : 'contracts_Document';
+      const clsName = json?.reportClass ? json.reportClass : 'contracts_Document';
       if (json) {
         const { params, keys } = json;
         const orderBy = '-updatedAt';

apps/OpenSignServer/cloud/parsefunction/reportsJson.js

@@ -32,6 +32,18 @@ export default function reportJson(id, userId) {
             $gt: { __type: 'Date', iso: new Date().toISOString() },
           },
           Placeholders: { $ne: null },
+          Signers: {
+            $inQuery: {
+              where: {
+                UserId: {
+                  __type: 'Pointer',
+                  className: '_User',
+                  objectId: currentUserId,
+                },
+              },
+              className: 'contracts_Contactbook',
+            },
+          },
         },
         keys: [
           'Name',
@@ -154,7 +166,7 @@ export default function reportJson(id, userId) {
             $gt: { __type: 'Date', iso: new Date().toISOString() },
           },
         },
-        keys: ['Name', 'Note', 'Folder.Name', 'URL', 'ExtUserPtr.Name', 'Signers.Name'],
+        keys: ['Name', 'Folder.Name', 'URL', 'ExtUserPtr.Name', 'Signers.Name'],
       };
     //  Recent signature requests report show on dashboard
     case '5Go51Q7T8r':
@@ -168,17 +180,20 @@ export default function reportJson(id, userId) {
             $gt: { __type: 'Date', iso: new Date().toISOString() },
           },
           Placeholders: { $ne: null },
+          Signers: {
+            $inQuery: {
+              where: {
+                UserId: {
+                  __type: 'Pointer',
+                  className: '_User',
+                  objectId: currentUserId,
+                },
+              },
+              className: 'contracts_Contactbook',
+            },
+          },
         },
-        keys: [
-          'Name',
-          'Note',
-          'Folder.Name',
-          'URL',
-          'ExtUserPtr.Name',
-          'Signers.Name',
-          'Signers.UserId',
-          'AuditTrail',
-        ],
+        keys: ['Name', 'URL', 'ExtUserPtr.Name', 'Signers.Name', 'Signers.UserId', 'AuditTrail'],
       };
     // Drafts report show on dashboard
     case 'kC5mfynCi4':
@@ -202,6 +217,7 @@ export default function reportJson(id, userId) {
     case '5KhaPr482K':
       return {
         reportName: 'Contactbook',
+        reportClass: 'contracts_Contactbook',
         params: {
           CreatedBy: {
             __type: 'Pointer',
@@ -212,6 +228,21 @@ export default function reportJson(id, userId) {
         },
         keys: ['Name', 'Email', 'Phone'],
       };
+    // Templates report
+    case '6TeaPr321t':
+      return {
+        reportName: 'Templates',
+        reportClass: 'contracts_Template',
+        params: {
+          Type: { $ne: 'Folder' },
+          CreatedBy: {
+            __type: 'Pointer',
+            className: '_User',
+            objectId: currentUserId,
+          },
+        },
+        keys: ['Name', 'Note', 'Folder.Name', 'URL', 'ExtUserPtr.Name', 'Signers.Name'],
+      };
     default:
       return null;
   }

apps/OpenSignServer/databases/migrations/20231129103946-update_menu.cjs

@@ -38,7 +38,7 @@ exports.up = async Parse => {
           pageType: 'form',
           description: '',
           objectId: '8mZzFxbG1z',
-        },
+        }
       ],
     },
     {

apps/OpenSignServer/databases/migrations/20231208132950-update_template_menu.cjs

@@ -0,0 +1,572 @@
+/**
+ *
+ * @param {Parse} Parse
+ */
+exports.up = async Parse => {
+  const className = 'w_menu';
+  const userMenu = new Parse.Query(className);
+  const updateUserMenu = await userMenu.get('H9vRfEYKhT');
+  updateUserMenu.set('menuItems', [
+    {
+      icon: 'fas fa-tachometer-alt',
+      title: 'Dashboard',
+      target: '',
+      pageType: 'dashboard',
+      description: '',
+      objectId: '35KBoSgoAK',
+    },
+    {
+      icon: 'far fa-newspaper',
+      title: 'New Document',
+      target: '_self',
+      pageType: null,
+      description: null,
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-nib',
+          title: 'Sign yourself',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'sHAnZphf69',
+        },
+        {
+          icon: 'fas fa-file-signature',
+          title: 'Request signatures',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: '8mZzFxbG1z',
+        },
+        {
+          icon: 'fas fa-file-signature',
+          title: 'New template',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'template',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-file-signature',
+      title: 'Templates',
+      target: '_self',
+      pageType: 'report',
+      description: '',
+      objectId: '6TeaPr321t',
+    },
+    {
+      icon: 'fas fa-folder',
+      title: 'OpenSignDrive™',
+      target: '_self',
+      pageType: 'mf',
+      description: '',
+      objectId:
+        'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive',
+    },
+    {
+      icon: 'fas fa-address-card',
+      title: 'Reports',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-signature',
+          title: 'Need your sign',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '4Hhwbp482K',
+        },
+        {
+          icon: 'fas fa-tasks',
+          title: 'In Progress',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '1MwEuxLEkF',
+        },
+        {
+          icon: 'fas fa-check-circle',
+          title: 'Completed',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'kQUoW4hUXz',
+        },
+        {
+          icon: 'fas fa-edit',
+          title: 'Drafts',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'ByHuevtCFY',
+        },
+        {
+          icon: 'fas fa-times-circle',
+          title: 'Declined',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'UPr2Fm5WY3',
+        },
+        {
+          icon: 'fas fa-hourglass-end',
+          title: 'Expired',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'zNqBHXHsYH',
+        },
+        {
+          icon: 'fa-solid fa-address-book',
+          title: 'Contactbook',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '5KhaPr482K',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-cog',
+      title: 'Settings',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-fancy',
+          title: 'My Signature',
+          target: '_self',
+          pageType: 'mf',
+          description: '',
+          objectId:
+            'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/managesign',
+        },
+      ],
+    },
+  ]);
+
+  const AdminMenu = new Parse.Query(className);
+  const updateAdminMenu = await AdminMenu.get('VPh91h0ZHk');
+  updateAdminMenu.set('menuItems', [
+    {
+      icon: 'fas fa-tachometer-alt',
+      title: 'Dashboard',
+      target: '',
+      pageType: 'dashboard',
+      description: '',
+      objectId: '35KBoSgoAK',
+    },
+    {
+      icon: 'far fa-newspaper',
+      title: 'New Document',
+      target: '_self',
+      pageType: null,
+      description: null,
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-nib',
+          title: 'Sign yourself',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'sHAnZphf69',
+        },
+        {
+          icon: 'fas fa-file-signature',
+          title: 'Request signatures',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: '8mZzFxbG1z',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-folder',
+      title: 'OpenSignDrive™',
+      target: '_self',
+      pageType: 'mf',
+      description: '',
+      objectId:
+        'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive',
+    },
+    {
+      icon: 'fas fa-address-card',
+      title: 'Reports',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-signature',
+          title: 'Need your sign',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '4Hhwbp482K',
+        },
+        {
+          icon: 'fas fa-tasks',
+          title: 'In Progress',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '1MwEuxLEkF',
+        },
+        {
+          icon: 'fas fa-check-circle',
+          title: 'Completed',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'kQUoW4hUXz',
+        },
+        {
+          icon: 'fas fa-edit',
+          title: 'Drafts',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'ByHuevtCFY',
+        },
+        {
+          icon: 'fas fa-times-circle',
+          title: 'Declined',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'UPr2Fm5WY3',
+        },
+        {
+          icon: 'fas fa-hourglass-end',
+          title: 'Expired',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'zNqBHXHsYH',
+        },
+        {
+          icon: 'fa-solid fa-address-book',
+          title: 'Contactbook',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '5KhaPr482K',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-cog',
+      title: 'Settings',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-fancy',
+          title: 'My Signature',
+          target: '_self',
+          pageType: 'mf',
+          description: '',
+          objectId:
+            'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/managesign',
+        },
+        {
+          icon: 'far fa-user',
+          title: 'Add User',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'lM0xRnM3iE',
+        },
+      ],
+    },
+  ]);
+  // TODO: Set the schema here
+  // Example:
+  // schema.addString('name').addNumber('cash');
+  const batch = [updateUserMenu, updateAdminMenu];
+  return Parse.Object.saveAll(batch, { useMasterKey: true });
+};
+
+/**
+ *
+ * @param {Parse} Parse
+ */
+exports.down = async Parse => {
+  // TODO: set className here
+  const className = 'w_menu';
+  const userMenu = new Parse.Query(className);
+  const revertUserMenu = await userMenu.get('H9vRfEYKhT');
+  revertUserMenu.set('menuItems', [
+    {
+      icon: 'fas fa-tachometer-alt',
+      title: 'Dashboard',
+      target: '',
+      pageType: 'dashboard',
+      description: '',
+      objectId: '35KBoSgoAK',
+    },
+    {
+      icon: 'far fa-newspaper',
+      title: 'New Document',
+      target: '_self',
+      pageType: null,
+      description: null,
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-nib',
+          title: 'Sign yourself',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'sHAnZphf69',
+        },
+        {
+          icon: 'fas fa-file-signature',
+          title: 'Request signatures',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: '8mZzFxbG1z',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-folder',
+      title: 'OpenSignDrive™',
+      target: '_self',
+      pageType: 'mf',
+      description: '',
+      objectId:
+        'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive',
+    },
+    {
+      icon: 'fas fa-address-card',
+      title: 'Reports',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-signature',
+          title: 'Need your sign',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '4Hhwbp482K',
+        },
+        {
+          icon: 'fas fa-tasks',
+          title: 'In Progress',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '1MwEuxLEkF',
+        },
+        {
+          icon: 'fas fa-check-circle',
+          title: 'Completed',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'kQUoW4hUXz',
+        },
+        {
+          icon: 'fas fa-edit',
+          title: 'Drafts',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'ByHuevtCFY',
+        },
+        {
+          icon: 'fas fa-times-circle',
+          title: 'Declined',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'UPr2Fm5WY3',
+        },
+        {
+          icon: 'fas fa-hourglass-end',
+          title: 'Expired',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'zNqBHXHsYH',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-cog',
+      title: 'Settings',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-fancy',
+          title: 'My Signature',
+          target: '_self',
+          pageType: 'mf',
+          description: '',
+          objectId:
+            'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/managesign',
+        },
+      ],
+    },
+  ]);
+
+  const adminMenu = new Parse.Query(className);
+  const revertAdminMenu = await adminMenu.get('VPh91h0ZHk');
+  revertAdminMenu.set('menuItems', [
+    {
+      icon: 'fas fa-tachometer-alt',
+      title: 'Dashboard',
+      target: '',
+      pageType: 'dashboard',
+      description: '',
+      objectId: '35KBoSgoAK',
+    },
+    {
+      icon: 'far fa-newspaper',
+      title: 'New Document',
+      target: '_self',
+      pageType: null,
+      description: null,
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-nib',
+          title: 'Sign yourself',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'sHAnZphf69',
+        },
+        {
+          icon: 'fas fa-file-signature',
+          title: 'Request signatures',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: '8mZzFxbG1z',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-folder',
+      title: 'OpenSignDrive™',
+      target: '_self',
+      pageType: 'mf',
+      description: '',
+      objectId:
+        'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive',
+    },
+    {
+      icon: 'fas fa-address-card',
+      title: 'Reports',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-signature',
+          title: 'Need your sign',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '4Hhwbp482K',
+        },
+        {
+          icon: 'fas fa-tasks',
+          title: 'In Progress',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '1MwEuxLEkF',
+        },
+        {
+          icon: 'fas fa-check-circle',
+          title: 'Completed',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'kQUoW4hUXz',
+        },
+        {
+          icon: 'fas fa-edit',
+          title: 'Drafts',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'ByHuevtCFY',
+        },
+        {
+          icon: 'fas fa-times-circle',
+          title: 'Declined',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'UPr2Fm5WY3',
+        },
+        {
+          icon: 'fas fa-hourglass-end',
+          title: 'Expired',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'zNqBHXHsYH',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-cog',
+      title: 'Settings',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-fancy',
+          title: 'My Signature',
+          target: '_self',
+          pageType: 'mf',
+          description: '',
+          objectId:
+            'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/managesign',
+        },
+        {
+          icon: 'far fa-user',
+          title: 'Add User',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'lM0xRnM3iE',
+        },
+      ],
+    },
+  ]);
+  // TODO: Set the schema here
+  // Example:
+  // schema.addString('name').addNumber('cash');
+  const batch = [revertUserMenu, revertAdminMenu];
+  return Parse.Object.saveAll(batch, { useMasterKey: true });
+};

apps/OpenSignServer/databases/migrations/20231220171155-create_template_cls.cjs

@@ -0,0 +1,40 @@
+/**
+ *
+ * @param {Parse} Parse
+ */
+exports.up = async Parse => {
+  const className = 'contracts_Template';
+  const schema = new Parse.Schema(className);
+
+  schema.addString('Name');
+  schema.addString('URL');
+  schema.addString('Note');
+  schema.addString('Description');
+  schema.addArray('Signers');
+  schema.addBoolean('IsArchive');
+  schema.addArray('Placeholders');
+  schema.addPointer('Folder', 'contracts_Template');
+  schema.addString('Type');
+  schema.addPointer('CreatedBy', '_User');
+  schema.addPointer('ExtUserPtr', 'contracts_Users');
+  schema.addBoolean('EnablePhoneOTP')
+  schema.addBoolean('EnableEmailOTP')
+  schema.addBoolean('SendinOrder')
+  schema.addBoolean('SentToOthers')
+  schema.addBoolean('AutomaticReminders')
+
+
+
+  return schema.save();
+};
+
+/**
+ *
+ * @param {Parse} Parse
+ */
+exports.down = async Parse => {
+  const className = 'contracts_Template';
+  const schema = new Parse.Schema(className);
+
+  return schema.purge().then(() => schema.delete());
+};

apps/OpenSignServer/index.js

@@ -69,7 +69,9 @@ if (process.env.SMTP_ENABLE) {
 export const config = {
   databaseURI:
     process.env.DATABASE_URI || process.env.MONGODB_URI || 'mongodb://localhost:27017/dev',
-  cloud: process.env.CLOUD || __dirname + '/cloud/main.js',
+  cloud: function () {
+    import('./cloud/main.js');
+  },
   appId: process.env.APP_ID || 'myAppId',
   masterKey: process.env.MASTER_KEY || '', //Add your master key here. Keep it secret!
   masterKeyIps: ['0.0.0.0/0', '::1'], // '::1'
@@ -170,12 +172,6 @@ app.get('/', function (req, res) {
   res.status(200).send('open-sign-server is running !!!');
 });
 
-// There will be a test page available on the /test path of your server url
-// Remove this before launching your app
-app.get('/test', function (req, res) {
-  res.sendFile(path.join(__dirname, '/public/test.html'));
-});
-
 if (!process.env.TESTING) {
   const port = process.env.PORT || 8080;
   const httpServer = http.createServer(app);

microfrontends/SignDocuments/package-lock.json

@@ -29,11 +29,13 @@
         "react-dnd-touch-backend": "^16.0.1",
         "react-dom": "^18.2.0",
         "react-draggable": "^4.4.6",
+        "react-helmet": "^6.1.0",
         "react-pdf": "^7.4.0",
         "react-rnd": "^10.4.1",
         "react-router-dom": "^6.16.0",
         "react-scripts": "5.0.1",
         "react-scrollbars-custom": "^4.1.1",
+        "react-select": "^5.8.0",
         "react-signature-canvas": "^1.0.6",
         "reactour": "^1.19.1",
         "select-dom": "^9.0.0",
@@ -2310,6 +2312,65 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
@@ -2322,8 +2383,52 @@
     "node_modules/@emotion/memoize": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
-      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
-      "peer": true
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+      "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
     },
     "node_modules/@emotion/stylis": {
       "version": "0.8.5",
@@ -2337,6 +2442,24 @@
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
       "peer": true
     },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -10608,6 +10731,11 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -14810,6 +14938,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -17748,6 +17881,25 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -18003,6 +18155,34 @@
         "react": ">=16.0.0"
       }
     },
+    "node_modules/react-select": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.0.tgz",
+      "integrity": "sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-signature-canvas": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/react-signature-canvas/-/react-signature-canvas-1.0.6.tgz",
@@ -19527,6 +19707,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/sucrase": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
@@ -20443,6 +20628,19 @@
         }
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",

microfrontends/SignDocuments/package.json

@@ -25,11 +25,13 @@
     "react-dnd-touch-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
+    "react-helmet": "^6.1.0",
     "react-pdf": "^7.4.0",
     "react-rnd": "^10.4.1",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "react-scrollbars-custom": "^4.1.1",
+    "react-select": "^5.8.0",
     "react-signature-canvas": "^1.0.6",
     "reactour": "^1.19.1",
     "select-dom": "^9.0.0",

microfrontends/SignDocuments/src/Component/ManageSign.js

@@ -157,7 +157,7 @@ const ManageSign = () => {
           file = base64StringtoFile(image, `${replaceSpace}.png`);
         }
       }
-      console.log("isUrl ", isUrl);
+      // console.log("isUrl ", isUrl);
       let imgUrl;
       if (!isUrl) {
         imgUrl = await uploadFile(file);

microfrontends/SignDocuments/src/Component/PdfRequestFiles.js

@@ -21,8 +21,9 @@ import {
   embedDocId,
   pdfNewWidthFun,
   signPdfFun,
-  calculateImgAspectRatio,
-  onImageSelect
+  onImageSelect,
+  onSaveSign,
+  onSaveImage
 } from "../utils/Utils";
 import Loader from "./component/loader";
 import HandleError from "./component/HandleError";
@@ -482,181 +483,99 @@ function PdfRequestFiles() {
     }
   };
   //function for upload stamp image
-  const onSaveImage = () => {
+  const saveImage = () => {
+    //get current signers placeholder position data
     const currentSigner = signerPos.filter(
       (data) => data.signerObjId === signerObjectId
     );
-    const i = currentSigner[0].placeHolder.findIndex((object) => {
+    //get current pagenumber placeholder index
+    const getIndex = currentSigner[0].placeHolder.findIndex((object) => {
       return object.pageNumber === pageNumber;
     });
-    const updateFilter = currentSigner[0].placeHolder[i].pos.filter(
-      (data) =>
-        data.key === signKey && data.Width && data.Height && data.SignUrl
+    //get current signer placeholder position data
+    const placeholderPosition = currentSigner[0].placeHolder;
+    //function of save image and get updated position with image url
+    const getUpdatePosition = onSaveImage(
+      placeholderPosition,
+      getIndex,
+      signKey,
+      imgWH,
+      image
     );
-    let getIMGWH = calculateImgAspectRatio(imgWH);
 
-    if (updateFilter.length > 0) {
-      const getXYdata = currentSigner[0].placeHolder[i].pos;
-      const getPosData = getXYdata;
-      const addSign = getPosData.map((url, ind) => {
-        if (url.key === signKey) {
-          return {
-            ...url,
-            Width: getIMGWH.newWidth,
-            Height: getIMGWH.newHeight,
-            SignUrl: image.src,
-            ImageType: image.imgType
-          };
-        }
-        return url;
-      });
-
-      const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => {
-        if (ind === i) {
-          return { ...obj, pos: addSign };
-        }
-        return obj;
-      });
-      const getPlaceData = currentSigner[0].placeHolder;
-      getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl);
-
-      const indexofSigner = signerPos.findIndex((object) => {
-        return object.signerObjId === signerObjectId;
-      });
-      setSignerPos((prevState) => {
-        const newState = [...prevState]; // Create a copy of the state
-        newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy
-        return newState; // Update the state with the modified copy
-      });
-    } else {
-      const getXYdata = currentSigner[0].placeHolder[i].pos;
-
-      const getPosData = getXYdata;
-
-      const addSign = getPosData.map((url, ind) => {
-        if (url.key === signKey) {
-          return {
-            ...url,
-            Width: getIMGWH.newWidth,
-            Height: getIMGWH.newHeight,
-            SignUrl: image.src,
-            ImageType: image.imgType
-          };
-        }
-        return url;
-      });
-
-      const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => {
-        if (ind === i) {
-          return { ...obj, pos: addSign };
-        }
-        return obj;
-      });
-
-      const getPlaceData = currentSigner[0].placeHolder;
-      getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl);
-
-      const indexofSigner = signerPos.findIndex((object) => {
-        return object.signerObjId === signerObjectId;
-      });
-      setSignerPos((prevState) => {
-        const newState = [...prevState]; // Create a copy of the state
-        newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy
-        return newState; // Update the state with the modified copy
-      });
-    }
+    //replace updated placeholder position with old data
+    placeholderPosition.splice(
+      0,
+      placeholderPosition.length,
+      ...getUpdatePosition
+    );
+    //get current signers placeholder position data index number in array
+    const indexofSigner = signerPos.findIndex((object) => {
+      return object.signerObjId === signerObjectId;
+    });
+    //update current signers data with new placeholder position array data
+    setSignerPos((prevState) => {
+      const newState = [...prevState]; // Create a copy of the state
+      newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy
+      return newState; // Update the state with the modified copy
+    });
   };
 
   //function for save button to save signature or image url
-  const onSaveSign = (isDefaultSign) => {
+  const saveSign = (isDefaultSign) => {
     const signatureImg = isDefaultSign ? defaultSignImg : signature;
-    const isSign = true;
-    let getIMGWH;
+    let imgWH = { width: "", height: "" };
     setIsSignPad(false);
     setIsImageSelect(false);
     setImage();
+
+    //get current signers placeholder position data
+    const currentSigner = signerPos.filter(
+      (data) => data.signerObjId === signerObjectId
+    );
+    //get current pagenumber placeholder index
+    const getIndex = currentSigner[0].placeHolder.findIndex((object) => {
+      return object.pageNumber === pageNumber;
+    });
+
+    //set default signature image width and height
     if (isDefaultSign) {
       const img = new Image();
       img.src = defaultSignImg;
       if (img.complete) {
-        let imgWH = {
+        imgWH = {
           width: img.width,
           height: img.height
         };
-        getIMGWH = calculateImgAspectRatio(imgWH);
       }
     }
-    const currentSigner = signerPos.filter(
-      (data) => data.signerObjId === signerObjectId
+    //get current signer placeholder position data
+    const placeholderPosition = currentSigner[0].placeHolder;
+    //function of save signature image and get updated position with signature image url
+    const getUpdatePosition = onSaveSign(
+      placeholderPosition,
+      getIndex,
+      signKey,
+      signatureImg,
+      imgWH,
+      isDefaultSign
     );
 
-    const i = currentSigner[0].placeHolder.findIndex((object) => {
-      return object.pageNumber === pageNumber;
+    const updateSignerData = currentSigner.map((obj, ind) => {
+      if (obj.signerObjId === signerObjectId) {
+        return { ...obj, placeHolder: getUpdatePosition };
+      }
+      return obj;
     });
 
-    let updateFilter;
-
-    updateFilter = currentSigner[0].placeHolder[i].pos.filter(
-      (data) => data.key === signKey && data.SignUrl
+    const index = signerPos.findIndex(
+      (data) => data.signerObjId === signerObjectId
     );
-
-    const getXYdata = currentSigner[0].placeHolder[i].pos;
-    const getPosData = getXYdata;
-    const posWidth = isDefaultSign
-      ? getIMGWH.newWidth
-      : isSign && getPosData[0].ImageType
-        ? 150
-        : getPosData[0].Width
-          ? getPosData[0].Width
-          : 150;
-    const posHidth = isDefaultSign
-      ? getIMGWH.newHeight
-      : isSign && getPosData[0].ImageType
-        ? 60
-        : getPosData[0].Height
-          ? getPosData[0].Height
-          : 60;
-    if (updateFilter.length > 0) {
-      updateFilter[0].SignUrl = signatureImg;
-      updateFilter[0].Width = posWidth;
-      updateFilter[0].Height = posHidth;
-    } else {
-      const addSign = getPosData.map((url, ind) => {
-        if (url.key === signKey) {
-          return {
-            ...url,
-            SignUrl: signatureImg,
-            Width: posWidth,
-            Height: posHidth,
-            ImageType: "sign"
-          };
-        }
-        return url;
-      });
-
-      const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => {
-        if (obj.pageNumber === pageNumber) {
-          return { ...obj, pos: addSign };
-        }
-        return obj;
-      });
-
-      const newUpdatePos = currentSigner.map((obj, ind) => {
-        if (obj.signerObjId === signerObjectId) {
-          return { ...obj, placeHolder: newUpdateUrl };
-        }
-        return obj;
-      });
-
-      const index = signerPos.findIndex(
-        (data) => data.signerObjId === signerObjectId
-      );
-      setSignerPos((prevState) => {
-        const newState = [...prevState]; // Create a copy of the state
-        newState.splice(index, 1, ...newUpdatePos); // Modify the copy
-        return newState; // Update the state with the modified copy
-      });
-    }
+    setSignerPos((prevState) => {
+      const newState = [...prevState];
+      newState.splice(index, 1, ...updateSignerData);
+      return newState;
+    });
   };
 
   const checkSignerBackColor = (obj) => {
@@ -782,6 +701,7 @@ function PdfRequestFiles() {
               allPages={allPages}
               setAllPages={setAllPages}
               setPageNumber={setPageNumber}
+              pageNumber={pageNumber}
             />
 
             {/* pdf render view */}
@@ -831,8 +751,8 @@ function PdfRequestFiles() {
                 onImageChange={onImageChange}
                 setSignature={setSignature}
                 image={image}
-                onSaveImage={onSaveImage}
-                onSaveSign={onSaveSign}
+                onSaveImage={saveImage}
+                onSaveSign={saveSign}
                 defaultSign={defaultSignImg}
               />
               {/* pdf header which contain funish back button */}
@@ -888,7 +808,7 @@ function PdfRequestFiles() {
                       }}
                       className="signedStyle"
                     >
-                      Signed By
+                      Signed by
                     </div>
                     <div style={{ marginTop: "2px" }}>
                       {signedSigners.map((obj, ind) => {
@@ -897,8 +817,8 @@ function PdfRequestFiles() {
                             style={{
                               display: "flex",
                               flexDirection: "row",
-                              padding: "10px",
-
+                              alignItems: "center",
+                              padding: "10px 0",
                               background: checkSignerBackColor(obj)
                             }}
                             key={ind}
@@ -913,17 +833,18 @@ function PdfRequestFiles() {
                                 borderRadius: 30 / 2,
                                 justifyContent: "center",
                                 alignItems: "center",
-                                marginRight: "20px"
+                                margin: "0 10px 0 5px"
                               }}
                             >
                               <span
                                 style={{
-                                  fontSize: "10px",
+                                  fontSize: "12px",
                                   textAlign: "center",
-                                  fontWeight: "bold"
+                                  fontWeight: "bold",
+                                  color: "black",
+                                  textTransform: "uppercase"
                                 }}
                               >
-                                {" "}
                                 {getFirstLetter(obj.Name)}
                               </span>
                             </div>
@@ -954,7 +875,7 @@ function PdfRequestFiles() {
                         marginTop: signedSigners.length > 0 && "20px"
                       }}
                     >
-                      Yet To Sign
+                      Yet to sign
                     </div>
                     <div style={{ marginTop: "5px" }}>
                       {unsignedSigners.map((obj, ind) => {
@@ -963,7 +884,8 @@ function PdfRequestFiles() {
                             style={{
                               display: "flex",
                               flexDirection: "row",
-                              padding: "10px",
+                              alignItems: "center",
+                              padding:"10px 0",
                               background: checkSignerBackColor(obj)
                             }}
                             key={ind}
@@ -972,23 +894,24 @@ function PdfRequestFiles() {
                               className="signerStyle"
                               style={{
                                 background: "#abd1d0",
-                                width: 20,
-                                height: 20,
+                                width: 30,
+                                height: 30,
                                 display: "flex",
                                 borderRadius: 30 / 2,
                                 justifyContent: "center",
                                 alignItems: "center",
-                                marginRight: "20px"
+                                margin: "0 10px 0 5px"
                               }}
                             >
                               <span
                                 style={{
-                                  fontSize: "8px",
+                                  fontSize: "12px",
                                   textAlign: "center",
-                                  fontWeight: "bold"
+                                  fontWeight: "bold",
+                                  color: "black",
+                                  textTransform: "uppercase"
                                 }}
                               >
-                                {" "}
                                 {getFirstLetter(obj.Name)}
                               </span>
                             </div>

microfrontends/SignDocuments/src/Component/SignYourselfPdf.js

@@ -23,7 +23,9 @@ import {
   multiSignEmbed,
   pdfNewWidthFun,
   addDefaultSignatureImg,
-  onImageSelect
+  onImageSelect,
+  placeholderHeight,
+  placeholderWidth
 } from "../utils/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -36,6 +38,7 @@ import RenderPdf from "./component/renderPdf";
 import { contractUsers, contactBook, urlValidator } from "../utils/Utils";
 import { modalAlign } from "../utils/Utils";
 import AlertComponent from "./component/alertComponent";
+import PlaceholderCopy from "./component/PlaceholderCopy";
 
 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
@@ -79,6 +82,7 @@ function SignYourSelf() {
   const [noData, setNoData] = useState(false);
   const [contractName, setContractName] = useState("");
   const [containerWH, setContainerWH] = useState({});
+  const [isPageCopy, setIsPageCopy] = useState(false);
   const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
     status: false
   });
@@ -102,7 +106,6 @@ function SignYourSelf() {
 
   const [{ isDragSign }, dragSignature] = useDrag({
     type: "BOX",
-
     item: {
       type: "BOX",
       id: 1,
@@ -115,7 +118,6 @@ function SignYourSelf() {
 
   const [{ isDragStamp }, dragStamp] = useDrag({
     type: "BOX",
-
     item: {
       type: "BOX",
       id: 2,
@@ -140,7 +142,6 @@ function SignYourSelf() {
 
   const [{ isDragStampSS }, dragStampSS] = useDrag({
     type: "BOX",
-
     item: {
       type: "BOX",
       id: 4,
@@ -329,7 +330,6 @@ function SignYourSelf() {
         isDrag: false,
         key: key,
         isStamp: monitor,
-
         yBottom: window.innerHeight / 2 - 60
       };
 
@@ -516,22 +516,31 @@ function SignYourSelf() {
     const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
 
     if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
+      const xPos = () => {
+        const resizePos = xyPosData.xPosition;
+        if (isMobile) {
+          return resizePos * scale;
+        } else {
+          return resizePos;
+        }
+      };
       const height = xyPosData.Height ? xyPosData.Height : 60;
+      const resizePos = xyPosData.yBottom;
       const bottomY = xyPosData.isDrag
-        ? xyPosData.yBottom * scale - height * scale
+        ? resizePos * scale - height * scale
         : xyPosData.firstYPos
-          ? xyPosData.yBottom * scale - height * scale + xyPosData.firstYPos
-          : xyPosData.yBottom * scale - height * scale;
+          ? resizePos * scale - height * scale + xyPosData.firstYPos
+          : resizePos * scale - height * scale;
 
       singleSign = {
         pdfFile: pdfBase64Url,
         docId: documentId,
         sign: {
           Base64: base64Url,
-          Left: isMobile ? xyPosData.xPosition * scale : xyPosData.xPosition,
+          Left: xPos(),
           Bottom: bottomY,
-          Width: xyPosData.Width ? xyPosData.Width * scale : 150 * scale,
-          Height: height * scale,
+          Width: placeholderWidth(xyPosData, scale),
+          Height: placeholderHeight(xyPosData, scale),
           Page: pageNo
         }
       };
@@ -650,7 +659,7 @@ function SignYourSelf() {
   //function for save button to save signature or image url
   const saveSign = (isDefaultSign) => {
     const signatureImg = isDefaultSign ? defaultSignImg : signature;
-    const signFlag = true;
+
     let imgWH = { width: "", height: "" };
     setIsSignPad(false);
     setIsImageSelect(false);
@@ -672,8 +681,7 @@ function SignYourSelf() {
       signKey,
       signatureImg,
       imgWH,
-      isDefaultSign,
-      signFlag
+      isDefaultSign
     );
 
     setXyPostion(getUpdatePosition);
@@ -826,6 +834,7 @@ function SignYourSelf() {
             setAllPages={setAllPages}
             setPageNumber={setPageNumber}
             setSignBtnPosition={setSignBtnPosition}
+            pageNumber={pageNumber}
           />
 
           {/* pdf render view */}
@@ -881,6 +890,15 @@ function SignYourSelf() {
                 )}
               </Modal.Footer>
             </Modal>
+            <PlaceholderCopy
+              isPageCopy={isPageCopy}
+              setIsPageCopy={setIsPageCopy}
+              xyPostion={xyPostion}
+              setXyPostion={setXyPostion}
+              allPages={allPages}
+              pageNumber={pageNumber}
+              signKey={signKey}
+            />
             {/* this is modal of signature pad */}
             <SignPad
               isSignPad={isSignPad}
@@ -952,6 +970,7 @@ function SignYourSelf() {
                   setXyPostion={setXyPostion}
                   index={index}
                   containerWH={containerWH}
+                  setIsPageCopy={setIsPageCopy}
                 />
               )}
             </div>

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

@@ -0,0 +1,72 @@
+import React from "react";
+import ModalUi from "../../premitives/ModalUi";
+
+const AddRoleModal = (props) => {
+  return (
+    <ModalUi
+      title={"Add Role"}
+      isOpen={props.isModalRole}
+      handleClose={props.handleCloseRoleModal}
+    >
+      <div 
+        className="addusercontainer"
+      >
+        <form
+          style={{ display: "flex", flexDirection: "column" }}
+          onSubmit={props.handleAddRole}
+        >
+          <input
+            value={props.roleName}
+            onChange={(e) => props.setRoleName(e.target.value)}
+            placeholder={
+              props.signersdata.length > 0
+                ? "User " + (props.signersdata.length + 1)
+                : "User 1"
+            }
+            className="addUserInput"
+          />
+          <p
+            style={{
+              color: "grey",
+              fontSize: 11,
+              margin: "10px 0 10px 5px"
+            }}
+          >
+            e.g: Hr, Director, Manager, New joinee, Accountant, etc...
+          </p>
+          <div>
+            <div
+              style={{
+                height: "1px",
+                backgroundColor: "#9f9f9f",
+                width: "100%",
+                marginBottom: "15px"
+              }}
+            ></div>
+            <button
+              type="submit"
+              style={{
+                background: "#00a2b7"
+              }}
+              className="finishBtn"
+            >
+              Add
+            </button>
+            <button
+              onClick={props.handleCloseRoleModal}
+              style={{
+                color: "black"
+              }}
+              type="button"
+              className="finishBtn"
+            >
+              Close
+            </button>
+          </div>
+        </form>
+      </div>
+    </ModalUi>
+  );
+};
+
+export default AddRoleModal;

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

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import "../../css/AddUser.css";
+// import SelectFolder from "../../premitives/SelectFolder";
+
+const EditTemplate = ({ template, onSuccess }) => {
+  // const [folder, setFolder] = useState({ ObjectId: "", Name: "" });
+  const [formData, setFormData] = useState({
+    Name: template?.Name || "",
+    Note: template?.Note || "",
+    Description: template?.Description || ""
+  });
+
+  const handleStrInput = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+  // const handleFolder = (data) => {
+  //   console.log("handleFolder ", data)
+  //   setFolder(data);
+  // };
+
+  // Define a function to handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const data = {...formData }
+    onSuccess(data);
+  };
+
+  return (
+    <div className="addusercontainer">
+      <div className="form-wrapper">
+        <form onSubmit={handleSubmit}>
+          <div>
+            <label htmlFor="name" style={{ fontSize: 13 }}>
+              File
+            </label>
+            <div
+              style={{
+                padding: "0.5rem 0.75rem",
+                border: "1px solid #d1d5db",
+                borderRadius: "0.375rem",
+                fontSize: "0.75rem",
+                fontWeight: "700"
+              }}
+            >
+              file selected : {template.URL?.split("/")[3]?.split("_")[1]}
+            </div>
+          </div>
+          <div className="form-section">
+            <label htmlFor="name" style={{ fontSize: 13 }}>
+              Name
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
+            </label>
+            <input
+              type="text"
+              name="Name"
+              value={formData.Name}
+              onChange={(e) => handleStrInput(e)}
+              required
+              className="addUserInput"
+            />
+          </div>
+          <div className="form-section">
+            <label htmlFor="Note" style={{ fontSize: 13 }}>
+              Note
+            </label>
+            <input
+              type="text"
+              name="Note"
+              id="Note"
+              value={formData.Note}
+              onChange={(e) => handleStrInput(e)}
+              className="addUserInput"
+            />
+          </div>
+          <div className="form-section">
+            <label htmlFor="Description" style={{ fontSize: 13 }}>
+              Description
+            </label>
+            <input
+              type="text"
+              name="Description"
+              id="Description"
+              value={formData.Description}
+              onChange={(e) => handleStrInput(e)}
+              className="addUserInput"
+            />
+          </div>
+          {/* <SelectFolder onSuccess={handleFolder} folderCls={"contracts_Template"} /> */}
+          <div className="buttoncontainer">
+            <button type="submit" className="submitbutton">
+              Submit
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default EditTemplate;

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

@@ -0,0 +1,35 @@
+import React from "react";
+import SelectSigners from "../../premitives/SelectSigners";
+import AddUser from "../../premitives/AddUser";
+import ModalUi from "../../premitives/ModalUi";
+
+const LinkUserModal = (props) => {
+  return (
+    <ModalUi title={"Add/Choose Signer"} isOpen={props.isAddUser[props.uniqueId]} handleClose={props.closePopup}>
+      <SelectSigners
+          details={props.handleAddUser}
+          closePopup={props.closePopup}
+        />
+         <div style={{ display: "flex", alignItems: "center", gap: 5, margin:"0px 25px" }}>
+          <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} />
+    </ModalUi>
+  );
+};
+
+export default LinkUserModal;

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

@@ -0,0 +1,259 @@
+import React, { useState } from "react";
+import Modal from "react-bootstrap/Modal";
+import ModalHeader from "react-bootstrap/esm/ModalHeader";
+import { themeColor } from "../../utils/ThemeColor/backColor";
+
+function PlaceholderCopy(props) {
+  const copyType = ["All pages", "All pages but last", "All pages but first"];
+  const [selectCopyType, setSelectCopyType] = useState("");
+
+  //get RandomKey Id
+  const randomKey = () => {
+    const randomId = Math.floor(1000 + Math.random() * 9000);
+    return randomId;
+  };
+
+  //function for get copy placeholder position
+  const getCopyPlaceholderPosition = (
+    type,
+    rest,
+    newPageNumber,
+    existPlaceholderPosition
+  ) => {
+    let obj;
+
+    const filterPosition =
+      existPlaceholderPosition &&
+      existPlaceholderPosition.filter(
+        (data) => data.xPosition !== rest.xPosition
+      );
+    //copy all page placeholder at requested position except first page
+    if (newPageNumber === 1 && type === "first") {
+      if (filterPosition && filterPosition.length > 0) {
+        return (obj = {
+          pageNumber: newPageNumber,
+          pos: [...filterPosition]
+        });
+      }
+    }
+    //copy all page placeholder at requested position except  last page
+    else if (newPageNumber === props.allPages && type === "last") {
+      if (existPlaceholderPosition) {
+        return (obj = {
+          pageNumber: newPageNumber,
+          pos: [...filterPosition]
+        });
+      }
+    }
+    //copy all page placeholder at requested position with existing placeholder position
+    else if (existPlaceholderPosition) {
+      return (obj = {
+        pageNumber: newPageNumber,
+        pos: [...filterPosition, rest]
+      });
+    }
+    //copy all page placeholder at requested position
+    else {
+      return (obj = {
+        pageNumber: newPageNumber,
+        pos: [rest]
+      });
+    }
+  };
+
+  //function for copy placeholder as per select copy type
+  const copyPlaceholder = (type) => {
+    let newPlaceholderPosition = [];
+    let newPageNumber = 1;
+    const signerPosition = props.xyPostion;
+    const signerId = props.signerObjId ? props.signerObjId : props.Id;
+    //handle placeholder array and copy for multiple signers placeholder at requested location
+    if (signerId) {
+      //get current signers data
+      let filterSignerPosition;
+      if (props?.signerObjId) {
+        filterSignerPosition = signerPosition.filter(
+          (data) => data.signerObjId === signerId
+        );
+      } else {
+        filterSignerPosition = signerPosition.filter(
+          (item) => item.Id === signerId
+        );
+      }
+      //get current pagenumber's all placeholder position data
+      const placeholderPosition = filterSignerPosition[0].placeHolder.filter(
+        (data) => data.pageNumber === props.pageNumber
+      );
+      //get current placeholder position data which user want to copy
+      const currentPlaceholder = placeholderPosition[0].pos.filter(
+        (position) => position.key === props.signKey
+      );
+      const { key, ...rest } = currentPlaceholder[0];
+      for (let i = 0; i < props.allPages; i++) {
+        const newId = randomKey();
+        rest.key = newId;
+        //get exist placeholder position for particular page
+        const existPlaceholder = filterSignerPosition[0].placeHolder.filter(
+          (data) => data.pageNumber === newPageNumber
+        );
+        const existPlaceholderPosition =
+          existPlaceholder[0] && existPlaceholder[0].pos;
+
+        //function for get copy to requested location of placeholder position
+        const getPlaceholderObj = getCopyPlaceholderPosition(
+          type,
+          rest,
+          newPageNumber,
+          existPlaceholderPosition
+        );
+        if (getPlaceholderObj) {
+          newPlaceholderPosition.push(getPlaceholderObj);
+        }
+        newPageNumber++;
+      }
+      let updatedSignerPlaceholder;
+      if (props?.signerObjId) {
+        updatedSignerPlaceholder = signerPosition.map((signersData, ind) => {
+          if (signersData.signerObjId === props.signerObjId) {
+            return {
+              ...signersData,
+              placeHolder: newPlaceholderPosition
+            };
+          }
+          return signersData;
+        });
+      } else {
+        updatedSignerPlaceholder = signerPosition.map((signersData, ind) => {
+          if (signersData.Id === props.Id) {
+            return {
+              ...signersData,
+              placeHolder: newPlaceholderPosition
+            };
+          }
+          return signersData;
+        });
+      }
+      // const updatedSignerPlaceholder = signerPosition.map(
+      //   (signersData, ind) => {
+      //     if (signersData.signerObjId === props.signerObjId) {
+      //       return {
+      //         ...signersData,
+      //         placeHolder: newPlaceholderPosition
+      //       };
+      //     }
+      //     return signersData;
+      //   }
+      // );
+
+      const signersData = signerPosition;
+      signersData.splice(0, signerPosition.length, ...updatedSignerPlaceholder);
+      props.setXyPostion(signersData);
+    }
+    //handle signyourself array and copy for single signers placeholder at requested location
+    else {
+      const xyPostion = props.xyPostion;
+
+      const placeholderPosition = xyPostion.filter(
+        (data) => data.pageNumber === props.pageNumber
+      );
+      //get current placeholder position data which user want to copy
+      const currentPlaceholder = placeholderPosition[0].pos.filter(
+        (pos) => pos.key === props.signKey
+      );
+      const { key, ...rest } = currentPlaceholder[0];
+      for (let i = 0; i < props.allPages; i++) {
+        //get exist placeholder position for particular page
+        const existPlaceholder = xyPostion.filter(
+          (data) => data.pageNumber === newPageNumber
+        );
+        const existPlaceholderPosition =
+          existPlaceholder[0] && existPlaceholder[0].pos;
+
+        const newId = randomKey();
+        rest.key = newId;
+        //function for get copy to requested location of placeholder position
+        const getPlaceholderObj = getCopyPlaceholderPosition(
+          type,
+          rest,
+          newPageNumber,
+          existPlaceholderPosition
+        );
+        if (getPlaceholderObj) {
+          newPlaceholderPosition.push(getPlaceholderObj);
+        }
+
+        newPageNumber++;
+      }
+      props.setXyPostion(newPlaceholderPosition);
+    }
+  };
+
+  //function for getting selected type placeholder copy
+  const handleApplyCopy = () => {
+    if (selectCopyType === "All pages") {
+      copyPlaceholder("all");
+    } else if (selectCopyType === "All pages but last") {
+      copyPlaceholder("last");
+    } else if (selectCopyType === "All pages but first") {
+      copyPlaceholder("first");
+    }
+  };
+
+  return (
+    <Modal show={props.isPageCopy}>
+      <ModalHeader style={{ background: themeColor() }}>
+        <span style={{ color: "white" }}>Copy to all pages</span>
+      </ModalHeader>
+
+      <Modal.Body>
+        {copyType.map((data, key) => {
+          return (
+            <div key={key} style={{ display: "flex", flexDirection: "column" }}>
+              <label key={key} style={{ fontSize: "16px", fontWeight: "500" }}>
+                <input
+                  style={{ accentColor: "red", marginRight: "10px" }}
+                  type="radio"
+                  value={data}
+                  onChange={() => setSelectCopyType(data)}
+                  checked={selectCopyType === data}
+                />
+
+                {data}
+              </label>
+            </div>
+          );
+        })}
+      </Modal.Body>
+
+      <Modal.Footer>
+        <button
+          style={{
+            color: "black"
+          }}
+          type="button"
+          className="finishBtn"
+          onClick={() => props.setIsPageCopy(false)}
+        >
+          Cancel
+        </button>
+
+        <button
+          onClick={() => {
+            handleApplyCopy();
+            props.setIsPageCopy(false);
+          }}
+          style={{
+            background: themeColor()
+          }}
+          type="button"
+          disabled={!selectCopyType}
+          className="finishBtn"
+        >
+          Apply
+        </button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+export default PlaceholderCopy;

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/borderResize.js

@@ -1,12 +1,12 @@
 import React from "react";
 
-function BorderResize() {
+function BorderResize({ right, top }) {
   return (
     <div
       className="borderResize"
       style={{
-        right: "-1px",
-        bottom: "-1px",
+        right: right ? right + "px" : "-1px",
+        bottom: top ? top + "px" : "-1px",
         borderRight: "3px solid  #188ae2",
         borderBottom: "3px solid #188ae2"
       }}

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

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { saveAs } from "file-saver";
 import celebration from "../../assests/newCeleb.gif";
-import close from "../../assests/close.png";
 import Modal from "react-bootstrap/Modal";
 import ModalHeader from "react-bootstrap/esm/ModalHeader";
 import axios from "axios";
@@ -297,16 +296,18 @@ function EmailComponent({
                         >
                           {data}
                         </span>
-
-                        <img
-                          alt="print img"
+                        <span
+                          style={{
+                            color: "white",
+                            fontSize: 13,
+                            fontWeight: 600,
+                            marginLeft: 7,
+                            cursor: "pointer"
+                          }}
                           onClick={() => removeChip(ind)}
-                          src={close}
-                          width={10}
-                          height={10}
-                          style={{ fontWeight: "600", marginLeft: "7px" }}
-                          className="emailChipClose"
-                        />
+                        >
+                          <i className="fa-solid fa-xmark"></i>
+                        </span>
                       </div>
                     );
                   })}

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

@@ -1,6 +1,6 @@
-import React from "react";
-import * as Select from "@radix-ui/react-select";
-import classnames from "classnames";
+import React, { useState } from "react";
+import ModalUi from "../../premitives/ModalUi";
+import RecipientList from "../../premitives/RecipientList";
 
 function FieldsComponent({
   pdfUrl,
@@ -20,7 +20,6 @@ function FieldsComponent({
   isDragSignatureSS,
   isSignYourself,
   addPositionOfSignature,
-
   signersdata,
   isSelectListId,
   setSignerObjId,
@@ -29,29 +28,19 @@ function FieldsComponent({
   isSigners,
   dataTut,
   dataTut2,
-  setIsShowEmail,
   isMailSend,
-  selectedEmail,
-  setSelectedEmail,
+  handleAddSigner,
+  setUniqueId,
+  setRoleName,
+  handleDeleteUser,
+  signerPos,
+  handleRoleChange,
+  handleOnBlur
 }) {
+  const [isSignersModal, setIsSignersModal] = useState(false);
   const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
 
-  const isMobile = window.innerWidth <767;
-  
-  const SelectItem = React.forwardRef(
-    ({ children, className, ...props }, forwardedRef) => {
-      return (
-        <Select.Item
-          className={classnames("SelectItem", className)}
-          {...props}
-          ref={forwardedRef}
-        >
-          <Select.ItemText>{children}</Select.ItemText>
-          <Select.ItemIndicator className="SelectItemIndicator"></Select.ItemIndicator>
-        </Select.Item>
-      );
-    }
-  );
+  const isMobile = window.innerWidth < 767;
 
   const color = [
     "#93a3db",
@@ -65,9 +54,12 @@ function FieldsComponent({
     "#cc99ff",
     "#ffcc99",
     "#66ccff",
-    "#ffffcc",
+    "#ffffcc"
   ];
 
+  const handleModal = () => {
+    setIsSignersModal(!isSignersModal);
+  };
   return (
     <>
       {isMobile && isSignYourself ? (
@@ -88,102 +80,41 @@ function FieldsComponent({
                   padding: "10px 20px",
                   display: "flex",
                   alignItems: "center",
-                  justifyContent: "center",
+                  justifyContent: "center"
+                }}
+                onClick={() => {
+                  if (signersdata?.length) {
+                    handleModal();
+                  }
                 }}
               >
-                <span style={{ fontSize: "18px", fontWeight: "500" }}>
-                  Signer :
+                <span style={{ fontSize: "13px", fontWeight: "700" }}>
+                  Recipient
                 </span>
-
-                <Select.Root
-                  onValueChange={(obj) => {
-                    const [selectedKey, selectedData] = obj.split("|");
-                    const parseData = JSON.parse(selectedData);
-
-                    setSignerObjId(parseData.objectId);
-                    setIsSelectId(selectedKey);
-                    setContractName(parseData.className);
-                    setSelectedEmail(true);
-                  }}
-                >
-                  <Select.Trigger
-                    className={selectedEmail ? "selectEmail": "SelectTrigger"}
-                    style={{
-                      background: isSelectListId
-                        ? color[isSelectListId % color.length]
-                        : color[0],
-                    }}
-                    aria-label="Food"
-                  >
-                    <Select.Value
-                    
-                    placeholder="Select signer.." />
-                    {!selectedEmail && 
-                    <Select.Icon className="SelectIcon">
-                      <i
-                        style={{
-                          marginTop: "5px",
-                          marginLeft: "5px",
-                          color: "#3b15d1",
-                          fontSize: "20px",
-                        }}
-                        className="fa fa-angle-down"
-                        aria-hidden="true"
-                      ></i>
-                    </Select.Icon>}
-                  </Select.Trigger>
-                  <Select.Portal>
-                    <Select.Content
-                      className="SelectContent"
-                      style={{ zIndex: "5000" }}
-                    >
-                      <Select.ScrollUpButton className="SelectScrollButton">
-                        <i
-                          style={{
-                            marginTop: "5px",
-                            marginLeft: "5px",
-                            color: "#3b15d1",
-                            fontSize: "20px",
-                          }}
-                          className="fa fa-angle-down"
-                          aria-hidden="true"
-                        ></i>
-                      </Select.ScrollUpButton>
-                      <Select.Viewport className="SelectViewport">
-                        <Select.Group>
-                          {signersdata.Signers.map((obj, ind) => {
-                            return (
-                              <SelectItem
-                                selected
-                                key={ind}
-                                value={`${ind}|${JSON.stringify(obj)}`}
-                                // value={(obj)}
-                              >
-                                {" "}
-                                {obj.Email}
-                              </SelectItem>
-                            );
-                          })}
-                          {/* <SelectItem value="orange">Orange</SelectItem>
-                        <SelectItem value="apple">Apple</SelectItem>
-                        <SelectItem value="grape"></SelectItem> */}
-                        </Select.Group>
-                      </Select.Viewport>
-                      <Select.ScrollDownButton className="SelectScrollButton">
-                        <i
-                          style={{
-                            marginTop: "5px",
-                            marginLeft: "5px",
-                            color: "#3b15d1",
-                            fontSize: "20px",
-                          }}
-                          className="fa fa-angle-down"
-                          aria-hidden="true"
-                        ></i>
-                      </Select.ScrollDownButton>
-                    </Select.Content>
-                  </Select.Portal>
-                </Select.Root>
+                <span style={{ fontSize: "13px", fontWeight: "700" }}>
+                  {signersdata[isSelectListId]?.Role && (
+                    <div>
+                      {signersdata[isSelectListId]?.Name
+                        ? ` : ${signersdata[isSelectListId]?.Name}`
+                        : ` : ${signersdata[isSelectListId]?.Role}`}
+                    </div>
+                  )}
+                </span>
+              </div>
+            )}
+            {handleAddSigner && (
+              <div
+                data-tut="reactourAddbtn"
+                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 role</span>
               </div>
             )}
             <div
@@ -192,17 +123,7 @@ function FieldsComponent({
               style={{ backgroundColor: themeColor() }}
             >
               <div
-                onClick={() => {
-                  if (isSigners) {
-                    if (selectedEmail) {
-                      addPositionOfSignature("onclick", false);
-                    } else {
-                      setIsShowEmail(true);
-                    }
-                  } else {
-                    addPositionOfSignature("onclick", false);
-                  }
-                }}
+                onClick={() => addPositionOfSignature("onclick", false)}
                 ref={(element) => {
                   dragSignatureSS(element);
                   if (element) {
@@ -221,24 +142,15 @@ function FieldsComponent({
                   backgroundSize: "70% 70%",
                   backgroundRepeat: "no-repeat",
                   backgroundPosition: "center center",
-                  paddingBottom: "2.2rem",
+                  paddingBottom: "2.2rem"
                 }}
               >
-                {/* <img
-                alt="sign img"
-                style={{
-                  width: "30px",
-                  height: "30px",
-                  background: themeColor(),
-                }}
-                src={sign}
-              /> */}
                 <span
                   style={{
                     color: "white",
                     fontSize: "12px",
                     position: "relative",
-                    top: "2.6rem",
+                    top: "2.6rem"
                   }}
                 >
                   Signature
@@ -261,7 +173,7 @@ function FieldsComponent({
                   backgroundSize: "32px 33px",
                   backgroundRepeat: "no-repeat",
                   backgroundPosition: "center center",
-                  paddingBottom: "2.2rem",
+                  paddingBottom: "2.2rem"
                 }}
               >
                 <span
@@ -269,7 +181,7 @@ function FieldsComponent({
                     color: "white",
                     fontSize: "12px",
                     position: "relative",
-                    top: "2.6rem",
+                    top: "2.6rem"
                   }}
                 >
                   Stamp
@@ -283,8 +195,7 @@ function FieldsComponent({
           <div
             style={{
               background: themeColor(),
-
-              padding: "5px",
+              padding: "5px"
             }}
           >
             <span className="signedStyle">Fields</span>
@@ -299,7 +210,7 @@ function FieldsComponent({
                       fontWeight: "400",
                       fontSize: "15px",
                       padding: "3px 20px 0px 20px",
-                      color: "#bfbfbf",
+                      color: "#bfbfbf"
                     }}
                   >
                     Signature
@@ -310,7 +221,7 @@ function FieldsComponent({
                     style={{
                       width: "30px",
                       height: "28px",
-                      background: "#d3edeb",
+                      background: "#d3edeb"
                     }}
                     src={sign}
                   />
@@ -321,7 +232,7 @@ function FieldsComponent({
                       fontWeight: "400",
                       fontSize: "15px",
                       padding: "3px 0px 0px 35px",
-                      color: "#bfbfbf",
+                      color: "#bfbfbf"
                     }}
                   >
                     Stamp
@@ -332,7 +243,7 @@ function FieldsComponent({
                     style={{
                       width: "25px",
                       height: "28px",
-                      background: "#d3edeb",
+                      background: "#d3edeb"
                     }}
                     src={stamp}
                   />
@@ -355,7 +266,7 @@ function FieldsComponent({
                   style={{
                     opacity: isDragSign ? 0.5 : 1,
                     boxShadow:
-                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
+                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)"
                   }}
                 >
                   <span
@@ -363,7 +274,7 @@ function FieldsComponent({
                       fontWeight: "400",
                       fontSize: "15px",
                       padding: "3px 20px 0px 20px",
-                      color: "black",
+                      color: "black"
                     }}
                   >
                     Signature
@@ -373,7 +284,7 @@ function FieldsComponent({
                     style={{
                       width: "30px",
                       height: "28px",
-                      background: themeColor(),
+                      background: themeColor()
                     }}
                     src={sign}
                   />
@@ -393,7 +304,7 @@ function FieldsComponent({
                   style={{
                     opacity: isDragStamp ? 0.5 : 1,
                     boxShadow:
-                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
+                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)"
                   }}
                 >
                   <span
@@ -401,7 +312,7 @@ function FieldsComponent({
                       fontWeight: "400",
                       fontSize: "15px",
                       padding: "3px 0px 0px 35px",
-                      color: !pdfUrl ? "black" : "#bfbfbf",
+                      color: !pdfUrl ? "black" : "#bfbfbf"
                     }}
                   >
                     Stamp
@@ -412,7 +323,7 @@ function FieldsComponent({
                     style={{
                       width: "25px",
                       height: "28px",
-                      background: themeColor(),
+                      background: themeColor()
                     }}
                     src={stamp}
                   />
@@ -422,6 +333,25 @@ function FieldsComponent({
           </div>
         </div>
       )}
+      <ModalUi
+        title={"Recipients"}
+        isOpen={isSignersModal}
+        handleClose={handleModal}
+      >
+        <RecipientList
+          signerPos={signerPos}
+          signersdata={signersdata}
+          isSelectListId={isSelectListId}
+          setSignerObjId={setSignerObjId}
+          setIsSelectId={setIsSelectId}
+          setContractName={setContractName}
+          setUniqueId={setUniqueId}
+          setRoleName={setRoleName}
+          handleDeleteUser={handleDeleteUser}
+          handleRoleChange={handleRoleChange}
+          handleOnBlur={handleOnBlur}
+        />
+      </ModalUi>
     </>
   );
 }

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

@@ -34,7 +34,9 @@ function Header({
   dataTut4,
   alreadySign,
   isSignYourself,
-  setIsEmail
+  setIsEmail,
+  completeBtnTitle,
+  setIsEditTemplate
 }) {
   const isMobile = window.innerWidth < 767;
   const navigate = useNavigate();
@@ -345,7 +347,7 @@ function Header({
                               }}
                             >
                               <i
-                                class="fa fa-envelope"
+                                className="fa fa-envelope"
                                 style={{ marginRight: "2px" }}
                                 aria-hidden="true"
                               ></i>
@@ -415,7 +417,7 @@ function Header({
                         }}
                         data-tut={dataTut4}
                       >
-                        Send
+                        {completeBtnTitle ? completeBtnTitle : "Send"}
                       </div>
                     ) : (
                       <div
@@ -533,17 +535,17 @@ function Header({
           ) : isPlaceholder ? (
             <>
               {!isMailSend &&
-                signersdata.Signers &&
-                signersdata.Signers.length !== signerPos.length && (
+                signersdata.length > 0 &&
+                signersdata.length !== signerPos.length && (
                   <div>
                     {signerPos.length === 0 ? (
                       <span style={{ fontSize: "13px", color: "#f5405e" }}>
-                        Add all {signersdata.Signers.length - signerPos.length}{" "}
+                        Add {signersdata.length - signerPos.length}{" "}
                         recipients signature
                       </span>
                     ) : (
                       <span style={{ fontSize: "13px", color: "#f5405e" }}>
-                        Add {signersdata.Signers.length - signerPos.length} more
+                        Add {signersdata.length - signerPos.length} more
                         recipients signature
                       </span>
                     )}
@@ -551,6 +553,11 @@ function Header({
                 )}
 
               <div>
+                {setIsEditTemplate && (
+                  <button onClick={() => setIsEditTemplate(true)} style={{border:"none", outline:"none", textAlign:"center"}}>
+                    <i className="fa-solid fa-gear fa-lg"></i>
+                  </button>
+                )}
                 <button
                   onClick={() => {
                     navigate(-1);
@@ -573,7 +580,7 @@ function Header({
                   }}
                   className={isMailSend ? "sendMail" : "sendMail sendHover"}
                 >
-                  Send
+                  {completeBtnTitle ? completeBtnTitle : "Send"}
                 </button>
               </div>
             </>
@@ -723,7 +730,7 @@ function Header({
                 onClick={() => setIsEmail(true)}
               >
                 <i
-                  class="fa fa-envelope"
+                  className="fa fa-envelope"
                   style={{
                     color: "white",
                     fontSize: "15px",

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { themeColor } from "../../utils/ThemeColor/backColor";
+import { resizeBorderExtraWidth } from "../../utils/Utils";
+function PlaceholderBorder(props) {
+  const getResizeBorderExtraWidth = resizeBorderExtraWidth();
+
+  return (
+    <div
+      className="borderResize"
+      style={{
+        borderColor: themeColor(),
+        borderStyle: "dashed",
+        // width: props.pos.Width
+        //   ? props.pos.Width + getResizeBorderExtraWidth
+        //   : 150 + getResizeBorderExtraWidth,
+        // height: props.pos.Height
+        //   ? props.pos.Height + getResizeBorderExtraWidth
+        //   : 60 + getResizeBorderExtraWidth,
+        width:
+          props?.posWidth(props.pos, props?.isSignYourself) +
+          getResizeBorderExtraWidth,
+        height:
+          props?.posHeight(props.pos, props?.isSignYourself) +
+          getResizeBorderExtraWidth,
+        borderWidth: "0.2px",
+        overflow: "hidden"
+      }}
+    ></div>
+  );
+}
+
+export default PlaceholderBorder;

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

@@ -10,6 +10,7 @@ function RenderAllPdfPage({
   setAllPages,
   setPageNumber,
   setSignBtnPosition,
+  pageNumber
 }) {
   pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
@@ -20,75 +21,80 @@ function RenderAllPdfPage({
 
   return (
     <div className="showPages">
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
-        backgroundColor: "white",
-        height:"100%"
-        
-      }}
-    >
-      <div style={{ width: "140px" }}>
-        <div
-          style={{
-            background: themeColor(),
-            //  color:"white"
-          }}
-          className="signedStyle"
-        >
-          Pages
-        </div>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
+          backgroundColor: "white",
+          height: "100%"
+        }}
+      >
+        <div style={{ width: "140px" }}>
+          <div
+            style={{
+              background: themeColor()
+              //  color:"white"
+            }}
+            className="signedStyle"
+          >
+            Pages
+          </div>
 
-        
-        <div>
-          <RSC id="RSC-Example" style={{width:"135px",height:window.innerHeight-130+'px'}} >
-            <Document
-              onLoadSuccess={onDocumentLoad}
-              file={pdfUrl ? pdfUrl : signPdfUrl}
-              //   file="https://api.printnode.com/static/test/pdf/multipage.pdf"
+          <div>
+            <RSC
+              id="RSC-Example"
+              style={{
+                width: "135px",
+                height: window.innerHeight - 130 + "px"
+              }}
             >
-              {Array.from(new Array(allPages), (el, index) => (
-                <div
-                  key={index}
-                  style={{
-                    width: "100px",
-                    border: "2px solid #878787",
-                    // padding: "5px",
-                    margin: "10px",
+              <Document
+                onLoadSuccess={onDocumentLoad}
+                file={pdfUrl ? pdfUrl : signPdfUrl}
+                //   file="https://api.printnode.com/static/test/pdf/multipage.pdf"
+              >
+                {Array.from(new Array(allPages), (el, index) => (
+                  <div
+                    key={index}
+                    style={{
+                      width: "100px",
+                      border:
+                        pageNumber - 1 === index
+                          ? "2px solid red"
+                          : "2px solid #878787",
+                      // padding: "5px",
+                      margin: "10px",
 
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    contain: "content",
-                  }}
-                  onClick={() => {
-                    setPageNumber(index + 1);
-                    if (setSignBtnPosition) {
-                      setSignBtnPosition([]);
-                    }
-                  }}
-                >
-                  <Page
-                    key={`page_${index + 1}`}
-                    pageNumber={index + 1}
-                    width={100}
-                    height={100}
-                    scale={1}
-                    renderAnnotationLayer={false}
-                    renderTextLayer={false}
-                  />
-                </div>
-              ))}
-            </Document>
-          </RSC>
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      contain: "content"
+                    }}
+                    onClick={() => {
+                      setPageNumber(index + 1);
+                      if (setSignBtnPosition) {
+                        setSignBtnPosition([]);
+                      }
+                    }}
+                  >
+                    <Page
+                      key={`page_${index + 1}`}
+                      pageNumber={index + 1}
+                      width={100}
+                      height={100}
+                      scale={1}
+                      renderAnnotationLayer={false}
+                      renderTextLayer={false}
+                    />
+                  </div>
+                ))}
+              </Document>
+            </RSC>
+          </div>
+          <hr />
         </div>
-        <hr />
       </div>
-
-      
-    </div>
     </div>
   );
 }

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

@@ -1,161 +1,32 @@
-import React, { useState } from "react";
-import check from "../../assests/checkBox.png";
+import React from "react";
 import { themeColor } from "../../utils/ThemeColor/backColor";
+import "../../css/signerListPlace.css";
+import RecipientList from "../../premitives/RecipientList";
 
-function SignerListPlace({
-  signerPos,
-  signersdata,
-  isSelectListId,
-  setSignerObjId,
-  setIsSelectId,
-  setContractName
-}) {
-  const color = [
-    "#93a3db",
-    "#e6c3db",
-    "#c0e3bc",
-    "#bce3db",
-    "#b8ccdb",
-    "#ceb8db",
-    "#ffccff",
-    "#99ffcc",
-    "#cc99ff",
-    "#ffcc99",
-    "#66ccff",
-    "#ffffcc",
-  ];
-
-  const nameColor = [
-    "#304fbf",
-    "#7d5270",
-    "#5f825b",
-    "#578077",
-    "#576e80",
-    "#6d527d",
-    "#cc00cc",
-    "#006666",
-    "#cc00ff",
-    "#ff9900",
-    "#336699",
-    "#cc9900",
-  ];
-  const [isHover, setIsHover] = useState();
-
-  //function for onhover signer name change background color
-  const onHoverStyle = (ind) => {
-    const style = {
-      background: color[ind % color.length],
-      padding: "10px",
-      marginTop: "2px",
-      display: "flex",
-      flexDirection: "row",
-      borderBottom: "1px solid #e3e1e1",
-    };
-    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",
-
-      justifyContent: "space-between",
-    };
-    return style;
-  };
-
-  const getFirstLetter = (name) => {
-    const firstLetter = name.charAt(0);
-    return firstLetter;
-  };
-
+function SignerListPlace(props) {
   return (
-    <div  >
+    <div>
       <div
         style={{
           background: themeColor(),
-
-          padding: "5px",
+          padding: "5px"
         }}
       >
-        <span className="signedStyle">Reicipents</span>
+        <span className="signedStyle">Recipients</span>
       </div>
-       
       <div className="signerList">
-        {signersdata.Signers &&
-          signersdata.Signers.map((obj, ind) => {
-            return (
-              <div
-                data-tut="reactourFirst"
-                onMouseEnter={() => setIsHover(ind)}
-                onMouseLeave={() => setIsHover(null)}
-                key={ind}
-                style={
-                  isHover === ind || isSelectListId === ind
-                    ? onHoverStyle(ind)
-                    : nonHoverStyle(ind)
-                }
-                onClick={() => {
-                  setSignerObjId(obj.objectId);
-                  setIsSelectId(ind);
-                  setContractName(obj.className)
-                }}
-              >
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                  }}
-                >
-                  <div
-                    className="signerStyle"
-                    style={{
-                      background: nameColor[ind % nameColor.length],
-                      width: 20,
-                      height: 20,
-                      display: "flex",
-                      borderRadius: 30 / 2,
-                      justifyContent: "center",
-                      alignItems: "center",
-                      marginRight: "20px",
-                      marginTop: "5px",
-                    }}
-                  >
-                    <span
-                      style={{
-                        fontSize: "8px",
-                        textAlign: "center",
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {" "}
-                      {getFirstLetter(obj.Name)}
-                    </span>
-                  </div>
-                  <div style={{ display: "flex", flexDirection: "column" }}>
-                    <span className="userName">{obj.Name}</span>
-                    <span className="useEmail">{obj.Email}</span>
-                  </div>
-                </div>
-                {signerPos.map((data, key) => {
-                  return (
-                    data.signerObjId === obj.objectId && (
-                      <div key={key}>
-                        <img alt="no img" src={check} width={20} height={20} />
-                      </div>
-                    )
-                  );
-                })}
-
-                <hr />
-              </div>
-            );
-          })}
+        <RecipientList {...props} />
       </div>
-    
+      {props.handleAddSigner && (
+        <div
+          data-tut="reactourAddbtn"
+          className="addSignerBtn"
+          onClick={() => props.handleAddSigner()}
+        >
+          <i className="fa-solid fa-plus"></i>
+          <span style={{ marginLeft: 2 }}>Add role</span>
+        </div>
+      )}
     </div>
   );
 }

microfrontends/SignDocuments/src/Component/recipientSignPdf.js

@@ -794,8 +794,9 @@ function EmbedPdfImage() {
             allPages={allPages}
             setAllPages={setAllPages}
             setPageNumber={setPageNumber}
+            pageNumber={pageNumber}
           />
-          {/* <div style={{width:"160px",border:"1px solid red"}}>kebjke</div> */}
+
           {/* pdf render view */}
           <div
             style={{

microfrontends/SignDocuments/src/Routes.js

@@ -9,6 +9,7 @@ import DraftDocument from "./Component/DraftDocument";
 import PdfRequestFiles from "./Component/PdfRequestFiles";
 import LegaDrive from "./Component/LegaDrive/LegaDrive";
 import PageNotFound from "./Component/PageNotFound";
+import TemplatePlaceHolder from "./Component/TemplatePlaceholder";
 
 // `AppRoutes` is used to define route path of app and
 // it expose to host app, check moduleFederation.config.js for more
@@ -47,6 +48,7 @@ function AppRoutes() {
         {/* lega drive route */}
         <Route path="/legadrive" element={<LegaDrive />} />
         {/* Page Not Found */}
+        <Route path="/template/:templateId" element={<TemplatePlaceHolder />} />
         <Route path="*" element={<PageNotFound />} />
       </Routes>
     </div>

microfrontends/SignDocuments/src/css/AddUser.css

@@ -0,0 +1,79 @@
+.addusercontainer {
+    height: 100%;
+    padding: 20px;
+}
+
+.loaderdiv {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.3);
+
+}
+
+.form-wrapper {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 8px;
+}
+
+.form-section {
+    margin-bottom: 0.75rem;
+}
+
+.checkbox-label {
+    margin-left: 0.5rem;
+    color: #4b5563;
+}
+
+.addUserInput {
+    padding: 0.5rem 0.75rem;
+    width: 100%;
+    border-width: 1px;
+    border-color: #d1d5db;
+    border-radius: 0.375rem;
+    outline: none;
+    font-size: 0.75rem;
+}
+
+
+.buttoncontainer {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: flex-start;
+}
+
+.submitbutton {
+    background: #1ab6ce;
+    border-radius: 2px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+    border: none;
+    text-transform: uppercase;
+    font-size: 13px;
+    font-weight: 600;
+    padding: 0.375rem 0.75rem;
+    text-align: center;
+    color: #ffffff;
+    outline: none;
+}
+/* For classes: bg-[#188ae2] text-sm text-white px-4 py-2 rounded ml-2 shadow focus:outline-none */
+.resetbutton {
+    background-color: #188ae2;
+    border-radius: 2px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+    border: none;
+    text-transform: uppercase;
+    font-size: 13px;
+    font-weight: 600;
+    padding: 0.375rem 0.75rem;
+    text-align: center;
+    color: #ffffff;
+    outline: none;
+    margin-left: 8px;
+}

microfrontends/SignDocuments/src/css/ModalUi.css

@@ -0,0 +1,72 @@
+.modaloverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.75);
+    justify-content: center;
+    align-items: center;
+    z-index: 900;
+}
+
+.modalcontainer {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    z-index: 901;
+    max-height: 80%;
+    min-width: 500px;
+    overflow-y: auto;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* Internet Explorer and Edge */
+}
+
+/* Hide scrollbar for Webkit browsers */
+.modalcontainer::-webkit-scrollbar {
+    display: none;
+}
+
+.modalheader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    border-bottom: 1px solid #ccc;
+    color: #ffffff;
+}
+
+/* Styling for the modal title */
+.modaltitle {
+    font-size: 1.2rem;
+    font-weight:normal;
+}
+
+/* Styling for the close button */
+.closebtn {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+@media (max-width:767px) {
+
+    .modalcontainer {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+        z-index: 1000;
+        max-height: 80%;
+        min-width: 90%;
+        overflow-y: auto;
+    }
+}

microfrontends/SignDocuments/src/css/signature.css

@@ -110,10 +110,6 @@
   padding: 5px 10px;
 }
 
-.emailChipClose:hover {
-  cursor: pointer;
-}
-
 .addEmailInput {
   padding: 10px;
   border-radius: 4px;
@@ -174,19 +170,44 @@
   padding: 0px 5.1px 1px 5px;
 }
 
-.placeholderBlock {
-  padding: 0px;
+.signCloseBtn {
   position: absolute;
-  border-style: dashed;
-  width: 150px;
-  height: 60px;
-  background: #daebe0;
-  text-align: center;
-  justify-content: center;
-  border-width: 0.2px;
-
+  right: -8px;
+  top: -18px;
+  font-size: 14px;
+  cursor: pointer;
+  z-index: 2;
+  background: white;
+}
+.signCopy {
+  position: absolute;
+  right: 12px;
+  top: -18px;
+  font-size: 13px;
+  cursor: pointer;
+  z-index: 2;
+  background: white;
 }
 
+.signUserIcon {
+  position: absolute;
+  right: 32px;
+  top: -18px;
+  font-size: 13px;
+  cursor: pointer;
+  z-index: 2;
+  background: white;
+}
+.ScrollbarsCustom-Track {
+  width: 4px !important;
+}
+.signYourselfBlock {
+  padding: 0px;
+ display: flex !important;
+  text-align: center !important;
+  justify-content: center !important;
+  align-items: center !important;
+}
 .finishBtn {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
   padding: 3px 30px;
@@ -531,7 +552,6 @@
   gap: 5px;
   border: none;
   background-color: #887abf;
-
   width: 200px;
   white-space: nowrap;
   overflow: hidden !important;

microfrontends/SignDocuments/src/css/signerListPlace.css

@@ -0,0 +1,16 @@
+.addSignerBtn{
+    padding: 10px;
+    margin-top: 2px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid #47a3ad;
+    margin: 1px;
+    color: #47a3ad;
+    cursor: pointer
+}
+.addSignerBtn:hover{
+    background: #47a3ad;
+    color: #ffffff;
+}

microfrontends/SignDocuments/src/premitives/AddUser.js

@@ -0,0 +1,293 @@
+import React, { useState, useEffect } from "react";
+import Parse from "parse";
+import axios from "axios";
+import "../css/AddUser.css";
+const AddUser = (props) => {
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [email, setEmail] = useState("");
+  const [addYourself, setAddYourself] = useState(false);
+  const [isLoader, setIsLoader] = useState(false);
+  const [isUserExist, setIsUserExist] = useState(false);
+  const parseBaseUrl = localStorage.getItem("baseUrl");
+  const parseAppId = localStorage.getItem("parseAppId");
+  Parse.serverURL = parseBaseUrl;
+  Parse.initialize(parseAppId);
+
+  useEffect(() => {
+    checkUserExist();
+  }, []);
+  // Load user details from localStorage when the component mounts
+  useEffect(() => {
+    const savedUserDetails = JSON.parse(
+      localStorage.getItem("UserInformation")
+    );
+    if (savedUserDetails && addYourself) {
+      setName(savedUserDetails.name);
+      setPhone(savedUserDetails.phone);
+      setEmail(savedUserDetails.email);
+    }
+  }, [addYourself]);
+
+  const checkUserExist = async () => {
+    const user = Parse.User.current();
+    try {
+      const query = new Parse.Query("contracts_Contactbook");
+      query.equalTo("CreatedBy", user);
+      query.notEqualTo("IsDeleted", true);
+      query.equalTo("Email", user.getEmail());
+      const res = await query.first();
+      // console.log(res);
+      if (!res) {
+        setIsUserExist(true);
+      }
+    } catch (err) {
+      console.log("err", err);
+    }
+  };
+  // Define a function to handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsLoader(true);
+    Parse.serverURL = parseBaseUrl;
+    Parse.initialize(parseAppId);
+    try {
+      const contactQuery = new Parse.Object("contracts_Contactbook");
+      contactQuery.set("Name", name);
+      contactQuery.set("Phone", phone);
+      contactQuery.set("Email", email);
+      contactQuery.set("UserRole", "contracts_Guest");
+
+      if (localStorage.getItem("TenetId")) {
+        contactQuery.set("TenantId", {
+          __type: "Pointer",
+          className: "partners_Tenant",
+          objectId: localStorage.getItem("TenetId")
+        });
+      }
+
+      try {
+        const _users = Parse.Object.extend("User");
+        const _user = new _users();
+        _user.set("name", name);
+        _user.set("username", email);
+        _user.set("email", email);
+        _user.set("phone", phone);
+        _user.set("password", phone);
+
+        const user = await _user.save();
+        if (user) {
+          const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
+          const headers = {
+            "Content-Type": "application/json",
+            "X-Parse-Application-Id": parseAppId,
+            sessionToken: localStorage.getItem("accesstoken")
+          };
+          const body = {
+            appName: localStorage.getItem("_appName"),
+            roleName: "contracts_Guest",
+            userId: user.id
+          };
+          await axios.post(roleurl, body, { headers: headers });
+          const currentUser = Parse.User.current();
+          contactQuery.set(
+            "CreatedBy",
+            Parse.User.createWithoutData(currentUser.id)
+          );
+
+          contactQuery.set("UserId", user);
+          const acl = new Parse.ACL();
+          acl.setPublicReadAccess(true);
+          acl.setPublicWriteAccess(true);
+          acl.setReadAccess(currentUser.id, true);
+          acl.setWriteAccess(currentUser.id, true);
+
+          contactQuery.setACL(acl);
+
+          const res = await contactQuery.save();
+
+          const parseData = JSON.parse(JSON.stringify(res));
+          props.details(parseData);
+          if (props.closePopup) {
+            props.closePopup();
+          }
+
+          setIsLoader(false);
+          // Reset the form fields
+          setAddYourself(false);
+          setName("");
+          setPhone("");
+          setEmail("");
+        }
+      } catch (err) {
+        console.log("err ", err);
+        if (err.code === 202) {
+          const params = { email: email };
+          const userRes = await Parse.Cloud.run("getUserId", params);
+          const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
+          const headers = {
+            "Content-Type": "application/json",
+            "X-Parse-Application-Id": parseAppId,
+            sessionToken: localStorage.getItem("accesstoken")
+          };
+          const body = {
+            appName: localStorage.getItem("_appName"),
+            roleName: "contracts_Guest",
+            userId: userRes.id
+          };
+          await axios.post(roleurl, body, { headers: headers });
+          const currentUser = Parse.User.current();
+          contactQuery.set(
+            "CreatedBy",
+            Parse.User.createWithoutData(currentUser.id)
+          );
+
+          contactQuery.set("UserId", {
+            __type: "Pointer",
+            className: "_User",
+            objectId: userRes.id
+          });
+          const acl = new Parse.ACL();
+          acl.setPublicReadAccess(true);
+          acl.setPublicWriteAccess(true);
+          acl.setReadAccess(currentUser.id, true);
+          acl.setWriteAccess(currentUser.id, true);
+
+          contactQuery.setACL(acl);
+          const res = await contactQuery.save();
+
+          const parseData = JSON.parse(JSON.stringify(res));
+          props.details({
+            value: parseData[props.valueKey],
+            label: parseData[props.displayKey]
+          });
+          if (props.closePopup) {
+            props.closePopup();
+          }
+          setIsLoader(false);
+          // Reset the form fields
+          setAddYourself(false);
+          setName("");
+          setPhone("");
+          setEmail("");
+        }
+      }
+    } catch (err) {
+      // console.log("err", err);
+      setIsLoader(false);
+      alert("something went wrong!");
+    }
+  };
+
+  // Define a function to handle the "add yourself" checkbox
+  const handleAddYourselfChange = () => {
+    if (addYourself) {
+      setAddYourself(false);
+      setName("");
+      setPhone("");
+      setEmail("");
+    } else {
+      setAddYourself(true);
+    }
+  };
+  const handleReset = () => {
+    setAddYourself(false);
+  };
+
+  return (
+    <div className="addusercontainer">
+      {isLoader && (
+        <div className="loaderdiv">
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
+        </div>
+      )}
+      <div className="form-wrapper">
+        <div style={{ fontSize: 14, fontWeight: "700" }}>Add User</div>
+
+        {isUserExist && (
+          <div className="form-section">
+            <input
+              type="checkbox"
+              id="addYourself"
+              checked={addYourself}
+              onChange={handleAddYourselfChange}
+              className="form-checkbox"
+            />
+            <label htmlFor="addYourself" className="checkbox-label ">
+              Add Yourself
+            </label>
+          </div>
+        )}
+        <form onSubmit={handleSubmit}>
+          <div className="form-section">
+            <label htmlFor="name" style={{ fontSize: 13 }}>
+              Name
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
+            </label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+              disabled={addYourself}
+              className="addUserInput"
+            />
+          </div>
+          <div className="form-section">
+            <label htmlFor="email" style={{ fontSize: 13 }}>
+              Email
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              disabled={addYourself}
+              className="addUserInput"
+            />
+          </div>
+          <div className="form-section">
+            <label htmlFor="phone" style={{ fontSize: 13 }}>
+              Phone
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
+            </label>
+            <input
+              type="text"
+              id="phone"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              required
+              disabled={addYourself}
+              className="addUserInput"
+            />
+          </div>
+
+          <div className="buttoncontainer">
+            <button type="submit" className="submitbutton">
+              Submit
+            </button>
+            <button
+              type="button"
+              onClick={() => handleReset()}
+              className="resetbutton"
+            >
+              Reset
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default AddUser;

microfrontends/SignDocuments/src/premitives/Alert.js

@@ -0,0 +1,30 @@
+import React from "react";
+
+const Alert = ({ children, type }) => {
+  const textcolor = type ? theme(type) : theme();
+  function theme(color) {
+    switch (color) {
+      case "success":
+        return "border-[#c3e6cb] bg-[#d4edda] text-[#155724]";
+      case "info":
+        return "border-[#adcdeb] bg-[#c1daf0] text-[#153756]";
+      case "danger":
+        return "border-[#f0a8a8] bg-[#f4bebe] text-[#c42121]";
+      default:
+        return "border-[#d6d6d6] bg-[#d9d9d9] text-[#575757]";
+    }
+  }
+  return (
+    <>
+      {children && (
+        <div
+          className={`z-40 fixed top-20 left-1/2 transform -translate-x-1/2 border-[1px] text-sm ${textcolor} rounded py-[.75rem] px-[1.25rem] `}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Alert;

microfrontends/SignDocuments/src/premitives/CreateFolder.js

@@ -0,0 +1,147 @@
+import React, { useEffect, useState } from "react";
+import Parse from "parse";
+import Alert from "./Alert";
+
+const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
+  const folderPtr = {
+    __type: "Pointer",
+    className: folderCls,
+    objectId: parentFolderId
+  };
+  const [name, setName] = useState("");
+  const [folderList, setFolderList] = useState([]);
+  const [isAlert, setIsAlert] = useState(false);
+  const [selectedParent, setSelectedParent] = useState();
+  const [alert, setAlert] = useState({ type: "info", message: "" });
+  useEffect(() => {
+    fetchFolder();
+    // eslint-disable-next-line
+  }, []);
+
+  const fetchFolder = async () => {
+    try {
+    const FolderQuery = new Parse.Query(folderCls);
+      if (parentFolderId) {
+        FolderQuery.equalTo("Folder", folderPtr);
+        FolderQuery.equalTo("Type", "Folder");
+      } else {
+        FolderQuery.doesNotExist("Folder");
+        FolderQuery.equalTo("Type", "Folder");
+      }
+
+      const res = await FolderQuery.find();
+      if (res) {
+        const result = JSON.parse(JSON.stringify(res));
+        if (result) {
+          setFolderList(result);
+        }
+      }
+    } catch (error) {
+      console.log("Err ", error);
+    }
+  };
+  const handleCreateFolder = async (event) => {
+    event.preventDefault();
+    if (name) {
+      const currentUser = Parse.User.current();
+      const exsitQuery = new Parse.Query(folderCls);
+      exsitQuery.equalTo("Name", name);
+      exsitQuery.equalTo("Type", "Folder");
+      if (parentFolderId) {
+        exsitQuery.equalTo("Folder", folderPtr);
+      }
+      const templExist = await exsitQuery.first();
+      if (templExist) {
+        setAlert({ type: "dange", message: "Folder already exist!" });
+        setIsAlert(true);
+        setTimeout(() => {
+          setIsAlert(false);
+        }, 1000);
+      } else {
+        const template = new Parse.Object(folderCls);
+        template.set("Name", name);
+        template.set("Type", "Folder");
+
+        if (selectedParent) {
+          template.set("Folder", {
+            __type: "Pointer",
+            className: folderCls,
+            objectId: selectedParent
+          });
+        } else if (parentFolderId) {
+          template.set("Folder", folderPtr);
+        }
+        template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
+        const res = await template.save();
+        if (res) {
+          if (onSuccess) {
+            setAlert({
+              type: "success",
+              message: "Folder created successfully!"
+            });
+            setIsAlert(true);
+            setTimeout(() => {
+              setIsAlert(false);
+            }, 1000);
+            onSuccess(res);
+          }
+        }
+      }
+    } else {
+      setAlert({ type: "info", message: "Please fill folder name" });
+      setIsAlert(true);
+      setTimeout(() => {
+        setIsAlert(false);
+      }, 1000);
+    }
+  };
+  const handleOptions = (e) => {
+    setSelectedParent(e.target.value);
+  };
+  return (
+    <div>
+      {isAlert && <Alert type={alert.type}>{alert.message}</Alert>}
+      <div id="createFolder">
+        <h1 className="text-base font-semibold">Create Folder</h1>
+        <div className="text-xs mt-2">
+          <label className="block">
+            Name<span style={{ color: "red", fontSize: 13 }}> *</span>
+          </label>
+          <input
+            className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+        </div>
+        <div className="text-xs mt-2">
+          <label className="block">Parent Folder</label>
+          <select
+            value={selectedParent}
+            onChange={handleOptions}
+            className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+          >
+            <option>select</option>
+            {folderList.length > 0 &&
+              folderList.map((x) => (
+                <option key={x.objectId} value={x.objectId}>
+                  {x.Name}
+                </option>
+              ))}
+          </select>
+        </div>
+        <div>
+          <button
+            onClick={handleCreateFolder}
+            className="flex items-center rounded p-2 bg-[#33bbff] text-white mt-3"
+          >
+            <i className="fa-solid fa-plus mr-1"></i>
+            <span>Create</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateFolder;

microfrontends/SignDocuments/src/premitives/ModalUi.js

@@ -0,0 +1,29 @@
+import React from "react";
+import "../css/ModalUi.css";
+const ModalUi = ({ children, title, isOpen, handleClose, headerColor }) => {
+  return (
+    <>
+      {isOpen && (
+        <div className="modaloverlay">
+          <div className="modalcontainer">
+           {title && <div
+              style={{ background: headerColor ? headerColor : "#32a3ac" }}
+              className="modalheader"
+            >
+              <div className="modaltitle">{title}</div>
+              <div
+                className="closebtn"
+                onClick={() => handleClose && handleClose()}
+              >
+                &times;
+              </div>
+            </div>}
+            <div>{children}</div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ModalUi;

microfrontends/SignDocuments/src/premitives/RecipientList.js

@@ -0,0 +1,205 @@
+import React, { useRef, useState } from "react";
+import "../css/signerListPlace.css";
+import { darkenColor, getFirstLetter } from "../utils/Utils";
+
+const RecipientList = (props) => {
+  const color = [
+    "#93a3db",
+    "#e6c3db",
+    "#c0e3bc",
+    "#bce3db",
+    "#b8ccdb",
+    "#ceb8db",
+    "#ffccff",
+    "#99ffcc",
+    "#cc99ff",
+    "#ffcc99",
+    "#66ccff",
+    "#ffffcc"
+  ];
+
+  const nameColor = [
+    "#304fbf",
+    "#7d5270",
+    "#5f825b",
+    "#578077",
+    "#576e80",
+    "#6d527d",
+    "#cc00cc",
+    "#006666",
+    "#cc00ff",
+    "#ff9900",
+    "#336699",
+    "#cc9900"
+  ];
+  const [isHover, setIsHover] = useState();
+  const [isEdit, setIsEdit] = useState(false);
+  //function for onhover signer name change background color
+  const inputRef = useRef(null);
+  const onHoverStyle = (ind, blockColor) => {
+    const style = {
+      background: blockColor ? blockColor : color[ind % color.length],
+      padding: "10px",
+      marginTop: "2px",
+      display: "flex",
+      flexDirection: "row",
+      borderBottom: "1px solid #e3e1e1",
+      alignItems: "center"
+    };
+    return style;
+  };
+  //function for onhover signer name remove background color
+  const nonHoverStyle = (ind) => {
+    const style = {
+      padding: "10px",
+      marginTop: "2px",
+      display: "flex",
+      flexDirection: "row",
+      borderBottom: "1px solid #e3e1e1",
+      alignItems: "center"
+    };
+    return style;
+  };
+  const isWidgetExist = (Id) => {
+    return props.signerPos.some((x) => x.Id === Id);
+  };
+
+  return (
+    <>
+      {props.signersdata.length > 0 &&
+        props.signersdata.map((obj, ind) => {
+          return (
+            <div
+              data-tut="reactourFirst"
+              onMouseEnter={() => setIsHover(ind)}
+              onMouseLeave={() => setIsHover(null)}
+              key={ind}
+              style={
+                isHover === ind || props.isSelectListId === ind
+                  ? onHoverStyle(ind, obj.blockColor)
+                  : nonHoverStyle(ind)
+              }
+              onClick={() => {
+                props.setSignerObjId(obj?.objectId);
+                props.setIsSelectId(ind);
+                props.setContractName(obj?.className);
+                props.setUniqueId(obj.Id);
+                props.setRoleName(obj.Role);
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  width: "100%"
+                }}
+              >
+                <div
+                  className="signerStyle"
+                  style={{
+                    background: obj.blockColor
+                      ? darkenColor(obj.blockColor, 0.4)
+                      : nameColor[ind % nameColor.length],
+                    width: 30,
+                    height: 30,
+                    display: "flex",
+                    borderRadius: 30 / 2,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    marginRight: "12px"
+                  }}
+                >
+                  <span
+                    style={{
+                      fontSize: "12px",
+                      textAlign: "center",
+                      fontWeight: "bold",
+                      color: "white",
+                      textTransform: "uppercase"
+                    }}
+                  >
+                    {isWidgetExist(obj.Id) ? (
+                      <i className="fa-solid fa-check"></i>
+                    ) : (
+                      <>
+                        {obj.Name
+                          ? getFirstLetter(obj.Name)
+                          : getFirstLetter(obj.Role)}
+                      </>
+                    )}
+                  </span>
+                </div>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: obj.Name ? "column" : "row",
+                    alignItems: "center"
+                  }}
+                >
+                  {obj.Name ? (
+                    <span className="userName" style={{ cursor: "default" }}>
+                      {obj.Name}
+                    </span>
+                  ) : (
+                    <>
+                      <span
+                        className="userName"
+                        onClick={() => {
+                          setIsEdit({ [obj.Id]: true });
+                          props.setRoleName(obj.Role);
+                        }}
+                      >
+                        {isEdit?.[obj.Id] && props.handleRoleChange ? (
+                          <input
+                            ref={inputRef}
+                            style={{
+                              backgroundColor: "transparent",
+                              width: "inherit"
+                            }}
+                            value={obj.Role}
+                            onChange={(e) => props.handleRoleChange(e, obj.Id)}
+                            onBlur={() => {
+                              setIsEdit({});
+                              props.handleOnBlur(obj.Role, obj.Id);
+                            }}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter") {
+                                e.preventDefault();
+                                inputRef.current.blur();
+                              }
+                            }}
+                          />
+                        ) : (
+                          obj.Role
+                        )}
+                      </span>
+                    </>
+                  )}
+                  {obj.Name && (
+                    <span className="useEmail" style={{ cursor: "default" }}>
+                      {obj.Role}
+                    </span>
+                  )}
+                </div>
+              </div>
+              {props.handleDeleteUser && (
+                <div
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    props.handleDeleteUser(obj.Id);
+                  }}
+                  style={{ cursor: "pointer" }}
+                >
+                  <i className="fa-regular fa-trash-can"></i>
+                </div>
+              )}
+              <hr />
+            </div>
+          );
+        })}
+    </>
+  );
+};
+
+export default RecipientList;

microfrontends/SignDocuments/src/premitives/SelectFolder.js

@@ -0,0 +1,348 @@
+import React, { useEffect, useState } from "react";
+import Parse from "parse";
+import CreateFolder from "./CreateFolder";
+import ModalUi from './ModalUi'
+
+const SelectFolder = ({ required, onSuccess, folderCls }) => {
+  const [isOpen, SetIsOpen] = useState(false);
+  const [clickFolder, setClickFolder] = useState("");
+  const [selectFolder, setSelectedFolder] = useState({});
+  const [folderList, setFolderList] = useState([]);
+  const [tabList, setTabList] = useState([]);
+  const [isLoader, setIsLoader] = useState(false);
+  const [folderPath, setFolderPath] = useState("");
+  const [isAdd, setIsAdd] = useState(false);
+  useEffect(() => {
+    if (isOpen) {
+      setIsAdd(false);
+      setClickFolder({});
+      setFolderList([]);
+      setTabList([]);
+      fetchFolder();
+    }
+  }, [isOpen]);
+  const fetchFolder = async (folderPtr) => {
+    setIsLoader(true);
+    try {
+      const FolderQuery = new Parse.Query(folderCls);
+      if (folderPtr) {
+        FolderQuery.equalTo("Folder", folderPtr);
+        FolderQuery.equalTo("Type", "Folder");
+      } else {
+        FolderQuery.doesNotExist("Folder");
+        FolderQuery.equalTo("Type", "Folder");
+      }
+
+      const res = await FolderQuery.find();
+      if (res) {
+        const result = JSON.parse(JSON.stringify(res));
+        if (result) {
+          setFolderList(result);
+          setIsLoader(false);
+        }
+        setIsLoader(false);
+      }
+    } catch (error) {
+      setIsLoader(false);
+    }
+  };
+  const handleSelect = (item) => {
+    setFolderList([]);
+    setClickFolder({ ObjectId: item.objectId, Name: item.Name });
+    if (tabList.length > 0) {
+      const tab = tabList.some((x) => x.objectId === item.objectId);
+      if (!tab) {
+        setTabList((tabs) => [...tabs, item]);
+        const folderPtr = {
+          __type: "Pointer",
+          className: folderCls,
+          objectId: item.objectId
+        };
+        fetchFolder(folderPtr);
+      }
+    } else {
+      setTabList((tabs) => [...tabs, item]);
+      const folderPtr = {
+        __type: "Pointer",
+        className: folderCls,
+        objectId: item.objectId
+      };
+
+      fetchFolder(folderPtr);
+    }
+  };
+
+  const handleSubmit = () => {
+    let url = "Root";
+    tabList.forEach((t) => {
+      url = url + " / " + t.Name;
+    });
+    setFolderPath(url);
+    setSelectedFolder(clickFolder);
+    if (onSuccess) {
+      onSuccess(clickFolder);
+    }
+    SetIsOpen(false);
+  };
+  const handleCancel = () => {
+    SetIsOpen(false);
+    setClickFolder({});
+    setFolderList([]);
+    setTabList([]);
+  };
+
+  const removeTabListItem = async (e, i) => {
+    e.preventDefault();
+    // setEditable(false);
+    if (!isAdd) {
+      setIsLoader(true);
+      let folderPtr;
+      if (i) {
+        setFolderList([]);
+        let list = tabList.filter((itm, j) => {
+          if (j <= i) {
+            return itm;
+          }
+        });
+        let _len = list.length - 1;
+        folderPtr = {
+          __type: "Pointer",
+          className: folderCls,
+          objectId: list[_len].objectId
+        };
+        setTabList(list);
+      } else {
+        setClickFolder({});
+        setSelectedFolder({});
+        setFolderList([]);
+        setTabList([]);
+      }
+      fetchFolder(folderPtr);
+    }
+  };
+  const handleCreate = () => {
+    setIsAdd(!isAdd);
+  };
+  const handleAddFolder = () => {
+    setFolderList([]);
+    if (clickFolder && clickFolder.ObjectId) {
+      fetchFolder({
+        __type: "Pointer",
+        className: folderCls,
+        objectId: clickFolder.ObjectId
+      });
+    } else {
+      fetchFolder();
+    }
+  };
+  return (
+    <div className="text-xs mt-2">
+      <div>
+        <label className="block">
+          Select Folder
+          {required && <span style={{ color: "red", fontSize: 13 }}> *</span>}
+        </label>
+      </div>
+      <div className="rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
+        <div>
+          <i
+            className="far fa-folder-open text-[40px] text-[#33bbff]"
+            style={{ fontSize: "40px" }}
+            aria-hidden="true"
+          ></i>
+        </div>
+        <div className="font-semibold ">
+          <div className="flex items-center gap-2">
+            <p>
+              {selectFolder && selectFolder.Name ? selectFolder.Name : "Root"}
+            </p>
+            <div className="text-black text-sm" onClick={() => SetIsOpen(true)}>
+              <i
+                className="fa fa-pencil"
+                title="Select Folder"
+                aria-hidden="true"
+              ></i>
+            </div>
+          </div>
+          <p className="text-[10px] text-gray-400">
+            {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
+          </p>
+        </div>
+      </div>
+      <ModalUi id="asd" title={"Select Folder"} isOpen={isOpen} handleClose={handleCancel}>          <div className="w-full min-w-[300px] md:min-w-[500px] px-3">
+            <div className="py-2 text-[#ac4848] text-[14px] font-[500]">
+              <span
+                className="cursor-pointer"
+                title="Root"
+                onClick={(e) => removeTabListItem(e)}
+              >
+                Root /{" "}
+              </span>
+              {tabList &&
+                tabList.map((tab, i) => (
+                  <React.Fragment key={`${tab.objectId}-${i}`}>
+                    <span
+                      className="cursor-pointer"
+                      title={tab.Name}
+                      onClick={(e) => removeTabListItem(e, i)}
+                    >
+                      {tab.Name}
+                    </span>
+                    {" / "}
+                  </React.Fragment>
+                ))}
+              <hr />
+            </div>
+            <div className="mt-2 mb-3">
+              {!isAdd &&
+                folderList.length > 0 &&
+                folderList.map((folder) => (
+                  <div
+                    key={folder.Name}
+                    className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer"
+                    onClick={() => handleSelect(folder)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <i
+                        className="fa fa-folder text-[#33bbff] text-[1.4rem]"
+                        aria-hidden="true"
+                      ></i>
+                      <span className="font-semibold">{folder.Name}</span>
+                    </div>
+                  </div>
+                ))}
+              {isAdd && (
+                <CreateFolder
+                  parentFolderId={clickFolder && clickFolder.ObjectId}
+                  folderCls={folderCls}
+                  onSuccess={handleAddFolder}
+                />
+              )}
+              {isLoader && (
+                <div className="flex justify-center">
+                  <i className="fa-solid fa-spinner fa-spin-pulse text-[30px]"></i>
+                </div>
+              )}
+            </div>
+          </div>
+          <hr />
+          <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
+            <div
+              className="text-[30px] cursor-pointer text-[#33bbff]"
+              title="Save Here"
+              onClick={handleCreate}
+            >
+              {isAdd ? (
+                <i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
+              ) : (
+                <i className="fa-solid fa-square-plus" aria-hidden="true"></i>
+              )}
+            </div>
+            <div
+              className="text-[30px] cursor-pointer"
+              title="Save Here"
+              onClick={handleSubmit}
+            >
+              <i className="fas fa-save" aria-hidden="true"></i>
+            </div>
+          </div></ModalUi>
+      {/* {isOpen && (
+        <div
+          className={`fixed z-40 top-20 left-1/2 transform -translate-x-1/2 border-[1px] text-sm bg-white rounded `}
+        >
+          <div className="flex justify-between items-center py-[.75rem] px-[1.25rem] bg-[#f5f5f5]">
+            <div className="font-semibold text-lg text-black">
+              Select Folder
+            </div>
+            <div
+              onClick={handleCancel}
+              className="px-2 py-1 border-[1px] border-[#8a8a8a] bg-white rounded cursor-pointer"
+            >
+              <i className="fa-solid fa-xmark"></i>
+            </div>
+          </div>
+          <hr />
+          <div className="w-full min-w-[300px] md:min-w-[500px] px-3">
+            <div className="py-2 text-[#ac4848] text-[14px] font-[500]">
+              <span
+                className="cursor-pointer"
+                title="Root"
+                onClick={(e) => removeTabListItem(e)}
+              >
+                Root /{" "}
+              </span>
+              {tabList &&
+                tabList.map((tab, i) => (
+                  <React.Fragment key={`${tab.objectId}-${i}`}>
+                    <span
+                      className="cursor-pointer"
+                      title={tab.Name}
+                      onClick={(e) => removeTabListItem(e, i)}
+                    >
+                      {tab.Name}
+                    </span>
+                    {" / "}
+                  </React.Fragment>
+                ))}
+              <hr />
+            </div>
+            <div className="mt-2 mb-3">
+              {!isAdd &&
+                folderList.length > 0 &&
+                folderList.map((folder) => (
+                  <div
+                    key={folder.Name}
+                    className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer"
+                    onClick={() => handleSelect(folder)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <i
+                        className="fa fa-folder text-[#33bbff] text-[1.4rem]"
+                        aria-hidden="true"
+                      ></i>
+                      <span className="font-semibold">{folder.Name}</span>
+                    </div>
+                  </div>
+                ))}
+              {isAdd && (
+                <CreateFolder
+                  parentFolderId={clickFolder && clickFolder.ObjectId}
+                  folderCls={folderCls}
+                  onSuccess={handleAddFolder}
+                />
+              )}
+              {isLoader && (
+                <div className="flex justify-center">
+                  <i className="fa-solid fa-spinner fa-spin-pulse text-[30px]"></i>
+                </div>
+              )}
+            </div>
+          </div>
+          <hr />
+          <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
+            <div
+              className="text-[30px] cursor-pointer text-[#33bbff]"
+              title="Save Here"
+              onClick={handleCreate}
+            >
+              {isAdd ? (
+                <i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
+              ) : (
+                <i className="fa-solid fa-square-plus" aria-hidden="true"></i>
+              )}
+            </div>
+            <div
+              className="text-[30px] cursor-pointer"
+              title="Save Here"
+              onClick={handleSubmit}
+            >
+              <i className="fas fa-save" aria-hidden="true"></i>
+            </div>
+          </div>
+        </div>
+      )} */}
+    </div>
+  );
+};
+
+export default SelectFolder;

microfrontends/SignDocuments/src/premitives/SelectSigners.js

@@ -0,0 +1,101 @@
+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();
+  const [userData, setUserData] = useState({});
+  const [isError, setIsError]= useState(false)
+  const parseBaseUrl = localStorage.getItem("baseUrl");
+  const parseAppId = localStorage.getItem("parseAppId");
+  Parse.serverURL = parseBaseUrl;
+  Parse.initialize(parseAppId);
+
+  // `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 = () => {
+    if(userData && userData.objectId){
+      props.details(userData);
+      if (props.closePopup) {
+        props.closePopup();
+      }
+    }else{
+      setIsError(true)
+      setTimeout(()=> setIsError(false), 1000)
+    }
+  };
+
+  const loadOptions = async (inputValue) => {
+    try {
+      const currentUser = Parse.User.current();
+      const contactbook = new Parse.Query("contracts_Contactbook");
+      contactbook.equalTo(
+        "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);
+        setUserList(res);
+        return await res.map((item) => ({
+          label: item.Email,
+          value: item.objectId
+        }));
+      }
+    } catch (error) {
+      console.log("err", error);
+    }
+  };
+
+  return (
+    <div className="addusercontainer">
+      <div className="form-wrapper">
+        <div className="form-section" style={{marginBottom: 0}}>
+          <label style={{ fontSize: 14 , fontWeight: "700"}}>Choose User</label>
+          <AsyncSelect
+            cacheOptions
+            defaultOptions
+            value={selected}
+            loadingMessage={() => "Loading..."}
+            noOptionsMessage={() => "User not Found"}
+            loadOptions={loadOptions}
+            onChange={handleOptions}
+            styles={customStyles}
+          />
+        </div>
+        {isError ? <p style={{color:'red', fontSize: "12px", margin:"5px"}}>Please select signer</p>: <p style={{color:'transparent', fontSize: "12px",  margin:"5px"}}>.</p>}
+
+        <div >
+          <button className="submitbutton" onClick={() => handleAdd()}>
+            Add Signer
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SelectSigners;

microfrontends/SignDocuments/src/utils/Utils.js

@@ -4,6 +4,9 @@ import { rgb } from "pdf-lib";
 
 const isMobile = window.innerWidth < 767;
 
+export const resizeBorderExtraWidth = () => {
+  return 20;
+};
 export async function getBase64FromUrl(url) {
   const data = await fetch(url);
   const blob = await data.blob();
@@ -77,91 +80,43 @@ export function getHostUrl() {
   }
 }
 
-export const calculateImgAspectRatio = (imgWH) => {
+export const calculateImgAspectRatio = (imgWH, pos) => {
   let newWidth, newHeight;
+  const placeholderHeight = pos && pos.Width ? pos.Height : 60;
   const aspectRatio = imgWH.width / imgWH.height;
-  if (aspectRatio === "2.533333333333333") {
-    newWidth = 150;
-    newHeight = 60;
-  } else if (aspectRatio === 1) {
-    newWidth = aspectRatio * 100;
-    newHeight = aspectRatio * 100;
-  } else if (aspectRatio < 1) {
-    newWidth = aspectRatio * 70;
-    newHeight = 70;
-  } else if (aspectRatio < 2) {
-    newWidth = aspectRatio * 100;
-    newHeight = 100;
-  } else if (aspectRatio > 2 && aspectRatio < 4) {
-    newWidth = aspectRatio * 70;
-    newHeight = 70;
-  } else if (aspectRatio > 4) {
-    newWidth = aspectRatio * 40;
-    newHeight = 40;
-  } else if (aspectRatio > 5) {
-    newWidth = aspectRatio * 10;
-    newHeight = 10;
-  }
+  newWidth = aspectRatio * placeholderHeight;
+  newHeight = placeholderHeight;
+
   return { newHeight, newWidth };
 };
 
 //function for upload stamp or image
 export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
-  const updateFilter = xyPostion[index].pos.filter(
-    (data, ind) =>
-      data.key === signKey && data.Width && data.Height && data.SignUrl
-  );
-  let getIMGWH = calculateImgAspectRatio(imgWH);
-  const getXYdata = xyPostion[index].pos;
-  if (updateFilter.length > 0) {
-    const addSign = getXYdata.map((url, ind) => {
-      if (url.key === signKey) {
-        return {
-          ...url,
-          Width: getIMGWH.newWidth,
-          Height: getIMGWH.newHeight,
-          SignUrl: image.src,
-          ImageType: image.imgType
-        };
-      }
-      return url;
-    });
+  let getIMGWH;
+  //get current page position
+  const getXYData = xyPostion[index].pos;
+  const updateXYData = getXYData.map((url) => {
+    if (url.key === signKey) {
+      getIMGWH = calculateImgAspectRatio(imgWH, url);
 
-    const newUpdateUrl = xyPostion.map((obj, ind) => {
-      if (ind === index) {
-        return { ...obj, pos: addSign };
-      }
-      return obj;
-    });
-    return newUpdateUrl;
-  } else {
-    const getXYdata = xyPostion[index].pos;
+      return {
+        ...url,
+        Width: getIMGWH.newWidth,
+        Height: getIMGWH.newHeight,
+        SignUrl: image.src,
+        ImageType: image.imgType
+      };
+    }
+    return url;
+  });
 
-    let getPosData = xyPostion[index].pos.filter(
-      (data) => data.key === signKey
-    );
-
-    const addSign = getXYdata.map((url, ind) => {
-      if (url.key === signKey) {
-        return {
-          ...url,
-          Width: getIMGWH.newWidth,
-          Height: getIMGWH.newHeight,
-          SignUrl: image.src,
-          ImageType: image.imgType
-        };
-      }
-      return url;
-    });
-
-    const newUpdateUrl = xyPostion.map((obj, ind) => {
-      if (ind === index) {
-        return { ...obj, pos: addSign };
-      }
-      return obj;
-    });
-    return newUpdateUrl;
-  }
+  const updateXYposition = xyPostion.map((obj, ind) => {
+    if (ind === index) {
+      return { ...obj, pos: updateXYData };
+    }
+    return obj;
+  });
+  return updateXYposition;
 }
 
 //function for save button to save signature or image url
@@ -171,52 +126,47 @@ export function onSaveSign(
   signKey,
   signatureImg,
   imgWH,
-  isDefaultSign,
-  isSign
+  isDefaultSign
 ) {
-  let getXYdata = xyPostion[index].pos;
-  let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
-
   let getIMGWH;
-  if (isDefaultSign) {
-    getIMGWH = calculateImgAspectRatio(imgWH);
-  }
+  let getXYdata = xyPostion[index].pos;
+  const updateXYData = getXYdata.map((position) => {
+    if (position.key === signKey) {
+      if (isDefaultSign) {
+        getIMGWH = calculateImgAspectRatio(imgWH, position);
+      }
+      const getSignImgWH = calculateImgAspectRatio(
+        { width: 150, height: 60 },
+        position
+      );
+      const posWidth = isDefaultSign
+        ? getIMGWH.newWidth
+        : position.Width
+          ? getSignImgWH.newWidth
+          : 150;
+      const posHeight = isDefaultSign
+        ? getIMGWH.newHeight
+        : position.Height
+          ? getSignImgWH.newHeight
+          : 60;
 
-  const posWidth = isDefaultSign
-    ? getIMGWH.newWidth
-    : isSign && getPosData[0].ImageType
-      ? 150
-      : getPosData[0].Width
-        ? getPosData[0].Width
-        : 150;
-  const posHidth = isDefaultSign
-    ? getIMGWH.newHeight
-    : isSign && getPosData[0].ImageType
-      ? 60
-      : getPosData[0].Height
-        ? getPosData[0].Height
-        : 60;
-
-  const addSign = getXYdata.map((url, ind) => {
-    if (url.key === signKey) {
       return {
-        ...url,
+        ...position,
         Width: posWidth,
-        Height: posHidth,
-        SignUrl: signatureImg,
-        ImageType: "sign"
+        Height: posHeight,
+        SignUrl: signatureImg
       };
     }
-    return url;
+    return position;
   });
 
-  const newUpdateUrl = xyPostion.map((obj, ind) => {
+  const updateXYposition = xyPostion.map((obj, ind) => {
     if (ind === index) {
-      return { ...obj, pos: addSign };
+      return { ...obj, pos: updateXYData };
     }
     return obj;
   });
-  return newUpdateUrl;
+  return updateXYposition;
 }
 
 export const addZIndex = (signerPos, key, setZIndex) => {
@@ -260,14 +210,16 @@ export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
       height: img.height
     };
   }
-  const getIMGWH = calculateImgAspectRatio(imgWH);
+
   let xyDefaultPos = [];
   for (let i = 0; i < xyPostion.length; i++) {
+    let getIMGWH;
     const getXYdata = xyPostion[i].pos;
     const getPageNo = xyPostion[i].pageNumber;
     const getPosData = getXYdata;
 
     const addSign = getPosData.map((url, ind) => {
+      getIMGWH = calculateImgAspectRatio(imgWH, url);
       if (url) {
         return {
           ...url,
@@ -459,78 +411,87 @@ export function modalAlign() {
     modal.style.top = window.innerHeight / 3 + "px";
   }
 }
-export const containerWidth = (pos, scale, signyourself) => {
+
+export const placeholderWidth = (pos, scale, signyourself) => {
   let width;
+  const defaultWidth = 150;
+  const posWidth = pos.Width ? pos.Width : defaultWidth;
+
   if (signyourself) {
     if (isMobile) {
-      return pos.Width * scale;
+      return posWidth * scale;
     } else {
-      return pos.Width;
+      return posWidth;
     }
   } else {
     if (isMobile) {
       if (pos.isMobile) {
-        width = pos.Width ? pos.Width * scale : 150 * scale;
+        width = posWidth ? posWidth * scale : defaultWidth * scale;
         return width;
       } else {
         if (pos.IsResize) {
-          width = pos.Width ? pos.Width * scale : 150 * scale;
+          width = posWidth ? posWidth * scale : defaultWidth * scale;
           return width;
         } else {
-          width = pos.Width ? pos.Width : 150;
+          width = posWidth ? posWidth : defaultWidth;
           return width;
         }
       }
     } else {
       if (pos.isMobile) {
         if (pos.IsResize) {
-          width = pos.Width ? pos.Width : 150;
+          width = posWidth ? posWidth : defaultWidth;
           return width;
         } else {
-          width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale;
+          width = posWidth ? posWidth * pos.scale : defaultWidth * pos.scale;
 
           return width;
         }
       } else {
-        width = pos.Width ? pos.Width : 150;
+        width = posWidth ? posWidth : defaultWidth;
         return width;
       }
     }
   }
 };
-export const containerHeight = (pos, scale, signyourself) => {
+export const placeholderHeight = (pos, scale, signyourself) => {
   let height;
+  const posHeight = pos.Height;
+  const defaultHeight = 60;
   if (signyourself) {
     if (isMobile) {
-      return pos.Height * scale;
+      return posHeight * scale;
     } else {
-      return pos.Height;
+      return posHeight;
     }
   } else {
     if (isMobile) {
       if (pos.isMobile) {
-        height = pos.Height ? pos.Height * scale : 60 * scale;
+        height = posHeight ? posHeight * scale : defaultHeight * scale;
         return height;
       } else {
         if (pos.IsResize) {
-          height = pos.Height ? pos.Height * scale : 60 * scale;
+          height = posHeight ? posHeight * scale : defaultHeight * scale;
           return height;
         } else {
-          height = pos.Height ? pos.Height : 60;
+          height = posHeight ? posHeight : defaultHeight;
+
           return height;
         }
       }
     } else {
       if (pos.isMobile) {
         if (pos.IsResize) {
-          height = pos.Height ? pos.Height : 60;
+          height = posHeight ? posHeight : defaultHeight;
           return height;
         } else {
-          height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale;
+          height = posHeight
+            ? posHeight * pos.scale
+            : defaultHeight * pos.scale;
           return height;
         }
       } else {
-        height = pos.Height ? pos.Height : 60;
+        height = posHeight ? posHeight : defaultHeight;
         return height;
       }
     }
@@ -578,78 +539,80 @@ export const multiSignEmbed = async (
       } else {
         img = await pdfDoc.embedPng(imgData);
       }
-      const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60;
-      const scaleWidth = containerWidth(imgUrlList[id], scale, signyourself);
-      const scaleHeight = containerHeight(imgUrlList[id], scale, signyourself);
+
+      const scaleWidth = placeholderWidth(imgUrlList[id], scale, signyourself);
+      const scaleHeight = placeholderHeight(
+        imgUrlList[id],
+        scale,
+        signyourself
+      );
 
       const xPos = (pos) => {
+        const resizePos = pos.xPosition;
         if (signyourself) {
           if (isMobile) {
-            return imgUrlList[id].xPosition * scale;
+            return resizePos * scale;
           } else {
-            return imgUrlList[id].xPosition;
+            return resizePos;
           }
         } else {
           //checking both condition mobile and desktop view
           if (isMobile) {
             //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
             if (pos.isMobile) {
-              const x = pos.xPosition * (pos.scale / scale);
+              const x = resizePos * (pos.scale / scale);
               return x * scale;
             } else {
-              const x = pos.xPosition / scale;
+              const x = resizePos / scale;
               return x * scale;
             }
           } else {
             //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
             if (pos.isMobile) {
-              const x = pos.xPosition * pos.scale;
+              const x = resizePos * pos.scale;
               return x;
             } else {
-              return pos.xPosition;
+              return resizePos;
             }
           }
         }
       };
 
       const yPos = (pos) => {
+        const resizePos = imgUrlList[id].yPosition;
         if (signyourself) {
           if (isMobile) {
-            return (
-              page.getHeight() -
-              imgUrlList[id].yPosition * scale -
-              imgHeight * scale
-            );
+            return page.getHeight() - resizePos * scale - scaleHeight;
           } else {
-            return page.getHeight() - imgUrlList[id].yPosition - imgHeight;
+            return page.getHeight() - resizePos - scaleHeight;
           }
         } else {
           //checking both condition mobile and desktop view
-          const y = pos.yPosition / scale;
+          const y = resizePos / scale;
           if (isMobile) {
             //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
             if (pos.isMobile) {
-              const y = pos.yPosition * (pos.scale / scale);
-              return page.getHeight() - y * scale - imgHeight * scale;
+              const y = resizePos * (pos.scale / scale);
+              return page.getHeight() - y * scale - scaleHeight;
             } else {
               if (pos.IsResize) {
-                return page.getHeight() - y * scale - imgHeight * scale;
+                return page.getHeight() - y * scale - scaleHeight;
               } else {
-                return page.getHeight() - y * scale - imgHeight;
+                return page.getHeight() - y * scale - scaleHeight;
               }
             }
           } else {
             //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
             if (pos.isMobile) {
               if (pos.IsResize) {
-                const y = pos.yPosition * pos.scale;
-                return page.getHeight() - y - imgHeight;
+                const y = resizePos * pos.scale;
+                return page.getHeight() - y - scaleHeight;
               } else {
-                const y = pos.yPosition * pos.scale;
-                return page.getHeight() - y - imgHeight * pos.scale;
+                const y = resizePos * pos.scale;
+                return page.getHeight() - y - scaleHeight;
               }
             } else {
-              return page.getHeight() - pos.yPosition - imgHeight;
+              return page.getHeight() - resizePos - scaleHeight;
             }
           }
         }
@@ -706,9 +669,11 @@ export const handleImageResize = (
   containerWH,
   showResize
 ) => {
-  const filterSignerPos = signerPos.filter(
-    (data) => data.signerObjId === signerId
-  );
+  // const filterSignerPos = signerPos.filter(
+  //   (data) => data.signerObjId === signerId
+  // );
+
+  const filterSignerPos = signerPos.filter((data) => data.Id === signerId);
 
   if (filterSignerPos.length > 0) {
     const getPlaceHolder = filterSignerPos[0].placeHolder;
@@ -716,71 +681,83 @@ export const handleImageResize = (
       (data) => data.pageNumber === pageNumber
     );
     if (getPageNumer.length > 0) {
-      const getXYdata = getPageNumer[0].pos.filter(
-        (data, ind) => data.key === key && data.Width && data.Height
-      );
-      if (getXYdata.length > 0) {
-        const getXYdata = getPageNumer[0].pos;
-        const getPosData = getXYdata;
-        const addSignPos = getPosData.map((url, ind) => {
-          if (url.key === key) {
-            return {
-              ...url,
-              Width: ref.offsetWidth,
-              Height: ref.offsetHeight,
-              IsResize: showResize ? true : false
-            };
-          }
-          return url;
-        });
+      // const getXYdata = getPageNumer[0].pos.filter(
+      //   (data, ind) => data.key === key && data.Width && data.Height
+      // );
+      // if (getXYdata.length > 0) {
+      //   const getXYdata = getPageNumer[0].pos;
+      //   const getPosData = getXYdata;
+      //   const addSignPos = getPosData.map((url, ind) => {
+      //     if (url.key === key) {
+      //       return {
+      //         ...url,
+      //         Width: ref.offsetWidth,
+      //         Height: ref.offsetHeight,
+      //         IsResize: showResize ? true : false
+      //       };
+      //     }
+      //     return url;
+      //   });
 
-        const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
-          if (obj.pageNumber === pageNumber) {
-            return { ...obj, pos: addSignPos };
-          }
-          return obj;
-        });
+      //   const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+      //     if (obj.pageNumber === pageNumber) {
+      //       return { ...obj, pos: addSignPos };
+      //     }
+      //     return obj;
+      //   });
 
-        const newUpdateSigner = signerPos.map((obj, ind) => {
-          if (obj.signerObjId === signerId) {
-            return { ...obj, placeHolder: newUpdateSignPos };
-          }
-          return obj;
-        });
+      //   // const newUpdateSigner = signerPos.map((obj, ind) => {
+      //   //   if (obj.signerObjId === signerId) {
+      //   //     return { ...obj, placeHolder: newUpdateSignPos };
+      //   //   }
+      //   //   return obj;
+      //   // });
 
-        setSignerPos(newUpdateSigner);
-      } else {
-        const getXYdata = getPageNumer[0].pos;
-        const getPosData = getXYdata;
-        const addSignPos = getPosData.map((url, ind) => {
-          if (url.key === key) {
-            return {
-              ...url,
-              Width: ref.offsetWidth,
-              Height: ref.offsetHeight,
-              IsResize: showResize ? true : false
-            };
-          }
-          return url;
-        });
+      //   const newUpdateSigner = signerPos.map((obj, ind) => {
+      //     if (obj.Id === signerId) {
+      //       return { ...obj, placeHolder: newUpdateSignPos };
+      //     }
+      //     return obj;
+      //   });
+      //   setSignerPos(newUpdateSigner);
+      // } else {
+      const getXYdata = getPageNumer[0].pos;
+      const getPosData = getXYdata;
+      const addSignPos = getPosData.map((url, ind) => {
+        if (url.key === key) {
+          return {
+            ...url,
+            Width: ref.offsetWidth,
+            Height: ref.offsetHeight,
+            IsResize: showResize ? true : false
+          };
+        }
+        return url;
+      });
 
-        const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
-          if (obj.pageNumber === pageNumber) {
-            return { ...obj, pos: addSignPos };
-          }
-          return obj;
-        });
+      const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+        if (obj.pageNumber === pageNumber) {
+          return { ...obj, pos: addSignPos };
+        }
+        return obj;
+      });
 
-        const newUpdateSigner = signerPos.map((obj, ind) => {
-          if (obj.signerObjId === signerId) {
-            return { ...obj, placeHolder: newUpdateSignPos };
-          }
-          return obj;
-        });
+      // const newUpdateSigner = signerPos.map((obj, ind) => {
+      //   if (obj.signerObjId === signerId) {
+      //     return { ...obj, placeHolder: newUpdateSignPos };
+      //   }
+      //   return obj;
+      // });
+      const newUpdateSigner = signerPos.map((obj, ind) => {
+        if (obj.Id === signerId) {
+          return { ...obj, placeHolder: newUpdateSignPos };
+        }
+        return obj;
+      });
 
-        setSignerPos(newUpdateSigner);
-      }
+      setSignerPos(newUpdateSigner);
     }
+    // }
   }
 };
 
@@ -871,34 +848,36 @@ export const signPdfFun = async (
     const height = xyPosData.Height ? xyPosData.Height : 60;
 
     const xPos = (pos) => {
+      const resizePos = pos.xPosition;
       //checking both condition mobile and desktop view
       if (isMobile) {
         //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
         if (pos.isMobile) {
-          const x = pos.xPosition * (pos.scale / scale);
+          const x = resizePos * (pos.scale / scale);
           return x * scale;
         } else {
-          const x = pos.xPosition / scale;
+          const x = resizePos / scale;
           return x * scale;
         }
       } else {
         //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
         if (pos.isMobile) {
-          const x = pos.xPosition * pos.scale;
+          const x = resizePos * pos.scale;
           return x;
         } else {
-          return pos.xPosition;
+          return resizePos;
         }
       }
     };
     const yBottom = (pos) => {
+      const resizePos = pos.yBottom;
       let yPosition;
       //checking both condition mobile and desktop view
 
       if (isMobile) {
         //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
         if (pos.isMobile) {
-          const y = pos.yBottom * (pos.scale / scale);
+          const y = resizePos * (pos.scale / scale);
           yPosition = pos.isDrag
             ? y * scale - height * scale
             : pos.firstYPos
@@ -906,7 +885,7 @@ export const signPdfFun = async (
               : y * scale - height * scale;
           return yPosition;
         } else {
-          const y = pos.yBottom / scale;
+          const y = resizePos / scale;
           if (pos.IsResize) {
             yPosition = pos.isDrag
               ? y * scale - height * scale
@@ -926,7 +905,7 @@ export const signPdfFun = async (
       } else {
         //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
         if (pos.isMobile) {
-          const y = pos.yBottom * pos.scale;
+          const y = resizePos * pos.scale;
           if (pos.IsResize) {
             yPosition = pos.isDrag
               ? y - height
@@ -944,16 +923,15 @@ export const signPdfFun = async (
           }
         } else {
           yPosition = pos.isDrag
-            ? pos.yBottom - height
+            ? resizePos - height
             : pos.firstYPos
-              ? pos.yBottom - height + pos.firstYPos
-              : pos.yBottom - height;
+              ? resizePos - height + pos.firstYPos
+              : resizePos - height;
           return yPosition;
         }
       }
     };
 
-    const bottomY = yBottom(xyPosData);
     singleSign = {
       pdfFile: pdfBase64Url,
       docId: documentId,
@@ -961,9 +939,9 @@ export const signPdfFun = async (
       sign: {
         Base64: base64Url,
         Left: xPos(xyPosData),
-        Bottom: bottomY,
-        Width: containerWidth(xyPosData, scale),
-        Height: containerHeight(xyPosData, scale),
+        Bottom: yBottom(xyPosData),
+        Width: placeholderWidth(xyPosData, scale),
+        Height: placeholderHeight(xyPosData, scale),
         Page: pageNo
       }
     };
@@ -1001,3 +979,96 @@ export const signPdfFun = async (
 
   return response;
 };
+
+export const randomId = () => Math.floor(1000 + Math.random() * 9000);
+
+export const createDocument = async (template, placeholders, signerData) => {
+  if (template && template.length > 0) {
+    const Doc = template[0];
+
+    let placeholdersArr = [];
+    if (placeholders?.length > 0) {
+      placeholdersArr = placeholders;
+    }
+    let signers = [];
+    if (signerData?.length > 0) {
+      signerData.forEach((x) => {
+        if (x.objectId) {
+          const obj = {
+            __type: "Pointer",
+            className: "contracts_Contactbook",
+            objectId: x.objectId
+          };
+          signers.push(obj);
+        }
+      });
+    }
+    const data = {
+      Name: Doc.Name,
+      URL: Doc.URL,
+      SignedUrl: Doc.SignedUrl,
+      Description: Doc.Description,
+      Note: Doc.Note,
+      Placeholders: placeholdersArr,
+      ExtUserPtr: {
+        __type: "Pointer",
+        className: "contracts_Users",
+        objectId: Doc.ExtUserPtr.objectId
+      },
+      CreatedBy: {
+        __type: "Pointer",
+        className: "_User",
+        objectId: Doc.CreatedBy.objectId
+      },
+      Signers: signers
+    };
+
+    try {
+      const res = await axios.post(
+        `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+          "_appName"
+        )}_Document`,
+        data,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
+        }
+      );
+      if (res) {
+        return { status: "success", id: res.data.objectId };
+      }
+    } catch (err) {
+      console.log("axois err ", err);
+      return { status: "error", id: "Something Went Wrong!" };
+    }
+  }
+};
+
+export const getFirstLetter = (name) => {
+  const firstLetter = name?.charAt(0);
+  return firstLetter;
+};
+
+
+export const darkenColor = (color, factor) => {
+  // Remove '#' from the color code and parse it to get RGB values
+  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")}`;
+};
+
+