Refactoring styles, actions and reducer

This commit is contained in:
TatianaLopaeva 2020-09-23 16:58:02 +03:00
parent 60cc7c1706
commit e515be4271
7 changed files with 39 additions and 103 deletions

View File

@ -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));

View File

@ -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>
);
};

View File

@ -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}
/>

View File

@ -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;
`;

View File

@ -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;

View File

@ -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() {

View File

@ -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;
}