Merge pull request #535 from OpenSignLabs/premium_alert

feat: implement feature of copy widget to next of that widget for any widgets except `signature,text,stamp,initial` widgets.

.env.local_dev

@@ -20,7 +20,7 @@ appName=open_sign_server
 # A 12 character long random secret key that allows access to all the data. It is used in Parse dashboard config to view all the data in the database.
 MASTER_KEY=XnAadwKxxByMr
 # Mongodb URI to connect to
-MONGODB_URI=mongodb://host.docker.internal:27017/OpenSignDB
+MONGODB_URI=mongodb://mongo:27017/OpenSignDB
 # Path on which APIs should be mounted. Do not change this. This variable shall be removed & value hardcoded in the source code in coming versions.
 PARSE_MOUNT=/app
 # Set it to the URL from where APIs will be accessible to the NodeJS functions, for local development it should be localhost:3000/api/app (use your local port number instead)

Makefile

@@ -1,6 +1,6 @@
 build:
 	cp .env.local_dev .env
-	cd apps/OpenSign && npm install && npm run build
+	cd apps/OpenSign && cp ../../.env.local_dev .env && npm install && npm run build
 	docker compose up --build --force-recreate
 
 run:

apps/OpenSign/Dockerfile

@@ -21,5 +21,5 @@ EXPOSE 3000
 # ENV NODE_ENV production
 
 # Run the application
-ENTRYPOINT npm run start-dev
+ENTRYPOINT npm run start
 

apps/OpenSign/Dockerhubfile

@@ -14,6 +14,9 @@ RUN npm install
 COPY apps/OpenSign/ .
 COPY apps/OpenSign/.husky .
 
+# build
+RUN npm run build
+
 # Make port 3000 available to the world outside this container
 EXPOSE 3000
 

apps/OpenSign/package.json

@@ -3,44 +3,42 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@formkit/auto-animate": "^0.8.1",
     "@radix-ui/themes": "^2.0.3",
-    "@react-pdf/renderer": "^3.3.8",
+    "@react-pdf/renderer": "^3.4.0",
     "@reduxjs/toolkit": "^2.2.1",
-    "axios": "^1.6.0",
-    "daisyui": "^3.9.2",
+    "axios": "^1.6.8",
     "file-saver": "^2.0.5",
-    "html-react-parser": "^4.2.2",
     "jwt-decode": "^4.0.0",
-    "moment": "^2.29.4",
+    "moment": "^2.30.1",
     "parse": "^4.3.1",
     "pdf-lib": "^1.17.1",
     "print-js": "^1.6.0",
     "radix-ui": "^1.0.1",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.10.1",
-    "react-datepicker": "^6.2.0",
+    "react-bootstrap": "^2.10.2",
+    "react-datepicker": "^6.4.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-multi-backend": "^8.0.3",
     "react-dnd-touch-backend": "^16.0.1",
     "react-dom": "^18.2.0",
-    "react-drag-listview": "^2.0.0",
-    "react-draggable": "^4.4.6",
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
     "react-konva": "^18.2.10",
     "react-modal": "^3.16.1",
     "react-pdf": "^7.7.1",
-    "react-redux": "^8.1.3",
+    "react-redux": "^9.1.0",
     "react-rnd": "^10.4.1",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.8.0",
     "react-signature-canvas": "^1.0.6",
+    "react-tooltip": "^5.26.3",
     "reactour": "^1.19.2",
-    "redux": "^4.2.1",
-    "redux-thunk": "^2.4.2",
+    "redux": "^5.0.1",
+    "redux-thunk": "^3.1.0",
     "regex-parser": "^2.3.0",
     "serve": "^14.2.1",
     "styled-components": "^4.4.1",
@@ -48,7 +46,7 @@
   },
   "scripts": {
     "start": "serve -s build",
-    "start-dev" :"react-scripts start",
+    "start-dev": "react-scripts start",
     "version": "curl -s https://api.github.com/repos/opensignlabs/opensign/releases/latest | grep '\"tag_name\":' | awk -F '\"' '{print $4}' > ./public/version.txt",
     "version-win": "powershell -Command \"Invoke-RestMethod -Uri 'https://api.github.com/repos/opensignlabs/opensign/releases/latest' | Select-Object -ExpandProperty tag_name | Out-File -FilePath ./public/version.txt\"",
     "build": "npm run version && react-scripts build",
@@ -82,16 +80,16 @@
     }
   },
   "devDependencies": {
-    "@babel/runtime-corejs2": "^7.23.9",
+    "@babel/runtime-corejs2": "^7.24.1",
     "autoprefixer": "^10.4.18",
     "commitizen": "^4.3.0",
-    "eslint": "^8.51.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.1",
     "lint-staged": "^15.2.2",
-    "postcss": "^8.4.35",
-    "prettier": "^2.8.0",
-    "pretty-quick": "^3.1.3",
-    "tailwindcss": "^3.3.3"
+    "postcss": "^8.4.37",
+    "prettier": "^2.8.8",
+    "pretty-quick": "^3.3.1",
+    "tailwindcss": "^3.4.1"
   }
 }

apps/OpenSign/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Suspense, lazy } from "react";
+import React, { useState, useEffect, lazy } from "react";
 import { Routes, Route, BrowserRouter } from "react-router-dom";
 import { pdfjs } from "react-pdf";
 import Login from "./pages/Login";
@@ -9,12 +9,12 @@ import HomeLayout from "./layout/HomeLayout";
 import PageNotFound from "./pages/PageNotFound";
 import ValidateRoute from "./primitives/ValidateRoute";
 import Validate from "./primitives/Validate";
-import ManageSign from "./pages/Managesign";
 import TemplatePlaceholder from "./pages/TemplatePlaceholder";
 import SignYourSelf from "./pages/SignyourselfPdf";
 import DraftDocument from "./components/pdf/DraftDocument";
 import PlaceHolderSign from "./pages/PlaceHolderSign";
 import PdfRequestFiles from "./pages/PdfRequestFiles";
+import LazyPage from "./primitives/LazyPage";
 const DebugPdf = lazy(() => import("./pages/DebugPdf"));
 const ForgetPassword = lazy(() => import("./pages/ForgetPassword"));
 const GuestLogin = lazy(() => import("./pages/GuestLogin"));
@@ -23,9 +23,10 @@ const Subscriptions = lazy(() => import("./pages/PlanSubscriptions"));
 const ChangePassword = lazy(() => import("./pages/ChangePassword"));
 const UserProfile = lazy(() => import("./pages/UserProfile"));
 const Signup = lazy(() => import("./pages/Signup"));
+const Opensigndrive = lazy(() => import("./pages/Opensigndrive"));
+const ManageSign = lazy(() => import("./pages/Managesign"));
 const GenerateToken = lazy(() => import("./pages/GenerateToken"));
 const Webhook = lazy(() => import("./pages/Webhook"));
-const Opensigndrive = lazy(() => import("./pages/Opensigndrive"));
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
 const Loader = () => {
@@ -78,83 +79,105 @@ function App() {
         <Loader />
       ) : (
         <BrowserRouter>
-          <Suspense fallback={<Loader />}>
-            <Routes>
-              <Route element={<ValidateRoute />}>
-                <Route exact path="/" element={<Login />} />
-                <Route exact path="/signup" element={<Signup />} />
-              </Route>
-              <Route element={<Validate />}>
-                <Route
-                  path="/load/template/:templateId"
-                  element={<TemplatePlaceholder />}
-                />
-                <Route
-                  exact
-                  path="/load/placeholdersign/:docId"
-                  element={<PlaceHolderSign />}
-                />
-                <Route
-                  exact
-                  path="/load/recipientSignPdf/:docId/:contactBookId"
-                  element={<PdfRequestFiles />}
-                />
-              </Route>
+          <Routes>
+            <Route element={<ValidateRoute />}>
+              <Route exact path="/" element={<Login />} />
+              <Route path="/signup" element={<LazyPage Page={Signup} />} />
+            </Route>
+            <Route element={<Validate />}>
               <Route
-                path="/loadmf/signmicroapp/login/:id/:userMail/:contactBookId/:serverUrl"
-                element={<GuestLogin />}
+                path="/load/template/:templateId"
+                element={<TemplatePlaceholder />}
               />
               <Route
-                path="/login/:id/:userMail/:contactBookId/:serverUrl"
-                element={<GuestLogin />}
+                exact
+                path="/load/placeholdersign/:docId"
+                element={<PlaceHolderSign />}
               />
-              <Route path="/debugpdf" element={<DebugPdf />} />
-              <Route path="/forgetpassword" element={<ForgetPassword />} />
-              {process.env.REACT_APP_ENABLE_SUBSCRIPTION && (
-                <>
-                  <Route exact path="/pgsignup" element={<Pgsignup />} />
-                  <Route path="/subscription" element={<Subscriptions />} />
-                </>
-              )}
-              <Route element={<HomeLayout />}>
-                <Route path="/changepassword" element={<ChangePassword />} />
-                <Route path="/form/:id" element={<Form />} />
-                <Route path="/report/:id" element={<Report />} />
-                <Route path="/dashboard/:id" element={<Dashboard />} />
-                <Route path="/profile" element={<UserProfile />} />
-                <Route path="/generatetoken" element={<GenerateToken />} />
-                <Route path="/webhook" element={<Webhook />} />
-                <Route path="/managesign" element={<ManageSign />} />
-                <Route path="/opensigndrive" element={<Opensigndrive />} />
+              <Route
+                exact
+                path="/load/recipientSignPdf/:docId/:contactBookId"
+                element={<PdfRequestFiles />}
+              />
+            </Route>
+            <Route
+              path="/loadmf/signmicroapp/login/:id/:userMail/:contactBookId/:serverUrl"
+              element={<LazyPage Page={GuestLogin} />}
+            />
+            <Route
+              path="/login/:id/:userMail/:contactBookId/:serverUrl"
+              element={<LazyPage Page={GuestLogin} />}
+            />
+            <Route path="/debugpdf" element={<LazyPage Page={DebugPdf} />} />
+            <Route
+              path="/forgetpassword"
+              element={<LazyPage Page={ForgetPassword} />}
+            />
+            {process.env.REACT_APP_ENABLE_SUBSCRIPTION && (
+              <>
                 <Route
-                  path="/template/:templateId"
-                  element={<TemplatePlaceholder />}
+                  path="/pgsignup"
+                  element={<LazyPage Page={Pgsignup} />}
                 />
-                {/* signyouself route with no rowlevel data using docId from url */}
-                <Route path="/signaturePdf/:docId" element={<SignYourSelf />} />
-                {/* draft document route to handle and navigate route page accordiing to document status */}
-                <Route path="/draftDocument" element={<DraftDocument />} />
-                {/* recipient placeholder set route with no rowlevel data using docId from url*/}
                 <Route
-                  path="/placeHolderSign/:docId"
-                  element={<PlaceHolderSign />}
+                  path="/subscription"
+                  element={<LazyPage Page={Subscriptions} />}
                 />
-                {/* for user signature (need your sign route) with row level data */}
-                <Route path="/pdfRequestFiles" element={<PdfRequestFiles />} />
-                {/* for user signature (need your sign route) with no row level data */}
-                <Route
-                  path="/pdfRequestFiles/:docId"
-                  element={<PdfRequestFiles />}
-                />
-                {/* recipient signature route with no rowlevel data using docId from url */}
-                <Route
-                  path="/recipientSignPdf/:docId/:contactBookId"
-                  element={<PdfRequestFiles />}
-                />
-              </Route>
-              <Route path="*" element={<PageNotFound />} />
-            </Routes>
-          </Suspense>
+              </>
+            )}
+            <Route element={<HomeLayout />}>
+              <Route
+                path="/changepassword"
+                element={<LazyPage Page={ChangePassword} />}
+              />
+              <Route path="/form/:id" element={<Form />} />
+              <Route path="/report/:id" element={<Report />} />
+              <Route path="/dashboard/:id" element={<Dashboard />} />
+              <Route
+                path="/profile"
+                element={<LazyPage Page={UserProfile} />}
+              />
+              <Route
+                path="/opensigndrive"
+                element={<LazyPage Page={Opensigndrive} />}
+              />
+              <Route
+                path="/managesign"
+                element={<LazyPage Page={ManageSign} />}
+              />
+              <Route
+                path="/generatetoken"
+                element={<LazyPage Page={GenerateToken} />}
+              />
+              <Route path="/webhook" element={<LazyPage Page={Webhook} />} />
+              <Route
+                path="/template/:templateId"
+                element={<TemplatePlaceholder />}
+              />
+              {/* signyouself route with no rowlevel data using docId from url */}
+              <Route path="/signaturePdf/:docId" element={<SignYourSelf />} />
+              {/* draft document route to handle and navigate route page accordiing to document status */}
+              <Route path="/draftDocument" element={<DraftDocument />} />
+              {/* recipient placeholder set route with no rowlevel data using docId from url*/}
+              <Route
+                path="/placeHolderSign/:docId"
+                element={<PlaceHolderSign />}
+              />
+              {/* for user signature (need your sign route) with row level data */}
+              <Route path="/pdfRequestFiles" element={<PdfRequestFiles />} />
+              {/* for user signature (need your sign route) with no row level data */}
+              <Route
+                path="/pdfRequestFiles/:docId"
+                element={<PdfRequestFiles />}
+              />
+              {/* recipient signature route with no rowlevel data using docId from url */}
+              <Route
+                path="/recipientSignPdf/:docId/:contactBookId"
+                element={<PdfRequestFiles />}
+              />
+            </Route>
+            <Route path="*" element={<PageNotFound />} />
+          </Routes>
         </BrowserRouter>
       )}
     </div>

apps/OpenSign/src/components/dashboard/DashboardButton.js

@@ -0,0 +1,47 @@
+import React from "react";
+import "../../styles/loader.css";
+import { useNavigate } from "react-router-dom";
+import { openInNewTab } from "../../constant/Utils";
+
+const DashboardButton = (props) => {
+  const navigate = useNavigate();
+
+  function openReport() {
+    if (props.Data && props.Data.Redirect_type) {
+      const Redirect_type = props.Data.Redirect_type;
+      const id = props.Data.Redirect_id;
+      if (Redirect_type === "Form") {
+        navigate(`/form/${id}`);
+      } else if (Redirect_type === "Report") {
+        navigate(`/report/${id}`);
+      } else if (Redirect_type === "Url") {
+        openInNewTab(id);
+      }
+    }
+  }
+  return (
+    <div
+      onClick={() => openReport()}
+      className={`${
+        props.Data && props.Data.Redirect_type
+          ? "cursor-pointer"
+          : "cursor-default"
+      } w-full px-3 py-2 flex text-white rounded-md shadow overflow-hidden`}
+    >
+      <div className="flex items-center justify-start gap-5">
+        <span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px]  self-start flex justify-center items-center">
+          <i
+            className={`${
+              props.Icon ? props.Icon : "fa fa-solid fa-info"
+            } text-[25px] lg:text-[30px]`}
+          ></i>
+        </span>
+        <div className="">
+          <div className="text-base lg:text-lg text-black"> {props.Label}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardButton;

apps/OpenSign/src/components/dashboard/DashboardCard.js

@@ -4,6 +4,7 @@ import Parse from "parse";
 import getReplacedHashQuery from "../../constant/getReplacedHashQuery";
 import "../../styles/loader.css";
 import { useNavigate } from "react-router-dom";
+import Tooltip from "../../primitives/Tooltip";
 
 const DashboardCard = (props) => {
   const navigate = useNavigate();
@@ -335,7 +336,7 @@ const DashboardCard = (props) => {
         props.Data && props.Data.Redirect_type
           ? "cursor-pointer"
           : "cursor-default"
-      } w-full h-[140px] px-3 pt-4 pb-10 text-white rounded-md shadow overflow-hidden`}
+      } w-full h-[140px] px-3 pt-4 pb-10 text-white rounded-md shadow overflow-hidden relative`}
     >
       <div className="flex items-center justify-start gap-5">
         <span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px]  self-start flex justify-center items-center">
@@ -352,6 +353,9 @@ const DashboardCard = (props) => {
           </div>
         </div>
       </div>
+      <div className="text-xs absolute top-1 right-1">
+        <Tooltip id={props.Label} iconColor={"white"} message={props?.Data?.tourMessage} />
+      </div>
     </div>
   );
 };

apps/OpenSign/src/components/dashboard/GetDashboard.js

@@ -1,14 +1,53 @@
 import React, { Suspense, lazy } from "react";
+const DashboardButton = lazy(() => import("./DashboardButton"));
 const DashboardCard = lazy(() => import("./DashboardCard"));
 const DashboardReport = lazy(() => import("./DashboardReport"));
-
+const buttonList = [
+  {
+    label: "Sign yourself",
+    redirectId: "sHAnZphf69",
+    redirectType: "Form",
+    icon: "fas fa-pen-nib"
+  },
+  {
+    label: "Request signature",
+    redirectId: "8mZzFxbG1z",
+    redirectType: "Form",
+    icon: "fa-solid fa-paper-plane"
+  }
+];
 const GetDashboard = (props) => {
+  const Button = ({ label, redirectId, redirectType, icon }) => (
+    <div className={"bg-white rounded-md shadow  w-full"}>
+      <Suspense
+        fallback={
+          <div style={{ height: "300px" }}>
+            <div
+              style={{
+                marginLeft: "45%",
+                marginTop: "150px",
+                fontSize: "45px",
+                color: "#3dd3e0"
+              }}
+              className="loader-37"
+            ></div>
+          </div>
+        }
+      >
+        <DashboardButton
+          Icon={icon}
+          Label={label}
+          Data={{ Redirect_type: redirectType, Redirect_id: redirectId }}
+        />
+      </Suspense>
+    </div>
+  );
   const renderSwitchWithTour = (col) => {
     switch (col.widget.type) {
       case "Card":
         return (
           <div
-            className={"bg-[#2ed8b6] rounded-md shadow mb-4 md:mb-0"}
+            className={"bg-[#2ed8b6] rounded-md shadow mb-3 md:mb-0"}
             data-tut={col.widget.data.tourSection}
             style={{ background: col.widget.bgColor }}
           >
@@ -42,7 +81,7 @@ const GetDashboard = (props) => {
         return (
           <div data-tut={col.widget.data.tourSection}>
             <Suspense fallback={<div>please wait</div>}>
-              <div className="mb-4 md:mb-0">
+              <div className="mb-3 md:mb-0">
                 <DashboardReport Record={col.widget} />
               </div>
             </Suspense>
@@ -58,7 +97,7 @@ const GetDashboard = (props) => {
       case "Card":
         return (
           <div
-            className={"bg-[#2ed8b6] rounded-md shadow mb-4 md:mb-0"}
+            className={"bg-[#2ed8b6] rounded-md shadow mb-3 md:mb-0"}
             style={{ background: col.widget.bgColor }}
           >
             <Suspense fallback={<div>please wait</div>}>
@@ -76,7 +115,7 @@ const GetDashboard = (props) => {
       case "report": {
         return (
           <Suspense fallback={<div>please wait</div>}>
-            <div className="mb-4 md:mb-0">
+            <div className="mb-3 md:mb-0">
               <DashboardReport Record={col.widget} />
             </div>
           </Suspense>
@@ -88,6 +127,22 @@ const GetDashboard = (props) => {
   };
   return (
     <div>
+      <div className="mb-3">
+        <div
+          data-tut={"tourbutton"}
+          className="flex flex-col md:flex-row gap-6 md:gap-8"
+        >
+          {buttonList.map((btn) => (
+            <Button
+              key={btn.label}
+              label={btn.label}
+              redirectType={btn.redirectType}
+              redirectId={btn.redirectId}
+              icon={btn.icon}
+            />
+          ))}
+        </div>
+      </div>
       {props.dashboard.map((val, key) => (
         <div key={"a" + key} className="row">
           {val.columns.map((col, i) =>

apps/OpenSign/src/components/opensigndrive/DriveBody.js

@@ -8,19 +8,11 @@ import { saveAs } from "file-saver";
 import { useNavigate } from "react-router-dom";
 import Table from "react-bootstrap/Table";
 import * as HoverCard from "@radix-ui/react-hover-card";
-import SelectFolder from "../shared/fields/SelectFolder"; //check this one
 import ModalUi from "../../primitives/ModalUi";
 import { themeColor } from "../../constant/const";
+import FolderModal from "../shared/fields/FolderModal";
 
-function DriveBody({
-  pdfData,
-  setFolderName,
-  setDocId,
-  setIsLoading,
-  setPdfData,
-  isList,
-  setIsAlert
-}) {
+function DriveBody(props) {
   const [rename, setRename] = useState("");
   const [renameValue, setRenameValue] = useState("");
   const inputRef = useRef(null);
@@ -50,28 +42,25 @@ function DriveBody({
       name: data.Name,
       objectId: data.objectId
     };
-    setFolderName((prev) => [...prev, folderData]);
-    const loadObj = {
+    props.setFolderName((prev) => [...prev, folderData]);
+    props.setIsLoading({
       isLoad: true,
       message: "This might take some time"
-    };
-
-    setIsLoading(loadObj);
-    setDocId(data.objectId);
+    });
+    props.setDocId(data.objectId);
+    props.setPdfData([]);
+    props.setSkip(0);
   };
   //function for change doc name and update doc name in  _document class
   const handledRenameDoc = async (data) => {
     setRename("");
     const trimmedValue = renameValue.trim();
-
     if (trimmedValue.length > 0) {
       const updateName = {
         Name: renameValue
       };
       const docId = data.objectId;
-
-      const docData = pdfData;
-
+      const docData = props.pdfData;
       const updatedData = docData.map((item) => {
         if (item.objectId === docId) {
           // If the item's ID matches the target ID, update the name
@@ -80,8 +69,7 @@ function DriveBody({
         // If the item's ID doesn't match, keep it unchanged
         return item;
       });
-
-      setPdfData(updatedData);
+      props.setPdfData(updatedData);
       await axios
         .put(
           `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
@@ -102,7 +90,7 @@ function DriveBody({
         })
         .catch((err) => {
           console.log("Err ", err);
-          setIsAlert({
+          props.setIsAlert({
             isShow: true,
             alertMessage: "something went wrong"
           });
@@ -199,13 +187,13 @@ function DriveBody({
       .then((result) => {
         const res = result.data;
         if (res) {
-          const updatedData = pdfData.filter((x) => x.objectId !== docId);
-          setPdfData(updatedData);
+          const updatedData = props.pdfData.filter((x) => x.objectId !== docId);
+          props.setPdfData(updatedData);
         }
       })
       .catch((err) => {
         console.log("Err ", err);
-        setIsAlert({
+        props.setIsAlert({
           isShow: true,
           alertMessage: "something went wrong"
         });
@@ -226,8 +214,8 @@ function DriveBody({
         ? true
         : false
       : selecFolderId
-        ? false
-        : true;
+      ? false
+      : true;
     if (!checkExist) {
       if (moveFolderId) {
         updateData = {
@@ -262,10 +250,10 @@ function DriveBody({
           // console.log("Listdata ", Listdata);
           const res = Listdata.data;
           if (res) {
-            const updatedData = pdfData.filter(
+            const updatedData = props.pdfData.filter(
               (x) => x.objectId !== updateDocId
             );
-            setPdfData(updatedData);
+            props.setPdfData(updatedData);
           }
         })
         .catch((err) => {
@@ -292,14 +280,13 @@ function DriveBody({
 
   //component to handle type of document and render according to type
   const handleFolderData = (data, ind, listType) => {
-    let createddate, status, isDecline, signerExist, isComplete, isPlaceholder;
+    let createddate, status, isDecline, signerExist, isComplete;
     if (data.Type !== "Folder") {
       const expireDate = data.ExpiryDate && data.ExpiryDate.iso;
       const createdDate = data.createdAt && data.createdAt;
       createddate = new Date(createdDate).toLocaleDateString();
       isComplete = data.IsCompleted && data.IsCompleted ? true : false;
       isDecline = data.IsDeclined && data.IsDeclined;
-      isPlaceholder = data.Placeholders && data.Placeholders;
       signerExist = data.Signers && data.Signers;
       const signedUrl = data.SignedUrl;
 
@@ -314,18 +301,7 @@ function DriveBody({
         status = "Completed";
       } else if (isDecline) {
         status = "Declined";
-      } else if (!signerExist || signerExist?.length === 0) {
-        status = "Draft";
-      } else if (
-        signerExist?.length > 0 &&
-        (!isPlaceholder || isPlaceholder?.length === 0)
-      ) {
-        status = "Draft";
-      } else if (
-        signerExist?.length > 0 &&
-        isPlaceholder?.length > 0 &&
-        !signedUrl
-      ) {
+      } else if (!signedUrl) {
         status = "Draft";
       } else if (isExpire) {
         status = "Expired";
@@ -584,7 +560,7 @@ function DriveBody({
   //component to handle type of document and render according to type
   return (
     <>
-      {isList ? (
+      {props.isList ? (
         <div className="container" style={{ overflowX: "auto" }}>
           <Table striped bordered hover>
             <thead>
@@ -597,7 +573,7 @@ function DriveBody({
               </tr>
             </thead>
             <tbody>
-              {pdfData.map((data, ind) => {
+              {props.pdfData.map((data, ind) => {
                 return (
                   <React.Fragment key={ind}>
                     {handleFolderData(data, ind, "table")}
@@ -609,7 +585,7 @@ function DriveBody({
         </div>
       ) : (
         <div className="pdfContainer">
-          {pdfData.map((data, ind) => {
+          {props.pdfData.map((data, ind) => {
             return (
               <div className="box" key={ind}>
                 {handleFolderData(data, ind, "list")}
@@ -618,13 +594,14 @@ function DriveBody({
           })}
         </div>
       )}
+
       {isOpenMoveModal && (
-        <SelectFolder
+        <FolderModal
           onSuccess={handleMoveFolder}
           isOpenModal={isOpenMoveModal}
           folderCls={"contracts_Document"}
           setIsOpenMoveModal={setIsOpenMoveModal}
-          setPdfData={setPdfData}
+          setPdfData={props.setPdfData}
         />
       )}
       <ModalUi

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

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
+import { radioButtonWidget } from "../../constant/Utils";
+import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
 function DropdownWidgetOption(props) {
   const [dropdownOptionList, setDropdownOptionList] = useState([
     "option-1",
@@ -10,6 +12,7 @@ function DropdownWidgetOption(props) {
   const [maxCount, setMaxCount] = useState(0);
   const [dropdownName, setDropdownName] = useState(props.type);
   const [isReadOnly, setIsReadOnly] = useState(false);
+  const [isHideLabel, setIsHideLabel] = useState(false);
   const [status, setStatus] = useState("required");
   const [defaultValue, setDefaultValue] = useState("");
   const statusArr = ["required", "optional"];
@@ -19,6 +22,7 @@ function DropdownWidgetOption(props) {
     setDropdownOptionList(["option-1", "option-2"]);
     setDropdownName(props.type);
     setIsReadOnly(false);
+    setIsHideLabel(false);
     setMinCount(0);
     setMaxCount(0);
     setDefaultCheckbox([]);
@@ -39,6 +43,7 @@ function DropdownWidgetOption(props) {
         props.currWidgetsDetails?.options?.validation?.maxRequiredCount
       );
       setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly);
+      setIsHideLabel(props.currWidgetsDetails?.options?.isHideLabel);
       setStatus(props.currWidgetsDetails?.options?.status || "required");
       setDefaultValue(props.currWidgetsDetails?.options?.defaultValue || "");
       setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue || []);
@@ -106,13 +111,15 @@ function DropdownWidgetOption(props) {
       null,
       null,
       status,
-      defaultData
+      defaultData,
+      isHideLabel
     );
     //  props.setShowDropdown(false);
     setDropdownOptionList(["option-1", "option-2"]);
     setDropdownName(props.type);
     //  props.setCurrWidgetsDetails({});
     setIsReadOnly(false);
+    setIsHideLabel(false);
     setMinCount(0);
     setMaxCount(0);
     setDefaultCheckbox([]);
@@ -138,35 +145,15 @@ function DropdownWidgetOption(props) {
   };
 
   return (
-    //props.showDropdown
-    <ModalUi
-      //   styleClass={"dropdownModal"}
-      isOpen={props.showDropdown}
-      title={props.title}
-      closeOff={true}
-    >
-      <div style={{ height: "100%", padding: 20 }}>
+    <ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
+      <div className="h-full p-[15px]">
         <form
           onSubmit={(e) => {
             e.preventDefault();
             handleSaveOption();
           }}
         >
-          <div className="dropdownContainer">
-            {["checkbox", "radio"].includes(props.type) &&
-              !props.isSignYourself && (
-                <div>
-                  <input
-                    type="checkbox"
-                    checked={isReadOnly}
-                    onChange={(e) => {
-                      setIsReadOnly(e.target.checked);
-                    }}
-                  />
-
-                  <label style={{ marginLeft: "10px" }}>Is read only</label>
-                </div>
-              )}
+          <div>
             <label style={{ fontSize: "13px", fontWeight: "600" }}>
               Name<span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
@@ -178,36 +165,6 @@ function DropdownWidgetOption(props) {
               className="drodown-input"
             />
 
-            {props.type === "checkbox" && !props.isSignYourself && (
-              <>
-                <label style={{ fontSize: "13px", fontWeight: "600" }}>
-                  Minimun check
-                </label>
-                <input
-                  required
-                  defaultValue={0}
-                  value={minCount}
-                  onChange={(e) => {
-                    const count = handleSetMinMax(e);
-                    setMinCount(count);
-                  }}
-                  className="drodown-input"
-                />
-                <label style={{ fontSize: "13px", fontWeight: "600" }}>
-                  Maximum check
-                </label>
-                <input
-                  required
-                  defaultValue={0}
-                  value={maxCount}
-                  onChange={(e) => {
-                    const count = handleSetMinMax(e);
-                    setMaxCount(count);
-                  }}
-                  className="drodown-input"
-                />
-              </>
-            )}
             <label
               style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
             >
@@ -274,7 +231,6 @@ function DropdownWidgetOption(props) {
                   ></i>
                 </div>
               ))}
-
               <i
                 onClick={handleAddInput}
                 style={{
@@ -285,8 +241,38 @@ function DropdownWidgetOption(props) {
                 }}
                 className="fa-solid fa-square-plus"
               ></i>
+              {props.type === "checkbox" && !props.isSignYourself && (
+                <>
+                  <label style={{ fontSize: "13px", fontWeight: "600" }}>
+                    Minimun check
+                  </label>
+                  <input
+                    required
+                    defaultValue={0}
+                    value={minCount}
+                    onChange={(e) => {
+                      const count = handleSetMinMax(e);
+                      setMinCount(count);
+                    }}
+                    className="drodown-input"
+                  />
+                  <label style={{ fontSize: "13px", fontWeight: "600" }}>
+                    Maximum check
+                  </label>
+                  <input
+                    required
+                    defaultValue={0}
+                    value={maxCount}
+                    onChange={(e) => {
+                      const count = handleSetMinMax(e);
+                      setMaxCount(count);
+                    }}
+                    className="drodown-input"
+                  />
+                </>
+              )}
             </div>
-            {["dropdown", "radio"].includes(props.type) && (
+            {["dropdown", radioButtonWidget].includes(props.type) && (
               <>
                 <label
                   style={{
@@ -321,7 +307,7 @@ function DropdownWidgetOption(props) {
                 </select>
               </>
             )}
-            {props.type !== "checkbox" && props.type !== "radio" && (
+            {props.type !== "checkbox" && props.type !== radioButtonWidget && (
               <>
                 <div
                   style={{
@@ -358,19 +344,56 @@ function DropdownWidgetOption(props) {
                 </div>
               </>
             )}
-          </div>
+            {["checkbox", radioButtonWidget].includes(props.type) && (
+              <div className="flex flex-row gap-5 mt-2 items-center text-center">
+                {!props.isSignYourself && (
+                  <div>
+                    <input
+                      id="isreadonly"
+                      type="checkbox"
+                      checked={isReadOnly}
+                      onChange={(e) => {
+                        setIsReadOnly(e.target.checked);
+                      }}
+                    />
+                    <label className="ml-1" htmlFor="isreadonly">
+                      Is read only
+                    </label>
+                  </div>
+                )}
+                <div>
+                  <input
+                    id="ishidelabel"
+                    type="checkbox"
+                    checked={isHideLabel}
+                    onChange={(e) => {
+                      setIsHideLabel(e.target.checked);
+                    }}
+                  />
 
+                  <label className="ml-1" htmlFor="ishidelabel">
+                    Hide labels
+                  </label>
+                </div>
+              </div>
+            )}
+          </div>
+          {props.type === "checkbox" && !props.isSignYourself && (
+            <PremiumAlertHeader
+              message={
+                "Field validations are free in beta, this feature will incur a fee later."
+              }
+            />
+          )}
           <div
-            style={{
-              height: "1px",
-              backgroundColor: "#9f9f9f",
-              width: "100%",
-              marginTop: "15px",
-              marginBottom: "15px"
-            }}
+            className={`${
+              props.type === "checkbox" && !props.isSignYourself
+                ? "mb-[15px]"
+                : "my-[15px]"
+            } w-full h-[1px] bg-[#9f9f9f]`}
           ></div>
+
           <button
-            // onClick={() => handleSaveOption()}
             disabled={dropdownOptionList.length === 0 && true}
             style={{
               background: themeColor,

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

@@ -2,17 +2,123 @@ import React, { useState, useEffect } from "react";
 import BorderResize from "./BorderResize";
 import PlaceholderBorder from "./PlaceholderBorder";
 import { Rnd } from "react-rnd";
-import { defaultWidthHeight, isMobile } from "../../constant/Utils";
+import {
+  defaultWidthHeight,
+  handleCopyNextToWidget,
+  isMobile,
+  onChangeInput,
+  radioButtonWidget,
+  textInputWidget,
+  textWidget
+} from "../../constant/Utils";
 import PlaceholderType from "./PlaceholderType";
 import moment from "moment";
 import "../../styles/opensigndrive.css";
 
+const selectFormat = (data) => {
+  switch (data) {
+    case "L":
+      return "MM/dd/yyyy";
+    case "DD-MM-YYYY":
+      return "dd-MM-yyyy";
+    case "DD/MM/YYYY":
+      return "dd/MM/yyyy";
+    case "LL":
+      return "MMMM dd, yyyy";
+    case "DD MMM, YYYY":
+      return "dd MMM, yyyy";
+    case "YYYY-MM-DD":
+      return "yyyy-MM-dd";
+    case "MM-DD-YYYY":
+      return "MM-dd-yyyy";
+    case "MM.DD.YYYY":
+      return "MM.dd.yyyy";
+    case "MMM DD, YYYY":
+      return "MMM dd, yyyy";
+    case "DD MMMM, YYYY":
+      return "dd MMMM, yyyy";
+    default:
+      return "MM/dd/yyyy";
+  }
+};
+
+const changeDateToMomentFormat = (format) => {
+  switch (format) {
+    case "MM/dd/yyyy":
+      return "L";
+    case "dd-MM-yyyy":
+      return "DD-MM-YYYY";
+    case "dd/MM/yyyy":
+      return "DD/MM/YYYY";
+    case "MMMM dd, yyyy":
+      return "LL";
+    case "dd MMM, yyyy":
+      return "DD MMM, YYYY";
+    case "yyyy-MM-dd":
+      return "YYYY-MM-DD";
+    case "MM-dd-yyyy":
+      return "MM-DD-YYYY";
+    case "MM.dd.yyyy":
+      return "MM.DD.YYYY";
+    case "MMM dd, yyyy":
+      return "MMM DD, YYYY";
+    case "dd MMMM, yyyy":
+      return "DD MMMM, YYYY";
+    default:
+      return "L";
+  }
+};
+
+//function to get default date
+const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
+  let date;
+  if (format && format === "dd-MM-yyyy") {
+    const newdate = selectedDate
+      ? selectedDate
+      : moment(new Date()).format(changeDateToMomentFormat(format));
+    const [day, month, year] = newdate.split("-");
+    date = new Date(`${year}-${month}-${day}`);
+  } else {
+    date = new Date(selectedDate);
+  }
+  const value = date;
+  return value;
+};
+//function to get default format
+const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
+
 function Placeholder(props) {
   const [isDraggingEnabled, setDraggingEnabled] = useState(true);
   const [isShowDateFormat, setIsShowDateFormat] = useState(false);
-  const [selectDate, setSelectDate] = useState();
+  const [selectDate, setSelectDate] = useState({
+    date:
+      props.pos.type === "date"
+        ? moment(
+            getDefaultdate(
+              props?.pos?.options?.response,
+              props.pos?.options?.validation?.format
+            ).getTime()
+          ).format(
+            changeDateToMomentFormat(props.pos?.options?.validation?.format)
+          )
+        : "",
+    format:
+      props.pos.type === "date"
+        ? getDefaultFormat(props.pos?.options?.validation?.format)
+        : ""
+  });
   const [dateFormat, setDateFormat] = useState([]);
-  const [saveDateFormat, setSaveDateFormat] = useState("");
+  const [startDate, setStartDate] = useState(
+    props.pos.type === "date" &&
+      getDefaultdate(
+        props?.pos?.options?.response,
+        props.pos?.options?.validation?.format
+      )
+  );
+  const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
+    width: null,
+    height: null
+  });
   const dateFormatArr = [
     "L",
     "DD-MM-YYYY",
@@ -25,70 +131,41 @@ function Placeholder(props) {
     "DD MMMM, YYYY"
   ];
 
-  const selectFormat = (data) => {
-    switch (data) {
-      case "L":
-        return "MM/dd/yyyy";
-      case "DD-MM-YYYY":
-        return "dd-MM-yyyy";
-      case "DD/MM/YYYY":
-        return "dd/MM/yyyy";
-      case "LL":
-        return "MMMM dd, yyyy";
-      case "DD MMM, YYYY":
-        return "dd MMM, YYYY";
-      case "YYYY-MM-DD":
-        return "YYYY-MM-dd";
-      case "MM-DD-YYYY":
-        return "MM-dd-YYYY";
-      case "MM.DD.YYYY":
-        return "MM.dd.YYYY";
-      case "MMM DD, YYYY":
-        return "MMM dd, YYYY";
-      case "DD MMMM, YYYY":
-        return "dd MMMM, YYYY";
-      default:
-        return "dd/MM/yyyy";
-    }
-  };
+  useEffect(() => {
+    const updateWidth = () => {
+      const rndElement = document.getElementById(props.pos.key);
+      if (rndElement) {
+        const { width, height } = rndElement.getBoundingClientRect();
+        setGetCheckboxRenderWidth({ width: width, height: height });
+      }
+    };
+
+    // Delay to ensure rendering is complete
+    const timer = setTimeout(updateWidth, 0);
+
+    return () => clearTimeout(timer);
+  }, [props.pos]);
 
   useEffect(() => {
-    //set default current date and default format MM/dd/yyyy
-    if (props.isSignYourself) {
-      const date = new Date();
-      const milliseconds = date.getTime();
-      const newDate = moment(milliseconds).format("MM/DD/YYYY");
-      const dateObj = {
-        date: newDate,
-        format: "MM/dd/YYYY"
-      };
-      setSelectDate(dateObj);
-    } else {
-      const defaultRes = props?.pos?.options?.response;
-      const defaultFormat = props.pos?.options?.validation?.format;
-      const updateDate = defaultRes
-        ? new Date(props?.pos?.options?.response)
-        : new Date();
-      const dateFormat = defaultFormat ? defaultFormat : "MM/DD/YYYY";
-      const milliseconds = updateDate.getTime();
-      const newDate = moment(milliseconds).format(dateFormat);
-      const dateObj = {
-        date: newDate,
-        format: props.pos?.options?.validation?.format
-          ? props.pos?.options?.validation?.format
-          : "MM/dd/YYYY"
-      };
-      setSelectDate(dateObj);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    const closeMenuOnOutsideClick = (e) => {
+      if (!isDraggingEnabled && !e.target.closest("#changeIsDragging")) {
+        setDraggingEnabled(true);
+      }
+    };
 
-  //function for add selected date and format in selectFormat
+    document.addEventListener("click", closeMenuOnOutsideClick);
+
+    return () => {
+      // Cleanup the event listener when the component unmounts
+      document.removeEventListener("click", closeMenuOnOutsideClick);
+    };
+  }, [isDraggingEnabled]);
+  //function change format array list with selected date and format
   const changeDateFormat = () => {
     const updateDate = [];
     dateFormatArr.map((data) => {
       let date;
-      if (selectDate.format === "dd-MM-yyyy") {
+      if (selectDate && selectDate.format === "dd-MM-yyyy") {
         const [day, month, year] = selectDate.date.split("-");
         date = new Date(`${year}-${month}-${day}`);
       } else {
@@ -104,13 +181,15 @@ function Placeholder(props) {
     });
     setDateFormat(updateDate);
   };
+
   useEffect(() => {
     if (props.isPlaceholder || props.isSignYourself) {
       selectDate && changeDateFormat();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectDate]);
-  //handle to close drop down menu onclick screen
+
+  //it detect outside click of date dropdown menu
   useEffect(() => {
     const closeMenuOnOutsideClick = (e) => {
       if (isShowDateFormat && !e.target.closest("#menu-container")) {
@@ -124,20 +203,21 @@ function Placeholder(props) {
     };
   }, [isShowDateFormat]);
 
-  //onclick placeholder function to open signature pad
-  const handlePlaceholderClick = () => {
+  //`handleWidgetIdandPopup` is used to set current widget id and open relative popup
+  const handleWidgetIdandPopup = () => {
     if (props.setSelectWidgetId) {
       props.setSelectWidgetId(props.pos.key);
     }
 
     const widgetTypeExist = [
-      "text",
+      textInputWidget,
       "checkbox",
       "name",
       "company",
       "job title",
       "date",
-      "email"
+      "email",
+      textWidget
     ].includes(props.pos.type);
 
     if (widgetTypeExist) {
@@ -167,7 +247,7 @@ function Placeholder(props) {
     } else if (
       props.isPlaceholder &&
       !props.isDragging &&
-      props.pos.type !== "label"
+      props.pos.type !== textWidget
     ) {
       if (props.pos.key === props.selectWidgetId) {
         props.handleLinkUser(props.data.Id);
@@ -194,9 +274,19 @@ function Placeholder(props) {
       }
     }
   };
-
-  const handleWidgetsOnclick = () => {
-    if (props.pos.type === "radio") {
+  const handleOnClickPlaceholder = () => {
+    if (!props.isNeedSign) {
+      props.setWidgetType(props.pos.type);
+    }
+    if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) {
+      handleWidgetIdandPopup();
+    } else if (props.isPlaceholder || props.isSignYourself) {
+      handleWidgetIdandPopup();
+    }
+  };
+  //`handleOnClickSettingIcon` is used set current widget details and open setting of it
+  const handleOnClickSettingIcon = () => {
+    if (props.pos.type === radioButtonWidget) {
       props.setIsRadio(true);
     } else if (props.pos.type === "dropdown") {
       props?.setShowDropdown(true);
@@ -206,13 +296,78 @@ function Placeholder(props) {
       props?.handleNameModal(true);
     }
 
-    if (props.isPlaceholder) {
+    if (props.isPlaceholder && props.type !== textWidget) {
       props.setUniqueId(props.data.Id);
     }
     props.setSignKey(props.pos.key);
     props.setWidgetType(props.pos.type);
     props.setCurrWidgetsDetails(props.pos);
   };
+  //function to set required state value onclick on widget's copy icon
+  const handleCopyPlaceholder = (e) => {
+    e.stopPropagation();
+    //condition to handle text widget signer obj id and unique id
+    //when user click on copy icon of text widget in that condition text widget does not have any signerObjId
+    //in that case i have to save in tempSignerId as a unique id of previous select signer's unique id
+    //and on save or cancel button of copy all page popup i have set this temp signer Id in unique id
+
+    if (props.data && props?.pos?.type !== textWidget) {
+      props.setSignerObjId(props?.data?.signerObjId);
+      props.setUniqueId(props?.data?.Id);
+    } else if (props.data && props.pos.type === textWidget) {
+      props.setTempSignerId(props.uniqueId);
+      props.setSignerObjId(props?.data?.signerObjId);
+      props.setUniqueId(props?.data?.Id);
+    }
+
+    //checking widget's type and open widget copy modal for required widgets
+    if (
+      ["signature", textWidget, "stamp", "initial"].includes(props.pos.type)
+    ) {
+      props.setIsPageCopy(true);
+      props.setSignKey(props.pos.key);
+    } else {
+      //function to create new widget next to just widget
+      handleCopyNextToWidget(
+        props.pos,
+        props.pos.type,
+        props.xyPostion,
+        props.index,
+        props.setXyPostion,
+        props.data && props.data?.Id
+      );
+    }
+  };
+
+  //function to save date and format on local array onchange date and onclick format
+  const handleSaveDate = (data, isDateChange) => {
+    let updateDate = data.date;
+    //check if date change by user
+    if (isDateChange) {
+      //`changeDateToMomentFormat` is used to convert date as per required to moment package
+      updateDate = moment(data.date).format(
+        changeDateToMomentFormat(data.format)
+      );
+    }
+    //using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
+    //`getDefaultdate` is used to convert update date in new Date() format
+    const date = moment(
+      getDefaultdate(updateDate, data?.format).getTime()
+    ).format(changeDateToMomentFormat(data?.format));
+
+    //`onChangeInput` is used to save data related to date in a placeholder field
+    onChangeInput(
+      date,
+      props.pos.key,
+      props.xyPostion,
+      props.index,
+      props.setXyPostion,
+      props.data && props.data.Id,
+      false,
+      data?.format
+    );
+    setSelectDate({ date: date, format: data?.format });
+  };
   const PlaceholderIcon = () => {
     return (
       props.isShowBorder && (
@@ -223,48 +378,42 @@ function Placeholder(props) {
                 <i
                   onClick={(e) => {
                     e.stopPropagation();
-                    handleWidgetsOnclick();
+                    handleOnClickSettingIcon();
                   }}
                   onTouchEnd={(e) => {
                     e.stopPropagation();
-                    handleWidgetsOnclick();
+                    handleOnClickSettingIcon();
                   }}
                   className="fa-solid fa-gear settingIcon"
                   style={{
                     color: "#188ae2",
-                    right: "9px",
-                    top: "-28px"
+                    right: "29px",
+                    top: "-19px"
                   }}
                 ></i>
               ) : (
-                props.pos.type !== "date" &&
-                props.pos.type !== "label" &&
-                props.pos.type !== "signature" &&
-                !props.isSignYourself && (
+                ((!props?.pos?.type && props.pos.isStamp) ||
+                  (props?.pos?.type &&
+                    !["date", textWidget, "signature"].includes(
+                      props.pos.type
+                    ) &&
+                    !props.isSignYourself)) && (
                   <i
                     onClick={(e) => {
                       e.stopPropagation();
-                      handleWidgetsOnclick();
+                      handleOnClickSettingIcon();
                     }}
                     onTouchEnd={(e) => {
                       e.stopPropagation();
-                      handleWidgetsOnclick();
+                      handleOnClickSettingIcon();
                     }}
                     className="fa-solid fa-gear settingIcon"
-                    style={{
-                      color: "#188ae2",
-                      right: ["checkbox", "radio"].includes(props.pos.type)
-                        ? "24px"
-                        : "47px",
-                      top: ["checkbox", "radio"].includes(props.pos.type)
-                        ? "-28px"
-                        : "-19px"
-                    }}
+                    style={{ color: "#188ae2", right: "47px", top: "-19px" }}
                   ></i>
                 )
               )}
 
-              {props.pos.type !== "label" && !props.isSignYourself && (
+              {props.pos.type !== textWidget && !props.isSignYourself && (
                 <i
                   data-tut="reactourLinkUser"
                   className="fa-regular fa-user signUserIcon"
@@ -278,19 +427,7 @@ function Placeholder(props) {
                     props.handleLinkUser(props.data.Id);
                     props.setUniqueId(props.data.Id);
                   }}
-                  style={{
-                    color: "#188ae2",
-                    right:
-                      props.pos.type === "checkbox" ||
-                      props.pos.type === "radio"
-                        ? "8px"
-                        : "32px",
-                    top:
-                      props.pos.type === "checkbox" ||
-                      props.pos.type === "radio"
-                        ? "-28px"
-                        : "-18px"
-                  }}
+                  style={{ color: "#188ae2", right: "32px", top: "-18px" }}
                 ></i>
               )}
             </>
@@ -347,10 +484,12 @@ function Placeholder(props) {
                         e.stopPropagation();
                         setIsShowDateFormat(!isShowDateFormat);
                         setSelectDate(data);
+                        handleSaveDate(data);
                       }}
                       onClick={() => {
                         setIsShowDateFormat(!isShowDateFormat);
                         setSelectDate(data);
+                        handleSaveDate(data);
                       }}
                       className="dropdown-item itemColor"
                       style={{ fontSize: "12px" }}
@@ -364,35 +503,9 @@ function Placeholder(props) {
           )}
           <i
             className="fa-regular fa-copy signCopy"
-            onClick={(e) => {
-              if (props.data) {
-                props.setSignerObjId(props.data.signerObjId);
-                props.setUniqueId(props.data.Id);
-              }
-              e.stopPropagation();
-              props.setIsPageCopy(true);
-              props.setSignKey(props.pos.key);
-            }}
-            onTouchEnd={(e) => {
-              if (props.data) {
-                props.setSignerObjId(props.data.signerObjId);
-                props.setUniqueId(props.data.Id);
-              }
-              e.stopPropagation();
-              props.setIsPageCopy(true);
-              props.setSignKey(props.pos.key);
-            }}
-            style={{
-              color: "#188ae2",
-              right:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
-                  ? "-9px"
-                  : "12px",
-              top:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
-                  ? "-28px"
-                  : "-18px"
-            }}
+            onClick={(e) => handleCopyPlaceholder(e)}
+            onTouchEnd={(e) => handleCopyPlaceholder(e)}
+            style={{ color: "#188ae2", right: "12px", top: "-18px" }}
           ></i>
           <i
             className="fa-regular fa-circle-xmark signCloseBtn"
@@ -415,17 +528,7 @@ function Placeholder(props) {
                 props.setIsStamp(false);
               }
             }}
-            style={{
-              color: "#188ae2",
-              right:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
-                  ? "-27px"
-                  : "-8px",
-              top:
-                props.pos.type === "checkbox" || props.pos.type === "radio"
-                  ? "-28px"
-                  : "-18px"
-            }}
+            style={{ color: "#188ae2", right: "-8px", top: "-18px" }}
           ></i>
         </>
       )
@@ -434,11 +537,11 @@ function Placeholder(props) {
 
   return (
     <Rnd
+      id={props.pos.key}
       data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
-      //ref={nodeRef}
       key={props.pos.key}
       lockAspectRatio={
-        props.pos.type !== "label" &&
+        props.pos.type !== textWidget &&
         (props.pos.Width
           ? props.pos.Width / props.pos.Height
           : defaultWidthHeight(props.pos.type).width /
@@ -454,10 +557,10 @@ function Placeholder(props) {
           props.data && props.isNeedSign
             ? props.data?.signerObjId === props.signerObjId &&
               props.pos.type !== "checkbox" &&
-              props.pos.type !== "radio"
+              props.pos.type !== radioButtonWidget
               ? true
               : false
-            : props.pos.type !== "radio" &&
+            : props.pos.type !== radioButtonWidget &&
               props.pos.type !== "checkbox" &&
               props.pos.key === props.selectWidgetId &&
               true,
@@ -467,8 +570,8 @@ function Placeholder(props) {
       bounds="parent"
       className="signYourselfBlock"
       style={{
-        border: props.pos.type !== "checkbox" && "1px solid #007bff",
-        borderRadius: props.pos.type !== "checkbox" && "2px",
+        border: "1px solid #007bff",
+        borderRadius: "2px",
         textAlign:
           props.pos.type !== "name" &&
           props.pos.type !== "company" &&
@@ -482,21 +585,27 @@ function Placeholder(props) {
             : "all-scroll",
         zIndex:
           props.pos.type === "date"
-            ? "99"
+            ? props.pos.key === props.selectWidgetId
+              ? 99 + 1
+              : 99
             : props?.pos?.zIndex
               ? props.pos.zIndex
               : "5",
-        background: props.data
-          ? props.data.blockColor
-          : props.pos.type !== "checkbox" && "rgb(203 233 237)"
+        background: props.data ? props.data.blockColor : "rgb(203 233 237)"
       }}
       onDrag={() => {
         setDraggingEnabled(true);
         props.handleTabDrag && props.handleTabDrag(props.pos.key);
       }}
       size={{
-        width: props.posWidth(props.pos, props.isSignYourself),
-        height: props.posHeight(props.pos, props.isSignYourself)
+        width:
+          props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
+            ? "auto"
+            : props.posWidth(props.pos, props.isSignYourself),
+        height:
+          props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
+            ? "auto"
+            : props.posHeight(props.pos, props.isSignYourself)
       }}
       onResizeStart={() => {
         setDraggingEnabled(true);
@@ -508,7 +617,7 @@ function Placeholder(props) {
       disableDragging={
         props.isNeedSign
           ? true
-          : props.isPlaceholder && props.pos.type !== "date"
+          : props.isPlaceholder && ![textWidget].includes(props.pos.type)
             ? false
             : !isDraggingEnabled
       }
@@ -532,41 +641,23 @@ function Placeholder(props) {
             false
           );
       }}
-      onClick={() => {
-        !props.isNeedSign && props.setWidgetType(props.pos.type);
-        props.isNeedSign && props.data?.signerObjId === props.signerObjId
-          ? handlePlaceholderClick()
-          : props.isPlaceholder
-            ? handlePlaceholderClick()
-            : props.isSignYourself && handlePlaceholderClick();
-      }}
+      onClick={() => handleOnClickPlaceholder()}
     >
       {props.isShowBorder &&
-      props.pos.type !== "radio" &&
+      props.pos.type !== radioButtonWidget &&
       props.pos.type !== "checkbox" &&
       props.pos.key === props.selectWidgetId ? (
-        <BorderResize
-          right={
-            props.pos.type === "checkbox" || props.pos.type === "radio"
-              ? -21
-              : -12
-          }
-          top={
-            props.pos.type === "checkbox" || props.pos.type === "radio"
-              ? -21
-              : -11
-          }
-        />
+        <BorderResize right={-12} top={-11} />
       ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
         props.data?.signerObjId === props.signerObjId &&
-        props.pos.type !== "radio" &&
+        props.pos.type !== radioButtonWidget &&
         props.pos.type !== "checkbox" ? (
           <BorderResize />
         ) : (
           <></>
         )
       ) : (
-        props.pos.type !== "radio" &&
+        props.pos.type !== radioButtonWidget &&
         props.pos.type !== "checkbox" &&
         props.pos.key === props.selectWidgetId && <BorderResize />
       )}
@@ -576,6 +667,7 @@ function Placeholder(props) {
           setDraggingEnabled={setDraggingEnabled}
           pos={props.pos}
           isPlaceholder={props.isPlaceholder}
+          getCheckboxRenderWidth={getCheckboxRenderWidth}
         />
       )}
       {isMobile ? (
@@ -583,18 +675,21 @@ function Placeholder(props) {
           style={{
             left: props.xPos(props.pos, props.isSignYourself),
             top: props.yPos(props.pos, props.isSignYourself),
-            width: props.posWidth(props.pos, props.isSignYourself),
+            width:
+              props.pos.type === radioButtonWidget ||
+              props.pos.type === "checkbox"
+                ? "auto"
+                : props.posWidth(props.pos, props.isSignYourself),
+            //  "auto", //props.posWidth(props.pos, props.isSignYourself),
             // height: props.posHeight(props.pos, props.isSignYourself),
+            height:
+              props.pos.type === radioButtonWidget ||
+              props.pos.type === "checkbox"
+                ? "auto"
+                : props.posHeight(props.pos, props.isSignYourself),
             zIndex: "10"
           }}
-          onTouchEnd={() => {
-            !props.isNeedSign && props.setWidgetType(props.pos.type);
-            props.isNeedSign && props.data?.signerObjId === props.signerObjId
-              ? handlePlaceholderClick()
-              : props.isPlaceholder
-                ? handlePlaceholderClick()
-                : props.isSignYourself && handlePlaceholderClick();
-          }}
+          onTouchEnd={() => handleOnClickPlaceholder()}
         >
           {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
 
@@ -615,9 +710,10 @@ function Placeholder(props) {
             isNeedSign={props.isNeedSign}
             setSelectDate={setSelectDate}
             selectDate={selectDate}
-            setSaveDateFormat={setSaveDateFormat}
-            saveDateFormat={saveDateFormat}
             setValidateAlert={props.setValidateAlert}
+            setStartDate={setStartDate}
+            startDate={startDate}
+            handleSaveDate={handleSaveDate}
           />
         </div>
       ) : (
@@ -640,9 +736,10 @@ function Placeholder(props) {
             isNeedSign={props.isNeedSign}
             setSelectDate={setSelectDate}
             selectDate={selectDate}
-            setSaveDateFormat={setSaveDateFormat}
-            saveDateFormat={saveDateFormat}
             setValidateAlert={props.setValidateAlert}
+            setStartDate={setStartDate}
+            startDate={startDate}
+            handleSaveDate={handleSaveDate}
           />
         </>
       )}

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

@@ -2,30 +2,46 @@ import React from "react";
 import { themeColor } from "../../constant/const";
 import {
   defaultWidthHeight,
-  resizeBorderExtraWidth
+  isMobile,
+  radioButtonWidget,
+  resizeBorderExtraWidth,
+  textWidget
 } from "../../constant/Utils";
 function PlaceholderBorder(props) {
-  const getResizeBorderExtraWidth =
-    props.pos.type === "checkbox" || props.pos.type === "radio"
-      ? 38
-      : resizeBorderExtraWidth();
+  const getResizeBorderExtraWidth = resizeBorderExtraWidth();
   const defaultWidth = defaultWidthHeight(props.pos.type).width;
   const defaultHeight = defaultWidthHeight(props.pos.type).height;
 
+  const handleMinWidth = () => {
+    if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
+      return props.getCheckboxRenderWidth.width + getResizeBorderExtraWidth;
+    } else {
+      return props.pos.Width
+        ? props.pos.Width + getResizeBorderExtraWidth
+        : defaultWidth + getResizeBorderExtraWidth;
+    }
+  };
+  const handleMinHeight = () => {
+    if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
+      return props.getCheckboxRenderWidth.height + getResizeBorderExtraWidth;
+    } else {
+      return props.pos.Height
+        ? props.pos.Height + getResizeBorderExtraWidth
+        : defaultHeight + getResizeBorderExtraWidth;
+    }
+  };
   return (
     <div
-      onMouseEnter={props?.setDraggingEnabled(true)}
+      onMouseEnter={() => !isMobile && props?.setDraggingEnabled(true)}
+      onTouchEnd={() =>
+        props.pos.type === textWidget && props?.setDraggingEnabled(true)
+      }
       className="borderResize"
       style={{
         borderColor: themeColor,
         borderStyle: "dashed",
-
-        width: props.pos.Width
-          ? props.pos.Width + getResizeBorderExtraWidth
-          : defaultWidth + getResizeBorderExtraWidth,
-        height: props.pos.Height
-          ? props.pos.Height + getResizeBorderExtraWidth
-          : defaultHeight + getResizeBorderExtraWidth,
+        minWidth: handleMinWidth(),
+        minHeight: handleMinHeight(),
         borderWidth: "0.2px",
         overflow: "hidden"
       }}

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
-import { randomId } from "../../constant/Utils";
+import { randomId, textWidget } from "../../constant/Utils";
 
 function PlaceholderCopy(props) {
   const copyType = ["All pages", "All pages but last", "All pages but first"];
@@ -180,7 +180,13 @@ function PlaceholderCopy(props) {
       copyPlaceholder("first");
     }
   };
-
+  const handleUniqueId = () => {
+    if (props.widgetType === textWidget) {
+      props.setUniqueId(props?.tempSignerId);
+      props.setTempSignerId("");
+    }
+    props.setIsPageCopy(false);
+  };
   return (
     <ModalUi
       isOpen={props.isPageCopy}
@@ -220,7 +226,7 @@ function PlaceholderCopy(props) {
         <button
           onClick={() => {
             handleApplyCopy();
-            props.setIsPageCopy(false);
+            handleUniqueId();
           }}
           style={{ background: themeColor }}
           type="button"
@@ -232,7 +238,9 @@ function PlaceholderCopy(props) {
         <button
           type="button"
           className="finishBtn cancelBtn"
-          onClick={() => props.setIsPageCopy(false)}
+          onClick={() => {
+            handleUniqueId();
+          }}
         >
           Cancel
         </button>

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

@@ -1,5 +1,15 @@
 import React, { useEffect, useState, forwardRef, useRef } from "react";
-import { getMonth, getYear, onChangeInput, range } from "../../constant/Utils";
+import {
+  getMonth,
+  getYear,
+  isMobile,
+  onChangeHeightOfTextArea,
+  onChangeInput,
+  radioButtonWidget,
+  range,
+  textInputWidget,
+  textWidget
+} from "../../constant/Utils";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import "../../styles/signature.css";
@@ -7,10 +17,7 @@ import RegexParser from "regex-parser";
 
 function PlaceholderType(props) {
   const type = props?.pos?.type;
-  const [selectOption, setSelectOption] = useState(
-    props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue : ""
-  );
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectOption, setSelectOption] = useState("");
   const [validatePlaceholder, setValidatePlaceholder] = useState("");
   const inputRef = useRef(null);
   const [textValue, setTextValue] = useState();
@@ -80,7 +87,7 @@ function PlaceholderType(props) {
       case "number":
         setValidatePlaceholder("12345");
         break;
-      case "text":
+      case textInputWidget:
         setValidatePlaceholder("enter text");
         break;
       default:
@@ -89,10 +96,7 @@ function PlaceholderType(props) {
   }
 
   useEffect(() => {
-    if (props.isNeedSign && type === "date") {
-      const updateDate = new Date();
-      setStartDate(updateDate);
-    } else if (type && type === "checkbox" && props.isNeedSign) {
+    if (type && type === "checkbox" && props.isNeedSign) {
       const isDefaultValue = props.pos.options?.defaultValue;
       if (isDefaultValue) {
         setSelectedCheckbox(isDefaultValue);
@@ -103,7 +107,18 @@ function PlaceholderType(props) {
       checkRegularExpress(props.pos?.options?.validation?.type);
     }
     setTextValue(
-      props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue : ""
+      props.pos?.options?.response
+        ? props.pos?.options?.response
+        : props.pos?.options?.defaultValue
+          ? props.pos?.options?.defaultValue
+          : ""
+    );
+    setSelectOption(
+      props.pos?.options?.response
+        ? props.pos?.options?.response
+        : props.pos?.options?.defaultValue
+          ? props.pos?.options?.defaultValue
+          : ""
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -120,54 +135,8 @@ function PlaceholderType(props) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.pos?.options?.defaultValue]);
+  }, [props.pos]);
 
-  useEffect(() => {
-    if (type && type === "date") {
-      if (props.selectDate) {
-        let updateDate;
-        if (props.selectDate.format === "dd-MM-yyyy") {
-          const [day, month, year] = props.saveDateFormat.split("-");
-          updateDate = new Date(`${year}-${month}-${day}`);
-        } else {
-          if (props?.saveDateFormat) {
-            updateDate = new Date(props.saveDateFormat);
-          }
-        }
-        // const updateDate = new Date(props.saveDateFormat);
-        setStartDate(updateDate);
-        const dateObj = {
-          date: props.saveDateFormat,
-          format: props.selectDate
-            ? props.selectDate?.format
-            : props.pos?.options?.validation?.format
-              ? props.pos?.options?.validation?.format
-              : "MM/dd/YYYY"
-        };
-        props.setSelectDate(dateObj);
-        onChangeInput(
-          props.saveDateFormat,
-          props.pos.key,
-          props.xyPostion,
-          props.index,
-          props.setXyPostion,
-          props.data && props.data.Id,
-          false,
-          props.selectDate?.format
-            ? props.selectDate.format
-            : props.pos?.options?.validation?.format
-              ? props.pos?.options?.validation?.format
-              : "MM/dd/YYYY"
-        );
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.saveDateFormat]);
-
-  const dateValue = (value) => {
-    props.setSaveDateFormat(value);
-    return <span>{value}</span>;
-  };
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
     <div
       className="inputPlaceholder"
@@ -175,7 +144,7 @@ function PlaceholderType(props) {
       onClick={onClick}
       ref={ref}
     >
-      {dateValue(value)}
+      {value}
       <i className="fa-regular fa-calendar" style={{ marginLeft: "5px" }}></i>
     </div>
   ));
@@ -307,7 +276,32 @@ function PlaceholderType(props) {
       isRadio
     );
   };
-
+  //function to set onchange date
+  const handleOnDateChange = (date) => {
+    props.setStartDate(date);
+    const isDateChange = true;
+    const dateObj = {
+      date: date,
+      format: props.selectDate.format
+    };
+    props.handleSaveDate(dateObj, isDateChange);
+  };
+  //handle height on enter press in text area
+  const handleEnterPress = (e) => {
+    const height = 15;
+    if (e.key === "Enter") {
+      //function to save height of text area
+      onChangeHeightOfTextArea(
+        height,
+        props.pos.type,
+        props.pos.key,
+        props.xyPostion,
+        props.index,
+        props.setXyPostion,
+        props.data && props.data?.Id
+      );
+    }
+  };
   switch (type) {
     case "signature":
       return props.pos.SignUrl ? (
@@ -356,51 +350,55 @@ function PlaceholderType(props) {
         <div style={{ zIndex: props.isSignYourself && "99" }}>
           {props.pos.options?.values?.map((data, ind) => {
             return (
-              <input
-                key={ind}
-                style={{
-                  width: props.pos.Width,
-                  display: "flex",
-                  justifyContent: "center",
-                  marginBottom: "6px",
-                  marginTop: "5px"
-                }}
-                onBlur={handleInputBlur}
-                disabled={
-                  props.isNeedSign &&
-                  (props.pos.options?.isReadOnly ||
-                    props.data?.signerObjId !== props.signerObjId)
-                }
-                type="checkbox"
-                checked={selectCheckbox(ind)}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    if (!props.isPlaceholder) {
-                      const maxRequired =
-                        props.pos.options?.validation?.maxRequiredCount;
-                      const maxCountInt = maxRequired && parseInt(maxRequired);
+              <div key={ind} className="flex items-center text-center gap-0.5">
+                <input
+                  style={{
+                    // width: props.pos.Width,
+                    display: "flex",
+                    justifyContent: "center",
+                    marginTop: ind === 0 ? 0 : "5px"
+                  }}
+                  onBlur={handleInputBlur}
+                  disabled={
+                    props.isNeedSign &&
+                    (props.pos.options?.isReadOnly ||
+                      props.data?.signerObjId !== props.signerObjId)
+                  }
+                  type="checkbox"
+                  checked={selectCheckbox(ind)}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      if (!props.isPlaceholder) {
+                        const maxRequired =
+                          props.pos.options?.validation?.maxRequiredCount;
+                        const maxCountInt =
+                          maxRequired && parseInt(maxRequired);
 
-                      if (maxCountInt > 0) {
-                        if (
-                          selectedCheckbox &&
-                          selectedCheckbox?.length <= maxCountInt - 1
-                        ) {
+                        if (maxCountInt > 0) {
+                          if (
+                            selectedCheckbox &&
+                            selectedCheckbox?.length <= maxCountInt - 1
+                          ) {
+                            handleCheckboxValue(e.target.checked, ind);
+                          }
+                        } else {
                           handleCheckboxValue(e.target.checked, ind);
                         }
-                      } else {
-                        handleCheckboxValue(e.target.checked, ind);
                       }
+                    } else {
+                      handleCheckboxValue(e.target.checked, ind);
                     }
-                  } else {
-                    handleCheckboxValue(e.target.checked, ind);
-                  }
-                }}
-              />
+                  }}
+                />
+                {!props.pos.options?.isHideLabel && (
+                  <label className="text-xs mb-0 text-center">{data}</label>
+                )}
+              </div>
             );
           })}
         </div>
       );
-    case "text":
+    case textInputWidget:
       return props.isSignYourself ||
         (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
         <input
@@ -462,7 +460,7 @@ function PlaceholderType(props) {
         >
           {/* Default/Title option */}
           <option value="" disabled hidden>
-            {props.pos.options.name}
+            {props?.pos?.options?.name}
           </option>
 
           {props.pos?.options?.values.map((data, ind) => {
@@ -639,21 +637,21 @@ function PlaceholderType(props) {
               </div>
             )}
             disabled={
-              props.isNeedSign && props.data?.signerObjId !== props.signerObjId
+              props.isPlaceholder ||
+              (props.isNeedSign &&
+                props.data?.signerObjId !== props.signerObjId)
             }
             onBlur={handleInputBlur}
             closeOnScroll={true}
             className="inputPlaceholder"
             style={{ outlineColor: "#007bff" }}
             selected={
-              startDate
-                ? startDate
+              props?.startDate
+                ? props?.startDate
                 : props.pos.options?.response &&
                   new Date(props.pos.options.response)
             }
-            onChange={(date) => {
-              setStartDate(date);
-            }}
+            onChange={(date) => handleOnDateChange(date)}
             popperPlacement="top-end"
             customInput={<ExampleCustomInput />}
             dateFormat={
@@ -661,7 +659,7 @@ function PlaceholderType(props) {
                 ? props.selectDate?.format
                 : props.pos?.options?.validation?.format
                   ? props.pos?.options?.validation?.format
-                  : "MM/dd/YYYY"
+                  : "MM/dd/yyyy"
             }
           />
         </div>
@@ -721,43 +719,50 @@ function PlaceholderType(props) {
           <span>{type}</span>
         </div>
       );
-    case "radio":
+    case radioButtonWidget:
       return (
         <div>
           {props.pos.options?.values.map((data, ind) => {
             return (
-              <input
-                key={ind}
-                style={{
-                  width: props.pos.Width,
-                  display: "flex",
-                  justifyContent: "center",
-                  marginBottom: "6px",
-                  marginTop: "5px"
-                }}
-                type="radio"
-                disabled={
-                  props.isNeedSign &&
-                  (props.pos.options?.isReadOnly ||
-                    props.data?.signerObjId !== props.signerObjId)
-                }
-                checked={handleRadioCheck(data)}
-                onChange={(e) => {
-                  if (!props.isPlaceholder) {
-                    handleCheckRadio(e.target.checked, data);
+              <div key={ind} className="flex items-center text-center gap-0.5">
+                <input
+                  style={{
+                    width: props.pos.Width,
+                    display: "flex",
+                    justifyContent: "center",
+                    marginTop: ind === 0 ? 0 : "5px"
+                  }}
+                  type="radio"
+                  disabled={
+                    props.isNeedSign &&
+                    (props.pos.options?.isReadOnly ||
+                      props.data?.signerObjId !== props.signerObjId)
                   }
-                }}
-              />
+                  checked={handleRadioCheck(data)}
+                  onChange={(e) => {
+                    if (!props.isPlaceholder) {
+                      handleCheckRadio(e.target.checked, data);
+                    }
+                  }}
+                />
+                {!props.pos.options?.isHideLabel && (
+                  <label className="text-xs mb-0">{data}</label>
+                )}
+              </div>
             );
           })}
         </div>
       );
-    case "label":
+    case textWidget:
       return (
         <textarea
           placeholder="Enter label"
           rows={1}
+          onKeyDown={handleEnterPress}
+          value={textValue}
+          onBlur={handleInputBlur}
           onChange={(e) => {
+            setTextValue(e.target.value);
             onChangeInput(
               e.target.value,
               props.pos.key,
@@ -768,7 +773,11 @@ function PlaceholderType(props) {
               false
             );
           }}
-          className="labelTextArea"
+          className={
+            isMobile
+              ? "labelTextArea labelWidthMobile"
+              : "labelTextArea labelWidthDesktop"
+          }
           style={{ whiteSpace: "pre-wrap" }}
           cols="50"
         />

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

@@ -1,36 +1,15 @@
 import React, { useRef, useState } from "react";
-import { darkenColor, getFirstLetter } from "../../constant/Utils";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import {
+  color,
+  darkenColor,
+  getFirstLetter,
+  isMobile,
+  nameColor
+} from "../../constant/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 [animationParent] = useAutoAnimate();
   const [isHover, setIsHover] = useState();
   const [isEdit, setIsEdit] = useState(false);
   //function for onhover signer name change background color
@@ -63,27 +42,94 @@ const RecipientList = (props) => {
     return props.signerPos.some((x) => x.Id === Id);
   };
 
+  //handle drag start
+  const handleDragStart = (e, id) => {
+    // `e.dataTransfer.setData('text/plain')`is used to set the data to be transferred during a drag operation.
+    // The first argument specifies the type of data being set, and the second argument is the actual data you want to transfer.
+    e.dataTransfer.setData("text/plain", id);
+  };
+
+  //handleDragOver prevents the default behavior of the dragover event, which is necessary for the drop event to be triggered.
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
+
+  //handle draggable element drop and also used in mobile view on up and down key to chnage sequence of recipient's list
+  const handleChangeSequence = (e, ind, isUp, isDown) => {
+    e.preventDefault();
+    let draggedItemId;
+    let index = ind;
+
+    //if isUp true then set item's id and index in mobile view
+    if (isUp) {
+      draggedItemId = index;
+      index = index - 1;
+    }
+    //if isDown true then set item's id and index in mobile view
+    else if (isDown) {
+      draggedItemId = index;
+      index = index + 1;
+    } //else set id on drag element in desktop viiew
+    else {
+      //`e.dataTransfer.getData('text/plain')` is used to get data that you have saved.
+      draggedItemId = e.dataTransfer.getData("text/plain");
+    }
+
+    //convert string to number
+    const intDragId = parseInt(draggedItemId);
+    //get that item to change position
+    const draggedItem = props.signersdata.filter((_, ind) => ind === intDragId);
+    const remainingItems = props.signersdata.filter(
+      (_, ind) => ind !== intDragId
+    );
+    //splice method is used to replace or add new value in array at specific index
+    remainingItems.splice(index, 0, ...draggedItem);
+
+    //set current draggable recipient details,objectId,index,contract_className ... after replace recipient list
+    props.setSignersData(remainingItems);
+    props.setSignerObjId(remainingItems[index]?.objectId || "");
+    props.setIsSelectId(index);
+    props.setContractName(remainingItems[index]?.className || "");
+    props.setUniqueId(remainingItems[index]?.Id);
+    props.setRoleName(remainingItems[index]?.Role);
+    props.setBlockColor(remainingItems[index]?.blockColor);
+  };
+
   return (
     <>
       {props.signersdata.length > 0 &&
         props.signersdata.map((obj, ind) => {
           return (
             <div
+              ref={animationParent}
+              key={ind}
+              draggable={props.sendInOrder && !isMobile ? true : false}
+              onDragStart={(e) =>
+                props.sendInOrder && !isMobile && handleDragStart(e, ind)
+              }
+              onDragOver={(e) =>
+                props.sendInOrder && !isMobile && handleDragOver(e)
+              }
+              onDrop={(e) =>
+                props.sendInOrder && !isMobile && handleChangeSequence(e, ind)
+              }
               data-tut="reactourFirst"
               onMouseEnter={() => setIsHover(ind)}
               onMouseLeave={() => setIsHover(null)}
-              key={ind}
+              className={props.sendInOrder && "dragCursor"}
               style={
-                isHover === ind || props.isSelectListId === ind
-                  ? onHoverStyle(ind, obj.blockColor)
+                (!isMobile && isHover === ind) || props.isSelectListId === ind
+                  ? onHoverStyle(ind, obj?.blockColor)
                   : nonHoverStyle(ind)
               }
-              onClick={() => {
+              onClick={(e) => {
+                e.preventDefault();
                 props.setSignerObjId(obj?.objectId || "");
                 props.setIsSelectId(ind);
                 props.setContractName(obj?.className || "");
                 props.setUniqueId(obj.Id);
                 props.setRoleName(obj.Role);
+                props.setBlockColor(obj?.blockColor);
                 if (props.handleModal) {
                   props.handleModal();
                 }
@@ -98,10 +144,9 @@ const RecipientList = (props) => {
                 }}
               >
                 <div
-                  className="signerStyle"
                   style={{
-                    background: obj.blockColor
-                      ? darkenColor(obj.blockColor, 0.4)
+                    background: obj?.blockColor
+                      ? darkenColor(obj?.blockColor, 0.4)
                       : nameColor[ind % nameColor.length],
                     width: 30,
                     height: 30,
@@ -113,6 +158,7 @@ const RecipientList = (props) => {
                   }}
                 >
                   <span
+                    className={props.sendInOrder && "dragCursor"}
                     style={{
                       fontSize: "12px",
                       textAlign: "center",
@@ -140,13 +186,12 @@ const RecipientList = (props) => {
                   }}
                 >
                   {obj.Name ? (
-                    <span className="userName" style={{ cursor: "default" }}>
-                      {obj.Name}
-                    </span>
+                    <span className={"userName"}>{obj.Name}</span>
                   ) : (
                     <>
                       <span
                         className="userName"
+                        style={{ cursor: "pointer" }}
                         onClick={() => {
                           setIsEdit({ [obj.Id]: true });
                           props.setRoleName(obj.Role);
@@ -157,7 +202,8 @@ const RecipientList = (props) => {
                             ref={inputRef}
                             style={{
                               backgroundColor: "transparent",
-                              width: "inherit"
+                              width: "inherit",
+                              padding: "3px"
                             }}
                             value={obj.Role}
                             onChange={(e) => props.handleRoleChange(e, obj.Id)}
@@ -173,25 +219,57 @@ const RecipientList = (props) => {
                             }}
                           />
                         ) : (
-                          obj.Role
+                          <span style={{ padding: "3px" }}>{obj.Role}</span>
                         )}
                       </span>
                     </>
                   )}
-                  {obj.Name && (
-                    <span className="useEmail" style={{ cursor: "default" }}>
-                      {obj.Role}
-                    </span>
-                  )}
+                  {obj.Name && <span className={"useEmail"}>{obj.Role}</span>}
                 </div>
               </div>
+              {isMobile && props.sendInOrder && (
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 5
+                  }}
+                >
+                  <div
+                    onClick={(e) => {
+                      if (ind !== 0) {
+                        e.stopPropagation();
+                        handleChangeSequence(e, ind, "up");
+                      }
+                    }}
+                    style={{ color: ind === 0 ? "gray" : "black" }}
+                  >
+                    ▲
+                  </div>
+                  <div
+                    onClick={(e) => {
+                      if (ind !== props.signersdata.length - 1) {
+                        e.stopPropagation();
+                        handleChangeSequence(e, ind, null, "down");
+                      }
+                    }}
+                    style={{
+                      color:
+                        ind === props.signersdata.length - 1 ? "gray" : "black"
+                    }}
+                  >
+                    ▼
+                  </div>
+                </div>
+              )}
               {props.handleDeleteUser && (
                 <div
                   onClick={(e) => {
                     e.stopPropagation();
                     props.handleDeleteUser(obj.Id);
                   }}
-                  style={{ cursor: "pointer" }}
+                  style={{ cursor: "pointer", marginLeft: "5px" }}
                 >
                   <i className="fa-regular fa-trash-can"></i>
                 </div>

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

@@ -56,7 +56,9 @@ function RenderPdf({
   selectWidgetId,
   unSignedWidgetId,
   setIsCheckbox,
-  handleNameModal
+  handleNameModal,
+  setTempSignerId,
+  uniqueId
 }) {
   const isMobile = window.innerWidth < 767;
   const newWidth = containerWH.width;
@@ -268,6 +270,8 @@ function RenderPdf({
                         setIsInitial={setIsInitial}
                         setValidateAlert={setValidateAlert}
                         unSignedWidgetId={unSignedWidgetId}
+                        setSelectWidgetId={setSelectWidgetId}
+                        selectWidgetId={selectWidgetId}
                       />
                     </React.Fragment>
                   )
@@ -393,6 +397,8 @@ function RenderPdf({
                                         setSelectWidgetId={setSelectWidgetId}
                                         selectWidgetId={selectWidgetId}
                                         handleNameModal={handleNameModal}
+                                        setTempSignerId={setTempSignerId}
+                                        uniqueId={uniqueId}
                                       />
                                     </React.Fragment>
                                   );
@@ -574,6 +580,8 @@ function RenderPdf({
                                           setSelectWidgetId={setSelectWidgetId}
                                           selectWidgetId={selectWidgetId}
                                           handleNameModal={handleNameModal}
+                                          setTempSignerId={setTempSignerId}
+                                          uniqueId={uniqueId}
                                         />
                                       </React.Fragment>
                                     );

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

@@ -76,7 +76,6 @@ function SignPad({
   };
   //function for set signature url
   const handleSignatureChange = () => {
-    // canvasRef.current.backgroundColor = 'rgb(165, 26, 26)'
     setSignature(canvasRef.current.toDataURL());
     setIsSignImg(canvasRef.current.toDataURL());
   };
@@ -114,7 +113,6 @@ function SignPad({
                   setIsSignImg("");
                   onSaveSign(false, textWidth, textHeight);
                 } else {
-                  setIsSignImg("");
                   onSaveSign();
                 }
               }
@@ -153,6 +151,18 @@ function SignPad({
     );
   };
 
+  useEffect(() => {
+    if (canvasRef.current && isSignImg) {
+      canvasRef.current.fromDataURL(isSignImg);
+    }
+    const trimmedName = currentUserName.trim();
+    const firstCharacter = trimmedName.charAt(0);
+    const userName = isInitial ? firstCharacter : currentUserName;
+    setSignValue(userName);
+    setFontSelect("Fasthand");
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSignPad]);
   useEffect(() => {
     const loadFont = async () => {
       try {
@@ -186,7 +196,7 @@ function SignPad({
   }, [isTab]);
 
   //function for convert input text value in image
-  const convertToImg = async (fontStyle, text) => {
+  const convertToImg = async (fontStyle, text, color) => {
     //get text content to convert in image
     const textContent = text;
     const fontfamily = fontStyle
@@ -199,6 +209,7 @@ function SignPad({
     const span = document.createElement("span");
     span.textContent = textContent;
     span.style.font = `20px ${fontfamily}`; // here put your text size and font family
+    span.style.color = color ? color : penColor;
     span.style.display = "hidden";
     document.body.appendChild(span); // Replace 'container' with the ID of the container element
 
@@ -216,13 +227,9 @@ function SignPad({
     canvasElement.width = width * pixelRatio;
     canvasElement.height = height * pixelRatio;
 
-    // Render the content of the span onto the canvas
-    // ctx.fillStyle = "white"; // Set the background color of the canvas
-    // ctx.fillRect(0, 0, width*pixelRatio, height*pixelRatio);
-
     // You can customize text styles if needed
     ctx.font = font;
-    ctx.fillStyle = "black"; // Set the text color
+    ctx.fillStyle = color ? color : penColor; // Set the text color
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
     ctx.scale(pixelRatio, pixelRatio);
@@ -235,6 +242,45 @@ function SignPad({
     setSignature(dataUrl);
   };
 
+  const PenColorComponent = (props) => {
+    return (
+      <div style={{ display: "flex", flexDirection: "row" }}>
+        {allColor.map((data, key) => {
+          return (
+            <i
+              style={{
+                margin: "5px",
+                color: data,
+                borderBottom:
+                  key === 0 && penColor === "blue"
+                    ? "2px solid blue"
+                    : key === 1 && penColor === "red"
+                      ? "2px solid red"
+                      : key === 2 && penColor === "black"
+                        ? "2px solid black"
+                        : "2px solid white"
+              }}
+              onClick={() => {
+                props?.convertToImg &&
+                  props?.convertToImg(fontSelect, signValue, data);
+                if (key === 0) {
+                  setPenColor("blue");
+                } else if (key === 1) {
+                  setPenColor("red");
+                } else if (key === 2) {
+                  setPenColor("black");
+                }
+              }}
+              key={key}
+              className="fa solid fa-pen-nib"
+              width={20}
+              height={20}
+            ></i>
+          );
+        })}
+      </div>
+    );
+  };
   return (
     <div>
       {isSignPad && (
@@ -457,6 +503,7 @@ function SignPad({
                           background: "rgb(255, 255, 255)",
                           objectFit: "contain"
                         }}
+                        draggable="false"
                         src={isInitial ? myInitial : defaultSign}
                       />
                     </div>
@@ -517,6 +564,7 @@ function SignPad({
                           alt="print img"
                           ref={imageRef}
                           src={image.src}
+                          draggable="false"
                           style={{
                             objectFit: "contain",
                             height: "100%",
@@ -547,7 +595,7 @@ function SignPad({
 
                     <input
                       maxLength={isInitial ? 3 : 30}
-                      style={{ fontFamily: fontSelect }}
+                      style={{ fontFamily: fontSelect, color: penColor }}
                       type="text"
                       className="signatureInput"
                       placeholder="Your signature"
@@ -578,7 +626,8 @@ function SignPad({
                           <div
                             style={{
                               padding: "5px 10px 5px 10px",
-                              fontSize: "20px"
+                              fontSize: "20px",
+                              color: penColor
                             }}
                           >
                             {signValue ? signValue : "Your signature"}
@@ -588,7 +637,15 @@ function SignPad({
                     })}
                   </div>
 
-                  <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      marginTop: "10px"
+                    }}
+                  >
+                    <PenColorComponent convertToImg={convertToImg} />
                     <SaveBtn />
                   </div>
                 </div>
@@ -622,39 +679,7 @@ function SignPad({
                       marginTop: "10px"
                     }}
                   >
-                    <div style={{ display: "flex", flexDirection: "row" }}>
-                      {allColor.map((data, key) => {
-                        return (
-                          <i
-                            style={{
-                              margin: "5px",
-                              color: data,
-                              borderBottom:
-                                key === 0 && penColor === "blue"
-                                  ? "2px solid blue"
-                                  : key === 1 && penColor === "red"
-                                    ? "2px solid red"
-                                    : key === 2 && penColor === "black"
-                                      ? "2px solid black"
-                                      : "2px solid white"
-                            }}
-                            onClick={() => {
-                              if (key === 0) {
-                                setPenColor("blue");
-                              } else if (key === 1) {
-                                setPenColor("red");
-                              } else if (key === 2) {
-                                setPenColor("black");
-                              }
-                            }}
-                            key={key}
-                            className="fa solid fa-pen-nib"
-                            width={20}
-                            height={20}
-                          ></i>
-                        );
-                      })}
-                    </div>
+                    <PenColorComponent />
                     <SaveBtn />
                   </div>
                 </>

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

@@ -3,7 +3,12 @@ import ModalUi from "../../primitives/ModalUi";
 import RecipientList from "./RecipientList";
 import { useDrag } from "react-dnd";
 import WidgetList from "./WidgetList";
-import { widgets } from "../../constant/Utils";
+import {
+  radioButtonWidget,
+  textInputWidget,
+  textWidget,
+  widgets
+} from "../../constant/Utils";
 import { themeColor } from "../../constant/const";
 function WidgetComponent({
   dragSignature,
@@ -29,8 +34,11 @@ function WidgetComponent({
   handleRoleChange,
   handleOnBlur,
   title,
-
-  isTemplateFlow
+  setSignersData,
+  sendInOrder,
+  isTemplateFlow,
+  setBlockColor,
+  blockColor
 }) {
   const [isSignersModal, setIsSignersModal] = useState(false);
 
@@ -58,16 +66,15 @@ function WidgetComponent({
       isDragCheck: !!monitor.isDragging()
     })
   });
-  const [, text] = useDrag({
+  const [, textInput] = useDrag({
     type: "BOX",
     item: {
       type: "BOX",
       id: 7,
-      text: "text"
+      text: textInputWidget
     },
-
     collect: (monitor) => ({
-      isDragText: !!monitor.isDragging()
+      isDragTextInput: !!monitor.isDragging()
     })
   });
   const [, initials] = useDrag({
@@ -153,28 +160,28 @@ function WidgetComponent({
       isDragEmail: !!monitor.isDragging()
     })
   });
-  const [, radio] = useDrag({
+  const [, radioButton] = useDrag({
     type: "BOX",
 
     item: {
       type: "BOX",
       id: 15,
-      text: "radio"
+      text: radioButtonWidget
     },
     collect: (monitor) => ({
-      isDragRadio: !!monitor.isDragging()
+      isDragRadiotton: !!monitor.isDragging()
     })
   });
-  const [, label] = useDrag({
+  const [, text] = useDrag({
     type: "BOX",
 
     item: {
       type: "BOX",
       id: 16,
-      text: "label"
+      text: textWidget
     },
     collect: (monitor) => ({
-      isDragLabel: !!monitor.isDragging()
+      isDragText: !!monitor.isDragging()
     })
   });
   const isMobile = window.innerWidth < 767;
@@ -204,17 +211,17 @@ function WidgetComponent({
       dragSignature,
       dragStamp,
       initials,
-      label,
+      name,
+      jobTitle,
+      company,
+      date,
       text,
+      textInput,
       checkbox,
       dropdown,
-      radio,
+      radioButton,
       image,
-      date,
-      name,
-      email,
-      company,
-      jobTitle
+      email
     ];
     const getWidgetArray = widgets;
     const newUpdateSigner = getWidgetArray.map((obj, ind) => {
@@ -227,13 +234,15 @@ function WidgetComponent({
 
   const filterWidgets = widget.filter(
     (data) =>
-      data.type !== "dropdown" && data.type !== "radio" && data.type !== "label"
+      data.type !== "dropdown" &&
+      data.type !== radioButtonWidget &&
+      data.type !== textInputWidget
   );
-  const labelWidget = widget.filter((data) => data.type !== "label");
+  const textWidgetData = widget.filter((data) => data.type !== textWidget);
   const updateWidgets = isSignYourself
     ? filterWidgets
     : isTemplateFlow
-      ? labelWidget
+      ? textWidgetData
       : widget;
 
   return (
@@ -250,19 +259,17 @@ function WidgetComponent({
               <div
                 data-tut={dataTut}
                 style={{
-                  background: isSelectListId
-                    ? color[isSelectListId % color.length]
-                    : color[0],
+                  background: blockColor
+                    ? blockColor
+                    : isSelectListId
+                      ? color[isSelectListId % color.length]
+                      : color[0],
                   padding: "10px 20px",
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center"
                 }}
-                onClick={() => {
-                  // if (signersdata?.length) {
-                  handleModal();
-                  // }
-                }}
+                onClick={() => handleModal()}
               >
                 <span
                   style={{
@@ -340,7 +347,7 @@ function WidgetComponent({
                   display: "flex",
                   overflowX: "scroll",
                   whiteSpace: "nowrap",
-                  padding: "10px"
+                  padding: "10px 5px 10px 1px"
                 }}
               >
                 <WidgetList
@@ -384,20 +391,25 @@ function WidgetComponent({
           handleClose={handleModal}
         >
           {signersdata.length > 0 ? (
-            <RecipientList
-              signerPos={signerPos}
-              signersdata={signersdata}
-              isSelectListId={isSelectListId}
-              setSignerObjId={setSignerObjId}
-              setIsSelectId={setIsSelectId}
-              setContractName={setContractName}
-              setUniqueId={setUniqueId}
-              setRoleName={setRoleName}
-              handleDeleteUser={handleDeleteUser}
-              handleRoleChange={handleRoleChange}
-              handleOnBlur={handleOnBlur}
-              handleModal={handleModal}
-            />
+            <div style={{ maxHeight: "600px", overflow: "auto" }}>
+              <RecipientList
+                signerPos={signerPos}
+                signersdata={signersdata}
+                isSelectListId={isSelectListId}
+                setSignerObjId={setSignerObjId}
+                setIsSelectId={setIsSelectId}
+                setContractName={setContractName}
+                setUniqueId={setUniqueId}
+                setRoleName={setRoleName}
+                handleDeleteUser={handleDeleteUser}
+                handleRoleChange={handleRoleChange}
+                handleOnBlur={handleOnBlur}
+                handleModal={handleModal}
+                sendInOrder={sendInOrder}
+                setSignersData={setSignersData}
+                setBlockColor={setBlockColor}
+              />
+            </div>
           ) : (
             <div
               style={{

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

@@ -4,7 +4,7 @@ import { getWidgetType } from "../../constant/Utils";
 function WidgetList(props) {
   return props.updateWidgets.map((item, ind) => {
     return (
-      <div key={ind} style={{ marginBottom: "10px" }}>
+      <div key={ind} style={{ marginBottom: "5px" }}>
         <div
           className="widgets"
           onClick={() => {

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

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react";
 import ModalUi from "../../primitives/ModalUi";
 import "../../styles/AddUser.css";
 import RegexParser from "regex-parser";
+import { textInputWidget } from "../../constant/Utils";
+import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
 
 const WidgetNameModal = (props) => {
   const [formdata, setFormdata] = useState({
@@ -13,7 +15,7 @@ const WidgetNameModal = (props) => {
   });
   const [isValid, setIsValid] = useState(true);
   const statusArr = ["Required", "Optional"];
-  const inputOpt = ["email", "number"];
+  const inputOpt = ["text", "email", "number"];
 
   useEffect(() => {
     if (props.defaultdata) {
@@ -97,7 +99,23 @@ const WidgetNameModal = (props) => {
       handleClose={props.handleClose && props.handleClose}
       title={"Widget info"}
     >
-      <form onSubmit={handleSubmit} style={{ padding: 20 }}>
+      {(props.defaultdata?.type === textInputWidget ||
+        props.widgetName === textInputWidget) && (
+        <PremiumAlertHeader
+          message={
+            "Field validations are free in beta, this feature will incur a fee later."
+          }
+        />
+      )}
+      <form
+        onSubmit={handleSubmit}
+        className={`${
+          props.defaultdata?.type === textInputWidget ||
+          props.widgetName === textInputWidget
+            ? "pt-0"
+            : ""
+        } p-[20px]`}
+      >
         <div className="form-section">
           <label htmlFor="name" style={{ fontSize: 13 }}>
             Name
@@ -111,8 +129,8 @@ const WidgetNameModal = (props) => {
             required
           />
         </div>
-        {(props.defaultdata?.type === "text" ||
-          props.widgetName === "text") && (
+        {(props.defaultdata?.type === textInputWidget ||
+          props.widgetName === textInputWidget) && (
           <>
             <div className="form-section">
               <label htmlFor="textvalidate" style={{ fontSize: 13 }}>
@@ -128,18 +146,7 @@ const WidgetNameModal = (props) => {
               >
                 <div style={{ width: "100%", position: "relative" }}>
                   <input
-                    style={{
-                      padding: "0.5rem 0.75rem",
-                      width: "92%",
-                      borderWidth: "1px",
-                      borderColor: "#d1d5db",
-                      borderTopLeftRadius: "0.375rem",
-                      borderBottomLeftRadius: "0.375rem",
-                      outline: "none",
-                      fontSize: "0.75rem",
-                      position: "relative",
-                      zIndex: 2
-                    }}
+                    className="relative z-20 w-[87%] md:w-[92%] p-2.5 border-[1px] border-[#d1d5db] rounded-l-md outline-none text-xs"
                     name="textvalidate"
                     placeholder="Enter custom expression"
                     value={formdata.textvalidate}
@@ -147,8 +154,7 @@ const WidgetNameModal = (props) => {
                     // onBlur={() => handleBlurRegex()}
                   />
                   <select
-                    style={{ position: "absolute", left: 0, zIndex: 1 }}
-                    className="addUserInput"
+                    className="validationlist addUserInput"
                     name="textvalidate"
                     value={formdata.textvalidate}
                     onChange={(e) => handleChange(e)}
@@ -181,25 +187,22 @@ const WidgetNameModal = (props) => {
                 name="defaultValue"
                 value={formdata.defaultValue}
                 onChange={(e) => handledefaultChange(e)}
-                onBlur={() =>
-                  isValid === false &&
-                  setFormdata({ ...formdata, defaultValue: "" })
-                }
+                autoComplete="off"
+                onBlur={() => {
+                  if (isValid === false) {
+                    setFormdata({ ...formdata, defaultValue: "" });
+                    setIsValid(true);
+                  }
+                }}
               />
-              {isValid === false ? (
-                <p style={{ color: "Red", fontSize: 8 }}>
+              {isValid === false && (
+                <div className="warning defaultvalueWarning" style={{ fontSize: 12 }}>
+                  <i
+                    className="fas fa-exclamation-circle"
+                    style={{ color: "#fab005", fontSize: 15 }}
+                  ></i>{" "}
                   invalid default value
-                </p>
-              ) : (
-                <p
-                  style={{
-                    color: "transparent",
-                    fontSize: 10,
-                    margin: "3px 8px"
-                  }}
-                >
-                  .
-                </p>
+                </div>
               )}
             </div>
           </>
@@ -243,8 +246,8 @@ const WidgetNameModal = (props) => {
             })}
           </div>
         </div>
-        {(props.defaultdata?.type === "text" ||
-          props?.widgetName === "text") && (
+        {(props.defaultdata?.type === textInputWidget ||
+          props?.widgetName === textInputWidget) && (
           <div className="form-section">
             <label htmlFor="hint" style={{ fontSize: 13 }}>
               Hint

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

@@ -11,6 +11,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   const [name, setName] = useState("");
   const [folderList, setFolderList] = useState([]);
   const [isAlert, setIsAlert] = useState(false);
+  const [isLoader, setIsLoader] = useState(false);
   const [selectedParent, setSelectedParent] = useState();
   const [alert, setAlert] = useState({ type: "info", message: "" });
   useEffect(() => {
@@ -42,6 +43,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   };
   const handleCreateFolder = async (event) => {
     event.preventDefault();
+    handleLoader(true);
     if (name) {
       const currentUser = Parse.User.current();
       const exsitQuery = new Parse.Query(folderCls);
@@ -52,7 +54,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
       }
       const templExist = await exsitQuery.first();
       if (templExist) {
-        setAlert({ type: "dange", message: "Folder already exist!" });
+        setAlert({ type: "danger", message: "Folder already exist!" });
         setIsAlert(true);
         setTimeout(() => {
           setIsAlert(false);
@@ -74,6 +76,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
         template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
         const res = await template.save();
         if (res) {
+          handleLoader(false);
           setAlert({
             type: "success",
             message: "Folder created successfully!"
@@ -88,6 +91,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
         }
       }
     } else {
+      handleLoader(false);
       setAlert({ type: "info", message: "Please fill folder name" });
       setIsAlert(true);
       setTimeout(() => {
@@ -98,10 +102,21 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   const handleOptions = (e) => {
     setSelectedParent(e.target.value);
   };
+  const handleLoader = (status) => {
+    setIsLoader(status);
+  };
   return (
     <div>
       {isAlert && <Alert type={alert.type}>{alert.message}</Alert>}
-      <div id="createFolder">
+      <div id="createFolder" className="relative">
+        {isLoader && (
+          <div className="absolute h-full w-full flex justify-center items-center ">
+            <div
+              style={{ fontSize: "45px", color: "#3dd3e0" }}
+              className="loader-37"
+            ></div>
+          </div>
+        )}
         <h1 className="text-base font-semibold">Create Folder</h1>
         <div className="text-xs mt-2">
           <label className="block">
@@ -133,6 +148,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
         <div>
           <button
             onClick={handleCreateFolder}
+            disabled={isLoader}
             className="flex items-center rounded p-2 bg-[#32a3ac] text-white mt-3"
           >
             <i className="fa-solid fa-plus mr-1"></i>

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

@@ -0,0 +1,234 @@
+import React, { useEffect, useState } from "react";
+import Parse from "parse";
+import CreateFolder from "./CreateFolder";
+import ModalUi from "../../../primitives/ModalUi";
+
+const FolderModal = (props) => {
+  const [clickFolder, setClickFolder] = useState("");
+  const [folderList, setFolderList] = useState([]);
+  const [tabList, setTabList] = useState([]);
+  const [isLoader, setIsLoader] = useState(false);
+  const [isAdd, setIsAdd] = useState(false);
+  //   below useEffect is called when user open popup
+  useEffect(() => {
+    if (props.isOpenModal) {
+      fetchFolder();
+    }
+    // eslint-disable-next-line
+  }, [props.isOpenModal]);
+
+  // `fetchFolder` is used to fetch of folder list created by user on basis of folderPtr or without folderPtr
+  const fetchFolder = async (folderPtr) => {
+    setIsLoader(true);
+    try {
+      const FolderQuery = new Parse.Query(props.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);
+    }
+  };
+
+  // `handleSelect` is used to save pointer of folder selected by user and it's path in state
+  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: props.folderCls,
+          objectId: item.objectId
+        };
+        fetchFolder(folderPtr);
+      }
+    } else {
+      setTabList((tabs) => [...tabs, item]);
+      const folderPtr = {
+        __type: "Pointer",
+        className: props.folderCls,
+        objectId: item.objectId
+      };
+
+      fetchFolder(folderPtr);
+    }
+  };
+
+  // `handleSubmit` is used to pass folderPtr to parent component
+  const handleSubmit = () => {
+    let url = "OpenSign™ Drive";
+    tabList.forEach((t) => {
+      url = url + " / " + t.Name;
+    });
+    if (props.onSuccess) {
+      props.onSuccess(clickFolder);
+    }
+    // SetIsOpen(false);
+    props.setIsOpenMoveModal(false);
+  };
+
+  // `handleCancel` is used to clear list of folder, close popup and folderUrl
+  const handleCancel = () => {
+    // SetIsOpen(false);
+    props.setIsOpenMoveModal(false);
+    setClickFolder({});
+    setFolderList([]);
+    setTabList([]);
+  };
+
+  // `handleCancel` is call when user click on folder name from path/tab in popup
+  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: props.folderCls,
+          objectId: list[_len].objectId
+        };
+        setTabList(list);
+      } else {
+        setClickFolder({});
+        setFolderList([]);
+        setTabList([]);
+      }
+      fetchFolder(folderPtr);
+    }
+  };
+  // `handleCreate` is used to open folder creation form in popup
+  const handleCreate = () => {
+    setIsAdd(!isAdd);
+  };
+  // `handleAddFolder` is call when user folder created successfully and it fetch folder list on the basis of folderPtr or without folderPtr
+  const handleAddFolder = (newFolder) => {
+    props.setPdfData((prev) => [...prev, newFolder?.toJSON()]);
+    if (clickFolder && clickFolder.ObjectId) {
+      fetchFolder({
+        __type: "Pointer",
+        className: props.folderCls,
+        objectId: clickFolder.ObjectId
+      });
+    } else {
+      fetchFolder();
+    }
+    handleCreate();
+  };
+  return (
+    <div className="text-xs mt-2 ">
+      <ModalUi
+        title={"Select Folder"}
+        isOpen={props.isOpenModal}
+        handleClose={handleCancel}
+      >
+        <div className="w-full min-w-[300px] md:min-w-[500px] max-w-[500px] px-3">
+          <div className="py-2 text-[#ac4848] text-[14px] font-[500]">
+            <span
+              className="cursor-pointer"
+              title="OpenSign™ Drive"
+              onClick={(e) => removeTabListItem(e)}
+            >
+              OpenSign™ Drive /{" "}
+            </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">
+            <div className="max-h-[210px] overflow-auto">
+              {!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>
+                ))}
+            </div>
+            {isAdd && (
+              <CreateFolder
+                parentFolderId={clickFolder && clickFolder.ObjectId}
+                folderCls={props.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>
+    </div>
+  );
+};
+
+export default FolderModal;

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

@@ -2,8 +2,9 @@ import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import CreateFolder from "./CreateFolder";
 import ModalUi from "../../../primitives/ModalUi";
+import Tooltip from "../../../primitives/Tooltip";
 
-const SelectFolder = ({ required, onSuccess, folderCls }) => {
+const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
   const [isOpen, SetIsOpen] = useState(false);
   const [clickFolder, setClickFolder] = useState("");
   const [selectFolder, setSelectedFolder] = useState({});
@@ -22,6 +23,21 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
     }
     // eslint-disable-next-line
   }, [isOpen]);
+  // below useEffect is used to reset folder selection if user pass isReset = true from parent component
+  useEffect(() => {
+    if (isReset == true) {
+      handleReset();
+    }
+  }, [isReset]);
+  const handleReset = () => {
+    setFolderPath({});
+    setSelectedFolder("");
+    setClickFolder("");
+    setIsAdd(false);
+    setFolderList([]);
+    setTabList([]);
+  };
+  // `fetchFolder` is used to fetch of folder list created by user on basis of folderPtr or without folderPtr
   const fetchFolder = async (folderPtr) => {
     setIsLoader(true);
     try {
@@ -47,6 +63,8 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
       setIsLoader(false);
     }
   };
+
+  // `handleSelect` is used to save pointer of folder selected by user and it's path in state
   const handleSelect = (item) => {
     setFolderList([]);
     setClickFolder({ ObjectId: item.objectId, Name: item.Name });
@@ -73,8 +91,9 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
     }
   };
 
+  // `handleSubmit` is used to pass folderPtr to parent component
   const handleSubmit = () => {
-    let url = "Root";
+    let url = "OpenSign™ Drive";
     tabList.forEach((t) => {
       url = url + " / " + t.Name;
     });
@@ -85,6 +104,8 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
     }
     SetIsOpen(false);
   };
+
+  // `handleCancel` is used to clear list of folder, close popup and folderUrl
   const handleCancel = () => {
     SetIsOpen(false);
     setClickFolder({});
@@ -92,6 +113,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
     setTabList([]);
   };
 
+  // `handleCancel` is call when user click on folder name from path/tab in popup
   const removeTabListItem = async (e, i) => {
     e.preventDefault();
     // setEditable(false);
@@ -121,9 +143,11 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
       fetchFolder(folderPtr);
     }
   };
+  // `handleCreate` is used to open folder creation form in popup
   const handleCreate = () => {
     setIsAdd(!isAdd);
   };
+  // `handleAddFolder` is call when user folder created successfully and it fetch folder list on the basis of folderPtr or without folderPtr
   const handleAddFolder = () => {
     setFolderList([]);
     if (clickFolder && clickFolder.ObjectId) {
@@ -145,7 +169,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
           {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 className="relative 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]"
@@ -156,7 +180,9 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
         <div className="font-semibold ">
           <div className="flex items-center gap-2">
             <p>
-              {selectFolder && selectFolder.Name ? selectFolder.Name : "Root"}
+              {selectFolder && selectFolder.Name
+                ? selectFolder.Name
+                : "OpenSign™ Drive"}
             </p>
             <div className="text-black text-sm" onClick={() => SetIsOpen(true)}>
               <i
@@ -170,20 +196,27 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
             {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
           </p>
         </div>
+        <div className="absolute top-1 right-1 cursor-pointer">
+          <Tooltip
+            message={
+              "If you do not select a folder, your signed document will be saved in the Main OpenSign drive folder."
+            }
+          />
+        </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="w-full min-w-[300px] md:min-w-[500px] max-w-[500px] px-3">
           <div className="py-2 text-[#ac4848] text-[14px] font-[500]">
             <span
               className="cursor-pointer"
-              title="Root"
+              title="OpenSign™ Drive"
               onClick={(e) => removeTabListItem(e)}
             >
-              Root /{" "}
+              OpenSign™ Drive /{" "}
             </span>
             {tabList &&
               tabList.map((tab, i) => (
@@ -201,23 +234,25 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
             <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 className="max-h-[210px] overflow-auto">
+              {!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>
-                </div>
-              ))}
+                ))}
+            </div>
             {isAdd && (
               <CreateFolder
                 parentFolderId={clickFolder && clickFolder.ObjectId}

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

@@ -3,6 +3,7 @@ import Select from "react-select";
 import AddSigner from "../../AddSigner";
 import Modal from "react-modal";
 import Parse from "parse";
+import Tooltip from "../../../primitives/Tooltip";
 function arrayMove(array, from, to) {
   array = array.slice();
   array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
@@ -19,7 +20,7 @@ const SignersInput = (props) => {
   Modal.setAppElement("body");
   const [state, setState] = useState(undefined);
   // const [editFormData, setEditFormData] = useState([]);
-  const [selected, setSelected] = React.useState([]);
+  const [selected, setSelected] = useState([]);
   const [isModal, setIsModel] = useState(false);
   const onChange = (selectedOptions) => setSelected(selectedOptions);
   const [modalIsOpen, setModalIsOpen] = useState(false);
@@ -63,6 +64,11 @@ const SignersInput = (props) => {
   useEffect(() => {
     GetSelectListData();
   }, []);
+  useEffect(() => {
+    if (props.isReset && props.isReset === true) {
+      setSelected([]);
+    }
+  }, [props.isReset]);
 
   useEffect(() => {
     if (selected && selected.length) {
@@ -102,6 +108,12 @@ const SignersInput = (props) => {
       <label className="block">
         Signers
         {props.required && <span className="text-red-500 text-[13px]">*</span>}
+        <span className="absolute ml-1 text-xs z-50">
+          <Tooltip
+            id={"signer-tooltip"}
+            message={"Begin typing a contact's name to see suggested signers from your saved contacts or add new ones. Arrange the signing order by adding signers in the desired sequence. Use the '+' button to include signers and the 'x' to remove them. Each signer will receive an email prompt to sign the document in the order listed."}
+          />
+        </span>
       </label>
       <div style={{ display: "flex", gap: 5 }}>
         <div style={{ flexWrap: "wrap", width: "100%" }}>

apps/OpenSign/src/components/sidebar/Menu.js

@@ -10,7 +10,7 @@ const Menu = ({ item, isOpen, closeSidebar }) => {
             ? `/${item.pageType}/${item.objectId}`
             : `/${item.objectId}`
         }
-        className="mx-auto flex items-center hover:bg-[#eef1f5] p-3 lg:p-4 cursor-pointer"
+        className="mx-auto flex items-center hover:bg-[#eef1f5] p-3 lg:p-4 cursor-pointer  focus:text-[#0056b3] focus:bg-[#eef1f5]"
         onClick={closeSidebar}
         tabIndex={isOpen ? 0 : -1}
         role="menuitem"

apps/OpenSign/src/components/sidebar/SubMenu.js

@@ -13,7 +13,7 @@ const Submenu = ({ item, closeSidebar }) => {
     <li role="none">
       <button
         onClick={toggleSubmenu}
-        className="w-full flex items-center text-left text-[#444] p-3 lg:p-4 hover:bg-[#eef1f5] focus:ring-2 focus:ring-blue-600"
+        className="w-full flex items-center text-left text-[#444] p-3 lg:p-4 hover:bg-[#eef1f5] focus:outline-none focus:text-[#0056b3] focus:bg-[#eef1f5]"
         aria-expanded={submenuOpen}
         aria-haspopup="true"
         aria-controls={`submenu-${title}`}
@@ -39,7 +39,7 @@ const Submenu = ({ item, closeSidebar }) => {
                     ? `/${childItem.pageType}/${childItem.objectId}`
                     : `/${childItem.objectId}`
                 }
-                className="block pl-6 md:pl-8 py-2 text-sm text-gray-700 hover:bg-blue-500 hover:text-white cursor-pointer"
+                className="block pl-6 md:pl-8 py-2 text-sm text-gray-700 hover:bg-blue-500 hover:text-white focus:text-[#0056b3] focus:bg-[#eef1f5] cursor-pointer"
                 onClick={closeSidebar}
                 role="menuitem"
                 tabIndex={submenuOpen ? 0 : -1}

apps/OpenSign/src/constant/Utils.js

@@ -5,10 +5,42 @@ import React from "react";
 import { rgb } from "pdf-lib";
 
 export const isMobile = window.innerWidth < 767;
+export const textInputWidget = "text input";
+export const textWidget = "text";
+export const radioButtonWidget = "radio button";
 export const openInNewTab = (url) => {
   window.open(url, "_blank", "noopener,noreferrer");
 };
 
+export const color = [
+  "#93a3db",
+  "#e6c3db",
+  "#c0e3bc",
+  "#bce3db",
+  "#b8ccdb",
+  "#ceb8db",
+  "#ffccff",
+  "#99ffcc",
+  "#cc99ff",
+  "#ffcc99",
+  "#66ccff",
+  "#ffffcc"
+];
+
+export const nameColor = [
+  "#304fbf",
+  "#7d5270",
+  "#5f825b",
+  "#578077",
+  "#576e80",
+  "#6d527d",
+  "#cc00cc",
+  "#006666",
+  "#cc00ff",
+  "#ff9900",
+  "#336699",
+  "#cc9900"
+];
 export const toDataUrl = (file) => {
   return new Promise((resolve) => {
     const reader = new FileReader();
@@ -19,10 +51,12 @@ export const toDataUrl = (file) => {
   });
 };
 
-//function for getting document details for getDrive
-export const getDrive = async (documentId) => {
+//function for getting document details for getDrive cloud function
+export const getDrive = async (documentId, skip = 0, limit = 100) => {
   const data = {
-    docId: documentId && documentId
+    docId: documentId && documentId,
+    limit: limit,
+    skip: skip
   };
   const driveDeatils = await axios
     .post(`${localStorage.getItem("baseUrl")}functions/getDrive`, data, {
@@ -162,12 +196,32 @@ export const widgets = [
     iconSize: "15px"
   },
   {
-    type: "label",
+    type: "name",
+    icon: "fa-solid fa-user",
+    iconSize: "21px"
+  },
+  {
+    type: "job title",
+    icon: "fa-solid fa-address-card",
+    iconSize: "17px"
+  },
+  {
+    type: "company",
+    icon: "fa-solid fa-building",
+    iconSize: "25px"
+  },
+  {
+    type: "date",
+    icon: "fa-solid fa-calendar-days",
+    iconSize: "20px"
+  },
+  {
+    type: textWidget,
     icon: "fa-solid fa-text-width",
     iconSize: "20px"
   },
   {
-    type: "text",
+    type: textInputWidget,
     icon: "fa-solid fa-font",
     iconSize: "21px"
   },
@@ -182,7 +236,7 @@ export const widgets = [
     iconSize: "19px"
   },
   {
-    type: "radio",
+    type: radioButtonWidget,
     icon: "fa-regular fa-circle-dot",
     iconSize: "20px"
   },
@@ -191,40 +245,19 @@ export const widgets = [
     icon: "fa-solid fa-image",
     iconSize: "20px"
   },
-  {
-    type: "date",
-    icon: "fa-solid fa-calendar-days",
-    iconSize: "20px"
-  },
-  {
-    type: "name",
-    icon: "fa-solid fa-user",
-    iconSize: "21px"
-  },
   {
     type: "email",
     icon: "fa-solid fa-envelope",
     iconSize: "20px"
-  },
-  {
-    type: "company",
-    icon: "fa-solid fa-building",
-    iconSize: "25px"
-  },
-  {
-    type: "job title",
-    icon: "fa-solid fa-address-card",
-    iconSize: "17px"
   }
 ];
 
-const getDate = () => {
+export const getDate = () => {
   const date = new Date();
   const milliseconds = date.getTime();
   const newDate = moment(milliseconds).format("MM/DD/YYYY");
   return newDate;
 };
-
 export const addWidgetOptions = (type) => {
   const defaultOpt = {
     name: "",
@@ -236,8 +269,11 @@ export const addWidgetOptions = (type) => {
     case "stamp":
       return defaultOpt;
     case "checkbox":
-      return defaultOpt;
-    case "text":
+      return {
+        ...defaultOpt,
+        options: { isReadOnly: false, isHideLabel: false }
+      };
+    case textInputWidget:
       return { ...defaultOpt, validation: { type: "text", pattern: "" } };
     case "initials":
       return defaultOpt;
@@ -248,16 +284,25 @@ export const addWidgetOptions = (type) => {
     case "job title":
       return { ...defaultOpt, validation: { type: "text", pattern: "" } };
     case "date":
-      return { ...defaultOpt, response: getDate() };
+      return {
+        ...defaultOpt,
+        response: getDate(),
+        validation: { format: "MM/dd/yyyy", type: "date-format" }
+      };
     case "image":
       return defaultOpt;
     case "email":
       return { ...defaultOpt, validation: { type: "email", pattern: "" } };
     case "dropdown":
       return defaultOpt;
-    case "radio":
-      return { ...defaultOpt, values: [] };
-    case "label":
+    case radioButtonWidget:
+      return {
+        ...defaultOpt,
+        values: [],
+        isReadOnly: false,
+        isHideLabel: false
+      };
+    case textWidget:
       return defaultOpt;
     default:
       return {};
@@ -274,26 +319,14 @@ export const getWidgetType = (item, marginLeft) => {
           marginLeft: marginLeft && `${marginLeft}px`
         }}
       >
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            marginLeft: "5px"
-          }}
-        >
-          <i
-            className="fa-sharp fa-solid fa-grip-vertical"
-            style={{ color: "#908d8d", fontSize: "13px" }}
-          ></i>
-          <span
-            style={{
-              fontWeight: "400",
-              fontSize: "15px",
-              // padding: "3px 20px 0px 20px",
-              color: "black",
-              marginLeft: "5px"
-            }}
-          >
+        <div className="flex items-center mr-1">
+          {!isMobile && (
+            <i
+              className="fa-sharp fa-solid fa-grip-vertical"
+              style={{ color: "#908d8d", fontSize: "13px", marginLeft: 4 }}
+            ></i>
+          )}
+          <span className=" font-[400] text-[15px] text-black ml-[5px]">
             {item.type}
           </span>
         </div>
@@ -323,7 +356,7 @@ export const defaultWidthHeight = (type) => {
       return { width: 150, height: 60 };
     case "checkbox":
       return { width: 15, height: 15 };
-    case "text":
+    case textInputWidget:
       return { width: 150, height: 25 };
     case "dropdown":
       return { width: 120, height: 22 };
@@ -341,9 +374,9 @@ export const defaultWidthHeight = (type) => {
       return { width: 70, height: 70 };
     case "email":
       return { width: 150, height: 20 };
-    case "radio":
+    case radioButtonWidget:
       return { width: 15, height: 30 };
-    case "label":
+    case textWidget:
       return { width: 150, height: 17 };
     default:
       return { width: 150, height: 60 };
@@ -692,13 +725,27 @@ export const onChangeInput = (
 
     const updatePosition = getXYdata.map((positionData) => {
       if (positionData.key === signKey) {
-        return {
-          ...positionData,
-          options: {
-            ...positionData.options,
-            response: value
-          }
-        };
+        if (dateFormat) {
+          return {
+            ...positionData,
+            options: {
+              ...positionData.options,
+              response: value,
+              validation: {
+                type: "date-format",
+                format: dateFormat // This indicates the required date format explicitly.
+              }
+            }
+          };
+        } else {
+          return {
+            ...positionData,
+            options: {
+              ...positionData.options,
+              response: value
+            }
+          };
+        }
       }
       return positionData;
     });
@@ -713,6 +760,82 @@ export const onChangeInput = (
   }
 };
 
+//function to increase height of text area on press enter
+export const onChangeHeightOfTextArea = (
+  height,
+  widgetType,
+  signKey,
+  xyPostion,
+  index,
+  setXyPostion,
+  userId
+) => {
+  const isSigners = xyPostion.some((data) => data.signerPtr);
+  let filterSignerPos;
+  if (isSigners) {
+    if (userId) {
+      filterSignerPos = xyPostion.filter((data) => data.Id === userId);
+    }
+    const getPlaceHolder = filterSignerPos[0]?.placeHolder;
+
+    const getPageNumer = getPlaceHolder.filter(
+      (data) => data.pageNumber === index
+    );
+    if (getPageNumer.length > 0) {
+      const getXYdata = getPageNumer[0].pos;
+      const getPosData = getXYdata;
+      const addSignPos = getPosData.map((position) => {
+        if (position.key === signKey) {
+          return {
+            ...position,
+            Height: position.Height
+              ? position.Height + height
+              : defaultWidthHeight(widgetType).height + height
+          };
+        }
+        return position;
+      });
+      const newUpdateSignPos = getPlaceHolder.map((obj) => {
+        if (obj.pageNumber === index) {
+          return { ...obj, pos: addSignPos };
+        }
+        return obj;
+      });
+
+      const newUpdateSigner = xyPostion.map((obj) => {
+        if (obj.Id === userId) {
+          return { ...obj, placeHolder: newUpdateSignPos };
+        }
+        return obj;
+      });
+
+      setXyPostion(newUpdateSigner);
+    }
+  } else {
+    let getXYdata = xyPostion[index].pos;
+
+    const updatePosition = getXYdata.map((position) => {
+      if (position.key === signKey) {
+        return {
+          ...position,
+          Height: position.Height
+            ? position.Height + height
+            : defaultWidthHeight(widgetType).height + height
+        };
+      }
+      return position;
+    });
+
+    const updatePlaceholder = xyPostion.map((obj, ind) => {
+      if (ind === index) {
+        return { ...obj, pos: updatePosition };
+      }
+      return obj;
+    });
+    setXyPostion(updatePlaceholder);
+  }
+};
+
 export const addInitialData = (signerPos, setXyPostion, value, userId) => {
   function widgetDataValue(type) {
     switch (type) {
@@ -970,7 +1093,6 @@ export const multiSignEmbed = async (
     } else {
       updateItem = item.pos;
     }
-
     const newWidth = containerWH.width;
     const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
     const pageNo = item.pageNumber;
@@ -1060,7 +1182,7 @@ export const multiSignEmbed = async (
           ? labelDefaultHeight
           : scaleHeight;
         const widgetHeight =
-          position.type === "radio"
+          position.type === radioButtonWidget
             ? 10
             : position.type === "checkbox"
               ? 10
@@ -1125,7 +1247,7 @@ export const multiSignEmbed = async (
         }
       };
       const widgetTypeExist = [
-        "text",
+        textInputWidget,
         "name",
         "company",
         "job title",
@@ -1133,13 +1255,14 @@ export const multiSignEmbed = async (
         "email"
       ].includes(position.type);
       if (position.type === "checkbox") {
-        let addYPosition, isCheck;
+        let addYPosition = 0,
+          isCheck;
 
         if (position?.options?.values.length > 0) {
           position?.options?.values.forEach((item, ind) => {
             const checkboxRandomId = "checkbox" + randomId();
             let yPosition;
-            const height = 10;
+            const height = 13;
             if (
               position?.options?.response &&
               position?.options?.response?.length > 0
@@ -1157,9 +1280,17 @@ export const multiSignEmbed = async (
               yPosition = yPos(position, ind);
               addYPosition = height + 8;
             }
+            if (!position?.options?.isHideLabel) {
+              // below line of code is used to embed label with radio button in pdf
+              page.drawText(item, {
+                x: xPos(position) + 17,
+                y: yPosition + 2,
+                size: height
+              });
+            }
             checkbox.addToPage(page, {
               x: xPos(position),
-              y: yPosition,
+              y: yPosition - 3,
               width: height,
               height: height
             });
@@ -1171,7 +1302,7 @@ export const multiSignEmbed = async (
             checkbox.enableReadOnly();
           });
         }
-      } else if (position.type === "label") {
+      } else if (position.type === textWidget) {
         const font = await pdfDoc.embedFont("Helvetica");
         const fontSize = 12;
         let textContent;
@@ -1180,19 +1311,21 @@ export const multiSignEmbed = async (
         } else if (position?.options?.defaultValue) {
           textContent = position?.options?.defaultValue;
         }
-
         const fixedWidth = scaleWidth; // Set your fixed width
+        const isNewOnEnterLineExist = textContent.includes("\n");
+
         // Function to break text into lines based on the fixed width
-        const breakTextIntoLines = (textContent, width) => {
+        const NewbreakTextIntoLines = (textContent, width) => {
           const lines = [];
           let currentLine = "";
 
           for (const word of textContent.split(" ")) {
+            //get text line width
             const lineWidth = font.widthOfTextAtSize(
               `${currentLine} ${word}`,
               fontSize
             );
-
+            //check text content line width is less or equal to container width
             if (lineWidth <= width) {
               currentLine += ` ${word}`;
             } else {
@@ -1203,7 +1336,33 @@ export const multiSignEmbed = async (
           lines.push(currentLine.trim());
           return lines;
         };
-        const lines = breakTextIntoLines(textContent, fixedWidth);
+
+        // Function to break text into lines based on when user go next line on press enter button
+        const breakTextIntoLines = (textContent, width) => {
+          const lines = [];
+
+          for (const word of textContent.split("\n")) {
+            const lineWidth = font.widthOfTextAtSize(`${word}`, fontSize);
+            //checking string length to container width
+            //if string length is less then container width it means user press enter button
+            if (lineWidth <= width) {
+              lines.push(word);
+            }
+            //else adjust text content according to width and send it in new line
+            else {
+              const newLine = NewbreakTextIntoLines(word, width);
+              lines.push(...newLine);
+            }
+          }
+
+          return lines;
+        };
+
+        //check if text content have `\n` string it means user press enter to go next line and handle condition
+        //else auto adjust text content according to container width
+        const lines = isNewOnEnterLineExist
+          ? breakTextIntoLines(textContent, fixedWidth)
+          : NewbreakTextIntoLines(textContent, fixedWidth);
         // Set initial y-coordinate for the first line
         const labelDefaultHeight = defaultWidthHeight(position.type).height;
 
@@ -1251,10 +1410,11 @@ export const multiSignEmbed = async (
           x: xPos(position),
           y: yPos(position),
           width: scaleWidth,
-          height: scaleHeight
+          height: scaleHeight,
+          borderWidth: 0
         });
         dropdown.enableReadOnly();
-      } else if (position.type === "radio") {
+      } else if (position.type === radioButtonWidget) {
         const radioRandomId = "radio" + randomId();
         const radioGroup = form.createRadioGroup(radioRandomId);
         let addYPosition = 18;
@@ -1268,6 +1428,14 @@ export const multiSignEmbed = async (
             yPosition = yPos(position);
           }
 
+          if (!position?.options?.isHideLabel) {
+            // below line of code is used to embed label with radio button in pdf
+            page.drawText(data, {
+              x: xPos(position) + 15,
+              y: yPosition + 2,
+              size: 11
+            });
+          }
           radioGroup.addOptionToPage(data, page, {
             x: xPos(position),
             y: yPosition,
@@ -1295,9 +1463,7 @@ export const multiSignEmbed = async (
       }
     });
   }
-
   const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
-
   return pdfBytes;
 };
 
@@ -1537,3 +1703,66 @@ export const getYear = (date) => {
   const newYear = new Date(date).getFullYear();
   return newYear;
 };
+
+//function to create/copy widget next to already dropped widget
+export const handleCopyNextToWidget = (
+  position,
+  widgetType,
+  xyPostion,
+  index,
+  setXyPostion,
+  userId
+) => {
+  const isSigners = xyPostion.some((data) => data.signerPtr);
+  let filterSignerPos;
+  //get position of previous widget and create new widget next to that widget on same data except
+  // xPosition and key
+  let newpos = position;
+  const calculateXPosition =
+    parseInt(position.xPosition) +
+    defaultWidthHeight(widgetType).width +
+    resizeBorderExtraWidth();
+  const newId = randomId();
+  newpos = { ...newpos, xPosition: calculateXPosition, key: newId };
+  //if condition to create widget in request-sign flow
+  if (isSigners) {
+    if (userId) {
+      filterSignerPos = xyPostion.filter((data) => data.Id === userId);
+    }
+    const getPlaceHolder = filterSignerPos[0]?.placeHolder;
+    const getPageNumer = getPlaceHolder.filter(
+      (data) => data.pageNumber === index
+    );
+    const getXYdata = getPageNumer[0].pos;
+    getXYdata.push(newpos);
+    if (getPageNumer.length > 0) {
+      const newUpdateSignPos = getPlaceHolder.map((obj) => {
+        if (obj.pageNumber === index) {
+          return { ...obj, pos: getXYdata };
+        }
+        return obj;
+      });
+
+      const newUpdateSigner = xyPostion.map((obj) => {
+        if (obj.Id === userId) {
+          return { ...obj, placeHolder: newUpdateSignPos };
+        }
+        return obj;
+      });
+
+      setXyPostion(newUpdateSigner);
+    }
+  } else {
+    // else condition to create widget in sign-yourself flow
+    let getXYdata = xyPostion[index].pos;
+    getXYdata.push(newpos);
+    const updatePlaceholder = xyPostion.map((obj, ind) => {
+      if (ind === index) {
+        return { ...obj, pos: getXYdata };
+      }
+      return obj;
+    });
+
+    setXyPostion(updatePlaceholder);
+  }
+};

apps/OpenSign/src/json/ReportJson.js

@@ -18,7 +18,8 @@ export default function reportJson(id) {
             btnIcon: "fa fa-plus",
             redirectUrl: "draftDocument"
           }
-        ]
+        ],
+        helpMsg: "This are documents you have started but have not finalized for sending."
       };
     // Need your sign report
     case "4Hhwbp482K":
@@ -33,7 +34,9 @@ export default function reportJson(id) {
             btnIcon: "fa fa-eye",
             redirectUrl: "pdfRequestFiles"
           }
-        ]
+        ],
+        helpMsg:
+          "This is a list of documents that are waiting for your signature"
       };
     // In progess report
     case "1MwEuxLEkF":
@@ -48,7 +51,9 @@ export default function reportJson(id) {
             btnIcon: "fa fa-eye",
             redirectUrl: "pdfRequestFiles"
           }
-        ]
+        ],
+        helpMsg:
+          "This is a list of documents you've sent to other parties for signature."
       };
     // completed documents report
     case "kQUoW4hUXz":
@@ -63,7 +68,8 @@ export default function reportJson(id) {
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument"
           }
-        ]
+        ],
+        helpMsg: "This is a list of documents that have been signed by all parties."
       };
     //  declined documents report
     case "UPr2Fm5WY3":
@@ -78,7 +84,8 @@ export default function reportJson(id) {
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument"
           }
-        ]
+        ],
+        helpMsg: "This is a list of documents that have been declined by one of the signers."
       };
     //  Expired Documents report
     case "zNqBHXHsYH":
@@ -93,7 +100,8 @@ export default function reportJson(id) {
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument"
           }
-        ]
+        ],
+        helpMsg: "This is a list of documents that have reached their expiration date."
       };
     //  Recently sent for signatures report show on dashboard
     case "d9k3UfYHBc":
@@ -153,7 +161,8 @@ export default function reportJson(id) {
             btnIcon: "fa-solid fa-trash"
           }
         ],
-        form: "ContactBook"
+        form: "ContactBook",
+        helpMsg: "This is a list of contacts/signers added by you. These will appear as suggestions when you try to add signers to a new document."
       };
     // template report
     case "6TeaPr321t":
@@ -175,7 +184,9 @@ export default function reportJson(id) {
             btnIcon: "fa fa-plus",
             redirectUrl: "template"
           }
-        ]
+        ],
+        helpMsg:
+          "This is a list of templates that are available to you for creating documents. You can click the 'use' button to create a new document using a template, modify the document & add signers in the next step."
       };
     default:
       return null;

apps/OpenSign/src/layout/HomeLayout.js

@@ -94,10 +94,16 @@ const HomeLayout = () => {
           position: "top"
           // style: { backgroundColor: "#abd4d2" },
         },
+        {
+          selector: '[data-tut="tourbutton"]',
+          content: `To upload documents for self-signing or to request others’ signatures, simply select the respective buttons.`,
+          position: "top"
+          // style: { backgroundColor: "#abd4d2" },
+        },
         ...resArr,
         {
           selector: '[data-tut="reactourLast"]',
-          content: `You are good to go`,
+          content: `You are ready to start using OpenSign! If you need support feel free to contact us.`,
           position: "top"
           // style: { backgroundColor: "#abd4d2" },
         }
@@ -218,7 +224,10 @@ const HomeLayout = () => {
               <div className="flex md:flex-row flex-col z-50">
                 <Sidebar isOpen={isOpen} closeSidebar={closeSidebar} />
 
-                <div className="relative h-screen flex flex-col justify-between w-full overflow-y-auto">
+                <div
+                  id="renderList"
+                  className="relative h-screen flex flex-col justify-between w-full overflow-y-auto"
+                >
                   <div className="bg-[#eef1f5] p-3">{<Outlet />}</div>
                   <div className="z-30">
                     <Footer />

apps/OpenSign/src/pages/Dashboard.js

@@ -4,10 +4,11 @@ import "../styles/loader.css";
 import GetDashboard from "../components/dashboard/GetDashboard";
 import { useNavigate, useParams } from "react-router-dom";
 import Title from "../components/Title";
-import { save_tourSteps } from "../redux/actions";
-import { connect } from "react-redux";
-const Dashboard = (props) => {
+import { useDispatch } from "react-redux";
+import { saveTourSteps } from "../redux/reducers/TourStepsReducer";
+const Dashboard = () => {
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const { id } = useParams();
   const [dashboard, setdashboard] = useState([]);
   const [classnameArray, setclassnameArray] = useState([]);
@@ -88,7 +89,7 @@ const Dashboard = (props) => {
             // style: { backgroundColor: "#abd4d2" },
           };
         });
-      props.save_tourSteps(arr);
+      dispatch(saveTourSteps(arr));
       // console.log("arr ", arr);
       setclassnameArray(classArray);
       if (localStorage.getItem("DashboardDefaultFilter")) {
@@ -133,6 +134,4 @@ const Dashboard = (props) => {
   );
 };
 
-export default connect(null, {
-  save_tourSteps
-})(Dashboard);
+export default Dashboard;

apps/OpenSign/src/pages/ForgetPassword.js

@@ -1,12 +1,15 @@
 import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
-import { fetchAppInfo, forgetPassword } from "../redux/actions";
 import Title from "../components/Title";
 import { NavLink } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import Parse from "parse";
 import Alert from "../primitives/Alert";
-function ForgotPassword(props) {
+import { appInfo } from "../constant/appinfo";
+import { useDispatch } from "react-redux";
+import { fetchAppInfo } from "../redux/reducers/infoReducer";
+
+function ForgotPassword() {
+  const dispatch = useDispatch();
   const [state, setState] = useState({
     email: "",
     password: "",
@@ -27,14 +30,11 @@ function ForgotPassword(props) {
 
   const handleSubmit = async (event) => {
     event.preventDefault();
-    localStorage.setItem("appLogo", props.appInfo.applogo);
-    localStorage.setItem("appName", props.appInfo.appname);
-    localStorage.setItem("defaultmenuid", props.appInfo.defaultmenuid);
-    localStorage.setItem("PageLanding", props.appInfo.LandingPageId);
-    localStorage.setItem(
-      "userSettings",
-      JSON.stringify(props.appInfo.settings)
-    );
+    localStorage.setItem("appLogo", appInfo.applogo);
+    localStorage.setItem("appName", appInfo.appname);
+    // localStorage.setItem("defaultmenuid", props.appInfo.defaultmenuid);
+    // localStorage.setItem("PageLanding", props.appInfo.LandingPageId);
+    localStorage.setItem("userSettings", JSON.stringify(appInfo.settings));
     if (state.email) {
       const username = state.email;
       try {
@@ -50,14 +50,14 @@ function ForgotPassword(props) {
   };
 
   useEffect(() => {
-    props.fetchAppInfo();
+    dispatch(fetchAppInfo());
     resize();
     window.addEventListener("resize", resize);
     return () => window.removeEventListener("resize", resize);
     // eslint-disable-next-line
   }, []);
 
-  let image = props.appInfo.applogo;
+  let image = appInfo.applogo;
   return (
     <div className="bg-white">
       <Title title="Forgot password page" />
@@ -129,10 +129,4 @@ function ForgotPassword(props) {
   );
 }
 
-const mapStateToProps = (state) => {
-  return { appInfo: state.appInfo, forgotPassword: state.forgotPassword };
-};
-
-export default connect(mapStateToProps, { fetchAppInfo, forgetPassword })(
-  ForgotPassword
-);
+export default ForgotPassword;

apps/OpenSign/src/pages/Form.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { formJson } from "../json/FormJson";
 import AddUser from "../components/AddUser";
@@ -11,6 +11,7 @@ import SignersInput from "../components/shared/fields/SignersInput";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
 
+// `Form` render all type of Form on this basis of their provided in path
 function Form() {
   const { id } = useParams();
 
@@ -27,42 +28,47 @@ function Form() {
 }
 
 const Forms = (props) => {
+  const maxFileSize = 20;
   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",
+    Note: "",
     TimeToCompleteDays: 15,
     SendinOrder: "false"
   });
   const [fileupload, setFileUpload] = useState([]);
   const [fileload, setfileload] = useState(false);
   const [percentage, setpercentage] = useState(0);
+  const [isReset, setIsReset] = useState(false);
   const [isAlert, setIsAlert] = useState(false);
   const [isSubmit, setIsSubmit] = useState(false);
   const [isErr, setIsErr] = useState("");
   const handleStrInput = (e) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
-
+  useEffect(() => {
+    handleReset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.title]);
   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) {
+        const mb = Math.round(files[0].size / Math.pow(1024, 2));
+        if (mb > maxFileSize) {
           alert(
-            `The selected file size is too large. Please select a file less than ${Math.round(
-              10
-            )} MB`
+            `The selected file size is too large. Please select a file less than ${maxFileSize} MB`
           );
+          setFileUpload([]);
+          e.target.value = "";
           return;
+        } else {
+          handleFileUpload(files[0]);
         }
-
-        handleFileUpload(files[0]);
       } else {
         alert("Please select file.");
         return false;
@@ -110,10 +116,10 @@ const Forms = (props) => {
     const url = file.link;
     const mb = Math.round(file.bytes / Math.pow(1024, 2));
 
-    if (mb > 10) {
+    if (mb > maxFileSize) {
       setTimeout(() => {
         alert(
-          `The selected file size is too large. Please select a file less than 10 MB`
+          `The selected file size is too large. Please select a file less than ${maxFileSize} MB`
         );
       }, 500);
       return;
@@ -160,7 +166,9 @@ const Forms = (props) => {
           "TimeToCompleteDays",
           parseInt(formData?.TimeToCompleteDays)
         );
-        const isChecked = formData.SendinOrder === "true" ? true : false;
+      }
+      if (props.title !== "Sign Yourself") {
+        const isChecked = formData.SendinOrder === "false" ? false : true;
         object.set("SendinOrder", isChecked);
       }
       object.set("URL", fileupload);
@@ -222,15 +230,22 @@ const Forms = (props) => {
   };
 
   const handleReset = () => {
+    setIsReset(true);
     setSigners([]);
     setFolder({ ObjectId: "", Name: "" });
     setFormData({
       Name: "",
       Description: "",
-      Note: ""
+      Note:
+        props.title === "Sign Yourself"
+          ? "Note to myself"
+          : "Please review and sign this document",
+      TimeToCompleteDays: 15,
+      SendinOrder: "true"
     });
     setFileUpload([]);
     setpercentage(0);
+    setTimeout(() => setIsReset(false), 50);
   };
   return (
     <div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
@@ -315,7 +330,10 @@ const Forms = (props) => {
           </div>
           <div className="text-xs mt-2">
             <label className="block">
-              Title<span className="text-red-500 text-[13px]">*</span>
+              {props.title === "New Template"
+                ? "Template Title"
+                : "Document Title"}
+              <span className="text-red-500 text-[13px]">*</span>
             </label>
             <input
               name="Name"
@@ -334,7 +352,9 @@ const Forms = (props) => {
               onChange={(e) => handleStrInput(e)}
             />
           </div>
-          {props.signers && <SignersInput onChange={handleSigners} required />}
+          {props.signers && (
+            <SignersInput onChange={handleSigners} isReset={isReset} required />
+          )}
           <div className="text-xs mt-2">
             <label className="block">
               Note<span className="text-red-500 text-[13px]">*</span>
@@ -347,7 +367,11 @@ const Forms = (props) => {
               required
             />
           </div>
-          <SelectFolder onSuccess={handleFolder} folderCls={props.Cls} />
+          <SelectFolder
+            onSuccess={handleFolder}
+            folderCls={props.Cls}
+            isReset={isReset}
+          />
 
           {props.title === "Request Signatures" && (
             <div className="text-xs mt-2">
@@ -399,10 +423,10 @@ const Forms = (props) => {
               type="submit"
               disabled={isSubmit}
             >
-              Submit
+              Next
             </button>
             <div
-              className="bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
+              className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
               onClick={() => handleReset()}
             >
               Reset

apps/OpenSign/src/pages/GenerateToken.js

@@ -5,6 +5,8 @@ import Alert from "../primitives/Alert";
 import ModalUi from "../primitives/ModalUi";
 import { rejectBtn, submitBtn } from "../constant/const";
 import { openInNewTab } from "../constant/Utils";
+import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
+import Tooltip from "../primitives/Tooltip";
 
 function GenerateToken() {
   const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
@@ -115,7 +117,13 @@ function GenerateToken() {
         </div>
       ) : (
         <div className="bg-white flex flex-col justify-center shadow rounded">
-          <h1 className="ml-4 mt-3 mb-2 font-semibold">API Token</h1>
+          <PremiumAlertHeader />
+          <h1 className="ml-4 mt-3 mb-2 font-semibold">
+            API Token{" "}
+            <Tooltip
+              url={"https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"}
+            />
+          </h1>
           <ul className="w-full flex flex-col p-2 text-sm">
             <li
               className={`flex justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}

apps/OpenSign/src/pages/GuestLogin.js

@@ -4,6 +4,7 @@ import "../styles/loginPage.css";
 import loader from "../assets/images/loader2.gif";
 import axios from "axios";
 import { themeColor } from "../constant/const";
+import { contractUsers } from "../constant/Utils";
 
 function GuestLogin() {
   const { id, userMail, contactBookId, serverUrl } = useParams();
@@ -103,11 +104,19 @@ function GuestLogin() {
         } else {
           let _user = user.data.result;
           const parseId = localStorage.getItem("parseAppId");
+          const contractUserDetails = await contractUsers(_user.email);
           localStorage.setItem("UserInformation", JSON.stringify(_user));
           localStorage.setItem(
             `Parse/${parseId}/currentUser`,
             JSON.stringify(_user)
           );
+          if (contractUserDetails) {
+            localStorage.setItem(
+              "Extand_Class",
+              JSON.stringify(contractUserDetails)
+            );
+          }
+
           localStorage.setItem("username", _user.name);
           localStorage.setItem("accesstoken", _user.sessionToken);
           //save isGuestSigner true in local to handle login flow header in mobile view

apps/OpenSign/src/pages/Login.js

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import "../styles/loader.css";
-import { connect } from "react-redux";
-import { fetchAppInfo, showTenantName } from "../redux/actions";
+import { useDispatch } from "react-redux";
 import axios from "axios";
 import Title from "../components/Title";
 import GoogleSignInBtn from "../components/LoginGoogle";
@@ -13,10 +12,13 @@ import { useWindowSize } from "../hook/useWindowSize";
 import ModalUi from "../primitives/ModalUi";
 import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
 import Alert from "../primitives/Alert";
-
-function Login(props) {
+import { appInfo } from "../constant/appinfo";
+import { fetchAppInfo } from "../redux/reducers/infoReducer";
+import { showTenant } from "../redux/reducers/ShowTenant";
+function Login() {
   const navigate = useNavigate();
   const location = useLocation();
+  const dispatch = useDispatch();
   const { width } = useWindowSize();
   const [state, setState] = useState({
     email: "",
@@ -37,14 +39,14 @@ function Login(props) {
     Destination: ""
   });
   const [isModal, setIsModal] = useState(false);
-  const image = props?.appInfo?.applogo || undefined;
+  const image = appInfo?.applogo || undefined;
 
   useEffect(() => {
     if (localStorage.getItem("accesstoken")) {
       setState({ ...state, loading: true });
       GetLoginData();
     }
-    props.fetchAppInfo();
+    dispatch(fetchAppInfo());
     // eslint-disable-next-line
   }, []);
   const handleChange = (event) => {
@@ -61,8 +63,8 @@ function Login(props) {
         setState({ ...state, loading: true });
         let baseUrl = localStorage.getItem("baseUrl");
         let parseAppId = localStorage.getItem("parseAppId");
-        localStorage.setItem("appLogo", props.appInfo.applogo);
-        localStorage.setItem("appName", props.appInfo.appname);
+        localStorage.setItem("appLogo", appInfo.applogo);
+        localStorage.setItem("appName", appInfo.appname);
         // Pass the username and password to logIn function
         await Parse.User.logIn(email, password)
           .then(async (user) => {
@@ -81,8 +83,8 @@ function Login(props) {
               // Check extended class user role and tenentId
               try {
                 let userRoles = [];
-                if (props.appInfo.settings) {
-                  let userSettings = props.appInfo.settings;
+                if (appInfo.settings) {
+                  let userSettings = appInfo.settings;
 
                   //Get Current user roles
                   let url = `${baseUrl}functions/UserGroups`;
@@ -172,8 +174,10 @@ function Login(props) {
                                         }
                                       });
                                       if (tenentInfo.length) {
-                                        props.showTenantName(
-                                          tenentInfo[0].tenentName || ""
+                                        dispatch(
+                                          showTenant(
+                                            tenentInfo[0].tenentName || ""
+                                          )
                                         );
                                         localStorage.setItem(
                                           "TenantName",
@@ -212,8 +216,10 @@ function Login(props) {
                                         }
                                       });
                                       if (tenentInfo.length) {
-                                        props.showTenantName(
-                                          tenentInfo[0].tenentName || ""
+                                        dispatch(
+                                          showTenant(
+                                            tenentInfo[0].tenentName || ""
+                                          )
                                         );
                                         localStorage.setItem(
                                           "TenantName",
@@ -412,8 +418,8 @@ function Login(props) {
       // Check extended class user role and tenentId
       try {
         let userRoles = [];
-        if (props.appInfo.settings) {
-          let userSettings = props.appInfo.settings;
+        if (appInfo.settings) {
+          let userSettings = appInfo.settings;
 
           //Get Current user roles
           let url = `${baseUrl}functions/UserGroups`;
@@ -503,8 +509,8 @@ function Login(props) {
                                 }
                               });
                               if (tenentInfo.length) {
-                                props.showTenantName(
-                                  tenentInfo[0].tenentName || ""
+                                dispatch(
+                                  showTenant(tenentInfo[0].tenentName || "")
                                 );
                                 localStorage.setItem(
                                   "TenantName",
@@ -543,8 +549,8 @@ function Login(props) {
                                 }
                               });
                               if (tenentInfo.length) {
-                                props.showTenantName(
-                                  tenentInfo[0].tenentName || ""
+                                dispatch(
+                                  showTenant(tenentInfo[0].tenentName || "")
                                 );
                                 localStorage.setItem(
                                   "TenantName",
@@ -730,94 +736,90 @@ function Login(props) {
               } else {
                 _currentRole = userRoles[0];
               }
-              let SettingsUser = JSON.parse(userSettings);
-              SettingsUser.forEach(async (element) => {
-                if (element.role === _currentRole) {
-                  let _role = _currentRole.replace(
-                    `${localStorage.getItem("_appName")}_`,
-                    ""
-                  );
-                  localStorage.setItem("_user_role", _role);
-
-                  // Get TenentID from Extendend Class
-                  localStorage.setItem(
-                    "extended_class",
-                    element.extended_class
-                  );
-
-                  const currentUser = Parse.User.current();
-                  await Parse.Cloud.run("getUserDetails", {
-                    email: currentUser.get("email")
-                  }).then(
-                    (result) => {
-                      let tenentInfo = [];
-                      const results = [result];
-                      if (results) {
-                        let extendedInfo_stringify = JSON.stringify(results);
-                        let extendedInfo = JSON.parse(extendedInfo_stringify);
-                        if (extendedInfo.length > 1) {
-                          extendedInfo.forEach((x) => {
-                            if (x.TenantId) {
-                              let obj = {
-                                tenentId: x.TenantId.objectId,
-                                tenentName: x.TenantId.TenantName || ""
-                              };
-                              tenentInfo.push(obj);
-                            }
-                          });
-
-                          localStorage.setItem("showpopup", true);
-                          localStorage.setItem("PageLanding", element.pageId);
-                          localStorage.setItem("defaultmenuid", element.menuId);
-                          localStorage.setItem("pageType", element.pageType);
-                          navigate("/");
+              if (_currentRole && _currentRole !== "contracts_Guest") {
+                let SettingsUser = JSON.parse(userSettings);
+                SettingsUser.forEach(async (item) => {
+                  if (item.role === _currentRole) {
+                    let _role = _currentRole.replace(`${appInfo.appname}_`, "");
+                    localStorage.setItem("_user_role", _role);
+                    // Get TenentID from Extendend Class
+                    localStorage.setItem("extended_class", item.extended_class);
+                    const currentUser = Parse.User.current();
+                    await Parse.Cloud.run("getUserDetails", {
+                      email: currentUser.get("email")
+                    }).then(
+                      (result) => {
+                        let tenentInfo = [];
+                        const results = [result];
+                        if (results) {
+                          let extendedInfo_stringify = JSON.stringify(results);
+                          let extendedInfo = JSON.parse(extendedInfo_stringify);
+                          if (extendedInfo.length > 1) {
+                            extendedInfo.forEach((x) => {
+                              if (x.TenantId) {
+                                let obj = {
+                                  tenentId: x.TenantId.objectId,
+                                  tenentName: x.TenantId.TenantName || ""
+                                };
+                                tenentInfo.push(obj);
+                              }
+                            });
+                            localStorage.setItem("showpopup", true);
+                            localStorage.setItem("PageLanding", item.pageId);
+                            localStorage.setItem("defaultmenuid", item.menuId);
+                            localStorage.setItem("pageType", item.pageType);
+                            navigate("/");
+                          } else {
+                            extendedInfo.forEach((x) => {
+                              if (x.TenantId) {
+                                let obj = {
+                                  tenentId: x.TenantId.objectId,
+                                  tenentName: x.TenantId.TenantName || ""
+                                };
+                                localStorage.setItem(
+                                  "TenetId",
+                                  x.TenantId.objectId
+                                );
+                                tenentInfo.push(obj);
+                              }
+                            });
+                            localStorage.setItem("PageLanding", item.pageId);
+                            localStorage.setItem("defaultmenuid", item.menuId);
+                            localStorage.setItem("pageType", item.pageType);
+                            navigate(`/${item.pageType}/${item.pageId}`);
+                          }
                         } else {
-                          extendedInfo.forEach((x) => {
-                            if (x.TenantId) {
-                              let obj = {
-                                tenentId: x.TenantId.objectId,
-                                tenentName: x.TenantId.TenantName || ""
-                              };
-                              localStorage.setItem(
-                                "TenetId",
-                                x.TenantId.objectId
-                              );
-                              tenentInfo.push(obj);
-                            }
-                          });
-                          localStorage.setItem("PageLanding", element.pageId);
-                          localStorage.setItem("defaultmenuid", element.menuId);
-                          localStorage.setItem("pageType", element.pageType);
-                          navigate(`/${element.pageType}/${element.pageId}`);
+                          localStorage.setItem("PageLanding", item.pageId);
+                          localStorage.setItem("defaultmenuid", item.menuId);
+                          localStorage.setItem("pageType", item.pageType);
+                          navigate(`/${item.pageType}/${item.pageId}`);
                         }
-                      } else {
-                        localStorage.setItem("PageLanding", element.pageId);
-                        localStorage.setItem("defaultmenuid", element.menuId);
-                        localStorage.setItem("pageType", element.pageType);
-                        navigate(`/${element.pageType}/${element.pageId}`);
-                      }
-                    },
-                    (error) => {
-                      setState({
-                        ...state,
-                        loading: false,
-                        alertType: "danger",
-                        alertMsg: "You don`t have access to this application!"
-                      });
-                      setTimeout(function () {
+                      },
+                      (error) => {
                         setState({
                           ...state,
                           loading: false,
                           alertType: "danger",
-                          alertMsg: ""
+                          alertMsg: "You don`t have access to this application!"
                         });
-                      }, 2000);
-                      localStorage.setItem("accesstoken", null);
-                      console.error("Error while fetching Follow", error);
-                    }
-                  );
-                }
-              });
+                        setTimeout(function () {
+                          setState({
+                            ...state,
+                            loading: false,
+                            alertType: "danger",
+                            alertMsg: ""
+                          });
+                        }, 2000);
+                        localStorage.setItem("accesstoken", null);
+                        console.error("Error while fetching Follow", error);
+                      }
+                    );
+                  }
+                });
+              } else {
+                setState({ ...state, loading: false });
+                handleCloseModal();
+              }
             } else {
               console.log("User Role Not Found.");
             }
@@ -943,7 +945,7 @@ function Login(props) {
           </div>
         </div>
       )}
-      {props.isloginVisible && props.isloginVisible ? (
+      {appInfo && appInfo.appId ? (
         <>
           <div aria-labelledby="loginHeading" role="region">
             <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-4 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
@@ -1051,7 +1053,7 @@ function Login(props) {
                       </div>
                     </form>
                     <br />
-                    {(props.appInfo.fbAppId || props.appInfo.googleClietId) && (
+                    {(appInfo.fbAppId || appInfo.googleClietId) && (
                       <div
                         style={{
                           display: "flex",
@@ -1082,9 +1084,9 @@ function Login(props) {
                         justifyContent: "center"
                       }}
                     >
-                      {/* {props.appInfo.fbAppId && props.appInfo.fbAppId !== "" ? (
+                      {/* {appInfo.fbAppId && appInfo.fbAppId !== "" ? (
                       <LoginFacebook
-                        FBCred={props.appInfo.fbAppId}
+                        FBCred={appInfo.fbAppId}
                         thirdpartyLoginfn={thirdpartyLoginfn}
                         thirdpartyLoader={state.thirdpartyLoader}
                         setThirdpartyLoader={setThirdpartyLoader}
@@ -1100,10 +1102,9 @@ function Login(props) {
                         justifyContent: "center"
                       }}
                     >
-                      {props.appInfo.googleClietId &&
-                      props.appInfo.googleClietId !== "" ? (
+                      {appInfo.googleClietId && appInfo.googleClietId !== "" ? (
                         <GoogleSignInBtn
-                          GoogleCred={props.appInfo.googleClietId}
+                          GoogleCred={appInfo.googleClietId}
                           thirdpartyLoginfn={thirdpartyLoginfn}
                           thirdpartyLoader={state.thirdpartyLoader}
                           setThirdpartyLoader={setThirdpartyLoader}
@@ -1213,16 +1214,4 @@ function Login(props) {
     </div>
   );
 }
-
-const mapStateToProps = (state) => {
-  if (Object.keys(state.appInfo).length !== 0) {
-    return { appInfo: state.appInfo, isloginVisible: true };
-  } else {
-    return { appInfo: state.appInfo, isloginVisible: false };
-  }
-};
-
-export default connect(mapStateToProps, {
-  fetchAppInfo,
-  showTenantName
-})(Login);
+export default Login;

apps/OpenSign/src/pages/Managesign.js

@@ -13,7 +13,6 @@ const ManageSign = () => {
   const [signName, setSignName] = useState("");
   const [signature, setSignature] = useState("");
   const [warning, setWarning] = useState(false);
-  const [nameWarning, setNameWarning] = useState(false);
   const [isvalue, setIsValue] = useState(false);
   const allColor = ["blue", "red", "black"];
   const [isLoader, setIsLoader] = useState(true);
@@ -105,9 +104,7 @@ const ManageSign = () => {
     e.preventDefault();
     const isUrl = image.includes("https");
 
-    if (!signName) {
-      setNameWarning(true);
-    } else if (!isvalue) {
+    if (!isvalue) {
       setWarning(true);
       setTimeout(() => setWarning(false), 1000);
     } else {
@@ -222,26 +219,13 @@ const ManageSign = () => {
     setIsValue(true);
   };
   return (
-    <div
-      style={{
-        backgroundColor: "white",
-        maxHeight: "500px",
-        overflow: "auto"
-      }}
-    >
+    <div className="relative h-full bg-white flex shadow rounded overflow-auto">
       {isLoader && (
-        <div className="absolute bg-black bg-opacity-75 inset-0 z-50 flex justify-center items-center">
-          <div style={{ height: "300px" }}>
-            <div
-              style={{
-                marginLeft: "45%",
-                marginTop: "150px",
-                fontSize: "45px",
-                color: "#3dd3e0"
-              }}
-              className="loader-37"
-            ></div>
-          </div>
+        <div className="absolute bg-black bg-opacity-75 z-50 w-full h-full flex justify-center items-center">
+          <div
+            style={{ color: "#3dd3e0" }}
+            className="loader-37 text-[45px]"
+          ></div>
         </div>
       )}
       {isSuccess && (
@@ -269,61 +253,9 @@ const ManageSign = () => {
               paddingBottom: 8
             }}
           >
-            Manage Signature
+            My Signature
           </div>
-          <div style={{ display: "flex", flexDirection: "column" }}>
-            <label
-              htmlFor="signName"
-              style={{
-                fontSize: 12,
-                position: "relative",
-                paddingBottom: 5
-              }}
-            >
-              Signer&apos;s Name
-              {nameWarning && (
-                <div
-                  className="warning nameWarning"
-                  style={{ fontSize: 12 }}
-                  onAnimationEnd={() => setNameWarning(false)}
-                >
-                  <i
-                    className="fas fa-exclamation-circle"
-                    style={{ color: "#fab005", fontSize: 15 }}
-                  ></i>{" "}
-                  Please fill input field
-                </div>
-              )}
-            </label>
-            <input
-              id="signName"
-              className="signInputManage"
-              value={signName}
-              style={{
-                border: "1px solid #ccc",
-                borderRadius: 4,
-
-                height: 35,
-                padding: "6px 12px",
-                marginBottom: 10,
-                fontSize: 12
-              }}
-              required
-              onFocus={() => setNameWarning(false)}
-              onChange={(e) => setSignName(e.target.value)}
-            />
-
-            <label
-              htmlFor="imgoverview"
-              style={{
-                fontSize: 12,
-                paddingBottom: 5
-              }}
-            >
-              Signature/Image
-            </label>
-          </div>
-          <div className="signBlock">
+          <div className="signBlock mt-4">
             <div>
               <div style={{ position: "relative" }}>
                 <div
@@ -429,10 +361,10 @@ const ManageSign = () => {
                                       key === 0 && penColor === "blue"
                                         ? "2px solid blue"
                                         : key === 1 && penColor === "red"
-                                          ? "2px solid red"
-                                          : key === 2 && penColor === "black"
-                                            ? "2px solid black"
-                                            : "2px solid white"
+                                        ? "2px solid red"
+                                        : key === 2 && penColor === "black"
+                                        ? "2px solid black"
+                                        : "2px solid white"
                                   }}
                                   onClick={() => {
                                     if (key === 0) {
@@ -537,10 +469,10 @@ const ManageSign = () => {
                                   key === 0 && initialPen === "blue"
                                     ? "2px solid blue"
                                     : key === 1 && initialPen === "red"
-                                      ? "2px solid red"
-                                      : key === 2 && initialPen === "black"
-                                        ? "2px solid black"
-                                        : "2px solid white"
+                                    ? "2px solid red"
+                                    : key === 2 && initialPen === "black"
+                                    ? "2px solid black"
+                                    : "2px solid white"
                               }}
                               onClick={() => {
                                 if (key === 0) {

apps/OpenSign/src/pages/Opensigndrive.js

@@ -1,14 +1,35 @@
 import React, { useEffect, useState, useRef } from "react";
 import "../styles/opensigndrive.css";
 import loader from "../assets/images/loader2.gif";
-import DriveBody from "../components/opensigndrive/DriveBody";
 import { themeColor, iconColor } from "../constant/const";
 import { getDrive } from "../constant/Utils";
 import { useNavigate } from "react-router-dom";
 import Title from "../components/Title";
 import Parse from "parse";
 import ModalUi from "../primitives/ModalUi";
-
+const DriveBody = React.lazy(
+  () => import("../components/opensigndrive/DriveBody")
+);
+const Loader = () => {
+  return (
+    <div
+      style={{
+        height: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <div
+        style={{
+          fontSize: "45px",
+          color: "#3dd3e0"
+        }}
+        className="loader-37"
+      ></div>
+    </div>
+  );
+};
 function Opensigndrive() {
   const navigate = useNavigate();
   const scrollRef = useRef(null);
@@ -30,6 +51,9 @@ function Opensigndrive() {
   const [folderName, setFolderName] = useState([]);
   const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
   const [isNewFol, setIsNewFol] = useState(false);
+  const [skip, setSkip] = useState(0);
+  const limit = 100;
+  const [loading, setLoading] = useState(false);
   const currentUser =
     localStorage.getItem(
       `Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -40,103 +64,82 @@ function Opensigndrive() {
   const jsonCurrentUser = JSON.parse(currentUser);
 
   useEffect(() => {
-    if (docId) {
-      getPdfFolderDocumentList();
-    } else {
-      getPdfDocumentList();
-    }
+    getPdfDocumentList();
     // eslint-disable-next-line
   }, [docId]);
 
   //function for get all pdf document list
-  const getPdfDocumentList = async () => {
-    const load = {
-      isLoad: true,
-      message: "This might take some time"
-    };
-    let driveDetails;
-    setIsLoading(load);
+  const getPdfDocumentList = async (disbaleLoading) => {
+    setLoading(true);
+    if (!disbaleLoading) {
+      setIsLoading({ isLoad: true, message: "This might take some time" });
+    }
     try {
-      driveDetails = await getDrive();
-      if (driveDetails) {
-        if (driveDetails.length > 0) {
-          setPdfData(driveDetails);
-          sortApps(null, null, driveDetails);
-        }
-        const data = [
-          {
-            name: "OpenSign™ Drive",
-            objectId: ""
-          }
-        ];
-        setFolderName(data);
-        const loadObj = {
-          isLoad: false
-        };
-        setIsLoading(loadObj);
-      } else if (driveDetails === "Error: Something went wrong!") {
-        const loadObj = {
-          isLoad: false
-        };
+      const driveDetails = await getDrive(docId, skip, limit);
+      if (driveDetails && driveDetails === "Error: Something went wrong!") {
         setHandleError("Error: Something went wrong!");
-        setIsLoading(loadObj);
+      } else if (driveDetails && driveDetails.length > 0) {
+        setSkip((prevSkip) => prevSkip + limit);
+        sortApps("Date", "Decending", driveDetails, true);
+      }
+      if (!docId) {
+        setFolderName([{ name: "OpenSign™ Drive", objectId: "" }]);
       }
     } catch (e) {
       setIsAlert({
         isShow: true,
         alertMessage: "something went wrong"
       });
-    }
-  };
-  //function for get parent folder document list
-  const getPdfFolderDocumentList = async () => {
-    const load = {
-      isLoad: true,
-      message: "This might take some time"
-    };
-    setIsLoading(load);
-    let driveDetails;
-    try {
-      driveDetails = await getDrive(docId);
-
-      if (driveDetails) {
-        if (driveDetails.length > 0) {
-          setPdfData(driveDetails);
-          sortApps(null, null, driveDetails);
-        } else {
-          setPdfData([]);
-        }
-        const loadObj = {
-          isLoad: false
-        };
-        setIsLoading(loadObj);
-      } else if (driveDetails === "Error: Something went wrong!") {
-        const loadObj = {
-          isLoad: false
-        };
-        setHandleError("Error: Something went wrong!");
-        setIsLoading(loadObj);
-      }
-    } catch (e) {
-      setIsAlert({
-        isShow: true,
-        alertMessage: "something went wrong!"
+    } finally {
+      setLoading(false);
+      setIsLoading({
+        isLoad: false
       });
     }
   };
 
-  //function for get all pdf document list
-  const getParentFolder = async () => {
-    setIsFolder(true);
+  //function to fetch drive details list on scroll bottom
+  const handleScroll = () => {
+    //get document of render openSign-drive component using id
+    const documentList = document.getElementById("renderList");
+    //documentList.clientHeight property returns the height of an element's content area, including padding but not including borders, margins, or scrollbars.
+    //documentList.scrollHeight property returns the entire height of an element,including the parts that are not visible due to overflow..
+    // documentList.scrollTop property show height of element, how much the content has been scrolled from the top.
+    // When the sum of scrollTop and clientHeight is equal to scrollHeight, it means that the user has scrolled to the bottom of the div.
+    if (
+      documentList &&
+      documentList.scrollTop + documentList.clientHeight >=
+        documentList.scrollHeight
+    ) {
+      //disableLoading is used disable initial loader
+      const disableLoading = true;
+      // If the fetched data length is less than the limit, it means there's no more data to fetch
+      if (!loading && pdfData.length % 100 === 0) {
+        getPdfDocumentList(disableLoading);
+      }
+    }
   };
+  //useEffect is used to call handleScroll function on scrolling event
+  useEffect(() => {
+    const documentList = document.getElementById("renderList");
+    if (documentList) {
+      documentList.addEventListener("scroll", handleScroll);
+      return () => {
+        documentList.removeEventListener("scroll", handleScroll);
+      };
+    }
+    // eslint-disable-next-line
+  }, [loading]); // Add/remove scroll event listener when loading changes
+
   //function for handle folder name path
   const handleRoute = (index) => {
+    setPdfData([]);
+    setSkip(0);
     const updateFolderName = folderName.filter((x, i) => {
       if (i <= index) {
         return x;
       }
     });
-
     setFolderName(updateFolderName);
     const getLastId = updateFolderName[updateFolderName.length - 1];
     setDocId(getLastId.objectId);
@@ -223,18 +226,19 @@ function Opensigndrive() {
     }
   };
 
-  const sortApps = (type, order, driveDetails) => {
+  const sortApps = (type, order, driveDetails, isInitial) => {
     const selectedSortType = type ? type : selectedSort ? selectedSort : "Date";
     const sortOrder = order ? order : sortingOrder ? sortingOrder : "Decending";
-
-    let sortingData = driveDetails;
     if (selectedSortType === "Name") {
-      sortingApp(sortingData, "Name", sortOrder);
+      sortingApp(driveDetails, "Name", sortOrder);
     } else if (selectedSortType === "Date") {
-      sortingApp(sortingData, "Date", sortOrder);
+      sortingApp(driveDetails, "Date", sortOrder);
+    }
+    if (isInitial) {
+      setPdfData([...pdfData, ...driveDetails]);
+    } else {
+      setPdfData(driveDetails);
     }
-
-    setPdfData(sortingData);
   };
 
   //function for handle auto scroll on folder path
@@ -301,6 +305,7 @@ function Opensigndrive() {
       // Cleanup the event listener when the component unmounts
       document.removeEventListener("click", closeMenuOnOutsideClick);
     };
+    // eslint-disable-next-line
   }, [isShowSort, isNewFol]);
 
   const handleFolderTab = (folderData) => {
@@ -542,7 +547,7 @@ function Opensigndrive() {
                     >
                       <span
                         className="dropdown-item itemColor"
-                        onClick={() => getParentFolder()}
+                        onClick={() => setIsFolder(true)}
                       >
                         <i
                           style={{ marginRight: "5px" }}
@@ -734,18 +739,23 @@ function Opensigndrive() {
                 <span style={{ fontWeight: "bold" }}>No Data Found!</span>
               </div>
             ) : (
-              <DriveBody
-                pdfData={pdfData}
-                setFolderName={setFolderName}
-                setIsLoading={setIsLoading}
-                setDocId={setDocId}
-                getPdfFolderDocumentList={getPdfFolderDocumentList}
-                getPdfDocumentList={getPdfDocumentList}
-                isDocId={docId}
-                setPdfData={setPdfData}
-                isList={isList}
-                setIsAlert={setIsAlert}
-              />
+              <React.Suspense fallback={<Loader />}>
+                <DriveBody
+                  pdfData={pdfData}
+                  setFolderName={setFolderName}
+                  setIsLoading={setIsLoading}
+                  setDocId={setDocId}
+                  getPdfDocumentList={getPdfDocumentList}
+                  isDocId={docId}
+                  setPdfData={setPdfData}
+                  isList={isList}
+                  setIsAlert={setIsAlert}
+                  setSkip={setSkip}
+                />
+                {loading && (
+                  <div style={{ textAlign: "center" }}>Loading...</div>
+                )}
+              </React.Suspense>
             )}
           </>
         )}

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -19,7 +19,8 @@ import {
   onImageSelect,
   onSaveSign,
   onSaveImage,
-  addDefaultSignatureImg
+  addDefaultSignatureImg,
+  radioButtonWidget
 } from "../constant/Utils";
 import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
@@ -48,6 +49,7 @@ function PdfRequestFiles() {
   const [imgWH, setImgWH] = useState({});
   const imageRef = useRef(null);
   const [handleError, setHandleError] = useState();
+  const [selectWidgetId, setSelectWidgetId] = useState("");
   const [isLoading, setIsLoading] = useState({
     isLoad: true,
     message: "This might take some time"
@@ -385,7 +387,8 @@ function PdfRequestFiles() {
           for (let j = 0; j < checkUser[0].placeHolder[i].pos.length; j++) {
             checkboxExist =
               checkUser[0].placeHolder[i].pos[j].type === "checkbox";
-            radioExist = checkUser[0].placeHolder[i].pos[j].type === "radio";
+            radioExist =
+              checkUser[0].placeHolder[i].pos[j].type === radioButtonWidget;
             if (checkboxExist) {
               requiredCheckbox = checkUser[0].placeHolder[i].pos.filter(
                 (position) =>
@@ -434,7 +437,8 @@ function PdfRequestFiles() {
             } else if (radioExist) {
               requiredRadio = checkUser[0].placeHolder[i].pos.filter(
                 (position) =>
-                  !position.options?.isReadOnly && position.type === "radio"
+                  !position.options?.isReadOnly &&
+                  position.type === radioButtonWidget
               );
               if (requiredRadio && requiredRadio?.length > 0) {
                 let checkSigned;
@@ -457,7 +461,7 @@ function PdfRequestFiles() {
               const requiredWidgets = checkUser[0].placeHolder[i].pos.filter(
                 (position) =>
                   position.options?.status === "required" &&
-                  position.type !== "radio" &&
+                  position.type !== radioButtonWidget &&
                   position.type !== "checkbox"
               );
               if (requiredWidgets && requiredWidgets?.length > 0) {
@@ -984,7 +988,7 @@ function PdfRequestFiles() {
                   : isDecline.currnt === "YouDeclined"
                     ? "You have declined this document!"
                     : isDecline.currnt === "another" &&
-                      "You cannot sign this document as it has been declined by one or more person(s)."
+                      "You cannot sign this document as it has been declined by one or more recipient(s)."
               }
               footerMessage={isDecline.currnt === "Sure"}
               declineDoc={declineDoc}
@@ -1173,6 +1177,8 @@ function PdfRequestFiles() {
                   setIsInitial={setIsInitial}
                   setValidateAlert={setValidateAlert}
                   unSignedWidgetId={unSignedWidgetId}
+                  setSelectWidgetId={setSelectWidgetId}
+                  selectWidgetId={selectWidgetId}
                 />
               )}
             </div>

apps/OpenSign/src/pages/Pgsignup.js

@@ -2,14 +2,17 @@ import React, { useState, useEffect } from "react";
 import "../styles/pgsignup.css";
 import Parse from "parse";
 import axios from "axios";
-import { fetchAppInfo, showTenantName } from "../redux/actions/index";
-import { connect } from "react-redux";
+import { useDispatch } from "react-redux";
 import Title from "../components/Title";
 import { useNavigate, useLocation } from "react-router-dom";
+import { appInfo } from "../constant/appinfo";
+import { showTenant } from "../redux/reducers/ShowTenant";
+import { fetchAppInfo } from "../redux/reducers/infoReducer";
 
-const PgSignUp = (props) => {
+const PgSignUp = () => {
   const navigate = useNavigate();
   const location = useLocation();
+  const dispatch = useDispatch();
   const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
   const [parseAppId] = useState(localStorage.getItem("parseAppId"));
   const [formData, setFormData] = useState({
@@ -24,8 +27,7 @@ const PgSignUp = (props) => {
 
   // below useEffect is used to fetch App data and save to redux state
   useEffect(() => {
-    // Parse.User.logOut()
-    props.fetchAppInfo();
+    dispatch(fetchAppInfo());
     handleSignedUpUser();
     // eslint-disable-next-line
   }, []);
@@ -243,8 +245,8 @@ const PgSignUp = (props) => {
       // Check extended class user role and tenentId
       try {
         let userRoles = [];
-        if (props.appInfo.settings) {
-          let userSettings = props.appInfo.settings;
+        if (appInfo.settings) {
+          let userSettings = appInfo.settings;
 
           //Get Current user roles
           let url = `${baseUrl}functions/UserGroups`;
@@ -319,8 +321,8 @@ const PgSignUp = (props) => {
                                 }
                               });
                               if (tenentInfo.length) {
-                                props.showTenantName(
-                                  tenentInfo[0].tenentName || ""
+                                dispatch(
+                                  showTenant(tenentInfo[0].tenentName || "")
                                 );
                                 localStorage.setItem(
                                   "TenantName",
@@ -358,8 +360,8 @@ const PgSignUp = (props) => {
                                 }
                               });
                               if (tenentInfo.length) {
-                                props.showTenantName(
-                                  tenentInfo[0].tenentName || ""
+                                dispatch(
+                                  showTenant(tenentInfo[0].tenentName || "")
                                 );
                                 localStorage.setItem(
                                   "TenantName",
@@ -537,15 +539,4 @@ const PgSignUp = (props) => {
   );
 };
 
-const mapStateToProps = (state) => {
-  if (Object.keys(state.appInfo).length !== 0) {
-    return { appInfo: state.appInfo, isloginVisible: true };
-  } else {
-    return { appInfo: state.appInfo, isloginVisible: false };
-  }
-};
-
-export default connect(mapStateToProps, {
-  fetchAppInfo,
-  showTenantName
-})(PgSignUp);
+export default PgSignUp;

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -24,7 +24,11 @@ import {
   randomId,
   defaultWidthHeight,
   multiSignEmbed,
-  addWidgetOptions
+  addWidgetOptions,
+  textInputWidget,
+  textWidget,
+  radioButtonWidget,
+  color
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import { useNavigate } from "react-router-dom";
@@ -76,6 +80,8 @@ function PlaceHolderSign() {
   const [isResize, setIsResize] = useState(false);
   const [zIndex, setZIndex] = useState(1);
   const [signKey, setSignKey] = useState();
+  const [tempSignerId, setTempSignerId] = useState("");
+  const [blockColor, setBlockColor] = useState("");
   const [pdfLoadFail, setPdfLoadFail] = useState({
     status: false,
     type: "load"
@@ -98,20 +104,10 @@ function PlaceHolderSign() {
   const [widgetName, setWidgetName] = useState(false);
   const [mailStatus, setMailStatus] = useState("");
   const [isCurrUser, setIsCurrUser] = useState(false);
-  const color = [
-    "#93a3db",
-    "#e6c3db",
-    "#c0e3bc",
-    "#bce3db",
-    "#b8ccdb",
-    "#ceb8db",
-    "#ffccff",
-    "#99ffcc",
-    "#cc99ff",
-    "#ffcc99",
-    "#66ccff",
-    "#ffffcc"
-  ];
+  const [isAlreadyPlace, setIsAlreadyPlace] = useState({
+    status: false,
+    message: ""
+  });
 
   const isMobile = window.innerWidth < 767;
   const [, drop] = useDrop({
@@ -189,15 +185,49 @@ function PlaceHolderSign() {
     //getting document details
     const documentData = await contractDocument(documentId);
     if (documentData && documentData.length > 0) {
-      // const alreadyPlaceholder =
-      //   documentData[0].Placeholders && documentData[0].Placeholders;
-      // if (alreadyPlaceholder && alreadyPlaceholder.length > 0) {
-      //   setIsAlreadyPlace(true);
-      // }
-      // setSignersData(documentData[0]);
-      // setIsSelectId(0);
-      // setSignerObjId(documentData[0].Signers[0].objectId);
-      // setContractName(documentData[0].Signers[0].className);
+      const alreadyPlaceholder = documentData[0]?.SignedUrl;
+      // Check if document is sent for signing
+      if (alreadyPlaceholder) {
+        // Check if the document is completed
+        const isCompleted =
+          documentData[0].IsCompleted && documentData[0]?.IsCompleted;
+        // Get the expiration date of the document
+        const expireDate = documentData[0].ExpiryDate.iso;
+        // Check if the document has been declined
+        const declined =
+          documentData[0].IsDeclined && documentData[0]?.IsDeclined;
+        // Get the expiration update date in milliseconds
+        const expireUpdateDate = new Date(expireDate).getTime();
+        // Get the current date in milliseconds
+        const currDate = new Date().getTime();
+        if (isCompleted) {
+          // If document is completed
+          setIsAlreadyPlace({
+            status: true,
+            message: "This document has been signed by all Signers."
+          });
+        } else if (declined) {
+          // If document has been declined
+          setIsAlreadyPlace({
+            status: true,
+            message:
+              "This document has been declined by one or more recipient(s)."
+          });
+        } else if (currDate > expireUpdateDate) {
+          // If document has expired
+          setIsAlreadyPlace({
+            status: true,
+            message: "This Document is no longer available."
+          });
+        } else {
+          // If document is dispatched for signing
+          setIsAlreadyPlace({
+            status: true,
+            message: "The document has already been dispatched for signing."
+          });
+        }
+      }
+
       setPdfDetails(documentData);
 
       if (documentData[0].Signers && documentData[0].Signers.length > 0) {
@@ -234,14 +264,17 @@ function PlaceHolderSign() {
           });
           setSignersData(updatedSigners);
           setUniqueId(updatedSigners[0].Id);
+          setBlockColor(updatedSigners[0].blockColor);
         } else {
           const updatedSigners = documentData[0].Signers.map((x, index) => ({
             ...x,
             Id: randomId(),
-            Role: "User " + (index + 1)
+            Role: "User " + (index + 1),
+            blockColor: color[index % color.length]
           }));
           setSignersData(updatedSigners);
           setUniqueId(updatedSigners[0].Id);
+          setBlockColor(updatedSigners[0].blockColor);
         }
       } else {
         setRoleName("User 1");
@@ -261,6 +294,7 @@ function PlaceHolderSign() {
           setSignersData(updatedSigners);
           setIsSelectId(0);
           setUniqueId(updatedSigners[0].Id);
+          setBlockColor(updatedSigners[0].blockColor);
         }
       }
     } else if (
@@ -313,9 +347,6 @@ function PlaceHolderSign() {
 
   //function for setting position after drop signature button over pdf
   const addPositionOfSignature = (item, monitor) => {
-    if (item && item.text) {
-      setWidgetName(item.text);
-    }
     getSignerPos(item, monitor);
   };
 
@@ -332,7 +363,6 @@ function PlaceHolderSign() {
       let dropData = [];
       let placeHolder;
       const dragTypeValue = item?.text ? item.text : monitor.type;
-
       if (item === "onclick") {
         const dropObj = {
           //onclick put placeholder center on pdf
@@ -380,18 +410,16 @@ function PlaceHolderSign() {
           pos: dropData
         };
       }
-
       setSelectWidgetId(key);
       if (signer) {
         let filterSignerPos;
-        if (dragTypeValue === "label") {
+        if (dragTypeValue === textWidget) {
           filterSignerPos = signerPos.filter((data) => data.Role === "prefill");
         } else {
           filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
         }
 
         const { blockColor, Role } = signer;
-
         //adding placholder in existing signer pos array (placaholder)
         if (filterSignerPos.length > 0) {
           const getPlaceHolder = filterSignerPos[0].placeHolder;
@@ -412,7 +440,7 @@ function PlaceHolderSign() {
             };
             updatePlace.push(xyPos);
             let updatesignerPos;
-            if (dragTypeValue === "label") {
+            if (dragTypeValue === textWidget) {
               updatesignerPos = signerPos.map((x) =>
                 x.Role === "prefill" ? { ...x, placeHolder: updatePlace } : x
               );
@@ -425,7 +453,7 @@ function PlaceHolderSign() {
             setSignerPos(updatesignerPos);
           } else {
             let updatesignerPos;
-            if (dragTypeValue === "label") {
+            if (dragTypeValue === textWidget) {
               updatesignerPos = signerPos.map((x) =>
                 x.Role === "prefill"
                   ? { ...x, placeHolder: [...x.placeHolder, placeHolder] }
@@ -442,9 +470,8 @@ function PlaceHolderSign() {
           }
         } else {
           //adding new placeholder for selected signer in pos array (placeholder)
-          // const signerData = signerPos;
           let placeHolderPos;
-          if (dragTypeValue === "label") {
+          if (dragTypeValue === textWidget) {
             placeHolderPos = {
               signerPtr: {},
               signerObjId: "",
@@ -484,14 +511,13 @@ function PlaceHolderSign() {
           setShowDropdown(true);
         } else if (dragTypeValue === "checkbox") {
           setIsCheckbox(true);
-        } else if (dragTypeValue === "radio") {
+        } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
-        } else if (dragTypeValue !== "label" && dragTypeValue !== "signature") {
-          setIsNameModal(true);
         }
         setWidgetType(dragTypeValue);
         setSignKey(key);
         setCurrWidgetsDetails({});
+        setWidgetName(dragTypeValue);
       }
     }
   };
@@ -736,7 +762,7 @@ function PlaceHolderSign() {
 
     if (getPrefill && isLabel) {
       const alert = {
-        mssg: "label",
+        mssg: textWidget,
         alert: true
       };
       setIsSendAlert(alert);
@@ -1000,7 +1026,7 @@ function PlaceHolderSign() {
       selector: '[data-tut="reactourSecond"]',
       content: () => (
         <TourContentWithBtn
-          message={`Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`}
+          message={`Drag or click on a field to add it to the document.`}
           isChecked={handleDontShow}
         />
       ),
@@ -1051,7 +1077,8 @@ function PlaceHolderSign() {
     addOption,
     deleteOption,
     status,
-    defaultValue
+    defaultValue,
+    isHideLabel
   ) => {
     const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
     if (filterSignerPos.length > 0) {
@@ -1067,7 +1094,7 @@ function PlaceHolderSign() {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (widgetType === "radio") {
+            if (widgetType === radioButtonWidget) {
               if (addOption) {
                 return {
                   ...position,
@@ -1089,7 +1116,8 @@ function PlaceHolderSign() {
                     ...position.options,
                     name: dropdownName,
                     values: dropdownOptions,
-                    isReadOnly: isReadOnly,
+                    isReadOnly: isReadOnly || false,
+                    isHideLabel: isHideLabel || false,
                     defaultValue: defaultValue
                   }
                 };
@@ -1121,7 +1149,8 @@ function PlaceHolderSign() {
                       maxRequiredCount: maxCount
                     },
                     defaultValue: defaultValue,
-                    isReadOnly: isReadOnly
+                    isReadOnly: isReadOnly || false,
+                    isHideLabel: isHideLabel || false
                   }
                 };
               }
@@ -1186,7 +1215,7 @@ function PlaceHolderSign() {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (position.type === "text") {
+            if (position.type === textInputWidget) {
               return {
                 ...position,
                 options: {
@@ -1335,7 +1364,6 @@ function PlaceHolderSign() {
   const closePopup = () => {
     setIsAddUser({});
   };
-
   return (
     <>
       <Title title={state?.title ? state.title : "New Document"} />
@@ -1406,13 +1434,13 @@ function PlaceHolderSign() {
 
               <ModalUi
                 headerColor={
-                  isSendAlert.mssg === "sure" || isSendAlert.mssg === "label"
+                  isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
                     ? "#dc3545"
                     : isSendAlert.mssg === "confirm" && themeColor
                 }
                 isOpen={isSendAlert.alert}
                 title={
-                  isSendAlert.mssg === "sure" || isSendAlert.mssg === "label"
+                  isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
                     ? "Fields required"
                     : isSendAlert.mssg === "confirm" && "Send Mail"
                 }
@@ -1421,7 +1449,7 @@ function PlaceHolderSign() {
                 <div style={{ height: "100%", padding: 20 }}>
                   {isSendAlert.mssg === "sure" ? (
                     <p>Please add field for all recipients.</p>
-                  ) : isSendAlert.mssg === "label" ? (
+                  ) : isSendAlert.mssg === textWidget ? (
                     <p>Please confirm that you have filled label widget.</p>
                   ) : (
                     isSendAlert.mssg === "confirm" && (
@@ -1553,11 +1581,14 @@ function PlaceHolderSign() {
                 allPages={allPages}
                 pageNumber={pageNumber}
                 signKey={signKey}
-                // signerObjId={signerObjId}
                 Id={uniqueId}
+                widgetType={widgetType}
+                setUniqueId={setUniqueId}
+                tempSignerId={tempSignerId}
+                setTempSignerId={setTempSignerId}
               />
               <DropdownWidgetOption
-                type="radio"
+                type={radioButtonWidget}
                 title="Radio group"
                 showDropdown={isRadio}
                 setShowDropdown={setIsRadio}
@@ -1639,6 +1670,8 @@ function PlaceHolderSign() {
                     setSelectWidgetId={setSelectWidgetId}
                     selectWidgetId={selectWidgetId}
                     handleNameModal={setIsNameModal}
+                    setTempSignerId={setTempSignerId}
+                    uniqueId={uniqueId}
                   />
                 )}
               </div>
@@ -1675,6 +1708,10 @@ function PlaceHolderSign() {
                   setUniqueId={setUniqueId}
                   setRoleName={setRoleName}
                   initial={true}
+                  sendInOrder={pdfDetails[0].SendinOrder}
+                  setSignersData={setSignersData}
+                  blockColor={blockColor}
+                  setBlockColor={setBlockColor}
                 />
               </div>
             ) : (
@@ -1693,6 +1730,10 @@ function PlaceHolderSign() {
                       setContractName={setContractName}
                       setUniqueId={setUniqueId}
                       setRoleName={setRoleName}
+                      sendInOrder={pdfDetails[0].SendinOrder}
+                      setSignersData={setSignersData}
+                      blockColor={blockColor}
+                      setBlockColor={setBlockColor}
                       // handleAddSigner={handleAddSigner}
                     />
                     <div data-tut="reactourSecond">
@@ -1748,7 +1789,33 @@ function PlaceHolderSign() {
             </button>
           </div>
         </ModalUi>
+        <ModalUi
+          headerColor={"#dc3545"}
+          isOpen={isAlreadyPlace.status}
+          title={"Document Alert"}
+          showClose={false}
+        >
+          <div style={{ height: "100%", padding: 20 }}>
+            <p>{isAlreadyPlace.message}</p>
 
+            <div
+              style={{
+                height: "1px",
+                backgroundColor: "#9f9f9f",
+                width: "100%",
+                marginTop: "15px",
+                marginBottom: "15px"
+              }}
+            ></div>
+            <button
+              onClick={() => handleRecipientSign()}
+              type="button"
+              className="finishBtn cancelBtn"
+            >
+              View
+            </button>
+          </div>
+        </ModalUi>
         <LinkUserModal
           handleAddUser={handleAddUser}
           isAddUser={isAddUser}

apps/OpenSign/src/pages/Report.js

@@ -12,6 +12,7 @@ const Report = () => {
   const [List, setList] = useState([]);
   const [isLoader, setIsLoader] = useState(true);
   const [reportName, setReportName] = useState("");
+  const [reporthelp, setReportHelp] = useState("");
   const [actions, setActions] = useState([]);
   const [heading, setHeading] = useState([]);
   const [isNextRecord, setIsNextRecord] = useState(false);
@@ -53,6 +54,7 @@ const Report = () => {
       setHeading(json.heading);
       setReportName(json.reportName);
       setForm(json.form);
+      setReportHelp(json?.helpMsg)
       const currentUser = Parse.User.current().id;
 
       const headers = {
@@ -156,6 +158,7 @@ const Report = () => {
               isMoreDocs={isMoreDocs}
               docPerPage={docPerPage}
               form={form}
+              report_help={reporthelp}
             />
           ) : (
             <PageNotFound prefix={"Report"} />

apps/OpenSign/src/pages/Signup.js

@@ -1,17 +1,19 @@
 import React, { useState, useEffect } from "react";
-import { connect } from "react-redux";
 import Parse from "parse";
 import axios from "axios";
 import Title from "../components/Title";
-import { fetchAppInfo, showTenantName } from "../redux/actions";
 import { useNavigate, NavLink } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
 import Alert from "../primitives/Alert";
-
-const Signup = (props) => {
+import { appInfo } from "../constant/appinfo";
+import { useDispatch } from "react-redux";
+import { fetchAppInfo } from "../redux/reducers/infoReducer";
+import  { showTenant } from "../redux/reducers/ShowTenant";
+const Signup = () => {
   const { width } = useWindowSize();
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const [name, setName] = useState("");
   const [phone, setPhone] = useState("");
   const [password, setPassword] = useState("");
@@ -29,7 +31,7 @@ const Signup = (props) => {
   const [specialCharValid, setSpecialCharValid] = useState(false);
 
   const togglePasswordVisibility = () => setShowPassword(!showPassword);
-  const image = props.appInfo.applogo;
+  const image = appInfo.applogo;
 
   const clearStorage = async () => {
     if (Parse.User.current()) {
@@ -90,7 +92,7 @@ const Signup = (props) => {
         res
           .then(async (r) => {
             if (r) {
-              let roleData = props.appInfo.settings;
+              let roleData = appInfo.settings;
               if (roleData && roleData.length > 0) {
                 const params = {
                   userDetails: {
@@ -99,7 +101,7 @@ const Signup = (props) => {
                     name: name,
                     email: email,
                     phone: phone,
-                    role: props.appInfo.defaultRole
+                    role: appInfo.defaultRole
                   }
                 };
                 try {
@@ -181,8 +183,8 @@ const Signup = (props) => {
       // Check extended class user role and tenentId
       try {
         let userRoles = [];
-        if (props.appInfo.settings) {
-          let userSettings = props.appInfo.settings;
+        if (appInfo.settings) {
+          let userSettings = appInfo.settings;
 
           //Get Current user roles
           let url = `${baseUrl}functions/UserGroups`;
@@ -256,8 +258,10 @@ const Signup = (props) => {
                                 }
                               });
                               if (tenentInfo.length) {
-                                props.showTenantName(
-                                  tenentInfo[0].tenentName || ""
+                                dispatch(
+                                  showTenant(
+                                    tenentInfo[0].tenentName || ""
+                                  )
                                 );
                                 localStorage.setItem(
                                   "TenantName",
@@ -300,8 +304,8 @@ const Signup = (props) => {
                                 }
                               });
                               if (tenentInfo.length) {
-                                props.showTenantName(
-                                  tenentInfo[0].tenentName || ""
+                                dispatch(
+                                  showTenant(tenentInfo[0].tenentName || "")
                                 );
                                 localStorage.setItem(
                                   "TenantName",
@@ -433,7 +437,7 @@ const Signup = (props) => {
     }
   };
   useEffect(() => {
-    props.fetchAppInfo();
+    dispatch(fetchAppInfo());
     // eslint-disable-next-line
   }, []);
 
@@ -479,7 +483,7 @@ const Signup = (props) => {
 
       <Title title={"Signup page"} />
 
-      {props.isloginVisible && props.isloginVisible ? (
+      {appInfo && appInfo.applogo ? (
         <div>
           <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
             <div className="w-[250px] h-[66px] inline-block">
@@ -657,15 +661,4 @@ const Signup = (props) => {
   );
 };
 
-const mapStateToProps = (state) => {
-  if (Object.keys(state.appInfo).length !== 0) {
-    return { appInfo: state.appInfo, isloginVisible: true };
-  } else {
-    return { appInfo: state.appInfo, isloginVisible: false };
-  }
-};
-
-export default connect(mapStateToProps, {
-  fetchAppInfo,
-  showTenantName
-})(Signup);
+export default Signup

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -3,7 +3,6 @@ import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
 import { themeColor } from "../constant/const";
 import axios from "axios";
-import moment from "moment";
 import Loader from "../primitives/LoaderWithMsg";
 import loader from "../assets/images/loader2.gif";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
@@ -25,7 +24,9 @@ import {
   onSaveSign,
   contractUsers,
   contactBook,
-  randomId
+  randomId,
+  getDate,
+  textWidget
 } from "../constant/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -308,13 +309,6 @@ function SignYourSelf() {
       setIsLoading(loadObj);
     }
   };
-
-  const getDate = () => {
-    const date = new Date();
-    const milliseconds = date.getTime();
-    const newDate = moment(milliseconds).format("MM/DD/YYYY");
-    return newDate;
-  };
   const getWidgetValue = (type) => {
     switch (type) {
       case "name":
@@ -333,6 +327,7 @@ function SignYourSelf() {
         return "";
     }
   };
+
   const addWidgetOptions = (type) => {
     switch (type) {
       case "signature":
@@ -347,8 +342,7 @@ function SignYourSelf() {
         return {
           name: "checkbox"
         };
-
-      case "text":
+      case textWidget:
         return {
           name: "text"
         };
@@ -386,7 +380,8 @@ function SignYourSelf() {
       case "date":
         return {
           name: "date",
-          defaultValue: getDate()
+          response: getDate(),
+          validation: { format: "MM/dd/yyyy", type: "date-format" }
         };
       case "image":
         return {
@@ -532,7 +527,6 @@ function SignYourSelf() {
           checkSigned = requiredWidgets[i]?.options?.response;
           if (!checkSigned) {
             const checkSignUrl = requiredWidgets[i]?.pos?.SignUrl;
-
             let checkDefaultSigned = requiredWidgets[i]?.options?.defaultValue;
             if (!checkSignUrl) {
               if (!checkDefaultSigned) {
@@ -591,12 +585,12 @@ function SignYourSelf() {
         flag,
         containerWH
       );
-      // console.log('pdf',pdfBytes)
+      // console.log("pdf", pdfBytes);
       //function for call to embed signature in pdf and get digital signature pdf
       await signPdfFun(pdfBytes, documentId);
     }
   }
-
+  // console.log("signyourself", xyPostion);
   //function for get digital signature
   const signPdfFun = async (base64Url, documentId) => {
     let singleSign = {
@@ -875,7 +869,10 @@ function SignYourSelf() {
     maxCount,
     isReadOnly,
     addOption,
-    deleteOption
+    deleteOption,
+    status,
+    defaultValue,
+    isHideLabel
   ) => {
     const getPageNumer = xyPostion.filter(
       (data) => data.pageNumber === pageNumber
@@ -907,7 +904,8 @@ function SignYourSelf() {
                 ...position.options,
                 name: dropdownName,
                 values: dropdownOptions,
-                isReadOnly: isReadOnly
+                isReadOnly: isReadOnly,
+                isHideLabel: isHideLabel || false
               }
             };
           }

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -21,7 +21,9 @@ import {
   addZIndex,
   createDocument,
   defaultWidthHeight,
-  addWidgetOptions
+  addWidgetOptions,
+  textInputWidget,
+  radioButtonWidget
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import "../styles/AddUser.css";
@@ -75,6 +77,7 @@ const TemplatePlaceholder = () => {
   const [showDropdown, setShowDropdown] = useState(false);
   const [widgetType, setWidgetType] = useState("");
   const [isRadio, setIsRadio] = useState(false);
+  const [blockColor, setBlockColor] = useState("");
   const [selectWidgetId, setSelectWidgetId] = useState("");
   const [isNameModal, setIsNameModal] = useState(false);
   const [pdfLoadFail, setPdfLoadFail] = useState({
@@ -221,6 +224,7 @@ const TemplatePlaceholder = () => {
             });
             setSignersData(updatedSigners);
             setUniqueId(updatedSigners[0].Id);
+            setBlockColor(updatedSigners[0].blockColor);
           } else {
             const updatedSigners = documentData[0].Signers.map((x, index) => ({
               ...x,
@@ -229,6 +233,7 @@ const TemplatePlaceholder = () => {
             }));
             setSignersData(updatedSigners);
             setUniqueId(updatedSigners[0].Id);
+            setBlockColor(updatedSigners[0].blockColor);
           }
         } else {
           setRoleName("User 1");
@@ -247,6 +252,7 @@ const TemplatePlaceholder = () => {
             setUniqueId(updatedSigners[0].Id);
             setSignersData(updatedSigners);
             setIsSelectId(0);
+            setBlockColor(updatedSigners[0].blockColor);
           }
         }
       } else if (
@@ -442,10 +448,8 @@ const TemplatePlaceholder = () => {
           setShowDropdown(true);
         } else if (dragTypeValue === "checkbox") {
           setIsCheckbox(true);
-        } else if (dragTypeValue === "radio") {
+        } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
-        } else if (dragTypeValue !== "label" && dragTypeValue !== "signature") {
-          setIsNameModal(true);
         }
         setCurrWidgetsDetails({});
         setWidgetType(dragTypeValue);
@@ -854,6 +858,7 @@ const TemplatePlaceholder = () => {
     setIsModalRole(false);
     setRoleName("");
     setUniqueId(Id);
+    setBlockColor(color[index]);
     setIsSelectId(index);
     setIsMailSend(false);
   };
@@ -870,9 +875,11 @@ const TemplatePlaceholder = () => {
     if (index === signersdata.length - 1) {
       setUniqueId(updateSigner[updateSigner.length - 1]?.Id || "");
       setIsSelectId(index - 1 || 0);
+      setBlockColor(color[index - 1 || 0]);
     } else {
       setUniqueId(updateSigner[index]?.Id || "");
       setIsSelectId(index);
+      setBlockColor(color[index]);
     }
 
     setSignerPos(updatePlaceholderUser);
@@ -970,7 +977,8 @@ const TemplatePlaceholder = () => {
     addOption,
     deleteOption,
     status,
-    defaultValue
+    defaultValue,
+    isHideLabel
   ) => {
     const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
     if (filterSignerPos.length > 0) {
@@ -986,11 +994,10 @@ const TemplatePlaceholder = () => {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (widgetType === "radio") {
+            if (widgetType === radioButtonWidget) {
               if (addOption) {
                 return {
                   ...position,
-
                   Height: position.Height
                     ? position.Height + 15
                     : defaultWidthHeight(widgetType).height + 15
@@ -1010,7 +1017,9 @@ const TemplatePlaceholder = () => {
                     name: dropdownName,
                     values: dropdownOptions,
                     status: status,
-                    defaultValue: defaultValue
+                    defaultValue: defaultValue,
+                    isReadOnly: isReadOnly || false,
+                    isHideLabel: isHideLabel || false
                   }
                 };
               }
@@ -1040,8 +1049,9 @@ const TemplatePlaceholder = () => {
                       minRequiredCount: minCount,
                       maxRequiredCount: maxCount
                     },
-                    isReadOnly: isReadOnly,
-                    defaultValue: defaultValue
+                    isReadOnly: isReadOnly || false,
+                    defaultValue: defaultValue,
+                    isHideLabel: isHideLabel || false
                   }
                 };
               }
@@ -1106,7 +1116,7 @@ const TemplatePlaceholder = () => {
         const getPosData = getXYdata;
         const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
-            if (position.type === "text") {
+            if (position.type === textInputWidget) {
               return {
                 ...position,
                 options: {
@@ -1305,7 +1315,7 @@ const TemplatePlaceholder = () => {
                 </div>
               </ModalUi>
               <DropdownWidgetOption
-                type="radio"
+                type={radioButtonWidget}
                 title="Radio group"
                 showDropdown={isRadio}
                 setShowDropdown={setIsRadio}
@@ -1440,6 +1450,10 @@ const TemplatePlaceholder = () => {
                   title={"Roles"}
                   initial={true}
                   isTemplateFlow={true}
+                  sendInOrder={pdfDetails[0].SendinOrder}
+                  setSignersData={setSignersData}
+                  blockColor={blockColor}
+                  setBlockColor={setBlockColor}
                 />
               </div>
             ) : (
@@ -1463,6 +1477,10 @@ const TemplatePlaceholder = () => {
                       handleRoleChange={handleRoleChange}
                       handleOnBlur={handleOnBlur}
                       title={"Roles"}
+                      sendInOrder={pdfDetails[0]?.SendinOrder}
+                      setSignersData={setSignersData}
+                      blockColor={blockColor}
+                      setBlockColor={setBlockColor}
                     />
                     <div data-tut="reactourSecond">
                       <WidgetComponent

apps/OpenSign/src/pages/UserProfile.js

@@ -6,6 +6,8 @@ import dp from "../assets/images/dp.png";
 import Title from "../components/Title";
 import sanitizeFileName from "../primitives/sanitizeFileName";
 import axios from "axios";
+import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
+import Tooltip from "../primitives/Tooltip";
 
 function UserProfile() {
   const navigate = useNavigate();
@@ -250,7 +252,7 @@ function UserProfile() {
                 <span className="font-semibold">Email:</span>{" "}
                 <span>{UserProfile && UserProfile.email}</span>
               </li>
-              <li className="flex justify-between items-center border-y-[1px] border-gray-300 py-2 break-all">
+              <li className="flex justify-between items-center border-t-[1px] border-gray-300 py-2 break-all">
                 <span className="font-semibold">Is Email verified:</span>{" "}
                 <span>
                   {UserProfile && UserProfile.emailVerified
@@ -258,10 +260,17 @@ function UserProfile() {
                     : "Not verified"}
                 </span>
               </li>
-              <li className="flex justify-between items-center border-y-[1px] border-gray-300 py-2 break-all">
-                <span className="font-semibold">Disable DocumentId :</span>{" "}
-                <span>
-                  <label className="relative inline-flex items-center cursor-pointer mb-0">
+              <li className="border-y-[1px] border-gray-300 break-all">
+                <div className="flex justify-between items-center py-2">
+                  <span className="font-semibold">
+                    Disable DocumentId :{" "}
+                    <Tooltip url={"https://docs.opensignlabs.com/docs/help/Settings/disabledocumentid"} />{" "}
+                  </span>{" "}
+                  <label
+                    className={`${
+                      editmode ? "cursor-pointer" : ""
+                    } relative inline-flex items-center mb-0`}
+                  >
                     <input
                       disabled={editmode ? false : true}
                       checked={isDisableDocId}
@@ -270,9 +279,14 @@ function UserProfile() {
                       value=""
                       className="sr-only peer"
                     />
-                    <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                    <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600"></div>
                   </label>
-                </span>
+                </div>
+                <PremiumAlertHeader
+                  message={
+                    "Disable documentId is free in beta, this feature will incur a fee later."
+                  }
+                />
               </li>
             </ul>
             <div className="flex justify-center pt-2 pb-3 md:pt-3 md:pb-4">

apps/OpenSign/src/pages/Webhook.js

@@ -6,6 +6,8 @@ import ModalUi from "../primitives/ModalUi";
 import { rejectBtn, submitBtn } from "../constant/const";
 import { openInNewTab } from "../constant/Utils";
 import Parse from "parse";
+import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
+import Tooltip from "../primitives/Tooltip";
 
 function Webhook() {
   const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
@@ -101,7 +103,13 @@ function Webhook() {
         </div>
       ) : (
         <div className="bg-white flex flex-col justify-center shadow rounded">
-          <h1 className="ml-4 mt-3 mb-2 font-semibold">Webhook</h1>
+          <PremiumAlertHeader />
+          <h1 className="ml-4 mt-3 mb-2 font-semibold">
+            Webhook{" "}
+            <Tooltip
+              url={"https://docs.opensignlabs.com/docs/API-docs/get-webhook"}
+            />
+          </h1>
           <ul className="w-full flex flex-col  p-2 text-sm">
             <li
               className={`flex justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -6,6 +6,7 @@ import ModalUi from "./ModalUi";
 import AddSigner from "../components/AddSigner";
 import { modalSubmitBtnColor, modalCancelBtnColor } from "../constant/const";
 import Alert from "./Alert";
+import Tooltip from "./Tooltip";
 const ReportTable = ({
   ReportName,
   List,
@@ -15,7 +16,8 @@ const ReportTable = ({
   setIsNextRecord,
   isMoreDocs,
   docPerPage,
-  form
+  form,
+  report_help
 }) => {
   const navigate = useNavigate();
   const [currentPage, setCurrentPage] = useState(1);
@@ -255,7 +257,14 @@ const ReportTable = ({
         </Alert>
       )}
       <div className="flex flex-row items-center justify-between my-2 mx-3 text-[20px] md:text-[23px]">
-        <div className="font-light">{ReportName}</div>
+        <div className="font-light">
+          {ReportName}{" "}
+          {report_help && (
+            <span className="text-xs md:text-[13px] font-normal">
+              <Tooltip message={report_help} />
+            </span>
+          )}
+        </div>
         {ReportName === "Templates" && (
           <i
             onClick={() => navigate("/form/template")}

apps/OpenSign/src/primitives/LazyPage.js

@@ -0,0 +1,30 @@
+import React, { Suspense } from "react";
+
+const LazyPage = ({ Page }) => {
+  return (
+    <Suspense
+      fallback={
+        <div
+          style={{
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
+        </div>
+      }
+    >
+      <Page />
+    </Suspense>
+  );
+};
+
+export default LazyPage;

apps/OpenSign/src/primitives/PremiumAlertHeader.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const PremiumAlertHeader = ({ message }) => (
+  <marquee className="bg-yellow-300 text-black px-2">
+    {message
+      ? message
+      : "Currently free in Beta, this feature will incur a fee later."}
+  </marquee>
+);
+
+export default PremiumAlertHeader;

apps/OpenSign/src/primitives/Tooltip.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { Tooltip as ReactTooltip } from "react-tooltip";
+import { openInNewTab } from "../constant/Utils";
+const Tooltip = ({ children, id, message, url, iconColor }) =>
+  url ? (
+    <button onClick={() => openInNewTab(url)} className="text-center">
+      {children ? (
+        children
+      ) : (
+        <i className="fa-solid fa-question text-xs border-[1.5px] px-1 rounded-full border-[#33bbff] text-[#33bbff]"></i>
+      )}
+    </button>
+  ) : (
+    <>
+      <a
+        data-tooltip-id={id ? id : "my-tooltip"}
+        data-tooltip-content={message}
+        className="z-50"
+      >
+        {children ? (
+          children
+        ) : (
+          <i
+            className="fa-solid fa-question text-xs border-[1.5px] px-1 rounded-full border-[#33bbff] text-[#33bbff]"
+            style={{
+              borderColor: iconColor ? iconColor : "#33bbff",
+              color: iconColor ? iconColor : "#33bbff"
+            }}
+          ></i>
+        )}
+      </a>
+      <ReactTooltip id={id ? id : "my-tooltip"} className="max-w-[200px]" />
+    </>
+  );
+
+export default Tooltip;

apps/OpenSign/src/redux/actions/index.js

@@ -1,200 +0,0 @@
-import Parse from "parse";
-import axios from "axios";
-import { appInfo } from "../../constant/appinfo";
-
-//For fetching application Information
-export const fetchAppInfo = () => async (dispatch) => {
-  localStorage.setItem("_appName", appInfo.appname);
-  localStorage.setItem("_app_objectId", appInfo.objectId);
-  localStorage.setItem("baseUrl", `${appInfo.baseUrl}/`);
-  localStorage.setItem("parseAppId", appInfo.appId);
-  localStorage.setItem("appLogo", appInfo.applogo);
-  localStorage.setItem("appVersion", appInfo.version);
-  localStorage.removeItem("userSettings");
-  localStorage.setItem("userSettings", JSON.stringify(appInfo.settings));
-  localStorage.setItem("appTitle", appInfo.appTitle);
-  localStorage.setItem("fev_Icon", appInfo.fev_Icon);
-  // console.log("response ", response);
-  dispatch({ type: "FATCH_APPINFO", payload: appInfo });
-};
-
-//for simple login
-export const login = (username, password) => async (dispatch) => {
-  let res = {};
-  let baseUrl = localStorage.getItem("baseUrl");
-  let parseAppId = localStorage.getItem("parseAppId");
-  try {
-    await Parse.User.logIn(username, password).then(
-      async function (res1) {
-        var resultjson = res1.toJSON();
-        res = res1.toJSON();
-        localStorage.setItem("userEmail", username);
-        localStorage.setItem("username", resultjson.name);
-        localStorage.setItem("accesstoken", resultjson.sessionToken);
-        localStorage.setItem("scriptId", true);
-        if (resultjson.ProfilePic) {
-          localStorage.setItem("profileImg", resultjson.ProfilePic);
-        } else {
-          localStorage.setItem("profileImg", "");
-        }
-        let url = `${baseUrl}functions/UserGroups`;
-        const headers = {
-          "Content-Type": "application/json",
-          "X-Parse-Application-Id": parseAppId,
-          sessionToken: resultjson.sessionToken
-        };
-
-        let body = {
-          appname: localStorage.getItem("domain")
-        };
-        let userGroup = "",
-          userGroup1 = "";
-        await axios
-          .post(url, JSON.stringify(body), { headers: headers })
-          .then(async (response) => {
-            userGroup = response.data.result[0];
-            userGroup1 = response.data.result[1];
-            localStorage.setItem("_userGroup", userGroup);
-          });
-
-        let appSetings = JSON.parse(localStorage.getItem("userSettings"));
-        let defaultmenuid = "",
-          PageLanding = "",
-          pageType = "";
-
-        appSetings.forEach(async (element) => {
-          if (`${localStorage.getItem("_appName")}_appeditor` === userGroup) {
-            if (element.role === userGroup1) {
-              defaultmenuid = element.menuId;
-              PageLanding = element.pageId;
-              pageType = element.pageType;
-              localStorage.setItem("PageLanding", PageLanding);
-              localStorage.setItem("defaultmenuid", defaultmenuid);
-              localStorage.setItem("pageType", pageType);
-              let _role = userGroup1.replace(
-                `${localStorage.getItem("_appName")}_`,
-                ""
-              );
-              if (userGroup1) {
-                localStorage.setItem("_user_role", _role);
-              } else {
-                localStorage.setItem("_user_role", _role);
-              }
-            }
-          } else if (element.role === userGroup) {
-            defaultmenuid = element.menuId;
-            PageLanding = element.pageId;
-            pageType = element.pageType;
-            localStorage.setItem("PageLanding", PageLanding);
-            localStorage.setItem("defaultmenuid", defaultmenuid);
-            localStorage.setItem("pageType", pageType);
-            localStorage.setItem("extended_class", element.extended_class);
-            let _role = userGroup.replace(
-              `${localStorage.getItem("domain")}_`,
-              ""
-            );
-            if (userGroup) {
-              localStorage.setItem("_user_role", _role);
-            } else {
-              localStorage.setItem("_user_role", _role);
-            }
-            try {
-              const currentUser = Parse.User.current();
-              await Parse.Cloud.run("getUserDetails", {
-                email: currentUser.get("email")
-              }).then(
-                (results) => {
-                  let userinfo = results.toJSON();
-                  if (userinfo.TenantId) {
-                    localStorage.setItem("TenetId", userinfo.TenantId.objectId);
-                  }
-                  //  console.log("tour found", results);
-                },
-                (error) => {
-                  console.error("Error while fetching tour", error);
-                }
-              );
-            } catch (error) {
-              console.log("err ", error);
-            }
-          }
-        });
-
-        dispatch({ type: "APP_LOGIN", payload: res });
-
-        if (pageType !== "") {
-          window.location = `/${pageType}/${PageLanding}`;
-        } else {
-          alert("You dont have access to this application.");
-          localStorage.setItem("accesstoken", null);
-        }
-      },
-      function () {
-        alert("Invalid Login");
-        localStorage.setItem("accesstoken", null);
-      }
-    );
-  } catch (err) {
-    console.log(err);
-    alert("You dont have access to this application.");
-    localStorage.setItem("accesstoken", null);
-  }
-};
-
-//for reset password
-export const forgetPassword = (username) => async () => {
-  try {
-    await Parse.User.requestPasswordReset(username).then(
-      async function (res1) {
-        // var resultjson = res1;
-        // console.log("post data", resultjson.length);
-        if (res1.data === undefined) {
-          alert("Reset password link has been sent to your email id ");
-        }
-      },
-      function () {
-        // alert("Password Reset Done")
-      }
-    );
-  } catch (err) {
-    console.log(err);
-  }
-};
-
-// Role field wizard
-export const fetchRoleEnum = (name) => async (dispatch) => {
-  let response = [];
-  let baseUrl = localStorage.getItem("baseUrl");
-  let parseAppId = localStorage.getItem("parseAppId");
-  try {
-    let url = `${baseUrl}roles?where={"name":{"$regex":"${name}","$ne":"${localStorage.getItem(
-      "domain"
-    )}_appeditor"}}`;
-    const headers = {
-      "Content-Type": "application/json",
-      "X-Parse-Application-Id": parseAppId
-    };
-    await axios.get(url, { headers: headers }).then((res) => {
-      let temp = [];
-      res.data.results.forEach((x) => {
-        temp.push(x["name"]);
-      });
-      response = temp;
-    });
-  } catch (e) {
-    console.error("Problem", e);
-  }
-  dispatch({ type: "FETCH_ROLE", payload: response });
-};
-
-export const showTenantName = (name) => async (dispatch) => {
-  dispatch({ type: "SHOW_TENANT", payload: name || null });
-};
-
-export const save_tourSteps = (steps) => async (dispatch) => {
-  dispatch({ type: "SAVE_TOURSTEPS", payload: steps });
-};
-
-export const remove_tourSteps = () => async (dispatch) => {
-  dispatch({ type: "REMOVE_TOURSTEPS", payload: [] });
-};

apps/OpenSign/src/redux/reducers/ShowTenant.js

@@ -1,9 +1,14 @@
-const ShowTenant = (state = "", action) => {
-  switch (action.type) {
-    case "SHOW_TENANT":
+import { createSlice } from "@reduxjs/toolkit";
+
+const showTenantSlice = createSlice({
+  name: "showTenant",
+  initialState: "",
+  reducers: {
+    showTenant: (state, action) => {
       return action.payload;
-    default:
-      return state;
-  }
-};
-export default ShowTenant;
+    },
+  },
+});
+
+export const { showTenant } = showTenantSlice.actions;
+export default showTenantSlice.reducer;

apps/OpenSign/src/redux/reducers/TourStepsReducer.js

@@ -1,11 +1,17 @@
-const tourStepReducer = (state = "", action) => {
-  switch (action.type) {
-    case "SAVE_TOURSTEPS":
+import { createSlice } from "@reduxjs/toolkit";
+
+const tourStepSlice = createSlice({
+  name: "tourStep",
+  initialState: [],
+  reducers: {
+    saveTourSteps: (state, action) => {
       return action.payload;
-    case "REMOVE_TOURSTEPS":
+    },
+    removeTourSteps: () => {
       return [];
-    default:
-      return state;
+    }
   }
-};
-export default tourStepReducer;
+});
+
+export const { saveTourSteps, removeTourSteps } = tourStepSlice.actions;
+export default tourStepSlice.reducer;

apps/OpenSign/src/redux/reducers/index.js

@@ -1,12 +1,10 @@
 import { combineReducers } from "redux";
 import infoReducer from "./infoReducer";
-import loginReducer from "./loginReducer";
 import ShowTenant from "./ShowTenant";
 import TourStepsReducer from "./TourStepsReducer";
 
 export default combineReducers({
   appInfo: infoReducer,
-  login: loginReducer,
-  ShowTenant,
-  TourSteps: TourStepsReducer
+  TourSteps: TourStepsReducer,
+  ShowTenant
 });

apps/OpenSign/src/redux/reducers/infoReducer.js

@@ -1,9 +1,24 @@
-const infoReducer = (state = {}, action) => {
-  switch (action.type) {
-    case "FATCH_APPINFO":
-      return action.payload;
-    default:
-      return state;
+import { createSlice } from "@reduxjs/toolkit";
+import { appInfo } from "../../constant/appinfo";
+
+const infoSlice = createSlice({
+  name: "info",
+  initialState: {},
+  reducers: {
+    fetchAppInfo: () => {
+      localStorage.setItem("_appName", appInfo.appname);
+      localStorage.setItem("_app_objectId", appInfo.objectId);
+      localStorage.setItem("baseUrl", `${appInfo.baseUrl}/`);
+      localStorage.setItem("parseAppId", appInfo.appId);
+      localStorage.setItem("appLogo", appInfo.applogo);
+      localStorage.setItem("appVersion", appInfo.version);
+      localStorage.removeItem("userSettings");
+      localStorage.setItem("userSettings", JSON.stringify(appInfo.settings));
+      localStorage.setItem("appTitle", appInfo.appTitle);
+      localStorage.setItem("fev_Icon", appInfo.fev_Icon);
+      return appInfo;
+    }
   }
-};
-export default infoReducer;
+});
+export const { fetchAppInfo } = infoSlice.actions;
+export default infoSlice.reducer;

apps/OpenSign/src/redux/reducers/loginReducer.js

@@ -1,9 +0,0 @@
-const loginReducer = (state = {}, action) => {
-  switch (action.type) {
-    case "APP_LOGIN":
-      return action.payload;
-    default:
-      return state;
-  }
-};
-export default loginReducer;

apps/OpenSign/src/redux/store.js

@@ -1,5 +1,16 @@
-import { createStore, applyMiddleware } from "redux";
-import thunk from "redux-thunk";
-import reducers from "./reducers";
+// import { createStore, applyMiddleware } from "redux";
+// import thunk from "redux-thunk";
+// import reducers from "./reducers";
 
-export const store = createStore(reducers, applyMiddleware(thunk));
+// export const store = createStore(reducers, applyMiddleware(thunk));
+import { configureStore } from "@reduxjs/toolkit";
+import infoReducer from "./reducers/infoReducer";
+import ShowTenant from "./reducers/ShowTenant";
+import TourStepsReducer from "./reducers/TourStepsReducer";
+export const store = configureStore({
+  reducer: {
+    appInfo: infoReducer,
+    TourSteps: TourStepsReducer,
+    ShowTenant
+  }
+});

apps/OpenSign/src/styles/AddUser.css

@@ -60,6 +60,7 @@
   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;
@@ -75,3 +76,87 @@
   outline: none;
   margin-left: 8px;
 }
+
+.validationlist {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  appearance: none;
+  -moz-appearance: "none";
+  -webkit-appearance: "none";
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAnUlEQVR4nO2QMQrCQBBFX51NbWMp2uox7Gw8h22uYEguIZNKyB0lMIElTNzdGBvdB8PC8Gces5DJ/Cxn4Aa4QM5pbsgncQF6rQYoZ3IFcPey11jByRsaqzYuctqfZo8xki3QBURuRtDpfBQ74GEsaYHN5It8wYFEhgExlj2NniwRhC7qP70gRSRrCN6JZE2BJZJvCEb2QKVvJvMvvAD2WzaK/35kGAAAAABJRU5ErkJggg==");
+  background-repeat: no-repeat;
+  background-position: right 0.7rem top 50%;
+  background-size: 1rem auto;
+}
+
+
+@media (max-width: 375px) {
+  .validationlist {
+    background-position: right 0.5rem top 50%;
+  }
+}
+
+@media (min-width:375px) and (max-width: 767px) {
+  .validationlist {
+    background-position: right 1rem top 50%;
+  }
+}
+
+.warning {
+  position: absolute;
+  padding: 5px;
+  border: 1px solid black;
+  background: white;
+  width: 250px;
+  border-radius: 5px;
+  animation: inAnimation 1s ease-in-out;
+  z-index: 1;
+}
+
+.defaultvalueWarning {
+  position: absolute;
+  left: 20px;
+}
+
+.defaultvalueWarning::before {
+  content: "";
+  width: 0px;
+  height: 0px;
+  border-style: outset;
+  border-width: 0px 10px 10px 10px;
+  border-color: transparent transparent black transparent;
+  display: inline-block;
+  position: absolute;
+  top: -29%;
+  left: 0;
+  right: 75%;
+  margin: 0 auto;
+}
+
+@keyframes inAnimation {
+  0% {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  25% {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  50% {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  75% {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+}

apps/OpenSign/src/styles/managesign.css

@@ -18,27 +18,6 @@
   z-index: 1;
 }
 
-.nameWarning {
-  position: absolute;
-  bottom: -70px;
-  left: 10px;
-}
-
-.nameWarning::before {
-  content: "";
-  width: 0px;
-  height: 0px;
-  border-style: outset;
-  border-width: 0px 10px 10px 10px;
-  border-color: transparent transparent black transparent;
-  display: inline-block;
-  position: absolute;
-  top: -29%;
-  left: 0;
-  right: 75%;
-  margin: 0 auto;
-}
-
 .signWarning {
   bottom: 70px;
   left: 50px;

apps/OpenSign/src/styles/signature.css

@@ -15,15 +15,8 @@
   border-width: 0.2px;
 }
 
-.dropdownContainer {
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-  max-height: 250px;
-}
-
-.dropdownContainer::-webkit-scrollbar {
-  display: none;
+.dragCursor {
+  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAASElEQVR4nGNgwAMkJSUbpKSkOvCpIaT5PxSTbogUQjMYMwxeIIXmVFIxA8UGDDyQGg0DnIDi6JKUlCxHMqCeZAOghjSAMD5FAKfeaURdUFxCAAAAAElFTkSuQmCC"), auto;
 }
 
 .react-datepicker__input-container {
@@ -163,7 +156,6 @@
 
 .signatureBtn {
   border: 1.5px solid #47a3ad;
-
   border-radius: 3px;
   display: flex;
   padding: 0px;
@@ -838,10 +830,18 @@ option {
   justify-content: flex-start;
 }
 
-.labelTextArea {
-  font-size: 12px;
+.labelWidthDesktop {
   min-width: 100%;
   min-height: 100%;
+}
+
+.labelWidthMobile {
+  width: 100%;
+  height: 100%;
+}
+
+.labelTextArea {
+  font-size: 12px;
   border: 1px solid #007bff;
   outline: none;
   z-index: 999;
@@ -945,7 +945,7 @@ option {
   to prevent sudden quick movement (as the
   navigation bar gets a new position at the top of the
   page (position:fixed and top:0) */
-  .stickyHead + .content {
+  .stickyHead+.content {
     padding-top: 60px;
   }
 
@@ -1174,6 +1174,7 @@ option {
   font-size: 12px;
   margin-left: 5px;
 }
+
 .defaultOptions:focus {
   outline: none;
 }
@@ -1193,6 +1194,10 @@ option {
     overflow-y: auto;
   }
 
+  .signatureBtn {
+    width: max-content;
+  }
+
   .dropdownModal {
     position: fixed;
     top: 50%;
@@ -1222,4 +1227,4 @@ option {
     min-width: 78%;
     overflow-y: auto;
   }
-}
+}

apps/OpenSignServer/cloud/customRoute/v1/routes/createDocumentwithCoordinate.js

@@ -165,29 +165,26 @@ export default async function createDocumentwithCoordinate(request, response) {
             'Signers',
             contact?.map(x => x.contactPtr)
           );
-          let updatePlaceholders = contact.map((signer, index) => {
+          let updatePlaceholders = contact.map(signer => {
             const placeHolder = [];
 
             for (const widget of signer.widgets) {
               const pageNumber = widget.page;
               const page = placeHolder.find(page => page.pageNumber === pageNumber);
-
+              const signOpt = { name: 'signature', status: 'required' };
               const widgetData = {
-                xPosition: widget.x,
-                yPosition: widget.y,
                 isStamp: widget.type === 'stamp',
                 key: randomId(),
                 isDrag: false,
-                firstXPos: widget.x,
-                firstYPos: widget.y,
-                yBottom: 0,
                 scale: 1,
                 isMobile: false,
                 zIndex: 1,
                 type: widget.type,
-                widgetValue: '',
+                options: widget.type === 'signature' ? signOpt : widget.options,
                 Width: widget.w,
                 Height: widget.h,
+                xPosition: widget.x,
+                yPosition: widget.y,
               };
 
               if (page) {

apps/OpenSignServer/cloud/customRoute/v1/routes/createTemplate.js

@@ -123,7 +123,7 @@ export default async function createTemplate(request, response) {
       }
       return response.json({
         objectId: res.id,
-        url: baseUrl.origin + '/load/signmicroapp/template/' + res.id,
+        url: baseUrl.origin + '/template/' + res.id,
       });
     } else {
       return response.status(405).json({ error: 'Invalid API Token!' });

apps/OpenSignServer/cloud/customRoute/v1/routes/createTemplatewithCoordinate.js

@@ -129,23 +129,20 @@ export default async function createTemplatewithCoordinate(request, response) {
             for (const widget of signer.widgets) {
               const pageNumber = widget.page;
               const page = placeHolder.find(page => page.pageNumber === pageNumber);
-
+              const signOpt = { name: 'signature', status: 'required' };
               const widgetData = {
-                xPosition: widget.x,
-                yPosition: widget.y,
                 isStamp: widget.type === 'stamp',
                 key: randomId(),
                 isDrag: false,
-                firstXPos: widget.x,
-                firstYPos: widget.y,
-                yBottom: 0,
                 scale: 1,
                 isMobile: false,
                 zIndex: 1,
                 type: widget.type,
-                widgetValue: '',
+                options: widget.type === 'signature' ? signOpt : widget.options,
                 Width: widget.w,
                 Height: widget.h,
+                xPosition: widget.x,
+                yPosition: widget.y,
               };
 
               if (page) {

apps/OpenSignServer/cloud/customRoute/v1/routes/draftDocument.js

@@ -14,6 +14,7 @@ export default async function draftDocument(request, response) {
   const SendinOrder = request.body.sendInOrder || false;
   // console.log('fileData ', fileData);
   const protocol = customAPIurl();
+  const baseUrl = new URL(process.env.SERVER_URL);
 
   try {
     const reqToken = request.headers['x-api-token'];
@@ -135,7 +136,7 @@ export default async function draftDocument(request, response) {
         }
         return response.json({
           objectId: res.id,
-          url: protocol + '/load/signmicroapp/placeholdersign/' + res.id,
+          url: `${baseUrl.origin}/placeholdersign/${res.id}`,
         });
       } else {
         if (request.posthog) {

apps/OpenSignServer/cloud/parsefunction/getDrive.js

@@ -2,7 +2,8 @@ import axios from 'axios';
 export default async function getDrive(request) {
   const serverUrl = process.env.SERVER_URL;
   const appId = process.env.APP_ID;
-
+  const limit = request.params.limit;
+  const skip = request.params.skip;
   const classUrl = serverUrl + '/classes/contracts_Document';
   const docId = request.params.docId;
   try {
@@ -16,9 +17,9 @@ export default async function getDrive(request) {
     if (userId) {
       let url;
       if (docId) {
-        url = `${classUrl}?where={"Folder":{"__type":"Pointer","className":"contracts_Document","objectId":"${docId}"},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"},"IsArchive":{"$ne":true}}&include=ExtUserPtr,Signers,Folder`;
+        url = `${classUrl}?where={"Folder":{"__type":"Pointer","className":"contracts_Document","objectId":"${docId}"},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"},"IsArchive":{"$ne":true}}&include=ExtUserPtr,Signers,Folder&skip=${skip}&limit=${limit}`;
       } else {
-        url = `${classUrl}?where={"Folder":{"$exists":false},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"},"IsArchive":{"$ne":true}}&include=ExtUserPtr,Signers`;
+        url = `${classUrl}?where={"Folder":{"$exists":false},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"},"IsArchive":{"$ne":true}}&include=ExtUserPtr,Signers&skip=${skip}&limit=${limit}`;
       }
       try {
         const res = await axios.get(url, {

apps/OpenSignServer/cloud/parsefunction/pdf/PDF.min.js

@@ -1,7 +1,8 @@
 import SignPDF from './SignPDF.min.cjs';
 import fs from 'node:fs';
 import axios from 'axios';
-import { plainAddPlaceholder } from 'node-signpdf/dist/helpers/index.js';
+import { pdflibAddPlaceholder } from './customSignPdf/pdflibplaceholder.min.js';
+import { PDFDocument } from 'pdf-lib';
 const serverUrl = process.env.SERVER_URL,
   APPID = process.env.APP_ID,
   masterKEY = process.env.MASTER_KEY;
@@ -15,20 +16,20 @@ async function uploadFile(e, a) {
     console.log('Err ', e), fs.unlinkSync(a);
   }
 }
-async function updateDoc(t, s, r, i, n, o) {
+async function updateDoc(t, s, r, i, o, n) {
   try {
     var d = {
-      UserPtr: { __type: 'Pointer', className: o, objectId: r },
+      UserPtr: { __type: 'Pointer', className: n, objectId: r },
       SignedUrl: s,
       Activity: 'Signed',
       ipAddress: i,
     };
     let e;
-    var l = (e = n.AuditTrail && 0 < n.AuditTrail.length ? [...n.AuditTrail, d] : [d]).filter(
+    var l = (e = o.AuditTrail && 0 < o.AuditTrail.length ? [...o.AuditTrail, d] : [d]).filter(
       e => 'Signed' === e.Activity
     );
     let a = !1;
-    !((n.Signers && 0 < n.Signers.length && l.length !== n.Signers.length) || !(a = !0));
+    !((o.Signers && 0 < o.Signers.length && l.length !== o.Signers.length) || !(a = !0));
     var c = { SignedUrl: s, AuditTrail: e, IsCompleted: a };
     await axios.put(serverUrl + '/classes/contracts_Document/' + t, c, {
       headers: {
@@ -150,9 +151,8 @@ async function sendDoctoWebhook(t, e, a, s) {
           }
         }));
 }
-async function PDF(i, n) {
+async function PDF(i) {
   try {
-    i.params.sign;
     var e = i.params.docId,
       a = i.params.userId,
       o = await axios.get(
@@ -173,125 +173,136 @@ async function PDF(i, n) {
       });
     if (!t.data || !t.data.objectId) return { status: 'error', message: 'this user not allowed!' };
     {
-      var d,
+      var n,
+        d,
         l,
-        c,
-        p = JSON.stringify({ objectId: a });
+        c = JSON.stringify({ objectId: a });
       let s, r;
       r = a
-        ? (d = await axios.get(serverUrl + '/classes/contracts_Contactbook?where=' + p, {
+        ? (n = await axios.get(serverUrl + '/classes/contracts_Contactbook?where=' + c, {
             headers: {
               'X-Parse-Application-Id': APPID,
               'X-Parse-Session-Token': i.headers.sessiontoken,
             },
-          })).data && 0 < d.data.results.length
-          ? ((s = d), 'contracts_Contactbook')
-          : ((s = await axios.get(serverUrl + '/classes/contracts_Users?where=' + p, {
+          })).data && 0 < n.data.results.length
+          ? ((s = n), 'contracts_Contactbook')
+          : ((s = await axios.get(serverUrl + '/classes/contracts_Users?where=' + c, {
               headers: { 'X-Parse-Application-Id': APPID, 'X-Parse-Master-Key': masterKEY },
             })),
             'contracts_Users')
-        : ((l = JSON.stringify({
+        : ((d = JSON.stringify({
             UserId: { __type: 'Pointer', className: '_User', objectId: t.data.objectId },
           })),
-          (c = await axios.get(serverUrl + '/classes/contracts_Users?where=' + l, {
+          (l = await axios.get(serverUrl + '/classes/contracts_Users?where=' + d, {
             headers: { 'X-Parse-Application-Id': APPID, 'X-Parse-Master-Key': masterKEY },
-          })).data && 0 < c.data.results.length
-            ? ((s = c), 'contracts_Users')
-            : ((s = await axios.get(serverUrl + '/classes/contracts_Contactbook?where=' + l, {
+          })).data && 0 < l.data.results.length
+            ? ((s = l), 'contracts_Users')
+            : ((s = await axios.get(serverUrl + '/classes/contracts_Contactbook?where=' + d, {
                 headers: {
                   'X-Parse-Application-Id': APPID,
                   'X-Parse-Session-Token': i.headers.sessiontoken,
                 },
               })),
               'contracts_Contactbook'));
-      var m = s.data.results[0].Name,
-        g = s.data.results[0].Email;
+      var p = s.data.results[0].Name,
+        m = s.data.results[0].Email;
       if (!i.params.pdfFile) return { status: 'error', message: 'pdf file not present!' };
       {
         let e = Buffer.from(i.params.pdfFile, 'base64');
-        var h = process.env.PFX_BASE64,
-          u = Buffer.from(h, 'base64'),
-          f = {
+        var g = process.env.PFX_BASE64,
+          h = Buffer.from(g, 'base64'),
+          u = {
             UserPtr: { __type: 'Pointer', className: r, objectId: s.data.results[0].objectId },
             SignedUrl: '',
             Activity: 'Signed',
             ipAddress: i.headers['x-real-ip'],
           };
         let a;
-        var y = (a =
+        var f = (a =
           o.data.AuditTrail && 0 < o.data.AuditTrail.length
-            ? [...o.data.AuditTrail, f]
-            : [f]).filter(e => 'Signed' === e.Activity);
+            ? [...o.data.AuditTrail, u]
+            : [u]).filter(e => 'Signed' === e.Activity);
         let t = !1;
         !(
-          (o.data.Signers && 0 < o.data.Signers.length && y.length !== o.data.Signers.length) ||
+          (o.data.Signers && 0 < o.data.Signers.length && f.length !== o.data.Signers.length) ||
           !(t = !0)
         );
-        var v,
+        var y,
           P,
-          b = `exported_file_${Math.floor(5e3 * Math.random())}.pdf`,
-          x = './exports/' + b,
-          U =
+          v,
+          b,
+          x,
+          w,
+          U,
+          I,
+          S,
+          A = `exported_file_${Math.floor(5e3 * Math.random())}.pdf`,
+          D = './exports/' + A,
+          E =
             (t
-              ? ((v = o.data.Signers?.map(e => e.Name + ' <' + e.Email + '>')),
+              ? ((y = o.data.Signers?.map(e => e.Name + ' <' + e.Email + '>')),
                 (e =
-                  v && 0 < v.length
-                    ? plainAddPlaceholder({
-                        pdfBuffer: e,
-                        reason: 'Digitally signed by OpenSign for ' + v?.join(', '),
+                  y && 0 < y.length
+                    ? ((P = await PDFDocument.load(e)),
+                      pdflibAddPlaceholder({
+                        pdfDoc: P,
+                        reason: 'Digitally signed by OpenSign for ' + y?.join(', '),
                         location: 'location',
-                        signatureLength: 1e4,
-                      })
-                    : plainAddPlaceholder({
-                        pdfBuffer: e,
-                        reason: 'Digitally signed by OpenSign for ' + m + ' <' + g + '>',
+                        signatureLength: 15e3,
+                      }),
+                      (v = await P.save()),
+                      Buffer.from(v))
+                    : ((b = await PDFDocument.load(e)),
+                      pdflibAddPlaceholder({
+                        pdfDoc: b,
+                        reason: 'Digitally signed by OpenSign for ' + p + ' <' + m + '>',
                         location: 'location',
-                        signatureLength: 1e4,
-                      })),
-                (P = await new SignPDF(e, u).signPDF()),
-                fs.writeFileSync(x, P))
-              : fs.writeFileSync(x, e),
-            await uploadFile(b, x));
-        if (U && U.imageUrl) {
-          const n = await updateDoc(
-            i.params.docId,
-            U.imageUrl,
-            s.data.results[0].objectId,
-            i.headers['x-real-ip'],
-            o.data,
-            r
-          );
-          var I,
-            w = {
-              url: U.imageUrl,
+                        signatureLength: 15e3,
+                      }),
+                      (x = await b.save()),
+                      Buffer.from(x))),
+                (w = await new SignPDF(e, h).signPDF()),
+                fs.writeFileSync(D, w))
+              : fs.writeFileSync(D, e),
+            await uploadFile(A, D));
+        if (E && E.imageUrl)
+          return (
+            (U = await updateDoc(
+              i.params.docId,
+              E.imageUrl,
+              s.data.results[0].objectId,
+              i.headers['x-real-ip'],
+              o.data,
+              r
+            )),
+            (I = {
+              url: E.imageUrl,
               sender: { Mail: o.data.ExtUserPtr.Email, Name: o.data.ExtUserPtr.Name },
               pdfName: o.data.Name,
-              receiver: g,
-            };
-          return (
+              receiver: m,
+            }),
             o.data.IsSendMail && !1 === o.data.IsSendMail
               ? console.log("don't send mail")
-              : sendMail(w),
-            sendDoctoWebhook(o, U.imageUrl, 'signed', s?.data.results?.[0]),
-            n &&
-              n.isCompleted &&
-              ((I = {
-                url: U.imageUrl,
+              : sendMail(I),
+            sendDoctoWebhook(o, E.imageUrl, 'signed', s?.data.results?.[0]),
+            U &&
+              U.isCompleted &&
+              ((S = {
+                url: E.imageUrl,
                 sender: { Mail: o.data.ExtUserPtr.Email, Name: 'OpenSign™' },
                 pdfName: o.data.Name,
                 receiver: o.data.ExtUserPtr.Email,
               }),
               o.data.IsSendMail && !1 === o.data.IsSendMail
                 ? console.log("don't send mail")
-                : sendCompletedMail(I),
-              sendDoctoWebhook(o, U.imageUrl, 'completed')),
-            fs.unlinkSync(x),
-            console.log('New Signed PDF created called: ' + x),
-            'success' === n.message
-              ? { status: 'success', data: U.imageUrl }
+                : sendCompletedMail(S),
+              sendDoctoWebhook(o, E.imageUrl, 'completed')),
+            fs.unlinkSync(D),
+            console.log('New Signed PDF created called: ' + D),
+            'success' === U.message
+              ? { status: 'success', data: E.imageUrl }
               : { status: 'error', message: 'please provide required parameters!' }
           );
-        }
       }
     }
   } catch (e) {

apps/OpenSignServer/cloud/parsefunction/pdf/customSignPdf/SignPdfError.min.js

@@ -1 +1,20 @@
-const ERROR_TYPE_UNKNOWN=1,ERROR_TYPE_INPUT=2,ERROR_TYPE_PARSE=3,ERROR_VERIFY_SIGNATURE=4;class SignPdfError extends Error{constructor(R,E=ERROR_TYPE_UNKNOWN){super(R),this.type=E}}SignPdfError.TYPE_UNKNOWN=ERROR_TYPE_UNKNOWN,SignPdfError.TYPE_INPUT=ERROR_TYPE_INPUT,SignPdfError.TYPE_PARSE=ERROR_TYPE_PARSE,SignPdfError.VERIFY_SIGNATURE=ERROR_VERIFY_SIGNATURE;export default SignPdfError;export{ERROR_TYPE_UNKNOWN,ERROR_TYPE_INPUT,ERROR_TYPE_PARSE,ERROR_VERIFY_SIGNATURE};
+const ERROR_TYPE_UNKNOWN = 1,
+  ERROR_TYPE_INPUT = 2,
+  ERROR_TYPE_PARSE = 3,
+  ERROR_VERIFY_SIGNATURE = 4;
+class SignPdfError extends Error {
+  constructor(R, E = ERROR_TYPE_UNKNOWN) {
+    super(R), (this.type = E);
+  }
+}
+(SignPdfError.TYPE_UNKNOWN = ERROR_TYPE_UNKNOWN),
+  (SignPdfError.TYPE_INPUT = ERROR_TYPE_INPUT),
+  (SignPdfError.TYPE_PARSE = ERROR_TYPE_PARSE),
+  (SignPdfError.VERIFY_SIGNATURE = ERROR_VERIFY_SIGNATURE);
+export {
+  ERROR_TYPE_UNKNOWN,
+  ERROR_TYPE_INPUT,
+  ERROR_TYPE_PARSE,
+  ERROR_VERIFY_SIGNATURE,
+  SignPdfError,
+};

apps/OpenSignServer/cloud/parsefunction/pdf/customSignPdf/pdflibplaceholder.min.js

@@ -0,0 +1,87 @@
+import {
+  DEFAULT_BYTE_RANGE_PLACEHOLDER,
+  DEFAULT_SIGNATURE_LENGTH,
+  SUBFILTER_ADOBE_PKCS7_DETACHED,
+} from './const.min.js';
+import { SignPdfError } from './SignPdfError.min.js';
+import {
+  PDFArray,
+  PDFDict,
+  PDFHexString,
+  PDFName,
+  PDFNumber,
+  PDFInvalidObject,
+  PDFString,
+} from 'pdf-lib';
+const pdflibAddPlaceholder = ({
+  pdfDoc: e = void 0,
+  pdfPage: o = void 0,
+  reason: t,
+  contactInfo: r = 'emailfromp1289@gmail.com',
+  name: i = 'Name from p12',
+  location: n,
+  signingTime: a = void 0,
+  signatureLength: P = DEFAULT_SIGNATURE_LENGTH,
+  byteRangePlaceholder: F = DEFAULT_BYTE_RANGE_PLACEHOLDER,
+  subFilter: D = SUBFILTER_ADOBE_PKCS7_DETACHED,
+  widgetRect: f = [0, 0, 0, 0],
+  appName: g = void 0,
+}) => {
+  if (void 0 === e && void 0 === o)
+    throw new SignPdfError('PDFDoc or PDFPage must be set.', SignPdfError.TYPE_INPUT);
+  var e = e ?? o.doc,
+    o = o ?? e.getPages()[0],
+    m = PDFArray.withContext(e.context),
+    F =
+      (m.push(PDFNumber.of(0)),
+      m.push(PDFName.of(F)),
+      m.push(PDFName.of(F)),
+      m.push(PDFName.of(F)),
+      PDFHexString.of(String.fromCharCode(0).repeat(P))),
+    P = g ? { App: { Name: g } } : {},
+    g = e.context.obj({
+      Type: 'Sig',
+      Filter: 'Adobe.PPKLite',
+      SubFilter: D,
+      ByteRange: m,
+      Contents: F,
+      Reason: PDFString.of(t),
+      M: PDFString.fromDate(a ?? new Date()),
+      ContactInfo: PDFString.of(r),
+      Name: PDFString.of(i),
+      Location: PDFString.of(n),
+      Prop_Build: { Filter: { Name: 'Adobe.PPKLite' }, ...P },
+    }),
+    D = new Uint8Array(g.sizeInBytes()),
+    m = (g.copyBytesInto(D, 0), PDFInvalidObject.of(D)),
+    F = e.context.register(m);
+  const s = PDFArray.withContext(e.context);
+  f.forEach(e => s.push(PDFNumber.of(e)));
+  (t = e.context.formXObject([], { BBox: f, Resources: {} })),
+    (a = e.context.obj({
+      Type: 'Annot',
+      Subtype: 'Widget',
+      FT: 'Sig',
+      Rect: s,
+      V: F,
+      T: PDFString.of('Signature1'),
+      F: 4,
+      P: o.ref,
+      AP: { N: e.context.register(t) },
+    })),
+    (r = e.context.register(a));
+  let c = o.node.lookupMaybe(PDFName.of('Annots'), PDFArray),
+    d =
+      ((c = void 0 === c ? e.context.obj([]) : c).push(r),
+      o.node.set(PDFName.of('Annots'), c),
+      e.catalog.lookupMaybe(PDFName.of('AcroForm'), PDFDict));
+  void 0 === d &&
+    ((d = e.context.obj({ Fields: [] })),
+    (i = e.context.register(d)),
+    e.catalog.set(PDFName.of('AcroForm'), i));
+  let N;
+  N = d.has(PDFName.of('SigFlags')) ? d.get(PDFName.of('SigFlags')) : PDFNumber.of(0);
+  n = PDFNumber.of(3 | N.asNumber());
+  d.set(PDFName.of('SigFlags'), n), d.get(PDFName.of('Fields')).push(r);
+};
+export { pdflibAddPlaceholder };

apps/OpenSignServer/cloud/parsefunction/reportsJson.js

@@ -11,11 +11,7 @@ export default function reportJson(id, userId) {
           IsCompleted: { $ne: true },
           IsDeclined: { $ne: true },
           IsArchive: { $ne: true },
-          $or: [
-            { Signers: { $eq: [] } },
-            { Signers: null },
-            { Signers: { $exists: true }, Placeholders: null },
-          ],
+          SignedUrl: { $exists: false },
           CreatedBy: {
             __type: 'Pointer',
             className: '_User',
@@ -33,6 +29,7 @@ export default function reportJson(id, userId) {
           'Signers.Phone',
         ],
       };
+
     // Need your sign report
     case '4Hhwbp482K':
       return {
@@ -273,11 +270,7 @@ export default function reportJson(id, userId) {
           IsCompleted: { $ne: true },
           IsDeclined: { $ne: true },
           IsArchive: { $ne: true },
-          $or: [
-            { Signers: { $eq: [] } },
-            { Signers: null },
-            { Signers: { $exists: true }, Placeholders: null },
-          ],
+          SignedUrl: { $exists: false },
           CreatedBy: {
             __type: 'Pointer',
             className: '_User',

apps/OpenSignServer/cloud/parsefunction/usersignup.js

@@ -63,13 +63,12 @@ export default async function (request) {
         sessionToken: user.sessionToken, //localStorage.getItem("accesstoken"),
       };
       let body = {
-        appName: extClass, //props.appInfo.appname,
-        roleName: userDetails.role, //props.appInfo.defaultRole,
+        appName: extClass,
+        roleName: userDetails.role,
         userId: user.id,
       };
       let role = await axios.post(roleurl, body, { headers: headers });
       // console.log("role ", role);
-      // props.appInfo.defaultRole
       const partnerCls = Parse.Object.extend("partners_Tenant");
       const partnerQuery = new partnerCls();
       partnerQuery.set("UserId", {
@@ -111,7 +110,7 @@ export default async function (request) {
         className: "_User",
         objectId: user.id,
       });
-      newObj.set("UserRole", userDetails.role); // props.appInfo.defaultRole
+      newObj.set("UserRole", userDetails.role);
       newObj.set("Email", userDetails.email);
       newObj.set("Name", userDetails.name);
       newObj.set("Phone", userDetails.phone);

apps/OpenSignServer/databases/migrations/20240313095456-update_tour_dashboard.cjs

@@ -0,0 +1,219 @@
+/**
+ *
+ * @param {Parse} Parse
+ */
+exports.up = async Parse => {
+  // TODO: set className here
+  const className = 'w_dashboard';
+  const dashboard = new Parse.Query(className);
+  const updatedashboard = await dashboard.get('35KBoSgoAK');
+  updatedashboard.set('rows', [
+    {
+      columns: [
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'Card',
+            icon: 'fas fa-signature',
+            bgColor: '#f0058e',
+            label: 'Need your Signature',
+            description: null,
+            data: {
+              id: 'e04ee9dc-932d-6b80-0202-703fd154eb74',
+              queryType: '',
+              class: 'contracts_Document',
+              query:
+                'where={"$and":[{"AuditTrail.UserPtr":{"$ne":{"__type":"Pointer","className": "contracts_Users","objectId":"#objectId#"}}},{"AuditTrail.Activity":{"$ne":"Signed"}}],"Signers":{"$in":[{"__type":"Pointer","className":"contracts_Users","objectId":"#objectId#"}]},"IsDeclined":{"$ne":true},"IsCompleted":{"$ne":true},"Type":{"$ne":"Folder"},"Placeholders":{"$ne":null},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              key: 'count',
+              Redirect_type: 'Report',
+              Redirect_id: '4Hhwbp482K',
+              tourSection: 'tourcard1',
+              tourMessage:
+                'Clicking on this card will take you to the list of documents awaiting your review.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'Card',
+            icon: 'fas fa-sign-out-alt',
+            bgColor: '#g0058e',
+            label: 'Out for signatures',
+            description: null,
+            data: {
+              id: 'c1935cc0-28d4-3d73-b72a-8c1e3d18a17f',
+              queryType: '',
+              class: 'contracts_Document',
+              query:
+                'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              key: 'count',
+              Redirect_type: 'Report',
+              Redirect_id: '1MwEuxLEkF',
+              tourSection: 'tourcard2',
+              tourMessage:
+                'Clicking on this card will take you to a list of documents awaiting signature.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'report',
+            reportId: '5Go51Q7T8r',
+            data: {
+              tourSection: 'tourreport1',
+              tourMessage: 'This is a list of documents that are waiting for your signature.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'report',
+            reportId: 'd9k3UfYHBc',
+            data: {
+              tourSection: 'tourreport2',
+              tourMessage:
+                "This is a list of documents you've sent to other parties for signature.",
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '12',
+          collg: '12',
+          widget: {
+            type: 'report',
+            reportId: 'kC5mfynCi4',
+            data: {
+              tourSection: 'tourreport3',
+              tourMessage:
+                'This are documents you have started but have not finalized for sending.',
+            },
+          },
+        },
+      ],
+    },
+  ]);
+
+  return updatedashboard.save();
+};
+
+/**
+ *
+ * @param {Parse} Parse
+ */
+exports.down = async Parse => {
+  const className = 'w_dashboard';
+  const dashboard = new Parse.Query(className);
+  const revertdashboard = await dashboard.get('35KBoSgoAK');
+  revertdashboard.set('rows', [
+    {
+      columns: [
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'Card',
+            icon: 'fas fa-signature',
+            bgColor: '#f0058e',
+            label: 'Need your Signature',
+            description: null,
+            data: {
+              id: 'e04ee9dc-932d-6b80-0202-703fd154eb74',
+              queryType: '',
+              class: 'contracts_Document',
+              query:
+                'where={"$and":[{"AuditTrail.UserPtr":{"$ne":{"__type":"Pointer","className": "contracts_Users","objectId":"#objectId#"}}},{"AuditTrail.Activity":{"$ne":"Signed"}}],"Signers":{"$in":[{"__type":"Pointer","className":"contracts_Users","objectId":"#objectId#"}]},"IsDeclined":{"$ne":true},"IsCompleted":{"$ne":true},"Type":{"$ne":"Folder"},"Placeholders":{"$ne":null},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              key: 'count',
+              Redirect_type: 'Report',
+              Redirect_id: '4Hhwbp482K',
+              tourSection: 'tourcard1',
+              tourMessage:
+                'This card shows the aggregate count of documents that are awaiting your signature. Clicking on this card will seamlessly take you to the detailed list of such documents for your review and action.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'Card',
+            icon: 'fas fa-sign-out-alt',
+            bgColor: '#g0058e',
+            label: 'Out for signatures',
+            description: null,
+            data: {
+              id: 'c1935cc0-28d4-3d73-b72a-8c1e3d18a17f',
+              queryType: '',
+              class: 'contracts_Document',
+              query:
+                'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              key: 'count',
+              Redirect_type: 'Report',
+              Redirect_id: '1MwEuxLEkF',
+              tourSection: 'tourcard2',
+              tourMessage:
+                "This card indicates the total number of documents you've sent out for signatures. A single click on this card will navigate you to a comprehensive list of these documents, allowing you to monitor their status.",
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'report',
+            reportId: '5Go51Q7T8r',
+            data: {
+              tourSection: 'tourreport1',
+              tourMessage:
+                'Here lies a curated list of documents that are pending your signature. These are requests from other users that require your immediate attention for completion.',
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '6',
+          collg: '6',
+          widget: {
+            type: 'report',
+            reportId: 'd9k3UfYHBc',
+            data: {
+              tourSection: 'tourreport2',
+              tourMessage:
+                "This area displays all the documents you've dispatched for signatures from other parties. It serves as a real-time tracker for documents pending external approval.",
+            },
+          },
+        },
+        {
+          colxs: '12',
+          colmd: '12',
+          collg: '12',
+          widget: {
+            type: 'report',
+            reportId: 'kC5mfynCi4',
+            data: {
+              tourSection: 'tourreport3',
+              tourMessage:
+                "In this section, you'll find your draft documents awaiting completion. These are the documents you've initiated but haven't yet finalized for sending.",
+            },
+          },
+        },
+      ],
+    },
+  ]);
+
+  return revertdashboard.save();
+};

apps/OpenSignServer/databases/migrations/20240315095256-change_forms_menu.cjs

@@ -0,0 +1,690 @@
+/**
+ *
+ * @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: 'fas fa-pen-nib',
+      title: 'Sign yourself',
+      target: '_self',
+      pageType: 'form',
+      description: '',
+      objectId: 'sHAnZphf69',
+    },
+    {
+      icon: 'fa-solid fa-paper-plane',
+      title: 'Request signatures',
+      target: '_self',
+      pageType: 'form',
+      description: '',
+      objectId: '8mZzFxbG1z',
+    },
+    {
+      icon: 'far fa-newspaper',
+      title: 'Templates',
+      target: '_self',
+      pageType: null,
+      description: null,
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-file-signature',
+          title: 'Create template',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'template',
+        },
+        {
+          icon: 'fa-solid fa-file-contract',
+          title: 'Manage templates',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '6TeaPr321t',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-folder',
+      title: 'OpenSign™ Drive',
+      target: '_self',
+      pageType: '',
+      description: '',
+      objectId: 'opensigndrive',
+    },
+    {
+      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: '',
+          description: '',
+          objectId: 'managesign',
+        },
+        {
+          icon: 'fa-solid fa-key',
+          title: 'API Token',
+          target: '_self',
+          pageType: 'generatetoken',
+          description: '',
+          objectId: '',
+        },
+        {
+          icon: 'fa-solid fa-globe',
+          title: 'Webhook',
+          target: '_self',
+          pageType: 'webhook',
+          description: '',
+          objectId: '',
+        },
+      ],
+    },
+  ]);
+
+  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: 'fas fa-pen-nib',
+      title: 'Sign yourself',
+      target: '_self',
+      pageType: 'form',
+      description: '',
+      objectId: 'sHAnZphf69',
+    },
+    {
+      icon: 'fa-solid fa-paper-plane',
+      title: 'Request signatures',
+      target: '_self',
+      pageType: 'form',
+      description: '',
+      objectId: '8mZzFxbG1z',
+    },
+    {
+      icon: 'far fa-newspaper',
+      title: 'Templates',
+      target: '_self',
+      pageType: null,
+      description: null,
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-file-signature',
+          title: 'Create template',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'template',
+        },
+        {
+          icon: 'fa-solid fa-file-contract',
+          title: 'Manage templates',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '6TeaPr321t',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-folder',
+      title: 'OpenSign™ Drive',
+      target: '_self',
+      pageType: '',
+      description: '',
+      objectId: 'opensigndrive',
+    },
+    {
+      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: '',
+          description: '',
+          objectId: 'managesign',
+        },
+        {
+          icon: 'far fa-user',
+          title: 'Add User',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'lM0xRnM3iE',
+        },
+        {
+          icon: 'fa-solid fa-key',
+          title: 'API Token',
+          target: '_self',
+          pageType: 'generatetoken',
+          description: '',
+          objectId: '',
+        },
+        {
+          icon: 'fa-solid fa-globe',
+          title: 'Webhook',
+          target: '_self',
+          pageType: 'webhook',
+          description: '',
+          objectId: '',
+        },
+      ],
+    },
+  ]);
+  // 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: 'fa-solid fa-paper-plane',
+          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: 'fa-solid fa-file-contract',
+      title: 'Templates',
+      target: '_self',
+      pageType: 'report',
+      description: '',
+      objectId: '6TeaPr321t',
+    },
+    {
+      icon: 'fas fa-folder',
+      title: 'OpenSign™ Drive',
+      target: '_self',
+      pageType: '',
+      description: '',
+      objectId: 'opensigndrive',
+    },
+    {
+      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: '',
+          description: '',
+          objectId: 'managesign',
+        },
+        {
+          icon: 'fa-solid fa-key',
+          title: 'API Token',
+          target: '_self',
+          pageType: 'generatetoken',
+          description: '',
+          objectId: '',
+        },
+        {
+          icon: 'fa-solid fa-globe',
+          title: 'Webhook',
+          target: '_self',
+          pageType: 'webhook',
+          description: '',
+          objectId: '',
+        },
+      ],
+    },
+  ]);
+
+  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: 'fa-solid fa-paper-plane',
+          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: 'fa-solid fa-file-contract',
+      title: 'Templates',
+      target: '_self',
+      pageType: 'report',
+      description: '',
+      objectId: '6TeaPr321t',
+    },
+    {
+      icon: 'fas fa-folder',
+      title: 'OpenSign™ Drive',
+      target: '_self',
+      pageType: '',
+      description: '',
+      objectId: 'opensigndrive',
+    },
+    {
+      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: '',
+          description: '',
+          objectId: 'managesign',
+        },
+        {
+          icon: 'far fa-user',
+          title: 'Add User',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'lM0xRnM3iE',
+        },
+        {
+          icon: 'fa-solid fa-key',
+          title: 'API Token',
+          target: '_self',
+          pageType: 'generatetoken',
+          description: '',
+          objectId: '',
+        },
+        {
+          icon: 'fa-solid fa-globe',
+          title: 'Webhook',
+          target: '_self',
+          pageType: 'webhook',
+          description: '',
+          objectId: '',
+        },
+      ],
+    },
+  ]);
+
+  const batch = [revertUserMenu, revertAdminMenu];
+  return Parse.Object.saveAll(batch, { useMasterKey: true });
+};

apps/OpenSignServer/index.js

@@ -54,26 +54,39 @@ if (process.env.USE_LOCAL !== 'TRUE') {
 let transporterMail;
 let mailgunClient;
 let mailgunDomain;
-
+let isMailAdapter = false;
 if (process.env.SMTP_ENABLE) {
-  transporterMail = createTransport({
-    host: process.env.SMTP_HOST,
-    port: process.env.SMTP_PORT || 465,
-    secure: process.env.SMTP_SECURE || true,
-    auth: {
-      user: process.env.SMTP_USER_EMAIL,
-      pass: process.env.SMTP_PASS,
-    },
-  });
+  try {
+    transporterMail = createTransport({
+      host: process.env.SMTP_HOST,
+      port: process.env.SMTP_PORT || 465,
+      secure: process.env.SMTP_SECURE || true,
+      auth: {
+        user: process.env.SMTP_USER_EMAIL,
+        pass: process.env.SMTP_PASS,
+      },
+    });
+    await transporterMail.verify();
+    isMailAdapter = true;
+  } catch (err) {
+    isMailAdapter = false;
+    console.log('Please provide valid SMTP credentials');
+  }
 } else if (process.env.MAILGUN_API_KEY) {
-  const mailgun = new Mailgun(formData);
-  mailgunClient = mailgun.client({
-    username: 'api',
-    key: process.env.MAILGUN_API_KEY,
-  });
-
-  mailgunDomain = process.env.MAILGUN_DOMAIN;
+  try {
+    const mailgun = new Mailgun(formData);
+    mailgunClient = mailgun.client({
+      username: 'api',
+      key: process.env.MAILGUN_API_KEY,
+    });
+    mailgunDomain = process.env.MAILGUN_DOMAIN;
+    isMailAdapter = true;
+  } catch (error) {
+    isMailAdapter = false;
+    console.log('Please provide valid Mailgun credentials');
+  }
 }
+
 export const config = {
   databaseURI:
     process.env.DATABASE_URI || process.env.MONGODB_URI || 'mongodb://localhost:27017/dev',
@@ -82,17 +95,18 @@ export const config = {
   },
   appId: process.env.APP_ID || 'myAppId',
   maxLimit: 500,
+  maxUploadSize: '30mb',
   masterKey: process.env.MASTER_KEY, //Add your master key here. Keep it secret!
   masterKeyIps: ['0.0.0.0/0', '::/0'], // '::1'
-  serverURL: process.env.SERVER_URL || 'http://localhost:8080/app', // Don't forget to change to https if needed
-  verifyUserEmails: process.env.SMTP_ENABLE || process.env.MAILGUN_API_KEY ? true : false,
+  serverURL: 'http://localhost:8080/app', // Don't forget to change to https if needed
+  verifyUserEmails: isMailAdapter === true ? true : false,
   publicServerURL: process.env.SERVER_URL || 'http://localhost:8080/app',
   // Your apps name. This will appear in the subject and body of the emails that are sent.
   appName: 'Open Sign',
   allowClientClassCreation: false,
   allowExpiredAuthDataToken: false,
   encodeParseObjectInCloudFunction: true,
-  ...(process.env.SMTP_ENABLE || process.env.MAILGUN_API_KEY
+  ...(isMailAdapter === true
     ? {
         emailAdapter: {
           module: 'parse-server-api-mail-adapter',

apps/OpenSignServer/package.json

@@ -18,46 +18,43 @@
     "watch": "nodemon index.js"
   },
   "dependencies": {
-    "aws-sdk": "^2.1569.0",
-    "axios": "1.6.7",
+    "aws-sdk": "^2.1581.0",
+    "axios": "^1.6.8",
     "cors": "^2.8.5",
-    "crypto": "^1.0.1",
-    "dotenv": "^16.0.3",
-    "express": "4.18.2",
+    "dotenv": "^16.4.5",
+    "express": "^4.18.3",
     "express-sse": "^0.5.3",
     "form-data": "^4.0.0",
     "generate-api-key": "^1.0.2",
     "jsonschema": "^1.4.1",
-    "mailgun.js": "^9.3.0",
-    "mongoose": "^8.2.0",
+    "mailgun.js": "^10.2.1",
+    "mongoose": "^8.2.2",
     "multer": "^1.4.5-lts.1",
-    "multer-s3": "^2.10.0",
+    "multer-s3": "^3.0.1",
     "node-forge": "^1.3.1",
     "node-signpdf": "^1.5.1",
-    "nodemailer": "^6.9.11",
-    "parse": "4.3.1",
+    "nodemailer": "^6.9.12",
+    "parse": "^5.0.0",
     "parse-dbtool": "^1.2.0",
-    "parse-server": "6.5.0",
+    "parse-server": "^6.5.5",
     "parse-server-api-mail-adapter": "^3.1.1",
-    "parse-server-fs-adapter": "1.0.1",
+    "parse-server-fs-adapter": "^1.0.1",
     "parse-server-s3-adapter": "^1.2.0",
-    "pdf-lib": "^1.16.0",
-    "pdfkit": "^0.13.0",
-    "posthog-node": "^3.6.2",
-    "razorpay": "^2.8.6",
-    "request": "^2.88.2"
+    "pdf-lib": "^1.17.1",
+    "pdfkit": "^0.14.0",
+    "posthog-node": "^3.6.3"
   },
   "type": "module",
   "devDependencies": {
-    "@babel/eslint-parser": "7.21.3",
-    "eslint": "8.38.0",
-    "jasmine": "4.6.0",
-    "mongodb-runner": "5.5.3",
+    "@babel/eslint-parser": "^7.23.10",
+    "eslint": "^8.57.0",
+    "jasmine": "^5.1.0",
+    "mongodb-runner": "^5.5.4",
     "nodemon": "^3.1.0",
     "nyc": "15.1.0",
-    "prettier": "2.8.7"
+    "prettier": "^3.2.5"
   },
   "engines": {
-    "node": ">=12.22.10 <19"
+    "node": ">=12.22.10 <21"
   }
 }