From d068ff44464229ea10a045bce725400fc64c2b17 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 23 Mar 2026 17:26:41 -0400
Subject: [PATCH] updates for mobile first

feel like i removed something
---
 src/constants/analytics.js                    |  15 ++-
 src/layouts/schedule-page/schedule-page.vue   | 104 ++++++++++-----
 .../suggest-timeslot-modal.vue                | 126 +++++++++++++-----
 src/mixins/experiment-mixin.js                |   4 +
 src/store/index.js                            |   3 +
 5 files changed, 185 insertions(+), 67 deletions(-)

diff --git a/src/constants/analytics.js b/src/constants/analytics.js
index c0171209..8cf147e8 100644
--- a/src/constants/analytics.js
+++ b/src/constants/analytics.js
@@ -11,22 +11,29 @@ const GaEvents = Object.freeze({
 
 const GaCategories = Object.freeze({
     API_RESPONSE: 'Api_Response',
+    CONFIRMATION_CLICKED: "confirmation clicked",
+    CONFIRMATION_CLICKED_INSHOP: "inshop confirmation clicked",
+    CONFIRMATION_CLICKED_MOBILE: "mobile confirmation clicked",
     EVOX: 'Evox'
 });
 
 const GaActions = Object.freeze({
-    RESULT: 'Result',
     CLICKED: 'Clicked',
+    NO: "no",
+    RESULT: 'Result',
+    SUBMITTED: 'Submitted',
     VIF: 'vif',
-    SUBMITTED: 'Submitted'
+    YES: "yes",
 });
 
 const GaLabels = Object.freeze({
-    SUCCESS: 'Success',
+    ADDRESS_LOOKUP: 'Address_Look_up',
     ERROR: 'Error',
     LICENSE_PLATE_LOOKUP: 'License_Plate_Look_Up',
+    NO: "no",
+    SUCCESS: 'Success',
     VIN_LOOKUP: 'Vin_Look_Up',
-    ADDRESS_LOOKUP: 'Address_Look_up'
+    YES: "yes",
 });
 
 const ValueToLogTypes = Object.freeze({
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
index 7a57cd9f..aca58bb4 100644
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -62,7 +62,9 @@
         </div>
         <suggestTimeslotModal
             :ref="SUGGEST_TIMESLOT_MODAL_REF_NAME"
-            cmsWidgetName="SuggestTimeslotModal" />
+            cmsWidgetName="SuggestTimeslotModal"
+            @confirmAppointmentClicked="autoSelectTimeslotConfirmed"
+            @seeMoreOptionsClicked="seeMoreOptions"/>
     </Form>
 </template>
 <script>
@@ -76,7 +78,7 @@ 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';
+import { experimentSettings, experimentUniverses } from '@/constants/experiments';
 import {
     AppointmentTypeStrings,
     GET_MOBILE_TIME_SLOTS,
@@ -96,6 +98,7 @@ import settleAllPromises from '@/helpers/layout-helper';
 import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
 import {
     getPricedMobileFeePart,
+    getMobileZipCodeData,
     getZipCodeData,
     mapTimeSlot
 } from '@/helpers/service-location-helper';
@@ -342,10 +345,6 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
             vm.$refs.serviceLocation.initializeComponent(serviceLocationData);
             await vm.setData(resultMap.premiumFeeWithPrice, initialServiceLocationObj);
-            console.log('Schedule page loaded with all API calls settled');
-            console.log('Checking mobile first experience eligibility...');
-            console.log(resultMap);
-            console.log('Mobile first experience eligibility object:', mobileFirstObject);
             await vm.checkMobileFirstExperience(mobileFirstObject);
             showIssLoadingModal(false);
         });
@@ -454,18 +453,54 @@ export default {
         arePagePrerequisitesValid() {
             return useMainStore().order.serviceLocation.zipCode !== null;
         },
+        async autoSelectTimeslotConfirmed(emittedValue) {
+            if (this.mainStore.isNoComp || this.mainStore.isITAC) {
+                console.log('User is No Comp or ITAC, skipping mobile fee update on auto select timeslot confirmed');
+                // this.mainStore.updateMobileFee(this.mobileFeePart);
+            }
+
+            const providerToUse = {
+                providerNumber: emittedValue.mobileProviderNumber,
+                address: {
+                    streetAddress: null,
+                    city: null,
+                    state: null,
+                    zipCode: null,
+                    zipCodeCtu: null
+                }
+            };
+
+            this.mainStore.updateServiceLocation({
+                state: emittedValue.zipCodeData.state,
+                zipCode: emittedValue.zipCodeData.zipCode,
+                zipCodeCtu: emittedValue.zipCodeData.zipCodeCtu,
+                appointmentType: AppointmentTypeStrings.MOBILE,
+                provider: providerToUse
+            });
+
+            const timeSlotToUse = {
+                date: emittedValue.date,
+                routeCode: emittedValue.timeSlot.id,
+                startTime: emittedValue.timeSlot.startTime,
+                endTime: emittedValue.timeSlot.endTime,
+                jobMaxMinutes: emittedValue.estimatedServiceMinutesMax,
+                jobMinMinutes: emittedValue.estimatedServiceMinutesMin,
+            };
+
+            this.mainStore.saveSchedule(timeSlotToUse);
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.$route
+            );
+        },
         async checkMobileFirstExperience(mobileFirstObject = {}) {
             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) {
-                    console.log('Get Mobile Dates, Select first one and call modal... Gonna be fantastical!');
                     const todayDateObject = new Date();
                     const todayDateString = convertDateToDateString(todayDateObject);
                     const calendarViewDirection = 'future';
@@ -506,10 +541,11 @@ export default {
                         };
                     });
                     
-                    console.log('Mobile first experience initial data...');
-                    console.log(initialData);
                     this.mobileDatesData = initialData;
 
+                    const estimatedServiceMinutesMax = initialData.initialShopTimeSlotsResponse?.estimatedServiceMinutesMaximum || 120;
+                    const estimatedServiceMinutesMin = initialData.initialShopTimeSlotsResponse?.estimatedServiceMinutesMinimum || 90;
+
                     const retTimeSlotsResponse = [];
                     initialData.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
                         const dateObjectToPush = {
@@ -543,9 +579,6 @@ export default {
                         retTimeSlotsResponse.push(dateObjectToPush);
                     });
 
-                    console.log('Mobile first experience mapped time slots response...');
-                    console.log(retTimeSlotsResponse);
-
                     let dateDifferenceForPmMobile = null;
                     const firstPmMobileDateWithTimeSlots = retTimeSlotsResponse.find((date) => {
                         const hasPmMobileTimeSlots = date.afternoonTimeSlots?.length > 0;
@@ -570,26 +603,30 @@ export default {
                         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);
+                    const zipCodeData = await getMobileZipCodeData(mobileFirstObject.zipCode);
+                    if ((firstPmMobileDateWithTimeSlots || firstMobileDateWithTimeSlots) && zipCodeData?.isValid) {
+                        const timeSlotForAutoSelectionMobile = {
+                            date: firstPmMobileDateWithTimeSlots ? firstPmMobileDateWithTimeSlots.date : firstMobileDateWithTimeSlots.date,
+                            estimatedServiceMinutesMax,
+                            estimatedServiceMinutesMin,
+                            mobileProviderNumber: mobileFirstObject.mobileProviderNumber,
+                            timeSlot: firstPmMobileDateWithTimeSlots ? firstPmMobileDateWithTimeSlots.afternoonTimeSlots[0] 
+                                        : (firstMobileDateWithTimeSlots.morningTimeSlots[0] || firstMobileDateWithTimeSlots.afternoonTimeSlots[0]),
+                            zipCodeData
+                        };
 
-                    if (firstPmMobileDateWithTimeSlots || firstMobileDateWithTimeSlots) {
-                        if (firstPmMobileDateWithTimeSlots) {
-                            console.log('Found afternoon timeslot within PM mobile dayslimit:', pmMobileDaysLimit);
-                            console.log(firstPmMobileDateWithTimeSlots.afternoonTimeSlots[0]);
+                        const dateObjectToUse = new Date(`${timeSlotForAutoSelectionMobile.date}T${timeSlotForAutoSelectionMobile.timeSlot.startTime}:00`);
+                        timeSlotForAutoSelectionMobile.dateObject = dateObjectToUse;
+                        timeSlotForAutoSelectionMobile.dayOfWeek = dateObjectToUse.toLocaleDateString('en-US', { weekday: 'long' });
+
+                        const experiment = this.getExperimentByName(experimentUniverses.ISS_MOBILE_FIRST_APPOINTMENTS);
+                        if (experiment && !experiment.isExposed) {
+                            this.mainStore.logMobileFirstExperimentExposure();
                         } 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('Mobile experiment exposed already....');
                         }
 
-                        console.log(this.$refs[SUGGEST_TIMESLOT_MODAL_REF_NAME]);
-                        this.$refs[SUGGEST_TIMESLOT_MODAL_REF_NAME].openModal();
+                        this.$refs[SUGGEST_TIMESLOT_MODAL_REF_NAME].openModal(timeSlotForAutoSelectionMobile);
                     }                    
                 }
             }
@@ -648,7 +685,6 @@ export default {
             this.selectedMobileZipCode = null;
          },
         dateSelectedFromPicker(date) {
-            console.log('Schedule selected date from picker', date);
             this.selectedDate = date;
             this.showDatePickerError = false;
         },
@@ -874,7 +910,6 @@ export default {
                 this.selectableDatesData = data.initialShopTimeSlotsResponse;
                 this.$refs.datePicker.initializeComponent(data);
                 this.isDatePickerRefreshing = false;
-                console.log('Date picker refreshed with new provider/zip code data');
                 showIssLoadingModal(false);
             });
         },
@@ -883,6 +918,9 @@ export default {
             this.selectedTimeSlotInfo = null;
             this.showDatePickerError = false;
         },
+        async seeMoreOptions(emittedValue) {
+            console.log(emittedValue);
+        },
         timeSlotSelectedFromPicker(timeSlot) {
             this.selectedTimeSlotInfo = timeSlot;
             this.showDatePickerError = false;
diff --git a/src/layouts/schedule-page/suggest-timeslot-modal/suggest-timeslot-modal.vue b/src/layouts/schedule-page/suggest-timeslot-modal/suggest-timeslot-modal.vue
index 357464ab..318fb8c8 100644
--- a/src/layouts/schedule-page/suggest-timeslot-modal/suggest-timeslot-modal.vue
+++ b/src/layouts/schedule-page/suggest-timeslot-modal/suggest-timeslot-modal.vue
@@ -2,40 +2,30 @@
     <div class="suggest-timeslot-modal-container">
         <modal
             ref="suggestTimeslotModal"
-            :footerButtonText="modalCloseButtonText"
-            @footerButtonEvent="footerButtonClick">
+            :onModalClosedCallback="onModalClosed">
             <div>
-                <div class="header">GOOD NEWS!</div>
-                <div class="subheader">We can come to you for free!</div>
+                <div class="header">{{ modalHeaderText }}</div>
+                <div class="subheader">{{ modalHeaderSubText }}</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 class="message"
+                    v-html="modalBodyText">
                 </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 class="appointment-info"
+                    v-html="modalAppointmentInformationText">
                 </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 type="button" aria-live="polite" aria-label="Confirm Appointment" class="btn btn-danger confirm-appointment"
+                        @click="confirmAppointmentClicked">
+                        {{ modalCloseButtonText }}
                     </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 type="button" aria-live="polite" aria-label="See more options" class="btn btn-link see-more-options"
+                        @click="seeMoreOptionsClicked">
+                        {{ modalFooterSubText }}
                     </button>
                 </div>
             </div>
@@ -45,12 +35,24 @@
 
 <script>
 import modal from '@/digital-components/modal/modal.vue';
+import {
+    convertDateToTwoDigitDay,
+    getDisplayTextForDurationLength,
+    militaryToTwelveHourTime
+} from '@/helpers/date-helper';
 
 export default {
     name: 'suggest-timeslot-modal',
     components: {
         modal
     },
+    emits: ['confirm-appointment-clicked', 'see-more-options-clicked'],
+    data() {
+        return {
+            confirmedAppointment: false,
+            timeSlotForAutoSelectionMobile: {}
+         };
+     },
     props: {
         cmsWidgetName: {
             type: String,
@@ -58,25 +60,89 @@ export default {
         }
     },
     computed: {
-        modalHeaderText() {
-            return 'Header here...'; // this.getCmsContent(this.cmsWidgetName, 'HeaderText');
+        customAppointmentEstimate() {
+            return getDisplayTextForDurationLength(this.timeSlotForAutoSelectionMobile.estimatedServiceMinutesMin, this.timeSlotForAutoSelectionMobile.estimatedServiceMinutesMax)
+        },
+        customAppointmentWindow() {
+            return `${militaryToTwelveHourTime(this.timeSlotForAutoSelectionMobile?.timeSlot?.startTime)} - ${militaryToTwelveHourTime(this.timeSlotForAutoSelectionMobile?.timeSlot?.endTime)}`;
+        },
+        customDayOfWeek() {
+            return this.timeSlotForAutoSelectionMobile.dayOfWeek ? this.timeSlotForAutoSelectionMobile.dayOfWeek : '';
+        },
+        customDayOfWeekMonthDayYear() {
+            if (!this.timeSlotForAutoSelectionMobile?.date) {
+                return '';
+            }
+
+            const dayOfWeekToUse = this.customDayOfWeek;
+            const year = this.timeSlotForAutoSelectionMobile.dateObject.getFullYear();
+            const month = this.timeSlotForAutoSelectionMobile.dateObject.toLocaleString('en-US', { month: 'long' });
+            const day = convertDateToTwoDigitDay(this.timeSlotForAutoSelectionMobile.dateObject);
+            return `${dayOfWeekToUse}, ${month} ${day}, ${year}`;
+        },
+        modalAppointmentInformationText() {
+            return this.getCmsContent(this.cmsWidgetName, 'BodyText2')
+                    .replaceAll('{custom:dowMonthDayYear}', this.customDayOfWeekMonthDayYear)
+                    .replaceAll('{custom:appointmentEstimate}', this.customAppointmentEstimate)
+                    .replaceAll('{custom:appointmentWindow}', this.customAppointmentWindow);
         },
         modalBodyText() {
-            return 'Body here...'; // this.getCmsContent(this.cmsWidgetName, 'BodyText');
+            return this.getCmsContent(this.cmsWidgetName, 'BodyText').replaceAll('{custom:dayOfWeekLong}', this.customDayOfWeek);
         },
         modalCloseButtonText() {
-            return 'Confirm Appointment'; // this.getCmsContent(this.cmsWidgetName, 'FooterText');
-        }
+            return this.getCmsContent(this.cmsWidgetName, 'FooterText');
+        },
+        modalFooterSubText() {
+            return 'See more options';
+        },
+        modalHeaderSubText() {
+            return this.getCmsContent(this.cmsWidgetName, 'SubheaderText');
+        },
+        modalHeaderText() {
+            return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
+        },
     },
     methods: {
-        openModal() {
+        confirmAppointmentClicked() {
+            this.confirmedAppointment = true;
+            this.$emit('confirm-appointment-clicked', this.timeSlotForAutoSelectionMobile);
+            this.$refs.suggestTimeslotModal.closeModal();
+        },
+        onModalClosed() {
+            this.pushEvent();
+            this.confirmedAppointment = false;
+            this.timeSlotForAutoSelectionMobile = {};
+
+            // this.$emit("close-mobile-first-modal");
+            // this.confirmedAppointment = false;
+        },
+        openModal(timeSlotForAutoSelectionMobile) {
+            this.timeSlotForAutoSelectionMobile = timeSlotForAutoSelectionMobile;
             this.$refs.suggestTimeslotModal.openModal();
         },
+        pushEvent() {
+            const gaAction = this.confirmedAppointment ? this.GaActions.YES : this.GaActions.NO;
+            if (this.timeSlotForAutoSelectionMobile && this.timeSlotForAutoSelectionMobile.timeSlot) {
+                this.pushEventToGA(
+                    this.GaCategories.CONFIRMATION_CLICKED,
+                    gaAction,
+                    this.timeSlotForAutoSelectionMobile.timeSlot.startTime +
+                        "-" +
+                        this.timeSlotForAutoSelectionMobile.timeSlot.endTime +
+                        " " +
+                        this.timeSlotForAutoSelectionMobile.date,
+                    true
+                );
+            }
+        },
+        seeMoreOptionsClicked() {
+            this.$emit('see-more-options-clicked');
+            this.$refs.suggestTimeslotModal.closeModal();
+        },
         footerButtonClick() {
             this.$refs.suggestTimeslotModal.closeModal();
         },
     }
-
 };
 </script>
 
diff --git a/src/mixins/experiment-mixin.js b/src/mixins/experiment-mixin.js
index 5b1f7142..7f9a761e 100644
--- a/src/mixins/experiment-mixin.js
+++ b/src/mixins/experiment-mixin.js
@@ -8,6 +8,10 @@ export default {
         hasSetting(settingName) {
             return Object.hasOwn(useMainStore().experimentSettings, settingName);
         },
+        getExperimentByName(experimentName) {
+            const experiment = useMainStore().applicationUser.experiments.find((e) => e.universeName === experimentName);
+            return experiment ? experiment : null;
+        },
         getSettingValue(settingName) {
             return this.hasSetting(settingName)
                 ? useMainStore().experimentSettings[settingName]
diff --git a/src/store/index.js b/src/store/index.js
index 8a4f1b34..2d2b6040 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2587,6 +2587,9 @@ export const useMainStore = defineStore({
                 }
             );
         },
+        logMobileFirstExperimentExposure() {
+            this.logExperimentIfExists(issPageValues.SCHEDULE_PAGE, experimentUniverses.ISS_MOBILE_FIRST_APPOINTMENTS);
+        },
         logWelcomePageExperiments(issPage) {
             this.logExperimentIfExists(issPage, experimentUniverses.ISS_FEATURETOGGLE_AREFEES_HIDDEN);
             this.logExperimentIfExists(issPage, experimentUniverses.ISS_FEATURETOGGLE_AREFEES_OVERRIDDEN);