Merge branch 'release/2026.08.13' into feature/CASH-1524
This commit is contained in:
credelinghuys
commit
9d2322e079
48 changed files with 2399 additions and 738 deletions
|
|
@ -32,6 +32,7 @@ const errorMessages = {
|
|||
DATE_REQUIRED: "Please select a date",
|
||||
PHONE_REQUIRED: "Please enter your phone number",
|
||||
PHONE_FORMAT: "Phone number must be 10 digits",
|
||||
PHONE_EXTENSION_FORMAT: "The specified extension is invalid",
|
||||
SMS_CONSENT_REQUIRED_1: "Please select checkbox to receive text messages",
|
||||
SMS_CONSENT_REQUIRED_2: "Please select at least one consent option",
|
||||
YEAR_REQUIRED: "Please select your vehicle year",
|
||||
|
|
|
|||
|
|
@ -66,6 +66,9 @@ const experimentSettings = {
|
|||
|
||||
// YMM
|
||||
BAILOUT_VIN_REQUIRED_VEHICLES: "BailoutVINRequiredVehicles",
|
||||
|
||||
// Promo Banner
|
||||
SHOW_PROMO_BANNER: "ShowQuotePageRegionalPromoBanner",
|
||||
};
|
||||
|
||||
const experimentTriggers = {
|
||||
|
|
|
|||
|
|
@ -114,11 +114,9 @@
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<loader
|
||||
class="date-picker-loader"
|
||||
:class="[loadingStatus !== 'none' ? 'show-loader' : '']"
|
||||
loaderColor="blue"
|
||||
loaderPosition="center" />
|
||||
<div v-if="loadingStatus !== 'none'" class="date-picker-loader">
|
||||
<loader loaderColor="blue" loaderPosition="center" />
|
||||
</div>
|
||||
<div class="row form-test-error" id="date-of-month-error">
|
||||
<ErrorMessage :name="customComponentId" class="small mt-1"></ErrorMessage>
|
||||
</div>
|
||||
|
|
@ -742,15 +740,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.date-picker-loader {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
|
||||
&.show-loader {
|
||||
opacity: 1;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
.date-picker {
|
||||
position: relative;
|
||||
flex-grow: 0;
|
||||
|
|
@ -769,13 +758,20 @@ export default {
|
|||
font-family: UrbanistSemiBold;
|
||||
}
|
||||
}
|
||||
.loader {
|
||||
height: 2rem;
|
||||
width: calc(100% - 1.5rem);
|
||||
.date-picker-loader {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
&::after {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
:deep(.loader) {
|
||||
height: 2rem;
|
||||
width: calc(100% - 1.5rem);
|
||||
|
||||
&::after {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.month {
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
:id="modalId + '-modalbtn'"
|
||||
ref="modalButtonMain"
|
||||
loaderColor="white"
|
||||
loaderPosition="center"
|
||||
:isDisabled="footerButtonDisabled"
|
||||
:buttonText="footerButtonText"
|
||||
@click-event="validateAndEmit"
|
||||
|
|
|
|||
|
|
@ -36,48 +36,6 @@ describe("modal-button-main.vue", () => {
|
|||
expect(button.attributes()["aria-disabled"]).toEqual("true");
|
||||
});
|
||||
|
||||
it("Should return loader color", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
loaderEnabled: true,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
// Act
|
||||
wrapper.vm.clicked();
|
||||
await nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.find("loader-stub");
|
||||
expect(loader.attributes("class")).toContain("blue");
|
||||
});
|
||||
|
||||
it("Should return loader position", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
loaderEnabled: true,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
// Act
|
||||
wrapper.vm.clicked();
|
||||
await nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.find("loader-stub");
|
||||
expect(loader.attributes("class")).toContain("right");
|
||||
});
|
||||
|
||||
it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
@click="clicked">
|
||||
<span class="m-0">{{ this.buttonText }}</span>
|
||||
<loader
|
||||
class="ms-2"
|
||||
v-if="isLoaderDisplayed && !suppressLoader"
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]" />
|
||||
:loaderColor="loaderColor"
|
||||
:loaderPosition="loaderPosition" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -109,11 +109,11 @@ describe("Question Chain component", () => {
|
|||
expect(wrapper.emitted()).not.toHaveProperty("update:modelValue");
|
||||
});
|
||||
|
||||
test("should NOT emit update:modelValue if returnedAnswer contains 'nextQuestion'", () => {
|
||||
test("should not emit update:modelValue for nextQuestion during normal forward progress", () => {
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
const testQuestion = {};
|
||||
const testReturnedAnswer = "1|nextQuestion|DB10840|No";
|
||||
const testReturnedAnswer = "1|nextQuestion|3|No";
|
||||
|
||||
//Act
|
||||
wrapper.vm.handleAnswer(testQuestion, testReturnedAnswer);
|
||||
|
|
@ -121,6 +121,24 @@ describe("Question Chain component", () => {
|
|||
//Assert
|
||||
expect(wrapper.emitted()).not.toHaveProperty("update:modelValue");
|
||||
});
|
||||
|
||||
test("should emit update:modelValue for nextQuestion when revising a saved answer", async () => {
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
await wrapper.setProps({ hasSavedAnswer: true });
|
||||
const testQuestion = {};
|
||||
const testReturnedAnswer = "1|nextQuestion|3|No";
|
||||
|
||||
//Act
|
||||
wrapper.vm.handleAnswer(testQuestion, testReturnedAnswer);
|
||||
|
||||
//Assert
|
||||
expect(wrapper.emitted()).toHaveProperty("update:modelValue");
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toMatchObject({
|
||||
incomplete: true,
|
||||
index: 0,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("method getQuestionChainAnswerIfComplete...", () => {
|
||||
|
|
@ -213,33 +231,158 @@ describe("Question Chain component", () => {
|
|||
wrapper.vm.getQuestionChainAnswerIfComplete(testReturnedAnswer);
|
||||
|
||||
//Assert
|
||||
expect(wrapper.vm.questions[1].answerSelected).toBeUndefined;
|
||||
expect(wrapper.vm.questions[1].answerSelected).toBeUndefined();
|
||||
});
|
||||
|
||||
test("should return false if returnedAnswer is a nextQuestion (not a final answer)", async () => {
|
||||
test("should follow the No path and show the next question when changing Q1 from Yes to No", async () => {
|
||||
const { wrapper } = setupMocks({
|
||||
questionDataProp: [
|
||||
{
|
||||
questionSequence: 1,
|
||||
questionText: "Is this the Overland edition?",
|
||||
answers: [
|
||||
{
|
||||
answerResult: null,
|
||||
answerText: "Yes",
|
||||
nextQuestionSequence: 2,
|
||||
},
|
||||
{
|
||||
answerResult: null,
|
||||
answerText: "No",
|
||||
nextQuestionSequence: 5,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
questionSequence: 2,
|
||||
questionText: "Rain sensing wipers?",
|
||||
answers: [
|
||||
{ answerResult: "PART-A", answerText: "Yes", nextQuestionSequence: 3 },
|
||||
{ answerResult: "PART-B", answerText: "No", nextQuestionSequence: 3 },
|
||||
],
|
||||
answerSelected: "2|answer|PART-A|Yes",
|
||||
},
|
||||
{
|
||||
questionSequence: 3,
|
||||
questionText: "Laminated door glass?",
|
||||
answers: [
|
||||
{
|
||||
answerResult: "PART-C",
|
||||
answerText: "Yes",
|
||||
nextQuestionSequence: null,
|
||||
},
|
||||
{
|
||||
answerResult: "PART-D",
|
||||
answerText: "No",
|
||||
nextQuestionSequence: null,
|
||||
},
|
||||
],
|
||||
answerSelected: "3|answer|PART-C|Yes",
|
||||
},
|
||||
{
|
||||
questionSequence: 5,
|
||||
questionText: "Factory installed antenna?",
|
||||
answers: [
|
||||
{
|
||||
answerResult: "PART-E",
|
||||
answerText: "Yes",
|
||||
nextQuestionSequence: null,
|
||||
},
|
||||
{
|
||||
answerResult: "PART-F",
|
||||
answerText: "No",
|
||||
nextQuestionSequence: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
await wrapper.setProps({ index: 0 });
|
||||
|
||||
const result = wrapper.vm.getQuestionChainAnswerIfComplete("1|nextQuestion|5|No");
|
||||
|
||||
expect(result.incomplete).toBe(true);
|
||||
expect(wrapper.vm.questions[1].answerSelected).toBeUndefined();
|
||||
expect(wrapper.vm.questions[2].answerSelected).toBeUndefined();
|
||||
expect(wrapper.vm.currentQuestionNum).toBe(5);
|
||||
expect(result.answeredQuestions).toHaveLength(1);
|
||||
expect(result.answeredQuestions[0].selectedAnswerText).toBe("No");
|
||||
});
|
||||
|
||||
test("should return incomplete answer if returnedAnswer is a nextQuestion (not a final answer)", async () => {
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
const testReturnedAnswer = "1|nextQuestion|DB10840|No";
|
||||
const testReturnedAnswer = "1|nextQuestion|3|No";
|
||||
|
||||
//Act
|
||||
const result = wrapper.vm.getQuestionChainAnswerIfComplete(testReturnedAnswer);
|
||||
|
||||
//Assert
|
||||
expect(result).toBeFalsy();
|
||||
expect(result).toMatchObject({
|
||||
incomplete: true,
|
||||
index: 0,
|
||||
});
|
||||
});
|
||||
|
||||
test("should trigger scroll to .current-question if returnedAnswer is a nextQuestion (not a final answer)", async () => {
|
||||
test("should defer scroll until after the next question fade enters", async () => {
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
const testReturnedAnswer = "1|nextQuestion|DB10840|No";
|
||||
const { wrapper } = setupMocks({
|
||||
questionDataProp: [
|
||||
{
|
||||
questionSequence: 1,
|
||||
questionText: "Question 1?",
|
||||
answers: [
|
||||
{
|
||||
answerResult: "",
|
||||
answerText: "Yes",
|
||||
nextQuestionSequence: 3,
|
||||
},
|
||||
{
|
||||
answerResult: "DB10840",
|
||||
answerText: "No",
|
||||
nextQuestionSequence: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
questionSequence: 3,
|
||||
questionText: "Question 3?",
|
||||
answers: [
|
||||
{
|
||||
answerResult: "DB09410",
|
||||
answerText: "Yes",
|
||||
nextQuestionSequence: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
await nextTick();
|
||||
const testReturnedAnswer = "1|nextQuestion|3|No";
|
||||
const scrollSpy = jest.spyOn(wrapper.vm, "scrollCurrentQuestionIntoView");
|
||||
|
||||
//Act
|
||||
wrapper.vm.getQuestionChainAnswerIfComplete(testReturnedAnswer);
|
||||
const nextQuestion = wrapper.vm.questions.find((q) => q.questionSequence === 3);
|
||||
|
||||
await nextTick();
|
||||
//Assert — advancing via nextQuestion no longer scrolls immediately
|
||||
expect(scrollSpy).not.toHaveBeenCalled();
|
||||
expect(wrapper.vm.currentQuestionNum).toBe(3);
|
||||
expect(wrapper.vm.isCurrentQuestion(nextQuestion)).toBe(true);
|
||||
|
||||
//Assert
|
||||
expect(Element.prototype.scrollIntoView).toHaveBeenCalled();
|
||||
wrapper.vm.onQuestionEnter(nextQuestion);
|
||||
|
||||
expect(scrollSpy).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test("should not scroll onQuestionEnter for a non-current question", () => {
|
||||
const { wrapper } = setupMocks({});
|
||||
const scrollSpy = jest.spyOn(wrapper.vm, "scrollCurrentQuestionIntoView");
|
||||
const answeredQuestion = wrapper.vm.questions[0];
|
||||
|
||||
wrapper.vm.onQuestionEnter(answeredQuestion);
|
||||
|
||||
expect(scrollSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("should return answer object if returnedAnswer is a final matching answer", async () => {
|
||||
|
|
@ -323,9 +466,227 @@ describe("Question Chain component", () => {
|
|||
expect(wrapper.vm.questions[0].answers[0].problemQuestionId).toBe(9531);
|
||||
expect(wrapper.vm.questions[0].answers[1].problemQuestionId).toBe(9529);
|
||||
});
|
||||
|
||||
test("should normalize uppercase answerSelected to match button value on created", async () => {
|
||||
const { wrapper } = setupMocks({
|
||||
questionDataProp: [
|
||||
{
|
||||
questionSequence: 1,
|
||||
questionText: "Is your vehicle equipped with rain sensing wipers?",
|
||||
answerSelected: "1|ANSWER|DW01705|YES",
|
||||
answers: [
|
||||
{
|
||||
answerResult: "DW01705",
|
||||
answerText: "Yes",
|
||||
nextQuestionSequence: null,
|
||||
},
|
||||
{
|
||||
answerResult: "DW01591",
|
||||
answerText: "No",
|
||||
nextQuestionSequence: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.questions[0].answerSelected).toBe("1|answer|DW01705|Yes");
|
||||
});
|
||||
test("should show question 3 after answering No on Cherokee Overland question", async () => {
|
||||
const { wrapper } = setupMocks({
|
||||
questionDataProp: getCherokeeWindshieldQuestions(),
|
||||
});
|
||||
await nextTick();
|
||||
|
||||
const q1 = wrapper.vm.questions[0];
|
||||
wrapper.vm.handleAnswer(q1, "1|nextQuestion|3|No");
|
||||
|
||||
expect(wrapper.vm.currentQuestionNum).toBe(3);
|
||||
expect(
|
||||
wrapper.vm.questions.filter((question) => wrapper.vm.isQuestionVisible(question))
|
||||
).toEqual(
|
||||
expect.arrayContaining([
|
||||
expect.objectContaining({ questionSequence: 1 }),
|
||||
expect.objectContaining({ questionSequence: 3 }),
|
||||
])
|
||||
);
|
||||
expect(
|
||||
wrapper.vm.questions.filter((question) => wrapper.vm.isQuestionVisible(question))
|
||||
).not.toEqual(
|
||||
expect.arrayContaining([expect.objectContaining({ questionSequence: 2 })])
|
||||
);
|
||||
});
|
||||
|
||||
test("should resume at question 3 after remount when Q1 No was already saved", async () => {
|
||||
const questionDataProp = getCherokeeWindshieldQuestions();
|
||||
questionDataProp[0].answerSelected = "1|nextQuestion|3|No";
|
||||
|
||||
const { wrapper } = setupMocks({ questionDataProp });
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.currentQuestionNum).toBe(3);
|
||||
expect(wrapper.vm.isQuestionVisible(wrapper.vm.questions[2])).toBe(true);
|
||||
});
|
||||
|
||||
test("should resolve on Q1 Yes and not show Q2 for Honda HUD question", async () => {
|
||||
const { wrapper } = setupMocks({
|
||||
questionDataProp: getHondaAccordWindshieldQuestions(),
|
||||
});
|
||||
await nextTick();
|
||||
|
||||
const q1 = wrapper.vm.questions[0];
|
||||
wrapper.vm.handleAnswer(q1, "1|answer|FW04796|Yes");
|
||||
|
||||
expect(wrapper.emitted()["update:modelValue"][0][0]).toMatchObject({
|
||||
answerResult: "FW04796",
|
||||
index: 0,
|
||||
});
|
||||
expect(wrapper.vm.currentQuestionNum).toBe(0);
|
||||
expect(wrapper.vm.isQuestionVisible(wrapper.vm.questions[1])).toBe(false);
|
||||
});
|
||||
|
||||
test("should resolve on Q3 No and not continue after remount", async () => {
|
||||
const questionDataProp = getHondaAccordWindshieldQuestions();
|
||||
questionDataProp[0].answerSelected = "1|nextQuestion|2|No";
|
||||
questionDataProp[1].answerSelected = "2|nextQuestion|3|No";
|
||||
questionDataProp[2].answerSelected = "3|answer|FW04793|No";
|
||||
|
||||
const { wrapper } = setupMocks({ questionDataProp });
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.currentQuestionNum).toBe(0);
|
||||
expect(wrapper.vm.isQuestionVisible(wrapper.vm.questions[2])).toBe(true);
|
||||
expect(
|
||||
wrapper.vm.questions.filter((question) => wrapper.vm.isQuestionVisible(question))
|
||||
).toHaveLength(3);
|
||||
});
|
||||
|
||||
test("should show Q2 after answering No on Honda HUD question", async () => {
|
||||
const { wrapper } = setupMocks({
|
||||
questionDataProp: getHondaAccordWindshieldQuestions(),
|
||||
});
|
||||
await nextTick();
|
||||
|
||||
const q1 = wrapper.vm.questions[0];
|
||||
wrapper.vm.handleAnswer(q1, "1|nextQuestion|2|No");
|
||||
|
||||
expect(wrapper.vm.currentQuestionNum).toBe(2);
|
||||
expect(wrapper.vm.isQuestionVisible(wrapper.vm.questions[1])).toBe(true);
|
||||
});
|
||||
|
||||
test("should show only Q1 and Q2 after Cherokee Q1 Yes then Q2 No", async () => {
|
||||
const { wrapper } = setupMocks({
|
||||
questionDataProp: getCherokeeWindshieldQuestions(),
|
||||
});
|
||||
await nextTick();
|
||||
|
||||
wrapper.vm.handleAnswer(wrapper.vm.questions[0], "1|nextQuestion|2|Yes");
|
||||
wrapper.vm.handleAnswer(wrapper.vm.questions[1], "2|answer|DW02264|No");
|
||||
|
||||
const visibleQuestions = wrapper.vm.questions.filter((question) =>
|
||||
wrapper.vm.isQuestionVisible(question)
|
||||
);
|
||||
|
||||
expect(wrapper.vm.currentQuestionNum).toBe(0);
|
||||
expect(visibleQuestions).toHaveLength(2);
|
||||
expect(visibleQuestions.map((question) => question.questionSequence)).toEqual([1, 2]);
|
||||
expect(wrapper.vm.isCurrentQuestion(wrapper.vm.questions[0])).toBe(false);
|
||||
expect(wrapper.vm.isCurrentQuestion(wrapper.vm.questions[1])).toBe(false);
|
||||
expect(wrapper.vm.isQuestionVisible(wrapper.vm.questions[2])).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function getHondaAccordWindshieldQuestions() {
|
||||
return [
|
||||
{
|
||||
questionSequence: 1,
|
||||
questionText:
|
||||
"Is your vehicle equipped with a Heads-up Display which projects vehicle information, such as speed, onto the windshield?",
|
||||
answers: [
|
||||
{ answerResult: "FW04796", answerText: "Yes", nextQuestionSequence: null },
|
||||
{ answerResult: "", answerText: "No", nextQuestionSequence: 2 },
|
||||
],
|
||||
},
|
||||
{
|
||||
questionSequence: 2,
|
||||
questionText:
|
||||
"Is your vehicle equipped with an auto-dimming rearview mirror which will darken automatically when a vehicles approaches from the rear at night?",
|
||||
answers: [
|
||||
{ answerResult: "FW04795", answerText: "Yes", nextQuestionSequence: null },
|
||||
{ answerResult: "", answerText: "No", nextQuestionSequence: 3 },
|
||||
],
|
||||
},
|
||||
{
|
||||
questionSequence: 3,
|
||||
questionText: "Is your vehicle equipped with a power moonroof?",
|
||||
answers: [
|
||||
{ answerResult: "FW04794", answerText: "Yes", nextQuestionSequence: null },
|
||||
{ answerResult: "FW04793", answerText: "No", nextQuestionSequence: null },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function getCherokeeWindshieldQuestions() {
|
||||
return [
|
||||
{
|
||||
questionSequence: 1,
|
||||
questionText:
|
||||
"Is your Cherokee the Overland edition which can be identified by having a wood and leather wrapped steering wheel?",
|
||||
answers: [
|
||||
{ answerResult: "", answerText: "Yes", nextQuestionSequence: 2 },
|
||||
{ answerResult: "", answerText: "No", nextQuestionSequence: 3 },
|
||||
],
|
||||
},
|
||||
{
|
||||
questionSequence: 2,
|
||||
questionText:
|
||||
"Is your vehicle equipped with rain sensing wipers that adjust their speed automatically when it rains?",
|
||||
answers: [
|
||||
{ answerResult: "DW02270", answerText: "Yes", nextQuestionSequence: null },
|
||||
{ answerResult: "DW02264", answerText: "No", nextQuestionSequence: null },
|
||||
],
|
||||
},
|
||||
{
|
||||
questionSequence: 3,
|
||||
questionText:
|
||||
"Is your vehicle equipped with rain sensing wipers that adjust their speed automatically when it rains?",
|
||||
answers: [
|
||||
{ answerResult: "DW02268", answerText: "Yes", nextQuestionSequence: null },
|
||||
{ answerResult: "", answerText: "No", nextQuestionSequence: 4 },
|
||||
],
|
||||
},
|
||||
{
|
||||
questionSequence: 4,
|
||||
questionText:
|
||||
"Is your vehicle equipped with automatic climate control which will change the fan speed automatically in order to maintain a set temperature?",
|
||||
answers: [
|
||||
{ answerResult: "", answerText: "Yes", nextQuestionSequence: 5 },
|
||||
{ answerResult: "", answerText: "No", nextQuestionSequence: 6 },
|
||||
],
|
||||
},
|
||||
{
|
||||
questionSequence: 5,
|
||||
questionText: "Is your vehicle equipped with heated seats?",
|
||||
answers: [
|
||||
{ answerResult: "DW02104", answerText: "Yes", nextQuestionSequence: null },
|
||||
{ answerResult: "DW02103", answerText: "No", nextQuestionSequence: null },
|
||||
],
|
||||
},
|
||||
{
|
||||
questionSequence: 6,
|
||||
questionText: "Is your vehicle equipped with heated seats?",
|
||||
answers: [
|
||||
{ answerResult: "DW02102", answerText: "Yes", nextQuestionSequence: null },
|
||||
{ answerResult: "DW02101", answerText: "No", nextQuestionSequence: null },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function setupMocks({
|
||||
questionDataProp = [
|
||||
{
|
||||
|
|
@ -351,6 +712,7 @@ function setupMocks({
|
|||
const mountOptions = getMountOptions({});
|
||||
mountOptions.propsData = {
|
||||
questionData: questionDataProp,
|
||||
index: 0,
|
||||
};
|
||||
mountOptions["attachTo"] = document.body;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
<template>
|
||||
<div v-for="(q, i) in questions" :key="i">
|
||||
<transition appear name="fade" mode="out-in">
|
||||
<div v-for="q in questions" :key="q.questionSequence">
|
||||
<transition
|
||||
appear
|
||||
:css="isCurrentQuestion(q)"
|
||||
:name="isCurrentQuestion(q) ? 'fade' : undefined"
|
||||
mode="out-in"
|
||||
@after-enter="onQuestionEnter(q)">
|
||||
<buttonQuestion
|
||||
v-if="q.answerSelected || q.questionSequence === currentQuestionNum"
|
||||
v-if="isQuestionVisible(q)"
|
||||
:key="q.questionSequence"
|
||||
class="radioQuestion"
|
||||
:class="q.questionSequence === currentQuestionNum && 'current-question'"
|
||||
:class="{ 'current-question': isCurrentQuestion(q) }"
|
||||
:questionText="q.questionText"
|
||||
:answers="q.answers"
|
||||
:groupName="`question-${index}-${q.questionSequence}`"
|
||||
|
|
@ -19,6 +25,11 @@
|
|||
<script>
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import { useValidateForm } from "vee-validate";
|
||||
import {
|
||||
isTerminalQuestionChainAnswer,
|
||||
mapQuestionAnswersForChain,
|
||||
normalizeAnswerSelectedValue,
|
||||
} from "@/helpers/question-chain-helper";
|
||||
|
||||
export default {
|
||||
name: "questionChain",
|
||||
|
|
@ -34,54 +45,90 @@ export default {
|
|||
modelValue: Object,
|
||||
index: Number,
|
||||
answerKey: String,
|
||||
hasSavedAnswer: Boolean,
|
||||
hasDownstreamSavedAnswers: Boolean,
|
||||
},
|
||||
async created() {
|
||||
// do a test validation check upon create to prevent out of sync / incorrect valid states
|
||||
await useValidateForm(); // NOTE: needs to have async/await here; tested and won't work without it
|
||||
|
||||
this.questionData.map((q, i) => {
|
||||
const answers = mapQuestionAnswersForChain(q);
|
||||
const question = {
|
||||
questionText: q.questionText,
|
||||
questionSequence: q.questionSequence,
|
||||
answers: q.answers.map((a) => {
|
||||
return {
|
||||
buttonLabel: a.answerText,
|
||||
// Name will either be nextQuestionSequence or answerResult
|
||||
// Name will be used by list-button as the input value.
|
||||
// It must be a single string or number, so concatenating together a string with
|
||||
// 4 pieces of data separated by pipe characters:
|
||||
// question number|type of answer|answer value|answer text
|
||||
value: a.nextQuestionSequence
|
||||
? q.questionSequence +
|
||||
"|nextQuestion|" +
|
||||
a.nextQuestionSequence +
|
||||
"|" +
|
||||
a.answerText
|
||||
: q.questionSequence + "|answer|" + a.answerResult + "|" + a.answerText,
|
||||
nextQuestionSequence: a.nextQuestionSequence,
|
||||
answerResult: a.answerResult,
|
||||
problemQuestionId: a.problemQuestionId,
|
||||
questionSequence: q.questionSequence,
|
||||
questionType: a.nextQuestionSequence ? "nextQuestion" : "answer",
|
||||
};
|
||||
}),
|
||||
answerSelected: q.answerSelected || "",
|
||||
answers,
|
||||
answerSelected: normalizeAnswerSelectedValue(q.answerSelected, answers),
|
||||
};
|
||||
if (!q.suppressThisQuestion) {
|
||||
this.questions.push(question);
|
||||
}
|
||||
});
|
||||
|
||||
if (!this.modelValue?.length > 0 && this.questions.length > 0) {
|
||||
// set this.currentQuestionNum to first valid question
|
||||
this.currentQuestionNum = this.questions[0].questionSequence;
|
||||
// scroll the next question into view
|
||||
this.$nextTick(() => {
|
||||
document.querySelector(".current-question")?.scrollIntoView({ behavior: "smooth" });
|
||||
});
|
||||
if (this.questions.length > 0) {
|
||||
this.initializeCurrentQuestionNum();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getQuestionSequence(question) {
|
||||
return Number(question?.questionSequence);
|
||||
},
|
||||
isCurrentQuestion(question) {
|
||||
return this.getQuestionSequence(question) === Number(this.currentQuestionNum);
|
||||
},
|
||||
isQuestionVisible(question) {
|
||||
return !!question.answerSelected || this.isCurrentQuestion(question);
|
||||
},
|
||||
initializeCurrentQuestionNum() {
|
||||
const lastAnsweredQuestion = [...this.questions]
|
||||
.reverse()
|
||||
.find((question) => question.answerSelected);
|
||||
|
||||
if (isTerminalQuestionChainAnswer(lastAnsweredQuestion?.answerSelected)) {
|
||||
this.currentQuestionNum = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lastAnsweredQuestion?.answerSelected?.includes("|nextQuestion|")) {
|
||||
const nextQuestionSequence = Number(
|
||||
lastAnsweredQuestion.answerSelected.split("|")[2]
|
||||
);
|
||||
|
||||
if (
|
||||
this.questions.some(
|
||||
(question) => this.getQuestionSequence(question) === nextQuestionSequence
|
||||
)
|
||||
) {
|
||||
this.currentQuestionNum = nextQuestionSequence;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const firstUnanswered = this.questions.find((question) => !question.answerSelected);
|
||||
|
||||
if (firstUnanswered) {
|
||||
this.currentQuestionNum = this.getQuestionSequence(firstUnanswered);
|
||||
}
|
||||
},
|
||||
onQuestionEnter(question) {
|
||||
if (this.isCurrentQuestion(question)) {
|
||||
this.scrollCurrentQuestionIntoView();
|
||||
}
|
||||
},
|
||||
scrollCurrentQuestionIntoView() {
|
||||
this.$nextTick(() => {
|
||||
document.querySelector(".current-question")?.scrollIntoView({ behavior: "smooth" });
|
||||
});
|
||||
},
|
||||
syncAnswerSelectedToQuestionData(questionSequence, answerSelected) {
|
||||
const sourceQuestion = this.questionData?.find(
|
||||
(q) => this.getQuestionSequence(q) === Number(questionSequence)
|
||||
);
|
||||
|
||||
if (sourceQuestion) {
|
||||
sourceQuestion.answerSelected = answerSelected;
|
||||
}
|
||||
},
|
||||
getProblemQuestionIdFromSelectedAnswer(question, selectedAnswer) {
|
||||
if (!question?.answers || !selectedAnswer) {
|
||||
return null;
|
||||
|
|
@ -100,10 +147,20 @@ export default {
|
|||
*/
|
||||
|
||||
question.answerSelected = returnedAnswer;
|
||||
const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer);
|
||||
this.syncAnswerSelectedToQuestionData(question.questionSequence, returnedAnswer);
|
||||
const questionChainAnswer = this.getQuestionChainAnswerIfComplete(returnedAnswer);
|
||||
|
||||
if (isQuestionChainComplete) {
|
||||
this.$emit("update:modelValue", isQuestionChainComplete);
|
||||
if (!questionChainAnswer) {
|
||||
return;
|
||||
}
|
||||
|
||||
const shouldNotifyParent =
|
||||
!questionChainAnswer.incomplete ||
|
||||
this.hasSavedAnswer ||
|
||||
this.hasDownstreamSavedAnswers;
|
||||
|
||||
if (shouldNotifyParent) {
|
||||
this.$emit("update:modelValue", questionChainAnswer);
|
||||
}
|
||||
},
|
||||
getQuestionChainAnswerIfComplete(returnedAnswer) {
|
||||
|
|
@ -117,20 +174,24 @@ export default {
|
|||
// "5|answer|DW02104|Yes"
|
||||
|
||||
const returnedAnswerArray = returnedAnswer.split("|");
|
||||
const questionNum = parseInt(returnedAnswerArray[0]);
|
||||
const questionNum = Number(returnedAnswerArray[0]);
|
||||
const questionType = returnedAnswerArray[1];
|
||||
const questionAnswer = returnedAnswerArray[2];
|
||||
const answeredQuestions = [];
|
||||
|
||||
this.questions.forEach((q) => {
|
||||
const questionSequence = this.getQuestionSequence(q);
|
||||
|
||||
// find this question and mark it as "answered" by populating answerSelected
|
||||
if (q.questionSequence === questionNum) {
|
||||
if (questionSequence === questionNum) {
|
||||
q.answerSelected = returnedAnswer;
|
||||
this.syncAnswerSelectedToQuestionData(questionSequence, returnedAnswer);
|
||||
}
|
||||
// remove all answers AFTER this question...
|
||||
// (needed in case user is changing previously answered questions)
|
||||
if (q.questionSequence > questionNum) {
|
||||
if (questionSequence > questionNum) {
|
||||
delete q.answerSelected;
|
||||
this.syncAnswerSelectedToQuestionData(questionSequence, "");
|
||||
}
|
||||
if (q.answerSelected) {
|
||||
answeredQuestions.push({
|
||||
|
|
@ -146,22 +207,20 @@ export default {
|
|||
}
|
||||
});
|
||||
|
||||
// return false if there's a nextQuestion... or return an object with final answers (truthy)
|
||||
// return incomplete answer if there's a nextQuestion... or return final answers (truthy)
|
||||
if (questionType === "nextQuestion") {
|
||||
// update to next question index
|
||||
this.currentQuestionNum = parseInt(questionAnswer); // update count to display next question
|
||||
// scroll the next question into view
|
||||
this.$nextTick(() => {
|
||||
document
|
||||
.querySelector(".current-question")
|
||||
.scrollIntoView({ behavior: "smooth" });
|
||||
});
|
||||
return false;
|
||||
this.currentQuestionNum = Number(questionAnswer);
|
||||
return {
|
||||
incomplete: true,
|
||||
answeredQuestions,
|
||||
index: this.index,
|
||||
};
|
||||
} else {
|
||||
// reset current question index (removes .current-question class)
|
||||
this.currentQuestionNum = 0; // reset count
|
||||
const answeredQuestion = this.questions.find(
|
||||
(q) => q.questionSequence === questionNum
|
||||
(q) => this.getQuestionSequence(q) === questionNum
|
||||
);
|
||||
|
||||
// return an object with the part answer, all the answered questions, and the part index
|
||||
|
|
|
|||
|
|
@ -65,10 +65,9 @@
|
|||
data-test="image-upload"
|
||||
@change="imageChanged" />
|
||||
</label>
|
||||
<loader
|
||||
v-show="isImageProcessing"
|
||||
loaderColor="blue"
|
||||
class="loading-icon"></loader>
|
||||
<span v-if="isImageProcessing" class="loading-icon">
|
||||
<loader loaderColor="blue" />
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
ref="buttonMain"
|
||||
:buttonText="DonationAddButtonCopy"
|
||||
loaderColor="blue"
|
||||
loaderPosition="center"
|
||||
class="w-100 mb-2 custom-secondary"
|
||||
@click-event="handleDonationAction" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
isPrimary
|
||||
:buttonText="overrideButtonText || buttonText"
|
||||
loaderColor="white"
|
||||
loaderPosition="center"
|
||||
:class="isForwardActionDisabled && 'form-test-invalid'"
|
||||
:aria-disabled="isForwardActionDisabled"
|
||||
:isDisabled="isForwardActionDisabled"
|
||||
|
|
@ -68,10 +69,6 @@ export default {
|
|||
customButtontext: "",
|
||||
};
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
document.onkeydown = null;
|
||||
},
|
||||
computed: {
|
||||
backLink() {
|
||||
return (
|
||||
|
|
@ -91,15 +88,8 @@ export default {
|
|||
},
|
||||
removeLoader() {
|
||||
this.$refs.buttonMain.removeLoader();
|
||||
document.onkeydown = function (e) {
|
||||
return true;
|
||||
};
|
||||
},
|
||||
buttonClick() {
|
||||
//prevent keyboard input after button click
|
||||
document.onkeydown = function (e) {
|
||||
return false;
|
||||
};
|
||||
// check session expired and initSession to recreate cookies
|
||||
if (analyticsMixin.methods.sessionExpired()) {
|
||||
this.routeReturnUser();
|
||||
|
|
|
|||
|
|
@ -150,6 +150,43 @@ describe("questionsPageLayout.vue", () => {
|
|||
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("Should return false when answerData was cleared even if answerSelected remains", async () => {
|
||||
const { wrapper } = setupMocks({});
|
||||
await wrapper.setProps({ index: 1 });
|
||||
|
||||
const testGlassPiece = {
|
||||
questions: [
|
||||
{
|
||||
questionSequence: 1,
|
||||
questionText: "Is your Grand Cherokee the Laredo model?",
|
||||
answers: [],
|
||||
answerSelected: "1|answer|DD11132|Yes",
|
||||
},
|
||||
],
|
||||
answerData: {},
|
||||
};
|
||||
|
||||
expect(wrapper.vm.showThisQuestionChain(testGlassPiece, 0)).toBe(false);
|
||||
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("Should return false for reset chains ahead of the current index", async () => {
|
||||
const { wrapper } = setupMocks({});
|
||||
await wrapper.setProps({ index: 1 });
|
||||
|
||||
const testGlassPiece = {
|
||||
questions: [
|
||||
{ questionSequence: 1, questionText: "Rain sensing wipers?", answers: [] },
|
||||
],
|
||||
answerData: null,
|
||||
};
|
||||
|
||||
expect(wrapper.vm.showThisQuestionChain(testGlassPiece, 2)).toBe(false);
|
||||
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
describe("method handleForwardButtonAction...", () => {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-7 question-chain-wrapper">
|
||||
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
|
||||
<div
|
||||
v-for="(questionsDatum, i) in questionsData"
|
||||
:key="questionsDatum.key ?? questionsDatum.answerKey ?? i">
|
||||
<questionChain
|
||||
ref="questionChain"
|
||||
v-model="selectedAnswers[questionsDatum.answerKey]"
|
||||
|
|
@ -18,10 +20,12 @@
|
|||
:index="i"
|
||||
v-if="showThisQuestionChain(questionsDatum, i)"
|
||||
:answerKey="questionsDatum.answerKey"
|
||||
:hasSavedAnswer="!!questionsDatum.answerData?.answerResult"
|
||||
:hasDownstreamSavedAnswers="hasDownstreamSavedAnswers(i)"
|
||||
:validationRules="validationRules" />
|
||||
<!-- Save your progress slot -->
|
||||
<slot></slot>
|
||||
</div>
|
||||
<!-- Save your progress slot (once per page, not per glass piece) -->
|
||||
<slot></slot>
|
||||
|
||||
<navbar
|
||||
ref="navbar"
|
||||
|
|
@ -60,12 +64,22 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
hasDownstreamSavedAnswers(glassIndex) {
|
||||
return this.questionsData
|
||||
?.slice(glassIndex + 1)
|
||||
.some((glass) => glass.answerData?.answerResult);
|
||||
},
|
||||
showThisQuestionChain(glass, i) {
|
||||
// return false if no questions or if suppressed
|
||||
if (!glass.questions || glass.questions?.length < 1 || glass.isSuppressedPart) {
|
||||
return false;
|
||||
}
|
||||
return this.index === i || glass.answerData?.answerResult?.length > 0;
|
||||
|
||||
if (this.index === i) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Only show completed chains that still have a saved answer
|
||||
return !!glass.answerData?.answerResult;
|
||||
},
|
||||
handleForwardButtonAction() {
|
||||
this.$emit("forwardButtonAction");
|
||||
|
|
|
|||
|
|
@ -33,21 +33,15 @@ describe("nav-bar.vue", () => {
|
|||
expect(wrapper.componentVM.customButtontext).toBe("newText");
|
||||
});
|
||||
|
||||
test("should run removeLoader fn on buttonMain and return false for onkeydown fn", async () => {
|
||||
// Arrange
|
||||
test("should run removeLoader on buttonMain", async () => {
|
||||
const wrapper = mount(navbar, {
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.$refs.buttonMain.removeLoader = jest.fn();
|
||||
wrapper.vm.removeLoader();
|
||||
const spy = jest.spyOn(document, "onkeydown");
|
||||
document.onkeydown();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.$refs.buttonMain.removeLoader).toHaveBeenCalled();
|
||||
expect(spy).toReturnWith(true);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
isPrimary
|
||||
:buttonText="overrideButtonText || buttonText"
|
||||
loaderColor="white"
|
||||
loaderPosition="center"
|
||||
:class="isForwardActionDisabled && 'form-test-invalid'"
|
||||
:aria-disabled="isForwardActionDisabled"
|
||||
:isDisabled="isForwardActionDisabled"
|
||||
|
|
@ -69,9 +70,6 @@ export default {
|
|||
};
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
document.onkeydown = null;
|
||||
},
|
||||
computed: {
|
||||
backLink() {
|
||||
return (
|
||||
|
|
@ -91,15 +89,8 @@ export default {
|
|||
},
|
||||
removeLoader() {
|
||||
this.$refs.buttonMain.removeLoader();
|
||||
document.onkeydown = function (e) {
|
||||
return true;
|
||||
};
|
||||
},
|
||||
buttonClick() {
|
||||
//prevent keyboard input after button click
|
||||
document.onkeydown = function (e) {
|
||||
return false;
|
||||
};
|
||||
// check session expired and initSession to recreate cookies
|
||||
if (analyticsMixin.methods.sessionExpired()) {
|
||||
this.routeReturnUser();
|
||||
|
|
|
|||
|
|
@ -159,13 +159,37 @@ describe("save-progress-popup-question ", () => {
|
|||
wrapper.vm.selectContactMethod("PhoneAnswer");
|
||||
wrapper.vm.modal.validate = jest.fn().mockResolvedValue({ valid: true });
|
||||
const resetSpy = jest.spyOn(wrapper.vm, "resetPhoneSendButtonStyle");
|
||||
const scrollSpy = jest
|
||||
.spyOn(wrapper.vm, "scrollConsentIntoView")
|
||||
.mockResolvedValue(undefined);
|
||||
|
||||
await wrapper.vm.validatePhoneAndSave();
|
||||
|
||||
expect(wrapper.vm.showConsentErrors).toBe(true);
|
||||
expect(scrollSpy).toHaveBeenCalled();
|
||||
expect(resetSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("should scroll consent checkboxes into view", async () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressPopupWidget",
|
||||
},
|
||||
});
|
||||
const mockScrollIntoView = jest.fn();
|
||||
const consentEl = document.createElement("fieldset");
|
||||
consentEl.className = "save-progress-popup-sms-consent";
|
||||
consentEl.scrollIntoView = mockScrollIntoView;
|
||||
wrapper.element.appendChild(consentEl);
|
||||
|
||||
await wrapper.vm.scrollConsentIntoView();
|
||||
|
||||
expect(mockScrollIntoView).toHaveBeenCalledWith({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
});
|
||||
});
|
||||
|
||||
test("should reset the send button loader when phone validation fails", async () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
|
|
@ -209,6 +233,66 @@ describe("save-progress-popup-question ", () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("footer button suppression", () => {
|
||||
test("should suppress the modal footer button on the phone tab", async () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressPopupWidget",
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.selectContactMethod("PhoneAnswer");
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
expect(wrapper.vm.isFooterButtonSuppressed).toBe(true);
|
||||
});
|
||||
|
||||
test("should show the modal footer button on the email tab before save", () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressPopupWidget",
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.isFooterButtonSuppressed).toBe(false);
|
||||
});
|
||||
|
||||
test("should suppress the modal footer button after a successful email save", async () => {
|
||||
const dispatchStoreAction = jest.fn().mockResolvedValue(undefined);
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressPopupWidget",
|
||||
pageName: "quote",
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.dispatchStoreAction = dispatchStoreAction;
|
||||
wrapper.vm.userInput = "test@example.com";
|
||||
|
||||
await wrapper.vm.saveProgress();
|
||||
|
||||
expect(wrapper.vm.isFooterButtonSuppressed).toBe(true);
|
||||
});
|
||||
|
||||
test("should reset the modal footer button loader before suppressing it after save", async () => {
|
||||
const dispatchStoreAction = jest.fn().mockResolvedValue(undefined);
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressPopupWidget",
|
||||
pageName: "quote",
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.dispatchStoreAction = dispatchStoreAction;
|
||||
wrapper.vm.userInput = "test@example.com";
|
||||
wrapper.vm.modal.resetButtonStyle = jest.fn();
|
||||
|
||||
await wrapper.vm.saveProgress();
|
||||
|
||||
expect(wrapper.vm.modal.resetButtonStyle).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("saveProgress", () => {
|
||||
test("should save phone number and sms consent when phone tab is selected", async () => {
|
||||
const dispatchStoreAction = jest.fn().mockResolvedValue(undefined);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
:onModalClosedCallback="onModalClosed"
|
||||
:footerButtonText="modalButtonText"
|
||||
:isFooterButtonPrimary="true"
|
||||
:isFooterButtonSuppressed="isPhoneTabSelected && !isProgressSaved"
|
||||
:isFooterButtonSuppressed="isFooterButtonSuppressed"
|
||||
@footer-button-event="saveProgress">
|
||||
<p class="modal-body-inner">{{ modalBodyText }}</p>
|
||||
<fieldset class="save-progress-popup-question__tabs">
|
||||
|
|
@ -43,6 +43,7 @@
|
|||
isRequired
|
||||
validationRules="phone-number-required" />
|
||||
<saveProgressPopupSmsConsentQuestion
|
||||
ref="smsConsentQuestion"
|
||||
v-model="smsConsent"
|
||||
:consentCopy="smsConsentCopy"
|
||||
:isDisabled="isProgressSaved"
|
||||
|
|
@ -70,9 +71,14 @@
|
|||
ref="phoneSendButton"
|
||||
:isPrimary="true"
|
||||
class="w-100 modal-footer-button"
|
||||
loaderColor="white"
|
||||
loaderPosition="center"
|
||||
:buttonText="modalButtonText"
|
||||
@click-event="validatePhoneAndSave" />
|
||||
<p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
|
||||
<p
|
||||
v-if="!isProgressSaved"
|
||||
class="modal-disclaimer"
|
||||
v-html="modalDisclaimerText"></p>
|
||||
</template>
|
||||
<alert
|
||||
class="my-4"
|
||||
|
|
@ -192,6 +198,9 @@ export default {
|
|||
isPhoneTabSelected() {
|
||||
return this.contactMethod === saveProgressPopupContactMethods.PHONE;
|
||||
},
|
||||
isFooterButtonSuppressed() {
|
||||
return this.isProgressSaved || this.isPhoneTabSelected;
|
||||
},
|
||||
phoneQuestionWidgetName() {
|
||||
return PHONE_QUESTION_WIDGET;
|
||||
},
|
||||
|
|
@ -238,6 +247,7 @@ export default {
|
|||
|
||||
if (!hasSaveProgressSmsConsentSelection(this.smsConsent)) {
|
||||
this.showConsentErrors = true;
|
||||
await this.scrollConsentIntoView();
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -250,6 +260,14 @@ export default {
|
|||
resetPhoneSendButtonStyle() {
|
||||
this.$refs.phoneSendButton?.resetButtonStyle();
|
||||
},
|
||||
async scrollConsentIntoView() {
|
||||
await this.$nextTick();
|
||||
const consentEl =
|
||||
this.$refs.smsConsentQuestion?.$el ??
|
||||
this.$el?.querySelector(".save-progress-popup-sms-consent");
|
||||
|
||||
consentEl?.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
||||
},
|
||||
async saveProgress() {
|
||||
await saveProgressPopupContactToStore(this.dispatchStoreAction, {
|
||||
contactMethod: this.contactMethod,
|
||||
|
|
@ -260,6 +278,9 @@ export default {
|
|||
// send store call to send to new API (that triggers an email/SMS send)
|
||||
await saveQuote({ pageNameToLog: this.pageName });
|
||||
|
||||
this.modal?.resetButtonStyle();
|
||||
this.resetPhoneSendButtonStyle();
|
||||
|
||||
// hide save progress button; show success message alert
|
||||
this.savedContactMethod = this.contactMethod;
|
||||
this.isProgressSaved = true;
|
||||
|
|
@ -370,6 +391,11 @@ export default {
|
|||
}
|
||||
}
|
||||
.modal.modal-component .modal-dialog .modal-content {
|
||||
max-height: calc(100dvh - 1rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
p.modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -377,6 +403,9 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 1.5rem;
|
||||
overflow-y: auto;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
|
||||
.textbox-question {
|
||||
padding: 0;
|
||||
|
|
@ -497,6 +526,8 @@ export default {
|
|||
text-align: left;
|
||||
order: 3;
|
||||
margin: 0;
|
||||
max-height: calc(100dvh - 30rem);
|
||||
overflow-y: auto;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
@ -506,10 +537,6 @@ export default {
|
|||
}
|
||||
|
||||
&.progress-saved {
|
||||
.modal-footer-button,
|
||||
.modal-disclaimer {
|
||||
display: none;
|
||||
}
|
||||
.skip-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
59
src/helpers/question-chain-helper.js
Normal file
59
src/helpers/question-chain-helper.js
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
/**
|
||||
* Builds the pipe-delimited value used by question-chain button options.
|
||||
* Format: questionNumber|type|answer value|answer text
|
||||
*/
|
||||
export function buildQuestionChainAnswerValue({
|
||||
questionSequence,
|
||||
nextQuestionSequence,
|
||||
answerResult,
|
||||
answerText,
|
||||
}) {
|
||||
if (nextQuestionSequence) {
|
||||
return `${questionSequence}|nextQuestion|${nextQuestionSequence}|${answerText}`;
|
||||
}
|
||||
|
||||
return `${questionSequence}|answer|${answerResult}|${answerText}`;
|
||||
}
|
||||
|
||||
export function mapQuestionAnswersForChain(question) {
|
||||
return question.answers.map((answer) => ({
|
||||
buttonLabel: answer.answerText,
|
||||
value: buildQuestionChainAnswerValue({
|
||||
questionSequence: question.questionSequence,
|
||||
nextQuestionSequence: answer.nextQuestionSequence,
|
||||
answerResult: answer.answerResult,
|
||||
answerText: answer.answerText,
|
||||
}),
|
||||
nextQuestionSequence: answer.nextQuestionSequence,
|
||||
answerResult: answer.answerResult,
|
||||
problemQuestionId: answer.problemQuestionId,
|
||||
questionSequence: question.questionSequence,
|
||||
questionType: answer.nextQuestionSequence ? "nextQuestion" : "answer",
|
||||
}));
|
||||
}
|
||||
|
||||
export function isTerminalQuestionChainAnswer(answerSelected) {
|
||||
if (!answerSelected) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const [, questionType, answerResult] = answerSelected.split("|");
|
||||
|
||||
return questionType?.toLowerCase() === "answer" && !!answerResult;
|
||||
}
|
||||
|
||||
export function normalizeAnswerSelectedValue(answerSelected, answers) {
|
||||
if (!answerSelected) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (answers.some((answer) => answer.value === answerSelected)) {
|
||||
return answerSelected;
|
||||
}
|
||||
|
||||
const matchedAnswer = answers.find(
|
||||
(answer) => answer.value.toUpperCase() === String(answerSelected).toUpperCase()
|
||||
);
|
||||
|
||||
return matchedAnswer?.value ?? answerSelected;
|
||||
}
|
||||
90
src/helpers/question-chain-helper.spec.js
Normal file
90
src/helpers/question-chain-helper.spec.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import {
|
||||
buildQuestionChainAnswerValue,
|
||||
isTerminalQuestionChainAnswer,
|
||||
mapQuestionAnswersForChain,
|
||||
normalizeAnswerSelectedValue,
|
||||
} from "./question-chain-helper";
|
||||
|
||||
describe("question-chain-helper", () => {
|
||||
describe("buildQuestionChainAnswerValue", () => {
|
||||
test("returns nextQuestion format when nextQuestionSequence is set", () => {
|
||||
expect(
|
||||
buildQuestionChainAnswerValue({
|
||||
questionSequence: 1,
|
||||
nextQuestionSequence: 3,
|
||||
answerResult: "ignored",
|
||||
answerText: "Yes",
|
||||
})
|
||||
).toBe("1|nextQuestion|3|Yes");
|
||||
});
|
||||
|
||||
test("returns answer format for final answers", () => {
|
||||
expect(
|
||||
buildQuestionChainAnswerValue({
|
||||
questionSequence: 1,
|
||||
nextQuestionSequence: null,
|
||||
answerResult: "DW01705",
|
||||
answerText: "Yes",
|
||||
})
|
||||
).toBe("1|answer|DW01705|Yes");
|
||||
});
|
||||
});
|
||||
|
||||
describe("isTerminalQuestionChainAnswer", () => {
|
||||
test("returns true when answer has a part number and no next question", () => {
|
||||
expect(isTerminalQuestionChainAnswer("1|answer|FW04796|Yes")).toBe(true);
|
||||
expect(isTerminalQuestionChainAnswer("3|answer|FW04793|No")).toBe(true);
|
||||
});
|
||||
|
||||
test("returns false when answer continues to the next question", () => {
|
||||
expect(isTerminalQuestionChainAnswer("1|nextQuestion|2|No")).toBe(false);
|
||||
});
|
||||
|
||||
test("returns false when answer type is answer but part number is missing", () => {
|
||||
expect(isTerminalQuestionChainAnswer("1|answer||No")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("normalizeAnswerSelectedValue", () => {
|
||||
const answers = [{ value: "1|answer|DW01705|Yes" }, { value: "1|answer|DW01591|No" }];
|
||||
|
||||
test("returns empty string when answerSelected is empty", () => {
|
||||
expect(normalizeAnswerSelectedValue("", answers)).toBe("");
|
||||
});
|
||||
|
||||
test("returns exact match when casing already matches", () => {
|
||||
expect(normalizeAnswerSelectedValue("1|answer|DW01705|Yes", answers)).toBe(
|
||||
"1|answer|DW01705|Yes"
|
||||
);
|
||||
});
|
||||
|
||||
test("normalizes uppercase legacy values to button value casing", () => {
|
||||
expect(normalizeAnswerSelectedValue("1|ANSWER|DW01705|YES", answers)).toBe(
|
||||
"1|answer|DW01705|Yes"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("mapQuestionAnswersForChain", () => {
|
||||
test("maps API answers to question-chain button answers", () => {
|
||||
const result = mapQuestionAnswersForChain({
|
||||
questionSequence: 1,
|
||||
answers: [
|
||||
{
|
||||
answerResult: "DW01705",
|
||||
answerText: "Yes",
|
||||
nextQuestionSequence: null,
|
||||
problemQuestionId: 123,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
expect(result[0]).toMatchObject({
|
||||
buttonLabel: "Yes",
|
||||
value: "1|answer|DW01705|Yes",
|
||||
problemQuestionId: 123,
|
||||
questionType: "answer",
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -213,7 +213,7 @@ describe("capabilityQuestions.vue", () => {
|
|||
});
|
||||
|
||||
describe("forwardButtonAction", () => {
|
||||
test("Should clear out answerData", () => {
|
||||
test("Should clear out answerData", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
|
|
@ -245,7 +245,7 @@ describe("capabilityQuestions.vue", () => {
|
|||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.forwardButtonAction();
|
||||
await wrapper.vm.forwardButtonAction();
|
||||
|
||||
//Assert
|
||||
expect(wrapper.vm.questionsData[0].answerData).toEqual({});
|
||||
|
|
|
|||
|
|
@ -181,11 +181,6 @@ export default {
|
|||
};
|
||||
});
|
||||
|
||||
// clear out answerData for future page loads; must occur prior to store save
|
||||
this.questionsData.forEach((glass) => {
|
||||
glass.answerData = {};
|
||||
});
|
||||
|
||||
// save to vuex store as order.damage.capabilityQuestionAnswers (array)
|
||||
// used in GET_PART_FROM_CAPABILITY_QUESTION_ANSWER call following this one
|
||||
await this.dispatchStoreAction(
|
||||
|
|
@ -212,6 +207,8 @@ export default {
|
|||
}
|
||||
|
||||
this.navigateForward(partsOrQuestions);
|
||||
|
||||
this.clearQuestionsAnswerData();
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -217,7 +217,7 @@ describe("moldingQuestions.vue", () => {
|
|||
});
|
||||
|
||||
describe("forwardButtonAction", () => {
|
||||
test("Should clear out answerData", () => {
|
||||
test("Should clear out answerData", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
|
|
@ -240,7 +240,7 @@ describe("moldingQuestions.vue", () => {
|
|||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.forwardButtonAction();
|
||||
await wrapper.vm.forwardButtonAction();
|
||||
|
||||
//Assert
|
||||
expect(wrapper.vm.questionsData[0].answerData).toEqual({});
|
||||
|
|
|
|||
|
|
@ -182,11 +182,6 @@ export default {
|
|||
};
|
||||
});
|
||||
|
||||
// clear out answerData for future page loads; must occur prior to store save
|
||||
this.questionsData.forEach((glass) => {
|
||||
glass.answerData = {};
|
||||
});
|
||||
|
||||
// save to vuex store as order.damage.moldingQuestionArrays (array)
|
||||
await this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_MOLDING_QUESTION_ANSWERS,
|
||||
|
|
@ -210,6 +205,8 @@ export default {
|
|||
}
|
||||
|
||||
this.navigateForward(partsOrQuestions);
|
||||
|
||||
this.clearQuestionsAnswerData();
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -258,9 +258,7 @@ describe("partQuestions.vue...", () => {
|
|||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.forwardButtonAction();
|
||||
|
||||
await nextTick();
|
||||
await wrapper.vm.forwardButtonAction();
|
||||
|
||||
//Assert
|
||||
expect(wrapper.vm.questionsData[0].answerData).toEqual({});
|
||||
|
|
|
|||
|
|
@ -183,13 +183,6 @@ export default {
|
|||
};
|
||||
});
|
||||
|
||||
// clear out answerData for future page loads; must occur prior to store save
|
||||
this.questionsData.forEach((glass) => {
|
||||
if (glass.answerData) {
|
||||
glass.answerData = {};
|
||||
}
|
||||
});
|
||||
|
||||
this.dispatchStoreAction(this.storeActions.SAVE_IS_OEM_GLASS_SELECTED, false, false);
|
||||
|
||||
// save to vuex store as order.damage.partQuestionAnswers (array)
|
||||
|
|
@ -210,6 +203,8 @@ export default {
|
|||
const glassPartsForStore = partsLookup.data.glassPieceParts;
|
||||
|
||||
this.navigateForward(glassPartsForStore);
|
||||
|
||||
this.clearQuestionsAnswerData();
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<cart
|
||||
ref="cart"
|
||||
:damage="damageInfo"
|
||||
:availableVaps="[]"
|
||||
:availableVaps="availableVaps"
|
||||
:allowItemRemoval="false"
|
||||
v-model="lineItems"
|
||||
servicePackageOptionsCmsName="ServicePackageTitle"
|
||||
|
|
@ -610,6 +610,9 @@ export default {
|
|||
lineItems() {
|
||||
return deepClone(this.$store.getters.lineItems);
|
||||
},
|
||||
availableVaps() {
|
||||
return this.$store.getters.order.lineItems?.vaps ?? [];
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -87,12 +87,12 @@ describe("policy-info.vue", () => {
|
|||
expect(wrapper.vm.displayClaimNumber).toBe(true);
|
||||
});
|
||||
|
||||
test("is false when only unrelated flags (e.g. otherResponsibleParty, thirdPartyVehicle, injuries) are checked", async () => {
|
||||
test("is false when only unrelated flags (e.g. thirdPartyVehicle, injuries) are checked", async () => {
|
||||
const { wrapper } = setupMocks();
|
||||
wrapper.vm.morePolicyQuestions = {
|
||||
additionalDamage: false,
|
||||
rental: false,
|
||||
otherResponsibleParty: true,
|
||||
otherResponsibleParty: false,
|
||||
thirdPartyVehicle: true,
|
||||
injuries: true,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -87,7 +87,9 @@
|
|||
class="mb-4"
|
||||
cmsWidgetName="PhoneExtensionWidget"
|
||||
v-model="phoneExtension"
|
||||
inputId="phoneExtension" />
|
||||
inputId="phoneExtension"
|
||||
maxLength="5"
|
||||
validationRules="phone-extension-format" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -321,6 +323,7 @@ defineRule("policy-number-format", (value) => {
|
|||
defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
|
||||
defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
|
||||
defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
|
||||
defineRule("phone-extension-format", regex(/^\d{1,5}$/, errorMessages.PHONE_EXTENSION_FORMAT));
|
||||
defineRule("date-of-loss-required", required(errorMessages.DATE_OF_LOSS_REQUIRED));
|
||||
defineRule("damage-types-required", required(errorMessages.DAMAGE_TYPES_REQUIRED));
|
||||
defineRule("state-required", required(errorMessages.STATE_REQUIRED));
|
||||
|
|
@ -493,9 +496,12 @@ export default {
|
|||
const additionalDamageFlag =
|
||||
morePolicyQuestionAnswerToFlag[morePolicyQuestionAnswers.ADDITIONAL_DAMAGE];
|
||||
const rentalFlag = morePolicyQuestionAnswerToFlag[morePolicyQuestionAnswers.RENTAL];
|
||||
const otherResponsibleParty =
|
||||
morePolicyQuestionAnswerToFlag[morePolicyQuestionAnswers.OTHER_RESPONSIBLE_PARTY];
|
||||
return Boolean(
|
||||
this.morePolicyQuestions?.[additionalDamageFlag] ||
|
||||
this.morePolicyQuestions?.[rentalFlag]
|
||||
this.morePolicyQuestions?.[rentalFlag] ||
|
||||
this.morePolicyQuestions?.[otherResponsibleParty]
|
||||
);
|
||||
},
|
||||
},
|
||||
|
|
@ -566,10 +572,10 @@ export default {
|
|||
return match ?? value;
|
||||
},
|
||||
getPolicyStateFromStore() {
|
||||
return store.getters.order.customer.address.state;
|
||||
return store.getters.order.damage.damageState;
|
||||
},
|
||||
getCityFromStore() {
|
||||
return store.getters.order.customer.address.city;
|
||||
return store.getters.order.damage.damageCity;
|
||||
},
|
||||
getDateOfBirthFromStore() {
|
||||
return store.getters.order.policy.dateOfBirth;
|
||||
|
|
@ -620,8 +626,8 @@ export default {
|
|||
zipCode: this.policyZip,
|
||||
phoneNumber: this.phoneNumber,
|
||||
phoneExtension: this.phoneExtension,
|
||||
state: this.policyState,
|
||||
city: this.city,
|
||||
state: null,
|
||||
city: null,
|
||||
morePolicyQuestions: this.morePolicyQuestions,
|
||||
lossLocation: this.lossLocation,
|
||||
lossTime: this.lossTime,
|
||||
|
|
@ -639,6 +645,8 @@ export default {
|
|||
{
|
||||
dateOfLoss: this.dateOfLoss,
|
||||
damageCause: this.damageCause,
|
||||
damageState: this.policyState,
|
||||
damageCity: this.city,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<div class="afterpay-modal-banner" role="alert">
|
||||
<component
|
||||
:is="'script'"
|
||||
src="https://js.squarecdn.com/square-marketplace.js"
|
||||
async></component>
|
||||
<div>
|
||||
<span
|
||||
class="callout"
|
||||
|
|
@ -17,52 +21,19 @@
|
|||
<span v-else v-html="token"></span>
|
||||
</span>
|
||||
<span class="nbsp"> </span>
|
||||
<textLink
|
||||
linkType="text"
|
||||
:text="bannerCta"
|
||||
href="javascript:void(0)"
|
||||
@click-event="openModal" />
|
||||
<a
|
||||
href="#"
|
||||
class="text-link"
|
||||
data-afterpay-modal="en_US"
|
||||
@click.prevent="onLearnMoreClick">
|
||||
{{ bannerCta }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<modal
|
||||
:ref="modalName"
|
||||
class="afterpay-modal"
|
||||
:headerText="modalHeaderText"
|
||||
:isFooterButtonSuppressed="true">
|
||||
<template v-slot:modal-header-slot>
|
||||
<span>{{ modalSubHeaderText }}</span>
|
||||
</template>
|
||||
<template v-slot>
|
||||
<span class="afterpay-sections">
|
||||
<span
|
||||
v-for="section in afterpaySectionsContent"
|
||||
:key="section"
|
||||
class="afterpay-section">
|
||||
<span class="section-header">
|
||||
<img v-if="section.AnswerImageUrl" :src="section.AnswerImageUrl" />
|
||||
<h3 v-if="section.Text" v-html="section.Text"></h3>
|
||||
</span>
|
||||
<span v-html="section.content"></span>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot:modal-footer-slot>
|
||||
<p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
|
||||
</template>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
doesCopyContainTextLink,
|
||||
splitCopyOnCMSPlaceHolder,
|
||||
getRouterLinkRouteFromCopy,
|
||||
getRouterLinkDisplayTextFromCopy,
|
||||
getExternalLink,
|
||||
splitCMSCopyOnBR,
|
||||
} from "@/helpers/cms-content-helper";
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import modal from "@/digital-components/modal/modal";
|
||||
import { splitCopyOnCMSPlaceHolder, splitCMSCopyOnBR } from "@/helpers/cms-content-helper";
|
||||
|
||||
const INLINE_IMAGE_TOKEN = "custom:inlineImage";
|
||||
const AFTERPAY_PRICE_TOKEN = "custom:afterpayPrice";
|
||||
|
|
@ -82,25 +53,18 @@ export default {
|
|||
name: "afterpay-banner",
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
modalWidgetName: String,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
isInlineImageToken,
|
||||
isAfterpayPriceToken,
|
||||
getInlineAltText,
|
||||
doesCopyContainTextLink,
|
||||
splitCopyOnCMSPlaceHolder,
|
||||
getRouterLinkRouteFromCopy,
|
||||
getRouterLinkDisplayTextFromCopy,
|
||||
getExternalLink,
|
||||
openModal() {
|
||||
this.modal?.openModal();
|
||||
},
|
||||
closeModal() {
|
||||
this.modal?.closeModal();
|
||||
onLearnMoreClick() {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[this.queryStrings.FMG_PAGE],
|
||||
this.GaActions.CLICKED,
|
||||
this.bannerCta,
|
||||
true
|
||||
);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -119,31 +83,6 @@ export default {
|
|||
bannerCta() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
||||
},
|
||||
modalHeaderText() {
|
||||
return this.getCmsContent(this.modalWidgetName, "HeaderText");
|
||||
},
|
||||
modalDisclaimerText() {
|
||||
return this.getCmsContent(this.modalWidgetName, "BodyText2");
|
||||
},
|
||||
modalName() {
|
||||
return this.modalWidgetName;
|
||||
},
|
||||
modal() {
|
||||
return this.$refs[this.modalName];
|
||||
},
|
||||
afterpaySectionsContent() {
|
||||
const sections = this.getCmsContent("AfterpayModalSectionsWidget", "Answers");
|
||||
if (!sections) return [];
|
||||
sections.forEach((section) => {
|
||||
const sectionContent = this.getCmsContent(section.Name, "BodyText");
|
||||
section["content"] = sectionContent;
|
||||
});
|
||||
return sections;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
textLink,
|
||||
modal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -198,117 +137,9 @@ export default {
|
|||
@include media-breakpoint-up(md) {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.afterpay-modal {
|
||||
&.modal.modal-component {
|
||||
:deep(.modal-dialog) {
|
||||
margin: 0 1rem;
|
||||
top: 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 100%;
|
||||
max-width: 840px;
|
||||
top: 3.4rem;
|
||||
right: 0;
|
||||
left: 0;
|
||||
transform: none;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.modal-content {
|
||||
border-radius: 0.5rem;
|
||||
margin: 1.5rem 0;
|
||||
|
||||
.modal-header.mt-6 {
|
||||
background-color: $blue-100;
|
||||
margin-top: 0;
|
||||
padding: 1.5rem 2rem 1.5rem 1.5rem;
|
||||
font-family: UrbanistSemibold;
|
||||
|
||||
.modal-title.justify-content-center {
|
||||
// OVERRIDE
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.btn-close {
|
||||
top: 1.25rem;
|
||||
right: 1.5rem;
|
||||
}
|
||||
}
|
||||
.afterpay-section {
|
||||
display: block;
|
||||
border: 1px solid $gray-200;
|
||||
border-radius: 0.25rem;
|
||||
padding: 1rem;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
h3 {
|
||||
font-family: UrbanistBold;
|
||||
font-size: 1rem;
|
||||
margin: 0 0 0 0.5rem;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
strong {
|
||||
font-family: UrbanistSemibold;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
|
||||
.afterpay-sections {
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
column-gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
.afterpay-section {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
flex: 0 1 33%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.modal-dialog-centered {
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.modal-footer) {
|
||||
position: relative;
|
||||
background: $gray-100;
|
||||
|
||||
.modal-disclaimer {
|
||||
font-style: italic;
|
||||
font-size: 0.75rem;
|
||||
a {
|
||||
padding: 0;
|
||||
line-height: 1.625;
|
||||
}
|
||||
img {
|
||||
transform: translateY(-0.1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
59
src/layouts/quote/promo-banner/promo-banner.vue
Normal file
59
src/layouts/quote/promo-banner/promo-banner.vue
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div class="promo-banner" role="note">
|
||||
<img class="promo-banner__icon" :src="promoTagIcon" alt="" width="31" height="36" />
|
||||
<p class="promo-banner__copy mb-0" v-html="promoBannerBodyText"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "promo-banner",
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
},
|
||||
computed: {
|
||||
promoTagIcon() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "Image");
|
||||
},
|
||||
promoBannerBodyText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "BodyText");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.promo-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
padding: 1rem 1.25rem;
|
||||
background-color: $gray-100;
|
||||
border-radius: 1rem;
|
||||
text-align: left;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
width: 31px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
&__copy {
|
||||
color: $gray-650;
|
||||
font-size: $font-size-14;
|
||||
line-height: 1.5;
|
||||
|
||||
:deep(strong) {
|
||||
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,6 +5,14 @@
|
|||
<div
|
||||
class="container quote position-relative"
|
||||
:class="[showSaveProgressPopup ? 'initial-popup-open' : '']">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<promoBanner
|
||||
v-if="showPromoBanner"
|
||||
cmsWidgetName="PromoBannerWidget"
|
||||
class="mb-4" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
|
|
@ -47,8 +55,7 @@
|
|||
<!-- If Cash AND vehicle does not require recal OR if Cash AND State requires showing recal, then show Afterpay banner -->
|
||||
<afterpayModalBanner
|
||||
v-if="showAfterpayBanner"
|
||||
cmsWidgetName="AfterpayBannerWidget"
|
||||
modalWidgetName="AfterpayModalWidget" />
|
||||
cmsWidgetName="AfterpayBannerWidget" />
|
||||
|
||||
<!-- If vehicle requires recal AND we are hiding recal pricing info, then show recal disclaimer banner. -->
|
||||
<recalDisclaimer
|
||||
|
|
@ -102,7 +109,12 @@
|
|||
<textBlock
|
||||
cmsWidgetName="quoteDisclaimer"
|
||||
typeStyle="caption"
|
||||
class="mb-5 quote-disclaimer text-left text-md-center" />
|
||||
class="quote-disclaimer text-left text-md-center" />
|
||||
<textBlock
|
||||
v-if="showPromoBanner"
|
||||
cmsWidgetName="PromoBannerDisclaimerWidget"
|
||||
typeStyle="caption"
|
||||
class="quote-disclaimer text-left text-md-center" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -134,6 +146,7 @@ import textBlock from "@/digital-components/text-block/text-block";
|
|||
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
|
||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
import afterpayModalBanner from "@/layouts/quote/afterpay-modal-banner/afterpay-modal-banner";
|
||||
import promoBanner from "@/layouts/quote/promo-banner/promo-banner";
|
||||
import recalDisclaimer from "@/layouts/quote/recal-disclaimer/recal-disclaimer.vue";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
import saveProgressPopupQuestion from "@/fmg-components/save-progress-popup-question/save-progress-popup-question";
|
||||
|
|
@ -684,6 +697,12 @@ export default {
|
|||
showAfterpayBanner() {
|
||||
return !this.isRecalibrationOnOrder || !this.shouldHideRecalibration;
|
||||
},
|
||||
showPromoBanner() {
|
||||
return experimentMixin.methods.hasSettingEqualTo(
|
||||
experimentSettings.SHOW_PROMO_BANNER,
|
||||
"true"
|
||||
);
|
||||
},
|
||||
isRecalPriceRemove() {
|
||||
return (
|
||||
experimentMixin.methods
|
||||
|
|
@ -1041,6 +1060,7 @@ export default {
|
|||
contentGroupModal,
|
||||
loadingModal,
|
||||
afterpayModalBanner,
|
||||
promoBanner,
|
||||
promoModalQuestion,
|
||||
recalDisclaimer,
|
||||
saveProgressModalQuestion,
|
||||
|
|
@ -1166,4 +1186,7 @@ export default {
|
|||
:deep(.promo-modal-question a) {
|
||||
@include responsive-font-size-md(0.875rem, 1rem);
|
||||
}
|
||||
.quote-disclaimer:last-child {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,145 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import schedulingZipSearch from "./scheduling-zip-search";
|
||||
import store from "@/store";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import {
|
||||
getBillToAccountNumber,
|
||||
getZipCodeData,
|
||||
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
|
||||
jest.mock("@/store", () => ({
|
||||
dispatch: jest.fn().mockResolvedValue(null),
|
||||
}));
|
||||
|
||||
jest.mock(
|
||||
"@/layouts/service-location/helpers/service-location-helper/service-location-helper",
|
||||
() => ({
|
||||
getZipCodeData: jest.fn().mockResolvedValue({
|
||||
state: "OH",
|
||||
zipCodeCtu: "03357",
|
||||
}),
|
||||
getBillToAccountNumber: jest.fn().mockResolvedValue("87291"),
|
||||
})
|
||||
);
|
||||
|
||||
const MOCK_CMS_CONTENT = {
|
||||
ServiceZipQuestionWidget: {
|
||||
QuestionText: "Service ZIP code:",
|
||||
},
|
||||
};
|
||||
|
||||
function mountComponent(props = {}, cmsContent = {}) {
|
||||
const cmsContentByWidget = {
|
||||
...MOCK_CMS_CONTENT,
|
||||
...cmsContent,
|
||||
ServiceZipQuestionWidget: {
|
||||
...MOCK_CMS_CONTENT.ServiceZipQuestionWidget,
|
||||
...cmsContent.ServiceZipQuestionWidget,
|
||||
},
|
||||
};
|
||||
|
||||
const cmsMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn((widgetName, fieldName) => {
|
||||
return cmsContentByWidget[widgetName]?.[fieldName] ?? "";
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
const mountOptions = getMountOptions({
|
||||
route: { name: "scheduling" },
|
||||
mixins: [cmsMixin],
|
||||
});
|
||||
|
||||
return shallowMount(schedulingZipSearch, {
|
||||
props: {
|
||||
modelValue: "",
|
||||
pageNameToLog: "scheduling",
|
||||
...props,
|
||||
},
|
||||
global: mountOptions.global,
|
||||
});
|
||||
}
|
||||
|
||||
describe("scheduling-zip-search.vue", () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
test("prefills the zip input and CMS label from modelValue / ServiceZipQuestionWidget", () => {
|
||||
const wrapper = mountComponent({ modelValue: "43235" });
|
||||
|
||||
expect(wrapper.find("#sz-service-zip").element.value).toBe("43235");
|
||||
expect(wrapper.vm.zipLabelText).toBe("Service ZIP code:");
|
||||
expect(wrapper.find("label").html()).toContain("Service ZIP code:");
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("shows required error when searching with a blank zip", async () => {
|
||||
const wrapper = mountComponent({ modelValue: "" });
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
|
||||
expect(wrapper.vm.errorMessage).toBe(errorMessages.SERVICE_ZIP_REQUIRED);
|
||||
expect(wrapper.find(".scheduling-zip-search__error").classes()).toContain("active");
|
||||
expect(getZipCodeData).not.toHaveBeenCalled();
|
||||
expect(wrapper.emitted("zip-searched")).toBeUndefined();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("shows format error when zip is invalid", async () => {
|
||||
const wrapper = mountComponent({ modelValue: "123" });
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
|
||||
expect(wrapper.vm.errorMessage).toBe(errorMessages.SERVICE_ZIP_FORMAT);
|
||||
expect(getZipCodeData).not.toHaveBeenCalled();
|
||||
expect(wrapper.emitted("zip-searched")).toBeUndefined();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("does not search when disabled", async () => {
|
||||
const wrapper = mountComponent({ modelValue: "44101", disabled: true });
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
|
||||
expect(getZipCodeData).not.toHaveBeenCalled();
|
||||
expect(wrapper.emitted("zip-searched")).toBeUndefined();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("saves zip info and emits billToAccountNumber when a valid zip is searched", async () => {
|
||||
const wrapper = mountComponent({ modelValue: "44101" });
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
|
||||
expect(getZipCodeData).toHaveBeenCalledWith("44101", "scheduling");
|
||||
expect(getBillToAccountNumber).toHaveBeenCalledWith("03357", "scheduling");
|
||||
expect(store.dispatch).toHaveBeenCalledWith("saveServiceZipCodeInfo", {
|
||||
zipCode: "44101",
|
||||
state: "OH",
|
||||
zipCodeCtu: "03357",
|
||||
});
|
||||
expect(wrapper.emitted("zip-searched")).toEqual([
|
||||
[{ zipCode: "44101", billToAccountNumber: "87291" }],
|
||||
]);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("focusZipInput scrolls and focuses the zip input", () => {
|
||||
const wrapper = mountComponent({ modelValue: "43235" });
|
||||
const zipInput = wrapper.find("#sz-service-zip").element;
|
||||
zipInput.scrollIntoView = jest.fn();
|
||||
zipInput.focus = jest.fn();
|
||||
|
||||
wrapper.vm.focusZipInput();
|
||||
|
||||
expect(zipInput.scrollIntoView).toHaveBeenCalledWith({
|
||||
behavior: "smooth",
|
||||
block: "center",
|
||||
});
|
||||
expect(zipInput.focus).toHaveBeenCalledWith({ preventScroll: true });
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<div class="scheduling-zip-search mt-4">
|
||||
<label for="sz-service-zip" v-html="zipLabelText"></label>
|
||||
<div class="scheduling-zip-search__input-wrapper">
|
||||
<input
|
||||
id="sz-service-zip"
|
||||
ref="zipInput"
|
||||
class="scheduling-zip-search__input"
|
||||
:class="{ 'has-error': hasError }"
|
||||
type="text"
|
||||
name="sz-service-zip"
|
||||
:value="localZipCode"
|
||||
:disabled="disabled"
|
||||
@input="onZipInput"
|
||||
@keydown.enter="onZipSearch" />
|
||||
<button
|
||||
class="scheduling-zip-search__search-button"
|
||||
type="button"
|
||||
aria-label="Search"
|
||||
:disabled="disabled"
|
||||
@click="onZipSearch" />
|
||||
</div>
|
||||
<span class="scheduling-zip-search__error" :class="{ active: hasError }">
|
||||
{{ errorMessage }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { defineRule, validate } from "vee-validate";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import {
|
||||
getBillToAccountNumber,
|
||||
getZipCodeData,
|
||||
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
|
||||
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
|
||||
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
|
||||
|
||||
const ZIP_VALIDATION_RULES = "zip-required|zip-format";
|
||||
|
||||
export default {
|
||||
name: "schedulingZipSearch",
|
||||
emits: ["update:modelValue", "zip-searched"],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
pageNameToLog: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
errorMessage: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasError() {
|
||||
return Boolean(this.errorMessage);
|
||||
},
|
||||
zipLabelText() {
|
||||
return this.getCmsContent("ServiceZipQuestionWidget", "QuestionText");
|
||||
},
|
||||
localZipCode: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit("update:modelValue", value);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onZipInput(event) {
|
||||
const digitsOnly = event.target.value.replace(/\D/g, "").slice(0, 5);
|
||||
event.target.value = digitsOnly;
|
||||
this.localZipCode = digitsOnly;
|
||||
this.errorMessage = "";
|
||||
},
|
||||
focusZipInput() {
|
||||
const zipInput = this.$refs.zipInput;
|
||||
if (!zipInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
zipInput.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
zipInput.focus({ preventScroll: true });
|
||||
},
|
||||
async onZipSearch(event) {
|
||||
event?.preventDefault?.();
|
||||
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const validationResult = await validate(this.localZipCode, ZIP_VALIDATION_RULES);
|
||||
if (!validationResult.valid) {
|
||||
this.errorMessage = validationResult.errors[0] ?? "";
|
||||
this.$refs.zipInput?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
this.errorMessage = "";
|
||||
|
||||
const zipCodeData = await getZipCodeData(this.localZipCode, this.pageNameToLog);
|
||||
await store.dispatch(storeActions.SAVE_SERVICE_ZIP_CODE_INFO, {
|
||||
zipCode: this.localZipCode,
|
||||
state: zipCodeData.state,
|
||||
zipCodeCtu: zipCodeData.zipCodeCtu,
|
||||
});
|
||||
const billToAccountNumber = await getBillToAccountNumber(
|
||||
zipCodeData.zipCodeCtu,
|
||||
this.pageNameToLog
|
||||
);
|
||||
|
||||
this.$emit("zip-searched", {
|
||||
zipCode: this.localZipCode,
|
||||
billToAccountNumber,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scheduling-zip-search {
|
||||
label {
|
||||
display: flex;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__input {
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
border-radius: 50rem;
|
||||
border: none;
|
||||
outline: 1px solid $gray-300;
|
||||
box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.2);
|
||||
color: $gray-650;
|
||||
font-weight: 400;
|
||||
padding-left: 1rem;
|
||||
padding-right: 3.5rem;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid #0070d1;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
outline: 2px solid $red;
|
||||
}
|
||||
}
|
||||
|
||||
&__search-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
border-radius: 0 50rem 50rem 0;
|
||||
width: 50px;
|
||||
border: none;
|
||||
background-color: $blue-150;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7816 14.733L11.825 10.7765C12.8831 9.4503 13.3934 7.76935 13.2512 6.07874C13.1089 4.38812 12.3248 2.81612 11.0599 1.68544C9.79496 0.554768 8.1452 -0.0487819 6.44927 -0.0013033C4.75335 0.0461753 3.13993 0.74108 1.94026 1.94075C0.740592 3.14042 0.045687 4.75384 -0.00179158 6.44976C-0.0492702 8.14569 0.55428 9.79545 1.68495 11.0604C2.81563 12.3253 4.38763 13.1094 6.07825 13.2516C7.76886 13.3939 9.44981 12.8836 10.776 11.8255L14.7347 15.7842C14.8042 15.8529 14.8867 15.9073 14.9773 15.9442C15.0678 15.981 15.1648 15.9997 15.2626 15.9991C15.3604 15.9985 15.4571 15.9787 15.5473 15.9407C15.6374 15.9027 15.7192 15.8474 15.7879 15.7778C15.8567 15.7082 15.911 15.6258 15.9479 15.5352C15.9848 15.4446 16.0035 15.3477 16.0029 15.2499C16.0023 15.1521 15.9824 15.0553 15.9445 14.9652C15.9065 14.8751 15.8511 14.7933 15.7816 14.7246V14.733ZM6.63719 11.7916C5.61784 11.7916 4.62139 11.4893 3.77383 10.923C2.92628 10.3567 2.26569 9.55175 1.8756 8.60999C1.48551 7.66824 1.38345 6.63196 1.58231 5.6322C1.78118 4.63244 2.27204 3.7141 2.99283 2.99332C3.71361 2.27253 4.63195 1.78167 5.63171 1.5828C6.63147 1.38394 7.66775 1.486 8.6095 1.87609C9.55126 2.26618 10.3562 2.92677 10.9225 3.77432C11.4888 4.62188 11.7911 5.61833 11.7911 6.63768C11.7894 8.00406 11.2459 9.314 10.2797 10.2802C9.31351 11.2464 8.00357 11.7899 6.63719 11.7916Z' fill='%230070D1'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&__error {
|
||||
color: $red;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
display: flex;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
max-height: 25px;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,19 +2,34 @@ import { shallowMount } from "@vue/test-utils";
|
|||
import scheduling from "./scheduling";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
|
||||
import store from "@/store";
|
||||
|
||||
jest.mock("@/store", () => ({
|
||||
dispatch: jest.fn().mockResolvedValue(null),
|
||||
getters: {
|
||||
order: {
|
||||
serviceLocation: { zipCode: "43235", appointmentType: null },
|
||||
payment: { isInsurance: false, insuranceCoverage: { isVerified: false } },
|
||||
serviceLocation: {
|
||||
zipCode: "43235",
|
||||
zipCodeCtu: "1234",
|
||||
appointmentType: null,
|
||||
address: null,
|
||||
address2: null,
|
||||
city: null,
|
||||
state: "OH",
|
||||
isVehicleProtected: null,
|
||||
},
|
||||
payment: {
|
||||
isInsurance: false,
|
||||
insuranceCoverage: { isVerified: false },
|
||||
billToAccountNumber: "12345",
|
||||
},
|
||||
referralNumber: "",
|
||||
damage: { isRepair: false },
|
||||
lineItems: { glassParts: [] },
|
||||
policy: { isItac: false, isNoComp: false },
|
||||
},
|
||||
lineItems: { supportingItems: [] },
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
@ -44,12 +59,36 @@ jest.mock("@/helpers/page-prerequisites-helper.js", () => ({
|
|||
hasInsuranceInfo: jest.fn(() => true),
|
||||
}));
|
||||
|
||||
function setupMocks() {
|
||||
function setupMocks({ isAppleBrowser = false } = {}) {
|
||||
const dispatchStoreAction = jest.fn().mockResolvedValue(null);
|
||||
const baseMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn(() => ""),
|
||||
setCmsContent: jest.fn(),
|
||||
getTotalLineItemPrice: jest.fn(() => 0),
|
||||
isAppleBrowser: jest.fn(() => isAppleBrowser),
|
||||
dispatchStoreAction,
|
||||
},
|
||||
computed: {
|
||||
storeActions() {
|
||||
return {
|
||||
SAVE_SERVICE_LOCATION: "saveServiceLocation",
|
||||
SAVE_SCHEDULE: "saveSchedule",
|
||||
SAVE_WAITLIST_REQUESTED: "saveWaitListRequested",
|
||||
SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING:
|
||||
"saveSupportingItemsSuppressingStateResetting",
|
||||
};
|
||||
},
|
||||
navigationScenarios() {
|
||||
return {
|
||||
CLICKED_FORWARD: "clickedForward",
|
||||
CLICKED_FORWARD_WITH_MOBILE_SERVICE: "clickedForwardWithMobileService",
|
||||
CLICKED_BACK: "clickedBack",
|
||||
};
|
||||
},
|
||||
pageName() {
|
||||
return "scheduling";
|
||||
},
|
||||
},
|
||||
};
|
||||
const mountOptions = getMountOptions({
|
||||
|
|
@ -62,7 +101,7 @@ function setupMocks() {
|
|||
});
|
||||
mountOptions.global.mixins = [baseMixin];
|
||||
const wrapper = shallowMount(scheduling, mountOptions);
|
||||
return { wrapper };
|
||||
return { wrapper, dispatchStoreAction };
|
||||
}
|
||||
|
||||
describe("scheduling.vue", () => {
|
||||
|
|
@ -124,7 +163,7 @@ describe("scheduling.vue", () => {
|
|||
});
|
||||
|
||||
const { wrapper } = setupMocks();
|
||||
wrapper.vm.inShopProvidersAndTimeslots = [
|
||||
wrapper.vm.inshopProvidersAndTimeSlots = [
|
||||
{ provider: { providerNumber: "05018" }, timeSlots: { days: [] } },
|
||||
{ provider: { providerNumber: "05019" }, timeSlots: { days: [] } },
|
||||
];
|
||||
|
|
@ -161,7 +200,7 @@ describe("scheduling.vue", () => {
|
|||
});
|
||||
|
||||
const { wrapper } = setupMocks();
|
||||
wrapper.vm.inShopProvidersAndTimeslots = [
|
||||
wrapper.vm.inshopProvidersAndTimeSlots = [
|
||||
{ provider: { providerNumber: "05018" }, timeSlots: { days: [] } },
|
||||
{ provider: { providerNumber: "05019" }, timeSlots: { days: [] } },
|
||||
];
|
||||
|
|
@ -169,14 +208,244 @@ describe("scheduling.vue", () => {
|
|||
|
||||
await wrapper.vm.handleRequestMoreDates();
|
||||
|
||||
expect(wrapper.vm.inShopProvidersAndTimeslots[0].timeSlots.days).toHaveLength(1);
|
||||
expect(wrapper.vm.inshopProvidersAndTimeSlots[0].timeSlots.days).toHaveLength(1);
|
||||
expect(
|
||||
wrapper.vm.inShopProvidersAndTimeslots[0].timeSlots.days[0].timeSlots[0].id
|
||||
wrapper.vm.inshopProvidersAndTimeSlots[0].timeSlots.days[0].timeSlots[0].id
|
||||
).toBe("slot-a");
|
||||
expect(
|
||||
wrapper.vm.inShopProvidersAndTimeslots[1].timeSlots.days[0].timeSlots[0].id
|
||||
wrapper.vm.inshopProvidersAndTimeSlots[1].timeSlots.days[0].timeSlots[0].id
|
||||
).toBe("slot-b");
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
describe("service zip", () => {
|
||||
test("prefills zipSearchCode and billToAccountNumber from store and renders zip search", () => {
|
||||
const { wrapper } = setupMocks();
|
||||
|
||||
expect(wrapper.vm.zipSearchCode).toBe("43235");
|
||||
expect(wrapper.vm.billToAccountNumber).toBe("12345");
|
||||
expect(wrapper.find("scheduling-zip-search-stub").exists()).toBe(true);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("reloads providers and timeslots when zip-searched is emitted", async () => {
|
||||
store.dispatch.mockClear();
|
||||
store.dispatch.mockImplementation((action) => {
|
||||
if (action === "getProviders") {
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
shopProviders: [{ providerNumber: "05018" }],
|
||||
mobileProviderNumber: "12345",
|
||||
},
|
||||
});
|
||||
}
|
||||
return Promise.resolve(null);
|
||||
});
|
||||
settleAllPromises.mockResolvedValueOnce({
|
||||
inshopTimeSlots: {
|
||||
providerTimeSlots: [
|
||||
{ providerNumber: "05018", days: [{ date: "2026-07-22", timeSlots: [] }] },
|
||||
],
|
||||
},
|
||||
mobileTimeSlots: { days: [{ date: "2026-07-22", timeSlots: [] }] },
|
||||
});
|
||||
|
||||
const { wrapper } = setupMocks();
|
||||
await wrapper.setData({ isLoadingDates: false });
|
||||
wrapper.vm.datePickerEndDate = "2026-08-15";
|
||||
wrapper.vm.selectedScheduling = { appointmentType: "Mobile" };
|
||||
const initialDatePickerKey = wrapper.vm.datePickerKey;
|
||||
|
||||
await wrapper.vm.onZipSearched({ zipCode: "44101", billToAccountNumber: "87291" });
|
||||
|
||||
expect(store.dispatch).toHaveBeenCalledWith("getProviders", {
|
||||
payload: { serviceZipCode: "44101" },
|
||||
pageNameToLog: "scheduling",
|
||||
});
|
||||
expect(wrapper.vm.billToAccountNumber).toBe("87291");
|
||||
expect(settleAllPromises).toHaveBeenCalled();
|
||||
expect(wrapper.vm.datePickerKey).toBe(initialDatePickerKey + 1);
|
||||
expect(wrapper.vm.selectedDate).toBeNull();
|
||||
expect(wrapper.vm.selectedScheduling).toBeNull();
|
||||
expect(wrapper.vm.isWaitlistRequested).toBe(false);
|
||||
expect(wrapper.vm.inshopProvidersAndTimeSlots).toHaveLength(1);
|
||||
expect(wrapper.vm.mobileProviderAndTimeSlot.providerNumber).toBe("12345");
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("anchors to zip search when mobile zip is clicked", () => {
|
||||
const { wrapper } = setupMocks();
|
||||
wrapper.vm.$refs.schedulingZipSearch.focusZipInput = jest.fn();
|
||||
|
||||
wrapper.vm.onMobileZipCodeClicked();
|
||||
|
||||
expect(wrapper.vm.$refs.schedulingZipSearch.focusZipInput).toHaveBeenCalled();
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
describe("forwardButtonAction", () => {
|
||||
test("saves service location, schedule, waitlist and navigates for inshop selection", async () => {
|
||||
const { wrapper, dispatchStoreAction } = setupMocks();
|
||||
wrapper.vm.selectedDate = "2026-07-22";
|
||||
wrapper.vm.isWaitlistRequested = true;
|
||||
wrapper.vm.selectedScheduling = {
|
||||
appointmentType: AppointmentTypeStrings.IN_SHOP,
|
||||
providerNumber: "05018",
|
||||
routeCodeId: "route-inshop",
|
||||
};
|
||||
wrapper.vm.inshopProvidersAndTimeSlots = [
|
||||
{
|
||||
provider: {
|
||||
providerNumber: "05018",
|
||||
address: {
|
||||
streetAddress: "123 Main",
|
||||
city: "Columbus",
|
||||
state: "OH",
|
||||
zipCode: "43235",
|
||||
zipCodeCtu: "9999",
|
||||
},
|
||||
},
|
||||
timeSlots: {
|
||||
estimatedServiceMinutesMinimum: 60,
|
||||
estimatedServiceMinutesMaximum: 120,
|
||||
days: [
|
||||
{
|
||||
date: "2026-07-22",
|
||||
timeSlots: [
|
||||
{
|
||||
id: "route-inshop",
|
||||
startTime: "09:00",
|
||||
endTime: "10:00",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
await wrapper.vm.forwardButtonAction();
|
||||
|
||||
expect(dispatchStoreAction).toHaveBeenCalledWith(
|
||||
"saveServiceLocation",
|
||||
expect.objectContaining({
|
||||
appointmentType: AppointmentTypeStrings.IN_SHOP,
|
||||
zipCodeCtu: "9999",
|
||||
provider: expect.objectContaining({ providerNumber: "05018" }),
|
||||
}),
|
||||
false
|
||||
);
|
||||
expect(dispatchStoreAction).toHaveBeenCalledWith(
|
||||
"saveSchedule",
|
||||
expect.objectContaining({
|
||||
date: "2026-07-22",
|
||||
routeCode: "route-inshop",
|
||||
startTime: "09:00",
|
||||
endTime: "10:00",
|
||||
jobMinMinutes: "60",
|
||||
jobMaxMinutes: "120",
|
||||
}),
|
||||
false
|
||||
);
|
||||
expect(dispatchStoreAction).toHaveBeenCalledWith("saveWaitListRequested", true, false);
|
||||
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith(
|
||||
"clickedForward",
|
||||
"scheduling"
|
||||
);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("navigates with mobile scenario and clears provider address for mobile selection", async () => {
|
||||
const { wrapper, dispatchStoreAction } = setupMocks();
|
||||
wrapper.vm.selectedDate = "2026-07-22";
|
||||
wrapper.vm.selectedScheduling = {
|
||||
appointmentType: AppointmentTypeStrings.MOBILE,
|
||||
providerNumber: "MOBILE1",
|
||||
routeCodeId: "route-mobile",
|
||||
isPremiumAppointment: false,
|
||||
};
|
||||
wrapper.vm.mobileProviderAndTimeSlot = {
|
||||
providerNumber: "MOBILE1",
|
||||
timeSlots: {
|
||||
estimatedServiceMinutesMinimum: 90,
|
||||
estimatedServiceMinutesMaximum: 150,
|
||||
days: [
|
||||
{
|
||||
date: "2026-07-22",
|
||||
timeSlots: [
|
||||
{
|
||||
id: "route-mobile",
|
||||
startTime: "08:00",
|
||||
endTime: "12:00",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
await wrapper.vm.forwardButtonAction();
|
||||
|
||||
expect(dispatchStoreAction).toHaveBeenCalledWith(
|
||||
"saveServiceLocation",
|
||||
expect.objectContaining({
|
||||
appointmentType: AppointmentTypeStrings.MOBILE,
|
||||
provider: {
|
||||
providerNumber: "MOBILE1",
|
||||
address: {
|
||||
streetAddress: null,
|
||||
city: null,
|
||||
state: null,
|
||||
zipCode: null,
|
||||
zipCodeCtu: null,
|
||||
},
|
||||
},
|
||||
}),
|
||||
false
|
||||
);
|
||||
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith(
|
||||
"clickedForwardWithMobileService",
|
||||
"scheduling"
|
||||
);
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
describe("in-shop Maps link", () => {
|
||||
const address = {
|
||||
city: "Lewis Center",
|
||||
state: "OH",
|
||||
streetAddress: "1343 Cameron Ave",
|
||||
zipCode: "43035",
|
||||
};
|
||||
const query = encodeURIComponent(
|
||||
"safelite,Safelite Autoglass, 1343 Cameron Ave, Lewis Center, OH 43035"
|
||||
);
|
||||
|
||||
test("onInshopAddressClicked opens Maps in a new tab for Google and Apple", () => {
|
||||
const openSpy = jest.spyOn(window, "open").mockImplementation(() => null);
|
||||
|
||||
const { wrapper } = setupMocks();
|
||||
wrapper.vm.onInshopAddressClicked({ address });
|
||||
expect(openSpy).toHaveBeenCalledWith(
|
||||
`https://www.google.com/maps/search/?api=1&query=${query}`,
|
||||
"_blank",
|
||||
"noopener,noreferrer"
|
||||
);
|
||||
wrapper.unmount();
|
||||
|
||||
openSpy.mockClear();
|
||||
const { wrapper: appleWrapper } = setupMocks({ isAppleBrowser: true });
|
||||
appleWrapper.vm.onInshopAddressClicked({ address });
|
||||
expect(openSpy).toHaveBeenCalledWith(
|
||||
`https://maps.apple.com/?q=${query}`,
|
||||
"_blank",
|
||||
"noopener,noreferrer"
|
||||
);
|
||||
appleWrapper.unmount();
|
||||
openSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
|
||||
<interceptOverlay v-if="isLoadingDates" />
|
||||
<interceptOverlay v-if="isLoadingDates || isLoadingMoreShops" />
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
<div class="container page-container-grouped-styles">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
||||
<h5 class="fw-normal mb-0 dark-header" :class="headerColor">
|
||||
<span>
|
||||
{{ serviceLocationText }}
|
||||
</span>
|
||||
</h5>
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
|
||||
<funnelSubHeader
|
||||
cmsWidgetName="FunnelSubHeaderWidget"
|
||||
:overrideHeaderSubText="estimatedTimeText"
|
||||
alignLeft />
|
||||
<schedulingZipSearch
|
||||
ref="schedulingZipSearch"
|
||||
v-model="zipSearchCode"
|
||||
:disabled="isLoadingDates"
|
||||
:pageNameToLog="pageName"
|
||||
@zip-searched="onZipSearched" />
|
||||
<datePicker
|
||||
:key="datePickerKey"
|
||||
class="mt-5"
|
||||
v-model="selectedDate"
|
||||
:startDate="datePickerStartDate"
|
||||
|
|
@ -34,20 +39,39 @@
|
|||
:isLoading="isLoadingDates"
|
||||
@zip-code-clicked="onMobileZipCodeClicked" />
|
||||
<inshopSchedulingCard
|
||||
v-for="{ provider } in inShopProvidersAndTimeslots"
|
||||
v-for="entry in inshopProvidersAndTimeSlots"
|
||||
v-show="showInshopSchedulingCards"
|
||||
:key="provider.providerNumber"
|
||||
:key="entry.provider.providerNumber"
|
||||
class="mt-4"
|
||||
v-model="selectedScheduling"
|
||||
:provider="provider"
|
||||
:provider="entry.provider"
|
||||
:timeSlots="
|
||||
getInshopTimeSlotsForSelectedDate(provider.providerNumber)
|
||||
getInshopTimeSlotsForSelectedDate(entry.provider.providerNumber)
|
||||
"
|
||||
:radioGroupName="schedulingRadioGroupName"
|
||||
:isLoading="isLoadingDates"
|
||||
@address-clicked="onInshopAddressClicked(provider)" />
|
||||
:isLoading="isLoadingDates || Boolean(entry.isLoadingTimeSlots)"
|
||||
@address-clicked="onInshopAddressClicked(entry.provider)" />
|
||||
</div>
|
||||
</Transition>
|
||||
<div class="d-flex justify-content-center mt-4">
|
||||
<textLink
|
||||
v-if="hasMoreShopsAvailable"
|
||||
id="viewMoreShopsLinkId"
|
||||
linkType="text"
|
||||
:text="viewMoreShopsText"
|
||||
href="javascript:void(0)"
|
||||
@click-event="onViewMoreShopsClick">
|
||||
<template #after-text>
|
||||
<span class="spacing-gap"></span>
|
||||
<img
|
||||
class="chevron-icon"
|
||||
src="@/assets/img/icons/chevron-no-background.svg"
|
||||
alt=""
|
||||
aria-hidden="true" />
|
||||
</template>
|
||||
</textLink>
|
||||
</div>
|
||||
|
||||
<waitlistQuestion
|
||||
class="mt-5"
|
||||
v-model="isWaitlistRequested"
|
||||
|
|
@ -73,18 +97,22 @@ import mobileSchedulingCard from "@/layouts/scheduling/mobile-scheduling-card/mo
|
|||
import inshopSchedulingCard from "@/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card";
|
||||
import interceptOverlay from "@/ux-components/intercept-overlay/intercept-overlay";
|
||||
import waitlistQuestion from "@/layouts/scheduling/waitlist-question/waitlist-question";
|
||||
import schedulingZipSearch from "@/layouts/scheduling/scheduling-zip-search/scheduling-zip-search";
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
|
||||
import { isDropOffRouteCode } from "@/layouts/schedule/helpers/schedule-helper";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
|
||||
import {
|
||||
flushPagePrereqsLogs,
|
||||
hasServiceZipInfo,
|
||||
hasGlassPartsOrRepairInfo,
|
||||
hasInsuranceInfo,
|
||||
} from "@/helpers/page-prerequisites-helper.js";
|
||||
import { debugLog } from "@/helpers/debug-log-helper";
|
||||
|
||||
/**
|
||||
* Returns a YYYY-MM-DD date string offset by the given number of days from a base date.
|
||||
|
|
@ -100,6 +128,10 @@ function toDateString(offsetDays, base = new Date()) {
|
|||
|
||||
const SCHEDULE_FETCH_DAYS = 15;
|
||||
const SCHEDULING_RADIO_GROUP_NAME = "schedulingTimeSlot";
|
||||
const INITIAL_INSHOP_PROVIDER_COUNT = 3;
|
||||
const MAX_INSHOP_PROVIDERS = 9;
|
||||
const VIEW_MORE_SHOPS_BATCH_SIZE = 3;
|
||||
const INSHOP_MAPS_PLACE_NAME = "safelite,Safelite Autoglass";
|
||||
|
||||
/**
|
||||
* Appends days from newSlots into entry.timeSlots, initializing it if absent.
|
||||
|
|
@ -118,14 +150,23 @@ function appendDays(entry, newSlots) {
|
|||
/**
|
||||
* Assigns time slots from a v2 multi-provider response onto in-shop provider entries.
|
||||
* @param {Array<{ provider: { providerNumber: string }, timeSlots: any }>} entries
|
||||
* @param {{ providerTimeSlots?: Array<{ providerNumber: string, days: any[], provisionalTriggers?: string[] }> } | null | undefined} multiProviderResponse
|
||||
* @param {{ providerTimeSlots?: Array<{ providerNumber: string, days: any[], provisionalTriggers?: string[] }>, estimatedServiceMinutesMinimum?: number, estimatedServiceMinutesMaximum?: number } | null | undefined} multiProviderResponse
|
||||
*/
|
||||
function assignInshopTimeSlotsFromV2Response(entries, multiProviderResponse) {
|
||||
const providerTimeSlots = multiProviderResponse?.providerTimeSlots ?? [];
|
||||
entries.forEach((entry) => {
|
||||
entry.timeSlots =
|
||||
const matchedSlots =
|
||||
providerTimeSlots.find((pts) => pts.providerNumber === entry.provider.providerNumber) ??
|
||||
null;
|
||||
if (matchedSlots) {
|
||||
matchedSlots.estimatedServiceMinutesMinimum =
|
||||
matchedSlots.estimatedServiceMinutesMinimum ??
|
||||
multiProviderResponse?.estimatedServiceMinutesMinimum;
|
||||
matchedSlots.estimatedServiceMinutesMaximum =
|
||||
matchedSlots.estimatedServiceMinutesMaximum ??
|
||||
multiProviderResponse?.estimatedServiceMinutesMaximum;
|
||||
}
|
||||
entry.timeSlots = matchedSlots;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -175,6 +216,58 @@ function fetchMobileTimeSlots({ startDate, endDate, zipCode, pageNameToLog }) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches inshop time slots (when providers are given) and mobile time slots (when requested)
|
||||
* for a date range, settling both requests together. Either request is omitted entirely when
|
||||
* it has no applicable providers/zip, rather than firing an empty/unnecessary call.
|
||||
* @param {{
|
||||
* startDate: string,
|
||||
* endDate: string,
|
||||
* providerNumbers: string[],
|
||||
* zipCode?: string,
|
||||
* includeMobile?: boolean,
|
||||
* pageNameToLog: string,
|
||||
* }} params
|
||||
* @returns {Promise<{ inshopTimeSlots?: any, mobileTimeSlots?: any }>}
|
||||
*/
|
||||
function fetchTimeSlotsBatch({
|
||||
startDate,
|
||||
endDate,
|
||||
providerNumbers,
|
||||
zipCode,
|
||||
includeMobile,
|
||||
pageNameToLog,
|
||||
}) {
|
||||
return settleAllPromises([
|
||||
...(providerNumbers.length
|
||||
? [
|
||||
{
|
||||
resultKey: "inshopTimeSlots",
|
||||
promise: fetchInshopTimeSlots({
|
||||
startDate,
|
||||
endDate,
|
||||
providerNumbers,
|
||||
pageNameToLog,
|
||||
}),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(includeMobile
|
||||
? [
|
||||
{
|
||||
resultKey: "mobileTimeSlots",
|
||||
promise: fetchMobileTimeSlots({
|
||||
startDate,
|
||||
endDate,
|
||||
zipCode,
|
||||
pageNameToLog,
|
||||
}),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
]);
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "scheduling",
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -200,59 +293,12 @@ export default {
|
|||
},
|
||||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
// Get the first 3 providers from the shopProviderData
|
||||
const providers = resultMap.providers?.shopProviders?.slice(0, 3) ?? [];
|
||||
const mobileProviderNumber = resultMap.providers?.mobileProviderNumber ?? null;
|
||||
next(async (vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.inShopProvidersAndTimeslots = providers.map((provider) => ({
|
||||
provider,
|
||||
timeSlots: null,
|
||||
}));
|
||||
vm.mobileProviderAndTimeSlot = mobileProviderNumber
|
||||
? { providerNumber: mobileProviderNumber, timeSlots: null }
|
||||
: null;
|
||||
const startDate = toDateString(0);
|
||||
const endDate = toDateString(SCHEDULE_FETCH_DAYS - 1);
|
||||
const providerNumbers = providers.map((provider) => provider.providerNumber);
|
||||
const timeSlotsPromiseResultMap = [
|
||||
...(providerNumbers.length
|
||||
? [
|
||||
{
|
||||
resultKey: "inshopTimeSlots",
|
||||
promise: fetchInshopTimeSlots({
|
||||
startDate,
|
||||
endDate,
|
||||
providerNumbers,
|
||||
pageNameToLog: to.name,
|
||||
}),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
// Get the mobile time slots if a mobile provider number is available
|
||||
...(mobileProviderNumber
|
||||
? [
|
||||
{
|
||||
resultKey: "mobileTimeSlots",
|
||||
promise: fetchMobileTimeSlots({
|
||||
startDate,
|
||||
endDate,
|
||||
zipCode: serviceZipCode,
|
||||
pageNameToLog: to.name,
|
||||
}),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
];
|
||||
const timeSlotsResultMap = await settleAllPromises(timeSlotsPromiseResultMap);
|
||||
assignInshopTimeSlotsFromV2Response(
|
||||
vm.inShopProvidersAndTimeslots,
|
||||
timeSlotsResultMap.inshopTimeSlots
|
||||
);
|
||||
if (vm.mobileProviderAndTimeSlot) {
|
||||
vm.mobileProviderAndTimeSlot.timeSlots = timeSlotsResultMap.mobileTimeSlots ?? null;
|
||||
}
|
||||
vm.datesLoaded = true;
|
||||
await vm.loadSchedulingData(serviceZipCode, {
|
||||
providersResult: resultMap.providers,
|
||||
pageNameToLog: to.name,
|
||||
});
|
||||
vm.mobilePremiumAppointmentFee = resultMap.mobilePremiumFee ?? null;
|
||||
vm.isLoadingDates = false;
|
||||
});
|
||||
|
|
@ -269,6 +315,22 @@ export default {
|
|||
serviceLocationText() {
|
||||
return this.getCmsContent("ServiceLocationText", "Text");
|
||||
},
|
||||
viewMoreShopsText() {
|
||||
return this.getCmsContent("ViewMoreShopsWidget", "Text");
|
||||
},
|
||||
estimatedTimeText() {
|
||||
if (!this.estimatedServiceMinutesMinimum || !this.estimatedServiceMinutesMaximum) {
|
||||
return " ";
|
||||
}
|
||||
const durationText = getDisplayTextForDurationLength(
|
||||
this.estimatedServiceMinutesMinimum,
|
||||
this.estimatedServiceMinutesMaximum
|
||||
);
|
||||
return this.getCmsContent("FunnelSubHeaderWidget", "HeaderSubText").replace(
|
||||
"{custom:DURATION}",
|
||||
durationText
|
||||
);
|
||||
},
|
||||
serviceZipCode() {
|
||||
return store.getters.order.serviceLocation.zipCode;
|
||||
},
|
||||
|
|
@ -300,7 +362,7 @@ export default {
|
|||
},
|
||||
availableDates() {
|
||||
if (!this.datesLoaded) return null;
|
||||
const inshopDates = this.inShopProvidersAndTimeslots.flatMap(({ timeSlots }) =>
|
||||
const inshopDates = this.inshopProvidersAndTimeSlots.flatMap(({ timeSlots }) =>
|
||||
(timeSlots?.days ?? []).map((d) => d.date)
|
||||
);
|
||||
const mobileDates = (this.mobileProviderAndTimeSlot?.timeSlots?.days ?? []).map(
|
||||
|
|
@ -308,6 +370,10 @@ export default {
|
|||
);
|
||||
return [...new Set([...inshopDates, ...mobileDates])].sort();
|
||||
},
|
||||
hasMoreShopsAvailable() {
|
||||
const maxVisible = Math.min(MAX_INSHOP_PROVIDERS, this.allShopProviders.length);
|
||||
return this.inshopProvidersAndTimeSlots.length < maxVisible;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -316,30 +382,181 @@ export default {
|
|||
datesLoaded: false,
|
||||
datePickerStartDate: toDateString(0),
|
||||
datePickerEndDate: toDateString(SCHEDULE_FETCH_DAYS - 1),
|
||||
inShopProvidersAndTimeslots: [],
|
||||
estimatedServiceMinutesMinimum: null,
|
||||
estimatedServiceMinutesMaximum: null,
|
||||
inshopProvidersAndTimeSlots: [],
|
||||
allShopProviders: [],
|
||||
mobileProviderAndTimeSlot: null,
|
||||
mobilePremiumAppointmentFee: null,
|
||||
selectedScheduling: null,
|
||||
isWaitlistRequested: false,
|
||||
isLoadingMoreShops: false,
|
||||
zipSearchCode: store.getters.order.serviceLocation.zipCode ?? "",
|
||||
datePickerKey: 0,
|
||||
billToAccountNumber: store.getters.order.payment?.billToAccountNumber ?? null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async loadSchedulingData(
|
||||
serviceZipCode,
|
||||
{ providersResult = null, pageNameToLog = this.pageName } = {}
|
||||
) {
|
||||
let providersData = providersResult;
|
||||
if (!providersData) {
|
||||
providersData = await store.dispatch("getProviders", {
|
||||
payload: { serviceZipCode },
|
||||
pageNameToLog,
|
||||
});
|
||||
}
|
||||
if (providersData?.shopProviders === undefined) {
|
||||
providersData = providersData?.data ?? {};
|
||||
}
|
||||
|
||||
const allShopProviders = providersData.shopProviders ?? [];
|
||||
const providers = allShopProviders.slice(0, INITIAL_INSHOP_PROVIDER_COUNT);
|
||||
const mobileProviderNumber = providersData?.mobileProviderNumber ?? null;
|
||||
|
||||
this.allShopProviders = allShopProviders;
|
||||
this.inshopProvidersAndTimeSlots = providers.map((provider) => ({
|
||||
provider,
|
||||
timeSlots: null,
|
||||
}));
|
||||
this.mobileProviderAndTimeSlot = mobileProviderNumber
|
||||
? { providerNumber: mobileProviderNumber, timeSlots: null }
|
||||
: null;
|
||||
|
||||
const startDate = toDateString(0);
|
||||
const endDate = toDateString(SCHEDULE_FETCH_DAYS - 1);
|
||||
const providerNumbers = providers.map((provider) => provider.providerNumber);
|
||||
const timeSlotsResultMap = await fetchTimeSlotsBatch({
|
||||
startDate,
|
||||
endDate,
|
||||
providerNumbers,
|
||||
zipCode: serviceZipCode,
|
||||
includeMobile: Boolean(mobileProviderNumber),
|
||||
pageNameToLog,
|
||||
});
|
||||
|
||||
if (timeSlotsResultMap.inshopTimeSlots) {
|
||||
this.estimatedServiceMinutesMinimum =
|
||||
timeSlotsResultMap.inshopTimeSlots.estimatedServiceMinutesMinimum;
|
||||
this.estimatedServiceMinutesMaximum =
|
||||
timeSlotsResultMap.inshopTimeSlots.estimatedServiceMinutesMaximum;
|
||||
} else if (timeSlotsResultMap.mobileTimeSlots) {
|
||||
this.estimatedServiceMinutesMinimum =
|
||||
timeSlotsResultMap.mobileTimeSlots.estimatedServiceMinutesMinimum;
|
||||
this.estimatedServiceMinutesMaximum =
|
||||
timeSlotsResultMap.mobileTimeSlots.estimatedServiceMinutesMaximum;
|
||||
} else {
|
||||
this.estimatedServiceMinutesMinimum = null;
|
||||
this.estimatedServiceMinutesMaximum = null;
|
||||
}
|
||||
|
||||
assignInshopTimeSlotsFromV2Response(
|
||||
this.inshopProvidersAndTimeSlots,
|
||||
timeSlotsResultMap.inshopTimeSlots
|
||||
);
|
||||
if (this.mobileProviderAndTimeSlot) {
|
||||
this.mobileProviderAndTimeSlot.timeSlots =
|
||||
timeSlotsResultMap.mobileTimeSlots ?? null;
|
||||
}
|
||||
this.datesLoaded = true;
|
||||
},
|
||||
getInshopTimeSlotsForSelectedDate(providerNumber) {
|
||||
if (!this.selectedDate) {
|
||||
return [];
|
||||
}
|
||||
const providerEntry = this.inShopProvidersAndTimeslots.find(
|
||||
const providerEntry = this.inshopProvidersAndTimeSlots.find(
|
||||
({ provider }) => provider.providerNumber === providerNumber
|
||||
);
|
||||
const day = providerEntry?.timeSlots?.days?.find((d) => d.date === this.selectedDate);
|
||||
return day?.timeSlots ?? [];
|
||||
},
|
||||
buildInshopMapsQuery(address) {
|
||||
const streetAddress = address?.streetAddress?.trim();
|
||||
if (!streetAddress) {
|
||||
return null;
|
||||
}
|
||||
const street = [streetAddress, address.streetAddress2?.trim()]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
return `${INSHOP_MAPS_PLACE_NAME}, ${street}, ${address.city}, ${address.state} ${address.zipCode}`;
|
||||
},
|
||||
buildInshopMapsUrl(address) {
|
||||
const query = this.buildInshopMapsQuery(address);
|
||||
if (!query) {
|
||||
return null;
|
||||
}
|
||||
if (this.isAppleBrowser()) {
|
||||
return `https://maps.apple.com/?q=${encodeURIComponent(query)}`;
|
||||
}
|
||||
return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`;
|
||||
},
|
||||
onInshopAddressClicked(provider) {
|
||||
// TODO: open Google Maps when address link functionality is implemented
|
||||
console.log("onInshopAddressClicked", provider?.providerNumber);
|
||||
const url = this.buildInshopMapsUrl(provider?.address);
|
||||
if (!url) {
|
||||
return;
|
||||
}
|
||||
window.open(url, "_blank", "noopener,noreferrer");
|
||||
},
|
||||
onMobileZipCodeClicked() {
|
||||
// TODO: open service zip modal when zip edit is implemented for scheduling page
|
||||
this.$refs.schedulingZipSearch?.focusZipInput();
|
||||
},
|
||||
async onZipSearched({ zipCode, billToAccountNumber }) {
|
||||
this.billToAccountNumber = billToAccountNumber;
|
||||
this.isLoadingDates = true;
|
||||
try {
|
||||
this.selectedDate = null;
|
||||
this.selectedScheduling = null;
|
||||
this.isWaitlistRequested = false;
|
||||
this.isLoadingMoreShops = false;
|
||||
this.datesLoaded = false;
|
||||
this.datePickerKey += 1;
|
||||
this.datePickerStartDate = toDateString(0);
|
||||
this.datePickerEndDate = toDateString(SCHEDULE_FETCH_DAYS - 1);
|
||||
await this.loadSchedulingData(zipCode);
|
||||
} finally {
|
||||
this.isLoadingDates = false;
|
||||
}
|
||||
},
|
||||
async onViewMoreShopsClick() {
|
||||
if (this.isLoadingDates || this.isLoadingMoreShops) return;
|
||||
|
||||
const maxVisible = Math.min(MAX_INSHOP_PROVIDERS, this.allShopProviders.length);
|
||||
const remainingCapacity = maxVisible - this.inshopProvidersAndTimeSlots.length;
|
||||
if (remainingCapacity <= 0) return;
|
||||
|
||||
const displayedProviderNumbers = new Set(
|
||||
this.inshopProvidersAndTimeSlots.map(({ provider }) => provider.providerNumber)
|
||||
);
|
||||
const newProviders = this.allShopProviders
|
||||
.filter((provider) => !displayedProviderNumbers.has(provider.providerNumber))
|
||||
.slice(0, Math.min(VIEW_MORE_SHOPS_BATCH_SIZE, remainingCapacity));
|
||||
|
||||
if (!newProviders.length) return;
|
||||
|
||||
const newEntries = newProviders.map((provider) => ({
|
||||
provider,
|
||||
timeSlots: null,
|
||||
isLoadingTimeSlots: true,
|
||||
}));
|
||||
this.inshopProvidersAndTimeSlots = [...this.inshopProvidersAndTimeSlots, ...newEntries];
|
||||
this.isLoadingMoreShops = true;
|
||||
|
||||
try {
|
||||
const resultMap = await fetchTimeSlotsBatch({
|
||||
startDate: this.datePickerStartDate,
|
||||
endDate: this.datePickerEndDate,
|
||||
providerNumbers: newProviders.map((provider) => provider.providerNumber),
|
||||
pageNameToLog: this.pageName,
|
||||
});
|
||||
assignInshopTimeSlotsFromV2Response(newEntries, resultMap.inshopTimeSlots);
|
||||
} finally {
|
||||
newEntries.forEach((entry) => {
|
||||
entry.isLoadingTimeSlots = false;
|
||||
});
|
||||
this.isLoadingMoreShops = false;
|
||||
}
|
||||
},
|
||||
arePagePrerequisitesValid() {
|
||||
const order = store.getters.order;
|
||||
|
|
@ -350,7 +567,7 @@ export default {
|
|||
const insuranceInfo = hasInsuranceInfo(order, logQueue);
|
||||
|
||||
const preReqResult = serviceZip && insuranceInfo && glassPartsOrRepair;
|
||||
|
||||
flushPagePrereqsLogs("scheduling.vue", preReqResult, logQueue);
|
||||
return preReqResult;
|
||||
},
|
||||
backButtonAction() {
|
||||
|
|
@ -377,43 +594,21 @@ export default {
|
|||
|
||||
const newStartDate = toDateString(1, this.datePickerEndDate);
|
||||
const newEndDate = toDateString(SCHEDULE_FETCH_DAYS, this.datePickerEndDate);
|
||||
const providerNumbers = this.inShopProvidersAndTimeslots.map(
|
||||
const providerNumbers = this.inshopProvidersAndTimeSlots.map(
|
||||
({ provider }) => provider.providerNumber
|
||||
);
|
||||
|
||||
const promiseResultMap = [
|
||||
...(providerNumbers.length
|
||||
? [
|
||||
{
|
||||
resultKey: "inshopTimeSlots",
|
||||
promise: fetchInshopTimeSlots({
|
||||
startDate: newStartDate,
|
||||
endDate: newEndDate,
|
||||
providerNumbers,
|
||||
pageNameToLog: this.pageName,
|
||||
}),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(this.mobileProviderAndTimeSlot
|
||||
? [
|
||||
{
|
||||
resultKey: "mobileTimeSlots",
|
||||
promise: fetchMobileTimeSlots({
|
||||
startDate: newStartDate,
|
||||
endDate: newEndDate,
|
||||
zipCode: this.serviceZipCode,
|
||||
pageNameToLog: this.pageName,
|
||||
}),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const resultMap = await fetchTimeSlotsBatch({
|
||||
startDate: newStartDate,
|
||||
endDate: newEndDate,
|
||||
providerNumbers,
|
||||
zipCode: this.serviceZipCode,
|
||||
includeMobile: Boolean(this.mobileProviderAndTimeSlot),
|
||||
pageNameToLog: this.pageName,
|
||||
});
|
||||
|
||||
appendInshopTimeSlotsFromV2Response(
|
||||
this.inShopProvidersAndTimeslots,
|
||||
this.inshopProvidersAndTimeSlots,
|
||||
resultMap.inshopTimeSlots
|
||||
);
|
||||
|
||||
|
|
@ -424,9 +619,202 @@ export default {
|
|||
this.datePickerEndDate = newEndDate;
|
||||
this.isLoadingDates = false;
|
||||
},
|
||||
forwardButtonAction() {
|
||||
const appointmentType = store.getters.order.serviceLocation.appointmentType; // TODO: remove this once we have a proper appointment type
|
||||
getInShopOrDropOffApptType(selectedScheduling = this.selectedScheduling) {
|
||||
if (selectedScheduling?.appointmentType === AppointmentTypeStrings.MOBILE) {
|
||||
return AppointmentTypeStrings.MOBILE;
|
||||
}
|
||||
return isDropOffRouteCode(selectedScheduling?.routeCodeId)
|
||||
? AppointmentTypeStrings.DROP_OFF
|
||||
: AppointmentTypeStrings.IN_SHOP;
|
||||
},
|
||||
getSelectedProvider(appointmentType, selectedScheduling = this.selectedScheduling) {
|
||||
if (appointmentType === AppointmentTypeStrings.MOBILE) {
|
||||
return {
|
||||
providerNumber: selectedScheduling?.providerNumber,
|
||||
address: {
|
||||
streetAddress: null,
|
||||
city: null,
|
||||
state: null,
|
||||
zipCode: null,
|
||||
zipCodeCtu: null,
|
||||
},
|
||||
};
|
||||
}
|
||||
return (
|
||||
this.inshopProvidersAndTimeSlots.find(
|
||||
({ provider }) => provider.providerNumber === selectedScheduling?.providerNumber
|
||||
)?.provider ?? null
|
||||
);
|
||||
},
|
||||
getSelectedTimeSlot(
|
||||
appointmentType,
|
||||
selectedScheduling = this.selectedScheduling,
|
||||
selectedDate = this.selectedDate
|
||||
) {
|
||||
const routeCodeId = selectedScheduling?.routeCodeId;
|
||||
if (!routeCodeId || !selectedDate) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let timeSlots;
|
||||
if (appointmentType === AppointmentTypeStrings.MOBILE) {
|
||||
const day = this.mobileProviderAndTimeSlot?.timeSlots?.days?.find(
|
||||
(d) => d.date === selectedDate
|
||||
);
|
||||
timeSlots = day?.timeSlots ?? [];
|
||||
} else {
|
||||
const providerEntry = this.inshopProvidersAndTimeSlots.find(
|
||||
({ provider }) => provider.providerNumber === selectedScheduling.providerNumber
|
||||
);
|
||||
const day = providerEntry?.timeSlots?.days?.find((d) => d.date === selectedDate);
|
||||
timeSlots = day?.timeSlots ?? [];
|
||||
}
|
||||
|
||||
return timeSlots.find((timeSlot) => timeSlot.id === routeCodeId) ?? null;
|
||||
},
|
||||
getEstimatedServiceMinutes(appointmentType, selectedScheduling = this.selectedScheduling) {
|
||||
if (appointmentType === AppointmentTypeStrings.MOBILE) {
|
||||
return {
|
||||
minimum:
|
||||
this.mobileProviderAndTimeSlot?.timeSlots?.estimatedServiceMinutesMinimum,
|
||||
maximum:
|
||||
this.mobileProviderAndTimeSlot?.timeSlots?.estimatedServiceMinutesMaximum,
|
||||
};
|
||||
}
|
||||
|
||||
const providerEntry = this.inshopProvidersAndTimeSlots.find(
|
||||
({ provider }) => provider.providerNumber === selectedScheduling?.providerNumber
|
||||
);
|
||||
return {
|
||||
minimum: providerEntry?.timeSlots?.estimatedServiceMinutesMinimum,
|
||||
maximum: providerEntry?.timeSlots?.estimatedServiceMinutesMaximum,
|
||||
};
|
||||
},
|
||||
updateSupportingItems(selectedScheduling = this.selectedScheduling) {
|
||||
const supportingItems = store.getters.lineItems?.supportingItems;
|
||||
if (!supportingItems) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isPremiumMobile =
|
||||
selectedScheduling?.appointmentType === AppointmentTypeStrings.MOBILE &&
|
||||
selectedScheduling?.isPremiumAppointment;
|
||||
|
||||
if (isPremiumMobile && this.mobilePremiumAppointmentFee) {
|
||||
const premiumFeeIndex = supportingItems.findIndex(
|
||||
(item) => item.partType == PREMIUM_FEE_PART_TYPE
|
||||
);
|
||||
|
||||
if (premiumFeeIndex > -1) {
|
||||
supportingItems[premiumFeeIndex].laborAmount =
|
||||
this.mobilePremiumAppointmentFee.laborAmount;
|
||||
supportingItems[premiumFeeIndex].sellingPrice =
|
||||
this.mobilePremiumAppointmentFee.sellingPrice;
|
||||
supportingItems[premiumFeeIndex].kitPrice =
|
||||
this.mobilePremiumAppointmentFee.kitPrice;
|
||||
} else {
|
||||
supportingItems.push(this.mobilePremiumAppointmentFee);
|
||||
}
|
||||
} else {
|
||||
const removePremiumFeeIndex = supportingItems.findIndex(
|
||||
(item) => item.partType == PREMIUM_FEE_PART_TYPE
|
||||
);
|
||||
if (removePremiumFeeIndex >= 0) {
|
||||
supportingItems.splice(removePremiumFeeIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
|
||||
supportingItems,
|
||||
false
|
||||
);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
const selectedScheduling = this.selectedScheduling;
|
||||
const selectedDate = this.selectedDate;
|
||||
|
||||
const appointmentType = this.getInShopOrDropOffApptType(selectedScheduling);
|
||||
const selectedProvider = this.getSelectedProvider(appointmentType, selectedScheduling);
|
||||
const serviceLocation = store.getters.order.serviceLocation;
|
||||
const isMobile = appointmentType === AppointmentTypeStrings.MOBILE;
|
||||
|
||||
let zipCodeCtu = serviceLocation.zipCodeCtu;
|
||||
if (
|
||||
!isMobile &&
|
||||
selectedProvider?.address?.zipCodeCtu &&
|
||||
zipCodeCtu !== selectedProvider.address.zipCodeCtu
|
||||
) {
|
||||
zipCodeCtu = selectedProvider.address.zipCodeCtu;
|
||||
}
|
||||
|
||||
await this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_SERVICE_LOCATION,
|
||||
{
|
||||
address: isMobile ? serviceLocation.address : "",
|
||||
address2: isMobile ? serviceLocation.address2 : "",
|
||||
city: isMobile ? serviceLocation.city : "",
|
||||
state: serviceLocation.state,
|
||||
zipCode: serviceLocation.zipCode,
|
||||
zipCodeCtu: zipCodeCtu,
|
||||
appointmentType,
|
||||
isVehicleProtected: isMobile ? serviceLocation.isVehicleProtected : null,
|
||||
provider: {
|
||||
providerNumber: selectedProvider?.providerNumber,
|
||||
address: {
|
||||
streetAddress: selectedProvider?.address?.streetAddress ?? null,
|
||||
city: selectedProvider?.address?.city ?? null,
|
||||
state: selectedProvider?.address?.state ?? null,
|
||||
zipCode: selectedProvider?.address?.zipCode ?? null,
|
||||
zipCodeCtu: selectedProvider?.address?.zipCodeCtu ?? null,
|
||||
},
|
||||
},
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
if (this.billToAccountNumber) {
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_BILL_TO_ACCOUNT_NUMBER,
|
||||
this.billToAccountNumber,
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
this.updateSupportingItems(selectedScheduling);
|
||||
|
||||
const selectedTimeSlot = this.getSelectedTimeSlot(
|
||||
appointmentType,
|
||||
selectedScheduling,
|
||||
selectedDate
|
||||
);
|
||||
const estimatedServiceMinutes = this.getEstimatedServiceMinutes(
|
||||
appointmentType,
|
||||
selectedScheduling
|
||||
);
|
||||
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_SCHEDULE,
|
||||
{
|
||||
date: selectedDate,
|
||||
routeCode: selectedScheduling?.routeCodeId ?? null,
|
||||
startTime: selectedTimeSlot?.startTime ?? null,
|
||||
endTime: selectedTimeSlot?.endTime ?? null,
|
||||
jobMinMinutes: estimatedServiceMinutes.minimum?.toString() ?? null,
|
||||
jobMaxMinutes: estimatedServiceMinutes.maximum?.toString() ?? null,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
if (this.isWaitlistRequested !== null && this.isWaitlistRequested !== undefined) {
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_WAITLIST_REQUESTED,
|
||||
this.isWaitlistRequested,
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
if (isMobile) {
|
||||
this.$router.navigateWithSaving(
|
||||
this.navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
|
||||
this.pageName
|
||||
|
|
@ -449,6 +837,8 @@ export default {
|
|||
inshopSchedulingCard,
|
||||
interceptOverlay,
|
||||
waitlistQuestion,
|
||||
schedulingZipSearch,
|
||||
textLink,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -476,4 +866,19 @@ h5 {
|
|||
.card-slide-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.chevron-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
transform: rotate(180deg);
|
||||
transition: transform 150ms linear;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.spacing-gap {
|
||||
margin-right: 6.5px;
|
||||
}
|
||||
|
||||
:deep(.text-link) {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</span>
|
||||
<loader
|
||||
v-if="isLoaderDisplayed"
|
||||
:loaderPosition="left"
|
||||
loaderPosition="left"
|
||||
:allowPageInteraction="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,10 +32,10 @@
|
|||
:isRequired="false"
|
||||
:validationRules="''" />
|
||||
</form>
|
||||
<div v-show="isLoading" class="loader-wrapper">
|
||||
<div v-if="isLoading" class="loader-wrapper">
|
||||
<loader loaderColor="blue" loaderPosition="center" />
|
||||
</div>
|
||||
<div v-show="!isLoading">
|
||||
<div v-if="!isLoading">
|
||||
<alert
|
||||
ref="alertInvalidZip"
|
||||
v-if="displayInvalidZipAlert"
|
||||
|
|
|
|||
|
|
@ -7,9 +7,17 @@ import baseMixin from "@/mixins/base-mixin.js";
|
|||
import store from "@/store";
|
||||
import { getIsWindshieldOnly } from "@/helpers/damage-helper";
|
||||
import { partTypeStrings } from "@/constants/part-type-strings";
|
||||
import { buildQuestionChainAnswerValue } from "@/helpers/question-chain-helper";
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
clearQuestionsAnswerData() {
|
||||
this.questionsData?.forEach((glass) => {
|
||||
if (glass.answerData) {
|
||||
glass.answerData = {};
|
||||
}
|
||||
});
|
||||
},
|
||||
hasPartQuestions(partsOrQuestions) {
|
||||
return partsOrQuestions?.some((pq) => pq.partQuestions?.length > 0);
|
||||
},
|
||||
|
|
@ -114,11 +122,12 @@ export default {
|
|||
);
|
||||
});
|
||||
// set the answerString to use for answerSelected
|
||||
if (chosenAns.nextQuestionSequence) {
|
||||
answerString = `${answeredQuestion.questionNum}|nextQuestion|${chosenAns.nextQuestionSequence}|${chosenAns.answerText}`;
|
||||
} else {
|
||||
answerString = `${answeredQuestion.questionNum}|answer|${chosenAns.answerResult}|${chosenAns.answerText}`;
|
||||
}
|
||||
answerString = buildQuestionChainAnswerValue({
|
||||
questionSequence: answeredQuestion.questionNum,
|
||||
nextQuestionSequence: chosenAns.nextQuestionSequence,
|
||||
answerResult: chosenAns.answerResult,
|
||||
answerText: chosenAns.answerText,
|
||||
});
|
||||
|
||||
// mark this question as answered (question-chain will read this)
|
||||
glass.questions[answeredQuestion.questionNum - 1].answerSelected =
|
||||
|
|
@ -177,6 +186,8 @@ export default {
|
|||
*/
|
||||
|
||||
const self = vm ?? this;
|
||||
const isIncomplete = !!answer.incomplete;
|
||||
const hadSavedAnswer = !!self.questionsData[answer.index]?.answerData?.answerResult;
|
||||
|
||||
// clear out any preloaded answers
|
||||
self.selectedAnswers = {};
|
||||
|
|
@ -193,7 +204,6 @@ export default {
|
|||
*/
|
||||
|
||||
const answeredQuestionText = answeredQuestion.questionText.toUpperCase();
|
||||
const answeredQuestionAnswer = answeredQuestion.selectedAnswer.toUpperCase();
|
||||
const answeredQuestionAnswerText =
|
||||
answeredQuestion.selectedAnswerText.toUpperCase();
|
||||
const answeredQuestionNum = answeredQuestion.questionNum;
|
||||
|
|
@ -208,8 +218,7 @@ export default {
|
|||
if (answeredQuestionIndex === 0) question.answerSelected = null;
|
||||
|
||||
if (answeredQuestionNum - 1 === questionIndex) {
|
||||
// on the right question
|
||||
question.answerSelected = answeredQuestionAnswer;
|
||||
question.answerSelected = answeredQuestion.selectedAnswer;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -346,6 +355,27 @@ export default {
|
|||
});
|
||||
});
|
||||
|
||||
if (isIncomplete) {
|
||||
// User changed an earlier answer; downstream questions were cleared in the chain
|
||||
self.questionsData[answer.index].answerData = null;
|
||||
self.currentGlassIndex = answer.index;
|
||||
|
||||
if (hadSavedAnswer) {
|
||||
self.questionsData[answer.index].key =
|
||||
(self.questionsData[answer.index].key ??
|
||||
self.questionsData[answer.index].answerKey ??
|
||||
answer.index) + Date.now().toString();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Force re-render so the updated selection displays when changing a prior answer
|
||||
self.questionsData[answer.index].key =
|
||||
(self.questionsData[answer.index].key ??
|
||||
self.questionsData[answer.index].answerKey ??
|
||||
answer.index) + Date.now().toString();
|
||||
|
||||
// set final answer data for the current answered glass part
|
||||
self.questionsData[answer.index].answerData = {
|
||||
answerResult: answer.answerResult,
|
||||
|
|
|
|||
|
|
@ -499,6 +499,88 @@ describe("vehicle-questions-mixin", () => {
|
|||
// Assert
|
||||
expect(wrapper.vm.selectedAnswers).toMatchObject({});
|
||||
});
|
||||
|
||||
test("should clear answerData and keep currentGlassIndex when answer is incomplete", () => {
|
||||
const answer = {
|
||||
incomplete: true,
|
||||
answeredQuestions: [
|
||||
{
|
||||
questionText: "Is this the Overland edition?",
|
||||
selectedAnswer: "1|nextQuestion|5|No",
|
||||
selectedAnswerText: "No",
|
||||
questionNum: 1,
|
||||
},
|
||||
],
|
||||
index: 0,
|
||||
};
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
wrapper.vm.currentGlassIndex = 1;
|
||||
wrapper.vm.questionsData = [
|
||||
{
|
||||
glassLocation: "Windshield",
|
||||
glassName: "Single",
|
||||
questions: [
|
||||
{
|
||||
questionSequence: 1,
|
||||
questionText: "Is this the Overland edition?",
|
||||
answers: [],
|
||||
},
|
||||
],
|
||||
answerData: { answerResult: "OLD-PART" },
|
||||
answerKey: "Windshield-Single",
|
||||
},
|
||||
{
|
||||
glassLocation: "Driver",
|
||||
glassName: "Front",
|
||||
questions: [],
|
||||
answerData: { answerResult: "OTHER-PART" },
|
||||
},
|
||||
];
|
||||
|
||||
wrapper.vm.handleCompletedQuestionChainAnswers(answer, "", wrapper.vm);
|
||||
|
||||
expect(wrapper.vm.questionsData[0].answerData).toBeNull();
|
||||
expect(wrapper.vm.questionsData[1].answerData).toBeNull();
|
||||
expect(wrapper.vm.currentGlassIndex).toBe(0);
|
||||
});
|
||||
|
||||
test("should not bump key when incomplete answer had no saved answer", () => {
|
||||
const answer = {
|
||||
incomplete: true,
|
||||
answeredQuestions: [
|
||||
{
|
||||
questionText: "Is this the Overland edition?",
|
||||
selectedAnswer: "1|nextQuestion|2|Yes",
|
||||
selectedAnswerText: "Yes",
|
||||
questionNum: 1,
|
||||
},
|
||||
],
|
||||
index: 0,
|
||||
};
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
wrapper.vm.questionsData = [
|
||||
{
|
||||
glassLocation: "Windshield",
|
||||
glassName: "Single",
|
||||
questions: [
|
||||
{
|
||||
questionSequence: 1,
|
||||
questionText: "Is this the Overland edition?",
|
||||
answers: [],
|
||||
},
|
||||
],
|
||||
answerData: null,
|
||||
answerKey: "Windshield-Single",
|
||||
key: "stable-key",
|
||||
},
|
||||
];
|
||||
|
||||
wrapper.vm.handleCompletedQuestionChainAnswers(answer, "", wrapper.vm);
|
||||
|
||||
expect(wrapper.vm.questionsData[0].key).toBe("stable-key");
|
||||
});
|
||||
});
|
||||
|
||||
describe("questions in glass parts that are after the answered glass", () => {
|
||||
|
|
|
|||
|
|
@ -133,6 +133,8 @@ const getDefaultState = () => {
|
|||
dateOfLoss: null,
|
||||
damageCause: null,
|
||||
installOemGlass: null,
|
||||
damageCity: null,
|
||||
damageState: null,
|
||||
},
|
||||
lineItems: {
|
||||
glassParts: null,
|
||||
|
|
@ -618,6 +620,8 @@ export const mutations = {
|
|||
if (damageDetails) {
|
||||
state.order.damage.dateOfLoss = damageDetails.dateOfLoss;
|
||||
state.order.damage.damageCause = damageDetails.damageCause;
|
||||
state.order.damage.damageState = damageDetails.damageState;
|
||||
state.order.damage.damageCity = damageDetails.damageCity;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -891,7 +895,8 @@ export const mutations = {
|
|||
sessionInformation.order.damage?.dateOfLoss
|
||||
);
|
||||
state.order.damage.damageCause = sessionInformation.order.damage?.damageCause;
|
||||
|
||||
state.order.damage.damageState = sessionInformation.order.damage?.damageState;
|
||||
state.order.damage.damageCity = sessionInformation.order.damage?.damageCity;
|
||||
state.order.damage.partQuestionAnswers =
|
||||
sessionInformation.order.damage.partQuestionAnswers;
|
||||
state.order.damage.moldingQuestionAnswers =
|
||||
|
|
@ -2012,35 +2017,30 @@ export const actions = {
|
|||
const vehicle = context.getters.vehicle;
|
||||
const damage = context.getters.damage;
|
||||
const order = context.state.order;
|
||||
const payment = context.getters.payment;
|
||||
|
||||
const carId = vehicle.carId;
|
||||
const glassArray = damage.glassToReplace;
|
||||
const zipCode = order.serviceLocation.zipCode;
|
||||
const vin = vehicle.vin;
|
||||
const serviceType = damage.isRepair ? "Repair" : "Install";
|
||||
const parentAccountNumber = context.getters.payment.parentAccountNumber;
|
||||
const referralSeqNumber = order.referralSequenceNumber;
|
||||
|
||||
// create a new array to avoid mutating state
|
||||
const glassArrayForPayload = convertGlassPieceNamingForApi(glassArray);
|
||||
const glassArrayForPayload = convertGlassPieceNamingForApi(damage.glassToReplace);
|
||||
|
||||
const partsOrQuestionsEndpoint = vehicle.vinRequired
|
||||
? endpoints.GetPartsOrQuestionsV2
|
||||
: endpoints.GetPartsOrQuestions;
|
||||
|
||||
const requestPayload = {
|
||||
carId: vehicle.carId,
|
||||
glassPieces: glassArrayForPayload,
|
||||
zip: order.serviceLocation.zipCode,
|
||||
vin: vehicle.vin,
|
||||
serviceType: damage.isRepair ? "Repair" : "Install",
|
||||
referralSeqNumber: order.referralSequenceNumber,
|
||||
parentAccountNumber: payment.parentAccountNumber,
|
||||
billToAccountNumber: payment.billToAccountNumber,
|
||||
};
|
||||
|
||||
const response = await globalMethods
|
||||
.callHttpClient({
|
||||
method: partsOrQuestionsEndpoint.method,
|
||||
endpoint: partsOrQuestionsEndpoint.url,
|
||||
payload: {
|
||||
carId: carId,
|
||||
glassPieces: glassArrayForPayload,
|
||||
zip: zipCode,
|
||||
vin: vin,
|
||||
serviceType: serviceType,
|
||||
referralSeqNumber: referralSeqNumber,
|
||||
parentAccountNumber: parentAccountNumber,
|
||||
},
|
||||
payload: requestPayload,
|
||||
logApiCall: true,
|
||||
pageNameToLog: pageNameToLog,
|
||||
})
|
||||
|
|
@ -2076,32 +2076,25 @@ export const actions = {
|
|||
const order = context.state.order;
|
||||
const payment = context.getters.payment;
|
||||
|
||||
const carId = vehicle.carId;
|
||||
const glassArray = damage.glassToReplace;
|
||||
const resultsArray = damage.partQuestionAnswers;
|
||||
const zipCode = order.serviceLocation.zipCode;
|
||||
const vin = vehicle.vin;
|
||||
const serviceType = order.serviceLocation?.appointmentType;
|
||||
const referralSeqNumber = order.referralSequenceNumber;
|
||||
const parentAccountNumber = payment.parentAccountNumber;
|
||||
const glassArrayForPayload = convertGlassPieceNamingForApi(damage.glassToReplace);
|
||||
const resultsArrayForPayload = convertResultsForApi(damage.partQuestionAnswers);
|
||||
|
||||
// create a new array to avoid mutating state
|
||||
const glassArrayForPayload = convertGlassPieceNamingForApi(glassArray);
|
||||
const resultsArrayForPayload = convertResultsForApi(resultsArray);
|
||||
const requestPayload = {
|
||||
carId: vehicle.carId,
|
||||
glassPieces: glassArrayForPayload,
|
||||
answerResults: resultsArrayForPayload,
|
||||
zip: order.serviceLocation.zipCode,
|
||||
vin: vehicle.vin,
|
||||
serviceType: order.serviceLocation?.appointmentType,
|
||||
referralSeqNumber: order.referralSequenceNumber,
|
||||
parentAccountNumber: payment.parentAccountNumber,
|
||||
billToAccountNumber: payment.billToAccountNumber,
|
||||
};
|
||||
|
||||
const response = await globalMethods.callHttpClient({
|
||||
method: endpoints.GetParts.method,
|
||||
endpoint: endpoints.GetParts.url,
|
||||
payload: {
|
||||
carId: carId,
|
||||
glassPieces: glassArrayForPayload,
|
||||
answerResults: resultsArrayForPayload,
|
||||
zip: zipCode,
|
||||
vin: vin,
|
||||
serviceType: serviceType,
|
||||
referralSeqNumber: referralSeqNumber,
|
||||
parentAccountNumber: parentAccountNumber,
|
||||
},
|
||||
payload: requestPayload,
|
||||
logApiCall: true,
|
||||
pageNameToLog: pageNameToLog,
|
||||
});
|
||||
|
|
@ -2864,6 +2857,8 @@ export const actions = {
|
|||
installOemGlass: order.damage.installOemGlass,
|
||||
dateOfLoss: order.damage.dateOfLoss,
|
||||
damageCause: order.damage.damageCause,
|
||||
damageState: order.damage.damageState,
|
||||
damageCity: order.damage.damageCity,
|
||||
},
|
||||
lineItems: {
|
||||
glassParts: lineItems.glassParts,
|
||||
|
|
|
|||
|
|
@ -36,48 +36,6 @@ describe("buttonMain.vue", () => {
|
|||
expect(button.attributes()["aria-disabled"]).toEqual("true");
|
||||
});
|
||||
|
||||
it("Should return loader color", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
buttonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
loaderEnabled: true,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
// Act
|
||||
wrapper.vm.clicked();
|
||||
await nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.find("loader-stub");
|
||||
expect(loader.attributes("class")).toContain("blue");
|
||||
});
|
||||
|
||||
it("Should return loader position", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
buttonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
loaderEnabled: true,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
// Act
|
||||
wrapper.vm.clicked();
|
||||
await nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.find("loader-stub");
|
||||
expect(loader.attributes("class")).toContain("right");
|
||||
});
|
||||
|
||||
it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<loader
|
||||
class="ms-2"
|
||||
v-if="isLoaderDisplayed && !suppressLoader"
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]" />
|
||||
:loaderColor="loaderColor"
|
||||
:loaderPosition="loaderPosition" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
@ -64,6 +65,7 @@ export default {
|
|||
<style lang="scss">
|
||||
.btn {
|
||||
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
|
||||
|
||||
&.btn-primary {
|
||||
position: relative;
|
||||
background: $red;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import { mount, shallowMount } from "@vue/test-utils";
|
||||
import interceptOverlay from "./intercept-overlay";
|
||||
|
||||
describe("intercept-overlay.vue", () => {
|
||||
|
|
@ -43,4 +43,30 @@ describe("intercept-overlay.vue", () => {
|
|||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
describe("click interception", () => {
|
||||
test("captureClick prevents default and stops propagation", () => {
|
||||
const wrapper = shallowMount(interceptOverlay);
|
||||
const event = { preventDefault: jest.fn(), stopPropagation: jest.fn() };
|
||||
wrapper.vm.captureClick(event);
|
||||
expect(event.preventDefault).toHaveBeenCalled();
|
||||
expect(event.stopPropagation).toHaveBeenCalled();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("clicking the overlay does not propagate to document listeners", async () => {
|
||||
const documentClickFn = jest.fn();
|
||||
document.addEventListener("click", documentClickFn);
|
||||
|
||||
const wrapper = mount(interceptOverlay, { attachTo: document.body });
|
||||
|
||||
const overlay = wrapper.find(".intercept-overlay");
|
||||
await overlay.trigger("click");
|
||||
|
||||
expect(documentClickFn).not.toHaveBeenCalled();
|
||||
|
||||
document.removeEventListener("click", documentClickFn);
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<div class="intercept-overlay" aria-hidden="true" @keydown.capture="blockKey"></div>
|
||||
<div
|
||||
class="intercept-overlay"
|
||||
aria-hidden="true"
|
||||
@keydown.capture="blockKey"
|
||||
@click="captureClick"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -16,6 +20,10 @@ export default {
|
|||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
},
|
||||
captureClick(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -30,60 +30,6 @@ describe("list-button.vue", () => {
|
|||
const loader = wrapper.findComponent({ name: "loader" });
|
||||
expect(loader.exists()).toBe(true);
|
||||
});
|
||||
|
||||
it("Should return loader color", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
global: {
|
||||
mocks: {
|
||||
$route: { query: { fmgPage: "page-name" } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
},
|
||||
},
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.selectedValue = "something";
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.findComponent({ name: "loader" });
|
||||
expect(loader.attributes("class")).toContain("blue");
|
||||
});
|
||||
|
||||
it("Should return loader position", async () => {
|
||||
// Act
|
||||
const { wrapper } = setupMocks({
|
||||
mockData: {
|
||||
global: {
|
||||
mocks: {
|
||||
$route: { query: { fmgPage: "page-name" } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
},
|
||||
},
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.selectedValue = "something";
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.findComponent({ name: "loader" });
|
||||
expect(loader.attributes("class")).toContain("right");
|
||||
});
|
||||
});
|
||||
|
||||
describe("baseInputButton checks", () => {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@
|
|||
</span>
|
||||
<loader
|
||||
v-if="isLoaderDisplayed && selectingInitiatesLoad"
|
||||
:class="[this.loaderColor, this.loaderPosition]" />
|
||||
:loaderColor="loaderColor"
|
||||
:loaderPosition="loaderPosition" />
|
||||
</div>
|
||||
</baseInputButton>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,18 +3,16 @@ import loader from "./loader";
|
|||
|
||||
describe("loader.vue", () => {
|
||||
test("if it rendered the HTML element with class", () => {
|
||||
// Arrange/Act
|
||||
const wrapper = shallowMount(loader, {
|
||||
props: {},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.find("div").exists()).toBeTruthy();
|
||||
expect(wrapper.find(".loader").exists()).toBeTruthy();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("if it correctly passed props", () => {
|
||||
// Arrange/Act
|
||||
test("applies loaderColor and loaderPosition as CSS classes on the loader element", () => {
|
||||
const wrapper = shallowMount(loader, {
|
||||
props: {
|
||||
loaderColor: "blue",
|
||||
|
|
@ -22,64 +20,95 @@ describe("loader.vue", () => {
|
|||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.props()).toMatchObject({
|
||||
loaderColor: "blue",
|
||||
loaderPosition: "left",
|
||||
});
|
||||
const loaderElement = wrapper.find(".loader");
|
||||
expect(loaderElement.classes()).toContain("blue");
|
||||
expect(loaderElement.classes()).toContain("left");
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
describe("Blocking interaction on page", () => {
|
||||
test("Does capture clicks if enabled (default)", async () => {
|
||||
// Arrange
|
||||
const div = document.createElement("div");
|
||||
div.id = "parent";
|
||||
document.body.appendChild(div);
|
||||
let parent;
|
||||
|
||||
const parentClickFn = jest.fn();
|
||||
|
||||
div.addEventListener("click", parentClickFn);
|
||||
|
||||
const wrapper = shallowMount(loader, {
|
||||
props: {},
|
||||
attachTo: "#parent",
|
||||
});
|
||||
|
||||
// Act
|
||||
await wrapper.trigger("click");
|
||||
|
||||
// Assert
|
||||
expect(parentClickFn).not.toBeCalled();
|
||||
|
||||
// Cleanup
|
||||
document.body.removeChild(div);
|
||||
beforeEach(() => {
|
||||
parent = document.createElement("div");
|
||||
parent.id = "loader-test-parent";
|
||||
document.body.appendChild(parent);
|
||||
});
|
||||
|
||||
test("Does not capture clicks if disabled", async () => {
|
||||
// Arrange
|
||||
const div = document.createElement("div");
|
||||
div.id = "parent";
|
||||
document.body.appendChild(div);
|
||||
afterEach(() => {
|
||||
document.body.querySelectorAll(".intercept-overlay").forEach((el) => el.remove());
|
||||
if (parent?.parentNode) {
|
||||
parent.parentNode.removeChild(parent);
|
||||
}
|
||||
});
|
||||
|
||||
const parentClickFn = jest.fn();
|
||||
test("teleports intercept overlay to document.body when blocking is enabled", () => {
|
||||
const wrapper = mount(loader, {
|
||||
props: {},
|
||||
attachTo: "#loader-test-parent",
|
||||
});
|
||||
|
||||
div.addEventListener("click", parentClickFn);
|
||||
const overlayInBody = document.body.querySelector(".intercept-overlay");
|
||||
const overlayInParent = parent.querySelector(".intercept-overlay");
|
||||
|
||||
const wrapper = shallowMount(loader, {
|
||||
expect(overlayInBody).toBeTruthy();
|
||||
expect(overlayInParent).toBeNull();
|
||||
expect(wrapper.find(".intercept-overlay").exists()).toBe(false);
|
||||
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("does not render intercept overlay when allowPageInteraction is true", () => {
|
||||
const wrapper = mount(loader, {
|
||||
props: {
|
||||
allowPageInteraction: true,
|
||||
},
|
||||
attachTo: "#parent",
|
||||
attachTo: "#loader-test-parent",
|
||||
});
|
||||
|
||||
// Act
|
||||
await wrapper.trigger("click");
|
||||
expect(document.body.querySelector(".intercept-overlay")).toBeNull();
|
||||
expect(wrapper.find(".loader").exists()).toBe(true);
|
||||
|
||||
// Assert
|
||||
expect(parentClickFn).toBeCalled();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
// Cleanup
|
||||
document.body.removeChild(div);
|
||||
test("clicking the teleported overlay does not propagate to document listeners", async () => {
|
||||
const documentClickFn = jest.fn();
|
||||
document.addEventListener("click", documentClickFn);
|
||||
|
||||
const wrapper = mount(loader, {
|
||||
props: {},
|
||||
attachTo: "#loader-test-parent",
|
||||
});
|
||||
|
||||
const overlay = document.body.querySelector(".intercept-overlay");
|
||||
expect(overlay).toBeTruthy();
|
||||
|
||||
overlay.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
|
||||
|
||||
expect(documentClickFn).not.toHaveBeenCalled();
|
||||
|
||||
document.removeEventListener("click", documentClickFn);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("teleports overlay to body even when loader is mounted inside a button", async () => {
|
||||
const button = document.createElement("button");
|
||||
button.type = "button";
|
||||
parent.appendChild(button);
|
||||
|
||||
const wrapper = mount(loader, {
|
||||
props: {},
|
||||
attachTo: button,
|
||||
});
|
||||
|
||||
const overlayInBody = document.body.querySelector(".intercept-overlay");
|
||||
const overlayInButton = button.querySelector(".intercept-overlay");
|
||||
|
||||
expect(overlayInBody).toBeTruthy();
|
||||
expect(overlayInButton).toBeNull();
|
||||
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<Teleport to="body">
|
||||
<interceptOverlay v-if="!allowPageInteraction" />
|
||||
</Teleport>
|
||||
<div
|
||||
class="loader"
|
||||
role="alert"
|
||||
aria-label="Loading new page"
|
||||
@click="captureClick"
|
||||
v-bind:class="[
|
||||
this.loaderColor,
|
||||
this.loaderPosition,
|
||||
this.allowPageInteraction ? 'allow-ui-interaction' : '',
|
||||
]"></div>
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import interceptOverlay from "../intercept-overlay/intercept-overlay.vue";
|
||||
|
||||
export default {
|
||||
name: "loader",
|
||||
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
|
||||
|
|
@ -31,12 +31,9 @@ export default {
|
|||
default: false,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
captureClick(event) {
|
||||
if (!this.allowPageInteraction) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
components: {
|
||||
interceptOverlay,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -46,18 +43,6 @@ export default {
|
|||
display: flex;
|
||||
pointer-events: all;
|
||||
|
||||
//Open an overlay to prevent page interaction
|
||||
&:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
cursor: default;
|
||||
}
|
||||
//Spinner basics
|
||||
&:after {
|
||||
content: "";
|
||||
|
|
@ -101,9 +86,5 @@ export default {
|
|||
&.black:after {
|
||||
background-color: $black;
|
||||
}
|
||||
&.allow-ui-interaction::before {
|
||||
//no-block to enable clicking on certain buttons with loaders while the loader is actives
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue