From 3991bc52af2f87c1df651366c38be183d07c2ac0 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 2 Oct 2023 15:40:47 -0400
Subject: [PATCH] Location Alerts on schedule page

Mocked result
Linting on shop question.
---
 src/constants/endpoints.js                    |  4 ++
 .../schedule-page/helpers/schedule-helper.js  | 30 ++++++++++
 .../location-alerts/location-alerts.vue       | 57 +++++++++++++++++++
 src/layouts/schedule-page/schedule-page.vue   | 18 +++++-
 .../shop-question/shop-question.vue           |  6 +-
 src/store/index.js                            | 10 ++++
 src/styles/ux-variables-svg-strings.scss      |  1 +
 7 files changed, 123 insertions(+), 3 deletions(-)
 create mode 100644 src/layouts/schedule-page/helpers/schedule-helper.js
 create mode 100644 src/layouts/schedule-page/location-alerts/location-alerts.vue
 create mode 100644 src/styles/ux-variables-svg-strings.scss

diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index a34d8990..162d90bf 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -11,6 +11,10 @@ const endpoints = Object.freeze({
         url: (applicationAbbreviation, pageName) => `/content/api/v1/content/${applicationAbbreviation}/${pageName}`,
         method: 'GET'
     },
+    GetAlertReasons: {
+        url: '/location/api/v1/location/alert-reasons',
+        method: 'GET'
+    },
     GetVehicleYears: {
         url: '/vehicle/api/v1/vehicle/years',
         method: 'GET'
diff --git a/src/layouts/schedule-page/helpers/schedule-helper.js b/src/layouts/schedule-page/helpers/schedule-helper.js
new file mode 100644
index 00000000..7347bfca
--- /dev/null
+++ b/src/layouts/schedule-page/helpers/schedule-helper.js
@@ -0,0 +1,30 @@
+import { useMainStore } from '@/store';
+
+const getAlertReasons = async (ctu) => {
+    const store = useMainStore();
+    const alertReasons = await store.getAlertReasonsByCtu(ctu);
+
+    return Promise.resolve(alertReasons);
+};
+
+// This function will go away after testing.
+// The Service already went through testing and had these removed from it.
+export async function mockGetAlertReasons(ctu) {
+    let retList = [];
+    if (ctu === '01853') { // Ocala, FL 34470
+        retList = [
+            'Hurricane', 'ExtremeTemperature'
+        ];
+    } else if (ctu === '01814') { // Phoenix, AZ 85026
+        retList = [
+            'ExtremeTemperature'
+        ];
+    } else if (ctu === '01845') { // Raleigh, NC 27601
+        retList = [
+            'Hurricane'
+        ];
+    }
+    return Promise.resolve(retList);
+}
+
+export default getAlertReasons;
diff --git a/src/layouts/schedule-page/location-alerts/location-alerts.vue b/src/layouts/schedule-page/location-alerts/location-alerts.vue
new file mode 100644
index 00000000..46a84e5c
--- /dev/null
+++ b/src/layouts/schedule-page/location-alerts/location-alerts.vue
@@ -0,0 +1,57 @@
+<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.vue';
+import { mockGetAlertReasons } from '@/layouts/schedule-page/helpers/schedule-helper';
+
+export default {
+    name: 'location-alerts',
+    components: {
+        alert
+    },
+    props: {
+        cmsWidgetPrefix: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            alertReasons: []
+        };
+    },
+    computed: {
+        prefixedAlertReasons() {
+            return this.alertReasons.reduce((newObj, alertReason) => {
+                newObj.push({
+                    cmsWidgetName: `${this.cmsWidgetPrefix}${alertReason}`,
+                    alertReason
+                });
+                return newObj;
+            }, []);
+        }
+    },
+    methods: {
+        loadInitialData(serviceLocationCtu, providerCtu) {
+            let ctuToUse = serviceLocationCtu;
+            if (providerCtu) {
+                ctuToUse = providerCtu;
+            }
+            return mockGetAlertReasons(ctuToUse); // Change to getAlertReasons after testing.
+        },
+        initializeComponent(initialData) {
+            this.alertReasons = initialData;
+        },
+        cmsHeadlineTextFound(widgetName) {
+            return this.getCmsContent(widgetName, 'HeadlineText') !== '';
+        }
+    }
+};
+</script>
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
index 9d6116ec..8ba01a3e 100644
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -18,6 +18,9 @@
                     marginTopSizeOverride="1" />
             </template>
             <div class="main-content-container">
+                <locationAlerts
+                    ref="locationAlerts"
+                    cmsWidgetPrefix="LocationAlert-" />
                 <siteFooter
                     ref="siteFooter"
                     class="mt-5"
@@ -33,6 +36,7 @@
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import textBlock from '@/digital-components/text-block/text-block.vue';
 
@@ -49,6 +53,7 @@ export default {
     components: {
         siteHeader,
         siteSubHeader,
+        locationAlerts,
         siteFooter,
         textBlock,
         // eslint-disable-next-line vue/no-reserved-component-names
@@ -59,17 +64,28 @@ export default {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
+        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
+            useMainStore().order.serviceLocation.zipCodeCtu,
+            useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu
+        );
+
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
                 promise: cmsContentPromise
-            }];
+            },
+            {
+                resultKey: 'alertReasons',
+                promise: alertReasonsPromise
+            }
+        ];
 
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
         });
     },
     setup() {
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 53786682..220f4ad4 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -36,7 +36,7 @@
               :text="showMoreShopsLinkText"
               href="#!"
               :aria-label="showMoreShopsLinkText"
-              @click-event="getNextShopsFromList" />
+              @clickEvent="getNextShopsFromList" />
       </div>
   </transition>
 </template>
@@ -254,6 +254,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "@/styles/ux-variables-svg-strings.scss";
+
 .shop-question {
   margin-top: 1rem;
   text-align: center;
@@ -265,7 +267,7 @@ export default {
   }
 
   .drop-off-alert {
-    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    background: url($svg-drop-off-alert);
     background-repeat: no-repeat;
     background-size: 0.75rem;
     background-position: 0.5rem 0.75rem;
diff --git a/src/store/index.js b/src/store/index.js
index 47c7747f..20b48012 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1393,6 +1393,16 @@ export const useMainStore = defineStore({
             }
         },
 
+        // Location API Actions
+        getAlertReasonsByCtu(ctu) {
+            return globalMethods.callHttpClient({
+                method: endpoints.GetAlertReasons.method,
+                endpoint: `${endpoints.GetAlertReasons.url}/${ctu}`,
+                payload: {},
+                logApiCall: true
+            });
+        },
+
         // Analytics Actions
         logExperimentExposure({ userId, sessionKey, pageName, experiment }) {
             return globalMethods.callHttpClient({
diff --git a/src/styles/ux-variables-svg-strings.scss b/src/styles/ux-variables-svg-strings.scss
new file mode 100644
index 00000000..4261e7d0
--- /dev/null
+++ b/src/styles/ux-variables-svg-strings.scss
@@ -0,0 +1 @@
+$svg-drop-off-alert: "data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A";
\ No newline at end of file