Plans: Add parameter to show only specific plans for the Jetpack app …

…plan selection flow (#77029)

* Show only personal and premium plans when jetpackAppPlans parameter is set
* Support configuring wp.com/plans/yearly/{siteURL} flow with jetpackAppPlans parameter, that limits the number of plans shown to support Jetpack app-specific flows
* Hide domain and plan package header from Plans when jetpackAppPlans parameter is set
* Support the Jetpack app plan purchasing flows by hiding a navigation header that displays the position inside domain and plan upsell flow and allows to come back
* Remember jetpackAppPlans parameter when toggling between Plan intervals
* Parse domainAndPlanPackage and jetpackAppPlans parameters to support both true and false values
* Handle parameters being null before parsing to Boolean
* Use explicit value comparison for query parameters
* Add a comment explaining filtering of premium and personal plans for the Jetpack app
* Define domainAndPlanPackage prop as boolean

client/my-sites/plans-features-main/components/plan-type-selector.tsx

@@ -180,6 +180,8 @@ export const IntervalTypeToggle: React.FunctionComponent< IntervalTypeProps > =
 		'domainAndPlanPackage'
 	);
 
+	const isJetpackAppFlow = new URLSearchParams( window.location.search ).get( 'jetpackAppPlans' );
+
 	const intervalTabs = showBiannualToggle ? [ 'yearly', '2yearly' ] : [ 'monthly', 'yearly' ];
 
 	return (
@@ -196,6 +198,7 @@ export const IntervalTypeToggle: React.FunctionComponent< IntervalTypeProps > =
 							intervalType: interval,
 							domain: isDomainUpsellFlow,
 							domainAndPlanPackage: isDomainAndPlanPackageFlow,
+							jetpackAppPlans: isJetpackAppFlow,
 							...additionalPathProps,
 						} ) }
 						isPlansInsideStepper={ props.isPlansInsideStepper }

client/my-sites/plans/controller.jsx

@@ -38,7 +38,8 @@ export function plans( context, next ) {
 					? context.query.addDomainFlow === 'true'
 					: undefined
 			}
-			domainAndPlanPackage={ context.query.domainAndPlanPackage }
+			domainAndPlanPackage={ context.query.domainAndPlanPackage === 'true' }
+			jetpackAppPlans={ context.query.jetpackAppPlans === 'true' }
 			is2023PricingGridVisible={ is2023PricingGridActivePage( null, context.pathname ) }
 		/>
 	);

client/my-sites/plans/main.jsx

@@ -9,6 +9,8 @@ import {
 	PLAN_WOOEXPRESS_SMALL_MONTHLY,
 	PLAN_WOOEXPRESS_MEDIUM,
 	PLAN_WOOEXPRESS_MEDIUM_MONTHLY,
+	TYPE_PERSONAL,
+	TYPE_PREMIUM,
 } from '@automattic/calypso-products';
 import { is2023PricingGridActivePage } from '@automattic/calypso-products/src/plans-utilities';
 import { WpcomPlansUI } from '@automattic/data-stores';
@@ -147,7 +149,7 @@ class Plans extends Component {
 	static propTypes = {
 		context: PropTypes.object.isRequired,
 		redirectToAddDomainFlow: PropTypes.bool,
-		domainAndPlanPackage: PropTypes.string,
+		domainAndPlanPackage: PropTypes.bool,
 		intervalType: PropTypes.string,
 		customerType: PropTypes.string,
 		selectedFeature: PropTypes.string,
@@ -258,6 +260,8 @@ class Plans extends Component {
 		}
 
 		const hideFreePlan = ! is2023PricingGridVisible || this.props.isDomainAndPlanPackageFlow;
+		// The Jetpack mobile app only wants to display two plans -- personal and premium
+		const planTypes = this.props.jetpackAppPlans ? [ TYPE_PERSONAL, TYPE_PREMIUM ] : null;
 
 		const hidePlanTypeSelector =
 			this.props.domainAndPlanPackage &&
@@ -279,6 +283,7 @@ class Plans extends Component {
 				plansWithScroll={ false }
 				hidePlansFeatureComparison={ this.props.isDomainAndPlanPackageFlow }
 				is2023PricingGridVisible={ is2023PricingGridVisible }
+				planTypes={ planTypes }
 			/>
 		);
 	}
@@ -349,6 +354,7 @@ class Plans extends Component {
 			isFreePlan,
 			currentPlanIntervalType,
 			domainFromHomeUpsellFlow,
+			jetpackAppPlans,
 		} = this.props;
 
 		if ( ! selectedSite || this.isInvalidPlanInterval() || ! currentPlan ) {
@@ -412,7 +418,9 @@ class Plans extends Component {
 						{ isDomainAndPlanPackageFlow && (
 							<>
 								<div className="plans__header">
-									<DomainAndPlanPackageNavigation goBackLink={ goBackLink } step={ 2 } />
+									{ ! jetpackAppPlans && (
+										<DomainAndPlanPackageNavigation goBackLink={ goBackLink } step={ 2 } />
+									) }
 
 									<FormattedHeader brandFont headerText={ headline } align="center" />