Updates for weather Alerts

src/constants/endpoints.js

@@ -90,6 +90,10 @@ const endpoints = {
         url: "/parts/api/v1/parts/supporting-items",
         method: "POST",
     },
+    GetAlertReasons: {
+        url: "/location/api/v1/location/alert-reasons",
+        method: "GET",
+    },
     GetProviderLocations: {
         url: "/location/api/v1/location/providers",
         method: "GET",

src/constants/store-actions.js

@@ -21,6 +21,7 @@ const storeActions = {
     LOOKUP_VIN_BY_PLATE: "lookupVinByPlate",
     LOOKUP_VIN_BY_ADDRESS: "lookupVinByAddress",
     LOOKUP_VIN_BY_IMAGE: "lookupVinByImage",
+    GET_ALERT_REASONS_BY_CTU: "getAlertReasonsByCtu",
     GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
     GET_PARTS: "getParts",
     GET_WIPERS: "getWipers",

src/layouts/schedule/schedule.vue

@@ -18,6 +18,17 @@
                     <span v-else class="m-0 text-body" v-html="copy"></span>
                 </span>
             </div>
+            <template v-if="displayWeatherAlert">
+                <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
                 selectableDates="custom"
                 v-model="selectedDate"
@@ -34,6 +45,7 @@
 
 <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";
@@ -53,6 +65,8 @@ import {
 } from "@/helpers/cms-content-helper";
 import { errorMessages } from "@/constants/error-messages";
 import { required } from "@/helpers/validation-rules";
+import { storeActions } from "@/constants/store-actions";
+import store from "@/store";
 
 defineRule("date-required", required(errorMessages.DATE_REQUIRED));
 
@@ -61,6 +75,7 @@ export default {
     data() {
         return {
             selectedDate: null,
+            weatherAlerts: [],
             mockSelectableDatesData: [
                 { year: 2023, month: 4, date: 13 },
                 { year: 2023, month: 4, date: 14 },
@@ -102,6 +117,9 @@ 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;
+        },
     },
     methods: {
         doesCopyContainRouterLink,
@@ -112,9 +130,37 @@ export default {
             return true;
             // NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE?
         },
+        cmsHeadlineTextFound(widgetName) {
+            return this.getCmsContent(widgetName, "HeadlineText") !== ""
+        },
+        async getAlertReasons(ctu) {
+            await this.dispatchStoreAction(
+                storeActions.GET_ALERT_REASONS_BY_CTU,
+                {
+                    ctu: ctu,
+                }
+            )
+            .then((response) => {
+                if (response.data) {
+                    this.weatherAlerts = response.data.reduce((newObj, alert) => {
+                        newObj.push({
+                            cmsWidgetName: `LocationAlert-${alert}`,
+                            alertReason: alert,
+                        });
+                        return newObj;
+                    }, []);
+                }
+            })
+            .catch(() => {
+                console.log("error fetching alert reasons..");
+            });
+        },
         getAvailableDates(startDate, endDate) {
             return this.mockSelectableDatesData;
         },
+        getServiceZipCtuCodeFromStore() {
+            return store.getters.order.serviceLocation.zipCodeCtu;
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
@@ -123,6 +169,7 @@ export default {
         },
     },
     components: {
+        alert,
         funnelHeader,
         funnelFooter,
         funnelSubHeader,
@@ -130,6 +177,9 @@ export default {
         loadingModal,
         datePicker,
     },
+    mounted() {
+        this.getAlertReasons(this.getServiceZipCtuCodeFromStore());
+    },
 };
 </script>
 

src/store/index.js

@@ -681,6 +681,15 @@ export const actions = {
         });
     },
 
+    // Location API Actions
+    getAlertReasonsByCtu(context, { ctu }) {
+        return globalMethods.callHttpClient({
+            method: endpoints.GetAlertReasons.method,
+            endpoint: `${endpoints.GetAlertReasons.url}/${ctu}`,
+            payload: {},
+        });
+    },
+
     // Misc Actions
     updateStoreWithSaveSessionResponse(
         context,