refactor: add premium features warning

Author: prafull-opensignlabs

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}
     >
-      <div style={{ height: "100%", padding: 20 }}>
+      {props.type === "checkbox" && !props.isSignYourself && (
+        <PremiumAlertHeader
+          message={
+            "Field validations are free in beta, this feature will incur a fee later."
+          }
+        />
+      )}
+      <div
+        className={`${
+          props.type === "checkbox" && !props.isSignYourself ? "pt-0" : ""
+        } h-full p-[20px]`}
+      >
         <form
           onSubmit={(e) => {
             e.preventDefault();

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"}
     >
-      <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

apps/OpenSign/src/pages/GenerateToken.js

@@ -5,6 +5,7 @@ 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";
 
 function GenerateToken() {
   const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
@@ -115,6 +116,7 @@ function GenerateToken() {
         </div>
       ) : (
         <div className="bg-white flex flex-col justify-center shadow rounded">
+          <PremiumAlertHeader />
           <h1 className="ml-4 mt-3 mb-2 font-semibold">API Token</h1>
           <ul className="w-full flex flex-col p-2 text-sm">
             <li

apps/OpenSign/src/pages/UserProfile.js

@@ -6,6 +6,7 @@ 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";
 
 function UserProfile() {
   const navigate = useNavigate();
@@ -258,21 +259,24 @@ 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">
-                    <input
-                      disabled={editmode ? false : true}
-                      checked={isDisableDocId}
-                      onChange={handleDisableDocId}
-                      type="checkbox"
-                      value=""
-                      className="sr-only peer"
-                    />
-                    <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-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>
-                  </label>
-                </span>
+              <li className="border-y-[1px] border-gray-300 break-all">
+                <PremiumAlertHeader message={"Disable documentId is free in beta, this feature will incur a fee later."} />
+                <div className="flex justify-between items-center py-2">
+                  <span className="font-semibold">Disable DocumentId :</span>{" "}
+                  <span>
+                    <label className="relative inline-flex items-center cursor-pointer mb-0">
+                      <input
+                        disabled={editmode ? false : true}
+                        checked={isDisableDocId}
+                        onChange={handleDisableDocId}
+                        type="checkbox"
+                        value=""
+                        className="sr-only peer"
+                      />
+                      <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-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>
+                    </label>
+                  </span>
+                </div>
               </li>
             </ul>
             <div className="flex justify-center pt-2 pb-3 md:pt-3 md:pb-4">

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() {
         </div>
       ) : (
         <div className="bg-white flex flex-col justify-center shadow rounded">
+          <PremiumAlertHeader />
           <h1 className="ml-4 mt-3 mb-2 font-semibold">Webhook</h1>
           <ul className="w-full flex flex-col  p-2 text-sm">
             <li

apps/OpenSign/src/primitives/PremiumAlertHeader.js

@@ -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;