WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-17 21:25:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: update loader and ui design of components

Browse Source
This commit is contained in:
prafull-opensignlabs
2024-06-14 18:05:10 +05:30
parent 6a365f7734
commit f7bb11ede1
52 changed files with 733 additions and 773 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/package-lock.json
Generated
-24
View File
@@ -34,7 +34,6 @@
"react-gtm-module": "^2.0.11",
"react-helmet": "^6.1.0",
"react-konva": "^18.2.10",
"react-modal": "^3.16.1",
"react-pdf": "^9.0.0",
"react-quill": "^2.0.0",
"react-redux": "^9.1.2",
@@ -10967,11 +10966,6 @@
"url": "https://github.com/sindresorhus/execa?sponsor=1"
}
},
"node_modules/exenv": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
"integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
},
"node_modules/exit": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -20171,24 +20165,6 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"node_modules/react-modal": {
"version": "3.16.1",
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
"integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
"dependencies": {
"exenv": "^1.2.0",
"prop-types": "^15.7.2",
"react-lifecycles-compat": "^3.0.0",
"warning": "^4.0.3"
},
"engines": {
"node": ">=8"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
"react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
}
},
"node_modules/react-native-crypto-js": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/react-native-crypto-js/-/react-native-crypto-js-1.0.0.tgz",
apps/OpenSign/package.json
-1
View File
@@ -29,7 +29,6 @@
"react-gtm-module": "^2.0.11",
"react-helmet": "^6.1.0",
"react-konva": "^18.2.10",
"react-modal": "^3.16.1",
"react-pdf": "^9.0.0",
"react-quill": "^2.0.0",
"react-redux": "^9.1.2",
apps/OpenSign/public/version.txt
BIN
View File
Binary file not shown.
apps/OpenSign/src/App.js
+5 -4
View File
@@ -17,6 +17,7 @@ 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"));
@@ -30,10 +31,10 @@ 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.min.mjs`;
const Loader = () => {
const AppLoader = () => {
return (
<div className="flex justify-center items-center h-[100vh] text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="flex justify-center items-center h-[100vh]">
<Loader />
</div>
);
};
@@ -64,7 +65,7 @@ function App() {
return (
<div className="bg-base-200">
{isloading ? (
<Loader />
<AppLoader />
) : (
<BrowserRouter>
<Routes>
apps/OpenSign/src/assets/images/loader2.gif
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 61 KiB

apps/OpenSign/src/components/AddSigner.js
+8 -17
View File
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from "react";
import Parse from "parse";
import axios from "axios";
import Loader from "../primitives/Loader";
const AddSigner = (props) => {
const [name, setName] = useState("");
@@ -225,11 +226,11 @@ const AddSigner = (props) => {
return (
<div className="h-full p-[20px]">
{isLoader && (
<div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30">
<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 flex items-center">
<input
@@ -239,17 +240,14 @@ const AddSigner = (props) => {
onChange={handleAddYourselfChange}
className="op-checkbox op-checkbox-sm"
/>
<label htmlFor="addYourself" className="ml-2 text-gray-700 mb-0">
<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 className="text-[red] text-[13px]"> *</span>
</label>
@@ -264,10 +262,7 @@ const AddSigner = (props) => {
/>
</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 className="text-[red] text-[13px]"> *</span>
</label>
@@ -282,10 +277,7 @@ const AddSigner = (props) => {
/>
</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
</label>
<input
@@ -297,7 +289,6 @@ const AddSigner = (props) => {
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 gap-x-2 justify-start">
<button type="submit" className="op-btn op-btn-primary">
Submit
apps/OpenSign/src/components/AddUser.js
+3 -2
View File
@@ -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("");
@@ -194,8 +195,8 @@ const AddUser = (props) => {
<Title title={"Add User"} />
{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 text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50">
<Loader />
</div>
)}
<div className="w-full mx-auto">
apps/OpenSign/src/components/BulkSendUi.js
+5 -4
View File
@@ -1,6 +1,7 @@
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([]);
@@ -170,8 +171,8 @@ const BulkSendUi = (props) => {
return (
<>
{isSubmit && (
<div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-40 text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<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 ? (
@@ -183,7 +184,7 @@ const BulkSendUi = (props) => {
{forms?.map((form, index) => (
<div
key={form.Id}
className="p-3 op-card border-[1px] border-gray-400 m-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
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}>
@@ -202,7 +203,7 @@ const BulkSendUi = (props) => {
{forms?.length > 1 && (
<button
onClick={() => handleRemoveForm(index)}
className="absolute right-3 top-1 border border-gray-300 rounded-lg px-2 py-1"
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>
apps/OpenSign/src/components/LoginFacebook.js
+3 -2
View File
@@ -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 = ({
@@ -114,8 +115,8 @@ const LoginFacebook = ({
return (
<div className="relative">
{thirdpartyLoader && (
<div className="fixed w-[100vw] h-[100vh] bg-black bg-opacity-30 left-0 top-0 z-[20] text-[50px] text-[#3ac9d6]">
<div className="loader-37 fixed top-[45%] left-[45%]"></div>
<div className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
<Loader />
</div>
)}
{/* <FacebookLogin
apps/OpenSign/src/components/LoginGoogle.js
+3 -2
View File
@@ -3,6 +3,7 @@ import Parse from "parse";
import { jwtDecode } from "jwt-decode";
import { useScript } from "../hook/useScript";
import ModalUi from "../primitives/ModalUi";
import Loader from "../primitives/Loader";
/*
* `GoogleSignInBtn`as it's name indicates it render google sign in button
@@ -208,8 +209,8 @@ const GoogleSignInBtn = ({
return (
<div className="relative">
{thirdpartyLoader && (
<div className="fixed w-[100vw] h-[100vh] bg-black bg-opacity-25 top-0 left-0 z-20 text-[50px] text-[#3ac9d6]">
<div className="fixed top-[50%] left-[45%] 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>
apps/OpenSign/src/components/dashboard/DashboardReport.js
+3 -2
View File
@@ -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,8 +122,8 @@ function DashboardReport(props) {
return (
<>
{isLoader ? (
<div className="h-[250px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
<div className="loader-37"></div>
<div className="h-[250px] flex justify-center items-center">
<Loader />
</div>
) : (
<>
apps/OpenSign/src/components/dashboard/GetDashboard.js
+5 -4
View File
@@ -1,4 +1,5 @@
import React, { Suspense, lazy } from "react";
import Loader from "../../primitives/Loader";
const DashboardButton = lazy(() => import("./DashboardButton"));
const DashboardCard = lazy(() => import("./DashboardCard"));
const DashboardReport = lazy(() => import("./DashboardReport"));
@@ -20,8 +21,8 @@ const GetDashboard = (props) => {
const Button = ({ label, redirectId, redirectType, icon }) => (
<Suspense
fallback={
<div className="h-[300px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
<div className="loader-37"></div>
<div className="h-[300px] w-full flex justify-center items-center">
<Loader />
</div>
}
>
@@ -44,8 +45,8 @@ const GetDashboard = (props) => {
>
<Suspense
fallback={
<div className="h-[300px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
<div className="loader-37"></div>
<div className="h-[300px] w-full flex justify-center items-center">
<Loader />
</div>
}
>
apps/OpenSign/src/components/pdf/DefaultSignature.js
+1 -1
View File
@@ -17,7 +17,7 @@ function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
return (
<div data-tut="reactourThird">
<div className="text-base-content font-semibold px-3 py-2 text-[15px] border-b-[1px] border-base-content">
<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 className="flex flex-col items-center mt-[10px] font-semibold">
apps/OpenSign/src/components/pdf/EmailComponent.js
+2 -2
View File
@@ -5,7 +5,7 @@ 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,
@@ -174,7 +174,7 @@ function EmailComponent({
<div className="modalcontainer">
{isLoading && (
<div className="absolute w-full h-full flex flex-col justify-center items-center z-[20] bg-[#e6f2f2] bg-opacity-80">
<img alt="loader" src={loader} className="w-[70px] h-[70px]" />
<Loader />
<span className="text-[12px] font-bold">
This might take some time
</span>
apps/OpenSign/src/components/pdf/PdfHeader.js
+3 -2
View File
@@ -10,6 +10,7 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { useNavigate } from "react-router-dom";
import { themeColor } from "../../constant/const";
import ModalUi from "../../primitives/ModalUi";
import Loader from "../../primitives/Loader";
function Header({
isPdfRequestFiles,
@@ -468,8 +469,8 @@ function Header({
</div>
)}
{isDownloading === "pdf" && (
<div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30">
<Loader />
</div>
)}
<ModalUi
apps/OpenSign/src/components/pdf/PlaceholderCopy.js
+1 -1
View File
@@ -201,7 +201,7 @@ function PlaceholderCopy(props) {
<div key={key} className="flex flex-col">
<label className="text-[16px] font-medium">
<input
className="mr-[10px] accent-[red]"
className="mr-[8px] op-radio op-radio-xs"
type="radio"
value={data}
onChange={() => setSelectCopyType(data)}
apps/OpenSign/src/components/pdf/PlaceholderType.js
+8 -12
View File
@@ -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 &&
@@ -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 &&
apps/OpenSign/src/components/pdf/PrevNext.js
+4 -4
View File
@@ -13,12 +13,12 @@ function PrevNext({ pageNumber, allPages, changePage }) {
return (
<div className="flex items-center">
<button
className="op-btn op-btn-primary op-btn-xs md:op-btn-sm font-semibold text-xs"
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 cursor-pointer" aria-hidden="true"></i>
<i className="fa fa-backward" aria-hidden="true"></i>
</span>
<span className="lg:block hidden">Prev</span>
</button>
@@ -26,12 +26,12 @@ function PrevNext({ pageNumber, allPages, changePage }) {
{pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
</span>
<button
className="op-btn op-btn-primary op-btn-xs md:op-btn-sm font-semibold text-xs"
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 cursor-pointer" aria-hidden="true"></i>
<i className="fa fa-forward" aria-hidden="true"></i>
</span>
<span className="lg:block hidden">Next</span>
</button>
apps/OpenSign/src/components/pdf/RecipientList.js
+1 -1
View File
@@ -100,7 +100,7 @@ const RecipientList = (props) => {
? "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-[2px] mx-1 items-center`}
} 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
apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
+1 -1
View File
@@ -52,7 +52,7 @@ function RenderAllPdfPage({
<div>
<div className=" hidden md:flex flex-row bg-base-100 h-full">
<div className="w-[140px]">
<div className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold ">
<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>
apps/OpenSign/src/components/pdf/Signedby.js
+1 -1
View File
@@ -8,7 +8,7 @@ function Signedby({ pdfDetails }) {
return (
<div className="hidden md:block w-[180px] h-full bg-base-100">
<div className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold">
<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 className="mt-[2px] bg-base-100">
apps/OpenSign/src/components/pdf/SignerListPlace.js
+3 -3
View File
@@ -5,7 +5,7 @@ import { Tooltip } from "react-tooltip";
function SignerListPlace(props) {
return (
<div>
<div className="pt-2 pb-1 px-3 font-semibold text-base-content">
<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="text-xs mt-1 ml-0.5">
@@ -61,7 +61,7 @@ function SignerListPlace(props) {
<div
role="button"
data-tut="reactourAddbtn"
className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
className="op-btn op-btn-accent op-btn-outline w-full my-[2px]"
disabled={props?.isMailSend ? true : false}
onClick={() => props.handleAddSigner()}
>
@@ -71,7 +71,7 @@ function SignerListPlace(props) {
<div
role="button"
data-tut="reactourAddbtn"
className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
className="op-btn op-btn-accent op-btn-outline w-full my-[2px]"
disabled={props?.isMailSend ? true : false}
onClick={() => props.setIsAddSigner(true)}
>
apps/OpenSign/src/components/pdf/VerifyEmail.js
+3 -2
View File
@@ -1,4 +1,5 @@
import React from "react";
import Loader from "../../primitives/Loader";
function VerifyEmail(props) {
return (
@@ -39,8 +40,8 @@ function VerifyEmail(props) {
</div>
</form>
) : props.otpLoader ? (
<div className="h-[150px] flex items-center justify-center text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="h-[150px] flex items-center justify-center">
<Loader />
</div>
) : (
<div className="px-6 py-3 text-base-content">
apps/OpenSign/src/components/pdf/WidgetComponent.js
+67 -63
View File
@@ -255,76 +255,80 @@ function WidgetComponent({
className="stickyfooter"
style={{ width: window.innerWidth + "px" }}
>
{isSigners && (
<div
data-tut={dataTut}
className="py-[10px] flex justify-center items-center op-card"
style={{
background: blockColor
? blockColor
: isSelectListId
? color[isSelectListId % color.length]
: color[0]
}}
onClick={() => handleModal()}
>
<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 className="mx-1">
{isSigners && (
<div
data-tut={dataTut}
className="py-[10px] flex justify-center items-center op-card"
style={{
background: blockColor
? blockColor
: isSelectListId
? color[isSelectListId % color.length]
: color[0]
}}
onClick={() => handleModal()}
>
<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 className="ml-[6px] text-[16px]">
<i className="fa-solid fa-angle-down"></i>
</div>
</span>
</div>
)}
{handleAddSigner ? (
<div
data-tut="reactourAddbtn"
className="op-btn op-btn-primary w-full my-[2px]"
onClick={() => handleAddSigner()}
>
<i className="fa-solid fa-plus"></i>
<span>Add role</span>
</div>
) : (
setIsAddSigner && (
</span>
</div>
)}
</div>
<div className="mx-1">
{handleAddSigner ? (
<div
data-tut="reactourAddbtn"
className="op-btn op-btn-primary w-full my-[2px]"
onClick={() => setIsAddSigner(true)}
className="op-btn op-btn-accent w-full my-[2px]"
onClick={() => handleAddSigner()}
>
<i className="fa-solid fa-plus"></i>
<span>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}
className="bg-white border-[2px] border-t-primary"
className="bg-base-100 border-[2px] border-t-primary"
>
<div className="flex whitespace-nowrap overflow-x-scroll pt-[10px] pb-[5px] pr-[5px]">
<WidgetList
@@ -347,7 +351,7 @@ function WidgetComponent({
isMailSend ? "bg-opacity-50 pointer-events-none" : ""
} hidden md:block w-[180px] h-full bg-base-100`}
>
<div className="text-base-content px-3 py-2 text-[15px] border-b-[1px] border-base-content">
<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="flex flex-col items-center my-3">
apps/OpenSign/src/components/pdf/WidgetNameModal.js
+1 -1
View File
@@ -236,7 +236,7 @@ const WidgetNameModal = (props) => {
return (
<div key={ind} className="flex flex-row gap-[5px] items-center">
<input
className="mr-[3px] accent-[red]"
className="mr-[2px] op-radio op-radio-xs"
type="radio"
name="status"
onChange={() =>
apps/OpenSign/src/components/shared/fields/CreateFolder.js
+3 -5
View File
@@ -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 = {
@@ -113,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/SelectSigners.js
+11 -3
View File
@@ -78,15 +78,23 @@ const SelectSigners = (props) => {
defaultOptions
value={selected}
loadingMessage={() => "Loading..."}
noOptionsMessage={() => "User not Found"}
noOptionsMessage={() => "Contact not found"}
loadOptions={loadOptions}
onChange={handleOptions}
unstyled
classNames={{
control: () =>
"op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs",
"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 hover:bg-base-300 p-2 shadow-md"
"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>
apps/OpenSign/src/components/shared/fields/SignersInput.js
+47 -52
View File
@@ -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([]);
@@ -128,12 +142,21 @@ 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 text-xs",
"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 hover:bg-base-300 p-2 shadow-md"
"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>
@@ -142,57 +165,29 @@ const SignersInput = (props) => {
setIsModel(true);
openModal();
}}
className="cursor-pointer border-[1px] op-inut op-input-bordered min-h-[38px] min-w-[48px] flex justify-center items-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/layout/HomeLayout.js
+3 -2
View File
@@ -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();
@@ -253,8 +254,8 @@ const HomeLayout = () => {
{isUserValid ? (
<>
{isLoader ? (
<div className="flex h-[100vh] justify-center items-center text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="flex h-[100vh] justify-center items-center">
<Loader />
</div>
) : (
<>
apps/OpenSign/src/pages/Dashboard.js
+3 -2
View File
@@ -6,6 +6,7 @@ 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();
@@ -57,8 +58,8 @@ const Dashboard = () => {
<React.Fragment>
<Title title="Dashboard" />
{loading ? (
<div className="h-[300px] text-[45px] text-[#3dd3e0] w-full bg-white flex justify-center items-center rounded-md">
<div className="loader-37"></div>
<div className="h-[300px] w-full bg-white flex justify-center items-center rounded-md">
<Loader />
</div>
) : (
<GetDashboard dashboard={dashboard} />
apps/OpenSign/src/pages/Form.js
+3 -2
View File
@@ -19,6 +19,7 @@ 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() {
@@ -574,8 +575,8 @@ const Forms = (props) => {
</Alert>
)}
{isSubmit ? (
<div className="h-[300px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
<div className="loader-37"></div>
<div className="h-[300px] flex justify-center items-center">
<Loader />
</div>
) : (
<>
apps/OpenSign/src/pages/GenerateToken.js
+5 -17
View File
@@ -8,6 +8,7 @@ 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,21 +110,8 @@ 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-base-100 text-base-content flex flex-col justify-center shadow rounded">
@@ -155,7 +143,7 @@ function GenerateToken() {
{apiToken ? apiToken : "_____"}
</span>
<button
className="op-btn op-btn-primary op-btn-sm ml-2"
className="op-btn op-btn-accent op-btn-sm ml-2"
onClick={() => copytoclipboard(apiToken)}
>
<i className="fa-solid fa-copy"></i>
@@ -178,7 +166,7 @@ function GenerateToken() {
"https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
)
}
className="op-btn op-btn-primary my-2"
className="op-btn op-btn-secondary my-2"
>
View Docs
</button>
apps/OpenSign/src/pages/GuestLogin.js
+2 -2
View File
@@ -1,12 +1,12 @@
import React, { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import loader from "../assets/images/loader2.gif";
import axios from "axios";
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();
@@ -184,7 +184,7 @@ function GuestLogin() {
<div className="p-[2rem]">
{isLoading ? (
<div className="flex flex-col justify-center items-center h-[100vh]">
<img className="w-[80px] h-[80px]" alt="loader" src={loader} />
<Loader />
<span className="text-[13px] text-[gray]">{isLoading.message}</span>
</div>
) : (
apps/OpenSign/src/pages/Login.js
+9 -8
View File
@@ -16,6 +16,7 @@ import { appInfo } from "../constant/appinfo";
import { fetchAppInfo } from "../redux/reducers/infoReducer";
import { showTenant } from "../redux/reducers/ShowTenant";
import { fetchSubscription, getAppLogo, openInNewTab } from "../constant/Utils";
import Loader from "../primitives/Loader";
function Login() {
const navigate = useNavigate();
const location = useLocation();
@@ -1064,11 +1065,9 @@ function Login() {
{state.loading && (
<div
aria-live="assertive"
className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-20 text-[50px] text-[#3ac9d6]"
className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-50"
>
<div role="status" className="loader-37">
<span className="sr-only">Loading...</span>
</div>
<Loader />
</div>
)}
{appInfo && appInfo.appId ? (
@@ -1160,7 +1159,7 @@ function Login() {
</button>
<button
type="button"
className="op-btn op-btn-secondary"
className="op-btn op-btn-accent"
disabled={state.loading}
onClick={() =>
navigate(
@@ -1287,9 +1286,11 @@ function Login() {
</>
) : (
<div
className="loader-37 fixed top-[50%] left-[45%] text-[50px] text-[#3ac9d6]"
style={{ color: "#3ac9d6" }}
></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
+3 -2
View File
@@ -7,6 +7,7 @@ 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");
@@ -243,8 +244,8 @@ const ManageSign = () => {
return (
<div className="relative h-full bg-base-100 text-base-content flex shadow rounded overflow-auto">
{isLoader && (
<div className="absolute bg-black text-[45px] text-[#3dd3e0] bg-opacity-75 z-50 w-full h-full flex justify-center items-center">
<div className="loader-37 "></div>
<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>}
apps/OpenSign/src/pages/Opensigndrive.js
+8 -9
View File
@@ -1,6 +1,5 @@
import React, { useEffect, useState, useRef } from "react";
import "../styles/opensigndrive.css";
import loader from "../assets/images/loader2.gif";
import { iconColor } from "../constant/const";
import { getDrive } from "../constant/Utils";
import { useNavigate } from "react-router-dom";
@@ -10,14 +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 className="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0] ">
<div className="loader-37"></div>
<div className="h-[100vh] flex justify-center items-center">
<Loader />
</div>
);
};
@@ -558,9 +558,8 @@ function Opensigndrive() {
>
<div className="h-full p-[20px] pt-[10px] pb-[15px]">
{folderLoader ? (
<div className="h-[200px] flex flex-col justify-center items-center">
<img alt="loader" src={loader} className="w-[50px] h-[50px]" />
<span className="text-[13px] text-[gray]">Loading...</span>
<div className="h-[200px] flex justify-center items-center">
<Loader />
</div>
) : (
<form
@@ -598,7 +597,7 @@ function Opensigndrive() {
</ModalUi>
{isLoading.isLoad ? (
<div className="flex flex-col justify-center items-center h-[100vh] w-full">
<img alt="loader" src={loader} className="w-[80px] h-[80px]" />
<Loader />
<span className="text-[13px] text-[gray]">{isLoading.message}</span>
</div>
) : handleError ? (
@@ -783,7 +782,7 @@ function Opensigndrive() {
</div>
) : (
<div data-tut="reactourFifth">
<React.Suspense fallback={<Loader />}>
<React.Suspense fallback={<AppLoader />}>
<DriveBody
dataTutSixth="reactourSixth"
dataTutSeventh="reactourSeventh"
apps/OpenSign/src/pages/PdfRequestFiles.js
+10 -20
View File
@@ -4,7 +4,6 @@ import { PDFDocument } from "pdf-lib";
import "../styles/signature.css";
import Parse from "parse";
import axios from "axios";
import loader from "../assets/images/loader2.gif";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { useLocation, useNavigate, useParams } from "react-router-dom";
@@ -35,7 +34,7 @@ import {
handleDownloadCertificate,
darkenColor
} from "../constant/Utils";
import Loader from "../primitives/LoaderWithMsg";
import LoaderWithMsg from "../primitives/LoaderWithMsg";
import HandleError from "../primitives/HandleError";
import Header from "../components/pdf/PdfHeader";
import RenderPdf from "../components/pdf/RenderPdf";
@@ -46,6 +45,7 @@ import ModalUi from "../primitives/ModalUi";
import VerifyEmail from "../components/pdf/VerifyEmail";
import TourContentWithBtn from "../primitives/TourContentWithBtn";
import { appInfo } from "../constant/appinfo";
import Loader from "../primitives/Loader";
function useQuery() {
return new URLSearchParams(useLocation().search);
}
@@ -1388,18 +1388,14 @@ function PdfRequestFiles() {
) : (
<>
{isLoading.isLoad ? (
<Loader isLoading={isLoading} />
<LoaderWithMsg isLoading={isLoading} />
) : handleError ? (
<HandleError handleError={handleError} />
) : (
<div>
{isUiLoading && (
<div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
<img
alt="loader"
src={loader}
className="w-[100px] h-[100px]"
/>
<Loader />
<span className="text-[13px] font-bold">
This might take some time
</span>
@@ -1635,8 +1631,8 @@ function PdfRequestFiles() {
</div>
</ModalUi>
{isDownloading === "pdf" && (
<div className="fixed z-[1000] inset-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="fixed z-[1000] inset-0 flex justify-center items-center bg-black bg-opacity-30">
<Loader />
</div>
)}
<ModalUi
@@ -1739,14 +1735,14 @@ function PdfRequestFiles() {
>
{signedSigners.length > 0 && (
<div data-tut="reactourSecond">
<div className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold">
<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 className="mt-[2px]">
{signedSigners.map((obj, ind) => {
return (
<div
className="rounded-xl mx-1 flex flex-row items-center py-[10px]"
className="rounded-xl mx-1 flex flex-row items-center py-[10px] mt-1"
style={{
background: checkSignerBackColor(obj)
}}
@@ -1779,20 +1775,14 @@ function PdfRequestFiles() {
{unsignedSigners.length > 0 && (
<div data-tut="reactourFirst">
<div
className={`${
signedSigners?.length > 0
? "border-b-[1px] border-base-content"
: ""
} px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold`}
>
<div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
Yet to sign
</div>
<div className="mt-[5px]">
{unsignedSigners.map((obj, ind) => {
return (
<div
className="rounded-xl mx-1 flex flex-row items-center py-[10px]"
className="rounded-xl mx-1 flex flex-row items-center py-[10px] mt-1"
style={{
background: checkSignerBackColor(obj)
}}
apps/OpenSign/src/pages/Pgsignup.js
+3 -15
View File
@@ -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();
@@ -411,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
+1 -6
View File
@@ -10,7 +10,6 @@ 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 HandleError from "../primitives/HandleError";
@@ -1643,11 +1642,7 @@ function PlaceHolderSign() {
>
{isUiLoading && (
<div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
<img
alt="loader"
src={loader}
className="w-[100px] h-[100px]"
/>
<Loader />
<span className="text-[13px] font-bold">
This might take some time
</span>
apps/OpenSign/src/pages/PlanSubscriptions.js
+3 -2
View File
@@ -5,6 +5,7 @@ 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
@@ -85,8 +86,8 @@ const PlanSubscriptions = () => {
<>
<Title title={"Subscriptions"} />
{isLoader ? (
<div className="flex items-center justify-center h-[full] text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="flex items-center justify-center h-screen">
<Loader />
</div>
) : (
<div className="overflow-y-auto max-h-full">
apps/OpenSign/src/pages/Report.js
+3 -2
View File
@@ -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,8 +174,8 @@ const Report = () => {
<>
<Title title={reportName} />
{isLoader ? (
<div className="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="h-[100vh] flex justify-center items-center">
<Loader />
</div>
) : (
<>
apps/OpenSign/src/pages/SSOVerify.js
+4 -6
View File
@@ -8,7 +8,7 @@ import { fetchSubscription } from "../constant/Utils";
import { useDispatch } from "react-redux";
import { showTenant } from "../redux/reducers/ShowTenant";
import ModalUi from "../primitives/ModalUi";
import loader from "../assets/images/loader2.gif";
import Loader from "../primitives/Loader";
const SSOVerify = () => {
const location = useLocation();
@@ -287,16 +287,14 @@ const SSOVerify = () => {
return (
<div>
<div className="w-full h-screen flex flex-col justify-center items-center text-sm md:text-xl ">
{message === "Verifying SSO..." && (
<img alt="loader" src={loader} className="w-[80px] h-[80px]" />
)}
{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 text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="absolute w-full h-full bg-black bg-opacity-25 flex justify-center items-center">
<Loader />
</div>
)}
<form
apps/OpenSign/src/pages/Signup.js
+7 -7
View File
@@ -12,6 +12,7 @@ import { fetchAppInfo } from "../redux/reducers/infoReducer";
import { showTenant } from "../redux/reducers/ShowTenant";
import { isEnableSubscription } from "../constant/const";
import { getAppLogo, openInNewTab } from "../constant/Utils";
import Loader from "../primitives/Loader";
const Signup = () => {
const { width } = useWindowSize();
const navigate = useNavigate();
@@ -503,8 +504,8 @@ const Signup = () => {
return (
<div className="">
{state.loading && (
<div className="fixed w-[100vw] h-[100vh] flex justify-center items-center z-20 bg-black bg-opacity-25 text-[#3ac9d6] text-[50px]">
<div 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"} />
@@ -668,7 +669,7 @@ const Signup = () => {
<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-accent"
className="op-btn op-btn-primary"
disabled={state.loading}
>
{state.loading ? "Loading..." : "Register"}
@@ -698,10 +699,9 @@ const Signup = () => {
<Alert type={state.alertType}>{state.alertMsg}</Alert>
</div>
) : (
<div
className="loader-37 fixed text-[50px] top-[50%] left-[45%]"
style={{ color: "#3ac9d6" }}
></div>
<div className="fixed w-full h-full flex justify-center items-center z-50">
<Loader />
</div>
)}
</div>
);
apps/OpenSign/src/pages/SignyourselfPdf.js
+1 -2
View File
@@ -6,7 +6,6 @@ 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 RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
@@ -1100,7 +1099,7 @@ function SignYourSelf() {
<div>
{isUiLoading && (
<div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-start bg-[#e6f2f2] bg-opacity-80">
<img alt="loader" src={loader} className="w-[100px] h-[100px]" />
<Loader />
<span className="font-bold text-[13px]">
This might take some time
</span>
apps/OpenSign/src/pages/UserProfile.js
+5 -4
View File
@@ -16,6 +16,7 @@ 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();
@@ -302,8 +303,8 @@ function UserProfile() {
<React.Fragment>
<Title title={"Profile"} />
{isLoader ? (
<div className="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="h-[100vh] flex justify-center items-center">
<Loader />
</div>
) : (
<div className="flex justify-center items-center w-full relative">
@@ -544,8 +545,8 @@ function UserProfile() {
handleClose={handleCloseVerifyModal}
>
{otpLoader ? (
<div className="h-[150px] flex justify-center items-center text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="h-[150px] flex justify-center items-center">
<Loader />
</div>
) : (
<form onSubmit={(e) => handleVerifyEmail(e)}>
apps/OpenSign/src/pages/Webhook.js
+4 -3
View File
@@ -9,6 +9,7 @@ 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();
@@ -101,8 +102,8 @@ function Webhook() {
{isErr && <Alert type="danger">Something went wrong.</Alert>}
{isLoader ? (
<div className="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="h-[100vh] flex justify-center items-center">
<Loader />
</div>
) : (
<div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded">
@@ -148,7 +149,7 @@ function Webhook() {
"https://docs.opensignlabs.com/docs/API-docs/save-update-webhook"
)
}
className="op-btn op-btn-primary my-2"
className="op-btn op-btn-secondary my-2"
>
View Docs
</button>
apps/OpenSign/src/primitives/AddContact.js
+9 -5
View File
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import Parse from "parse";
import axios from "axios";
import "../styles/AddUser.css";
import Loader from "./Loader";
const AddContact = (props) => {
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
@@ -197,22 +198,25 @@ const AddContact = (props) => {
return (
<div className="h-full px-[20px] py-[10px]">
{isLoader && (
<div className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30">
<Loader />
</div>
)}
<div className="w-full mx-auto p-[8px]">
<div className="text-[14px] font-[700]">Add User</div>
{isUserExist && (
<div className="mb-[0.75rem]">
<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>
apps/OpenSign/src/primitives/GetReportDisplay.js
+434 -423
View File
@@ -23,6 +23,7 @@ import EditorToolbar, {
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import BulkSendUi from "../components/BulkSendUi";
import Loader from "./Loader";
const ReportTable = (props) => {
const navigate = useNavigate();
@@ -914,11 +915,11 @@ const ReportTable = (props) => {
return (
<div className="relative">
{Object.keys(actLoader)?.length > 0 && (
<div className="absolute w-full h-full text-[45px] text-[#3dd3e0] rounded-md flex justify-center items-center bg-black bg-opacity-30 z-30">
<div className="loader-37"></div>
<div className="absolute w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30">
<Loader />
</div>
)}
<div className="p-2 overflow-x-scroll w-full bg-base-100 text-base-content op-card shadow-lg">
<div className="p-2 w-full bg-base-100 text-base-content op-card shadow-lg">
{/* {isCelebration && (
<div className="relative z-[1000]">
<Confetti width={window.innerWidth} height={window.innerHeight} />
@@ -959,125 +960,132 @@ const ReportTable = (props) => {
</div>
)}
</div>
<table className="op-table op-table-zebra border-collapse h-[317px]">
<thead className="text-[14px]">
<tr className="border-y-[1px]">
{props.heading?.map((item, index) => (
<React.Fragment key={index}>
<th className="px-4 py-2">{item}</th>
</React.Fragment>
))}
{/* {props.ReportName === "Templates" && isEnableSubscription && (
<div className="overflow-x-auto w-full">
<table className="op-table border-collapse h-[317px] w-full">
<thead className="text-[14px]">
<tr className="border-y-[1px]">
{props.heading?.map((item, index) => (
<React.Fragment key={index}>
<th className="px-4 py-2">{item}</th>
</React.Fragment>
))}
{/* {props.ReportName === "Templates" && isEnableSubscription && (
<th className="px-4 py-2">Public</th>
)} */}
{props.actions?.length > 0 && (
<th className="px-4 py-2 text-transparent pointer-events-none">
Action
</th>
)}
</tr>
</thead>
<tbody className="text-[12px]">
{props.List?.length > 0 && (
<>
{currentList.map((item, index) =>
props.ReportName === "Contactbook" ? (
<tr className="border-y-[1px]" key={index}>
{props.heading.includes("Sr.No") && (
<th className="px-4 py-2">{startIndex + index + 1}</th>
)}
<td className="px-4 py-2 font-semibold">{item?.Name} </td>
<td className="px-4 py-2">{item?.Email || "-"}</td>
<td className="px-4 py-2">{item?.Phone || "-"}</td>
<td className="px-3 py-2 text-white grid grid-cols-2">
{props.actions?.length > 0 &&
props.actions.map((act, index) => (
<button
key={index}
onClick={() => handleActionBtn(act, item)}
title={act.hoverLabel}
className={`${
act?.btnColor ? act.btnColor : ""
} op-btn op-btn-sm`}
{props.actions?.length > 0 && (
<th className="px-4 py-2 text-transparent pointer-events-none">
Action
</th>
)}
</tr>
</thead>
<tbody className="text-[12px]">
{props.List?.length > 0 && (
<>
{currentList.map((item, index) =>
props.ReportName === "Contactbook" ? (
<tr className="border-y-[1px]" key={index}>
{props.heading.includes("Sr.No") && (
<th className="px-4 py-2">
{startIndex + index + 1}
</th>
)}
<td className="px-4 py-2 font-semibold">
{item?.Name}{" "}
</td>
<td className="px-4 py-2">{item?.Email || "-"}</td>
<td className="px-4 py-2">{item?.Phone || "-"}</td>
<td className="px-3 py-2 text-white grid grid-cols-2">
{props.actions?.length > 0 &&
props.actions.map((act, index) => (
<button
key={index}
onClick={() => handleActionBtn(act, item)}
title={act.hoverLabel}
className={`${
act?.btnColor ? act.btnColor : ""
} op-btn op-btn-sm`}
>
<i className={act.btnIcon}></i>
</button>
))}
{isDeleteModal[item.objectId] && (
<ModalUi
isOpen
title={"Delete Contact"}
handleClose={handleClose}
>
<i className={act.btnIcon}></i>
</button>
))}
{isDeleteModal[item.objectId] && (
<ModalUi
isOpen
title={"Delete Contact"}
handleClose={handleClose}
>
<div className="m-[20px]">
<div className="text-lg font-normal text-black">
Are you sure you want to delete this contact?
<div className="m-[20px]">
<div className="text-lg font-normal text-black">
Are you sure you want to delete this contact?
</div>
<hr className="bg-[#ccc] mt-4 " />
<div className="flex items-center mt-3 gap-2 text-white">
<button
onClick={() => handleDelete(item)}
className="op-btn op-btn-primary"
>
Yes
</button>
<button
onClick={handleClose}
className="op-btn op-btn-secondary"
>
No
</button>
</div>
</div>
<hr className="bg-[#ccc] mt-4 " />
<div className="flex items-center mt-3 gap-2 text-white">
<button
onClick={() => handleDelete(item)}
className="op-btn op-btn-primary"
>
Yes
</button>
<button
onClick={handleClose}
className="op-btn op-btn-secondary"
>
No
</button>
</div>
</div>
</ModalUi>
</ModalUi>
)}
</td>
</tr>
) : (
<tr className="border-y-[1px]" key={index}>
{props.heading.includes("Sr.No") && (
<th className="px-4 py-2">
{startIndex + index + 1}
</th>
)}
</td>
</tr>
) : (
<tr className="border-y-[1px]" key={index}>
{props.heading.includes("Sr.No") && (
<th className="px-4 py-2">{startIndex + index + 1}</th>
)}
<td className="px-4 py-2 font-semibold min-w-56">
{item?.Name}{" "}
</td>
{props.heading.includes("Note") && (
<td className="px-4 py-2">
{item?.Note?.length > 25
? item?.Note?.slice(0, 25) + "..."
: item?.Note || "-"}
<td className="px-4 py-2 font-semibold min-w-56">
{item?.Name}{" "}
</td>
)}
{props.heading.includes("Folder") && (
{props.heading.includes("Note") && (
<td className="px-4 py-2">
{item?.Note?.length > 25
? item?.Note?.slice(0, 25) + "..."
: item?.Note || "-"}
</td>
)}
{props.heading.includes("Folder") && (
<td className="px-4 py-2">
{item?.Folder?.Name || "OpenSign™ Drive"}
</td>
)}
<td className="px-4 py-2">
{item?.Folder?.Name || "OpenSign™ Drive"}
</td>
)}
<td className="px-4 py-2">
<button
onClick={() => handleDownload(item)}
className="op-link op-link-primary"
title={"Download"}
>
{item?.URL ? "Download" : "-"}
</button>
</td>
<td className="px-4 py-2">
{formatRow(item?.ExtUserPtr)}
</td>
<td className="px-4 py-2">
{item?.Placeholders ? (
<button
onClick={() => handleViewSigners(item)}
onClick={() => handleDownload(item)}
className="op-link op-link-primary"
title={"Download"}
>
View
{item?.URL ? "Download" : "-"}
</button>
) : (
"-"
)}
</td>
{/* {props.ReportName === "Templates" &&
</td>
<td className="px-4 py-2">
{formatRow(item?.ExtUserPtr)}
</td>
<td className="px-4 py-2">
{item?.Placeholders ? (
<button
onClick={() => handleViewSigners(item)}
className="op-link op-link-primary"
>
View
</button>
) : (
"-"
)}
</td>
{/* {props.ReportName === "Templates" &&
isEnableSubscription && (
<td className=" pl-[20px] py-2">
{props.ReportName === "Templates" && (
@@ -1235,326 +1243,329 @@ const ReportTable = (props) => {
)}
</td>
)} */}
<td className="px-2 py-2">
<div className="text-base-content flex flex-row gap-x-2 gap-y-1 justify-start items-center">
{props.actions?.length > 0 &&
props.actions.map((act, index) => (
<div
role="button"
data-tut={act?.selector}
key={index}
onClick={() => handleActionBtn(act, item)}
title={act.hoverLabel}
className={
act.action !== "option"
? `${
act?.btnColor ? act.btnColor : ""
} op-btn op-btn-sm mr-1`
: "text-base-content focus:outline-none text-lg mr-2 relative"
}
>
<i className={act.btnIcon}></i>
{act.btnLabel && (
<span className="uppercase font-medium">
{act.btnLabel}
</span>
)}
{isOption[item.objectId] &&
act.action === "option" && (
<ul className="absolute -right-2 top-6 z-[20] op-dropdown-content op-menu shadow bg-base-100 text-base-content rounded-box ">
{act.subaction?.map((subact) => (
<li
key={subact.btnId}
onClick={() =>
handleActionBtn(subact, item)
}
title={subact.hoverLabel}
>
<span>
<i
className={`${subact.btnIcon} mr-1.5`}
></i>
{subact.btnLabel && (
<span className="text-[13px] capitalize font-medium">
{subact.btnLabel}
</span>
)}
</span>
</li>
))}
</ul>
)}
</div>
))}
</div>
{isViewShare[item.objectId] && (
<div className="fixed z-[999] inset-0 w-full h-full bg-black bg-opacity-[75%]">
<div className="fixed 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-[400px] overflow-y-auto max-h-[340px] md:max-h-[400px] hide-scrollbar">
<div
className="cursor-pointer absolute text-white text-[22px] font-medium rounded-full z-50 top-1 right-3"
onClick={() => setIsViewShare({})}
>
&times;
</div>
<table className="table-auto w-full">
<thead className="text-white h-[38px] sticky top-0 bg-[#32a3ac]">
<tr>
{props.ReportName === "Templates" && (
<th className="p-2 pl-3">Roles</th>
)}
<th className="p-2">Signers</th>
</tr>
</thead>
<tbody>
{item.Placeholders.map((x, i) => (
<tr
key={i}
className="text-sm font-normal text-black odd:bg-white even:bg-gray-200"
>
{props.ReportName === "Templates" && (
<td className="text-[12px] p-2 pl-3">
{x.Role && x.Role}
</td>
)}
<td className="text-[12px] p-2 break-all">
{x.email
? x.email
: x?.signerPtr?.Email || "-"}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
)}
{isDeleteModal[item.objectId] && (
<ModalUi
isOpen
title={"Delete Document"}
handleClose={handleClose}
>
<div className="m-[20px]">
<div className="text-lg font-normal text-black">
Are you sure you want to delete this document?
</div>
<hr className="bg-[#ccc] mt-4" />
<div className="flex items-center mt-3 gap-2 text-white">
<button
onClick={() => handleDelete(item)}
className="op-btn op-btn-primary"
>
Yes
</button>
<button
onClick={handleClose}
className="op-btn op-btn-secondary"
>
No
</button>
</div>
</div>
</ModalUi>
)}
{isBulkSend[item.objectId] && (
<ModalUi
isOpen
title={"Quick send"}
handleClose={() => setIsBulkSend({})}
>
{isLoader[item.objectId] ? (
<div className="w-full h-[100px] text-[45px] text-[#3dd3e0] rounded-b-md flex justify-center items-center bg-black bg-opacity-30 z-30">
<div className="loader-37"></div>
</div>
) : (
<BulkSendUi
Placeholders={placeholders}
item={templateDeatils}
handleClose={handleQuickSendClose}
/>
)}
</ModalUi>
)}
{isShare[item.objectId] && (
<ModalUi
isOpen
title={"Copy link"}
handleClose={() => {
setIsShare({});
setActLoader({});
}}
>
<div className="m-[20px]">
{shareUrls.map((share, i) => (
<td className="px-2 py-2">
<div className="text-base-content flex flex-row gap-x-2 gap-y-1 justify-start items-center">
{props.actions?.length > 0 &&
props.actions.map((act, index) => (
<div
key={i}
className="text-sm font-normal text-black flex my-2 justify-between items-center"
role="button"
data-tut={act?.selector}
key={index}
onClick={() => handleActionBtn(act, item)}
title={act.hoverLabel}
className={
act.action !== "option"
? `${
act?.btnColor ? act.btnColor : ""
} op-btn op-btn-sm mr-1`
: "text-base-content focus:outline-none text-lg mr-2 relative"
}
>
<span className="text-sm font-semibold">
{share.email}
</span>
<div>
<RWebShare
data={{
url: share.url,
title: "Sign url"
}}
>
<button className="bg-[#002864] text-white rounded w-[32px] h-[30px] focus:outline-none">
<i className="fa-solid fa-share-from-square"></i>{" "}
</button>
</RWebShare>
<button
className="ml-2 bg-[#002864] text-white rounded w-[100px] h-[30px] focus:outline-none"
onClick={() => copytoclipboard(share)}
>
<i className="fa-solid fa-link"></i>{" "}
{copied[share.email] ? "Copied" : "Copy"}
</button>
</div>
<i className={act.btnIcon}></i>
{act.btnLabel && (
<span className="uppercase font-medium">
{act.btnLabel}
</span>
)}
{isOption[item.objectId] &&
act.action === "option" && (
<ul className="absolute -right-2 top-6 z-[20] op-dropdown-content op-menu shadow bg-base-100 text-base-content rounded-box ">
{act.subaction?.map((subact) => (
<li
key={subact.btnId}
onClick={() =>
handleActionBtn(subact, item)
}
title={subact.hoverLabel}
>
<span>
<i
className={`${subact.btnIcon} mr-1.5`}
></i>
{subact.btnLabel && (
<span className="text-[13px] capitalize font-medium">
{subact.btnLabel}
</span>
)}
</span>
</li>
))}
</ul>
)}
</div>
))}
</div>
</ModalUi>
)}
{isRevoke[item.objectId] && (
<ModalUi
isOpen
title={"Revoke document"}
handleClose={handleClose}
>
<div className="m-[20px]">
<div className="text-lg font-normal text-black">
Are you sure you want to revoke this document?
</div>
<hr className="bg-[#ccc] mt-4" />
<div className="flex items-center mt-3 gap-2">
<button
onClick={() => handleRevoke(item)}
className="op-btn op-btn-primary"
</div>
{isViewShare[item.objectId] && (
<div className="fixed z-[999] inset-0 w-full h-full bg-black bg-opacity-[75%]">
<div className="fixed 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-[400px] overflow-y-auto max-h-[340px] md:max-h-[400px] hide-scrollbar">
<div
className="cursor-pointer absolute text-white text-[22px] font-medium rounded-full z-50 top-1 right-3"
onClick={() => setIsViewShare({})}
>
Yes
</button>
<button
onClick={handleClose}
className="op-btn op-btn-secondary"
>
No
</button>
</div>
</div>
</ModalUi>
)}
{isResendMail[item.objectId] && (
<ModalUi
isOpen
title={"Resend Mail"}
handleClose={() => {
setIsResendMail({});
setIsNextStep({});
setUserDetails({});
}}
>
<div className=" overflow-y-auto max-h-[340px] md:max-h-[400px]">
{item?.Placeholders?.map((user) => (
<React.Fragment key={user.Id}>
{isNextStep[user.Id] && (
<div className="relative ">
{actLoader[user.Id] && (
<div className="absolute text-[45px] text-[#3dd3e0] w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30">
<div className="loader-37"></div>
</div>
&times;
</div>
<table className="table-auto w-full">
<thead className="text-white h-[38px] sticky top-0 bg-[#32a3ac]">
<tr>
{props.ReportName === "Templates" && (
<th className="p-2 pl-3">Roles</th>
)}
<form
onSubmit={(e) =>
handleResendMail(e, item, user)
}
className="w-full flex flex-col gap-2 p-3 text-base-content relative"
<th className="p-2">Signers</th>
</tr>
</thead>
<tbody>
{item.Placeholders.map((x, i) => (
<tr
key={i}
className="text-sm font-normal text-black odd:bg-white even:bg-gray-200"
>
<div className="absolute right-5 text-xs z-40">
<Tooltip
id={`${user.Id}_help`}
message={
"You can use following variables which will get replaced with their actual values:- {{document_title}}, {{sender_name}}, {{sender_mail}}, {{sender_phone}}, {{receiver_name}}, {{receiver_email}}, {{receiver_phone}}, {{expiry_date}}, {{company_name}}, {{signing_url}}."
}
/>
</div>
<div>
<label
className="text-xs ml-1"
htmlFor="mailsubject"
>
Subject{" "}
</label>
<input
id="mailsubject"
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
value={mail.subject}
onChange={(e) =>
handleSubjectChange(
e.target.value,
item
)
}
required
/>
</div>
<div>
<label
className="text-xs ml-1"
htmlFor="mailbody"
>
Body{" "}
</label>
<EditorToolbar containerId="toolbar1" />
<ReactQuill
id="mailbody"
theme="snow"
value={mail.body || ""}
placeholder="add body of email "
modules={module1}
formats={formats}
onChange={(value) =>
handlebodyChange(value, item)
}
/>
</div>
<button
type="submit"
className="op-btn op-btn-primary"
>
Resend
</button>
</form>
</div>
)}
{Object?.keys(isNextStep) <= 0 && (
<div className="flex justify-between items-center gap-2 my-2 px-3">
<div className="text-black">
{user?.signerPtr?.Name || "-"}{" "}
{`<${
user?.email
? user.email
: user.signerPtr.Email
}>`}
</div>
<>{fetchUserStatus(user, item)}</>
</div>
)}
</React.Fragment>
))}
{props.ReportName === "Templates" && (
<td className="text-[12px] p-2 pl-3">
{x.Role && x.Role}
</td>
)}
<td className="text-[12px] p-2 break-all">
{x.email
? x.email
: x?.signerPtr?.Email || "-"}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</ModalUi>
)}
</td>
</tr>
)
)}
</>
)}
</tbody>
</table>
)}
{isDeleteModal[item.objectId] && (
<ModalUi
isOpen
title={"Delete Document"}
handleClose={handleClose}
>
<div className="m-[20px]">
<div className="text-lg font-normal text-black">
Are you sure you want to delete this document?
</div>
<hr className="bg-[#ccc] mt-4" />
<div className="flex items-center mt-3 gap-2 text-white">
<button
onClick={() => handleDelete(item)}
className="op-btn op-btn-primary"
>
Yes
</button>
<button
onClick={handleClose}
className="op-btn op-btn-secondary"
>
No
</button>
</div>
</div>
</ModalUi>
)}
{isBulkSend[item.objectId] && (
<ModalUi
isOpen
title={"Quick send"}
handleClose={() => setIsBulkSend({})}
>
{isLoader[item.objectId] ? (
<div className="w-full h-[100px] flex justify-center items-center bg-opacity-30 z-30">
<Loader />
</div>
) : (
<BulkSendUi
Placeholders={placeholders}
item={templateDeatils}
handleClose={handleQuickSendClose}
/>
)}
</ModalUi>
)}
{isShare[item.objectId] && (
<ModalUi
isOpen
title={"Copy link"}
handleClose={() => {
setIsShare({});
setActLoader({});
}}
>
<div className="m-[20px]">
{shareUrls.map((share, i) => (
<div
key={i}
className="text-sm font-normal text-black flex my-2 justify-between items-center"
>
<span className="text-sm font-semibold">
{share.email}
</span>
<div>
<RWebShare
data={{
url: share.url,
title: "Sign url"
}}
>
<button className="bg-[#002864] text-white rounded w-[32px] h-[30px] focus:outline-none">
<i className="fa-solid fa-share-from-square"></i>{" "}
</button>
</RWebShare>
<button
className="ml-2 bg-[#002864] text-white rounded w-[100px] h-[30px] focus:outline-none"
onClick={() => copytoclipboard(share)}
>
<i className="fa-solid fa-link"></i>{" "}
{copied[share.email]
? "Copied"
: "Copy"}
</button>
</div>
</div>
))}
</div>
</ModalUi>
)}
{isRevoke[item.objectId] && (
<ModalUi
isOpen
title={"Revoke document"}
handleClose={handleClose}
>
<div className="m-[20px]">
<div className="text-lg font-normal text-black">
Are you sure you want to revoke this document?
</div>
<hr className="bg-[#ccc] mt-4" />
<div className="flex items-center mt-3 gap-2">
<button
onClick={() => handleRevoke(item)}
className="op-btn op-btn-primary"
>
Yes
</button>
<button
onClick={handleClose}
className="op-btn op-btn-secondary"
>
No
</button>
</div>
</div>
</ModalUi>
)}
{isResendMail[item.objectId] && (
<ModalUi
isOpen
title={"Resend Mail"}
handleClose={() => {
setIsResendMail({});
setIsNextStep({});
setUserDetails({});
}}
>
<div className=" overflow-y-auto max-h-[340px] md:max-h-[400px]">
{item?.Placeholders?.map((user) => (
<React.Fragment key={user.Id}>
{isNextStep[user.Id] && (
<div className="relative ">
{actLoader[user.Id] && (
<div className="absolute w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30">
<Loader />
</div>
)}
<form
onSubmit={(e) =>
handleResendMail(e, item, user)
}
className="w-full flex flex-col gap-2 p-3 text-base-content relative"
>
<div className="absolute right-5 text-xs z-40">
<Tooltip
id={`${user.Id}_help`}
message={
"You can use following variables which will get replaced with their actual values:- {{document_title}}, {{sender_name}}, {{sender_mail}}, {{sender_phone}}, {{receiver_name}}, {{receiver_email}}, {{receiver_phone}}, {{expiry_date}}, {{company_name}}, {{signing_url}}."
}
/>
</div>
<div>
<label
className="text-xs ml-1"
htmlFor="mailsubject"
>
Subject{" "}
</label>
<input
id="mailsubject"
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
value={mail.subject}
onChange={(e) =>
handleSubjectChange(
e.target.value,
item
)
}
required
/>
</div>
<div>
<label
className="text-xs ml-1"
htmlFor="mailbody"
>
Body{" "}
</label>
<EditorToolbar containerId="toolbar1" />
<ReactQuill
id="mailbody"
theme="snow"
value={mail.body || ""}
placeholder="add body of email "
modules={module1}
formats={formats}
onChange={(value) =>
handlebodyChange(value, item)
}
/>
</div>
<button
type="submit"
className="op-btn op-btn-primary"
>
Resend
</button>
</form>
</div>
)}
{Object?.keys(isNextStep) <= 0 && (
<div className="flex justify-between items-center gap-2 my-2 px-3">
<div className="text-black">
{user?.signerPtr?.Name || "-"}{" "}
{`<${
user?.email
? user.email
: user.signerPtr.Email
}>`}
</div>
<>{fetchUserStatus(user, item)}</>
</div>
)}
</React.Fragment>
))}
</div>
</ModalUi>
)}
</td>
</tr>
)
)}
</>
)}
</tbody>
</table>
</div>
<div className="op-join flex flex-wrap items-center p-2 ">
{props.List.length > props.docPerPage && (
<button
apps/OpenSign/src/primitives/LazyPage.js
+3 -2
View File
@@ -1,11 +1,12 @@
import React, { Suspense } from "react";
import Loader from "./Loader";
const LazyPage = ({ Page }) => {
return (
<Suspense
fallback={
<div className="flex justify-center items-center h-[100vh] text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
<div className="flex justify-center items-center h-[100vh]">
<Loader />
</div>
}
>
apps/OpenSign/src/primitives/Loader.js
+9
View File
@@ -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
+5 -4
View File
@@ -1,13 +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 className="flex flex-col justify-center items-center h-[100vh]">
<img alt="loader" src={loader} className="w-[80px] h-[80px]" />
{/* <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/TourContentWithBtn.js
+4 -12
View File
@@ -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>
);