trial ended

public/locales/de/translation.json

@@ -129,6 +129,7 @@
     "feedback": "Feedback",
     "paymentPlan": "Zahlungsplan",
     "paymentPlanTrailingDaysLeft": "{{daysLeft}} {{dayUnit}} verbleibend",
+    "paymentPlanTrailingEnded": "Demo abgelaufen",
     "paymentPlanUpgradeButton": "Jetzt upgraden"
   },
   "dashboard": {
@@ -526,6 +527,7 @@
       "demoEndsIn": "Die Testversion endet in",
       "selectPlanToAccessFullFeatures": "Wählen Sie einen Plan, um auf alle Funktionen zuzugreifen."
     },
+    "alertTrialEnded": "Ihre Testversion ist abgelaufen. Bitte wählen Sie einen Plan, um unsere Dienste weiterhin nutzen zu können.",
     "alertPlanCancelled": "Ihr Plan wurde gekündigt. Am Ende des Abrechnungszeitraums müssen Sie einen neuen Plan auswählen, um unsere Dienste weiterhin nutzen zu können.",
     "features": [
       {

public/locales/en/translation.json

@@ -129,6 +129,7 @@
     "feedback": "Feedback",
     "paymentPlan": "Payment plan",
     "paymentPlanTrailingDaysLeft": "{{daysLeft}} {{dayUnit}} left",
+    "paymentPlanTrailingEnded": "Trial period ended",
     "paymentPlanUpgradeButton": "Upgrade now"
   },
   "dashboard": {
@@ -535,6 +536,7 @@
       "demoEndsIn": "Demo ends in",
       "selectPlanToAccessFullFeatures": "Select a plan to access all features."
     },
+    "alertTrialEnded": "Trial period ended. Please select a plan to continue using our services.",
     "alertPlanCancelled": "Your plan has been cancelled. At the end of the billing period, you need to select a new plan to continue using our services.",
     "features": [
       {

src/Components/AppRoutes/index.js

@@ -4,6 +4,10 @@ import { lazy } from "react";
 import { MySupsenseFallback } from "../MySupsenseFallback";
 import { AuthenticationMethod } from "../../Pages/Authentication";
 import Verification from "../../Pages/Verification";
+import {
+  hasTrailEnded,
+  useSideBarContext,
+} from "../../Contexts/SideBarContext";
 
 // Lazy-loaded components
 const Authentication = lazy(() => import("../../Pages/Authentication"));
@@ -127,6 +131,8 @@ export function VerificationRoutes() {
 }
 
 export function AppRoutes({ setUserSession }) {
+  const sideBarContext = useSideBarContext();
+
   return (
     <Routes>
       <Route
@@ -138,6 +144,8 @@ export function AppRoutes({ setUserSession }) {
         }
       />
 
+      {!hasTrailEnded(sideBarContext.paymentPlanTrialEnd) && (
+        <>
           <Route
             path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.SETTINGS}`}
             element={
@@ -182,6 +190,8 @@ export function AppRoutes({ setUserSession }) {
               </MySupsenseFallback>
             }
           />
+        </>
+      )}
 
       <Route
         path={Constants.ROUTE_PATHS.PAYMENT_PLAN}

src/Components/SideMenu/index.js

@@ -20,7 +20,11 @@ import {
   isDevelopmentEnv,
 } from "../../utils";
 import { useTranslation } from "react-i18next";
-import { useSideBarContext } from "../../Contexts/SideBarContext";
+import {
+  getDaysLeft,
+  hasTrailEnded,
+  useSideBarContext,
+} from "../../Contexts/SideBarContext";
 import { useStoresContext } from "../../Contexts/StoresContext";
 import MyAppLogo from "../MyAppLogo";
 
@@ -57,12 +61,15 @@ export function SideMenuContent({
       type: "group",
     };
 
+    const isDisabled = hasTrailEnded(sideBarContext.paymentPlanTrialEnd);
+
     storesContext.stores.forEach((store) => {
       let groupStore = {
         label: store.name,
         icon: <ShopOutlined />,
         children: [],
         key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}`,
+        disabled: isDisabled,
       };
 
       if (sideBarContext.permissions.includes("settings")) {
@@ -70,6 +77,7 @@ export function SideMenuContent({
           label: t("sideMenu.store.settings"),
           icon: <SettingOutlined />,
           key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.SETTINGS}`,
+          disabled: isDisabled,
         });
       }
 
@@ -78,6 +86,7 @@ export function SideMenuContent({
           label: t("sideMenu.store.employees"),
           icon: <TeamOutlined />,
           key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.EMPLOYEES}`,
+          disabled: isDisabled,
         });
       }
 
@@ -86,6 +95,7 @@ export function SideMenuContent({
           label: t("sideMenu.store.services"),
           icon: <ScissorOutlined />,
           key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.SERVICES}`,
+          disabled: isDisabled,
         });
       }
 
@@ -94,6 +104,7 @@ export function SideMenuContent({
           label: t("sideMenu.store.calendar"),
           icon: <CalendarOutlined />,
           key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.CALENDAR}`,
+          disabled: isDisabled,
         });
       }
 
@@ -174,10 +185,7 @@ export function SideMenuContent({
     }
   }, [location.pathname]);
 
-  const daysLeft = Math.floor(
+  const daysLeft = getDaysLeft(sideBarContext.paymentPlanTrialEnd);
-    (new Date(sideBarContext.paymentPlanTrialEnd) - new Date()) /
-      (1000 * 60 * 60 * 24)
-  );
 
   return (
     <div
@@ -238,7 +246,11 @@ export function SideMenuContent({
         {sideBarContext.permissions.includes("paymentPlan") &&
           showPaymentPlanInfoBanner && (
             <Card
-              style={{ backgroundColor: AppStyle.colors.primary, margin: 8 }}
+              style={{
+                backgroundColor:
+                  daysLeft > 3 ? AppStyle.colors.primary : "#e74c3c",
+                margin: 8,
+              }}
               styles={{ body: { padding: 10 } }}
             >
               <Flex justify="center" align="center">
@@ -246,13 +258,15 @@ export function SideMenuContent({
                   level={5}
                   style={{ color: "#fff", textAlign: "center" }}
                 >
-                  {t("sideMenu.paymentPlanTrailingDaysLeft", {
+                  {daysLeft > 0
+                    ? t("sideMenu.paymentPlanTrailingDaysLeft", {
                         daysLeft: daysLeft,
                         dayUnit:
-                      daysLeft > 1
+                          daysLeft > 1 || daysLeft === 0
                             ? t("common.unit.days")
                             : t("common.unit.day"),
-                  })}
+                      })
+                    : t("sideMenu.paymentPlanTrailingEnded")}
                 </Typography.Title>
               </Flex>
 

src/Contexts/SideBarContext.js

@@ -49,3 +49,16 @@ export default function SideBarProvider({ children, options }) {
     </SideBarContext.Provider>
   );
 }
+
+// used to disabled the store menu in the SideBar, the store routes in AppRoutes and change the color of the trail end popup in the SideBar
+export function getDaysLeft(paymentPlanTrialEnd) {
+  return Math.floor(
+    (new Date(paymentPlanTrialEnd) - new Date()) / (1000 * 60 * 60 * 24)
+  );
+}
+
+export function hasTrailEnded(paymentPlanTrialEnd) {
+  if (!paymentPlanTrialEnd) return false;
+
+  return getDaysLeft(paymentPlanTrialEnd) <= 0;
+}

src/Pages/PaymentPlan/index.js

@@ -25,6 +25,7 @@ import { useEffect, useState } from "react";
 import { ReactComponent as RocketLaunch } from "./rocket_launch_FILL1_wght400_GRAD0_opsz24.svg";
 import { ReactComponent as Check } from "./task_alt_FILL0_wght400_GRAD0_opsz24.svg";
 import CountUp from "react-countup";
+import { getDaysLeft } from "../../Contexts/SideBarContext";
 
 const { useBreakpoint } = Grid;
 
@@ -78,10 +79,23 @@ export default function PaymentPlan() {
       requestData.payment_plan_trial_end &&
       !requestData.payment_plan_canceled_at
     ) {
-      const daysLeft = Math.floor(
+      const daysLeft = getDaysLeft(requestData.payment_plan_trial_end);
-        (new Date(requestData.payment_plan_trial_end) - new Date()) /
+
-          (1000 * 60 * 60 * 24)
+      if (daysLeft <= 0) {
+        return (
+          <Alert
+            message={
+              <Typography.Text>
+                {t("paymentPlan.alertTrialEnded")}
+              </Typography.Text>
+            }
+            type="warning"
+            showIcon
+            closable
+            style={{ marginBottom: 12 }}
+          />
         );
+      }
 
       return (
         <Alert