Adding validations to lpl

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

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

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">
+  <Form
-    <funnelHeader ref="funnelHeader" />
+    @submit="onSubmit"
-    <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
+    @invalid-submit="onInvalidSubmit"
-    <funnelSubHeader ref="funnelSubHeader" />
+    ref="theForm"
-    <input type="text" id="license_plate" v-model="licensePlate">
+    v-slot="{ meta }"
-    <input type="text" id="zip" v-model="zip">
+  >
-    <input type="text" id="email" v-model="email">
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
-    <alert
+      <funnelHeader ref="funnelHeader" />
-      class="my-3"
+      <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
-      v-if="newServiceZipRequired"
+      <funnelSubHeader ref="funnelSubHeader" />
-      alertClass="alert-danger"
+      <div class="row my-2">
-      :alertHeadline="noServiceZipWidget.headline"
+        <div class="col">
-      :alertCopy="noServiceZipWidget.copy"
+          <textboxQuestion ref="LicensePlateNumber" v-model="licensePlate" inputId="license_plate" disableAutoFill validationRules="license-plate-required"  />
-    />
+        </div>
-    <alert
+      </div>
-      class="my-3"
+      <div class="row my-2">
-      v-if="vinNotValid"
+        <div class="col">
-      alertClass="alert-danger"
+          <textboxQuestion ref="RegistrationZip" v-model="zip" inputId="zip" mask="#####" disableAutoFill validationRules="zip-required" />
-      :alertHeadline="noMatchAlertWidget.headline"
+        </div>
-      :alertCopy="noMatchAlertWidget.copy"
+      </div>
-    />
+      <div class="row my-2">
-    <alert
+        <div class="col">
-      class="my-3"
+          <textboxQuestion ref="EmailAddress" v-model="email" inputId="email" disableAutoFill validationRules="email-address-required|email-address-format" />
-      v-if="vinDoesNotMatchCarId"
+        </div>
-      alertClass="alert-danger"
+      </div>
-      :alertHeadline="matchedDifferentVehicleAlertWidget.headline"
+      <alert
-      :alertCopy="matchedDifferentVehicleAlertWidget.copy"
+        class="my-3"
-    />
+        v-if="newServiceZipRequired"
-    <funnelFooter
+        alertClass="alert-danger"
-      ref="funnelFooter"
+        :alertHeadline="noServiceZipWidget.headline"
-      @back-clicked="backButtonAction"
+        :alertCopy="noServiceZipWidget.copy"
-      @ForwardClicked="forwardButtonAction"
+      />
-    />
+      <alert
-  </div>
+        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',
+      licensePlate: '',
-      zip: '43224',
+      zip: '',
-      email: 'maxjdempsey@gmail.com',
+      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);
+      const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => {
-      if (!vinLookup.data.vin) {
+        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>

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

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;