KK
/
customer-dashboard
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

trial ended

master
alex 2024-03-31 13:30:37 +02:00
parent 6694a48b44
commit 625b0d2b83
6 changed files with 112 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/locales/de/translation.json
View File

@ -129,6 +129,7 @@
"feedback": "Feedback",
"paymentPlan": "Zahlungsplan",
"paymentPlanTrailingDaysLeft": "{{daysLeft}} {{dayUnit}} verbleibend",
"paymentPlanTrailingEnded": "Demo abgelaufen",
"paymentPlanUpgradeButton": "Jetzt upgraden"
},
"dashboard": {
@ -526,6 +527,7 @@
"demoEndsIn": "Die Testversion endet in",
"selectPlanToAccessFullFeatures": "Wählen Sie einen Plan, um auf alle Funktionen zuzugreifen."
},
"alertTrialEnded": "Ihre Testversion ist abgelaufen. Bitte wählen Sie einen Plan, um unsere Dienste weiterhin nutzen zu können.",
"alertPlanCancelled": "Ihr Plan wurde gekündigt. Am Ende des Abrechnungszeitraums müssen Sie einen neuen Plan auswählen, um unsere Dienste weiterhin nutzen zu können.",
"features": [
{

2
public/locales/en/translation.json
View File

@ -129,6 +129,7 @@
"feedback": "Feedback",
"paymentPlan": "Payment plan",
"paymentPlanTrailingDaysLeft": "{{daysLeft}} {{dayUnit}} left",
"paymentPlanTrailingEnded": "Trial period ended",
"paymentPlanUpgradeButton": "Upgrade now"
},
"dashboard": {
@ -535,6 +536,7 @@
"demoEndsIn": "Demo ends in",
"selectPlanToAccessFullFeatures": "Select a plan to access all features."
},
"alertTrialEnded": "Trial period ended. Please select a plan to continue using our services.",
"alertPlanCancelled": "Your plan has been cancelled. At the end of the billing period, you need to select a new plan to continue using our services.",
"features": [
{

90
src/Components/AppRoutes/index.js
View File

@ -4,6 +4,10 @@ import { lazy } from "react";
import { MySupsenseFallback } from "../MySupsenseFallback";
import { AuthenticationMethod } from "../../Pages/Authentication";
import Verification from "../../Pages/Verification";
import {
hasTrailEnded,
useSideBarContext,
} from "../../Contexts/SideBarContext";
// Lazy-loaded components
const Authentication = lazy(() => import("../../Pages/Authentication"));
@ -127,6 +131,8 @@ export function VerificationRoutes() {
}
export function AppRoutes({ setUserSession }) {
const sideBarContext = useSideBarContext();
return (
<Routes>
<Route
@ -138,50 +144,54 @@ export function AppRoutes({ setUserSession }) {
}
/>
<Route
path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.SETTINGS}`}
element={
<MySupsenseFallback>
<StoreSettings />
</MySupsenseFallback>
}
/>
{!hasTrailEnded(sideBarContext.paymentPlanTrialEnd) && (
<>
<Route
path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.SETTINGS}`}
element={
<MySupsenseFallback>
<StoreSettings />
</MySupsenseFallback>
}
/>
<Route
path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.EMPLOYEES}`}
element={
<MySupsenseFallback>
<StoreEmployees />
</MySupsenseFallback>
}
/>
<Route
path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.EMPLOYEES}`}
element={
<MySupsenseFallback>
<StoreEmployees />
</MySupsenseFallback>
}
/>
<Route
path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.SERVICES}`}
element={
<MySupsenseFallback>
<StoreServices />
</MySupsenseFallback>
}
/>
<Route
path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.SERVICES}`}
element={
<MySupsenseFallback>
<StoreServices />
</MySupsenseFallback>
}
/>
<Route
path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.CALENDAR}`}
element={
<MySupsenseFallback>
<StoreCalendar />
</MySupsenseFallback>
}
/>
<Route
path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.CALENDAR}`}
element={
<MySupsenseFallback>
<StoreCalendar />
</MySupsenseFallback>
}
/>
<Route
path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${Constants.ROUTE_PATHS.STORE.CALENDAR_AUTH}/:status/`}
element={
<MySupsenseFallback>
<StoreCalendarAuth />
</MySupsenseFallback>
}
/>
<Route
path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${Constants.ROUTE_PATHS.STORE.CALENDAR_AUTH}/:status/`}
element={
<MySupsenseFallback>
<StoreCalendarAuth />
</MySupsenseFallback>
}
/>
</>
)}
<Route
path={Constants.ROUTE_PATHS.PAYMENT_PLAN}

40
src/Components/SideMenu/index.js
View File

@ -20,7 +20,11 @@ import {
isDevelopmentEnv,
} from "../../utils";
import { useTranslation } from "react-i18next";
import { useSideBarContext } from "../../Contexts/SideBarContext";
import {
getDaysLeft,
hasTrailEnded,
useSideBarContext,
} from "../../Contexts/SideBarContext";
import { useStoresContext } from "../../Contexts/StoresContext";
import MyAppLogo from "../MyAppLogo";
@ -57,12 +61,15 @@ export function SideMenuContent({
type: "group",
};
const isDisabled = hasTrailEnded(sideBarContext.paymentPlanTrialEnd);
storesContext.stores.forEach((store) => {
let groupStore = {
label: store.name,
icon: <ShopOutlined />,
children: [],
key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}`,
disabled: isDisabled,
};
if (sideBarContext.permissions.includes("settings")) {
@ -70,6 +77,7 @@ export function SideMenuContent({
label: t("sideMenu.store.settings"),
icon: <SettingOutlined />,
key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.SETTINGS}`,
disabled: isDisabled,
});
}
@ -78,6 +86,7 @@ export function SideMenuContent({
label: t("sideMenu.store.employees"),
icon: <TeamOutlined />,
key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.EMPLOYEES}`,
disabled: isDisabled,
});
}
@ -86,6 +95,7 @@ export function SideMenuContent({
label: t("sideMenu.store.services"),
icon: <ScissorOutlined />,
key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.SERVICES}`,
disabled: isDisabled,
});
}
@ -94,6 +104,7 @@ export function SideMenuContent({
label: t("sideMenu.store.calendar"),
icon: <CalendarOutlined />,
key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.CALENDAR}`,
disabled: isDisabled,
});
}
@ -174,10 +185,7 @@ export function SideMenuContent({
}
}, [location.pathname]);
const daysLeft = Math.floor(
(new Date(sideBarContext.paymentPlanTrialEnd) - new Date()) /
(1000 * 60 * 60 * 24)
);
const daysLeft = getDaysLeft(sideBarContext.paymentPlanTrialEnd);
return (
<div
@ -238,7 +246,11 @@ export function SideMenuContent({
{sideBarContext.permissions.includes("paymentPlan") &&
showPaymentPlanInfoBanner && (
<Card
style={{ backgroundColor: AppStyle.colors.primary, margin: 8 }}
style={{
backgroundColor:
daysLeft > 3 ? AppStyle.colors.primary : "#e74c3c",
margin: 8,
}}
styles={{ body: { padding: 10 } }}
>
<Flex justify="center" align="center">
@ -246,13 +258,15 @@ export function SideMenuContent({
level={5}
style={{ color: "#fff", textAlign: "center" }}
>
{t("sideMenu.paymentPlanTrailingDaysLeft", {
daysLeft: daysLeft,
dayUnit:
daysLeft > 1
? t("common.unit.days")
: t("common.unit.day"),
})}
{daysLeft > 0
? t("sideMenu.paymentPlanTrailingDaysLeft", {
daysLeft: daysLeft,
dayUnit:
daysLeft > 1 || daysLeft === 0
? t("common.unit.days")
: t("common.unit.day"),
})
: t("sideMenu.paymentPlanTrailingEnded")}
</Typography.Title>
</Flex>

13
src/Contexts/SideBarContext.js
View File

@ -49,3 +49,16 @@ export default function SideBarProvider({ children, options }) {
</SideBarContext.Provider>
);
}
// used to disabled the store menu in the SideBar, the store routes in AppRoutes and change the color of the trail end popup in the SideBar
export function getDaysLeft(paymentPlanTrialEnd) {
return Math.floor(
(new Date(paymentPlanTrialEnd) - new Date()) / (1000 * 60 * 60 * 24)
);
}
export function hasTrailEnded(paymentPlanTrialEnd) {
if (!paymentPlanTrialEnd) return false;
return getDaysLeft(paymentPlanTrialEnd) <= 0;
}

22
src/Pages/PaymentPlan/index.js
View File

@ -25,6 +25,7 @@ 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";
import { getDaysLeft } from "../../Contexts/SideBarContext";
const { useBreakpoint } = Grid;
@ -78,10 +79,23 @@ export default function PaymentPlan() {
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)
);
const daysLeft = getDaysLeft(requestData.payment_plan_trial_end);
if (daysLeft <= 0) {
return (
<Alert
message={
<Typography.Text>
{t("paymentPlan.alertTrialEnded")}
</Typography.Text>
}
type="warning"
showIcon
closable
style={{ marginBottom: 12 }}
/>
);
}
return (
<Alert