My Jetpack: migrate interstitial Buttons to @wordpress/ui

projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/more-requests.jsx

@@ -3,14 +3,14 @@
  */
 import {
 	AdminPage,
-	Button,
 	Col,
 	Container,
 	Text,
 	H3,
 	getRedirectUrl,
 } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useCallback } from 'react';
 import { Link } from 'react-router';
@@ -66,12 +66,20 @@ export function JetpackAIInterstitialMoreRequests( { onClickGoBack = () => {} }
 									<H3>{ title }</H3>
 									<Text mb={ 3 }>{ longDescription }</Text>
 									<div className={ styles[ 'buttons-row' ] }>
-										<Button href={ contactHref } onClick={ trackClickHandler }>
+										<Button
+											nativeButton={ false }
+											render={ <a href={ contactHref } /> }
+											onClick={ trackClickHandler }
+										>
 											{ __( 'Contact Us', 'jetpack-my-jetpack' ) }
 										</Button>
-										<Link to={ '/products' } onClick={ onClickGoBack }>
-											<Button variant="secondary">{ __( 'Back', 'jetpack-my-jetpack' ) }</Button>
-										</Link>
+										<Button
+											variant="outline"
+											nativeButton={ false }
+											render={ <Link to="/products" onClick={ onClickGoBack } /> }
+										>
+											{ __( 'Back', 'jetpack-my-jetpack' ) }
+										</Button>
 									</div>
 								</div>
 							</div>

projects/packages/my-jetpack/_inc/components/product-interstitial/pricing-interstitial.jsx

@@ -3,7 +3,6 @@
  */
 import {
 	AdminPage,
-	Button,
 	Col,
 	Container,
 	PricingTable,
@@ -14,8 +13,9 @@ import {
 } from '@automattic/jetpack-components';
 import { useProductCheckoutWorkflow } from '@automattic/jetpack-connection';
 import { getScriptData, getMyJetpackUrl } from '@automattic/jetpack-script-data';
-import { Button as WPButton, Spinner } from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 /**
  * Internal dependencies
@@ -388,14 +388,15 @@ export default function PricingInterstitial( { slug } ) {
 				/>
 			}
 			actions={
-				<WPButton
+				<Button
 					size="compact"
-					variant="secondary"
-					href={ getMyJetpackUrl( '#/add-license' ) }
+					variant="outline"
+					nativeButton={ false }
+					render={ <a href={ getMyJetpackUrl( '#/add-license' ) } /> }
 					onClick={ handleLicenseActivationClick }
 				>
 					{ __( 'Use license key', 'jetpack-my-jetpack' ) }
-				</WPButton>
+				</Button>
 			}
 		>
 			<Container
@@ -421,10 +422,10 @@ export default function PricingInterstitial( { slug } ) {
 										variant="simple"
 									/>
 									<Button
-										fullWidth
-										variant="secondary"
+										className={ styles[ 'tier-cta' ] }
+										variant="outline"
 										onClick={ handleFreeActivation }
-										isLoading={ loadingButton === 'free' }
+										loading={ loadingButton === 'free' }
 										disabled={ buttonsDisabled }
 									>
 										{ config.tiers.free.cta }
@@ -458,9 +459,9 @@ export default function PricingInterstitial( { slug } ) {
 									<Spinner className={ styles.spinner } />
 								) }
 								<Button
-									fullWidth
+									className={ styles[ 'tier-cta' ] }
 									onClick={ handleGetProduct }
-									isLoading={ loadingButton === 'paid' }
+									loading={ loadingButton === 'paid' }
 									disabled={ buttonsDisabled }
 								>
 									{ config.tiers.paid.cta }
@@ -489,10 +490,10 @@ export default function PricingInterstitial( { slug } ) {
 									<Spinner className={ styles.spinner } />
 								) }
 								<Button
-									fullWidth
-									variant="secondary"
+									className={ styles[ 'tier-cta' ] }
+									variant="outline"
 									onClick={ handleGetBundle }
-									isLoading={ loadingButton === 'bundle' }
+									loading={ loadingButton === 'bundle' }
 									disabled={ buttonsDisabled || isBundleLoading }
 								>
 									{ config.tiers.bundle.cta }

projects/packages/my-jetpack/_inc/components/product-interstitial/product-interstitial.jsx

@@ -3,8 +3,8 @@
  */
 import { AdminPage, Col, Container, TermsOfService } from '@automattic/jetpack-components';
 import { getMyJetpackUrl } from '@automattic/jetpack-script-data';
-import { Button as WPButton } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useCallback, useEffect } from 'react';
 /**
@@ -205,9 +205,14 @@ export default function ProductInterstitial( {
 			}
 			actions={
 				existingLicenseKeyUrl ? (
-					<WPButton size="compact" variant="secondary" href={ existingLicenseKeyUrl }>
+					<Button
+						size="compact"
+						variant="outline"
+						nativeButton={ false }
+						render={ <a href={ existingLicenseKeyUrl } /> }
+					>
 						{ __( 'Use license key', 'jetpack-my-jetpack' ) }
-					</WPButton>
+					</Button>
 				) : null
 			}
 		>

projects/packages/my-jetpack/_inc/components/product-interstitial/style.module.scss

@@ -49,6 +49,11 @@
 	}
 }
 
+.tier-cta {
+	width: 100%;
+	justify-content: center;
+}
+
 .not-strong {
 	font-weight: 400 !important;
 }

projects/packages/my-jetpack/changelog/feat-interstitial-buttons-wp-ui

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Migrate interstitial Buttons from `@automattic/jetpack-components` and `@wordpress/components` to `@wordpress/ui`.