Merge pull request #1799 from Safelite/CSR-1891-insurance-search-page

CSR-1891 insurance search page

src/layouts/insurance-company/insurance-company.vue

@@ -41,8 +41,6 @@ import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
-import { errorMessages } from "@/constants/error-messages";
-import { required, regex } from "@/helpers/validation-rules";
 import { Form, defineRule } from "vee-validate";
 import baseMixin from "@/mixins/base-mixin.js";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
@@ -50,19 +48,21 @@ import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigat
 import store from "@/store";
 import $ from "jquery";
 
-// DEFINE VALIDATION RULES
+// MAPPNG
-defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
+const termMapping = [
-defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
+    {
-defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+        term: "1ST",
-defineRule(
+        altTerm: "FIRST",
-    "email-address-format",
+    },
-    regex(
+    {
-        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
+        term: "FIRST",
-        errorMessages.EMAIL_ADDRESS_FORMAT
+        altTerm: "1ST",
-    )
+    },
-);
+    {
-defineRule("vin-required", required(errorMessages.VIN_REQUIRED));
+        term: "AAA",
-defineRule("vin-format", regex(/^[a-hA-Hj-nJ-NpPr-zR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));
+        altTerm: "American",
+    },
+];
 
 export default {
     name: "insurance-company",
@@ -88,31 +88,55 @@ export default {
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
+
+        const searchableInsuranceCompanyList = resultMap.insuranceCompanyList.map(
+            (insuranceCompany) => {
+                insuranceCompany.altTerms = "";
+
+                termMapping.forEach((matchingTerm) => {
+                    if (
+                        insuranceCompany.accountName
+                            .toUpperCase()
+                            .includes(matchingTerm.term.toUpperCase())
+                    ) {
+                        insuranceCompany.altTerms =
+                            insuranceCompany.altTerms + matchingTerm.altTerm?.toUpperCase() + " ";
+                    }
+                });
+
+                return insuranceCompany;
+            }
+        );
+
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.insuranceCompanyList = resultMap.insuranceCompanyList;
+            vm.originalList = resultMap.insuranceCompanyList;
+            vm.searchableInsuranceCompanyList = searchableInsuranceCompanyList;
         });
     },
     data() {
         return {
-            insuranceCompanyList: [],
+            searchableInsuranceCompanyList: [],
-            selectedParentAccount: "",
+            originalList: [],
         };
     },
-    computed: {
-        insuranceCompanyListTags() {
-            return this.insuranceCompanyList.map((item) => {
-                return item.accountName;
-            });
-        },
-    },
     methods: {
         arePagePrerequisitesValid() {
             return store.getters.vehicle.carId !== null;
         },
-        handleAutocompleteSelect(value) {
+        findMatches(request, response) {
-            this.selectedQuery = value;
+            const matches = [];
+            const term = request?.term?.toUpperCase();
+            this.originalList.forEach((company, index) => {
+                if (
+                    company.accountName.indexOf(term) !== -1 ||
+                    company.altTerms.indexOf(term) !== -1
+                ) {
+                    matches.push(company.accountName);
+                }
+            });
+            response(matches);
         },
         backButtonAction() {
             // Go back to Quote page
@@ -150,32 +174,30 @@ export default {
     },
     mounted() {
         const select = this.selectParentAccountNumber;
-
+        setTimeout(() => {
             $("#autocomplete").autocomplete({
-            source: this.insuranceCompanyListTags,
+                source: this.findMatches,
                 position: {
                     my: "left top+6",
                 },
                 minLength: 0, // Necessary to display menu when clearing input
+
                 // Bold matching letters as you type in the input
                 search: function (event, ui) {
                     setTimeout(() => {
-                    let w = $(this).autocomplete("widget").find("div"),
+                        let w = $(this).autocomplete("widget").find("div");
-                        re = new RegExp("(" + this.value + ")", "i");
+                        let regExpString = "(" + this.value + ")";
-                    w.html((i, html) => html.replace(re, "<span>$1</span>"));
+                        let re = new RegExp(regExpString, "i");
+                        w.html((i, html) =>
+                            html.replace(re, "<span style='font-weight: bold;'>$1</span>")
+                        );
                     }, 5);
                 },
                 select: function (event, ui) {
                     select(ui.item.value);
                 },
             });
-    },
+        }, 0);
-    watch: {
-        selectedQuery(newValue, oldValue) {
-            if (oldValue.length > 0 && newValue.length === 0) {
-                $("#autocomplete").autocomplete("search", "");
-            }
-        },
     },
     components: {
         funnelHeader,
@@ -197,6 +219,8 @@ ul {
         background: $white;
         border: 1px solid $gray;
         border-radius: 0.25rem;
+        height: 50%;
+        overflow: auto;
         li {
             &:hover,
             .ui-state-active {