Added useTranslation to containers

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

@@ -99,14 +99,13 @@ class Body extends React.PureComponent {
       <Loader className="pageLoader" type="rombs" size="40px" />
     ) : (
       <StyledBody>
-        <HeaderContainer t={t} />
-        <AdvantagesContainer t={t} />
+        <HeaderContainer />
+        <AdvantagesContainer />
         <ButtonContainer
-          t={t}
           onClickBuy={this.onClickBuy}
           onClickUpload={this.onClickUpload}
         />
-        <ContactContainer t={t} />
+        <ContactContainer />
       </StyledBody>
     );
   }

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

@@ -1,9 +1,17 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
+import { utils } from "asc-web-common";
+import { Text, utils as Utils } from "asc-web-components";
+import { createI18N } from "../../../../helpers/i18n";
+import { useTranslation } from "react-i18next";
+const { changeLanguage } = utils;
+const { tablet } = Utils.device;
 
-import { Text, utils } from "asc-web-components";
-const { tablet } = utils.device;
+const i18n = createI18N({
+  page: "PaymentsEnterprise",
+  localesPath: "pages/PaymentsEnterprise",
+});
 const StyledBodyAdvantages = styled.div`
   display: grid;
   padding-left: 32px;
@@ -180,7 +188,12 @@ const StyledBodyAdvantages = styled.div`
   }
 `;
 
-const AdvantagesContainer = ({ t }) => {
+const AdvantagesContainer = () => {
+  useEffect(() => {
+    changeLanguage(i18n);
+  }, []);
+
+  const { t } = useTranslation("translation", { i18n });
   return (
     <StyledBodyAdvantages>
       <Text className="header-advantages">{t("SubscriptionGet")}</Text>
@@ -242,8 +255,4 @@ const AdvantagesContainer = ({ t }) => {
   );
 };
 
-AdvantagesContainer.propTypes = {
-  t: PropTypes.func.isRequired,
-};
-
 export default AdvantagesContainer;

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

@@ -1,11 +1,18 @@
-import React, { useRef, useCallback } from "react";
+import React, { useRef, useCallback, useEffect } from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { withRouter } from "react-router";
-import { Button, utils } from "asc-web-components";
-
-const { tablet } = utils.device;
+import { Button, utils as Utils } from "asc-web-components";
+import { useTranslation } from "react-i18next";
+import { createI18N } from "../../../../helpers/i18n";
+import { utils } from "asc-web-common";
+const { changeLanguage } = utils;
+const { tablet } = Utils.device;
+const i18n = createI18N({
+  page: "PaymentsEnterprise",
+  localesPath: "pages/PaymentsEnterprise",
+});
 
 const StyledButtonContainer = styled.div`
   background: #edf2f7;
@@ -63,7 +70,7 @@ const StyledButtonContainer = styled.div`
   }
 `;
 
-const ButtonContainer = ({ t, buyUrl, onClickBuy, onClickUpload }) => {
+const ButtonContainer = ({ buyUrl, onClickBuy, onClickUpload }) => {
   const inputFilesElementRef = useRef(null);
 
   const onClickSubmit = useCallback(() => {
@@ -78,6 +85,11 @@ const ButtonContainer = ({ t, buyUrl, onClickBuy, onClickUpload }) => {
     },
     [onClickUpload]
   );
+  useEffect(() => {
+    changeLanguage(i18n);
+  }, []);
+
+  const { t } = useTranslation("translation", { i18n });
   return (
     <StyledButtonContainer>
       <Button
@@ -106,7 +118,6 @@ const ButtonContainer = ({ t, buyUrl, onClickBuy, onClickUpload }) => {
 
 ButtonContainer.propTypes = {
   buyUrl: PropTypes.string,
-  t: PropTypes.func.isRequired,
   onClickUpload: PropTypes.func.isRequired,
   onClickBuy: PropTypes.func.isRequired,
 };

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

@@ -1,9 +1,18 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { connect } from "react-redux";
 import { withRouter } from "react-router";
 import { Text, Link } from "asc-web-components";
+import { useTranslation } from "react-i18next";
+import { createI18N } from "../../../../helpers/i18n";
+import { utils } from "asc-web-common";
+const { changeLanguage } = utils;
+
+const i18n = createI18N({
+  page: "PaymentsEnterprise",
+  localesPath: "pages/PaymentsEnterprise",
+});
 
 const StyledContactContainer = styled.div`
   display: grid;
@@ -29,7 +38,12 @@ const StyledContactContainer = styled.div`
   }
 `;
 
-const ContactContainer = ({ t, salesEmail, helpUrl }) => {
+const ContactContainer = ({ salesEmail, helpUrl }) => {
+  useEffect(() => {
+    changeLanguage(i18n);
+  }, []);
+
+  const { t } = useTranslation("translation", { i18n });
   return (
     <StyledContactContainer>
       <Text className="contact-emails">
@@ -55,7 +69,6 @@ const ContactContainer = ({ t, salesEmail, helpUrl }) => {
 ContactContainer.propTypes = {
   salesEmail: PropTypes.string,
   helpUrl: PropTypes.string,
-  t: PropTypes.func.isRequired,
 };
 
 function mapStateToProps(state) {

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

@@ -1,12 +1,21 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { connect } from "react-redux";
 import { withRouter } from "react-router";
-import { Text, utils } from "asc-web-components";
+import { Text, utils as Utils } from "asc-web-components";
+import { utils } from "asc-web-common";
 
-const { tablet } = utils.device;
+import { useTranslation } from "react-i18next";
+import { createI18N } from "../../../../helpers/i18n";
+import moment from "moment";
+const { changeLanguage } = utils;
+const { tablet } = Utils.device;
 
+const i18n = createI18N({
+  page: "PaymentsEnterprise",
+  localesPath: "pages/PaymentsEnterprise",
+});
 const StyledHeader = styled.div`
   .payments-header {
     margin-top: 46px;
@@ -46,52 +55,57 @@ const StyledHeader = styled.div`
   }
 `;
 
-class HeaderContainer extends React.Component {
-  render() {
-    const { t, culture, utcHoursOffset, trialMode, expiresDate } = this.props;
-
+const HeaderContainer = ({
+  culture,
+  utcHoursOffset,
+  trialMode,
+  expiresDate,
+}) => {
+  useEffect(() => {
+    changeLanguage(i18n);
     const moment = require("moment");
     require("moment/min/locales.min");
     moment.locale(culture);
-    const currentUserDate = moment().utcOffset(utcHoursOffset);
+  }, [culture]);
 
-    return new Date(currentUserDate).setHours(0, 0, 0, 0) <
-      expiresDate.setHours(0, 0, 0, 0) ? (
-      <StyledHeader>
-        <Text className="payments-header">{t("Using")}</Text>
-        <Text className="payments-header-additional_support">
-          {t("SubscriptionAndUpdatesExpires")}{" "}
-          {moment(expiresDate).startOf("day").format(" D MMMM, YYYY")}
-          {"."}
-        </Text>
-      </StyledHeader>
-    ) : !trialMode ? (
-      <StyledHeader>
-        <Text className="payments-header">{t("Using")}</Text>
-        <Text
-          className="payments-header-additional_support"
-          color="#C96C27"
-          fontWeight="600"
-        >
-          {t("SupportNotAvailable")}{" "}
-          {moment(expiresDate).startOf("day").format("D MMMM, YYYY")}
-          {". "}
-          {t("LicenseRenewal")}
-        </Text>
-      </StyledHeader>
-    ) : (
-      <StyledHeader>
-        <Text className="payments-header">{t("TrialPeriodExpired")}</Text>
-        <Text className="payments-header-additional_support">
-          {t("ThanksToUser")}
-        </Text>
-      </StyledHeader>
-    );
-  }
-}
+  const { t } = useTranslation("translation", { i18n });
+  const currentUserDate = moment().utcOffset(utcHoursOffset);
+
+  return new Date(currentUserDate).setHours(0, 0, 0, 0) <
+    expiresDate.setHours(0, 0, 0, 0) ? (
+    <StyledHeader>
+      <Text className="payments-header">{t("Using")}</Text>
+      <Text className="payments-header-additional_support">
+        {t("SubscriptionAndUpdatesExpires")}{" "}
+        {moment(expiresDate).startOf("day").format(" D MMMM, YYYY")}
+        {"."}
+      </Text>
+    </StyledHeader>
+  ) : !trialMode ? (
+    <StyledHeader>
+      <Text className="payments-header">{t("Using")}</Text>
+      <Text
+        className="payments-header-additional_support"
+        color="#C96C27"
+        fontWeight="600"
+      >
+        {t("SupportNotAvailable")}{" "}
+        {moment(expiresDate).startOf("day").format("D MMMM, YYYY")}
+        {". "}
+        {t("LicenseRenewal")}
+      </Text>
+    </StyledHeader>
+  ) : (
+    <StyledHeader>
+      <Text className="payments-header">{t("TrialPeriodExpired")}</Text>
+      <Text className="payments-header-additional_support">
+        {t("ThanksToUser")}
+      </Text>
+    </StyledHeader>
+  );
+};
 
 HeaderContainer.propTypes = {
-  t: PropTypes.func.isRequired,
   culture: PropTypes.string,
   utcHoursOffset: PropTypes.number,
   expiresDate: PropTypes.object,

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

@@ -44,6 +44,6 @@ export function setPaymentsLicense(confirmKey, data) {
 }
 export function acceptPaymentsLicense() {
   return () => {
-    return api.settings.AcceptLicense().then((res) => console.log(res));
+    return api.settings.acceptLicense().then((res) => console.log(res));
   };
 }