woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 16:24:33 +08:00
Code Issues Projects Packages Wiki Activity Actions

New Settings UI: Update Products and Business step designs

Browse source
This commit is contained in:
Himad M 2024-11-19 16:43:00 -04:00
parent d09d7f7b65
commit 014524f37c
No known key found for this signature in database
GPG key ID: 5FC769E9888A7B98
8 changed files with 42 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

1
modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBox.js
View file

@ -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 }

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

@ -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>

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

@ -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 }