FIX: Improvements in the Unstract Subscription Plugins Integration

frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx

@@ -16,6 +16,7 @@ import task from "../../../assets/task.svg";
 import VectorDbIcon from "../../../assets/vector-db.svg";
 import TextExtractorIcon from "../../../assets/text-extractor.svg";
 import { useSessionStore } from "../../../store/session-store";
+import { useMemo } from "react";
 
 let getMenuItem;
 try {
@@ -31,10 +32,16 @@ try {
   // Plugin unavailable.
 }
 
+let unstractSubscriptionPlan;
+let unstractSubscriptionPlanStore;
 let dashboardSideMenuItem;
+let UNSTRACT_SUBSCRIPTION_PLANS;
 try {
-  dashboardSideMenuItem =
-    require("../../../plugins/unstract-subscription/helper/constants").dashboardSideMenuItem;
+  unstractSubscriptionPlanStore = require("../../../plugins/store/unstract-subscription-plan-store");
+  const unstractSubscriptionConstants = require("../../../plugins/unstract-subscription/helper/constants");
+  dashboardSideMenuItem = unstractSubscriptionConstants?.dashboardSideMenuItem;
+  UNSTRACT_SUBSCRIPTION_PLANS =
+    unstractSubscriptionConstants?.UNSTRACT_SUBSCRIPTION_PLANS;
 } catch (err) {
   // Plugin unavailable.
 }
@@ -43,6 +50,18 @@ const SideNavBar = ({ collapsed }) => {
   const navigate = useNavigate();
   const { sessionDetails } = useSessionStore();
   const { orgName, flags } = sessionDetails;
+
+  try {
+    if (unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore) {
+      unstractSubscriptionPlan =
+        unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore(
+          (state) => state?.unstractSubscriptionPlan
+        );
+    }
+  } catch (error) {
+    // Do nothing
+  }
+
   let menu;
   if (sideMenu) {
     menu = sideMenu.useSideMenu();
@@ -170,7 +189,26 @@ const SideNavBar = ({ collapsed }) => {
   const data = menu || unstractMenuItems;
 
   if (getMenuItem && flags?.app_deployment) {
-    data[0]?.subMenu?.splice(1, 0, getMenuItem?.default(orgName));
+    data[0]?.subMenu?.splice(1, 0, getMenuItem.default(orgName));
+  }
+
+  const shouldDisableAll = useMemo(() => {
+    if (!unstractSubscriptionPlan || !UNSTRACT_SUBSCRIPTION_PLANS) {
+      return false;
+    }
+
+    return (
+      !unstractSubscriptionPlan?.subscriptionId &&
+      unstractSubscriptionPlan?.planType !== UNSTRACT_SUBSCRIPTION_PLANS?.TRIAL
+    );
+  }, [unstractSubscriptionPlan]);
+
+  if (shouldDisableAll) {
+    data.forEach((mainMenuItem) => {
+      mainMenuItem.subMenu.forEach((subMenuItem) => {
+        subMenuItem.disable = true;
+      });
+    });
   }
 
   return (
@@ -184,53 +222,51 @@ const SideNavBar = ({ collapsed }) => {
     >
       <div className="main-slider">
         <div className="slider-wrap">
-          {data?.map((item, index) => {
-            return (
-              <div key={item?.id}>
-                {!collapsed && (
-                  <Typography className="sidebar-main-heading">
-                    {item.mainTitle}
-                  </Typography>
-                )}
-                <Space direction="vertical" className="menu-item-body">
-                  {item.subMenu.map((el) => {
-                    return (
-                      <Tooltip key={el.id} title={collapsed ? el.title : ""}>
-                        <Space
-                          className={`space-styles ${
-                            el.active ? "space-styles-active" : ""
-                          } ${el.disable ? "space-styles-disable" : ""}`}
-                          onClick={() => {
-                            !el.disable && navigate(el.path);
-                          }}
-                        >
-                          <Image
-                            src={el.image}
-                            alt="side_icon"
-                            className="menu-item-icon"
-                            preview={false}
-                          />
-                          {!collapsed && (
-                            <div>
-                              <Typography className="sidebar-item-text fs-14">
-                                {el.title}
-                              </Typography>
-                              <Typography className="sidebar-item-text fs-11">
-                                {el.description}
-                              </Typography>
-                            </div>
-                          )}
-                        </Space>
-                      </Tooltip>
-                    );
-                  })}
-                </Space>
-                {index < data.length - 1 && (
-                  <Divider className="sidebar-divider" />
-                )}
-              </div>
-            );
-          })}
+          {data?.map((item, index) => (
+            <div key={item?.id}>
+              {!collapsed && (
+                <Typography className="sidebar-main-heading">
+                  {item.mainTitle}
+                </Typography>
+              )}
+              <Space direction="vertical" className="menu-item-body">
+                {item.subMenu.map((el) => (
+                  <Tooltip key={el.id} title={collapsed ? el.title : ""}>
+                    <Space
+                      className={`space-styles ${
+                        el.active ? "space-styles-active" : ""
+                      } ${el.disable ? "space-styles-disable" : ""}`}
+                      onClick={() => {
+                        if (!el.disable) {
+                          navigate(el.path);
+                        }
+                      }}
+                    >
+                      <Image
+                        src={el.image}
+                        alt="side_icon"
+                        className="menu-item-icon"
+                        preview={false}
+                      />
+                      {!collapsed && (
+                        <div>
+                          <Typography className="sidebar-item-text fs-14">
+                            {el.title}
+                          </Typography>
+                          <Typography className="sidebar-item-text fs-11">
+                            {el.description}
+                          </Typography>
+                        </div>
+                      )}
+                    </Space>
+                  </Tooltip>
+                ))}
+              </Space>
+              {index < data.length - 1 && (
+                <Divider className="sidebar-divider" />
+              )}
+            </div>
+          ))}
         </div>
       </div>
     </Sider>

frontend/src/components/navigations/top-nav-bar/TopNavBar.jsx

@@ -68,6 +68,17 @@ try {
   // Ignore if hook not available
 }
 
+let unstractSubscriptionPlan;
+let unstractSubscriptionPlanStore;
+let UNSTRACT_SUBSCRIPTION_PLANS;
+try {
+  unstractSubscriptionPlanStore = require("../../../plugins/store/unstract-subscription-plan-store");
+  UNSTRACT_SUBSCRIPTION_PLANS =
+    require("../../../plugins/unstract-subscription/helper/constants").UNSTRACT_SUBSCRIPTION_PLANS;
+} catch (err) {
+  // Plugin unavailable.
+}
+
 function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
   const navigate = useNavigate();
   const { sessionDetails } = useSessionStore();
@@ -89,6 +100,28 @@ function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
     );
   }
 
+  try {
+    if (unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore) {
+      unstractSubscriptionPlan =
+        unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore(
+          (state) => state?.unstractSubscriptionPlan
+        );
+    }
+  } catch (error) {
+    // Do nothing
+  }
+
+  const shouldDisableRouting = useMemo(() => {
+    if (!unstractSubscriptionPlan || !UNSTRACT_SUBSCRIPTION_PLANS) {
+      return false;
+    }
+
+    return (
+      !unstractSubscriptionPlan?.subscriptionId &&
+      unstractSubscriptionPlan?.planType !== UNSTRACT_SUBSCRIPTION_PLANS?.TRIAL
+    );
+  }, [unstractSubscriptionPlan]);
+
   const isUnstract = !(selectedProduct && selectedProduct !== "unstract");
 
   // Check user role and whether the onboarding is incomplete
@@ -185,6 +218,7 @@ function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
           <Button
             onClick={() => navigate(`/${orgName}/profile`)}
             className="logout-button"
+            disabled={shouldDisableRouting}
           >
             <UserOutlined /> Profile
           </Button>
@@ -223,6 +257,7 @@ function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
           <Button
             onClick={() => navigate(`/${orgName}/review`)}
             className="logout-button"
+            disabled={shouldDisableRouting}
           >
             <FileProtectOutlined /> Review
           </Button>
@@ -238,6 +273,7 @@ function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
           <Button
             onClick={() => navigate(`/${orgName}/review/approve`)}
             className="logout-button"
+            disabled={shouldDisableRouting}
           >
             <LikeOutlined /> Approve
           </Button>
@@ -250,6 +286,7 @@ function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
           <Button
             onClick={() => navigate(`/${orgName}/review/download_and_sync`)}
             className="logout-button"
+            disabled={shouldDisableRouting}
           >
             <DownloadOutlined /> Download and Sync Manager
           </Button>
@@ -277,6 +314,7 @@ function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
     cascadeOptions,
     orgName,
     orgId,
+    shouldDisableRouting,
   ]);
 
   // Function to get the initials from the user name

frontend/src/helpers/GetStaticData.js

@@ -170,21 +170,30 @@ const listOfAppDeployments = [
   },
 ];
 
-const getReadableDateAndTime = (timestamp) => {
+const getReadableDateAndTime = (timestamp, includeTime = true) => {
   const currentDate = new Date(timestamp);
 
-  // Options for formatting the date and time
-  const options = {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
+  if (isNaN(currentDate)) {
+    return "Invalid date";
+  }
+
+  // Options for formatting the date
+  const dateOptions = { year: "numeric", month: "long", day: "numeric" };
+  const formattedDate = currentDate.toLocaleDateString("en-US", dateOptions);
+
+  if (!includeTime) {
+    return formattedDate;
+  }
+
+  // Options for formatting the time
+  const timeOptions = {
     hour: "2-digit",
     minute: "2-digit",
     second: "2-digit",
     timeZoneName: "short",
   };
-  const formattedDate = currentDate.toLocaleDateString("en-US", options);
-  const formattedTime = currentDate.toLocaleTimeString("en-US", options);
+  const formattedTime = currentDate.toLocaleTimeString("en-US", timeOptions);
+
   return formattedDate + ", " + formattedTime;
 };
 

frontend/src/routes/useMainAppRoutes.js

@@ -109,7 +109,10 @@ function useMainAppRoutes() {
           <Route path="dashboard" element={<UnstractUsagePage />} />
         )}
         {UnstractSubscriptionPage && (
-          <Route path="subscribe" element={<UnstractSubscriptionPage />} />
+          <Route
+            path="subscription-plans"
+            element={<UnstractSubscriptionPage />}
+          />
         )}
         <Route path="profile" element={<ProfilePage />} />
         <Route