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