mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-17 21:25:54 +02:00
feat: add tour for webhook and apitoken, update css
This commit is contained in:
prafull-opensignlabs
@@ -261,21 +261,14 @@ const DashboardCard = (props) => {
|
||||
}
|
||||
}
|
||||
body = str;
|
||||
await axios
|
||||
.post(url, body, { headers: headers })
|
||||
.then((response) => {
|
||||
try {
|
||||
if (response.data.result.length > 0) {
|
||||
setresponse(response.data.result[0][props.FilterData.key]);
|
||||
setLoading(false);
|
||||
} else {
|
||||
setresponse("0");
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
const response = await axios.post(url, body, { headers: headers });
|
||||
if (response.data.result.length > 0) {
|
||||
setresponse(response.data.result[0][props.FilterData.key]);
|
||||
setLoading(false);
|
||||
} else {
|
||||
setresponse("0");
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -338,7 +331,7 @@ const DashboardCard = (props) => {
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-start gap-5 text-white">
|
||||
<span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
|
||||
<span className="rounded-full bg-base-300 bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
|
||||
<i
|
||||
className={`${
|
||||
props.Icon ? props.Icon : "fa-light fa-info"
|
||||
|
||||
@@ -176,13 +176,13 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
|
||||
<div className="relative max-w-sm">
|
||||
<div
|
||||
onClick={() => SetIsOpen(true)}
|
||||
className=" cursor-pointer rounded px-[20px] py-[20px] bg-base-100 border-[1px] border-base-200 shadow flex max-w-sm gap-8 items-center"
|
||||
className="cursor-pointer rounded px-[20px] py-[20px] bg-base-100 border-[1px] border-base-200 shadow flex max-w-sm gap-8 items-center"
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
className="w-[40px] h-[40px] fill-current text-neutral"
|
||||
className="w-[40px] h-[40px] fill-current op-text-secondary"
|
||||
>
|
||||
<path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z" />
|
||||
</svg>
|
||||
@@ -194,10 +194,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
|
||||
? selectFolder.Name
|
||||
: "OpenSign™ Drive"}
|
||||
</p>
|
||||
<div
|
||||
className="text-black text-sm"
|
||||
// onClick={() => SetIsOpen(true)}
|
||||
>
|
||||
<div className="text-black text-sm">
|
||||
<i
|
||||
className="fa-light fa-pencil cursor-pointer"
|
||||
title="Select Folder"
|
||||
|
||||
@@ -7,7 +7,7 @@ const dashboardJson = [
|
||||
widget: {
|
||||
type: "Card",
|
||||
icon: "fa-light fa-signature",
|
||||
bgColor: "bg-[#f0058e]",
|
||||
bgColor: "op-bg-primary",
|
||||
label: "Need your Signature",
|
||||
description: null,
|
||||
data: {
|
||||
@@ -30,7 +30,7 @@ const dashboardJson = [
|
||||
widget: {
|
||||
type: "Card",
|
||||
icon: "fa-light fa-sign-out-alt",
|
||||
bgColor: "bg-[#2ed8b6]",
|
||||
bgColor: "op-bg-secondary",
|
||||
label: "Out for signatures",
|
||||
description: null,
|
||||
data: {
|
||||
|
||||
@@ -49,8 +49,8 @@ function ChangePassword() {
|
||||
return <Navigate to="/" />;
|
||||
}
|
||||
return (
|
||||
<div className="w-full bg-base-100 text-base-content shadow rounded p-2">
|
||||
<Title title={"Change Password"} />
|
||||
<div className="w-full bg-base-100 text-base-content shadow rounded-box p-2">
|
||||
<Title title="Change Password" />
|
||||
<div className="text-xl font-bold border-b-[1px] border-gray-300">
|
||||
Change Password
|
||||
</div>
|
||||
@@ -98,7 +98,10 @@ function ChangePassword() {
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="op-btn op-btn-primary shadow-md m-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="op-btn op-btn-primary shadow-md mt-2"
|
||||
>
|
||||
Change Password
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -565,7 +565,7 @@ const Forms = (props) => {
|
||||
setFormData((prev) => ({ ...prev, autoreminder: !formData.autoreminder }));
|
||||
};
|
||||
return (
|
||||
<div className="shadow-md rounded my-2 p-3 bg-base-100 text-base-content md:border-[1px] md:border-gray-600/50">
|
||||
<div className="shadow-md rounded-box my-[2px] p-3 bg-base-100 text-base-content">
|
||||
<Title title={props?.title} />
|
||||
{isAlert && (
|
||||
<Alert type={isErr ? "danger" : "success"}>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Title from "../components/Title";
|
||||
import axios from "axios";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Alert from "../primitives/Alert";
|
||||
import ModalUi from "../primitives/ModalUi";
|
||||
import { isEnableSubscription } from "../constant/const";
|
||||
@@ -9,19 +8,24 @@ import { checkIsSubscribed, copytoData, openInNewTab } from "../constant/Utils";
|
||||
import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
|
||||
import Tooltip from "../primitives/Tooltip";
|
||||
import Loader from "../primitives/Loader";
|
||||
import SubscribeCard from "../primitives/SubscribeCard";
|
||||
import Tour from "reactour";
|
||||
const tourSteps = [
|
||||
{
|
||||
selector: '[data-tut="apisubscribe"]',
|
||||
content: "Upgrade now to generate API token"
|
||||
}
|
||||
];
|
||||
|
||||
function GenerateToken() {
|
||||
const navigation = useNavigate();
|
||||
const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
|
||||
const [parseAppId] = useState(localStorage.getItem("parseAppId"));
|
||||
const [apiToken, SetApiToken] = useState("");
|
||||
const [isLoader, setIsLoader] = useState(true);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [isGenerate, setIsGenerate] = useState(false);
|
||||
const [isErr, setIsErr] = useState(false);
|
||||
const [isModal, setIsModal] = useState(false);
|
||||
const [isSubscribe, setIsSubscribe] = useState(false);
|
||||
|
||||
const [isAlert, setIsAlert] = useState({ type: "success", msg: "" });
|
||||
const [isTour, setIsTour] = useState(false);
|
||||
useEffect(() => {
|
||||
fetchToken();
|
||||
// eslint-disable-next-line
|
||||
@@ -33,7 +37,6 @@ function GenerateToken() {
|
||||
const getIsSubscribe = await checkIsSubscribed();
|
||||
setIsSubscribe(getIsSubscribe);
|
||||
}
|
||||
|
||||
const url = parseBaseUrl + "functions/getapitoken";
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
@@ -44,7 +47,6 @@ function GenerateToken() {
|
||||
if (res) {
|
||||
SetApiToken(res.data.result.result);
|
||||
}
|
||||
|
||||
setIsLoader(false);
|
||||
} catch (err) {
|
||||
SetApiToken();
|
||||
@@ -54,49 +56,43 @@ function GenerateToken() {
|
||||
};
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoader(true);
|
||||
setIsModal(false);
|
||||
try {
|
||||
const url = parseBaseUrl + "functions/generateapitoken";
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": parseAppId,
|
||||
sessiontoken: localStorage.getItem("accesstoken")
|
||||
};
|
||||
await axios.post(url, {}, { headers: headers }).then((res) => {
|
||||
if (!isSubscribe && isEnableSubscription) {
|
||||
setIsTour(true);
|
||||
} else {
|
||||
setIsLoader(true);
|
||||
setIsModal(false);
|
||||
try {
|
||||
const url = parseBaseUrl + "functions/generateapitoken";
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": parseAppId,
|
||||
sessiontoken: localStorage.getItem("accesstoken")
|
||||
};
|
||||
const res = await axios.post(url, {}, { headers: headers });
|
||||
if (res) {
|
||||
SetApiToken(res.data.result.token);
|
||||
// localStorage.setItem("apiToken", res.data.result.token);
|
||||
setIsGenerate(true);
|
||||
setTimeout(() => {
|
||||
setIsGenerate(false);
|
||||
}, 1500);
|
||||
setIsLoader(false);
|
||||
setIsAlert({ type: "success", msg: "Token generated successfully." });
|
||||
} else {
|
||||
console.error("Error while generating Token");
|
||||
setIsLoader(false);
|
||||
setIsErr(true);
|
||||
setTimeout(() => {
|
||||
setIsErr(false);
|
||||
}, 1500);
|
||||
setIsAlert({ type: "danger", msg: "Something went wrong." });
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
setIsLoader(false);
|
||||
setIsErr(true);
|
||||
setTimeout(() => {
|
||||
setIsErr(false);
|
||||
}, 1500);
|
||||
|
||||
console.log("err", error);
|
||||
} catch (error) {
|
||||
setIsAlert({ type: "danger", msg: "Something went wrong." });
|
||||
console.log("while generating Token", error);
|
||||
} finally {
|
||||
setIsLoader(false);
|
||||
setTimeout(() => {
|
||||
setIsAlert({ type: "success", msg: "" });
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const copytoclipboard = (text) => {
|
||||
copytoData(text);
|
||||
setCopied(true);
|
||||
setIsAlert({ type: "success", msg: "Copied" });
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
setIsAlert({ type: "success", msg: "" });
|
||||
}, 1500); // Reset copied state after 1.5 seconds
|
||||
};
|
||||
const handleModal = () => setIsModal(!isModal);
|
||||
@@ -104,132 +100,124 @@ function GenerateToken() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Title title={"API Token"} />
|
||||
{isGenerate && (
|
||||
<Alert type="success">Token generated successfully!</Alert>
|
||||
{isAlert.msg && (
|
||||
<Alert type={isAlert.type}>
|
||||
<div className="ml-3">{isAlert.msg}</div>
|
||||
</Alert>
|
||||
)}
|
||||
{copied && <Alert type="success">Copied</Alert>}
|
||||
{isErr && <Alert type="danger">Something went wrong!</Alert>}
|
||||
{isLoader ? (
|
||||
<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">
|
||||
{!isEnableSubscription && <PremiumAlertHeader />}
|
||||
<h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
|
||||
OpenSign™ API{" "}
|
||||
<Tooltip
|
||||
url={
|
||||
"https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
|
||||
}
|
||||
isSubscribe={true}
|
||||
/>
|
||||
</h1>
|
||||
<ul
|
||||
className={
|
||||
isSubscribe || !isEnableSubscription
|
||||
? "w-full flex flex-col p-2 text-sm "
|
||||
: "w-full flex flex-col p-2 text-sm opacity-20 pointer-events-none select-none"
|
||||
}
|
||||
>
|
||||
<li className="flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2">
|
||||
<div className="w-full md:w-[70%] flex-col md:flex-row text-xs md:text-[15px] flex items-center gap-x-5 ">
|
||||
<span className="">Api Token:</span>{" "}
|
||||
<span id="token" className="md:text-end py-2 md:py-0">
|
||||
<span
|
||||
className="cursor-pointer"
|
||||
onClick={() => copytoclipboard(apiToken)}
|
||||
>
|
||||
{apiToken ? apiToken : "_____"}
|
||||
</span>
|
||||
<button
|
||||
className="op-btn op-btn-accent op-btn-outline op-btn-sm ml-2"
|
||||
onClick={() => copytoclipboard(apiToken)}
|
||||
>
|
||||
<i className="fa-light fa-copy"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={apiToken ? handleModal : handleSubmit}
|
||||
className="op-btn op-btn-primary"
|
||||
>
|
||||
{apiToken ? "Regenerate Token" : "Generate Token"}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="flex items-center justify-center ">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
openInNewTab(
|
||||
<>
|
||||
<div className="bg-base-100 text-base-content flex flex-col justify-center shadow-md rounded-box mb-3">
|
||||
{!isEnableSubscription && <PremiumAlertHeader />}
|
||||
<h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
|
||||
OpenSign™ API{" "}
|
||||
<Tooltip
|
||||
url={
|
||||
"https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
|
||||
)
|
||||
}
|
||||
className="op-btn op-btn-secondary my-2"
|
||||
}
|
||||
isSubscribe={true}
|
||||
/>
|
||||
</h1>
|
||||
<ul
|
||||
className={"w-full flex flex-col p-2 text-sm"}
|
||||
// isSubscribe || !isEnableSubscription
|
||||
// ? "w-full flex flex-col p-2 text-sm "
|
||||
// : "w-full flex flex-col p-2 text-sm opacity-20 pointer-events-none select-none"
|
||||
>
|
||||
View Docs
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!isSubscribe && isEnableSubscription && (
|
||||
<>
|
||||
<h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
|
||||
Upgrade to PRO Plan
|
||||
</h1>
|
||||
<ul className={"w-full flex flex-col p-2 text-sm "}>
|
||||
<li
|
||||
className={`flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
|
||||
>
|
||||
<div className="w-[70%] flex-col md:flex-row flex items-center gap-3 ">
|
||||
<span className="">$29.99/month:</span>{" "}
|
||||
<span id="token" className=" md:text-end cursor-pointer">
|
||||
Sign 100 docs using API. Only 0.15/docs after that.
|
||||
</span>
|
||||
</div>
|
||||
{!isSubscribe && isEnableSubscription && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigation("/subscription")}
|
||||
className="text-xs md:text-sm shadow op-btn op-btn-outline op-btn-accent"
|
||||
<li className="flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2">
|
||||
<div className="w-full md:w-[70%] flex-col md:flex-row text-xs md:text-[15px] flex items-center gap-x-5">
|
||||
<span className="ml-1">API Token:</span>{" "}
|
||||
<span
|
||||
id="token"
|
||||
className={`${
|
||||
isSubscribe || !isEnableSubscription
|
||||
? "bg-white/20 pointer-events-none select-none"
|
||||
: ""
|
||||
} md:text-end py-2 md:py-0`}
|
||||
>
|
||||
<span
|
||||
className="cursor-pointer"
|
||||
onClick={() => copytoclipboard(apiToken)}
|
||||
>
|
||||
Upgrade Now
|
||||
{apiToken ? apiToken : "_____"}
|
||||
</span>
|
||||
<button
|
||||
className="op-btn op-btn-accent op-btn-outline op-btn-sm ml-2"
|
||||
onClick={() => copytoclipboard(apiToken)}
|
||||
>
|
||||
<i className="fa-light fa-copy"></i>
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
|
||||
<ModalUi
|
||||
isOpen={isModal}
|
||||
title={apiToken ? "Regenerate Token" : "Generate Token"}
|
||||
handleClose={handleModal}
|
||||
>
|
||||
<div className="m-[20px]">
|
||||
<div className="text-lg font-normal text-base-content">
|
||||
Are you sure you want to regenerate token it will expire old
|
||||
token?
|
||||
</div>
|
||||
<hr className="bg-[#ccc] mt-4 " />
|
||||
<div className="flex items-center mt-3 gap-2 text-white">
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="op-btn op-btn-primary ml-[2px]"
|
||||
onClick={apiToken ? handleModal : handleSubmit}
|
||||
className="op-btn op-btn-primary"
|
||||
>
|
||||
Yes
|
||||
{apiToken ? "Regenerate Token" : "Generate Token"}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleModal}
|
||||
className="op-btn op-btn-secondary"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="flex items-center justify-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
openInNewTab(
|
||||
"https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
|
||||
)
|
||||
}
|
||||
className="op-btn op-btn-secondary mt-2 mb-3 px-8"
|
||||
>
|
||||
View Docs
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
</div>
|
||||
<ModalUi
|
||||
isOpen={isModal}
|
||||
title={apiToken ? "Regenerate Token" : "Generate Token"}
|
||||
handleClose={handleModal}
|
||||
>
|
||||
<div className="m-[20px]">
|
||||
<div className="text-lg font-normal text-base-content">
|
||||
Are you sure you want to regenerate token it will expire old
|
||||
token?
|
||||
</div>
|
||||
<hr className="bg-[#ccc] mt-4" />
|
||||
<div className="flex items-center mt-3 gap-2 text-white">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="op-btn op-btn-primary ml-[2px]"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
onClick={handleModal}
|
||||
className="op-btn op-btn-secondary"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalUi>
|
||||
</div>
|
||||
{!isSubscribe && isEnableSubscription && (
|
||||
<div data-tut="apisubscribe">
|
||||
<SubscribeCard />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<Tour
|
||||
onRequestClose={() => setIsTour(false)}
|
||||
steps={tourSteps}
|
||||
isOpen={isTour}
|
||||
closeWithMask={false}
|
||||
disableKeyboardNavigation={["esc"]}
|
||||
scrollOffset={-100}
|
||||
rounded={5}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -237,127 +237,125 @@ const ManageSign = () => {
|
||||
setIsValue(true);
|
||||
};
|
||||
return (
|
||||
<div className="relative h-full bg-base-100 text-base-content flex shadow rounded overflow-auto">
|
||||
<div className="relative h-full bg-base-100 text-base-content flex shadow-md rounded-box overflow-auto">
|
||||
{isLoader && (
|
||||
<div className="absolute bg-black bg-opacity-30 z-50 w-full h-full flex justify-center items-center">
|
||||
<Loader />
|
||||
</div>
|
||||
)}
|
||||
{isAlert?.message && <Alert type={isAlert.type}>{isAlert.message}</Alert>}
|
||||
<div className="relative w-full pr-[10px]">
|
||||
<div className="m-[20px]">
|
||||
<div className="text-[20px] font-semibold mb-3">My Signature</div>
|
||||
<div className="relative w-full">
|
||||
<div className="ml-[5px] my-[20px] md:m-[20px]">
|
||||
<div className="text-[20px] font-semibold m-[10px] md:m-0 mb-2">
|
||||
My Signature
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row gap-0 md:gap-[12px]">
|
||||
<div>
|
||||
<div className="relative">
|
||||
<span className="font-medium select-none flex mb-[10px] pl-[10px]">
|
||||
Signature
|
||||
</span>
|
||||
<input
|
||||
type="file"
|
||||
onChange={onImageChange}
|
||||
className="filetype"
|
||||
accept="image/*"
|
||||
ref={imageRef}
|
||||
hidden
|
||||
/>
|
||||
<div className="relative">
|
||||
<div className="flex flex-row justify-between w-1/2 pl-[10px]">
|
||||
<div className="flex flex-row justify-around items-center gap-[10px] mb-[10px]">
|
||||
<span className="font-medium select-none">Signature</span>
|
||||
<input
|
||||
type="file"
|
||||
onChange={onImageChange}
|
||||
className="filetype"
|
||||
accept="image/*"
|
||||
ref={imageRef}
|
||||
hidden
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div>
|
||||
{image ? (
|
||||
<div className="signatureCanvas relative border-[2px] border-[#888]">
|
||||
<img
|
||||
alt="signature"
|
||||
src={image}
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<SignatureCanvas
|
||||
ref={canvasRef}
|
||||
penColor={penColor}
|
||||
canvasProps={{
|
||||
width: "456px",
|
||||
height: "180px",
|
||||
className: "signatureCanvas"
|
||||
}}
|
||||
backgroundColor="rgb(255, 255, 255)"
|
||||
onEnd={() =>
|
||||
handleSignatureChange(canvasRef.current.toDataURL())
|
||||
}
|
||||
dotSize={1}
|
||||
<div>
|
||||
{image ? (
|
||||
<div className="signatureCanvas relative border-[2px] border-[#888]">
|
||||
<img
|
||||
alt="signature"
|
||||
src={image}
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
)}
|
||||
<div className="penContainerDefault flex flex-row justify-between">
|
||||
<div>
|
||||
{!image && (
|
||||
<div className="flex flex-row">
|
||||
{allColor.map((data, key) => {
|
||||
return (
|
||||
<i
|
||||
style={{
|
||||
margin: "5px",
|
||||
color: data,
|
||||
borderBottom:
|
||||
key === 0 && penColor === "blue"
|
||||
? "2px solid blue"
|
||||
: key === 1 && penColor === "red"
|
||||
? "2px solid red"
|
||||
: key === 2 && penColor === "black"
|
||||
? "2px solid black"
|
||||
: "2px solid white"
|
||||
}}
|
||||
onClick={() => {
|
||||
if (key === 0) {
|
||||
setPenColor("blue");
|
||||
} else if (key === 1) {
|
||||
setPenColor("red");
|
||||
} else if (key === 2) {
|
||||
setPenColor("black");
|
||||
}
|
||||
}}
|
||||
key={key}
|
||||
className="fa-light fa-pen-nib"
|
||||
width={20}
|
||||
height={20}
|
||||
></i>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<SignatureCanvas
|
||||
ref={canvasRef}
|
||||
penColor={penColor}
|
||||
canvasProps={{
|
||||
width: "456px",
|
||||
height: "180px",
|
||||
className: "signatureCanvas"
|
||||
}}
|
||||
backgroundColor="rgb(255, 255, 255)"
|
||||
onEnd={() =>
|
||||
handleSignatureChange(canvasRef.current.toDataURL())
|
||||
}
|
||||
dotSize={1}
|
||||
/>
|
||||
)}
|
||||
<div className="penContainerDefault flex flex-row justify-between">
|
||||
<div>
|
||||
{!image && (
|
||||
<div className="flex flex-row">
|
||||
{allColor.map((data, key) => {
|
||||
return (
|
||||
<i
|
||||
style={{
|
||||
margin: "5px",
|
||||
color: data,
|
||||
borderBottom:
|
||||
key === 0 && penColor === "blue"
|
||||
? "2px solid blue"
|
||||
: key === 1 && penColor === "red"
|
||||
? "2px solid red"
|
||||
: key === 2 && penColor === "black"
|
||||
? "2px solid black"
|
||||
: "2px solid white"
|
||||
}}
|
||||
onClick={() => {
|
||||
if (key === 0) {
|
||||
setPenColor("blue");
|
||||
} else if (key === 1) {
|
||||
setPenColor("red");
|
||||
} else if (key === 2) {
|
||||
setPenColor("black");
|
||||
}
|
||||
}}
|
||||
key={key}
|
||||
className="fa-light fa-pen-nib"
|
||||
width={20}
|
||||
height={20}
|
||||
></i>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-row gap-2">
|
||||
<div
|
||||
type="button"
|
||||
className="op-link"
|
||||
onClick={() => handleUploadBtn()}
|
||||
>
|
||||
Upload image
|
||||
</div>
|
||||
<div className="flex flex-row gap-2">
|
||||
<div
|
||||
type="button"
|
||||
className="op-link"
|
||||
onClick={() => handleUploadBtn()}
|
||||
>
|
||||
Upload image
|
||||
</div>
|
||||
<div
|
||||
type="button"
|
||||
className="op-link"
|
||||
onClick={() => handleClear()}
|
||||
>
|
||||
Clear
|
||||
</div>
|
||||
<div
|
||||
type="button"
|
||||
className="op-link"
|
||||
onClick={() => handleClear()}
|
||||
>
|
||||
Clear
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{warning && (
|
||||
<div className="warning signWarning text-[12px]">
|
||||
<i className="fa-light fa-exclamation-circle text-[#fab005] text-[15px] mr-[4px]"></i>
|
||||
Please upload signature/Image
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{warning && (
|
||||
<span className="customwarning signWarning text-[12px] w-[220px] md:w-[300px]">
|
||||
<i className="fa-light fa-exclamation-circle text-[#fab005] text-[15px] mr-[4px]"></i>
|
||||
Please upload signature/Image
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="mb-[10px]">
|
||||
<span className="font-medium select-none">Initials</span>
|
||||
</div>
|
||||
<span className="font-medium select-none flex mb-[10px] pl-[10px]">
|
||||
Initials
|
||||
</span>
|
||||
<div>
|
||||
{isInitials ? (
|
||||
<div className="intialSignature relative border-[1px] border-[#888]">
|
||||
@@ -436,7 +434,7 @@ const ManageSign = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ paddingTop: 10 }}>
|
||||
<div className="pt-3 ml-2 md:ml-0">
|
||||
<button
|
||||
className="op-btn op-btn-primary"
|
||||
onClick={(e) => handleSubmit(e)}
|
||||
|
||||
@@ -522,7 +522,7 @@ function Opensigndrive() {
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="bg-base-100 text-base-content rounded-xl w-full">
|
||||
<div className="bg-base-100 text-base-content rounded-box w-full shadow-md">
|
||||
<Title title={"OpenSign™ Drive"} drive={true} />
|
||||
<ModalUi
|
||||
isOpen={isAlert.isShow}
|
||||
|
||||
@@ -4,7 +4,7 @@ import Title from "../components/Title";
|
||||
|
||||
const PageNotFound = ({ prefix }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen w-full bg-base-100 text-base-content rounded">
|
||||
<div className="flex items-center justify-center h-screen w-full bg-base-100 text-base-content rounded-box">
|
||||
<Title title={"Page Not Found"} />
|
||||
<div className="text-center">
|
||||
<h1 className="text-[60px] lg:text-[120px] font-semibold">404</h1>
|
||||
|
||||
@@ -315,7 +315,7 @@ function UserProfile() {
|
||||
{userNameError}
|
||||
</div>
|
||||
)} */}
|
||||
<div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded-xl w-[450px]">
|
||||
<div className="bg-base-100 text-base-content flex flex-col justify-center shadow-md rounded-box w-[450px]">
|
||||
<div className="flex flex-col justify-center items-center my-4">
|
||||
<div className="w-[200px] h-[200px] overflow-hidden rounded-full">
|
||||
<img
|
||||
|
||||
+114
-138
@@ -1,7 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Title from "../components/Title";
|
||||
import axios from "axios";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Alert from "../primitives/Alert";
|
||||
import ModalUi from "../primitives/ModalUi";
|
||||
import { isEnableSubscription } from "../constant/const";
|
||||
@@ -10,19 +9,24 @@ import Parse from "parse";
|
||||
import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
|
||||
import Tooltip from "../primitives/Tooltip";
|
||||
import Loader from "../primitives/Loader";
|
||||
|
||||
import SubscribeCard from "../primitives/SubscribeCard";
|
||||
import Tour from "reactour";
|
||||
const tourSteps = [
|
||||
{
|
||||
selector: '[data-tut="webhooksubscribe"]',
|
||||
content: "Upgrade now to set webhook"
|
||||
}
|
||||
];
|
||||
function Webhook() {
|
||||
const navigation = useNavigate();
|
||||
const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
|
||||
const [parseAppId] = useState(localStorage.getItem("parseAppId"));
|
||||
const [webhook, setWebhook] = useState();
|
||||
const [isLoader, setIsLoader] = useState(true);
|
||||
const [isGenerate, setIsGenerate] = useState(false);
|
||||
const [isErr, setIsErr] = useState(false);
|
||||
const [isModal, setIsModal] = useState(false);
|
||||
const [isSubscribe, setIsSubscribe] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const [isAlert, setIsAlert] = useState({ type: "success", msg: "" });
|
||||
const [isTour, setIsTour] = useState(false);
|
||||
useEffect(() => {
|
||||
fetchWebhook();
|
||||
// eslint-disable-next-line
|
||||
@@ -60,31 +64,22 @@ function Webhook() {
|
||||
"X-Parse-Application-Id": parseAppId,
|
||||
sessiontoken: localStorage.getItem("accesstoken")
|
||||
};
|
||||
await axios.post(url, params, { headers: headers }).then((res) => {
|
||||
if (res.data && res.data.result && res.data.result.Webhook) {
|
||||
setWebhook(res.data.result.Webhook);
|
||||
setIsGenerate(true);
|
||||
setTimeout(() => {
|
||||
setIsGenerate(false);
|
||||
}, 1500);
|
||||
setIsLoader(false);
|
||||
} else {
|
||||
console.error("Error while generating webhook");
|
||||
setIsLoader(false);
|
||||
setIsErr(true);
|
||||
setTimeout(() => {
|
||||
setIsErr(false);
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
const res = await axios.post(url, params, { headers: headers });
|
||||
if (res.data && res.data.result && res.data.result.Webhook) {
|
||||
setWebhook(res.data.result.Webhook);
|
||||
setIsAlert({ type: "success", msg: "Webhook added successfully." });
|
||||
} else {
|
||||
console.error("Error while generating webhook");
|
||||
setIsAlert({ type: "danger", msg: "Something went wrong." });
|
||||
}
|
||||
} catch (error) {
|
||||
setIsAlert({ type: "danger", msg: "Something went wrong." });
|
||||
console.log("err while generating webhook", error);
|
||||
} finally {
|
||||
setIsLoader(false);
|
||||
setIsErr(true);
|
||||
setTimeout(() => {
|
||||
setIsErr(false);
|
||||
setIsAlert({ type: "success", msg: "" });
|
||||
}, 1500);
|
||||
|
||||
console.log("err", error);
|
||||
}
|
||||
} else {
|
||||
setError("The webhook url should always start with https://");
|
||||
@@ -94,131 +89,112 @@ function Webhook() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleModal = () => setIsModal(!isModal);
|
||||
const handleModal = () => {
|
||||
if (!isSubscribe && isEnableSubscription) {
|
||||
setIsTour(true);
|
||||
} else {
|
||||
setIsModal(!isModal);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Title title={"Webhook"} />
|
||||
{isGenerate && <Alert type="success">Webhook added successfully.</Alert>}
|
||||
{isErr && <Alert type="danger">Something went wrong.</Alert>}
|
||||
|
||||
{isAlert.msg && <Alert type={isAlert.type}>{isAlert.msg}</Alert>}
|
||||
{isLoader ? (
|
||||
<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">
|
||||
{!isEnableSubscription && <PremiumAlertHeader />}
|
||||
<h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
|
||||
OpenSign™ Webhook{" "}
|
||||
<Tooltip
|
||||
url={"https://docs.opensignlabs.com/docs/API-docs/get-webhook"}
|
||||
isSubscribe={true}
|
||||
/>
|
||||
</h1>
|
||||
<ul
|
||||
className={
|
||||
isSubscribe || !isEnableSubscription
|
||||
? "w-full flex flex-col p-2 text-sm "
|
||||
: "w-full flex flex-col p-2 text-sm opacity-20 pointer-events-none select-none"
|
||||
}
|
||||
>
|
||||
<li
|
||||
className={`flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
|
||||
>
|
||||
<div className="w-[70%] flex-col md:flex-row flex items-center gap-5 ">
|
||||
<span className="">Webhook:</span>{" "}
|
||||
<span id="token" className=" md:text-end cursor-pointer">
|
||||
{webhook ? webhook : "_____"}
|
||||
</span>
|
||||
</div>
|
||||
<>
|
||||
<div className="bg-base-100 text-base-content flex flex-col justify-center shadow-md rounded-box mb-3">
|
||||
{!isEnableSubscription && <PremiumAlertHeader />}
|
||||
<h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
|
||||
OpenSign™ Webhook{" "}
|
||||
<Tooltip
|
||||
url={"https://docs.opensignlabs.com/docs/API-docs/get-webhook"}
|
||||
isSubscribe={true}
|
||||
/>
|
||||
</h1>
|
||||
<ul className={"w-full flex flex-col p-2 text-sm"}>
|
||||
<li className="flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2">
|
||||
<div className="w-[70%] flex-col md:flex-row flex items-center gap-5">
|
||||
<span className="">Webhook:</span>{" "}
|
||||
<span id="token" className=" md:text-end cursor-pointer">
|
||||
{webhook ? webhook : "_____"}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleModal}
|
||||
className="op-btn op-btn-primary"
|
||||
>
|
||||
{webhook ? "Update Webhook" : "Add Webhook"}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="flex items-center justify-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleModal}
|
||||
className="op-btn op-btn-primary "
|
||||
onClick={() =>
|
||||
openInNewTab(
|
||||
"https://docs.opensignlabs.com/docs/API-docs/save-update-webhook"
|
||||
)
|
||||
}
|
||||
className="op-btn op-btn-secondary mt-2 mb-3 px-7"
|
||||
>
|
||||
{webhook ? "Update Webhook" : "Add Webhook"}
|
||||
View Docs
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="flex items-center justify-center ">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
openInNewTab(
|
||||
"https://docs.opensignlabs.com/docs/API-docs/save-update-webhook"
|
||||
)
|
||||
}
|
||||
className="op-btn op-btn-secondary my-2"
|
||||
>
|
||||
View Docs
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!isSubscribe && isEnableSubscription && (
|
||||
<>
|
||||
<h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
|
||||
Upgrade to PRO Plan
|
||||
</h1>
|
||||
<ul className={"w-full flex flex-col p-2 text-sm "}>
|
||||
<li
|
||||
className={`flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
|
||||
>
|
||||
<div className="w-[70%] flex-col md:flex-row flex items-center gap-3 ">
|
||||
<span className="">$29.99/month:</span>{" "}
|
||||
<span id="token" className=" md:text-end cursor-pointer">
|
||||
First 100 documents included, then just $0.15 per
|
||||
document.
|
||||
</span>
|
||||
</div>
|
||||
{!isSubscribe && isEnableSubscription && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigation("/subscription")}
|
||||
className="text-xs md:text-sm shadow op-btn op-btn-outline op-btn-accent"
|
||||
>
|
||||
Upgrade Now
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
<ModalUi
|
||||
isOpen={isModal}
|
||||
title={"Regenerate Token"}
|
||||
handleClose={handleModal}
|
||||
>
|
||||
{error && <Alert type="danger">{error}</Alert>}
|
||||
<div className="m-[20px]">
|
||||
<div className="text-lg font-normal text-base-content">
|
||||
<label className="text-sm ml-2">Webhook</label>
|
||||
<input
|
||||
value={webhook}
|
||||
onChange={(e) => setWebhook(e.target.value)}
|
||||
placeholder="Enter webhook url"
|
||||
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
/>
|
||||
</div>
|
||||
<hr className="bg-[#ccc] mt-3" />
|
||||
<div className="flex items-center mt-3 gap-2">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="op-btn op-btn-primary ml-[2px]"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
onClick={handleModal}
|
||||
className="op-btn op-btn-secondary"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalUi>
|
||||
</div>
|
||||
<ModalUi
|
||||
isOpen={isModal}
|
||||
title={"Regenerate Token"}
|
||||
handleClose={handleModal}
|
||||
>
|
||||
{error && <Alert type="danger">{error}</Alert>}
|
||||
<div className="m-[20px]">
|
||||
<div className="text-lg font-normal text-base-content">
|
||||
<label className="text-sm ml-2">Webhook</label>
|
||||
<input
|
||||
value={webhook}
|
||||
onChange={(e) => setWebhook(e.target.value)}
|
||||
placeholder="Enter webhook url"
|
||||
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
/>
|
||||
</div>
|
||||
<hr className="bg-[#ccc] mt-3" />
|
||||
<div className="flex items-center mt-3 gap-2">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="op-btn op-btn-primary ml-[2px]"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
onClick={handleModal}
|
||||
className="op-btn op-btn-secondary"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalUi>
|
||||
</div>
|
||||
{!isSubscribe && isEnableSubscription && (
|
||||
<div data-tut="webhooksubscribe">
|
||||
<SubscribeCard />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<Tour
|
||||
onRequestClose={() => setIsTour(false)}
|
||||
steps={tourSteps}
|
||||
isOpen={isTour}
|
||||
closeWithMask={false}
|
||||
disableKeyboardNavigation={["esc"]}
|
||||
scrollOffset={-100}
|
||||
rounded={5}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const SubscribeCard = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="op-card op-bg-primary text-primary-content w-full shadow-lg">
|
||||
<div className="op-card-body">
|
||||
<h2 className="op-card-title">Upgrade to PRO Plan</h2>
|
||||
<p>$29.99/month: Sign 100 docs using API. Only $0.15/doc after that.</p>
|
||||
<div className="op-card-actions justify-end">
|
||||
<button
|
||||
onClick={() => navigate("/subscription")}
|
||||
className="op-btn op-btn-accent"
|
||||
>
|
||||
Upgrade Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubscribeCard;
|
||||
@@ -1,9 +1,8 @@
|
||||
.warning {
|
||||
.customwarning {
|
||||
position: absolute;
|
||||
padding: 8px;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
width: 300px;
|
||||
border-radius: 5px;
|
||||
animation: inAnimation 2s ease-in-out;
|
||||
z-index: 1;
|
||||
@@ -35,24 +34,9 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
25% {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user