Paid stats: Update upsell with new features and images (#97191)

* Stats: Create InlineSupportLink for Personal Plan

* Update images

* Update insights features

client/components/inline-support-link/context-links.js

@@ -223,6 +223,10 @@ const contextLinks = {
 		link: 'https://wordpress.com/support/settings/performance-settings/',
 		post_id: 179952,
 	},
+	personal_plan: {
+		link: 'https://wordpress.com/support/plan-features/personal-plan/',
+		post_id: 294086,
+	},
 	plugins: {
 		link: 'https://wordpress.com/support/plugins/',
 		post_id: 2108,

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

@@ -9,6 +9,7 @@ import { Button } from '@wordpress/components';
 import { useDispatch as useDataStoreDispatch } from '@wordpress/data';
 import { Icon, lock } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
+import { ReactNode } from 'react';
 import TrackComponentView from 'calypso/lib/analytics/track-component-view';
 import useCheckPlanAvailabilityForPurchase from 'calypso/my-sites/plans-features-main/hooks/use-check-plan-availability-for-purchase';
 import { useSelector } from 'calypso/state';
@@ -21,7 +22,7 @@ const HELP_CENTER_STORE = HelpCenter.register();
 
 interface Props {
 	title: string;
-	features: string[];
+	features: ReactNode[];
 	image: string;
 	statType: string;
 }

client/my-sites/stats/stats-upsell/insights-upsell.tsx

@@ -1,5 +1,6 @@
 import { useTranslate } from 'i18n-calypso';
 import statsFeaturesPNG from 'calypso/assets/images/stats/paid-features-2.png';
+import InlineSupportLink from 'calypso/components/inline-support-link';
 import { STATS_FEATURE_PAGE_INSIGHTS } from '../constants';
 import StatsUpsell from './index';
 
@@ -11,12 +12,17 @@ const InsightsUpsell: React.FC = () => {
 			statType={ STATS_FEATURE_PAGE_INSIGHTS }
 			title={ translate( 'Unlock site insights' ) }
 			features={ [
-				translate( 'Overview yearly data' ),
-				translate( 'Learn from your all-time posting highlights' ),
+				translate( '{{personalFeaturesLink}}All personal plan features{{/personalFeaturesLink}}', {
+					components: {
+						personalFeaturesLink: (
+							<InlineSupportLink supportContext="personal_plan" showIcon={ false } />
+						),
+					},
+				} ),
 				translate( 'Monitor your posting activity' ),
-				translate( 'Visualize your all-time traffic insights' ),
-				translate( 'Track your tags and category traffic' ),
+				translate( 'Track your all-time highlights and insights' ),
 				translate( 'Keep your data private and GDPR-compliant' ),
+				translate( '14-day money-back guarantee' ),
 			] }
 			image={ statsFeaturesPNG }
 		/>

client/my-sites/stats/stats-upsell/traffic-upsell.tsx

@@ -1,5 +1,6 @@
 import { useTranslate } from 'i18n-calypso';
 import statsFeaturesPNG from 'calypso/assets/images/stats/paid-features.png';
+import InlineSupportLink from 'calypso/components/inline-support-link';
 import { STATS_FEATURE_PAGE_TRAFFIC } from '../constants';
 import StatsUpsell from './index';
 
@@ -11,13 +12,17 @@ const TrafficUpsell: React.FC = () => {
 			statType={ STATS_FEATURE_PAGE_TRAFFIC }
 			title={ translate( 'Unlock site growth analytics' ) }
 			features={ [
+				translate( '{{personalFeaturesLink}}All personal plan features{{/personalFeaturesLink}}', {
+					components: {
+						personalFeaturesLink: (
+							<InlineSupportLink supportContext="personal_plan" showIcon={ false } />
+						),
+					},
+				} ),
 				translate( 'View trends and data from any time period' ),
-				translate( 'Understand how visitors find and use your site' ),
-				translate( 'Track which posts and pages are most popular' ),
-				translate( 'See where your visitors come from worldwide' ),
-				translate( 'Discover which links generate most clicks' ),
-				translate( 'Monitor email engagement and downloads' ),
+				translate( 'Detailed stats about posts, referrers, clicks and more' ),
 				translate( 'Keep your data private and GDPR-compliant' ),
+				translate( '14-day money-back guarantee' ),
 			] }
 			image={ statsFeaturesPNG }
 		/>