Auto stash before merge of "feature/CSR-240" and "origin/develop"
This commit is contained in:
parent
f95aebc0aa
commit
30419e2eee
13 changed files with 269 additions and 245 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -8,51 +8,52 @@
|
||||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
|
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
|
||||||
<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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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(){
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue