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