Merge pull request #985 from Safelite/feature/richardson/INSR-7773

vehicle damage updates
This commit is contained in:
brich1212safe 2025-12-18 07:40:49 -05:00 committed by GitHub
commit 79abe1a717
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 157 additions and 123 deletions

Binary file not shown.

View file

@ -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 {

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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
}
}
}

View file

@ -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: