Review and Submit
Relevant source files
The following files were used as context for generating this wiki page:The "Review and Submit" feature is the final step (Step 4) of the multi-step form process. Its primary purpose is to provide the user with a consolidated view of all the information they have entered in the preceding steps: Personal Information, Address Details, and Payment Information. This allows for a final verification before the data is persisted.
This component is responsible for displaying the data in a read-only format, masking sensitive payment details, and handling the final submission action. The submission logic involves sending the complete form data to a Firebase Firestore database and providing feedback to the user about the outcome of the operation. The overall state management, navigation, and submission logic are handled by the parent MultiStepForm component.
Sources: src/components/MultiStepForm.jsx:1-255, src/components/formsteps/ReviewSubmit.jsx:1-74
Architecture and Component Flow
The ReviewSubmit component is one of four step components rendered conditionally by the main MultiStepForm component. MultiStepForm acts as a stateful container, managing the current step, the form data, and validation errors.
Sources: src/components/MultiStepForm.jsx:11-30, src/App.js:5-13
The following diagram illustrates the component hierarchy leading to the Review and Submit screen.
This diagram shows how MultiStepForm.jsx conditionally renders the ReviewSubmit.jsx component when the form's current step is 4.
Sources: src/components/MultiStepForm.jsx:214-249
ReviewSubmit Component Details
The ReviewSubmit.jsx component is a functional React component that receives all necessary data and functions as props from its parent, MultiStepForm.
Props
| Prop Name | Type | Description | Source File |
|---|---|---|---|
formData | Object | An object containing all the data collected from the previous form steps. | src/components/formsteps/ReviewSubmit.jsx:4 |
handleBack | Function | A callback function from MultiStepForm to navigate to the previous step (Step 3). | src/components/formsteps/ReviewSubmit.jsx:4, src/components/MultiStepForm.jsx:40-42 |
handleSubmit | Function | A callback function from MultiStepForm to initiate the data submission process to Firebase. | src/components/formsteps/ReviewSubmit.jsx:4, src/components/MultiStepForm.jsx:144-168 |
loading | Boolean | A state variable from MultiStepForm indicating if the submission is in progress. Used to disable the submit button and show a spinner. | src/components/formsteps/ReviewSubmit.jsx:4, src/components/MultiStepForm.jsx:29 |
Data Display and Masking
The component organizes the formData into three distinct sections for clarity: Personal Information, Address Details, and Payment Information. To enhance security, sensitive payment details are masked before being displayed to the user.
- Card Number: Only the last 4 digits are shown (e.g.,
**** **** **** 1234). - CVV: Completely masked (e.g.,
***).
Sources: src/components/formsteps/ReviewSubmit.jsx:19-20, src/components/formsteps/ReviewSubmit.jsx:25-50
// src/components/formsteps/ReviewSubmit.jsx:19-20
const maskedCardNumber = `**** **** **** ${cardNumber.slice(-4)}`;
const maskedCVV = `***`;
This snippet from ReviewSubmit.jsx shows the implementation of data masking for the credit card number and CVV.
Submission Process
The submission process is initiated when the user clicks the "SUBMIT" button. This triggers the handleSubmit function within the MultiStepForm component.
Sources: src/components/formsteps/ReviewSubmit.jsx:65-71, src/components/MultiStepForm.jsx:144-168
Submission Sequence
The following sequence diagram details the entire submission flow, from the user's click to the final UI update.
This diagram illustrates the sequence of events during form submission, involving UI components, state management, database interaction, and user notification.
Sources: src/components/MultiStepForm.jsx:144-168, src/firebase.js:1-15, src/components/formsteps/ReviewSubmit.jsx:65-71
handleSubmit Logic Flow
The handleSubmit function in MultiStepForm.jsx orchestrates the submission.
This flowchart breaks down the logic inside the handleSubmit function, including the loading state management, asynchronous database call, and success/error handling.
Sources: src/components/MultiStepForm.jsx:144-168
Database Interaction
The form data is saved to a Firestore collection named formDetails. The connection to Firebase and the necessary functions (initializeApp, getFirestore, collection, addDoc) are configured in src/firebase.js.
Sources: src/firebase.js:1-15, src/components/MultiStepForm.jsx:148
User Navigation
The ReviewSubmit component provides two navigation options:
- GO BACK: This button calls the
handleBackfunction passed fromMultiStepForm. This function decrements thestepstate variable, taking the user back to thePaymentInfostep (Step 3) to make changes. - SUBMIT: As detailed above, this initiates the final submission. During the submission process (
loadingistrue), this button is disabled to prevent multiple submissions. A spinner is displayed inside the button to indicate activity.
Sources: src/components/formsteps/ReviewSubmit.jsx:62-72, src/components/MultiStepForm.jsx:40-42, src/styles/ReviewSubmit.css:78-82
Summary
The "Review and Submit" feature serves as the critical final checkpoint in the application's data collection workflow. It is implemented through the ReviewSubmit presentational component, which displays a summary of user-entered data, and the MultiStepForm container component, which manages the submission logic, state, and interaction with the Firebase backend. By masking sensitive data and providing clear user feedback via toast notifications and loading indicators, it ensures a secure and user-friendly conclusion to the form-filling process.