♻️ Extract onboarding state to custom hooks

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

@@ -3,7 +3,7 @@ import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper.js';
 import SelectBox from '../../ReusableComponents/SelectBox.js';
 import { __ } from '@wordpress/i18n';
 import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
-import { useState } from '@wordpress/element';
+import { useOnboardingStepBusiness } from '../../../data';
 import Navigation from '../../ReusableComponents/Navigation';
 import { BUSINESS_TYPES } from '../../../data/constants';
 
@@ -15,7 +15,21 @@ const StepBusiness = ( {
 	stepperOrder,
 	setCompleted,
 } ) => {
-	const [ businessCategory, setBusinessCategory ] = useState( null );
+	const { isCasualSeller, setIsCasualSeller } = useOnboardingStepBusiness();
+
+	const handleSellerTypeChange = ( value ) => {
+		setIsCasualSeller( BUSINESS_TYPES.CASUAL_SELLER === value );
+	};
+
+	const getCurrentValue = () => {
+		if ( isCasualSeller === null ) {
+			return '';
+		}
+
+		return isCasualSeller
+			? BUSINESS_TYPES.CASUAL_SELLER
+			: BUSINESS_TYPES.BUSINESS;
+	};
 
 	return (
 		<div className="ppcp-r-page-business">
@@ -39,12 +53,9 @@ const StepBusiness = ( {
 						icon="icon-business-casual-seller.svg"
 						name={ BUSINESS_RADIO_GROUP_NAME }
 						value={ BUSINESS_TYPES.CASUAL_SELLER }
-						changeCallback={ setBusinessCategory }
+						changeCallback={ handleSellerTypeChange }
-						currentValue={ businessCategory }
+						currentValue={ getCurrentValue() }
-						checked={
+						checked={ isCasualSeller === true }
-							businessCategory ===
-							{ CASUAL_SELLER_CHECKBOX_VALUE }
-						}
 						type="radio"
 					>
 						<PaymentMethodIcons
@@ -70,11 +81,9 @@ const StepBusiness = ( {
 						icon="icon-business-business.svg"
 						name={ BUSINESS_RADIO_GROUP_NAME }
 						value={ BUSINESS_TYPES.BUSINESS }
-						currentValue={ businessCategory }
+						changeCallback={ handleSellerTypeChange }
-						changeCallback={ setBusinessCategory }
+						currentValue={ getCurrentValue() }
-						checked={
+						checked={ isCasualSeller === false }
-							businessCategory === { BUSINESS_CHECKBOX_VALUE }
-						}
 						type="radio"
 					>
 						<PaymentMethodIcons
@@ -97,7 +106,7 @@ const StepBusiness = ( {
 					currentStep={ currentStep }
 					stepperOrder={ stepperOrder }
 					setCompleted={ setCompleted }
-					canProceeedCallback={ () => businessCategory !== null }
+					canProceeedCallback={ () => isCasualSeller !== null }
 				/>
 			</div>
 		</div>

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

@@ -3,7 +3,7 @@ import Navigation from '../../ReusableComponents/Navigation';
 import { __ } from '@wordpress/i18n';
 import SelectBox from '../../ReusableComponents/SelectBox';
 import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
-import { useState } from '@wordpress/element';
+import { useOnboardingStepProducts } from '../../../data';
 import { PRODUCT_TYPES } from '../../../data/constants';
 
 const PRODUCTS_CHECKBOX_GROUP_NAME = 'products';
@@ -14,7 +14,7 @@ const StepProducts = ( {
 	stepperOrder,
 	setCompleted,
 } ) => {
-	const [ products, setProducts ] = useState( [] );
+	const { products, toggleProduct } = useOnboardingStepProducts();
 
 	return (
 		<div className="ppcp-r-page-products">
@@ -35,7 +35,7 @@ const StepProducts = ( {
 						icon="icon-product-virtual.svg"
 						name={ PRODUCTS_CHECKBOX_GROUP_NAME }
 						value={ PRODUCT_TYPES.VIRTUAL }
-						changeCallback={ setProducts }
+						changeCallback={ toggleProduct }
 						currentValue={ products }
 						type="checkbox"
 					>
@@ -78,7 +78,7 @@ const StepProducts = ( {
 						icon="icon-product-physical.svg"
 						name={ PRODUCTS_CHECKBOX_GROUP_NAME }
 						value={ PRODUCT_TYPES.PHYSICAL }
-						changeCallback={ setProducts }
+						changeCallback={ toggleProduct }
 						currentValue={ products }
 						type="checkbox"
 					>
@@ -106,7 +106,7 @@ const StepProducts = ( {
 						icon="icon-product-subscription.svg"
 						name={ PRODUCTS_CHECKBOX_GROUP_NAME }
 						value={ PRODUCT_TYPES.SUBSCRIPTIONS }
-						changeCallback={ setProducts }
+						changeCallback={ toggleProduct }
 						currentValue={ products }
 						type="checkbox"
 					>

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

@@ -4,7 +4,7 @@ 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 { useOnboardingStepWelcome } from '../../../data';
 import DataStoreControl from '../../ReusableComponents/DataStoreControl';
 
 const StepWelcome = ( { setStep, currentStep } ) => {
@@ -84,7 +84,7 @@ const WelcomeForm = () => {
 		setClientId,
 		clientSecret,
 		setClientSecret,
-	} = useOnboardingDetails();
+	} = useOnboardingStepWelcome();
 
 	const advancedUsersDescription = sprintf(
 		// translators: %s: Link to PayPal REST application guide

modules/ppcp-settings/resources/js/data/onboarding/hooks.js

@@ -1,7 +1,7 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PRODUCT_TYPES, STORE_NAME } from '../constants';
 
-export const useOnboardingDetails = () => {
+const useOnboardingDetails = () => {
 	const {
 		persist,
 		setOnboardingStep,
@@ -94,6 +94,44 @@ export const useOnboardingDetails = () => {
 	};
 };
 
+export const useOnboardingStepWelcome = () => {
+	const {
+		isSaving,
+		isSandboxMode,
+		setSandboxMode,
+		isManualConnectionMode,
+		setManualConnectionMode,
+		clientId,
+		setClientId,
+		clientSecret,
+		setClientSecret,
+	} = useOnboardingDetails();
+
+	return {
+		isSaving,
+		isSandboxMode,
+		setSandboxMode,
+		isManualConnectionMode,
+		setManualConnectionMode,
+		clientId,
+		setClientId,
+		clientSecret,
+		setClientSecret,
+	};
+};
+
+export const useOnboardingStepBusiness = () => {
+	const { isCasualSeller, setIsCasualSeller } = useOnboardingDetails();
+
+	return { isCasualSeller, setIsCasualSeller };
+};
+
+export const useOnboardingStepProducts = () => {
+	const { products, toggleProduct } = useOnboardingDetails();
+
+	return { products, toggleProduct };
+};
+
 export const useOnboardingStep = () => {
 	const { isReady, step, setStep, completed, setCompleted } =
 		useOnboardingDetails();