merge
This commit is contained in:
parent
0350376ead
commit
07dcfe8177
7 changed files with 294 additions and 91 deletions
|
|
@ -81,7 +81,7 @@ import store from "@/store";
|
|||
import { storeActions } from "@/constants/store-actions";
|
||||
import { storeMutations } from "@/constants/store-mutations";
|
||||
import baseMixin from "@/mixins/base-mixin";
|
||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper";
|
||||
|
||||
defineRule("service-zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
|
||||
|
|
|
|||
|
|
@ -5,9 +5,14 @@
|
|||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
>
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
|
||||
<div
|
||||
class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"
|
||||
>
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
||||
<vehicleBanner
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false"
|
||||
/>
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
|
|
@ -16,11 +21,24 @@
|
|||
</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>
|
||||
</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>
|
||||
</div>
|
||||
|
|
@ -33,7 +51,13 @@
|
|||
/>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
|
||||
<textboxQuestion
|
||||
v-if="!isRegistrationZipServicable"
|
||||
cmsWidgetName="ServiceZip"
|
||||
v-model="serviceZip"
|
||||
inputId="serviceZip"
|
||||
validationRules="zip-required"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<alert
|
||||
|
|
@ -77,16 +101,31 @@ 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 } from "@/helpers/damage-helper";
|
||||
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";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
|
||||
defineRule(
|
||||
"license-plate-required",
|
||||
required(errorMessages.LICENSE_PLATE_REQUIRED)
|
||||
);
|
||||
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
|
||||
defineRule("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));
|
||||
defineRule(
|
||||
"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
|
||||
)
|
||||
);
|
||||
|
||||
export default {
|
||||
name: "license-plate-lookup",
|
||||
|
|
@ -94,7 +133,6 @@ export default {
|
|||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
|
|
@ -111,7 +149,7 @@ export default {
|
|||
});
|
||||
},
|
||||
props: {
|
||||
validationRules: String,
|
||||
validationRules: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -122,28 +160,53 @@ export default {
|
|||
registrationZip: this.getRegistrationZipFromStore(),
|
||||
email: this.getEmailFromStore(),
|
||||
serviceZip: this.getServiceZipFromStore(),
|
||||
previouslyEnteredCarId: '',
|
||||
previouslyEnteredCarId: "",
|
||||
customAlertData: {},
|
||||
isSelectedGlassAvailableForVehicle: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.attachCustomEvents();
|
||||
},
|
||||
computed: {
|
||||
MatchedDifferentVehicleAlertHeader(){
|
||||
let text = this.getCmsContent("MatchedDifferentVehicleAlertWidget", "HeadlineText").replaceAll("{custom:damage}", getDamageString());
|
||||
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);
|
||||
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);
|
||||
NoServiceZipHeader() {
|
||||
let text = this.getCmsContent(
|
||||
"NoServiceZipWidget",
|
||||
"HeadlineText"
|
||||
).replaceAll("{custom:zip}", this.registrationZip);
|
||||
|
||||
return text;
|
||||
},
|
||||
NoServiceZipBody(){
|
||||
NoServiceZipBody() {
|
||||
return this.getCmsContent("NoServiceZipWidget", "BodyText");
|
||||
},
|
||||
},
|
||||
|
|
@ -158,26 +221,35 @@ export default {
|
|||
store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
|
||||
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
|
||||
},
|
||||
getLicensePlateFromStore(){
|
||||
return store.getters.vehicle.registration.licensePlate
|
||||
attachCustomEvents() {
|
||||
this.prependActionToMethod(this, this.forwardButtonAction, () => {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[this.queryStrings.FMG_PAGE],
|
||||
this.GaActions.SUBMITTED,
|
||||
this.GaLabels.LICENSE_PLATE_LOOKUP,
|
||||
true
|
||||
);
|
||||
});
|
||||
},
|
||||
getRegistrationZipFromStore(){
|
||||
return store.getters.vehicle.registration.zipCode
|
||||
getLicensePlateFromStore() {
|
||||
return store.getters.vehicle.registration.licensePlate;
|
||||
},
|
||||
getEmailFromStore(){
|
||||
return store.getters.order.customer.emailAddress
|
||||
getRegistrationZipFromStore() {
|
||||
return store.getters.vehicle.registration.zipCode;
|
||||
},
|
||||
getServiceZipFromStore(){
|
||||
return store.getters.order.serviceLocation.zip
|
||||
getEmailFromStore() {
|
||||
return store.getters.order.customer.emailAddress;
|
||||
},
|
||||
getServiceZipFromStore() {
|
||||
return store.getters.order.serviceLocation.zip;
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
|
||||
this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.SUBMITTED, this.GaLabels.LICENSE_PLATE_LOOKUP , true);
|
||||
|
||||
const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.registrationZip);
|
||||
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;
|
||||
|
|
@ -186,53 +258,75 @@ export default {
|
|||
return;
|
||||
}
|
||||
|
||||
const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => {
|
||||
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;
|
||||
this.isCarIdDifferent =
|
||||
vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
|
||||
|
||||
if (this.isCarIdDifferent && (vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId)) {
|
||||
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.$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.isSelectedGlassAvailableForVehicle =
|
||||
await isGlassAvailableForCarId(vinLookup.data.vehicle.carId);
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
return;
|
||||
}
|
||||
|
||||
this.updateCustomerInfo(vinLookup.data.vin, vinLookup.data.vehicle, zipValidation.data.state);
|
||||
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,
|
||||
glassArray:
|
||||
this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle
|
||||
? []
|
||||
: store.getters.damage.glassToReplace,
|
||||
zipCode: this.serviceZip ? this.serviceZip : this.registrationZip,
|
||||
vin: vinLookup.data.vin
|
||||
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;
|
||||
}
|
||||
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 }
|
||||
);
|
||||
return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
|
||||
zip,
|
||||
});
|
||||
},
|
||||
lookupVin(plate, state) {
|
||||
return baseMixin.methods.dispatchStoreAction(
|
||||
|
|
@ -241,8 +335,8 @@ export default {
|
|||
);
|
||||
},
|
||||
updateCustomerInfo(vin, vehicleInfo, registrationState) {
|
||||
if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
|
||||
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
|
||||
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);
|
||||
|
|
@ -250,28 +344,52 @@ export default {
|
|||
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_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_REGISTRATION_ZIP_CODE,
|
||||
this.registrationZip
|
||||
);
|
||||
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, 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"));
|
||||
}
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -134,6 +134,8 @@ export default {
|
|||
vm.$refs.backGlassOptions.initializeComponent(
|
||||
resultMap.damageOptions.backGlassOptions.availableReplacementOptions
|
||||
);
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
data(){
|
||||
|
|
@ -149,10 +151,7 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted(){
|
||||
if(this.$store.getters.vehicle.imageVifNumber){
|
||||
this.pushEventToGA(this.GaCategories.EVOX, `${this.GaActions.VIF}_${this.$store.getters.vehicle.imageVifNumber}`,
|
||||
this.$store.getters.vehicle.carId, true);
|
||||
}
|
||||
this.attachCustomEvents();
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
|
|
@ -166,6 +165,13 @@ export default {
|
|||
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
|
||||
},
|
||||
|
||||
attachCustomEvents(){
|
||||
if(this.$store.getters.vehicle.imageVifNumber){
|
||||
this.pushEventToGA(this.GaCategories.EVOX, `${this.GaActions.VIF}_${this.$store.getters.vehicle.imageVifNumber}`,
|
||||
this.$store.getters.vehicle.carId, true);
|
||||
}
|
||||
},
|
||||
|
||||
backButtonAction() {
|
||||
// route to move backwards
|
||||
this.$router.navigate(
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
|
|||
import { storeMutations } from "@/constants/store-mutations";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { experimentUniverses } from "@/constants/experiments";
|
||||
import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
|
||||
import { getDeviceIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
|
||||
|
||||
import baseMixin from "@/mixins/base-mixin";
|
||||
import store from "@/store";
|
||||
|
|
@ -94,7 +94,6 @@ export default {
|
|||
return true;
|
||||
},
|
||||
resetDependentState() {
|
||||
|
||||
// Set
|
||||
store.commit(storeMutations.UPDATE_MAKE, null);
|
||||
store.commit(storeMutations.UPDATE_MODEL, null);
|
||||
|
|
@ -106,7 +105,7 @@ export default {
|
|||
// Invokes
|
||||
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
|
||||
store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
yearQuestion,
|
||||
|
|
|
|||
|
|
@ -5,13 +5,26 @@
|
|||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
>
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
|
||||
<div
|
||||
class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"
|
||||
>
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
||||
<vehicleBanner
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
: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 />
|
||||
<textboxQuestion
|
||||
cmsWidgetName="VinNumber"
|
||||
v-model="vin"
|
||||
inputId="vin"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
validationRules="vin-required|vin-format"
|
||||
:isDisabled="isVinFieldReadOnly"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
|
|
@ -21,12 +34,27 @@
|
|||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion cmsWidgetName="ServiceZIP" v-model="zip" inputId="zip" mask="#####" isRequired disableAutoFill validationRules="zip-required" />
|
||||
<textboxQuestion
|
||||
cmsWidgetName="ServiceZIP"
|
||||
v-model="zip"
|
||||
inputId="zip"
|
||||
mask="#####"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
validationRules="zip-required"
|
||||
/>
|
||||
</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" />
|
||||
<textboxQuestion
|
||||
cmsWidgetName="EmailAddress"
|
||||
v-model="email"
|
||||
inputId="email"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
validationRules="email-address-required|email-address-format"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<alert
|
||||
|
|
@ -109,10 +137,22 @@ import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integratio
|
|||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
|
||||
defineRule("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));
|
||||
defineRule(
|
||||
"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
|
||||
)
|
||||
);
|
||||
defineRule("vin-required", required(errorMessages.VIN_REQUIRED));
|
||||
defineRule("vin-format", regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));
|
||||
defineRule(
|
||||
"vin-format",
|
||||
regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT)
|
||||
);
|
||||
|
||||
export default {
|
||||
name: "vin-lookup",
|
||||
|
|
@ -120,7 +160,6 @@ export default {
|
|||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
|
|
@ -211,12 +250,20 @@ export default {
|
|||
getZipFromStore(){
|
||||
return store.getters.vehicle.registration.zipCode
|
||||
},
|
||||
attachCustomEvents() {
|
||||
this.prependActionToMethod(this, this.forwardButtonAction, () => {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[this.queryStrings.FMG_PAGE],
|
||||
this.GaActions.SUBMITTED,
|
||||
this.GaLabels.VINLOOKUP,
|
||||
true
|
||||
);
|
||||
});
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.SUBMITTED, this.GaLabels.VINLOOKUP , true);
|
||||
|
||||
const zipValidation = await this.validateZip(this.zip);
|
||||
if (!zipValidation.data.isServiceable) {
|
||||
this.customAlertData.zip = this.zip;
|
||||
|
|
@ -257,10 +304,9 @@ export default {
|
|||
}
|
||||
},
|
||||
validateZip(zip) {
|
||||
return baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.VALIDATE_ZIP,
|
||||
{ zip }
|
||||
);
|
||||
return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
|
||||
zip,
|
||||
});
|
||||
},
|
||||
lookupVehicle(vin) {
|
||||
return baseMixin.methods.dispatchStoreAction(
|
||||
|
|
|
|||
|
|
@ -81,7 +81,24 @@ export default {
|
|||
// Push to the data layer with the Google Custom Dimension Index.
|
||||
pushToDataLayerIfDefined(experimentWithDimension);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
appendActionToMethod(object, method, actionToAppend) {
|
||||
const baseMethod = object[method.name];
|
||||
object[method.name] = function () {
|
||||
var result = baseMethod.apply(object, arguments);
|
||||
actionToAppend.apply(this, arguments);
|
||||
return result;
|
||||
};
|
||||
},
|
||||
|
||||
prependActionToMethod(object, method, actionToPrepend) {
|
||||
const baseMethod = object[method.name];
|
||||
object[method.name] = function () {
|
||||
actionToPrepend.apply(this, arguments);
|
||||
return baseMethod.apply(object, arguments);
|
||||
};
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
analyticsPageEvents() {
|
||||
|
|
@ -96,7 +113,7 @@ export default {
|
|||
GaLabels() {
|
||||
return GaLabels;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
function pushToDataLayerIfDefined(data) {
|
||||
|
|
|
|||
|
|
@ -79,6 +79,9 @@ const routes = [
|
|||
await GoToFunnelStartOn404(next);
|
||||
}
|
||||
|
||||
// Run analytics logic, if there is any for the page.
|
||||
//attachCustomEvents(component);
|
||||
|
||||
return next({ name: to.query.fmgPage, query: to.query, params: to.params });
|
||||
}
|
||||
|
||||
|
|
@ -100,6 +103,9 @@ const routes = [
|
|||
await GoToFunnelStartOn404(next);
|
||||
}
|
||||
|
||||
// Run analytics logic, if there is any for the page.
|
||||
//attachCustomEvents(nextComponent);
|
||||
|
||||
// Assign current query string parameters, as well as our fmgPage one.
|
||||
next({
|
||||
name: routeData[0].name,
|
||||
|
|
@ -126,6 +132,7 @@ const router = createRouter({
|
|||
router.afterEach(async (to, from) => {
|
||||
// Push page view to GA
|
||||
analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
|
||||
|
||||
const assignedExperiments = await baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER_FOR_GA, { userId: getDeviceIdValue() });
|
||||
analyticsMixin.methods.pushExperimentsToDataLayer(assignedExperiments);
|
||||
});
|
||||
|
|
@ -274,4 +281,14 @@ function resetDependentState(component) {
|
|||
return component.default.methods.resetDependentState();
|
||||
}
|
||||
|
||||
// Run analytics logic to run custom events.
|
||||
function attachCustomEvents(component) {
|
||||
try {
|
||||
return component.default.methods.attachCustomEvents();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return; // Eat the exception, analytics events shouldn't break anything.
|
||||
}
|
||||
}
|
||||
|
||||
export default router;
|
||||
Loading…
Reference in a new issue