diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index b147b9a..0745e73 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -152,7 +152,7 @@ "privacyPolicyLink": "Datenschutzerklärung", "loginLink": "Jetzt anmelden", "signUpLink": "Jetzt registrieren", - "languageSwitchTo": "Switch to", + "languageSwitchTo": "Switch language to", "login": { "button": "Anmelden", "forgotPassword": "Passwort vergessen?", diff --git a/src/App.js b/src/App.js index 77be02f..23052a2 100644 --- a/src/App.js +++ b/src/App.js @@ -132,7 +132,6 @@ export function App() { options={{ username: appUserData.user.username, permissions: appUserData.permissions, - paymentPlanStatus: appUserData.user.payment_plan_status, paymentPlanTrialEnd: appUserData.user.payment_plan_trial_end, paymentPlanCanceledAt: appUserData.user.payment_plan_canceled_at, }} diff --git a/src/Components/AppRoutes/index.js b/src/Components/AppRoutes/index.js index fdbc18c..8f7f506 100644 --- a/src/Components/AppRoutes/index.js +++ b/src/Components/AppRoutes/index.js @@ -7,7 +7,6 @@ import Verification from "../../Pages/Verification"; // Lazy-loaded components const Authentication = lazy(() => import("../../Pages/Authentication")); -const SignUp = lazy(() => import("../../Pages/Authentication/SignUp")); const CheckoutSuccess = lazy(() => import("../../Pages/Authentication/CheckoutSuccess") ); diff --git a/src/Components/SideMenu/index.js b/src/Components/SideMenu/index.js index 304eb62..d3a9128 100644 --- a/src/Components/SideMenu/index.js +++ b/src/Components/SideMenu/index.js @@ -106,9 +106,8 @@ export function SideMenuContent({ }; const showPaymentPlanInfoBanner = - sideBarContext.paymentPlanStatus === "trialing" && - sideBarContext.paymentPlanTrialEnd !== null && - sideBarContext.paymentPlanCanceledAt !== null; + sideBarContext.paymentPlanTrialEnd !== undefined || + sideBarContext.paymentPlanCanceledAt !== undefined; const getSecondMenuItems = () => { let items = []; @@ -177,7 +176,8 @@ export function SideMenuContent({ const calculateExpiry = () => { const currentDate = new Date(); - const expiryDate = new Date(sideBarContext.paymentPlanTrialEnd * 1000); + const expiryDate = new Date(sideBarContext.paymentPlanTrialEnd); + const diffTime = Math.abs(expiryDate - currentDate); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); diff --git a/src/Pages/PaymentPlan/index.js b/src/Pages/PaymentPlan/index.js index 53cc5be..6729865 100644 --- a/src/Pages/PaymentPlan/index.js +++ b/src/Pages/PaymentPlan/index.js @@ -1,11 +1,30 @@ -import { Button, notification } from "antd"; +import { + Alert, + Button, + Card, + Space, + Flex, + Row, + Col, + Typography, + Grid, + Skeleton, + notification, +} from "antd"; import { useAppContext } from "../../Contexts/AppContext"; -import { myFetch, showUnkownErrorNotification } from "../../utils"; +import { + AppStyle, + FormatDatetime, + myFetch, + showUnkownErrorNotification, +} from "../../utils"; import { useTranslation } from "react-i18next"; -import { CreditCardOutlined } from "@ant-design/icons"; -import { useState } from "react"; -import PageInDevelopment from "../PageInDevelopment"; -// import { ChoosenProduct } from "../Authentication/SignUp"; +import { CheckOutlined, CloseOutlined } from "@ant-design/icons"; +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"; + +const { useBreakpoint } = Grid; export default function PaymentPlan() { const { t } = useTranslation(); @@ -14,13 +33,287 @@ export default function PaymentPlan() { const [notificationApi, notificationContextHolder] = notification.useNotification(); - const [isRequestingBillingDetails, setIsRequestingBillingDetails] = - useState(false); + const screenBreakpoint = useBreakpoint(); + + const [isRequesting, setIsRequesting] = useState(true); + const [requestData, setRequestData] = useState({ + payment_plan: 0, + payment_plan_interval: 0, + prices: [], + payment_plan_trial_end: undefined, + payment_plan_canceled_at: undefined, + }); + const [requestingCheckout, setRequestingCheckout] = useState(false); + + const [selectedBillingPeriod, setSelectedBillingPeriod] = useState(0); + + const fetchPaymentPlan = () => { + myFetch({ + url: "/payment", + method: "GET", + notificationApi, + t, + }) + .then((data) => { + setRequestData(data); + setIsRequesting(false); + + if (data.payment_plan_interval !== null) { + setSelectedBillingPeriod(data.payment_plan_interval); + } + }) + .catch((error) => { + console.log(error); + setIsRequesting(false); + showUnkownErrorNotification(notificationApi, t); + }); + }; + + useEffect(() => fetchPaymentPlan(), []); + + const showAlert = () => { + if ( + !isRequesting && + requestData.payment_plan === 0 && + requestData.payment_plan_trial_end && + !requestData.payment_plan_canceled_at + ) { + return ( + + Ihre Demo endet in 7 Tagen. Jetzt einen Plan auswählen, um + den vollen Funktionsumfang zu nutzen. + + } + type="warning" + closable + showIcon + style={{ marginBottom: 12 }} + /> + ); + } + }; return ( <> {notificationContextHolder} - + + {showAlert()} + + + + + + + + + Unbegrenzte Terminanzahl + + + + + + Bis zu 20 Mitarbeiter + + + + + + Buchungen bis zu 6 Wochen im Voraus + + + + + + + + + {isRequesting ? ( + + ) : ( + + )} + + {isRequesting ? ( + + ) : ( + + )} + + + + + +
+ +
+ + + + Unternehmensplan + + + {isRequesting ? ( + + ) : ( + + )} + + + + {isRequesting ? ( + + ) : ( + + {`${ + requestData.prices.find( + (price) => + price.lookup_key === + `za-basic-${ + selectedBillingPeriod === 0 ? "monthly" : "yearly" + }` + ).unit_amount / (selectedBillingPeriod === 0 ? 1 : 12) + } €`} + + )} + + /monatlich + + + + + + {selectedBillingPeriod === requestData.payment_plan && + requestData.payment_plan_canceled_at !== undefined && ( + + + Gekündigt am{" "} + {FormatDatetime(requestData.payment_plan_canceled_at)} Uhr + + + )} + + + ); } diff --git a/src/Pages/PaymentPlan/rocket_launch_FILL1_wght400_GRAD0_opsz24.svg b/src/Pages/PaymentPlan/rocket_launch_FILL1_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..874955e --- /dev/null +++ b/src/Pages/PaymentPlan/rocket_launch_FILL1_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Pages/PaymentPlan/task_alt_FILL0_wght400_GRAD0_opsz24.svg b/src/Pages/PaymentPlan/task_alt_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..41850ce --- /dev/null +++ b/src/Pages/PaymentPlan/task_alt_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 6f02e7d..79fd034 100644 --- a/src/index.js +++ b/src/index.js @@ -14,7 +14,7 @@ root.render(