Merge pull request #2813 from woocommerce/PCP-3910-3911-onboarding-ui-changes

New Settings UI: Update products and business step designs (3910) (3911)

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

@@ -18,7 +18,7 @@ $color-gradient-dark: #001435;
 $gradient-header: linear-gradient(87.03deg, #003087 -0.49%, #001E51 29.22%, $color-gradient-dark 100%);
 
 $max-width-onboarding: 1024px;
-$max-width-onboarding-content: 662px;
+$max-width-onboarding-content: 500px;
 $max-width-settings: 938px;
 
 #ppcp-settings-container {

modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss

@@ -1,5 +1,5 @@
 .ppcp-r-onboarding-header{
-	margin: 0 0 32px 0;
+	margin: 0 0 24px 0;
 
 	&__logo {
 		text-align: center;

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

@@ -8,14 +8,12 @@
 .ppcp-r-select-box {
 	position: relative;
 	width: 100%;
-	border: 1px solid $color-gray-500;
+	border: 1px solid $color-gray-200;
 	outline: 1px solid transparent;
-	border-radius: 8px;
+	border-radius: 4px;
 	display: flex;
-	gap: 32px;
+	gap: 16px;
-	align-items: center;
+	padding: 24px 16px 24px 16px;
-	box-sizing: border-box;
-	padding: 28px 16px 28px 32px;
 
 
 	&.selected {
@@ -59,20 +57,23 @@
 
 	&__content {
 		display: flex;
-		gap: 18px;
 	}
 
 	&__title {
-		@include font(16, 24, 600);
+		@include font(14, 20, 700);
-		color: $color-blueberry;
+		color: $color-black;
 		margin: 0 0 4px 0;
 		display: block;
 	}
 
 	&__description {
-		@include font(14, 20, 400);
+		@include font(13, 20, 400);
-		color: $color-gray-800;
+		color: $color-gray-700;
-		margin: 0 0 18px 0;
+		margin:0;
+
+		&:not(:last-child){
+			margin-block-end:18px;
+		}
 	}
 
 	&__radio-presentation {

modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss

@@ -9,7 +9,7 @@
 		margin-left: auto;
 		margin-right: auto;
 		padding: 0 16px 48px;
-		box-sizing: border-box;
+		box-sizing: content-box;
 
 		@media screen and (max-width: 480px) {
 			padding-bottom: 36px;

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

@@ -8,8 +8,7 @@
 		display: flex;
 		align-items: center;
 		gap: 4px;
-		color: $color-gray-700;
+		@include font(13, 20, 400);
-		@include font(14, 20, 400);
 		margin: 0;
 
 		&::before {
@@ -29,7 +28,7 @@
 
 	.ppcp-r-select-box__additional-content {
 		a {
-			@include font(12, 20, 400);
+			@include font(13, 20, 500);
 			color: $color-blueberry;
 		}
 	}

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

@@ -31,7 +31,6 @@ const SelectBox = ( props ) => {
 				/>
 			) }
 			<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 }

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

@@ -34,22 +34,38 @@ const StepBusiness = ( {
 		<div className="ppcp-r-page-business">
 			<OnboardingHeader
 				title={ __(
-					'Tell Us About Your Business',
+					'Choose your account type',
 					'woocommerce-paypal-payments'
 				) }
 			/>
 			<div className="ppcp-r-inner-container">
 				<SelectBoxWrapper>
+                    <SelectBox
+                        title={ __(
+                            'Business',
+                            'woocommerce-paypal-payments'
+                        ) }
+                        description={ __(
+                            'Recommended for individuals and organizations that primarily use PayPal to sell goods or services or receive donations, even if your business is not incorporated.',
+                            'woocommerce-paypal-payments'
+                        ) }
+                        name={ BUSINESS_RADIO_GROUP_NAME }
+                        value={ BUSINESS_TYPES.BUSINESS }
+                        changeCallback={ handleSellerTypeChange }
+                        currentValue={ getCurrentValue() }
+                        checked={ isCasualSeller === false }
+                        type="radio"
+                    >
+                    </SelectBox>
 					<SelectBox
 						title={ __(
-							'Casual Seller',
+							'Personal Account',
 							'woocommerce-paypal-payments'
 						) }
 						description={ __(
-							'I sell occasionally and mainly use PayPal for personal transactions.',
+							'Ideal for those who primarily make purchases or send personal transactions to family and friends.',
 							'woocommerce-paypal-payments'
 						) }
-						icon="icon-business-casual-seller.svg"
 						name={ BUSINESS_RADIO_GROUP_NAME }
 						value={ BUSINESS_TYPES.CASUAL_SELLER }
 						changeCallback={ handleSellerTypeChange }
@@ -57,47 +73,6 @@ const StepBusiness = ( {
 						checked={ isCasualSeller === true }
 						type="radio"
 					>
-						<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"
-						name={ BUSINESS_RADIO_GROUP_NAME }
-						value={ BUSINESS_TYPES.BUSINESS }
-						changeCallback={ handleSellerTypeChange }
-						currentValue={ getCurrentValue() }
-						checked={ isCasualSeller === false }
-						type="radio"
-					>
-						<PaymentMethodIcons
-							icons={ [
-								'paypal',
-								'venmo',
-								'visa',
-								'mastercard',
-								'amex',
-								'discover',
-								'apple-pay',
-								'google-pay',
-								'ideal',
-							] }
-						/>
 					</SelectBox>
 				</SelectBoxWrapper>
 			</div>

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

@@ -19,7 +19,7 @@ const StepProducts = ( {
 		<div className="ppcp-r-page-products">
 			<OnboardingHeader
 				title={ __(
-					'Tell Us About the Products You Sell',
+					'Tell us about the products you sell',
 					'woocommerce-paypal-payments'
 				) }
 			/>
@@ -28,10 +28,9 @@ const StepProducts = ( {
 					<SelectBox
 						title={ __( 'Virtual', 'woocommerce-paypal-payments' ) }
 						description={ __(
-							'Digital items or services that don’t require shipping.',
+							'Items do not require shipping.',
 							'woocommerce-paypal-payments'
 						) }
-						icon="icon-product-virtual.svg"
 						name={ PRODUCTS_CHECKBOX_GROUP_NAME }
 						value={ PRODUCT_TYPES.VIRTUAL }
 						changeCallback={ toggleProduct }
@@ -71,10 +70,9 @@ const StepProducts = ( {
 							'woocommerce-paypal-payments'
 						) }
 						description={ __(
-							'Items that need to be shipped.',
+							'Items require shipping.',
 							'woocommerce-paypal-payments'
 						) }
-						icon="icon-product-physical.svg"
 						name={ PRODUCTS_CHECKBOX_GROUP_NAME }
 						value={ PRODUCT_TYPES.PHYSICAL }
 						changeCallback={ toggleProduct }
@@ -99,10 +97,9 @@ const StepProducts = ( {
 							'woocommerce-paypal-payments'
 						) }
 						description={ __(
-							'Recurring payments for physical goods or services.',
+							'Recurring payments for either physical goods or services.',
 							'woocommerce-paypal-payments'
 						) }
-						icon="icon-product-subscription.svg"
 						name={ PRODUCTS_CHECKBOX_GROUP_NAME }
 						value={ PRODUCT_TYPES.SUBSCRIPTIONS }
 						changeCallback={ toggleProduct }