CASH-276
CASH-276 initial changes to add heavy truck
This commit is contained in:
CarlNation
parent
f2b07d2793
commit
831d4f8ecd
4 changed files with 93 additions and 6 deletions
|
|
@ -9,6 +9,7 @@ const storeMutations = {
|
|||
UPDATE_MAKE: "updateMake",
|
||||
UPDATE_MODEL: "updateModel",
|
||||
UPDATE_STYLE: "updateStyle",
|
||||
UPDATE_VEHICLE_SUBTYPE: "updateVehicleSubType",
|
||||
UPDATE_CAR_ID: "updateCarId",
|
||||
UPDATE_VEHICLE_CATEGORY: "updateVehicleCategory",
|
||||
UPDATE_VEHICLE_IMAGE_URL: "updateVehicleImageUrl",
|
||||
|
|
|
|||
|
|
@ -9,3 +9,9 @@ const vehicleCategories = {
|
|||
};
|
||||
|
||||
export { vehicleCategories };
|
||||
|
||||
const vehicleSubTypes = {
|
||||
HEAVY_TRUCK: "HEAVY TRUCK",
|
||||
};
|
||||
|
||||
export { vehicleSubTypes };
|
||||
|
|
|
|||
|
|
@ -48,6 +48,19 @@
|
|||
validationRules="style-required"
|
||||
placeHolderText="Select style"
|
||||
customDropdownId="styleQuestionField" />
|
||||
|
||||
<div v-if="showHeavyTruck">
|
||||
<div class="separator-line"></div>
|
||||
<textboxQuestion
|
||||
class="mb-4"
|
||||
cmsWidgetName="ServiceZipQuestionWidget"
|
||||
v-model="serviceZipCode"
|
||||
inputId="serviceZipCode"
|
||||
mask="#####"
|
||||
isRequired
|
||||
validationRules="zip-required|zip-format" />
|
||||
</div>
|
||||
|
||||
<alert
|
||||
ref="AlertNoService"
|
||||
v-if="displayNoServiceAlert"
|
||||
|
|
@ -76,6 +89,7 @@ import navbar from "@/fmg-components/nav-bar/nav-bar";
|
|||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import vehicleQuestion from "@/layouts/vehicle/vehicle-question/vehicle-question";
|
||||
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -87,7 +101,7 @@ import {
|
|||
} from "@/helpers/heritage-integration/cookie-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions.js";
|
||||
|
|
@ -96,12 +110,15 @@ import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
|
|||
import { applicationConfig } from "../../constants/application-config";
|
||||
import { queryStrings } from "@/constants/query-strings";
|
||||
import { getQuerystringParameter } from "@/helpers/querystring-helper";
|
||||
import { vehicleSubTypes } from "@/constants/vehicle-categories.js";
|
||||
|
||||
//define validation rules
|
||||
defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
|
||||
defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
|
||||
defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
|
||||
defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
|
||||
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
|
||||
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
|
||||
|
||||
export default {
|
||||
name: "vehicle",
|
||||
|
|
@ -116,6 +133,8 @@ export default {
|
|||
imageUrl: this.getImagefromStore(),
|
||||
imageVifNumber: this.getImageVifNumberfromStore(),
|
||||
imageVifColor: this.getImageVifColorfromStore(),
|
||||
serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
|
||||
vehicleSubType: this.getVehicleSubTypefromStore(),
|
||||
yearOptions: [],
|
||||
makeOptions: [],
|
||||
modelOptions: [],
|
||||
|
|
@ -125,11 +144,14 @@ export default {
|
|||
},
|
||||
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const log = getQuerystringParameter(queryStrings.LOG);
|
||||
if (log === "true") {
|
||||
console.log("----------------- applicationConfig start -----------------");
|
||||
if (store.getters.applicationUser.loggingOption) {
|
||||
console.log(
|
||||
new Date() + "------------- vehicle.vue applicationConfig start -------------"
|
||||
);
|
||||
console.log(new Date() + JSON.stringify(applicationConfig));
|
||||
console.log("----------------- applicationConfig end -----------------");
|
||||
console.log(
|
||||
new Date() + "------------- vehicle.vue applicationConfig end -------------"
|
||||
);
|
||||
}
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
|
@ -299,6 +321,7 @@ export default {
|
|||
this.selectedMake = null;
|
||||
this.selectedModel = null;
|
||||
this.selectedStyle = null;
|
||||
this.vehicleSubType = null;
|
||||
this.carId = null;
|
||||
if (year) {
|
||||
const result = await this.getMakeOptions(year);
|
||||
|
|
@ -318,6 +341,7 @@ export default {
|
|||
this.modelOptions = [];
|
||||
this.selectedModel = null;
|
||||
this.selectedStyle = null;
|
||||
this.vehicleSubType = null;
|
||||
this.carId = null;
|
||||
if (make) {
|
||||
const result = await this.getModelOptions(this.selectedYear, make);
|
||||
|
|
@ -336,6 +360,7 @@ export default {
|
|||
this.resetAlert();
|
||||
this.styleOptions = [];
|
||||
this.selectedStyle = null;
|
||||
this.vehicleSubType = null;
|
||||
this.carId = null;
|
||||
if (model) {
|
||||
const result = await this.getStyleOptions(
|
||||
|
|
@ -400,8 +425,17 @@ export default {
|
|||
!!this.carId
|
||||
);
|
||||
},
|
||||
showHeavyTruck() {
|
||||
return this.vehicleSubType === vehicleSubTypes.HEAVY_TRUCK && !this.displayNoServiceAlert;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getZipFromStore() {
|
||||
return (
|
||||
store.getters?.externalParameterServiceZip?.zipCode ??
|
||||
store.getters.order?.serviceLocation?.zipCode
|
||||
);
|
||||
},
|
||||
isDisabled(options) {
|
||||
if (
|
||||
!options.length ||
|
||||
|
|
@ -443,6 +477,11 @@ export default {
|
|||
this.imageVifNumber = result?.data.imageVifNumber;
|
||||
this.imageVifColor = result?.data.imageVifColor;
|
||||
this.displayNoServiceAlert = !result?.data.canSafeliteService;
|
||||
this.vehicleSubType = result?.data.vehicleSubType;
|
||||
|
||||
// if (this.showHeavyTruck) {
|
||||
|
||||
// }
|
||||
},
|
||||
resetAlert() {
|
||||
this.displayNoServiceAlert = false;
|
||||
|
|
@ -456,6 +495,7 @@ export default {
|
|||
make: this.selectedMake,
|
||||
model: this.selectedModel,
|
||||
style: this.selectedStyle,
|
||||
vehicleSubType: this.vehicleSubType,
|
||||
carId: this.carId,
|
||||
category: this.category,
|
||||
imageUrl: this.imageUrl,
|
||||
|
|
@ -464,6 +504,20 @@ export default {
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
if (this.showHeavyTruck) {
|
||||
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
|
||||
{
|
||||
zipCode: this.serviceZipCode,
|
||||
state: zipCodeData.state,
|
||||
zipCodeCtu: zipCodeData.zipCodeCtu,
|
||||
},
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
|
||||
},
|
||||
initializeYearComponent(initialData) {
|
||||
|
|
@ -536,6 +590,9 @@ export default {
|
|||
getImageVifColorfromStore() {
|
||||
return store.getters.vehicle.imageVifColor;
|
||||
},
|
||||
getVehicleSubTypefromStore() {
|
||||
return store.getters.vehicle.vehicleSubType;
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
|
|
@ -545,6 +602,7 @@ export default {
|
|||
Form,
|
||||
alert,
|
||||
vehicleQuestion,
|
||||
textboxQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -557,4 +615,9 @@ export default {
|
|||
margin-top: 1.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.separator-line {
|
||||
grid-area: 2/1/2/8;
|
||||
border-top: 1px solid $gray-500;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ const getDefaultState = () => {
|
|||
make: null,
|
||||
model: null,
|
||||
style: null,
|
||||
vehicleSubType: null,
|
||||
carId: null,
|
||||
category: null,
|
||||
vin: null,
|
||||
|
|
@ -210,6 +211,9 @@ export const mutations = {
|
|||
updateStyle(state, style) {
|
||||
state.order.vehicle.style = style;
|
||||
},
|
||||
updateVehicleSubType(state, vehicleSubType) {
|
||||
state.order.vehicle.vehicleSubType = vehicleSubType;
|
||||
},
|
||||
updateCarId(state, carId) {
|
||||
state.order.vehicle.carId = carId;
|
||||
},
|
||||
|
|
@ -2121,6 +2125,7 @@ export const actions = {
|
|||
model: vehicle.model,
|
||||
style: vehicle.style,
|
||||
vin: vehicle.vin,
|
||||
vehicleSubType: vehicle.vehicleSubType,
|
||||
registration: {
|
||||
firstName: vehicle.registration.firstName,
|
||||
lastName: vehicle.registration.lastName,
|
||||
|
|
@ -2330,7 +2335,18 @@ export const actions = {
|
|||
// Vehicle
|
||||
saveVehicle(
|
||||
context,
|
||||
{ year, make, model, style, carId, category, imageUrl, imageVifNumber, imageVifColor }
|
||||
{
|
||||
year,
|
||||
make,
|
||||
model,
|
||||
style,
|
||||
vehicleSubType,
|
||||
carId,
|
||||
category,
|
||||
imageUrl,
|
||||
imageVifNumber,
|
||||
imageVifColor,
|
||||
}
|
||||
) {
|
||||
if (
|
||||
context.state.order.vehicle.year != year ||
|
||||
|
|
@ -2346,6 +2362,7 @@ export const actions = {
|
|||
context.commit(storeMutations.UPDATE_MAKE, make);
|
||||
context.commit(storeMutations.UPDATE_MODEL, model);
|
||||
context.commit(storeMutations.UPDATE_STYLE, style);
|
||||
context.commit(storeMutations.UPDATE_VEHICLE_SUBTYPE, vehicleSubType);
|
||||
context.commit(storeMutations.UPDATE_CAR_ID, carId);
|
||||
context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, category);
|
||||
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, imageUrl);
|
||||
|
|
|
|||
Loading…
Reference in a new issue