Merge pull request #1799 from Safelite/CSR-1891-insurance-search-page
CSR-1891 insurance search page
This commit is contained in:
bmauger
GitHub
commit
f8cce48f29
1 changed files with 76 additions and 52 deletions
|
|
@ -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, "<span>$1</span>"));
|
||||
}, 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, "<span style='font-weight: bold;'>$1</span>")
|
||||
);
|
||||
}, 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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue