jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mostly done

Browse source
This commit is contained in:
Michaela Brydon 2024-07-17 16:42:18 -04:00
parent 203898871b
commit 4dc6887560
9 changed files with 83 additions and 254 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/iss-components/cart-dropdown/cart-dropdown.vue
View file

@ -492,7 +492,7 @@ export default {
:deep(a) {
padding-bottom: 0 !important;
line-height: 1.625 !important;
line-height: 1.625rem !important;
text-underline-offset: auto !important;
}

1
src/iss-components/content-group-modal/content-group-modal.vue
View file

@ -61,6 +61,7 @@ export default {
},
methods: {
openModal() {
console.log(JSON.stringify(this.$refs));
this.$refs[this.ModalName].openModal();
},

73
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -4,7 +4,7 @@
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="container-fluid fade-on-route-transition coverage-statement">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
@ -85,10 +85,9 @@
</div>
</div>
</div>
<recalModal
<contentGroupModal
ref="RecalModal"
cmsWidgetName="RecalModal"
class="recal-modal" />
cmsWidgetName="RecalModal" />
<contentGroupModal
ref="DeductibleModal"
cmsWidgetName="DeductibleModal"
@ -100,7 +99,6 @@
import { Form } from 'vee-validate';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
import alert from '@/ux-components/alert/alert.vue';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
@ -137,7 +135,6 @@ export default {
siteHeader,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
recalModal,
alert,
contentGroupModal,
buttonQuestion,
@ -464,41 +461,38 @@ export default {
</script>
<style lang="scss" scoped>
.cost {
color: $green;
font-size: 2rem;
font-weight: $font-weight-light;
line-height: 2.75rem;
}
.deductible-text {
line-height: 1.5rem;
}
:deep p {
line-height: 1.5rem;
font-size: 0.875rem;
margin-bottom: 0.5rem;
strong {
color: $black;
.coverage-statement {
.cost {
color: $green;
font-size: 2rem;
font-weight: $font-weight-light;
line-height: 2.75rem;
}
}
:deep .question-text {
margin-top: 1.5rem;
margin-bottom: 0.5rem;
font-size: 1rem;
line-height: 1.5rem;
& > span {
text-align: left;
.deductible-text {
line-height: 1.5rem;
}
:deep p {
line-height: 1.5rem;
font-size: 0.875rem;
margin-bottom: 0.5rem;
strong {
color: $black;
}
}
:deep .question-text {
margin-top: 1.5rem;
margin-bottom: 0.5rem;
font-size: 1rem;
line-height: 1.5rem;
& > span {
text-align: left;
}
}
}
:deep .deductible-modal {
p {
margin-bottom: 0 !important;
font-size: 1rem;
line-height: 1.625rem;
}
img.mb-4 {
margin: 0 !important;
@ -511,17 +505,6 @@ export default {
}
}
:deep(.recal-modal) {
p {
font-size: 1rem;
line-height: 1.625rem;
&.modal-body {
padding: 0;
}
}
}
.modal {
overflow: hidden;
}

66
src/layouts/coverage-statement/recal-modal/recal-modal.spec.js
View file

@ -1,66 +0,0 @@
import { mount } from '@vue/test-utils';
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
const mockCmsContent = {
HeaderText: 'Sample header text here.',
SubheaderText: 'Sample subheader text here.',
Image: 'https://www.sampleImage.sample',
BodyText: 'Sample body text here.',
FooterText: 'Sample footer text here.'
};
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, cmsFieldName) => mockCmsContent[cmsFieldName])
}
};
describe('modal.vue', () => {
it('Should display header text when HeaderText is defined in the CMS', async () => {
// Act
const wrapper = mount(recalModal, {
mixins: [mockMixin],
props: {
cmsWidgetName: 'test'
},
attachTo: document.body
});
expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent.HeaderText));
});
it('Should display subheader text when SubheaderText is defined in the CMS', async () => {
// Act
const wrapper = mount(recalModal, {
mixins: [mockMixin],
props: {
cmsWidgetName: 'test'
},
attachTo: document.body
});
expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent.SubheaderText));
});
it('Should insert image url when Image is defined in the CMS', async () => {
// Act
const wrapper = mount(recalModal, {
mixins: [mockMixin],
props: {
cmsWidgetName: 'test'
},
attachTo: document.body
});
expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent.Image));
});
it('Should display body text when BodyText is defined in the CMS', async () => {
// Act
const wrapper = mount(recalModal, {
mixins: [mockMixin],
props: {
cmsWidgetName: 'test'
},
attachTo: document.body
});
expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent.BodyText));
});
});

89
src/layouts/coverage-statement/recal-modal/recal-modal.vue
View file

@ -1,89 +0,0 @@
<template>
<modal
:ref="ModalName"
:modalId="ModalName"
:footerButtonText="ModalCloseButtonText"
@footerButtonEvent="closeModal">
<div class="recal-modal-body">
<h5
class="mb-4 text-center"
v-html="ModalHeadline"></h5>
<img
:src="ModalImage"
class="mw-100 d-flex mx-auto mb-4"
alt="" />
<p
class="fw-bold mb-2 subheader-text"
v-html="ModalSubheadertext"></p>
<p
class="mb-0 small modal-body"
v-html="ModalBodyText"></p>
<p
v-if="ModalSubBodyText"
class="my-4 caption modal-sub-body"
v-html="ModalSubBodyText">
</p>
</div>
</modal>
</template>
<script>
import modal from '@/digital-components/modal/modal.vue';
export default {
name: 'recal-modal',
components: {
modal
},
props: {
cmsWidgetName: String
},
computed: {
ModalName() {
return this.cmsWidgetName;
},
ModalHeadline() {
return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
},
ModalSubheadertext() {
return this.getCmsContent(this.cmsWidgetName, 'SubheaderText');
},
ModalBodyText() {
return this.getCmsContent(this.cmsWidgetName, 'BodyText');
},
ModalSubBodyText() {
return this.getCmsContent(this.cmsWidgetName, 'BodyText2');
},
ModalImage() {
return this.getCmsContent(this.cmsWidgetName, 'Image');
},
ModalCloseButtonText() {
return this.getCmsContent(this.cmsWidgetName, 'FooterText');
}
},
methods: {
openModal() {
this.$refs[this.ModalName].openModal();
},
closeModal() {
this.$refs[this.ModalName].closeModal();
}
}
};
</script>
<style lang="scss" scoped>
:deep .recal-modal-body {
h5 {
color: $black;
}
.modal-body {
strong {
color: $black;
font-weight: 400;
}
}
}
</style>

2
src/layouts/payment-method/review-dropdown/review-dropdown.vue
View file

@ -163,7 +163,7 @@ export default {
.label {
color: $black;
font-weight: 500;
line-height: 1.625;
line-height: 1.625rem;
}
}
</style>

96
src/layouts/provider-preference/provider-preference.vue
View file

@ -3,7 +3,7 @@
ref="theForm"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="container-fluid fade-on-route-transition provider-preference">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
@ -40,30 +40,31 @@ ref="theForm"
@forwardClicked="forwardButtonAction" />
</div>
</div>
<recalModal
ref="recalModal"
cmsWidgetName="RecalModal"
class="recal-modal" />
<steeringModal
ref="StateSteeringModal"
cmsWidgetName="StateSteeringModal" />
<shopPreferenceModal
ref="ShopPreferenceDrawer"
cmsWidgetName="ShopPreferenceDrawer"
:showSteeringLink="showSteeringLink"
@openSteering="openStateSteeringModal" />
<tpaRecalModal
ref="TPARecalModal"
cmsWidgetName="TPARecalModal"
:ackError="ackError"
@buttonClick="navigateWithTPAAck" />
</div>
<!--TODO update-->
<contentGroupModal
ref="recalModal"
cmsWidgetName="RecalModal" />
<steeringModal
ref="StateSteeringModal"
cmsWidgetName="StateSteeringModal" />
<shopPreferenceModal
ref="ShopPreferenceDrawer"
cmsWidgetName="ShopPreferenceDrawer"
:showSteeringLink="showSteeringLink"
@openSteering="openStateSteeringModal" />
<tpaRecalModal
ref="TPARecalModal"
cmsWidgetName="TPARecalModal"
:ackError="ackError"
@buttonClick="navigateWithTPAAck" />
</Form>
</template>
<script>
// Import Supporting Files
import {
fetchCmsContentForPage,
setupModalLink,
setupModalLinks
} from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
@ -77,12 +78,12 @@ import { Form } from 'vee-validate';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
import steeringModal from '@/layouts/provider-preference/steering-modal/steering-modal.vue';
import shopPreferenceModal from '@/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue';
import tpaRecalModal from '@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue';
import globalRules from '@/constants/global-rules';
import bailoutMessage from '@/constants/bailoutMessage';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
@ -96,10 +97,10 @@ export default {
// eslint-disable-next-line vue/no-reserved-component-names
Form,
buttonQuestion,
recalModal,
steeringModal,
shopPreferenceModal,
tpaRecalModal
tpaRecalModal,
contentGroupModal
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -169,6 +170,13 @@ export default {
return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
}
},
watch: {
prefAnswers(newValue, oldValue) {
if (newValue !== oldValue) {
setupModalLink(this, 'recalModal'); // TODO update
}
}
},
mounted() {
setupModalLinks(this);
const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
@ -180,6 +188,9 @@ export default {
: false;
},
methods: {
openModalAction(modalName) {
this.$refs[modalName.args].openModal();
},
getHeaderTextFromCms(cmsWidgetName) {
const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText');
return headerText?.replace(
@ -250,35 +261,24 @@ export default {
};
</script>
<style lang="scss" scoped>
#sub-header span {
color: $black;
}
.question-text {
margin-top: 0;
margin-bottom: 0.5rem;
& > span {
text-align: left;
.provider-preference {
#sub-header span {
color: $black;
}
}
:deep(.safeliteLogo) {
background-image: url(~@/assets/img/icons/logo.svg);
background-repeat: no-repeat;
background-size: 4.5rem;
margin: 0 0.25rem 0 0.25rem;
padding: 0 2.5rem 0 2.5rem;
background-position: center;
}
:deep(.recal-modal) {
p {
font-size: 1rem;
line-height: 1.625rem;
&.modal-body {
padding: 0;
.question-text {
margin-top: 0;
margin-bottom: 0.5rem;
& > span {
text-align: left;
}
}
:deep(.safeliteLogo) {
background-image: url(~@/assets/img/icons/logo.svg);
background-repeat: no-repeat;
background-size: 4.5rem;
margin: 0 0.25rem 0 0.25rem;
padding: 0 2.5rem 0 2.5rem;
background-position: center;
}
}
</style>

6
src/router/index.js
View file

@ -57,7 +57,7 @@ const routes = [
// If the saved session has timed out, clear the session, execute 404 logic.
if (getISSCookie() !== null && !isSavedSessionStillActive()) {
// await baseMixin.methods.dispatchStoreAction(storeActions.RESET_STATE);
await GoToStartOn404(next);
await GoToStartOn404(next); // TODO maybe here
}
// Process ISS cookie.
@ -73,7 +73,7 @@ const routes = [
}
if (!arePagePrerequisitesValid(component)) {
await GoToStartOn404(next);
await GoToStartOn404(next); // TODO maybe here
}
return next({ name: issPageToUse, query: to.query, params: to.params });
@ -113,7 +113,7 @@ const routes = [
});
} catch (error) {
window.console.warn(error);
await GoToStartOn404(next);
await GoToStartOn404(next); // TODO maybe here
}
return null;
}

2
src/styles/common-typography-styles.scss
View file

@ -2,7 +2,7 @@
p,
body {
font-size: 1rem;
line-height: 1.625;
line-height: 1.625rem;
font-weight: 400;
}