Merge branch 'feature/payments-enterprise' of github.com:ONLYOFFICE/AppServer into feature/payments-enterprise

2020-09-07 18:42:46 +03:00 · 2020-09-07 18:42:46 +03:00 · b357a52f7f
commit b357a52f7f
parent 52104fafd6 e802727b1b
6 changed files with 162 additions and 151 deletions
--- 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);
--- 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!",
--- 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!",
--- 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,39 +10,30 @@ 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;
+    margin: 32px 14px 32px 32px;
  }
+
  .button-upload {
-    width: 153px;
-    margin: 32px 612px 32px 0px;
+    margin: 32px 0px 32px 0px;
  }

-  .input {
-    position: absolute;
-
-    left: 155px; /*width of button-buy and margin*/
-    bottom: 0px;
-    opacity: 0;
-    z-index: 1;
-  }
  @media ${tablet} {
    width: 600px;
    height: 168px;
-
+    display: block;
    .button-buy {
      width: 536px;

@ -55,10 +46,6 @@ const StyledButtonContainer = styled.div`

      border-radius: 3px;
    }
-    .input {
-      bottom: 0px;
-      left: 0px;
-    }
  }
  @media (max-width: 632px) {
    width: 343px;
@ -72,35 +59,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,
--- 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(
@ -105,9 +99,6 @@ const HeaderContainer = ({
        {/* Техническая поддержка и обновления недоступны для вашей лицензии с 1
          марта 2021 года. */}
      </Text>
-      {/* <Text className="payments-header-additional_portals">
-          {t("createdPortals")} {createPortals}
-        </Text> */}
    </StyledHeader>
  ) : !trialMode ? (
    <StyledHeader>
--- 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;
+export default FileInput;