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

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

@@ -14,7 +14,7 @@
         </div>
       </div>
     </div>
-    <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
+    <div class="container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
       <div class="row d-flex flex-row-reverse align-items-center">
         <div class="col button-col d-flex" id="stacked">
           <buttonMain

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

@@ -1,167 +1 @@
-// Components
+test.todo("some test to be written in the future");
-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

@@ -1,23 +1,17 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+  <div class="container-fluid shadow rounded-3 px-5 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
     <vehicleBanner ref="vehicleBanner" />
     <funnelSubHeader ref="funnelSubHeader" />
-    <h1>VIN Lookup Placeholder Page</h1>
+    <vinInformation
-    <Form
+      class="mb-5"
-      @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>
 
@@ -27,83 +21,17 @@ 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";
-
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
-// Supporting files
+import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
-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,
+    vinInformation,
     funnelFooter,
-    Form,
   },
 };
 </script>