RayanImran
commented
1 month ago Changes Needed:
- Vehicle Year Dropdown:
The vehicle year dropdown should have a range starting from the year 2000 to prevent unrealistic or negative values. This will make the selection more practical for users.
- Vehicle Make & Model Dropdowns:
The vehicle make field should have an arrow dropdown option, allowing users to either search or click and select from a predefined list. The same applies to the vehicle model field. Once a user selects the vehicle make, the vehicle model dropdown should dynamically update to display models relevant to the selected make. There is a bug where selecting a make (e.g., typing “For” and selecting “Ford”) does not populate the input field correctly. This needs to be fixed to ensure that the selection from the dropdown properly populates the vehicle make field.
- Required Fields Indication:
Please add a star (*) on the required fields, such as Vehicle Year, Vehicle Make, and Vehicle Model, to indicate they are mandatory. Make other fields optional where applicable, for example, dealership name, stock number, VIN, etc.
- Missing Features from Lemon Squad Example:
We are missing some additional sections present in the example image (Lemon Squad form). We should incorporate similar elements like the “Type of Vehicle” option (Standard/Exotic/Commercial/Motorcycle/RV), which should be categorized properly.
- Buyer Information:
We need to add a buyer’s information section, including their name, email, and phone number. There's no need to include credit card details, but this information is essential for the form completion.
Let me know if you need any more details or clarifications on these changes!
This pull request includes a series of improvements to the vehicle inspection form and adds Google Maps API integration. The key changes and updates made in this PR are as follows:
Google Maps API Integration:
Integrated the Google Maps Places Autocomplete API for the address input field in the vehicle inspection form. Used the useJsApiLoader hook from the @react-google-maps/api library to dynamically load the API and handle the autocomplete feature for better user experience when entering addresses. Added functionality to fetch and display formatted addresses in the form once a place is selected from the dropdown suggestions. Ensured that the Google API key is securely stored using environment variables, following best practices with Vite, by moving the key to a .env file and accessing it through import.meta.env.VITE_GOOGLE_MAPS_API_KEY. Form Improvements:
Added dropdowns for vehicle make and model using the Car Query API, with filtering logic for user-friendly suggestions. When the user selects a vehicle make, the corresponding models are fetched, and the model dropdown is dynamically updated. Ensured that changing the make resets the model field to avoid incorrect selections. Implemented validation for form fields, ensuring that required inputs such as year, make, model, seller name, contact number, and address are properly validated before submission. UI Enhancements:
Updated the styling of the checkboxes for add-ons (CARFAX and Verbal Report) to match the overall form design. The checkboxes now have a clean, modern look with hover effects and color changes upon selection. Improved the dropdown styling for vehicle make and model suggestions, ensuring consistency with the overall form aesthetics. Security Considerations:
Secured the Google Maps API key by storing it in an environment variable and ensuring it is not exposed in the codebase or on GitHub. Error Fixes:
Resolved an issue where process was not defined by refactoring the code to remove unnecessary references, ensuring compatibility with the current front-end setup. This pull request is ready for review, and feedback on both the code structure and UI/UX improvements is appreciated. Let me know if further refinements are needed.