woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 11

♻️ Implement new OptionSelector in StepBusiness

Browse source
This commit is contained in:
Philipp Stracker 2025-01-23 18:21:19 +01:00
parent e3bbd73e66
commit 5ac017c79e
No known key found for this signature in database
1 changed files with 42 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,27 +1,29 @@
import { __ } from '@wordpress/i18n';
import { useEffect, useState } from '@wordpress/element';
import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper';
import { SelectBox } from '../../../ReusableComponents/Fields';
import { OptionSelector } from '../../../ReusableComponents/Fields';
import { OnboardingHooks, BUSINESS_TYPES } from '../../../../data';
import OnboardingHeader from '../Components/OnboardingHeader';
const BUSINESS_RADIO_GROUP_NAME = 'business';
const getBusinessType = ( isCasualSeller ) => {
if ( isCasualSeller === null ) {
return '';
}
return isCasualSeller
? BUSINESS_TYPES.CASUAL_SELLER
: BUSINESS_TYPES.BUSINESS;
};
const StepBusiness = ( {} ) => {
const { isCasualSeller, setIsCasualSeller } = OnboardingHooks.useBusiness();
const [ businessChoice, setBusinessChoice ] = useState(
getBusinessType( isCasualSeller )
);
const handleSellerTypeChange = ( value ) =>
setIsCasualSeller( BUSINESS_TYPES.CASUAL_SELLER === value );
const getCurrentValue = () => {
if ( isCasualSeller === null ) {
return '';
}
return isCasualSeller
? BUSINESS_TYPES.CASUAL_SELLER
: BUSINESS_TYPES.BUSINESS;
};
useEffect( () => {
setIsCasualSeller( BUSINESS_TYPES.CASUAL_SELLER === businessChoice );
}, [ businessChoice, setIsCasualSeller ] );
return (
<div className="ppcp-r-page-business">
@ -32,43 +34,34 @@ const StepBusiness = ( {} ) => {
) }
/>
<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={ __(
'Personal Account',
'woocommerce-paypal-payments'
) }
description={ __(
'Ideal for those who primarily make purchases or send personal transactions to family and friends.',
'woocommerce-paypal-payments'
) }
name={ BUSINESS_RADIO_GROUP_NAME }
value={ BUSINESS_TYPES.CASUAL_SELLER }
changeCallback={ handleSellerTypeChange }
currentValue={ getCurrentValue() }
checked={ isCasualSeller === true }
type="radio"
></SelectBox>
</SelectBoxWrapper>
<OptionSelector
multiSelect={ false }
options={ businessChoices }
onChange={ setBusinessChoice }
value={ businessChoice }
/>
</div>
</div>
);
};
const businessChoices = [
{
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'
),
value: BUSINESS_TYPES.BUSINESS,
},
{
title: __( 'Personal Account', 'woocommerce-paypal-payments' ),
description: __(
'Ideal for those who primarily make purchases or send personal transactions to family and friends.',
'woocommerce-paypal-payments'
),
value: BUSINESS_TYPES.CASUAL_SELLER,
},
];
export default StepBusiness;