refactor: restricted staging plan

apps/OpenSign/src/constant/Utils.js

@@ -91,7 +91,13 @@ export async function checkIsSubscribedTeam() {
     if (res.plan === "freeplan") {
       return false;
     } else if (res.billingDate) {
-      const plan = res.plan === "team-weekly" || res.plan === "team-yearly";
+      const plan =
+        res.plan === "team-weekly" ||
+        res.plan === "team-yearly" ||
+        res.plan === "teams-monthly" ||
+        res.plan === "teams-yearly" ||
+        res.plan === "enterprise-monthly" ||
+        res.plan === "enterprise-yearly";
       if (plan && new Date(res.billingDate) > new Date()) {
         return true;
       } else {

apps/OpenSign/src/json/plansArr.js

@@ -1,11 +1,12 @@
 const plans = [
   {
     planName: "OPENSIGN™ FREE",
+    img: "free.png",
     currency: "",
     monthlyPrice: "Free",
     yearlyPrice: "Free",
     subtitle: "Free Unlimited E-signatures, Forever.",
-    btnText: "Subscribe",
+    btn: { text: "Subscribe", color: "op-btn-primary" },
     url: "",
     target: "_blank",
     benefits: [
@@ -28,11 +29,12 @@ const plans = [
   },
   {
     planName: "OPENSIGN™ PROFESSIONAL",
+    img: "professional.png",
     currency: "$",
     monthlyPrice: "29.99",
-    yearlyPrice: "10 <sup>/month/user</sup>",
+    yearlyPrice: `10 <sup style="font-size: 17px;">/month/user</sup>`,
     subtitle: "Exclusive Access to advanced features.",
-    btnText: "Subscribe",
+    btn: { text: "Subscribe", color: "op-btn-primary" },
     url:
       window.location.origin === "https://staging-app.opensignlabs.com"
         ? "https://billing.zoho.in/subscribe/9627f62a09df1c8ce500f2f4dc8328dd84ecda20eeae13878ce581d60240f206/pro-weekly"
@@ -56,43 +58,14 @@ const plans = [
       "Auto reminders"
     ]
   },
-  {
-    planName: "OPENSIGN™ TEAMS",
-    currency: "$",
-    monthlyPrice: "40",
-    yearlyPrice: "20 <sup>/month/user</sup>",
-    subtitle: "Exclusive Access to advanced features.",
-    btnText: "Subscribe",
-    url:
-      window.location.origin === "https://staging-app.opensignlabs.com"
-        ? "https://billing.zoho.in/subscribe/ed8097273a82b6bf39892c11a3bb3c381eb2705736014cfbdbde1ccf1c7a189d/team-weekly"
-        : "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d1a09dfa8085585cdd4ec4d7f32137f3/professional-monthly",
-    yearlyUrl:
-      window.location.origin === "https://staging-app.opensignlabs.com"
-        ? "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"
-    ]
-  },
   {
     planName: "OPENSIGN™ ENTERPRISE",
+    img: "enterprise.png",
     currency: "",
-    monthlyPrice: "Request Price",
-    yearlyPrice: "Request Price",
+    monthlyPrice: `<p style="font-size: 22px;">Request Price</p>`,
+    yearlyPrice: `<p style="font-size: 22px;">Request Price</p>`,
     subtitle: "Scalable Features with priority support.",
-    btnText: "Contact us",
+    btn: { text: "Contact us", color: "op-btn-primary" },
     url: "https://www.opensignlabs.com/contact-us",
     target: "_blank",
     benefits: [
@@ -105,5 +78,35 @@ const plans = [
     ]
   }
 ];
-
+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:
+    window.location.origin === "https://staging-app.opensignlabs.com"
+      ? "https://billing.zoho.in/subscribe/ed8097273a82b6bf39892c11a3bb3c381eb2705736014cfbdbde1ccf1c7a189d/team-weekly"
+      : "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d1a09dfa8085585cdd4ec4d7f32137f3/professional-monthly",
+  yearlyUrl:
+    window.location.origin === "https://staging-app.opensignlabs.com"
+      ? "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;

apps/OpenSign/src/pages/PlanSubscriptions.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import checkmark from "../assets/images/checkmark.png";
-import plansArr from "../json/plansArr";
+import plansArr, { stagingPlan } from "../json/plansArr";
 import Title from "../components/Title";
 import Parse from "parse";
 import { openInNewTab } from "../constant/Utils";
@@ -16,6 +16,7 @@ const listItemStyle = {
 
 const PlanSubscriptions = () => {
   const navigate = useNavigate();
+  const isStagingPlan = plansArr.some((x) => x.planName === "OPENSIGN™ TEAMS");
   const [yearlyVisible, setYearlyVisible] = useState(true);
   const [isLoader, setIsLoader] = useState(true);
   const extUser =
@@ -53,11 +54,13 @@ const PlanSubscriptions = () => {
     company +
     phone;
   useEffect(() => {
-    // if (localStorage.getItem("accesstoken")) {
     setIsLoader(false);
-    // } else {
-    //   navigate("/", { replace: true });
-    // }
+    if (
+      !isStagingPlan &&
+      window.location.origin === "https://staging-app.opensignlabs.com"
+    ) {
+      plansArr.splice(2, 0, stagingPlan);
+    }
     // eslint-disable-next-line
   }, []);
 
@@ -130,11 +133,11 @@ const PlanSubscriptions = () => {
                       <h3 className="text-[#002862] uppercase">
                         {item.planName}
                       </h3>
-                      <div className="w-[150px] h-[150px]">
+                      <div className="w-[120px] h-[120px] overflow-hidden">
                         <img
-                          className="icon-basic mx-auto"
-                          src="https://js.zohostatic.com/books/zfwidgets/assets/images/plan.png"
-                          alt="freeimg"
+                          className="w-full h-full object-contain"
+                          src={require(`../assets/images/${item?.img}`)}
+                          alt="img"
                         />
                       </div>
                       <div>
@@ -154,7 +157,18 @@ const PlanSubscriptions = () => {
                               )}
                             </>
                           ) : (
-                            item.monthlyPrice
+                            <>
+                              {item?.monthlyPrice.includes("<") ? (
+                                <div
+                                  className="inline-block"
+                                  dangerouslySetInnerHTML={{
+                                    __html: item?.monthlyPrice
+                                  }}
+                                />
+                              ) : (
+                                <span>{item?.monthlyPrice}</span>
+                              )}
+                            </>
                           )}
                         </span>
                         <p className="font-semibold pt-2 text-sm">
@@ -182,10 +196,12 @@ const PlanSubscriptions = () => {
                         </div>
                       </div>
                       <button
-                        className="bg-[#002862] w-full text-white py-2 rounded uppercase hover:text-white cursor-pointer"
+                        className={`${
+                          item?.btn?.color ? item?.btn?.color : "op-btn-primary"
+                        } w-full text-white py-2 op-btn uppercase hover:text-white cursor-pointer`}
                         onClick={() => handleFreePlan(item)}
                       >
-                        {item.btnText}
+                        {item?.btn?.text}
                       </button>
                     </div>
                     <hr className="w-full bg-gray-300 h-[0.5px]" />