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;
}