diff --git a/src/constants/payment-method-constants.js b/src/constants/payment-method-constants.js index 8f0ee825..0af1a4de 100644 --- a/src/constants/payment-method-constants.js +++ b/src/constants/payment-method-constants.js @@ -1,7 +1,9 @@ -export const paymentMethods = { +const paymentMethods = Object.freeze({ NONE: null, - LATER: 'Later', + PAY_AT_TIME_OF_SERVICE: 'PayAtTimeOfService', CREDIT_CARD: 'CreditCard', PAYPAL: 'Paypal', AFTERPAY: 'Afterpay' -}; +}); + +export default paymentMethods; diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js index 4e869c3e..87630d13 100644 --- a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js +++ b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js @@ -3,37 +3,34 @@ import { getMountOptions } from '@/helpers/unit-test-helper.js'; import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue'; -const testConstants = { - cms: { - question: { - text: 'Choose a payment option' - }, - answers: { - optionA: { - name: 'NameA', - text: 'TextA', - subText: 'SubTextA', - imageId: 'idA', - image: 'imageA', - subWidget: 'subWidgetA' - }, - optionB: { - name: 'NameB', - text: 'TextB', - subText: 'SubTextB', - imageId: 'idB', - image: 'imageB', - subWidget: 'subWidgetB' - } - } - } -}; - let cmsContent; +const mockCmsContent = { + QuestionText: 'Choose a payment option', + Answers: [ + { + Name: 'NameA', + Text: 'TextA', + SubText: 'SubTextA', + ImageId: 'idA', + AnswerImageUrl: 'imageA', + SubWidgetName: 'subWidgetA' + }, + { + Name: 'NameB', + Text: 'TextB', + SubText: 'SubTextB', + ImageId: 'idB', + AnswerImageUrl: 'imageB', + SubWidgetName: 'subWidgetB' + } + ] +}; + function generateDefaultProps() { return { - modelValue: 'modelValue' + modelValue: 'modelValue', + cmsWidgetName: 'PaymentMethodWidget' }; } @@ -42,7 +39,7 @@ function setupMocks(customMountOptions) { const mockMixin = { methods: { - getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent?.[widgetName]?.[cmsFieldName] ?? '') + getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent[cmsFieldName]) } }; @@ -55,31 +52,8 @@ function setupMocks(customMountOptions) { describe('Payment Method Question', () => { beforeEach(() => { - cmsContent = { - PaymentMethodWidget: { - QuestionText: testConstants.cms.question, - Answers: [ - { - Name: testConstants.cms.answers.optionA.name, - Text: testConstants.cms.answers.optionA.text, - SubText: testConstants.cms.answers.optionA.subText, - ImageId: testConstants.cms.answers.optionA.imageId, - AnswerImageUrl: testConstants.cms.answers.optionA.image, - SubWidgetName: testConstants.cms.answers.optionA.subWidget - }, - { - Name: testConstants.cms.answers.optionB.name, - Text: testConstants.cms.answers.optionB.text, - SubText: testConstants.cms.answers.optionB.subText, - ImageId: testConstants.cms.answers.optionB.imageId, - AnswerImageUrl: testConstants.cms.answers.optionB.image, - SubWidgetName: testConstants.cms.answers.optionB.subWidget - } - ] - } - }; + cmsContent = mockCmsContent; }); - it('Should map cms content correctly', () => { // Arrange const props = generateDefaultProps(); @@ -94,18 +68,18 @@ describe('Payment Method Question', () => { // Assert expect(mappedContent).toEqual([ { - buttonLabel: testConstants.cms.answers.optionA.text, - altText: testConstants.cms.answers.optionA.text, + buttonLabel: cmsContent.Answers[0].Text, + altText: cmsContent.Answers[0].Text, groupName: 'payment-method', - value: testConstants.cms.answers.optionA.name, - buttonImage: testConstants.cms.answers.optionA.image + value: cmsContent.Answers[0].Name, + buttonImage: cmsContent.Answers[0].AnswerImageUrl }, { - buttonLabel: testConstants.cms.answers.optionB.text, - altText: testConstants.cms.answers.optionB.text, + buttonLabel: cmsContent.Answers[1].Text, + altText: cmsContent.Answers[1].Text, groupName: 'payment-method', - value: testConstants.cms.answers.optionB.name, - buttonImage: testConstants.cms.answers.optionB.image + value: cmsContent.Answers[1].Name, + buttonImage: cmsContent.Answers[1].AnswerImageUrl } ]); }); diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.vue b/src/layouts/payment-method/payment-method-question/payment-method-question.vue index 78767538..f793e3ea 100644 --- a/src/layouts/payment-method/payment-method-question/payment-method-question.vue +++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue @@ -15,7 +15,9 @@ - diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js new file mode 100644 index 00000000..dc31f064 --- /dev/null +++ b/src/layouts/payment-method/payment-method.spec.js @@ -0,0 +1,43 @@ +// Components +import paymentMethod from '@/layouts/payment-method/payment-method.vue'; + +// Supporting Files +import { shallowMount } from '@vue/test-utils'; +import { getMountOptions } from '@/helpers/unit-test-helper.js'; +import { useMainStore } from '@/store'; +import paymentMethods from '@/constants/payment-method-constants'; + +function setupMocks() { + const mountOptions = getMountOptions(); + + const wrapper = shallowMount(paymentMethod, mountOptions); + + return { wrapper }; +} + +describe('payment-method.vue', () => { + test('getting payment method when method is pay later', async () => { + // Arrange + const { wrapper } = setupMocks(); + const payLaterPaymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE; + useMainStore().savePaymentMethodChoice(payLaterPaymentMethod); + + // Act + const paymethod = wrapper.vm.getPaymentMethodFromStore(); + + // Assert + expect(paymethod).toBe(payLaterPaymentMethod); + }); + test('getting payment method when method is pay in advance', async () => { + // Arrange + const { wrapper } = setupMocks(); + const payInAdvancePaymentMethod = paymentMethods.CREDIT_CARD; + useMainStore().savePaymentMethodChoice(payInAdvancePaymentMethod); + + // Act + const paymethod = wrapper.vm.getPaymentMethodFromStore(); + + // Assert + expect(paymethod).not.toBe(payInAdvancePaymentMethod); + }); +}); diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 1aa1d20b..57e425f3 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -22,9 +22,9 @@
Pia Alert Placeholder
+ cmsWidgetName="PaymentMethodWidget" + :validationRules="rules.optionRequired" />
Pia Disabled Placeholder
{ vm.setCmsContent(resultMap.cmsContent); - vm.updateFooterButtonText(vm.customCtaCopy); + vm.updateFooterButtonText(vm.customCallToActionButtonCopy); vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData); }); }, data() { return { - paymentMethodInternalModel: this.getPaymentMethodFromStore() + paymentMethodInternalModel: this.getPaymentMethodFromStore(), + rules: { + optionRequired: globalRules.OPTION_REQUIRED + } }; }, computed: { damageInfo() { return useMainStore().order.damage; }, - customCtaCopy() { + customCallToActionButtonCopy() { switch (this.paymentMethod) { case paymentMethods.CREDIT_CARD: return 'Continue to checkout'; @@ -119,28 +122,12 @@ export default { return null; } }, - isPiaDisabled() { - // do we have this experiment in NextGen ISS? - - /* - const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE); - - const isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required"; - - return !isEnabled; - */ - return false; - }, paymentMethod() { - if (this.isPiaDisabled) { - return paymentMethods.LATER; - } - return this.paymentMethodInternalModel; } }, watch: { - customCtaCopy(newValue) { + customCallToActionButtonCopy(newValue) { this.updateFooterButtonText(newValue); } }, @@ -214,36 +201,19 @@ export default { ); }, getPaymentMethodFromStore() { - const { piaType } = useMainStore().order.payment; - const isPia = useMainStore().order.payment.isPia && !!piaType; + const { payInAdvanceType } = useMainStore().order.payment; + const isPayInAdvance = useMainStore().order.payment.isPayInAdvance && !!payInAdvanceType; - return isPia ? piaType : paymentMethods.LATER; + return isPayInAdvance ? payInAdvanceType : paymentMethods.PAY_AT_TIME_OF_SERVICE; }, updateFooterButtonText(newValue) { this.$refs.siteFooter.updateButtonText(newValue); }, async forwardButtonAction() { + // Multiple paths based on payment + console.log('forward button hit...'); + await useMainStore().savePaymentMethodChoice(this.paymentMethod); - - if (this.paymentMethod === paymentMethods.LATER) { - this.$router.navigate( - this.navigationScenarios.CLICKED_FORWARD, - this.$route - ); - } else { - this.setupPia(); - } - }, - async setupPia() { - this.$refs.loadingModal.showModal(); - - // if we don't have a work order in delete substatus, set the flag and submit. - // we need a work order number for pia so we can pass it to safeliteHop. - - this.$router.navigate( - this.navigationScenarios.CLICKED_PAY_NOW, - this.$route - ); } } }; diff --git a/src/store/index.js b/src/store/index.js index 44180935..c8623193 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -13,7 +13,7 @@ import damageLocationsSelected from '@/constants/damage-locations-selected'; import coverageStatuses from '@/constants/coverage-statuses'; import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from '@/constants/schedule-constants'; import { convertDateStringToDate, getDateDifferenceInDays, militaryToTwelveHourTime } from '@/helpers/date-helper'; -import { paymentMethods } from '@/constants/payment-method-constants'; +import paymentMethods from '@/constants/payment-method-constants'; const storeId = 'main'; @@ -149,8 +149,8 @@ const getDefaultState = () => ({ claimNumber: null }, parentAccountNumber: 0, - isPia: null, - piaType: null + isPayInAdvance: null, + payInAdvanceType: null }, contactInfo: { firstName: null, @@ -2141,10 +2141,10 @@ export const useMainStore = defineStore({ }, savePaymentMethodChoice(paymentMethod) { - const isPia = paymentMethod !== paymentMethods.LATER; - this.order.payment.isPia = isPia; - this.order.payment.piaType = isPia ? paymentMethod : null; - }, + const isPayInAdvance = paymentMethod !== paymentMethods.PAY_AT_TIME_OF_SERVICE; + this.order.payment.isPayInAdvance = isPayInAdvance; + this.order.payment.payInAdvanceType = isPayInAdvance ? paymentMethod : null; + } }, persist: true diff --git a/src/store/store.spec.js b/src/store/store.spec.js index 3c9599e5..108b5900 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -3,6 +3,7 @@ import { useMainStore } from '@/store/index.js'; import globalMethods from '@/global-methods.js'; import { getRandomString, getRandomGuid, getRandomInt, getRandomBoolean } from '@/helpers/data-generation.js'; import coverageStatuses from '@/constants/coverage-statuses.js'; +import paymentMethods from '@/constants/payment-method-constants'; import { endpoints } from '@/constants/endpoints'; import { AppointmentTypeStrings } from '@/constants/schedule-constants'; @@ -2083,4 +2084,29 @@ describe('Store', () => { expect(store.order.policy.policyLookupSuccessful).toBe(false); }); }); + + describe('savePaymentMethodChoice method', () => { + it('isPayInAdvance saved as false when choice is to pay at time of servce', () => { + // Arrange + const paymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE; + + // Act + store.savePaymentMethodChoice(paymentMethod); + + // Assert + expect(store.order.payment.isPayInAdvance).toEqual(false); + expect(store.order.payment.payInAdvanceType).toEqual(null); + }); + it('isPayInAdvance saved as true when choice is other than to pay at time of servce', () => { + // Arrange + const paymentMethod = paymentMethods.CREDIT_CARD; + + // Act + store.savePaymentMethodChoice(paymentMethod); + + // Assert + expect(store.order.payment.isPayInAdvance).toEqual(true); + expect(store.order.payment.payInAdvanceType).toEqual(paymentMethod); + }); + }); });