AdamCaouetteSafelite
GitHub
commit
075b79dd9c
12 changed files with 521 additions and 20 deletions
|
|
@ -19,15 +19,17 @@ module.exports = {
|
|||
"!src/layouts/part-questions/**/*.vue",
|
||||
"!src/layouts/reveal/**/*.vue",
|
||||
"!src/layouts/estimate/**/*.vue",
|
||||
// REMOVE THESE AFTER WRITING UNIT TESTS
|
||||
// TODO REMOVE THESE AFTER WRITING UNIT TESTS
|
||||
"!src/layouts/address-lookup/address-lookup.vue",
|
||||
"!src/layouts/address-lookup/customer-questions/customer-questions.vue",
|
||||
"!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue",
|
||||
"!src/layouts/address-vehicles/address-vehicles.vue",
|
||||
"!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",
|
||||
"!src/common-components/dropdown-question/dropdown-question.vue",
|
||||
"!src/common-components/textbox-question/textbox-question.vue",
|
||||
"!src/helpers/validation-rules.js",
|
||||
// END
|
||||
], //! means exclude from coverage.
|
||||
], // ! means exclude from coverage.
|
||||
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
||||
coverageThreshold: {
|
||||
global: {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
|
||||
<template>
|
||||
<div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
|
||||
<div v-if="questionText" :class="[this.buttonType === 'radio' ? ['mt-2', 'mb-0'] : ['mt-5', 'mb-4'], 'd-flex']">
|
||||
<span class="fs-5 fw-bold w-100" :class="this.buttonType === 'radio' ? 'text-start' : 'text-center'">{{ questionText }}</span>
|
||||
<div v-if="questionText" class="question-text d-flex">
|
||||
<span class="fs-5 fw-bold w-100">{{ questionText }}</span>
|
||||
</div>
|
||||
<div class="w-100 d-flex justify-content-center">
|
||||
<fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
|
||||
|
|
@ -40,8 +40,8 @@
|
|||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="row mt-2 form-test-error">
|
||||
<error-message :name="groupName" v-if="!suppressError"></error-message>
|
||||
<div class="row form-test-error">
|
||||
<error-message class="mt-2" :name="groupName" v-if="!suppressError"></error-message>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -160,7 +160,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
.button-question-overflow {
|
||||
height: calc(100vh - 274px);
|
||||
|
||||
|
|
@ -174,4 +174,12 @@ export default {
|
|||
.button-question {
|
||||
color: $black;
|
||||
}
|
||||
.question-text {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
& > span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,10 +30,10 @@
|
|||
</div>
|
||||
<div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
|
||||
<textLink
|
||||
linkType="navigation"
|
||||
:text="backLink"
|
||||
@click-event="linkClick"
|
||||
href="javascript:void(0)"
|
||||
linkType="navigation"
|
||||
:text="backLink"
|
||||
@click-event="linkClick"
|
||||
href="javascript:void(0)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -51,7 +51,6 @@ export default {
|
|||
isForwardActionDisabled: Boolean,
|
||||
isBackButtonHidden: {type: Boolean, default: false},
|
||||
cmsWidgetName: String,
|
||||
|
||||
},
|
||||
components: {
|
||||
textLink,
|
||||
|
|
@ -106,7 +105,7 @@ export default {
|
|||
linkClick() {
|
||||
this.$emit("BackClicked");
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ const errorMessages = {
|
|||
VIN_REQUIRED: "Please enter your VIN",
|
||||
VIN_FORMAT: "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
|
||||
OPTION_REQUIRED: "Please select an option",
|
||||
VEHICLE_REQUIRED: "Please select a vehicle",
|
||||
};
|
||||
|
||||
export { errorMessages };
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@ import { storeActions } from "@/constants/store-actions";
|
|||
export function getDamageString() {
|
||||
const damageLocations = store.getters.damage.glassToReplace;
|
||||
let returnString;
|
||||
if(damageLocations.length > 1){
|
||||
if (!damageLocations) {
|
||||
return;
|
||||
}
|
||||
if (damageLocations.length > 1) {
|
||||
returnString = "match"
|
||||
} else {
|
||||
switch(damageLocations[0]?.location) {
|
||||
|
|
|
|||
|
|
@ -290,9 +290,7 @@ export default {
|
|||
navigateAfterSaveToHeritageFunnel(this.$route);
|
||||
} else {
|
||||
// and there is no match, navigate to "address-vehicles" page
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES,
|
||||
this.$route, {}, {},
|
||||
carsFound);
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
// import store from "@/store";
|
||||
|
||||
// jest.mock("@/store", () => { return {}; }, { virtual: true });
|
||||
|
||||
describe("addressVehiclesQuestion.vue", () => {
|
||||
|
||||
it("Should include button-question component", () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(addressVehiclesQuestion, {
|
||||
propsData: {
|
||||
// vehicles: [
|
||||
// {
|
||||
// "Name": "testname",
|
||||
// "Text": "testtext",
|
||||
// }
|
||||
// ]
|
||||
}
|
||||
});
|
||||
|
||||
// console.log('wrapper.html: ', wrapper.html());
|
||||
|
||||
// Assert
|
||||
const buttonQuestion = wrapper.find('button-question-stub');
|
||||
expect(buttonQuestion).toBe;
|
||||
});
|
||||
|
||||
it("on initialize should pass in questionText", () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(addressVehiclesQuestion, {
|
||||
propsData: {},
|
||||
});
|
||||
|
||||
//Act
|
||||
addressVehiclesQuestion.methods.initializeComponent.call(wrapper.vm, {QuestionText: 'Testing question text'});
|
||||
|
||||
// console.log('wrapper.html: ', wrapper.html());
|
||||
// console.log('wrapper.vm.questionText: ', wrapper.vm.questionText);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.questionText).toEqual('Testing question text');
|
||||
});
|
||||
|
||||
// it("Alert should show if prop isCarIdDifferent is true", () => {
|
||||
// // Arrange
|
||||
// const wrapper = shallowMount(addressVehiclesQuestion, setupMountOptions({
|
||||
// propsData: {
|
||||
// isCarIdDifferent: true,
|
||||
// }
|
||||
// }));
|
||||
|
||||
// //Act
|
||||
// const alert = wrapper.find('alert');
|
||||
// console.log('wrapper.html: ', wrapper.html());
|
||||
// console.log('wrapper.vm.questionText: ', wrapper.vm.questionText);
|
||||
|
||||
// // Assert
|
||||
// // expect(wrapper.vm.questionText).toEqual('Testing question text');
|
||||
// });
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
function setupMountOptions(mountOptionsMockData = {}) {
|
||||
// //Mock store
|
||||
// store.dispatch = jest.fn(() => {});
|
||||
// store.getters = {};
|
||||
|
||||
// const mockMixin = {
|
||||
// methods: {
|
||||
// getCmsContent: jest.fn().mockImplementation(() => {
|
||||
// return '';
|
||||
// }),
|
||||
// getDamageString: jest.fn().mockImplementation(() => {
|
||||
// return '';
|
||||
// })
|
||||
// },
|
||||
// store: {
|
||||
// dispatch: store.dispatch,
|
||||
// getters: store.getters,
|
||||
// },
|
||||
// }
|
||||
|
||||
const mockGetCmsContent = jest.fn();
|
||||
mockGetCmsContent((cmsWidget, field) => {
|
||||
return field
|
||||
});
|
||||
const defaultMountOptions = {
|
||||
// route: { query: { fmgPage: 'page-name' } },
|
||||
mixins: {
|
||||
methods: {
|
||||
getCmsContent: mockGetCmsContent,
|
||||
},
|
||||
},
|
||||
global: {
|
||||
mocks: {
|
||||
store: {
|
||||
dispatch: store.dispatch,
|
||||
getters: store.getters,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
|
||||
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
|
||||
|
||||
console.log('what are allMountOptions??? ', allMountOptions);
|
||||
|
||||
return allMountOptions;
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<buttonQuestion
|
||||
class="address-vehicles-question"
|
||||
buttonType="listButton"
|
||||
groupName="ChooseAddressVehicle"
|
||||
:questionText="questionText"
|
||||
:answers="vehicles"
|
||||
v-model="selectedVehicleVin"
|
||||
isRequired=true
|
||||
:validation-rules="validationRules"
|
||||
/>
|
||||
<alert
|
||||
ref="differentVehicleAlert"
|
||||
v-if="isCarIdDifferent"
|
||||
class="my-3"
|
||||
alertClass="alert-warning"
|
||||
:manualHeadline="differentVehicleAlertHeader"
|
||||
:manualCopy="differentVehicleAlertBody"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
|
||||
// Supporting files
|
||||
import { getDamageString } from "@/helpers/damage-helper";
|
||||
|
||||
export default {
|
||||
name: "address-vehicles-question",
|
||||
props: {
|
||||
vehicles: Array,
|
||||
modelValue: String,
|
||||
cmsWidgetName: String,
|
||||
validationRules: String,
|
||||
isCarIdDifferent: Boolean,
|
||||
},
|
||||
computed: {
|
||||
differentVehicleAlertHeader() {
|
||||
return this.getCmsContent("FoundWindshield", "HeadlineText").replaceAll("{custom:damage}", getDamageString());
|
||||
},
|
||||
differentVehicleAlertBody() {
|
||||
return this.getCmsContent(
|
||||
"FoundWindshield",
|
||||
"BodyText"
|
||||
)
|
||||
.replaceAll("{custom:damage}", getDamageString())
|
||||
.replaceAll(
|
||||
"{custom:vinlookupYear}",
|
||||
this.selectedVehicle?.vehicle.year
|
||||
)
|
||||
.replaceAll(
|
||||
"{custom:vinlookupMake}",
|
||||
this.selectedVehicle?.vehicle.make
|
||||
)
|
||||
.replaceAll(
|
||||
"{custom:vinlookupModel}",
|
||||
this.selectedVehicle?.vehicle.model
|
||||
);
|
||||
},
|
||||
questionText() {
|
||||
return this.getCmsContent("VehicleConfirmationQuestion", "QuestionText");
|
||||
},
|
||||
selectedVehicleVin: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
},
|
||||
selectedVehicle() {
|
||||
return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVin[0] );
|
||||
},
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
alert,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.address-vehicles-question {
|
||||
.question-text {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
& > span {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
26
src/layouts/address-vehicles/address-vehicles.spec.js1
Normal file
26
src/layouts/address-vehicles/address-vehicles.spec.js1
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import addressVehicles from "@/layouts/address-vehicles/address-vehicles";
|
||||
|
||||
describe("addressVehicles.vue", () => {
|
||||
|
||||
it("Should include address-vehicles-question component", () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(addressVehicles, {
|
||||
propsData: {
|
||||
vehicles: [
|
||||
{
|
||||
"Name": "testname",
|
||||
"Text": "testtext",
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// console.log('wrapper.html: ', wrapper.html());
|
||||
|
||||
// Assert
|
||||
const addressVehiclesQuestion = wrapper.find('address-vehicles-question-stub');
|
||||
expect(addressVehiclesQuestion).toBe;
|
||||
});
|
||||
|
||||
});
|
||||
243
src/layouts/address-vehicles/address-vehicles.vue
Normal file
243
src/layouts/address-vehicles/address-vehicles.vue
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
<template>
|
||||
<Form
|
||||
@submit="onSubmit"
|
||||
@invalid-submit="onInvalidSubmit"
|
||||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
>
|
||||
<div class="page-container-grouped-styles">
|
||||
<loadingModal ref="loadingModal"/>
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<alert
|
||||
ref="alertFoundMultipleVehicles"
|
||||
class="my-5"
|
||||
alertClass="alert-warning"
|
||||
:manualHeadline="AlertFoundMultipleVehiclesHeader"
|
||||
manualCopy=""
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<addressVehiclesQuestion
|
||||
ref="addressVehiclesQuestion"
|
||||
cmsWidgetName="VehicleConfirmationQuestion"
|
||||
:vehicles="VehiclesForQuestions"
|
||||
validationRules="vehicle-required"
|
||||
v-model="selectedVehicleVin"
|
||||
:isCarIdDifferent="isCarIdDifferent"
|
||||
/>
|
||||
<div class="alert-provide-vin my-5" v-if="splitAlertProvideVinBodyForLink.length">
|
||||
<span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
|
||||
<span v-if="copy.includes('routerLink:')" class="text-body">
|
||||
<router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
|
||||
</span>
|
||||
<span v-else class="m-0 text-body" v-html="copy"></span>
|
||||
</span>
|
||||
</div>
|
||||
<funnelFooter
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="funnelFooter"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
/>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
|
||||
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import store from "@/store";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { storeMutations } from "@/constants/store-mutations";
|
||||
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import { isGlassAvailableForCarId } from "@/helpers/damage-helper";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("vehicle-required", required(errorMessages.VEHICLE_REQUIRED));
|
||||
|
||||
export default {
|
||||
name: "address-vehicles",
|
||||
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);
|
||||
});
|
||||
},
|
||||
props: {
|
||||
validationRules: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedVehicleVin: null,
|
||||
isCarIdDifferent: false,
|
||||
isSelectedGlassAvailableForVehicle: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
vehicleCount() {
|
||||
return this.VehiclesForQuestions.length;
|
||||
},
|
||||
AlertFoundMultipleVehiclesHeader() {
|
||||
let text = this.getCmsContent("FoundMultipleVehicles", "HeadlineText").replaceAll("{custom:vehicleCount}", this.vehicleCount);
|
||||
return text;
|
||||
},
|
||||
AlertProvideVinBody() {
|
||||
return this.getCmsContent("ProvideVinAlert", "BodyText");
|
||||
},
|
||||
splitAlertProvideVinBodyForLink() {
|
||||
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
|
||||
return this.AlertProvideVinBody.split(/{(.*?)}/g);
|
||||
},
|
||||
VehiclesForQuestions() {
|
||||
const vehiclesData = this.VehiclesFromApi;
|
||||
|
||||
// Map API result data, to address-vehicles data structure
|
||||
const mappedData = vehiclesData.map((v) => {
|
||||
const maskSymbol = "X";
|
||||
const vinStart = maskSymbol.repeat(v.vin.length-4);
|
||||
const vinEnd = v.vin.substring(v.vin.length-4);
|
||||
return {
|
||||
vin: v.vin,
|
||||
vehicle: v.vehicle,
|
||||
Text: v.vehicle.year + " " + v.vehicle.make + " " + v.vehicle.model,
|
||||
Name: v.vin,
|
||||
SubText: "VIN " + vinStart + vinEnd,
|
||||
};
|
||||
});
|
||||
|
||||
return mappedData;
|
||||
},
|
||||
VehiclesFromApi() {
|
||||
return store.getters.pageData(fmgPageValues.ADDRESS_VEHICLES);
|
||||
},
|
||||
selectedVehicle() {
|
||||
return this.VehiclesForQuestions.find( ({ vin }) => vin === this.selectedVehicleVin[0] );
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
if (
|
||||
store.getters.order.vehicle.carId
|
||||
&& store.getters.order.serviceLocation.zipCode
|
||||
&& store.getters.order.customer.emailAddress
|
||||
&& store.getters.pageData(fmgPageValues.ADDRESS_VEHICLES)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
const vinLookup = await this.lookupVin(this.selectedVehicle.vin).catch(() => {
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
return;
|
||||
});
|
||||
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.carId);
|
||||
this.updateCustomerInfo(this.selectedVehicle.vin, this.selectedVehicle.vehicle);
|
||||
this.navigateForward();
|
||||
},
|
||||
navigateForward() {
|
||||
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
|
||||
this.$router.navigateAfterSave(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.$route,
|
||||
{},
|
||||
{ displayVehicleChangeAlert: true },
|
||||
);
|
||||
return;
|
||||
} else {
|
||||
this.$refs.loadingModal.showModal();
|
||||
navigateAfterSaveToHeritageFunnel(this.$route);
|
||||
return;
|
||||
}
|
||||
},
|
||||
lookupVin(vin) {
|
||||
return baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.LOOKUP_VEHICLE_BY_VIN,
|
||||
{ vin }
|
||||
);
|
||||
},
|
||||
resetDependentState() { // needed because navigateAfterSaveToHeritageFunnel calls it
|
||||
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
|
||||
},
|
||||
updateCustomerInfo(vin, vehicle) {
|
||||
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
|
||||
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
|
||||
}
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
|
||||
store.commit(storeMutations.UPDATE_YEAR, vehicle.year);
|
||||
store.commit(storeMutations.UPDATE_MAKE, vehicle.make);
|
||||
store.commit(storeMutations.UPDATE_MODEL, vehicle.model);
|
||||
store.commit(storeMutations.UPDATE_STYLE, vehicle.style);
|
||||
store.commit(storeMutations.UPDATE_CAR_ID, vehicle.carId);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicle.category);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicle.imageUrl);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicle.imageVifNumber);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicle.imageColor);
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectedVehicleVin(vehicleVin) {
|
||||
// does this vehicle match the previously selected carId?
|
||||
this.isCarIdDifferent = this.selectedVehicle.vehicle.carId !== store.getters.vehicle.carId;
|
||||
this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`);
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
Form,
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
alert,
|
||||
funnelFooter,
|
||||
addressVehiclesQuestion,
|
||||
loadingModal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.alert-provide-vin {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.4;
|
||||
|
||||
a {
|
||||
text-underline-offset: .2em;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -139,8 +139,22 @@ const routingTable = [
|
|||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
],
|
||||
},
|
||||
{fmgPageValue: fmgPageValues.ESTIMATE,
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.ESTIMATE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default {
|
|||
isDismissible: Boolean,
|
||||
/*
|
||||
alertClass class names:
|
||||
alert-sucess (green)
|
||||
alert-success (green)
|
||||
alert-danger (red)
|
||||
alert-warning (yellow)
|
||||
alert-info (blue)
|
||||
|
|
|
|||
Loading…
Reference in a new issue