From 21d246940d2398d460784679847e00699b4369e7 Mon Sep 17 00:00:00 2001
From: Rafael Agostini <rafael.agostini@automattic.com>
Date: Tue, 3 Dec 2024 08:34:56 -0500
Subject: [PATCH] Stats: add learn more button on StatsUpsell pointing to
 Jetpack Stats Help Center (#96993)

---
 client/my-sites/stats/stats-upsell/index.tsx  | 53 ++++++++++++++-----
 client/my-sites/stats/stats-upsell/style.scss |  5 ++
 2 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/client/my-sites/stats/stats-upsell/index.tsx b/client/my-sites/stats/stats-upsell/index.tsx
index 7f7a0481a4a90..eac140c770bb1 100644
--- a/client/my-sites/stats/stats-upsell/index.tsx
+++ b/client/my-sites/stats/stats-upsell/index.tsx
@@ -3,9 +3,11 @@ import { isEnabled } from '@automattic/calypso-config';
 import { PLAN_PREMIUM } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
 import { Gridicon } from '@automattic/components';
-import { Plans } from '@automattic/data-stores';
+import { Plans, HelpCenter } from '@automattic/data-stores';
 import formatCurrency from '@automattic/format-currency';
+import { useLocalizeUrl } from '@automattic/i18n-utils';
 import { Button } from '@wordpress/components';
+import { useDispatch as useDataStoreDispatch } from '@wordpress/data';
 import { useTranslate } from 'i18n-calypso';
 import statsFeaturesPNG from 'calypso/assets/images/stats/paid-features.png';
 import TrackComponentView from 'calypso/lib/analytics/track-component-view';
@@ -16,6 +18,8 @@ import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selecto
 
 import './style.scss';
 
+const HELP_CENTER_STORE = HelpCenter.register();
+
 export default function StatsUpsell( { siteId }: { siteId: number } ) {
 	const translate = useTranslate();
 	const selectedSiteId = useSelector( getSelectedSiteId );
@@ -33,6 +37,8 @@ export default function StatsUpsell( { siteId }: { siteId: number } ) {
 	const isOdysseyStats = isEnabled( 'is_running_in_jetpack_site' );
 	const eventPrefix = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
 	const statType = useSelector( ( state ) => getUpsellModalStatType( state, siteId ) );
+	const { setShowHelpCenter, setShowSupportDoc } = useDataStoreDispatch( HELP_CENTER_STORE );
+	const localizeUrl = useLocalizeUrl();
 
 	const onClick = ( event: React.MouseEvent< HTMLButtonElement, MouseEvent > ) => {
 		event.preventDefault();
@@ -49,6 +55,18 @@ export default function StatsUpsell( { siteId }: { siteId: number } ) {
 		}
 	};
 
+	const learnMoreLink = localizeUrl( 'https://wordpress.com/support/stats/' );
+
+	const onLearnMoreClick = ( event: React.MouseEvent< HTMLButtonElement, MouseEvent > ) => {
+		event.preventDefault();
+		setShowHelpCenter( true );
+		setShowSupportDoc( learnMoreLink );
+
+		recordTracksEvent( `${ eventPrefix }_stats_upsell_learn_more`, {
+			stat_type: statType,
+		} );
+	};
+
 	return (
 		<div className="stats-upsell">
 			<TrackComponentView
@@ -118,18 +136,27 @@ export default function StatsUpsell( { siteId }: { siteId: number } ) {
 							</div>
 						</div>
 					</div>
-					<Button
-						variant="primary"
-						className="stats-upsell__button"
-						onClick={ onClick }
-						disabled={ isLoading }
-					>
-						{ ! plan?.productNameShort
-							? translate( 'Upgrade plan' )
-							: translate( 'Upgrade to %(planName)s', {
-									args: { planName: plan.productNameShort },
-							  } ) }
-					</Button>
+					<div className="stats-upsell__buttons">
+						<Button
+							variant="primary"
+							className="stats-upsell__button"
+							onClick={ onClick }
+							disabled={ isLoading }
+						>
+							{ ! plan?.productNameShort
+								? translate( 'Upgrade plan' )
+								: translate( 'Upgrade to %(planName)s', {
+										args: { planName: plan.productNameShort },
+								  } ) }
+						</Button>
+						<Button
+							variant="secondary"
+							className="stats-upsell__button"
+							onClick={ onLearnMoreClick }
+						>
+							{ translate( 'Learn more' ) }
+						</Button>
+					</div>
 				</div>
 				<div className="stats-upsell__right">
 					<img src={ statsFeaturesPNG } alt={ translate( 'Features' ) } />
diff --git a/client/my-sites/stats/stats-upsell/style.scss b/client/my-sites/stats/stats-upsell/style.scss
index 624054dd711d8..2fb69d1264133 100644
--- a/client/my-sites/stats/stats-upsell/style.scss
+++ b/client/my-sites/stats/stats-upsell/style.scss
@@ -119,4 +119,9 @@
 			}
 		}
 	}
+
+	.stats-upsell__buttons {
+		display: flex;
+		gap: 16px;
+	}
 }