From 10bad18b5689e31e344b50aed9c3f3aaf74e0807 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 18 Mar 2022 12:18:43 -0400
Subject: [PATCH 1/4] WIP Do not merge.

---
 src/layouts/vin-lookup/vin-lookup.vue | 78 ++++++++++++++++++++++++++-
 1 file changed, 76 insertions(+), 2 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 8dbb6cdc9..2920be727 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,9 +1,8 @@
 <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>
     <Form
       @submit="onSubmit"
       @invalid-submit="onInvalidSubmit"
@@ -11,6 +10,27 @@
       v-slot="{ meta }"
       class="d-flex flex-column h-100"
     >
+    <textboxQuestion
+      labelText="Enter your VIN"
+      placeholderText=""
+      inputId="vin-input"
+      class="mt-5 mb-2"
+    />
+    <vinInformation
+      class="mb-5"
+    />
+    <textboxQuestion
+      labelText="Service ZIP"
+      placeholderText=""
+      inputID="zip-input"
+      class="mb-5"
+    />
+    <textboxQuestion
+      labelText="Email address"
+      placeholderText=""
+      inputID="email-input"
+      class="mb-5"
+    />
     <funnel-footer
       ref="funnelFooter"
       :isDisabled="!meta.valid"
@@ -27,6 +47,8 @@ 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";
+import vinInformation from "@/common-components/vin-information/vin-information";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -97,11 +119,63 @@ export default {
         this.$route
       );
     },
+    async forwardButtonAction(zip, plate) {
+      const zipValidation = await this.validateZip(zip);
+      const vinLookup = await this.lookupVin(plate);
+      if (!zipValidation.isServiceable) {
+        this.newServiceZipRequired = true;
+        return;
+      }
+      if (!vinLookup.vin) {
+        this.vinNotValid = true;
+        return;
+      }
+      if (vinLookup.vehicle.carId !== store.getters.vehicle.carId) {
+        this.vinDoesNotMatchCarId = true;
+        return;
+      }
+      const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
+        this.storeActions.GET_PARTS_OR_QUESTIONS,
+        {
+          carId: store.getters.vehicle.carId,
+          glassArray: store.getters.damage.glassToReplace,
+          zipCode: zip,
+          vin: vinLookup.vin
+        },
+        false
+      );
+      this.navigateForward(partsData);
+    },
+    navigateForward(partsData){
+        if(partsData.data.partsOrQuestions.partQuestions.length){
+            this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data);
+            return;
+        } else if(!partsData.data.partsOrQuestions.partQuestions.length && partsData.data.partsOrQuestions.parts.length > 1) {
+           this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
+           return;
+        } else {
+            this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route);
+        }
+    },
+    validateZip(zip) {
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.VALIDATE_ZIP,
+        { zip }
+      );
+    },
+    lookupVin(plate, state) {
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.LOOKUP_VIN_BY_PLATE,
+        { plate, state }
+      );
+    },
   },
   components: {
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
+    textboxQuestion,
+    vinInformation,
     funnelFooter,
     Form,
   },

From f4f27499aa438d5da1a29be70b23b98e34aaa760 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 24 Mar 2022 14:36:10 -0400
Subject: [PATCH 2/4] Fix footer gutter.

---
 src/common-components/funnel-footer/funnel-footer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 44afa5364..cb83ecae1 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/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

From 1569a152573bd1368327500999b612a2393f91a8 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 24 Mar 2022 15:17:13 -0400
Subject: [PATCH 3/4] Update path.

---
 src/layouts/vin-lookup/vin-lookup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 2920be727..2bc8a88e8 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -48,7 +48,7 @@ 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";
-import vinInformation from "@/common-components/vin-information/vin-information";
+import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

From 0dab72ad8475a352195aecda0e2f405094a71a5c Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 24 Mar 2022 15:52:10 -0400
Subject: [PATCH 4/4] Remove code/start over.

---
 src/layouts/vin-lookup/vin-lookup.spec.js | 168 +---------------------
 src/layouts/vin-lookup/vin-lookup.vue     | 146 -------------------
 2 files changed, 1 insertion(+), 313 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js
index 1db5c18a6..3d0843e10 100644
--- a/src/layouts/vin-lookup/vin-lookup.spec.js
+++ b/src/layouts/vin-lookup/vin-lookup.spec.js
@@ -1,167 +1 @@
-// 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 };
-}
+test.todo("some test to be written in the future");
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 2bc8a88e8..fc9058abf 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -3,41 +3,15 @@
     <funnelHeader ref="funnelHeader" />
     <vehicleBanner ref="vehicleBanner" />
     <funnelSubHeader ref="funnelSubHeader" />
-    <Form
-      @submit="onSubmit"
-      @invalid-submit="onInvalidSubmit"
-      ref="theForm"
-      v-slot="{ meta }"
-      class="d-flex flex-column h-100"
-    >
-    <textboxQuestion
-      labelText="Enter your VIN"
-      placeholderText=""
-      inputId="vin-input"
-      class="mt-5 mb-2"
-    />
     <vinInformation
       class="mb-5"
     />
-    <textboxQuestion
-      labelText="Service ZIP"
-      placeholderText=""
-      inputID="zip-input"
-      class="mb-5"
-    />
-    <textboxQuestion
-      labelText="Email address"
-      placeholderText=""
-      inputID="email-input"
-      class="mb-5"
-    />
     <funnel-footer
       ref="funnelFooter"
       :isDisabled="!meta.valid"
       @back-clicked="backButtonAction"
       @ForwardClicked="forwardButtonAction"
     />
-  </Form>
 </div>
 </template>
 
@@ -50,134 +24,14 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
 
-// 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
-      );
-    },
-    async forwardButtonAction(zip, plate) {
-      const zipValidation = await this.validateZip(zip);
-      const vinLookup = await this.lookupVin(plate);
-      if (!zipValidation.isServiceable) {
-        this.newServiceZipRequired = true;
-        return;
-      }
-      if (!vinLookup.vin) {
-        this.vinNotValid = true;
-        return;
-      }
-      if (vinLookup.vehicle.carId !== store.getters.vehicle.carId) {
-        this.vinDoesNotMatchCarId = true;
-        return;
-      }
-      const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
-        this.storeActions.GET_PARTS_OR_QUESTIONS,
-        {
-          carId: store.getters.vehicle.carId,
-          glassArray: store.getters.damage.glassToReplace,
-          zipCode: zip,
-          vin: vinLookup.vin
-        },
-        false
-      );
-      this.navigateForward(partsData);
-    },
-    navigateForward(partsData){
-        if(partsData.data.partsOrQuestions.partQuestions.length){
-            this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data);
-            return;
-        } else if(!partsData.data.partsOrQuestions.partQuestions.length && partsData.data.partsOrQuestions.parts.length > 1) {
-           this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
-           return;
-        } else {
-            this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route);
-        }
-    },
-    validateZip(zip) {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(
-        storeActions.VALIDATE_ZIP,
-        { zip }
-      );
-    },
-    lookupVin(plate, state) {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(
-        storeActions.LOOKUP_VIN_BY_PLATE,
-        { plate, state }
-      );
-    },
-  },
   components: {
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
-    textboxQuestion,
     vinInformation,
     funnelFooter,
-    Form,
   },
 };
 </script>