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

CSR-1593 fix address-vehicles page for responsive.

Browse source
This commit is contained in:
Bryan Mauger 2023-09-21 09:05:32 -04:00
parent 8653828d8a
commit 6828ae264d
1 changed files with 47 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -1,38 +1,52 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles"> <div class="container-fluid">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <div class="row">
<vehicleBanner <div class="col">
cmsWidgetName="VehicleBannerWidget" <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
:displayGenericVehicleImage="false" /> </div>
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> </div>
<alert <div class="row justify-content-md-center">
ref="alertFoundMultipleVehicles" <div class="col-md-6 col-xl-4">
class="my-5" <vehicleBanner
alertClass="alert-warning" cmsWidgetName="VehicleBannerWidget"
:manualHeadline="AlertFoundMultipleVehiclesHeader" :displayGenericVehicleImage="false" />
manualCopy=""
v-bind:isDismissible="false" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<addressVehiclesQuestion
ref="addressVehiclesQuestion" <alert
cmsWidgetName="VehicleConfirmationQuestion" ref="alertFoundMultipleVehicles"
:vehicles="VehiclesForQuestions" class="my-5"
validationRules="vehicle-required" alertClass="alert-warning"
v-model="selectedVehicleVin" :manualHeadline="AlertFoundMultipleVehiclesHeader"
:isCarIdDifferent="isCarIdDifferent" /> manualCopy=""
<div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length"> v-bind:isDismissible="false" />
<textBlock
:customText="AlertProvideVinBody" <addressVehiclesQuestion
justifyText="left" ref="addressVehiclesQuestion"
class="mb-3" cmsWidgetName="VehicleConfirmationQuestion"
marginTopSizeOverride="3" /> :vehicles="VehiclesForQuestions"
validationRules="vehicle-required"
v-model="selectedVehicleVin"
:isCarIdDifferent="isCarIdDifferent" />
<div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
<textBlock
:customText="AlertProvideVinBody"
justifyText="left"
class="mb-3"
marginTopSizeOverride="3" />
</div>
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div> </div>
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div> </div>
</Form> </Form>
</template> </template>
@ -208,7 +222,7 @@ export default {
handler() { handler() {
// does this vehicle match the previously selected carId? // does this vehicle match the previously selected carId?
this.isCarIdDifferent = this.isCarIdDifferent =
this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId; this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId;
if (this.isCarIdDifferent) { if (this.isCarIdDifferent) {
this.$refs.navbar.updateButtonText( this.$refs.navbar.updateButtonText(
`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}` `Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`