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

Merge remote-tracking branch 'origin/develop' into feature/CSR-240

Browse source
This commit is contained in:
Scott Kiener 2022-05-05 15:45:36 -04:00
commit f95aebc0aa
12 changed files with 406 additions and 392 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
azure-pipelines.yml
View file

@ -79,6 +79,7 @@ stages:
__VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__) __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
__VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__) __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
__VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__) __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
__VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
indexDeployVariables: indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__) __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__) __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
@ -119,4 +120,8 @@ stages:
__VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__) __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
__VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__) __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
__VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__) __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) cfDistributionId: $(cfDistributionId)

3
src/constants/application-config.js
View file

@ -4,7 +4,8 @@ const applicationConfig = {
GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY, GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY,
ANALYTICS_SESSION_TIMEOUT_MINUTES: 30, ANALYTICS_SESSION_TIMEOUT_MINUTES: 30,
SAVED_SESSION_TIMEOUT_DAYS: 45, SAVED_SESSION_TIMEOUT_DAYS: 45,
COOKIE_PATH: "/" COOKIE_PATH: "/",
CURRENT_ENVIRONMENT: process.env.VUE_APP_CURRENT_ENVIRONMENT // "Localhost", "Dev", "QA", and "Prod"
}; };
export { applicationConfig }; export { applicationConfig };

4
src/constants/cookie-names.js
View file

@ -1,5 +1,7 @@
import { applicationConfig } from "@/constants/application-config.js"
const cookieNames = { const cookieNames = {
FUNNEL_SESSION_INFO: "FunnelSessionInfo", FUNNEL_SESSION_INFO: `FunnelSessionInfo-${applicationConfig.CURRENT_ENVIRONMENT}`,
// Existing Safelite.com cookies // Existing Safelite.com cookies
DXDEV: "dxdev", DXDEV: "dxdev",

8
src/constants/endpoints.js
View file

@ -71,8 +71,12 @@ const endpoints = {
url: "/analytics/api/v1/analytics/log-experiment-exposure", url: "/analytics/api/v1/analytics/log-experiment-exposure",
method: "POST", method: "POST",
}, },
LogActivity:{ LogPageView:{
url: "/analytics/api/v1/analytics/activity", url: "/analytics/api/v1/analytics/log-page-view",
method: "POST",
},
LogCustomEvent:{
url: "/analytics/api/v1/analytics/log-custom-event",
method: "POST", method: "POST",
}, },
GetExperimentsByUser: { GetExperimentsByUser: {

3
src/constants/store-actions.js
View file

@ -19,7 +19,8 @@ const storeActions = {
SET_REFERRAL_INFORMATION: "setReferralInformation", SET_REFERRAL_INFORMATION: "setReferralInformation",
VALIDATE_ZIP: "validateZip", VALIDATE_ZIP: "validateZip",
LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure", LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure",
LOG_ACTIVITY: "logActivity", LOG_PAGE_VIEW: "logPageView",
LOG_CUSTOM_EVENT: "logCustomEvent",
GET_EXPERIMENTS_BY_USER: "GetExperimentsByUser", GET_EXPERIMENTS_BY_USER: "GetExperimentsByUser",
// DEPENDENCY MUTATIONS // DEPENDENCY MUTATIONS

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

@ -1,106 +1,35 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
@submit="onSubmit" <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
@invalid-submit="onInvalidSubmit" <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
ref="theForm" <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
v-slot="{ meta }" <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
> <div class="row my-2">
<div <div class="col">
class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5" <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
> </div>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
: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> </div>
</div> <div class="row my-2">
<div class="row my-2"> <div class="col">
<div class="col"> <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
<textboxQuestion </div>
cmsWidgetName="RegistrationZip"
v-model="registrationZip"
inputId="zip"
mask="#####"
validationRules="zip-required"
/>
<textboxQuestion
cmsWidgetName="RegistrationZip"
v-model="registrationZip"
isRequired
inputId="zip"
mask="#####"
validationRules="zip-required"
/>
</div> </div>
</div> <div class="row my-2">
<div class="row my-2"> <div class="col">
<div class="col"> <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
<textboxQuestion </div>
cmsWidgetName="EmailAddress"
v-model="email"
inputId="email"
validationRules="email-address-required|email-address-format"
/>
<textboxQuestion
cmsWidgetName="EmailAddress"
v-model="email"
isRequired
inputId="email"
validationRules="email-address-required|email-address-format"
/>
</div> </div>
</div> <alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
<alert <div class="row my-2">
class="my-3" <div class="col">
:manualHeadline="NoServiceZipHeader" <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
:manualCopy="NoServiceZipBody" </div>
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>
</div> <alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" />
<alert <alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
class="my-3" <funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
cmsWidgetName="NoMatchAlertWidget"
v-if="!isVinValid"
alertClass="alert-danger"
/>
<alert
class="my-3"
:manualHeadline="MatchedDifferentVehicleAlertHeader"
:manualCopy="MatchedDifferentVehicleAlertBody"
v-if="isCarIdDifferent"
alertClass="alert-warning"
/>
<funnelFooter
ref="funnelFooter"
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div> </div>
</Form> </Form>
</template> </template>
<script> <script>
@ -113,292 +42,306 @@ import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/common-components/textbox-question/textbox-question"; import textboxQuestion from "@/common-components/textbox-question/textbox-question";
// Supporting files // Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import {
import { settleAllPromises } from "@/helpers/layout-helper"; fetchCmsContentForPage
} from "@/helpers/cms-content-helper";
import {
settleAllPromises
} from "@/helpers/layout-helper";
import store from "@/store"; import store from "@/store";
import baseMixin from "@/mixins/base-mixin.js"; 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 { import {
getDamageString, storeActions
isGlassAvailableForCarId, } from "@/constants/store-actions";
import {
storeMutations
} from "@/constants/store-mutations";
import {
errorMessages
} from "@/constants/error-messages";
import {
getDamageString,
isGlassAvailableForCarId,
} from "@/helpers/damage-helper"; } from "@/helpers/damage-helper";
import { required, regex } from "@/helpers/validation-rules"; import {
import { Form, defineRule } from "vee-validate"; required,
import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; regex
} from "@/helpers/validation-rules";
import {
Form,
defineRule
} from "vee-validate";
import {
navigateAfterSaveToHeritageFunnel
} from "@/helpers/heritage-integration/navigation-helper";
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule( defineRule(
"license-plate-required", "license-plate-required",
required(errorMessages.LICENSE_PLATE_REQUIRED) required(errorMessages.LICENSE_PLATE_REQUIRED)
); );
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED)); defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
defineRule( defineRule(
"email-address-required", "email-address-required",
required(errorMessages.EMAIL_ADDRESS_REQUIRED) required(errorMessages.EMAIL_ADDRESS_REQUIRED)
); );
defineRule( defineRule(
"email-address-format", "email-address-format",
regex( regex(
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
errorMessages.EMAIL_ADDRESS_FORMAT errorMessages.EMAIL_ADDRESS_FORMAT
) )
); );
export default { export default {
name: "license-plate-lookup", name: "license-plate-lookup",
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [{
{ resultKey: "cmsContent",
resultKey: "cmsContent", promise: cmsContentPromise,
promise: cmsContentPromise, }, ];
},
];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
}); });
}, },
props: { props: {
validationRules: String, validationRules: String,
}, },
data() { data() {
return { return {
isRegistrationZipServicable: true, isRegistrationZipServicable: true,
isVinValid: true, isVinValid: true,
isCarIdDifferent: false, isCarIdDifferent: false,
licensePlate: this.getLicensePlateFromStore(), licensePlate: this.getLicensePlateFromStore(),
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() { mounted() {
this.attachCustomEvents(); this.attachCustomEvents();
}, },
computed: { computed: {
MatchedDifferentVehicleAlertHeader() { MatchedDifferentVehicleAlertHeader() {
let text = this.getCmsContent( let text = this.getCmsContent(
"MatchedDifferentVehicleAlertWidget", "MatchedDifferentVehicleAlertWidget",
"HeadlineText" "HeadlineText"
).replaceAll("{custom:damage}", getDamageString()); ).replaceAll("{custom:damage}", getDamageString());
return text; return text;
}, },
MatchedDifferentVehicleAlertBody() { MatchedDifferentVehicleAlertBody() {
let text = this.getCmsContent( let text = this.getCmsContent(
"MatchedDifferentVehicleAlertWidget", "MatchedDifferentVehicleAlertWidget",
"BodyText" "BodyText"
) )
.replaceAll("{custom:damage}", getDamageString()) .replaceAll("{custom:damage}", getDamageString())
.replaceAll( .replaceAll(
"{custom:plateLookupYear}", "{custom:plateLookupYear}",
this.customAlertData?.vehicleInfo?.year this.customAlertData?.vehicleInfo?.year
) )
.replaceAll( .replaceAll(
"{custom:plateLookupMake}", "{custom:plateLookupMake}",
this.customAlertData?.vehicleInfo?.make this.customAlertData?.vehicleInfo?.make
) )
.replaceAll( .replaceAll(
"{custom:plateLookupModel}", "{custom:plateLookupModel}",
this.customAlertData?.vehicleInfo?.model this.customAlertData?.vehicleInfo?.model
); );
return text; return text;
}, },
NoServiceZipHeader() { NoServiceZipHeader() {
let text = this.getCmsContent( let text = this.getCmsContent(
"NoServiceZipWidget", "NoServiceZipWidget",
"HeadlineText" "HeadlineText"
).replaceAll("{custom:zip}", this.registrationZip); ).replaceAll("{custom:zip}", this.registrationZip);
return text; return text;
}, },
NoServiceZipBody() { NoServiceZipBody() {
return this.getCmsContent("NoServiceZipWidget", "BodyText"); 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,
}, },
false
);
this.navigateForward(partsData);
}, },
navigateForward(partsData) { methods: {
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) { arePagePrerequisitesValid() {
this.$router.navigateAfterSave( return store.getters.vehicle.carId !== null;
this.navigationScenarios.CLICKED_FORWARD, },
this.$route, resetDependentState() {
{}, store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
{ displayVehicleChangeAlert: true }, store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null);
partsData.data store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null);
); store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
return; store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
} else { },
navigateAfterSaveToHeritageFunnel(this.$route); attachCustomEvents() {
return; 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) { watch: {
return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, { licensePlate() {
zip, 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) { components: {
return baseMixin.methods.dispatchStoreAction( Form,
storeActions.LOOKUP_VIN_BY_PLATE, funnelHeader,
{ licensePlate: plate, licenseState: state } 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> </script>

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

@ -11,24 +11,34 @@ const currentPageName = getPageNameByQueryString();
export default { export default {
methods: { methods: {
logEvent(pageEvent, category, action, label, value) { logPageView(pageEvent) {
var payload = { var payload = {
userId: getDeviceIdValue(), userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(), sessionKey: getSessionKeyValue(),
pageName: currentPageName, pageName: currentPageName,
sessionId: getSessionIdValue(), sessionId: getSessionIdValue(),
action: '',
event: pageEvent,
shouldUseSessionId: true, shouldUseSessionId: true,
}; };
if (pageEvent) { baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false);
payload.pageEvent = { action: '', event: pageEvent }; },
}
if (category) { logCustomEvent(category, action, label, value) {
payload.customEvent = { category: category, action: action, label: label, value: value }; var payload = {
} userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(),
pageName: currentPageName,
sessionId: getSessionIdValue(),
category: category,
action: action,
label: label,
value: value,
shouldUseSessionId: true,
};
baseMixin.methods.dispatchStoreAction(storeActions.LOG_ACTIVITY, payload, false); baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
}, },
pushEventToGA(category, action, label, pushToLogApp = false) { pushEventToGA(category, action, label, pushToLogApp = false) {
@ -44,7 +54,7 @@ export default {
pushToDataLayerIfDefined(eventToBePushed); pushToDataLayerIfDefined(eventToBePushed);
if (pushToLogApp) { if (pushToLogApp) {
this.logEvent(undefined, category, action, label, undefined); this.logCustomEvent(category, action, label, undefined);
} }
}, },
@ -58,7 +68,7 @@ export default {
pushToDataLayerIfDefined(pageViewEvent); pushToDataLayerIfDefined(pageViewEvent);
this.logEvent(currentPageName, analyticsPageEvents.ENTRY); this.logPageView(analyticsPageEvents.ENTRY);
}, },
pushExperimentsToDataLayer(experiments) { pushExperimentsToDataLayer(experiments) {

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

@ -3,18 +3,34 @@ import { setupMocksForJsFiles } from "@/helpers/unit-test-helper.js";
import { storeActions } from "@/constants/store-actions"; import { storeActions } from "@/constants/store-actions";
describe("analyticsMixin.js", () => { describe("analyticsMixin.js", () => {
test("logEvent: calls dispatch with type and payload", () => { test("logPageView: calls dispatch with type and payload", () => {
const type = ""; const type = "";
const payload = {}; const payload = {};
const mockData = { const mockData = {
actionList: [{ actionList: [{
actionName: storeActions.LOG_ACTIVITY actionName: storeActions.LOG_PAGE_VIEW
}], }],
} }
const mocks = setupMocksForJsFiles(mockData); const mocks = setupMocksForJsFiles(mockData);
analyticsMixin.methods.logEvent(type, payload); analyticsMixin.methods.logPageView(type, payload);
expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
});
test("logCustomEvent: calls dispatch with type and payload", () => {
const type = "";
const payload = {};
const mockData = {
actionList: [{
actionName: storeActions.LOG_CUSTOM_EVENT
}],
}
const mocks = setupMocksForJsFiles(mockData);
analyticsMixin.methods.logCustomEvent(type, payload);
expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled(); expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
}); });
@ -23,7 +39,7 @@ describe("analyticsMixin.js", () => {
// Arrange // Arrange
const mockData = { const mockData = {
actionList: [{ actionList: [{
actionName: storeActions.LOG_ACTIVITY actionName: storeActions.LOG_CUSTOM_EVENT
}], }],
} }
const mocks = setupMocksForJsFiles(mockData); const mocks = setupMocksForJsFiles(mockData);

34
src/store/index.js
View file

@ -433,27 +433,43 @@ export const actions = {
}); });
}, },
logActivity(context, { userId, sessionKey, pageName, sessionId, pageEvent, customEvent, shouldUseSessionId }) { logPageView(context, { userId, sessionKey, pageName, sessionId, action, event, shouldUseSessionId }) {
var payload = { var payload = {
userId: userId, userId: userId,
sessionKey: sessionKey, sessionKey: sessionKey,
sessionId: sessionId, sessionId: sessionId,
pageName: pageName, pageName: pageName,
applicationName: 'SafeliteDotCom', applicationName: 'SafeliteDotCom',
action: action,
event: event,
shouldUseSessionId: shouldUseSessionId shouldUseSessionId: shouldUseSessionId
}; };
if (typeof pageEvent !== 'undefined') { return globalMethods.callHttpClient({
payload.pageEvent = { action: pageEvent.action, event: pageEvent.event}; method: endpoints.LogPageView.method,
} endpoint: endpoints.LogPageView.url,
payload: payload,
logApiCall: false
});
},
if (typeof customEvent !== 'undefined') { logCustomEvent(context, { userId, sessionKey, pageName, sessionId, category, action, label, value, shouldUseSessionId }) {
payload.customEvents = [{category: customEvent.category, action: customEvent.action, label: customEvent.label, value: customEvent.value}]; var payload = {
} userId: userId,
sessionKey: sessionKey,
sessionId: sessionId,
pageName: pageName,
applicationName: 'SafeliteDotCom',
category: category,
action: action,
label: label,
value: value,
shouldUseSessionId: shouldUseSessionId
};
return globalMethods.callHttpClient({ return globalMethods.callHttpClient({
method: endpoints.LogActivity.method, method: endpoints.LogCustomEvent.method,
endpoint: endpoints.LogActivity.url, endpoint: endpoints.LogCustomEvent.url,
payload: payload, payload: payload,
logApiCall: false logApiCall: false
}); });

22
src/store/store.spec.js
View file

@ -617,7 +617,7 @@ describe("Actions", () => {
expect(commit).toBeCalledWith(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, "xxx-xxx-xxx"); expect(commit).toBeCalledWith(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, "xxx-xxx-xxx");
}); });
it("logActivity action, should return nothing", async () => { it("logPageView action, should return nothing", async () => {
// Arrange // Arrange
const context = state; const context = state;
@ -626,12 +626,26 @@ describe("Actions", () => {
event: "ENTRY", event: "ENTRY",
} }
var customEvent = [{ // Act
globalMethods.callHttpClient.mockImplementation(() => {
return Promise.resolve({ });
});
// Assert
const response = await actions.logPageView(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", pageEvent: pageEvent, shouldUseSessionId: true });
expect(response).toEqual({});
});
it("logCustomEvent action, should return nothing", async () => {
// Arrange
const context = state;
var customEvent = {
category: "tstCat", category: "tstCat",
action: "click", action: "click",
label: "damage", label: "damage",
value: "psych" value: "psych"
}]; };
// Act // Act
globalMethods.callHttpClient.mockImplementation(() => { globalMethods.callHttpClient.mockImplementation(() => {
@ -639,7 +653,7 @@ describe("Actions", () => {
}); });
// Assert // Assert
const response = await actions.logActivity(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", pageEvent: pageEvent, customEvent: customEvent, shouldUseSessionId: true }); const response = await actions.logCustomEvent(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", customEvent: customEvent, shouldUseSessionId: true });
expect(response).toEqual({}); expect(response).toEqual({});
}); });

1
vue.config.js
View file

@ -4,6 +4,7 @@ process.env.VUE_APP_HERITAGE_FUNNEL =
"http://localhost:38000/default.aspx"; "http://localhost:38000/default.aspx";
process.env.VUE_APP_GOOGLE_PLACES_API_KEY = process.env.VUE_APP_GOOGLE_PLACES_API_KEY =
"AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo";
process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
// GA & GTM // GA & GTM
process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=amlAYNhxUxuskQo7jmjadg&gtm_preview=env-38&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-M6XCRH');"; process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=amlAYNhxUxuskQo7jmjadg&gtm_preview=env-38&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-M6XCRH');";

1
vue.release.config.js
View file

@ -1,6 +1,7 @@
process.env.VUE_APP_CONSUMER_CF_DISTRO = "__VUE_APP_CONSUMER_CF_DISTRO__"; process.env.VUE_APP_CONSUMER_CF_DISTRO = "__VUE_APP_CONSUMER_CF_DISTRO__";
process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "__VUE_APP_GOOGLE_PLACES_API_KEY__"; process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "__VUE_APP_GOOGLE_PLACES_API_KEY__";
process.env.VUE_APP_HERITAGE_FUNNEL = "__VUE_APP_HERITAGE_FUNNEL__"; process.env.VUE_APP_HERITAGE_FUNNEL = "__VUE_APP_HERITAGE_FUNNEL__";
process.env.VUE_APP_CURRENT_ENVIRONMENT = "__VUE_APP_CURRENT_ENVIRONMENT__";
// GA & GTM // GA & GTM
process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__"; process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__";