Plans: display selected plan description (#101433)

* Enhance Plans Features: Integrate selected feature data into subheader and update styles

* Add useSelectedFeature hook to retrieve selected feature data.
* Pass selected feature data to PlansPageSubheader for dynamic header updates.
* Update SecondaryFormattedHeader to display feature description when available.
* Add CSS rule for button line-height in formatted header styles.

* Add unit tests for useSelectedFeature hook in plans features

* Create a new test file for the useSelectedFeature hook.
* Implement tests to verify behavior when no feature or plan is selected, when plans or features are not found, and when handling null gridPlans.
* Ensure correct feature retrieval from both array and object types in grid plans.

Author: ramonjd

client/components/formatted-header/style.scss

@@ -142,4 +142,8 @@
 		cursor: pointer;
 		color: var(--studio-gray-80);
 	}
+
+	.button.is-link {
+		line-height: inherit;
+	}
 }

client/my-sites/plans-features-main/components/plans-page-subheader.tsx

@@ -3,8 +3,10 @@ import { OnboardSelect } from '@automattic/data-stores';
 import styled from '@emotion/styled';
 import { useSelect } from '@wordpress/data';
 import { useTranslate } from 'i18n-calypso';
+import { ReactNode } from 'react';
 import FormattedHeader from 'calypso/components/formatted-header';
 import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
+import { SelectedFeatureData } from '../hooks/use-selected-feature';
 
 const Subheader = styled.p`
 	margin: -32px 0 40px 0;
@@ -23,14 +25,36 @@ const Subheader = styled.p`
 	}
 `;
 
-const SecondaryFormattedHeader = ( { siteSlug }: { siteSlug?: string | null } ) => {
+const SecondaryFormattedHeader = ( {
+	siteSlug,
+	selectedFeature,
+}: {
+	siteSlug?: string | null;
+	selectedFeature: SelectedFeatureData | null;
+} ) => {
 	const translate = useTranslate();
-	const headerText = translate( 'Upgrade your plan to access this feature and more' );
-	const subHeaderText = (
+	let headerText: ReactNode = translate( 'Upgrade your plan to access this feature and more' );
+	let subHeaderText: ReactNode = (
 		<Button className="plans-features-main__view-all-plans is-link" href={ `/plans/${ siteSlug }` }>
 			{ translate( 'View all plans' ) }
 		</Button>
 	);
+	if ( selectedFeature?.description ) {
+		headerText = selectedFeature.description;
+		subHeaderText = translate(
+			'Upgrade your plan to access this feature and more. Or {{button}}view all plans{{/button}}.',
+			{
+				components: {
+					button: (
+						<Button
+							className="plans-features-main__view-all-plans is-link"
+							href={ `/plans/${ siteSlug }` }
+						/>
+					),
+				},
+			}
+		);
+	}
 
 	return (
 		<FormattedHeader
@@ -106,13 +130,15 @@ const PlansPageSubheader = ( {
 	showPlanBenefits,
 	offeringFreePlan,
 	onFreePlanCTAClick,
+	selectedFeature,
 }: {
 	siteSlug?: string | null;
 	isDisplayingPlansNeededForFeature: boolean;
 	deemphasizeFreePlan?: boolean;
 	offeringFreePlan?: boolean;
 	showPlanBenefits?: boolean;
 	onFreePlanCTAClick: () => void;
+	selectedFeature: SelectedFeatureData | null;
 } ) => {
 	const translate = useTranslate();
 
@@ -149,7 +175,9 @@ const PlansPageSubheader = ( {
 			) : (
 				showPlanBenefits && <PlanBenefitHeader />
 			) }
-			{ isDisplayingPlansNeededForFeature && <SecondaryFormattedHeader siteSlug={ siteSlug } /> }
+			{ isDisplayingPlansNeededForFeature && (
+				<SecondaryFormattedHeader siteSlug={ siteSlug } selectedFeature={ selectedFeature } />
+			) }
 		</>
 	);
 };

client/my-sites/plans-features-main/hooks/test/use-selected-feature.ts

@@ -0,0 +1,112 @@
+/**
+ * @jest-environment jsdom
+ */
+import { GridPlan } from '@automattic/plans-grid-next';
+import { renderHook } from '@testing-library/react';
+import useSelectedFeature from '../use-selected-feature';
+
+const mockFeature = {
+	getSlug: () => 'feature-1',
+	getTitle: () => 'Feature 1',
+	getDescription: () => 'Description 1',
+	availableForCurrentPlan: true,
+	availableOnlyForAnnualPlans: false,
+};
+
+const mockGridPlans = [
+	{
+		planSlug: 'plan-1' as string,
+		features: {
+			wpcomFeatures: [ mockFeature ],
+			storageFeature: {
+				getSlug: () => 'feature-2',
+				getTitle: () => 'Feature 2',
+				getDescription: () => 'Description 2',
+				availableForCurrentPlan: true,
+				availableOnlyForAnnualPlans: false,
+			},
+			jetpackFeatures: [],
+		},
+		isVisible: true,
+		tagline: 'Test Plan',
+		planTitle: 'Test Plan',
+		availableForPurchase: true,
+		pricing: { price: 0 },
+	},
+] as unknown as GridPlan[];
+
+describe( 'useSelectedFeature', () => {
+	it( 'returns null when no feature or plan is selected', () => {
+		const { result } = renderHook( () =>
+			useSelectedFeature( {
+				gridPlans: mockGridPlans,
+				selectedFeature: undefined,
+				selectedPlan: undefined,
+			} )
+		);
+		expect( result.current ).toBeNull();
+	} );
+
+	it( 'returns null when plan is not found', () => {
+		const { result } = renderHook( () =>
+			useSelectedFeature( {
+				gridPlans: mockGridPlans,
+				selectedFeature: 'feature-1',
+				selectedPlan: 'non-existent-plan',
+			} )
+		);
+		expect( result.current ).toBeNull();
+	} );
+
+	it( 'finds feature in array type features', () => {
+		const { result } = renderHook( () =>
+			useSelectedFeature( {
+				gridPlans: mockGridPlans,
+				selectedFeature: 'feature-1',
+				selectedPlan: 'plan-1',
+			} )
+		);
+		expect( result.current ).toEqual( {
+			slug: 'feature-1',
+			title: 'Feature 1',
+			description: 'Description 1',
+		} );
+	} );
+
+	it( 'finds feature in object type features', () => {
+		const { result } = renderHook( () =>
+			useSelectedFeature( {
+				gridPlans: mockGridPlans,
+				selectedFeature: 'feature-2',
+				selectedPlan: 'plan-1',
+			} )
+		);
+		expect( result.current ).toEqual( {
+			slug: 'feature-2',
+			title: 'Feature 2',
+			description: 'Description 2',
+		} );
+	} );
+
+	it( 'returns null when feature is not found in plan', () => {
+		const { result } = renderHook( () =>
+			useSelectedFeature( {
+				gridPlans: mockGridPlans,
+				selectedFeature: 'non-existent-feature',
+				selectedPlan: 'plan-1',
+			} )
+		);
+		expect( result.current ).toBeNull();
+	} );
+
+	it( 'handles null gridPlans', () => {
+		const { result } = renderHook( () =>
+			useSelectedFeature( {
+				gridPlans: null,
+				selectedFeature: 'feature-1',
+				selectedPlan: 'plan-1',
+			} )
+		);
+		expect( result.current ).toBeNull();
+	} );
+} );

client/my-sites/plans-features-main/hooks/use-selected-feature.ts

@@ -0,0 +1,62 @@
+import { GridPlan } from '@automattic/plans-grid-next';
+import { useMemo } from '@wordpress/element';
+
+interface Params {
+	gridPlans: GridPlan[] | null;
+	selectedFeature?: string;
+	selectedPlan?: string;
+}
+
+export type SelectedFeatureData = {
+	slug: string;
+	title: string;
+	description: string;
+};
+
+const useSelectedFeature = ( {
+	selectedFeature,
+	selectedPlan,
+	gridPlans,
+}: Params ): SelectedFeatureData | null => {
+	const selectedFeatureData = useMemo( () => {
+		if ( ! selectedPlan || ! selectedFeature ) {
+			return null;
+		}
+
+		const selectedPlanGroup = gridPlans?.find( ( { planSlug } ) => planSlug === selectedPlan );
+
+		if ( ! selectedPlanGroup?.features ) {
+			return null;
+		}
+
+		for ( const featureType of Object.values( selectedPlanGroup.features ) ) {
+			if ( Array.isArray( featureType ) ) {
+				const foundFeature = featureType?.find(
+					( feature ) => feature?.getSlug() === selectedFeature
+				);
+				if ( foundFeature ) {
+					return foundFeature;
+				}
+			} else if (
+				featureType &&
+				typeof featureType === 'object' &&
+				featureType?.getSlug() === selectedFeature
+			) {
+				return featureType;
+			}
+		}
+		return null;
+	}, [ gridPlans, selectedFeature, selectedPlan ] );
+
+	if ( selectedFeatureData ) {
+		return {
+			slug: selectedFeature as string,
+			title: selectedFeatureData.getTitle(),
+			description: selectedFeatureData.getDescription(),
+		};
+	}
+
+	return null;
+};
+
+export default useSelectedFeature;

client/my-sites/plans-features-main/index.tsx

@@ -79,6 +79,7 @@ import useGenerateActionHook from './hooks/use-generate-action-hook';
 import usePlanBillingPeriod from './hooks/use-plan-billing-period';
 import usePlanFromUpsells from './hooks/use-plan-from-upsells';
 import usePlanIntentFromSiteMeta from './hooks/use-plan-intent-from-site-meta';
+import useSelectedFeature from './hooks/use-selected-feature';
 import useGetFreeSubdomainSuggestion from './hooks/use-suggested-free-domain-from-paid-domain';
 import type {
 	PlansIntent,
@@ -755,6 +756,12 @@ const PlansFeaturesMain = ( {
 		</div>
 	);
 
+	const selectedFeatureData = useSelectedFeature( {
+		gridPlans: gridPlansForFeaturesGrid,
+		selectedPlan,
+		selectedFeature,
+	} );
+
 	return (
 		<>
 			<div className={ clsx( 'plans-features-main', 'is-pricing-grid-2023-plans-features-main' ) }>
@@ -808,6 +815,7 @@ const PlansFeaturesMain = ( {
 				<PlansPageSubheader
 					siteSlug={ siteSlug }
 					isDisplayingPlansNeededForFeature={ isDisplayingPlansNeededForFeature }
+					selectedFeature={ selectedFeatureData }
 					offeringFreePlan={ offeringFreePlan }
 					deemphasizeFreePlan={ deemphasizeFreePlan }
 					onFreePlanCTAClick={ onFreePlanCTAClick }