From 6d69c7c7af2b21746d960219a4e2a5671ed05294 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 5 Apr 2022 15:01:40 -0400
Subject: [PATCH] WIP Updates to vin-lookup page.

---
 src/layouts/vin-lookup/vin-lookup.vue | 113 ++++++++++++++------------
 1 file changed, 63 insertions(+), 50 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 1311bd05b..c5ddda85f 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -6,9 +6,9 @@
     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" />
+      <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+      <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+      <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
       <div class="row my-2">
         <div class="col">
           <textboxQuestion ref="VinNumber" v-model="vin" inputId="vin" disableAutoFill validationRules="vin-required|vin-format" />
@@ -21,38 +21,73 @@
       </div>
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion ref="ServiceZIP" v-model="servicezip" inputId="serviceZip" disableAutoFill validationRules="zip-required" />
+          <textboxQuestion cmsWidgetName="ServiceZip" 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" />
+          <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" disableAutoFill validationRules="email-address-required|email-address-format" />
         </div>
       </div>
       <alert
         class="my-3"
-        v-if="newServiceZipRequired"
+        v-if="MatchedDifferentVehicle"
         alertClass="alert-danger"
-        :alertHeadline="noServiceZipWidget.headline"
-        :alertCopy="noServiceZipWidget.copy"
+        :alertHeadline="MatchedDifferentVehicle.headline"
+        :alertCopy="MatchedDifferentVehicle.copy"
       />
       <alert
         class="my-3"
-        v-if="vinNotValid"
+        v-if="NoMatchAlertWidget"
         alertClass="alert-danger"
-        :alertHeadline="noMatchAlertWidget.headline"
-        :alertCopy="noMatchAlertWidget.copy"
+        :alertHeadline="NoMatchAlertWidget.headline"
+        :alertCopy="NoMatchAlertWidget.copy"
       />
       <alert
         class="my-3"
-        v-if="vinDoesNotMatchCarId"
+        v-if="NoServiceZipWidget"
         alertClass="alert-warning"
-        :alertHeadline="matchedDifferentVehicleAlertWidget.headline"
-        :alertCopy="matchedDifferentVehicleAlertWidget.copy"
+        :alertHeadline="NoServiceZipWidget.headline"
+        :alertCopy="NoServiceZipWidget.copy"
+      />
+      <alert
+        class="my-3"
+        v-if="VinFoundWidget"
+        alertClass="alert-warning"
+        :alertHeadline="VinFoundWidget.headline"
+        :alertCopy="VinFoundWidget.copy"
+      />
+      <alert
+        class="my-3"
+        v-if="VinFoundReadOnlyWidget"
+        alertClass="alert-warning"
+        :alertHeadline="VinFoundReadOnlyWidget.headline"
+        :alertCopy="VinFoundReadOnlyWidget.copy"
+      />
+      <alert
+        class="my-3"
+        v-if="FoundWindshieldAlert"
+        alertClass="alert-warning"
+        :alertHeadline="FoundWindshieldAlert.headline"
+        :alertCopy="FoundWindshieldAlert.copy"
+      />
+      <alert
+        class="my-3"
+        v-if="VinNotFound"
+        alertClass="alert-warning"
+        :alertHeadline="VinNotFound.headline"
+        :alertCopy="VinNotFound.copy"
+      />
+      <alert
+        class="my-3"
+        v-if="PerfectMatchNewVinAlert"
+        alertClass="alert-warning"
+        :alertHeadline="PerfectMatchNewVinAlert.headline"
+        :alertCopy="PerfectMatchNewVinAlert.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" />
+          <textboxQuestion v-if="newServiceZipRequired" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" disableAutoFill  validationRules="zip-required" />
         </div>
       </div>
       <funnelFooter
@@ -98,7 +133,6 @@ export default {
   async beforeRouteEnter(to, from, next) {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-
     // Settle promises and get results
     const promiseResultMap = [
       {
@@ -106,44 +140,23 @@ export default {
         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.setCmsContent(resultMap.cmsContent);
       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
-      // };
+        copy: resultMap.cmsContent.NoServiceZipWidget.BodyText,
+      };
+      vm.noMatchAlertWidget = {
+        headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText,
+        copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText
+      };
+      vm.MatchedDifferentVehicle = {
+        headline: resultMap.cmsContent.MatchedDifferentVehicle.HeadlineText,
+        copy: resultMap.cmsContent.MatchedDifferentVehicle.BodyText
+      };
     });
   },
   props: {
@@ -177,7 +190,7 @@ export default {
     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.$refs.funnelFooter.removeLoader();
         this.newServiceZipRequired = true;
         return;
       }
@@ -188,7 +201,7 @@ export default {
       });
       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.$refs.funnelFooter.removeLoader();
         this.vinDoesNotMatchCarId = true;
         return;
       }