From 7b12e65ca8fa5af4bfa04d7f033b45ff88291aff Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Wed, 23 Oct 2024 18:17:08 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Integrate=20new=20Redux=20props=20t?=
 =?UTF-8?q?o=20the=20welcome=20screen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The new fields are managed by a debounced field hook that instantly stores the field values in a local state and propagates the new value to the Redux store after a debouncing-delay
---
 .../Screens/Onboarding/StepWelcome.js         | 19 +++++++
 .../ppcp-settings/resources/js/utils/hooks.js | 51 +++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 modules/ppcp-settings/resources/js/utils/hooks.js

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
index 095136c56..914729016 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
@@ -5,6 +5,7 @@ import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
 import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock';
 import Separator from '../../ReusableComponents/Separator';
 import { useOnboardingDetails } from '../../../data';
+import { useDebounceField } from '../../../utils/hooks';
 
 const StepWelcome = () => {
 	return (
@@ -78,8 +79,22 @@ const WelcomeForm = () => {
 		setSandboxMode,
 		isManualConnectionMode,
 		setManualConnectionMode,
+		clientId,
+		setClientId,
+		clientSecret,
+		setClientSecret,
 	} = useOnboardingDetails();
 
+	const [ currentClientId, updateClientId ] = useDebounceField(
+		setClientId,
+		clientId
+	);
+
+	const [ currentClientSecret, updateClientSecret ] = useDebounceField(
+		setClientSecret,
+		clientSecret
+	);
+
 	const advancedUsersDescription = sprintf(
 		// translators: %s: Link to PayPal REST application guide
 		__(
@@ -122,12 +137,16 @@ const WelcomeForm = () => {
 						'Sandbox Client ID',
 						'woocommerce-paypal-payments'
 					) }
+					value={ currentClientId }
+					onChange={ updateClientId }
 				></TextControl>
 				<TextControl
 					label={ __(
 						'Sandbox Secret Key',
 						'woocommerce-paypal-payments'
 					) }
+					value={ currentClientSecret }
+					onChange={ updateClientSecret }
 					type="password"
 				></TextControl>
 				<Button variant="secondary">
diff --git a/modules/ppcp-settings/resources/js/utils/hooks.js b/modules/ppcp-settings/resources/js/utils/hooks.js
new file mode 100644
index 000000000..e000710ec
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/utils/hooks.js
@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
+import { debounce } from '../../../../ppcp-blocks/resources/js/Helper/debounce';
+
+/**
+ * Hook to manage a form field in a local state, and sync it to the Redux store via a
+ * debounced setter. This ensures a good balance between fast/lightweight state management
+ * and a stable Redux integration, even when the value changes very frequently.
+ *
+ * @param {Function} syncToStore - Function to sync value to the Redux store.
+ * @param {string}   storeValue  - Initial value from the Redux store.
+ * @param {number}   delay       - Debounce delay, in milliseconds.
+ * @return {[string, Function]} Tuple of [fieldValue, updateField]
+ */
+export const useDebounceField = (
+	syncToStore,
+	storeValue = '',
+	delay = 300
+) => {
+	const [ fieldValue, setFieldValue ] = useState( storeValue );
+
+	// Memoize the debounced store sync
+	const debouncedSync = useMemo(
+		() => debounce( syncToStore, delay ),
+		[ syncToStore, delay ]
+	);
+
+	// Sync field with store changes
+	useEffect( () => {
+		if ( storeValue !== '' && fieldValue !== storeValue ) {
+			setFieldValue( storeValue );
+		}
+	}, [ storeValue, fieldValue ] );
+
+	// Handle field updates and store sync
+	const updateField = useCallback(
+		( newValue ) => {
+			setFieldValue( newValue );
+			debouncedSync( newValue );
+		},
+		[ debouncedSync ]
+	);
+
+	// Cleanup on unmount
+	useEffect( () => {
+		return () => {
+			debouncedSync.cancel();
+		};
+	}, [ debouncedSync ] );
+
+	return [ fieldValue, updateField ];
+};