Multi-Step Navigation
Relevant source files
The following files were used as context for generating this wiki page:The multi-step navigation system is a core feature of this application, designed to break down a large form into smaller, manageable sections. This is orchestrated by a central parent component, MultiStepForm, which controls the flow, state, and validation across all steps. The user is guided through a sequence of four steps: Personal Information, Address Details, Payment Information, and finally a Review & Submit page.
The architecture employs a single stateful component to manage the entire form's data and current progress. Navigation is handled through "Next" and "Back" buttons, which conditionally render the appropriate form step component. A visual progress bar provides feedback to the user on their current position in the process. Upon completion, the collected data is persisted to a Firestore database.
Core Architecture
The system is built around a parent-child component architecture. The MultiStepForm component acts as the container and controller, managing the application's state and logic. It conditionally renders one of four child components, each representing a step in the form.
Sources: src/components/MultiStepForm.jsx:2-239, src/App.js:3-5
This diagram illustrates the component hierarchy.
The visual presentation of the steps is handled by a sliding container. All step components are rendered simultaneously, but a CSS transform property is used to show only the active step. The form-content container has a width of 400%, and its translateX position is adjusted based on the current step state.
Sources: src/styles/MultiStepForm.css:55-58, src/components/MultiStepForm.jsx:204-206
State Management
State is centralized within the MultiStepForm component using React's useState hook. This ensures a single source of truth for the form's data, current step, validation errors, and submission status.
Sources: src/components/MultiStepForm.jsx:11-26
| State Variable | Type | Description |
|---|---|---|
step | Number | Tracks the current active step (1-4). Initialized to 1. |
formData | Object | Stores all user-entered data from all steps. |
errors | Object | Holds validation error messages for the current step's fields. |
loading | Boolean | Indicates if the form submission to Firebase is in progress. |
Sources: src/components/MultiStepForm.jsx:11-26
The formData object has the following structure:
{
name: "",
email: "",
phoneNumber: "",
address: "",
city: "",
state: "",
postalCode: "",
cardNumber: "",
expiryDateMonth: "",
expiryDateYear: "",
cvv: "",
}
Sources: src/components/MultiStepForm.jsx:13-25
Navigation Logic
Navigation between steps is controlled by three key functions within MultiStepForm.jsx. These functions are passed as props to the child step components.
| Function | Description |
|---|---|
handleNext() | Validates the current step. If valid, it increments the step state by one. |
handleBack() | Decrements the step state by one. No validation is performed. |
handleSubmit() | Validates the final step, sets loading state, and sends formData to Firebase. |
Sources: src/components/MultiStepForm.jsx:27-38, src/components/MultiStepForm.jsx:134-154
The following flowchart shows the user's navigation path through the form.
Step Components Interaction
Each step component (PersonalInfo, AddressDetails, etc.) is a stateless (or presentational) component. It receives the current form data and event handlers (handleChange, handleNext, handleBack) as props from MultiStepForm. When a user interacts with an input, the handleChange function updates the centralized formData state in the parent.
The diagram below shows the sequence of events when a user completes the first step.
Validation
Validation is performed within the validateStep(step) function in MultiStepForm.jsx. It checks for required fields and valid formats based on the step being validated. If any validation rule fails, an error message is added to the errors state object, which is then passed to the child component to display next to the relevant field.
Sources: src/components/MultiStepForm.jsx:52-132
| Step | Field | Validation Rule | Error Message |
|---|---|---|---|
| 1 | name | Must not be empty/whitespace. | "Name is required" |
| 1 | email | Must not be empty and must match regex /\S+@\S+\.\S+/. | "Email is required", "Email is invalid" |
| 1 | phoneNumber | Must not be empty and must match regex /^\d{10}$/. | "Phone Number is required", "Enter 10 digit phone Number" |
| 2 | address | Must not be empty/whitespace. | "Address is required" |
| 2 | city | Must not be empty/whitespace. | "City is required" |
| 2 | state | Must not be empty/whitespace. | "State is required" |
| 2 | postalCode | Must not be empty and must match regex /^\d{5,6}$/. | "Postal Code is required", "Postal Code is invalid" |
| 3 | cardNumber | Must not be empty and must match regex /^\d{16}$/. | "Card Number is required", "Enter 16 Digit Card Number" |
| 3 | expiryDateMonth | Must not be empty. | "Expiry Month is required" |
| 3 | expiryDateYear | Must not be empty. | "Expiry Year is required" |
| 3 | cvv | Must not be empty and must match regex /^\d{3}$/. | "CVV is required", "CVV is invalid" |
Sources: src/components/MultiStepForm.jsx:55-129
Data Submission
The final step is handled by the handleSubmit function. It is triggered from the ReviewSubmit component. The function sets a loading state to true, which disables the submit button and can show a spinner. It then attempts to write the formData object to a Firestore collection named formDetails. The react-toastify library is used to provide user feedback on the outcome of the submission.
Sources: src/components/MultiStepForm.jsx:134-154, src/firebase.js:3-14, src/components/formsteps/ReviewSubmit.jsx:51-57
This sequence diagram illustrates the submission process.
Conclusion
The multi-step navigation is a well-encapsulated system driven by the MultiStepForm component. It uses centralized state management to control the user's journey through a series of data entry steps. Key features include step-by-step validation, clear visual feedback via a progress bar and sliding transitions, and a final submission process integrated with Firebase. This architecture effectively decouples the form logic from the individual step components, making the system maintainable and scalable.