Web: Common components moved to a separate folder.
This commit is contained in:
parent
94388c0616
commit
76fd711645
@ -6,17 +6,18 @@ import { Trans, useTranslation } from "react-i18next";
|
|||||||
import Text from "@docspace/components/text";
|
import Text from "@docspace/components/text";
|
||||||
import Link from "@docspace/components/link";
|
import Link from "@docspace/components/link";
|
||||||
|
|
||||||
import { StyledContactComponent } from "../PortalSettings/categories/payments/Standalone/StyledComponent";
|
import { StyledContactComponent } from "./StyledComponent";
|
||||||
const ContactContainer = (props) => {
|
const ContactContainer = (props) => {
|
||||||
const { t } = useTranslation("PaymentsEnterprise");
|
const { t } = useTranslation("PaymentsEnterprise");
|
||||||
|
|
||||||
const { helpUrl, salesEmail, theme } = props;
|
const { helpUrl, salesEmail, theme, isCommunity } = props;
|
||||||
|
|
||||||
const officialWebsiteUrl = "https://www.onlyoffice.com/for-enterprises.aspx";
|
const officialWebsiteUrl = "https://www.onlyoffice.com/for-enterprises.aspx";
|
||||||
const demonstrationUrl = "https://www.onlyoffice.com/demo-order.aspx";
|
const demonstrationUrl = "https://www.onlyoffice.com/demo-order.aspx";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{isCommunity && (
|
||||||
<StyledContactComponent>
|
<StyledContactComponent>
|
||||||
<div className="payments_contact">
|
<div className="payments_contact">
|
||||||
<Text
|
<Text
|
||||||
@ -34,7 +35,9 @@ const ContactContainer = (props) => {
|
|||||||
tag="a"
|
tag="a"
|
||||||
fontWeight="600"
|
fontWeight="600"
|
||||||
href={officialWebsiteUrl}
|
href={officialWebsiteUrl}
|
||||||
color={theme.client.settings.payment.contactContainer.linkColor}
|
color={
|
||||||
|
theme.client.settings.payment.contactContainer.linkColor
|
||||||
|
}
|
||||||
>
|
>
|
||||||
on the official website
|
on the official website
|
||||||
</Link>
|
</Link>
|
||||||
@ -57,7 +60,9 @@ const ContactContainer = (props) => {
|
|||||||
tag="a"
|
tag="a"
|
||||||
fontWeight="600"
|
fontWeight="600"
|
||||||
href={demonstrationUrl}
|
href={demonstrationUrl}
|
||||||
color={theme.client.settings.payment.contactContainer.linkColor}
|
color={
|
||||||
|
theme.client.settings.payment.contactContainer.linkColor
|
||||||
|
}
|
||||||
>
|
>
|
||||||
here
|
here
|
||||||
</Link>
|
</Link>
|
||||||
@ -65,6 +70,7 @@ const ContactContainer = (props) => {
|
|||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
</StyledContactComponent>
|
</StyledContactComponent>
|
||||||
|
)}
|
||||||
<StyledContactComponent>
|
<StyledContactComponent>
|
||||||
<div className="payments_contact">
|
<div className="payments_contact">
|
||||||
<Text
|
<Text
|
||||||
@ -118,8 +124,8 @@ const ContactContainer = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default inject(({ auth, payments }) => {
|
export default inject(({ auth, payments }) => {
|
||||||
const { settingsStore } = auth;
|
const { settingsStore, isCommunity } = auth;
|
||||||
const { helpUrl, salesEmail } = payments;
|
const { helpUrl, salesEmail } = payments;
|
||||||
const { theme } = settingsStore;
|
const { theme } = settingsStore;
|
||||||
return { helpUrl, salesEmail, theme };
|
return { helpUrl, salesEmail, theme, isCommunity };
|
||||||
})(withRouter(observer(ContactContainer)));
|
})(withRouter(observer(ContactContainer)));
|
@ -0,0 +1,51 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
const StyledBenefitsBody = styled.div`
|
||||||
|
margin: 20px 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: ${(props) => props.theme.client.settings.payment.border};
|
||||||
|
max-width: 660px;
|
||||||
|
|
||||||
|
padding: 23px;
|
||||||
|
|
||||||
|
background: ${(props) =>
|
||||||
|
props.theme.client.settings.payment.backgroundBenefitsColor};
|
||||||
|
|
||||||
|
.benefits-title {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.payments-benefits {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 24px 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
.benefits-svg {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
.benefits-description {
|
||||||
|
p:first-child {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.payments-benefits ~ .payments-benefits {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledContactComponent = styled.div`
|
||||||
|
margin-top: 16px;
|
||||||
|
max-width: 504px;
|
||||||
|
.payments_contact {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
p {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
export { StyledBenefitsBody, StyledContactComponent };
|
@ -1,39 +1,5 @@
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
const StyledBenefitsBody = styled.div`
|
|
||||||
margin: 20px 0;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: ${(props) => props.theme.client.settings.payment.border};
|
|
||||||
max-width: 660px;
|
|
||||||
|
|
||||||
padding: 23px;
|
|
||||||
|
|
||||||
background: ${(props) =>
|
|
||||||
props.theme.client.settings.payment.backgroundBenefitsColor};
|
|
||||||
|
|
||||||
.benefits-title {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.payments-benefits {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 24px 1fr;
|
|
||||||
gap: 10px;
|
|
||||||
.benefits-svg {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
padding-top: 4px;
|
|
||||||
}
|
|
||||||
.benefits-description {
|
|
||||||
p:first-child {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.payments-benefits ~ .payments-benefits {
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledComponent = styled.div`
|
const StyledComponent = styled.div`
|
||||||
max-width: 660px;
|
max-width: 660px;
|
||||||
.official-documentation {
|
.official-documentation {
|
||||||
@ -50,18 +16,4 @@ const StyledComponent = styled.div`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledContactComponent = styled.div`
|
export default StyledComponent;
|
||||||
margin-top: 16px;
|
|
||||||
max-width: 504px;
|
|
||||||
.payments_contact {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
p {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
export { StyledBenefitsBody, StyledComponent, StyledContactComponent };
|
|
||||||
|
@ -5,10 +5,10 @@ import { observer, inject } from "mobx-react";
|
|||||||
import Text from "@docspace/components/text";
|
import Text from "@docspace/components/text";
|
||||||
import Loaders from "@docspace/common/components/Loaders";
|
import Loaders from "@docspace/common/components/Loaders";
|
||||||
|
|
||||||
import BenefitsContainer from "./BenefitsContainer";
|
import BenefitsContainer from "SRC_DIR/components/StandaloneComponents/BenefitsContainer";
|
||||||
import { StyledComponent } from "./StyledComponent";
|
import StyledComponent from "./StyledComponent";
|
||||||
import OfficialDocumentation from "./sub-components/OfficialDocumentation";
|
import OfficialDocumentation from "./sub-components/OfficialDocumentation";
|
||||||
import ContactContainer from "./ContactContainer";
|
import ContactContainer from "SRC_DIR/components/StandaloneComponents/ContactContainer";
|
||||||
|
|
||||||
const Bonus = ({ standaloneInit, isInitPaymentPage }) => {
|
const Bonus = ({ standaloneInit, isInitPaymentPage }) => {
|
||||||
const { t, ready } = useTranslation("PaymentsEnterprise");
|
const { t, ready } = useTranslation("PaymentsEnterprise");
|
||||||
|
@ -5,7 +5,7 @@ import { observer, inject } from "mobx-react";
|
|||||||
import Text from "@docspace/components/text";
|
import Text from "@docspace/components/text";
|
||||||
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
||||||
|
|
||||||
import { StyledComponent } from "../StyledComponent";
|
import StyledComponent from "../StyledComponent";
|
||||||
|
|
||||||
const OfficialDocumentation = ({ dataBackupUrl }) => {
|
const OfficialDocumentation = ({ dataBackupUrl }) => {
|
||||||
const { t } = useTranslation("PaymentsEnterprise");
|
const { t } = useTranslation("PaymentsEnterprise");
|
||||||
|
@ -1,71 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { withRouter } from "react-router";
|
|
||||||
import { inject, observer } from "mobx-react";
|
|
||||||
import { Trans } from "react-i18next";
|
|
||||||
|
|
||||||
import Text from "@docspace/components/text";
|
|
||||||
import Link from "@docspace/components/link";
|
|
||||||
|
|
||||||
import { StyledContactComponent } from "./StyledComponent";
|
|
||||||
const ContactContainer = (props) => {
|
|
||||||
const { helpUrl, salesEmail, t, theme } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StyledContactComponent>
|
|
||||||
<div className="payments_contact">
|
|
||||||
<Text
|
|
||||||
fontWeight={600}
|
|
||||||
color={theme.client.settings.payment.contactContainer.textColor}
|
|
||||||
>
|
|
||||||
<Trans
|
|
||||||
i18nKey="UpgradeToProBannerInformationPurchase"
|
|
||||||
ns="PaymentsEnterprise"
|
|
||||||
t={t}
|
|
||||||
>
|
|
||||||
Ask purchase questions at
|
|
||||||
<Link
|
|
||||||
fontWeight="600"
|
|
||||||
target="_blank"
|
|
||||||
tag="a"
|
|
||||||
href={`mailto:${salesEmail}`}
|
|
||||||
color={theme.client.settings.payment.contactContainer.linkColor}
|
|
||||||
>
|
|
||||||
{{ email: salesEmail }}
|
|
||||||
</Link>
|
|
||||||
</Trans>
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="payments_contact">
|
|
||||||
<Text
|
|
||||||
fontWeight={600}
|
|
||||||
color={theme.client.settings.payment.contactContainer.textColor}
|
|
||||||
>
|
|
||||||
<Trans
|
|
||||||
i18nKey="UpgradeToProBannerInformationSupport"
|
|
||||||
ns="PaymentsEnterprise"
|
|
||||||
t={t}
|
|
||||||
>
|
|
||||||
Get tech assistance
|
|
||||||
<Link
|
|
||||||
target="_blank"
|
|
||||||
tag="a"
|
|
||||||
fontWeight="600"
|
|
||||||
href={helpUrl}
|
|
||||||
color={theme.client.settings.payment.contactContainer.linkColor}
|
|
||||||
>
|
|
||||||
{{ helpUrl }}
|
|
||||||
</Link>
|
|
||||||
</Trans>
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</StyledContactComponent>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default inject(({ auth, payments }) => {
|
|
||||||
const { settingsStore } = auth;
|
|
||||||
const { helpUrl, salesEmail } = payments;
|
|
||||||
const { theme } = settingsStore;
|
|
||||||
return { helpUrl, salesEmail, theme };
|
|
||||||
})(withRouter(observer(ContactContainer)));
|
|
@ -7,7 +7,7 @@ import Text from "@docspace/components/text";
|
|||||||
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
||||||
|
|
||||||
import { StyledEnterpriseComponent } from "./StyledComponent";
|
import { StyledEnterpriseComponent } from "./StyledComponent";
|
||||||
import BenefitsContainer from "../../../../Bonus/BenefitsContainer";
|
import BenefitsContainer from "SRC_DIR/components/StandaloneComponents/BenefitsContainer";
|
||||||
import ButtonContainer from "./sub-components/ButtonContainer";
|
import ButtonContainer from "./sub-components/ButtonContainer";
|
||||||
import TariffTitleContainer from "./sub-components/TariffTitleContainer";
|
import TariffTitleContainer from "./sub-components/TariffTitleContainer";
|
||||||
|
|
||||||
|
@ -5,7 +5,7 @@ import { inject, observer } from "mobx-react";
|
|||||||
import Text from "@docspace/components/text";
|
import Text from "@docspace/components/text";
|
||||||
|
|
||||||
import { StyledEnterpriseComponent } from "./StyledComponent";
|
import { StyledEnterpriseComponent } from "./StyledComponent";
|
||||||
import BenefitsContainer from "../../../../Bonus/BenefitsContainer";
|
import BenefitsContainer from "SRC_DIR/components/StandaloneComponents/BenefitsContainer";
|
||||||
import ButtonContainer from "./sub-components/ButtonContainer";
|
import ButtonContainer from "./sub-components/ButtonContainer";
|
||||||
import TariffTitleContainer from "./sub-components/TariffTitleContainer";
|
import TariffTitleContainer from "./sub-components/TariffTitleContainer";
|
||||||
|
|
||||||
|
@ -7,7 +7,7 @@ import { setDocumentTitle } from "@docspace/client/src/helpers/filesUtils";
|
|||||||
|
|
||||||
import LicenseContainer from "./LicenseContainer";
|
import LicenseContainer from "./LicenseContainer";
|
||||||
import { StyledComponent } from "./StyledComponent";
|
import { StyledComponent } from "./StyledComponent";
|
||||||
import ContactContainer from "./ContactContainer";
|
import ContactContainer from "SRC_DIR/components/StandaloneComponents/ContactContainer";
|
||||||
import EnterpriseContainer from "./EnterpriseContainer";
|
import EnterpriseContainer from "./EnterpriseContainer";
|
||||||
import TrialContainer from "./TrialContainer";
|
import TrialContainer from "./TrialContainer";
|
||||||
import Loaders from "@docspace/common/components/Loaders";
|
import Loaders from "@docspace/common/components/Loaders";
|
||||||
@ -48,7 +48,7 @@ const StandalonePage = (props) => {
|
|||||||
<StyledComponent>
|
<StyledComponent>
|
||||||
{isTrial ? <TrialContainer t={t} /> : <EnterpriseContainer t={t} />}
|
{isTrial ? <TrialContainer t={t} /> : <EnterpriseContainer t={t} />}
|
||||||
<LicenseContainer t={t} />
|
<LicenseContainer t={t} />
|
||||||
<ContactContainer t={t} />
|
<ContactContainer />
|
||||||
</StyledComponent>
|
</StyledComponent>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,99 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { inject, observer } from "mobx-react";
|
|
||||||
import { ReactSVG } from "react-svg";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
|
|
||||||
import Text from "@docspace/components/text";
|
|
||||||
|
|
||||||
import LifetimeLicenseReactSvgUrl from "PUBLIC_DIR/images/lifetime_license.react.svg?url";
|
|
||||||
import TechSupportReactSvgUrl from "PUBLIC_DIR/images/tech_support.react.svg?url";
|
|
||||||
import MobileEditingReactSvgUrl from "PUBLIC_DIR/images/mobile_editing.react.svg?url";
|
|
||||||
import ScalabilityReactSvgUrl from "PUBLIC_DIR/images/scalability.react.svg?url";
|
|
||||||
|
|
||||||
import { StyledBenefitsBody } from "../StyledComponent";
|
|
||||||
|
|
||||||
const BenefitsContainer = ({ theme, isTrial, isEnterprise, isCommunity }) => {
|
|
||||||
const { t } = useTranslation("PaymentsEnterprise");
|
|
||||||
|
|
||||||
const title =
|
|
||||||
isEnterprise || isTrial
|
|
||||||
? t("ActivateToProBannerHeaderTrial")
|
|
||||||
: t("UpgradeToProBannerHeader");
|
|
||||||
|
|
||||||
const features = () => {
|
|
||||||
const techSupport = {
|
|
||||||
imag: TechSupportReactSvgUrl,
|
|
||||||
title: t("UpgradeToProBannerItemSupportHeader"),
|
|
||||||
description: t("UpgradeToProBannerItemSupportDescr"),
|
|
||||||
};
|
|
||||||
|
|
||||||
const mobileEditing = {
|
|
||||||
imag: MobileEditingReactSvgUrl,
|
|
||||||
title: t("UpgradeToProBannerItemMobileHeader"),
|
|
||||||
description: t("UpgradeToProBannerItemMobileDescr"),
|
|
||||||
};
|
|
||||||
|
|
||||||
const lifetimeLicense = {
|
|
||||||
imag: LifetimeLicenseReactSvgUrl,
|
|
||||||
title: t("UpgradeToProBannerItemLicenseHeader"),
|
|
||||||
description: t("UpgradeToProBannerItemLicenseDescr"),
|
|
||||||
};
|
|
||||||
|
|
||||||
const scalabilityClustering = {
|
|
||||||
imag: ScalabilityReactSvgUrl,
|
|
||||||
title: t("UpgradeToProBannerItemScalabilityHeader"),
|
|
||||||
description: t("UpgradeToProBannerItemScalabilityDescr"),
|
|
||||||
};
|
|
||||||
|
|
||||||
const featuresArray = [];
|
|
||||||
|
|
||||||
isEnterprise
|
|
||||||
? featuresArray.push(lifetimeLicense, techSupport)
|
|
||||||
: isCommunity
|
|
||||||
? featuresArray.push(mobileEditing, techSupport)
|
|
||||||
: featuresArray.push(
|
|
||||||
scalabilityClustering,
|
|
||||||
mobileEditing,
|
|
||||||
lifetimeLicense,
|
|
||||||
techSupport
|
|
||||||
);
|
|
||||||
|
|
||||||
return featuresArray.map((item, index) => {
|
|
||||||
return (
|
|
||||||
<div className="payments-benefits" key={index}>
|
|
||||||
<ReactSVG src={item.imag} className="benefits-svg" />
|
|
||||||
<div className="benefits-description">
|
|
||||||
<Text fontWeight={600}>{item.title}</Text>
|
|
||||||
<Text>{item.description}</Text>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StyledBenefitsBody className="benefits-container" theme={theme}>
|
|
||||||
<Text fontSize={"16px"} fontWeight={600} className="benefits-title">
|
|
||||||
{title}
|
|
||||||
</Text>
|
|
||||||
{features()}
|
|
||||||
</StyledBenefitsBody>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default inject(({ auth }) => {
|
|
||||||
const { paymentQuotasStore, settingsStore } = auth;
|
|
||||||
const { theme } = settingsStore;
|
|
||||||
const { portalPaymentQuotasFeatures } = paymentQuotasStore;
|
|
||||||
|
|
||||||
const isTrial = true,
|
|
||||||
isEnterprise = false,
|
|
||||||
isCommunity = false;
|
|
||||||
return {
|
|
||||||
theme,
|
|
||||||
features: portalPaymentQuotasFeatures,
|
|
||||||
isTrial,
|
|
||||||
isEnterprise,
|
|
||||||
isCommunity,
|
|
||||||
};
|
|
||||||
})(observer(BenefitsContainer));
|
|
Loading…
Reference in New Issue
Block a user