From 64cd3468a9bc6dff7da5b7f95572bac25fb53cf2 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 3 Jan 2023 12:06:35 -0500
Subject: [PATCH] restructured license-plate-lookup, start of alerts

---
 .../license-plate-lookup-alerts.vue           | 49 +++++++++++++++++++
 .../license-plate-lookup.vue                  | 23 +++------
 .../license-plate-question.vue                | 45 +++++++++++++++++
 .../zip-question/zip-question.vue             | 45 +++++++++++++++++
 4 files changed, 146 insertions(+), 16 deletions(-)
 create mode 100644 src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue
 create mode 100644 src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue
 create mode 100644 src/layouts/license-plate-lookup/zip-question/zip-question.vue

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue
new file mode 100644
index 00000000..e2f0fa9c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index d3a2ee1e..0fd77f5b 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/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
-            inputId="license_plate"
-            cmsWidgetName="LicensePlateNumberQuestionWidget"
-            v-model="licensePlate"
-            isRequired 
-            disableAutoFill
-            validationRules="license-plate-required" />
+          <license-plate-question/>
         </div>
         <div class="mt-4">
-          <textboxQuestion 
-            inputId="zip"
-            cmsWidgetName="RegistrationZipQuestionWidget"
-            v-model="registrationZipCode"
-            isRequired
-            disableAutoFill 
-            mask="#####"
-            validationRules="zip-required|zip-format"/>
+          <zip-question/>
         </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 {
diff --git a/src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue b/src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue
new file mode 100644
index 00000000..9fcdb33b
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/src/layouts/license-plate-lookup/zip-question/zip-question.vue b/src/layouts/license-plate-lookup/zip-question/zip-question.vue
new file mode 100644
index 00000000..df7265dd
--- /dev/null
+++ b/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>
+  
\ No newline at end of file