diff --git a/src/layouts/payment-method/promo-modal-question/promo-modal-question.spec.js b/src/layouts/payment-method/promo-modal-question/promo-modal-question.spec.js new file mode 100644 index 000000000..3846a6bfd --- /dev/null +++ b/src/layouts/payment-method/promo-modal-question/promo-modal-question.spec.js @@ -0,0 +1,90 @@ +import { mount, shallowMount } from "@vue/test-utils"; +import promoModalQuestion from "./promo-modal-question"; + +jest.mock("@/digital-components/textbox-question/textbox-question", () => ({ + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + return widgetName[cmsFieldName]; + }), +})); + +jest.mock("@/digital-components/modal/modal", () => ({ + methods: { + closeModal: jest.fn(), + resetButtonStyle: jest.fn(), + }, +})); + +const linkWidgetName = "linkWidgetName"; +const modalWidgetName = "modalWidgetName"; + +const mockLinkCmsContent = { + BodyText: "Sample link body text here.", +}; + +const mockModalCmsContent = { + FooterText: "Sample modal footer text here.", +}; + +const mockMixin = { + methods: { + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + if (widgetName === linkWidgetName) { + return mockLinkCmsContent[cmsFieldName]; + } + + if (widgetName === modalWidgetName) { + return mockModalCmsContent[cmsFieldName]; + } + + return null; + }), + }, +}; + +describe("promo-modal-question.vue", () => { + it("Should reset all alerts on onModalClosed", async () => { + // Arrange + + const wrapper = mount(promoModalQuestion, { + mixins: [mockMixin], + props: { + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.onModalClosed(); + + // Assert + expect(wrapper.vm.displayInvalidPromoAlert).toBe(false); + expect(wrapper.vm.displayInvalidOnOrderPromoAlert).toBe(false); + }); + it("Should emit update:modelValue on Modal closed", async () => { + // Arrange + const lineItems = { + glassParts: [], + supportingItems: [], + vaps: [], + promos: [], + }; + + const wrapper = mount(promoModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: lineItems, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + }, + attachTo: document.body, + }); + + // Act + + await wrapper.vm.onModalClosed(); + + // Assert + expect(wrapper.emitted("update:modelValue")).toEqual([[lineItems]]); + }); +}); diff --git a/src/layouts/payment-method/promo-modal-question/promo-modal-question.vue b/src/layouts/payment-method/promo-modal-question/promo-modal-question.vue index db04dfb00..70368a834 100644 --- a/src/layouts/payment-method/promo-modal-question/promo-modal-question.vue +++ b/src/layouts/payment-method/promo-modal-question/promo-modal-question.vue @@ -98,16 +98,16 @@ export default { return this.getCmsContent("AlertInvalidPromoOnOrderWidget", "HeadlineText"); }, InvalidPromoOnOrderText() { - return this.PromoText?.replaceAll("{custom:NEWPROMOCODE}", this.promoCode).replaceAll( - "{custom:OLDPROMOCODE}", - this.promoCode - ); + return this.PromoOnOrderText?.replaceAll( + "{custom:NEWPROMOCODE}", + this.promoCode.toUpperCase() + ).replaceAll("{custom:OLDPROMOCODE}", this.getPromoCode().toUpperCase()); }, PromoText() { return this.getCmsContent("AlertInvalidPromoWidget", "HeadlineText"); }, InvalidPromoText() { - return this.PromoText?.replaceAll("{custom:PROMOCODE}", this.promoCode); + return this.PromoText?.replaceAll("{custom:PROMOCODE}", this.promoCode.toUpperCase()); }, removeLinkText() { return this.getCmsContent("RemoveCartItemTextWidget", "Text"); @@ -115,6 +115,7 @@ export default { }, methods: { resetAlerts() { + this.displayInvalidOnOrderPromoAlert = false; this.displayInvalidPromoAlert = false; }, resetsOnPromoInput() { @@ -123,6 +124,9 @@ export default { getPromoList() { return this.lineItems.promos; }, + getPromoCode() { + return this.lineItems.promos?.[0].promoCode; + }, openModal() { this.modal.openModal(); }, @@ -130,7 +134,9 @@ export default { this.modal.closeModal(); }, onModalClosed() { + this.resetAlerts(); this.$emit("update:modelValue", this.lineItems); + this.promoCode = ""; }, focusOnPromoInput() { const input = document.getElementById(this.promoTextInputId); @@ -139,16 +145,8 @@ export default { resetModalButtonStyle() { this.modal.resetButtonStyle(); }, - getPromoAddedMessage() { - return this.AddPromoSuccessMessageFromCms?.replaceAll( - "{custom:PROMOCODE}", - this.promoCode - ); - }, async getPromoCodeData(promoCode, lineItems, availableVaps, pageNameToLog = null) { const pageName = pageNameToLog ?? this.$options?.name; - //const addableVaps = getAddableVapsFromAvailableLineItems(availableLineItems); - //const lineItemsToUse = lineItems.Length > 0 ? lineItems : null; const promoValidationResponse = await baseMixin.methods.dispatchStoreActionWithLogging( storeActions.VALIDATE_ORDER_PROMO_AND_SAVE_SERVER_DATA, { @@ -216,16 +214,16 @@ export default { this.lineItems?.promos.push(...promoCodeData.promoCode); this.lineItems.vaps?.push(...getVaps); this.closeModal(); - this.promoCode = ""; } else { - if (promoCodeData.errorCode == promoErrorCodes.PROMO_STACKING_NOT_ALLOWED) { - this.displayInvalidPromoOnOrderAlert = true; + if (promoCodeData.errorCode == promoErrorCodes.NO_SUITABLE_ITEM_FOR_PROMO) { + this.displayInvalidOnOrderPromoAlert = true; + this.focusOnPromoInput(); + this.resetModalButtonStyle(); + } else { + this.displayInvalidPromoAlert = true; this.focusOnPromoInput(); this.resetModalButtonStyle(); } - this.displayInvalidPromoAlert = true; - this.focusOnPromoInput(); - this.resetModalButtonStyle(); } } }, @@ -253,7 +251,7 @@ export default {