Shared:Store:PaymentQuotasStore: move from common, rewrite to typescript and update using without auth store

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;
 

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;
 

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 } =

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));

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;

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;

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,

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;

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;

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,

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;

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) {

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[];
+};

packages/shared/store/PaymentQuotasStore.js

@@ -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;

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<void>;
+}
+
+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 };