From 928f9fd4c18f17a14df5a1a9541ea84e20fb7ac1 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 3 Jan 2023 11:11:33 -0500
Subject: [PATCH] error messages for license plate and zip input, start of
 validation rules

---
 .../license-plate-lookup.vue                  | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 1b06361a..d3a2ee1e 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -15,7 +15,8 @@
             cmsWidgetName="LicensePlateNumberQuestionWidget"
             v-model="licensePlate"
             isRequired 
-            disableAutoFill />
+            disableAutoFill
+            validationRules="license-plate-required" />
         </div>
         <div class="mt-4">
           <textboxQuestion 
@@ -23,12 +24,14 @@
             cmsWidgetName="RegistrationZipQuestionWidget"
             v-model="registrationZipCode"
             isRequired
-            disableAutoFill />
+            disableAutoFill 
+            mask="#####"
+            validationRules="zip-required|zip-format"/>
         </div>
-        <alert
+        <!-- <alert
           cmsWidgetName="AlertVinNotFoundWidget"
           alertClass="alert-danger"
-          :isDismissable="false" />
+          :isDismissable="false" /> -->
         <siteFooter
           cms-widget-name="SiteFooterWidget"
           :is-forward-action-disabled="isForwardActionDisabled"
@@ -51,6 +54,14 @@ 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 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';
+
+// Define Validation Rules
+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-lookup',
@@ -65,10 +76,10 @@ export default {
     alert,   
   },
   data() {
-    return {
-      licensePlate: this.getLicensePlateFromStore(),
-      registrationZipCode: this.getRegistrationZipFromStore(),
-    };
+    // return {
+    //   licensePlate: this.getLicensePlateFromStore(),
+    //   registrationZipCode: this.getRegistrationZipFromStore(),
+    // };
   },
   async beforeRouteEnter(to, from, next) {
     const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@@ -87,6 +98,9 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);      
     });
   },
+  props: {
+    validationRules: String,
+  },
   computed: {
     isForwardActionDisabled() {
       return true;
@@ -111,12 +125,12 @@ export default {
     resetDependentState() {
 
     },
-    getLicensePlateFromStore() {
-      return this.mainStore.order.vehicle.registration.licensePlate;
-    },
-    getRegistrationZipFromStore() {
-      return this.mainStore.order.vehicle.registration.zipCode;
-    }
+    // getLicensePlateFromStore() {
+    //   return this.mainStore.order.vehicle.registration.licensePlate;
+    // },
+    // getRegistrationZipFromStore() {
+    //   return this.mainStore.order.vehicle.registration.zipCode;
+    // }
 
   },
 };