Merge pull request #374 from Safelite/feature/CSR-104
Feature/csr 104 - WIP
This commit is contained in:
Leah Schumann
GitHub
commit
3aab06adc8
17 changed files with 994 additions and 290 deletions
|
|
@ -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)"],
|
||||
|
|
|
|||
|
|
@ -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 "Question 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 = "Question 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')
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 "Question 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 = "Question 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");
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
@ -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 };
|
||||
}
|
||||
|
|
@ -5,15 +5,54 @@
|
|||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
autocomplete="off" >
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
|
||||
<funnelSubHeader ref="funnelSubHeader" />
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
|
||||
<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
|
||||
<alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert"
|
||||
class="my-3"
|
||||
cmsWidgetName="AlertVinNotFoundWidget"
|
||||
alertClass="alert-danger"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert"
|
||||
class="my-3"
|
||||
:manualHeadline="AlertMatchedDifferentVehicleHeader"
|
||||
:manualCopy="AlertMatchedDifferentVehicleBody"
|
||||
alertClass="alert-warning"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert"
|
||||
class="my-3"
|
||||
alertClass="alert-danger"
|
||||
:manualHeadline="AlertNonServiceableZipHeader"
|
||||
:manualCopy="AlertNonServiceableZipBody"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert"
|
||||
class="my-3"
|
||||
cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
|
||||
alertClass="alert-danger"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<transition name="fade" mode="out-in">
|
||||
<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZip" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<funnel-footer
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="funnelFooter"
|
||||
:isDisabled="!meta.valid"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
|
@ -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
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,36 +1,34 @@
|
|||
<template>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="addressModel.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill validationRules="street-address-required" />
|
||||
<textboxQuestion cmsWidgetName="StreetAddressQuestionWidget" v-model="addressModel.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill validationRules="street-address-required" />
|
||||
</div>
|
||||
</div>
|
||||
<transition name="fade" mode="out-in">
|
||||
<div class="address-fields" v-show="showAddressFields" aria-live="polite">
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="addressModel.city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill validationRules="city-required"/>
|
||||
</div>
|
||||
<div class="row my-4" v-show="showAddressFields" aria-live="polite">
|
||||
<div class="col">
|
||||
<textboxQuestion cmsWidgetName="CityQuestionWidget" v-model="addressModel.city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill validationRules="city-required"/>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col-6">
|
||||
<dropdownQuestion v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<textboxQuestion v-model="addressModel.zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-required"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade" mode="out-in">
|
||||
<div class="row my-4" v-show="showAddressFields" aria-live="polite">
|
||||
<div class="col">
|
||||
<dropdownQuestion cmsWidgetName="StateQuestionWidget" v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<textboxQuestion cmsWidgetName="ZipQuestionWidget" v-model="addressModel.zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-required|zip-format"/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
|
||||
cmsWidgetName="AlertVerificationWarningWidget"
|
||||
alertClass="alert-warning"
|
||||
:alertHeadline="alertHeadlineVerificationWarning"
|
||||
:alertCopy="alertCopyVerificationWarning"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
|
||||
cmsWidgetName="AlertNoMatchWarningWidget"
|
||||
alertClass="alert-warning"
|
||||
:alertHeadline="alertHeadlineNoMatchWarning"
|
||||
:alertCopy="alertCopyNoMatchWarning"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
|
||||
<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" :alertNotifications="alertNotifications" />
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="customerModel.firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill validationRules="first-name-required" />
|
||||
<textboxQuestion cmsWidgetName="FirstNameQuestionWidget" v-model="customerModel.firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill validationRules="first-name-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="customerModel.lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill validationRules="last-name-required" />
|
||||
<textboxQuestion cmsWidgetName="LastNameQuestionWidget" v-model="customerModel.lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill validationRules="last-name-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="customerModel.emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill validationRules="email-address-required|email-address-format"/>
|
||||
<textboxQuestion cmsWidgetName="EmailAddressQuestionWidget" v-model="customerModel.emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill validationRules="email-address-required|email-address-format"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -20,12 +20,10 @@
|
|||
<script>
|
||||
import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
|
||||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||
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("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
|
||||
|
|
@ -33,8 +31,6 @@ defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
|
|||
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
|
||||
defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
|
||||
|
||||
//EMAIL_ADDRESS_FORMAT
|
||||
|
||||
export default ({
|
||||
name: "customer-questions",
|
||||
emits: ['update:modelValue'], // The component emits an event
|
||||
|
|
@ -55,30 +51,10 @@ export default ({
|
|||
}
|
||||
}),
|
||||
},
|
||||
validationRules: String,
|
||||
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 customerModel = computed({ // Use computed to wrap the object
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value),
|
||||
});
|
||||
|
||||
return { customerModel };
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent){
|
||||
// pass alert texts to addressQuestions component
|
||||
this.$refs.addressQuestions.initializeComponent(cmsContent);
|
||||
|
||||
this.$refs.firstName.initializeComponent(cmsContent[6].QuestionText);
|
||||
this.$refs.lastName.initializeComponent(cmsContent[7].QuestionText);
|
||||
this.$refs.emailAddress.initializeComponent(cmsContent[8].QuestionText);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
value: {
|
||||
customerModel: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -302,6 +302,12 @@ export default {
|
|||
return;
|
||||
}
|
||||
|
||||
// Temporary easter egg to navigate to address-lookup.
|
||||
if (store.getters.vehicle.year === 2014) {
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.TEMPORARY_TO_ADDRESS_LOOKUP, this.$route, {}, {}, partsData.data);
|
||||
return;
|
||||
}
|
||||
|
||||
// If vin already exists, navigate directly to vin-lookup
|
||||
if(this.$store.getters.vehicle.vin){
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@ const navigationScenarios = {
|
|||
SELECTED_DAMAGE_WITH_PART_QUESTIONS: "SELECTED_DAMAGE_WITH_PART_QUESTIONS",
|
||||
CONTINUING_WITH_PARTS_QUESTION: "CONTINUING_WITH_PARTS_QUESTION",
|
||||
CONTINUING_WITH_MULTIPLE_PARTS: "CONTINUING_WITH_MULTIPLE_PARTS",
|
||||
CONTINUING_WITH_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART"
|
||||
CONTINUING_WITH_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART",
|
||||
CONTINUING_WITH_MULTIPLE_VEHICLES: "CONTINUING_WITH_MULTIPLE_VEHICLES",
|
||||
TEMPORARY_TO_ADDRESS_LOOKUP: "TEMPORARY_TO_ADDRESS_LOOKUP",
|
||||
};
|
||||
|
||||
export { navigationScenarios };
|
||||
|
|
|
|||
|
|
@ -73,6 +73,10 @@ const routingTable = [
|
|||
scenario: navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS,
|
||||
destinationFmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP,//This might be temporary
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.TEMPORARY_TO_ADDRESS_LOOKUP,
|
||||
destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP, //This will be temporary
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -147,6 +151,23 @@ const routingTable = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.ESTIMATE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES,
|
||||
destinationFmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export { routingTable };
|
||||
|
|
|
|||
|
|
@ -138,8 +138,8 @@ export const mutations = {
|
|||
updateRegistrationState(state, registrationState){
|
||||
state.order.vehicle.registration.state = registrationState;
|
||||
},
|
||||
updateRegistrationZipCode(state, reistrationZipCode){
|
||||
state.order.vehicle.registration.zipCode = reistrationZipCode;
|
||||
updateRegistrationZipCode(state, registrationZipCode){
|
||||
state.order.vehicle.registration.zipCode = registrationZipCode;
|
||||
},
|
||||
updateRegistrationAddress(state, registrationAddress){
|
||||
state.order.vehicle.registration.address = registrationAddress;
|
||||
|
|
@ -147,14 +147,14 @@ export const mutations = {
|
|||
updateServiceLocationZip(state, serviceLocationZip){
|
||||
state.order.serviceLocation.zip = serviceLocationZip;
|
||||
},
|
||||
updateRegistrationCity(state, serviceCity){
|
||||
state.order.serviceLocation.city = serviceCity;
|
||||
updateRegistrationCity(state, registrationCity){
|
||||
state.order.vehicle.registration.city = registrationCity;
|
||||
},
|
||||
updateRegistrationFirstName(state, firstName){
|
||||
state.order.serviceLocation.firstName = firstName;
|
||||
state.order.vehicle.registration.firstName = firstName;
|
||||
},
|
||||
updateRegistrationLastName(state, lastName){
|
||||
state.order.serviceLocation.lastName = lastName;
|
||||
state.order.vehicle.registration.lastName = lastName;
|
||||
},
|
||||
updateCustomerEmailAddress(state, customerEmailAddress){
|
||||
state.order.customer.emailAddress = customerEmailAddress;
|
||||
|
|
@ -298,6 +298,18 @@ export const actions = {
|
|||
},
|
||||
});
|
||||
},
|
||||
lookupVinByAddress(context, { licenseLastName, licenseStreetAddress, licenseZip, licenseState }) {
|
||||
return globalMethods.callHttpClient({
|
||||
method: endpoints.LookupVinByAddress.method,
|
||||
endpoint: endpoints.LookupVinByAddress.url,
|
||||
payload: {
|
||||
licenseLastName: licenseLastName,
|
||||
licenseStreetAddress: licenseStreetAddress,
|
||||
licenseZip: licenseZip,
|
||||
licenseState: licenseState
|
||||
},
|
||||
});
|
||||
},
|
||||
getVehicleMakes(context, { year }) {
|
||||
return globalMethods.callHttpClient({
|
||||
method: endpoints.GetVehicleMakes.method,
|
||||
|
|
|
|||
Loading…
Reference in a new issue