Task: Create Plans page for Jetpack App Site Creation

client/jetpack-app/page-middleware/layout.tsx

@@ -0,0 +1,61 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Context } from 'page';
+import { FunctionComponent } from 'react';
+import { Provider as ReduxProvider } from 'react-redux';
+import { Store } from 'redux';
+import CalypsoI18nProvider from 'calypso/components/calypso-i18n-provider';
+import { RouteProvider } from 'calypso/components/route';
+import { CalypsoReactQueryDevtools } from 'calypso/lib/react-query-devtools-helper';
+
+export { render, hydrate } from 'calypso/controller/web-util';
+
+interface ProviderWrappedLayoutProps {
+	store: Store;
+	queryClient: QueryClient;
+	currentRoute: string;
+	currentQuery: object;
+	primary: React.ReactNode;
+	redirectUri: string;
+}
+
+export const ProviderWrappedLayout: FunctionComponent< ProviderWrappedLayoutProps > = ( {
+	store,
+	queryClient,
+	currentRoute,
+	currentQuery,
+	primary,
+} ) => {
+	return (
+		<CalypsoI18nProvider>
+			{ /* TS incorrectly infers RouteProvider types; ignore errors here. */ }
+			{ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ }
+			{ /* @ts-ignore */ }
+			<RouteProvider currentRoute={ currentRoute } currentQuery={ currentQuery }>
+				<QueryClientProvider client={ queryClient }>
+					<ReduxProvider store={ store }>{ primary }</ReduxProvider>
+					<CalypsoReactQueryDevtools />
+				</QueryClientProvider>
+			</RouteProvider>
+		</CalypsoI18nProvider>
+	);
+};
+
+export function makeJetpackAppLayoutMiddleware( LayoutComponent: typeof ProviderWrappedLayout ) {
+	return ( context: Context, next: () => void ) => {
+		const { store, queryClient, pathname, query, primary } = context;
+
+		context.layout = (
+			<LayoutComponent
+				store={ store }
+				queryClient={ queryClient }
+				currentRoute={ pathname }
+				currentQuery={ query }
+				primary={ primary }
+				redirectUri={ context.originalUrl }
+			/>
+		);
+		next();
+	};
+}
+
+export const makeJetpackAppLayout = makeJetpackAppLayoutMiddleware( ProviderWrappedLayout );

client/jetpack-app/plans/controller.tsx

@@ -0,0 +1,12 @@
+import JetpackAppPlans from './main';
+
+export function jetpackAppPlans( context: PageJS.Context, next: () => void ) {
+	context.primary = (
+		<JetpackAppPlans
+			paidDomainName={ context.query.paid_domain_name }
+			redirectTo={ context.query.redirect_to }
+		/>
+	);
+
+	next();
+}

client/jetpack-app/plans/index.ts

@@ -0,0 +1,16 @@
+import page from 'page';
+import { render as clientRender } from 'calypso/controller';
+import { navigation, siteSelection } from 'calypso/my-sites/controller';
+import { makeJetpackAppLayout } from '../page-middleware/layout';
+import { jetpackAppPlans } from './controller';
+
+export default function () {
+	page(
+		'/jetpack-app/plans',
+		siteSelection,
+		navigation,
+		jetpackAppPlans,
+		makeJetpackAppLayout,
+		clientRender
+	);
+}

client/jetpack-app/plans/main.tsx

@@ -0,0 +1,113 @@
+import { getPlan, Plan, PLAN_FREE } from '@automattic/calypso-products';
+import { MinimalRequestCartProduct } from '@automattic/shopping-cart';
+import { useTranslate } from 'i18n-calypso';
+import { useSelector } from 'react-redux';
+import QueryPlans from 'calypso/components/data/query-plans';
+import FormattedHeader from 'calypso/components/formatted-header';
+import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
+import Main from 'calypso/components/main';
+import { getPlanCartItem } from 'calypso/lib/cart-values/cart-items';
+import PlansFeaturesMain from 'calypso/my-sites/plans-features-main';
+import { getPlanSlug } from 'calypso/state/plans/selectors';
+import { AppState } from 'calypso/types';
+
+import './style.scss';
+
+interface HeaderProps {
+	paidDomainName?: string;
+}
+
+interface JetpackAppPlansProps {
+	paidDomainName?: string;
+	redirectTo?: string;
+}
+
+const Header: React.FC< HeaderProps > = ( { paidDomainName } ) => {
+	const translate = useTranslate();
+
+	return (
+		<div className="plans__header">
+			<FormattedHeader
+				brandFont
+				headerText={ translate( 'Choose the perfect plan' ) }
+				align="center"
+			/>
+			{ paidDomainName ? (
+				<>
+					<p>
+						{ translate(
+							'With your annual plan, you’ll get %(domainName)s {{strong}}free for the first year{{/strong}}.',
+							{
+								args: {
+									domainName: paidDomainName,
+								},
+								components: { strong: <strong /> },
+							}
+						) }
+					</p>
+					<p>
+						{ translate(
+							'You’ll also unlock advanced features that make it easy to build and grow your site.'
+						) }
+					</p>
+				</>
+			) : (
+				<p>{ translate( 'See and compare the features available on each WordPress.com plan.' ) }</p>
+			) }
+		</div>
+	);
+};
+
+const JetpackAppPlans: React.FC< JetpackAppPlansProps > = ( { paidDomainName, redirectTo } ) => {
+	const planSlug = useSelector( ( state: AppState ) =>
+		getPlanSlug( state, getPlan( PLAN_FREE )?.getProductId() || 0 )
+	) as string | null;
+	const plansLoaded = Boolean( planSlug );
+
+	const handleRedirect = ( planId?: number ) => {
+		if ( redirectTo ) {
+			const cartItemParam = planId ? `?plan_id=${ planId }` : '';
+			window.location.href = `${ redirectTo }${ cartItemParam }`;
+		}
+	};
+
+	const onUpgradeClick = ( cartItems?: MinimalRequestCartProduct[] | null | undefined ) => {
+		const productSlug = getPlanCartItem( cartItems )?.product_slug;
+
+		if ( ! productSlug ) {
+			return handleRedirect();
+		}
+
+		const plan = getPlan( productSlug ) as Plan;
+
+		handleRedirect( plan.getProductId() );
+	};
+
+	return (
+		<Main className="jetpack-app-plans">
+			<QueryPlans />
+			{ plansLoaded ? (
+				<>
+					<Header paidDomainName={ paidDomainName } />
+					<PlansFeaturesMain
+						paidDomainName={ paidDomainName }
+						intent="plans-jetpack-app-site-creation"
+						isInSignup={ true }
+						intervalType="yearly"
+						onUpgradeClick={ onUpgradeClick }
+						plansWithScroll={ false }
+						removePaidDomain={ handleRedirect }
+						hidePlanTypeSelector={ true }
+						hidePlansFeatureComparison={ true }
+					/>
+				</>
+			) : (
+				<div className="plans__loading">
+					<LoadingEllipsis />
+				</div>
+			) }
+		</Main>
+	);
+};
+
+export default JetpackAppPlans;

client/jetpack-app/plans/style.scss

@@ -0,0 +1,33 @@
+@import "calypso/my-sites/plans-grid/media-queries";
+
+body {
+	background-color: #fdfdfd;
+}
+
+.jetpack-app-plans {
+	@include plan-features-layout-switcher;
+
+	.plans__header {
+		display: block;
+		overflow: auto;
+
+		.formatted-header__title,
+		.formatted-header__subtitle {
+			max-width: unset;
+		}
+
+		h1 {
+			font-family: $brand-serif;
+			font-size: $font-headline-small;
+			margin-bottom: 16px;
+		}
+
+		p {
+			font-size: $font-body;
+			color: var(--color-text-subtle);
+			text-align: center;
+			padding: 0 16px;
+			margin-bottom: 0;
+		}
+	}
+}

client/my-sites/plans-grid/hooks/npm-ready/data-store/use-grid-plans.tsx

@@ -113,6 +113,7 @@ export type PlansIntent =
 	| 'plans-new-hosted-site'
 	| 'plans-plugins'
 	| 'plans-jetpack-app'
+	| 'plans-jetpack-app-site-creation'
 	| 'plans-import'
 	| 'plans-woocommerce'
 	| 'plans-paid-media'
@@ -217,6 +218,9 @@ const usePlanTypesWithIntent = ( {
 		case 'plans-jetpack-app':
 			planTypes = [ TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS, TYPE_ECOMMERCE ];
 			break;
+		case 'plans-jetpack-app-site-creation':
+			planTypes = [ TYPE_FREE, TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS, TYPE_ECOMMERCE ];
+			break;
 		case 'plans-paid-media':
 			planTypes = [ TYPE_PERSONAL, TYPE_PREMIUM, TYPE_BUSINESS, TYPE_ECOMMERCE ];
 			break;

client/sections.js

@@ -215,6 +215,11 @@ const sections = [
 		enableLoggedOut: true,
 		isomorphic: true,
 	},
+	{
+		name: 'jetpack-app-plans',
+		paths: [ '/jetpack-app/plans' ],
+		module: 'calypso/jetpack-app/plans',
+	},
 	{
 		name: 'stats',
 		paths: [ '/stats' ],