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

added tap recal modal

Browse source
This commit is contained in:
Jason Wheeler 2023-05-11 15:44:28 -04:00
parent 55efa1f27f
commit ad28412f87
10 changed files with 223 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/digital-components/modal/modal.vue
View file

@ -33,7 +33,7 @@
loaderColor="white"
:buttonText="footerButtonText"
@click-event="validateAndEmit"
:class="isFooterButtonDisabled && 'form-test-invalid'" />
:class="(isButtonDisabled || isFooterButtonDisabled) && 'form-test-invalid'" />
</div>
</div>
</div>
@ -57,6 +57,7 @@ export default {
onModalClosedCallback: {
type: Function,
},
isButtonDisabled: Boolean
},
setup(props) {
const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`;
@ -80,7 +81,7 @@ export default {
}
},
resetButtonStyle() {
this.$refs.modalButtonMain.resetButtonStyle();
this.$refs.modalButtonMain?.resetButtonStyle();
},
onModalOpened() {
this.onModalOpenedCallback?.();

1
src/layouts/provider-preference/provider-preference.spec.js
View file

@ -6,7 +6,6 @@ import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-h
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { useMainStore } from "@/store";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import { nextTick } from "vue";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({

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

@ -1,8 +1,5 @@
<template>
<Form @submit="onSubmit"
@invalid-submit="onInvalidSubmit"
ref="theForm"
>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
@ -35,10 +32,11 @@
@openSteering="openStateSteeringModal"
:showSteeringLink="showSteeringLink"/>
<tpaRecalModal cmsWidgetName="TPARecalModal"
ref="TPARecalModal"
@buttonClick="() => navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED)"
/>
</Form>
ref="TPARecalModal"
:ackError="ackError"
@buttonClick="navigateWithTPAAck"
/>
</Form>
</template>
<script>
@ -130,6 +128,9 @@ export default {
}
));
return modifiedAnswers;
},
ackError() {
return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
}
},
methods: {
@ -152,6 +153,10 @@ export default {
navigateForward(scenario){
this.$router.navigate(scenario, this.$route);
},
navigateWithTPAAck() {
this.mainStore.saveProviderPreferenceData({selectedProvider: this.selectedProvider, tpaAcknowledgement: this.tpaAcknowledgement});
this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
},
forwardButtonAction() {
if(this.selectedProvider) {
let scenario = null;
@ -165,6 +170,7 @@ export default {
if(this.mainStore.hasRecalibrationPart)
{
this.$refs["TPARecalModal"].openModal();
this.$refs["siteFooter"].removeLoader();
return;
}
scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;

3
src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.spec.js
View file

@ -4,9 +4,6 @@ import { shallowMount } from '@vue/test-utils';
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { useMainStore } from "@/store";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import { nextTick } from "vue";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({

2
src/layouts/provider-preference/steering-modal/steering-modal.spec.js
View file

@ -5,8 +5,6 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { useMainStore } from "@/store";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import { nextTick } from "vue";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({

58
src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js Normal file
View file

@ -0,0 +1,58 @@
import tpaRecalModal from "./tpa-recal-modal.vue"
import { shallowMount } from '@vue/test-utils';
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
setupModalLinks: jest.fn(),
}));
describe('tpa-Recal-Modal.vue', () => {
test('should show error if not acknowledged', () => {
const { wrapper } = setupMocks();
wrapper.vm.acknowledged = false;
wrapper.vm.footerButtonClick();
expect(wrapper.vm.showError).toBeTruthy();
})
test('should not show error if acknowledged', () => {
const { wrapper } = setupMocks();
wrapper.vm.acknowledged = true;
wrapper.vm.footerButtonClick();
expect(wrapper.vm.showError).toBeFalsy();
})
});
function setupMocks(){
const mountOptions = getMountOptions({
router: {
navigate: jest.fn(),
},
});
const wrapper = shallowMount(
tpaRecalModal,
mountOptions
);
const apiResponses = {};
settleAllPromises.mockImplementation(() => apiResponses);
fetchCmsContentForPage.mockImplementation (() => {});
return { wrapper };
}

74
src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
View file

@ -3,13 +3,17 @@
:ref="ModalName"
:modalId="ModalName"
:footerButtonText="ModalCloseButtonText"
@footer-button-event="footerButtonClick">
<h5 class="text-center mb-4">{{ModalHeadline}}</h5>
<div>
<div class="mb-4" v-html="ModalBodyText"></div>
<tpaRecalToggle cmsWidgetName="TPARecalModalToggle"/>
@footer-button-event="footerButtonClick"
:isButtonDisabled="isButtonDisabled">
<div class="form-test-invalid">
<h5 class="text-center mb-4">{{ModalHeadline}}</h5>
<div>
<checkBox
<div class="mb-4" v-html="ModalBodyText"></div>
<tpaRecalToggle class="mb-5" cmsWidgetName="TPARecalModalToggle"/>
<checkBox
class="mb-2"
:class="showError && ' has-error'"
validationRules="option-required"
checkboxName="tpaAcknowledgement"
buttonID="tpaAcknowledgement"
:tabIndex="0"
@ -19,6 +23,9 @@
ref="tpaAcknowledgement"
v-model="acknowledged"
/>
<div v-if="showError" class="row form-test-error mt-1">
<p>{{ackError}}</p>
</div>
</div>
</div>
</modal>
@ -33,10 +40,12 @@ export default {
name: "content-group-modal",
props: {
cmsWidgetName: String,
ackError: String,
},
data() {
return {
acknowledged: false,
showError: false
};
},
emits: ["buttonClick"],
@ -55,6 +64,9 @@ export default {
},
ModalCloseButtonText() {
return this.getCmsContent(this.cmsWidgetName, "FooterText");
},
isButtonDisabled() {
return !this.acknowledged
}
},
methods: {
@ -64,21 +76,29 @@ export default {
footerButtonClick() {
//check if acked, if not show error
this.$refs[this.ModalName].closeModal();
this.$emit("buttonClick");
if(this.acknowledged)
{
this.$refs[this.ModalName]?.closeModal();
this.$emit("buttonClick");
}
else
{
this.$refs[this.ModalName]?.resetButtonStyle();
this.showError = true;
}
},
},
watch: {
acknowledged(newValue){
//enable/disable footer based on value
//need to update modal to accept prop for this
console.log(newValue);
acknowledged(){
this.showError = false;
}
},
components: {
modal,
tpaRecalToggle,
checkBox
checkBox,
},
};
</script>
@ -99,10 +119,38 @@ export default {
&:last-child {
margin-bottom: 0;
}
margin-bottom: .5rem;
}
}
}
}
}
}
.form-check {
.form-check-input {
&:checked {
+ label {
p {
font-weight: 400 !important;
font-size: 1rem !important;
color: $gray-600 !important;
line-height: 1.5rem;
}
}
}
}
p {
font-weight: 400 !important;
font-size: 1rem !important;
color: $gray-600 !important;
line-height: 1.5rem;
}
}
.form-test-error {
p {
font-weight: 500;
}
}
</style>

85
src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js Normal file
View file

@ -0,0 +1,85 @@
/* eslint-env jest */
import { render } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import { issPageValues } from '@/router/router-constants/issPage-values';
import { queryStrings } from '@/constants/query-strings';
import { GaActions } from "@/constants/analytics";
import tpaRecalToggle from './tpa-recal-toggle.vue';
const mockText = Object.freeze({
HEADER: 'Mock Header',
BODY: 'Mock Body',
});
const mockRoute = {
query: {
issPage: issPageValues.PROVIDER_PREFERENCE,
},
};
const mockRouter = {
navigate: jest.fn(),
};
const mountOptions = {
global: {
propsData: {
cmsWidgetName: "MockWidgetName",
},
mixins: [
{
methods: {
getCmsContent: jest.fn((cmsWidgetName, fieldName) => {
if (cmsWidgetName === 'MockWidgetName') {
if (fieldName === 'HeaderText') {
return mockText.HEADER;
}
if (fieldName === 'BodyText') {
return mockText.BODY;
}
}
return '';
}),
pushEventToGA: jest.fn()
},
computed: {
GaActions() {
return GaActions;
},
queryStrings() {
return queryStrings;
},
}
},
],
mocks: {
$route: mockRoute,
$router: mockRouter,
},
},
};
describe('more details section', () => {
test('should NOT be displayed on the screen as a default.', () => {
const { container } = render(tpaRecalToggle, mountOptions);
const moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
expect(moreDetailsSection).not.toBeVisible();
});
test('should toggle when arrow clicked', async () => {
const user = userEvent.setup();
const { container } = render(tpaRecalToggle, mountOptions);
const toggleLink = container.querySelector('#moreDetails');;
await user.click(toggleLink);
let moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
expect(moreDetailsSection).toBeVisible();
await user.click(toggleLink);
moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper');
expect(moreDetailsSection).not.toBeVisible();
});
});

1
src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
View file

@ -9,6 +9,7 @@
linkType="text"
href="#!"
:text="textForToggle"
id="moreDetails"
/>
</div>
<Transition>

2
src/ux-components/checkbox/checkbox.vue
View file

@ -13,7 +13,7 @@
:ref="checkboxName"
/>
<label class="d-flex align-items-start" :for="buttonID">
<p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
<p v-if="checkboxLabel" class="m-0" v-html="checkboxLabel"></p>
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
</label>
</div>