Merge pull request #1086 from Safelite/feature/INSR-8325

INSR-8325: coverage statement defects

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 {

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 () => {

src/layouts/coverage-statement/coverage-statement.vue

@@ -81,7 +81,7 @@
                         linkType="text"
                         text="No, I want to cancel"
                         href="#"
-                        @clickEvent="cancelClaim" />
+                        @clickEvent="openCancelClaimModal" />
                     <textBlock
                         v-if="isDisclaimerVisible"
                         class="mt-5 mb-5"
@@ -100,6 +100,10 @@
             :ref="RECAL_MODAL_REF_NAME"
             cssModalHeadlineClass="text-center"
             cmsWidgetName="RecalModal" />
+        <cancelClaimModal
+            :ref="CANCEL_CLAIM_REF_NAME"
+            @cancelClaimConfirmation="cancelClaim"
+            @returnToClaim="navigateForward" />
     </Form>
 </template>
 
@@ -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;
         }