jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Toggling routing depending on safelite shop or not

Browse source
This commit is contained in:
Michaela Brydon 2023-11-22 11:11:26 -05:00
parent 79e6cdd553
commit 0606e9cc27
4 changed files with 139 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/iss-components/google-map/google-map.vue
View file

@ -27,6 +27,9 @@ export default {
this.createMapWithMarkersForAddresses(newAddresses);
}
},
beforeMount() {
this.createMapWithMarkersForAddresses(this.addresses);
},
methods: {
async getMap(center) {
const { Map } = await window.google.maps.importLibrary('maps');

257
src/layouts/tpa-search/tpa-search.vue
View file

@ -1,124 +1,124 @@
<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"
ref="providersLoader"
loaderPosition="center"
loaderColor="blue"
:width="4"
:height="4"
class="loader" />
<div v-else>
<googleMap
id="map"
class="mb-4"
:addresses="providerAddresses"
:zipCode="mapZipCode"></googleMap>
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition">
<siteHeader
ref="siteHeader"
:cmsWidgetName="widget.siteHeader" />
<Form
id="providerSelectionForm"
v-slot="{ meta }"
id="searchProvidersForm"
@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"
ref="providersLoader"
loaderPosition="center"
loaderColor="blue"
:width="4"
:height="4"
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>
<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>
<siteFooter
ref="siteFooter"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
</div>
</Form>
<loader
v-if="initialLoading"
ref="providersLoader"
loaderPosition="center"
loaderColor="blue"
:width="4"
:height="4"
class="loader" />
<div v-else>
<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"
ref="providersLoader"
loaderPosition="center"
loaderColor="blue"
:width="4"
:height="4"
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>
</div>
</template>
<script>
// Components
@ -141,6 +141,7 @@ 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';
export default {
name: 'tpa-search',
@ -181,7 +182,7 @@ export default {
filter: '',
providers: [],
selectedProviderNumber: '',
initialLoading: true,
initialLoading: false,
reloadProviders: false,
additionalButtonData: {
displayAvailabilityIndicators: false
@ -200,7 +201,7 @@ export default {
filter: globalRules.OPTION_REQUIRED, // TODO do we even need this?
provider: globalRules.OPTION_REQUIRED
},
shopListButton
shopListButton: shallowRef(shopListButton)
};
},
computed: {
@ -256,22 +257,28 @@ export default {
},
providerButtonData() {
return this.providers?.map((provider) => this.getShopButtonDataFromProvider(provider)) ?? [];
},
selectedProviderIsSafeliteShop() {
return this.providers.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false;
}
},
watch: {
async filter() {
// TODO right now this results in getProviders being called once more than it needs to be
if (!this.initialLoading) {
this.reloadProviders = true;
this.providers = await this.getProviderButtonData();
await this.getProviderButtonData().then((providers) => {
this.providers = providers;
});
this.mapZipCode = this.zipCode;
this.reloadProviders = false;
} else {
this.initialLoading = false;
}
},
providers(newProviders) {
this.selectedProviderNumber = newProviders?.length === 1 ?? false
? newProviders[0].providerNumber
: '';
async providers(newProviders) {
if (newProviders?.length === 1 ?? false) {
this.selectedProviderNumber = newProviders[0]?.providerNumber ?? '';
}
}
},
methods:
@ -304,32 +311,26 @@ export default {
: addressLine2;
},
async setInitialFilterAndProviders() {
this.initialLoading = true;
const radiusOptions = [25, 50, 100];
const { zipCode } = useMainStore().order.customer.address;
console.log('getTpaProviders calls');
const tpaProvidersRadius25 = useMainStore().getTpaProviders(zipCode, radiusOptions[0]);
const tpaProvidersRadius50 = useMainStore().getTpaProviders(zipCode, radiusOptions[1]);
const tpaProvidersRadius100 = useMainStore().getTpaProviders(zipCode, radiusOptions[2]);
console.log('after not awaited getTpaProviders calls');
let radius = '25 miles';
let providers = await tpaProvidersRadius25;
console.log('after 25 awaited');
if ((providers?.data?.shopProviders ?? []).length === 0) {
radius = '50 miles';
providers = await tpaProvidersRadius50;
console.log('after 50 awaited');
if ((providers?.data?.shopProviders ?? []).length === 0) {
radius = '100 miles';
providers = await tpaProvidersRadius100;
console.log('after 100 awaited');
}
}
console.log('after if');
this.filter = radius;
this.providers = providers?.data?.shopProviders ?? [];
this.initialLoading = false;
},
async getProviderButtonData() {
const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles);
@ -351,10 +352,10 @@ export default {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
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) {

2
src/router/router-constants/navigation-scenarios.js
View file

@ -65,6 +65,8 @@ const navigationScenarios = Object.freeze({
// TPA Search
CLICKED_DO_NOT_SEE_MY_SHOP_LINK: 'CLICKED_DO_NOT_SEE_MY_SHOP_LINK',
CLICKED_FORWARD_WITH_SAFELITE_SHOP: 'CLICKED_FORWARD_WITH_SAFELITE_SHOP',
CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP: 'CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP',
// Provider Preference
CLICKED_FORWARD_WITH_SAFELITE: 'CLICKED_FORWARD_WITH_SAFELITE',

6
src/router/router-constants/routing-table.js
View file

@ -664,7 +664,11 @@ const routingTable = () => [
destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP,
destinationIssPageValue: issPageValues.SERVICE_LOCATION
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP,
destinationIssPageValue: issPageValues.TPA_SUBMIT
},
{