Add UI toggle to optionally reset the settings

This commit is contained in:
Philipp Stracker 2025-02-12 16:24:35 +01:00
parent 4399293a02
commit 0a98fcb8cc
No known key found for this signature in database

View file

@ -1,12 +1,14 @@
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { Button, Modal } from '@wordpress/components'; import { Button, Modal, ToggleControl } from '@wordpress/components';
import { useCallback, useState } from '@wordpress/element'; import { useCallback, useState } from '@wordpress/element';
import { CommonHooks } from '../../../../../../data'; import { CommonHooks } from '../../../../../../data';
import { HStack } from '../../../../../ReusableComponents/Stack'; import { HStack } from '../../../../../ReusableComponents/Stack';
import { Separator } from '../../../../../ReusableComponents/Elements';
const DisconnectButton = () => { const DisconnectButton = () => {
const [ isOpen, setIsOpen ] = useState( false ); const [ isOpen, setIsOpen ] = useState( false );
const [ resetFlag, setResetFlag ] = useState( false );
const { disconnectMerchant } = CommonHooks.useDisconnectMerchant(); const { disconnectMerchant } = CommonHooks.useDisconnectMerchant();
const handleOpen = useCallback( () => { const handleOpen = useCallback( () => {
@ -49,7 +51,28 @@ const DisconnectButton = () => {
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
</p> </p>
<HStack> <ToggleControl
__nextHasNoMarginBottom
checked={ resetFlag }
onChange={ setResetFlag }
label={ __(
'Start over',
'woocommerce-paypal-payments'
) }
help={
resetFlag
? __(
'Attention: The plugin is reset to its initial state!',
'woocommerce-paypal-payments'
)
: __(
'Change Paypal accounts, preserving all settings',
'woocommerce-paypal-payments'
)
}
/>
<Separator />
<HStack className="ppcp--action-buttons">
<Button variant="tertiary" onClick={ handleCancel }> <Button variant="tertiary" onClick={ handleCancel }>
{ __( 'Cancel', 'woocommerce-paypal-payments' ) } { __( 'Cancel', 'woocommerce-paypal-payments' ) }
</Button> </Button>