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(descriptionTextId)}
{getText('paywallScreenDescription', levelLabel)}
-