IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Common components moved to a separate folder.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2023-05-24 10:48:23 +03:00
parent 94388c0616
commit 76fd711645
11 changed files with 114 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
packages/client/src/pages/Bonus/BenefitsContainer.js → packages/client/src/components/StandaloneComponents/BenefitsContainer.js
View File

102
packages/client/src/pages/Bonus/ContactContainer.js → packages/client/src/components/StandaloneComponents/ContactContainer.js
View File

@ -6,65 +6,71 @@ 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 (
<> <>
<StyledContactComponent> {isCommunity && (
<div className="payments_contact"> <StyledContactComponent>
<Text <div className="payments_contact">
fontWeight={600} <Text
color={theme.client.settings.payment.contactContainer.textColor} fontWeight={600}
> color={theme.client.settings.payment.contactContainer.textColor}
<Trans
i18nKey="UpgradeToProBannerInformationAboutShort"
ns="PaymentsEnterprise"
t={t}
> >
Learn more about Enterprise Edition <Trans
<Link i18nKey="UpgradeToProBannerInformationAboutShort"
target="_blank" ns="PaymentsEnterprise"
tag="a" t={t}
fontWeight="600"
href={officialWebsiteUrl}
color={theme.client.settings.payment.contactContainer.linkColor}
> >
on the official website Learn more about Enterprise Edition
</Link> <Link
</Trans> target="_blank"
</Text> tag="a"
</div> fontWeight="600"
<div className="payments_contact"> href={officialWebsiteUrl}
<Text color={
fontWeight={600} theme.client.settings.payment.contactContainer.linkColor
color={theme.client.settings.payment.contactContainer.textColor} }
> >
<Trans on the official website
i18nKey="UpgradeToProBannerInformationDemo" </Link>
ns="PaymentsEnterprise" </Trans>
t={t} </Text>
</div>
<div className="payments_contact">
<Text
fontWeight={600}
color={theme.client.settings.payment.contactContainer.textColor}
> >
Request demonstration <Trans
<Link i18nKey="UpgradeToProBannerInformationDemo"
target="_blank" ns="PaymentsEnterprise"
tag="a" t={t}
fontWeight="600"
href={demonstrationUrl}
color={theme.client.settings.payment.contactContainer.linkColor}
> >
here Request demonstration
</Link> <Link
</Trans> target="_blank"
</Text> tag="a"
</div> fontWeight="600"
</StyledContactComponent> href={demonstrationUrl}
color={
theme.client.settings.payment.contactContainer.linkColor
}
>
here
</Link>
</Trans>
</Text>
</div>
</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)));

51
packages/client/src/components/StandaloneComponents/StyledComponent.js Normal file
View File

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

50
packages/client/src/pages/Bonus/StyledComponent.js
View File

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

6
packages/client/src/pages/Bonus/index.js
View File

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

2
packages/client/src/pages/Bonus/sub-components/OfficialDocumentation.js
View File

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

71
packages/client/src/pages/PortalSettings/categories/payments/Standalone/ContactContainer.js
View File

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

2
packages/client/src/pages/PortalSettings/categories/payments/Standalone/EnterpriseContainer.js
View File

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

2
packages/client/src/pages/PortalSettings/categories/payments/Standalone/TrialContainer.js
View File

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

4
packages/client/src/pages/PortalSettings/categories/payments/Standalone/index.js
View File

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

99
packages/client/src/pages/PortalSettings/categories/payments/Standalone/sub-components/BenefitsContainer.js
View File

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