Merge pull request #550 from OpenSignLabs/patch-1

Patch 1

apps/OpenSign/src/App.js

@@ -15,6 +15,7 @@ import DraftDocument from "./components/pdf/DraftDocument";
 import PlaceHolderSign from "./pages/PlaceHolderSign";
 import PdfRequestFiles from "./pages/PdfRequestFiles";
 import LazyPage from "./primitives/LazyPage";
+import { isEnableSubscription } from "./constant/const";
 const DebugPdf = lazy(() => import("./pages/DebugPdf"));
 const ForgetPassword = lazy(() => import("./pages/ForgetPassword"));
 const GuestLogin = lazy(() => import("./pages/GuestLogin"));
@@ -113,7 +114,7 @@ function App() {
               path="/forgetpassword"
               element={<LazyPage Page={ForgetPassword} />}
             />
-            {process.env.REACT_APP_ENABLE_SUBSCRIPTION && (
+            {isEnableSubscription && (
               <>
                 <Route
                   path="/pgsignup"

apps/OpenSign/src/components/AddSigner.js

@@ -56,11 +56,11 @@ const AddSigner = (props) => {
       contactQuery.set("Email", email);
       contactQuery.set("UserRole", "contracts_Guest");
 
-      if (localStorage.getItem("TenetId")) {
+      if (localStorage.getItem("TenantId")) {
         contactQuery.set("TenantId", {
           __type: "Pointer",
           className: "partners_Tenant",
-          objectId: localStorage.getItem("TenetId")
+          objectId: localStorage.getItem("TenantId")
         });
       }
 

apps/OpenSign/src/components/AddUser.js

@@ -48,11 +48,11 @@ const AddUser = (props) => {
         contactQuery.set("Email", email);
         contactQuery.set("UserRole", "contracts_User");
 
-        if (localStorage.getItem("TenetId")) {
+        if (localStorage.getItem("TenantId")) {
           contactQuery.set("TenantId", {
             __type: "Pointer",
             className: "partners_Tenant",
-            objectId: localStorage.getItem("TenetId")
+            objectId: localStorage.getItem("TenantId")
           });
         }
 

apps/OpenSign/src/components/Header.js

@@ -4,20 +4,32 @@ import FullScreenButton from "./FullScreenButton";
 import { useNavigate } from "react-router-dom";
 import Parse from "parse";
 import { useWindowSize } from "../hook/useWindowSize";
-import { openInNewTab } from "../constant/Utils";
+import { checkIsSubscribed, openInNewTab } from "../constant/Utils";
+import { isEnableSubscription } from "../constant/const";
+
 const Header = ({ showSidebar }) => {
-  const navigation = useNavigate();
+  const navigate = useNavigate();
   const { width } = useWindowSize();
   let applogo = localStorage.getItem("appLogo") || "";
   let username = localStorage.getItem("username");
   const image = localStorage.getItem("profileImg") || dp;
 
   const [isOpen, setIsOpen] = useState(false);
+  const [isSubscribe, setIsSubscribe] = useState(true);
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
   };
-
+  useEffect(() => {
+    checkSubscription();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  async function checkSubscription() {
+    if (isEnableSubscription) {
+      const getIsSubscribe = await checkIsSubscribed();
+      setIsSubscribe(getIsSubscribe);
+    }
+  }
   const closeDropdown = () => {
     setIsOpen(false);
     Parse.User.logOut();
@@ -43,7 +55,7 @@ const Header = ({ showSidebar }) => {
     localStorage.setItem("baseUrl", baseUrl);
     localStorage.setItem("parseAppId", appid);
 
-    navigation("/");
+    navigate("/");
   };
 
   //handle to close profile drop down menu onclick screen
@@ -83,6 +95,16 @@ const Header = ({ showSidebar }) => {
         id="profile-menu"
         className="flex justify-between items-center gap-x-3"
       >
+        {!isSubscribe && (
+          <div>
+            <button
+              className="text-xs bg-[#002864] p-2 text-white rounded shadow"
+              onClick={() => navigate("/subscription")}
+            >
+              Upgrade Now
+            </button>
+          </div>
+        )}
         <div>
           <FullScreenButton />
         </div>
@@ -123,7 +145,7 @@ const Header = ({ showSidebar }) => {
                 className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
                 onClick={() => {
                   setIsOpen(false);
-                  navigation("/profile");
+                  navigate("/profile");
                 }}
               >
                 <i className="fa-regular fa-user"></i> Profile
@@ -132,7 +154,7 @@ const Header = ({ showSidebar }) => {
                 className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
                 onClick={() => {
                   setIsOpen(false);
-                  navigation("/changepassword");
+                  navigate("/changepassword");
                 }}
               >
                 <i className="fa-solid fa-lock"></i> Change Password

apps/OpenSign/src/components/pdf/AddRoleModal.js

@@ -30,7 +30,7 @@ const AddRoleModal = (props) => {
               margin: "10px 0 10px 5px"
             }}
           >
-            e.g: Hr, Director, Manager, New joinee, Accountant, etc...
+            e.g: Customer, Hr, Director, Manager, Student, etc...
           </p>
           <div>
             <div

apps/OpenSign/src/components/pdf/DropdownWidgetOption.js

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { themeColor } from "../../constant/const";
+import { isEnableSubscription, themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
 import { radioButtonWidget } from "../../constant/Utils";
 import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
+import Upgrade from "../../primitives/Upgrade";
 function DropdownWidgetOption(props) {
   const [dropdownOptionList, setDropdownOptionList] = useState([
     "option-1",
@@ -241,36 +242,59 @@ function DropdownWidgetOption(props) {
                 }}
                 className="fa-solid fa-square-plus"
               ></i>
-              {props.type === "checkbox" && !props.isSignYourself && (
-                <>
-                  <label style={{ fontSize: "13px", fontWeight: "600" }}>
-                    Minimun check
-                  </label>
-                  <input
-                    required
-                    defaultValue={0}
-                    value={minCount}
-                    onChange={(e) => {
-                      const count = handleSetMinMax(e);
-                      setMinCount(count);
-                    }}
-                    className="drodown-input"
-                  />
-                  <label style={{ fontSize: "13px", fontWeight: "600" }}>
-                    Maximum check
-                  </label>
-                  <input
-                    required
-                    defaultValue={0}
-                    value={maxCount}
-                    onChange={(e) => {
-                      const count = handleSetMinMax(e);
-                      setMaxCount(count);
-                    }}
-                    className="drodown-input"
-                  />
-                </>
-              )}
+              <div>
+                {props.type === "checkbox" && !props.isSignYourself && (
+                  <>
+                    <label
+                      style={{
+                        fontSize: "13px",
+                        fontWeight: "600",
+                        color: !props.isSubscribe && "gray"
+                      }}
+                    >
+                      Minimun check
+                    </label>
+                    {!props.isSubscribe && isEnableSubscription && <Upgrade />}
+                    <input
+                      required
+                      defaultValue={0}
+                      value={minCount}
+                      onChange={(e) => {
+                        const count = handleSetMinMax(e);
+                        setMinCount(count);
+                      }}
+                      className={
+                        props.isSubscribe || !isEnableSubscription
+                          ? "drodown-input"
+                          : "disabled drodown-input"
+                      }
+                    />
+                    <label
+                      style={{
+                        fontSize: "13px",
+                        fontWeight: "600",
+                        color: !props.isSubscribe && "gray"
+                      }}
+                    >
+                      Maximum check
+                    </label>
+                    <input
+                      required
+                      defaultValue={0}
+                      value={maxCount}
+                      onChange={(e) => {
+                        const count = handleSetMinMax(e);
+                        setMaxCount(count);
+                      }}
+                      className={
+                        props.isSubscribe || !isEnableSubscription
+                          ? "drodown-input"
+                          : "disabled drodown-input"
+                      }
+                    />
+                  </>
+                )}
+              </div>
             </div>
             {["dropdown", radioButtonWidget].includes(props.type) && (
               <>
@@ -378,13 +402,15 @@ 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."
-              }
-            />
-          )}
+          {props.type === "checkbox" &&
+            !props.isSignYourself &&
+            !isEnableSubscription && (
+              <PremiumAlertHeader
+                message={
+                  "Field validations are free in beta, this feature will incur a fee later."
+                }
+              />
+            )}
           <div
             className={`${
               props.type === "checkbox" && !props.isSignYourself

apps/OpenSign/src/components/pdf/EmailComponent.js

@@ -15,7 +15,8 @@ function EmailComponent({
   setSuccessEmail,
   pdfName,
   sender,
-  setIsAlert
+  setIsAlert,
+  extUserId
 }) {
   const [emailList, setEmailList] = useState([]);
   const [emailValue, setEmailValue] = useState();
@@ -38,6 +39,7 @@ function EmailComponent({
         const openSignUrl = "https://www.opensignlabs.com/contact-us";
         const themeBGcolor = themeColor;
         let params = {
+          extUserId: extUserId,
           pdfName: pdfName,
           url: pdfUrl,
           recipient: emailList[i],

apps/OpenSign/src/components/pdf/SignerListPlace.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { themeColor } from "../../constant/const";
 import RecipientList from "./RecipientList";
+import { Tooltip } from "react-tooltip";
 
 function SignerListPlace(props) {
   return (
@@ -13,6 +14,58 @@ function SignerListPlace(props) {
       >
         <span className="signedStyle">
           {props.title ? props.title : "Recipients"}
+          <span className="absolute text-xs z-[30] mt-1 ml-0.5">
+            {props?.title === "Roles" && (
+              <>
+                <a data-tooltip-id="my-tooltip">
+                  <sup>
+                    <i
+                      className="fa-solid fa-question rounded-full"
+                      style={{
+                        borderColor: "white",
+                        color: "white",
+                        fontSize: 11,
+                        borderWidth: 1.5,
+                        padding: "1px 3px"
+                      }}
+                    ></i>
+                  </sup>
+                </a>
+                <Tooltip id="my-tooltip">
+                  <div className="max-w-[450px]">
+                    <p className="font-bold">What are template roles?</p>
+                    <p>
+                      Begin by specifying each role needed for the completion of
+                      the document. Think about the parties involved in the
+                      signing process and what their responsibilities are.
+                      Common roles include HR for internal documents, Customer
+                      for agreements or Vendor for business agreements.{" "}
+                    </p>
+                    <p className="font-bold">
+                      Why pre-attach users to some roles?
+                    </p>
+                    <p>
+                      For roles that consistently involve the same individual
+                      (e.g., the CEO&apos;s signature on employee offer
+                      letters), you can pre-attach a user to a role within the
+                      template. This step is optional but recommended for
+                      efficiency and consistency across documents.
+                    </p>
+                    <p className="font-bold">
+                      When do i specify the user attached to each role?
+                    </p>
+                    <p>
+                      When you create a document from your template, you&apos;ll
+                      be prompted to attach users to each defined role. If a
+                      role already has a user attached, this will be pre-filled,
+                      but you can modify it as needed before sending out the
+                      document.
+                    </p>
+                  </div>
+                </Tooltip>
+              </>
+            )}
+          </span>
         </span>
       </div>
       <div className="signerList">