mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-21 15:12:34 +02:00
Merge pull request #533 from OpenSignLabs/premium_alert
This commit is contained in:
@@ -4,6 +4,7 @@ import Parse from "parse";
|
||||
import getReplacedHashQuery from "../../constant/getReplacedHashQuery";
|
||||
import "../../styles/loader.css";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Tooltip from "../../primitives/Tooltip";
|
||||
|
||||
const DashboardCard = (props) => {
|
||||
const navigate = useNavigate();
|
||||
@@ -335,7 +336,7 @@ const DashboardCard = (props) => {
|
||||
props.Data && props.Data.Redirect_type
|
||||
? "cursor-pointer"
|
||||
: "cursor-default"
|
||||
} w-full h-[140px] px-3 pt-4 pb-10 text-white rounded-md shadow overflow-hidden`}
|
||||
} w-full h-[140px] px-3 pt-4 pb-10 text-white rounded-md shadow overflow-hidden relative`}
|
||||
>
|
||||
<div className="flex items-center justify-start gap-5">
|
||||
<span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
|
||||
@@ -352,6 +353,9 @@ const DashboardCard = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs absolute top-1 right-1">
|
||||
<Tooltip id={props.Label} iconColor={"white"} message={props?.Data?.tourMessage} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
|
||||
import { themeColor } from "../../constant/const";
|
||||
import ModalUi from "../../primitives/ModalUi";
|
||||
import { radioButtonWidget } from "../../constant/Utils";
|
||||
import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
|
||||
function DropdownWidgetOption(props) {
|
||||
const [dropdownOptionList, setDropdownOptionList] = useState([
|
||||
"option-1",
|
||||
@@ -144,21 +145,15 @@ function DropdownWidgetOption(props) {
|
||||
};
|
||||
|
||||
return (
|
||||
//props.showDropdown
|
||||
<ModalUi
|
||||
// styleClass={"dropdownModal"}
|
||||
isOpen={props.showDropdown}
|
||||
title={props.title}
|
||||
showClose={false}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
|
||||
<div className="h-full p-[15px]">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSaveOption();
|
||||
}}
|
||||
>
|
||||
<div className="dropdownContainer">
|
||||
<div>
|
||||
<label style={{ fontSize: "13px", fontWeight: "600" }}>
|
||||
Name<span style={{ color: "red", fontSize: 13 }}> *</span>
|
||||
</label>
|
||||
@@ -383,17 +378,22 @@ function DropdownWidgetOption(props) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{props.type === "checkbox" && !props.isSignYourself && (
|
||||
<PremiumAlertHeader
|
||||
message={
|
||||
"Field validations are free in beta, this feature will incur a fee later."
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
className={`${
|
||||
props.type === "checkbox" && !props.isSignYourself
|
||||
? "mb-[15px]"
|
||||
: "my-[15px]"
|
||||
} w-full h-[1px] bg-[#9f9f9f]`}
|
||||
></div>
|
||||
|
||||
<button
|
||||
// onClick={() => handleSaveOption()}
|
||||
disabled={dropdownOptionList.length === 0 && true}
|
||||
style={{
|
||||
background: themeColor,
|
||||
|
||||
@@ -3,6 +3,7 @@ import ModalUi from "../../primitives/ModalUi";
|
||||
import "../../styles/AddUser.css";
|
||||
import RegexParser from "regex-parser";
|
||||
import { textInputWidget } from "../../constant/Utils";
|
||||
import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
|
||||
|
||||
const WidgetNameModal = (props) => {
|
||||
const [formdata, setFormdata] = useState({
|
||||
@@ -14,7 +15,7 @@ const WidgetNameModal = (props) => {
|
||||
});
|
||||
const [isValid, setIsValid] = useState(true);
|
||||
const statusArr = ["Required", "Optional"];
|
||||
const inputOpt = ["email", "number"];
|
||||
const inputOpt = ["text", "email", "number"];
|
||||
|
||||
useEffect(() => {
|
||||
if (props.defaultdata) {
|
||||
@@ -70,7 +71,7 @@ const WidgetNameModal = (props) => {
|
||||
return "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/";
|
||||
case "number":
|
||||
return "/^\\d+$/";
|
||||
case textInputWidget:
|
||||
case "text":
|
||||
return "/^[a-zA-Zs]+$/";
|
||||
default:
|
||||
return type;
|
||||
@@ -98,7 +99,23 @@ const WidgetNameModal = (props) => {
|
||||
handleClose={props.handleClose && props.handleClose}
|
||||
title={"Widget info"}
|
||||
>
|
||||
<form onSubmit={handleSubmit} style={{ padding: 20 }}>
|
||||
{(props.defaultdata?.type === textInputWidget ||
|
||||
props.widgetName === textInputWidget) && (
|
||||
<PremiumAlertHeader
|
||||
message={
|
||||
"Field validations are free in beta, this feature will incur a fee later."
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className={`${
|
||||
props.defaultdata?.type === textInputWidget ||
|
||||
props.widgetName === textInputWidget
|
||||
? "pt-0"
|
||||
: ""
|
||||
} p-[20px]`}
|
||||
>
|
||||
<div className="form-section">
|
||||
<label htmlFor="name" style={{ fontSize: 13 }}>
|
||||
Name
|
||||
@@ -170,25 +187,22 @@ const WidgetNameModal = (props) => {
|
||||
name="defaultValue"
|
||||
value={formdata.defaultValue}
|
||||
onChange={(e) => handledefaultChange(e)}
|
||||
onBlur={() =>
|
||||
isValid === false &&
|
||||
setFormdata({ ...formdata, defaultValue: "" })
|
||||
}
|
||||
autoComplete="off"
|
||||
onBlur={() => {
|
||||
if (isValid === false) {
|
||||
setFormdata({ ...formdata, defaultValue: "" });
|
||||
setIsValid(true);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{isValid === false ? (
|
||||
<p style={{ color: "Red", fontSize: 8 }}>
|
||||
{isValid === false && (
|
||||
<div className="warning defaultvalueWarning" style={{ fontSize: 12 }}>
|
||||
<i
|
||||
className="fas fa-exclamation-circle"
|
||||
style={{ color: "#fab005", fontSize: 15 }}
|
||||
></i>{" "}
|
||||
invalid default value
|
||||
</p>
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "transparent",
|
||||
fontSize: 10,
|
||||
margin: "3px 8px"
|
||||
}}
|
||||
>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -3,6 +3,7 @@ import Select from "react-select";
|
||||
import AddSigner from "../../AddSigner";
|
||||
import Modal from "react-modal";
|
||||
import Parse from "parse";
|
||||
import Tooltip from "../../../primitives/Tooltip";
|
||||
function arrayMove(array, from, to) {
|
||||
array = array.slice();
|
||||
array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
|
||||
@@ -107,6 +108,12 @@ const SignersInput = (props) => {
|
||||
<label className="block">
|
||||
Signers
|
||||
{props.required && <span className="text-red-500 text-[13px]">*</span>}
|
||||
<span className="absolute ml-1 text-xs z-50">
|
||||
<Tooltip
|
||||
id={"signer-tooltip"}
|
||||
message={"Begin typing a contact's name to see suggested signers from your saved contacts or add new ones. Arrange the signing order by adding signers in the desired sequence. Use the '+' button to include signers and the 'x' to remove them. Each signer will receive an email prompt to sign the document in the order listed."}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<div style={{ display: "flex", gap: 5 }}>
|
||||
<div style={{ flexWrap: "wrap", width: "100%" }}>
|
||||
|
||||
@@ -18,7 +18,8 @@ export default function reportJson(id) {
|
||||
btnIcon: "fa fa-plus",
|
||||
redirectUrl: "draftDocument"
|
||||
}
|
||||
]
|
||||
],
|
||||
helpMsg: "This are documents you have started but have not finalized for sending."
|
||||
};
|
||||
// Need your sign report
|
||||
case "4Hhwbp482K":
|
||||
@@ -33,7 +34,9 @@ export default function reportJson(id) {
|
||||
btnIcon: "fa fa-eye",
|
||||
redirectUrl: "pdfRequestFiles"
|
||||
}
|
||||
]
|
||||
],
|
||||
helpMsg:
|
||||
"This is a list of documents that are waiting for your signature"
|
||||
};
|
||||
// In progess report
|
||||
case "1MwEuxLEkF":
|
||||
@@ -48,7 +51,9 @@ export default function reportJson(id) {
|
||||
btnIcon: "fa fa-eye",
|
||||
redirectUrl: "pdfRequestFiles"
|
||||
}
|
||||
]
|
||||
],
|
||||
helpMsg:
|
||||
"This is a list of documents you've sent to other parties for signature."
|
||||
};
|
||||
// completed documents report
|
||||
case "kQUoW4hUXz":
|
||||
@@ -63,7 +68,8 @@ export default function reportJson(id) {
|
||||
btnIcon: "fa fa-eye",
|
||||
redirectUrl: "draftDocument"
|
||||
}
|
||||
]
|
||||
],
|
||||
helpMsg: "This is a list of documents that have been signed by all parties."
|
||||
};
|
||||
// declined documents report
|
||||
case "UPr2Fm5WY3":
|
||||
@@ -78,7 +84,8 @@ export default function reportJson(id) {
|
||||
btnIcon: "fa fa-eye",
|
||||
redirectUrl: "draftDocument"
|
||||
}
|
||||
]
|
||||
],
|
||||
helpMsg: "This is a list of documents that have been declined by one of the signers."
|
||||
};
|
||||
// Expired Documents report
|
||||
case "zNqBHXHsYH":
|
||||
@@ -93,7 +100,8 @@ export default function reportJson(id) {
|
||||
btnIcon: "fa fa-eye",
|
||||
redirectUrl: "draftDocument"
|
||||
}
|
||||
]
|
||||
],
|
||||
helpMsg: "This is a list of documents that have reached their expiration date."
|
||||
};
|
||||
// Recently sent for signatures report show on dashboard
|
||||
case "d9k3UfYHBc":
|
||||
@@ -153,7 +161,8 @@ export default function reportJson(id) {
|
||||
btnIcon: "fa-solid fa-trash"
|
||||
}
|
||||
],
|
||||
form: "ContactBook"
|
||||
form: "ContactBook",
|
||||
helpMsg: "This is a list of contacts/signers added by you. These will appear as suggestions when you try to add signers to a new document."
|
||||
};
|
||||
// template report
|
||||
case "6TeaPr321t":
|
||||
@@ -175,7 +184,9 @@ export default function reportJson(id) {
|
||||
btnIcon: "fa fa-plus",
|
||||
redirectUrl: "template"
|
||||
}
|
||||
]
|
||||
],
|
||||
helpMsg:
|
||||
"This is a list of templates that are available to you for creating documents. You can click the 'use' button to create a new document using a template, modify the document & add signers in the next step."
|
||||
};
|
||||
default:
|
||||
return null;
|
||||
|
||||
@@ -35,7 +35,7 @@ const Forms = (props) => {
|
||||
const [formData, setFormData] = useState({
|
||||
Name: "",
|
||||
Description: "",
|
||||
Note: "Please review and sign this document",
|
||||
Note: "",
|
||||
TimeToCompleteDays: 15,
|
||||
SendinOrder: "false"
|
||||
});
|
||||
@@ -51,6 +51,7 @@ const Forms = (props) => {
|
||||
};
|
||||
useEffect(() => {
|
||||
handleReset();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [props.title]);
|
||||
const handleFileInput = (e) => {
|
||||
setpercentage(0);
|
||||
@@ -235,7 +236,10 @@ const Forms = (props) => {
|
||||
setFormData({
|
||||
Name: "",
|
||||
Description: "",
|
||||
Note: "Please review and sign this document",
|
||||
Note:
|
||||
props.title === "Sign Yourself"
|
||||
? "Note to myself"
|
||||
: "Please review and sign this document",
|
||||
TimeToCompleteDays: 15,
|
||||
SendinOrder: "true"
|
||||
});
|
||||
@@ -326,7 +330,10 @@ const Forms = (props) => {
|
||||
</div>
|
||||
<div className="text-xs mt-2">
|
||||
<label className="block">
|
||||
Title<span className="text-red-500 text-[13px]">*</span>
|
||||
{props.title === "New Template"
|
||||
? "Template Title"
|
||||
: "Document Title"}
|
||||
<span className="text-red-500 text-[13px]">*</span>
|
||||
</label>
|
||||
<input
|
||||
name="Name"
|
||||
|
||||
@@ -5,6 +5,8 @@ import Alert from "../primitives/Alert";
|
||||
import ModalUi from "../primitives/ModalUi";
|
||||
import { rejectBtn, submitBtn } from "../constant/const";
|
||||
import { openInNewTab } from "../constant/Utils";
|
||||
import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
|
||||
import Tooltip from "../primitives/Tooltip";
|
||||
|
||||
function GenerateToken() {
|
||||
const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
|
||||
@@ -115,7 +117,13 @@ function GenerateToken() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white flex flex-col justify-center shadow rounded">
|
||||
<h1 className="ml-4 mt-3 mb-2 font-semibold">API Token</h1>
|
||||
<PremiumAlertHeader />
|
||||
<h1 className="ml-4 mt-3 mb-2 font-semibold">
|
||||
API Token{" "}
|
||||
<Tooltip
|
||||
url={"https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"}
|
||||
/>
|
||||
</h1>
|
||||
<ul className="w-full flex flex-col p-2 text-sm">
|
||||
<li
|
||||
className={`flex justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
|
||||
|
||||
@@ -13,7 +13,6 @@ const ManageSign = () => {
|
||||
const [signName, setSignName] = useState("");
|
||||
const [signature, setSignature] = useState("");
|
||||
const [warning, setWarning] = useState(false);
|
||||
const [nameWarning, setNameWarning] = useState(false);
|
||||
const [isvalue, setIsValue] = useState(false);
|
||||
const allColor = ["blue", "red", "black"];
|
||||
const [isLoader, setIsLoader] = useState(true);
|
||||
@@ -105,9 +104,7 @@ const ManageSign = () => {
|
||||
e.preventDefault();
|
||||
const isUrl = image.includes("https");
|
||||
|
||||
if (!signName) {
|
||||
setNameWarning(true);
|
||||
} else if (!isvalue) {
|
||||
if (!isvalue) {
|
||||
setWarning(true);
|
||||
setTimeout(() => setWarning(false), 1000);
|
||||
} else {
|
||||
@@ -222,26 +219,13 @@ const ManageSign = () => {
|
||||
setIsValue(true);
|
||||
};
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
maxHeight: "500px",
|
||||
overflow: "auto"
|
||||
}}
|
||||
>
|
||||
<div className="relative h-full bg-white flex shadow rounded overflow-auto">
|
||||
{isLoader && (
|
||||
<div className="absolute bg-black bg-opacity-75 inset-0 z-50 flex justify-center items-center">
|
||||
<div style={{ height: "300px" }}>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: "45%",
|
||||
marginTop: "150px",
|
||||
fontSize: "45px",
|
||||
color: "#3dd3e0"
|
||||
}}
|
||||
className="loader-37"
|
||||
></div>
|
||||
</div>
|
||||
<div className="absolute bg-black bg-opacity-75 z-50 w-full h-full flex justify-center items-center">
|
||||
<div
|
||||
style={{ color: "#3dd3e0" }}
|
||||
className="loader-37 text-[45px]"
|
||||
></div>
|
||||
</div>
|
||||
)}
|
||||
{isSuccess && (
|
||||
@@ -269,61 +253,9 @@ const ManageSign = () => {
|
||||
paddingBottom: 8
|
||||
}}
|
||||
>
|
||||
Manage Signature
|
||||
My Signature
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column" }}>
|
||||
<label
|
||||
htmlFor="signName"
|
||||
style={{
|
||||
fontSize: 12,
|
||||
position: "relative",
|
||||
paddingBottom: 5
|
||||
}}
|
||||
>
|
||||
Signer's Name
|
||||
{nameWarning && (
|
||||
<div
|
||||
className="warning nameWarning"
|
||||
style={{ fontSize: 12 }}
|
||||
onAnimationEnd={() => setNameWarning(false)}
|
||||
>
|
||||
<i
|
||||
className="fas fa-exclamation-circle"
|
||||
style={{ color: "#fab005", fontSize: 15 }}
|
||||
></i>{" "}
|
||||
Please fill input field
|
||||
</div>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
id="signName"
|
||||
className="signInputManage"
|
||||
value={signName}
|
||||
style={{
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: 4,
|
||||
|
||||
height: 35,
|
||||
padding: "6px 12px",
|
||||
marginBottom: 10,
|
||||
fontSize: 12
|
||||
}}
|
||||
required
|
||||
onFocus={() => setNameWarning(false)}
|
||||
onChange={(e) => setSignName(e.target.value)}
|
||||
/>
|
||||
|
||||
<label
|
||||
htmlFor="imgoverview"
|
||||
style={{
|
||||
fontSize: 12,
|
||||
paddingBottom: 5
|
||||
}}
|
||||
>
|
||||
Signature/Image
|
||||
</label>
|
||||
</div>
|
||||
<div className="signBlock">
|
||||
<div className="signBlock mt-4">
|
||||
<div>
|
||||
<div style={{ position: "relative" }}>
|
||||
<div
|
||||
@@ -429,10 +361,10 @@ const ManageSign = () => {
|
||||
key === 0 && penColor === "blue"
|
||||
? "2px solid blue"
|
||||
: key === 1 && penColor === "red"
|
||||
? "2px solid red"
|
||||
: key === 2 && penColor === "black"
|
||||
? "2px solid black"
|
||||
: "2px solid white"
|
||||
? "2px solid red"
|
||||
: key === 2 && penColor === "black"
|
||||
? "2px solid black"
|
||||
: "2px solid white"
|
||||
}}
|
||||
onClick={() => {
|
||||
if (key === 0) {
|
||||
@@ -537,10 +469,10 @@ const ManageSign = () => {
|
||||
key === 0 && initialPen === "blue"
|
||||
? "2px solid blue"
|
||||
: key === 1 && initialPen === "red"
|
||||
? "2px solid red"
|
||||
: key === 2 && initialPen === "black"
|
||||
? "2px solid black"
|
||||
: "2px solid white"
|
||||
? "2px solid red"
|
||||
: key === 2 && initialPen === "black"
|
||||
? "2px solid black"
|
||||
: "2px solid white"
|
||||
}}
|
||||
onClick={() => {
|
||||
if (key === 0) {
|
||||
|
||||
@@ -12,6 +12,7 @@ const Report = () => {
|
||||
const [List, setList] = useState([]);
|
||||
const [isLoader, setIsLoader] = useState(true);
|
||||
const [reportName, setReportName] = useState("");
|
||||
const [reporthelp, setReportHelp] = useState("");
|
||||
const [actions, setActions] = useState([]);
|
||||
const [heading, setHeading] = useState([]);
|
||||
const [isNextRecord, setIsNextRecord] = useState(false);
|
||||
@@ -53,6 +54,7 @@ const Report = () => {
|
||||
setHeading(json.heading);
|
||||
setReportName(json.reportName);
|
||||
setForm(json.form);
|
||||
setReportHelp(json?.helpMsg)
|
||||
const currentUser = Parse.User.current().id;
|
||||
|
||||
const headers = {
|
||||
@@ -156,6 +158,7 @@ const Report = () => {
|
||||
isMoreDocs={isMoreDocs}
|
||||
docPerPage={docPerPage}
|
||||
form={form}
|
||||
report_help={reporthelp}
|
||||
/>
|
||||
) : (
|
||||
<PageNotFound prefix={"Report"} />
|
||||
|
||||
@@ -6,6 +6,8 @@ import dp from "../assets/images/dp.png";
|
||||
import Title from "../components/Title";
|
||||
import sanitizeFileName from "../primitives/sanitizeFileName";
|
||||
import axios from "axios";
|
||||
import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
|
||||
import Tooltip from "../primitives/Tooltip";
|
||||
|
||||
function UserProfile() {
|
||||
const navigate = useNavigate();
|
||||
@@ -250,7 +252,7 @@ function UserProfile() {
|
||||
<span className="font-semibold">Email:</span>{" "}
|
||||
<span>{UserProfile && UserProfile.email}</span>
|
||||
</li>
|
||||
<li className="flex justify-between items-center border-y-[1px] border-gray-300 py-2 break-all">
|
||||
<li className="flex justify-between items-center border-t-[1px] border-gray-300 py-2 break-all">
|
||||
<span className="font-semibold">Is Email verified:</span>{" "}
|
||||
<span>
|
||||
{UserProfile && UserProfile.emailVerified
|
||||
@@ -258,10 +260,17 @@ function UserProfile() {
|
||||
: "Not verified"}
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex justify-between items-center border-y-[1px] border-gray-300 py-2 break-all">
|
||||
<span className="font-semibold">Disable DocumentId :</span>{" "}
|
||||
<span>
|
||||
<label className="relative inline-flex items-center cursor-pointer mb-0">
|
||||
<li className="border-y-[1px] border-gray-300 break-all">
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="font-semibold">
|
||||
Disable DocumentId :{" "}
|
||||
<Tooltip url={"https://docs.opensignlabs.com/docs/help/Settings/disabledocumentid"} />{" "}
|
||||
</span>{" "}
|
||||
<label
|
||||
className={`${
|
||||
editmode ? "cursor-pointer" : ""
|
||||
} relative inline-flex items-center mb-0`}
|
||||
>
|
||||
<input
|
||||
disabled={editmode ? false : true}
|
||||
checked={isDisableDocId}
|
||||
@@ -270,9 +279,14 @@ function UserProfile() {
|
||||
value=""
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
||||
<div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<PremiumAlertHeader
|
||||
message={
|
||||
"Disable documentId is free in beta, this feature will incur a fee later."
|
||||
}
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="flex justify-center pt-2 pb-3 md:pt-3 md:pb-4">
|
||||
|
||||
@@ -6,6 +6,8 @@ import ModalUi from "../primitives/ModalUi";
|
||||
import { rejectBtn, submitBtn } from "../constant/const";
|
||||
import { openInNewTab } from "../constant/Utils";
|
||||
import Parse from "parse";
|
||||
import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
|
||||
import Tooltip from "../primitives/Tooltip";
|
||||
|
||||
function Webhook() {
|
||||
const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
|
||||
@@ -101,7 +103,13 @@ function Webhook() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white flex flex-col justify-center shadow rounded">
|
||||
<h1 className="ml-4 mt-3 mb-2 font-semibold">Webhook</h1>
|
||||
<PremiumAlertHeader />
|
||||
<h1 className="ml-4 mt-3 mb-2 font-semibold">
|
||||
Webhook{" "}
|
||||
<Tooltip
|
||||
url={"https://docs.opensignlabs.com/docs/API-docs/get-webhook"}
|
||||
/>
|
||||
</h1>
|
||||
<ul className="w-full flex flex-col p-2 text-sm">
|
||||
<li
|
||||
className={`flex justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
|
||||
|
||||
@@ -6,6 +6,7 @@ import ModalUi from "./ModalUi";
|
||||
import AddSigner from "../components/AddSigner";
|
||||
import { modalSubmitBtnColor, modalCancelBtnColor } from "../constant/const";
|
||||
import Alert from "./Alert";
|
||||
import Tooltip from "./Tooltip";
|
||||
const ReportTable = ({
|
||||
ReportName,
|
||||
List,
|
||||
@@ -15,7 +16,8 @@ const ReportTable = ({
|
||||
setIsNextRecord,
|
||||
isMoreDocs,
|
||||
docPerPage,
|
||||
form
|
||||
form,
|
||||
report_help
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@@ -255,7 +257,14 @@ const ReportTable = ({
|
||||
</Alert>
|
||||
)}
|
||||
<div className="flex flex-row items-center justify-between my-2 mx-3 text-[20px] md:text-[23px]">
|
||||
<div className="font-light">{ReportName}</div>
|
||||
<div className="font-light">
|
||||
{ReportName}{" "}
|
||||
{report_help && (
|
||||
<span className="text-xs md:text-[13px] font-normal">
|
||||
<Tooltip message={report_help} />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{ReportName === "Templates" && (
|
||||
<i
|
||||
onClick={() => navigate("/form/template")}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
const PremiumAlertHeader = ({ message }) => (
|
||||
<marquee className="bg-yellow-300 text-black px-2">
|
||||
{message
|
||||
? message
|
||||
: "Currently free in Beta, this feature will incur a fee later."}
|
||||
</marquee>
|
||||
);
|
||||
|
||||
export default PremiumAlertHeader;
|
||||
@@ -1,18 +1,36 @@
|
||||
import React from "react";
|
||||
// import * as HoverCard from "@radix-ui/react-hover-card";
|
||||
// import "../styles/opensigndrive.css";
|
||||
import { Tooltip as ReactTooltip } from "react-tooltip";
|
||||
const Tooltip = ({ children, message }) => (
|
||||
<>
|
||||
<a data-tooltip-id="my-tooltip" data-tooltip-content={message}>
|
||||
import { openInNewTab } from "../constant/Utils";
|
||||
const Tooltip = ({ children, id, message, url, iconColor }) =>
|
||||
url ? (
|
||||
<button onClick={() => openInNewTab(url)} className="text-center">
|
||||
{children ? (
|
||||
children
|
||||
) : (
|
||||
<i className="fa-solid fa-question border-[1.5px] px-1.5 py-0.5 rounded-full border-[#33bbff] text-xs text-[#33bbff]"></i>
|
||||
<i className="fa-solid fa-question text-xs border-[1.5px] px-1 rounded-full border-[#33bbff] text-[#33bbff]"></i>
|
||||
)}
|
||||
</a>
|
||||
<ReactTooltip id="my-tooltip" className="max-w-[200px]" />
|
||||
</>
|
||||
);
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<a
|
||||
data-tooltip-id={id ? id : "my-tooltip"}
|
||||
data-tooltip-content={message}
|
||||
className="z-50"
|
||||
>
|
||||
{children ? (
|
||||
children
|
||||
) : (
|
||||
<i
|
||||
className="fa-solid fa-question text-xs border-[1.5px] px-1 rounded-full border-[#33bbff] text-[#33bbff]"
|
||||
style={{
|
||||
borderColor: iconColor ? iconColor : "#33bbff",
|
||||
color: iconColor ? iconColor : "#33bbff"
|
||||
}}
|
||||
></i>
|
||||
)}
|
||||
</a>
|
||||
<ReactTooltip id={id ? id : "my-tooltip"} className="max-w-[200px]" />
|
||||
</>
|
||||
);
|
||||
|
||||
export default Tooltip;
|
||||
|
||||
@@ -101,4 +101,62 @@
|
||||
.validationlist {
|
||||
background-position: right 1rem top 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
width: 250px;
|
||||
border-radius: 5px;
|
||||
animation: inAnimation 1s ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.defaultvalueWarning {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.defaultvalueWarning::before {
|
||||
content: "";
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-style: outset;
|
||||
border-width: 0px 10px 10px 10px;
|
||||
border-color: transparent transparent black transparent;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -29%;
|
||||
left: 0;
|
||||
right: 75%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@keyframes inAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
25% {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@@ -18,27 +18,6 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nameWarning {
|
||||
position: absolute;
|
||||
bottom: -70px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.nameWarning::before {
|
||||
content: "";
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-style: outset;
|
||||
border-width: 0px 10px 10px 10px;
|
||||
border-color: transparent transparent black transparent;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -29%;
|
||||
left: 0;
|
||||
right: 75%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.signWarning {
|
||||
bottom: 70px;
|
||||
left: 50px;
|
||||
|
||||
@@ -19,17 +19,6 @@
|
||||
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAASElEQVR4nGNgwAMkJSUbpKSkOvCpIaT5PxSTbogUQjMYMwxeIIXmVFIxA8UGDDyQGg0DnIDi6JKUlCxHMqCeZAOghjSAMD5FAKfeaURdUFxCAAAAAElFTkSuQmCC"), auto;
|
||||
}
|
||||
|
||||
.dropdownContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
.dropdownContainer::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.react-datepicker__input-container {
|
||||
position: initial !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user