✨ Integrate new Redux props to the welcome screen

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

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">

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 ];
+};