Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 1x 91x 91x 91x 91x 91x 91x 91x 6x 91x 2x 2x 1x 91x 91x 182x 5x 1x | /**
* RegistrationWizard Component
* Story 1.2.3: Implement Account Creation Flow - Task 9 (GREEN Phase)
* TDD: Implementation after tests written
*/
import React from 'react';
import { useForm, FormProvider } from 'react-hook-form';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Stepper, Step, StepLabel, Typography, Container } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { RegistrationStep1 } from '../RegistrationStep1';
import { RegistrationStep2 } from '../RegistrationStep2';
import { useRegistration } from '@/hooks/useRegistration';
export const RegistrationWizard: React.FC = () => {
const { t } = useTranslation('auth');
const navigate = useNavigate();
const [searchParams, setSearchParams] = useSearchParams();
const currentStep = parseInt(searchParams.get('step') || '1', 10);
const methods = useForm({
defaultValues: {
firstName: '',
lastName: '',
email: '',
password: '',
confirmPassword: '',
agreedToTerms: false,
newsletterOptIn: false,
},
mode: 'onBlur',
});
const { mutate: register, isPending, error } = useRegistration();
const handleStepChange = (step: number) => {
setSearchParams({ step: step.toString() });
};
const handleSubmit = () => {
const formData = methods.getValues();
register(formData, {
onSuccess: (response) => {
// Navigate to email verification screen
navigate(`/auth/verify-email?email=${encodeURIComponent(response.email)}`);
},
});
};
const steps = [t('register.step1.title'), t('register.step2.title')];
return (
<Container maxWidth="sm" sx={{ mt: 4, mb: 4 }}>
<Typography variant="h4" align="center" gutterBottom>
{t('register.title')}
</Typography>
<Typography variant="subtitle1" align="center" color="text.secondary" gutterBottom>
{t('register.subtitle')}
</Typography>
<Stepper activeStep={currentStep - 1} sx={{ my: 4 }}>
{steps.map((label, index) => (
<Step key={index}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<FormProvider {...methods}>
{currentStep === 1 && <RegistrationStep1 onContinue={() => handleStepChange(2)} />}
{currentStep === 2 && (
<RegistrationStep2
onBack={() => handleStepChange(1)}
onSubmit={handleSubmit}
isLoading={isPending}
error={error}
/>
)}
</FormProvider>
</Container>
);
};
export default RegistrationWizard;
|