From cc69076524b9c79c81ed91b8010bd1911db78059 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 22 May 2026 18:22:24 -0300
Subject: [PATCH] My Jetpack: migrate product interstitial modal Buttons to
 @wordpress/ui

Migrates two remaining @automattic/jetpack-components Button consumers in
projects/packages/my-jetpack/_inc/components/product-interstitial-modal/:

- product-interstitial-modal-cta.tsx: Upgrade CTA Button migrated to
  @wordpress/ui Button with variant="solid". When an href is provided,
  renders an anchor via the render={<a />} + nativeButton={false} pattern
  established in PR #48489. isLoading -> loading. The styles['action-button']
  className was a no-op (no .action-button rule in the SCSS module) and has
  been dropped.

- product-interstitial-my-jetpack.tsx: inline AI fair-usage-policy 'Learn
  more about it here' Button (variant="link") migrated to @wordpress/ui
  Link with openInNewTab, following the L1b sweep recipe in PR #49109.

Refs #48160.
---
 .../product-interstitial-modal-cta.tsx        | 41 +++++++++++++++----
 .../product-interstitial-my-jetpack.tsx       | 13 ++----
 ...roduct-interstitial-modal-buttons-to-wp-ui |  5 +++
 3 files changed, 40 insertions(+), 19 deletions(-)
 create mode 100644 projects/packages/my-jetpack/changelog/update-product-interstitial-modal-buttons-to-wp-ui

diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal-cta.tsx b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal-cta.tsx
index ce85a51af5b7..a574d72d7f40 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal-cta.tsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal-cta.tsx
@@ -1,11 +1,10 @@
-import { Button } from '@automattic/jetpack-components';
 import { useProductCheckoutWorkflow } from '@automattic/jetpack-connection';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import { useCallback, type FC } from 'react';
 import useProduct from '../../data/products/use-product';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import { useRedirectToReferrer } from '../../hooks/use-redirect-to-referrer';
-import styles from './style.module.scss';
 
 interface ProductInterstitialModalCtaProps {
 	slug: string;
@@ -74,17 +73,41 @@ const ProductInterstitialModalCta: FC< ProductInterstitialModalCtaProps > = ( {
 			useBlogIdSuffix: true,
 		} );
 
+	const isDisabled = disabled || isProductLoading;
+	const isLoading = isProductLoading || hasMainCheckoutStarted;
+	const label = buttonLabel || __( 'Upgrade', 'jetpack-my-jetpack' );
+
+	if ( href ) {
+		return (
+			<Button
+				variant="solid"
+				loading={ isLoading }
+				onClick={ mainCheckoutRedirect }
+				disabled={ isDisabled }
+				nativeButton={ false }
+				render={
+					<a
+						href={ href }
+						{ ...( isExternalLink && {
+							target: '_blank',
+							rel: 'noopener noreferrer',
+						} ) }
+					/>
+				}
+			>
+				{ label }
+			</Button>
+		);
+	}
+
 	return (
 		<Button
-			variant="primary"
-			className={ styles[ 'action-button' ] }
-			isLoading={ isProductLoading || hasMainCheckoutStarted }
+			variant="solid"
+			loading={ isLoading }
 			onClick={ mainCheckoutRedirect }
-			isExternalLink={ isExternalLink }
-			href={ href }
-			disabled={ disabled || isProductLoading }
+			disabled={ isDisabled }
 		>
-			{ buttonLabel || __( 'Upgrade', 'jetpack-my-jetpack' ) }
+			{ label }
 		</Button>
 	);
 };
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-my-jetpack.tsx b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-my-jetpack.tsx
index 0231757789b5..d84ba373ca50 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-my-jetpack.tsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-my-jetpack.tsx
@@ -1,7 +1,8 @@
-import { Button, ProductPrice, getRedirectUrl } from '@automattic/jetpack-components';
+import { ProductPrice, getRedirectUrl } from '@automattic/jetpack-components';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
+import { Link } from '@wordpress/ui';
 import { useCallback } from 'react';
 import useProduct from '../../data/products/use-product';
 import useAnalytics from '../../hooks/use-analytics';
@@ -148,15 +149,7 @@ const ProductInterstitialPlugin: FC< ProductInterstitialPluginProps > = ( {
 						'jetpack-my-jetpack'
 					),
 					{
-						link: (
-							<Button
-								href={ getRedirectUrl( 'ai-assistant-fair-usage-policy' ) }
-								variant="link"
-								weight="regular"
-								size="small"
-								target="_blank"
-							/>
-						),
+						link: <Link href={ getRedirectUrl( 'ai-assistant-fair-usage-policy' ) } openInNewTab />,
 					}
 				) }
 			</p>
diff --git a/projects/packages/my-jetpack/changelog/update-product-interstitial-modal-buttons-to-wp-ui b/projects/packages/my-jetpack/changelog/update-product-interstitial-modal-buttons-to-wp-ui
new file mode 100644
index 000000000000..ed2992d236be
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/update-product-interstitial-modal-buttons-to-wp-ui
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Internal refactor to use core WordPress UI primitives. No user-facing change.
+
+