Merge pull request #2341 from Safelite/feature/CASH-276

CASH-276

src/constants/store-mutations.js

@@ -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",

src/constants/vehicle-categories.js

@@ -9,3 +9,9 @@ const vehicleCategories = {
 };
 
 export { vehicleCategories };
+
+const vehicleSubTypes = {
+    HEAVY_TRUCK: "HEAVY TRUCK",
+};
+
+export { vehicleSubTypes };

src/layouts/vehicle/vehicle.vue

@@ -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 (store.getters.applicationUser.loggingOption) {
-        if (log === "true") {
+            console.log(
-            console.log("----------------- applicationConfig start -----------------");
+                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,19 @@ 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 +479,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 +497,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 +506,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 +592,9 @@ export default {
         getImageVifColorfromStore() {
             return store.getters.vehicle.imageVifColor;
         },
+        getVehicleSubTypefromStore() {
+            return store.getters.vehicle.vehicleSubType;
+        },
     },
 
     components: {
@@ -545,6 +604,7 @@ export default {
         Form,
         alert,
         vehicleQuestion,
+        textboxQuestion,
     },
 };
 </script>
@@ -557,4 +617,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>

src/store/index.js

@@ -61,6 +61,7 @@ const getDefaultState = () => {
                 make: null,
                 model: null,
                 style: null,
+                vehicleSubType: null,
                 carId: null,
                 category: null,
                 vin: null,
@@ -211,6 +212,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;
     },
@@ -2125,6 +2129,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,
@@ -2335,7 +2340,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 ||
@@ -2351,6 +2367,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);