jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1810 from Safelite/CSR-1891-abstract-autocomplete-to-component

Browse source 
Csr 1891 abstract autocomplete to component
This commit is contained in:
bmauger 2024-03-26 14:32:01 -04:00 committed by GitHub
commit a878edab19
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 210 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
jest.config.js
View file

@ -26,6 +26,7 @@ module.exports = {
"!src/layouts/payment-pia-return/*.vue", // Temp test exclusion while in development
"!src/layouts/insurance/*.vue", // Temp test exclusion while in development
"!src/layouts/insurance-company/*.vue", // Temp test exclusion while in development
"!src/layouts/insurance-company/insurance-company-question/*.vue", // Temp test exclusion while in development
// END
], // ! means exclude from coverage.
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

3
src/layouts/insurance-company/insurance-company-question.spec.js Normal file
View file

@ -0,0 +1,3 @@
describe("insurance-company-question.vue", () => {
it.todo("Some test for the future");
});

191
src/layouts/insurance-company/insurance-company-question.vue Normal file
View file

@ -0,0 +1,191 @@
<template>
<textboxQuestion
v-model="selectedAccountNumber"
customInputId="autocomplete"
class="mb-4 mt-5"
cmsWidgetName="InsuranceCoQuestionWidget"
includeSearchIcon />
</template>
<script>
// Components
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { storeActions } from "@/constants/store-actions";
import { Form, defineRule } from "vee-validate";
import baseMixin from "@/mixins/base-mixin.js";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import $ from "jquery";
// MAPPNG
const termMapping = [
{
term: "1ST",
altTerm: "FIRST",
},
{
term: "FIRST",
altTerm: "1ST",
},
{
term: "AAA",
altTerm: "American",
},
];
export default {
name: "insurance-company-question",
props: {
originalList: Array,
modelValue: String,
},
data() {
return {
selectedAccountName: "",
};
},
computed: {
selectedAccountNumber: {
get: function () {
if (this.selectedAccountName.length > 0) {
return this.selectedAccountName;
} else {
return this.modelValue?.toString();
}
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
searchableInsuranceCompanyList() {
return this.originalList.map((insuranceCompany) => {
insuranceCompany.altTerms = "";
termMapping.forEach((matchingTerm) => {
if (
insuranceCompany.accountName
.toUpperCase()
.includes(matchingTerm.term.toUpperCase())
) {
insuranceCompany.altTerms =
insuranceCompany.altTerms + matchingTerm.altTerm?.toUpperCase() + " ";
}
});
return insuranceCompany;
});
},
},
methods: {
findMatches(request, response) {
const matches = [];
const term = request?.term?.toUpperCase();
this.searchableInsuranceCompanyList.forEach((company, index) => {
if (
company.accountName.indexOf(term) !== -1 ||
company.altTerms.indexOf(term) !== -1
) {
matches.push(company.accountName);
}
});
response(matches);
},
selectParentAccountNumber(parentAccountName) {
if (!this.searchableInsuranceCompanyList) {
console.error("No insurance companies found");
return;
}
const selectedItem = this.searchableInsuranceCompanyList.filter((item) => {
return item.accountName === parentAccountName;
});
if (selectedItem) {
this.selectedAccountName = parentAccountName;
this.selectedAccountNumber = selectedItem[0].parentAccountNumber;
} else {
console.error("Error locating " + parentAccountName);
}
},
},
mounted() {
const select = this.selectParentAccountNumber;
setTimeout(() => {
$("#autocomplete").autocomplete({
source: this.findMatches,
position: {
my: "left top+6",
},
minLength: 0, // Necessary to display fmenu 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 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: {
textboxQuestion,
},
};
</script>
<style lang="scss">
ul {
&.ui-autocomplete {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0.25rem;
background: $white;
border: 1px solid $gray;
border-radius: 0.25rem;
height: auto;
max-height: 50%;
overflow: auto;
li {
&:hover,
.ui-state-active {
background-color: $gray-100;
cursor: pointer;
}
.ui-menu-item-wrapper {
border: 1px solid transparent;
border-radius: 2px;
padding-left: 0.25rem;
span {
font-weight: 600;
}
&.ui-state-active {
border: 1px solid $gray-200;
border-radius: 2px;
font-weight: 600;
}
}
}
}
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style>

3
src/layouts/insurance-company/insurance-company-spec.js
View file

@ -0,0 +1,3 @@
describe("insurance-company.vue", () => {
it.todo("Some test for the future");
});

163
src/layouts/insurance-company/insurance-company.vue
View file

@ -10,12 +10,10 @@
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
<textboxQuestion
v-model="selectedQuery"
customInputId="autocomplete"
class="mb-4 mt-5"
cmsWidgetName="InsuranceCoQuestionWidget"
includeSearchIcon />
<insurance-company-question
v-model="parentAccountNumber"
:originalList="originalList" />
<navbar
cmsWidgetName="FunnelFooterWidget"
@ -34,8 +32,8 @@
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import insuranceCompanyQuestion from "@/layouts/insurance-company/insurance-company-question";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -46,23 +44,6 @@ import baseMixin from "@/mixins/base-mixin.js";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import store from "@/store";
import $ from "jquery";
// MAPPNG
const termMapping = [
{
term: "1ST",
altTerm: "FIRST",
},
{
term: "FIRST",
altTerm: "1ST",
},
{
term: "AAA",
altTerm: "American",
},
];
export default {
name: "insurance-company",
@ -89,55 +70,24 @@ 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.originalList = resultMap.insuranceCompanyList;
vm.searchableInsuranceCompanyList = searchableInsuranceCompanyList;
});
},
data() {
return {
searchableInsuranceCompanyList: [],
parentAccountNumber: this.parentAccountNumberFromStore(),
originalList: [],
selectedParentAccount: "",
};
},
methods: {
arePagePrerequisitesValid() {
return store.getters.vehicle.carId !== null;
parentAccountNumberFromStore() {
return store?.order?.payment?.parentAccountNumber;
},
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);
arePagePrerequisitesValid() {
return store.getters.order.payment.isInsurance === true;
},
backButtonAction() {
// Go back to Quote page
@ -149,112 +99,23 @@ export default {
await this.dispatchStoreAction(
this.storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
this.selectedParentAccount,
this.parentAccountNumber,
false
);
navigateToHeritageFunnel({
shouldSaveSession: true,
pageNameToLog: "insurance-company",
loadingModal: this.$refs.loadingModal,
});
},
selectParentAccountNumber(parentAccountName) {
if (!this.searchableInsuranceCompanyList) {
console.error("No insurance companies found");
return;
}
var selectedItem = this.searchableInsuranceCompanyList.filter((item) => {
return item.accountName === parentAccountName;
});
if (selectedItem) {
this.selectedParentAccount = selectedItem[0].parentAccountNumber;
} else {
console.error("Error locating " + parentAccountName);
}
},
},
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
// 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,
navbar,
funnelSubHeader,
textboxQuestion,
Form,
loadingModal,
insuranceCompanyQuestion,
},
};
</script>
<style lang="scss">
ul {
&.ui-autocomplete {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0.25rem;
background: $white;
border: 1px solid $gray;
border-radius: 0.25rem;
height: 50%;
overflow: auto;
li {
&:hover,
.ui-state-active {
background-color: $gray-100;
cursor: pointer;
}
.ui-menu-item-wrapper {
border: 1px solid transparent;
border-radius: 2px;
padding-left: 0.25rem;
span {
font-weight: 600;
}
&.ui-state-active {
border: 1px solid $gray-200;
border-radius: 2px;
font-weight: 600;
}
}
}
}
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style>