♻️ Migrate ButtonBlock to ControlButton

This commit is contained in:
Philipp Stracker 2025-01-23 12:46:11 +01:00
parent 74c9647456
commit 209c264f71
No known key found for this signature in database
5 changed files with 55 additions and 52 deletions

View file

@ -1,30 +0,0 @@
import { Button } from '@wordpress/components';
import SettingsBlock from '../SettingsBlock';
import { Action } from '../Elements';
const ButtonSettingsBlock = ( { title, description, ...props } ) => (
<SettingsBlock
title={ title }
headerDescription={ description }
horizontalLayout={ true }
className="ppcp--button-block"
{ ...props }
>
<Action>
<Button
isBusy={ props.actionProps?.isBusy }
variant={ props.actionProps?.buttonType }
onClick={
props.actionProps?.callback
? () => props.actionProps.callback()
: undefined
}
>
{ props?.actionProps?.value }
</Button>
</Action>
</SettingsBlock>
);
export default ButtonSettingsBlock;

View file

@ -0,0 +1,28 @@
import { Button } from '@wordpress/components';
import SettingsBlock from '../SettingsBlock';
import { Action } from '../Elements';
const ControlButton = ( {
title,
description,
type = 'secondary',
isBusy,
onClick,
buttonLabel,
} ) => (
<SettingsBlock
title={ title }
headerDescription={ description }
horizontalLayout={ true }
className="ppcp--button-block"
>
<Action>
<Button isBusy={ isBusy } variant={ type } onClick={ onClick }>
{ buttonLabel }
</Button>
</Action>
</SettingsBlock>
);
export default ControlButton;

View file

@ -1,4 +1,3 @@
export { default as ButtonSettingsBlock } from './ButtonSettingsBlock';
export { default as SelectSettingsBlock } from './SelectSettingsBlock';
export { default as RadioSettingsBlock } from './RadioSettingsBlock';
export { default as PaymentMethodsBlock } from './PaymentMethodsBlock';
@ -7,3 +6,4 @@ export { default as PaymentMethodItemBlock } from './PaymentMethodItemBlock';
export { default as ControlStaticValue } from './ControlStaticValue';
export { default as ControlTextInput } from './ControlTextInput';
export { default as ControlToggleButton } from './ControlToggleButton';
export { default as ControlButton } from './ControlButton';

View file

@ -4,11 +4,12 @@ import { useState } from '@wordpress/element';
import { store as noticesStore } from '@wordpress/notices';
import { STORE_NAME } from '../../../../../../data/common';
import { ButtonSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import { ControlButton } from '../../../../../ReusableComponents/SettingsBlocks';
import {
NOTIFICATION_ERROR,
NOTIFICATION_SUCCESS,
} from '../../../../../ReusableComponents/Icons';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
const ResubscribeBlock = () => {
const { createSuccessNotice, createErrorNotice } =
@ -48,7 +49,7 @@ const ResubscribeBlock = () => {
};
return (
<ButtonSettingsBlock
<SettingsBlock
title={ __(
'Resubscribe webhooks',
'woocommerce-paypal-payments'
@ -57,17 +58,17 @@ const ResubscribeBlock = () => {
'Click to remove the current webhook subscription and subscribe again, for example, if the website domain or URL structure changed.',
'woocommerce-paypal-payments'
) }
separatorAndGap={ false }
actionProps={ {
buttonType: 'secondary',
isBusy: resubscribing,
callback: () => startResubscribingWebhooks(),
value: __(
>
<ControlButton
type={ 'secondary' }
isBusy={ resubscribing }
onClick={ () => startResubscribingWebhooks() }
buttonLabel={ __(
'Resubscribe webhooks',
'woocommerce-paypal-payments'
),
} }
/>
) }
/>
</SettingsBlock>
);
};

View file

@ -3,12 +3,13 @@ import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { ButtonSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import { ControlButton } from '../../../../../ReusableComponents/SettingsBlocks';
import { CommonHooks } from '../../../../../../data';
import {
NOTIFICATION_ERROR,
NOTIFICATION_SUCCESS,
} from '../../../../../ReusableComponents/Icons';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
const SimulationBlock = () => {
const {
@ -108,20 +109,23 @@ const SimulationBlock = () => {
};
return (
<ButtonSettingsBlock
<SettingsBlock
title={ __( 'Test webhooks', 'woocommerce-paypal-payments' ) }
description={ __(
'Send a test-webhook from PayPal to confirm that webhooks are being received and processed correctly.',
'woocommerce-paypal-payments'
) }
separatorAndGap={ false }
actionProps={ {
buttonType: 'secondary',
isBusy: simulating,
callback: () => startSimulation( 30 ),
value: __( 'Simulate webhooks', 'woocommerce-paypal-payments' ),
} }
/>
>
<ControlButton
type={ 'secondary' }
isBusy={ simulating }
onClick={ () => startSimulation( 30 ) }
buttonLabel={ __(
'Simulate webhooks',
'woocommerce-paypal-payments'
) }
/>
</SettingsBlock>
);
};
export default SimulationBlock;