Search bar to lookup vin numbers

[mlee001]

User Story: As a customer, I want a VIN search block to quickly retrieve recall information from an external API. The search block should perform validations on the VIN input before submission to ensure data accuracy and integrity.

Acceptance Criteria:

1. VIN Input Field:
   • The search block should include a clear and prominently displayed input field for entering the VIN.
2. VIN Validation Rules:
   • Implement the following VIN validation rules before submission:
     • The VIN input should consist of exactly 17 alphanumeric characters.
     • The VIN number follows the Volvo brands structure for North America and Canada
     • The Vin number structure for the US is as followed
       • First character is a 1 or 4
       • Second character is a V, v, R or r
       • Third character is a 1, 2, 3, 4, 5, k or K
       • Forth character is between B-C,E-H,J-N,R-S,V-Y,b-c,e-h,j-n,r-s or v-y
       • Any letter or number for the the remaining 13 characters
     • The Vin number structure for the US is as followed
       • First character is a 2
       • Second character is a V, v, N, n, P or p
       • Third character is a 1, 2, 4, 5, C, c, V or v
       • Forth character is between B-C, E-H, J-N, R-S, V-Y, b-c, e-h, j-n, r-s, v-y
       • Any letter or number for the the remaining 13 characters
3. Feedback on Validation Errors:
   • If the VIN input does not meet the validation criteria, provide clear and descriptive error messages to the user, indicating which validation rules were not met.
4. Search Button:
   • Include a "Search" button to initiate the VIN search.
5. Loading Indicator:
   • While waiting for the API response, display a loading indicator or message to inform the user that the search is in progress.
6. Clear Button:
   • Include an X within the search bar to allow the user to clear the VIN input and reset the search block for a new query.

Definition of Done:

• The VIN search block has been implemented
• Validation rules as stated work
• The customer can clear the search form
• The search shows a loading indicator while waiting for the response

Out of scope

• Integration with the API and the corresponding response
• In Search Page the only input information required is the VIN number field, and no additional search fields are considered.
• The inclusion of an autocomplete feature for search is not within the scope of this project.

Vin number Notes For Mack and Volvo the positions of VIN are identified from left to right, as follows:

Country of Manufacture: 1 = United States 4 = United States 2 = Canada

Manufacturer M = Mack Trucks, Inc. V = Volvo Trucks North America

Type: 1 = Complete Vehicle 2 = Incomplete Vehicle 4 = Complete CONV 5 = Incomplete CONV

Series/Make: K = VHD (Volvo) N = VNL (Volvo) R = VAH (Volvo) W = VNR (Volvo) AN = Anthem (Mack) GR = Granite (Mack) LR = LR (Mack) PN = Pinnacle (Mack) TE = Terrapro (Mack) MD = MD (Mack)

Nova NOVA BUS_VIN CODE_CMD4356W1.pdf

Prevost Prevost VIN decoder.pdf

Vin number decoder: https://vpic.nhtsa.dot.gov/decoder/

[BeckyMedlin]

Nova Bus and Prevost VIN information: NOVA BUS_VIN CODE_CMD4356W1.pdf Prevost VIN decoder.pdf

[Andrei-Boiangiu]

confirmed as done as tested on

VolvoTrucks:

English - https://471-nhtsa-accordion-styling--vg-volvotrucks-us--hlxsites.hlx.page/recalls/ French - https://471-nhtsa-accordion-styling--vg-volvotrucks-us--hlxsites.hlx.page/fr/recalls/

and Mack Trucks https://452-nhtsa-setup--vg-macktrucks-com--hlxsites.hlx.page/nhtsa/