SSR-1064 restored sitefooter

src/iss-components/nav-bar/nav-bar.spec.js

@@ -1,59 +0,0 @@
-import { mount } from '@vue/test-utils';
-import navbar from './nav-bar';
-
-const mockMixin = {
-    methods: {
-        getCmsContent: jest.fn(),
-        getFooterInfoBoxHeight: jest.fn(() => 80)
-    }
-};
-
-describe('nav-bar.vue', () => {
-    test('Should emit ForwardClicked on button click', async () => {
-        // Act
-        const wrapper = mount(navbar, {
-            mixins: [mockMixin]
-        });
-        wrapper.vm.buttonClick();
-        // Assert
-        expect(wrapper.emitted()['ForwardClicked'][0]).toHaveBeenCalled;
-    });
-
-    test('Should emit BackClicked on link click', async () => {
-        // Act
-        const wrapper = mount(navbar, {
-            mixins: [mockMixin]
-        });
-        wrapper.vm.linkClick();
-        // Assert
-        expect(wrapper.emitted()['BackClicked'][0]).toHaveBeenCalled;
-    });
-
-    test('Should change button text when update button text is called', async () => {
-        // Act
-        const wrapper = mount(navbar, {
-            mixins: [mockMixin]
-        });
-        wrapper.vm.updateButtonText('newText');
-
-        // Assert
-        expect(wrapper.componentVM.customButtontext).toBe('newText');
-    });
-
-    test('should run removeLoader fn on buttonMain and return false for onkeydown fn', async () => {
-        // Arrange
-        const wrapper = mount(navbar, {
-            mixins: [mockMixin]
-        });
-
-        // Act
-        wrapper.vm.$refs.buttonMain.removeLoader = jest.fn();
-        wrapper.vm.removeLoader();
-        const spy = jest.spyOn(document, 'onkeydown');
-        document.onkeydown();
-
-        // Assert
-        expect(wrapper.vm.$refs.buttonMain.removeLoader).toHaveBeenCalled();
-        expect(spy).toReturnWith(true);
-    });
-});

src/iss-components/nav-bar/nav-bar.vue

@@ -1,162 +0,0 @@
-<template>
-    <div class="row"></div>
-    <div class="nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
-        <div
-            class="row d-flex justify-content-between vw-100"
-            :class="[
-                buttonSize
-                    ? 'flex-column align-items-stretch'
-                    : 'flex-row-reverse align-items-center',
-            ]">
-            <div
-                :class="['col button-col d-flex', buttonSize ? 'large-button' : 'medium-button']"
-                id="stacked">
-                <buttonMain
-                    ref="buttonMain"
-                    isPrimary
-                    :buttonText="buttonText"
-                    loaderColor="white"
-                    :class="isForwardActionDisabled && 'form-test-invalid'"
-                    :aria-disabled="isForwardActionDisabled"
-                    :isDisabled="isForwardActionDisabled"
-                    @click-event="buttonClick"
-                    data-bs-target="#footerModal"
-                    data-test-id="nav-bar-main-button"
-                    data-bs-dismiss="modal"
-                    v-if="!isSubmitHidden" />
-            </div>
-            <div
-                v-if="!isBackButtonHidden"
-                class="col-auto link-col py-1 text-break"
-                :class="[buttonSize ? 'back-centered-below mt-5' : '']">
-                <textLink
-                    linkType="navigation"
-                    :text="backLink"
-                    useLoadingModal
-                    @click-event="linkClick"
-                    href="javascript:void(0)"
-                    data-bs-target="#footerModal"
-                    data-bs-dismiss="modal" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import textLink from '@/ux-components/text-link/text-link.vue';
-import buttonMain from '@/ux-components/button-main/button-main.vue';
-
-export default {
-    name: 'navbar',
-    components: {
-        textLink,
-        buttonMain
-    },
-    props: {
-        isForwardActionDisabled: Boolean,
-        isBackButtonHidden: { type: Boolean, default: false },
-        cmsWidgetName: String,
-        buttonSize: { type: Boolean, default: false },
-        isSubmitHidden: { type: Boolean, default: false }
-    },
-    emits: ['BackClicked', 'ForwardClicked'], // <--- should remove oodles of warnings in dev tools
-    data() {
-        return {
-            customButtontext: ''
-        };
-    },
-    computed: {
-        backLink() {
-            return this.getCmsContent(this.cmsWidgetName, 'BackButtonText');
-        },
-        buttonText() {
-            return this.customButtontext
-                ? this.customButtontext
-                : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
-        }
-    },
-    unmounted() {
-        document.onkeydown = null;
-    },
-    methods: {
-        updateButtonText(newText) {
-            this.customButtontext = newText;
-        },
-        removeLoader() {
-            this.$refs.buttonMain.removeLoader();
-            document.onkeydown = function (e) {
-                return true;
-            };
-        },
-        buttonClick() {
-            // prevent keyboard input after button click
-            document.onkeydown = function (e) {
-                return false;
-            };
-            this.$emit('ForwardClicked');
-        },
-        linkClick() {
-            this.$emit('BackClicked');
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.nav-bar {
-    overflow: visible;
-    display: flex;
-    padding: 0;
-    a {
-        display: flex;
-        justify-content: center;
-    }
-    .col,
-    .col-auto,
-    .col button {
-        width: 100%;
-    }
-
-    .back-centered-below {
-        display: flex;
-        justify-content: center;
-    }
-
-    @media only screen and (min-width: 340px) {
-        .col,
-        .col-auto,
-        .col button {
-            width: auto;
-            justify-content: flex-end;
-        }
-
-        .back-centered-below {
-            display: flex;
-            justify-content: center;
-        }
-
-        .btn-primary {
-            width: auto;
-        }
-        a {
-            display: flex;
-            justify-content: flex-start;
-        }
-    }
-    & > .container-fluid {
-        overflow-x: visible; // needed to fix hidden footer on some iphones
-    }
-    .medium-button {
-        // Define styles for a medium button (default size)
-        justify-content: flex-end;
-        width: auto;
-    }
-    .large-button {
-        justify-content: center;
-        .btn-primary {
-            width: 100%;
-            justify-content: center;
-        }
-    }
-}
-</style>

src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js

@@ -17,15 +17,15 @@ const testConstants = {
     content: {
         withInline: 'Button text with {custom:inlineImage} inline.',
         noInline: 'Button text with no inline'
-    },
+    }
 };
 
 let cmsContent;
 
 function generateDefaultProps() {
     return {
-        buttonLabel: testConstants.noInline,
+        buttonLabel: testConstants.content.noInline,
-        altText: testConstants.noInline,
+        altText: testConstants.content.noInline,
         groupName: 'payment-method',
         value: testConstants.names.A,
         buttonImage: testConstants.images.A
@@ -37,9 +37,7 @@ function setupMocks(customMountOptions) {
 
     const mockMixin = {
         methods: {
-            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent?.[widgetName]?.[cmsFieldName] ?? '')
-                return cmsContent?.[widgetName]?.[cmsFieldName] ?? '';
-            })
         }
     };
 

src/layouts/payment-method/payment-method-question/payment-method-question.spec.js

@@ -24,9 +24,9 @@ const testConstants = {
                 imageId: 'idB',
                 image: 'imageB',
                 subWidget: 'subWidgetB'
-            },
+            }
-        },
+        }
-    },
+    }
 };
 
 let cmsContent;
@@ -53,7 +53,6 @@ function setupMocks(customMountOptions) {
     return { wrapper };
 }
 
-
 describe('Payment Method Question', () => {
     beforeEach(() => {
         cmsContent = {
@@ -99,15 +98,15 @@ describe('Payment Method Question', () => {
                 altText: testConstants.cms.answers.optionA.text,
                 groupName: 'payment-method',
                 value: testConstants.cms.answers.optionA.name,
-                buttonImage: testConstants.cms.answers.optionA.image,
+                buttonImage: testConstants.cms.answers.optionA.image
             },
             {
                 buttonLabel: testConstants.cms.answers.optionB.text,
                 altText: testConstants.cms.answers.optionB.text,
                 groupName: 'payment-method',
                 value: testConstants.cms.answers.optionB.name,
-                buttonImage: testConstants.cms.answers.optionB.image,
+                buttonImage: testConstants.cms.answers.optionB.image
-            },
+            }
         ]);
     });
 
@@ -117,7 +116,7 @@ describe('Payment Method Question', () => {
         const props = generateDefaultProps();
 
         const { wrapper } = setupMocks({
-            propsData: props,
+            propsData: props
         });
 
         // Act

src/layouts/payment-method/payment-method.vue

@@ -4,9 +4,6 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <loadingModal
-            ref="loadingModal"
-            notFullScreen />
         <div class="page-container-grouped-styles">
             <siteHeader
                 ref="siteHeader"
@@ -29,13 +26,13 @@
                         v-model="paymentMethodInternalModel"
                         validationRules="option-required" />
                 <div>Pia Disabled Placeholder</div>
-                <navbar
+                <siteFooter
                     ref="siteFooter"
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     :isBackButtonHidden="shouldHideBackButton"
                     buttonSize
-                    @backClicked="backButtonAction"
+                    @backClicked="navigateBack"
                     @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
@@ -45,11 +42,10 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
-import navbar from '@/iss-components/nav-bar/nav-bar.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import reviewDropdown from '@/layouts/payment-method/review-dropdown/review-dropdown.vue';
 import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue';
-import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
 
 // Supporting Items
 import settleAllPromises from '@/helpers/layout-helper';
@@ -72,10 +68,9 @@ export default {
         Form,
         siteHeader,
         siteSubHeader,
-        navbar,
+        siteFooter,
         reviewDropdown,
-        paymentMethodQuestion,
+        paymentMethodQuestion
-        loadingModal
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
@@ -227,14 +222,11 @@ export default {
         updateFooterButtonText(newValue) {
             this.$refs.siteFooter.updateButtonText(newValue);
         },
-        backButtonAction() {
-            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         async forwardButtonAction() {
             await useMainStore().savePaymentMethodChoice(this.paymentMethod);
 
             if (this.paymentMethod === paymentMethods.LATER) {
-                this.$router.navigateWithoutSaving(
+                this.$router.navigate(
                     this.navigationScenarios.CLICKED_FORWARD,
                     this.$route
                 );
@@ -248,7 +240,7 @@ export default {
             // 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.navigateWithoutSaving(
+            this.$router.navigate(
                 this.navigationScenarios.CLICKED_PAY_NOW,
                 this.$route
             );