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

Merge pull request #440 from Safelite/feature/digital/SSR-621

Browse source 
Feature/digital/ssr 621
This commit is contained in:
katiekroell 2023-09-15 15:34:38 -04:00 committed by GitHub
commit eeed38d588
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 386 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
src/layouts/policy-endorsements/policy-endorsements.spec.js Normal file
View file

@ -0,0 +1,118 @@
// Components
import policyEndorsements from '@/layouts/policy-endorsements/policy-endorsements.vue';
// Supporting Files
import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import navigationScenarios from '@/router/router-constants/navigation-scenarios';
import { createTestingPinia } from '@pinia/testing';
import { useMainStore } from '@/store';
describe('policyEndorsements.vue', () => {
describe('Rendering', () => {
test('Should render site header', () => {
// Arrange
const wrapper = shallowMount(policyEndorsements, getMountOptions());
// Act
const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
// Assert
expect(siteHeader.exists()).toBe(true);
});
test('Should render site subheader', () => {
// Arrange
const wrapper = shallowMount(policyEndorsements, getMountOptions());
// Act
const siteSubHeader = wrapper.findComponent({ ref: 'siteSubHeader' });
// Assert
expect(siteSubHeader.exists()).toBe(true);
});
test('Should render schoolProperty buttonQuestion component', () => {
// Arrange
const wrapper = shallowMount(policyEndorsements, getMountOptions());
// Act
const buttonQuestion = wrapper.findComponent({ ref: 'schoolPropertyQuestion' });
// Assert
expect(buttonQuestion.exists()).toBe(true);
});
test('Should render parkingLot buttonQuestion component', () => {
// Arrange
const wrapper = shallowMount(policyEndorsements, getMountOptions());
// Act
const buttonQuestion = wrapper.findComponent({ ref: 'parkingLotQuestion' });
// Assert
expect(buttonQuestion.exists()).toBe(true);
});
test('Should render site footer', () => {
// Arrange
const wrapper = shallowMount(policyEndorsements, getMountOptions());
// Act
const siteFooter = wrapper.findComponent({ ref: 'siteFooter' });
// Assert
expect(siteFooter.exists()).toBe(true);
});
});
describe('Navigation', () => {
test('Back button clicked triggers navigation', () => {
// Arrange
const wrapper = shallowMount(policyEndorsements, getMountOptions({
router: {
navigate: jest.fn()
}
}));
// Act
wrapper.vm.backButtonAction();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
expect(wrapper.vm.$router.navigate)
.toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
});
test('Forward button clicked triggers navigation', () => {
// Arrange
const wrapper = shallowMount(policyEndorsements, getMountOptions({
router: {
navigate: jest.fn()
}
}));
// Act
wrapper.vm.forwardButtonAction();
wrapper.vm.navigateForward();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
expect(wrapper.vm.$router.navigate)
.toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined);
});
test('Forward button clicked saves endorsement question answers', () => {
// Arrange
const mountOptions = getMountOptions({
router: {
navigate: jest.fn()
},
global: {
plugins: [createTestingPinia()]
}
});
const wrapper = shallowMount(policyEndorsements, mountOptions);
// Act
wrapper.vm.forwardButtonAction();
// Assert
expect(useMainStore().saveEndorsementQuestionAnswers).toHaveBeenCalledWith(wrapper.vm.questionAnswersArray);
});
});
});

192
src/layouts/policy-endorsements/policy-endorsements.vue Normal file
View file

@ -0,0 +1,192 @@
<template>
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div
class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader
ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" />
<div class="container-fluid mt-0 px-5">
<siteSubHeader
ref="siteSubHeader"
cmsWidgetName="SiteSubHeaderWidget"
class="mt-5" />
<buttonQuestion
ref="schoolPropertyQuestion"
v-model="schoolPropertyAnswer"
class="radioQuestion windshield-chip-count-question mb-4"
cmsWidgetName="SchoolPropertyQuestion"
:questionText="schoolPropertyQuestionText"
:answers="schoolPropertyAnswersFromCms"
groupName="schoolProperty"
buttonID="schoolPropertyQuestion"
buttonTypeString="listButtonHorizontal"
isRequired
:validationRules="rules.selectionRequired">
</buttonQuestion>
<buttonQuestion
ref="parkingLotQuestion"
v-model="parkingLotAnswer"
class="radioQuestion windshield-chip-count-question"
cmsWidgetName="ParkingLotQuestion"
:questionText="parkingLotQuestionText"
:answers="parkingLotAnswersFromCms"
groupName="parkingLot"
buttonID="parkingLotQuestion"
buttonTypeString="listButtonHorizontal"
isRequired
:validationRules="rules.selectionRequired">
</buttonQuestion>
<siteFooter
ref="siteFooter"
class="pt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
// Supporting files
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 globalRules from '@/constants/global-rules.js';
import { useMainStore } from '@/store';
export default {
name: 'policy-endorsements',
components: {
siteHeader,
siteSubHeader,
siteFooter,
buttonQuestion,
// eslint-disable-next-line vue/no-reserved-component-names
Form
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
}];
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
emits: ['update:modelValue'],
data() {
return {
questionAnswersArray: [],
schoolPropertyAnswer: '',
parkingLotAnswer: '',
rules: {
selectionRequired: globalRules.OPTION_REQUIRED
}
};
},
computed: {
schoolPropertyQuestionText() {
return this.getCmsContent('SchoolPropertyQuestion', 'QuestionText');
},
schoolPropertyAnswersFromCms() {
return this.getCmsContent('SchoolPropertyQuestion', 'Answers');
},
parkingLotQuestionText() {
return this.getCmsContent('ParkingLotQuestion', 'QuestionText');
},
parkingLotAnswersFromCms() {
return this.getCmsContent('ParkingLotQuestion', 'Answers');
}
},
methods:
{
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
// TO DO: remove hard coding and update data format once service returns endorsement questions
this.questionAnswersArray.push(
{
questionNum: 1,
questionText: this.schoolPropertyQuestionText,
selectedAnswer: this.schoolPropertyAnswer
},
{
questionNum: 2,
questionText: this.parkingLotQuestionText,
selectedAnswer: this.parkingLotAnswer
}
);
// save answers to store as order.policy.endorsementQuestionAnswers
useMainStore().saveEndorsementQuestionAnswers(this.questionAnswersArray);
return this.navigateForward();
},
navigateForward() {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
}
}
};
</script>
<style lang="scss" scoped>
:deep .subheader-primary {
margin-bottom: map-get($spacers, 3);
}
:deep .subheader-secondary {
p {
font-size: $h6-font-size;
line-height: map-get($spacers, 5);
}
}
:deep .subheader-secondary.justify-content-center {
p {
text-align: left;
}
justify-content: left !important;
padding-left: 0;
padding-right: 0;
margin-bottom: map-get($spacers, 5);
}
:deep .question-text {
& > span {
text-align: left;
line-height: map-get($spacers, 5);
}
margin-bottom: map-get($spacers, 2);
}
:deep div.question-text.d-flex {
margin-top: map-get($spacers, 4);
}
</style>

13
src/layouts/policy-vehicles/policy-vehicles.vue
View file

@ -118,6 +118,14 @@ export default {
? vehicle?.coverages[0].deductible
: 0;
},
selectedVehicleHasEndorsements() {
const vehicle = this.policyVehicles.find((policyVehicle) =>
policyVehicle?.vin === this.selectedVehicleVin);
if (!vehicle) {
return false;
}
return vehicle.endorsements?.length > 0;
},
repairWaivedForSelectedVehicle() {
const vehicle = this.policyVehicles.find((policyVehicle) =>
policyVehicle.vin === this.selectedVehicleVin);
@ -198,6 +206,11 @@ export default {
{},
{}
);
} else if (this.selectedVehicleHasEndorsements) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
this.$route
);
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,

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

@ -9,6 +9,7 @@ const issPageValues = Object.freeze({
CAPABILITY_QUESTIONS: 'capability-questions',
CONTACT_CONFIRMATION: 'contact-confirmation',
CONTACT_DETAILS: 'contact-details',
POLICY_ENDORSEMENTS: 'policy-endorsements',
ESTIMATE: 'estimate',
COVERAGE_STATEMENT: 'coverage-statement',
LICENSE_PLATE_LOOKUP: 'license-plate-lookup',

1
src/router/router-constants/navigation-scenarios.js
View file

@ -25,6 +25,7 @@ const navigationScenarios = Object.freeze({
// Policy Vehicle
CLICKED_FORWARD_LISTED_VEHICLE: 'CLICKED_FORWARD_LISTED_VEHICLE',
CLICKED_FORWARD_NON_LISTED_VEHICLE: 'CLICKED_FORWARD_NON_LISTED_VEHICLE',
CLICKED_FORWARD_WITH_ENDORSEMENTS: 'CLICKED_FORWARD_WITH_ENDORSEMENTS',
// Vehicle Damage
CLICKED_FORWARD_WITH_REPAIR: 'CLICKED_FORWARD_WITH_REPAIR',

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

@ -409,7 +409,12 @@ const routingTable = () => [
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
destinationIssPageValue: issPageValues.BAILOUT_PAGE
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
destinationIssPageValue: issPageValues.POLICY_ENDORSEMENTS
}
]
},
{
@ -620,7 +625,21 @@ const routingTable = () => [
destinationIssPageValue: issPageValues.CONTACT_CONFIRMATION
}
]
},
{
issPageValue: issPageValues.POLICY_ENDORSEMENTS,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.POLICY_VEHICLES
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
}
]
}
];
export { routingTable };

21
src/store/index.js
View file

@ -59,7 +59,8 @@ const getDefaultState = () => ({
deductible: {
repair: null, // numerical value; how much customer owes on deductible in repair case
replace: null // numerical value; how much customer owes on deductible in replace case,
}
},
endorsementQuestionAnswers: null
},
customer: {
address: {
@ -910,6 +911,20 @@ export const useMainStore = defineStore({
this.applicationUser.saveSessionPromise = null;
},
saveEndorsementQuestionAnswers(endorsementQuestionAnswersArray) {
// if endorsement question answers have changed, reset question answers
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(this.order.policy.endorsementQuestionAnswers, 'result');
const sortedEndorsementQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(endorsementQuestionAnswersArray, 'result');
const haveEndorsementQuestionAnswersChanged = sortedPreviousResultsArray?.length !== sortedEndorsementQuestionAnswersArray.length
|| !sortedPreviousResultsArray?.every((x, i) => x.result === sortedEndorsementQuestionAnswersArray[i].result);
if (haveEndorsementQuestionAnswersChanged) {
this.updateEndorsementQuestionAnswers(null);
}
this.updateEndorsementQuestionAnswers(endorsementQuestionAnswersArray);
},
saveVehicleDamage(isWindshieldRepair, selectedGlassToReplace, selectedWindshieldChipCount) {
const selectedGlassPassedInSorted = selectedGlassToReplace.slice().sort();
const isGlassToReplaceTheSame = this.order.damage.glassToReplace?.length === selectedGlassToReplace.length
@ -1159,6 +1174,10 @@ export const useMainStore = defineStore({
}
},
updateEndorsementQuestionAnswers(answersArray) {
this.order.policy.endorsementQuestionAnswers = answersArray;
},
updateIsRepair(isRepair) {
this.order.damage.isRepair = isRepair;
},

22
src/store/store.spec.js
View file

@ -955,4 +955,26 @@ describe('Store', () => {
);
});
});
describe('saveEndorsementQuestionAnswers method', () => {
it('method should update endorsement question data in store', () => {
// Arrange
const questionNum = getRandomInt(1, 100);
const questionText = getRandomString(50, 300);
const selectedAnswer = getRandomString(2, 3);
const endorsementQuestionAnswersArray = [
{
questionNum,
questionText,
selectedAnswer
}
];
// Act
store.saveEndorsementQuestionAnswers(endorsementQuestionAnswersArray);
// Assert
expect(store.order.policy.endorsementQuestionAnswers).toEqual(endorsementQuestionAnswersArray);
});
});
});