Stats: add statTypeToPlan to map stat types to plan in stats upsells (#…

…97159)

* Add statTypeToPlan to map stat types to plan in stats upsells

* Fix statType for non-modal upsell

client/my-sites/stats/stat-type-to-plan.ts

@@ -0,0 +1,30 @@
+import config from '@automattic/calypso-config';
+import { PLAN_PERSONAL, PLAN_PREMIUM } from '@automattic/calypso-products';
+import {
+	STATS_TYPE_DEVICE_STATS,
+	STATS_FEATURE_UTM_STATS,
+	STAT_TYPE_SEARCH_TERMS,
+	STAT_TYPE_VIDEO_PLAYS,
+	STAT_TYPE_TOP_AUTHORS,
+} from './constants';
+
+export function statTypeToPlan( statType: string ) {
+	if ( ! config.isEnabled( 'stats/paid-wpcom-v3' ) ) {
+		return PLAN_PREMIUM;
+	}
+
+	// Commercial stats features that require the premium plan
+	if (
+		[
+			STAT_TYPE_TOP_AUTHORS,
+			STAT_TYPE_SEARCH_TERMS,
+			STAT_TYPE_VIDEO_PLAYS,
+			STATS_FEATURE_UTM_STATS,
+			STATS_TYPE_DEVICE_STATS,
+		].includes( statType )
+	) {
+		return PLAN_PREMIUM;
+	}
+
+	return PLAN_PERSONAL;
+}

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

@@ -1,6 +1,5 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { isEnabled } from '@automattic/calypso-config';
-import { PLAN_PERSONAL, PLAN_PREMIUM } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
 import { Gridicon, PlanPrice } from '@automattic/components';
 import { Plans } from '@automattic/data-stores';
@@ -16,6 +15,7 @@ import { getSiteOption } from 'calypso/state/sites/selectors';
 import { toggleUpsellModal } from 'calypso/state/stats/paid-stats-upsell/actions';
 import { getUpsellModalStatType } from 'calypso/state/stats/paid-stats-upsell/selectors';
 import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selectors';
+import { statTypeToPlan } from '../stat-type-to-plan';
 
 import './style.scss';
 
@@ -25,7 +25,8 @@ export default function StatsUpsellModal( { siteId }: { siteId: number } ) {
 	const selectedSiteId = useSelector( getSelectedSiteId );
 	const siteSlug = useSelector( getSelectedSiteSlug );
 	const plans = Plans.usePlans( { coupon: undefined } );
-	const planKey = isEnabled( 'stats/paid-wpcom-v3' ) ? PLAN_PERSONAL : PLAN_PREMIUM;
+	const statType = useSelector( ( state ) => getUpsellModalStatType( state, siteId ) );
+	const planKey = statTypeToPlan( statType );
 	const plan = plans?.data?.[ planKey ];
 	const pricing = Plans.usePricingMetaForGridPlans( {
 		planSlugs: [ planKey ],
@@ -41,7 +42,6 @@ export default function StatsUpsellModal( { siteId }: { siteId: number } ) {
 	const isSimpleClassic = useSelector( ( state ) =>
 		getSiteOption( state, selectedSiteId, 'is_wpcom_simple' )
 	);
-	const statType = useSelector( ( state ) => getUpsellModalStatType( state, siteId ) );
 
 	const closeModal = () => {
 		dispatch( toggleUpsellModal( siteId, statType ) );

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

@@ -1,6 +1,5 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { isEnabled } from '@automattic/calypso-config';
-import { PLAN_PERSONAL, PLAN_PREMIUM } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
 import { Gridicon } from '@automattic/components';
 import { Plans, HelpCenter } from '@automattic/data-stores';
@@ -13,26 +12,26 @@ import { useTranslate } from 'i18n-calypso';
 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';
-import { getUpsellModalStatType } from 'calypso/state/stats/paid-stats-upsell/selectors';
 import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selectors';
+import { statTypeToPlan } from '../stat-type-to-plan';
 
 import './style.scss';
 
 const HELP_CENTER_STORE = HelpCenter.register();
 
 interface Props {
-	siteId: number;
 	title: string;
 	features: string[];
 	image: string;
+	statType: string;
 }
 
-export default function StatsUpsell( { siteId, title, features, image }: Props ) {
+export default function StatsUpsell( { title, features, image, statType }: Props ) {
 	const translate = useTranslate();
 	const selectedSiteId = useSelector( getSelectedSiteId );
 	const siteSlug = useSelector( getSelectedSiteSlug );
 	const plans = Plans.usePlans( { coupon: undefined } );
-	const planKey = isEnabled( 'stats/paid-wpcom-v3' ) ? PLAN_PERSONAL : PLAN_PREMIUM;
+	const planKey = statTypeToPlan( statType );
 	const plan = plans?.data?.[ planKey ];
 	const pricing = Plans.usePricingMetaForGridPlans( {
 		planSlugs: [ planKey ],
@@ -45,7 +44,6 @@ export default function StatsUpsell( { siteId, title, features, image }: Props )
 	const isLoading = plans.isLoading || ! pricing;
 	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();
 

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

@@ -1,17 +1,14 @@
 import { useTranslate } from 'i18n-calypso';
 import statsFeaturesPNG from 'calypso/assets/images/stats/paid-features-2.png';
+import { STATS_FEATURE_PAGE_INSIGHTS } from '../constants';
 import StatsUpsell from './index';
 
-interface Props {
-	siteId: number;
-}
-
-const InsightsUpsell: React.FC< Props > = ( { siteId } ) => {
+const InsightsUpsell: React.FC = () => {
 	const translate = useTranslate();
 
 	return (
 		<StatsUpsell
-			siteId={ siteId }
+			statType={ STATS_FEATURE_PAGE_INSIGHTS }
 			title={ translate( 'Unlock site insights' ) }
 			features={ [
 				translate( 'Overview yearly data' ),

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

@@ -1,17 +1,14 @@
 import { useTranslate } from 'i18n-calypso';
 import statsFeaturesPNG from 'calypso/assets/images/stats/paid-features.png';
+import { STATS_FEATURE_PAGE_TRAFFIC } from '../constants';
 import StatsUpsell from './index';
 
-interface Props {
-	siteId: number;
-}
-
-const TrafficUpsell: React.FC< Props > = ( { siteId } ) => {
+const TrafficUpsell: React.FC = () => {
 	const translate = useTranslate();
 
 	return (
 		<StatsUpsell
-			siteId={ siteId }
+			statType={ STATS_FEATURE_PAGE_TRAFFIC }
 			title={ translate( 'Unlock site growth analytics' ) }
 			features={ [
 				translate( 'View trends and data from any time period' ),

client/my-sites/stats/test/stat-type-to-plan.ts

@@ -0,0 +1,36 @@
+import config from '@automattic/calypso-config';
+import { PLAN_PERSONAL, PLAN_PREMIUM } from '@automattic/calypso-products';
+import {
+	STAT_TYPE_CLICKS,
+	STAT_TYPE_SEARCH_TERMS,
+	STATS_FEATURE_DATE_CONTROL_LAST_7_DAYS,
+} from '../constants';
+import { statTypeToPlan } from '../stat-type-to-plan';
+
+jest.mock( '@automattic/calypso-config', () => {
+	const config = () => 'development';
+	config.isEnabled = jest.fn();
+	return config;
+} );
+
+describe( 'statTypeToPlan', () => {
+	it( 'should always return premium when stats/paid-wpcom-v3 is not enabled', () => {
+		( config.isEnabled as jest.Mock ).mockImplementation( () => false );
+		// Search terms is a commercial stats feature that requires the premium plan
+		expect( statTypeToPlan( STAT_TYPE_SEARCH_TERMS ) ).toEqual( PLAN_PREMIUM );
+		// Clicks is a paid stats feature that requires the personal plan, test the fallback on premium anyway when v3 is disabled.
+		expect( statTypeToPlan( STAT_TYPE_CLICKS ) ).toEqual( PLAN_PREMIUM );
+		// 7 Days is a free plan feature, this should not be gated but test we default to premium when the stat type doesn't make sense to query
+		expect( statTypeToPlan( STATS_FEATURE_DATE_CONTROL_LAST_7_DAYS ) ).toEqual( PLAN_PREMIUM );
+	} );
+
+	it( 'should return personal when stats/paid-wpcom-v3 is enabled and the stat type is a personal plan feature', () => {
+		( config.isEnabled as jest.Mock ).mockImplementation( () => true );
+		// Search terms is a commercial stats feature that requires the premium plan
+		expect( statTypeToPlan( STAT_TYPE_SEARCH_TERMS ) ).toEqual( PLAN_PREMIUM );
+		// Clicks is a paid stats feature that requires the personal plan
+		expect( statTypeToPlan( STAT_TYPE_CLICKS ) ).toEqual( PLAN_PERSONAL );
+		// 7 Days is a free plan feature, this should not be gated but test we default to personal when the stat type doesn't make sense to query
+		expect( statTypeToPlan( STATS_FEATURE_DATE_CONTROL_LAST_7_DAYS ) ).toEqual( PLAN_PERSONAL );
+	} );
+} );