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

Fixed merge conflicts, renamed 'zip' to 'zipCode' where applicable for consistency

Browse source
This commit is contained in:
Leah Schumann 2022-05-06 10:19:44 -04:00
commit 379faf1a4c
22 changed files with 1110 additions and 913 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1257
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
src/App.vue
View file

@ -1,5 +1,9 @@
<template> <template>
<router-view></router-view> <router-view v-slot="{ Component }">
<transition :duration="{ enter: 800, leave: 300 }" name="route-fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</template> </template>
<style lang="scss"> <style lang="scss">

2
src/common-components/button-question/button-question.vue
View file

@ -162,7 +162,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.button-question-overflow { .button-question-overflow {
height: calc(100vh - 266px); height: calc(100vh - 274px);
.overflow-scroll { .overflow-scroll {
// Height will be determined by overall height of content above list // Height will be determined by overall height of content above list

2
src/common-components/textbox-question/textbox-question.vue
View file

@ -57,7 +57,7 @@ export default {
const fieldOptions = { const fieldOptions = {
type: "text", type: "text",
value: props.modelValue, value: props.modelValue,
initialValue: props.modelValue, initialValue: (props.modelValue && props.modelValue.length > 0) ? props.modelValue : "",
}; };
const { const {

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

@ -4,50 +4,51 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false /> <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
<customerQuestions ref="customerQuestions" v-model="customerQuestions" /> <div class="fade-on-route-transition sub-container make-tall">
<alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert" <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
class="my-3" <alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert"
cmsWidgetName="AlertVinNotFoundWidget" class="my-3"
alertClass="alert-danger" cmsWidgetName="AlertVinNotFoundWidget"
v-bind:isDismissible="false" alertClass="alert-danger"
/> v-bind:isDismissible="false"
<alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert" />
class="my-3" <alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert"
:manualHeadline="AlertMatchedDifferentVehicleHeader" class="my-3"
:manualCopy="AlertMatchedDifferentVehicleBody" :manualHeadline="AlertMatchedDifferentVehicleHeader"
alertClass="alert-warning" :manualCopy="AlertMatchedDifferentVehicleBody"
v-bind:isDismissible="false" alertClass="alert-warning"
/> v-bind:isDismissible="false"
<alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert" />
class="my-3" <alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert"
alertClass="alert-danger" class="my-3"
:manualHeadline="AlertNonServiceableZipHeader" alertClass="alert-danger"
:manualCopy="AlertNonServiceableZipBody" :manualHeadline="AlertNonServiceableZipHeader"
v-bind:isDismissible="false" :manualCopy="AlertNonServiceableZipBody"
/> v-bind:isDismissible="false"
<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert" />
class="my-3" <alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert"
cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget" class="my-3"
alertClass="alert-danger" cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
v-bind:isDismissible="false" alertClass="alert-danger"
/> v-bind:isDismissible="false"
<transition name="fade" mode="out-in"> />
<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite"> <transition name="fade" mode="out-in">
<div class="row my-4"> <div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
<div class="col"> <div class="row my-4">
<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZip" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" /> <div class="col">
<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZipCode" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
</div>
</div> </div>
</div> </div>
</div> </transition>
</transition> <funnel-footer
<funnel-footer cmsWidgetName="FunnelFooterWidget"
cmsWidgetName="FunnelFooterWidget" ref="funnelFooter"
ref="funnelFooter" :isDisabled="!meta.valid"
:isDisabled="!meta.valid" @ForwardClicked="forwardButtonAction"
@ForwardClicked="forwardButtonAction" :isForwardActionDisabled="!meta.valid"
:isForwardActionDisabled="!meta.valid" />
/> </div>
</div> </div>
</Form> </Form>
</template> </template>
@ -110,13 +111,13 @@ export default {
streetAddress: this.getRegistrationAddressFromStore(), streetAddress: this.getRegistrationAddressFromStore(),
city: this.getRegistrationCityFromStore(), city: this.getRegistrationCityFromStore(),
state: this.getRegistrationStateFromStore(), state: this.getRegistrationStateFromStore(),
zip: this.getRegistrationZipFromStore(), zipCode: this.getRegistrationZipFromStore(),
}, },
firstName: this.getRegistrationFirstNameFromStore(), firstName: this.getRegistrationFirstNameFromStore(),
lastName: this.getRegistrationLastNameFromStore(), lastName: this.getRegistrationLastNameFromStore(),
emailAddress: this.getEmailFromStore(), emailAddress: this.getEmailFromStore(),
}, },
serviceZip: this.getServiceZipFromStore(), serviceZipCode: this.getServiceZipFromStore(),
displayNonServiceableZipAlert: false, displayNonServiceableZipAlert: false,
displayVinNotFoundAlert: false, displayVinNotFoundAlert: false,
displayMatchedDifferentVehicleAlert: false, displayMatchedDifferentVehicleAlert: false,
@ -174,7 +175,7 @@ export default {
const vinLookup = await this.lookupVin( const vinLookup = await this.lookupVin(
this.customerQuestions.lastName, this.customerQuestions.lastName,
this.customerQuestions.addressQuestions.streetAddress, this.customerQuestions.addressQuestions.streetAddress,
this.customerQuestions.addressQuestions.zip, this.customerQuestions.addressQuestions.zipCode,
this.customerQuestions.addressQuestions.state this.customerQuestions.addressQuestions.state
); );
@ -186,7 +187,7 @@ export default {
} }
// Validate if the original or service zip provided is serviceable // Validate if the original or service zip provided is serviceable
const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.customerQuestions.addressQuestions.zip); const zipValidation = this.serviceZipCode ? await this.validateZip(this.serviceZipCode) : await this.validateZip(this.customerQuestions.addressQuestions.zipCode);
this.isZipServicable = zipValidation.data.isServiceable; this.isZipServicable = zipValidation.data.isServiceable;
if (!this.isZipServicable) { if (!this.isZipServicable) {
this.displayNonServiceableZipAlert = true; this.displayNonServiceableZipAlert = true;
@ -304,18 +305,18 @@ export default {
store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, this.customerQuestions.addressQuestions.streetAddress); store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, this.customerQuestions.addressQuestions.streetAddress);
store.commit(storeMutations.UPDATE_REGISTRATION_CITY, this.customerQuestions.addressQuestions.city); store.commit(storeMutations.UPDATE_REGISTRATION_CITY, this.customerQuestions.addressQuestions.city);
store.commit(storeMutations.UPDATE_REGISTRATION_STATE, this.customerQuestions.addressQuestions.state); store.commit(storeMutations.UPDATE_REGISTRATION_STATE, this.customerQuestions.addressQuestions.state);
store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zip); store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zipCode);
store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName); store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName);
store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName); store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName);
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZip); store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode);
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.emailAddress); store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.emailAddress);
}, },
}, },
computed: { computed: {
AlertNonServiceableZipHeader(){ AlertNonServiceableZipHeader(){
const zip = this.serviceZip ? this.serviceZip : this.customerQuestions.addressQuestions.zip; const zipCode = this.serviceZipCode ? this.serviceZipCode : this.customerQuestions.addressQuestions.zipCode;
const text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zip); const text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zipCode);
return text; return text;
}, },
AlertNonServiceableZipBody(){ AlertNonServiceableZipBody(){
@ -340,24 +341,24 @@ export default {
watch: { watch: {
customerQuestions: { customerQuestions: {
handler(newValue) { handler(newValue) {
// if they modify one of the lookup fields (address, city, state, zip, or lastName), then modify the button text back to “Get my personalized quote” // 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”
this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")); this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
this.showServiceZipField = false; this.showServiceZipField = false;
this.resetWarningsAndErrors(); this.resetWarningsAndErrors();
}, },
deep: true deep: true
}, },
serviceZip: { serviceZipCode: {
handler(newValue) { handler(newValue) {
// if they modify the service zip, then hide the error message” // if they modify the service zip code, then hide the error message”
this.displayNonServiceableZipAlert = false; this.displayNonServiceableZipAlert = false;
}, },
}, },
showServiceZipField: { showServiceZipField: {
handler(newValue) { handler(newValue) {
// if the Service Zip field is ever hidden, clear out it's value // if the Service Zip Code field is ever hidden, clear out it's value
if (!newValue) { if (!newValue) {
this.serviceZip = ""; this.serviceZipCode = "";
} }
}, },
} }

14
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -17,7 +17,7 @@
<dropdownQuestion cmsWidgetName="StateQuestionWidget" v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" /> <dropdownQuestion cmsWidgetName="StateQuestionWidget" v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" />
</div> </div>
<div class="col"> <div class="col">
<textboxQuestion cmsWidgetName="ZipQuestionWidget" v-model="addressModel.zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-required|zip-format"/> <textboxQuestion cmsWidgetName="ZipQuestionWidget" v-model="addressModel.zipCode" ref="zipCode" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-code-required|zip-code-format"/>
</div> </div>
</div> </div>
</transition> </transition>
@ -48,8 +48,8 @@ import { errorMessages } from "@/constants/error-messages";
defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED)); defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
defineRule("city-required", required(errorMessages.CITY_REQUIRED)); defineRule("city-required", required(errorMessages.CITY_REQUIRED));
defineRule("state-required", required(errorMessages.STATE_REQUIRED)); defineRule("state-required", required(errorMessages.STATE_REQUIRED));
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED)); defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT)); defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
export default ({ export default ({
name: "address-questions", name: "address-questions",
@ -61,7 +61,7 @@ export default ({
streetAddress: "", streetAddress: "",
city: "", city: "",
state: "", state: "",
zip: "", zipCode: "",
}), }),
}, },
validationRules: String, validationRules: String,
@ -150,7 +150,7 @@ export default ({
if (this.addressModel.streetAddress !== null & if (this.addressModel.streetAddress !== null &
this.addressModel.city !== null & this.addressModel.city !== null &
this.addressModel.state !== null & this.addressModel.state !== null &
this.addressModel.zip !== null) { this.addressModel.zipCode !== null) {
this.showAddressFields = true; this.showAddressFields = true;
} }
@ -196,7 +196,7 @@ export default ({
else { else {
self.addressModel.city = ""; self.addressModel.city = "";
self.addressModel.state = ""; self.addressModel.state = "";
self.addressModel.zip = ""; self.addressModel.zipCode = "";
self.showAddressFields = true; self.showAddressFields = true;
self.displayVerificationWarning = false; self.displayVerificationWarning = false;
self.displayNoMatchWarning = true; self.displayNoMatchWarning = true;
@ -234,7 +234,7 @@ export default ({
break; break;
} }
case "postal_code": { case "postal_code": {
self.addressModel.zip = component.long_name; self.addressModel.zipCode = component.long_name;
break; break;
} }

2
src/layouts/address-lookup/customer-questions/customer-questions.vue
View file

@ -43,7 +43,7 @@ export default ({
streetAddress: "", streetAddress: "",
city: "", city: "",
state: "", state: "",
zip: "", zipCode: "",
}, },
firstName: "", firstName: "",
lastName: "", lastName: "",

38
src/layouts/estimate/estimate.vue
View file

@ -9,25 +9,25 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<buttonQuestion <div class="fade-on-route-transition sub-container make-tall">
cmsWidgetName="VinLookupMethod" <buttonQuestion
class="button-question-overflow" cmsWidgetName="VinLookupMethod"
:questionText="questionText" :questionText="questionText"
:answers="answersFromCms" :answers="answersFromCms"
groupName="vinLookupMethodOption" groupName="vinLookupMethodOption"
buttonType="listButton" buttonType="listButton"
v-model="selectedValues" v-model="selectedValues"
isRequired isRequired
validationRules="option-required" validationRules="option-required"
/> />
<funnel-footer
<funnel-footer cmsWidgetName="FunnelFooterWidget"
cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid"
:isForwardActionDisabled="!meta.valid" @isDisabled="!meta.valid"
@isDisabled="!meta.valid" @back-clicked="backButtonAction"
@back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction"
@ForwardClicked="forwardButtonAction" />
/> </div>
</div> </div>
</Form> </Form>
</template> </template>

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

@ -1,35 +1,93 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"> @submit="onSubmit"
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> @invalid-submit="onInvalidSubmit"
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> ref="theForm"
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> v-slot="{ meta }"
>
<div
class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"
>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" /> <textboxQuestion
</div> cmsWidgetName="LicensePlateNumber"
v-model="licensePlate"
isRequired
inputId="license_plate"
validationRules="license-plate-required"
/>
</div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" /> <textboxQuestion
</div> cmsWidgetName="RegistrationZip"
v-model="registrationZip"
inputId="zip"
mask="#####"
validationRules="zip-required"
/>
</div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" /> <textboxQuestion
</div> cmsWidgetName="EmailAddress"
v-model="email"
inputId="email"
validationRules="email-address-required|email-address-format"
/>
</div>
</div> </div>
<alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" /> <alert
class="my-3"
:manualHeadline="NoServiceZipHeader"
:manualCopy="NoServiceZipBody"
v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent"
alertClass="alert-danger"
/>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" /> <textboxQuestion
</div> v-if="!isRegistrationZipServicable"
cmsWidgetName="ServiceZip"
v-model="serviceZip"
inputId="serviceZip"
validationRules="zip-required"
/>
</div>
</div> </div>
<alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" /> <alert
<alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" /> class="my-3"
<funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" /> cmsWidgetName="NoMatchAlertWidget"
v-if="!isVinValid"
alertClass="alert-danger"
/>
<alert
class="my-3"
:manualHeadline="MatchedDifferentVehicleAlertHeader"
:manualCopy="MatchedDifferentVehicleAlertBody"
v-if="isCarIdDifferent"
alertClass="alert-warning"
/>
<funnelFooter
ref="funnelFooter"
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div>
</div> </div>
</Form> </Form>
</template> </template>
<script> <script>
@ -94,44 +152,43 @@ defineRule(
); );
export default { export default {
name: "license-plate-lookup", name: "license-plate-lookup",
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [{ const promiseResultMap = [
resultKey: "cmsContent", {
promise: cmsContentPromise, resultKey: "cmsContent",
}, ]; promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
}); });
}, },
props: { data() {
validationRules: String, return {
}, isRegistrationZipServicable: true,
data() { isVinValid: true,
return { isCarIdDifferent: false,
isRegistrationZipServicable: true, licensePlate: this.getLicensePlateFromStore(),
isVinValid: true, registrationZip: this.getRegistrationZipFromStore(),
isCarIdDifferent: false, email: this.getEmailFromStore(),
licensePlate: this.getLicensePlateFromStore(), serviceZip: this.getServiceZipFromStore(),
registrationZip: this.getRegistrationZipFromStore(), previouslyEnteredCarId: "",
email: this.getEmailFromStore(), customAlertData: {},
serviceZip: this.getServiceZipFromStore(), isSelectedGlassAvailableForVehicle: true,
previouslyEnteredCarId: "", };
customAlertData: {}, },
isSelectedGlassAvailableForVehicle: true, mounted() {
}; this.attachCustomEvents();
}, },
mounted() {
this.attachCustomEvents();
},
computed: { computed: {
MatchedDifferentVehicleAlertHeader() { MatchedDifferentVehicleAlertHeader() {
let text = this.getCmsContent( let text = this.getCmsContent(
@ -343,5 +400,5 @@ export default {
alert, alert,
funnelFooter, funnelFooter,
}, },
}; }
</script> </script>

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

@ -3,10 +3,12 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<h1>Part Questions Page Placeholder</h1> <div class="fade-on-route-transition sub-container make-tall">
<funnel-footer <h1>Part Questions Page Placeholder</h1>
cmsWidgetName="FunnelFooterWidget" @back-clicked="backButtonAction" <funnel-footer
/> cmsWidgetName="FunnelFooterWidget" @back-clicked="backButtonAction"
/>
</div>
</div> </div>
</template> </template>

104
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -9,57 +9,59 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<alert <div class="fade-on-route-transition sub-container make-tall">
ref="vehicleChangeAlert" <alert
class="mt-5 mb-0" ref="vehicleChangeAlert"
cmsWidgetName="VehicleChangeAlert" class="mt-5 mb-0"
v-show="shouldDisplayVehicleChangeAlert" cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning" v-show="shouldDisplayVehicleChangeAlert"
:isDismissible="false" alertClass="alert-warning"
/> :isDismissible="false"
<damageLocationQuestion />
ref="damageLocation" <damageLocationQuestion
cmsWidgetName="DamageLocationQuestion" ref="damageLocation"
v-model="selectedDamageLocations" cmsWidgetName="DamageLocationQuestion"
groupName="DamageLocationQuestion" v-model="selectedDamageLocations"
/> groupName="DamageLocationQuestion"
<windshieldOptions />
ref="windshieldOptions" <windshieldOptions
v-model="selectedWindshieldOptions" ref="windshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict" v-model="selectedWindshieldOptions"
:hasSplitSingleConflict="hasSplitSingleConflict" :hasRepairReplaceConflict="hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations" :hasSplitSingleConflict="hasSplitSingleConflict"
/> :selectedDamageLocations="selectedDamageLocations"
<alert />
class="my-3" <alert
cmsWidgetName="HasReplacementConflict" class="my-3"
v-show="hasRepairReplaceConflict" cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger" v-show="hasRepairReplaceConflict"
:isDismissible="false" alertClass="alert-danger"
/> :isDismissible="false"
<sideDoorOptions />
ref="sideDoorOptions" <sideDoorOptions
cmsWidgetName="SideDoorSideQuestion" ref="sideDoorOptions"
groupName="SideDoorSideQuestion" cmsWidgetName="SideDoorSideQuestion"
v-model="sideDoorOptionsData" groupName="SideDoorSideQuestion"
v-show="!hasRepairReplaceConflict" v-model="sideDoorOptionsData"
:selectedDamageLocations="selectedDamageLocations" v-show="!hasRepairReplaceConflict"
/> :selectedDamageLocations="selectedDamageLocations"
<replaceOptionsQuestion />
ref="backGlassOptions" <replaceOptionsQuestion
cmsWidgetName="RearReplaceOptionsQuestion" ref="backGlassOptions"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict" cmsWidgetName="RearReplaceOptionsQuestion"
v-model="selectedRearReplaceOptions" :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
groupName="BackGlassReplaceOptionsQuestion" v-model="selectedRearReplaceOptions"
validationRules="replace-options-required" groupName="BackGlassReplaceOptionsQuestion"
/> validationRules="replace-options-required"
<funnel-footer />
cmsWidgetName="FunnelFooterWidget" <funnel-footer
:isForwardActionDisabled="!meta.valid" cmsWidgetName="FunnelFooterWidget"
:isBackButtonHidden=shouldHideBackButton :isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction" :isBackButtonHidden=shouldHideBackButton
@ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"
/> @ForwardClicked="forwardButtonAction"
/>
</div>
</div> </div>
</Form> </Form>
</template> </template>

6
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0 position-relative make-tall"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
@ -10,7 +10,9 @@
backButtonAccessibleText="Change Vehicle Year" backButtonAccessibleText="Change Vehicle Year"
@click-event="backButtonAction" @click-event="backButtonAction"
/> />
<makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" /> <div class="fade-on-route-transition">
<makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
</div>
</div> </div>
</div> </div>
</div> </div>

6
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0 position-relative"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
@ -10,7 +10,9 @@
backButtonAccessibleText="Change Vehicle Make" backButtonAccessibleText="Change Vehicle Make"
@click-event="backButtonAction" @click-event="backButtonAction"
/> />
<modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" /> <div class="fade-on-route-transition">
<modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
</div>
</div> </div>
</div> </div>
</div> </div>

48
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -3,34 +3,36 @@
<funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner ref="vehicleBanner" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner ref="vehicleBanner" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
<div class="container-fluid prevent-squish my-5"> <div class="fade-on-route-transition sub-container make-tall">
<div class="row"> <div class="container-fluid prevent-squish my-5">
<div class="col"> <div class="row">
<alert <div class="col">
class="rounded border-0 shadow-sm" <alert
alertClass="alert-warning" class="rounded border-0 shadow-sm"
cmsWidgetName="AlertWidget" alertClass="alert-warning"
:isDismissible="false" cmsWidgetName="AlertWidget"
/> :isDismissible="false"
/>
</div>
</div> </div>
</div> </div>
</div>
<div v-for="(item, i) in PartsForQuestions" :key="i"> <div v-for="(item, i) in PartsForQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) --> <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<div class="container-fluid"> <div class="container-fluid">
<hr v-if="i > 0" /> <hr v-if="i > 0" />
</div>
<glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="glassParts[item.glassLocation + '-' + item.glassName]"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
/>
</div> </div>
<funnelFooter cmsWidgetName="FunnelFooterWidget" ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
<glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="glassParts[item.glassLocation + '-' + item.glassName]"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
/>
</div> </div>
<funnelFooter cmsWidgetName="FunnelFooterWidget" ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
</div> </div>
</template> </template>

6
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0 position-relative"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
@ -10,7 +10,9 @@
backButtonAccessibleText="Change Vehicle Model" backButtonAccessibleText="Change Vehicle Model"
@click-event="backButtonAction" @click-event="backButtonAction"
/> />
<styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" /> <div class="fade-on-route-transition">
<styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" />
</div>
</div> </div>
</div> </div>
</div> </div>

11
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -1,11 +1,18 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0 position-relative"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<yearQuestion v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" /> <div class="fade-on-route-transition">
<yearQuestion
class="fade-on-route-transition"
v-model="selectedYear"
ref="yearQuestion"
cmsWidgetName="VehicleYearQuestion"
/>
</div>
</div> </div>
</div> </div>
</div> </div>

170
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -14,64 +14,110 @@
:displayGenericVehicleImage="false" :displayGenericVehicleImage="false"
/> />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="row my-2"> <div class="fade-on-route-transition sub-container make-tall">
<div class="col"> <div class="row my-2">
<textboxQuestion <div class="col">
cmsWidgetName="VinNumber" <textboxQuestion
v-model="vin" cmsWidgetName="VinNumber"
inputId="vin" v-model="vin"
isRequired inputId="vin"
disableAutoFill isRequired
validationRules="vin-required|vin-format" disableAutoFill
:isDisabled="isVinFieldReadOnly" validationRules="vin-required|vin-format"
/> :isDisabled="isVinFieldReadOnly"
/>
</div>
</div> </div>
</div> <div class="row my-2">
<div class="row my-2"> <div class="col">
<div class="col"> <vinInformation />
<vinInformation /> </div>
</div> </div>
</div> <div class="row my-2">
<div class="row my-2"> <div class="col">
<div class="col"> <textboxQuestion
<textboxQuestion cmsWidgetName="ServiceZIP"
cmsWidgetName="ServiceZIP" v-model="zip"
v-model="zip" inputId="zip"
inputId="zip" mask="#####"
mask="#####" isRequired
isRequired disableAutoFill
disableAutoFill validationRules="zip-required"
validationRules="zip-required" />
/> </div>
</div> </div>
</div> <div class="row my-2">
<div class="row my-2"> <div class="col">
<div class="col"> <textboxQuestion
<textboxQuestion cmsWidgetName="EmailAddress"
cmsWidgetName="EmailAddress" v-model="email"
v-model="email" inputId="email"
inputId="email" isRequired
isRequired disableAutoFill
disableAutoFill validationRules="email-address-required|email-address-format"
validationRules="email-address-required|email-address-format" />
/> </div>
</div> </div>
<alert
class="my-3"
:manualHeadline="MatchedDifferentVehicleAlertHeader"
:manualCopy="MatchedDifferentVehicleAlertBody"
v-model="customAlertData"
v-if="matchedDifferentVehicle"
alertClass="alert-danger"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="noMatchAlert"
alertClass="alert-warning"
cmsWidgetName="NoMatchAlertWidget"
/>
<alert
class="my-3"
:manualHeadline="NoServiceZipHeader"
:manualCopy="NoServiceZipBody"
v-model="customAlertData"
v-if="noServiceZip"
alertClass="alert-warning"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="foundWindshieldAlert"
alertClass="alert-warning"
cmsWidgetName="FoundWindshieldAlert"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="vinNotFound"
alertClass="alert-warning"
cmsWidgetName="VinNotFound"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="perfectMatchNewVinAlert"
alertClass="alert-warning"
cmsWidgetName="PerfectMatchNewVinAlert"
/>
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div> </div>
<alert <alert
class="my-3" class="my-3"
:manualHeadline="MatchedDifferentVehicleAlertHeader" :manualHeadline="MatchedDifferentVehicleAlertHeader"
:manualCopy="MatchedDifferentVehicleAlertBody" :manualCopy="MatchedDifferentVehicleAlertBody"
v-model="customAlertData" v-model="customAlertData"
v-if="matchedDifferentVehicle" v-if="isCarIdDifferent"
alertClass="alert-danger" alertClass="alert-danger"
/> />
<alert
class="my-3"
v-model="customAlertData"
v-if="noMatchAlert"
alertClass="alert-warning"
cmsWidgetName="NoMatchAlertWidget"
/>
<alert <alert
class="my-3" class="my-3"
:manualHeadline="NoServiceZipHeader" :manualHeadline="NoServiceZipHeader"
@ -80,13 +126,6 @@
v-if="noServiceZip" v-if="noServiceZip"
alertClass="alert-warning" alertClass="alert-warning"
/> />
<alert
class="my-3"
v-model="customAlertData"
v-if="foundWindshieldAlert"
alertClass="alert-warning"
cmsWidgetName="FoundWindshieldAlert"
/>
<alert <alert
class="my-3" class="my-3"
v-model="customAlertData" v-model="customAlertData"
@ -98,7 +137,7 @@
class="my-3" class="my-3"
v-model="customAlertData" v-model="customAlertData"
v-if="perfectMatchNewVinAlert" v-if="perfectMatchNewVinAlert"
alertClass="alert-warning" alertClass="alert-success"
cmsWidgetName="PerfectMatchNewVinAlert" cmsWidgetName="PerfectMatchNewVinAlert"
/> />
<funnelFooter <funnelFooter
@ -175,44 +214,39 @@ export default {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
}); });
}, },
props: {
validationRules: String,
},
data() { data() {
return { return {
matchedDifferentVehicle: false, isCarIdDifferent: false,
noMatchAlert: false,
noServiceZip: false, noServiceZip: false,
vinFound: false,
vinFoundReadOnly: false,
foundWindshieldAlert: false,
vinNotFound: false, vinNotFound: false,
perfectMatchNewVinAlert: false,
vin: this.getVinFromStore(), vin: this.getVinFromStore(),
zip: this.getZipFromStore(), zip: this.getZipFromStore(),
email: this.getEmailFromStore(), email: this.getEmailFromStore(),
customAlertData: {}, customAlertData: {},
isCarIdDifferent: false,
previouslyEnteredCarId: '', previouslyEnteredCarId: '',
invalidZip: '', invalidZip: '',
vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
}; };
}, },
computed: { computed: {
perfectMatchNewVinAlert() {
return this.vinPopulatedOnPageLoad && this.vin === this.getVinFromStore();
},
MatchedDifferentVehicleAlertHeader(){ MatchedDifferentVehicleAlertHeader(){
let text = this.getCmsContent("MatchedDifferentVehicle", const text = this.getCmsContent("MatchedDifferentVehicle",
"HeadlineText").replaceAll("{custom:damage}", getDamageString()); "HeadlineText").replaceAll("{custom:damage}", getDamageString());
return text; return text;
}, },
MatchedDifferentVehicleAlertBody(){ MatchedDifferentVehicleAlertBody(){
let text = this.getCmsContent("MatchedDifferentVehicle", const text = this.getCmsContent("MatchedDifferentVehicle",
"BodyText").replaceAll("{custom:damage}", getDamageString()).replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year).replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make).replaceAll("{custom:vinlookupModel}", "BodyText").replaceAll("{custom:damage}", getDamageString()).replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year).replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make).replaceAll("{custom:vinlookupModel}",
this.customAlertData?.vehicleInfo?.model); this.customAlertData?.vehicleInfo?.model);
return text; return text;
}, },
NoServiceZipHeader(){ NoServiceZipHeader(){
let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.invalidZip); const text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.invalidZip);
return text; return text;
}, },
@ -288,7 +322,7 @@ export default {
this.isVinValid = true; this.isVinValid = true;
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookup.data.carId); this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookup.data.carId);
this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
this.matchedDifferentVehicle = true; this.isCarIdDifferent = true;
return; return;
} }
this.updateStore(vehicleLookup.data); this.updateStore(vehicleLookup.data);

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

@ -102,19 +102,11 @@ const routingTable = [
maps: [ maps: [
{ {
scenario: navigationScenarios.CLICKED_BACK, scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.REVEAL, destinationFmgPageValue: fmgPageValues.ESTIMATE,
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_VIN,
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
},
{
scenario: navigationScenarios.VIN_LOOKUP,
destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
}, },
{ {
scenario: navigationScenarios.CLICKED_FORWARD, scenario: navigationScenarios.CLICKED_FORWARD,
destinationFmgPageValue: fmgPageValues.ESTIMATE, destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
} }
], ],
}, },

4
src/store/index.js
View file

@ -144,8 +144,8 @@ export const mutations = {
updateRegistrationAddress(state, registrationAddress){ updateRegistrationAddress(state, registrationAddress){
state.order.vehicle.registration.address = registrationAddress; state.order.vehicle.registration.address = registrationAddress;
}, },
updateServiceLocationZipCode(state, serviceLocationZipCode){ updateServiceLocationZipCode(state, serviceLocationZip){
state.order.serviceLocation.zipCode = serviceLocationZipCode; state.order.serviceLocation.zipCode = serviceLocationZip;
}, },
updateRegistrationCity(state, registrationCity){ updateRegistrationCity(state, registrationCity){
state.order.vehicle.registration.city = registrationCity; state.order.vehicle.registration.city = registrationCity;

18
src/styles/common-animations.scss
View file

@ -10,3 +10,21 @@
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }
.route-fade-enter-active .fade-on-route-transition {
transition: opacity 0.8s ease;
}
.route-fade-leave-active .fade-on-route-transition {
transition: opacity 0.3s ease;
}
.route-fade-enter-from .fade-on-route-transition,
.route-fade-leave-to .fade-on-route-transition {
/*
Hack around a Chrome 96 bug in handling nested opacity transitions.
This is not needed in other browsers or Chrome 99+ where the bug
has been fixed.
*/
opacity: 0.001;
}

9
src/styles/common-styles.scss
View file

@ -26,6 +26,15 @@ body {
overflow-x: hidden; overflow-x: hidden;
} }
.sub-container{
&.make-tall {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
}
.sr-only { .sr-only {
position: absolute; position: absolute;
left: -10000px; left: -10000px;