Web: PortalSettings: Payments: Refactoring.

packages/client/src/pages/PortalSettings/categories/payments/SaaS/PriceCalculation.js

@@ -61,8 +61,6 @@ const PriceCalculation = ({
 
   const isDisabled = !canUpdateTariff;
 
-  const isNeedPlusSign = managersCount > maxAvailableManagersCount;
-
   return (
     <StyledPriceCalculation
       className="price-calculation-container"
@@ -79,16 +77,9 @@ const PriceCalculation = ({
           : t("PriceCalculation")}
       </Text>
       {isGracePeriod || isNotPaidPeriod || isFreeAfterPaidPeriod ? (
-        <CurrentUsersCountContainer
-          isNeedPlusSign={isNeedPlusSign}
-          t={t}
-          isDisabled={isDisabled}
-        />
+        <CurrentUsersCountContainer t={t} isDisabled={isDisabled} />
       ) : (
-        <SelectUsersCountContainer
-          isNeedPlusSign={isNeedPlusSign}
-          isDisabled={isDisabled}
-        />
+        <SelectUsersCountContainer isDisabled={isDisabled} />
       )}
 
       <PricePerUser t={t} isDisabled={isDisabled} />

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

@@ -6,7 +6,6 @@ import { StyledCurrentUsersContainer } from "../StyledComponent";
 
 const CurrentUsersCountContainer = (props) => {
   const {
-    isNeedPlusSign,
     maxCountManagersByQuota,
     isDisabled,
     addedManagersCountTitle,
@@ -30,7 +29,7 @@ const CurrentUsersCountContainer = (props) => {
       >
         {maxCountManagersByQuota}
       </Text>
-      <SelectTotalSizeContainer isNeedPlusSign={isNeedPlusSign} />
+      <SelectTotalSizeContainer />
     </StyledCurrentUsersContainer>
   );
 };

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

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import Text from "@docspace/components/text";
 import { inject, observer } from "mobx-react";
 import { getConvertedSize } from "@docspace/common/utils";
+
 const StyledBody = styled.div`
   .select-total-size_title {
     margin-bottom: 8px;
@@ -21,14 +22,14 @@ const SelectTotalSizeContainer = ({
   allowedStorageSizeByQuota,
   usedTotalStorageSizeTitle,
   theme,
-  isNeedPlusSign,
+  isNeedRequest,
 }) => {
   const { t } = useTranslation(["Payments", "Common"]);
 
   const convertedSize = getConvertedSize(t, allowedStorageSizeByQuota);
 
   return (
-    <StyledBody theme={theme}>
+    <StyledBody>
       <Text
         textAlign={"center"}
         noSelect
@@ -37,7 +38,7 @@ const SelectTotalSizeContainer = ({
         className="select-total-size_title"
         color={theme.client.settings.payment.storageSizeTitle}
       >
-        {usedTotalStorageSizeTitle}: {convertedSize} {isNeedPlusSign ? "+" : ""}
+        {usedTotalStorageSizeTitle}: {convertedSize} {isNeedRequest ? "+" : ""}
       </Text>
     </StyledBody>
   );
@@ -47,10 +48,11 @@ export default inject(({ auth, payments }) => {
   const { paymentQuotasStore } = auth;
   const { usedTotalStorageSizeTitle } = paymentQuotasStore;
   const { theme } = auth.settingsStore;
-  const { allowedStorageSizeByQuota } = payments;
+  const { allowedStorageSizeByQuota, isNeedRequest } = payments;
 
   return {
     theme,
+    isNeedRequest,
     usedTotalStorageSizeTitle,
     allowedStorageSizeByQuota,
   };

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

@@ -22,7 +22,7 @@ const SelectUsersCountContainer = ({
   isLessCountThanAcceptable,
   step,
   addedManagersCountTitle,
-  isNeedPlusSign,
+  isNeedRequest,
 }) => {
   const onSliderChange = (e) => {
     const count = parseFloat(e.target.value);
@@ -82,7 +82,7 @@ const SelectUsersCountContainer = ({
     setTotalPrice(numberValue);
   };
 
-  const value = isNeedPlusSign
+  const value = isNeedRequest
     ? maxAvailableManagersCount + "+"
     : managersCount + "";
 
@@ -103,7 +103,7 @@ const SelectUsersCountContainer = ({
       <Text noSelect fontWeight={600} className="payment-users_text">
         {addedManagersCountTitle}
       </Text>
-      <SelectTotalSizeContainer isNeedPlusSign={isNeedPlusSign} />
+      <SelectTotalSizeContainer />
       <div className="payment-users">
         <div
           className="circle minus-icon"
@@ -172,12 +172,14 @@ export default inject(({ auth, payments }) => {
     isLessCountThanAcceptable,
     stepByQuotaForManager,
     isAlreadyPaid,
+    isNeedRequest,
   } = payments;
   const { addedManagersCountTitle } = paymentQuotasStore;
 
   const step = stepByQuotaForManager;
 
   return {
+    isNeedRequest,
     isAlreadyPaid,
     isLoading,
     minAvailableManagersValue,

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

@@ -5,7 +5,6 @@ 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";
 import { updatePayment } from "@docspace/common/api/portal";
 
 const StyledBody = styled.div`
@@ -199,7 +198,6 @@ export default inject(({ auth, payments }) => {
   const {
     setIsLoading,
     paymentLink,
-    isNeedRequest,
     isLoading,
     managersCount,
     isLessCountThanAcceptable,
@@ -213,7 +211,6 @@ export default inject(({ auth, payments }) => {
     isAlreadyPaid,
     setIsLoading,
     paymentLink,
-    isNeedRequest,
     isLoading,
     managersCount,
     maxCountManagersByQuota,