Implement business view

modules/ppcp-settings/resources/css/_variables.scss

@@ -10,4 +10,6 @@ $color-gray-200: #E0E0E0;
 $color-gray: #646970;
 
 $shadow-card: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
-$gradient-header: linear-gradient(87.03deg, #003087 -0.49%, #001E51 29.22%, #001435 100%);
+$shadow-selection-box: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+$color-gradient-dark: #001435;
+$gradient-header: linear-gradient(87.03deg, #003087 -0.49%, #001E51 29.22%, $color-gradient-dark 100%);

modules/ppcp-settings/resources/css/components/reusable-components/_button.scss

@@ -4,6 +4,7 @@ button.components-button {
 		border-radius: 2px;
 		padding: 14px 17px;
 		height: auto;
+
 		&:hover {
 			background: $gradient-header;
 		}
@@ -19,4 +20,17 @@ button.components-button {
 		color: $color-white;
 		border: none;
 	}
+
+	&.is-tertiary {
+		color: $color-blueberry;
+
+		&:hover {
+			color: $color-gradient-dark;
+		}
+
+		&:focus:not(:disabled) {
+			border: none;
+			box-shadow: none;
+		}
+	}
 }

modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss

@@ -0,0 +1,19 @@
+.ppcp-r-navigation {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	gap: 12px;
+
+	.is-primary {
+		min-width: 196px;
+		justify-content: center;
+	}
+
+	.is-tertiary {
+		padding: 10px 17px;
+
+		&:hover {
+			background-color: transparent;
+		}
+	}
+}

modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss

@@ -3,4 +3,8 @@
 	gap: 8px;
 	justify-content: center;
 	flex-wrap: wrap;
+	> img{
+		width: 38px;
+		height: 24px;
+	}
 }

modules/ppcp-settings/resources/css/components/reusable-components/_select-box.scss

@@ -1,5 +1,4 @@
 .ppcp-r-select-box-wrapper {
-	max-width: 590px;
 	margin: 0 auto;
 	display: flex;
 	gap: 32px;
@@ -7,38 +6,61 @@
 }
 
 .ppcp-r-select-box {
+	position: relative;
 	width: 100%;
 	border: 1px solid $color-gray-500;
+	outline:1px solid transparent;
 	border-radius: 8px;
-	padding: 28px 32px;
 	display: flex;
+	gap: 32px;
 	align-items: center;
 	box-sizing: border-box;
+	padding: 28px 16px 28px 32px;
 
 
-	input[type='radio'] {
-		width: 20px;
-		height: 20px;
+	&.selected {
+		border-color: $color-blueberry;
+		outline-color: $color-blueberry;
+		box-shadow: $shadow-selection-box;
+	}
+
+	&__radio-value {
+		width: 100%;
+		height: 100%;
 		position: absolute;
 		left: 0;
 		top: 0;
 		margin: 0;
 		opacity: 0;
-	}
-
-	&__radio {
-		width: 20px;
-		height: 20px;
-		position: relative;
-		box-sizing: border-box;
-
+		border-radius: 0;
 		&:checked {
-			+ .ppcp-r-select-box__presentation {
-				background:black;
+			+ .ppcp-r-select-box__radio-presentation {
+				background: $color-white;
+				width: 20px;
+				height: 20px;
+				border: 6px solid $color-blueberry;
 			}
 		}
 	}
 
+	&__content {
+		display: flex;
+		gap: 18px;
+	}
+
+	&__title {
+		@include font(16, 24, 600);
+		color: $color-blueberry;
+		margin: 0 0 4px 0;
+		display: block;
+	}
+
+	&__description {
+		@include font(14, 20, 400);
+		color: $color-gray-800;
+		margin: 0 0 18px 0;
+	}
+
 	&__radio-presentation {
 		width: 20px;
 		height: 20px;

modules/ppcp-settings/resources/css/components/screens/onboarding/_step-business.scss

@@ -0,0 +1,17 @@
+.ppcp-r-page-business {
+	.ppcp-r-inner-container {
+		width: 622px;
+		padding-bottom: 84px;
+		@media screen and (max-width: 480px) {
+			padding-bottom: 42px;
+		}
+	}
+
+	.ppcp-r-payment-method-icons {
+		justify-content: flex-start;
+	}
+
+	.ppcp-r-select-box-wrapper{
+		margin:0 0 48px 0;
+	}
+}

modules/ppcp-settings/resources/css/style.scss

@@ -11,5 +11,7 @@
 	@import './components/reusable-components/payment-method-icons';
 	@import './components/reusable-components/settings-wrapper';
 	@import './components/reusable-components/select-box';
+	@import './components/reusable-components/navigation';
 	@import './components/screens/onboarding/step-welcome';
+	@import './components/screens/onboarding/step-business';
 }

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',

modules/ppcp-settings/src/SettingsModule.php

@@ -12,7 +12,6 @@ use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ExecutableModule
 use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ModuleClassNameIdTrait;
 use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ServiceModule;
 use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
-use WooCommerce\PayPalCommerce\WcGateway\Gateway\PayPalGateway;
 
 /**
  * Class SettingsModule
@@ -71,7 +70,7 @@ class SettingsModule implements ServiceModule, ExecutableModule {
 
 				wp_register_style(
 					'ppcp-admin-settings',
-					$module_url . '/assets/style-style-rtl.css',
+					$module_url . '/assets/style-style.css',
 					$style_asset_file['dependencies'],
 					$style_asset_file['version']
 				);