Style modal

Automattic · Feb 27, 2025 · ce006ea · ce006ea
1 parent 2621268
commit ce006ea
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/client/onboarding/modal/modal.scss b/client/onboarding/modal/modal.scss
@@ -17,13 +17,37 @@
 
 	&__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 {

diff --git a/client/onboarding/modal/modal.tsx b/client/onboarding/modal/modal.tsx
@@ -10,8 +10,10 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
  * Internal dependencies
  */
 import './modal.scss';
+import '../style.scss';
 import { OnboardingSidebar } from './sidebar';
-import OnboardingKycPage from '../kyc';
+import { OnboardingContextProvider } from '../context';
+import BusinessDetails from '../steps/business-details';
 
 interface OnboardingModalProps {
 	/**
@@ -28,6 +30,13 @@ export const OnboardingModal = ( {
 	isOpen,
 	onClose,
 }: OnboardingModalProps ) => {
+	const initialData = {
+		business_name: wcSettings?.siteTitle,
+		mcc: '12312',
+		url: 'https://wcpay.test',
+		country: 'US',
+	};
+
 	return (
 		<>
 			{ isOpen && (
@@ -47,7 +56,15 @@ export const OnboardingModal = ( {
 								<Routes>
 									<Route
 										path="/"
-										element={ <OnboardingKycPage /> }
+										element={
+											<div className="woocommerce-woopayments-onboarding-modal__content-wrapper">
+												<OnboardingContextProvider
+													initialData={ initialData }
+												>
+													<BusinessDetails />
+												</OnboardingContextProvider>
+											</div>
+										}
 									/>
 									<Route
 										path="/payment-methods"

diff --git a/client/onboarding/modal/sidebar.tsx b/client/onboarding/modal/sidebar.tsx
@@ -14,7 +14,7 @@ export const OnboardingSidebar = () => {
 		<div className="woocommerce-woopayments-onboarding-modal__sidebar">
 			<h2>{ __( 'Set up WooPayments', 'woocommerce' ) }</h2>
 
-			<ul className="woocommerce-woopayments-onboarding-modal__sidebar--navigation">
+			<ul className="woocommerce-woopayments-onboarding-modal__sidebar-navigation">
 				<li>
 					<Link to="/">
 						{ __( 'Choose your payment methods', 'woocommerce' ) }