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

Merge pull request #319 from Safelite/feature/digital/SSR-418.2

Browse source 
Feature/digital/ssr 418.2
This commit is contained in:
Jason Wheeler 2023-05-22 10:04:24 -04:00 committed by GitHub
commit 40ed6033ae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 331 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/constants/query-strings.js
View file

@ -1,5 +1,5 @@
const queryStrings = {
ISS_PAGE: 'issPage'
ISS_PAGE: 'issPage',
};
export { queryStrings };

18
src/iss-components/site-sub-header/site-sub-header.vue
View file

@ -12,8 +12,8 @@
/>
</h5>
</div>
<div class="d-flex align-items-center container-fluid overflow-hidden" :class="justifySubheader">
<p class="text-center fw-normal mb-0 subheader-secondary" :class="alternateFormatting">
<div class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden" :class="justifySubheader">
<p class="fw-normal mb-0" :class="alternateFormatting">
<span v-html="subText">
</span>
</p>
@ -92,4 +92,18 @@ import buttonBack from "@/iss-components/site-sub-header/button-back/button-back
line-height: 24px;
}
.subheader-secondary {
&.justify-content-center{
p {
text-align: center;
}
}
&.justify-content-left{
p {
text-align: left;
}
}
}
</style>

2
src/iss-components/vehicle-banner/vehicle-banner.vue
View file

@ -66,7 +66,7 @@ export default {
default:
return this.carUnmatchedVehicleIcon;
}
}
},
}
};
</script>

48
src/iss-components/vehicle-question/vehicle-question.vue
View file

@ -1,48 +0,0 @@
<template>
<dropdownQuestion
:options="Options"
disableAutoFill
placeHolderText="Select an option"
v-model="selectedValue"
/>
</template>
<script>
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
export default {
name: "vehicle-question",
data() {
return {
values: [],
};
},
props: {
modelValue: String,
updateValues: Function,
},
components: {
dropdownQuestion
},
computed: {
selectedValue: {
get: function() {
return this.modelValue?.toString();
},
set: function(newValue) {
this.$emit("update:modelValue",newValue?.toString());
}
},
Options() {
return this.values;
},
},
methods: {
async getNewValues() {
const results = await this.updateValues();
this.values = results?.data;
},
},
};
</script>

54
src/layouts/entry-page/entry-page.spec.js Normal file
View file

@ -0,0 +1,54 @@
// Components
import entryPage from "@/layouts/entry-page/entry-page.vue";
import { shallowMount } from '@vue/test-utils';
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { useMainStore } from "@/store";
// 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(),
setupModalLinks: jest.fn(),
}));
describe('entry-page.vue', () => {
test('should render', () => {
const queryString = 'policynumber="123456"'
const { wrapper } = setupMocks(queryString);
console.log(wrapper.vm.$route.query);
expect(wrapper).toBeTruthy();
})
});
function setupMocks(queryString) {
const mountOptions = getMountOptions({
router: {
navigate: jest.fn(),
},
route: { queryString }
});
const wrapper = shallowMount(
entryPage,
mountOptions
);
const apiResponses = {};
settleAllPromises.mockImplementation(() => apiResponses);
fetchCmsContentForPage.mockImplementation (() => {});
return { wrapper };
};

27
src/layouts/entry-page/entry-page.vue
View file

@ -33,15 +33,17 @@
this.$route
);
},
async validateClientTagOnEntry() {
parseQueryParms() {
// Dump the query string parameters into an array. Remove casing on the key for easy compare.
let queryStringParams = [];
for ( let param in this.$route.query)
{
queryStringParams[param.toLowerCase()] = this.$route.query[param];
}
return queryStringParams;
},
async validateClientTagOnEntry() {
const queryStringParams = this.parseQueryParms();
const clientTag = queryStringParams["clienttag"];
const clientTagPresent = !!clientTag;
let authorized = false;
@ -86,16 +88,19 @@
try
{
const clientFlags = JSON.parse(data.clientFlags);
if ( clientFlags.TPAEnabled )
if(data.clientFlags)
{
this.mainStore.issConfig.enableTPAFlow = true;
}
const clientFlags = JSON.parse(data.clientFlags);
if ( clientFlags.ClientDisplayName != null )
{
this.mainStore.issConfig.clientDisplayName = clientFlags.ClientDisplayName;
if ( clientFlags.TPAEnabled )
{
this.mainStore.issConfig.enableTPAFlow = true;
}
if ( clientFlags.ClientDisplayName != null )
{
this.mainStore.issConfig.clientDisplayName = clientFlags.ClientDisplayName;
}
}
}
catch ( e )

62
src/layouts/vehicle-selection/vehicle-question/vehicle-question.vue Normal file
View file

@ -0,0 +1,62 @@
<template>
<dropdownQuestion
:options="values"
disableAutoFill
placeHolderText="Select an option"
v-model="selectedValue"
:isDisabled="!values.length"
/>
</template>
<script>
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
export default {
name: "vehicle-question",
data() {
return {
values: [],
selectedIndex: null,
};
},
props: {
modelValue: String,
updateValues: Function,
},
components: {
dropdownQuestion
},
computed: {
selectedValue: {
get() {
return this.selectedIndex?.toString();
},
set(newValue) {
this.selectedIndex = newValue;
newValue = newValue != null && newValue > -1 ? this.values[newValue] : null;
this.$emit("update:modelValue", newValue);
}
},
},
methods: {
async getNewValues() {
const results = await this.updateValues();
this.values = results?.data;
if(this.values.length == 1)
{
this.selectedValue = 0;
}
else {
this.selectedValue = null;
}
},
clearValues() {
this.values = [];
this.selectedValue = null;
}
},
};
</script>

299
src/layouts/vehicle-selection/vehicle-selection.vue
View file

@ -1,5 +1,5 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles position-relative">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
@ -8,19 +8,63 @@
<div class="row">
<div class="col">
<div class="select-car-form rounded">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5" />
<vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="vehicleYearQuestion" cmsWidgetName="VehicleYearQuestion" :updateValues="updateYearValues" validationRules="year-required" inputId="yearQuestionField"/>
<vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" ref="vehicleMakeQuestion" :updateValues="updateMakeValues" cmsWidgetName="VehicleMakeQuestion" validationRules="make-required" inputId="makeQuestionField"/>
<vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedModel" ref="vehicleModelQuestion" cmsWidgetName="VehicleModelQuestion" :updateValues="updateModelValues" validationRules="model-required" inputId="modelQuestionField"/>
<vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedStyle" ref="vehicleStyleQuestion" cmsWidgetName="VehicleStyleQuestion" :updateValues="updateStyleValues" validationRules="style-required" inputId="styleQuestionField"/>
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-5 mb-3" />
<siteFooter
cmsWidgetName="SiteFooterWidget"
@ForwardClicked="forwardButtonAction"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
ref="siteFooter"
/>
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="siteSubHeader"
justification="left"
/>
<vehicleQuestion
ref="vehicleYearQuestion"
class="mb-2 mt-4"
v-model="selectedYear"
cmsWidgetName="VehicleYearQuestion"
:updateValues="updateYearValues"
validationRules="year-required"
inputId="yearQuestionField"
/>
<vehicleQuestion
ref="vehicleMakeQuestion"
class="mb-2 mt-4"
v-model="selectedMake"
cmsWidgetName="VehicleMakeQuestion"
:updateValues="updateMakeValues"
validationRules="make-required"
inputId="makeQuestionField"
/>
<vehicleQuestion
ref="vehicleModelQuestion"
class="mb-2 mt-4"
v-model="selectedModel"
cmsWidgetName="VehicleModelQuestion"
:updateValues="updateModelValues"
validationRules="model-required"
inputId="modelQuestionField"
/>
<vehicleQuestion
ref="vehicleStyleQuestion"
class="mb-2 mt-4"
v-model="selectedStyle"
cmsWidgetName="VehicleStyleQuestion"
:updateValues="updateStyleValues"
validationRules="style-required"
inputId="styleQuestionField"
/>
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric"
class="mt-5 mb-3"
ref="banner"
/>
<siteFooter
cmsWidgetName="SiteFooterWidget"
@ForwardClicked="forwardButtonAction"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
ref="siteFooter"
/>
</div>
</div>
</div>
@ -37,14 +81,14 @@ import siteHeader from "@/iss-components/site-header/site-header";
import siteFooter from "@/iss-components/site-footer/site-footer";
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
import vehicleQuestion from "@/iss-components/vehicle-question/vehicle-question";
import vehicleQuestion from "@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue";
import { useMainStore } from '@/store';
// Supporting files
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import baseFormMixin from '@/mixins/base-form-mixin.js';
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { Form, defineRule } from "vee-validate";
import { Form, defineRule, useForm } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
@ -56,119 +100,138 @@ defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
export default {
name: "vehicle-selection",
mixins: [BaseFormMixin],
mixins: [baseFormMixin],
data() {
return {
selectedYear: null,
selectedMake: null,
selectedModel: null,
selectedStyle: null,
selectedStyle: null,
};
},
props:{
cmsWidgetName:String,
validationRules:String,
},
mounted(){
this.Years.getNewValues();
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
let resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
watch: {
selectedYear(yearIndex) {
const parsedYearIndex = parseInt(yearIndex);
this.mainStore.updateVehicleYear(this.Years.values[parsedYearIndex]);
this.Makes.getNewValues();
},
selectedMake(makeIndex) {
const parsedMakeIndex = parseInt(makeIndex);
this.mainStore.updateVehicleMake(this.Makes.values[parsedMakeIndex]);
this.Models.getNewValues();
},
selectedModel(modelIndex) {
const parsedModelIndex = parseInt(modelIndex);
this.mainStore.updateVehicleModel(this.Models.values[parsedModelIndex]);
this.Styles.getNewValues();
},
selectedStyle(styleIndex) {
const parsedStyleIndex = parseInt(styleIndex);
this.mainStore.updateVehicleStyle(this.Styles.values[parsedStyleIndex]);
},
},
computed:{
Years(){
return this.$refs["vehicleYearQuestion"];
props:{
cmsWidgetName:String,
validationRules:String,
},
Makes(){
return this.$refs["vehicleMakeQuestion"];
mounted(){
this.$refs["vehicleYearQuestion"].getNewValues();
},
Models(){
return this.$refs["vehicleModelQuestion"];
},
Styles(){
return this.$refs["vehicleStyleQuestion"];
}
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
let resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
watch: {
selectedYear(value) {
this.mainStore.updateVehicleYear(value);
if(value)
{
this.$refs["vehicleMakeQuestion"].getNewValues();
}
else{
this.$refs["vehicleMakeQuestion"].clearValues();
}
},
selectedMake(value) {
this.mainStore.updateVehicleMake(value);
if(value)
{
this.$refs["vehicleModelQuestion"].getNewValues();
}
else{
this.$refs["vehicleModelQuestion"].clearValues();
}
},
selectedModel(value) {
this.mainStore.updateVehicleModel(value);
if(value)
{
this.$refs["vehicleStyleQuestion"].getNewValues();
}
else{
this.$refs["vehicleStyleQuestion"].clearValues();
}
},
selectedStyle(value) {
this.mainStore.updateVehicleStyle(value);
this.mainStore.setVehicle();
},
},
methods: {
arePagePrerequisitesValid() {
return true;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
return this.navigateForward();
},
arePagePrerequisitesValid() {
return true;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
return this.navigateForward();
},
navigateForward() {
this.mainStore.setVehicle().then(() => {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
});
},
async updateYearValues() {
return await useMainStore().getVehicleYears();
},
async updateMakeValues() {
return await this.mainStore.getVehicleMakes();
},
async updateModelValues() {
return await this.mainStore.getVehicleModels();
},
async updateStyleValues() {
return await this.mainStore.getVehicleStyles();
},
navigateForward() {
this.mainStore.setVehicle().then(() => {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
});
},
async updateYearValues() {
return await useMainStore().getVehicleYears();
},
async updateMakeValues() {
return await this.mainStore.getVehicleMakes();
},
async updateModelValues() {
return await this.mainStore.getVehicleModels();
},
async updateStyleValues() {
return await this.mainStore.getVehicleStyles();
},
},
computed: {
displayGeneric() {
return !useMainStore().order.vehicle.imageUrl || !this.selectedStyle;
}
},
components: {
siteHeader,
siteSubHeader,
vehicleBanner,
siteFooter,
Form,
vehicleQuestion
},
components: {
siteHeader,
siteSubHeader,
vehicleBanner,
siteFooter,
Form,
vehicleQuestion
},
};
</script>
<style lang="scss">
.select-car-form {
margin-left: .75rem;
margin-right: .75rem;
}
.siteSubHeader {
margin-top: 1.5rem;
}
.subheader-secondary {
margin-top: .5rem;
padding: 0px;
}
</style>