Merge branch 'develop' into feature/CSR-319

src/layouts/vin-lookup/vin-lookup.spec.js

@@ -0,0 +1,167 @@
+// Components
+import vinLookup from "@/layouts/vin-lookup/vin-lookup.vue";
+import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+
+// Supporting Files
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import baseMixin from "@/mixins/base-mixin";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { mount, 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";
+import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
+
+// 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",
+    },
+    eventBusItem: jest.fn(),
+    damage: {
+      glassToReplace: []
+    },
+  },
+}));
+
+describe("vin-lookup.vue", () => {
+
+  test("Call resetDependentState", async() => {
+    const {wrapper} = setupMocks({});
+    wrapper.vm.resetDependentState();
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
+  });
+
+});
+
+// TEMP
+function setupMocks({
+  pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {
+    router: {
+      navigate: jest.fn(),
+    },
+    store: {
+      getters: {
+        vehicle: {},
+      },
+    },
+  },
+}) {
+  //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",
+      },
+    },
+    damageOptions: {
+      driverSideOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
+      passengerSideOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
+      windshieldOptions: {
+        availableReplacementOptions: ["Single", "Driver", "Passenger"],
+      },
+      backGlassOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
+    },
+  };
+
+  const apiPromise = Promise.resolve(apiResponses);
+
+  settleAllPromises.mockImplementation(() => apiPromise);
+  fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+  //Mock damage initialize methods
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+
+  damageLocationQuestion.methods = {
+    initializeComponent: jest.fn(),
+  };
+
+  sideDoorOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
+  windshieldOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
+  replaceOptionsQuestion.methods = {
+    initializeComponent: jest.fn(),
+    updateSelectedValues: jest.fn(),
+  };
+
+  funnelFooter.methods = {
+    initializeComponent: jest.fn(),
+  }
+
+  const mountOptions = getMountOptions(mountOptionsMockData);
+  mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
+
+  const wrapper = mount(vinLookup, mountOptions);
+
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent =
+    funnelHeader.methods.initializeComponent;
+
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent =
+    vehicleBanner.methods.initializeComponent;
+
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent =
+    funnelSubHeader.methods.initializeComponent;
+
+  const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" });
+  funnelFooterWrapper.vm.initializeComponent =
+    funnelFooter.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}

src/layouts/vin-lookup/vin-lookup.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+    <funnelHeader ref="funnelHeader" />
+    <vehicleBanner ref="vehicleBanner" />
+    <funnelSubHeader ref="funnelSubHeader" />
+    <h1>VIN Lookup Placeholder Page</h1>
+    <Form
+      @submit="onSubmit"
+      @invalid-submit="onInvalidSubmit"
+      ref="theForm"
+      v-slot="{ meta }"
+      class="d-flex flex-column h-100"
+    >
+    <funnel-footer
+      ref="funnelFooter"
+      :isDisabled="!meta.valid"
+      @back-clicked="backButtonAction"
+      @ForwardClicked="forwardButtonAction"
+    />
+  </Form>
+</div>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeActions } from "@/constants/store-actions";
+import store from "@/store";
+import { storeMutations } from "@/constants/store-mutations";
+import baseMixin from "@/mixins/base-mixin";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+// DEFINE VALIDATION RULES
+defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_REQUIRED));
+
+export default {
+  name: "vin-lookup",
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const damageOptionsPromise =
+    baseMixin.methods.dispatchNonBlockingStoreAction(
+      storeActions.GET_DAMAGE_OPTIONS,
+      { carId: store.getters.vehicle.carId }
+    );
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "damageOptions",
+        promise: damageOptionsPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.$refs.funnelHeader.initializeComponent(
+        resultMap.cmsContent.FunnelHeaderWidget
+      );
+      vm.$refs.vehicleBanner.initializeComponent(
+        resultMap.cmsContent.VehicleBannerWidget
+      );
+      vm.$refs.funnelSubHeader.initializeComponent(
+        resultMap.cmsContent.FunnelSubHeaderWidget
+      );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
+    });
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      return true;
+    },
+    resetDependentState() {
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
+    },
+    backButtonAction() {
+      // route to move backwards
+      this.$router.navigate(
+        this.navigationScenarios.CLICKED_BACK,
+        this.$route
+      );
+    },
+  },
+  components: {
+    funnelHeader,
+    vehicleBanner,
+    funnelSubHeader,
+    funnelFooter,
+    Form,
+  },
+};
+</script>
+
+<style lang="scss">
+
+</style>

src/router/router-constants/fmgPage-values.js

@@ -4,9 +4,10 @@ const fmgPageValues = {
   VEHICLE_MODEL: "vehicle-model",
   VEHICLE_STYLE: "vehicle-style",
   VEHICLE_DAMAGE: "vehicle-damage",
+  VIN_LOOKUP: "vin-lookup",
   VEHICLE_PARTS: "vehicle-parts",
   PART_QUESTIONS: "part-questions",
   REVEAL : "reveal",
 };
 
-export { fmgPageValues };
+export { fmgPageValues };

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

@@ -84,6 +84,32 @@ const routingTable = [
       },
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.REVEAL,
+    maps: [
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+      },
+      {
+        scenario: navigationScenarios.SELECTED_PARTS,
+        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+      },
+    ],
+  },
+  {
+    fmgPageValue: fmgPageValues.VIN_LOOKUP,
+    maps: [
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+      },
+      {
+        scenario: navigationScenarios.VIN_LOOKUP,
+        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
+      },
+    ],
+  },
 ];
 
 export { routingTable };

src/store/index.js

@@ -19,6 +19,21 @@ export const state = {
       imageUrl: null,
       imageVifNumber: null,
       imageColor: null,
+      registration: {
+        licensePlate: null,
+        address: null,
+        city: null,
+        state: null,
+        zipCode: null,
+        firstName: null,
+        lastName: null,
+      },
+    },
+    serviceLocation: {
+      zip: null,
+    },
+    customer: {
+      emailAddress: null,
     },
     damage: {
       isRepair: null,
@@ -81,6 +96,33 @@ export const mutations = {
   updatePageData(state, pageData){
     state.applicationUser.pageData[pageData.page] = pageData.data;
   },
+  updateRegistrationAddress(state, registrationAddress){
+    state.order.vehicle.registration.address = registrationAddress;
+  },
+  updateRegistrationCity(state, registrationCity){
+    state.order.vehicle.registration.city = registrationCity;
+  },
+  updateRegistrationState(state, registrationState){
+    state.order.vehicle.registration.state = registrationState;
+  },
+  updateRegistrationZipCode(state, registrationZipCode){
+    state.order.vehicle.registration.zipCode = registrationZipCode;
+  },
+  updateRegistrationFirstName(state, registrationFirstName){
+    state.order.vehicle.registration.firstName = registrationFirstName;
+  },
+  updateRegistrationLastName(state, registrationLastName){
+    state.order.vehicle.registration.lastName = registrationLastName;
+  },
+  updateRegistrationLicensePlate(state, registrationLicensePlate){
+    state.order.vehicle.registration.licensePlate = registrationLicensePlate;
+  },
+  updateServiceLocationZip(state, serviceLocationZip){
+    state.order.vehicle.serviceLocation.zip = serviceLocationZip;
+  },
+  updateCustomerEmailAddress(state, customerEmailAddress){
+    state.order.vehicle.customer.emailAddress = customerEmailAddress;
+  },
 
   // EVENT BUS MUTATIONS
   addEventToBus(state, event) {
@@ -115,7 +157,13 @@ export const mutations = {
     state.order.damage.glassToReplace = null;
   },
   resetRegistrationState(state) {
-
+    state.order.vehicle.registration.licensePlate = null;
+    state.order.vehicle.registration.address = null;
+    state.order.vehicle.registration.city = null;
+    state.order.vehicle.registration.state = null;
+    state.order.vehicle.registration.zipCode = null;
+    state.order.vehicle.registration.firstName = null;
+    state.order.vehicle.registration.lastName = null;
   },
   resetPartsState(state) {
     state.order.lineItems.glassParts = null;
@@ -288,4 +336,4 @@ export default createStore({
   mutations,
   getters,
   actions,
-});
+});

src/styles/common-styles.scss

@@ -35,4 +35,3 @@ body {
     overflow: hidden;
   }
 }
-// Hide horizontal scrollbar