just to have

src/helpers/service-location-helper.js

@@ -15,8 +15,23 @@ function processZipCodeResults(request) {
     }));
 }
 
-export async function getZipCodeData(zipCode) {
+export async function getAvailabilityRating(
-    return await processZipCodeResults(useMainStore().validateZip({ zip: zipCode }));
+    startDate,
+    endDate,
+    shopAppointmentType,
+    providerNumber
+) {
+    // For a given shop provider number and date range, get the appointment time slots available
+    const shopTimeSlots = await useMainStore().getShopTimeSlots(startDate, endDate, shopAppointmentType, providerNumber);
+
+    const numberOfDaysToEvaluate = 2;
+    const isGoodAvailability =
+        shopTimeSlots.data.days.filter((x) => x.timeSlots.length > 0).length
+        >= numberOfDaysToEvaluate;
+
+    const shopStatus = isGoodAvailability ? 'high' : 'low';
+
+    return Promise.resolve(shopStatus);
 }
 
 export async function getMobileZipCodeData(zipCode) {
@@ -42,25 +57,6 @@ export async function getPricedMobileFeePart(serviceZipCode) {
     return Promise.resolve(pricingResults[0]);
 }
 
-export async function getAvailabilityRating(
-    startDate,
-    endDate,
-    shopAppointmentType,
-    providerNumber
-) {
-    // For a given shop provider number and date range, get the appointment time slots available
-    const shopTimeSlots = await useMainStore().getShopTimeSlots(startDate, endDate, shopAppointmentType, providerNumber);
-
-    const numberOfDaysToEvaluate = 2;
-    const isGoodAvailability =
-        shopTimeSlots.data.days.filter((x) => x.timeSlots.length > 0).length
-        >= numberOfDaysToEvaluate;
-
-    const shopStatus = isGoodAvailability ? 'high' : 'low';
-
-    return Promise.resolve(shopStatus);
-}
-
 export function getProviderData() {
     const mainStore = useMainStore();
     const storeServiceLocation = mainStore.order.serviceLocation;
@@ -73,6 +69,18 @@ export function getProviderData() {
     return { storeServiceLocation, isMobileAppointment, storeSelectedProvider, serviceZipCode }
 }
 
+export async function getZipCodeData(zipCode) {
+    return await processZipCodeResults(useMainStore().validateZip({ zip: zipCode }));
+}
+
+export function mapTimeSlot(timeSlot, timeOfDay) {
+    return {
+        ...timeSlot,
+        isDropoff: timeSlot.id.endsWith('DROP OFF'),
+        timeOfDay
+    };
+}
+
 export async function onProviderChanged() {
     const { isMobileAppointment, storeSelectedProvider, serviceZipCode } = getProviderData();
     if (!storeSelectedProvider) {
@@ -101,4 +109,4 @@ export async function onProviderChanged() {
     }
 
     await settleAllPromises(promiseResultMap);
-}
+}

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

@@ -60,6 +60,9 @@
                 </div>
             </div>
         </div>
+        <suggestTimeslotModal
+            :ref="SUGGEST_TIMESLOT_MODAL_REF_NAME"
+            cmsWidgetName="SuggestTimeslotModal" />
     </Form>
 </template>
 <script>
@@ -70,6 +73,7 @@ import locationAlerts from '@/layouts/schedule-page/location-alerts/location-ale
 import datePicker from '@/digital-components/date-picker/date-picker.vue';
 import serviceLocation from '@/layouts/schedule-page/service-location/service-location.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import suggestTimeslotModal from '@/layouts/schedule-page/suggest-timeslot-modal/suggest-timeslot-modal.vue';
 
 // Supporting files
 import { experimentSettings } from '@/constants/experiments';
@@ -92,13 +96,15 @@ import settleAllPromises from '@/helpers/layout-helper';
 import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
 import {
     getPricedMobileFeePart,
-    getZipCodeData
+    getZipCodeData,
+    mapTimeSlot
 } from '@/helpers/service-location-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store';
 
 // Define constants
+const SUGGEST_TIMESLOT_MODAL_REF_NAME = 'SuggestTimeslotModal';
 const TIME_SLOTS_CALL_DAYS_LIMIT = 15;
 
 const getAvailableDates = async (
@@ -211,6 +217,8 @@ const getAvailableDates = async (
     });
 };
 
+const RECAL_MODAL_REF_NAME = 'RecalModal';
+
 export default {
     name: 'schedule-page',
     components: {
@@ -220,6 +228,7 @@ export default {
         datePicker,
         serviceLocation,
         siteFooter,
+        suggestTimeslotModal,
         Form
     },
     mixins: [BaseFormMixin],
@@ -363,7 +372,8 @@ export default {
             selectedServiceLocation: this.getServiceLocation(),
             selectedServiceLocationCity: this.getServiceLocationCity(),
             selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
-            showDatePickerError: false
+            showDatePickerError: false,
+            SUGGEST_TIMESLOT_MODAL_REF_NAME
         };
     },
     computed: {
@@ -448,7 +458,10 @@ export default {
             const showMobileFirst = this.getSettingValue(experimentSettings.ISS_MOBILE_FIRST_SHOW_FIRST_MOBILE_APPOINTMENT);
             console.log('Mobile first experience enabled:', showMobileFirst);
             if (showMobileFirst) {
+                const pmMobileDaysLimit = this.getSettingValue(experimentSettings.ISS_MOBILE_FIRST_MAX_PM_MOBILE_DAYS);
+                const mobileDaysLimit = this.getSettingValue(experimentSettings.ISS_MOBILE_FIRST_MAX_MOBILE_DAYS);
                 console.log('Checking mobile first experience eligibility...');
+                console.log('Mobile first experience eligibility settings - PM Mobile Days Limit:', pmMobileDaysLimit, 'Mobile Days Limit:', mobileDaysLimit);
                 const hasSelectedDate = !!this.getSelectedDate();
                 const isServicableMobile = mobileFirstObject.serviceabilityDetails?.isGlassServiceableMobile;
                 if (!hasSelectedDate && isServicableMobile && mobileFirstObject.mobileProviderNumber && mobileFirstObject.zipCode) {
@@ -495,6 +508,7 @@ export default {
                     
                     console.log('Mobile first experience initial data...');
                     console.log(initialData);
+                    this.mobileDatesData = initialData;
 
                     const retTimeSlotsResponse = [];
                     initialData.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
@@ -504,11 +518,11 @@ export default {
                             morningTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
                                 const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
                                 return timeHour < 12;
-                            }).map((timeSlot) => this.mapTimeSlot(timeSlot, 'morning')),
+                            }).map((timeSlot) => mapTimeSlot(timeSlot, 'morning')),
                             afternoonTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
                                 const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
                                 return timeHour >= 12;
-                            }).map((timeSlot) => this.mapTimeSlot(timeSlot, 'afternoon')),
+                            }).map((timeSlot) => mapTimeSlot(timeSlot, 'afternoon')),
                             isSelected: false
                         };
 
@@ -532,7 +546,51 @@ export default {
                     console.log('Mobile first experience mapped time slots response...');
                     console.log(retTimeSlotsResponse);
 
-                    this.mobileDatesData = initialData;
+                    let dateDifferenceForPmMobile = null;
+                    const firstPmMobileDateWithTimeSlots = retTimeSlotsResponse.find((date) => {
+                        const hasPmMobileTimeSlots = date.afternoonTimeSlots?.length > 0;
+                        if (hasPmMobileTimeSlots && pmMobileDaysLimit) {
+                            dateDifferenceForPmMobile = calcDaysBetweenDates(todayDateString, date.date);
+                            return dateDifferenceForPmMobile <= pmMobileDaysLimit;
+                        }
+                        return hasPmMobileTimeSlots;
+                    });
+
+                    let dateDifferenceForMobile = null;
+                    const firstMobileDateWithTimeSlots = retTimeSlotsResponse.find((date) => {
+                        const hasMobileTimeSlots = date.morningTimeSlots?.length > 0;
+                        const hasPmMobileTimeSlots = date.afternoonTimeSlots?.length > 0;
+                        if (hasMobileTimeSlots || hasPmMobileTimeSlots) {
+                            if (mobileDaysLimit) {
+                                dateDifferenceForMobile = calcDaysBetweenDates(todayDateString, date.date);
+                                return mobileDaysLimit && dateDifferenceForMobile <= mobileDaysLimit;
+                            }
+                            return true;
+                        }
+                        return hasPmMobileTimeSlots;
+                    });
+
+                    console.log('First PM mobile date with time slots:', firstPmMobileDateWithTimeSlots);
+                    console.log('Date difference for PM mobile:', dateDifferenceForPmMobile);
+                    console.log('First mobile date with time slots:', firstMobileDateWithTimeSlots);
+                    console.log('Date difference for mobile:', dateDifferenceForMobile);
+
+                    if (firstPmMobileDateWithTimeSlots || firstMobileDateWithTimeSlots) {
+                        if (firstPmMobileDateWithTimeSlots) {
+                            console.log('Found afternoon timeslot within PM mobile dayslimit:', pmMobileDaysLimit);
+                            console.log(firstPmMobileDateWithTimeSlots.afternoonTimeSlots[0]);
+                        } else {
+                            if (firstMobileDateWithTimeSlots) {
+                                console.log('No afternoon timeslot within PM mobile dayslimit. Checking for any mobile timeslot within mobile dayslimit:', mobileDaysLimit);
+                                console.log(firstMobileDateWithTimeSlots.morningTimeSlots.length > 0
+                                    ? firstMobileDateWithTimeSlots.morningTimeSlots[0]
+                                    : firstMobileDateWithTimeSlots.afternoonTimeSlots[0]);
+                            }
+                        }
+
+                        console.log(this.$refs[SUGGEST_TIMESLOT_MODAL_REF_NAME]);
+                        this.$refs[SUGGEST_TIMESLOT_MODAL_REF_NAME].openModal();
+                    }                    
                 }
             }
         },
@@ -782,13 +840,6 @@ export default {
                 this.selectedServiceLocation = inShopZipServiceLocation;
             }
         },
-        mapTimeSlot(timeSlot, timeOfDay) {
-            return {
-                ...timeSlot,
-                isDropoff: timeSlot.id.endsWith('DROP OFF'),
-                timeOfDay
-            };
-        },
         mobileZipUpdatedFromServiceLocation(mobileZipServiceLocation) {
             if (mobileZipServiceLocation) {
                 this.mobileProviderNumber = mobileZipServiceLocation.mobileProviderNumber;

src/layouts/schedule-page/suggest-timeslot-modal/suggest-timeslot-modal.vue

@@ -0,0 +1,186 @@
+<template>
+    <div class="suggest-timeslot-modal-container">
+        <modal
+            ref="suggestTimeslotModal"
+            :footerButtonText="modalCloseButtonText"
+            @footerButtonEvent="footerButtonClick">
+            <div>
+                <div class="header">GOOD NEWS!</div>
+                <div class="subheader">We can come to you for free!</div>
+            </div>
+            <div>
+                <div class="message">
+                    We can <span class="emphasize">replace</span> your glass on <span class="emphasize">Monday</span> — fast, easy, and at your location.
+                </div>
+                <div class="appointment-info">
+                    <div>
+                        <span class="emphasize">Date:</span>
+                        <span>Monday, March 16, 2026</span>
+                    </div>
+                    <div>
+                        <span class="emphasize">Appointment Window:</span>
+                        <span>12:00 PM - 5:00 PM</span>
+                    </div>
+                    <div>
+                        <span class="emphasize">Estimated Length:</span>
+                        <span>1.5 - 2 hours</span>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-container">
+                <div>
+                    <button type="button" aria-live="polite" aria-label="Confirm Appointment" class="btn btn-danger confirm-appointment">
+                        Confirm Appointment
+                    </button>
+                </div>
+                <div>
+                    <button type="button" aria-live="polite" aria-label="See more options" class="btn btn-link see-more-options">
+                        See more options
+                    </button>
+                </div>
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from '@/digital-components/modal/modal.vue';
+
+export default {
+    name: 'suggest-timeslot-modal',
+    components: {
+        modal
+    },
+    props: {
+        cmsWidgetName: {
+            type: String,
+            default: 'SuggestTimeslotModal'
+        }
+    },
+    computed: {
+        modalHeaderText() {
+            return 'Header here...'; // this.getCmsContent(this.cmsWidgetName, 'HeaderText');
+        },
+        modalBodyText() {
+            return 'Body here...'; // this.getCmsContent(this.cmsWidgetName, 'BodyText');
+        },
+        modalCloseButtonText() {
+            return 'Confirm Appointment'; // this.getCmsContent(this.cmsWidgetName, 'FooterText');
+        }
+    },
+    methods: {
+        openModal() {
+            this.$refs.suggestTimeslotModal.openModal();
+        },
+        footerButtonClick() {
+            this.$refs.suggestTimeslotModal.closeModal();
+        },
+    }
+
+};
+</script>
+
+<style lang="scss" scoped>
+.suggest-timeslot-modal-container {
+    :deep(.modal) {
+        .modal-dialog {
+            width: 37.5rem;
+            max-width: 37.5rem;
+
+            .modal-content {
+                width: 22rem;
+                max-width: 22rem;
+                padding: 1.5rem 0;
+                border-radius: 0.5rem;
+                line-height: 1.5rem;
+
+                .modal-header {
+                    padding: 0;
+                }
+
+                .modal-body {
+                    padding: 0 1rem;
+                }
+
+                .modal-footer {
+                    display: none;
+                }
+
+                .header {
+                    margin-top: 1rem;
+                    color: #db0020;
+                    text-align: center;
+                    text-transform: uppercase;
+                    letter-spacing: 0.03em;
+                    font-weight: 600;
+                    font-size: 0.875rem;
+                }
+
+                .subheader {
+                    color: black;
+                    text-align: center;
+                    letter-spacing: 0.03em;
+                    font-weight: 400;
+                    font-size: 1.25rem;
+                    line-height: 2rem;
+                }
+
+                .message {
+                    margin-top: 1.5rem;
+                    color: #525656;
+                    letter-spacing: 0.03em;
+                    font-weight: 400;
+                    font-size: 1rem;
+                    line-height: 1.625rem;
+
+                    .emphasize {
+                        color: black;
+                        font-weight: 600;
+                    }
+                }
+
+                .appointment-info {
+                    margin-top: 1rem;
+                    padding: 1rem;
+                    background-color: #f4f4f4;
+                    letter-spacing: 0.03em;
+                    font-weight: 400;
+                    font-size: 0.875rem;
+
+                    .emphasize {
+                        color: black;
+                        font-weight: 600;
+                        margin-right: 0.25rem;
+                    }
+                }
+
+                .footer-container {
+                    margin-top: 1.5rem;
+                    padding: 0 1.5rem;
+                    border: none;
+
+                    .confirm-appointment {
+                        width: 100%;
+                        padding: .75rem 0;
+                        border-radius: 4.5rem;
+                        letter-spacing: 0.03em;
+                        font-weight: 600;
+                        font-size: 1rem;
+                    }
+
+                    .see-more-options {
+                        text-align: center;
+                        width: 100%;
+                        margin-top: 1.5rem;
+                        letter-spacing: 0.03em;
+                        font-weight: 600;
+                        font-size: 1rem;
+                        line-height: 1.625rem;
+                    }
+                }                
+            }
+        }
+    }
+}
+
+</style>