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 Link from "@docspace/components/link";
import { StyledContactComponent } from "../PortalSettings/categories/payments/Standalone/StyledComponent";
import { StyledContactComponent } from "./StyledComponent";
const ContactContainer = (props) => {
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 demonstrationUrl = "https://www.onlyoffice.com/demo-order.aspx";
return (
<>
<StyledContactComponent>
<div className="payments_contact">
<Text
fontWeight={600}
color={theme.client.settings.payment.contactContainer.textColor}
>
<Trans
i18nKey="UpgradeToProBannerInformationAboutShort"
ns="PaymentsEnterprise"
t={t}
{isCommunity && (
<StyledContactComponent>
<div className="payments_contact">
<Text
fontWeight={600}
color={theme.client.settings.payment.contactContainer.textColor}
>
Learn more about Enterprise Edition
<Link
target="_blank"
tag="a"
fontWeight="600"
href={officialWebsiteUrl}
color={theme.client.settings.payment.contactContainer.linkColor}
<Trans
i18nKey="UpgradeToProBannerInformationAboutShort"
ns="PaymentsEnterprise"
t={t}
>
on the official website
</Link>
</Trans>
</Text>
</div>
<div className="payments_contact">
<Text
fontWeight={600}
color={theme.client.settings.payment.contactContainer.textColor}
>
<Trans
i18nKey="UpgradeToProBannerInformationDemo"
ns="PaymentsEnterprise"
t={t}
Learn more about Enterprise Edition
<Link
target="_blank"
tag="a"
fontWeight="600"
href={officialWebsiteUrl}
color={
theme.client.settings.payment.contactContainer.linkColor
}
>
on the official website
</Link>
</Trans>
</Text>
</div>
<div className="payments_contact">
<Text
fontWeight={600}
color={theme.client.settings.payment.contactContainer.textColor}
>
Request demonstration
<Link
target="_blank"
tag="a"
fontWeight="600"
href={demonstrationUrl}
color={theme.client.settings.payment.contactContainer.linkColor}
<Trans
i18nKey="UpgradeToProBannerInformationDemo"
ns="PaymentsEnterprise"
t={t}
>
here
</Link>
</Trans>
</Text>
</div>
</StyledContactComponent>
Request demonstration
<Link
target="_blank"
tag="a"
fontWeight="600"
href={demonstrationUrl}
color={
theme.client.settings.payment.contactContainer.linkColor
}
>
here
</Link>
</Trans>
</Text>
</div>
</StyledContactComponent>
)}
<StyledContactComponent>
<div className="payments_contact">
<Text
@ -118,8 +124,8 @@ const ContactContainer = (props) => {
};
export default inject(({ auth, payments }) => {
const { settingsStore } = auth;
const { settingsStore, isCommunity } = auth;
const { helpUrl, salesEmail } = payments;
const { theme } = settingsStore;
return { helpUrl, salesEmail, theme };
return { helpUrl, salesEmail, theme, isCommunity };
})(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";
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`
max-width: 660px;
.official-documentation {
@ -50,18 +16,4 @@ const StyledComponent = styled.div`
}
`;
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, StyledComponent, StyledContactComponent };
export default StyledComponent;

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 Loaders from "@docspace/common/components/Loaders";
import BenefitsContainer from "./BenefitsContainer";
import { StyledComponent } from "./StyledComponent";
import BenefitsContainer from "SRC_DIR/components/StandaloneComponents/BenefitsContainer";
import StyledComponent from "./StyledComponent";
import OfficialDocumentation from "./sub-components/OfficialDocumentation";
import ContactContainer from "./ContactContainer";
import ContactContainer from "SRC_DIR/components/StandaloneComponents/ContactContainer";
const Bonus = ({ standaloneInit, isInitPaymentPage }) => {
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 { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
import { StyledComponent } from "../StyledComponent";
import StyledComponent from "../StyledComponent";
const OfficialDocumentation = ({ dataBackupUrl }) => {
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 { StyledEnterpriseComponent } from "./StyledComponent";
import BenefitsContainer from "../../../../Bonus/BenefitsContainer";
import BenefitsContainer from "SRC_DIR/components/StandaloneComponents/BenefitsContainer";
import ButtonContainer from "./sub-components/ButtonContainer";
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 { StyledEnterpriseComponent } from "./StyledComponent";
import BenefitsContainer from "../../../../Bonus/BenefitsContainer";
import BenefitsContainer from "SRC_DIR/components/StandaloneComponents/BenefitsContainer";
import ButtonContainer from "./sub-components/ButtonContainer";
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 { StyledComponent } from "./StyledComponent";
import ContactContainer from "./ContactContainer";
import ContactContainer from "SRC_DIR/components/StandaloneComponents/ContactContainer";
import EnterpriseContainer from "./EnterpriseContainer";
import TrialContainer from "./TrialContainer";
import Loaders from "@docspace/common/components/Loaders";
@ -48,7 +48,7 @@ const StandalonePage = (props) => {
<StyledComponent>
{isTrial ? <TrialContainer t={t} /> : <EnterpriseContainer t={t} />}
<LicenseContainer t={t} />
<ContactContainer t={t} />
<ContactContainer />
</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));