Dotcom Paid Stats: Fixes for Odyssey on Simple and Atomic (#97304)

* fix checkout and learn more link in Odyssey * fix support links * add more comments * Update client/my-sites/stats/stats-upsell/index.tsx
Automattic · Dec 11, 2024 · 3ed6ca6 · 3ed6ca6
1 parent 511fa7a
commit 3ed6ca6
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 5 deletions.
diff --git a/apps/odyssey-stats/src/lib/create-odyssey-config.ts b/apps/odyssey-stats/src/lib/create-odyssey-config.ts
@@ -119,6 +119,11 @@ export class ConfigApi extends Function {
 		// Note: configData is hydrated in https://github.com/Automattic/jetpack/blob/d4d0f987cbf63a864b03b542b7813aabe87e0ed3/projects/packages/stats-admin/src/class-dashboard.php#L214
 		this.configData.features = productionConfig.features;
 
+		// Set a flag to identify if the app is running in WP Admin.
+		// `is_running_in_jetpack_site` now means whether the app calls public-api directly or use the Jetpack ones.
+		// For Simple sites running Odyssey Stats, `is_running_in_jetpack_site` is true and `is_odyssey` is false.
+		this.configData.features.is_odyssey = true;
+
 		// Sets the Blaze Dashboard path prefix.
 		this.configData.advertising_dashboard_path_prefix = '/advertising';
 	}

diff --git a/client/my-sites/stats/const.js b/client/my-sites/stats/const.js
@@ -27,3 +27,6 @@ export const JETPACK_SUPPORT_VIDEOPRESS_URL = 'https://jetpack.com/support/jetpa
 export const JETPACK_SUPPORT_VIDEOPRESS_URL_STATS =
 	'https://jetpack.com/support/jetpack-videopress/add-video-block-editor/video-stats/';
 export const JETPACK_VIDEOPRESS_LANDING_PAGE_URL = 'https://jetpack.com/videopress/';
+export const WPCOM_PERSONAL_PLAN_SUPPORT =
+	// eslint-disable-next-line wpcalypso/i18n-unlocalized-url
+	'https://wordpress.com/support/plan-features/personal-plan/';
diff --git a/client/my-sites/stats/stats-upsell/index.tsx b/client/my-sites/stats/stats-upsell/index.tsx
@@ -43,7 +43,7 @@ export default function StatsUpsell( { title, features, image, statType }: Props
 	} )?.[ planKey ];
 	const planSlug = plan?.pathSlug ?? planKey;
 	const isLoading = plans.isLoading || ! pricing;
-	const isOdysseyStats = isEnabled( 'is_running_in_jetpack_site' );
+	const isOdysseyStats = isEnabled( 'is_odyssey' );
 	const eventPrefix = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
 	const { setShowHelpCenter, setShowSupportDoc } = useDataStoreDispatch( HELP_CENTER_STORE );
 	const localizeUrl = useLocalizeUrl();
@@ -67,8 +67,12 @@ export default function StatsUpsell( { title, features, image, statType }: Props
 
 	const onLearnMoreClick = ( event: React.MouseEvent< HTMLButtonElement, MouseEvent > ) => {
 		event.preventDefault();
-		setShowHelpCenter( true );
-		setShowSupportDoc( learnMoreLink );
+		if ( ! isOdysseyStats ) {
+			setShowHelpCenter( true );
+			setShowSupportDoc( learnMoreLink );
+		} else {
+			window.open( learnMoreLink, '_blank' );
+		}
 
 		recordTracksEvent( `${ eventPrefix }_stats_upsell_learn_more`, {
 			stat_type: statType,

diff --git a/client/my-sites/stats/stats-upsell/insights-upsell.tsx b/client/my-sites/stats/stats-upsell/insights-upsell.tsx
@@ -1,11 +1,16 @@
+import { isEnabled } from '@automattic/calypso-config';
+import { localizeUrl } from '@automattic/i18n-utils';
+import { Button } from '@wordpress/components';
 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 { WPCOM_PERSONAL_PLAN_SUPPORT } from '../const';
 import { STATS_FEATURE_PAGE_INSIGHTS } from '../constants';
 import StatsUpsell from './index';
 
 const InsightsUpsell: React.FC = () => {
 	const translate = useTranslate();
+	const isOdysseyStats = isEnabled( 'is_odyssey' );
 
 	return (
 		<StatsUpsell
@@ -14,8 +19,15 @@ const InsightsUpsell: React.FC = () => {
 			features={ [
 				translate( '{{personalFeaturesLink}}All personal plan features{{/personalFeaturesLink}}', {
 					components: {
-						personalFeaturesLink: (
+						personalFeaturesLink: ! isOdysseyStats ? (
 							<InlineSupportLink supportContext="personal_plan" showIcon={ false } />
+						) : (
+							<Button
+								href={ localizeUrl( WPCOM_PERSONAL_PLAN_SUPPORT ) }
+								target="_blank"
+								rel="norefferer nooppener"
+								variant="link"
+							/>
 						),
 					},
 				} ),

diff --git a/client/my-sites/stats/stats-upsell/traffic-upsell.tsx b/client/my-sites/stats/stats-upsell/traffic-upsell.tsx
@@ -1,11 +1,16 @@
+import { isEnabled } from '@automattic/calypso-config';
+import { localizeUrl } from '@automattic/i18n-utils';
+import { Button } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import statsFeaturesPNG from 'calypso/assets/images/stats/paid-features.png';
 import InlineSupportLink from 'calypso/components/inline-support-link';
+import { WPCOM_PERSONAL_PLAN_SUPPORT } from '../const';
 import { STATS_FEATURE_PAGE_TRAFFIC } from '../constants';
 import StatsUpsell from './index';
 
 const TrafficUpsell: React.FC = () => {
 	const translate = useTranslate();
+	const isOdysseyStats = isEnabled( 'is_odyssey' );
 
 	return (
 		<StatsUpsell
@@ -14,8 +19,15 @@ const TrafficUpsell: React.FC = () => {
 			features={ [
 				translate( '{{personalFeaturesLink}}All personal plan features{{/personalFeaturesLink}}', {
 					components: {
-						personalFeaturesLink: (
+						personalFeaturesLink: ! isOdysseyStats ? (
 							<InlineSupportLink supportContext="personal_plan" showIcon={ false } />
+						) : (
+							<Button
+								href={ localizeUrl( WPCOM_PERSONAL_PLAN_SUPPORT ) }
+								target="_blank"
+								rel="norefferer"
+								variant="link"
+							/>
 						),
 					},
 				} ),