From 59d9199e38667e056873a9b78c4074570e647713 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Mar 2022 17:12:58 -0500
Subject: [PATCH 1/8] WIP Do not merge.

---
 src/layouts/vin-lookup/vin-lookup.spec.js     |  0
 src/layouts/vin-lookup/vin-lookup.vue         | 62 +++++++++++++++++++
 src/router/router-constants/fmgPage-values.js |  3 +-
 src/router/router-constants/routing-table.js  |  2 +-
 4 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/vin-lookup/vin-lookup.spec.js
 create mode 100644 src/layouts/vin-lookup/vin-lookup.vue

diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
new file mode 100644
index 000000000..26e451d72
--- /dev/null
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+    <funnelHeader ref="funnelHeader" />
+    <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
+    <funnelSubHeader ref="funnelSubHeader" />
+    <Form
+      @submit="onSubmit"
+      @invalid-submit="onInvalidSubmit"
+      ref="theForm"
+      v-slot="{ meta }"
+      class="vehicle-damage-form"
+    >
+    <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 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";
+
+// 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 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",
+  methods: {
+    arePagePrerequisitesValid() {
+      return true;
+    },
+  },
+  components: {
+    funnelHeader,
+    funnelFooter,
+    vehicleBanner,
+    funnelSubHeader,
+    Form,
+  },
+};
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
index 770c1f7b6..b648ae047 100644
--- a/src/router/router-constants/fmgPage-values.js
+++ b/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 };
\ No newline at end of file
+export { fmgPageValues };
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index c9dc7ba4d..9333d7c6c 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -59,7 +59,7 @@ const routingTable = [
       },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART,
-        destinationFmgPageValue: fmgPageValues.REVEAL,
+        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
       },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_MULTIPLE_PARTS,

From 2a8680914cd1e7a9bfcf597846fefcc2419e031a Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 10 Mar 2022 15:22:12 -0500
Subject: [PATCH 2/8] WIP

---
 src/layouts/vehicle-damage/vehicle-damage.vue |  8 ---
 src/layouts/vin-lookup/vin-lookup.vue         | 67 +++++++++++++++----
 src/styles/common-styles.scss                 |  8 ++-
 3 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 0eb11fbf0..20318695b 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -408,11 +408,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-  .vehicle-damage-form {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-</style>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 26e451d72..d5acbb1b2 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
-    <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
+    <vehicleBanner ref="vehicleBanner" />
     <funnelSubHeader ref="funnelSubHeader" />
     <Form
       @submit="onSubmit"
@@ -16,16 +16,16 @@
       @back-clicked="backButtonAction"
       @ForwardClicked="forwardButtonAction"
     />
-  </Form>
-</div>
+    </Form>
+  </div>
 </template>
 
 <script>
 // Components
 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 funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -42,18 +42,57 @@ defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_RE
 
 export default {
   name: "vin-lookup",
-  methods: {
-    arePagePrerequisitesValid() {
-      return true;
-    },
+  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
+      );
+    });
   },
-  components: {
-    funnelHeader,
-    funnelFooter,
-    vehicleBanner,
-    funnelSubHeader,
-    Form,
+methods: {
+  arePagePrerequisitesValid() {
+    return true;
   },
+},
+components: {
+  funnelHeader,
+  vehicleBanner,
+  funnelSubHeader,
+  funnelFooter,
+  Form,
+},
 };
 </script>
 
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 561b05b76..35a337103 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -35,4 +35,10 @@ body {
     overflow: hidden;
   }
 }
-// Hide horizontal scrollbar
+
+//Applies to <Form/> used for validation. Keeps footer stuck to the bottom.
+.vehicle-damage-form {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}

From 27ff640529056d060001cce806d7ad5e0df82d4b Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 10 Mar 2022 15:23:10 -0500
Subject: [PATCH 3/8] Update vin-lookup.vue

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

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index d5acbb1b2..3df005c30 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -3,6 +3,7 @@
     <funnelHeader ref="funnelHeader" />
     <vehicleBanner ref="vehicleBanner" />
     <funnelSubHeader ref="funnelSubHeader" />
+    <h1>VIN Lookup Placeholder Page</h1>
     <Form
       @submit="onSubmit"
       @invalid-submit="onInvalidSubmit"

From 549491cd846244613c4e666c7614ee9242861f27 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 10 Mar 2022 15:25:19 -0500
Subject: [PATCH 4/8] Add empty unit test. WIP

---
 src/layouts/vin-lookup/vin-lookup.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js
index e69de29bb..3d0843e10 100644
--- a/src/layouts/vin-lookup/vin-lookup.spec.js
+++ b/src/layouts/vin-lookup/vin-lookup.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

From d65a38b85a44191a798c346089c76b62dcb5f205 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 10 Mar 2022 15:30:18 -0500
Subject: [PATCH 5/8] Code format.

---
 src/layouts/vin-lookup/vin-lookup.vue | 52 +++++++++++++--------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 3df005c30..6b86ec4f5 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -5,20 +5,20 @@
     <funnelSubHeader ref="funnelSubHeader" />
     <h1>VIN Lookup Placeholder Page</h1>
     <Form
-      @submit="onSubmit"
-      @invalid-submit="onInvalidSubmit"
-      ref="theForm"
-      v-slot="{ meta }"
-      class="vehicle-damage-form"
+    @submit="onSubmit"
+    @invalid-submit="onInvalidSubmit"
+    ref="theForm"
+    v-slot="{ meta }"
+    class="vehicle-damage-form"
     >
     <funnel-footer
-      ref="funnelFooter"
-      :isDisabled="!meta.valid"
-      @back-clicked="backButtonAction"
-      @ForwardClicked="forwardButtonAction"
+    ref="funnelFooter"
+    :isDisabled="!meta.valid"
+    @back-clicked="backButtonAction"
+    @ForwardClicked="forwardButtonAction"
     />
-    </Form>
-  </div>
+  </Form>
+</div>
 </template>
 
 <script>
@@ -47,10 +47,10 @@ export default {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
     const damageOptionsPromise =
-      baseMixin.methods.dispatchNonBlockingStoreAction(
-        storeActions.GET_DAMAGE_OPTIONS,
-        { carId: store.getters.vehicle.carId }
-      );
+    baseMixin.methods.dispatchNonBlockingStoreAction(
+      storeActions.GET_DAMAGE_OPTIONS,
+      { carId: store.getters.vehicle.carId }
+    );
 
     // Settle promises and get results
     const promiseResultMap = [
@@ -82,18 +82,18 @@ export default {
       );
     });
   },
-methods: {
-  arePagePrerequisitesValid() {
-    return true;
+  methods: {
+    arePagePrerequisitesValid() {
+      return true;
+    },
+  },
+  components: {
+    funnelHeader,
+    vehicleBanner,
+    funnelSubHeader,
+    funnelFooter,
+    Form,
   },
-},
-components: {
-  funnelHeader,
-  vehicleBanner,
-  funnelSubHeader,
-  funnelFooter,
-  Form,
-},
 };
 </script>
 

From c19bb1cf7969ade99d069fb0dc85e69170fea8d2 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 10 Mar 2022 15:42:17 -0500
Subject: [PATCH 6/8] Add classes inline, remove from global.

---
 src/layouts/vin-lookup/vin-lookup.vue | 2 +-
 src/styles/common-styles.scss         | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 6b86ec4f5..aa179439a 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -9,7 +9,7 @@
     @invalid-submit="onInvalidSubmit"
     ref="theForm"
     v-slot="{ meta }"
-    class="vehicle-damage-form"
+    class="d-flex flex-column h-100"
     >
     <funnel-footer
     ref="funnelFooter"
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 35a337103..8425a3021 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -35,10 +35,3 @@ body {
     overflow: hidden;
   }
 }
-
-//Applies to <Form/> used for validation. Keeps footer stuck to the bottom.
-.vehicle-damage-form {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}

From 98e3b7026a9879bfd222948d3671070cec0a7575 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 10 Mar 2022 15:56:32 -0500
Subject: [PATCH 7/8] Update route per Carl's comment.

---
 src/router/router-constants/routing-table.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 9333d7c6c..3bd937c41 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -59,7 +59,7 @@ const routingTable = [
       },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART,
-        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+        destinationFmgPageValue: fmgPageValues.REVEAL,
       },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_MULTIPLE_PARTS,
@@ -84,6 +84,19 @@ const routingTable = [
       },
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.REVEAL,
+    maps: [
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+      },
+      {
+        scenario: navigationScenarios.SELECTED_PARTS,
+        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+      },
+    ],
+  },
 ];
 
 export { routingTable };

From 5370e1ce86b3a707b8354f918256f4e0767cab13 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 10 Mar 2022 16:10:20 -0500
Subject: [PATCH 8/8] Update routing.

---
 src/router/router-constants/routing-table.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 3bd937c41..c9dc7ba4d 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -84,19 +84,6 @@ const routingTable = [
       },
     ],
   },
-  {
-    fmgPageValue: fmgPageValues.REVEAL,
-    maps: [
-      {
-        scenario: navigationScenarios.CLICKED_BACK,
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-      },
-      {
-        scenario: navigationScenarios.SELECTED_PARTS,
-        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
-      },
-    ],
-  },
 ];
 
 export { routingTable };