From c007430e633e68587940f68321a4dcaec2c8285a Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 24 Mar 2022 15:04:27 -0400
Subject: [PATCH] Adding validations to lpl

---
 .../funnel-footer/funnel-footer.vue           |   7 +
 src/constants/error-messages.js               |   1 +
 .../license-plate-lookup.vue                  | 140 ++++++++++++------
 src/layouts/vehicle-damage/vehicle-damage.vue |   2 +-
 src/ux-components/button-main/button-main.vue |   3 +
 5 files changed, 108 insertions(+), 45 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 44afa5364..c984297ad 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -18,6 +18,7 @@
       <div class="row d-flex flex-row-reverse align-items-center">
         <div class="col button-col d-flex" id="stacked">
           <buttonMain
+            ref="buttonMain"
             isPrimary
             :buttonText="buttonText"
             loaderColor="white"
@@ -77,6 +78,12 @@ export default {
       this.backLink = cmsContent.BackButtonText;
       this.buttonText = cmsContent.ForwardButtonText;
     },
+    updateButtonText(newText) {
+      this.buttonText = newText;
+    },
+    removeLoader(){
+      this.$refs.buttonMain.removeLoader();
+    },
     buttonClick() {
       this.$emit("ForwardClicked");
     },
diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 2b3382dc9..311e747b0 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -11,6 +11,7 @@ const errorMessages = {
     CITY_REQUIRED: "Please enter your city",
     STATE_REQUIRED: "Please enter your state",
     ZIP_REQUIRED: "Please enter your ZIP",
+    LICENSE_PLATE_REQUIRED: "Please enter your license plate number",
     FIRST_NAME_REQUIRED: "Please enter your first name",
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index ffa54cedc..f34a674e3 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,38 +1,63 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
-    <funnelHeader ref="funnelHeader" />
-    <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
-    <funnelSubHeader ref="funnelSubHeader" />
-    <input type="text" id="license_plate" v-model="licensePlate">
-    <input type="text" id="zip" v-model="zip">
-    <input type="text" id="email" v-model="email">
-    <alert
-      class="my-3"
-      v-if="newServiceZipRequired"
-      alertClass="alert-danger"
-      :alertHeadline="noServiceZipWidget.headline"
-      :alertCopy="noServiceZipWidget.copy"
-    />
-    <alert
-      class="my-3"
-      v-if="vinNotValid"
-      alertClass="alert-danger"
-      :alertHeadline="noMatchAlertWidget.headline"
-      :alertCopy="noMatchAlertWidget.copy"
-    />
-    <alert
-      class="my-3"
-      v-if="vinDoesNotMatchCarId"
-      alertClass="alert-danger"
-      :alertHeadline="matchedDifferentVehicleAlertWidget.headline"
-      :alertCopy="matchedDifferentVehicleAlertWidget.copy"
-    />
-    <funnelFooter
-      ref="funnelFooter"
-      @back-clicked="backButtonAction"
-      @ForwardClicked="forwardButtonAction"
-    />
-  </div>
+  <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 ref="funnelHeader" />
+      <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
+      <funnelSubHeader ref="funnelSubHeader" />
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion ref="LicensePlateNumber" v-model="licensePlate" inputId="license_plate" disableAutoFill validationRules="license-plate-required"  />
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion ref="RegistrationZip" v-model="zip" inputId="zip" mask="#####" disableAutoFill validationRules="zip-required" />
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion ref="EmailAddress" v-model="email" inputId="email" disableAutoFill validationRules="email-address-required|email-address-format" />
+        </div>
+      </div>
+      <alert
+        class="my-3"
+        v-if="newServiceZipRequired"
+        alertClass="alert-danger"
+        :alertHeadline="noServiceZipWidget.headline"
+        :alertCopy="noServiceZipWidget.copy"
+      />
+      <alert
+        class="my-3"
+        v-if="vinNotValid"
+        alertClass="alert-danger"
+        :alertHeadline="noMatchAlertWidget.headline"
+        :alertCopy="noMatchAlertWidget.copy"
+      />
+      <alert
+        class="my-3"
+        v-if="vinDoesNotMatchCarId"
+        alertClass="alert-warning"
+        :alertHeadline="matchedDifferentVehicleAlertWidget.headline"
+        :alertCopy="matchedDifferentVehicleAlertWidget.copy"
+      />
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion v-if="newServiceZipRequired" questionText="Service area ZIP code" v-model="serviceZip" inputId="serviceZip" disableAutoFill  validationRules="zip-required" />
+        </div>
+      </div>
+      <funnelFooter
+        ref="funnelFooter"
+        :isDisabled="!meta.valid"
+        @back-clicked="backButtonAction"
+        @ForwardClicked="forwardButtonAction"
+      />
+    </div>
+  </Form>
 </template>
 
 <script>
@@ -42,6 +67,7 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import alert from "@/ux-components/alert/alert";
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -50,6 +76,15 @@ import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations";
+import { errorMessages } from "@/constants/error-messages";
+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));
+defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
+defineRule("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));
 
 export default {
   name: "license-plate-lookup",
@@ -78,6 +113,15 @@ export default {
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
+      vm.$refs.LicensePlateNumber.initializeComponent(
+        resultMap.cmsContent.LicensePlateNumber.QuestionText
+      );
+      vm.$refs.RegistrationZip.initializeComponent(
+        resultMap.cmsContent.RegistrationZip.QuestionText
+      );
+      vm.$refs.EmailAddress.initializeComponent(
+        resultMap.cmsContent.EmailAddress.QuestionText
+      );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
       );
@@ -95,14 +139,18 @@ export default {
       };
     });
   },
+  props: {
+    validationRules: String, 
+  },
   data() {
     return {
       newServiceZipRequired: false,
       vinNotValid: false,
       vinDoesNotMatchCarId: false,
-      licensePlate: 'HWV4445',
-      zip: '43224',
-      email: 'maxjdempsey@gmail.com',
+      licensePlate: '',
+      zip: '',
+      email: '',
+      serviceZip: '',
     };
   },
   methods: {
@@ -117,21 +165,23 @@ export default {
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
     backButtonAction() {
-      // route to move backwards
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     async forwardButtonAction() {
-      const zipValidation = await this.validateZip(this.zip);
+      const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.zip);
       if (!zipValidation.data.isServiceable) {
+        this.$refs.funnelFooter.removeLoader();
         this.newServiceZipRequired = true;
         return;
       } 
-      const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state);
-      if (!vinLookup.data.vin) {
+      const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => {
+        this.$refs.funnelFooter.removeLoader();
         this.vinNotValid = true;
         return;
-      } 
+      });
       if (vinLookup.data.vehicle.carId !== store.getters.vehicle.carId) {
+        this.$refs.funnelFooter.updateButtonText(`Continue with ${vinLookup.data.vin} ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`);
+        this.$refs.funnelFooter.removeLoader();
         this.vinDoesNotMatchCarId = true;
         return;
       }
@@ -193,11 +243,13 @@ export default {
     },
   },
   components: {
+    Form,
     funnelHeader,
-    funnelFooter,
     vehicleBanner,
-    alert,
     funnelSubHeader,
+    textboxQuestion,
+    alert,
+    funnelFooter,
   },
 };
 </script>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 8520e568c..6c285ab94 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -5,7 +5,7 @@
       ref="theForm"
       v-slot="{ meta }"
     >
-      <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+      <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index a2a7861f6..81aa91928 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -32,6 +32,9 @@ export default {
     };
   },
   methods: {
+    removeLoader(){
+      this.isLoaderDisplayed = false;
+    },
     clicked() {
       if (!this.isDisabled) {
         this.isLoaderDisplayed = true;