update pdf worker url

Revert "Safari issue patch "

.all-contributorsrc

@@ -205,6 +205,33 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "ugoconsonni",
+      "name": "ugoconsonni",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13661702?v=4",
+      "profile": "https://github.com/ugoconsonni",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "daniel-mutwiri",
+      "name": "Daniel Mutwiri",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8936960?v=4",
+      "profile": "https://github.com/daniel-mutwiri",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Zathiel",
+      "name": "Zathiel",
+      "avatar_url": "https://avatars.githubusercontent.com/u/26553418?v=4",
+      "profile": "https://github.com/Zathiel",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

.env.local_dev

@@ -40,7 +40,7 @@ DO_SECRET_ACCESS_KEY=
 # Digital ocean spaces region or AWS s3 region
 DO_REGION=us-west
 # local storage
-USE_LOCAL=TRUE
+USE_LOCAL=true
 
 # Email mailgun or set SMTP_ENABLE true to use SMTP config (The app will not initialize if any of these 3 variables are not set) *********************************************************************************************************************
 MAILGUN_API_KEY=

.github/workflows/Docker.yml

@@ -2,7 +2,7 @@ name: ci
 on:
   push:
     branches:
-      - 'staging'
+      - 'main'
 
 jobs:
   docker:

README.md

@@ -134,6 +134,9 @@ We would like to thank all our contributors and users for their support and feed
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/VikramNagwal"><img src="https://avatars.githubusercontent.com/u/123088024?v=4?s=100" width="100px;" alt="Vikram"/><br /><sub><b>Vikram</b></sub></a><br /><a href="#code-VikramNagwal" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ugoconsonni"><img src="https://avatars.githubusercontent.com/u/13661702?v=4?s=100" width="100px;" alt="ugoconsonni"/><br /><sub><b>ugoconsonni</b></sub></a><br /><a href="#code-ugoconsonni" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/daniel-mutwiri"><img src="https://avatars.githubusercontent.com/u/8936960?v=4?s=100" width="100px;" alt="Daniel Mutwiri"/><br /><sub><b>Daniel Mutwiri</b></sub></a><br /><a href="#code-daniel-mutwiri" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Zathiel"><img src="https://avatars.githubusercontent.com/u/26553418?v=4?s=100" width="100px;" alt="Zathiel"/><br /><sub><b>Zathiel</b></sub></a><br /><a href="#code-Zathiel" title="Code">💻</a><a href="#security-Zathiel" title="Security">🛡️</a></td>
     </tr>
   </tbody>
 </table>

apps/OpenSign/package.json

@@ -3,21 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@formkit/auto-animate": "^0.8.1",
-    "@radix-ui/themes": "^2.0.3",
-    "@react-pdf/renderer": "^3.4.0",
-    "@reduxjs/toolkit": "^2.2.1",
-    "axios": "^1.6.8",
+    "@formkit/auto-animate": "^0.8.2",
+    "@radix-ui/themes": "^3.0.5",
+    "@react-pdf/renderer": "^3.4.4",
+    "@reduxjs/toolkit": "^2.2.5",
+    "axios": "^1.7.2",
     "file-saver": "^2.0.5",
     "jwt-decode": "^4.0.0",
     "moment": "^2.30.1",
-    "parse": "^4.3.1",
+    "nth-check": "^2.1.1",
+    "parse": "^5.1.0",
     "pdf-lib": "^1.17.1",
     "print-js": "^1.6.0",
     "radix-ui": "^1.0.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
-    "react-datepicker": "^6.4.0",
+    "react-confetti": "^6.1.0",
+    "react-cookie": "^7.1.4",
+    "react-datepicker": "^6.9.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-multi-backend": "^8.0.3",
@@ -26,23 +29,24 @@
     "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": "^9.1.0",
-    "react-rnd": "^10.4.1",
+    "react-pdf": "^9.0.0",
+    "react-quill": "^2.0.0",
+    "react-redux": "^9.1.2",
+    "react-rnd": "^10.4.11",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.8.0",
     "react-signature-canvas": "^1.0.6",
-    "react-tooltip": "^5.26.3",
-    "reactour": "^1.19.2",
+    "react-tooltip": "^5.26.4",
+    "react-web-share": "^2.0.2",
+    "reactour": "^1.19.4",
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0",
     "regex-parser": "^2.3.0",
-    "serve": "^14.2.1",
+    "serve": "^14.2.3",
     "styled-components": "^4.4.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^4.0.1"
   },
   "scripts": {
     "start": "serve -s build",
@@ -80,16 +84,20 @@
     }
   },
   "devDependencies": {
-    "@babel/runtime-corejs2": "^7.24.1",
-    "autoprefixer": "^10.4.18",
+    "@babel/runtime-corejs2": "^7.24.7",
+    "autoprefixer": "^10.4.19",
     "commitizen": "^4.3.0",
+    "daisyui": "^4.12.2",
     "eslint": "^8.57.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.34.1",
-    "lint-staged": "^15.2.2",
-    "postcss": "^8.4.37",
+    "lint-staged": "^15.2.5",
+    "postcss": "^8.4.38",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.3.1",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.4"
+  },
+  "overrides": {
+    "nth-check": "$nth-check"
   }
 }

apps/OpenSign/public/index.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="opensigncss">
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="icon" href="/favicon.ico" />
   <!-- <link rel="icon" type="image/png"
     href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAALlJREFUaEPtmN0NwjAMBpNxYDKYiM1Yp90g93CKStH1NbIdfz921Dker2Pc+Js1cDF7MXAxASMGYkAigBI6vh9ZwoXP53uZoAYcvhwdA3mAVbI2aSb+9zFKU4IURB6j/HoPUIEa2G3iGIAhQQDlAUIoE2diabIklISS0NoFPebo77RF6OenEF3QntOm128he0GKrwHyACFoz2MgBqSGkpAEcHs47oHtN5AFakACqMNjQEMoE8SABFCHn4HE2zGHSLeEAAAAAElFTkSuQmCC"
     sizes="40x40" /> -->
@@ -15,7 +15,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="manifest" href="/manifest.json" />
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -50,4 +50,4 @@
     -->
 </body>
 
-</html>
+</html>

apps/OpenSign/src/App.js

@@ -16,6 +16,8 @@ import PlaceHolderSign from "./pages/PlaceHolderSign";
 import PdfRequestFiles from "./pages/PdfRequestFiles";
 import LazyPage from "./primitives/LazyPage";
 import { isEnableSubscription } from "./constant/const";
+import SSOVerify from "./pages/SSOVerify";
+import Loader from "./primitives/Loader";
 const DebugPdf = lazy(() => import("./pages/DebugPdf"));
 const ForgetPassword = lazy(() => import("./pages/ForgetPassword"));
 const GuestLogin = lazy(() => import("./pages/GuestLogin"));
@@ -28,25 +30,13 @@ const Opensigndrive = lazy(() => import("./pages/Opensigndrive"));
 const ManageSign = lazy(() => import("./pages/Managesign"));
 const GenerateToken = lazy(() => import("./pages/GenerateToken"));
 const Webhook = lazy(() => import("./pages/Webhook"));
-pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
-const Loader = () => {
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
+
+const AppLoader = () => {
   return (
-    <div
-      style={{
-        height: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }}
-    >
-      <div
-        style={{
-          fontSize: "45px",
-          color: "#3dd3e0"
-        }}
-        className="loader-37"
-      ></div>
+    <div className="flex justify-center items-center h-[100vh]">
+      <Loader />
     </div>
   );
 };
@@ -75,9 +65,9 @@ function App() {
   };
 
   return (
-    <div className="bg-[#eef1f5]">
+    <div className="bg-base-200">
       {isloading ? (
-        <Loader />
+        <AppLoader />
       ) : (
         <BrowserRouter>
           <Routes>
@@ -109,6 +99,10 @@ function App() {
               path="/login/:id/:userMail/:contactBookId/:serverUrl"
               element={<LazyPage Page={GuestLogin} />}
             />
+            <Route
+              path="/login/:base64url"
+              element={<LazyPage Page={GuestLogin} />}
+            />
             <Route path="/debugpdf" element={<LazyPage Page={DebugPdf} />} />
             <Route
               path="/forgetpassword"
@@ -177,6 +171,7 @@ function App() {
                 element={<PdfRequestFiles />}
               />
             </Route>
+            <Route path="/sso" element={<SSOVerify />} />
             <Route path="*" element={<PageNotFound />} />
           </Routes>
         </BrowserRouter>

apps/OpenSign/src/components/AddSigner.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
-import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
+import Loader from "../primitives/Loader";
 
 const AddSigner = (props) => {
   const [name, setName] = useState("");
@@ -23,7 +23,7 @@ const AddSigner = (props) => {
     );
     if (savedUserDetails && addYourself) {
       setName(savedUserDetails.name);
-      setPhone(savedUserDetails.phone);
+      setPhone(savedUserDetails?.phone || "");
       setEmail(savedUserDetails.email);
     }
   }, [addYourself]);
@@ -49,144 +49,162 @@ const AddSigner = (props) => {
     e.preventDefault();
     e.stopPropagation();
     setIsLoader(true);
-    try {
-      const contactQuery = new Parse.Object("contracts_Contactbook");
-      contactQuery.set("Name", name);
-      contactQuery.set("Phone", phone);
-      contactQuery.set("Email", email);
-      contactQuery.set("UserRole", "contracts_Guest");
-
-      if (localStorage.getItem("TenantId")) {
-        contactQuery.set("TenantId", {
-          __type: "Pointer",
-          className: "partners_Tenant",
-          objectId: localStorage.getItem("TenantId")
-        });
-      }
-
+    if (localStorage.getItem("TenantId")) {
       try {
-        const _users = Parse.Object.extend("User");
-        const _user = new _users();
-        _user.set("name", name);
-        _user.set("username", email);
-        _user.set("email", email);
-        _user.set("phone", phone);
-        _user.set("password", phone);
-
-        const user = await _user.save();
-        if (user) {
-          const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
-          const headers = {
-            "Content-Type": "application/json",
-            "X-Parse-Application-Id": parseAppId,
-            sessionToken: localStorage.getItem("accesstoken")
-          };
-          const body = {
-            appName: localStorage.getItem("_appName"),
-            roleName: "contracts_Guest",
-            userId: user.id
-          };
-          await axios.post(roleurl, body, { headers: headers });
-          const currentUser = Parse.User.current();
-          contactQuery.set(
-            "CreatedBy",
-            Parse.User.createWithoutData(currentUser.id)
-          );
-
-          contactQuery.set("UserId", user);
-          const acl = new Parse.ACL();
-          acl.setPublicReadAccess(true);
-          acl.setPublicWriteAccess(true);
-          acl.setReadAccess(currentUser.id, true);
-          acl.setWriteAccess(currentUser.id, true);
-
-          contactQuery.setACL(acl);
-
-          const res = await contactQuery.save();
-
-          const parseData = JSON.parse(JSON.stringify(res));
-          if (props.details) {
-            props.details({
-              value: parseData[props.valueKey],
-              label: parseData[props.displayKey]
-            });
-          }
-          if (props.closePopup) {
-            props.closePopup();
-          }
-          if (props.handleUserData) {
-            props.handleUserData(parseData);
+        const user = Parse.User.current();
+        const query = new Parse.Query("contracts_Contactbook");
+        query.equalTo("CreatedBy", user);
+        query.notEqualTo("IsDeleted", true);
+        query.equalTo("Email", email);
+        const res = await query.first();
+        // console.log(res);
+        if (!res) {
+          const contactQuery = new Parse.Object("contracts_Contactbook");
+          contactQuery.set("Name", name);
+          if (phone) {
+            contactQuery.set("Phone", phone);
           }
+          contactQuery.set("Email", email);
+          contactQuery.set("UserRole", "contracts_Guest");
 
+          contactQuery.set("TenantId", {
+            __type: "Pointer",
+            className: "partners_Tenant",
+            objectId: localStorage.getItem("TenantId")
+          });
+
+          try {
+            const _users = Parse.Object.extend("User");
+            const _user = new _users();
+            _user.set("name", name);
+            _user.set("username", email);
+            _user.set("email", email);
+            _user.set("password", email);
+            if (phone) {
+              _user.set("phone", phone);
+            }
+            const user = await _user.save();
+            if (user) {
+              const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
+              const headers = {
+                "Content-Type": "application/json",
+                "X-Parse-Application-Id": parseAppId,
+                sessionToken: localStorage.getItem("accesstoken")
+              };
+              const body = {
+                appName: localStorage.getItem("_appName"),
+                roleName: "contracts_Guest",
+                userId: user.id
+              };
+              await axios.post(roleurl, body, { headers: headers });
+              const currentUser = Parse.User.current();
+              contactQuery.set(
+                "CreatedBy",
+                Parse.User.createWithoutData(currentUser.id)
+              );
+
+              contactQuery.set("UserId", user);
+              const acl = new Parse.ACL();
+              acl.setPublicReadAccess(true);
+              acl.setPublicWriteAccess(true);
+              acl.setReadAccess(currentUser.id, true);
+              acl.setWriteAccess(currentUser.id, true);
+
+              contactQuery.setACL(acl);
+
+              const res = await contactQuery.save();
+
+              const parseData = JSON.parse(JSON.stringify(res));
+              if (props.details) {
+                props.details({
+                  value: parseData[props.valueKey],
+                  label: parseData[props.displayKey]
+                });
+              }
+              if (props.closePopup) {
+                props.closePopup();
+              }
+              if (props.handleUserData) {
+                props.handleUserData(parseData);
+              }
+
+              setIsLoader(false);
+              // Reset the form fields
+              setAddYourself(false);
+              setName("");
+              setPhone("");
+              setEmail("");
+            }
+          } catch (err) {
+            console.log("err ", err);
+            if (err.code === 202) {
+              const params = { email: email };
+              const userRes = await Parse.Cloud.run("getUserId", params);
+              const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
+              const headers = {
+                "Content-Type": "application/json",
+                "X-Parse-Application-Id": parseAppId,
+                sessionToken: localStorage.getItem("accesstoken")
+              };
+              const body = {
+                appName: localStorage.getItem("_appName"),
+                roleName: "contracts_Guest",
+                userId: userRes.id
+              };
+              await axios.post(roleurl, body, { headers: headers });
+              const currentUser = Parse.User.current();
+              contactQuery.set(
+                "CreatedBy",
+                Parse.User.createWithoutData(currentUser.id)
+              );
+
+              contactQuery.set("UserId", {
+                __type: "Pointer",
+                className: "_User",
+                objectId: userRes.id
+              });
+              const acl = new Parse.ACL();
+              acl.setPublicReadAccess(true);
+              acl.setPublicWriteAccess(true);
+              acl.setReadAccess(currentUser.id, true);
+              acl.setWriteAccess(currentUser.id, true);
+
+              contactQuery.setACL(acl);
+              const res = await contactQuery.save();
+
+              const parseData = JSON.parse(JSON.stringify(res));
+              if (props.details) {
+                props.details({
+                  value: parseData[props.valueKey],
+                  label: parseData[props.displayKey]
+                });
+              }
+              if (props.closePopup) {
+                props.closePopup();
+              }
+              if (props.handleUserData) {
+                props.handleUserData(parseData);
+              }
+              setIsLoader(false);
+              // Reset the form fields
+              setAddYourself(false);
+              setName("");
+              setPhone("");
+              setEmail("");
+            }
+          }
+        } else {
+          alert("Contact already exist!");
           setIsLoader(false);
-          // Reset the form fields
-          setAddYourself(false);
-          setName("");
-          setPhone("");
-          setEmail("");
         }
       } catch (err) {
-        console.log("err ", err);
-        if (err.code === 202) {
-          const params = { email: email };
-          const userRes = await Parse.Cloud.run("getUserId", params);
-          const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
-          const headers = {
-            "Content-Type": "application/json",
-            "X-Parse-Application-Id": parseAppId,
-            sessionToken: localStorage.getItem("accesstoken")
-          };
-          const body = {
-            appName: localStorage.getItem("_appName"),
-            roleName: "contracts_Guest",
-            userId: userRes.id
-          };
-          await axios.post(roleurl, body, { headers: headers });
-          const currentUser = Parse.User.current();
-          contactQuery.set(
-            "CreatedBy",
-            Parse.User.createWithoutData(currentUser.id)
-          );
-
-          contactQuery.set("UserId", {
-            __type: "Pointer",
-            className: "_User",
-            objectId: userRes.id
-          });
-          const acl = new Parse.ACL();
-          acl.setPublicReadAccess(true);
-          acl.setPublicWriteAccess(true);
-          acl.setReadAccess(currentUser.id, true);
-          acl.setWriteAccess(currentUser.id, true);
-
-          contactQuery.setACL(acl);
-          const res = await contactQuery.save();
-
-          const parseData = JSON.parse(JSON.stringify(res));
-          if (props.details) {
-            props.details({
-              value: parseData[props.valueKey],
-              label: parseData[props.displayKey]
-            });
-          }
-          if (props.closePopup) {
-            props.closePopup();
-          }
-          if (props.handleUserData) {
-            props.handleUserData(parseData);
-          }
-          setIsLoader(false);
-          // Reset the form fields
-          setAddYourself(false);
-          setName("");
-          setPhone("");
-          setEmail("");
-        }
+        console.log("err in fetch contact", err);
+        setIsLoader(false);
+        alert("something went wrong, please try again later");
       }
-    } catch (err) {
-      // console.log("err", err);
+    } else {
       setIsLoader(false);
-      alert("something went wrong!");
+      alert("something went wrong, please try again later");
     }
   };
 
@@ -209,38 +227,29 @@ const AddSigner = (props) => {
     <div className="h-full p-[20px]">
       {isLoader && (
         <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30">
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+          <Loader />
         </div>
       )}
-      <div className="w-full mx-auto p-2">
+      <div className="w-full mx-auto p-2 text-base-content">
         {isUserExist && (
-          <div className="mb-3">
+          <div className="mb-3 flex items-center">
             <input
               type="checkbox"
               id="addYourself"
               checked={addYourself}
               onChange={handleAddYourselfChange}
-              className="form-checkbox"
+              className="op-checkbox op-checkbox-sm"
             />
-            <label htmlFor="addYourself" className="ml-2 text-gray-700">
+            <label htmlFor="addYourself" className="ml-2 mb-0">
               Add Yourself
             </label>
           </div>
         )}
         <form onSubmit={handleSubmit}>
           <div className="mb-3">
-            <label
-              htmlFor="name"
-              className="block text-xs text-gray-700 font-semibold"
-            >
+            <label htmlFor="name" className="block text-xs font-semibold">
               Name
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
               type="text"
@@ -249,59 +258,45 @@ const AddSigner = (props) => {
               onChange={(e) => setName(e.target.value)}
               required
               disabled={addYourself}
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="mb-3">
-            <label
-              htmlFor="email"
-              className="block text-xs text-gray-700 font-semibold"
-            >
+            <label htmlFor="email" className="block text-xs font-semibold">
               Email
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
               type="email"
               id="email"
               value={email}
-              onChange={(e) => setEmail(e.target.value)}
+              onChange={(e) => setEmail(e.target.value?.toLowerCase())}
               required
               disabled={addYourself}
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="mb-3">
-            <label
-              htmlFor="phone"
-              className="block text-xs text-gray-700 font-semibold"
-            >
+            <label htmlFor="phone" className="block text-xs font-semibold">
               Phone
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               type="text"
               id="phone"
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
-              required
               disabled={addYourself}
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
-
-          <div className="mt-4 flex justify-start">
-            <button
-              type="submit"
-              style={{ backgroundColor: modalSubmitBtnColor }}
-              className="mr-2 px-[20px] py-1.5 text-white rounded shadow-md text-center focus:outline-none "
-            >
+          <div className="mt-4 flex gap-x-2 justify-start">
+            <button type="submit" className="op-btn op-btn-primary">
               Submit
             </button>
             <button
               type="button"
               onClick={() => handleReset()}
-              style={{ backgroundColor: modalCancelBtnColor }}
-              className="px-4 py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+              className="op-btn op-btn-secondary"
             >
               Reset
             </button>

apps/OpenSign/src/components/AddUser.js

@@ -3,6 +3,7 @@ import Parse from "parse";
 import axios from "axios";
 import Title from "./Title";
 import Alert from "../primitives/Alert";
+import Loader from "../primitives/Loader";
 
 const AddUser = (props) => {
   const [name, setName] = useState("");
@@ -62,8 +63,10 @@ const AddUser = (props) => {
           _user.set("name", name);
           _user.set("username", email);
           _user.set("email", email);
-          _user.set("phone", phone);
-          _user.set("password", phone);
+          _user.set("password", email);
+          if (phone) {
+            _user.set("phone", phone);
+          }
 
           const user = await _user.save();
           if (user) {
@@ -193,13 +196,7 @@ const AddUser = (props) => {
       {isUserExist && <Alert type="danger">User already exists!</Alert>}
       {isLoader && (
         <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50">
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+          <Loader />
         </div>
       )}
       <div className="w-full mx-auto">
@@ -211,7 +208,7 @@ const AddUser = (props) => {
               className="block text-xs text-gray-700 font-semibold"
             >
               Name
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
               type="text"
@@ -219,7 +216,7 @@ const AddUser = (props) => {
               value={name}
               onChange={(e) => setName(e.target.value)}
               required
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="mb-3">
@@ -228,7 +225,7 @@ const AddUser = (props) => {
               className="block text-xs text-gray-700 font-semibold"
             >
               Email
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
               type="email"
@@ -236,7 +233,7 @@ const AddUser = (props) => {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="mb-3">
@@ -245,7 +242,7 @@ const AddUser = (props) => {
               className="block text-xs text-gray-700 font-semibold"
             >
               Phone
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
               type="text"
@@ -253,7 +250,7 @@ const AddUser = (props) => {
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
               required
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
 

apps/OpenSign/src/components/BulkSendUi.js

@@ -0,0 +1,256 @@
+import React, { useState, useEffect, useRef } from "react";
+import axios from "axios";
+import SuggestionInput from "./shared/fields/SuggestionInput";
+import Loader from "../primitives/Loader";
+
+const BulkSendUi = (props) => {
+  const [forms, setForms] = useState([]);
+  const [formId, setFormId] = useState(2);
+  const formRef = useRef(null);
+  const [scrollOnNextUpdate, setScrollOnNextUpdate] = useState(false);
+  const [isSubmit, setIsSubmit] = useState(false);
+  const [allowedForm, setAllowedForm] = useState(0);
+  const [isSignatureExist, setIsSignatureExist] = useState();
+  const allowedSigners = 50;
+  useEffect(() => {
+    signatureExist();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  //function to check atleast one signature field exist
+  const signatureExist = () => {
+    const getPlaceholder = props.item?.Placeholders;
+    const checkIsSignatureExistt = getPlaceholder?.every((placeholderObj) =>
+      placeholderObj?.placeHolder?.some((holder) =>
+        holder?.pos?.some((posItem) => posItem?.type === "signature")
+      )
+    );
+    setIsSignatureExist(checkIsSignatureExistt);
+  };
+  useEffect(() => {
+    if (scrollOnNextUpdate && formRef.current) {
+      formRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "end",
+        inline: "nearest"
+      });
+      setScrollOnNextUpdate(false);
+    }
+  }, [forms, scrollOnNextUpdate]);
+
+  useEffect(() => {
+    (() => {
+      if (props?.Placeholders?.length > 0) {
+        let users = [];
+        props?.Placeholders?.forEach((element) => {
+          if (!element.signerObjId) {
+            users = [
+              ...users,
+              {
+                fieldId: element.Id,
+                email: "",
+                label: element.Role,
+                signer: {}
+              }
+            ];
+          }
+        });
+        setForms((prevForms) => [...prevForms, { Id: 1, fields: users }]);
+        const totalForms = Math.floor(allowedSigners / users?.length);
+        setAllowedForm(totalForms);
+      }
+    })();
+    // eslint-disable-next-line
+  }, []);
+  const handleInputChange = (index, signer, fieldIndex) => {
+    const newForms = [...forms];
+    newForms[index].fields[fieldIndex].email = signer?.Email
+      ? signer?.Email
+      : signer || "";
+    newForms[index].fields[fieldIndex].signer = signer?.objectId ? signer : "";
+    setForms(newForms);
+  };
+
+  const handleAddForm = (e) => {
+    e.preventDefault();
+    // Check if the quick send limit has been reached
+    if (forms?.length < allowedForm) {
+      if (props?.Placeholders.length > 0) {
+        let newForm = [];
+        props?.Placeholders?.forEach((element) => {
+          if (!element.signerObjId) {
+            newForm = [
+              ...newForm,
+              {
+                fieldId: element.Id,
+                email: "",
+                label: element.Role,
+                signer: {}
+              }
+            ];
+          }
+        });
+        setForms([...forms, { Id: formId, fields: newForm }]);
+      }
+      setFormId(formId + 1);
+      setScrollOnNextUpdate(true);
+    } else {
+      // If the limit has been reached, throw an error with the appropriate message
+      alert("Quick send reached limit.");
+    }
+  };
+
+  const handleRemoveForm = (index) => {
+    const updatedForms = forms.filter((_, i) => i !== index);
+    setForms(updatedForms);
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsSubmit(true);
+
+    // Create a copy of Placeholders array from props.item
+    let Placeholders = [...props.item.Placeholders];
+    // Initialize an empty array to store updated documents
+    let Documents = [];
+
+    // Loop through each form
+    forms.forEach((form) => {
+      // Map through the copied Placeholders array to update email values
+      const updatedPlaceholders = Placeholders.map((placeholder) => {
+        // Find the field in the current form that matches the placeholder Id
+        const field = form.fields.find(
+          (element) => parseInt(element.fieldId) === placeholder.Id
+        );
+        // If a matching field is found, update the email value in the placeholder
+        const signer = field?.signer?.objectId ? field.signer : {};
+        if (field) {
+          return {
+            ...placeholder,
+            email: field.email,
+            signerObjId: field?.signer?.objectId || "",
+            signerPtr: signer
+          };
+        }
+        // If no matching field is found, keep the placeholder as is
+        return placeholder;
+      });
+
+      // Push a new document object with updated Placeholders into the Documents array
+      Documents.push({ ...props.item, Placeholders: updatedPlaceholders });
+    });
+    // console.log("Documents ", Documents);
+    await batchQuery(Documents);
+  };
+
+  const batchQuery = async (Documents) => {
+    const serverUrl = localStorage.getItem("baseUrl");
+    const functionsUrl = `${serverUrl}functions/batchdocuments`;
+    const headers = {
+      "Content-Type": "application/json",
+      "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+      sessionToken: localStorage.getItem("accesstoken")
+    };
+    const params = {
+      Documents: JSON.stringify(Documents)
+    };
+    try {
+      const res = await axios.post(functionsUrl, params, { headers: headers });
+      // console.log("res ", res);
+      if (res.data && res.data.result) {
+        props.handleClose("success", Documents?.length);
+      }
+    } catch (err) {
+      console.log("Err ", err);
+      props.handleClose("error", 0);
+    } finally {
+      setIsSubmit(false);
+    }
+  };
+
+  return (
+    <>
+      {isSubmit && (
+        <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
+        </div>
+      )}
+      {props.Placeholders?.length > 0 ? (
+        isSignatureExist ? (
+          <>
+            {props.Placeholders?.some((x) => !x.signerObjId) ? (
+              <form onSubmit={handleSubmit}>
+                <div className="min-h-max max-h-[250px] overflow-y-auto">
+                  {forms?.map((form, index) => (
+                    <div
+                      key={form.Id}
+                      className="p-3 op-card border-[1px] border-gray-400 mt-3 mx-4 mb-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
+                    >
+                      {form?.fields?.map((field, fieldIndex) => (
+                        <div className="flex flex-col" key={field.fieldId}>
+                          <label>{field.label}</label>
+                          <SuggestionInput
+                            required
+                            type="email"
+                            value={field.value}
+                            index={fieldIndex}
+                            onChange={(signer) =>
+                              handleInputChange(index, signer, fieldIndex)
+                            }
+                          />
+                        </div>
+                      ))}
+                      {forms?.length > 1 && (
+                        <button
+                          onClick={() => handleRemoveForm(index)}
+                          className="absolute right-3 top-1 text-[red] border-[1px] border-[red] rounded-lg w-[1.7rem] h-[1.7rem]"
+                        >
+                          <i className="fa-solid fa-trash"></i>
+                        </button>
+                      )}
+                      <div ref={formRef}></div>
+                    </div>
+                  ))}
+                </div>
+                <div className="flex flex-col mx-4 mb-4 gap-3">
+                  <button
+                    onClick={handleAddForm}
+                    className="op-btn op-btn-primary focus:outline-none"
+                  >
+                    <i className="fa-solid fa-plus"></i> <span>Add new</span>
+                  </button>
+                  <button
+                    type="submit"
+                    className="op-btn op-btn-secondary focus:outline-none"
+                  >
+                    <i className="fa-solid fa-paper-plane"></i>{" "}
+                    <span>Send</span>
+                  </button>
+                </div>
+              </form>
+            ) : (
+              <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
+                All roles in this document are currently linked to contacts. To
+                &apos;quick send&apos; copies of this template to multiple
+                signers, please ensure that at least one role is not linked to
+                any contact.
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
+            Please ensure there&#39;s at least one signature widget added for
+            all recipients.
+          </div>
+        )
+      ) : (
+        <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
+          Please add at least one role to this template in order to &apos;quick
+          send&apos; copies of it to multiple signers.
+        </div>
+      )}
+    </>
+  );
+};
+
+export default BulkSendUi;

apps/OpenSign/src/components/Footer.js

@@ -45,12 +45,16 @@ const Footer = () => {
   };
   return (
     <>
-      <div className="bg-[#222c3c] text-[#98a6ba] text-center text-[13px] py-3">
-        All Rights Reserved &copy; {new Date().getFullYear()} &nbsp;
-        <span onClick={openUrl} className="hover:underline cursor-pointer">
-          {appName} ( version: {version ? version : `${Package.version} `})
-        </span>
-      </div>
+      <footer className="op-footer op-footer-center py-3 bg-base-300 text-base-content text-center text-[13px]">
+        <aside>
+          <p>
+            All Rights Reserved &copy; {new Date().getFullYear()} &nbsp;
+            <span onClick={openUrl} className="hover:underline cursor-pointer">
+              {appName} ( version: {version ? version : `${Package.version} `})
+            </span>
+          </p>
+        </aside>
+      </footer>
       <button
         className={`${
           showButton ? "block" : "hidden"

apps/OpenSign/src/components/FullScreenButton.js

@@ -67,7 +67,7 @@ const FullScreenButton = () => {
     <div className="flex items-center">
       <button
         onClick={toggleFullScreen}
-        className="text-black p-2 text-sm focus:outline-none"
+        className="text-base-content p-2 text-sm focus:outline-none"
       >
         {isFullScreen ? (
           <i className="fa-solid fa-compress"></i>

apps/OpenSign/src/components/Header.js

@@ -4,18 +4,20 @@ import FullScreenButton from "./FullScreenButton";
 import { useNavigate } from "react-router-dom";
 import Parse from "parse";
 import { useWindowSize } from "../hook/useWindowSize";
-import { checkIsSubscribed, openInNewTab } from "../constant/Utils";
+import { checkIsSubscribed, getAppLogo, openInNewTab } from "../constant/Utils";
 import { isEnableSubscription } from "../constant/const";
 
 const Header = ({ showSidebar }) => {
   const navigate = useNavigate();
   const { width } = useWindowSize();
-  let applogo = localStorage.getItem("appLogo") || "";
   let username = localStorage.getItem("username");
   const image = localStorage.getItem("profileImg") || dp;
-
   const [isOpen, setIsOpen] = useState(false);
   const [isSubscribe, setIsSubscribe] = useState(true);
+  const [isPro, setIsPro] = useState(false);
+  const [applogo, setAppLogo] = useState(
+    localStorage.getItem("appLogo") || " "
+  );
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
@@ -27,12 +29,28 @@ const Header = ({ showSidebar }) => {
   async function checkSubscription() {
     if (isEnableSubscription) {
       const getIsSubscribe = await checkIsSubscribed();
+      if (getIsSubscribe) {
+        const applogo = await getAppLogo();
+        if (applogo) {
+          setAppLogo(applogo);
+        } else {
+          setAppLogo(localStorage.getItem("appLogo") || "");
+        }
+      }
+      setIsPro(getIsSubscribe);
       setIsSubscribe(getIsSubscribe);
     }
   }
+
   const closeDropdown = () => {
     setIsOpen(false);
-    Parse.User.logOut();
+    if (Parse?.User?.current()) {
+      try {
+        Parse.User.logOut();
+      } catch (err) {
+        console.log("Err", err);
+      }
+    }
     let appdata = localStorage.getItem("userSettings");
     let applogo = localStorage.getItem("appLogo");
     let appName = localStorage.getItem("appName");
@@ -75,14 +93,16 @@ const Header = ({ showSidebar }) => {
   }, [isOpen]);
 
   return (
-    <div className="flex flex-row justify-between items-center gap-x-3 md:gap-x-4 bg-white md:px-4 px-2 shadow h-[50px] md:w-full ">
-      <button
-        className="cursor-pointer focus:outline-none"
-        onClick={showSidebar}
-      >
-        <i className={`fa-solid fa-bars text-xl `}></i>
-      </button>
-      <div className="flex-1">
+    <div className="op-navbar bg-base-100 shadow">
+      <div className="flex-none">
+        <button
+          className="op-btn op-btn-square op-btn-ghost focus:outline-none"
+          onClick={showSidebar}
+        >
+          <i className="fa-solid fa-bars text-xl text-base-content"></i>
+        </button>
+      </div>
+      <div className="flex-1 ml-2">
         <div className="h-[25px] md:h-[40px] w-auto overflow-hidden">
           <img
             className="object-contain h-full w-auto"
@@ -91,10 +111,7 @@ const Header = ({ showSidebar }) => {
           />
         </div>
       </div>
-      <div
-        id="profile-menu"
-        className="flex justify-between items-center gap-x-3"
-      >
+      <div id="profile-menu" className="flex-none gap-2">
         {!isSubscribe && (
           <div>
             <button
@@ -105,6 +122,11 @@ const Header = ({ showSidebar }) => {
             </button>
           </div>
         )}
+        {isPro && (
+          <div className="w-[35px] h-[35px] bg-white rounded-full ring-[1px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
+            PRO
+          </div>
+        )}
         <div>
           <FullScreenButton />
         </div>
@@ -121,52 +143,66 @@ const Header = ({ showSidebar }) => {
           </div>
         )}
         {width >= 768 && (
-          <div onClick={toggleDropdown} className="cursor-pointer text-sm">
+          <div
+            onClick={toggleDropdown}
+            className="cursor-pointer text-base-content text-sm"
+          >
             {username && username}
           </div>
         )}
-        <div className="relative">
-          <div className="cursor-pointer">
-            <i onClick={toggleDropdown} className="fa-solid fa-angle-down"></i>
+        <div className="op-dropdown op-dropdown-end" id="profile-menu">
+          <div tabIndex={0} role="button" className="op-btn op-btn-ghost">
+            <i
+              tabIndex={0}
+              role="button"
+              onClick={toggleDropdown}
+              className="fa-solid fa-angle-down text-base-content"
+            ></i>
           </div>
-          <div
-            className={`dropdown absolute text-sm text-gray-700 font-light right-0 mt-4 p-1 w-48 bg-white border rounded-lg shadow-lg z-10 ${
-              isOpen ? "block" : "hidden"
-            }`}
+          <ul
+            tabIndex={0}
+            className="mt-3 z-[1] p-2 shadow op-menu op-menu-sm op-dropdown-content text-base-content bg-base-100 rounded-box w-52"
           >
-            <ul>
-              <li
-                className="hover:bg-gray-100 rounded-t-lg py-1 px-2 cursor-pointer font-normal"
-                onClick={() => openInNewTab("https://docs.opensignlabs.com")}
-              >
+            <li onClick={() => openInNewTab("https://docs.opensignlabs.com")}>
+              <span>
                 <i className="fa-solid fa-book"></i> Docs
-              </li>
-              <li
-                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
-                onClick={() => {
-                  setIsOpen(false);
-                  navigate("/profile");
-                }}
-              >
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                setIsOpen(false);
+                navigate("/profile");
+              }}
+            >
+              <span>
                 <i className="fa-regular fa-user"></i> Profile
-              </li>
-              <li
-                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
-                onClick={() => {
-                  setIsOpen(false);
-                  navigate("/changepassword");
-                }}
-              >
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                setIsOpen(false);
+                navigate("/changepassword");
+              }}
+            >
+              <span>
                 <i className="fa-solid fa-lock"></i> Change Password
-              </li>
-              <li
-                className="hover:bg-gray-100 rounded-b-lg py-1 px-2 cursor-pointer font-normal"
-                onClick={closeDropdown}
-              >
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                window.open("https://console.opensignlabs.com/");
+              }}
+            >
+              <span>
+                <i className="fa-regular fa-id-card"></i> Console
+              </span>
+            </li>
+            <li onClick={closeDropdown}>
+              <span>
                 <i className="fa-solid fa-arrow-right-from-bracket"></i> Log Out
-              </li>
-            </ul>
-          </div>
+              </span>
+            </li>
+          </ul>
         </div>
       </div>
     </div>

apps/OpenSign/src/components/LoginFacebook.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import Parse from "parse";
+import Loader from "../primitives/Loader";
 // import FacebookLogin from "react-facebook-login";
 
 const LoginFacebook = ({
@@ -49,7 +50,7 @@ const LoginFacebook = ({
     const extRes = await Parse.Cloud.run("getUserDetails", params);
     // console.log("extRes ", extRes);
     if (extRes) {
-      const params = { ...details, Phone: extRes.get("Phone") };
+      const params = { ...details, Phone: extRes?.get("Phone") || "" };
       const payload = await Parse.Cloud.run("facebooksign", params);
       //   console.log("payload ", payload);
       if (payload && payload.sessiontoken) {
@@ -59,7 +60,7 @@ const LoginFacebook = ({
         const LocalUserDetails = {
           name: details.Name,
           email: details.Email,
-          phone: extRes.get("Phone"),
+          phone: extRes?.get("Phone") || "",
           company: extRes.get("Company")
         };
         localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
@@ -75,7 +76,7 @@ const LoginFacebook = ({
   const handleSubmitbtn = async () => {
     if (userDetails.Phone && userDetails.Company) {
       setThirdpartyLoader(true);
-      const params = { ...fBDetails, Phone: userDetails.Phone };
+      const params = { ...fBDetails, Phone: userDetails?.Phone || "" };
       const payload = await Parse.Cloud.run("facebooksign", params);
       // console.log("payload ", payload);
 
@@ -85,7 +86,7 @@ const LoginFacebook = ({
             name: userDetails.Name,
             email: userDetails.Email,
             // "passsword":userDetails.Phone,
-            phone: userDetails.Phone,
+            phone: userDetails?.Phone || "",
             role: "contracts_User",
             company: userDetails.Company
           }
@@ -96,7 +97,7 @@ const LoginFacebook = ({
           const LocalUserDetails = {
             name: userDetails.Name,
             email: userDetails.Email,
-            phone: userDetails.Phone,
+            phone: userDetails?.Phone || "",
             company: userDetails.Company
           };
           localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
@@ -112,29 +113,10 @@ const LoginFacebook = ({
     }
   };
   return (
-    <div style={{ position: "relative" }}>
+    <div className="relative">
       {thirdpartyLoader && (
-        <div
-          style={{
-            position: "fixed",
-            width: "100vw",
-            height: "100vh",
-            backgroundColor: "rgba(0,0,0,0.2)",
-            top: 0,
-            left: 0,
-            zIndex: 2
-          }}
-        >
-          <div
-            style={{
-              position: "fixed",
-              fontSize: "50px",
-              color: "#3ac9d6",
-              top: "50%",
-              left: "45%"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
+          <Loader />
         </div>
       )}
       {/* <FacebookLogin
@@ -146,11 +128,10 @@ const LoginFacebook = ({
       /> */}
       {isModal && (
         <div
-          className="modal fade show"
+          className="modal fade show block z-[1]"
           id="exampleModal"
           tabIndex="-1"
           role="dialog"
-          style={{ display: "block", zIndex: 1 }}
         >
           <div className="modal-dialog" role="document">
             <div className="modal-content">
@@ -163,13 +144,8 @@ const LoginFacebook = ({
               <div className="modal-body">
                 <form>
                   <div className="form-group">
-                    <label
-                      htmlFor="Phone"
-                      style={{ display: "flex" }}
-                      className="col-form-label"
-                    >
-                      Phone{" "}
-                      <span style={{ fontSize: 13, color: "red" }}>*</span>
+                    <label htmlFor="Phone" className="col-form-label">
+                      Phone <span className="text-[red] text-[13px]">*</span>
                     </label>
                     <input
                       type="tel"
@@ -186,13 +162,8 @@ const LoginFacebook = ({
                     />
                   </div>
                   <div className="form-group">
-                    <label
-                      htmlFor="Company"
-                      style={{ display: "flex" }}
-                      className="col-form-label"
-                    >
-                      Company{" "}
-                      <span style={{ fontSize: 13, color: "red" }}>*</span>
+                    <label htmlFor="Company" className="col-form-label">
+                      Company <span className="text-[red] text-[13px]">*</span>
                     </label>
                     <input
                       type="text"
@@ -212,16 +183,14 @@ const LoginFacebook = ({
                     <button
                       type="button"
                       onClick={() => handleSubmitbtn()}
-                      className="btn btn-info"
-                      style={{ marginRight: 10 }}
+                      className="btn btn-info mr-[10px]"
                     >
                       Sign up
                     </button>
                     <button
                       type="button"
-                      className="btn btn-secondary"
+                      className="btn btn-secondary w-[90px]"
                       onClick={() => setIsModal(false)}
-                      style={{ width: 90 }}
                     >
                       Cancel
                     </button>

apps/OpenSign/src/components/LoginGoogle.js

@@ -3,7 +3,7 @@ import Parse from "parse";
 import { jwtDecode } from "jwt-decode";
 import { useScript } from "../hook/useScript";
 import ModalUi from "../primitives/ModalUi";
-import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
+import Loader from "../primitives/Loader";
 
 /*
  * `GoogleSignInBtn`as it's name indicates it render google sign in button
@@ -110,22 +110,22 @@ const GoogleSignInBtn = ({
     const extRes = await Parse.Cloud.run("getUserDetails", params);
     // console.log("extRes ", extRes);
     if (extRes) {
-      const params = { ...details, Phone: extRes.get("Phone") };
+      const params = { ...details, Phone: extRes?.get("Phone") || "" };
       const payload = await Parse.Cloud.run("googlesign", params);
       // console.log("payload ", payload);
       if (payload && payload.sessiontoken) {
         // setThirdpartyLoader(true);
-        const billingDate =
-          extRes.get("Next_billing_date") && extRes.get("Next_billing_date");
+        // const billingDate =
+        //   extRes.get("Next_billing_date") && extRes.get("Next_billing_date");
         // console.log("billingDate expired", billingDate > new Date());
         const LocalUserDetails = {
           name: details.Name,
           email: details.Gmail,
-          phone: extRes.get("Phone"),
+          phone: extRes?.get("Phone") || "",
           company: extRes.get("Company")
         };
         localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
-        thirdpartyLoginfn(payload.sessiontoken, billingDate);
+        thirdpartyLoginfn(payload.sessiontoken);
       }
       return { msg: "exist" };
     } else {
@@ -139,7 +139,7 @@ const GoogleSignInBtn = ({
       setThirdpartyLoader(true);
       // e.preventDefault()
       // console.log("handelSubmit", userDetails);
-      const params = { ...googleDetails, Phone: userDetails.Phone };
+      const params = { ...googleDetails, Phone: userDetails?.Phone };
       const payload = await Parse.Cloud.run("googlesign", params);
 
       // console.log("payload ", payload);
@@ -149,7 +149,7 @@ const GoogleSignInBtn = ({
             name: userDetails.Name,
             email: userDetails.Email,
             // "passsword":userDetails.Phone,
-            phone: userDetails.Phone,
+            phone: userDetails?.Phone || "",
             role: "contracts_User",
             company: userDetails.Company,
             jobTitle: userDetails.Destination
@@ -161,7 +161,7 @@ const GoogleSignInBtn = ({
           const LocalUserDetails = {
             name: userDetails.Name,
             email: userDetails.Email,
-            phone: userDetails.Phone,
+            phone: userDetails?.Phone || "",
             company: userDetails.Company
             // jobTitle: userDetails.JobTitle
           };
@@ -207,45 +207,22 @@ const GoogleSignInBtn = ({
     localStorage.setItem("parseAppId", appid);
   };
   return (
-    <div style={{ position: "relative" }}>
+    <div className="relative">
       {thirdpartyLoader && (
-        <div
-          style={{
-            position: "fixed",
-            width: "100vw",
-            height: "100vh",
-            backgroundColor: "rgba(0,0,0,0.2)",
-            top: 0,
-            left: 0,
-            zIndex: 2
-          }}
-        >
-          <div
-            style={{
-              position: "fixed",
-              fontSize: "50px",
-              color: "#3ac9d6",
-              top: "50%",
-              left: "45%"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
+          <Loader />
         </div>
       )}
       <div ref={googleBtn} className="text-sm"></div>
       <ModalUi showClose={false} isOpen={isModal} title="Sign up form">
-        <form className="px-4 py-3">
+        <form className="px-4 py-3 text-base-content">
           <div className="mb-3">
-            <label
-              htmlFor="Phone"
-              style={{ display: "flex" }}
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              Phone <span style={{ fontSize: 13, color: "red" }}>*</span>
+            <label htmlFor="Phone" className="block text-xs font-semibold">
+              Phone <span className="text-[13px] text-[red]">*</span>
             </label>
             <input
               type="tel"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
               id="Phone"
               value={userDetails.Phone}
               onChange={(e) =>
@@ -258,16 +235,12 @@ const GoogleSignInBtn = ({
             />
           </div>
           <div className="mb-3">
-            <label
-              htmlFor="Company"
-              style={{ display: "flex" }}
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              Company <span style={{ fontSize: 13, color: "red" }}>*</span>
+            <label htmlFor="Company" className="block text-xs font-semibold">
+              Company <span className="text-[13px] text-[red]">*</span>
             </label>
             <input
               type="text"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
               id="Company"
               value={userDetails.Company}
               onChange={(e) =>
@@ -280,16 +253,12 @@ const GoogleSignInBtn = ({
             />
           </div>
           <div className="mb-3">
-            <label
-              htmlFor="JobTitle"
-              style={{ display: "flex" }}
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              Job Title <span style={{ fontSize: 13, color: "red" }}>*</span>
+            <label htmlFor="JobTitle" className="block text-xs font-semibold">
+              Job Title <span className="text-[13px] text-[red]">*</span>
             </label>
             <input
               type="text"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
               id="JobTitle"
               value={userDetails.Destination}
               onChange={(e) =>
@@ -301,20 +270,18 @@ const GoogleSignInBtn = ({
               required
             />
           </div>
-          <div>
+          <div className="flex flex-row gap-2">
             <button
               type="button"
-              className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
+              className="op-btn op-btn-primary"
               onClick={() => handleSubmitbtn()}
-              style={{ marginRight: 10, backgroundColor: modalSubmitBtnColor }}
             >
               Sign up
             </button>
             <button
               type="button"
-              className="p-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+              className="op-btn op-btn-ghost"
               onClick={handleCloseModal}
-              style={{ width: 90, backgroundColor: modalCancelBtnColor }}
             >
               Cancel
             </button>

apps/OpenSign/src/components/RenderDebugPdf.js

@@ -4,26 +4,11 @@ import { Stage, Layer, Rect } from "react-konva";
 const RenderDebugPdf = (props) => {
   return (
     <div>
-      <div
-        style={{
-          position: "sticky",
-          top: 0,
-          padding: 10,
-          zIndex: 1,
-          backgroundColor: "white",
-          border: "1px solid grey",
-          margin: "5px 0"
-        }}
-      >
+      <div className="sticky top-0 p-[10px] z-10 bg-white border-[1px] border-[gray] my-[5px]">
         {`Co-ordinates: X - ${props.hoverCoordinates.x}, Y - ${props.hoverCoordinates.y}`}
       </div>
       <div
-        style={{
-          flex: 1,
-          position: "relative",
-          border: "1px solid grey",
-          overflow: "auto"
-        }}
+        className="relative flex-1 cursor-crosshair border-[1px] border-[gray] overflow-auto"
         onMouseMove={props.handleMouseMoveDiv}
       >
         <Document
@@ -56,7 +41,7 @@ const RenderDebugPdf = (props) => {
           onMouseUp={props.handleMouseUp}
           width={props.pdfDimension.width}
           height={props.pdfDimension.height}
-          style={{ position: "absolute", top: 0, left: 0 }}
+          className="absolute top-0 right-0"
         >
           <Layer>
             {props.annotations

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

@@ -26,18 +26,18 @@ const DashboardButton = (props) => {
         props.Data && props.Data.Redirect_type
           ? "cursor-pointer"
           : "cursor-default"
-      } w-full px-3 py-2 flex text-white rounded-md shadow overflow-hidden`}
+      } w-full shadow-md px-3 py-2 op-card bg-base-100`}
     >
-      <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">
+      <div className="flex flex-row items-center">
+        <span className="rounded-full bg-base-content bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
           <i
             className={`${
               props.Icon ? props.Icon : "fa fa-solid fa-info"
             } text-[25px] lg:text-[30px]`}
           ></i>
         </span>
-        <div className="">
-          <div className="text-base lg:text-lg text-black"> {props.Label}</div>
+        <div className="op-card-title text-lg ml-3 text-base-content">
+          {props.Label}
         </div>
       </div>
     </div>

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

@@ -149,7 +149,7 @@ const DashboardCard = (props) => {
               }
             })
             .then((res) => {
-              const listData = res.data?.result.filter(
+              const listData = res.data?.result?.filter(
                 (x) => x.Signers.length > 0
               );
               let arr = [];
@@ -336,25 +336,29 @@ 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 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">
+      <div className="flex items-center justify-start gap-5 text-white">
+        <span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
           <i
             className={`${
               props.Icon ? props.Icon : "fa fa-solid fa-info"
             } text-[25px] lg:text-[30px]`}
           ></i>
         </span>
-        <div className="">
+        <div className="font-medium">
           <div className="text-base lg:text-lg"> {props.Label}</div>
           <div className="text-2xl font-light">
             {loading ? <div className="loader-01"></div> : setFormat(response)}
           </div>
         </div>
       </div>
-      <div className="text-xs absolute top-2 right-1">
-        <Tooltip id={props.Label} iconColor={"white"} message={props?.Data?.tourMessage} />
+      <div className="text-xs absolute top-3 right-2">
+        <Tooltip
+          id={props.Label}
+          iconColor={"white"}
+          message={props?.Data?.tourMessage}
+        />
       </div>
     </div>
   );

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

@@ -3,6 +3,7 @@ import Parse from "parse";
 import ReportTable from "../../primitives/GetReportDisplay";
 import reportJson from "../../json/ReportJson";
 import axios from "axios";
+import Loader from "../../primitives/Loader";
 function DashboardReport(props) {
   // console.log("props ", props)
   const [List, setList] = useState([]);
@@ -97,11 +98,13 @@ function DashboardReport(props) {
             setIsMoreDocs(false);
           }
           setIsNextRecord(false);
-          setList((prevRecord) =>
-            prevRecord.length > 0
-              ? [...prevRecord, ...res.data.result]
-              : res.data.result
-          );
+          if (!res.data.result.error) {
+            setList((prevRecord) =>
+              prevRecord.length > 0
+                ? [...prevRecord, ...res.data.result]
+                : res.data.result
+            );
+          }
         }
         setIsLoader(false);
       } catch (err) {
@@ -110,6 +113,7 @@ function DashboardReport(props) {
           console.log("err ", err);
           setIsLoader(false);
         }
+        setIsLoader(false);
       }
     } else {
       setIsLoader(false);
@@ -118,21 +122,8 @@ function DashboardReport(props) {
   return (
     <>
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[250px] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
         <>

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

@@ -18,51 +18,26 @@ const buttonList = [
 ];
 const GetDashboard = (props) => {
   const Button = ({ label, redirectId, redirectType, icon }) => (
-    <div className={"bg-white rounded-md shadow  w-full"}>
-      <Suspense
-        fallback={
-          <div style={{ height: "300px" }}>
-            <div
-              style={{
-                marginLeft: "45%",
-                marginTop: "150px",
-                fontSize: "45px",
-                color: "#3dd3e0"
-              }}
-              className="loader-37"
-            ></div>
-          </div>
-        }
-      >
-        <DashboardButton
-          Icon={icon}
-          Label={label}
-          Data={{ Redirect_type: redirectType, Redirect_id: redirectId }}
-        />
-      </Suspense>
-    </div>
+    <DashboardButton
+      Icon={icon}
+      Label={label}
+      Data={{ Redirect_type: redirectType, Redirect_id: redirectId }}
+    />
   );
   const renderSwitchWithTour = (col) => {
     switch (col.widget.type) {
       case "Card":
         return (
           <div
-            className={"bg-[#2ed8b6] rounded-md shadow mb-3 md:mb-0"}
+            className={`${
+              col?.widget?.bgColor ? col.widget.bgColor : "bg-[#2ed8b6]"
+            } op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
             data-tut={col.widget.data.tourSection}
-            style={{ background: col.widget.bgColor }}
           >
             <Suspense
               fallback={
-                <div style={{ height: "300px" }}>
-                  <div
-                    style={{
-                      marginLeft: "45%",
-                      marginTop: "150px",
-                      fontSize: "45px",
-                      color: "#3dd3e0"
-                    }}
-                    className="loader-37"
-                  ></div>
+                <div className="h-[150px] w-full flex justify-center items-center">
+                  loading...
                 </div>
               }
             >
@@ -72,7 +47,6 @@ const GetDashboard = (props) => {
                 Format={col.widget.format && col.widget.format}
                 Data={col.widget.data}
                 FilterData={col.widget.filter}
-                DefaultQuery={props.DefaultQuery}
               />
             </Suspense>
           </div>
@@ -89,7 +63,7 @@ const GetDashboard = (props) => {
         );
       }
       default:
-        return null;
+        return <></>;
     }
   };
   const renderSwitch = (col) => {
@@ -97,8 +71,9 @@ const GetDashboard = (props) => {
       case "Card":
         return (
           <div
-            className={"bg-[#2ed8b6] rounded-md shadow mb-3 md:mb-0"}
-            style={{ background: col.widget.bgColor }}
+            className={`${
+              col?.widget?.bgColor ? col.widget.bgColor : "bg-[#2ed8b6]"
+            } op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
           >
             <Suspense fallback={<div>please wait</div>}>
               <DashboardCard
@@ -107,7 +82,6 @@ const GetDashboard = (props) => {
                 Format={col.widget.format && col.widget.format}
                 Data={col.widget.data}
                 FilterData={col.widget.filter}
-                DefaultQuery={props.DefaultQuery}
               />
             </Suspense>
           </div>
@@ -122,7 +96,7 @@ const GetDashboard = (props) => {
         );
       }
       default:
-        return null;
+        return <></>;
     }
   };
   return (
@@ -130,7 +104,7 @@ const GetDashboard = (props) => {
       <div className="mb-3">
         <div
           data-tut={"tourbutton"}
-          className="flex flex-col md:flex-row gap-6 md:gap-8"
+          className="flex flex-col md:flex-row gap-4"
         >
           {buttonList.map((btn) => (
             <Button
@@ -143,21 +117,19 @@ const GetDashboard = (props) => {
           ))}
         </div>
       </div>
-      {props.dashboard.map((val, key) => (
-        <div key={"a" + key} className="row">
-          {val.columns.map((col, i) =>
-            col.widget.data && col.widget.data.tourSection ? (
-              <div key={i} className={props.classnameArray[key][i]}>
-                {renderSwitchWithTour(col)}
-              </div>
-            ) : (
-              <div key={i} className={props.classnameArray[key][i]}>
-                {renderSwitch(col)}
-              </div>
-            )
-          )}
-        </div>
-      ))}
+      <div className="grid grid-cols-12 w-full gap-x-4">
+        {props?.dashboard?.columns?.map((col, i) =>
+          col.widget.data && col.widget.data.tourSection ? (
+            <div key={i} className={col?.colsize}>
+              {renderSwitchWithTour(col)}
+            </div>
+          ) : (
+            <div key={i} className={col?.colsize}>
+              {renderSwitch(col)}
+            </div>
+          )
+        )}
+      </div>
     </div>
   );
 };

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

@@ -9,7 +9,6 @@ import { useNavigate } from "react-router-dom";
 import Table from "react-bootstrap/Table";
 import * as HoverCard from "@radix-ui/react-hover-card";
 import ModalUi from "../../primitives/ModalUi";
-import { themeColor } from "../../constant/const";
 import FolderModal from "../shared/fields/FolderModal";
 
 function DriveBody(props) {
@@ -70,6 +69,7 @@ function DriveBody(props) {
         return item;
       });
       props.setPdfData(updatedData);
+      props.sortingData(null, null, updatedData);
       await axios
         .put(
           `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
@@ -214,8 +214,8 @@ function DriveBody(props) {
         ? true
         : false
       : selecFolderId
-      ? false
-      : true;
+        ? false
+        : true;
     if (!checkExist) {
       if (moveFolderId) {
         updateData = {
@@ -312,32 +312,21 @@ function DriveBody(props) {
 
     const signersName = () => {
       const getSignersName = signerExist.map((data) => data.Name);
-      const signerName = getSignersName.join(",");
+      const signerName = getSignersName.join(", ");
 
       return (
-        <span
-          className="statusSpan"
-          style={{ width: "90%", wordWrap: "break-word" }}
-        >
-          {signerName}{" "}
-        </span>
+        <span className="statusSpan w-[90%] break-words">{signerName}</span>
       );
     };
     return listType === "table" ? (
       data.Type === "Folder" ? (
         <tr onClick={() => handleOnclikFolder(data)}>
-          <td
-            style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
-          >
+          <td className="cursor-pointer flex items-center">
             <i
-              className="fa fa-folder"
+              className="fa fa-folder mr-[8px] text-[26px] text-[#f0ad26]"
               aria-hidden="true"
-              style={{ color: "#f0ad26", marginRight: "8px", fontSize: "26px" }}
             ></i>
-
-            <span style={{ fontSize: "12px", fontWeight: "500" }}>
-              {data.Name}
-            </span>
+            <span className="text-[12px] font-medium">{data.Name}</span>
           </td>
           <td>_</td>
           <td>Folder</td>
@@ -346,17 +335,9 @@ function DriveBody(props) {
         </tr>
       ) : (
         <tr onClick={() => checkPdfStatus(data)}>
-          <td
-            style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
-          >
-            <i
-              className="fa fa-file-pdf"
-              style={{ color: "#ed4d0e", marginRight: "8px", fontSize: "26px" }}
-            ></i>
-
-            <span style={{ fontSize: "12px", fontWeight: "500" }}>
-              {data.Name}
-            </span>
+          <td className="cursor-pointer flex items-center">
+            <i className="fa fa-file-pdf mr-[8px] text-[26px] text-[#ed4d0e]"></i>
+            <span className="text-[12px] font-medium">{data.Name}</span>
           </td>
           <td>{createddate}</td>
           <td>Pdf</td>
@@ -367,30 +348,22 @@ function DriveBody(props) {
                 e.stopPropagation();
                 handleMenuItemClick("Download", data);
               }}
-              className="fa fa-download"
+              className="fa fa-download mr-[8px] text-[#ed280e]"
               aria-hidden="true"
-              style={{ color: "#ed280e", marginRight: "8px" }}
             ></i>
           </td>
         </tr>
       )
     ) : listType === "list" && data.Type === "Folder" ? (
-      <div key={ind} className="folderBox">
+      <div key={ind} className="icon-container">
         <ContextMenu.Root>
           <ContextMenu.Trigger className="ContextMenuTrigger">
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                cursor: "pointer"
-              }}
-            >
+            <div data-tut={props.dataTutSeventh}>
               <img
-                alt="no img"
+                alt="folder"
                 onClick={() => handleOnclikFolder(data)}
                 src={folder}
-                width={100}
-                height={103}
+                className="w-full h-full"
               />
               {rename === data.objectId ? (
                 <input
@@ -409,12 +382,7 @@ function DriveBody(props) {
                   defaultValue={renameValue}
                   // value={renameValue}
                   onChange={(e) => setRenameValue(e.target.value)}
-                  style={{
-                    width: "100px",
-                    border: "1.5px solid black",
-                    borderRadius: "2px",
-                    fontSize: "10px"
-                  }}
+                  className="w-[100px] border-[1.5px] border-black rounded-sm text-[10px]"
                 />
               ) : (
                 <span className="foldName">{data.Name}</span>
@@ -432,8 +400,8 @@ function DriveBody(props) {
                 onClick={() => handleMenuItemClick("Rename", data)}
                 className="ContextMenuItem"
               >
-                <i className="fa-solid fa-font"></i>
-                <span style={{ marginLeft: "8px" }}>Rename</span>
+                <i className="fa-solid fa-font mr-[8px]"></i>
+                <span>Rename</span>
               </ContextMenu.Item>
             </ContextMenu.Content>
           </ContextMenu.Portal>
@@ -448,9 +416,10 @@ function DriveBody(props) {
                 <ContextMenu.Trigger className="ContextMenuTrigger">
                   <img
                     alt="PDF"
-                    className="pdf-icon"
+                    className="w-full h-full"
                     src={pdfLogo}
                     onClick={() => checkPdfStatus(data)}
+                    data-tut={props.dataTutSixth}
                   />
                   {rename === data.objectId ? (
                     <input
@@ -469,12 +438,7 @@ function DriveBody(props) {
                       defaultValue={renameValue}
                       // value={renameValue}
                       onChange={(e) => setRenameValue(e.target.value)}
-                      style={{
-                        width: "100px",
-                        border: "1.5px solid black",
-                        borderRadius: "2px",
-                        fontSize: "10px"
-                      }}
+                      className="w-[100px] border-[1.5px] border-black rounded-sm text-[10px]"
                     />
                   ) : (
                     <span className="fileName">{data.Name}</span>
@@ -519,7 +483,7 @@ function DriveBody(props) {
                         className="ContextMenuItem"
                       >
                         <i className={menu.icon}></i>
-                        <span style={{ marginLeft: "8px" }}>{menu.type}</span>
+                        <span className="ml-[8px]">{menu.type}</span>
                       </ContextMenu.Item>
                     );
                   })}
@@ -530,21 +494,21 @@ function DriveBody(props) {
         </HoverCard.Trigger>
         <HoverCard.Portal>
           <HoverCard.Content className="HoverCardContent" sideOffset={5}>
-            <strong style={{ fontSize: "13px" }}>Title: </strong>
+            <strong className="text-[13px]">Title: </strong>
             <span className="statusSpan" style={{ marginBottom: "0px" }}>
               {" "}
               {data.Name}
             </span>
             <br />
-            <strong style={{ fontSize: "13px" }}>Status: </strong>
+            <strong className="text-[13px]">Status: </strong>
             <span className="statusSpan"> {status}</span>
             <br />
-            <strong style={{ fontSize: "13px" }}>Created Date: </strong>
+            <strong className="text-[13px]">Created Date: </strong>
             <span className="statusSpan">{createddate}</span>
             <br />
             {signerExist && (
               <>
-                <strong style={{ fontSize: "13px" }}>Signers: </strong>
+                <strong className="text-[13px]">Signers: </strong>
                 {/* <span className="statusSpan">kjefjjnejkfnkbjs bbfjkdsbjbfjkbjk kscbjkbjkb</span> */}
                 {signersName()}
               </>
@@ -584,13 +548,9 @@ function DriveBody(props) {
           </Table>
         </div>
       ) : (
-        <div className="pdfContainer">
+        <div className="flex flex-row flex-wrap items-center mt-1 pb-[20px] mx-[5px]">
           {props.pdfData.map((data, ind) => {
-            return (
-              <div className="box" key={ind}>
-                {handleFolderData(data, ind, "list")}
-              </div>
-            );
+            return <div key={ind}>{handleFolderData(data, ind, "list")}</div>;
           })}
         </div>
       )}
@@ -606,44 +566,23 @@ function DriveBody(props) {
       )}
       <ModalUi
         isOpen={isDeleteDoc}
-        headerColor={themeColor}
         title={"Delete Document"}
-        handleClose={() => {
-          setIsDeleteDoc(false);
-        }}
+        handleClose={() => setIsDeleteDoc(false)}
       >
-        <div style={{ height: "100%", padding: 20 }}>
+        <div className="h-full p-[20px] text-base-content">
           <p>Are you sure you want to delete this document?</p>
-
-          <div
-            style={{
-              height: "1px",
-              backgroundColor: "#9f9f9f",
-              width: "100%",
-              marginTop: "15px",
-              marginBottom: "15px"
-            }}
-          ></div>
-
+          <div className="h-[1px] w-full bg-[#9f9f9f] my-[15px]"></div>
           <button
-            onClick={() => {
-              handleDeleteDocument(selectDoc);
-            }}
-            style={{
-              background: themeColor,
-              color: "white"
-            }}
+            onClick={() => handleDeleteDocument(selectDoc)}
             type="button"
-            className="finishBtn"
+            className="op-btn op-btn-primary mr-2"
           >
             Yes
           </button>
           <button
-            onClick={() => {
-              setIsDeleteDoc(false);
-            }}
+            onClick={() => setIsDeleteDoc(false)}
             type="button"
-            className="finishBtn cancelBtn"
+            className="op-btn op-btn-neutral"
           >
             No
           </button>

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

@@ -8,11 +8,8 @@ const AddRoleModal = (props) => {
       isOpen={props.isModalRole}
       handleClose={props.handleCloseRoleModal}
     >
-      <div className="addusercontainer">
-        <form
-          style={{ display: "flex", flexDirection: "column" }}
-          onSubmit={props.handleAddRole}
-        >
+      <div className="h-full py-[10px] px-[20px]">
+        <form className="flex flex-col" onSubmit={props.handleAddRole}>
           <input
             value={props.roleName}
             onChange={(e) => props.setRoleName(e.target.value)}
@@ -21,39 +18,20 @@ const AddRoleModal = (props) => {
                 ? "User " + (props.signersdata.length + 1)
                 : "User 1"
             }
-            className="addUserInput"
+            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs mt-1"
           />
-          <p
-            style={{
-              color: "grey",
-              fontSize: 11,
-              margin: "10px 0 10px 5px"
-            }}
-          >
+          <p className="text-[gray] text-[11px] mt-[5px] mb-[10px] ml-[10px]">
             e.g: Customer, Hr, Director, Manager, Student, etc...
           </p>
           <div>
-            <div
-              style={{
-                height: "1px",
-                backgroundColor: "#9f9f9f",
-                width: "100%",
-                marginBottom: "15px"
-              }}
-            ></div>
-            <button
-              type="submit"
-              style={{
-                background: "#00a2b7"
-              }}
-              className="finishBtn"
-            >
+            <div className="h-[1px] w-full bg-[#9f9f9f] mb-[10px]"></div>
+            <button type="submit" className="op-btn op-btn-primary">
               Add
             </button>
             <button
               onClick={props.handleCloseRoleModal}
               type="button"
-              className="finishBtn cancelBtn"
+              className="op-btn op-btn-ghost ml-2"
             >
               Close
             </button>

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { themeColor } from "../../constant/const";
 function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
   const confirmToaddDefaultSign = () => {
     if (xyPostion.length > 0) {
@@ -17,55 +16,26 @@ function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
   };
 
   return (
-    <div>
-      <div
-        style={{
-          background: themeColor,
-          color: "white",
-          padding: "5px",
-          fontFamily: "sans-serif",
-          marginTop: "5px"
-        }}
-      >
+    <div data-tut="reactourThird">
+      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
         Signature
       </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          marginTop: "10px",
-          fontWeight: "600"
-        }}
-      >
-        <>
-          <p>Your Signature</p>
-          <div className="defaultSignBox">
-            <img
-              alt="default img"
-              style={{
-                width: "100%",
-                height: "100%",
-                objectFit: "contain"
-              }}
-              src={defaultSignImg}
-            />
-          </div>
-          <button
-            style={{
-              background: themeColor,
-              color: "white",
-              marginTop: "20px",
-              cursor: "pointer",
-              marginBottom: "10px"
-            }}
-            type="button"
-            className="finishBtn finishnHover"
-            onClick={() => confirmToaddDefaultSign()}
-          >
-            Auto Sign All
-          </button>
-        </>
+      <div className="flex flex-col items-center mt-[10px] font-semibold">
+        <p className="text-base-content">Your Signature</p>
+        <div className="op-card shadow-md h-[111px] w-[90%] p-2">
+          <img
+            alt="signature"
+            className="w-full h-full object-contain"
+            src={defaultSignImg}
+          />
+        </div>
+        <button
+          type="button"
+          className="op-btn op-btn-primary op-btn-sm mt-[10px]"
+          onClick={() => confirmToaddDefaultSign()}
+        >
+          Auto Sign All
+        </button>
       </div>
     </div>
   );

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import Loader from "../../primitives/LoaderWithMsg";
+import LoaderWithMsg from "../../primitives/LoaderWithMsg";
 import { contractDocument } from "../../constant/Utils";
 import HandleError from "../../primitives/HandleError";
 function DraftDocument() {
@@ -86,7 +86,7 @@ function DraftDocument() {
   return (
     <div>
       {isLoading.isLoader ? (
-        <Loader isLoading={isLoading} />
+        <LoaderWithMsg isLoading={isLoading} />
       ) : (
         <HandleError handleError={isLoading.message} />
       )}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { isEnableSubscription, themeColor } from "../../constant/const";
+import { isEnableSubscription } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
 import { radioButtonWidget } from "../../constant/Utils";
 import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
@@ -147,7 +147,7 @@ function DropdownWidgetOption(props) {
 
   return (
     <ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
-      <div className="h-full p-[15px]">
+      <div className="h-full p-[15px] text-base-content">
         <form
           onSubmit={(e) => {
             e.preventDefault();
@@ -155,38 +155,25 @@ function DropdownWidgetOption(props) {
           }}
         >
           <div>
-            <label style={{ fontSize: "13px", fontWeight: "600" }}>
-              Name<span style={{ color: "red", fontSize: 13 }}> *</span>
+            <label className="text-[13px] font-semibold">
+              Name<span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
               required
               defaultValue={dropdownName}
               value={dropdownName}
               onChange={(e) => setDropdownName(e.target.value)}
-              className="drodown-input"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
 
-            <label
-              style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
-            >
+            <label className="text-[13px] font-semibold mt-[5px]">
               Options
             </label>
-
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column"
-              }}
-            >
+            <div className="flex flex-col">
               {dropdownOptionList.map((option, index) => (
                 <div
                   key={index}
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    marginBottom: "5px",
-                    alignItems: "center"
-                  }}
+                  className="flex flex-row mb-[5px] items-center"
                 >
                   {props.type === "checkbox" && !props.isSignYourself && (
                     <input
@@ -206,51 +193,34 @@ function DropdownWidgetOption(props) {
                           setDefaultCheckbox(removeOption);
                         }
                       }}
-                      style={{
-                        width: "23px",
-                        height: "19px",
-                        marginRight: "5px"
-                      }}
+                      className="op-checkbox focus:outline-none hover:border-base-content mr-[5px]"
                     />
                   )}
                   <input
                     required
-                    className="drodown-input"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                     type="text"
                     value={option}
                     onChange={(e) => handleInputChange(index, e.target.value)}
                   />
 
                   <i
-                    className="fa-solid fa-rectangle-xmark"
+                    className="fa-solid fa-rectangle-xmark text-[25px] ml-[10px] text-error"
                     onClick={() => handleDeleteInput(index)}
-                    style={{
-                      color: "red",
-                      fontSize: "25px",
-                      marginLeft: "10px"
-                    }}
                   ></i>
                 </div>
               ))}
               <i
                 onClick={handleAddInput}
-                style={{
-                  cursor: "pointer",
-                  color: themeColor,
-                  fontSize: "25px",
-                  marginLeft: "10px"
-                }}
-                className="fa-solid fa-square-plus"
+                className="fa-solid fa-square-plus text-[25px] ml-[10px] text-primary"
               ></i>
               <div>
                 {props.type === "checkbox" && !props.isSignYourself && (
                   <>
                     <label
-                      style={{
-                        fontSize: "13px",
-                        fontWeight: "600",
-                        color: !props.isSubscribe && "gray"
-                      }}
+                      className={`${
+                        !props.isSubscribe ? "text-[gray]" : ""
+                      } text-[13px] font-semibold`}
                     >
                       Minimun check
                     </label>
@@ -263,18 +233,16 @@ function DropdownWidgetOption(props) {
                         const count = handleSetMinMax(e);
                         setMinCount(count);
                       }}
-                      className={
+                      className={`${
                         props.isSubscribe || !isEnableSubscription
-                          ? "drodown-input"
-                          : "disabled drodown-input"
-                      }
+                          ? ""
+                          : "pointer-events-none bg-opacity-50"
+                      } op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
                     />
                     <label
-                      style={{
-                        fontSize: "13px",
-                        fontWeight: "600",
-                        color: !props.isSubscribe && "gray"
-                      }}
+                      className={`${
+                        !props.isSubscribe ? "text-[gray]" : ""
+                      } text-[13px] font-semibold`}
                     >
                       Maximum check
                     </label>
@@ -286,11 +254,11 @@ function DropdownWidgetOption(props) {
                         const count = handleSetMinMax(e);
                         setMaxCount(count);
                       }}
-                      className={
+                      className={`${
                         props.isSubscribe || !isEnableSubscription
-                          ? "drodown-input"
-                          : "disabled drodown-input"
-                      }
+                          ? ""
+                          : "pointer-events-none bg-opacity-50"
+                      } op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
                     />
                   </>
                 )}
@@ -298,32 +266,22 @@ function DropdownWidgetOption(props) {
             </div>
             {["dropdown", radioButtonWidget].includes(props.type) && (
               <>
-                <label
-                  style={{
-                    fontSize: "13px",
-                    fontWeight: "600",
-                    marginTop: "5px"
-                  }}
-                >
+                <label className="text-[13px] font-semibold mt-[5px]">
                   Default value
                 </label>
                 <select
                   onChange={(e) => setDefaultValue(e.target.value)}
-                  className="drodown-input"
+                  className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
                   name="defaultvalue"
                   value={defaultValue}
                   placeholder="select default value"
                 >
-                  <option value="" disabled hidden style={{ fontSize: "13px" }}>
+                  <option value="" disabled hidden className="text-[13px]">
                     Select...
                   </option>
                   {dropdownOptionList.map((data, ind) => {
                     return (
-                      <option
-                        style={{ fontSize: "13px" }}
-                        key={ind}
-                        value={data}
-                      >
+                      <option className="text-[13px]" key={ind} value={data}>
                         {data}
                       </option>
                     );
@@ -333,35 +291,21 @@ function DropdownWidgetOption(props) {
             )}
             {props.type !== "checkbox" && props.type !== radioButtonWidget && (
               <>
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: 10,
-                    marginTop: "0.5rem"
-                  }}
-                >
+                <div className="flex flex-row gap-[10px] mt-[0.5rem]">
                   {statusArr.map((data, ind) => {
                     return (
                       <div
                         key={ind}
-                        style={{
-                          display: "flex",
-                          flexDirection: "row",
-                          gap: 5,
-                          alignItems: "center"
-                        }}
+                        className="flex flex-row gap-[5px] items-center"
                       >
                         <input
-                          style={{ accentColor: "red" }}
+                          className="op-radio op-radio-xs my-1"
                           type="radio"
                           name="status"
                           onChange={() => setStatus(data.toLowerCase())}
                           checked={status.toLowerCase() === data.toLowerCase()}
                         />
-                        <div style={{ fontSize: "13px", fontWeight: "500" }}>
-                          {data}
-                        </div>
+                        <div className="text-[13px] font-500">{data}</div>
                       </div>
                     );
                   })}
@@ -369,33 +313,31 @@ function DropdownWidgetOption(props) {
               </>
             )}
             {["checkbox", radioButtonWidget].includes(props.type) && (
-              <div className="flex flex-row gap-5 mt-2 items-center text-center">
+              <div className="flex flex-row gap-5 my-2 items-center text-center">
                 {!props.isSignYourself && (
-                  <div>
+                  <div className="flex items-center">
                     <input
                       id="isreadonly"
                       type="checkbox"
                       checked={isReadOnly}
-                      onChange={(e) => {
-                        setIsReadOnly(e.target.checked);
-                      }}
+                      className="op-checkbox op-checkbox-sm"
+                      onChange={(e) => setIsReadOnly(e.target.checked)}
                     />
-                    <label className="ml-1" htmlFor="isreadonly">
+                    <label className="ml-1 mb-0" htmlFor="isreadonly">
                       Is read only
                     </label>
                   </div>
                 )}
-                <div>
+                <div className="flex items-center">
                   <input
                     id="ishidelabel"
                     type="checkbox"
                     checked={isHideLabel}
-                    onChange={(e) => {
-                      setIsHideLabel(e.target.checked);
-                    }}
+                    className="op-checkbox op-checkbox-sm"
+                    onChange={(e) => setIsHideLabel(e.target.checked)}
                   />
 
-                  <label className="ml-1" htmlFor="ishidelabel">
+                  <label className="ml-1 mb-0" htmlFor="ishidelabel">
                     Hide labels
                   </label>
                 </div>
@@ -421,19 +363,15 @@ function DropdownWidgetOption(props) {
 
           <button
             disabled={dropdownOptionList.length === 0 && true}
-            style={{
-              background: themeColor,
-              color: "white"
-            }}
             type="submit"
-            className={"finishBtn"}
+            className="op-btn op-btn-primary"
           >
             Save
           </button>
           {props.currWidgetsDetails?.options?.values?.length > 0 && (
             <button
               type="submit"
-              className="finishBtn cancelBtn"
+              className="op-btn op-btn-ghost ml-1"
               onClick={() => {
                 props.handleClose && props.handleClose();
                 resetState();

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

@@ -1,5 +1,8 @@
-import React, { useState } from "react";
-import "../../styles/AddUser.css";
+import React, { useState, useEffect } from "react";
+import { checkIsSubscribed, getFileName } from "../../constant/Utils";
+import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
+import Upgrade from "../../primitives/Upgrade";
+import { isEnableSubscription } from "../../constant/const";
 // import SelectFolder from "../../premitives/SelectFolder";
 
 const EditTemplate = ({ template, onSuccess }) => {
@@ -8,9 +11,21 @@ const EditTemplate = ({ template, onSuccess }) => {
     Name: template?.Name || "",
     Note: template?.Note || "",
     Description: template?.Description || "",
-    SendinOrder: template?.SendinOrder ? `${template?.SendinOrder}` : "false"
+    SendinOrder: template?.SendinOrder ? `${template?.SendinOrder}` : "false",
+    AutomaticReminders: template?.AutomaticReminders || false,
+    RemindOnceInEvery: template?.RemindOnceInEvery || 5
   });
-
+  const [isSubscribe, setIsSubscribe] = useState(false);
+  useEffect(() => {
+    fetchSubscription();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const fetchSubscription = async () => {
+    if (isEnableSubscription) {
+      const getIsSubscribe = await checkIsSubscribed();
+      setIsSubscribe(getIsSubscribe);
+    }
+  };
   const handleStrInput = (e) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
@@ -24,34 +39,40 @@ const EditTemplate = ({ template, onSuccess }) => {
     e.preventDefault();
     e.stopPropagation();
     const isChecked = formData.SendinOrder === "true" ? true : false;
-    const data = { ...formData, SendinOrder: isChecked };
+    const AutoReminder = formData?.AutomaticReminders || false;
+
+    let reminderDate = {};
+    if (AutoReminder) {
+      const RemindOnceInEvery = parseInt(formData?.RemindOnceInEvery);
+      const ReminderDate = new Date(template?.createdAt);
+      ReminderDate.setDate(ReminderDate.getDate() + RemindOnceInEvery);
+      reminderDate = { NextReminderDate: ReminderDate };
+    }
+    const data = { ...formData, SendinOrder: isChecked, ...reminderDate };
     onSuccess(data);
   };
-
+  const handleAutoReminder = () => {
+    setFormData((prev) => ({
+      ...prev,
+      AutomaticReminders: !formData.AutomaticReminders
+    }));
+  };
   return (
-    <div className="addusercontainer">
-      <div className="form-wrapper">
+    <div className="max-h-[300px] md:max-h-[400px] overflow-y-scroll p-[10px]">
+      <div className="text-base-content">
         <form onSubmit={handleSubmit}>
           <div>
-            <label htmlFor="name" style={{ fontSize: 13 }}>
+            <label htmlFor="name" className="text-[13px]">
               File
             </label>
-            <div
-              style={{
-                padding: "0.5rem 0.75rem",
-                border: "1px solid #d1d5db",
-                borderRadius: "0.375rem",
-                fontSize: "0.75rem",
-                fontWeight: "700"
-              }}
-            >
-              {template.URL?.split("/")?.pop()?.split("_")[1]}
+            <div className="op-input op-input-bordered op-input-sm focus:outline-none py-2 font-semibold w-full text-xs">
+              {getFileName(template.URL)}
             </div>
           </div>
           <div className="form-section">
-            <label htmlFor="name" style={{ fontSize: 13 }}>
+            <label htmlFor="name" className="text-[13px]">
               Name
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[13px] text-[red]"> *</span>
             </label>
             <input
               type="text"
@@ -59,11 +80,11 @@ const EditTemplate = ({ template, onSuccess }) => {
               value={formData.Name}
               onChange={(e) => handleStrInput(e)}
               required
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="form-section">
-            <label htmlFor="Note" style={{ fontSize: 13 }}>
+            <label htmlFor="Note" className="text-[13px]">
               Note
             </label>
             <input
@@ -72,11 +93,11 @@ const EditTemplate = ({ template, onSuccess }) => {
               id="Note"
               value={formData.Note}
               onChange={(e) => handleStrInput(e)}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="form-section">
-            <label htmlFor="Description" style={{ fontSize: 13 }}>
+            <label htmlFor="Description" className="text-[13px]">
               Description
             </label>
             <input
@@ -85,51 +106,85 @@ const EditTemplate = ({ template, onSuccess }) => {
               id="Description"
               value={formData.Description}
               onChange={(e) => handleStrInput(e)}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="form-section">
-            <label style={{ fontSize: 13 }}>Send In Order</label>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                marginLeft: 8,
-                marginBottom: 5
-              }}
-            >
+            <label className="text-[13px]">Send In Order</label>
+            <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
               <input
                 type="radio"
                 value={"true"}
+                className="op-radio op-radio-xs"
                 name="SendinOrder"
                 checked={formData.SendinOrder === "true"}
                 onChange={handleStrInput}
               />
-              <div style={{ fontSize: 12 }}>Yes</div>
+              <div className="text-[12px]">Yes</div>
             </div>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                marginLeft: 8,
-                marginBottom: 5
-              }}
-            >
+            <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
               <input
                 type="radio"
                 value={"false"}
                 name="SendinOrder"
+                className="op-radio op-radio-xs"
                 checked={formData.SendinOrder === "false"}
                 onChange={handleStrInput}
               />
-              <div style={{ fontSize: 12 }}>No</div>
+              <div className="text-[12px]">No</div>
             </div>
           </div>
-          {/* <SelectFolder onSuccess={handleFolder} folderCls={"contracts_Template"} /> */}
-          <div className="buttoncontainer">
-            <button type="submit" className="submitbutton">
+          <div className="text-xs mt-2">
+            {!isEnableSubscription && (
+              <PremiumAlertHeader
+                message={
+                  "Disable Auto reminder is free in beta, this feature will incur a fee later."
+                }
+              />
+            )}
+            <span
+              className={
+                isSubscribe || !isEnableSubscription
+                  ? "font-semibold"
+                  : "font-semibold text-gray-300"
+              }
+            >
+              Auto reminder{"  "}
+              {!isSubscribe && isEnableSubscription && <Upgrade />}
+            </span>
+            <label
+              className={`${
+                isSubscribe || !isEnableSubscription
+                  ? "cursor-pointer "
+                  : "pointer-events-none opacity-50"
+              } relative block items-center mb-0`}
+            >
+              <input
+                checked={formData.AutomaticReminders}
+                onChange={handleAutoReminder}
+                type="checkbox"
+                className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white mt-2"
+              />
+            </label>
+          </div>
+          {isSubscribe && formData?.AutomaticReminders === true && (
+            <div className="text-xs mt-2">
+              <label className="block">
+                Remind once in every (Days)
+                <span className="text-red-500 text-[13px]">*</span>
+              </label>
+              <input
+                type="number"
+                value={formData.RemindOnceInEvery}
+                name="RemindOnceInEvery"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                onChange={handleStrInput}
+                required
+              />
+            </div>
+          )}
+          <div className="mt-[1rem] flex justify-start">
+            <button type="submit" className="op-btn op-btn-primary">
               Submit
             </button>
           </div>

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

@@ -0,0 +1,157 @@
+import React from "react";
+import { Quill } from "react-quill";
+
+// Custom Undo button icon component for Quill editor. You can import it directly
+// from 'quill/assets/icons/undo.svg' but I found that a number of loaders do not
+// handle them correctly
+const CustomUndo = () => (
+  <svg viewBox="0 0 18 18">
+    <polygon className="ql-fill ql-stroke" points="6 10 4 12 2 10 6 10" />
+    <path
+      className="ql-stroke"
+      d="M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9"
+    />
+  </svg>
+);
+
+// Redo button icon component for Quill editor
+const CustomRedo = () => (
+  <svg viewBox="0 0 18 18">
+    <polygon className="ql-fill ql-stroke" points="12 10 14 12 16 10 12 10" />
+    <path
+      className="ql-stroke"
+      d="M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5"
+    />
+  </svg>
+);
+
+// Undo and redo functions for Custom Toolbar
+function undoChange() {
+  this.quill.history.undo();
+}
+function redoChange() {
+  this.quill.history.redo();
+}
+
+// Add sizes to whitelist and register them
+const Size = Quill.import("formats/size");
+Size.whitelist = ["extra-small", "small", "medium", "large"];
+Quill.register(Size, true);
+
+// Add fonts to whitelist and register them
+const Font = Quill.import("formats/font");
+Font.whitelist = [
+  "arial",
+  "comic-sans",
+  "courier-new",
+  "georgia",
+  "helvetica",
+  "lucida"
+];
+Quill.register(Font, true);
+
+// Modules object for setting up the Quill editor
+export const module1 = {
+  toolbar: {
+    container: "#toolbar1",
+    handlers: {
+      undo: undoChange,
+      redo: redoChange
+    }
+  },
+  history: {
+    delay: 500,
+    maxStack: 100,
+    userOnly: true
+  }
+};
+// Formats objects for setting up the Quill editor
+export const formats = [
+  "header",
+  "font",
+  "size",
+  "bold",
+  "italic",
+  "underline",
+  "align",
+  "strike",
+  "script",
+  "blockquote",
+  "background",
+  "list",
+  "bullet",
+  "indent",
+  "link",
+  "image",
+  "color",
+  "code-block"
+];
+// Quill Toolbar component
+export const QuillToolbar = ({ containerId }) => (
+  <div id={containerId}>
+    <span className="ql-formats">
+      <select className="ql-font" defaultValue="arial">
+        <option value="arial">Arial</option>
+        <option value="comic-sans">Comic Sans</option>
+        <option value="courier-new">Courier New</option>
+        <option value="georgia">Georgia</option>
+        <option value="helvetica">Helvetica</option>
+        <option value="lucida">Lucida</option>
+      </select>
+      <select className="ql-size" defaultValue="medium">
+        <option value="extra-small">Size 1</option>
+        <option value="small">Size 2</option>
+        <option value="medium">Size 3</option>
+        <option value="large">Size 4</option>
+      </select>
+      <select className="ql-header" defaultValue="3">
+        <option value="1">Heading</option>
+        <option value="2">Subheading</option>
+        <option value="3">Normal</option>
+      </select>
+    </span>
+    <span className="ql-formats">
+      <button className="ql-bold" />
+      <button className="ql-italic" />
+      <button className="ql-underline" />
+      <button className="ql-strike" />
+    </span>
+    <span className="ql-formats">
+      <button className="ql-list" value="ordered" />
+      <button className="ql-list" value="bullet" />
+      <button className="ql-indent" value="-1" />
+      <button className="ql-indent" value="+1" />
+    </span>
+    <span className="ql-formats">
+      <button className="ql-script" value="super" />
+      <button className="ql-script" value="sub" />
+      <button className="ql-blockquote" />
+      <button className="ql-direction" />
+    </span>
+    <span className="ql-formats">
+      <select className="ql-align" />
+      <select className="ql-color" />
+      <select className="ql-background" />
+    </span>
+    <span className="ql-formats">
+      <button className="ql-link" />
+      <button className="ql-image" />
+      <button className="ql-video" />
+    </span>
+    <span className="ql-formats">
+      <button className="ql-formula" />
+      <button className="ql-code-block" />
+      <button className="ql-clean" />
+    </span>
+    <span className="ql-formats">
+      <button className="ql-undo">
+        <CustomUndo />
+      </button>
+      <button className="ql-redo">
+        <CustomRedo />
+      </button>
+    </span>
+  </div>
+);
+
+export default QuillToolbar;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import Tooltip from "../../primitives/Tooltip";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
+import EditorToolbar, { module1, formats } from "./EditorToolbar";
+
+export function EmailBody(props) {
+  return (
+    <form className="flex flex-col text-base-content text-lg font-normal">
+      <div className="m-2 md:m-10 p-3 md:p-10 shadow-md hover:shadow-lg border-[1px] border-indigo-800 rounded-md">
+        <label className="text-sm ml-2">
+          Subject <Tooltip message={"email subject"} />
+        </label>
+        <input
+          required
+          value={props.requestSubject}
+          onChange={(e) => props.setRequestSubject(e.target.value)}
+          placeholder='${senderName} has requested you to sign "${documentName}"'
+          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+        />
+        <label className="text-sm ml-2 mt-3">
+          Body <Tooltip message={"email body"} />
+        </label>
+        <div className="px-3 py-2 w-full focus:outline-none text-xs">
+          <EditorToolbar containerId="toolbar1" />
+          <ReactQuill
+            theme="snow"
+            value={props.requestBody}
+            // value={typedText}
+            placeholder="add body of email "
+            // readOnly={loading}
+            // onChangeSelection={handleTextSelection} // Listen for text selection
+            ref={props.editorRef}
+            modules={module1}
+            formats={formats}
+            onChange={props.handleOnchangeRequest}
+          />
+        </div>
+      </div>
+    </form>
+  );
+}

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

@@ -5,25 +5,27 @@ import axios from "axios";
 import { getBase64FromUrl } from "../../constant/Utils";
 import { themeColor } from "../../constant/const";
 import printModule from "print-js";
-import loader from "../../assets/images/loader2.gif";
+import Loader from "../../primitives/Loader";
 
 function EmailComponent({
   isEmail,
   pdfUrl,
-  isCeleb,
   setIsEmail,
   setSuccessEmail,
   pdfName,
   sender,
   setIsAlert,
-  extUserId
+  extUserId,
+  activeMailAdapter
 }) {
   const [emailList, setEmailList] = useState([]);
   const [emailValue, setEmailValue] = useState();
   const [isLoading, setIsLoading] = useState(false);
+  const [isEmailCelebration, setIsEmailCelebration] = useState(false);
   //function for send email
   const sendEmail = async () => {
     setIsLoading(true);
+
     let sendMail;
     for (let i = 0; i < emailList.length; i++) {
       try {
@@ -39,6 +41,7 @@ function EmailComponent({
         const openSignUrl = "https://www.opensignlabs.com/contact-us";
         const themeBGcolor = themeColor;
         let params = {
+          mailProvider: activeMailAdapter,
           extUserId: extUserId,
           pdfName: pdfName,
           url: pdfUrl,
@@ -59,6 +62,10 @@ function EmailComponent({
             " target=_blank>here</a> </p></div></div></body></html>"
         };
         sendMail = await axios.post(url, params, { headers: headers });
+        setIsEmailCelebration(true);
+        setTimeout(() => {
+          setIsEmailCelebration(false);
+        }, 3000);
       } catch (error) {
         console.log("error", error);
         setIsLoading(false);
@@ -166,148 +173,59 @@ function EmailComponent({
         <div className="modaloverlay">
           <div className="modalcontainer">
             {isLoading && (
-              <div
-                style={{
-                  position: "absolute",
-                  height: "100%",
-                  width: "100%",
-                  display: "flex",
-                  justifyContent: "center",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  zIndex: "20",
-                  backgroundColor: "#e6f2f2",
-                  opacity: 0.8
-                }}
-              >
-                <img
-                  alt="no img"
-                  src={loader}
-                  style={{ width: "70px", height: "70px" }}
-                />
-                <span style={{ fontSize: "12px", fontWeight: "bold" }}>
+              <div className="absolute w-full h-full flex flex-col justify-center items-center z-[20] bg-[#e6f2f2] bg-opacity-80">
+                <Loader />
+                <span className="text-[12px] font-bold">
                   This might take some time
                 </span>
               </div>
             )}
             <div style={{ background: "#32a3ac" }} className="modalheader">
-              <span style={{ color: "white" }}>Successfully signed!</span>
-
-              <div style={{ display: "flex", flexDirection: "row" }}>
+              <span className="text-white">Successfully signed!</span>
+              <div className="flex flex-row">
                 <div></div>
                 {!isAndroid && (
                   <button
                     onClick={handleToPrint}
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      alignItems: "center"
-                    }}
-                    className="btn btn-primary btn-sm"
+                    className="op-btn op-btn-neutral op-btn-sm text-[15px]"
                   >
-                    <i
-                      className="fa fa-print"
-                      style={{
-                        fontSize: "15px",
-                        marginRight: "3px",
-                        color: "white"
-                      }}
-                      aria-hidden="true"
-                    ></i>
+                    <i className="fa fa-print" aria-hidden="true"></i>
                     Print
                   </button>
                 )}
-
                 <button
-                  className="btn btn-danger btn-sm"
+                  className="op-btn op-btn-primary op-btn-sm text-[15px] ml-2"
                   onClick={() => handleDownloadPdf()}
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    marginLeft: "10px"
-                  }}
                 >
-                  <i
-                    className="fa fa-download"
-                    style={{
-                      color: "white",
-                      fontSize: "15px",
-                      marginRight: "3px"
-                    }}
-                    aria-hidden="true"
-                  ></i>
+                  <i className="fa fa-download" aria-hidden="true"></i>
                   Download
                 </button>
               </div>
             </div>
-            <div style={{ height: "100%", padding: 20 }}>
-              {isCeleb && (
-                <div
-                  style={{
-                    position: "absolute",
-                    marginLeft: "50px"
-                  }}
-                >
-                  <img
-                    alt="print img"
-                    width={300}
-                    height={250}
-                    // style={styles.gifCeleb}
-                    src={celebration}
-                  />
+            <div className="h-full p-[20px]">
+              {isEmailCelebration && (
+                <div className="absolute w-[100%] flex justify-center items-center">
+                  <img alt="celeb" width={300} height={250} src={celebration} />
                 </div>
               )}
-              <p
-                style={{
-                  fontFamily: "system-ui",
-                  verticalAlign: "baseline",
-                  fontWeight: "500",
-                  color: "#403f3e",
-                  fontSize: "15px",
-                  marginBottom: "5px"
-                }}
-              >
+              <p className="font-medium text-[15px] mb-[5px] text-base-content align-baseline">
                 Recipients added here will get a copy of the signed document.
               </p>
               {emailList.length > 0 ? (
                 <>
                   <div className="addEmail">
-                    <div
-                      style={{
-                        display: "flex",
-                        flexDirection: "row",
-
-                        flexWrap: "wrap"
-                      }}
-                    >
+                    <div className="flex flex-row flex-wrap">
                       {emailList.map((data, ind) => {
                         return (
                           <div
-                            className="emailChip"
-                            style={{
-                              display: "flex",
-                              flexDirection: "row",
-                              alignItems: "center"
-                            }}
+                            className="flex flex-row items-center bg-[#47a3ad] m-[4px] rounded-md py-[5px] px-[10px]"
                             key={ind}
                           >
-                            <span
-                              style={{
-                                color: "white",
-                                fontSize: "13px"
-                              }}
-                            >
+                            <span className="text-white text-[13px]">
                               {data}
                             </span>
                             <span
-                              style={{
-                                color: "white",
-                                fontSize: 13,
-                                fontWeight: 600,
-                                marginLeft: 7,
-                                cursor: "pointer"
-                              }}
+                              className="text-white text-[13px] font-semibold ml-[7px] cursor-pointer"
                               onClick={() => removeChip(ind)}
                             >
                               <i className="fa-solid fa-xmark"></i>
@@ -320,7 +238,7 @@ function EmailComponent({
                       <input
                         type="text"
                         value={emailValue}
-                        className="addEmailInput"
+                        className="p-[10px] pb-[20px] rounded w-full text-[15px] bg-white outline-none"
                         onChange={handleEmailValue}
                         onKeyDown={handleEnterPress}
                         onBlur={() => {
@@ -338,7 +256,7 @@ function EmailComponent({
                   <input
                     type="text"
                     value={emailValue}
-                    className="emailInput"
+                    className="p-[10px] pb-[20px] rounded w-full text-[15px] outline-none bg-white border-2 border-[#47a3ad]"
                     onChange={handleEmailValue}
                     onKeyDown={handleEnterPress}
                     placeholder="Add the email addresses"
@@ -351,67 +269,36 @@ function EmailComponent({
                   />
                 </div>
               )}
-              <span
-                style={{
-                  cursor: emailValue && "pointer"
-                }}
+              <button
+                className={`${
+                  emailValue ? "cursor-pointer" : "cursor-default"
+                } op-btn op-btn-primary op-btn-sm m-2 shadow-md`}
                 onClick={() => {
                   if (emailValue) {
                     handleEnterPress("add");
                   }
                 }}
               >
-                <i
-                  style={{
-                    backgroundColor: themeColor,
-                    padding: "5px 7px",
-                    marginTop: "10px",
-                    color: "white",
-                    borderRadius: "2px"
-                  }}
-                  className="fa fa-plus"
-                  aria-hidden="true"
-                ></i>
-              </span>
+                <i className="fa fa-plus" aria-hidden="true"></i>
+              </button>
 
-              <div
-                style={{
-                  background: "#e3e2e1",
-                  marginTop: "10px",
-                  padding: "5px",
-                  borderRadius: "3px"
-                }}
-              >
-                <span style={{ fontWeight: "700" }}>Note:</span>
-                <span style={{ fontSize: "15px" }}>
-                  {" "}
+              <div className="bg-[#e3e2e1] mt-[10px] p-[5px] rounded">
+                <span className="font-bold">Note: </span>
+                <span className="text-[15px]">
                   You can only send to ten recipients at a time.
                 </span>
               </div>
-              <div
-                style={{
-                  height: "1px",
-                  backgroundColor: "#9f9f9f",
-                  width: "100%",
-                  marginTop: "15px",
-                  marginBottom: "15px"
-                }}
-              ></div>
+              <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
               <button
-                disabled={emailList.length === 0 && true}
-                style={{
-                  background: themeColor,
-                  color: "white"
-                }}
                 type="button"
-                className={emailList.length === 0 ? "defaultBtn" : "finishBtn"}
-                onClick={() => sendEmail()}
+                className="op-btn op-btn-primary"
+                onClick={() => emailList.length > 0 && sendEmail()}
               >
                 Send
               </button>
               <button
                 type="button"
-                className="finishBtn cancelBtn"
+                className="op-btn op-btn-ghost ml-2"
                 onClick={() => {
                   setIsEmail(false);
                   setEmailValue("");

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

@@ -1,26 +1,24 @@
-import React from "react";
+import React, { useState } from "react";
 import PrevNext from "./PrevNext";
-import { PDFDownloadLink } from "@react-pdf/renderer";
-import Certificate from "./Certificate";
-import printModule from "print-js";
-import { getBase64FromUrl } from "../../constant/Utils";
-import { saveAs } from "file-saver";
+import {
+  handleDownloadCertificate,
+  handleDownloadPdf,
+  handleToPrint
+} from "../../constant/Utils";
 import "../../styles/signature.css";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { useNavigate } from "react-router-dom";
-import { themeColor } from "../../constant/const";
+import ModalUi from "../../primitives/ModalUi";
+import Loader from "../../primitives/Loader";
 
 function Header({
   isPdfRequestFiles,
   isPlaceholder,
-  recipient,
   setIsDecline,
   pageNumber,
-  isAlreadySign,
   allPages,
   changePage,
   pdfUrl,
-  documentStatus,
   embedWidgetsData,
   pdfDetails,
   signerPos,
@@ -42,15 +40,9 @@ function Header({
     signerPos && signerPos?.filter((data) => data.Role !== "prefill");
   const isMobile = window.innerWidth < 767;
   const navigate = useNavigate();
+  const [isDownloading, setIsDownloading] = useState("");
   const isGuestSigner = localStorage.getItem("isGuestSigner");
-  //for go to previous page
-  function previousPage() {
-    changePage(-1);
-  }
-  //for go to next page
-  function nextPage() {
-    changePage(1);
-  }
+
   //function for show decline alert
   const handleDeclinePdfAlert = async () => {
     const currentDecline = {
@@ -60,143 +52,6 @@ function Header({
     setIsDecline(currentDecline);
   };
 
-  //function for print digital sign pdf
-  const handleToPrint = async (event) => {
-    event.preventDefault();
-
-    const pdf = await getBase64FromUrl(pdfUrl);
-    const isAndroidDevice = navigator.userAgent.match(/Android/i);
-    const isAppleDevice =
-      (/iPad|iPhone|iPod/.test(navigator.platform) ||
-        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
-      !window.MSStream;
-    if (isAndroidDevice || isAppleDevice) {
-      const byteArray = Uint8Array.from(
-        atob(pdf)
-          .split("")
-          .map((char) => char.charCodeAt(0))
-      );
-      const blob = new Blob([byteArray], { type: "application/pdf" });
-      const blobUrl = URL.createObjectURL(blob);
-      window.open(blobUrl, "_blank");
-    } else {
-      printModule({ printable: pdf, type: "pdf", base64: true });
-    }
-  };
-
-  //handle download signed pdf
-  const handleDownloadPdf = () => {
-    const pdfName = pdfDetails[0] && pdfDetails[0].Name;
-    saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
-  };
-
-  const sanitizeFileName = (pdfName) => {
-    // Replace spaces with underscore
-    return pdfName.replace(/ /g, "_");
-  };
-  //certificate generate and download component in mobile view
-  const CertificateDropDown = () => {
-    //after generate download certifcate pdf
-    const handleDownload = (pdfBlob, fileName) => {
-      if (pdfBlob) {
-        const url = window.URL.createObjectURL(pdfBlob);
-        // Create a temporary anchor element
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = fileName;
-        // Append the anchor to the body
-        document.body.appendChild(link);
-        // Programmatically click the anchor to trigger the download
-        link.click();
-        // Remove the anchor from the body
-        document.body.removeChild(link);
-        // Release the object URL to free up resources
-        window.URL.revokeObjectURL(url);
-      }
-    };
-
-    return (
-      <PDFDownloadLink
-        onClick={(e) => e.preventDefault()}
-        style={{ textDecoration: "none", zIndex: "35" }}
-        document={<Certificate pdfData={pdfDetails} />}
-      >
-        {({ blob, loading }) => (
-          <>
-            {loading ? (
-              <div
-                style={{
-                  border: "none",
-                  backgroundColor: "#fff"
-                }}
-              >
-                <i
-                  className="fa-solid fa-award"
-                  style={{ marginRight: "2px" }}
-                  aria-hidden="true"
-                ></i>
-                Certificate
-              </div>
-            ) : (
-              <div
-                style={{ border: "none", backgroundColor: "#fff" }}
-                onClick={() =>
-                  handleDownload(
-                    blob,
-                    `completion certificate-${
-                      pdfDetails[0] && pdfDetails[0].Name
-                    }.pdf`
-                  )
-                }
-              >
-                <i
-                  className="fa-solid fa-award"
-                  style={{ marginRight: "2px" }}
-                  aria-hidden="true"
-                ></i>
-                Certificate
-              </div>
-            )}
-          </>
-        )}
-      </PDFDownloadLink>
-    );
-  };
-  const CertificateComponent = () => {
-    return (
-      <PDFDownloadLink
-        style={{ textDecoration: "none" }}
-        document={<Certificate pdfData={pdfDetails} />}
-        fileName={`completion certificate-${
-          pdfDetails[0] && pdfDetails[0].Name
-        }.pdf`}
-      >
-        {({ loading }) => (
-          <button
-            type="button"
-            className="defaultBtn certificateBtn"
-            disabled={loading}
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              alignItems: "center"
-            }}
-          >
-            <i
-              className="fa-solid fa-award"
-              style={{
-                color: "white",
-                fontSize: "15px",
-                marginRight: "3px"
-              }}
-              aria-hidden="true"
-            ></i>
-            Certificate
-          </button>
-        )}
-      </PDFDownloadLink>
-    );
-  };
   return (
     <div style={{ padding: "5px 0px 5px 0px" }} className="mobileHead">
       {isMobile && isShowHeader ? (
@@ -209,64 +64,25 @@ function Header({
               : window.innerWidth - 30 + "px"
           }}
         >
-          <div className="preBtn2">
-            <div
-              onClick={() => {
-                navigate(-1);
-              }}
-            >
+          <div className="flex justify-between items-center py-[5px] px-[10px] ">
+            <div onClick={() => navigate(-1)}>
               <i
-                className="fa fa-arrow-left"
+                className="fa fa-arrow-left text-base-content"
                 aria-hidden="true"
-                style={{ color: themeColor, cursor: "pointer" }}
-              ></i>
-            </div>
-            <div>
-              <i
-                onClick={() => {
-                  if (pageNumber > 1) {
-                    previousPage();
-                  }
-                }}
-                className="fa fa-backward"
-                style={{ color: "gray", cursor: "pointer" }}
-              ></i>
-              <span
-                style={{
-                  fontSize: "13px",
-                  fontWeight: "600",
-                  marginLeft: "10px",
-                  marginRight: "10px"
-                }}
-              >
-                {pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
-              </span>
-              <i
-                onClick={() => {
-                  if (pageNumber < allPages) {
-                    nextPage();
-                  }
-                }}
-                className="fa fa-forward"
-                style={{ color: "gray", cursor: "pointer" }}
               ></i>
             </div>
+            <PrevNext
+              pageNumber={pageNumber}
+              allPages={allPages}
+              changePage={changePage}
+            />
             {pdfUrl && alreadySign ? (
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild>
-                  <div
-                    style={{
-                      color: themeColor,
-                      border: "none",
-                      fontWeight: "650",
-                      fontSize: "16px",
-                      padding: "0px 3px 0px 5px"
-                    }}
-                  >
+                  <div className="op-link op-link-primary no-underline text-[16px] font-semibold pr-[3px] pl-[5px]">
                     <i className="fa fa-ellipsis-v" aria-hidden="true"></i>
                   </div>
                 </DropdownMenu.Trigger>
-
                 <DropdownMenu.Portal>
                   <DropdownMenu.Content
                     className="DropdownMenuContent"
@@ -274,74 +90,61 @@ function Header({
                   >
                     <DropdownMenu.Item
                       className="DropdownMenuItem"
-                      onClick={() => handleDownloadPdf()}
+                      onClick={() =>
+                        handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
+                      }
                     >
-                      <div
-                        style={{
-                          display: "flex",
-                          flexDirection: "row"
-                        }}
-                      >
+                      <div className="flex flex-row">
                         <i
-                          className="fa fa-arrow-down"
+                          className="fa fa-arrow-down mr-[2px]"
                           aria-hidden="true"
-                          style={{ marginRight: "2px" }}
                         ></i>
                         Download
                       </div>
                     </DropdownMenu.Item>
-                    {recipient && pdfDetails[0] && pdfDetails.length > 0 ? (
-                      <DropdownMenu.Item className="DropdownMenuItem">
-                        <CertificateDropDown />
+                    {isCompleted && (
+                      <DropdownMenu.Item
+                        className="DropdownMenuItem"
+                        onClick={() =>
+                          handleDownloadCertificate(
+                            pdfDetails,
+                            setIsDownloading
+                          )
+                        }
+                      >
+                        <div className="border-none bg-[#fff]">
+                          <i
+                            className="fa-solid fa-award mr-[2px]"
+                            aria-hidden="true"
+                          ></i>
+                          Certificate
+                        </div>
                       </DropdownMenu.Item>
-                    ) : isPdfRequestFiles &&
-                      alreadySign &&
-                      isCompleted.isCertificate ? (
-                      <DropdownMenu.Item className="DropdownMenuItem">
-                        <CertificateDropDown />
+                    )}
+                    {isSignYourself && (
+                      <DropdownMenu.Item
+                        className="DropdownMenuItem"
+                        onClick={() => setIsEmail(true)}
+                      >
+                        <div className="flex flex-row">
+                          <i
+                            className="fa fa-envelope mr-[2px]"
+                            aria-hidden="true"
+                          ></i>
+                          Mail
+                        </div>
                       </DropdownMenu.Item>
-                    ) : (
-                      isSignYourself && (
-                        <>
-                          <DropdownMenu.Item className="DropdownMenuItem">
-                            <CertificateDropDown />
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            className="DropdownMenuItem"
-                            onClick={() => setIsEmail(true)}
-                          >
-                            <div
-                              style={{
-                                display: "flex",
-                                flexDirection: "row"
-                              }}
-                            >
-                              <i
-                                className="fa fa-envelope"
-                                style={{ marginRight: "2px" }}
-                                aria-hidden="true"
-                              ></i>
-                              Mail
-                            </div>
-                          </DropdownMenu.Item>
-                        </>
-                      )
                     )}
                     <DropdownMenu.Item
                       className="DropdownMenuItem"
-                      onClick={handleToPrint}
+                      onClick={(e) =>
+                        handleToPrint(e, pdfUrl, setIsDownloading)
+                      }
                     >
-                      <div
-                        style={{
-                          display: "flex",
-                          flexDirection: "row"
-                        }}
-                      >
-                        {" "}
+                      <div className="flex flex-row">
                         <i
-                          className="fa fa-print"
+                          className="fa fa-print mr-[2px]"
                           aria-hidden="true"
-                          style={{ marginRight: "2px" }}
                         ></i>
                         Print
                       </div>
@@ -350,24 +153,16 @@ function Header({
                 </DropdownMenu.Portal>
               </DropdownMenu.Root>
             ) : (
-              <div style={{ display: "flex", justifyContent: "space-around" }}>
+              <div className="flex justify-around items-center">
                 {/* current signer is checking user send request and check status of pdf sign than if current 
                 user exist than show finish button else no
                 */}
                 {currentSigner && (
-                  <>
+                  <div className="flex items-center" data-tut="reactourFifth">
                     {decline && (
                       <div
-                        onClick={() => {
-                          handleDeclinePdfAlert();
-                        }}
-                        style={{
-                          color: "red",
-                          border: "none",
-                          fontWeight: "650",
-                          fontSize: "16px",
-                          marginRight: "10px"
-                        }}
+                        onClick={() => handleDeclinePdfAlert()}
+                        className="text-[red] border-none font-[650] text-[14px] mr-2"
                       >
                         Decline
                       </div>
@@ -379,12 +174,9 @@ function Header({
                             alertSendEmail();
                           }
                         }}
-                        style={{
-                          color: isMailSend ? "gray" : themeColor,
-                          border: "none",
-                          fontWeight: "650",
-                          fontSize: "16px"
-                        }}
+                        className={`${
+                          isMailSend ? "" : "op-link-primary"
+                        } op-link no-underline font-[650] text-[14px]`}
                         data-tut={dataTut4}
                       >
                         {completeBtnTitle ? completeBtnTitle : "Send"}
@@ -399,343 +191,259 @@ function Header({
                             embedWidgetsData();
                           }
                         }}
-                        style={{
-                          color: themeColor,
-                          border: "none",
-                          fontWeight: "650",
-                          fontSize: "16px"
-                        }}
+                        className="border-none font-[650] text-[14px] op-link op-link-primary no-underline"
                       >
                         Finish
                       </div>
                     )}
-                  </>
+                    <DropdownMenu.Root>
+                      <DropdownMenu.Trigger asChild>
+                        <div className="font-[650] text-[18px] px-2 ml-[4px] op-link op-link-info no-underline">
+                          <i
+                            className="fa fa-ellipsis-v"
+                            aria-hidden="true"
+                          ></i>
+                        </div>
+                      </DropdownMenu.Trigger>
+                      <DropdownMenu.Portal>
+                        <DropdownMenu.Content
+                          className="bg-white shadow-md rounded px-2 py-1"
+                          sideOffset={5}
+                        >
+                          <DropdownMenu.Item
+                            className="flex flex-row justify-center items-center text-[13px] focus:outline-none cursor-pointer"
+                            onClick={() =>
+                              handleDownloadPdf(
+                                pdfDetails,
+                                pdfUrl,
+                                setIsDownloading
+                              )
+                            }
+                          >
+                            <i
+                              className="fa fa-arrow-down mr-[5px]"
+                              aria-hidden="true"
+                            ></i>
+                            <span className="font-[500]">Download</span>
+                          </DropdownMenu.Item>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Portal>
+                    </DropdownMenu.Root>
+                  </div>
                 )}
               </div>
             )}
           </div>
         </div>
       ) : (
-        <div className="signatureHeader headerBtn">
+        <div className="flex flex-wrap justify-between items-center mt-[5px]">
           <PrevNext
             pageNumber={pageNumber}
             allPages={allPages}
             changePage={changePage}
           />
-
-          {recipient ? (
-            pdfUrl || isAlreadySign.mssg ? (
-              <div style={{ display: "flex", flexDirection: "row" }}>
-                {pdfDetails && pdfDetails.length > 0 && (
-                  <CertificateComponent />
-                )}
-                <button
-                  onClick={handleToPrint}
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center"
-                  }}
-                  className="defaultBtn printBtn"
-                >
-                  <i
-                    className="fa fa-print"
-                    style={{
-                      fontSize: "15px",
-                      marginRight: "3px",
-                      color: "white"
-                    }}
-                    aria-hidden="true"
-                  ></i>
-                  Print
-                </button>
-
-                <button
-                  type="button"
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center"
-                  }}
-                  className="defaultBtn downloadBtn"
-                  onClick={() => handleDownloadPdf()}
-                >
-                  <i
-                    className="fa fa-download"
-                    style={{
-                      color: "white",
-                      fontSize: "15px",
-                      marginRight: "3px"
-                    }}
-                    aria-hidden="true"
-                  ></i>
-                  Download
-                </button>
-              </div>
-            ) : (
-              <div style={{ display: "flex", flexDirection: "row" }}>
-                <button
-                  style={{
-                    background: "#de4337"
-                  }}
-                  className="finishBtn hoverCss"
-                  onClick={() => {
-                    handleDeclinePdfAlert();
-                  }}
-                >
-                  Decline
-                </button>
-
-                <button
-                  data-tut="reactourThird"
-                  style={{
-                    background: !pdfUrl ? "#188ae2" : "#d3edeb"
-                  }}
-                  className="finishBtn sendHover"
-                  onClick={() => {
-                    if (!pdfUrl) {
-                      embedWidgetsData();
-                    }
-                  }}
-                >
-                  Finish
-                </button>
-              </div>
-            )
-          ) : isPlaceholder ? (
+          {isPlaceholder ? (
             <>
-              {!isMailSend &&
-                signersdata.length > 0 &&
-                signersdata.length !== filterPrefill.length && (
-                  <div>
-                    {filterPrefill.length === 0 ? (
-                      <span style={{ fontSize: "13px", color: "#f5405e" }}>
-                        Add {signersdata.length - filterPrefill.length}{" "}
-                        recipients signature
-                      </span>
-                    ) : (
-                      <span style={{ fontSize: "13px", color: "#f5405e" }}>
-                        Add {signersdata.length - filterPrefill.length} more
-                        recipients signature
-                      </span>
-                    )}
-                  </div>
-                )}
-
-              <div>
+              <div className="flex mx-[100px] lg:mx-0 order-last lg:order-none">
+                {!isMailSend &&
+                  signersdata.length > 0 &&
+                  signersdata.length !== filterPrefill.length && (
+                    <div>
+                      {filterPrefill.length === 0 ? (
+                        <span className="text-[13px] text-[#f5405e]">
+                          Add {signersdata.length - filterPrefill.length}{" "}
+                          recipients signature
+                        </span>
+                      ) : (
+                        <span className="text-[13px] text-[#f5405e]">
+                          Add {signersdata.length - filterPrefill.length} more
+                          recipients signature
+                        </span>
+                      )}
+                    </div>
+                  )}
+              </div>
+              <div className="flex">
                 {setIsEditTemplate && (
                   <button
                     onClick={() => setIsEditTemplate(true)}
-                    style={{
-                      border: "none",
-                      outline: "none",
-                      textAlign: "center"
-                    }}
+                    className="outline-none border-none text-center mr-[5px]"
                   >
                     <i className="fa-solid fa-gear fa-lg"></i>
                   </button>
                 )}
                 <button
-                  onClick={() => {
-                    navigate(-1);
-                  }}
+                  onClick={() => navigate(-1)}
                   type="button"
-                  className="defaultBtn backBtn"
+                  className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
                 >
                   Back
                 </button>
-
                 <button
                   disabled={isMailSend && true}
                   data-tut="reactourFour"
-                  style={{
-                    background: isMailSend ? "rgb(203, 203, 203)" : "#188ae2",
-                    color: isMailSend && "rgb(77, 75, 75)"
-                  }}
-                  onClick={() => {
-                    alertSendEmail();
-                  }}
-                  className={isMailSend ? "sendMail" : "sendMail sendHover"}
+                  className="op-btn op-btn-primary op-btn-sm mr-[5px]"
+                  onClick={() => alertSendEmail()}
                 >
-                  {completeBtnTitle ? completeBtnTitle : "Send"}
+                  {completeBtnTitle
+                    ? completeBtnTitle
+                    : isMailSend
+                      ? "Sent"
+                      : "Send"}
                 </button>
               </div>
             </>
           ) : isPdfRequestFiles ? (
             alreadySign ? (
-              <div style={{ display: "flex", flexDirection: "row" }}>
-                {isCompleted.isCertificate && <CertificateComponent />}
+              <div className="flex flex-row">
+                {isCompleted && (
+                  <button
+                    type="button"
+                    onClick={() =>
+                      handleDownloadCertificate(pdfDetails, setIsDownloading)
+                    }
+                    className="op-btn op-btn-secondary op-btn-sm mr-[5px] shadow"
+                  >
+                    <i
+                      className="fa-solid fa-award py-[3px]"
+                      aria-hidden="true"
+                    ></i>
+                    <span className="hidden lg:block">Certificate</span>
+                  </button>
+                )}
+
                 <button
-                  onClick={handleToPrint}
+                  onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
                   type="button"
-                  className="defaultBtn printBtn"
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center"
-                  }}
+                  className="op-btn op-btn-neutral op-btn-sm mr-[5px] shadow"
                 >
-                  <i
-                    className="fa fa-print"
-                    style={{
-                      fontSize: "15px",
-                      marginRight: "3px",
-                      color: "white"
-                    }}
-                    aria-hidden="true"
-                  ></i>
-                  Print
+                  <i className="fa fa-print py-[3px]" aria-hidden="true"></i>
+                  <span className="hidden lg:block">Print</span>
                 </button>
 
                 <button
                   type="button"
-                  className="defaultBtn downloadBtn"
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center"
-                  }}
-                  onClick={() => handleDownloadPdf()}
+                  className="op-btn op-btn-primary op-btn-sm mr-[5px] shadow"
+                  onClick={() =>
+                    handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
+                  }
                 >
-                  <i
-                    className="fa fa-download"
-                    style={{
-                      color: "white",
-                      fontSize: "15px",
-                      marginRight: "3px"
-                    }}
-                    aria-hidden="true"
-                  ></i>
-                  Download
+                  <i className="fa fa-download py-[3px]" aria-hidden="true"></i>
+                  <span className="hidden lg:block">Download</span>
                 </button>
               </div>
             ) : (
-              <div>
+              <div className="flex" data-tut="reactourFifth">
                 <button
-                  onClick={() => {
-                    navigate(-1);
-                  }}
+                  onClick={() => navigate(-1)}
                   type="button"
-                  className="defaultBtn backBtn"
+                  className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
                 >
                   Back
                 </button>
                 {currentSigner && (
                   <>
                     <button
-                      style={{
-                        background: "#de4337"
-                      }}
-                      className="finishBtn hoverCss"
-                      onClick={() => {
-                        handleDeclinePdfAlert();
-                      }}
+                      className="op-btn op-btn-secondary op-btn-sm mr-[5px] shadow"
+                      onClick={() => handleDeclinePdfAlert()}
                     >
                       Decline
                     </button>
                     <button
-                      style={{
-                        background: "#188ae2"
-                      }}
                       type="button"
-                      className="finishBtn sendHover"
-                      onClick={() => {
-                        embedWidgetsData();
-                      }}
+                      className="op-btn op-btn-primary op-btn-sm mr-[5px] shadow"
+                      onClick={() => embedWidgetsData()}
                     >
                       Finish
                     </button>
+                    <div className="op-dropdown op-dropdown-end">
+                      <div
+                        tabIndex={0}
+                        role="button"
+                        className="op-btn op-btn-info op-btn-sm shadow"
+                      >
+                        <i className="fa fa-ellipsis-v" aria-hidden="true"></i>
+                      </div>
+                      <ul
+                        tabIndex={0}
+                        className="op-dropdown-content z-[1] op-menu op-menu-sm p-1 shadow bg-base-100 rounded-box mt-1"
+                      >
+                        <li
+                          onClick={() =>
+                            handleDownloadPdf(
+                              pdfDetails,
+                              pdfUrl,
+                              setIsDownloading
+                            )
+                          }
+                        >
+                          <span className="font-semibold text-[12px]">
+                            <i
+                              className="fa fa-arrow-down"
+                              aria-hidden="true"
+                            ></i>{" "}
+                            Download
+                          </span>
+                        </li>
+                      </ul>
+                    </div>
                   </>
                 )}
               </div>
             )
-          ) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
-            <div style={{ display: "flex", flexDirection: "row" }}>
-              <CertificateComponent />
+          ) : isCompleted ? (
+            <div className="flex flex-row">
+              {isCompleted && (
+                <button
+                  type="button"
+                  onClick={() =>
+                    handleDownloadCertificate(pdfDetails, setIsDownloading)
+                  }
+                  className="op-btn op-btn-secondary op-btn-sm font-medium text-[13px] mr-[5px] shadow"
+                >
+                  <i className="fa-solid fa-award" aria-hidden="true"></i>
+                  <span className="hidden lg:block">Certificate</span>
+                </button>
+              )}
               <button
-                onClick={handleToPrint}
+                onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
                 type="button"
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center"
-                }}
-                className="defaultBtn printBtn"
+                className="op-btn op-btn-neutral op-btn-sm font-medium text-[13px] mr-[5px] shadow"
               >
-                <i
-                  className="fa fa-print"
-                  style={{
-                    fontSize: "15px",
-                    marginRight: "3px",
-                    color: "white"
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Print
+                <i className="fa fa-print" aria-hidden="true"></i>
+                <span className="hidden lg:block">Print</span>
               </button>
               <button
                 type="button"
-                className="defaultBtn downloadBtn"
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                  marginLeft: "10px"
-                }}
-                onClick={() => handleDownloadPdf()}
+                className="op-btn op-btn-primary op-btn-sm font-medium text-[13px] mr-[5px] shadow"
+                onClick={() =>
+                  handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
+                }
               >
-                <i
-                  className="fa fa-download"
-                  style={{
-                    color: "white",
-                    fontSize: "15px",
-                    marginRight: "3px"
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Download
+                <i className="fa fa-download" aria-hidden="true"></i>
+                <span className="hidden lg:block">Download</span>
               </button>
               <button
                 type="button"
-                className="defaultBtn mailBtn"
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                  marginLeft: "10px"
-                }}
+                className="op-btn op-btn-info op-btn-sm font-medium text-[13px] mr-[5px] shadow"
                 onClick={() => setIsEmail(true)}
               >
-                <i
-                  className="fa fa-envelope"
-                  style={{
-                    color: "white",
-                    fontSize: "15px",
-                    marginRight: "3px"
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Mail
+                <i className="fa fa-envelope" aria-hidden="true"></i>
+                <span className="hidden lg:block">Mail</span>
               </button>
             </div>
           ) : (
-            <div>
+            <div className="flex">
               <button
-                onClick={() => {
-                  navigate(-1);
-                }}
+                onClick={() => navigate(-1)}
                 type="button"
-                className="defaultBtn backBtn"
+                className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
               >
                 Back
               </button>
-
               <button
-                style={{
-                  background: "#188ae2"
-                }}
                 type="button"
-                className="finishBtn sendHover"
+                className="op-btn op-btn-primary op-btn-sm mr-[5px]"
                 onClick={() => {
                   if (!pdfUrl) {
                     embedWidgetsData();
@@ -748,6 +456,31 @@ function Header({
           )}
         </div>
       )}
+      {isDownloading === "pdf" && (
+        <div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
+        </div>
+      )}
+      <ModalUi
+        isOpen={isDownloading === "certificate"}
+        title={
+          isDownloading === "certificate"
+            ? "Generating certificate"
+            : "PDF Download"
+        }
+        handleClose={() => setIsDownloading("")}
+      >
+        <div className="p-3 md:p-5 text-[13px] md:text-base text-center text-base-content">
+          {isDownloading === "certificate"}{" "}
+          <p>
+            Your completion certificate is being generated. Please wait
+            momentarily.
+          </p>
+          <p>
+            If the download doesn&apos;t start shortly, click the button again.
+          </p>
+        </div>
+      </ModalUi>
     </div>
   );
 }

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

@@ -416,7 +416,7 @@ function Placeholder(props) {
 
               {props.pos.type !== textWidget && !props.isSignYourself && (
                 <i
-                  data-tut="reactourLinkUser"
+                  data-tut="assignSigner"
                   className="fa-regular fa-user signUserIcon"
                   onClick={(e) => {
                     e.stopPropagation();
@@ -542,7 +542,15 @@ function Placeholder(props) {
       data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
       key={props.pos.key}
       lockAspectRatio={
-        props.pos.type !== textWidget &&
+        // props.pos.type !== textWidget
+        ![
+          textWidget,
+          "email",
+          "name",
+          "company",
+          "job title",
+          textInputWidget
+        ].includes(props.pos.type) &&
         (props.pos.Width
           ? props.pos.Width / props.pos.Height
           : defaultWidthHeight(props.pos.type).width /

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

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
 import { randomId, textWidget } from "../../constant/Utils";
 
@@ -195,13 +194,13 @@ function PlaceholderCopy(props) {
         props.setIsPageCopy(false);
       }}
     >
-      <div style={{ height: "100%", padding: 20 }}>
+      <div className="h-full p-[20px] text-base-content">
         {copyType.map((data, key) => {
           return (
-            <div key={key} style={{ display: "flex", flexDirection: "column" }}>
-              <label key={key} style={{ fontSize: "16px", fontWeight: "500" }}>
+            <div key={key} className="flex flex-col">
+              <label className="text-[16px] font-medium">
                 <input
-                  style={{ accentColor: "red", marginRight: "10px" }}
+                  className="mr-[8px] op-radio op-radio-xs"
                   type="radio"
                   value={data}
                   onChange={() => setSelectCopyType(data)}
@@ -214,33 +213,22 @@ function PlaceholderCopy(props) {
           );
         })}
 
-        <div
-          style={{
-            height: "1px",
-            backgroundColor: "#9f9f9f",
-            width: "100%",
-            marginTop: "15px",
-            marginBottom: "15px"
-          }}
-        ></div>
+        <div className="flex bg-[#9f9f9f] w-full my-[15px]"></div>
         <button
           onClick={() => {
             handleApplyCopy();
             handleUniqueId();
           }}
-          style={{ background: themeColor }}
           type="button"
           disabled={!selectCopyType}
-          className="finishBtn"
+          className="op-btn op-btn-primary"
         >
           Apply
         </button>
         <button
           type="button"
-          className="finishBtn cancelBtn"
-          onClick={() => {
-            handleUniqueId();
-          }}
+          className="op-btn op-btn-ghost"
+          onClick={() => handleUniqueId()}
         >
           Cancel
         </button>

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

@@ -38,15 +38,17 @@ function PlaceholderType(props) {
     "December"
   ];
   const validateExpression = (regexValidation) => {
-    let regexObject = regexValidation;
-    if (props.pos?.options.validation.type === "regex") {
-      regexObject = RegexParser(regexValidation);
-    }
-    // new RegExp(regexValidation);
-    let isValidate = regexObject.test(textValue);
-    if (!isValidate) {
-      props?.setValidateAlert(true);
-      inputRef.current.focus();
+    if (textValue && regexValidation) {
+      let regexObject = regexValidation;
+      if (props.pos?.options?.validation?.type === "regex") {
+        regexObject = RegexParser(regexValidation);
+      }
+      // new RegExp(regexValidation);
+      let isValidate = regexObject.test(textValue);
+      if (!isValidate) {
+        props?.setValidateAlert(true);
+        inputRef.current.focus();
+      }
     }
   };
 
@@ -54,22 +56,18 @@ function PlaceholderType(props) {
     props.setDraggingEnabled(true);
     const validateType = props.pos?.options?.validation?.type;
     let regexValidation;
-    if (validateType) {
+    if (validateType && validateType !== "text") {
       switch (validateType) {
         case "email":
           regexValidation = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
           validateExpression(regexValidation);
           break;
         case "number":
-          regexValidation = /^\d+$/;
-          validateExpression(regexValidation);
-          break;
-        case "text":
-          regexValidation = /^[a-zA-Z\s]+$/;
+          regexValidation = /^[0-9\s]*$/;
           validateExpression(regexValidation);
           break;
         default:
-          regexValidation = props.pos?.options.validation.pattern;
+          regexValidation = props.pos?.options?.validation?.pattern || "";
           validateExpression(regexValidation);
       }
     }
@@ -87,11 +85,11 @@ function PlaceholderType(props) {
       case "number":
         setValidatePlaceholder("12345");
         break;
-      case textInputWidget:
-        setValidatePlaceholder("enter text");
+      case "text":
+        setValidatePlaceholder("please enter text");
         break;
       default:
-        setValidatePlaceholder("enter text");
+        setValidatePlaceholder("please enter value");
     }
   }
 
@@ -135,7 +133,7 @@ function PlaceholderType(props) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.pos]);
+  }, [props.pos?.options?.defaultValue]);
 
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
     <div
@@ -288,7 +286,7 @@ function PlaceholderType(props) {
   };
   //handle height on enter press in text area
   const handleEnterPress = (e) => {
-    const height = 15;
+    const height = 18;
     if (e.key === "Enter") {
       //function to save height of text area
       onChangeHeightOfTextArea(
@@ -354,12 +352,9 @@ function PlaceholderType(props) {
             return (
               <div key={ind} className="flex items-center text-center gap-0.5">
                 <input
-                  style={{
-                    // width: props.pos.Width,
-                    display: "flex",
-                    justifyContent: "center",
-                    marginTop: ind === 0 ? 0 : "5px"
-                  }}
+                  className={`${
+                    ind === 0 ? "mt-0" : "mt-[5px]"
+                  } flex justify-center op-checkbox op-checkbox-xs rounded-[0.350rem]`}
                   onBlur={handleInputBlur}
                   disabled={
                     props.isNeedSign &&
@@ -403,19 +398,12 @@ function PlaceholderType(props) {
     case textInputWidget:
       return props.isSignYourself ||
         (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <input
-          className="inputPlaceholder"
+        <textarea
           ref={inputRef}
-          placeholder={validatePlaceholder}
-          style={{ fontSize: calculateFontSize() }}
+          placeholder={validatePlaceholder || "please enter value"}
+          rows={1}
+          onKeyDown={handleEnterPress}
           value={textValue}
-          type="text"
-          tabIndex="0"
-          disabled={
-            props.isNeedSign && props.data?.signerObjId !== props.signerObjId
-              ? true
-              : props.isPlaceholder
-          }
           onBlur={handleInputBlur}
           onChange={(e) => {
             setTextValue(e.target.value);
@@ -429,6 +417,13 @@ function PlaceholderType(props) {
               false
             );
           }}
+          className={
+            isMobile
+              ? "labelTextArea labelWidthMobile"
+              : "labelTextArea labelWidthDesktop"
+          }
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          cols="50"
         />
       ) : (
         <div
@@ -445,7 +440,7 @@ function PlaceholderType(props) {
         <select
           className="inputPlaceholder"
           id="myDropdown"
-          style={{ fontSize: "12px" }}
+          style={{ fontSize: "12px", color: "initial" }}
           value={selectOption}
           onChange={(e) => {
             setSelectOption(e.target.value);
@@ -506,15 +501,12 @@ function PlaceholderType(props) {
     case "name":
       return props.isSignYourself ||
         (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <input
-          tabIndex="0"
+        <textarea
           ref={inputRef}
           placeholder={"name"}
-          style={{ fontSize: calculateFontSize() }}
-          className="inputPlaceholder"
-          type="text"
+          rows={1}
+          onKeyDown={handleEnterPress}
           value={textValue}
-          onBlur={handleInputBlur}
           onChange={(e) => {
             const isDefault = false;
             handleTextValid(e);
@@ -528,6 +520,13 @@ function PlaceholderType(props) {
               isDefault
             );
           }}
+          className={
+            isMobile
+              ? "labelTextArea labelWidthMobile"
+              : "labelTextArea labelWidthDesktop"
+          }
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          cols="50"
         />
       ) : (
         <div
@@ -542,14 +541,12 @@ function PlaceholderType(props) {
     case "company":
       return props.isSignYourself ||
         (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <input
-          className="inputPlaceholder"
-          type="text"
+        <textarea
           ref={inputRef}
-          placeholder={"company"}
-          style={{ fontSize: calculateFontSize() }}
+          placeholder="Enter text"
+          rows={1}
+          onKeyDown={handleEnterPress}
           value={textValue}
-          onBlur={handleInputBlur}
           onChange={(e) => {
             handleTextValid(e);
             onChangeInput(
@@ -562,6 +559,13 @@ function PlaceholderType(props) {
               false
             );
           }}
+          className={
+            isMobile
+              ? "labelTextArea labelWidthMobile"
+              : "labelTextArea labelWidthDesktop"
+          }
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          cols="50"
         />
       ) : (
         <div
@@ -576,14 +580,12 @@ function PlaceholderType(props) {
     case "job title":
       return props.isSignYourself ||
         (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <input
-          className="inputPlaceholder"
-          type="text"
+        <textarea
           ref={inputRef}
           placeholder={"job title"}
-          style={{ fontSize: calculateFontSize() }}
+          rows={1}
+          onKeyDown={handleEnterPress}
           value={textValue}
-          onBlur={handleInputBlur}
           onChange={(e) => {
             handleTextValid(e);
             onChangeInput(
@@ -596,6 +598,13 @@ function PlaceholderType(props) {
               false
             );
           }}
+          className={
+            isMobile
+              ? "labelTextArea labelWidthMobile"
+              : "labelTextArea labelWidthDesktop"
+          }
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          cols="50"
         />
       ) : (
         <div
@@ -692,12 +701,11 @@ function PlaceholderType(props) {
     case "email":
       return props.isSignYourself ||
         (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <input
-          className="inputPlaceholder"
-          type="text"
+        <textarea
           ref={inputRef}
-          placeholder={"email"}
-          style={{ fontSize: calculateFontSize() }}
+          placeholder={"enter email"}
+          rows={1}
+          onKeyDown={handleEnterPress}
           value={textValue}
           onBlur={handleInputBlur}
           onChange={(e) => {
@@ -712,6 +720,13 @@ function PlaceholderType(props) {
               false
             );
           }}
+          className={
+            isMobile
+              ? "labelTextArea labelWidthMobile"
+              : "labelTextArea labelWidthDesktop"
+          }
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          cols="50"
         />
       ) : (
         <div
@@ -730,12 +745,11 @@ function PlaceholderType(props) {
             return (
               <div key={ind} className="flex items-center text-center gap-0.5">
                 <input
-                  style={{
-                    width: props.pos.Width,
-                    display: "flex",
-                    justifyContent: "center",
-                    marginTop: ind === 0 ? 0 : "5px"
-                  }}
+                  className={`${ind === 0 ? "mt-0" : "mt-[5px]"} ${
+                    props?.pos?.Width
+                      ? `w-[${props?.pos?.Width}px] h-[${props?.pos?.Width}px]`
+                      : "w-[15px] h-[15px]"
+                  } flex justify-center op-radio`}
                   type="radio"
                   disabled={
                     props.isNeedSign &&
@@ -760,7 +774,7 @@ function PlaceholderType(props) {
     case textWidget:
       return (
         <textarea
-          placeholder="Enter label"
+          placeholder="Enter text"
           rows={1}
           onKeyDown={handleEnterPress}
           value={textValue}
@@ -782,7 +796,11 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap" }}
+          style={{
+            whiteSpace: "pre-wrap",
+            overflow: "hidden",
+            color: "initial"
+          }}
           cols="50"
         />
       );

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

@@ -11,46 +11,30 @@ function PrevNext({ pageNumber, allPages, changePage }) {
   }
 
   return (
-    <div>
-      <div className="preBtn1">
-        <button
-          style={{
-            padding: "3px 20px ",
-            fontSize: "10px",
-            background: "#d3edeb",
-            fontWeight: "600",
-
-            border: "0px",
-            marginRight: "5px"
-          }}
-          disabled={pageNumber <= 1}
-          onClick={previousPage}
-        >
-          Prev
-        </button>
-        <span
-          style={{
-            fontSize: "13px",
-            fontWeight: "600"
-          }}
-        >
-          {pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
+    <div className="flex items-center">
+      <button
+        className="op-btn op-btn-secondary op-btn-xs md:op-btn-sm font-semibold text-xs"
+        disabled={pageNumber <= 1}
+        onClick={previousPage}
+      >
+        <span className="block lg:hidden">
+          <i className="fa fa-backward" aria-hidden="true"></i>
         </span>
-        <button
-          style={{
-            padding: "3px 20px ",
-            fontSize: "10px",
-            background: "#d3edeb",
-            fontWeight: "600",
-            marginLeft: "5px",
-            border: "0px"
-          }}
-          disabled={pageNumber >= allPages}
-          onClick={nextPage}
-        >
-          Next
-        </button>
-      </div>
+        <span className="lg:block hidden">Prev</span>
+      </button>
+      <span className="text-xs text-base-content font-medium mx-2">
+        {pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
+      </span>
+      <button
+        className="op-btn op-btn-secondary op-btn-xs md:op-btn-sm font-semibold text-xs"
+        disabled={pageNumber >= allPages}
+        onClick={nextPage}
+      >
+        <span className="block lg:hidden">
+          <i className="fa fa-forward" aria-hidden="true"></i>
+        </span>
+        <span className="lg:block hidden">Next</span>
+      </button>
     </div>
   );
 }

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

@@ -7,37 +7,15 @@ import {
   isMobile,
   nameColor
 } from "../../constant/Utils";
-
+const cursor =
+  "cursor-[url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAASElEQVR4nGNgwAMkJSUbpKSkOvCpIaT5PxSTbogUQjMYMwxeIIXmVFIxA8UGDDyQGg0DnIDi6JKUlCxHMqCeZAOghjSAMD5FAKfeaURdUFxCAAAAAElFTkSuQmCC'),_pointer]";
 const RecipientList = (props) => {
   const [animationParent] = useAutoAnimate();
   const [isHover, setIsHover] = useState();
   const [isEdit, setIsEdit] = useState(false);
   //function for onhover signer name change background color
   const inputRef = useRef(null);
-  const onHoverStyle = (ind, blockColor) => {
-    const style = {
-      background: blockColor ? blockColor : color[ind % color.length],
-      padding: "10px",
-      marginTop: "2px",
-      display: "flex",
-      flexDirection: "row",
-      borderBottom: "1px solid #e3e1e1",
-      alignItems: "center"
-    };
-    return style;
-  };
-  //function for onhover signer name remove background color
-  const nonHoverStyle = () => {
-    const style = {
-      padding: "10px",
-      marginTop: "2px",
-      display: "flex",
-      flexDirection: "row",
-      borderBottom: "1px solid #e3e1e1",
-      alignItems: "center"
-    };
-    return style;
-  };
+
   const isWidgetExist = (Id) => {
     return props.signerPos.some((x) => x.Id === Id);
   };
@@ -116,18 +94,21 @@ const RecipientList = (props) => {
               data-tut="reactourFirst"
               onMouseEnter={() => setIsHover(ind)}
               onMouseLeave={() => setIsHover(null)}
-              className={
+              className={`${
                 props.sendInOrder
                   ? props.isMailSend
-                    ? "disabled"
-                    : "dragCursor"
-                  : props.isMailSend && "disabled"
-              }
-              style={
-                (!isMobile && isHover === ind) || props.isSelectListId === ind
-                  ? onHoverStyle(ind, obj?.blockColor)
-                  : nonHoverStyle(ind)
-              }
+                    ? "pointer-events-none bg-opacity-80"
+                    : `text-[12px] font-bold ${cursor}`
+                  : props.isMailSend && "pointer-events-none bg-opacity-80"
+              } flex flex-row rounded-xl px-2 py-[10px] mt-1 mx-1 items-center last:mb-0.5`}
+              style={{
+                background:
+                  (!isMobile && isHover === ind) || props.isSelectListId === ind
+                    ? obj?.blockColor
+                      ? obj?.blockColor
+                      : color[ind % color.length]
+                    : "transparent"
+              }}
               onClick={(e) => {
                 e.preventDefault();
                 props.setSignerObjId(obj?.objectId || "");
@@ -141,38 +122,16 @@ const RecipientList = (props) => {
                 }
               }}
             >
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                  width: "100%"
-                }}
-              >
+              <div className="flex flex-row items-center w-full">
                 <div
+                  className="flex w-[30px] h-[30px] rounded-full items-center justify-center mr-2"
                   style={{
                     background: obj?.blockColor
                       ? darkenColor(obj?.blockColor, 0.4)
-                      : nameColor[ind % nameColor.length],
-                    width: 30,
-                    height: 30,
-                    display: "flex",
-                    borderRadius: 30 / 2,
-                    justifyContent: "center",
-                    alignItems: "center",
-                    marginRight: "12px"
+                      : nameColor[ind % nameColor.length]
                   }}
                 >
-                  <span
-                    className={props.sendInOrder && "dragCursor"}
-                    style={{
-                      fontSize: "12px",
-                      textAlign: "center",
-                      fontWeight: "bold",
-                      color: "white",
-                      textTransform: "uppercase"
-                    }}
-                  >
+                  <span className="text-white uppercase font-bold text-center text-[12px]">
                     {isWidgetExist(obj.Id) ? (
                       <i className="fa-solid fa-check"></i>
                     ) : (
@@ -185,63 +144,72 @@ const RecipientList = (props) => {
                   </span>
                 </div>
                 <div
-                  style={{
-                    display: "flex",
-                    flexDirection: obj.Name ? "column" : "row",
-                    alignItems: "center"
-                  }}
+                  className={`${
+                    obj?.Name ? "flex-col" : "flex-row"
+                  } flex items-center`}
                 >
                   {obj.Name ? (
-                    <span className={"userName"}>{obj.Name}</span>
+                    <span
+                      className={`${
+                        (!isMobile && isHover === ind) ||
+                        props.isSelectListId === ind
+                          ? "text-[#424242]"
+                          : "text-base-content"
+                      } text-[12px] font-bold w-[100px] whitespace-nowrap overflow-hidden text-ellipsis`}
+                    >
+                      {obj.Name}
+                    </span>
                   ) : (
-                    <>
-                      <span
-                        className="userName"
-                        style={{ cursor: "pointer" }}
-                        onClick={() => {
-                          setIsEdit({ [obj.Id]: true });
-                          props.setRoleName(obj.Role);
-                        }}
-                      >
-                        {isEdit?.[obj.Id] && props.handleRoleChange ? (
-                          <input
-                            ref={inputRef}
-                            style={{
-                              backgroundColor: "transparent",
-                              width: "inherit",
-                              padding: "3px"
-                            }}
-                            value={obj.Role}
-                            onChange={(e) => props.handleRoleChange(e, obj.Id)}
-                            onBlur={() => {
-                              setIsEdit({});
-                              props.handleOnBlur(obj.Role, obj.Id);
-                            }}
-                            onKeyDown={(e) => {
-                              if (e.key === "Enter") {
-                                e.preventDefault();
-                                inputRef.current.blur();
-                              }
-                            }}
-                          />
-                        ) : (
-                          <span style={{ padding: "3px" }}>{obj.Role}</span>
-                        )}
-                      </span>
-                    </>
+                    <span
+                      className={`${
+                        (!isMobile && isHover === ind) ||
+                        props.isSelectListId === ind
+                          ? "text-[#424242]"
+                          : "text-base-content"
+                      } text-[12px] font-bold w-[100px] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer`}
+                      onClick={() => {
+                        setIsEdit({ [obj.Id]: true });
+                        props.setRoleName(obj.Role);
+                      }}
+                    >
+                      {isEdit?.[obj.Id] && props.handleRoleChange ? (
+                        <input
+                          ref={inputRef}
+                          className="bg-transparent p-[3px"
+                          value={obj.Role}
+                          onChange={(e) => props.handleRoleChange(e, obj.Id)}
+                          onBlur={() => {
+                            setIsEdit({});
+                            props.handleOnBlur(obj.Role, obj.Id);
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              e.preventDefault();
+                              inputRef.current.blur();
+                            }
+                          }}
+                        />
+                      ) : (
+                        <span className="p-[3px]">{obj.Role}</span>
+                      )}
+                    </span>
+                  )}
+                  {obj.Name && (
+                    <span
+                      className={` ${
+                        (!isMobile && isHover === ind) ||
+                        props.isSelectListId === ind
+                          ? "text-[#424242]"
+                          : "text-base-content"
+                      } text-[10px] font-medium w-[100px] whitespace-nowrap overflow-hidden text-ellipsis`}
+                    >
+                      {obj?.Role || obj?.Email}
+                    </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 className="flex flex-row items-center gap-[5px]">
                   <div
                     onClick={(e) => {
                       if (ind !== 0) {
@@ -249,7 +217,7 @@ const RecipientList = (props) => {
                         handleChangeSequence(e, ind, "up");
                       }
                     }}
-                    style={{ color: ind === 0 ? "gray" : "black" }}
+                    className={ind === 0 ? "text-[gray]" : "text-black"}
                   >
                     ▲
                   </div>
@@ -260,10 +228,11 @@ const RecipientList = (props) => {
                         handleChangeSequence(e, ind, null, "down");
                       }
                     }}
-                    style={{
-                      color:
-                        ind === props.signersdata.length - 1 ? "gray" : "black"
-                    }}
+                    className={
+                      ind === props.signersdata.length - 1
+                        ? "text-[gray]"
+                        : "text-black"
+                    }
                   >
                     ▼
                   </div>
@@ -275,7 +244,12 @@ const RecipientList = (props) => {
                     e.stopPropagation();
                     props.handleDeleteUser(obj.Id);
                   }}
-                  style={{ cursor: "pointer", marginLeft: "5px" }}
+                  className={`${
+                    (!isMobile && isHover === ind) ||
+                    props.isSelectListId === ind
+                      ? "text-[#424242]"
+                      : "text-base-content"
+                  } cursor-pointer ml-[5px]`}
                 >
                   <i className="fa-regular fa-trash-can"></i>
                 </div>

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

@@ -1,41 +1,58 @@
-import React from "react";
+import React, { useState } from "react";
 import RSC from "react-scrollbars-custom";
 import { Document, Page } from "react-pdf";
-import { themeColor } from "../../constant/const";
 
 function RenderAllPdfPage({
-  pdfUrl,
   signPdfUrl,
   allPages,
   setAllPages,
   setPageNumber,
   setSignBtnPosition,
-  pageNumber
+  pageNumber,
+  signerPos,
+  signerObjectId
 }) {
+  const [signPageNumber, setSignPageNumber] = useState([]);
+  const [bookmarkColor, setBookmarkColor] = useState("");
   //set all number of pages after load pdf
   function onDocumentLoad({ numPages }) {
     setAllPages(numPages);
+    //check if signerPos array exist then save page number exist in signerPos array to show bookmark icon
+    if (signerPos) {
+      const checkUser = signerPos.filter(
+        (data) => data.signerObjId === signerObjectId
+      );
+      setBookmarkColor(checkUser[0]?.blockColor);
+      let pageNumberArr = [];
+      if (checkUser?.length > 0) {
+        checkUser[0]?.placeHolder?.map((data) => {
+          pageNumberArr.push(data?.pageNumber);
+        });
+
+        setSignPageNumber(pageNumberArr);
+      }
+    }
   }
 
+  //'function `addSignatureBookmark` is used to display the page where the user's signature is located.
+  const addSignatureBookmark = (index) => {
+    const ispageNumber = signPageNumber.includes(index + 1);
+    return (
+      ispageNumber && (
+        <div className="absolute z-20 top-[1px] -right-[13px] -translate-x-1/2 -translate-y-1/2">
+          <i
+            style={{ color: bookmarkColor || "red" }}
+            className="fa-solid fa-bookmark"
+          ></i>
+        </div>
+      )
+    );
+  };
   return (
-    <div className="showPages">
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
-          backgroundColor: "white",
-          height: "100%"
-        }}
-      >
-        <div style={{ width: "140px" }}>
-          <div
-            style={{
-              background: themeColor
-              //  color:"white"
-            }}
-            className="signedStyle"
-          >
+    <div>
+      <div className=" hidden md:flex flex-row bg-base-100 h-full">
+        <div className="w-[140px]">
+          <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
             Pages
           </div>
 
@@ -50,26 +67,16 @@ function RenderAllPdfPage({
               <Document
                 loading={"Loading Document.."}
                 onLoadSuccess={onDocumentLoad}
-                file={pdfUrl ? pdfUrl : signPdfUrl}
-                //   file="https://api.printnode.com/static/test/pdf/multipage.pdf"
+                file={signPdfUrl}
               >
                 {Array.from(new Array(allPages), (el, index) => (
                   <div
                     key={index}
-                    style={{
-                      width: "100px",
-                      border:
-                        pageNumber - 1 === index
-                          ? "2px solid red"
-                          : "2px solid #878787",
-                      // padding: "5px",
-                      margin: "10px",
-
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      contain: "content"
-                    }}
+                    className={`${
+                      pageNumber - 1 === index
+                        ? "border-[red]"
+                        : "border-[#878787]"
+                    } border-2 w-[100px] m-[10px] flex justify-center items-center relative`}
                     onClick={() => {
                       setPageNumber(index + 1);
                       if (setSignBtnPosition) {
@@ -77,15 +84,19 @@ function RenderAllPdfPage({
                       }
                     }}
                   >
-                    <Page
-                      key={`page_${index + 1}`}
-                      pageNumber={index + 1}
-                      width={100}
-                      height={100}
-                      scale={1}
-                      renderAnnotationLayer={false}
-                      renderTextLayer={false}
-                    />
+                    {signerPos && addSignatureBookmark(index)}
+
+                    <div className="relative z-[1] overflow-hidden">
+                      <Page
+                        key={`page_${index + 1}`}
+                        pageNumber={index + 1}
+                        width={100}
+                        height={100}
+                        scale={1}
+                        renderAnnotationLayer={false}
+                        renderTextLayer={false}
+                      />
+                    </div>
                   </div>
                 ))}
               </Document>

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

@@ -204,34 +204,32 @@ function RenderPdf({
   };
   //function for render placeholder block over pdf document
   const checkSignedSignes = (data) => {
-    const checkSign = signedSigners.filter(
-      (sign) => sign.objectId === data.signerObjId
+    let checkSign = [];
+    //condition to handle quick send flow and using normal request sign flow
+    checkSign = signedSigners.filter(
+      (sign) => sign?.Id === data?.Id || sign?.objectId === data?.signerObjId
     );
     if (data.signerObjId === signerObjectId) {
       setCurrentSigner(true);
     }
     const handleAllUserName = (Id, Role, type) => {
-      return pdfDetails[0].Signers.map((signerData, key) => {
-        return (
-          signerData.objectId === data.signerObjId && (
-            <React.Fragment key={key}>
-              {signerData?.Name && (
-                <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
-                  {signerData.Name}
-                </div>
-              )}
-              {type && (
-                <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
-              )}
-              {Role && (
-                <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
-                  {`(${Role})`}
-                </div>
-              )}
-            </React.Fragment>
-          )
-        );
-      });
+      return (
+        <React.Fragment>
+          <div className="text-black text-[8px] font-medium">
+            {
+              pdfDetails[0].Signers?.find(
+                (signer) => signer.objectId === data.signerObjId
+              )?.Name
+            }
+          </div>
+          {type && <div className="text-[11px] font-bold">{type}</div>}
+          {Role && (
+            <div className="text-black text-[8px] font-medium">
+              {`(${Role})`}
+            </div>
+          )}
+        </React.Fragment>
+      );
     };
 
     return (
@@ -290,38 +288,30 @@ function RenderPdf({
       if (checkSign?.Name) {
         return (
           <>
-            <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
+            <div className="text-black text-[8px] font-medium">
               {checkSign?.Name}
             </div>
-            {type && (
-              <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
+            {type && <div className="text-[11px] font-bold">{type}</div>}
+            {Role && (
+              <div className="text-black text-[8px] font-medium">
+                {`(${Role})`}
+              </div>
             )}
-            <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
-              {`(${Role})`}
-            </div>
           </>
         );
       } else {
         return (
           <>
-            {type && (
-              <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
-            )}
-            <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
-              {Role}
-            </div>
+            {type && <div className="text-[11px] font-bold">{type}</div>}
+            <div className="text-black text-[8px] font-medium">{Role}</div>
           </>
         );
       }
     } else {
       return (
         <>
-          {type && (
-            <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
-          )}
-          <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
-            {Role}
-          </div>
+          {type && <div className="text-[11px] font-bold">{type}</div>}
+          <div className="text-black text-[8px] font-medium">{Role}</div>
         </>
       );
     }
@@ -332,6 +322,7 @@ function RenderPdf({
       {successEmail && <Alert type={"success"}>Email sent successfully!</Alert>}
       {isMobile && scale ? (
         <div
+          data-tut="reactourForth"
           style={{
             border: "0.1px solid #ebe8e8",
             marginTop: isGuestSigner && "30px"
@@ -459,17 +450,9 @@ function RenderPdf({
                   }))}
 
           {/* this component for render pdf document is in middle of the component */}
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center"
-            }}
-          >
+          <div className="flex items-center justify-center">
             <Document
-              onLoadError={() => {
-                setPdfLoadFail(true);
-              }}
+              onLoadError={() => setPdfLoadFail(true)}
               loading={"Loading Document.."}
               onLoadSuccess={pageDetails}
               // ref={pdfRef}'
@@ -515,10 +498,8 @@ function RenderPdf({
           noScrollX={pdfNewWidth < pdfOriginalWidth ? false : true}
         >
           <div
-            style={{
-              border: "0.1px solid #ebe8e8",
-              width: pdfOriginalWidth
-            }}
+            data-tut="reactourForth"
+            style={{ border: "0.1px solid #ebe8e8", width: pdfOriginalWidth }}
             ref={drop}
             id="container"
           >

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

@@ -1,6 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
 import SignatureCanvas from "react-signature-canvas";
-import { themeColor } from "../../constant/const";
 
 function SignPad({
   isSignPad,
@@ -78,21 +77,16 @@ function SignPad({
   //save button component
   const SaveBtn = () => {
     return (
-      <div style={{ marginTop: "2px" }}>
+      <div>
         {(isTab === "draw" || isTab === "uploadImage") && (
           <button
-            style={{
-              color: "black",
-              border: "1px solid #ccc"
-            }}
             type="button"
-            className="finishBtn saveBtn"
+            className="op-btn op-btn-ghost mr-1 mt-[2px]"
             onClick={() => handleClear()}
           >
             Clear
           </button>
         )}
-
         <button
           onClick={() => {
             setCurrWidgetsDetails({});
@@ -127,19 +121,12 @@ function SignPad({
             setSignValue("");
             setIsStamp(false);
           }}
-          style={{
-            background: themeColor,
-            color: "white"
-          }}
-          disabled={
-            isSignImg || image || isDefaultSign || textWidth ? false : true
-          }
           type="button"
-          className={
+          className={`${
             isSignImg || image || isDefaultSign || textWidth
-              ? "finishBtn saveBtn"
-              : "disabledFinish saveBtn"
-          }
+              ? ""
+              : "pointer-events-none"
+          } op-btn op-btn-primary shadow-lg`}
         >
           Save
         </button>
@@ -256,7 +243,7 @@ function SignPad({
 
   const PenColorComponent = (props) => {
     return (
-      <div style={{ display: "flex", flexDirection: "row" }}>
+      <div className="flex flex-row items-start">
         {allColor.map((data, key) => {
           return (
             <i
@@ -296,33 +283,14 @@ function SignPad({
   return (
     <div>
       {isSignPad && (
-        <div className="modaloverlay">
-          <div className="modalcontainer">
-            <div
-              className="modalheader"
-              style={{ padding: "0 13px", marginTop: "5px" }}
-            >
-              <div className="modaltitle">
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    background: "white",
-                    marginTop: "3px"
-                  }}
-                >
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "space-around",
-                      alignItems: "end",
-                      gap: 10
-                    }}
-                  >
+        <div className="op-modal op-modal-open">
+          <div className="op-modal-box px-[13px] pt-2 pb-0">
+            <div className="flex justify-between text-base-content items-center">
+              <div className="text-[1.2rem]">
+                <div className="flex flex-row justify-between mt-[3px]">
+                  <div className="flex flex-row justify-between gap-[5px] md:gap-[8px] text-[11px] md:text-base">
                     {isStamp ? (
-                      <span style={{ color: themeColor }} className="signTab">
+                      <span className="op-link-primary op-link">
                         {widgetType === "image"
                           ? "Upload image"
                           : "Upload stamp image"}
@@ -337,23 +305,14 @@ function SignPad({
                               setIsTab("draw");
                               setImage();
                             }}
-                            style={{
-                              color: isTab === "draw" ? themeColor : "#515252",
-                              marginLeft: "2px"
-                            }}
-                            className="signTab"
+                            className={`${
+                              isTab === "draw"
+                                ? "op-link-primary"
+                                : "no-underline"
+                            } op-link underline-offset-8 ml-[2px]`}
                           >
                             Draw
                           </span>
-
-                          <div
-                            style={{
-                              border:
-                                isTab === "draw"
-                                  ? "1.5px solid #108783"
-                                  : "1.5px solid #ffffff"
-                            }}
-                          ></div>
                         </div>
                         <div>
                           <span
@@ -363,22 +322,14 @@ function SignPad({
                               setIsTab("uploadImage");
                               setSignatureType("");
                             }}
-                            style={{
-                              color:
-                                isTab === "uploadImage" ? themeColor : "#515252"
-                            }}
-                            className="signTab"
+                            className={`${
+                              isTab === "uploadImage"
+                                ? "op-link-primary"
+                                : "no-underline"
+                            } op-link underline-offset-8 ml-[2px]`}
                           >
                             Upload Image
                           </span>
-                          <div
-                            style={{
-                              border:
-                                isTab === "uploadImage"
-                                  ? "1.5px solid #108783"
-                                  : "1.5px solid #ffffff"
-                            }}
-                          ></div>
                         </div>
                         <div>
                           <span
@@ -389,23 +340,14 @@ function SignPad({
                               setSignatureType("");
                               setImage();
                             }}
-                            style={{
-                              color: isTab === "type" ? themeColor : "#515252",
-                              marginLeft: "2px"
-                            }}
-                            className="signTab"
+                            className={`${
+                              isTab === "type"
+                                ? "op-link-primary"
+                                : "no-underline"
+                            } op-link underline-offset-8 ml-[2px]`}
                           >
                             Type
                           </span>
-
-                          <div
-                            style={{
-                              border:
-                                isTab === "type"
-                                  ? "1.5px solid #108783"
-                                  : "1.5px solid #ffffff"
-                            }}
-                          ></div>
                         </div>
                         {!isInitial && defaultSign ? (
                           <div>
@@ -417,24 +359,14 @@ function SignPad({
                                 setSignatureType("");
                                 setImage();
                               }}
-                              style={{
-                                color:
-                                  isTab === "mysignature"
-                                    ? themeColor
-                                    : "#515252"
-                              }}
-                              className="signTab"
+                              className={`${
+                                isTab === "mysignature"
+                                  ? "op-link-primary"
+                                  : "no-underline"
+                              } op-link underline-offset-8 ml-[2px]`}
                             >
                               My Signature
                             </span>
-                            <div
-                              style={{
-                                border:
-                                  isTab === "mysignature"
-                                    ? "1.5px solid #108783"
-                                    : "1.5px solid #ffffff"
-                              }}
-                            ></div>
                           </div>
                         ) : (
                           isInitial &&
@@ -448,24 +380,14 @@ function SignPad({
                                   setSignatureType("");
                                   setImage();
                                 }}
-                                style={{
-                                  color:
-                                    isTab === "mysignature"
-                                      ? themeColor
-                                      : "#515252"
-                                }}
-                                className="signTab"
+                                className={`${
+                                  isTab === "mysignature"
+                                    ? "op-link-primary"
+                                    : "no-underline"
+                                } op-link underline-offset-8 ml-[2px]`}
                               >
                                 My Initials
                               </span>
-                              <div
-                                style={{
-                                  border:
-                                    isTab === "mysignature"
-                                      ? "1.5px solid #108783"
-                                      : "1.5px solid #ffffff"
-                                }}
-                              ></div>
                             </div>
                           )
                         )}
@@ -475,8 +397,7 @@ function SignPad({
                 </div>
               </div>
               <div
-                className="closebtn"
-                style={{ color: "black" }}
+                className="text-[1.5rem] cursor-pointer"
                 onClick={() => {
                   setPenColor("blue");
                   setIsSignPad(false);
@@ -493,10 +414,10 @@ function SignPad({
                 &times;
               </div>
             </div>
-            <div style={{ height: "100%", padding: 20 }}>
+            <div className="p-[20px] h-full">
               {isDefaultSign ? (
                 <>
-                  <div style={{ display: "flex", justifyContent: "center" }}>
+                  <div className="flex justify-center">
                     <div
                       style={{
                         border: "1.3px solid #007bff",
@@ -514,29 +435,23 @@ function SignPad({
                     >
                       <img
                         alt="stamp img"
-                        style={{
-                          width: "100%",
-                          height: "100%",
-                          background: "rgb(255, 255, 255)",
-                          objectFit: "contain"
-                        }}
+                        className="w-full h-full object-contain bg-white"
                         draggable="false"
                         src={isInitial ? myInitial : defaultSign}
                       />
                     </div>
                   </div>
-                  <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                  <div className="flex justify-end">
                     <SaveBtn />
                   </div>
                 </>
               ) : isImageSelect || isStamp ? (
                 !image ? (
-                  <div style={{ display: "flex", justifyContent: "center" }}>
+                  <div className="flex justify-center">
                     <div
                       style={{
                         border: "1.3px solid #007bff",
                         borderRadius: "2px",
-
                         display: "flex",
                         flexDirection: "column",
                         justifyContent: "center",
@@ -553,7 +468,7 @@ function SignPad({
                         type="file"
                         onChange={onImageChange}
                         className="filetype"
-                        accept="image/*"
+                        accept="image/png,image/jpeg"
                         ref={imageRef}
                         hidden
                       />
@@ -563,7 +478,7 @@ function SignPad({
                   </div>
                 ) : (
                   <>
-                    <div style={{ display: "flex", justifyContent: "center" }}>
+                    <div className="flex justify-center">
                       <div
                         style={{
                           border: "1.3px solid #007bff",
@@ -582,39 +497,26 @@ function SignPad({
                           ref={imageRef}
                           src={image.src}
                           draggable="false"
-                          style={{
-                            objectFit: "contain",
-                            height: "100%",
-                            width: "100%"
-                          }}
+                          className=" object-contain h-full w-full"
                         />
                       </div>
                     </div>
-                    <div
-                      style={{ display: "flex", justifyContent: "flex-end" }}
-                    >
+                    <div className="flex justify-end">
                       <SaveBtn />
                     </div>
                   </>
                 )
               ) : isTab === "type" ? (
                 <div>
-                  <div
-                    style={{
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "center"
-                    }}
-                  >
+                  <div className="flex justify-between items-center">
                     <span className="signatureText">
                       {isInitial ? "Initials" : "Signature"}:
                     </span>
-
                     <input
                       maxLength={isInitial ? 3 : 30}
                       style={{ fontFamily: fontSelect, color: penColor }}
                       type="text"
-                      className="signatureInput"
+                      className="ml-1 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-[20px]"
                       placeholder="Your signature"
                       value={signValue}
                       onChange={(e) => {
@@ -623,7 +525,6 @@ function SignPad({
                       }}
                     />
                   </div>
-
                   <div className="fontOptionContainer">
                     {fontOptions.map((font, ind) => {
                       return (
@@ -654,21 +555,14 @@ function SignPad({
                     })}
                   </div>
 
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      marginTop: "10px"
-                    }}
-                  >
+                  <div className="flex flex-row justify-between mt-[10px]">
                     <PenColorComponent convertToImg={convertToImg} />
                     <SaveBtn />
                   </div>
                 </div>
               ) : (
                 <>
-                  <div style={{ display: "flex", justifyContent: "center" }}>
+                  <div className="flex justify-center">
                     <SignatureCanvas
                       ref={canvasRef}
                       penColor={penColor}
@@ -688,14 +582,7 @@ function SignPad({
                       dotSize={1}
                     />
                   </div>
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      marginTop: "10px"
-                    }}
-                  >
+                  <div className="flex flex-row justify-between mt-[10px]">
                     <PenColorComponent />
                     <SaveBtn />
                   </div>

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { themeColor } from "../../constant/const";
 import "../../styles/signature.css";
 function Signedby({ pdfDetails }) {
   const getFirstLetter = (name) => {
@@ -8,50 +7,18 @@ function Signedby({ pdfDetails }) {
   };
 
   return (
-    <div className="signerComponent">
-      <div
-        style={{
-          background: themeColor,
-          color: "white"
-        }}
-        className="signedStyle"
-      >
+    <div className="hidden md:block w-[180px] h-full bg-base-100">
+      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
         Signed By
       </div>
-      <div style={{ marginTop: "2px", background: "white" }}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            padding: "10px",
-            background: "#93a3db"
-          }}
-        >
-          <div
-            className="signerStyle"
-            style={{
-              background: "#abd1d0",
-              width: 20,
-              height: 20,
-              display: "flex",
-              borderRadius: 30 / 2,
-              justifyContent: "center",
-              alignItems: "center",
-              marginRight: "20px",
-              marginTop: "5px"
-            }}
-          >
-            <span
-              style={{
-                fontSize: "8px",
-                textAlign: "center",
-                fontWeight: "bold"
-              }}
-            >
+      <div className="mt-[2px] bg-base-100">
+        <div className="bg-[#93a3db] rounded-xl mx-1 flex flex-row items-center py-[10px]">
+          <div className="bg-[#576081] flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1">
+            <span className="text-[12px] text-center font-bold text-white uppercase">
               {getFirstLetter(pdfDetails.ExtUserPtr.Name)}
             </span>
           </div>
-          <div style={{ display: "flex", flexDirection: "column" }}>
+          <div className="flex flex-col">
             <span className="userName">{pdfDetails.ExtUserPtr.Name}</span>
             <span className="useEmail">{pdfDetails.ExtUserPtr.Email}</span>
           </div>

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

@@ -1,37 +1,22 @@
 import React from "react";
-import { themeColor } from "../../constant/const";
 import RecipientList from "./RecipientList";
 import { Tooltip } from "react-tooltip";
 
 function SignerListPlace(props) {
   return (
     <div>
-      <div
-        style={{
-          background: themeColor,
-          padding: "5px"
-        }}
-      >
-        <span className="signedStyle">
+      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
+        <span>
           {props.title ? props.title : "Recipients"}
-          <span className="absolute text-xs z-[30] mt-1 ml-0.5">
+          <span className="text-xs mt-1 ml-0.5">
             {props?.title === "Roles" && (
               <>
                 <a data-tooltip-id="my-tooltip">
                   <sup>
-                    <i
-                      className="fa-solid fa-question rounded-full"
-                      style={{
-                        borderColor: "white",
-                        color: "white",
-                        fontSize: 11,
-                        borderWidth: 1.5,
-                        padding: "1px 3px"
-                      }}
-                    ></i>
+                    <i className="fa-solid fa-question rounded-full border-[1.5px] border-base-content text-[11px] py-[1px] px-[3px]"></i>
                   </sup>
                 </a>
-                <Tooltip id="my-tooltip">
+                <Tooltip id="my-tooltip" className="z-[100]">
                   <div className="max-w-[450px]">
                     <p className="font-bold">What are template roles?</p>
                     <p>
@@ -68,23 +53,32 @@ function SignerListPlace(props) {
           </span>
         </span>
       </div>
-      <div className="signerList">
+      <div className="overflow-auto hide-scrollbar max-h-[180px]">
         <RecipientList {...props} />
       </div>
-      {props.handleAddSigner && (
-        <div
-          data-tut="reactourAddbtn"
-          className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad]  hover:text-white cursor-pointer"
-          onClick={() => props.handleAddSigner()}
-          style={{
-            opacity: props.isMailSend && "0.5",
-            pointerEvents: props.isMailSend && "none"
-          }}
-        >
-          <i className="fa-solid fa-plus"></i>
-          <span style={{ marginLeft: 2 }}>Add role</span>
-        </div>
-      )}
+      <div className="mx-1">
+        {props.handleAddSigner ? (
+          <div
+            role="button"
+            data-tut="reactourAddbtn"
+            className="op-btn op-btn-accent op-btn-outline w-full mt-[14px]"
+            disabled={props?.isMailSend ? true : false}
+            onClick={() => props.handleAddSigner()}
+          >
+            <i className="fa-solid fa-plus"></i> Add role
+          </div>
+        ) : (
+          <div
+            role="button"
+            data-tut="reactourAddbtn"
+            className="op-btn op-btn-accent op-btn-outline w-full mt-[14px]"
+            disabled={props?.isMailSend ? true : false}
+            onClick={() => props.setIsAddSigner(true)}
+          >
+            <i className="fa-solid fa-plus"></i> Add recipients
+          </div>
+        )}
+      </div>
     </div>
   );
 }

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

@@ -0,0 +1,67 @@
+import React from "react";
+import Loader from "../../primitives/Loader";
+
+function VerifyEmail(props) {
+  return (
+    <dialog className="op-modal op-modal-open absolute z-[1999]">
+      <div className="md:w-[40%] w-[80%] op-modal-box p-0 overflow-y-auto hide-scrollbar text-sm">
+        <h3 className="font-bold text-lg pt-[15px] px-[20px] text-base-content">
+          OTP verification
+        </h3>
+        {props.isVerifyModal ? (
+          <form
+            onSubmit={(e) => {
+              props.setIsVerifyModal(false);
+              props.handleVerifyEmail(e);
+            }}
+          >
+            <div className="px-6 py-3 text-base-content">
+              <label className="mb-2">Enter OTP</label>
+              <input
+                required
+                type="tel"
+                pattern="[0-9]{4}"
+                className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
+                placeholder="Enter OTP received over email"
+                value={props.otp}
+                onChange={(e) => props.setOtp(e.target.value)}
+              />
+            </div>
+            <div className="px-6 my-3">
+              <button type="submit" className="op-btn op-btn-primary">
+                Verify
+              </button>
+              <button
+                className="op-btn op-btn-secondary ml-2"
+                onClick={(e) => props.handleResend(e)}
+              >
+                Resend
+              </button>
+            </div>
+          </form>
+        ) : props.otpLoader ? (
+          <div className="h-[150px] flex items-center justify-center">
+            <Loader />
+          </div>
+        ) : (
+          <div className="px-6 py-3 text-base-content">
+            <p className="mb-2 text-sm">Please verify your email !</p>
+            <div className="px-0 mt-3">
+              <button
+                className="op-btn op-btn-primary"
+                type="submit"
+                onClick={() => {
+                  props.handleVerifyBtn();
+                }}
+              >
+                Send OTP
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </dialog>
+  );
+}
+
+export default VerifyEmail;

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

@@ -9,7 +9,6 @@ import {
   textWidget,
   widgets
 } from "../../constant/Utils";
-import { themeColor } from "../../constant/const";
 function WidgetComponent({
   dragSignature,
   signRef,
@@ -38,7 +37,8 @@ function WidgetComponent({
   sendInOrder,
   isTemplateFlow,
   setBlockColor,
-  blockColor
+  blockColor,
+  setIsAddSigner
 }) {
   const [isSignersModal, setIsSignersModal] = useState(false);
 
@@ -255,101 +255,82 @@ function WidgetComponent({
             className="stickyfooter"
             style={{ width: window.innerWidth + "px" }}
           >
-            {isSigners && (
-              <div
-                data-tut={dataTut}
-                style={{
-                  background: blockColor
-                    ? blockColor
-                    : isSelectListId
-                      ? color[isSelectListId % color.length]
-                      : color[0],
-                  padding: "10px 20px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
-                }}
-                onClick={() => handleModal()}
-              >
-                <span
+            <div className="mx-1">
+              {isSigners && (
+                <div
+                  data-tut={dataTut}
+                  className="py-[10px] flex justify-center items-center op-card"
                   style={{
-                    fontSize: "13px",
-                    fontWeight: "700",
-                    textAlign: "center"
+                    background: blockColor
+                      ? blockColor
+                      : isSelectListId
+                        ? color[isSelectListId % color.length]
+                        : color[0]
                   }}
+                  onClick={() => handleModal()}
                 >
-                  {title ? title : "Recipient"}
-                </span>
-                <span
-                  style={{
-                    fontSize: "13px",
-                    fontWeight: "700",
-                    display: "flex",
-                    alignItems: "center"
-                  }}
-                >
-                  {signersdata[isSelectListId]?.Role && (
-                    <div>
-                      {signersdata[isSelectListId]?.Name ? (
-                        <>
-                          :{" "}
-                          {signersdata[isSelectListId]?.Name?.length > 12
-                            ? `${signersdata[isSelectListId].Name.slice(
-                                0,
-                                12
-                              )}...`
-                            : signersdata[isSelectListId]?.Name}
-                        </>
-                      ) : (
-                        <>
-                          :{" "}
-                          {signersdata[isSelectListId]?.Role?.length > 12
-                            ? `${signersdata[isSelectListId].Role.slice(
-                                0,
-                                12
-                              )}...`
-                            : signersdata[isSelectListId]?.Role}
-                        </>
-                      )}
+                  <span className="text-[13px] font-bold flex items-center">
+                    {title ? title : "Recipient"}
+                    {signersdata[isSelectListId]?.Role && (
+                      <div>
+                        {signersdata[isSelectListId]?.Name ? (
+                          <>
+                            :{" "}
+                            {signersdata[isSelectListId]?.Name?.length > 12
+                              ? `${signersdata[isSelectListId].Name.slice(
+                                  0,
+                                  12
+                                )}...`
+                              : signersdata[isSelectListId]?.Name}
+                          </>
+                        ) : (
+                          <>
+                            :{" "}
+                            {signersdata[isSelectListId]?.Role?.length > 12
+                              ? `${signersdata[isSelectListId].Role.slice(
+                                  0,
+                                  12
+                                )}...`
+                              : signersdata[isSelectListId]?.Role}
+                          </>
+                        )}
+                      </div>
+                    )}
+                    <div className="ml-[6px] text-[16px]">
+                      <i className="fa-solid fa-angle-down"></i>
                     </div>
-                  )}
-                  <div style={{ marginLeft: 6, fontSize: 16 }}>
-                    <i className="fa-solid fa-angle-down"></i>
+                  </span>
+                </div>
+              )}
+            </div>
+            <div className="mx-1">
+              {handleAddSigner ? (
+                <div
+                  data-tut="reactourAddbtn"
+                  className="op-btn op-btn-accent w-full my-[2px]"
+                  onClick={() => handleAddSigner()}
+                >
+                  <i className="fa-solid fa-plus"></i>
+                  <span>Add role</span>
+                </div>
+              ) : (
+                setIsAddSigner && (
+                  <div
+                    data-tut="reactourAddbtn"
+                    className="op-btn op-btn-accent w-full my-[2px]"
+                    onClick={() => setIsAddSigner(true)}
+                  >
+                    <i className="fa-solid fa-plus"></i>
+                    <span>Add recipients</span>
                   </div>
-                </span>
-              </div>
-            )}
-            {handleAddSigner && (
-              <div
-                data-tut="reactourAddbtn"
-                style={{
-                  margin: "5px 0 5px 0",
-                  backgroundColor: themeColor,
-                  color: "white"
-                }}
-                className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad] hover:text-white cursor-pointer"
-                onClick={() => handleAddSigner()}
-              >
-                <i className="fa-solid fa-plus"></i>
-                <span style={{ marginLeft: 2 }}>Add role</span>
-              </div>
-            )}
-
+                )
+              )}
+            </div>
             <div
               ref={scrollContainerRef}
-              style={{
-                background: "white",
-                borderTop: `2px solid ${themeColor}`
-              }}
+              className="bg-base-100 border-[2px] border-t-primary"
             >
-              <div
-                style={{
-                  display: "flex",
-                  overflowX: "scroll",
-                  whiteSpace: "nowrap",
-                  padding: "10px 5px 10px 1px"
-                }}
-              >
+              <div className="flex whitespace-nowrap overflow-x-scroll pt-[10px] pb-[5px] pr-[5px]">
                 <WidgetList
                   updateWidgets={updateWidgets}
                   handleDivClick={handleDivClick}
@@ -366,20 +347,14 @@ function WidgetComponent({
       ) : (
         <div
           data-tut={dataTut}
-          className={
-            isMailSend ? "disabled signerComponent " : "signerComponent"
-          }
+          className={`${
+            isMailSend ? "bg-opacity-50 pointer-events-none" : ""
+          } hidden md:block w-[180px] h-full bg-base-100`}
         >
-          <div
-            style={{
-              background: themeColor,
-              padding: "5px"
-            }}
-          >
-            <span className="signedStyle">Fields</span>
+          <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
+            <span>Fields</span>
           </div>
-
-          <div className="signLayoutContainer1">
+          <div className="flex flex-col items-center my-3">
             <WidgetList
               updateWidgets={updateWidgets}
               handleDivClick={handleDivClick}
@@ -391,12 +366,12 @@ function WidgetComponent({
       )}
       {isSignersModal && (
         <ModalUi
-          title={"Roles"}
+          title={title ? title : "Recipients"}
           isOpen={isSignersModal}
           handleClose={handleModal}
         >
           {signersdata.length > 0 ? (
-            <div style={{ maxHeight: "600px", overflow: "auto" }}>
+            <div className="max-h-[600px] overflow-auto pb-1">
               <RecipientList
                 signerPos={signerPos}
                 signersdata={signersdata}
@@ -416,15 +391,8 @@ function WidgetComponent({
               />
             </div>
           ) : (
-            <div
-              style={{
-                padding: 20,
-                fontSize: 15,
-                fontWeight: "500",
-                textAlign: "center"
-              }}
-            >
-              Please add a role
+            <div className=" p-[20px] text-[15px] font-medium text-center">
+              Please add a {title ? title : "recipients"}
             </div>
           )}
         </ModalUi>

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

@@ -4,9 +4,9 @@ import { getWidgetType } from "../../constant/Utils";
 function WidgetList(props) {
   return props.updateWidgets.map((item, ind) => {
     return (
-      <div key={ind} style={{ marginBottom: "5px" }}>
+      <div key={ind} className="mb-[5px]">
         <div
-          className="widgets"
+          className="select-none"
           onClick={() => {
             props.addPositionOfSignature &&
               props.addPositionOfSignature("onclick", item);

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

@@ -6,6 +6,7 @@ import { textInputWidget } from "../../constant/Utils";
 import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
 import Upgrade from "../../primitives/Upgrade";
 import { isEnableSubscription } from "../../constant/const";
+import Tooltip from "../../primitives/Tooltip";
 
 const WidgetNameModal = (props) => {
   const [formdata, setFormdata] = useState({
@@ -13,7 +14,7 @@ const WidgetNameModal = (props) => {
     defaultValue: "",
     status: "required",
     hint: "",
-    textvalidate: "text"
+    textvalidate: ""
   });
   const [isValid, setIsValid] = useState(true);
   const statusArr = ["Required", "Optional"];
@@ -48,12 +49,16 @@ const WidgetNameModal = (props) => {
         defaultValue: "",
         status: "required",
         hint: "",
-        textvalidate: "text"
+        textvalidate: ""
       });
     }
   };
   const handleChange = (e) => {
-    setFormdata({ ...formdata, [e.target.name]: e.target.value });
+    if (e) {
+      setFormdata({ ...formdata, [e.target.name]: e.target.value });
+    } else {
+      setFormdata({ ...formdata, textvalidate: "" });
+    }
   };
 
   const handledefaultChange = (e) => {
@@ -82,7 +87,7 @@ const WidgetNameModal = (props) => {
 
   function handleBlurRegex() {
     if (!formdata.textvalidate) {
-      setFormdata({ ...formdata, textvalidate: "text" });
+      setFormdata({ ...formdata, textvalidate: "" });
     } else {
       if (formdata.defaultValue) {
         const regexObject = RegexParser(
@@ -117,15 +122,15 @@ const WidgetNameModal = (props) => {
           props.widgetName === textInputWidget
             ? "pt-0"
             : ""
-        } p-[20px]`}
+        } p-[20px] text-base-content`}
       >
-        <div className="form-section">
-          <label htmlFor="name" style={{ fontSize: 13 }}>
+        <div className="mb-[0.75rem] text-[13px]">
+          <label htmlFor="name">
             Name
-            <span style={{ color: "red", fontSize: 13 }}> *</span>
+            <span className="text-[red]"> *</span>
           </label>
           <input
-            className="addUserInput"
+            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             name="name"
             value={formdata.name}
             onChange={(e) => handleChange(e)}
@@ -135,54 +140,55 @@ const WidgetNameModal = (props) => {
         {(props.defaultdata?.type === textInputWidget ||
           props.widgetName === textInputWidget) && (
           <>
-            <div className="form-section">
-              <label
-                htmlFor="textvalidate"
-                className={
-                  !props.isSubscribe && isEnableSubscription && "disabled"
-                }
-                style={{ fontSize: 13 }}
-              >
-                Validation
-              </label>
-              {!props.isSubscribe && isEnableSubscription && <Upgrade />}
+            <div className="mb-[0.75rem]">
+              <div className="flex items-center gap-1">
+                <label
+                  htmlFor="textvalidate"
+                  className={`${
+                    !props.isSubscribe && isEnableSubscription
+                      ? "bg-opacity-50 pointer-events-none"
+                      : ""
+                  } text-[13px]`}
+                >
+                  Validation
+                </label>
+                <Tooltip
+                  url={"https://www.w3schools.com/jsref/jsref_obj_regexp.asp"}
+                />
+                {!props.isSubscribe && isEnableSubscription && <Upgrade />}
+              </div>
               <div
-                className={
-                  !props.isSubscribe && isEnableSubscription && "disabled"
-                }
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  gap: 10,
-                  marginBottom: "0.5rem"
-                }}
+                className={`${
+                  !props.isSubscribe && isEnableSubscription
+                    ? "bg-opacity-50 pointer-events-none"
+                    : ""
+                } flex flex-row gap-[10px] mb-[0.5rem]`}
               >
-                <div style={{ width: "100%", position: "relative" }}>
+                <div className="w-full relative group">
                   <input
-                    className="relative z-20 w-[87%] md:w-[92%] p-2.5 border-[1px] border-[#d1d5db] rounded-l-md outline-none text-xs"
+                    className="z-20 relative op-input op-input-bordered rounded-r-none op-input-sm focus:outline-none group-hover:border-base-content w-[87%] md:w-[92%] text-xs"
                     name="textvalidate"
-                    placeholder="Enter custom expression"
+                    placeholder="Enter custom regular expression"
                     value={formdata.textvalidate}
                     onChange={(e) => handleChange(e)}
                     // onBlur={() => handleBlurRegex()}
                   />
                   <select
-                    className="validationlist addUserInput"
+                    className="validationlist op-input op-input-bordered op-input-sm focus:outline-none group-hover:border-base-content w-full text-xs"
                     name="textvalidate"
                     value={formdata.textvalidate}
                     onChange={(e) => handleChange(e)}
                     onBlur={() => handleBlurRegex()}
                   >
-                    <option disabled style={{ fontSize: "13px" }}>
+                    <option
+                      disabled={formdata?.textvalidate}
+                      className="text-[13px]"
+                    >
                       Select...
                     </option>
                     {inputOpt.map((data, ind) => {
                       return (
-                        <option
-                          style={{ fontSize: "13px" }}
-                          key={ind}
-                          value={data}
-                        >
+                        <option className="text-[13px]" key={ind} value={data}>
                           {data}
                         </option>
                       );
@@ -192,12 +198,12 @@ const WidgetNameModal = (props) => {
               </div>
             </div>
 
-            <div className="form-section">
-              <label htmlFor="name" style={{ fontSize: 13 }}>
+            <div className="mb-[0.75rem]">
+              <label htmlFor="name" className="text-[13px]">
                 Default value
               </label>
               <input
-                className="addUserInput"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 name="defaultValue"
                 value={formdata.defaultValue}
                 onChange={(e) => handledefaultChange(e)}
@@ -215,37 +221,22 @@ const WidgetNameModal = (props) => {
                   style={{ fontSize: 12 }}
                 >
                   <i
-                    className="fas fa-exclamation-circle"
-                    style={{ color: "#fab005", fontSize: 15 }}
-                  ></i>{" "}
+                    className="fas fa-exclamation-circle text-[15px]"
+                    style={{ color: "#fab005" }}
+                  ></i>
                   invalid default value
                 </div>
               )}
             </div>
           </>
         )}
-        <div className="form-section">
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              gap: 10,
-              marginBottom: "0.5rem"
-            }}
-          >
+        <div className="mb-[0.75rem]">
+          <div className="flex flex-row gap-[10px] mb-[0.5rem]">
             {statusArr.map((data, ind) => {
               return (
-                <div
-                  key={ind}
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: 5,
-                    alignItems: "center"
-                  }}
-                >
+                <div key={ind} className="flex flex-row gap-[5px] items-center">
                   <input
-                    style={{ accentColor: "red", marginRight: "10px" }}
+                    className="mr-[2px] op-radio op-radio-xs"
                     type="radio"
                     name="status"
                     onChange={() =>
@@ -255,9 +246,7 @@ const WidgetNameModal = (props) => {
                       formdata.status.toLowerCase() === data.toLowerCase()
                     }
                   />
-                  <div style={{ fontSize: "13px", fontWeight: "500" }}>
-                    {data}
-                  </div>
+                  <div className="text-[13px] font-medium">{data}</div>
                 </div>
               );
             })}
@@ -265,35 +254,20 @@ const WidgetNameModal = (props) => {
         </div>
         {(props.defaultdata?.type === textInputWidget ||
           props?.widgetName === textInputWidget) && (
-          <div className="form-section">
-            <label htmlFor="hint" style={{ fontSize: 13 }}>
+          <div className="mb-[0.75rem]">
+            <label htmlFor="hint" className="text-[13px]">
               Hint
             </label>
             <input
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
               name="hint"
               value={formdata.hint}
               onChange={(e) => handleChange(e)}
             />
           </div>
         )}
-        <div
-          style={{
-            height: 1,
-            backgroundColor: "#b7b3b3",
-            width: "100%",
-            marginBottom: "16px"
-          }}
-        ></div>
-        <button
-          style={{
-            color: "white",
-            padding: "5px 20px",
-            backgroundColor: "#32a3ac"
-          }}
-          type="submit"
-          className="finishBtn"
-        >
+        <div className="h-[1px] w-full mb-[16px] bg-[#b7b3b3]"></div>
+        <button type="submit" className="op-btn op-btn-primary">
           Save
         </button>
       </form>

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import Alert from "../../../primitives/Alert";
+import Loader from "../../../primitives/Loader";
 
 const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   const folderPtr = {
@@ -25,9 +26,11 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
       if (parentFolderId) {
         FolderQuery.equalTo("Folder", folderPtr);
         FolderQuery.equalTo("Type", "Folder");
+        FolderQuery.notEqualTo("IsArchive", true);
       } else {
         FolderQuery.doesNotExist("Folder");
         FolderQuery.equalTo("Type", "Folder");
+        FolderQuery.notEqualTo("IsArchive", true);
       }
 
       const res = await FolderQuery.find();
@@ -49,6 +52,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
       const exsitQuery = new Parse.Query(folderCls);
       exsitQuery.equalTo("Name", name);
       exsitQuery.equalTo("Type", "Folder");
+      exsitQuery.notEqualTo("IsArchive", true);
       if (parentFolderId) {
         exsitQuery.equalTo("Folder", folderPtr);
       }
@@ -110,11 +114,8 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
       {isAlert && <Alert type={alert.type}>{alert.message}</Alert>}
       <div id="createFolder" className="relative">
         {isLoader && (
-          <div className="absolute h-full w-full flex justify-center items-center ">
-            <div
-              style={{ fontSize: "45px", color: "#3dd3e0" }}
-              className="loader-37"
-            ></div>
+          <div className="absolute h-full w-full flex justify-center items-center">
+            <Loader />
           </div>
         )}
         <h1 className="text-base font-semibold">Create Folder</h1>

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

@@ -25,9 +25,11 @@ const FolderModal = (props) => {
       if (folderPtr) {
         FolderQuery.equalTo("Folder", folderPtr);
         FolderQuery.equalTo("Type", "Folder");
+        FolderQuery.notEqualTo("IsArchive", true);
       } else {
         FolderQuery.doesNotExist("Folder");
         FolderQuery.equalTo("Type", "Folder");
+        FolderQuery.notEqualTo("IsArchive", true);
       }
 
       const res = await FolderQuery.find();

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

@@ -45,9 +45,11 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
       if (folderPtr) {
         FolderQuery.equalTo("Folder", folderPtr);
         FolderQuery.equalTo("Type", "Folder");
+        FolderQuery.notEqualTo("IsArchive", true);
       } else {
         FolderQuery.doesNotExist("Folder");
         FolderQuery.equalTo("Type", "Folder");
+        FolderQuery.notEqualTo("IsArchive", true);
       }
 
       const res = await FolderQuery.find();
@@ -169,32 +171,40 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
           {required && <span className="text-red-500 text-[13px]">*</span>}
         </label>
       </div>
-      <div className="relative rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
-        <div>
-          <i
-            className="far fa-folder-open text-[40px] text-[#33bbff]"
-            style={{ fontSize: "40px" }}
-            aria-hidden="true"
-          ></i>
-        </div>
-        <div className="font-semibold ">
-          <div className="flex items-center gap-2">
-            <p>
-              {selectFolder && selectFolder.Name
-                ? selectFolder.Name
-                : "OpenSign™ Drive"}
-            </p>
-            <div className="text-black text-sm" onClick={() => SetIsOpen(true)}>
-              <i
-                className="fa fa-pencil"
-                title="Select Folder"
-                aria-hidden="true"
-              ></i>
-            </div>
+      <div className="relative max-w-sm">
+        <div
+          onClick={() => SetIsOpen(true)}
+          className=" cursor-pointer rounded px-[20px] py-[20px] bg-base-100 border-[1px] border-base-200 shadow flex max-w-sm gap-8 items-center"
+        >
+          <div>
+            <i
+              className="far fa-folder-open text-[40px] text-[#33bbff]"
+              style={{ fontSize: "40px" }}
+              aria-hidden="true"
+            ></i>
+          </div>
+          <div className="font-semibold ">
+            <div className="flex items-center gap-2">
+              <p>
+                {selectFolder && selectFolder.Name
+                  ? selectFolder.Name
+                  : "OpenSign™ Drive"}
+              </p>
+              <div
+                className="text-black text-sm"
+                // onClick={() => SetIsOpen(true)}
+              >
+                <i
+                  className="fa fa-pencil cursor-pointer"
+                  title="Select Folder"
+                  aria-hidden="true"
+                ></i>
+              </div>
+            </div>
+            <p className="text-[10px] text-gray-400">
+              {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
+            </p>
           </div>
-          <p className="text-[10px] text-gray-400">
-            {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
-          </p>
         </div>
         <div className="absolute top-2 right-1 cursor-pointer">
           <Tooltip

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

@@ -3,16 +3,6 @@ import Parse from "parse";
 import "../../../styles/AddUser.css";
 import AsyncSelect from "react-select/async";
 
-const customStyles = {
-  control: (provided) => ({
-    ...provided,
-    fontSize: "13px" // Font size for the control
-  }),
-  option: (provided) => ({
-    ...provided,
-    fontSize: "13px" // Font size for the options
-  })
-};
 const SelectSigners = (props) => {
   const [userList, setUserList] = useState([]);
   const [selected, setSelected] = useState();
@@ -53,9 +43,22 @@ const SelectSigners = (props) => {
       const contactRes = await contactbook.find();
       if (contactRes) {
         const res = JSON.parse(JSON.stringify(contactRes));
-        // console.log("userList ", res);
-        setUserList(res);
-        return await res.map((item) => ({
+        //compareArrays is a function where compare between two array (total signersList and dcument signers list)
+        //and filter signers from total signer's list which already present in document's signers list
+        const compareArrays = (res, signerObj) => {
+          return res.filter(
+            (item1) =>
+              !signerObj.find((item2) => item2.objectId === item1.objectId)
+          );
+        };
+
+        //get update signer's List if signersdata is present
+        const updateSignersList =
+          props?.signersData && compareArrays(res, props?.signersData);
+
+        const result = updateSignersList ? updateSignersList : res;
+        setUserList(result);
+        return await result.map((item) => ({
           label: item.Email,
           value: item.objectId
         }));
@@ -66,32 +69,44 @@ const SelectSigners = (props) => {
   };
 
   return (
-    <div className="addusercontainer">
-      <div className="form-wrapper">
-        <div className="form-section" style={{ marginBottom: 0 }}>
-          <label style={{ fontSize: 14, fontWeight: "700" }}>Choose User</label>
+    <div className="h-full px-[20px] py-[10px] text-base-content">
+      <div className="w-full mx-auto p-[8px]">
+        <div className="mb-0">
+          <label className="text-[14px] font-bold">Choose from contacts</label>
           <AsyncSelect
             cacheOptions
             defaultOptions
             value={selected}
             loadingMessage={() => "Loading..."}
-            noOptionsMessage={() => "User not Found"}
+            noOptionsMessage={() => "Contact not found"}
             loadOptions={loadOptions}
             onChange={handleOptions}
-            styles={customStyles}
+            unstyled
+            classNames={{
+              control: () =>
+                "op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full h-full text-[11px]",
+              valueContainer: () =>
+                "flex flex-row gap-x-[2px] gap-y-[2px] md:gap-y-0 w-full my-[2px]",
+              multiValue: () => "op-badge op-badge-primary h-full text-[11px]",
+              multiValueLabel: () => "mb-[2px]",
+              menu: () =>
+                "mt-1 shadow-md rounded-lg bg-base-200 text-base-content",
+              menuList: () => "shadow-md rounded-lg overflow-hidden",
+              option: () =>
+                "bg-base-200 text-base-content rounded-lg m-1 hover:bg-base-300 p-2",
+              noOptionsMessage: () => "p-2 bg-base-200 rounded-lg m-1 p-2"
+            }}
           />
         </div>
-        {isError ? (
-          <p style={{ color: "red", fontSize: "12px", margin: "5px" }}>
-            Please select signer
-          </p>
-        ) : (
-          <p style={{ color: "transparent", fontSize: "12px", margin: "5px" }}>
-            .
-          </p>
-        )}
+        <p
+          className={`${
+            isError ? "text-[red]" : "text-transparent"
+          } text-[11px] ml-[6px] my-[2px]`}
+        >
+          Please select signer
+        </p>
         <div>
-          <button className="submitbutton" onClick={() => handleAdd()}>
+          <button className="op-btn op-btn-primary" onClick={() => handleAdd()}>
             Submit
           </button>
         </div>

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

@@ -1,15 +1,30 @@
 import React, { useState, useEffect } from "react";
 import Select from "react-select";
 import AddSigner from "../../AddSigner";
-import Modal from "react-modal";
 import Parse from "parse";
 import Tooltip from "../../../primitives/Tooltip";
+import { createPortal } from "react-dom";
 function arrayMove(array, from, to) {
   array = array.slice();
   array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
   return array;
 }
 
+const AddSignerModal = ({ isOpen, children }) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return createPortal(
+    <div className="op-modal op-modal-open">
+      <div className="op-modal-box p-0 min-w-[90%] md:min-w-[500px] max-h-90 overflow-y-auto hide-scrollbar text-sm">
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
 /**
  * react-sortable-hoc is depcreated not usable from react 18.x.x
  *  need to replace it with @dnd-kit
@@ -17,7 +32,6 @@ function arrayMove(array, from, to) {
  */
 
 const SignersInput = (props) => {
-  Modal.setAppElement("body");
   const [state, setState] = useState(undefined);
   // const [editFormData, setEditFormData] = useState([]);
   const [selected, setSelected] = useState([]);
@@ -108,15 +122,17 @@ const SignersInput = (props) => {
       <label className="block relative">
         Signers
         {props.required && <span className="text-red-500 text-[13px]">*</span>}
-        <span className="absolute ml-1 text-xs z-50">
+        <span className="absolute ml-1 text-xs z-30">
           <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."}
+            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%" }}>
+      <div className="flex gap-x-[5px]">
+        <div className="w-full">
           <Select
             onSortEnd={onSortEnd}
             distance={4}
@@ -126,6 +142,22 @@ const SignersInput = (props) => {
             onChange={onChange}
             closeMenuOnSelect={false}
             required={props.required}
+            noOptionsMessage={() => "Contact not found"}
+            unstyled
+            classNames={{
+              control: () =>
+                "op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full h-full text-[11px]",
+              valueContainer: () =>
+                "flex flex-row gap-x-[2px] gap-y-[2px] md:gap-y-0 w-full my-[2px]",
+              multiValue: () => "op-badge op-badge-primary h-full text-[11px]",
+              multiValueLabel: () => "mb-[2px]",
+              menu: () =>
+                "mt-1 shadow-md rounded-lg bg-base-200 text-base-content",
+              menuList: () => "shadow-md rounded-lg overflow-hidden",
+              option: () =>
+                "bg-base-200 text-base-content rounded-lg m-1 hover:bg-base-300 p-2",
+              noOptionsMessage: () => "p-2 bg-base-200 rounded-lg m-1 p-2"
+            }}
           />
         </div>
         <div
@@ -133,66 +165,29 @@ const SignersInput = (props) => {
             setIsModel(true);
             openModal();
           }}
-          style={{
-            cursor: "pointer",
-            borderRadius: 4,
-            border: "1px solid #ccc",
-            minHeight: 38,
-            minWidth: 48,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center"
-          }}
+          className="cursor-pointer op-input op-input-bordered focus:outline-none hover:border-base-content max-h-[38px] min-w-[48px] flex justify-center items-center"
         >
           <i className="fas fa-plus"></i>
         </div>
-        <Modal
-          isOpen={modalIsOpen}
-          onRequestClose={handleModalCloseClick}
-          shouldCloseOnOverlayClick={false}
-          id="modal1"
-          contentLabel="Modal"
-          style={{
-            content: {
-              top: "50%",
-              left: "50%",
-              right: "auto",
-              bottom: "auto",
-              transform: "translate(-50%, -50%)",
-              border: "1px transparent",
-              padding: 0
-            },
-            overlay: {
-              width: "100%",
-              backgroundColor: "rgba(0, 0, 0, 0.75)",
-              zIndex: 50
-            }
-          }}
-        >
-          <div className="min-w-full md:min-w-[500px]">
-            <div
-              className="flex justify-between rounded-t items-center py-[10px] px-[20px] text-white"
-              style={{ background: "#32a3ac" }}
-            >
-              <div className="text-[1.2rem] font-normal">Add Signer</div>
-              <button
-                onClick={handleModalCloseClick}
-                className="text-[1.5rem] cursor-pointer focus:outline-none"
-              >
-                &times;
-              </button>
-            </div>
-
-            {isModal && (
-              <AddSigner
-                valueKey={"objectId"}
-                displayKey={"Name"}
-                details={handleNewDetails}
-                closePopup={handleModalCloseClick}
-              />
-            )}
-          </div>
-        </Modal>
+        <AddSignerModal isOpen={modalIsOpen}>
+          <h3 className="text-base-content font-bold text-lg pt-[15px] px-[20px]">
+            Add Signer
+          </h3>
+          <button
+            onClick={handleModalCloseClick}
+            className="op-btn op-btn-sm op-btn-circle op-btn-ghost text-base-content absolute right-2 top-2"
+          >
+            ✕
+          </button>
+          {isModal && (
+            <AddSigner
+              valueKey={"objectId"}
+              displayKey={"Name"}
+              details={handleNewDetails}
+              closePopup={handleModalCloseClick}
+            />
+          )}
+        </AddSignerModal>
       </div>
     </div>
   );

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

@@ -0,0 +1,92 @@
+import React, { useState, useEffect, useRef } from "react";
+import { findContact } from "../../../constant/Utils";
+const SuggestionInput = (props) => {
+  const [inputValue, setInputValue] = useState(props?.value || "");
+  const [suggestions, setSuggestions] = useState([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    document.addEventListener("mousedown", Clickout);
+    return () => {
+      document.removeEventListener("mousedown", Clickout);
+    };
+  }, []);
+
+  const Clickout = (event) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setShowSuggestions(false);
+    }
+  };
+  // create debounce to avoid unnecessay api calls
+  useEffect(() => {
+    let timer;
+    if (inputValue) {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        (async () => {
+          const res = await findContact(inputValue);
+          if (res?.length > 0) {
+            setSuggestions(res);
+            setShowSuggestions(true);
+          } else {
+            setSuggestions(res);
+            setShowSuggestions(false);
+          }
+        })();
+      }, 1000);
+    }
+    return () => clearTimeout(timer);
+  }, [inputValue]);
+
+  const handleInputChange = async (e) => {
+    const value = e.target.value;
+    setInputValue(value?.toLowerCase());
+    if (props.onChange) {
+      props.onChange(value);
+    }
+
+    if (value.trim() === "") {
+      setSuggestions([]);
+      setShowSuggestions(false);
+      return;
+    }
+  };
+  const handleSuggestionClick = (suggestion) => {
+    setInputValue(suggestion.Email);
+    setSuggestions([]);
+    setShowSuggestions(false);
+    if (props.onChange) {
+      props.onChange(suggestion);
+    }
+  };
+  return (
+    <div className="flex flex-col items-center relative text-base-content">
+      <input
+        type={props?.type || "text"}
+        value={inputValue}
+        onChange={handleInputChange}
+        placeholder="Enter Email..."
+        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs lowercase"
+        required={props.required}
+      />
+      {showSuggestions && (
+        <ul
+          ref={ref}
+          className="absolute z-50 left-0 top-[2.55rem] w-full max-h-[100px] overflow-auto bg-base-200 border border-gray-300 rounded shadow-md"
+        >
+          {suggestions.map((suggestion, index) => (
+            <li
+              key={index}
+              className="py-2 px-2 w-full text-sm cursor-pointer hover:bg-base-300"
+              onClick={() => handleSuggestionClick(suggestion)}
+            >
+              {suggestion.Email}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+export default SuggestionInput;

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

@@ -3,14 +3,18 @@ import { NavLink } from "react-router-dom";
 
 const Menu = ({ item, isOpen, closeSidebar }) => {
   return (
-    <li key={item.title} role="none">
+    <li key={item.title} role="none" className="my-0.5">
       <NavLink
         to={
           item.pageType
             ? `/${item.pageType}/${item.objectId}`
             : `/${item.objectId}`
         }
-        className="mx-auto flex items-center hover:bg-[#eef1f5] p-3 lg:p-4 cursor-pointer  focus:text-[#0056b3] focus:bg-[#eef1f5]"
+        className={({ isActive }) =>
+          `${
+            isActive ? " bg-base-300 text-base-content" : ""
+          } flex items-center text-left p-3 lg:p-4 text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none`
+        }
         onClick={closeSidebar}
         tabIndex={isOpen ? 0 : -1}
         role="menuitem"

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

@@ -9,6 +9,7 @@ import dp from "../../assets/images/dp.png";
 
 const Sidebar = ({ isOpen, closeSidebar }) => {
   const [menuList, setmenuList] = useState([]);
+  const [submenuOpen, setSubmenuOpen] = useState(false);
   let username = localStorage.getItem("username");
   const image = localStorage.getItem("profileImg") || dp;
   const tenantname = localStorage.getItem("TenantName");
@@ -33,27 +34,42 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
     }
   };
 
+  const toggleSubmenu = (title) => {
+    setSubmenuOpen({ [title]: !submenuOpen[title] });
+  };
+
+  const handleMenuItem = () => {
+    closeSidebar();
+    setSubmenuOpen({});
+  };
   return (
     <aside
-      className={`bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform z-40 md:translate-x-0
-      ${isOpen ? "translate-x-0 block" : "-translate-x-full hidden"}`}
+      className={`absolute md:relative bg-base-100 h-screen overflow-y-auto transition-all z-[100] hide-scrollbar
+     ${isOpen ? "w-full md:w-[300px]" : "w-0"}`}
     >
       <div className="flex px-2 py-3 gap-2 items-center shadow-md">
         <div className="w-[75px] h-[75px] rounded-full ring-[2px] ring-offset-2 ring-gray-400 overflow-hidden">
           <img
-            className="w-full h-full object-cover"
+            className="w-full h-full object-contain"
             src={image}
             alt="Profile"
           />
         </div>
         <div>
-          <p className="text-[14px] font-bold">{username}</p>
-          <p className={`text-[12px] ${tenantname ? "mt-2" : ""}`}>
+          <p className="text-[14px] font-bold text-base-content">{username}</p>
+          <p
+            className={`text-[12px] text-base-content ${
+              tenantname ? "mt-2" : ""
+            }`}
+          >
             {tenantname}
           </p>
         </div>
       </div>
-      <nav aria-label="OpenSign Sidebar Navigation">
+      <nav
+        className="op-menu op-menu-sm"
+        aria-label="OpenSign Sidebar Navigation"
+      >
         <ul
           className="text-sm"
           role="menubar"
@@ -65,19 +81,21 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
                 key={item.title}
                 item={item}
                 isOpen={isOpen}
-                closeSidebar={closeSidebar}
+                closeSidebar={handleMenuItem}
               />
             ) : (
               <Submenu
                 key={item.title}
                 item={item}
                 closeSidebar={closeSidebar}
+                toggleSubmenu={toggleSubmenu}
+                submenuOpen={submenuOpen}
               />
             )
           )}
         </ul>
       </nav>
-      <footer className="mt-4 flex justify-center items-center text-[25px] text-black gap-3">
+      <footer className="mt-4 flex justify-center items-center text-[25px] text-base-content gap-3">
         <SocialMedia />
       </footer>
     </aside>

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

@@ -1,19 +1,13 @@
-import React, { useState } from "react";
+import React from "react";
 import { NavLink } from "react-router-dom";
 
-const Submenu = ({ item, closeSidebar }) => {
-  const [submenuOpen, setSubmenuOpen] = useState(false);
+const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
   const { title, icon, children } = item;
-
-  const toggleSubmenu = () => {
-    setSubmenuOpen(!submenuOpen);
-  };
-
   return (
-    <li role="none">
+    <li role="none" className="my-0.5">
       <button
-        onClick={toggleSubmenu}
-        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]"
+        onClick={() => toggleSubmenu(item.title)}
+        className="flex items-center text-left p-3 lg:p-4 text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none "
         aria-expanded={submenuOpen}
         aria-haspopup="true"
         aria-controls={`submenu-${title}`}
@@ -23,23 +17,29 @@ const Submenu = ({ item, closeSidebar }) => {
           <span className="ml-3 lg:ml-4">{title}</span>
           <i
             className={`${
-              submenuOpen ? "fa-solid fa-angle-down" : "fa-solid fa-angle-right"
+              submenuOpen[item.title]
+                ? "fa-solid fa-angle-down"
+                : "fa-solid fa-angle-right"
             }`}
             aria-hidden="true"
           ></i>
         </div>
       </button>
-      {submenuOpen && (
+      {submenuOpen[item.title] && (
         <ul id={`submenu-${title}`} role="menu" aria-label={`${title} submenu`}>
           {children.map((childItem) => (
-            <li key={childItem.title} role="none">
+            <li key={childItem.title} role="none" className="my-0.5">
               <NavLink
                 to={
                   childItem.pageType
                     ? `/${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 focus:text-[#0056b3] focus:bg-[#eef1f5] cursor-pointer"
+                className={({ isActive }) =>
+                  `${
+                    isActive ? "bg-base-300 text-base-content" : ""
+                  } flex items-center text-left pl-6 md:pl-8 py-2 text-sm cursor-pointer text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none`
+                }
                 onClick={closeSidebar}
                 role="menuitem"
                 tabIndex={submenuOpen ? 0 : -1}

apps/OpenSign/src/constant/Utils.js

@@ -1,37 +1,82 @@
 import axios from "axios";
 import moment from "moment";
-import { themeColor } from "./const";
+import { isEnableSubscription } from "./const";
 import React from "react";
 import { rgb } from "pdf-lib";
 import Parse from "parse";
+import { appInfo } from "./appinfo";
+import { saveAs } from "file-saver";
+import printModule from "print-js";
 
 export const isMobile = window.innerWidth < 767;
 export const textInputWidget = "text input";
 export const textWidget = "text";
 export const radioButtonWidget = "radio button";
-export const openInNewTab = (url) => {
-  window.open(url, "_blank", "noopener,noreferrer");
+export const openInNewTab = (url, target) => {
+  if (target) {
+    window.open(url, target, "noopener,noreferrer");
+  } else {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
 };
 
+export async function fetchSubscription(
+  extUserId,
+  contactObjId,
+  isGuestSign = false
+) {
+  try {
+    const Extand_Class = localStorage.getItem("Extand_Class");
+    const extClass = Extand_Class && JSON.parse(Extand_Class);
+    // console.log("extClass ", extClass);
+    let extUser;
+    if (extClass && extClass.length > 0) {
+      extUser = extClass[0].objectId;
+    } else {
+      extUser = extUserId;
+    }
+    const baseURL = localStorage.getItem("baseUrl");
+    const url = `${baseURL}functions/getsubscriptions`;
+    const headers = {
+      "Content-Type": "application/json",
+      "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+      sessionToken: localStorage.getItem("accesstoken")
+    };
+    const params = isGuestSign
+      ? { contactId: contactObjId }
+      : { extUserId: extUser };
+    const tenatRes = await axios.post(url, params, { headers: headers });
+    let plan, status, billingDate;
+    if (isGuestSign) {
+      plan = tenatRes.data?.result?.result?.plan;
+      status = tenatRes.data?.result?.result?.isSubscribed;
+    } else {
+      plan = tenatRes.data?.result?.result?.PlanCode;
+      billingDate = tenatRes.data?.result?.result?.Next_billing_date?.iso;
+    }
+    return { plan, billingDate, status };
+  } catch (err) {
+    console.log("Err in fetch subscription", err);
+    return { plan: "", billingDate: "" };
+  }
+}
 //function to get subcripition details from Extand user class
 export async function checkIsSubscribed() {
-  const extClass = localStorage.getItem("Extand_Class");
-  const jsonSender = JSON.parse(extClass);
-  const user = await Parse.Cloud.run("getUserDetails", {
-    email: jsonSender[0].Email
-  });
-  const freeplan = user?.get("Plan") && user?.get("Plan")?.plan_code;
-  const billingDate =
-    user?.get("Next_billing_date") && user?.get("Next_billing_date");
-  if (freeplan === "freeplan") {
-    return false;
-  } else if (billingDate) {
-    if (billingDate > new Date()) {
-      return true;
+  try {
+    const res = await fetchSubscription();
+    if (res.plan === "freeplan") {
+      return false;
+    } else if (res.billingDate) {
+      if (new Date(res.billingDate) > new Date()) {
+        return true;
+      } else {
+        return false;
+      }
     } else {
       return false;
     }
-  } else {
+  } catch (err) {
+    console.log("Err in fetch subscription", err);
     return false;
   }
 }
@@ -134,11 +179,10 @@ export const contractUsers = async (email) => {
     .then((Listdata) => {
       const json = Listdata.data;
       let data = [];
-
       if (json && json.result) {
         data.push(json.result);
-        return data;
       }
+      return data;
     })
     .catch((err) => {
       console.log("Err ", err);
@@ -298,15 +342,15 @@ export const addWidgetOptions = (type) => {
         options: { isReadOnly: false, isHideLabel: false }
       };
     case textInputWidget:
-      return { ...defaultOpt, validation: { type: "text", pattern: "" } };
+      return { ...defaultOpt };
     case "initials":
       return defaultOpt;
     case "name":
-      return { ...defaultOpt, validation: { type: "text", pattern: "" } };
+      return { ...defaultOpt };
     case "company":
-      return { ...defaultOpt, validation: { type: "text", pattern: "" } };
+      return { ...defaultOpt };
     case "job title":
-      return { ...defaultOpt, validation: { type: "text", pattern: "" } };
+      return { ...defaultOpt };
     case "date":
       return {
         ...defaultOpt,
@@ -332,43 +376,21 @@ export const addWidgetOptions = (type) => {
       return {};
   }
 };
-export const getWidgetType = (item, marginLeft) => {
+export const getWidgetType = (item) => {
   return (
-    <>
-      <div
-        className="signatureBtn widgets"
-        style={{
-          boxShadow:
-            "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
-          marginLeft: marginLeft && `${marginLeft}px`
-        }}
-      >
-        <div className="flex items-center mr-1">
-          {!isMobile && (
-            <i
-              className="fa-sharp fa-solid fa-grip-vertical"
-              style={{ color: "#908d8d", fontSize: "13px", marginLeft: 4 }}
-            ></i>
-          )}
-          <span className=" font-[400] text-[15px] text-black ml-[5px]">
+    <div className="op-btn op-btn-primary op-btn-outline op-btn-sm focus:outline-none outline outline-[1.5px] w-fit md:w-[150px] ml-[6px] md:ml-0 p-0 overflow-hidden">
+      <div className="w-full h-full flex md:justify-between items-center">
+        <div className="flex justify-start items-center text-[13px] ml-1">
+          {!isMobile && <i className="fa-sharp fa-solid fa-grip-vertical"></i>}
+          <span className="text-center text-[15px] ml-[5px] font-semibold">
             {item.type}
           </span>
         </div>
-        <div
-          style={{
-            backgroundColor: themeColor,
-            padding: "0 5px",
-            display: "flex",
-            alignItems: "center"
-          }}
-        >
-          <i
-            style={{ color: "white", fontSize: item.iconSize }}
-            className={item.icon}
-          ></i>
+        <div className="text-[20px] op-btn op-btn-primary w-[40px] h-full flex justify-center items-center">
+          <i className={item.icon}></i>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 
@@ -501,38 +523,96 @@ export const signPdfFun = async (
   base64Url,
   documentId,
   signerObjectId,
-  setIsAlert
+  setIsAlert,
+  objectId,
+  isSubscribed,
+  activeMailAdapter,
+  xyPosition
 ) => {
-  let singleSign;
+  let singleSign,
+    isCustomCompletionMail = false;
 
-  singleSign = {
-    pdfFile: base64Url,
-    docId: documentId,
-    userId: signerObjectId
-  };
-
-  const response = await axios
-    .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
-      headers: {
-        "Content-Type": "application/json",
-        "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-        sessionToken: localStorage.getItem("accesstoken")
+  try {
+    //get tenant details
+    const tenantDetails = await getTenantDetails(objectId);
+    if (tenantDetails && tenantDetails === "user does not exist!") {
+      alert("User does not exist");
+    } else {
+      if (
+        tenantDetails?.CompletionBody &&
+        tenantDetails?.CompletionSubject &&
+        (!isEnableSubscription || isSubscribed)
+      ) {
+        isCustomCompletionMail = true;
       }
-    })
-    .then((Listdata) => {
-      const json = Listdata.data;
-      const res = json.result;
-      return res;
-    })
-    .catch((err) => {
-      console.log("Err ", err);
-      setIsAlert({
-        isShow: true,
-        alertMessage: "something went wrong"
-      });
-    });
+    }
 
-  return response;
+    // below for loop is used to get first signature of user to send if to signpdf
+    // for adding it in completion certificate
+    let getSignature;
+    for (let item of xyPosition) {
+      if (!getSignature) {
+        const typeExist = item.pos.some((data) => data?.type);
+        if (typeExist) {
+          getSignature = item.pos.find((data) => data?.type === "signature");
+        } else {
+          getSignature = item.pos.find((data) => !data.isStamp);
+        }
+      }
+    }
+
+    let base64Sign = getSignature.SignUrl;
+    //check https type signature (default signature exist) then convert in base64
+    const isUrl = base64Sign.includes("https");
+    if (isUrl) {
+      try {
+        base64Sign = await fetchImageBase64(base64Sign);
+      } catch (e) {
+        console.log("error", e);
+      }
+    }
+    //change image width and height to 104/44 in png base64
+    const getNewse64 = await changeImageWH(base64Sign);
+    //remove suffiix of base64
+    const suffixbase64 = getNewse64 && getNewse64.split(",").pop();
+
+    singleSign = {
+      mailProvider: activeMailAdapter,
+      pdfFile: base64Url,
+      docId: documentId,
+      userId: signerObjectId,
+      isCustomCompletionMail: isCustomCompletionMail,
+      signature: suffixbase64
+    };
+    const response = await axios
+      .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
+        headers: {
+          "Content-Type": "application/json",
+          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+          //  sessionToken: localStorage.getItem("accesstoken")
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+        }
+      })
+      .then((Listdata) => {
+        const json = Listdata.data;
+        const res = json.result;
+        return res;
+      })
+      .catch((err) => {
+        console.log("Err ", err);
+        setIsAlert({
+          isShow: true,
+          alertMessage: "something went wrong"
+        });
+      });
+
+    return response;
+  } catch (e) {
+    setIsAlert({
+      isShow: true,
+      alertMessage: "something went wrong"
+    });
+  }
 };
 
 export const randomId = () => {
@@ -567,6 +647,7 @@ export const createDocument = async (template, placeholders, signerData) => {
       Name: Doc.Name,
       URL: Doc.URL,
       SignedUrl: Doc.SignedUrl,
+      SentToOthers: Doc.SentToOthers,
       Description: Doc.Description,
       Note: Doc.Note,
       Placeholders: placeholdersArr,
@@ -581,7 +662,9 @@ export const createDocument = async (template, placeholders, signerData) => {
         objectId: Doc.CreatedBy.objectId
       },
       Signers: signers,
-      SendinOrder: Doc?.SendinOrder || false
+      SendinOrder: Doc?.SendinOrder || false,
+      AutomaticReminders: Doc?.AutomaticReminders || false,
+      RemindOnceInEvery: parseInt(Doc?.RemindOnceInEvery || 5)
     };
 
     try {
@@ -1069,7 +1152,6 @@ export const onImageSelect = (event, setImgWH, setImage) => {
   const imageType = event.target.files[0].type;
   const reader = new FileReader();
   reader.readAsDataURL(event.target.files[0]);
-
   reader.onloadend = function (e) {
     let width, height;
     const image = new Image();
@@ -1097,6 +1179,50 @@ export const onImageSelect = (event, setImgWH, setImage) => {
   };
 };
 
+//convert https url to base64
+export const fetchImageBase64 = async (imageUrl) => {
+  try {
+    const response = await fetch(imageUrl);
+    const blob = await response.blob();
+
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onloadend = () => {
+        const base64data = reader.result;
+        resolve(base64data);
+      };
+      reader.onerror = (error) => {
+        reject(error);
+      };
+    });
+  } catch (error) {
+    throw new Error("Error converting URL to base64:", error);
+  }
+};
+//function for select image and upload image
+export const changeImageWH = async (base64Image) => {
+  const newWidth = 100;
+  const newHeight = 40;
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = base64Image;
+    img.onload = async () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      canvas.width = newWidth;
+      canvas.height = newHeight;
+      ctx.imageSmoothingEnabled = false;
+      ctx.drawImage(img, 0, 0, newWidth, newHeight);
+      const resizedBase64 = canvas.toDataURL("image/png", 1);
+      resolve(resizedBase64);
+    };
+    img.onerror = (error) => {
+      reject(error);
+    };
+  });
+};
+
 //function for embed multiple signature using pdf-lib
 export const multiSignEmbed = async (
   pngUrl,
@@ -1135,10 +1261,10 @@ export const multiSignEmbed = async (
             const newUrl = await convertPNGtoJPEG(signUrl);
             signUrl = newUrl;
           }
-          const checkUrl = urlValidator(signUrl);
-          if (checkUrl) {
-            signUrl = signUrl + "?get";
-          }
+          // const checkUrl = urlValidator(signUrl);
+          // if (checkUrl) {
+          //   signUrl = signUrl + "?get";
+          // }
           const res = await fetch(signUrl);
           return res.arrayBuffer();
         }
@@ -1273,6 +1399,7 @@ export const multiSignEmbed = async (
         }
       };
       const widgetTypeExist = [
+        textWidget,
         textInputWidget,
         "name",
         "company",
@@ -1328,7 +1455,7 @@ export const multiSignEmbed = async (
             checkbox.enableReadOnly();
           });
         }
-      } else if (position.type === textWidget) {
+      } else if (widgetTypeExist) {
         const font = await pdfDoc.embedFont("Helvetica");
         const fontSize = 12;
         let textContent;
@@ -1404,24 +1531,8 @@ export const multiSignEmbed = async (
             color: rgb(0, 0, 0),
             size: fontSize
           });
-          y -= 15; // Adjust the line height as needed
+          y -= 18; // Adjust the line height as needed
         }
-      } else if (widgetTypeExist) {
-        const font = await pdfDoc.embedFont("Helvetica");
-        const fontSize = 12;
-        let textContent;
-        if (position?.options?.response) {
-          textContent = position.options?.response;
-        } else if (position?.options?.defaultValue) {
-          textContent = position?.options?.defaultValue;
-        }
-        page.drawText(textContent, {
-          x: xPos(position),
-          y: yPos(position) + 10,
-          size: fontSize,
-          font,
-          color: rgb(0, 0, 0)
-        });
       } else if (position.type === "dropdown") {
         const dropdownRandomId = "dropdown" + randomId();
         const dropdown = form.createDropdown(dropdownRandomId);
@@ -1792,3 +1903,263 @@ export const handleCopyNextToWidget = (
     setXyPostion(updatePlaceholder);
   }
 };
+
+export const getFileName = (fileUrl) => {
+  if (fileUrl) {
+    const url = new URL(fileUrl);
+    const filename = url.pathname.substring(url.pathname.indexOf("_") + 1);
+    return filename || "";
+  } else {
+    return "";
+  }
+};
+
+//fetch tenant app logo from `partners_Tenant` class by domain name
+export const getAppLogo = async () => {
+  const domainName = window.location.host;
+  try {
+    const tenantCreditsQuery = new Parse.Query("partners_Tenant");
+    tenantCreditsQuery.equalTo("Domain", domainName);
+    const res = await tenantCreditsQuery.first();
+
+    if (res) {
+      const updateRes = JSON.parse(JSON.stringify(res));
+      return updateRes?.Logo;
+    }
+  } catch (e) {
+    return null;
+  }
+};
+
+export const getTenantDetails = async (objectId) => {
+  try {
+    const tenantCreditsQuery = new Parse.Query("partners_Tenant");
+    tenantCreditsQuery.equalTo("UserId", {
+      __type: "Pointer",
+      className: "_User",
+      objectId: objectId
+    });
+    const res = await tenantCreditsQuery.first();
+    if (res) {
+      const updateRes = JSON.parse(JSON.stringify(res));
+      return updateRes;
+    }
+  } catch (e) {
+    return "user does not exist!";
+  }
+};
+
+//function to convert variable string name to variable value of email body and subject
+export function replaceMailVaribles(subject, body, variables) {
+  let replacedSubject = subject;
+  let replacedBody = body;
+
+  for (const variable in variables) {
+    const regex = new RegExp(`{{${variable}}}`, "g");
+    if (subject) {
+      replacedSubject = replacedSubject.replace(regex, variables[variable]);
+    }
+    if (body) {
+      replacedBody = replacedBody.replace(regex, variables[variable]);
+    }
+  }
+
+  const result = {
+    subject: replacedSubject,
+    body: replacedBody
+  };
+  return result;
+}
+
+export const copytoData = (text) => {
+  // navigator.clipboard.writeText(text);
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(text);
+  } else {
+    // Fallback for browsers that don't support navigator.clipboard
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textArea);
+  }
+};
+
+export const convertPdfArrayBuffer = async (url) => {
+  try {
+    const response = await fetch(url);
+    // Check if the response was successful (status 200)
+    if (!response.ok) {
+      return "Error";
+    }
+    // Convert the response to ArrayBuffer
+    const arrayBuffer = await response.arrayBuffer();
+    return arrayBuffer;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return "Error";
+  }
+};
+
+//`handleSendOTP` function is used to send otp on user's email using `SendOTPMailV1` cloud function
+export const handleSendOTP = async (email) => {
+  try {
+    let url = `${localStorage.getItem("baseUrl")}functions/SendOTPMailV1`;
+    const headers = {
+      "Content-Type": "application/json",
+      "X-Parse-Application-Id": localStorage.getItem("parseAppId")
+    };
+    const body = { email: email };
+    await axios.post(url, body, { headers: headers });
+  } catch (error) {
+    alert(error.message);
+  }
+};
+//handle download signed pdf
+export const handleDownloadPdf = async (
+  pdfDetails,
+  pdfUrl,
+  setIsDownloading
+) => {
+  const pdfName = pdfDetails[0] && pdfDetails[0].Name;
+  setIsDownloading("pdf");
+  try {
+    // const url = await Parse.Cloud.run("getsignedurl", { url: pdfUrl });
+    const axiosRes = await axios.post(
+      `${appInfo.baseUrl}/functions/getsignedurl`,
+      { url: pdfUrl },
+      {
+        headers: {
+          "content-type": "Application/json",
+          "X-Parse-Application-Id": appInfo.appId,
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+        }
+      }
+    );
+    const url = axiosRes.data.result;
+    saveAs(url, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
+    setIsDownloading("");
+  } catch (err) {
+    console.log("err in getsignedurl", err);
+    setIsDownloading("");
+    alert("something went wrong, please try again later.");
+  }
+};
+
+export const sanitizeFileName = (pdfName) => {
+  // Replace spaces with underscore
+  return pdfName.replace(/ /g, "_");
+};
+//function for print digital sign pdf
+export const handleToPrint = async (event, pdfUrl, setIsDownloading) => {
+  event.preventDefault();
+  setIsDownloading("pdf");
+  try {
+    // const url = await Parse.Cloud.run("getsignedurl", { url: pdfUrl });
+    const axiosRes = await axios.post(
+      `${appInfo.baseUrl}/functions/getsignedurl`,
+      { url: pdfUrl },
+      {
+        headers: {
+          "content-type": "Application/json",
+          "X-Parse-Application-Id": appInfo.appId,
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+        }
+      }
+    );
+    const url = axiosRes.data.result;
+    const pdf = await getBase64FromUrl(url);
+    const isAndroidDevice = navigator.userAgent.match(/Android/i);
+    const isAppleDevice =
+      (/iPad|iPhone|iPod/.test(navigator.platform) ||
+        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
+      !window.MSStream;
+    if (isAndroidDevice || isAppleDevice) {
+      const byteArray = Uint8Array.from(
+        atob(pdf)
+          .split("")
+          .map((char) => char.charCodeAt(0))
+      );
+      const blob = new Blob([byteArray], { type: "application/pdf" });
+      const blobUrl = URL.createObjectURL(blob);
+      window.open(blobUrl, "_blank");
+      setIsDownloading("");
+    } else {
+      printModule({ printable: pdf, type: "pdf", base64: true });
+      setIsDownloading("");
+    }
+  } catch (err) {
+    setIsDownloading("");
+    console.log("err in getsignedurl", err);
+    alert("something went wrong, please try again later.");
+  }
+};
+
+//handle download signed pdf
+export const handleDownloadCertificate = async (
+  pdfDetails,
+  setIsDownloading
+) => {
+  if (pdfDetails?.length > 0 && pdfDetails[0]?.CertificateUrl) {
+    try {
+      await fetch(pdfDetails[0] && pdfDetails[0]?.CertificateUrl);
+      const certificateUrl = pdfDetails[0] && pdfDetails[0]?.CertificateUrl;
+      saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
+    } catch (err) {
+      console.log("err in download in certificate", err);
+    }
+  } else {
+    setIsDownloading("certificate");
+    try {
+      const data = {
+        docId: pdfDetails[0]?.objectId
+      };
+      const docDetails = await axios.post(
+        `${localStorage.getItem("baseUrl")}functions/getDocument`,
+        data,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+            sessionToken: localStorage.getItem("accesstoken")
+          }
+        }
+      );
+      if (docDetails.data && docDetails.data.result) {
+        const doc = docDetails.data.result;
+        if (doc?.CertificateUrl) {
+          await fetch(doc?.CertificateUrl);
+          const certificateUrl = doc?.CertificateUrl;
+          saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
+          setIsDownloading("");
+        } else {
+          setIsDownloading("certificate");
+        }
+      }
+    } catch (err) {
+      console.log("err in download in certificate", err);
+      alert("something went wrong, please try again later.");
+    }
+  }
+};
+export async function findContact(value) {
+  try {
+    const currentUser = Parse.User.current();
+    const contactbook = new Parse.Query("contracts_Contactbook");
+    contactbook.equalTo(
+      "CreatedBy",
+      Parse.User.createWithoutData(currentUser.id)
+    );
+    contactbook.notEqualTo("IsDeleted", true);
+    contactbook.matches("Email", new RegExp(value, "i"));
+
+    const contactRes = await contactbook.find();
+    if (contactRes) {
+      const res = JSON.parse(JSON.stringify(contactRes));
+      return res;
+    }
+  } catch (error) {
+    console.error("Error fetching suggestions:", error);
+  }
+}

apps/OpenSign/src/constant/const.js

@@ -1,12 +1,6 @@
 export const contactCls = "contracts_Contactbook";
 export const templateCls = "contracts_Template";
 export const documentCls = "contracts_Document";
-export const rejectBtn =
-  "bg-[#ffffff] rounded-sm shadow-md text-[12px] font-semibold uppercase text-black py-1.5 px-4 focus:outline-none text-center border-[1px] border-[#b4b4b4]";
-export const submitBtn =
-  "bg-[#32a3ac] rounded-sm shadow-md text-[12px] font-semibold uppercase text-white py-1.5 px-4 focus:outline-none text-center";
-export const modalSubmitBtnColor = "#17a2b8";
-export const modalCancelBtnColor = "white";
 export const themeColor = "#47a3ad";
 export const iconColor = "#686968";
 export const isEnableSubscription = process.env.REACT_APP_ENABLE_SUBSCRIPTION;

apps/OpenSign/src/constant/saveFileSize.js

@@ -1,6 +1,10 @@
 import axios from "axios";
-const parseAppId = localStorage.getItem("parseAppId");
-const serverUrl = localStorage.getItem("baseUrl");
+const parseAppId = process.env.REACT_APP_APPID
+  ? process.env.REACT_APP_APPID
+  : "opensign";
+const serverUrl = process.env.REACT_APP_SERVERURL
+  ? process.env.REACT_APP_SERVERURL
+  : window.location.origin + "/api/app";
 
 export const SaveFileSize = async (size, imageUrl, tenantId) => {
   //checking server url and save file's size
@@ -12,7 +16,7 @@ export const SaveFileSize = async (size, imageUrl, tenantId) => {
   const _tenantPtr = JSON.stringify(tenantPtr);
   try {
     const res = await axios.get(
-      `${serverUrl}classes/partners_TenantCredits?where={"PartnersTenant":${_tenantPtr}}`,
+      `${serverUrl}/classes/partners_TenantCredits?where={"PartnersTenant":${_tenantPtr}}`,
       {
         headers: {
           "Content-Type": "application/json",
@@ -30,7 +34,7 @@ export const SaveFileSize = async (size, imageUrl, tenantId) => {
           : size
       };
       await axios.put(
-        `${serverUrl}classes/partners_TenantCredits/${response[0].objectId}`,
+        `${serverUrl}/classes/partners_TenantCredits/${response[0].objectId}`,
         data,
         {
           headers: {
@@ -41,7 +45,7 @@ export const SaveFileSize = async (size, imageUrl, tenantId) => {
       );
     } else {
       data = { usedStorage: size, PartnersTenant: tenantPtr };
-      await axios.post(`${serverUrl}classes/partners_TenantCredits`, data, {
+      await axios.post(`${serverUrl}/classes/partners_TenantCredits`, data, {
         headers: {
           "Content-Type": "application/json",
           "X-Parse-Application-Id": parseAppId
@@ -64,7 +68,7 @@ const saveDataFile = async (size, imageUrl, tenantPtr) => {
 
   // console.log("data save",file, data)
   try {
-    await axios.post(`${serverUrl}classes/partners_DataFiles`, data, {
+    await axios.post(`${serverUrl}/classes/partners_DataFiles`, data, {
       headers: {
         "Content-Type": "application/json",
         "X-Parse-Application-Id": parseAppId
@@ -74,4 +78,3 @@ const saveDataFile = async (size, imageUrl, tenantPtr) => {
     console.log("err in save usage ", err);
   }
 };
-  

apps/OpenSign/src/index.css

@@ -2,17 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
-body{
-    background-color: white;
+body {
+  background-color: white;
 }
 
 /* Custom CSS to hide scrollbar */
 .hide-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  
-.hide-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
+  display: none;
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
-  

apps/OpenSign/src/index.js

@@ -4,6 +4,7 @@ import "./index.css";
 import App from "./App";
 import { Provider } from "react-redux";
 import { store } from "./redux/store";
+import { CookiesProvider } from "react-cookie";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { TouchBackend } from "react-dnd-touch-backend";
 import {
@@ -15,6 +16,7 @@ import {
 import DragElement from "./components/pdf/DragElement";
 import TagManager from "react-gtm-module";
 import Parse from "parse";
+import './polyfills'
 const appId = process.env.REACT_APP_APPID
   ? process.env.REACT_APP_APPID
   : "opensign";
@@ -62,10 +64,12 @@ if (process.env.REACT_APP_GTM) {
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <Provider store={store}>
-    <DndProvider options={HTML5toTouch}>
-      <Preview>{generatePreview}</Preview>
-      <App />
-    </DndProvider>
-  </Provider>
+  <CookiesProvider defaultSetOptions={{ path: "/" }}>
+    <Provider store={store}>
+      <DndProvider options={HTML5toTouch}>
+        <Preview>{generatePreview}</Preview>
+        <App />
+      </DndProvider>
+    </Provider>
+  </CookiesProvider>
 );

apps/OpenSign/src/json/ReportJson.js

@@ -3,7 +3,7 @@ export default function reportJson(id) {
   const head = ["Sr.No", "Title", "Note", "Folder", "File", "Owner", "Signers"];
   const contactbook = ["Sr.No", "Title", "Email", "Phone"];
   const dashboardReportHead = ["Title", "File", "Owner", "Signers"];
-
+  const templateReport = ["Sr.No", "Title", "File", "Owner", "Signers"];
   switch (id) {
     // draft documents report
     case "ByHuevtCFY":
@@ -12,14 +12,24 @@ export default function reportJson(id) {
         heading: head,
         actions: [
           {
-            btnLabel: "sign",
-            btnColor: "#4bd396",
-            textColor: "white",
-            btnIcon: "fa fa-plus",
-            redirectUrl: "draftDocument"
+            btnId: "1231",
+            hoverLabel: "Edit",
+            btnColor: "op-btn-primary",
+            btnIcon: "fa-solid fa-pen",
+            redirectUrl: "draftDocument",
+            action: "redirect"
+          },
+          {
+            btnId: "2142",
+            hoverLabel: "Delete",
+            btnColor: "op-btn-secondary",
+            btnIcon: "fa fa-trash",
+            redirectUrl: "",
+            action: "delete"
           }
         ],
-        helpMsg: "These are documents you have started but have not finalized for sending."
+        helpMsg:
+          "These are documents you have started but have not finalized for sending."
       };
     // Need your sign report
     case "4Hhwbp482K":
@@ -28,11 +38,13 @@ export default function reportJson(id) {
         heading: head,
         actions: [
           {
+            btnId: "4536",
             btnLabel: "sign",
-            btnColor: "#3ac9d6",
-            textColor: "white",
-            btnIcon: "fa fa-eye",
-            redirectUrl: "pdfRequestFiles"
+            hoverLabel: "Sign",
+            btnColor: "op-btn-primary",
+            btnIcon: "fa-solid fa-signature",
+            redirectUrl: "pdfRequestFiles",
+            action: "redirect"
           }
         ],
         helpMsg:
@@ -45,11 +57,54 @@ export default function reportJson(id) {
         heading: head,
         actions: [
           {
-            btnLabel: "View",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnId: "8901",
+            hoverLabel: "Share",
+            btnColor: "op-btn-primary",
+            btnIcon: "fa-solid fa-share",
+            redirectUrl: "",
+            action: "share"
+          },
+          {
+            btnId: "1588",
+            hoverLabel: "View",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-eye",
-            redirectUrl: "pdfRequestFiles"
+            redirectUrl: "pdfRequestFiles",
+            action: "redirect"
+          },
+          {
+            btnId: "2234",
+            hoverLabel: "option",
+            btnColor: "",
+            textColor: "black",
+            btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
+            action: "option",
+            subaction: [
+              {
+                btnId: "1630",
+                btnLabel: "Resend",
+                hoverLabel: "Resend",
+                btnIcon: "fa-solid fa-envelope",
+                redirectUrl: "",
+                action: "resend"
+              },
+              {
+                btnId: "1688",
+                btnLabel: "Revoke",
+                hoverLabel: "Revoke",
+                btnIcon: "fa-solid fa-file-circle-xmark",
+                redirectUrl: "",
+                action: "revoke"
+              },
+              {
+                btnId: "1488",
+                btnLabel: "Delete",
+                hoverLabel: "Delete",
+                btnIcon: "fa fa-trash",
+                redirectUrl: "",
+                action: "delete"
+              }
+            ]
           }
         ],
         helpMsg:
@@ -62,14 +117,24 @@ export default function reportJson(id) {
         heading: head,
         actions: [
           {
-            btnLabel: "View",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnId: "1378",
+            hoverLabel: "Edit",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-eye",
-            redirectUrl: "draftDocument"
+            redirectUrl: "draftDocument",
+            action: "redirect"
+          },
+          {
+            btnId: "1278",
+            hoverLabel: "Delete",
+            btnColor: "op-btn-secondary",
+            btnIcon: "fa fa-trash",
+            redirectUrl: "",
+            action: "delete"
           }
         ],
-        helpMsg: "This is a list of documents that have been signed by all parties."
+        helpMsg:
+          "This is a list of documents that have been signed by all parties."
       };
     //  declined documents report
     case "UPr2Fm5WY3":
@@ -78,14 +143,24 @@ export default function reportJson(id) {
         heading: head,
         actions: [
           {
-            btnLabel: "View",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnId: "1458",
+            hoverLabel: "View",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-eye",
-            redirectUrl: "draftDocument"
+            redirectUrl: "draftDocument",
+            action: "redirect"
+          },
+          {
+            btnId: "1358",
+            hoverLabel: "Delete",
+            btnColor: "op-btn-secondary",
+            btnIcon: "fa fa-trash",
+            redirectUrl: "",
+            action: "delete"
           }
         ],
-        helpMsg: "This is a list of documents that have been declined by one of the signers."
+        helpMsg:
+          "This is a list of documents that have been declined by one of the signers."
       };
     //  Expired Documents report
     case "zNqBHXHsYH":
@@ -94,14 +169,24 @@ export default function reportJson(id) {
         heading: head,
         actions: [
           {
-            btnLabel: "View",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnId: "1898",
+            hoverLabel: "View",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-eye",
-            redirectUrl: "draftDocument"
+            redirectUrl: "draftDocument",
+            action: "redirect"
+          },
+          {
+            btnId: "1998",
+            hoverLabel: "Delete",
+            btnColor: "op-btn-secondary",
+            btnIcon: "fa fa-trash",
+            redirectUrl: "",
+            action: "delete"
           }
         ],
-        helpMsg: "This is a list of documents that have reached their expiration date."
+        helpMsg:
+          "This is a list of documents that have reached their expiration date."
       };
     //  Recently sent for signatures report show on dashboard
     case "d9k3UfYHBc":
@@ -110,11 +195,54 @@ export default function reportJson(id) {
         heading: dashboardReportHead,
         actions: [
           {
-            btnLabel: "View",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnId: "1999",
+            hoverLabel: "Share",
+            btnColor: "op-btn-primary",
+            btnIcon: "fa-solid fa-share",
+            redirectUrl: "",
+            action: "share"
+          },
+          {
+            btnId: "1999",
+            hoverLabel: "View",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-eye",
-            redirectUrl: "pdfRequestFiles"
+            redirectUrl: "pdfRequestFiles",
+            action: "redirect"
+          },
+          {
+            btnId: "2234",
+            hoverLabel: "option",
+            btnColor: "",
+            textColor: "black",
+            btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
+            action: "option",
+            subaction: [
+              {
+                btnId: "1631",
+                btnLabel: "Resend",
+                hoverLabel: "Resend",
+                btnIcon: "fa-solid fa-envelope",
+                redirectUrl: "",
+                action: "resend"
+              },
+              {
+                btnId: "6788",
+                btnLabel: "Revoke",
+                hoverLabel: "Revoke",
+                btnIcon: "fa-solid fa-file-circle-xmark",
+                redirectUrl: "",
+                action: "revoke"
+              },
+              {
+                btnId: "2000",
+                btnLabel: "Delete",
+                hoverLabel: "Delete",
+                btnIcon: "fa fa-trash",
+                redirectUrl: "",
+                action: "delete"
+              }
+            ]
           }
         ]
       };
@@ -125,11 +253,13 @@ export default function reportJson(id) {
         heading: dashboardReportHead,
         actions: [
           {
-            btnLabel: "Sign",
-            btnColor: "#4bd396",
-            textColor: "white",
-            btnIcon: "fa fa-eye",
-            redirectUrl: "pdfRequestFiles"
+            btnId: "2001",
+            btnLabel: "sign",
+            hoverLabel: "Sign",
+            btnColor: "op-btn-primary",
+            btnIcon: "fa-solid fa-signature",
+            redirectUrl: "pdfRequestFiles",
+            action: "redirect"
           }
         ]
       };
@@ -140,11 +270,20 @@ export default function reportJson(id) {
         heading: ["Title", "Note", "Folder", "File", "Owner", "Signers"],
         actions: [
           {
-            btnLabel: "sign",
-            btnColor: "#4bd396",
-            textColor: "white",
-            btnIcon: "fa fa-plus",
-            redirectUrl: "draftDocument"
+            btnId: "2003",
+            hoverLabel: "Edit",
+            btnColor: "op-btn-primary",
+            btnIcon: "fa-solid fa-pen",
+            redirectUrl: "draftDocument",
+            action: "redirect"
+          },
+          {
+            btnId: "2004",
+            hoverLabel: "Delete",
+            btnColor: "op-btn-secondary",
+            btnIcon: "fa fa-trash",
+            redirectUrl: "",
+            action: "delete"
           }
         ]
       };
@@ -155,34 +294,75 @@ export default function reportJson(id) {
         heading: contactbook,
         actions: [
           {
-            btnLabel: "",
-            btnColor: "#f55a42",
-            textColor: "white",
-            btnIcon: "fa-solid fa-trash"
+            btnId: "2204",
+            hoverLabel: "Delete",
+            btnColor: "op-btn-outline op-btn-error",
+            btnIcon: "fa-solid fa-trash",
+            action: "delete"
           }
         ],
         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."
+        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":
       return {
         reportName: "Templates",
-        heading: head,
+        heading: templateReport,
         actions: [
           {
+            btnId: "2234",
             btnLabel: "Use",
-            btnColor: "#4bd396",
-            textColor: "white",
+            hoverLabel: "Use",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-plus",
-            redirectUrl: "placeHolderSign"
+            redirectUrl: "placeHolderSign",
+            action: "redirect",
+            selector: "reactourSecond",
+            message:
+              "Click the 'Use' button to create a new document from an existing template. "
           },
           {
-            btnLabel: "Edit",
-            btnColor: "#00c9d5",
-            textColor: "white",
-            btnIcon: "fa fa-plus",
-            redirectUrl: "template"
+            btnId: "1631",
+            btnLabel: "Quick send",
+            hoverLabel: "Quick send",
+            btnColor: "op-btn-secondary",
+            btnIcon: "fa-solid fa-envelope",
+            redirectUrl: "",
+            action: "bulksend",
+            selector: "tourbulksend",
+            message:
+              "To quickly create and send multiple documents using an existing template, click the 'Quick Send' button."
+          },
+          {
+            btnId: "2234",
+            hoverLabel: "option",
+            btnColor: "",
+            textColor: "black",
+            btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
+            action: "option",
+            selector: "reactourThird",
+            message:
+              "This menu reveals more options such as Edit & Delete. Use the 'Edit' button to add signer roles, modify fields, and update your template. Changes will apply to all future documents created from this template but won’t affect existing documents.Use the Delete button you can delete template. ",
+            subaction: [
+              {
+                btnId: "2434",
+                btnLabel: "Edit",
+                hoverLabel: "Edit",
+                btnIcon: "fa-solid fa-pen",
+                redirectUrl: "template",
+                action: "redirect"
+              },
+              {
+                btnId: "1834",
+                btnLabel: "Delete",
+                hoverLabel: "Delete",
+                btnIcon: "fa fa-trash",
+                redirectUrl: "",
+                action: "delete"
+              }
+            ]
           }
         ],
         helpMsg:

apps/OpenSign/src/json/dashboardJson.js

@@ -0,0 +1,90 @@
+const dashboardJson = [
+  {
+    id: "35KBoSgoAK",
+    columns: [
+      {
+        colsize: "col-span-12 md:col-span-6 lg:col-span-6",
+        widget: {
+          type: "Card",
+          icon: "fas fa-signature",
+          bgColor: "bg-[#f0058e]",
+          label: "Need your Signature",
+          description: null,
+          data: {
+            id: "e04ee9dc-932d-6b80-0202-703fd154eb74",
+            queryType: "",
+            class: "contracts_Document",
+            query:
+              'where={"$and":[{"AuditTrail.UserPtr":{"$ne":{"__type":"Pointer","className": "contracts_Users","objectId":"#objectId#"}}},{"AuditTrail.Activity":{"$ne":"Signed"}}],"Signers":{"$in":[{"__type":"Pointer","className":"contracts_Users","objectId":"#objectId#"}]},"IsDeclined":{"$ne":true},"IsCompleted":{"$ne":true},"Type":{"$ne":"Folder"},"Placeholders":{"$ne":null},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+            key: "count",
+            Redirect_type: "Report",
+            Redirect_id: "4Hhwbp482K",
+            tourSection: "tourcard1",
+            tourMessage:
+              "Clicking on this card will take you to the list of documents awaiting your review."
+          }
+        }
+      },
+      {
+        colsize: "col-span-12 md:col-span-6 lg:col-span-6",
+        widget: {
+          type: "Card",
+          icon: "fas fa-sign-out-alt",
+          bgColor: "bg-[#2ed8b6]",
+          label: "Out for signatures",
+          description: null,
+          data: {
+            id: "c1935cc0-28d4-3d73-b72a-8c1e3d18a17f",
+            queryType: "",
+            class: "contracts_Document",
+            query:
+              'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+            key: "count",
+            Redirect_type: "Report",
+            Redirect_id: "1MwEuxLEkF",
+            tourSection: "tourcard2",
+            tourMessage:
+              "Clicking on this card will take you to a list of documents awaiting signature."
+          }
+        }
+      },
+      {
+        colsize: "col-span-12 md:col-span-6 lg:col-span-6",
+        widget: {
+          type: "report",
+          reportId: "5Go51Q7T8r",
+          data: {
+            tourSection: "tourreport1",
+            tourMessage:
+              "This is a list of documents that are waiting for your signature."
+          }
+        }
+      },
+      {
+        colsize: "col-span-12 md:col-span-6 lg:col-span-6",
+        widget: {
+          type: "report",
+          reportId: "d9k3UfYHBc",
+          data: {
+            tourSection: "tourreport2",
+            tourMessage:
+              "This is a list of documents you've sent to other parties for signature."
+          }
+        }
+      },
+      {
+        colsize: "col-span-12 md:col-span-12 lg:col-span-12",
+        widget: {
+          type: "report",
+          reportId: "kC5mfynCi4",
+          data: {
+            tourSection: "tourreport3",
+            tourMessage:
+              "This are documents you have started but have not finalized for sending."
+          }
+        }
+      }
+    ]
+  }
+];
+export default dashboardJson;

apps/OpenSign/src/json/plansArr.js

@@ -0,0 +1,79 @@
+const plans = [
+  {
+    planName: "OPENSIGN™ FREE",
+    currency: "",
+    monthlyPrice: "Free",
+    yearlyPrice: "Free",
+    subtitle: "Free Unlimited E-signatures, Forever.",
+    btnText: "Subscribe",
+    url: "",
+    target: "_blank",
+    benefits: [
+      "Unlimited envelopes",
+      "Sign documents yourself",
+      "Request signatures from others",
+      "14 field types",
+      "Automatic e-signatures",
+      "Completion certificates",
+      "Send in order",
+      "Document templates",
+      "Import from Dropbox",
+      "Contact book",
+      "Document expiry support",
+      "Decline document support",
+      "Email notifications",
+      "Recipient authentication using OTP",
+      "And much more"
+    ]
+  },
+  {
+    planName: "OPENSIGN™ PROFESSIONAL",
+    currency: "$",
+    monthlyPrice: "29.99",
+    yearlyPrice: "329.99",
+    subtitle: "Exclusive Access to advanced features.",
+    btnText: "Subscribe",
+    url:
+      window.location.origin === "https://staging-app.opensignlabs.com"
+        ? "https://billing.zoho.in/subscribe/9627f62a09df1c8ce500f2f4dc8328dd84ecda20eeae13878ce581d60240f206/pro-weekly"
+        : "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d1a09dfa8085585cdd4ec4d7f32137f3/professional-monthly",
+    yearlyUrl:
+      window.location.origin === "https://staging-app.opensignlabs.com"
+        ? "https://billing.zoho.in/subscribe/9627f62a09df1c8ce500f2f4dc8328ddc184411129224f1f29ed84f6cef3b862/pro-yearly"
+        : "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d8ad1135190dff951330360e47585a71/professional-yearly",
+    target: "_self",
+    benefits: [
+      "Everything in OpenSign™ free",
+      "Field validations",
+      "Regular expression validations",
+      "Organize docs in OpenSign™ Drive",
+      "Webhooks",
+      "Zapier integration",
+      "API Access",
+      "100 API signatures included",
+      "DocumentId removal from signed docs",
+      "Custom email templates",
+      "Auto reminders"
+    ]
+  },
+  {
+    planName: "OPENSIGN™ ENTERPRISE",
+    currency: "",
+    monthlyPrice: "Request Price",
+    yearlyPrice: "Request Price",
+    subtitle: "Scalable Features with priority support.",
+    btnText: "Contact us",
+    url: "https://www.opensignlabs.com/contact-us",
+    target: "_blank",
+    benefits: [
+      "All features",
+      "Custom domain",
+      "Custom branding",
+      "Uptime SLA",
+      "SSO support",
+      "Priority support"
+    ]
+  }
+];
+
+export default plans;

apps/OpenSign/src/json/plansArr.json

@@ -1,70 +0,0 @@
-[
-  {
-    "planName": "OPENSIGN™ FREE",
-    "currency": "",
-    "monthlyPrice": "Free",
-    "yearlyPrice": "Free",
-    "subtitle": "Free Unlimited E-signatures, Forever.",
-    "btnText": "Subscribe",
-    "url": "",
-    "target": "_blank",
-    "benefits": [
-      "Unlimited envelopes",
-      "Sign documents yourself",
-      "Request signatures from others",
-      "14 field types",
-      "Automatic e-signatures",
-      "Completion certificates",
-      "Send in order",
-      "Document templates",
-      "Import from Dropbox",
-      "Contact book",
-      "Document expiry support",
-      "Decline document support",
-      "Email notifications",
-      "Recipient authentication using OTP",
-      "And much more"
-    ]
-  },
-  {
-    "planName": "OPENSIGN™ PROFESSIONAL",
-    "currency": "$",
-    "monthlyPrice": "29.99",
-    "yearlyPrice": "329.99",
-    "subtitle": "Exclusive Access to advanced features.",
-    "btnText": "Subscribe",
-    "url": "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d1a09dfa8085585cdd4ec4d7f32137f3/professional-monthly",
-    "yearlyUrl": "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d8ad1135190dff951330360e47585a71/professional-yearly",
-    "target": "_self",
-    "benefits": [
-      "Everything in OpenSign™ professional",
-      "Field validations",
-      "Regular expression validations",
-      "Organize docs in OpenSign™ Drive",
-      "Webhooks",
-      "Zapier integration",
-      "API Access",
-      "100 API signatures included",
-      "DocumentId removal from signed docs",
-      "Custom email templates(coming soon)"
-    ]
-  },
-  {
-    "planName": "OPENSIGN™ ENTERPRISE",
-    "currency": "",
-    "monthlyPrice": "Request Price",
-    "yearlyPrice": "Request Price",
-    "subtitle": "Scalable Features with priority support.",
-    "btnText": "Contact us",
-    "url": "https://www.opensignlabs.com/contact-us",
-    "target": "_blank",
-    "benefits": [
-      "All features",
-      "Custom domain",
-      "Custom branding",
-      "Uptime SLA",
-      "SSO support",
-      "Priority support"
-    ]
-  }
-]

apps/OpenSign/src/layout/HomeLayout.js

@@ -10,6 +10,9 @@ import Parse from "parse";
 import ModalUi from "../primitives/ModalUi";
 import { useNavigate, useLocation, Outlet } from "react-router-dom";
 import { isEnableSubscription } from "../constant/const";
+import { useCookies } from "react-cookie";
+import { fetchSubscription } from "../constant/Utils";
+import Loader from "../primitives/Loader";
 
 const HomeLayout = () => {
   const navigate = useNavigate();
@@ -24,42 +27,62 @@ const HomeLayout = () => {
   const [isTour, setIsTour] = useState(false);
   const [tourStatusArr, setTourStatusArr] = useState([]);
   const [tourConfigs, setTourConfigs] = useState([]);
+  const [, setCookie] = useCookies(["accesstoken", "main_Domain"]);
 
+  const tenantId = localStorage.getItem("TenantId");
   useEffect(() => {
-    (async () => {
-      try {
-        // Use the session token to validate the user
-        const userQuery = new Parse.Query(Parse.User);
-        const user = await userQuery.get(Parse.User.current().id, {
-          sessionToken: localStorage.getItem("accesstoken")
-        });
-        if (user) {
-          checkIsSubscribed();
-        } else {
+    if (!tenantId) {
+      setIsUserValid(false);
+    } else {
+      (async () => {
+        try {
+          // Use the session token to validate the user
+          const userQuery = new Parse.Query(Parse.User);
+          const user = await userQuery.get(Parse.User.current().id, {
+            sessionToken: localStorage.getItem("accesstoken")
+          });
+          if (user) {
+            localStorage.setItem("profileImg", user.get("ProfilePic") || "");
+            checkIsSubscribed();
+          } else {
+            setIsUserValid(false);
+          }
+        } catch (error) {
+          // Session token is invalid or there was an error
           setIsUserValid(false);
         }
-      } catch (error) {
-        // Session token is invalid or there was an error
-        setIsUserValid(false);
-      }
-    })();
+      })();
+      saveCookies();
+    }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [tenantId]);
+  //function to use save data in cookies storage
+  const saveCookies = () => {
+    const main_Domain = window.location.origin;
+    const domainName = window.location.hostname; //app.opensignlabs.com
+    // Find the index of the first dot in the string
+    const indexOfFirstDot = domainName.indexOf(".");
+    // Remove the first dot and get the substring starting from the next character
+    const updateDomain = domainName.substring(indexOfFirstDot); //.opensignlabs.com
+    setCookie("accesstoken", localStorage.getItem("accesstoken"), {
+      secure: true,
+      domain: updateDomain
+    });
+    setCookie("main_Domain", main_Domain, {
+      secure: true,
+      domain: updateDomain
+    });
+  };
 
   async function checkIsSubscribed() {
-    const currentUser = Parse.User.current();
-    const user = await Parse.Cloud.run("getUserDetails", {
-      email: currentUser.get("email")
-    });
     if (isEnableSubscription) {
-      const freeplan = user?.get("Plan") && user?.get("Plan").plan_code;
-      const billingDate =
-        user?.get("Next_billing_date") && user?.get("Next_billing_date");
-      if (freeplan === "freeplan") {
+      const res = await fetchSubscription();
+      if (res.plan === "freeplan") {
         setIsUserValid(true);
         setIsLoader(false);
-      } else if (billingDate) {
-        if (billingDate > new Date()) {
+      } else if (res.billingDate) {
+        if (new Date(res.billingDate) > new Date()) {
           setIsUserValid(true);
           setIsLoader(false);
         } else {
@@ -225,27 +248,14 @@ const HomeLayout = () => {
   };
   return (
     <div>
-      <div className="sticky top-0 z-50">
+      <div className="sticky top-0 z-[101]">
         {!isLoader && <Header showSidebar={showSidebar} />}
       </div>
       {isUserValid ? (
         <>
           {isLoader ? (
-            <div
-              style={{
-                height: "100vh",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-              }}
-            >
-              <div
-                style={{
-                  fontSize: "45px",
-                  color: "#3dd3e0"
-                }}
-                className="loader-37"
-              ></div>
+            <div className="flex h-[100vh] justify-center items-center">
+              <Loader />
             </div>
           ) : (
             <>
@@ -255,7 +265,7 @@ const HomeLayout = () => {
                   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="bg-base-200 p-3">{<Outlet />}</div>
                   <div className="z-30">
                     <Footer />
                   </div>
@@ -276,13 +286,10 @@ const HomeLayout = () => {
           )}
         </>
       ) : (
-        <ModalUi title={"Session Expired"} isOpen={true} showClose={false}>
+        <ModalUi showHeader={false} isOpen={true} showClose={false}>
           <div className="flex flex-col justify-center items-center py-4 md:py-5 gap-5">
-            <p className="text-xl font-normal">Your session has expired.</p>
-            <button
-              onClick={handleLoginBtn}
-              className="text-base px-3 py-1.5 rounded shadow-md text-white bg-[#1ab6ce]"
-            >
+            <p className="text-xl font-medium">Your session has expired.</p>
+            <button onClick={handleLoginBtn} className="op-btn op-btn-neutral">
               Login
             </button>
           </div>

apps/OpenSign/src/pages/ChangePassword.js

@@ -49,13 +49,13 @@ function ChangePassword() {
     return <Navigate to="/" />;
   }
   return (
-    <div className="w-full bg-white shadow rounded p-2">
+    <div className="w-full bg-base-100 text-base-content shadow rounded p-2">
       <Title title={"Change Password"} />
       <div className="text-xl font-bold border-b-[1px] border-gray-300">
         Change Password
       </div>
       <div className="m-2">
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} className=" flex flex-col gap-y-2">
           <div>
             <label htmlFor="currentpassword" className="block text-xs ml-1">
               Current Password
@@ -65,7 +65,7 @@ function ChangePassword() {
               name="currentpassword"
               value={currentpassword}
               onChange={(e) => setCurrentPassword(e.target.value)}
-              className="px-3 py-2 mb-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm text-xs w-full"
               placeholder="Current Password"
               required
             />
@@ -79,7 +79,7 @@ function ChangePassword() {
               name="newpassword"
               value={newpassword}
               onChange={(e) => setnewpassword(e.target.value)}
-              className="px-3 py-2 mb-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm text-xs w-full"
               placeholder="New Password"
               required
             />
@@ -91,17 +91,14 @@ function ChangePassword() {
             <input
               type="password"
               name="confirmpassword"
-              className="px-3 py-2 mb-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm text-xs w-full"
               value={confirmpassword}
               onChange={(e) => setconfirmpassword(e.target.value)}
               placeholder="Confirm Password"
               required
             />
           </div>
-          <button
-            type="submit"
-            className="bg-[#188ae2] m-2 px-4 py-3 rounded-sm shadow-md text-white text-xs font-semibold uppercase"
-          >
+          <button type="submit" className="op-btn op-btn-primary shadow-md m-2">
             Change Password
           </button>
         </form>

apps/OpenSign/src/pages/Dashboard.js

@@ -1,19 +1,19 @@
 import React, { useState, useEffect } from "react";
-import Parse from "parse";
 import "../styles/loader.css";
 import GetDashboard from "../components/dashboard/GetDashboard";
 import { useNavigate, useParams } from "react-router-dom";
 import Title from "../components/Title";
 import { useDispatch } from "react-redux";
 import { saveTourSteps } from "../redux/reducers/TourStepsReducer";
+import dashboardJson from "../json/dashboardJson";
+import Loader from "../primitives/Loader";
+
 const Dashboard = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { id } = useParams();
-  const [dashboard, setdashboard] = useState([]);
-  const [classnameArray, setclassnameArray] = useState([]);
-  const [loading, setloading] = useState(false);
-  const [defaultQuery, setDefaultQuery] = useState("");
+  const [dashboard, setdashboard] = useState({});
+  const [loading, setloading] = useState(true);
 
   useEffect(() => {
     if (localStorage.getItem("accesstoken")) {
@@ -23,59 +23,16 @@ const Dashboard = () => {
         getDashboard(localStorage.getItem("PageLanding"));
       }
     } else {
-      navigate("/", { replace: true, state: { from: location } });
+      navigate("/", { replace: true, state: { from: "" } });
     }
     // eslint-disable-next-line
   }, [id]);
 
   const getDashboard = async (id) => {
-    setloading(true);
     try {
-      var forms = Parse.Object.extend("w_dashboard");
-      var query = new Parse.Query(forms);
-      query.equalTo("objectId", id);
-      const results = await query.first();
-      const resultjson = results.toJSON();
-      let classArray = [];
-      let DefaultQuery = "";
-      resultjson.rows.forEach((x) => {
-        let col_lg = "",
-          col_md = "",
-          col_xs = "",
-          col_sm = "",
-          col_ = "",
-          obj = {};
-        let subItem = [];
-        let item = "";
-        x.columns.forEach((y) => {
-          if (y.widget.type === "customeHtml") {
-            DefaultQuery = y.widget.data[0].default;
-          }
-          if (Number(y["collg"]) > 0) {
-            col_lg = "col-lg-" + y["collg"];
-          }
-          if (Number(y["colmd"]) > 0) {
-            col_md = "col-md-" + y["colmd"];
-          }
-          if (Number(y["colxs"]) > 0) {
-            col_xs = "col-xs-" + y["colxs"];
-          }
-          if (Number(y["colsm"]) > 0) {
-            col_sm = "col-sm-" + y["colsm"];
-          }
-          if (Number(y["col"]) > 0) {
-            col_ = "col-" + y["col"];
-          }
-          item =
-            col_lg + " " + col_md + " " + col_xs + " " + col_sm + " " + col_;
-          subItem.push(item);
-        });
-        obj = subItem;
-        classArray.push(obj);
-      });
-      setdashboard(resultjson.rows);
-      // console.log("resultjson.rows ", resultjson.rows);
-      const arr = resultjson.rows[0].columns
+      const dashboard = dashboardJson.find((x) => x.id === id);
+      setdashboard(dashboard);
+      const dashboardTour = dashboard.columns
         .filter((col) => {
           if (col.widget.data && col.widget.data.tourSection) {
             return col;
@@ -89,14 +46,7 @@ const Dashboard = () => {
             // style: { backgroundColor: "#abd4d2" },
           };
         });
-      dispatch(saveTourSteps(arr));
-      // console.log("arr ", arr);
-      setclassnameArray(classArray);
-      if (localStorage.getItem("DashboardDefaultFilter")) {
-        setDefaultQuery(localStorage.getItem("DashboardDefaultFilter"));
-      } else {
-        setDefaultQuery(DefaultQuery);
-      }
+      dispatch(saveTourSteps(dashboardTour));
       setloading(false);
     } catch (e) {
       console.error("Problem", e);
@@ -104,32 +54,16 @@ const Dashboard = () => {
     }
   };
 
-  let _dash = (
-    <GetDashboard
-      dashboard={dashboard}
-      classnameArray={classnameArray}
-      DefaultQuery={defaultQuery}
-    />
-  );
-  if (loading) {
-    _dash = (
-      <div style={{ height: "300px", backgroundColor: "white" }}>
-        <div
-          style={{
-            marginLeft: "45%",
-            marginTop: "150px",
-            fontSize: "45px",
-            color: "#3dd3e0"
-          }}
-          className="loader-37"
-        ></div>
-      </div>
-    );
-  }
   return (
     <React.Fragment>
       <Title title="Dashboard" />
-      {_dash}
+      {loading ? (
+        <div className="h-[300px] w-full bg-white flex justify-center items-center rounded-md">
+          <Loader />
+        </div>
+      ) : (
+        <GetDashboard dashboard={dashboard} />
+      )}
     </React.Fragment>
   );
 };

apps/OpenSign/src/pages/ForgetPassword.js

@@ -1,21 +1,26 @@
 import React, { useEffect, useState } from "react";
 import Title from "../components/Title";
-import { NavLink } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import Parse from "parse";
 import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { useDispatch } from "react-redux";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
+import { isEnableSubscription } from "../constant/const";
+import { getAppLogo } from "../constant/Utils";
 
 function ForgotPassword() {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   const [state, setState] = useState({
     email: "",
     password: "",
     hideNav: ""
   });
   const [sentStatus, setSentStatus] = useState("");
+  const [image, setImage] = useState();
+
   const handleChange = (event) => {
     const { name, value } = event.target;
     setState({ ...state, [name]: value });
@@ -51,15 +56,26 @@ function ForgotPassword() {
 
   useEffect(() => {
     dispatch(fetchAppInfo());
+    saveLogo();
     resize();
     window.addEventListener("resize", resize);
     return () => window.removeEventListener("resize", resize);
     // eslint-disable-next-line
   }, []);
-
-  let image = appInfo.applogo;
+  const saveLogo = async () => {
+    if (isEnableSubscription) {
+      const logo = await getAppLogo();
+      if (logo) {
+        setImage(logo);
+      } else {
+        setImage(appInfo?.applogo || undefined);
+      }
+    } else {
+      setImage(appInfo?.applogo || undefined);
+    }
+  };
   return (
-    <div className="bg-white">
+    <div>
       <Title title="Forgot password page" />
       {sentStatus === "success" && (
         <Alert type="success">
@@ -69,29 +85,31 @@ function ForgotPassword() {
       {sentStatus === "failed" && (
         <Alert type={"danger"}>Please setup email adapter </Alert>
       )}
-      <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">
-            {state.hideNav ? (
-              <img src={image} width="100%" alt="" />
-            ) : (
-              <img src={image} width="100%" alt="" />
+      <div className="md:p-10 lg:p-16">
+        <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
+          <div className="w-[250px] h-[66px] inline-block overflow-hidden">
+            {image && (
+              <img
+                src={image}
+                className="object-contain h-full"
+                alt="applogo"
+              />
             )}
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
-            <div className="">
+            <div>
               <form onSubmit={handleSubmit}>
                 <h2 className="text-[30px] mt-6">Welcome Back !</h2>
                 <span className="text-[12px] text-[#878787]">
                   Reset Your Password
                 </span>
-                <div className="shadow-md rounded my-4">
+                <div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
                   <div className="px-6 py-4">
                     <label className="block text-xs">Email</label>
                     <input
-                      type="text"
-                      className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                      type="email"
                       name="email"
+                      className="op-input op-input-bordered op-input-sm w-full"
                       value={state.email}
                       onChange={handleChange}
                       required
@@ -99,19 +117,16 @@ function ForgotPassword() {
                     <hr className="my-2 border-none" />
                   </div>
                 </div>
-                <div className="flex justify-between items-center px-4">
-                  <button
-                    type="submit"
-                    className="rounded-sm bg-[#3ac9d6] text-white px-4 py-3 text-xs font-semibold shadow uppercase"
-                  >
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold">
+                  <button type="submit" className="op-btn op-btn-primary">
                     Submit
                   </button>
-                  <NavLink
-                    to="/"
-                    className="rounded-sm bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] px-4 py-3 text-xs font-semibold shadow uppercase"
+                  <button
+                    onClick={() => navigate("/", { replace: true })}
+                    className="op-btn op-btn-secondary"
                   >
                     Login
-                  </NavLink>
+                  </button>
                 </div>
               </form>
             </div>

apps/OpenSign/src/pages/Form.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { formJson } from "../json/FormJson";
 import AddUser from "../components/AddUser";
@@ -11,6 +11,15 @@ import SignersInput from "../components/shared/fields/SignersInput";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
 import { SaveFileSize } from "../constant/saveFileSize";
+import { checkIsSubscribed, getFileName, toDataUrl } from "../constant/Utils";
+import { PDFDocument } from "pdf-lib";
+import axios from "axios";
+import { isEnableSubscription } from "../constant/const";
+import ModalUi from "../primitives/ModalUi";
+import { Tooltip } from "react-tooltip";
+import Upgrade from "../primitives/Upgrade";
+import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
+import Loader from "../primitives/Loader";
 
 // `Form` render all type of Form on this basis of their provided in path
 function Form() {
@@ -30,6 +39,8 @@ function Form() {
 
 const Forms = (props) => {
   const maxFileSize = 20;
+  const abortController = new AbortController();
+  const inputFileRef = useRef(null);
   const navigate = useNavigate();
   const [signers, setSigners] = useState([]);
   const [folder, setFolder] = useState({ ObjectId: "", Name: "" });
@@ -38,37 +49,248 @@ const Forms = (props) => {
     Description: "",
     Note: "",
     TimeToCompleteDays: 15,
-    SendinOrder: "false"
+    SendinOrder: "false",
+    password: "",
+    file: "",
+    remindOnceInEvery: 5,
+    autoreminder: false
   });
-  const [fileupload, setFileUpload] = useState([]);
+  const [fileupload, setFileUpload] = useState("");
   const [fileload, setfileload] = useState(false);
   const [percentage, setpercentage] = useState(0);
   const [isReset, setIsReset] = useState(false);
   const [isAlert, setIsAlert] = useState(false);
   const [isSubmit, setIsSubmit] = useState(false);
   const [isErr, setIsErr] = useState("");
+  const [isPassword, setIsPassword] = useState(false);
+  const [isDecrypting, setIsDecrypting] = useState(false);
+  const [isCorrectPass, setIsCorrectPass] = useState(true);
+  const [isSubscribe, setIsSubscribe] = useState(false);
   const handleStrInput = (e) => {
+    setIsCorrectPass(true);
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
   useEffect(() => {
     handleReset();
+    return () => abortController.abort();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.title]);
-  const handleFileInput = (e) => {
+
+  useEffect(() => {
+    fetchSubscription();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const fetchSubscription = async () => {
+    if (isEnableSubscription) {
+      const getIsSubscribe = await checkIsSubscribed();
+      setIsSubscribe(getIsSubscribe);
+    }
+  };
+
+  function getFileAsArrayBuffer(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+
+      reader.onload = (e) => {
+        resolve(e.target.result);
+      };
+
+      reader.onerror = (e) => {
+        reject(e.target.error);
+      };
+
+      reader.readAsArrayBuffer(file);
+    });
+  }
+  const handleFileInput = async (e) => {
     setpercentage(0);
     try {
       let files = e.target.files;
+      setFormData((prev) => ({ ...prev, file: e.target.files[0] }));
       if (typeof files[0] !== "undefined") {
         const mb = Math.round(files[0].size / Math.pow(1024, 2));
         if (mb > maxFileSize) {
           alert(
             `The selected file size is too large. Please select a file less than ${maxFileSize} MB`
           );
-          setFileUpload([]);
+          setFileUpload("");
           e.target.value = "";
           return;
         } else {
-          handleFileUpload(files[0]);
+          if (files?.[0]?.type === "application/pdf") {
+            try {
+              const res = await getFileAsArrayBuffer(files[0]);
+              await PDFDocument.load(res);
+              handleFileUpload(files[0]);
+            } catch (err) {
+              if (err?.message?.includes("is encrypted")) {
+                try {
+                  await Parse.Cloud.run("encryptedpdf", {
+                    email: Parse.User.current().getEmail()
+                  });
+                } catch (err) {
+                  console.log("err in sending posthog encryptedpdf", err);
+                }
+                // console.log("err ", err);
+                try {
+                  setIsDecrypting(true);
+                  const fileName = files?.[0].name;
+                  const size = files?.[0].size;
+                  const name = sanitizeFileName(fileName);
+                  const url = "https://ai.nxglabs.in/decryptpdf"; //"https://ai.nxglabs.in/decryptpdf"; //
+                  let formData = new FormData();
+                  formData.append("file", files[0]);
+                  formData.append("password", "");
+                  const config = {
+                    headers: {
+                      "content-type": "multipart/form-data"
+                      // sessiontoken: Parse.User.current().getSessionToken()
+                    },
+                    responseType: "blob"
+                  };
+                  const response = await axios.post(url, formData, config);
+                  const pdfBlob = new Blob([response.data], {
+                    type: "application/pdf"
+                  });
+                  const pdfFile = new File([pdfBlob], name, {
+                    type: "application/pdf"
+                  });
+                  setIsDecrypting(false);
+                  setfileload(true);
+
+                  // Upload the file to Parse Server
+                  const parseFile = new Parse.File(
+                    name,
+                    pdfFile,
+                    "application/pdf"
+                  );
+
+                  await parseFile.save({
+                    progress: (progressValue, loaded, total, { type }) => {
+                      if (type === "upload" && progressValue !== null) {
+                        const percentCompleted = Math.round(
+                          (loaded * 100) / total
+                        );
+                        setpercentage(percentCompleted);
+                      }
+                    }
+                  });
+
+                  // Retrieve the URL of the uploaded file
+                  if (parseFile.url()) {
+                    setFileUpload(parseFile.url());
+                    setfileload(false);
+                    const tenantId = localStorage.getItem("TenantId");
+                    SaveFileSize(size, parseFile.url(), tenantId);
+                    return parseFile.url();
+                  }
+                } catch (err) {
+                  setfileload(false);
+                  setpercentage(0);
+                  if (err?.response?.status === 401) {
+                    setIsPassword(true);
+                  } else {
+                    console.log("Error uploading file: ", err?.response);
+                    setIsDecrypting(false);
+                    e.target.value = "";
+                  }
+                }
+              } else {
+                console.log("err ", err);
+                setFileUpload("");
+                e.target.value = "";
+              }
+            }
+          } else {
+            const isImage = files?.[0]?.type.includes("image/");
+            if (isImage) {
+              const image = await toDataUrl(files[0]);
+              const pdfDoc = await PDFDocument.create();
+              let embedImg;
+              if (files?.[0]?.type === "image/png") {
+                embedImg = await pdfDoc.embedPng(image);
+              } else {
+                embedImg = await pdfDoc.embedJpg(image);
+              }
+
+              // Get image dimensions
+              const imageWidth = embedImg.width;
+              const imageHeight = embedImg.height;
+              const page = pdfDoc.addPage([imageWidth, imageHeight]);
+              page.drawImage(embedImg, {
+                x: 0,
+                y: 0,
+                width: imageWidth,
+                height: imageHeight
+              });
+              const getFile = await pdfDoc.save({
+                useObjectStreams: false
+              });
+              setfileload(true);
+              const fileName = files[0].name;
+              const size = files[0].size;
+              const name = sanitizeFileName(fileName);
+              const pdfName = `${name?.split(".")[0]}.pdf`;
+              const parseFile = new Parse.File(
+                pdfName,
+                [...getFile],
+                "application/pdf"
+              );
+
+              try {
+                const response = await parseFile.save({
+                  progress: (progressValue, loaded, total, { type }) => {
+                    if (type === "upload" && progressValue !== null) {
+                      const percentCompleted = Math.round(
+                        (loaded * 100) / total
+                      );
+                      setpercentage(percentCompleted);
+                    }
+                  }
+                });
+                // The response object will contain information about the uploaded file
+                // You can access the URL of the uploaded file using response.url()
+                setFileUpload(response.url());
+                setfileload(false);
+                if (response.url()) {
+                  const tenantId = localStorage.getItem("TenantId");
+                  SaveFileSize(size, response.url(), tenantId);
+                  return response.url();
+                }
+              } catch (error) {
+                e.target.value = "";
+                setfileload(false);
+                setpercentage(0);
+                console.error("Error uploading file:", error);
+              }
+            } else {
+              if (isEnableSubscription) {
+                try {
+                  setfileload(true);
+                  const url = "https://ai.nxglabs.in/docxtopdf";
+                  let formData = new FormData();
+                  formData.append("file", files[0]);
+                  const config = {
+                    headers: {
+                      "content-type": "multipart/form-data",
+                      sessiontoken: Parse.User.current().getSessionToken()
+                    },
+                    signal: abortController.signal
+                  };
+                  const res = await axios.post(url, formData, config);
+                  if (res.data) {
+                    setFileUpload(res.data.url);
+                    setfileload(false);
+                  }
+                } catch (err) {
+                  e.target.value = "";
+                  setfileload(false);
+                  setpercentage(0);
+                  console.log("err in libreconverter ", err);
+                }
+              }
+            }
+          }
         }
       } else {
         alert("Please select file.");
@@ -161,64 +383,69 @@ const Forms = (props) => {
   const handleSubmit = async (e) => {
     e.preventDefault();
     e.stopPropagation();
-    setIsSubmit(true);
-    try {
-      const currentUser = Parse.User.current();
-      const object = new Parse.Object(props.Cls);
-      object.set("Name", formData?.Name);
-      object.set("Description", formData?.Description);
-      object.set("Note", formData?.Note);
-      if (props.title === "Request Signatures") {
-        object.set(
-          "TimeToCompleteDays",
-          parseInt(formData?.TimeToCompleteDays)
-        );
-      }
-      if (props.title !== "Sign Yourself") {
-        const isChecked = formData.SendinOrder === "false" ? false : true;
-        object.set("SendinOrder", isChecked);
-      }
-      object.set("URL", fileupload);
-      object.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
-      if (folder && folder.ObjectId) {
-        object.set("Folder", {
+    if (fileupload) {
+      setIsSubmit(true);
+      try {
+        const currentUser = Parse.User.current();
+        const object = new Parse.Object(props.Cls);
+        object.set("Name", formData?.Name);
+        object.set("Description", formData?.Description);
+        object.set("Note", formData?.Note);
+        if (props.title === "Request Signatures") {
+          object.set(
+            "TimeToCompleteDays",
+            parseInt(formData?.TimeToCompleteDays)
+          );
+        }
+        if (props.title !== "Sign Yourself") {
+          const isChecked = formData.SendinOrder === "false" ? false : true;
+          object.set("SendinOrder", isChecked);
+          object.set("AutomaticReminders", formData.autoreminder);
+          object.set("RemindOnceInEvery", parseInt(formData.remindOnceInEvery));
+        }
+        object.set("URL", fileupload);
+        object.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
+        if (folder && folder.ObjectId) {
+          object.set("Folder", {
+            __type: "Pointer",
+            className: props.Cls,
+            objectId: folder.ObjectId
+          });
+        }
+        if (signers && signers.length > 0) {
+          object.set("Signers", signers);
+        }
+        const ExtCls = JSON.parse(localStorage.getItem("Extand_Class"));
+        object.set("ExtUserPtr", {
           __type: "Pointer",
-          className: props.Cls,
-          objectId: folder.ObjectId
+          className: "contracts_Users",
+          objectId: ExtCls[0].objectId
         });
+        const res = await object.save();
+        if (res) {
+          setSigners([]);
+          setFolder({ ObjectId: "", Name: "" });
+          setFormData({
+            Name: "",
+            Description: "",
+            Note: ""
+          });
+          setFileUpload("");
+          setpercentage(0);
+          navigate(`/${props?.redirectRoute}/${res.id}`);
+        }
+      } catch (err) {
+        console.log("err ", err);
+        setIsErr(true);
+      } finally {
+        setIsAlert(true);
+        setTimeout(() => {
+          setIsAlert(false);
+        }, 1000);
+        setIsSubmit(false);
       }
-      if (signers && signers.length > 0) {
-        object.set("Signers", signers);
-      }
-      const ExtCls = JSON.parse(localStorage.getItem("Extand_Class"));
-      object.set("ExtUserPtr", {
-        __type: "Pointer",
-        className: "contracts_Users",
-        objectId: ExtCls[0].objectId
-      });
-
-      const res = await object.save();
-      if (res) {
-        setSigners([]);
-        setFolder({ ObjectId: "", Name: "" });
-        setFormData({
-          Name: "",
-          Description: "",
-          Note: ""
-        });
-        setFileUpload([]);
-        setpercentage(0);
-        navigate(`/${props?.redirectRoute}/${res.id}`);
-      }
-    } catch (err) {
-      console.log("err ", err);
-      setIsErr(true);
-    } finally {
-      setIsAlert(true);
-      setTimeout(() => {
-        setIsAlert(false);
-      }, 1000);
-      setIsSubmit(false);
+    } else {
+      alert("Please wait until the PDF has been uploading.");
     }
   };
 
@@ -248,14 +475,97 @@ const Forms = (props) => {
           ? "Note to myself"
           : "Please review and sign this document",
       TimeToCompleteDays: 15,
-      SendinOrder: "true"
+      SendinOrder: "true",
+      password: "",
+      file: "",
+      remindOnceInEvery: 5,
+      autoreminder: false
     });
-    setFileUpload([]);
+    setFileUpload("");
     setpercentage(0);
     setTimeout(() => setIsReset(false), 50);
   };
+  const handleCancel = () => {
+    navigate("/dashboard/35KBoSgoAK");
+  };
+  const handlePasswordSubmit = async (e) => {
+    e.preventDefault();
+    setIsPassword(false);
+    setfileload(true);
+    try {
+      const fileName = formData?.file?.name;
+      const size = formData?.file?.size;
+      const name = sanitizeFileName(fileName);
+      const url = "https://ai.nxglabs.in/decryptpdf"; //
+      let Data = new FormData();
+      Data.append("file", formData?.file);
+      Data.append("password", formData.password);
+      const config = {
+        headers: {
+          "content-type": "multipart/form-data"
+          // sessiontoken: Parse.User.current().getSessionToken()
+        },
+        responseType: "blob"
+      };
+      const response = await axios.post(url, Data, config);
+      const pdfBlob = new Blob([response.data], {
+        type: "application/pdf"
+      });
+      const pdfFile = new File([pdfBlob], name, {
+        type: "application/pdf"
+      });
+      setIsDecrypting(false);
+      // Upload the file to Parse Server
+      const parseFile = new Parse.File(name, pdfFile, "application/pdf");
+
+      await parseFile.save({
+        progress: (progressValue, loaded, total, { type }) => {
+          if (type === "upload" && progressValue !== null) {
+            const percentCompleted = Math.round((loaded * 100) / total);
+            setpercentage(percentCompleted);
+          }
+        }
+      });
+
+      // Retrieve the URL of the uploaded file
+      if (parseFile.url()) {
+        setFormData((prev) => ({ ...prev, password: "" }));
+        setFileUpload(parseFile.url());
+        setfileload(false);
+        const tenantId = localStorage.getItem("TenantId");
+        SaveFileSize(size, parseFile.url(), tenantId);
+        return parseFile.url();
+      }
+    } catch (err) {
+      setfileload(false);
+      setpercentage(0);
+      if (err?.response?.status === 401) {
+        setIsPassword(true);
+        setIsCorrectPass(false);
+      } else {
+        console.log("Error uploading file: ", err?.response);
+        setFormData((prev) => ({ ...prev, password: "" }));
+        setIsDecrypting(false);
+        if (inputFileRef.current) {
+          inputFileRef.current.value = ""; // Set file input value to empty string
+        }
+      }
+    }
+  };
+  const handeCloseModal = () => {
+    setIsPassword(false);
+    setFormData((prev) => ({ ...prev, file: "", password: "" }));
+    setIsDecrypting(false);
+    setfileload(false);
+    if (inputFileRef.current) {
+      inputFileRef.current.value = ""; // Set file input value to empty string
+    }
+  };
+  const handleAutoReminder = () => {
+    setFormData((prev) => ({ ...prev, autoreminder: !formData.autoreminder }));
+  };
   return (
-    <div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
+    <div className="shadow-md rounded my-2 p-3 bg-base-100 text-base-content md:border-[1px] md:border-gray-600/50">
       <Title title={props?.title} />
       {isAlert && (
         <Alert type={isErr ? "danger" : "success"}>
@@ -265,181 +575,338 @@ const Forms = (props) => {
         </Alert>
       )}
       {isSubmit ? (
-        <div style={{ height: "300px" }}>
-          <div
-            style={{
-              marginLeft: "45%",
-              marginTop: "150px",
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[300px] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
-        <form onSubmit={handleSubmit}>
-          <h1 className="text-[20px] font-semibold mb-4">{props?.title}</h1>
-          {fileload && (
-            <div className="flex items-center gap-x-2">
-              <div className="h-2 rounded-full w-[200px] md:w-[400px] bg-gray-200">
-                <div
-                  className="h-2 rounded-full bg-blue-500"
-                  style={{ width: `${percentage}%` }}
-                ></div>
-              </div>
-              <span className="text-black text-sm">{percentage}%</span>
-            </div>
-          )}
-          <div className="text-xs">
-            <label className="block">
-              File<span className="text-red-500 text-[13px]">*</span>
-            </label>
-            {fileupload.length > 0 ? (
-              <div className="flex gap-2 justify-center items-center">
-                <div className="flex justify-between items-center px-2 py-2 w-full font-bold rounded border-[1px] border-[#ccc] text-gray-500 bg-white text-[13px]">
-                  <div className="break-all">
-                    file selected :{" "}
-                    {fileupload?.split("/")?.pop()?.split("_")[1]}
-                  </div>
-                  <div
-                    onClick={() => {
-                      setFileUpload([]);
-                    }}
-                    className="cursor-pointer px-[10px] text-[20px] font-bold bg-white text-red-500"
-                  >
-                    <i className="fa-solid fa-xmark"></i>
-                  </div>
-                </div>
-                {process.env.REACT_APP_DROPBOX_API_KEY && (
-                  <DropboxChooser
-                    onSuccess={dropboxSuccess}
-                    onCancel={dropboxCancel}
-                  />
-                )}
-              </div>
-            ) : (
-              <div className="flex gap-2 justify-center items-center">
+        <>
+          <ModalUi
+            isOpen={isPassword}
+            handleClose={() => handeCloseModal()}
+            title={"Enter Pdf Password"}
+          >
+            <form onSubmit={handlePasswordSubmit}>
+              <div className="px-6 pt-3 pb-2">
+                <label className="mb-2 text-xs text-base-content">
+                  Password
+                </label>
                 <input
-                  type="file"
-                  className="bg-white px-2 py-1.5 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-                  onChange={(e) => handleFileInput(e)}
-                  accept="application/pdf"
+                  type="text"
+                  name="password"
+                  value={formData.password}
+                  onChange={(e) => handleStrInput(e)}
+                  className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
+                  placeholder="Enter pdf password"
                   required
                 />
-                {process.env.REACT_APP_DROPBOX_API_KEY && (
-                  <DropboxChooser
-                    onSuccess={dropboxSuccess}
-                    onCancel={dropboxCancel}
-                  />
-                )}
+                <p
+                  className={`${
+                    !isCorrectPass
+                      ? "text-red-600"
+                      : "text-transparent pointer-events-none"
+                  } ml-2 text-[11px] `}
+                >
+                  Please provide correct password
+                </p>
+              </div>
+              <div className="px-6 mb-3">
+                <button type="submit" className="op-btn op-btn-primary">
+                  Submit
+                </button>
+              </div>
+            </form>
+          </ModalUi>
+          <form onSubmit={handleSubmit}>
+            <h1 className="text-[20px] font-semibold mb-4">{props?.title}</h1>
+            {fileload && (
+              <div className="flex items-center gap-x-2">
+                <div className="h-2 rounded-full w-[200px] md:w-[400px] bg-gray-200">
+                  <div
+                    className="h-2 rounded-full bg-blue-500"
+                    style={{ width: `${percentage}%` }}
+                  ></div>
+                </div>
+                <span className="text-base-content text-sm">{percentage}%</span>
               </div>
             )}
-          </div>
-          <div className="text-xs mt-2">
-            <label className="block">
-              {props.title === "New Template"
-                ? "Template Title"
-                : "Document Title"}
-              <span className="text-red-500 text-[13px]">*</span>
-            </label>
-            <input
-              name="Name"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-              value={formData.Name}
-              onChange={(e) => handleStrInput(e)}
-              required
-            />
-          </div>
-          <div className="text-xs mt-2">
-            <label className="block">Description</label>
-            <input
-              name="Description"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-              value={formData.Description}
-              onChange={(e) => handleStrInput(e)}
-            />
-          </div>
-          {props.signers && (
-            <SignersInput onChange={handleSigners} isReset={isReset} required />
-          )}
-          <div className="text-xs mt-2">
-            <label className="block">
-              Note<span className="text-red-500 text-[13px]">*</span>
-            </label>
-            <input
-              name="Note"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-              value={formData.Note}
-              onChange={(e) => handleStrInput(e)}
-              required
-            />
-          </div>
-          <SelectFolder
-            onSuccess={handleFolder}
-            folderCls={props.Cls}
-            isReset={isReset}
-          />
-
-          {props.title === "Request Signatures" && (
+            {isDecrypting && (
+              <div className="flex items-center gap-x-2">
+                <span className="text-base-content text-sm">
+                  Decrypting pdf please wait...
+                </span>
+              </div>
+            )}
+            <div className="text-xs">
+              <label className="block">
+                {`File (pdf, png, jpg, jpeg${
+                  isEnableSubscription ? ", docx)" : ")"
+                }`}
+                <span className="text-red-500 text-[13px]">*</span>
+              </label>
+              {fileupload.length > 0 ? (
+                <div className="flex gap-2 justify-center items-center">
+                  <div className="flex justify-between items-center op-input op-input-bordered op-input-sm w-full text-x text-[13px]">
+                    <div className="break-all">
+                      file selected : {getFileName(fileupload)}
+                    </div>
+                    <div
+                      onClick={() => setFileUpload("")}
+                      className="cursor-pointer px-[10px] text-[20px] font-bold text-red-500"
+                    >
+                      <i className="fa-solid fa-xmark"></i>
+                    </div>
+                  </div>
+                  {process.env.REACT_APP_DROPBOX_API_KEY && (
+                    <DropboxChooser
+                      onSuccess={dropboxSuccess}
+                      onCancel={dropboxCancel}
+                    />
+                  )}
+                </div>
+              ) : (
+                <div className="flex gap-2 justify-center items-center ">
+                  <input
+                    type="file"
+                    className="op-file-input op-file-input-bordered op-file-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                    onChange={(e) => handleFileInput(e)}
+                    ref={inputFileRef}
+                    accept={
+                      isEnableSubscription
+                        ? "application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/png,image/jpeg"
+                        : "application/pdf,image/png,image/jpeg"
+                    }
+                    required
+                  />
+                  {process.env.REACT_APP_DROPBOX_API_KEY && (
+                    <DropboxChooser
+                      onSuccess={dropboxSuccess}
+                      onCancel={dropboxCancel}
+                    />
+                  )}
+                </div>
+              )}
+            </div>
             <div className="text-xs mt-2">
               <label className="block">
-                Time To Complete (Days)
+                {props.title === "New Template"
+                  ? "Template Title"
+                  : "Document Title"}
                 <span className="text-red-500 text-[13px]">*</span>
               </label>
               <input
-                type="number"
-                name="TimeToCompleteDays"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-                value={formData.TimeToCompleteDays}
+                name="Name"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                value={formData.Name}
                 onChange={(e) => handleStrInput(e)}
                 required
               />
             </div>
-          )}
-          {props.title !== "Sign Yourself" && (
             <div className="text-xs mt-2">
-              <label className="block">Send In Order</label>
-              <div className="flex items-center gap-2 ml-2 mb-1">
+              <label className="block">Description</label>
+              <input
+                name="Description"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                value={formData.Description}
+                onChange={(e) => handleStrInput(e)}
+              />
+            </div>
+            {props.signers && (
+              <SignersInput
+                onChange={handleSigners}
+                isReset={isReset}
+                required
+              />
+            )}
+            <div className="text-xs mt-2">
+              <label className="block">
+                Note<span className="text-red-500 text-[13px]">*</span>
+              </label>
+              <input
+                name="Note"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                value={formData.Note}
+                onChange={(e) => handleStrInput(e)}
+                required
+              />
+            </div>
+            {props.title !== "New Template" && (
+              <SelectFolder
+                onSuccess={handleFolder}
+                folderCls={props.Cls}
+                isReset={isReset}
+              />
+            )}
+            {props.title === "Request Signatures" && (
+              <div className="text-xs mt-2">
+                <label className="block">
+                  Time To Complete (Days)
+                  <span className="text-red-500 text-[13px]">*</span>
+                </label>
                 <input
-                  type="radio"
-                  value={"true"}
-                  name="SendinOrder"
-                  checked={formData.SendinOrder === "true"}
-                  className=""
-                  onChange={handleStrInput}
+                  type="number"
+                  name="TimeToCompleteDays"
+                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                  value={formData.TimeToCompleteDays}
+                  onChange={(e) => handleStrInput(e)}
+                  required
                 />
-                <div className="text-center">Yes</div>
               </div>
-              <div className="flex items-center gap-2 ml-2 mb-1">
-                <input
-                  type="radio"
-                  value={"false"}
-                  name="SendinOrder"
-                  checked={formData.SendinOrder === "false"}
-                  onChange={handleStrInput}
-                />
-                <div className="text-center">No</div>
+            )}
+            {props.title !== "Sign Yourself" && (
+              <>
+                <div className="text-xs mt-2">
+                  <label className="block">
+                    Send In Order
+                    <a data-tooltip-id="sendInOrder-tooltip" className="ml-1">
+                      <sup>
+                        <i
+                          className="fa-solid fa-question rounded-full"
+                          style={{
+                            borderColor: "#33bbff",
+                            color: "#33bbff",
+                            fontSize: 13,
+                            borderWidth: 1.5,
+                            padding: "1.5px 4px"
+                          }}
+                        ></i>
+                      </sup>
+                    </a>
+                    <Tooltip id="sendInOrder-tooltip" className="z-50">
+                      <div className="max-w-[200px] md:max-w-[450px]">
+                        <p className="font-bold">Send in Order</p>
+                        <p>
+                          Choose how you want the signing requests to be sent to
+                          the document signers:
+                        </p>
+                        <p className="p-[5px]">
+                          <ol className="list-disc">
+                            <li>
+                              <span className="font-bold">Yes:</span>
+                              <span>
+                                Selecting this option will send the signing
+                                request to the first signer initially. Once the
+                                first signer completes their part, the next
+                                signer in the sequence will receive the request.
+                                This process continues until all signers have
+                                signed the document. This method ensures that
+                                the document is signed in a specific order.
+                              </span>
+                            </li>
+                            <li>
+                              <span className="font-bold">No: </span>
+                              <span>
+                                Selecting this option will send the signing
+                                links to all signers simultaneously. Every
+                                signer can sign the document at their
+                                convenience, regardless of whether other signers
+                                have completed their signatures. This method is
+                                faster but does not enforce any signing order
+                                among the participants.
+                              </span>
+                            </li>
+                          </ol>
+                        </p>
+
+                        <p>
+                          Select the option that best suits the needs of your
+                          document processing.
+                        </p>
+                      </div>
+                    </Tooltip>
+                  </label>
+                  <div className="flex items-center gap-2 ml-2 mb-1">
+                    <input
+                      type="radio"
+                      value={"true"}
+                      className="op-radio op-radio-xs"
+                      name="SendinOrder"
+                      checked={formData.SendinOrder === "true"}
+                      onChange={handleStrInput}
+                    />
+                    <div className="text-center">Yes</div>
+                  </div>
+                  <div className="flex items-center gap-2 ml-2 mb-1">
+                    <input
+                      type="radio"
+                      value={"false"}
+                      name="SendinOrder"
+                      className="op-radio op-radio-xs"
+                      checked={formData.SendinOrder === "false"}
+                      onChange={handleStrInput}
+                    />
+                    <div className="text-center">No</div>
+                  </div>
+                </div>
+                <div className="text-xs mt-2">
+                  {!isEnableSubscription && (
+                    <PremiumAlertHeader
+                      message={
+                        "Disable Auto reminder is free in beta, this feature will incur a fee later."
+                      }
+                    />
+                  )}
+                  <span
+                    className={
+                      isSubscribe || !isEnableSubscription
+                        ? "font-semibold"
+                        : "font-semibold text-gray-300"
+                    }
+                  >
+                    Auto reminder{"  "}
+                    {!isSubscribe && isEnableSubscription && <Upgrade />}
+                  </span>
+                  <label
+                    className={`${
+                      isSubscribe || !isEnableSubscription
+                        ? "cursor-pointer "
+                        : "pointer-events-none opacity-50"
+                    } relative block items-center mb-0`}
+                  >
+                    <input
+                      type="checkbox"
+                      className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
+                      checked={formData.autoreminder}
+                      onChange={handleAutoReminder}
+                    />
+                  </label>
+                </div>
+                {formData?.autoreminder === true && (
+                  <div className="text-xs mt-2">
+                    <label className="block">
+                      Remind once in every (Days)
+                      <span className="text-red-500 text-[13px]">*</span>
+                    </label>
+                    <input
+                      type="number"
+                      value={formData.remindOnceInEvery}
+                      name="remindOnceInEvery"
+                      className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                      onChange={handleStrInput}
+                      required
+                    />
+                  </div>
+                )}
+              </>
+            )}
+            <div className="flex items-center mt-3 gap-2">
+              <button
+                className={`${
+                  isSubmit ? "cursor-progress" : ""
+                } op-btn op-btn-primary`}
+                type="submit"
+                disabled={isSubmit}
+              >
+                Next
+              </button>
+              <div
+                className="op-btn op-btn-ghost"
+                onClick={() => handleCancel()}
+              >
+                Cancel
               </div>
             </div>
-          )}
-          <div className="flex items-center mt-3 gap-2 text-white">
-            <button
-              className={`${
-                isSubmit && "cursor-progress"
-              } bg-[#1ab6ce] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 focus:outline-none`}
-              type="submit"
-              disabled={isSubmit}
-            >
-              Next
-            </button>
-            <div
-              className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
-              onClick={() => handleReset()}
-            >
-              Reset
-            </div>
-          </div>
-        </form>
+          </form>
+        </>
       )}
     </div>
   );

apps/OpenSign/src/pages/GenerateToken.js

@@ -4,10 +4,11 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import Alert from "../primitives/Alert";
 import ModalUi from "../primitives/ModalUi";
-import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
-import { checkIsSubscribed, openInNewTab } from "../constant/Utils";
+import { isEnableSubscription } from "../constant/const";
+import { checkIsSubscribed, copytoData, openInNewTab } from "../constant/Utils";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
+import Loader from "../primitives/Loader";
 
 function GenerateToken() {
   const navigation = useNavigate();
@@ -92,7 +93,7 @@ function GenerateToken() {
   };
 
   const copytoclipboard = (text) => {
-    navigator.clipboard.writeText(text);
+    copytoData(text);
     setCopied(true);
     setTimeout(() => {
       setCopied(false);
@@ -109,24 +110,11 @@ function GenerateToken() {
       {copied && <Alert type="success">Copied</Alert>}
       {isErr && <Alert type="danger">Something went wrong!</Alert>}
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="flex justify-center items-center h-screen">
+          <Loader />
         </div>
       ) : (
-        <div className="bg-white flex flex-col justify-center shadow rounded">
+        <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded">
           {!isEnableSubscription && <PremiumAlertHeader />}
           <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
             OpenSign™ API{" "}
@@ -144,29 +132,32 @@ function GenerateToken() {
                 : "w-full flex flex-col p-2 text-sm opacity-20 pointer-events-none select-none"
             }
           >
-            <li
-              className={`flex flex-col md:flex-row  justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
-            >
-              <div className="w-[70%] flex-col md:flex-row flex items-center gap-5 ">
+            <li className="flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2">
+              <div className="w-full md:w-[70%] flex-col md:flex-row text-xs md:text-[15px] flex items-center gap-x-5 ">
                 <span className="">Api Token:</span>{" "}
-                <span
-                  id="token"
-                  className=" md:text-end cursor-pointer"
-                  onClick={() => copytoclipboard(apiToken)}
-                >
-                  {apiToken ? apiToken : "_____"}
+                <span id="token" className="md:text-end py-2 md:py-0">
+                  <span
+                    className="cursor-pointer"
+                    onClick={() => copytoclipboard(apiToken)}
+                  >
+                    {apiToken ? apiToken : "_____"}
+                  </span>
+                  <button
+                    className="op-btn op-btn-accent op-btn-outline op-btn-sm ml-2"
+                    onClick={() => copytoclipboard(apiToken)}
+                  >
+                    <i className="fa-solid fa-copy"></i>
+                  </button>
                 </span>
               </div>
               <button
-                type="button"
                 onClick={apiToken ? handleModal : handleSubmit}
-                className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-4 py-2 text-xs md:text-base focus:outline-none"
+                className="op-btn op-btn-primary"
               >
                 {apiToken ? "Regenerate Token" : "Generate Token"}
               </button>
             </li>
           </ul>
-
           <div className="flex   items-center justify-center ">
             <button
               type="button"
@@ -175,7 +166,7 @@ function GenerateToken() {
                   "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
                 )
               }
-              className="rounded hover:bg-[#15b4e9] border-[1px] my-2 border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
+              className="op-btn op-btn-secondary my-2"
             >
               View Docs
             </button>
@@ -216,7 +207,7 @@ function GenerateToken() {
             handleClose={handleModal}
           >
             <div className="m-[20px]">
-              <div className="text-lg font-normal text-black">
+              <div className="text-lg font-normal text-base-content">
                 Are you sure you want to regenerate token it will expire old
                 token?
               </div>
@@ -224,11 +215,14 @@ function GenerateToken() {
               <div className="flex items-center mt-3 gap-2 text-white">
                 <button
                   onClick={handleSubmit}
-                  className={submitBtn + "ml-[2px]"}
+                  className="op-btn op-btn-primary ml-[2px]"
                 >
                   Yes
                 </button>
-                <button onClick={handleModal} className={rejectBtn}>
+                <button
+                  onClick={handleModal}
+                  className="op-btn op-btn-secondary"
+                >
                   No
                 </button>
               </div>

apps/OpenSign/src/pages/GuestLogin.js

@@ -1,81 +1,103 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import "../styles/loginPage.css";
-import loader from "../assets/images/loader2.gif";
 import axios from "axios";
-import { themeColor } from "../constant/const";
-import { contractUsers } from "../constant/Utils";
+import { isEnableSubscription } from "../constant/const";
+import { contractUsers, getAppLogo } from "../constant/Utils";
+import logo from "../assets/images/logo.png";
+import { appInfo } from "../constant/appinfo";
+import Parse from "parse";
+import Loader from "../primitives/Loader";
 
 function GuestLogin() {
-  const { id, userMail, contactBookId, serverUrl } = useParams();
-  let navigate = useNavigate();
+  const { id, userMail, contactBookId, base64url } = useParams();
+  const navigate = useNavigate();
   const [email, setEmail] = useState(userMail);
   const [OTP, setOTP] = useState("");
   const [EnterOTP, setEnterOtp] = useState(false);
   const [loading, setLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
-
+  const [appLogo, setAppLogo] = useState("");
+  const [documentId, setDocumentId] = useState(id);
+  const [contactId, setContactId] = useState(contactBookId);
+  const [sendmail, setSendmail] = useState();
+  const [contact, setContact] = useState({ name: "", phone: "", email: "" });
   useEffect(() => {
     handleServerUrl();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   //function generate serverUrl and parseAppId from url and save it in local storage
-  const handleServerUrl = () => {
-    //split url in array from '&'
-    localStorage.clear();
-    const checkSplit = serverUrl.split("&");
-    const server = checkSplit[0];
-    const parseId = checkSplit[1];
-    const appName = checkSplit[2];
+  const handleServerUrl = async () => {
+    if (isEnableSubscription) {
+      const applogo = await getAppLogo();
+      if (applogo) {
+        setAppLogo(applogo);
+      } else {
+        setAppLogo(logo);
+      }
+    } else {
+      setAppLogo(logo);
+    }
 
-    const newServer = server.replaceAll("%2F", "/");
+    localStorage.clear();
+    const parseId = appInfo.appId;
+    const newServer = `${appInfo.baseUrl}/`;
+    const appName = appInfo.appname;
     localStorage.setItem("baseUrl", newServer);
     localStorage.setItem("parseAppId", parseId);
     localStorage.setItem("_appName", appName);
+    //this condition is used decode base64 to string and get userEmail,documentId, contactBoookId data.
+    if (!id) {
+      //`atob` function is used to decode base64
+      const decodebase64 = atob(base64url);
+      //split url in array from '/'
+      const checkSplit = decodebase64.split("/");
+      setDocumentId(checkSplit[0]);
+      setContact((prev) => ({ ...prev, email: checkSplit[1] }));
+      setEmail(checkSplit[1]);
+      const contactId = checkSplit?.[2];
+      setSendmail(checkSplit[3]);
+      if (!contactId) {
+        const params = { email: checkSplit[1], docId: checkSplit[0] };
+        try {
+          const linkContactRes = await Parse.Cloud.run(
+            "linkcontacttodoc",
+            params
+          );
+          // console.log("linkContactRes ", linkContactRes);
+          setContactId(linkContactRes?.contactId);
+        } catch (err) {
+          console.log("Err in link ext contact", err);
+        }
+      } else {
+        setContactId(checkSplit[2]);
+      }
+    }
+
     setIsLoading(false);
   };
 
-  const handleChange = (event) => {
-    const { value } = event.target;
-    setOTP(value);
-  };
-
   //send email OTP function
-  const SendOtp = async (e) => {
-    const serverUrl =
-      localStorage.getItem("baseUrl") && localStorage.getItem("baseUrl");
-    const parseId =
-      localStorage.getItem("parseAppId") && localStorage.getItem("parseAppId");
-    if (serverUrl && localStorage) {
-      setLoading(true);
-      e.preventDefault();
-      setEmail(email);
-
-      try {
-        let url = `${serverUrl}functions/SendOTPMailV1/`;
-        const headers = {
-          "Content-Type": "application/json",
-          "X-Parse-Application-Id": parseId
-        };
-        let body = {
-          email: email.toString(),
-          docId: id
-        };
-        let Otp = await axios.post(url, body, { headers: headers });
-
-        if (Otp) {
-          setLoading(false);
-          setEnterOtp(true);
-        }
-      } catch (error) {
-        alert("something went wrong!");
+  const SendOtp = async () => {
+    setLoading(true);
+    setEmail(email);
+    try {
+      const params = { email: email.toString(), docId: documentId };
+      const Otp = await Parse.Cloud.run("SendOTPMailV1", params);
+      if (Otp) {
+        setLoading(false);
+        setEnterOtp(true);
       }
-    } else {
+    } catch (error) {
       alert("something went wrong!");
     }
   };
 
+  const handleSendOTPBtn = async (e) => {
+    e.preventDefault();
+    await SendOtp();
+  };
+
   //verify OTP send on via email
   const VerifyOTP = async (e) => {
     e.preventDefault();
@@ -111,7 +133,8 @@ function GuestLogin() {
             `Parse/${parseId}/currentUser`,
             JSON.stringify(_user)
           );
-          if (contractUserDetails) {
+          // console.log("contractUserDetails ", contractUserDetails);
+          if (contractUserDetails && contractUserDetails.length > 0) {
             localStorage.setItem(
               "Extand_Class",
               JSON.stringify(contractUserDetails)
@@ -123,7 +146,13 @@ function GuestLogin() {
           //save isGuestSigner true in local to handle login flow header in mobile view
           localStorage.setItem("isGuestSigner", true);
           setLoading(false);
-          navigate(`/load/recipientSignPdf/${id}/${contactBookId}`);
+          if (sendmail === "false") {
+            navigate(
+              `/load/recipientSignPdf/${documentId}/${contactId}?sendmail=${sendmail}`
+            );
+          } else {
+            navigate(`/load/recipientSignPdf/${documentId}/${contactId}`);
+          }
         }
       } catch (error) {
         console.log("err ", error);
@@ -132,154 +161,169 @@ function GuestLogin() {
       alert("Please Enter OTP!");
     }
   };
-
+  const handleUserData = async (e) => {
+    e.preventDefault();
+    const params = { ...contact, docId: documentId };
+    try {
+      setLoading(true);
+      const linkContactRes = await Parse.Cloud.run("linkcontacttodoc", params);
+      // console.log("linkContactRes ", linkContactRes);
+      setContactId(linkContactRes.contactId);
+      setEnterOtp(true);
+      await SendOtp();
+    } catch (err) {
+      setLoading(false);
+      alert("something went wron, please try agian later.");
+      console.log("Err in link ext contact", err);
+    }
+  };
+  const handleInputChange = (e) => {
+    setContact((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
   return (
-    <div style={{ padding: "2rem", background: "white" }}>
+    <div className="p-[2rem]">
       {isLoading ? (
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            height: "100vh",
-            flexDirection: "column"
-          }}
-        >
-          <img
-            alt="no img"
-            src={loader}
-            style={{ width: "80px", height: "80px" }}
-          />
-          <span style={{ fontSize: "13px", color: "gray" }}>
-            {isLoading.message}
-          </span>
+        <div className="flex flex-col justify-center items-center h-[100vh]">
+          <Loader />
+          <span className="text-[13px] text-[gray]">{isLoading.message}</span>
         </div>
       ) : (
-        <div
-          style={{
-            margin: "10px",
-            border: "0.5px solid #c5c7c9",
-            padding: "30px",
-            boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"
-          }}
-        >
-          <div className="main_head">
-            <div className="main-logo">
-              <img
-                alt="sign img"
-                src="https://qikinnovation.ams3.digitaloceanspaces.com/logo.png"
-                width="100%"
-              />
-            </div>
+        <div className="m-1 md:m-2 p-[30px] text-base-content bg-base-100 op-card shadow-md">
+          <div className="md:w-[250px] md:h-[66px] inline-block overflow-hidden mt-2 mb-11">
+            {appLogo && (
+              <img src={appLogo} className="object-contain h-full" alt="logo" />
+            )}
           </div>
-
-          {!EnterOTP ? (
-            <div className="row">
-              <div className="col-sm-6 KLO">
-                <span className="welcomeText">Welcome Back !</span>
-                <br />
-                <span className="KNLO">
-                  Verification code is sent to your email
-                </span>
-                <div className="card card-box" style={{ borderRadius: "0px" }}>
-                  <div className="card-body">
+          {contactId ? (
+            <>
+              {!EnterOTP ? (
+                <div className="w-full md:w-[50%] text-base-content">
+                  <h1 className="text-2xl md:text-[30px]">Welcome Back!</h1>
+                  <legend className="text-[12px] text-[#878787] mt-2">
+                    Verification code is sent to your email
+                  </legend>
+                  <div className="p-[20px] outline outline-1 outline-slate-300/50 my-2 op-card shadow-md">
                     <input
                       type="email"
                       name="mobile"
                       value={email}
+                      className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       disabled
-                      className="loginInput"
                     />
-                    <br />
+                  </div>
+                  <div className="mt-2">
+                    <button
+                      className="op-btn op-btn-primary"
+                      onClick={(e) => handleSendOTPBtn(e)}
+                      disabled={loading}
+                    >
+                      {loading ? "Loading..." : "Send OTP"}
+                    </button>
                   </div>
                 </div>
-                <div className="btnContainer">
-                  {loading ? (
-                    <button
-                      type="button"
-                      style={{
-                        background: themeColor,
-                        color: "white"
-                      }}
-                      className="verifyBtn"
-                      disabled
-                    >
-                      <span
-                        className="spinner-border spinner-border-sm "
-                        role="status"
-                        aria-hidden="true"
-                      ></span>
-                      Loading...
-                    </button>
-                  ) : (
-                    <button
-                      className="verifyBtn"
-                      style={{
-                        background: themeColor,
-                        color: "white",
-                        marginLeft: "0px !important"
-                      }}
-                      onClick={(e) => SendOtp(e)}
-                    >
-                      Send OTP
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="row">
-              <div className="col-sm-6 KLO">
-                <span className="welcomeText">Welcome Back !</span>
-                <br />
-                <span className="KNLO">You will get a OTP via Email</span>
-                <div className="card card-box">
-                  <div className="card-body">
-                    <label>Enter Verification Code</label>
+              ) : (
+                <form
+                  className="w-full md:w-[50%] text-base-content"
+                  onSubmit={VerifyOTP}
+                >
+                  <h1 className="text-2xl md:text-[30px]">Welcome Back!</h1>
+                  <legend className="text-[12px] text-[#878787] mt-2">
+                    You will get a OTP via Email
+                  </legend>
+                  <div className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 op-card my-2 shadow-md">
+                    <p className="text-sm">Enter Verification Code</p>
                     <input
                       type="number"
-                      className="loginInput"
+                      className="mt-2 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       name="OTP"
                       value={OTP}
-                      onChange={handleChange}
+                      onChange={(e) => setOTP(e.target.value)}
                     />
-
-                    <br />
                   </div>
-                </div>
-                <div>
-                  {loading ? (
+                  <div className="mt-2">
                     <button
-                      style={{
-                        background: themeColor,
-                        color: "white"
-                      }}
-                      className="verifyBtn"
-                      type="button"
-                      disabled
+                      className="op-btn op-btn-primary"
+                      type="submit"
+                      disabled={loading}
                     >
-                      <span
-                        className="spinner-border spinner-border-sm "
-                        role="status"
-                        aria-hidden="true"
-                      ></span>
-                      Loading...
+                      {loading ? "Loading..." : "Verify"}
                     </button>
-                  ) : (
-                    <button
-                      type="button"
-                      onClick={(e) => VerifyOTP(e)}
-                      style={{
-                        background: themeColor,
-                        color: "white"
-                      }}
-                      className="verifyBtn"
-                    >
-                      Verify
-                    </button>
-                  )}
+                  </div>
+                </form>
+              )}
+            </>
+          ) : (
+            <div className="w-full md:w-[50%] text-base-content">
+              <h1 className="text-2xl md:text-[30px]">Welcome</h1>
+              <legend className="text-[12px] text-[#878787] mt-2">
+                Provide your details
+              </legend>
+              <form
+                className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 my-2 op-card shadow-md"
+                onSubmit={handleUserData}
+              >
+                <div className="mb-2">
+                  <label
+                    htmlFor="name"
+                    className="block text-xs text-gray-700 font-semibold"
+                  >
+                    Name
+                    <span className="text-[red] text-[13px]"> *</span>
+                  </label>
+                  <input
+                    type="text"
+                    name="name"
+                    value={contact.name}
+                    onChange={handleInputChange}
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                    disabled={loading}
+                    required
+                  />
                 </div>
-              </div>
+                <div className="mb-2">
+                  <label
+                    htmlFor="email"
+                    className="block text-xs text-gray-700 font-semibold"
+                  >
+                    Email
+                    <span className="text-[red] text-[13px]"> *</span>
+                  </label>
+                  <input
+                    type="email"
+                    name="email"
+                    value={contact.email}
+                    onChange={handleInputChange}
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                    required
+                    disabled
+                  />
+                </div>
+                <div className="mb-2">
+                  <label
+                    htmlFor="phone"
+                    className="block text-xs text-gray-700 font-semibold"
+                  >
+                    Phone
+                  </label>
+                  <input
+                    type="text"
+                    name="phone"
+                    value={contact.phone}
+                    onChange={handleInputChange}
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                    disabled={loading}
+                  />
+                </div>
+                <div className="mt-2 flex justify-start">
+                  <button
+                    type="submit"
+                    className="op-btn op-btn-primary"
+                    disabled={loading}
+                  >
+                    {loading ? "Loading..." : "Next"}
+                  </button>
+                </div>
+              </form>
             </div>
           )}
         </div>

apps/OpenSign/src/pages/Login.js

@@ -10,15 +10,13 @@ import { NavLink, useNavigate, useLocation } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
 import ModalUi from "../primitives/ModalUi";
-import {
-  isEnableSubscription,
-  modalCancelBtnColor,
-  modalSubmitBtnColor
-} from "../constant/const";
+import { isEnableSubscription } from "../constant/const";
 import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
 import { showTenant } from "../redux/reducers/ShowTenant";
+import { fetchSubscription, getAppLogo, openInNewTab } from "../constant/Utils";
+import Loader from "../primitives/Loader";
 function Login() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -43,7 +41,8 @@ function Login() {
     Destination: ""
   });
   const [isModal, setIsModal] = useState(false);
-  const image = appInfo?.applogo || undefined;
+  const [image, setImage] = useState();
+  const [isLoginSSO, setIsLoginSSO] = useState(false);
 
   useEffect(() => {
     if (localStorage.getItem("accesstoken")) {
@@ -51,8 +50,23 @@ function Login() {
       GetLoginData();
     }
     dispatch(fetchAppInfo());
+    saveLogo();
+
     // eslint-disable-next-line
   }, []);
+
+  const saveLogo = async () => {
+    if (isEnableSubscription) {
+      const logo = await getAppLogo();
+      if (logo) {
+        setImage(logo);
+      } else {
+        setImage(appInfo?.applogo || undefined);
+      }
+    } else {
+      setImage(appInfo?.applogo || undefined);
+    }
+  };
   const handleChange = (event) => {
     const { name, value } = event.target;
     setState({ ...state, [name]: value });
@@ -153,7 +167,7 @@ function Login() {
                               await Parse.Cloud.run("getUserDetails", {
                                 email: currentUser.get("email")
                               }).then(
-                                (result) => {
+                                async (result) => {
                                   let tenentInfo = [];
                                   const results = [result];
                                   if (results) {
@@ -247,23 +261,22 @@ function Login() {
                                         const LocalUserDetails = {
                                           name: results[0].get("Name"),
                                           email: results[0].get("Email"),
-                                          phone: results[0].get("Phone"),
+                                          phone: results[0]?.get("Phone") || "",
                                           company: results[0].get("Company")
                                         };
                                         localStorage.setItem(
                                           "userDetails",
                                           JSON.stringify(LocalUserDetails)
                                         );
-                                        const freeplan =
-                                          results[0].get("Plan") &&
-                                          results[0].get("Plan").plan_code;
-                                        const billingDate =
-                                          results[0].get("Next_billing_date") &&
-                                          results[0].get("Next_billing_date");
+                                        const res = await fetchSubscription();
+                                        const freeplan = res.plan;
+                                        const billingDate = res.billingDate;
                                         if (freeplan === "freeplan") {
                                           navigate(redirectUrl);
                                         } else if (billingDate) {
-                                          if (billingDate > new Date()) {
+                                          if (
+                                            new Date(billingDate) > new Date()
+                                          ) {
                                             localStorage.removeItem(
                                               "userDetails"
                                             );
@@ -302,7 +315,7 @@ function Login() {
                                       const LocalUserDetails = {
                                         name: _user.name,
                                         email: email,
-                                        phone: _user.phone
+                                        phone: _user?.phone || ""
                                         // company: results.get("Company"),
                                       };
                                       localStorage.setItem(
@@ -407,7 +420,7 @@ function Login() {
       alert("Somenthing went wrong, please try again later!");
     }
   };
-  const thirdpartyLoginfn = async (sessionToken, billingDate) => {
+  const thirdpartyLoginfn = async (sessionToken) => {
     const baseUrl = localStorage.getItem("baseUrl");
     const parseAppId = localStorage.getItem("parseAppId");
     const res = await axios.get(baseUrl + "users/me", {
@@ -506,7 +519,7 @@ function Login() {
                       await Parse.Cloud.run("getUserDetails", {
                         email: currentUser.get("email")
                       }).then(
-                        (result) => {
+                        async (result) => {
                           let tenentInfo = [];
                           const results = [result];
                           if (results) {
@@ -556,7 +569,7 @@ function Login() {
                               setState({ ...state, loading: false });
                               navigate("/");
                             } else {
-                              extendedInfo.forEach((x) => {
+                              extendedInfo.forEach(async (x) => {
                                 if (x.TenantId) {
                                   let obj = {
                                     tenentId: x.TenantId.objectId,
@@ -593,8 +606,13 @@ function Login() {
                               setThirdpartyLoader(false);
                               setState({ ...state, loading: false });
                               if (isEnableSubscription) {
-                                if (billingDate) {
-                                  if (billingDate > new Date()) {
+                                const res = await fetchSubscription();
+                                const freeplan = res.plan;
+                                const billingDate = res.billingDate;
+                                if (freeplan === "freeplan") {
+                                  navigate(redirectUrl);
+                                } else if (billingDate) {
+                                  if (new Date(billingDate) > new Date()) {
                                     localStorage.removeItem("userDetails");
                                     navigate(redirectUrl);
                                   } else {
@@ -629,8 +647,13 @@ function Login() {
                             setState({ ...state, loading: false });
                             setThirdpartyLoader(false);
                             if (isEnableSubscription) {
-                              if (billingDate) {
-                                if (billingDate > new Date()) {
+                              const res = await fetchSubscription();
+                              const freeplan = res.plan;
+                              const billingDate = res.billingDate;
+                              if (freeplan === "freeplan") {
+                                navigate(redirectUrl);
+                              } else if (billingDate) {
+                                if (new Date(billingDate) > new Date()) {
                                   localStorage.removeItem("userDetails");
                                   // Redirect to the appropriate URL after successful login
                                   navigate(redirectUrl);
@@ -798,7 +821,7 @@ function Login() {
                     await Parse.Cloud.run("getUserDetails", {
                       email: currentUser.get("email")
                     }).then(
-                      (result) => {
+                      async (result) => {
                         let tenentInfo = [];
                         const results = [result];
                         if (results) {
@@ -843,24 +866,20 @@ function Login() {
                               const LocalUserDetails = {
                                 name: results[0].get("Name"),
                                 email: results[0].get("Email"),
-                                phone: results[0].get("Phone"),
+                                phone: results[0]?.get("Phone") || "",
                                 company: results[0].get("Company")
                               };
                               localStorage.setItem(
                                 "userDetails",
                                 JSON.stringify(LocalUserDetails)
                               );
-                              const billingDate =
-                                results[0].get("Next_billing_date") &&
-                                results[0].get("Next_billing_date");
-                              const freeplan =
-                                results[0]?.get("Plan") &&
-                                results[0]?.get("Plan").plan_code;
-
+                              const res = await fetchSubscription();
+                              const billingDate = res.billingDate;
+                              const freeplan = res.plan;
                               if (freeplan === "freeplan") {
                                 navigate(redirectUrl);
                               } else if (billingDate) {
-                                if (billingDate > new Date()) {
+                                if (new Date(billingDate) > new Date()) {
                                   localStorage.removeItem("userDetails");
                                   // Redirect to the appropriate URL after successful login
                                   navigate(redirectUrl);
@@ -884,7 +903,7 @@ function Login() {
                             const LocalUserDetails = {
                               name: results[0].get("Name"),
                               email: results[0].get("Email"),
-                              phone: results[0].get("Phone")
+                              phone: results[0]?.get("Phone") || ""
                               // company: results.get("Company"),
                             };
                             localStorage.setItem(
@@ -961,7 +980,7 @@ function Login() {
           userDetails: {
             name: userInformation.name,
             email: userInformation.email,
-            phone: userInformation.phone,
+            phone: userInformation?.phone || "",
             role: "contracts_User",
             company: userDetails.Company,
             jobTitle: userDetails.Destination
@@ -973,7 +992,7 @@ function Login() {
           const LocalUserDetails = {
             name: userInformation.name,
             email: userInformation.email,
-            phone: userInformation.phone,
+            phone: userInformation?.phone || "",
             company: userDetails.Company,
             jobTitle: userDetails.JobTitle
           };
@@ -995,8 +1014,9 @@ function Login() {
 
   const handleCloseModal = () => {
     setIsModal(false);
-    Parse.User.logOut();
-
+    if (Parse?.User?.current()) {
+      Parse.User.logOut();
+    }
     let appdata = localStorage.getItem("userSettings");
     let applogo = localStorage.getItem("appLogo");
     let appName = localStorage.getItem("appName");
@@ -1019,212 +1039,172 @@ function Login() {
     localStorage.setItem("baseUrl", baseUrl);
     localStorage.setItem("parseAppId", appid);
   };
+
+  // `handleSignInWithSSO` is trigger when user click sign in with sso and open sso authorize endpoint
+  const handleSignInWithSSO = () => {
+    if (isLoginSSO === false) {
+      if (state?.email) {
+        setIsLoginSSO(true);
+        const encodedEmail = encodeURIComponent(state.email);
+        const clientUrl = window.location.origin;
+        const domain = state.email.split("@")?.pop();
+        const ssoApiUrl =
+          process.env.SSO_API_URL || "https://sso.opensignlabs.com/api";
+        openInNewTab(
+          `${ssoApiUrl}/oauth/authorize?response_type=code&provider=saml&tenant=${domain}&product=OpenSign&redirect_uri=${clientUrl}/sso&state=${encodedEmail}`,
+          "_self"
+        );
+      } else {
+        alert("Please provide email.");
+      }
+    }
+  };
   return (
-    <div className="bg-white">
+    <div>
       <Title title={"Login Page"} />
       {state.loading && (
         <div
           aria-live="assertive"
-          style={{
-            position: "fixed",
-            width: "100vw",
-            height: "100vh",
-            backgroundColor: "rgba(0,0,0,0.2)",
-            top: 0,
-            left: 0,
-            zIndex: 2
-          }}
+          className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-50"
         >
-          <div
-            role="status"
-            style={{
-              position: "fixed",
-              fontSize: "50px",
-              color: "#3ac9d6",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)"
-            }}
-            className="loader-37"
-          >
-            <span className="sr-only">Loading...</span>
-          </div>
+          <Loader />
         </div>
       )}
       {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 ">
-              <div className="w-[250px] h-[66px] inline-block">
-                <img
-                  src={image}
-                  width="100%"
-                  alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly."
-                />
+          <div
+            aria-labelledby="loginHeading"
+            role="region"
+            className="md:p-10 lg:p-16"
+          >
+            <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
+              <div className="w-[250px] h-[66px] inline-block overflow-hidden">
+                {image && (
+                  <img
+                    src={image}
+                    className="object-contain h-full"
+                    alt="applogo"
+                  />
+                )}
               </div>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
                 <div>
-                  <div>
-                    <form onSubmit={handleSubmit} aria-label="Login Form">
-                      <h1 className="text-[30px] mt-6">Welcome Back!</h1>
-                      <fieldset>
-                        <legend className="text-[12px] text-[#878787]">
-                          Login to your account
-                        </legend>
-                        <div className="px-6 py-4 outline outline-1 outline-slate-300/50 my-2 rounded shadow-md">
-                          <label className="block text-xs" htmlFor="email">
-                            Username
-                          </label>
-                          <input
-                            id="email"
-                            type="text"
-                            className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
-                            name="email"
-                            value={state.email}
-                            onChange={handleChange}
-                            required
-                          />
-                          <hr className="my-2 border-none" />
-                          <label className="block text-xs" htmlFor="password">
-                            Password
-                          </label>
-                          <div className="relative">
-                            <input
-                              id="password"
-                              type={state.passwordVisible ? "text" : "password"}
-                              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
-                              name="password"
-                              value={state.password}
-                              onChange={handleChange}
-                              required
-                            />
-                            <span
-                              className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${
-                                state.passwordVisible
-                                  ? "text-[#007bff]"
-                                  : "text-black"
-                              }`}
-                              onClick={togglePasswordVisibility}
-                            >
-                              {state.passwordVisible ? (
-                                <i className="fa fa-eye-slash text-xs pb-1" /> // Close eye icon
-                              ) : (
-                                <i className="fa fa-eye text-xs pb-1 " /> // Open eye icon
-                              )}
-                            </span>
-                          </div>
-                        </div>
-                      </fieldset>
-                      <div className="flex flex-row justify-between items-center ml-4 py-2">
-                        <div>
-                          <label
-                            className="form-check-label inline-block cursor-pointer"
-                            htmlFor="rememberpassword"
-                          >
-                            <input
-                              type="checkbox"
-                              className="form-check-input mr-1"
-                              value=""
-                              id="rememberpassword"
-                            />
-                            <span className="text-[13px]">
-                              Remember Password
-                            </span>
-                          </label>
-                        </div>
-                        <div>
+                  <form onSubmit={handleSubmit} aria-label="Login Form">
+                    <h1 className="text-[30px] mt-6">Welcome Back!</h1>
+                    <fieldset>
+                      <legend className="text-[12px] text-[#878787]">
+                        Login to your account
+                      </legend>
+                      <div className="w-full px-6 py-3 my-1 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
+                        <label className="block text-xs" htmlFor="email">
+                          Email
+                        </label>
+                        <input
+                          id="email"
+                          type="email"
+                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                          name="email"
+                          value={state.email}
+                          onChange={handleChange}
+                          required
+                        />
+                        <hr className="my-1 border-none" />
+                        {!isLoginSSO && (
+                          <>
+                            <label className="block text-xs" htmlFor="password">
+                              Password
+                            </label>
+                            <div className="relative">
+                              <input
+                                id="password"
+                                type={
+                                  state.passwordVisible ? "text" : "password"
+                                }
+                                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                                name="password"
+                                value={state.password}
+                                onChange={handleChange}
+                                required
+                              />
+                              <span
+                                className="absolute cursor-pointer top-[50%] right-[10px] -translate-y-[50%] text-base-content"
+                                onClick={togglePasswordVisibility}
+                              >
+                                {state.passwordVisible ? (
+                                  <i className="fa fa-eye-slash text-xs pb-1" /> // Close eye icon
+                                ) : (
+                                  <i className="fa fa-eye text-xs pb-1 " /> // Open eye icon
+                                )}
+                              </span>
+                            </div>
+                          </>
+                        )}
+                        <div className="relative mt-1">
                           <NavLink
                             to="/forgetpassword"
-                            className="text-[13px] underline focus:outline-none focus:ring-2 focus:ring-blue-600"
+                            className="text-[13px] op-link op-link-primary underline-offset-1 focus:outline-none ml-1"
                           >
-                            Forgot Password ?
+                            Forgot Password?
                           </NavLink>
                         </div>
                       </div>
-                      <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
-                        <button
-                          type="submit"
-                          className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow outline-none uppercase focus:ring-2 focus:ring-blue-600"
-                          disabled={state.loading}
-                        >
-                          {state.loading ? "Loading..." : "Login"}
-                        </button>
-                        <NavLink
-                          className="rounded-sm cursor-pointer bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] w-full py-3 shadow uppercase"
-                          to={
+                    </fieldset>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold mt-2">
+                      <button
+                        type="submit"
+                        className="op-btn op-btn-primary"
+                        disabled={state.loading}
+                      >
+                        {state.loading ? "Loading..." : "Login"}
+                      </button>
+                      <button
+                        type="button"
+                        className="op-btn op-btn-accent"
+                        disabled={state.loading}
+                        onClick={() =>
+                          navigate(
                             location.search
                               ? "/signup" + location.search
                               : "/signup"
-                          }
-                          style={width < 768 ? { textAlign: "center" } : {}}
-                        >
-                          Create Account
-                        </NavLink>
-                      </div>
-                    </form>
-                    <br />
-                    {(appInfo.fbAppId || appInfo.googleClietId) && (
-                      <div
-                        style={{
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center"
-                        }}
-                        className="text-sm"
+                          )
+                        }
                       >
-                        <hr
-                          className={"border-[1px] border-gray-300 w-full"}
-                          style={{ color: "grey" }}
-                        />
-                        <span style={{ color: "grey" }} className="px-2 ">
-                          OR
-                        </span>
-                        <hr
-                          className={"border-[1px] border-gray-300 w-full"}
-                          style={{ color: "grey" }}
-                        />
-                      </div>
-                    )}
-                    <br />
-                    <div
-                      style={{
-                        textAlign: "center",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center"
-                      }}
-                    >
-                      {/* {appInfo.fbAppId && appInfo.fbAppId !== "" ? (
+                        Create Account
+                      </button>
+                    </div>
+                  </form>
+                  {(appInfo.googleClietId || isEnableSubscription) && (
+                    <div className="op-divider my-4 text-sm">OR</div>
+                  )}
+                  <div className="flex flex-col justify-center items-center gap-y-3">
+                    {/* {appInfo?.fbAppId && (
                       <LoginFacebook
                         FBCred={appInfo.fbAppId}
                         thirdpartyLoginfn={thirdpartyLoginfn}
                         thirdpartyLoader={state.thirdpartyLoader}
                         setThirdpartyLoader={setThirdpartyLoader}
                       />
-                    ) : null} */}
-                    </div>
-                    <div style={{ margin: "10px 0" }}></div>
-                    <div
-                      style={{
-                        textAlign: "center",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center"
-                      }}
-                    >
-                      {appInfo.googleClietId && appInfo.googleClietId !== "" ? (
-                        <GoogleSignInBtn
-                          GoogleCred={appInfo.googleClietId}
-                          thirdpartyLoginfn={thirdpartyLoginfn}
-                          thirdpartyLoader={state.thirdpartyLoader}
-                          setThirdpartyLoader={setThirdpartyLoader}
-                        />
-                      ) : null}
-                    </div>
+                    )} */}
+                    {appInfo?.googleClietId && (
+                      <GoogleSignInBtn
+                        GoogleCred={appInfo.googleClietId}
+                        thirdpartyLoginfn={thirdpartyLoginfn}
+                        thirdpartyLoader={state.thirdpartyLoader}
+                        setThirdpartyLoader={setThirdpartyLoader}
+                      />
+                    )}
+                    {isEnableSubscription && (
+                      <div
+                        className="cursor-pointer border-[1px] border-gray-300 rounded px-[40px] py-2 font-semibold text-sm hover:border-[#d2e3fc] hover:bg-[#ecf3feb7]"
+                        onClick={() => handleSignInWithSSO()}
+                      >
+                        Sign in with SSO
+                      </div>
+                    )}
                   </div>
                 </div>
                 {width >= 768 && (
-                  <div className="self-center">
+                  <div className="place-self-center">
                     <div className="mx-auto md:w-[300px] lg:w-[400px] xl:w-[500px]">
                       <img
                         src={login_img}
@@ -1239,18 +1219,18 @@ function Login() {
             <Alert type={state.alertType}>{state.alertMsg}</Alert>
           </div>
           <ModalUi isOpen={isModal} title="Additional Info" showClose={false}>
-            <form className="px-4 py-3">
+            <form className="px-4 py-3 text-base-content">
               <div className="mb-3">
                 <label
                   htmlFor="Company"
                   style={{ display: "flex" }}
                   className="block text-xs text-gray-700 font-semibold"
                 >
-                  Company <span style={{ fontSize: 13, color: "red" }}>*</span>
+                  Company <span className="text-[red] text-[13px]">*</span>
                 </label>
                 <input
                   type="text"
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                   id="Company"
                   value={userDetails.Company}
                   onChange={(e) =>
@@ -1269,11 +1249,11 @@ function Login() {
                   className="block text-xs text-gray-700 font-semibold"
                 >
                   Job Title
-                  <span style={{ fontSize: 13, color: "red" }}>*</span>
+                  <span className="text-[red] text-[13px]">*</span>
                 </label>
                 <input
                   type="text"
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                   id="JobTitle"
                   value={userDetails.Destination}
                   onChange={(e) =>
@@ -1285,23 +1265,18 @@ function Login() {
                   required
                 />
               </div>
-              <div className="mt-4">
+              <div className="mt-4 gap-2 flex flex-row">
                 <button
                   type="button"
-                  className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
+                  className="op-btn op-btn-primary"
                   onClick={(e) => handleSubmitbtn(e)}
-                  style={{
-                    marginRight: 10,
-                    backgroundColor: modalSubmitBtnColor
-                  }}
                 >
                   Login
                 </button>
                 <button
                   type="button"
-                  className="py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+                  className="op-btn op-btn-ghost"
                   onClick={handleCloseModal}
-                  style={{ width: 75, backgroundColor: modalCancelBtnColor }}
                 >
                   Cancel
                 </button>
@@ -1311,15 +1286,11 @@ function Login() {
         </>
       ) : (
         <div
-          style={{
-            position: "fixed",
-            fontSize: "50px",
-            color: "#3ac9d6",
-            top: "50%",
-            left: "45%"
-          }}
-          className="loader-37"
-        ></div>
+          aria-live="assertive"
+          className="fixed w-full h-full flex justify-center items-center z-50"
+        >
+          <Loader />
+        </div>
       )}
     </div>
   );

apps/OpenSign/src/pages/Managesign.js

@@ -6,6 +6,8 @@ import { toDataUrl } from "../constant/Utils";
 import Parse from "parse";
 import { appInfo } from "../constant/appinfo";
 import { SaveFileSize } from "../constant/saveFileSize";
+import Alert from "../primitives/Alert";
+import Loader from "../primitives/Loader";
 const ManageSign = () => {
   const appName = appInfo.appname;
   const [penColor, setPenColor] = useState("blue");
@@ -17,7 +19,7 @@ const ManageSign = () => {
   const [isvalue, setIsValue] = useState(false);
   const allColor = ["blue", "red", "black"];
   const [isLoader, setIsLoader] = useState(true);
-  const [isSuccess, setIsSuccess] = useState(false);
+  const [isAlert, setIsAlert] = useState({ type: "success", message: "" });
   const [Initials, setInitials] = useState("");
   const [isInitials, setIsInitials] = useState(false);
   const [id, setId] = useState("");
@@ -185,12 +187,20 @@ const ManageSign = () => {
         updateSign.set("UserId", userId);
         const res = await updateSign.save();
         setIsLoader(false);
-        setIsSuccess(true);
+        setIsAlert({
+          type: "success",
+          message: "Signature saved successfully."
+        });
+        setTimeout(() => setIsAlert({}), 2000);
         return res;
       } catch (err) {
         console.log(err);
         setIsLoader(false);
-        alert(`${err.message}`);
+        setIsAlert({
+          type: "danger",
+          message: `${err.message}`
+        });
+        setTimeout(() => setIsAlert({}), 2000);
       }
     } else {
       try {
@@ -201,12 +211,20 @@ const ManageSign = () => {
         updateSign.set("UserId", userId);
         const res = await updateSign.save();
         setIsLoader(false);
-        setIsSuccess(true);
+        setIsAlert({
+          type: "success",
+          message: "Signature saved successfully."
+        });
+        setTimeout(() => setIsAlert({}), 2000);
         return res;
       } catch (err) {
         console.log(err);
         setIsLoader(false);
-        alert(`${err.message}`);
+        setIsAlert({
+          type: "success",
+          message: `${err.message}`
+        });
+        setTimeout(() => setIsAlert({}), 2000);
       }
     }
   };
@@ -224,24 +242,13 @@ const ManageSign = () => {
     setIsValue(true);
   };
   return (
-    <div className="relative h-full bg-white flex shadow rounded overflow-auto">
+    <div className="relative h-full bg-base-100 text-base-content flex shadow rounded overflow-auto">
       {isLoader && (
-        <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 && (
-        <div
-          className="alert alert-success successBox"
-          role="alert"
-          onAnimationEnd={() => setIsSuccess(false)}
-        >
-          Signature saved successfully!
+        <div className="absolute bg-black bg-opacity-30 z-50 w-full h-full flex justify-center items-center">
+          <Loader />
         </div>
       )}
+      {isAlert?.message && <Alert type={isAlert.type}>{isAlert.message}</Alert>}
       <div
         className="mainDiv"
         style={{
@@ -249,39 +256,13 @@ const ManageSign = () => {
           paddingRight: "10px"
         }}
       >
-        <div style={{ margin: 20 }}>
-          <div
-            style={{
-              fontWeight: "700",
-              fontSize: 15,
-              color: "#000",
-              paddingBottom: 8
-            }}
-          >
-            My Signature
-          </div>
+        <div className="m-[20px]">
+          <div className="font-[700] text-[15px] pb-[8px]">My Signature</div>
           <div className="signBlock mt-4">
             <div>
-              <div style={{ position: "relative" }}>
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    width: "50%",
-                    paddingLeft: 10
-                  }}
-                >
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "space-around",
-                      alignItems: "center",
-                      gap: 10,
-                      marginBottom: 10
-                    }}
-                  >
+              <div className="relative">
+                <div className="flex flex-row justify-between w-1/2 pl-[10px]">
+                  <div className="flex flex-row justify-around items-center gap-[10px] mb-[10px]">
                     <>
                       <span
                         onClick={() => handleSignatureBtn()}
@@ -307,24 +288,14 @@ const ManageSign = () => {
                     />
                   </div>
                 </div>
-                <div style={{ position: "relative" }}>
+                <div className="relative">
                   <div>
                     {image ? (
-                      <div
-                        style={{
-                          position: "relative",
-                          border: "2px solid #888"
-                        }}
-                        className="signatureCanvas"
-                      >
+                      <div className="signatureCanvas relative border-[2px] border-[#888]">
                         <img
                           alt="preview image"
                           src={image}
-                          style={{
-                            width: "100%",
-                            height: "100%",
-                            objectFit: "contain"
-                          }}
+                          className="w-full h-full object-contain"
                         />
                       </div>
                     ) : (
@@ -366,10 +337,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) {
@@ -474,10 +445,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) {
@@ -509,20 +480,11 @@ const ManageSign = () => {
                   </div>
                 </div>
               </div>
-              {/* {!warning && (
-                <div className="warning signWarning" style={{ fontSize: 12 }}>
-                  <i
-                    className="fas fa-exclamation-circle"
-                    style={{ color: "#fab005", fontSize: 15 }}
-                  ></i>{" "}
-                  Please upload signature/Image
-                </div>
-              )} */}
             </div>
           </div>
           <div style={{ paddingTop: 10 }}>
             <button
-              className="customBtn successBtn"
+              className="op-btn op-btn-primary"
               onClick={(e) => handleSubmit(e)}
             >
               save

apps/OpenSign/src/pages/Opensigndrive.js

@@ -1,32 +1,23 @@
 import React, { useEffect, useState, useRef } from "react";
 import "../styles/opensigndrive.css";
-import loader from "../assets/images/loader2.gif";
-import { themeColor, iconColor } from "../constant/const";
+import { 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";
+import TourContentWithBtn from "../primitives/TourContentWithBtn";
+import Tour from "reactour";
+import axios from "axios";
+import Loader from "../primitives/Loader";
+
 const DriveBody = React.lazy(
   () => import("../components/opensigndrive/DriveBody")
 );
-const Loader = () => {
+const AppLoader = () => {
   return (
-    <div
-      style={{
-        height: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }}
-    >
-      <div
-        style={{
-          fontSize: "45px",
-          color: "#3dd3e0"
-        }}
-        className="loader-37"
-      ></div>
+    <div className="h-[100vh] flex justify-center items-center">
+      <Loader />
     </div>
   );
 };
@@ -42,6 +33,8 @@ function Opensigndrive() {
   const [error, setError] = useState();
   const [folderLoader, setIsFolderLoader] = useState(false);
   const [isShowSort, setIsShowSort] = useState(false);
+  const [isTour, setIsTour] = useState(false);
+  const [tourStatusArr, setTourStatusArr] = useState([]);
   const [isLoading, setIsLoading] = useState({
     isLoad: true,
     message: "This might take some time"
@@ -56,6 +49,9 @@ function Opensigndrive() {
   const [loading, setLoading] = useState(false);
   const sortOrder = ["Ascending", "Descending"];
   const sortingValue = ["Name", "Date"];
+  const [isDontShow, setIsDontShow] = useState(false);
+  const [tourData, setTourData] = useState();
+  const [showTourFirstTIme, setShowTourFirstTime] = useState(true);
   const orderName = {
     Ascending: "Ascending",
     Descending: "Descending",
@@ -73,12 +69,62 @@ function Opensigndrive() {
 
   useEffect(() => {
     getPdfDocumentList();
+
     // eslint-disable-next-line
   }, [docId]);
 
+  const tourConfigs = [
+    {
+      selector: '[data-tut="reactourFirst"]',
+      content: () => (
+        <TourContentWithBtn
+          message={`Click on the breadcrumb links to easily navigate through the folder hierarchy and view the documents within each folder.`}
+          isChecked={handleDontShow}
+        />
+      ),
+      position: "top",
+      style: { fontSize: "13px" }
+    },
+    {
+      selector: '[data-tut="reactourSecond"]',
+      content: () => (
+        <TourContentWithBtn
+          message={`Click the add button to create a new folder or document.`}
+          isChecked={handleDontShow}
+        />
+      ),
+      position: "top",
+      style: { fontSize: "13px" }
+    },
+    {
+      selector: '[data-tut="reactourThird"]',
+      content: () => (
+        <TourContentWithBtn
+          message={`Sort your documents by Date or Name using this menu.`}
+          isChecked={handleDontShow}
+        />
+      ),
+      position: "top",
+      style: { fontSize: "13px" }
+    },
+    {
+      selector: '[data-tut="reactourForth"]',
+      content: () => (
+        <TourContentWithBtn
+          message={`Click on this menu to display the documents in list view.`}
+          isChecked={handleDontShow}
+        />
+      ),
+      position: "top",
+      style: { fontSize: "13px" }
+    }
+  ];
   //function for get all pdf document list
   const getPdfDocumentList = async (disbaleLoading) => {
     setLoading(true);
+    if (showTourFirstTIme) {
+      checkTourStatus();
+    }
     if (!disbaleLoading) {
       setIsLoading({ isLoad: true, message: "This might take some time" });
     }
@@ -87,8 +133,61 @@ function Opensigndrive() {
       if (driveDetails && driveDetails === "Error: Something went wrong!") {
         setHandleError("Error: Something went wrong!");
       } else if (driveDetails && driveDetails.length > 0) {
+        const addMoreTour = [
+          {
+            selector: '[data-tut="reactourFifth"]',
+            content: () => (
+              <TourContentWithBtn
+                message={`The document list is displayed according to the selected sorting option. Icons next to each document indicate its current status.`}
+                isChecked={handleDontShow}
+              />
+            ),
+            position: "bottom",
+            style: { fontSize: "13px" }
+          },
+          {
+            selector: '[data-tut="reactourSixth"]',
+            content: () => (
+              <TourContentWithBtn
+                message={`Right-click on a document to see options such as Download, Rename, Move, and Delete. Click on the document to open it.`}
+                isChecked={handleDontShow}
+              />
+            ),
+            position: "bottom",
+            style: { fontSize: "13px" }
+          },
+          {
+            selector: '[data-tut="reactourSeventh"]',
+            content: () => (
+              <TourContentWithBtn
+                message={`Right-click on any folder to see options. Choose ‘Rename’ to change the folder’s name or click on the folder to navigate through its contents.`}
+                isChecked={handleDontShow}
+              />
+            ),
+            position: "bottom",
+            style: { fontSize: "13px" }
+          }
+        ];
+        let newTour = [...tourConfigs, ...addMoreTour];
+        const isFolderExist = driveDetails.some(
+          (data) => data.Type === "Folder"
+        );
+        if (!isFolderExist) {
+          newTour = newTour.filter(
+            (data) => data.selector !== '[data-tut="reactourSeventh"]'
+          );
+        }
+        const isDocumentExist = driveDetails.some((data) => data.URL);
+        if (!isDocumentExist) {
+          newTour = newTour.filter(
+            (data) => data.selector !== '[data-tut="reactourSixth"]'
+          );
+        }
+        setTourData(newTour);
         setSkip((prevSkip) => prevSkip + limit);
         sortingData(null, null, driveDetails, true);
+      } else {
+        setTourData(tourConfigs);
       }
       if (!docId) {
         setFolderName([{ name: "OpenSign™ Drive", objectId: "" }]);
@@ -141,17 +240,23 @@ function Opensigndrive() {
   }, [loading, sortingOrder, selectedSort]); // Add/remove scroll event listener when loading changes
 
   //function for handle folder name path
-  const handleRoute = (index) => {
-    setPdfData([]);
+  const handleRoute = (index, folderData) => {
     setSkip(0);
+    // after onclick on route filter route from that index
     const updateFolderName = folderName.filter((x, i) => {
       if (i <= index) {
         return x;
       }
     });
     setFolderName(updateFolderName);
+    //get route details after onclick path of folder name
+    const getCurrentId = folderData[index];
     const getLastId = updateFolderName[updateFolderName.length - 1];
-    setDocId(getLastId.objectId);
+    //below condition is used to check if user click on same route which already open then don't change any thing
+    if (docId !== getCurrentId.objectId) {
+      setPdfData([]);
+      setDocId(getLastId.objectId);
+    }
   };
 
   //function for add new folder name
@@ -161,7 +266,8 @@ function Opensigndrive() {
     setNewFolderName(value);
   };
   //function for create folder
-  const handleAddFolder = async () => {
+  const handleAddFolder = async (e) => {
+    e.preventDefault();
     if (newFolderName) {
       setIsFolderLoader(true);
       const getParentObjId = folderName[folderName.length - 1];
@@ -182,6 +288,7 @@ function Opensigndrive() {
         const exsitQuery = new Parse.Query(foldercls);
         exsitQuery.equalTo("Name", newFolderName);
         exsitQuery.equalTo("Type", "Folder");
+        exsitQuery.notEqualTo("IsArchive", true);
         if (parentId) {
           exsitQuery.equalTo("Folder", folderPtr);
         }
@@ -203,6 +310,7 @@ function Opensigndrive() {
             const result = JSON.parse(JSON.stringify(res));
 
             setPdfData((prev) => [...prev, result]);
+            sortingData(null, null, [result], true);
             setNewFolderName();
             setIsFolderLoader(false);
             setIsFolder(false);
@@ -223,9 +331,13 @@ function Opensigndrive() {
   const sortedBy = (appInfo, type, order) => {
     if (type === orderName.Name) {
       if (order === orderName.Ascending) {
-        return appInfo.sort((a, b) => (a.Name > b.Name ? 1 : -1));
+        return appInfo.sort((a, b) =>
+          a.Name.toLowerCase() < b.Name.toLowerCase() ? -1 : 1
+        );
       } else if (order === orderName.Descending) {
-        return appInfo.sort((a, b) => (a.Name > b.Name ? -1 : 1));
+        return appInfo.sort((a, b) =>
+          a.Name.toLowerCase() < b.Name.toLowerCase() ? 1 : -1
+        );
       }
     } else if (type === orderName.Date) {
       if (order === orderName.Ascending) {
@@ -325,22 +437,11 @@ function Opensigndrive() {
       return (
         <React.Fragment key={id}>
           <span
-            onClick={() => handleRoute(id)}
-            style={{
-              color: "#a64b4e",
-              fontWeight: "400",
-              cursor: "pointer"
-            }}
+            onClick={() => handleRoute(id, folderData)}
+            className="text-[#a64b4e] font-normal cursor-pointer"
           >
             {data.name}
-            <span
-              style={{
-                color: "#a64b4e",
-                fontWeight: "200",
-                cursor: "pointer",
-                margin: "0 4px"
-              }}
-            >
+            <span className="text-[#a64b4e] font-extralight cursor-pointer mx-[4px]">
               &gt;
             </span>
           </span>
@@ -353,367 +454,338 @@ function Opensigndrive() {
     setNewFolderName("");
     setError("");
   };
+
+  const handleDontShow = (isChecked) => {
+    setIsDontShow(isChecked);
+  };
+
+  const closeTour = async () => {
+    setIsTour(false);
+    setShowTourFirstTime(false);
+    if (isDontShow) {
+      const serverUrl = localStorage.getItem("baseUrl");
+      const appId = localStorage.getItem("parseAppId");
+      const extUserClass = localStorage.getItem("extended_class");
+      const json = JSON.parse(localStorage.getItem("Extand_Class"));
+      const extUserId = json && json.length > 0 && json[0].objectId;
+      let updatedTourStatus = [];
+      if (tourStatusArr.length > 0) {
+        updatedTourStatus = [...tourStatusArr];
+        const driveTourIndex = tourStatusArr.findIndex(
+          (obj) => obj["driveTour"] === false || obj["driveTour"] === true
+        );
+        if (driveTourIndex !== -1) {
+          updatedTourStatus[driveTourIndex] = { driveTour: true };
+        } else {
+          updatedTourStatus.push({ driveTour: true });
+        }
+      } else {
+        updatedTourStatus = [{ driveTour: true }];
+      }
+      await axios.put(
+        serverUrl + "classes/" + extUserClass + "/" + extUserId,
+        {
+          TourStatus: updatedTourStatus
+        },
+        {
+          headers: {
+            "X-Parse-Application-Id": appId
+          }
+        }
+      );
+    }
+  };
+  //function to use check tour status of open sign drive
+  async function checkTourStatus() {
+    const currentUser = Parse.User.current();
+    const cloudRes = await Parse.Cloud.run("getUserDetails", {
+      email: currentUser.get("email")
+    });
+    const res = { data: cloudRes.toJSON() };
+    if (res.data && res.data.TourStatus && res.data.TourStatus.length > 0) {
+      const tourStatus = res.data.TourStatus;
+      setTourStatusArr(tourStatus);
+      const filteredtourStatus = tourStatus.filter((obj) => obj["driveTour"]);
+      if (filteredtourStatus.length > 0) {
+        const driveTour = filteredtourStatus[0]["driveTour"];
+        // console.log("loginTour", loginTour);
+        if (driveTour) {
+          setIsTour(false);
+        } else {
+          setIsTour(true);
+        }
+      } else {
+        setIsTour(true);
+      }
+    } else {
+      setIsTour(true);
+    }
+  }
   return (
-    <div style={{ backgroundColor: "white" }} className="folderComponent">
+    <div className="bg-base-100 text-base-content rounded-xl w-full">
       <Title title={"OpenSign™ Drive"} drive={true} />
-      <div>
-        <ModalUi
-          headerColor={"#dc3545"}
-          isOpen={isAlert.isShow}
-          title={"Alert"}
-          handleClose={() => {
-            setIsAlert({
-              isShow: false,
-              alertMessage: ""
-            });
-          }}
-        >
-          <div style={{ height: "100%", padding: 20 }}>
-            <p>{isAlert.alertMessage}</p>
-
-            <div
-              style={{
-                height: "1px",
-                backgroundColor: "#9f9f9f",
-                width: "100%",
-                marginTop: "15px",
-                marginBottom: "15px"
-              }}
-            ></div>
-            <button
-              onClick={() =>
-                setIsAlert({
-                  isShow: false,
-                  alertMessage: ""
-                })
-              }
-              type="button"
-              className="finishBtn cancelBtn"
+      <ModalUi
+        isOpen={isAlert.isShow}
+        title={"Alert"}
+        handleClose={() => {
+          setIsAlert({
+            isShow: false,
+            alertMessage: ""
+          });
+        }}
+      >
+        <div className="h-full p-[20px] pb-[15px]">
+          <p>{isAlert.alertMessage}</p>
+          <div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
+          <button
+            onClick={() =>
+              setIsAlert({
+                isShow: false,
+                alertMessage: ""
+              })
+            }
+            type="button"
+            className="op-btn op-btn-neutral op-btn-sm"
+          >
+            Close
+          </button>
+        </div>
+      </ModalUi>
+      <ModalUi
+        isOpen={isFolder}
+        title={"Add New Folder"}
+        handleClose={oncloseFolder}
+      >
+        <div className="h-full p-[20px] pt-[10px] pb-[15px]">
+          {folderLoader ? (
+            <div className="h-[200px] flex justify-center items-center">
+              <Loader />
+            </div>
+          ) : (
+            <form
+              onSubmit={handleAddFolder}
+              className="flex flex-col text-base-content"
             >
-              Close
-            </button>
-          </div>
-        </ModalUi>
-        <ModalUi
-          isOpen={isFolder}
-          title={"Add New Folder"}
-          handleClose={oncloseFolder}
-        >
-          <div style={{ height: "100%", padding: 20 }}>
-            {folderLoader ? (
-              <div
-                style={{
-                  height: "200px",
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center"
-                }}
-              >
-                <img
-                  alt="loader img"
-                  src={loader}
-                  style={{ width: "50px", height: "50px" }}
-                />
-                <span style={{ fontSize: "13px", color: "gray" }}>
-                  Loading...
-                </span>
+              <label className="py-[8px] text-[15px] font-[400] mb-0">
+                Name
+                <span className="text-[red]">*</span>
+              </label>
+              <input
+                required
+                className="op-input op-input-bordered op-input-sm"
+                type="text"
+                value={newFolderName}
+                onChange={(e) => handleFolderName(e)}
+              />
+              <span className="text-[red] text-[12px] mt-[6px]">{error}</span>
+              <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
+              <div className="flex flex-row">
+                <button type="submit" className="op-btn op-btn-primary">
+                  Add
+                </button>
+                <button
+                  type="button"
+                  className="op-btn op-btn-ghost ml-1"
+                  onClick={oncloseFolder}
+                >
+                  Close
+                </button>
               </div>
-            ) : (
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  handleAddFolder();
-                }}
-                style={{ display: "flex", flexDirection: "column" }}
-              >
-                <label
-                  style={{
-                    margin: "10px 0px 10px 0px",
-                    fontSize: "15px",
-                    fontWeight: "400"
-                  }}
-                >
-                  Name
-                  <span style={{ color: "red" }}>*</span>
-                </label>
-
-                <input
-                  required
-                  className="form-control inputStyle"
-                  type="text"
-                  value={newFolderName}
-                  onChange={(e) => handleFolderName(e)}
-                  // className="addFolderInput"
-                />
-                <span
-                  style={{ color: "red", fontSize: "12px", marginTop: "6px" }}
-                >
-                  {error}
-                </span>
-                <div
-                  style={{
-                    height: "1px",
-                    backgroundColor: "#9f9f9f",
-                    width: "100%",
-                    marginTop: "15px",
-                    marginBottom: "15px"
-                  }}
-                ></div>
-                <div style={{ display: "flex", flexDirection: "row" }}>
-                  <button
-                    style={{ background: themeColor }}
-                    type="submit"
-                    className="finishBtn"
-                  >
-                    Add
-                  </button>
-                  <button
-                    type="button"
-                    className="finishBtn cancelBtn"
-                    onClick={oncloseFolder}
-                  >
-                    Close
-                  </button>
-                </div>
-              </form>
+            </form>
+          )}
+        </div>
+      </ModalUi>
+      {isLoading.isLoad ? (
+        <div className="flex flex-col justify-center items-center h-[100vh] w-full">
+          <Loader />
+          <span className="text-[13px] text-[gray]">{isLoading.message}</span>
+        </div>
+      ) : handleError ? (
+        <div className="flex justify-center items-center h-[100vh] w-full">
+          <span className="text-[20px] text-[gray]">{handleError}</span>
+        </div>
+      ) : (
+        <>
+          <div className="flex flex-row justify-between items-center px-[25px] pt-[20px]">
+            {tourData && (
+              <Tour
+                onRequestClose={closeTour}
+                steps={tourData}
+                isOpen={isTour}
+                closeWithMask={false}
+                scrollOffset={-100}
+                rounded={5}
+              />
             )}
-          </div>
-        </ModalUi>
-
-        {isLoading.isLoad ? (
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "100vh",
-              width: "100%",
-              flexDirection: "column"
-            }}
-          >
-            <img
-              alt="loader img"
-              src={loader}
-              style={{ width: "80px", height: "80px" }}
-            />
-            <span style={{ fontSize: "13px", color: "gray" }}>
-              {isLoading.message}
-            </span>
-          </div>
-        ) : handleError ? (
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "100vh",
-              width: "100%"
-            }}
-          >
-            <span style={{ fontSize: "20px", color: "gray" }}>
-              {handleError}
-            </span>
-          </div>
-        ) : (
-          <>
-            <div className="folderContainer">
+            <div
+              data-tut="reactourFirst"
+              onMouseEnter={(e) => handleMouseEnter(e)}
+              ref={scrollRef}
+              className="w-full whitespace-nowrap cursor-pointer select-none overflow-x-auto"
+            >
+              {handleFolderTab(folderName)}
+            </div>
+            <div className="dropMenuBD">
               <div
-                onMouseEnter={(e) => handleMouseEnter(e)}
-                ref={scrollRef}
-                style={{
-                  width: "100%"
-                }}
-                className="folderPath"
+                id="folder-menu"
+                className={
+                  isNewFol ? "dropdown show dropDownStyle" : "dropdown"
+                }
+                onClick={() => setIsNewFol(!isNewFol)}
               >
-                {handleFolderTab(folderName)}
-              </div>
-              <div className="dropMenuBD">
-                <div
-                  id="folder-menu"
-                  className={
-                    isNewFol ? "dropdown show dropDownStyle" : "dropdown"
-                  }
-                  onClick={() => setIsNewFol(!isNewFol)}
-                >
-                  <div className="sort">
-                    <i
-                      className="fa fa-plus-square"
-                      aria-hidden="true"
-                      style={{ fontSize: "25px", color: `${iconColor}` }}
-                    ></i>
-                  </div>
-                  <div
-                    className={
-                      isNewFol ? "dropdown-menu show" : "dropdown-menu"
-                    }
-                    aria-labelledby="dropdownMenuButton"
-                    aria-expanded={isNewFol ? "true" : "false"}
-                  >
-                    {" "}
-                    <div
-                      style={{
-                        display: "flex",
-                        flexDirection: "column"
-                      }}
-                    >
-                      <span
-                        className="dropdown-item itemColor"
-                        onClick={() => setIsFolder(true)}
-                      >
-                        <i
-                          style={{ marginRight: "5px" }}
-                          className="fa fa-plus"
-                          aria-hidden="true"
-                        ></i>
-                        Create folder
-                      </span>
-                      <span
-                        className="dropdown-item itemColor"
-                        onClick={() => navigate("/form/sHAnZphf69")}
-                      >
-                        <i
-                          style={{ marginRight: "5px" }}
-                          className="fas fa-pen-nib"
-                        ></i>
-                        Sign Yourself
-                      </span>
-                      <span
-                        className="dropdown-item itemColor"
-                        onClick={() => navigate("/form/8mZzFxbG1z")}
-                      >
-                        {" "}
-                        <i
-                          style={{ marginRight: "5px" }}
-                          className="fa fa-file-signature"
-                        ></i>
-                        Request Signatures{" "}
-                      </span>
-                    </div>
-                  </div>
+                <div className="sort" data-tut="reactourSecond">
+                  <i
+                    className="fa fa-plus-square"
+                    aria-hidden="true"
+                    style={{ fontSize: "25px", color: `${iconColor}` }}
+                  ></i>
                 </div>
                 <div
-                  id="menu-container"
-                  className={isShowSort ? "dropdown show" : "dropdown"}
-                  onClick={() => setIsShowSort(!isShowSort)}
+                  className={isNewFol ? "dropdown-menu show" : "dropdown-menu"}
+                  aria-labelledby="dropdownMenuButton"
+                  aria-expanded={isNewFol ? "true" : "false"}
                 >
-                  <div className=" sort  " data-toggle="dropdown">
-                    <i
-                      className="fa fa-sort-amount-asc"
-                      aria-hidden="true"
-                      style={{
-                        marginRight: "5px",
-                        fontSize: "14px",
-                        color: `${iconColor}`
-                      }}
-                    ></i>
+                  <div className="flex flex-col">
                     <span
-                      style={{
-                        fontSize: "15px",
-                        color: `${iconColor}`
-                      }}
+                      className="dropdown-item itemColor"
+                      onClick={() => setIsFolder(true)}
                     >
-                      {selectedSort}
+                      <i className="fa fa-plus mr-[5px]" aria-hidden="true"></i>
+                      Create folder
+                    </span>
+                    <span
+                      className="dropdown-item itemColor"
+                      onClick={() => navigate("/form/sHAnZphf69")}
+                    >
+                      <i className="fas fa-pen-nib mr-[5px"></i>
+                      Sign Yourself
+                    </span>
+                    <span
+                      className="dropdown-item itemColor"
+                      onClick={() => navigate("/form/8mZzFxbG1z")}
+                    >
+                      <i className="fa fa-file-signature mr-[5px"></i>
+                      Request Signatures
                     </span>
                   </div>
-                  <div
-                    className={
-                      isShowSort ? "dropdown-menu show" : "dropdown-menu"
-                    }
-                    aria-labelledby="dropdownMenuButton"
-                    aria-expanded={isShowSort ? "true" : "false"}
-                  >
-                    {sortingValue.map((value, ind) => {
-                      return (
-                        <span
-                          key={ind}
-                          onClick={() => {
-                            setSelectedSort(value);
-                            sortingData(value, null, pdfData);
-                          }}
-                          className="dropdown-item itemColor"
-                          style={{
-                            paddingLeft: selectedSort !== value && "33px"
-                          }}
-                        >
-                          {selectedSort === value && (
-                            <i
-                              className="fa fa-check"
-                              aria-hidden="true"
-                              style={{ marginRight: "5px" }}
-                            ></i>
-                          )}
-                          {value}
-                        </span>
-                      );
-                    })}
+                </div>
+              </div>
+              <div
+                id="menu-container"
+                className={isShowSort ? "dropdown show" : "dropdown"}
+                onClick={() => setIsShowSort(!isShowSort)}
+              >
+                <div
+                  data-tut="reactourThird"
+                  className="sort "
+                  data-toggle="dropdown"
+                >
+                  <i
+                    className="fa fa-sort-amount-asc mr-[5px] text-[14px]"
+                    aria-hidden="true"
+                    style={{ color: `${iconColor}` }}
+                  ></i>
+                  <span style={{ fontSize: "15px", color: `${iconColor}` }}>
+                    {selectedSort}
+                  </span>
+                </div>
+                <div
+                  className={
+                    isShowSort ? "dropdown-menu show" : "dropdown-menu"
+                  }
+                  aria-labelledby="dropdownMenuButton"
+                  aria-expanded={isShowSort ? "true" : "false"}
+                >
+                  {sortingValue.map((value, ind) => {
+                    return (
+                      <span
+                        key={ind}
+                        onClick={() => {
+                          setSelectedSort(value);
+                          sortingData(value, null, pdfData);
+                        }}
+                        className="dropdown-item itemColor"
+                        style={{
+                          paddingLeft: selectedSort !== value && "33px"
+                        }}
+                      >
+                        {selectedSort === value && (
+                          <i
+                            className="fa fa-check mr-[5px"
+                            aria-hidden="true"
+                          ></i>
+                        )}
+                        {value}
+                      </span>
+                    );
+                  })}
 
-                    <hr className="hrStyle" />
-                    {sortOrder.map((order, ind) => {
-                      return (
-                        <span
-                          key={ind}
-                          onClick={() => {
-                            setSortingOrder(order);
-                            sortingData(null, order, pdfData);
-                          }}
-                          className="dropdown-item itemColor"
-                          style={{
-                            paddingLeft: sortingOrder !== order && "33px"
-                          }}
-                        >
-                          {sortingOrder === order && (
-                            <i
-                              className="fa fa-check"
-                              aria-hidden="true"
-                              style={{ marginRight: "5px" }}
-                            ></i>
-                          )}
-                          {order}
-                        </span>
-                      );
-                    })}
+                  <hr className="hrStyle" />
+                  {sortOrder.map((order, ind) => {
+                    return (
+                      <span
+                        key={ind}
+                        onClick={() => {
+                          setSortingOrder(order);
+                          sortingData(null, order, pdfData);
+                        }}
+                        className="dropdown-item itemColor"
+                        style={{
+                          paddingLeft: sortingOrder !== order && "33px"
+                        }}
+                      >
+                        {sortingOrder === order && (
+                          <i
+                            className="fa fa-check mr-[5px"
+                            aria-hidden="true"
+                          ></i>
+                        )}
+                        {order}
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+
+              <div>
+                {isList ? (
+                  <div className="sort" onClick={() => setIsList(!isList)}>
+                    <i
+                      onClick={() => setIsList(!isList)}
+                      className="fa fa-th-large"
+                      style={{ fontSize: "24px", color: `${iconColor}` }}
+                      aria-hidden="true"
+                    ></i>
                   </div>
-                </div>
-
-                <div>
-                  {isList ? (
-                    <div className="sort" onClick={() => setIsList(!isList)}>
-                      <i
-                        onClick={() => setIsList(!isList)}
-                        className="fa fa-th-large"
-                        style={{ fontSize: "24px", color: `${iconColor}` }}
-                        aria-hidden="true"
-                      ></i>
-                    </div>
-                  ) : (
-                    <div className="sort" onClick={() => setIsList(!isList)}>
-                      <i
-                        className="fa fa-list"
-                        aria-hidden="true"
-                        style={{ fontSize: "23px", color: `${iconColor}` }}
-                      ></i>
-                    </div>
-                  )}
-                </div>
+                ) : (
+                  <div
+                    data-tut="reactourForth"
+                    className="sort"
+                    onClick={() => setIsList(!isList)}
+                  >
+                    <i
+                      className="fa fa-list"
+                      aria-hidden="true"
+                      style={{ fontSize: "23px", color: `${iconColor}` }}
+                    ></i>
+                  </div>
+                )}
               </div>
             </div>
+          </div>
 
-            {pdfData && pdfData.length === 0 ? (
-              <div
-                style={{
-                  display: "flex",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  height: "50vh",
-                  width: "100%"
-                }}
-              >
-                <span style={{ fontWeight: "bold" }}>No Data Found!</span>
-              </div>
-            ) : (
-              <React.Suspense fallback={<Loader />}>
+          {pdfData && pdfData.length === 0 ? (
+            <div className="flex justify-center items-center w-full h-[50vh]">
+              <span className="text-base-content font-bold">
+                No Data Found!
+              </span>
+            </div>
+          ) : (
+            <div data-tut="reactourFifth">
+              <React.Suspense fallback={<AppLoader />}>
                 <DriveBody
+                  dataTutSixth="reactourSixth"
+                  dataTutSeventh="reactourSeventh"
                   pdfData={pdfData}
                   setFolderName={setFolderName}
                   setIsLoading={setIsLoading}
@@ -724,15 +796,16 @@ function Opensigndrive() {
                   isList={isList}
                   setIsAlert={setIsAlert}
                   setSkip={setSkip}
+                  sortingData={sortingData}
                 />
                 {loading && (
-                  <div style={{ textAlign: "center" }}>Loading...</div>
+                  <div className="text-center pb-[20px]">Loading...</div>
                 )}
               </React.Suspense>
-            )}
-          </>
-        )}
-      </div>
+            </div>
+          )}
+        </>
+      )}
     </div>
   );
 }

apps/OpenSign/src/pages/PageNotFound.js

@@ -4,13 +4,11 @@ import Title from "../components/Title";
 
 const PageNotFound = ({ prefix }) => {
   return (
-    <div className="flex items-center justify-center h-screen w-full bg-white rounded">
+    <div className="flex items-center justify-center h-screen w-full bg-base-100 text-base-content rounded">
       <Title title={"Page Not Found"} />
       <div className="text-center">
-        <h1 className="text-[60px] lg:text-[120px] font-semibold text-black">
-          404
-        </h1>
-        <p className="text-[30px] lg:text-[50px] text-black">
+        <h1 className="text-[60px] lg:text-[120px] font-semibold">404</h1>
+        <p className="text-[30px] lg:text-[50px]">
           {prefix ? prefix : "Page"} Not Found
         </p>
       </div>

apps/OpenSign/src/pages/Pgsignup.js

@@ -8,6 +8,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { appInfo } from "../constant/appinfo";
 import { showTenant } from "../redux/reducers/ShowTenant";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
+import Loader from "../primitives/Loader";
 
 const PgSignUp = () => {
   const navigate = useNavigate();
@@ -41,12 +42,8 @@ const PgSignUp = () => {
         const url = window.location.href;
         let paramString = url.split("?")[1];
         let queryString = new URLSearchParams(paramString);
-        // console.log("url ", queryString);
-
         let obj = { ...formData };
         for (let pair of queryString.entries()) {
-          // console.log("Key is: " + pair[0]);
-          // console.log("Value is: " + pair[1]);
           obj = { ...obj, [pair[0]]: pair[1] };
         }
         const zohoRes = await axios.post(
@@ -61,34 +58,27 @@ const PgSignUp = () => {
             }
           }
         );
-        // console.log("zohoRes ", zohoRes);
         const userSettings = JSON.parse(localStorage.getItem("userSettings"));
-        const extClass = userSettings[0].extended_class;
-        // console.log("extClass ", extClass);
-        const params = { email: userDetails.email };
-        const res = await Parse.Cloud.run("getUserDetails", params);
-        // console.log("res", res);
-        if (res) {
-          const updateQuery = new Parse.Object(extClass);
-          updateQuery.id = res.id;
-          updateQuery.set(
-            "Next_billing_date",
-            new Date(zohoRes.data.result.nextBillingDate)
-          );
-          updateQuery.set("Plan", zohoRes.data.result.plan);
-          updateQuery.set("Customer_id", zohoRes.data.result.customer_id);
-          updateQuery.set(
-            "Subscription_id",
-            zohoRes.data.result.subscription_id
-          );
-          const updateRes = await updateQuery.save();
-          if (updateRes) {
+        const params = { subscription: zohoRes.data.result.subscription };
+        const baseurl = `${parseBaseUrl}functions/savesubscription`;
+        try {
+          const res = await axios.post(baseurl, params, {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": parseAppId,
+              sessiontoken: localStorage.getItem("accesstoken")
+            }
+          });
+          if (res) {
             localStorage.removeItem("userDetails");
             navigate(
               "/" + userSettings[0].pageType + "/" + userSettings[0].pageId
             );
             setIsLoader(false);
           }
+        } catch (err) {
+          console.log("err ", err.message);
+          setIsLoader(false);
         }
       } catch (err) {
         console.log("err ", err);
@@ -108,12 +98,8 @@ const PgSignUp = () => {
         const url = window.location.href;
         let paramString = url.split("?")[1];
         let queryString = new URLSearchParams(paramString);
-        // console.log("url ", queryString);
-
         let obj = { ...formData };
         for (let pair of queryString.entries()) {
-          // console.log("Key is: " + pair[0]);
-          // console.log("Value is: " + pair[1]);
           obj = { ...obj, [pair[0]]: pair[1] };
         }
         saveUser(obj);
@@ -142,7 +128,9 @@ const PgSignUp = () => {
       user.set("username", zohoRes.data.result.email);
       user.set("password", obj.password);
       user.set("email", zohoRes.data.result.email);
-      user.set("phone", zohoRes.data.result.phone);
+      if (zohoRes?.data?.result?.phone) {
+        user.set("phone", zohoRes.data.result.phone);
+      }
       user.set("name", zohoRes.data.result.name);
 
       const res = await user.signUp();
@@ -155,21 +143,10 @@ const PgSignUp = () => {
             company: zohoRes.data.result.company,
             name: zohoRes.data.result.name,
             email: zohoRes.data.result.email,
-            phone: zohoRes.data.result.phone,
+            phone: zohoRes?.data?.result?.phone || "",
             role: obj.role
-            // "pincode": "",
-            // "address": "",
-            // "country": "",
-            // "state": "",
-            // "city": ""
           },
-
-          planDetails: {
-            plan: zohoRes.data.result.plan || {},
-            nextBillingDate: zohoRes.data.result.nextBillingDate || "",
-            customer_id: zohoRes.data.result.customer_id || "",
-            subscription_id: zohoRes.data.result.subscription_id || ""
-          }
+          subscription: zohoRes.data.result.subscription
         };
         const usersignup = await Parse.Cloud.run("usersignup", params);
         // console.log("usersignup ", usersignup);
@@ -435,21 +412,8 @@ const PgSignUp = () => {
     <div className="bg-white">
       <Title title={"Pgsignup page"} />
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="flex justify-center items-center h-[100vh]">
+          <Loader />
         </div>
       ) : (
         <form id="signup" className="pgsignup-content" onSubmit={handleSubmit}>

apps/OpenSign/src/pages/PlanSubscriptions.js

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { NavLink, useNavigate } from "react-router-dom";
 import checkmark from "../assets/images/checkmark.png";
-import plansArr from "../json/plansArr.json";
+import plansArr from "../json/plansArr";
 import Title from "../components/Title";
 import Parse from "parse";
+import { openInNewTab } from "../constant/Utils";
+import Loader from "../primitives/Loader";
 const listItemStyle = {
   paddingLeft: "20px", // Add padding to create space for the image
   backgroundImage: `url(${checkmark})`, // Set your image as the list style image
@@ -16,18 +18,34 @@ const PlanSubscriptions = () => {
   const navigate = useNavigate();
   const [yearlyVisible, setYearlyVisible] = useState(false);
   const [isLoader, setIsLoader] = useState(true);
-
-  const userDetails = JSON.parse(localStorage.getItem("userDetails"));
+  const extUser =
+    localStorage.getItem("Extand_Class") &&
+    JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
+  const user = {
+    name: extUser?.Name,
+    email: extUser?.Email,
+    company: extUser?.Company,
+    phone: extUser?.Phone
+  };
+  const userDetails = JSON.parse(localStorage.getItem("userDetails")) || user;
+  // console.log("userDetails ", userDetails);
   const name =
-    userDetails && userDetails.name ? "first_name=" + userDetails.name : "";
+    userDetails && userDetails.name
+      ? "first_name=" + encodeURIComponent(userDetails.name)
+      : "";
   const email =
-    userDetails && userDetails.email ? "&email=" + userDetails.email : "";
+    userDetails && userDetails.email
+      ? "&email=" + encodeURIComponent(userDetails.email)
+      : "";
   const company =
     userDetails && userDetails.company
-      ? "&company_name=" + userDetails.company
+      ? "&company_name=" + encodeURIComponent(userDetails.company)
       : "";
   const phone =
-    userDetails && userDetails.phone ? "&mobile=" + userDetails.phone : "";
+    userDetails && userDetails.phone
+      ? "&mobile=" + encodeURIComponent(userDetails.phone)
+      : "";
+
   const details =
     "?shipping_country_code=US&billing_country_code=US&billing_state_code=CA&" +
     name +
@@ -68,61 +86,39 @@ const PlanSubscriptions = () => {
     <>
       <Title title={"Subscriptions"} />
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="flex items-center justify-center h-screen">
+          <Loader />
         </div>
       ) : (
-        <div
-          style={{
-            backgroundColor: "white",
-            overflowY: "auto",
-            maxHeight: "100%"
-          }}
-        >
-          <div id="monthlyPlans" className="block my-2">
+        <div className="overflow-y-auto max-h-full">
+          <div className="block my-2">
             <div className="flex flex-col justify-center items-center w-full">
-              <div className="mb-6 mt-2 flex flex-row border-[1px] p-2 border-gray-300 rounded text-sm">
-                <span
+              <div
+                role="tablist"
+                className="op-tabs op-tabs-boxed bg-base-100 my-2 shadow-lg transition-all"
+              >
+                <a
                   onClick={() => setYearlyVisible(false)}
-                  className={`${
-                    !yearlyVisible
-                      ? "bg-[#002862] text-white"
-                      : "bg-white text-black"
-                  } px-4 py-1 rounded cursor-pointer`}
+                  role="tab"
+                  className={`${!yearlyVisible ? "op-tab-active" : ""} op-tab`}
                 >
                   Monthly
-                </span>
-                <span
+                </a>
+                <a
                   onClick={() => setYearlyVisible(true)}
-                  className={`${
-                    yearlyVisible
-                      ? "bg-[#002862] text-white"
-                      : "bg-white text-black"
-                  } px-4 py-1 rounded cursor-pointer`}
+                  role="tab"
+                  className={`${yearlyVisible ? "op-tab-active" : ""} op-tab`}
                 >
                   Yearly (10% off)
-                </span>
+                </a>
               </div>
-              <ul className="flex flex-col md:flex-row h-full bg-white justify-center">
+              <ul className="op-card flex flex-col md:flex-row h-full bg-base-100 justify-center shadow-lg">
                 {plansArr.map((item) => (
                   <li
-                    className="flex flex-col md:my-0 text-center border-collapse border-[1px] border-gray-300 w-[260px]"
+                    className="flex flex-col text-center border-collapse border-[1px] border-gray-300 max-w-[250px]"
                     key={item.planName}
                   >
-                    <div className="p-2 flex flex-col justify-center items-center min-h-[320px]">
+                    <div className="p-2 flex flex-col justify-center items-center max-h-[310px]">
                       <h3 className="text-[#002862] uppercase">
                         {item.planName}
                       </h3>
@@ -133,7 +129,7 @@ const PlanSubscriptions = () => {
                           alt="freeimg"
                         />
                       </div>
-                      <div className="">
+                      <div>
                         <span className="text-3xl">
                           {item.currency && <small>{item.currency}</small>}
                           {yearlyVisible
@@ -143,13 +139,7 @@ const PlanSubscriptions = () => {
                         <p className="font-semibold pt-2 text-sm">
                           {yearlyVisible ? "Billed Yearly" : "Billed Monthly"}
                         </p>
-                        <div
-                          className={`${
-                            item.subtitle.length <= 32
-                              ? "w-[150px] h-[40px] text-center"
-                              : ""
-                          } text-sm text-center my-2`}
-                        >
+                        <div className="max-w-[250px] h-[40px] text-center text-sm my-2">
                           <div
                             style={{
                               textAlign: "center",
@@ -179,14 +169,14 @@ const PlanSubscriptions = () => {
                                 : item.url + details
                               : item.url
                           }
-                          className="bg-[#002862] w-full mt-1 text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
+                          className="bg-[#002862] w-full text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
                           target={item.target}
                         >
                           {item.btnText}
                         </NavLink>
                       ) : (
                         <button
-                          className="bg-[#002862] w-full mt-1 text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
+                          className="bg-[#002862] w-full text-white py-2 rounded uppercase hover:text-white cursor-pointer"
                           onClick={() => handleFreePlan()}
                         >
                           {item.btnText}
@@ -197,9 +187,7 @@ const PlanSubscriptions = () => {
                     <ul className="mx-1 p-3 text-left break-words text-sm list-none">
                       {item.benefits.map((subitem, index) => (
                         <li style={listItemStyle} key={index} className="m-1">
-                          <span style={{ position: "relative" }}>
-                            {subitem}
-                          </span>
+                          <span className="relative">{subitem}</span>
                         </li>
                       ))}
                     </ul>
@@ -207,37 +195,23 @@ const PlanSubscriptions = () => {
                 ))}
               </ul>
             </div>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-              }}
-              className="text-sm"
-            >
-              <hr
-                className={"border-[1px] border-gray-300 w-[20%]"}
-                style={{ color: "grey" }}
-              />
-              <span style={{ color: "grey" }} className="px-2 ">
-                or
-              </span>
-              <hr
-                className={"border-[1px] border-gray-300  w-[20%]"}
-                style={{ color: "grey" }}
-              />
+            <div className="text-sm flex justify-center items-center mt-3 mb-2">
+              <hr className="border-[2px] border-gray-350 w-[20%]" />
+              <span className="px-2 text-base-content cursor-default">or</span>
+              <hr className="border-[2px] border-gray-350 w-[20%]" />
             </div>
-            <div className="flex flex-col justify-center w-full items-center">
+            <div className="flex flex-col justify-center items-center">
               <h3 className="text-[#002862] mt-1 mb-2">
                 Host it yourself for free
               </h3>
-              <NavLink
-                to={"https://github.com/OpenSignLabs/OpenSign"}
-                className="bg-[#002862] w-[200px] text-center text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
-                target={"_blank"}
+              <div
+                className="op-btn op-btn-primary w-[200px]"
+                onClick={() =>
+                  openInNewTab("https://github.com/OpenSignLabs/OpenSign")
+                }
               >
                 Visit Github
-              </NavLink>
+              </div>
             </div>
           </div>
         </div>

apps/OpenSign/src/pages/Report.js

@@ -6,6 +6,8 @@ import reportJson from "../json/ReportJson";
 import { useParams } from "react-router-dom";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
+import TourContentWithBtn from "../primitives/TourContentWithBtn";
+import Loader from "../primitives/Loader";
 
 const Report = () => {
   const { id } = useParams();
@@ -18,6 +20,8 @@ const Report = () => {
   const [isNextRecord, setIsNextRecord] = useState(false);
   const [isMoreDocs, setIsMoreDocs] = useState(true);
   const [form, setForm] = useState("");
+  const [tourData, setTourData] = useState([]);
+  const [isDontShow, setIsDontShow] = useState(false);
   const abortController = new AbortController();
   const docPerPage = 10;
 
@@ -46,6 +50,9 @@ const Report = () => {
     // eslint-disable-next-line
   }, [isNextRecord]);
 
+  const handleDontShow = (isChecked) => {
+    setIsDontShow(isChecked);
+  };
   const getReportData = async (skipUserRecord = 0, limit = 200) => {
     // setIsLoader(true);
     const json = reportJson(id);
@@ -54,7 +61,7 @@ const Report = () => {
       setHeading(json.heading);
       setReportName(json.reportName);
       setForm(json.form);
-      setReportHelp(json?.helpMsg)
+      setReportHelp(json?.helpMsg);
       const currentUser = Parse.User.current().id;
 
       const headers = {
@@ -69,6 +76,42 @@ const Report = () => {
           headers: headers,
           signal: abortController.signal // is used to cancel fetch query
         });
+        if (id === "6TeaPr321t") {
+          const tourConfig = [
+            {
+              selector: "[data-tut=reactourFirst]",
+              content: () => (
+                <TourContentWithBtn
+                  message={
+                    "Click the 'Add' button to create a new template. Templates are reusable documents designed to quickly generate new documents with the same structure and varying signers. For example, an HR template for onboarding could have predefined roles like ‘HR Manager’ and ‘New Employee’. Each time you use the template, you can assign the ‘New Employee’ role to different incoming staff members, while the ‘HR Manager’ role remains constant, facilitating a seamless onboarding process for each recruit. "
+                  }
+                  isChecked={handleDontShow}
+                />
+              ),
+              position: "top",
+              style: { fontSize: "13px" }
+            }
+          ];
+
+          if (res.data.result && res.data.result?.length > 0) {
+            json.actions.map((data) => {
+              const newConfig = {
+                selector: `[data-tut="${data?.selector}"]`,
+                content: () => (
+                  <TourContentWithBtn
+                    message={data?.message}
+                    isChecked={handleDontShow}
+                  />
+                ),
+                position: "top",
+                style: { fontSize: "13px" }
+              };
+              tourConfig.push(newConfig);
+            });
+          }
+
+          setTourData(tourConfig);
+        }
         if (id === "4Hhwbp482K") {
           const listData = res.data?.result.filter((x) => x.Signers.length > 0);
           let arr = [];
@@ -106,12 +149,14 @@ const Report = () => {
           } else {
             setIsMoreDocs(false);
           }
-          setIsNextRecord(false);
-          setList((prevRecord) =>
-            prevRecord.length > 0
-              ? [...prevRecord, ...res.data.result]
-              : res.data.result
-          );
+          if (!res.data.result.error) {
+            setIsNextRecord(false);
+            setList((prevRecord) =>
+              prevRecord.length > 0
+                ? [...prevRecord, ...res.data.result]
+                : res.data.result
+            );
+          }
         }
         setIsLoader(false);
       } catch (err) {
@@ -129,21 +174,8 @@ const Report = () => {
     <>
       <Title title={reportName} />
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[100vh] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
         <>
@@ -159,6 +191,8 @@ const Report = () => {
               docPerPage={docPerPage}
               form={form}
               report_help={reporthelp}
+              tourData={tourData}
+              isDontShow={isDontShow}
             />
           ) : (
             <PageNotFound prefix={"Report"} />

apps/OpenSign/src/pages/SSOVerify.js

@@ -0,0 +1,384 @@
+import React, { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import Parse from "parse";
+import axios from "axios";
+import { appInfo } from "../constant/appinfo";
+import { isEnableSubscription } from "../constant/const";
+import { fetchSubscription } from "../constant/Utils";
+import { useDispatch } from "react-redux";
+import { showTenant } from "../redux/reducers/ShowTenant";
+import ModalUi from "../primitives/ModalUi";
+import Loader from "../primitives/Loader";
+
+const SSOVerify = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const [isModal, setIsModal] = useState(false);
+  const [message, setMessage] = useState("Verifying SSO...");
+  const [isLoader, setIsLoader] = useState(false);
+  const [userDetails, setUserDetails] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    Destination: "",
+    Company: ""
+  });
+
+  useEffect(() => {
+    linkUserWithSSO();
+    // eslint-disable-next-line
+  }, []);
+
+  // `linkUserWithSSO` is used to sign in or sign up a user using an SSO code and check if the user is present in the extended class
+  const linkUserWithSSO = async () => {
+    const param = new URLSearchParams(location.search);
+    const code = param?.get("code");
+    const state = param?.get("state");
+    try {
+      // The `ssosign` cloud function is used to sign in or sign up a user
+      const ssosign = await Parse.Cloud.run("ssosign", {
+        code: code,
+        email: state
+      });
+      localStorage.setItem("accesstoken", ssosign.sessiontoken);
+      // `checkExtUser` checks if the user is present in the extended class `contracts_Users` and if not, initiates the new user flow
+      await checkExtUser(ssosign);
+    } catch (err) {
+      setMessage("Error: " + err.message);
+      console.log("err", err.message);
+    }
+  };
+  const checkExtUser = async (ssosign) => {
+    const params = { email: ssosign?.email };
+    try {
+      // `isextenduser` checks if the current user is present in the extended class
+      const extRes = await Parse.Cloud.run("isextenduser", params);
+      if (extRes?.isUserExist) {
+        // `getUserDetails` retrieves the current user's details from the extended class
+        const extRes = await Parse.Cloud.run("getUserDetails", params);
+        if (ssosign && ssosign.sessiontoken) {
+          const LocalUserDetails = {
+            name: extRes.Name,
+            email: extRes.email,
+            phone: extRes?.get("Phone") || "",
+            company: extRes.get("Company")
+          };
+          localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
+          thirdpartyLoginfn(ssosign.sessiontoken);
+        }
+      } else {
+        setIsModal(true);
+        setUserDetails((prev) => ({
+          ...prev,
+          name: ssosign.name,
+          email: ssosign.email,
+          phone: ssosign?.phone || ""
+        }));
+      }
+    } catch (err) {
+      console.log("Err in isextenduser or getuserdetails cloud function", err);
+      setMessage("Error: " + err.message);
+    }
+  };
+  // `handleSubmitbtn` is used to create a user in the extended class
+  const handleSubmitbtn = async (e) => {
+    e.preventDefault();
+    setIsLoader(true);
+    let phone;
+    if (userDetails?.phone) {
+      phone = validateInput(userDetails?.phone);
+    } else {
+      phone = true;
+    }
+    if (userDetails.Destination && userDetails.Company && phone) {
+      const payload = { sessionToken: localStorage.getItem("accesstoken") };
+      if (payload && payload.sessionToken) {
+        const params = {
+          userDetails: {
+            name: userDetails.name,
+            email: userDetails.email,
+            phone: userDetails?.phone || "",
+            role: "contracts_User",
+            company: userDetails.Company,
+            jobTitle: userDetails.Destination
+          }
+        };
+        try {
+          const userSignUp = await Parse.Cloud.run("usersignup", params);
+          if (userSignUp && userSignUp.sessionToken) {
+            const LocalUserDetails = params.userDetails;
+            localStorage.setItem(
+              "userDetails",
+              JSON.stringify(LocalUserDetails)
+            );
+            await thirdpartyLoginfn(userSignUp.sessionToken);
+            setIsLoader(false);
+          } else {
+            alert(userSignUp.message);
+            setIsLoader(false);
+          }
+        } catch (err) {
+          console.log("error in usersignup", err);
+          localStorage.removeItem("accesstoken");
+          alert("Something went wrong.");
+          setIsLoader(false);
+        }
+      } else {
+        localStorage.removeItem("accesstoken");
+        alert("Internal server error.");
+        setIsLoader(false);
+      }
+    } else {
+      alert("Please fill required details correctly.");
+      setIsLoader(false);
+    }
+  };
+  // `thirdpartyLoginfn` is used to save necessary parameters locally for the logged-in user
+  const thirdpartyLoginfn = async (sessionToken) => {
+    const baseUrl = localStorage.getItem("baseUrl");
+    const parseAppId = localStorage.getItem("parseAppId");
+    try {
+      const validUser = await Parse.User.become(sessionToken);
+      if (validUser) {
+        localStorage.setItem("accesstoken", sessionToken);
+        const _user = JSON.parse(JSON.stringify(validUser));
+        localStorage.setItem("UserInformation", JSON.stringify(_user));
+        if (_user.ProfilePic) {
+          localStorage.setItem("profileImg", _user.ProfilePic);
+        } else {
+          localStorage.setItem("profileImg", "");
+        }
+        // Check extended class user role and tenentId
+        try {
+          let userRoles = [];
+          const userSettings = appInfo.settings;
+          //Get Current user roles
+          const url = `${baseUrl}functions/UserGroups`;
+          const headers = {
+            "Content-Type": "application/json",
+            "X-Parse-Application-Id": parseAppId,
+            sessionToken: _user.sessionToken
+          };
+          const body = { appname: appInfo.appname };
+          const UserGroupsRes = await axios.post(url, JSON.stringify(body), {
+            headers: headers
+          });
+          userRoles = (UserGroupsRes.data && UserGroupsRes.data.result) || [];
+          if (userRoles) {
+            let _currentRole = "";
+            const excludeRoles = ["contracts_Guest", `contracts_appeditor`];
+            const filteredRole = userRoles.filter(
+              (x) => !excludeRoles.includes(x)
+            );
+            if (filteredRole?.length > 1) {
+              console.log("user has two roles");
+              // _currentRole = filteredRole.filter((x) => x === "contracts_User");
+            } else {
+              _currentRole = filteredRole?.[0] || "";
+            }
+            if (_currentRole) {
+              const roleSetting = userSettings?.find(
+                (setting) => setting.role === _currentRole
+              );
+              const redirectUrl =
+                location?.state?.from ||
+                `/${roleSetting.pageType}/${roleSetting.pageId}`;
+              const _role = _currentRole.replace(`${appInfo.appname}_`, "");
+              localStorage.setItem("_user_role", _role);
+              // Get TenentID from Extendend Class
+              localStorage.setItem(
+                "extended_class",
+                roleSetting.extended_class
+              );
+              try {
+                const extUser = await Parse.Cloud.run("getUserDetails", {
+                  email: _user.email
+                });
+                if (extUser) {
+                  const _extUser = JSON.parse(JSON.stringify(extUser));
+                  localStorage.setItem("userEmail", _extUser.Email);
+                  localStorage.setItem("username", _extUser.Name);
+                  localStorage.setItem("scriptId", true);
+                  let tenentInfo = [];
+                  const results = [extUser];
+                  if (results) {
+                    let extendedInfo_stringify = JSON.stringify(results);
+                    localStorage.setItem(
+                      "Extand_Class",
+                      extendedInfo_stringify
+                    );
+                    if (_extUser.TenantId) {
+                      const obj = {
+                        tenentId: _extUser.TenantId.objectId,
+                        tenentName: _extUser.TenantId.TenantName || ""
+                      };
+                      localStorage.setItem("TenantId", obj.tenentId);
+                      tenentInfo.push(obj);
+                      dispatch(showTenant(obj.tenentName || ""));
+                      localStorage.setItem("TenantName", obj.tenentName || "");
+                    }
+                    localStorage.setItem("PageLanding", roleSetting.pageId);
+                    localStorage.setItem("defaultmenuid", roleSetting.menuId);
+                    localStorage.setItem("pageType", roleSetting.pageType);
+                    if (isEnableSubscription) {
+                      const res = await fetchSubscription();
+                      const plan = res.plan;
+                      const billingDate = res.billingDate;
+                      if (plan === "freeplan") {
+                        navigate(redirectUrl);
+                      } else if (billingDate) {
+                        if (new Date(billingDate) > new Date()) {
+                          localStorage.removeItem("userDetails");
+                          navigate(redirectUrl);
+                        } else {
+                          navigate(`/subscription`, {
+                            replace: true
+                          });
+                        }
+                      } else {
+                        navigate(`/subscription`, {
+                          replace: true
+                        });
+                      }
+                    } else {
+                      navigate(redirectUrl);
+                    }
+                  }
+                }
+              } catch (err) {
+                alert("user not exist.");
+                setMessage("Error: User not exist.");
+                console.log("err in get extUser", err);
+              }
+            } else {
+              alert("Role does not exists.");
+              setMessage("Error: Role does not exists.");
+            }
+          } else {
+            alert("Role does not exists.");
+            setMessage("Error: Role does not exists.");
+          }
+        } catch (err) {
+          console.log("err in usergroups", err);
+        }
+      }
+    } catch (err) {
+      console.log("Err in become method", err);
+    }
+  };
+  // `handleCloseModal` is triggered when the user wants to close the new user flow modal
+  const handleCloseModal = () => {
+    setIsModal(false);
+    if (Parse?.User?.current()) {
+      Parse.User.logOut();
+    }
+  };
+
+  // `validateInput` is used to verify the phone pattern
+  function validateInput(input) {
+    if (input) {
+      const pattern = /^(?!.*\+.*\+)[\d+-]*$/;
+      return pattern.test(input);
+    } else {
+      return true;
+    }
+  }
+  return (
+    <div>
+      <div className="w-full h-screen flex flex-col justify-center items-center text-sm md:text-xl ">
+        {message === "Verifying SSO..." && <Loader />}
+        <div className="text-base-content">{message}</div>
+      </div>
+      <ModalUi isOpen={isModal} title="Additional Info" showClose={false}>
+        <div className="relative">
+          {isLoader && (
+            <div className="absolute w-full h-full bg-black bg-opacity-25 flex justify-center items-center">
+              <Loader />
+            </div>
+          )}
+          <form
+            className="px-4 py-3 text-base-content"
+            onSubmit={handleSubmitbtn}
+          >
+            <div className="mb-3">
+              <label htmlFor="Company" className="block text-xs font-semibold">
+                Phone <span className="text-[13px] text-[red]">*</span>
+              </label>
+              <input
+                type="tel"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                id="Phone"
+                value={userDetails.phone}
+                onChange={(e) =>
+                  setUserDetails({
+                    ...userDetails,
+                    phone: e.target.value
+                  })
+                }
+                disabled={isLoader}
+                required
+              />
+              <p className="text-[10px] text-[red] ml-2">
+                {!validateInput(userDetails.phone) && "Invalid phone value"}
+              </p>
+            </div>
+            <div className="mb-3">
+              <label htmlFor="Company" className="block text-xs font-semibold">
+                Company <span className="text-[13px] text-[red]">*</span>
+              </label>
+              <input
+                type="text"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                id="Company"
+                value={userDetails.Company}
+                onChange={(e) =>
+                  setUserDetails({
+                    ...userDetails,
+                    Company: e.target.value
+                  })
+                }
+                disabled={isLoader}
+                required
+              />
+            </div>
+            <div className="mb-3">
+              <label htmlFor="JobTitle" className="block text-xs font-semibold">
+                Job Title
+                <span className="text-[13px] text-[red]">*</span>
+              </label>
+              <input
+                type="text"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                id="JobTitle"
+                value={userDetails.Destination}
+                onChange={(e) =>
+                  setUserDetails({
+                    ...userDetails,
+                    Destination: e.target.value
+                  })
+                }
+                disabled={isLoader}
+                required
+              />
+            </div>
+            <div className="mt-4">
+              <button type="submit" className="op-btn op-btn-primary">
+                Login
+              </button>
+              <button
+                type="button"
+                className="op-btn op-btn-ghost ml-2"
+                onClick={handleCloseModal}
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      </ModalUi>
+    </div>
+  );
+};
+
+export default SSOVerify;

apps/OpenSign/src/pages/Signup.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
 import Title from "../components/Title";
-import { useNavigate, NavLink, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
 import Alert from "../primitives/Alert";
@@ -11,6 +11,8 @@ import { useDispatch } from "react-redux";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
 import { showTenant } from "../redux/reducers/ShowTenant";
 import { isEnableSubscription } from "../constant/const";
+import { getAppLogo, openInNewTab } from "../constant/Utils";
+import Loader from "../primitives/Loader";
 const Signup = () => {
   const { width } = useWindowSize();
   const navigate = useNavigate();
@@ -22,6 +24,7 @@ const Signup = () => {
   const [email, setEmail] = useState("");
   const [company, setCompany] = useState("");
   const [jobTitle, setJobTitle] = useState("");
+  const [image, setImage] = useState();
   const [state, setState] = useState({
     loading: false,
     alertType: "success",
@@ -31,9 +34,8 @@ const Signup = () => {
   const [lengthValid, setLengthValid] = useState(false);
   const [caseDigitValid, setCaseDigitValid] = useState(false);
   const [specialCharValid, setSpecialCharValid] = useState(false);
-
+  const [isAuthorize, setIsAuthorize] = useState(false);
   const togglePasswordVisibility = () => setShowPassword(!showPassword);
-  const image = appInfo.applogo;
 
   const clearStorage = async () => {
     if (Parse.User.current()) {
@@ -469,9 +471,23 @@ const Signup = () => {
   };
   useEffect(() => {
     dispatch(fetchAppInfo());
+    saveLogo();
     // eslint-disable-next-line
   }, []);
 
+  const saveLogo = async () => {
+    if (isEnableSubscription) {
+      const logo = await getAppLogo();
+      if (logo) {
+        setImage(logo);
+      } else {
+        setImage(appInfo?.applogo || undefined);
+      }
+    } else {
+      setImage(appInfo?.applogo || undefined);
+    }
+  };
+
   const handlePasswordChange = (e) => {
     const newPassword = e.target.value;
     setPassword(newPassword);
@@ -486,78 +502,58 @@ const Signup = () => {
     setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword));
   };
   return (
-    <div className="bg-white">
+    <div className="">
       {state.loading && (
-        <div
-          style={{
-            position: "fixed",
-            width: "100vw",
-            height: "100vh",
-            backgroundColor: "rgba(0,0,0,0.2)",
-            top: 0,
-            left: 0,
-            zIndex: 2
-          }}
-        >
-          <div
-            style={{
-              position: "fixed",
-              fontSize: "50px",
-              color: "#3ac9d6",
-              top: "50%",
-              left: "45%"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-50">
+          <Loader />
         </div>
       )}
-
       <Title title={"Signup page"} />
-
       {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">
-              <img src={image} width="100%" alt="" />
+        <div className="md:p-10 lg:p-16">
+          <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
+            <div className="w-[250px] h-[66px] inline-block overflow-hidden">
+              {image && (
+                <img src={image} className="object-contain h-full" alt="logo" />
+              )}
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
-              <div className="">
+              <div>
                 <form onSubmit={handleSubmit}>
                   <h2 className="text-[30px] mt-6">Create Account !</h2>
-                  <div className="outline outline-1 outline-slate-300/50 shadow-md rounded my-4">
+                  <div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
                     <div className="px-6 py-4 text-xs">
                       <label className="block ">
-                        Name{" "}
-                        <span style={{ color: "red", fontSize: 13 }}>*</span>
+                        Name <span className="text-[red] text-[13px]">*</span>
                       </label>
                       <input
                         type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={name}
                         onChange={(e) => setName(e.target.value)}
                         required
                       />
                       <hr className="my-2 border-none" />
                       <label>
-                        Email{" "}
-                        <span style={{ color: "red", fontSize: 13 }}>*</span>
+                        Email <span className="text-[red] text-[13px]">*</span>
                       </label>
                       <input
                         id="email"
-                        type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        type="email"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={email}
-                        onChange={(e) => setEmail(e.target.value)}
+                        onChange={(e) =>
+                          setEmail(e.target.value?.toLowerCase())
+                        }
                         required
                       />
                       <hr className="my-2 border-none" />
                       <label>
-                        Phone{" "}
-                        <span style={{ color: "red", fontSize: 13 }}>*</span>
+                        Phone <span className="text-[red] text-[13px]">*</span>
                       </label>
                       <input
                         type="tel"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={phone}
                         onChange={(e) => setPhone(e.target.value)}
                         required
@@ -565,11 +561,11 @@ const Signup = () => {
                       <hr className="my-2 border-none" />
                       <label>
                         Company{" "}
-                        <span style={{ color: "red", fontSize: 13 }}>*</span>
+                        <span className="text-[red] text-[13px]">*</span>
                       </label>
                       <input
                         type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={company}
                         onChange={(e) => setCompany(e.target.value)}
                         required
@@ -577,11 +573,11 @@ const Signup = () => {
                       <hr className="my-2 border-none" />
                       <label>
                         Job Title{" "}
-                        <span style={{ color: "red", fontSize: 13 }}>*</span>
+                        <span className="text-[red] text-[13px]">*</span>
                       </label>
                       <input
                         type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={jobTitle}
                         onChange={(e) => setJobTitle(e.target.value)}
                         required
@@ -589,21 +585,19 @@ const Signup = () => {
                       <hr className="my-2 border-none" />
                       <label>
                         Password{" "}
-                        <span style={{ color: "red", fontSize: 13 }}>*</span>
+                        <span className="text-[red] text-[13px]">*</span>
                       </label>
                       <div className="relative">
                         <input
                           type={showPassword ? "text" : "password"}
-                          className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                           name="password"
                           value={password}
                           onChange={(e) => handlePasswordChange(e)}
                           required
                         />
                         <span
-                          className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${
-                            showPassword ? "text-[#007bff]" : "text-black"
-                          }`}
+                          className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer text-base-content`}
                           onClick={togglePasswordVisibility}
                         >
                           {showPassword ? (
@@ -641,34 +635,62 @@ const Signup = () => {
                             {specialCharValid ? "✓" : "✗"} Password should
                             contain special character
                           </p>
-                          {/* </>
-                          )} */}
                         </div>
                       )}
+                      <div className="mt-2.5 ml-1 flex flex-row items-center">
+                        <input
+                          type="checkbox"
+                          className="op-checkbox op-checkbox-sm"
+                          id="termsandcondition"
+                          checked={isAuthorize}
+                          onChange={(e) => setIsAuthorize(e.target.checked)}
+                          required
+                        />
+                        <label
+                          className="text-xs cursor-pointer ml-1 mb-0"
+                          htmlFor="termsandcondition"
+                        >
+                          I agree to the
+                        </label>
+                        <span
+                          className="underline cursor-pointer ml-1"
+                          onClick={() =>
+                            openInNewTab(
+                              "https://www.opensignlabs.com/terms-and-conditions"
+                            )
+                          }
+                        >
+                          Terms of Service
+                        </span>
+                        <span>.</span>
+                      </div>
                     </div>
                   </div>
-                  <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold mt-2">
                     <button
                       type="submit"
-                      className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow uppercase"
+                      className="op-btn op-btn-primary"
                       disabled={state.loading}
                     >
                       {state.loading ? "Loading..." : "Register"}
                     </button>
-                    <NavLink
-                      className="rounded-sm cursor-pointer bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] w-full py-3 shadow uppercase"
-                      to={location.search ? "/" + location.search : "/"}
-                      style={width < 768 ? { textAlign: "center" } : {}}
+                    <button
+                      type="button"
+                      className="op-btn op-btn-secondary"
+                      disabled={state.loading}
+                      onClick={() =>
+                        navigate(location.search ? "/" + location.search : "/")
+                      }
                     >
                       Login
-                    </NavLink>
+                    </button>
                   </div>
                 </form>
               </div>
               {width >= 768 && (
                 <div className="self-center">
                   <div className="mx-auto md:w-[300px] lg:w-[400px] xl:w-[500px]">
-                    <img src={login_img} alt="bisec" width="100%" />
+                    <img src={login_img} alt="loader" width="100%" />
                   </div>
                 </div>
               )}
@@ -677,16 +699,9 @@ const Signup = () => {
           <Alert type={state.alertType}>{state.alertMsg}</Alert>
         </div>
       ) : (
-        <div
-          style={{
-            position: "fixed",
-            fontSize: "50px",
-            color: "#3ac9d6",
-            top: "50%",
-            left: "45%"
-          }}
-          className="loader-37"
-        ></div>
+        <div className="fixed w-full h-full flex justify-center items-center z-50">
+          <Loader />
+        </div>
       )}
     </div>
   );

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -1,10 +1,11 @@
 import React, { useState, useRef, useEffect } from "react";
 import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
-import { themeColor } from "../constant/const";
+import Parse from "parse";
+import { isEnableSubscription } from "../constant/const";
+import Confetti from "react-confetti";
 import axios from "axios";
-import Loader from "../primitives/LoaderWithMsg";
-import loader from "../assets/images/loader2.gif";
+import LoaderWithMsg from "../primitives/LoaderWithMsg";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -26,7 +27,13 @@ import {
   contactBook,
   randomId,
   getDate,
-  textWidget
+  textWidget,
+  getTenantDetails,
+  checkIsSubscribed,
+  convertPdfArrayBuffer,
+  fetchImageBase64,
+  changeImageWH,
+  handleSendOTP
 } from "../constant/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -39,7 +46,8 @@ import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import Title from "../components/Title";
 import ModalUi from "../primitives/ModalUi";
 import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
-
+import VerifyEmail from "../components/pdf/VerifyEmail";
+import Loader from "../primitives/Loader";
 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
   const [pdfDetails, setPdfDetails] = useState([]);
@@ -62,12 +70,10 @@ function SignYourSelf() {
   const [dragKey, setDragKey] = useState();
   const [signKey, setSignKey] = useState();
   const [imgWH, setImgWH] = useState({});
-  const [isCeleb, setIsCeleb] = useState(false);
   const [pdfNewWidth, setPdfNewWidth] = useState();
   const [pdfOriginalWidth, setPdfOriginalWidth] = useState();
   const [successEmail, setSuccessEmail] = useState(false);
   const imageRef = useRef(null);
-  const [documentStatus, setDocumentStatus] = useState({ isCompleted: false });
   const [myInitial, setMyInitial] = useState("");
   const [isInitial, setIsInitial] = useState(false);
   const [isUiLoading, setIsUiLoading] = useState(false);
@@ -87,6 +93,7 @@ function SignYourSelf() {
   const [containerWH, setContainerWH] = useState({});
   const [isPageCopy, setIsPageCopy] = useState(false);
   const [selectWidgetId, setSelectWidgetId] = useState("");
+  const [otpLoader, setOtpLoader] = useState(false);
   const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
     status: false
   });
@@ -100,6 +107,13 @@ function SignYourSelf() {
   const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
   const [isDontShow, setIsDontShow] = useState(false);
   const [extUserId, setExtUserId] = useState("");
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [isCelebration, setIsCelebration] = useState(false);
+  const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
+  const [activeMailAdapter, setActiveMailAdapter] = useState("");
+  const [isEmailVerified, setIsEmailVerified] = useState(true);
+  const [isVerifyModal, setIsVerifyModal] = useState(false);
+  const [otp, setOtp] = useState("");
   const divRef = useRef(null);
   const nodeRef = useRef(null);
   const [, drop] = useDrop({
@@ -188,12 +202,22 @@ function SignYourSelf() {
     if (documentData && documentData.length > 0) {
       setPdfDetails(documentData);
       setExtUserId(documentData[0]?.ExtUserPtr?.objectId);
+      const url = documentData[0] && documentData[0]?.URL;
+      if (url) {
+        //convert document url in array buffer format to use embed widgets in pdf using pdf-lib
+        const arrayBuffer = await convertPdfArrayBuffer(url);
+        if (arrayBuffer === "Error") {
+          setHandleError("Error: Something went wrong!");
+        } else {
+          setPdfArrayBuffer(arrayBuffer);
+        }
+      } else {
+        setHandleError("Error: Something went wrong!");
+      }
+
       isCompleted = documentData[0].IsCompleted && documentData[0].IsCompleted;
       if (isCompleted) {
-        const docStatus = {
-          isCompleted: isCompleted
-        };
-        setDocumentStatus(docStatus);
+        setIsCompleted(true);
         setPdfUrl(documentData[0].SignedUrl);
         const alreadySign = {
           status: true,
@@ -205,8 +229,12 @@ function SignYourSelf() {
           setIsUiLoading(false);
           setIsSignPad(false);
           setIsEmail(true);
+          setIsCelebration(true);
           setXyPostion([]);
           setSignBtnPosition([]);
+          setTimeout(() => {
+            setIsCelebration(false);
+          }, 5000);
         }
       }
     } else if (
@@ -256,10 +284,15 @@ function SignYourSelf() {
         setHandleError("Error: Something went wrong!");
         setIsLoading(loadObj);
       });
-
     const contractUsersRes = await contractUsers(jsonSender.email);
-
-    if (contractUsersRes[0] && contractUsersRes.length > 0) {
+    if (contractUsersRes === "Error: Something went wrong!") {
+      const loadObj = {
+        isLoad: false
+      };
+      setHandleError("Error: Something went wrong!");
+      setIsLoading(loadObj);
+    } else if (contractUsersRes[0] && contractUsersRes.length > 0) {
+      setActiveMailAdapter(contractUsersRes[0]?.active_mail_adapter);
       setContractName("_Users");
       setSignerUserId(contractUsersRes[0].objectId);
       const tourstatuss =
@@ -279,12 +312,6 @@ function SignYourSelf() {
         isLoad: false
       };
       setIsLoading(loadObj);
-    } else if (contractUsersRes === "Error: Something went wrong!") {
-      const loadObj = {
-        isLoad: false
-      };
-      setHandleError("Error: Something went wrong!");
-      setIsLoading(loadObj);
     } else if (contractUsersRes.length === 0) {
       const contractContactBook = await contactBook(jsonSender.objectId);
       if (contractContactBook && contractContactBook.length > 0) {
@@ -434,13 +461,13 @@ function SignYourSelf() {
         Width: widgetTypeExist
           ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth
           : dragTypeValue === "initials"
-          ? defaultWidthHeight(dragTypeValue).width
-          : "",
+            ? defaultWidthHeight(dragTypeValue).width
+            : "",
         Height: widgetTypeExist
           ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight
           : dragTypeValue === "initials"
-          ? defaultWidthHeight(dragTypeValue).height
-          : "",
+            ? defaultWidthHeight(dragTypeValue).height
+            : "",
         options: addWidgetOptions(dragTypeValue)
       };
 
@@ -518,89 +545,213 @@ function SignYourSelf() {
     setSignKey(key);
   };
 
+  //`handleResend` function is used to resend otp for email verification
+  const handleResend = async (e) => {
+    e.preventDefault();
+    setOtpLoader(true);
+    await handleSendOTP(Parse.User.current().getEmail());
+    setOtpLoader(false);
+    alert("OTP sent on you email");
+  };
+  //`handleVerifyEmail` function is used to verify email with otp
+  const handleVerifyEmail = async (e) => {
+    e.preventDefault();
+    setOtpLoader(true);
+    try {
+      const resEmail = await Parse.Cloud.run("verifyemail", {
+        otp: otp,
+        email: Parse.User.current().getEmail()
+      });
+      if (resEmail?.message === "Email is verified.") {
+        setIsEmailVerified(true);
+      } else if (resEmail?.message === "Email is already verified.") {
+        setIsEmailVerified(true);
+      }
+      setOtp("");
+      alert(resEmail.message);
+      setIsVerifyModal(false);
+      // handleRecipientSign();
+    } catch (error) {
+      alert(error.message);
+    } finally {
+      setOtpLoader(false);
+    }
+  };
+  //`handleVerifyBtn` function is used to send otp on user mail
+  const handleVerifyBtn = async () => {
+    setIsVerifyModal(true);
+    await handleSendOTP(Parse.User.current().getEmail());
+  };
   //function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url
   async function embedWidgetsData() {
-    let showAlert = false;
-
-    for (let i = 0; i < xyPostion?.length; i++) {
-      const requiredWidgets = xyPostion[i].pos.filter(
-        (position) => position.type !== "checkbox"
-      );
-      if (requiredWidgets && requiredWidgets?.length > 0) {
-        let checkSigned;
-        for (let i = 0; i < requiredWidgets?.length; i++) {
-          checkSigned = requiredWidgets[i]?.options?.response;
-          if (!checkSigned) {
-            const checkSignUrl = requiredWidgets[i]?.pos?.SignUrl;
-            let checkDefaultSigned = requiredWidgets[i]?.options?.defaultValue;
-            if (!checkSignUrl) {
-              if (!checkDefaultSigned) {
-                if (!showAlert) {
-                  showAlert = true;
+    //check current user email is verified or not
+    const currentUser = JSON.parse(JSON.stringify(Parse.User.current()));
+    let isEmailVerified;
+    isEmailVerified = currentUser?.emailVerified;
+    if (isEmailVerified) {
+      setIsEmailVerified(isEmailVerified);
+    } else {
+      try {
+        const userQuery = new Parse.Query(Parse.User);
+        const user = await userQuery.get(currentUser.objectId, {
+          sessionToken: localStorage.getItem("accesstoken")
+        });
+        if (user) {
+          isEmailVerified = user?.get("emailVerified");
+          setIsEmailVerified(isEmailVerified);
+        }
+      } catch (e) {
+        setHandleError("Error: Something went wrong!");
+      }
+    }
+    if (isEmailVerified) {
+      let showAlert = false,
+        isSignatureExist = false;
+      try {
+        for (let i = 0; i < xyPostion?.length; i++) {
+          const requiredWidgets = xyPostion[i].pos.filter(
+            (position) => position.type !== "checkbox"
+          );
+          if (requiredWidgets && requiredWidgets?.length > 0) {
+            let checkSigned;
+            for (let i = 0; i < requiredWidgets?.length; i++) {
+              checkSigned = requiredWidgets[i]?.options?.response;
+              if (!checkSigned) {
+                const checkSignUrl = requiredWidgets[i]?.pos?.SignUrl;
+                let checkDefaultSigned =
+                  requiredWidgets[i]?.options?.defaultValue;
+                if (!checkSignUrl) {
+                  if (!checkDefaultSigned) {
+                    if (!showAlert) {
+                      showAlert = true;
+                    }
+                  }
                 }
               }
             }
           }
+          //condition to check exist signature widget or not
+          if (!isSignatureExist) {
+            isSignatureExist = xyPostion[i].pos.some(
+              (data) => data?.type === "signature"
+            );
+          }
+        }
+        if (xyPostion.length === 0 || !isSignatureExist) {
+          setIsAlert({
+            header: "Fields required",
+            isShow: true,
+            alertMessage:
+              "Please ensure there's at least one signature widget added"
+          });
+          return;
+        } else if (showAlert) {
+          setIsAlert({
+            isShow: true,
+            alertMessage:
+              "Please ensure all field is accurately filled and meets all requirements."
+          });
+          return;
+        } else {
+          setIsUiLoading(true);
+          const existingPdfBytes = pdfArrayBuffer;
+          // Load a PDFDocument from the existing PDF bytes
+          try {
+            const pdfDoc = await PDFDocument.load(existingPdfBytes);
+            const isSignYourSelfFlow = true;
+            const extUserPtr = pdfDetails[0].ExtUserPtr;
+            const HeaderDocId = extUserPtr?.HeaderDocId;
+            //embed document's object id to all pages in pdf document
+            if (!HeaderDocId) {
+              await embedDocId(pdfDoc, documentId, allPages);
+            }
+            //embed multi signature in pdf
+            const pdfBytes = await multiSignEmbed(
+              xyPostion,
+              pdfDoc,
+              pdfOriginalWidth,
+              isSignYourSelfFlow,
+              containerWH
+            );
+            // console.log("pdf", pdfBytes);
+            //function for call to embed signature in pdf and get digital signature pdf
+            await signPdfFun(pdfBytes, documentId);
+          } catch (err) {
+            setIsUiLoading(false);
+            if (err && err.message.includes("is encrypted.")) {
+              setIsAlert({
+                isShow: true,
+                alertMessage: `Currently encrypted pdf files are not supported.`
+              });
+            } else {
+              console.log("err in signing", err);
+              setIsAlert({
+                isShow: true,
+                alertMessage: `Something went wrong.`
+              });
+            }
+          }
+        }
+      } catch (err) {
+        console.log("err in embedselfsign ", err);
+        setIsUiLoading(false);
+        setIsAlert({
+          isShow: true,
+          alertMessage: "something went wrong, please try again later."
+        });
+      }
+    }
+  }
+  //function for get digital signature
+  const signPdfFun = async (base64Url, documentId) => {
+    let isCustomCompletionMail = false;
+    const getIsSubscribe = await checkIsSubscribed();
+    const tenantDetails = await getTenantDetails(jsonSender.objectId);
+    if (tenantDetails && tenantDetails === "user does not exist!") {
+      alert("User does not exist");
+    } else {
+      if (
+        tenantDetails?.CompletionBody &&
+        tenantDetails?.CompletionSubject &&
+        (!isEnableSubscription || getIsSubscribe)
+      ) {
+        isCustomCompletionMail = true;
+      }
+    }
+    // below for loop is used to get first signature of user to send if to signpdf
+    // for adding it in completion certificate
+    let getSignature;
+    for (let item of xyPostion) {
+      if (!getSignature) {
+        const typeExist = item.pos.some((data) => data?.type);
+        if (typeExist) {
+          getSignature = item.pos.find((data) => data?.type === "signature");
+        } else {
+          getSignature = item.pos.find((data) => !data.isStamp);
         }
       }
     }
-    if (xyPostion.length === 0) {
-      setIsAlert({
-        isShow: true,
-        alertMessage: "Please complete your signature!"
-      });
-      return;
-    } else if (showAlert) {
-      setIsAlert({
-        isShow: true,
-        alertMessage: "Please complete your signature!"
-      });
-      return;
-    } else {
-      setIsCeleb(true);
-      setTimeout(() => {
-        setIsCeleb(false);
-      }, 3000);
-      setIsUiLoading(true);
-      const url = pdfDetails[0] && pdfDetails[0].URL;
-
-      const existingPdfBytes = await fetch(url).then((res) =>
-        res.arrayBuffer()
-      );
-
-      // Load a PDFDocument from the existing PDF bytes
-      const pdfDoc = await PDFDocument.load(existingPdfBytes, {
-        ignoreEncryption: true
-      });
-
-      const flag = true;
-
-      const extUserPtr = pdfDetails[0].ExtUserPtr;
-      const HeaderDocId = extUserPtr?.HeaderDocId;
-
-      //embed document's object id to all pages in pdf document
-      if (!HeaderDocId) {
-        await embedDocId(pdfDoc, documentId, allPages);
+    let base64Sign = getSignature.SignUrl;
+    //check https type signature (default signature exist) then convert in base64
+    const isUrl = base64Sign.includes("https");
+    if (isUrl) {
+      try {
+        base64Sign = await fetchImageBase64(base64Sign);
+      } catch (e) {
+        console.log("error", e);
       }
-      //embed multi signature in pdf
-      const pdfBytes = await multiSignEmbed(
-        xyPostion,
-        pdfDoc,
-        pdfOriginalWidth,
-        flag,
-        containerWH
-      );
-      // 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) => {
+    //change image width and height to 104/44 in png base64
+    const getNewse64 = await changeImageWH(base64Sign);
+    //remove suffiix of base64
+    const suffixbase64 = getNewse64 && getNewse64.split(",").pop();
+
     let singleSign = {
       pdfFile: base64Url,
-      docId: documentId
+      docId: documentId,
+      isCustomCompletionMail: isCustomCompletionMail,
+      mailProvider: activeMailAdapter,
+      signature: suffixbase64
     };
 
     await axios
@@ -608,7 +759,8 @@ function SignYourSelf() {
         headers: {
           "Content-Type": "application/json",
           "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          sessionToken: localStorage.getItem("accesstoken")
+          // sessionToken: localStorage.getItem("accesstoken")
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
         }
       })
       .then((Listdata) => {
@@ -940,38 +1092,41 @@ function SignYourSelf() {
     <DndProvider backend={HTML5Backend}>
       <Title title={"Self Sign"} />
       {isLoading.isLoad ? (
-        <Loader isLoading={isLoading} />
+        <LoaderWithMsg isLoading={isLoading} />
       ) : handleError ? (
         <HandleError handleError={handleError} />
       ) : (
         <div>
           {isUiLoading && (
-            <div
-              style={{
-                position: "absolute",
-                height: "100vh",
-                width: "100%",
-                display: "flex",
-                justifyContent: "center",
-                flexDirection: "column",
-                alignItems: "center",
-                zIndex: "999",
-                backgroundColor: "#e6f2f2",
-                opacity: 0.8
-              }}
-            >
-              <img
-                alt="no img"
-                src={loader}
-                style={{ width: "100px", height: "100px" }}
-              />
-              <span style={{ fontSize: "13px", fontWeight: "bold" }}>
+            <div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-start bg-[#e6f2f2] bg-opacity-80">
+              <Loader />
+              <span className="font-bold text-[13px]">
                 This might take some time
               </span>
             </div>
           )}
+          {isCelebration && (
+            <div className="relative z-[999]">
+              <Confetti width={window.innerWidth} height={window.innerHeight} />
+            </div>
+          )}
 
-          <div className="signatureContainer" ref={divRef}>
+          <div
+            className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"
+            ref={divRef}
+          >
+            {!isEmailVerified && (
+              <VerifyEmail
+                isVerifyModal={isVerifyModal}
+                setIsVerifyModal={setIsVerifyModal}
+                handleVerifyEmail={handleVerifyEmail}
+                setOtp={setOtp}
+                otp={otp}
+                otpLoader={otpLoader}
+                handleVerifyBtn={handleVerifyBtn}
+                handleResend={handleResend}
+              />
+            )}
             {/* this component used for UI interaction and show their functionality */}
             {pdfLoadFail && !checkTourStatus && (
               <Tour
@@ -986,8 +1141,9 @@ function SignYourSelf() {
             {/* this component used to render all pdf pages in left side */}
 
             <RenderAllPdfPage
-              pdfUrl={pdfUrl}
-              signPdfUrl={pdfDetails[0] && pdfDetails[0].URL}
+              signPdfUrl={
+                pdfDetails[0] && (pdfDetails[0].SignedUrl || pdfDetails[0].URL)
+              }
               allPages={allPages}
               setAllPages={setAllPages}
               setPageNumber={setPageNumber}
@@ -1003,9 +1159,8 @@ function SignYourSelf() {
               }}
             >
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={isAlert.isShow}
-                title={"Alert"}
+                title={isAlert?.header || "Alert"}
                 handleClose={() => {
                   setIsAlert({
                     isShow: false,
@@ -1013,55 +1168,24 @@ function SignYourSelf() {
                   });
                 }}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="p-[20px] h-full">
                   <p>{isAlert.alertMessage}</p>
-
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
-                  <button
-                    onClick={() => {
-                      setIsAlert({
-                        isShow: false,
-                        alertMessage: ""
-                      });
-                    }}
-                    type="button"
-                    className="finishBtn cancelBtn"
-                  >
-                    Ok
-                  </button>
                 </div>
               </ModalUi>
 
               {/* this modal is used show this document is already sign */}
               <ModalUi
                 isOpen={showAlreadySignDoc.status}
-                title={"Sign Documents"}
+                title={"Document signed"}
                 handleClose={() => {
                   setShowAlreadySignDoc({ status: false });
                 }}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="p-[20px] h-full">
                   <p>{showAlreadySignDoc.mssg}</p>
-
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
+                  <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
                   <button
-                    className="finishBtn cancelBtn"
+                    className="op-btn op-btn-ghost shadow-md"
                     onClick={() => setShowAlreadySignDoc({ status: false })}
                   >
                     Close
@@ -1115,13 +1239,13 @@ function SignYourSelf() {
               <EmailComponent
                 isEmail={isEmail}
                 pdfUrl={pdfUrl}
-                isCeleb={isCeleb}
                 setIsEmail={setIsEmail}
                 pdfName={pdfDetails[0] && pdfDetails[0].Name}
                 setSuccessEmail={setSuccessEmail}
                 sender={jsonSender}
                 setIsAlert={setIsAlert}
                 extUserId={extUserId}
+                activeMailAdapter={activeMailAdapter}
               />
               {/* pdf header which contain funish back button */}
               <Header
@@ -1129,7 +1253,6 @@ function SignYourSelf() {
                 allPages={allPages}
                 changePage={changePage}
                 pdfUrl={pdfUrl}
-                documentStatus={documentStatus}
                 embedWidgetsData={embedWidgetsData}
                 pdfDetails={pdfDetails}
                 isShowHeader={true}
@@ -1137,6 +1260,7 @@ function SignYourSelf() {
                 alreadySign={pdfUrl ? true : false}
                 isSignYourself={true}
                 setIsEmail={setIsEmail}
+                isCompleted={isCompleted}
               />
 
               <div data-tut="reactourSecond">
@@ -1187,9 +1311,9 @@ function SignYourSelf() {
                 maxHeight: window.innerHeight - 70 + "px",
                 backgroundColor: "white"
               }}
-              className="autoSignScroll"
+              className="overflow-y-auto hide-scrollbar"
             >
-              {!documentStatus.isCompleted ? (
+              {!isCompleted ? (
                 <div>
                   <WidgetComponent
                     dataTut="reactourFirst"
@@ -1199,7 +1323,6 @@ function SignYourSelf() {
                     handleDivClick={handleDivClick}
                     handleMouseLeave={handleMouseLeave}
                     isDragSign={isDragSign}
-                    themeColor={themeColor}
                     dragStamp={dragStamp}
                     dragRef={dragRef}
                     isDragStamp={isDragStamp}
@@ -1220,31 +1343,22 @@ function SignYourSelf() {
         </div>
       )}
       <ModalUi
-        headerColor={"#dc3545"}
         isOpen={validateAlert}
         title={"Validation alert"}
         handleClose={() => {
           setValidateAlert(false);
         }}
       >
-        <div style={{ height: "100%", padding: 20 }}>
+        <div className="p-[20px] h-full">
           <p>
             The input does not meet the criteria set by the regular expression.
           </p>
 
-          <div
-            style={{
-              height: "1px",
-              backgroundColor: "#9f9f9f",
-              width: "100%",
-              marginTop: "15px",
-              marginBottom: "15px"
-            }}
-          ></div>
+          <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
           <button
             onClick={() => setValidateAlert(false)}
             type="button"
-            className="finishBtn cancelBtn"
+            className="op-btn op-btn-ghost shadow-md"
           >
             Close
           </button>

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -3,13 +3,13 @@ import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import { useParams, useNavigate } from "react-router-dom";
 import axios from "axios";
 import "../styles/signature.css";
-import { isEnableSubscription, themeColor } from "../constant/const";
+import { isEnableSubscription } from "../constant/const";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useDrag, useDrop } from "react-dnd";
 import WidgetComponent from "../components/pdf/WidgetComponent";
 import Tour from "reactour";
-import Loader from "../primitives/LoaderWithMsg";
+import LoaderWithMsg from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
 import SignerListPlace from "../components/pdf/SignerListPlace";
 import Header from "../components/pdf/PdfHeader";
@@ -23,7 +23,8 @@ import {
   defaultWidthHeight,
   addWidgetOptions,
   textInputWidget,
-  radioButtonWidget
+  radioButtonWidget,
+  fetchSubscription
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import "../styles/AddUser.css";
@@ -145,6 +146,7 @@ const TemplatePlaceholder = () => {
   const [currWidgetsDetails, setCurrWidgetsDetails] = useState([]);
   const [isCheckbox, setIsCheckbox] = useState(false);
   const [widgetName, setWidgetName] = useState(false);
+  const [isAddRole, setIsAddRole] = useState(false);
   const senderUser =
     localStorage.getItem(
       `Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -170,17 +172,14 @@ const TemplatePlaceholder = () => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [divRef.current]);
-  async function checkIsSubscribed(email) {
-    const user = await Parse.Cloud.run("getUserDetails", {
-      email: email
-    });
-    const freeplan = user?.get("Plan") && user?.get("Plan").plan_code;
-    const billingDate =
-      user?.get("Next_billing_date") && user?.get("Next_billing_date");
+  async function checkIsSubscribed() {
+    const res = await fetchSubscription();
+    const freeplan = res.plan;
+    const billingDate = res.billingDate;
     if (freeplan === "freeplan") {
       return true;
     } else if (billingDate) {
-      if (billingDate > new Date()) {
+      if (new Date(billingDate) > new Date()) {
         setIsSubscribe(true);
         return true;
       } else {
@@ -311,10 +310,10 @@ const TemplatePlaceholder = () => {
       if (tourstatus && tourstatus.length > 0) {
         setTourStatus(tourstatus);
         const checkTourRecipients = tourstatus.filter(
-          (data) => data.templatetour
+          (data) => data.templateTour
         );
         if (checkTourRecipients && checkTourRecipients.length > 0) {
-          setCheckTourStatus(checkTourRecipients[0].templatetour);
+          setCheckTourStatus(checkTourRecipients[0].templateTour);
         }
       }
       const loadObj = {
@@ -484,9 +483,20 @@ const TemplatePlaceholder = () => {
       } else {
         setIsReceipent(false);
       }
+    } else {
+      setIsAddRole(true);
     }
   };
 
+  const tourAddRole = [
+    {
+      selector: '[data-tut="reactourAddbtn"]',
+      content: "You need to add a role before you can add fields for it. ",
+      position: "top",
+      style: { fontSize: "13px" }
+    }
+  ];
+
   //function for get pdf page details
   const pageDetails = async (pdf) => {
     const load = {
@@ -695,35 +705,29 @@ const TemplatePlaceholder = () => {
           Name: pdfDetails[0]?.Name || "",
           Note: pdfDetails[0]?.Note || "",
           Description: pdfDetails[0]?.Description || "",
-          SendinOrder: pdfDetails[0]?.SendinOrder || false
+          SendinOrder: pdfDetails[0]?.SendinOrder || false,
+          AutomaticReminders: pdfDetails[0]?.AutomaticReminders,
+          RemindOnceInEvery: parseInt(pdfDetails[0]?.RemindOnceInEvery),
+          NextReminderDate: pdfDetails[0]?.NextReminderDate
         };
+        const updateTemplate = new Parse.Object("contracts_Template");
+        updateTemplate.id = templateId;
+        for (const key in data) {
+          updateTemplate.set(key, data[key]);
+        }
+        await updateTemplate.save(null, {
+          sessionToken: localStorage.getItem("accesstoken")
+        });
 
-        await axios
-          .put(
-            `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-              "_appName"
-            )}_Template/${templateId}`,
-            data,
-            {
-              headers: {
-                "Content-Type": "application/json",
-                "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-                "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-              }
-            }
-          )
-          .then(() => {
-            setIsCreateDocModal(true);
-            setIsMailSend(true);
-            const loadObj = {
-              isLoad: false
-            };
-            setIsLoading(loadObj);
-          })
-          .catch((err) => {
-            console.log("axois err ", err);
-          });
+        setIsCreateDocModal(true);
+        setIsMailSend(true);
+        const loadObj = {
+          isLoad: false
+        };
+        setIsLoading(loadObj);
       } catch (e) {
+        setIsLoading(false);
+        alert("Something went wrong, please try again later.");
         console.log("error", e);
       }
     } else {
@@ -765,7 +769,7 @@ const TemplatePlaceholder = () => {
       selector: '[data-tut="reactourSecond"]',
       content: () => (
         <TourContentWithBtn
-          message={`Drag a widget 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}
         />
       ),
@@ -787,7 +791,7 @@ const TemplatePlaceholder = () => {
       selector: '[data-tut="reactourFour"]',
       content: () => (
         <TourContentWithBtn
-          message={`Clicking "Save" button will save the template and will ask you if you want to create a new document using this template.`}
+          message={`Clicking ‘Save’ will store the current template. After saving, you’ll be prompted to create a new document from this template if you wish.`}
           isChecked={handleDontShow}
         />
       ),
@@ -805,15 +809,15 @@ const TemplatePlaceholder = () => {
       if (tourStatus.length > 0) {
         updatedTourStatus = [...tourStatus];
         const templatetourIndex = tourStatus.findIndex(
-          (obj) => obj["templatetour"] === false || obj["templatetour"] === true
+          (obj) => obj["templateTour"] === false || obj["templateTour"] === true
         );
         if (templatetourIndex !== -1) {
-          updatedTourStatus[templatetourIndex] = { templatetour: true };
+          updatedTourStatus[templatetourIndex] = { templateTour: true };
         } else {
-          updatedTourStatus.push({ templatetour: true });
+          updatedTourStatus.push({ templateTour: true });
         }
       } else {
-        updatedTourStatus = [{ templatetour: true }];
+        updatedTourStatus = [{ templateTour: true }];
       }
       await axios
         .put(
@@ -1123,8 +1127,6 @@ const TemplatePlaceholder = () => {
       inputype = options.includes(defaultdata.textvalidate)
         ? defaultdata.textvalidate
         : "regex";
-    } else {
-      inputype = "text";
     }
 
     const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
@@ -1149,11 +1151,14 @@ const TemplatePlaceholder = () => {
                   status: defaultdata?.status || "required",
                   hint: defaultdata?.hint || "",
                   defaultValue: defaultdata?.defaultValue || "",
-                  validation: {
-                    type: inputype,
-                    pattern:
-                      inputype === "regex" ? defaultdata.textvalidate : ""
-                  }
+                  validation:
+                    (isSubscribe || !isEnableSubscription) && inputype
+                      ? {
+                          type: inputype,
+                          pattern:
+                            inputype === "regex" ? defaultdata.textvalidate : ""
+                        }
+                      : {}
                 }
               };
             } else {
@@ -1202,11 +1207,14 @@ const TemplatePlaceholder = () => {
       <Title title={"Template"} />
       <DndProvider backend={HTML5Backend}>
         {isLoading.isLoad ? (
-          <Loader isLoading={isLoading} />
+          <LoaderWithMsg isLoading={isLoading} />
         ) : handleError ? (
           <HandleError handleError={handleError} />
         ) : (
-          <div className="signatureContainer" ref={divRef}>
+          <div
+            className="op-card overflow-hidden flex flex-row justify-between bg-base-300 relative"
+            ref={divRef}
+          >
             {/* this component used for UI interaction and show their functionality */}
             {!checkTourStatus && (
               //this tour component used in your html component where you want to put
@@ -1221,6 +1229,15 @@ const TemplatePlaceholder = () => {
                 closeWithMask={false}
               />
             )}
+            {isAddRole && (
+              <Tour
+                onRequestClose={() => setIsAddRole(false)}
+                steps={tourAddRole}
+                isOpen={isAddRole}
+                rounded={5}
+                closeWithMask={false}
+              />
+            )}
             {/* this component used to render all pdf pages in left side */}
             <RenderAllPdfPage
               signPdfUrl={pdfDetails[0].URL}
@@ -1240,23 +1257,21 @@ const TemplatePlaceholder = () => {
             >
               {/* this modal is used show alert set placeholder for all signers before send mail */}
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={isSendAlert}
                 title={"Fields required"}
                 handleClose={() => setIsSendAlert(false)}
               >
-                <div style={{ height: "100%", padding: 20 }}>
-                  <p>Please add field for all recipients.</p>
+                <div className="h-full p-[20px]">
+                  <p>Please add at least one signature field for all roles.</p>
                 </div>
               </ModalUi>
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={!IsReceipent}
                 title={"Roles"}
                 handleClose={() => setIsReceipent(true)}
               >
-                <div style={{ height: "100%", padding: 20 }}>
-                  <p>Please add a role</p>
+                <div className="h-full p-[20px] text-center font-medium">
+                  <p>Please add roles first</p>
                 </div>
               </ModalUi>
               {/* this modal is used show send mail  message and after send mail success message */}
@@ -1265,32 +1280,18 @@ const TemplatePlaceholder = () => {
                 title={"Create Document"}
                 handleClose={() => setIsCreateDocModal(false)}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="h-full p-[20px]">
                   <p>
                     Do you want to create a document using the template you just
                     created ?
                   </p>
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
+                  <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
                   {currentEmail.length > 0 && (
                     <>
                       <button
-                        onClick={() => {
-                          handleCreateDocModal();
-                        }}
-                        style={{
-                          background: themeColor,
-                          color: "white"
-                        }}
+                        onClick={() => handleCreateDocModal()}
                         type="button"
-                        className="finishBtn"
+                        className="op-btn op-btn-primary"
                       >
                         Yes
                       </button>
@@ -1299,7 +1300,7 @@ const TemplatePlaceholder = () => {
                           setIsCreateDocModal(false);
                         }}
                         type="button"
-                        className="finishBtn cancelBtn"
+                        className="op-btn op-btn-secondary ml-2"
                       >
                         No
                       </button>
@@ -1307,32 +1308,21 @@ const TemplatePlaceholder = () => {
                   )}
                 </div>
               </ModalUi>
-              {isCreateDoc && <Loader isLoading={isLoading} />}
+              {isCreateDoc && <LoaderWithMsg isLoading={isLoading} />}
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={isShowEmail}
                 title={"signers alert"}
                 handleClose={() => {
                   setIsShowEmail(false);
                 }}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="h-full p-[20px]">
                   <p>Please select signer for add placeholder!</p>
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
+                  <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
                   <button
-                    onClick={() => {
-                      setIsShowEmail(false);
-                    }}
+                    onClick={() => setIsShowEmail(false)}
                     type="button"
-                    className="finishBtn cancelBtn"
+                    className="op-btn op-btn-primary"
                   >
                     Ok
                   </button>
@@ -1382,7 +1372,7 @@ const TemplatePlaceholder = () => {
                 // signerObjId={signerObjId}
                 Id={uniqueId}
               />
-              {/* pdf header which contain funish back button */}
+              {/* pdf header which contain finish, back button */}
               <Header
                 completeBtnTitle={"Save"}
                 isPlaceholder={true}
@@ -1485,10 +1475,10 @@ const TemplatePlaceholder = () => {
               </div>
             ) : (
               <div>
-                <div className="signerComponent">
+                <div className="hidden md:block w-[180px] h-full bg-base-100">
                   <div
                     style={{ maxHeight: window.innerHeight - 70 + "px" }}
-                    className="autoSignScroll"
+                    className="overflow-y-auto hide-scrollbar"
                   >
                     <SignerListPlace
                       isMailSend={isMailSend}
@@ -1551,6 +1541,7 @@ const TemplatePlaceholder = () => {
           isAddUser={isAddUser}
           uniqueId={uniqueId}
           closePopup={closePopup}
+          signersData={signersdata}
         />
       </div>
       <ModalUi

apps/OpenSign/src/pages/UserProfile.js

@@ -1,4 +1,8 @@
-import React, { useState, useEffect } from "react";
+import React, {
+  useState,
+  useEffect
+  // useRef
+} from "react";
 import { Navigate, useNavigate } from "react-router-dom";
 import Parse from "parse";
 import { SaveFileSize } from "../constant/saveFileSize";
@@ -9,12 +13,15 @@ import axios from "axios";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
 import { isEnableSubscription } from "../constant/const";
-import { checkIsSubscribed } from "../constant/Utils";
+import { checkIsSubscribed, handleSendOTP } from "../constant/Utils";
 import Upgrade from "../primitives/Upgrade";
+import ModalUi from "../primitives/ModalUi";
+import Loader from "../primitives/Loader";
 
 function UserProfile() {
   const navigate = useNavigate();
   let UserProfile = JSON.parse(localStorage.getItem("UserInformation"));
+  let extendUser = JSON.parse(localStorage.getItem("Extand_Class"));
   const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
   const [parseAppId] = useState(localStorage.getItem("parseAppId"));
   const [editmode, setEditMode] = useState(false);
@@ -25,12 +32,27 @@ function UserProfile() {
   const [percentage, setpercentage] = useState(0);
   const [isDisableDocId, setIsDisableDocId] = useState(false);
   const [isSubscribe, setIsSubscribe] = useState(false);
-
+  // const [publicUserName, setPublicUserName] = useState(
+  //   extendUser && extendUser?.[0]?.UserName
+  // );
+  // const previousPublicUserName = useRef(publicUserName);
+  const [company, setCompany] = useState(
+    extendUser && extendUser?.[0]?.Company
+  );
+  const [jobTitle, setJobTitle] = useState(
+    extendUser && extendUser?.[0]?.JobTitle
+  );
+  const [isVerifyModal, setIsVerifyModal] = useState(false);
+  const [otp, setOtp] = useState("");
+  const [otpLoader, setOtpLoader] = useState(false);
+  const [isEmailVerified, setIsEmailVerified] = useState(false);
+  // const [userNameError, setUserNameError] = useState("");
   useEffect(() => {
     getUserDetail();
   }, []);
 
   const getUserDetail = async () => {
+    setIsLoader(true);
     const extClass = localStorage.getItem("Extand_Class");
     const jsonSender = JSON.parse(extClass);
     const HeaderDocId = jsonSender[0]?.HeaderDocId;
@@ -41,46 +63,93 @@ function UserProfile() {
     if (HeaderDocId) {
       setIsDisableDocId(HeaderDocId);
     }
+    const currentUser = JSON.parse(JSON.stringify(Parse.User.current()));
+    let isEmailVerified = currentUser?.emailVerified || false;
+    if (isEmailVerified) {
+      setIsEmailVerified(isEmailVerified);
+      setIsLoader(false);
+    } else {
+      try {
+        const userQuery = new Parse.Query(Parse.User);
+        const user = await userQuery.get(currentUser.objectId, {
+          sessionToken: localStorage.getItem("accesstoken")
+        });
+        if (user) {
+          isEmailVerified = user?.get("emailVerified");
+          setIsEmailVerified(isEmailVerified);
+          setIsLoader(false);
+        }
+      } catch (e) {
+        alert("something went wrong!");
+      }
+    }
   };
+  //function to check public username already exist
+  // const handleCheckPublicUserName = async () => {
+  //   try {
+  //     const res = await Parse.Cloud.run("getpublicusername", {
+  //       username: publicUserName
+  //     });
+  //     if (res) {
+  //       setIsLoader(false);
+  //       setUserNameError("user name already exist");
+  //       setTimeout(() => {
+  //         setUserNameError("");
+  //       }, 3000);
+  //       return res;
+  //     }
+  //   } catch (e) {
+  //     console.log("error in getpublicusername cloud function");
+  //   }
+  // };
   const handleSubmit = async (e) => {
     e.preventDefault();
-    setIsLoader(true);
-    let phn = Phone;
-
-    try {
-      const tour = Parse.Object.extend("_User");
-      const query = new Parse.Query(tour);
-
-      await query.get(UserProfile.objectId).then((object) => {
-        object.set("name", name);
-        object.set("ProfilePic", Image);
-        object.set("phone", phn);
-
-        object.save().then(
-          async (response) => {
-            if (response) {
-              let res = response.toJSON();
-              let rr = JSON.stringify(res);
-              localStorage.setItem("UserInformation", rr);
-              SetName(res.name);
-              SetPhone(res.phone);
-              setImage(res.ProfilePic);
-              localStorage.setItem("username", res.name);
-              await updateExtUser({ Name: res.name, Phone: res.phone });
-              alert("Profile updated successfully.");
-              setEditMode(false);
-              navigate("/dashboard/35KBoSgoAK");
+    let phn = Phone,
+      res = "";
+    //condition to call cloud function when user change publicUserName
+    // if (previousPublicUserName.current !== publicUserName) {
+    //   res = await handleCheckPublicUserName();
+    // }
+    if (!res) {
+      setIsLoader(true);
+      try {
+        const userQuery = Parse.Object.extend("_User");
+        const query = new Parse.Query(userQuery);
+        await query.get(UserProfile.objectId).then((object) => {
+          object.set("name", name);
+          object.set("ProfilePic", Image);
+          object.set("phone", phn || "");
+          object.save().then(
+            async (response) => {
+              if (response) {
+                let res = response.toJSON();
+                let rr = JSON.stringify(res);
+                localStorage.setItem("UserInformation", rr);
+                SetName(res.name);
+                SetPhone(res?.phone || "");
+                setImage(res.ProfilePic);
+                localStorage.setItem("username", res.name);
+                localStorage.setItem("profileImg", res.ProfilePic);
+                await updateExtUser({
+                  Name: res.name,
+                  Phone: res?.phone || ""
+                });
+                alert("Profile updated successfully.");
+                setEditMode(false);
+                setIsLoader(false);
+                //navigate("/dashboard/35KBoSgoAK");
+              }
+            },
+            (error) => {
+              alert("Something went wrong.");
+              console.error("Error while updating tour", error);
+              setIsLoader(false);
             }
-          },
-          (error) => {
-            alert("Something went wrong.");
-            console.error("Error while updating tour", error);
-            setIsLoader(false);
-          }
-        );
-      });
-    } catch (error) {
-      console.log("err", error);
+          );
+        });
+      } catch (error) {
+        console.log("err", error);
+      }
     }
   };
 
@@ -89,12 +158,15 @@ function UserProfile() {
     const extClass = localStorage.getItem("extended_class");
     const extData = JSON.parse(localStorage.getItem("Extand_Class"));
     const ExtUserId = extData[0].objectId;
-
     const body = {
-      Phone: obj.Phone,
+      Phone: obj?.Phone || "",
       Name: obj.Name,
-      HeaderDocId: isDisableDocId
+      HeaderDocId: isDisableDocId,
+      JobTitle: jobTitle,
+      Company: company
+      // UserName: publicUserName || ""
     };
+
     await axios.put(
       parseBaseUrl + "classes/" + extClass + "/" + ExtUserId,
       body,
@@ -112,7 +184,6 @@ function UserProfile() {
 
     const json = JSON.parse(JSON.stringify([res]));
     const extRes = JSON.stringify(json);
-
     localStorage.setItem("Extand_Class", extRes);
     // console.log("updateRes ", updateRes);
   };
@@ -147,7 +218,6 @@ function UserProfile() {
       // console.log("File URL:", response.url());
       if (response.url()) {
         setImage(response.url());
-        localStorage.setItem("profileImg", response.url());
         setpercentage(0);
         const tenantId = localStorage.getItem("TenantId");
         SaveFileSize(size, response.url(), tenantId);
@@ -168,29 +238,84 @@ function UserProfile() {
   const handleDisableDocId = () => {
     setIsDisableDocId((prevChecked) => !prevChecked);
   };
+  //`handleVerifyBtn` function is used to send otp on user mail
+  const handleVerifyBtn = async () => {
+    setIsVerifyModal(true);
+    await handleSendOTP(Parse.User.current().getEmail());
+  };
+  const handleCloseVerifyModal = async () => {
+    setIsVerifyModal(false);
+  };
+  //`handleVerifyEmail` function is used to verify email with otp
+  const handleVerifyEmail = async (e) => {
+    e.preventDefault();
+    setOtpLoader(true);
+    try {
+      const resEmail = await Parse.Cloud.run("verifyemail", {
+        otp: otp,
+        email: Parse.User.current().getEmail()
+      });
+      if (resEmail?.message === "Email is verified.") {
+        setIsEmailVerified(true);
+      } else if (resEmail?.message === "Email is already verified.") {
+        setIsEmailVerified(true);
+      }
+      setOtp("");
+      alert(resEmail.message);
+      setIsVerifyModal(false);
+    } catch (error) {
+      alert(error.message);
+    } finally {
+      setOtpLoader(false);
+    }
+  };
+  //function to use resend otp for email verification
+  const handleResend = async (e) => {
+    e.preventDefault();
+    setOtpLoader(true);
+    await handleSendOTP();
+    setOtpLoader(false);
+    alert("OTP sent on you email");
+  };
+  //function to handle onchange username and restrict 6-characters username for free users
+  // const handleOnchangeUserName = (e) => {
+  //   const value = e.target.value;
+  //   if (value.length > 6 && !isSubscribe) {
+  //     setUserNameError("Please upgrade to allow more than 6 characters.");
+  //     setTimeout(() => {
+  //       setUserNameError("");
+  //     }, 2000);
+  //   } else {
+  //     setPublicUserName(e.target.value);
+  //   }
+  // };
+  const handleCancel = () => {
+    setEditMode(false);
+    SetName(localStorage.getItem("username"));
+    SetPhone(UserProfile && UserProfile.phone);
+    setImage(localStorage.getItem("profileImg"));
+    // setPublicUserName(extendUser && extendUser?.[0]?.UserName);
+    setCompany(extendUser && extendUser?.[0]?.Company);
+    setJobTitle(extendUser?.[0]?.JobTitle);
+    setIsDisableDocId(extendUser?.[0]?.HeaderDocId);
+  };
   return (
     <React.Fragment>
       <Title title={"Profile"} />
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[100vh] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
-        <div className="flex justify-center items-center w-full">
-          <div className="bg-white flex flex-col justify-center shadow rounded w-[450px]">
+        <div className="flex justify-center items-center w-full relative">
+          {/* {userNameError && (
+            <div
+              className={`z-[1000] fixed top-[50%] transform border-[1px] text-sm border-[#f0a8a8] bg-[#f4bebe] text-[#c42121] rounded py-[.75rem] px-[1.25rem]`}
+            >
+              {userNameError}
+            </div>
+          )} */}
+          <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded-xl w-[450px]">
             <div className="flex flex-col justify-center items-center my-4">
               <div className="w-[200px] h-[200px] overflow-hidden rounded-full">
                 <img
@@ -202,7 +327,7 @@ function UserProfile() {
               {editmode && (
                 <input
                   type="file"
-                  className="max-w-[270px] text-sm py-1 px-2 mt-4 border-[1px] border-[#15b4e9] text-black rounded"
+                  className="op-file-input op-file-input-bordered op-file-input-sm max-w-[270px] mt-4 text-sm"
                   accept="image/png, image/gif, image/jpeg"
                   onChange={(e) => {
                     let files = e.target.files;
@@ -228,7 +353,7 @@ function UserProfile() {
             <ul className="w-full flex flex-col p-2 text-sm">
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1" : "py-2"
+                  editmode ? "py-1.5" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Name:</span>{" "}
@@ -236,7 +361,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={name}
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
                     onChange={(e) => SetName(e.target.value)}
                   />
                 ) : (
@@ -245,14 +370,14 @@ function UserProfile() {
               </li>
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1" : "py-2"
+                  editmode ? "py-1.5" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Phone:</span>{" "}
                 {editmode ? (
                   <input
                     type="text"
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
                     onChange={(e) => SetPhone(e.target.value)}
                     value={Phone}
                   />
@@ -264,14 +389,90 @@ function UserProfile() {
                 <span className="font-semibold">Email:</span>{" "}
                 <span>{UserProfile && UserProfile.email}</span>
               </li>
+              <li
+                className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
+                  editmode ? "py-1.5" : "py-2"
+                }`}
+              >
+                <span className="font-semibold">Company:</span>{" "}
+                {editmode ? (
+                  <input
+                    type="text"
+                    value={company}
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
+                    onChange={(e) => setCompany(e.target.value)}
+                  />
+                ) : (
+                  <span>{extendUser?.[0].Company}</span>
+                )}
+              </li>
+              <li
+                className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
+                  editmode ? "py-1.5" : "py-2"
+                }`}
+              >
+                <span className="font-semibold">Job title:</span>{" "}
+                {editmode ? (
+                  <input
+                    type="text"
+                    value={jobTitle}
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
+                    onChange={(e) => setJobTitle(e.target.value)}
+                  />
+                ) : (
+                  <span>{extendUser?.[0]?.JobTitle}</span>
+                )}
+              </li>
               <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
-                    ? "Verified"
-                    : "Not verified"}
+                  {isEmailVerified ? (
+                    "Verified"
+                  ) : (
+                    <span>
+                      Not verified(
+                      <span
+                        onClick={() => handleVerifyBtn()}
+                        className="hover:underline text-blue-600 cursor-pointer"
+                      >
+                        verify
+                      </span>
+                      )
+                    </span>
+                  )}
                 </span>
               </li>
+              {/* {isEnableSubscription && (
+                <li className="flex justify-between items-center border-t-[1px] border-gray-300 py-2 break-all">
+                  <span className="font-semibold">
+                    Public profile :{" "}
+                    <Tooltip
+                      message={`this is your public URL. Copy or share it
+                   with the signer, and you will be able to see
+                   all your publicly set templates.`}
+                    />
+                  </span>
+                  <div className="flex text-xs items-center">
+                    <span>opensign-me.vercel.app/</span>
+                    {editmode ? (
+                      <input
+                        onChange={handleOnchangeUserName}
+                        value={publicUserName}
+                        disabled={!editmode}
+                        placeholder="enter user name"
+                        className="op-input op-input-bordered focus:outline-none hover:border-base-content op-input-xs"
+                      />
+                    ) : (
+                      <input
+                        value={extendUser?.[0]?.UserName}
+                        disabled
+                        placeholder="enter user name"
+                        className="op-input op-input-bordered op-input-xs"
+                      />
+                    )}
+                  </div>
+                </li>
+              )} */}
               <li className="border-y-[1px] border-gray-300 break-all">
                 <div className="flex justify-between items-center py-2">
                   <span
@@ -286,28 +487,23 @@ function UserProfile() {
                       url={
                         "https://docs.opensignlabs.com/docs/help/Settings/disabledocumentid"
                       }
-                      isSubscribe={isSubscribe}
-                    />{" "}
+                    />
                     {!isSubscribe && isEnableSubscription && <Upgrade />}
-                  </span>{" "}
+                  </span>
                   <label
-                    className={
+                    className={`${
                       isSubscribe || !isEnableSubscription
-                        ? `${
-                            editmode ? "cursor-pointer" : ""
-                          } relative inline-flex items-center mb-0`
-                        : "relative inline-flex items-center mb-0 pointer-events-none opacity-50"
-                    }
+                        ? `${editmode ? "cursor-pointer" : ""}`
+                        : "pointer-events-none opacity-50"
+                    } relative block items-center mb-0`}
                   >
                     <input
                       disabled={editmode ? false : true}
+                      type="checkbox"
+                      className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
                       checked={isDisableDocId}
                       onChange={handleDisableDocId}
-                      type="checkbox"
-                      value=""
-                      className="sr-only peer"
                     />
-                    <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>
                 </div>
                 {!isEnableSubscription && (
@@ -319,43 +515,68 @@ function UserProfile() {
                 )}
               </li>
             </ul>
-            <div className="flex justify-center pt-2 pb-3 md:pt-3 md:pb-4">
-              {editmode ? (
-                <button
-                  type="button"
-                  onClick={handleSubmit}
-                  className="rounded shadow focus:outline-none border-[2px] border-[#15b4e9] bg-white text-[#15b4e9] px-4 py-2 mr-4"
-                >
-                  Save
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => {
-                    setEditMode(true);
-                  }}
-                  className="rounded shadow focus:outline-none text-white bg-[#e7505a] px-4 py-2 mr-4"
-                >
-                  Edit
-                </button>
-              )}
+            <div className="flex justify-center gap-2 pt-2 pb-3 md:pt-3 md:pb-4">
               <button
                 type="button"
-                onClick={() => {
-                  if (editmode) {
-                    setEditMode(false);
-                  } else {
-                    navigate("/changepassword");
-                  }
-                }}
-                className={`rounded shadow focus:outline-none text-white bg-[#3598dc]  ${
-                  editmode ? "px-4 py-2 " : "p-2"
+                onClick={(e) =>
+                  editmode ? handleSubmit(e) : setEditMode(true)
+                }
+                className="op-btn op-btn-primary"
+              >
+                {editmode ? "Save" : "Edit"}
+              </button>
+              <button
+                type="button"
+                onClick={() =>
+                  editmode ? handleCancel() : navigate("/changepassword")
+                }
+                className={`op-btn ${
+                  editmode ? "op-btn-ghost" : "op-btn-secondary"
                 }`}
               >
                 {editmode ? "Cancel" : "Change Password"}
               </button>
             </div>
           </div>
+          {isVerifyModal && (
+            <ModalUi
+              isOpen
+              title={"OTP verification"}
+              handleClose={handleCloseVerifyModal}
+            >
+              {otpLoader ? (
+                <div className="h-[150px] flex justify-center items-center">
+                  <Loader />
+                </div>
+              ) : (
+                <form onSubmit={(e) => handleVerifyEmail(e)}>
+                  <div className="px-6 py-3 text-base-content">
+                    <label className="mb-2">Enter OTP</label>
+                    <input
+                      required
+                      type="tel"
+                      pattern="[0-9]{4}"
+                      className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
+                      placeholder="Enter OTP received over email"
+                      value={otp}
+                      onChange={(e) => setOtp(e.target.value)}
+                    />
+                  </div>
+                  <div className="px-6 mb-3">
+                    <button type="submit" className="op-btn op-btn-primary">
+                      Verify
+                    </button>
+                    <button
+                      className="op-btn op-btn-secondary ml-2"
+                      onClick={(e) => handleResend(e)}
+                    >
+                      Resend
+                    </button>
+                  </div>
+                </form>
+              )}
+            </ModalUi>
+          )}
         </div>
       )}
     </React.Fragment>

apps/OpenSign/src/pages/Webhook.js

@@ -4,11 +4,12 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import Alert from "../primitives/Alert";
 import ModalUi from "../primitives/ModalUi";
-import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
+import { isEnableSubscription } from "../constant/const";
 import { checkIsSubscribed, openInNewTab } from "../constant/Utils";
 import Parse from "parse";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
+import Loader from "../primitives/Loader";
 
 function Webhook() {
   const navigation = useNavigate();
@@ -97,28 +98,15 @@ function Webhook() {
   return (
     <React.Fragment>
       <Title title={"Webhook"} />
-      {isGenerate && <Alert type="success">Webhook added successfully!</Alert>}
-      {isErr && <Alert type="danger">Something went wrong!</Alert>}
+      {isGenerate && <Alert type="success">Webhook added successfully.</Alert>}
+      {isErr && <Alert type="danger">Something went wrong.</Alert>}
 
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[100vh] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
-        <div className="bg-white flex flex-col justify-center shadow rounded">
+        <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded">
           {!isEnableSubscription && <PremiumAlertHeader />}
           <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
             OpenSign™ Webhook{" "}
@@ -146,14 +134,14 @@ function Webhook() {
               <button
                 type="button"
                 onClick={handleModal}
-                className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-4 py-2 text-xs md:text-base focus:outline-none"
+                className="op-btn op-btn-primary "
               >
                 {webhook ? "Update Webhook" : "Add Webhook"}
               </button>
             </li>
           </ul>
 
-          <div className="flex   items-center justify-center ">
+          <div className="flex items-center justify-center ">
             <button
               type="button"
               onClick={() =>
@@ -161,7 +149,7 @@ function Webhook() {
                   "https://docs.opensignlabs.com/docs/API-docs/save-update-webhook"
                 )
               }
-              className="rounded hover:bg-[#15b4e9] border-[1px] my-2 border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
+              className="op-btn op-btn-secondary my-2"
             >
               View Docs
             </button>
@@ -203,24 +191,27 @@ function Webhook() {
           >
             {error && <Alert type="danger">{error}</Alert>}
             <div className="m-[20px]">
-              <div className="text-lg font-normal text-black">
+              <div className="text-lg font-normal text-base-content">
                 <label className="text-sm ml-2">Webhook</label>
                 <input
                   value={webhook}
                   onChange={(e) => setWebhook(e.target.value)}
                   placeholder="Enter webhook url"
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 />
               </div>
-              <hr className="bg-[#ccc] mt-4 " />
-              <div className="flex items-center mt-3 gap-2 text-white">
+              <hr className="bg-[#ccc] mt-3" />
+              <div className="flex items-center mt-3 gap-2">
                 <button
                   onClick={handleSubmit}
-                  className={submitBtn + "ml-[2px]"}
+                  className="op-btn op-btn-primary ml-[2px]"
                 >
                   Yes
                 </button>
-                <button onClick={handleModal} className={rejectBtn}>
+                <button
+                  onClick={handleModal}
+                  className="op-btn op-btn-secondary"
+                >
                   No
                 </button>
               </div>

apps/OpenSign/src/polyfills.js

@@ -0,0 +1,16 @@
+// below code is used to handle undefined Promise.withResolvers for safari
+if (typeof Promise.withResolvers === "undefined") {
+  Promise.withResolvers = function () {
+    let resolve, reject;
+    const promise = new Promise((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+    return { promise, resolve, reject };
+  };
+}
+
+// Usage:
+// const { promise, resolve, reject } = Promise.withResolvers()
+// console.log(promise, resolve, reject) // Promise { <pending> } [Function (anonymous)] [Function (anonymous)]
+// ... Do something async and then call resolve or reject!

apps/OpenSign/src/primitives/AddContact.js

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
 import "../styles/AddUser.css";
-const AddUser = (props) => {
+import Loader from "./Loader";
+const AddContact = (props) => {
   const [name, setName] = useState("");
   const [phone, setPhone] = useState("");
   const [email, setEmail] = useState("");
@@ -21,7 +22,7 @@ const AddUser = (props) => {
     );
     if (savedUserDetails && addYourself) {
       setName(savedUserDetails.name);
-      setPhone(savedUserDetails.phone);
+      setPhone(savedUserDetails?.phone || "");
       setEmail(savedUserDetails.email);
     }
   }, [addYourself]);
@@ -50,7 +51,9 @@ const AddUser = (props) => {
     try {
       const contactQuery = new Parse.Object("contracts_Contactbook");
       contactQuery.set("Name", name);
-      contactQuery.set("Phone", phone);
+      if (phone) {
+        contactQuery.set("Phone", phone);
+      }
       contactQuery.set("Email", email);
       contactQuery.set("UserRole", "contracts_Guest");
 
@@ -68,8 +71,10 @@ const AddUser = (props) => {
         _user.set("name", name);
         _user.set("username", email);
         _user.set("email", email);
-        _user.set("phone", phone);
-        _user.set("password", phone);
+        _user.set("password", email);
+        if (phone) {
+          _user.set("phone", phone);
+        }
 
         const user = await _user.save();
         if (user) {
@@ -191,40 +196,36 @@ const AddUser = (props) => {
   };
 
   return (
-    <div className="addusercontainer">
+    <div className="h-full px-[20px] py-[10px]">
       {isLoader && (
-        <div className="loaderdiv">
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
         </div>
       )}
-      <div className="form-wrapper">
-        <div style={{ fontSize: 14, fontWeight: "700" }}>Add User</div>
-
+      <div className="w-full mx-auto p-[8px]">
+        <div className="text-[14px] font-[700]">Add User</div>
         {isUserExist && (
-          <div className="form-section">
+          <div className="mb-[0.75rem] flex items-center mt-1">
             <input
               type="checkbox"
               id="addYourself"
               checked={addYourself}
               onChange={handleAddYourselfChange}
-              className="form-checkbox"
+              className="op-checkbox op-checkbox-sm"
             />
-            <label htmlFor="addYourself" className="checkbox-label ">
+            <label
+              htmlFor="addYourself"
+              className="ml-[0.5rem] text-base-content mb-0"
+            >
               Add Yourself
             </label>
           </div>
         )}
-        <form onSubmit={handleSubmit}>
-          <div className="form-section">
-            <label htmlFor="name" style={{ fontSize: 13 }}>
+        <form className="text-base-content" onSubmit={handleSubmit}>
+          <div className="mb-[0.75rem]">
+            <label htmlFor="name" className="text-[13px]">
               Name
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[13px] text-[red]"> *</span>
             </label>
             <input
               type="text"
@@ -233,48 +234,46 @@ const AddUser = (props) => {
               onChange={(e) => setName(e.target.value)}
               required
               disabled={addYourself}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
-          <div className="form-section">
-            <label htmlFor="email" style={{ fontSize: 13 }}>
+          <div className="mb-[0.75rem]">
+            <label htmlFor="email" className="text-[13px]">
               Email
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[13px] text-[red]"> *</span>
             </label>
             <input
               type="email"
               id="email"
               value={email}
-              onChange={(e) => setEmail(e.target.value)}
+              onChange={(e) => setEmail(e.target.value?.toLowerCase())}
               required
               disabled={addYourself}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs lowercase"
             />
           </div>
-          <div className="form-section">
-            <label htmlFor="phone" style={{ fontSize: 13 }}>
+          <div className="mb-[0.75rem]">
+            <label htmlFor="phone" className="text-[13px]">
               Phone
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               type="text"
               id="phone"
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
-              required
               disabled={addYourself}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
 
-          <div className="buttoncontainer">
-            <button type="submit" className="submitbutton">
+          <div className="mt-6 flex justify-start gap-2">
+            <button type="submit" className="op-btn op-btn-primary">
               Submit
             </button>
             <button
               type="button"
               onClick={() => handleReset()}
-              className="resetbutton"
+              className="op-btn op-btn-secondary"
             >
               Reset
             </button>
@@ -285,4 +284,4 @@ const AddUser = (props) => {
   );
 };
 
-export default AddUser;
+export default AddContact;

apps/OpenSign/src/primitives/Alert.js

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

apps/OpenSign/src/primitives/HandleError.js

@@ -2,15 +2,8 @@ import React from "react";
 
 function HandleError({ handleError }) {
   return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        height: "100vh"
-      }}
-    >
-      <span style={{ fontSize: "20px", color: "gray" }}>{handleError}</span>
+    <div className="flex justify-center items-center h-[100vh]">
+      <span className="text-[20px] text-[gray]">{handleError}</span>
     </div>
   );
 }

apps/OpenSign/src/primitives/LazyPage.js

@@ -1,24 +1,12 @@
 import React, { Suspense } from "react";
+import Loader from "./Loader";
 
 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 className="flex justify-center items-center h-[100vh]">
+          <Loader />
         </div>
       }
     >

apps/OpenSign/src/primitives/LinkUserModal.js

@@ -1,45 +1,25 @@
 import React from "react";
 import SelectSigners from "../components/shared/fields/SelectSigners";
-import AddUser from "./AddUser";
+import AddContact from "./AddContact";
 import ModalUi from "./ModalUi";
 
 const LinkUserModal = (props) => {
   return (
     <ModalUi
       title={"Add/Choose Signer"}
-      isOpen={props.isAddUser[props.uniqueId]}
+      isOpen={
+        props?.isAddSigner ||
+        (props?.isAddUser && props?.isAddUser[props?.uniqueId])
+      }
       handleClose={props.closePopup}
     >
       <SelectSigners
         details={props.handleAddUser}
         closePopup={props.closePopup}
+        signersData={props?.signersData}
       />
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 5,
-          margin: "0 30%",
-          color: "#808080"
-        }}
-      >
-        <span
-          style={{
-            height: 1,
-            width: "100%",
-            backgroundColor: "#ccc"
-          }}
-        ></span>
-        <span>or</span>
-        <span
-          style={{
-            height: 1,
-            width: "100%",
-            backgroundColor: "#ccc"
-          }}
-        ></span>
-      </div>
-      <AddUser details={props.handleAddUser} closePopup={props.closePopup} />
+      <div className="op-divider text-base-content mx-[25%] my-1">or</div>
+      <AddContact details={props.handleAddUser} closePopup={props.closePopup} />
     </ModalUi>
   );
 };

apps/OpenSign/src/primitives/Loader.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Loader = () => {
+  return (
+    <div className="op-loading op-loading-infinity w-[5rem] text-accent"></div>
+  );
+};
+
+export default Loader;

apps/OpenSign/src/primitives/LoaderWithMsg.js

@@ -1,27 +1,14 @@
 import React from "react";
-import loader from "../assets/images/loader2.gif";
+import Loader from "./Loader";
 
-function Loader({ isLoading }) {
+function LoaderWithMsg({ isLoading }) {
   return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        height: "100vh",
-        flexDirection: "column"
-      }}
-    >
-      <img
-        alt="no img"
-        src={loader}
-        style={{ width: "80px", height: "80px" }}
-      />
-      <span style={{ fontSize: "13px", color: "gray" }}>
-        {isLoading.message}
-      </span>
+    <div className="flex flex-col justify-center items-center h-[100vh]">
+      {/* <img alt="loader" src={loader} className="w-[80px] h-[80px]" /> */}
+      <Loader />
+      <span className="text-[13px] text-base-cotent">{isLoading.message}</span>
     </div>
   );
 }
 
-export default Loader;
+export default LoaderWithMsg;

apps/OpenSign/src/primitives/ModalUi.js

@@ -1,45 +1,51 @@
 import React from "react";
+import { isEnableSubscription } from "../constant/const";
+import PremiumAlertHeader from "./PremiumAlertHeader";
 
 const ModalUi = ({
   children,
   title,
   isOpen,
-  headColor,
   handleClose,
   showHeader = true,
   showClose = true,
-  styleClass
+  reduceWidth,
+  showHeaderMessage
 }) => {
   return (
     <>
       {isOpen && (
-        <div className="fixed z-[999] top-0 left-0 w-[100%] h-[100%] bg-black bg-opacity-[75%]">
+        <dialog className="op-modal op-modal-open">
           <div
-            className={
-              styleClass
-                ? styleClass
-                : "fixed z-[1000] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 min-w-[90%] md:min-w-[500px] overflow-y-auto hide-scrollbar"
-            }
+            className={`${
+              reduceWidth || "md:min-w-[500px]"
+            } op-modal-box p-0 max-h-90 min-w-[90%] overflow-y-auto hide-scrollbar text-sm`}
           >
             {showHeader && (
-              <div
-                className="flex justify-between rounded-t items-center py-[15px] px-[20px] text-white"
-                style={{ background: headColor ? headColor : "#32a3ac" }}
-              >
-                <div className="text-[1.2rem] font-normal">{title}</div>
+              <>
+                <h3 className="text-base-content font-bold text-lg pt-[15px] px-[20px]">
+                  {title}
+                </h3>
                 {showClose && (
-                  <div
-                    className="text-[1.5rem] cursor-pointer"
+                  <button
+                    className="op-btn op-btn-sm op-btn-circle op-btn-ghost text-base-content absolute right-2 top-2"
                     onClick={() => handleClose && handleClose()}
                   >
-                    &times;
-                  </div>
+                    ✕
+                  </button>
                 )}
-              </div>
+              </>
+            )}
+            {!isEnableSubscription && showHeaderMessage && (
+              <PremiumAlertHeader
+                message={
+                  "Cutomize Email is free in beta, this feature will incur a fee later."
+                }
+              />
             )}
             <div>{children}</div>
           </div>
-        </div>
+        </dialog>
       )}
     </>
   );

apps/OpenSign/src/primitives/PdfDeclineModal.js

@@ -1,6 +1,5 @@
 import React from "react";
 import "../styles/signature.css";
-import { rejectBtn } from "../constant/const";
 
 function CustomModal({
   show,
@@ -8,24 +7,16 @@ function CustomModal({
   bodyMssg,
   footerMessage,
   declineDoc,
-  setIsDecline,
-  containerWH
+  setIsDecline
 }) {
-  const isMobile = window.innerWidth < 767;
   return (
     show && (
-      <div
-        className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center"
-        style={{
-          width: containerWH && containerWH.width,
-          height: isMobile ? "100%" : containerWH && containerWH.height
-        }}
-      >
-        <div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
-          <div className="bg-[#de4337] text-white p-[10px] rounded-t">
+      <dialog className="op-modal op-modal-open absolute z-[1999]">
+        <div className="w-[80%] md:w-[40%] op-modal-box p-0 overflow-y-auto hide-scrollbar text-sm">
+          <h3 className="text-[#de4337] font-bold text-lg pt-[15px] px-[20px]">
             {headMsg && headMsg}
-          </div>
-          <div className="p-[15px]">
+          </h3>
+          <div className="p-[10px] px-[20px]">
             <p className="text-[15px]">{bodyMssg && bodyMssg}</p>
           </div>
           {footerMessage && (
@@ -33,8 +24,7 @@ function CustomModal({
               <div className="h-[1px] bg-[#9f9f9f] w-full"></div>
               <div className="m-[15px] ">
                 <button
-                  className={`${rejectBtn} text-white mr-2`}
-                  style={{ background: "#de4337" }}
+                  className="op-btn op-btn-primary mr-2"
                   type="button"
                   onClick={() => declineDoc()}
                 >
@@ -42,7 +32,7 @@ function CustomModal({
                 </button>
                 <button
                   type="button"
-                  className={rejectBtn}
+                  className="op-btn op-btn-secondary"
                   onClick={() => setIsDecline({ isDeclined: false })}
                 >
                   Close
@@ -51,7 +41,7 @@ function CustomModal({
             </>
           )}
         </div>
-      </div>
+      </dialog>
     )
   );
 }

apps/OpenSign/src/primitives/Tooltip.js

@@ -1,17 +1,9 @@
 import React from "react";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 import { openInNewTab } from "../constant/Utils";
-import { isEnableSubscription } from "../constant/const";
-const Tooltip = ({ id, message, url, iconColor, isSubscribe }) =>
+const Tooltip = ({ id, message, url, iconColor }) =>
   url ? (
-    <button
-      onClick={() => openInNewTab(url)}
-      className={
-        isSubscribe || !isEnableSubscription
-          ? "text-center"
-          : "text-center opacity-20 pointer-events-none"
-      }
-    >
+    <button onClick={() => openInNewTab(url)} className={"text-center"}>
       <sup>
         <i
           className="fa-solid fa-question rounded-full"