Troubleshooting
This commit is contained in:
Michaela Brydon
parent
4708c84d4a
commit
fc753e4253
4 changed files with 195 additions and 128 deletions
|
|
@ -67,13 +67,11 @@ export default {
|
|||
mixins: [inputButtonWrapperMixin],
|
||||
data() {
|
||||
return {
|
||||
availabilityRating: null
|
||||
availabilityRating: null,
|
||||
displayAvailabilityIndicator: this.additionalButtonData?.displayAvailabilityIndicators ?? false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
displayAvailabilityIndicators() {
|
||||
return true;
|
||||
},
|
||||
isLoaderDisplayed() {
|
||||
return this.availabilityRating == null;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -124,6 +124,7 @@ export default {
|
|||
const formattedEndDate = endDate.toISOString().split('T')[0];
|
||||
|
||||
return {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: getAvailabilityRating,
|
||||
startDate: formattedStartDate,
|
||||
endDate: formattedEndDate,
|
||||
|
|
|
|||
|
|
@ -1,98 +1,103 @@
|
|||
<template>
|
||||
<siteHeader
|
||||
ref="siteHeader"
|
||||
:cmsWidgetName="widget.siteHeader" />
|
||||
<Form
|
||||
ref="searchProvidersForm"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="container-fluid pb-2">
|
||||
<div class="mx-5">
|
||||
<p
|
||||
ref="tpaSearchQuestionLabel"
|
||||
class="text-center mt-5 mb-0 text-black w-100 search-question">
|
||||
{{ tpaSearchQuestionLabel }}
|
||||
</p>
|
||||
<!-- TODO make this label for appropriate text box -->
|
||||
<p
|
||||
ref="searchInstructions"
|
||||
class="text-center small darker-gray w-100 mb-4">
|
||||
{{ searchInstructionsText }}
|
||||
</p>
|
||||
<div class="mb-5">
|
||||
<textboxQuestion
|
||||
ref="tpaSearchQuestionField"
|
||||
v-model="zipCode"
|
||||
inputId="tpaSearchQuestionField"
|
||||
:cmsWidgetName="widget.tpaSearchQuestion"
|
||||
:displayQuestionText="false"
|
||||
:includeSearchIcon="true"
|
||||
isRequired
|
||||
:validationRules="rules.zipCode"
|
||||
@clickEvent="searchClick" />
|
||||
<div>
|
||||
<siteHeader
|
||||
ref="siteHeader"
|
||||
:cmsWidgetName="widget.siteHeader" />
|
||||
<Form
|
||||
ref="searchProvidersForm"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="container-fluid pb-2">
|
||||
<div class="mx-5">
|
||||
<label
|
||||
ref="tpaSearchQuestionLabel"
|
||||
for="tpaSearchQuestionField"
|
||||
class="text-center mt-5 mb-0 text-black w-100 search-question">
|
||||
{{ tpaSearchQuestionLabel }}
|
||||
</label>
|
||||
<!-- TODO make this label for appropriate text box -->
|
||||
<label
|
||||
ref="searchInstructions"
|
||||
for="tpaSearchQuestionField"
|
||||
class="text-center small darker-gray w-100 mb-4">
|
||||
{{ searchInstructionsText }}
|
||||
</label>
|
||||
<div class="mb-5">
|
||||
<textboxQuestion
|
||||
ref="tpaSearchQuestionField"
|
||||
v-model="zipCode"
|
||||
inputId="tpaSearchQuestionField"
|
||||
:cmsWidgetName="widget.tpaSearchQuestion"
|
||||
:includeSearchIcon="true"
|
||||
:displayQuestionText="false"
|
||||
isRequired
|
||||
:validationRules="rules.zipCode"
|
||||
@clickEvent="searchClick" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
<Form
|
||||
ref="providerSelectionForm"
|
||||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="container-fluid pb-2">
|
||||
<p class="mb-4">
|
||||
Placeholder for Map
|
||||
</p>
|
||||
</Form>
|
||||
<Form
|
||||
ref="providerSelectionForm"
|
||||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="container-fluid pb-2">
|
||||
<p class="mb-4">
|
||||
Placeholder for Map
|
||||
</p>
|
||||
|
||||
<div class="mx-5">
|
||||
<dropdownQuestion
|
||||
id="filter"
|
||||
ref="filter"
|
||||
v-model="filter"
|
||||
:cmsWidgetName="widget.filterByQuestion"
|
||||
inputId="filterByQuestionField"
|
||||
:options="filterOptions"
|
||||
disableAutoFill
|
||||
:validationRules="rules.filter" />
|
||||
<div class="mx-5">
|
||||
<dropdownQuestion
|
||||
id="filter"
|
||||
ref="filter"
|
||||
v-model="filter"
|
||||
:cmsWidgetName="widget.filterByQuestion"
|
||||
inputId="filterByQuestionField"
|
||||
:options="filterOptions"
|
||||
disableAutoFill
|
||||
:validationRules="rules.filter" />
|
||||
|
||||
<div class="my-4">
|
||||
<buttonQuestion
|
||||
ref="providerQuestion"
|
||||
v-model="selectedProviderNumber"
|
||||
buttonTypeString="shopListButton"
|
||||
:buttonTypeObject="shopListButton"
|
||||
class="radioQuestion"
|
||||
:answers="providers"
|
||||
groupName="chooseShop"
|
||||
textPosition="text-start"
|
||||
isRequired
|
||||
:validationRules="rules.provider"
|
||||
:additionalButtonData="additionalButtonData" />
|
||||
<alert
|
||||
v-if="providers.length === 0"
|
||||
ref="alertNoNetworkProviders"
|
||||
:cmsWidgetName="widget.noNetworkShopsAlert"
|
||||
alertClass="alert-warning"
|
||||
:isDismissible="false"
|
||||
:manualHeadline="noNetworkShopsAlertHeaderText" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-center">
|
||||
<textLink
|
||||
linkType="navigation"
|
||||
:text="shopNotListedModalLink"
|
||||
@clickEvent="doNotSeeMyShopLinkClick" />
|
||||
<div class="my-4">
|
||||
<buttonQuestion
|
||||
ref="providerQuestion"
|
||||
v-model="selectedProviderNumber"
|
||||
buttonTypeString="shopListButton"
|
||||
:buttonTypeObject="shopListButton"
|
||||
class="radioQuestion"
|
||||
:answers="providers"
|
||||
groupName="chooseShop"
|
||||
textPosition="text-start"
|
||||
isRequired
|
||||
:validationRules="rules.provider"
|
||||
:additionalButtonData="additionalButtonData" />
|
||||
<alert
|
||||
v-if="providers.length === 0"
|
||||
ref="alertNoNetworkProviders"
|
||||
:cmsWidgetName="widget.noNetworkShopsAlert"
|
||||
alertClass="alert-warning"
|
||||
:isDismissible="false"
|
||||
:manualHeadline="noNetworkShopsAlertHeaderText" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-center">
|
||||
<textLink
|
||||
linkType="navigation"
|
||||
href="#!"
|
||||
:text="shopNotListedModalLink"
|
||||
@clickEvent="doNotSeeMyShopLinkClick" />
|
||||
</div>
|
||||
</div>
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
@backClicked="backButtonAction" />
|
||||
</div>
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
@backClicked="backButtonAction" />
|
||||
</div>
|
||||
</Form>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// Components
|
||||
|
|
@ -134,31 +139,80 @@ export default {
|
|||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise
|
||||
}];
|
||||
}
|
||||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
console.log(JSON.stringify(resultMap.cmsContent));
|
||||
// const tpaProviders = await useMainStore().getTpaProviders(zipCode, radiusOptions[0]).then(async providers => {
|
||||
// if (providers?.length === 0 ?? true) {
|
||||
// return useMainStore().getTpaProviders(zipCode, radiusOptions[1]).then(result => {
|
||||
// if (providers?.length === 0 ?? true) {
|
||||
// return useMainStore().getTpaProviders(zipCode, radiusOptions[2]);
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// });
|
||||
|
||||
// get providers by zipCode and radius[0]
|
||||
// if no providers, get providers by zipCode and radius[1]
|
||||
// if no providers, get providers by zipCode and radius[2]
|
||||
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
// vm.setFilter(radius);
|
||||
// vm.setProviders(providers);
|
||||
});
|
||||
},
|
||||
setup() {
|
||||
async setup() {
|
||||
// TODO get TPA shops within radius of zipcode for account
|
||||
// Set initialFilter to value associated with the minimum distance required to return
|
||||
// at least one shop
|
||||
|
||||
// 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';
|
||||
// const providers = await tpaProvidersRadius25.then((result25) => {
|
||||
// if ((result25?.data ?? []).length === 0) {
|
||||
// radius = '50 miles';
|
||||
// console.log(`radius 50: ${radius}`);
|
||||
// return tpaProvidersRadius50.then((result50) => {
|
||||
// console.log(`result 50: ${JSON.stringify(result50)}`);
|
||||
// if ((result50?.data ?? []).length === 0) {
|
||||
// radius = '100 miles';
|
||||
// console.log(`radius 100: ${radius}`);
|
||||
// return tpaProvidersRadius100;
|
||||
// }
|
||||
// return result50;
|
||||
// });
|
||||
// }
|
||||
// return result25;
|
||||
// });
|
||||
|
||||
// console.log(`providers: ${JSON.stringify(providers)}`);
|
||||
|
||||
// const filter = radius;
|
||||
// return { filter, providers, zipCode };
|
||||
const initialFilter = '25 miles';
|
||||
return { initialFilter };
|
||||
},
|
||||
data() {
|
||||
const defaultRadius = 25;
|
||||
// const defaultRadius = 25;
|
||||
const { zipCode } = useMainStore().order.customer.address;
|
||||
const providers = useMainStore().getTpaProviders(this.zipCode, defaultRadius)?.data ?? [];
|
||||
// const providers = useMainStore().getTpaProviders(this.zipCode, defaultRadius)?.data ?? [];
|
||||
return {
|
||||
// TODO should we default to this or policy.policyZipCode instead?
|
||||
zipCode,
|
||||
filter: this.initialFilter,
|
||||
providers,
|
||||
selectedProviderNumber: providers.length === 1
|
||||
? providers[0].value
|
||||
: '',
|
||||
providers: [],
|
||||
// selectedProviderNumber: providers.length === 1
|
||||
// ? providers[0].value
|
||||
// : '',
|
||||
selectedProviderNumber: '',
|
||||
widget: {
|
||||
siteHeader: 'SiteHeaderWidget',
|
||||
tpaSearchQuestion: 'TPASearchQuestion',
|
||||
|
|
@ -206,18 +260,9 @@ export default {
|
|||
widgetFields.TEXT_BLOCK_WIDGET.TEXT
|
||||
);
|
||||
},
|
||||
// TODO do we need this?
|
||||
additionalButtonData() {
|
||||
const startDate = new Date();
|
||||
const endDate = new Date();
|
||||
endDate.setDate(startDate.getDate() + 6);
|
||||
|
||||
const formattedStartDate = startDate.toISOString().split('T')[0];
|
||||
const formattedEndDate = endDate.toISOString().split('T')[0];
|
||||
|
||||
return {
|
||||
startDate: formattedStartDate,
|
||||
endDate: formattedEndDate
|
||||
displayAvailabilityIndicators: false
|
||||
};
|
||||
},
|
||||
radiusInMiles() {
|
||||
|
|
@ -289,6 +334,12 @@ export default {
|
|||
default:
|
||||
return null;
|
||||
}
|
||||
},
|
||||
setFilter(filter) {
|
||||
this.filter = filter;
|
||||
},
|
||||
setProviders(providers) {
|
||||
this.providers = providers;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -413,12 +413,12 @@ export const useMainStore = defineStore({
|
|||
order.customer.address.streetAddress = insured?.address;
|
||||
order.customer.address.city = insured?.city;
|
||||
order.customer.address.state = insured?.state;
|
||||
order.customer.address.zipCode = insured?.zipCode;
|
||||
order.customer.address.zipCode = insured?.zipCode?.toString();
|
||||
order.customer.firstName = insured?.firstName;
|
||||
order.customer.lastName = insured?.lastName;
|
||||
|
||||
// populate additional fields
|
||||
order.serviceLocation.zipCode = insured?.zipCode;
|
||||
order.serviceLocation.zipCode = insured?.zipCode?.toString();
|
||||
|
||||
// populate vehicles
|
||||
order.policy.vehicles = responsePolicy.vehicles ?? [];
|
||||
|
|
@ -801,22 +801,39 @@ export const useMainStore = defineStore({
|
|||
|
||||
// TODO what info is returned here
|
||||
getTpaProviders(zipCode, radius) {
|
||||
return {
|
||||
data: [
|
||||
// {
|
||||
// buttonLabel: 'USA Auto Glass',
|
||||
// buttonLabelSubCopy: '1.5 mi',
|
||||
// buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085<br>614-123-5555',
|
||||
// value: '000123'
|
||||
// },
|
||||
{
|
||||
buttonLabel: 'USA Auto Glass',
|
||||
buttonLabelSubCopy: '1.5 mi',
|
||||
buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085<br>614-123-5555',
|
||||
value: '000123'
|
||||
}
|
||||
]
|
||||
};
|
||||
return new Promise((resolve, reject) => {
|
||||
if (radius === 25) {
|
||||
resolve({});
|
||||
} else if (radius === 50) {
|
||||
resolve({
|
||||
data: [
|
||||
{
|
||||
buttonLabel: 'USA Auto Glass',
|
||||
buttonLabelSubCopy: '1.5 mi',
|
||||
buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085<br>614-123-5555',
|
||||
value: '000123'
|
||||
}
|
||||
]
|
||||
});
|
||||
} else {
|
||||
resolve({
|
||||
data: [
|
||||
{
|
||||
buttonLabel: 'USA Auto Glass',
|
||||
buttonLabelSubCopy: '1.5 mi',
|
||||
buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085<br>614-123-5555',
|
||||
value: '000123'
|
||||
},
|
||||
{
|
||||
buttonLabel: 'USA Auto Glass',
|
||||
buttonLabelSubCopy: '1.5 mi',
|
||||
buttonBodyCopy: '760 Dearborn Park Ln, Worthington, OH 43085<br>614-123-5555',
|
||||
value: '000123'
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
async getSupportingItems() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue