Merge branch 'develop' into feature/SSR-169

.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/common-components/button-question/button-question.vue

@@ -134,7 +134,7 @@ export default {
         if (this.isOverflowScrollable) {
           return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
         }
-        else if (this.buttonType == "listCard") {
+        else if (this.buttonTypeString === "listCard") {
           return "w-100";
         }
         else {

src/layouts/part-questions/part-questions.vue

@@ -27,13 +27,14 @@ import { Form, defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
 
 // DEFINE VALIDATION RULES
 defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
     name: "part-questions",
-    mixins: [vehicleQuestionsMixin],
+    mixins: [BaseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -68,6 +68,7 @@ import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-que
 import alert from "@/ux-components/alert/alert";
 
 // Supporting files
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { Form, defineRule } from "vee-validate";
@@ -82,6 +83,7 @@ defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_RE
 
 export default {
     name: "vehicle-damage",
+    mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@@ -129,7 +131,7 @@ export default {
             selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
         };
     },
-    methods: {
+    methods: {        
         arePagePrerequisitesValid() {
             if (this.mainStore.order.vehicle.carId) {
                 return true;
@@ -297,7 +299,7 @@ export default {
             return this.navigateForward();
         },
 
-        navigateForward() {
+        navigateForward() {            
             // If vin already exists, navigate directly to vin-lookup
             if (useMainStore().order.vehicle.vin) {
                 this.$router.navigate(

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>

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -57,10 +57,11 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { issPageValues } from "@/router/router-constants/issPage-values";
 import { Form } from "vee-validate";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
 
 export default {
     name: "vehicle-parts",
-    mixins: [vehicleQuestionsMixin],
+    mixins: [BaseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

src/mixins/base-form-mixin.js

@@ -0,0 +1,25 @@
+export default {
+  methods: {
+    onSubmit() {
+      /** DO NOT REMOVE;
+       *  Needed to prevent default form submit behavior.
+       *  Cannot use .prevent modifier for vee-validate Form.
+      */
+    },
+    onInvalidSubmit({ errors }) {
+      /**
+       * Identify the first error field and put focus on it
+       * get error names array
+      */
+      const errorNames = errors ? Object.keys(errors) : [];
+      const firstErrorEl = errorNames[0];
+      if (firstErrorEl) {
+        const qsString = `[data-focus-target="${firstErrorEl}"]`;
+        const el = document.querySelector(qsString);
+        if (el !== null) {
+          el.focus();
+        }
+      }
+    },
+  },
+};