Merge pull request #910 from ONLYOFFICE/bugfix/payments-page

Bugfix/payments page

packages/client/public/locales/en/Payments.json

@@ -10,6 +10,7 @@
   "BusinessFinalDateInfo": "Subscription will be automatically renewed on {{finalDate}} with updated pricing and specifications. You can cancel it or change your billing info on your Stripe customer portal.",
   "BusinessRequestDescription": "The pricing plans with more {{peopleNumber}} managers are available upon request only",
   "BusinessExpired": "Your {{planName}} plan has expired on {{date}}",
+  "BusinessUpdated": "{{planName}} plan updated",
   "ChangePayer": "Change payer",
   "ContactUs": "For sales questions, contact us at",
   "DelayedPayment": "Delayed payment of the {{planName}} plan dated {{date}}",

packages/client/public/locales/ru/Payments.json

@@ -9,6 +9,7 @@
   "BusinessFinalDateInfo": "Подписка будет автоматически продлена {{finalDate}} с обновленными ценами и техническими характеристиками. Вы можете отменить его или изменить свою платежную информацию на клиентский портал Stripe.",
   "BusinessRequestDescription": "Тарифные планы с более чем {{peopleNumber}} менеджерами доступны только по запросу",
   "BusinessExpired": "Срок действия вашего {{planName}} тарифа истек {{date}}",
+  "BusinessUpdated": "{{planName}} тариф обновлён",
   "ChangePayer": "Изменить плательщика",
   "ContactUs": "По вопросам продаж обращайтесь к нам по адресу",
   "DelayedPayment": "Просроченная оплата {{planName}} плана от {{date}}",

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

@@ -1,17 +1,21 @@
 import React, { useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import Button from "@docspace/components/button";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import toastr from "@docspace/components/toast/toastr";
 import DowngradePlanButtonContainer from "./DowngradePlanButtonContainer";
+import api from "@docspace/common/api";
+import { Trans } from "react-i18next";
 
 const StyledBody = styled.div`
   button {
     width: 100%;
   }
 `;
-
-let timerId = null;
+const MANAGER = "manager";
+let timerId = null,
+  intervalId = null,
+  isWaitRequest = false;
 const UpdatePlanButtonContainer = ({
   updatePayment,
   setIsLoading,
@@ -21,8 +25,9 @@ const UpdatePlanButtonContainer = ({
   isDisabled,
   isLoading,
   maxCountManagersByQuota,
-  setPortalQuota,
+  setPortalQuotaValue,
   isLessCountThanAcceptable,
+  currentTariffPlanTitle,
   t,
 }) => {
   const updateMethod = async () => {
@@ -32,15 +37,52 @@ const UpdatePlanButtonContainer = ({
       }, 500);
 
       await updatePayment(managersCount);
-
-      await setPortalQuota();
+      waitingForQuota();
     } catch (e) {
       toastr.error(e);
+      setIsLoading(false);
+      clearTimeout(timerId);
+      timerId = null;
     }
+  };
 
-    setIsLoading(false);
-    clearTimeout(timerId);
-    timerId = null;
+  const waitingForQuota = () => {
+    isWaitRequest = false;
+
+    intervalId = setInterval(async () => {
+      try {
+        if (isWaitRequest) {
+          return;
+        }
+
+        isWaitRequest = true;
+        const res = await api.portal.getPortalQuota();
+
+        const managersObject = res.features.find((obj) => obj.id === MANAGER);
+
+        if (managersObject && managersObject.value === managersCount) {
+          setPortalQuotaValue(res);
+          intervalId &&
+            toastr.success(
+              <Trans t={t} i18nKey="BusinessUpdated" ns="Payments">
+                {{ planName: currentTariffPlanTitle }}
+              </Trans>
+            );
+
+          setIsLoading(false);
+          clearInterval(intervalId);
+          intervalId = null;
+        }
+      } catch (e) {
+        setIsLoading(false);
+
+        intervalId && toastr.error(e);
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+
+      isWaitRequest = false;
+    }, 2000);
   };
 
   const onUpdateTariff = () => {
@@ -103,7 +145,11 @@ const UpdatePlanButtonContainer = ({
 
 export default inject(({ auth, payments }) => {
   const { currentTariffStatusStore, currentQuotaStore } = auth;
-  const { maxCountManagersByQuota, setPortalQuota } = currentQuotaStore;
+  const {
+    maxCountManagersByQuota,
+    setPortalQuotaValue,
+    currentTariffPlanTitle,
+  } = currentQuotaStore;
 
   const { isNotPaidPeriod, isGracePeriod } = currentTariffStatusStore;
 
@@ -126,10 +172,11 @@ export default inject(({ auth, payments }) => {
     isLoading,
     managersCount,
     maxCountManagersByQuota,
-    setPortalQuota,
     isLessCountThanAcceptable,
     isNotPaidPeriod,
     isGracePeriod,
     accountLink,
+    setPortalQuotaValue,
+    currentTariffPlanTitle,
   };
 })(observer(UpdatePlanButtonContainer));

packages/client/src/store/PaymentStore.js

@@ -104,8 +104,6 @@ class PaymentStore {
       console.log("updatePayment", res);
       if (res !== true) {
         toastr.error("error");
-      } else {
-        toastr.success("the changes will be applied soon");
       }
     } catch (e) {
       toastr.error(e);

packages/common/store/CurrentQuotaStore.js

@@ -12,7 +12,7 @@ const USERS_IN_ROOM = "usersInRoom";
 class QuotasStore {
   currentPortalQuota = {};
   currentPortalQuotaFeatures = [];
-  portalTariffStatus = {};
+
   isLoaded = false;
 
   constructor() {
@@ -161,6 +161,11 @@ class QuotasStore {
 
     return result.value;
   }
+
+  setPortalQuotaValue = (res) => {
+    this.currentPortalQuota = res;
+    this.currentPortalQuotaFeatures = res.features;
+  };
   setPortalQuota = async () => {
     const res = await api.portal.getPortalQuota();
     if (!res) return;