fix: MCCY settings confirmation dialog

changelog/fix-multi-currency-unload-confirmation-dialog

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+fix: ensure the confirmation dialog doesn't show up on the multi-currency UI

includes/multi-currency/Settings.php

@@ -80,7 +80,7 @@ public function wcpay_multi_currency_settings_page() {
 		// Hide original save button.
 		$GLOBALS['hide_save_button'] = true;
 		?>
-			<div id="wcpay_multi_currency_settings_container" aria-describedby="wcpay_multi_currency_settings_container-description"></div>
+			<div id="wcpay_multi_currency_settings_container" aria-describedby="wcpay_multi_currency_settings_container-description" class="wc-settings-prevent-change-event"></div>
 		<?php
 	}
 

includes/multi-currency/client/index.js

@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import ReactDOM from 'react-dom';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -11,18 +12,51 @@ import MultiCurrencySettings from './settings/multi-currency';
 import SingleCurrencySettings from './settings/single-currency';
 import MultiCurrencySettingsContext from './context';
 import UnbundledWpComponentsProvider from 'wcpay/wordpress-components-context/unbundled-wp-components-provider';
+import useConfirmNavigation from 'wcpay/utils/use-confirm-navigation';
 
 const MultiCurrencySettingsPage = () => {
 	const [
 		currencyCodeToShowSettingsFor,
-		setCurrencyCodeToShowSettingsFor,
+		_setCurrencyCodeToShowSettingsFor,
 	] = useState( null );
+	const [ isCurrentScreenDirty, setIsCurrentScreenDirty ] = useState( false );
+	useEffect(
+		useConfirmNavigation( () => {
+			if ( isCurrentScreenDirty ) {
+				return __(
+					'There are unsaved changes on this page. Are you sure you want to leave and discard the unsaved changes?',
+					'woocommerce-payments'
+				);
+			}
+		} ),
+		[ isCurrentScreenDirty ]
+	);
+	useEffect( () => {
+		setIsCurrentScreenDirty( false );
+	}, [ currencyCodeToShowSettingsFor ] );
+	const setCurrencyCodeToShowSettingsFor = useCallback(
+		( currency ) => {
+			if (
+				confirm(
+					__(
+						'There are unsaved changes on this page. Are you sure you want to leave and discard the unsaved changes?',
+						'woocommerce-payments'
+					)
+				)
+			) {
+				_setCurrencyCodeToShowSettingsFor( currency );
+			}
+		},
+		[ isCurrentScreenDirty ]
+	);
 
 	return (
 		<MultiCurrencySettingsContext.Provider
 			value={ {
 				currencyCodeToShowSettingsFor,
 				setCurrencyCodeToShowSettingsFor,
+				isCurrentScreenDirty,
+				setIsCurrentScreenDirty,
 			} }
 		>
 			{ ! currencyCodeToShowSettingsFor ? (

includes/multi-currency/client/settings/multi-currency/store-settings/__tests__/index.test.js

@@ -9,6 +9,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
  */
 import { useStoreSettings } from 'multi-currency/data';
 import StoreSettings from '..';
+import MultiCurrencySettingsContext from 'multi-currency/context';
 
 jest.mock( 'multi-currency/data', () => ( {
 	useStoreSettings: jest.fn(),
@@ -29,7 +30,13 @@ useStoreSettings.mockReturnValue( {
 } );
 
 const createContainer = () => {
-	const { container } = render( <StoreSettings /> );
+	const { container } = render(
+		<MultiCurrencySettingsContext.Provider
+			value={ { setIsCurrentScreenDirty: () => null } }
+		>
+			<StoreSettings />
+		</MultiCurrencySettingsContext.Provider>
+	);
 	return container;
 };
 
@@ -60,7 +67,7 @@ describe( 'Multi-Currency store settings', () => {
 		} );
 	} );
 
-	test( 'store settings button is diabled by default', () => {
+	test( 'store settings button is disabled by default', () => {
 		createContainer();
 		expect(
 			screen.getByRole( 'button', { name: /Save changes/ } )

includes/multi-currency/client/settings/multi-currency/store-settings/index.js

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
+import { Card } from 'wcpay/components/wp-components-wrapped/components/card';
+import { CardBody } from 'wcpay/components/wp-components-wrapped/components/card-body';
+import { CheckboxControl } from 'wcpay/components/wp-components-wrapped/components/checkbox-control';
+import { ExternalLink } from 'wcpay/components/wp-components-wrapped/components/external-link';
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 
@@ -19,6 +24,7 @@ import {
 	SettingsSection,
 } from 'multi-currency/interface/components';
 import PreviewModal from 'multi-currency/components/preview-modal';
+import MultiCurrencySettingsContext from 'multi-currency/context';
 
 const StoreSettingsDescription = () => (
 	<>
@@ -60,7 +66,10 @@ const StoreSettings = () => {
 
 	const [ isPreviewModalOpen, setPreviewModalOpen ] = useState( false );
 
-	const [ isDirty, setIsDirty ] = useState( false );
+	const {
+		setIsCurrentScreenDirty: setIsDirty,
+		isCurrentScreenDirty: isDirty,
+	} = useContext( MultiCurrencySettingsContext );
 
 	useEffect( () => {
 		if ( Object.keys( storeSettings ).length ) {

includes/multi-currency/client/settings/single-currency/__tests__/__snapshots__/index.test.js.snap

@@ -777,7 +777,6 @@ exports[`Single currency settings screen Page renders correctly 1`] = `
         >
           <button
             class="components-button is-primary"
-            disabled=""
             type="button"
           >
             Save changes

includes/multi-currency/client/settings/single-currency/__tests__/index.test.js

@@ -129,6 +129,8 @@ useStoreSettings.mockReturnValue( {
 const containerContext = {
 	currencyCodeToShowSettingsFor: 'EUR',
 	setCurrencyCodeToShowSettingsFor: jest.fn(),
+	isCurrentScreenDirty: true,
+	setIsCurrentScreenDirty: jest.fn(),
 };
 
 const getContainer = () => {

includes/multi-currency/client/settings/single-currency/index.js

@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, useCallback } from 'react';
 import { dateI18n } from '@wordpress/date';
 import { sprintf, __ } from '@wordpress/i18n';
 import moment from 'moment';
@@ -39,6 +39,30 @@ import {
 } from 'multi-currency/interface/components';
 import interpolateComponents from '@automattic/interpolate-components';
 
+const CurrencyPreviewDescription = ( {
+	storeCurrency,
+	targetCurrency,
+	isLoading,
+} ) => (
+	<>
+		<h2>{ __( 'Preview', 'woocommerce-payments' ) }</h2>
+		<p>
+			{ ! isLoading
+				? sprintf(
+						__(
+							'Enter a price in your default currency (%s) to ' +
+								'see it converted to %s using the ' +
+								'exchange rate and formatting rules above.',
+							'woocommerce-payments'
+						),
+						storeCurrency,
+						targetCurrency
+				  )
+				: '' }
+		</p>
+	</>
+);
+
 const CurrencySettingsDescription = () => (
 	<>
 		<h2>{ __( 'Currency settings', 'woocommerce-payments' ) }</h2>
@@ -57,10 +81,10 @@ const SingleCurrencySettings = () => {
 	const {
 		currencyCodeToShowSettingsFor: currency,
 		setCurrencyCodeToShowSettingsFor,
+		setIsCurrentScreenDirty: setIsDirty,
+		isCurrentScreenDirty: isDirty,
 	} = useContext( MultiCurrencySettingsContext );
 
-	const [ isDirty, setIsDirty ] = useState( false );
-
 	const { currencies } = useCurrencies();
 	const { enabledCurrencies } = useEnabledCurrencies();
 	const { storeSettings } = useStoreSettings();
@@ -132,25 +156,6 @@ const SingleCurrencySettings = () => {
 				moment.unix( targetCurrency.last_updated ).toISOString()
 		  )
 		: '';
-	const CurrencyPreviewDescription = () => (
-		<>
-			<h2>{ __( 'Preview', 'woocommerce-payments' ) }</h2>
-			<p>
-				{ ! isLoading
-					? sprintf(
-							__(
-								'Enter a price in your default currency (%s) to ' +
-									'see it converted to %s using the ' +
-									'exchange rate and formatting rules above.',
-								'woocommerce-payments'
-							),
-							storeCurrency.name,
-							targetCurrency.name
-					  )
-					: '' }
-			</p>
-		</>
-	);
 
 	const saveSingleCurrencySettings = () => {
 		setIsSaving( true );
@@ -172,6 +177,17 @@ const SingleCurrencySettings = () => {
 		setIsDirty( false );
 	};
 
+	const currencyPreviewDescription = useCallback(
+		() => (
+			<CurrencyPreviewDescription
+				storeCurrency={ storeCurrency.name }
+				targetCurrency={ targetCurrency.name }
+				isLoading={ isLoading }
+			/>
+		),
+		[ storeCurrency.name, targetCurrency.name, isLoading ]
+	);
+
 	return (
 		<div className="single-currency-settings">
 			<SettingsLayout>
@@ -387,7 +403,7 @@ const SingleCurrencySettings = () => {
 						</Card>
 					</LoadableBlock>
 				</SettingsSection>
-				<SettingsSection description={ CurrencyPreviewDescription }>
+				<SettingsSection description={ currencyPreviewDescription }>
 					<LoadableBlock isLoading={ isLoading } numLines={ 8 }>
 						<CurrencyPreview
 							className="single-currency-settings-currency-preview"

includes/multi-currency/client/setup/tasks/store-settings-task/__tests__/index.test.js

@@ -11,6 +11,7 @@ import { useCurrencies, useStoreSettings } from 'multi-currency/data';
 import { useSettings, useMultiCurrency } from 'multi-currency/interface/data';
 import { WizardTaskContext } from 'multi-currency/interface/functions';
 import StoreSettingsTask from '..';
+import MultiCurrencySettingsContext from 'multi-currency/context';
 
 jest.mock( 'multi-currency/data', () => ( {
 	useStoreSettings: jest.fn(),
@@ -62,7 +63,14 @@ const createContainer = () => {
 		<WizardTaskContext.Provider
 			value={ { isActive: true, setCompleted: setCompletedMock } }
 		>
-			<StoreSettingsTask />
+			<MultiCurrencySettingsContext.Provider
+				value={ {
+					setIsCurrentScreenDirty: () => null,
+					isCurrentScreenDirty: true,
+				} }
+			>
+				<StoreSettingsTask />
+			</MultiCurrencySettingsContext.Provider>
 		</WizardTaskContext.Provider>
 	);
 	return container;