🔀 Merge branch 'trunk'

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

@@ -33,22 +33,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 }
@@ -56,47 +72,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

@@ -18,7 +18,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'
 				) }
 			/>
@@ -27,10 +27,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 }
@@ -70,10 +69,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 }
@@ -98,10 +96,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 }

modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js

@@ -15,16 +15,16 @@ import ConnectionInfo, {
 	connectionStatusDataDefault,
 } from '../../ReusableComponents/ConnectionInfo';
 
-const TabDashboard = () => {
+const TabOverview = () => {
 	const [ todos, setTodos ] = useState( [] );
 	const [ todosData, setTodosData ] = useState( todosDataDefault );
 
 	return (
-		<div className="ppcp-r-tab-dashboard">
+		<div className="ppcp-r-tab-overview">
 			{ todosData.length > 0 && (
 				<SettingsCard
-					className="ppcp-r-tab-dashboard-todo"
-					icon="icon-dashboard-list.svg"
+					className="ppcp-r-tab-overview-todo"
+					icon="icon-overview-list.svg"
 					title={ __(
 						'Things to do next',
 						'woocommerce-paypal-payments'
@@ -51,8 +51,8 @@ const TabDashboard = () => {
 				</SettingsCard>
 			) }
 			<SettingsCard
-				className="ppcp-r-tab-dashboard-support"
-				icon="icon-dashboard-support.svg"
+				className="ppcp-r-tab-overview-support"
+				icon="icon-overview-support.svg"
 				title={ __( 'Status', 'woocommerce-paypal-payments' ) }
 				description={ __(
 					'Your PayPal account connection details, along with available products and features.',
@@ -400,4 +400,4 @@ const featuresDefault = [
 		],
 	},
 ];
-export default TabDashboard;
+export default TabOverview;

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

@@ -1,16 +1,16 @@
 import { __ } from '@wordpress/i18n';
-import TabDashboard from './Dashboard/TabDashboard';
-import TabPaymentMethods from './Dashboard/TabPaymentMethods';
-import TabSettings from './Dashboard/TabSettings';
-import TabStyling from './Dashboard/TabStyling';
+import TabOverview from './Overview/TabOverview';
+import TabPaymentMethods from './Overview/TabPaymentMethods';
+import TabSettings from './Overview/TabSettings';
+import TabStyling from './Overview/TabStyling';
 
 export const getSettingsTabs = () => {
 	const tabs = [];
 
 	tabs.push( {
-		name: 'dashboard',
-		title: __( 'Dashboard', 'woocommerce-paypal-payments' ),
-		component: <TabDashboard />,
+		name: 'overview',
+		title: __( 'Overview', 'woocommerce-paypal-payments' ),
+		component: <TabOverview />,
 	} );
 
 	tabs.push( {