update: subscription onboarding to use WP components (#10907)

Co-authored-by: Rafael Meneses <meneses.tio@gmail.com>

Author: frosso

changelog/update-subscription-product-onboarding-wp-components

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+update: subscription-product-onboarding to use WP components bundled within the WP installation

client/subscription-product-onboarding/modal.js

@@ -6,6 +6,8 @@ import React from 'react';
 import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
 import { Icon } from 'wcpay/components/wp-components-wrapped/components/icon';
 import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal';
+import { ExternalLink } from 'wcpay/components/wp-components-wrapped/components/external-link';
+import UnbundledWpComponentsProvider from 'wcpay/wordpress-components-context/unbundled-wp-components-provider';
 import {
 	createInterpolateElement,
 	useEffect,
@@ -87,14 +89,7 @@ const SubscriptionProductOnboardingModalContent = ( {
 						'woocommerce-payments'
 					),
 					{
-						a: (
-							// eslint-disable-next-line jsx-a11y/anchor-has-content
-							<a
-								href="https://wordpress.com/tos/"
-								target="_blank"
-								rel="noreferrer"
-							/>
-						),
+						a: <ExternalLink href="https://wordpress.com/tos/" />,
 					}
 				) }
 			</p>
@@ -135,11 +130,13 @@ const SubscriptionProductOnboardingModal = () => {
 	}
 
 	return (
-		<SubscriptionProductOnboardingModalContent
-			onRequestClose={ () => {
-				setOpen( false );
-			} }
-		/>
+		<UnbundledWpComponentsProvider>
+			<SubscriptionProductOnboardingModalContent
+				onRequestClose={ () => {
+					setOpen( false );
+				} }
+			/>
+		</UnbundledWpComponentsProvider>
 	);
 };
 

client/subscription-product-onboarding/style.scss

@@ -10,6 +10,7 @@
 	}
 
 	.components-modal__content {
+		padding-top: 0;
 		padding-bottom: 0;
 		margin-top: 0;