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

WIP format pages.

Browse source
This commit is contained in:
Bryan Mauger 2023-09-18 16:56:29 -04:00
parent ce6916658a
commit 015fd50202
4 changed files with 169 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/layouts/estimate/estimate.vue
View file

@ -23,6 +23,13 @@
isRequired isRequired
validationRules="option-required" validationRules="option-required"
:logDisplayedValuesEvent="true" /> :logDisplayedValuesEvent="true" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div> </div>
<div v-else> <div v-else>

122
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -1,90 +1,96 @@
<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" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<div class="row mt-2 mb-4">
<div class="col">
<textboxQuestion
cmsWidgetName="LicensePlateNumberQuestionWidget"
v-model="licensePlate"
isRequired
customInputId="licensePlate"
validationRules="license-plate-required" />
</div>
</div> </div>
<div class="row mt-0 mb-4"> </div>
<div class="col"> <div class="row">
<textboxQuestion <div class="col-md-2 col-lg-3">&nbsp;</div>
cmsWidgetName="RegistrationZipQuestionWidget" <div class="col-md-8 col-lg-6">
v-model="registrationZipCode" <vehicleBanner
customInputId="zip" cmsWidgetName="VehicleBannerWidget"
mask="#####" :displayGenericVehicleImage="false" />
validationRules="registration-zip-required|zip-format" />
</div> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
</div>
<div class="row mt-0"> <textboxQuestion
<div class="col"> cmsWidgetName="LicensePlateNumberQuestionWidget"
<textboxQuestion v-model="licensePlate"
cmsWidgetName="EmailAddressQuestionWidget" isRequired
v-model="email" customInputId="licensePlate"
customInputId="email" validationRules="license-plate-required" />
validationRules="email-address-required|email-address-format" />
</div> <textboxQuestion
</div> cmsWidgetName="RegistrationZipQuestionWidget"
<div class="row mb-2"> v-model="registrationZipCode"
<div class="col"> customInputId="zip"
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" /> mask="#####"
</div> validationRules="registration-zip-required|zip-format" />
</div>
<alert <textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
v-model="email"
customInputId="email"
validationRules="email-address-required|email-address-format" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
<alert
v-if="displayInvalidZipAlert" v-if="displayInvalidZipAlert"
class="my-3" class="my-3"
cmsWidgetName="AlertInvalidZipWidget" cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger" alertClass="alert-danger"
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
<alert
<alert
v-if="displayNonServiceableZipAlert" v-if="displayNonServiceableZipAlert"
class="my-3" class="my-3"
:manualHeadline="AlertNonServiceableZipHeader" :manualHeadline="AlertNonServiceableZipHeader"
:manualCopy="AlertNonServiceableZipBody" :manualCopy="AlertNonServiceableZipBody"
alertClass="alert-danger" alertClass="alert-danger"
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
<div class="row mt-2" v-if="showServiceZipField">
<div class="col mb-1"> <div class="row mt-2" v-if="showServiceZipField">
<textboxQuestion <div class="col mb-1">
<textboxQuestion
cmsWidgetName="ServiceZipQuestionWidget" cmsWidgetName="ServiceZipQuestionWidget"
v-model="serviceZipCode" v-model="serviceZipCode"
inputId="serviceZipCode" inputId="serviceZipCode"
validationRules="zip-required|zip-format" validationRules="zip-required|zip-format"
mask="#####" /> mask="#####" />
</div>
</div> </div>
</div>
<alert <alert
v-if="displayVinNotFoundAlert" v-if="displayVinNotFoundAlert"
class="my-3" class="my-3"
cmsWidgetName="AlertVinNotFoundWidget" cmsWidgetName="AlertVinNotFoundWidget"
alertClass="alert-danger" alertClass="alert-danger"
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
<alert
<alert
v-if="displayMatchedDifferentVehicleAlert" v-if="displayMatchedDifferentVehicleAlert"
class="my-3" class="my-3"
:manualHeadline="AlertMatchedDifferentVehicleHeader" :manualHeadline="AlertMatchedDifferentVehicleHeader"
:manualCopy="AlertMatchedDifferentVehicleBody" :manualCopy="AlertMatchedDifferentVehicleBody"
alertClass="alert-warning" alertClass="alert-warning"
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
<navbar
<navbar
ref="navbar" ref="navbar"
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction" @back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" /> @ForwardClicked="forwardButtonAction" />
</div>
<div class="col-md-2 col-lg-3">&nbsp;</div>
</div> </div>
</div> </div>
</Form> </Form>
</template> </template>
@ -214,10 +220,10 @@ export default {
// If serviceZipCode is not set, then sets the response to the registrationZipValidationResponse. Calls VALIDATE_ZIP if the serviceZipCode is set. // If serviceZipCode is not set, then sets the response to the registrationZipValidationResponse. Calls VALIDATE_ZIP if the serviceZipCode is set.
resultKey: "serviceZipValidationResponse", resultKey: "serviceZipValidationResponse",
promise: this.serviceZipCode promise: this.serviceZipCode
? this.dispatchStoreAction(storeActions.VALIDATE_ZIP, { ? this.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
zip: this.serviceZipCode, zip: this.serviceZipCode,
}) })
: registrationZipValidationResponse, : registrationZipValidationResponse,
}, },
]; ];
@ -247,7 +253,7 @@ export default {
// Check if the CarId has changed. // Check if the CarId has changed.
this.isCarIdDifferent = this.isCarIdDifferent =
vinLookup.data.vehicle.carId !== this.$store.getters.vehicle.carId; vinLookup.data.vehicle.carId !== this.$store.getters.vehicle.carId;
// Handle changing car // Handle changing car
if ( if (
@ -359,10 +365,10 @@ export default {
}, },
AlertMatchedDifferentVehicleBody() { AlertMatchedDifferentVehicleBody() {
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText") return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString()) .replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:plateLookupYear}", this.customAlertData?.vehicleInfo?.year) .replaceAll("{custom:plateLookupYear}", this.customAlertData?.vehicleInfo?.year)
.replaceAll("{custom:plateLookupMake}", this.customAlertData?.vehicleInfo?.make) .replaceAll("{custom:plateLookupMake}", this.customAlertData?.vehicleInfo?.make)
.replaceAll("{custom:plateLookupModel}", this.customAlertData?.vehicleInfo?.model); .replaceAll("{custom:plateLookupModel}", this.customAlertData?.vehicleInfo?.model);
}, },
}, },
watch: { watch: {

196
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -1,133 +1,133 @@
<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"> <loadingModal ref="loadingModal" />
<loadingModal ref="loadingModal" /> <div class="container-fluid">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <div class="row">
<vehicleBanner <div class="col">
cmsWidgetName="VehicleBannerWidget" <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
:displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<div class="row mb-2">
<div class="col">
<textboxQuestion
cmsWidgetName="VinNumberQuestionWidget"
v-model="vin"
customInputId="vin"
isRequired
:validationRules="
!vinPopulatedOnPageLoad ? 'vin-required|vin-format' : ''
"
:isDisabled="vinPopulatedOnPageLoad"
maxLength="17"
:mask="vinMask"
includeImageQuestion
:imageQuestionSubmitHandler="getVinFromImage"
:maxFileSize="imageUploadMaxFileSize"
@image-lookup-error="displayVinScanAlert"
@image-validity-error="displayVinScanAlert"
data-test="vin-lookup-field"
ref="vinLookupQuestion" />
</div>
</div> </div>
<div class="row"> </div>
<div class="col"> <div class="row">
<alert <div class="col-md-2 col-lg-3">&nbsp;</div>
cmsWidgetName="AlertVinScanFailed" <div class="col-md-8 col-lg-6">
v-if="displayVinScanFailedAlert" <vehicleBanner
alertClass="alert-danger" /> cmsWidgetName="VehicleBannerWidget"
</div> :displayGenericVehicleImage="false" />
</div>
<div class="row"> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="col">
<vinInformation /> <textboxQuestion
</div> cmsWidgetName="VinNumberQuestionWidget"
</div> v-model="vin"
<div class="row mb-0 mt-4"> customInputId="vin"
<div class="col"> isRequired
<textboxQuestion :validationRules="
cmsWidgetName="ServiceZipQuestionWidget" !vinPopulatedOnPageLoad ? 'vin-required|vin-format' : ''
v-model="serviceZipCode" "
customInputId="serviceZipCode" :isDisabled="vinPopulatedOnPageLoad"
mask="#####" maxLength="17"
isRequired :mask="vinMask"
validationRules="zip-required|zip-format" /> includeImageQuestion
</div> :imageQuestionSubmitHandler="getVinFromImage"
</div> :maxFileSize="imageUploadMaxFileSize"
<div class="row mt-4"> @image-lookup-error="displayVinScanAlert"
<div class="col"> @image-validity-error="displayVinScanAlert"
<textboxQuestion data-test="vin-lookup-field"
cmsWidgetName="EmailAddressQuestionWidget" ref="vinLookupQuestion" />
v-model="emailAddress"
customInputId="emailAddress" <alert
isRequired cmsWidgetName="AlertVinScanFailed"
validationRules="email-address-required|email-address-format" /> v-if="displayVinScanFailedAlert"
</div> alertClass="alert-danger" />
</div>
<div class="row mb-0"> <vinInformation />
<div class="col">
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" /> <textboxQuestion
</div> cmsWidgetName="ServiceZipQuestionWidget"
</div> v-model="serviceZipCode"
<alert customInputId="serviceZipCode"
mask="#####"
isRequired
validationRules="zip-required|zip-format" />
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
v-model="emailAddress"
customInputId="emailAddress"
isRequired
validationRules="email-address-required|email-address-format" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
<alert
ref="alertInvalidZip" ref="alertInvalidZip"
v-if="displayInvalidZipAlert" v-if="displayInvalidZipAlert"
class="my-4" class="my-4"
cmsWidgetName="AlertInvalidZipWidget" cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger" alertClass="alert-danger"
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
<alert
<alert
class="my-4" class="my-4"
:manualHeadline="AlertPerfectMatchInsuranceVerifiedHeader" :manualHeadline="AlertPerfectMatchInsuranceVerifiedHeader"
:manualCopy="AlertPerfectMatchInsuranceVerifiedBody" :manualCopy="AlertPerfectMatchInsuranceVerifiedBody"
v-model="customAlertData" v-model="customAlertData"
v-if=" v-if="
vinPopulatedOnPageLoad && vinPopulatedOnPageLoad &&
isInsuranceVerified && isInsuranceVerified &&
!displayInvalidZipAlert && !displayInvalidZipAlert &&
!displayNonServiceableZipAlert !displayNonServiceableZipAlert
" "
alertClass="alert-success" /> alertClass="alert-success" />
<alert
<alert
class="my-4" class="my-4"
:manualHeadline="AlertMatchedDifferentVehicleHeader" :manualHeadline="AlertMatchedDifferentVehicleHeader"
:manualCopy="AlertMatchedDifferentVehicleBody" :manualCopy="AlertMatchedDifferentVehicleBody"
v-model="customAlertData" v-model="customAlertData"
v-if="displayMatchedDifferentVehicleAlert" v-if="displayMatchedDifferentVehicleAlert"
alertClass="alert-warning" /> alertClass="alert-warning" />
<alert
<alert
class="my-4" class="my-4"
:manualHeadline="AlertNonServiceableZipHeader" :manualHeadline="AlertNonServiceableZipHeader"
:manualCopy="AlertNonServiceableZipBody" :manualCopy="AlertNonServiceableZipBody"
v-model="customAlertData" v-model="customAlertData"
v-if="displayNonServiceableZipAlert" v-if="displayNonServiceableZipAlert"
alertClass="alert-danger" /> alertClass="alert-danger" />
<alert
<alert
class="my-4" class="my-4"
v-model="customAlertData" v-model="customAlertData"
v-if="displayVinNotFoundAlert" v-if="displayVinNotFoundAlert"
alertClass="alert-danger" alertClass="alert-danger"
cmsWidgetName="AlertVinNotFoundWidget" /> cmsWidgetName="AlertVinNotFoundWidget" />
<alert
<alert
class="my-4" class="my-4"
:manualHeadline="AlertPerfectMatchInsuranceNotVerifiedHeader" :manualHeadline="AlertPerfectMatchInsuranceNotVerifiedHeader"
:manualCopy="AlertPerfectMatchInsuranceNotVerifiedBody" :manualCopy="AlertPerfectMatchInsuranceNotVerifiedBody"
v-model="customAlertData" v-model="customAlertData"
v-if=" v-if="
vinPopulatedOnPageLoad && vinPopulatedOnPageLoad &&
!isInsuranceVerified && !isInsuranceVerified &&
!displayInvalidZipAlert && !displayInvalidZipAlert &&
!displayNonServiceableZipAlert !displayNonServiceableZipAlert
" "
alertClass="alert-success" /> alertClass="alert-success" />
<navbar
<navbar
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
ref="navbar" ref="navbar"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction" @back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" /> @ForwardClicked="forwardButtonAction" />
</div>
<div class="col-md-2 col-lg-3">&nbsp;</div>
</div> </div>
</div> </div>
</Form> </Form>
</template> </template>
@ -300,7 +300,7 @@ export default {
// Check if the CarId is different from the lookup vs what is in state currently. // Check if the CarId is different from the lookup vs what is in state currently.
this.isCarIdDifferent = this.isCarIdDifferent =
resultMap.vehicleLookupResponse.carId !== this.$store.getters.vehicle.carId; resultMap.vehicleLookupResponse.carId !== this.$store.getters.vehicle.carId;
if ( if (
this.isCarIdDifferent && this.isCarIdDifferent &&
@ -400,16 +400,16 @@ export default {
getVinFromImage(image) { getVinFromImage(image) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, image) this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, image)
.then((response) => { .then((response) => {
if (response.data.length > 0) { if (response.data.length > 0) {
resolve(response.data[0]); resolve(response.data[0]);
} else { } else {
reject("No VINs detected."); reject("No VINs detected.");
} }
}) })
.catch(() => { .catch(() => {
reject("An error occurred during the lookup."); reject("An error occurred during the lookup.");
}); });
}); });
}, },
resetAlerts() { resetAlerts() {
@ -432,10 +432,10 @@ export default {
}, },
AlertMatchedDifferentVehicleBody() { AlertMatchedDifferentVehicleBody() {
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText") return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString()) .replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year) .replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year)
.replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make) .replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make)
.replaceAll("{custom:vinlookupModel}", this.customAlertData?.vehicleInfo?.model); .replaceAll("{custom:vinlookupModel}", this.customAlertData?.vehicleInfo?.model);
}, },
AlertNonServiceableZipHeader() { AlertNonServiceableZipHeader() {
return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll( return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll(

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

@ -36,10 +36,6 @@ body {
overflow: hidden; overflow: hidden;
} }
.page-container-grouped-styles {
//@extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
}
//Footer modal backdrop adjustments for positioning //Footer modal backdrop adjustments for positioning
.modal-backdrop { .modal-backdrop {
left: 50%; left: 50%;