Rename files, folders

modules/ppcp-settings/images/icon-business-business.svg

@@ -0,0 +1,8 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2097 15.1042C12.875 15.1042 11.7931 16.1861 11.7931 17.5208V48.3333C11.7931 49.668 12.875 50.75 14.2097 50.75H26.2931V35.6458C26.2931 34.3111 27.375 33.2292 28.7097 33.2292H35.9597V17.5208C35.9597 16.1861 34.8777 15.1042 33.5431 15.1042H14.2097Z" fill="#6FC400"/>
+<path d="M33.5431 50.75H45.6264C46.9611 50.75 48.0431 49.668 48.0431 48.3333V35.6458C48.0431 34.3111 46.9611 33.2292 45.6264 33.2292H35.9597V48.3333C35.9597 49.668 34.8777 50.75 33.5431 50.75Z" fill="#5BBBFC"/>
+<path d="M26.2931 50.75H33.5431C34.8777 50.75 35.9597 49.668 35.9597 48.3333V33.2292H28.7097C27.375 33.2292 26.2931 34.3111 26.2931 35.6458V50.75Z" fill="#FAF8F5"/>
+<path d="M40.7458 18.3711C40.6878 17.9916 40.5811 17.621 40.4284 17.2683L36.1315 8.24801C36.1135 8.20728 36.0919 8.16822 36.0668 8.13132C35.8803 7.85532 35.6272 7.63009 35.3304 7.4762C35.0337 7.3223 34.7028 7.24463 34.3681 7.25029H13.207C12.8982 7.2504 12.597 7.34442 12.3437 7.51967C12.0904 7.69493 11.8973 7.94301 11.7904 8.2305C11.7904 8.3647 7.27013 17.2333 7.25838 17.3675C7.12438 17.709 7.03356 18.0657 6.98799 18.4294C6.46484 23.8673 13.3716 24.7075 13.7066 19.0946C13.9065 24.1532 20.2431 24.2407 20.4782 19.0946C20.6486 24.194 27.044 24.2874 27.2556 19.0946C27.4731 24.1999 33.8038 24.1999 34.0271 19.0946C34.3857 24.8417 41.3924 23.8264 40.7517 18.3652L40.7458 18.3711Z" fill="#005400"/>
+<path d="M50.4226 35.138C50.377 34.8461 50.2932 34.561 50.1732 34.2897L46.7971 27.351C46.7829 27.3197 46.7659 27.2897 46.7463 27.2613C46.5997 27.049 46.4008 26.8757 46.1677 26.7573C45.9345 26.6389 45.6745 26.5792 45.4115 26.5836H28.785C28.5424 26.5836 28.3056 26.656 28.1066 26.7908C27.9076 26.9256 27.7559 27.1164 27.6719 27.3376C27.6719 27.4408 24.1203 34.2628 24.111 34.366C24.0058 34.6287 23.9344 34.9031 23.8986 35.1829C23.4876 39.3659 28.9143 40.0122 29.1775 35.6945C29.3346 39.5858 34.3133 39.6531 34.498 35.6945C34.632 39.6172 39.6569 39.689 39.8232 35.6945C39.994 39.6217 44.9682 39.6217 45.1437 35.6945C45.4254 40.1154 50.9306 39.3344 50.4272 35.1335L50.4226 35.138Z" fill="#005400"/>
+<path d="M31.1264 42.2917C31.1264 42.959 30.5854 43.5 29.9181 43.5C29.2507 43.5 28.7097 42.959 28.7097 42.2917C28.7097 41.6243 29.2507 41.0833 29.9181 41.0833C30.5854 41.0833 31.1264 41.6243 31.1264 42.2917Z" fill="#001C64"/>
+</svg>

modules/ppcp-settings/images/icon-business-casual-seller.svg

@@ -0,0 +1,6 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.125 25.375C47.125 35.3852 39.0102 43.5 29 43.5C18.9898 43.5 10.875 35.3852 10.875 25.375C10.875 15.3648 18.9898 7.25 29 7.25C39.0102 7.25 47.125 15.3648 47.125 25.375Z" fill="#DD7F57"/>
+<path d="M14.5 45.9167C14.5 37.9085 20.9919 31.4167 29 31.4167C37.0081 31.4167 43.5 37.9085 43.5 45.9167V50.0064C43.5 50.4171 43.1671 50.75 42.7564 50.75H15.2436C14.8329 50.75 14.5 50.4171 14.5 50.0064V45.9167Z" fill="#5BBBFC"/>
+<path d="M29 29C33.0041 29 36.25 25.7541 36.25 21.75C36.25 17.7459 33.0041 14.5 29 14.5C24.9959 14.5 21.75 17.7459 21.75 21.75C21.75 25.7541 24.9959 29 29 29Z" fill="#FAF8F5"/>
+<path d="M29 31.4167C23.6925 31.4167 19.0507 34.2683 16.5237 38.523C19.7734 41.6075 24.1659 43.5 29 43.5C33.8342 43.5 38.2259 41.6075 41.4756 38.523C38.9486 34.2683 34.3075 31.4167 29 31.4167Z" fill="#FAF8F5"/>
+</svg>

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

@@ -1,6 +1,7 @@
 * {
 	font-family: "Inter", sans-serif;
 	-webkit-font-smoothing: antialiased;
+	box-sizing: border-box;
 }
 
 a:not(.button) {

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

@@ -0,0 +1,50 @@
+.ppcp-r-select-box-wrapper {
+	max-width: 590px;
+	margin: 0 auto;
+	display: flex;
+	gap: 32px;
+	flex-wrap: wrap;
+}
+
+.ppcp-r-select-box {
+	width: 100%;
+	border: 1px solid $color-gray-500;
+	border-radius: 8px;
+	padding: 28px 32px;
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+
+
+	input[type='radio'] {
+		width: 20px;
+		height: 20px;
+		position: absolute;
+		left: 0;
+		top: 0;
+		margin: 0;
+		opacity: 0;
+	}
+
+	&__radio {
+		width: 20px;
+		height: 20px;
+		position: relative;
+		box-sizing: border-box;
+
+		&:checked {
+			+ .ppcp-r-select-box__presentation {
+				background:black;
+			}
+		}
+	}
+
+	&__radio-presentation {
+		width: 20px;
+		height: 20px;
+		border: 1px solid $color-gray-600;
+		border-radius: 20px;
+		display: block;
+		pointer-events: none;
+	}
+}

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

@@ -10,5 +10,6 @@
 	@import './components/reusable-components/separator';
 	@import './components/reusable-components/payment-method-icons';
 	@import './components/reusable-components/settings-wrapper';
+	@import './components/reusable-components/select-box';
 	@import './components/screens/onboarding/step-welcome';
 }

modules/ppcp-settings/resources/js/App.js

@@ -1,4 +1,4 @@
-import Onboarding from './components/screens/onboarding/onboarding.js';
+import Onboarding from './Components/Screens/Onboarding/Onboarding.js';
 
 export function App() {
 	return (

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

@@ -1,4 +1,4 @@
-import PaymentMethodIcon from './payment-method-icon';
+import PaymentMethodIcon from './PaymentMethodIcon';
 
 const PaymentMethodIcons = ( props ) => {
 	return (

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

@@ -0,0 +1,34 @@
+import data from '../../utils/data';
+
+const SelectBox = ( props ) => {
+	return (
+		<div className="ppcp-r-select-box">
+			<div className="ppcp-r-select-box__radio">
+				<input
+					checked="checked"
+					className="ppcp-r-select-box__radio-value"
+					type="radio"
+				/>
+				<span className="ppcp-r-select-box__radio-presentation"></span>
+			</div>
+			<div className="ppcp-r-select-box__content">
+				{ data().getImage( props.icon ) }
+				<div className="ppcp-r-select-box__content-inner">
+					<span className="ppcp-r-select-box__title">
+						{ props.title }
+					</span>
+					<p className="ppcp-r-select-box__description">
+						{ props.description }
+					</p>
+					{ props.children && (
+						<div className="ppcp-r-select-box__additional-content">
+							{ props.children }
+						</div>
+					) }
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default SelectBox;

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

@@ -0,0 +1,5 @@
+const SelectBoxWrapper = ( props ) => {
+	return <div className="ppcp-r-select-box-wrapper">{ props.children }</div>;
+};
+
+export default SelectBoxWrapper;

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

@@ -0,0 +1,14 @@
+import Container from '../../ReusableComponents/Container.js';
+import StepWelcome from './StepWelcome.js';
+
+const Onboarding = () => {
+	return (
+		<Container>
+			<div className="ppcp-r-card">
+				<StepWelcome />
+			</div>
+		</Container>
+	);
+};
+
+export default Onboarding;

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

@@ -0,0 +1,71 @@
+import OnboardingHeader from '../../ReusableComponents/OnboardingHeader.js';
+import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper.js';
+import SelectBox from '../../ReusableComponents/SelectBox.js';
+import { __ } from '@wordpress/i18n';
+import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
+
+const StepBusiness = () => {
+	return (
+		<div className="ppcp-r-page-welcome">
+			<OnboardingHeader
+				title={ __(
+					'Tell Us About Your Business',
+					'woocommerce-paypal-payments'
+				) }
+			/>
+			<div className="ppcp-r-inner-container">
+				<SelectBoxWrapper>
+					<SelectBox
+						title={ __(
+							'Casual Seller',
+							'woocommerce-paypal-payments'
+						) }
+						description={ __(
+							'I sell occasionally and mainly use PayPal for personal transactions.',
+							'woocommerce-paypal-payments'
+						) }
+						icon="icon-business-casual-seller.svg"
+					>
+						<PaymentMethodIcons
+							icons={ [
+								'paypal',
+								'venmo',
+								'visa',
+								'mastercard',
+								'amex',
+								'discover',
+							] }
+						/>
+					</SelectBox>
+					<SelectBox
+						title={ __(
+							'Business',
+							'woocommerce-paypal-payments'
+						) }
+						description={ __(
+							'I run a registered business and sell full-time.',
+							'woocommerce-paypal-payments'
+						) }
+						icon="icon-business-business.svg"
+					>
+						<PaymentMethodIcons
+							icons={ [
+								'paypal',
+								'venmo',
+								'visa',
+								'mastercard',
+								'amex',
+								'discover',
+								'apple-pay',
+								'google-pay',
+								'ideal',
+							] }
+						/>
+					</SelectBox>
+				</SelectBoxWrapper>
+			</div>
+		</div>
+	);
+};
+
+export default StepBusiness;

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

@@ -1,9 +1,9 @@
-import OnboardingHeader from '../../reusable-components/onboarding-header.js';
+import OnboardingHeader from '../../ReusableComponents/OnboardingHeader.js';
 import { __, sprintf } from '@wordpress/i18n';
 import { Button, TextControl } from '@wordpress/components';
-import PaymentMethodIcons from '../../reusable-components/payment-method-icons';
-import SettingsToggleBlock from '../../reusable-components/settings-toggle-block';
-import Separator from '../../reusable-components/separator';
+import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
+import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock';
+import Separator from '../../ReusableComponents/Separator';
 
 const StepWelcome = () => {
 	return (

modules/ppcp-settings/resources/js/components/reusable-components/select-box.js

@@ -1 +0,0 @@
-const SelectBox = ( props ) => {};

modules/ppcp-settings/resources/js/components/screens/onboarding/onboarding.js

@@ -1,16 +0,0 @@
-import Container from '../../reusable-components/container';
-import StepWelcome from './step-welcome.js';
-import StepBusiness from './step-business';
-
-const Onboarding = () => {
-	return (
-		<Container>
-			<div className="ppcp-r-card">
-				<StepBusiness />
-				<StepWelcome />
-			</div>
-		</Container>
-	);
-};
-
-export default Onboarding;

modules/ppcp-settings/resources/js/components/screens/onboarding/step-business.js

@@ -1,22 +0,0 @@
-import OnboardingHeader from '../../reusable-components/onboarding-header.js';
-import { __, sprintf } from '@wordpress/i18n';
-import { Button, TextControl } from '@wordpress/components';
-import PaymentMethodIcons from '../../reusable-components/payment-method-icons';
-import SettingsToggleBlock from '../../reusable-components/settings-toggle-block';
-import Separator from '../../reusable-components/separator';
-
-const StepBusiness = () => {
-	return (
-		<div className="ppcp-r-page-welcome">
-			<OnboardingHeader
-				title={ __(
-					'Tell Us About Your Business',
-					'woocommerce-paypal-payments'
-				) }
-			/>
-			<div className="ppcp-r-inner-container"></div>
-		</div>
-	);
-};
-
-export default StepBusiness;

modules/ppcp-settings/src/SettingsModule.php

@@ -71,7 +71,7 @@ class SettingsModule implements ServiceModule, ExecutableModule {
 
 				wp_register_style(
 					'ppcp-admin-settings',
-					$module_url . '/assets/style-style.css',
+					$module_url . '/assets/style-style-rtl.css',
 					$style_asset_file['dependencies'],
 					$style_asset_file['version']
 				);