account demo

public/locales/de/translation.json

@@ -21,6 +21,7 @@
       "minutes": "Minuten",
       "minute": "Minute",
       "days": "Tage",
+      "day": "Tag",
       "separator": "und"
     },
     "failed": "Fehlgeschlagen",
@@ -117,7 +118,12 @@
       }
     },
     "support": "Unterstützung",
-    "feedback": "Feedback"
+    "feedback": "Feedback",
+    "accountPlan": {
+      "infoDaysLeft": "{{daysLeft}} {{dayUnit}} verbleibend",
+      "buttonExtend": "Plan verlängern",
+      "buttonManage": "Plan verwalten"
+    }
   },
   "employees": {
     "pageTitle": "Mitarbeiter",

public/locales/en/translation.json

@@ -21,6 +21,7 @@
       "minutes": "minutes",
       "minute": "minute",
       "days": "Days",
+      "day": "Day",
       "separator": "and"
     },
     "failed": "Failed",
@@ -117,7 +118,12 @@
       }
     },
     "support": "Support",
-    "feedback": "Feedback"
+    "feedback": "Feedback",
+    "accountPlan": {
+      "infoDaysLeft": "{{daysLeft}} {{dayUnit}} left",
+      "buttonExtend": "Extend plan",
+      "buttonManage": "Manage plan"
+    }
   },
   "employees": {
     "pageTitle": "Employees",

src/App.js

@@ -120,6 +120,10 @@ export default function App() {
           options={{
             username: appUserData.user.username,
             permissions: appUserData.permissions,
+            accountPlanExpiry:
+              appUserData.user.account_plan_expiry === null
+                ? undefined
+                : appUserData.user.account_plan_expiry,
           }}
         >
           <UserProfileProvider>

src/Components/AppRoutes/index.js

@@ -105,15 +105,6 @@ export function AppRoutes({ setUserSession }) {
         }
       />
 
-      <Route
-        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.WEBSITE}`}
-        element={
-          <MySupsenseFallback>
-            <StoreWebsite />
-          </MySupsenseFallback>
-        }
-      />
-
       {isDevelopmentEnv() && (
         <>
           <Route
@@ -156,3 +147,14 @@ export function AppRoutes({ setUserSession }) {
     </Routes>
   );
 }
+
+/*
+ <Route
+        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.WEBSITE}`}
+        element={
+          <MySupsenseFallback>
+            <StoreWebsite />
+          </MySupsenseFallback>
+        }
+      /> 
+*/

src/Components/SideMenu/index.js

@@ -1,7 +1,6 @@
 import {
   AppstoreOutlined,
   CalendarOutlined,
-  EditOutlined,
   MessageOutlined,
   QuestionCircleOutlined,
   ScissorOutlined,
@@ -10,7 +9,7 @@ import {
   TeamOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { Divider, Menu } from "antd";
+import { Button, Card, Divider, Flex, Menu, Typography } from "antd";
 import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { BreakpointLgWidth, Constants, isDevelopmentEnv } from "../../utils";
@@ -92,7 +91,7 @@ export function SideMenuContent({
         });
       }
 
-      if (
+      /*if (
         isDevelopmentEnv() &&
         sideBarContext.permissions.includes("website")
       ) {
@@ -101,7 +100,7 @@ export function SideMenuContent({
           icon: <EditOutlined />,
           key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.WEBSITE}`,
         });
-      }
+      }*/
 
       stores.children.push(groupStore);
     });
@@ -165,6 +164,17 @@ export function SideMenuContent({
     }
   }, [location.pathname]);
 
+  const calculateExpiry = () => {
+    const currentDate = new Date();
+    const expiryDate = new Date(sideBarContext.accountPlanExpiry);
+    const diffTime = Math.abs(expiryDate - currentDate);
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+    return diffDays;
+  };
+
+  const accountPlanExpiry = calculateExpiry();
+
   return (
     <div
       style={{
@@ -219,6 +229,33 @@ export function SideMenuContent({
       <div>
         <Divider style={{ margin: 0 }} />
 
+        {sideBarContext.accountPlanExpiry !== undefined &&
+          accountPlanExpiry > 0 && (
+            <Card
+              style={{ backgroundColor: "#6878d6", margin: 8 }}
+              bodyStyle={{ padding: 10 }}
+            >
+              <Flex justify="center" align="center">
+                <Typography.Title
+                  level={5}
+                  style={{ color: "#fff", textAlign: "center" }}
+                >
+                  {t("sideMenu.accountPlan.infoDaysLeft", {
+                    daysLeft: accountPlanExpiry,
+                    dayUnit:
+                      accountPlanExpiry > 1
+                        ? t("common.unit.days")
+                        : t("common.unit.day"),
+                  })}
+                </Typography.Title>
+              </Flex>
+
+              <Button block style={{ fontWeight: "bold", fontSize: 13 }}>
+                {t("sideMenu.accountPlan.buttonExtend")}
+              </Button>
+            </Card>
+          )}
+
         <Menu
           selectable={true}
           selectedKeys={[selectedKeys]}

src/Contexts/SideBarContext.js

@@ -5,6 +5,8 @@ const preview = {
   setUsername: () => {},
   permissions: [],
   setPermissions: () => {},
+  accountPlanExpiry: "",
+  setAccountPlanExpiry: () => {},
 };
 
 const SideBarContext = createContext(preview);
@@ -14,6 +16,9 @@ export const useSideBarContext = () => useContext(SideBarContext);
 export default function SideBarProvider({ children, options }) {
   const [username, setUsername] = useState(options.username);
   const [permissions, setPermissions] = useState(options.permissions);
+  const [accountPlanExpiry, setAccountPlanExpiry] = useState(
+    options.accountPlanExpiry
+  );
 
   return (
     <SideBarContext.Provider
@@ -22,6 +27,8 @@ export default function SideBarProvider({ children, options }) {
         setUsername,
         permissions,
         setPermissions,
+        accountPlanExpiry,
+        setAccountPlanExpiry,
       }}
     >
       {children}

src/Pages/Dashboard/index.js

@@ -1,13 +1,5 @@
-import { Card, Col, Row, Statistic } from "antd";
+import PageInDevelopment from "../PageInDevelopment";
 
 export default function Dashboard() {
-  return (
-    <Row gutter={[16, 16]}>
-      <Col>
-        <Card>
-          <Statistic title="Aktueller Plan" value="Free" />
-        </Card>
-      </Col>
-    </Row>
-  );
+  return <PageInDevelopment showBackButton={false} />;
 }

src/Pages/PageInDevelopment/index.js

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { Constants } from "../../utils";
 
-export default function PageInDevelopment() {
+export default function PageInDevelopment({ showBackButton = true }) {
   const { t } = useTranslation();
 
   return (
@@ -12,9 +12,11 @@ export default function PageInDevelopment() {
       title={t("pageInDevelopment.title")}
       subTitle={t("pageInDevelopment.subTitle")}
       extra={
+        showBackButton && (
           <Link to={Constants.ROUTE_PATHS.OVERVIEW}>
             <Button type="primary">{t("pageNotFound.buttonBackHome")}</Button>
           </Link>
+        )
       }
     />
   );