update pdf worker url

Revert "Safari issue patch "

.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

@@ -136,7 +136,7 @@ We would like to thank all our contributors and users for their support and feed
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/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></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

@@ -4,21 +4,23 @@
   "private": true,
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
-    "@radix-ui/themes": "^2.0.3",
+    "@radix-ui/themes": "^3.0.5",
     "@react-pdf/renderer": "^3.4.4",
-    "@reduxjs/toolkit": "^2.2.1",
-    "axios": "^1.6.8",
+    "@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-confetti": "^6.1.0",
     "react-cookie": "^7.1.4",
-    "react-datepicker": "^6.4.0",
+    "react-datepicker": "^6.9.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-multi-backend": "^8.0.3",
@@ -27,25 +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-pdf": "^9.0.0",
     "react-quill": "^2.0.0",
-    "react-redux": "^9.1.0",
-    "react-rnd": "^10.4.10",
+    "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",
+    "react-tooltip": "^5.26.4",
     "react-web-share": "^2.0.2",
-    "reactour": "^1.19.3",
+    "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",
@@ -83,16 +84,20 @@
     }
   },
   "devDependencies": {
-    "@babel/runtime-corejs2": "^7.24.5",
+    "@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",
+    "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,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="opensigncss">
 
 <head>
   <meta charset="utf-8" />
@@ -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>
@@ -181,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]);
@@ -50,145 +50,161 @@ const AddSigner = (props) => {
     e.stopPropagation();
     setIsLoader(true);
     if (localStorage.getItem("TenantId")) {
-    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");
-
-        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("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!");
-    }
-    }else{
-      alert('something went wrong, please try again later')
+      alert("something went wrong, please try again later");
     }
   };
 
@@ -211,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"
@@ -251,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

@@ -44,7 +44,13 @@ const Header = ({ showSidebar }) => {
 
   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");
@@ -87,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"
@@ -103,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
@@ -118,7 +123,7 @@ const Header = ({ showSidebar }) => {
           </div>
         )}
         {isPro && (
-          <div className="w-[35px] h-[35px] rounded-full ring-[1px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
+          <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>
         )}
@@ -138,60 +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 py-1 px-2 cursor-pointer font-normal"
-                onClick={() => {
-                  window.open("https://console.opensignlabs.com/");
-                }}
-              >
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                window.open("https://console.opensignlabs.com/");
+              }}
+            >
+              <span>
                 <i className="fa-regular fa-id-card"></i> Console
-              </li>
-              <li
-                className="hover:bg-gray-100 rounded-b-lg py-1 px-2 cursor-pointer font-normal"
-                onClick={closeDropdown}
-              >
+              </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,7 +110,7 @@ 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) {
@@ -121,7 +121,7 @@ const GoogleSignInBtn = ({
         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));
@@ -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,27 +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",
-          cursor: "crosshair"
-        }}
+        className="relative flex-1 cursor-crosshair border-[1px] border-[gray] overflow-auto"
         onMouseMove={props.handleMouseMoveDiv}
       >
         <Document
@@ -57,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

@@ -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([]);
@@ -121,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) {
@@ -313,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>
@@ -347,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>
@@ -368,31 +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"
-              }}
-              data-tut={props.dataTutSeventh}
-            >
+            <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
@@ -411,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>
@@ -434,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>
@@ -450,7 +416,7 @@ 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}
@@ -472,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>
@@ -522,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>
                     );
                   })}
@@ -533,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()}
               </>
@@ -587,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>
       )}
@@ -609,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,6 +1,8 @@
-import React, { useState } from "react";
-import "../../styles/AddUser.css";
-import { getFileName } from "../../constant/Utils";
+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 }) => {
@@ -9,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 });
   };
@@ -25,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"
-              }}
-            >
+            <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"
@@ -60,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
@@ -73,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
@@ -86,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/EmailBody.js

@@ -1,52 +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 (
-    <React.Fragment>
-      <div className={`flex justify-center  py-1 p-2`}>
-        <div className=" flex flex-col">
-          <form>
-            <div className="text-lg font-normal text-black">
-              <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="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none 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>
-            </div>
-          </form>
+    <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>
-    </React.Fragment>
+    </form>
   );
 }

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

@@ -5,12 +5,11 @@ 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,
@@ -22,6 +21,7 @@ function EmailComponent({
   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);
@@ -62,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);
@@ -169,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>
@@ -323,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={() => {
@@ -341,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"
@@ -354,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,15 +1,15 @@
 import React, { useState } from "react";
 import PrevNext from "./PrevNext";
-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 axios from "axios";
 import ModalUi from "../../primitives/ModalUi";
-import { appInfo } from "../../constant/appinfo";
+import Loader from "../../primitives/Loader";
 
 function Header({
   isPdfRequestFiles,
@@ -40,16 +40,9 @@ function Header({
     signerPos && signerPos?.filter((data) => data.Role !== "prefill");
   const isMobile = window.innerWidth < 767;
   const navigate = useNavigate();
-  const [isCertificate, setIsCertificate] = useState(false);
+  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 = {
@@ -59,123 +52,6 @@ function Header({
     setIsDecline(currentDecline);
   };
 
-  //function for print digital sign pdf
-  const handleToPrint = async (event) => {
-    event.preventDefault();
-
-    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");
-      } else {
-        printModule({ printable: pdf, type: "pdf", base64: true });
-      }
-    } catch (err) {
-      console.log("err in getsignedurl", err);
-      alert("something went wrong, please try again later.");
-    }
-  };
-
-  //handle download signed pdf
-  const handleDownloadPdf = async () => {
-    const pdfName = pdfDetails[0] && pdfDetails[0].Name;
-    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`);
-    } catch (err) {
-      console.log("err in getsignedurl", err);
-      alert("something went wrong, please try again later.");
-    }
-  };
-
-  const sanitizeFileName = (pdfName) => {
-    // Replace spaces with underscore
-    return pdfName.replace(/ /g, "_");
-  };
-
-  //handle download signed pdf
-  const handleDownloadCertificate = async () => {
-    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 {
-      setIsCertificate(true);
-      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`);
-            setIsCertificate(false);
-          } else {
-            setIsCertificate(true);
-          }
-        }
-      } catch (err) {
-        console.log("err in download in certificate", err);
-        alert("something went wrong, please try again later.");
-      }
-    }
-  };
-
   return (
     <div style={{ padding: "5px 0px 5px 0px" }} className="mobileHead">
       {isMobile && isShowHeader ? (
@@ -188,56 +64,22 @@ function Header({
               : window.innerWidth - 30 + "px"
           }}
         >
-          <div className="preBtn2">
+          <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>
@@ -248,18 +90,14 @@ 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>
@@ -267,17 +105,16 @@ function Header({
                     {isCompleted && (
                       <DropdownMenu.Item
                         className="DropdownMenuItem"
-                        onClick={() => handleDownloadCertificate()}
+                        onClick={() =>
+                          handleDownloadCertificate(
+                            pdfDetails,
+                            setIsDownloading
+                          )
+                        }
                       >
-                        <div
-                          style={{
-                            border: "none",
-                            backgroundColor: "#fff"
-                          }}
-                        >
+                        <div className="border-none bg-[#fff]">
                           <i
-                            className="fa-solid fa-award"
-                            style={{ marginRight: "2px" }}
+                            className="fa-solid fa-award mr-[2px]"
                             aria-hidden="true"
                           ></i>
                           Certificate
@@ -289,15 +126,9 @@ function Header({
                         className="DropdownMenuItem"
                         onClick={() => setIsEmail(true)}
                       >
-                        <div
-                          style={{
-                            display: "flex",
-                            flexDirection: "row"
-                          }}
-                        >
+                        <div className="flex flex-row">
                           <i
-                            className="fa fa-envelope"
-                            style={{ marginRight: "2px" }}
+                            className="fa fa-envelope mr-[2px]"
                             aria-hidden="true"
                           ></i>
                           Mail
@@ -306,18 +137,14 @@ function Header({
                     )}
                     <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>
@@ -326,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>
@@ -355,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"}
@@ -375,17 +191,45 @@ 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>
             )}
@@ -406,12 +250,12 @@ function Header({
                   signersdata.length !== filterPrefill.length && (
                     <div>
                       {filterPrefill.length === 0 ? (
-                        <span style={{ fontSize: "13px", color: "#f5405e" }}>
+                        <span className="text-[13px] text-[#f5405e]">
                           Add {signersdata.length - filterPrefill.length}{" "}
                           recipients signature
                         </span>
                       ) : (
-                        <span style={{ fontSize: "13px", color: "#f5405e" }}>
+                        <span className="text-[13px] text-[#f5405e]">
                           Add {signersdata.length - filterPrefill.length} more
                           recipients signature
                         </span>
@@ -431,158 +275,175 @@ function Header({
                 <button
                   onClick={() => navigate(-1)}
                   type="button"
-                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
+                  className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
                 >
                   Back
                 </button>
                 <button
                   disabled={isMailSend && true}
                   data-tut="reactourFour"
-                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] font-[500] text-sm mr-[5px]"
-                  style={{
-                    background: isMailSend ? "rgb(203, 203, 203)" : "#188ae2",
-                    color: isMailSend ? "rgb(77, 75, 75)" : "white"
-                  }}
-                  onClick={() => {
-                    alertSendEmail();
-                  }}
+                  className="op-btn op-btn-primary op-btn-sm mr-[5px]"
+                  onClick={() => alertSendEmail()}
                 >
                   {completeBtnTitle
                     ? completeBtnTitle
                     : isMailSend
-                    ? "Sent"
-                    : "Send"}
+                      ? "Sent"
+                      : "Send"}
                 </button>
               </div>
             </>
           ) : isPdfRequestFiles ? (
             alreadySign ? (
-              <div style={{ display: "flex", flexDirection: "row" }}>
+              <div className="flex flex-row">
                 {isCompleted && (
                   <button
                     type="button"
-                    onClick={() => handleDownloadCertificate()}
-                    className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
+                    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 ml-1">Certificate</span>
+                    <span className="hidden lg:block">Certificate</span>
                   </button>
                 )}
 
                 <button
-                  onClick={handleToPrint}
+                  onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
                   type="button"
-                  className="flex flex-row items-center  shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
+                  className="op-btn op-btn-neutral op-btn-sm mr-[5px] shadow"
                 >
                   <i className="fa fa-print py-[3px]" aria-hidden="true"></i>
-                  <span className="hidden lg:block ml-1">Print</span>
+                  <span className="hidden lg:block">Print</span>
                 </button>
 
                 <button
                   type="button"
-                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
-                  onClick={() => handleDownloadPdf()}
+                  className="op-btn op-btn-primary op-btn-sm mr-[5px] shadow"
+                  onClick={() =>
+                    handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
+                  }
                 >
                   <i className="fa fa-download py-[3px]" aria-hidden="true"></i>
-                  <span className="hidden lg:block ml-1">Download</span>
+                  <span className="hidden lg:block">Download</span>
                 </button>
               </div>
             ) : (
-              <div className="flex">
+              <div className="flex" data-tut="reactourFifth">
                 <button
                   onClick={() => navigate(-1)}
                   type="button"
-                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
+                  className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
                 >
                   Back
                 </button>
                 {currentSigner && (
                   <>
                     <button
-                      style={{ background: "#de4337" }}
-                      className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
-                      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="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
-                      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>
             )
           ) : isCompleted ? (
-            <div style={{ display: "flex", flexDirection: "row" }}>
+            <div className="flex flex-row">
               {isCompleted && (
                 <button
                   type="button"
-                  onClick={() => handleDownloadCertificate()}
-                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
+                  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 py-[3px]"
-                    aria-hidden="true"
-                  ></i>
-                  <span className="hidden lg:block ml-1">Certificate</span>
+                  <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"
-                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
+                className="op-btn op-btn-neutral op-btn-sm font-medium text-[13px] mr-[5px] shadow"
               >
-                <i className="fa fa-print py-[3px]" aria-hidden="true"></i>
-                <span className="hidden lg:block ml-1">Print</span>
+                <i className="fa fa-print" aria-hidden="true"></i>
+                <span className="hidden lg:block">Print</span>
               </button>
               <button
                 type="button"
-                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
-                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 py-[3px]" aria-hidden="true"></i>
-                <span className="hidden lg:block ml-1">Download</span>
+                <i className="fa fa-download" aria-hidden="true"></i>
+                <span className="hidden lg:block">Download</span>
               </button>
               <button
                 type="button"
-                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#3ba7e5]"
+                className="op-btn op-btn-info op-btn-sm font-medium text-[13px] mr-[5px] shadow"
                 onClick={() => setIsEmail(true)}
               >
-                <i className="fa fa-envelope py-[3px]" aria-hidden="true"></i>
-                <span className="hidden lg:block ml-1">Mail</span>
+                <i className="fa fa-envelope" aria-hidden="true"></i>
+                <span className="hidden lg:block">Mail</span>
               </button>
             </div>
           ) : (
             <div className="flex">
               <button
-                onClick={() => {
-                  navigate(-1);
-                }}
+                onClick={() => navigate(-1)}
                 type="button"
-                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
+                className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
               >
                 Back
               </button>
               <button
-                style={{
-                  background: "#188ae2"
-                }}
                 type="button"
-                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
+                className="op-btn op-btn-primary op-btn-sm mr-[5px]"
                 onClick={() => {
                   if (!pdfUrl) {
                     embedWidgetsData();
@@ -595,12 +456,22 @@ 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={isCertificate}
-        title={"Generating certificate"}
-        handleClose={() => setIsCertificate(false)}
+        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">
+        <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.

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

@@ -352,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 &&
@@ -425,7 +422,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap" }}
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
           cols="50"
         />
       ) : (
@@ -443,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);
@@ -528,7 +525,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap" }}
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
           cols="50"
         />
       ) : (
@@ -567,7 +564,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap" }}
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
           cols="50"
         />
       ) : (
@@ -606,7 +603,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap" }}
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
           cols="50"
         />
       ) : (
@@ -728,7 +725,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap" }}
+          style={{ whiteSpace: "pre-wrap", color: "initial" }}
           cols="50"
         />
       ) : (
@@ -748,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 &&
@@ -800,7 +796,11 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap", overflow: "hidden" }}
+          style={{
+            whiteSpace: "pre-wrap",
+            overflow: "hidden",
+            color: "initial"
+          }}
           cols="50"
         />
       );

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { themeColor } from "../../constant/const";
 
 function PrevNext({ pageNumber, allPages, changePage }) {
   //for go to previous page
@@ -12,40 +11,30 @@ function PrevNext({ pageNumber, allPages, changePage }) {
   }
 
   return (
-    <div>
-      <div className="preBtn1">
-        <button
-          className="py-[3px] px-[10px] text-xs bg-[#d3edeb] font-[600] mr-[5px]"
-          disabled={pageNumber <= 1}
-          onClick={previousPage}
-        >
-          <span className="block lg:hidden">
-            <i
-              className="fa fa-backward"
-              aria-hidden="true"
-              style={{ color: themeColor, cursor: "pointer" }}
-            ></i>
-          </span>
-          <span className="lg:block hidden">Prev</span>
-        </button>
-        <span className="text-xs font-[500]">
-          {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
-          className="py-[3px] px-[10px] text-xs bg-[#d3edeb] font-[600] ml-[5px]"
-          disabled={pageNumber >= allPages}
-          onClick={nextPage}
-        >
-          <span className="block lg:hidden">
-            <i
-              className="fa fa-forward"
-              aria-hidden="true"
-              style={{ color: themeColor, cursor: "pointer" }}
-            ></i>
-          </span>
-          <span className="lg:block hidden">Next</span>
-        </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,67 +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={"useEmail"}>
+                    <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>
                   )}
                 </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) {
@@ -253,7 +217,7 @@ const RecipientList = (props) => {
                         handleChangeSequence(e, ind, "up");
                       }
                     }}
-                    style={{ color: ind === 0 ? "gray" : "black" }}
+                    className={ind === 0 ? "text-[gray]" : "text-black"}
                   >
                     ▲
                   </div>
@@ -264,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>
@@ -279,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,7 +1,6 @@
-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({
   signPdfUrl,
@@ -9,32 +8,51 @@ function RenderAllPdfPage({
   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>
 
@@ -54,20 +72,11 @@ function RenderAllPdfPage({
                 {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) {
@@ -75,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,14 +288,12 @@ 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 style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
+              <div className="text-black text-[8px] font-medium">
                 {`(${Role})`}
               </div>
             )}
@@ -306,24 +302,16 @@ function RenderPdf({
       } 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>
         </>
       );
     }
@@ -334,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"
@@ -461,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}'
@@ -517,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>
@@ -214,8 +201,8 @@ function SignPad({
     const fontfamily = fontStyle
       ? fontStyle
       : fontSelect
-      ? fontSelect
-      : "Fasthand";
+        ? fontSelect
+        : "Fasthand";
 
     //creating span for getting text content width
     const span = document.createElement("span");
@@ -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
@@ -267,10 +254,10 @@ function SignPad({
                   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={() => {
                 props?.convertToImg &&
@@ -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,24 +435,19 @@ 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",
@@ -562,7 +478,7 @@ function SignPad({
                   </div>
                 ) : (
                   <>
-                    <div style={{ display: "flex", justifyContent: "center" }}>
+                    <div className="flex justify-center">
                       <div
                         style={{
                           border: "1.3px solid #007bff",
@@ -581,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) => {
@@ -622,7 +525,6 @@ function SignPad({
                       }}
                     />
                   </div>
-
                   <div className="fontOptionContainer">
                     {fontOptions.map((font, ind) => {
                       return (
@@ -653,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}
@@ -687,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,36 +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
-          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.setIsAddSigner(true)}
-          style={{
-            opacity: props.isMailSend && "0.5",
-            pointerEvents: props.isMailSend && "none"
-          }}
-        >
-          <i className="fa-solid fa-plus"></i>
-          <span style={{ marginLeft: 2 }}>Add recipients</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

@@ -1,16 +1,13 @@
 import React from "react";
-import { rejectBtn, submitBtn, themeColor } from "../../constant/const";
+import Loader from "../../primitives/Loader";
 
 function VerifyEmail(props) {
   return (
-    <div className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center w-full h-full rounded">
-      <div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
-        <div
-          style={{ backgroundColor: themeColor }}
-          className=" text-white p-[10px] rounded-t"
-        >
+    <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
-        </div>
+        </h3>
         {props.isVerifyModal ? (
           <form
             onSubmit={(e) => {
@@ -18,25 +15,24 @@ function VerifyEmail(props) {
               props.handleVerifyEmail(e);
             }}
           >
-            <div className="px-6 py-3">
+            <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="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                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>
-            <hr />
             <div className="px-6 my-3">
-              <button type="submit" className={submitBtn}>
+              <button type="submit" className="op-btn op-btn-primary">
                 Verify
               </button>
               <button
-                className={`${rejectBtn} ml-2`}
+                className="op-btn op-btn-secondary ml-2"
                 onClick={(e) => props.handleResend(e)}
               >
                 Resend
@@ -44,29 +40,15 @@ function VerifyEmail(props) {
             </div>
           </form>
         ) : props.otpLoader ? (
-          <div
-            style={{
-              height: "150px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            <div
-              style={{
-                fontSize: "45px",
-                color: "#3dd3e0"
-              }}
-              className="loader-37"
-            ></div>
+          <div className="h-[150px] flex items-center justify-center">
+            <Loader />
           </div>
         ) : (
-          <div className="px-6 py-3">
-            <p className="mb-2">Please verify your email !</p>
-            <hr />
+          <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={submitBtn}
+                className="op-btn op-btn-primary"
                 type="submit"
                 onClick={() => {
                   props.handleVerifyBtn();
@@ -78,7 +60,7 @@ function VerifyEmail(props) {
           </div>
         )}
       </div>
-    </div>
+    </dialog>
   );
 }
 

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,
@@ -256,117 +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>
-                  </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>
-            ) : (
-              setIsAddSigner && (
+                  </span>
+                </div>
+              )}
+            </div>
+            <div className="mx-1">
+              {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={() => setIsAddSigner(true)}
+                  className="op-btn op-btn-accent w-full my-[2px]"
+                  onClick={() => handleAddSigner()}
                 >
                   <i className="fa-solid fa-plus"></i>
-                  <span style={{ marginLeft: 2 }}>Add recipients</span>
+                  <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>
+                )
+              )}
+            </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}
@@ -383,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}
@@ -413,7 +371,7 @@ function WidgetComponent({
           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}
@@ -433,14 +391,7 @@ function WidgetComponent({
               />
             </div>
           ) : (
-            <div
-              style={{
-                padding: 20,
-                fontSize: 15,
-                fontWeight: "500",
-                textAlign: "center"
-              }}
-            >
+            <div className=" p-[20px] text-[15px] font-medium text-center">
               Please add a {title ? title : "recipients"}
             </div>
           )}

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({
@@ -121,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)}
@@ -139,39 +140,41 @@ 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)}
@@ -179,17 +182,13 @@ const WidgetNameModal = (props) => {
                   >
                     <option
                       disabled={formdata?.textvalidate}
-                      style={{ fontSize: "13px" }}
+                      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>
                       );
@@ -199,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)}
@@ -222,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={() =>
@@ -262,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>
               );
             })}
@@ -272,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();
@@ -79,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,10 +34,18 @@ 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">
@@ -47,13 +56,20 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
           />
         </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,16 +1,23 @@
 import axios from "axios";
 import moment from "moment";
-import { isEnableSubscription, 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(
@@ -19,11 +26,12 @@ export async function fetchSubscription(
   isGuestSign = false
 ) {
   try {
-    const extClass = localStorage.getItem("Extand_Class");
+    const Extand_Class = localStorage.getItem("Extand_Class");
+    const extClass = Extand_Class && JSON.parse(Extand_Class);
+    // console.log("extClass ", extClass);
     let extUser;
-    if (extClass) {
-      const jsonSender = JSON.parse(extClass);
-      extUser = jsonSender[0].objectId;
+    if (extClass && extClass.length > 0) {
+      extUser = extClass[0].objectId;
     } else {
       extUser = extUserId;
     }
@@ -171,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);
@@ -369,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>
   );
 };
 
@@ -561,7 +546,7 @@ export const signPdfFun = async (
         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;
@@ -662,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,
@@ -676,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 {
@@ -1349,8 +1337,8 @@ export const multiSignEmbed = async (
           position.type === radioButtonWidget
             ? 10
             : position.type === "checkbox"
-            ? 10
-            : newUpdateHeight;
+              ? 10
+              : newUpdateHeight;
         const newHeight = ind ? (ind > 0 ? widgetHeight : 0) : widgetHeight;
 
         if (signyourself) {
@@ -2028,3 +2016,150 @@ export const handleSendOTP = async (email) => {
     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/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

@@ -16,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";

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":
@@ -14,8 +14,7 @@ export default function reportJson(id) {
           {
             btnId: "1231",
             hoverLabel: "Edit",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-pen",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -23,8 +22,7 @@ export default function reportJson(id) {
           {
             btnId: "2142",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -43,8 +41,7 @@ export default function reportJson(id) {
             btnId: "4536",
             btnLabel: "sign",
             hoverLabel: "Sign",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-signature",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -62,8 +59,7 @@ export default function reportJson(id) {
           {
             btnId: "8901",
             hoverLabel: "Share",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-share",
             redirectUrl: "",
             action: "share"
@@ -71,8 +67,7 @@ export default function reportJson(id) {
           {
             btnId: "1588",
             hoverLabel: "View",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-eye",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -80,11 +75,19 @@ export default function reportJson(id) {
           {
             btnId: "2234",
             hoverLabel: "option",
-            btnColor: "transparent",
+            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",
@@ -116,8 +119,7 @@ export default function reportJson(id) {
           {
             btnId: "1378",
             hoverLabel: "Edit",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -125,8 +127,7 @@ export default function reportJson(id) {
           {
             btnId: "1278",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -144,8 +145,7 @@ export default function reportJson(id) {
           {
             btnId: "1458",
             hoverLabel: "View",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -153,8 +153,7 @@ export default function reportJson(id) {
           {
             btnId: "1358",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -172,8 +171,7 @@ export default function reportJson(id) {
           {
             btnId: "1898",
             hoverLabel: "View",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -181,8 +179,7 @@ export default function reportJson(id) {
           {
             btnId: "1998",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -200,8 +197,7 @@ export default function reportJson(id) {
           {
             btnId: "1999",
             hoverLabel: "Share",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-share",
             redirectUrl: "",
             action: "share"
@@ -209,8 +205,7 @@ export default function reportJson(id) {
           {
             btnId: "1999",
             hoverLabel: "View",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-eye",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -218,11 +213,19 @@ export default function reportJson(id) {
           {
             btnId: "2234",
             hoverLabel: "option",
-            btnColor: "transparent",
+            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",
@@ -253,8 +256,7 @@ export default function reportJson(id) {
             btnId: "2001",
             btnLabel: "sign",
             hoverLabel: "Sign",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-signature",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -270,8 +272,7 @@ export default function reportJson(id) {
           {
             btnId: "2003",
             hoverLabel: "Edit",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-pen",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -279,8 +280,7 @@ export default function reportJson(id) {
           {
             btnId: "2004",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -296,8 +296,7 @@ export default function reportJson(id) {
           {
             btnId: "2204",
             hoverLabel: "Delete",
-            btnColor: "#f55a42",
-            textColor: "white",
+            btnColor: "op-btn-outline op-btn-error",
             btnIcon: "fa-solid fa-trash",
             action: "delete"
           }
@@ -310,14 +309,13 @@ export default function reportJson(id) {
     case "6TeaPr321t":
       return {
         reportName: "Templates",
-        heading: head,
+        heading: templateReport,
         actions: [
           {
             btnId: "2234",
             btnLabel: "Use",
             hoverLabel: "Use",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-plus",
             redirectUrl: "placeHolderSign",
             action: "redirect",
@@ -325,10 +323,22 @@ export default function reportJson(id) {
             message:
               "Click the 'Use' button to create a new document from an existing 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: "transparent",
+            btnColor: "",
             textColor: "black",
             btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
             action: "option",

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

@@ -52,7 +52,8 @@ const plans = [
       "API Access",
       "100 API signatures included",
       "DocumentId removal from signed docs",
-      "Custom email templates"
+      "Custom email templates",
+      "Auto reminders"
     ]
   },
   {

apps/OpenSign/src/layout/HomeLayout.js

@@ -12,6 +12,7 @@ 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();
@@ -247,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>
           ) : (
             <>
@@ -277,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>
@@ -298,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,20 +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")) {
@@ -30,53 +29,10 @@ const Dashboard = () => {
   }, [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;
@@ -90,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);
@@ -105,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

@@ -11,11 +11,15 @@ import SignersInput from "../components/shared/fields/SignersInput";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
 import { SaveFileSize } from "../constant/saveFileSize";
-import { getFileName, toDataUrl } from "../constant/Utils";
+import { checkIsSubscribed, getFileName, toDataUrl } from "../constant/Utils";
 import { PDFDocument } from "pdf-lib";
 import axios from "axios";
-import { isEnableSubscription, submitBtn } from "../constant/const";
+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() {
@@ -47,7 +51,9 @@ const Forms = (props) => {
     TimeToCompleteDays: 15,
     SendinOrder: "false",
     password: "",
-    file: ""
+    file: "",
+    remindOnceInEvery: 5,
+    autoreminder: false
   });
   const [fileupload, setFileUpload] = useState("");
   const [fileload, setfileload] = useState(false);
@@ -59,6 +65,7 @@ const Forms = (props) => {
   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 });
@@ -69,6 +76,17 @@ const Forms = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.title]);
 
+  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();
@@ -382,6 +400,8 @@ const Forms = (props) => {
         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));
@@ -401,7 +421,6 @@ const Forms = (props) => {
           className: "contracts_Users",
           objectId: ExtCls[0].objectId
         });
-
         const res = await object.save();
         if (res) {
           setSigners([]);
@@ -456,12 +475,19 @@ 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("");
     setpercentage(0);
     setTimeout(() => setIsReset(false), 50);
   };
+  const handleCancel = () => {
+    navigate("/dashboard/35KBoSgoAK");
+  };
   const handlePasswordSubmit = async (e) => {
     e.preventDefault();
     setIsPassword(false);
@@ -535,8 +561,11 @@ const Forms = (props) => {
       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"}>
@@ -546,16 +575,8 @@ 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>
       ) : (
         <>
@@ -566,29 +587,30 @@ const Forms = (props) => {
           >
             <form onSubmit={handlePasswordSubmit}>
               <div className="px-6 pt-3 pb-2">
-                <label className="mb-2 text-xs">Password</label>
+                <label className="mb-2 text-xs text-base-content">
+                  Password
+                </label>
                 <input
                   type="text"
                   name="password"
                   value={formData.password}
                   onChange={(e) => handleStrInput(e)}
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  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
                 />
-                {!isCorrectPass ? (
-                  <p className="ml-2 text-[11px] text-red-600">
-                    Please provide correct password
-                  </p>
-                ) : (
-                  <p className="ml-2 text-[11px] text-transparent text-red-600">
-                    .
-                  </p>
-                )}
+                <p
+                  className={`${
+                    !isCorrectPass
+                      ? "text-red-600"
+                      : "text-transparent pointer-events-none"
+                  } ml-2 text-[11px] `}
+                >
+                  Please provide correct password
+                </p>
               </div>
-              <hr />
-              <div className="px-6 my-3">
-                <button type="submit" className={submitBtn}>
+              <div className="px-6 mb-3">
+                <button type="submit" className="op-btn op-btn-primary">
                   Submit
                 </button>
               </div>
@@ -604,12 +626,12 @@ const Forms = (props) => {
                     style={{ width: `${percentage}%` }}
                   ></div>
                 </div>
-                <span className="text-black text-sm">{percentage}%</span>
+                <span className="text-base-content text-sm">{percentage}%</span>
               </div>
             )}
             {isDecrypting && (
               <div className="flex items-center gap-x-2">
-                <span className="text-black text-sm">
+                <span className="text-base-content text-sm">
                   Decrypting pdf please wait...
                 </span>
               </div>
@@ -623,13 +645,13 @@ const Forms = (props) => {
               </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="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 bg-white text-red-500"
+                      className="cursor-pointer px-[10px] text-[20px] font-bold text-red-500"
                     >
                       <i className="fa-solid fa-xmark"></i>
                     </div>
@@ -642,10 +664,10 @@ const Forms = (props) => {
                   )}
                 </div>
               ) : (
-                <div className="flex gap-2 justify-center items-center">
+                <div className="flex gap-2 justify-center items-center ">
                   <input
                     type="file"
-                    className="bg-white px-2 py-1.5 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                    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={
@@ -673,7 +695,7 @@ const Forms = (props) => {
               </label>
               <input
                 name="Name"
-                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={formData.Name}
                 onChange={(e) => handleStrInput(e)}
                 required
@@ -683,7 +705,7 @@ const Forms = (props) => {
               <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"
+                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)}
               />
@@ -701,18 +723,19 @@ const Forms = (props) => {
               </label>
               <input
                 name="Note"
-                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={formData.Note}
                 onChange={(e) => handleStrInput(e)}
                 required
               />
             </div>
-            <SelectFolder
-              onSuccess={handleFolder}
-              folderCls={props.Cls}
-              isReset={isReset}
-            />
-
+            {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">
@@ -722,7 +745,7 @@ const Forms = (props) => {
                 <input
                   type="number"
                   name="TimeToCompleteDays"
-                  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={formData.TimeToCompleteDays}
                   onChange={(e) => handleStrInput(e)}
                   required
@@ -730,46 +753,156 @@ const Forms = (props) => {
               </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">
-                  <input
-                    type="radio"
-                    value={"true"}
-                    name="SendinOrder"
-                    checked={formData.SendinOrder === "true"}
-                    className=""
-                    onChange={handleStrInput}
-                  />
-                  <div className="text-center">Yes</div>
+              <>
+                <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="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>
+                <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>
-              </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 text-white">
+            <div className="flex items-center mt-3 gap-2">
               <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`}
+                  isSubmit ? "cursor-progress" : ""
+                } op-btn op-btn-primary`}
                 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()}
+                className="op-btn op-btn-ghost"
+                onClick={() => handleCancel()}
               >
-                Reset
+                Cancel
               </div>
             </div>
           </form>

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 { 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();
@@ -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,16 +1,16 @@
 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 { isEnableSubscription, themeColor } from "../constant/const";
+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, base64url } = useParams();
-  let navigate = useNavigate();
+  const navigate = useNavigate();
   const [email, setEmail] = useState(userMail);
   const [OTP, setOTP] = useState("");
   const [EnterOTP, setEnterOtp] = useState(false);
@@ -19,9 +19,10 @@ function GuestLogin() {
   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
   }, []);
 
@@ -52,53 +53,51 @@ function GuestLogin() {
       //split url in array from '/'
       const checkSplit = decodebase64.split("/");
       setDocumentId(checkSplit[0]);
+      setContact((prev) => ({ ...prev, email: checkSplit[1] }));
       setEmail(checkSplit[1]);
-      setContactId(checkSplit[2]);
+      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: documentId
-        };
-        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();
@@ -134,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)
@@ -146,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/${documentId}/${contactId}`);
+          if (sendmail === "false") {
+            navigate(
+              `/load/recipientSignPdf/${documentId}/${contactId}?sendmail=${sendmail}`
+            );
+          } else {
+            navigate(`/load/recipientSignPdf/${documentId}/${contactId}`);
+          }
         }
       } catch (error) {
         console.log("err ", error);
@@ -155,156 +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="w-[250px] h-[66px] inline-block overflow-hidden">
-              {appLogo && (
-                <img
-                  src={appLogo}
-                  className="object-contain h-full"
-                  alt="logo"
-                />
-              )}
-            </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,16 +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 } from "../constant/Utils";
+import { fetchSubscription, getAppLogo, openInNewTab } from "../constant/Utils";
+import Loader from "../primitives/Loader";
 function Login() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -45,6 +42,7 @@ function Login() {
   });
   const [isModal, setIsModal] = useState(false);
   const [image, setImage] = useState();
+  const [isLoginSSO, setIsLoginSSO] = useState(false);
 
   useEffect(() => {
     if (localStorage.getItem("accesstoken")) {
@@ -263,7 +261,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[0].get("Company")
                                         };
                                         localStorage.setItem(
@@ -317,7 +315,7 @@ function Login() {
                                       const LocalUserDetails = {
                                         name: _user.name,
                                         email: email,
-                                        phone: _user.phone
+                                        phone: _user?.phone || ""
                                         // company: results.get("Company"),
                                       };
                                       localStorage.setItem(
@@ -868,7 +866,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[0].get("Company")
                               };
                               localStorage.setItem(
@@ -905,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(
@@ -982,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
@@ -994,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
           };
@@ -1016,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");
@@ -1040,201 +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
+            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="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly."
+                    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 className="text-sm flex justify-center items-center">
-                        <hr className="border-[1px] border-gray-300 w-full" />
-                        <span className="px-2 text-gray-500 cursor-default">
-                          OR
-                        </span>
-                        <hr className="border-[1px] border-gray-300 w-full" />
-                      </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}
@@ -1249,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) =>
@@ -1279,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) =>
@@ -1295,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>
@@ -1321,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,7 +1,6 @@
 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";
@@ -10,27 +9,15 @@ 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>
   );
 };
@@ -279,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];
@@ -300,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);
         }
@@ -449,21 +438,10 @@ function Opensigndrive() {
         <React.Fragment key={id}>
           <span
             onClick={() => handleRoute(id, folderData)}
-            style={{
-              color: "#a64b4e",
-              fontWeight: "400",
-              cursor: "pointer"
-            }}
+            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>
@@ -544,411 +522,290 @@ function Opensigndrive() {
     }
   }
   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">
-              {tourData && (
-                <Tour
-                  onRequestClose={closeTour}
-                  steps={tourData}
-                  isOpen={isTour}
-                  closeWithMask={false}
-                  scrollOffset={-100}
-                  rounded={5}
-                />
-              )}
-
+            <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
-                data-tut="reactourFirst"
-                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" data-tut="reactourSecond">
-                    <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
-                    data-tut="reactourThird"
-                    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>
-                      );
-                    })}
-
-                    <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>
-                      );
-                    })}
-                  </div>
                 </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>
+                    );
+                  })}
 
-                <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
-                      data-tut="reactourForth"
-                      className="sort"
+                  <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)}
-                    >
-                      <i
-                        className="fa fa-list"
-                        aria-hidden="true"
-                        style={{ fontSize: "23px", color: `${iconColor}` }}
-                      ></i>
-                    </div>
-                  )}
-                </div>
+                      className="fa fa-th-large"
+                      style={{ fontSize: "24px", color: `${iconColor}` }}
+                      aria-hidden="true"
+                    ></i>
+                  </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>
-            ) : (
-              <div data-tut="reactourFifth">
-                <React.Suspense fallback={<Loader />}>
-                  <DriveBody
-                    dataTutSixth="reactourSixth"
-                    dataTutSeventh="reactourSeventh"
-                    pdfData={pdfData}
-                    setFolderName={setFolderName}
-                    setIsLoading={setIsLoading}
-                    setDocId={setDocId}
-                    getPdfDocumentList={getPdfDocumentList}
-                    isDocId={docId}
-                    setPdfData={setPdfData}
-                    isList={isList}
-                    setIsAlert={setIsAlert}
-                    setSkip={setSkip}
-                    sortingData={sortingData}
-                  />
-                  {loading && (
-                    <div style={{ textAlign: "center" }}>Loading...</div>
-                  )}
-                </React.Suspense>
-              </div>
-            )}
-          </>
-        )}
-      </div>
+          {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}
+                  setDocId={setDocId}
+                  getPdfDocumentList={getPdfDocumentList}
+                  isDocId={docId}
+                  setPdfData={setPdfData}
+                  isList={isList}
+                  setIsAlert={setIsAlert}
+                  setSkip={setSkip}
+                  sortingData={sortingData}
+                />
+                {loading && (
+                  <div className="text-center pb-[20px]">Loading...</div>
+                )}
+              </React.Suspense>
+            </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();
@@ -127,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();
@@ -140,7 +143,7 @@ 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
           },
           subscription: zohoRes.data.result.subscription
@@ -409,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/PlaceHolderSign.js

@@ -10,9 +10,8 @@ import { useDrag, useDrop } from "react-dnd";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import WidgetComponent from "../components/pdf/WidgetComponent";
 import Tour from "reactour";
-import loader from "../assets/images/loader2.gif";
 import { useLocation, useParams } from "react-router-dom";
-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";
@@ -49,7 +48,8 @@ import { SaveFileSize } from "../constant/saveFileSize";
 import { EmailBody } from "../components/pdf/EmailBody";
 import Upgrade from "../primitives/Upgrade";
 import Alert from "../primitives/Alert";
-
+import Loader from "../primitives/Loader";
+import mail_sent_gif from "../assets/gif/mail_sent.gif";
 function PlaceHolderSign() {
   const editorRef = useRef();
   const navigate = useNavigate();
@@ -405,11 +405,14 @@ function PlaceHolderSign() {
       };
       setHandleError("Error: Something went wrong!");
       setIsLoading(loadObj);
-    } else if (res[0] && res.length) {
+    } else if (res.length && res[0]?.objectId) {
       setActiveMailAdapter(res[0]?.active_mail_adapter);
       setSignerUserId(res[0].objectId);
       const tourstatus = res[0].TourStatus && res[0].TourStatus;
-      if (tourstatus && tourstatus.length > 0) {
+      const alreadyPlaceholder = documentData[0]?.SignedUrl;
+      if (alreadyPlaceholder) {
+        setCheckTourStatus(true);
+      } else if (tourstatus && tourstatus.length > 0) {
         setTourStatus(tourstatus);
         const checkTourRecipients = tourstatus.filter(
           (data) => data.placeholder
@@ -933,6 +936,7 @@ function PlaceHolderSign() {
           Placeholders: filterPrefill,
           SignedUrl: pdfUrl,
           Signers: signers,
+          SentToOthers: true,
           ExpiryDate: {
             iso: updateExpiryDate,
             __type: "Date"
@@ -942,7 +946,8 @@ function PlaceHolderSign() {
         data = {
           Placeholders: filterPrefill,
           SignedUrl: pdfUrl,
-          Signers: signers
+          Signers: signers,
+          SentToOthers: true
         };
       }
       await axios
@@ -995,9 +1000,10 @@ function PlaceHolderSign() {
     for (let i = 0; i < signerMail.length; i++) {
       const objectId = signerMail[i].objectId;
       const hostUrl = window.location.origin;
+      const sendMail = false;
       //encode this url value `${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}` to base64 using `btoa` function
       const encodeBase64 = btoa(
-        `${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}`
+        `${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}/${sendMail}`
       );
       let signPdf = `${hostUrl}/login/${encodeBase64}`;
       shareLinkList.push({ signerEmail: signerMail[i].Email, url: signPdf });
@@ -1008,7 +1014,11 @@ function PlaceHolderSign() {
           className="flex flex-row justify-between items-center mb-1"
           key={ind}
         >
-          {copied && <Alert type="success">Copied</Alert>}
+          {copied && (
+            <Alert type="success">
+              <div className="ml-3">Copied</div>
+            </Alert>
+          )}
           <span className="w-[220px] md:w-[300px] whitespace-nowrap overflow-hidden text-ellipsis  ">
             {data.signerEmail}
           </span>
@@ -1016,26 +1026,13 @@ function PlaceHolderSign() {
             <button
               onClick={() => copytoclipboard(data.url)}
               type="button"
-              className="flex flex-row items-center text-white font-[500]"
+              className="flex flex-row items-center op-link op-link-primary"
             >
-              <i
-                className="fa-solid fa-link underline text-blue-700"
-                aria-hidden="true"
-              ></i>
-              <span className=" hidden md:block ml-1 underline text-blue-700">
-                Copy link
-              </span>
+              <i className="fa-solid fa-link" aria-hidden="true"></i>
+              <span className=" hidden md:block ml-1 ">Copy link</span>
             </button>
-            <RWebShare
-              data={{
-                url: data.url,
-                title: "Sign url"
-              }}
-            >
-              <i
-                className="fa-solid fa-share-from-square cursor-pointer "
-                style={{ color: themeColor }}
-              ></i>
+            <RWebShare data={{ url: data.url, title: "Sign url" }}>
+              <i className="fa-solid fa-share-from-square op-link op-link-secondary no-underline"></i>
             </RWebShare>
           </div>
         </div>
@@ -1104,10 +1101,10 @@ function PlaceHolderSign() {
             document_title: documentName,
             sender_name: senderName,
             sender_mail: senderEmail,
-            sender_phone: senderPhone,
+            sender_phone: senderPhone || "",
             receiver_name: signerMail[i].Name,
             receiver_email: signerMail[i].Email,
-            receiver_phone: signerMail[i].Phone,
+            receiver_phone: signerMail[i]?.Phone || "",
             expiry_date: localExpireDate,
             company_name: orgName,
             signing_url: `<a href=${signPdf}>Sign here</a>`
@@ -1159,40 +1156,45 @@ function PlaceHolderSign() {
     }
     if (sendMail.data.result.status === "success") {
       setMailStatus("success");
-
-      if (
-        requestBody &&
-        requestSubject &&
-        isCustomize &&
-        (isSubscribe || !isEnableSubscription)
-      ) {
-        try {
-          const data = {
+      try {
+        let data;
+        if (
+          requestBody &&
+          requestSubject &&
+          isCustomize &&
+          (isSubscribe || !isEnableSubscription)
+        ) {
+          data = {
             RequestBody: htmlReqBody,
-            RequestSubject: requestSubject
+            RequestSubject: requestSubject,
+            SendMail: true
+          };
+        } else {
+          data = {
+            SendMail: true
           };
-
-          await axios
-            .put(
-              `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-                "_appName"
-              )}_Document/${documentId}`,
-              data,
-              {
-                headers: {
-                  "Content-Type": "application/json",
-                  "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-                  "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-                }
-              }
-            )
-            .then(() => {})
-            .catch((err) => {
-              console.log("axois err ", err);
-            });
-        } catch (e) {
-          console.log("error", e);
         }
+
+        await axios
+          .put(
+            `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+              "_appName"
+            )}_Document/${documentId}`,
+            data,
+            {
+              headers: {
+                "Content-Type": "application/json",
+                "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+                "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+              }
+            }
+          )
+          .then(() => {})
+          .catch((err) => {
+            console.log("axois err ", err);
+          });
+      } catch (e) {
+        console.log("error", e);
       }
 
       setIsSend(true);
@@ -1622,32 +1624,18 @@ function PlaceHolderSign() {
       <Title title={state?.title ? state.title : "New Document"} />
       <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}
+          >
             {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 flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
+                <Loader />
+                <span className="text-[13px] font-bold">
                   This might take some time
                 </span>
               </div>
@@ -1693,11 +1681,6 @@ function PlaceHolderSign() {
               {/* this modal is used show alert set placeholder for all signers before send mail */}
 
               <ModalUi
-                headerColor={
-                  isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
-                    ? "#dc3545"
-                    : isSendAlert.mssg === "confirm" && themeColor
-                }
                 isOpen={isSendAlert.alert}
                 title={
                   isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
@@ -1707,10 +1690,7 @@ function PlaceHolderSign() {
                 handleClose={() => setIsSendAlert({})}
                 showHeaderMessage={isSendAlert.mssg === "confirm"}
               >
-                <div
-                  className="max-h-96 overflow-y-scroll scroll-hide"
-                  style={{ padding: 20 }}
-                >
+                <div className="max-h-96 overflow-y-scroll scroll-hide p-[20px] text-base-content">
                   {isSendAlert.mssg === "sure" ? (
                     <span>
                       Please ensure there&apos;s at least one signature widget
@@ -1721,88 +1701,67 @@ function PlaceHolderSign() {
                   ) : (
                     isSendAlert.mssg === "confirm" && (
                       <>
-                        <>
-                          {!isCustomize && (
-                            <span>
-                              Are you sure you want to send out this document
-                              for signatures?
-                            </span>
-                          )}
-                          {isCustomize &&
-                            (!isEnableSubscription || isSubscribe) && (
-                              <>
-                                <EmailBody
-                                  editorRef={editorRef}
-                                  requestBody={requestBody}
-                                  requestSubject={requestSubject}
-                                  handleOnchangeRequest={handleOnchangeRequest}
-                                  setRequestSubject={setRequestSubject}
-                                />
-                                <div
-                                  className={
-                                    "flex justify-end  items-center gap-1 mt-2 underline text-blue-700 focus:outline-none cursor-pointer "
-                                  }
-                                  onClick={() => {
-                                    setRequestBody(defaultBody);
-                                    setRequestSubject(defaultSubject);
-                                  }}
-                                >
-                                  <span>Reset to default</span>
-                                </div>
-                              </>
-                            )}
-                          <div
-                            className={
-                              "flex flex-row md:items-center gap-2 md:gap-6 mt-2 "
-                            }
-                          >
-                            <div className="flex flex-row gap-2">
-                              <button
-                                onClick={() => sendEmailToSigners()}
-                                className=" shadow rounded-[2px] py-[3px] px-[25px] font-[500] text-sm "
-                                style={{
-                                  background: themeColor,
-                                  color: "white"
+                        {!isCustomize && (
+                          <span>
+                            Are you sure you want to send out this document for
+                            signatures?
+                          </span>
+                        )}
+                        {isCustomize &&
+                          (!isEnableSubscription || isSubscribe) && (
+                            <>
+                              <EmailBody
+                                editorRef={editorRef}
+                                requestBody={requestBody}
+                                requestSubject={requestSubject}
+                                handleOnchangeRequest={handleOnchangeRequest}
+                                setRequestSubject={setRequestSubject}
+                              />
+                              <div
+                                className="flex justify-end items-center gap-1 mt-2 op-link op-link-primary"
+                                onClick={() => {
+                                  setRequestBody(defaultBody);
+                                  setRequestSubject(defaultSubject);
                                 }}
                               >
-                                Send
-                              </button>
-                              {isCustomize && (
-                                <button
-                                  onClick={() => {
-                                    setIsCustomize(false);
-                                  }}
-                                  className=" shadow rounded-[2px] py-[3px] px-[25px] font-[500] text-sm border-[0.1px] border-gray-300"
-                                >
-                                  Close
-                                </button>
-                              )}
-                            </div>
-
-                            {!isCustomize &&
-                              (isSubscribe || !isEnableSubscription) && (
-                                <span
-                                  className={
-                                    "cursor-pointer underline text-blue-700 focus:outline-none"
-                                  }
-                                  onClick={() => {
-                                    setIsCustomize(!isCustomize);
-                                  }}
-                                >
-                                  Cutomize Email
-                                </span>
-                              )}
-
-                            {!isSubscribe && isEnableSubscription && (
-                              <div className="mt-2">
-                                <Upgrade
-                                  message="Upgrade to customize Email"
-                                  newWindow={true}
-                                />
+                                <span>Reset to default</span>
                               </div>
+                            </>
+                          )}
+                        <div className="flex flex-row md:items-center gap-2 md:gap-6 mt-2">
+                          <div className="flex flex-row gap-2">
+                            <button
+                              onClick={() => sendEmailToSigners()}
+                              className="op-btn op-btn-primary font-[500] text-sm shadow"
+                            >
+                              Send
+                            </button>
+                            {isCustomize && (
+                              <button
+                                onClick={() => setIsCustomize(false)}
+                                className="op-btn op-btn-ghost font-[500] text-sm"
+                              >
+                                Close
+                              </button>
                             )}
                           </div>
-                        </>
+
+                          {!isCustomize &&
+                            (isSubscribe || !isEnableSubscription) && (
+                              <span
+                                className="op-link op-link-accent text-sm"
+                                onClick={() => setIsCustomize(!isCustomize)}
+                              >
+                                Cutomize Email
+                              </span>
+                            )}
+
+                          {!isSubscribe && isEnableSubscription && (
+                            <div className="mt-2">
+                              <Upgrade message="Upgrade to customize Email" />
+                            </div>
+                          )}
+                        </div>
                       </>
                     )
                   )}
@@ -1810,28 +1769,15 @@ function PlaceHolderSign() {
                   {isSendAlert.mssg === "confirm" && (
                     <>
                       <div className="flex justify-center items-center mt-3">
-                        <span
-                          style={{
-                            height: 1,
-                            width: "20%",
-                            backgroundColor: "#ccc"
-                          }}
-                        ></span>
+                        <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
                         <span className="ml-[5px] mr-[5px]">or</span>
-                        <span
-                          style={{
-                            height: 1,
-                            width: "20%",
-                            backgroundColor: "#ccc"
-                          }}
-                        ></span>
+                        <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
                       </div>
                       <div className="mt-3 mb-3">{handleShareList()}</div>
                     </>
                   )}
                 </div>
               </ModalUi>
-
               {/* this modal is used show send mail  message and after send mail success message */}
               <ModalUi
                 isOpen={isSend}
@@ -1841,77 +1787,61 @@ function PlaceHolderSign() {
                   setSignerPos([]);
                 }}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="h-[100%] p-[20px]">
                   {mailStatus === "success" ? (
-                    <p>You have successfully sent mails to all recipients!</p>
+                    <div className="text-center mb-[10px]">
+                      <img
+                        src={mail_sent_gif}
+                        className="w-[120px] h-[120px] mx-auto"
+                      />
+                      <p>You have successfully sent mails to all recipients!</p>
+                      {isCurrUser && (
+                        <p>Do you want to sign documents right now ?</p>
+                      )}
+                    </div>
                   ) : (
                     <p>Please setup mail adapter to send mail!</p>
                   )}
-                  {isCurrUser && (
-                    <p>Do you want to sign documents right now ?</p>
+                  {!mailStatus && (
+                    <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
                   )}
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
                   {isCurrUser && (
                     <button
-                      onClick={() => {
-                        handleRecipientSign();
-                      }}
-                      style={{
-                        background: themeColor,
-                        color: "white"
-                      }}
+                      onClick={() => handleRecipientSign()}
                       type="button"
-                      className="finishBtn"
+                      className="op-btn op-btn-primary mr-1"
                     >
                       Yes
                     </button>
                   )}
-
                   <button
                     onClick={() => {
                       setIsSend(false);
                       setSignerPos([]);
                     }}
                     type="button"
-                    className="finishBtn cancelBtn"
+                    className="op-btn op-btn-ghost"
                   >
                     {isCurrUser ? "No" : "Close"}
                   </button>
                 </div>
               </ModalUi>
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={isShowEmail}
                 title={"signers alert"}
                 handleClose={() => {
                   setIsShowEmail(false);
                 }}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="h-[100%] 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="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
                   <button
                     onClick={() => {
                       setIsShowEmail(false);
                     }}
                     type="button"
-                    className="finishBtn cancelBtn"
+                    className="op-btn op-btn-primary"
                   >
                     Ok
                   </button>
@@ -2065,12 +1995,13 @@ function PlaceHolderSign() {
               </div>
             ) : (
               <div>
-                <div className="signerComponent" aria-disabled>
+                <div
+                  className="hidden md:block w-[180px] h-full bg-base-100"
+                  aria-disabled
+                >
                   <div
-                    style={{
-                      maxHeight: window.innerHeight - 70 + "px"
-                    }}
-                    className="autoSignScroll"
+                    style={{ maxHeight: window.innerHeight - 70 + "px" }}
+                    className="overflow-y-auto hide-scrollbar"
                   >
                     <SignerListPlace
                       signerPos={signerPos}
@@ -2116,33 +2047,22 @@ function PlaceHolderSign() {
       </DndProvider>
       <div>
         <ModalUi
-          headerColor={"#dc3545"}
           isOpen={isAlreadyPlace.status}
           title={"Document Alert"}
           showClose={false}
         >
-          <div style={{ height: "100%", padding: 20 }}>
+          <div className="h-[100%] p-[20px]">
             <p>{isAlreadyPlace.message}</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={() => handleRecipientSign()}
               type="button"
-              className="finishBtn cancelBtn"
+              className="op-btn op-btn-primary"
             >
               View
             </button>
           </div>
         </ModalUi>
-
         <LinkUserModal
           handleAddUser={handleAddUser}
           isAddUser={isAddUser}

apps/OpenSign/src/pages/PlanSubscriptions.js

@@ -4,6 +4,8 @@ import checkmark from "../assets/images/checkmark.png";
 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,8 +18,17 @@ 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=" + encodeURIComponent(userDetails.name)
@@ -75,55 +86,33 @@ 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 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 text-center border-collapse border-[1px] border-gray-300 max-w-[250px]"
@@ -198,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>
@@ -208,22 +195,23 @@ const PlanSubscriptions = () => {
                 ))}
               </ul>
             </div>
-            <div className="text-sm flex justify-center items-center">
-              <hr className="border-[1px] border-gray-300 w-[20%]" />
-              <span className="px-2 text-gray-500 cursor-default">or</span>
-              <hr className="border-[1px] border-gray-300 w-[20%]" />
+            <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

@@ -7,6 +7,7 @@ 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();
@@ -173,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>
       ) : (
         <>

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,7 +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 } from "../constant/Utils";
+import { getAppLogo, openInNewTab } from "../constant/Utils";
+import Loader from "../primitives/Loader";
 const Signup = () => {
   const { width } = useWindowSize();
   const navigate = useNavigate();
@@ -33,7 +34,7 @@ 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 clearStorage = async () => {
@@ -501,80 +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="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
@@ -582,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
@@ -594,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
@@ -606,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 ? (
@@ -658,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>
               )}
@@ -694,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

@@ -2,10 +2,10 @@ import React, { useState, useRef, useEffect } from "react";
 import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
 import Parse from "parse";
-import { isEnableSubscription, themeColor } from "../constant/const";
+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";
@@ -47,7 +47,7 @@ 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([]);
@@ -70,7 +70,6 @@ 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);
@@ -109,6 +108,7 @@ function SignYourSelf() {
   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);
@@ -229,31 +229,12 @@ function SignYourSelf() {
           setIsUiLoading(false);
           setIsSignPad(false);
           setIsEmail(true);
+          setIsCelebration(true);
           setXyPostion([]);
           setSignBtnPosition([]);
-        }
-      }
-
-      if (!isCompleted) {
-        //check current user email 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!");
-          }
+          setTimeout(() => {
+            setIsCelebration(false);
+          }, 5000);
         }
       }
     } else if (
@@ -603,104 +584,122 @@ function SignYourSelf() {
   };
   //function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url
   async function embedWidgetsData() {
-    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;
+    //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 {
-        setIsCeleb(true);
-        setTimeout(() => {
-          setIsCeleb(false);
-        }, 3000);
-        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.`
-            });
+          //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."
+        });
       }
-    } 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
@@ -1093,38 +1092,29 @@ 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}
@@ -1169,7 +1159,6 @@ function SignYourSelf() {
               }}
             >
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={isAlert.isShow}
                 title={isAlert?.header || "Alert"}
                 handleClose={() => {
@@ -1179,7 +1168,7 @@ function SignYourSelf() {
                   });
                 }}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="p-[20px] h-full">
                   <p>{isAlert.alertMessage}</p>
                 </div>
               </ModalUi>
@@ -1187,25 +1176,16 @@ function SignYourSelf() {
               {/* 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
@@ -1259,7 +1239,6 @@ function SignYourSelf() {
               <EmailComponent
                 isEmail={isEmail}
                 pdfUrl={pdfUrl}
-                isCeleb={isCeleb}
                 setIsEmail={setIsEmail}
                 pdfName={pdfDetails[0] && pdfDetails[0].Name}
                 setSuccessEmail={setSuccessEmail}
@@ -1332,7 +1311,7 @@ function SignYourSelf() {
                 maxHeight: window.innerHeight - 70 + "px",
                 backgroundColor: "white"
               }}
-              className="autoSignScroll"
+              className="overflow-y-auto hide-scrollbar"
             >
               {!isCompleted ? (
                 <div>
@@ -1344,7 +1323,6 @@ function SignYourSelf() {
                     handleDivClick={handleDivClick}
                     handleMouseLeave={handleMouseLeave}
                     isDragSign={isDragSign}
-                    themeColor={themeColor}
                     dragStamp={dragStamp}
                     dragRef={dragRef}
                     isDragStamp={isDragStamp}
@@ -1365,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";
@@ -36,6 +36,7 @@ import AddRoleModal from "../components/pdf/AddRoleModal";
 import PlaceholderCopy from "../components/pdf/PlaceholderCopy";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
+import Parse from "parse";
 const TemplatePlaceholder = () => {
   const navigate = useNavigate();
   const { templateId } = useParams();
@@ -704,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 {
@@ -1207,17 +1202,19 @@ const TemplatePlaceholder = () => {
     setIsCheckbox(false);
   };
 
-  console.log("signerpos", signerPos);
   return (
     <div>
       <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
@@ -1260,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 }}>
+                <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 */}
@@ -1285,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>
@@ -1319,7 +1300,7 @@ const TemplatePlaceholder = () => {
                           setIsCreateDocModal(false);
                         }}
                         type="button"
-                        className="finishBtn cancelBtn"
+                        className="op-btn op-btn-secondary ml-2"
                       >
                         No
                       </button>
@@ -1327,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>
@@ -1402,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}
@@ -1505,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}

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";
@@ -8,10 +12,11 @@ import sanitizeFileName from "../primitives/sanitizeFileName";
 import axios from "axios";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
-import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
+import { isEnableSubscription } from "../constant/const";
 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();
@@ -27,6 +32,10 @@ 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
   );
@@ -37,6 +46,7 @@ function UserProfile() {
   const [otp, setOtp] = useState("");
   const [otpLoader, setOtpLoader] = useState(false);
   const [isEmailVerified, setIsEmailVerified] = useState(false);
+  // const [userNameError, setUserNameError] = useState("");
   useEffect(() => {
     getUserDetail();
   }, []);
@@ -74,46 +84,72 @@ function UserProfile() {
       }
     }
   };
+  //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);
-              localStorage.setItem("profileImg", res.ProfilePic);
-              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);
+      }
     }
   };
 
@@ -122,14 +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,
       JobTitle: jobTitle,
       Company: company
+      // UserName: publicUserName || ""
     };
+
     await axios.put(
       parseBaseUrl + "classes/" + extClass + "/" + ExtUserId,
       body,
@@ -147,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);
   };
@@ -241,29 +277,45 @@ function UserProfile() {
     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
@@ -275,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;
@@ -301,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>{" "}
@@ -309,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)}
                   />
                 ) : (
@@ -318,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}
                   />
@@ -339,7 +391,7 @@ 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">Company:</span>{" "}
@@ -347,7 +399,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={company}
-                    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) => setCompany(e.target.value)}
                   />
                 ) : (
@@ -356,7 +408,7 @@ 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">Job title:</span>{" "}
@@ -364,7 +416,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={jobTitle}
-                    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) => setJobTitle(e.target.value)}
                   />
                 ) : (
@@ -390,6 +442,37 @@ function UserProfile() {
                   )}
                 </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
@@ -404,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 && (
@@ -437,44 +515,29 @@ 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
@@ -482,43 +545,29 @@ function UserProfile() {
               handleClose={handleCloseVerifyModal}
             >
               {otpLoader ? (
-                <div
-                  style={{
-                    height: "150px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  }}
-                >
-                  <div
-                    style={{
-                      fontSize: "45px",
-                      color: "#3dd3e0"
-                    }}
-                    className="loader-37"
-                  ></div>
+                <div className="h-[150px] flex justify-center items-center">
+                  <Loader />
                 </div>
               ) : (
                 <form onSubmit={(e) => handleVerifyEmail(e)}>
-                  <div className="px-6 py-3">
+                  <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="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                      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>
-                  <hr />
-                  <div className="px-6 my-3">
-                    <button type="submit" className={submitBtn}>
+                  <div className="px-6 mb-3">
+                    <button type="submit" className="op-btn op-btn-primary">
                       Verify
                     </button>
                     <button
-                      className={`${rejectBtn} ml-2`}
+                      className="op-btn op-btn-secondary ml-2"
                       onClick={(e) => handleResend(e)}
                     >
                       Resend

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,6 +1,6 @@
 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) => {
@@ -18,32 +18,8 @@ const LinkUserModal = (props) => {
         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

@@ -6,39 +6,35 @@ const ModalUi = ({
   children,
   title,
   isOpen,
-  headColor,
   handleClose,
   showHeader = true,
   showClose = true,
-  styleClass,
+  reduceWidth,
   showHeaderMessage
 }) => {
   return (
     <>
       {isOpen && (
-        <div className="fixed z-[999] 2   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
@@ -49,7 +45,7 @@ const ModalUi = ({
             )}
             <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,
@@ -12,12 +11,12 @@ function CustomModal({
 }) {
   return (
     show && (
-      <div className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center w-full h-full rounded">
-        <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 && (
@@ -25,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()}
                 >
@@ -34,7 +32,7 @@ function CustomModal({
                 </button>
                 <button
                   type="button"
-                  className={rejectBtn}
+                  className="op-btn op-btn-secondary"
                   onClick={() => setIsDecline({ isDeclined: false })}
                 >
                   Close
@@ -43,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"

apps/OpenSign/src/primitives/TourContentWithBtn.js

@@ -12,22 +12,14 @@ export default function TourContentWithBtn({ message, isChecked }) {
   return (
     <div>
       <p>{message}</p>
-      <label
-        style={{
-          textAlign: "center",
-          display: "flex",
-          justifyContent: "center"
-        }}
-      >
+      <label className="flex items-center justify-center mb-0">
         <input
           type="checkbox"
-          style={{ marginRight: 3 }}
+          className="op-checkbox op-checkbox-xs mr-1"
           checked={isCheck}
           onChange={handleCheck}
-        />{" "}
-        <span style={{ color: "#787878", fontSize: 12 }}>
-          Don&apos;t show this again
-        </span>
+        />
+        <span className="#787878 text-[12px]">Don&apos;t show this again</span>
       </label>
     </div>
   );

apps/OpenSign/src/primitives/Upgrade.js

@@ -1,20 +1,13 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
 import { openInNewTab } from "../constant/Utils";
 
-function Upgrade({ message, newWindow }) {
-  const navigation = useNavigate();
-
+function Upgrade({ message }) {
   return (
     <sup>
       <span
         onClick={() => {
-          if (newWindow) {
-            const url = window.location.origin + "/subscription";
-            openInNewTab(url);
-          } else {
-            navigation("/subscription");
-          }
+          const url = window.location.origin + "/subscription";
+          openInNewTab(url);
         }}
         className="text-blue-800 text-sm cursor-pointer underline"
       >

apps/OpenSign/src/primitives/Validate.js

@@ -49,13 +49,10 @@ const Validate = () => {
       <Outlet />
     </div>
   ) : (
-    <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/styles/AddUser.css

@@ -90,7 +90,6 @@
   background-size: 1rem auto;
 }
 
-
 @media (max-width: 375px) {
   .validationlist {
     background-position: right 0.5rem top 50%;

apps/OpenSign/src/styles/loginPage.css

@@ -1,197 +0,0 @@
-.loginInput {
-  padding: 10px;
-  border-radius: 4px;
-  width: 100%;
-  font-size: 0.75rem;
-  border: 1px solid #e2dddd;
-  background-color: #e0e5f5;
-  color: black;
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
-  padding-top: 0.5rem !important;
-  font-family: inherit;
-  font-feature-settings: inherit;
-  font-variation-settings: inherit;
-  font-weight: inherit;
-  overflow: visible;
-}
-.loginInput:focus {
-  outline: none;
-  border: none;
-}
-.verifyBtn {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-  padding: 3px 30px;
-  color: white;
-  font-weight: 500 !important;
-  font-size: 14px !important;
-  border: none;
-}
-.verifyBtn:focus {
-  border: none;
-  outline: none;
-}
-
-.verifyBtn:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-  color: white;
-}
-.fakeimg {
-  height: 200px;
-  background: #aaa;
-}
-
-.GTRY {
-  border: 1px solid #dee2e6;
-  margin-top: 75px;
-  padding-bottom: 20px;
-  background-color: #fff;
-}
-
-.main_head {
-  width: 100%;
-  height: 66px;
-  background-color: #fff;
-  margin-bottom: 52px;
-  padding-top: 10px;
-}
-
-.main-logo {
-  width: 250px;
-  height: 66px;
-  display: inline-block;
-}
-
-.card-box {
-  background: #fff;
-  min-height: 50px;
-  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
-  position: relative;
-  margin-bottom: 20px;
-  transition: 0.5s;
-  border: 1px solid #f2f2f2;
-  border-radius: 7px;
-  margin-top: 10px;
-}
-
-.LKJH {
-  display: flex;
-}
-
-.GTR {
-  text-align: left;
-}
-
-.JUI {
-  text-align: right;
-}
-
-.btn-info {
-  color: #fff;
-  background-color: #15b4e9;
-  border-color: #15b4e9;
-}
-
-.btn-info:hover {
-  color: #fff;
-  background-color: #15b4e9;
-  border-color: #15b4e9;
-}
-
-.btn-reg {
-  color: #15b4e9;
-  background-color: #ffffff;
-  border-color: #15b4e9;
-}
-
-.btn-reg:hover {
-  color: #15b4e9;
-  background-color: #ffffff;
-  border-color: #15b4e9;
-}
-
-.SYTU {
-  display: flex;
-}
-
-.MLKI {
-  float: right;
-  margin-bottom: 12px;
-}
-
-.login-btn {
-  width: 100% !important;
-  display: block !important;
-}
-
-@media only screen and (max-width: 667px) {
-  .MLKI {
-    float: inherit;
-  }
-
-  .login-btn {
-    width: 210px !important;
-  }
-}
-
-.MLKI a {
-  color: #212529;
-}
-
-.KNLO {
-  color: #878787;
-  font-size: 13px;
-}
-
-.form-check-label {
-  margin-left: 17px;
-  margin-bottom: 12px;
-}
-.welcomeText {
-  font-size: 30px;
-}
-
-@media only screen and (max-width: 600px) {
-  .KLO1 {
-    display: none;
-  }
-
-  .MLKI a {
-    font-size: 12px;
-  }
-
-  .form-check-label {
-    font-size: 12px;
-    margin-bottom: 14px;
-  }
-
-  .MKUY {
-    text-align: center;
-    padding-top: 10px;
-  }
-
-  .main_head {
-    margin-bottom: 12px;
-    padding-top: 10px;
-    border-bottom: 1px dashed #eeeeee;
-  }
-}
-@media screen and (max-width: 366px) {
-  .main-logo {
-    width: 150px;
-    height: 46px;
-    display: inline-block;
-  }
-  .welcomeText {
-    font-size: 20px;
-  }
-  .KNLO {
-    color: #878787;
-    font-size: 10px;
-  }
-  .btnContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}