Add a loader to the finish claim button
Some site-footer formatting Removed unused import in test file
This commit is contained in:
parent
31da5e40f8
commit
e47acea58a
4 changed files with 23 additions and 6 deletions
|
|
@ -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() {
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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());
|
||||||
|
|
|
||||||
|
|
@ -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() {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue