From 07dcfe81775ff9d2d8c7dd16552123ce73b63473 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 3 May 2022 12:38:01 -0400
Subject: [PATCH] merge

---
 src/layouts/address-lookup/address-lookup.vue |   2 +-
 .../license-plate-lookup.vue                  | 250 +++++++++++++-----
 src/layouts/vehicle-damage/vehicle-damage.vue |  14 +-
 src/layouts/vehicle-year/vehicle-year.vue     |   5 +-
 src/layouts/vin-lookup/vin-lookup.vue         |  76 ++++--
 src/mixins/analytics-mixin.js                 |  21 +-
 src/router/index.js                           |  17 ++
 7 files changed, 294 insertions(+), 91 deletions(-)

diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 895148575..103cc61fa 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -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));
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 59be19cbd..177f7f960 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -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,
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 862abaced..b099ca091 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -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(
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index fec51eafd..37becf5a7 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -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,
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index f2e31edad..b836454bc 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -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(
diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js
index c2c86c2dd..0279a0887 100644
--- a/src/mixins/analytics-mixin.js
+++ b/src/mixins/analytics-mixin.js
@@ -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) {
diff --git a/src/router/index.js b/src/router/index.js
index 9ffd28522..5b24b0205 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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;
\ No newline at end of file