WIP Update page markup.
This commit is contained in:
Bryan Mauger
parent
7e5c8fd1b6
commit
57c5442b14
3 changed files with 176 additions and 147 deletions
|
|
@ -8,11 +8,11 @@
|
|||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 px-0 px-md-2">
|
||||
<loadingModal
|
||||
ref="loadingModal"
|
||||
:textSlides="loadingText" />
|
||||
ref="loadingModal"
|
||||
:textSlides="loadingText" />
|
||||
<siteHeader
|
||||
ref="siteHeader"
|
||||
cmsWidgetName="SiteHeaderWidget" />
|
||||
ref="siteHeader"
|
||||
cmsWidgetName="SiteHeaderWidget" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center pt-5">
|
||||
|
|
@ -59,8 +59,8 @@ cmsWidgetName="SiteHeaderWidget" />
|
|||
class="fw-bold text-black mt-5 mb-2"
|
||||
v-html="nextStepsHeader"></div>
|
||||
<div
|
||||
class="body-text"
|
||||
v-html="nextStepsBody"></div>
|
||||
class="body-text"
|
||||
v-html="nextStepsBody"></div>
|
||||
<buttonQuestion
|
||||
v-if="isQuoteDisplayed"
|
||||
v-model="selectedProvider"
|
||||
|
|
@ -87,8 +87,8 @@ v-html="nextStepsBody"></div>
|
|||
</div>
|
||||
</div>
|
||||
<recalModal
|
||||
ref="RecalModal"
|
||||
cmsWidgetName="RecalModal" />
|
||||
ref="RecalModal"
|
||||
cmsWidgetName="RecalModal" />
|
||||
<contentGroupModal
|
||||
ref="DeductibleModal"
|
||||
cmsWidgetName="DeductibleModal"
|
||||
|
|
|
|||
|
|
@ -1,114 +1,120 @@
|
|||
<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 fs-5 mt-5 mb-0 text-black w-100">
|
||||
{{ 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="tpaSearchQuestionFieldInput"
|
||||
:cmsWidgetName="widget.tpaSearchQuestion"
|
||||
:includeSearchIcon="true"
|
||||
:displayQuestionText="false"
|
||||
isRequired
|
||||
:isDisabled="reloadingProviders"
|
||||
:validationRules="rules.zipCode"
|
||||
@clickEvent="searchClick" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
<googleMap
|
||||
id="map"
|
||||
class="mb-4"
|
||||
:addresses="providerAddresses"
|
||||
:zipCode="mapZipCode" />
|
||||
<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="searchRadiusFilterInput"
|
||||
:options="filterOptions"
|
||||
disableAutoFill
|
||||
:isDisabled="reloadingProviders"
|
||||
:validationRules="rules.filter" />
|
||||
<loader
|
||||
v-if="reloadingProviders"
|
||||
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="javascript:void(0)"
|
||||
:text="shopNotListedModalLink"
|
||||
@clickEvent="doNotSeeMyShopLinkClick" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
:cmsWidgetName="widget.siteFooter"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
@backClicked="navigateBack" />
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="container-fluid fade-on-route-transition">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 px-0 px-md-2">
|
||||
<siteHeader
|
||||
ref="siteHeader"
|
||||
:cmsWidgetName="widget.siteHeader" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid fade-on-route-transition">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<Form
|
||||
id="searchProvidersForm"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<label
|
||||
id="tpaSearchQuestionLabel"
|
||||
for="tpaSearchQuestionField"
|
||||
class="text-center fs-5 mt-5 mb-0 text-black w-100">
|
||||
{{ 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="tpaSearchQuestionFieldInput"
|
||||
:cmsWidgetName="widget.tpaSearchQuestion"
|
||||
:includeSearchIcon="true"
|
||||
:displayQuestionText="false"
|
||||
isRequired
|
||||
:isDisabled="reloadingProviders"
|
||||
:validationRules="rules.zipCode"
|
||||
@clickEvent="searchClick" />
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid fade-on-route-transition">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<googleMap
|
||||
id="map"
|
||||
class="mb-4"
|
||||
:addresses="providerAddresses"
|
||||
:zipCode="mapZipCode" />
|
||||
<Form
|
||||
id="providerSelectionForm"
|
||||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<dropdownQuestion
|
||||
id="searchRadiusFilter"
|
||||
v-model="filter"
|
||||
:cmsWidgetName="widget.filterByQuestion"
|
||||
inputId="searchRadiusFilterInput"
|
||||
:options="filterOptions"
|
||||
disableAutoFill
|
||||
:isDisabled="reloadingProviders"
|
||||
:validationRules="rules.filter" />
|
||||
<loader
|
||||
v-if="reloadingProviders"
|
||||
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="javascript:void(0)"
|
||||
:text="shopNotListedModalLink"
|
||||
@clickEvent="doNotSeeMyShopLinkClick" />
|
||||
</div>
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
:cmsWidgetName="widget.siteFooter"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
@backClicked="navigateBack" />
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// Components
|
||||
|
|
@ -198,7 +204,8 @@ export default {
|
|||
},
|
||||
mixins: [BaseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const { zipCode, filter, providers, providerNumber } = await getInitialSearchData();
|
||||
const { zipCode, filter, providers, providerNumber } =
|
||||
await getInitialSearchData();
|
||||
const cmsContent = await fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
next(async (vm) => {
|
||||
|
|
@ -237,10 +244,11 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
filterOptions() {
|
||||
const filterByAnswers = this.getCmsContent(
|
||||
this.widget.filterByQuestion,
|
||||
widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
|
||||
) ?? [];
|
||||
const filterByAnswers =
|
||||
this.getCmsContent(
|
||||
this.widget.filterByQuestion,
|
||||
widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
|
||||
) ?? [];
|
||||
const filterByAnswersObj = {};
|
||||
[...filterByAnswers].forEach((answer) => {
|
||||
filterByAnswersObj[answer.Name] = answer.Name;
|
||||
|
|
@ -275,13 +283,21 @@ export default {
|
|||
)?.replaceAll('{custom:radiusInMiles}', this.radiusInMiles);
|
||||
},
|
||||
providerAddresses() {
|
||||
return this.providers?.map((provider) => this.getProviderAddress(provider)) ?? [];
|
||||
return (
|
||||
this.providers?.map((provider) => this.getProviderAddress(provider))
|
||||
?? []
|
||||
);
|
||||
},
|
||||
providerButtonData() {
|
||||
return this.providers?.map((provider) => this.getShopButtonDataFromProvider(provider)) ?? [];
|
||||
return (
|
||||
this.providers?.map((provider) =>
|
||||
this.getShopButtonDataFromProvider(provider)) ?? []
|
||||
);
|
||||
},
|
||||
selectedProviderIsSafeliteShop() {
|
||||
return this.providers?.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false;
|
||||
return (
|
||||
this.providers?.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false
|
||||
);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -295,9 +311,10 @@ export default {
|
|||
},
|
||||
providers(newProviders) {
|
||||
if (this.dataLoaded) {
|
||||
this.selectedProviderNumber = newProviders?.length === 1 ?? false
|
||||
? newProviders[0]?.providerNumber ?? ''
|
||||
: '';
|
||||
this.selectedProviderNumber =
|
||||
newProviders?.length === 1 ?? false
|
||||
? newProviders[0]?.providerNumber ?? ''
|
||||
: '';
|
||||
}
|
||||
},
|
||||
selectedProviderNumber(newNumber) {
|
||||
|
|
@ -355,12 +372,16 @@ export default {
|
|||
}
|
||||
|
||||
const addressLine1 = toTitleCase(provider?.address?.streetAddress);
|
||||
const joinString = addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : '';
|
||||
const joinString =
|
||||
addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : '';
|
||||
return [addressLine1, addressLine2].join(joinString);
|
||||
},
|
||||
async getProviderButtonData() {
|
||||
this.reloadingProviders = true;
|
||||
const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles);
|
||||
const getTpaProvidersResult = await useMainStore().getTpaProviders(
|
||||
this.zipCode,
|
||||
this.radiusInMiles
|
||||
);
|
||||
this.reloadingProviders = false;
|
||||
return getTpaProvidersResult?.data?.shopProviders ?? [];
|
||||
},
|
||||
|
|
@ -394,16 +415,18 @@ export default {
|
|||
},
|
||||
getShopButtonDataFromProvider(provider) {
|
||||
const cellNumber = toDisplayPhoneNumber(provider?.phoneNumber);
|
||||
const distance = provider?.distanceInMiles !== null && !Number.isNaN(parseFloat(provider?.distanceInMiles))
|
||||
? +provider.distanceInMiles.toFixed(1)
|
||||
: null;
|
||||
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 ?? ''}`,
|
||||
buttonLabelSubCopy: distance === null ? '' : `${distance} mi`,
|
||||
buttonBodyCopy: `${this.getProviderAddress(provider)}<br>${
|
||||
cellNumber ?? ''
|
||||
}`,
|
||||
value: provider?.providerNumber ?? ''
|
||||
};
|
||||
}
|
||||
|
|
@ -413,6 +436,6 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.darker-gray {
|
||||
color: map-get($colors, "darker-gray");
|
||||
color: map-get($colors, 'darker-gray');
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@ class="mt-4" />
|
|||
isRequired
|
||||
disableAutoFill
|
||||
:isDisabled="isPolicyHolderDisabled"
|
||||
:validationRules="rules.policyNumber" />
|
||||
:validationRules="rules.policyNumber"
|
||||
class="mb-3" />
|
||||
<textboxQuestion
|
||||
ref="policyZip"
|
||||
v-model="welcomePageModel.policyZipCode"
|
||||
|
|
@ -32,7 +33,8 @@ class="mt-4" />
|
|||
isRequired
|
||||
mask="#####"
|
||||
:isDisabled="isPolicyZipDisabled"
|
||||
:validationRules="rules.policyZip" />
|
||||
:validationRules="rules.policyZip"
|
||||
class="mb-3" />
|
||||
<textboxQuestion
|
||||
ref="dateOfLoss"
|
||||
v-model="welcomePageModel.dateOfLoss"
|
||||
|
|
@ -44,11 +46,12 @@ class="mt-4" />
|
|||
disableAutoFill
|
||||
:max="new Date().toJSON().slice(0, 10)"
|
||||
:min="'1972-12-01'"
|
||||
:validationRules="rules.lossDate" />
|
||||
:validationRules="rules.lossDate"
|
||||
class="mb-3" />
|
||||
<textBlock
|
||||
cmsWidgetName="DamageDateEstimateWidget"
|
||||
typeStyle="small"
|
||||
class="mt-2" />
|
||||
class="mb-3" />
|
||||
<dropdownQuestion
|
||||
id="welcomeDropdown"
|
||||
ref="damageCause"
|
||||
|
|
@ -58,7 +61,8 @@ class="mt-4" />
|
|||
:options="DamageCauseOptions"
|
||||
disableAutoFill
|
||||
:validationRules="rules.damageOption"
|
||||
placeHolderText="Select an option" />
|
||||
placeHolderText="Select an option"
|
||||
class="mb-3" />
|
||||
<textboxQuestion
|
||||
ref="phoneNumber"
|
||||
v-model="welcomePageModel.phoneNumber"
|
||||
|
|
@ -67,7 +71,8 @@ class="mt-4" />
|
|||
:validationRules="rules.phoneNumber"
|
||||
isRequired
|
||||
:mask="phoneMask"
|
||||
disableAutoFill />
|
||||
disableAutoFill
|
||||
class="mb-3" />
|
||||
<textboxQuestion
|
||||
ref="email"
|
||||
v-model="welcomePageModel.email"
|
||||
|
|
@ -75,12 +80,13 @@ class="mt-4" />
|
|||
cmsWidgetName="EmailAddressQuestion"
|
||||
:validationRules="rules.email"
|
||||
isRequired
|
||||
disableAutoFill />
|
||||
disableAutoFill
|
||||
class="mb-3" />
|
||||
<textboxQuestion
|
||||
v-if="displayDamageCityQuestion"
|
||||
ref="damageCity"
|
||||
v-model="welcomePageModel.damageCity"
|
||||
class="mt-4"
|
||||
class="mb-3"
|
||||
inputId="damageCityField"
|
||||
cmsWidgetName="DamageCityQuestion"
|
||||
isRequired
|
||||
|
|
@ -91,7 +97,7 @@ class="mt-4" />
|
|||
id="welcomeDropdown"
|
||||
ref="state"
|
||||
v-model="welcomePageModel.damageState"
|
||||
class="mt-4"
|
||||
class="mb-3"
|
||||
cmsWidgetName="DamageStateQuestion"
|
||||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||
:options="getStates"
|
||||
|
|
|
|||
Loading…
Reference in a new issue