diff --git a/jest.config.js b/jest.config.js index d010bda25..7f7516934 100644 --- a/jest.config.js +++ b/jest.config.js @@ -26,8 +26,7 @@ module.exports = { "!src/layouts/address-lookup/customer-questions/customer-questions.vue", "!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue", "!src/common-components/dropdown-question/dropdown-question.vue", - "!src/common-components/textbox-question/textbox-question.vue", - "!src/helpers/validation-rules.js", + "!src/common-components/textbox-question/textbox-question.vue", // END ], //! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], diff --git a/src/common-components/dropdown-question/dropdown-question.spec.js1 b/src/common-components/dropdown-question/dropdown-question.spec.js1 index 3eeb3662b..81669f714 100644 --- a/src/common-components/dropdown-question/dropdown-question.spec.js1 +++ b/src/common-components/dropdown-question/dropdown-question.spec.js1 @@ -1,6 +1,7 @@ import { shallowMount } from "@vue/test-utils"; import dropdownQuestion from "./dropdown-question"; import { nextTick } from "vue"; +import { maska } from 'maska'; describe("dropdownQuestion.vue", () => { @@ -19,7 +20,7 @@ describe("dropdownQuestion.vue", () => { expect(input.attributes()["aria-disabled"]).toEqual("true"); }); - it("Should render a text input", async () => { + it("Should render a select input", async () => { // Act const wrapper = shallowMount(dropdownQuestion, { propsData: { @@ -49,33 +50,82 @@ describe("dropdownQuestion.vue", () => { expect(input.attributes().id).toEqual("input ID"); }); -/* it("Should return label text", async () => { + it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => { + // Arrange + //Mock CMS content + const questionText = "Question Text"; + const cmsContent = { + QuestionText: questionText, + }; + // Act const wrapper = shallowMount(dropdownQuestion, { - propsData: { - labelText: "label text", + global: { + directives: { + maska: maska, + } }, }); + await wrapper.setData({ + questionText: questionText, + }); + wrapper.vm.initializeComponent(cmsContent); // Assert - const label = wrapper.find("label"); + expect(wrapper.find("label").text()).toContain(questionText); + wrapper.unmount(); + }); + + it("Should render the 'questionText' data value with '⁠' after the first character as the label text when disableAutoFill is true.", async () => { + // Arrange + //Mock CMS content + const originalQuestionText = "Question Text"; + // 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 it and paste it into Google. Then inspect the search field element in Dev Tools, + // you will see "Q&uestion Text" + const expectedQuestionText = "Q⁠uestion Text"; + const cmsContent = { + QuestionText: originalQuestionText, + }; - expect(label.text()).toEqual("label text"); - }); */ - - it("Should return input id", async () => { // Act const wrapper = shallowMount(dropdownQuestion, { + global: { + directives: { + maska: maska, + } + }, propsData: { - inputId: "input ID", + disableAutoFill: true, }, }); + await wrapper.setData({ + questionText: originalQuestionText, + }); + wrapper.vm.initializeComponent(cmsContent); // Assert - const input = wrapper.find("select"); - - // Expect - expect(input.attributes().id).toEqual("input ID"); + expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText); + wrapper.unmount(); }); + it("Should emit new value when modelValue is changed", async () => { + // Act + const wrapper = shallowMount(dropdownQuestion, { + global: { + directives: { + maska: maska, + } + }, + propsData: { + modelValue: "val", + }, + }); + + await wrapper.find("select").setValue("val2"); + + // Assert + expect(wrapper.emitted()).toHaveProperty('change') + + }); }); diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue index 08ed368cf..7afdc0b38 100644 --- a/src/common-components/dropdown-question/dropdown-question.vue +++ b/src/common-components/dropdown-question/dropdown-question.vue @@ -37,6 +37,7 @@ export default { isRequired: Boolean, disableAutoFill: Boolean, validationRules: String, + cmsWidgetName: String, }, setup(props) { const fieldOptions = { @@ -57,18 +58,11 @@ export default { handleChange, meta, }; - }, - data() { - return { - questionText: "", - } - }, - methods: { - initializeComponent(cmsContent) { - this.questionText = cmsContent; - } - }, + }, computed: { + questionText(){ + return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); + }, selectedOption: { get: function() { return this.modelValue; @@ -79,14 +73,22 @@ export default { }, labelText: { get: function () { - let labelText = this.questionText; + const noBreakChar = "⁠"; + var questionText = ""; if (this.disableAutoFill) { - const noBreakChar = "⁠"; - const position = 1; - labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join(''); + var words = this.questionText.toString().split(/[ ]+/); + words.forEach(function (word) { + const position = 1; + word = [word.toString().slice(0, position), noBreakChar, word.toString().slice(position)].join(''); + questionText += `${word} `; + }); + + questionText = questionText.trimEnd(); + } else { + questionText = this.questionText.toString(); } - return labelText; + return questionText; } } }, diff --git a/src/common-components/textbox-question/textbox-question.spec.js1 b/src/common-components/textbox-question/textbox-question.spec.js1 index 721fba9d5..63214c126 100644 --- a/src/common-components/textbox-question/textbox-question.spec.js1 +++ b/src/common-components/textbox-question/textbox-question.spec.js1 @@ -1,12 +1,17 @@ import { shallowMount } from "@vue/test-utils"; import textboxQuestion from "./textbox-question"; -import { nextTick } from "vue"; +import { maska } from 'maska'; describe("textboxQuestion.vue", () => { it("Should return aria-disabled state", async () => { // Act const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + } + }, propsData: { isDisabled: true, }, @@ -17,11 +22,17 @@ describe("textboxQuestion.vue", () => { // Expect expect(input.attributes()["aria-disabled"]).toEqual("true"); + }); it("Should render a text input", async () => { // Act const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + } + }, propsData: { name: "test", label: "unit test label", @@ -32,11 +43,17 @@ describe("textboxQuestion.vue", () => { const input = wrapper.find("input"); expect(input.exists()).toBe(true); + }); it("Should return input id", async () => { // Act const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + } + }, propsData: { inputId: "input ID", }, @@ -47,35 +64,115 @@ describe("textboxQuestion.vue", () => { // Expect expect(input.attributes().id).toEqual("input ID"); + }); - it("Should return label text", async () => { + it("Should render the 'questionText' data value as the aria-label attribute.", async () => { + // Arrange + //Mock CMS content + const questionText = "Question Text"; + const cmsContent = { + QuestionText: questionText, + }; + // Act const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + } + }, + }); + await wrapper.setData({ + questionText: questionText, + }); + wrapper.vm.initializeComponent(cmsContent); + + // Assert + expect(wrapper.find("label").attributes('aria-label')).toBe(questionText); + wrapper.unmount(); + + }); + + it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => { + // Arrange + //Mock CMS content + const questionText = "Question Text"; + const cmsContent = { + QuestionText: questionText, + }; + + // Act + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + } + }, + }); + await wrapper.setData({ + questionText: questionText, + }); + wrapper.vm.initializeComponent(cmsContent); + + // Assert + expect(wrapper.find("label").text()).toContain(questionText); + wrapper.unmount(); + + }); + + it("Should render the 'questionText' data value with '⁠' after the first character as the label text when disableAutoFill is true.", async () => { + // Arrange + //Mock CMS content + const originalQuestionText = "Question Text"; + // 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 it and paste it into Google. Then inspect the search field element in Dev Tools, + // you will see "Q&uestion Text" + const expectedQuestionText = "Q⁠uestion Text"; + const cmsContent = { + QuestionText: originalQuestionText, + }; + + // Act + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + } + }, propsData: { - labelText: "label text", + disableAutoFill: true, + }, + }); + await wrapper.setData({ + questionText: originalQuestionText, + }); + wrapper.vm.initializeComponent(cmsContent); + + // Assert + expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText); + wrapper.unmount(); + + }); + + it("Should emit new value when modelValue is changed", async () => { + // Act + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + } + }, + propsData: { + modelValue: "val", }, }); - // Assert - const label = wrapper.find("label"); - - expect(label.text()).toEqual("label text"); - }); - - it("Should return input id", async () => { - // Act - const wrapper = shallowMount(textboxQuestion, { - propsData: { - inputId: "input ID", - }, - }); + await wrapper.find("input").setValue("val2"); // Assert - const input = wrapper.find("input"); + expect(wrapper.emitted()).toHaveProperty('change') - // Expect - expect(input.attributes().id).toEqual("input ID"); }); }); diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index 5fba4c165..062ceb683 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -91,14 +91,22 @@ export default { }, labelText: { get: function () { - let labelText = this.questionText; + const noBreakChar = "⁠"; + var questionText = ""; if (this.disableAutoFill) { - var noBreakChar = "⁠"; - var position = 1; - labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join(''); + var words = this.questionText.toString().split(/[ ]+/); + words.forEach(function (word) { + const position = 1; + word = [word.toString().slice(0, position), noBreakChar, word.toString().slice(position)].join(''); + questionText += `${word} `; + }); + + questionText = questionText.trimEnd(); + } else { + questionText = this.questionText.toString(); } - return labelText; + return questionText; } } }, diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 47eb50ab8..ca1555e7b 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -47,6 +47,10 @@ const endpoints = { url: "/vehicle/api/v1/vehicle/lookup-vin-by-plate", method: "POST", }, + LookupVinByAddress: { + url: "/vehicle/api/v1/vehicle/lookup-vin-by-address", + method: "POST", + }, GetPartsOrQuestions: { url: "/parts/api/v1/parts/parts-or-questions", method: "POST", diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js index c3976d0f9..17012ab68 100644 --- a/src/constants/error-messages.js +++ b/src/constants/error-messages.js @@ -11,11 +11,14 @@ const errorMessages = { CITY_REQUIRED: "Please enter your city", STATE_REQUIRED: "Please enter your state", ZIP_REQUIRED: "Please enter your ZIP", + ZIP_FORMAT: "Please enter a valid ZIP", LICENSE_PLATE_REQUIRED: "Please enter your license plate number", FIRST_NAME_REQUIRED: "Please enter your first name", LAST_NAME_REQUIRED: "Please enter your last name", EMAIL_ADDRESS_REQUIRED: "Please enter your email address", EMAIL_ADDRESS_FORMAT: "Please enter a valid email address", + SERVICE_ZIP_REQUIRED: "Please enter your Service ZIP", + SERVICE_ZIP_FORMAT: "Please enter a valid Service ZIP", VIN_REQUIRED: "Please enter your VIN", VIN_FORMAT: "Please enter a valid VIN", }; diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index 8de78f70c..74dac5043 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -12,6 +12,7 @@ const storeActions = { LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms", LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin", LOOKUP_VIN_BY_PLATE: "lookupVinByPlate", + LOOKUP_VIN_BY_ADDRESS: "lookupVinByAddress", GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions", SAVE_ORDER: "saveOrder", LOAD_ORDER: "loadOrder", diff --git a/src/helpers/validation-rules.spec.js b/src/helpers/validation-rules.spec.js index 323e05ff1..7e0c6304e 100644 --- a/src/helpers/validation-rules.spec.js +++ b/src/helpers/validation-rules.spec.js @@ -1,4 +1,5 @@ import { required } from "@/helpers/validation-rules"; +import { regex } from "@/helpers/validation-rules"; describe("validation-rules.vue", () => { test("required rules should return error if value missing", () => { @@ -15,15 +16,57 @@ describe("validation-rules.vue", () => { }); describe("validation-rules.vue", () => { - test("required rules should return true if value present", () => { - - //Arrange - const testFn = required("an error"); - - //Act - const testResponse = testFn('some value'); - - //Assert - expect(testResponse).toBe(true); - }); - }); \ No newline at end of file + test("required rules should return true if value present", () => { + + //Arrange + const testFn = required("an error"); + + //Act + const testResponse = testFn('some value'); + + //Assert + expect(testResponse).toBe(true); + }); +}); + +describe("validation-rules.vue", () => { + test("regex rules should return true if value is not present", () => { + + //Arrange + const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex + + //Act + const testResponse = testFn(); + + //Assert + expect(testResponse).toBe(true); + }); +}); + +describe("validation-rules.vue", () => { + test("regex rules should return false if value is present but does not match regular expression", () => { + + //Arrange + const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex + + //Act + const testResponse = testFn('4321'); // needs to be 5 numbers + + //Assert + expect(testResponse).toBe("an error"); + }); +}); + +describe("validation-rules.vue", () => { + test("regex rules should return true if value is present and does match regular expression", () => { + + //Arrange + const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex + + //Act + const testResponse = testFn('43213'); // needs to be 5 numbers + + //Assert + expect(testResponse).toBe(true); + }); +}); \ No newline at end of file diff --git a/src/layouts/address-lookup/address-lookup.spec.js1 b/src/layouts/address-lookup/address-lookup.spec.js1 index e69de29bb..43f3649b0 100644 --- a/src/layouts/address-lookup/address-lookup.spec.js1 +++ b/src/layouts/address-lookup/address-lookup.spec.js1 @@ -0,0 +1,244 @@ +// Components +import addressLookup from "@/layouts/address-lookup/address-lookup.vue"; +import funnelHeader from "@/common-components/funnel-header/funnel-header"; +import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; +import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; +import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; +import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions"; +import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions"; + +// Supporting Files +import { settleAllPromises } from "@/helpers/layout-helper.js"; +import baseMixin from "@/mixins/base-mixin"; +import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; +import { mount, flushPromises } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { maska } from 'maska'; +import { nextTick } from "vue"; +import { storeActions } from "@/constants/store-actions"; +import { storeMutations } from "@/constants/store-mutations"; +import store from "@/store"; +import { validate } from "vee-validate"; + +// Mock our module for promises. +jest.mock("@/helpers/layout-helper.js", () => ({ + settleAllPromises: jest.fn(), +})); + +// Mock fetchCmsContentForPage +jest.mock("@/helpers/cms-content-helper", () => ({ + fetchCmsContentForPage: jest.fn(), +})); + +describe("address-lookup.vue", () => { + test("Page header is initialized with api data", async (done) => { + //Arrange + const pageHeaderWidgetHeaderText = "Select Damage"; + const { wrapper, apiPromise } = setupMocks({ + pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText, + }); + + //Act + addressLookup.beforeRouteEnter.call( + wrapper.vm, + { query: { fmgPage: "address-lookup" } }, + undefined, + (c) => c(wrapper.vm) + ); + + //Assert + apiPromise.finally(() => { + expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith( + pageHeaderWidgetHeaderText + ); + done(); + }); + }); + + test("Customer Questions component is initialized with api data", async (done) => { + //Arrange + const StreetAddressQuestionWidget = { QuestionText: "test" }; + const CityQuestionWidget = { QuestionText: "test" }; + const StateQuestionWidget = { QuestionText: "test" }; + const ZipQuestionWidget = { QuestionText: "test" }; + const FirstNameQuestionWidget = { QuestionText: "test" }; + const LastNameQuestionWidget = { QuestionText: "test" }; + const EmailAddressQuestionWidget = { QuestionText: "test" }; + const AlertVerificationWarningWidget = { HeaderText: "test", BodyText: "test" }; + const AlertNoMatchWarningWidget = { HeaderText: "test", BodyText: "test" }; + + const widgets = [ + StreetAddressQuestionWidget, + CityQuestionWidget, + StateQuestionWidget, + ZipQuestionWidget, + AlertVerificationWarningWidget, + AlertNoMatchWarningWidget, + FirstNameQuestionWidget, + LastNameQuestionWidget, + EmailAddressQuestionWidget, + ]; + + const { wrapper, apiPromise } = setupMocks({ + cmsContent: widgets, + }); + + //Act + addressLookup.beforeRouteEnter.call( + wrapper.vm, + { query: { fmgPage: "address-lookup" } }, + undefined, + (c) => c(wrapper.vm) + ); + + //Assert + apiPromise.finally(() => { + expect(customerQuestions.methods.initializeComponent).toHaveBeenCalledWith( + widgets + ); + done(); + }); + }); + + }); + + + + function setupMocks({ + pageHeaderWidgetHeaderText = {}, + mountOptionsMockData = { + router: { + navigate: jest.fn(), + }, + store: { + getters: { + vehicle: {}, + }, + }, + }, + }) { + //Mock api responses + baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn(); + const apiResponses = { + cmsContent: { + FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleBannerWidget: { + GenericVehicleImage: + "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", + }, + FunnelHeaderWidget: { + LogoImage: + "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", + }, + StreetAddressQuestionWidget: { + QuestionText: + "test" + }, + CityQuestionWidget: { + QuestionText: + "test" + }, + StateQuestionWidget: { + QuestionText: + "test" + }, + ZipQuestionWidget: { + QuestionText: + "test" + }, + FirstNameQuestionWidget: { + QuestionText: + "test" + }, + LastNameQuestionWidget: { + QuestionText: + "test" + }, + EmailAddressQuestionWidget: { + QuestionText: + "test" + }, + AlertVerificationWarningWidget: { + HeaderText: + "test", + BodyText: + "test", + }, + AlertNoMatchWarningWidget: { + HeaderText: + "test", + BodyText: + "test", + }, + + }, + }; + + const apiPromise = Promise.resolve(apiResponses); + + settleAllPromises.mockImplementation(() => apiPromise); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + //Mock damage initialize methods + funnelHeader.methods = { + initializeComponent: jest.fn(), + }; + + vehicleBanner.methods = { + initializeComponent: jest.fn(), + }; + + funnelSubHeader.methods = { + initializeComponent: jest.fn(), + }; + + funnelFooter.methods = { + initializeComponent: jest.fn(), + }; + + customerQuestions.methods = { + initializeComponent: jest.fn(), + }; + + addressQuestions.methods = { + initializeComponent: jest.fn(), + setupAddressLookup: jest.fn(), + }; + + const mountOptions = getMountOptions(mountOptionsMockData); + mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods + + mountOptions.global.directives = { + maska: maska + }; + + const wrapper = mount(addressLookup, mountOptions); + + const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" }); + funnelHeaderWrapper.vm.initializeComponent = + funnelHeader.methods.initializeComponent; + + const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" }); + vehicleBannerWrapper.vm.initializeComponent = + vehicleBanner.methods.initializeComponent; + + const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" }); + funnelSubHeaderWrapper.vm.initializeComponent = + funnelSubHeader.methods.initializeComponent; + + const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" }); + funnelFooterWrapper.vm.initializeComponent = + funnelFooter.methods.initializeComponent; + + const customerQuestionsWrapper = wrapper.findComponent({ name: "customerQuestions" }); + customerQuestionsWrapper.vm.initializeComponent = + customerQuestions.methods.initializeComponent; + + const addressQuestionsWrapper = wrapper.findComponent({ name: "addressQuestions" }); + addressQuestionsWrapper.vm.initializeComponent = + addressQuestions.methods.initializeComponent; + addressQuestionsWrapper.vm.setupAddressLookup = + addressQuestions.methods.setupAddressLookup; + + return { wrapper, apiPromise }; + } \ No newline at end of file diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue index 7a90ee123..c18ee545e 100644 --- a/src/layouts/address-lookup/address-lookup.vue +++ b/src/layouts/address-lookup/address-lookup.vue @@ -5,15 +5,54 @@ ref="theForm" v-slot="{ meta }" autocomplete="off" > -
- +
+ - + + + + + + +
+
+
+ +
+
+
+ +
@@ -26,14 +65,27 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions"; +import alert from "@/ux-components/alert/alert"; +import textboxQuestion from "@/common-components/textbox-question/textbox-question"; + import { Form } from "vee-validate"; +import { defineRule } from "vee-validate"; +import { required } from "@/helpers/validation-rules"; +import { regex } from "@/helpers/validation-rules"; +import { errorMessages } from "@/constants/error-messages"; // Supporting files import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { settleAllPromises } from "@/helpers/layout-helper"; -import { storeActions } from "@/constants/store-actions"; import store from "@/store"; +import { storeActions } from "@/constants/store-actions"; +import { storeMutations } from "@/constants/store-mutations"; +import baseMixin from "@/mixins/base-mixin"; +import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; +import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper"; +defineRule("service-zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); +defineRule("service-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)); export default { name: "address-lookup", @@ -53,46 +105,29 @@ export default { // Call the "next" function to complete the transition to this page. next((vm) => { - vm.$refs.funnelHeader.initializeComponent( - resultMap.cmsContent.FunnelHeaderWidget - ); - vm.$refs.vehicleBanner.initializeComponent( - resultMap.cmsContent.VehicleBannerWidget - ); - vm.$refs.funnelSubHeader.initializeComponent( - resultMap.cmsContent.FunnelSubHeaderWidget - ); - vm.$refs.funnelFooter.initializeComponent( - resultMap.cmsContent.FunnelFooterWidget - ); - vm.$refs.customerQuestions.initializeComponent([ - resultMap.cmsContent.StreetAddressQuestionWidget, - resultMap.cmsContent.CityQuestionWidget, - resultMap.cmsContent.StateQuestionWidget, - resultMap.cmsContent.ZipQuestionWidget, - resultMap.cmsContent.AlertVerificationWarningWidget, - resultMap.cmsContent.AlertNoMatchWarningWidget, - resultMap.cmsContent.FirstNameQuestionWidget, - resultMap.cmsContent.LastNameQuestionWidget, - resultMap.cmsContent.EmailAddressQuestionWidget, - - ] - ); + vm.setCmsContent(resultMap.cmsContent); }); }, data() { return { customerQuestions: { addressQuestions: { - streetAddress: "", - city: "", - state: "", - zip: "", + streetAddress: this.getRegistrationAddressFromStore(), + city: this.getRegistrationCityFromStore(), + state: this.getRegistrationStateFromStore(), + zip: this.getRegistrationZipFromStore(), }, - firstName: "", - lastName: "", - emailAddress: "", - } + firstName: this.getRegistrationFirstNameFromStore(), + lastName: this.getRegistrationLastNameFromStore(), + emailAddress: this.getEmailFromStore(), + }, + serviceZip: this.getServiceZipFromStore(), + displayNonServiceableZipAlert: false, + displayVinNotFoundAlert: false, + displayMatchedDifferentVehicleAlert: false, + displayVinLookupByHomeAddressNotAllowedAlert: false, + previousCarIdFound: "", + customAlertData: {}, } }, methods: { @@ -100,9 +135,220 @@ export default { return store.getters.vehicle.carId !== null; }, resetDependentState() { - // Invokes + store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, null); + store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES); + }, + backButtonAction() { + // route to move backwards + this.$router.navigate( + this.navigationScenarios.CLICKED_BACK, + this.$route + ); + }, + getRegistrationAddressFromStore() { + return store.getters.vehicle.registration.address; + }, + getRegistrationCityFromStore() { + return store.getters.vehicle.registration.city; + }, + getRegistrationStateFromStore() { + return store.getters.vehicle.registration.state; + }, + getRegistrationZipFromStore() { + return store.getters.vehicle.registration.zipCode; + }, + getRegistrationFirstNameFromStore() { + return store.getters.vehicle.registration.firstName; + }, + getRegistrationLastNameFromStore() { + return store.getters.vehicle.registration.lastName; + }, + getEmailFromStore() { + return store.getters.order.customer.emailAddress; + }, + getServiceZipFromStore() { + return store.getters.order.serviceLocation.zip; + }, + async forwardButtonAction() { + this.resetWarningsAndErrors(); + + // Lookup VIN(s) with the provided address + const vinLookup = await this.lookupVin( + this.customerQuestions.lastName, + this.customerQuestions.addressQuestions.streetAddress, + this.customerQuestions.addressQuestions.zip, + this.customerQuestions.addressQuestions.state + ); + + if (!vinLookup.data.isStatePermissible) { + // State Restrictions forbid lookup by address + this.displayVinLookupByHomeAddressNotAllowedAlert = true; + this.$refs.funnelFooter.removeLoader(); + return; + } + + // Validate if the original or service zip provided is serviceable + const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.customerQuestions.addressQuestions.zip); + if (!zipValidation.data.isServiceable) { + this.displayNonServiceableZipAlert = true; + this.showServiceZipField = true; + this.$refs.funnelFooter.removeLoader(); + } + + const carEntered = store.getters.vehicle; + const carsFound = vinLookup.data.vinVehicles; + if (carsFound.length == 0) { + // No VINs found + this.displayVinNotFoundAlert = true; + this.$refs.funnelFooter.removeLoader(); + return; + } else if (carsFound.length == 1) { + var carFound = carsFound[0].vehicle; + + if (carEntered.carId == carFound.carId || carFound.carId == this.previousCarIdFound) { + // update data + this.updateVehicleInfo(carFound.vin, carFound); + this.updateCustomerInfo(); + + // navigate forward + this.navigateForward(carEntered, carsFound); + } else { + // Display Alert + this.customAlertData.vehicleInfo = carFound; + this.displayMatchedDifferentVehicleAlert = true; + + // Update button "Continue with..." + this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`); + this.$refs.funnelFooter.removeLoader(); + } + + this.previousCarIdFound = carFound.carId; + + } else if (vinLookup.data.vinVehicles.length > 1) { + this.updateCustomerInfo(); + + // navigate forward + this.navigateForward(carEntered, carsFound); + } + }, + resetWarningsAndErrors() { + this.displayVinNotFoundAlert = false; + this.displayNonServiceableZipAlert = false; + this.displayMatchedDifferentVehicleAlert = false; + this.displayVinLookupByHomeAddressNotAllowedAlert = false; + }, + async navigateForward(carEntered, carsFound) { + if (carsFound.length == 1) { + // get the damage options for the car that was found + const carFound = carsFound[0].vehicle; + const glassOptions = await baseMixin.methods.dispatchNonBlockingStoreAction( + storeActions.GET_DAMAGE_OPTIONS, + { carId: carFound.carId } + ); + + // if the car entered is the same as the car found OR the glass options for the found car match the users damage selections + if (carEntered.carId == carFound.carId || isGlassAvailableForCarId(carFound.carId)) { + navigateAfterSaveToHeritageFunnel(this.$route); + } else { + // if not then navigate to the "vehicle-damage" page + this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, {}); + } + } else if (carsFound.length > 1) { + // if multiple cars were found + if (carsFound.find(car => car.carId === carEntered.carId)) { + // and one of them matches the car id entered + navigateAfterSaveToHeritageFunnel(this.$route); + } else { + // and there is no match, navigate to "address-vehicle" page + this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound); + } + } + + }, + validateZip(zip) { + return baseMixin.methods.dispatchNonBlockingStoreAction( + storeActions.VALIDATE_ZIP, + { zip }); + }, + lookupVin(lastName, streetAddress, zip, state) { + return baseMixin.methods.dispatchNonBlockingStoreAction( + storeActions.LOOKUP_VIN_BY_ADDRESS, + { + licenseLastName: lastName, + licenseStreetAddress: streetAddress, + licenseZip: zip, + licenseState: state + }, false + ); + }, + updateVehicleInfo(vin, vehicleInfo) { + store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin); + store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year); + store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make); + store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model); + store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style); + store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId); + store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor); + }, + updateCustomerInfo() { + store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, this.customerQuestions.addressQuestions.streetAddress); + store.commit(storeMutations.UPDATE_REGISTRATION_CITY, this.customerQuestions.addressQuestions.city); + store.commit(storeMutations.UPDATE_REGISTRATION_STATE, this.customerQuestions.addressQuestions.state); + store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zipCode); + store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName); + store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName); + store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.serviceZip); + store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.email); + }, + + }, + computed: { + AlertNonServiceableZipHeader(){ + let zip = this.serviceZip ? this.serviceZip : this.customerQuestions.addressQuestions.zip; + let text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zip); + return text; + }, + AlertNonServiceableZipBody(){ + return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText"); + }, + AlertMatchedDifferentVehicleHeader(){ + let text = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:glassText}", getDamageString()); + return text; + }, + AlertMatchedDifferentVehicleBody(){ + let content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText"); + content = content.replaceAll("{custom:glassText}", getDamageString()); + let vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; + let vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`; + + content = content.replaceAll("{custom:vinYmmFound}", vinYmmFound); + content = content.replaceAll("{custom:vinYmmExpected}", vinYmmExpected); + + return content; + }, + }, + watch: { + customerQuestions: { + handler(newValue) { + // if they modify one of the lookup fields (address, city, state, zip, or lastName), then modify the button text back to “Get my personalized quote” + this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")); + this.showServiceZipField = false; + this.resetWarningsAndErrors(); + }, + deep: true + }, + serviceZip: { + handler(newValue) { + // if they modify the service zip, then hide the error message” + this.displayNonServiceableZipAlert = false; + }, + } + }, components: { funnelHeader, @@ -110,6 +356,8 @@ export default { vehicleBanner, funnelSubHeader, customerQuestions, + textboxQuestion, + alert, Form }, }; diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue index 0954caf34..4a772e468 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue @@ -1,36 +1,34 @@ @@ -41,17 +39,17 @@ import textboxQuestion from "@/common-components/textbox-question/textbox-questi import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question"; import alert from "@/ux-components/alert/alert"; import { applicationConfig } from "@/constants/application-config.js"; -import { computed } from 'vue'; import { defineRule } from "vee-validate"; import { required } from "@/helpers/validation-rules"; +import { regex } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; -//import store from "@/store"; // DEFINE VALIDATION RULES defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED)); defineRule("city-required", required(errorMessages.CITY_REQUIRED)); defineRule("state-required", required(errorMessages.STATE_REQUIRED)); defineRule("zip-required", required(errorMessages.ZIP_REQUIRED)); +defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT)); export default ({ name: "address-questions", @@ -67,19 +65,7 @@ export default ({ }), }, validationRules: String, - }, - setup(props, { emit }) { - // Please do not modify, this "computed" is used to track and report - // this object's property changes to the parent component - const addressModel = computed({ // Use computed to wrap the object - get: () => props.modelValue, - set: (value) => emit('update:modelValue', value), - }); - - return { - addressModel, - }; - }, + }, data() { return { showAddressFields: false, @@ -148,128 +134,130 @@ export default ({ 'WY': 'Wyoming', } } - } + }, + addressModel: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, }, methods: { - initializeComponent(cmsContent) { - this.$refs.autocomplete.initializeComponent(cmsContent[0].QuestionText); - this.$refs.city.initializeComponent(cmsContent[1].QuestionText); - this.$refs.state.initializeComponent(cmsContent[2].QuestionText); - this.$refs.zip.initializeComponent(cmsContent[3].QuestionText); + setupAddressLookup() { + const addressField1 = document.getElementById("autocomplete"); + const self = this; - // assign alert texts to this component - this.alertHeadlineVerificationWarning = cmsContent[4].HeadlineText; - this.alertCopyVerificationWarning = cmsContent[4].BodyText; + const apiKey = applicationConfig.GOOGLE_PLACES_API_KEY; - this.alertHeadlineNoMatchWarning = cmsContent[5].HeadlineText; - this.alertCopyNoMatchWarning = cmsContent[5].BodyText; + this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`) + .then(() => { + // Script is loaded, initialize the autocomplete textbox + const autocomplete = new window.google.maps.places.Autocomplete( + addressField1, + { + componentRestrictions: { country: ["us"] }, + fields: ["address_components"], + types: ["geocode"], + } + ); + + // Standard place_changed event handling + autocomplete.addListener('place_changed', fillInAddress); + + addressField1.onblur = function() { + const hover = document.querySelector(".pac-container .pac-item:hover"); + // if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place + if (hover === null) { + const item = document.querySelector(".pac-container .pac-item"); + if (item != null) { + const firstResult = item.textContent; + const geocoder = new window.google.maps.Geocoder(); + geocoder.geocode({ + address: firstResult + }, function (results, status) { + if (status === window.google.maps.GeocoderStatus.OK) { + fillInAddress(results[0]); + self.displayVerificationWarning = true; + self.displayNoMatchWarning = false; + } + }); + } + else { + self.addressModel.city = ""; + self.addressModel.state = ""; + self.addressModel.zip = ""; + self.showAddressFields = true; + self.displayVerificationWarning = false; + self.displayNoMatchWarning = true; + } + } + }; + + function fillInAddress(place) { + if (!place) { + place = autocomplete.getPlace(); + } + + if (place && place.address_components) { + self.addressModel.streetAddress= ""; + self.showAddressFields = true; + + for (const component of place.address_components) { + const componentType = component.types[0]; + + switch (componentType) { + case "street_number": { + self.addressModel.streetAddress = component.long_name; + break; + } + case "route": { + self.addressModel.streetAddress += ' ' + component.short_name; + break; + } + case "locality": { + self.addressModel.city = component.long_name; + break; + } + case "administrative_area_level_1": { + self.addressModel.state = component.short_name; + break; + } + case "postal_code": { + self.addressModel.zip = component.long_name; + break; + } + + } + } + + self.displayVerificationWarning = false; + self.displayNoMatchWarning = false; + } + else { + self.displayVerificationWarning = true; + self.displayNoMatchWarning = false; + } + } + }) + .catch(() => { + // Failed to fetch script + console.log("Unable to load Google Places API script"); + }); } }, mounted() { - - const addressField1 = document.getElementById("autocomplete"); - const self = this; - - const apiKey = applicationConfig.GOOGLE_PLACES_API_KEY; - - this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`) - .then(() => { - // Script is loaded, initialize the autocomplete textbox - const autocomplete = new window.google.maps.places.Autocomplete( - addressField1, - { - componentRestrictions: { country: ["us"] }, - fields: ["address_components"], - types: ["address"], - } - ); - - // Standard place_changed event handling - autocomplete.addListener('place_changed', fillInAddress); - - addressField1.onblur = function() { - const hover = document.querySelector(".pac-container .pac-item:hover"); - - // if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place - if (hover === null) { - const item = document.querySelector(".pac-container .pac-item"); - if (item != null) { - const firstResult = item.textContent; - const geocoder = new window.google.maps.Geocoder(); - geocoder.geocode({ - address: firstResult - }, function (results, status) { - if (status === window.google.maps.GeocoderStatus.OK) { - fillInAddress(results[0]); - self.displayVerificationWarning = true; - self.displayNoMatchWarning = false; - } - }); - } - else { - self.addressModel.city = ""; - self.addressModel.state = ""; - self.addressModel.zip = ""; - self.showAddressFields = true; - self.displayVerificationWarning = false; - self.displayNoMatchWarning = true; - } - - - } - }; - - function fillInAddress(place) { - if (!place) { - place = autocomplete.getPlace(); - } - - if (place && place.address_components) { - self.addressModel.streetAddress= ""; - self.showAddressFields = true; - - for (const component of place.address_components) { - const componentType = component.types[0]; - - switch (componentType) { - case "street_number": { - self.addressModel.streetAddress = component.long_name; - break; - } - case "route": { - self.addressModel.streetAddress += ' ' + component.short_name; - break; - } - case "locality": { - self.addressModel.city = component.long_name; - break; - } - case "administrative_area_level_1": { - self.addressModel.state = component.short_name; - break; - } - case "postal_code": { - self.addressModel.zip = component.long_name; - break; - } - - } - } - - self.displayVerificationWarning = false; - self.displayNoMatchWarning = false; - } - else { - self.displayVerificationWarning = true; - self.displayNoMatchWarning = false; - } - } - }) - .catch(() => { - // Failed to fetch script - console.log("Unable to load Google Places API script"); - }); + this.setupAddressLookup(); }, + watch: { + addressModel: { + handler(newValue){ + this.displayNoMatchWarning = false; + }, + deep: true + } + }, components: { textboxQuestion, dropdownQuestion, diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue index 7fa324f91..e1c505c9e 100644 --- a/src/layouts/address-lookup/customer-questions/customer-questions.vue +++ b/src/layouts/address-lookup/customer-questions/customer-questions.vue @@ -1,18 +1,18 @@ @@ -20,12 +20,10 @@