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

♻️ Simplify the StepProducts component

Browse source
This commit is contained in:
Philipp Stracker 2025-01-23 19:41:06 +01:00
parent 78386cb0a3
commit 31856def94
No known key found for this signature in database
1 changed files with 103 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,15 +1,53 @@
import { __ } from '@wordpress/i18n';
import { useEffect, useState } from '@wordpress/element';
import { SelectBox } from '../../../ReusableComponents/Fields';
import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper';
import { OptionSelector } from '../../../ReusableComponents/Fields';
import { OnboardingHooks, PRODUCT_TYPES } from '../../../../data';
import OnboardingHeader from '../Components/OnboardingHeader';
const PRODUCTS_CHECKBOX_GROUP_NAME = 'products';
const StepProducts = () => {
const { products, setProducts } = OnboardingHooks.useProducts();
const { canUseSubscriptions } = OnboardingHooks.useFlags();
const [ optionState, setOptionState ] = useState( null );
const [ productChoices, setProductChoices ] = useState( [] );
useEffect( () => {
const initChoices = () => {
if ( optionState === canUseSubscriptions ) {
return;
}
let choices = productChoicesFull;
// Remove subscription details, if not available.
if ( ! canUseSubscriptions ) {
choices = choices.filter(
( { value } ) => value !== PRODUCT_TYPES.SUBSCRIPTIONS
);
setProducts(
products.filter(
( value ) => value !== PRODUCT_TYPES.SUBSCRIPTIONS
)
);
}
setProductChoices( choices );
setOptionState( canUseSubscriptions );
};
initChoices();
}, [ canUseSubscriptions, optionState, products, setProducts ] );
const handleChange = ( key, checked ) => {
const getNewValue = () => {
if ( checked ) {
return [ ...products, key ];
}
return products.filter( ( val ) => val !== key );
};
setProducts( getNewValue() );
};
return (
<div className="ppcp-r-page-products">
@ -20,104 +58,70 @@ const StepProducts = () => {
) }
/>
<div className="ppcp-r-inner-container">
<SelectBoxWrapper>
<SelectBox
title={ __( 'Virtual', 'woocommerce-paypal-payments' ) }
description={ __(
'Items do not require shipping.',
'woocommerce-paypal-payments'
) }
name={ PRODUCTS_CHECKBOX_GROUP_NAME }
value={ PRODUCT_TYPES.VIRTUAL }
changeCallback={ setProducts }
currentValue={ products }
type="checkbox"
>
<ul className="ppcp-r-services">
<li>
{ __(
'Services',
'woocommerce-paypal-payments'
) }
</li>
<li>
{ __(
'Downloadable',
'woocommerce-paypal-payments'
) }
</li>
<li>
{ __(
'Bookings',
'woocommerce-paypal-payments'
) }
</li>
<li>
{ __(
'Deposits',
'woocommerce-paypal-payments'
) }
</li>
</ul>
</SelectBox>
<SelectBox
title={ __(
'Physical Goods',
'woocommerce-paypal-payments'
) }
description={ __(
'Items require shipping.',
'woocommerce-paypal-payments'
) }
name={ PRODUCTS_CHECKBOX_GROUP_NAME }
value={ PRODUCT_TYPES.PHYSICAL }
changeCallback={ setProducts }
currentValue={ products }
type="checkbox"
>
<ul className="ppcp-r-services">
<li>
{ __( 'Goods', 'woocommerce-paypal-payments' ) }
</li>
<li>
{ __(
'Deliveries',
'woocommerce-paypal-payments'
) }
</li>
</ul>
</SelectBox>
{ canUseSubscriptions && (
<SelectBox
title={ __(
'Subscriptions',
'woocommerce-paypal-payments'
) }
description={ __(
'Recurring payments for either physical goods or services.',
'woocommerce-paypal-payments'
) }
name={ PRODUCTS_CHECKBOX_GROUP_NAME }
value={ PRODUCT_TYPES.SUBSCRIPTIONS }
changeCallback={ setProducts }
currentValue={ products }
type="checkbox"
>
<a
target="__blank"
href="https://woocommerce.com/document/woocommerce-paypal-payments/#subscriptions-faq"
>
{ __(
'WooCommerce Subscriptions',
'woocommerce-paypal-payments'
) }
</a>
</SelectBox>
) }
</SelectBoxWrapper>
<OptionSelector
multiSelect={ true }
options={ productChoices }
onChange={ handleChange }
value={ products }
/>
</div>
</div>
);
};
export default StepProducts;
const DetailsVirtual = () => (
<ul className="ppcp-r-services">
<li>{ __( 'Services', 'woocommerce-paypal-payments' ) }</li>
<li>{ __( 'Downloadable', 'woocommerce-paypal-payments' ) }</li>
<li>{ __( 'Bookings', 'woocommerce-paypal-payments' ) }</li>
<li>{ __( 'Deposits', 'woocommerce-paypal-payments' ) }</li>
</ul>
);
const DetailsPhysical = () => (
<ul className="ppcp-r-services">
<li>{ __( 'Goods', 'woocommerce-paypal-payments' ) }</li>
<li>{ __( 'Deliveries', 'woocommerce-paypal-payments' ) }</li>
</ul>
);
const DetailsSubscriptions = () => (
<a
target="__blank"
href="https://woocommerce.com/document/woocommerce-paypal-payments/#subscriptions-faq"
>
{ __( 'WooCommerce Subscriptions', 'woocommerce-paypal-payments' ) }
</a>
);
const productChoicesFull = [
{
value: PRODUCT_TYPES.VIRTUAL,
title: __( 'Virtual', 'woocommerce-paypal-payments' ),
description: __(
'Items do not require shipping.',
'woocommerce-paypal-payments'
),
contents: <DetailsVirtual />,
},
{
value: PRODUCT_TYPES.PHYSICAL,
title: __( 'Physical Goods', 'woocommerce-paypal-payments' ),
description: __(
'Items require shipping.',
'woocommerce-paypal-payments'
),
contents: <DetailsPhysical />,
},
{
value: PRODUCT_TYPES.SUBSCRIPTIONS,
title: __( 'Subscriptions', 'woocommerce-paypal-payments' ),
description: __(
'Recurring payments for either physical goods or services.',
'woocommerce-paypal-payments'
),
contents: <DetailsSubscriptions />,
},
];