diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue index 536ed4c9..55636eef 100644 --- a/src/digital-components/dropdown-question/dropdown-question.vue +++ b/src/digital-components/dropdown-question/dropdown-question.vue @@ -163,7 +163,7 @@ export default { &.dropdown-compact { display: flex; align-items: center; - justify-content: end; + justify-content: flex-end; margin-bottom: 1.25rem; .form-label { color: $darker-gray; diff --git a/src/iss-components/google-map/google-map.vue b/src/iss-components/google-map/google-map.vue index b3de8c7d..4f2fa023 100644 --- a/src/iss-components/google-map/google-map.vue +++ b/src/iss-components/google-map/google-map.vue @@ -107,9 +107,11 @@ export default { async getBoundsFromAddress(address) { await this.setGeocoder(); const result = await this.geocoder.geocode({ address }); - return result?.results?.length > 0 - ? result.results[0].geometry?.bounds - : null; + if (result?.results?.length > 0) { + return result.results[0].geometry?.bounds ?? null; + } else { + return null; + } }, async createMapWithMarkersForAddresses(markers) { const markerPositions = await this.getLocationsFromAddresses(markers); @@ -117,9 +119,12 @@ export default { const map = await this.getMap(zipBounds?.getCenter()); await this.addMarkersToMap(map, markerPositions); + let positionsToDisplay = markerPositions.map((marker) => marker.position); + if(zipBounds) { + positionsToDisplay.push(zipBounds.getNorthEast()); + positionsToDisplay.push(zipBounds.getSouthWest()); + } - const positionsToDisplay = markerPositions.map((marker) => marker.position) - .concat(zipBounds?.getNorthEast(), zipBounds?.getSouthWest()); const bounds = this.getBounds(positionsToDisplay); map.fitBounds(bounds); } diff --git a/src/layouts/service-location/service-zip-question/service-zip-question.vue b/src/layouts/service-location/service-zip-question/service-zip-question.vue index 8c3bd458..8a5b9bdb 100644 --- a/src/layouts/service-location/service-zip-question/service-zip-question.vue +++ b/src/layouts/service-location/service-zip-question/service-zip-question.vue @@ -42,12 +42,8 @@ export default { methods: { updateModelValue() { this.$emit('update:modelValue', this.internalZipcode); + this.internalZipcode = ''; }, - }, - watch: { - modelValue(newValue) { - this.internalZipcode = newValue; - } } }; diff --git a/src/layouts/service-location/shop-address/shop-address.vue b/src/layouts/service-location/shop-address/shop-address.vue index 327bd55e..db900b55 100644 --- a/src/layouts/service-location/shop-address/shop-address.vue +++ b/src/layouts/service-location/shop-address/shop-address.vue @@ -19,9 +19,9 @@ {{ displayedShopName }} {{ modelValue.distanceInMiles?.toFixed(2) }} mi -
{{ toTitleCase(modelValue.address?.streetAddress) }}
+
{{ getProviderAddress(modelValue) }}
- {{ toTitleCase(modelValue.address?.city) }}, {{ modelValue.address?.state }} {{ modelValue.address?.zipCode }} + {{ getProviderCityZipState(modelValue) }}
+ { - const streetAddress = toTitleCase(shopProvider.address.streetAddress); const city = toTitleCase(shopProvider.address.city); - const { state } = shopProvider.address; - const { zipCode } = shopProvider.address; const distanceInMiles = shopProvider.distanceInMiles.toFixed(2); return { buttonLabel: city, buttonLabelSubCopy: `${distanceInMiles} mi`, - buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`, + buttonBodyCopy: this.getFullProviderAddress(shopProvider), value: shopProvider.providerNumber }; }); @@ -200,11 +206,18 @@ export default { optionsObj[option.Name] = option.Text; }); return optionsObj; - } + }, + providerAddresses() { + return this.nearbyShops?.map((provider) => ({ + title: toTitleCase(provider.companyName), + fullAddress: this.getFullProviderAddress(provider), + addressLines: [this.getProviderAddress(provider), this.getProviderCityZipState(provider)] + })) ?? []; + }, }, watch: { - internalZipcode() { - this.refreshShops(); + async internalZipcode() { + await this.resetsOnZipInput(); }, async searchRadiusInMiles() { this.nearbyShops = await this.getNearbyShops(this.searchRadiusInMiles); @@ -230,6 +243,7 @@ export default { this.resetsOnZipInput().then(() => { this.internalProviderNumber = this.nearbyShops[0]?.providerNumber; }); + this.forceServiceZipRerender(); }, onModalClosed() { this.internalZipcode = this.serviceZipcode; @@ -249,6 +263,42 @@ export default { async getNearbyShops(radiusInMiles) { const result = await useMainStore().getProviders(this.internalZipcode, radiusInMiles); return result.data.shopProviders; + }, + getFullProviderAddress(provider) { + const addressLine1 = this.getProviderAddress(provider); + const addressLine2 = this.getProviderCityZipState(provider); + const joinString = + addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : ''; + return [addressLine1, addressLine2].join(joinString); + }, + getProviderAddress(provider) { + return toTitleCase(provider?.address?.streetAddress); + }, + getProviderCityZipState(provider) { + const city = toTitleCase(provider?.address?.city); + const state = provider?.address?.state ?? ''; + const zipCode = provider?.address?.zipCode ?? ''; + let addressLine2 = ''; + if (city) { + addressLine2 += city; + if (state || zipCode) { + addressLine2 += state ? ', ' : ' '; + } + } + if (state) { + addressLine2 += state; + addressLine2 += zipCode ? ' ' : ''; + } + if (zipCode) { + addressLine2 += zipCode; + } + return addressLine2; + }, + forceServiceZipRerender() { + this.renderServiceZip = false; + this.$nextTick(() => { + this.renderServiceZip = true; + }); } } }; @@ -283,5 +333,8 @@ export default { color: $black; font-weight: 600; } + :deep(#map) { + height: 27rem; + } }