Component: ReviewSubmit
Relevant source files
The following files were used as context for generating this wiki page:The ReviewSubmit component is the final step (Step 4) in the application's multi-step form. Its primary purpose is to provide the user with a comprehensive summary of all the information they have entered in the preceding steps: Personal Information, Address Details, and Payment Information. This allows the user to review their data for accuracy before final submission.
This component is purely presentational, receiving all its data and handler functions as props from its parent, MultiStepForm. It displays the collected data in distinct sections and provides two main actions: navigating back to the previous step to make corrections or submitting the form data to the backend. It also handles a visual loading state to give feedback to the user during the submission process.
Sources: src/components/formsteps/ReviewSubmit.jsx, src/components/MultiStepForm.jsx:190-197
Component Architecture
The ReviewSubmit component is a functional React component that receives its state and behavior via props from the MultiStepForm parent component. It does not manage its own state.
Sources: src/components/formsteps/ReviewSubmit.jsx:4, src/components/MultiStepForm.jsx:190-197
Component Props
The component's behavior is controlled entirely by the props passed from MultiStepForm.
| Prop | Type | Description | Source File |
|---|---|---|---|
formData | Object | An object containing all the data collected from the form steps (name, email, address, payment details, etc.). | src/components/formsteps/ReviewSubmit.jsx:4 |
handleBack | Function | A callback function triggered by the "GO BACK" button. It navigates the user to the previous form step (Step 3). | src/components/formsteps/ReviewSubmit.jsx:4, 61 |
handleSubmit | Function | A callback function triggered by the "SUBMIT" button. It initiates the data submission process. | src/components/formsteps/ReviewSubmit.jsx:4, 64 |
loading | Boolean | A boolean flag that indicates whether the form submission is in progress. When true, the "SUBMIT" button is disabled and shows a spinner. | src/components/formsteps/ReviewSubmit.jsx:4, 66 |
Sources: src/components/formsteps/ReviewSubmit.jsx:4-18, src/components/MultiStepForm.jsx:190-197
Data Display and Masking
The component receives the entire formData object and destructures it to display the user's information. For security purposes, sensitive payment information is masked before being rendered.
- Card Number: Only the last 4 digits are shown.
- CVV: Masked completely as
***.
The following diagram illustrates the data flow from the parent component into the ReviewSubmit UI.
This diagram shows how formData is passed to ReviewSubmit, where it's destructured and sensitive fields are masked before display.
Sources: src/components/formsteps/ReviewSubmit.jsx:5-20
Here is the code snippet responsible for masking the payment details:
// src/components/formsteps/ReviewSubmit.jsx:19-20
const maskedCardNumber = `**** **** **** ${cardNumber.slice(-4)}`;
const maskedCVV = `***`;
Sources: src/components/formsteps/ReviewSubmit.jsx:19-20
User Actions and Submission Flow
The component features two primary user actions, handled by functions passed down from MultiStepForm.
Navigation
- GO BACK: Clicking this button invokes the
handleBackfunction from theMultiStepFormparent, which decrements thestepstate, taking the user back to thePaymentInfocomponent.
Sources: src/components/formsteps/ReviewSubmit.jsx:60-62, src/components/MultiStepForm.jsx:41-43
Form Submission
- SUBMIT: Clicking this button triggers the
handleSubmitfunction inMultiStepForm. This function sets theloadingstate totrue, which disables the button inReviewSubmitand displays a spinner. It then attempts to save theformDatato a Firestore collection namedformDetails.
The sequence diagram below details the entire submission process.
This diagram shows the sequence of events from the user clicking submit to the data being stored in Firestore and the UI being updated.
Sources: src/components/formsteps/ReviewSubmit.jsx:63-68, src/components/MultiStepForm.jsx:132-154, src/firebase.js
Styling
The visual presentation of the ReviewSubmit component is defined in src/styles/ReviewSubmit.css.
Key styling elements include:
- A container (
.review-submit-container) with a white background, rounded corners, and a box shadow. - Sections (
.review-section) for grouping related information with clear headings. - A flexbox layout for the action buttons (
.button-group) to position them at opposite ends. - Distinct styles for the "GO BACK" (
.go-back-btn) and "SUBMIT" (.submit-btn) buttons. - A CSS keyframe animation (
@keyframes spin) for the loading spinner (.spinner) that is displayed on the submit button when it's in a disabled state.
Sources: src/styles/ReviewSubmit.css
Summary
The ReviewSubmit component serves as the final confirmation gateway in the multi-step form. It effectively summarizes user data, enhances security by masking sensitive information, and provides clear, final actions for the user. Its dependency on the parent MultiStepForm for state and logic makes it a well-encapsulated, reusable view component that focuses solely on presenting data and delegating user actions.
Sources: src/components/formsteps/ReviewSubmit.jsx, src/components/MultiStepForm.jsx