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

INSR-7752: contact-details page updates, other related data read/write updates

Browse source
This commit is contained in:
Alex Humphries 2026-02-02 16:53:37 -05:00
parent ebd4bf8714
commit 02281b3230
10 changed files with 201 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/constants/progress-bar-mapper.js
View file

@ -53,10 +53,10 @@ export const pageProgressMapper = {
'schedule-page': {
percent: 70
},
'contact-details': {
percent: 80
},
'service-packages': {
percent: 75
},
'contact-details': {
percent: 85
},
'payment-method': {

3
src/digital-components/textarea-question/textarea-question.vue
View file

@ -176,7 +176,8 @@ export default {
}
.optional {
color: $gray-550;
font-weight: $font-weight-normal;
color: $darker-gray;
}
.character-count {

277
src/layouts/contact-details/contact-details.vue
View file

@ -15,81 +15,83 @@
<siteSubHeader
id="sub-header"
ref="siteSubHeader"
class="mt-4"
:cmsWidgetName="widget.siteSubHeader" />
<textboxQuestion
ref="firstNameQuestion"
v-model="firstName"
class="mt-5"
inputId="firstName"
:cmsWidgetName="widget.firstNameQuestion"
isRequired
:validationRules="rules.firstName" />
<textboxQuestion
ref="lastNameQuestion"
v-model="lastName"
class="mt-5"
inputId="lastName"
:cmsWidgetName="widget.lastNameQuestion"
isRequired
:validationRules="rules.lastName" />
<textboxQuestion
ref="emailQuestion"
v-model="emailAddress"
class="mt-5"
inputId="emailAddress"
:cmsWidgetName="widget.emailQuestion"
isRequired
:validationRules="rules.emailAddress" />
<textboxQuestion
ref="phoneNumberQuestion"
v-model="phoneNumber"
class="mt-5"
inputId="phoneNumber"
:cmsWidgetName="widget.phoneNumberQuestion"
isRequired
:mask="phoneMask"
:validationRules="rules.phoneNumber" />
<!-- TO DO: Use MSR appointment information for MSR -->
<alert
ref="appointmentInformationAlert"
isCollapsible
alertClass="alert-warning"
:cmsWidgetName="widget.appointmentInformation" />
<checkbox
ref="requestTextUpdatesCheckbox"
v-model="requestTextUpdates"
:isChecked="requestTextUpdates"
class="mt-3"
checkboxName="requestTextUpdates"
buttonID="requestTextUpdates"
:checkboxLabel="requestTextUpdatesCheckboxText" />
v-if="showSameAsPolicyAddressQuestion"
ref="sameAsPolicyAddressQuestion"
v-model="isSameAsPolicyAddress"
checkboxName="sameAsPolicyAddress"
buttonID="sameAsPolicyAddress"
:checkboxLabel="sameAsPolicyAddressQuestionText" />
<textboxQuestion
ref="addressQuestion"
v-model="address"
inputId="address"
:cmsWidgetName="widget.streetAddressQuestion"
isRequired
:validationRules="'street-address-required'" />
<textboxQuestion
ref="address2Question"
v-model="address2"
inputId="address2"
:cmsWidgetName="widget.apartmentQuestion" />
<textboxQuestion
ref="cityQuestion"
v-model="city"
inputId="city"
:cmsWidgetName="widget.cityQuestion"
isRequired
:validationRules="'city-required'" />
<dropdownQuestion
ref="stateQuestion"
v-model="state"
inputId="state"
:cmsWidgetName="widget.stateQuestion"
:options="states"
isDisabled />
<textboxQuestion
ref="zipCodeQuestion"
v-model="zipCode"
inputId="zipCode"
:cmsWidgetName="widget.zipCodeQuestion"
isDisabled />
<alert
ref="changeZipCodeAlert"
class="zip-alert"
isCollapsible
alertClass="alert-warning"
:startCollapsed="true"
:cmsWidgetName="widget.changeZipCodeAlert" />
<buttonQuestion
ref="vehicleProtectedQuestion"
v-model="isVehicleProtected"
inputId="vehicleProtected"
isRequired
groupName="vehicleProtectedQuestion"
:questionText="vehicleProtectedQuestionText"
:answers="vehicleProtectedQuestionAnswers"
:validationRules="'option-required'"
:buttonTypeString="'listButtonHorizontal'" />
<textBlock
ref="clearanceText"
:cmsWidgetName="widget.clearanceText" />
<textareaQuestion
ref="notesQuestion"
v-model="notesForTechnician"
class="mt-5"
inputId="technicianNotes"
:isDisabled="false"
:isRequired="false"
:cmsWidgetName="widget.notesQuestion"
maxLength="250"
maxLength="150"
:inputRows="4" />
<p
ref="disclaimerText"
class="caption dark-gray mt-5">
{{ textUpdateDisclaimerText }} I also agree to
Safelite's
<textLink
ref="privacyPolicyLink"
class="normal-line-height"
linkType="newWindowLink"
text="Privacy Policy"
href="//www.safelite.com/privacy-center" />
and
<textLink
ref="termsOfUseLink"
class="normal-line-height"
linkType="newWindowLink"
text="Terms of Use"
href="//www.safelite.com/terms-of-use" />.
</p>
<siteFooter
ref="siteFooter"
class="my-5"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction"
@ -107,15 +109,25 @@ import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
import checkbox from '@/ux-components/checkbox/checkbox.vue';
import textareaQuestion from '@/digital-components/textarea-question/textarea-question.vue';
import textLink from '@/ux-components/text-link/text-link.vue';
import alert from '@/ux-components/alert/alert.vue';
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
// Supporting files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
import { Form } from 'vee-validate';
import { defineRule, Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store/index.js';
import globalRules from '@/constants/global-rules.js';
import MaskaFormattedMasks from '@/constants/maska-masks';
import errorMessages from '@/constants/error-messages';
import { required } from '@/helpers/validation-rules';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import widgetFields from '@/constants/cms-widget-fields';
import states from '@/constants/states';
// DEFINE VALIDATION RULES
defineRule('street-address-required', required(errorMessages.STREET_ADDRESS_REQUIRED));
defineRule('city-required', required(errorMessages.CITY_REQUIRED));
export default {
name: 'contact-details',
@ -128,7 +140,10 @@ export default {
siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
textLink
alert,
buttonQuestion,
dropdownQuestion,
textBlock
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -140,58 +155,70 @@ export default {
},
data() {
const {
firstName,
lastName,
emailAddress,
servicePhone,
requestTextUpdates,
notesForTechnician
} = useMainStore().contactInfo;
const {
address,
address2,
city,
state,
zipCode,
isVehicleProtected
} = useMainStore().serviceLocation;
return {
firstName,
lastName,
emailAddress,
phoneNumber: servicePhone,
requestTextUpdates,
notesForTechnician,
address,
address2,
city,
state,
zipCode,
isVehicleProtected: isVehicleProtected ?? '',
isSameAsPolicyAddress: false,
widget: {
siteHeader: 'SiteHeaderWidget',
siteSubHeader: 'SiteSubHeaderWidget',
firstNameQuestion: 'FirstNameQuestionWidget',
lastNameQuestion: 'LastNameQuestionWidget',
appointmentInformation: 'AppointmentInformationAlertWidget',
MSRAppointmentInformation: 'MSRAppointmentInformationAlertWidget',
sameAsPolicyAddressQuestion: 'SameAsPolicyAddressQuestionWidget',
streetAddressQuestion: 'StreetAddressQuestionWidget',
apartmentQuestion: 'ApartmentQuestionWidget',
emailQuestion: 'EmailQuestionWidget',
phoneNumberQuestion: 'PhoneNumberQuestionWidget',
requestTextUpdates: 'TextContentWidget',
cityQuestion: 'CityQuestionWidget',
stateQuestion: 'StateQuestionWidget',
zipCodeQuestion: 'ZipCodeQuestionWidget',
changeZipCodeAlert: 'ChangeZipCodeAlertWidget',
vehicleProtectedQuestion: 'VehicleProtectedQuestionWidget',
clearanceText: 'ClearanceTextWidget',
notesQuestion: 'NotesQuestionWidget',
disclaimer: 'TextUpdateDisclaimerWidget',
siteFooter: 'SiteFooterWidget'
},
rules: {
firstName: globalRules.FIRST_NAME_REQUIRED,
lastName: globalRules.LAST_NAME_REQUIRED,
emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
}
states
};
},
computed: {
/**
* @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
*/
requestTextUpdatesCheckboxText() {
return `${this.getCmsContent(
this.widget.requestTextUpdates,
'Text'
)}*`;
},
/**
* @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
*/
textUpdateDisclaimerText() {
return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`;
},
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
},
showSameAsPolicyAddressQuestion() {
return this.zipCode === useMainStore().customerData.addressQuestions.zipCode;
},
sameAsPolicyAddressQuestionText() {
return this.getCmsContent(this.widget.sameAsPolicyAddressQuestion, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
},
vehicleProtectedQuestionText() {
return this.getCmsContent(this.widget.vehicleProtectedQuestion, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
},
vehicleProtectedQuestionAnswers() {
return this.getCmsContent(this.widget.vehicleProtectedQuestion, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS) || [];
}
},
watch: {
isSameAsPolicyAddress(newValue) {
if (newValue) {
this.copyPolicyAddressToServiceLocation();
} else {
this.clearAddressFields();
}
}
},
methods: {
@ -208,6 +235,13 @@ export default {
};
useMainStore().updateContactInfo(contactInfo);
useMainStore().updateServiceLocation({
address: this.address,
address2: this.address2,
city: this.city,
isVehicleProtected: this.isVehicleProtected
});
if (this.requestTextUpdates) {
useMainStore().updatePhoneNumbers({
service: this.phoneNumber,
@ -221,6 +255,17 @@ export default {
}
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
},
copyPolicyAddressToServiceLocation() {
const { addressQuestions } = useMainStore().customerData;
this.address = addressQuestions.streetAddress;
this.address2 = addressQuestions.streetAddress2;
this.city = addressQuestions.city;
},
clearAddressFields() {
this.address = '';
this.address2 = '';
this.city = '';
}
}
};
@ -235,12 +280,26 @@ export default {
padding-right: .9375rem;
}
}
.dark-gray {
color: $darker-gray;
.zip-alert {
:deep(a) {
padding: 0;
border-bottom: 1.5px solid #125b7e;
color: #125b7e;
&:hover, &:focus {
border-color: transparent;
color: $heritage-blue-secondary;
text-decoration: none;
}
}
}
.normal-line-height {
line-height: normal;
.textbox-question {
:deep(.form-label:has(strong)) {
font-weight: $font-weight-normal;
color: $darker-gray;
strong {
font-weight: 600;
color: $black;
}
}
}
</style>

1
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -414,6 +414,7 @@ export default {
));
this.navigateWithScenario(navigationScenarios.PRICING_LOOKUP_ERROR);
});
console.log('ITAC Pricing Results:', pricingResults);
this.setBaseServiceLineItems(pricingResults);
}
},

2
src/layouts/payment-method/review-dropdown/review-dropdown.vue
View file

@ -92,7 +92,7 @@ export default {
return useMainStore().order.serviceLocation.appointmentType;
},
customerInfo() {
return useMainStore().order.contactInfo;
return useMainStore().contactInfo;
}
},
methods: {

6
src/layouts/schedule-page/service-location/service-location.vue
View file

@ -354,9 +354,6 @@ export default {
}
this.mainStore.saveServiceLocation({
address: this.streetAddress,
address2: this.streetAddress2,
city: this.city,
state: this.state,
zipCode: this.zipCode,
zipCodeCtu: this.zipCodeCtu,
@ -399,6 +396,7 @@ export default {
this.zipCode = newZip;
const zipCodeData = await getZipCodeData(this.zipCode);
this.city = zipCodeData.city;
this.state = zipCodeData.state;
this.setCtuForMobile(zipCodeData.zipCodeCtu);
this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
@ -436,6 +434,7 @@ export default {
this.zipContainsMilitaryBase = initialData.zipCodeData.containsMilitaryBase;
this.zipCodeCtu = initialData.zipCodeData.zipCodeCtu;
this.city = initialData.zipCodeData.city;
this.state = initialData.zipCodeData.state;
}
if (initialData.serviceabilityDetails) {
@ -502,6 +501,7 @@ export default {
this.mobileZipError = errorMessages.NO_SERVICE_IN_AREA(toTitleCase(zipCodeData.city));
} else {
this.city = zipCodeData.city;
this.state = zipCodeData.state;
this.zipCode = this.mobileZipCode;
this.setCtuForMobile(zipCodeData.zipCodeCtu);
this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);

6
src/layouts/service-packages/service-packages.vue
View file

@ -112,6 +112,12 @@ export default {
const { feeItems } = store.order.lineItems;
console.log('Service Packages - Fetched Line Items:', {
rainDefense: resultMap?.rainDefense,
wipers: resultMap?.wipers,
feeItems
});
const availableLineItems = [];
if (resultMap?.rainDefense) {

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

@ -584,7 +584,7 @@ const routingTable = () => [
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationIssPageValue: issPageValues.CONTACT_DETAILS
destinationIssPageValue: issPageValues.SERVICE_PACKAGES
}
]
},
@ -593,7 +593,7 @@ const routingTable = () => [
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.SERVICE_PACKAGES
destinationIssPageValue: issPageValues.SCHEDULE_PAGE
},
{
scenario: navigationScenarios.CLICKED_FORWARD,

22
src/store/index.js
View file

@ -351,9 +351,9 @@ export const useMainStore = defineStore({
},
contactInfo: (s) => {
const obj = {
firstName: s.order.contactInfo.firstName ?? s.order.customer.firstName,
lastName: s.order.contactInfo.lastName ?? s.order.customer.lastName,
emailAddress: s.order.contactInfo.emailAddress ?? s.order.customer.emailAddress,
firstName: s.order.contactInfo.firstName || s.order.customer.firstName,
lastName: s.order.contactInfo.lastName || s.order.customer.lastName,
emailAddress: s.order.contactInfo.emailAddress || s.order.customer.emailAddress,
homePhone: s.order.contactInfo.homePhone,
alternativePhone: s.order.contactInfo.alternativePhone,
servicePhone: s.order.contactInfo.servicePhone,
@ -1816,14 +1816,14 @@ export const useMainStore = defineStore({
this.order.vehicle.registration.lastName = registrationInfo?.lastName;
},
updateServiceLocation(serviceLocationInfo) {
this.order.serviceLocation.address = serviceLocationInfo.address;
this.order.serviceLocation.address2 = serviceLocationInfo.address2;
this.order.serviceLocation.city = serviceLocationInfo.city;
this.order.serviceLocation.state = serviceLocationInfo.state;
this.order.serviceLocation.zipCode = serviceLocationInfo.zipCode;
this.order.serviceLocation.zipCodeCtu = serviceLocationInfo.zipCodeCtu;
this.order.serviceLocation.appointmentType = serviceLocationInfo.appointmentType;
this.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected;
this.order.serviceLocation.address = serviceLocationInfo.address ?? this.order.serviceLocation.address;
this.order.serviceLocation.address2 = serviceLocationInfo.address2 ?? this.order.serviceLocation.address2;
this.order.serviceLocation.city = serviceLocationInfo.city ?? this.order.serviceLocation.city;
this.order.serviceLocation.state = serviceLocationInfo.state ?? this.order.serviceLocation.state;
this.order.serviceLocation.zipCode = serviceLocationInfo.zipCode ?? this.order.serviceLocation.zipCode;
this.order.serviceLocation.zipCodeCtu = serviceLocationInfo.zipCodeCtu ?? this.order.serviceLocation.zipCodeCtu;
this.order.serviceLocation.appointmentType = serviceLocationInfo.appointmentType ?? this.order.serviceLocation.appointmentType;
this.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected ?? this.order.serviceLocation.isVehicleProtected;
this.order.serviceLocation.provider = {
providerNumber: serviceLocationInfo.provider?.providerNumber,

6
src/ux-components/alert/alert.vue
View file

@ -65,7 +65,7 @@
<div
v-show="alertCopy"
:id="collapseId"
class="alert-body">
class="alert-body show">
<template
v-for="paragraph in splitAlertCopyForParagraphTag"
:key="paragraph">
@ -186,7 +186,9 @@ export default {
mounted() {
this.ensureAlertIsInViewPort();
if (this.isCollapsible) {
this.collapseElement = Collapse.getOrCreateInstance(document.getElementById(this.collapseId));
this.collapseElement = Collapse.getOrCreateInstance(document.getElementById(this.collapseId), {
toggle: this.startCollapsed
});
}
},
methods: {