Merge pull request #1793 from Safelite/CSR-1891-insurance-search-page
CSR-1891 insurance search page
This commit is contained in:
bmauger
GitHub
commit
f832f08029
14 changed files with 284 additions and 341 deletions
|
|
@ -25,6 +25,7 @@ module.exports = {
|
|||
"!src/layouts/payment/*.vue", // Temp test exclusion while in development
|
||||
"!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
|
||||
// END
|
||||
], // ! means exclude from coverage.
|
||||
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
||||
|
|
|
|||
28
package-lock.json
generated
28
package-lock.json
generated
|
|
@ -16,6 +16,8 @@
|
|||
"http-status-codes": "^2.1.4",
|
||||
"iframe-resizer": "^4.3.7",
|
||||
"jest-junit": "^13.0.0",
|
||||
"jquery": "^3.7.1",
|
||||
"jquery-ui": "^1.13.2",
|
||||
"maska": "^1.5.0",
|
||||
"vee-validate": "^4.5.7",
|
||||
"vue": "^3.0.0",
|
||||
|
|
@ -16173,6 +16175,19 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/jquery": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
|
||||
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
|
||||
},
|
||||
"node_modules/jquery-ui": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.13.2.tgz",
|
||||
"integrity": "sha512-wBZPnqWs5GaYJmo1Jj0k/mrSkzdQzKDwhXNtHKcBdAcKVxMM3KNYFq+iJ2i1rwiG53Z8M4mTn3Qxrm17uH1D4Q==",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.8.0 <4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/js-beautify": {
|
||||
"version": "1.14.0",
|
||||
"resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.0.tgz",
|
||||
|
|
@ -37364,6 +37379,19 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"jquery": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
|
||||
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
|
||||
},
|
||||
"jquery-ui": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.13.2.tgz",
|
||||
"integrity": "sha512-wBZPnqWs5GaYJmo1Jj0k/mrSkzdQzKDwhXNtHKcBdAcKVxMM3KNYFq+iJ2i1rwiG53Z8M4mTn3Qxrm17uH1D4Q==",
|
||||
"requires": {
|
||||
"jquery": ">=1.8.0 <4.0.0"
|
||||
}
|
||||
},
|
||||
"js-beautify": {
|
||||
"version": "1.14.0",
|
||||
"resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.0.tgz",
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@
|
|||
"http-status-codes": "^2.1.4",
|
||||
"iframe-resizer": "^4.3.7",
|
||||
"jest-junit": "^13.0.0",
|
||||
"jquery": "^3.7.1",
|
||||
"jquery-ui": "^1.13.2",
|
||||
"maska": "^1.5.0",
|
||||
"vee-validate": "^4.5.7",
|
||||
"vue": "^3.0.0",
|
||||
|
|
|
|||
|
|
@ -164,6 +164,10 @@ const endpoints = {
|
|||
url: "/experiments/api/v1/experiments/run",
|
||||
method: "POST",
|
||||
},
|
||||
GetInsuranceCompanyList: {
|
||||
url: "/account/api/v1/account/insurance-companies",
|
||||
method: "GET",
|
||||
},
|
||||
};
|
||||
|
||||
export { endpoints };
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ const storeActions = {
|
|||
GET_SIGNATURE: "getSignature",
|
||||
VALIDATE_ORDER_PROMO_AND_SAVE_SERVER_DATA: "validateOrderPromoAndSaveServerData",
|
||||
REVALIDATE_ORDER_PROMOS_AND_SAVE_SERVER_DATA: "revalidateOrderPromosAndSaveServerData",
|
||||
GET_INSURANCE_COMPANY_LIST: "getInsuranceCompanyList",
|
||||
|
||||
// DEPENDENCY MUTATIONS
|
||||
RESET_DAMAGE_STATE_AND_DEPENDENCIES: "resetDamageAndDependencies",
|
||||
|
|
|
|||
|
|
@ -252,9 +252,6 @@ export default {
|
|||
.input-wrapper {
|
||||
position: relative;
|
||||
&.has-search-icon {
|
||||
input[type="text"] {
|
||||
border-radius: 50rem;
|
||||
}
|
||||
button[type="submit"] {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -263,13 +260,14 @@ export default {
|
|||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
border-radius: 0 50rem 50rem 0;
|
||||
background-color: $blue-100;
|
||||
background-color: transparent;
|
||||
width: 2.75rem;
|
||||
height: 100%;
|
||||
border: 1px solid $gray-500;
|
||||
border-left: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.has-camera-icon {
|
||||
|
|
|
|||
0
src/layouts/insurance-company/insurance-company-spec.js
Normal file
0
src/layouts/insurance-company/insurance-company-spec.js
Normal file
211
src/layouts/insurance-company/insurance-company.vue
Normal file
211
src/layouts/insurance-company/insurance-company.vue
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<div class="container-fluid page-container-grouped-styles">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
</div>
|
||||
</div>
|
||||
<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 />
|
||||
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="navbar"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
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";
|
||||
|
||||
// Supporting files
|
||||
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 {
|
||||
getDamageString,
|
||||
getIsWindshieldOnly,
|
||||
isGlassAvailableForCarId,
|
||||
} from "@/helpers/damage-helper";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
|
||||
import { routerParams } from "@/router/router-constants/router-params";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
|
||||
import store from "@/store";
|
||||
import vinPagesMixin from "@/mixins/vin-pages-mixin";
|
||||
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));
|
||||
|
||||
export default {
|
||||
name: "insurance-company",
|
||||
mixins: [vinPagesMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
const insuranceCompanyListPromise = baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
storeActions.GET_INSURANCE_COMPANY_LIST,
|
||||
{},
|
||||
"insurance-company"
|
||||
);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "insuranceCompanyList",
|
||||
promise: insuranceCompanyListPromise,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.insuranceCompanyList = resultMap.insuranceCompanyList;
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
insuranceCompanyList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
insuranceCompanyListTags() {
|
||||
return this.insuranceCompanyList.map((item) => {
|
||||
return item.accountName;
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
return store.getters.vehicle.carId !== null;
|
||||
},
|
||||
handleAutocompleteSelect(value) {
|
||||
this.selectedQuery = value;
|
||||
},
|
||||
backButtonAction() {
|
||||
// Go back to Quote page
|
||||
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
forwardButtonAction() {
|
||||
// Still needs wired up when insurance-details page is created
|
||||
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const select = this.handleAutocompleteSelect;
|
||||
|
||||
$("#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);
|
||||
},
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
selectedQuery(newValue, oldValue) {
|
||||
if (oldValue.length > 0 && newValue.length === 0) {
|
||||
$("#autocomplete").autocomplete("search", "");
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
navbar,
|
||||
funnelSubHeader,
|
||||
textboxQuestion,
|
||||
Form,
|
||||
loadingModal,
|
||||
},
|
||||
};
|
||||
</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;
|
||||
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>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
describe("insurance", () => {
|
||||
it.todo("Should render a normal string");
|
||||
});
|
||||
|
|
@ -1,326 +0,0 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<div class="container-fluid page-container-grouped-styles">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
|
||||
|
||||
<textboxQuestion
|
||||
class="mb-2 mt-5"
|
||||
cmsWidgetName="InsuranceCoQuestionWidget"
|
||||
includeSearchIcon
|
||||
cornerStyle="rounded" />
|
||||
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="navbar"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
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";
|
||||
|
||||
// Supporting files
|
||||
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 {
|
||||
getDamageString,
|
||||
getIsWindshieldOnly,
|
||||
isGlassAvailableForCarId,
|
||||
} from "@/helpers/damage-helper";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
|
||||
import { routerParams } from "@/router/router-constants/router-params";
|
||||
|
||||
import store from "@/store";
|
||||
import vinPagesMixin from "@/mixins/vin-pages-mixin";
|
||||
|
||||
// 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));
|
||||
|
||||
export default {
|
||||
name: "insurance",
|
||||
mixins: [vinPagesMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vin: this.getVinFromStore(),
|
||||
serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
|
||||
emailAddress: this.getEmailFromStore(),
|
||||
isCarIdDifferent: false,
|
||||
customAlertData: {},
|
||||
previouslyEnteredCarId: "",
|
||||
vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
|
||||
isSelectedGlassAvailableForVehicle: true,
|
||||
displayInvalidZipAlert: false,
|
||||
displayNonServiceableZipAlert: false,
|
||||
displayVinNotFoundAlert: false,
|
||||
displayMatchedDifferentVehicleAlert: false,
|
||||
displayVinScanFailedAlert: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
return store.getters.vehicle.carId !== null;
|
||||
},
|
||||
getEmailFromStore() {
|
||||
return this.$store.getters.order.customer.emailAddress;
|
||||
},
|
||||
getVinFromStore() {
|
||||
return this.$store.getters.vehicle.vin;
|
||||
},
|
||||
getZipFromStore() {
|
||||
return this.$store.getters.order.serviceLocation.zipCode;
|
||||
},
|
||||
attachCustomEvents() {
|
||||
this.prependActionToMethod(this, this.forwardButtonAction, () => {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[this.queryStrings.FMG_PAGE],
|
||||
this.GaActions.SUBMITTED,
|
||||
this.GaLabels.VIN_LOOKUP,
|
||||
true
|
||||
);
|
||||
});
|
||||
},
|
||||
backButtonAction() {
|
||||
// route to move backwards
|
||||
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
this.resetAlerts();
|
||||
|
||||
// If this is a new VIN Lookup, do both a Vehicle Lookup and a Zip Validation
|
||||
if (!this.vinPopulatedOnPageLoad) {
|
||||
const vehicleLookupResponse = this.dispatchStoreActionWithLogging(
|
||||
storeActions.LOOKUP_VEHICLE_BY_VIN,
|
||||
{ vin: this.vin },
|
||||
"vin-lookup"
|
||||
);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "vehicleLookupResponse",
|
||||
promise: vehicleLookupResponse,
|
||||
},
|
||||
{
|
||||
resultKey: "zipCodeData",
|
||||
promise: this.getZipCodeData(this.serviceZipCode),
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
// If a Service Zip is entered and it is an invalid zip code (ex. 11111) then show an alert
|
||||
const isZipValid = resultMap.zipCodeData.isValid;
|
||||
if (this.serviceZipCode && !isZipValid) {
|
||||
this.displayInvalidZipAlert = true;
|
||||
return this.$refs.navbar.removeLoader();
|
||||
}
|
||||
this.displayInvalidZipAlert = false;
|
||||
|
||||
// If either lookup fails, remove the loader and stop processing the page.
|
||||
if (!resultMap.vehicleLookupResponse || !resultMap.zipCodeData.isServiceable) {
|
||||
// If the vehicle result is undefined, the vin entered was invalid.
|
||||
if (!resultMap.vehicleLookupResponse) {
|
||||
this.displayVinNotFoundAlert = true;
|
||||
}
|
||||
|
||||
// Check if Service Zip entered is serviceable, if not display an alert
|
||||
if (!resultMap.zipCodeData.isServiceable) {
|
||||
this.displayNonServiceableZipAlert = true;
|
||||
}
|
||||
|
||||
// Remove loader and stop processing the page.
|
||||
return this.$refs.navbar.removeLoader();
|
||||
}
|
||||
|
||||
// Check if the CarId is different from the lookup vs what is in state currently.
|
||||
this.isCarIdDifferent =
|
||||
resultMap.vehicleLookupResponse.carId !== this.$store.getters.vehicle.carId;
|
||||
|
||||
if (
|
||||
this.isCarIdDifferent &&
|
||||
resultMap.vehicleLookupResponse.carId !== this.previouslyEnteredCarId
|
||||
) {
|
||||
this.previouslyEnteredCarId = resultMap.vehicleLookupResponse.carId;
|
||||
this.customAlertData.vehicleInfo = resultMap.vehicleLookupResponse;
|
||||
this.displayMatchedDifferentVehicleAlert = true;
|
||||
|
||||
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
|
||||
resultMap.vehicleLookupResponse.carId,
|
||||
"vin-lookup"
|
||||
);
|
||||
|
||||
// Update button "Continue with..."
|
||||
this.$refs.navbar.updateButtonText(
|
||||
`Continue with ${resultMap.vehicleLookupResponse.year} ${resultMap.vehicleLookupResponse.make} ${resultMap.vehicleLookupResponse.model}`
|
||||
);
|
||||
return this.$refs.navbar.removeLoader();
|
||||
}
|
||||
|
||||
// Save vin, vehicle, customer and service information
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_VIN_LOOKUP,
|
||||
{
|
||||
isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
|
||||
vehicleInfo: Object.assign(resultMap.vehicleLookupResponse, {
|
||||
vin: this.vin,
|
||||
}),
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
|
||||
{
|
||||
state: resultMap.zipCodeData.state,
|
||||
zipCode: this.serviceZipCode,
|
||||
zipCodeCtu: resultMap.zipCodeData.zipCodeCtu,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
return await this.navigateForward();
|
||||
}
|
||||
|
||||
// If a VIN has already been found. Validate the Service Zip (in case of changes)
|
||||
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
|
||||
|
||||
// Check if Service Zip entered is serviceable then save the ZIP info
|
||||
if (zipCodeData.isServiceable) {
|
||||
//Only save the zipCode, state, and zipCodeCtu if the zip changed or we lack zipCodeCtu
|
||||
if (
|
||||
this.$store.getters.order.serviceLocation.zipCode != this.serviceZipCode ||
|
||||
!this.$store.getters.order.serviceLocation.zipCodeCtu
|
||||
) {
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
|
||||
{
|
||||
state: zipCodeData.state,
|
||||
zipCode: this.serviceZipCode,
|
||||
zipCodeCtu: zipCodeData.zipCodeCtu,
|
||||
},
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
|
||||
|
||||
return await this.navigateForward();
|
||||
}
|
||||
|
||||
// If the Service Zip is NOT serviceable then show an alert
|
||||
if (zipCodeData.isValid) {
|
||||
this.displayNonServiceableZipAlert = true;
|
||||
} else {
|
||||
this.displayInvalidZipAlert = true;
|
||||
}
|
||||
|
||||
return this.$refs.navbar.removeLoader();
|
||||
},
|
||||
async navigateForward() {
|
||||
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
|
||||
this.$router.navigateWithSaving(
|
||||
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
|
||||
this.$route,
|
||||
{},
|
||||
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
|
||||
);
|
||||
} else {
|
||||
await this.navigateForwardWithSingleCarMatch();
|
||||
}
|
||||
},
|
||||
displayVinScanAlert() {
|
||||
this.displayVinScanFailedAlert = true;
|
||||
},
|
||||
getVinFromImage(image) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.dispatchStoreActionWithLogging(
|
||||
storeActions.LOOKUP_VIN_BY_IMAGE,
|
||||
image,
|
||||
"vin-lookup"
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.data.length > 0) {
|
||||
resolve(response.data[0]);
|
||||
} else {
|
||||
reject("No VINs detected.");
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
reject("An error occurred during the lookup.");
|
||||
});
|
||||
});
|
||||
},
|
||||
resetAlerts() {
|
||||
this.displayMatchedDifferentVehicleAlert = false;
|
||||
this.displayNonServiceableZipAlert = false;
|
||||
this.displayInvalidZipAlert = false;
|
||||
this.displayVinNotFoundAlert = false;
|
||||
this.displayVinScanFailedAlert = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.attachCustomEvents();
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
navbar,
|
||||
funnelSubHeader,
|
||||
textboxQuestion,
|
||||
Form,
|
||||
loadingModal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -8,8 +8,12 @@ import baseMixin from "@/mixins/base-mixin.js";
|
|||
import analyticsMixin from "@/mixins/analytics-mixin.js";
|
||||
import experimentMixin from "@/mixins/experiment-mixin.js";
|
||||
import "../node_modules/bootstrap/dist/js/bootstrap.js";
|
||||
import Logger from "@/helpers/logger";
|
||||
import "../node_modules/jquery-ui/dist/jquery-ui.min.js";
|
||||
|
||||
// Make jQuery avaialble globally
|
||||
window.$ = window.jQuery = require("jquery");
|
||||
|
||||
import Logger from "@/helpers/logger";
|
||||
// Instantiate global logging object
|
||||
global.$logger = new Logger();
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ const fmgPageValues = {
|
|||
ESTIMATE: "estimate",
|
||||
ADDRESS_VEHICLES: "address-vehicles",
|
||||
QUOTE: "quote",
|
||||
INSURANCE: "insurance",
|
||||
INSURANCE_COMPANY: "insurance-company",
|
||||
INSURANCE_DETAILS: "insurance-details",
|
||||
SERVICE_LOCATION: "service-location",
|
||||
HERITAGE: "heritage",
|
||||
SCHEDULE: "schedule",
|
||||
|
|
|
|||
|
|
@ -391,12 +391,12 @@ const routingTable = function (store) {
|
|||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_INSURANCE,
|
||||
destinationFmgPageValue: fmgPageValues.INSURANCE,
|
||||
destinationFmgPageValue: fmgPageValues.INSURANCE_COMPANY,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.INSURANCE,
|
||||
fmgPageValue: fmgPageValues.INSURANCE_COMPANY,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
|
|
@ -404,7 +404,7 @@ const routingTable = function (store) {
|
|||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationFmgPageValue: fmgPageValues.SCHEDULE,
|
||||
destinationFmgPageValue: fmgPageValues.INSURANCE_DETAILS,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2463,6 +2463,28 @@ export const actions = {
|
|||
|
||||
return revalidateResponse?.data;
|
||||
},
|
||||
// List all insurance companies
|
||||
async getInsuranceCompanyList(context, { pageNameToLog }) {
|
||||
const insuranceCompanyList = await globalMethods.callHttpClient({
|
||||
method: endpoints.GetInsuranceCompanyList.method,
|
||||
endpoint: endpoints.GetInsuranceCompanyList.url,
|
||||
payload: {},
|
||||
logApiCall: true,
|
||||
pageNameToLog: pageNameToLog,
|
||||
});
|
||||
console.log(insuranceCompanyList);
|
||||
return insuranceCompanyList.data.sort((a, b) => {
|
||||
const nameA = a.accountName.toUpperCase();
|
||||
const nameB = b.accountName.toUpperCase();
|
||||
if (nameA < nameB) {
|
||||
return -1;
|
||||
}
|
||||
if (nameA > nameB) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
|
||||
// Misc order actions
|
||||
saveSchedule(context, scheduleInfo) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue