From e7b062929459eec393b7d4e61a3d3a2807ce08ed Mon Sep 17 00:00:00 2001 From: Minojhini Valaiyapathi Date: Thu, 30 Jul 2026 09:44:09 -0400 Subject: [PATCH 1/9] CASH-2751 - Added service-zip --- src/layouts/scheduling/scheduling.spec.js | 106 +++++++++++ src/layouts/scheduling/scheduling.vue | 219 +++++++++++++++++++--- 2 files changed, 297 insertions(+), 28 deletions(-) diff --git a/src/layouts/scheduling/scheduling.spec.js b/src/layouts/scheduling/scheduling.spec.js index 92c869898..e221944d0 100644 --- a/src/layouts/scheduling/scheduling.spec.js +++ b/src/layouts/scheduling/scheduling.spec.js @@ -179,4 +179,110 @@ describe("scheduling.vue", () => { wrapper.unmount(); }); }); + + describe("service zip", () => { + test("prefills zipSearchCode from store on mount", () => { + const { wrapper } = setupMocks(); + expect(wrapper.vm.zipSearchCode).toBe("43235"); + wrapper.unmount(); + }); + + test("renders serviceZipQuestion with search icon", () => { + const { wrapper } = setupMocks(); + const zipQuestion = wrapper.find("service-zip-question-stub"); + expect(zipQuestion.exists()).toBe(true); + expect(zipQuestion.attributes("includesearchicon")).toBeDefined(); + wrapper.unmount(); + }); + + test("validates zip on search when field is blank", async () => { + const validate = jest.fn().mockResolvedValue({ valid: false }); + const loadSchedulingData = jest.spyOn(scheduling.methods, "loadSchedulingData"); + const { wrapper } = setupMocks(); + Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", { + configurable: true, + value: { + $refs: { + zipInputTextQuestion: { validate }, + }, + }, + }); + wrapper.vm.zipSearchCode = ""; + + await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); + + expect(validate).toHaveBeenCalled(); + expect(loadSchedulingData).not.toHaveBeenCalled(); + loadSchedulingData.mockRestore(); + wrapper.unmount(); + }); + + test("reloads providers and timeslots when a valid zip is searched", async () => { + store.dispatch.mockClear(); + store.dispatch.mockImplementation((action) => { + if (action === "getProviders") { + return Promise.resolve({ + data: { + shopProviders: [{ providerNumber: "05018" }], + mobileProviderNumber: "12345", + }, + }); + } + if (action === "saveServiceZipCodeInfo") { + return Promise.resolve(); + } + return Promise.resolve(null); + }); + settleAllPromises.mockResolvedValueOnce({ + inshopTimeSlots: { + providerTimeSlots: [ + { providerNumber: "05018", days: [{ date: "2026-07-22", timeSlots: [] }] }, + ], + }, + mobileTimeSlots: { days: [{ date: "2026-07-22", timeSlots: [] }] }, + }); + + const { wrapper } = setupMocks(); + await wrapper.setData({ isLoadingDates: false }); + Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", { + configurable: true, + value: { + $refs: { + zipInputTextQuestion: { + validate: jest.fn().mockResolvedValue({ valid: true }), + }, + }, + }, + }); + wrapper.vm.zipSearchCode = "44101"; + wrapper.vm.datePickerEndDate = "2026-08-15"; + wrapper.vm.selectedScheduling = { appointmentType: "Mobile" }; + const initialDatePickerKey = wrapper.vm.datePickerKey; + + await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); + + const getProvidersDispatch = store.dispatch.mock.calls.find( + ([actionName]) => actionName === "getProviders" + ); + expect(getProvidersDispatch).toEqual([ + "getProviders", + { + payload: { serviceZipCode: "44101" }, + pageNameToLog: undefined, + }, + ]); + const saveZipDispatch = store.dispatch.mock.calls.find( + ([actionName]) => actionName === "saveServiceZipCodeInfo" + ); + expect(saveZipDispatch).toEqual(["saveServiceZipCodeInfo", { zipCode: "44101" }]); + expect(settleAllPromises).toHaveBeenCalled(); + expect(wrapper.vm.datePickerKey).toBe(initialDatePickerKey + 1); + expect(wrapper.vm.selectedDate).toBeNull(); + expect(wrapper.vm.selectedScheduling).toBeNull(); + expect(wrapper.vm.isWaitlistRequested).toBe(false); + expect(wrapper.vm.inshopProvidersAndTimeSlots).toHaveLength(1); + expect(wrapper.vm.mobileProviderAndTimeSlot.providerNumber).toBe("12345"); + wrapper.unmount(); + }); + }); }); diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue index bb44ee09a..71d332b5b 100644 --- a/src/layouts/scheduling/scheduling.vue +++ b/src/layouts/scheduling/scheduling.vue @@ -11,7 +11,18 @@ +
+ + { vm.setCmsContent(resultMap.cmsContent); - vm.allShopProviders = allShopProviders; - vm.inshopProvidersAndTimeSlots = providers.map((provider) => ({ - provider, - timeSlots: null, - })); - vm.mobileProviderAndTimeSlot = mobileProviderNumber - ? { providerNumber: mobileProviderNumber, timeSlots: null } - : null; - const startDate = toDateString(0); - const endDate = toDateString(SCHEDULE_FETCH_DAYS - 1); - const providerNumbers = providers.map((provider) => provider.providerNumber); - const timeSlotsResultMap = await fetchTimeSlotsBatch({ - startDate, - endDate, - providerNumbers, - zipCode: serviceZipCode, - includeMobile: Boolean(mobileProviderNumber), + await vm.loadSchedulingData(serviceZipCode, { + providersResult: resultMap.providers, pageNameToLog: to.name, }); - assignInshopTimeSlotsFromV2Response( - vm.inshopProvidersAndTimeSlots, - timeSlotsResultMap.inshopTimeSlots - ); - if (vm.mobileProviderAndTimeSlot) { - vm.mobileProviderAndTimeSlot.timeSlots = timeSlotsResultMap.mobileTimeSlots ?? null; - } - vm.datesLoaded = true; vm.mobilePremiumAppointmentFee = resultMap.mobilePremiumFee ?? null; vm.isLoadingDates = false; }); @@ -383,9 +370,59 @@ export default { selectedScheduling: null, isWaitlistRequested: false, isLoadingMoreShops: false, + zipSearchCode: store.getters.order.serviceLocation.zipCode ?? "", + datePickerKey: 0, }; }, methods: { + async loadSchedulingData( + serviceZipCode, + { providersResult = null, pageNameToLog = this.pageName } = {} + ) { + let providersData = providersResult; + if (!providersData) { + providersData = await store.dispatch("getProviders", { + payload: { serviceZipCode }, + pageNameToLog, + }); + } + if (providersData?.shopProviders === undefined) { + providersData = providersData?.data ?? {}; + } + + const allShopProviders = providersData.shopProviders ?? []; + const providers = allShopProviders.slice(0, INITIAL_INSHOP_PROVIDER_COUNT); + const mobileProviderNumber = providersData?.mobileProviderNumber ?? null; + + this.allShopProviders = allShopProviders; + this.inshopProvidersAndTimeSlots = providers.map((provider) => ({ + provider, + timeSlots: null, + })); + this.mobileProviderAndTimeSlot = mobileProviderNumber + ? { providerNumber: mobileProviderNumber, timeSlots: null } + : null; + + const startDate = toDateString(0); + const endDate = toDateString(SCHEDULE_FETCH_DAYS - 1); + const providerNumbers = providers.map((provider) => provider.providerNumber); + const timeSlotsResultMap = await fetchTimeSlotsBatch({ + startDate, + endDate, + providerNumbers, + zipCode: serviceZipCode, + includeMobile: Boolean(mobileProviderNumber), + pageNameToLog, + }); + assignInshopTimeSlotsFromV2Response( + this.inshopProvidersAndTimeSlots, + timeSlotsResultMap.inshopTimeSlots + ); + if (this.mobileProviderAndTimeSlot) { + this.mobileProviderAndTimeSlot.timeSlots = timeSlotsResultMap.mobileTimeSlots ?? null; + } + this.datesLoaded = true; + }, getInshopTimeSlotsForSelectedDate(providerNumber) { if (!this.selectedDate) { return []; @@ -403,6 +440,37 @@ export default { onMobileZipCodeClicked() { // TODO: open service zip modal when zip edit is implemented for scheduling page }, + async onZipSearch(event) { + event?.preventDefault?.(); + + const zipInput = this.$refs.zipCodeSearch?.$refs?.zipInputTextQuestion; + if (!zipInput) { + return; + } + + const validationResult = await zipInput.validate(); + if (!validationResult.valid || this.isLoadingDates) { + return; + } + + this.isLoadingDates = true; + try { + await store.dispatch(storeActions.SAVE_SERVICE_ZIP_CODE_INFO, { + zipCode: this.zipSearchCode, + }); + this.selectedDate = null; + this.selectedScheduling = null; + this.isWaitlistRequested = false; + this.isLoadingMoreShops = false; + this.datesLoaded = false; + this.datePickerKey += 1; + this.datePickerStartDate = toDateString(0); + this.datePickerEndDate = toDateString(SCHEDULE_FETCH_DAYS - 1); + await this.loadSchedulingData(this.zipSearchCode); + } finally { + this.isLoadingDates = false; + } + }, async onViewMoreShopsClick() { if (this.isLoadingDates || this.isLoadingMoreShops) return; @@ -528,6 +596,7 @@ export default { inshopSchedulingCard, interceptOverlay, waitlistQuestion, + serviceZipQuestion, textLink, }, }; @@ -571,4 +640,98 @@ h5 { :deep(.text-link) { font-weight: 600; } + +.scheduling-zip-search { + position: relative; + display: flex; + flex-direction: row; + align-items: stretch; + width: 100%; + height: 48px; + border-radius: 48px; + padding-left: 16px; + border: 1px solid $gray-500; + background: $white; + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); + + &:has(:deep(.textbox-question.has-error)) { + border-color: $red; + } + + @include media-breakpoint-up(md) { + height: auto; + padding-left: 0; + } + + :deep(.textbox-question) { + width: 100%; + margin-bottom: 0; + } + + :deep(.input-wrapper.has-search-icon) { + display: flex; + align-items: stretch; + flex: 1 1 0; + height: 100%; + margin-bottom: 0; + + input, + .form-control { + width: 100%; + height: 48px; + min-height: 48px; + max-height: 48px; + border: none; + padding: 0 1.5rem; + outline: none; + font-size: 1rem; + background: transparent; + box-sizing: border-box; + border-radius: 2.5rem 0 0 2.5rem; + box-shadow: none; + + &:hover, + &:focus { + box-shadow: none; + border: none; + } + } + } + + :deep(.search-icon-button) { + position: static; + transform: none; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + background-color: $blue-150 !important; + background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%230070d1'/%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; + background-position: center; + width: 2.5rem; + height: 48px; + min-height: 48px; + max-height: 48px; + border: none; + border-radius: 0 2.5rem 2.5rem 0; + cursor: pointer; + + &:hover, + &:focus { + border: 1px solid $gray-500; + box-shadow: 0 0 0 4px $blue-300; + background-color: $blue-150 !important; + outline: none; + } + } + + :deep(.form-test-error) { + position: absolute; + top: 100%; + left: 0; + right: 0; + margin-top: 0.25rem; + } +} From 451b9a2747d66059463be1b54c65f2bf0e6f4cf3 Mon Sep 17 00:00:00 2001 From: Minojhini Valaiyapathi Date: Thu, 30 Jul 2026 10:34:55 -0400 Subject: [PATCH 2/9] CASH-2751 - separate component for scheduling zip search --- .../scheduling-zip-search.spec.js | 110 +++++++++++ .../scheduling-zip-search.vue | 181 ++++++++++++++++++ src/layouts/scheduling/scheduling.spec.js | 60 ++---- src/layouts/scheduling/scheduling.vue | 135 ++----------- 4 files changed, 315 insertions(+), 171 deletions(-) create mode 100644 src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js create mode 100644 src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue diff --git a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js new file mode 100644 index 000000000..e75a76a17 --- /dev/null +++ b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js @@ -0,0 +1,110 @@ +import { shallowMount } from "@vue/test-utils"; +import schedulingZipSearch from "./scheduling-zip-search"; +import store from "@/store"; +import { + getBillToAccountNumber, + getZipCodeData, +} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; + +jest.mock("@/store", () => ({ + dispatch: jest.fn().mockResolvedValue(null), +})); + +jest.mock( + "@/layouts/service-location/helpers/service-location-helper/service-location-helper", + () => ({ + getZipCodeData: jest.fn().mockResolvedValue({ + state: "OH", + zipCodeCtu: "03357", + }), + getBillToAccountNumber: jest.fn().mockResolvedValue("87291"), + }) +); + +function mountComponent(props = {}) { + return shallowMount(schedulingZipSearch, { + props: { + modelValue: "43235", + pageNameToLog: "scheduling", + ...props, + }, + }); +} + +describe("scheduling-zip-search.vue", () => { + test("renders serviceZipQuestion with search icon", () => { + const wrapper = mountComponent(); + const zipQuestion = wrapper.find("service-zip-question-stub"); + expect(zipQuestion.exists()).toBe(true); + expect(zipQuestion.attributes("includesearchicon")).toBeDefined(); + wrapper.unmount(); + }); + + test("validates zip on search when field is blank", async () => { + const validate = jest.fn().mockResolvedValue({ valid: false }); + const wrapper = mountComponent({ modelValue: "" }); + Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", { + configurable: true, + value: { + $refs: { + zipInputTextQuestion: { validate }, + }, + }, + }); + + await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); + + expect(validate).toHaveBeenCalled(); + expect(getZipCodeData).not.toHaveBeenCalled(); + expect(wrapper.emitted("zip-searched")).toBeUndefined(); + wrapper.unmount(); + }); + + test("does not search when disabled", async () => { + const validate = jest.fn().mockResolvedValue({ valid: true }); + const wrapper = mountComponent({ disabled: true }); + Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", { + configurable: true, + value: { + $refs: { + zipInputTextQuestion: { validate }, + }, + }, + }); + + await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); + + expect(validate).toHaveBeenCalled(); + expect(getZipCodeData).not.toHaveBeenCalled(); + wrapper.unmount(); + }); + + test("saves zip info and emits billToAccountNumber when a valid zip is searched", async () => { + store.dispatch.mockClear(); + const wrapper = mountComponent({ modelValue: "44101" }); + Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", { + configurable: true, + value: { + $refs: { + zipInputTextQuestion: { + validate: jest.fn().mockResolvedValue({ valid: true }), + }, + }, + }, + }); + + await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); + + expect(getZipCodeData).toHaveBeenCalledWith("44101", "scheduling"); + expect(getBillToAccountNumber).toHaveBeenCalledWith("03357", "scheduling"); + expect(store.dispatch).toHaveBeenCalledWith("saveServiceZipCodeInfo", { + zipCode: "44101", + state: "OH", + zipCodeCtu: "03357", + }); + expect(wrapper.emitted("zip-searched")).toEqual([ + [{ zipCode: "44101", billToAccountNumber: "87291" }], + ]); + wrapper.unmount(); + }); +}); diff --git a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue new file mode 100644 index 000000000..5d462258d --- /dev/null +++ b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue @@ -0,0 +1,181 @@ + + + + + diff --git a/src/layouts/scheduling/scheduling.spec.js b/src/layouts/scheduling/scheduling.spec.js index e221944d0..aa5cc4a78 100644 --- a/src/layouts/scheduling/scheduling.spec.js +++ b/src/layouts/scheduling/scheduling.spec.js @@ -9,7 +9,11 @@ jest.mock("@/store", () => ({ getters: { order: { serviceLocation: { zipCode: "43235", appointmentType: null }, - payment: { isInsurance: false, insuranceCoverage: { isVerified: false } }, + payment: { + isInsurance: false, + insuranceCoverage: { isVerified: false }, + billToAccountNumber: "12345", + }, referralNumber: "", damage: { isRepair: false }, lineItems: { glassParts: [] }, @@ -181,43 +185,20 @@ describe("scheduling.vue", () => { }); describe("service zip", () => { - test("prefills zipSearchCode from store on mount", () => { + test("prefills zipSearchCode and billToAccountNumber from store on mount", () => { const { wrapper } = setupMocks(); expect(wrapper.vm.zipSearchCode).toBe("43235"); + expect(wrapper.vm.billToAccountNumber).toBe("12345"); wrapper.unmount(); }); - test("renders serviceZipQuestion with search icon", () => { + test("renders schedulingZipSearch", () => { const { wrapper } = setupMocks(); - const zipQuestion = wrapper.find("service-zip-question-stub"); - expect(zipQuestion.exists()).toBe(true); - expect(zipQuestion.attributes("includesearchicon")).toBeDefined(); + expect(wrapper.find("scheduling-zip-search-stub").exists()).toBe(true); wrapper.unmount(); }); - test("validates zip on search when field is blank", async () => { - const validate = jest.fn().mockResolvedValue({ valid: false }); - const loadSchedulingData = jest.spyOn(scheduling.methods, "loadSchedulingData"); - const { wrapper } = setupMocks(); - Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", { - configurable: true, - value: { - $refs: { - zipInputTextQuestion: { validate }, - }, - }, - }); - wrapper.vm.zipSearchCode = ""; - - await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); - - expect(validate).toHaveBeenCalled(); - expect(loadSchedulingData).not.toHaveBeenCalled(); - loadSchedulingData.mockRestore(); - wrapper.unmount(); - }); - - test("reloads providers and timeslots when a valid zip is searched", async () => { + test("reloads providers and timeslots when zip-searched is emitted", async () => { store.dispatch.mockClear(); store.dispatch.mockImplementation((action) => { if (action === "getProviders") { @@ -228,9 +209,6 @@ describe("scheduling.vue", () => { }, }); } - if (action === "saveServiceZipCodeInfo") { - return Promise.resolve(); - } return Promise.resolve(null); }); settleAllPromises.mockResolvedValueOnce({ @@ -244,22 +222,11 @@ describe("scheduling.vue", () => { const { wrapper } = setupMocks(); await wrapper.setData({ isLoadingDates: false }); - Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", { - configurable: true, - value: { - $refs: { - zipInputTextQuestion: { - validate: jest.fn().mockResolvedValue({ valid: true }), - }, - }, - }, - }); - wrapper.vm.zipSearchCode = "44101"; wrapper.vm.datePickerEndDate = "2026-08-15"; wrapper.vm.selectedScheduling = { appointmentType: "Mobile" }; const initialDatePickerKey = wrapper.vm.datePickerKey; - await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); + await wrapper.vm.onZipSearched({ zipCode: "44101", billToAccountNumber: "87291" }); const getProvidersDispatch = store.dispatch.mock.calls.find( ([actionName]) => actionName === "getProviders" @@ -271,10 +238,7 @@ describe("scheduling.vue", () => { pageNameToLog: undefined, }, ]); - const saveZipDispatch = store.dispatch.mock.calls.find( - ([actionName]) => actionName === "saveServiceZipCodeInfo" - ); - expect(saveZipDispatch).toEqual(["saveServiceZipCodeInfo", { zipCode: "44101" }]); + expect(wrapper.vm.billToAccountNumber).toBe("87291"); expect(settleAllPromises).toHaveBeenCalled(); expect(wrapper.vm.datePickerKey).toBe(initialDatePickerKey + 1); expect(wrapper.vm.selectedDate).toBeNull(); diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue index 71d332b5b..e5235c76d 100644 --- a/src/layouts/scheduling/scheduling.vue +++ b/src/layouts/scheduling/scheduling.vue @@ -11,16 +11,11 @@ -
- - + From 645a8391586422a6101c4be7586c23fa9cfa17f7 Mon Sep 17 00:00:00 2001 From: scottkiener-at-safelite Date: Thu, 30 Jul 2026 11:19:19 -0400 Subject: [PATCH 3/9] Update estimated service time text USe a placeholder in the CMS Make it not show when we don't have the times available Make sure it can pull fform in-shop or mobile only zips Remove old unused header --- src/layouts/scheduling/scheduling.vue | 42 +++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 6 deletions(-) diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue index bb44ee09a..11de35dba 100644 --- a/src/layouts/scheduling/scheduling.vue +++ b/src/layouts/scheduling/scheduling.vue @@ -5,12 +5,10 @@
-
- - {{ serviceLocationText }} - -
- + Date: Thu, 30 Jul 2026 11:21:26 -0400 Subject: [PATCH 4/9] Remove console log --- src/layouts/scheduling/scheduling.vue | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue index 11de35dba..53bd3a852 100644 --- a/src/layouts/scheduling/scheduling.vue +++ b/src/layouts/scheduling/scheduling.vue @@ -336,11 +336,6 @@ export default { return this.getCmsContent("ViewMoreShopsWidget", "Text"); }, estimatedTimeText() { - console.log( - "estimatedTimeText", - this.estimatedServiceMinutesMinimum, - this.estimatedServiceMinutesMaximum - ); if (!this.estimatedServiceMinutesMinimum || !this.estimatedServiceMinutesMaximum) { return " "; } From 3738cbb9eb75159f7ec3f32957e265544f717ee1 Mon Sep 17 00:00:00 2001 From: Minojhini Valaiyapathi Date: Thu, 30 Jul 2026 11:24:00 -0400 Subject: [PATCH 5/9] CASH-2751 - Removed console logs --- .../scheduling/scheduling-zip-search/scheduling-zip-search.vue | 1 - src/layouts/scheduling/scheduling.vue | 1 - 2 files changed, 2 deletions(-) diff --git a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue index 5d462258d..e288f9058 100644 --- a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue +++ b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue @@ -71,7 +71,6 @@ export default { zipCodeData.zipCodeCtu, this.pageNameToLog ); - console.log("inside zip search ", this.localZipCode, billToAccountNumber); this.$emit("zip-searched", { zipCode: this.localZipCode, billToAccountNumber, diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue index e5235c76d..a0f67df4a 100644 --- a/src/layouts/scheduling/scheduling.vue +++ b/src/layouts/scheduling/scheduling.vue @@ -437,7 +437,6 @@ export default { // TODO: open service zip modal when zip edit is implemented for scheduling page }, async onZipSearched({ zipCode, billToAccountNumber }) { - console.log("onZipSearched", zipCode, billToAccountNumber); this.billToAccountNumber = billToAccountNumber; this.isLoadingDates = true; try { From e35071ccf9f80fa81b799de049b44cba086e79dc Mon Sep 17 00:00:00 2001 From: bmauger Date: Thu, 30 Jul 2026 11:55:23 -0400 Subject: [PATCH 6/9] Update zip search component. --- .../scheduling-zip-search.vue | 250 ++++++++++++------ 1 file changed, 163 insertions(+), 87 deletions(-) diff --git a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue index e288f9058..75aad0029 100644 --- a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue +++ b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue @@ -1,18 +1,30 @@ From b36c5d9fd8a58bf072cbc10ede67fd61f012a5b6 Mon Sep 17 00:00:00 2001 From: Minojhini Valaiyapathi Date: Thu, 30 Jul 2026 13:50:08 -0400 Subject: [PATCH 7/9] CASH-2751 - Scheduling Service zip changes --- .../scheduling-zip-search.spec.js | 102 ++++--- .../scheduling-zip-search.vue | 267 +++++++----------- src/layouts/scheduling/scheduling.spec.js | 33 +-- src/layouts/scheduling/scheduling.vue | 3 +- 4 files changed, 184 insertions(+), 221 deletions(-) diff --git a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js index e75a76a17..a384b1603 100644 --- a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js +++ b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js @@ -1,6 +1,7 @@ import { shallowMount } from "@vue/test-utils"; import schedulingZipSearch from "./scheduling-zip-search"; import store from "@/store"; +import { errorMessages } from "@/constants/error-messages"; import { getBillToAccountNumber, getZipCodeData, @@ -21,77 +22,72 @@ jest.mock( }) ); -function mountComponent(props = {}) { +function createWrapper(props = {}) { return shallowMount(schedulingZipSearch, { props: { - modelValue: "43235", + modelValue: "", pageNameToLog: "scheduling", ...props, }, + global: { + mocks: { + $root: { + cmsContentByWidget: { + ServiceZipQuestionWidget: { + QuestionText: "Service ZIP code:", + }, + }, + }, + }, + }, }); } describe("scheduling-zip-search.vue", () => { - test("renders serviceZipQuestion with search icon", () => { - const wrapper = mountComponent(); - const zipQuestion = wrapper.find("service-zip-question-stub"); - expect(zipQuestion.exists()).toBe(true); - expect(zipQuestion.attributes("includesearchicon")).toBeDefined(); - wrapper.unmount(); + beforeEach(() => { + jest.clearAllMocks(); }); - test("validates zip on search when field is blank", async () => { - const validate = jest.fn().mockResolvedValue({ valid: false }); - const wrapper = mountComponent({ modelValue: "" }); - Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", { - configurable: true, - value: { - $refs: { - zipInputTextQuestion: { validate }, - }, - }, - }); + test("prefills the zip input and CMS label from modelValue / ServiceZipQuestionWidget", () => { + const wrapper = createWrapper({ modelValue: "43235" }); + + expect(wrapper.find("#sz-service-zip").element.value).toBe("43235"); + expect(wrapper.vm.zipLabelText).toBe("Service ZIP code:"); + expect(wrapper.find("label").html()).toContain("Service ZIP code:"); + }); + + test("shows required error when searching with a blank zip", async () => { + const wrapper = createWrapper({ modelValue: "" }); await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); - expect(validate).toHaveBeenCalled(); + expect(wrapper.vm.errorMessage).toBe(errorMessages.SERVICE_ZIP_REQUIRED); + expect(wrapper.find(".scheduling-zip-search__error").classes()).toContain("active"); + expect(getZipCodeData).not.toHaveBeenCalled(); + expect(wrapper.emitted("zip-searched")).toBeUndefined(); + }); + + test("shows format error when zip is invalid", async () => { + const wrapper = createWrapper({ modelValue: "123" }); + + await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); + + expect(wrapper.vm.errorMessage).toBe(errorMessages.SERVICE_ZIP_FORMAT); expect(getZipCodeData).not.toHaveBeenCalled(); expect(wrapper.emitted("zip-searched")).toBeUndefined(); - wrapper.unmount(); }); test("does not search when disabled", async () => { - const validate = jest.fn().mockResolvedValue({ valid: true }); - const wrapper = mountComponent({ disabled: true }); - Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", { - configurable: true, - value: { - $refs: { - zipInputTextQuestion: { validate }, - }, - }, - }); + const wrapper = createWrapper({ modelValue: "44101", disabled: true }); await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); - expect(validate).toHaveBeenCalled(); expect(getZipCodeData).not.toHaveBeenCalled(); - wrapper.unmount(); + expect(wrapper.emitted("zip-searched")).toBeUndefined(); }); test("saves zip info and emits billToAccountNumber when a valid zip is searched", async () => { - store.dispatch.mockClear(); - const wrapper = mountComponent({ modelValue: "44101" }); - Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", { - configurable: true, - value: { - $refs: { - zipInputTextQuestion: { - validate: jest.fn().mockResolvedValue({ valid: true }), - }, - }, - }, - }); + const wrapper = createWrapper({ modelValue: "44101" }); await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); @@ -105,6 +101,20 @@ describe("scheduling-zip-search.vue", () => { expect(wrapper.emitted("zip-searched")).toEqual([ [{ zipCode: "44101", billToAccountNumber: "87291" }], ]); - wrapper.unmount(); + }); + + test("focusZipInput scrolls and focuses the zip input", () => { + const wrapper = createWrapper({ modelValue: "43235" }); + const zipInput = wrapper.find("#sz-service-zip").element; + zipInput.scrollIntoView = jest.fn(); + zipInput.focus = jest.fn(); + + wrapper.vm.focusZipInput(); + + expect(zipInput.scrollIntoView).toHaveBeenCalledWith({ + behavior: "smooth", + block: "center", + }); + expect(zipInput.focus).toHaveBeenCalledWith({ preventScroll: true }); }); }); diff --git a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue index 75aad0029..25203fd28 100644 --- a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue +++ b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue @@ -1,37 +1,47 @@ diff --git a/src/layouts/scheduling/scheduling.spec.js b/src/layouts/scheduling/scheduling.spec.js index aa5cc4a78..60347ace7 100644 --- a/src/layouts/scheduling/scheduling.spec.js +++ b/src/layouts/scheduling/scheduling.spec.js @@ -185,15 +185,11 @@ describe("scheduling.vue", () => { }); describe("service zip", () => { - test("prefills zipSearchCode and billToAccountNumber from store on mount", () => { + test("prefills zipSearchCode and billToAccountNumber from store and renders zip search", () => { const { wrapper } = setupMocks(); + expect(wrapper.vm.zipSearchCode).toBe("43235"); expect(wrapper.vm.billToAccountNumber).toBe("12345"); - wrapper.unmount(); - }); - - test("renders schedulingZipSearch", () => { - const { wrapper } = setupMocks(); expect(wrapper.find("scheduling-zip-search-stub").exists()).toBe(true); wrapper.unmount(); }); @@ -228,16 +224,10 @@ describe("scheduling.vue", () => { await wrapper.vm.onZipSearched({ zipCode: "44101", billToAccountNumber: "87291" }); - const getProvidersDispatch = store.dispatch.mock.calls.find( - ([actionName]) => actionName === "getProviders" - ); - expect(getProvidersDispatch).toEqual([ - "getProviders", - { - payload: { serviceZipCode: "44101" }, - pageNameToLog: undefined, - }, - ]); + expect(store.dispatch).toHaveBeenCalledWith("getProviders", { + payload: { serviceZipCode: "44101" }, + pageNameToLog: undefined, + }); expect(wrapper.vm.billToAccountNumber).toBe("87291"); expect(settleAllPromises).toHaveBeenCalled(); expect(wrapper.vm.datePickerKey).toBe(initialDatePickerKey + 1); @@ -248,5 +238,16 @@ describe("scheduling.vue", () => { expect(wrapper.vm.mobileProviderAndTimeSlot.providerNumber).toBe("12345"); wrapper.unmount(); }); + + test("anchors to zip search when mobile zip is clicked", () => { + const { wrapper } = setupMocks(); + const focusZipInput = jest.fn(); + wrapper.vm.$refs.schedulingZipSearch = { focusZipInput }; + + wrapper.vm.onMobileZipCodeClicked(); + + expect(focusZipInput).toHaveBeenCalled(); + wrapper.unmount(); + }); }); }); diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue index a0f67df4a..b9d11a8bc 100644 --- a/src/layouts/scheduling/scheduling.vue +++ b/src/layouts/scheduling/scheduling.vue @@ -12,6 +12,7 @@ Date: Thu, 30 Jul 2026 14:27:20 -0400 Subject: [PATCH 8/9] CASH-2751 - Removed merged in correct code --- src/layouts/scheduling/scheduling.vue | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue index ab6c3262d..676ddae45 100644 --- a/src/layouts/scheduling/scheduling.vue +++ b/src/layouts/scheduling/scheduling.vue @@ -5,11 +5,6 @@
-
- - {{ serviceLocationText }} - -
Date: Thu, 30 Jul 2026 14:52:17 -0400 Subject: [PATCH 9/9] CASH-2751 - Fixed unit tests --- .../scheduling-zip-search.spec.js | 61 +++++++++++++------ src/layouts/scheduling/scheduling.spec.js | 5 +- 2 files changed, 45 insertions(+), 21 deletions(-) diff --git a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js index a384b1603..f3129613b 100644 --- a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js +++ b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js @@ -2,6 +2,7 @@ import { shallowMount } from "@vue/test-utils"; import schedulingZipSearch from "./scheduling-zip-search"; import store from "@/store"; import { errorMessages } from "@/constants/error-messages"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { getBillToAccountNumber, getZipCodeData, @@ -22,24 +23,42 @@ jest.mock( }) ); -function createWrapper(props = {}) { +const MOCK_CMS_CONTENT = { + ServiceZipQuestionWidget: { + QuestionText: "Service ZIP code:", + }, +}; + +function mountComponent(props = {}, cmsContent = {}) { + const cmsContentByWidget = { + ...MOCK_CMS_CONTENT, + ...cmsContent, + ServiceZipQuestionWidget: { + ...MOCK_CMS_CONTENT.ServiceZipQuestionWidget, + ...cmsContent.ServiceZipQuestionWidget, + }, + }; + + const cmsMixin = { + methods: { + getCmsContent: jest.fn((widgetName, fieldName) => { + return cmsContentByWidget[widgetName]?.[fieldName] ?? ""; + }), + }, + }; + + const mountOptions = getMountOptions({ + route: { name: "scheduling" }, + mixins: [cmsMixin], + }); + return shallowMount(schedulingZipSearch, { props: { modelValue: "", pageNameToLog: "scheduling", ...props, }, - global: { - mocks: { - $root: { - cmsContentByWidget: { - ServiceZipQuestionWidget: { - QuestionText: "Service ZIP code:", - }, - }, - }, - }, - }, + global: mountOptions.global, }); } @@ -49,15 +68,16 @@ describe("scheduling-zip-search.vue", () => { }); test("prefills the zip input and CMS label from modelValue / ServiceZipQuestionWidget", () => { - const wrapper = createWrapper({ modelValue: "43235" }); + const wrapper = mountComponent({ modelValue: "43235" }); expect(wrapper.find("#sz-service-zip").element.value).toBe("43235"); expect(wrapper.vm.zipLabelText).toBe("Service ZIP code:"); expect(wrapper.find("label").html()).toContain("Service ZIP code:"); + wrapper.unmount(); }); test("shows required error when searching with a blank zip", async () => { - const wrapper = createWrapper({ modelValue: "" }); + const wrapper = mountComponent({ modelValue: "" }); await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); @@ -65,29 +85,32 @@ describe("scheduling-zip-search.vue", () => { expect(wrapper.find(".scheduling-zip-search__error").classes()).toContain("active"); expect(getZipCodeData).not.toHaveBeenCalled(); expect(wrapper.emitted("zip-searched")).toBeUndefined(); + wrapper.unmount(); }); test("shows format error when zip is invalid", async () => { - const wrapper = createWrapper({ modelValue: "123" }); + const wrapper = mountComponent({ modelValue: "123" }); await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); expect(wrapper.vm.errorMessage).toBe(errorMessages.SERVICE_ZIP_FORMAT); expect(getZipCodeData).not.toHaveBeenCalled(); expect(wrapper.emitted("zip-searched")).toBeUndefined(); + wrapper.unmount(); }); test("does not search when disabled", async () => { - const wrapper = createWrapper({ modelValue: "44101", disabled: true }); + const wrapper = mountComponent({ modelValue: "44101", disabled: true }); await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); expect(getZipCodeData).not.toHaveBeenCalled(); expect(wrapper.emitted("zip-searched")).toBeUndefined(); + wrapper.unmount(); }); test("saves zip info and emits billToAccountNumber when a valid zip is searched", async () => { - const wrapper = createWrapper({ modelValue: "44101" }); + const wrapper = mountComponent({ modelValue: "44101" }); await wrapper.vm.onZipSearch({ preventDefault: jest.fn() }); @@ -101,10 +124,11 @@ describe("scheduling-zip-search.vue", () => { expect(wrapper.emitted("zip-searched")).toEqual([ [{ zipCode: "44101", billToAccountNumber: "87291" }], ]); + wrapper.unmount(); }); test("focusZipInput scrolls and focuses the zip input", () => { - const wrapper = createWrapper({ modelValue: "43235" }); + const wrapper = mountComponent({ modelValue: "43235" }); const zipInput = wrapper.find("#sz-service-zip").element; zipInput.scrollIntoView = jest.fn(); zipInput.focus = jest.fn(); @@ -116,5 +140,6 @@ describe("scheduling-zip-search.vue", () => { block: "center", }); expect(zipInput.focus).toHaveBeenCalledWith({ preventScroll: true }); + wrapper.unmount(); }); }); diff --git a/src/layouts/scheduling/scheduling.spec.js b/src/layouts/scheduling/scheduling.spec.js index 60347ace7..3df8ab9a1 100644 --- a/src/layouts/scheduling/scheduling.spec.js +++ b/src/layouts/scheduling/scheduling.spec.js @@ -241,12 +241,11 @@ describe("scheduling.vue", () => { test("anchors to zip search when mobile zip is clicked", () => { const { wrapper } = setupMocks(); - const focusZipInput = jest.fn(); - wrapper.vm.$refs.schedulingZipSearch = { focusZipInput }; + wrapper.vm.$refs.schedulingZipSearch.focusZipInput = jest.fn(); wrapper.vm.onMobileZipCodeClicked(); - expect(focusZipInput).toHaveBeenCalled(); + expect(wrapper.vm.$refs.schedulingZipSearch.focusZipInput).toHaveBeenCalled(); wrapper.unmount(); }); });