416 lines
16 KiB
Vue
416 lines
16 KiB
Vue
<template>
|
|
<div class="page-container-grouped-styles">
|
|
<div class="fade-on-route-transition">
|
|
<siteHeader
|
|
ref="siteHeader"
|
|
:cmsWidgetName="widget.siteHeader" />
|
|
<Form
|
|
id="searchProvidersForm"
|
|
@submit="onSubmit"
|
|
@invalidSubmit="onInvalidSubmit">
|
|
<div class="container-fluid pb-2">
|
|
<div class="mx-5">
|
|
<label
|
|
id="tpaSearchQuestionLabel"
|
|
for="tpaSearchQuestionField"
|
|
class="text-center mt-5 mb-0 text-black w-100 search-question">
|
|
{{ tpaSearchQuestionLabel }}
|
|
</label>
|
|
<label
|
|
id="searchInstructions"
|
|
for="tpaSearchQuestionField"
|
|
class="text-center small darker-gray w-100 mb-4">
|
|
{{ searchInstructionsText }}
|
|
</label>
|
|
<div class="mb-5">
|
|
<textboxQuestion
|
|
id="tpaSearchQuestionField"
|
|
v-model="zipCode"
|
|
inputId="tpaSearchQuestionField"
|
|
:cmsWidgetName="widget.tpaSearchQuestion"
|
|
:includeSearchIcon="true"
|
|
:displayQuestionText="false"
|
|
isRequired
|
|
:validationRules="rules.zipCode"
|
|
@clickEvent="searchClick" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
<!-- <loader
|
|
v-if="initialLoading"
|
|
id="mapLoader"
|
|
loaderPosition="center"
|
|
loaderColor="blue"
|
|
:width="4"
|
|
:height="4" /> -->
|
|
<div>
|
|
<googleMap
|
|
id="map"
|
|
class="mb-4"
|
|
:addresses="providerAddresses"
|
|
:zipCode="mapZipCode"></googleMap>
|
|
<Form
|
|
id="providerSelectionForm"
|
|
v-slot="{ meta }"
|
|
@submit="onSubmit"
|
|
@invalidSubmit="onInvalidSubmit">
|
|
<div class="container-fluid pb-2">
|
|
<div class="mx-5">
|
|
<dropdownQuestion
|
|
id="searchRadiusFilter"
|
|
v-model="filter"
|
|
:cmsWidgetName="widget.filterByQuestion"
|
|
inputId="filterByQuestionField"
|
|
:options="filterOptions"
|
|
disableAutoFill
|
|
:validationRules="rules.filter" />
|
|
<loader
|
|
v-if="reloadProviders"
|
|
id="providersLoader"
|
|
loaderPosition="center"
|
|
loaderColor="blue"
|
|
:width="2"
|
|
:height="2"
|
|
class="my-4" />
|
|
<div v-else>
|
|
<div class="my-4">
|
|
<buttonQuestion
|
|
id="selectProviderQuestion"
|
|
v-model="selectedProviderNumber"
|
|
buttonTypeString="shopListButton"
|
|
:buttonTypeObject="shopListButton"
|
|
class="radioQuestion"
|
|
:answers="providerButtonData"
|
|
groupName="chooseShop"
|
|
textPosition="text-start"
|
|
isRequired
|
|
:validationRules="rules.provider"
|
|
:additionalButtonData="additionalButtonData" />
|
|
<alert
|
|
v-if="providers?.length === 0 ?? true"
|
|
id="alertNoNetworkProviders"
|
|
:cmsWidgetName="widget.noNetworkShopsAlert"
|
|
alertClass="alert-warning"
|
|
:isDismissible="false"
|
|
:manualHeadline="noNetworkShopsAlertHeaderText" />
|
|
</div>
|
|
<div
|
|
class="text-center">
|
|
<textLink
|
|
id="preferredShopNotListedLink"
|
|
linkType="navigation"
|
|
href="#!"
|
|
:text="shopNotListedModalLink"
|
|
@clickEvent="doNotSeeMyShopLinkClick" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<siteFooter
|
|
ref="siteFooter"
|
|
:cmsWidgetName="widget.siteFooter"
|
|
:isForwardActionDisabled="!meta.valid"
|
|
@ForwardClicked="forwardButtonAction"
|
|
@backClicked="backButtonAction" />
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// Components
|
|
import { Form } from 'vee-validate';
|
|
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
|
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
|
|
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
|
|
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
|
import textLink from '@/ux-components/text-link/text-link.vue';
|
|
import alert from '@/ux-components/alert/alert.vue';
|
|
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
|
import googleMap from '@/iss-components/google-map/google-map.vue';
|
|
import shopListButton from '@/iss-components/shop-list-button/shop-list-button.vue';
|
|
import loader from '@/ux-components/loader/loader.vue';
|
|
|
|
// Supporting files
|
|
import { fetchCmsContentForPage } from '@/helpers/cms-content-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: {
|
|
siteHeader,
|
|
textboxQuestion,
|
|
dropdownQuestion,
|
|
buttonQuestion,
|
|
textLink,
|
|
alert,
|
|
loader,
|
|
googleMap,
|
|
siteFooter,
|
|
// eslint-disable-next-line vue/no-reserved-component-names
|
|
Form
|
|
},
|
|
mixins: [BaseFormMixin],
|
|
async beforeRouteEnter(to, from, next) {
|
|
const [filter, providers] = await getInitialFilterAndProviders();
|
|
const cmsContent = await fetchCmsContentForPage(to.query.issPage);
|
|
|
|
next(async (vm) => {
|
|
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: '',
|
|
reloadProviders: false,
|
|
additionalButtonData: {
|
|
displayAvailabilityIndicators: false
|
|
},
|
|
widget: {
|
|
siteHeader: 'SiteHeaderWidget',
|
|
tpaSearchQuestion: 'TPASearchQuestion',
|
|
searchInstructions: 'SearchInstructions',
|
|
filterByQuestion: 'FilterByQuestion',
|
|
noNetworkShopsAlert: 'NoNetworkShopsAlertWidget',
|
|
shopNotListedLink: 'ShopNotListedLink',
|
|
siteFooter: 'SiteFooterWidget'
|
|
},
|
|
rules: {
|
|
zipCode: `${globalRules.ZIP_CODE_REQUIRED}|${globalRules.ZIP_CODE_SEARCH_FORMAT}`,
|
|
filter: globalRules.OPTION_REQUIRED, // TODO do we even need this?
|
|
provider: globalRules.OPTION_REQUIRED
|
|
},
|
|
shopListButton: shallowRef(shopListButton)
|
|
};
|
|
},
|
|
computed: {
|
|
filterOptions() {
|
|
const filterByAnswers = this.getCmsContent(
|
|
this.widget.filterByQuestion,
|
|
widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
|
|
) ?? [];
|
|
const filterByAnswersObj = {};
|
|
[...filterByAnswers].forEach((answer) => {
|
|
filterByAnswersObj[answer.Name] = answer.Name;
|
|
});
|
|
return filterByAnswersObj;
|
|
},
|
|
tpaSearchQuestionLabel() {
|
|
return this.getCmsContent(
|
|
this.widget.tpaSearchQuestion,
|
|
widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
|
|
);
|
|
},
|
|
searchInstructionsText() {
|
|
return this.getCmsContent(
|
|
this.widget.searchInstructions,
|
|
widgetFields.TEXT_BLOCK_WIDGET.TEXT
|
|
);
|
|
},
|
|
shopNotListedModalLink() {
|
|
return this.getCmsContent(
|
|
this.widget.shopNotListedLink,
|
|
widgetFields.TEXT_BLOCK_WIDGET.TEXT
|
|
);
|
|
},
|
|
radiusInMiles() {
|
|
switch (this.filter) {
|
|
case '15 miles':
|
|
return 15;
|
|
case '25 miles':
|
|
return 25;
|
|
case '50 miles':
|
|
return 50;
|
|
case '100 miles':
|
|
return 100;
|
|
default:
|
|
return 0;
|
|
}
|
|
},
|
|
noNetworkShopsAlertHeaderText() {
|
|
return this.getCmsContent(
|
|
this.widget.noNetworkShopsAlert,
|
|
widgetFields.ALERT_WIDGET.HEADLINE_TEXT
|
|
)?.replaceAll('{custom:radiusInMiles}', this.radiusInMiles);
|
|
},
|
|
providerAddresses() {
|
|
return this.providers?.map((provider) => this.getProviderAddress(provider)) ?? [];
|
|
},
|
|
providerButtonData() {
|
|
return this.providers?.map((provider) => this.getShopButtonDataFromProvider(provider)) ?? [];
|
|
},
|
|
selectedProviderIsSafeliteShop() {
|
|
return this.providers?.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false;
|
|
}
|
|
},
|
|
watch: {
|
|
async filter() {
|
|
if (this.dataLoaded) {
|
|
this.reloadProviders = true;
|
|
await this.getProviderButtonData().then((providers) => {
|
|
this.providers = providers;
|
|
});
|
|
this.mapZipCode = this.zipCode;
|
|
this.reloadProviders = false;
|
|
}
|
|
},
|
|
async providers(newProviders) {
|
|
if (newProviders?.length === 1 ?? false) {
|
|
this.selectedProviderNumber = newProviders[0]?.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>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-question {
|
|
font-size: $h5-font-size;
|
|
}
|
|
|
|
.darker-gray {
|
|
color: map-get($colors, "darker-gray");
|
|
}
|
|
</style>
|