jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updates to lookup and damage.

Browse source
This commit is contained in:
Bill Richardson 2025-12-02 16:07:34 -05:00
parent 85e920c35b
commit 940b7d295f
3 changed files with 134 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

174
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -4,20 +4,15 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div <div class="fade-on-route-transition replace-options-question">
class="container-fluid fade-on-route-transition replace-options-question"> <div class="justify-content-center">
<div class="row justify-content-center"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
</div> </div>
<div class="row justify-content-center"> <div class="iss-heritage-container-width">
<div class="col-md-6 col-xl-4"> <div class="vehicle-damage-container iss-heritage-content-container-width">
<vehicleBanner <siteSubHeader
class="mb-4" cmsWidgetName="SiteSubHeaderWidget"
cmsWidgetName="VehicleBannerWidget" class="mt-4" />
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<alert <alert
v-if="shouldDisplayVehicleChangeAlert" v-if="shouldDisplayVehicleChangeAlert"
ref="vehicleChangeAlert" ref="vehicleChangeAlert"
@ -25,71 +20,71 @@
cmsWidgetName="VehicleChangeAlert" cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning" alertClass="alert-warning"
:isDismissible="false" /> :isDismissible="false" />
</div> <div class="justify-content-center">
</div> <div class="vehicle-damage-question-container">
<div class="row justify-content-center"> <damageLocationQuestion
<div class="col-md-6"> ref="damageLocation"
<damageLocationQuestion v-model="selectedDamageLocations"
ref="damageLocation" cmsWidgetName="DamageLocationQuestion"
v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
cmsWidgetName="DamageLocationQuestion" </div>
groupName="DamageLocationQuestion" /> </div>
</div> <div class="justify-content-center">
</div> <div class="vehicle-damage-question-container">
<div class="row justify-content-center"> <windshieldOptions
<div class="col-md-6 col-xl-4"> ref="windshieldOptions"
<windshieldOptions v-model="selectedWindshieldOptions"
ref="windshieldOptions" :hasRepairReplaceConflict="hasRepairReplaceConflict"
v-model="selectedWindshieldOptions" :hasSplitSingleConflict="hasSplitSingleConflict"
:hasRepairReplaceConflict="hasRepairReplaceConflict" :selectedDamageLocations="selectedDamageLocations" />
:hasSplitSingleConflict="hasSplitSingleConflict" </div>
:selectedDamageLocations="selectedDamageLocations" /> </div>
</div> <div class="justify-content-center">
</div> <div class="vehicle-damage-question-container">
<div class="row justify-content-center"> <alert
<div class="col-md-6 col-xl-4"> v-if="hasRepairReplaceConflict"
<alert class="my-5"
v-if="hasRepairReplaceConflict" cmsWidgetName="HasReplacementConflict"
class="my-5" alertClass="alert-danger"
cmsWidgetName="HasReplacementConflict" :isDismissible="false" />
alertClass="alert-danger" </div>
:isDismissible="false" /> </div>
</div> <div class="justify-content-center">
</div> <div class="vehicle-damage-question-container">
<div class="row justify-content-center"> <sideDoorOptions
<div class="col-md-6 col-xl-4"> v-show="!hasRepairReplaceConflict"
<sideDoorOptions ref="sideDoorOptions"
v-show="!hasRepairReplaceConflict" v-model="sideDoorOptionsData"
ref="sideDoorOptions" cmsWidgetName="SideDoorSideQuestion"
v-model="sideDoorOptionsData" groupName="SideDoorSideQuestion"
cmsWidgetName="SideDoorSideQuestion" :selectedDamageLocations="selectedDamageLocations" />
groupName="SideDoorSideQuestion" </div>
:selectedDamageLocations="selectedDamageLocations" /> </div>
</div> <div class="justify-content-center">
</div> <div class="vehicle-damage-question-container">
<div class="row justify-content-center"> <replaceOptionsQuestion
<div class="col-md-6 col-xl-4"> ref="backGlassOptions"
<replaceOptionsQuestion v-model="selectedRearReplaceOptions"
ref="backGlassOptions" cmsWidgetName="RearReplaceOptionsQuestion"
v-model="selectedRearReplaceOptions" :isAvailable="
cmsWidgetName="RearReplaceOptionsQuestion" isRearWindowDamageLocation &&
:isAvailable=" !hasRepairReplaceConflict
isRearWindowDamageLocation && "
!hasRepairReplaceConflict groupName="BackGlassReplaceOptionsQuestion"
" validationRules="replace-options-required" />
groupName="BackGlassReplaceOptionsQuestion" </div>
validationRules="replace-options-required" /> </div>
</div> <div class="justify-content-center">
</div> <div class="vehicle-damage-question-container">
<div class="row justify-content-center"> <site-footer
<div class="col-md-6 col-xl-4"> ref="siteFooter"
<site-footer class="mt-5"
ref="siteFooter" cmsWidgetName="SiteFooterWidget"
class="mt-5" :isForwardActionDisabled="!meta.valid"
cmsWidgetName="SiteFooterWidget" @backClicked="navigateBack"
:isForwardActionDisabled="!meta.valid" @forwardClicked="forwardButtonAction" />
@backClicked="navigateBack" </div>
@forwardClicked="forwardButtonAction" /> </div>
</div> </div>
</div> </div>
</div> </div>
@ -100,7 +95,6 @@
// Components // Components
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'; import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import sideDoorOptions from '@/layouts/vehicle-damage/side-door-options/side-door-options.vue'; import sideDoorOptions from '@/layouts/vehicle-damage/side-door-options/side-door-options.vue';
import damageLocationQuestion from '@/layouts/vehicle-damage/damage-location-question/damage-location-question.vue'; import damageLocationQuestion from '@/layouts/vehicle-damage/damage-location-question/damage-location-question.vue';
@ -133,7 +127,6 @@ export default {
components: { components: {
siteHeader, siteHeader,
siteFooter, siteFooter,
vehicleBanner,
siteSubHeader, siteSubHeader,
sideDoorOptions, sideDoorOptions,
damageLocationQuestion, damageLocationQuestion,
@ -500,18 +493,21 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.replace-options-question { .iss-heritage-container-width {
.row { .vehicle-damage-container {
margin-top: 0; position: relative;
.col-12 { min-height: 1px;
margin: 0 0 .5rem 0; padding-left: .9375rem;
&:last-child { padding-right: .9375rem;
margin-bottom: 0;
} .question-text {
margin-top: 0; //would need deep is changed to scoped. Was already not scoped.
} }
} }
}
.replace-options-question {
.question-text { .question-text {
margin: 0;
span { span {
padding: 1rem 0; padding: 1rem 0;
text-align: center; text-align: center;

71
src/layouts/vehicle-lookup/vehicle-lookup.vue
View file

@ -1,41 +1,34 @@
<template> <template>
<Form <Form
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition"> <div class="fade-on-route-transition">
<div class="row justify-content-center"> <div class="justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
</div> </div>
<div class="row justify-content-center"> <div class="iss-heritage-container-width">
<div class="col-md-6 col-xl-4"> <div class="vehicle-lookup-container iss-heritage-content-container-width">
<div class="select-car-form rounded"> <SiteSubHeader
<VehicleBanner cmsWidgetName="SiteSubHeaderWidget"
class="mt-2 mb-4" class="mt-4"
cmsWidgetName="VehicleBannerWidget" subHeaderMarginClasses="mt-1" />
:displayGenericVehicleImage="false" /> <VinLookupMethods
<SiteSubHeader ref="VinLookupMethods"
cmsWidgetName="SiteSubHeaderWidget" v-model="selectedVinLookupMethod"
class="mb-2" cmsWidgetName="VINLookupMethod"
subHeaderMarginClasses="mt-1" /> groupName="VinLookupMethods" />
<VinLookupMethods <SiteFooter
ref="VinLookupMethods" cmsWidgetName="SiteFooterWidget"
v-model="selectedVinLookupMethod" :isForwardActionDisabled="isForwardActionDisabled"
cmsWidgetName="VINLookupMethod" class="mt-5"
groupName="VinLookupMethods" /> @backClicked="navigateBack"
<SiteFooter @forwardClicked="forwardButtonAction" />
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
class="mt-5"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div> </div>
</div> </div>
</div> </div>
</Form> </Form>
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
@ -46,9 +39,8 @@ import vinLookupMethodSelections from '@/constants/vin-lookup-methods';
// Import Component // Import Component
import SiteFooter from '@/iss-components/site-footer/site-footer.vue'; import SiteFooter from '@/iss-components/site-footer/site-footer.vue';
import SiteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from '@/iss-components/site-header/site-header.vue';
import SiteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'; import SiteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue'; import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue';
export default { export default {
@ -57,9 +49,8 @@ export default {
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
SiteFooter, SiteFooter,
SiteHeader, siteHeader,
SiteSubHeader, SiteSubHeader,
VehicleBanner,
VinLookupMethods VinLookupMethods
}, },
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
@ -123,3 +114,15 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.vehicle-lookup-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
</style>

12
src/styles/common-styles.scss
View file

@ -128,6 +128,18 @@ body {
} }
#app { #app {
display: flex;
flex-direction: column;
height: 100dvh;
>form {
flex: 1 0 auto;
}
>.footer-menu-container {
flex: 0 0 auto;
}
@include media-breakpoint-up(xs) { @include media-breakpoint-up(xs) {
overflow: auto; overflow: auto;
} }