✨ Initial version of Disconnect button

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ConnectionStatus.js

@@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
 import SettingsCard from '../../../../ReusableComponents/SettingsCard';
 import { CommonHooks } from '../../../../../data';
 import ConnectionStatusBadge from './Parts/ConnectionStatusBadge';
+import DisconnectButton from './Parts/DisconnectButton';
 import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
 import { ControlStaticValue } from '../../../../ReusableComponents/Controls';
 
@@ -13,10 +14,7 @@ const ConnectionStatus = () => {
 		<SettingsCard
 			className="ppcp-connection-details ppcp--value-list"
 			title={ __( 'Connection status', 'woocommerce-paypal-payments' ) }
-			description={ __(
+			description={ <ConnectionDescription /> }
-				'Your PayPal account connection details',
-				'woocommerce-paypal-payments'
-			) }
 		>
 			<SettingsBlock>
 				<ControlStaticValue
@@ -48,3 +46,15 @@ const ConnectionStatus = () => {
 };
 
 export default ConnectionStatus;
+
+const ConnectionDescription = () => {
+	return (
+		<>
+			{ __(
+				'Your PayPal account connection details.',
+				'woocommerce-paypal-payments'
+			) }
+			<DisconnectButton />
+		</>
+	);
+};

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Parts/DisconnectButton.js

@@ -0,0 +1,73 @@
+import { __ } from '@wordpress/i18n';
+import { Button, Modal } from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
+
+import { CommonHooks } from '../../../../../../data';
+import { HStack } from '../../../../../ReusableComponents/Stack';
+
+const DisconnectButton = () => {
+	const [ isOpen, setIsOpen ] = useState( false );
+	const { disconnectMerchant } = CommonHooks.useDisconnectMerchant();
+
+	const handleOpen = useCallback( () => {
+		setIsOpen( true );
+	}, [] );
+
+	const handleCancel = useCallback( () => {
+		setIsOpen( false );
+	}, [] );
+
+	const handleConfirm = useCallback( async () => {
+		await disconnectMerchant();
+		window.location.reload();
+	}, [ disconnectMerchant ] );
+
+	const confirmationTitle = __(
+		'Disconnect from PayPal?',
+		'woocommerce-paypal-payments'
+	);
+
+	return (
+		<>
+			<Button
+				variant="tertiary"
+				isDestructive={ true }
+				onClick={ handleOpen }
+			>
+				{ __( 'Disconnect', 'woocommerce-paypal-payments' ) }
+			</Button>
+
+			{ isOpen && (
+				<Modal
+					size="small"
+					title={ confirmationTitle }
+					onRequestClose={ handleCancel }
+				>
+					<p>
+						{ __(
+							'Disconnecting your account will restart the connection wizard. Are you sure you want to disconnect from your PayPal account?',
+							'woocommerce-paypal-payments'
+						) }
+					</p>
+					<HStack>
+						<Button variant="tertiary" onClick={ handleCancel }>
+							{ __( 'Cancel', 'woocommerce-paypal-payments' ) }
+						</Button>
+						<Button
+							variant="primary"
+							isDestructive={ true }
+							onClick={ handleConfirm }
+						>
+							{ __(
+								'Disconnect',
+								'woocommerce-paypal-payments'
+							) }
+						</Button>
+					</HStack>
+				</Modal>
+			) }
+		</>
+	);
+};
+
+export default DisconnectButton;

modules/ppcp-settings/resources/js/data/common/hooks.js

@@ -23,6 +23,7 @@ const useHooks = () => {
 		authenticateWithOAuth,
 		startWebhookSimulation,
 		checkWebhookSimulationState,
+		disconnectMerchant,
 	} = useDispatch( STORE_NAME );
 
 	// Transient accessors.
@@ -78,6 +79,7 @@ const useHooks = () => {
 		productionOnboardingUrl,
 		authenticateWithCredentials,
 		authenticateWithOAuth,
+		disconnectMerchant,
 		merchant,
 		wooSettings,
 		features,
@@ -115,6 +117,11 @@ export const useAuthentication = () => {
 	};
 };
 
+export const useDisconnectMerchant = () => {
+	const { disconnectMerchant } = useHooks();
+	return { disconnectMerchant };
+};
+
 export const useWooSettings = () => {
 	const { wooSettings } = useHooks();