tpa-search header update
This commit is contained in:
Bill Richardson
parent
2b94b9376e
commit
123f545c24
1 changed files with 105 additions and 107 deletions
|
|
@ -1,115 +1,113 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container-fluid fade-on-route-transition">
|
<div class="fade-on-route-transition">
|
||||||
<div class="row justify-content-center">
|
<div class="justify-content-center">
|
||||||
<div class="col-md-6 px-0 px-md-2">
|
<siteHeader
|
||||||
<siteHeader
|
ref="siteHeader"
|
||||||
ref="siteHeader"
|
:cmsWidgetName="widget.siteHeader" />
|
||||||
:cmsWidgetName="widget.siteHeader" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="iss-heritage-container-width">
|
||||||
<div class="col-md-6 col-xl-4">
|
<div class="tpa-search-container iss-heritage-content-container-width">
|
||||||
<Form
|
<div class="zip-code-container">
|
||||||
id="searchProvidersForm"
|
<Form
|
||||||
@submit="onSubmit"
|
id="searchProvidersForm"
|
||||||
@invalidSubmit="onInvalidSubmit">
|
@submit="onSubmit"
|
||||||
<label
|
@invalidSubmit="onInvalidSubmit">
|
||||||
id="tpaSearchQuestionLabel"
|
<label
|
||||||
for="tpaSearchQuestionField"
|
id="tpaSearchQuestionLabel"
|
||||||
class="text-center fs-5 mt-5 mb-0 text-black w-100">
|
for="tpaSearchQuestionField"
|
||||||
{{ tpaSearchQuestionLabel }}
|
class="text-center fs-5 mt-5 mb-0 text-black w-100">
|
||||||
</label>
|
{{ tpaSearchQuestionLabel }}
|
||||||
<label
|
</label>
|
||||||
id="searchInstructions"
|
<label
|
||||||
for="tpaSearchQuestionField"
|
id="searchInstructions"
|
||||||
class="text-center small darker-gray w-100 mb-4">
|
for="tpaSearchQuestionField"
|
||||||
{{ searchInstructionsText }}
|
class="text-center small darker-gray w-100 mb-4">
|
||||||
</label>
|
{{ searchInstructionsText }}
|
||||||
<div class="mb-5">
|
</label>
|
||||||
<textboxQuestion
|
<div class="mb-5">
|
||||||
id="tpaSearchQuestionField"
|
<textboxQuestion
|
||||||
v-model="zipCode"
|
id="tpaSearchQuestionField"
|
||||||
inputId="tpaSearchQuestionFieldInput"
|
v-model="zipCode"
|
||||||
:cmsWidgetName="widget.tpaSearchQuestion"
|
inputId="tpaSearchQuestionFieldInput"
|
||||||
:includeSearchIcon="true"
|
:cmsWidgetName="widget.tpaSearchQuestion"
|
||||||
:displayQuestionText="false"
|
:includeSearchIcon="true"
|
||||||
isRequired
|
:displayQuestionText="false"
|
||||||
:isDisabled="reloadingProviders"
|
|
||||||
:validationRules="rules.zipCode"
|
|
||||||
@clickEvent="searchClick" />
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
<div class="col-md-6 col-xl-4">
|
|
||||||
<googleMap
|
|
||||||
id="map"
|
|
||||||
class="mb-4"
|
|
||||||
:markers="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
|
isRequired
|
||||||
:validationRules="rules.provider"
|
:isDisabled="reloadingProviders"
|
||||||
:additionalButtonData="additionalButtonData" />
|
:validationRules="rules.zipCode"
|
||||||
<alert
|
@clickEvent="searchClick" />
|
||||||
v-if="providers?.length === 0 ?? true"
|
|
||||||
id="alertNoNetworkProviders"
|
|
||||||
:cmsWidgetName="widget.noNetworkShopsAlert"
|
|
||||||
alertClass="alert-warning"
|
|
||||||
:isDismissible="false"
|
|
||||||
:manualHeadline="
|
|
||||||
noNetworkShopsAlertHeaderText
|
|
||||||
" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center">
|
</Form>
|
||||||
<textLink
|
</div>
|
||||||
id="preferredShopNotListedLink"
|
<div class="map-selection-container">
|
||||||
linkType="navigation"
|
<googleMap
|
||||||
href="javascript:void(0)"
|
id="map"
|
||||||
:text="shopNotListedModalLink"
|
class="mb-4"
|
||||||
@clickEvent="doNotSeeMyShopLinkClick" />
|
:markers="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>
|
</div>
|
||||||
<siteFooter
|
</Form>
|
||||||
ref="siteFooter"
|
</div>
|
||||||
:cmsWidgetName="widget.siteFooter"
|
|
||||||
:isForwardActionDisabled="!meta.valid"
|
|
||||||
@ForwardClicked="forwardButtonAction"
|
|
||||||
@backClicked="navigateBack" />
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue