Stats: show a pricing grid instead of the dashboard for new sites without a plan

In Odyssey, the traffic page controller is wrapped with a gate: a site that
first connected on or after 2026-08-07 and holds no Stats plan sees a Free vs
Paid choice in place of the dashboard. Picking either plan reveals the
dashboard immediately and records a dismissal through the existing stats
notices endpoint (new `pricing_grid` id), so the grid stays away on later
visits. The id defaults to hidden until the server reports it — the same
ship-ahead treatment `free_site_upgrade` gets — so the grid cannot render
without a working dismissal round-trip.

The grid replicates the Jetpack Search upsell's PricingTable rendering — DOM
structure and styles ported from @automattic/jetpack-components, which Calypso
does not ship — using @wordpress/components primitives, with colors mapped to
the studio palette tokens the jetpack theme is built from.

The connection date reads the `created_at` site option: for a Jetpack site
that is the wpcom shadow blog's `wp_blogs.registered`, which matches the
first-connection moment when registration created the row; a reused
pre-existing row keeps its older date, so the check can only withhold the grid
from a new connection, never show it to an established site. Eligibility
defers to `useStatsPurchases`, so bundled plans (Complete, Growth, Business)
count as having Stats. The date check is synchronous against site options, so
established sites never wait on the purchase and notice lookups; the grid
component itself stays in an async chunk. Calypso is untouched apart from the
shared component directory.

Author: kangzj

apps/odyssey-stats/src/routes.ts

@@ -15,6 +15,7 @@ import {
 	emailSummary,
 	redirectToDaySummary,
 } from 'calypso/my-sites/stats/controller';
+import { withPricingGridGate } from 'calypso/my-sites/stats/pricing-grid/gate';
 import config from './lib/config-api';
 import { makeLayout, render as clientRender } from './page-middleware/layout';
 import 'calypso/my-sites/stats/style.scss';
@@ -61,8 +62,10 @@ export default function ( pageBase = '/' ) {
 	statsPage( '/stats/subscribers/:site', subscribers );
 	statsPage( `/stats/subscribers/:period(${ validPeriods })/:site`, subscribers );
 
-	// Stat Site Pages
-	statsPage( `/stats/:period(${ validTrafficPagePeriods })/:site`, site );
+	// Stat Site Pages. The traffic page doubles as the landing page, so it carries
+	// the pricing grid gate: eligible new sites see the plan choice instead of the
+	// dashboard until they pick one.
+	statsPage( `/stats/:period(${ validTrafficPagePeriods })/:site`, withPricingGridGate( site ) );
 
 	// Redirect this to default /stats/day/:module/:site view to
 	// keep the paths and page view reporting consistent.

client/my-sites/stats/hooks/use-notice-visibility-query.ts

@@ -12,6 +12,9 @@ const DEFAULT_SERVER_NOTICES_VISIBILITY = {
 	// Defaults to hidden until the server includes it in the notices response,
 	// so the client can ship ahead of the WPCOM allow-list change.
 	free_site_upgrade: false,
+	// Same ship-ahead treatment: the pricing grid stays hidden until the server
+	// reports this id, so it can't render without a working dismissal round-trip.
+	pricing_grid: false,
 	// TODO: Check if the site needs to be upgraded to a higher tier on the back end.
 	tier_upgrade: true,
 	gdpr_cookie_consent: false,

client/my-sites/stats/pricing-grid/gate.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import AsyncLoad from 'calypso/components/async-load';
+import QueryProductsList from 'calypso/components/data/query-products-list';
+import QuerySitePurchases from 'calypso/components/data/query-site-purchases';
+import { useNoticeVisibilityQuery } from 'calypso/my-sites/stats/hooks/use-notice-visibility-query';
+import { useSelector } from 'calypso/state';
+import { getSelectedSiteId } from 'calypso/state/ui/selectors';
+import PageLoading from '../pages/shared/page-loading';
+import useIsPricingGridEligible from './hooks/use-eligibility';
+import type { Callback } from '@automattic/calypso-router';
+import type { ReactNode } from 'react';
+
+const loadPricingGrid = () =>
+	import(
+		/* webpackChunkName: "async-load-calypso-my-sites-stats-pricing-grid" */ './pricing-grid'
+	);
+
+/**
+ * Replaces the Stats dashboard with the pricing grid for newly connected sites
+ * that haven't picked a plan yet. Everyone else falls straight through to the
+ * dashboard: the connection-date check is synchronous against site options, so
+ * established sites never wait on the purchase and notice lookups this gate
+ * needs before it can decide.
+ */
+function PricingGridGate( { children }: { children: ReactNode } ) {
+	const siteId = useSelector( getSelectedSiteId );
+	// Choosing a plan swaps the dashboard in immediately; the server-side dismissal
+	// catches up in the background and keeps the grid away on later visits.
+	const [ hasChosen, setHasChosen ] = useState( false );
+
+	const { isEligible, isNewConnection, isLoading } = useIsPricingGridEligible( siteId );
+	const { data: isVisible, isLoading: isLoadingVisibility } = useNoticeVisibilityQuery(
+		siteId,
+		'pricing_grid',
+		isNewConnection
+	);
+
+	if ( ! isNewConnection || hasChosen ) {
+		return <>{ children }</>;
+	}
+
+	return (
+		<>
+			<QuerySitePurchases siteId={ siteId } />
+			{ ( () => {
+				if ( isLoading || isLoadingVisibility ) {
+					return PageLoading;
+				}
+				if ( ! isEligible || ! isVisible ) {
+					return children;
+				}
+				return (
+					<>
+						<QueryProductsList type="jetpack" />
+						<AsyncLoad
+							require={ loadPricingGrid }
+							placeholder={ PageLoading }
+							onDismiss={ () => setHasChosen( true ) }
+						/>
+					</>
+				);
+			} )() }
+		</>
+	);
+}
+
+/**
+ * Route-controller wrapper: lets the Odyssey routes gate the traffic page
+ * without pulling JSX into `routes.ts`.
+ */
+export function withPricingGridGate( controller: Callback ): Callback {
+	return ( context, next ) => {
+		controller( context, () => {
+			context.primary = <PricingGridGate>{ context.primary }</PricingGridGate>;
+			next();
+		} );
+	};
+}
+
+export default PricingGridGate;

client/my-sites/stats/pricing-grid/gradient.svg

@@ -0,0 +1,40 @@
+import { useSelector } from 'calypso/state';
+import { getSiteOption } from 'calypso/state/sites/selectors';
+import useStatsPurchases from '../../hooks/use-stats-purchases';
+
+/**
+ * Sites connected before the pricing grid shipped were never offered this choice, so
+ * showing it to them now would be a regression rather than onboarding.
+ */
+const LAUNCH_DATE = Date.parse( '2026-08-07T00:00:00Z' );
+
+/**
+ * Whether the pricing grid applies to this site: a newly connected site that hasn't
+ * picked a Stats plan yet. Bundled plans (Complete, Growth, Business) count as having
+ * one, which is why this defers to `useStatsPurchases` rather than scanning products.
+ */
+export default function useIsPricingGridEligible( siteId: number | null ) {
+	const { hasAnyPlan, isLoading: isLoadingPurchases } = useStatsPurchases( siteId );
+
+	// `created_at` is the wpcom shadow blog's `wp_blogs.registered` — the closest thing
+	// to a first-connection date the sites payload exposes. It matches the connection
+	// moment when registration created the row, but a reused pre-existing row keeps its
+	// older date and reconnects never update it, so this check can only withhold the
+	// grid from a genuinely new connection — never show it to an established site.
+	const connectedAt = useSelector( ( state ) => getSiteOption( state, siteId, 'created_at' ) );
+
+	// The API serves dates both as unix seconds and as ISO strings depending on the
+	// field; accept either rather than betting on one and silently never matching.
+	const connectedAtMs =
+		typeof connectedAt === 'number'
+			? connectedAt * 1000
+			: Date.parse( String( connectedAt ?? '' ) );
+	const isNewConnection = Number.isFinite( connectedAtMs ) && connectedAtMs >= LAUNCH_DATE;
+
+	return {
+		isEligible: isNewConnection && ! hasAnyPlan,
+		isNewConnection,
+		// The date check needs no fetch, so only newly connected sites ever wait.
+		isLoading: isNewConnection && isLoadingPurchases,
+	};
+}