My Jetpack: add 'View included features' link to Plans section

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/products.tsx

@@ -1,10 +1,12 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router';
 import { FilteredPlans } from './filtered-plans';
 import { FilteredProducts } from './filtered-products';
 import { Filters } from './filters';
 import { ProductFiltersProvider, useProductFiltersContext } from './products-tracking-context';
 import styles from './styles.module.scss';
 import { ProductFilter } from './types';
+import { isValidFilter } from './utils';
 
 /**
  * Inner component that consumes the ProductFiltering context.
@@ -105,14 +107,40 @@ const ProductsContent = ( {
  * @return The rendered component.
  */
 export const Products = () => {
-	const [ selectedFilter, setSelectedFilter ] = useState< ProductFilter >( 'all' );
-	const [ search, setSearch ] = useState< string >( '' );
+	const [ searchParams, setSearchParams ] = useSearchParams();
+	const filterParam = searchParams.get( 'filter' );
+	const selectedFilter: ProductFilter = isValidFilter( filterParam ) ? filterParam : 'all';
+	const search = searchParams.get( 'search' ) || '';
+
+	// Update URL when filter changes
+	const handleSetSelectedFilter = useCallback(
+		( filter: ProductFilter ) => {
+			const newSearchParams = new URLSearchParams( searchParams );
+			newSearchParams.set( 'filter', filter );
+			setSearchParams( newSearchParams, { replace: true } );
+		},
+		[ searchParams, setSearchParams ]
+	);
+
+	// Update URL when search changes
+	const setSearch = useCallback(
+		( searchTerm: string ) => {
+			const newSearchParams = new URLSearchParams( searchParams );
+			if ( searchTerm ) {
+				newSearchParams.set( 'search', searchTerm );
+			} else {
+				newSearchParams.delete( 'search' );
+			}
+			setSearchParams( newSearchParams, { replace: true } );
+		},
+		[ searchParams, setSearchParams ]
+	);
 
 	return (
 		<ProductFiltersProvider currentFilter={ selectedFilter } searchTerm={ search }>
 			<ProductsContent
 				selectedFilter={ selectedFilter }
-				setSelectedFilter={ setSelectedFilter }
+				setSelectedFilter={ handleSetSelectedFilter }
 				search={ search }
 				setSearch={ setSearch }
 			/>

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/utils.ts

@@ -59,6 +59,16 @@ export function getSectionTitle( section: string ) {
 	return option?.label;
 }
 
+/**
+ * Check if a string is a valid ProductFilter.
+ *
+ * @param {string | null} value - The value to check.
+ * @return True if the value is a valid ProductFilter.
+ */
+export function isValidFilter( value: string | null ): value is ProductFilter {
+	return getProductsFilterChoices().some( item => item.value === value );
+}
+
 /**
  * Filter sections based on the search term by matching the card and module data with the search term.
  *

projects/packages/my-jetpack/_inc/components/plans-section/index.tsx

@@ -196,6 +196,10 @@ const PlanSectionFooter: FC< PlanSectionHeaderAndFooterProps > = ( { numberOfPur
 		recordEvent( 'jetpack_myjetpack_plans_manage_click' );
 	}, [ recordEvent ] );
 
+	const viewIncludedFeaturesClickHandler = useCallback( () => {
+		recordEvent( 'jetpack_myjetpack_plans_view_included_features_click' );
+	}, [ recordEvent ] );
+
 	const planPurchaseClickHandler = useCallback( () => {
 		recordEvent( 'jetpack_myjetpack_plans_purchase_click' );
 	}, [ recordEvent ] );
@@ -236,6 +240,18 @@ const PlanSectionFooter: FC< PlanSectionHeaderAndFooterProps > = ( { numberOfPur
 					</ExternalLink>
 				</li>
 			) }
+			{ numberOfPurchases > 0 && (
+				<li className={ styles[ 'actions-list-item' ] }>
+					<Button
+						onClick={ viewIncludedFeaturesClickHandler }
+						href={ getMyJetpackUrl( '#/products?filter=included' ) }
+						variant="link"
+						weight="regular"
+					>
+						{ __( 'View included features', 'jetpack-my-jetpack' ) }
+					</Button>
+				</li>
+			) }
 			{ ! hasComplete && (
 				<li className={ styles[ 'actions-list-item' ] }>
 					<Button

projects/packages/my-jetpack/changelog/MYJP-287

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+My Jetpack: add 'View included features' link to Plans section for quick access to plan features.