mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-04 08:47:23 +08:00
♻️ Migrate ButtonBlock to ControlButton
This commit is contained in:
parent
74c9647456
commit
209c264f71
5 changed files with 55 additions and 52 deletions
|
@ -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;
|
|
@ -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;
|
|
@ -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';
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue