Task: Create Plans page for Jetpack App Site Creation

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

@@ -0,0 +1,53 @@
+import { 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';
+
+export { render, hydrate } from 'calypso/controller/web-util';
+
+export const ProviderWrappedLayout = ( {
+	store,
+	queryClient,
+	currentSection,
+	currentRoute,
+	currentQuery,
+	primary,
+} ) => {
+	return (
+		<CalypsoI18nProvider>
+			<RouteProvider
+				currentSection={ currentSection }
+				currentRoute={ currentRoute }
+				currentQuery={ currentQuery }
+			>
+				<QueryClientProvider client={ queryClient }>
+					<ReduxProvider store={ store }>{ primary }</ReduxProvider>
+					<CalypsoReactQueryDevtools />
+				</QueryClientProvider>
+			</RouteProvider>
+		</CalypsoI18nProvider>
+	);
+};
+
+export function makeJetpackAppLayoutMiddleware( LayoutComponent ) {
+	return ( context, next ) => {
+		const { i18n, store, queryClient, section, pathname, query, primary } = context;
+
+		context.layout = (
+			<LayoutComponent
+				i18n={ i18n }
+				store={ store }
+				queryClient={ queryClient }
+				currentSection={ section }
+				currentRoute={ pathname }
+				currentQuery={ query }
+				primary={ primary }
+				redirectUri={ context.originalUrl }
+			/>
+		);
+		next();
+	};
+}
+
+export const makeJetpackAppLayout = makeJetpackAppLayoutMiddleware( ProviderWrappedLayout );

client/jetpack-app/plans/controller.jsx

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

client/jetpack-app/plans/index.js

@@ -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 () => {
+	page(
+		'/jetpack-app/plans',
+		siteSelection,
+		navigation,
+		jetpackAppPlans,
+		makeJetpackAppLayout,
+		clientRender
+	);
+};

client/jetpack-app/plans/main.jsx

@@ -0,0 +1,109 @@
+import { getPlan, PLAN_FREE } from '@automattic/calypso-products';
+import { translate } 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 './style.scss';
+
+const Header = ( { paidDomainName } ) => (
+	<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 Plans = ( { paidDomainName, onUpgradeClick, handleRedirect } ) => (
+	<PlansFeaturesMain
+		paidDomainName={ paidDomainName }
+		intent="plans-jetpack-app-site-creation"
+		isInSignup={ true }
+		intervalType="yearly"
+		onUpgradeClick={ onUpgradeClick }
+		plansWithScroll={ false }
+		removePaidDomain={ handleRedirect }
+		hidePlanTypeSelector={ true }
+		hidePlansFeatureComparison={ true }
+	/>
+);
+
+const Loading = () => (
+	<div className="plans__loading">
+		<LoadingEllipsis active />
+	</div>
+);
+
+const JetpackAppPlans = ( { paidDomainName, redirectTo } ) => {
+	const planSlug = useSelector( ( state ) =>
+		getPlanSlug( state, getPlan( PLAN_FREE )?.getProductId() || 0 )
+	);
+	const plansLoaded = Boolean( planSlug );
+
+	const handleRedirect = ( planId ) => {
+		if ( redirectTo ) {
+			const cartItemParam = planId ? `?plan_id=${ planId }` : '';
+			window.location.href = `${ redirectTo }${ cartItemParam }`;
+		}
+	};
+
+	const onUpgradeClick = ( cartItems ) => {
+		if ( ! cartItems ) {
+			return handleRedirect();
+		}
+
+		const { product_slug: planProductSlug } = getPlanCartItem( cartItems );
+		const plan = getPlan( planProductSlug );
+
+		handleRedirect( plan.getProductId() );
+	};
+
+	return (
+		<Main className="jetpack-app-plans">
+			<QueryPlans />
+			{ plansLoaded ? (
+				<>
+					<Header paidDomainName={ paidDomainName } />
+					<Plans
+						paidDomainName={ paidDomainName }
+						onUpgradeClick={ onUpgradeClick }
+						handleRedirect={ handleRedirect }
+					/>
+				</>
+			) : (
+				<Loading />
+			) }
+		</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' ],