diff --git a/public/index.html b/public/index.html index 7edb81cc..d70b03cd 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,13 @@ window.dataLayer = [{}]; + + diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index fb036dc7..6a69b4e9 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -136,7 +136,7 @@ const endpoints = Object.freeze({ method: 'GET' }, GooglePlaces: { - url: 'https://maps.googleapis.com/maps/api/js?key={apiKey}&libraries=places' + url: (apiKey) => `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places` }, ValidateClientTag: { url: '/clientauth/api/v1/clientauth/validate-client-tag', diff --git a/src/iss-components/address-questions/address-questions.vue b/src/iss-components/address-questions/address-questions.vue index 39144ad2..665a3772 100644 --- a/src/iss-components/address-questions/address-questions.vue +++ b/src/iss-components/address-questions/address-questions.vue @@ -196,7 +196,7 @@ export default { const addressField1 = document.getElementById('autocomplete'); const self = this; - const url = endpoints.GooglePlaces.url.replace('{apiKey}', applicationConfig.GOOGLE_PLACES_API_KEY); + const url = endpoints.GooglePlaces.url(applicationConfig.GOOGLE_PLACES_API_KEY); this.$loadScript(url) .then(() => { diff --git a/src/iss-components/google-map/google-map.spec.js b/src/iss-components/google-map/google-map.spec.js new file mode 100644 index 00000000..e69de29b diff --git a/src/iss-components/google-map/google-map.vue b/src/iss-components/google-map/google-map.vue new file mode 100644 index 00000000..76d8af52 --- /dev/null +++ b/src/iss-components/google-map/google-map.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/src/iss-components/shop-list-button/shop-list-button.vue b/src/iss-components/shop-list-button/shop-list-button.vue index 5b1b154f..935d11fc 100644 --- a/src/iss-components/shop-list-button/shop-list-button.vue +++ b/src/iss-components/shop-list-button/shop-list-button.vue @@ -17,7 +17,7 @@ {{ buttonLabelSubCopy }}
{ useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (newProviders)); // Act - const result = await wrapper.vm.getProviders(); + const result = await wrapper.vm.getProviderButtonData(); // Assert expect(result).toEqual([]); @@ -525,7 +525,7 @@ describe('TPA search page', () => { useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (providers)); // Act - const result = await wrapper.vm.getProviders(); + const result = await wrapper.vm.getProviderButtonData(); // Assert expect(result).toEqual(providers.data); diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue index 817c0223..4f457cd5 100644 --- a/src/layouts/tpa-search/tpa-search.vue +++ b/src/layouts/tpa-search/tpa-search.vue @@ -36,18 +36,17 @@
+
-

- Placeholder for Map -

-
{ + next(async (vm) => { vm.setCmsContent(resultMap.cmsContent); - vm.setFilter(radius); - vm.setProviders(providers); + await vm.setInitialFilterAndProviders(); }); }, data() { const { zipCode } = useMainStore().order.customer.address; return { zipCode, + mapZipCode: zipCode, filter: '', providers: [], selectedProviderNumber: '', @@ -242,24 +224,56 @@ export default { this.widget.noNetworkShopsAlert, widgetFields.ALERT_WIDGET.HEADLINE_TEXT )?.replaceAll('{custom:radiusInMiles}', this.radiusInMiles); + }, + providerAddresses() { + return this.providers?.map((provider) => this.getProviderAddress(provider)) ?? []; + }, + providerButtonData() { + return this.providers?.map((provider) => this.getShopButtonDataFromProvider(provider)) ?? []; } }, watch: { async filter() { // TODO right now this results in getProviders being called once more than it needs to be - this.providers = await this.getProviders(); + this.providers = await this.getProviderButtonData(); + this.mapZipCode = this.zipCode; }, providers(newProviders) { this.selectedProviderNumber = newProviders?.length === 1 ?? false - ? newProviders[0].value + ? newProviders[0].providerNumber : ''; } }, methods: { - async getProviders() { + getProviderAddress(provider) { + const addressLine2 = `${provider.address.city}, ${provider.address.state} ${provider.address.zipCode}`; + return `${provider.address.streetAddress}, ${addressLine2}`; + }, + async setInitialFilterAndProviders() { + const radiusOptions = [25, 50, 100]; + const { zipCode } = useMainStore().order.customer.address; + + const tpaProvidersRadius25 = await useMainStore().getTpaProviders(zipCode, radiusOptions[0]); + const tpaProvidersRadius50 = await useMainStore().getTpaProviders(zipCode, radiusOptions[1]); + const tpaProvidersRadius100 = await useMainStore().getTpaProviders(zipCode, radiusOptions[2]); + let radius = '25 miles'; + + let providers = tpaProvidersRadius25; + if ((tpaProvidersRadius25?.data?.shopProviders ?? []).length === 0) { + radius = '50 miles'; + providers = tpaProvidersRadius50; + if ((tpaProvidersRadius50?.data?.shopProviders ?? []).length === 0) { + radius = '100 miles'; + providers = tpaProvidersRadius100; + } + } + this.filter = radius; + this.providers = providers.data.shopProviders; + }, + async getProviderButtonData() { const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles); - return getTpaProvidersResult?.data ?? []; + return getTpaProvidersResult?.data?.shopProviders ?? []; }, doNotSeeMyShopLinkClick() { this.$router.navigate( @@ -268,7 +282,8 @@ export default { ); }, async searchClick() { - this.providers = await this.getProviders(); + this.providers = await this.getProviderButtonData(); + this.mapZipCode = this.zipCode; }, backButtonAction() { this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); @@ -287,11 +302,16 @@ export default { return null; } }, - setFilter(filter) { - this.filter = filter; - }, - setProviders(providers) { - this.providers = providers; + getShopButtonDataFromProvider(provider) { + const { phoneNumber } = provider; + const distance = +provider.distanceInMiles.toFixed(1); + + return { + buttonLabel: provider.name, + buttonLabelSubCopy: `${distance} mi`, + buttonBodyCopy: `${this.getProviderAddress(provider)}
${phoneNumber}`, + value: provider.providerNumber + }; } } }; diff --git a/src/store/index.js b/src/store/index.js index 3e5e8cd3..804c5f28 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -806,38 +806,76 @@ export const useMainStore = defineStore({ }); }, - // TODO what info is returned here + // TODO update with real endpoint getTpaProviders(zipCode, radius) { return new Promise((resolve, reject) => { if (radius === 25) { - resolve({}); + resolve({ + data: { + mobileProviderNumber: null, + shopProviders: null + } + }); } else if (radius === 50) { resolve({ - data: [ - { - buttonLabel: 'USA Auto Glass', - buttonLabelSubCopy: '1.5 mi', - buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085
614-123-5555', - value: '000123' - } - ] + data: { + mobileProviderNumber: null, + shopProviders: [ + { + name: 'USA Auto Glass', + address: { + city: 'WESTERVILLE', + country: 'US', + state: 'OH', + streetAddress: '4403 EXECUTIVE PKWY', + streetAddress2: '', + zipCode: '43081', + zipCodeCtu: '01820' + }, + distanceInMiles: 8.393453111956896, + providerNumber: '003335', + phoneNumber: '614-123-5555' + } + ] + } }); } else { resolve({ - data: [ - { - buttonLabel: 'USA Auto Glass', - buttonLabelSubCopy: '1.5 mi', - buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085
614-123-5555', - value: '000123' - }, - { - buttonLabel: 'USA Auto Glass', - buttonLabelSubCopy: '1.5 mi', - buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085
614-123-5555', - value: '000123' - } - ] + data: { + mobileProviderNumber: null, + shopProviders: [ + { + name: 'USA Auto Glass', + address: { + city: 'WESTERVILLE', + country: 'US', + state: 'OH', + streetAddress: '4403 EXECUTIVE PKWY', + streetAddress2: '', + zipCode: '43081', + zipCodeCtu: '01820' + }, + distanceInMiles: 8.393453111956896, + providerNumber: '003335', + phoneNumber: '614-123-5555' + }, + { + name: 'Safelite AutoGlass', + address: { + city: 'WORTHINGTON', + country: 'US', + state: 'OH', + streetAddress: '760 DEARBORN PARK LN', + streetAddress2: '', + zipCode: '43085', + zipCodeCtu: '01820' + }, + distanceInMiles: 8.704336770196678, + providerNumber: '001820', + phoneNumber: '740-555-1234' + } + ] + } }); } });