Merge pull request #285 from Safelite/CSR-101-vin-lookup-page

Csr 101 vin lookup page WIP Placeholder page.

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.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

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

@@ -0,0 +1,102 @@
+<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 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;
+    },
+  },
+  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/styles/common-styles.scss

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