restructured license-plate-lookup, start of alerts

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

@@ -10,23 +10,10 @@
       <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall">
         <div class="mt-5">
-          <textboxQuestion
+          <license-plate-question/>
-            inputId="license_plate"
-            cmsWidgetName="LicensePlateNumberQuestionWidget"
-            v-model="licensePlate"
-            isRequired 
-            disableAutoFill
-            validationRules="license-plate-required" />
         </div>
         <div class="mt-4">
-          <textboxQuestion 
+          <zip-question/>
-            inputId="zip"
-            cmsWidgetName="RegistrationZipQuestionWidget"
-            v-model="registrationZipCode"
-            isRequired
-            disableAutoFill 
-            mask="#####"
-            validationRules="zip-required|zip-format"/>
         </div>
         <!-- <alert
           cmsWidgetName="AlertVinNotFoundWidget"
@@ -57,6 +44,8 @@ import textboxQuestion from '../../common-components/textbox-question/textbox-qu
 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';
 
 // Define Validation Rules
 defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
@@ -73,7 +62,9 @@ export default {
     siteSubHeader,
     vehicleBanner,
     textboxQuestion,
-    alert,   
+    alert,
+    LicensePlateQuestion,
+    ZipQuestion,   
   },
   data() {
     // return {

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

@@ -0,0 +1,45 @@
+<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));
+defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
+defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
+  
+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,45 @@
+<template>
+    <TextboxQuestion
+        inputId="zip"
+        cmsWidgetName="RegistrationZipQuestionWidget"
+        v-model="registrationZipCode"
+        isRequired
+        disableAutoFill
+        validationRules="zip-required|zip-format"
+        mask="#####"
+    />
+</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>
+