Paid stats: update UTM and Devices on empty state to point to the rig…

…ht support URL (#97376) * Update UTM module to conditionally render the support link * Update Devices module to conditionally render the support link * Update condition to use isJetpackSite selector
Automattic · Dec 12, 2024 · 25b181f · 25b181f
1 parent 5cc01e0
commit 25b181f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 37 deletions.
diff --git a/client/my-sites/stats/features/modules/stats-devices/stats-module-devices.tsx b/client/my-sites/stats/features/modules/stats-devices/stats-module-devices.tsx
@@ -10,9 +10,10 @@ import PieChart from 'calypso/components/pie-chart';
 import PieChartLegend from 'calypso/components/pie-chart/legend';
 import StatsInfoArea from 'calypso/my-sites/stats/features/modules/shared/stats-info-area';
 import { useSelector } from 'calypso/state';
+import { isJetpackSite } from 'calypso/state/sites/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import EmptyModuleCard from '../../../components/empty-module-card/empty-module-card';
-import { JETPACK_SUPPORT_URL_TRAFFIC } from '../../../const';
+import { JETPACK_SUPPORT_URL_TRAFFIC, SUPPORT_URL } from '../../../const';
 import useModuleDevicesQuery, { StatsDevicesData } from '../../../hooks/use-modeule-devices-query';
 import { QueryStatsParams } from '../../../hooks/utils';
 import StatsListCard from '../../../stats-list/stats-list-card';
@@ -151,20 +152,22 @@ const StatsModuleDevices: React.FC< StatsModuleDevicesProps > = ( {
 		/>
 	);
 
+	const isSiteJetpackNotAtomic = useSelector( ( state ) =>
+		isJetpackSite( state, siteId, { treatAtomicAsJetpackSite: false } )
+	);
+
+	const supportUrl = isSiteJetpackNotAtomic
+		? localizeUrl( `${ JETPACK_SUPPORT_URL_TRAFFIC }#devices-stats` )
+		: localizeUrl( `${ SUPPORT_URL }#devices` );
+
 	const titleNodes = (
 		<StatsInfoArea isNew>
 			{ translate(
 				'The {{link}}devices and browsers{{/link}} your visitors use to access your website.',
 				{
 					comment: '{{link}} links to support documentation.',
 					components: {
-						link: (
-							<a
-								target="_blank"
-								rel="noreferrer"
-								href={ localizeUrl( `${ JETPACK_SUPPORT_URL_TRAFFIC }#devices-stats` ) }
-							/>
-						),
+						link: <a target="_blank" rel="noreferrer" href={ supportUrl } />,
 					},
 					context: 'Stats: Info popover content when the Devices module has data.',
 				}
@@ -201,15 +204,7 @@ const StatsModuleDevices: React.FC< StatsModuleDevicesProps > = ( {
 											{
 												comment: '{{link}} links to support documentation.',
 												components: {
-													link: (
-														<a
-															target="_blank"
-															rel="noreferrer"
-															href={ localizeUrl(
-																`${ JETPACK_SUPPORT_URL_TRAFFIC }#devices-stats`
-															) }
-														/>
-													),
+													link: <a target="_blank" rel="noreferrer" href={ supportUrl } />,
 												},
 												context: 'Stats: Info box label when the Devices module is empty',
 											}

diff --git a/client/my-sites/stats/features/modules/stats-utm/stats-module-utm.jsx b/client/my-sites/stats/features/modules/stats-utm/stats-module-utm.jsx
@@ -7,10 +7,10 @@ import { useTranslate } from 'i18n-calypso';
 import { useState } from 'react';
 import StatsInfoArea from 'calypso/my-sites/stats/features/modules/shared/stats-info-area';
 import { useSelector } from 'calypso/state';
-import { getSiteSlug } from 'calypso/state/sites/selectors';
+import { getSiteSlug, isJetpackSite } from 'calypso/state/sites/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import EmptyModuleCard from '../../../components/empty-module-card/empty-module-card';
-import { JETPACK_SUPPORT_URL_TRAFFIC } from '../../../const';
+import { JETPACK_SUPPORT_URL_TRAFFIC, SUPPORT_URL } from '../../../const';
 import useUTMMetricsQuery from '../../../hooks/use-utm-metrics-query';
 import ErrorPanel from '../../../stats-error';
 import StatsListCard from '../../../stats-list/stats-list-card';
@@ -129,22 +129,22 @@ const StatsModuleUTM = ( {
 		? generateFileNameForDownload( siteSlug, period )
 		: '';
 
+	const isSiteJetpackNotAtomic = useSelector( ( state ) =>
+		isJetpackSite( state, siteId, { treatAtomicAsJetpackSite: false } )
+	);
+
+	const supportUrl = isSiteJetpackNotAtomic
+		? localizeUrl( `${ JETPACK_SUPPORT_URL_TRAFFIC }#harnessing-utm-stats-for-precision-tracking` )
+		: localizeUrl( `${ SUPPORT_URL }#utm` );
+
 	const titleNodes = (
 		<StatsInfoArea isNew>
 			{ translate(
 				'Track your campaign {{link}}UTM performance data{{/link}}. Generate URL codes with our builder.',
 				{
 					comment: '{{link}} links to support documentation.',
 					components: {
-						link: (
-							<a
-								target="_blank"
-								rel="noreferrer"
-								href={ localizeUrl(
-									`${ JETPACK_SUPPORT_URL_TRAFFIC }#harnessing-utm-stats-for-precision-tracking`
-								) }
-							/>
-						),
+						link: <a target="_blank" rel="noreferrer" href={ supportUrl } />,
 					},
 					context: 'Stats: Popover information when the UTM module has data',
 				}
@@ -179,15 +179,7 @@ const StatsModuleUTM = ( {
 											{
 												comment: '{{link}} links to support documentation.',
 												components: {
-													link: (
-														<a
-															target="_blank"
-															rel="noreferrer"
-															href={ localizeUrl(
-																`${ JETPACK_SUPPORT_URL_TRAFFIC }#harnessing-utm-stats-for-precision-tracking`
-															) }
-														/>
-													),
+													link: <a target="_blank" rel="noreferrer" href={ supportUrl } />,
 												},
 												context: 'Stats: Info box label when the UTM module is empty',
 											}