woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 13:44:42 +08:00
Code Issues Projects Packages Wiki Activity Actions

🏗️ Add conditional routing to onboarding steps

Browse source
This commit is contained in:
Philipp Stracker 2024-10-31 15:03:25 +01:00
parent 847bce3510
commit 426230bee9
No known key found for this signature in database
3 changed files with 28 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,9 @@
import Container from '../../ReusableComponents/Container'; import Container from '../../ReusableComponents/Container';
import StepWelcome from './StepWelcome';
import StepBusiness from './StepBusiness';
import StepProducts from './StepProducts';
import { useOnboardingStep } from '../../../data'; import { useOnboardingStep } from '../../../data';
import { getSteps } from './availableSteps';
const Onboarding = () => { const Onboarding = () => {
const { step, setStep, setCompleted } = useOnboardingStep(); const { step, setStep, setCompleted, flags } = useOnboardingStep();
return ( return (
<Container page="onboarding"> <Container page="onboarding">
@ -14,14 +12,15 @@ const Onboarding = () => {
currentStep={ step } currentStep={ step }
setStep={ setStep } setStep={ setStep }
setCompleted={ setCompleted } setCompleted={ setCompleted }
flags={ flags }
/> />
</div> </div>
</Container> </Container>
); );
}; };
const OnboardingStep = ( { currentStep, setStep, setCompleted } ) => { const OnboardingStep = ( { currentStep, setStep, setCompleted, flags } ) => {
const stepperOrder = [ StepWelcome, StepBusiness, StepProducts ]; const stepperOrder = getSteps( flags );
const isValidStep = ( step ) => const isValidStep = ( step ) =>
typeof step === 'number' && typeof step === 'number' &&

14
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js Normal file
View file

@ -0,0 +1,14 @@
import StepWelcome from './StepWelcome';
import StepBusiness from './StepBusiness';
import StepProducts from './StepProducts';
export const getSteps = ( flags ) => {
console.log( 'Step Flags:', flags );
const allSteps = [ StepWelcome, StepBusiness, StepProducts ];
if ( ! flags.canUseCasualSelling ) {
return allSteps.filter( ( step ) => step !== StepBusiness );
}
return allSteps;
};

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

@ -1,5 +1,6 @@
import { useSelect, useDispatch } from '@wordpress/data'; import { useSelect, useDispatch } from '@wordpress/data';
import { PRODUCT_TYPES, STORE_NAME } from '../constants'; import { PRODUCT_TYPES, STORE_NAME } from '../constants';
import { getFlags } from './selectors';
const useOnboardingDetails = () => { const useOnboardingDetails = () => {
const { const {
@ -23,6 +24,11 @@ const useOnboardingDetails = () => {
return select( STORE_NAME ).getTransientData().isReady; return select( STORE_NAME ).getTransientData().isReady;
} ); } );
// Read-only flags.
const flags = useSelect( ( select ) => {
return select( STORE_NAME ).getFlags();
} );
// Persistent accessors. // Persistent accessors.
const step = useSelect( ( select ) => { const step = useSelect( ( select ) => {
return select( STORE_NAME ).getPersistentData().step || 0; return select( STORE_NAME ).getPersistentData().step || 0;
@ -91,6 +97,7 @@ const useOnboardingDetails = () => {
setDetailAndPersist( setIsCasualSeller, value ), setDetailAndPersist( setIsCasualSeller, value ),
products, products,
toggleProduct, toggleProduct,
flags,
}; };
}; };
@ -133,8 +140,8 @@ export const useOnboardingStepProducts = () => {
}; };
export const useOnboardingStep = () => { export const useOnboardingStep = () => {
const { isReady, step, setStep, completed, setCompleted } = const { isReady, step, setStep, completed, setCompleted, flags } =
useOnboardingDetails(); useOnboardingDetails();
return { isReady, step, setStep, completed, setCompleted }; return { isReady, step, setStep, completed, setCompleted, flags };
}; };