Stats: show a pricing grid instead of the dashboard for new sites without a plan (#113366)

* 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.

* Stats: give the pricing grid top priority among dashboard notices

While the grid is undismissed it replaces the dashboard outright, so no other
dashboard notice should fire alongside it.

* Stats pricing grid: record dismissal reliably from both CTAs

The wp-admin shim intercepts anchor clicks inside #wpcom with a jQuery handler
registered before React mounts, so an onClick on a link Button never ran and
clicking Get Paid Stats never recorded the dismissal. The paid CTA now
navigates programmatically after dismissing.

The dismissal mutation also never touched the notices query cache, so
returning from the purchase page via 'I will do it later' re-rendered the grid
from the stale cached visibility. Dismissing now patches the cached notices in
place, which the gate re-reads on SPA route changes.

Verified end to end in Odyssey on a local Jetpack site: both CTAs POST the
dismissal, 'I will do it later' lands on the dashboard, and the choice
survives hard reloads.

* Stats: keep the pricing grid out of the notices conflict group

Conflict suppression runs on the server-reported visibility, not on whether
the grid actually displays, and the server reports `pricing_grid` as visible
until a dismissal is recorded. Sites that never meet the grid — everything
connected before launch, everything holding a plan — would therefore have
every other dashboard notice (GDPR consent, purchase-success, the upsells,
tier upgrade) permanently suppressed.

The grid still trumps every notice, structurally: it replaces the whole
dashboard, so StatsNotices never mounts alongside it.

* Stats pricing grid: dismiss on a plan decision, not on reaching checkout

Clicking Get Paid Stats no longer dismisses the grid — merely reaching the
purchase page is not a plan choice, so an abandoned checkout brings the
visitor back to the grid to choose again. The decisions that dismiss are
'Start for free' on the grid and 'I will do it later' on the purchase page
(both the commercial and PWYW flows, keyed off the pricing-grid referrer).
Completing a purchase needs no dismissal: holding a plan makes the site
ineligible for the grid.

The dismissal (mutation + notices-cache patch) moves into a shared
useDismissPricingGrid hook so all call sites stay in sync.

* Stats pricing grid: dismiss on 'I will do it later' regardless of referrer

Anyone clicking the skip button has seen the full paid pitch and deferred, so
the grid shouldn't take over the dashboard afterwards no matter how they
reached the purchase page. On sites where the grid never shows the dismissal
is a harmless no-op.

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,10 @@ 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,
+	// The server reports this id (true until a dismissal is in effect), so the
+	// default only covers request failures: the grid stays hidden rather than
+	// rendering 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,
@@ -31,6 +35,11 @@ export type NoticeIdType = keyof Notices;
 
 // These notices are mutually exclusive, so if one is active, the other should be hidden.
 // The IDs are sorted by priory from high to low.
+// `pricing_grid` is deliberately NOT in this group even though the grid trumps every
+// notice: it replaces the whole dashboard, so StatsNotices never mounts alongside it
+// and no suppression is needed. Listing it here would instead suppress every other
+// notice on all the sites that never see the grid (pre-launch sites, sites with
+// plans), since the server reports the id as visible until a dismissal is recorded.
 const CONFLICT_NOTICE_ID_GROUPS: Record< string, Array< NoticeIdType > > = {
 	dashboard_notices: [
 		// Set the highest priority to prevent blocking Stats under any circumstances.

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,33 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import useNoticeVisibilityMutation from 'calypso/my-sites/stats/hooks/use-notice-visibility-mutation';
+import type { Notices } from 'calypso/my-sites/stats/hooks/use-notice-visibility-query';
+
+/** The `from` value the pricing grid's paid CTA sends to the purchase page. */
+export const PRICING_GRID_REFERRER = 'jetpack-stats-pricing-grid';
+
+/**
+ * Returns a function that records the pricing grid dismissal server-side and
+ * patches the cached notices in place, so the gate sees the choice on SPA route
+ * changes without waiting for a refetch.
+ *
+ * Only a plan decision dismisses: "Start for free" on the grid, or "I will do
+ * it later" on the purchase page. Merely reaching the purchase page does not —
+ * an abandoned checkout brings the visitor back to the grid.
+ */
+export default function useDismissPricingGrid( siteId: number | null ) {
+	const queryClient = useQueryClient();
+	const { mutate: recordDismissal } = useNoticeVisibilityMutation(
+		siteId,
+		'pricing_grid',
+		'dismissed'
+	);
+
+	return useCallback( () => {
+		recordDismissal();
+		queryClient.setQueryData(
+			[ 'stats', 'notices-visibility', 'raw', siteId ],
+			( notices: Notices | undefined ) => notices && { ...notices, pricing_grid: false }
+		);
+	}, [ recordDismissal, queryClient, siteId ] );
+}

client/my-sites/stats/pricing-grid/hooks/use-dismiss-pricing-grid.ts

@@ -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,
+	};
+}