From e00b95fd1d7a061d07ff72dc055f98eae3c87b7d Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 17 Jan 2025 16:24:49 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20React-side=20implementation=20of=20?=
 =?UTF-8?q?the=20save=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Screens/Settings/Components/Navigation.js      | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js
index f195ea1b1..5f9c19640 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js
@@ -2,13 +2,25 @@ import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 import TopNavigation from '../../../ReusableComponents/TopNavigation';
+import { StylingHooks } from '../../../../data';
 
 const SettingsNavigation = () => {
+	const { persist: persistStyling } = StylingHooks.useStore();
+	const isBusy = false; // TODO: Implement loading state.
+
+	const handleSaveClick = () => {
+		persistStyling();
+	};
+
 	const title = __( 'PayPal Payments', 'woocommerce-paypal-payments' );
 
 	return (
 		<TopNavigation title={ title } exitOnTitleClick={ true }>
-			<Button variant="primary" disabled={ false }>
+			<Button
+				variant="primary"
+				disabled={ isBusy }
+				onClick={ handleSaveClick }
+			>
 				{ __( 'Save', 'woocommerce-paypal-payments' ) }
 			</Button>
 		</TopNavigation>