From 6e3664ade80771ae0c4af0484dbd1c2f5cccbf02 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Wed, 30 Oct 2024 17:33:48 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20onboarding=20sta?= =?UTF-8?q?te=20to=20custom=20hooks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Screens/Onboarding/StepBusiness.js | 37 ++++++++++------- .../Screens/Onboarding/StepProducts.js | 10 ++--- .../Screens/Onboarding/StepWelcome.js | 4 +- .../resources/js/data/onboarding/hooks.js | 40 ++++++++++++++++++- 4 files changed, 69 insertions(+), 22 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js index fe7deeb90..1c38ecc86 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js +++ b/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 (
@@ -39,12 +53,9 @@ const StepBusiness = ( { icon="icon-business-casual-seller.svg" name={ BUSINESS_RADIO_GROUP_NAME } value={ BUSINESS_TYPES.CASUAL_SELLER } - changeCallback={ setBusinessCategory } - currentValue={ businessCategory } - checked={ - businessCategory === - { CASUAL_SELLER_CHECKBOX_VALUE } - } + changeCallback={ handleSellerTypeChange } + currentValue={ getCurrentValue() } + checked={ isCasualSeller === true } type="radio" > businessCategory !== null } + canProceeedCallback={ () => isCasualSeller !== null } />
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js index c2ce87012..fecdc6029 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js +++ b/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 (
@@ -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" > 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 b6a5bb097..368b4d9c9 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js +++ b/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 diff --git a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js index b5f478afb..9481e047d 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js +++ b/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();