Add a loader to the finish claim button

Some site-footer formatting
Removed unused import in test file
This commit is contained in:
Bill Richardson 2024-08-29 13:29:52 -04:00
parent 31da5e40f8
commit e47acea58a
4 changed files with 23 additions and 6 deletions

View file

@ -15,9 +15,13 @@
<button <button
id="btnContinueReferral" id="btnContinueReferral"
type="button" 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"> @click="continueReferral">
{{ modalBodyText }} {{ modalBodyText }}
<loader
v-if="isLoaderDisplayed"
class="ms-2 button-loader" />
</button> </button>
</modal> </modal>
</div> </div>
@ -25,17 +29,24 @@
</template> </template>
<script> <script>
import loader from '@/ux-components/loader/loader.vue';
import modal from '@/digital-components/modal/modal.vue'; import modal from '@/digital-components/modal/modal.vue';
import { getISSCookie } from '@/helpers/cookie-helper.js'; import { getISSCookie } from '@/helpers/cookie-helper.js';
export default { export default {
name: 'continue-modal', name: 'continue-modal',
components: { components: {
loader,
modal modal
}, },
props: {
loaderColor: String,
loaderPosition: String
},
emits: ['continue-previous-referral', 'start-new-referral'], emits: ['continue-previous-referral', 'start-new-referral'],
data() { data() {
return { return {
isLoaderDisplayed: false,
isModalOpened: false isModalOpened: false
}; };
}, },
@ -62,6 +73,9 @@ export default {
openModal() { openModal() {
this.$refs.continueModal.openModal(); this.$refs.continueModal.openModal();
}, },
removeLoader() {
this.isLoaderDisplayed = false;
},
setModalStatus(isOpened) { setModalStatus(isOpened) {
this.isModalOpened = isOpened; this.isModalOpened = isOpened;
}, },
@ -69,6 +83,7 @@ export default {
this.$refs.continueModal.closeModal(); this.$refs.continueModal.closeModal();
}, },
continueReferral() { continueReferral() {
this.isLoaderDisplayed = true;
this.$emit('continue-previous-referral'); this.$emit('continue-previous-referral');
}, },
startNewReferral() { startNewReferral() {

View file

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<footer <footer
id="infoBox" id="infoBox"
class="footer container-fluid g-5 my-5 px-0"> class="footer container-fluid g-5 my-5 px-0">
<div <div
class="row d-flex vw-100 mx-0" class="row d-flex vw-100 mx-0"
:class="[ :class="[
@ -11,8 +11,8 @@ class="footer container-fluid g-5 my-5 px-0">
: 'flex-row-reverse align-items-center', : 'flex-row-reverse align-items-center',
]"> ]">
<div <div
id="stacked" id="stacked"
class="col button-col d-flex px-0"> class="col button-col d-flex px-0">
<buttonMain <buttonMain
v-if="!isForwardButtonHidden" v-if="!isForwardButtonHidden"
ref="buttonMain" ref="buttonMain"

View file

@ -12,7 +12,6 @@ import { useMainStore } from '@/store';
import navigationScenarios from '@/router/router-constants/navigation-scenarios'; import navigationScenarios from '@/router/router-constants/navigation-scenarios';
import routerParams from '@/router/router-constants/router-params'; import routerParams from '@/router/router-constants/router-params';
import coverageType from '@/constants/coverage-type'; import coverageType from '@/constants/coverage-type';
import globalMethods from '@/global-methods';
// Mock our module for promises. // Mock our module for promises.
jest.mock('@/helpers/layout-helper.js', () => jest.fn()); jest.mock('@/helpers/layout-helper.js', () => jest.fn());

View file

@ -462,8 +462,11 @@ export default {
console.error(`Error on loading session from cookie ${error}`); console.error(`Error on loading session from cookie ${error}`);
this.startNewReferral(); this.startNewReferral();
} finally { } finally {
this.$refs.continueModal.removeLoader();
this.$refs.continueModal.closeModal(); this.$refs.continueModal.closeModal();
} }
} else {
this.$refs.continueModal.removeLoader();
} }
}, },
startNewReferral() { startNewReferral() {