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://localhost: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/package.json

@@ -3,35 +3,32 @@
   "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",
@@ -40,8 +37,8 @@
     "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",
@@ -83,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/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

@@ -6,16 +6,18 @@ const buttonList = [
   {
     label: "Sign yourself",
     redirectId: "sHAnZphf69",
-    redirectType: "Form"
+    redirectType: "Form",
+    icon: "fas fa-pen-nib"
   },
   {
     label: "Request signature",
     redirectId: "8mZzFxbG1z",
-    redirectType: "Form"
+    redirectType: "Form",
+    icon: "fa-solid fa-paper-plane"
   }
 ];
 const GetDashboard = (props) => {
-  const Button = ({ label, redirectId, redirectType }) => (
+  const Button = ({ label, redirectId, redirectType, icon }) => (
     <div className={"bg-white rounded-md shadow  w-full"}>
       <Suspense
         fallback={
@@ -33,7 +35,7 @@ const GetDashboard = (props) => {
         }
       >
         <DashboardButton
-          Icon={"fa-solid fa-plus"}
+          Icon={icon}
           Label={label}
           Data={{ Redirect_type: redirectType, Redirect_id: redirectId }}
         />
@@ -136,6 +138,7 @@ const GetDashboard = (props) => {
               label={btn.label}
               redirectType={btn.redirectType}
               redirectId={btn.redirectId}
+              icon={btn.icon}
             />
           ))}
         </div>

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

@@ -2,6 +2,7 @@ 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",
@@ -144,21 +145,15 @@ function DropdownWidgetOption(props) {
   };
 
   return (
-    //props.showDropdown
-    <ModalUi
-      //   styleClass={"dropdownModal"}
-      isOpen={props.showDropdown}
-      title={props.title}
-      showClose={false}
-    >
-      <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">
+          <div>
             <label style={{ fontSize: "13px", fontWeight: "600" }}>
               Name<span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
@@ -383,17 +378,22 @@ function DropdownWidgetOption(props) {
               </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

@@ -4,6 +4,7 @@ import PlaceholderBorder from "./PlaceholderBorder";
 import { Rnd } from "react-rnd";
 import {
   defaultWidthHeight,
+  handleCopyNextToWidget,
   isMobile,
   onChangeInput,
   radioButtonWidget,
@@ -302,8 +303,14 @@ function Placeholder(props) {
     props.setWidgetType(props.pos.type);
     props.setCurrWidgetsDetails(props.pos);
   };
-  //function ro set state value of onclick on widget's copy icon
+  //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);
@@ -312,9 +319,24 @@ function Placeholder(props) {
       props.setSignerObjId(props?.data?.signerObjId);
       props.setUniqueId(props?.data?.Id);
     }
-    e.stopPropagation();
-    props.setIsPageCopy(true);
-    props.setSignKey(props.pos.key);
+
+    //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

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

@@ -3,6 +3,7 @@ import {
   getMonth,
   getYear,
   isMobile,
+  onChangeHeightOfTextArea,
   onChangeInput,
   radioButtonWidget,
   range,
@@ -285,6 +286,22 @@ function PlaceholderType(props) {
     };
     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 ? (
@@ -336,7 +353,7 @@ function PlaceholderType(props) {
               <div key={ind} className="flex items-center text-center gap-0.5">
                 <input
                   style={{
-                    width: props.pos.Width,
+                    // width: props.pos.Width,
                     display: "flex",
                     justifyContent: "center",
                     marginTop: ind === 0 ? 0 : "5px"
@@ -443,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) => {
@@ -741,6 +758,7 @@ function PlaceholderType(props) {
         <textarea
           placeholder="Enter label"
           rows={1}
+          onKeyDown={handleEnterPress}
           value={textValue}
           onBlur={handleInputBlur}
           onChange={(e) => {

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

@@ -34,8 +34,11 @@ function WidgetComponent({
   handleRoleChange,
   handleOnBlur,
   title,
-
-  isTemplateFlow
+  setSignersData,
+  sendInOrder,
+  isTemplateFlow,
+  setBlockColor,
+  blockColor
 }) {
   const [isSignersModal, setIsSignersModal] = useState(false);
 
@@ -233,14 +236,14 @@ function WidgetComponent({
     (data) =>
       data.type !== "dropdown" &&
       data.type !== radioButtonWidget &&
-      data.type !== textWidget
+      data.type !== textInputWidget
   );
   const textWidgetData = widget.filter((data) => data.type !== textWidget);
   const updateWidgets = isSignYourself
     ? filterWidgets
     : isTemplateFlow
-    ? textWidgetData
-    : widget;
+      ? textWidgetData
+      : widget;
 
   return (
     <>
@@ -256,9 +259,11 @@ 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",
@@ -386,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/WidgetNameModal.js

@@ -3,6 +3,7 @@ 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({
@@ -14,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) {
@@ -70,7 +71,7 @@ const WidgetNameModal = (props) => {
         return "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/";
       case "number":
         return "/^\\d+$/";
-      case textInputWidget:
+      case "text":
         return "/^[a-zA-Zs]+$/";
       default:
         return type;
@@ -98,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
@@ -170,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>
           </>

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/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]);
@@ -107,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

@@ -12,6 +12,35 @@ 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();
@@ -22,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, {
@@ -729,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) {
@@ -1078,8 +1185,8 @@ export const multiSignEmbed = async (
           position.type === radioButtonWidget
             ? 10
             : position.type === "checkbox"
-            ? 10
-            : newUpdateHeight;
+              ? 10
+              : newUpdateHeight;
         const newHeight = ind ? (ind > 0 ? widgetHeight : 0) : widgetHeight;
 
         if (signyourself) {
@@ -1148,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
@@ -1175,14 +1283,14 @@ export const multiSignEmbed = async (
             if (!position?.options?.isHideLabel) {
               // below line of code is used to embed label with radio button in pdf
               page.drawText(item, {
-                x: xPos(position) + 15,
+                x: xPos(position) + 17,
                 y: yPosition + 2,
                 size: height
               });
             }
             checkbox.addToPage(page, {
               x: xPos(position),
-              y: yPosition,
+              y: yPosition - 3,
               width: height,
               height: height
             });
@@ -1203,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 {
@@ -1226,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;
 
@@ -1327,9 +1463,7 @@ export const multiSignEmbed = async (
       }
     });
   }
-
   const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
-
   return pdfBytes;
 };
 
@@ -1569,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

@@ -224,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

@@ -35,7 +35,7 @@ const Forms = (props) => {
   const [formData, setFormData] = useState({
     Name: "",
     Description: "",
-    Note: "Please review and sign this document",
+    Note: "",
     TimeToCompleteDays: 15,
     SendinOrder: "false"
   });
@@ -51,6 +51,7 @@ const Forms = (props) => {
   };
   useEffect(() => {
     handleReset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.title]);
   const handleFileInput = (e) => {
     setpercentage(0);
@@ -165,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);
@@ -233,9 +236,12 @@ const Forms = (props) => {
     setFormData({
       Name: "",
       Description: "",
-      Note: "Please review and sign this document",
+      Note:
+        props.title === "Sign Yourself"
+          ? "Note to myself"
+          : "Please review and sign this document",
       TimeToCompleteDays: 15,
-      SendinOrder: "false"
+      SendinOrder: "true"
     });
     setFileUpload([]);
     setpercentage(0);
@@ -324,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"

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

@@ -27,7 +27,8 @@ import {
   addWidgetOptions,
   textInputWidget,
   textWidget,
-  radioButtonWidget
+  radioButtonWidget,
+  color
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import { useNavigate } from "react-router-dom";
@@ -80,6 +81,7 @@ function PlaceHolderSign() {
   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"
@@ -106,20 +108,6 @@ function PlaceHolderSign() {
     status: false,
     message: ""
   });
-  const color = [
-    "#93a3db",
-    "#e6c3db",
-    "#c0e3bc",
-    "#bce3db",
-    "#b8ccdb",
-    "#ceb8db",
-    "#ffccff",
-    "#99ffcc",
-    "#cc99ff",
-    "#ffcc99",
-    "#66ccff",
-    "#ffffcc"
-  ];
 
   const isMobile = window.innerWidth < 767;
   const [, drop] = useDrop({
@@ -276,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");
@@ -303,6 +294,7 @@ function PlaceHolderSign() {
           setSignersData(updatedSigners);
           setIsSelectId(0);
           setUniqueId(updatedSigners[0].Id);
+          setBlockColor(updatedSigners[0].blockColor);
         }
       }
     } else if (
@@ -1034,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}
         />
       ),
@@ -1372,7 +1364,6 @@ function PlaceHolderSign() {
   const closePopup = () => {
     setIsAddUser({});
   };
-
   return (
     <>
       <Title title={state?.title ? state.title : "New Document"} />
@@ -1717,6 +1708,10 @@ function PlaceHolderSign() {
                   setUniqueId={setUniqueId}
                   setRoleName={setRoleName}
                   initial={true}
+                  sendInOrder={pdfDetails[0].SendinOrder}
+                  setSignersData={setSignersData}
+                  blockColor={blockColor}
+                  setBlockColor={setBlockColor}
                 />
               </div>
             ) : (
@@ -1735,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">

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

@@ -26,7 +26,7 @@ import {
   contactBook,
   randomId,
   getDate,
-  textInputWidget
+  textWidget
 } from "../constant/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -342,8 +342,7 @@ function SignYourSelf() {
         return {
           name: "checkbox"
         };
-
-      case textInputWidget:
+      case textWidget:
         return {
           name: "text"
         };
@@ -528,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) {
@@ -587,11 +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 = {

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -77,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({
@@ -223,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,
@@ -231,6 +233,7 @@ const TemplatePlaceholder = () => {
             }));
             setSignersData(updatedSigners);
             setUniqueId(updatedSigners[0].Id);
+            setBlockColor(updatedSigners[0].blockColor);
           }
         } else {
           setRoleName("User 1");
@@ -249,6 +252,7 @@ const TemplatePlaceholder = () => {
             setUniqueId(updatedSigners[0].Id);
             setSignersData(updatedSigners);
             setIsSelectId(0);
+            setBlockColor(updatedSigners[0].blockColor);
           }
         }
       } else if (
@@ -446,7 +450,7 @@ const TemplatePlaceholder = () => {
           setIsCheckbox(true);
         } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
-        } 
+        }
         setCurrWidgetsDetails({});
         setWidgetType(dragTypeValue);
         setSignKey(key);
@@ -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);
@@ -1443,6 +1450,10 @@ const TemplatePlaceholder = () => {
                   title={"Roles"}
                   initial={true}
                   isTemplateFlow={true}
+                  sendInOrder={pdfDetails[0].SendinOrder}
+                  setSignersData={setSignersData}
+                  blockColor={blockColor}
+                  setBlockColor={setBlockColor}
                 />
               </div>
             ) : (
@@ -1466,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

@@ -1,18 +1,36 @@
 import React from "react";
-// import * as HoverCard from "@radix-ui/react-hover-card";
-// import "../styles/opensigndrive.css";
 import { Tooltip as ReactTooltip } from "react-tooltip";
-const Tooltip = ({ children, message }) => (
-  <>
-    <a data-tooltip-id="my-tooltip" data-tooltip-content={message}>
+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  border-[1.5px] px-1.5 py-0.5 rounded-full border-[#33bbff] text-xs text-[#33bbff]"></i>
+        <i className="fa-solid fa-question text-xs border-[1.5px] px-1 rounded-full border-[#33bbff] text-[#33bbff]"></i>
       )}
-    </a>
-    <ReactTooltip id="my-tooltip" className="max-w-[200px]" />
-  </>
-);
+    </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

@@ -101,4 +101,62 @@
   .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 {

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/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/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.17.1",
-    "pdfkit": "^0.13.0",
-    "posthog-node": "^3.6.2",
-    "razorpay": "^2.8.6",
-    "request": "^2.88.2"
+    "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"
   }
 }