From 593a8499f48865616eff89fba1242c9e7605edb9 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Mon, 25 Mar 2024 22:12:58 +0530 Subject: [PATCH 1/4] refactor: add premium features warning --- .../components/pdf/DropdownWidgetOption.js | 14 +++++++- .../src/components/pdf/WidgetNameModal.js | 19 ++++++++++- apps/OpenSign/src/pages/GenerateToken.js | 2 ++ apps/OpenSign/src/pages/UserProfile.js | 34 +++++++++++-------- apps/OpenSign/src/pages/Webhook.js | 2 ++ .../src/primitives/PremiumAlertHeader.js | 11 ++++++ 6 files changed, 65 insertions(+), 17 deletions(-) create mode 100644 apps/OpenSign/src/primitives/PremiumAlertHeader.js diff --git a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js index 09abff5d49..cd23f221f4 100644 --- a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js +++ b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js @@ -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", @@ -151,7 +152,18 @@ function DropdownWidgetOption(props) { title={props.title} showClose={false} > -
+ {props.type === "checkbox" && !props.isSignYourself && ( + + )} +
{ e.preventDefault(); diff --git a/apps/OpenSign/src/components/pdf/WidgetNameModal.js b/apps/OpenSign/src/components/pdf/WidgetNameModal.js index 4471af317f..3882659625 100644 --- a/apps/OpenSign/src/components/pdf/WidgetNameModal.js +++ b/apps/OpenSign/src/components/pdf/WidgetNameModal.js @@ -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({ @@ -98,7 +99,23 @@ const WidgetNameModal = (props) => { handleClose={props.handleClose && props.handleClose} title={"Widget info"} > - + {(props.defaultdata?.type === textInputWidget || + props.widgetName === textInputWidget) && ( + + )} +
) : (
+

API Token

    • -
  • - Disable DocumentId :{" "} - - - +
  • + +
    + Disable DocumentId :{" "} + + + +
diff --git a/apps/OpenSign/src/pages/Webhook.js b/apps/OpenSign/src/pages/Webhook.js index 22cf04ec5f..809a475390 100644 --- a/apps/OpenSign/src/pages/Webhook.js +++ b/apps/OpenSign/src/pages/Webhook.js @@ -6,6 +6,7 @@ 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"; function Webhook() { const [parseBaseUrl] = useState(localStorage.getItem("baseUrl")); @@ -101,6 +102,7 @@ function Webhook() {
) : (
+

Webhook

  • ( + + {message + ? message + : "Currently free in Beta, this feature will incur a fee later."} + +); + +export default PremiumAlertHeader; From 6161e975fb24a9729ef69d99b49e10496d956987 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Tue, 26 Mar 2024 17:03:08 +0530 Subject: [PATCH 2/4] refactor: add help buttons for all sections --- .../src/components/dashboard/DashboardCard.js | 6 +- .../components/pdf/DropdownWidgetOption.js | 44 +++----- .../src/components/pdf/WidgetNameModal.js | 35 +++--- .../components/shared/fields/SignersInput.js | 7 ++ apps/OpenSign/src/json/ReportJson.js | 27 +++-- apps/OpenSign/src/pages/Form.js | 13 ++- apps/OpenSign/src/pages/GenerateToken.js | 8 +- apps/OpenSign/src/pages/Managesign.js | 102 +++--------------- apps/OpenSign/src/pages/Report.js | 3 + apps/OpenSign/src/pages/UserProfile.js | 42 +++++--- apps/OpenSign/src/pages/Webhook.js | 8 +- .../src/primitives/GetReportDisplay.js | 13 ++- apps/OpenSign/src/primitives/Tooltip.js | 38 +++++-- apps/OpenSign/src/styles/AddUser.css | 58 ++++++++++ apps/OpenSign/src/styles/managesign.css | 21 ---- apps/OpenSign/src/styles/signature.css | 11 -- 16 files changed, 230 insertions(+), 206 deletions(-) diff --git a/apps/OpenSign/src/components/dashboard/DashboardCard.js b/apps/OpenSign/src/components/dashboard/DashboardCard.js index bc131213f1..9b54c273ec 100644 --- a/apps/OpenSign/src/components/dashboard/DashboardCard.js +++ b/apps/OpenSign/src/components/dashboard/DashboardCard.js @@ -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`} >
    @@ -352,6 +353,9 @@ const DashboardCard = (props) => {
+
+ +
); }; diff --git a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js index cd23f221f4..7d80efd9e1 100644 --- a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js +++ b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js @@ -145,32 +145,15 @@ function DropdownWidgetOption(props) { }; return ( - //props.showDropdown - - {props.type === "checkbox" && !props.isSignYourself && ( - - )} -
+ +
{ e.preventDefault(); handleSaveOption(); }} > -
+
@@ -395,17 +378,22 @@ function DropdownWidgetOption(props) {
)}
+ {props.type === "checkbox" && !props.isSignYourself && ( + + )}
+
diff --git a/apps/OpenSign/src/components/shared/fields/SignersInput.js b/apps/OpenSign/src/components/shared/fields/SignersInput.js index 5f00dbfb05..2b2648db62 100644 --- a/apps/OpenSign/src/components/shared/fields/SignersInput.js +++ b/apps/OpenSign/src/components/shared/fields/SignersInput.js @@ -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) => {
diff --git a/apps/OpenSign/src/json/ReportJson.js b/apps/OpenSign/src/json/ReportJson.js index 0f0edc38c5..37d0c94bbc 100644 --- a/apps/OpenSign/src/json/ReportJson.js +++ b/apps/OpenSign/src/json/ReportJson.js @@ -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 that have been added by you." }; // 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 used to create documents" }; default: return null; diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js index 1e2afcae9a..4ab1a09f21 100644 --- a/apps/OpenSign/src/pages/Form.js +++ b/apps/OpenSign/src/pages/Form.js @@ -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) => {
-

API Token

+

+ API Token{" "} + +

  • { 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 ( -
    +
    {isLoader && ( -
    -
    -
    -
    +
    +
    )} {isSuccess && ( @@ -269,61 +253,9 @@ const ManageSign = () => { paddingBottom: 8 }} > - Manage Signature -
    -
    - - setNameWarning(false)} - onChange={(e) => setSignName(e.target.value)} - /> - - + My Signature
    -
    +
    { 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) { diff --git a/apps/OpenSign/src/pages/Report.js b/apps/OpenSign/src/pages/Report.js index 1868dab8ea..10765260a9 100644 --- a/apps/OpenSign/src/pages/Report.js +++ b/apps/OpenSign/src/pages/Report.js @@ -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} /> ) : ( diff --git a/apps/OpenSign/src/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js index f09d2f2dbc..842f8129b4 100644 --- a/apps/OpenSign/src/pages/UserProfile.js +++ b/apps/OpenSign/src/pages/UserProfile.js @@ -7,6 +7,7 @@ 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(); @@ -251,7 +252,7 @@ function UserProfile() { Email:{" "} {UserProfile && UserProfile.email}
    • -
  • +
  • Is Email verified:{" "} {UserProfile && UserProfile.emailVerified @@ -260,23 +261,32 @@ function UserProfile() {
  • -
    - Disable DocumentId :{" "} - - - + + Disable DocumentId :{" "} + {" "} + {" "} +
    +
diff --git a/apps/OpenSign/src/pages/Webhook.js b/apps/OpenSign/src/pages/Webhook.js index 809a475390..fb7fe06167 100644 --- a/apps/OpenSign/src/pages/Webhook.js +++ b/apps/OpenSign/src/pages/Webhook.js @@ -7,6 +7,7 @@ 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")); @@ -103,7 +104,12 @@ function Webhook() { ) : (
-

Webhook

+

+ Webhook{" "} + +

  • { const navigate = useNavigate(); const [currentPage, setCurrentPage] = useState(1); @@ -255,7 +257,14 @@ const ReportTable = ({ )}
    -
    {ReportName}
    +
    + {ReportName}{" "} + {report_help && ( + + + + )} +
    {ReportName === "Templates" && ( navigate("/form/template")} diff --git a/apps/OpenSign/src/primitives/Tooltip.js b/apps/OpenSign/src/primitives/Tooltip.js index 2d1edcd824..323afc3d57 100644 --- a/apps/OpenSign/src/primitives/Tooltip.js +++ b/apps/OpenSign/src/primitives/Tooltip.js @@ -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 }) => ( - <> - +import { openInNewTab } from "../constant/Utils"; +const Tooltip = ({ children, id, message, url, iconColor }) => + url ? ( + + ) : ( + <> + + {children ? ( + children + ) : ( + + )} + + + + ); export default Tooltip; diff --git a/apps/OpenSign/src/styles/AddUser.css b/apps/OpenSign/src/styles/AddUser.css index d8daf6d46f..c83395db4a 100644 --- a/apps/OpenSign/src/styles/AddUser.css +++ b/apps/OpenSign/src/styles/AddUser.css @@ -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; + } } \ No newline at end of file diff --git a/apps/OpenSign/src/styles/managesign.css b/apps/OpenSign/src/styles/managesign.css index 901f66ae06..94747ef513 100644 --- a/apps/OpenSign/src/styles/managesign.css +++ b/apps/OpenSign/src/styles/managesign.css @@ -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; diff --git a/apps/OpenSign/src/styles/signature.css b/apps/OpenSign/src/styles/signature.css index 5b15432980..5e2ad50784 100644 --- a/apps/OpenSign/src/styles/signature.css +++ b/apps/OpenSign/src/styles/signature.css @@ -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; } From 49cd30de96d897e109a95db926d8e21e1e1fa49b Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Tue, 26 Mar 2024 19:00:51 +0530 Subject: [PATCH 3/4] refactor: update help message --- apps/OpenSign/src/components/shared/fields/SignersInput.js | 4 ++-- apps/OpenSign/src/json/ReportJson.js | 2 +- apps/OpenSign/src/pages/UserProfile.js | 2 +- apps/OpenSign/src/primitives/Tooltip.js | 6 +++--- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/OpenSign/src/components/shared/fields/SignersInput.js b/apps/OpenSign/src/components/shared/fields/SignersInput.js index 2b2648db62..de06665d28 100644 --- a/apps/OpenSign/src/components/shared/fields/SignersInput.js +++ b/apps/OpenSign/src/components/shared/fields/SignersInput.js @@ -108,10 +108,10 @@ const SignersInput = (props) => { diff --git a/apps/OpenSign/src/json/ReportJson.js b/apps/OpenSign/src/json/ReportJson.js index 37d0c94bbc..39768e75ef 100644 --- a/apps/OpenSign/src/json/ReportJson.js +++ b/apps/OpenSign/src/json/ReportJson.js @@ -186,7 +186,7 @@ export default function reportJson(id) { } ], helpMsg: - "This is a list of templates that are used to create documents" + "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; diff --git a/apps/OpenSign/src/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js index 842f8129b4..b8d9da22ca 100644 --- a/apps/OpenSign/src/pages/UserProfile.js +++ b/apps/OpenSign/src/pages/UserProfile.js @@ -264,7 +264,7 @@ function UserProfile() {
    Disable DocumentId :{" "} - {" "} + {" "} {" "}