mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
♻️ Refactor Onboarding component and step handling
This commit is contained in:
parent
426230bee9
commit
05657b8b27
1 changed files with 17 additions and 26 deletions
|
@ -2,44 +2,35 @@ import Container from '../../ReusableComponents/Container';
|
|||
import { useOnboardingStep } from '../../../data';
|
||||
import { getSteps } from './availableSteps';
|
||||
|
||||
const getCurrentStep = ( requestedStep, steps ) => {
|
||||
const isValidStep = ( step ) =>
|
||||
typeof step === 'number' &&
|
||||
Number.isInteger( step ) &&
|
||||
step >= 0 &&
|
||||
step < steps.length;
|
||||
|
||||
const safeCurrentStep = isValidStep( requestedStep ) ? requestedStep : 0;
|
||||
return steps[ safeCurrentStep ];
|
||||
};
|
||||
|
||||
const Onboarding = () => {
|
||||
const { step, setStep, setCompleted, flags } = useOnboardingStep();
|
||||
const steps = getSteps( flags );
|
||||
|
||||
const CurrentStepComponent = getCurrentStep( step, steps );
|
||||
|
||||
return (
|
||||
<Container page="onboarding">
|
||||
<div className="ppcp-r-card">
|
||||
<OnboardingStep
|
||||
currentStep={ step }
|
||||
<CurrentStepComponent
|
||||
setStep={ setStep }
|
||||
currentStep={ step }
|
||||
setCompleted={ setCompleted }
|
||||
flags={ flags }
|
||||
stepperOrder={ steps }
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
const OnboardingStep = ( { currentStep, setStep, setCompleted, flags } ) => {
|
||||
const stepperOrder = getSteps( flags );
|
||||
|
||||
const isValidStep = ( step ) =>
|
||||
typeof step === 'number' &&
|
||||
Number.isInteger( step ) &&
|
||||
step >= 0 &&
|
||||
step < stepperOrder.length;
|
||||
|
||||
const safeCurrentStep = isValidStep( currentStep ) ? currentStep : 0;
|
||||
|
||||
const CurrentStepComponent = stepperOrder[ safeCurrentStep ];
|
||||
|
||||
return (
|
||||
<CurrentStepComponent
|
||||
setStep={ setStep }
|
||||
currentStep={ safeCurrentStep }
|
||||
setCompleted={ setCompleted }
|
||||
stepperOrder={ stepperOrder }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Onboarding;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue