From e47acea58afabd44acdf374130e5e3257d39bceb Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Thu, 29 Aug 2024 13:29:52 -0400
Subject: [PATCH] Add a loader to the finish claim button

Some site-footer formatting
Removed unused import in test file
---
 .../continue-modal/continue-modal.vue           | 17 ++++++++++++++++-
 src/iss-components/site-footer/site-footer.vue  |  8 ++++----
 src/layouts/welcome-page/welcome-page.spec.js   |  1 -
 src/layouts/welcome-page/welcome-page.vue       |  3 +++
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/iss-components/continue-modal/continue-modal.vue b/src/iss-components/continue-modal/continue-modal.vue
index 820fc3bf..24bfaf8e 100644
--- a/src/iss-components/continue-modal/continue-modal.vue
+++ b/src/iss-components/continue-modal/continue-modal.vue
@@ -15,9 +15,13 @@
                 <button
                     id="btnContinueReferral"
                     type="button"
-                    class="btn btn-white-blue continue-referral align-items-center justify-content-center mt-2 py-3 px-4 delay w-100"
+                    class="btn btn-white-blue continue-referral
+                    align-items-center justify-content-center d-inline-flex mt-2 py-3 px-4 delay w-100"
                     @click="continueReferral">
                     {{ modalBodyText }}
+                    <loader
+                        v-if="isLoaderDisplayed"
+                        class="ms-2 button-loader" />
                 </button>
             </modal>
         </div>
@@ -25,17 +29,24 @@
 </template>
 
 <script>
+import loader from '@/ux-components/loader/loader.vue';
 import modal from '@/digital-components/modal/modal.vue';
 import { getISSCookie } from '@/helpers/cookie-helper.js';
 
 export default {
     name: 'continue-modal',
     components: {
+        loader,
         modal
     },
+    props: {
+        loaderColor: String,
+        loaderPosition: String
+    },
     emits: ['continue-previous-referral', 'start-new-referral'],
     data() {
         return {
+            isLoaderDisplayed: false,
             isModalOpened: false
         };
     },
@@ -62,6 +73,9 @@ export default {
         openModal() {
             this.$refs.continueModal.openModal();
         },
+        removeLoader() {
+            this.isLoaderDisplayed = false;
+        },
         setModalStatus(isOpened) {
             this.isModalOpened = isOpened;
         },
@@ -69,6 +83,7 @@ export default {
             this.$refs.continueModal.closeModal();
         },
         continueReferral() {
+            this.isLoaderDisplayed = true;
             this.$emit('continue-previous-referral');
         },
         startNewReferral() {
diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue
index 357b08ec..8ca18f60 100644
--- a/src/iss-components/site-footer/site-footer.vue
+++ b/src/iss-components/site-footer/site-footer.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
         <footer
-id="infoBox"
-class="footer container-fluid g-5 my-5 px-0">
+            id="infoBox"
+            class="footer container-fluid g-5 my-5 px-0">
             <div
                 class="row d-flex vw-100 mx-0"
                 :class="[
@@ -11,8 +11,8 @@ class="footer container-fluid g-5 my-5 px-0">
                         : 'flex-row-reverse align-items-center',
                 ]">
                 <div
-id="stacked"
-class="col button-col d-flex px-0">
+                    id="stacked"
+                    class="col button-col d-flex px-0">
                     <buttonMain
                         v-if="!isForwardButtonHidden"
                         ref="buttonMain"
diff --git a/src/layouts/welcome-page/welcome-page.spec.js b/src/layouts/welcome-page/welcome-page.spec.js
index 1fd64cfd..865883ac 100644
--- a/src/layouts/welcome-page/welcome-page.spec.js
+++ b/src/layouts/welcome-page/welcome-page.spec.js
@@ -12,7 +12,6 @@ import { useMainStore } from '@/store';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios';
 import routerParams from '@/router/router-constants/router-params';
 import coverageType from '@/constants/coverage-type';
-import globalMethods from '@/global-methods';
 
 // Mock our module for promises.
 jest.mock('@/helpers/layout-helper.js', () => jest.fn());
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index fa5eace3..139bf4b1 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -462,8 +462,11 @@ export default {
                     console.error(`Error on loading session from cookie ${error}`);
                     this.startNewReferral();
                 } finally {
+                    this.$refs.continueModal.removeLoader();
                     this.$refs.continueModal.closeModal();
                 }
+            } else {
+                this.$refs.continueModal.removeLoader();
             }
         },
         startNewReferral() {