Web: PortalSettings: Payments: Added trial container.
This commit is contained in:
parent
cf5520958d
commit
662db5e64d
@ -20,13 +20,14 @@
|
||||
"DowngradeNow": "Downgrade now",
|
||||
"ErrorNotification": "Failed to update tariff plan. Try again later or contact the sales department.",
|
||||
"EnterpriseEdition": "You are using ONLYOFFICE DocSpace Enterprise Edition.",
|
||||
"EnterpriseSubscriptionExpiresDate": "Your subscription expires on {{finalDate}}",
|
||||
"EnterpriseExpiresDate": "Your subscription expires on {{finalDate}}",
|
||||
"EnterpriseSubscriptionExpired": "Your subscription to support and updates has expired",
|
||||
"EnterpriseRenewal": "To continue getting support and updates, buy a renewal",
|
||||
"EnterpriseRenewSubscription": "Renew subscription for Enterprise",
|
||||
"EnterprisePersonalRenewal": "To get your personal renewal terms, contact your dedicated manager or write us at <1>{{email}}</1>",
|
||||
"FullEnterpriseVersion": "Buy the full Enterprise version to get",
|
||||
"FreeProFeatures": "Get free access to pro features for 30 days",
|
||||
"FreeDaysLeft": "{{count}} Free days left",
|
||||
"GracePeriodActivatedDescription": "During the grace period, admins cannot create new rooms and add new users. After the due date of the grace period, DocSpace will become unavailable until the payment is made.",
|
||||
"GracePeriodActivatedInfo": "Grace period is effective <1>from {{fromDate}} to {{byDate}}</1> (days remaining: {{delayDaysCount}}).",
|
||||
"InvalidEmailWithActiveSubscription": "Your subscription remains active, but we recommend choosing a new Payer who gets access to subscription settings in DocSpace.",
|
||||
@ -46,8 +47,11 @@
|
||||
"StartupSuggestion": "Do more with {{planName}} plan",
|
||||
"StartupTitle": "You are using free {{planName}} plan",
|
||||
"StripeCustomerPortal": "go to the Stripe customer portal",
|
||||
"SwitchFullEnterprise": "Switch to full Enterprise version",
|
||||
"TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/month</3>",
|
||||
"TechAssistance": "Get tech assistance <1>{{helpUrl}}</1>",
|
||||
"TrialExpiresDate": "Your trial expires on {{finalDate}}",
|
||||
"TrialExpired": "Trial expired",
|
||||
"UpgradeNow": "Upgrade now",
|
||||
"UpgradePlan": "Upgrade plan",
|
||||
"UpgradePlanInfo": "By adding new users you will exceed the maximum number of room members allowed by your current pricing plan.",
|
||||
|
@ -4,60 +4,33 @@ import { inject, observer } from "mobx-react";
|
||||
import { Trans } from "react-i18next";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
import Button from "@docspace/components/button";
|
||||
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
||||
|
||||
import {
|
||||
StyledEnterpriseComponent,
|
||||
StyledButtonComponent,
|
||||
} from "./StyledComponent";
|
||||
import { StyledEnterpriseComponent } from "./StyledComponent";
|
||||
import BenefitsContainer from "./sub-components/BenefitsContainer";
|
||||
import ButtonContainer from "./sub-components/ButtonContainer";
|
||||
import TariffTitleContainer from "./sub-components/TariffTitleContainer";
|
||||
|
||||
const EnterpriseContainer = (props) => {
|
||||
const { buyUrl, salesEmail, t, isSubscriptionExpired, theme } = props;
|
||||
const onClickBuy = () => {
|
||||
window.open(buyUrl, "_blank");
|
||||
};
|
||||
|
||||
const subscriptionDescription = isSubscriptionExpired ? (
|
||||
<Text className="payments_subscription-expired" isBold fontSize="14px">
|
||||
{t("EnterpriseSubscriptionExpired")}
|
||||
</Text>
|
||||
) : (
|
||||
<Text as="span" fontWeight={400} fontSize="14px">
|
||||
{t("EnterpriseSubscriptionExpiresDate", {
|
||||
finalDate: "Tuesday, December 19, 2023.",
|
||||
})}
|
||||
</Text>
|
||||
);
|
||||
const { salesEmail, t, isSubscriptionExpired, theme } = props;
|
||||
|
||||
return (
|
||||
<StyledEnterpriseComponent theme={theme}>
|
||||
<Text fontWeight={700} fontSize={"16px"}>
|
||||
{t("EnterpriseRenewSubscription")}
|
||||
</Text>
|
||||
<div className="payments_subscription">
|
||||
<Text isBold fontSize="14px" as="span">
|
||||
{t("EnterpriseEdition")}{" "}
|
||||
</Text>
|
||||
{subscriptionDescription}
|
||||
</div>
|
||||
|
||||
<TariffTitleContainer
|
||||
t={t}
|
||||
limitedWidth={isSubscriptionExpired}
|
||||
isSubscriptionExpired={isSubscriptionExpired}
|
||||
/>
|
||||
|
||||
{isSubscriptionExpired && <BenefitsContainer t={t} />}
|
||||
<Text
|
||||
fontWeight={400}
|
||||
fontSize="14px"
|
||||
className="payments_renew-subscription"
|
||||
>
|
||||
<Text fontSize="14px" className="payments_renew-subscription">
|
||||
{isSubscriptionExpired ? t("BuyLicense") : t("EnterpriseRenewal")}
|
||||
</Text>
|
||||
<StyledButtonComponent>
|
||||
<Button
|
||||
label={t("BuyNow")}
|
||||
size={"small"}
|
||||
primary
|
||||
onClick={onClickBuy}
|
||||
/>
|
||||
</StyledButtonComponent>
|
||||
<ButtonContainer t={t} />
|
||||
|
||||
<div className="payments_support">
|
||||
<Text>
|
||||
@ -84,7 +57,7 @@ export default inject(({ auth, payments }) => {
|
||||
const { buyUrl, salesEmail } = payments;
|
||||
const { settingsStore } = auth;
|
||||
const { theme } = settingsStore;
|
||||
const isSubscriptionExpired = true;
|
||||
const isSubscriptionExpired = false;
|
||||
|
||||
return { theme, buyUrl, salesEmail, isSubscriptionExpired };
|
||||
})(withRouter(observer(EnterpriseContainer)));
|
||||
|
@ -43,11 +43,7 @@ const StyledEnterpriseComponent = styled.div`
|
||||
margin-bottom: 35px;
|
||||
margin-top: 12px;
|
||||
|
||||
.payments_subscription {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.payments_renew-subscription,
|
||||
.payments_subscription {
|
||||
.payments_renew-subscription {
|
||||
max-width: 660px;
|
||||
}
|
||||
.payments_renew-subscription {
|
||||
@ -56,15 +52,39 @@ const StyledEnterpriseComponent = styled.div`
|
||||
.payments_support {
|
||||
max-width: 503px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledTitleComponent = styled.div`
|
||||
.payments_subscription {
|
||||
max-width: 660px;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: baseline;
|
||||
.title {
|
||||
line-height: 16px;
|
||||
${(props) => props.limitedWidth && "max-width: 376px"};
|
||||
span:first-child {
|
||||
${(props) => props.isSubscriptionExpired && "margin-top: 5px"};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payments_subscription-expired {
|
||||
max-width: fit-content;
|
||||
border: 1px solid
|
||||
${(props) => props.theme.client.settings.payment.warningColor};
|
||||
${(props) =>
|
||||
props.theme.client.settings.payment[
|
||||
props.isSubscriptionExpired ? "warningColor" : "color"
|
||||
]};
|
||||
border-radius: 3px;
|
||||
color: ${(props) => props.theme.client.settings.payment.warningColor};
|
||||
padding: 5px 8px;
|
||||
margin-top: 8px;
|
||||
color: ${(props) =>
|
||||
props.theme.client.settings.payment[
|
||||
props.isSubscriptionExpired ? "warningColor" : "color"
|
||||
]};
|
||||
padding: 2px 8px;
|
||||
height: fit-content;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -74,7 +94,7 @@ const StyledBenefitsBody = styled.div`
|
||||
border: ${(props) => props.theme.client.settings.payment.border};
|
||||
max-width: 660px;
|
||||
|
||||
padding: 24px;
|
||||
padding: 23px;
|
||||
|
||||
background: ${(props) =>
|
||||
props.theme.client.settings.payment.backgroundBenefitsColor};
|
||||
@ -107,4 +127,5 @@ export {
|
||||
StyledEnterpriseComponent,
|
||||
StyledButtonComponent,
|
||||
StyledBenefitsBody,
|
||||
StyledTitleComponent,
|
||||
};
|
||||
|
@ -0,0 +1,42 @@
|
||||
import React from "react";
|
||||
import { withRouter } from "react-router";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
|
||||
import { StyledEnterpriseComponent } from "./StyledComponent";
|
||||
import BenefitsContainer from "./sub-components/BenefitsContainer";
|
||||
import ButtonContainer from "./sub-components/ButtonContainer";
|
||||
import TariffTitleContainer from "./sub-components/TariffTitleContainer";
|
||||
|
||||
const TrialContainer = (props) => {
|
||||
const { salesEmail, t, isSubscriptionExpired, theme } = props;
|
||||
|
||||
return (
|
||||
<StyledEnterpriseComponent theme={theme}>
|
||||
<Text fontWeight={700} fontSize={"16px"}>
|
||||
{t("SwitchFullEnterprise")}
|
||||
</Text>
|
||||
<TariffTitleContainer
|
||||
isSubscriptionExpired={isSubscriptionExpired}
|
||||
t={t}
|
||||
isTrial
|
||||
/>
|
||||
|
||||
<BenefitsContainer t={t} />
|
||||
<Text fontSize="14px" className="payments_renew-subscription">
|
||||
{t("BuyLicense")}
|
||||
</Text>
|
||||
<ButtonContainer t={t} />
|
||||
</StyledEnterpriseComponent>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, payments }) => {
|
||||
const { buyUrl, salesEmail } = payments;
|
||||
const { settingsStore } = auth;
|
||||
const { theme } = settingsStore;
|
||||
const isSubscriptionExpired = true;
|
||||
|
||||
return { theme, buyUrl, salesEmail, isSubscriptionExpired };
|
||||
})(withRouter(observer(TrialContainer)));
|
@ -11,6 +11,7 @@ import LicenseContainer from "./LicenseContainer";
|
||||
import { StyledComponent } from "./StyledComponent";
|
||||
import ContactContainer from "./ContactContainer";
|
||||
import EnterpriseContainer from "./EnterpriseContainer";
|
||||
import TrialContainer from "./TrialContainer";
|
||||
|
||||
const StandalonePage = (props) => {
|
||||
const {
|
||||
@ -19,6 +20,7 @@ const StandalonePage = (props) => {
|
||||
isLoadedTariffStatus,
|
||||
isLoadedCurrentQuota,
|
||||
isEnterpriseEdition,
|
||||
isTrial,
|
||||
} = props;
|
||||
const { t, ready } = useTranslation([
|
||||
"Payments",
|
||||
@ -56,7 +58,7 @@ const StandalonePage = (props) => {
|
||||
|
||||
return (
|
||||
<StyledComponent>
|
||||
<EnterpriseContainer t={t} />
|
||||
{true ? <TrialContainer t={t} /> : <EnterpriseContainer t={t} />}
|
||||
<LicenseContainer t={t} />
|
||||
<ContactContainer t={t} />
|
||||
</StyledComponent>
|
||||
@ -74,7 +76,11 @@ export default inject(({ auth, payments }) => {
|
||||
const { isLoaded: isLoadedCurrentQuota } = currentQuotaStore;
|
||||
const { isLoaded: isLoadedTariffStatus } = currentTariffStatusStore;
|
||||
|
||||
const isTrial = true,
|
||||
isEnterprise = false;
|
||||
|
||||
return {
|
||||
isTrial,
|
||||
enterpriseInit,
|
||||
isInitPaymentPage,
|
||||
isLoadedTariffStatus,
|
||||
|
@ -66,7 +66,7 @@ const BenefitsContainer = ({
|
||||
<div className="payments-benefits" key={index}>
|
||||
<ReactSVG src={item.imag} className="benefits-svg" />
|
||||
<div className="benefits-description">
|
||||
<Text isBold>{item.title}</Text>
|
||||
<Text fontWeight={600}>{item.title}</Text>
|
||||
<Text>{item.description}</Text>
|
||||
</div>
|
||||
</div>
|
||||
@ -76,7 +76,7 @@ const BenefitsContainer = ({
|
||||
|
||||
return (
|
||||
<StyledBenefitsBody className="benefits-container" theme={theme}>
|
||||
<Text fontSize={"16px"} isBold className="benefits-title">
|
||||
<Text fontSize={"16px"} fontWeight={600} className="benefits-title">
|
||||
{title}
|
||||
</Text>
|
||||
{features()}
|
||||
@ -89,8 +89,8 @@ export default inject(({ auth }) => {
|
||||
const { theme } = settingsStore;
|
||||
const { portalPaymentQuotasFeatures } = paymentQuotasStore;
|
||||
|
||||
const isTrial = false,
|
||||
isEnterprise = true,
|
||||
const isTrial = true,
|
||||
isEnterprise = false,
|
||||
isCommunity = false;
|
||||
return {
|
||||
theme,
|
||||
|
@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
import Button from "@docspace/components/button";
|
||||
|
||||
import { StyledButtonComponent } from "../StyledComponent";
|
||||
|
||||
const ButtonContainer = ({ t, buyUrl }) => {
|
||||
const onClickBuy = () => {
|
||||
window.open(buyUrl, "_blank");
|
||||
};
|
||||
return (
|
||||
<StyledButtonComponent>
|
||||
<Button label={t("BuyNow")} size={"small"} primary onClick={onClickBuy} />
|
||||
</StyledButtonComponent>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ payments }) => {
|
||||
const { buyUrl } = payments;
|
||||
|
||||
return {
|
||||
buyUrl,
|
||||
};
|
||||
})(observer(ButtonContainer));
|
@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
import { StyledTitleComponent } from "../StyledComponent";
|
||||
|
||||
const TariffTitleContainer = ({
|
||||
t,
|
||||
limitedWidth = true,
|
||||
isSubscriptionExpired,
|
||||
isTrial,
|
||||
}) => {
|
||||
const alertComponent = () => {
|
||||
if (isTrial) {
|
||||
return isSubscriptionExpired ? (
|
||||
<Text
|
||||
className="payments_subscription-expired"
|
||||
fontWeight={600}
|
||||
fontSize="14px"
|
||||
>
|
||||
{t("TrialExpired")}
|
||||
</Text>
|
||||
) : (
|
||||
<Text
|
||||
className="payments_subscription-expired"
|
||||
fontWeight={600}
|
||||
fontSize="14px"
|
||||
>
|
||||
{t("FreeDaysLeft", { count: "12" })}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
isSubscriptionExpired && (
|
||||
<Text className="payments_subscription-expired" isBold fontSize="14px">
|
||||
{t("EnterpriseSubscriptionExpired")}
|
||||
</Text>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const expiresDate = () => {
|
||||
if (isTrial) {
|
||||
return t("TrialExpiresDate", {
|
||||
finalDate: "Monday, May 15, 2023",
|
||||
});
|
||||
}
|
||||
return t("EnterpriseExpiresDate", {
|
||||
finalDate: "Tuesday, December 19, 2023.",
|
||||
});
|
||||
};
|
||||
return (
|
||||
<StyledTitleComponent
|
||||
isSubscriptionExpired={isSubscriptionExpired}
|
||||
limitedWidth={limitedWidth}
|
||||
>
|
||||
<div className="payments_subscription">
|
||||
<div className="title">
|
||||
<Text fontWeight={600} fontSize="14px" as="span">
|
||||
{t("EnterpriseEdition")}{" "}
|
||||
</Text>
|
||||
{!isSubscriptionExpired && (
|
||||
<Text fontSize="14px" as="span">
|
||||
{expiresDate()}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
{alertComponent()}
|
||||
</div>
|
||||
</StyledTitleComponent>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ payments }) => {
|
||||
const {} = payments;
|
||||
|
||||
return {};
|
||||
})(observer(TariffTitleContainer));
|
@ -3045,6 +3045,7 @@ const Base = {
|
||||
},
|
||||
|
||||
warningColor: "#F21C0E",
|
||||
color: "#F97A0B",
|
||||
},
|
||||
},
|
||||
|
||||
|
@ -3042,10 +3042,11 @@ const Dark = {
|
||||
iconsColor: "#858585",
|
||||
},
|
||||
contactContainer: {
|
||||
textColor: "#A3A9AE",
|
||||
linkColor: "#657077",
|
||||
textColor: "#ADADAD",
|
||||
linkColor: "#858585",
|
||||
},
|
||||
warningColor: "#E06451",
|
||||
color: "#E17415",
|
||||
},
|
||||
},
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user