Web: Added getting payment price from api.

packages/client/src/pages/PortalSettings/categories/payments/index.js

@@ -37,13 +37,10 @@ const StyledBody = styled.div`
 `;
 const PaymentsPage = ({
   setQuota,
-  quota,
-  setTariffsInfo,
-  tariffsInfo,
-  organizationName,
   isStartup,
-  price,
   finalDate,
+  getPaymentPrices,
+  pricePerManager,
 }) => {
   const { t, ready } = useTranslation("Payments");
 
@@ -54,7 +51,7 @@ const PaymentsPage = ({
   useEffect(() => {
     (async () => {
       try {
-        await Promise.all([setQuota()]);
+        await Promise.all([setQuota(), getPaymentPrices()]);
       } catch (error) {
         toastr.error(error);
       }
@@ -91,12 +88,12 @@ const PaymentsPage = ({
         className="payments-info_managers-price"
       >
         <Trans t={t} i18nKey="StartPrice" ns="Payments">
-          {{ price: price }}
+          {{ price: pricePerManager }}
         </Trans>
       </Text>
 
       <div className="payments-info">
-        <PriceCalculation t={t} price={price} />
+        <PriceCalculation t={t} />
         <BenefitsContainer t={t} />
       </div>
 
@@ -112,20 +109,26 @@ PaymentsPage.propTypes = {
 export default inject(({ auth, payments }) => {
   const { setQuota, quota } = auth;
   const { organizationName } = auth.settingsStore;
-  const { setTariffsInfo, tariffsInfo } = payments;
+  const {
+    setTariffsInfo,
+    tariffsInfo,
+    pricePerManager,
+    getPaymentPrices,
+  } = payments;
 
   const isStartup = false;
-  const price = "30";
+
   const finalDate = "17 February 2022";
 
   return {
     setQuota,
+    getPaymentPrices,
     quota,
     organizationName,
     setTariffsInfo,
     tariffsInfo,
     isStartup,
-    price,
+    pricePerManager,
     finalDate,
   };
 })(withRouter(observer(PaymentsPage)));

packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js

@@ -58,13 +58,13 @@ const TotalTariffContainer = ({
   usersCount,
   maxUsersCount,
   maxSliderNumber,
-  price,
+  pricePerManager,
   isDisabled,
   theme,
 }) => {
   useEffect(() => {}, []);
 
-  const totalPrice = price * usersCount;
+  const totalPrice = pricePerManager * usersCount;
 
   const color = isDisabled ? { color: theme.text.disableColor } : {};
   const isNeedRequest = usersCount >= maxUsersCount;
@@ -73,7 +73,7 @@ const TotalTariffContainer = ({
     <StyledBody>
       <div className="total-tariff_user">
         <Text fontSize="16px" textAlign="center" isBold noSelect {...color}>
-          {price}
+          {pricePerManager}
         </Text>
         <Text
           fontSize="11px"
@@ -133,7 +133,8 @@ const TotalTariffContainer = ({
   );
 };
 
-export default inject(({ auth }) => {
+export default inject(({ auth, payments }) => {
   const { theme } = auth.settingsStore;
-  return { theme };
+  const { pricePerManager } = payments;
+  return { theme, pricePerManager };
 })(observer(TotalTariffContainer));

packages/client/src/store/PaymentStore.js

@@ -4,6 +4,7 @@ import {
   acceptLicense,
 } from "@docspace/common/api/settings";
 import { makeAutoObservable } from "mobx";
+import api from "@docspace/common/api";
 
 class PaymentStore {
   salesEmail = "sales@onlyoffice.com";
@@ -16,6 +17,8 @@ class PaymentStore {
     trialMode: true,
   };
 
+  pricePerManager = null;
+
   constructor() {
     makeAutoObservable(this);
   }
@@ -49,7 +52,7 @@ class PaymentStore {
     const response = await setLicense(confirmKey, data);
 
     this.acceptPaymentsLicense();
-    this.getSettingsPayment();
+    console.log("res", res);
 
     return response;
   };
@@ -59,6 +62,15 @@ class PaymentStore {
 
     return response;
   };
+
+  // ------------ For docspace -----------
+
+  getPaymentPrices = async () => {
+    const res = await api.portal.getPaymentPrices();
+    if (res) {
+      this.pricePerManager = res.admin.USD;
+    }
+  };
 }
 
 export default PaymentStore;

packages/common/api/portal/index.js

@@ -165,3 +165,7 @@ export function setPortalRename(alias) {
     data: { alias },
   });
 }
+
+export function getPaymentPrices() {
+  return request({ method: "get", url: "/portal/payment/prices" });
+}