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

Merge branch 'develop' into feature/Digital/SSR-193

Browse source 
# Conflicts:
#	package-lock.json
#	package.json
#	src/constants/application-config.js
#	src/constants/endpoints.js
This commit is contained in:
Jason Wheeler 2023-01-13 11:57:51 -05:00
commit 3b7d708cd0
29 changed files with 18119 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17232
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

3
package.json
View file

@ -19,8 +19,7 @@
"pinia-plugin-persistedstate": "^2.2.0",
"vee-validate": "^4.7.0",
"vue": "^3.2.13",
"vue-plugin-load-script": "^2.1.0",
"vue-router": "^4.0.3"
"vue-router": "4.1.3"
},
"devDependencies": {
"@testing-library/jest-dom": "5.16.5",

1
src/common-components/base-input-button/base-input-button.vue
View file

@ -167,6 +167,7 @@ input {
opacity: 0;
height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it
width: 0;
position: absolute;
}
@supports (-moz-appearance: none) {

1
src/common-components/site-footer/site-footer.spec.js
View file

@ -37,6 +37,7 @@ describe("site-footer.vue", () => {
const mockMixin = {
methods: {
getCmsContent: jest.fn(),
getPageNameByQueryString: jest.fn(() => "welcome-page"),
getFooterInfoBoxHeight: jest.fn(() => 80),
},
};

21
src/common-components/site-footer/site-footer.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="row" :style="`padding-bottom: ${paddingHeight}px`">
</div>
<div class="row">
<div class="footerImage" id="imgCity" v-if="footerImageURL" >
<img id="siteFooterImage" :src="footerImageURL" />
</div>
<footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
@ -37,6 +37,7 @@
<script>
import textLink from "@/ux-components/text-link/text-link";
import buttonMain from "@/ux-components/button-main/button-main";
import { issPageValues } from "@/router/router-constants/issPage-values"
export default {
name: "siteFooter",
@ -57,7 +58,7 @@ export default {
};
},
mounted() {
this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
this.paddingHeight = this.includeFooterImage ? this.getFooterInfoBoxHeight() + 89 : this.getFooterInfoBoxHeight() + 24;
this.$nextTick(() => {
window.addEventListener("resize", this.onResize);
});
@ -80,6 +81,11 @@ export default {
footerImageURL()
{
return this.getCmsContent(this.cmsWidgetName, "FooterImageURL");
},
includeFooterImage()
{
const currentPageName = this.getPageNameByQueryString();
return (currentPageName.toLowerCase() == issPageValues.WELCOME_PAGE);
}
},
methods: {
@ -140,4 +146,15 @@ export default {
overflow-x: visible; // needed to fix hidden footer on some iphones
}
}
.footerImage
{
text-align: center;
position: sticky;
bottom: 72px;
}
#siteFooterImage
{
width: 100%;
}
</style>

1
src/constants/application-config.js
View file

@ -9,6 +9,7 @@ const applicationConfig = {
APPLICATION_ABBREVIATION: "iss",
PAGE_QUERYSTRING: 'issPage',
GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY,
ISS_DEV_CMS_DOMAIN: "https://digitalisscms.dev.safelite.io",
};
export { applicationConfig };

12
src/constants/endpoints.js
View file

@ -60,16 +60,20 @@ const endpoints = {
method: "POST",
},
LookupVehicleByVin: {
url: "/vehicle/api/v1/vehicle/lookup",
method: "POST",
url: "/vehicle/api/v1/vehicle/lookup",
method: "POST",
},
LookupVinByAddress: {
url: "/vehicle/api/v1/vehicle/lookup-vin-by-address",
method: "POST",
},
LookupVinByPlate: {
url: "/vehicle/api/v1/vehicle/lookup-vin-by-plate",
method: "POST",
},
InitializeSession: {
url: "/analytics/api/v1/analytics/initialize",
method: "POST",
url: "/analytics/api/v1/analytics/initialize",
method: "POST",
},
GetExperimentsByUser: {
url: "/analytics/api/v1/analytics/get-experiments",

70
src/helpers/damage-helper.js
View file

@ -5,15 +5,10 @@ import { useMainStore } from '@/store';
export function getDamageString() {
const mainStore = useMainStore();
// If it's a repair it's always a windshield.
const { isRepair } = mainStore.damage;
if (isRepair) {
return damageCustomLabels.WINDSHIELD;
}
const damageLocations = mainStore.damage.glassToReplace;
if (!damageLocations || !Array.isArray(damageLocations)) {
if (isRepair || !damageLocations || !Array.isArray(damageLocations)) {
return '';
}
@ -40,6 +35,41 @@ export function getDamageString() {
return '';
}
function hasMatchingReplacementOption(vehicleDamageOptions, selectedGlassToReplace) {
let result = true;
const optionsMap = {
Windshield: 'windshieldOptions',
Driver: 'driverSideOptions',
Passenger: 'passengerSideOptions',
Rear: 'backGlassOptions',
};
for (const glassToReplace of selectedGlassToReplace) {
const propName = optionsMap[glassToReplace.glassLocation];
const { availableReplacementOptions } = vehicleDamageOptions[propName];
if (!availableReplacementOptions.includes(glassToReplace.glassName)) {
result = false;
break;
}
}
return result;
}
export async function isGlassAvailableForCarId(carId) {
const mainStore = useMainStore();
try {
const vehicleDamageOptionsResponse = await mainStore.getDamageOptions(carId);
const selectedGlassToReplace = mainStore.damage.glassToReplace;
return hasMatchingReplacementOption(vehicleDamageOptionsResponse.data, selectedGlassToReplace);
} catch (error) {
return false;
}
}
/**
* Commented code are copied directly from DigitalConsumer.FixMyGlass
* and have not been adjusted for ISS.
@ -59,31 +89,3 @@ export function getDamageString() {
// : "glass";
// return returnString;
// }
// export async function isGlassAvailableForCarId(carId) {
// const newGlassOptions = await baseMixin.methods.dispatchStoreAction(
// storeActions.GET_DAMAGE_OPTIONS,
// { carId: carId }
// );
// const currentGlassOptions = store.getters.damage.glassToReplace;
// const optionsMap = {
// Windshield: "windshieldOptions",
// Driver: "driverSideOptions",
// Passenger: "passengerSideOptions",
// Rear: "backGlassOptions",
// };
// for (const option of currentGlassOptions) {
// if (
// !newGlassOptions.data[
// optionsMap[option.glassLocation]
// ].availableReplacementOptions.includes(option.glassName)
// ) {
// return false;
// }
// }
// return true;
// }

89
src/layouts/capability-questions/capability-questions.vue Normal file
View file

@ -0,0 +1,89 @@
<template>
<Form
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles overflow-auto">
<siteHeader
cmsWidgetName="SiteHeaderWidget"
/>
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
/>
<div class="fade-on-route-transition sub-container make-tall mt-5">
<p>Placeholder for capability-questions page</p>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</Form>
</template>
<script>
// Import Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper';
// Import Component
import baseFormMixin from '@/mixins/base-form-mixin';
import { Form } from 'vee-validate';
import siteFooter from '@/common-components/site-footer/site-footer.vue';
import siteHeader from '@/common-components/site-header/site-header.vue';
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
export default {
name: 'capability-questions',
mixins: [baseFormMixin],
components: {
siteFooter,
siteHeader,
siteSubHeader,
Form,
vehicleBanner,
},
data() {
return {};
},
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
arePagePrerequisiteValid() {
return true;
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {},
resetDependentState() {},
},
};
</script>

89
src/layouts/coverage-statement/coverage-statement.vue Normal file
View file

@ -0,0 +1,89 @@
<template>
<Form
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles overflow-auto">
<siteHeader
cmsWidgetName="SiteHeaderWidget"
/>
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
/>
<div class="fade-on-route-transition sub-container make-tall mt-5">
<p>Placeholder for coverage-statement page</p>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</Form>
</template>
<script>
// Import Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper';
// Import Component
import baseFormMixin from '@/mixins/base-form-mixin';
import { Form } from 'vee-validate';
import siteFooter from '@/common-components/site-footer/site-footer.vue';
import siteHeader from '@/common-components/site-header/site-header.vue';
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
export default {
name: 'coverage-statement',
mixins: [baseFormMixin],
components: {
siteFooter,
siteHeader,
siteSubHeader,
Form,
vehicleBanner,
},
data() {
return {};
},
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
arePagePrerequisiteValid() {
return true;
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {},
resetDependentState() {},
},
};
</script>

63
src/layouts/license-plate-lookup/license-plate-lookup-alerts.spec.js Normal file
View file

@ -0,0 +1,63 @@
/* eslint-env jest */
import { getDamageString } from '@/helpers/damage-helper';
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import { RouterLinkStub } from '@vue/test-utils';
import { render } from '@testing-library/vue';
import '@testing-library/jest-dom';
import LicensePlateLookupAlertsComponent from './license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
jest.mock('@/helpers/damage-helper');
const mountOptions = {
global: {
stubs: {
RouterLink: RouterLinkStub,
},
mixins: [
{
methods: {
getCmsContent: jest.fn(() => ''),
getFooterInfoBoxHeight: jest.fn(() => 80),
cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
},
},
],
},
};
describe('license-plate-lookup-alerts.vue', () => {
test('VehicleNotFoundAlert is displayed on the screen', () => {
// Arrange
mountOptions.props = {
activeAlertType: vehicleLookupAlertTypes.NOT_FOUND,
};
// Act
const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
const VehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
const VehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
// Assert
expect(VehicleNotFoundAlert).toBeVisible();
expect(VehicleNotMatchedAlert).toEqual(null);
});
test('VehicleNotMatchedAlert is displayed on the screen', () => {
// Arrange
getDamageString.mockImplementation(() => 'Mock Damage String');
mountOptions.props = {
activeAlertType: vehicleLookupAlertTypes.NOT_MATCHED,
};
// Act
const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
const VehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
const VehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
// Assert
expect(VehicleNotMatchedAlert).toBeVisible();
expect(VehicleNotFoundAlert).toEqual(null);
});
})

49
src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue Normal file
View file

@ -0,0 +1,49 @@
<template>
<div
id="vin-lookup-alerts-wrapper"
:class="wrapperCssClass"
>
<vehicleNotFoundAlert
v-if="isVehicleNotFoundVisible"
/>
<vehicleNotMatchedAlert
v-else-if="isVehicleNotMatchedVisible"
/>
</div>
</template>
<script>
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import vehicleNotFoundAlert from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue';
import vehicleNotMatchedAlert from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
export default {
name: 'license-plate-lookup-alerts',
components: {
vehicleNotFoundAlert,
vehicleNotMatchedAlert,
},
props: {
activeAlertType: {
type: String,
validator(value) {
const acceptedValues = [null];
acceptedValues.push(...Object.values(vehicleLookupAlertTypes));
return acceptedValues.includes(value);
},
},
},
computed: {
isVehicleNotFoundVisible() {
return this.activeAlertType === vehicleLookupAlertTypes.NOT_FOUND;
},
isVehicleNotMatchedVisible() {
return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
},
wrapperCssClass() {
return {
'mb-5': this.activeAlertType !== null,
};
},
},
};
</script>

27
src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue Normal file
View file

@ -0,0 +1,27 @@
<template>
<alert
alert-class="alert-danger"
cms-widget-name="AlertVinNotFoundWidget"
id="vehicle-not-found-alert"
aria-label="vehicle-not-found-alert"
/>
</template>
<script>
import alert from '@/ux-components/alert/alert.vue';
export default {
name: 'vehicle-not-found-alert',
components: {
alert,
},
};
</script>
<style>
/**
Override wrong margin-bottom rule in the Alert component.
*/
#vehicle-not-found-alert p:last-of-type {
margin-bottom: 0 !important;
}
</style>

50
src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue Normal file
View file

@ -0,0 +1,50 @@
<template>
<alert
alert-class="alert-warning"
cms-widget-name="AlertMatchedDifferentVehicleWidget"
:manual-copy="body"
:manual-headline="header"
aria-label="vehicle-not-matched-alert"
/>
</template>
<script>
import { getDamageString } from '@/helpers/damage-helper';
import alert from '@/ux-components/alert/alert.vue';
export default {
name: 'vehicle-not-matched-alert',
components: {
alert,
},
inject: ['vehicleFromLookup'],
computed: {
header() {
return (
this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
.replaceAll('{custom:damage}', getDamageString())
);
},
body() {
let year = '';
let make = '';
let model = '';
if (this.vehicleFromLookup) {
year = this.vehicleFromLookup.year;
make = this.vehicleFromLookup.make;
model = this.vehicleFromLookup.model;
}
return (
this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
.replaceAll('{custom:damage}', getDamageString())
.replaceAll('{custom:vinlookupYear}', year)
.replaceAll('{custom:vinlookupMake}', make)
.replaceAll('{custom:vinlookupModel}', model)
);
},
},
};
</script>

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

@ -0,0 +1,172 @@
// Components
import licensePlateLookup from "@/layouts/license-plate-lookup/license-plate-lookup.vue";
import licensePlateQuestion from "@/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue";
// Supporting files
import { shallowMount } from '@vue/test-utils';
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { nextTick } from "vue";
import { useMainStore } from "@/store";
import { applicationConfig } from "@/constants/application-config";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
// Mock damage helper
jest.mock("@/helpers/damage-helper", () => ({
isGlassAvailableForCarId: () => {
return false;
},
getDamageString: () => {
return "damage string";
},
}));
describe("license-plate-lookup.vue", () => {
test("Vehicle make set, arePagePrerequisitesValid should be true", () => {
//Arrange
const { wrapper } = setupMocks({});
useMainStore().order.vehicle.carId = "CR00000395";
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { issPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
});
describe("navigation", () => {
test("BackButtonAction triggers a router.navigate change", async () => {
//Arrange
const { wrapper, apiPromise } = setupMocks({
mountOptionsMockData: {
router: {
navigate: jest.fn(),
},
},
});
//Act
licensePlateLookup.beforeRouteEnter.call(
wrapper.vm,
{ query: { issPage: "license-plate-lookup" } },
undefined,
(c) => c(wrapper.vm)
);
wrapper.vm.backButtonAction();
await nextTick();
//Assert
return apiPromise.finally(() => {
try {
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
}
catch (e) {
throw e
}
});
});
// TODO: Create test for navigating forward when user clicks Continue
// and information entered is correct (no alerts)
// TODO: Create test for license-plate-question component emitting value when user clicks Continue
// and information entered is correct (no alerts)
// TODO: Create test for zip-question component emitting value when user clicks Continue
// and information entered is correct (no alerts)
// *The above will be completed when navigation from page is complete (SSR-179)
});
function setupMocks({
licensePlateQuestionCmsContent = {},
licensePlateQuestionInitialData = {},
pageHeaderWidgetHeaderText = {},
pageFooterWidgetCmsContent = {},
mountOptionsMockData = {},
//Values to set in the state store
carId = null,
registrationZipCode = null, //"55555",
licensePlate = null, //"TESTPLATE",
}) {
//Mock api responses
const apiResponses = {
cmsContent: {
SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
LicensePlateQuestion: licensePlateQuestionCmsContent,
VehicleBannerWidget: {
GenericVehicleImage:
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
},
SiteHeaderWidget: {
LogoImage:
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
},
SiteFooterWidget: pageFooterWidgetCmsContent,
},
licensePlateQuestionInitialData: licensePlateQuestionInitialData,
};
mountOptionsMockData = {
...mountOptionsMockData,
router: {
navigate: jest.fn(),
navigateWithoutSaving: jest.fn(),
navigateWithSaving: jest.fn(),
},
store: {
getters: {
vehicle: {
registration: {
licensePlate: licensePlate,
zipCode: registrationZipCode,
},
carId: carId,
},
},
},
};
const apiPromise = Promise.resolve(apiResponses);
settleAllPromises.mockImplementation(() => apiPromise);
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
//Mock make question methods
licensePlateQuestion.methods = {
loadInitialData: jest.fn(),
initializeComponent: jest.fn(),
};
const mountOptions = getMountOptions(mountOptionsMockData);
const wrapper = shallowMount(licensePlateLookup, mountOptions);
const licensePlateQuestionWrapper = wrapper.findComponent({ name: "licensePlateQuestion" });
licensePlateQuestionWrapper.vm.initializeComponent =
licensePlateQuestion.methods.initializeComponent;
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
return { wrapper, apiPromise };
}

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

@ -1,53 +1,86 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit">
<Form
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
v-slot="{ meta }">
<div class="page-container-grouped-styles overflow-auto">
<SiteHeader
cms-widget-name="SiteHeaderWidget"
/>
<VehicleBanner
<siteHeader cms-widget-name="SiteHeaderWidget" />
<vehicleBanner
cms-widget-name="VehicleBannerWidget"
:display-generic-vehicle-image="false"
/>
<SiteSubHeader
cms-widget-name="SiteSubHeaderWidget"
/>
<div class="fade-on-route-transition sub-container make-tall">
<p>License Plate Lookup Page Placeholder</p>
<SiteFooter
:display-generic-vehicle-image="false" />
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall mt-5">
<licensePlateLookupAlerts
:activeAlertType="activeVehicleLookupAlertType"
/>
<licensePlateQuestion
v-model="licensePlate"/>
<zipQuestion
v-model="registrationZipCode"
class="mt-4" />
<siteFooter
:isForwardActionDisabled="!meta.valid"
cms-widget-name="SiteFooterWidget"
:is-forward-action-disabled="isForwardActionDisabled"
@back-clicked="backButtonAction"
@forward-clicked="forwardButtonAction"
/>
ref="siteFooter" />
</div>
</div>
</Form>
</template>
<script>
// Import Supporting Files
import { computed } from 'vue';
import { endpoints } from '@/constants/endpoints';
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import globalMethods from '@/global-methods';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store';
// Import Component
import SiteFooter from '@/common-components/site-footer/site-footer.vue';
import SiteHeader from '@/common-components/site-header/site-header.vue';
import SiteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
import VehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
import baseFormMixin from '@/mixins/base-form-mixin';
import { Form } from 'vee-validate';
import siteFooter from '@/common-components/site-footer/site-footer.vue';
import siteHeader from '@/common-components/site-header/site-header.vue';
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
import licensePlateQuestion from '@/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue';
import zipQuestion from '@/layouts/license-plate-lookup/zip-question/zip-question.vue';
import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
export default {
name: 'license-plate-lookup',
mixins: [BaseFormMixin],
mixins: [baseFormMixin],
components: {
Form,
SiteFooter,
SiteHeader,
SiteSubHeader,
VehicleBanner,
siteFooter,
siteHeader,
siteSubHeader,
vehicleBanner,
textboxQuestion,
licensePlateQuestion,
zipQuestion,
licensePlateLookupAlerts
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
data() {
return {};
return {
activeVehicleLookupAlertType: null,
vehicleFromLookup: null,
licensePlate: null,
registrationZipCode: null,
};
},
provide() {
return {
vehicleFromLookup: computed(() => this.vehicleFromLookup),
};
},
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@ -66,14 +99,12 @@ export default {
vm.setCmsContent(resultMap.cmsContent);
});
},
computed: {
isForwardActionDisabled() {
return true;
}
},
methods: {
arePagePrerequisiteValid() {
return true;
arePagePrerequisitesValid() {
if (this.mainStore.order.vehicle.carId) {
return true;
}
return false;
},
backButtonAction() {
/**
@ -81,8 +112,56 @@ export default {
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
return true;
async forwardButtonAction() {
this.resetActiveAlert();
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
const vehicleLookupResponse = await this.lookupVinByPlate(this.licensePlate);
if (vehicleLookupResponse.error) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
this.resetVehicleFromLookup();
this.$refs.siteFooter.removeLoader();
return;
}
this.vehicleFromLookup = vehicleLookupResponse.data.vehicle;
if (this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
this.$refs.siteFooter.removeLoader();
}
// Continue
},
async lookupVinByPlate(licensePlate) {
try {
const response = await globalMethods.callHttpClient({
method: endpoints.LookupVinByPlate.method,
endpoint: endpoints.LookupVinByPlate.url,
payload: {
licensePlate,
licenseState: "IL" // hard coded until Welcome Page is complete and license state can be pulled from store
},
});
return response;
} catch (responseError) {
return {
error: {
status: responseError.status,
},
};
}
},
resetActiveAlert() {
this.activeVehicleLookupAlertType = null;
},
resetVehicleFromLookup() {
this.vehicleFromLookup = null;
},
resetDependentState() {},
},

43
src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<textboxQuestion
inputId="license-plate-question"
cmsWidgetName="LicensePlateNumberQuestionWidget"
v-model="licensePlate"
isRequired
disableAutoFill
validationRules="license-plate-required"
/>
</template>
<script>
// Import Other Supporting File(s)
import { defineRule } from 'vee-validate';
import { required } from '@/helpers/validation-rules';
import { errorMessages } from '@/constants/error-messages';
// Import Component(s)
import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
export default {
name: 'license-plate-question',
props: {
modelValue: String,
},
emits: ['update:modelValue'],
components: {
textboxQuestion,
},
computed: {
licensePlate: {
get() {
return this.modelValue;
},
set(newValue) {
this.$emit('update:modelValue', newValue);
},
},
},
};
</script>

44
src/layouts/license-plate-lookup/zip-question/zip-question.vue Normal file
View file

@ -0,0 +1,44 @@
<template>
<textboxQuestion
inputId="zip"
cmsWidgetName="RegistrationZipQuestionWidget"
v-model="registrationZipCode"
isRequired
disableAutoFill
validationRules="zip-required|zip-format"
/>
</template>
<script>
// Import Other Supporting File(s)
import { defineRule } from 'vee-validate';
import { regex, required } from '@/helpers/validation-rules';
import { errorMessages } from '@/constants/error-messages';
// Import Component(s)
import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
export default {
name: 'zip-question',
props: {
modelValue: String,
},
emits: ['update:modelValue'],
components: {
textboxQuestion,
},
computed: {
registrationZipCode: {
get() {
return this.modelValue;
},
set(newValue) {
this.$emit('update:modelValue', newValue);
},
},
},
};
</script>

89
src/layouts/molding-questions/molding-questions.vue Normal file
View file

@ -0,0 +1,89 @@
<template>
<Form
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles overflow-auto">
<siteHeader
cmsWidgetName="SiteHeaderWidget"
/>
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
/>
<div class="fade-on-route-transition sub-container make-tall mt-5">
<p>Placeholder for molding-questions page</p>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</Form>
</template>
<script>
// Import Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper';
// Import Component
import baseFormMixin from '@/mixins/base-form-mixin';
import { Form } from 'vee-validate';
import siteFooter from '@/common-components/site-footer/site-footer.vue';
import siteHeader from '@/common-components/site-header/site-header.vue';
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
export default {
name: 'molding-questions',
mixins: [baseFormMixin],
components: {
siteFooter,
siteHeader,
siteSubHeader,
Form,
vehicleBanner,
},
data() {
return {};
},
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
arePagePrerequisiteValid() {
return true;
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {},
resetDependentState() {},
},
};
</script>

1
src/layouts/vehicle-lookup/vehicle-lookup.spec.js
View file

@ -79,6 +79,7 @@ function setupMocks() {
return '';
}),
getFooterInfoBoxHeight: jest.fn(() => 80),
getPageNameByQueryString: jest.fn(() => "vehicle-lookup"),
},
},
],

9
src/layouts/vehicle-make/vehicle-make.spec.js
View file

@ -6,6 +6,7 @@ import baseMixin from "@/mixins/base-mixin.js";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { nextTick } from "vue";
import { useMainStore } from "@/store";
import { applicationConfig } from "@/constants/application-config";
// Components
import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
@ -119,12 +120,12 @@ function setupMocks({
VehicleMakeQuestion: vehicleMakeQuestionCmsContent,
VehicleBannerWidget: {
GenericVehicleImage:
"https://digitalisscms.dev.safelite.io/images/default-source/default-album/blurred-image.jpg",
},
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
},
SiteHeaderWidget: {
LogoImage:
"https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg",
},
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
},
},
makeQuestionInitialData: makeQuestionInitialData,
};

9
src/layouts/vehicle-model/vehicle-model.spec.js
View file

@ -11,6 +11,7 @@ import baseMixin from "@/mixins/base-mixin.js";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { nextTick } from "vue";
import { useMainStore } from "@/store";
import { applicationConfig } from "@/constants/application-config";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
@ -120,12 +121,12 @@ function setupMocks({
VehicleModelQuestion: buttonQuestionContent,
VehicleBannerWidget: {
GenericVehicleImage:
"https://digitalisscms.dev.safelite.io/images/default-source/default-album/blurred-image.jpg",
},
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
},
SiteHeaderWidget: {
LogoImage:
"https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg",
},
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
},
},
modelQuestionInitialData: modelQuestionInitialData,
};

6
src/layouts/vehicle-parts/vehicle-parts.spec.js
View file

@ -11,7 +11,7 @@ import { nextTick } from "vue";
import baseMixin from "@/mixins/base-mixin.js";
import { useMainStore } from "@/store";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import { applicationConfig } from "@/constants/application-config";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
@ -387,11 +387,11 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}
SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
VehicleBannerWidget: {
GenericVehicleImage:
"https://digitalisscms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
},
FunnelHeaderWidget: {
LogoImage:
"https://digitalisscms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
},
ColorQuestionWidget: "Please choose your rear window tint color",
FeatureQuestionWidget: "Ok no choose features",

9
src/layouts/vehicle-style/vehicle-style.spec.js
View file

@ -7,6 +7,7 @@ import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { nextTick } from "vue";
import { useMainStore } from "@/store";
import router from "@/router";
import { applicationConfig } from "@/constants/application-config";
// Components
import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
@ -175,12 +176,12 @@ function setupMocks({
VehicleStyleQuestion: vehicleStyleQuestionCmsContent,
VehicleBannerWidget: {
GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
},
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
},
SiteHeaderWidget: {
LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
},
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
},
},
styleQuestionInitialData: styleQuestionInitialData,
};

9
src/layouts/vehicle-year/vehicle-year.spec.js
View file

@ -6,6 +6,7 @@ import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
import baseMixin from "@/mixins/base-mixin.js";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { nextTick } from "vue";
import { applicationConfig } from "@/constants/application-config";
// Mock our module for promises.
@ -83,12 +84,12 @@ function setupMocks({
VehicleYearQuestion: vehicleYearQuestionCmsContent,
VehicleBannerWidget: {
GenericVehicleImage:
"https://digitalisscms.dev.safelite.io/images/default-source/default-album/blurred-image.jpg",
},
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
},
SiteHeaderWidget: {
LogoImage:
"https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg",
},
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
},
},
yearQuestionInitialData: yearQuestionInitialData,
};

27
src/mixins/analytics-mixin.js
View file

@ -18,9 +18,18 @@ import { cookieNames } from "@/constants/cookie-names";
import { useMainStore } from "@/store";
export default {
methods: {
methods: {
getPageNameByQueryString() {
const params = new URLSearchParams(location.search);
if (params.has(queryStrings.ISS_PAGE)) {
return params.get(queryStrings.ISS_PAGE);
} else {
return "";
}
},
logPageView(pageEvent) {
const currentPageName = getPageNameByQueryString();
const currentPageName = this.getPageNameByQueryString();
var payload = {
userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(),
@ -36,7 +45,7 @@ export default {
},
logCustomEvent(category, action, label, value) {
const currentPageName = getPageNameByQueryString();
const currentPageName = this.getPageNameByQueryString();
var payload = {
userId: getDeviceIdValue(),
@ -55,7 +64,7 @@ export default {
},
pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
const currentPageName = getPageNameByQueryString();
const currentPageName = this.getPageNameByQueryString();
const labelToLog = getValueToLog(label, valueToLogType);
const eventToBePushed = {
@ -75,7 +84,7 @@ export default {
},
pushPageViewToGA() {
const currentPageName = getPageNameByQueryString();
const currentPageName = this.getPageNameByQueryString();
const pageViewEvent = {
event: GaEvents.PAGE_VIEW_EVENT,
pagePath: `/iss/?${queryStrings.ISS_PAGE}=${currentPageName}`,
@ -187,15 +196,7 @@ function pushToDataLayerIfDefined(data) {
}
}
function getPageNameByQueryString() {
const params = new URLSearchParams(location.search);
if (params.has(queryStrings.ISS_PAGE)) {
return params.get(queryStrings.ISS_PAGE);
} else {
return "";
}
}
function getValueToLog(value, valueToLogType) {
if (valueToLogType != null && valueToLogType === ValueToLogTypes.LAST_5) {

1
src/router/router-constants/issPage-values.js
View file

@ -13,6 +13,7 @@ export const issPageValues = {
PART_QUESTIONS: "part-questions",
MOLDING_QUESTIONS: "molding-questions",
CAPABILITY_QUESTIONS: "capability-questions",
COVERAGE_STATEMENT: "coverage-statement",
REVEAL: "reveal",
ESTIMATE: "estimate",
ADDRESS_VEHICLES: "address-vehicles",

9
src/router/router-constants/routing-table.js
View file

@ -103,6 +103,15 @@ const routingTable = function(store) {
},
],
},
{
issPageValue: issPageValues.LICENSE_PLATE_LOOKUP,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.VEHICLE_LOOKUP,
},
],
},
{
issPageValue: issPageValues.PART_QUESTIONS,
maps: [

14
src/store/index.js
View file

@ -415,11 +415,23 @@ export const useMainStore = defineStore({
},
updateVehicle(vehicle) {
// Assuming that the method caller pass all the properties.
// otherwise need to check for undefined for every property.
this.order.vehicle.carId = vehicle.carId;
this.order.vehicle.category = vehicle.category;
this.order.vehicle.year = vehicle.year;
this.order.vehicle.make = vehicle.make;
this.order.vehicle.model = vehicle.model;
this.order.vehicle.style = vehicle.style;
this.order.vehicle.vin = vehicle.vin;
this.order.vehicle.imageUrl = vehicle.imageUrl;
this.order.vehicle.imageVifNumber = vehicle.imageVifNumber;
this.order.vehicle.imageColor = vehicle.imageColor;
this.order.vehicle.imageColor = vehicle.imageVifColor;
},
updateVehicleVin(vin) {
this.order.vehicle.vin = vin;
},
resetVehicleState()