vin masking

src/layouts/vin-lookup/vin-lookup.vue

@@ -24,6 +24,8 @@
 
           <vinQuestion
             v-model="vin"
+            :mask="vinMask"
+            :isDisabled="vinPopulatedOnPageLoad"
           />
 
           <vinLocationInformation />
@@ -85,8 +87,9 @@ export default {
       activeVehicleLookupAlertType: null,
       needToLookupVehicle: true,
       vehicleFromLookup: null,
-      vin: null,
+      vin: this.getVinFromStore(),
       forwardButtonCarStyle:"",
+      vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
     };
   },
   provide() {
@@ -122,12 +125,24 @@ export default {
       const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
       const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
       return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
-    }
+    },
+    vinMask() {
+      if (this.vinPopulatedOnPageLoad) {
+        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
+        const lastSixChars = this.vin.substring(11, this.vin.length);
+          return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
+      } else {
+          return "XXXXXXXXXXXXXXXXX";
+      }
+    },
   },
   methods: {
     arePagePrerequisiteValid() {
       return true;
     },
+    getVinFromStore() {
+      return this.mainStore.vehicle.vin;
+    },
     backButtonAction() {
       /**
        * this.navigationScenarios comes from base-mixin