Auto stash before merge of "feature/CSR-240" and "origin/develop"

This commit is contained in:
Scott Kiener 2022-05-05 15:47:37 -04:00
parent f95aebc0aa
commit 30419e2eee
13 changed files with 269 additions and 245 deletions

View file

@ -162,7 +162,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.button-question-overflow { .button-question-overflow {
height: calc(100vh - 266px); height: calc(100vh - 274px);
.overflow-scroll { .overflow-scroll {
// Height will be determined by overall height of content above list // Height will be determined by overall height of content above list

View file

@ -9,50 +9,51 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false /> <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
<customerQuestions ref="customerQuestions" v-model="customerQuestions" /> <div class="fade-on-route-transition sub-container make-tall">
<alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert" <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
class="my-3" <alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert"
cmsWidgetName="AlertVinNotFoundWidget" class="my-3"
alertClass="alert-danger" cmsWidgetName="AlertVinNotFoundWidget"
v-bind:isDismissible="false" alertClass="alert-danger"
/> v-bind:isDismissible="false"
<alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert" />
class="my-3" <alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert"
:manualHeadline="AlertMatchedDifferentVehicleHeader" class="my-3"
:manualCopy="AlertMatchedDifferentVehicleBody" :manualHeadline="AlertMatchedDifferentVehicleHeader"
alertClass="alert-warning" :manualCopy="AlertMatchedDifferentVehicleBody"
v-bind:isDismissible="false" alertClass="alert-warning"
/> v-bind:isDismissible="false"
<alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert" />
class="my-3" <alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert"
alertClass="alert-danger" class="my-3"
:manualHeadline="AlertNonServiceableZipHeader" alertClass="alert-danger"
:manualCopy="AlertNonServiceableZipBody" :manualHeadline="AlertNonServiceableZipHeader"
v-bind:isDismissible="false" :manualCopy="AlertNonServiceableZipBody"
/> v-bind:isDismissible="false"
<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert" />
class="my-3" <alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert"
cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget" class="my-3"
alertClass="alert-danger" cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
v-bind:isDismissible="false" alertClass="alert-danger"
/> v-bind:isDismissible="false"
<transition name="fade" mode="out-in"> />
<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite"> <transition name="fade" mode="out-in">
<div class="row my-4"> <div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
<div class="col"> <div class="row my-4">
<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZip" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" /> <div class="col">
<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZip" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
</div>
</div> </div>
</div> </div>
</div> </transition>
</transition> <funnel-footer
<funnel-footer cmsWidgetName="FunnelFooterWidget"
cmsWidgetName="FunnelFooterWidget" ref="funnelFooter"
ref="funnelFooter" :isDisabled="!meta.valid"
:isDisabled="!meta.valid" @ForwardClicked="forwardButtonAction"
@ForwardClicked="forwardButtonAction" :isForwardActionDisabled="!meta.valid"
:isForwardActionDisabled="!meta.valid" />
/> </div>
</div> </div>
</Form> </Form>
</template> </template>

View file

@ -9,25 +9,25 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<buttonQuestion <div class="fade-on-route-transition sub-container make-tall">
cmsWidgetName="VinLookupMethod" <buttonQuestion
class="button-question-overflow" cmsWidgetName="VinLookupMethod"
:questionText="questionText" :questionText="questionText"
:answers="answersFromCms" :answers="answersFromCms"
groupName="vinLookupMethodOption" groupName="vinLookupMethodOption"
buttonType="listButton" buttonType="listButton"
v-model="selectedValues" v-model="selectedValues"
isRequired isRequired
validationRules="option-required" validationRules="option-required"
/> />
<funnel-footer
<funnel-footer cmsWidgetName="FunnelFooterWidget"
cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid"
:isForwardActionDisabled="!meta.valid" @isDisabled="!meta.valid"
@isDisabled="!meta.valid" @back-clicked="backButtonAction"
@back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction"
@ForwardClicked="forwardButtonAction" />
/> </div>
</div> </div>
</Form> </Form>
</template> </template>

View file

@ -3,10 +3,12 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<h1>Part Questions Page Placeholder</h1> <div class="fade-on-route-transition sub-container make-tall">
<funnel-footer <h1>Part Questions Page Placeholder</h1>
cmsWidgetName="FunnelFooterWidget" @back-clicked="backButtonAction" <funnel-footer
/> cmsWidgetName="FunnelFooterWidget" @back-clicked="backButtonAction"
/>
</div>
</div> </div>
</template> </template>

View file

@ -9,57 +9,59 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<alert <div class="fade-on-route-transition sub-container make-tall">
ref="vehicleChangeAlert" <alert
class="mt-5 mb-0" ref="vehicleChangeAlert"
cmsWidgetName="VehicleChangeAlert" class="mt-5 mb-0"
v-show="shouldDisplayVehicleChangeAlert" cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning" v-show="shouldDisplayVehicleChangeAlert"
:isDismissible="false" alertClass="alert-warning"
/> :isDismissible="false"
<damageLocationQuestion />
ref="damageLocation" <damageLocationQuestion
cmsWidgetName="DamageLocationQuestion" ref="damageLocation"
v-model="selectedDamageLocations" cmsWidgetName="DamageLocationQuestion"
groupName="DamageLocationQuestion" v-model="selectedDamageLocations"
/> groupName="DamageLocationQuestion"
<windshieldOptions />
ref="windshieldOptions" <windshieldOptions
v-model="selectedWindshieldOptions" ref="windshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict" v-model="selectedWindshieldOptions"
:hasSplitSingleConflict="hasSplitSingleConflict" :hasRepairReplaceConflict="hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations" :hasSplitSingleConflict="hasSplitSingleConflict"
/> :selectedDamageLocations="selectedDamageLocations"
<alert />
class="my-3" <alert
cmsWidgetName="HasReplacementConflict" class="my-3"
v-show="hasRepairReplaceConflict" cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger" v-show="hasRepairReplaceConflict"
:isDismissible="false" alertClass="alert-danger"
/> :isDismissible="false"
<sideDoorOptions />
ref="sideDoorOptions" <sideDoorOptions
cmsWidgetName="SideDoorSideQuestion" ref="sideDoorOptions"
groupName="SideDoorSideQuestion" cmsWidgetName="SideDoorSideQuestion"
v-model="sideDoorOptionsData" groupName="SideDoorSideQuestion"
v-show="!hasRepairReplaceConflict" v-model="sideDoorOptionsData"
:selectedDamageLocations="selectedDamageLocations" v-show="!hasRepairReplaceConflict"
/> :selectedDamageLocations="selectedDamageLocations"
<replaceOptionsQuestion />
ref="backGlassOptions" <replaceOptionsQuestion
cmsWidgetName="RearReplaceOptionsQuestion" ref="backGlassOptions"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict" cmsWidgetName="RearReplaceOptionsQuestion"
v-model="selectedRearReplaceOptions" :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
groupName="BackGlassReplaceOptionsQuestion" v-model="selectedRearReplaceOptions"
validationRules="replace-options-required" groupName="BackGlassReplaceOptionsQuestion"
/> validationRules="replace-options-required"
<funnel-footer />
cmsWidgetName="FunnelFooterWidget" <funnel-footer
:isForwardActionDisabled="!meta.valid" cmsWidgetName="FunnelFooterWidget"
:isBackButtonHidden=shouldHideBackButton :isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction" :isBackButtonHidden=shouldHideBackButton
@ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"
/> @ForwardClicked="forwardButtonAction"
/>
</div>
</div> </div>
</Form> </Form>
</template> </template>

View file

@ -1,7 +1,6 @@
<template> <template>
<buttonQuestion <buttonQuestion
class="radioQuestion" class="radioQuestion"
:class="{'fade-on-route-transition': this.fadeOnRouteTransition}"
isOverflowScrollable isOverflowScrollable
selectingInitiatesLoad selectingInitiatesLoad
:questionText="questionText" :questionText="questionText"
@ -30,7 +29,6 @@ export default {
props: { props: {
modelValue: String, modelValue: String,
cmsWidgetName: String, cmsWidgetName: String,
fadeOnRouteTransition: Boolean,
}, },
computed: { computed: {
questionText(){ questionText(){

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0 position-relative make-tall"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
@ -10,7 +10,9 @@
backButtonAccessibleText="Change Vehicle Year" backButtonAccessibleText="Change Vehicle Year"
@click-event="backButtonAction" @click-event="backButtonAction"
/> />
<makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" fadeOnRouteTransition /> <div class="fade-on-route-transition">
<makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0 position-relative"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
@ -10,7 +10,9 @@
backButtonAccessibleText="Change Vehicle Make" backButtonAccessibleText="Change Vehicle Make"
@click-event="backButtonAction" @click-event="backButtonAction"
/> />
<modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" /> <div class="fade-on-route-transition">
<modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -3,34 +3,36 @@
<funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner ref="vehicleBanner" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner ref="vehicleBanner" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
<div class="container-fluid prevent-squish my-5"> <div class="fade-on-route-transition sub-container make-tall">
<div class="row"> <div class="container-fluid prevent-squish my-5">
<div class="col"> <div class="row">
<alert <div class="col">
class="rounded border-0 shadow-sm" <alert
alertClass="alert-warning" class="rounded border-0 shadow-sm"
cmsWidgetName="AlertWidget" alertClass="alert-warning"
:isDismissible="false" cmsWidgetName="AlertWidget"
/> :isDismissible="false"
/>
</div>
</div> </div>
</div> </div>
</div>
<div v-for="(item, i) in PartsForQuestions" :key="i"> <div v-for="(item, i) in PartsForQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) --> <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<div class="container-fluid"> <div class="container-fluid">
<hr v-if="i > 0" /> <hr v-if="i > 0" />
</div>
<glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="glassParts[item.glassLocation + '-' + item.glassName]"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
/>
</div> </div>
<funnelFooter cmsWidgetName="FunnelFooterWidget" ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
<glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="glassParts[item.glassLocation + '-' + item.glassName]"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
/>
</div> </div>
<funnelFooter cmsWidgetName="FunnelFooterWidget" ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
</div> </div>
</template> </template>

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0 position-relative"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
@ -10,7 +10,9 @@
backButtonAccessibleText="Change Vehicle Model" backButtonAccessibleText="Change Vehicle Model"
@click-event="backButtonAction" @click-event="backButtonAction"
/> />
<styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" /> <div class="fade-on-route-transition">
<styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" />
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,16 +1,18 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0 position-relative"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<yearQuestion <div class="fade-on-route-transition">
class="fade-on-route-transition" <yearQuestion
v-model="selectedYear" class="fade-on-route-transition"
ref="yearQuestion" v-model="selectedYear"
cmsWidgetName="VehicleYearQuestion" ref="yearQuestion"
/> cmsWidgetName="VehicleYearQuestion"
/>
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -14,100 +14,102 @@
:displayGenericVehicleImage="false" :displayGenericVehicleImage="false"
/> />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="row my-2"> <div class="fade-on-route-transition sub-container make-tall">
<div class="col"> <div class="row my-2">
<textboxQuestion <div class="col">
cmsWidgetName="VinNumber" <textboxQuestion
v-model="vin" cmsWidgetName="VinNumber"
inputId="vin" v-model="vin"
isRequired inputId="vin"
disableAutoFill isRequired
validationRules="vin-required|vin-format" disableAutoFill
:isDisabled="isVinFieldReadOnly" validationRules="vin-required|vin-format"
/> :isDisabled="isVinFieldReadOnly"
/>
</div>
</div> </div>
</div> <div class="row my-2">
<div class="row my-2"> <div class="col">
<div class="col"> <vinInformation />
<vinInformation /> </div>
</div> </div>
</div> <div class="row my-2">
<div class="row my-2"> <div class="col">
<div class="col"> <textboxQuestion
<textboxQuestion cmsWidgetName="ServiceZIP"
cmsWidgetName="ServiceZIP" v-model="zip"
v-model="zip" inputId="zip"
inputId="zip" mask="#####"
mask="#####" isRequired
isRequired disableAutoFill
disableAutoFill validationRules="zip-required"
validationRules="zip-required" />
/> </div>
</div> </div>
</div> <div class="row my-2">
<div class="row my-2"> <div class="col">
<div class="col"> <textboxQuestion
<textboxQuestion cmsWidgetName="EmailAddress"
cmsWidgetName="EmailAddress" v-model="email"
v-model="email" inputId="email"
inputId="email" isRequired
isRequired disableAutoFill
disableAutoFill validationRules="email-address-required|email-address-format"
validationRules="email-address-required|email-address-format" />
/> </div>
</div> </div>
<alert
class="my-3"
:manualHeadline="MatchedDifferentVehicleAlertHeader"
:manualCopy="MatchedDifferentVehicleAlertBody"
v-model="customAlertData"
v-if="matchedDifferentVehicle"
alertClass="alert-danger"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="noMatchAlert"
alertClass="alert-warning"
cmsWidgetName="NoMatchAlertWidget"
/>
<alert
class="my-3"
:manualHeadline="NoServiceZipHeader"
:manualCopy="NoServiceZipBody"
v-model="customAlertData"
v-if="noServiceZip"
alertClass="alert-warning"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="foundWindshieldAlert"
alertClass="alert-warning"
cmsWidgetName="FoundWindshieldAlert"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="vinNotFound"
alertClass="alert-warning"
cmsWidgetName="VinNotFound"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="perfectMatchNewVinAlert"
alertClass="alert-warning"
cmsWidgetName="PerfectMatchNewVinAlert"
/>
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div> </div>
<alert
class="my-3"
:manualHeadline="MatchedDifferentVehicleAlertHeader"
:manualCopy="MatchedDifferentVehicleAlertBody"
v-model="customAlertData"
v-if="matchedDifferentVehicle"
alertClass="alert-danger"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="noMatchAlert"
alertClass="alert-warning"
cmsWidgetName="NoMatchAlertWidget"
/>
<alert
class="my-3"
:manualHeadline="NoServiceZipHeader"
:manualCopy="NoServiceZipBody"
v-model="customAlertData"
v-if="noServiceZip"
alertClass="alert-warning"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="foundWindshieldAlert"
alertClass="alert-warning"
cmsWidgetName="FoundWindshieldAlert"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="vinNotFound"
alertClass="alert-warning"
cmsWidgetName="VinNotFound"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="perfectMatchNewVinAlert"
alertClass="alert-warning"
cmsWidgetName="PerfectMatchNewVinAlert"
/>
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div> </div>
</Form> </Form>
</template> </template>

View file

@ -26,6 +26,15 @@ body {
overflow-x: hidden; overflow-x: hidden;
} }
.sub-container{
&.make-tall {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
}
}
.sr-only { .sr-only {
position: absolute; position: absolute;
left: -10000px; left: -10000px;