Refactoring styles, actions and reducer
This commit is contained in:
parent
60cc7c1706
commit
e515be4271
@ -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));
|
||||
|
@ -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 {
|
||||
line-height: 16px;
|
||||
}
|
||||
background: url("images/payments_enterprise.svg") #f8f9f9 bottom 32px right
|
||||
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}>
|
||||
{t("OnlyOfficeEditor")}
|
||||
</Text>
|
||||
<Text isBold={true}>{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}>
|
||||
{t("PrivateRooom")}
|
||||
</Text>
|
||||
<Text isBold={true}>{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}>
|
||||
{t("WebEditors")}
|
||||
</Text>
|
||||
<Text isBold={true}>{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}>
|
||||
{t("FunctionalityAndSecurity")}
|
||||
</Text>
|
||||
<Text isBold={true}>{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}>
|
||||
{t("ProfessionalTechSupport")}
|
||||
</Text>
|
||||
<Text isBold={true}>{t("ProfessionalTechSupport")}</Text>
|
||||
</Box>
|
||||
</div>
|
||||
</Box>
|
||||
</StyledBodyAdvantages>
|
||||
);
|
||||
};
|
||||
|
@ -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 {
|
||||
max-width: 536px;
|
||||
}
|
||||
.button-upload {
|
||||
.button {
|
||||
max-width: 536px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 632px) {
|
||||
.button-buy {
|
||||
min-width: 279px;
|
||||
}
|
||||
.button-upload {
|
||||
.button {
|
||||
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}
|
||||
/>
|
||||
|
@ -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;
|
||||
`;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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) => {
|
||||
dispatch(setLicenseUpload(res));
|
||||
setTimeout(() => {
|
||||
dispatch(getSettingsPayment());
|
||||
}, 50);
|
||||
});
|
||||
return api.settings
|
||||
.setLicense(confirmKey, data)
|
||||
.then(() => dispatch(acceptPaymentsLicense()))
|
||||
.then(() => dispatch(getSettingsPayment()));
|
||||
};
|
||||
}
|
||||
export function acceptPaymentsLicense() {
|
||||
|
@ -1,8 +1,4 @@
|
||||
import {
|
||||
SET_SETTINGS_PAYMENTS_ENTERPRISE,
|
||||
SET_UPLOAD_PAYMENTS_ENTERPRISE_LICENSE,
|
||||
RESET_UPLOADED_LICENSE,
|
||||
} from "./actions";
|
||||
import { SET_SETTINGS_PAYMENTS_ENTERPRISE } 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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user