Merge remote-tracking branch 'origin/develop' into feature/CSR-731

src/common-components/button-question/button-question.spec.js

@@ -2,14 +2,6 @@ import { shallowMount, mount } from "@vue/test-utils";
 import buttonQuestion from "@/common-components/button-question/button-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 
-jest.mock(
-    "@/store",
-    () => {
-        return {};
-    },
-    { virtual: true }
-);
-
 describe("buttonQuestion.vue", () => {
     it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
         // Act

src/common-components/dropdown-question/dropdown-question.spec.js

@@ -23,8 +23,6 @@ describe("dropdownQuestion.vue", () => {
             mixins: [mockMixin],
         });
 
-        wrapper.getCmsContent = jest.fn();
-
         // Act
         const select = wrapper.find("select");
 
@@ -48,29 +46,6 @@ describe("dropdownQuestion.vue", () => {
         expect(label.text()).toContain(questionText);
     });
 
-    it("Should render the 'questionText' data value with '⁠' after the first character of each word in the label text when disableAutoFill is true.", async () => {
-        // Arrange
-        const wrapper = shallowMount(dropdownQuestion, {
-            propsData: {
-                options: {},
-                disableAutoFill: true,
-            },
-            mixins: [mockMixin],
-        });
-
-        // Mock CMS content ...
-        // Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
-        // Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools,
-        // you will see "Q⁠uestion T⁠ext"
-        const expectedQuestionText = "Q⁠uestion T⁠ext";
-
-        // Act
-        const label = wrapper.find("label");
-
-        // Assert
-        expect(label.text()).toContain(expectedQuestionText);
-    });
-
     it("Should return input id as the id of the select field", async () => {
         // Arrange
         const wrapper = shallowMount(dropdownQuestion, {

src/common-components/dropdown-question/dropdown-question.vue

@@ -38,7 +38,6 @@ export default {
         },
         isDisabled: Boolean,
         isRequired: Boolean,
-        disableAutoFill: Boolean,
         validationRules: String,
         cmsWidgetName: String,
         hasError: Boolean,

src/constants/store-actions.js

@@ -66,7 +66,6 @@ const storeActions = {
         "resetMoldingAndCapabilityQuestionAnswersIfNeeded",
     SAVE_MOLDING_QUESTION_ANSWERS: "saveMoldingQuestionAnswers",
     SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers",
-    SAVE_QUOTE_PAGE_SELECTIONS: "saveQuotePageSelections",
     SAVE_PAYMENT_TYPE: "savePaymentType",
     SAVE_ACCOUNT_NUMBER: "saveAccountNumber",
     SAVE_SUPPORTING_ITEMS: "saveSupportingItems",

src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js

@@ -5,7 +5,6 @@ import alert from "@/ux-components/alert/alert";
 // Supporting Files
 import { mount, shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
 
@@ -59,35 +58,6 @@ describe("address-questions.vue", () => {
             expect(zipCode.exists()).toBe(true);
         });
 
-        test("Should set this.displayNoMatchWarning to false when it is set to true, if the model if prepopulated", async () => {
-            // Arrange
-            const newAddressModel = {
-                streetAddress: "foo",
-                city: "foo",
-                state: "foo",
-                zipCode: "55555",
-            };
-            const wrapper = shallowMount(addressQuestions, {
-                propsData: {
-                    modelValue: newAddressModel,
-                },
-            });
-
-            await wrapper.setData({
-                displayNoMatchWarning: true,
-            });
-            expect(wrapper.vm.displayNoMatchWarning).toBeTruthy();
-
-            // Act
-            wrapper.vm.$options.watch.addressModel.handler.call(
-                wrapper.vm,
-                wrapper.vm.addressModel
-            );
-
-            // Assert
-            expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
-        });
-
         test("Should it set this.showAddressFields to true when the model is prepopulated", async () => {
             // Arrange
             // Act
@@ -158,7 +128,7 @@ describe("address-questions.vue", () => {
             expect(wrapper.vm.$loadScript).not.toHaveBeenCalled();
         });
 
-        test("address field is focused => disable autocomplete", async () => {
+        test("address field is focused => disable autofill", async () => {
             // Arrange
             let focusEventCallbackFunction;
             autocompleteElement.addEventListener = jest
@@ -239,81 +209,13 @@ describe("address-questions.vue", () => {
             );
 
             // Assert
-            const addressModel = wrapper.vm.addressModel;
+            wrapper.vm.$nextTick(function () {
-            expect(addressModel.streetAddress).toEqual("1234 Test Road");
+                const addressModel = wrapper.vm.addressModel;
-            expect(addressModel.city).toEqual("Columbus");
+                expect(addressModel.streetAddress).toEqual("1234 Test Road");
-            expect(addressModel.state).toEqual("OH");
+                expect(addressModel.city).toEqual("Columbus");
-            expect(addressModel.zipCode).toEqual("43215");
+                expect(addressModel.state).toEqual("OH");
-        });
+                expect(addressModel.zipCode).toEqual("43215");
-
-        test("street address is entered, user chooses good result from autocomplete results => alerts are cleared", async () => {
-            // Arrange
-            const { wrapper } = setupMocks({});
-            await wrapper.setData({
-                addressModel: {
-                    streetAddress: "123 Test Street",
-                },
-                displayVerificationWarning: true,
-                displayNoMatchWarning: true,
             });
-
-            let alerts = wrapper.findAllComponents(alert);
-            alerts.forEach((alert) => expect(alert.isVisible()).toBeTruthy());
-
-            const selectedPlace = {
-                address_components: [
-                    {
-                        long_name: "1234",
-                        short_name: "1234",
-                        types: ["street_number"],
-                    },
-                    {
-                        long_name: "Test Road",
-                        short_name: "Test Road",
-                        types: ["route"],
-                    },
-                    {
-                        long_name: "East Columbus",
-                        short_name: "Columbus",
-                        types: ["neighborhood", "political"],
-                    },
-                    {
-                        long_name: "Columbus",
-                        short_name: "Columbus",
-                        types: ["locality", "political"],
-                    },
-                    {
-                        long_name: "Franklin County",
-                        short_name: "Franklin County",
-                        types: ["administrative_area_level_2", "political"],
-                    },
-                    {
-                        long_name: "Ohio",
-                        short_name: "OH",
-                        types: ["administrative_area_level_1", "political"],
-                    },
-                    {
-                        long_name: "United States",
-                        short_name: "US",
-                        types: ["country", "political"],
-                    },
-                    {
-                        long_name: "43215",
-                        short_name: "43215",
-                        types: ["postal_code"],
-                    },
-                ],
-            };
-
-            // Act
-            autocompleteElement.dispatchEvent(
-                new CustomEvent("place_changed", { detail: selectedPlace })
-            );
-            await wrapper.vm.$nextTick();
-
-            // Assert
-            alerts = wrapper.findAllComponents(alert);
-            alerts.forEach((alert) => expect(alert.exists()).toBeFalsy());
         });
 
         test("street address is entered, but user clicks away => first result is selected and other fields are filled in", async () => {
@@ -413,13 +315,8 @@ describe("address-questions.vue", () => {
                     addressModel: {
                         streetAddress: "123 Test Street",
                     },
-                    displayVerificationWarning: true,
-                    displayNoMatchWarning: true,
                 });
 
-                let alerts = wrapper.findAllComponents(alert);
-                alerts.forEach((alert) => expect(alert.isVisible()).toBeTruthy());
-
                 const selectedPlace = place;
 
                 // Act
@@ -434,6 +331,7 @@ describe("address-questions.vue", () => {
                 });
                 expect(verificationAlert.exists()).toBe(true);
                 expect(verificationAlert.isVisible()).toBe(true);
+
                 const noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
                 expect(noMatchAlert.exists()).toBe(false);
             }
@@ -513,12 +411,12 @@ describe("address-questions.vue", () => {
         });
 
         describe("noMatch alert is cleared on address change", () => {
-            test("user sees noMatch warning and enters city => noMatch warning is removed", async () => {
+            test("user sees noMatch warning and modifies street address => noMatch warning is removed", async () => {
                 // Arrange
                 const { wrapper } = setupMocks({});
 
-                wrapper.setData({
+                await wrapper.setData({
-                    displayNoMatchWarning: true,
+                    matchFound: false,
                 });
                 await wrapper.vm.$nextTick();
 
@@ -526,24 +424,53 @@ describe("address-questions.vue", () => {
                 expect(noMatchAlert.exists()).toBeTruthy();
                 expect(noMatchAlert.isVisible()).toBeTruthy();
 
-                // Act
+                // // Act
                 wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
-                    city: "Somewhere",
+                    streetAddress: "LS",
+                });
+
+                // Assert
+                wrapper.vm.$nextTick(function () {
+                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+
+                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(noMatchAlert.exists()).toBeFalsy();
+                });
+            });
+
+            test("user sees noMatch warning and enters city => noMatch warning is removed", async () => {
+                // Arrange
+                const { wrapper } = setupMocks({});
+
+                await wrapper.setData({
+                    matchFound: false,
                 });
                 await wrapper.vm.$nextTick();
 
+                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                expect(noMatchAlert.exists()).toBeTruthy();
+                expect(noMatchAlert.isVisible()).toBeTruthy();
+
+                // // Act
+                wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
+                    city: "LS",
+                });
+
                 // Assert
-                expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                wrapper.vm.$nextTick(function () {
-                noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
-                expect(noMatchAlert.exists()).toBeFalsy();
+
+                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(noMatchAlert.exists()).toBeFalsy();
+                });
             });
 
             test("user sees noMatch warning and enters state => noMatch warning is removed", async () => {
                 // Arrange
                 const { wrapper } = setupMocks({});
 
-                wrapper.setData({
+                await wrapper.setData({
-                    displayNoMatchWarning: true,
+                    matchFound: false,
                 });
                 await wrapper.vm.$nextTick();
 
@@ -551,24 +478,26 @@ describe("address-questions.vue", () => {
                 expect(noMatchAlert.exists()).toBeTruthy();
                 expect(noMatchAlert.isVisible()).toBeTruthy();
 
-                // Act
+                // // Act
                 wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
                     state: "KO",
                 });
-                await wrapper.vm.$nextTick();
 
                 // Assert
-                expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                wrapper.vm.$nextTick(function () {
-                noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
-                expect(noMatchAlert.exists()).toBeFalsy();
+
+                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(noMatchAlert.exists()).toBeFalsy();
+                });
             });
 
             test("user sees noMatch warning and enters zip code => noMatch warning is removed", async () => {
                 // Arrange
                 const { wrapper } = setupMocks({});
 
-                wrapper.setData({
+                await wrapper.setData({
-                    displayNoMatchWarning: true,
+                    matchFound: false,
                 });
                 await wrapper.vm.$nextTick();
 
@@ -576,16 +505,18 @@ describe("address-questions.vue", () => {
                 expect(noMatchAlert.exists()).toBeTruthy();
                 expect(noMatchAlert.isVisible()).toBeTruthy();
 
-                // Act
+                // // Act
                 wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
                     zipCode: "12345",
                 });
-                await wrapper.vm.$nextTick();
 
                 // Assert
-                expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                wrapper.vm.$nextTick(function () {
-                noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
-                expect(noMatchAlert.exists()).toBeFalsy();
+
+                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(noMatchAlert.exists()).toBeFalsy();
+                });
             });
         });
     });

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -12,7 +12,8 @@
                     aria-haspopup=""
                     hasIcon
                     disableAutoFill
-                    validationRules="street-address-required" />
+                    validationRules="street-address-required"
+                    @keydown.enter.prevent />
             </div>
         </div>
         <transition name="fade" mode="out-in">
@@ -109,6 +110,10 @@ export default {
             alertCopyVerificationWarning: "",
             alertHeadlineNoMatchWarning: "",
             alertCopyNoMatchWarning: "",
+            matchingIndirectly: false,
+            matchFound: null, // null = no attempted match, true = match was found, false = match was not found
+            enterPressed: false,
+            isAddressWatchActive: false, // Only deep watch the address model when a match was not found
         };
     },
     computed: {
@@ -213,11 +218,11 @@ export default {
                         fillInAddress
                     );
 
-                    // Wrapping the addressField1 element in the Google Address Autocomplete object
-                    // will cause "autocomplete='off'" which Chrome completely ignores. This event
-                    // handler will set the value to something arbitrary so autofill doesn't work.
-                    // https://stackoverflow.com/a/30976223
                     addressField1.addEventListener("focus", () => {
+                        // Wrapping the addressField1 element in the Google Address Autocomplete object
+                        // will cause "autocomplete='off'" which Chrome completely ignores. This event
+                        // handler will set the value to something arbitrary so autofill doesn't work.
+                        // https://stackoverflow.com/a/30976223
                         addressField1.setAttribute("autocomplete", "do-not-autofill");
 
                         // Make place results box stick to the input on scroll
@@ -229,12 +234,43 @@ export default {
                         }
                     });
 
+                    addressField1.addEventListener("keydown", (e) => {
+                        if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") {
+                            if (e.code === "Tab") {
+                                self.matchingIndirectly = true;
+                            } else {
+                                self.enterPressed = true;
+                            }
+
+                            addressField1.blur();
+                        } else {
+                            return;
+                        }
+                    });
+
                     addressField1.addEventListener("change", () => {
-                        const hover = document.querySelector(".pac-container .pac-item:hover");
+                        // NOTE: The "place_changed" event of the autocomplete fires after this and will use either the address the user had chosen
-                        // if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
+                        // using either the down / up arrows or the address the user was hovering over when they pressed "Enter."
-                        if (hover === null) {
+
+                        // If a match has been previously found then do nothing
+                        // OR
+                        // If the user pressed "Enter" then do nothing
+                        if (self.matchFound || self.enterPressed) {
+                            return;
+                        }
+
+                        // Get the address that the user clicked on (if any)
+                        const clickedAddress = document.querySelector(
+                            ".pac-container .pac-item:hover"
+                        );
+
+                        // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field)
+                        if (clickedAddress === null) {
+                            // Fill-in the address using first item in the list.
                             const item = document.querySelector(".pac-container .pac-item");
                             if (item != null) {
+                                self.matchingIndirectly = true;
+
                                 const firstResult = item.textContent;
                                 const geocoder = new window.google.maps.Geocoder();
                                 geocoder.geocode(
@@ -244,18 +280,12 @@ export default {
                                     function (results, status) {
                                         if (status === window.google.maps.GeocoderStatus.OK) {
                                             fillInAddress(results[0]);
-                                            self.displayVerificationWarning = true;
-                                            self.displayNoMatchWarning = false;
                                         }
                                     }
                                 );
                             } else {
-                                self.addressModel.city = "";
+                                // No addresses found for the input
-                                self.addressModel.state = "";
+                                self.matchFound = false;
-                                self.addressModel.zipCode = "";
-                                self.showAddressFields = true;
-                                self.displayVerificationWarning = false;
-                                self.displayNoMatchWarning = true;
                             }
                         }
                     });
@@ -266,50 +296,53 @@ export default {
                         }
 
                         if (place && place.address_components) {
+                            self.matchFound = true;
                             self.addressModel.streetAddress = "";
-                            self.showAddressFields = true;
+                            self.$nextTick(function () {
+                                self.showAddressFields = true;
 
-                            for (const component of place.address_components) {
+                                for (const component of place.address_components) {
-                                const componentType = component.types[0];
+                                    const componentType = component.types[0];
 
-                                switch (componentType) {
+                                    switch (componentType) {
-                                    case "street_number": {
+                                        case "street_number": {
-                                        self.addressModel.streetAddress = component.long_name;
+                                            self.addressModel.streetAddress = component.long_name;
-                                        break;
+                                            break;
-                                    }
+                                        }
-                                    case "route": {
+                                        case "route": {
-                                        self.addressModel.streetAddress +=
+                                            self.addressModel.streetAddress +=
-                                            " " + component.short_name;
+                                                " " + component.short_name;
-                                        break;
+                                            break;
-                                    }
+                                        }
-                                    case "locality": {
+                                        case "locality": {
-                                        self.addressModel.city = component.long_name;
+                                            self.addressModel.city = component.long_name;
-                                        break;
+                                            break;
-                                    }
+                                        }
-                                    case "administrative_area_level_1": {
+                                        case "administrative_area_level_1": {
-                                        self.addressModel.state = component.short_name;
+                                            self.addressModel.state = component.short_name;
-                                        break;
+                                            break;
-                                    }
+                                        }
-                                    case "postal_code": {
+                                        case "postal_code": {
-                                        self.addressModel.zipCode = component.long_name;
+                                            self.addressModel.zipCode = component.long_name;
-                                        break;
+                                            break;
+                                        }
                                     }
                                 }
-                            }
 
-                            self.displayVerificationWarning = false;
+                                self.displayVerificationWarning = self.matchingIndirectly;
-                            self.displayNoMatchWarning = false;
+
+                                // after showing the address fields, disable the address autocomplete
+                                window.google.maps.event.removeListener(autocompleteListener);
+                                window.google.maps.event.clearInstanceListeners(autocomplete);
+                                addressField1.onchange = null;
+                                const pacContainer = document.querySelector(".pac-container");
+                                if (pacContainer) {
+                                    pacContainer.remove();
+                                }
+                            });
                         } else {
                             self.displayVerificationWarning = true;
-                            self.displayNoMatchWarning = false;
                         }
-
-                        // after showing the address fields, disable the address autocomplete
-                        window.google.maps.event.removeListener(autocompleteListener);
-                        window.google.maps.event.clearInstanceListeners(autocomplete);
-                        addressField1.onchange = null;
-                        const pacContainer = document.querySelector(".pac-container");
-                        pacContainer.remove();
                     }
                 })
                 .catch(() => {
@@ -322,11 +355,29 @@ export default {
         this.setupAddressLookup();
     },
     watch: {
-        addressModel: {
+        matchFound: {
             handler(newValue) {
-                // Clear no match warning on address change
+                if (!newValue) {
-                if (newValue.city || newValue.state || newValue.zipCode) {
+                    this.displayNoMatchWarning = true;
+
+                    this.addressModel.city = "";
+                    this.addressModel.state = "";
+                    this.addressModel.zipCode = "";
+                    this.showAddressFields = true;
+                    this.displayVerificationWarning = false;
+
+                    this.$nextTick(function () {
+                        // Only deep watch the Address Model after a failed match
+                        this.isAddressWatchActive = true;
+                    });
+                }
+            },
+        },
+        addressModel: {
+            handler() {
+                if (this.isAddressWatchActive) {
                     this.displayNoMatchWarning = false;
+                    this.isAddressWatchActive = false;
                 }
             },
             deep: true,

src/layouts/capability-questions/capability-questions.spec.js

@@ -113,6 +113,7 @@ afterEach(() => {
         pageData: baseStoreGettersPageData,
         damage: baseStoreGettersDamage,
         payment: { insuranceCoverage: {} },
+        order: {},
     };
 });
 

src/layouts/estimate/estimate.vue

@@ -219,6 +219,8 @@ export default {
                     payment.isInsurance && payment.insuranceCoverage.coverageStatus;
                 if (vehicleChangedDuringPolicyLookupInHeritage) {
                     navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
+                } else if (this.$store.getters.order.referralNumber?.length === 6) {
+                    await this.navigateForwardWithSingleCarMatch();
                 } else if (this.isRepair) {
                     return this.$router.navigateWithSaving(
                         this.navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS,

src/layouts/molding-questions/molding-questions.spec.js

@@ -107,6 +107,7 @@ const baseStoreGettersDamage = () => {
 store.getters = {
     pageData: baseStoreGettersPageData,
     damage: baseStoreGettersDamage,
+    order: {},
 };
 store.commit = jest.fn();
 
@@ -116,6 +117,7 @@ afterEach(() => {
         pageData: baseStoreGettersPageData,
         damage: baseStoreGettersDamage,
         payment: { insuranceCoverage: {} },
+        order: {},
     };
 });
 

src/layouts/part-questions/part-questions.spec.js

@@ -97,6 +97,7 @@ const baseStoreGettersDamage = () => {
 store.getters = {
     pageData: baseStoreGettersPageData,
     damage: baseStoreGettersDamage,
+    order: {},
 };
 store.commit = jest.fn();
 
@@ -140,6 +141,7 @@ describe("partQuestions.vue...", () => {
                     };
                 }),
                 damage: baseStoreGettersDamage,
+                order: {},
             };
             const { wrapper } = setupMocks({});
 
@@ -159,6 +161,7 @@ describe("partQuestions.vue...", () => {
             store.getters = {
                 pageData: baseStoreGettersPageData,
                 damage: baseStoreGettersDamage,
+                order: {},
             };
             const { wrapper } = setupMocks({});
             const spy = jest.spyOn(wrapper.vm, "handleCompletedQuestionChainAnswers");

src/layouts/quote/quote.vue

@@ -144,7 +144,8 @@ export default {
                 store.getters.order.serviceLocation.zipCodeCtu &&
                 (store.getters.order.damage.isRepair ||
                     (store.getters.order.lineItems?.glassParts != null &&
-                        store.getters.order.lineItems.glassParts.length > 0))
+                        store.getters.order.lineItems.glassParts.length > 0)) &&
+                store.getters.order.referralNumber?.length !== 6
             );
         },
         getDefaultIsInsuranceSelectedValue(availableLineItems) {

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -329,7 +329,7 @@ export default {
 
         navigateForward() {
             const payment = this.$store.getters.payment;
-            console.log(payment);
+
             const vehicleChangedDuringPolicyLookupInHeritage =
                 payment.isInsurance &&
                 payment.insuranceCoverage.coverageStatus &&

src/layouts/vehicle-parts/vehicle-parts.spec.js

@@ -460,6 +460,7 @@ describe("vehicle-parts.vue", () => {
         store.getters.lineItems = { glassParts: {} };
         store.getters.vehicle = { carId: "TEST_CAR_ID" };
         store.getters.payment = { insuranceCoverage: {} };
+        store.getters.order = {};
 
         const { wrapper } = setupMocks({
             mountOptionsMockData: {

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -35,7 +35,7 @@
                     cmsWidgetName="FunnelFooterWidget"
                     ref="funnelFooter"
                     :isForwardActionDisabled="isForwardActionDisabled"
-                    @back-click="navigateBack"
+                    @back-clicked="navigateBack"
                     @ForwardClicked="forwardButtonAction" />
             </div>
         </div>

src/mixins/analytics-mixin.js

@@ -19,6 +19,7 @@ import { cookieNames } from "@/constants/cookie-names";
 import store from "@/store";
 
 import baseMixin from "@/mixins/base-mixin";
+import { applicationConfig } from "../constants/application-config";
 
 export default {
     methods: {
@@ -129,11 +130,14 @@ export default {
         async initSession() {
             const sid = getSessionIdValue();
             const skey = getSessionKeyValue();
+            const referrer =
+                applicationConfig.CURRENT_ENVIRONMENT != "Localhost" ? document.referrer : null;
+
             var payload = {
                 userId: getDeviceIdValue(),
                 sessionId: sid,
                 userAgent: navigator.userAgent,
-                referrer: document.referrer,
+                referrer: referrer,
             };
 
             const response = await baseMixin.methods.dispatchStoreAction(

src/mixins/vehicle-questions-mixin.js

@@ -446,7 +446,9 @@ export default {
 
                 const payment = store.getters.payment;
 
-                if (payment.isInsurance && payment.insuranceCoverage.isVerified) {
+                if (store.getters.order.referralNumber?.length === 6) {
+                    navigateToHeritageFunnel({ loadingModal: self.$refs.loadingModal });
+                } else if (payment.isInsurance && payment.insuranceCoverage.isVerified) {
                     navigateToHeritageFunnel({ loadingModal: self.$refs.loadingModal });
                 } else {
                     self.$router.navigateWithSaving(
@@ -496,9 +498,11 @@ export default {
             const hasCapabilityQuestions = this.hasCapabilityQuestions(currentPartsOrQuestions);
             const skipVinLookup = await store.dispatch(storeActions.IS_VIN_OPTIONAL_VEHICLE);
 
-            let backNavigationScenario = self.$store.getters.vehicle.vin
+            const vin = self.$store.getters.vehicle.vin;
-                ? navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS
+            let backNavigationScenario =
-                : navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS;
+                !vin || vin === "" || skipVinLookup
+                    ? navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS
+                    : navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS;
 
             if (
                 hasCapabilityQuestions &&
@@ -521,8 +525,6 @@ export default {
                 this.currentPageComesAfterPage(currentPage, fmgPageValues.PART_QUESTIONS)
             ) {
                 backNavigationScenario = navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS;
-            } else if (skipVinLookup) {
-                backNavigationScenario = navigationScenarios.CLICKED_BACK_TO_GO_TO_ESTIMATE;
             }
 
             self.$router.navigateWithoutSaving(backNavigationScenario, self.$route);

src/router/router-constants/navigation-scenarios.js

@@ -44,7 +44,6 @@ const navigationScenarios = {
     CLICKED_BACK_WITH_CAPABILITY_QUESTIONS: "CLICKED_BACK_WITH_CAPABILITY_QUESTIONS",
     CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: "CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS",
     CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: "CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS",
-    CLICKED_BACK_TO_GO_TO_ESTIMATE: "CLICKED_BACK_TO_GO_TO_ESTIMATE",
 };
 
 export { navigationScenarios };

src/router/router-constants/routing-table.js

@@ -296,10 +296,6 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
                     destinationFmgPageValue: fmgPageValues.QUOTE,
                 },
-                {
-                    scenario: navigationScenarios.CLICKED_BACK_TO_GO_TO_ESTIMATE,
-                    destinationFmgPageValue: fmgPageValues.ESTIMATE,
-                },
             ],
         },
         {
@@ -333,10 +329,6 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
                     destinationFmgPageValue: fmgPageValues.QUOTE,
                 },
-                {
-                    scenario: navigationScenarios.CLICKED_BACK_TO_GO_TO_ESTIMATE,
-                    destinationFmgPageValue: fmgPageValues.ESTIMATE,
-                },
             ],
         },
         {
@@ -366,10 +358,6 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
                     destinationFmgPageValue: fmgPageValues.QUOTE,
                 },
-                {
-                    scenario: navigationScenarios.CLICKED_BACK_TO_GO_TO_ESTIMATE,
-                    destinationFmgPageValue: fmgPageValues.ESTIMATE,
-                },
             ],
         },
         {
@@ -399,10 +387,6 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
                     destinationFmgPageValue: fmgPageValues.QUOTE,
                 },
-                {
-                    scenario: navigationScenarios.CLICKED_BACK_TO_GO_TO_ESTIMATE,
-                    destinationFmgPageValue: fmgPageValues.ESTIMATE,
-                },
             ],
         },
         {

src/ux-components/button-main/button-main.spec.js

@@ -4,89 +4,77 @@ import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
 
 describe("buttonMain.vue", () => {
-    it("Should return btn-primary class", async () => {
+    it("Should return btn-primary class", () => {
-        // Act
+        // Arrange/Act
         const wrapper = shallowMount(
             buttonMain,
             setupMocks({
-                propsData: {
+                props: {
                     isPrimary: true,
                 },
             })
         );
-
-        // Assert
         const button = wrapper.find("button");
 
-        // Expect
+        // Assert
         expect(button.attributes("class")).toContain("btn-primary");
     });
 
-    it("Should return aria-disabled state", async () => {
+    it("Should return aria-disabled state", () => {
-        // Act
+        // Arrange/Act
         const wrapper = shallowMount(
             buttonMain,
             setupMocks({
-                propsData: {
+                props: {
                     isDisabled: true,
                 },
             })
         );
-
-        // Assert
         const button = wrapper.find("button");
 
-        // Expect
+        // Assert
         expect(button.attributes()["aria-disabled"]).toEqual("true");
     });
 
     it("Should return loader color", async () => {
-        // Act
+        // Arrange
         const wrapper = shallowMount(
             buttonMain,
             setupMocks({
-                propsData: {
+                props: {
                     loaderColor: "blue",
                     loaderEnabled: true,
                 },
             })
         );
 
-        // Assert
+        // Act
-
-        const label = wrapper.find("label");
-
         wrapper.vm.clicked();
-
         await nextTick();
 
+        // Assert
         const loader = wrapper.find("loader-stub");
-
         expect(loader.attributes("class")).toContain("blue");
     });
 
     it("Should return loader position", async () => {
-        // Act
+        // Arrange
         const wrapper = shallowMount(
             buttonMain,
             setupMocks({
-                propsData: {
+                props: {
                     loaderPosition: "right",
                     loaderEnabled: true,
                 },
             })
         );
 
-        // Assert
+        // Act
-
-        const label = wrapper.find("label");
-
         wrapper.vm.clicked();
-
         await nextTick();
 
+        // Assert
         const loader = wrapper.find("loader-stub");
-
         expect(loader.attributes("class")).toContain("right");
     });
 });

src/ux-components/loader/loader.spec.js

@@ -1 +1,31 @@
-test.todo("some test to be written in the future");
+import { shallowMount, mount } from "@vue/test-utils";
+import loader from "./loader";
+
+describe("loader.vue", () => {
+    test("if it rendered the HTML element with class", () => {
+        // Arrange/Act
+        const wrapper = shallowMount(loader, {
+            props: {},
+        });
+
+        // Assert
+        expect(wrapper.find("div").exists()).toBeTruthy();
+        expect(wrapper.find(".loader").exists()).toBeTruthy();
+    });
+
+    test("if it correctly passed props", () => {
+        // Arrange/Act
+        const wrapper = shallowMount(loader, {
+            props: {
+                loaderColor: "blue",
+                loaderPosition: "left",
+            },
+        });
+
+        // Assert
+        expect(wrapper.props()).toMatchObject({
+            loaderColor: "blue",
+            loaderPosition: "left",
+        });
+    });
+});