diff --git a/app/ide-desktop/lib/dashboard/src/components/Paywall/PaywallBulletPoints.tsx b/app/ide-desktop/lib/dashboard/src/components/Paywall/PaywallBulletPoints.tsx index 90ea96bb56..3ae92c7d3d 100644 --- a/app/ide-desktop/lib/dashboard/src/components/Paywall/PaywallBulletPoints.tsx +++ b/app/ide-desktop/lib/dashboard/src/components/Paywall/PaywallBulletPoints.tsx @@ -4,13 +4,17 @@ import * as tw from 'tailwind-merge' import Check from 'enso-assets/check_mark.svg' +import type * as text from '#/text' + +import * as textProvider from '#/providers/TextProvider' + import SvgMask from '#/components/SvgMask' /** * */ export interface PaywallBulletPointsProps { - readonly bulletPoints: string[] + readonly bulletPointsTextId: text.TextId readonly className?: string } @@ -18,7 +22,12 @@ export interface PaywallBulletPointsProps { * */ export function PaywallBulletPoints(props: PaywallBulletPointsProps) { - const { bulletPoints, className } = props + const { bulletPointsTextId, className } = props + + const { getText } = textProvider.useText() + const bulletPoints = getText(bulletPointsTextId) + .split(';') + .map(bulletPoint => bulletPoint.trim()) if (bulletPoints.length === 0) { return null diff --git a/app/ide-desktop/lib/dashboard/src/components/Paywall/PaywallButton.tsx b/app/ide-desktop/lib/dashboard/src/components/Paywall/PaywallButton.tsx index 9a0b60f263..f42567a253 100644 --- a/app/ide-desktop/lib/dashboard/src/components/Paywall/PaywallButton.tsx +++ b/app/ide-desktop/lib/dashboard/src/components/Paywall/PaywallButton.tsx @@ -7,27 +7,77 @@ import * as React from 'react' import PaywallBlocked from 'enso-assets/lock.svg' +import LockIcon from 'enso-assets/lock.svg' -import * as button from '#/components/AriaComponents' +import * as appUtils from '#/appUtils' + +import * as billingHooks from '#/hooks/billing' + +import * as textProvider from '#/providers/TextProvider' + +import * as ariaComponents from '#/components/AriaComponents' +import SvgMask from '#/components/SvgMask' + +import { PaywallBulletPoints } from './PaywallBulletPoints' /** * Props of the PaywallButton component */ -export type PaywallButtonProps = button.ButtonProps & {} +export type PaywallButtonProps = ariaComponents.ButtonProps & { + readonly feature: billingHooks.PaywallFeatureName +} /** * PaywallButton component */ export function PaywallButton(props: PaywallButtonProps) { - const { size = 'medium', variant = 'primary' } = props + const { size = 'medium', variant = 'primary', feature, ...buttonProps } = props + + const { getText } = textProvider.useText() + + const { getFeature } = billingHooks.usePaywallFeatures() + + const { bulletPointsTextId, level, name, descriptionTextId } = getFeature(feature) + const levelLabel = getText(level.label) + + const isEnterprise = level === billingHooks.PAYWALL_LEVELS.enterprise return ( - + + + + +
+
+
+ + {getText('paywallAvailabilityLevel', levelLabel)} +
+
+ +

{getText(descriptionTextId)}

+ + + + + {isEnterprise ? getText('contactSales') : getText('learnMore')} + +
+
+
) } diff --git a/app/ide-desktop/lib/dashboard/src/components/Paywall/PaywallScreen.tsx b/app/ide-desktop/lib/dashboard/src/components/Paywall/PaywallScreen.tsx index c2b85a55dc..acab1442c8 100644 --- a/app/ide-desktop/lib/dashboard/src/components/Paywall/PaywallScreen.tsx +++ b/app/ide-desktop/lib/dashboard/src/components/Paywall/PaywallScreen.tsx @@ -21,6 +21,7 @@ import * as ariaComponents from '#/components/AriaComponents' import SvgMask from '#/components/SvgMask' import { PaywallBulletPoints } from './PaywallBulletPoints' +import { PaywallButton } from './PaywallButton' /** * Props for a {@link PaywallScreen}. @@ -55,23 +56,21 @@ export function PaywallScreen(props: PaywallScreenProps) { {getText('paywallScreenTitle')} - +

{getText('paywallScreenDescription', levelLabel)}

- + ) } diff --git a/app/ide-desktop/lib/dashboard/src/hooks/billing/FeaturesConfiguration.ts b/app/ide-desktop/lib/dashboard/src/hooks/billing/FeaturesConfiguration.ts index 7c1b25b318..a52c142b69 100644 --- a/app/ide-desktop/lib/dashboard/src/hooks/billing/FeaturesConfiguration.ts +++ b/app/ide-desktop/lib/dashboard/src/hooks/billing/FeaturesConfiguration.ts @@ -68,13 +68,7 @@ const PAYWALL_FEATURES_LABELS: Record = { interface BasicFeatureConfiguration { readonly level: PaywallLevel readonly bulletPointsTextId: `${PaywallFeatureName}FeatureBulletPoints` -} - -/** - * Plan configuration. - */ -interface PlanConfiguration { - readonly features: Record + readonly descriptionTextId: `${PaywallFeatureName}FeatureDescription` } /** @@ -90,6 +84,7 @@ const PAYWALL_CONFIGURATION: Record