WIP

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>

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>
 

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%;
+}