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,8 +302,12 @@ export default {
             }
         }
     },
-    methods:
+    beforeUpdate() {
-        {
+        if (!this.dataLoaded) {
+            this.dataLoaded = true;
+        }
+    },
+    methods: {
         getProviderAddress(provider) {
             const city = provider?.address?.city ?? '';
             const state = provider?.address?.state ?? '';
@@ -308,27 +335,11 @@ export default {
                 ? `${provider.address.streetAddress}, ${addressLine2}`
                 : addressLine2;
         },
-            async setInitialFilterAndProviders() {
+        setFilter(filter) {
-                this.initialLoading = true;
+            this.filter = filter;
-                const radiusOptions = [25, 50, 100];
+        },
-                const { zipCode } = useMainStore().order.customer.address;
+        setProviders(providers) {
-
+            this.providers = providers;
-                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);
@@ -364,7 +375,7 @@ export default {
             }
         },
         getShopButtonDataFromProvider(provider) {
-                const cellNumber = provider?.phoneNumber ?? '';
+            const cellNumber = this.getDisplayPhoneNumber(provider?.phoneNumber ?? '');
             const distance = provider?.distanceInMiles !== null && !Number.isNaN(parseFloat(provider?.distanceInMiles))
                 ? +provider.distanceInMiles.toFixed(1)
                 : null;
@@ -377,6 +388,18 @@ export default {
                 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;
         }
     }
 };