Add a confirmation dialog before disconnect account

woocommerce · Jun 4, 2021 · 56fa4bb · 56fa4bb
1 parent f5f9696
commit 56fa4bb
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 6 deletions.
diff --git a/assets/source/setup-guide/app/steps/SetupAccount.js b/assets/source/setup-guide/app/steps/SetupAccount.js
@@ -3,6 +3,7 @@
  */
 import { sprintf, __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
+import { useState } from '@wordpress/element';
 import {
 	Button,
 	Card,
@@ -11,6 +12,7 @@ import {
 	Flex,
 	FlexItem,
 	FlexBlock,
+	Modal,
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { Spinner } from '@woocommerce/components';
@@ -29,11 +31,64 @@ const SetupAccount = ( {
 	view,
 	goToNextStep,
 } ) => {
+	const [ isConfirmationModalOpen, setIsConfirmationModalOpen ] = useState(
+		false
+	);
+
+	const openConfirmationModal = () => {
+		setIsConfirmationModalOpen( true );
+	};
+
+	const closeConfirmationModal = () => {
+		setIsConfirmationModalOpen( false );
+	};
+
+	const renderConfirmationModal = () => {
+		return (
+			<Modal
+				title={
+					<>{ __( 'Are you sure?', 'pinterest-for-woocommerce' ) }</>
+				}
+				onRequestClose={ closeConfirmationModal }
+				className="woocommerce-setup-guide__step-modal"
+			>
+				<div className="woocommerce-setup-guide__step-modal__wrapper">
+					<p>
+						{ __(
+							'Are you sure you want to disconnect this account?',
+							'pinterest-for-woocommerce'
+						) }
+					</p>
+					<div className="woocommerce-setup-guide__step-modal__buttons">
+						<Button
+							isDestructive
+							isSecondary
+							onClick={ handleDisconnectAccount }
+						>
+							{ __(
+								"Yes, I'm sure",
+								'pinterest-for-woocommerce'
+							) }
+						</Button>
+						<Button isTertiary onClick={ closeConfirmationModal }>
+							{ __( 'Cancel', 'pinterest-for-woocommerce' ) }
+						</Button>
+					</div>
+				</div>
+			</Modal>
+		);
+	};
+
 	const handleDisconnectAccount = async () => {
-		const update = await setAppSettings( {
-			token: null,
-			crypto_encoded_key: null,
-		} );
+		closeConfirmationModal();
+
+		const update = await setAppSettings(
+			{
+				token: null,
+				crypto_encoded_key: null,
+			},
+			true
+		);
 
 		if ( ! update.success ) {
 			createNotice(
@@ -104,7 +159,7 @@ const SetupAccount = ( {
 										<Button
 											isLink
 											isDestructive
-											onClick={ handleDisconnectAccount }
+											onClick={ openConfirmationModal }
 										>
 											{ __(
 												'Disconnect Pinterest Account',
@@ -160,6 +215,8 @@ const SetupAccount = ( {
 								</Button>
 							</CardFooter>
 						) }
+
+						{ isConfirmationModalOpen && renderConfirmationModal() }
 					</Card>
 
 					{ view === 'wizard' &&

diff --git a/assets/source/setup-guide/app/style.scss b/assets/source/setup-guide/app/style.scss
@@ -231,6 +231,16 @@ $root: ".woocommerce-setup-guide";
 						display: block;
 					}
 				}
+
+				&-modal {
+
+					&__buttons {
+
+						button + button {
+							margin-left: 12px;
+						}
+					}
+				}
 			}
 
 			&__setup-account {

diff --git a/assets/source/setup-guide/app/views/WizardApp.js b/assets/source/setup-guide/app/views/WizardApp.js
@@ -35,7 +35,8 @@ const WizardApp = () => {
 
 	const childComponentProps = {
 		appSettings,
-		setAppSettings: ( data ) => updateSettings( data, true ),
+		setAppSettings: ( data, saveToDb = true ) =>
+			updateSettings( data, saveToDb ),
 		createNotice,
 	};