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

WIP update markup for ancillary pages found by Katie.

Browse source
This commit is contained in:
Bryan Mauger 2024-04-16 16:48:39 -04:00
parent 3ab6d5d4ef
commit 4bcffb29b9
13 changed files with 1094 additions and 805 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

265
src/layouts/address-lookup/address-lookup.vue
View file

@ -4,69 +4,67 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="page-container-grouped-styles"> <div class="container-fluid fade-on-route-transition">
<div class="fade-on-route-transition position-relative"> <div class="row justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="col-md-6 px-0 px-md-2">
<div class="select-car"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="container-fluid pb-2"> </div>
<div class="row px-3"> </div>
<div class="col"> <div class="row justify-content-center">
<div class="select-car-form rounded"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
ref="vehicleBanner" ref="vehicleBanner"
class="mt-2 mb-4" class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />
<siteSubHeader <siteSubHeader
ref="siteSubHeader" ref="siteSubHeader"
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
class="mb-5" /> class="mb-5" />
<alert <alert
v-if="displayVinNotFoundAlert" v-if="displayVinNotFoundAlert"
ref="alertVinNotFound" ref="alertVinNotFound"
class="mb-4 mt-4" class="mb-4 mt-4"
cmsWidgetName="AlertVinNotFoundWidget" cmsWidgetName="AlertVinNotFoundWidget"
alertClass="alert-danger" alertClass="alert-danger"
:isDismissible="false" /> :isDismissible="false" />
<alert <alert
v-if="displayMatchedDifferentVehicleAlert" v-if="displayMatchedDifferentVehicleAlert"
ref="alertMatchedDifferentVehicle" ref="alertMatchedDifferentVehicle"
class="mb-4 mt-4" class="mb-4 mt-4"
:manualHeadline="AlertMatchedDifferentVehicleHeader" :manualHeadline="AlertMatchedDifferentVehicleHeader"
:manualCopy="AlertMatchedDifferentVehicleBody" :manualCopy="AlertMatchedDifferentVehicleBody"
alertClass="alert-warning" alertClass="alert-warning"
:isDismissible="false" /> :isDismissible="false" />
<alert <alert
v-if="displayMatchedTwoIdenticalYMMVehicleAlert" v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
ref="alertMatchedTwoIdenticalYMMVehicle" ref="alertMatchedTwoIdenticalYMMVehicle"
class="mb-4 mt-4" class="mb-4 mt-4"
cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget" cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
:manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader" :manualHeadline="
:manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody" AlertMatchedTwoIdenticalYMMVehicleHeader
alertClass="alert-warning" "
:isDismissible="false" /> :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
<alert alertClass="alert-warning"
v-if="displayVinLookupByHomeAddressNotAllowedAlert" :isDismissible="false" />
ref="alertVinLookupsByHomeAddressNotAllowed" <alert
class="mt-4" v-if="displayVinLookupByHomeAddressNotAllowedAlert"
cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget" ref="alertVinLookupsByHomeAddressNotAllowed"
alertClass="alert-danger" class="mt-4"
:isDismissible="false" /> cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
<customerQuestions alertClass="alert-danger"
ref="customerQuestions" :isDismissible="false" />
v-model="customerQuestions" /> <customerQuestions
<siteFooter ref="customerQuestions"
ref="siteFooter" v-model="customerQuestions" />
class="mt-5" <siteFooter
cmsWidgetName="SiteFooterWidget" ref="siteFooter"
:isDisabled="!meta.valid" class="mt-5"
:isForwardActionDisabled="!meta.valid" cmsWidgetName="SiteFooterWidget"
@ForwardClicked="forwardButtonAction" :isDisabled="!meta.valid"
@backClicked="navigateBack" /> :isForwardActionDisabled="!meta.valid"
</div> @ForwardClicked="forwardButtonAction"
</div> @backClicked="navigateBack" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -89,7 +87,10 @@ import { Form } from 'vee-validate';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper'; import settleAllPromises from '@/helpers/layout-helper';
import routerParams from '@/router/router-constants/router-params'; import routerParams from '@/router/router-constants/router-params';
import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper'; import {
getDamageString,
isGlassAvailableForCarId,
} from '@/helpers/damage-helper';
import vinPagesMixin from '@/mixins/vin-pages-mixin'; import vinPagesMixin from '@/mixins/vin-pages-mixin';
import { useMainStore } from '@/store/index.js'; import { useMainStore } from '@/store/index.js';
@ -104,7 +105,7 @@ export default {
customerQuestions, customerQuestions,
alert, alert,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form Form,
}, },
mixins: [baseFormMixin, vinPagesMixin], mixins: [baseFormMixin, vinPagesMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -115,8 +116,8 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
} },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -137,7 +138,7 @@ export default {
isCarIdDifferent: false, isCarIdDifferent: false,
isSelectedGlassAvailableForVehicle: true, isSelectedGlassAvailableForVehicle: true,
customAlertData: {}, customAlertData: {},
forwardButtonCarStyle: '' forwardButtonCarStyle: '',
}; };
}, },
computed: { computed: {
@ -151,10 +152,14 @@ export default {
const vinYmmFound = const vinYmmFound =
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
`${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = const vinYmmExpected = `${useMainStore().order.vehicle.year} ${
`${useMainStore().order.vehicle.year} ${useMainStore().order.vehicle.make} ${useMainStore().order.vehicle.model}`; useMainStore().order.vehicle.make
} ${useMainStore().order.vehicle.model}`;
return this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText') return this.getCmsContent(
'AlertMatchedDifferentVehicleWidget',
'BodyText'
)
.replaceAll('{custom:damage}', getDamageString()) .replaceAll('{custom:damage}', getDamageString())
.replaceAll('{custom:vinYmmFound}', vinYmmFound) .replaceAll('{custom:vinYmmFound}', vinYmmFound)
.replaceAll('{custom:vinYmmExpected}', vinYmmExpected); .replaceAll('{custom:vinYmmExpected}', vinYmmExpected);
@ -171,9 +176,16 @@ export default {
`${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`; `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
const vinYmmsExpected = const vinYmmsExpected =
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
`${useMainStore().order.vehicle.year} ${useMainStore().order.vehicle.make} ${useMainStore().order.vehicle.model} ${useMainStore().order.vehicle.style}`; `${useMainStore().order.vehicle.year} ${
useMainStore().order.vehicle.make
} ${useMainStore().order.vehicle.model} ${
useMainStore().order.vehicle.style
}`;
return this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'BodyText') return this.getCmsContent(
'AlertMatchedTwoIdenticalYMMVehicleWidget',
'BodyText'
)
.replaceAll('{custom:damage}', getDamageString()) .replaceAll('{custom:damage}', getDamageString())
.replaceAll('{custom:vinYmmsFound}', vinYmmsFound) .replaceAll('{custom:vinYmmsFound}', vinYmmsFound)
.replaceAll('{custom:vinYmmsExpected}', vinYmmsExpected); .replaceAll('{custom:vinYmmsExpected}', vinYmmsExpected);
@ -182,21 +194,24 @@ export default {
const vinYmmFound = const vinYmmFound =
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
`${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = const vinYmmExpected = `${useMainStore().order.vehicle.year} ${
`${useMainStore().order.vehicle.year} ${useMainStore().order.vehicle.make} ${useMainStore().order.vehicle.model}`; useMainStore().order.vehicle.make
return (vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase()); } ${useMainStore().order.vehicle.model}`;
} return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase();
},
}, },
watch: { watch: {
customerQuestions: { customerQuestions: {
handler() { handler() {
// if they modify one of the lookup fields (address, city, state, zipCode, or lastName), // if they modify one of the lookup fields (address, city, state, zipCode, or lastName),
// then modify the button text back to "Get my personalized quote" // then modify the button text back to "Get my personalized quote"
this.$refs.siteFooter.updateButtonText(this.getCmsContent('siteFooterWidget', 'ForwardButtonText')); this.$refs.siteFooter.updateButtonText(
this.getCmsContent('siteFooterWidget', 'ForwardButtonText')
);
this.resetWarningsAndErrors(); this.resetWarningsAndErrors();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.attachCustomEvents(); this.attachCustomEvents();
@ -224,23 +239,24 @@ export default {
const vinLookupResponse = useMainStore().lookupVinByAddress({ const vinLookupResponse = useMainStore().lookupVinByAddress({
licenseLastName: this.customerQuestions.lastName, licenseLastName: this.customerQuestions.lastName,
licenseStreetAddress: this.customerQuestions.addressQuestions.streetAddress, licenseStreetAddress:
this.customerQuestions.addressQuestions.streetAddress,
licenseZip: this.customerQuestions.addressQuestions.zipCode, licenseZip: this.customerQuestions.addressQuestions.zipCode,
licenseState: this.customerQuestions.addressQuestions.state licenseState: this.customerQuestions.addressQuestions.state,
}); });
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'vinLookupResponse', resultKey: 'vinLookupResponse',
promise: vinLookupResponse promise: vinLookupResponse,
} },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
// If VIN Lookup by address is forbidden by State Restrictions then show an alert // If VIN Lookup by address is forbidden by State Restrictions then show an alert
if (!resultMap.vinLookupResponse.isStatePermissible) { if (!resultMap.vinLookupResponse.isStatePermissible) {
// State Restrictions forbid lookup by address // State Restrictions forbid lookup by address
this.displayVinLookupByHomeAddressNotAllowedAlert = true; this.displayVinLookupByHomeAddressNotAllowedAlert = true;
this.$refs.siteFooter.disableForwardButton(); this.$refs.siteFooter.disableForwardButton();
return this.$refs.siteFooter.removeLoader(); return this.$refs.siteFooter.removeLoader();
@ -250,12 +266,16 @@ export default {
// Handle cases for different amounts of VINS found for the address. // Handle cases for different amounts of VINS found for the address.
if (carsFound.length === 1) { if (carsFound.length === 1) {
// Single VIN found // Single VIN found
const carFound = carsFound[0].vehicle; const carFound = carsFound[0].vehicle;
this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId; this.isCarIdDifferent =
if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) { carFound.carId !== useMainStore().order.vehicle.carId;
// Display Alert if (
this.isCarIdDifferent &&
carFound.carId !== this.previouslyEnteredCarId
) {
// Display Alert
this.previouslyEnteredCarId = carFound.carId; this.previouslyEnteredCarId = carFound.carId;
this.customAlertData.vehicleInfo = carFound; this.customAlertData.vehicleInfo = carFound;
if (this.isTwoIdenticalYMMVehicleFound) { if (this.isTwoIdenticalYMMVehicleFound) {
@ -265,28 +285,39 @@ export default {
this.displayMatchedDifferentVehicleAlert = true; this.displayMatchedDifferentVehicleAlert = true;
} }
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(carFound.carId); this.isSelectedGlassAvailableForVehicle =
await isGlassAvailableForCarId(carFound.carId);
// Update button "Continue with..." // Update button "Continue with..."
this.$refs.siteFooter this.$refs.siteFooter
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`); .updateButtonText(
`Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`
);
return this.$refs.siteFooter.removeLoader(); return this.$refs.siteFooter.removeLoader();
} }
// update data // update data
vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin }); vehicleInfoToCommit = Object.assign(carFound, {
vin: carsFound[0].vin,
});
} else if (carsFound.length > 1) { } else if (carsFound.length > 1) {
// If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info // If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info
const matchingCars = carsFound.filter((vin) => vin.vehicle.carId === useMainStore().order.vehicle.carId); const matchingCars = carsFound.filter(
(vin) =>
vin.vehicle.carId === useMainStore().order.vehicle.carId
);
if (matchingCars.length === 1) { if (matchingCars.length === 1) {
vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, { vehicleInfoToCommit = Object.assign(
vin: matchingCars[0].vin matchingCars[0].vehicle,
}); {
vin: matchingCars[0].vin,
}
);
} }
} else { } else {
// No VINS found. // No VINS found.
this.displayVinNotFoundAlert = true; this.displayVinNotFoundAlert = true;
this.$refs.siteFooter.disableForwardButton(); this.$refs.siteFooter.disableForwardButton();
return this.$refs.siteFooter.removeLoader(); return this.$refs.siteFooter.removeLoader();
@ -295,19 +326,23 @@ export default {
// Save vehicle, customer, service and registration information // Save vehicle, customer, service and registration information
await useMainStore().saveRegistrationAddressLookup( await useMainStore().saveRegistrationAddressLookup(
{ {
isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle, isSelectedGlassAvailableForVehicle:
this.isSelectedGlassAvailableForVehicle,
vehicleInfo: vehicleInfo:
Object.keys(vehicleInfoToCommit).length === 0 Object.keys(vehicleInfoToCommit).length === 0
? null ? null
: vehicleInfoToCommit, : vehicleInfoToCommit,
registrationInfo: { registrationInfo: {
firstName: this.customerQuestions.firstName, firstName: this.customerQuestions.firstName,
lastName: this.customerQuestions.lastName, lastName: this.customerQuestions.lastName,
address: this.customerQuestions.addressQuestions.streetAddress, address:
this.customerQuestions.addressQuestions
.streetAddress,
city: this.customerQuestions.addressQuestions.city, city: this.customerQuestions.addressQuestions.city,
state: this.customerQuestions.addressQuestions.state, state: this.customerQuestions.addressQuestions.state,
zipCode: this.customerQuestions.addressQuestions.zipCode zipCode:
} this.customerQuestions.addressQuestions.zipCode,
},
}, },
false false
); );
@ -315,15 +350,18 @@ export default {
return this.navigateForward(carsFound); return this.navigateForward(carsFound);
}, },
async navigateForward(carsFound) { async navigateForward(carsFound) {
// Match vehicles found to vehicles in state. // Match vehicles found to vehicles in state.
const matchingCars = carsFound.filter((car) => car.vehicle.carId === useMainStore().order.vehicle.carId); const matchingCars = carsFound.filter(
(car) =>
car.vehicle.carId === useMainStore().order.vehicle.carId
);
// If a different vehicle is found than the one entered and the selected glass // If a different vehicle is found than the one entered and the selected glass
// is not available for that vehicle then navigate back to "vehicle-damage" // is not available for that vehicle then navigate back to "vehicle-damage"
// display vehicle changed alert on that page. // display vehicle changed alert on that page.
if ( if (
this.isCarIdDifferent this.isCarIdDifferent &&
&& !this.isSelectedGlassAvailableForVehicle !this.isSelectedGlassAvailableForVehicle
) { ) {
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
@ -335,7 +373,8 @@ export default {
await this.navigateForwardWithSingleCarMatch(); await this.navigateForwardWithSingleCarMatch();
} else { } else {
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES, this.navigationScenarios
.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
this.$route, this.$route,
{}, {},
{}, {},
@ -348,7 +387,7 @@ export default {
this.displayMatchedDifferentVehicleAlert = false; this.displayMatchedDifferentVehicleAlert = false;
this.displayVinLookupByHomeAddressNotAllowedAlert = false; this.displayVinLookupByHomeAddressNotAllowedAlert = false;
this.$refs.siteFooter.enableForwardAction(); this.$refs.siteFooter.enableForwardAction();
} },
} },
}; };
</script> </script>

235
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -1,66 +1,84 @@
<template> <template>
<Form <Form
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="page-container-grouped-styles"> <div class="container-fluid fade-on-route-transition">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="row justify-content-center">
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <div class="col-md-6 px-0 px-md-2">
<vehicleBanner <siteHeader cmsWidgetName="SiteHeaderWidget" />
class="mt-2 mb-4" </div>
cmsWidgetName="VehicleBannerWidget" </div>
:displayGenericVehicleImage="false" /> <div class="row justify-content-center">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <div class="col-md-6 col-xl-4">
<alert <vehicleBanner
id="multiple-vehicles-alert" class="mt-2 mb-4"
ref="alertFoundMultipleVehicles" cmsWidgetName="VehicleBannerWidget"
cmsWidgetName="FoundMultipleVehicles" :displayGenericVehicleImage="false" />
class="my-5" <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
alertClass="alert-warning" <alert
:manualHeadline="AlertFoundMultipleVehiclesHeader" id="multiple-vehicles-alert"
manualCopy="" ref="alertFoundMultipleVehicles"
:isDismissible="false" /> cmsWidgetName="FoundMultipleVehicles"
<addressVehiclesQuestion class="my-5"
ref="addressVehiclesQuestion" alertClass="alert-warning"
v-model="selectedVehicleVin" :manualHeadline="AlertFoundMultipleVehiclesHeader"
cmsWidgetName="VehicleConfirmationQuestion" manualCopy=""
:vehicles="VehiclesForQuestions" :isDismissible="false" />
:vehicleSelected="VehicleSelected" <addressVehiclesQuestion
validationRules="vehicle-required" ref="addressVehiclesQuestion"
:isCarIdDifferent="isCarIdDifferent" v-model="selectedVehicleVin"
:displayMatchedDifferentVehicleAlert="displayMatchedDifferentVehicleAlert" cmsWidgetName="VehicleConfirmationQuestion"
:displayMatchedTwoIdenticalYMMVehicleAlert="displayMatchedTwoIdenticalYMMVehicleAlert" /> :vehicles="VehiclesForQuestions"
<div :vehicleSelected="VehicleSelected"
v-if="splitAlertProvideVinBodyForLink.length" validationRules="vehicle-required"
class="alert-provide-vin my-3"> :isCarIdDifferent="isCarIdDifferent"
<span :displayMatchedDifferentVehicleAlert="
v-for="copy in splitAlertProvideVinBodyForLink" displayMatchedDifferentVehicleAlert
:key="copy"> "
<span :displayMatchedTwoIdenticalYMMVehicleAlert="
v-if="doesCopyContainRouterLink(copy)" displayMatchedTwoIdenticalYMMVehicleAlert
class="text-body"> " />
<router-link <div
:to="{ v-if="splitAlertProvideVinBodyForLink.length"
query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` }, class="alert-provide-vin my-3">
name: 'root', <span
}">{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link> v-for="copy in splitAlertProvideVinBodyForLink"
</span> :key="copy">
<span <span
v-else v-if="doesCopyContainRouterLink(copy)"
class="m-0 text-body" class="text-body">
v-html="copy"></span> <router-link
</span> :to="{
</div> query: {
<siteFooter issPage: `${getRouterLinkRouteFromCopy(
ref="siteFooter" copy
cmsWidgetName="SiteFooterWidget" )}`,
:isForwardActionDisabled="!meta.valid" },
@backClicked="navigateBack" name: 'root',
@forwardClicked="forwardButtonAction" /> }"
</div> >{{
</div> getRouterLinkDisplayTextFromCopy(copy)
</Form> }}</router-link
>
</span>
<span
v-else
class="m-0 text-body"
v-html="copy"></span>
</span>
</div>
<siteFooter
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template> </template>
<script> <script>
@ -77,7 +95,7 @@ import {
doesCopyContainRouterLink, doesCopyContainRouterLink,
splitCopyOnCMSPlaceHolder, splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy, getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy getRouterLinkDisplayTextFromCopy,
} from '@/helpers/cms-content-helper.js'; } from '@/helpers/cms-content-helper.js';
import routerParams from '@/router/router-constants/router-params'; import routerParams from '@/router/router-constants/router-params';
import vinPagesMixin from '@/mixins/vin-pages-mixin'; import vinPagesMixin from '@/mixins/vin-pages-mixin';
@ -104,7 +122,7 @@ export default {
Form, Form,
vehicleBanner, vehicleBanner,
alert, alert,
addressVehiclesQuestion addressVehiclesQuestion,
}, },
mixins: [baseFormMixin, vinPagesMixin], mixins: [baseFormMixin, vinPagesMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -114,8 +132,8 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
} },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -125,7 +143,7 @@ export default {
}); });
}, },
props: { props: {
validationRules: String validationRules: String,
}, },
setup() { setup() {
const mainStore = useMainStore(); const mainStore = useMainStore();
@ -140,7 +158,7 @@ export default {
displayMatchedDifferentVehicleAlert: false, displayMatchedDifferentVehicleAlert: false,
displayMatchedTwoIdenticalYMMVehicleAlert: false, displayMatchedTwoIdenticalYMMVehicleAlert: false,
previouslyEnteredCarId: '', previouslyEnteredCarId: '',
forwardButtonCarStyle: '' forwardButtonCarStyle: '',
}; };
}, },
computed: { computed: {
@ -154,11 +172,9 @@ export default {
).replaceAll('{custom:vehicleCount}', this.vehicleCount); ).replaceAll('{custom:vehicleCount}', this.vehicleCount);
}, },
isTwoIdenticalYMMVehicleFound() { isTwoIdenticalYMMVehicleFound() {
const vinYmmFound = const vinYmmFound = `${this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model}`;
`${this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model}`; const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
const vinYmmExpected = return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase();
`${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return (vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase());
}, },
AlertProvideVinBody() { AlertProvideVinBody() {
return this.getCmsContent('ProvideVinAlert', 'BodyText'); return this.getCmsContent('ProvideVinAlert', 'BodyText');
@ -178,7 +194,7 @@ export default {
vehicle: v.vehicle, vehicle: v.vehicle,
Text: `${v.vehicle.year} ${v.vehicle.make} ${v.vehicle.model}`, Text: `${v.vehicle.year} ${v.vehicle.make} ${v.vehicle.model}`,
Name: v.vin, Name: v.vin,
SubText: `VIN ${vinStart}${vinEnd}` SubText: `VIN ${vinStart}${vinEnd}`,
}; };
}); });
return mappedData; return mappedData;
@ -187,11 +203,13 @@ export default {
return useMainStore().pageData(issPageValues.ADDRESS_VEHICLES); return useMainStore().pageData(issPageValues.ADDRESS_VEHICLES);
}, },
selectedVehicle() { selectedVehicle() {
return this.VehiclesForQuestions.find(({ vin }) => vin === this.selectedVehicleVin); return this.VehiclesForQuestions.find(
({ vin }) => vin === this.selectedVehicleVin
);
}, },
VehicleSelected() { VehicleSelected() {
return this.mainStore.order.vehicle; return this.mainStore.order.vehicle;
} },
}, },
watch: { watch: {
selectedVehicleVin: { selectedVehicleVin: {
@ -199,10 +217,15 @@ export default {
this.resetWarningsAndErrors(); this.resetWarningsAndErrors();
// does this vehicle match the previously selected carId? // does this vehicle match the previously selected carId?
this.isCarIdDifferent = this.isCarIdDifferent =
this.selectedVehicle?.vehicle.carId !== useMainStore().vehicle.carId; this.selectedVehicle?.vehicle.carId !==
if (this.isCarIdDifferent useMainStore().vehicle.carId;
&& this.selectedVehicle?.vehicle.carId !== this.previouslyEnteredCarId) { if (
this.previouslyEnteredCarId = this.selectedVehicle?.vehicle.carId; this.isCarIdDifferent &&
this.selectedVehicle?.vehicle.carId !==
this.previouslyEnteredCarId
) {
this.previouslyEnteredCarId =
this.selectedVehicle?.vehicle.carId;
if (this.isTwoIdenticalYMMVehicleFound) { if (this.isTwoIdenticalYMMVehicleFound) {
const carStyle = this.selectedVehicle?.vehicle.style; const carStyle = this.selectedVehicle?.vehicle.style;
this.displayMatchedTwoIdenticalYMMVehicleAlert = true; this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
@ -210,15 +233,21 @@ export default {
} else { } else {
this.displayMatchedDifferentVehicleAlert = true; this.displayMatchedDifferentVehicleAlert = true;
} }
this.$refs.siteFooter this.$refs.siteFooter.updateButtonText(
.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ` `Continue with ${this.selectedVehicle.vehicle.year} ` +
+ `${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model} ${this.forwardButtonCarStyle}`); `${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model} ${this.forwardButtonCarStyle}`
);
} else { } else {
this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')); this.$refs.siteFooter.updateButtonText(
this.getCmsContent(
'SiteFooterWidget',
'ForwardButtonText'
)
);
} }
}, },
deep: true deep: true,
} },
}, },
methods: { methods: {
doesCopyContainRouterLink, doesCopyContainRouterLink,
@ -240,14 +269,15 @@ export default {
if (!vinLookup) { if (!vinLookup) {
return; return;
} }
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.carId); this.isSelectedGlassAvailableForVehicle =
await isGlassAvailableForCarId(vinLookup.data.carId);
await useMainStore().saveVin( await useMainStore().saveVin(
{ {
vehicleInfo: Object.assign(this.selectedVehicle.vehicle, { vehicleInfo: Object.assign(this.selectedVehicle.vehicle, {
vin: this.selectedVehicle.vin vin: this.selectedVehicle.vin,
}), }),
isSelectedGlassAvailableForVehicle: isSelectedGlassAvailableForVehicle:
this.isSelectedGlassAvailableForVehicle this.isSelectedGlassAvailableForVehicle,
}, },
false false
); );
@ -257,7 +287,10 @@ export default {
async navigateForward() { async navigateForward() {
// If the vehicle selected on this page is different from the one originally entered and the selected glass is not available // If the vehicle selected on this page is different from the one originally entered and the selected glass is not available
// for that vehicle, then navigate back to "vehicle-damage" and display vehicle changed alert on that page. // for that vehicle, then navigate back to "vehicle-damage" and display vehicle changed alert on that page.
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) { if (
this.isCarIdDifferent &&
!this.isSelectedGlassAvailableForVehicle
) {
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
this.$route, this.$route,
@ -272,28 +305,28 @@ export default {
this.displayMatchedDifferentVehicleAlert = false; this.displayMatchedDifferentVehicleAlert = false;
this.displayMatchedTwoIdenticalYMMVehicleAlert = false; this.displayMatchedTwoIdenticalYMMVehicleAlert = false;
this.forwardButtonCarStyle = ''; this.forwardButtonCarStyle = '';
} },
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.alert-provide-vin { .alert-provide-vin {
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.4; line-height: 1.4;
a { a {
//Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
text-underline-offset: 4px; text-underline-offset: 4px;
line-height: inherit; line-height: inherit;
} }
} }
#multiple-vehicles-alert p { #multiple-vehicles-alert p {
margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
} }
.overflow-scroll { .overflow-scroll {
height: calc(100% - 180px); height: calc(100% - 180px);
overflow-X: hidden !important; overflow-x: hidden !important;
} }
</style> </style>

105
src/layouts/capability-questions/capability-questions.vue
View file

@ -1,22 +1,22 @@
<template> <template>
<Form <Form
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<questionsPageLayout <questionsPageLayout
ref="questionsPageLayout" ref="questionsPageLayout"
v-model="selectedAnswers" v-model="selectedAnswers"
isRequired isRequired
:isMetaValid="meta.valid" :isMetaValid="meta.valid"
:alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader" :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
:alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy" :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
:questionsData="questionsData" :questionsData="questionsData"
:validationRules="rules.optionRequired" :validationRules="rules.optionRequired"
:index="currentGlassIndex" :index="currentGlassIndex"
@forwardButtonAction="forwardButtonAction" @forwardButtonAction="forwardButtonAction"
@backClick="navigateBackByVehicleQuestions" /> @backClick="navigateBackByVehicleQuestions" />
</Form> </Form>
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
@ -37,7 +37,7 @@ export default {
components: { components: {
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
questionsPageLayout questionsPageLayout,
}, },
mixins: [baseFormMixin, vehicleQuestionsMixin], mixins: [baseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -47,8 +47,8 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
} },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -63,36 +63,49 @@ export default {
selectedAnswers: {}, selectedAnswers: {},
currentGlassIndex: 0, currentGlassIndex: 0,
rules: { rules: {
optionRequired: globalRules.OPTION_REQUIRED optionRequired: globalRules.OPTION_REQUIRED,
} },
}; };
}, },
computed: { computed: {
AlertFewMoreQuestionsHeader() { AlertFewMoreQuestionsHeader() {
return this.getCmsContent('AdditionalPartsQuestionsAlert', 'HeadlineText'); return this.getCmsContent(
'AdditionalPartsQuestionsAlert',
'HeadlineText'
);
}, },
AlertFewMoreQuestionsCopy() { AlertFewMoreQuestionsCopy() {
return this.getCmsContent('AdditionalPartsQuestionsAlert', 'BodyText'); return this.getCmsContent(
'AdditionalPartsQuestionsAlert',
'BodyText'
);
}, },
partsOrQuestionsData() { partsOrQuestionsData() {
return useMainStore().pageData(issPageValues.CAPABILITY_QUESTIONS) return useMainStore().pageData(issPageValues.CAPABILITY_QUESTIONS)
.partsOrQuestions; .partsOrQuestions;
} },
}, },
mounted() { mounted() {
this.getInitialQuestionData(); this.getInitialQuestionData();
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
const capabilityQuestionsFromPageData = useMainStore().pageData(issPageValues.CAPABILITY_QUESTIONS); const capabilityQuestionsFromPageData = useMainStore().pageData(
issPageValues.CAPABILITY_QUESTIONS
);
return ( return (
capabilityQuestionsFromPageData?.partsOrQuestions?.some((part) => part?.glassName) capabilityQuestionsFromPageData?.partsOrQuestions?.some(
&& capabilityQuestionsFromPageData?.partsOrQuestions?.some((part) => part?.capabilityQuestions?.length > 0) (part) => part?.glassName
) &&
capabilityQuestionsFromPageData?.partsOrQuestions?.some(
(part) => part?.capabilityQuestions?.length > 0
)
); );
}, },
getInitialQuestionData() { getInitialQuestionData() {
// get any questions that were already answered // get any questions that were already answered
const alreadyAnsweredQuestions = useMainStore().damage.capabilityQuestionAnswers; const alreadyAnsweredQuestions =
useMainStore().damage.capabilityQuestionAnswers;
this.questionsData = this.partsOrQuestionsData this.questionsData = this.partsOrQuestionsData
.filter((x) => x.capabilityQuestions) .filter((x) => x.capabilityQuestions)
.map((glass, index) => { .map((glass, index) => {
@ -111,7 +124,10 @@ export default {
`selectedAnswers.${glass.answerKey}`, `selectedAnswers.${glass.answerKey}`,
(newValue) => { (newValue) => {
if (newValue && Object.keys(newValue).length > 0) { if (newValue && Object.keys(newValue).length > 0) {
this.handleAnswerUpdates(newValue, glass.answerKey); this.handleAnswerUpdates(
newValue,
glass.answerKey
);
} }
}, },
{ deep: true } { deep: true }
@ -124,7 +140,9 @@ export default {
// get answerResult2 of returned answer // get answerResult2 of returned answer
let selectedAnswerResult2; let selectedAnswerResult2;
glass.questions.forEach((q) => { glass.questions.forEach((q) => {
const idx = q.answers.findIndex((a) => a.answerResult === glass.answerData.answerResult); const idx = q.answers.findIndex(
(a) => a.answerResult === glass.answerData.answerResult
);
if (idx !== -1) { if (idx !== -1) {
selectedAnswerResult2 = q.answers[idx].answerResult2; selectedAnswerResult2 = q.answers[idx].answerResult2;
} }
@ -136,7 +154,7 @@ export default {
result1: glass.answerData.answerResult, result1: glass.answerData.answerResult,
result2: selectedAnswerResult2, result2: selectedAnswerResult2,
answeredQuestions: glass.answerData.answeredQuestions, answeredQuestions: glass.answerData.answeredQuestions,
isSuppressedPart: glass.isSuppressedPart isSuppressedPart: glass.isSuppressedPart,
}; };
}); });
// clear out answerData for future page loads; must occur prior to store save // clear out answerData for future page loads; must occur prior to store save
@ -144,22 +162,25 @@ export default {
glass.answerData = {}; glass.answerData = {};
}); });
// save to store as order.damage.moldingQuestionArrays (array) // save to store as order.damage.moldingQuestionArrays (array)
await this.mainStore.saveCapabilityQuestionAnswers(questionAnswersArray); await this.mainStore.saveCapabilityQuestionAnswers(
questionAnswersArray
);
// get parts from the capabilityQuestionAnswers // get parts from the capabilityQuestionAnswers
const partsOrQuestions = this.partsOrQuestionsData; const partsOrQuestions = this.partsOrQuestionsData;
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
for (const answer of questionAnswersArray) { for (const answer of questionAnswersArray) {
partsOrQuestions.find((partOrQuestion) => ( partsOrQuestions.find(
partOrQuestion.glassLocation === answer.glassLocation (partOrQuestion) =>
&& partOrQuestion.glassName === answer.glassName partOrQuestion.glassLocation === answer.glassLocation &&
)).parts[0].childParts = [ partOrQuestion.glassName === answer.glassName
).parts[0].childParts = [
{ {
partNumber: answer.partNum partNumber: answer.partNum,
} },
]; ];
} }
this.navigateForward(partsOrQuestions, null); this.navigateForward(partsOrQuestions, null);
} },
} },
}; };
</script> </script>

223
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -4,72 +4,70 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="page-container-grouped-styles"> <div class="container-fluid fade-on-route-transition">
<div class="fade-on-route-transition position-relative"> <div class="row justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="col-md-6 px-0 px-md-2">
<div class="select-car"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="container-fluid pb-2"> </div>
<div class="row px-3"> </div>
<div class="col"> <div class="row justify-content-center">
<div class="select-car-form rounded"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
class="mt-2 mb-4" class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<alert <alert
v-if="displayVinNotFoundAlert" v-if="displayVinNotFoundAlert"
ref="alertVinNotFound" ref="alertVinNotFound"
class="mb-4" class="mb-4"
cmsWidgetName="AlertVinNotFoundWidget" cmsWidgetName="AlertVinNotFoundWidget"
alertClass="alert-danger" alertClass="alert-danger"
:isDismissible="false" /> :isDismissible="false" />
<alert <alert
v-if="displayMatchedDifferentVehicleAlert" v-if="displayMatchedDifferentVehicleAlert"
ref="alertMatchedDifferentVehicle" ref="alertMatchedDifferentVehicle"
class="mb-4" class="mb-4"
cmsWidgetName="AlertMatchedDifferentVehicleWidget" cmsWidgetName="AlertMatchedDifferentVehicleWidget"
:manualHeadline="AlertMatchedDifferentVehicleHeader" :manualHeadline="AlertMatchedDifferentVehicleHeader"
:manualCopy="AlertMatchedDifferentVehicleBody" :manualCopy="AlertMatchedDifferentVehicleBody"
alertClass="alert-warning" alertClass="alert-warning"
:isDismissible="false" /> :isDismissible="false" />
<alert <alert
v-if="displayMatchedTwoIdenticalYMMVehicleAlert" v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
ref="alertMatchedTwoIdenticalYMMVehicle" ref="alertMatchedTwoIdenticalYMMVehicle"
class="mb-4" class="mb-4"
cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget" cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
:manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader" :manualHeadline="
:manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody" AlertMatchedTwoIdenticalYMMVehicleHeader
alertClass="alert-warning" "
:isDismissible="false" /> :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
<textboxQuestion alertClass="alert-warning"
id="license-plate-question-wrapper" :isDismissible="false" />
v-model="licensePlate" <textboxQuestion
cmsWidgetName="LicensePlateNumberQuestionWidget" id="license-plate-question-wrapper"
isRequired v-model="licensePlate"
disableAutoFill cmsWidgetName="LicensePlateNumberQuestionWidget"
inputId="license-plate-question" isRequired
validationRules="license-plate-required" /> disableAutoFill
<dropdownQuestion inputId="license-plate-question"
ref="state" validationRules="license-plate-required" />
v-model="licenseState" <dropdownQuestion
cmsWidgetName="StateQuestionWidget" ref="state"
inputId="8fdf9dc2e13e430eb57529499dceb3eb" v-model="licenseState"
:options="stateOptions" cmsWidgetName="StateQuestionWidget"
disableAutoFill inputId="8fdf9dc2e13e430eb57529499dceb3eb"
validationRules="state-required" :options="stateOptions"
class="mt-4 mb-2" /> disableAutoFill
<siteFooter validationRules="state-required"
ref="siteFooter" class="mt-4 mb-2" />
class="mt-5" <siteFooter
:isForwardActionDisabled="!meta.valid" ref="siteFooter"
cmsWidgetName="SiteFooterWidget" class="mt-5"
@backClicked="navigateBack" :isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction" /> cmsWidgetName="SiteFooterWidget"
</div> @backClicked="navigateBack"
</div> @forwardClicked="forwardButtonAction" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -83,7 +81,10 @@ import { useMainStore } from '@/store';
import errorMessages from '@/constants/error-messages'; import errorMessages from '@/constants/error-messages';
import { required } from '@/helpers/validation-rules'; import { required } from '@/helpers/validation-rules';
import { defineRule, Form } from 'vee-validate'; import { defineRule, Form } from 'vee-validate';
import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper.js'; import {
getDamageString,
isGlassAvailableForCarId,
} from '@/helpers/damage-helper.js';
import routerParams from '@/router/router-constants/router-params.js'; import routerParams from '@/router/router-constants/router-params.js';
import states from '@/constants/states'; import states from '@/constants/states';
@ -100,7 +101,10 @@ import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-qu
import alert from '@/ux-components/alert/alert.vue'; import alert from '@/ux-components/alert/alert.vue';
// Define Validation Rules // Define Validation Rules
defineRule('license-plate-required', required(errorMessages.LICENSE_PLATE_REQUIRED)); defineRule(
'license-plate-required',
required(errorMessages.LICENSE_PLATE_REQUIRED)
);
defineRule('state-required', required(errorMessages.STATE_REQUIRED)); defineRule('state-required', required(errorMessages.STATE_REQUIRED));
export default { export default {
@ -114,7 +118,7 @@ export default {
vehicleBanner, vehicleBanner,
textboxQuestion, textboxQuestion,
dropdownQuestion, dropdownQuestion,
alert alert,
}, },
mixins: [baseFormMixin, vinPagesMixin], mixins: [baseFormMixin, vinPagesMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -125,8 +129,8 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
} },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -149,7 +153,7 @@ export default {
isCarIdDifferent: false, isCarIdDifferent: false,
customAlertData: {}, customAlertData: {},
isSelectedGlassAvailableForVehicle: true, isSelectedGlassAvailableForVehicle: true,
forwardButtonCarStyle: '' forwardButtonCarStyle: '',
}; };
}, },
computed: { computed: {
@ -163,10 +167,12 @@ export default {
const vinYmmFound = const vinYmmFound =
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
`${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
`${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText') return this.getCmsContent(
'AlertMatchedDifferentVehicleWidget',
'BodyText'
)
.replaceAll('{custom:damage}', getDamageString()) .replaceAll('{custom:damage}', getDamageString())
.replaceAll('{custom:vinYmmFound}', vinYmmFound) .replaceAll('{custom:vinYmmFound}', vinYmmFound)
.replaceAll('{custom:vinYmmExpected}', vinYmmExpected); .replaceAll('{custom:vinYmmExpected}', vinYmmExpected);
@ -185,7 +191,10 @@ export default {
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
`${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`; `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
return this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'BodyText') return this.getCmsContent(
'AlertMatchedTwoIdenticalYMMVehicleWidget',
'BodyText'
)
.replaceAll('{custom:damage}', getDamageString()) .replaceAll('{custom:damage}', getDamageString())
.replaceAll('{custom:vinYmmsFound}', vinYmmsFound) .replaceAll('{custom:vinYmmsFound}', vinYmmsFound)
.replaceAll('{custom:vinYmmsExpected}', vinYmmsExpected); .replaceAll('{custom:vinYmmsExpected}', vinYmmsExpected);
@ -194,23 +203,26 @@ export default {
const vinYmmFound = const vinYmmFound =
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
`${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
`${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`; return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase();
return (vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase());
}, },
stateOptions: { stateOptions: {
get() { get() {
return states; return states;
} },
} },
}, },
watch: { watch: {
licensePlate() { licensePlate() {
this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')); this.$refs.siteFooter.updateButtonText(
this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
);
}, },
registrationZipCode() { registrationZipCode() {
this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')); this.$refs.siteFooter.updateButtonText(
} this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
);
},
}, },
mounted() { mounted() {
this.attachCustomEvents(); this.attachCustomEvents();
@ -221,7 +233,8 @@ export default {
return useMainStore().order.vehicle.carId !== null; return useMainStore().order.vehicle.carId !== null;
}, },
loadDefaultsFromStore() { loadDefaultsFromStore() {
this.customerQuestions = this.mainStore.customerData.addressQuestions.state; this.customerQuestions =
this.mainStore.customerData.addressQuestions.state;
}, },
attachCustomEvents() { attachCustomEvents() {
this.prependActionToMethod(this, this.forwardButtonAction, () => { this.prependActionToMethod(this, this.forwardButtonAction, () => {
@ -238,14 +251,17 @@ export default {
this.resetWarningsAndErrors(); this.resetWarningsAndErrors();
// Lookup VIN // Lookup VIN
const vinLookupResponse = await useMainStore().lookupVinByPlate(this.licensePlate, this.licenseState); const vinLookupResponse = await useMainStore().lookupVinByPlate(
this.licensePlate,
this.licenseState
);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'vinLookupResponse', resultKey: 'vinLookupResponse',
promise: vinLookupResponse promise: vinLookupResponse,
} },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -265,8 +281,8 @@ export default {
vehicleFromLookup.carId !== useMainStore().order.vehicle.carId; vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
// Handle changing car // Handle changing car
if ( if (
this.isCarIdDifferent this.isCarIdDifferent &&
&& vehicleFromLookup.carId !== this.previouslyEnteredCarId vehicleFromLookup.carId !== this.previouslyEnteredCarId
) { ) {
// Display Alert // Display Alert
this.previouslyEnteredCarId = vehicleFromLookup.carId; this.previouslyEnteredCarId = vehicleFromLookup.carId;
@ -279,24 +295,30 @@ export default {
this.displayMatchedDifferentVehicleAlert = true; this.displayMatchedDifferentVehicleAlert = true;
} }
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleFromLookup.carId); this.isSelectedGlassAvailableForVehicle =
await isGlassAvailableForCarId(vehicleFromLookup.carId);
// Update button "Continue with..." // Update button "Continue with..."
this.$refs.siteFooter this.$refs.siteFooter
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
.updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`); .updateButtonText(
`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`
);
return this.$refs.siteFooter.removeLoader(); return this.$refs.siteFooter.removeLoader();
} }
// Save vehicle, license plate, and registration information // Save vehicle, license plate, and registration information
await useMainStore().saveRegistrationLicensePlateLookup( await useMainStore().saveRegistrationLicensePlateLookup(
{ {
isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle, isSelectedGlassAvailableForVehicle:
vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { vin: vinLookupResponse.data.vin }), this.isSelectedGlassAvailableForVehicle,
vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, {
vin: vinLookupResponse.data.vin,
}),
registrationInfo: { registrationInfo: {
licensePlate: this.licensePlate, licensePlate: this.licensePlate,
state: this.licenseState state: this.licenseState,
} },
}, },
false false
); );
@ -307,7 +329,10 @@ export default {
// If a different vehicle is found than the one entered and the selected glass is // If a different vehicle is found than the one entered and the selected glass is
// not available for that vehicle then navigate back to "vehicle-damage" // not available for that vehicle then navigate back to "vehicle-damage"
// display vehicle changed alert on that page. // display vehicle changed alert on that page.
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) { if (
this.isCarIdDifferent &&
!this.isSelectedGlassAvailableForVehicle
) {
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
this.$route, this.$route,
@ -321,8 +346,8 @@ export default {
resetWarningsAndErrors() { resetWarningsAndErrors() {
this.displayVinNotFoundAlert = false; this.displayVinNotFoundAlert = false;
this.displayMatchedDifferentVehicleAlert = false; this.displayMatchedDifferentVehicleAlert = false;
} },
} },
}; };
</script> </script>

98
src/layouts/molding-questions/molding-questions.vue
View file

@ -1,23 +1,23 @@
<template> <template>
<Form <Form
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<questionsPageLayout <questionsPageLayout
id="molding-question-wrapper" id="molding-question-wrapper"
ref="questionsPageLayout" ref="questionsPageLayout"
v-model="selectedAnswers" v-model="selectedAnswers"
isRequired isRequired
:isMetaValid="meta.valid" :isMetaValid="meta.valid"
:alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader" :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
:alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy" :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
:questionsData="questionsData" :questionsData="questionsData"
:validationRules="rules.optionRequired" :validationRules="rules.optionRequired"
:index="currentGlassIndex" :index="currentGlassIndex"
@forwardButtonAction="forwardButtonAction" @forwardButtonAction="forwardButtonAction"
@backClick="navigateBackByVehicleQuestions" /> @backClick="navigateBackByVehicleQuestions" />
</Form> </Form>
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
@ -38,7 +38,7 @@ export default {
components: { components: {
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
questionsPageLayout questionsPageLayout,
}, },
mixins: [BaseFormMixin, vehicleQuestionsMixin], mixins: [BaseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -48,8 +48,8 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
} },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -64,8 +64,8 @@ export default {
selectedAnswers: {}, selectedAnswers: {},
currentGlassIndex: 0, currentGlassIndex: 0,
rules: { rules: {
optionRequired: globalRules.OPTION_REQUIRED optionRequired: globalRules.OPTION_REQUIRED,
} },
}; };
}, },
computed: { computed: {
@ -76,23 +76,34 @@ export default {
); );
}, },
AlertFewMoreQuestionsCopy() { AlertFewMoreQuestionsCopy() {
return this.getCmsContent('AdditionalPartsQuestionsAlert', 'BodyText'); return this.getCmsContent(
'AdditionalPartsQuestionsAlert',
'BodyText'
);
}, },
partsOrQuestionsData() { partsOrQuestionsData() {
return useMainStore().pageData(issPageValues.MOLDING_QUESTIONS) return useMainStore().pageData(issPageValues.MOLDING_QUESTIONS)
.partsOrQuestions; .partsOrQuestions;
} },
}, },
mounted() { mounted() {
this.getInitialQuestionData(); this.getInitialQuestionData();
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
const moldingQuestionsFromPageData = useMainStore().pageData(issPageValues.MOLDING_QUESTIONS); const moldingQuestionsFromPageData = useMainStore().pageData(
issPageValues.MOLDING_QUESTIONS
);
return ( return (
// has childPartQuestions array and has glassName not null // has childPartQuestions array and has glassName not null
moldingQuestionsFromPageData?.partsOrQuestions?.some((part) => part?.glassName) moldingQuestionsFromPageData?.partsOrQuestions?.some(
&& moldingQuestionsFromPageData.partsOrQuestions.some((glass) => glass.parts?.some((part) => part?.childPartQuestions?.length > 0)) (part) => part?.glassName
) &&
moldingQuestionsFromPageData.partsOrQuestions.some((glass) =>
glass.parts?.some(
(part) => part?.childPartQuestions?.length > 0
)
)
); );
}, },
getInitialQuestionData() { getInitialQuestionData() {
@ -134,41 +145,44 @@ export default {
glassName: glass.glassName, glassName: glass.glassName,
partNum: glass.answerData.answerResult, partNum: glass.answerData.answerResult,
answeredQuestions: glass.answerData.answeredQuestions, answeredQuestions: glass.answerData.answeredQuestions,
isSuppressedPart: glass.isSuppressedPart isSuppressedPart: glass.isSuppressedPart,
})); }));
// clear out answerData for future page loads; must occur prior to store save // clear out answerData for future page loads; must occur prior to store save
this.questionsData.forEach((glass) => { this.questionsData.forEach((glass) => {
glass.answerData = {}; glass.answerData = {};
}); });
// save to store as order.damage.moldingQuestionArrays (array) // save to store as order.damage.moldingQuestionArrays (array)
await this.mainStore.saveMoldingQuestionAnswers(questionAnswersArray); await this.mainStore.saveMoldingQuestionAnswers(
questionAnswersArray
);
// get parts from the questionAnswers // get parts from the questionAnswers
const partsOrQuestions = this.partsOrQuestionsData; const partsOrQuestions = this.partsOrQuestionsData;
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
for (const answer of questionAnswersArray) { for (const answer of questionAnswersArray) {
partsOrQuestions.find((partOrQuestion) => ( partsOrQuestions.find(
partOrQuestion.glassLocation === answer.glassLocation (partOrQuestion) =>
&& partOrQuestion.glassName === answer.glassName partOrQuestion.glassLocation === answer.glassLocation &&
)).parts[0].childParts = [ partOrQuestion.glassName === answer.glassName
).parts[0].childParts = [
{ {
partNumber: answer.partNum partNumber: answer.partNum,
} },
]; ];
} }
this.navigateForward(partsOrQuestions, null); this.navigateForward(partsOrQuestions, null);
} },
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#molding-question-wrapper p.text-body.small { #molding-question-wrapper p.text-body.small {
margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
} }
#molding-question-wrapper .form-test-error { #molding-question-wrapper .form-test-error {
margin-top: 0 !important; // Overrides extra margin-top on error message text margin-top: 0 !important; // Overrides extra margin-top on error message text
} }
</style> </style>

176
src/layouts/order-confirmation/order-confirmation.vue
View file

@ -32,7 +32,9 @@
overnightDropOffWidgetName="AddToCalendar_OvernightDropOff" overnightDropOffWidgetName="AddToCalendar_OvernightDropOff"
allDayDropOffWidgetName="AddToCalendar_AllDayDropOff" allDayDropOffWidgetName="AddToCalendar_AllDayDropOff"
sameDayDropOffWidgetName="AddToCalendar_SameDayDropOff" sameDayDropOffWidgetName="AddToCalendar_SameDayDropOff"
:serviceLocationFullAddress="serviceLocationFullAddress" :serviceLocationFullAddress="
serviceLocationFullAddress
"
:providerFullAddress="providerFullAddress" :providerFullAddress="providerFullAddress"
:appointmentType="appointmentType" :appointmentType="appointmentType"
:scheduleDate="appointmentDate" :scheduleDate="appointmentDate"
@ -40,12 +42,10 @@
:scheduleEndTime="appointmentEndTime" /> :scheduleEndTime="appointmentEndTime" />
<div <div
class="appointment-text text-center lh-base" class="appointment-text text-center lh-base"
v-html="appointmentWordingText"> v-html="appointmentWordingText"></div>
</div>
<div <div
class="appointment-text text-center lh-base mt-2" class="appointment-text text-center lh-base mt-2"
v-html="appointmentWordingText2"> v-html="appointmentWordingText2"></div>
</div>
</div> </div>
<div <div
class="email-confirmation-text" class="email-confirmation-text"
@ -70,15 +70,20 @@ import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue'; import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue';
// Supporting files // Supporting files
import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper'; import {
fetchCmsContentForPage,
processIfStatements,
} from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper'; import settleAllPromises from '@/helpers/layout-helper';
import { Form } from 'vee-validate'; import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store'; import { useMainStore } from '@/store';
import { get12HourTimeFormat, import {
get12HourTimeFormat,
get12HourTimeMobileFormat, get12HourTimeMobileFormat,
convertDateStringToDate, convertDateStringToDate,
getDisplayTextForDurationLength } from '@/helpers/date-helper.js'; getDisplayTextForDurationLength,
} from '@/helpers/date-helper.js';
import { toTitleCase } from '@/helpers/text-helper.js'; import { toTitleCase } from '@/helpers/text-helper.js';
import { AppointmentTypeStrings } from '@/constants/schedule-constants'; import { AppointmentTypeStrings } from '@/constants/schedule-constants';
import applicationConfig from '@/constants/application-config'; import applicationConfig from '@/constants/application-config';
@ -91,7 +96,7 @@ export default {
siteHeader, siteHeader,
vehicleBanner, vehicleBanner,
siteFooter, siteFooter,
addToCalendar addToCalendar,
}, },
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -103,9 +108,10 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
}]; },
// use resultMap to populate layout content. ];
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
@ -124,9 +130,18 @@ export default {
return this.mainStore.issConfig.successReturnURL; return this.mainStore.issConfig.successReturnURL;
}, },
confirmationEmailText() { confirmationEmailText() {
return this.getCmsContent('EmailConfirmationWordingWidget', 'BodyText') return this.getCmsContent(
?.replaceAll('{custom:CUSTOMER_PORTAL_URL}', applicationConfig.CUSTOMER_PORTAL_URL) 'EmailConfirmationWordingWidget',
?.replaceAll('{custom:CUSTOMER_PORTAL_LOGIN_TOKEN}', this.submittedOrder.customerPortalLoginToken) 'BodyText'
)
?.replaceAll(
'{custom:CUSTOMER_PORTAL_URL}',
applicationConfig.CUSTOMER_PORTAL_URL
)
?.replaceAll(
'{custom:CUSTOMER_PORTAL_LOGIN_TOKEN}',
this.submittedOrder.customerPortalLoginToken
)
?.replaceAll('&lt;', '<') ?.replaceAll('&lt;', '<')
?.replaceAll('&gt;', '>'); ?.replaceAll('&gt;', '>');
}, },
@ -155,11 +170,13 @@ export default {
return dateObject.toLocaleDateString('en-us', { return dateObject.toLocaleDateString('en-us', {
weekday: 'long', weekday: 'long',
month: 'long', month: 'long',
day: 'numeric' day: 'numeric',
}); });
}, },
appointmentTimeFormatted() { appointmentTimeFormatted() {
const formattedTime = this.formatAppointmentTime(this.appointmentType); const formattedTime = this.formatAppointmentTime(
this.appointmentType
);
return formattedTime; return formattedTime;
}, },
mobileWordingText() { mobileWordingText() {
@ -169,7 +186,10 @@ export default {
return this.getCmsContent('MobileWordingWidget', 'BodyText2'); return this.getCmsContent('MobileWordingWidget', 'BodyText2');
}, },
dropOffAndInShopWordingText() { dropOffAndInShopWordingText() {
return this.getCmsContent('DropOffAndInShopWordingWidget', 'BodyText'); return this.getCmsContent(
'DropOffAndInShopWordingWidget',
'BodyText'
);
}, },
dropOffAndInShopWordingText2() { dropOffAndInShopWordingText2() {
return this.getBodyText2FromCms('DropOffAndInShopWordingWidget'); return this.getBodyText2FromCms('DropOffAndInShopWordingWidget');
@ -191,13 +211,24 @@ export default {
}, },
serviceLocationFullAddress() { serviceLocationFullAddress() {
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
return `${this.serviceLocationAddress}, ${this.serviceLocationAddress2 ? `${this.serviceLocationAddress2},` : ''}<br/> ${this.serviceLocationCity}, ${this.serviceLocationState} ${this.serviceLocationZipCode}`; return `${this.serviceLocationAddress}, ${
this.serviceLocationAddress2
? `${this.serviceLocationAddress2},`
: ''
}<br/> ${this.serviceLocationCity}, ${this.serviceLocationState} ${
this.serviceLocationZipCode
}`;
}, },
providerAddress() { providerAddress() {
return toTitleCase(this.submittedOrder.serviceLocation.provider.address.streetAddress); return toTitleCase(
this.submittedOrder.serviceLocation.provider.address
.streetAddress
);
}, },
providerCity() { providerCity() {
return toTitleCase(this.submittedOrder.serviceLocation.provider.address.city); return toTitleCase(
this.submittedOrder.serviceLocation.provider.address.city
);
}, },
providerState() { providerState() {
return this.submittedOrder.serviceLocation.provider.address.state; return this.submittedOrder.serviceLocation.provider.address.state;
@ -207,7 +238,9 @@ export default {
}, },
providerFullAddress() { providerFullAddress() {
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
return this.submittedOrder.serviceLocation?.provider?.address ? `${this.providerAddress},<br/> ${this.providerCity}, ${this.providerState} ${this.providerZipCode}` : ''; return this.submittedOrder.serviceLocation?.provider?.address
? `${this.providerAddress},<br/> ${this.providerCity}, ${this.providerState} ${this.providerZipCode}`
: '';
}, },
appointmentWordingText() { appointmentWordingText() {
switch (this.appointmentType) { switch (this.appointmentType) {
@ -248,14 +281,24 @@ export default {
} }
}, },
mobileAppointment() { mobileAppointment() {
return this.submittedOrder.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE return (
|| this.submittedOrder.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP; this.submittedOrder.serviceLocation.appointmentType ===
AppointmentTypeStrings.MOBILE ||
this.submittedOrder.serviceLocation.appointmentType ===
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
);
}, },
inShopAppointment() { inShopAppointment() {
return this.submittedOrder.serviceLocation.appointmentType === AppointmentTypeStrings.IN_SHOP; return (
this.submittedOrder.serviceLocation.appointmentType ===
AppointmentTypeStrings.IN_SHOP
);
}, },
dropOffAppointment() { dropOffAppointment() {
return this.submittedOrder.serviceLocation.appointmentType === AppointmentTypeStrings.DROP_OFF; return (
this.submittedOrder.serviceLocation.appointmentType ===
AppointmentTypeStrings.DROP_OFF
);
}, },
inShopAppointmentDuration() { inShopAppointmentDuration() {
const inshopDurationTime = getDisplayTextForDurationLength( const inshopDurationTime = getDisplayTextForDurationLength(
@ -263,11 +306,13 @@ export default {
this.submittedOrder.schedule.jobMaxMinutes this.submittedOrder.schedule.jobMaxMinutes
); );
return inshopDurationTime; return inshopDurationTime;
} },
}, },
mounted() { mounted() {
if (this.carrierUrl) { if (this.carrierUrl) {
this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`); this.$refs.siteFooter.updateButtonText(
`Go back to ${this.carrierName}`
);
} }
}, },
methods: { methods: {
@ -280,57 +325,62 @@ export default {
// Service Location // Service Location
const { serviceLocation } = useMainStore().order; const { serviceLocation } = useMainStore().order;
const mobileReqs = !!( const mobileReqs = !!(
serviceLocation.address serviceLocation.address &&
&& serviceLocation.city serviceLocation.city &&
&& serviceLocation.state serviceLocation.state &&
&& serviceLocation.zipCode serviceLocation.zipCode
); );
const providerLocation = serviceLocation.provider.address; const providerLocation = serviceLocation.provider.address;
const dropOffInShopReqs = !!( const dropOffInShopReqs = !!(
providerLocation.streetAddress providerLocation.streetAddress &&
&& providerLocation.city providerLocation.city &&
&& providerLocation.state providerLocation.state &&
&& providerLocation.zipCode providerLocation.zipCode
); );
const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE const isMobile =
|| serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP; serviceLocation.appointmentType ===
AppointmentTypeStrings.MOBILE ||
serviceLocation.appointmentType ===
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
const serviceLocationReqs = const serviceLocationReqs =
(isMobile && mobileReqs) || (!isMobile && dropOffInShopReqs); (isMobile && mobileReqs) || (!isMobile && dropOffInShopReqs);
// Insurance // Insurance
const isInsuranceSet = useMainStore().order.payment.isInsurance !== null; const isInsuranceSet =
useMainStore().order.payment.isInsurance !== null;
// Schedule // Schedule
const { schedule } = useMainStore().order; const { schedule } = useMainStore().order;
const scheduleReqs = !!( const scheduleReqs = !!(
schedule.date schedule.date &&
&& schedule.startTime schedule.startTime &&
&& schedule.endTime schedule.endTime &&
&& schedule.jobMaxMinutes schedule.jobMaxMinutes &&
&& schedule.jobMinMinutes schedule.jobMinMinutes
); );
// Contact Info // Contact Info
const { contactInfo } = useMainStore().order; const { contactInfo } = useMainStore().order;
const contactInfoReqs = !!( const contactInfoReqs = !!(
contactInfo.firstName contactInfo.firstName &&
&& contactInfo.lastName contactInfo.lastName &&
&& contactInfo.servicePhone contactInfo.servicePhone &&
&& contactInfo.emailAddress contactInfo.emailAddress
); );
// Payment // Payment
const paymentMethodReqs = useMainStore().order.payment.isPayInAdvance === false; const paymentMethodReqs =
useMainStore().order.payment.isPayInAdvance === false;
return ( return (
serviceLocationReqs serviceLocationReqs &&
&& isInsuranceSet isInsuranceSet &&
&& scheduleReqs scheduleReqs &&
&& contactInfoReqs contactInfoReqs &&
&& paymentMethodReqs paymentMethodReqs
); );
}, },
forwardButtonAction() { forwardButtonAction() {
@ -341,11 +391,15 @@ export default {
case AppointmentTypeStrings.MOBILE: case AppointmentTypeStrings.MOBILE:
case AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: case AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP:
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
return `Between ${get12HourTimeMobileFormat(this.appointmentStartTime)} - ${get12HourTimeMobileFormat(this.appointmentEndTime)}`; return `Between ${get12HourTimeMobileFormat(
this.appointmentStartTime
)} - ${get12HourTimeMobileFormat(this.appointmentEndTime)}`;
case AppointmentTypeStrings.DROP_OFF: case AppointmentTypeStrings.DROP_OFF:
return 'Drop off before 9:30 AM'; return 'Drop off before 9:30 AM';
case AppointmentTypeStrings.IN_SHOP: case AppointmentTypeStrings.IN_SHOP:
return `at ${get12HourTimeFormat(this.appointmentStartTime)}`; return `at ${get12HourTimeFormat(
this.appointmentStartTime
)}`;
default: default:
return null; return null;
} }
@ -353,7 +407,11 @@ export default {
processIfStatements, processIfStatements,
getBodyText2FromCms(cmsWidgetName) { getBodyText2FromCms(cmsWidgetName) {
const body2Text = this.getCmsContent(cmsWidgetName, 'BodyText2'); const body2Text = this.getCmsContent(cmsWidgetName, 'BodyText2');
return this.processIfStatements(body2Text, 'custom', this.getCustomValueFromString); return this.processIfStatements(
body2Text,
'custom',
this.getCustomValueFromString
);
}, },
getCustomValueFromString(str) { getCustomValueFromString(str) {
switch (str) { switch (str) {
@ -364,8 +422,8 @@ export default {
default: default:
return null; return null;
} }
} },
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

39
src/layouts/part-questions/part-questions.vue
View file

@ -37,7 +37,7 @@ export default {
components: { components: {
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
questionsPageLayout questionsPageLayout,
}, },
mixins: [BaseFormMixin, vehicleQuestionsMixin], mixins: [BaseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -48,8 +48,8 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
} },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -65,8 +65,8 @@ export default {
selectedAnswers: {}, selectedAnswers: {},
currentGlassIndex: 0, currentGlassIndex: 0,
rules: { rules: {
optionRequired: globalRules.OPTION_REQUIRED optionRequired: globalRules.OPTION_REQUIRED,
} },
}; };
}, },
computed: { computed: {
@ -78,11 +78,12 @@ export default {
}, },
pageData() { pageData() {
return useMainStore().pageData(issPageValues.PART_QUESTIONS); return useMainStore().pageData(issPageValues.PART_QUESTIONS);
} },
}, },
mounted() { mounted() {
// are there alreadyAnsweredQuestions? // are there alreadyAnsweredQuestions?
const alreadyAnsweredQuestions = useMainStore().damage.partQuestionAnswers; const alreadyAnsweredQuestions =
useMainStore().damage.partQuestionAnswers;
this.questionsData = this.pageData.partsOrQuestions this.questionsData = this.pageData.partsOrQuestions
.filter((x) => x.partQuestions) .filter((x) => x.partQuestions)
@ -93,7 +94,11 @@ export default {
// reset selectedAnswers for this glass // reset selectedAnswers for this glass
this.selectedAnswers[glass.answerKey] = []; this.selectedAnswers[glass.answerKey] = [];
const updatedGlass = this.setupInitialData(glass, index, alreadyAnsweredQuestions); const updatedGlass = this.setupInitialData(
glass,
index,
alreadyAnsweredQuestions
);
// Set up watch for each set of glass questions // Set up watch for each set of glass questions
this.$watch( this.$watch(
@ -111,19 +116,23 @@ export default {
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
const partQuestionsFromPageData = useMainStore().pageData(issPageValues.PART_QUESTIONS); const partQuestionsFromPageData = useMainStore().pageData(
issPageValues.PART_QUESTIONS
);
return ( return (
partQuestionsFromPageData partQuestionsFromPageData &&
&& Object.keys(partQuestionsFromPageData.partsOrQuestions).length > 0 Object.keys(partQuestionsFromPageData.partsOrQuestions).length >
0
); );
}, },
async forwardButtonAction() { async forwardButtonAction() {
const questionAnswersArray = this.questionsData.map((glass) => ({ const questionAnswersArray = this.questionsData.map((glass) => ({
glassLocation: glass.glassLocation, glassLocation: glass.glassLocation,
glassName: glass.glassName, glassName: glass.glassName,
result: (glass.answerData && glass.answerData.answerResult) || '', result:
(glass.answerData && glass.answerData.answerResult) || '',
answeredQuestions: glass.answerData?.answeredQuestions, answeredQuestions: glass.answerData?.answeredQuestions,
isSuppressedPart: glass.isSuppressedPart isSuppressedPart: glass.isSuppressedPart,
})); }));
// clear out answerData for future page loads; must occur prior to store save // clear out answerData for future page loads; must occur prior to store save
@ -143,7 +152,7 @@ export default {
// TODO KO delete for quote mvp // TODO KO delete for quote mvp
this.navigateForward(glassPartsForStore, null); this.navigateForward(glassPartsForStore, null);
} },
} },
}; };
</script> </script>

242
src/layouts/payment-method/payment-method.vue
View file

@ -4,53 +4,61 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="page-container-grouped-styles"> <div class="container-fluid fade-on-route-transition">
<siteHeader <div class="row justify-content-center">
ref="siteHeader" <div class="col-md-6 px-0 px-md-2">
cmsWidgetName="SiteHeaderWidget" /> <siteHeader
<vehicleBanner ref="siteHeader"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="SiteHeaderWidget" />
:displayGenericVehicleImage="false" /> </div>
<siteSubHeader </div>
class="mb-5 mt-4 px-3" <div class="row justify-content-center">
cmsWidgetName="SiteSubHeaderWidget" <div class="col-md-6 col-xl-4">
subHeaderClasses="mt-2" /> <vehicleBanner
<div class="main-content-container"> cmsWidgetName="VehicleBannerWidget"
<hr class="my-0" /> :displayGenericVehicleImage="false" />
<reviewDropdown ref="reviewDropdown" /> <siteSubHeader
<hr class="my-0" /> class="mb-5 mt-4 px-3"
<cartDropdown cmsWidgetName="SiteSubHeaderWidget"
:showAsPaid="false" subHeaderClasses="mt-2" />
:readOnly="false" <div class="main-content-container">
recyclingModalCmsWidgetName="RecycleModal" <hr class="my-0" />
servicePackageTitleWidgetName="ServicePackageTitle" <reviewDropdown ref="reviewDropdown" />
:availableVaps="availableVaps" /> <hr class="my-0" />
<hr class="mt-0 mb-5" /> <cartDropdown
<alert :showAsPaid="false"
v-if="displayPayInAdvanceAlert" :readOnly="false"
name="payInAdvanceErrorAlert" recyclingModalCmsWidgetName="RecycleModal"
class="my-4" servicePackageTitleWidgetName="ServicePackageTitle"
cmsWidgetName="PayInAdvanceErrorAlertWidget" :availableVaps="availableVaps" />
alertClass="alert-danger" <hr class="mt-0 mb-5" />
:isDismissible="false" /> <alert
<paymentMethodQuestion v-if="displayPayInAdvanceAlert"
v-if="!isPayInAdvanceDisabled" name="payInAdvanceErrorAlert"
v-model="paymentMethodInternalModel" class="my-4"
cmsWidgetName="PaymentMethodWidget" cmsWidgetName="PayInAdvanceErrorAlertWidget"
:validationRules="rules.optionRequired" /> alertClass="alert-danger"
<alert :isDismissible="false" />
v-if="isPayInAdvanceDisabled" <paymentMethodQuestion
:isDismissible="false" v-if="!isPayInAdvanceDisabled"
alertClass="alert-info" v-model="paymentMethodInternalModel"
cmsWidgetName="NoPayInAdvanceDisclaimerWidget" cmsWidgetName="PaymentMethodWidget"
:shouldScrollToOnMount="false" /> :validationRules="rules.optionRequired" />
<siteFooter <alert
ref="siteFooter" v-if="isPayInAdvanceDisabled"
cmsWidgetName="SiteFooterWidget" :isDismissible="false"
:isForwardActionDisabled="!meta.valid" alertClass="alert-info"
:isStackedVertically="true" cmsWidgetName="NoPayInAdvanceDisclaimerWidget"
@backClicked="navigateBack" :shouldScrollToOnMount="false" />
@ForwardClicked="forwardButtonAction" /> <siteFooter
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isStackedVertically="true"
@backClicked="navigateBack"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div> </div>
</div> </div>
</Form> </Form>
@ -91,7 +99,7 @@ export default {
reviewDropdown, reviewDropdown,
cartDropdown, cartDropdown,
paymentMethodQuestion, paymentMethodQuestion,
alert alert,
}, },
mixins: [baseFormMixin], mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -104,20 +112,20 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
}, },
{ {
resultKey: 'reviewDropdownData', resultKey: 'reviewDropdownData',
promise: reviewDropdownPromise promise: reviewDropdownPromise,
}, },
{ {
resultKey: 'wipers', resultKey: 'wipers',
promise: wipersPromise promise: wipersPromise,
}, },
{ {
resultKey: 'rainDefense', resultKey: 'rainDefense',
promise: rainDefensePromise promise: rainDefensePromise,
} },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -127,7 +135,8 @@ export default {
const unpricedVaps = [...resultMap.wipers, resultMap.rainDefense]; const unpricedVaps = [...resultMap.wipers, resultMap.rainDefense];
let hasBailedOut = false; let hasBailedOut = false;
const pricedVaps = await useMainStore().getPriceOrderItems(unpricedVaps) const pricedVaps = await useMainStore()
.getPriceOrderItems(unpricedVaps)
.catch((err) => { .catch((err) => {
useMainStore().setBailout( useMainStore().setBailout(
bailoutMessage.pricingResponseError( bailoutMessage.pricingResponseError(
@ -143,7 +152,9 @@ export default {
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
vm.updateFooterButtonText(vm.customCallToActionButtonCopy); vm.updateFooterButtonText(vm.customCallToActionButtonCopy);
vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData); vm.$refs.reviewDropdown.initializeComponent(
resultMap.reviewDropdownData
);
vm.setAvailableVaps(pricedVaps ?? []); vm.setAvailableVaps(pricedVaps ?? []);
}); });
} }
@ -153,8 +164,8 @@ export default {
availableVaps: [], availableVaps: [],
paymentMethodInternalModel: this.getPaymentMethodFromStore(), paymentMethodInternalModel: this.getPaymentMethodFromStore(),
rules: { rules: {
optionRequired: globalRules.OPTION_REQUIRED optionRequired: globalRules.OPTION_REQUIRED,
} },
}; };
}, },
computed: { computed: {
@ -171,113 +182,128 @@ export default {
} }
}, },
displayPayInAdvanceAlert() { displayPayInAdvanceAlert() {
return ( return this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT];
this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]
);
}, },
isPayInAdvanceDisabled() { isPayInAdvanceDisabled() {
const piaExperience = this.getSettingValue(experimentSettings.ISS_DISPLAY_PAY_IN_ADVANCE); const piaExperience = this.getSettingValue(
experimentSettings.ISS_DISPLAY_PAY_IN_ADVANCE
);
const isEnabled = piaExperience === 'true'; const isEnabled = piaExperience === 'true';
return !isEnabled || this.isUnverified; return !isEnabled || this.isUnverified;
}, },
isUnverified() { isUnverified() {
return !useMainStore().isNoComp && !useMainStore().isITAC return (
&& (useMainStore().order.currentDeductible == null || !useMainStore().isVerifiedCoverageStatus); !useMainStore().isNoComp &&
!useMainStore().isITAC &&
(useMainStore().order.currentDeductible == null ||
!useMainStore().isVerifiedCoverageStatus)
);
}, },
paymentMethod() { paymentMethod() {
return this.paymentMethodInternalModel; return this.paymentMethodInternalModel;
} },
}, },
watch: { watch: {
customCallToActionButtonCopy(newValue) { customCallToActionButtonCopy(newValue) {
this.updateFooterButtonText(newValue); this.updateFooterButtonText(newValue);
} },
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
// Vehicle // Vehicle
const { vehicle } = useMainStore().order; const { vehicle } = useMainStore().order;
const vehicleReqs = !!(vehicle.year && vehicle.make && vehicle.model && vehicle.style); const vehicleReqs = !!(
vehicle.year &&
vehicle.make &&
vehicle.model &&
vehicle.style
);
// Damage // Damage
const { isRepair, numberOfChips, glassToReplace } = useMainStore().order.damage; const { isRepair, numberOfChips, glassToReplace } =
useMainStore().order.damage;
const damageReqs = !!( const damageReqs = !!(
(isRepair && numberOfChips) (isRepair && numberOfChips) ||
|| (!isRepair && glassToReplace?.length) (!isRepair && glassToReplace?.length)
); );
// Service Package // Service Package
const { lineItems } = useMainStore().order; const { lineItems } = useMainStore().order;
const packageReqs = !!( const packageReqs = !!(
(isRepair || lineItems.glassParts) (isRepair || lineItems.glassParts) &&
&& lineItems.supportingItems lineItems.supportingItems
); );
// Service Location // Service Location
const { serviceLocation } = useMainStore().order; const { serviceLocation } = useMainStore().order;
const mobileReqs = !!( const mobileReqs = !!(
serviceLocation.address serviceLocation.address &&
&& serviceLocation.city serviceLocation.city &&
&& serviceLocation.state serviceLocation.state &&
&& serviceLocation.zipCode serviceLocation.zipCode
); );
const providerLocation = serviceLocation.provider.address; const providerLocation = serviceLocation.provider.address;
const dropOffInshopReqs = !!( const dropOffInshopReqs = !!(
providerLocation.streetAddress providerLocation.streetAddress &&
&& providerLocation.city providerLocation.city &&
&& providerLocation.state providerLocation.state &&
&& providerLocation.zipCode providerLocation.zipCode
); );
const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE const isMobile =
|| serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP; serviceLocation.appointmentType ===
AppointmentTypeStrings.MOBILE ||
serviceLocation.appointmentType ===
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
const serviceLocationReqs = const serviceLocationReqs =
(isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs); (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
// Schedule // Schedule
const { date, startTime, endTime, jobMaxMinutes, jobMinMinutes } = useMainStore().order.schedule; const { date, startTime, endTime, jobMaxMinutes, jobMinMinutes } =
useMainStore().order.schedule;
const scheduleReqs = !!( const scheduleReqs = !!(
date date &&
&& startTime startTime &&
&& endTime endTime &&
&& jobMaxMinutes jobMaxMinutes &&
&& jobMinMinutes jobMinMinutes
); );
// Customer // Customer
const { firstName, lastName, emailAddress } = useMainStore().order.customer; const { firstName, lastName, emailAddress } =
const customerReqs = !!( useMainStore().order.customer;
firstName const customerReqs = !!(firstName && lastName && emailAddress);
&& lastName
&& emailAddress
);
// Contact Info // Contact Info
const { contactInfo } = useMainStore().order; const { contactInfo } = useMainStore().order;
const contactInfoReqs = !!( const contactInfoReqs = !!(
contactInfo.firstName contactInfo.firstName &&
&& contactInfo.lastName contactInfo.lastName &&
&& contactInfo.servicePhone contactInfo.servicePhone &&
&& contactInfo.emailAddress contactInfo.emailAddress
); );
return ( return (
vehicleReqs vehicleReqs &&
&& damageReqs damageReqs &&
&& packageReqs packageReqs &&
&& serviceLocationReqs serviceLocationReqs &&
&& scheduleReqs scheduleReqs &&
&& customerReqs customerReqs &&
&& contactInfoReqs contactInfoReqs
); );
}, },
getPaymentMethodFromStore() { getPaymentMethodFromStore() {
const { payInAdvanceType } = useMainStore().order.payment; const { payInAdvanceType } = useMainStore().order.payment;
const isPayInAdvance = useMainStore().order.payment.isPayInAdvance && !!payInAdvanceType; const isPayInAdvance =
useMainStore().order.payment.isPayInAdvance &&
!!payInAdvanceType;
return isPayInAdvance ? payInAdvanceType : paymentMethods.PAY_AT_TIME_OF_SERVICE; return isPayInAdvance
? payInAdvanceType
: paymentMethods.PAY_AT_TIME_OF_SERVICE;
}, },
updateFooterButtonText(newValue) { updateFooterButtonText(newValue) {
this.$refs.siteFooter.updateButtonText(newValue); this.$refs.siteFooter.updateButtonText(newValue);
@ -299,8 +325,8 @@ export default {
}, },
setAvailableVaps(vaps) { setAvailableVaps(vaps) {
this.availableVaps = vaps; this.availableVaps = vaps;
} },
} },
}; };
</script> </script>

130
src/layouts/policy-endorsements/policy-endorsements.vue
View file

@ -4,13 +4,16 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div <div class="container-fluid fade-on-route-transition">
class="page-container-grouped-styles"> <div class="row justify-content-center">
<div class="fade-on-route-transition position-relative"> <div class="col-md-6 px-0 px-md-2">
<siteHeader <siteHeader
ref="siteHeader" ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" /> cmsWidgetName="SiteHeaderWidget" />
<div class="container-fluid mt-0 px-5"> </div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader <siteSubHeader
ref="siteSubHeader" ref="siteSubHeader"
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
@ -79,7 +82,7 @@ export default {
siteFooter, siteFooter,
buttonQuestion, buttonQuestion,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form Form,
}, },
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -89,9 +92,10 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
}]; },
// use resultMap to populate layout content. ];
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
@ -108,10 +112,12 @@ export default {
questionAnswersArray: [], questionAnswersArray: [],
schoolPropertyAnswer: '', schoolPropertyAnswer: '',
parkingLotAnswer: '', parkingLotAnswer: '',
hasValidCarId: this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== '0', hasValidCarId:
this.mainStore.vehicle.carId &&
this.mainStore.vehicle.carId !== '0',
rules: { rules: {
selectionRequired: globalRules.OPTION_REQUIRED selectionRequired: globalRules.OPTION_REQUIRED,
} },
}; };
}, },
computed: { computed: {
@ -128,57 +134,66 @@ export default {
return this.getCmsContent('ParkingLotQuestion', 'Answers'); return this.getCmsContent('ParkingLotQuestion', 'Answers');
}, },
educatorEndorsement() { educatorEndorsement() {
return useMainStore().order.policy.endorsements?.includes(endorsementOptions.EDUCATOR) ?? false; return (
useMainStore().order.policy.endorsements?.includes(
endorsementOptions.EDUCATOR
) ?? false
);
}, },
parkingGuardEndorsement() { parkingGuardEndorsement() {
return useMainStore().order.policy.endorsements?.includes(endorsementOptions.PARKING_GUARD) ?? false; return (
} useMainStore().order.policy.endorsements?.includes(
endorsementOptions.PARKING_GUARD
) ?? false
);
},
}, },
methods: methods: {
{ async forwardButtonAction() {
async forwardButtonAction() { // TO DO: remove hard coding and update data format once service returns endorsement questions
// TO DO: remove hard coding and update data format once service returns endorsement questions if (this.educatorEndorsement) {
if (this.educatorEndorsement) { this.questionAnswersArray.push({
this.questionAnswersArray.push({ questionNum: 1,
questionNum: 1, endorsementName: endorsementOptions.EDUCATOR,
endorsementName: endorsementOptions.EDUCATOR, questionText: this.schoolPropertyQuestionText,
questionText: this.schoolPropertyQuestionText, selectedAnswer: this.schoolPropertyAnswer,
selectedAnswer: this.schoolPropertyAnswer });
});
}
if (this.parkingGuardEndorsement) {
this.questionAnswersArray.push({
questionNum: 2,
endorsementName: endorsementOptions.PARKING_GUARD,
questionText: this.parkingLotQuestionText,
selectedAnswer: this.parkingLotAnswer
});
}
// save answers to store as order.policy.endorsementQuestionAnswers
useMainStore().saveEndorsementQuestionAnswers(this.questionAnswersArray);
return this.navigateForward();
},
navigateForward() {
if (!this.hasValidCarId) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
this.$route
);
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
}
} }
} if (this.parkingGuardEndorsement) {
this.questionAnswersArray.push({
questionNum: 2,
endorsementName: endorsementOptions.PARKING_GUARD,
questionText: this.parkingLotQuestionText,
selectedAnswer: this.parkingLotAnswer,
});
}
// save answers to store as order.policy.endorsementQuestionAnswers
useMainStore().saveEndorsementQuestionAnswers(
this.questionAnswersArray
);
return this.navigateForward();
},
navigateForward() {
if (!this.hasValidCarId) {
this.$router.navigate(
this.navigationScenarios
.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
this.$route
);
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
}
},
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep .subheader-primary { :deep .subheader-primary {
margin-bottom: map-get($spacers, 2); margin-bottom: map-get($spacers, 2);
} }
@ -211,5 +226,4 @@ export default {
:deep div.question-text.d-flex { :deep div.question-text.d-flex {
margin-top: map-get($spacers, 4); margin-top: map-get($spacers, 4);
} }
</style> </style>

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

@ -4,48 +4,48 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="page-container-grouped-styles"> <div class="container-fluid fade-on-route-transition">
<div class="fade-on-route-transition position-relative"> <div class="row justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="col-md-6 px-0 px-md-2">
<div class="container-fluid pb-2 px-5"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="row mt-4 mb-3">
<div class="col">
<siteSubHeader
id="sub-header"
cmsWidgetName="SiteSubHeaderWidget" />
<addressQuestions
id="address-questions-wrapper"
ref="addressQuestions"
v-model="customerQuestions.addressQuestions"
includeStreetAddress2="true" />
<textboxQuestion
ref="policyHolderFirstName"
v-model="customerQuestions.firstName"
inputId="firstNameField"
cmsWidgetName="PolicyholderFirstNameQuestion"
isRequired
disableAutoFill
:validationRules="rules.firstName" />
<textboxQuestion
ref="policyHolderLastName"
v-model="customerQuestions.lastName"
class="mt-4"
inputId="lastNameField"
cmsWidgetName="PolicyholderLastNameQuestion"
isRequired
disableAutoFill
:validationRules="rules.lastName" />
</div>
</div>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
</div> </div>
</div> </div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
id="sub-header"
cmsWidgetName="SiteSubHeaderWidget" />
<addressQuestions
id="address-questions-wrapper"
ref="addressQuestions"
v-model="customerQuestions.addressQuestions"
includeStreetAddress2="true" />
<textboxQuestion
ref="policyHolderFirstName"
v-model="customerQuestions.firstName"
inputId="firstNameField"
cmsWidgetName="PolicyholderFirstNameQuestion"
isRequired
disableAutoFill
:validationRules="rules.firstName" />
<textboxQuestion
ref="policyHolderLastName"
v-model="customerQuestions.lastName"
class="mt-4"
inputId="lastNameField"
cmsWidgetName="PolicyholderLastNameQuestion"
isRequired
disableAutoFill
:validationRules="rules.lastName" />
</div>
</div>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
</div> </div>
</Form> </Form>
</template> </template>
@ -74,7 +74,7 @@ export default {
addressQuestions, addressQuestions,
siteFooter, siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form Form,
}, },
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -85,8 +85,8 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
} },
]; ];
// use resultMap to populate layout content. // use resultMap to populate layout content.
@ -106,8 +106,8 @@ export default {
vehiclesFound: [], vehiclesFound: [],
rules: { rules: {
firstName: globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED, firstName: globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
} },
}; };
}, },
computed: { computed: {
@ -116,10 +116,9 @@ export default {
}, },
vehiclesCount() { vehiclesCount() {
return this.vehiclesFound.length; return this.vehiclesFound.length;
} },
}, },
methods: methods: {
{
async forwardButtonAction() { async forwardButtonAction() {
this.mainStore.updatePolicyHolderDetails(this.customerQuestions); this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
return this.navigateForward(); return this.navigateForward();
@ -144,19 +143,20 @@ export default {
getPolicyHolderDetailsFromStore() { getPolicyHolderDetailsFromStore() {
return { return {
addressQuestions: addressQuestions: {
{ streetAddress:
streetAddress: this.mainStore.order.customer.address.streetAddress, this.mainStore.order.customer.address.streetAddress,
streetAddress2: this.mainStore.order.customer.address.streetAddress2, streetAddress2:
this.mainStore.order.customer.address.streetAddress2,
city: this.mainStore.order.customer.address.city, city: this.mainStore.order.customer.address.city,
state: this.mainStore.order.customer.address.state, state: this.mainStore.order.customer.address.state,
zipCode: this.mainStore.order.customer.address.zipCode zipCode: this.mainStore.order.customer.address.zipCode,
}, },
firstName: this.mainStore.order.customer.firstName, firstName: this.mainStore.order.customer.firstName,
lastName: this.mainStore.order.customer.lastName lastName: this.mainStore.order.customer.lastName,
}; };
} },
} },
}; };
</script> </script>
@ -164,14 +164,14 @@ export default {
#sub-header p { #sub-header p {
font-size: 16px; font-size: 16px;
line-height: 26px; line-height: 26px;
color: #4D5151; color: #4d5151;
} }
#address-questions-wrapper { #address-questions-wrapper {
margin-top: 24px; margin-top: 24px;
} }
#address-questions-wrapper .alert.heading { #address-questions-wrapper .alert.heading {
line-height: 24px; line-height: 24px;
} }

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

@ -4,14 +4,18 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalid-submit="onInvalidSubmit"> @invalid-submit="onInvalidSubmit">
<div class="page-container-grouped-styles"> <div class="container-fluid fade-on-route-transition">
<div class="fade-on-route-transition sub-container make-tall"> <div class="row justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="col-md-6 px-0 px-md-2">
<siteSubHeader <siteHeader cmsWidgetName="SiteHeaderWidget" />
cmsWidgetName="SiteSubHeaderWidget" </div>
justification="left" </div>
issContainingPage="service-packages" /> <div class="row justify-content-center">
<div class="mx-5"> <div class="col-md-6 col-xl-4">
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
justification="left"
issContainingPage="service-packages" />
<servicePackageQuestion <servicePackageQuestion
ref="servicePackage" ref="servicePackage"
cmsWidgetName="ServicePackage" cmsWidgetName="ServicePackage"
@ -31,22 +35,18 @@
@ForwardClicked="forwardButtonAction" /> @ForwardClicked="forwardButtonAction" />
</div> </div>
</div> </div>
<loadingModal ref="loadingModal" :textSlides="loadingText" />
<contentGroupModal
ref="RainDefenseModal"
cmsWidgetName="RainDefenseModal" />
<contentGroupModal
ref="FrontWiperModal"
cmsWidgetName="FrontWiperModal" />
<contentGroupModal
ref="RearWiperModal"
cmsWidgetName="RearWiperModal" />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
</div> </div>
<loadingModal
ref="loadingModal"
:textSlides="loadingText" />
<contentGroupModal
ref="RainDefenseModal"
cmsWidgetName="RainDefenseModal" />
<contentGroupModal
ref="FrontWiperModal"
cmsWidgetName="FrontWiperModal" />
<contentGroupModal
ref="RearWiperModal"
cmsWidgetName="RearWiperModal" />
<contentGroupModal
ref="RecalModal"
cmsWidgetName="RecalModal" />
</Form> </Form>
</template> </template>
@ -81,7 +81,7 @@ export default {
Form, Form,
servicePackageQuestion, servicePackageQuestion,
loadingModal, loadingModal,
contentGroupModal contentGroupModal,
}, },
mixins: [baseFormMixin], mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -94,20 +94,20 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
}, },
{ {
resultKey: 'wipers', resultKey: 'wipers',
promise: wipersPromise promise: wipersPromise,
}, },
{ {
resultKey: 'rainDefense', resultKey: 'rainDefense',
promise: rainDefensePromise promise: rainDefensePromise,
}, },
{ {
resultKey: 'supportingItems', resultKey: 'supportingItems',
promise: supportingItemsPromise promise: supportingItemsPromise,
} },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -118,11 +118,12 @@ export default {
resultMap.rainDefense, resultMap.rainDefense,
...resultMap.supportingItems, ...resultMap.supportingItems,
...resultMap.wipers, ...resultMap.wipers,
...clonedGlassParts ...clonedGlassParts,
]; ];
let hasBailedOut = false; let hasBailedOut = false;
const pricingResults = await store.getPriceOrderItems(availableLineItems) const pricingResults = await store
.getPriceOrderItems(availableLineItems)
.catch((err) => { .catch((err) => {
useMainStore().setBailout( useMainStore().setBailout(
bailoutMessage.pricingResponseError( bailoutMessage.pricingResponseError(
@ -155,17 +156,17 @@ export default {
'Looking for dates', 'Looking for dates',
'Searching for times', 'Searching for times',
'Nearly there', 'Nearly there',
'Finishing up' 'Finishing up',
], ],
rules: { rules: {
optionRequired: globalRules.OPTION_REQUIRED optionRequired: globalRules.OPTION_REQUIRED,
} },
}; };
}, },
computed: { computed: {
PriceDisclaimerText() { PriceDisclaimerText() {
return this.getCmsContent('PriceDisclaimerWidget', 'Text'); return this.getCmsContent('PriceDisclaimerWidget', 'Text');
} },
}, },
methods: { methods: {
openModalAction(modalName) { openModalAction(modalName) {
@ -173,11 +174,11 @@ export default {
}, },
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
return ( return (
store.order.serviceLocation.zipCode store.order.serviceLocation.zipCode &&
&& store.order.serviceLocation.zipCodeCtu store.order.serviceLocation.zipCodeCtu &&
&& (store.order.damage.isRepair (store.order.damage.isRepair ||
|| (store.order.lineItems?.glassParts != null (store.order.lineItems?.glassParts != null &&
&& store.order.lineItems.glassParts.length > 0)) store.order.lineItems.glassParts.length > 0))
); );
}, },
vapsItemsSelectedAction(vapsItemsSelected) { vapsItemsSelectedAction(vapsItemsSelected) {
@ -187,10 +188,12 @@ export default {
const parts = { const parts = {
glassParts: this.pricedGlassParts, glassParts: this.pricedGlassParts,
supportingItems: this.supportingItems, supportingItems: this.supportingItems,
vaps: this.selectedVaps vaps: this.selectedVaps,
}; };
if (!allGlassPartsAndItemsHavePrices(parts)) { if (!allGlassPartsAndItemsHavePrices(parts)) {
window.console.error('One or more items have no price assigned!'); window.console.error(
'One or more items have no price assigned!'
);
} }
if (this.pricedGlassParts.length > 0) { if (this.pricedGlassParts.length > 0) {
store.updateGlassParts(this.pricedGlassParts); store.updateGlassParts(this.pricedGlassParts);
@ -198,15 +201,18 @@ export default {
store.updateSupportingItems(this.supportingItems); store.updateSupportingItems(this.supportingItems);
store.updateVaps(this.selectedVaps); store.updateVaps(this.selectedVaps);
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route); this.$router.navigate(
} this.navigationScenarios.CLICKED_FORWARD,
} this.$route
);
},
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.subheader-secondary { .subheader-secondary {
margin-top: .5rem; margin-top: 0.5rem;
padding: 0px; padding: 0px;
} }
@ -214,7 +220,7 @@ export default {
margin: 1.3rem 0 1.5rem 0; margin: 1.3rem 0 1.5rem 0;
a { a {
color: #4D5151; color: #4d5151;
font-weight: 400; font-weight: 400;
} }
} }

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

@ -4,12 +4,16 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="page-container-grouped-styles"> <div class="container-fluid fade-on-route-transition">
<div class="fade-on-route-transition position-relative"> <div class="row justify-content-center">
<siteHeader <div class="col-md-6 px-0 px-md-2">
ref="siteHeader" <siteHeader
cmsWidgetName="SiteHeaderWidget" /> ref="siteHeader"
<div class="container-fluid px-5 pb-2 confirmation"> cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
ref="vehicleBanner" ref="vehicleBanner"
class="mb-4" class="mb-4"
@ -17,7 +21,9 @@
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />
<div class="text-center text-color--black pb-2 fs-5"> <div class="text-center text-color--black pb-2 fs-5">
<img :src="tpaConfirmationImage" /> <img :src="tpaConfirmationImage" />
<span class="ms-2" v-html="tpaConfirmationHeaderText"></span> <span
class="ms-2"
v-html="tpaConfirmationHeaderText"></span>
</div> </div>
<div class="text-center text-color--black mb-3 fw-bold"> <div class="text-center text-color--black mb-3 fw-bold">
<span v-html="tpaConfirmationSubheaderText"></span> <span v-html="tpaConfirmationSubheaderText"></span>
@ -36,8 +42,7 @@
:customText="contactCarrierText" :customText="contactCarrierText"
class="contact-carrier-text small" class="contact-carrier-text small"
@click="setBailoutInfo()" /> @click="setBailoutInfo()" />
<div <div ref="confirmationOrderDetailsSection">
ref="confirmationOrderDetailsSection">
<textBlock <textBlock
ref="tpaConfirmationOrderDetailsTitle" ref="tpaConfirmationOrderDetailsTitle"
:customText="orderDetailsTitle" :customText="orderDetailsTitle"
@ -75,12 +80,19 @@ import textBlock from '@/digital-components/text-block/text-block.vue';
import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue'; import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
// Supporting files // Supporting files
import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper'; import {
fetchCmsContentForPage,
processIfStatements,
} from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper'; import settleAllPromises from '@/helpers/layout-helper';
import { Form } from 'vee-validate'; import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store'; import { useMainStore } from '@/store';
import { toTitleCase, toDisplayPhoneNumber, formatAmountInDollars } from '@/helpers/text-helper.js'; import {
toTitleCase,
toDisplayPhoneNumber,
formatAmountInDollars,
} from '@/helpers/text-helper.js';
import bailoutMessage from '@/constants/bailoutMessage'; import bailoutMessage from '@/constants/bailoutMessage';
const VERIFYING_COVERAGE = 'Verifying coverage'; const VERIFYING_COVERAGE = 'Verifying coverage';
@ -94,7 +106,7 @@ export default {
textBlock, textBlock,
deductibleBox, deductibleBox,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form Form,
}, },
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -105,12 +117,12 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise promise: cmsContentPromise,
}, },
{ {
resultKey: 'accountInfo', resultKey: 'accountInfo',
promise: accountInfoPromise promise: accountInfoPromise,
} },
]; ];
// use resultMap to populate layout content. // use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -130,40 +142,67 @@ export default {
return this.getCmsContent('TPAConfirmationContent', 'Image'); return this.getCmsContent('TPAConfirmationContent', 'Image');
}, },
tpaConfirmationSubheaderText() { tpaConfirmationSubheaderText() {
return this.getCmsContent('TPAConfirmationContent', 'SubheaderText') return this.getCmsContent(
?.replaceAll('{custom:glassShop}', this.preferredShopName); 'TPAConfirmationContent',
'SubheaderText'
)?.replaceAll('{custom:glassShop}', this.preferredShopName);
}, },
tpaConfirmationBodyOne() { tpaConfirmationBodyOne() {
return this.getCmsContent('TPAConfirmationContent', 'BodyText') return this.getCmsContent('TPAConfirmationContent', 'BodyText')
?.replaceAll('{custom:phoneNumber}', this.preferredShopPhoneNumber) ?.replaceAll(
'{custom:phoneNumber}',
this.preferredShopPhoneNumber
)
?.replaceAll('{custom:glassShop}', this.preferredShopName); ?.replaceAll('{custom:glassShop}', this.preferredShopName);
}, },
tpaConfirmationBodyTwo() { tpaConfirmationBodyTwo() {
return this.getCmsContent('TPAConfirmationContent', 'BodyText2'); return this.getCmsContent('TPAConfirmationContent', 'BodyText2');
}, },
contactCarrierText() { contactCarrierText() {
const contactCarrierText = this.getCmsContent('ContactCarrierContent', 'Text') const contactCarrierText = this.getCmsContent(
?.replaceAll('{custom:carrierPhoneNumber}', this.carrierPhoneNumber); 'ContactCarrierContent',
return this.processIfStatements(contactCarrierText, 'custom', this.getCustomValueFromString); 'Text'
)?.replaceAll(
'{custom:carrierPhoneNumber}',
this.carrierPhoneNumber
);
return this.processIfStatements(
contactCarrierText,
'custom',
this.getCustomValueFromString
);
}, },
orderDetailsTitle() { orderDetailsTitle() {
return this.getCmsContent('OrderDetailsContent', 'HeaderText'); return this.getCmsContent('OrderDetailsContent', 'HeaderText');
}, },
orderDetailsBody() { orderDetailsBody() {
const orderDetailsBodyText = this.getCmsContent('OrderDetailsContent', 'BodyText'); const orderDetailsBodyText = this.getCmsContent(
return this.processIfStatements(orderDetailsBodyText, 'custom', this.getCustomValueFromString); 'OrderDetailsContent',
'BodyText'
);
return this.processIfStatements(
orderDetailsBodyText,
'custom',
this.getCustomValueFromString
);
}, },
deductibleBoxValue() { deductibleBoxValue() {
return this.isVerified ? this.formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE; return this.isVerified
? this.formatAmountInDollars(this.currentDeductible)
: VERIFYING_COVERAGE;
}, },
currentDeductible() { currentDeductible() {
return useMainStore().order.currentDeductible; return useMainStore().order.currentDeductible;
}, },
preferredShopName() { preferredShopName() {
return toTitleCase(useMainStore().order.serviceLocation.provider.companyName); return toTitleCase(
useMainStore().order.serviceLocation.provider.companyName
);
}, },
preferredShopPhoneNumber() { preferredShopPhoneNumber() {
return this.toDisplayPhoneNumber(useMainStore().order.serviceLocation.provider.phoneNumber); return this.toDisplayPhoneNumber(
useMainStore().order.serviceLocation.provider.phoneNumber
);
}, },
isVerified() { isVerified() {
return useMainStore().order.payment.insuranceCoverage.isVerified; return useMainStore().order.payment.insuranceCoverage.isVerified;
@ -175,44 +214,46 @@ export default {
return this.mainStore.issConfig.successReturnURL; return this.mainStore.issConfig.successReturnURL;
}, },
carrierPhoneNumber() { carrierPhoneNumber() {
return this.toDisplayPhoneNumber(useMainStore().order.carrierPhoneNumber); return this.toDisplayPhoneNumber(
} useMainStore().order.carrierPhoneNumber
);
},
}, },
mounted() { mounted() {
if (this.carrierUrl) { if (this.carrierUrl) {
this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`); this.$refs.siteFooter.updateButtonText(
`Go back to ${this.carrierName}`
);
} }
}, },
methods: methods: {
{ async forwardButtonAction() {
async forwardButtonAction() { this.$router.navigateToExternalUrl(this.carrierUrl);
this.$router.navigateToExternalUrl(this.carrierUrl); },
}, getCustomValueFromString(str) {
getCustomValueFromString(str) { switch (str) {
switch (str) { case 'deductibleAboveZero':
case 'deductibleAboveZero': return this.isVerified && this.currentDeductible !== 0;
return this.isVerified && this.currentDeductible !== 0; case 'zeroDeductible':
case 'zeroDeductible': return this.isVerified && this.currentDeductible === 0;
return this.isVerified && this.currentDeductible === 0; case 'verifyingCoverage':
case 'verifyingCoverage': return !this.isVerified;
return !this.isVerified; case 'coverageVerified':
case 'coverageVerified': return this.isVerified;
return this.isVerified; default:
default: return null;
return null; }
} },
}, setBailoutInfo() {
setBailoutInfo() { this.mainStore.setBailout(bailoutMessage.RequestCallback);
this.mainStore.setBailout(bailoutMessage.RequestCallback); },
}, toDisplayPhoneNumber,
toDisplayPhoneNumber, formatAmountInDollars,
formatAmountInDollars, processIfStatements,
processIfStatements },
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.text-color--black { .text-color--black {
color: $black; color: $black;
} }
@ -233,5 +274,4 @@ export default {
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
} }
} }
</style> </style>

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

@ -5,12 +5,16 @@
class="tpa-submit" class="tpa-submit"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="page-container-grouped-styles"> <div class="container-fluid fade-on-route-transition">
<div class="fade-on-route-transition position-relative"> <div class="row justify-content-center">
<siteHeader <div class="col-md-6 px-0 px-md-2">
ref="siteHeader" <siteHeader
:cmsWidgetName="widget.siteHeader" /> ref="siteHeader"
<div class="px-5"> :cmsWidgetName="widget.siteHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
ref="vehicleBanner" ref="vehicleBanner"
:cmsWidgetName="widget.vehicleBanner" :cmsWidgetName="widget.vehicleBanner"