Fix buggy unsaved changes warning (#4407)

* Fix 'unsaved changes' warning by adding necessary class to save button

* Remove redundant code for warning against unsaved changes

* Add changelog and readme entries

* Fix behavior for when customizing payment methods

* Add comments

---------

Co-authored-by: daledupreez <[email protected]>

Author: 2 people

changelog.txt

@@ -7,6 +7,7 @@
 * Fix - Ensure that we migrate payment_request_button_size=medium on upgrade
 * Fix - Show correct price in express checkout for zero decimal currencies
 * Fix - Fixes a possible fatal error with Multibanco purchases when generating the email instructions.
+* Fix - Fix buggy unsaved changes warning in settings page
 
 = 9.5.2 - 2025-05-22 =
 * Add - Implement custom database cache for persistent caching with in-memory optimization.

client/settings/general-settings-section/customize-payment-method.js

@@ -94,7 +94,9 @@ const CustomizePaymentMethod = ( { method, onClose } ) => {
 					) }
 				/>
 			) }
-			<ButtonWrapper>
+			{ /* The 'submit' class is used by WC core to clear unsaved changes warnings.
+				See https://github.com/woocommerce/woocommerce/blob/fc7ffce309662758c0d3383de8cc8e8c6a57a167/plugins/woocommerce/client/legacy/js/admin/settings.js#L139 */ }
+			<ButtonWrapper className="submit">
 				<Button
 					variant="tertiary"
 					disabled={ isCustomizing }

client/settings/save-settings-section/index.js

@@ -20,7 +20,9 @@ const SaveSettingsSection = ( { onSettingsSave } ) => {
 	};
 
 	return (
-		<SaveSettingsSectionWrapper>
+		// The 'submit' class is used by WC core to clear unsaved changes warnings.
+		// See https://github.com/woocommerce/woocommerce/blob/fc7ffce309662758c0d3383de8cc8e8c6a57a167/plugins/woocommerce/client/legacy/js/admin/settings.js#L139
+		<SaveSettingsSectionWrapper className="submit">
 			<Button
 				isPrimary
 				isBusy={ isSaving }

client/settings/settings-manager/index.js

@@ -4,13 +4,12 @@ import React, { useState } from 'react';
 import { TabPanel } from '@wordpress/components';
 import { getQuery, updateQueryString } from '@woocommerce/navigation';
 import styled from '@emotion/styled';
-import { isEmpty, isEqual } from 'lodash';
+import { isEmpty } from 'lodash';
 import SettingsLayout from '../settings-layout';
 import PaymentSettingsPanel from '../payment-settings';
 import PaymentMethodsPanel from '../payment-methods';
 import SaveSettingsSection from '../save-settings-section';
 import { useSettings } from '../../data';
-import useConfirmNavigation from 'utils/use-confirm-navigation';
 
 const StyledTabPanel = styled( TabPanel )`
 	.components-tab-panel__tabs {
@@ -51,18 +50,6 @@ const SettingsManager = () => {
 		} );
 	};
 
-	const isPristine =
-		! isEmpty( initialSettings ) && isEqual( initialSettings, settings );
-	const displayPrompt = ! isPristine;
-	const confirmationNavigationCallback = useConfirmNavigation(
-		displayPrompt
-	);
-
-	useEffect( confirmationNavigationCallback, [
-		displayPrompt,
-		confirmationNavigationCallback,
-	] );
-
 	// This grabs the "panel" URL query string value to allow for opening a specific tab.
 	const { panel } = getQuery();
 

readme.txt

@@ -118,5 +118,6 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 * Fix - Ensure that we migrate payment_request_button_size=medium on upgrade
 * Fix - Show correct price in express checkout for zero decimal currencies
 * Fix - Fixes a possible fatal error with Multibanco purchases when generating the email instructions.
+* Fix - Fix buggy unsaved changes warning in settings page
 
 [See changelog for full details across versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).