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

Merge branch 'develop' into feature/CSR-520

Browse source
This commit is contained in:
CarlNation 2022-05-06 09:12:54 -04:00
commit 063135966f
21 changed files with 1294 additions and 1146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
azure-pipelines.yml
View file

@ -121,4 +121,7 @@ stages:
__VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
__VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
__VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
cfDistributionId: $(cfDistributionId)

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>
<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>
<style lang="scss">

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

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

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

@ -57,8 +57,13 @@ export default {
const fieldOptions = {
type: "text",
value: props.modelValue,
potentialInitialValue: props.modelValue,
};
if (props.modelValue && props.modelValue.length > 0) {
fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
}
const {
errorMessage,
handleBlur,
@ -98,10 +103,10 @@ export default {
words.forEach(function (word) {
const position = 1;
word = [word.toString().slice(0, position), noBreakChar, word.toString().slice(position)].join('');
questionText += `${word} `;
});
questionText = questionText.trimEnd();
questionText += `${word} `;
});
questionText = questionText.trimEnd();
} else {
questionText = this.questionText.toString();
}

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

@ -8,51 +8,52 @@
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
<alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert"
class="my-3"
cmsWidgetName="AlertVinNotFoundWidget"
alertClass="alert-danger"
v-bind:isDismissible="false"
/>
<alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert"
class="my-3"
:manualHeadline="AlertMatchedDifferentVehicleHeader"
:manualCopy="AlertMatchedDifferentVehicleBody"
alertClass="alert-warning"
v-bind:isDismissible="false"
/>
<alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert"
class="my-3"
alertClass="alert-danger"
:manualHeadline="AlertNonServiceableZipHeader"
:manualCopy="AlertNonServiceableZipBody"
v-bind:isDismissible="false"
/>
<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert"
class="my-3"
cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
alertClass="alert-danger"
v-bind:isDismissible="false"
/>
<transition name="fade" mode="out-in">
<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
<div class="row my-4">
<div class="col">
<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZip" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
<div class="fade-on-route-transition sub-container make-tall">
<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
<alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert"
class="my-3"
cmsWidgetName="AlertVinNotFoundWidget"
alertClass="alert-danger"
v-bind:isDismissible="false"
/>
<alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert"
class="my-3"
:manualHeadline="AlertMatchedDifferentVehicleHeader"
:manualCopy="AlertMatchedDifferentVehicleBody"
alertClass="alert-warning"
v-bind:isDismissible="false"
/>
<alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert"
class="my-3"
alertClass="alert-danger"
:manualHeadline="AlertNonServiceableZipHeader"
:manualCopy="AlertNonServiceableZipBody"
v-bind:isDismissible="false"
/>
<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert"
class="my-3"
cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
alertClass="alert-danger"
v-bind:isDismissible="false"
/>
<transition name="fade" mode="out-in">
<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
<div class="row my-4">
<div class="col">
<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZip" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
</div>
</div>
</div>
</div>
</transition>
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
:isForwardActionDisabled="!meta.valid"
/>
</transition>
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
:isForwardActionDisabled="!meta.valid"
/>
</div>
</div>
</Form>
</template>

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

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

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

@ -14,91 +14,78 @@
:displayGenericVehicleImage="false"
/>
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="row my-2">
<div class="col">
<textboxQuestion
cmsWidgetName="LicensePlateNumber"
v-model="licensePlate"
isRequired
inputId="license_plate"
validationRules="license-plate-required"
/>
<div class="fade-on-route-transition sub-container make-tall">
<div class="row my-2">
<div class="col">
<textboxQuestion
cmsWidgetName="LicensePlateNumber"
v-model="licensePlate"
isRequired
inputId="license_plate"
validationRules="license-plate-required"
/>
</div>
</div>
</div>
<div class="row my-2">
<div class="col">
<textboxQuestion
cmsWidgetName="RegistrationZip"
v-model="registrationZip"
inputId="zip"
mask="#####"
validationRules="zip-required"
/>
<textboxQuestion
cmsWidgetName="RegistrationZip"
v-model="registrationZip"
isRequired
inputId="zip"
mask="#####"
validationRules="zip-required"
/>
<div class="row my-2">
<div class="col">
<textboxQuestion
cmsWidgetName="RegistrationZip"
v-model="registrationZip"
inputId="zip"
mask="#####"
validationRules="zip-required"
/>
</div>
</div>
</div>
<div class="row my-2">
<div class="col">
<textboxQuestion
cmsWidgetName="EmailAddress"
v-model="email"
inputId="email"
validationRules="email-address-required|email-address-format"
/>
<textboxQuestion
cmsWidgetName="EmailAddress"
v-model="email"
isRequired
inputId="email"
validationRules="email-address-required|email-address-format"
/>
<div class="row my-2">
<div class="col">
<textboxQuestion
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"
/>
<div class="row my-2">
<div class="col">
<textboxQuestion
v-if="!isRegistrationZipServicable"
cmsWidgetName="ServiceZip"
v-model="serviceZip"
inputId="serviceZip"
validationRules="zip-required"
/>
<alert
class="my-3"
:manualHeadline="NoServiceZipHeader"
:manualCopy="NoServiceZipBody"
v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent"
alertClass="alert-danger"
/>
<div class="row my-2">
<div class="col">
<textboxQuestion
v-if="!isRegistrationZipServicable"
cmsWidgetName="ServiceZip"
v-model="serviceZip"
inputId="serviceZip"
validationRules="zip-required"
/>
</div>
</div>
<alert
class="my-3"
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>
<alert
class="my-3"
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>
</Form>
</template>
@ -113,37 +100,55 @@ import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import {
fetchCmsContentForPage
} from "@/helpers/cms-content-helper";
import {
settleAllPromises
} from "@/helpers/layout-helper";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations";
import { errorMessages } from "@/constants/error-messages";
import {
getDamageString,
isGlassAvailableForCarId,
storeActions
} from "@/constants/store-actions";
import {
storeMutations
} from "@/constants/store-mutations";
import {
errorMessages
} from "@/constants/error-messages";
import {
getDamageString,
isGlassAvailableForCarId,
} from "@/helpers/damage-helper";
import { required, regex } from "@/helpers/validation-rules";
import { Form, defineRule } from "vee-validate";
import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import {
required,
regex
} from "@/helpers/validation-rules";
import {
Form,
defineRule
} from "vee-validate";
import {
navigateAfterSaveToHeritageFunnel
} from "@/helpers/heritage-integration/navigation-helper";
// DEFINE VALIDATION RULES
defineRule(
"license-plate-required",
required(errorMessages.LICENSE_PLATE_REQUIRED)
"license-plate-required",
required(errorMessages.LICENSE_PLATE_REQUIRED)
);
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
defineRule(
"email-address-required",
required(errorMessages.EMAIL_ADDRESS_REQUIRED)
"email-address-required",
required(errorMessages.EMAIL_ADDRESS_REQUIRED)
);
defineRule(
"email-address-format",
regex(
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
errorMessages.EMAIL_ADDRESS_FORMAT
)
"email-address-format",
regex(
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
errorMessages.EMAIL_ADDRESS_FORMAT
)
);
export default {
@ -167,9 +172,6 @@ export default {
vm.setCmsContent(resultMap.cmsContent);
});
},
props: {
validationRules: String,
},
data() {
return {
isRegistrationZipServicable: true,
@ -187,218 +189,216 @@ export default {
mounted() {
this.attachCustomEvents();
},
computed: {
MatchedDifferentVehicleAlertHeader() {
let text = this.getCmsContent(
"MatchedDifferentVehicleAlertWidget",
"HeadlineText"
).replaceAll("{custom:damage}", getDamageString());
computed: {
MatchedDifferentVehicleAlertHeader() {
let text = this.getCmsContent(
"MatchedDifferentVehicleAlertWidget",
"HeadlineText"
).replaceAll("{custom:damage}", getDamageString());
return text;
},
MatchedDifferentVehicleAlertBody() {
let text = this.getCmsContent(
"MatchedDifferentVehicleAlertWidget",
"BodyText"
)
.replaceAll("{custom:damage}", getDamageString())
.replaceAll(
"{custom:plateLookupYear}",
this.customAlertData?.vehicleInfo?.year
)
.replaceAll(
"{custom:plateLookupMake}",
this.customAlertData?.vehicleInfo?.make
)
.replaceAll(
"{custom:plateLookupModel}",
this.customAlertData?.vehicleInfo?.model
);
return text;
},
NoServiceZipHeader() {
let text = this.getCmsContent(
"NoServiceZipWidget",
"HeadlineText"
).replaceAll("{custom:zip}", this.registrationZip);
return text;
},
NoServiceZipBody() {
return this.getCmsContent("NoServiceZipWidget", "BodyText");
},
},
methods: {
arePagePrerequisitesValid() {
return store.getters.vehicle.carId !== null;
},
resetDependentState() {
store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null);
store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null);
store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
},
attachCustomEvents() {
this.prependActionToMethod(this, this.forwardButtonAction, () => {
this.pushEventToGA(
this.$route.query[this.queryStrings.FMG_PAGE],
this.GaActions.SUBMITTED,
this.GaLabels.LICENSE_PLATE_LOOKUP,
true
);
});
},
getLicensePlateFromStore() {
return store.getters.vehicle.registration.licensePlate;
},
getRegistrationZipFromStore() {
return store.getters.vehicle.registration.zipCode;
},
getEmailFromStore() {
return store.getters.order.customer.emailAddress;
},
getServiceZipFromStore(){
return store.getters.order.serviceLocation.zipCode
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
const zipValidation = this.serviceZip
? await this.validateZip(this.serviceZip)
: await this.validateZip(this.registrationZip);
if (!zipValidation.data.isServiceable) {
this.$refs.funnelFooter.removeLoader();
this.isVinValid = true;
this.isRegistrationZipServicable = false;
this.isCarIdDifferent = false;
return;
}
const vinLookup = await this.lookupVin(
this.licensePlate,
zipValidation.data.state
).catch(() => {
this.$refs.funnelFooter.removeLoader();
this.isVinValid = false;
this.isCarIdDifferent = false;
return;
});
this.isCarIdDifferent =
vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
if (
this.isCarIdDifferent &&
vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId
) {
this.previouslyEnteredCarId = vinLookup.data.vehicle.carId;
this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
this.$refs.funnelFooter.updateButtonText(
`Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`
);
this.isVinValid = true;
this.isSelectedGlassAvailableForVehicle =
await isGlassAvailableForCarId(vinLookup.data.vehicle.carId);
this.$refs.funnelFooter.removeLoader();
return;
}
this.updateCustomerInfo(
vinLookup.data.vin,
vinLookup.data.vehicle,
zipValidation.data.state
);
const partsData = await baseMixin.methods.dispatchStoreAction(
this.storeActions.GET_PARTS_OR_QUESTIONS,
{
carId: vinLookup.data.vehicle.carId,
glassArray:
this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle
? []
: store.getters.damage.glassToReplace,
zipCode: this.serviceZip ? this.serviceZip : this.registrationZip,
vin: vinLookup.data.vin,
return text;
},
MatchedDifferentVehicleAlertBody() {
let text = this.getCmsContent(
"MatchedDifferentVehicleAlertWidget",
"BodyText"
)
.replaceAll("{custom:damage}", getDamageString())
.replaceAll(
"{custom:plateLookupYear}",
this.customAlertData?.vehicleInfo?.year
)
.replaceAll(
"{custom:plateLookupMake}",
this.customAlertData?.vehicleInfo?.make
)
.replaceAll(
"{custom:plateLookupModel}",
this.customAlertData?.vehicleInfo?.model
);
return text;
},
NoServiceZipHeader() {
let text = this.getCmsContent(
"NoServiceZipWidget",
"HeadlineText"
).replaceAll("{custom:zip}", this.registrationZip);
return text;
},
NoServiceZipBody() {
return this.getCmsContent("NoServiceZipWidget", "BodyText");
},
false
);
this.navigateForward(partsData);
},
navigateForward(partsData) {
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
this.$router.navigateAfterSave(
this.navigationScenarios.CLICKED_FORWARD,
this.$route,
{},
{ displayVehicleChangeAlert: true },
partsData.data
);
return;
} else {
navigateAfterSaveToHeritageFunnel(this.$route);
return;
}
methods: {
arePagePrerequisitesValid() {
return store.getters.vehicle.carId !== null;
},
resetDependentState() {
store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null);
store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null);
store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
},
attachCustomEvents() {
this.prependActionToMethod(this, this.forwardButtonAction, () => {
this.pushEventToGA(
this.$route.query[this.queryStrings.FMG_PAGE],
this.GaActions.SUBMITTED,
this.GaLabels.LICENSE_PLATE_LOOKUP,
true
);
});
},
getLicensePlateFromStore() {
return store.getters.vehicle.registration.licensePlate;
},
getRegistrationZipFromStore() {
return store.getters.vehicle.registration.zipCode;
},
getEmailFromStore() {
return store.getters.order.customer.emailAddress;
},
getServiceZipFromStore() {
return store.getters.order.serviceLocation.zipCode
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
const zipValidation = this.serviceZip ?
await this.validateZip(this.serviceZip) :
await this.validateZip(this.registrationZip);
if (!zipValidation.data.isServiceable) {
this.$refs.funnelFooter.removeLoader();
this.isVinValid = true;
this.isRegistrationZipServicable = false;
this.isCarIdDifferent = false;
return;
}
const vinLookup = await this.lookupVin(
this.licensePlate,
zipValidation.data.state
).catch(() => {
this.$refs.funnelFooter.removeLoader();
this.isVinValid = false;
this.isCarIdDifferent = false;
return;
});
this.isCarIdDifferent =
vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
if (
this.isCarIdDifferent &&
vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId
) {
this.previouslyEnteredCarId = vinLookup.data.vehicle.carId;
this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
this.$refs.funnelFooter.updateButtonText(
`Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`
);
this.isVinValid = true;
this.isSelectedGlassAvailableForVehicle =
await isGlassAvailableForCarId(vinLookup.data.vehicle.carId);
this.$refs.funnelFooter.removeLoader();
return;
}
this.updateCustomerInfo(
vinLookup.data.vin,
vinLookup.data.vehicle,
zipValidation.data.state
);
const partsData = await baseMixin.methods.dispatchStoreAction(
this.storeActions.GET_PARTS_OR_QUESTIONS, {
carId: vinLookup.data.vehicle.carId,
glassArray: this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle ? [] : store.getters.damage.glassToReplace,
zipCode: this.serviceZip ? this.serviceZip : this.registrationZip,
vin: vinLookup.data.vin,
},
false
);
this.navigateForward(partsData);
},
navigateForward(partsData) {
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
this.$router.navigateAfterSave(
this.navigationScenarios.CLICKED_FORWARD,
this.$route, {}, {
displayVehicleChangeAlert: true
},
partsData.data
);
return;
} else {
navigateAfterSaveToHeritageFunnel(this.$route);
return;
}
},
validateZip(zip) {
return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
zip,
});
},
lookupVin(plate, state) {
return baseMixin.methods.dispatchStoreAction(
storeActions.LOOKUP_VIN_BY_PLATE, {
licensePlate: plate,
licenseState: state
}
);
},
updateCustomerInfo(vin, vehicleInfo, registrationState) {
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
}
store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year);
store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make);
store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor);
store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, this.licensePlate);
store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState);
store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.registrationZip);
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZip);
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
},
},
validateZip(zip) {
return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
zip,
});
watch: {
licensePlate() {
this.$refs.funnelFooter.updateButtonText(
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
);
},
registrationZip() {
this.$refs.funnelFooter.updateButtonText(
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
);
},
serviceZip() {
this.$refs.funnelFooter.updateButtonText(
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
);
},
},
lookupVin(plate, state) {
return baseMixin.methods.dispatchStoreAction(
storeActions.LOOKUP_VIN_BY_PLATE,
{ licensePlate: plate, licenseState: state }
);
components: {
Form,
funnelHeader,
vehicleBanner,
funnelSubHeader,
textboxQuestion,
alert,
funnelFooter,
},
updateCustomerInfo(vin, vehicleInfo, registrationState) {
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
}
store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year);
store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make);
store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY,vehicleInfo.category);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL,vehicleInfo.imageUrl);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER,vehicleInfo.imageVifNumber);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR,vehicleInfo.imageColor);
store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE,this.licensePlate);
store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState);
store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.registrationZip);
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZip);
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
},
},
watch: {
licensePlate() {
this.$refs.funnelFooter.updateButtonText(
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
);
},
registrationZip() {
this.$refs.funnelFooter.updateButtonText(
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
);
},
serviceZip() {
this.$refs.funnelFooter.updateButtonText(
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
);
},
},
components: {
Form,
funnelHeader,
vehicleBanner,
funnelSubHeader,
textboxQuestion,
alert,
funnelFooter,
},
};
}
</script>

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

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

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

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

2
src/layouts/vehicle-make/make-question/make-question.vue
View file

@ -1,6 +1,6 @@
<template>
<buttonQuestion
class="radioQuestion"
class="radioQuestion"
isOverflowScrollable
selectingInitiatesLoad
:questionText="questionText"

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

@ -1,5 +1,5 @@
<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" />
<div class="select-car">
<div class="select-car-form rounded text-center">
@ -10,7 +10,9 @@
backButtonAccessibleText="Change Vehicle Year"
@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>

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

@ -1,5 +1,5 @@
<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" />
<div class="select-car">
<div class="select-car-form rounded text-center">
@ -10,7 +10,9 @@
backButtonAccessibleText="Change Vehicle Make"
@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>

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

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

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

@ -1,5 +1,5 @@
<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" />
<div class="select-car">
<div class="select-car-form rounded text-center">
@ -10,7 +10,9 @@
backButtonAccessibleText="Change Vehicle Model"
@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>

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

@ -1,11 +1,18 @@
<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" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
<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>

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

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

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

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

10
src/store/index.js
View file

@ -144,17 +144,17 @@ export const mutations = {
updateRegistrationAddress(state, registrationAddress){
state.order.vehicle.registration.address = registrationAddress;
},
updateServiceLocationZipCode(state, serviceLocationZipCode){
state.order.serviceLocation.zipCode = serviceLocationZipCode;
updateServiceLocationZip(state, serviceLocationZip){
state.order.vehicle.registration.zip = serviceLocationZip;
},
updateRegistrationCity(state, serviceCity){
state.order.serviceLocation.city = serviceCity;
state.order.vehicle.registration.city = serviceCity;
},
updateRegistrationFirstName(state, firstName){
state.order.serviceLocation.firstName = firstName;
state.order.vehicle.registration.firstName = firstName;
},
updateRegistrationLastName(state, lastName){
state.order.serviceLocation.lastName = lastName;
state.order.vehicle.registration.lastName = lastName;
},
updateCustomerEmailAddress(state, customerEmailAddress){
state.order.customer.emailAddress = customerEmailAddress;

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

@ -9,4 +9,22 @@
.fade-enter-from,
.fade-leave-to {
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;
}
.sub-container{
&.make-tall {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
}
.sr-only {
position: absolute;
left: -10000px;