Merge remote-tracking branch 'origin/develop' into feature/CSR-1137

src/digital-components/date-picker/date-picker.vue

@@ -22,7 +22,6 @@
                 <div class="separator-line"></div>
                 <div class="nav-back ps-3"><button></button></div>
                 <div class="nav-forward pe-3"><button></button></div>
-                <!-- TODO Accessibility: Do the days of the week need to be read? -->
                 <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
                 <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
                 <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
@@ -84,7 +83,6 @@ export default {
             months: null,
             disableViewMoreDatesButton: false,
             selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
-            today: null,
             hideSomeDaysForInitialView: null,
         };
     },
@@ -112,6 +110,12 @@ export default {
         },
     },
     computed: {
+        today() {
+            if (this.todayOverrideDateString) {
+                return new Date(this.todayOverrideDateString);
+            }
+            return new Date();
+        },
         todayMonthIndex() {
             return this.today.getMonth() + 1;
         },
@@ -151,39 +155,31 @@ export default {
             this.$emit("date-clicked");
         },
         getWeekStartDate(date) {
-            // Get the day of the week for date
+            const dayOfWeek = date.getDay();
-            let dayOfWeek = date.getDay();
-
             // Subtract the day of the week from date to get the date of Sunday
-            let sunday = new Date(date);
+            const sunday = new Date(date);
             sunday.setDate(sunday.getDate() - dayOfWeek);
-
-            // Return the date of Sunday
             return sunday;
         },
         getWeekEndDate(date) {
-            const currentDay = date.getDay(); // Get the day of the week (0 = Sunday, 1 = Monday, etc.)
+            const dayOfWeek = date.getDay();
-            const daysUntilSaturday = 6 - currentDay; // Calculate the number of days until Saturday
+            const daysUntilSaturday = 6 - dayOfWeek; // Calculate the number of days until Saturday
-
             // Clone the given date and add the remaining days until Saturday
             const saturday = new Date(date);
             saturday.setDate(date.getDate() + daysUntilSaturday);
-
             return saturday;
         },
         getNextWeekSunday(date) {
-            const currentDay = date.getDay(); // Get the day of the week (0 = Sunday, 1 = Monday, etc.)
+            const dayOfWeek = date.getDay();
-            const daysUntilNextSunday = currentDay === 0 ? 7 : 7 - currentDay; // Calculate the number of days until the next Sunday
+            const daysUntilNextSunday = 7 - dayOfWeek; // Calculate the number of days until the next Sunday
-
             // Clone the given date and add the remaining days until Sunday
             const nextSunday = new Date(date);
             nextSunday.setDate(date.getDate() + daysUntilNextSunday);
-
             return nextSunday;
         },
         getInitialViewWeeks(today, initialViewRowsToShow) {
-            // TODO: this only is for future direction; create logic for past direction
+            // TODO: this only is for future direction; need to create logic for past direction
-            let weeks = [];
+            const weeks = [];
             let weekStartDate = this.getWeekStartDate(today);
             let weekEndDate = this.getWeekEndDate(today);
             for (let i = 0; i < initialViewRowsToShow; i++) {
@@ -200,14 +196,19 @@ export default {
             return weeks;
         },
         async loadInitialData(config) {
-            // CALLED FROM CONSUMING COMPONENT BEFORE DATE-PICKER APPEARS
+            let todayDate;
-            const todayDate = config.todayOverrideDateString
+            if (this.today) {
-                ? new Date(config.todayOverrideDateString)
+                todayDate = this.today;
-                : new Date();
+            } else if (config.todayOverrideDateString) {
+                todayDate = new Date(config.todayOverrideDateString);
+            } else {
+                todayDate = new Date();
+            }
 
-            let todayMonthIndex = todayDate.getMonth() + 1;
+            const todayMonthIndex = todayDate.getMonth() + 1;
-            let todayYearNum = todayDate.getFullYear();
+            const todayYearNum = todayDate.getFullYear();
-            let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
+            // TODO - set up currentMonthStart if direction is PAST:
+            // let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
             let currentMonthEnd = new Date(todayYearNum, todayMonthIndex, 0);
 
             let calendarViewDirection = "none";
@@ -219,10 +220,10 @@ export default {
                 config.initialViewRowsToShow
             );
 
-            let initialViewStartDate = todayDate;
+            const initialViewStartDate = todayDate;
-            let initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
+            const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
-            let saturday1month = initialViewWeeks[0].weekEndDate.getMonth();
+            const saturday1month = initialViewWeeks[0].weekEndDate.getMonth();
-            let sunday5month =
+            const sunday5month =
                 initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.getMonth();
 
             let hideSomeDaysForInitialView = false;
@@ -284,9 +285,9 @@ export default {
                         // Growing from 0 to 1
                         time = Math.min(1, (timestamp - start) / duration);
 
-                    let percentageNew = timingFunc(time);
+                    const percentageNew = timingFunc(time);
-                    let distanceToGo = targetY;
+                    const distanceToGo = targetY;
-                    let thisDistance = percentageNew * distanceToGo;
+                    const thisDistance = percentageNew * distanceToGo;
 
                     wrapper.scrollTo(0, initY + thisDistance);
 
@@ -305,13 +306,12 @@ export default {
         },
 
         async setCalendarData(config = {}) {
-            this.today = config.todayDate;
             this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
-            let hideSecondMonth = config.hideSecondMonth;
+            const hideSecondMonth = config.hideSecondMonth;
             const direction = config.calendarViewDirection;
 
-            const monthsAfterToLoadOffset = 12; // TO BE MADE "CONSTANTS"
+            const monthsAfterToLoadOffset = 12;
-            const monthsBeforeToLoadOffset = 36; // TO BE MADE "CONSTANTS"
+            const monthsBeforeToLoadOffset = 36;
             config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
                 this.selectableDatesData.push(selectableDate);
             });
@@ -382,25 +382,25 @@ export default {
                 }
             }
 
-            const monthEndDate = new Date(yearNum, monthIndex, 0); // BOTH
+            const monthEndDate = new Date(yearNum, monthIndex, 0);
-            let monthEndDateNum = monthEndDate.getDate(); // BOTH
+            let monthEndDateNum = monthEndDate.getDate();
 
             if (
                 offset === 0 &&
                 calendarViewDirection === "past" &&
                 monthEndDateNum > this.currentWeekEndDateNum
             ) {
-                monthEndDateNum = this.currentWeekEndDateNum; // PAST
+                monthEndDateNum = this.currentWeekEndDateNum;
             }
 
             const monthStartDateNum =
                 offset === 0 && calendarViewDirection === "future"
                     ? this.currentWeekStartDateNum
-                    : 1; // FUTURE
+                    : 1;
-            const monthStartDate = new Date(yearNum, monthIndex - 1, monthStartDateNum); // BOTH
+            const monthStartDate = new Date(yearNum, monthIndex - 1, monthStartDateNum);
 
-            const startDateDayIndex = monthStartDate.getDay(); // FUTURE
+            const startDateDayIndex = monthStartDate.getDay();
-            const endDateDayIndex = monthEndDate.getDay(); // PAST
+            const endDateDayIndex = monthEndDate.getDay();
 
             if (Math.abs(offset) === 1 && hideSecondMonth) {
                 monthClass = monthClass + " month-hidden";
@@ -424,7 +424,7 @@ export default {
             // populate dates array
             for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
                 let dayClasses = "";
-                let dateString =
+                const dateString =
                     yearNum.toString() +
                     "-" +
                     forceTwoDigitString(monthIndex) +
@@ -514,7 +514,7 @@ export default {
                     monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString
                 );
                 this.isLoading = false;
-                this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this removes hidden styling on days
+                this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days
                 monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", "");
                 this.scrollToElement(monthToShow.monthString);
 

src/digital-components/text-block/text-block.vue

@@ -1,7 +1,7 @@
 <template>
     <div
-        class="text-block w-100"
+        class="text-block w-100 mt-2"
-        :class="[justifyText, typeStyle, fontWeight, margin]"
+        :class="[justifyText, typeStyle, fontWeight]"
         v-html="this.TextBlockCopy"></div>
 </template>
 
@@ -10,12 +10,7 @@ export default {
     name: "textBlock",
     props: {
         customText: String, // used to allow the insert of token values into textblock
-        justifyText: String, // left, right, center
+        justifyText: String, // right, center (left is default)
-        margin: {
-            // bootstrap margin to apply to the block.
-            type: String,
-            default: "mt-2",
-        },
         typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
         fontWeight: String, // bold=500, default is 400
         cmsWidgetName: String,
@@ -33,15 +28,11 @@ export default {
 
 <style lang="scss" scoped>
 .text-block {
-    display: flex;
-    &.left {
-        justify-content: flex-start;
-    }
     &.right {
-        justify-content: flex-end;
+        text-align: right;
     }
     &.center {
-        justify-content: center;
+        text-align: center;
     }
     &.bold {
         font-weight: 500;

src/layouts/demo-date-picker/demo-date-picker.spec.js

@@ -1,19 +0,0 @@
-import demoDatePicker from "./demo-date-picker";
-
-// Supporting Files
-import { shallowMount } from "@vue/test-utils";
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
-
-describe("demo-date-picker.vue", () => {
-    test.only("test TK...", () => {});
-});
-
-function setupMocks({ mountOptionsMockData = {} }) {
-    const mountOptions = getMountOptions({
-        ...mountOptionsMockData,
-    });
-
-    const wrapper = shallowMount(demoDatePicker, mountOptions);
-
-    return { wrapper };
-}

src/layouts/demo-date-picker/demo-date-picker.vue

@@ -1,90 +0,0 @@
-<template>
-    <div class="page-container-grouped-styles">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-        <div class="">
-            <div class="rounded text-center">
-                <div class="fade-on-route-transition">
-                    <date-picker
-                        selectableDates="custom"
-                        v-model="selectedDate"
-                        :customSelectableDatesCallback="getAvailableDates" />
-                    <!-- EXAMPLE THAT OVERRIDES TODAY BY PASSING STRING --
-                    <date-picker
-                        selectableDates="custom"
-                        v-model="selectedDate"
-                        :customSelectableDatesCallback="getAvailableDates"
-                        todayOverrideDateString="2022-12-30T03:00:00" /> -->
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-// Components
-import datePicker from "@/digital-components/date-picker/date-picker";
-import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-
-// Supporting files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
-import { storeActions } from "@/constants/store-actions";
-import store from "@/store";
-
-import baseMixin from "@/mixins/base-mixin";
-
-export default {
-    name: "demo-date-picker",
-    data() {
-        return {
-            selectedDate: null,
-            // selectedDate: {  // USE THIS FORMAT FOR A PRE-SELECTED DATE ON LOAD
-            //     year: 2023,
-            //     month: 3, // use 1-based index for months
-            //     date: 21,
-            // },
-            mockSelectableDatesData: [
-                { year: 2023, month: 3, date: 4 },
-                { year: 2023, month: 3, date: 5 },
-                { year: 2023, month: 3, date: 22 },
-                { year: 2023, month: 4, date: 13 },
-                { year: 2023, month: 4, date: 7 },
-                { year: 2023, month: 4, date: 14 },
-                { year: 2023, month: 4, date: 26 },
-                { year: 2023, month: 5, date: 21 },
-                { year: 2023, month: 5, date: 23 },
-                { year: 2023, month: 5, date: 25 },
-            ],
-        };
-    },
-    computed: {
-        todayDate() {
-            const today = new Date();
-            return today.toDateString();
-        },
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            return true;
-        },
-        getAvailableDates(startDate, endDate) {
-            this.mockSelectableDatesData.push(endDate);
-            // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-            // temporary test method that adds endDate to list of selectable dates
-            return this.mockSelectableDatesData;
-        },
-    },
-    components: {
-        datePicker,
-        funnelHeader,
-    },
-};
-</script>
-
-<style lang="scss">
-// .page-container-grouped-styles {
-//     padding: 0 .5rem !important;
-// }
-</style>

src/layouts/review/review.spec.js

@@ -1,3 +0,0 @@
-describe("Review Page", () => {
-    test.todo("Add more tests as specific functionality is added.");
-});

src/layouts/review/review.vue

@@ -1,102 +0,0 @@
-<template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <!-- When customer-details is added: v-slot="{ meta }" -->
-        <div class="page-container-grouped-styles">
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <vehicleBanner
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-
-            <textBlock
-                :customText="subHeaderTitle"
-                typeStyle="h5"
-                justifyText="text-center"
-                margin="mt-1"
-                class="dark-header" />
-            <textBlock
-                :customText="subHeaderBody"
-                typeStyle="body"
-                justifyText="left"
-                margin="mt-0 mb-2" />
-
-            <buttonMain
-                ref="buttonMain"
-                isPrimary
-                :buttonText="forwardButtonText"
-                loaderColor="white"
-                @click-event="forwardButtonAction" />
-
-            <funnelFooter
-                cmsWidgetName="FunnelFooterWidget"
-                @back-clicked="backButtonAction"
-                @ForwardClicked="forwardButtonAction" />
-        </div>
-    </Form>
-</template>
-
-<script>
-import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import buttonMain from "@/ux-components/button-main/button-main";
-import textBlock from "@/digital-components/text-block/text-block";
-
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
-
-export default {
-    name: "review",
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: "cmsContent",
-                promise: cmsContentPromise,
-            },
-        ];
-
-        const resultMap = await settleAllPromises(promiseResultMap);
-
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-        });
-    },
-    data() {
-        return {};
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            return true;
-        },
-        backButtonAction() {},
-        forwardButtonAction() {},
-    },
-    computed: {
-        subHeaderTitle() {
-            return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
-        },
-        subHeaderBody() {
-            return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
-        },
-        forwardButtonText() {
-            return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
-        },
-    },
-    components: {
-        funnelHeader,
-        funnelFooter,
-        vehicleBanner,
-        buttonMain,
-        textBlock,
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-.dark-header {
-    color: $black;
-}
-</style>

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,24 +18,13 @@
                     <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"
                 v-model="selectedDate"
                 :customSelectableDatesCallback="getAvailableDatesMethod"
                 @date-clicked="openInshopTimeSlotsModal" />
-            <!-- todayOverrideDateString="2023-08-06T03:00:00" -->
             <time-slot-modal-question
                 ref="timeSlotModalQuestion"
                 cmsWidgetName="TimeSlotModalQuestion"
@@ -63,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
@@ -78,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,
@@ -130,7 +118,6 @@ export default {
                 isPremiumAppointment: null,
             },
             selectableDatesData: [],
-            weatherAlerts: [],
             mobilePremiumAppointmentFee: null,
         };
     },
@@ -142,22 +129,6 @@ export default {
             selectableDatesSetting: "custom",
             initialViewRowsToShow: 5,
             customSelectableDatesCallback: getAvailableDates,
-
-            /* vvvvv SAVE THESE FOR TESTING PURPOSES FOR NOW vvvvv
-
-            // todayOverrideDateString: "2023-04-29T03:00:00",  // show partial
-            // todayOverrideDateString: "2023-04-30T03:00:00",  //
-            // todayOverrideDateString: "2023-05-02T03:00:00",  // ONE MONTH ONLY
-            // todayOverrideDateString: "2023-05-06T03:00:00",  // ONE MONTH ONLY
-            // todayOverrideDateString: "2023-05-07T03:00:00",  // show partial
-            // todayOverrideDateString: "2023-05-30T03:00:00",  //
-            // todayOverrideDateString: "2023-06-30T03:00:00",  //
-            // todayOverrideDateString: "2023-07-01T03:00:00",  // show partial && ONE MONTH ONLY
-            // todayOverrideDateString: "2023-07-02T03:00:00",  // ONE MONTH ONLY
-            // todayOverrideDateString: "2023-07-12T03:00:00",  // show partial
-            // todayOverrideDateString: "2023-08-31T03:00:00",
-            // todayOverrideDateString: "2023-09-30T03:00:00",  // show partial
-            */
         });
 
         // Price EARLY BIRD pre-emptively to allow for asynchronous call to pricing
@@ -172,7 +143,9 @@ export default {
         const premiumFeePromise = 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 = [
@@ -203,8 +176,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.premiumFee) {
                 vm.mobilePremiumAppointmentFee = resultMap.pricingResults[0];
@@ -219,9 +192,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;
         },
@@ -273,34 +243,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;
         },
@@ -350,15 +292,14 @@ export default {
         },
     },
     components: {
-        alert,
         funnelHeader,
         funnelFooter,
         funnelSubHeader,
         Form,
         loadingModal,
         datePicker,
+        locationAlerts,
         timeSlotModalQuestion,
     },
-    mounted() {},
 };
 </script>

src/layouts/service-location/shop-question/shop-question.spec.js

@@ -179,19 +179,19 @@ describe("shop-question.vue", () => {
         expect(wrapper.vm.answers).toEqual([
             {
                 buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
-                buttonLabel: "4403 Executive Pkwy",
+                buttonLabel: "Westerville",
                 buttonLabelSubCopy: "5 mi",
                 value: "003335",
             },
             {
                 buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
-                buttonLabel: "760 Dearborn Park Ln",
+                buttonLabel: "Worthington",
                 buttonLabelSubCopy: "10.5 mi",
                 value: "001820",
             },
             {
                 buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
-                buttonLabel: "5015 N High St",
+                buttonLabel: "Columbus",
                 buttonLabelSubCopy: "11.5 mi",
                 value: "003343",
             },
@@ -320,19 +320,19 @@ describe("shop-question.vue", () => {
         const displayedAnswers = [
             {
                 buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
-                buttonLabel: "4403 Executive Pkwy",
+                buttonLabel: "Westerville",
                 buttonLabelSubCopy: "5 mi",
                 value: "003335",
             },
             {
                 buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
-                buttonLabel: "760 Dearborn Park Ln",
+                buttonLabel: "Worthington",
                 buttonLabelSubCopy: "10.5 mi",
                 value: "001820",
             },
             {
                 buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
-                buttonLabel: "5015 N High St",
+                buttonLabel: "Columbus",
                 buttonLabelSubCopy: "11.5 mi",
                 value: "003343",
             },
@@ -388,37 +388,37 @@ describe("shop-question.vue", () => {
         expect(wrapper.vm.answers).toEqual([
             {
                 buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
-                buttonLabel: "4403 Executive Pkwy",
+                buttonLabel: "Westerville",
                 buttonLabelSubCopy: "5 mi",
                 value: "003335",
             },
             {
                 buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
-                buttonLabel: "760 Dearborn Park Ln",
+                buttonLabel: "Worthington",
                 buttonLabelSubCopy: "10.5 mi",
                 value: "001820",
             },
             {
                 buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
-                buttonLabel: "5015 N High St",
+                buttonLabel: "Columbus",
                 buttonLabelSubCopy: "11.5 mi",
                 value: "003343",
             },
             {
                 buttonBodyCopy: "1670 Harmon Ave, Columbus, OH 43223",
-                buttonLabel: "1670 Harmon Ave",
+                buttonLabel: "Columbus",
                 buttonLabelSubCopy: "16 mi",
                 value: "006747",
             },
             {
                 buttonBodyCopy: "3938 Powell Rd, Powell, OH 43065",
-                buttonLabel: "3938 Powell Rd",
+                buttonLabel: "Powell",
                 buttonLabelSubCopy: "16.5 mi",
                 value: "003341",
             },
             {
                 buttonBodyCopy: "4580 W Broad St, Columbus, OH 43228",
-                buttonLabel: "4580 W Broad St",
+                buttonLabel: "Columbus",
                 buttonLabelSubCopy: "19.5 mi",
                 value: "003342",
             },

src/layouts/service-location/shop-question/shop-question.vue

@@ -143,7 +143,7 @@ export default {
                 const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
 
                 return {
-                    buttonLabel: streetAddress,
+                    buttonLabel: city,
                     buttonLabelSubCopy: `${distanceInMiles} mi`,
                     buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
                     value: shopProvider.providerNumber,

src/router/index.js

@@ -28,27 +28,7 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 import { experimentTriggers } from "../constants/experiments";
 import { applicationConfig } from "../constants/application-config";
 
-// Components
-import datePicker from "@/digital-components/date-picker/date-picker.vue";
-import demoDatePicker from "@/layouts/demo-date-picker/demo-date-picker.vue";
-import review from "@/layouts/review/review";
-
 const routes = [
-    {
-        path: "/demo-date-picker", // This is a temporary route for testing.
-        name: "demo-date-picker",
-        component: demoDatePicker,
-    },
-    {
-        path: "/date-picker", // This is a temporary route for testing.
-        name: "date-picker",
-        component: datePicker,
-    },
-    {
-        path: "/review", // This is a temporary route for testing.
-        name: "review",
-        component: review,
-    },
     {
         path: "/",
         name: "root",