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

Merge pull request #535 from Safelite/feature/digital/SSR-792.2

Browse source 
Prepopulating tpa search page when return
This commit is contained in:
michaela-brydon-safelite 2024-01-16 23:16:40 -05:00 committed by GitHub
commit c62f5c71c8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 216 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/layouts/tpa-search/__snapshots__/tpa-search.spec.js.snap
View file

@ -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,
}
`;

179
src/layouts/tpa-search/tpa-search.spec.js
View file

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

66
src/layouts/tpa-search/tpa-search.vue
View file

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

2
src/router/router-constants/routing-table.js
View file

@ -671,7 +671,7 @@ const routingTable = () => [
},
{
scenario: navigationScenarios.EDIT_PREFERRED_SHOP,
destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
destinationIssPageValue: issPageValues.TPA_SEARCH
},
{
scenario: navigationScenarios.EDIT_CONTACT_DETAILS,

2
src/store/index.js
View file

@ -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() {