Web: Refactoring, added downgrade plan button.

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

@@ -13,6 +13,7 @@
   "Bytes": "bytes",
   "ContactUs": "For sales questions, contact us at",
   "DelayedPayment": "Delayed payment of the business plan dated {{date}}",
+  "DowngradeNow": "Downgrade now",
   "FreeStartupPlan": "Free Startup plan",
   "GracePeriodActivated": "Grace period activated",
   "Gigabyte": "GB",

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

@@ -12,6 +12,7 @@
   "Bytes": "байт",
   "ContactUs": "По вопросам продаж обращайтесь к нам по адресу",
   "DelayedPayment": "Просроченная оплата Business плана от {{date}}",
+  "DowngradeNow": "Понизить прямо сейчас",
   "FreeStartupPlan": "Бесплатный  Startup план",
   "GracePeriodActivated": "Активирован льготный период",
   "GracePeriodActivatedDescription": "Активирован льготный период с {{fromDate}} - {{byDate}}. Во время льготного периода будут отключены функции создания комнат и добавления новых пользователей. По истечению срока портал будет полностью заблокирован. ",
@@ -38,6 +39,6 @@
   "StripeCustomerPortal": "перейти на клиентский портал Stripe",
   "SendRequest": "Отправить запрос",
   "Terabyte": "Тб",
-  "UpgradeNow": "Обновитесь прямо сейчас",
+  "UpgradeNow": "Обновить прямо сейчас",
   "YourPrice": "Ваша стоимость"
 }

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

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { inject, observer } from "mobx-react";
 import Button from "@docspace/components/button";
 import styled, { css } from "styled-components";
-import toastr from "client/toastr";
-import SalesDepartmentRequestDialog from "../../../../../../src/components/dialogs/SalesDepartmentRequestDialog";
+import RequestButtonContainer from "./RequestButtonContainer";
+import UpdatePlanButtonContainer from "./UpdatePlanButtonContainer";
 
 const StyledBody = styled.div`
   button {
@@ -11,80 +11,22 @@ const StyledBody = styled.div`
   }
 `;
 
-let timerId = null;
 const ButtonContainer = ({
-  updatePayment,
-  setIsLoading,
-  paymentLink,
   isNeedRequest,
   isAlreadyPaid,
-  managersCount,
   isDisabled,
   isLoading,
-  maxTariffManagers,
-  setPortalPaymentsQuotas,
-  isLessCountThanAcceptable,
   t,
   isNotPaid,
   isGracePeriod,
   accountLink,
 }) => {
-  const [isVisibleDialog, setIsVisibleDialog] = useState(false);
-
-  const updateMethod = async () => {
-    try {
-      timerId = setTimeout(() => {
-        setIsLoading(true);
-      }, 500);
-
-      await updatePayment(managersCount);
-      await setPortalPaymentsQuotas();
-    } catch (e) {
-      toastr.error(e);
-    }
-
-    setIsLoading(false);
-    clearTimeout(timerId);
-    timerId = null;
-  };
-
-  const onUpdateTariff = () => {
-    if (isAlreadyPaid) {
-      updateMethod();
-      return;
-    }
-
-    if (paymentLink) window.open(paymentLink, "_blank");
-  };
-
   const goToStripeAccount = () => {
     if (accountLink) window.open(accountLink, "_blank");
   };
 
-  const toDoRequest = () => {
-    setIsVisibleDialog(true);
-  };
-
-  const onClose = () => {
-    setIsVisibleDialog(false);
-  };
-  useEffect(() => {
-    return () => {
-      timerId && clearTimeout(timerId);
-      timerId = null;
-    };
-  }, []);
-
-  const isTheSameCount = managersCount === maxTariffManagers;
-
   return (
     <StyledBody>
-      {isVisibleDialog && (
-        <SalesDepartmentRequestDialog
-          visible={isVisibleDialog}
-          onClose={onClose}
-        />
-      )}
       {isNotPaid || isGracePeriod ? (
         <Button
           label={t("Pay")}
@@ -94,54 +36,26 @@ const ButtonContainer = ({
           onClick={goToStripeAccount}
           isLoading={isLoading}
         />
-      ) : (
-        <Button
-          label={isNeedRequest ? t("SendRequest") : t("UpgradeNow")}
-          size={"medium"}
-          primary
-          isDisabled={
-            (!isNeedRequest && isAlreadyPaid && isTheSameCount) ||
-            isLessCountThanAcceptable ||
-            isLoading ||
-            isDisabled
-          }
-          onClick={isNeedRequest ? toDoRequest : onUpdateTariff}
+      ) : isNeedRequest ? (
+        <RequestButtonContainer
           isLoading={isLoading}
+          isDisabled={isDisabled}
+          t={t}
         />
+      ) : (
+        <UpdatePlanButtonContainer isAlreadyPaid={isAlreadyPaid} t={t} />
       )}
     </StyledBody>
   );
 };
 
 export default inject(({ auth, payments }) => {
-  const {
-    portalPaymentQuotas,
-    setPortalPaymentsQuotas,
-    isNotPaid,
-    isGracePeriod,
-  } = auth;
-  const { countAdmin: maxTariffManagers } = portalPaymentQuotas;
-  const {
-    updatePayment,
-    setIsLoading,
-    paymentLink,
-    isNeedRequest,
-    isLoading,
-    managersCount,
-    isLessCountThanAcceptable,
-    accountLink,
-  } = payments;
+  const { isNotPaid, isGracePeriod } = auth;
+  const { isNeedRequest, isLoading, accountLink } = payments;
 
   return {
-    updatePayment,
-    setIsLoading,
-    paymentLink,
     isNeedRequest,
     isLoading,
-    managersCount,
-    maxTariffManagers,
-    setPortalPaymentsQuotas,
-    isLessCountThanAcceptable,
     isNotPaid,
     isGracePeriod,
     accountLink,

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

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { inject, observer } from "mobx-react";
+import Button from "@docspace/components/button";
+import styled from "styled-components";
+import DowngradePlanDialog from "../../../../../components/dialogs/DowngradePlanDialog";
+
+const StyledBody = styled.div`
+  button {
+    width: 100%;
+  }
+`;
+
+const DowngradePlanButtonContainer = ({
+  isDisabled,
+  isLoading,
+  isLessCountThanAcceptable,
+  t,
+  onUpdateTariff,
+}) => {
+  const [
+    isVisibleDowngradePlanDialog,
+    setIsVisibleDowngradePlanDialog,
+  ] = useState(false);
+
+  const isPassesByQuota = () => {
+    return false;
+  };
+  const onDowngradeTariff = () => {
+    if (!isPassesByQuota()) {
+      setIsVisibleDowngradePlanDialog(true);
+      return;
+    }
+    onUpdateTariff && onUpdateTariff();
+  };
+
+  const onClose = () => {
+    isVisibleDowngradePlanDialog && setIsVisibleDowngradePlanDialog(false);
+  };
+
+  return (
+    <StyledBody>
+      {isVisibleDowngradePlanDialog && (
+        <DowngradePlanDialog
+          visible={isVisibleDowngradePlanDialog}
+          onClose={onClose}
+        />
+      )}
+      <Button
+        label={t("DowngradeNow")}
+        size={"medium"}
+        primary
+        isDisabled={isLessCountThanAcceptable || isLoading || isDisabled}
+        onClick={onDowngradeTariff}
+        isLoading={isLoading}
+      />
+    </StyledBody>
+  );
+};
+
+export default inject(({ payments }) => {
+  const { isLoading, isLessCountThanAcceptable } = payments;
+
+  return {
+    isLoading,
+    isLessCountThanAcceptable,
+  };
+})(observer(DowngradePlanButtonContainer));

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

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import Button from "@docspace/components/button";
+import styled, { css } from "styled-components";
+import SalesDepartmentRequestDialog from "../../../../../components/dialogs/SalesDepartmentRequestDialog";
+
+const StyledBody = styled.div`
+  button {
+    width: 100%;
+  }
+`;
+
+const RequestButtonContainer = ({ isDisabled, isLoading, t }) => {
+  const [isVisibleDialog, setIsVisibleDialog] = useState(false);
+
+  const toDoRequest = () => {
+    setIsVisibleDialog(true);
+  };
+
+  const onClose = () => {
+    isVisibleDialog && setIsVisibleDialog(false);
+  };
+
+  return (
+    <StyledBody>
+      {isVisibleDialog && (
+        <SalesDepartmentRequestDialog
+          visible={isVisibleDialog}
+          onClose={onClose}
+        />
+      )}
+      <Button
+        label={t("SendRequest")}
+        size={"medium"}
+        primary
+        isDisabled={isLoading || isDisabled}
+        onClick={toDoRequest}
+        isLoading={isLoading}
+      />
+    </StyledBody>
+  );
+};
+
+export default RequestButtonContainer;

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

@@ -0,0 +1,32 @@
+import React from "react";
+import Button from "@docspace/components/button";
+import styled, { css } from "styled-components";
+
+const StyledBody = styled.div`
+  button {
+    width: 100%;
+  }
+`;
+
+const SwitchingDifferentPlanButtonContainer = ({
+  isDisabled,
+  isLoading,
+  isLessCountThanAcceptable,
+  t,
+  onUpdateTariff,
+}) => {
+  return (
+    <StyledBody>
+      <Button
+        label={t("UpgradeNow")}
+        size={"medium"}
+        primary
+        isDisabled={isLessCountThanAcceptable || isLoading || isDisabled}
+        onClick={onUpdateTariff}
+        isLoading={isLoading}
+      />
+    </StyledBody>
+  );
+};
+
+export default SwitchingDifferentPlanButtonContainer;

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

@@ -0,0 +1,130 @@
+import React, { useEffect } from "react";
+import { inject, observer } from "mobx-react";
+import Button from "@docspace/components/button";
+import styled, { css } from "styled-components";
+import toastr from "client/toastr";
+import SwitchingDifferentPlanButtonContainer from "./SwitchingDifferentPlanButtonContainer";
+import DowngradePlanButtonContainer from "./DowngradePlanButtonContainer";
+
+const StyledBody = styled.div`
+  button {
+    width: 100%;
+  }
+`;
+
+let timerId = null;
+const UpdatePlanButtonContainer = ({
+  updatePayment,
+  setIsLoading,
+  paymentLink,
+  isAlreadyPaid,
+  managersCount,
+  isDisabled,
+  isLoading,
+  maxTariffManagers,
+  setPortalPaymentsQuotas,
+  setPortalQuota,
+  isLessCountThanAcceptable,
+  t,
+}) => {
+  const updateMethod = async () => {
+    try {
+      timerId = setTimeout(() => {
+        setIsLoading(true);
+      }, 500);
+
+      await updatePayment(managersCount);
+
+      await Promise.all([setPortalQuota(), setPortalPaymentsQuotas()]);
+    } catch (e) {
+      toastr.error(e);
+    }
+
+    setIsLoading(false);
+    clearTimeout(timerId);
+    timerId = null;
+  };
+
+  const onUpdateTariff = () => {
+    if (isAlreadyPaid) {
+      updateMethod();
+      return;
+    }
+
+    if (paymentLink) window.open(paymentLink, "_blank");
+  };
+
+  useEffect(() => {
+    return () => {
+      timerId && clearTimeout(timerId);
+      timerId = null;
+    };
+  }, []);
+
+  const isTheSameCount = managersCount === maxTariffManagers;
+  const isDowngradePlan = managersCount < maxTariffManagers;
+
+  return (
+    <StyledBody>
+      {isAlreadyPaid ? (
+        isDowngradePlan ? (
+          <DowngradePlanButtonContainer onUpdateTariff={onUpdateTariff} t={t} />
+        ) : (
+          <Button
+            label={t("UpgradeNow")}
+            size={"medium"}
+            primary
+            isDisabled={isTheSameCount || isLoading || isDisabled}
+            onClick={onUpdateTariff}
+            isLoading={isLoading}
+          />
+        )
+      ) : (
+        <SwitchingDifferentPlanButtonContainer
+          t={t}
+          onUpdateTariff={onUpdateTariff}
+          isLessCountThanAcceptable={isLessCountThanAcceptable}
+          isLoading={isLoading}
+          isDisabled={isDisabled}
+        />
+      )}
+    </StyledBody>
+  );
+};
+
+export default inject(({ auth, payments }) => {
+  const {
+    portalQuota,
+    setPortalPaymentsQuotas,
+    setPortalQuota,
+    isNotPaid,
+    isGracePeriod,
+  } = auth;
+  const { countAdmin: maxTariffManagers } = portalQuota;
+  const {
+    updatePayment,
+    setIsLoading,
+    paymentLink,
+    isNeedRequest,
+    isLoading,
+    managersCount,
+    isLessCountThanAcceptable,
+    accountLink,
+  } = payments;
+
+  return {
+    updatePayment,
+    setIsLoading,
+    paymentLink,
+    isNeedRequest,
+    isLoading,
+    managersCount,
+    maxTariffManagers,
+    setPortalPaymentsQuotas,
+    setPortalQuota,
+    isLessCountThanAcceptable,
+    isNotPaid,
+    isGracePeriod,
+    accountLink,
+  };
+})(observer(UpdatePlanButtonContainer));

packages/common/store/AuthStore.js

@@ -31,6 +31,7 @@ class AuthStore {
 
   quota = {};
   portalPaymentQuotas = {};
+  portalQuota = {};
   portalTariff = {};
   pricePerManager = null;
   currencies = [];