Partial fixes
This commit is contained in:
Michaela Brydon
parent
cdac218b41
commit
d7fcadb1f0
1 changed files with 142 additions and 119 deletions
|
|
@ -37,14 +37,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
<loader
|
||||
<!-- <loader
|
||||
v-if="initialLoading"
|
||||
id="mapLoader"
|
||||
loaderPosition="center"
|
||||
loaderColor="blue"
|
||||
:width="4"
|
||||
:height="4" />
|
||||
<div v-else>
|
||||
:height="4" /> -->
|
||||
<div>
|
||||
<googleMap
|
||||
id="map"
|
||||
class="mb-4"
|
||||
|
|
@ -70,8 +70,8 @@
|
|||
id="providersLoader"
|
||||
loaderPosition="center"
|
||||
loaderColor="blue"
|
||||
:width="4"
|
||||
:height="4"
|
||||
:width="2"
|
||||
: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 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)}<br>${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)}<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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue