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

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

Browse source
This commit is contained in:
Katie Kroell 2023-05-16 11:20:29 -04:00
commit 88a1eb56d1
11 changed files with 137 additions and 370 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,48 @@
<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>

6
src/layouts/payment-page/payment-page.vue
View file

@ -3,7 +3,7 @@
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid pb-2">
<div class="container-fluid pb-2 payment">
<p>Placeholder for payment page</p>
<siteFooter
cmsWidgetName="SiteFooterWidget"
@ -79,4 +79,8 @@ export default {
}
</script>
<style lang="scss">
.payment p{
margin-bottom:0.75rem;
}
</style>

5
src/layouts/review-page/review-page.vue
View file

@ -3,7 +3,7 @@
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid pb-2">
<div class="container-fluid pb-2 review">
<p>Placeholder for review page</p>
<siteFooter
cmsWidgetName="SiteFooterWidget"
@ -74,4 +74,7 @@ export default {
}
</script>
<style lang="scss">
.review p{
margin-bottom:0.75rem;
}
</style>

6
src/layouts/tpa-confirmation/tpa-confirmation.vue
View file

@ -3,7 +3,7 @@
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid pb-2">
<div class="container-fluid pb-2 confirmation">
<p>Placeholder for tpa-confrimation page</p>
<siteFooter
cmsWidgetName="SiteFooterWidget"
@ -77,4 +77,8 @@ export default {
}
</script>
<style lang="scss">
.confirmation p{
margin-bottom:0.75rem;
}
</style>

8
src/layouts/tpa-search/tpa-search.vue
View file

@ -3,7 +3,7 @@
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid pb-2">
<div class="container-fluid pb-2 search">
<p>Placeholder for TPA-Search</p>
<siteFooter
cmsWidgetName="SiteFooterWidget"
@ -68,4 +68,8 @@ export default {
Form,
},
}
</script>
</script><style lang="scss">
.search p{
margin-bottom:0.75rem;
}
</style>

7
src/layouts/tpa-submit/tpa-submit.vue
View file

@ -3,7 +3,7 @@
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid pb-2">
<div class="container-fluid pb-2 submit">
<p>Placeholder for TPA-Submit</p>
<siteFooter
cmsWidgetName="SiteFooterWidget"
@ -83,4 +83,9 @@ export default {
}
</script>
<style lang="scss">
.submit {
margin-bottom:0.75rem;
}
</style>

76
src/layouts/vehicle-selection/make-question/make-question.vue
View file

@ -1,76 +0,0 @@
<template>
<dropdownQuestion
cmsWidgetName="VehicleMakeQuestion"
ref="makeQuestion"
:options="makeOptions"
disableAutoFill
placeHolderText="Select an option"
validationRules="make-required"
inputId="makeQuestionField"
v-model="selectedValue"
/>
</template>
<script>
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import { defineRule } from "vee-validate";
defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
export default {
name: "make-question",
data() {
return {
values: [],
};
},
props: {
modelValue: String,
cmsWidgetName: String,
validationRules: String,
updateValues: Function,
},
components: {
dropdownQuestion
},
computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
selectedValue: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue",newValue);
}
},
makeOptions() {
const makeAnswers = this.values;
const makeAnswersObj ={};
if(makeAnswers)
{
for (let answer of Object.values(makeAnswers)) {
if (answer) {
makeAnswersObj[answer] = answer;
}
}
}
return makeAnswersObj
},
},
methods: {
async getNewValues() {
const results = await this.updateValues();
this.values = results?.data;
},
initializeComponent(initialData) {
this.values = initialData;
},
},
};
</script>

77
src/layouts/vehicle-selection/model-question/model-question.vue
View file

@ -1,77 +0,0 @@
<template>
<dropdownQuestion
cmsWidgetName="VehicleModelQuestion"
ref="modelQuestion"
:options="modelOptions"
disableAutoFill
placeHolderText="Select an option"
validationRules="model-required"
inputId="modelQuestionField"
v-model="selectedValue"
/>
</template>
<script>
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import { defineRule } from "vee-validate";
defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
export default {
name: "model-question",
data() {
return {
values: Array,
};
},
props: {
modelValue: String,
cmsWidgetName: String,
validationRules: String,
updateValues: Function,
},
components: {
dropdownQuestion
},
computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
modelOptions() {
const modelAnswers = this.values;
const modelAnswersObj ={};
if(modelAnswers)
{
for (let answer of Object.values(modelAnswers)) {
if (answer) {
modelAnswersObj[answer] = answer;
}
}
}
return modelAnswersObj
},
selectedValue: {
get: function() {
return this.modelValue
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
}
},
methods: {
async getNewValues() {
const results = await this.updateValues();
this.values = results?.data;
},
initializeComponent(initialData) {
this.values = initialData;
},
},
};
</script>

76
src/layouts/vehicle-selection/style-question/style-question.vue
View file

@ -1,76 +0,0 @@
<template>
<dropdownQuestion
cmsWidgetName="VehicleStyleQuestion"
ref="styleQuestion"
:options="styleOptions"
disableAutoFill
placeHolderText="Select an option"
validationRules="style-required"
inputId="styleQuestionField"
v-model="selectedValue"
/>
</template>
<script>
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import { defineRule } from "vee-validate";
defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
export default {
name: "style-question",
data() {
return {
values: [],
};
},
props: {
modelValue: String,
cmsWidgetName: String,
validationRules: String,
updateValues: Function,
},
components: {
dropdownQuestion
},
computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
styleOptions() {
const styleAnswers = this.values;
const styleAnswersObj ={};
if(styleAnswers)
{
for (let answer of Object.values(styleAnswers)) {
if (answer) {
styleAnswersObj[answer] = answer;
}
}
}
return styleAnswersObj
},
selectedValue: {
get: function() {
return this.modelValue
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
}
},
methods: {
async getNewValues() {
const results = await this.updateValues();
this.values = results?.data;
},
initializeComponent(initialData) {
this.values = initialData;
},
},
};
</script>

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

@ -8,12 +8,12 @@
<div class="row">
<div class="col">
<div class="select-car-form rounded">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="subheader" />
<yearQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="yearQuestion" />
<makeQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" :updateValues="updateMakeValues" ref="makeQuestion"/>
<modelQuestion v-model="selectedModel" :updateValues="updateModelValues" ref="modelQuestion" class="px-4 mb-2 mt-4"/>
<styleQuestion v-model="selectedStyle" :updateValues="updateStyleValues" ref="styleQuestion" class="px-4 mb-2 mt-4"/>
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-3" />
<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"
@ -37,16 +37,22 @@ 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 yearQuestion from "@/layouts/vehicle-selection/year-question/year-question";
import makeQuestion from "@/layouts/vehicle-selection/make-question/make-question";
import modelQuestion from "@/layouts/vehicle-selection/model-question/model-question";
import styleQuestion from "@/layouts/vehicle-selection/style-question/style-question";
import vehicleQuestion from "@/iss-components/vehicle-question/vehicle-question";
import { useMainStore } from '@/store';
// Supporting files
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import {Form} from "vee-validate";
import { Form, defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
//define validation rules
defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
export default {
name: "vehicle-selection",
@ -56,90 +62,76 @@ export default {
selectedYear: null,
selectedMake: null,
selectedModel: null,
selectedStyle: null,
years: []
selectedStyle: null,
};
},
props:{
cmsWidgetName:String,
validationRules:String,
},
mounted(){
this.Years.getNewValues();
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
const makeQuestionInitialDataPromise = makeQuestion.methods.getNewValues();
const modelQuestionInitialDataPromise = modelQuestion.methods.getNewValues();
const styleQuestionInitialDataPromise = styleQuestion.methods.getNewValues();
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "yearQuestionInitialData",
promise: yearQuestionInitialDataPromise,
},
{
resultKey: "makeQuestionInitialData",
promise: makeQuestionInitialDataPromise,
},
{
resultKey: "modelQuestionInitialData",
promise: modelQuestionInitialDataPromise,
},
{
resultKey: "styleQuestionInitialData",
promise: styleQuestionInitialDataPromise,
},
},
];
let resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.years = resultMap.yearQuestionInitialData;
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.yearQuestion.initializeComponent(
resultMap.yearQuestionInitialData
);
vm.$refs.makeQuestion.initializeComponent(
resultMap.makeQuestionInitialData
);
vm.$refs.modelQuestion.initializeComponent(
resultMap.modelQuestionInitialData
);
vm.$refs.styleQuestion.initializeComponent(
resultMap.styleQuestionInitialData
);
});
},
watch: {
selectedYear(yearIndex) {
const parsedYearIndex = parseInt(yearIndex);
this.mainStore.updateVehicleYear( this.years[parsedYearIndex] );
this.$refs["makeQuestion"].getNewValues();
const parsedYearIndex = parseInt(yearIndex);
this.mainStore.updateVehicleYear(this.Years.values[parsedYearIndex]);
this.Makes.getNewValues();
},
selectedMake(make) {
this.mainStore.updateVehicleMake( make );
this.$refs["modelQuestion"].getNewValues();
selectedMake(makeIndex) {
const parsedMakeIndex = parseInt(makeIndex);
this.mainStore.updateVehicleMake(this.Makes.values[parsedMakeIndex]);
this.Models.getNewValues();
},
selectedModel(model) {
this.mainStore.updateVehicleModel( model );
this.$refs["styleQuestion"].getNewValues();
selectedModel(modelIndex) {
const parsedModelIndex = parseInt(modelIndex);
this.mainStore.updateVehicleModel(this.Models.values[parsedModelIndex]);
this.Styles.getNewValues();
},
selectedStyle(style) {
this.mainStore.updateVehicleStyle( style );
selectedStyle(styleIndex) {
const parsedStyleIndex = parseInt(styleIndex);
this.mainStore.updateVehicleStyle(this.Styles.values[parsedStyleIndex]);
},
},
computed:{
Years(){
return this.$refs["vehicleYearQuestion"];
},
Makes(){
return this.$refs["vehicleMakeQuestion"];
},
Models(){
return this.$refs["vehicleModelQuestion"];
},
Styles(){
return this.$refs["vehicleStyleQuestion"];
}
},
methods: {
arePagePrerequisitesValid() {
return true;
},
backButtonAction() {
@ -156,6 +148,9 @@ export default {
this.$route
);
});
},
async updateYearValues() {
return await useMainStore().getVehicleYears();
},
async updateMakeValues() {
return await this.mainStore.getVehicleMakes();
@ -165,19 +160,15 @@ export default {
},
async updateStyleValues() {
return await this.mainStore.getVehicleStyles();
}
},
},
},
components: {
yearQuestion,
makeQuestion,
modelQuestion,
siteHeader,
siteSubHeader,
vehicleBanner,
siteFooter,
Form,
styleQuestion,
vehicleQuestion
},
};
</script>

63
src/layouts/vehicle-selection/year-question/year-question.vue
View file

@ -1,63 +0,0 @@
<template>
<dropdownQuestion
cmsWidgetName="VehicleYearQuestion"
ref="yearQuestion"
:options="years"
disableAutoFill
inputId="yearQuestionField"
placeHolderText="Select an option"
validationRules="year-required"
v-model="selectedValue"
/>
</template>
<script>
import { useMainStore } from '@/store';
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import { defineRule } from "vee-validate";
defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
export default {
name: "year-question",
data() {
return {
years : Array,
};
},
props: {
modelValue: Number,
cmsWidgetName: String,
},
components: {
dropdownQuestion
},
computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
selectedValue: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue",newValue);
},
}
},
methods: {
loadInitialData() {
return useMainStore().getVehicleYears();
},
initializeComponent(initialData) {
this.years = initialData;
},
},
};
</script>