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

Prepopulating tpa search page when return

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

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

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() {
+function convertRadiusFilterToInteger(filter) {
-    const { zipCode } = useMainStore().order.customer.address;
+    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.setInitialSearchData(zipCode, filter, providers, providerNumber);
-            vm.setProviders(providers);
         });
     },
     data() {
-        const { zipCode } = useMainStore().order.customer.address;
         return {
             dataLoaded: false,
-            zipCode,
+            zipCode: null,
-            mapZipCode: zipCode,
+            mapZipCode: null,
             filter: '',
             providers: [],
             selectedProviderNumber: '',
@@ -250,8 +266,7 @@ export default {
             );
         },
         radiusInMiles() {
-            const pair = radiusFilterPairs.find((p) => p.filter === this.filter);
+            return convertRadiusFilterToInteger(this.filter);
-            return pair?.radius ?? 0;
         },
         noNetworkShopsAlertHeaderText() {
             return this.getCmsContent(
@@ -279,14 +294,18 @@ export default {
             }
         },
         providers(newProviders) {
-            this.selectedProviderNumber = newProviders?.length === 1 ?? false
+            if (this.dataLoaded) {
-                ? newProviders[0]?.providerNumber ?? ''
+                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);

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,

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