Gutenboarding: get plan from URL param

client/landing/gutenboarding/components/plans-button/index.tsx

@@ -12,9 +12,9 @@ import { useI18n } from '@automattic/react-i18n';
  * Internal dependencies
  */
 import JetpackLogo from 'components/jetpack-logo'; // @TODO: extract to @automattic package
-import * as plans from 'lib/plans/constants';
-import { getPlan } from 'lib/plans';
 import { STORE_KEY as ONBOARD_STORE } from '../../stores/onboard';
+import { freePlan, defaultPaidPlan, getPlanSlugByPath, getPlanTitle } from '../../lib/plans';
+import { usePlanRouteParam } from '../../path';
 
 /**
  * Style dependencies
@@ -23,16 +23,16 @@ import './style.scss';
 
 const PlansButton: React.FunctionComponent< Button.ButtonProps > = ( { ...buttonProps } ) => {
 	const { __ } = useI18n();
-	const hasPaidDomain = useSelect( ( select ) => select( ONBOARD_STORE ).hasPaidDomain() );
 
 	// mobile first to match SCSS media query https://github.com/Automattic/wp-calypso/pull/41471#discussion_r415678275
 	const isDesktop = useViewportMatch( 'mobile', '>=' );
 
-	const planLabel = sprintf(
-		/* translators: Button label where %s is the WordPress.com plan name (eg: Free, Personal, Premium, Business) */
-		__( '%s Plan' ),
-		getPlan( hasPaidDomain ? plans.PLAN_PREMIUM : plans.PLAN_FREE ).getTitle()
-	);
+	const hasPaidDomain = useSelect( ( select ) => select( ONBOARD_STORE ).hasPaidDomain() );
+	const planPath = usePlanRouteParam();
+	const plan = getPlanSlugByPath( planPath ) || ( hasPaidDomain ? defaultPaidPlan : freePlan );
+
+	/* translators: Button label where %s is the WordPress.com plan name (eg: Free, Personal, Premium, Business) */
+	const planLabel = sprintf( __( '%s Plan' ), getPlanTitle( plan ) );
 
 	return (
 		<Button disabled label={ __( planLabel ) } className="plans-button" { ...buttonProps }>

client/landing/gutenboarding/lib/plans.ts

@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import * as plans from 'lib/plans/constants';
+import { getPlan, getPlanPath } from 'lib/plans';
+
+const supportedPlans = [
+	plans.PLAN_FREE,
+	plans.PLAN_PERSONAL,
+	plans.PLAN_PREMIUM,
+	plans.PLAN_BUSINESS,
+	plans.PLAN_ECOMMERCE,
+];
+
+export const freePlan = plans.PLAN_FREE;
+export const defaultPaidPlan = plans.PLAN_PREMIUM;
+
+export const supportedPlansPaths: string[] = supportedPlans.map( getPlanPath );
+
+export function getPlanSlugByPath( path?: string ): string | undefined {
+	return supportedPlans.find( ( plan ) => getPlanPath( plan ) === path );
+}
+
+export function getPlanTitle( planSlug: string ): string {
+	return getPlan( planSlug ).getTitle();
+}

client/landing/gutenboarding/path.ts

@@ -6,6 +6,11 @@ import { generatePath, useLocation, useRouteMatch } from 'react-router-dom';
 import { getLanguageRouteParam } from '../../lib/i18n-utils';
 import { ValuesType } from 'utility-types';
 
+/**
+ * Internal dependencies
+ */
+import { supportedPlansPaths } from './lib/plans';
+
 // The first step (IntentGathering), which is found at the root route (/), is set as
 // `undefined`, as that's what matching our `path` pattern against a route with no explicit
 // step fragment will return.
@@ -21,31 +26,40 @@ export const Step = {
 // We remove falsey `steps` with `.filter( Boolean )` as they'd mess up our |-separated route pattern.
 export const steps = Object.values( Step ).filter( Boolean );
 
-// We add back the possibility of an empty step fragment through the `?` question mark at the end of that fragment.
-export const path = `/:step(${ steps.join( '|' ) })?/${ getLanguageRouteParam() }`;
+const routeFragments = {
+	// We add the possibility of an empty step fragment through the `?` question mark at the end of that fragment.
+	step: `:step(${ steps.join( '|' ) })?`,
+	plan: `:plan(${ supportedPlansPaths.join( '|' ) })?`,
+	lang: getLanguageRouteParam(),
+};
+
+export const path = [ '', ...Object.values( routeFragments ) ].join( '/' );
 
 export type StepType = ValuesType< typeof Step >;
 export type StepNameType = keyof typeof Step;
 
 export function usePath() {
 	const langParam = useLangRouteParam();
+	const planParam = usePlanRouteParam();
 
-	return ( step?: StepType, lang?: string ) => {
+	return ( step?: StepType, lang?: string, plan?: string ) => {
 		// When lang is null, remove lang.
 		// When lang is empty or undefined, get lang from route param.
 		lang = lang === null ? '' : lang || langParam;
+		plan = plan === null ? '' : plan || planParam;
 
-		if ( ! step && ! lang ) {
+		if ( ! step && ! lang && ! plan ) {
 			return '/';
 		}
 
 		try {
 			return generatePath( path, {
 				step,
+				plan,
 				lang,
 			} );
 		} catch {
-			// If we get an invalid lang, `generatePath` throws a TypeError.
+			// If we get an invalid lang or plan, `generatePath` throws a TypeError.
 			return generatePath( path, { step } );
 		}
 	};
@@ -61,6 +75,11 @@ export function useStepRouteParam() {
 	return match?.params.step as StepType;
 }
 
+export function usePlanRouteParam() {
+	const match = useRouteMatch< { plan?: string } >( path );
+	return match?.params.plan;
+}
+
 export function useCurrentStep() {
 	const stepRouteParam = useStepRouteParam();
 	return findKey( Step, ( step ) => step === stepRouteParam ) as StepNameType;