WIP

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"
+        cmsWidgetName="MatchedDifferentVehicle"
-        :alertCopy="matchedDifferentVehicle.copy"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="noMatchAlert"
         alertClass="alert-warning"
-        :alertHeadline="noMatchAlertWidget.headline"
+        cmsWidgetName="NoMatchAlertWidget"
-        :alertCopy="noMatchAlertWidget.copy"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="noServiceZip"
         alertClass="alert-warning"
-        :alertHeadline="noServiceZipWidget.headline"
+        cmsWidgetName="NoServiceZipWidget"
-        :alertCopy="noServiceZipWidget.copy"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="vinFound"
         alertClass="alert-warning"
-        :alertHeadline="vinFoundWidget.headline"
+        cmsWidgetName="VinFoundWidget"
-        :alertCopy="vinFoundWidget.copy"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="vinFoundReadOnly"
         alertClass="alert-warning"
-        :alertHeadline="vinFoundReadOnlyWidget.headline"
+        cmsWidgetName="VinFoundReadOnlyWidget"
-        :alertCopy="vinFoundReadOnlyWidget.copy"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="foundWindshieldAlert"
         alertClass="alert-warning"
-        :alertHeadline="foundWindshieldAlertWidget.headline"
+        cmsWidgetName="FoundWindshieldAlert"
-        :alertCopy="foundWindshieldAlertWidget.copy"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="vinNotFound"
         alertClass="alert-warning"
-        :alertHeadline="vinNotFoundWidget.headline"
+        cmsWidgetName="VinNotFound"
-        :alertCopy="vinNotFoundWidget.copy"
       />
       <alert
         class="my-3"
+        v-model="customAlertData"
         v-if="perfectMatchNewVinAlert"
         alertClass="alert-warning"
-        :alertHeadline="perfectMatchNewVinAlertWidget.headline"
+        cmsWidgetName="PerfectMatchNewVinAlert"
-        :alertCopy="perfectMatchNewVinAlertWidget.copy"
       />
       <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_VEHICLE_VIN, this.vin);
-      store.commit(storeMutations.UPDATE_YEAR, null);
+      store.commit(storeMutations.UPDATE_YEAR, carInfo.year);
-      store.commit(storeMutations.UPDATE_MAKE, null);
+      store.commit(storeMutations.UPDATE_MAKE, carInfo.make);
-      store.commit(storeMutations.UPDATE_MODEL, null);
+      store.commit(storeMutations.UPDATE_MODEL, carInfo.model);
-      store.commit(storeMutations.UPDATE_STYLE, null);
+      store.commit(storeMutations.UPDATE_STYLE, carInfo.style);
-      store.commit(storeMutations.UPDATE_CAR_ID, null);
+      store.commit(storeMutations.UPDATE_CAR_ID, carInfo.carId);
-      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, carInfo.category);
-      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, carInfo.imageUrl);
-      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, carInfo.imageVifNumber);
-      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageColor);
-      store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, null);
+      store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.zip);
-      store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, null);
+      store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
     },
   },
   components: {

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-0 text-body small">{{ alertCopy }}</p>
-      <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>
     <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() {
+    alertHeadline(){
-      if (typeof this.alertCopy == "string") {
+      return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'HeadlineText') : this.manualHeadline;
-        return false;
+    },
-      }
+    alertCopy(){
-      return true;
+      return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
-    }
+    },
   },
 };
 </script>