Forms & Validation
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The AVP Supercars project utilizes a decentralized approach to user input, focusing on lead generation through external communication channels like WhatsApp and Email rather than server-side database persistence. The primary input mechanism is the RequestForm, which gathers rental requirements and formats them into pre-filled messages.
Forms within the application serve three main purposes:
- Lead Capture: Collecting user details for rental requests via
components/RequestForm.tsx. - Search & Discovery: Filtering the vehicle inventory through
components/FleetFilters.tsx. - Quick Contact: Providing immediate access to support via floating action components.
Sources: components/RequestForm.tsx, components/FleetFilters.tsx, components/WhatsAppFloat.tsx
Request Management System
The core of the user interaction is the request system, which transitions local component state into external application protocols (wa.me for WhatsApp and mailto: for Email).
Data Structure and State
The RequestForm component maintains a local FormState object to track user input across multiple fields.
| Field | Type | Description |
|---|---|---|
name | string | Full name of the requester |
phone | string | Contact phone number |
email | string | User email address |
car | string | Desired vehicle model |
startDate | string | Rental start date (YYYY-MM-DD) |
endDate | string | Rental end date (YYYY-MM-DD) |
location | string | Delivery city/location |
message | string | Additional requirements or notes |
Sources: components/RequestForm.tsx:7-16
Data Flow for External Delivery
Instead of a traditional POST submission to an API, the form data is processed via useMemo hooks to generate URI-encoded strings for external communication.
The diagram shows the transformation of local React state into URI-encoded strings used by external protocols.
Sources: components/RequestForm.tsx:34-62
Input Implementation
Field Components
The system uses specialized functional components for rendering input fields, ensuring consistent styling with a dark-themed UI.
- Field: A standard text input for short strings (Name, Phone, etc.).
- Area: A textarea for longer messages, set with a minimum height of 110px.
Sources: components/RequestForm.tsx:109-152
Pre-filling Logic
The RequestForm accepts a defaultCar prop. This is utilized in the dynamic car detail pages to pre-fill the "Car" field when a user navigates from a specific vehicle listing.
// From app/fleet/[slug]/page.tsx
<a href={`/contact?car=${encodeURIComponent(`${car.brand} ${car.model}`)}`}>
Request this car
</a>
Sources: app/fleet/[slug]/page.tsx:27-29, components/RequestForm.tsx:19-21
Search and Filter Logic
The FleetFilters component implements client-side validation and filtering for the vehicle inventory. It combines text-based search with category-based selection.
Filtering Logic Flow
The filtering system uses useMemo to prevent unnecessary recalculations and useEffect to propagate changes back to the parent FleetPage.
The diagram illustrates the logic used to filter the car list based on user queries and category selection.
Sources: components/FleetFilters.tsx:26-40
Filter Fields
| Feature | Implementation | File |
|---|---|---|
| Text Search | q state matching brand, model, or tagline | FleetFilters.tsx |
| Category | cat state matching vehicle category | FleetFilters.tsx |
| Reset | Clears all filters and returns to "All" | FleetFilters.tsx |
Sources: components/FleetFilters.tsx:47-81
Validation Strategy
The project implements implied validation and placeholder-based guidance rather than strict form-level constraint validation (e.g., HTML5 required or schema-based validation).
- Format Guidance: Placeholders are used to suggest formats, such as
+33 ...for phones andYYYY-MM-DDfor dates. - Fallback Values: The
whatsappTextmemoized value uses logical OR operators to insert placeholders like[name]or[phone]if the form fields are empty. - Direct Communication: By offloading the final data entry to WhatsApp or Email, the project relies on the user to provide correct information during the direct chat or email draft phase.
Sources: components/RequestForm.tsx:36-43, components/RequestForm.tsx:87-92
Summary
The "Forms & Validation" system in the AVP Supercars project is designed for high-conversion lead generation. By utilizing React state and URI encoding, the application bridges the gap between a web interface and direct concierge communication via WhatsApp and Email. Filtering and search forms provide a responsive experience for navigating the fleet, while the request form ensures that all necessary rental parameters are gathered and formatted for immediate professional response.