My Jetpack: migrate product interstitial modal Buttons to @wordpress/ui

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>
 	);
 };

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>

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