[POC] Inject WooPayments onboarding modal on the NOX screen

client/external-declarations.d.ts

@@ -25,3 +25,7 @@ declare module 'dompurify' {
 declare module '@woocommerce/settings' {
 	const getSetting: ( key: string ) => string;
 }
+
+declare module '@wordpress/plugins' {
+	export function registerPlugin( name: string, settings: any ): void;
+}

client/onboarding/modal/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { Fill } from '@wordpress/components';
+import { registerPlugin } from '@wordpress/plugins';
+import { OnboardingModal } from './modal';
+
+const ModalFill = () => {
+	return (
+		<Fill name="__EXPERIMENTAL__WcAdminSettingsPaymentsSlots">
+			<OnboardingModal
+				isOpen={ true }
+				onClose={ () => {
+					// TODO: Implement later
+				} }
+			/>
+		</Fill>
+	);
+};
+
+registerPlugin( 'woopayments-onboarding-modal', {
+	render: ModalFill,
+	scope: 'woocommerce-settings-payment-woopayments',
+} );

client/onboarding/modal/modal.scss

@@ -0,0 +1,57 @@
+.woocommerce-woopayments-onboarding-modal {
+	width: 100%;
+	height: 100%;
+	max-height: calc( 100% - 96px );
+	margin: 48px;
+	border-radius: 8px;
+	background: $gray-100;
+
+	.components-modal__header + div {
+		height: 100%;
+	}
+
+	&__wrapper {
+		display: flex;
+		height: 100%;
+	}
+
+	&__sidebar {
+		width: 280px;
+
+		h2 {
+			margin-left: 24px;
+			margin-top: 60px;
+		}
+
+		&-navigation {
+			margin: 0 20px;
+
+			li {
+				background: $gray-200;
+				padding: 6px 8px;
+
+				a {
+					color: #000;
+					text-decoration: none;
+				}
+			}
+		}
+	}
+
+	&__content {
+		flex: 1;
+		margin: 16px;
+		margin-left: 0;
+		box-shadow: none;
+
+		&-wrapper {
+			width: 700px;
+			margin: 20px auto;
+		}
+	}
+
+	& > .components-modal__content {
+		padding: 0;
+		margin-top: 0;
+	}
+}

client/onboarding/modal/modal.tsx

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { Card, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+/**
+ * Internal dependencies
+ */
+import './modal.scss';
+import '../style.scss';
+import { OnboardingSidebar } from './sidebar';
+import { OnboardingContextProvider } from '../context';
+import BusinessDetails from '../steps/business-details';
+
+interface OnboardingModalProps {
+	/**
+	 * Indicates if the modal is currently open.
+	 */
+	isOpen: boolean;
+	/**
+	 * Callback function to handle modal closure.
+	 */
+	onClose: () => void;
+}
+
+export const OnboardingModal = ( {
+	isOpen,
+	onClose,
+}: OnboardingModalProps ) => {
+	const initialData = {
+		business_name: wcSettings?.siteTitle,
+		mcc: '12312',
+		url: 'https://wcpay.test',
+		country: 'US',
+	};
+
+	return (
+		<>
+			{ isOpen && (
+				<Modal
+					title=""
+					className="woocommerce-woopayments-onboarding-modal"
+					onRequestClose={ onClose }
+				>
+					<div className="woocommerce-woopayments-onboarding-modal__wrapper">
+						<BrowserRouter basename={ window.location.pathname }>
+							<OnboardingSidebar />
+							<Card
+								className={
+									'woocommerce-woopayments-onboarding-modal__content'
+								}
+							>
+								<Routes>
+									<Route
+										path="/"
+										element={
+											<div className="woocommerce-woopayments-onboarding-modal__content-wrapper">
+												<OnboardingContextProvider
+													initialData={ initialData }
+												>
+													<BusinessDetails />
+												</OnboardingContextProvider>
+											</div>
+										}
+									/>
+									<Route
+										path="/payment-methods"
+										element={ <>Payment Methods</> }
+									/>
+								</Routes>
+							</Card>
+						</BrowserRouter>
+					</div>
+				</Modal>
+			) }
+		</>
+	);
+};

client/onboarding/modal/sidebar.tsx

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Link } from 'react-router-dom';
+
+/**
+ * Internal dependencies
+ */
+
+export const OnboardingSidebar = () => {
+	return (
+		<div className="woocommerce-woopayments-onboarding-modal__sidebar">
+			<h2>{ __( 'Set up WooPayments', 'woocommerce' ) }</h2>
+
+			<ul className="woocommerce-woopayments-onboarding-modal__sidebar-navigation">
+				<li>
+					<Link to="/">
+						{ __( 'Choose your payment methods', 'woocommerce' ) }
+					</Link>
+				</li>
+			</ul>
+		</div>
+	);
+};

includes/admin/class-wc-payments-admin.php

@@ -168,6 +168,7 @@ public function init_hooks() {
 		add_action( 'woocommerce_admin_order_totals_after_total', [ $this, 'show_woopay_payment_method_name_admin' ] );
 		add_action( 'woocommerce_admin_order_totals_after_total', [ $this, 'display_wcpay_transaction_fee' ] );
 		add_action( 'admin_init', [ $this, 'redirect_deposits_to_payouts' ] );
+		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_onboarding_modal_script' ] );
 	}
 
 	/**
@@ -642,6 +643,38 @@ public function register_payments_scripts() {
 		);
 	}
 
+	/**
+	 * Enqueue onboarding modal scripts
+	 */
+	public function enqueue_onboarding_modal_script() {
+		// Only load on WooCommerce payment settings pages.
+		$screen = get_current_screen();
+		if ( ! is_admin() || ! $screen || 'woocommerce_page_wc-settings' !== $screen->id ) {
+			return;
+		}
+
+		wp_enqueue_script(
+			'wcpay-onboarding-modal',
+			plugins_url( 'dist/onboarding-modal.js', WCPAY_PLUGIN_FILE ),
+			[ 'wp-hooks', 'wp-element', 'wp-components', 'wp-plugins' ], // dependencies.
+			WCPAY_VERSION_NUMBER,
+			true
+		);
+
+		wp_localize_script(
+			'wcpay-onboarding-modal',
+			'wcpaySettings',
+			$this->get_js_settings()
+		);
+
+		wp_enqueue_style(
+			'wcpay-onboarding-modal',
+			plugins_url( 'dist/onboarding-modal.css', WCPAY_PLUGIN_FILE ),
+			[],
+			WC_Payments::get_file_version( 'dist/onboarding-modal.css' ),
+		);
+	}
+
 	/**
 	 * Load the assets
 	 */

webpack/shared.js

@@ -41,6 +41,7 @@ module.exports = {
 			'cart-block': './client/cart/blocks/index.js',
 			'plugins-page': './client/plugins-page/index.js',
 			'frontend-tracks': './client/frontend-tracks/index.js',
+			'onboarding-modal': './client/onboarding/modal/index.tsx',
 		},
 		// Override webpack public path dynamically on every entry.
 		// Required for chunks loading to work on sites with JS concatenation.
@@ -147,16 +148,12 @@ module.exports = {
 			injectPolyfill: true,
 			requestToExternal( request ) {
 				switch ( request ) {
-					case '@wordpress/components':
-						return null;
 					case 'wp-mediaelement':
 						return [ 'wp', 'mediaelement' ];
 				}
 			},
 			requestToHandle( request ) {
 				switch ( request ) {
-					case '@wordpress/components':
-						return null;
 					case 'wp-mediaelement':
 						return 'wp-mediaelement';
 				}