From 8fefa39fea148fcef827677feaaef5d40d8f945b Mon Sep 17 00:00:00 2001 From: Bill Richardson Date: Tue, 27 Jan 2026 13:35:24 -0500 Subject: [PATCH] some updates for integration --- .../date-picker/date-picker.vue | 17 +- src/helpers/service-location-helper.js | 5 - src/layouts/schedule-page/schedule-page.vue | 168 +++++++---- .../service-location/service-location.vue | 275 ++++++++++-------- .../service-zip-question.vue | 1 - src/store/index.js | 7 +- 6 files changed, 280 insertions(+), 193 deletions(-) diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index cf24627b..0f9aa7fa 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -153,6 +153,10 @@ import { selectableDaysOptions } from './mixins/helpers'; export default { name: 'date-picker', props: { + activeAppointmentType: { + type: String, + default: null + }, customComponentId: String, selectableDatesSetting: { type: String, @@ -168,6 +172,10 @@ export default { modelValue: { type: Object }, + mobileZipCode: { + type: String, + default: null + }, todayOverrideDateString: { // keep for use in unit tests to override today's date type: String, @@ -315,6 +323,7 @@ export default { this.setCalendarData(initialData); }, resetComponent() { + console.log('Resetting Date Picker Component'); this.isLoading = true; this.selectableDatesData = []; // NOTE: uses monthNum (1-based), NOT monthIndex (0-based) this.selectableTimeSlotsData = []; @@ -376,7 +385,7 @@ export default { }; }, displayTimeSlotTime(timeSlot) { - const { appointmentType } = this.mainStore.order.serviceLocation; + const appointmentType = this.activeAppointmentType || AppointmentTypeStrings.IN_SHOP; if (appointmentType === AppointmentTypeStrings.MOBILE || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) { return `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime(timeSlot.endTime)}`; } @@ -555,8 +564,6 @@ export default { this.selectTimeSlotForDay(timeSlot); }, async setCalendarData(config = {}) { - // const initialMql = window.matchMedia('(min-width: 1200px)'); - // this.isMobileView = !initialMql.matches; config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => { const dateObjectToPush = { date: selectableDate.date, @@ -618,9 +625,7 @@ export default { const moreSelectableDates = await this.customSelectableDatesCallback( dateStart, - dateEnd, - this.mainStore.order.serviceLocation.appointmentType, - this.mainStore.order.serviceLocation.provider.providerNumber + dateEnd ); moreSelectableDates.days.forEach((selectableDate) => { diff --git a/src/helpers/service-location-helper.js b/src/helpers/service-location-helper.js index 106aa34c..25265ea6 100644 --- a/src/helpers/service-location-helper.js +++ b/src/helpers/service-location-helper.js @@ -58,11 +58,6 @@ export async function getAvailabilityRating( providerNumber ) { // For a given shop provider number and date range, get the appointment time slots available - console.log('Getting shop time slots for availability rating...'); - console.log(`Provider Number: ${providerNumber}`); - console.log(`Start Date: ${startDate}`); - console.log(`End Date: ${endDate}`); - console.log(`Shop Appointment Type: ${shopAppointmentType}`); const shopTimeSlots = await useMainStore().getShopTimeSlots(startDate, endDate, shopAppointmentType, providerNumber); const numberOfDaysToEvaluate = 2; diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue index f800cb62..75357316 100644 --- a/src/layouts/schedule-page/schedule-page.vue +++ b/src/layouts/schedule-page/schedule-page.vue @@ -19,9 +19,9 @@ + @mobileZipUpdated="mobileZipUpdatedFromServiceLocation" + @providerChanged="providerChangedFromServiceLocation" + @serviceLocationUpdated="serviceLocationUpdatedFromServiceLocation" />
{ const apiEndDateLimit = sumDateString( startDateString, @@ -141,7 +138,8 @@ const getAvailableDates = async ( storeAction: GET_MOBILE_TIME_SLOTS, payload: { startDate: apiStartDate, - endDate: apiEndDate + endDate: apiEndDate, + zipCodeOverride: mobileZipCodeOverride } }; } else { @@ -181,7 +179,8 @@ const getAvailableDates = async ( } else { timeSlotsResponse = await useMainStore().getMobileTimeSlots( storeAction.payload.startDate, - storeAction.payload.endDate + storeAction.payload.endDate, + storeAction.payload.zipCodeOverride ); } @@ -297,6 +296,7 @@ export default { // vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons); vm.$refs.serviceLocation.initializeComponent(serviceLocationData); await vm.setData(resultMap.premiumFeeWithPrice, initialServiceLocationObj); + showIssLoadingModal(false); }); }, setup() { @@ -305,8 +305,12 @@ export default { }, data() { return { + inShopDatesData: [], isMobileView: false, + mobileDatesData: [], mobilePremiumAppointmentFee: null, + mobileProviderNumber: null, + mobileZipCodeOverride: null, selectableDatesData: [], selectedAppointmentType: this.getAppointmentType(), selectedDate: this.getSelectedDate(), @@ -317,6 +321,9 @@ export default { }; }, computed: { + activeAppointmentType() { + return this.selectedAppointmentType; + }, appointmentType() { return useMainStore().order.serviceLocation.appointmentType; }, @@ -328,26 +335,21 @@ export default { if (!serviceLocationToUse || !this.selectedAppointmentType) { return false; } + const serviceLocationPreReqs = serviceLocationToUse.zipCode !== null && serviceLocationToUse.zipCodeCtu !== null && serviceLocationToUse.appointmentType !== null - && (serviceLocationToUse.appointmentType === AppointmentTypeStrings.MOBILE - || serviceLocationToUse.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP - || serviceLocationToUse.provider.providerNumber); + && (((this.selectedAppointmentType === AppointmentTypeStrings.MOBILE + || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) + && serviceLocationToUse.mobileProviderNumber) + || (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP + && (this.selectedProvider?.providerNumber || serviceLocationToUse.provider?.providerNumber))); const damageInfo = useMainStore().order.damage.isRepair || (useMainStore().order.lineItems?.glassParts != null && useMainStore().order.lineItems.glassParts.length > 0); const supportingItems = this.supportingItems !== null; - console.log('Has Needed Service Location Data Check:', { - serviceLocationPreReqs, - supportingItems, - damageInfo - }); - - console.log('Result:', (serviceLocationPreReqs && supportingItems && damageInfo)); - return (serviceLocationPreReqs && supportingItems && damageInfo); }, isFormValid() { @@ -359,6 +361,7 @@ export default { } }, mounted() { + showIssLoadingModal(true); this.mql = window.matchMedia('(min-width: 1200px)'); this.isMobileView = !this.mql.matches; this.mql.addEventListener('change', this.handleMqlChange); @@ -374,7 +377,6 @@ export default { return useMainStore().order.serviceLocation.zipCode !== null; }, async setData(premiumFeeWithPriceResponse, initialServiceLocationObj) { - // this.selectableDatesData = initialShopTimeSlotsResponse; this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse ? premiumFeeWithPriceResponse[0] : null; @@ -382,15 +384,27 @@ export default { if (this.selectedAppointmentType !== AppointmentTypeStrings.MOBILE && this.selectedAppointmentType !== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) { - const initialData = await this.getDatePickerInitialData(initialServiceLocationObj.provider?.providerNumber); - this.selectableDatesData = initialData.initialShopTimeSlotsResponse; - this.$refs.datePicker.setCalendarData(initialData); + await this.getDatePickerInitialData(initialServiceLocationObj.provider?.providerNumber).then((initialData) => { + this.selectableDatesData = initialData.initialShopTimeSlotsResponse; + this.$refs.datePicker.setCalendarData(initialData); + }); } }, appointmentTypeChangedFromServiceLocation(newAppointmentType) { - console.log('Parent - Appointment Type Changed from Service Location:', newAppointmentType); - this.selectedAppointmentType = newAppointmentType; - this.shouldRefreshDatePicker(); + this.selectedAppointmentType = newAppointmentType.appointmentType; + if (newAppointmentType.appointmentType === AppointmentTypeStrings.IN_SHOP) { + 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?...'); + } }, dateSelectedFromPicker(date) { this.selectedDate = date; @@ -400,13 +414,11 @@ export default { return this.mainStore.order?.serviceLocation?.appointmentType; }, async getAvailableDatesMethod(startDate, endDate) { - console.log('Fetching Available Dates from Method...'); - console.log('More Data concatenation called with Start Date:', startDate, 'End Date:', endDate); const newShopTimeSlots = await getAvailableDates( startDate, endDate, - this.appointmentType, - this.mainStore.order.serviceLocation.provider.providerNumber + this.activeAppointmentType, + this.selectedProvider.providerNumber ); // ADD API CALL RESULTS TO EXISTING DATE DATA this.selectableDatesData.days = @@ -415,8 +427,9 @@ export default { }, getAvailableDates, async getDatePickerInitialData(defaultProviderNumber = null) { - console.log('Fetching Date Picker Initial Data...'); - console.log('defaultProviderNumber:', defaultProviderNumber); + this.inShopDatesData = []; + this.mobileDatesData = []; + let todayDateString; const todayDateObject = new Date(); const calendarViewDirection = 'future'; @@ -449,7 +462,8 @@ export default { initialViewStartDate, initialViewEndDate, this.selectedAppointmentType || AppointmentTypeStrings.IN_SHOP, - this.selectedProvider.providerNumber || defaultProviderNumber + this.selectedProvider.providerNumber || defaultProviderNumber, + this.selectedServiceLocation.zipCode ); resolve(response); }); @@ -465,8 +479,36 @@ export default { daysFromStart: endDateObject.daysFromStart || null })); - console.log('Date Picker Initial Data:'); - console.log(initialData); + if (this.selectedAppointmentType === AppointmentTypeStrings.MOBILE + || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) { + this.mobileDatesData = initialData; + + const inShopDatePickerPromise = new Promise((resolve) => { + const response = getAvailableDates( + initialViewStartDate, + initialViewEndDate, + AppointmentTypeStrings.IN_SHOP, + this.selectedProvider.providerNumber || defaultProviderNumber, + this.selectedServiceLocation.zipCode + ); + resolve(response); + }); + + const inShopData = await inShopDatePickerPromise.then((response) => ({ + todayDate: todayDateString, + initialViewStartDate, + initialViewEndDate, + calendarViewDirection, + initialShopTimeSlotsResponse: response, + preSelectedDate, + initialDaysLoaded: endDateObject.newDaysLoaded || initialDays, + daysFromStart: endDateObject.daysFromStart || null + })); + + this.inShopDatesData = inShopData; + } else { + this.inShopDatesData = initialData; + } return initialData; }, @@ -531,24 +573,36 @@ export default { handleMqlChange(e) { this.isMobileView = !e.matches; }, - mobileZipUpdatedFromChild(newMobileZip) { - console.log('Parent - Mobile Zip Updated from Child:', newMobileZip); - }, - providerChangedFromChild(newProvider) { - console.log('Parent - Provider Changed from Child:', newProvider); - this.selectedProvider = newProvider; - // this.shouldRefreshDatePicker(); - }, - serviceLocationUpdatedFromChild(serviceLocationFromChild) { - this.selectedServiceLocation = serviceLocationFromChild; - }, - async shouldRefreshDatePicker() { - if (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP && 1 === 2) { - const initialData = await this.getDatePickerInitialData(); - this.selectableDatesData = initialData.initialShopTimeSlotsResponse; - this.$refs.datePicker.initializeComponent(initialData); + mobileZipUpdatedFromServiceLocation(mobileZipServiceLocation) { + if (mobileZipServiceLocation) { + this.mobileProviderNumber = mobileZipServiceLocation.mobileProviderNumber; + this.selectedServiceLocation = mobileZipServiceLocation; + + if (mobileZipServiceLocation && mobileZipServiceLocation.refreshDatePicker) { + this.refreshDatePicker(); + } } }, + providerChangedFromServiceLocation(newProvider) { + console.log('Parent - Provider Changed from Service Location:', newProvider); + this.selectedProvider = newProvider?.provider; + + if (newProvider?.refreshDatePicker) { + showIssLoadingModal(true); + 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; + this.$refs.datePicker.initializeComponent(data); + showIssLoadingModal(false); + }); + }, timeSlotSelectedFromPicker(timeSlot) { this.selectedTimeSlotInfo = timeSlot; this.showDatePickerError = false; diff --git a/src/layouts/schedule-page/service-location/service-location.vue b/src/layouts/schedule-page/service-location/service-location.vue index 975accdc..62ad4271 100644 --- a/src/layouts/schedule-page/service-location/service-location.vue +++ b/src/layouts/schedule-page/service-location/service-location.vue @@ -120,6 +120,7 @@ import { AppointmentTypeStrings } from '@/constants/schedule-constants.js'; import errorMessages from '@/constants/error-messages'; import { useMainStore } from '@/store'; +import showIssLoadingModal from '@/helpers/loading-modal-helper.js'; import { getAvailabilityRating, getPricedMobileFeePart, @@ -185,30 +186,43 @@ export default { }; }, computed: { - questionText() { - return this.getCmsContent( - 'ServiceTypeQuestionWidget', - 'QuestionText' - ); - }, answersFromCms() { return this.getCmsContent('ServiceTypeQuestionWidget', 'Answers'); }, - isServiceableMobile() { - if (this.isRecalibrationServiceableMobile !== null) { - return ( - this.isGlassServiceableMobile - && this.isRecalibrationServiceableMobile - ); - } - return this.isGlassServiceableMobile; + appointmentQuestionText() { + return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT); }, - isServiceableInshop() { - if (this.isRecalibrationServiceableInshop !== null) { - return (this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop); - } - - return this.isGlassServiceableInshop; + displayBigTruckNoShops() { + return this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile; + }, + displayLowAvailabilityInshop() { + return this.availabilityRating === 'low' && this.isInshop; + }, + displayMilitaryZipAlert() { + return this.zipContainsMilitaryBase && this.isServiceableMobile; + }, + displayMobileFeeDisclaimer() { + return this.mainStore.isNoComp || this.mainStore.isITAC; + }, + displayNoShopsAlert() { + return !this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile; + }, + displayRecalibrationWarning() { + return this.requiresInshopRecalibration; + }, + displayServiceableInshopOnly() { + return !this.isServiceableMobile && this.isServiceableInshop && !this.displayRecalibrationWarning; + }, + displayServiceableMobileOnly() { + return this.isServiceableMobile && this.recalibrationRequired && !this.isServiceableInshop; + }, + inShopOnlyCopy() { + let content = this.getCmsContent('AlertInshopOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT); + content = content.replace('{custom:city}', toTitleCase(this.city)); + return content; + }, + isBigTruck() { + return this.mainStore.order.vehicle.isBigTruck; }, isInshop() { return ( @@ -219,6 +233,51 @@ export default { isMobile() { return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE; }, + isServiceableInshop() { + if (this.isRecalibrationServiceableInshop !== null) { + return (this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop); + } + + return this.isGlassServiceableInshop; + }, + isServiceableMobile() { + if (this.isRecalibrationServiceableMobile !== null) { + return ( + this.isGlassServiceableMobile + && this.isRecalibrationServiceableMobile + ); + } + return this.isGlassServiceableMobile; + }, + militaryBaseWarningLinkText() { + return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.HEADLINE_TEXT); + }, + militaryBaseWarningText() { + return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.BODY_TEXT); + }, + mobileOnlyCopy() { + let content = this.getCmsContent('AlertMobileOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT); + content = content.replace('{custom:city}', toTitleCase(this.city)); + return content; + }, + mobileZipPlaceholder() { + return this.getCmsContent('MobileZipPlaceHolderWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT); + }, + navigateBackScenario() { + const { isNoComp, isITAC } = useMainStore(); + return isNoComp || isITAC + ? this.navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW + : this.navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW; + }, + questionText() { + return this.getCmsContent( + 'ServiceTypeQuestionWidget', + 'QuestionText' + ); + }, + recalibrationRequired() { + return this.mainStore.hasRecalibrationPart; + }, requiresInshopRecalibration() { // Specifically check for isRecalibrationServiceableMobile === false, not null or true. return ( @@ -227,104 +286,64 @@ export default { && this.isRecalibrationServiceableMobile === false ); }, - displayMilitaryZipAlert() { - return this.zipContainsMilitaryBase && this.isServiceableMobile; - }, - displayNoShopsAlert() { - return !this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile; - }, - displayBigTruckNoShops() { - return this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile; - }, - displayRecalibrationWarning() { - return this.requiresInshopRecalibration; - }, - displayLowAvailabilityInshop() { - return this.availabilityRating === 'low' && this.isInshop; - }, - displayServiceableInshopOnly() { - return !this.isServiceableMobile && this.isServiceableInshop && !this.displayRecalibrationWarning; - }, - displayServiceableMobileOnly() { - return this.isServiceableMobile && this.recalibrationRequired && !this.isServiceableInshop; - }, - displayMobileFeeDisclaimer() { - return this.mainStore.isNoComp || this.mainStore.isITAC; - }, - navigateBackScenario() { - const { isNoComp, isITAC } = useMainStore(); - return isNoComp || isITAC - ? this.navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW - : this.navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW; - }, - isBigTruck() { - return this.mainStore.order.vehicle.isBigTruck; - }, - mobileZipPlaceholder() { - return this.getCmsContent('MobileZipPlaceHolderWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT); - }, - militaryBaseWarningLinkText() { - return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.HEADLINE_TEXT); - }, - militaryBaseWarningText() { - return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.BODY_TEXT); - }, - appointmentQuestionText() { - return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT); - }, scheduleRecalText() { if (this.requiresInshopRecalibration) { return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2); } return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT); - }, - inShopOnlyCopy() { - let content = this.getCmsContent('AlertInshopOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT); - content = content.replace('{custom:city}', toTitleCase(this.city)); - return content; - }, - mobileOnlyCopy() { - let content = this.getCmsContent('AlertMobileOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT); - content = content.replace('{custom:city}', toTitleCase(this.city)); - return content; - }, - recalibrationRequired() { - return this.mainStore.hasRecalibrationPart; } }, watch: { - mobileZipCode(newZip) { - console.log('Mobile Zip Changed:', newZip); + async mobileZipCode(newZip) { if (newZip !== '') { - this.updateMobileZip(); - this.$emit('mobile-zip-updated', newZip); + showIssLoadingModal(true); + await this.updateMobileZip(); + const updateMobileZipServiceLocationObj = { + mobileProviderNumber: this.mobileProviderNumber, + provider: null, + refreshDatePicker: true, + zipCode: this.zipCode, + zipCodeCtu: this.zipCodeCtu + }; + this.$emit('mobile-zip-updated', updateMobileZipServiceLocationObj); } }, - selectedAppointmentType() { - console.log('Appointment Type Changed:', this.selectedAppointmentType); - this.mobileZipCode = ''; + selectedAppointmentType(newValue, oldValue) { if (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP && this.selectedProvider && this.availabilityRating === null) { - console.log('Fetching availability rating for in-shop appointment type...'); - const startDate = new Date(); - const endDate = new Date(); - endDate.setDate(startDate.getDate() + 6); - const formattedStartDate = startDate.toISOString().split('T')[0]; - const formattedEndDate = endDate.toISOString().split('T')[0]; - getAvailabilityRating( - formattedStartDate, - formattedEndDate, - AppointmentTypeStrings.IN_SHOP, - this.selectedProvider ? this.selectedProvider.providerNumber : null - ).then((rating) => { - this.availabilityRating = rating; - }); + this.refreshAvailabilityRating(); + + const appointmenTypeServiceLocationObj = { + appointmentType: newValue, + mobileProviderNumber: null, + provider: this.selectedProvider, + refreshDatePicker: oldValue !== newValue && oldValue !== null, + resetDatePicker: oldValue !== newValue || oldValue === null, + zipCode: this.zipCode, + zipCodeCtu: this.zipCodeCtu + }; + this.$emit('appointment-type-changed', appointmenTypeServiceLocationObj); + } else { + const appointmenTypeServiceLocationObj = { + appointmentType: newValue, + mobileProviderNumber: this.mobileProviderNumber, + provider: null, + refreshDatePicker: false, + resetDatePicker: true, + zipCode: this.zipCode, + zipCodeCtu: this.zipCodeCtu + }; + this.$emit('appointment-type-changed', appointmenTypeServiceLocationObj); } - this.$emit('appointment-type-changed', this.selectedAppointmentType); }, selectedProvider(newProvider, oldProvider) { - if (newProvider !== oldProvider) { - console.log('Selected Provider Changed:', newProvider); - this.$emit('provider-changed', newProvider); + if (newProvider?.providerNumber !== oldProvider?.providerNumber) { + const returnedProvider = { + provider: newProvider, + refreshDatePicker: oldProvider?.providerNumber !== null + }; + + this.refreshAvailabilityRating(); + this.$emit('provider-changed', returnedProvider); } } }, @@ -394,6 +413,36 @@ export default { getSelectedProvider() { return useMainStore().order.serviceLocation.provider; }, + async handleInShopZipUpdated(newZip) { + this.zipCode = newZip; + const zipCodeData = await getZipCodeData(this.zipCode); + this.city = zipCodeData.city; + this.setCtuForMobile(zipCodeData.zipCodeCtu); + this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase); + + const serviceabilityDetailsPromise = getServiceabilityDetails(this.zipCode); + await serviceabilityDetailsPromise.then((result) => { + const details = result.data; + if (details) { + this.setServiceabilityDetails(details); + } + }); + }, + refreshAvailabilityRating() { + const startDate = new Date(); + const endDate = new Date(); + endDate.setDate(startDate.getDate() + 6); + const formattedStartDate = startDate.toISOString().split('T')[0]; + const formattedEndDate = endDate.toISOString().split('T')[0]; + getAvailabilityRating( + formattedStartDate, + formattedEndDate, + AppointmentTypeStrings.IN_SHOP, + this.selectedProvider ? this.selectedProvider.providerNumber : null + ).then((rating) => { + this.availabilityRating = rating; + }); + }, setCtuForMobile(val) { this.zipCodeCtu = val; }, @@ -463,7 +512,6 @@ export default { }, async updateMobileZip() { this.mobileZipError = ''; - const zipCodeData = await getMobileZipCodeData(this.mobileZipCode); if (!zipCodeData.isValid) { @@ -477,7 +525,7 @@ export default { this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase); const serviceabilityDetailsPromise = getServiceabilityDetails(this.mobileZipCode); - serviceabilityDetailsPromise.then((result) => { + await serviceabilityDetailsPromise.then((result) => { const details = result.data; if (details) { this.setServiceabilityDetails(details); @@ -485,7 +533,7 @@ export default { }); const providersPromise = useMainStore().getProviders(this.mobileZipCode); - providersPromise.then((result) => { + await providersPromise.then((result) => { const providers = result.data; if (providers) { this.setMobileProviderNumber(providers.mobileProviderNumber); @@ -498,21 +546,6 @@ export default { } }); } - }, - async handleInShopZipUpdated(newZip) { - this.zipCode = newZip; - const zipCodeData = await getZipCodeData(this.zipCode); - this.city = zipCodeData.city; - this.setCtuForMobile(zipCodeData.zipCodeCtu); - this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase); - - const serviceabilityDetailsPromise = getServiceabilityDetails(this.zipCode); - serviceabilityDetailsPromise.then((result) => { - const details = result.data; - if (details) { - this.setServiceabilityDetails(details); - } - }); } } }; diff --git a/src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue b/src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue index b8935233..b8341ad0 100644 --- a/src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue +++ b/src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue @@ -57,7 +57,6 @@ export default { }, methods: { updateModelValue() { - console.log('Service Zip Updated:', this.internalZipcode); this.$emit('update:modelValue', this.internalZipcode); } } diff --git a/src/store/index.js b/src/store/index.js index 17a811af..3c0206f0 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -875,7 +875,8 @@ export const useMainStore = defineStore({ logApiCall: true }); }, - getMobileTimeSlots(startDate, endDate) { + getMobileTimeSlots(startDate, endDate, zipCodeOverride = null) { + console.log('Getting mobile time slots with zip code override:', zipCodeOverride); const { order } = this; const { vehicle } = this.order; let lineItems = [ @@ -921,7 +922,7 @@ export const useMainStore = defineStore({ style: vehicle.style, vin: vehicle.vin ?? '' }, - zipCode: order.serviceLocation.zipCode + zipCode: zipCodeOverride ?? order.serviceLocation.zipCode }; return globalMethods.callHttpClient({ method: endpoints.GetMobileTimeSlots.method, @@ -931,7 +932,7 @@ export const useMainStore = defineStore({ additionalSuccessEventDataHandler: (response) => getTimeSlotsAdditionalEventData( response.data.provisionalTriggers, - order.serviceLocation.zipCode, + zipCodeOverride ?? order.serviceLocation.zipCode, response.data.days?.[0]?.date ) });