Merge branch 'release/2026.08.13' into rlsmerge/2026.08.13-to-dev
This commit is contained in:
Carl Nation
commit
e4cccc4a68
22 changed files with 2003 additions and 198 deletions
10
src/constants/save-progress-cms-widgets.js
Normal file
10
src/constants/save-progress-cms-widgets.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
const saveProgressCmsWidgets = {
|
||||
PHONE_SPECIFIC: "SaveProgressPopupWidget_PhoneSpecific",
|
||||
EMAIL_SPECIFIC: "SaveProgressPopupWidget_EmailSpecific",
|
||||
MODAL_PHONE_QUESTION: "SaveProgressPhoneQuestionWidget",
|
||||
MODAL_EMAIL_QUESTION: "SaveProgressEmailQuestionWidget",
|
||||
POPUP_PHONE_QUESTION: "SaveProgressPopupPhoneQuestionWidget",
|
||||
POPUP_EMAIL_QUESTION: "SaveProgressPopupEmailQuestionWidget",
|
||||
};
|
||||
|
||||
export { saveProgressCmsWidgets };
|
||||
|
|
@ -324,18 +324,65 @@ describe("Question Chain component", () => {
|
|||
});
|
||||
});
|
||||
|
||||
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 { 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 () => {
|
||||
|
|
@ -528,6 +575,27 @@ describe("Question Chain component", () => {
|
|||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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="isQuestionVisible(q)"
|
||||
:key="q.questionSequence"
|
||||
class="radioQuestion"
|
||||
:class="isCurrentQuestion(q) && 'current-question'"
|
||||
:class="{ 'current-question': isCurrentQuestion(q) }"
|
||||
:questionText="q.questionText"
|
||||
:answers="q.answers"
|
||||
:groupName="`question-${index}-${q.questionSequence}`"
|
||||
|
|
@ -61,7 +67,6 @@ export default {
|
|||
|
||||
if (this.questions.length > 0) {
|
||||
this.initializeCurrentQuestionNum();
|
||||
this.scrollCurrentQuestionIntoView();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -105,6 +110,11 @@ export default {
|
|||
this.currentQuestionNum = this.getQuestionSequence(firstUnanswered);
|
||||
}
|
||||
},
|
||||
onQuestionEnter(question) {
|
||||
if (this.isCurrentQuestion(question)) {
|
||||
this.scrollCurrentQuestionIntoView();
|
||||
}
|
||||
},
|
||||
scrollCurrentQuestionIntoView() {
|
||||
this.$nextTick(() => {
|
||||
document.querySelector(".current-question")?.scrollIntoView({ behavior: "smooth" });
|
||||
|
|
@ -201,7 +211,6 @@ export default {
|
|||
if (questionType === "nextQuestion") {
|
||||
// update to next question index
|
||||
this.currentQuestionNum = Number(questionAnswer);
|
||||
this.scrollCurrentQuestionIntoView();
|
||||
return {
|
||||
incomplete: true,
|
||||
answeredQuestions,
|
||||
|
|
|
|||
|
|
@ -1,43 +1,261 @@
|
|||
import { mount, shallowMount } from "@vue/test-utils";
|
||||
import { mount } from "@vue/test-utils";
|
||||
import saveProgressModalQuestion from "./save-progress-modal-question";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { saveProgressCmsWidgets } from "@/constants/save-progress-cms-widgets";
|
||||
import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";
|
||||
import experimentMixin from "@/mixins/experiment-mixin.js";
|
||||
import { experimentSettings } from "@/constants/experiments";
|
||||
|
||||
jest.mock("@/helpers/heritage-integration/order-helper.js", () => ({
|
||||
saveQuote: jest.fn().mockResolvedValue(undefined),
|
||||
}));
|
||||
|
||||
jest.mock("@/helpers/save-progress-sms-consent/save-progress-sms-consent-helper", () => ({
|
||||
...jest.requireActual("@/helpers/save-progress-sms-consent/save-progress-sms-consent-helper"),
|
||||
getSaveProgressSmsConsentConfig: jest.fn().mockReturnValue({
|
||||
copy: {
|
||||
transactional: "Sign me up for updates about my upcoming service.",
|
||||
marketing: "Sign me up for promotional and product offers.",
|
||||
},
|
||||
value: { transactional: false, marketing: false },
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock("@/digital-components/modal/modal", () => ({
|
||||
methods: {
|
||||
openModal: jest.fn(),
|
||||
closeModal: jest.fn(),
|
||||
resetButtonStyle: jest.fn(),
|
||||
resetForm: jest.fn(),
|
||||
validate: jest.fn().mockResolvedValue({ valid: true }),
|
||||
},
|
||||
}));
|
||||
|
||||
describe("save-progress-modal-question ", () => {
|
||||
describe("when openModal is run ", () => {
|
||||
test("the modal should open ", () => {
|
||||
// Arrange
|
||||
jest.mock("@/ux-components/alert/alert", () => ({
|
||||
name: "alert",
|
||||
template: "<div />",
|
||||
}));
|
||||
|
||||
describe("save-progress-modal-question", () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
experimentMixin.methods.hasSettingEqualTo = jest.fn().mockReturnValue(false);
|
||||
});
|
||||
|
||||
describe("when openModal is run", () => {
|
||||
test("the modal should open", () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modelValue: "",
|
||||
modalWidgetName: "testModal",
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.openModal();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.modal).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("legacy email-only mode", () => {
|
||||
test("should save email to the store", async () => {
|
||||
const { wrapper, dispatchStoreAction } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressModalWidget",
|
||||
pageName: "part-questions",
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.userInput = "test@example.com";
|
||||
await wrapper.vm.saveProgress();
|
||||
|
||||
expect(dispatchStoreAction).toHaveBeenCalledWith(
|
||||
storeActions.SAVE_EMAIL,
|
||||
"test@example.com",
|
||||
false
|
||||
);
|
||||
expect(saveQuote).toHaveBeenCalledWith({ pageNameToLog: "part-questions" });
|
||||
expect(wrapper.vm.isProgressSaved).toBe(true);
|
||||
});
|
||||
|
||||
test("should use the legacy disclaimer widget", () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressModalWidget",
|
||||
},
|
||||
cmsContent: {
|
||||
SaveProgressModalWidget: { FooterText2: "Legacy disclaimer" },
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.modalDisclaimerText).toBe("Legacy disclaimer");
|
||||
});
|
||||
});
|
||||
|
||||
describe("consent management mode", () => {
|
||||
beforeEach(() => {
|
||||
experimentMixin.methods.hasSettingEqualTo = jest
|
||||
.fn()
|
||||
.mockImplementation(
|
||||
(settingName, settingValue) =>
|
||||
settingName === experimentSettings.SHOW_CONSENT_MANAGEMENT &&
|
||||
settingValue === "true"
|
||||
);
|
||||
});
|
||||
|
||||
test("should default to the phone tab when opened", () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressModalWidget",
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.openModal();
|
||||
|
||||
expect(wrapper.vm.isPhoneTabSelected).toBe(true);
|
||||
});
|
||||
|
||||
test("should use popup-specific tab labels from CMS widgets", () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressModalWidget",
|
||||
},
|
||||
cmsContent: {
|
||||
SaveProgressPopupWidget_PhoneSpecific: { HeadlineText: "PHONE" },
|
||||
SaveProgressPopupWidget_EmailSpecific: { HeadlineText: "EMAIL" },
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.contactTabs).toEqual([
|
||||
{ label: "PHONE", value: "PhoneAnswer" },
|
||||
{ label: "EMAIL", value: "EmailAnswer" },
|
||||
]);
|
||||
});
|
||||
|
||||
test("should use the modal question CMS widgets for phone and email inputs", () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressModalWidget",
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.phoneQuestionWidgetName).toBe(
|
||||
saveProgressCmsWidgets.MODAL_PHONE_QUESTION
|
||||
);
|
||||
expect(wrapper.vm.emailQuestionWidgetName).toBe(
|
||||
saveProgressCmsWidgets.MODAL_EMAIL_QUESTION
|
||||
);
|
||||
});
|
||||
|
||||
test("should use the email-specific popup disclaimer on the email tab", async () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressModalWidget",
|
||||
},
|
||||
cmsContent: {
|
||||
SaveProgressPopupWidget_EmailSpecific: { BodyText: "Email disclaimer" },
|
||||
SaveProgressPopupWidget_PhoneSpecific: { BodyText: "Phone disclaimer" },
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.selectContactMethod("EmailAnswer");
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
expect(wrapper.vm.modalDisclaimerText).toBe("Email disclaimer");
|
||||
});
|
||||
|
||||
test("should use the phone-specific popup disclaimer on the phone tab", () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressModalWidget",
|
||||
},
|
||||
cmsContent: {
|
||||
SaveProgressPopupWidget_EmailSpecific: { BodyText: "Email disclaimer" },
|
||||
SaveProgressPopupWidget_PhoneSpecific: { BodyText: "Phone disclaimer" },
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.contactMethod = "PhoneAnswer";
|
||||
|
||||
expect(wrapper.vm.modalDisclaimerText).toBe("Phone disclaimer");
|
||||
});
|
||||
|
||||
test("should show consent errors when phone is valid but transactional consent is missing", async () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressModalWidget",
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.contactMethod = "PhoneAnswer";
|
||||
wrapper.vm.userInput = "5551234567";
|
||||
wrapper.vm.smsConsent = { transactional: false, marketing: false };
|
||||
|
||||
await wrapper.vm.validatePhoneAndSave();
|
||||
|
||||
expect(wrapper.vm.showConsentErrors).toBe(true);
|
||||
});
|
||||
|
||||
test("should save phone and sms consent when valid", async () => {
|
||||
const { wrapper, dispatchStoreAction } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressModalWidget",
|
||||
pageName: "vehicle-parts",
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.contactMethod = "PhoneAnswer";
|
||||
wrapper.vm.userInput = "555-123-4567";
|
||||
wrapper.vm.smsConsent = { transactional: true, marketing: true };
|
||||
|
||||
await wrapper.vm.saveProgress();
|
||||
|
||||
expect(dispatchStoreAction).toHaveBeenCalledWith(
|
||||
storeActions.SAVE_PHONE_NUMBER,
|
||||
"5551234567",
|
||||
false
|
||||
);
|
||||
expect(dispatchStoreAction).toHaveBeenCalledWith(
|
||||
storeActions.SAVE_IS_SMS_OPT_IN,
|
||||
true,
|
||||
false
|
||||
);
|
||||
expect(dispatchStoreAction).toHaveBeenCalledWith(
|
||||
storeActions.SAVE_IS_SMS_MARKETING_OPT_IN,
|
||||
true,
|
||||
false
|
||||
);
|
||||
expect(saveQuote).toHaveBeenCalledWith({ pageNameToLog: "vehicle-parts" });
|
||||
});
|
||||
|
||||
test("should reset sms consent when switching tabs", async () => {
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modalWidgetName: "SaveProgressModalWidget",
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.contactMethod = "PhoneAnswer";
|
||||
wrapper.vm.smsConsent = { transactional: true, marketing: true };
|
||||
wrapper.vm.selectContactMethod("EmailAnswer");
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
expect(wrapper.vm.smsConsent).toEqual({ transactional: false, marketing: false });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({ options, props }) {
|
||||
function setupMocks({ options, props, cmsContent = {} }) {
|
||||
const mountOptions = getMountOptions({
|
||||
...options,
|
||||
});
|
||||
|
||||
const dispatchStoreAction = jest.fn().mockResolvedValue(undefined);
|
||||
|
||||
const mockBaseMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn(),
|
||||
dispatchStoreAction: jest.fn(),
|
||||
getCmsContent: jest.fn((widgetName, fieldName) => cmsContent[widgetName]?.[fieldName]),
|
||||
dispatchStoreAction,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -47,5 +265,5 @@ function setupMocks({ options, props }) {
|
|||
|
||||
const wrapper = mount(saveProgressModalQuestion, mountOptions);
|
||||
|
||||
return { wrapper };
|
||||
return { wrapper, dispatchStoreAction };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,13 +17,66 @@
|
|||
:onModalClosedCallback="onModalClosed"
|
||||
:footerButtonText="modalButtonText"
|
||||
:isFooterButtonPrimary="true"
|
||||
:isFooterButtonSuppressed="isPhoneTabSelected && !isProgressSaved"
|
||||
@footer-button-event="saveProgress">
|
||||
<p class="modal-body-inner" v-html="modalBodyText"></p>
|
||||
<template v-if="showConsentManagement">
|
||||
<fieldset class="save-progress-modal-question__tabs">
|
||||
<div class="save-progress-modal-question__tab-list" role="radiogroup">
|
||||
<label
|
||||
v-for="tab in contactTabs"
|
||||
:key="tab.value"
|
||||
class="save-progress-modal-question__tab"
|
||||
:class="{
|
||||
'save-progress-modal-question__tab--active':
|
||||
contactMethod === tab.value,
|
||||
'save-progress-modal-question__tab--disabled':
|
||||
isContactMethodTabDisabled(tab.value),
|
||||
}">
|
||||
<input
|
||||
type="radio"
|
||||
class="save-progress-modal-question__tab-input"
|
||||
name="saveProgressModalContactMethod"
|
||||
:value="tab.value"
|
||||
:checked="contactMethod === tab.value"
|
||||
:disabled="isContactMethodTabDisabled(tab.value)"
|
||||
@change="selectContactMethod(tab.value)" />
|
||||
<span class="save-progress-modal-question__tab-label">
|
||||
{{ tab.label }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div v-if="isPhoneTabSelected" class="save-progress-modal-question__phone-fields">
|
||||
<phoneNumberQuestion
|
||||
v-model="userInput"
|
||||
:cmsWidgetName="phoneQuestionWidgetName"
|
||||
placeholderText=""
|
||||
:isDisabled="isProgressSaved"
|
||||
isRequired
|
||||
validationRules="save-progress-modal-phone-number-required" />
|
||||
<saveProgressPopupSmsConsentQuestion
|
||||
v-model="smsConsent"
|
||||
:consentCopy="smsConsentCopy"
|
||||
:isDisabled="isProgressSaved"
|
||||
:showConsentErrors="showConsentErrors"
|
||||
:showConsentManagement="showConsentManagement" />
|
||||
</div>
|
||||
</template>
|
||||
<saveProgressQuestion
|
||||
v-if="!showConsentManagement || !isPhoneTabSelected"
|
||||
ref="saveProgressQuestion"
|
||||
v-model="userInput"
|
||||
cmsWidgetName="SaveProgressQuestionWidget" />
|
||||
:cmsWidgetName="emailQuestionWidgetName"
|
||||
:isDisabled="isProgressSaved" />
|
||||
<template v-slot:modal-footer-slot>
|
||||
<modalButtonMain
|
||||
v-if="showConsentManagement && isPhoneTabSelected && !isProgressSaved"
|
||||
ref="phoneSendButton"
|
||||
:isPrimary="true"
|
||||
class="w-100 modal-footer-button"
|
||||
:buttonText="modalButtonText"
|
||||
@click-event="validatePhoneAndSave" />
|
||||
<p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
|
||||
</template>
|
||||
</modal>
|
||||
|
|
@ -37,11 +90,34 @@
|
|||
|
||||
<script>
|
||||
import saveProgressQuestion from "@/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question";
|
||||
import saveProgressPopupSmsConsentQuestion from "@/fmg-components/save-progress-popup-question/save-progress-popup-sms-consent-question";
|
||||
import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
|
||||
import modal from "@/digital-components/modal/modal";
|
||||
import { storeActions } from "@/constants/store-actions.js";
|
||||
import modalButtonMain from "@/digital-components/modal/ux-components/modal-button-main/modal-button-main";
|
||||
import buttonMain from "@/ux-components/button-main/button-main";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";
|
||||
import {
|
||||
saveProgressPopupContactToStore,
|
||||
saveProgressPopupContactMethods,
|
||||
} from "@/helpers/save-progress-popup-contact-helper";
|
||||
import {
|
||||
defaultSaveProgressSmsConsent,
|
||||
getSaveProgressSmsConsentFallbackCopy,
|
||||
getSaveProgressSmsConsentConfig,
|
||||
hasSaveProgressSmsConsentSelection,
|
||||
} from "@/helpers/save-progress-sms-consent/save-progress-sms-consent-helper";
|
||||
import experimentMixin from "@/mixins/experiment-mixin.js";
|
||||
import { experimentSettings } from "@/constants/experiments";
|
||||
import { saveProgressCmsWidgets } from "@/constants/save-progress-cms-widgets";
|
||||
import { defineRule } from "vee-validate";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
|
||||
const { PHONE_SPECIFIC, EMAIL_SPECIFIC, MODAL_PHONE_QUESTION, MODAL_EMAIL_QUESTION } =
|
||||
saveProgressCmsWidgets;
|
||||
|
||||
defineRule("save-progress-modal-phone-number-required", required(errorMessages.PHONE_REQUIRED));
|
||||
|
||||
export default {
|
||||
name: "save-progress-modal-question",
|
||||
|
|
@ -49,15 +125,35 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
userInput: "",
|
||||
contactMethod: saveProgressPopupContactMethods.EMAIL,
|
||||
smsConsent: defaultSaveProgressSmsConsent(),
|
||||
smsConsentCopy: getSaveProgressSmsConsentFallbackCopy(),
|
||||
isProgressSaved: false,
|
||||
savedContactMethod: null,
|
||||
showConsentErrors: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
smsConsent: {
|
||||
handler(consent) {
|
||||
if (hasSaveProgressSmsConsentSelection(consent)) {
|
||||
this.showConsentErrors = false;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
props: {
|
||||
modelValue: Object,
|
||||
modalWidgetName: String,
|
||||
pageName: String,
|
||||
},
|
||||
computed: {
|
||||
showConsentManagement() {
|
||||
return experimentMixin.methods.hasSettingEqualTo(
|
||||
experimentSettings.SHOW_CONSENT_MANAGEMENT,
|
||||
"true"
|
||||
);
|
||||
},
|
||||
buttonText() {
|
||||
return this.getCmsContent(this.modalWidgetName, "SubheaderText");
|
||||
},
|
||||
|
|
@ -71,7 +167,13 @@ export default {
|
|||
return this.getCmsContent(this.modalWidgetName, "FooterText");
|
||||
},
|
||||
modalDisclaimerText() {
|
||||
if (!this.showConsentManagement) {
|
||||
return this.getCmsContent(this.modalWidgetName, "FooterText2");
|
||||
}
|
||||
|
||||
const disclaimerWidgetName = this.isPhoneTabSelected ? PHONE_SPECIFIC : EMAIL_SPECIFIC;
|
||||
|
||||
return this.getCmsContent(disclaimerWidgetName, "BodyText");
|
||||
},
|
||||
modalName() {
|
||||
return this.modalWidgetName;
|
||||
|
|
@ -79,34 +181,121 @@ export default {
|
|||
modal() {
|
||||
return this.$refs[this.modalName];
|
||||
},
|
||||
contactTabs() {
|
||||
return [
|
||||
{
|
||||
label: this.getCmsContent(PHONE_SPECIFIC, "HeadlineText") || "Phone",
|
||||
value: saveProgressPopupContactMethods.PHONE,
|
||||
},
|
||||
{
|
||||
label: this.getCmsContent(EMAIL_SPECIFIC, "HeadlineText") || "Email",
|
||||
value: saveProgressPopupContactMethods.EMAIL,
|
||||
},
|
||||
];
|
||||
},
|
||||
isPhoneTabSelected() {
|
||||
return this.contactMethod === saveProgressPopupContactMethods.PHONE;
|
||||
},
|
||||
phoneQuestionWidgetName() {
|
||||
return MODAL_PHONE_QUESTION;
|
||||
},
|
||||
emailQuestionWidgetName() {
|
||||
return MODAL_EMAIL_QUESTION;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
loadSmsConsentConfig() {
|
||||
const config = getSaveProgressSmsConsentConfig();
|
||||
this.smsConsentCopy = config.copy;
|
||||
|
||||
if (!this.isProgressSaved) {
|
||||
this.smsConsent = config.value;
|
||||
}
|
||||
},
|
||||
resetContactFormState() {
|
||||
this.userInput = "";
|
||||
this.contactMethod = this.showConsentManagement
|
||||
? saveProgressPopupContactMethods.PHONE
|
||||
: saveProgressPopupContactMethods.EMAIL;
|
||||
this.smsConsent = defaultSaveProgressSmsConsent();
|
||||
this.showConsentErrors = false;
|
||||
this.savedContactMethod = null;
|
||||
},
|
||||
selectContactMethod(contactMethod) {
|
||||
if (this.isProgressSaved || this.contactMethod === contactMethod) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.contactMethod = contactMethod;
|
||||
this.userInput = "";
|
||||
this.smsConsent = defaultSaveProgressSmsConsent();
|
||||
this.showConsentErrors = false;
|
||||
},
|
||||
isContactMethodTabDisabled(contactMethod) {
|
||||
return this.isProgressSaved && contactMethod !== this.savedContactMethod;
|
||||
},
|
||||
openModal() {
|
||||
this.resetContactFormState();
|
||||
this.loadSmsConsentConfig();
|
||||
this.modal.openModal();
|
||||
this.modal.resetButtonStyle();
|
||||
},
|
||||
onModalClosed() {
|
||||
this.userInput = "";
|
||||
this.resetContactFormState();
|
||||
this.modal.resetForm();
|
||||
},
|
||||
async saveProgress() {
|
||||
// save email address to store
|
||||
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);
|
||||
async validatePhoneAndSave() {
|
||||
try {
|
||||
const validationResult = await this.modal.validate();
|
||||
|
||||
if (!validationResult.valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!hasSaveProgressSmsConsentSelection(this.smsConsent)) {
|
||||
this.showConsentErrors = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.showConsentErrors = false;
|
||||
await this.saveProgress();
|
||||
} finally {
|
||||
this.resetPhoneSendButtonStyle();
|
||||
}
|
||||
},
|
||||
resetPhoneSendButtonStyle() {
|
||||
this.$refs.phoneSendButton?.resetButtonStyle();
|
||||
},
|
||||
async saveProgress() {
|
||||
await saveProgressPopupContactToStore(this.dispatchStoreAction, {
|
||||
contactMethod: this.showConsentManagement
|
||||
? this.contactMethod
|
||||
: saveProgressPopupContactMethods.EMAIL,
|
||||
userInput: this.userInput,
|
||||
smsConsent:
|
||||
this.showConsentManagement && this.isPhoneTabSelected
|
||||
? this.smsConsent
|
||||
: defaultSaveProgressSmsConsent(),
|
||||
});
|
||||
|
||||
// send store call to send to new API (that triggers an email send)
|
||||
await saveQuote({ pageNameToLog: this.pageName });
|
||||
|
||||
// hide save progress button; show success message alert
|
||||
this.isProgressSaved = true;
|
||||
if (this.showConsentManagement) {
|
||||
this.savedContactMethod = this.contactMethod;
|
||||
}
|
||||
|
||||
this.isProgressSaved = true;
|
||||
this.modal.closeModal();
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
modal,
|
||||
modalButtonMain,
|
||||
buttonMain,
|
||||
saveProgressQuestion,
|
||||
phoneNumberQuestion,
|
||||
saveProgressPopupSmsConsentQuestion,
|
||||
alert,
|
||||
},
|
||||
};
|
||||
|
|
@ -178,7 +367,6 @@ export default {
|
|||
border-radius: 0.25rem;
|
||||
}
|
||||
&.delay {
|
||||
// fixes flicker while transitioning between states
|
||||
transition: background 0s 0s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -218,6 +406,90 @@ export default {
|
|||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.save-progress-modal-question__tabs {
|
||||
border: 0;
|
||||
margin: 0 0 1rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.save-progress-modal-question__tab-list {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.save-progress-modal-question__tab {
|
||||
flex: 1 1 50%;
|
||||
display: grid;
|
||||
min-height: 3.25rem;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.save-progress-modal-question__tab-input {
|
||||
grid-area: 1 / 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
cursor: inherit;
|
||||
|
||||
&:focus-visible + .save-progress-modal-question__tab-label {
|
||||
outline: 2px solid $blue;
|
||||
outline-offset: 2px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.save-progress-modal-question__tab-label {
|
||||
grid-area: 1 / 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 0.875rem 0.5rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.25rem;
|
||||
color: $gray-600;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition:
|
||||
color 150ms linear,
|
||||
border-color 150ms linear;
|
||||
}
|
||||
|
||||
.save-progress-modal-question__tab--active .save-progress-modal-question__tab-label {
|
||||
color: $red;
|
||||
border-bottom-color: $red;
|
||||
}
|
||||
|
||||
.save-progress-modal-question__tab--disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
.save-progress-modal-question__tab-label {
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
.save-progress-modal-question__phone-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin: 0 0 1.5rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.phone-number-question {
|
||||
margin: 0;
|
||||
|
||||
label {
|
||||
text-align: left;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-disclaimer {
|
||||
font-size: 0.75rem;
|
||||
order: 2;
|
||||
|
|
|
|||
|
|
@ -111,11 +111,10 @@ import {
|
|||
import { defineRule } from "vee-validate";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { saveProgressCmsWidgets } from "@/constants/save-progress-cms-widgets";
|
||||
|
||||
const PHONE_SPECIFIC_WIDGET = "SaveProgressPopupWidget_PhoneSpecific";
|
||||
const EMAIL_SPECIFIC_WIDGET = "SaveProgressPopupWidget_EmailSpecific";
|
||||
const PHONE_QUESTION_WIDGET = "SaveProgressPopupPhoneQuestionWidget";
|
||||
const EMAIL_QUESTION_WIDGET = "SaveProgressPopupEmailQuestionWidget";
|
||||
const { PHONE_SPECIFIC, EMAIL_SPECIFIC, POPUP_PHONE_QUESTION, POPUP_EMAIL_QUESTION } =
|
||||
saveProgressCmsWidgets;
|
||||
|
||||
defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
|
||||
|
||||
|
|
@ -136,7 +135,7 @@ export default {
|
|||
watch: {
|
||||
smsConsent: {
|
||||
handler(consent) {
|
||||
if (hasSaveProgressSmsConsentSelection(consent, this.showConsentManagement)) {
|
||||
if (hasSaveProgressSmsConsentSelection(consent)) {
|
||||
this.showConsentErrors = false;
|
||||
}
|
||||
},
|
||||
|
|
@ -171,9 +170,7 @@ export default {
|
|||
return this.getCmsContent(this.modalWidgetName, "FooterText");
|
||||
},
|
||||
modalDisclaimerText() {
|
||||
const disclaimerWidgetName = this.isPhoneTabSelected
|
||||
? PHONE_SPECIFIC_WIDGET
|
||||
: EMAIL_SPECIFIC_WIDGET;
|
||||
const disclaimerWidgetName = this.isPhoneTabSelected ? PHONE_SPECIFIC : EMAIL_SPECIFIC;
|
||||
|
||||
return this.getCmsContent(disclaimerWidgetName, "BodyText");
|
||||
},
|
||||
|
|
@ -186,11 +183,11 @@ export default {
|
|||
contactTabs() {
|
||||
return [
|
||||
{
|
||||
label: this.getCmsContent(PHONE_SPECIFIC_WIDGET, "HeadlineText") || "Phone",
|
||||
label: this.getCmsContent(PHONE_SPECIFIC, "HeadlineText") || "Phone",
|
||||
value: saveProgressPopupContactMethods.PHONE,
|
||||
},
|
||||
{
|
||||
label: this.getCmsContent(EMAIL_SPECIFIC_WIDGET, "HeadlineText") || "Email",
|
||||
label: this.getCmsContent(EMAIL_SPECIFIC, "HeadlineText") || "Email",
|
||||
value: saveProgressPopupContactMethods.EMAIL,
|
||||
},
|
||||
];
|
||||
|
|
@ -202,10 +199,10 @@ export default {
|
|||
return this.isProgressSaved || this.isPhoneTabSelected;
|
||||
},
|
||||
phoneQuestionWidgetName() {
|
||||
return PHONE_QUESTION_WIDGET;
|
||||
return POPUP_PHONE_QUESTION;
|
||||
},
|
||||
emailQuestionWidgetName() {
|
||||
return EMAIL_QUESTION_WIDGET;
|
||||
return POPUP_EMAIL_QUESTION;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -245,9 +242,7 @@ export default {
|
|||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
!hasSaveProgressSmsConsentSelection(this.smsConsent, this.showConsentManagement)
|
||||
) {
|
||||
if (!hasSaveProgressSmsConsentSelection(this.smsConsent)) {
|
||||
this.showConsentErrors = true;
|
||||
await this.scrollConsentIntoView();
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -68,10 +68,7 @@ export default {
|
|||
},
|
||||
},
|
||||
showConsentError() {
|
||||
return (
|
||||
this.showConsentErrors &&
|
||||
!hasSaveProgressSmsConsentSelection(this.modelValue, this.showConsentManagement)
|
||||
);
|
||||
return this.showConsentErrors && !hasSaveProgressSmsConsentSelection(this.modelValue);
|
||||
},
|
||||
consentErrorMessage() {
|
||||
return this.showConsentManagement
|
||||
|
|
|
|||
|
|
@ -9,6 +9,17 @@ export function isPhoneContactMethod(contactMethod) {
|
|||
return contactMethod === saveProgressPopupContactMethods.PHONE;
|
||||
}
|
||||
|
||||
export function hasSaveProgressContactInStore(customer) {
|
||||
if (!customer) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const hasEmail = Boolean(customer.emailAddress?.length > 0);
|
||||
const hasPhone = Boolean(customer.phoneNumber?.length > 0);
|
||||
|
||||
return hasEmail || hasPhone;
|
||||
}
|
||||
|
||||
export function normalizePhoneNumberForStore(phoneNumber) {
|
||||
if (!phoneNumber) {
|
||||
return phoneNumber;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { storeActions } from "@/constants/store-actions";
|
||||
import {
|
||||
hasSaveProgressContactInStore,
|
||||
isPhoneContactMethod,
|
||||
normalizePhoneNumberForStore,
|
||||
saveProgressPopupContactMethods,
|
||||
|
|
@ -11,6 +12,27 @@ describe("save-progress-popup-contact-helper", () => {
|
|||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
describe("hasSaveProgressContactInStore", () => {
|
||||
it("should return true when email is saved", () => {
|
||||
expect(hasSaveProgressContactInStore({ emailAddress: "test@example.com" })).toBe(true);
|
||||
});
|
||||
|
||||
it("should return true when phone is saved", () => {
|
||||
expect(hasSaveProgressContactInStore({ phoneNumber: "5551234567" })).toBe(true);
|
||||
});
|
||||
|
||||
it("should return false when customer is undefined", () => {
|
||||
expect(hasSaveProgressContactInStore(undefined)).toBe(false);
|
||||
});
|
||||
|
||||
it("should return false when neither email nor phone is saved", () => {
|
||||
expect(hasSaveProgressContactInStore({})).toBe(false);
|
||||
expect(hasSaveProgressContactInStore({ emailAddress: "", phoneNumber: null })).toBe(
|
||||
false
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("isPhoneContactMethod", () => {
|
||||
it("should return true for the phone contact method", () => {
|
||||
expect(isPhoneContactMethod(saveProgressPopupContactMethods.PHONE)).toBe(true);
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ export function getSaveProgressSmsConsentFallbackCopy() {
|
|||
return { ...SAVE_PROGRESS_SMS_CONSENT_FALLBACK_COPY };
|
||||
}
|
||||
|
||||
export function hasSaveProgressSmsConsentSelection(consent, showConsentManagement = false) {
|
||||
return Boolean(consent?.transactional || (showConsentManagement && consent?.marketing));
|
||||
export function hasSaveProgressSmsConsentSelection(consent) {
|
||||
return Boolean(consent?.transactional);
|
||||
}
|
||||
|
||||
export function getSaveProgressSmsConsentConfig() {
|
||||
|
|
|
|||
|
|
@ -48,19 +48,16 @@ describe("save-progress-sms-consent-helper", () => {
|
|||
expect(hasSaveProgressSmsConsentSelection(defaultSaveProgressSmsConsent())).toBe(false);
|
||||
});
|
||||
|
||||
it("should return true when either consent option is selected and consent management is enabled", () => {
|
||||
it("should return true only when transactional consent is selected", () => {
|
||||
expect(
|
||||
hasSaveProgressSmsConsentSelection({ transactional: true, marketing: false }, true)
|
||||
hasSaveProgressSmsConsentSelection({ transactional: true, marketing: false })
|
||||
).toBe(true);
|
||||
expect(
|
||||
hasSaveProgressSmsConsentSelection({ transactional: false, marketing: true }, true)
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it("should ignore marketing consent when consent management is disabled", () => {
|
||||
expect(
|
||||
hasSaveProgressSmsConsentSelection({ transactional: false, marketing: true }, false)
|
||||
hasSaveProgressSmsConsentSelection({ transactional: false, marketing: true })
|
||||
).toBe(false);
|
||||
expect(
|
||||
hasSaveProgressSmsConsentSelection({ transactional: true, marketing: true })
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
// Components
|
||||
import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
import { hasSaveProgressContactInStore } from "@/helpers/save-progress-popup-contact-helper";
|
||||
|
||||
// Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -59,12 +60,12 @@ export default {
|
|||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
const emailFromStore = store.getters.order.customer.emailAddress;
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next(async (vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.showSaveProgressModal = !(emailFromStore?.length > 0);
|
||||
vm.showSaveProgressModal = !hasSaveProgressContactInStore(
|
||||
store.getters.order?.customer
|
||||
);
|
||||
if (store.getters.externalParameterState?.isExternalParameter) {
|
||||
if (store.getters.externalParameterServiceZip.zipCode) {
|
||||
await baseMixin.methods.dispatchStoreAction(
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@
|
|||
<saveProgressModalQuestion
|
||||
modalWidgetName="SaveProgressModalWidget"
|
||||
modalName="SaveProgressModal"
|
||||
v-if="showSaveProgressModal"
|
||||
pageName="coverage-statement" />
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
|
|
@ -80,7 +81,8 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import customerInstructions from "./customer-instructions/customer-instructions.vue";
|
||||
import priceDisplay from "./price-display/price-display.vue";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question.vue";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
import { hasSaveProgressContactInStore } from "@/helpers/save-progress-popup-contact-helper";
|
||||
import afterpayBreakout from "../payment-method/afterpay-breakout/afterpay-breakout.vue";
|
||||
import modal from "@/digital-components/modal/modal";
|
||||
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal.vue";
|
||||
|
|
@ -105,6 +107,7 @@ export default {
|
|||
isRecalibrationOnOrder: this.isRecalibrationOnOrderFromStore(),
|
||||
isRepair: this.isRepairFromStore(),
|
||||
clientConfig: {},
|
||||
showSaveProgressModal: null,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -140,9 +143,11 @@ export default {
|
|||
}
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const showSaveProgressModal = !hasSaveProgressContactInStore(store.getters.order?.customer);
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.clientConfig = resultMap.clientConfig ?? {};
|
||||
vm.showSaveProgressModal = showSaveProgressModal;
|
||||
debugLog(
|
||||
`coverage-statement clientConfig::${clientConfigPageName}`,
|
||||
JSON.stringify(vm.clientConfig)
|
||||
|
|
|
|||
|
|
@ -151,6 +151,7 @@ import { stateOptionsInternational } from "@/constants/state-options";
|
|||
import { regex } from "@/helpers/validation-rules";
|
||||
import { coverageStatus, coverageStatusEnum } from "@/constants/insurance";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
import { hasSaveProgressContactInStore } from "@/helpers/save-progress-popup-contact-helper";
|
||||
import { debugLog } from "@/helpers/debug-log-helper";
|
||||
import {
|
||||
flushPagePrereqsLogs,
|
||||
|
|
@ -223,8 +224,7 @@ export default {
|
|||
},
|
||||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const emailFromStore = store.getters.order.customer.emailAddress;
|
||||
const showSaveProgressModal = !(emailFromStore?.length > 0);
|
||||
const showSaveProgressModal = !hasSaveProgressContactInStore(store.getters.order?.customer);
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.showSaveProgressModal = showSaveProgressModal;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
// Components
|
||||
import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
import { hasSaveProgressContactInStore } from "@/helpers/save-progress-popup-contact-helper";
|
||||
|
||||
// Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -59,12 +60,12 @@ export default {
|
|||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
const emailFromStore = store.getters.order.customer.emailAddress;
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next(async (vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.showSaveProgressModal = !(emailFromStore?.length > 0);
|
||||
vm.showSaveProgressModal = !hasSaveProgressContactInStore(
|
||||
store.getters.order?.customer
|
||||
);
|
||||
if (store.getters.externalParameterState?.isExternalParameter) {
|
||||
if (store.getters.externalParameterServiceZip.zipCode) {
|
||||
await baseMixin.methods.dispatchStoreAction(
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
// Components
|
||||
import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
import { hasSaveProgressContactInStore } from "@/helpers/save-progress-popup-contact-helper";
|
||||
|
||||
// Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -59,12 +60,12 @@ export default {
|
|||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
const emailFromStore = store.getters.order.customer.emailAddress;
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next(async (vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.showSaveProgressModal = !(emailFromStore?.length > 0);
|
||||
vm.showSaveProgressModal = !hasSaveProgressContactInStore(
|
||||
store.getters.order?.customer
|
||||
);
|
||||
if (store.getters.externalParameterState?.isExternalParameter) {
|
||||
if (store.getters.externalParameterServiceZip.zipCode) {
|
||||
const serviceState = store.getters.order.serviceLocation.state;
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
|||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
import { hasSaveProgressContactInStore } from "@/helpers/save-progress-popup-contact-helper";
|
||||
import { Form } from "vee-validate";
|
||||
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -91,8 +92,7 @@ export default {
|
|||
},
|
||||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const emailFromStore = store.getters.order.customer.emailAddress;
|
||||
const showSaveProgressModal = !(emailFromStore?.length > 0);
|
||||
const showSaveProgressModal = !hasSaveProgressContactInStore(store.getters.order?.customer);
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.clientConfig = resultMap.clientConfig ?? {};
|
||||
|
|
|
|||
|
|
@ -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,36 @@ 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 { GaActions, GaCategories, GaLabels } from "@/constants/analytics";
|
||||
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 },
|
||||
isRecalAcknowledgedForScheduling: "",
|
||||
},
|
||||
lineItems: { supportingItems: [] },
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
@ -44,12 +61,37 @@ 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",
|
||||
ZIP_CODE_CHANGED_RECAL_ACK: "ZIP_CODE_CHANGED_RECAL_ACK",
|
||||
};
|
||||
},
|
||||
pageName() {
|
||||
return "scheduling";
|
||||
},
|
||||
},
|
||||
};
|
||||
const mountOptions = getMountOptions({
|
||||
|
|
@ -62,7 +104,7 @@ function setupMocks() {
|
|||
});
|
||||
mountOptions.global.mixins = [baseMixin];
|
||||
const wrapper = shallowMount(scheduling, mountOptions);
|
||||
return { wrapper };
|
||||
return { wrapper, dispatchStoreAction };
|
||||
}
|
||||
|
||||
describe("scheduling.vue", () => {
|
||||
|
|
@ -124,7 +166,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 +203,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 +211,348 @@ 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();
|
||||
});
|
||||
|
||||
test.each([
|
||||
["yes", "12345", GaLabels.YES],
|
||||
["no", null, GaLabels.NO],
|
||||
])(
|
||||
"pushes mobile_available %s when mobileProviderNumber is %s",
|
||||
async (_label, mobileProviderNumber, expectedGaLabel) => {
|
||||
settleAllPromises.mockResolvedValueOnce({});
|
||||
const { wrapper } = setupMocks();
|
||||
wrapper.vm.pushEventToGA.mockClear();
|
||||
|
||||
await wrapper.vm.loadSchedulingData("43235", {
|
||||
providersResult: { shopProviders: [], mobileProviderNumber },
|
||||
});
|
||||
|
||||
expect(wrapper.vm.pushEventToGA).toHaveBeenCalledWith(
|
||||
GaCategories.APPOINTMENT,
|
||||
GaActions.MOBILE_AVAILABLE,
|
||||
expectedGaLabel,
|
||||
true
|
||||
);
|
||||
wrapper.unmount();
|
||||
}
|
||||
);
|
||||
|
||||
test("navigates to service-zip when zip changes and recal acknowledgement applies", async () => {
|
||||
store.getters.order.lineItems = {
|
||||
glassParts: [
|
||||
{
|
||||
partType: "WINDSHIELD",
|
||||
requiresRecalibration: true,
|
||||
canSafeliteRecalibrate: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
try {
|
||||
const { wrapper } = setupMocks();
|
||||
await wrapper.setData({
|
||||
isRecalAcknowledgedForScheduling: "",
|
||||
isLoadingDates: false,
|
||||
});
|
||||
|
||||
await wrapper.vm.onZipSearched({ zipCode: "44101", billToAccountNumber: "87291" });
|
||||
|
||||
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith(
|
||||
"ZIP_CODE_CHANGED_RECAL_ACK",
|
||||
"scheduling"
|
||||
);
|
||||
expect(wrapper.vm.isLoadingDates).toBe(false);
|
||||
wrapper.unmount();
|
||||
} finally {
|
||||
store.getters.order.lineItems = { glassParts: [] };
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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("forwardButtonAction (recal acknowledgement)", () => {
|
||||
test("opens recal modal and does not navigate when required", async () => {
|
||||
store.getters.order.lineItems = {
|
||||
glassParts: [
|
||||
{
|
||||
partType: "WINDSHIELD",
|
||||
requiresRecalibration: true,
|
||||
canSafeliteRecalibrate: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
const { wrapper } = setupMocks();
|
||||
wrapper.vm.$refs.navbar.removeLoader = jest.fn();
|
||||
wrapper.vm.$refs.recalAckModal.openModal = jest.fn();
|
||||
await wrapper.setData({ isRecalAcknowledgedForScheduling: "" });
|
||||
|
||||
await wrapper.vm.forwardButtonAction();
|
||||
|
||||
expect(wrapper.vm.$refs.recalAckModal.openModal).toHaveBeenCalled();
|
||||
expect(wrapper.vm.$router.navigateWithSaving).not.toHaveBeenCalled();
|
||||
wrapper.unmount();
|
||||
store.getters.order.lineItems = { glassParts: [] };
|
||||
});
|
||||
|
||||
test("navigates forward after recal acknowledgement is saved", async () => {
|
||||
const { wrapper } = setupMocks();
|
||||
await wrapper.setData({ isRecalAcknowledgedForScheduling: "Yes" });
|
||||
|
||||
await wrapper.vm.forwardButtonAction();
|
||||
|
||||
expect(store.dispatch).toHaveBeenCalledWith(
|
||||
"saveIsRecalAcknowledgedForScheduling",
|
||||
"Yes"
|
||||
);
|
||||
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("onRecalAcknowledged sets acknowledgement and continues forward", async () => {
|
||||
const { wrapper } = setupMocks();
|
||||
wrapper.vm.forwardButtonAction = jest.fn();
|
||||
|
||||
wrapper.vm.onRecalAcknowledged("Yes");
|
||||
|
||||
expect(wrapper.vm.isRecalAcknowledgedForScheduling).toBe("Yes");
|
||||
expect(wrapper.vm.forwardButtonAction).toHaveBeenCalled();
|
||||
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"
|
||||
|
|
@ -60,6 +84,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<recalAckModal
|
||||
modalWidgetName="RecalAckModalWidget"
|
||||
agreementWidgetName="RecalAgreementQuestionWidget"
|
||||
groupName="recalAckGroup"
|
||||
@recalAcknowledged="onRecalAcknowledged"
|
||||
ref="recalAckModal" />
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
|
|
@ -73,18 +103,28 @@ 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 recalAckModal from "@/layouts/schedule/recal-ack-modal/recal-ack-modal.vue";
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import store from "@/store";
|
||||
import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import {
|
||||
AppointmentTypeStrings,
|
||||
PREMIUM_FEE_PART_TYPE,
|
||||
RECAL_ACK_YES,
|
||||
} 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 { partTypeStrings } from "@/constants/part-type-strings";
|
||||
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 +140,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 +162,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 +228,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 +305,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,
|
||||
await vm.loadSchedulingData(serviceZipCode, {
|
||||
providersResult: resultMap.providers,
|
||||
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;
|
||||
});
|
||||
vm.mobilePremiumAppointmentFee = resultMap.mobilePremiumFee ?? null;
|
||||
vm.isLoadingDates = false;
|
||||
});
|
||||
|
|
@ -269,6 +327,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 +374,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 +382,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 +394,203 @@ 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,
|
||||
isRecalAcknowledgedForScheduling:
|
||||
store.getters.order.isRecalAcknowledgedForScheduling ?? "",
|
||||
};
|
||||
},
|
||||
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;
|
||||
|
||||
var gaLabel = this.GaLabels.NO;
|
||||
if (this.mobileProviderAndTimeSlot) {
|
||||
gaLabel = this.GaLabels.YES;
|
||||
}
|
||||
this.pushEventToGA(
|
||||
this.GaCategories.APPOINTMENT,
|
||||
this.GaActions.MOBILE_AVAILABLE,
|
||||
gaLabel,
|
||||
true
|
||||
);
|
||||
|
||||
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 }) {
|
||||
// When recal ack applies, changing zip must re-run parts selection via service-zip.
|
||||
if (this.shouldShowRecalAckModal()) {
|
||||
this.$router.navigateWithSaving(
|
||||
this.navigationScenarios.ZIP_CODE_CHANGED_RECAL_ACK,
|
||||
this.pageName
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
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 +601,7 @@ export default {
|
|||
const insuranceInfo = hasInsuranceInfo(order, logQueue);
|
||||
|
||||
const preReqResult = serviceZip && insuranceInfo && glassPartsOrRepair;
|
||||
|
||||
flushPagePrereqsLogs("scheduling.vue", preReqResult, logQueue);
|
||||
return preReqResult;
|
||||
},
|
||||
backButtonAction() {
|
||||
|
|
@ -377,43 +628,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({
|
||||
const resultMap = await fetchTimeSlotsBatch({
|
||||
startDate: newStartDate,
|
||||
endDate: newEndDate,
|
||||
providerNumbers,
|
||||
pageNameToLog: this.pageName,
|
||||
}),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(this.mobileProviderAndTimeSlot
|
||||
? [
|
||||
{
|
||||
resultKey: "mobileTimeSlots",
|
||||
promise: fetchMobileTimeSlots({
|
||||
startDate: newStartDate,
|
||||
endDate: newEndDate,
|
||||
zipCode: this.serviceZipCode,
|
||||
includeMobile: Boolean(this.mobileProviderAndTimeSlot),
|
||||
pageNameToLog: this.pageName,
|
||||
}),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
});
|
||||
|
||||
appendInshopTimeSlotsFromV2Response(
|
||||
this.inShopProvidersAndTimeslots,
|
||||
this.inshopProvidersAndTimeSlots,
|
||||
resultMap.inshopTimeSlots
|
||||
);
|
||||
|
||||
|
|
@ -424,9 +653,213 @@ 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() {
|
||||
if (this.shouldShowRecalAckModal()) {
|
||||
this.$refs.navbar.removeLoader();
|
||||
this.$refs.recalAckModal.openModal();
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedScheduling = this.selectedScheduling;
|
||||
const selectedDate = this.selectedDate;
|
||||
|
||||
await store.dispatch(
|
||||
storeActions.SAVE_IS_RECAL_ACKNOWLEDGED_FOR_SCHEDULING,
|
||||
this.isRecalAcknowledgedForScheduling
|
||||
);
|
||||
|
||||
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
|
||||
|
|
@ -438,6 +871,23 @@ export default {
|
|||
);
|
||||
}
|
||||
},
|
||||
shouldShowRecalAckModal() {
|
||||
if (this.isRecalAcknowledgedForScheduling === RECAL_ACK_YES) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const glassParts = store.getters.order.lineItems?.glassParts ?? [];
|
||||
return glassParts.some(
|
||||
(part) =>
|
||||
part.partType === partTypeStrings.WINDSHIELD &&
|
||||
part.requiresRecalibration === true &&
|
||||
part.canSafeliteRecalibrate === false
|
||||
);
|
||||
},
|
||||
onRecalAcknowledged(isAcknowledged) {
|
||||
this.isRecalAcknowledgedForScheduling = isAcknowledged;
|
||||
this.forwardButtonAction();
|
||||
},
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
|
|
@ -449,6 +899,9 @@ export default {
|
|||
inshopSchedulingCard,
|
||||
interceptOverlay,
|
||||
waitlistQuestion,
|
||||
schedulingZipSearch,
|
||||
recalAckModal,
|
||||
textLink,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -476,4 +929,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>
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
|
|||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
import { hasSaveProgressContactInStore } from "@/helpers/save-progress-popup-contact-helper";
|
||||
// Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
|
|
@ -77,11 +78,12 @@ export default {
|
|||
},
|
||||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const emailFromStore = store.getters.order?.customer?.emailAddress;
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.showSaveProgressModal = !(emailFromStore?.length > 0);
|
||||
vm.showSaveProgressModal = !hasSaveProgressContactInStore(
|
||||
store.getters.order?.customer
|
||||
);
|
||||
|
||||
// Glass Part Question dynamic component
|
||||
Object.keys(vm.$refs)
|
||||
|
|
|
|||
Loading…
Reference in a new issue