Merge pull request #1110 from Safelite/feature/richardson/CSR-1136

Tech Review updates for location alerts

src/layouts/schedule/location-alerts/location-alerts.vue

@@ -0,0 +1,53 @@
+<template>
+    <alert
+        v-for="alert in prefixedAlertReasons"
+        :key="alert.cmsWidgetName"
+        :ref="alert.cmsWidgetName"
+        class="mt-2 mb-3"
+        :cmsWidgetName="alert.cmsWidgetName"
+        alertClass="alert-warning" />
+</template>
+<script>
+import alert from "@/ux-components/alert/alert";
+import { getAlertReasons } from "@/layouts/schedule/helpers/schedule-helper";
+
+export default {
+    name: "locationAlerts",
+    data() {
+        return {
+            alertReasons: [],
+        };
+    },
+    props: {
+        cmsWidgetPrefix: {
+            type: String,
+            default: "",
+        },
+    },
+    computed: {
+        prefixedAlertReasons() {
+            return this.alertReasons.reduce((newObj, alert) => {
+                newObj.push({
+                    cmsWidgetName: `${this.cmsWidgetPrefix}${alert}`,
+                    alertReason: alert,
+                });
+                return newObj;
+            }, []);
+        },
+    },
+    methods: {
+        loadInitialData(zipCodeCtu) {
+            return getAlertReasons(zipCodeCtu);
+        },
+        initializeComponent(initialData) {
+            this.alertReasons = initialData;
+        },
+        cmsHeadlineTextFound(widgetName) {
+            return this.getCmsContent(widgetName, "HeadlineText") !== "";
+        },
+    },
+    components: {
+        alert,
+    },
+};
+</script>

src/layouts/schedule/schedule.vue

@@ -18,17 +18,7 @@
                     <span v-else class="m-0 text-body" v-html="copy"></span>
                 </span>
             </div>
-            <template v-if="displayWeatherAlert">
+            <location-alerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
-                <alert
-                    v-for="alert in weatherAlerts"
-                    v-show="cmsHeadlineTextFound(alert.cmsWidgetName)"
-                    :key="alert.cmsWidgetName"
-                    :ref="alert.cmsWidgetName"
-                    class="mt-2 mb-3"
-                    :cmsWidgetName="alert.cmsWidgetName"
-                    alertClass="alert-warning" />
-            </template>
-
             <date-picker
                 selectableDatesSetting="custom"
                 ref="datePicker"
@@ -62,13 +52,13 @@
 
 <script>
 // Components
-import alert from "@/ux-components/alert/alert";
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form, defineRule } from "vee-validate";
 import datePicker from "@/digital-components/date-picker/date-picker";
+import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
 import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
 
 // Supporting files
@@ -77,7 +67,6 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { storeActions } from "@/constants/store-actions";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
-import { getAlertReasons } from "@/layouts/schedule/helpers/schedule-helper";
 import {
     doesCopyContainRouterLink,
     splitCopyOnCMSPlaceHolder,
@@ -125,7 +114,6 @@ export default {
             selectedDate: null,
             selectedTimeSlotId: null,
             selectableDatesData: [],
-            weatherAlerts: [],
             mobileEarlyBirdFee: null,
         };
     },
@@ -167,7 +155,9 @@ export default {
         const earlyBirdPromise = baseMixin.methods.dispatchStoreAction(
             storeActions.GET_MOBILE_EARLY_BIRD_FEE
         );
-        const alertReasonsPromise = getAlertReasons(store.getters.order.serviceLocation.zipCodeCtu);
+        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
+            store.getters.order.serviceLocation.zipCodeCtu
+        );
 
         // Settle promises and get results
         const promiseResultMap = [
@@ -198,8 +188,8 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.setData(resultMap.alertReasons);
             vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
+            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
             vm.selectableDatesData = resultMap.datePickerInitialData.initialShopTimeSlotsResponse;
             if (resultMap.earlyBird) {
                 vm.mobileEarlyBirdFee = resultMap.pricingResults[0];
@@ -214,9 +204,6 @@ export default {
             // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
             return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
         },
-        displayWeatherAlert() {
-            return this.weatherAlerts.length > 0;
-        },
         appointmentType() {
             return this.$store.getters.order.serviceLocation.appointmentType;
         },
@@ -268,34 +255,6 @@ export default {
             );
             return newShopTimeSlots;
         },
-        setData(alertReasonsData) {
-            if (alertReasonsData) {
-                this.convertReasonsToCmsAlerts(alertReasonsData);
-            }
-        },
-        cmsHeadlineTextFound(widgetName) {
-            return this.getCmsContent(widgetName, "HeadlineText") !== "";
-        },
-        convertReasonsToCmsAlerts(data) {
-            this.weatherAlerts = data.reduce((newObj, alert) => {
-                newObj.push({
-                    cmsWidgetName: `LocationAlert-${alert}`,
-                    alertReason: alert,
-                });
-                return newObj;
-            }, []);
-        },
-        async getWeatherAlertReasons(ctu) {
-            await getAlertReasons(ctu)
-                .then((response) => {
-                    if (response.data) {
-                        this.convertReasonsToCmsAlerts(response.data);
-                    }
-                })
-                .catch(() => {
-                    console.log("error fetching alert reasons..");
-                });
-        },
         getServiceZipCtuCodeFromStore() {
             return store.getters.order.serviceLocation.zipCodeCtu;
         },
@@ -342,15 +301,14 @@ export default {
         },
     },
     components: {
-        alert,
         funnelHeader,
         funnelFooter,
         funnelSubHeader,
         Form,
         loadingModal,
         datePicker,
+        locationAlerts,
         timeSlotModalQuestion,
     },
-    mounted() {},
 };
 </script>