Implement business view

modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js

@@ -0,0 +1,23 @@
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const Navigation = ( { setStep, currentStep } ) => {
+	return (
+		<div className="ppcp-r-navigation">
+			<Button
+				variant="tertiary"
+				onClick={ () => setStep( currentStep - 1 ) }
+			>
+				{ __( 'Back', 'woocommerce-paypal-payments' ) }
+			</Button>
+			<Button
+				variant="primary"
+				onClick={ () => setStep( currentStep + 1 ) }
+			>
+				{ __( 'Next', 'woocommerce-paypal-payments' ) }
+			</Button>
+		</div>
+	);
+};
+
+export default Navigation;

modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBox.js

@@ -1,13 +1,20 @@
 import data from '../../utils/data';
 
 const SelectBox = ( props ) => {
+	let boxClassName = 'ppcp-r-select-box';
+
+	if ( props.value === props.currentValue ) {
+		boxClassName += ' selected';
+	}
 	return (
-		<div className="ppcp-r-select-box">
+		<div className={ boxClassName }>
 			<div className="ppcp-r-select-box__radio">
 				<input
-					checked="checked"
 					className="ppcp-r-select-box__radio-value"
 					type="radio"
+					name={ props.name }
+					value={ props.value }
+					onChange={ () => props.changeCallback( props.value ) }
 				/>
 				<span className="ppcp-r-select-box__radio-presentation"></span>
 			</div>

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js

@@ -1,14 +1,33 @@
 import Container from '../../ReusableComponents/Container.js';
 import StepWelcome from './StepWelcome.js';
+import StepBusiness from './StepBusiness';
+import { useState } from '@wordpress/element';
 
 const Onboarding = () => {
+	const [ step, setStep ] = useState( 0 );
+
 	return (
 		<Container>
 			<div className="ppcp-r-card">
-				<StepWelcome />
+				<Stepper currentStep={ step } setStep={ setStep } />
 			</div>
 		</Container>
 	);
 };
 
+const Stepper = ( { currentStep, setStep } ) => {
+	const stepperOrder = {
+		0: StepWelcome,
+		1: StepBusiness,
+	};
+
+	const Component = stepperOrder[ currentStep ];
+
+	return (
+		<>
+			<Component setStep={ setStep } currentStep={ currentStep } />
+		</>
+	);
+};
+
 export default Onboarding;

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js

@@ -3,10 +3,17 @@ import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper.js';
 import SelectBox from '../../ReusableComponents/SelectBox.js';
 import { __ } from '@wordpress/i18n';
 import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
+import { useState } from '@wordpress/element';
+import Navigation from '../../ReusableComponents/Navigation';
+
+const StepBusiness = ( { setStep, currentStep } ) => {
+	const [ businessCategory, setBusinessCategory ] = useState( null );
+	const BUSINESS_RADIO_GROUP_NAME = 'business';
+	const CASUAL_SELLER_CHECKBOX_VALUE = 'casual_seller';
+	const BUSINESS_CHECKBOX_VALUE = 'business';
 
-const StepBusiness = () => {
 	return (
-		<div className="ppcp-r-page-welcome">
+		<div className="ppcp-r-page-business">
 			<OnboardingHeader
 				title={ __(
 					'Tell Us About Your Business',
@@ -25,6 +32,14 @@ const StepBusiness = () => {
 							'woocommerce-paypal-payments'
 						) }
 						icon="icon-business-casual-seller.svg"
+						name={ BUSINESS_RADIO_GROUP_NAME }
+						value={ CASUAL_SELLER_CHECKBOX_VALUE }
+						changeCallback={ setBusinessCategory }
+						currentValue={ businessCategory }
+						checked={
+							businessCategory ===
+							{ CASUAL_SELLER_CHECKBOX_VALUE }
+						}
 					>
 						<PaymentMethodIcons
 							icons={ [
@@ -47,6 +62,13 @@ const StepBusiness = () => {
 							'woocommerce-paypal-payments'
 						) }
 						icon="icon-business-business.svg"
+						name={ BUSINESS_RADIO_GROUP_NAME }
+						value={ BUSINESS_CHECKBOX_VALUE }
+						currentValue={ businessCategory }
+						changeCallback={ setBusinessCategory }
+						checked={
+							businessCategory === { BUSINESS_CHECKBOX_VALUE }
+						}
 					>
 						<PaymentMethodIcons
 							icons={ [
@@ -63,6 +85,7 @@ const StepBusiness = () => {
 						/>
 					</SelectBox>
 				</SelectBoxWrapper>
+				<Navigation setStep={ setStep } currentStep={ currentStep } />
 			</div>
 		</div>
 	);

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js

@@ -5,7 +5,7 @@ import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
 import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock';
 import Separator from '../../ReusableComponents/Separator';
 
-const StepWelcome = () => {
+const StepWelcome = ( { setStep, currentStep } ) => {
 	return (
 		<div className="ppcp-r-page-welcome">
 			<OnboardingHeader
@@ -24,6 +24,7 @@ const StepWelcome = () => {
 				<Button
 					className="ppcp-r-button-activate-paypal"
 					variant="primary"
+					onClick={ () => setStep( currentStep + 1 ) }
 				>
 					{ __(
 						'Activate PayPal Payments',