Merge branch 'develop' into feature/CSR-1112A

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",
+    },
     GetProviders: {
         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/helpers/schedule-helper.js

@@ -0,0 +1,13 @@
+import { storeActions } from "@/constants/store-actions";
+import baseMixin from "@/mixins/base-mixin.js";
+
+export async function getAlertReasons(ctu) {
+    const alertReasons = await baseMixin.methods.dispatchStoreAction(
+        storeActions.GET_ALERT_REASONS_BY_CTU,
+        {
+            ctu: ctu,
+        }
+    );
+
+    return Promise.resolve(alertReasons);
+}

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";
@@ -45,6 +57,7 @@ import datePicker from "@/digital-components/date-picker/date-picker";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 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,
@@ -53,6 +66,7 @@ import {
 } from "@/helpers/cms-content-helper";
 import { errorMessages } from "@/constants/error-messages";
 import { required } from "@/helpers/validation-rules";
+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 },
@@ -79,12 +94,18 @@ export default {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
+        const alertReasonsPromise = getAlertReasons(store.getters.order.serviceLocation.zipCodeCtu);
+
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "alertReasons",
+                promise: alertReasonsPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -92,6 +113,7 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.setData(resultMap.alertReasons);
         });
     },
     computed: {
@@ -102,6 +124,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 +137,40 @@ export default {
             return true;
             // NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE?
         },
+        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..");
+                });
+        },
         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 +179,7 @@ export default {
         },
     },
     components: {
+        alert,
         funnelHeader,
         funnelFooter,
         funnelSubHeader,
@@ -130,6 +187,7 @@ export default {
         loadingModal,
         datePicker,
     },
+    mounted() {},
 };
 </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,