Merge pull request #280 from Safelite/feature/digital/SSR-445
Feature/digital/ssr 445
This commit is contained in:
commit
1d6df6cc82
17 changed files with 30 additions and 46 deletions
|
|
@ -8,7 +8,7 @@
|
||||||
<div class="row px-3">
|
<div class="row px-3">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="select-car-form rounded">
|
<div class="select-car-form rounded">
|
||||||
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
<vehicleBanner class="mt-2 mb-4" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
||||||
<alert
|
<alert
|
||||||
ref="alertFewMoreQuestions"
|
ref="alertFewMoreQuestions"
|
||||||
|
|
@ -16,7 +16,8 @@
|
||||||
alertClass="alert-warning"
|
alertClass="alert-warning"
|
||||||
:manualHeadline="alertFewMoreQuestionsHeader"
|
:manualHeadline="alertFewMoreQuestionsHeader"
|
||||||
:manualCopy="alertFewMoreQuestionsCopy"
|
:manualCopy="alertFewMoreQuestionsCopy"
|
||||||
v-bind:isDismissible="false" />
|
v-bind:isDismissible="false"
|
||||||
|
class="mt-5"/>
|
||||||
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
|
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
|
||||||
<questionChain
|
<questionChain
|
||||||
ref="questionChain"
|
ref="questionChain"
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,7 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
show() {
|
show() {
|
||||||
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
|
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
|
||||||
this.isActive = true;
|
this.isActive = true;
|
||||||
document.querySelector('.fade-on-route-transition').scrollTo({
|
document.querySelector('.fade-on-route-transition').scrollTo({
|
||||||
top: 0, behavior: 'instant'
|
top: 0, behavior: 'instant'
|
||||||
|
|
@ -123,8 +123,8 @@ export default {
|
||||||
&.menu-modal {
|
&.menu-modal {
|
||||||
max-width: 576px;
|
max-width: 576px;
|
||||||
left: auto;
|
left: auto;
|
||||||
height: calc(100% - 72px);
|
height: calc(100% - 56px);
|
||||||
top: 72px;
|
top: 56px;
|
||||||
border-top: 1px solid $gray-300;
|
border-top: 1px solid $gray-300;
|
||||||
overflow-x: visible;
|
overflow-x: visible;
|
||||||
overflow-y: visible;
|
overflow-y: visible;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="site-header d-flex justify-content-center align-items-center flex-column py-2 mb-4" :style="logoBackgroundStyle">
|
<div class="site-header d-flex justify-content-center align-items-center flex-column py-2" :style="logoBackgroundStyle">
|
||||||
<img id="siteHeaderImage" class="img-fluid" :src="imageSrc" :alt="altText" />
|
<img id="siteHeaderImage" class="img-fluid" :src="imageSrc" :alt="altText" />
|
||||||
<menuModal/>
|
<menuModal/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -95,13 +95,12 @@ export default({
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.site-header {
|
.site-header {
|
||||||
height: 72px;
|
height: 56px;
|
||||||
}
|
}
|
||||||
.alert {
|
.alert {
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 72px;
|
top: 72px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#siteHeaderImage {
|
#siteHeaderImage {
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,11 +9,11 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="select-car-form rounded">
|
<div class="select-car-form rounded">
|
||||||
<vehicleBanner
|
<vehicleBanner
|
||||||
class="mb-3"
|
class="mt-2 mb-4"
|
||||||
cmsWidgetName="VehicleBannerWidget"
|
cmsWidgetName="VehicleBannerWidget"
|
||||||
ref="vehicleBanner"
|
ref="vehicleBanner"
|
||||||
:displayGenericVehicleImage="false" />
|
:displayGenericVehicleImage="false" />
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" class="mb-5" />
|
||||||
<alert
|
<alert
|
||||||
ref="alertVinNotFound"
|
ref="alertVinNotFound"
|
||||||
v-if="displayVinNotFoundAlert"
|
v-if="displayVinNotFoundAlert"
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||||
<div class="fade-on-route-transition sub-container overflow-scroll px-5">
|
<div class="fade-on-route-transition sub-container overflow-scroll px-5">
|
||||||
<vehicleBanner
|
<vehicleBanner
|
||||||
class="mb-3"
|
class="mt-2 mb-4"
|
||||||
cmsWidgetName="VehicleBannerWidget"
|
cmsWidgetName="VehicleBannerWidget"
|
||||||
:displayGenericVehicleImage="false" />
|
:displayGenericVehicleImage="false" />
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
cmsWidgetName="verifyingCoverageStatement"
|
cmsWidgetName="verifyingCoverageStatement"
|
||||||
typeStyle="h5"
|
typeStyle="h5"
|
||||||
justifyText="center"
|
justifyText="center"
|
||||||
class="mt-0 mb-4"
|
class="mt-4 mb-4"
|
||||||
id="coverage-statement-text-block"
|
id="coverage-statement-text-block"
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<div class="row px-3">
|
<div class="row px-3">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="select-car-form rounded">
|
<div class="select-car-form rounded">
|
||||||
<vehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
|
<vehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
|
||||||
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
|
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
|
||||||
<alert
|
<alert
|
||||||
ref="alertVinNotFound"
|
ref="alertVinNotFound"
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,7 @@
|
||||||
disableAutoFill
|
disableAutoFill
|
||||||
validationRules="first-name-required" />
|
validationRules="first-name-required" />
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
|
class="mt-4"
|
||||||
inputId="lastNameField"
|
inputId="lastNameField"
|
||||||
cmsWidgetName="PolicyholderLastNameQuestion"
|
cmsWidgetName="PolicyholderLastNameQuestion"
|
||||||
v-model="customerQuestions.lastName"
|
v-model="customerQuestions.lastName"
|
||||||
|
|
@ -167,11 +168,6 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.alert.alert-warning
|
|
||||||
{
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sub-header p {
|
#sub-header p {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="select-car-form rounded text-center">
|
<div class="select-car-form rounded text-center">
|
||||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
|
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-4" />
|
||||||
<policyVehiclesQuestion class="px-4" cmsWidgetName="PolicyVehiclesQuestion" :vehicles="VehiclesForQuestions"/>
|
<policyVehiclesQuestion class="px-4" cmsWidgetName="PolicyVehiclesQuestion" :vehicles="VehiclesForQuestions"/>
|
||||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" :isForwardActionDisabled="!meta.valid" @ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"/>
|
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" :isForwardActionDisabled="!meta.valid" @ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<div class="page-container-grouped-styles">
|
<div class="page-container-grouped-styles">
|
||||||
<div class="fade-on-route-transition position-relative">
|
<div class="fade-on-route-transition position-relative">
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
|
<siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" class="mt-4"/>
|
||||||
<button v-on:click="forwardButtonAction">Temp Forward Button</button>
|
<button v-on:click="forwardButtonAction">Temp Forward Button</button>
|
||||||
<div>
|
<div>
|
||||||
<siteFooter
|
<siteFooter
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<div class="page-container-grouped-styles">
|
<div class="page-container-grouped-styles">
|
||||||
<div class="fade-on-route-transition position-relative">
|
<div class="fade-on-route-transition position-relative">
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" />
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" class="mt-5 mb-1" />
|
||||||
<div class="select-car">
|
<div class="select-car">
|
||||||
<div class="container-fluid pb-2">
|
<div class="container-fluid pb-2">
|
||||||
<div class="row px-3">
|
<div class="row px-3">
|
||||||
|
|
@ -28,8 +28,7 @@
|
||||||
buttonTypeString="listCard"
|
buttonTypeString="listCard"
|
||||||
isRequired
|
isRequired
|
||||||
v-model="selectedAppointmentType"
|
v-model="selectedAppointmentType"
|
||||||
validationRules="selection-required"
|
validationRules="selection-required" />
|
||||||
class="service-location-button-question"/>
|
|
||||||
<div class="select-car">
|
<div class="select-car">
|
||||||
<div class="container-fluid pb-2">
|
<div class="container-fluid pb-2">
|
||||||
<div class="row px-3">
|
<div class="row px-3">
|
||||||
|
|
@ -235,7 +234,7 @@ export default {
|
||||||
}
|
}
|
||||||
.question-text {
|
.question-text {
|
||||||
& > span {
|
& > span {
|
||||||
line-height: 1.500rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.list-card-content p {
|
.list-card-content p {
|
||||||
|
|
@ -246,12 +245,6 @@ export default {
|
||||||
line-height: 1.250rem;
|
line-height: 1.250rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.siteHeader{
|
|
||||||
.site-header{
|
|
||||||
margin-bottom: 1.25rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.choose-option{
|
.choose-option{
|
||||||
.button-question >div {
|
.button-question >div {
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
|
|
@ -262,13 +255,7 @@ export default {
|
||||||
}
|
}
|
||||||
.button-question{
|
.button-question{
|
||||||
.row.form-test-error{
|
.row.form-test-error{
|
||||||
line-height:1.500rem;
|
line-height:1.5rem;
|
||||||
padding-left: 0rem !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.service-location-button-question {
|
|
||||||
.question-text {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,8 @@
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
|
||||||
justification="left"
|
justification="left"
|
||||||
issContainingPage="service-packages"/>
|
issContainingPage="service-packages"
|
||||||
|
class="my-5"/>
|
||||||
<div class="fade-on-route-transition sub-container make-tall">
|
<div class="fade-on-route-transition sub-container make-tall">
|
||||||
<servicePackageQuestion ref="servicePackage"
|
<servicePackageQuestion ref="servicePackage"
|
||||||
cmsWidgetName="ServicePackage"
|
cmsWidgetName="ServicePackage"
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<div class="fade-on-route-transition position-relative">
|
<div class="fade-on-route-transition position-relative">
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
|
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
|
||||||
<div class="container-fluid pb-2">
|
<div class="container-fluid pb-2">
|
||||||
<div class="row mt-4 px-3">
|
<div class="row mt-2 px-3">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<alert
|
<alert
|
||||||
ref="vehicleChangeAlert"
|
ref="vehicleChangeAlert"
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
alertClass="alert-warning"
|
alertClass="alert-warning"
|
||||||
:isDismissible="false" />
|
:isDismissible="false" />
|
||||||
<vehicleBanner
|
<vehicleBanner
|
||||||
class="mb-3"
|
class="mb-4"
|
||||||
cmsWidgetName="VehicleBannerWidget"
|
cmsWidgetName="VehicleBannerWidget"
|
||||||
:displayGenericVehicleImage="false" />
|
:displayGenericVehicleImage="false" />
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,8 @@
|
||||||
<div class="row px-3">
|
<div class="row px-3">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="select-car-form rounded">
|
<div class="select-car-form rounded">
|
||||||
<VehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
|
<VehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
|
||||||
<SiteSubHeader cms-widget-name="SiteSubHeaderWidget" />
|
<SiteSubHeader cms-widget-name="SiteSubHeaderWidget" class="mt-5 mb-2" />
|
||||||
<VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
|
<VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
|
||||||
<SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" />
|
<SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="select-car-form rounded">
|
<div class="select-car-form rounded">
|
||||||
<vehicleBanner
|
<vehicleBanner
|
||||||
class="mb-3"
|
class="mt-2 mb-4"
|
||||||
ref="vehicleBanner"
|
ref="vehicleBanner"
|
||||||
cmsWidgetName="VehicleBannerWidget"
|
cmsWidgetName="VehicleBannerWidget"
|
||||||
:displayGenericVehicleImage="false" />
|
:displayGenericVehicleImage="false" />
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<div class="row px-3">
|
<div class="row px-3">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="select-car-form rounded">
|
<div class="select-car-form rounded">
|
||||||
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
<vehicleBanner class="mt-2 mb-4" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
||||||
<vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" />
|
<vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" />
|
||||||
<vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" />
|
<vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" />
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@
|
||||||
<div class="page-container-grouped-styles welcome">
|
<div class="page-container-grouped-styles welcome">
|
||||||
<div class="fade-on-route-transition position-relative">
|
<div class="fade-on-route-transition position-relative">
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
|
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4"/>
|
||||||
<div class="container-fluid pb-2">
|
<div class="container-fluid pb-2">
|
||||||
<div class="row mt-4 px-3">
|
<div class="row mt-5 px-3">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
inputId="policyNumberField"
|
inputId="policyNumberField"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue