From 8e3e038597fb6400342e614c2af09c96e8cffff5 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Fri, 21 Oct 2022 14:46:06 -0400
Subject: [PATCH] commit

---
 package-lock.json                         |  5 +++++
 package.json                              |  1 +
 src/constants/error-messages.js           |  1 +
 src/layouts/vehicle-year/vehicle-year.vue | 22 ++++++++++++++++++++--
 src/main.js                               |  2 ++
 5 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9d2c6069..a4cfe0a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8144,6 +8144,11 @@
         "tmpl": "1.0.5"
       }
     },
+    "maska": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/maska/-/maska-1.5.0.tgz",
+      "integrity": "sha512-BwZXzs5gHeu6wtn3iWFqrKRtcsM3sTpkHvfAngVNVNlN7tl9ZyQUeHTz11s9Sy7Bq1MoQ+xyR/+IzghY8nR84Q=="
+    },
     "mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
diff --git a/package.json b/package.json
index db9ee8e7..08f73fe1 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "axios": "^0.27.2",
     "bootstrap": "^5.1.1",
     "jest-junit": "^13.0.0",
+    "maska": "^1.5.0",
     "pinia": "^2.0.22",
     "pinia-plugin-persistedstate": "^2.2.0",
     "vee-validate": "^4.7.0",
diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index f3db46a2..62fa856a 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -27,6 +27,7 @@ const errorMessages = {
     POLICY_NUMBER_REQUIRED: "Please enter policy number",
     PHONE_NUMBER_REQUIRED: "Please enter phone number",
     POLICY_ZIP_REQUIRED: "Please enter policy zip",
+    POLICY_ZIP_FORMAT: "Please enter a valid policy ZIP",
     LOSS_CAUSE_REQUIRED: "Please enter loss cause",
     LOSS_CITY_REQUIRED: "Please enter loss city"
 };
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 7d3e3c9b..de419258 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -6,6 +6,10 @@
         <input type="text" v-model="year"/>
         <span>{{returnVehicleYear}}</span> 
         <button @click="updateVehicleYear(year)">Add</button>
+        
+    </div>
+    <div>
+        <textboxQuestion cmsWidgetName="PolicyZipQuestionWidget" v-model="policyZipCode" inputId="policyZipCode" mask="#####"  validationRules="policy-zip-required|policy-zip-format" />
     </div>
 </div>
 </template>
@@ -20,9 +24,12 @@
     import { regex } from "@/helpers/validation-rules";
     import { errorMessages } from "@/constants/error-messages";
 
+    defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_REQUIRED));
+    defineRule("policy-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT));
+
     export default {
         name: 'vehicle-year',
-        components: { navButton },
+       
         async beforeRouteEnter(to, from, next) 
         {
             // Call APIs
@@ -39,10 +46,17 @@
             //use resultMap to populate layout content.
             let resultMap = await settleAllPromises(promiseResultMap);
 
+            // Call the "next" function to complete the transition to this page.
             next((vm) => {
                 vm.setCmsContent(resultMap.cmsContent);
             });
         },
+        data()
+        {
+            return {
+                policyZipCode: ""
+            }
+        },
         methods:
         {
             updateVehicleYear(item) 
@@ -56,6 +70,10 @@
             {
                return this.mainStore.order.vehicle.year;
             }
-        }
+        },
+        components: { 
+            navButton,
+            textboxQuestion
+         },
     }
 </script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index be212100..3361fe54 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import { useMainStore } from '@/store';
 import baseMixin from "@/mixins/base-mixin.js";
 import { createPinia } from 'pinia';
+import Maska from "maska";
 
 const vueApp = createApp(App);
 
@@ -17,6 +18,7 @@ useMainStore().populateInitialState();
 
 // Additional Vue items to setup
 vueApp.mixin(baseMixin);
+vueApp.use(Maska);
 vueApp.use(router);
 vueApp.mount("#app");