Feature/Digital/SSR-174

.eslintrc.js

@@ -4,7 +4,9 @@ module.exports = {
     'plugin:vue/vue3-strongly-recommended'
   ],
   rules: {
-    'linebreak-style': 'off'
+    'linebreak-style': 'off',
+    'vue/component-definition-name-casing': ['warn', 'kebab-case'],
+    'vue/require-default-prop': 'off'
   },
   settings: {
     'import/resolver': {

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -0,0 +1,80 @@
+<template>
+  <VeeValidateForm>
+    <div class="page-container-grouped-styles overflow-auto">
+      <SiteHeader
+        cms-widget-name="SiteHeaderWidget"
+      />
+      <VehicleBanner
+        cms-widget-name="VehicleBannerWidget"
+        :display-generic-vehicle-image="false"
+      />
+      <SiteSubHeader
+        cms-widget-name="SiteSubHeaderWidget"
+      />
+      <div class="fade-on-route-transition sub-container make-tall">
+        <VinLookupMethods
+          v-model="selectedVinLookupMethod"
+          cms-widget-name="VINLookupMethod"
+          ref="VinLookupMethods"
+        />
+        <SiteFooter
+          cms-widget-name="SiteFooterWidget"
+        />
+      </div>
+    </div>
+  </VeeValidateForm>
+</template>
+<script>
+// Import Supporting Files
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { settleAllPromises } from '@/helpers/layout-helper';
+import { Form } from 'vee-validate';
+
+// Import Component
+import SiteFooter from '@/common-components/site-footer/site-footer.vue';
+import SiteHeader from '@/common-components/site-header/site-header.vue';
+import SiteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import VehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import VinLookupMethods from './vin-lookup-methods/vin-lookup-methods.vue';
+
+export default {
+  name: 'vehicle-lookup',
+  components: {
+    VeeValidateForm: Form,
+    SiteFooter,
+    SiteHeader,
+    SiteSubHeader,
+    VehicleBanner,
+    VinLookupMethods,
+  },
+  data() {
+    return {
+      selectedVinLookupMethod: null,
+    };
+  },
+  async beforeRouteEnter(to, from, next) {
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: 'cmsContent',
+        promise: cmsContentPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+      vm.$refs.VinLookupMethods.initializeComponent();
+    });
+  },
+  methods: {
+    arePagePrerequisitedValid() {
+      return true;
+    },
+    resetDependentState() {},
+  },
+};
+</script>

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

@@ -0,0 +1,65 @@
+<template>
+  <ButtonQuestion
+    v-model="selectedValue"
+    :answers="answersFromCms"
+    button-type-string="listButton"
+    :question-text="questionTextFromCms"
+    is-required
+    validation-rules="option-required"
+  />
+</template>
+
+<script>
+
+// Import Other Supporting Files
+import { defineRule } from 'vee-validate';
+import { required } from '@/helpers/validation-rules';
+import { errorMessages } from '@/constants/error-messages';
+
+// Import Component
+import ButtonQuestion from '@/common-components/button-question/button-question.vue';
+
+// Define Validation Rules
+defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
+
+export default {
+  name: 'vin-lookup-methods',
+  data() {
+    return {
+      questionTextFromCms: '',
+      answersFromCms: [],
+    };
+  },
+  props: {
+    modelValue: String,
+    cmsWidgetName: {
+      type: String,
+      required,
+    },
+  },
+  emits: ['update:modelValue'],
+  components: {
+    ButtonQuestion,
+  },
+  computed: {
+    selectedValue: {
+      get() {
+        return this.modelValue;
+      },
+      set(newValue) {
+        this.$emit('update:modelValue', newValue);
+      },
+    },
+  },
+  methods: {
+    initializeComponent() {
+      this.questionTextFromCms = this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+
+      const answers = this.getCmsContent(this.cmsWidgetName, 'Answers');
+      if (Array.isArray(answers)) {
+        this.answersFromCms = answers;
+      }
+    },
+  },
+};
+</script>