diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue index eb203ace2..e880b1534 100644 --- a/src/layouts/insurance-company/insurance-company.vue +++ b/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 -defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); -defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)); -defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED)); -defineRule( - "email-address-format", - regex( - /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/, - errorMessages.EMAIL_ADDRESS_FORMAT - ) -); -defineRule("vin-required", required(errorMessages.VIN_REQUIRED)); -defineRule("vin-format", regex(/^[a-hA-Hj-nJ-NpPr-zR-Z0-9]{17}$/, errorMessages.VIN_FORMAT)); +// MAPPNG +const termMapping = [ + { + term: "1ST", + altTerm: "FIRST", + }, + { + term: "FIRST", + altTerm: "1ST", + }, + { + term: "AAA", + 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: [], - selectedParentAccount: "", + searchableInsuranceCompanyList: [], + originalList: [], }; }, - computed: { - insuranceCompanyListTags() { - return this.insuranceCompanyList.map((item) => { - return item.accountName; - }); - }, - }, methods: { arePagePrerequisitesValid() { return store.getters.vehicle.carId !== null; }, - handleAutocompleteSelect(value) { - this.selectedQuery = value; + findMatches(request, response) { + 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.findMatches, + position: { + my: "left top+6", + }, + minLength: 0, // Necessary to display menu when clearing input - $("#autocomplete").autocomplete({ - source: this.insuranceCompanyListTags, - 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"), - re = new RegExp("(" + this.value + ")", "i"); - w.html((i, html) => html.replace(re, "$1")); - }, 5); - }, - select: function (event, ui) { - select(ui.item.value); - }, - }); - }, - watch: { - selectedQuery(newValue, oldValue) { - if (oldValue.length > 0 && newValue.length === 0) { - $("#autocomplete").autocomplete("search", ""); - } - }, + // Bold matching letters as you type in the input + search: function (event, ui) { + setTimeout(() => { + let w = $(this).autocomplete("widget").find("div"); + let regExpString = "(" + this.value + ")"; + let re = new RegExp(regExpString, "i"); + w.html((i, html) => + html.replace(re, "$1") + ); + }, 5); + }, + select: function (event, ui) { + select(ui.item.value); + }, + }); + }, 0); }, 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 {