From 23666db4615b5038cf7b263b0b3f98026971381d Mon Sep 17 00:00:00 2001
From: TatianaLopaeva <talopaeva@gmail.com>
Date: Sun, 6 Sep 2020 12:49:37 +0300
Subject: [PATCH 1/4] Changed style for buttons, added logic for loading file
 when clicking a file, hidden FileInput

---
 .../pages/PaymentsEnterprise/index.js         |  4 +-
 .../sub-components/button-container.js        | 90 +++++++++----------
 .../sub-components/header-container.js        |  8 +-
 3 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/index.js b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/index.js
index 2817bc8b34..095ae9035c 100644
--- a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/index.js
+++ b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/index.js
@@ -41,6 +41,7 @@ class Body extends React.PureComponent {
   constructor(props) {
     super(props);
     const { t } = this.props;
+
     this.state = {
       errorMessage: null,
       isErrorLicense: false,
@@ -62,12 +63,13 @@ class Body extends React.PureComponent {
 
   onButtonClickUpload = (file) => {
     const { setLicense, t } = this.props;
+
     let fd = new FormData();
     fd.append("files", file);
 
     setLicense(null, fd)
       .then(() => {
-        toastr.success(t("LoadingLicenseSuccess"), "", 0, true);
+        toastr.success(t("LoadingLicenseSuccess"), "", 5000, true);
       })
       .catch((error) => {
         toastr.error(t("LoadingLicenseError"), t("LicenseIsNotValid"), 0, true);
diff --git a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/button-container.js b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/button-container.js
index fbe171ed80..b71041d47b 100644
--- a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/button-container.js
+++ b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/button-container.js
@@ -10,35 +10,29 @@ const StyledButtonContainer = styled.div`
   background: #edf2f7;
   height: 108px;
   margin-bottom: 17px;
-  position: relative;
+  display: flex;
   .button-payments-enterprise {
     border-radius: 3px;
-    padding: 13px 20px;
-    padding: 0px;
+    padding: 12px 20px;
+    display: inline-block;
     background: #2da7db;
     color: white;
-    height: 44px;
+    height: 45px;
     font-weight: 600;
     font-size: 16px;
     line-height: 20px;
   }
   .button-buy {
-    width: 107px;
-    margin: 32px 16px 32px 32px;
+    /* width: 107px; */
+    margin: 32px 14px 32px 32px;
   }
+
   .button-upload {
-    width: 153px;
-    margin: 32px 612px 32px 0px;
+    /* width: 153px; */
+    margin: 32px 0px 32px 0px;
+    /* z-index: 8; */
   }
 
-  .input {
-    position: absolute;
-
-    left: 155px; /*width of button-buy and margin*/
-    bottom: 0px;
-    opacity: 0;
-    z-index: 1;
-  }
   @media ${tablet} {
     width: 600px;
     height: 168px;
@@ -72,35 +66,41 @@ const StyledButtonContainer = styled.div`
   }
 `;
 
-const ButtonContainer = ({
-  t,
-  buyUrl,
-  onButtonClickBuy,
-  onButtonClickUpload,
-}) => {
-  return (
-    <StyledButtonContainer>
-      <Button
-        className="button-payments-enterprise button-buy"
-        label={t("Buy")}
-        value={`${buyUrl}`}
-        onClick={onButtonClickBuy}
-      />
-      <FileInput
-        type="file"
-        className="button-payments-enterprise button-upload input"
-        placeholder={"Upload file"}
-        accept=".lic"
-        onInput={onButtonClickUpload}
-      />
-      <Button
-        type="submit"
-        className="button-payments-enterprise button-upload"
-        label={t("Upload")}
-      />
-    </StyledButtonContainer>
-  );
-};
+class ButtonContainer extends React.Component {
+  onUploadFileClick = () => this.inputFilesElement;
+
+  render() {
+    const { t, buyUrl, onButtonClickBuy, onButtonClickUpload } = this.props;
+    return (
+      <StyledButtonContainer>
+        <Button
+          className="button-payments-enterprise button-buy"
+          label={t("Buy")}
+          value={`${buyUrl}`}
+          onClick={onButtonClickBuy}
+        />
+        <FileInput
+          id="UploadLicenseFile"
+          type="file"
+          className=" button-upload input"
+          placeholder={"Upload file"}
+          accept=".lic"
+          ref={(input) => (this.inputFilesElement = input)}
+          onInput={onButtonClickUpload}
+          style={{ display: "none" }}
+        />
+
+        <Button
+          id="trigger_link"
+          type="submit"
+          className="button-payments-enterprise button-upload"
+          label={t("Upload")}
+          onClick={() => document.getElementById("UploadLicenseFile").click()}
+        />
+      </StyledButtonContainer>
+    );
+  }
+}
 
 ButtonContainer.propTypes = {
   buyUrl: PropTypes.string.isRequired,
diff --git a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/header-container.js b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/header-container.js
index b561ffb0bd..146174ad8f 100644
--- a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/header-container.js
+++ b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/header-container.js
@@ -70,11 +70,6 @@ const StyledHeader = styled.div`
   }
 `;
 
-const onRedirect = () => {
-  // this.props.history.push("/back")
-  alert("yes");
-  // window.location.href = "https://about";
-};
 const { setCurrentError } = store.auth.actions;
 const HeaderContainer = ({
   t,
@@ -90,8 +85,7 @@ const HeaderContainer = ({
   moment.locale(culture);
   const currentUserDate = moment().utcOffset(utcHoursOffset);
   // this.props.error !== true && this.props.setCurrentError(true);
-  // eslint-disable-next-line no-debugger
-  debugger;
+
   return moment(
     moment.utc(expiresDate).set("hour", 0).set("minute", 0).set("second", 0)
   ).isAfter(

From 71fee5aab454d9168cf1e0bbc7dfa2da685f7169 Mon Sep 17 00:00:00 2001
From: TatianaLopaeva <talopaeva@gmail.com>
Date: Sun, 6 Sep 2020 13:04:33 +0300
Subject: [PATCH 2/4] Added id for FileInput

---
 .../src/components/file-input/index.js        | 201 ++++++++++--------
 1 file changed, 114 insertions(+), 87 deletions(-)

diff --git a/web/ASC.Web.Components/src/components/file-input/index.js b/web/ASC.Web.Components/src/components/file-input/index.js
index 15add7023c..a3a09d8747 100644
--- a/web/ASC.Web.Components/src/components/file-input/index.js
+++ b/web/ASC.Web.Components/src/components/file-input/index.js
@@ -1,50 +1,64 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import styled from 'styled-components';
+import styled from "styled-components";
 import isEqual from "lodash/isEqual";
 
-import IconButton from '../icon-button';
-import TextInput from '../text-input';
-
+import IconButton from "../icon-button";
+import TextInput from "../text-input";
 
 const StyledFileInput = styled.div`
   display: flex;
   position: relative;
   outline: none;
   width: ${props =>
-        (props.scale && '100%') ||
-        (props.size === 'base' && '173px') ||
-        (props.size === 'middle' && '300px') ||
-        (props.size === 'big' && '350px') ||
-        (props.size === 'huge' && '500px') ||
-        (props.size === 'large' && '550px')
-    };
+    (props.scale && "100%") ||
+    (props.size === "base" && "173px") ||
+    (props.size === "middle" && "300px") ||
+    (props.size === "big" && "350px") ||
+    (props.size === "huge" && "500px") ||
+    (props.size === "large" && "550px")};
 
-  .text-input { 
-    border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#D0D5DA'};
+  .text-input {
+    border-color: ${props =>
+      (props.hasError && "#c30") ||
+      (props.hasWarning && "#f1ca92") ||
+      (props.isDisabled && "#ECEEF1") ||
+      "#D0D5DA"};
     text-overflow: ellipsis;
     padding-right: 40px;
-    padding-right: ${ props => props.size === 'large' ? '64px' 
-      : props.size === 'huge' ? '58px'
-        : props.size === 'big' ? '53px'
-          : props.size === 'middle' ? '48px'
-            : '37px'
-    };
-    cursor: ${props => props.isDisabled ? 'default' : 'pointer'};
+    padding-right: ${props =>
+      props.size === "large"
+        ? "64px"
+        : props.size === "huge"
+        ? "58px"
+        : props.size === "big"
+        ? "53px"
+        : props.size === "middle"
+        ? "48px"
+        : "37px"};
+    cursor: ${props => (props.isDisabled ? "default" : "pointer")};
   }
 
-  :hover{
+  :hover {
     .icon {
-      border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#A3A9AE'};
+      border-color: ${props =>
+        (props.hasError && "#c30") ||
+        (props.hasWarning && "#f1ca92") ||
+        (props.isDisabled && "#ECEEF1") ||
+        "#A3A9AE"};
     }
   }
 
   :active {
     .icon {
-      border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#2DA7DB'};
+      border-color: ${props =>
+        (props.hasError && "#c30") ||
+        (props.hasWarning && "#f1ca92") ||
+        (props.isDisabled && "#ECEEF1") ||
+        "#2DA7DB"};
     }
   }
-    
+
   .icon {
     display: flex;
     align-items: center;
@@ -53,120 +67,135 @@ const StyledFileInput = styled.div`
     position: absolute;
     right: 0;
 
-    width: ${props => props.size === 'large' ? '48px'
-      : props.size === 'huge' ? '38px'
-        : props.size === 'big' ? '37px'
-          : props.size === 'middle' ? '36px'
-            : '30px'
-    };
+    width: ${props =>
+      props.size === "large"
+        ? "48px"
+        : props.size === "huge"
+        ? "38px"
+        : props.size === "big"
+        ? "37px"
+        : props.size === "middle"
+        ? "36px"
+        : "30px"};
 
-    height: ${props => props.size === 'large' ? '43px'
-      : props.size === 'huge' ? '37px'
-        : props.size === 'big' ? '36px'
-          : props.size === 'middle' ? '36px'
-            : '30px'
-    };
+    height: ${props =>
+      props.size === "large"
+        ? "43px"
+        : props.size === "huge"
+        ? "37px"
+        : props.size === "big"
+        ? "36px"
+        : props.size === "middle"
+        ? "36px"
+        : "30px"};
 
     margin: 0;
     border: 1px solid;
     border-radius: 0 3px 3px 0;
 
-    border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#D0D5DA'};
-    cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}
+    border-color: ${props =>
+      (props.hasError && "#c30") ||
+      (props.hasWarning && "#f1ca92") ||
+      (props.isDisabled && "#ECEEF1") ||
+      "#D0D5DA"};
+    cursor: ${props => (props.isDisabled ? "default" : "pointer")};
   }
 
   .icon-button {
-    cursor: ${props => props.isDisabled ? 'default' : 'pointer'}
+    cursor: ${props => (props.isDisabled ? "default" : "pointer")};
   }
 `;
 
-class FileInput extends Component { 
+class FileInput extends Component {
   constructor(props) {
     super(props);
 
     this.inputRef = React.createRef();
 
     this.state = {
-      fileName: '',
+      fileName: "",
       file: null
-    }
+    };
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    return (!isEqual(this.props, nextProps) || !isEqual(this.state, nextState));
+    return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
   }
 
   onIconFileClick = e => {
     const { isDisabled } = this.props;
-    
-    if(isDisabled) {  
+
+    if (isDisabled) {
       return false;
     }
     e.target.blur();
     this.inputRef.current.click();
-  }
+  };
 
   onChangeHandler = e => {
     this.setState({
       fileName: e.target.value
-    })
-  }
+    });
+  };
 
   onInputFile = () => {
     const { onInput } = this.props;
 
-    if ( this.inputRef.current.files.length > 0 ) {
-      this.setState({
-        fileName: this.inputRef.current.files[0].name,
-        file: this.inputRef.current.files[0]
-      }, () => {
-        if(onInput) { 
-          this.inputRef.current.value = '';
-          onInput(this.state.file);
+    if (this.inputRef.current.files.length > 0) {
+      this.setState(
+        {
+          fileName: this.inputRef.current.files[0].name,
+          file: this.inputRef.current.files[0]
+        },
+        () => {
+          if (onInput) {
+            this.inputRef.current.value = "";
+            onInput(this.state.file);
+          }
         }
-      });
-
-    } 
-  }
+      );
+    }
+  };
 
   render() {
     //console.log('render FileInput');
     const { fileName } = this.state;
-    const { 
-      size, 
+    const {
+      size,
       placeholder,
-      isDisabled, 
-      scale, 
+      isDisabled,
+      scale,
       hasError,
       hasWarning,
       accept,
+      id,
       onInput, // eslint-disable-line no-unused-vars
-      ...rest 
+      ...rest
     } = this.props;
 
     let iconSize = 0;
 
     switch (size) {
-      case 'base':
+      case "base":
         iconSize = 15;
         break;
-      case 'middle':
+      case "middle":
         iconSize = 15;
         break;
-      case 'big':
+      case "big":
         iconSize = 16;
         break;
-      case 'huge':
+      case "huge":
         iconSize = 16;
         break;
-      case 'large': 
+      case "large":
         iconSize = 16;
         break;
     }
-    
-    return( 
-      <StyledFileInput 
-        size={size} 
+
+    return (
+      <StyledFileInput
+        size={size}
         scale={scale ? 1 : 0}
         hasError={hasError}
         hasWarning={hasWarning}
@@ -187,17 +216,15 @@ class FileInput extends Component {
         />
         <input
           type="file"
+          id={id}
           ref={this.inputRef}
-          style={{ display: 'none' }}
+          style={{ display: "none" }}
           accept={accept}
           onInput={this.onInputFile}
         />
-        <div 
-          className="icon" 
-          onClick={this.onIconFileClick}
-        >
-          <IconButton 
-            className='icon-button'
+        <div className="icon" onClick={this.onIconFileClick}>
+          <IconButton
+            className="icon-button"
             iconName={"CatalogFolderIcon"}
             color={"#A3A9AE"}
             size={iconSize}
@@ -205,14 +232,14 @@ class FileInput extends Component {
           />
         </div>
       </StyledFileInput>
-    )
+    );
   }
 }
 
 FileInput.propTypes = {
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   placeholder: PropTypes.string,
-  size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'large']),
+  size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
   scale: PropTypes.bool,
   className: PropTypes.string,
   hasError: PropTypes.bool,
@@ -225,12 +252,12 @@ FileInput.propTypes = {
 };
 
 FileInput.defaultProps = {
-  size: 'base',
+  size: "base",
   scale: false,
   hasWarning: false,
   hasError: false,
   isDisabled: false,
-  accept: ''
-}
+  accept: ""
+};
 
-export default FileInput;
\ No newline at end of file
+export default FileInput;

From ca16bff3d029137fb052d47a6f884e2f509b8a24 Mon Sep 17 00:00:00 2001
From: TatianaLopaeva <talopaeva@gmail.com>
Date: Mon, 7 Sep 2020 14:34:51 +0300
Subject: [PATCH 3/4] Deleted text about Created Portals

---
 .../pages/PaymentsEnterprise/locales/en/translation.json       | 3 +--
 .../pages/PaymentsEnterprise/locales/ru/translation.json       | 1 -
 .../PaymentsEnterprise/sub-components/header-container.js      | 3 ---
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/locales/en/translation.json b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/locales/en/translation.json
index e4cd2d2cf9..1c4910f002 100644
--- a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/locales/en/translation.json
+++ b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/locales/en/translation.json
@@ -1,7 +1,7 @@
 {
   "PurchaseQuestions": "For any purchase questions, contact us at ",
   "TechnicalIssues": "For for solving technical issues, use",
-  "SubscriptionAndUpdatesExpires": "Your subscription for support and updates expires on",
+  "SubscriptionAndUpdatesExpires": "Your subscription for support and updates expires on ",
   "OnlyOfficeEditor": "ONLYOFFICE editors with pro features",
   "PrivateRooom": "Private Rooom for encrypted collaboretion",
   "WebEditors": "Mobile web editors",
@@ -15,7 +15,6 @@
   "LicenseIsNotValid": "Licence  is not valid",
   "LoadingLicenseError": "Make sure you choose the right file",
   "LoadingLicenseSuccess": "License activated successfully",
-  "createdPortals": "Number of portals you've created",
   "OrganizationName": "ONLYOFFICE",
   "SupportNotAvailable": "Support is no longer available for your license since ",
   "ThanksToUser": "Thank you for having checked out ONLYOFFICE!",
diff --git a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/locales/ru/translation.json b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/locales/ru/translation.json
index 835ba86fab..cfa660a383 100644
--- a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/locales/ru/translation.json
+++ b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/locales/ru/translation.json
@@ -15,7 +15,6 @@
   "LicenseIsNotValid": "Лицензия не действительна",
   "LoadingLicenseError": "Проверьте загружаемый файл",
   "LoadingLicenseSuccess": "Лицензия успешно активирована",
-  "createdPortals": " Порталы, созданные вами:",
   "OrganizationName": "ONLYOFFICE",
   "SupportNotAvailable": "Техническая поддержка больше не доступна для вашей лицензии с ",
   "ThanksToUser": "Thank you for having checked out ONLYOFFICE!",
diff --git a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/header-container.js b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/header-container.js
index 146174ad8f..5368efe624 100644
--- a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/header-container.js
+++ b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/header-container.js
@@ -99,9 +99,6 @@ const HeaderContainer = ({
         {/* Техническая поддержка и обновления недоступны для вашей лицензии с 1
           марта 2021 года. */}
       </Text>
-      {/* <Text className="payments-header-additional_portals">
-          {t("createdPortals")} {createPortals}
-        </Text> */}
     </StyledHeader>
   ) : !trialMode ? (
     <StyledHeader>

From e802727b1b1f4f93114e3b567bed724bdda7ae3e Mon Sep 17 00:00:00 2001
From: TatianaLopaeva <talopaeva@gmail.com>
Date: Mon, 7 Sep 2020 14:46:58 +0300
Subject: [PATCH 4/4] Changed style for buttons

---
 .../sub-components/button-container.js                   | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/button-container.js b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/button-container.js
index b71041d47b..3d52cf25fc 100644
--- a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/button-container.js
+++ b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/button-container.js
@@ -23,20 +23,17 @@ const StyledButtonContainer = styled.div`
     line-height: 20px;
   }
   .button-buy {
-    /* width: 107px; */
     margin: 32px 14px 32px 32px;
   }
 
   .button-upload {
-    /* width: 153px; */
     margin: 32px 0px 32px 0px;
-    /* z-index: 8; */
   }
 
   @media ${tablet} {
     width: 600px;
     height: 168px;
-
+    display: block;
     .button-buy {
       width: 536px;
 
@@ -49,10 +46,6 @@ const StyledButtonContainer = styled.div`
 
       border-radius: 3px;
     }
-    .input {
-      bottom: 0px;
-      left: 0px;
-    }
   }
   @media (max-width: 632px) {
     width: 343px;