From 020342ad71a2eda243d746da7f109bc37cdcfc57 Mon Sep 17 00:00:00 2001
From: Razvan Papadopol <razvan.papadopol@automattic.com>
Date: Thu, 30 Apr 2020 17:35:46 +0300
Subject: [PATCH 1/2] Add functionality to get plan from URL param. * Update
 path to include plan. * Introduce plans.ts in gutenboarding lib. * Update
 PlansButton to use lib/plans and path.

---
 .../components/plans-button/index.tsx         | 16 +++++-----
 client/landing/gutenboarding/lib/plans.ts     | 25 ++++++++++++++++
 client/landing/gutenboarding/path.ts          | 29 +++++++++++++++----
 3 files changed, 57 insertions(+), 13 deletions(-)
 create mode 100644 client/landing/gutenboarding/lib/plans.ts

diff --git a/client/landing/gutenboarding/components/plans-button/index.tsx b/client/landing/gutenboarding/components/plans-button/index.tsx
index 6c67c029f9186..6579dc85abf45 100644
--- a/client/landing/gutenboarding/components/plans-button/index.tsx
+++ b/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 }>
diff --git a/client/landing/gutenboarding/lib/plans.ts b/client/landing/gutenboarding/lib/plans.ts
new file mode 100644
index 0000000000000..b02d12a554db5
--- /dev/null
+++ b/client/landing/gutenboarding/lib/plans.ts
@@ -0,0 +1,25 @@
+/**
+ * Internal dependencies
+ */
+import * as plans from 'lib/plans/constants';
+import { getPlan, getPlanPath } from 'lib/plans';
+
+const supportedPlans = [
+	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();
+}
diff --git a/client/landing/gutenboarding/path.ts b/client/landing/gutenboarding/path.ts
index 9076f91b48a00..a98f51280340c 100644
--- a/client/landing/gutenboarding/path.ts
+++ b/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;

From 2bb48f32b752f608b32e28c1619f9dc15cbd2b83 Mon Sep 17 00:00:00 2001
From: Razvan Papadopol <razvan.papadopol@automattic.com>
Date: Thu, 30 Apr 2020 18:04:40 +0300
Subject: [PATCH 2/2] Add support for free plan param to Gutenboarding

---
 client/landing/gutenboarding/lib/plans.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/landing/gutenboarding/lib/plans.ts b/client/landing/gutenboarding/lib/plans.ts
index b02d12a554db5..61de8e2637d8a 100644
--- a/client/landing/gutenboarding/lib/plans.ts
+++ b/client/landing/gutenboarding/lib/plans.ts
@@ -5,6 +5,7 @@ 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,