Stats: hide Jetpack upsells for products the site already owns

The Odyssey Stats upsell section showed a product whenever the site was
missing any one of the product's feature slugs, so a site on Jetpack
Security (which bundles VaultPress Backup) was still prompted to buy
Backup, and only checkout revealed the product was already included.
Invert the check: each upsell now lists the entitlement features that
mean the product is owned, and the card is hidden when the site has all
of them.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: dognose24

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

@@ -6,6 +6,7 @@ import { getSiteTitle } from 'calypso/state/sites/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import UpsellCard from './upsell-card';
 import {
+	filterUpsellsBySiteFeatures,
 	getAvailableUpsells,
 	getUpsellFeatureSlugs,
 	Product,
@@ -43,11 +44,9 @@ function getVisibleUpsells( siteId: number | null, siteFeatures: string[] ): Pro
 		return [];
 	}
 
-	// Filter available upsells against site features.
-	// If an upsell has even one feature that is not active on the site, present it to the user.
-	const filteredUpsells = getAvailableUpsells().filter( ( upsell ) =>
-		upsell.features.some( ( feature ) => ! siteFeatures.includes( feature ) )
-	);
+	// Hide upsells for products the site already owns, either directly or through
+	// a bundling plan (e.g. don't upsell Backup to a site on Jetpack Security).
+	const filteredUpsells = filterUpsellsBySiteFeatures( getAvailableUpsells(), siteFeatures );
 
 	// Add the checkout URL to the results.
 	const finalUpsells = filteredUpsells.map( ( upsell ) => {

client/my-sites/stats/jetpack-upsell-section/test/available-upsells.tsx

@@ -0,0 +1,52 @@
+import { filterUpsellsBySiteFeatures, getAvailableUpsells } from '../upsell-card/available-upsells';
+
+// Feature slugs a site on Jetpack Security (Daily) reports: Backup, Scan and
+// Anti-spam are bundled, but not Search, VideoPress, Boost or Social.
+const SECURITY_DAILY_FEATURES = [
+	'antispam',
+	'backups',
+	'backups-daily',
+	'full-activity-log',
+	'scan',
+];
+
+describe( 'filterUpsellsBySiteFeatures', () => {
+	const upsells = getAvailableUpsells();
+	const visibleSlugs = ( siteFeatures: string[] ) =>
+		filterUpsellsBySiteFeatures( upsells, siteFeatures ).map( ( upsell ) => upsell.slug );
+
+	it( 'shows all upsells when the site has no features', () => {
+		expect( visibleSlugs( [] ) ).toEqual( [
+			'security',
+			'backup',
+			'search',
+			'video',
+			'boost',
+			'social',
+		] );
+	} );
+
+	it( 'hides the Backup and Security upsells when a plan already bundles them', () => {
+		expect( visibleSlugs( SECURITY_DAILY_FEATURES ) ).toEqual( [
+			'search',
+			'video',
+			'boost',
+			'social',
+		] );
+	} );
+
+	it( 'hides the Backup upsell but keeps Security when only Backup is owned', () => {
+		expect( visibleSlugs( [ 'backups' ] ) ).toEqual( [
+			'security',
+			'search',
+			'video',
+			'boost',
+			'social',
+		] );
+	} );
+
+	it( 'hides every upsell when the site has all owned features', () => {
+		const allOwnedFeatures = upsells.flatMap( ( upsell ) => upsell.ownedFeatures );
+		expect( visibleSlugs( allOwnedFeatures ) ).toEqual( [] );
+	} );
+} );

client/my-sites/stats/jetpack-upsell-section/upsell-card/available-upsells.tsx

@@ -21,7 +21,9 @@ export type Product = {
 	isFree: boolean;
 	slug: string;
 	title: string;
-	features: string[];
+	// Feature slugs that indicate the product (or a plan bundling it) is already
+	// owned. The upsell is hidden when the site has all of them.
+	ownedFeatures: string[];
 	checkoutSlug: string;
 	checkoutUrl: string | null;
 };
@@ -37,26 +39,7 @@ export function getAvailableUpsells() {
 			isFree: false,
 			slug: 'security',
 			title: 'Security',
-			features: [
-				'akismet',
-				'antispam',
-				'backups',
-				'backups-daily',
-				'core/audio',
-				'full-activity-log',
-				'google-analytics',
-				'google-my-business',
-				'priority_support',
-				'real-time-backups',
-				'scan',
-				'simple-payments',
-				'subscriber-unlimited-imports',
-				'support',
-				'vaultpress-backups',
-				'video-hosting',
-				'wordads',
-				'wordads-jetpack',
-			],
+			ownedFeatures: [ 'backups', 'scan', 'antispam' ],
 			checkoutSlug: PLAN_JETPACK_SECURITY_T1_YEARLY,
 		},
 		{
@@ -68,7 +51,7 @@ export function getAvailableUpsells() {
 			isFree: false,
 			slug: 'backup',
 			title: 'Backup',
-			features: [ 'backups', 'full-activity-log', 'real-time-backups', 'priority_support' ],
+			ownedFeatures: [ 'backups' ],
 			checkoutSlug: PRODUCT_JETPACK_BACKUP_T1_YEARLY,
 		},
 		{
@@ -80,7 +63,7 @@ export function getAvailableUpsells() {
 			isFree: false,
 			slug: 'search',
 			title: 'Search',
-			features: [ 'search', 'instant-search' ],
+			ownedFeatures: [ 'search' ],
 			checkoutSlug: PRODUCT_JETPACK_SEARCH,
 		},
 		{
@@ -92,7 +75,7 @@ export function getAvailableUpsells() {
 			isFree: false,
 			slug: 'video',
 			title: 'VideoPress',
-			features: [ 'videopress', 'videopress-1tb-storage' ],
+			ownedFeatures: [ 'videopress' ],
 			checkoutSlug: PRODUCT_JETPACK_VIDEOPRESS,
 		},
 		{
@@ -104,14 +87,7 @@ export function getAvailableUpsells() {
 			isFree: true,
 			slug: 'boost',
 			title: 'Boost',
-			features: [
-				'cloud-critical-css',
-				'cornerstone-10-pages',
-				'image-cdn-liar',
-				'image-cdn-quality',
-				'image-size-analysis',
-				'performance-history',
-			],
+			ownedFeatures: [ 'cloud-critical-css' ],
 			checkoutSlug: PRODUCT_JETPACK_BOOST,
 		},
 		{
@@ -123,11 +99,7 @@ export function getAvailableUpsells() {
 			isFree: true,
 			slug: 'social',
 			title: 'Social',
-			features: [
-				'social-enhanced-publishing',
-				'social-image-generator',
-				'subscriber-unlimited-imports',
-			],
+			ownedFeatures: [ 'social-enhanced-publishing' ],
 			checkoutSlug: PRODUCT_JETPACK_SOCIAL_BASIC,
 		},
 	] as Product[];
@@ -137,5 +109,14 @@ export function getAvailableUpsells() {
 // Currently we end up calling getAvailableUpsells() twice per render.
 export function getUpsellFeatureSlugs(): string[] {
 	const upsells = getAvailableUpsells();
-	return upsells.flatMap( ( upsell ) => upsell.features );
+	return upsells.flatMap( ( upsell ) => upsell.ownedFeatures );
+}
+
+export function filterUpsellsBySiteFeatures(
+	upsells: Product[],
+	siteFeatures: string[]
+): Product[] {
+	return upsells.filter(
+		( upsell ) => ! upsell.ownedFeatures.every( ( feature ) => siteFeatures.includes( feature ) )
+	);
 }