From dac70b358a3211b3af47f75bd7532161bd495c15 Mon Sep 17 00:00:00 2001 From: alex Date: Sat, 24 Feb 2024 07:33:05 +0100 Subject: [PATCH] payment plan settings --- public/locales/de/translation.json | 5 +-- public/locales/en/translation.json | 9 ++--- src/App.js | 4 +++ src/Components/MyFormInputs/index.js | 5 +-- src/Components/SideMenu/index.js | 51 ++++++++++++++++++++++++++-- src/Contexts/AppContext.js | 11 ++++++ src/Contexts/SideBarContext.js | 26 ++++++++++---- src/Pages/Authentication/SignUp.js | 10 ++++-- src/Pages/Store/Employees/index.js | 2 +- src/utils.js | 17 ---------- 10 files changed, 102 insertions(+), 38 deletions(-) diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index 33c103e..07d937b 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -126,7 +126,9 @@ }, "support": "Unterstützung", "feedback": "Feedback", - "paymentPlan": "Zahlungsplan" + "paymentPlan": "Zahlungsplan", + "paymentPlanTrailingDaysLeft": "{{daysLeft}} {{dayUnit}} verbleibend", + "paymentPlanUpgradeButton": "Jetzt upgraden" }, "employees": { "pageTitle": "Mitarbeiter", @@ -184,7 +186,6 @@ "choosenProduct": { "title": "Ausgewähltes Produkt", "products": [ - {}, { "price": "9,99 € / Monat", "featuresCount": 9, diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 12f348e..d404ba5 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -20,8 +20,8 @@ "hour": "hour", "minutes": "minutes", "minute": "minute", - "days": "Days", - "day": "Day", + "days": "days", + "day": "day", "separator": "and" }, "failed": "Failed", @@ -126,7 +126,9 @@ }, "support": "Support", "feedback": "Feedback", - "paymentPlan": "Payment plan" + "paymentPlan": "Payment plan", + "paymentPlanTrailingDaysLeft": "{{daysLeft}} {{dayUnit}} left", + "paymentPlanUpgradeButton": "Upgrade now" }, "employees": { "pageTitle": "Employees", @@ -184,7 +186,6 @@ "choosenProduct": { "title": "Choosen product", "products": [ - {}, { "price": "9,99 € / month", "featuresCount": 9, diff --git a/src/App.js b/src/App.js index fde0596..d1638e6 100644 --- a/src/App.js +++ b/src/App.js @@ -132,6 +132,9 @@ 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, }} > @@ -139,6 +142,7 @@ export function App() { diff --git a/src/Components/MyFormInputs/index.js b/src/Components/MyFormInputs/index.js index 8397a0e..5950fcd 100644 --- a/src/Components/MyFormInputs/index.js +++ b/src/Components/MyFormInputs/index.js @@ -134,10 +134,7 @@ export function MyCalendarMaxFutureBookingDaysFormInput({ { let items = []; @@ -118,7 +124,7 @@ export function SideMenuContent({ ); } - if (sideBarContext.permissions.includes("paymentPlan")) { + if (!showPaymentPlanInfoBanner) { items.push({ label: t("sideMenu.paymentPlan"), icon: , @@ -162,6 +168,17 @@ export function SideMenuContent({ } }, [location.pathname]); + const calculateExpiry = () => { + const currentDate = new Date(); + const expiryDate = new Date(sideBarContext.paymentPlanTrialEnd * 1000); + const diffTime = Math.abs(expiryDate - currentDate); + const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + + return diffDays; + }; + + const accountPlanExpiry = calculateExpiry(); + return (
+ {showPaymentPlanInfoBanner && ( + + + + {t("sideMenu.paymentPlanTrailingDaysLeft", { + daysLeft: accountPlanExpiry, + dayUnit: + accountPlanExpiry > 1 + ? t("common.unit.days") + : t("common.unit.day"), + })} + + + + + + )} + {}, + paymentPlanSettings: { + name: "", + maxEmployees: 0, + calendarMaxFutureBookingDays: 0, + }, + setPaymentPlanSettings: () => {}, }; const AppContext = createContext(preview); @@ -11,12 +17,17 @@ export const useAppContext = () => useContext(AppContext); export function AppProvider({ children, options }) { const [paymentPlan, setPaymentPlan] = useState(options.paymentPlan); + const [paymentPlanSettings, setPaymentPlanSettings] = useState( + options.paymentPlanSettings + ); return ( {children} diff --git a/src/Contexts/SideBarContext.js b/src/Contexts/SideBarContext.js index 87ed933..dc55605 100644 --- a/src/Contexts/SideBarContext.js +++ b/src/Contexts/SideBarContext.js @@ -5,8 +5,12 @@ const preview = { setUsername: () => {}, permissions: [], setPermissions: () => {}, - accountPlanExpiry: "", - setAccountPlanExpiry: () => {}, + paymentPlanStatus: "", + setPaymentPlanStatus: () => {}, + paymentPlanTrialEnd: "", + setPaymentPlanTrialEnd: () => {}, + paymentPlanCanceledAt: "", + setPaymentPlanCanceledAt: () => {}, }; const SideBarContext = createContext(preview); @@ -16,8 +20,14 @@ export const useSideBarContext = () => useContext(SideBarContext); export default function SideBarProvider({ children, options }) { const [username, setUsername] = useState(options.username); const [permissions, setPermissions] = useState(options.permissions); - const [accountPlanExpiry, setAccountPlanExpiry] = useState( - options.accountPlanExpiry + const [paymentPlanStatus, setPaymentPlanStatus] = useState( + options.paymentPlanStatus + ); + const [paymentPlanTrialEnd, setPaymentPlanTrialEnd] = useState( + options.paymentPlanTrialEnd + ); + const [paymentPlanCanceledAt, setPaymentPlanCanceledAt] = useState( + options.paymentPlanCanceledAt ); return ( @@ -27,8 +37,12 @@ export default function SideBarProvider({ children, options }) { setUsername, permissions, setPermissions, - accountPlanExpiry, - setAccountPlanExpiry, + paymentPlanStatus, + setPaymentPlanStatus, + paymentPlanTrialEnd, + setPaymentPlanTrialEnd, + paymentPlanCanceledAt, + setPaymentPlanCanceledAt, }} > {children} diff --git a/src/Pages/Authentication/SignUp.js b/src/Pages/Authentication/SignUp.js index 74095d4..9765246 100644 --- a/src/Pages/Authentication/SignUp.js +++ b/src/Pages/Authentication/SignUp.js @@ -34,6 +34,7 @@ import { MyRecaptcha, PrivacyPolicyCheckbox } from "."; import MyAppLogo from "../../Components/MyAppLogo"; import { CheckOutlined } from "@ant-design/icons"; import { RequestState } from "../../Components/MyRequestStateItem"; +import { useAppContext } from "../../Contexts/AppContext"; /* const SignUpStep = { SIGN_UP: 1, @@ -131,6 +132,10 @@ function AccountDetails({ t, form }) { } export function ChoosenProduct({ t, paymentPlan, extra }) { + const appContext = useAppContext(); + + console.log(appContext.paymentPlanSettings); + return ( - {Constants.APP_NAME} - {Constants.PAYMENT_PLAN[paymentPlan].name} + {Constants.APP_NAME} - {appContext.paymentPlanSettings.name} @@ -173,6 +178,7 @@ export function ChoosenProduct({ t, paymentPlan, extra }) { function CostSummary({ notificationApi, paymentPlan, form }) { const { t, i18n } = useTranslation(); + const appContext = useAppContext(); const [isRequesting, setIsRequesting] = useState(RequestState.INIT); const recaptchaRef = useRef(null); @@ -290,7 +296,7 @@ function CostSummary({ notificationApi, paymentPlan, form }) { marginBottom: 12, }} > - {Constants.APP_NAME} - {Constants.PAYMENT_PLAN[paymentPlan].name} + {Constants.APP_NAME} - {appContext.paymentPlanSettings.name}
diff --git a/src/Pages/Store/Employees/index.js b/src/Pages/Store/Employees/index.js index 0c39e75..e002c76 100644 --- a/src/Pages/Store/Employees/index.js +++ b/src/Pages/Store/Employees/index.js @@ -183,7 +183,7 @@ export default function StoreEmployees() { setModalOptions={setAddEditEmployeeModalOptions} fetchEmployees={fetchEmployees} disabled={ - Constants.PAYMENT_PLAN[appContext.paymentPlan].maxEmployees <= + appContext.paymentPlanSettings.maxEmployees <= requestData.employees.length } /> diff --git a/src/utils.js b/src/utils.js index e842948..5e4657d 100644 --- a/src/utils.js +++ b/src/utils.js @@ -110,23 +110,6 @@ export const Constants = { INIT_PAYMENT: 5, }, SUPPORT_EMAIL: process.env.REACT_APP_SUPPORT_EMAIL, - PAYMENT_PLAN: [ - { - name: "Demo", - maxEmployees: 5, - calendarMaxFutureBookingDays: 14, - }, - { - name: "Basic", - maxEmployees: 15, - calendarMaxFutureBookingDays: 60, - }, - { - name: "Premium", - maxEmployees: 50, // temporary - calendarMaxFutureBookingDays: 365, // temporary - }, - ], }; export function isEmailValid(email) {