From 842a444e5c0a4545147fe26973f658d445f6a9fd Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 4 May 2022 16:28:20 -0400
Subject: [PATCH] Fixing lpl page and nav scenario

---
 .../navigation-helper.spec.js                 |   4 +-
 .../license-plate-lookup.vue                  | 219 ++++++++++--------
 2 files changed, 118 insertions(+), 105 deletions(-)

diff --git a/src/helpers/heritage-integration/navigation-helper.spec.js b/src/helpers/heritage-integration/navigation-helper.spec.js
index fd06920c2..17561ba52 100644
--- a/src/helpers/heritage-integration/navigation-helper.spec.js
+++ b/src/helpers/heritage-integration/navigation-helper.spec.js
@@ -175,7 +175,7 @@ describe("getPageToRouteExistingOrderTo", () => {
         expect(result).toBe('vehicle-damage');
     });
 
-    test("getPageToRouteExistingOrderTo, should return vin-lookup", async () => {
+    test("getPageToRouteExistingOrderTo, should return license-plate-lookup", async () => {
         // Arrange
         const toRoute = {
             query: {}
@@ -228,7 +228,7 @@ describe("getPageToRouteExistingOrderTo", () => {
         const result = await getPageToRouteExistingOrderTo(toRoute, false);
 
         //Assert
-        expect(result).toBe('vin-lookup');
+        expect(result).toBe('license-plate-lookup');
     });
 
     test("getPageToRouteExistingOrderTo, should return estimate", async () => {
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index ff1a2b10d..f63aea287 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,46 +1,35 @@
 <template>
-<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+  <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
     <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-        <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
-        <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-        <div class="row my-2">
-            <div class="col">
-                <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
-            </div>
+      <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+      <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+      <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
         </div>
       </div>
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion
-            cmsWidgetName="RegistrationZip"
-            v-model="registrationZip"
-            inputId="zip"
-            mask="#####"
-            validationRules="zip-required"
-          />
+          <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
         </div>
       </div>
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion
-            cmsWidgetName="EmailAddress"
-            v-model="email"
-            inputId="email"
-            validationRules="email-address-required|email-address-format"
-          />
+          <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
         </div>
-        <alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
-        <div class="row my-2">
-            <div class="col">
-                <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
-            </div>
+      </div>
+      <alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
         </div>
-        <alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" />
-        <alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
-        <funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
+      </div>
+      <alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" />
+      <alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
+      <funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
     </div>
-</Form>
+  </Form>
 </template>
 
 <script>
@@ -52,52 +41,59 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 // Supporting files
-import {
-    fetchCmsContentForPage
+import { 
+  fetchCmsContentForPage 
 } from "@/helpers/cms-content-helper";
 import {
-    settleAllPromises
+   settleAllPromises 
 } from "@/helpers/layout-helper";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
 import {
-    storeActions
+   storeActions 
 } from "@/constants/store-actions";
 import {
-    storeMutations
+   storeMutations 
 } from "@/constants/store-mutations";
 import {
-    errorMessages
+   errorMessages 
 } from "@/constants/error-messages";
 import {
-    getDamageString,
-    isGlassAvailableForCarId,
+  getDamageString,
+  isGlassAvailableForCarId,
 } from "@/helpers/damage-helper";
-import { required, regex } from "@/helpers/validation-rules";
-import { Form, defineRule } from "vee-validate";
+import {
+   required,
+    regex,
+} from "@/helpers/validation-rules";
+import {
+   Form,
+    defineRule,
+} from "vee-validate";
 
 // DEFINE VALIDATION RULES
 defineRule(
-    "license-plate-required",
-    required(errorMessages.LICENSE_PLATE_REQUIRED)
+  "license-plate-required",
+  required(errorMessages.LICENSE_PLATE_REQUIRED)
 );
 defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
 defineRule(
-    "email-address-required",
-    required(errorMessages.EMAIL_ADDRESS_REQUIRED)
+  "email-address-required",
+  required(errorMessages.EMAIL_ADDRESS_REQUIRED)
 );
 defineRule(
-    "email-address-format",
-    regex(
-        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
-        errorMessages.EMAIL_ADDRESS_FORMAT
-    )
+  "email-address-format",
+  regex(
+    /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
+    errorMessages.EMAIL_ADDRESS_FORMAT
+  )
 );
 export default {
   name: "license-plate-lookup",
   async beforeRouteEnter(to, from, next) {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
     // Settle promises and get results
     const promiseResultMap = [
       {
@@ -166,50 +162,13 @@ export default {
       ).replaceAll("{custom:zip}", this.registrationZip);
       return text;
     },
-    mounted() {
-        this.attachCustomEvents();
+    NoServiceZipBody() {
+      return this.getCmsContent("NoServiceZipWidget", "BodyText");
     },
-    computed: {
-        MatchedDifferentVehicleAlertHeader() {
-            let text = this.getCmsContent(
-                "MatchedDifferentVehicleAlertWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-
-            return text;
-        },
-        MatchedDifferentVehicleAlertBody() {
-            let text = this.getCmsContent(
-                    "MatchedDifferentVehicleAlertWidget",
-                    "BodyText"
-                )
-                .replaceAll("{custom:damage}", getDamageString())
-                .replaceAll(
-                    "{custom:plateLookupYear}",
-                    this.customAlertData?.vehicleInfo?.year
-                )
-                .replaceAll(
-                    "{custom:plateLookupMake}",
-                    this.customAlertData?.vehicleInfo?.make
-                )
-                .replaceAll(
-                    "{custom:plateLookupModel}",
-                    this.customAlertData?.vehicleInfo?.model
-                );
-
-            return text;
-        },
-        NoServiceZipHeader() {
-            let text = this.getCmsContent(
-                "NoServiceZipWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:zip}", this.registrationZip);
-
-            return text;
-        },
-        NoServiceZipBody() {
-            return this.getCmsContent("NoServiceZipWidget", "BodyText");
-        },
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      return store.getters.vehicle.carId !== null;
     },
     resetDependentState() {
       store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
@@ -244,9 +203,9 @@ export default {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     async forwardButtonAction() {
-      const zipValidation = this.serviceZip
-        ? await this.validateZip(this.serviceZip)
-        : await this.validateZip(this.registrationZip);
+      const zipValidation = this.serviceZip ?
+        await this.validateZip(this.serviceZip) :
+        await this.validateZip(this.registrationZip);
       if (!zipValidation.data.isServiceable) {
         this.$refs.funnelFooter.removeLoader();
         this.isVinValid = true;
@@ -254,6 +213,7 @@ export default {
         this.isCarIdDifferent = false;
         return;
       }
+
       const vinLookup = await this.lookupVin(
         this.licensePlate,
         zipValidation.data.state
@@ -263,8 +223,10 @@ export default {
         this.isCarIdDifferent = false;
         return;
       });
+
       this.isCarIdDifferent =
         vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
+
       if (
         this.isCarIdDifferent &&
         vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId
@@ -280,11 +242,13 @@ export default {
         this.$refs.funnelFooter.removeLoader();
         return;
       }
+
       this.updateCustomerInfo(
         vinLookup.data.vin,
         vinLookup.data.vehicle,
         zipValidation.data.state
       );
+
       this.navigateForward();
     },
     navigateForward() {
@@ -302,14 +266,63 @@ export default {
         return;
       }
     },
-    components: {
-        Form,
-        funnelHeader,
-        vehicleBanner,
-        funnelSubHeader,
-        textboxQuestion,
-        alert,
-        funnelFooter,
+    validateZip(zip) {
+      return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
+        zip,
+      });
     },
+    lookupVin(plate, state) {
+      return baseMixin.methods.dispatchStoreAction(
+        storeActions.LOOKUP_VIN_BY_PLATE,
+        { licensePlate: plate, licenseState: state }
+      );
+    },
+    updateCustomerInfo(vin, vehicleInfo, registrationState) {
+      if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
+          store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+      }
+      store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
+      store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year);
+      store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make);
+      store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
+      store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
+      store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
+      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageVifColor);
+      store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, this.licensePlate);
+      store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState);
+      store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.registrationZip);
+      store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZip);
+      store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
+    },
+  },
+  watch: {
+    licensePlate() {
+      this.$refs.funnelFooter.updateButtonText(
+        this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
+      );
+    },
+    registrationZip() {
+      this.$refs.funnelFooter.updateButtonText(
+        this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
+      );
+    },
+    serviceZip() {
+      this.$refs.funnelFooter.updateButtonText(
+        this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
+      );
+    },
+  },
+  components: {
+    Form,
+    funnelHeader,
+    vehicleBanner,
+    funnelSubHeader,
+    textboxQuestion,
+    alert,
+    funnelFooter,
+  },
 };
 </script>