From e1f20ad3a83eeb0f48bb10104a7058b8ce127e78 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 18 Apr 2022 11:12:32 -0400
Subject: [PATCH] WIP

---
 src/layouts/vin-lookup/vin-lookup.vue | 103 ++++++++++----------------
 src/ux-components/alert/alert.vue     |  24 +++---
 2 files changed, 50 insertions(+), 77 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 0d3692721..b50b180c0 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -31,59 +31,59 @@
       </div>
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="matchedDifferentVehicle"
         alertClass="alert-danger"
-        :alertHeadline="matchedDifferentVehicle.headline"
-        :alertCopy="matchedDifferentVehicle.copy"
+        cmsWidgetName="MatchedDifferentVehicle"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="noMatchAlert"
         alertClass="alert-warning"
-        :alertHeadline="noMatchAlertWidget.headline"
-        :alertCopy="noMatchAlertWidget.copy"
+        cmsWidgetName="NoMatchAlertWidget"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="noServiceZip"
         alertClass="alert-warning"
-        :alertHeadline="noServiceZipWidget.headline"
-        :alertCopy="noServiceZipWidget.copy"
+        cmsWidgetName="NoServiceZipWidget"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="vinFound"
         alertClass="alert-warning"
-        :alertHeadline="vinFoundWidget.headline"
-        :alertCopy="vinFoundWidget.copy"
+        cmsWidgetName="VinFoundWidget"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="vinFoundReadOnly"
         alertClass="alert-warning"
-        :alertHeadline="vinFoundReadOnlyWidget.headline"
-        :alertCopy="vinFoundReadOnlyWidget.copy"
+        cmsWidgetName="VinFoundReadOnlyWidget"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="foundWindshieldAlert"
         alertClass="alert-warning"
-        :alertHeadline="foundWindshieldAlertWidget.headline"
-        :alertCopy="foundWindshieldAlertWidget.copy"
+        cmsWidgetName="FoundWindshieldAlert"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="vinNotFound"
         alertClass="alert-warning"
-        :alertHeadline="vinNotFoundWidget.headline"
-        :alertCopy="vinNotFoundWidget.copy"
+        cmsWidgetName="VinNotFound"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="perfectMatchNewVinAlert"
         alertClass="alert-warning"
-        :alertHeadline="perfectMatchNewVinAlertWidget.headline"
-        :alertCopy="perfectMatchNewVinAlertWidget.copy"
+        cmsWidgetName="PerfectMatchNewVinAlert"
       />
       <funnelFooter
         cmsWidgetName="FunnelFooterWidget"
@@ -144,38 +144,6 @@ export default {
     // Call the "next" function to complete the transition to this page.
     next((vm) => {
       vm.setCmsContent(resultMap.cmsContent);
-      vm.matchedDifferentVehicleWidget = {
-        headline: resultMap.cmsContent.MatchedDifferentVehicle.HeadlineText,
-        copy: resultMap.cmsContent.MatchedDifferentVehicle.BodyText
-      };
-      vm.noMatchAlertWidget = {
-        headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText,
-        copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText
-      };
-      vm.noServiceZipWidget = {
-        headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText,
-        copy: resultMap.cmsContent.NoServiceZipWidget.BodyText
-      };
-      vm.vinFoundWidget = {
-        headline: resultMap.cmsContent.VinFoundWidget.HeadlineText,
-        copy: resultMap.cmsContent.VinFoundWidget.BodyText
-      };
-      vm.vinFoundReadOnlyWidget = {
-        headline: resultMap.cmsContent.VinFoundReadOnlyWidget.HeadlineText,
-        copy: resultMap.cmsContent.VinFoundReadOnlyWidget.BodyText
-      };
-      vm.foundWindshieldAlertWidget = {
-        headline: resultMap.cmsContent.FoundWindshieldAlert.HeadlineText,
-        copy: resultMap.cmsContent.FoundWindshieldAlert.BodyText
-      };
-      vm.vinNotFoundWidget = {
-        headline: resultMap.cmsContent.VinNotFound.HeadlineText,
-        copy: resultMap.cmsContent.VinNotFound.BodyText
-      };
-      vm.perfectMatchNewVinAlertWidget = {
-        headline: resultMap.cmsContent.PerfectMatchNewVinAlert.HeadlineText,
-        copy: resultMap.cmsContent.PerfectMatchNewVinAlert.BodyText
-      };
     });
   },
   props: {
@@ -194,6 +162,7 @@ export default {
       vin: '',
       zip: '',
       email: '',
+      customAlertData: {},
     };
   },
   methods: {
@@ -212,17 +181,25 @@ export default {
     },
     async forwardButtonAction() {
       const zipValidation = await this.validateZip(this.zip);
-      console.log(zipValidation);
       if (!zipValidation.data.isServiceable) {
+        this.customAlertData.zip = this.zip;
         this.$refs.funnelFooter.removeLoader();
         this.noServiceZip = true;
         return;
       }
       const vinLookup = await this.lookupVin(this.vin).catch(() => {
         this.$refs.funnelFooter.removeLoader();
-        this.vinNotValid = true;
+        this.noMatchAlert = true;
         return;
       });
+      if (vinLookup.data.carId !== store.getters.vehicle.carId) {
+        this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
+        this.$refs.funnelFooter.removeLoader();
+        this.foundWindshieldAlert = true;
+        return;
+      }
+      const carInfo = this.vinDoesNotMatchCarId ? vinLookup.data : store.getters.vehicle;
+      this.updateStore(carInfo)
       const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
         this.storeActions.GET_PARTS_OR_QUESTIONS,
         {
@@ -258,22 +235,22 @@ export default {
         { vin }
       );
     },
-    updateStore() {
+    updateStore(carInfo) {
       // 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_SERVICE_LOCATION_ZIP, null);
-      store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_VIN, this.vin);
+      store.commit(storeMutations.UPDATE_YEAR, carInfo.year);
+      store.commit(storeMutations.UPDATE_MAKE, carInfo.make);
+      store.commit(storeMutations.UPDATE_MODEL, carInfo.model);
+      store.commit(storeMutations.UPDATE_STYLE, carInfo.style);
+      store.commit(storeMutations.UPDATE_CAR_ID, carInfo.carId);
+      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, carInfo.category);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, carInfo.imageUrl);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, carInfo.imageVifNumber);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageColor);
+      store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.zip);
+      store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
     },
   },
   components: {
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 5b27f385a..515658e16 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -5,12 +5,7 @@
     :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
   >
     <p class="m-0 fw-bold small alert-heading">{{ alertHeadline }}</p>
-    <span v-if="isMultiParagraph">
-      <p class="m-1 text-body small" v-for="(para, index) in alertCopy" :key="index">
-        {{ para }}
-      </p>
-    </span>
-    <p class="m-0 text-body small" v-else>{{ alertCopy }}</p>
+    <p class="m-0 text-body small">{{ alertCopy }}</p>
     <button
       type="button"
       class="btn-close p-2"
@@ -34,8 +29,6 @@
 export default {
   name: "alert",
   props: {
-    alertHeadline: String,
-    alertCopy: [Array, String],
     isDismissible: Boolean,
     /*
     alertClass class names:
@@ -45,14 +38,17 @@ export default {
     alert-info (blue)
     */
     alertClass: String,
+    cmsWidgetName: String,
+    manualHeadline: String,
+    manualCopy: String,
   },
   computed: {
-    isMultiParagraph() {
-      if (typeof this.alertCopy == "string") {
-        return false;
-      }
-      return true;
-    }
+    alertHeadline(){
+      return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'HeadlineText') : this.manualHeadline;
+    },
+    alertCopy(){
+      return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
+    },
   },
 };
 </script>