Themes: filter the Marketplace tab to the themes a site's plan includes (#54026)

Author: rcrdortiz

projects/packages/jetpack-mu-wpcom/changelog/dotcom-18724-add-pricing-filters-to-the-marketplace-tab

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Themes: on the Marketplace tab, filter the themes to the ones included with the site's plan.

projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/css/themes-tab.css

@@ -30,3 +30,23 @@
 	width: fit-content;
 	margin-block-start: 10px;
 }
+
+/* Between core's tabs and its Feature Filter button. */
+.wpcom-themes-tab__pricing {
+	margin-inline: 10px;
+}
+
+/* Sized like core's own selects in this bar, to match its search box.
+   Core middle-aligns selects; baseline puts the text level with the tabs. */
+.wp-filter .wpcom-themes-tab__pricing select {
+	min-height: 32px;
+	line-height: 2.14286;
+	vertical-align: baseline;
+}
+
+@media screen and (max-width: 782px) {
+
+	.wp-filter .wpcom-themes-tab__pricing select {
+		min-height: 40px;
+	}
+}

projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/js/themes-tab-tracks.test.mts

@@ -81,4 +81,26 @@ describe( 'trackThemesTab', () => {
 		assert.equal( events.length, 2 );
 		assert.equal( ( events[ 1 ] as unknown[] )[ 0 ], 'wpcom_marketplace_tab_theme_purchase_click' );
 	} );
+
+	it( "records a change of the pricing filter, and not of core's own filters", () => {
+		type OnChange = ( event: { target: unknown } ) => void;
+
+		const events: unknown[] = [];
+		let onChange: OnChange = () => {};
+		const doc = {
+			addEventListener: ( type: string, handler: OnChange ) => {
+				if ( type === 'change' ) {
+					onChange = handler;
+				}
+			},
+		} as unknown as Document;
+
+		trackThemesTab( doc, ( ...event ) => events.push( event ) );
+		onChange( { target: { dataset: { wpcomThemesPricing: '' }, value: 'included' } } );
+		onChange( { target: { dataset: {}, value: 'blog' } } );
+
+		assert.deepEqual( events, [
+			[ 'wpcom_marketplace_tab_theme_pricing_filter', { pricing: 'included' } ],
+		] );
+	} );
 } );

projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/js/themes-tab-tracks.ts

@@ -1,4 +1,5 @@
 const PURCHASE_EVENT = 'wpcom_marketplace_tab_theme_purchase_click';
+const PRICING_EVENT = 'wpcom_marketplace_tab_theme_pricing_filter';
 
 type Track = ( name: string, props: Record< string, unknown > ) => void;
 
@@ -41,7 +42,7 @@ export function clickEvent( dataset: DOMStringMap ):
 }
 
 /**
- * Records each click on a purchase link the Marketplace tab offers.
+ * Records each click on a purchase link the Marketplace tab offers, and each change of its pricing filter.
  *
  * @param doc   - The Add Themes page.
  * @param track - Records one Tracks event.
@@ -64,4 +65,16 @@ export function trackThemesTab( doc: Document, track: Track ) {
 	// On the document, as the links are created as cards render; capturing, so no handler can stop it.
 	doc.addEventListener( 'click', onClick, true );
 	doc.addEventListener( 'auxclick', onClick, true );
+
+	doc.addEventListener(
+		'change',
+		( event: Event ) => {
+			const select = event.target as HTMLSelectElement;
+
+			if ( select.dataset?.wpcomThemesPricing !== undefined ) {
+				track( PRICING_EVENT, { pricing: select.value } );
+			}
+		},
+		true
+	);
 }

projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/js/themes-tab.js

@@ -280,4 +280,53 @@
 			)
 		);
 	}
+
+	const Collection = window.wp.themes.Collection;
+	if ( ! list || ! Collection ) {
+		return;
+	}
+
+	const PRICING_PARAM = 'wpcom_pricing';
+
+	const select = document.createElement( 'select' );
+	select.id = 'wpcom-themes-tab-pricing';
+	select.dataset.wpcomThemesPricing = '';
+	[
+		[ 'all', config.allPlans ],
+		[ config.included, config.includedLabel ],
+	].forEach( ( [ value, text ] ) => {
+		const option = document.createElement( 'option' );
+		option.value = value;
+		option.textContent = text;
+		select.appendChild( option );
+	} );
+
+	const label = document.createElement( 'label' );
+	label.className = 'screen-reader-text';
+	label.htmlFor = select.id;
+	label.textContent = config.pricingLabel;
+
+	const pricing = document.createElement( 'span' );
+	pricing.className = 'wpcom-themes-tab__pricing';
+	pricing.hidden = true;
+	pricing.appendChild( label );
+	pricing.appendChild( select );
+	list.insertAdjacentElement( 'afterend', pricing );
+
+	// Every view's request passes through here, so the filter shows only while the tab is listed.
+	const query = Collection.prototype.query;
+	Collection.prototype.query = function ( request ) {
+		const onTab = !! request && request.browse === config.sort;
+		pricing.hidden = ! onTab;
+
+		if ( onTab && select.value === config.included ) {
+			return query.call( this, { ...request, [ PRICING_PARAM ]: select.value } );
+		}
+
+		return query.call( this, request );
+	};
+
+	select.addEventListener( 'change', () =>
+		window.wp.themes.RunInstaller?.view?.browse( config.sort )
+	);
 } )();

projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/js/themes-tab.test.mts

@@ -19,6 +19,9 @@ type FakeNode = {
 	querySelector: ( selector: string ) => FakeNode | null;
 	setAttribute: ( name: string, value: string ) => void;
 	attributes: Record< string, string >;
+	value?: string;
+	listeners: Record< string, () => void >;
+	addEventListener: ( type: string, handler: () => void ) => void;
 };
 
 /**
@@ -40,6 +43,8 @@ function node( tagName?: string ): FakeNode {
 		querySelector: () => null,
 		attributes: {},
 		setAttribute: ( name, value ) => void ( el.attributes[ name ] = value ),
+		listeners: {},
+		addEventListener: ( type, handler ) => void ( el.listeners[ type ] = handler ),
 	};
 	return el;
 }
@@ -430,3 +435,75 @@ it( 'stops marking a theme once it renders outside the tab', () => {
 	);
 	assert.equal( page.activate( 'click', 'organic-stax' ), null );
 } );
+
+/**
+ * Loads the script on a page with core's filter bar and theme collection.
+ *
+ * @return The pricing filter, and what core's collection and installer were asked for.
+ */
+function pricingPage() {
+	const list = node( 'ul' );
+	const requests: unknown[] = [];
+	const browsed: string[] = [];
+	const Collection = {
+		prototype: { query: ( request: unknown ) => void requests.push( request ) },
+	};
+	const config = { sort: 'wpcom', label: 'Marketplace', included: 'included' };
+	const context = {
+		document: { querySelector: () => list, createElement: node, addEventListener: () => {} },
+		window: {
+			wpcomThemesTab: config,
+			wp: {
+				themes: {
+					view: { Theme: { prototype: { render: () => undefined } } },
+					Collection,
+					RunInstaller: { view: { browse: ( section: string ) => void browsed.push( section ) } },
+				},
+			},
+		},
+		wpcomThemesTab: config,
+	};
+	const file = new URL( './themes-tab.js', import.meta.url ).pathname;
+	vm.createContext( context );
+	new vm.Script( readFileSync( file, 'utf8' ), { filename: file } ).runInContext( context );
+
+	const pricing = list.children.find( child => child.className === 'wpcom-themes-tab__pricing' );
+	assert.ok( pricing );
+
+	return {
+		pricing,
+		select: pricing.children[ 1 ],
+		query: ( request: Record< string, unknown > ) => Collection.prototype.query.call( {}, request ),
+		// The script builds some requests in the vm's realm, which a strict deepEqual tells apart.
+		requests: () => JSON.parse( JSON.stringify( requests ) ),
+		browsed,
+	};
+}
+
+it( "narrows the tab's query and its later pages, and nothing else, to what the plan includes", () => {
+	const page = pricingPage();
+	page.query( { browse: 'wpcom' } );
+	assert.equal( page.pricing.hidden, false );
+
+	page.select.value = 'included';
+	page.query( { browse: 'wpcom' } );
+	page.query( { browse: 'wpcom', wpcom_pricing: 'included', page: 2 } );
+	page.query( { browse: 'popular' } );
+	assert.equal( page.pricing.hidden, true );
+	page.query( { search: 'blog' } );
+
+	assert.deepEqual( page.requests(), [
+		{ browse: 'wpcom' },
+		{ browse: 'wpcom', wpcom_pricing: 'included' },
+		{ browse: 'wpcom', wpcom_pricing: 'included', page: 2 },
+		{ browse: 'popular' },
+		{ search: 'blog' },
+	] );
+} );
+
+it( 'lists the tab again when the filter changes', () => {
+	const page = pricingPage();
+	page.select.listeners.change();
+
+	assert.deepEqual( page.browsed, [ 'wpcom' ] );
+} );

projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/wpcom-themes-tab.php

@@ -43,6 +43,11 @@ function wpcom_themes_get_purchases() {
  */
 const WPCOM_THEMES_TAB_PER_PAGE = 100;
 
+/**
+ * The `wpcom_pricing` value that lists only the themes this site can install with nothing to buy.
+ */
+const WPCOM_THEMES_TAB_INCLUDED = 'included';
+
 /**
  * Registers the feature flag.
  *
@@ -106,6 +111,10 @@ function wpcom_themes_tab_enqueue_script() {
 			'subscribe'      => __( 'Subscribe', 'jetpack-mu-wpcom' ),
 			/* translators: %s: Theme name. */
 			'subscribeLabel' => __( 'Subscribe to %s', 'jetpack-mu-wpcom' ),
+			'pricingLabel'   => __( 'Filter themes by plan', 'jetpack-mu-wpcom' ),
+			'allPlans'       => __( 'All plans', 'jetpack-mu-wpcom' ),
+			'included'       => WPCOM_THEMES_TAB_INCLUDED,
+			'includedLabel'  => __( 'Included with my plan', 'jetpack-mu-wpcom' ),
 			'products'       => WPCom_Themes_Store::PRODUCTS_URL,
 			/* translators: %s: Price per month, for example $7.20. */
 			'price'          => __( '%s/mo, billed annually', 'jetpack-mu-wpcom' ),
@@ -213,21 +222,38 @@ function wpcom_themes_tab_add_plan( $theme ) {
 		return wpcom_themes_tab_add_subscription( $theme );
 	}
 
-	$plan = WPCom_Themes_Tiers::plan_for( $tier );
-
-	if ( '' === $plan || WPCom_Themes_Tiers::site_can_use( $tier ) ) {
+	if ( wpcom_themes_tab_is_included( $tier, (string) ( $theme->slug ?? '' ) ) ) {
 		$theme->plan_badge = __( 'Included with plan', 'jetpack-mu-wpcom' );
 
 		return $theme;
 	}
 
+	$plan                 = WPCom_Themes_Tiers::plan_for( $tier );
 	$theme->plan_badge    = WPCom_Themes_Tiers::plan_name_for( $tier );
 	$theme->required_plan = $plan;
 	$theme->upgrade_url   = wpcom_themes_tab_checkout_url( $plan, (string) ( $theme->slug ?? '' ) );
 
 	return $theme;
 }
 
+/**
+ * Whether this site can install a theme with nothing more to buy.
+ *
+ * @param string $tier Tier slug.
+ * @param string $slug Theme slug.
+ * @return bool
+ */
+function wpcom_themes_tab_is_included( string $tier, string $slug ) {
+	// No plan includes a partner theme, so one counts only once its own subscription is paid for.
+	if ( WPCom_Themes_Tiers::PARTNER === $tier ) {
+		$subscription = wpcom_themes_tab_subscription( $slug );
+
+		return array() !== $subscription && $subscription['owned'];
+	}
+
+	return '' === WPCom_Themes_Tiers::plan_for( $tier ) || WPCom_Themes_Tiers::site_can_use( $tier );
+}
+
 /**
  * Offers the subscription a partner theme needs, which no plan includes.
  *
@@ -388,6 +414,20 @@ function wpcom_themes_tab_serve_themes_api( $result, $action, $args ) {
 	}
 
 	$themes = wpcom_themes_tab_catalog();
+
+	// Filtered before paging, so the count and the pages match what the grid shows.
+	if ( isset( $args->wpcom_pricing ) && WPCOM_THEMES_TAB_INCLUDED === $args->wpcom_pricing ) {
+		$themes = array_values(
+			array_filter(
+				$themes,
+				static function ( $theme ) {
+					// Read as the mapper reads it, so the filter agrees with the card's badge.
+					return wpcom_themes_tab_is_included( (string) ( $theme->theme_tier->slug ?? '' ), $theme->id );
+				}
+			)
+		);
+	}
+
 	$page   = isset( $args->page ) ? max( 1, (int) $args->page ) : 1;
 	$mapper = wpcom_themes_tab_mapper();
 

projects/packages/jetpack-mu-wpcom/tests/php/features/wpcom-themes/Wpcom_Themes_Tab_Test.php

@@ -621,6 +621,69 @@ public function test_a_withdrawn_partner_theme_claims_nothing() {
 		$this->assertFalse( isset( $theme->purchase_url ) );
 	}
 
+	/**
+	 * The pricing filter keeps what the site can install with nothing to buy, before paging.
+	 *
+	 * @param bool          $has_plan  Whether the site's plan grants every tier.
+	 * @param array<object> $purchases The site's purchases.
+	 * @param string[]      $listed    Slugs the filter keeps.
+	 * @dataProvider provide_included_themes
+	 */
+	#[DataProvider( 'provide_included_themes' )]
+	public function test_the_pricing_filter_lists_only_what_the_plan_includes( bool $has_plan, array $purchases, array $listed ) {
+		$this->enable_tab();
+		$this->site_has_plan( $has_plan );
+		$GLOBALS['wpcom_get_site_purchases_test_value'] = $purchases;
+		$this->answer_wpcom(
+			array(
+				'tier=partner'     => array( 'body' => self::PARTNER_THEMES ),
+				'/products'        => self::STORE_PRODUCTS,
+				'/wpcom/v2/themes' => array(
+					'body' => array(
+						'themes' => array(
+							array_merge(
+								self::THEME,
+								array(
+									'id'         => 'free-theme',
+									'theme_tier' => array( 'slug' => 'free' ),
+								)
+							),
+							array_merge( self::THEME, array( 'id' => 'personal-theme' ) ),
+							array_merge( self::THEME, array( 'theme_tier' => array( 'slug' => 'partner' ) ) ),
+						),
+					),
+				),
+			)
+		);
+
+		$result = $this->query(
+			array(
+				'browse'        => WPCOM_THEMES_TAB,
+				'wpcom_pricing' => WPCOM_THEMES_TAB_INCLUDED,
+			)
+		);
+
+		$this->assertSame( $listed, array_column( $result->themes, 'slug' ) );
+		$this->assertSame( count( $listed ), $result->info['results'] );
+	}
+
+	/**
+	 * Plans and purchases, and the themes each leaves the filter listing.
+	 *
+	 * @return array<string, array{0: bool, 1: array<object>, 2: string[]}>
+	 */
+	public static function provide_included_themes(): array {
+		return array(
+			'no plan'                    => array( false, array(), array( 'free-theme' ) ),
+			'a plan'                     => array( true, array(), array( 'free-theme', 'personal-theme' ) ),
+			'a plan and a partner theme' => array(
+				true,
+				array( (object) array( 'billing_product_slug' => 'theme-stax' ) ),
+				array( 'free-theme', 'personal-theme', 'organic-stax' ),
+			),
+		);
+	}
+
 	/**
 	 * Say whether the site's plan grants every tier.
 	 *