From 7ca71a8b1e77ff7c99337a1bcff583c31c025ed2 Mon Sep 17 00:00:00 2001 From: alex Date: Sat, 17 Feb 2024 20:57:16 +0100 Subject: [PATCH] payment plan --- public/locales/de/translation.json | 6 +-- public/locales/en/translation.json | 6 +-- src/Components/SideMenu/index.js | 63 +++++++++++++--------- src/Pages/Authentication/SignUp.js | 3 +- src/Pages/PaymentPlan/index.js | 85 ++++++++++++------------------ src/utils.js | 26 +-------- 6 files changed, 75 insertions(+), 114 deletions(-) diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index 3575db0..9d953d5 100644 --- a/public/locales/de/translation.json +++ b/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", diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 5a98be8..60365be 100644 --- a/public/locales/en/translation.json +++ b/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", diff --git a/src/Components/SideMenu/index.js b/src/Components/SideMenu/index.js index b875ac8..b63b051 100644 --- a/src/Components/SideMenu/index.js +++ b/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: , + key: Constants.ROUTE_PATHS.PAYMENT_PLAN, + }); + items.push({ label: sideBarContext.username, icon: , @@ -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 (
- {sideBarContext.accountPlanExpiry !== undefined && + navigate(item.key)} + items={getSecondMenuItems()} + /> +
+ + ); +} + +/* + 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 && ( )} - - navigate(item.key)} - items={getSecondMenuItems()} - /> - - - ); -} +*/ diff --git a/src/Pages/Authentication/SignUp.js b/src/Pages/Authentication/SignUp.js index 617d3ea..25c2e72 100644 --- a/src/Pages/Authentication/SignUp.js +++ b/src/Pages/Authentication/SignUp.js @@ -131,11 +131,12 @@ function AccountDetails({ t, form }) { ); } -function ChoosenProduct({ t, paymentPlan }) { +export function ChoosenProduct({ t, paymentPlan, extra }) { return ( {Constants.APP_NAME} - {Constants.PAYMENT_PLAN[paymentPlan].name} diff --git a/src/Pages/PaymentPlan/index.js b/src/Pages/PaymentPlan/index.js index eb6327d..825fddf 100644 --- a/src/Pages/PaymentPlan/index.js +++ b/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 ( - } - loading={isRequestingBillingDetails} - onClick={() => { - setIsRequestingBillingDetails(true); + <> + {notificationContextHolder} - myFetch({ - method: "GET", - url: "/payment/portal", - }) - .then((response) => { - console.log("response", response); + } + 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")} - - } - > - - - {Constants.PAYMENT_PLAN[appContext.paymentPlan].name} - - - <> - {t("paymentPlan.contentsOfSubscription.maxEmployees")}{" "} - {Constants.PAYMENT_PLAN[appContext.paymentPlan].maxEmployees} -
- {t( - "paymentPlan.contentsOfSubscription.calendarMaxFutureBookingDays" - )} - :{" "} - { - Constants.PAYMENT_PLAN[appContext.paymentPlan] - .calendarMaxFutureBookingDays - } -
- - - - + .then((response) => (window.location.href = response.url)) + .catch(() => { + setIsRequestingBillingDetails(false); + showUnkownErrorNotification(notificationApi, t); + }); + }} + > + {t("paymentPlan.buttonUpdateBillingDetails")} + + } + /> + ); } diff --git a/src/utils.js b/src/utils.js index 0b62a6a..41d1af7 100644 --- a/src/utils.js +++ b/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 €", - }, - }, }, ], };