Task: Create Plans page for Jetpack App Site Creation

client/jetpack-app/controller.tsx

@@ -0,0 +1,22 @@
+import page from 'page';
+import { isWpMobileApp } from 'calypso/lib/mobile-app';
+import JetpackAppPlans from './plans/main';
+
+export function jetpackAppPlans( context: PageJS.Context, next: () => void ) {
+	context.primary = (
+		<JetpackAppPlans
+			paidDomainName={ context.query.paid_domain_name }
+			originalUrl={ context.originalUrl }
+		/>
+	);
+
+	next();
+}
+
+export function redirectIfNotJetpackApp( _context: PageJS.Context, next: () => void ) {
+	if ( ! isWpMobileApp() ) {
+		page.redirect( '/' );
+	} else {
+		next();
+	}
+}

client/jetpack-app/index.ts

@@ -0,0 +1,17 @@
+import page from 'page';
+import { render as clientRender } from 'calypso/controller';
+import { jetpackAppPlans, redirectIfNotJetpackApp } from './controller';
+import { makeJetpackAppLayout } from './page-middleware/layout';
+
+export default function () {
+	page(
+		'/jetpack-app/plans',
+		redirectIfNotJetpackApp,
+		jetpackAppPlans,
+		makeJetpackAppLayout,
+		clientRender
+	);
+
+	// Default to /plans page until we have more pages
+	page( '/jetpack-app', '/jetpack-app/plans' );
+}

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

@@ -0,0 +1,60 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Provider as ReduxProvider } from 'react-redux';
+import CalypsoI18nProvider from 'calypso/components/calypso-i18n-provider';
+import { RouteProvider } from 'calypso/components/route';
+import { CalypsoReactQueryDevtools } from 'calypso/lib/react-query-devtools-helper';
+import type { FunctionComponent } from 'react';
+import type { Store } from 'redux';
+
+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: PageJS.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/main.tsx

@@ -0,0 +1,111 @@
+import { getPlan, PLAN_FREE } from '@automattic/calypso-products';
+import { addQueryArgs } from '@wordpress/url';
+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 type { Plan } from '@automattic/calypso-products';
+import type { MinimalRequestCartProduct } from '@automattic/shopping-cart';
+import type { AppState } from 'calypso/types';
+
+import './style.scss';
+
+interface HeaderProps {
+	paidDomainName?: string;
+}
+
+interface JetpackAppPlansProps {
+	paidDomainName?: string;
+	originalUrl: string;
+}
+
+const Header: React.FC< HeaderProps > = ( { paidDomainName } ) => {
+	const translate = useTranslate();
+
+	return (
+		<div className="jetpack-app__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, originalUrl } ) => {
+	const planSlug = useSelector( ( state: AppState ) =>
+		getPlanSlug( state, getPlan( PLAN_FREE )?.getProductId() || 0 )
+	) as string | null;
+	const plansLoaded = Boolean( planSlug );
+
+	const onUpgradeClick = ( cartItems?: MinimalRequestCartProduct[] | null | undefined ) => {
+		const productSlug = getPlanCartItem( cartItems )?.product_slug;
+
+		type PlansParameters = { plan_id?: number; plan_slug: string };
+		let args: PlansParameters;
+
+		if ( ! productSlug ) {
+			args = { plan_slug: PLAN_FREE };
+		} else {
+			const plan = getPlan( productSlug ) as Plan;
+			args = { plan_id: plan.getProductId(), plan_slug: productSlug };
+		}
+
+		window.location.href = addQueryArgs( originalUrl, args );
+	};
+
+	return (
+		<Main className="jetpack-app__plans">
+			<QueryPlans />
+			{ plansLoaded ? (
+				<>
+					<Header paidDomainName={ paidDomainName } />
+					<PlansFeaturesMain
+						paidDomainName={ paidDomainName }
+						intent="plans-jetpack-app-site-creation"
+						isInSignup
+						intervalType="yearly"
+						onUpgradeClick={ onUpgradeClick }
+						plansWithScroll={ false }
+						hidePlanTypeSelector
+						hidePlansFeatureComparison
+					/>
+				</>
+			) : (
+				<div className="jetpack-app__plans-loading">
+					<LoadingEllipsis />
+				</div>
+			) }
+		</Main>
+	);
+};
+
+export default JetpackAppPlans;

client/jetpack-app/plans/style.scss

@@ -0,0 +1,43 @@
+@import "calypso/my-sites/plans-grid/media-queries";
+@import "@wordpress/base-styles/variables";
+@import "@automattic/typography/styles/fonts";
+
+body {
+	background-color: var(--studio-white);
+}
+
+.jetpack-app__plans {
+	@include plan-features-layout-switcher;
+
+	.jetpack-app__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: $grid-unit-20;
+		}
+
+		p {
+			font-size: $font-body;
+			color: var(--color-text-subtle);
+			text-align: center;
+			padding: 0 $grid-unit-20;
+			margin-bottom: 0;
+		}
+	}
+
+	.jetpack-app__plans-loading {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		position: relative;
+	}
+}

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',
+		paths: [ '/jetpack-app' ],
+		module: 'calypso/jetpack-app/',
+	},
 	{
 		name: 'stats',
 		paths: [ '/stats' ],