From 0cdf8a1d1596062de38af4acf0b4a2ae5e3126cd Mon Sep 17 00:00:00 2001
From: Dognose <dognose24@gmail.com>
Date: Fri, 31 Jul 2026 14:52:40 +0800
Subject: [PATCH 1/2] Banner: absolutize root-relative hrefs in wp-admin
 (Odyssey)

Root-relative hrefs on Banner/UpsellNudge are Calypso routes, but
wp-admin resolves them against the site's own domain - every upgrade
nudge rendered in Odyssey Stats linked to a 404 (the SEO preview nudge
was patched at its call site in #113144; stats-no-content-banner's
/post link is still broken today). Absolutize at the Banner chokepoint
- computed defaults, caller-provided hrefs, and the secondary CTA all
pass through it - via getCalypsoUrl(), a no-op outside wp-admin.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 client/components/banner/index.jsx            | 41 ++++++++++++----
 .../components/banner/test/to-calypso-href.js | 49 +++++++++++++++++++
 2 files changed, 80 insertions(+), 10 deletions(-)
 create mode 100644 client/components/banner/test/to-calypso-href.js

diff --git a/client/components/banner/index.jsx b/client/components/banner/index.jsx
index 9ca0e32b6c0a..07e15224effa 100644
--- a/client/components/banner/index.jsx
+++ b/client/components/banner/index.jsx
@@ -1,3 +1,4 @@
+import config from '@automattic/calypso-config';
 import {
 	planMatches,
 	isBloggerPlan,
@@ -8,6 +9,7 @@ import {
 	GROUP_JETPACK,
 	GROUP_WPCOM,
 } from '@automattic/calypso-products';
+import { getCalypsoUrl } from '@automattic/calypso-url';
 import { Button, Card, Gridicon, PlanPrice } from '@automattic/components';
 import { isMobile } from '@automattic/viewport';
 import clsx from 'clsx';
@@ -28,6 +30,23 @@ import './style.scss';
 
 const noop = () => {};
 
+// In wp-admin (Odyssey) a root-relative href is a Calypso route, which the
+// browser would resolve against the site's own domain — a 404. Point it at
+// Calypso absolutely there; getCalypsoUrl() falls back to
+// https://wordpress.com when the current origin isn't a Calypso one, as in
+// wp-admin. Everywhere else (Calypso proper, Jetpack Cloud) this is a no-op.
+export function toCalypsoHref( href ) {
+	if (
+		href &&
+		href.startsWith( '/' ) &&
+		! href.startsWith( '//' ) &&
+		config.isEnabled( 'is_odyssey' )
+	) {
+		return getCalypsoUrl() + href;
+	}
+	return href;
+}
+
 export class Banner extends Component {
 	static propTypes = {
 		callToAction: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
@@ -107,21 +126,23 @@ export class Banner extends Component {
 
 		if ( ! href && siteSlug && canUserUpgrade ) {
 			if ( customerType ) {
-				return `/plans/${ siteSlug }?customerType=${ customerType }`;
+				return toCalypsoHref( `/plans/${ siteSlug }?customerType=${ customerType }` );
 			}
 			const baseUrl = `/plans/${ siteSlug }`;
 			if ( feature || plan ) {
-				return addQueryArgs(
-					{
-						feature,
-						plan,
-					},
-					baseUrl
+				return toCalypsoHref(
+					addQueryArgs(
+						{
+							feature,
+							plan,
+						},
+						baseUrl
+					)
 				);
 			}
-			return baseUrl;
+			return toCalypsoHref( baseUrl );
 		}
-		return href;
+		return toCalypsoHref( href );
 	}
 
 	handleClick = ( e ) => {
@@ -302,7 +323,7 @@ export class Banner extends Component {
 						{ secondaryCallToAction && (
 							<Button
 								compact={ compactButton }
-								href={ secondaryHref }
+								href={ toCalypsoHref( secondaryHref ) }
 								onClick={ this.handleSecondaryClick }
 								primary={ false }
 							>
diff --git a/client/components/banner/test/to-calypso-href.js b/client/components/banner/test/to-calypso-href.js
new file mode 100644
index 000000000000..12d27bc1f825
--- /dev/null
+++ b/client/components/banner/test/to-calypso-href.js
@@ -0,0 +1,49 @@
+/**
+ * @jest-environment jsdom
+ */
+jest.mock( '@automattic/calypso-config', () => {
+	const configApi = () => '';
+	configApi.isEnabled = jest.fn( () => false );
+	return configApi;
+} );
+
+import config from '@automattic/calypso-config';
+import { toCalypsoHref } from '../index';
+
+const enableOdyssey = ( enabled ) =>
+	config.isEnabled.mockImplementation( ( flag ) => flag === 'is_odyssey' && enabled );
+
+describe( 'toCalypsoHref', () => {
+	afterEach( () => {
+		config.isEnabled.mockReset();
+		config.isEnabled.mockReturnValue( false );
+	} );
+
+	test( 'absolutizes a root-relative Calypso route in wp-admin (Odyssey)', () => {
+		enableOdyssey( true );
+		expect( toCalypsoHref( '/post/example.com' ) ).toBe( 'https://wordpress.com/post/example.com' );
+		expect( toCalypsoHref( '/plans/example.com?feature=advanced-seo&plan=business-bundle' ) ).toBe(
+			'https://wordpress.com/plans/example.com?feature=advanced-seo&plan=business-bundle'
+		);
+	} );
+
+	test( 'leaves absolute and protocol-relative URLs untouched in Odyssey', () => {
+		enableOdyssey( true );
+		expect( toCalypsoHref( 'https://example.com/wp-admin/upload.php' ) ).toBe(
+			'https://example.com/wp-admin/upload.php'
+		);
+		expect( toCalypsoHref( '//example.com/path' ) ).toBe( '//example.com/path' );
+		expect( toCalypsoHref( 'admin.php?page=stats' ) ).toBe( 'admin.php?page=stats' );
+	} );
+
+	test( 'passes empty values through in Odyssey', () => {
+		enableOdyssey( true );
+		expect( toCalypsoHref( undefined ) ).toBeUndefined();
+		expect( toCalypsoHref( null ) ).toBeNull();
+	} );
+
+	test( 'is a no-op outside wp-admin', () => {
+		enableOdyssey( false );
+		expect( toCalypsoHref( '/post/example.com' ) ).toBe( '/post/example.com' );
+	} );
+} );

From fb3903f2983db2d332a08b4b2903a2ea345fab2b Mon Sep 17 00:00:00 2001
From: Dognose <dognose24@gmail.com>
Date: Thu, 6 Aug 2026 12:57:52 +0800
Subject: [PATCH 2/2] Banner: move toCalypsoHref to lib/url and cover the
 wiring
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review feedback on #113168:

- toCalypsoHref isn't a Banner concept, and call sites that can't import
  from a component (promo-cards, stats-email-detail, and #113144's
  getUpgradeNudgeHref) need it too. Move it to calypso/lib/url so the
  ~4 drifted copies in the tree have somewhere to converge.
- The wiring itself was untested: cutting toCalypsoHref out of getHref()
  and secondaryHref left the suite green. Add render tests covering every
  href Banner emits — computed plans hrefs, caller-provided hrefs, the CTA
  button, and the secondary CTA — which now fail if the wiring is removed.
- getCalypsoUrl() already strips the leading slash, so pass the href
  straight through instead of concatenating.
- Guard on typeof href === 'string' rather than truthiness.
- Wrap once where getHref() returns instead of at each branch.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 client/components/banner/index.jsx            | 51 ++++------
 .../components/banner/test/odyssey-href.jsx   | 97 +++++++++++++++++++
 client/lib/url/index.ts                       |  1 +
 .../url}/test/to-calypso-href.js              |  2 +-
 client/lib/url/to-calypso-href.ts             | 23 +++++
 5 files changed, 139 insertions(+), 35 deletions(-)
 create mode 100644 client/components/banner/test/odyssey-href.jsx
 rename client/{components/banner => lib/url}/test/to-calypso-href.js (97%)
 create mode 100644 client/lib/url/to-calypso-href.ts

diff --git a/client/components/banner/index.jsx b/client/components/banner/index.jsx
index 07e15224effa..7b38d3150b1a 100644
--- a/client/components/banner/index.jsx
+++ b/client/components/banner/index.jsx
@@ -1,4 +1,3 @@
-import config from '@automattic/calypso-config';
 import {
 	planMatches,
 	isBloggerPlan,
@@ -9,7 +8,6 @@ import {
 	GROUP_JETPACK,
 	GROUP_WPCOM,
 } from '@automattic/calypso-products';
-import { getCalypsoUrl } from '@automattic/calypso-url';
 import { Button, Card, Gridicon, PlanPrice } from '@automattic/components';
 import { isMobile } from '@automattic/viewport';
 import clsx from 'clsx';
@@ -20,7 +18,7 @@ import { connect } from 'react-redux';
 import DismissibleCard from 'calypso/blocks/dismissible-card';
 import JetpackLogo from 'calypso/components/jetpack-logo';
 import TrackComponentView from 'calypso/lib/analytics/track-component-view';
-import { addQueryArgs } from 'calypso/lib/url';
+import { addQueryArgs, toCalypsoHref } from 'calypso/lib/url';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { canCurrentUser } from 'calypso/state/selectors/can-current-user';
 import isSiteWPForTeams from 'calypso/state/selectors/is-site-wpforteams';
@@ -30,23 +28,6 @@ import './style.scss';
 
 const noop = () => {};
 
-// In wp-admin (Odyssey) a root-relative href is a Calypso route, which the
-// browser would resolve against the site's own domain — a 404. Point it at
-// Calypso absolutely there; getCalypsoUrl() falls back to
-// https://wordpress.com when the current origin isn't a Calypso one, as in
-// wp-admin. Everywhere else (Calypso proper, Jetpack Cloud) this is a no-op.
-export function toCalypsoHref( href ) {
-	if (
-		href &&
-		href.startsWith( '/' ) &&
-		! href.startsWith( '//' ) &&
-		config.isEnabled( 'is_odyssey' )
-	) {
-		return getCalypsoUrl() + href;
-	}
-	return href;
-}
-
 export class Banner extends Component {
 	static propTypes = {
 		callToAction: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
@@ -124,25 +105,27 @@ export class Banner extends Component {
 	getHref() {
 		const { canUserUpgrade, feature, href, plan, siteSlug, customerType } = this.props;
 
+		let computedHref = href;
+
 		if ( ! href && siteSlug && canUserUpgrade ) {
-			if ( customerType ) {
-				return toCalypsoHref( `/plans/${ siteSlug }?customerType=${ customerType }` );
-			}
 			const baseUrl = `/plans/${ siteSlug }`;
-			if ( feature || plan ) {
-				return toCalypsoHref(
-					addQueryArgs(
-						{
-							feature,
-							plan,
-						},
-						baseUrl
-					)
+
+			if ( customerType ) {
+				computedHref = `${ baseUrl }?customerType=${ customerType }`;
+			} else if ( feature || plan ) {
+				computedHref = addQueryArgs(
+					{
+						feature,
+						plan,
+					},
+					baseUrl
 				);
+			} else {
+				computedHref = baseUrl;
 			}
-			return toCalypsoHref( baseUrl );
 		}
-		return toCalypsoHref( href );
+
+		return toCalypsoHref( computedHref );
 	}
 
 	handleClick = ( e ) => {
diff --git a/client/components/banner/test/odyssey-href.jsx b/client/components/banner/test/odyssey-href.jsx
new file mode 100644
index 000000000000..2e9eccfbc094
--- /dev/null
+++ b/client/components/banner/test/odyssey-href.jsx
@@ -0,0 +1,97 @@
+/**
+ * @jest-environment jsdom
+ */
+jest.mock( '@automattic/calypso-config', () => {
+	const configApi = () => '';
+	configApi.isEnabled = jest.fn( ( flag ) => flag === 'is_odyssey' );
+	return configApi;
+} );
+
+jest.mock( 'calypso/state/analytics/actions', () => ( {
+	recordTracksEvent: jest.fn( () => ( { type: 'ANALYTICS_EVENT_RECORD' } ) ),
+} ) );
+
+import { render, screen } from '@testing-library/react';
+import { Banner } from '../index';
+
+const props = {
+	title: 'banner title',
+	siteSlug: 'example.com',
+	canUserUpgrade: true,
+};
+
+describe( 'Banner hrefs in wp-admin (Odyssey)', () => {
+	test( 'absolutizes the computed plans href', () => {
+		const { container } = render( <Banner { ...props } /> );
+
+		expect( container.querySelector( 'a' ) ).toHaveAttribute(
+			'href',
+			'https://wordpress.com/plans/example.com'
+		);
+	} );
+
+	test( 'absolutizes the computed plans href with feature and plan args', () => {
+		const { container } = render(
+			<Banner { ...props } feature="advanced-seo" plan="business-bundle" />
+		);
+
+		expect( container.querySelector( 'a' ) ).toHaveAttribute(
+			'href',
+			'https://wordpress.com/plans/example.com?feature=advanced-seo&plan=business-bundle'
+		);
+	} );
+
+	test( 'absolutizes the computed plans href with a customerType arg', () => {
+		const { container } = render( <Banner { ...props } customerType="business" /> );
+
+		expect( container.querySelector( 'a' ) ).toHaveAttribute(
+			'href',
+			'https://wordpress.com/plans/example.com?customerType=business'
+		);
+	} );
+
+	test( 'absolutizes a caller-provided href', () => {
+		const { container } = render( <Banner { ...props } href="/post/example.com" /> );
+
+		expect( container.querySelector( 'a' ) ).toHaveAttribute(
+			'href',
+			'https://wordpress.com/post/example.com'
+		);
+	} );
+
+	test( 'absolutizes the call-to-action button href', () => {
+		render( <Banner { ...props } callToAction="Upgrade" forceHref={ false } /> );
+
+		expect( screen.getByRole( 'link', { name: 'Upgrade' } ) ).toHaveAttribute(
+			'href',
+			'https://wordpress.com/plans/example.com'
+		);
+	} );
+
+	test( 'absolutizes the secondary call-to-action href', () => {
+		render(
+			<Banner
+				{ ...props }
+				callToAction="Upgrade"
+				secondaryCallToAction="Learn more"
+				secondaryHref="/support/example.com"
+			/>
+		);
+
+		expect( screen.getByRole( 'link', { name: 'Learn more' } ) ).toHaveAttribute(
+			'href',
+			'https://wordpress.com/support/example.com'
+		);
+	} );
+
+	test( 'leaves an absolute href untouched', () => {
+		const { container } = render(
+			<Banner { ...props } href="https://example.com/wp-admin/admin.php?page=stats" />
+		);
+
+		expect( container.querySelector( 'a' ) ).toHaveAttribute(
+			'href',
+			'https://example.com/wp-admin/admin.php?page=stats'
+		);
+	} );
+} );
diff --git a/client/lib/url/index.ts b/client/lib/url/index.ts
index 4a73035fb35c..c1bc729065c1 100644
--- a/client/lib/url/index.ts
+++ b/client/lib/url/index.ts
@@ -12,3 +12,4 @@ export { addSchemeIfMissing, setUrlScheme } from './scheme-utils';
 export { decodeURIIfValid, decodeURIComponentIfValid } from './decode-utils';
 export { default as resolveRelativePath } from './resolve-relative-path';
 export { pathToUrl } from './path-to-url';
+export { default as toCalypsoHref } from './to-calypso-href';
diff --git a/client/components/banner/test/to-calypso-href.js b/client/lib/url/test/to-calypso-href.js
similarity index 97%
rename from client/components/banner/test/to-calypso-href.js
rename to client/lib/url/test/to-calypso-href.js
index 12d27bc1f825..dd72af69148c 100644
--- a/client/components/banner/test/to-calypso-href.js
+++ b/client/lib/url/test/to-calypso-href.js
@@ -8,7 +8,7 @@ jest.mock( '@automattic/calypso-config', () => {
 } );
 
 import config from '@automattic/calypso-config';
-import { toCalypsoHref } from '../index';
+import toCalypsoHref from '../to-calypso-href';
 
 const enableOdyssey = ( enabled ) =>
 	config.isEnabled.mockImplementation( ( flag ) => flag === 'is_odyssey' && enabled );
diff --git a/client/lib/url/to-calypso-href.ts b/client/lib/url/to-calypso-href.ts
new file mode 100644
index 000000000000..7800a90c857a
--- /dev/null
+++ b/client/lib/url/to-calypso-href.ts
@@ -0,0 +1,23 @@
+import config from '@automattic/calypso-config';
+import { getCalypsoUrl } from '@automattic/calypso-url';
+
+/**
+ * In wp-admin (Odyssey) a root-relative href is a Calypso route, which the browser would
+ * resolve against the site's own domain — a 404. Point it at Calypso absolutely there;
+ * getCalypsoUrl() falls back to https://wordpress.com when the current origin isn't a
+ * Calypso one, as in wp-admin. Everywhere else (Calypso proper, Jetpack Cloud) this is a
+ * no-op, so it is safe to apply to any href of unknown origin.
+ * @param href The href to absolutize.
+ * @returns The href, absolutized against Calypso only when it is a root-relative route in wp-admin.
+ */
+export default function toCalypsoHref< T >( href: T ): T | string {
+	if (
+		typeof href === 'string' &&
+		href.startsWith( '/' ) &&
+		! href.startsWith( '//' ) &&
+		config.isEnabled( 'is_odyssey' )
+	) {
+		return getCalypsoUrl( href );
+	}
+	return href;
+}