From 9dbcf1c93de8e7d40f4e67230c4c1c4410a527a2 Mon Sep 17 00:00:00 2001 From: scottkiener-at-safelite Date: Wed, 6 May 2026 10:23:01 -0400 Subject: [PATCH] Styling updates and multi location time slot retrieval Added back and forward arrow SVGs Now we call for all timeslots of three closest stores and mobile if a provider is available --- src/layouts/scheduling/scheduling.vue | 107 +++++++++++------- .../date-picker/date-picker.spec.js | 7 +- src/ux-components/date-picker/date-picker.vue | 40 +++++-- 3 files changed, 96 insertions(+), 58 deletions(-) diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue index 958c203e6..8d435c729 100644 --- a/src/layouts/scheduling/scheduling.vue +++ b/src/layouts/scheduling/scheduling.vue @@ -1,32 +1,32 @@ @@ -65,32 +65,48 @@ export default { payload: { serviceZipCode }, pageNameToLog: to.name, }); - const inShopProviderNumber = shopProviderData?.data?.shopProviders[0]?.providerNumber; - const mobileProviderNumber = shopProviderData?.data?.mobileProviderNumber; + const providers = shopProviderData?.data?.shopProviders?.slice(0, 3) ?? []; + const mobileProviderNumber = shopProviderData?.data?.mobileProviderNumber ?? null; + + const startDate = toDateString(0); + const endDate = toDateString(14); const promiseResultMap = [ { resultKey: "cmsContent", promise: fetchCmsContentForPage(to.name), }, - { - resultKey: "inshopOrDropoffTimeSlots", + ...providers.map((p, i) => ({ + resultKey: `inshopTimeSlots_${i}`, promise: store.dispatch("getShopTimeSlots", { payload: { - startDate: toDateString(0), - endDate: toDateString(15), + startDate, + endDate, shopAppointmentType: "InshopOrDropoff", - providerNumber: inShopProviderNumber, + providerNumber: p.providerNumber, }, pageNameToLog: to.name, }), - }, + })), + ...(mobileProviderNumber + ? [ + { + resultKey: "mobileTimeSlots", + promise: store.dispatch("getMobileTimeSlots", { + payload: { startDate, endDate, zipCode: serviceZipCode }, + pageNameToLog: to.name, + }), + }, + ] + : []), ]; const resultMap = await settleAllPromises(promiseResultMap); next((vm) => { vm.setCmsContent(resultMap.cmsContent); - vm.inshopOrDropoffTimeSlots = resultMap.inshopOrDropoffTimeSlots; - vm.inShopProviderNumber = inShopProviderNumber; + vm.inShopProviders = providers; + vm.inshopTimeSlots = providers.map((_, i) => resultMap[`inshopTimeSlots_${i}`] ?? null); + vm.mobileTimeSlots = resultMap.mobileTimeSlots ?? null; + vm.inShopProviderNumber = providers[0]?.providerNumber ?? null; vm.mobileProviderNumber = mobileProviderNumber; }); }, @@ -99,7 +115,11 @@ export default { return this.getCmsContent("ServiceLocationText", "Text"); }, availableDates() { - return (this.inshopOrDropoffTimeSlots?.days ?? []).map((d) => d.date); + const inshopDates = this.inshopTimeSlots.flatMap((ts) => + (ts?.days ?? []).map((d) => d.date) + ); + const mobileDates = (this.mobileTimeSlots?.days ?? []).map((d) => d.date); + return [...new Set([...inshopDates, ...mobileDates])].sort(); }, }, data() { @@ -107,8 +127,10 @@ export default { selectedDate: null, isLoadingDates: false, datePickerStartDate: toDateString(0), - datePickerEndDate: toDateString(15), - inshopOrDropoffTimeSlots: null, + datePickerEndDate: toDateString(14), + inShopProviders: [], + inshopTimeSlots: [], + mobileTimeSlots: null, inShopProviderNumber: null, mobileProviderNumber: null, }; @@ -166,6 +188,7 @@ export default { // TODO: call getShopTimeSlots with the next date range and append results // to this.availableDates and advance this.datePickerEndDate + console.log("handleRequestMoreDates"); this.isLoadingDates = false; this.$refs.loadingModal.hideModal(); @@ -196,7 +219,7 @@ export default { }; \ No newline at end of file +.dark-header { + color: $black; +} + diff --git a/src/ux-components/date-picker/date-picker.spec.js b/src/ux-components/date-picker/date-picker.spec.js index d2b6c9ee5..3d65b29c9 100644 --- a/src/ux-components/date-picker/date-picker.spec.js +++ b/src/ux-components/date-picker/date-picker.spec.js @@ -152,12 +152,7 @@ describe("date-picker.vue", () => { describe("navigation", () => { test("goForward advances windowStart by the window size", async () => { // Use a longer range so forward is possible on desktop (window 5) - const manyDates = [ - "2026-01-01", - "2026-01-02", - "2026-01-03", - "2026-01-10", - ]; + const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"]; const wrapper = mountDesktop({ availableDates: manyDates }); expect(wrapper.vm.canGoForward).toBe(true); await wrapper.vm.goForward(); diff --git a/src/ux-components/date-picker/date-picker.vue b/src/ux-components/date-picker/date-picker.vue index c6698897d..f94350f7b 100644 --- a/src/ux-components/date-picker/date-picker.vue +++ b/src/ux-components/date-picker/date-picker.vue @@ -5,7 +5,12 @@ :disabled="!canGoBack" aria-label="Previous dates" @click="goBack"> - ‹ + + + + + +