commit

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",

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",

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"
 };

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>

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");