Merge branch 'feature/payments-enterprise' of github.com:ONLYOFFICE/AppServer into feature/payments-enterprise
This commit is contained in:
commit
b357a52f7f
@ -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);
|
||||
|
@ -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!",
|
||||
|
@ -15,7 +15,6 @@
|
||||
"LicenseIsNotValid": "Лицензия не действительна",
|
||||
"LoadingLicenseError": "Проверьте загружаемый файл",
|
||||
"LoadingLicenseSuccess": "Лицензия успешно активирована",
|
||||
"createdPortals": " Порталы, созданные вами:",
|
||||
"OrganizationName": "ONLYOFFICE",
|
||||
"SupportNotAvailable": "Техническая поддержка больше не доступна для вашей лицензии с ",
|
||||
"ThanksToUser": "Thank you for having checked out ONLYOFFICE!",
|
||||
|
@ -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,12 +59,11 @@ const StyledButtonContainer = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const ButtonContainer = ({
|
||||
t,
|
||||
buyUrl,
|
||||
onButtonClickBuy,
|
||||
onButtonClickUpload,
|
||||
}) => {
|
||||
class ButtonContainer extends React.Component {
|
||||
onUploadFileClick = () => this.inputFilesElement;
|
||||
|
||||
render() {
|
||||
const { t, buyUrl, onButtonClickBuy, onButtonClickUpload } = this.props;
|
||||
return (
|
||||
<StyledButtonContainer>
|
||||
<Button
|
||||
@ -87,20 +73,27 @@ const ButtonContainer = ({
|
||||
onClick={onButtonClickBuy}
|
||||
/>
|
||||
<FileInput
|
||||
id="UploadLicenseFile"
|
||||
type="file"
|
||||
className="button-payments-enterprise button-upload input"
|
||||
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,
|
||||
|
@ -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>
|
||||
|
@ -1,47 +1,61 @@
|
||||
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'};
|
||||
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 {
|
||||
.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"};
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,30 +67,42 @@ 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")};
|
||||
}
|
||||
`;
|
||||
|
||||
@ -87,13 +113,13 @@ class FileInput extends Component {
|
||||
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 => {
|
||||
@ -104,30 +130,32 @@ class FileInput extends Component {
|
||||
}
|
||||
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({
|
||||
this.setState(
|
||||
{
|
||||
fileName: this.inputRef.current.files[0].name,
|
||||
file: this.inputRef.current.files[0]
|
||||
}, () => {
|
||||
},
|
||||
() => {
|
||||
if (onInput) {
|
||||
this.inputRef.current.value = '';
|
||||
this.inputRef.current.value = "";
|
||||
onInput(this.state.file);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
//console.log('render FileInput');
|
||||
@ -140,6 +168,7 @@ class FileInput extends Component {
|
||||
hasError,
|
||||
hasWarning,
|
||||
accept,
|
||||
id,
|
||||
onInput, // eslint-disable-line no-unused-vars
|
||||
...rest
|
||||
} = this.props;
|
||||
@ -147,19 +176,19 @@ class FileInput extends Component {
|
||||
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;
|
||||
}
|
||||
@ -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}
|
||||
>
|
||||
<div className="icon" onClick={this.onIconFileClick}>
|
||||
<IconButton
|
||||
className='icon-button'
|
||||
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;
|
Loading…
Reference in New Issue
Block a user