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

just to have

Browse source
This commit is contained in:
Bill Richardson 2026-03-11 16:25:57 -04:00
parent 3938eea60c
commit bc0a509c66
3 changed files with 279 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/helpers/service-location-helper.js
View file

@ -15,8 +15,23 @@ function processZipCodeResults(request) {
}));
}
export async function getZipCodeData(zipCode) {
return await processZipCodeResults(useMainStore().validateZip({ zip: zipCode }));
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 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);
}
}

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

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

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

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