From a3c039f7319bb847acb1938468e49bcf1e83b655 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Wed, 24 Jan 2024 15:12:59 +0300 Subject: [PATCH] Shared:Store:PaymentQuotasStore: move from common, rewrite to typescript and update using without auth store --- .../StandaloneComponents/BenefitsContainer.js | 8 +- .../payments/SaaS/BenefitsContainer.js | 4 +- .../payments/SaaS/PaymentContainer.js | 14 ++- .../payments/SaaS/PriceCalculation.js | 63 +++++------ .../SaaS/sub-components/CurrentUsersCount.js | 4 +- .../SelectTotalSizeContainer.js | 3 +- .../SelectUsersCountContainer.js | 4 +- .../sub-components/TotalTariffContainer.js | 3 +- packages/client/src/store/PaymentStore.js | 17 ++- packages/client/src/store/index.js | 5 +- packages/common/store/AuthStore.js | 6 +- packages/shared/api/portal/index.ts | 11 +- packages/shared/api/portal/types.ts | 21 ++++ packages/shared/store/PaymentQuotasStore.js | 76 ------------- packages/shared/store/PaymentQuotasStore.ts | 104 ++++++++++++++++++ 15 files changed, 199 insertions(+), 144 deletions(-) delete mode 100644 packages/shared/store/PaymentQuotasStore.js create mode 100644 packages/shared/store/PaymentQuotasStore.ts diff --git a/packages/client/src/components/StandaloneComponents/BenefitsContainer.js b/packages/client/src/components/StandaloneComponents/BenefitsContainer.js index 5eb1673264..2ea568a6d7 100644 --- a/packages/client/src/components/StandaloneComponents/BenefitsContainer.js +++ b/packages/client/src/components/StandaloneComponents/BenefitsContainer.js @@ -82,12 +82,8 @@ const BenefitsContainer = ({ isTrial, isEnterprise }) => { ); }; -export default inject(({ auth, currentQuotaStore }) => { - const { - paymentQuotasStore, - - isEnterprise, - } = auth; +export default inject(({ auth, currentQuotaStore, paymentQuotasStore }) => { + const { isEnterprise } = auth; const { portalPaymentQuotasFeatures } = paymentQuotasStore; diff --git a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js index 5b909b0297..6a864beca0 100644 --- a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js +++ b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js @@ -62,8 +62,8 @@ const BenefitsContainer = ({ t, features, theme }) => { ); }; -export default inject(({ auth }) => { - const { paymentQuotasStore, settingsStore } = auth; +export default inject(({ auth, paymentQuotasStore }) => { + const { settingsStore } = auth; const { theme } = settingsStore; const { portalPaymentQuotasFeatures } = paymentQuotasStore; diff --git a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/PaymentContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/PaymentContainer.js index 73a2610659..f90d643c40 100644 --- a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/PaymentContainer.js +++ b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/PaymentContainer.js @@ -336,12 +336,14 @@ const PaymentContainer = (props) => { }; export default inject( - ({ auth, currentQuotaStore, payments, currentTariffStatusStore }) => { - const { - paymentQuotasStore, - - settingsStore, - } = auth; + ({ + auth, + currentQuotaStore, + payments, + paymentQuotasStore, + currentTariffStatusStore, + }) => { + const { settingsStore } = auth; const { showText: expandArticle } = settingsStore; const { isFreeTariff, currentTariffPlanTitle, isNonProfit } = diff --git a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/PriceCalculation.js b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/PriceCalculation.js index e99ab12a87..a2d5f5eaf7 100644 --- a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/PriceCalculation.js +++ b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/PriceCalculation.js @@ -176,40 +176,41 @@ const PriceCalculation = ({ ); }; -export default inject(({ auth, payments, currentTariffStatusStore }) => { - const { - tariffsInfo, - setIsLoading, - setManagersCount, - maxAvailableManagersCount, +export default inject( + ({ auth, payments, paymentQuotasStore, currentTariffStatusStore }) => { + const { + tariffsInfo, + setIsLoading, + setManagersCount, + maxAvailableManagersCount, - managersCount, - isAlreadyPaid, - getPaymentLink, - canUpdateTariff, - } = payments; - const { theme } = auth.settingsStore; - const { paymentQuotasStore } = auth; + managersCount, + isAlreadyPaid, + getPaymentLink, + canUpdateTariff, + } = payments; + const { theme } = auth.settingsStore; - const { planCost } = paymentQuotasStore; - const { isNotPaidPeriod, isGracePeriod } = currentTariffStatusStore; + const { planCost } = paymentQuotasStore; + const { isNotPaidPeriod, isGracePeriod } = currentTariffStatusStore; - return { - canUpdateTariff, - isAlreadyPaid, - managersCount, + return { + canUpdateTariff, + isAlreadyPaid, + managersCount, - setManagersCount, - tariffsInfo, - theme, - setIsLoading, - maxAvailableManagersCount, + setManagersCount, + tariffsInfo, + theme, + setIsLoading, + maxAvailableManagersCount, - isGracePeriod, - isNotPaidPeriod, + isGracePeriod, + isNotPaidPeriod, - priceManagerPerMonth: planCost.value, - currencySymbol: planCost.currencySymbol, - getPaymentLink, - }; -})(observer(PriceCalculation)); + priceManagerPerMonth: planCost.value, + currencySymbol: planCost.currencySymbol, + getPaymentLink, + }; + } +)(observer(PriceCalculation)); diff --git a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/CurrentUsersCount.js b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/CurrentUsersCount.js index a3b3858093..720be8c8a5 100644 --- a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/CurrentUsersCount.js +++ b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/CurrentUsersCount.js @@ -49,8 +49,8 @@ const CurrentUsersCountContainer = (props) => { ); }; -export default inject(({ auth, currentQuotaStore }) => { - const { settingsStore, paymentQuotasStore } = auth; +export default inject(({ auth, currentQuotaStore, paymentQuotasStore }) => { + const { settingsStore } = auth; const { maxCountManagersByQuota } = currentQuotaStore; const { addedManagersCountTitle } = paymentQuotasStore; const { theme } = settingsStore; diff --git a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/SelectTotalSizeContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/SelectTotalSizeContainer.js index 175738c1e3..c7c5024dbc 100644 --- a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/SelectTotalSizeContainer.js +++ b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/SelectTotalSizeContainer.js @@ -43,8 +43,7 @@ const SelectTotalSizeContainer = ({ ); }; -export default inject(({ auth, payments }) => { - const { paymentQuotasStore } = auth; +export default inject(({ auth, paymentQuotasStore, payments }) => { const { usedTotalStorageSizeTitle } = paymentQuotasStore; const { theme } = auth.settingsStore; const { allowedStorageSizeByQuota } = payments; diff --git a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/SelectUsersCountContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/SelectUsersCountContainer.js index 50bfb7c8d3..dbbb3abf90 100644 --- a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/SelectUsersCountContainer.js +++ b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/SelectUsersCountContainer.js @@ -313,9 +313,7 @@ const SelectUsersCountContainer = ({ ); }; -export default inject(({ auth, payments }) => { - const { paymentQuotasStore } = auth; - +export default inject(({ paymentQuotasStore, payments }) => { const { isLoading, minAvailableManagersValue, diff --git a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/TotalTariffContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/TotalTariffContainer.js index 11ba106c6c..c104d7e6f2 100644 --- a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/TotalTariffContainer.js +++ b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/TotalTariffContainer.js @@ -123,8 +123,7 @@ const TotalTariffContainer = ({ ); }; -export default inject(({ auth, payments }) => { - const { paymentQuotasStore } = auth; +export default inject(({ auth, payments, paymentQuotasStore }) => { const { theme } = auth.settingsStore; const { isLoading, totalPrice, isNeedRequest, maxAvailableManagersCount } = payments; diff --git a/packages/client/src/store/PaymentStore.js b/packages/client/src/store/PaymentStore.js index d92e63488e..4d77cc2965 100644 --- a/packages/client/src/store/PaymentStore.js +++ b/packages/client/src/store/PaymentStore.js @@ -15,6 +15,7 @@ class PaymentStore { userStore = null; currentTariffStatusStore = null; currentQuotaStore = null; + paymentQuotasStore = null; salesEmail = ""; helpUrl = "https://helpdesk.onlyoffice.com"; @@ -41,10 +42,16 @@ class PaymentStore { isInitPaymentPage = false; isLicenseCorrect = false; - constructor(userStore, currentTariffStatusStore, currentQuotaStore) { + constructor( + userStore, + currentTariffStatusStore, + currentQuotaStore, + paymentQuotasStore + ) { this.userStore = userStore; this.currentTariffStatusStore = currentTariffStatusStore; this.currentQuotaStore = currentQuotaStore; + this.paymentQuotasStore = paymentQuotasStore; makeAutoObservable(this); } @@ -95,10 +102,9 @@ class PaymentStore { return; } - const { paymentQuotasStore } = authStore; const { setPayerInfo } = this.currentTariffStatusStore; const { addedManagersCount } = this.currentQuotaStore; - const { setPortalPaymentQuotas } = paymentQuotasStore; + const { setPortalPaymentQuotas } = this.paymentQuotasStore; const requests = [this.getSettingsPayment(), setPortalPaymentQuotas()]; @@ -281,7 +287,7 @@ class PaymentStore { }; getTotalCostByFormula = (value) => { - const costValuePerManager = authStore.paymentQuotasStore.planCost.value; + const costValuePerManager = this.paymentQuotasStore.planCost.value; return value * costValuePerManager; }; @@ -385,9 +391,8 @@ class PaymentStore { } setRangeStepByQuota = () => { - const { paymentQuotasStore } = authStore; const { stepAddingQuotaManagers, stepAddingQuotaTotalSize } = - paymentQuotasStore; + this.paymentQuotasStore; this.stepByQuotaForManager = stepAddingQuotaManagers; this.minAvailableManagersValue = this.stepByQuotaForManager; diff --git a/packages/client/src/store/index.js b/packages/client/src/store/index.js index 01672c1a58..2344b77729 100644 --- a/packages/client/src/store/index.js +++ b/packages/client/src/store/index.js @@ -5,6 +5,7 @@ import { bannerStore, currentTariffStatusStore, currentQuotaStore, + paymentQuotasStore, } from "@docspace/common/store/AuthStore"; import PaymentStore from "./PaymentStore"; import WizardStore from "./WizardStore"; @@ -55,7 +56,8 @@ const pluginStore = new PluginStore(authStore, selectedFolderStore, userStore); const paymentStore = new PaymentStore( userStore, currentTariffStatusStore, - currentQuotaStore + currentQuotaStore, + paymentQuotasStore ); const wizardStore = new WizardStore(); const setupStore = new SettingsSetupStore(tfaStore); @@ -238,6 +240,7 @@ const store = { bannerStore, currentTariffStatusStore, currentQuotaStore, + paymentQuotasStore, payments: paymentStore, wizard: wizardStore, diff --git a/packages/common/store/AuthStore.js b/packages/common/store/AuthStore.js index 211c8011da..5ad7cb3615 100644 --- a/packages/common/store/AuthStore.js +++ b/packages/common/store/AuthStore.js @@ -11,8 +11,6 @@ import { import { isAdmin } from "@docspace/shared/utils/common"; import { getCookie, setCookie } from "@docspace/shared/utils/cookie"; -import PaymentQuotasStore from "./PaymentQuotasStore"; - import { TenantStatus } from "@docspace/shared/enums"; import { COOKIE_EXPIRATION_YEAR } from "@docspace/shared/constants"; import { LANGUAGE } from "@docspace/shared/constants"; @@ -23,6 +21,7 @@ import { TfaStore } from "@docspace/shared/store/TfaStore"; import { BannerStore } from "@docspace/shared/store/BannerStore"; import { CurrentTariffStatusStore } from "@docspace/shared/store/CurrentTariffStatusStore"; import { CurrentQuotasStore } from "@docspace/shared/store/CurrentQuotaStore"; +import { PaymentQuotasStore } from "@docspace/shared/store/PaymentQuotasStore"; import { loginWithTfaCode } from "@docspace/shared/api/user"; @@ -30,6 +29,7 @@ export const userStore = new UserStore(); export const tfaStore = new TfaStore(); export const bannerStore = new BannerStore(); export const currentQuotaStore = new CurrentQuotasStore(); +export const paymentQuotasStore = new PaymentQuotasStore(); class AuthStore { userStore = null; @@ -55,8 +55,6 @@ class AuthStore { this.settingsStore = new SettingsStore(); - this.paymentQuotasStore = new PaymentQuotasStore(); - makeAutoObservable(this); const { socketHelper } = this.settingsStore; diff --git a/packages/shared/api/portal/index.ts b/packages/shared/api/portal/index.ts index 4bbf9e8142..3a5cc8e37a 100644 --- a/packages/shared/api/portal/index.ts +++ b/packages/shared/api/portal/index.ts @@ -1,6 +1,6 @@ import { EmployeeType } from "@docspace/shared/enums"; import { request } from "../client"; -import { TPortalQuota, TPortalTariff } from "./types"; +import { TPaymentQuota, TPortalQuota, TPortalTariff } from "./types"; export function getShortenedLink(link) { return request({ @@ -209,8 +209,13 @@ export function deletePortal(confirmKey = null) { return request(options); } -export function getPortalPaymentQuotas() { - return request({ method: "get", url: "/portal/payment/quotas" }); +export async function getPortalPaymentQuotas() { + const res = (await request({ + method: "get", + url: "/portal/payment/quotas", + })) as TPaymentQuota[]; + + return res; } export function getPortalTenantExtra(refresh) { diff --git a/packages/shared/api/portal/types.ts b/packages/shared/api/portal/types.ts index e801a1c0bf..4de0cff475 100644 --- a/packages/shared/api/portal/types.ts +++ b/packages/shared/api/portal/types.ts @@ -35,3 +35,24 @@ export type TPortalQuota = { trial: boolean; features: TFeature[]; }; + +export type TPaymentFeature = { + id: string; + value: number | boolean; + type: string; + priceTitle?: string; + image?: string; +}; + +export type TPaymentQuota = { + id: number; + title: string; + price: { + value: string; + currencySymbol: string; + }; + nonProfit: boolean; + free: boolean; + trial: boolean; + features: TPaymentFeature[]; +}; diff --git a/packages/shared/store/PaymentQuotasStore.js b/packages/shared/store/PaymentQuotasStore.js deleted file mode 100644 index e9878173ee..0000000000 --- a/packages/shared/store/PaymentQuotasStore.js +++ /dev/null @@ -1,76 +0,0 @@ -import { makeAutoObservable, runInAction } from "mobx"; -import api from "@docspace/shared/api"; - -const MANAGER = "manager"; -const TOTAL_SIZE = "total_size"; - -class PaymentQuotasStore { - portalPaymentQuotas = {}; - portalPaymentQuotasFeatures = []; - isLoaded = false; - - constructor() { - makeAutoObservable(this); - } - - setIsLoaded = (isLoaded) => { - this.isLoaded = isLoaded; - }; - - get planCost() { - if (this.portalPaymentQuotas.price) return this.portalPaymentQuotas.price; - else return { value: 0, currencySymbol: "" }; - } - - get stepAddingQuotaManagers() { - const result = this.portalPaymentQuotasFeatures.find( - (obj) => obj.id === MANAGER - ); - return result.value; - } - - get stepAddingQuotaTotalSize() { - const result = this.portalPaymentQuotasFeatures.find( - (obj) => obj.id === TOTAL_SIZE - ); - return result.value; - } - - get tariffTitle() { - return this.portalPaymentQuotas?.title; - } - - get usedTotalStorageSizeTitle() { - const result = this.portalPaymentQuotasFeatures.find( - (obj) => obj.id === TOTAL_SIZE - ); - return result.priceTitle; - } - get addedManagersCountTitle() { - const result = this.portalPaymentQuotasFeatures.find( - (obj) => obj.id === MANAGER - ); - return result.priceTitle; - } - - get tariffPlanTitle() { - return this.portalPaymentQuotas.title; - } - setPortalPaymentQuotas = async (t) => { - if (this.isLoaded) return; - - const res = await api.portal.getPortalPaymentQuotas(); - - if (!res) return; - - runInAction(() => { - this.portalPaymentQuotas = res[0]; - - this.portalPaymentQuotasFeatures = res[0].features; - }); - - this.setIsLoaded(true); - }; -} - -export default PaymentQuotasStore; diff --git a/packages/shared/store/PaymentQuotasStore.ts b/packages/shared/store/PaymentQuotasStore.ts new file mode 100644 index 0000000000..630522b5c1 --- /dev/null +++ b/packages/shared/store/PaymentQuotasStore.ts @@ -0,0 +1,104 @@ +import { makeAutoObservable, runInAction } from "mobx"; +import api from "../api"; +import { TPaymentFeature, TPaymentQuota } from "../api/portal/types"; +import { MANAGER, TOTAL_SIZE } from "../constants"; + +export interface IPaymentQuotasStore { + portalPaymentQuotas: TPaymentQuota; + portalPaymentQuotasFeatures: TPaymentFeature[]; + isLoaded: boolean; + setIsLoaded: (isLoaded: boolean) => void; + + planCost: + | { + value: string; + currencySymbol: string; + } + | { + value: number; + currencySymbol: string; + }; + stepAddingQuotaManagers: number | boolean | undefined; + stepAddingQuotaTotalSize: number | boolean | undefined; + tariffTitle: string; + usedTotalStorageSizeTitle: string | undefined; + addedManagersCountTitle: string | undefined; + tariffPlanTitle: string; + + setPortalPaymentQuotas: () => Promise; +} + +class PaymentQuotasStore { + portalPaymentQuotas: TPaymentQuota = {} as TPaymentQuota; + + portalPaymentQuotasFeatures: TPaymentFeature[] = []; + + isLoaded = false; + + constructor() { + makeAutoObservable(this); + } + + setIsLoaded = (isLoaded: boolean) => { + this.isLoaded = isLoaded; + }; + + get planCost() { + if (this.portalPaymentQuotas.price) return this.portalPaymentQuotas.price; + return { value: 0, currencySymbol: "" }; + } + + get stepAddingQuotaManagers() { + const result = this.portalPaymentQuotasFeatures.find( + (obj) => obj.id === MANAGER, + ); + return result?.value; + } + + get stepAddingQuotaTotalSize() { + const result = this.portalPaymentQuotasFeatures.find( + (obj) => obj.id === TOTAL_SIZE, + ); + return result?.value; + } + + get tariffTitle() { + return this.portalPaymentQuotas?.title; + } + + get usedTotalStorageSizeTitle() { + const result = this.portalPaymentQuotasFeatures.find( + (obj) => obj.id === TOTAL_SIZE, + ); + return result?.priceTitle; + } + + get addedManagersCountTitle() { + const result = this.portalPaymentQuotasFeatures.find( + (obj) => obj.id === MANAGER, + ); + return result?.priceTitle; + } + + get tariffPlanTitle() { + return this.portalPaymentQuotas.title; + } + + setPortalPaymentQuotas = async () => { + if (this.isLoaded) return; + + const res = await api.portal.getPortalPaymentQuotas(); + + if (!res) return; + + runInAction(() => { + this.portalPaymentQuotas = res[0]; + + this.portalPaymentQuotasFeatures = res[0].features; + }); + + this.setIsLoaded(true); + }; +} + +export { PaymentQuotasStore };