payment plan

public/locales/de/translation.json

@@ -118,11 +118,7 @@
     },
     "support": "Unterstützung",
     "feedback": "Feedback",
-    "accountPlan": {
-      "infoDaysLeft": "{{daysLeft}} {{dayUnit}} verbleibend",
-      "buttonExtend": "Plan verlängern",
-      "buttonManage": "Plan verwalten"
-    }
+    "paymentPlan": "Zahlungsplan"
   },
   "employees": {
     "pageTitle": "Mitarbeiter",

public/locales/en/translation.json

@@ -118,11 +118,7 @@
     },
     "support": "Support",
     "feedback": "Feedback",
-    "accountPlan": {
-      "infoDaysLeft": "{{daysLeft}} {{dayUnit}} left",
-      "buttonExtend": "Extend plan",
-      "buttonManage": "Manage plan"
-    }
+    "paymentPlan": "Payment plan"
   },
   "employees": {
     "pageTitle": "Employees",

src/Components/SideMenu/index.js

@@ -8,10 +8,11 @@ import {
   ShopOutlined,
   TeamOutlined,
   UserOutlined,
+  WalletOutlined,
 } from "@ant-design/icons";
-import { Button, Card, Divider, Flex, Menu, Typography } from "antd";
+import { Divider, Menu } from "antd";
 import { useEffect, useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { BreakpointLgWidth, Constants, isDevelopmentEnv } from "../../utils";
 import { useTranslation } from "react-i18next";
 import { useSideBarContext } from "../../Contexts/SideBarContext";
@@ -31,6 +32,8 @@ export function SideMenuContent({
 
   const navigate = useNavigate();
 
+  console.log("selectedKeys", selectedKeys);
+
   const getFirstMenuItems = () => {
     let items = [
       {
@@ -117,6 +120,12 @@ export function SideMenuContent({
       );
     }
 
+    items.push({
+      label: t("sideMenu.paymentPlan"),
+      icon: <WalletOutlined />,
+      key: Constants.ROUTE_PATHS.PAYMENT_PLAN,
+    });
+
     items.push({
       label: sideBarContext.username,
       icon: <UserOutlined />,
@@ -153,17 +162,6 @@ 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={{
@@ -218,7 +216,31 @@ export function SideMenuContent({
       <div>
         <Divider style={{ margin: 0 }} />
 
-        {sideBarContext.accountPlanExpiry !== undefined &&
+        <Menu
+          selectable={true}
+          selectedKeys={[selectedKeys]}
+          mode="vertical"
+          onClick={(item) => navigate(item.key)}
+          items={getSecondMenuItems()}
+        />
+      </div>
+    </div>
+  );
+}
+
+/*
+  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();
+
+{sideBarContext.accountPlanExpiry !== undefined &&
           accountPlanExpiry > 0 && (
             <Card
               style={{ backgroundColor: "#6878d6", margin: 8 }}
@@ -250,15 +272,4 @@ export function SideMenuContent({
               </Button>
             </Card>
           )}
-
-        <Menu
-          selectable={true}
-          selectedKeys={[selectedKeys]}
-          mode="vertical"
-          onClick={(item) => navigate(item.key)}
-          items={getSecondMenuItems()}
-        />
-      </div>
-    </div>
-  );
-}
+*/

src/Pages/Authentication/SignUp.js

@@ -131,11 +131,12 @@ function AccountDetails({ t, form }) {
   );
 }
 
-function ChoosenProduct({ t, paymentPlan }) {
+export function ChoosenProduct({ t, paymentPlan, extra }) {
   return (
     <Card
       title={t("authentication.signUp.choosenProduct.title")}
       style={{ marginBottom: 16 }}
+      extra={extra}
     >
       <Typography.Title level={2}>
         {Constants.APP_NAME} - {Constants.PAYMENT_PLAN[paymentPlan].name}

src/Pages/PaymentPlan/index.js

@@ -1,70 +1,51 @@
-import { Button, Card, Descriptions } from "antd";
+import { Button, notification } from "antd";
 import { useAppContext } from "../../Contexts/AppContext";
-import { Constants, myFetch } from "../../utils";
+import { myFetch, showUnkownErrorNotification } from "../../utils";
 import { useTranslation } from "react-i18next";
 import { CreditCardOutlined } from "@ant-design/icons";
 import { useState } from "react";
+import { ChoosenProduct } from "../Authentication/SignUp";
 
 export default function PaymentPlan() {
   const { t } = useTranslation();
   const appContext = useAppContext();
 
+  const [notificationApi, notificationContextHolder] =
+    notification.useNotification();
+
   const [isRequestingBillingDetails, setIsRequestingBillingDetails] =
     useState(false);
 
   return (
-    <Card
-      title={t("paymentPlan.title")}
-      extra={
-        <Button
-          type="link"
-          icon={<CreditCardOutlined />}
-          loading={isRequestingBillingDetails}
-          onClick={() => {
-            setIsRequestingBillingDetails(true);
+    <>
+      {notificationContextHolder}
 
-            myFetch({
-              method: "GET",
-              url: "/payment/portal",
-            })
-              .then((response) => {
-                console.log("response", response);
+      <ChoosenProduct
+        t={t}
+        paymentPlan={appContext.paymentPlan}
+        extra={
+          <Button
+            type="link"
+            icon={<CreditCardOutlined />}
+            loading={isRequestingBillingDetails}
+            onClick={() => {
+              setIsRequestingBillingDetails(true);
 
-                window.location.href = response.url;
+              myFetch({
+                method: "GET",
+                url: "/payment/portal",
               })
-              .catch((error) => {
-                console.error("error", error);
-                setIsRequestingBillingDetails(false);
-              });
-          }}
-        >
-          {t("paymentPlan.buttonUpdateBillingDetails")}
-        </Button>
-      }
-    >
-      <Descriptions>
-        <Descriptions.Item label={t("paymentPlan.plan")}>
-          {Constants.PAYMENT_PLAN[appContext.paymentPlan].name}
-        </Descriptions.Item>
-        <Descriptions.Item
-          label={t("paymentPlan.contentsOfSubscription.title")}
-        >
-          <>
-            {t("paymentPlan.contentsOfSubscription.maxEmployees")}{" "}
-            {Constants.PAYMENT_PLAN[appContext.paymentPlan].maxEmployees}
-            <br />
-            {t(
-              "paymentPlan.contentsOfSubscription.calendarMaxFutureBookingDays"
-            )}
-            :{" "}
-            {
-              Constants.PAYMENT_PLAN[appContext.paymentPlan]
-                .calendarMaxFutureBookingDays
-            }
-            <br />
-          </>
-        </Descriptions.Item>
-      </Descriptions>
-    </Card>
+                .then((response) => (window.location.href = response.url))
+                .catch(() => {
+                  setIsRequestingBillingDetails(false);
+                  showUnkownErrorNotification(notificationApi, t);
+                });
+            }}
+          >
+            {t("paymentPlan.buttonUpdateBillingDetails")}
+          </Button>
+        }
+      />
+    </>
   );
 }

src/utils.js

@@ -62,7 +62,7 @@ export const Constants = {
       CALENDAR: "calendar",
       CALENDAR_AUTH: "calendar/auth",
     },
-    PAYMENT_PLAN: "payment-plan",
+    PAYMENT_PLAN: "/payment-plan",
     FEEDBACK: "/feedback",
     SUPPORT: "/support",
     USER_PROFILE: "/user-profile",
@@ -115,35 +115,11 @@ export const Constants = {
       name: "Basic",
       maxEmployees: 15,
       calendarMaxFutureBookingDays: 60,
-      price: {
-        en: {
-          totalNet: "9,99 €", // netto
-          vat: "1,90 €",
-          totalAmount: "11,89 €", // brutto
-        },
-        de: {
-          totalNet: "9,99 €",
-          vat: "1,90 €",
-          totalAmount: "11,89 €",
-        },
-      },
     },
     {
       name: "Premium",
       maxEmployees: 50, // temporary
       calendarMaxFutureBookingDays: 365, // temporary
-      price: {
-        en: {
-          totalNet: "24,99 €",
-          vat: "4,75 €",
-          totalAmount: "29,74 €",
-        },
-        de: {
-          totalNet: "24,99 €",
-          vat: "4,75 €",
-          totalAmount: "29,74 €",
-        },
-      },
     },
   ],
 };