updates to navigation, saving data to store

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -72,36 +72,8 @@ defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVIC
 export default {
   name: 'license-plate-lookup',
   mixins: [baseFormMixin, vinPagesMixin],
-  components: {
-    Form,
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    vehicleBanner,
-    textboxQuestion,
-    licensePlateLookupAlerts,
-    isGlassAvailableForCarId
-  },
-  setup() {
-    const mainStore = useMainStore();
-
-    return { mainStore };
-  },
-  data() {
-    return {
-      activeVehicleLookupAlertType: null,
-      needToLookupVehicle: true,
-      vehicleFromLookup: null,
-      licensePlate: null, 
-      registrationZipCode: null,
-   };
-  },
-  provide() {
-    return {
-      vehicleFromLookup: computed(() => this.vehicleFromLookup),
-    };
-  },
   async beforeRouteEnter(to, from, next) {
+    // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
     // Settle promises and get results
@@ -113,66 +85,115 @@ export default {
     ];
 
     const resultMap = await settleAllPromises(promiseResultMap);
-
+    
+    // Call the "next" function to complete the transition to this page.
     next((vm) => {
       vm.setCmsContent(resultMap.cmsContent);      
     });
   },
-  computed: {
+  data() {
-    isCarIdDifferentFromTheStore() {
+    return {
-      return (
+      activeVehicleLookupAlertType: null,
-        this.vehicleFromLookup !== null
+      vehicleFromLookup: null,
-        && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
+      licensePlate: null, 
-      );
+      registrationZipCode: null,
-    }
+      displayVinNotFoundAlert: false,
+      displayMatchedDifferentVehicleAlert: false,
+      previouslyEnteredCarId: "",
+      isCarIdDifferent: false,
+      customAlertData: {},
+      isSelectedGlassAvailableForVehicle: true,
+   };
   },
   methods: {
     arePagePrerequisitesValid() {      
-      if (this.mainStore.order.vehicle.carId) {
+      return this.mainStore.order.vehicle.carId !== null;
-          return true;
-      }
-      return false;
     },
     backButtonAction() {
-      /**
+      // route to move backwards
-       * this.navigationScenarios comes from base-mixin
-       */
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
+    attachCustomEvents() {
+            this.prependActionToMethod(this, this.forwardButtonAction, () => {
+                this.pushEventToGA(
+                    this.$route.query[this.queryStrings.ISS_PAGE],
+                    this.GaActions.SUBMITTED,
+                    this.GaLabels.LICENSE_PLATE_LOOKUP,
+                    true
+                );
+            });
+    },
     // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
     async forwardButtonAction() {
-      this.resetActiveAlert();
+      this.resetWarningsAndErrors();
 
-      if (this.needToLookupVehicle) {
+      // Lookup vin
-      const vehicleLookupResponse = await this.mainStore.lookupVinByPlate(this.licensePlate);
+      const vinLookupResponse = useMainStore().lookupVinByPlate({
-      
+          licensePlate: this.licensePlate,
-      if (vehicleLookupResponse.error) {
+      }
-        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
+      ).catch(() => {
-        this.resetVehicleFromLookup();
+          // No VIN found
-        this.$refs.siteFooter.removeLoader();
+          this.displayVinNotFoundAlert = true;
-        return;
+          return this.$refs.siteFooter.removeLoader();
+      });
+      // If no VIN was found, stop processing after displaying alert
+      if (!vinLookupResponse) {
+          return;
       }
 
-      this.vehicleFromLookup = vehicleLookupResponse.data.vehicle;
+      // Settle promises and get results
-    }
+      const promiseResultMap = [
+        {
+          resultKey: "vinLookupResponse",
+          promise: vinLookupResponse,
+        },
+      ];
 
-      if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
+      const resultMap = await settleAllPromises(promiseResultMap);
-        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
-        const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
 
-        this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
+      // Check if the CarId has changed.
-        this.$refs.siteFooter.removeLoader();
+      this.isCarIdDifferent =
+                vinLookupResponse.vehicle.carId !== useMainStore().order.vehicle.carId;
+      // Handle changing car
+      if (
+          this.isCarIdDifferent &&
+          vinLookupResponse.data.carId !== this.previouslyEnteredCarId
+      ) {
+          // Display Alert
+          this.previouslyEnteredCarId = vinLookupResponse.data.vehicle.carId;
+          this.customAlertData.vehicleInfo = vinLookupResponse.data.vehicle;
+          this.displayMatchedDifferentVehicleAlert = true;
+          this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
+              vinLookupResponse.data.vehicle.carId
+          );
 
-        this.needToLookupVehicle = false;
+          // Update button "Continue with..."
+          this.$refs.siteFooter.updateButtonText(
+              `Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`
+          );
+          return this.$refs.siteFooter.removeLoader();
       }
-      
+
+      // Save vehicle, customer, service and registration information
+      await useMainStore().saveRegistrationLicensePlateLookup(
+          {
+              isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
+              vehicleInfo: Object.assign(vinLookup.data.vehicle, { vin: vinLookup.data.vin }),
+              registrationInfo: {
+                  licensePlate: this.licensePlate,
+                  state: resultMap.registrationZipValidationResponse.state,
+                  zipCode: this.registrationZipCode,
+              },
+          },
+          false
+      );8
+
       return await this.navigateForward();
     },
-    
     async navigateForward() {
       // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
       // display vehicle changed alert on that page.
-      if (this.isCarIdDifferentFromTheStore && !this.isSelectedGlassAvailableForVehicle) {
+      if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
         this.$router.navigate(
           this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
           this.$route,
@@ -183,29 +204,52 @@ export default {
         await this.navigateForwardWithSingleCarMatch();
       }
     },
-    resetActiveAlert() {
+    resetWarningsAndErrors() {
-      this.activeVehicleLookupAlertType = null;
+      this.displayVinNotFoundAlert = false;
+      this.displayMatchedDifferentVehicleAlert = false;
     },
-    resetVehicleFromLookup() {
+  },
-      this.vehicleFromLookup = null;
+  mounted() {
+      this.attachCustomEvents();
     },
-    resetDependentState() {},
+  computed: {
+      AlertMatchedDifferentVehicleHeader() {
+            return this.getCmsContent(
+                "AlertMatchedDifferentVehicleWidget",
+                "HeadlineText"
+            ).replaceAll("{custom:damage}", getDamageString());
+      },
+      AlertMatchedDifferentVehicleBody() {
+            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+
+            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+                .replaceAll("{custom:damage}", getDamageString())
+                .replaceAll("{custom:vinYmmFound}", vinYmmFound)
+                .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
+      },
   },
   watch: {
-        licensePlate() {
+      licensePlate() {
-            this.resetActiveAlert();
+          this.$refs.siteFooter.updateButtonText(
-            this.needToLookupVehicle = true;
+              this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
-            this.$refs.siteFooter.updateButtonText(
+          );
-                this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
+      },
-            );
+      registrationZipCode() {
-        },
+          this.$refs.siteFooter.updateButtonText(
-        registrationZipCode() {
+              this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
-            this.resetActiveAlert();
+          );
-            this.needToLookupVehicle = true;
+      },
-            this.$refs.siteFooter.updateButtonText(
+  },
-                this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
+  components: {
-            );
+    Form,
-        },
+    siteFooter,
-      }
+    siteHeader,
+    siteSubHeader,
+    vehicleBanner,
+    textboxQuestion,
+    licensePlateLookupAlerts,
+    isGlassAvailableForCarId
+  },
 };
 </script>

src/store/index.js

@@ -820,6 +820,28 @@ export const useMainStore = defineStore({
         }
       },
 
+      saveRegistrationLicensePlateLookup({ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) {
+        //Reset dependent state when changing
+        if 
+        (
+            registrationInfo?.licensePlate !== this.order.vehicle.registration?.licensePlate ||
+            registrationInfo?.state !== this.order.vehicle.registration?.state ||
+            registrationInfo?.zipCode !== this.order.vehicle.registration?.zipCode
+        )
+        {
+            this.resetRegistrationAndDependencies();
+
+            if (!isSelectedGlassAvailableForVehicle) {
+              this.resetDamageAndDependencies();
+              this.resetPartsAndDependencies();
+            }
+
+            //Save new values
+            this.updateVehicle(vehicleInfo);
+            this.updateRegistration(registrationInfo);
+        }
+      },
+
       resetRegistrationAndDependencies() {
         this.resetRegistrationState();
         this.resetGlassPartsState();