diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js index 2f49e2f1b..380a5a98c 100644 --- a/src/constants/error-messages.js +++ b/src/constants/error-messages.js @@ -32,7 +32,7 @@ const errorMessages = { DATE_REQUIRED: "Please select a date", PHONE_REQUIRED: "Please enter your phone number", PHONE_FORMAT: "Phone number must be 10 digits", - SMS_CONSENT_REQUIRED: "Please select at least one consent option", + SMS_CONSENT_REQUIRED: "Please select checkbox to receive text messages", YEAR_REQUIRED: "Please select your vehicle year", MAKE_REQUIRED: "Please select your vehicle make", MODEL_REQUIRED: "Please select your vehicle model", diff --git a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js index 9979a4162..3db98487a 100644 --- a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js +++ b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js @@ -45,14 +45,14 @@ describe("save-progress-popup-question ", () => { }); describe("contact method tabs", () => { - test("should default to the phone tab", () => { + test("should default to the email tab", () => { const { wrapper } = setupMocks({ props: { modalWidgetName: "SaveProgressPopupWidget", }, }); - expect(wrapper.vm.isPhoneTabSelected).toBe(true); + expect(wrapper.vm.isPhoneTabSelected).toBe(false); }); test("should use tab labels from phone and email specific CMS widgets", () => { @@ -83,21 +83,24 @@ describe("save-progress-popup-question ", () => { }, }); - expect(wrapper.vm.modalDisclaimerText).toBe("Phone disclaimer"); + expect(wrapper.vm.modalDisclaimerText).toBe("Email disclaimer"); - wrapper.vm.selectContactMethod("EmailAnswer"); + wrapper.vm.selectContactMethod("PhoneAnswer"); await wrapper.vm.$nextTick(); - expect(wrapper.vm.modalDisclaimerText).toBe("Email disclaimer"); + expect(wrapper.vm.modalDisclaimerText).toBe("Phone disclaimer"); }); - test("should use phone question CMS widget on the phone tab", () => { + test("should use phone question CMS widget on the phone tab", async () => { const { wrapper } = setupMocks({ props: { modalWidgetName: "SaveProgressPopupWidget", }, }); + wrapper.vm.selectContactMethod("PhoneAnswer"); + await wrapper.vm.$nextTick(); + expect(wrapper.vm.phoneQuestionWidgetName).toBe("SaveProgressPopupPhoneQuestionWidget"); }); @@ -108,15 +111,26 @@ describe("save-progress-popup-question ", () => { }, }); - wrapper.vm.selectContactMethod("EmailAnswer"); - await wrapper.vm.$nextTick(); - expect(wrapper.vm.contactMethod).toBe("EmailAnswer"); expect(wrapper.vm.isPhoneTabSelected).toBe(false); - expect(wrapper.vm.userInput).toBe(""); expect(wrapper.vm.emailQuestionWidgetName).toBe("SaveProgressPopupEmailQuestionWidget"); }); + test("should show phone content when the phone tab is selected", async () => { + const { wrapper } = setupMocks({ + props: { + modalWidgetName: "SaveProgressPopupWidget", + }, + }); + + wrapper.vm.selectContactMethod("PhoneAnswer"); + await wrapper.vm.$nextTick(); + + expect(wrapper.vm.contactMethod).toBe("PhoneAnswer"); + expect(wrapper.vm.isPhoneTabSelected).toBe(true); + expect(wrapper.vm.userInput).toBe(""); + }); + test("should reset sms consent when switching tabs", async () => { const { wrapper } = setupMocks({ props: { @@ -126,7 +140,7 @@ describe("save-progress-popup-question ", () => { wrapper.vm.smsConsent = { transactional: true, marketing: true }; wrapper.vm.showConsentErrors = true; - wrapper.vm.selectContactMethod("EmailAnswer"); + wrapper.vm.selectContactMethod("PhoneAnswer"); await wrapper.vm.$nextTick(); expect(wrapper.vm.smsConsent).toEqual({ transactional: false, marketing: false }); @@ -142,6 +156,7 @@ describe("save-progress-popup-question ", () => { }, }); + wrapper.vm.selectContactMethod("PhoneAnswer"); wrapper.vm.modal.validate = jest.fn().mockResolvedValue({ valid: true }); const resetSpy = jest.spyOn(wrapper.vm, "resetPhoneSendButtonStyle"); @@ -158,6 +173,7 @@ describe("save-progress-popup-question ", () => { }, }); + wrapper.vm.selectContactMethod("PhoneAnswer"); wrapper.vm.modal.validate = jest.fn().mockResolvedValue({ valid: false }); const resetSpy = jest.spyOn(wrapper.vm, "resetPhoneSendButtonStyle"); @@ -179,6 +195,7 @@ describe("save-progress-popup-question ", () => { await flushPromises(); wrapper.vm.dispatchStoreAction = dispatchStoreAction; + wrapper.vm.selectContactMethod("PhoneAnswer"); wrapper.vm.userInput = "555-123-4567"; wrapper.vm.smsConsent = { transactional: true, marketing: false }; wrapper.vm.modal.validate = jest.fn().mockResolvedValue({ valid: true }); @@ -203,6 +220,7 @@ describe("save-progress-popup-question ", () => { }); wrapper.vm.dispatchStoreAction = dispatchStoreAction; + wrapper.vm.selectContactMethod("PhoneAnswer"); wrapper.vm.userInput = "555-123-4567"; wrapper.vm.smsConsent = { transactional: true, marketing: false }; @@ -238,7 +256,6 @@ describe("save-progress-popup-question ", () => { }); wrapper.vm.dispatchStoreAction = dispatchStoreAction; - wrapper.vm.selectContactMethod("EmailAnswer"); wrapper.vm.userInput = "test@example.com"; await wrapper.vm.saveProgress(); @@ -267,6 +284,7 @@ describe("save-progress-popup-question ", () => { }); wrapper.vm.dispatchStoreAction = dispatchStoreAction; + wrapper.vm.selectContactMethod("PhoneAnswer"); wrapper.vm.userInput = "555-123-4567"; wrapper.vm.smsConsent = { transactional: true, marketing: false }; @@ -289,7 +307,6 @@ describe("save-progress-popup-question ", () => { }); wrapper.vm.dispatchStoreAction = dispatchStoreAction; - wrapper.vm.selectContactMethod("EmailAnswer"); wrapper.vm.userInput = "test@example.com"; await wrapper.vm.saveProgress(); diff --git a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue index 95fb40273..2d46b03b9 100644 --- a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue +++ b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue @@ -118,7 +118,7 @@ export default { data() { return { userInput: "", - contactMethod: saveProgressPopupContactMethods.PHONE, + contactMethod: saveProgressPopupContactMethods.EMAIL, smsConsent: defaultSaveProgressSmsConsent(), smsConsentCopy: getSaveProgressSmsConsentFallbackCopy(), isProgressSaved: false, diff --git a/src/fmg-components/save-progress-popup-question/save-progress-popup-sms-consent-question.spec.js b/src/fmg-components/save-progress-popup-question/save-progress-popup-sms-consent-question.spec.js index 4a9fe13a1..fd6bea0ff 100644 --- a/src/fmg-components/save-progress-popup-question/save-progress-popup-sms-consent-question.spec.js +++ b/src/fmg-components/save-progress-popup-question/save-progress-popup-sms-consent-question.spec.js @@ -7,15 +7,14 @@ import { import { errorMessages } from "@/constants/error-messages"; describe("save-progress-popup-sms-consent-question", () => { - it("should render two consent checkboxes with default copy", () => { + it("should render the transactional consent checkbox with default copy", () => { const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion); const fallbackCopy = getSaveProgressSmsConsentFallbackCopy(); const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" }); - expect(checkboxes).toHaveLength(2); + expect(checkboxes).toHaveLength(1); expect(checkboxes.at(0).props("labelText")).toBe(fallbackCopy.transactional); - expect(checkboxes.at(1).props("labelText")).toBe(fallbackCopy.marketing); }); it("should emit updated consent when a checkbox changes", async () => { @@ -47,8 +46,8 @@ describe("save-progress-popup-sms-consent-question", () => { const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" }); + expect(checkboxes).toHaveLength(1); expect(checkboxes.at(0).props("labelText")).toBe("API transactional copy"); - expect(checkboxes.at(1).props("labelText")).toBe("API marketing copy"); }); it("should disable consent checkboxes when isDisabled is true", () => { @@ -61,7 +60,6 @@ describe("save-progress-popup-sms-consent-question", () => { const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" }); expect(checkboxes.at(0).props("isDisabled")).toBe(true); - expect(checkboxes.at(1).props("isDisabled")).toBe(true); expect(wrapper.find("fieldset").attributes("disabled")).toBe(""); }); @@ -76,7 +74,6 @@ describe("save-progress-popup-sms-consent-question", () => { const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" }); expect(checkboxes.at(0).props("hasError")).toBe(false); - expect(checkboxes.at(1).props("hasError")).toBe(false); expect(wrapper.text()).not.toContain(errorMessages.SMS_CONSENT_REQUIRED); }); @@ -94,7 +91,6 @@ describe("save-progress-popup-sms-consent-question", () => { const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" }); expect(checkboxes.at(0).props("hasError")).toBe(true); - expect(checkboxes.at(1).props("hasError")).toBe(true); }); it("should clear consent errors when a selection is made while showConsentErrors is true", async () => { @@ -111,6 +107,5 @@ describe("save-progress-popup-sms-consent-question", () => { const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" }); expect(checkboxes.at(0).props("hasError")).toBe(false); - expect(checkboxes.at(1).props("hasError")).toBe(false); }); }); diff --git a/src/fmg-components/save-progress-popup-question/save-progress-popup-sms-consent-question.vue b/src/fmg-components/save-progress-popup-question/save-progress-popup-sms-consent-question.vue index 55e18e623..683541895 100644 --- a/src/fmg-components/save-progress-popup-question/save-progress-popup-sms-consent-question.vue +++ b/src/fmg-components/save-progress-popup-question/save-progress-popup-sms-consent-question.vue @@ -9,12 +9,13 @@ :labelText="consentCopy.transactional" :hasError="showConsentError" :isDisabled="isDisabled" /> - + :isDisabled="isDisabled" /> -->