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

client/my-sites/stats/stats-card-upsell/index.tsx

@@ -1,32 +1,45 @@
-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';
 
 export interface Props {
 	className?: string;
 	statType: string;
 	siteId: number;
-	buttonLabel?: string;
+	buttonLabel?: string | TranslateResult;
 }
 
 const StatsCardUpsell: React.FC< Props > = ( { className, statType, siteId, buttonLabel } ) => {
 	const isSiteJetpackNotAtomic = useSelector( ( state ) =>
 		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 (
 		<UpsellComponent
 			className={ className }
 			statType={ statType }
 			siteId={ siteId }
-			buttonLabel={ buttonLabel ?? translate( 'Upgrade plan' ) }
+			buttonLabel={ upsellButtonLabel }
 		/>
 	);
 };

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;
 }
 

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: (
+							<a
+								href={ localizeUrl( `${ SUPPORT_URL }#clicks` ) }
+								target="_blank"
+								rel="noreferrer"
+							/>
+						),
+					},
+				}
 			);
 		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: (
+							<a
+								href={ localizeUrl( `${ SUPPORT_URL }#countries` ) }
+								target="_blank"
+								rel="noreferrer"
+							/>
+						),
+					},
+				}
+			);
 		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: (
+						<a
+							href={ localizeUrl( `${ SUPPORT_URL }#file-downloads` ) }
+							target="_blank"
+							rel="noreferrer"
+						/>
+					),
+				},
+			} );
 		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: (
+							<a
+								href={ localizeUrl( `${ SUPPORT_URL }#referrers` ) }
+								target="_blank"
+								rel="noreferrer"
+							/>
+						),
+					},
+				}
 			);
 		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: (
+							<a
+								href={ localizeUrl( `${ SUPPORT_URL }#search-terms` ) }
+								target="_blank"
+								rel="noreferrer"
+							/>
+						),
+					},
+				}
+			);
 		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: (
+							<a
+								href={ localizeUrl( `${ SUPPORT_URL }#authors` ) }
+								target="_blank"
+								rel="noreferrer"
+							/>
+						),
+					},
+				}
+			);
 		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: (
+							<a
+								href={ localizeUrl( `${ SUPPORT_URL }#posts-amp-pages` ) }
+								target="_blank"
+								rel="noreferrer"
+							/>
+						),
+					},
+				}
+			);
 		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: (
+							<a
+								href={ localizeUrl( `${ SUPPORT_URL }#videos` ) }
+								target="_blank"
+								rel="noreferrer"
+							/>
+						),
+					},
+				}
+			);
 		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: (
+							<a href={ localizeUrl( `${ SUPPORT_URL }#utm` ) } target="_blank" rel="noreferrer" />
+						),
+					},
+				}
+			);
 		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: (
+							<a
+								href={ localizeUrl( `${ SUPPORT_URL }#devices` ) }
+								target="_blank"
+								rel="noreferrer"
+							/>
+						),
+					},
+				}
+			);
 		default:
 			return translate( 'Upgrade your plan to unlock Jetpack Stats.' );
 	}