diff --git a/src/layouts/tpa-search/__snapshots__/tpa-search.spec.js.snap b/src/layouts/tpa-search/__snapshots__/tpa-search.spec.js.snap index b34c010c..4154d1a8 100644 --- a/src/layouts/tpa-search/__snapshots__/tpa-search.spec.js.snap +++ b/src/layouts/tpa-search/__snapshots__/tpa-search.spec.js.snap @@ -7,7 +7,7 @@ Object { }, "dataLoaded": false, "filter": "", - "mapZipCode": "12663", + "mapZipCode": null, "providers": Array [], "reloadingProviders": false, "rules": Object { @@ -202,6 +202,6 @@ Object { "siteHeader": "SiteHeaderWidget", "tpaSearchQuestion": "TPASearchQuestion", }, - "zipCode": "12663", + "zipCode": null, } `; diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js index 30318933..56aa4e34 100644 --- a/src/layouts/tpa-search/tpa-search.spec.js +++ b/src/layouts/tpa-search/tpa-search.spec.js @@ -807,11 +807,30 @@ describe('TPA search page', () => { }); // TODO confirm tests appropriate. Also should this method be async? describe('on providers', () => { + test('does not update provider number when dataLoaded false', () => { + // Arrange + const initialValue = 1234; + const { wrapper } = getMountedComponent({}, { + dataLoaded: false, + selectedProviderNumber: initialValue, + }); + const value = 'some other value'; + const newProviders = [{ providerNumber: value }]; + + // Act + wrapper.vm.$options.watch.providers.call(wrapper.vm, newProviders); + + // Assert + expect(wrapper.vm.selectedProviderNumber).toBe(initialValue); + }); test.each([null, undefined, []])( 'sets selected provider number to "" when there are no providers', (newProviders) => { // Arrange - const { wrapper } = getMountedComponent(); + const { wrapper } = getMountedComponent({}, { + dataLoaded: true, + selectedProviderNumber: null + }); // Act wrapper.vm.$options.watch.providers.call(wrapper.vm, newProviders); @@ -822,7 +841,10 @@ describe('TPA search page', () => { ); test('sets selected provider number to value of provider when there is one provider', () => { // Arrange - const { wrapper } = getMountedComponent(); + const { wrapper } = getMountedComponent({}, { + dataLoaded: true, + selectedProviderNumber: null + }); const value = 'some value'; const newProviders = [{ providerNumber: value }]; @@ -834,7 +856,10 @@ describe('TPA search page', () => { }); test('sets selected provider number to "" when there are more than one provider', () => { // Arrange - const { wrapper } = getMountedComponent(); + const { wrapper } = getMountedComponent({}, { + dataLoaded: true, + selectedProviderNumber: null + }); const newProviders = [{ value: 'val1' }, { value: 'val2' }]; // Act @@ -846,10 +871,36 @@ describe('TPA search page', () => { }); describe('selectedProviderNumber', () => { describe('does not call updateServiceLocation when', () => { + test('dataLoaded is false', () => { + // Arrange + const providerNumber = 38447; + const { wrapper } = getMountedComponent({}, { + providers: [{ + providerNumber, + address: { + streetAddress: '143 Average Lane', + city: 'Cambridge', + state: 'OH', + zipCode: '72983', + zipCodeCtu: '0390' + }, + companyName: "Sally's Auto", + phoneNumber: '1234567890' + }], + dataLoaded: false + }); + + // Act + wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, providerNumber); + + // Assert + expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled(); + }); test('providers list is null ', () => { // Arrange const { wrapper } = getMountedComponent({}, { - providers: null + providers: null, + dataLoaded: true }); const newProviderNumber = 11235; @@ -862,7 +913,8 @@ describe('TPA search page', () => { test('providers list is empty ', () => { // Arrange const { wrapper } = getMountedComponent({}, { - providers: [] + providers: [], + dataLoaded: true }); const newProviderNumber = 11235; @@ -886,7 +938,8 @@ describe('TPA search page', () => { }, companyName: "Sally's Auto", phoneNumber: '1234567890' - }] + }], + dataLoaded: true }); const newProviderNumber = 11235; @@ -919,18 +972,26 @@ describe('TPA search page', () => { companyName, phoneNumber }; + const filter = '10 miles'; + const serviceZipCode = 10098; const { wrapper } = getMountedComponent({}, { providers: [ provider, { providerNumber: 328949832 } - ] + ], + filter, + zipCode: serviceZipCode, + dataLoaded: true }); // Act wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber); // Assert + expect(wrapper.vm.mainStore.updateServiceLocation).toHaveBeenCalledTimes(1); expect(wrapper.vm.mainStore.updateServiceLocation).toHaveBeenCalledWith({ + searchFilter: filter, + zipCode: serviceZipCode, provider: { providerNumber: newProviderNumber, address: { @@ -1292,11 +1353,89 @@ describe('TPA search page', () => { }); }); describe('before route enter', () => { + test('when service location zipCode set in store, it is used', async () => { + // Arrange + const { wrapper } = getMountedComponent(); + const customerZipCode = '18394'; + const serviceZipCode = '43982'; + useMainStore().order.customer.address.zipCode = customerZipCode; + useMainStore().order.serviceLocation.zipCode = serviceZipCode; + + // Act + await tpaSearch.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: 'tpa-search' } }, + undefined, + (c) => c(wrapper.vm) + ); + + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.zipCode).toBe(serviceZipCode); + }); + test('when service location zipCode not set in store, customer zipCode used', async () => { + // Arrange + const { wrapper } = getMountedComponent(); + const customerZipCode = '18394'; + useMainStore().order.customer.address.zipCode = customerZipCode; + useMainStore().order.serviceLocation.zipCode = null; + + // Act + await tpaSearch.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: 'tpa-search' } }, + undefined, + (c) => c(wrapper.vm) + ); + + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.zipCode).toBe(customerZipCode); + }); + test('when search filter set in store, expected filter and provider number returned', async () => { + // Arrange + const { wrapper } = getMountedComponent(); + const customerZipCode = '18394'; + const searchFilter = '25 miles'; + const providerNumber = 749321; + useMainStore().order.customer.address.zipCode = customerZipCode; + useMainStore().order.serviceLocation.zipCode = null; + useMainStore().order.serviceLocation.searchFilter = searchFilter; + useMainStore().order.serviceLocation.provider.providerNumber = providerNumber; + const providers = [{ companyName: 'some provider' }]; + const expectedRadius = 25; + useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => + ({ data: { shopProviders: radius === expectedRadius ? providers : [] } })); + + // Act + await tpaSearch.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: 'tpa-search' } }, + undefined, + (c) => c(wrapper.vm) + ); + + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.filter).toBe(searchFilter); + expect(wrapper.vm.providers).toEqual(providers); + expect(wrapper.vm.selectedProviderNumber).toBe(providerNumber); + expect(useMainStore().getTpaProviders).toBeCalledTimes(1); + expect(useMainStore().getTpaProviders).toBeCalledWith(customerZipCode, expectedRadius); + }); test('when providers exist at 15 mile radius, filter is set to "15 miles" and providers set to expected', async () => { // Arrange const { wrapper } = getMountedComponent(); const zipCode = '18394'; - useMainStore().order.customer.address.zipCode = zipCode; + useMainStore().order.customer.address.zipCode = '00001'; + useMainStore().order.serviceLocation.zipCode = zipCode; + useMainStore().order.serviceLocation.searchFilter = null; const providers = [{ companyName: 'provider' }]; useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => ({ data: { shopProviders: radius === 15 ? providers : [] } })); @@ -1314,15 +1453,19 @@ describe('TPA search page', () => { await wrapper.vm.$nextTick(); // Assert + expect(wrapper.vm.zipCode).toBe(zipCode); expect(wrapper.vm.filter).toBe(expectedFilter); expect(wrapper.vm.providers).toEqual(providers); + expect(wrapper.vm.selectedProviderNumber).toBeNull(); expect(useMainStore().getTpaProviders).toBeCalledTimes(1); }); test('when providers exist at 25 mile radius, filter is set to "25 miles" and providers set to expected', async () => { // Arrange const { wrapper } = getMountedComponent(); const zipCode = '18394'; - useMainStore().order.customer.address.zipCode = zipCode; + useMainStore().order.customer.address.zipCode = '00001'; + useMainStore().order.serviceLocation.zipCode = zipCode; + useMainStore().order.serviceLocation.searchFilter = null; const providers = [{ companyName: 'provider' }]; useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => ({ data: { shopProviders: radius === 25 ? providers : [] } })); @@ -1340,15 +1483,19 @@ describe('TPA search page', () => { await wrapper.vm.$nextTick(); // Assert + expect(wrapper.vm.zipCode).toBe(zipCode); expect(wrapper.vm.filter).toBe(expectedFilter); expect(wrapper.vm.providers).toEqual(providers); + expect(wrapper.vm.selectedProviderNumber).toBeNull(); expect(useMainStore().getTpaProviders).toBeCalledTimes(2); }); test('when providers exist at 50 mile radius but not 25, filter is set to "50 miles" and providers set to expected', async () => { // Arrange const { wrapper } = getMountedComponent(); const zipCode = '18394'; - useMainStore().order.customer.address.zipCode = zipCode; + useMainStore().order.customer.address.zipCode = '00001'; + useMainStore().order.serviceLocation.zipCode = zipCode; + useMainStore().order.serviceLocation.searchFilter = null; const providers = [{ companyName: 'provider' }]; useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => ({ data: { shopProviders: radius === 50 ? providers : [] } })); @@ -1366,8 +1513,10 @@ describe('TPA search page', () => { await wrapper.vm.$nextTick(); // Assert + expect(wrapper.vm.zipCode).toBe(zipCode); expect(wrapper.vm.filter).toBe(expectedFilter); expect(wrapper.vm.providers).toEqual(providers); + expect(wrapper.vm.selectedProviderNumber).toBeNull(); expect(useMainStore().getTpaProviders).toBeCalledTimes(3); }); test( @@ -1377,6 +1526,8 @@ describe('TPA search page', () => { const { wrapper } = getMountedComponent(); const zipCode = '18394'; useMainStore().order.customer.address.zipCode = zipCode; + useMainStore().order.serviceLocation.zipCode = null; + useMainStore().order.serviceLocation.searchFilter = null; const providers = [{ companyName: 'provider' }]; useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => ({ data: { shopProviders: radius === 100 ? providers : [] } })); @@ -1394,8 +1545,10 @@ describe('TPA search page', () => { await wrapper.vm.$nextTick(); // Assert + expect(wrapper.vm.zipCode).toBe(zipCode); expect(wrapper.vm.filter).toBe(expectedFilter); expect(wrapper.vm.providers).toEqual(providers); + expect(wrapper.vm.selectedProviderNumber).toBeNull(); expect(useMainStore().getTpaProviders).toBeCalledTimes(4); } ); @@ -1405,7 +1558,9 @@ describe('TPA search page', () => { // Arrange const { wrapper } = getMountedComponent(); const zipCode = '18394'; - useMainStore().order.customer.address.zipCode = zipCode; + useMainStore().order.customer.address.zipCode = '00001'; + useMainStore().order.serviceLocation.zipCode = zipCode; + useMainStore().order.serviceLocation.searchFilter = null; useMainStore().getTpaProviders = jest.fn().mockImplementation(() => ([])); const expectedFilter = '100 miles'; @@ -1421,8 +1576,10 @@ describe('TPA search page', () => { await wrapper.vm.$nextTick(); // Assert + expect(wrapper.vm.zipCode).toBe(zipCode); expect(wrapper.vm.filter).toBe(expectedFilter); expect(wrapper.vm.providers).toEqual([]); + expect(wrapper.vm.selectedProviderNumber).toBeNull(); expect(useMainStore().getTpaProviders).toBeCalledTimes(4); } ); diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue index fb1cd7b1..25610da5 100644 --- a/src/layouts/tpa-search/tpa-search.vue +++ b/src/layouts/tpa-search/tpa-search.vue @@ -131,10 +131,8 @@ import BaseFormMixin from '@/mixins/base-form-mixin.js'; import globalRules from '@/constants/global-rules.js'; import widgetFields from '@/constants/cms-widget-fields.js'; import { shallowRef } from 'vue'; -import routerParams from '@/router/router-constants/router-params'; import { toTitleCase, toDisplayPhoneNumber } from '@/helpers/text-helper.js'; -import bailoutCode from '@/constants/bailoutCode'; -import bailoutMessage from "@/constants/bailoutMessage"; +import bailoutMessage from '@/constants/bailoutMessage'; const radiusFilterPairs = [ { radius: 15, filter: '15 miles' }, @@ -143,15 +141,35 @@ const radiusFilterPairs = [ { radius: 100, filter: '100 miles' } ]; -async function getInitialFilterAndProviders() { - const { zipCode } = useMainStore().order.customer.address; +function convertRadiusFilterToInteger(filter) { + const pair = radiusFilterPairs.find((p) => p.filter === filter); + return pair?.radius ?? 0; +} + +async function getInitialSearchData() { + const customerZipCode = useMainStore().order.customer.address.zipCode; + const serviceLocationZipCode = useMainStore().order.serviceLocation.zipCode; + const zipCode = serviceLocationZipCode ?? customerZipCode; + + const { searchFilter } = useMainStore().order.serviceLocation; + let { providerNumber } = useMainStore().order.serviceLocation.provider; - let pairIndex = 0; let providers = []; + let radius = 0; + if (searchFilter) { + radius = convertRadiusFilterToInteger(searchFilter); + const result = await useMainStore().getTpaProviders(zipCode, radius); + providers = result?.data?.shopProviders ?? []; + + return { zipCode, filter: searchFilter, providers, providerNumber }; + } + + providerNumber = null; + let pairIndex = 0; let filter = ''; while (providers.length === 0 && pairIndex < radiusFilterPairs.length) { const pair = radiusFilterPairs[pairIndex]; - const { radius } = pair; + radius = pair.radius; filter = pair.filter; // eslint-disable-next-line no-await-in-loop const result = await useMainStore().getTpaProviders(zipCode, radius); @@ -160,7 +178,7 @@ async function getInitialFilterAndProviders() { pairIndex += 1; } - return { filter, providers }; + return { zipCode, filter, providers, providerNumber }; } export default { @@ -180,21 +198,19 @@ export default { }, mixins: [BaseFormMixin], async beforeRouteEnter(to, from, next) { - const { filter, providers } = await getInitialFilterAndProviders(); + const { zipCode, filter, providers, providerNumber } = await getInitialSearchData(); const cmsContent = await fetchCmsContentForPage(to.query.issPage); next(async (vm) => { vm.setCmsContent(cmsContent); - vm.setFilter(filter); - vm.setProviders(providers); + vm.setInitialSearchData(zipCode, filter, providers, providerNumber); }); }, data() { - const { zipCode } = useMainStore().order.customer.address; return { dataLoaded: false, - zipCode, - mapZipCode: zipCode, + zipCode: null, + mapZipCode: null, filter: '', providers: [], selectedProviderNumber: '', @@ -250,8 +266,7 @@ export default { ); }, radiusInMiles() { - const pair = radiusFilterPairs.find((p) => p.filter === this.filter); - return pair?.radius ?? 0; + return convertRadiusFilterToInteger(this.filter); }, noNetworkShopsAlertHeaderText() { return this.getCmsContent( @@ -279,14 +294,18 @@ export default { } }, providers(newProviders) { - this.selectedProviderNumber = newProviders?.length === 1 ?? false - ? newProviders[0]?.providerNumber ?? '' - : ''; + if (this.dataLoaded) { + this.selectedProviderNumber = newProviders?.length === 1 ?? false + ? newProviders[0]?.providerNumber ?? '' + : ''; + } }, selectedProviderNumber(newNumber) { const provider = this.providers?.find((p) => p.providerNumber === newNumber); - if (provider) { + if (provider && this.dataLoaded) { useMainStore().updateServiceLocation({ + searchFilter: this.filter, + zipCode: this.zipCode, provider: { providerNumber: provider?.providerNumber, address: { @@ -309,11 +328,12 @@ export default { } }, methods: { - setFilter(filter) { + setInitialSearchData(zipCode, filter, providers, providerNumber) { + this.zipCode = zipCode; + this.mapZipCode = zipCode; this.filter = filter; - }, - setProviders(providers) { this.providers = providers; + this.selectedProviderNumber = providerNumber; }, getProviderAddress(provider) { const city = toTitleCase(provider?.address?.city); diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index fc1bfdb5..9891ef39 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -671,7 +671,7 @@ const routingTable = () => [ }, { scenario: navigationScenarios.EDIT_PREFERRED_SHOP, - destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE + destinationIssPageValue: issPageValues.TPA_SEARCH }, { scenario: navigationScenarios.EDIT_CONTACT_DETAILS, diff --git a/src/store/index.js b/src/store/index.js index 1c2667a9..0249b80c 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -122,6 +122,7 @@ const getDefaultState = () => ({ appointmentType: null, isVehicleProtected: null, IsSafeliteProvider: null, + searchFilter: null, provider: { providerNumber: null, address: { @@ -1373,6 +1374,7 @@ export const useMainStore = defineStore({ companyName: serviceLocationInfo.provider?.companyName, phoneNumber: serviceLocationInfo.provider?.phoneNumber }; + this.order.serviceLocation.searchFilter = serviceLocationInfo.searchFilter; }, resetRegistrationState() {