diff --git a/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap b/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap index ef566a55..26f60304 100644 --- a/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap +++ b/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap @@ -2,6 +2,7 @@ exports[`coverageStatement.vue returns the initial data 1`] = ` Object { + "CANCEL_CLAIM_REF_NAME": "CancelClaimModal", "RECAL_MODAL_REF_NAME": "RecalModal", "baseServiceLineItems": Array [], "widget": Object { diff --git a/src/layouts/coverage-statement/coverage-statement.spec.js b/src/layouts/coverage-statement/coverage-statement.spec.js index bc9c964f..aa9c3058 100644 --- a/src/layouts/coverage-statement/coverage-statement.spec.js +++ b/src/layouts/coverage-statement/coverage-statement.spec.js @@ -98,6 +98,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); const wrapper = shallowMount(coverageStatement, mountOptions); + wrapper.vm.$refs[CANCEL_CLAIM_REF_NAME].openModal = jest.fn(); return { wrapper }; } @@ -672,6 +673,18 @@ describe('coverageStatement.vue', () => { ); }); }); + describe('openCancelClaimModal', () => { + test('when I want to cancel link is clicked, modal opens', () => { + // Arrange + const { wrapper } = getMountedComponent({}); + + // Act + wrapper.vm.openCancelClaimModal(); + + // Assert + expect(wrapper.vm.$refs[CANCEL_CLAIM_REF_NAME].openModal).toHaveBeenCalled(); + }); + }); }); describe('claim registration api call', () => { it('Loaded duplicate with previously registered claim => claim registration is not called', async () => { diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue index 7a6de23d..c1c7abbd 100644 --- a/src/layouts/coverage-statement/coverage-statement.vue +++ b/src/layouts/coverage-statement/coverage-statement.vue @@ -81,7 +81,7 @@ linkType="text" text="No, I want to cancel" href="#" - @clickEvent="cancelClaim" /> + @clickEvent="openCancelClaimModal" /> + @@ -108,6 +112,7 @@ import { Form } from 'vee-validate'; import siteHeader from '@/iss-components/site-header/site-header.vue'; import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue'; +import cancelClaimModal from '@/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue'; import textBlock from '@/digital-components/text-block/text-block.vue'; import textLink from '@/ux-components/text-link/text-link.vue'; import buttonMain from '@/ux-components/button-main/button-main.vue'; @@ -134,6 +139,7 @@ import coverageStatuses from '@/constants/coverage-statuses'; import coverageType from '@/constants/coverage-type'; const RECAL_MODAL_REF_NAME = 'RecalModal'; +const CANCEL_CLAIM_REF_NAME = 'CancelClaimModal'; export default { name: 'coverage-statement', @@ -144,7 +150,8 @@ export default { buttonMain, textBlock, textLink, - siteFooter + siteFooter, + cancelClaimModal }, mixins: [baseFormMixin, vehicleQuestionsMixin], async beforeRouteEnter(to, from, next) { @@ -205,7 +212,8 @@ export default { explanatoryText: 'ExplanatoryTextWidget', nextStep: 'NextStepsWidget' }, - RECAL_MODAL_REF_NAME + RECAL_MODAL_REF_NAME, + CANCEL_CLAIM_REF_NAME }; }, computed: { @@ -444,6 +452,9 @@ export default { this.baseServiceLineItems = lineItems; }, formatAmountInDollars, + openCancelClaimModal() { + this.$refs[CANCEL_CLAIM_REF_NAME].openModal(); + }, cancelClaim() { this.mainStore.updateIsSafeliteProvider(false); this.mainStore.setBailout(bailoutMessage.RequestCallback()); @@ -531,6 +542,9 @@ export default { font-weight: 500; } margin-top: 6px; + .external-text { + text-decoration: underline; + } a { text-decoration: none; }