{t("sideMenu.paymentPlanTrailingDaysLeft", {
- daysLeft: accountPlanExpiry,
+ daysLeft: daysLeft,
dayUnit:
- accountPlanExpiry > 1
+ daysLeft > 1
? t("common.unit.days")
: t("common.unit.day"),
})}
diff --git a/src/Pages/PaymentPlan/index.js b/src/Pages/PaymentPlan/index.js
index 6729865..fb3b667 100644
--- a/src/Pages/PaymentPlan/index.js
+++ b/src/Pages/PaymentPlan/index.js
@@ -10,25 +10,26 @@ import {
Grid,
Skeleton,
notification,
+ Popconfirm,
+ Tag,
} from "antd";
-import { useAppContext } from "../../Contexts/AppContext";
import {
AppStyle,
FormatDatetime,
myFetch,
showUnkownErrorNotification,
} from "../../utils";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
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";
+import CountUp from "react-countup";
const { useBreakpoint } = Grid;
export default function PaymentPlan() {
const { t } = useTranslation();
- const appContext = useAppContext();
const [notificationApi, notificationContextHolder] =
notification.useNotification();
@@ -62,8 +63,7 @@ export default function PaymentPlan() {
setSelectedBillingPeriod(data.payment_plan_interval);
}
})
- .catch((error) => {
- console.log(error);
+ .catch(() => {
setIsRequesting(false);
showUnkownErrorNotification(notificationApi, t);
});
@@ -71,19 +71,31 @@ export default function PaymentPlan() {
useEffect(() => fetchPaymentPlan(), []);
- const showAlert = () => {
+ const showAlertTrialEnds = () => {
if (
!isRequesting &&
requestData.payment_plan === 0 &&
requestData.payment_plan_trial_end &&
!requestData.payment_plan_canceled_at
) {
+ const daysLeft = Math.floor(
+ (new Date(requestData.payment_plan_trial_end) - new Date()) /
+ (1000 * 60 * 60 * 24)
+ );
+
return (
- Ihre Demo endet in 7 Tagen. Jetzt einen Plan auswählen, um
- den vollen Funktionsumfang zu nutzen.
+ {t("paymentPlan.alertDemoEndsIn.demoEndsIn")}{" "}
+
+ {daysLeft}{" "}
+ {daysLeft === 1
+ ? t("common.unit.day")
+ : t("common.unit.daysLong")}
+
+ .{" "}
+ {t("paymentPlan.alertDemoEndsIn.selectPlanToAccessFullFeatures")}
}
type="warning"
@@ -95,34 +107,104 @@ export default function PaymentPlan() {
}
};
+ const showAlertPlanCancelled = () => {
+ if (!isRequesting && requestData.payment_plan_canceled_at) {
+ return (
+
+ {t("paymentPlan.alertPlanCancelled", {
+ date: FormatDatetime(requestData.payment_plan_canceled_at),
+ })}
+
+ }
+ type="warning"
+ showIcon
+ closable
+ style={{ marginBottom: 12 }}
+ />
+ );
+ }
+ };
+
+ const percentageDiscount =
+ requestData.prices.length > 0
+ ? Math.round(
+ 100 -
+ (100 / (requestData.prices[0].unit_amount * 12)) *
+ requestData.prices[1].unit_amount
+ )
+ : 0;
+
+ const handleButtonBuyPlan = () => {
+ setRequestingCheckout(true);
+
+ myFetch({
+ method: "POST",
+ url: "/payment/checkout",
+ body: {
+ lookupKey: `za-basic-${
+ selectedBillingPeriod === 0 ? "monthly" : "yearly"
+ }`,
+ },
+ notificationApi,
+ t,
+ })
+ .then((data) => {
+ if (data.url) {
+ window.location.href = data.url;
+ return;
+ }
+
+ if (data.status === "ok") {
+ fetchPaymentPlan();
+ setRequestingCheckout(false);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ setRequestingCheckout(false);
+ });
+ };
+
+ const ButtonBuyPlan = ({ onClick }) => {
+ return (
+
+ );
+ };
+
return (
<>
{notificationContextHolder}
- {showAlert()}
+ {showAlertTrialEnds()}
+ {showAlertPlanCancelled()}
-
+
-
-
-
- Unbegrenzte Terminanzahl
-
-
-
-
-
- Bis zu 20 Mitarbeiter
-
-
-
-
-
- Buchungen bis zu 6 Wochen im Voraus
-
-
+ {t("paymentPlan.features", { returnObjects: true }).map(
+ (feature, index) => (
+
+
+
+ }}
+ />
+
+
+ )
+ )}
@@ -140,12 +222,12 @@ export default function PaymentPlan() {
(requestData.payment_plan_canceled_at === undefined ? (
) : (
-
+
))
}
onClick={() => setSelectedBillingPeriod(0)}
>
- Monatlich
+ {t("paymentPlan.buttonMonthly")}
)}
@@ -160,12 +242,29 @@ export default function PaymentPlan() {
(requestData.payment_plan_canceled_at === undefined ? (
) : (
-
+
))
}
onClick={() => setSelectedBillingPeriod(1)}
>
- Jährlich
+
+ {t("paymentPlan.buttonYearly")}
+
+ {requestData.payment_plan_interval !== 1 && (
+
+ -
+ 10
+ ? percentageDiscount - 10
+ : 0
+ }
+ end={percentageDiscount}
+ />{" "}
+ %
+
+ )}
+
)}
@@ -197,74 +296,56 @@ export default function PaymentPlan() {
level={screenBreakpoint.xs ? 3 : 2}
style={{ color: "#fff" }}
>
- Unternehmensplan
+ {t("paymentPlan.businessPlan")}
{isRequesting ? (
) : (
-
+ requestData.payment_plan_interval ? (
+
+ ) : requestData.payment_plan === 0 ? (
+ handleButtonBuyPlan()} />
+ ) : (
+ handleButtonBuyPlan()}
+ >
+
+
+ )}
+
)}
@@ -296,18 +377,40 @@ export default function PaymentPlan() {
- /monatlich
+ /{t("paymentPlan.monthly")}
- {selectedBillingPeriod === requestData.payment_plan &&
+ {selectedBillingPeriod === requestData.payment_plan_interval &&
requestData.payment_plan_canceled_at !== undefined && (
- Gekündigt am{" "}
- {FormatDatetime(requestData.payment_plan_canceled_at)} Uhr
+ {t("paymentPlan.cancelledOn", {
+ date: FormatDatetime(
+ requestData.payment_plan_canceled_at
+ ),
+ })}
+
+
+ )}
+
+ {selectedBillingPeriod === 1 &&
+ requestData.payment_plan_interval !== 1 && (
+
+
+ {t("paymentPlan.changeToAnnualPayment")}
+
+ {t("paymentPlan.saveAmount", {
+ amount:
+ requestData.prices[0].unit_amount * 12 -
+ requestData.prices[1].unit_amount,
+ })}
+
)}