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