Finishing up license plate lookup page

src/common-components/funnel-footer/funnel-footer.vue

@@ -92,6 +92,9 @@ export default {
     },
     removeLoader(){
       this.$refs.buttonMain.removeLoader();
+      document.onkeydown = function (e) {
+        return true;
+      };
     },
     buttonClick() {
       //prevent keyboard input after button click

src/helpers/damage-helper.js

@@ -2,4 +2,21 @@ import store from "@/store";
 
 export function getDamageString() {
     return store.getters.damage.glassToReplace.length > 1 ? "match" : store.getters.damage.glassToReplace[0].location;
-}
+}
+
+export function compareGlassOptions(newOptions, currentOptions){
+    const optionsMap = {
+      Windshield: "windshieldOptions",
+      Driver: "driverSideOptions",
+      Passenger: "passengerSideOptions",
+      Rear: "backGlassOptions"
+    }
+
+    for(const option of currentOptions){
+      if(!newOptions[optionsMap[option.location]].availableReplacementOptions.includes(option.name)){
+        return true;
+      } 
+    }
+
+    return false;
+  }

src/helpers/damage-helper.spec.js

@@ -1,4 +1,4 @@
-import {getDamageString} from "./damage-helper";
+import {getDamageString, compareGlassOptions} from "./damage-helper";
 
 jest.mock("@/store", () => ({
     getters: {damage: {
@@ -12,4 +12,26 @@ jest.mock("@/store", () => ({
       const damage = getDamageString();
       expect(damage).toEqual("TEST")
     });
+  });
+
+  describe("damage-helper.js", () => {
+    it("Should return false if no mismatches between each array", () => {
+      const newOptions = {
+        windshieldOptions: {availableReplacementOptions: ["windshield"]}
+      }
+      const currentOptions = [{location: "Windshield", name: "windshield"}];
+      const misMatch = compareGlassOptions(newOptions, currentOptions);
+      expect(misMatch).toEqual(false);
+    });
+  });
+
+  describe("damage-helper.js", () => {
+    it("Should return true if there are any mismatches between arrays", () => {
+      const newOptions = {
+        windshieldOptions: {availableReplacementOptions: ["window"]}
+      }
+      const currentOptions = [{location: "Windshield", name: "windshield"}];
+      const misMatch = compareGlassOptions(newOptions, currentOptions);
+      expect(misMatch).toEqual(true);
+    });
   });

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -77,7 +77,7 @@ 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 } from "@/helpers/damage-helper";
+import { getDamageString, compareGlassOptions } from "@/helpers/damage-helper";
 import { required, regex } from "@/helpers/validation-rules";
 import { Form, defineRule } from "vee-validate";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
@@ -122,31 +122,25 @@ export default {
       zip: '',
       email: '',
       serviceZip: '',
-      customAlertData: {}
+      carIdEntered: '',
+      customAlertData: {},
+      newCarId: false,
+      glassOptionsMismatch: false,
     };
   },
   computed: {
     MatchedDifferentVehicleAlertHeader(){
-      let text = this.getCmsContent("MatchedDifferentVehicleAlertWidget", "HeadlineText");
+      let text = this.getCmsContent("MatchedDifferentVehicleAlertWidget", "HeadlineText").replaceAll("{custom:damage}", getDamageString());
-      // Replace all instances where custom data is implemented
-      text = text.replaceAll("{custom:damage}", getDamageString());
 
       return text;
     },
     MatchedDifferentVehicleAlertBody(){
-      let text = this.getCmsContent("MatchedDifferentVehicleAlertWidget", "BodyText");
+      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);
-      // Replace all instances where custom data is implemented
-      text = text.replaceAll("{custom:damage}", getDamageString());
-      text = text.replaceAll("{custom:plateLookupYear}", this.customAlertData?.vehicleInfo?.year);
-      text = text.replaceAll("{custom:plateLookupMake}", this.customAlertData?.vehicleInfo?.make);
-      text = text.replaceAll("{custom:plateLookupModel}", this.customAlertData?.vehicleInfo?.model);
 
       return text;
     },
     NoServiceZipHeader(){
-      let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText");
+      let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:zip}", this.zip);
-      // Replace all instances where custom data is implemented
-      text = text.replaceAll("{custom:zip}", this.zip);
 
       return text;
     },
@@ -173,54 +167,52 @@ export default {
       if (!zipValidation.data.isServiceable) {
         this.customAlertData.zip = this.zip;
         this.$refs.funnelFooter.removeLoader();
+        this.vinDoesNotMatchCarId = false;
+        this.vinNotValid = false;
         this.newServiceZipRequired = true;
         return;
-      } 
+      }
+
       const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => {
         this.$refs.funnelFooter.removeLoader();
+        this.vinDoesNotMatchCarId = false;
         this.vinNotValid = true;
         return;
       });
-      if (vinLookup.data.vehicle.carId !== store.getters.vehicle.carId && !this.vinDoesNotMatchCarId) {
+
+      if ((vinLookup.data.vehicle.carId !== store.getters.vehicle.carId) && (vinLookup.data.vehicle.carId !== this.carIdEntered)) {
+        this.carIdEntered = vinLookup.data.vehicle.carId;
         this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
+        this.newCarId = true;
+        const glassOptions = await baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.GET_DAMAGE_OPTIONS,
+        { carId: vinLookup.data.vehicle.carId }
+        );
+        this.glassOptionsMismatch = compareGlassOptions(glassOptions.data, store.getters.damage.glassToReplace);
         this.$refs.funnelFooter.updateButtonText(`Continue with ${vinLookup.data.vin} ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`);
         this.$refs.funnelFooter.removeLoader();
+        this.vinNotValid = false;
         this.vinDoesNotMatchCarId = true;
-        //return;
+        return;
       }
 
-      let vin;
+      this.updateCustomerInfo(vinLookup.data.vin, vinLookup.data.vehicle, zipValidation.data.state);
-      let vehicleInfo;
-      let glassOptions;
-
-      if(this.vinDoesNotMatchCarId) {
-        vin = vinLookup.data.vin;
-        vehicleInfo = vinLookup.data.vehicle;
-        glassOptions = store.dispatch(storeActions.GET_DAMAGE_OPTIONS, { carId: vinLookup.data.vehicle.carId }).data;
-      } else {
-        vin = store.getters.vehicle.vin;
-        vehicleInfo = store.getters.vehicle;
-        glassOptions = store.getters.damage.glassToReplace;
-      }
-
-      //this.updateCustomerInfo(vin, vehicleInfo, zipValidation.data.state);
 
       const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
         this.storeActions.GET_PARTS_OR_QUESTIONS,
         {
-          carId: vehicleInfo.carId,
+          carId: vinLookup.data.vehicle.carId,
-          glassArray: store.getters.damage.glassToReplace,
+          glassArray: store.getters.damage.glassToReplace ? store.getters.damage.glassToReplace : [],
           zipCode: this.serviceZip ? this.serviceZip : this.zip,
-          vin: vin
+          vin: vinLookup.data.vin
         },
         false
       );
-      console.log(partsData)
+      this.navigateForward(partsData);
-      //this.navigateForward(partsData);
     },
     navigateForward(partsData){
-        if(partsData.data){
+        if(this.newCarId && this.glassOptionsMismatch){
-            this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data);
+            this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, partsData.data);
             return;
         } else {
             navigateToHeritageFunnel();
@@ -240,9 +232,9 @@ export default {
       );
     },
     updateCustomerInfo(vin, vehicleInfo, registrationState) {
-      // if(vehicleDamage){
+      if(this.newCarId && this.glassOptionsMismatch){
-      //     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_YEAR, vehicleInfo.year);
       store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make);
@@ -260,6 +252,11 @@ export default {
       store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
     },
   },
+  watch: {
+        licensePlate() {
+            this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
+        }
+    },
   components: {
     Form,
     funnelHeader,

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -162,16 +162,16 @@ export default {
     getDamageLocationsFromStore() {
       var glassSelections = [];
 
-      if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD }) ||
+      if (store.getters.damage.glassToReplace?.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD }) ||
           store.getters.damage.isRepair) {
           glassSelections.push(damageLocationsSelected.WINDSHIELD);
       }
-      if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.DRIVER ||
+      if (store.getters.damage.glassToReplace?.some(glass => { return glass.location === damageLocationsSelected.DRIVER ||
           glass.location === damageLocationsSelected.PASSENGER })) {
           glassSelections.push(damageLocationsSelected.SIDEDOOR);
       }
 
-      if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.REAR })) {
+      if (store.getters.damage.glassToReplace?.some(glass => { return glass.location === damageLocationsSelected.REAR })) {
           glassSelections.push(damageLocationsSelected.REARWINDOW);
       }
 
@@ -184,19 +184,19 @@ export default {
       if (store.getters.damage.isRepair === undefined) return windshieldOptions;
 
       if (!store.getters.damage.isRepair) {
-        if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD &&
+        if (store.getters.damage.glassToReplace?.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD &&
             glass.name === damageLocationsSelected.SINGLE })) {
             windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
             windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
         }
 
-        if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD &&
+        if (store.getters.damage.glassToReplace?.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD &&
             glass.name === damageLocationsSelected.DRIVER })) {
             windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
             windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
         }
 
-        if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD &&
+        if (store.getters.damage.glassToReplace?.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD &&
             glass.name === damageLocationsSelected.PASSENGER })) {
             windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
             windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
@@ -214,11 +214,11 @@ export default {
 
     getDoorSidesFromStore() {
       var doorSides = [];
-      if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.DRIVER })){
+      if (store.getters.damage.glassToReplace?.some(glass =>  { return glass.location === damageLocationsSelected.DRIVER })){
           doorSides.push(damageLocationsSelected.DRIVERSIDE);
       }
 
-      if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.PASSENGER })){
+      if (store.getters.damage.glassToReplace?.some(glass =>  { return glass.location === damageLocationsSelected.PASSENGER })){
           doorSides.push(damageLocationsSelected.PASSENGERSIDE);
       }
 
@@ -228,7 +228,7 @@ export default {
     getDriverSideReplaceOptionsFromStore() {
       var driverSideReplaceOptions = [];
 
-      store.getters.damage.glassToReplace.forEach(glass => {
+      store.getters.damage.glassToReplace?.forEach(glass => {
         if (glass.location === damageLocationsSelected.DRIVER){
           driverSideReplaceOptions.push(glass.name);
         }
@@ -240,7 +240,7 @@ export default {
     getPassengerSideReplaceOptionsFromStore() {
       var passengerSideReplaceOptions = [];
 
-      store.getters.damage.glassToReplace.forEach(glass => {
+      store.getters.damage.glassToReplace?.forEach(glass => {
         if (glass.location === damageLocationsSelected.PASSENGER){
           passengerSideReplaceOptions.push(glass.name);
         }
@@ -252,7 +252,7 @@ export default {
     getRearReplaceOptionsFromStore(){
       var rearReplaceOptions = [];
 
-      store.getters.damage.glassToReplace.forEach(glass => {
+      store.getters.damage.glassToReplace?.forEach(glass => {
         if (glass.location === damageLocationsSelected.REAR){
           rearReplaceOptions.push(glass.name);
         }

src/router/router-constants/routing-table.js

@@ -141,6 +141,10 @@ const routingTable = [
         scenario: navigationScenarios.CONTINUING_WITH_SINGLE_PART,
         destinationFmgPageValue: fmgPageValues.REVEAL,
       },
+      {
+        scenario: navigationScenarios.CLICKED_FORWARD,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+      },
     ],
   },
 ];

src/store/index.js

@@ -132,6 +132,21 @@ export const mutations = {
   updateInsuranceVerifiedStatus(state, isVerified) {
     state.order.payment.insuranceCoverage.isVerified = isVerified;
   },
+  updateRegistrationLicensePlate(state, licensePlate){
+    state.order.vehicle.registration.licensePlate = licensePlate;
+  },
+  updateRegistrationState(state, registrationState){
+    state.order.vehicle.registration.state = registrationState;
+  },
+  updateRegistrationZipCode(state, reistrationZipCode){
+    state.order.vehicle.registration.zipCode = reistrationZipCode;
+  },
+  updateServiceLocationZip(state, serviceLocationZip){
+    state.order.serviceLocation.zip = serviceLocationZip;
+  },
+  updateCustomerEmailAddress(state, customerEmailAddress){
+    state.order.customer.emailAddress = customerEmailAddress;
+  },
 
 
   // EVENT BUS MUTATIONS