From 6c770a6e261f29684a38e0e6cf970a22b3e1e820 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 25 Mar 2022 15:32:13 -0400
Subject: [PATCH] CSR-101 vin-lookup updates WIP

---
 src/constants/error-messages.js       |   6 +-
 src/layouts/vin-lookup/vin-lookup.vue | 262 ++++++++++++++++++++++++--
 2 files changed, 246 insertions(+), 22 deletions(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 2b3382dc9..d552abd44 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -15,6 +15,8 @@ const errorMessages = {
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
     EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
+    VIN_REQUIRED: "Please enter your VIN",
+    VIN_FORMAT: "Please enter a valid VIN",
 };
-  
-export { errorMessages };
\ No newline at end of file
+
+export { errorMessages };
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index fc9058abf..1311bd05b 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,41 +1,263 @@
 <template>
-  <div class="container-fluid shadow rounded-3 px-5 position-relative make-tall">
-    <funnelHeader ref="funnelHeader" />
-    <vehicleBanner ref="vehicleBanner" />
-    <funnelSubHeader ref="funnelSubHeader" />
-    <vinInformation
-      class="mb-5"
-    />
-    <funnel-footer
-      ref="funnelFooter"
-      :isDisabled="!meta.valid"
-      @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="VinNumber" v-model="vin" inputId="vin" disableAutoFill validationRules="vin-required|vin-format" />
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <vinInformation />
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion ref="ServiceZIP" v-model="servicezip" inputId="serviceZip" 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>
 // Components
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
+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 funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
 
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+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("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));
+defineRule("vin-required", required(errorMessages.VIN_REQUIRED));
+defineRule("vin-format", regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));
+
 export default {
   name: "vin-lookup",
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.$refs.funnelHeader.initializeComponent(
+        resultMap.cmsContent.FunnelHeaderWidget
+      );
+      vm.$refs.vehicleBanner.initializeComponent(
+        resultMap.cmsContent.VehicleBannerWidget
+      );
+      vm.$refs.funnelSubHeader.initializeComponent(
+        resultMap.cmsContent.FunnelSubHeaderWidget
+      );
+      vm.$refs.VinNumber.initializeComponent(
+        resultMap.cmsContent.VinNumber.QuestionText
+      );
+      vm.$refs.ServiceZIP.initializeComponent(
+        resultMap.cmsContent.ServiceZIP.QuestionText
+      );
+      vm.$refs.EmailAddress.initializeComponent(
+        resultMap.cmsContent.EmailAddress.QuestionText
+      );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
+      vm.noServiceZipWidget = {
+        headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText,
+        copy: resultMap.cmsContent.NoServiceZipWidget.BodyText
+        };
+      // vm.noMatchAlertWidget = {
+      //   headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText,
+      //   copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText
+      // };
+      // vm.matchedDifferentVehicleAlertWidget = {
+      //   headline: resultMap.cmsContent.MatchedDifferentVehicleAlertWidget.HeadlineText,
+      //   copy: resultMap.cmsContent.MatchedDifferentVehicleAlertWidget.BodyText
+      // };
+    });
+  },
+  props: {
+    validationRules: String,
+  },
+  data() {
+    return {
+      newServiceZipRequired: false,
+      vinNotValid: false,
+      vinDoesNotMatchCarId: false,
+      licensePlate: '',
+      zip: '',
+      email: '',
+      serviceZip: '',
+    };
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      return store.getters.vehicle.carId !== null;
+    },
+    resetDependentState() {
+      store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
+      store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null);
+      store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null);
+      store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
+      store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
+    },
+    backButtonAction() {
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    async forwardButtonAction() {
+      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).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;
+      }
+
+      const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
+        this.storeActions.GET_PARTS_OR_QUESTIONS,
+        {
+          carId: store.getters.vehicle.carId,
+          glassArray: store.getters.damage.glassToReplace,
+          zipCode: this.zip,
+          vin: vinLookup.vin
+        },
+        false
+      );
+      this.navigateForward(partsData);
+    },
+    navigateForward(partsData){
+        if(partsData.data.partsOrQuestions[0].partQuestions && partsData.data.partsOrQuestions[0].partQuestions.length > 0){
+            this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data);
+            return;
+        } else if((!partsData.data.partsOrQuestions[0].partQuestions || partsData.data.partsOrQuestions[0].partQuestions.length < 1) && partsData.data.partsOrQuestions[0].parts.length > 1) {
+           this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
+           return;
+        } else {
+            this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route);
+        }
+    },
+    validateZip(zip) {
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.VALIDATE_ZIP,
+        { zip }
+      );
+    },
+    lookupVin(plate, state) {
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.LOOKUP_VIN_BY_PLATE,
+        { licensePlate: plate, licenseState: state }
+      );
+    },
+    updateStore() {
+      // if(vehicleDamage){
+      //     store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+      // }
+      store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
+      store.commit(storeMutations.UPDATE_YEAR, null);
+      store.commit(storeMutations.UPDATE_MAKE, null);
+      store.commit(storeMutations.UPDATE_MODEL, null);
+      store.commit(storeMutations.UPDATE_STYLE, null);
+      store.commit(storeMutations.UPDATE_CAR_ID, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
+      store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, null);
+      store.commit(storeMutations.UPDATE_REGISTRATION_STATE, null);
+      store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, null);
+      store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, null);
+      store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, null);
+    },
+  },
   components: {
+    Form,
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
-    vinInformation,
+    textboxQuestion,
+    alert,
     funnelFooter,
+    vinInformation,
   },
 };
 </script>
-
-<style lang="scss">
-
-</style>