Merge remote-tracking branch 'origin/trunk' into PCP-3814-Create-dashboard-placeholder-page-in-new-settings-module

# Conflicts:
#	modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js

modules/ppcp-settings/resources/js/Components/ReusableComponents/DataStoreControl.js

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import { debounce } from '../../../../../ppcp-blocks/resources/js/Helper/debounce';
+
+/**
+ * Approach 1: Component Injection
+ *
+ * A generic wrapper that adds debounced store updates to any controlled component.
+ *
+ * @param {Object}              props
+ * @param {React.ComponentType} props.control     The controlled component to render
+ * @param {string|number}       props.value       The controlled value
+ * @param {Function}            props.onChange    Change handler
+ * @param {number}              [props.delay=300] Debounce delay in milliseconds
+ */
+const DataStoreControl = ( {
+	control: ControlComponent,
+	value: externalValue,
+	onChange,
+	delay = 300,
+	...props
+} ) => {
+	const [ internalValue, setInternalValue ] = useState( externalValue );
+	const onChangeRef = useRef( onChange );
+	onChangeRef.current = onChange;
+
+	const debouncedUpdate = useRef(
+		debounce( ( value ) => {
+			onChangeRef.current( value );
+		}, delay )
+	).current;
+
+	useEffect( () => {
+		setInternalValue( externalValue );
+		debouncedUpdate?.cancel();
+	}, [ externalValue ] );
+
+	useEffect( () => {
+		return () => debouncedUpdate?.cancel();
+	}, [ debouncedUpdate ] );
+
+	const handleChange = useCallback(
+		( newValue ) => {
+			setInternalValue( newValue );
+			debouncedUpdate( newValue );
+		},
+		[ debouncedUpdate ]
+	);
+
+	return (
+		<ControlComponent
+			{ ...props }
+			value={ internalValue }
+			onChange={ handleChange }
+		/>
+	);
+};
+
+export default DataStoreControl;

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js

@@ -1,9 +1,6 @@
-import { useState } from '@wordpress/element';
 import { ToggleControl } from '@wordpress/components';
 
-const SettingsToggleBlock = ( props ) => {
-	const [ isToggled, setToggled ] = useState( false );
-
+const SettingsToggleBlock = ( { isToggled, setToggled, ...props } ) => {
 	return (
 		<div className="ppcp-r-toggle-block">
 			<div className="ppcp-r-toggle-block__wrapper">

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js

@@ -4,6 +4,8 @@ import { Button, TextControl } from '@wordpress/components';
 import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
 import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock';
 import Separator from '../../ReusableComponents/Separator';
+import { useOnboardingDetails } from '../../../data';
+import DataStoreControl from '../../ReusableComponents/DataStoreControl';
 
 const StepWelcome = ( { setStep, currentStep } ) => {
 	return (
@@ -73,6 +75,17 @@ const WelcomeFeatures = () => {
 };
 
 const WelcomeForm = () => {
+	const {
+		isSandboxMode,
+		setSandboxMode,
+		isManualConnectionMode,
+		setManualConnectionMode,
+		clientId,
+		setClientId,
+		clientSecret,
+		setClientSecret,
+	} = useOnboardingDetails();
+
 	const advancedUsersDescription = sprintf(
 		// translators: %s: Link to PayPal REST application guide
 		__(
@@ -93,8 +106,10 @@ const WelcomeForm = () => {
 					'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
 					'woocommerce-paypal-payments'
 				) }
+				isToggled={ !! isSandboxMode }
+				setToggled={ setSandboxMode }
 			>
-				<Button variant="primary">
+				<Button variant="secondary">
 					{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
 				</Button>
 			</SettingsToggleBlock>
@@ -105,22 +120,29 @@ const WelcomeForm = () => {
 					'woocommerce-paypal-payments'
 				) }
 				description={ advancedUsersDescription }
+				isToggled={ !! isManualConnectionMode }
+				setToggled={ setManualConnectionMode }
 			>
-				<TextControl
+				<DataStoreControl
+					control={ TextControl }
 					label={ __(
 						'Sandbox Client ID',
 						'woocommerce-paypal-payments'
 					) }
-				></TextControl>
-
-				<TextControl
+					value={ clientId }
+					onChange={ setClientId }
+				/>
+				<DataStoreControl
+					control={ TextControl }
 					label={ __(
 						'Sandbox Secret Key',
 						'woocommerce-paypal-payments'
 					) }
+					value={ clientSecret }
+					onChange={ setClientSecret }
 					type="password"
-				></TextControl>
-				<Button variant="primary">
+				/>
+				<Button variant="secondary">
 					{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
 				</Button>
 			</SettingsToggleBlock>