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

Merge pull request #199 from Safelite/feature/Digital/SSR-279

Browse source 
Feature/digital/ssr 279
This commit is contained in:
AMSNEHA 2023-03-15 18:45:32 +05:30 committed by GitHub
commit de72ffd754
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 104 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
View file

@ -24,7 +24,7 @@ describe("address-vehicles-question.vue", () => {
});
// Assert
expect(wrapper.vm.differentVehicleAlertHeader).toEqual("FoundWindshieldTestReturn");
expect(wrapper.vm.differentVehicleAlertHeader).toEqual("AlertMatchedDifferentVehicleWidgetTestReturn");
});
test("Should return content for differentVehicleAlertBody", () => {
// Arrange
@ -37,15 +37,40 @@ describe("address-vehicles-question.vue", () => {
});
// Assert
expect(wrapper.vm.differentVehicleAlertBody).toEqual("FoundWindshieldTestReturn");
expect(wrapper.vm.differentVehicleAlertBody).toEqual("AlertMatchedDifferentVehicleWidgetTestReturn");
});
test("Should return content for AlertMatchedTwoIdenticalYMMVehicleHeader", () => {
// Arrange
const wrapper = shallowMount(addressVehiclesQuestion, {
mixins: [mockMixin],
});
// Assert
expect(wrapper.vm.AlertMatchedTwoIdenticalYMMVehicleHeader).toEqual("AlertMatchedTwoIdenticalYMMVehicleWidgetTestReturn");
});
test("Should return content for AlertMatchedTwoIdenticalYMMVehicleBody", () => {
// Arrange
const wrapper = shallowMount(addressVehiclesQuestion, {
mixins: [mockMixin],
propsData: {
vehicles: ["1", "2"],
modelValue: ["1", "2"],
},
});
// Assert
expect(wrapper.vm.AlertMatchedTwoIdenticalYMMVehicleBody).toEqual("AlertMatchedTwoIdenticalYMMVehicleWidgetTestReturn");
});
});
const mockMixin = {
methods: {
getCmsContent: jest.fn((contentName) => {
if (contentName === "FoundWindshield") {
return "FoundWindshieldTestReturn";
if (contentName === "AlertMatchedDifferentVehicleWidget") {
return "AlertMatchedDifferentVehicleWidgetTestReturn";
}
if (contentName === "AlertMatchedTwoIdenticalYMMVehicleWidget") {
return "AlertMatchedTwoIdenticalYMMVehicleWidgetTestReturn";
}
return null;
}),

48
src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
View file

@ -2,14 +2,24 @@
<div class="px-5">
<alert
ref="differentVehicleAlert"
v-if="isCarIdDifferent"
v-if="displayMatchedDifferentVehicleAlert"
class="my-4"
cmsWidgetName="FoundWindshield"
cmsWidgetName="AlertMatchedDifferentVehicleWidget"
:manualHeadline="differentVehicleAlertHeader"
:manualCopy="differentVehicleAlertBody"
alertClass="alert-warning"
v-bind:isDismissible="false"
id="address-vehicles-question-alert" />
<alert
ref="alertMatchedTwoIdenticalYMMVehicle"
v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
class="my-4"
cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
:manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
:manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
alertClass="alert-warning"
v-bind:isDismissible="false"
id="address-vehicles-question-alert" />
</div>
<buttonQuestion
@ -30,28 +40,49 @@ import buttonQuestion from "@/digital-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,
vehicleSelected:Object,
modelValue: String,
cmsWidgetName: String,
validationRules: String,
isCarIdDifferent: Boolean,
displayMatchedDifferentVehicleAlert: Boolean,
displayMatchedTwoIdenticalYMMVehicleAlert: Boolean,
},
computed: {
differentVehicleAlertHeader() {
return this.getCmsContent("FoundWindshield", "HeadlineText").replaceAll(
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll(
"{custom:damage}",
getDamageString()
);
},
differentVehicleAlertBody() {
return this.getCmsContent("FoundWindshield", "BodyText")
const vinYmmFound = `${ this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model}`;
const vinYmmExpected = `${this.vehicleSelected?.year} ${this.vehicleSelected?.make} ${this.vehicleSelected?.model}`;
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "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);
.replaceAll("{custom:vinYmmFound}", vinYmmFound)
.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
},
AlertMatchedTwoIdenticalYMMVehicleHeader() {
return this.getCmsContent(
"AlertMatchedTwoIdenticalYMMVehicleWidget",
"HeadlineText"
).replaceAll("{custom:damage}", getDamageString());
},
AlertMatchedTwoIdenticalYMMVehicleBody() {
const vinYmmsFound = `${ this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model} ${this.selectedVehicle?.vehicle.style}`;
const vinYmmsExpected = `${this.vehicleSelected?.year} ${this.vehicleSelected?.make} ${this.vehicleSelected?.model} ${this.vehicleSelected?.style}`;
return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
.replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
},
questionText() {
return this.getCmsContent("VehicleConfirmationQuestion", "QuestionText");
@ -68,6 +99,9 @@ export default {
// this computed is only needed for the computed differentVehicleAlertBody text above
return this.vehicles.find(({ vin }) => vin === this.selectedVehicleVin);
},
vehicleSelected(){
return this.vehicleSelected;
}
},
components: {
buttonQuestion,

36
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -31,9 +31,13 @@
ref="addressVehiclesQuestion"
cmsWidgetName="VehicleConfirmationQuestion"
:vehicles="VehiclesForQuestions"
:vehicleSelected ="VehicleSelected"
validationRules="vehicle-required"
v-model="selectedVehicleVin"
:isCarIdDifferent="isCarIdDifferent"
:displayMatchedDifferentVehicleAlert = "displayMatchedDifferentVehicleAlert"
:displayMatchedTwoIdenticalYMMVehicleAlert = "displayMatchedTwoIdenticalYMMVehicleAlert"
/>
<div
@ -129,6 +133,10 @@ export default {
selectedVehicleVin: "",
isCarIdDifferent: false,
isSelectedGlassAvailableForVehicle: true,
displayMatchedDifferentVehicleAlert: false,
displayMatchedTwoIdenticalYMMVehicleAlert: false,
previouslyEnteredCarId: "",
forwardButtonCarStyle:"",
};
},
computed: {
@ -141,6 +149,11 @@ export default {
"HeadlineText"
).replaceAll("{custom:vehicleCount}", this.vehicleCount);
},
isTwoIdenticalYMMVehicleFound(){
const vinYmmFound = `${ this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
},
AlertProvideVinBody() {
return this.getCmsContent("ProvideVinAlert", "BodyText");
},
@ -172,6 +185,9 @@ export default {
({ vin }) => vin === this.selectedVehicleVin
);
},
VehicleSelected(){
return this.mainStore.order.vehicle;
}
},
methods: {
doesCopyContainRouterLink,
@ -226,16 +242,32 @@ export default {
await this.navigateForwardWithSingleCarMatch();
}
},
resetWarningsAndErrors() {
this.displayMatchedDifferentVehicleAlert = false;
this.displayMatchedTwoIdenticalYMMVehicleAlert = false;
this.forwardButtonCarStyle = "";
}
},
watch: {
selectedVehicleVin: {
handler() {
this.resetWarningsAndErrors();
// does this vehicle match the previously selected carId?
this.isCarIdDifferent =
this.selectedVehicle?.vehicle.carId !== useMainStore().vehicle.carId;
if (this.isCarIdDifferent) {
if (this.isCarIdDifferent &&
this.selectedVehicle?.vehicle.carId !== this.previouslyEnteredCarId) {
this.previouslyEnteredCarId = this.selectedVehicle?.vehicle.carId;
if(this.isTwoIdenticalYMMVehicleFound){
const carStyle = this.selectedVehicle?.vehicle.style;
this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
this.forwardButtonCarStyle= carStyle;
}
else{
this.displayMatchedDifferentVehicleAlert = true;
}
this.$refs.siteFooter.updateButtonText(
`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`
`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model} ${this.forwardButtonCarStyle}`
);
} else {
this.$refs.siteFooter.updateButtonText(