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

Merge branch 'develop' into feature/digital/SSR-254

Browse source 
# Conflicts:
#	src/constants/vehicle-lookup-alert-types.js
#	src/layouts/coverage-statement/coverage-statement.vue
#	src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue
#	src/layouts/vin-lookup/vin-lookup.vue
This commit is contained in:
Kroell 2023-03-10 11:47:48 -05:00
commit 8e4de86f0d
19 changed files with 297 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/constants/vehicle-lookup-alert-types.js
View file

@ -1,7 +1,7 @@
const vehicleLookupAlertTypes = Object.freeze({
NOT_FOUND: 'notFound',
NOT_MATCHED: 'notMatched',
PERFECT_MATCH: 'perfectMatch',
TWO_IDENTICAL_YMM_MATCHED:'twoIdenticalYMMMatched'
});
export default vehicleLookupAlertTypes;

2
src/digital-components/button-question/button-question.vue
View file

@ -229,7 +229,7 @@ export default {
.overflow-scroll {
// Height will be determined by overall height of content above list
height: calc(100% - 383px);
height: calc(100% - 400px);
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
}

6
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -4,7 +4,7 @@
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<div class="fade-on-route-transition sub-container overflow-scroll">
<alert
ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget"
@ -95,6 +95,10 @@ export default {
</script>
<style lang="scss">
.overflow-scroll {
height: calc(100% - 368px);
overflow-x: hidden !important;
}
.questions-page {
.question-text {
margin-bottom: 0.5rem;

37
src/layouts/address-lookup/address-lookup.spec.js
View file

@ -56,6 +56,43 @@ describe("address-lookup.vue", () => {
);
});
test("if the address matches two identical YMM vehicles, then display Two Identical YMM Vehicle alert", async () => {
// Arrange
const mockRegistrationAddress = {
streetAddress: "1234 Main St",
city: "Columbus",
state: "OH",
zipCode: "43215",
};
const { wrapper } = setupMocks({
vinVehicles: [
{
vehicle: {
carId: "C00000",
},
},
],
});
useMainStore().order.vehicle.carId = "CARID2";
await wrapper.setData({
customerQuestions: {
addressQuestions: mockRegistrationAddress,
},
isTwoIdenticalYMMVehicleFound:true,
});
// Act
await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.findComponent({ ref: "alertMatchedTwoIdenticalYMMVehicle" }).isVisible()).toBe(
true
);
});
test("if the looking up VIN by address is not allowed in the state selected display the Vin Lookup By HomeAddress Not Allowed Alert", async () => {
// Arrange
const mockRegistrationAddress = {

47
src/layouts/address-lookup/address-lookup.vue
View file

@ -29,6 +29,15 @@
:manualCopy="AlertMatchedDifferentVehicleBody"
alertClass="alert-warning"
v-bind:isDismissible="false" />
<alert
ref="alertMatchedTwoIdenticalYMMVehicle"
v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
class="mb-4"
cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
:manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
:manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
alertClass="alert-warning"
v-bind:isDismissible="false" />
<alert
ref="alertVinLookupsByHomeAddressNotAllowed"
v-if="displayVinLookupByHomeAddressNotAllowedAlert"
@ -101,10 +110,12 @@ export default {
displayVinNotFoundAlert: false,
displayMatchedDifferentVehicleAlert: false,
displayVinLookupByHomeAddressNotAllowedAlert: false,
displayMatchedTwoIdenticalYMMVehicleAlert: false,
previouslyEnteredCarId: "",
isCarIdDifferent: false,
isSelectedGlassAvailableForVehicle: true,
customAlertData: {},
forwardButtonCarStyle:"",
};
},
methods: {
@ -171,8 +182,14 @@ export default {
if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
// Display Alert
this.previouslyEnteredCarId = carFound.carId;
this.customAlertData.vehicleInfo = carFound;
this.displayMatchedDifferentVehicleAlert = true;
this.customAlertData.vehicleInfo = carFound;
if(this.isTwoIdenticalYMMVehicleFound){
this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
this.forwardButtonCarStyle= carFound.style;
}
else{
this.displayMatchedDifferentVehicleAlert = true;
}
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
carFound.carId
@ -180,7 +197,7 @@ export default {
// Update button "Continue with..."
this.$refs.siteFooter.updateButtonText(
`Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${carFound.style}`
`Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`
);
return this.$refs.siteFooter.removeLoader();
}
@ -277,14 +294,34 @@ export default {
).replaceAll("{custom:damage}", getDamageString());
},
AlertMatchedDifferentVehicleBody() {
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:vinYmmFound}", vinYmmFound)
.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
},
AlertMatchedTwoIdenticalYMMVehicleHeader() {
return this.getCmsContent(
"AlertMatchedTwoIdenticalYMMVehicleWidget",
"HeadlineText"
).replaceAll("{custom:damage}", getDamageString());
},
AlertMatchedTwoIdenticalYMMVehicleBody() {
const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
.replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
},
isTwoIdenticalYMMVehicleFound(){
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
}
},
watch: {
customerQuestions: {
@ -313,7 +350,7 @@ export default {
<style lang="scss">
.overflow-scroll {
height: calc(100% - 353px);
height: calc(100% - 368px);
overflow-X: hidden !important;
}

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

@ -5,7 +5,7 @@
ref="theForm"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles overflow-auto">
<div class="page-container-grouped-styles ">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner
class="mb-3"
@ -14,7 +14,7 @@
/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="px-5">
<div class="px-5 ">
<alert
cmsWidgetName="FoundMultipleVehicles"
ref="alertFoundMultipleVehicles"
@ -26,7 +26,7 @@
id="multiple-vehicles-alert"
/>
</div>
<div class="overflow-scroll">
<addressVehiclesQuestion
ref="addressVehiclesQuestion"
cmsWidgetName="VehicleConfirmationQuestion"
@ -54,6 +54,7 @@
</span>
</div>
</div>
</div>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ -270,4 +271,9 @@ export default {
#multiple-vehicles-alert p {
margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
}
.overflow-scroll {
height: calc(100% - 432px);
overflow-X: hidden !important;
}
</style>

18
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -4,11 +4,11 @@
@invalidSubmit="onInvalidSubmit"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles overflow-auto">
<div class="page-container-grouped-styles">
<siteHeader
cmsWidgetName="SiteHeaderWidget"
/>
<div class="fade-on-route-transition sub-container make-tall px-5">
<div class="fade-on-route-transition sub-container overflow-scroll px-5">
<textBlock
cmsWidgetName="verifyingCoverageStatement"
typeStyle="h5"
@ -141,10 +141,14 @@ export default {
</script>
<style lang="scss">
// prevents vertical scrollbar from appearing when modal opens
.modal {
overflow: hidden;
.overflow-scroll {
height: calc(100% - 168px);
overflow-X: hidden !important;
}
ol {
margin-left: -1rem;
li {
margin-bottom: .5rem;
}
}
</style>

24
src/layouts/license-plate-lookup/license-plate-lookup.spec.js
View file

@ -48,6 +48,30 @@ describe("license-plate-lookup.vue", () => {
);
});
test("If license plate matches two identical YMM vehicles, display alertMatchedTwoIdenticalYMMVehicle", async () => {
// Arrange
const mockRegistrationLicensePlate = {
licensePlate: "UTN990",
};
const { wrapper } = setupMocks({});
useMainStore().order.vehicle.carId = "TESTCARID";
await wrapper.setData({
licensePlate: mockRegistrationLicensePlate,
isTwoIdenticalYMMVehicleFound:true,
});
// Act
await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.findComponent({ ref: "alertMatchedTwoIdenticalYMMVehicle" }).isVisible()).toBe(
true
);
});
test("If no vehicles found, display VinNotFound alert", async () => {
// Arrange
const mockRegistrationLicensePlate = {

56
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -3,14 +3,14 @@
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
v-slot="{ meta }">
<div class="page-container-grouped-styles overflow-auto">
<div class="page-container-grouped-styles">
<siteHeader cms-widget-name="SiteHeaderWidget" />
<vehicleBanner
class="mb-3"
cms-widget-name="VehicleBannerWidget"
:display-generic-vehicle-image="false" />
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall mt-5 px-5">
<div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5">
<alert
ref="alertVinNotFound"
v-if="displayVinNotFoundAlert"
@ -27,6 +27,15 @@
:manualCopy="AlertMatchedDifferentVehicleBody"
alertClass="alert-warning"
v-bind:isDismissible="false" />
<alert
ref="alertMatchedTwoIdenticalYMMVehicle"
v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
class="mb-4"
cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
:manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
:manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
alertClass="alert-warning"
v-bind:isDismissible="false" />
<textboxQuestion
cmsWidgetName="LicensePlateNumberQuestionWidget"
v-model="licensePlate"
@ -112,10 +121,12 @@ export default {
licenseState: useMainStore().order.customer.address.state,
displayVinNotFoundAlert: false,
displayMatchedDifferentVehicleAlert: false,
displayMatchedTwoIdenticalYMMVehicleAlert: false,
previouslyEnteredCarId: "",
isCarIdDifferent: false,
customAlertData: {},
isSelectedGlassAvailableForVehicle: true,
forwardButtonCarStyle:"",
};
},
methods: {
@ -178,15 +189,21 @@ export default {
// Display Alert
this.previouslyEnteredCarId = vehicleFromLookup.carId;
this.customAlertData.vehicleInfo = vehicleFromLookup;
this.displayMatchedDifferentVehicleAlert = true;
if(this.isTwoIdenticalYMMVehicleFound){
this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
this.forwardButtonCarStyle= vehicleFromLookup.style;
}
else{
this.displayMatchedDifferentVehicleAlert = true;
}
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
vehicleFromLookup.carId
);
// Update button "Continue with..."
this.$refs.siteFooter.updateButtonText(
`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${vehicleFromLookup.style}`
);
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`);
return this.$refs.siteFooter.removeLoader();
}
@ -236,14 +253,34 @@ export default {
).replaceAll("{custom:damage}", getDamageString());
},
AlertMatchedDifferentVehicleBody() {
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:vinYmmFound}", vinYmmFound)
.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
},
AlertMatchedTwoIdenticalYMMVehicleHeader() {
return this.getCmsContent(
"AlertMatchedTwoIdenticalYMMVehicleWidget",
"HeadlineText"
).replaceAll("{custom:damage}", getDamageString());
},
AlertMatchedTwoIdenticalYMMVehicleBody() {
const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
.replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
},
isTwoIdenticalYMMVehicleFound(){
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
},
stateOptions: {
get: function () {
return states;
@ -276,6 +313,11 @@ export default {
</script>
<style>
.overflow-scroll {
height: calc(100% - 392px);
overflow-x: hidden !important;
}
#license-plate-question-wrapper .form-test-error {
/**
Override extra margin-bottom in the error message in TextboxQuestion

2
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -138,7 +138,7 @@ export default {
</script>
<style lang="scss">
.overflow-scroll {
height: calc(100% - 152px);
height: calc(100% - 168px);
overflow-X: hidden !important;
}
.alert.alert-warning

2
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -475,7 +475,7 @@ export default {
<style lang="scss">
.overflow-scroll {
height: calc(100% - 353px);
height: calc(100% - 368px);
overflow-X: hidden !important;
}
</style>

2
src/layouts/vehicle-lookup/vehicle-lookup.vue
View file

@ -118,7 +118,7 @@ export default {
<style lang="scss">
.overflow-scroll {
height: calc(100% - 353px);
height: calc(100% - 368px);
overflow-X: hidden !important;
}
</style>

8
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -8,7 +8,7 @@
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall overflow-auto px-5">
<div class="fade-on-route-transition sub-container overflow-scroll px-5">
<div class="prevent-squish my-5">
<div class="row">
<div class="col">
@ -221,3 +221,9 @@ export default {
},
};
</script>
<style lang="scss">
.overflow-scroll {
height: calc(100% - 368px);
overflow-x: hidden !important;
}
</style>

53
src/layouts/vin-lookup/vin-lookup-alerts/two-identical-ymm-vehicle-alert/two-identical-ymm-vehicle-alert.vue Normal file
View file

@ -0,0 +1,53 @@
<template>
<alert
alertClass="alert-warning"
cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
:manualCopy="body"
:manualHeadline="header"
aria-label="two-identical-ymm-vehicle-alert"
/>
</template>
<script>
import { getDamageString } from '@/helpers/damage-helper';
import alert from '@/ux-components/alert/alert.vue';
export default {
name: 'two-identical-ymm-vehicle-alert',
components: {
alert,
},
inject: ['vehicleFromLookup'],
computed: {
header() {
return (
this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'HeadlineText')
.replaceAll('{custom:damage}', getDamageString())
);
},
body() {
let year = '';
let make = '';
let model = '';
let style = '';
if (this.vehicleFromLookup) {
year = this.vehicleFromLookup.year;
make = this.vehicleFromLookup.make;
model = this.vehicleFromLookup.model;
style = this.vehicleFromLookup.style;
}
return (
this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'BodyText')
.replaceAll('{custom:damage}', getDamageString())
.replaceAll('{custom:vinlookupYear}', year)
.replaceAll('{custom:vinlookupMake}', make)
.replaceAll('{custom:vinlookupModel}', model)
.replaceAll('{custom:vinlookupStyle}', style)
);
},
},
};
</script>

9
src/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue
View file

@ -28,14 +28,12 @@ export default {
body() {
let year = '';
let make = '';
let model = '';
let style = '';
let model = '';
if (this.vehicleFromLookup) {
year = this.vehicleFromLookup.year;
make = this.vehicleFromLookup.make;
model = this.vehicleFromLookup.model;
style = this.vehicleFromLookup.style;
model = this.vehicleFromLookup.model;
}
return (
@ -43,8 +41,7 @@ export default {
.replaceAll('{custom:damage}', getDamageString())
.replaceAll('{custom:vinlookupYear}', year)
.replaceAll('{custom:vinlookupMake}', make)
.replaceAll('{custom:vinlookupModel}', model)
.replaceAll('{custom:vinlookupStyle}', style)
.replaceAll('{custom:vinlookupModel}', model)
);
},
},

14
src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.spec.js
View file

@ -54,4 +54,18 @@ describe('vin-lookup-alerts.vue', () => {
expect(vehicleNotFoundAlert).toEqual(null);
expect(vehicleNotMatchedAlert).toBeVisible();
});
test('TwoIdenticalYMMVehicleAlert is displayed on the screen', () => {
getDamageString.mockImplementation(() => 'Mock Damage String');
mountOptions.props = {
activeAlertType: vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED,
};
mountOptions.global.provide = {
vehicleFromLookup: {},
};
const { queryByRole } = render(VinLookupAlertsComponent, mountOptions);
const twoIdenticalYMMVehicleAlert = queryByRole('alert', { name: 'two-identical-ymm-vehicle-alert' });
expect(twoIdenticalYMMVehicleAlert).toBeVisible();
});
});

15
src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue
View file

@ -6,6 +6,9 @@
<vehicleNotFoundAlert
v-if="isVehicleNotFoundVisible"
/>
<twoIdenticalYMMVehicleAlert
v-if="isTwoIdenticalYMMVehicleFoundVisible"
/>
<vehicleNotMatchedAlert
v-else-if="isVehicleNotMatchedVisible"
/>
@ -16,9 +19,9 @@
</template>
<script>
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import vehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
import perfectMatchAlert from './perfect-match-alert/perfect-match-alert.vue';
import vehicleNotFoundAlert from '@/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert';
import vehicleNotMatchedAlert from '@/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert';
import twoIdenticalYMMVehicleAlert from '@/layouts/vin-lookup/vin-lookup-alerts/two-identical-ymm-vehicle-alert/two-identical-ymm-vehicle-alert'
export default {
@ -26,7 +29,7 @@ export default {
components: {
vehicleNotFoundAlert,
vehicleNotMatchedAlert,
perfectMatchAlert,
twoIdenticalYMMVehicleAlert,
},
props: {
activeAlertType: {
@ -45,8 +48,8 @@ export default {
isVehicleNotMatchedVisible() {
return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
},
isPerfectMatchVisible() {
return this.activeAlertType === vehicleLookupAlertTypes.PERFECT_MATCH;
isTwoIdenticalYMMVehicleFoundVisible(){
return this.activeAlertType === vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
},
wrapperCssClass() {
return {

50
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -4,7 +4,7 @@
@invalidSubmit="onInvalidSubmit"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles overflow-auto">
<div class="page-container-grouped-styles ">
<siteHeader
cmsWidgetName="SiteHeaderWidget"
/>
@ -16,16 +16,14 @@
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
/>
<div class="px-4">
<div class="fade-on-route-transition sub-container make-tall px-2 mt-5">
<div class="px-4 overflow-scroll ">
<div class="fade-on-route-transition sub-container px-2 mt-5">
<vinLookupAlerts
:activeAlertType="activeVehicleLookupAlertType"
/>
<vinQuestion
v-model="vin"
:isDisabled="vinPopulatedOnPageLoad"
:mask="vinMask"
/>
<vinLocationInformation />
@ -87,8 +85,8 @@ export default {
activeVehicleLookupAlertType: null,
needToLookupVehicle: true,
vehicleFromLookup: null,
vin: this.getVinFromStore(),
vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
vin: null,
forwardButtonCarStyle:"",
};
},
provide() {
@ -120,23 +118,16 @@ export default {
&& this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
);
},
vinMask() {
if (this.vinPopulatedOnPageLoad) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
const lastSixChars = this.vin.substring(11, this.vin.length);
return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
} else {
return "XXXXXXXXXXXXXXXXX";
}
},
isTwoIdenticalYMMVehicleFound(){
const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
}
},
methods: {
arePagePrerequisiteValid() {
return true;
},
getVinFromStore() {
return this.mainStore.vehicle.vin;
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
@ -168,9 +159,16 @@ export default {
}
if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
if(this.isTwoIdenticalYMMVehicleFound){
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
this.forwardButtonCarStyle = this.vehicleFromLookup.style;
}
else{
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
}
const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.vehicleFromLookup.style}`;
const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
this.$refs.siteFooter.removeLoader();
@ -198,7 +196,7 @@ export default {
// navigate() doesn't stop the processing flow
return;
}
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
this.mainStore.updateVehicle(this.vehicleFromLookup);
const partsOrQuestionsResponse = await this.getPartsOrQuestions();
if (partsOrQuestionsResponse.error) {
@ -256,3 +254,11 @@ export default {
},
};
</script>
<style>
.overflow-scroll {
height: calc(100% - 368px);
overflow-X: hidden !important;
}
</style>

2
src/layouts/welcome-page/welcome-page.vue
View file

@ -335,7 +335,7 @@
<style lang="scss">
.overflow-scroll {
height: calc(100% - 152px);
height: calc(100% - 165px);
overflow-X: hidden !important;
}
.my-2