From d8af97c5d03de0048c84317b26e2e9845019e3c5 Mon Sep 17 00:00:00 2001 From: Rafael Agostini Date: Wed, 11 Dec 2024 18:35:11 -0500 Subject: [PATCH] Paid stats: update upsell copy in Stats modules (#97366) * Update upsell copy in Stats modules * Update upsell copy in Stats module including a link to support documentation. * Update upsell copy for file downloads * Update StatsCardUpsell to specify the upsell plan for WPCOM * Update buttonLabel typing - adding TranslateResult type --- .../stats/stats-card-upsell/index.tsx | 19 ++- .../stats-card-upsell-overlay.tsx | 4 +- .../stats-card-upsell-wpcom.tsx | 141 ++++++++++++++++-- 3 files changed, 149 insertions(+), 15 deletions(-) diff --git a/client/my-sites/stats/stats-card-upsell/index.tsx b/client/my-sites/stats/stats-card-upsell/index.tsx index f202d52c33a28..2b24ad68ecd5b 100644 --- a/client/my-sites/stats/stats-card-upsell/index.tsx +++ b/client/my-sites/stats/stats-card-upsell/index.tsx @@ -1,6 +1,8 @@ -import { translate } from 'i18n-calypso'; +import { Plans } from '@automattic/data-stores'; +import { translate, TranslateResult } from 'i18n-calypso'; import { useSelector } from 'calypso/state'; import { isJetpackSite } from 'calypso/state/sites/selectors'; +import { statTypeToPlan } from '../stat-type-to-plan'; import StatsCardUpsellJetpack from './stats-card-upsell-jetpack'; import StatsCardUpsellWPCOM from './stats-card-upsell-wpcom'; @@ -8,7 +10,7 @@ export interface Props { className?: string; statType: string; siteId: number; - buttonLabel?: string; + buttonLabel?: string | TranslateResult; } const StatsCardUpsell: React.FC< Props > = ( { className, statType, siteId, buttonLabel } ) => { @@ -16,9 +18,20 @@ const StatsCardUpsell: React.FC< Props > = ( { className, statType, siteId, butt isJetpackSite( state, siteId, { treatAtomicAsJetpackSite: false } ) ); + const plans = Plans.usePlans( { coupon: undefined } ); + const planKey = statTypeToPlan( statType ); + const plan = plans?.data?.[ planKey ]; + let UpsellComponent = StatsCardUpsellWPCOM; + let upsellButtonLabel = ! plan?.productNameShort + ? translate( 'Upgrade plan' ) + : translate( 'Upgrade to %(planName)s', { + args: { planName: plan.productNameShort }, + } ); + if ( isSiteJetpackNotAtomic ) { UpsellComponent = StatsCardUpsellJetpack; + upsellButtonLabel = buttonLabel ?? translate( 'Upgrade plan' ); } return ( @@ -26,7 +39,7 @@ const StatsCardUpsell: React.FC< Props > = ( { className, statType, siteId, butt className={ className } statType={ statType } siteId={ siteId } - buttonLabel={ buttonLabel ?? translate( 'Upgrade plan' ) } + buttonLabel={ upsellButtonLabel } /> ); }; diff --git a/client/my-sites/stats/stats-card-upsell/stats-card-upsell-overlay.tsx b/client/my-sites/stats/stats-card-upsell/stats-card-upsell-overlay.tsx index 2bb761fb17f57..f3d9f2bb327aa 100644 --- a/client/my-sites/stats/stats-card-upsell/stats-card-upsell-overlay.tsx +++ b/client/my-sites/stats/stats-card-upsell/stats-card-upsell-overlay.tsx @@ -1,13 +1,13 @@ import { Button, Gridicon } from '@automattic/components'; import clsx from 'clsx'; -import { useTranslate } from 'i18n-calypso'; +import { TranslateResult, useTranslate } from 'i18n-calypso'; import React, { ReactNode } from 'react'; interface Props { className?: string; copyText: string | ReactNode; onClick: ( event: React.MouseEvent< HTMLButtonElement, MouseEvent > ) => void; - buttonLabel?: string; + buttonLabel?: string | TranslateResult; buttonComponent?: React.ReactNode; } diff --git a/client/my-sites/stats/stats-card-upsell/stats-card-upsell-wpcom.tsx b/client/my-sites/stats/stats-card-upsell/stats-card-upsell-wpcom.tsx index cf78ab8978d71..0174d95b37fad 100644 --- a/client/my-sites/stats/stats-card-upsell/stats-card-upsell-wpcom.tsx +++ b/client/my-sites/stats/stats-card-upsell/stats-card-upsell-wpcom.tsx @@ -1,7 +1,9 @@ +import { localizeUrl } from '@automattic/i18n-utils'; import { translate } from 'i18n-calypso'; import { useDispatch } from 'react-redux'; import { preventWidows } from 'calypso/lib/formatting'; import { toggleUpsellModal } from 'calypso/state/stats/paid-stats-upsell/actions'; +import { SUPPORT_URL } from '../const'; import { STATS_FEATURE_DATE_CONTROL, STATS_FEATURE_UTM_STATS, @@ -24,30 +26,149 @@ const getUpsellCopy = ( statType: string ) => { switch ( statType ) { case STAT_TYPE_CLICKS: return translate( - 'Learn what external links your visitors click on your site to reveal their areas of interest.' + 'Learn what {{link}}external links{{/link}} your visitors click on your site to reveal their areas of interest.', + { + components: { + link: ( + + ), + }, + } ); case STAT_TYPE_COUNTRY_VIEWS: - return translate( 'See where your visitors come from.' ); + return translate( + 'Discover where your {{link}}visitors are located{{/link}} and identify where your traffic is coming from.', + { + components: { + link: ( + + ), + }, + } + ); case STAT_TYPE_FILE_DOWNLOADS: - return translate( 'Monitor your file downloads engagement.' ); + return translate( 'Discover the most {{link}}downloaded files{{/link}} by your visitors.', { + components: { + link: ( + + ), + }, + } ); case STAT_TYPE_REFERRERS: return translate( - 'Find out where your visitors come from to optimize your content strategy.' + 'Find out where your {{link}}visitors come from{{/link}} to optimize your content strategy.', + { + components: { + link: ( + + ), + }, + } ); case STAT_TYPE_SEARCH_TERMS: - return translate( 'Discover the terms and phrases your visitors use to find your site.' ); + return translate( + 'Discover the {{link}}terms and phrases{{/link}} your visitors use to find your site.', + { + components: { + link: ( + + ), + }, + } + ); case STAT_TYPE_TOP_AUTHORS: - return translate( 'Identify your audience’s favorite writers and perspectives.' ); + return translate( + 'Identify your audience’s {{link}}favorite writers{{/link}} and perspectives.', + { + components: { + link: ( + + ), + }, + } + ); case STAT_TYPE_TOP_POSTS: - return translate( 'Track posts and pages views.' ); + return translate( + 'Discover your {{link}}post and pages{{/link}} traffic in detail and learn what content resonates the most.', + { + components: { + link: ( + + ), + }, + } + ); case STAT_TYPE_VIDEO_PLAYS: - return translate( 'Discover your most popular videos and find out how they performed.' ); + return translate( + 'Discover your {{link}}most popular videos{{/link}} and find out how they performed.', + { + components: { + link: ( + + ), + }, + } + ); case STATS_FEATURE_DATE_CONTROL: return translate( 'Compare different time periods to analyze your site’s growth.' ); case STATS_FEATURE_UTM_STATS: - return translate( 'Generate UTM parameters and track your campaign performance data.' ); + return translate( + 'Generate UTM parameters and track your {{link}}campaign performance data{{/link}}.', + { + components: { + link: ( + + ), + }, + } + ); case STATS_TYPE_DEVICE_STATS: - return translate( 'See which devices your visitors are using.' ); + return translate( + 'See which {{link}}devices, browsers and OS{{/link}} your visitors are using.', + { + components: { + link: ( + + ), + }, + } + ); default: return translate( 'Upgrade your plan to unlock Jetpack Stats.' ); }