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

refactoring to license-plate-lookup based on team convo

Browse source
This commit is contained in:
Kroell 2023-01-13 11:39:31 -05:00
parent 0ef6a06536
commit 5d1faae901
5 changed files with 132 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js Normal file
View file

50
src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue Normal file
View file

@ -0,0 +1,50 @@
<template>
<div
id="vin-lookup-alerts-wrapper"
:class="wrapperCssClass"
>
<vehicleNotFoundAlert
v-if="isVehicleNotFoundVisible"
/>
<vehicleNotMatchedAlert
v-else-if="isVehicleNotMatchedVisible"
/>
</div>
</template>
<script>
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import vehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
export default {
name: 'license-plate-lookup-alerts',
components: {
vehicleNotFoundAlert,
vehicleNotMatchedAlert,
},
props: {
activeAlertType: {
type: String,
validator(value) {
const acceptedValues = [null];
acceptedValues.push(...Object.values(vehicleLookupAlertTypes));
return acceptedValues.includes(value);
},
},
},
computed: {
isVehicleNotFoundVisible() {
return this.activeAlertType === vehicleLookupAlertTypes.NOT_FOUND;
},
isVehicleNotMatchedVisible() {
return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
},
wrapperCssClass() {
return {
'mb-5': this.activeAlertType !== null,
};
},
},
};
</script>

26
src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue Normal file
View file

@ -0,0 +1,26 @@
<template>
<alert
alertClass="alert-danger"
cmsWidgetName="AlertVinNotFoundWidget"
id="vehicle-not-found-alert"
/>
</template>
<script>
import alert from '@/ux-components/alert/alert.vue';
export default {
name: 'vehicle-not-found-alert',
components: {
alert,
},
};
</script>
<style>
/**
Override wrong margin-bottom rule in the Alert component.
*/
#vehicle-not-found-alert p:last-of-type {
margin-bottom: 0 !important;
}
</style>

49
src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue Normal file
View file

@ -0,0 +1,49 @@
<template>
<alert
alertClass="alert-warning"
cmsWidgetName="AlertMatchedDifferentVehicleWidget"
:manualCopy="body"
:manualHeadline="header"
/>
</template>
<script>
import { getDamageString } from '@/helpers/damage-helper';
import alert from '@/ux-components/alert/alert.vue';
export default {
name: 'vehicle-not-matched-alert',
components: {
alert,
},
inject: ['vehicleFromLookup'],
computed: {
header() {
return (
this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
.replaceAll('{custom:damage}', getDamageString())
);
},
body() {
let year = '';
let make = '';
let model = '';
if (this.vehicleFromLookup) {
year = this.vehicleFromLookup.year;
make = this.vehicleFromLookup.make;
model = this.vehicleFromLookup.model;
}
return (
this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
.replaceAll('{custom:damage}', getDamageString())
.replaceAll('{custom:vinlookupYear}', year)
.replaceAll('{custom:vinlookupMake}', make)
.replaceAll('{custom:vinlookupModel}', model)
);
},
},
};
</script>

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

@ -10,22 +10,8 @@
:display-generic-vehicle-image="false" />
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall mt-5">
<alert
v-if="isVehicleNotFoundVisible"
cmsWidgetName="AlertVinNotFoundWidget"
<licensePlateLookupAlerts
:activeAlertType="activeVehicleLookupAlertType"
alertClass="alert-danger"
class="mb-5"
ref="vehicleNotFoundAlert"
/>
<alert
v-if="isVehicleNotMatchedVisible"
cmsWidgetName="AlertMatchedDifferentVehicleWidget"
:activeAlertType="activeVehicleLookupAlertType"
:manualHeadline="header"
:manualCopy="body"
alertClass="alert-warning"
class="mb-5"
/>
<textboxQuestion
cmsWidgetName="LicensePlateNumberQuestionWidget"
@ -61,10 +47,9 @@ import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper';
import { useMainStore } from '@/store';
import { defineRule } from 'vee-validate';
import { regex, required } from '@/helpers/validation-rules';
import { errorMessages } from '@/constants/error-messages';
import { getDamageString } from "@/helpers/damage-helper";
import { errorMessages } from "@/constants/error-messages";
import { required, regex } from "@/helpers/validation-rules";
import { defineRule } from "vee-validate";
// Import Component
import baseFormMixin from '@/mixins/base-form-mixin';
@ -74,13 +59,12 @@ import siteHeader from '@/common-components/site-header/site-header.vue';
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
import alert from '@/ux-components/alert/alert.vue';
import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
// Define Validation Rules
defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
export default {
name: 'license-plate-lookup',
@ -92,7 +76,7 @@ export default {
siteSubHeader,
vehicleBanner,
textboxQuestion,
alert,
licensePlateLookupAlerts,
},
setup() {
const mainStore = useMainStore();
@ -105,8 +89,6 @@ export default {
vehicleFromLookup: null,
licensePlate: null,
registrationZipCode: null,
isVehicleNotFoundVisible: false,
isVehicleNotMatchedVisible: false,
};
},
provide() {
@ -151,7 +133,6 @@ export default {
const vehicleLookupResponse = await this.mainStore.lookupVinByPlate(this.licensePlate);
if (vehicleLookupResponse.error) {
this.isVehicleNotFoundVisible = true;
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
this.resetVehicleFromLookup();
this.$refs.siteFooter.removeLoader();
@ -160,7 +141,6 @@ export default {
this.vehicleFromLookup = vehicleLookupResponse.data.vehicle;
if (this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId) {
this.isVehicleNotMatchedVisible = true;
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
@ -180,32 +160,5 @@ export default {
},
resetDependentState() {},
},
computed: {
header() {
return (
this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
.replaceAll('{custom:damage}', getDamageString())
);
},
body() {
let year = '';
let make = '';
let model = '';
if (this.vehicleFromLookup) {
year = this.vehicleFromLookup.year;
make = this.vehicleFromLookup.make;
model = this.vehicleFromLookup.model;
}
return (
this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
.replaceAll('{custom:damage}', getDamageString())
.replaceAll('{custom:vinlookupYear}', year)
.replaceAll('{custom:vinlookupMake}', make)
.replaceAll('{custom:vinlookupModel}', model)
);
},
},
};
</script>