Paid stats: enable UTM and Devices stats on WPCOM paid stats feature (#…

…97160)

* Enable utm/device stats on paid stats (premium plans)

* Update supports checks to allow utm/device stats on dotcom

* Replaced `StatsCardUpsellJetpack` with `StatsCardUpsell` in UTM and Devices module overlay

StatsCardUpsell determines whether to render the WPCOM or Jetpack upsell prompt, depending on whether the site is Jetpack (non-atomic) or not.

* Remove gating of advanced stats for non-Jetpack sites and add unit tests

Now relies on checking if the site has the paid stats feature for access control.

* Update unit tests comment

* Refactor unit test formatting

---------

Co-authored-by: Rafael Agostini <[email protected]>

client/my-sites/stats/features/modules/stats-devices/stats-module-upgrade-overlay.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
+import StatsCardUpsell from 'calypso/my-sites/stats/stats-card-upsell';
 import { STATS_TYPE_DEVICE_STATS } from '../../../constants';
-import StatsCardUpsellJetpack from '../../../stats-card-upsell/stats-card-upsell-jetpack';
 import StatsListCard from '../../../stats-list/stats-list-card';
 
 import './stats-module-devices.scss';
@@ -64,7 +64,7 @@ const StatsModuleUpgradeOverlay: React.FC< StatsModuleUpgradeOverlayProps > = (
 			splitHeader
 			overlay={
 				overlay ?? (
-					<StatsCardUpsellJetpack
+					<StatsCardUpsell
 						className="stats-module__upsell"
 						siteId={ siteId }
 						statType={ STATS_TYPE_DEVICE_STATS }

client/my-sites/stats/features/modules/stats-utm/stats-module-utm-overlay.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
+import StatsCardUpsell from 'calypso/my-sites/stats/stats-card-upsell';
 import { STATS_FEATURE_UTM_STATS } from '../../../constants';
-import StatsCardUpsellJetpack from '../../../stats-card-upsell/stats-card-upsell-jetpack';
 import StatsListCard from '../../../stats-list/stats-list-card';
 
 import './stats-module-utm-overlay.scss';
@@ -62,7 +62,7 @@ const StatsModuleUTMOverlay: React.FC< StatsModuleUTMOverlayProps > = ( {
 			} }
 			overlay={
 				overlay ?? (
-					<StatsCardUpsellJetpack
+					<StatsCardUpsell
 						className="stats-module__upsell"
 						siteId={ siteId }
 						statType={ STATS_FEATURE_UTM_STATS }

client/my-sites/stats/hooks/test/use-should-gate-stats.ts

@@ -215,6 +215,92 @@ describe( 'shouldGateStats in Calypso', () => {
 		const isGatedStats = shouldGateStats( mockState, siteId, gatedStatType );
 		expect( isGatedStats ).toBe( true );
 	} );
+
+	it( 'should gate advanced stats modules for Simple site without commercial stats feature', () => {
+		const mockState = {
+			sites: {
+				features: {
+					[ siteId ]: {
+						data: {
+							active: [],
+						},
+					},
+				},
+				items: {
+					[ siteId ]: {
+						jetpack: false,
+						options: {
+							is_wpcom_atomic: false,
+						},
+					},
+				},
+			},
+			purchases: {
+				data: [],
+			},
+		};
+		const isGatedStats = shouldGateStats( mockState, siteId, jetpackStatsAdvancedStatType );
+		expect( isGatedStats ).toBe( true );
+	} );
+
+	// Note: Once FEATURE_STATS_COMMERCIAL is introduced and fully rolled out,
+	// we should replace FEATURE_STATS_PAID with FEATURE_STATS_COMMERCIAL in
+	// the following test to ensure consistent gating logic for commercial stats.
+	// @see: https://github.com/Automattic/wp-calypso/pull/97041
+
+	it( 'should not gate advanced stats modules for Simple site with commercial stats feature', () => {
+		const mockState = {
+			sites: {
+				features: {
+					[ siteId ]: {
+						data: {
+							active: [ FEATURE_STATS_PAID ], // FEATURE_STATS_COMMERCIAL
+						},
+					},
+				},
+				items: {
+					[ siteId ]: {
+						jetpack: false,
+						options: {
+							is_wpcom_atomic: false,
+						},
+					},
+				},
+			},
+			purchases: {
+				data: [],
+			},
+		};
+		const isGatedStats = shouldGateStats( mockState, siteId, jetpackStatsAdvancedStatType );
+		expect( isGatedStats ).toBe( false );
+	} );
+
+	it( 'should not gate advanced stats for Atomic site with commercial stats feature', () => {
+		const mockState = {
+			sites: {
+				features: {
+					[ siteId ]: {
+						data: {
+							active: [ FEATURE_STATS_PAID ], // FEATURE_STATS_COMMERCIAL
+						},
+					},
+				},
+				items: {
+					[ siteId ]: {
+						jetpack: true,
+						options: {
+							is_wpcom_atomic: true,
+						},
+					},
+				},
+			},
+			purchases: {
+				data: [],
+			},
+		};
+		const isGatedStats = shouldGateStats( mockState, siteId, jetpackStatsAdvancedStatType );
+		expect( isGatedStats ).toBe( false );
+	} );
 } );
 
 describe( 'shouldGateStats in Odyssey stats', () => {

client/my-sites/stats/hooks/use-should-gate-stats.ts

@@ -86,6 +86,12 @@ const paidStats = [
 	STAT_TYPE_TOP_AUTHORS,
 	STAT_TYPE_SEARCH_TERMS,
 	STAT_TYPE_VIDEO_PLAYS,
+
+	// Paid stats is currently a premium plan feature.
+	// Legacy sites will inadvertantly get these temporarily but paywalling
+	// these again later is fine. (https://github.com/Automattic/wp-calypso/pull/97041)
+	STATS_TYPE_DEVICE_STATS,
+	STATS_FEATURE_UTM_STATS,
 ];
 
 // Gated controls for WPCOM sites without the FEATURE_STATS_PAID feature.
@@ -165,12 +171,6 @@ export const shouldGateStats = ( state: object, siteId: number | null, statType:
 		return [ ...jetpackStatsAdvancedPaywall ].includes( statType );
 	}
 
-	// Gate advanced stats for non-Jetpack sites unless they have a Jetpack Stats commercial purchase.
-	// Dotcom sites are not able to see these modules yet, so the line wouldn't apply to them.
-	if ( jetpackStatsAdvancedPaywall.includes( statType ) ) {
-		return ! supportStatsCommercialUse;
-	}
-
 	const siteFeatures = getSiteFeatures( state, siteId );
 	const siteHasPaidStats = siteHasFeature( state, siteId, FEATURE_STATS_PAID );
 

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

@@ -4,6 +4,8 @@ import { preventWidows } from 'calypso/lib/formatting';
 import { toggleUpsellModal } from 'calypso/state/stats/paid-stats-upsell/actions';
 import {
 	STATS_FEATURE_DATE_CONTROL,
+	STATS_FEATURE_UTM_STATS,
+	STATS_TYPE_DEVICE_STATS,
 	STAT_TYPE_CLICKS,
 	STAT_TYPE_REFERRERS,
 	STAT_TYPE_SEARCH_TERMS,
@@ -33,6 +35,10 @@ const getUpsellCopy = ( statType: string ) => {
 			return translate( 'Compare different time periods to analyze your site’s growth.' );
 		case STAT_TYPE_VIDEO_PLAYS:
 			return translate( 'Discover your most popular videos and find out how they performed.' );
+		case STATS_FEATURE_UTM_STATS:
+			return translate( 'Generate UTM parameters and track your campaign performance data.' );
+		case STATS_TYPE_DEVICE_STATS:
+			return translate( 'See which devices your visitors are using.' );
 		default:
 			return translate( 'Upgrade your plan to unlock Jetpack Stats.' );
 	}

client/state/sites/selectors/get-env-stats-feature-supports.ts

@@ -45,12 +45,8 @@ function getEnvStatsFeatureSupportChecks( state: object, siteId: number | null )
 			'0.16.0-alpha',
 			isOdysseyStats
 		),
-		supportsUTMStats:
-			// UTM stats are only available for Jetpack sites for now.
-			isSiteJetpackNotAtomic && ( ! isOdysseyStats || !! statsAdminVersion ),
-		supportsDevicesStats:
-			// UTM stats are only available for Jetpack sites for now.
-			isSiteJetpackNotAtomic && ( ! isOdysseyStats || !! statsAdminVersion ),
+		supportsUTMStats: ! isOdysseyStats || !! statsAdminVersion,
+		supportsDevicesStats: ! isOdysseyStats || !! statsAdminVersion,
 		supportsOnDemandCommercialClassification: version_greater_than_or_equal(
 			statsAdminVersion,
 			'0.18.0-alpha',