refactor: plan changes

prafull-opensignlabs · prafull-opensignlabs · commit 76dccf804e79 · 2024-07-24T17:42:20.000+05:30
diff --git a/apps/OpenSign/src/components/Header.js b/apps/OpenSign/src/components/Header.js
@@ -4,7 +4,12 @@ import FullScreenButton from "./FullScreenButton";
 import { useNavigate } from "react-router-dom";
 import Parse from "parse";
 import { useWindowSize } from "../hook/useWindowSize";
-import { checkIsSubscribed, getAppLogo, openInNewTab } from "../constant/Utils";
+import {
+  checkIsSubscribed,
+  checkIsSubscribedTeam,
+  getAppLogo,
+  openInNewTab
+} from "../constant/Utils";
 import { isEnableSubscription, isStaging } from "../constant/const";
 
 const Header = ({ showSidebar }) => {
@@ -15,6 +20,7 @@ const Header = ({ showSidebar }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isSubscribe, setIsSubscribe] = useState(true);
   const [isPro, setIsPro] = useState(false);
+  const [isTeam, setIsTeam] = useState(false);
   const [applogo, setAppLogo] = useState(
     localStorage.getItem("appLogo") || " "
   );
@@ -29,6 +35,7 @@ const Header = ({ showSidebar }) => {
   async function checkSubscription() {
     if (isEnableSubscription) {
       const getIsSubscribe = await checkIsSubscribed();
+      const getIsTeam = await checkIsSubscribedTeam();
       if (getIsSubscribe) {
         const applogo = await getAppLogo();
         if (applogo?.logo) {
@@ -38,6 +45,7 @@ const Header = ({ showSidebar }) => {
         }
       }
       setIsPro(getIsSubscribe);
+      setIsTeam(getIsTeam);
       setIsSubscribe(getIsSubscribe);
     }
   }
@@ -122,11 +130,16 @@ const Header = ({ showSidebar }) => {
             </button>
           </div>
         )}
-        {isPro && (
+        {!isTeam && isPro && (
           <div className="w-[35px] h-[35px] bg-white rounded-full ring-[1px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
             PRO
           </div>
         )}
+        {isTeam && (
+          <div className="w-[35px] h-[35px] bg-white rounded-full ring-[1px] text-[13px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
+            TEAM
+          </div>
+        )}
         <div>
           <FullScreenButton />
         </div>
diff --git a/apps/OpenSign/src/constant/const.js b/apps/OpenSign/src/constant/const.js
@@ -4,10 +4,10 @@ export const documentCls = "contracts_Document";
 export const themeColor = "#47a3ad";
 export const iconColor = "#686968";
 export const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-export const isEnableSubscription = true;
-// process.env.REACT_APP_ENABLE_SUBSCRIPTION &&
-// process.env.REACT_APP_ENABLE_SUBSCRIPTION?.toLowerCase() === "true"
-//   ? true
-//   : false;
-export const isStaging = "http://localhost:3001";
-// window.location.origin === "https://staging-app.opensignlabs.com";
+export const isEnableSubscription =
+  process.env.REACT_APP_ENABLE_SUBSCRIPTION &&
+  process.env.REACT_APP_ENABLE_SUBSCRIPTION?.toLowerCase() === "true"
+    ? true
+    : false;
+export const isStaging =
+  window.location.origin === "https://staging-app.opensignlabs.com";
diff --git a/apps/OpenSign/src/json/plansArr.js b/apps/OpenSign/src/json/plansArr.js
@@ -26,6 +26,27 @@ const plans = [
       "Decline document support",
       "Email notifications",
       "Recipient authentication using OTP",
+      "Bulk send (upto 5 docs)",
+      "Public profiles",
+      "And much more"
+    ],
+    yearlyBenefits: [
+      "Unlimited envelopes",
+      "Sign documents yourself",
+      "Request signatures from others",
+      "14 field types",
+      "Automatic e-signatures",
+      "Completion certificates",
+      "Send in order",
+      "Document templates",
+      "Import from Dropbox",
+      "Contact book",
+      "Document expiry support",
+      "Decline document support",
+      "Email notifications",
+      "Recipient authentication using OTP",
+      "Bulk send (upto 5 docs)",
+      "Public profiles",
       "And much more"
     ]
   },
@@ -34,7 +55,7 @@ const plans = [
     img: "professional.png",
     currency: "$",
     monthlyPrice: "29.99",
-    yearlyPrice: `10 <sup style="font-size: 17px;">/month/user</sup>`,
+    yearlyPrice: "9.99",
     subtitle: "Exclusive Access to advanced features.",
     btn: { text: "Subscribe", color: "op-btn-primary" },
     url: isStaging
@@ -53,9 +74,64 @@ const plans = [
       "Zapier integration",
       "API Access",
       "100 API signatures included",
-      "DocumentId removal from signed docs",
       "Custom email templates",
-      "Auto reminders"
+      "Auto reminders",
+      "Bulk send (upto 20 docs)",
+      "Premium Public profile usernames",
+      "Embedding (coming soon)"
+    ],
+    yearlyBenefits: [
+      "Everything in OpenSign™ free",
+      "Field validations",
+      "Regular expression validations",
+      "Organize docs in OpenSign™ Drive",
+      "Webhooks",
+      "Zapier integration",
+      "API Access",
+      "240 API signatures included",
+      "Custom email templates",
+      "Auto reminders",
+      "Bulk send (upto 20 docs)",
+      "Premium Public profile usernames",
+      "Embedding (coming soon)"
+    ]
+  },
+  {
+    planName: "OPENSIGN™ TEAMS",
+    img: "teams.png",
+    currency: "$",
+    monthlyPrice: `39.99<sup style="font-size: 17px;">/user</sup>`,
+    yearlyPrice: `19.99<sup style="font-size: 17px;">/user/month</sup>`,
+    subtitle: "Exclusive Access to advanced features.",
+    btn: { text: "Subscribe", color: "op-btn-accent" },
+    url: isStaging
+      ? "https://billing.zoho.in/subscribe/ed8097273a82b6bf39892c11a3bb3c381eb2705736014cfbdbde1ccf1c7a189d/team-weekly"
+      : "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901237d0702bfaa959406306635d80f138c/teams-monthly",
+    yearlyUrl: isStaging
+      ? "https://billing.zoho.in/subscribe/ed8097273a82b6bf39892c11a3bb3c381eb2705736014cfbdbde1ccf1c7a189d/team-weekly"
+      : "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af9011a864994bbeeec71fcf106188630199d/teams-yearly",
+    target: "_self",
+    benefits: [
+      "Everything in OpenSign™ professional",
+      "100 API signatures included",
+      "Teams and Organizations",
+      "Share Templates with teams",
+      "Share Templates with individuals",
+      "DocumentId removal from signed docs",
+      "Bulk send (upto 50 docs)",
+      "Request Payments (coming soon)",
+      "Mobile app (coming soon)"
+    ],
+    yearlyBenefits: [
+      "Everything in OpenSign™ professional",
+      "500 API signatures included",
+      "Teams and Organizations",
+      "Share Templates with teams",
+      "Share Templates with individuals",
+      "DocumentId removal from signed docs",
+      "Bulk send (upto 50 docs)",
+      "Request Payments (coming soon)",
+      "Mobile app (coming soon)"
     ]
   },
   {
@@ -75,36 +151,16 @@ const plans = [
       "Uptime SLA",
       "SSO support",
       "Priority support"
+    ],
+    yearlyBenefits: [
+      "All features",
+      "Custom domain",
+      "Custom branding",
+      "Uptime SLA",
+      "SSO support",
+      "Priority support"
     ]
   }
 ];
-export const stagingPlan = {
-  planName: "OPENSIGN™ TEAMS",
-  img: "teams.png",
-  currency: "$",
-  monthlyPrice: "40",
-  yearlyPrice: `20 <sup style="font-size: 17px;">/month/user</sup>`,
-  subtitle: "Exclusive Access to advanced features.",
-  btn: { text: "Subscribe", color: "op-btn-accent" },
-  url: isStaging
-    ? "https://billing.zoho.in/subscribe/ed8097273a82b6bf39892c11a3bb3c381eb2705736014cfbdbde1ccf1c7a189d/team-weekly"
-    : "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d1a09dfa8085585cdd4ec4d7f32137f3/professional-monthly",
-  yearlyUrl: isStaging
-    ? "https://billing.zoho.in/subscribe/ed8097273a82b6bf39892c11a3bb3c381eb2705736014cfbdbde1ccf1c7a189d/team-weekly"
-    : "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d8ad1135190dff951330360e47585a71/professional-yearly",
-  target: "_self",
-  benefits: [
-    "Everything in OpenSign™ free, professional",
-    "Field validations",
-    "Regular expression validations",
-    "Organize docs in OpenSign™ Drive",
-    "Webhooks",
-    "Zapier integration",
-    "API Access",
-    "100 API signatures included",
-    "DocumentId removal from signed docs",
-    "Custom email templates",
-    "Auto reminders"
-  ]
-};
+
 export default plans;
diff --git a/apps/OpenSign/src/pages/PlanSubscriptions.js b/apps/OpenSign/src/pages/PlanSubscriptions.js
@@ -1,12 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import checkmark from "../assets/images/checkmark.png";
-import plansArr, { stagingPlan } from "../json/plansArr";
+import plansArr from "../json/plansArr";
 import Title from "../components/Title";
 import Parse from "parse";
 import { openInNewTab } from "../constant/Utils";
 import Loader from "../primitives/Loader";
-import { isStaging } from "../constant/const";
 const listItemStyle = {
   paddingLeft: "20px", // Add padding to create space for the image
   backgroundImage: `url(${checkmark})`, // Set your image as the list style image
@@ -17,7 +16,6 @@ const listItemStyle = {
 
 const PlanSubscriptions = () => {
   const navigate = useNavigate();
-  const isTeamPlan = plansArr.some((x) => x.planName === "OPENSIGN™ TEAMS");
   const [yearlyVisible, setYearlyVisible] = useState(true);
   const [isLoader, setIsLoader] = useState(true);
   const extUser =
@@ -61,9 +59,6 @@ const PlanSubscriptions = () => {
     phone;
   useEffect(() => {
     setIsLoader(false);
-    if (!isTeamPlan && isStaging) {
-      plansArr.splice(2, 0, stagingPlan);
-    }
     // eslint-disable-next-line
   }, []);
 
@@ -123,7 +118,7 @@ const PlanSubscriptions = () => {
                   role="tab"
                   className={`${yearlyVisible ? "op-tab-active" : ""} op-tab`}
                 >
-                  Yearly (10% off)
+                  Yearly (upto 66% off)
                 </a>
               </div>
               <ul className="op-card flex flex-col md:flex-row h-full bg-base-100 justify-center shadow-lg">
@@ -209,11 +204,18 @@ const PlanSubscriptions = () => {
                     </div>
                     <hr className="w-full bg-gray-300 h-[0.5px]" />
                     <ul className="mx-1 p-3 text-left break-words text-sm list-none">
-                      {item.benefits.map((subitem, index) => (
-                        <li style={listItemStyle} key={index} className="m-1">
-                          <span className="relative">{subitem}</span>
-                        </li>
-                      ))}
+                      {!yearlyVisible &&
+                        item.benefits.map((subitem, index) => (
+                          <li style={listItemStyle} key={index} className="m-1">
+                            <span className="relative">{subitem}</span>
+                          </li>
+                        ))}
+                      {yearlyVisible &&
+                        item?.yearlyBenefits?.map((subitem, index) => (
+                          <li style={listItemStyle} key={index} className="m-1">
+                            <span className="relative">{subitem}</span>
+                          </li>
+                        ))}
                     </ul>
                   </li>
                 ))}
diff --git a/apps/OpenSign/src/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js
@@ -8,7 +8,11 @@ import sanitizeFileName from "../primitives/sanitizeFileName";
 import axios from "axios";
 import Tooltip from "../primitives/Tooltip";
 import { isEnableSubscription } from "../constant/const";
-import { checkIsSubscribed, handleSendOTP } from "../constant/Utils";
+import {
+  checkIsSubscribed,
+  checkIsSubscribedTeam,
+  handleSendOTP
+} from "../constant/Utils";
 import Upgrade from "../primitives/Upgrade";
 import ModalUi from "../primitives/ModalUi";
 import Loader from "../primitives/Loader";
@@ -46,6 +50,7 @@ function UserProfile() {
   const [tagLine, setTagLine] = useState(
     extendUser && extendUser?.[0]?.Tagline
   );
+  const [isTeam, setIsTeam] = useState(false);
   useEffect(() => {
     getUserDetail();
   }, []);
@@ -57,7 +62,9 @@ function UserProfile() {
     const HeaderDocId = jsonSender[0]?.HeaderDocId;
     if (isEnableSubscription) {
       const getIsSubscribe = await checkIsSubscribed();
+      const getIsTeam = await checkIsSubscribedTeam();
       setIsSubscribe(getIsSubscribe);
+      setIsTeam(getIsTeam);
     }
     if (HeaderDocId) {
       setIsDisableDocId(HeaderDocId);
@@ -511,9 +518,7 @@ function UserProfile() {
                   <div className="flex justify-between items-center py-2">
                     <span
                       className={
-                        isSubscribe
-                          ? "font-semibold"
-                          : "font-semibold text-gray-300"
+                        isTeam ? "font-semibold" : "font-semibold text-gray-300"
                       }
                     >
                       Disable DocumentId :{" "}
@@ -522,17 +527,17 @@ function UserProfile() {
                           "https://docs.opensignlabs.com/docs/help/Settings/disabledocumentid"
                         }
                       />
-                      {!isSubscribe && isEnableSubscription && <Upgrade />}
+                      {!isTeam && isEnableSubscription && <Upgrade />}
                     </span>
                     <label
                       className={`${
-                        isSubscribe
+                        isTeam
                           ? `${editmode ? "cursor-pointer" : ""}`
                           : "pointer-events-none opacity-50"
                       } relative block items-center mb-0`}
                     >
                       <input
-                        disabled={editmode ? false : true}
+                        disabled={isTeam ? false : true}
                         type="checkbox"
                         className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
                         checked={isDisableDocId}
