From 66c6ad0b6809c924f5390d4220451aed8a32c52d Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 18 Aug 2022 12:44:35 +0300
Subject: [PATCH] Web: Refactoring.

---
 .../categories/payments/BenefitsContainer.js  | 13 +++++-----
 .../categories/payments/index.js              | 23 +++++++-----------
 .../SelectUsersCountContainer.js              | 22 ++++++++---------
 .../sub-components/TotalTariffContainer.js    | 24 +++++++++----------
 4 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/packages/client/src/pages/PortalSettings/categories/payments/BenefitsContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/BenefitsContainer.js
index fb70572b20..42b80e4ac2 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/BenefitsContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/BenefitsContainer.js
@@ -1,6 +1,5 @@
-import React, { useState } from "react";
+import React from "react";
 import styled from "styled-components";
-import { useTranslation, Trans } from "react-i18next";
 import Text from "@docspace/components/text";
 import { inject, observer } from "mobx-react";
 import { smallTablet } from "@docspace/components/utils/device";
@@ -21,10 +20,10 @@ const StyledBody = styled.div`
   p {
     margin-bottom: 24px;
   }
-  .tariff-benefits_text {
+  .payment-benefits_text {
     margin-bottom: 20px;
   }
-  .tariff-benefits {
+  .payment-benefits {
     display: flex;
     margin-bottom: 16px;
     align-items: baseline;
@@ -40,14 +39,14 @@ const BenefitsContainer = ({ t, availableTariffs }) => {
       <Text
         fontSize={"16px"}
         fontWeight={"600"}
-        className="tariff-benefits_text"
+        className="payment-benefits_text"
         noSelect
       >
         {t("Benefits")}
       </Text>
       {availableTariffs.map((item, index) => {
         return (
-          <div className="tariff-benefits" key={index}>
+          <div className="payment-benefits" key={index}>
             <Text noSelect>{"*" + item}</Text>
           </div>
         );
@@ -56,7 +55,7 @@ const BenefitsContainer = ({ t, availableTariffs }) => {
   );
 };
 
-export default inject(({ auth, payments }) => {
+export default inject(({ payments }) => {
   const { tariffsInfo } = payments;
 
   const availableTariffs = ["first", "second", "third", "forth", "five"];
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/index.js b/packages/client/src/pages/PortalSettings/categories/payments/index.js
index 9c040541a3..1abce3b1fc 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/index.js
@@ -18,13 +18,13 @@ import toastr from "@docspace/components/toast/toastr";
 const StyledBody = styled.div`
   max-width: 660px;
 
-  .payments-info_suggestion {
+  .payment-info_suggestion {
     margin-bottom: 12px;
   }
-  .payments-info_managers-price {
+  .payment-info_managers-price {
     margin-bottom: 20px;
   }
-  .payments-info {
+  .payment-info {
     display: grid;
     grid-template-columns: repeat(2, minmax(100px, 320px));
     grid-gap: 20px;
@@ -43,10 +43,10 @@ const PaymentsPage = ({
   pricePerManager,
   setPortalQuota,
 }) => {
-  const { t, ready } = useTranslation("Payments");
+  const { t, ready } = useTranslation(["Payments", "Settings"]);
 
   useEffect(() => {
-    setDocumentTitle(t("TariffsPlans")); //TODO: need to specify
+    setDocumentTitle(t("Settings:Payments")); //TODO: need to specify
   }, [ready]);
 
   useEffect(() => {
@@ -65,17 +65,12 @@ const PaymentsPage = ({
         {isStartup ? t("StartupTitle") : t("BusinessTitle")}
       </Text>
       <CurrentTariffContainer />
-      <Text
-        noSelect
-        fontSize="16px"
-        isBold
-        className="payments-info_suggestion"
-      >
+      <Text noSelect fontSize="16px" isBold className="payment-info_suggestion">
         {isStartup ? t("StartupSuggestion") : t("BusinessSuggestion")}
       </Text>
 
       {!isStartup && (
-        <Text noSelect fontSize={"14"} className="payments-info_managers-price">
+        <Text noSelect fontSize={"14"} className="payment-info_managers-price">
           <Trans t={t} i18nKey="BusinessFinalDateInfo" ns="Payments">
             {{ finalDate: finalDate }}
           </Trans>
@@ -86,14 +81,14 @@ const PaymentsPage = ({
         noSelect
         fontWeight={600}
         fontSize={"14"}
-        className="payments-info_managers-price"
+        className="payment-info_managers-price"
       >
         <Trans t={t} i18nKey="StartPrice" ns="Payments">
           {{ price: pricePerManager }}
         </Trans>
       </Text>
 
-      <div className="payments-info">
+      <div className="payment-info">
         <PriceCalculation t={t} />
         <BenefitsContainer t={t} />
       </div>
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectUsersCountContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectUsersCountContainer.js
index 3951a78174..f08b4e6cd8 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectUsersCountContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectUsersCountContainer.js
@@ -39,7 +39,7 @@ const StyledBody = styled.div`
     }
   }
 
-  .payments-operations_input {
+  .payment-operations_input {
     width: 111px;
     font-size: 44px;
     text-align: center;
@@ -52,12 +52,12 @@ const StyledBody = styled.div`
       `}
   }
 
-  .tariff-users {
+  .payment-users {
     display: flex;
     align-items: center;
     margin: 0 auto;
     width: max-content;
-    .tariff-score {
+    .payment-score {
       path {
         ${(props) =>
           props.isDisabled &&
@@ -67,7 +67,7 @@ const StyledBody = styled.div`
       }
     }
 
-    .tariff-score,
+    .payment-score,
     .circle {
       cursor: ${(props) => (props.isDisabled ? "default" : "pointer")};
     }
@@ -83,14 +83,14 @@ const StyledBody = styled.div`
       align-items: center;
     }
   }
-  .tariff-users_count {
+  .payment-users_count {
     margin-left: 20px;
     margin-right: 20px;
     text-align: center;
     width: 102px;
   }
 
-  .tariff-users_text {
+  .payment-users_text {
     margin-bottom: 12px;
     text-align: center;
   }
@@ -121,23 +121,23 @@ const SelectUsersCountContainer = ({
 
   return (
     <StyledBody theme={theme} isDisabled={isDisabled}>
-      <Text noSelect fontWeight={600} className="tariff-users_text" {...color}>
+      <Text noSelect fontWeight={600} className="payment-users_text" {...color}>
         {t("ManagersNumber")}
       </Text>
-      <div className="tariff-users">
+      <div className="payment-users">
         <div className="circle" {...onClickProp} data-operation={"minus"}>
-          <MinusIcon {...onClickProp} className="tariff-score" />
+          <MinusIcon {...onClickProp} className="payment-score" />
         </div>
 
         <TextInput
           isReadOnly={isDisabled}
           withBorder={false}
-          className="payments-operations_input"
+          className="payment-operations_input"
           value={value}
           {...onchangeNumberProp}
         />
         <div className="circle" {...onClickProp} data-operation={"plus"}>
-          <PlusIcon {...onClickProp} className="tariff-score" />
+          <PlusIcon {...onClickProp} className="payment-score" />
         </div>
       </div>
 
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js
index 3233ecc341..5a8974b0ae 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js
@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
-import { useTranslation, Trans } from "react-i18next";
+import { Trans } from "react-i18next";
 import Text from "@docspace/components/text";
 import { inject, observer } from "mobx-react";
 import Button from "@docspace/components/button";
@@ -14,7 +14,7 @@ const StyledBody = styled.div`
     max-width: 520px;
   }
 
-  .total-tariff_user {
+  .payment_price_user {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -28,21 +28,21 @@ const StyledBody = styled.div`
       margin-top: 5px;
     }
   }
-  .total-tariff_price {
+  .payment_price_total-price {
     display: flex;
     justify-content: center;
     min-height: 65px;
     margin-top: 16px;
     margin-bottom: 16px;
-    .total-tariff_description,
-    .total-tariff_price-text {
+    .payment_price_description,
+    .payment_price_price-text {
       margin-bottom: 0px;
     }
-    .total-tariff_description {
+    .payment_price_description {
       margin-top: 16px;
     }
 
-    .total-tariff_month-text {
+    .payment_price_month-text {
       margin: auto 0;
       margin-bottom: 13px;
     }
@@ -71,7 +71,7 @@ const TotalTariffContainer = ({
 
   return (
     <StyledBody>
-      <div className="total-tariff_user">
+      <div className="payment_price_user">
         <Text fontSize="16px" textAlign="center" isBold noSelect {...color}>
           {pricePerManager}
         </Text>
@@ -85,7 +85,7 @@ const TotalTariffContainer = ({
           {t("PerUserMonth")}
         </Text>
       </div>
-      <div className="total-tariff_price">
+      <div className="payment_price_total-price">
         {isNeedRequest ? (
           <Text
             noSelect
@@ -104,7 +104,7 @@ const TotalTariffContainer = ({
               fontSize="48px"
               isBold
               textAlign={"center"}
-              className="total-tariff_price-text"
+              className="payment_price_price-text"
               noSelect
               {...color}
             >
@@ -114,7 +114,7 @@ const TotalTariffContainer = ({
               fontSize="16px"
               isBold
               textAlign={"center"}
-              className="total-tariff_month-text"
+              className="payment_price_month-text"
               noSelect
               {...color}
             >