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

🏗️ 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 StepWelcome from './StepWelcome';
import StepBusiness from './StepBusiness';
import StepProducts from './StepProducts';
import { useOnboardingStep } from '../../../data';
import { getSteps } from './availableSteps';
const Onboarding = () => {
const { step, setStep, setCompleted } = useOnboardingStep();
const { step, setStep, setCompleted, flags } = useOnboardingStep();
return (
<Container page="onboarding">
@ -14,14 +12,15 @@ const Onboarding = () => {
currentStep={ step }
setStep={ setStep }
setCompleted={ setCompleted }
flags={ flags }
/>
</div>
</Container>
);
};
const OnboardingStep = ( { currentStep, setStep, setCompleted } ) => {
const stepperOrder = [ StepWelcome, StepBusiness, StepProducts ];
const OnboardingStep = ( { currentStep, setStep, setCompleted, flags } ) => {
const stepperOrder = getSteps( flags );
const isValidStep = ( step ) =>
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 { PRODUCT_TYPES, STORE_NAME } from '../constants';
import { getFlags } from './selectors';
const useOnboardingDetails = () => {
const {
@ -23,6 +24,11 @@ const useOnboardingDetails = () => {
return select( STORE_NAME ).getTransientData().isReady;
} );
// Read-only flags.
const flags = useSelect( ( select ) => {
return select( STORE_NAME ).getFlags();
} );
// Persistent accessors.
const step = useSelect( ( select ) => {
return select( STORE_NAME ).getPersistentData().step || 0;
@ -91,6 +97,7 @@ const useOnboardingDetails = () => {
setDetailAndPersist( setIsCasualSeller, value ),
products,
toggleProduct,
flags,
};
};
@ -133,8 +140,8 @@ export const useOnboardingStepProducts = () => {
};
export const useOnboardingStep = () => {
const { isReady, step, setStep, completed, setCompleted } =
const { isReady, step, setStep, completed, setCompleted, flags } =
useOnboardingDetails();
return { isReady, step, setStep, completed, setCompleted };
return { isReady, step, setStep, completed, setCompleted, flags };
};