@@ -134,13 +134,41 @@ import loader from '@/ux-components/loader/loader.vue';
// Supporting files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import settleAllPromises from '@/helpers/layout-helper';
import { useMainStore } from '@/store';
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';
+async function getInitialFilterAndProviders() {
+ const radiusOptions = [15, 25, 50, 100];
+ const { zipCode } = useMainStore().order.customer.address;
+
+ const tpaProvidersRadius15 = useMainStore().getTpaProviders(zipCode, radiusOptions[0]);
+ const tpaProvidersRadius25 = useMainStore().getTpaProviders(zipCode, radiusOptions[1]);
+ const tpaProvidersRadius50 = useMainStore().getTpaProviders(zipCode, radiusOptions[2]);
+ const tpaProvidersRadius100 = useMainStore().getTpaProviders(zipCode, radiusOptions[3]);
+
+ let filter = '15 miles';
+ let providers = await tpaProvidersRadius15;
+ if ((providers?.data?.shopProviders ?? []).length === 0) {
+ filter = '25 miles';
+ providers = await tpaProvidersRadius25;
+ if ((providers?.data?.shopProviders ?? []).length === 0) {
+ filter = '50 miles';
+ providers = await tpaProvidersRadius50;
+ if ((providers?.data?.shopProviders ?? []).length === 0) {
+ filter = '100 miles';
+ providers = await tpaProvidersRadius100;
+ }
+ }
+ }
+ return [
+ filter,
+ providers?.data?.shopProviders ?? []
+ ];
+}
+
export default {
name: 'tpa-search',
components: {
@@ -158,29 +186,24 @@ export default {
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
- const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
- const promiseResultMap = [
- {
- resultKey: 'cmsContent',
- promise: cmsContentPromise
- }
- ];
- const resultMap = await settleAllPromises(promiseResultMap);
+ const [filter, providers] = await getInitialFilterAndProviders();
+ const cmsContent = await fetchCmsContentForPage(to.query.issPage);
next(async (vm) => {
- vm.setCmsContent(resultMap.cmsContent);
- await vm.setInitialFilterAndProviders();
+ vm.setCmsContent(cmsContent);
+ vm.setFilter(filter);
+ vm.setProviders(providers);
});
},
data() {
const { zipCode } = useMainStore().order.customer.address;
return {
+ dataLoaded: false,
zipCode,
mapZipCode: zipCode,
filter: '',
providers: [],
selectedProviderNumber: '',
- initialLoading: false,
reloadProviders: false,
additionalButtonData: {
displayAvailabilityIndicators: false
@@ -234,6 +257,8 @@ export default {
},
radiusInMiles() {
switch (this.filter) {
+ case '15 miles':
+ return 15;
case '25 miles':
return 25;
case '50 miles':
@@ -262,15 +287,13 @@ export default {
},
watch: {
async filter() {
- if (!this.initialLoading) {
+ if (this.dataLoaded) {
this.reloadProviders = true;
await this.getProviderButtonData().then((providers) => {
this.providers = providers;
});
this.mapZipCode = this.zipCode;
this.reloadProviders = false;
- } else {
- this.initialLoading = false;
}
},
async providers(newProviders) {
@@ -279,106 +302,106 @@ export default {
}
}
},
- methods:
- {
- getProviderAddress(provider) {
- const city = provider?.address?.city ?? '';
- const state = provider?.address?.state ?? '';
- const zipCode = provider?.address?.zipCode ?? '';
- let addressLine2 = '';
- if (city) {
- addressLine2 = city;
- if (state || zipCode) {
- if (state) {
- addressLine2 += ',';
- }
- addressLine2 += ' ';
- }
- }
- if (state) {
- addressLine2 += `${state}`;
- if (zipCode) {
- addressLine2 += ' ';
- }
- }
- if (zipCode) {
- addressLine2 += `${zipCode}`;
- }
- return provider?.address?.streetAddress
- ? `${provider.address.streetAddress}, ${addressLine2}`
- : addressLine2;
- },
- async setInitialFilterAndProviders() {
- this.initialLoading = true;
- const radiusOptions = [25, 50, 100];
- const { zipCode } = useMainStore().order.customer.address;
-
- const tpaProvidersRadius25 = useMainStore().getTpaProviders(zipCode, radiusOptions[0]);
- const tpaProvidersRadius50 = useMainStore().getTpaProviders(zipCode, radiusOptions[1]);
- const tpaProvidersRadius100 = useMainStore().getTpaProviders(zipCode, radiusOptions[2]);
-
- let radius = '25 miles';
- let providers = await tpaProvidersRadius25;
- if ((providers?.data?.shopProviders ?? []).length === 0) {
- radius = '50 miles';
- providers = await tpaProvidersRadius50;
- if ((providers?.data?.shopProviders ?? []).length === 0) {
- radius = '100 miles';
- providers = await tpaProvidersRadius100;
- }
- }
- this.filter = radius;
- this.providers = providers?.data?.shopProviders ?? [];
- },
- async getProviderButtonData() {
- const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles);
- return getTpaProvidersResult?.data?.shopProviders ?? [];
- },
- doNotSeeMyShopLinkClick() {
- this.$router.navigate(
- this.navigationScenarios.CLICKED_DO_NOT_SEE_MY_SHOP_LINK,
- this.$route
- );
- },
- async searchClick() {
- this.reloadProviders = true;
- this.providers = await this.getProviderButtonData();
- this.mapZipCode = this.zipCode;
- this.reloadProviders = false;
- },
- backButtonAction() {
- this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
- },
- forwardButtonAction() {
- const scenario = this.selectedProviderIsSafeliteShop
- ? this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP
- : this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP;
- this.$router.navigate(scenario, this.$route);
- },
- getCustomValueFromString(str) {
- switch (str) {
- case 'radiusInMiles':
- return this.radiusInMiles;
- default:
- return null;
- }
- },
- getShopButtonDataFromProvider(provider) {
- const cellNumber = provider?.phoneNumber ?? '';
- const distance = provider?.distanceInMiles !== null && !Number.isNaN(parseFloat(provider?.distanceInMiles))
- ? +provider.distanceInMiles.toFixed(1)
- : null;
-
- return {
- buttonLabel: provider?.companyName ?? '',
- buttonLabelSubCopy: distance === null
- ? ''
- : `${distance} mi`,
- buttonBodyCopy: `${this.getProviderAddress(provider)}
${cellNumber ?? ''}`,
- value: provider?.providerNumber ?? ''
- };
- }
+ beforeUpdate() {
+ if (!this.dataLoaded) {
+ this.dataLoaded = true;
}
+ },
+ methods: {
+ getProviderAddress(provider) {
+ const city = provider?.address?.city ?? '';
+ const state = provider?.address?.state ?? '';
+ const zipCode = provider?.address?.zipCode ?? '';
+ let addressLine2 = '';
+ if (city) {
+ addressLine2 = city;
+ if (state || zipCode) {
+ if (state) {
+ addressLine2 += ',';
+ }
+ addressLine2 += ' ';
+ }
+ }
+ if (state) {
+ addressLine2 += `${state}`;
+ if (zipCode) {
+ addressLine2 += ' ';
+ }
+ }
+ if (zipCode) {
+ addressLine2 += `${zipCode}`;
+ }
+ return provider?.address?.streetAddress
+ ? `${provider.address.streetAddress}, ${addressLine2}`
+ : addressLine2;
+ },
+ setFilter(filter) {
+ this.filter = filter;
+ },
+ setProviders(providers) {
+ this.providers = providers;
+ },
+ async getProviderButtonData() {
+ const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles);
+ return getTpaProvidersResult?.data?.shopProviders ?? [];
+ },
+ doNotSeeMyShopLinkClick() {
+ this.$router.navigate(
+ this.navigationScenarios.CLICKED_DO_NOT_SEE_MY_SHOP_LINK,
+ this.$route
+ );
+ },
+ async searchClick() {
+ this.reloadProviders = true;
+ this.providers = await this.getProviderButtonData();
+ this.mapZipCode = this.zipCode;
+ this.reloadProviders = false;
+ },
+ backButtonAction() {
+ this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+ },
+ forwardButtonAction() {
+ const scenario = this.selectedProviderIsSafeliteShop
+ ? this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP
+ : this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP;
+ this.$router.navigate(scenario, this.$route);
+ },
+ getCustomValueFromString(str) {
+ switch (str) {
+ case 'radiusInMiles':
+ return this.radiusInMiles;
+ default:
+ return null;
+ }
+ },
+ getShopButtonDataFromProvider(provider) {
+ const cellNumber = this.getDisplayPhoneNumber(provider?.phoneNumber ?? '');
+ const distance = provider?.distanceInMiles !== null && !Number.isNaN(parseFloat(provider?.distanceInMiles))
+ ? +provider.distanceInMiles.toFixed(1)
+ : null;
+
+ return {
+ buttonLabel: provider?.companyName ?? '',
+ buttonLabelSubCopy: distance === null
+ ? ''
+ : `${distance} mi`,
+ buttonBodyCopy: `${this.getProviderAddress(provider)}
${cellNumber ?? ''}`,
+ value: provider?.providerNumber ?? ''
+ };
+ },
+ getDisplayPhoneNumber(phoneNumber) {
+ let result = '';
+ let remainingDigits = phoneNumber;
+ if (phoneNumber.length === 11) {
+ result += `${remainingDigits[0]}-`;
+ remainingDigits = remainingDigits.substring(1);
+ }
+ if (phoneNumber.length > 9) {
+ result += remainingDigits.replace(/^(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
+ }
+ return result;
+ }
+ }
};