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 ( + + ); + } + return ( ); }; 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: ( -