ORV2-3412 - FE: Staff Search for Permit by VIN (#1815)

Co-authored-by: GlenAOT <[email protected]>

Author: glen-aot

frontend/src/common/components/header/components/SearchFilter.tsx

@@ -24,6 +24,7 @@ import { getDefaultRequiredVal } from "../../../helpers/util";
 import { IDIR_ROUTES } from "../../../../routes/constants";
 import { Nullable } from "../../../types/common";
 import {
+  SEARCH_BY_FILTERS,
   SearchByFilter,
   SearchEntity,
   SearchFields,
@@ -34,6 +35,7 @@ import OnRouteBCContext from "../../../authentication/OnRouteBCContext";
 const SEARCH_BY_PERMIT_OPTIONS = [
   { label: "Permit Number", value: "permitNumber" },
   { label: "Plate Number", value: "plate" },
+  { label: "VIN (last 6 digits)", value: "vin" },
 ];
 
 const SEARCH_BY_COMPANY_OPTIONS = [
@@ -118,7 +120,9 @@ export const SearchFilter = ({
     reValidateMode: "onBlur",
   });
 
-  const { handleSubmit, setValue, control } = formMethods;
+  const { handleSubmit, setValue, control, watch } = formMethods;
+
+  const searchByFilter = watch("searchByFilter");
 
   const handleSearchEntityChange = (searchEntity: string) => {
     setValue("searchEntity", searchEntity as SearchEntity);
@@ -128,11 +132,13 @@ export const SearchFilter = ({
       "searchByFilter",
       updatedSearchByOptions[0].value as SearchByFilter,
     );
+    setValue("searchString", "");
   };
 
   const handleSearchByChange = (event: SelectChangeEvent) => {
     const searchBy = event.target.value;
     setValue("searchByFilter", searchBy as SearchByFilter);
+    setValue("searchString", "");
   };
 
   const handleSearchValueChange = (
@@ -142,6 +148,12 @@ export const SearchFilter = ({
     setValue("searchString", searchString);
   };
 
+  const handleSearchValueKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter") {
+      handleSubmit(onSubmit)();
+    }
+  };
+
   const onSubmit = (data: FieldValues) => {
     const searchFields = Object.entries(data)
       .map(([key, value]) => `${key}=${value}`)
@@ -231,7 +243,11 @@ export const SearchFilter = ({
                     className="search-by__value"
                     value={value}
                     onChange={handleSearchValueChange}
-                    inputProps={{ maxLength: 100 }}
+                    onKeyDown={handleSearchValueKeyDown}
+                    inputProps={{
+                      maxLength:
+                        searchByFilter === SEARCH_BY_FILTERS.VIN ? 6 : 100,
+                    }}
                   />
                 )}
               />

frontend/src/features/idir/search/pages/IDIRSearchResultsDashboard.tsx

@@ -25,6 +25,9 @@ const getBannerText = (searchFields: SearchFields): string => {
   if (searchByFilter === SEARCH_BY_FILTERS.PERMIT_NUMBER) {
     return `Search Results: Permit # ${searchString}`;
   }
+  if (searchByFilter === SEARCH_BY_FILTERS.VIN) {
+    return `Search Results: VIN ${searchString}`;
+  }
   return "";
 };
 

frontend/src/features/idir/search/table/PermitSearchResultColumnDef.tsx

@@ -97,6 +97,13 @@ export const PermitSearchResultColumnDef = (
     sortingFn: "alphanumeric",
     size: 20,
   },
+  {
+    accessorKey: "vin",
+    header: "VIN (last 6 digits)",
+    enableSorting: true,
+    sortingFn: "alphanumeric",
+    size: 20,
+  },
   {
     accessorKey: "legalName",
     header: "Company Name",

frontend/src/features/idir/search/types/types.ts

@@ -19,6 +19,7 @@ export const SEARCH_BY_FILTERS = {
   COMPANY_NAME: "companyName",
   ONROUTEBC_CLIENT_NUMBER: "onRouteBCClientNumber",
   APPLICATION_NUMBER: "applicationNumber",
+  VIN: "vin",
 } as const;
 
 export type SearchByFilter =