woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

♻️ Extract onboarding state to custom hooks

Browse source
This commit is contained in:
Philipp Stracker 2024-10-30 17:33:48 +01:00
parent cff9919c78
commit 6e3664ade8
No known key found for this signature in database
4 changed files with 69 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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 }
currentValue={ businessCategory }
checked={
businessCategory ===
{ CASUAL_SELLER_CHECKBOX_VALUE }
}
changeCallback={ handleSellerTypeChange }
currentValue={ getCurrentValue() }
checked={ isCasualSeller === true }
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={ setBusinessCategory }
checked={
businessCategory === { BUSINESS_CHECKBOX_VALUE }
}
changeCallback={ handleSellerTypeChange }
currentValue={ getCurrentValue() }
checked={ isCasualSeller === false }
type="radio"
>
<PaymentMethodIcons
@ -97,7 +106,7 @@ const StepBusiness = ( {
currentStep={ currentStep }
stepperOrder={ stepperOrder }
setCompleted={ setCompleted }
canProceeedCallback={ () => businessCategory !== null }
canProceeedCallback={ () => isCasualSeller !== null }
/>
</div>
</div>

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

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

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

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

40
modules/ppcp-settings/resources/js/data/onboarding/hooks.js
View file

@ -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();