Partial fixes

src/layouts/tpa-search/tpa-search.vue

@@ -37,14 +37,14 @@
                     </div>
                 </div>
             </Form>
-            <loader
+            <!-- <loader
                 v-if="initialLoading"
                 id="mapLoader"
                 loaderPosition="center"
                 loaderColor="blue"
                 :width="4"
-                :height="4" />
+                :height="4" /> -->
-            <div v-else>
+            <div>
                 <googleMap
                     id="map"
                     class="mb-4"
@@ -70,8 +70,8 @@
                                 id="providersLoader"
                                 loaderPosition="center"
                                 loaderColor="blue"
-                                :width="4"
+                                :width="2"
-                                :height="4"
+                                :height="2"
                                 class="my-4" />
                             <div v-else>
                                 <div class="my-4">
@@ -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 [filter, providers] = await getInitialFilterAndProviders();
-        const promiseResultMap = [
+        const cmsContent = await fetchCmsContentForPage(to.query.issPage);
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
-        ];
-        const resultMap = await settleAllPromises(promiseResultMap);
 
         next(async (vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
+            vm.setCmsContent(cmsContent);
-            await vm.setInitialFilterAndProviders();
+            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:
+    beforeUpdate() {
-        {
+        if (!this.dataLoaded) {
-            getProviderAddress(provider) {
+            this.dataLoaded = true;
-                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)}<br>${cellNumber ?? ''}`,
-                    value: provider?.providerNumber ?? ''
-                };
-            }
         }
+    },
+    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)}<br>${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;
+        }
+    }
 };
 </script>