some updates

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

@@ -172,10 +172,6 @@ export default {
         modelValue: {
             type: Object
         },
-        mobileZipCode: {
-            type: String,
-            default: null
-        },
         todayOverrideDateString: {
             // keep for use in unit tests to override today's date
             type: String,

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

@@ -4,11 +4,14 @@
         :key="alert.cmsWidgetName"
         :ref="alert.cmsWidgetName"
         class="mt-2 mb-3"
+        :manualHeadline="alert.manualHeadline"
         :cmsWidgetName="alert.cmsWidgetName"
         alertClass="alert-warning" />
 </template>
 <script>
 import alert from '@/ux-components/alert/alert.vue';
+import widgetFields from '@/constants/cms-widget-fields';
+import { toTitleCase } from '@/helpers/text-helper.js';
 import getAlertReasons from '@/layouts/schedule-page/helpers/schedule-helper';
 
 export default {
@@ -20,6 +23,10 @@ export default {
         cmsWidgetPrefix: {
             type: String,
             default: ''
+        },
+        city: {
+            type: String,
+            default: ''
         }
     },
     data() {
@@ -29,9 +36,15 @@ export default {
     },
     computed: {
         prefixedAlertReasons() {
+            if (!this.alertReasons || this.alertReasons.length === 0) {
+                return [];
+            }
+
+            console.log('Prefixed Alert Reasons:', this.alertReasons);
             return this.alertReasons.reduce((newObj, alertReason) => {
                 newObj.push({
                     cmsWidgetName: `${this.cmsWidgetPrefix}${alertReason}`,
+                    manualHeadline: this.getCmsCopyForAlertReason(alertReason),
                     alertReason
                 });
                 return newObj;
@@ -51,6 +64,12 @@ export default {
         },
         cmsHeadlineTextFound(widgetName) {
             return this.getCmsContent(widgetName, 'HeadlineText') !== '';
+        },
+        getCmsCopyForAlertReason(alertReason) {
+            const widgetName = `${this.cmsWidgetPrefix}${alertReason}`;
+            let content = this.getCmsContent(widgetName, widgetFields.ALERT_WIDGET.HEADLINE_TEXT);
+            content = content.replace('{custom:city}', toTitleCase(this.city));
+            return content;
         }
     }
 };

src/layouts/schedule-page/schedule-page.vue

@@ -19,9 +19,9 @@
                         <serviceLocation
                             ref="serviceLocation"
                             @appointmentTypeChanged="appointmentTypeChangedFromServiceLocation"
+                            @cityUpdated="cityUpdatedFromServiceLocation"
                             @mobileZipUpdated="mobileZipUpdatedFromServiceLocation"
-                            @providerChanged="providerChangedFromServiceLocation"
+                            @providerChanged="providerChangedFromServiceLocation" />
-                            @serviceLocationUpdated="serviceLocationUpdatedFromServiceLocation" />
                     </div>
                 </div>
                 <div
@@ -30,7 +30,8 @@
                     <div class="date-picker-content-container">
                         <locationAlerts
                             ref="locationAlerts"
-                            cmsWidgetPrefix="LocationAlert-" />
+                            cmsWidgetPrefix="LocationAlert-"
+                            :city="selectedServiceLocationCity" />
                         <datePicker
                             ref="datePicker"
                             v-model="selectedTimeSlotInfo"
@@ -244,10 +245,6 @@ export default {
                 resultKey: 'cmsContent',
                 promise: cmsContentPromise
             },
-            // {
-            //    resultKey: 'datePickerInitialData',
-            //    promise: datePickerInitialDataPromise
-            // },
             {
                 resultKey: 'mobileFeePart',
                 promise: mobileFeePartPromise
@@ -292,8 +289,6 @@ export default {
             };
 
             vm.setCmsContent(resultMap.cmsContent);
-            // vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
-            // vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
             vm.$refs.serviceLocation.initializeComponent(serviceLocationData);
             await vm.setData(resultMap.premiumFeeWithPrice, initialServiceLocationObj);
             showIssLoadingModal(false);
@@ -316,6 +311,7 @@ export default {
             selectedDate: this.getSelectedDate(),
             selectedProvider: this.getSelectedProvider(),
             selectedServiceLocation: this.getServiceLocation(),
+            selectedServiceLocationCity: this.getServiceLocationCity(),
             selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
             showDatePickerError: false
         };
@@ -374,10 +370,19 @@ export default {
             return useMainStore().order.serviceLocation.zipCode !== null;
         },
         async setData(premiumFeeWithPriceResponse, initialServiceLocationObj) {
+            this.selectedServiceLocation = initialServiceLocationObj;
             this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse
                 ? premiumFeeWithPriceResponse[0]
                 : null;
-            this.selectedServiceLocation = initialServiceLocationObj;
+
+            if (initialServiceLocationObj?.zipCodeCtu) {
+                this.$refs.locationAlerts.loadInitialData(
+                    initialServiceLocationObj.zipCodeCtu,
+                    initialServiceLocationObj.provider?.ctu
+                ).then((alertReasons) => {
+                    this.$refs.locationAlerts.initializeComponent(alertReasons.data);
+                });
+            }
 
             if (this.selectedAppointmentType !== AppointmentTypeStrings.MOBILE
                 && this.selectedAppointmentType !== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
@@ -393,16 +398,15 @@ export default {
                 if (this.inShopDatesData?.initialShopTimeSlotsResponse?.days?.length > 0) {
                     this.selectableDatesData = this.inShopDatesData.initialShopTimeSlotsResponse;
                     this.$refs.datePicker.initializeComponent(this.inShopDatesData);
-                } else {
-                    console.log('Appointment Type is In-Shop, but no existing data. Need to fetch here?...');
                 }
             } else if (this.mobileDatesData?.initialShopTimeSlotsResponse?.days?.length > 0) {
                 this.selectableDatesData = this.mobileDatesData.initialShopTimeSlotsResponse;
                 this.$refs.datePicker.initializeComponent(this.mobileDatesData);
-            } else {
-                console.log('Appointment Type is Mobile, but no existing data. Need to fetch here?...');
             }
         },
+        cityUpdatedFromServiceLocation(newCity) {
+            this.selectedServiceLocationCity = newCity;
+        },
         dateSelectedFromPicker(date) {
             this.selectedDate = date;
             this.showDatePickerError = false;
@@ -567,6 +571,9 @@ export default {
         getServiceLocation() {
             return this.mainStore.order.serviceLocation;
         },
+        getServiceLocationCity() {
+            return this.mainStore.order.serviceLocation?.city;
+        },
         handleMqlChange(e) {
             this.isMobileView = !e.matches;
         },
@@ -581,7 +588,6 @@ export default {
             }
         },
         providerChangedFromServiceLocation(newProvider) {
-            console.log('Parent - Provider Changed from Service Location:', newProvider);
             this.selectedProvider = newProvider?.provider;
 
             if (newProvider?.refreshDatePicker) {
@@ -589,10 +595,6 @@ export default {
                 this.refreshDatePicker();
             }
         },
-        serviceLocationUpdatedFromServiceLocation(newServiceLocation) {
-            console.log('Parent - Service Location Updated from Service Location:', newServiceLocation);
-            this.selectedServiceLocation = newServiceLocation;
-        },
         async refreshDatePicker() {
             await this.getDatePickerInitialData().then((data) => {
                 this.selectableDatesData = data.initialShopTimeSlotsResponse;

src/layouts/schedule-page/service-location/service-location.vue

@@ -5,18 +5,12 @@
             ref="alertRecalNoMobile"
             cmsWidgetName="AlertRecalNoMobileWidget"
             alertClass="alert-warning"
-            @text-link-clicked="openModalAction" />
+            @textLinkClicked="openModalAction" />
         <alert
             v-if="displayBigTruckNoShops"
             ref="alertBigTruckNoShops"
             cmsWidgetName="AlertBigTruckNoShopsWidget"
             alertClass="alert-warning" />
-        <div style="display: none;">
-            isServiceableMobile: {{ isServiceableMobile }}<br />
-            isServiceableInshop: {{ isServiceableInshop }}<br />
-            requiresInshopRecalibration: {{ requiresInshopRecalibration }}<br />
-            selectedAppointmentType: {{ selectedAppointmentType }}<br />
-        </div>
         <div class="appointment-type">
             <div class="appointment-type-question-text d-flex">
                 <span
@@ -62,7 +56,7 @@
                 :selectedAppointmentType="selectedAppointmentType"
                 modalWidgetName="ChangeLocationModalWidget"
                 cmsWidgetName="ShopAddressWidget"
-                @zip-updated="handleInShopZipUpdated" />
+                @zipUpdated="handleInShopZipUpdated" />
             <!-- INTEGRATION TODO: Put this right under the calendar -->
             <alert
                 v-if="selectedProvider === null"
@@ -123,7 +117,6 @@ import { useMainStore } from '@/store';
 import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
 import {
     getAvailabilityRating,
-    getPricedMobileFeePart,
     getServiceabilityDetails,
     getZipCodeData,
     getMobileZipCodeData
@@ -154,7 +147,7 @@ export default {
         serviceZipQuestion
     },
     mixins: [baseFormMixin],
-    emits: ['service-location-updated', 'appointment-type-changed', 'mobile-zip-updated', 'provider-changed'],
+    emits: ['appointment-type-changed', 'city-updated', 'mobile-zip-updated', 'provider-changed'],
     setup() {
         const mainStore = useMainStore();
         return { mainStore };
@@ -294,6 +287,11 @@ export default {
         }
     },
     watch: {
+        city(newCity, oldCity) {
+            if (newCity !== oldCity) {
+                this.$emit('city-updated', newCity);
+            }
+        },
         async mobileZipCode(newZip) {
             if (newZip !== '') {
                 showIssLoadingModal(true);
@@ -562,11 +560,6 @@ $page-side-padding: 1.5rem;
     .form-test-error {
         font-weight: $font-weight-bold;
     }
-    :deep(.alert-header) {
-        button {
-            align-self: flex-start;
-        }
-    }
     .appointment-type-question-text {
         color: $black;
         font-weight: 600;