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

Merge pull request #131 from Safelite/feature/SSR-215

Browse source 
Feature/ssr 215
This commit is contained in:
Kulbhushan Kaushik 2023-01-20 13:38:02 -05:00 committed by GitHub
commit 38d25ba131
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 155 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/constants/error-messages.js
View file

@ -33,7 +33,11 @@ const errorMessages = {
LOSS_CITY_REQUIRED: "Please enter a city",
LOSS_STATE_REQUIRED: "Please select an option",
LOSS_DATE_REQUIRED: "Please enter a loss date",
DAMAGE_OPTION_REQUIRED: "Please select an option"
DAMAGE_OPTION_REQUIRED: "Please select an option",
POLICYHOLDER_FIRST_NAME_REQUIRED: "Please enter the policyholder first name",
POLICYHOLDER_LAST_NAME_REQUIRED: "Please enter the policyholder last name",
};
export { errorMessages };

146
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -1,37 +1,137 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles overflow-auto welcome">
<div class="page-container-grouped-styles overflow-auto">
<div class="fade-on-route-transition">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="row mt-4">
<div class="col">
<span>PlaceHolder for policy holder details</span>
</div>
<textboxQuestion
inputId="firstNameField"
cmsWidgetName="PolicyholderFirstNameQuestion"
v-model="customerQuestions.firstName"
isRequired
ref="policyHolderFirstName"
disableAutoFill
validationRules="first-name-required" />
</div>
</div>
<div class="row mt-4">
<div class="col">
<textboxQuestion
inputId="lastNameField"
cmsWidgetName="PolicyholderLastNameQuestion"
v-model="customerQuestions.lastName"
isRequired
ref="policyHolderLastName"
disableAutoFill
validationRules="last-name-required" />
</div>
</div>
<addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" />
<siteFooter
cmsWidgetName="SiteFooterWidget"
ref="siteFooter"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@back-clicked="backButtonAction"
/>
</div>
</div>
</Form>
</template>
<script>
// Components
import siteHeader from '@/common-components/site-header/site-header';
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
</template>
<script>
// Components
import siteHeader from '@/common-components/site-header/site-header';
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import addressQuestions from "@/common-components/address-questions/address-questions";
import siteFooter from "@/common-components/site-footer/site-footer";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { Form, defineRule } from "vee-validate";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import BaseFormMixin from '@/mixins/base-form-mixin.js';
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { Form, defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store';
//define validation rules
defineRule("first-name-required", required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
defineRule("last-name-required", required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
export default {
name: "policy-holder-details",
components: {
siteHeader,
siteSubHeader,
Form,
export default {
name: "policy-holder-details",
mixins: [BaseFormMixin],
data() {
return {
customerQuestions: this.getPolicyHolderDetailsFromStore()
};
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
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.
let resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods:
{
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
}
</script>
forwardButtonAction()
{
this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
return this.navigateForward();
},
navigateForward() {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
this.$route
);
},
getPolicyHolderDetailsFromStore() {
return {
addressQuestions :
{
streetAddress: this.mainStore.order.customer.address.streetAddress,
city: this.mainStore.order.customer.address.city,
state: this.mainStore.order.customer.address.state,
zipCode: this.mainStore.order.customer.address.zipCode,
},
firstName : this.mainStore.order.customer.firstName,
lastName : this.mainStore.order.customer.lastName,
}
},
},
components: {
siteHeader,
siteSubHeader,
textboxQuestion,
addressQuestions,
siteFooter,
Form,
},
}
</script>

2
src/layouts/welcome-page/welcome-page.vue
View file

@ -215,7 +215,7 @@
navigateForward() {
this.$router.navigate(
this.navigationScenarios.WELCOME_PAGE,
this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
this.$route
);
},

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

@ -8,7 +8,8 @@ const navigationScenarios = {
SELECTED_MAKE: "SELECTED_MAKE",
SELECTED_MODEL: "SELECTED_MODEL",
SELECTED_STYLE: "SELECTED_STYLE",
WELCOME_PAGE: "WELCOME_PAGE",
CLICKED_FORWARD_WELCOME_PAGE: "CLICKED_FORWARD_WELCOME_PAGE",
CLICKED_FORWARD_POLICY_HOLDER_DETAILS: "CLICKED_FORWARD_POLICY_HOLDER_DETAILS",
// Vin selection
CLICKED_BACK_WITH_VIN: "CLICKED_BACK_WITH_VIN",

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

@ -301,11 +301,24 @@ const routingTable = function(store) {
destinationIssPageValue: issPageValues.WELCOME_PAGE
},
{
scenario: navigationScenarios.WELCOME_PAGE,
scenario: navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
},
],
},
{
issPageValue: issPageValues.POLICY_HOLDER_DETAILS,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.WELCOME_PAGE
},
{
scenario: navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
destinationIssPageValue: issPageValues.VEHICLE_YEAR
},
],
},
];
};

2
src/router/router.spec.js
View file

@ -15,7 +15,7 @@ describe("Router", () => {
it("Should push next view when navigating locally", () => {
let scenario = navigationScenarios.WELCOME_PAGE;
let scenario = navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE;
let currentRoute = { query: { issPage: issPageValues.WELCOME_PAGE }};
router.push = jest.fn();

9
src/store/index.js
View file

@ -665,6 +665,15 @@ export const useMainStore = defineStore({
this.order.customer.phoneNumber = welcomePageModel?.phoneNumber;
this.order.customer.emailAddress = welcomePageModel?.email;
},
updatePolicyHolderDetails(customerQuestions)
{
this.order.customer.address.streetAddress = customerQuestions.addressQuestions.streetAddress;
this.order.customer.address.city = customerQuestions.addressQuestions.city;
this.order.customer.address.state = customerQuestions.addressQuestions.state;
this.order.customer.address.zipCode = customerQuestions.addressQuestions.zipCode;
this.order.customer.firstName = customerQuestions.firstName;
this.order.customer.lastName = customerQuestions.lastName;
},
savePartQuestionAnswers(partQuestionAnswersArray) {
// if part question answers have changed, reset subsequent question answers
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(