-
-
{formatMessage({id: 'pricing_modal.lookingToSelfHost', defaultMessage: 'Looking to self-host?'})}
-
- trackEvent(
- TELEMETRY_CATEGORIES.CLOUD_PURCHASING,
- 'click_looking_to_self_host',
- )
- }
- href={CloudLinks.DEPLOYMENT_OPTIONS}
- location='pricing_modal_content'
- >{formatMessage({id: 'pricing_modal.reviewDeploymentOptions', defaultMessage: 'Review deployment options'})}
+ {!cloudFreeDeprecated && (
+
+
+
+ {formatMessage({id: 'pricing_modal.lookingToSelfHost', defaultMessage: 'Looking to self-host?'})}
+
+ trackEvent(
+ TELEMETRY_CATEGORIES.CLOUD_PURCHASING,
+ 'click_looking_to_self_host',
+ )
+ }
+ href={CloudLinks.DEPLOYMENT_OPTIONS}
+ location='pricing_modal_content'
+ >{formatMessage({id: 'pricing_modal.reviewDeploymentOptions', defaultMessage: 'Review deployment options'})}
+
-
+ )}
-
-
}
- />) : undefined}
- planExtraInformation={}
- buttonDetails={{
- action: () => {
- if (!isStarter && !currentSubscriptionIsMonthly) {
- openContactSupport();
- return;
- }
+
+ {!cloudFreeDeprecated && (
+
}
+ />) : undefined}
+ planExtraInformation={}
+ buttonDetails={{
+ action: () => {
+ if (!isStarter && !currentSubscriptionIsMonthly) {
+ openContactSupport();
+ return;
+ }
- if (!starterProduct) {
- return;
- }
+ if (!starterProduct) {
+ return;
+ }
- if (usage.teams.active > 1) {
- dispatch(
- openModal({
- modalId: ModalIdentifiers.CLOUD_DOWNGRADE_CHOOSE_TEAM,
- dialogType: DowngradeTeamRemovalModal,
- dialogProps: {
- product_id: starterProduct?.id,
- starterProduct,
- },
- }),
- );
- } else {
- dispatch(
- openModal({
- modalId: ModalIdentifiers.FEEDBACK,
- dialogType: DowngradeFeedbackModal,
- dialogProps: {
- onSubmit: handleClickDowngrade,
- },
- }),
- );
- }
- },
- text: freeTierText,
- disabled: isStarter || isEnterprise || !isAdmin,
- customClass: (isStarter || isEnterprise || !isAdmin) ? ButtonCustomiserClasses.grayed : ButtonCustomiserClasses.secondary,
- }}
- briefing={{
- title: formatMessage({id: 'pricing_modal.briefing.title', defaultMessage: 'Top features'}),
- items: hasLimits ? starterBriefing : legacyStarterBriefing,
- }}
- />
+ if (usage.teams.active > 1) {
+ dispatch(
+ openModal({
+ modalId: ModalIdentifiers.CLOUD_DOWNGRADE_CHOOSE_TEAM,
+ dialogType: DowngradeTeamRemovalModal,
+ dialogProps: {
+ product_id: starterProduct?.id,
+ starterProduct,
+ },
+ }),
+ );
+ } else {
+ dispatch(
+ openModal({
+ modalId: ModalIdentifiers.FEEDBACK,
+ dialogType: DowngradeFeedbackModal,
+ dialogProps: {
+ onSubmit: handleClickDowngrade,
+ },
+ }),
+ );
+ }
+ },
+ text: freeTierText,
+ disabled: isStarter || isEnterprise || !isAdmin,
+ customClass: (isStarter || isEnterprise || !isAdmin) ? ButtonCustomiserClasses.grayed : ButtonCustomiserClasses.secondary,
+ }}
+ briefing={{
+ title: formatMessage({id: 'pricing_modal.briefing.title', defaultMessage: 'Top features'}),
+ items: hasLimits ? starterBriefing : legacyStarterBriefing,
+ }}
+ />
+
+ )
+
+ }
,
+ })}
price={`$${professionalPrice}`}
rate={formatMessage({id: 'pricing_modal.rate.seatPerMonth', defaultMessage: 'USD per seat/month {br}(billed annually)'}, {
br:
,
b: (chunks: React.ReactNode | React.ReactNodeArray) => (
-
- {chunks}
+
+ {
+ cloudFreeDeprecated ? chunks : ({chunks})
+ }
),
})}
+ isCloud={true}
+ cloudFreeDeprecated={cloudFreeDeprecated}
planLabel={isProfessional ? (
) : undefined}
buttonDetails={professionalBtnDetails()}
briefing={{
- title: formatMessage({id: 'pricing_modal.briefing.title', defaultMessage: 'Top features'}),
+ title: cloudFreeDeprecated ? formatMessage({id: 'pricing_modal.briefing.title_no_limit', defaultMessage: 'No limits on your team’s usage'}) : formatMessage({id: 'pricing_modal.briefing.title', defaultMessage: 'Top features'}),
items: [
formatMessage({id: 'pricing_modal.briefing.professional.messageBoardsIntegrationsCalls', defaultMessage: 'Unlimited access to messages and files'}),
formatMessage({id: 'pricing_modal.briefing.professional.unLimitedTeams', defaultMessage: 'Unlimited teams'}),
@@ -442,6 +475,8 @@ function Content(props: ContentProps) {
topColor='#E07315'
plan='Enterprise'
planSummary={formatMessage({id: 'pricing_modal.planSummary.enterprise', defaultMessage: 'Administration, security, and compliance for large teams'})}
+ isCloud={true}
+ cloudFreeDeprecated={cloudFreeDeprecated}
planLabel={
isEnterprise ? (
) : undefined}
buttonDetails={enterpriseBtnDetails()}
customButtonDetails={enterpriseCustomBtnDetails()}
- planTrialDisclaimer={(!isPostTrial && isAdmin) ? : undefined}
- contactSalesCTA={(isPostTrial || !isAdmin) ? undefined : }
+ planTrialDisclaimer={(!isPostTrial && isAdmin && !cloudFreeDeprecated) ? : undefined}
+ contactSalesCTA={(isPostTrial || !isAdmin || cloudFreeDeprecated) ? undefined : }
briefing={{
- title: formatMessage({id: 'pricing_modal.briefing.title', defaultMessage: 'Top features'}),
+ title: cloudFreeDeprecated ? formatMessage({id: 'pricing_modal.briefing.title_large_scale', defaultMessage: 'Large scale collaboration'}) : formatMessage({id: 'pricing_modal.briefing.title', defaultMessage: 'Top features'}),
items: [
formatMessage({id: 'pricing_modal.briefing.enterprise.groupSync', defaultMessage: 'AD/LDAP group sync'}),
formatMessage({id: 'pricing_modal.briefing.enterprise.rolesAndPermissions', defaultMessage: 'Advanced roles and permissions'}),
@@ -480,6 +515,7 @@ function Content(props: ContentProps) {
],
}}
/>
+ {cloudFreeDeprecated && }
diff --git a/webapp/channels/src/components/pricing_modal/pricing_modal.scss b/webapp/channels/src/components/pricing_modal/pricing_modal.scss
index 0a3dd434f1..2366782e89 100644
--- a/webapp/channels/src/components/pricing_modal/pricing_modal.scss
+++ b/webapp/channels/src/components/pricing_modal/pricing_modal.scss
@@ -128,6 +128,74 @@
margin-bottom: 111px;
gap: 48px;
+ .BlankCard {
+ position: relative;
+ width: 280px;
+
+ .image {
+ margin-top: 8px;
+ }
+
+ hr {
+ border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+ }
+
+ .description {
+ border-bottom: 1px solid rgba(var(--center-channel-color-rgb) 0.16);
+ text-align: left;
+
+ .title {
+ margin-top: 24px;
+ margin-bottom: 8px;
+ font-family: 'Open Sans';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 20px;
+
+ .questions {
+ margin-right: 2px;
+ color: var(--center-channel-color);
+ }
+
+ .contact {
+ color: var(--denim-button-bg);
+ }
+ }
+
+ .content {
+ margin-bottom: 25px;
+ color: rgba(var(--center-channel-color-rgb), 0.72);
+ font-family: 'Open Sans';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px;
+ }
+ }
+
+ .self-hosted-interest {
+ padding: 8px;
+ margin-top: 24px;
+ background: rgba(var(--denim-button-bg-rgb), 0.08);
+ border-radius: 8px;
+ font-family: 'Open Sans';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 20px;
+
+ .interested {
+ margin-right: 2px;
+ color: var(--center-channel-color);
+ }
+
+ .learn {
+ color: var(--denim-button-bg);
+ }
+ }
+ }
+
.PlanCard {
position: relative;
width: 280px;
@@ -180,6 +248,7 @@
text-align: center;
h3 {
+ margin-top: 32px;
color: var(--center-channel-color);
font-family: 'Metropolis';
font-size: 24px;
@@ -210,6 +279,32 @@
font-weight: 400;
line-height: 24px;
}
+
+ .plan_rate {
+ margin-bottom: 0;
+ }
+
+ .building_img {
+ padding-top: 0;
+ }
+
+ .building_img__expanded {
+ padding-top: 14px;
+ }
+
+ .billed_annually {
+ font-family: 'Open sans', sans-serif;
+ font-size: 16px;
+ }
+ }
+
+ .plan_price_rate_section__expanded {
+ height: 244px;
+
+ span,
+ p {
+ margin-bottom: 45px;
+ }
}
.contact_sales_cta {
@@ -218,10 +313,19 @@
text-align: center;
}
+ .contact_sales_cta__reduced {
+ height: 32px;
+ margin-top: 0;
+ }
+
.plan_limits_cta {
height: 21px;
}
+ .plan_limits_cta__expanded {
+ height: 32px;
+ }
+
.plan_buttons {
height: auto;
@@ -306,6 +410,10 @@
}
}
}
+
+ .plan_briefing_content__reduced {
+ margin-top: 0;
+ }
}
}
@@ -355,6 +463,11 @@
}
}
}
+
+ .bottom__round {
+ border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+ border-radius: 8px;
+ }
}
}
}
diff --git a/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx b/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx
index 67c1f8e69a..6ac25580ac 100644
--- a/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx
+++ b/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx
@@ -186,6 +186,8 @@ function SelfHostedContent(props: ContentProps) {
planSummary={formatMessage({id: 'pricing_modal.planSummary.free', defaultMessage: 'Increased productivity for small teams'})}
price='$0'
rate={formatMessage({id: 'pricing_modal.price.freeForever', defaultMessage: 'Free forever'})}
+ isCloud={false}
+ cloudFreeDeprecated={false}
planLabel={
isStarter ? (
,
+ })}
price={professionalPrice}
rate={formatMessage({id: 'pricing_modal.rate.seatPerMonth', defaultMessage: 'USD per seat/month {br}
(billed annually)'}, {
br:
,
b: (chunks: React.ReactNode | React.ReactNodeArray) => (
-
+
{chunks}
),
})}
+ isCloud={false}
+ cloudFreeDeprecated={false}
planLabel={
isProfessional ? (
(billed annually)",
+ "pricing_modal.reach_out": "Reach out to us and we’ll help you decide which plan is right for you and your organization.",
"pricing_modal.reviewDeploymentOptions": "Review deployment options",
"pricing_modal.start_trial.disclaimer": "By selecting Try free for 30 days, I agree to the Mattermost Software and Services License Agreement, Privacy Policy, and receiving product emails.",
"pricing_modal.subtitle": "Choose a plan to get started",
diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx
index 87fc6be03a..856cb071df 100644
--- a/webapp/channels/src/utils/constants.tsx
+++ b/webapp/channels/src/utils/constants.tsx
@@ -1080,6 +1080,7 @@ export const HostedCustomerLinks = {
SELF_HOSTED_BILLING: 'https://docs.mattermost.com/manage/self-hosted-billing.html',
TERMS_AND_CONDITIONS: 'https://mattermost.com/enterprise-edition-terms/',
SECURITY_UPDATES: 'https://mattermost.com/security-updates/',
+ DOWNLOAD: 'https://mattermost.com/download',
NEWSLETTER_UNSUBSCRIBE_LINK: 'https://forms.mattermost.com/UnsubscribePage.html',
PRIVACY: 'https://mattermost.com/privacy-policy/',
};