Disable subscriptions if personal account

This commit is contained in:
carmenmaymo 2025-02-11 14:16:23 +01:00
parent afe05d4697
commit 1ef7141903
No known key found for this signature in database
GPG key ID: 6023F686B0F3102E
2 changed files with 60 additions and 41 deletions

View file

@ -9,7 +9,13 @@ const OptionSelector = ( {
} ) => ( } ) => (
<div className="ppcp-r-select-box-wrapper"> <div className="ppcp-r-select-box-wrapper">
{ options.map( { options.map(
( { value: itemValue, title, description, contents } ) => { ( {
value: itemValue,
title,
description,
contents,
isDisabled = false,
} ) => {
let isSelected; let isSelected;
if ( Array.isArray( value ) ) { if ( Array.isArray( value ) ) {
@ -27,6 +33,7 @@ const OptionSelector = ( {
onChange={ onChange } onChange={ onChange }
isMulti={ multiSelect } isMulti={ multiSelect }
isSelected={ isSelected } isSelected={ isSelected }
isDisabled={ isDisabled }
> >
{ contents } { contents }
</OptionItem> </OptionItem>
@ -46,13 +53,13 @@ const OptionItem = ( {
isMulti, isMulti,
isSelected, isSelected,
children, children,
isDisabled = false,
} ) => { } ) => {
const boxClassName = classNames( 'ppcp-r-select-box', { const boxClassName = classNames( 'ppcp-r-select-box', {
'ppcp--selected': isSelected, 'ppcp--selected': isSelected,
'ppcp--multiselect': isMulti, 'ppcp--multiselect': isMulti,
'ppcp--no-title': ! itemTitle, 'ppcp--no-title': ! itemTitle,
} ); } );
return ( return (
// eslint-disable-next-line jsx-a11y/label-has-associated-control -- label has a nested input control. // eslint-disable-next-line jsx-a11y/label-has-associated-control -- label has a nested input control.
<label className={ boxClassName }> <label className={ boxClassName }>
@ -61,6 +68,7 @@ const OptionItem = ( {
isRadio={ ! isMulti } isRadio={ ! isMulti }
onChange={ onChange } onChange={ onChange }
isSelected={ isSelected } isSelected={ isSelected }
isDisabled={ isDisabled }
/> />
<div className="ppcp--box-content"> <div className="ppcp--box-content">
@ -80,7 +88,7 @@ const OptionItem = ( {
); );
}; };
const InputField = ( { value, onChange, isRadio, isSelected } ) => { const InputField = ( { value, onChange, isRadio, isSelected, isDisabled } ) => {
if ( isRadio ) { if ( isRadio ) {
return ( return (
<PayPalRdb <PayPalRdb
@ -96,6 +104,7 @@ const InputField = ( { value, onChange, isRadio, isSelected } ) => {
value={ value } value={ value }
onChange={ onChange } onChange={ onChange }
checked={ isSelected } checked={ isSelected }
disabled={ isDisabled }
/> />
); );
}; };

View file

@ -10,6 +10,7 @@ const StepProducts = () => {
const { canUseSubscriptions } = OnboardingHooks.useFlags(); const { canUseSubscriptions } = OnboardingHooks.useFlags();
const [ optionState, setOptionState ] = useState( null ); const [ optionState, setOptionState ] = useState( null );
const [ productChoices, setProductChoices ] = useState( [] ); const [ productChoices, setProductChoices ] = useState( [] );
const { isCasualSeller } = OnboardingHooks.useBusiness();
useEffect( () => { useEffect( () => {
const initChoices = () => { const initChoices = () => {
@ -48,7 +49,36 @@ const StepProducts = () => {
setProducts( getNewValue() ); setProducts( getNewValue() );
}; };
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'
),
isDisabled: isCasualSeller,
contents: <DetailsSubscriptions showNotice={ isCasualSeller } />,
},
];
return ( return (
<div className="ppcp-r-page-products"> <div className="ppcp-r-page-products">
<OnboardingHeader <OnboardingHeader
@ -87,41 +117,21 @@ const DetailsPhysical = () => (
</ul> </ul>
); );
const DetailsSubscriptions = () => ( const DetailsSubscriptions = ( { showNotice } ) => (
<a <>
target="__blank" <a
href="https://woocommerce.com/document/woocommerce-paypal-payments/#subscriptions-faq" target="__blank"
> href="https://woocommerce.com/document/woocommerce-paypal-payments/#subscriptions-faq"
{ __( 'WooCommerce Subscriptions', 'woocommerce-paypal-payments' ) } >
</a> { __( 'WooCommerce Subscriptions', 'woocommerce-paypal-payments' ) }
</a>
{ showNotice && (
<p>
{ __(
'* Business account is required for subscriptions.',
'woocommerce-paypal-payments'
) }
</p>
) }
</>
); );
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 />,
},
];