Merge branch 'feature/digital/SSR-178' into develop

src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue

@@ -0,0 +1,49 @@
+<template>
+    <div
+      id="vin-lookup-alerts-wrapper"
+      :class="wrapperCssClass"
+    >
+      <!-- <VehicleNotFoundAlert
+        v-if="isVehicleNotFoundVisible"
+      />
+      <VehicleNotMatchedAlert
+        v-else-if="isVehicleNotMatchedVisible"
+      /> -->
+    </div>
+  </template>
+  <script>
+  //import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
+  //import VehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
+  //import VehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
+  
+  export default {
+    name: 'license-plate-lookup-alerts',
+    components: {
+      //VehicleNotFoundAlert,
+      //VehicleNotMatchedAlert,
+    },
+    props: {
+      activeAlertType: {
+        type: String,
+        validator(value) {
+          const acceptedValues = [null];
+          acceptedValues.push(...Object.values(vehicleLookupAlertTypes));
+          return acceptedValues.includes(value);
+        },
+      },
+    },
+    computed: {
+      isVehicleNotFoundVisible() {
+        return this.activeAlertType === vehicleLookupAlertTypes.NOT_FOUND;
+      },
+      isVehicleNotMatchedVisible() {
+        return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
+      },
+      wrapperCssClass() {
+        return {
+          'mb-5': this.activeAlertType !== null,
+        };
+      },
+    },
+  };
+  </script>

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -1,24 +1,29 @@
 <template>  
-  <VeeValidateForm @submit="onSubmit" @invalid-submit="onInvalidSubmit">
+  <VeeValidateForm
+    @submit="onSubmit"
+    @invalid-submit="onInvalidSubmit" >
     <div class="page-container-grouped-styles overflow-auto">
-      <SiteHeader
+      <siteHeader cms-widget-name="SiteHeaderWidget" />
-        cms-widget-name="SiteHeaderWidget"
+      <vehicleBanner
-      />
-      <VehicleBanner
         cms-widget-name="VehicleBannerWidget"
-        :display-generic-vehicle-image="false"
+        :display-generic-vehicle-image="false" />
-      />
+      <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
-      <SiteSubHeader
-        cms-widget-name="SiteSubHeaderWidget"
-      />
       <div class="fade-on-route-transition sub-container make-tall">
-        <p>License Plate Lookup Page Placeholder</p>
+        <div class="mt-5">
-        <SiteFooter
+          <license-plate-question/>
+        </div>
+        <div class="mt-4">
+          <zip-question/>
+        </div>
+        <!-- <alert
+          cmsWidgetName="AlertVinNotFoundWidget"
+          alertClass="alert-danger"
+          :isDismissable="false" /> -->
+        <siteFooter
           cms-widget-name="SiteFooterWidget"
           :is-forward-action-disabled="isForwardActionDisabled"
           @back-clicked="backButtonAction"
-          @forward-clicked="forwardButtonAction"
+          @forward-clicked="forwardButtonAction" />
-        />
       </div>
     </div>
   </VeeValidateForm>
@@ -31,23 +36,36 @@ import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 
 // Import Component
-import SiteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteFooter from '@/common-components/site-footer/site-footer.vue';
-import SiteHeader from '@/common-components/site-header/site-header.vue';
+import siteHeader from '@/common-components/site-header/site-header.vue';
-import SiteSubHeader from '@/common-components/site-sub-header/site-sub-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 vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import textboxQuestion from '../../common-components/textbox-question/textbox-question.vue';
+import { required, regex } from '@/helpers/validation-rules';
+import { defineRule } from 'vee-validate';
+import { errorMessages } from '@/constants/error-messages';
+import LicensePlateQuestion from './license-plate-question/license-plate-question.vue';
+import ZipQuestion from './zip-question/zip-question.vue';
 
 export default {
   name: 'license-plate-lookup',
   mixins: [BaseFormMixin],
   components: {
     VeeValidateForm: Form,
-    SiteFooter,
+    siteFooter,
-    SiteHeader,
+    siteHeader,
-    SiteSubHeader,
+    siteSubHeader,
-    VehicleBanner,    
+    vehicleBanner,
+    textboxQuestion,
+    alert,
+    LicensePlateQuestion,
+    ZipQuestion,   
   },
   data() {
-    return {};
+    // return {
+    //   licensePlate: this.getLicensePlateFromStore(),
+    //   registrationZipCode: this.getRegistrationZipFromStore(),
+    // };
   },
   async beforeRouteEnter(to, from, next) {
     const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@@ -66,6 +84,9 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);      
     });
   },
+  props: {
+    validationRules: String,
+  },
   computed: {
     isForwardActionDisabled() {
       return true;
@@ -73,7 +94,10 @@ export default {
   },
   methods: {
     arePagePrerequisiteValid() {      
-      return true;
+      if (this.mainStore.order.vehicle.carId) {
+          return true;
+      }
+      return false;
     },
     backButtonAction() {
       /**
@@ -84,7 +108,16 @@ export default {
     forwardButtonAction() {
       return true;
     },
-    resetDependentState() {},
+    resetDependentState() {
+
+    },
+    // getLicensePlateFromStore() {
+    //   return this.mainStore.order.vehicle.registration.licensePlate;
+    // },
+    // getRegistrationZipFromStore() {
+    //   return this.mainStore.order.vehicle.registration.zipCode;
+    // }
+
   },
 };
 </script>

src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue

@@ -0,0 +1,43 @@
+<template>
+    <TextboxQuestion
+        inputId="license_plate"
+        cmsWidgetName="LicensePlateNumberQuestionWidget"
+        v-model="licensePlate"
+        isRequired 
+        disableAutoFill
+        validationRules="license-plate-required"
+    />
+</template>
+<script>
+  // Import Other Supporting File(s)
+  import { defineRule } from 'vee-validate';
+  import { regex, required } from '@/helpers/validation-rules';
+  import { errorMessages } from '@/constants/error-messages';
+  
+  // Import Component(s)
+  import TextboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
+  
+defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
+  
+export default {
+    name: 'license-plate-question',
+    props: {
+      modelValue: String,
+    },
+    emits: ['update:modelValue'],
+    components: {
+      TextboxQuestion,
+    },
+    computed: {
+      licensePlate: {
+        get() {
+          return this.modelValue;
+        },
+        set(newValue) {
+          this.$emit('update:modelValue', newValue);
+        },
+      },
+    },
+  };
+  </script>
+  

src/layouts/license-plate-lookup/zip-question/zip-question.vue

@@ -0,0 +1,44 @@
+<template>
+    <TextboxQuestion
+        inputId="zip"
+        cmsWidgetName="RegistrationZipQuestionWidget"
+        v-model="registrationZipCode"
+        isRequired
+        disableAutoFill
+        validationRules="zip-required|zip-format"
+    />
+</template>
+<script>
+// Import Other Supporting File(s)
+import { defineRule } from 'vee-validate';
+import { regex, required } from '@/helpers/validation-rules';
+import { errorMessages } from '@/constants/error-messages';
+  
+// Import Component(s)
+import TextboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
+  
+defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
+defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
+  
+export default {
+    name: 'zip-question',
+    props: {
+      modelValue: String,
+    },
+    emits: ['update:modelValue'],
+    components: {
+      TextboxQuestion,
+    },
+    computed: {
+      registrationZipCode: {
+        get() {
+          return this.modelValue;
+        },
+        set(newValue) {
+          this.$emit('update:modelValue', newValue);
+        },
+      },
+    },
+  };
+  </script>
+