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

# Conflicts:
#	src/store/index.js
This commit is contained in:
Jason Wheeler 2023-02-23 13:53:59 -05:00
commit 4fb6899c2c
12 changed files with 10299 additions and 5351 deletions

14932
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

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

View file

@ -89,7 +89,11 @@ const endpoints = {
},
GooglePlaces: {
url: "https://maps.googleapis.com/maps/api/js?key={apiKey}&libraries=places"
}
},
ValidateClientTag: {
url: "/clientauth/api/v1/clientauth/validateClientTag",
method: "GET",
},
};
export { endpoints };

View file

@ -0,0 +1,17 @@
import { useMainStore } from '@/store';
export function validateISSClientTag(clientTag) {
const store = useMainStore()
return store.validateClientTag(clientTag)
.then(
(response) => {
// Success
return response;
},
(error) => {
// Error
return null;
}
);
}

View file

@ -4,7 +4,8 @@ import { useMainStore } from '@/store';
export function fetchCmsContentForPage(issPage) {
const store = useMainStore()
const clientName = store.issConfig.clientName;
const clientOverride = (clientName.length > 0);
const accountNumber = store.issConfig.accountNumber;
const clientOverride = (clientName.length > 0 && accountNumber > 0);
return store.getPageData(issPage)
.then(

View file

@ -0,0 +1,402 @@
// Components
import capabilityQuestions from "@/layouts/capability-questions/capability-questions";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { useMainStore } from "@/store";
import baseMixin from "../../mixins/base-mixin";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import { nextTick } from "vue";
// 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(),
}));
const baseStoreGettersPageData = () => {
return {
partsOrQuestions: [
{
parts: [
{
childPartQuestions: [],
},
],
capabilityQuestions: [
{
questionSequence: 1,
questionText:
"Is your vehicle equipped with the optional Lane-Keeping System which tugs on the steering wheel and/or beeps to alert you if you drift too close to the edge of the lane?",
answers: [
{
answerResult1: "DYNAMIC",
answerResult2: "1",
answerText: "Yes",
nextQuestionSequence: null,
answerResult: "DYNAMIC",
},
{
answerResult1: "Unknown",
answerResult2: "0",
answerText: "No",
nextQuestionSequence: null,
answerResult: "Unknown",
},
],
},
],
partQuestions: [],
questions: [],
glassLocation: "Windshield",
glassName: "Single",
answerKey: "Windshield-Single",
answerData: null,
},
],
};
};
const baseStoreGettersDamage = () => {
return {
partsQuestionAnswers: [
{
glassLocation: "Windshield",
glassName: "Single",
result: "FW04848",
answeredQuestions: [
{
questionText:
"Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?",
selectedAnswer: "1|nextQuestion|3|Yes",
selectedAnswerText: "Yes",
questionNum: 1,
},
{
questionText:
"Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?",
selectedAnswer: "2|nextQuestion|3|Yes",
selectedAnswerText: "Yes",
questionNum: 2,
},
],
},
],
};
};
useMainStore().pageData = baseStoreGettersPageData;
useMainStore().damage = baseStoreGettersDamage;
describe("capabilityQuestions.vue", () => {
describe("method arePagePrerequisitesValid...", () => {
test("Should return true for valid page requisites if pageData exists", () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const result = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(result).toBe(true);
wrapper.unmount();
});
test("Should return false for valid page requisites if partsOrQuestions in pageData is missing", () => {
// Arrange
const { wrapper } = setupMocks({});
useMainStore().pageData = jest.fn(() => {
return undefined;
});
// Act
const result = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(result).toBeFalsy();
wrapper.unmount();
});
test("Should be at least one item in partsOrQuestions", () => {
// Arrange
useMainStore().pageData = jest.fn(() => {
return {
partsOrQuestions: [],
};
});
useMainStore().damage = baseStoreGettersDamage;
const { wrapper } = setupMocks({});
// Act
const result = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(result).toBeFalsy();
wrapper.unmount();
});
});
describe("watch on selectedAnswers should be set up...", () => {
test("Should trigger handleAnswerUpdates if watched data changes", async () => {
// Arrange
useMainStore().pageData = baseStoreGettersPageData;
useMainStore().damage = baseStoreGettersDamage;
const { wrapper } = setupMocks({});
const spy = jest.spyOn(wrapper.vm, "handleAnswerUpdates");
// Act
wrapper.setData({
selectedAnswers: {
"Windshield-Single": {
answerResult: "FW04848",
answeredQuestions: [
{
questionText:
"Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?",
selectedAnswer: "1|nextQuestion|3|Yes",
selectedAnswerText: "Yes",
questionNum: 1,
},
{
questionText:
"Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?",
selectedAnswer: "2|nextQuestion|3|Yes",
selectedAnswerText: "Yes",
questionNum: 2,
},
],
index: 0,
},
},
});
await nextTick();
//Assert
expect(spy).toHaveBeenCalled();
wrapper.unmount();
});
});
describe("forwardButtonAction", () => {
test("Should clear out answerData", () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.questionsData = [
{
glassLocation: "Windshield",
glassName: "Single",
answerData: {
answerResult: "FW04848",
answeredQuestions: [],
},
questions: [],
parts: [
{
childPartQuestions: [{}],
},
],
},
];
wrapper.vm.dispatchStoreAction = jest.fn(() => {
return {
data: [],
};
});
// Act
wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.questionsData[0].answerData).toEqual({});
wrapper.unmount();
});
test("Should save to pinia store", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.questionsData = [
{
glassLocation: "Windshield",
glassName: "Single",
answerData: {
answerResult: "FW04848",
answeredQuestions: [],
},
questions: [],
parts: [
{
childPartQuestions: [],
},
],
},
];
useMainStore().getPartsOrQuestions = jest.fn(() => {
return {
data: {
partsOrQuestions: [],
},
};
});
// Act
wrapper.vm.forwardButtonAction();
await nextTick();
//Assert
expect(wrapper.vm.saveCapabilityQuestionAnswers).toHaveBeenCalled;
wrapper.unmount();
});
test("Should call GET_PARTS_OR_QUESTIONS API", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.questionsData = [
{
glassLocation: "Windshield",
glassName: "Single",
answerData: {
answerResult: "FW04848",
answeredQuestions: [],
},
questions: [],
parts: [
{
childPartQuestions: [],
},
],
},
];
useMainStore().getPartsOrQuestions = jest.fn(() => {
return {
data: {
partsOrQuestions: [],
},
};
});
// Act
wrapper.vm.forwardButtonAction();
await nextTick();
//Assert
expect(wrapper.vm.getPartsOrQuestions).toHaveBeenCalled;
wrapper.unmount();
});
test("Should trigger navigateForward", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.questionsData = [
{
glassLocation: "Windshield",
glassName: "Single",
answerData: {
answerResult: "FW04848",
answeredQuestions: [],
},
questions: [],
parts: [
{
childPartQuestions: [],
},
],
},
];
useMainStore().getPartsOrQuestions = jest.fn(() => {
return {
data: {
partsOrQuestions: [],
},
};
});
wrapper.vm.navigateForward = jest.fn();
// Act
await wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.navigateForward).toHaveBeenCalled();
wrapper.unmount();
});
});
});
function setupMocks({
mountOptionsMockData = {
router: {
navigate: jest.fn(),
},
actionList: [
{
actionName: "saveCapabilityQuestionAnswers",
data: {},
},
{
actionName: "getPartsOrQuestions",
data: {},
},
],
route: {
query: {
issPage: "capability-questions",
},
},
data() {
return {
computedSwitcher: [
{
glassLocation: "Windshield",
glassName: "Single",
answerData: {
answerResult: "FW04848",
answeredQuestions: [],
},
},
],
};
},
questionsData: {
get() {
return this.computedSwitcher;
},
set(val) {
this.computedSwitcher = val;
},
},
},
}) {
useMainStore().getPartsOrQuestions = jest.fn(() => {
return {
data: {
partsOrQuestions: [],
}
};
});
const mountOptions = getMountOptions({
...mountOptionsMockData,
mixins: [baseMixin, vehicleQuestionsMixin],
});
mountOptions["attachTo"] = document.body;
const wrapper = shallowMount(capabilityQuestions, mountOptions);
return { wrapper };
}

View file

@ -1,33 +1,21 @@
<template>
<Form
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit"
@invalidSubmit="onInvalidSubmit" ref="theForm"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles overflow-auto">
<siteHeader
cmsWidgetName="SiteHeaderWidget"
/>
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
class="mb-3"
/>
<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>
<questionsPageLayout
isRequired
ref="questionsPageLayout"
:isMetaValid="meta.valid"
:alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
:alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
:questionsData="questionsData"
validationRules="questions-required"
v-model="selectedAnswers"
@forwardButtonAction="forwardButtonAction"
@back-click="navigateBack"
:index="currentGlassIndex" />
</Form>
</template>
<script>
@ -37,24 +25,29 @@ import { settleAllPromises } from '@/helpers/layout-helper';
// Import Component
import baseFormMixin from '@/mixins/base-form-mixin';
import { Form } from 'vee-validate';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import { issPageValues } from "@/router/router-constants/issPage-values";
import { Form, defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { useMainStore } from "@/store";
import { errorMessages } from "@/constants/error-messages";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import questionsPageLayout from "@/iss-components/questions-page-layout/questions-page-layout.vue";
// DEFINE VALIDATION RULES
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
export default {
name: 'capability-questions',
mixins: [baseFormMixin],
mixins: [baseFormMixin, vehicleQuestionsMixin],
components: {
siteFooter,
siteHeader,
siteSubHeader,
Form,
vehicleBanner,
questionsPageLayout
},
data() {
return {};
return {
questionsData: [],
selectedAnswers: {},
currentGlassIndex: 0,
};
},
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@ -73,18 +66,105 @@ export default {
vm.setCmsContent(resultMap.cmsContent);
});
},
computed: {
AlertFewMoreQuestionsHeader() {
return this.getCmsContent("AdditionalPartsQuestionsAlert", "HeadlineText");
},
AlertFewMoreQuestionsCopy() {
return this.getCmsContent("AdditionalPartsQuestionsAlert", "BodyText");
},
partsOrQuestionsData() {
return useMainStore().pageData(issPageValues.CAPABILITY_QUESTIONS)
.partsOrQuestions;
},
},
mounted() {
this.getInitialQuestionData();
},
methods: {
arePagePrerequisiteValid() {
return true;
arePagePrerequisitesValid() {
const capabilityQuestionsFromPageData = useMainStore().pageData(issPageValues.CAPABILITY_QUESTIONS);
return (
capabilityQuestionsFromPageData?.partsOrQuestions?.some((part) => part?.glassName) &&
capabilityQuestionsFromPageData?.partsOrQuestions?.some(
(part) => part?.capabilityQuestions?.length > 0)
);
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
getInitialQuestionData() {
// get any questions that were already answered
const alreadyAnsweredQuestions = useMainStore().damage.capabilityQuestionAnswers;
this.questionsData = this.partsOrQuestionsData
.filter((x) => x.capabilityQuestions)
.map((glass, index) => {
// NOTE: questions for property "questions" can differ between layouts
glass.questions = glass.capabilityQuestions;
glass.answerKey = glass.glassLocation + "-" + glass.glassName;
// reset selectedAnswers for this glass
this.selectedAnswers[glass.answerKey] = [];
const updatedGlass = this.setupInitialData(
glass,
index,
alreadyAnsweredQuestions
);
// Set up watch for each set of glass questions
this.$watch(
"selectedAnswers." + glass.answerKey,
(newValue) => {
if (newValue && Object.keys(newValue).length > 0) {
this.handleAnswerUpdates(newValue, glass.answerKey);
}
},
{ deep: true }
);
return updatedGlass;
});
},
async forwardButtonAction() {
const questionAnswersArray = this.questionsData.map((glass) => {
// get answerResult2 of returned answer
let selectedAnswerResult2;
glass.questions.forEach((q) => {
const idx = q.answers.findIndex(
(a) => a.answerResult === glass.answerData.answerResult
);
if (idx !== -1) {
selectedAnswerResult2 = q.answers[idx].answerResult2;
}
});
return {
glassLocation: glass.glassLocation,
glassName: glass.glassName,
result: glass.answerData.answerResult,
result1: glass.answerData.answerResult,
result2: selectedAnswerResult2,
answeredQuestions: glass.answerData.answeredQuestions,
isSuppressedPart: glass.isSuppressedPart,
};
});
// clear out answerData for future page loads; must occur prior to store save
this.questionsData.forEach((glass) => {
glass.answerData = {};
});
// save to store as order.damage.moldingQuestionArrays (array)
await this.mainStore.saveCapabilityQuestionAnswers(questionAnswersArray);
// get parts from the capabilityQuestionAnswers
const partsOrQuestions = this.partsOrQuestionsData;
for (let answer of questionAnswersArray) {
partsOrQuestions.find((partOrQuestion) => {
return (
partOrQuestion.glassLocation === answer.glassLocation &&
partOrQuestion.glassName === answer.glassName
);
}).parts[0].childParts = [
{
partNumber: answer.partNum,
},
];
}
this.navigateForward(partsOrQuestions, null);
},
async forwardButtonAction() {},
resetDependentState() {},
},
};
</script>

View file

@ -0,0 +1,75 @@
<template>
<p id="message" v-show="unauthorized">Unauthorized Access.</p>
</template>
<script>
// Supporting files
import { issPageValues } from "@/router/router-constants/issPage-values";
import { validateISSClientTag } from "@/helpers/clientauth-helper";
import { useMainStore } from '@/store';
export default {
name: "entry-page",
mixins: [],
data() {
return {
unauthorized: false,
}
},
setup() {
const mainStore = useMainStore();
mainStore.resetISSConfigState();
return { mainStore };
},
mounted() {
this.validateClientTagOnEntry();
},
methods:
{
navigateForward() {
this.$router.navigate(
this.navigationScenarios.MOVE_FORWARD_ENTRY_PAGE,
this.$route
);
},
async validateClientTagOnEntry() {
const mainStore = useMainStore();
const clientTag = this.$route.query.ClientTag;
const clientTagPresent = !!clientTag;
let authorized = false;
if ( clientTagPresent )
{
const resp = await validateISSClientTag(clientTag);
if ( resp?.data.active && resp?.data.accountName.length > 0 )
{
this.mainStore.issConfig.clientName = resp.data.accountName;
this.mainStore.issConfig.accountNumber = resp.data.accountNumber;
this.mainStore.issConfig.styleSheet = resp.data.styleSheet;
authorized = true;
}
}
this.unauthorized = !authorized;
if ( authorized )
{
// Forced full location redirect here. We do not want the entry page as part of the router/flow/path history.
window.location = "/?issPage=" + issPageValues.WELCOME_PAGE;
}
},
},
computed:{
},
components: {
},
}
</script>
<style lang="scss">
#message {
text-align: center;
}
</style>

View file

@ -4,7 +4,6 @@
<div class="fade-on-route-transition h-100">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="body-container">
<div class="row mt-4">
<div class="col">
<textboxQuestion
@ -126,8 +125,7 @@
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</div>
</div>
</Form>
</template>
@ -186,6 +184,10 @@
},
setup() {
const mainStore = useMainStore();
// Set order account number from the issConfig.
mainStore.order.accountNumber = mainStore.issConfig.accountNumber;
return { mainStore };
},
async beforeRouteEnter(to, from, next)
@ -332,23 +334,4 @@
{
margin-bottom: 0rem !important;
}
.p-2, body .page-container-grouped-styles{
padding:0 !important;
}
.site-header[data-v-0fe86b7b] {
padding: 0.5rem 0;
}
.subheader-primary{
margin-top:0.25rem;
}
.img-fluid{
width:162px;
}
.body-container
{
padding-right: 1.5rem !important;
padding-left: 1.5rem !important;
}
</style>

View file

@ -1,4 +1,5 @@
export const issPageValues = {
ENTRY_PAGE: "entry-page",
WELCOME_PAGE: "welcome-page",
POLICY_HOLDER_DETAILS: "policy-holder-details",
VEHICLE_MAKE: "vehicle-make",

View file

@ -3,6 +3,9 @@ const navigationScenarios = {
CLICKED_BACK: "CLICKED_BACK",
CLICKED_FORWARD: "CLICKED_FORWARD",
// Entry
MOVE_FORWARD_ENTRY_PAGE: "MOVE_FORWARD_ENTRY_PAGE",
// YMMS
SELECTED_YEAR: "SELECTED_YEAR",
SELECTED_MAKE: "SELECTED_MAKE",

View file

@ -354,6 +354,19 @@ const routingTable = function(store) {
},
],
},
{
issPageValue: issPageValues.ENTRY_PAGE,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.ENTRY_PAGE
},
{
scenario: navigationScenarios.MOVE_FORWARD_ENTRY_PAGE,
destinationIssPageValue: issPageValues.WELCOME_PAGE
},
],
},
{
issPageValue: issPageValues.WELCOME_PAGE,
maps: [