Refactoring styles, actions and reducer

web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/index.js

@@ -13,8 +13,6 @@ import ContactContainer from "./sub-components/contactContainer";
 import {
   setPaymentsLicense,
   getSettingsPayment,
-  resetUploadedLicense,
-  acceptPaymentsLicense,
 } from "../../../store/payments/actions";
 import { createI18N } from "../../../helpers/i18n";
 import { setDocumentTitle } from "../../../helpers/utils";
@@ -62,19 +60,6 @@ class Body extends React.Component {
     getSettingsPayment();
   }
 
-  componentDidUpdate() {
-    const {
-      licenseUpload,
-      resetUploadedLicense,
-      acceptPaymentsLicense,
-    } = this.props;
-
-    if (licenseUpload) {
-      acceptPaymentsLicense();
-      resetUploadedLicense();
-    }
-  }
-
   onClickUpload = (file) => {
     const { setPaymentsLicense, t } = this.props;
 
@@ -144,6 +129,4 @@ export default connect(mapStateToProps, {
   setPaymentsLicense,
   setCurrentProductId,
   getSettingsPayment,
-  resetUploadedLicense,
-  acceptPaymentsLicense,
 })(withRouter(PaymentsEnterprise));

web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/advantagesContainer.js

@@ -17,28 +17,25 @@ const StyledBodyAdvantages = styled.div`
   display: grid;
   padding: 32px;
 
-  div {
-    display: flex;
-  }
-
-  .wrapper {
-    align-items: center;
-  }
-
-  background: url("images/payments_enterprise.svg") #f8f9f9 bottom 32px right
-    32px no-repeat;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(4, min-content);
   grid-row-gap: 18px;
 
-  .advantages {
+  background: url("images/payments_enterprise.svg") #f8f9f9 bottom 32px right
-    line-height: 16px;
+    32px no-repeat;
-  }
+
   .header-advantages {
     line-height: 30px;
     padding-bottom: 15px;
   }
 
+  .row-advantages {
+    display: flex;
+    .wrapper {
+      align-items: center;
+    }
+  }
+
   @media ${tablet} {
     background: #f8f9f9;
   }
@@ -56,7 +53,7 @@ const AdvantagesContainer = () => {
         {t("SubscriptionGet")}
       </Text>
 
-      <div>
+      <Box className="row-advantages">
         <img
           src="images/payments_enterprise_cubes.svg"
           width="24px"
@@ -64,13 +61,11 @@ const AdvantagesContainer = () => {
           alt="Icon_cubes"
         />
         <Box className="wrapper" marginProp="0 0 0 8px">
-          <Text className="advantages" isBold={true}>
+          <Text isBold={true}>{t("OnlyOfficeEditor")}</Text>
-            {t("OnlyOfficeEditor")}
-          </Text>
         </Box>
-      </div>
+      </Box>
 
-      <div>
+      <Box className="row-advantages">
         <img
           src="images/payments_enterprise_lock.svg"
           width="24px"
@@ -78,13 +73,11 @@ const AdvantagesContainer = () => {
           alt="Icon_lock"
         />
         <Box className="wrapper" marginProp="0 0 0 8px">
-          <Text className="advantages" isBold={true}>
+          <Text isBold={true}>{t("PrivateRooom")}</Text>
-            {t("PrivateRooom")}
-          </Text>
         </Box>
-      </div>
+      </Box>
 
-      <div>
+      <Box className="row-advantages">
         <img
           src="images/payments_enterprise_smartphone.svg"
           width="24px"
@@ -92,13 +85,11 @@ const AdvantagesContainer = () => {
           alt="Icon_smartphone"
         />
         <Box className="wrapper" marginProp="0 0 0 8px">
-          <Text className="advantages" isBold={true}>
+          <Text isBold={true}>{t("WebEditors")}</Text>
-            {t("WebEditors")}
-          </Text>
         </Box>
-      </div>
+      </Box>
 
-      <div>
+      <Box className="row-advantages">
         <img
           src="images/payments_enterprise_update.svg"
           width="24px"
@@ -106,13 +97,11 @@ const AdvantagesContainer = () => {
           alt="Icon_update"
         />
         <Box className="wrapper" marginProp="0 0 0 8px">
-          <Text className="advantages" isBold={true}>
+          <Text isBold={true}>{t("FunctionalityAndSecurity")}</Text>
-            {t("FunctionalityAndSecurity")}
-          </Text>
         </Box>
-      </div>
+      </Box>
 
-      <div>
+      <Box className="row-advantages">
         <img
           src="images/payments_enterprise_help.svg"
           width="24px"
@@ -120,11 +109,9 @@ const AdvantagesContainer = () => {
           alt="Icon_help"
         />
         <Box className="wrapper" marginProp="0 0 0 8px">
-          <Text className="advantages" isBold={true}>
+          <Text isBold={true}>{t("ProfessionalTechSupport")}</Text>
-            {t("ProfessionalTechSupport")}
-          </Text>
         </Box>
-      </div>
+      </Box>
     </StyledBodyAdvantages>
   );
 };

web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/buttonContainer.js

@@ -23,7 +23,7 @@ const StyledButtonContainer = styled.div`
   grid-template-rows: min-content;
   grid-column-gap: 16px;
 
-  .button-payments-enterprise {
+  .button {
     border-radius: 3px;
     padding: 12px 20px;
     display: inline-block;
@@ -42,18 +42,12 @@ const StyledButtonContainer = styled.div`
     grid-template-columns: 1fr;
     grid-template-rows: min-content min-content;
     grid-row-gap: 16px;
-    .button-buy {
+    .button {
-      max-width: 536px;
-    }
-    .button-upload {
       max-width: 536px;
     }
   }
   @media (max-width: 632px) {
-    .button-buy {
+    .button {
-      min-width: 279px;
-    }
-    .button-upload {
       min-width: 279px;
     }
   }
@@ -82,7 +76,7 @@ const ButtonContainer = ({ buyUrl, onClickBuy, onClickUpload }) => {
   return (
     <StyledButtonContainer>
       <Button
-        className="button-payments-enterprise button-buy"
+        className="button"
         label={t("Buy")}
         value={`${buyUrl}`}
         onClick={onClickBuy}
@@ -97,7 +91,7 @@ const ButtonContainer = ({ buyUrl, onClickBuy, onClickUpload }) => {
 
       <Button
         type="submit"
-        className="button-payments-enterprise button-upload"
+        className="button"
         label={t("Upload")}
         onClick={onClickSubmit}
       />

web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/contactContainer.js

@@ -17,7 +17,7 @@ const i18n = createI18N({
 const StyledContactContainer = styled.div`
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: min-content min-content;
+  grid-template-rows: repeat(min-content, 2);
   grid-row-gap: 11px;
 `;
 

web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/headerContainer.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { connect } from "react-redux";
 import { withRouter } from "react-router";
-import { Text, utils as Utils } from "asc-web-components";
+import { Text } from "asc-web-components";
 import { utils } from "asc-web-common";
 
 import { useTranslation } from "react-i18next";
@@ -15,6 +15,7 @@ const i18n = createI18N({
   page: "PaymentsEnterprise",
   localesPath: "pages/PaymentsEnterprise",
 });
+
 const StyledHeader = styled.div`
   display: grid;
   grid-template-columns: 1fr;

web/ASC.Web.Client/src/store/payments/actions.js

@@ -2,9 +2,6 @@ import { api } from "asc-web-common";
 
 export const SET_SETTINGS_PAYMENTS_ENTERPRISE =
   "SET_SETTINGS_PAYMENTS_ENTERPRISE";
-export const SET_UPLOAD_PAYMENTS_ENTERPRISE_LICENSE =
-  "SET_UPLOAD_PAYMENTS_ENTERPRISE_LICENSE";
-export const RESET_UPLOADED_LICENSE = "RESET_UPLOADED_LICENSE";
 
 export function setSettings(settings) {
   return {
@@ -13,18 +10,6 @@ export function setSettings(settings) {
   };
 }
 
-export function setLicenseUpload(message) {
-  return {
-    type: SET_UPLOAD_PAYMENTS_ENTERPRISE_LICENSE,
-    message,
-  };
-}
-
-export function resetUploadedLicense() {
-  return {
-    type: RESET_UPLOADED_LICENSE,
-  };
-}
 export function getSettingsPayment() {
   return (dispatch) => {
     return api.settings.getPaymentSettings().then((settings) => {
@@ -34,12 +19,10 @@ export function getSettingsPayment() {
 }
 export function setPaymentsLicense(confirmKey, data) {
   return (dispatch) => {
-    return api.settings.setLicense(confirmKey, data).then((res) => {
+    return api.settings
-      dispatch(setLicenseUpload(res));
+      .setLicense(confirmKey, data)
-      setTimeout(() => {
+      .then(() => dispatch(acceptPaymentsLicense()))
-        dispatch(getSettingsPayment());
+      .then(() => dispatch(getSettingsPayment()));
-      }, 50);
-    });
   };
 }
 export function acceptPaymentsLicense() {

web/ASC.Web.Client/src/store/payments/reducer.js

@@ -1,8 +1,4 @@
-import {
+import { SET_SETTINGS_PAYMENTS_ENTERPRISE } from "./actions";
-  SET_SETTINGS_PAYMENTS_ENTERPRISE,
-  SET_UPLOAD_PAYMENTS_ENTERPRISE_LICENSE,
-  RESET_UPLOADED_LICENSE,
-} from "./actions";
 
 const initialState = {
   salesEmail: "sales@onlyoffice.com",
@@ -10,7 +6,7 @@ const initialState = {
   buyUrl:
     "https://www.onlyoffice.com/enterprise-edition.aspx?type=buyenterprise",
   standaloneMode: true,
-  licenseUpload: null,
+
   currentLicense: {
     expiresDate: new Date(),
     trialMode: false,
@@ -30,15 +26,7 @@ const paymentsReducer = (state = initialState, action) => {
           trialMode: action.settings.currentLicense.trial,
         }),
       });
-    case SET_UPLOAD_PAYMENTS_ENTERPRISE_LICENSE:
-      return Object.assign({}, state, {
-        licenseUpload: action.message,
-      });
 
-    case RESET_UPLOADED_LICENSE:
-      return Object.assign({}, state, {
-        licenseUpload: null,
-      });
     default:
       return state;
   }