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

Merge pull request #388 from Safelite/feature/CSR-33

Browse source 
Feature/csr 33
This commit is contained in:
Frank Rua 2022-05-03 13:11:37 -04:00 committed by GitHub
commit 519fa5740a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 275 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/helpers/unit-test-helper.js
View file

@ -23,6 +23,7 @@ export function getMountOptions(mockData) {
mocks.pushPageViewToGA = jest.fn(); mocks.pushPageViewToGA = jest.fn();
mocks.logEvent = jest.fn(); mocks.logEvent = jest.fn();
mocks.pushExperimentsToDataLayer = jest.fn(); mocks.pushExperimentsToDataLayer = jest.fn();
mocks.prependActionToMethod = jest.fn();
mocks.dispatchStoreAction = jest.fn(); mocks.dispatchStoreAction = jest.fn();
mocks.dispatchStoreAction.mockImplementation((actionName) => { mocks.dispatchStoreAction.mockImplementation((actionName) => {

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

@ -81,7 +81,7 @@ import store from "@/store";
import { storeActions } from "@/constants/store-actions"; import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations"; import { storeMutations } from "@/constants/store-mutations";
import baseMixin from "@/mixins/base-mixin"; 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"; import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper";
defineRule("service-zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); defineRule("service-zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));

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

@ -5,23 +5,60 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" 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" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<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
cmsWidgetName="LicensePlateNumber"
v-model="licensePlate"
isRequired
inputId="license_plate"
validationRules="license-plate-required"
/>
</div> </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" isRequired inputId="zip" mask="#####" validationRules="zip-required" /> <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> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion cmsWidgetName="EmailAddress" v-model="email" isRequired inputId="email" validationRules="email-address-required|email-address-format" /> <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>
</div> </div>
<alert <alert
@ -33,7 +70,13 @@
/> />
<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
v-if="!isRegistrationZipServicable"
cmsWidgetName="ServiceZip"
v-model="serviceZip"
inputId="serviceZip"
validationRules="zip-required"
/>
</div> </div>
</div> </div>
<alert <alert
@ -77,16 +120,31 @@ import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions"; import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations"; import { storeMutations } from "@/constants/store-mutations";
import { errorMessages } from "@/constants/error-messages"; 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 { required, regex } from "@/helpers/validation-rules";
import { Form, defineRule } from "vee-validate"; import { Form, defineRule } from "vee-validate";
import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED)); defineRule(
"license-plate-required",
required(errorMessages.LICENSE_PLATE_REQUIRED)
);
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED)); defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED)); defineRule(
defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT)); "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 { export default {
name: "license-plate-lookup", name: "license-plate-lookup",
@ -94,7 +152,6 @@ export default {
// 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 = [
{ {
@ -111,7 +168,7 @@ export default {
}); });
}, },
props: { props: {
validationRules: String, validationRules: String,
}, },
data() { data() {
return { return {
@ -122,28 +179,53 @@ export default {
registrationZip: this.getRegistrationZipFromStore(), registrationZip: this.getRegistrationZipFromStore(),
email: this.getEmailFromStore(), email: this.getEmailFromStore(),
serviceZip: this.getServiceZipFromStore(), serviceZip: this.getServiceZipFromStore(),
previouslyEnteredCarId: '', previouslyEnteredCarId: "",
customAlertData: {}, customAlertData: {},
isSelectedGlassAvailableForVehicle: true, isSelectedGlassAvailableForVehicle: true,
}; };
}, },
mounted() {
this.attachCustomEvents();
},
computed: { computed: {
MatchedDifferentVehicleAlertHeader(){ MatchedDifferentVehicleAlertHeader() {
let text = this.getCmsContent("MatchedDifferentVehicleAlertWidget", "HeadlineText").replaceAll("{custom:damage}", getDamageString()); let text = this.getCmsContent(
"MatchedDifferentVehicleAlertWidget",
"HeadlineText"
).replaceAll("{custom:damage}", getDamageString());
return text; return text;
}, },
MatchedDifferentVehicleAlertBody(){ 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); 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; return text;
}, },
NoServiceZipHeader(){ NoServiceZipHeader() {
let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:zip}", this.registrationZip); let text = this.getCmsContent(
"NoServiceZipWidget",
"HeadlineText"
).replaceAll("{custom:zip}", this.registrationZip);
return text; return text;
}, },
NoServiceZipBody(){ NoServiceZipBody() {
return this.getCmsContent("NoServiceZipWidget", "BodyText"); return this.getCmsContent("NoServiceZipWidget", "BodyText");
}, },
}, },
@ -158,26 +240,35 @@ export default {
store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null); store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES); store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
}, },
getLicensePlateFromStore(){ attachCustomEvents() {
return store.getters.vehicle.registration.licensePlate this.prependActionToMethod(this, this.forwardButtonAction, () => {
this.pushEventToGA(
this.$route.query[this.queryStrings.FMG_PAGE],
this.GaActions.SUBMITTED,
this.GaLabels.LICENSE_PLATE_LOOKUP,
true
);
});
}, },
getRegistrationZipFromStore(){ getLicensePlateFromStore() {
return store.getters.vehicle.registration.zipCode return store.getters.vehicle.registration.licensePlate;
}, },
getEmailFromStore(){ getRegistrationZipFromStore() {
return store.getters.order.customer.emailAddress return store.getters.vehicle.registration.zipCode;
}, },
getServiceZipFromStore(){ getEmailFromStore() {
return store.getters.order.serviceLocation.zip return store.getters.order.customer.emailAddress;
},
getServiceZipFromStore() {
return store.getters.order.serviceLocation.zip;
}, },
backButtonAction() { backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
async forwardButtonAction() { async forwardButtonAction() {
const zipValidation = this.serviceZip
this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.SUBMITTED, this.GaLabels.LICENSE_PLATE_LOOKUP , true); ? 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) { if (!zipValidation.data.isServiceable) {
this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
this.isVinValid = true; this.isVinValid = true;
@ -186,53 +277,75 @@ export default {
return; 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.$refs.funnelFooter.removeLoader();
this.isVinValid = false; this.isVinValid = false;
this.isCarIdDifferent = false; this.isCarIdDifferent = false;
return; 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.previouslyEnteredCarId = vinLookup.data.vehicle.carId;
this.customAlertData.vehicleInfo = vinLookup.data.vehicle; 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.isVinValid = true;
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.vehicle.carId); this.isSelectedGlassAvailableForVehicle =
await isGlassAvailableForCarId(vinLookup.data.vehicle.carId);
this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
return; 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( const partsData = await baseMixin.methods.dispatchStoreAction(
this.storeActions.GET_PARTS_OR_QUESTIONS, this.storeActions.GET_PARTS_OR_QUESTIONS,
{ {
carId: vinLookup.data.vehicle.carId, 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, zipCode: this.serviceZip ? this.serviceZip : this.registrationZip,
vin: vinLookup.data.vin vin: vinLookup.data.vin,
}, },
false false
); );
this.navigateForward(partsData); this.navigateForward(partsData);
}, },
navigateForward(partsData){ navigateForward(partsData) {
if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){ if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, partsData.data); this.$router.navigateAfterSave(
return; this.navigationScenarios.CLICKED_FORWARD,
} else { this.$route,
navigateAfterSaveToHeritageFunnel(this.$route); {},
return; { displayVehicleChangeAlert: true },
} partsData.data
);
return;
} else {
navigateAfterSaveToHeritageFunnel(this.$route);
return;
}
}, },
validateZip(zip) { validateZip(zip) {
return baseMixin.methods.dispatchStoreAction( return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
storeActions.VALIDATE_ZIP, zip,
{ zip } });
);
}, },
lookupVin(plate, state) { lookupVin(plate, state) {
return baseMixin.methods.dispatchStoreAction( return baseMixin.methods.dispatchStoreAction(
@ -241,8 +354,8 @@ export default {
); );
}, },
updateCustomerInfo(vin, vehicleInfo, registrationState) { updateCustomerInfo(vin, vehicleInfo, registrationState) {
if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){ if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
} }
store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin); store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year); store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year);
@ -250,28 +363,34 @@ export default {
store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model); store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style); store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId); store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category); store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY,vehicleInfo.category);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl); 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_VIF_NUMBER,vehicleInfo.imageVifNumber);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor); store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR,vehicleInfo.imageColor);
store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, this.licensePlate); store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE,this.licensePlate);
store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState); 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_SERVICE_LOCATION_ZIP, this.serviceZip);
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email); store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
}, },
}, },
watch: { watch: {
licensePlate() { licensePlate() {
this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")); 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"));
}
}, },
registrationZip() {
this.$refs.funnelFooter.updateButtonText(
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
);
},
serviceZip() {
this.$refs.funnelFooter.updateButtonText(
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
);
},
},
components: { components: {
Form, Form,
funnelHeader, funnelHeader,
@ -282,4 +401,4 @@ export default {
funnelFooter, funnelFooter,
}, },
}; };
</script> </script>

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

@ -134,6 +134,8 @@ export default {
vm.$refs.backGlassOptions.initializeComponent( vm.$refs.backGlassOptions.initializeComponent(
resultMap.damageOptions.backGlassOptions.availableReplacementOptions resultMap.damageOptions.backGlassOptions.availableReplacementOptions
); );
}); });
}, },
data(){ data(){
@ -149,10 +151,7 @@ export default {
} }
}, },
mounted(){ mounted(){
if(this.$store.getters.vehicle.imageVifNumber){ this.attachCustomEvents();
this.pushEventToGA(this.GaCategories.EVOX, `${this.GaActions.VIF}_${this.$store.getters.vehicle.imageVifNumber}`,
this.$store.getters.vehicle.carId, true);
}
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
@ -166,6 +165,13 @@ export default {
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES); 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() { backButtonAction() {
// route to move backwards // route to move backwards
this.$router.navigate( this.$router.navigate(

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

@ -24,7 +24,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
import { storeMutations } from "@/constants/store-mutations"; import { storeMutations } from "@/constants/store-mutations";
import { storeActions } from "@/constants/store-actions"; import { storeActions } from "@/constants/store-actions";
import { experimentUniverses } from "@/constants/experiments"; 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 baseMixin from "@/mixins/base-mixin";
import store from "@/store"; import store from "@/store";
@ -94,7 +94,6 @@ export default {
return true; return true;
}, },
resetDependentState() { resetDependentState() {
// Set // Set
store.commit(storeMutations.UPDATE_MAKE, null); store.commit(storeMutations.UPDATE_MAKE, null);
store.commit(storeMutations.UPDATE_MODEL, null); store.commit(storeMutations.UPDATE_MODEL, null);
@ -106,7 +105,7 @@ export default {
// Invokes // Invokes
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES); store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
} },
}, },
components: { components: {
yearQuestion, yearQuestion,

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

@ -5,13 +5,26 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" 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" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="row my-2"> <div class="row my-2">
<div class="col"> <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> </div>
<div class="row my-2"> <div class="row my-2">
@ -21,12 +34,27 @@
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <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> </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" 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>
</div> </div>
<alert <alert
@ -109,10 +137,22 @@ import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integratio
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED)); defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED)); defineRule(
defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT)); "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-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 { export default {
name: "vin-lookup", name: "vin-lookup",
@ -120,7 +160,6 @@ export default {
// 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 = [
{ {
@ -211,12 +250,20 @@ export default {
getZipFromStore(){ getZipFromStore(){
return store.getters.vehicle.registration.zipCode 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() { backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
async forwardButtonAction() { 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); const zipValidation = await this.validateZip(this.zip);
if (!zipValidation.data.isServiceable) { if (!zipValidation.data.isServiceable) {
this.customAlertData.zip = this.zip; this.customAlertData.zip = this.zip;
@ -257,10 +304,9 @@ export default {
} }
}, },
validateZip(zip) { validateZip(zip) {
return baseMixin.methods.dispatchStoreAction( return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
storeActions.VALIDATE_ZIP, zip,
{ zip } });
);
}, },
lookupVehicle(vin) { lookupVehicle(vin) {
return baseMixin.methods.dispatchStoreAction( return baseMixin.methods.dispatchStoreAction(

12
src/mixins/analytics-mixin.js
View file

@ -81,7 +81,15 @@ export default {
// Push to the data layer with the Google Custom Dimension Index. // Push to the data layer with the Google Custom Dimension Index.
pushToDataLayerIfDefined(experimentWithDimension); pushToDataLayerIfDefined(experimentWithDimension);
}); });
} },
prependActionToMethod(object, method, actionToPrepend) {
const baseMethod = object[method.name];
object[method.name] = function () {
actionToPrepend.apply(this, arguments);
return baseMethod.apply(object, arguments);
};
},
}, },
computed: { computed: {
analyticsPageEvents() { analyticsPageEvents() {
@ -96,7 +104,7 @@ export default {
GaLabels() { GaLabels() {
return GaLabels; return GaLabels;
} }
} },
}; };
function pushToDataLayerIfDefined(data) { function pushToDataLayerIfDefined(data) {

1
src/mixins/analytics-mixin.spec.js
View file

@ -79,5 +79,4 @@ describe("analyticsMixin.js", () => {
expect(window.dataLayer).toEqual([ { settings_5: {"Google Custom Dimension Index": "5"}, variationName_5: 'test', universeName_5: 'testUniverse' } ]); expect(window.dataLayer).toEqual([ { settings_5: {"Google Custom Dimension Index": "5"}, variationName_5: 'test', universeName_5: 'testUniverse' } ]);
}); });
}); });

1
src/router/index.js
View file

@ -126,6 +126,7 @@ const router = createRouter({
router.afterEach(async (to, from) => { router.afterEach(async (to, from) => {
// Push page view to GA // Push page view to GA
analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]); analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
const assignedExperiments = await baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER_FOR_GA, { userId: getDeviceIdValue() }); const assignedExperiments = await baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER_FOR_GA, { userId: getDeviceIdValue() });
analyticsMixin.methods.pushExperimentsToDataLayer(assignedExperiments); analyticsMixin.methods.pushExperimentsToDataLayer(assignedExperiments);
}); });