jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updates for mobile first

Browse source 
feel like i removed something
This commit is contained in:
Bill Richardson 2026-03-23 17:26:41 -04:00
parent bc0a509c66
commit d068ff4446
5 changed files with 185 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/constants/analytics.js
View file

@ -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({

104
src/layouts/schedule-page/schedule-page.vue
View file

@ -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;

126
src/layouts/schedule-page/suggest-timeslot-modal/suggest-timeslot-modal.vue
View file

@ -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>

4
src/mixins/experiment-mixin.js
View file

@ -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]

3
src/store/index.js
View file

@ -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);