added tap recal modal

src/digital-components/modal/modal.vue

@@ -33,7 +33,7 @@
                         loaderColor="white"
                         :buttonText="footerButtonText"
                         @click-event="validateAndEmit"
-                        :class="isFooterButtonDisabled && 'form-test-invalid'" />
+                        :class="(isButtonDisabled || isFooterButtonDisabled) && 'form-test-invalid'" />
                 </div>
             </div>
         </div>
@@ -57,6 +57,7 @@ export default {
         onModalClosedCallback: {
             type: Function,
         },
+        isButtonDisabled: Boolean
     },
     setup(props) {
         const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`;
@@ -80,7 +81,7 @@ export default {
             }
         },
         resetButtonStyle() {
-            this.$refs.modalButtonMain.resetButtonStyle();
+            this.$refs.modalButtonMain?.resetButtonStyle();
         },
         onModalOpened() {
             this.onModalOpenedCallback?.();

src/layouts/provider-preference/provider-preference.spec.js

@@ -6,7 +6,6 @@ import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-h
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { useMainStore } from "@/store";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
-import { nextTick } from "vue";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({

src/layouts/provider-preference/provider-preference.vue

@@ -1,8 +1,5 @@
 <template>
-    <Form @submit="onSubmit" 
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        @invalid-submit="onInvalidSubmit" 
-        ref="theForm"  
-        >
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
@@ -35,10 +32,11 @@
             @openSteering="openStateSteeringModal"
             :showSteeringLink="showSteeringLink"/>
         <tpaRecalModal cmsWidgetName="TPARecalModal" 
-            ref="TPARecalModal" 
+            ref="TPARecalModal"
-            @buttonClick="() => navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED)"
+            :ackError="ackError" 
-            />
+            @buttonClick="navigateWithTPAAck"
-    </Form>    
+            /> 
+    </Form>
 
 </template>
 <script>
@@ -130,6 +128,9 @@ export default {
                 }
             ));
             return modifiedAnswers;
+        },
+        ackError() {
+            return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
         }
     },
     methods: {
@@ -152,6 +153,10 @@ export default {
         navigateForward(scenario){
             this.$router.navigate(scenario, this.$route);
         },
+        navigateWithTPAAck() {
+            this.mainStore.saveProviderPreferenceData({selectedProvider: this.selectedProvider, tpaAcknowledgement: this.tpaAcknowledgement}); 
+            this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
+        },
         forwardButtonAction() {
             if(this.selectedProvider) {
                 let scenario = null; 
@@ -165,6 +170,7 @@ export default {
                             if(this.mainStore.hasRecalibrationPart)
                             {
                                 this.$refs["TPARecalModal"].openModal();
+                                this.$refs["siteFooter"].removeLoader();
                                 return;
                             }
                             scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;

src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.spec.js

@@ -4,9 +4,6 @@ import { shallowMount } from '@vue/test-utils';
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import { useMainStore } from "@/store";
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
-import { nextTick } from "vue";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({

src/layouts/provider-preference/steering-modal/steering-modal.spec.js

@@ -5,8 +5,6 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { useMainStore } from "@/store";
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
-import { nextTick } from "vue";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({

src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js

@@ -0,0 +1,58 @@
+
+import tpaRecalModal from "./tpa-recal-modal.vue"
+
+import { shallowMount } from '@vue/test-utils';
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+  fetchCmsContentForPage: jest.fn(),
+  setupModalLinks: jest.fn(),
+}));
+  
+describe('tpa-Recal-Modal.vue', () => {
+    test('should show error if not acknowledged', () => {
+      const { wrapper } = setupMocks();
+      wrapper.vm.acknowledged = false;
+      wrapper.vm.footerButtonClick();
+      
+      expect(wrapper.vm.showError).toBeTruthy();
+    }) 
+  
+    test('should not show error if acknowledged', () => {
+        const { wrapper } = setupMocks();
+        wrapper.vm.acknowledged = true;
+        wrapper.vm.footerButtonClick();
+        
+        expect(wrapper.vm.showError).toBeFalsy();
+    }) 
+});
+
+function setupMocks(){
+
+    const mountOptions = getMountOptions({
+      router: {
+          navigate: jest.fn(),
+      },
+    });
+
+    const wrapper = shallowMount(
+        tpaRecalModal,
+        mountOptions
+    );
+    
+    const apiResponses = {};
+
+    settleAllPromises.mockImplementation(() => apiResponses);
+    fetchCmsContentForPage.mockImplementation (() => {});
+
+
+    return { wrapper };
+}

src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue

@@ -3,13 +3,17 @@
         :ref="ModalName"
         :modalId="ModalName"
         :footerButtonText="ModalCloseButtonText"
-        @footer-button-event="footerButtonClick">
+        @footer-button-event="footerButtonClick"
-        <h5 class="text-center mb-4">{{ModalHeadline}}</h5>
+        :isButtonDisabled="isButtonDisabled">
-        <div>
+        <div class="form-test-invalid">
-            <div class="mb-4" v-html="ModalBodyText"></div>
+            <h5 class="text-center mb-4">{{ModalHeadline}}</h5>
-            <tpaRecalToggle cmsWidgetName="TPARecalModalToggle"/>
             <div>
-                <checkBox 
+                <div class="mb-4" v-html="ModalBodyText"></div>
+                <tpaRecalToggle class="mb-5" cmsWidgetName="TPARecalModalToggle"/>
+                <checkBox
+                    class="mb-2"
+                    :class="showError && ' has-error'"
+                    validationRules="option-required"
                     checkboxName="tpaAcknowledgement"
                     buttonID="tpaAcknowledgement"
                     :tabIndex="0"
@@ -19,6 +23,9 @@
                     ref="tpaAcknowledgement"
                     v-model="acknowledged"
                 />
+                <div v-if="showError" class="row form-test-error mt-1">
+                    <p>{{ackError}}</p>
+                </div>
             </div>
         </div>
     </modal>
@@ -33,10 +40,12 @@ export default {
     name: "content-group-modal",
     props: {
         cmsWidgetName: String,
+        ackError: String,
     },
     data() {
         return {
             acknowledged: false,
+            showError: false
         };
     },
     emits: ["buttonClick"],
@@ -55,6 +64,9 @@ export default {
         },
         ModalCloseButtonText() {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+        isButtonDisabled() {
+            return !this.acknowledged
         }
     },
     methods: {
@@ -64,21 +76,29 @@ export default {
 
         footerButtonClick() {
             //check if acked, if not show error
-            this.$refs[this.ModalName].closeModal();
+            if(this.acknowledged)
-            this.$emit("buttonClick");
+            {
+                this.$refs[this.ModalName]?.closeModal();
+                this.$emit("buttonClick");
+            }
+            else
+            {
+                this.$refs[this.ModalName]?.resetButtonStyle();
+                this.showError = true;
+            }
+
         },
+
     },
     watch: {
-        acknowledged(newValue){
+        acknowledged(){
-            //enable/disable footer based on value
+            this.showError = false;
-            //need to update modal to accept prop for this
-            console.log(newValue);
         }
     },
     components: {
         modal,
         tpaRecalToggle,
-        checkBox
+        checkBox,
     },
 };
 </script>
@@ -99,10 +119,38 @@ export default {
                         &:last-child {
                             margin-bottom: 0;
                         }
+                        margin-bottom: .5rem;
                     }
                 }
             }
         }
     }
 }
+
+.form-check {
+    .form-check-input {
+        &:checked {
+            + label {
+                p {
+                    font-weight: 400 !important;
+                    font-size: 1rem !important;
+                    color: $gray-600 !important;
+                    line-height: 1.5rem;
+                }
+            }
+        }
+    }
+    p {
+        font-weight: 400 !important;
+        font-size: 1rem !important;
+        color: $gray-600 !important;
+        line-height: 1.5rem;
+    }
+}
+
+.form-test-error {
+    p {
+        font-weight: 500;
+    }
+}
 </style>

src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js

@@ -0,0 +1,85 @@
+/* eslint-env jest */
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { issPageValues } from '@/router/router-constants/issPage-values';
+import { queryStrings } from '@/constants/query-strings';
+import { GaActions } from "@/constants/analytics";
+import tpaRecalToggle from './tpa-recal-toggle.vue';
+
+const mockText = Object.freeze({
+  HEADER: 'Mock Header',
+  BODY: 'Mock Body',
+});
+const mockRoute = {
+  query: {    
+    issPage: issPageValues.PROVIDER_PREFERENCE,
+  },
+};
+const mockRouter = {
+  navigate: jest.fn(),
+};
+
+const mountOptions = {
+  global: {
+    propsData: {
+      cmsWidgetName: "MockWidgetName",
+    },
+    mixins: [
+      {
+        methods: {
+          getCmsContent: jest.fn((cmsWidgetName, fieldName) => {
+            if (cmsWidgetName === 'MockWidgetName') {
+              if (fieldName === 'HeaderText') {
+                return mockText.HEADER;
+              }
+
+              if (fieldName === 'BodyText') {
+                return mockText.BODY;
+              }
+            }
+
+            return '';
+          }),
+          pushEventToGA: jest.fn()
+        },
+        computed: {
+          GaActions() {
+            return GaActions;
+          },
+          queryStrings() {
+            return queryStrings;
+          },
+        }
+      },
+    ],
+    mocks: {
+      $route: mockRoute,
+      $router: mockRouter,
+    },
+  },
+};
+
+describe('more details section', () => {
+  test('should NOT be displayed on the screen as a default.', () => {
+    const { container } = render(tpaRecalToggle, mountOptions);
+
+    const moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
+
+    expect(moreDetailsSection).not.toBeVisible();
+  });
+
+  test('should toggle when arrow clicked', async () => {
+    const user = userEvent.setup();
+    const { container } = render(tpaRecalToggle, mountOptions);
+    const toggleLink = container.querySelector('#moreDetails');;
+
+    await user.click(toggleLink);
+    let moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
+    expect(moreDetailsSection).toBeVisible();
+
+    await user.click(toggleLink);
+    moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
+    expect(moreDetailsSection).not.toBeVisible();
+  });
+});

src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue

@@ -9,6 +9,7 @@
           linkType="text"
           href="#!"
           :text="textForToggle"
+          id="moreDetails"
         />
       </div>
       <Transition>

src/ux-components/checkbox/checkbox.vue

@@ -13,7 +13,7 @@
             :ref="checkboxName"
              />
         <label class="d-flex align-items-start" :for="buttonID">
-            <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
+            <p v-if="checkboxLabel" class="m-0" v-html="checkboxLabel"></p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
         </label>
     </div>