Merge branch 'feature/CSR-92' into CSR-101-vin-lookup

jest.config.js

@@ -13,7 +13,6 @@ module.exports = {
     "!src/helpers/unit-test-helper.js",
     "!src/layouts/component-test/component-test.vue",
     "!src/layouts/form-test/form-test.vue",
-    "!src/layouts/license-plate-lookup/license-plate-lookup.vue",
     "!src/layouts/vin-lookup/vin-lookup.vue",
     "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue",
     "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",

src/helpers/damage-helper.js

@@ -1,10 +1,19 @@
 import store from "@/store";
+import baseMixin from "@/mixins/base-mixin.js";
+import { storeActions } from "@/constants/store-actions";
 
 export function getDamageString() {
     return store.getters.damage.glassToReplace.length > 1 ? "match" : store.getters.damage.glassToReplace[0].location;
 }
 
-export function compareGlassOptions(newOptions, currentOptions){
+export async function isGlassAvailableForCarId(carId){
+    const newGlassOptions = await baseMixin.methods.dispatchNonBlockingStoreAction(
+      storeActions.GET_DAMAGE_OPTIONS,
+      { carId: carId }
+    );
+
+    const currentGlassOptions = store.getters.damage.glassToReplace;
+
     const optionsMap = {
       Windshield: "windshieldOptions",
       Driver: "driverSideOptions",
@@ -12,11 +21,11 @@ export function compareGlassOptions(newOptions, currentOptions){
       Rear: "backGlassOptions"
     }
 
-    for(const option of currentOptions){
+    for(const option of currentGlassOptions){
-      if(!newOptions[optionsMap[option.location]].availableReplacementOptions.includes(option.name)){
+      if(!newGlassOptions.data[optionsMap[option.location]].availableReplacementOptions.includes(option.name)){
-        return true;
+        return false;
       } 
     }
 
-    return false;
+    return true;
   }

src/helpers/heritage-integration/navigation-helper.js

@@ -53,6 +53,21 @@ export async function navigateToHeritageFunnel() {
     );
 }
 
+export async function navigateAfterSaveToHeritageFunnel(currentRoute) {
+    const currentComponent = currentRoute.matched[0].components;
+    currentComponent.default.methods.resetDependentState();
+    // Create the order (or save existing order) when navigating to Heritage Funnel.
+    await saveOrder();
+
+    router.navigateToExternalUrl(
+        externalUrls.HERITAGE_FUNNEL,
+        {
+            corid: store.getters.order.referralCorrelationId,
+            src: "concept-funnel"
+        }
+    );
+}
+
 /*
     Logic for getting the last "valid" page a user visited.
 */
@@ -78,7 +93,7 @@ async function getLatestPageForRedirection() {
         return fmgPageValues.VEHICLE_DAMAGE;
     } else {
         if (store.getters.vehicle.vin) {
-            return fmgPageValues.VIN_LOOKUP;
+            return fmgPageValues.LICENSE_PLATE_LOOKUP;
         } else {
             return fmgPageValues.ESTIMATE;
         }

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -0,0 +1,135 @@
+// Components
+import vehicleDamage from "@/layouts/license-plate-lookup/license-plate-lookup.vue";
+
+// Supporting Files
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import baseMixin from "@/mixins/base-mixin";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+import store from "@/store";
+import { validate } from "vee-validate";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+  fetchCmsContentForPage: jest.fn(),
+}));
+
+// Mock Store
+jest.mock("@/store", () => ({
+  commit: jest.fn(),
+  dispatch: jest.fn(),
+  getters: {
+    vehicle: {
+      carId: "C00000000",
+      image: "test.jpg",
+      payment: {
+        insuranceCoverage: {
+          isVerified: false
+        }
+      }
+    },
+    eventBusItem: jest.fn(),
+    damage: {
+      glassToReplace: [] 
+    },
+  },
+}));
+
+describe("license-plate-lookup.vue", () => {
+  test("CarId set, arePagePrerequisitesValid should be true ", async () => {
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+    await nextTick();
+
+    //Assert
+    expect(arePagePrerequisitesValid).toBe(true);
+  });
+});
+
+describe("license-plate-lookup.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    wrapper.vm.backButtonAction();
+
+    //Assert
+    expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+
+  });
+});
+
+
+function setupMocks({
+  pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {
+    router: {
+      navigate: jest.fn(),
+    },
+    store: {
+      getters: {
+        vehicle: {},
+        payment: { insuranceCoverage: { isVerified: false } },
+      },
+    },
+  },
+}) {
+  //Mock api responses
+  baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
+  const apiResponses = {
+    cmsContent: {
+      FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
+      VehicleBannerWidget: {
+        GenericVehicleImage:
+          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+      },
+      FunnelHeaderWidget: {
+        LogoImage:
+          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+      },
+    },
+  };
+
+  const apiPromise = Promise.resolve(apiResponses);
+
+  settleAllPromises.mockImplementation(() => apiPromise);
+  fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+
+  const mountOptions = getMountOptions(mountOptionsMockData);
+  mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
+
+  const wrapper = shallowMount(vehicleDamage, mountOptions);
+
+  wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+
+  return { wrapper, apiPromise };
+}

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

@@ -11,42 +11,42 @@
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" inputId="license_plate" disableAutoFill validationRules="license-plate-required"  />
+          <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" inputId="license_plate" validationRules="license-plate-required"  />
         </div>
       </div>
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="RegistrationZip" v-model="zip" inputId="zip" mask="#####" disableAutoFill validationRules="zip-required" />
+          <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
         </div>
       </div>
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" disableAutoFill validationRules="email-address-required|email-address-format" />
+          <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
         </div>
       </div>
       <alert
         class="my-3"
         :manualHeadline="NoServiceZipHeader"
         :manualCopy="NoServiceZipBody"
-        v-if="newServiceZipRequired"
+        v-if="!isRegistrationZipIServicable"
         alertClass="alert-danger"
       />
       <alert
         class="my-3"
         cmsWidgetName="NoMatchAlertWidget"
-        v-if="vinNotValid"
+        v-if="!isVinValid"
         alertClass="alert-danger"
       />
       <alert
         class="my-3"
         :manualHeadline="MatchedDifferentVehicleAlertHeader"
         :manualCopy="MatchedDifferentVehicleAlertBody"
-        v-if="vinDoesNotMatchCarId"
+        v-if="isCarIdDifferent"
         alertClass="alert-warning"
       />
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion v-if="newServiceZipRequired" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" disableAutoFill  validationRules="zip-required" />
+          <textboxQuestion v-if="!isRegistrationZipIServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip"  validationRules="zip-required" />
         </div>
       </div>
       <funnelFooter
@@ -77,10 +77,10 @@ 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, compareGlassOptions } 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 { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 // DEFINE VALIDATION RULES
 defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
@@ -115,17 +115,16 @@ export default {
   },
   data() {
     return {
-      newServiceZipRequired: false,
+      isRegistrationZipIServicable: true,
-      vinNotValid: false,
+      isVinValid: true,
-      vinDoesNotMatchCarId: false,
+      isCarIdDifferent: false,
       licensePlate: '',
-      zip: '',
+      registrationZip: '',
       email: '',
       serviceZip: '',
-      carIdEntered: '',
+      previouslyEnteredCarId: '',
       customAlertData: {},
-      newCarId: false,
+      isSelectedGlassAvailableForVehicle: true,
-      glassOptionsMismatch: false,
     };
   },
   computed: {
@@ -140,19 +139,22 @@ export default {
       return text;
     },
     NoServiceZipHeader(){
-      let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:zip}", this.zip);
+      let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:zip}", this.registrationZip);
 
       return text;
     },
     NoServiceZipBody(){
       return this.getCmsContent("NoServiceZipWidget", "BodyText");
-    }
+    },
   },
   methods: {
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
     },
     resetDependentState() {
+      if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
+          store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+      }
       store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
       store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null);
       store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null);
@@ -163,36 +165,31 @@ export default {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     async forwardButtonAction() {
-      const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.zip);
+      const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.registrationZip);
       if (!zipValidation.data.isServiceable) {
-        this.customAlertData.zip = this.zip;
         this.$refs.funnelFooter.removeLoader();
-        this.vinDoesNotMatchCarId = false;
+        this.isVinValid = true;
-        this.vinNotValid = false;
+        this.isRegistrationZipIServicable = false;
-        this.newServiceZipRequired = true;
+        this.isCarIdDifferent = false;
         return;
       }
 
       const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => {
         this.$refs.funnelFooter.removeLoader();
-        this.vinDoesNotMatchCarId = false;
+        this.isVinValid = false;
-        this.vinNotValid = true;
+        this.isCarIdDifferent = false;
         return;
       });
 
-      if ((vinLookup.data.vehicle.carId !== store.getters.vehicle.carId) && (vinLookup.data.vehicle.carId !== this.carIdEntered)) {
+      this.isCarIdDifferent = vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
-        this.carIdEntered = vinLookup.data.vehicle.carId;
+
+      if (this.isCarIdDifferent && (vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId)) {
+        this.previouslyEnteredCarId = vinLookup.data.vehicle.carId;
         this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
-        this.newCarId = true;
+        this.$refs.funnelFooter.updateButtonText(`Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`);
-        const glassOptions = await baseMixin.methods.dispatchNonBlockingStoreAction(
+        this.isVinValid = true;
-        storeActions.GET_DAMAGE_OPTIONS,
+        this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.vehicle.carId);
-        { 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;
       }
 
@@ -202,8 +199,8 @@ export default {
         this.storeActions.GET_PARTS_OR_QUESTIONS,
         {
           carId: vinLookup.data.vehicle.carId,
-          glassArray: store.getters.damage.glassToReplace ? store.getters.damage.glassToReplace : [],
+          glassArray: this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle ? [] : store.getters.damage.glassToReplace,
-          zipCode: this.serviceZip ? this.serviceZip : this.zip,
+          zipCode: this.serviceZip ? this.serviceZip : this.registrationZip,
           vin: vinLookup.data.vin
         },
         false
@@ -211,11 +208,11 @@ export default {
       this.navigateForward(partsData);
     },
     navigateForward(partsData){
-        if(this.newCarId && this.glassOptionsMismatch){
+        if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
             this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, partsData.data);
             return;
         } else {
-            navigateToHeritageFunnel();
+            navigateAfterSaveToHeritageFunnel(this.$route);
             return;
         }
     },
@@ -232,7 +229,7 @@ export default {
       );
     },
     updateCustomerInfo(vin, vehicleInfo, registrationState) {
-      if(this.newCarId && this.glassOptionsMismatch){
+      if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
           store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
       }
       store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
@@ -247,7 +244,7 @@ export default {
       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.zip);
+      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);
     },
@@ -255,6 +252,12 @@ export default {
   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: {

src/store/index.js

@@ -141,9 +141,21 @@ export const mutations = {
   updateRegistrationZipCode(state, reistrationZipCode){
     state.order.vehicle.registration.zipCode = reistrationZipCode;
   },
+  updateRegistrationAddress(state, reistrationAddress){
+    state.order.vehicle.registration.address = reistrationAddress;
+  },
   updateServiceLocationZip(state, serviceLocationZip){
     state.order.serviceLocation.zip = serviceLocationZip;
   },
+  updateRegistrationCity(state, serviceCity){
+    state.order.serviceLocation.city = serviceCity;
+  },
+  updateRegistrationFirstName(state, firstName){
+    state.order.serviceLocation.firstName = firstName;
+  },
+  updateRegistrationLastName(state, lastName){
+    state.order.serviceLocation.lastName = lastName;
+  },
   updateCustomerEmailAddress(state, customerEmailAddress){
     state.order.customer.emailAddress = customerEmailAddress;
   },