2024-10-31 14:44:45 +01:00
|
|
|
import Container from '../../ReusableComponents/Container';
|
2024-10-28 18:27:12 +01:00
|
|
|
import { useOnboardingStep } from '../../../data';
|
2024-10-31 15:03:25 +01:00
|
|
|
import { getSteps } from './availableSteps';
|
2024-10-23 15:24:52 +02:00
|
|
|
|
2024-10-31 15:11:36 +01:00
|
|
|
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 ];
|
|
|
|
};
|
|
|
|
|
2024-10-23 15:24:52 +02:00
|
|
|
const Onboarding = () => {
|
2024-10-31 15:03:25 +01:00
|
|
|
const { step, setStep, setCompleted, flags } = useOnboardingStep();
|
2024-10-31 15:11:36 +01:00
|
|
|
const steps = getSteps( flags );
|
|
|
|
|
|
|
|
const CurrentStepComponent = getCurrentStep( step, steps );
|
2024-10-24 06:35:48 +02:00
|
|
|
|
2024-10-23 15:24:52 +02:00
|
|
|
return (
|
2024-10-31 14:44:45 +01:00
|
|
|
<Container page="onboarding">
|
2024-10-23 15:24:52 +02:00
|
|
|
<div className="ppcp-r-card">
|
2024-10-31 15:11:36 +01:00
|
|
|
<CurrentStepComponent
|
2024-10-28 18:27:12 +01:00
|
|
|
setStep={ setStep }
|
2024-10-31 15:11:36 +01:00
|
|
|
currentStep={ step }
|
2024-10-28 18:27:12 +01:00
|
|
|
setCompleted={ setCompleted }
|
2024-10-31 15:11:36 +01:00
|
|
|
stepperOrder={ steps }
|
2024-10-28 18:27:12 +01:00
|
|
|
/>
|
2024-10-23 15:24:52 +02:00
|
|
|
</div>
|
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Onboarding;
|