Merge pull request #985 from Safelite/feature/richardson/INSR-7773
vehicle damage updates
This commit is contained in:
commit
79abe1a717
8 changed files with 157 additions and 123 deletions
BIN
src/assets/fonts/Urbanist-Medium.woff2
Normal file
BIN
src/assets/fonts/Urbanist-Medium.woff2
Normal file
Binary file not shown.
|
|
@ -14,7 +14,7 @@
|
|||
'small-question-label-text': isSmallQuestionLabelText,
|
||||
}">
|
||||
<span
|
||||
class="fw-bold w-100"
|
||||
class="w-100"
|
||||
:class="questionTextClasses">{{ questionText }}</span>
|
||||
</div>
|
||||
<div class="w-100 d-flex justify-content-center">
|
||||
|
|
@ -64,8 +64,8 @@
|
|||
:suppressError="suppressError" />
|
||||
<!-- For nested questions -->
|
||||
<transition
|
||||
name="fade"
|
||||
mode="out-in">
|
||||
name="fade"
|
||||
mode="out-in">
|
||||
<div
|
||||
v-if="
|
||||
typeof selectedValues == 'string' &&
|
||||
|
|
@ -79,8 +79,8 @@ mode="out-in">
|
|||
</fieldset>
|
||||
</div>
|
||||
<div
|
||||
v-if="!suppressError"
|
||||
class="row form-test-error mt-1">
|
||||
v-if="!suppressError"
|
||||
class="row form-test-error mt-1">
|
||||
<error-message :name="formatString(groupName)"></error-message>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -328,6 +328,21 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.question-text {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.625rem;
|
||||
|
||||
span {
|
||||
&.select-all-glass-parts {
|
||||
color: #525656;
|
||||
}
|
||||
&.button-question-text-left {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.provider-preference {
|
||||
.question-text {
|
||||
span {
|
||||
|
|
@ -336,12 +351,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.question-text {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.625rem;
|
||||
}
|
||||
|
||||
.small-question-text {
|
||||
&.question-text {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,10 @@
|
|||
</textLink>
|
||||
</div>
|
||||
<div class="footer-menu-item">
|
||||
Cookie Preferences
|
||||
<a
|
||||
href=""
|
||||
target="_blank"
|
||||
@click="openCookiePreferences">Cookie Preferences</a>
|
||||
</div>
|
||||
<div class="footer-menu-item">
|
||||
<textLink
|
||||
|
|
@ -56,6 +59,14 @@ export default {
|
|||
name: 'footer-menu',
|
||||
components: {
|
||||
textLink
|
||||
},
|
||||
methods: {
|
||||
openCookiePreferences(event) {
|
||||
event.preventDefault();
|
||||
if (window.OneTrust) {
|
||||
window.OneTrust.ToggleInfoDisplay();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,115 +1,113 @@
|
|||
<template>
|
||||
<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 class="fade-on-route-transition">
|
||||
<div class="justify-content-center">
|
||||
<siteHeader
|
||||
ref="siteHeader"
|
||||
:cmsWidgetName="widget.siteHeader" />
|
||||
</div>
|
||||
<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 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"
|
||||
<div class="iss-heritage-container-width">
|
||||
<div class="tpa-search-container iss-heritage-content-container-width">
|
||||
<div class="zip-code-container">
|
||||
<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
|
||||
:validationRules="rules.provider"
|
||||
:additionalButtonData="additionalButtonData" />
|
||||
<alert
|
||||
v-if="providers?.length === 0 ?? true"
|
||||
id="alertNoNetworkProviders"
|
||||
:cmsWidgetName="widget.noNetworkShopsAlert"
|
||||
alertClass="alert-warning"
|
||||
:isDismissible="false"
|
||||
:manualHeadline="
|
||||
noNetworkShopsAlertHeaderText
|
||||
" />
|
||||
:isDisabled="reloadingProviders"
|
||||
:validationRules="rules.zipCode"
|
||||
@clickEvent="searchClick" />
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<textLink
|
||||
id="preferredShopNotListedLink"
|
||||
linkType="navigation"
|
||||
href="javascript:void(0)"
|
||||
:text="shopNotListedModalLink"
|
||||
@clickEvent="doNotSeeMyShopLinkClick" />
|
||||
</Form>
|
||||
</div>
|
||||
<div class="map-selection-container">
|
||||
<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
|
||||
: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>
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
:cmsWidgetName="widget.siteFooter"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
@backClicked="navigateBack" />
|
||||
</div>
|
||||
</Form>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
:answers="answersToDisplay"
|
||||
:groupName="groupName"
|
||||
buttonTypeString="listCard"
|
||||
:questionTextClasses="['button-question-text-left','select-all-glass-parts']"
|
||||
isRequired
|
||||
validationRules="damage-location-required" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
mode="out-in">
|
||||
<div
|
||||
v-if="shouldDisplayReplaceOptionsQuestion"
|
||||
class="replace-options-question"
|
||||
class="replace-options-question-container"
|
||||
:class="answersToDisplay.length < 2 ? 'd-none' : ''"
|
||||
aria-live="polite">
|
||||
<buttonQuestion
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
:answers="answersToDisplay"
|
||||
:groupName="groupName"
|
||||
buttonTypeString="listCard"
|
||||
:questionTextClasses="['replace-options-question-item']"
|
||||
:validationRules="validationRules"
|
||||
:suppressError="suppressError"
|
||||
:isRequired="isRequired" />
|
||||
|
|
@ -110,3 +111,9 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.replace-options-question-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -491,7 +491,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.iss-heritage-container-width {
|
||||
.vehicle-damage-container {
|
||||
position: relative;
|
||||
|
|
@ -499,8 +499,8 @@ export default {
|
|||
padding-left: .9375rem;
|
||||
padding-right: .9375rem;
|
||||
|
||||
.question-text {
|
||||
margin-top: 0; //would need deep is changed to scoped. Was already not scoped.
|
||||
.vehicle-damage-question-container {
|
||||
margin-top: 0.625rem; // 10px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,6 +81,14 @@ caption,
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Urbanist";
|
||||
src:
|
||||
url("@/assets/fonts/Urbanist-Medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Urbanist";
|
||||
src:
|
||||
|
|
|
|||
Loading…
Reference in a new issue