From 2bd5e996b8882c896c451443e5ce5fbc0ef48f6d Mon Sep 17 00:00:00 2001 From: Scott Regenthal Date: Mon, 6 Jan 2025 15:17:54 -0700 Subject: [PATCH] [DBEX] add mental health intro & events content --- .../all-claims/content/form0781.jsx | 117 ++++++++++++++++++ .../content/mentalHealthSupport.jsx | 21 +++- .../content/traumaticEventTypes.jsx | 5 +- .../content/traumaticEventsIntro.jsx | 42 ++++++- .../pages/form0781/mentalHealthSupport.js | 12 +- .../pages/form0781/traumaticEventTypes.js | 19 ++- .../pages/form0781/traumaticEventsIntro.js | 26 +++- .../form0781/mentalHealthSupport.unit.spec.js | 45 ++++++- .../form0781/traumaticEventTypes.unit.spec.js | 32 +++++ .../traumaticEventsIntro.unit.spec.js | 59 ++++++++- .../all-claims/utils/index.jsx | 11 ++ 11 files changed, 366 insertions(+), 23 deletions(-) diff --git a/src/applications/disability-benefits/all-claims/content/form0781.jsx b/src/applications/disability-benefits/all-claims/content/form0781.jsx index 744b4620f473..630447aaf976 100644 --- a/src/applications/disability-benefits/all-claims/content/form0781.jsx +++ b/src/applications/disability-benefits/all-claims/content/form0781.jsx @@ -1,5 +1,7 @@ import React from 'react'; +import { formTitleTag, formTitle } from '../utils'; +export const form0781HeadingTag = 'VA FORM 21-0781'; export const additionalFormsTitle = 'Additional Forms'; export const form0781WorkflowChoices = { @@ -73,3 +75,118 @@ export const traumaticEventsExamples = ( ); + +export const mentalHealthSupportResources = ( + <> + + Veterans Crisis Line responders are available 24 hours a day. You can + connect with a responder in any of these ways: + + + You can also get support in any of these ways: + + + If your claim is related to MST (military sexual trauma), you can also get + support in these ways: + + + +); + +export const mentalHealthSupportAlert = () => { + return ( + +

+ We understand that some of the questions may be difficult to answer. If + you need to take a break and come back to your application, your + information will be saved. +

+
+

+ If you’re a Veteran in crisis or concerned about one, connect with our + caring, qualified Veterans Crisis Line responders for confidential help. + Many of them are Veterans themselves. This service is private, free, and + available 24/7. +

+
+ {mentalHealthSupportResources} + + ); +}; + +/** + * Create a title and headingTag for a page which will be passed into ui:title so that + * they are grouped in the same legend + * @param {string} title - the title for the page, which displays below the stepper + * @param {string} headingTag - the headingTag for the page, which displays above the title + * @returns {JSX.Element} markup with title and headingTag. example below. + * + *

VA FORM 21-0781

+ *

Mental health support

+ */ +export function titleWithTag(title, headingTag) { + return ( + <> + {formTitleTag(headingTag)} + {formTitle(title)} + + ); +} diff --git a/src/applications/disability-benefits/all-claims/content/mentalHealthSupport.jsx b/src/applications/disability-benefits/all-claims/content/mentalHealthSupport.jsx index d9dd9e3c9d06..6823179b9222 100644 --- a/src/applications/disability-benefits/all-claims/content/mentalHealthSupport.jsx +++ b/src/applications/disability-benefits/all-claims/content/mentalHealthSupport.jsx @@ -1,4 +1,21 @@ -// TODO: additional content will be added in ticket #97079 +import React from 'react'; +import { mentalHealthSupportResources } from './form0781'; -/* ---------- content ----------*/ export const mentalHealthSupportPageTitle = 'Mental health support'; + +export const mentalHealthSupportDescription = () => { + return ( + <> +

+ On the next screen, we’ll ask you about your mental health conditions. +
+
+ First, we want you to know that you can get support for your mental + health any time, day or night. +

+

Resources that may be helpful

+
+ {mentalHealthSupportResources} + + ); +}; diff --git a/src/applications/disability-benefits/all-claims/content/traumaticEventTypes.jsx b/src/applications/disability-benefits/all-claims/content/traumaticEventTypes.jsx index bcbce47ab551..a54612ea7bc5 100644 --- a/src/applications/disability-benefits/all-claims/content/traumaticEventTypes.jsx +++ b/src/applications/disability-benefits/all-claims/content/traumaticEventTypes.jsx @@ -1,7 +1,6 @@ -// TODO: additional content will be added in ticket #97079 - -/* ---------- content ----------*/ export const eventTypesPageTitle = 'Types of traumatic events'; +export const eventTypesDescription = + 'We may send your claim to a specific type of claim processor who specializes in reviewing claims related to the traumatic events you went through.'; export const eventTypesQuestion = 'Which of these did you experience during your military service? Select all that you experienced.'; export const eventTypesHint = diff --git a/src/applications/disability-benefits/all-claims/content/traumaticEventsIntro.jsx b/src/applications/disability-benefits/all-claims/content/traumaticEventsIntro.jsx index d54933b0073a..772fa5c182dc 100644 --- a/src/applications/disability-benefits/all-claims/content/traumaticEventsIntro.jsx +++ b/src/applications/disability-benefits/all-claims/content/traumaticEventsIntro.jsx @@ -1,4 +1,42 @@ -// TODO: additional content will be added in ticket #97079 +import React from 'react'; -/* ---------- content ----------*/ export const eventsPageTitle = 'Traumatic events'; + +export const eventsIntroDescription = () => { + return ( + <> +

+ We want to know about any traumatic events during your military service. +
+
+ Any information you provide will help us understand your situation and + identify evidence to support your claim. All the questions are optional. + You can provide only details that you’re comfortable sharing. +

+

Information we’ll ask you for

+

+ We’ll ask you for this information: +

+

+

You can take a break at any time

+

+ We understand that some of the questions may be difficult to answer. You + can take a break at any time and come back to continue your application + later. We’ll save the information you’ve entered so far. +

+ + ); +}; diff --git a/src/applications/disability-benefits/all-claims/pages/form0781/mentalHealthSupport.js b/src/applications/disability-benefits/all-claims/pages/form0781/mentalHealthSupport.js index f1a708230f8a..98a87ae9574f 100644 --- a/src/applications/disability-benefits/all-claims/pages/form0781/mentalHealthSupport.js +++ b/src/applications/disability-benefits/all-claims/pages/form0781/mentalHealthSupport.js @@ -1,10 +1,12 @@ -// TODO: this is a placeholder; structure will be added in ticket #97079 -import { mentalHealthSupportPageTitle } from '../../content/mentalHealthSupport'; - -import { formTitle } from '../../utils'; +import { + mentalHealthSupportPageTitle, + mentalHealthSupportDescription, +} from '../../content/mentalHealthSupport'; +import { titleWithTag, form0781HeadingTag } from '../../content/form0781'; export const uiSchema = { - 'ui:title': formTitle(mentalHealthSupportPageTitle), + 'ui:title': titleWithTag(mentalHealthSupportPageTitle, form0781HeadingTag), + 'ui:description': mentalHealthSupportDescription, }; export const schema = { diff --git a/src/applications/disability-benefits/all-claims/pages/form0781/traumaticEventTypes.js b/src/applications/disability-benefits/all-claims/pages/form0781/traumaticEventTypes.js index 87b204e0af9b..776438f0b273 100644 --- a/src/applications/disability-benefits/all-claims/pages/form0781/traumaticEventTypes.js +++ b/src/applications/disability-benefits/all-claims/pages/form0781/traumaticEventTypes.js @@ -4,15 +4,21 @@ import { } from 'platform/forms-system/src/js/web-component-patterns'; import { eventTypesPageTitle, + eventTypesDescription, eventTypesQuestion, eventTypesHint, } from '../../content/traumaticEventTypes'; -import { formTitle } from '../../utils'; +import { + titleWithTag, + form0781HeadingTag, + traumaticEventsExamples, + mentalHealthSupportAlert, +} from '../../content/form0781'; import { TRAUMATIC_EVENT_TYPES } from '../../constants'; -import { traumaticEventsExamples } from '../../content/form0781'; export const uiSchema = { - 'ui:title': formTitle(eventTypesPageTitle), + 'ui:title': titleWithTag(eventTypesPageTitle, form0781HeadingTag), + 'ui:description': eventTypesDescription, mentalHealth: { eventTypes: checkboxGroupUI({ title: eventTypesQuestion, @@ -24,6 +30,9 @@ export const uiSchema = { 'view:traumaticEventsInfo': { 'ui:description': traumaticEventsExamples, }, + 'view:mentalHealthSupportAlert': { + 'ui:description': mentalHealthSupportAlert, + }, }; export const schema = { @@ -39,5 +48,9 @@ export const schema = { type: 'object', properties: {}, }, + 'view:mentalHealthSupportAlert': { + type: 'object', + properties: {}, + }, }, }; diff --git a/src/applications/disability-benefits/all-claims/pages/form0781/traumaticEventsIntro.js b/src/applications/disability-benefits/all-claims/pages/form0781/traumaticEventsIntro.js index 0080b765186f..5cb7509f3c97 100644 --- a/src/applications/disability-benefits/all-claims/pages/form0781/traumaticEventsIntro.js +++ b/src/applications/disability-benefits/all-claims/pages/form0781/traumaticEventsIntro.js @@ -1,13 +1,27 @@ -// TODO: this is a placeholder; structure will be added in ticket #97079 -import { eventsPageTitle } from '../../content/traumaticEventsIntro'; - -import { formTitle } from '../../utils'; +import { + eventsPageTitle, + eventsIntroDescription, +} from '../../content/traumaticEventsIntro'; +import { + titleWithTag, + form0781HeadingTag, + mentalHealthSupportAlert, +} from '../../content/form0781'; export const uiSchema = { - 'ui:title': formTitle(eventsPageTitle), + 'ui:title': titleWithTag(eventsPageTitle, form0781HeadingTag), + 'ui:description': eventsIntroDescription, + 'view:mentalHealthSupportAlert': { + 'ui:description': mentalHealthSupportAlert, + }, }; export const schema = { type: 'object', - properties: {}, + properties: { + 'view:mentalHealthSupportAlert': { + type: 'object', + properties: {}, + }, + }, }; diff --git a/src/applications/disability-benefits/all-claims/tests/pages/form0781/mentalHealthSupport.unit.spec.js b/src/applications/disability-benefits/all-claims/tests/pages/form0781/mentalHealthSupport.unit.spec.js index 5e068605636c..2cc506046934 100644 --- a/src/applications/disability-benefits/all-claims/tests/pages/form0781/mentalHealthSupport.unit.spec.js +++ b/src/applications/disability-benefits/all-claims/tests/pages/form0781/mentalHealthSupport.unit.spec.js @@ -1,7 +1,14 @@ +import React from 'react'; +import { render } from '@testing-library/react'; import { expect } from 'chai'; import * as mentalHealthSupport from '../../../pages/form0781/mentalHealthSupport'; +import { + mentalHealthSupportPageTitle, + mentalHealthSupportDescription, +} from '../../../content/mentalHealthSupport'; +import { titleWithTag, form0781HeadingTag } from '../../../content/form0781'; -describe('Mental health support', () => { +describe('Mental health support page', () => { it('should define a uiSchema object', () => { expect(mentalHealthSupport.uiSchema).to.be.an('object'); }); @@ -9,4 +16,40 @@ describe('Mental health support', () => { it('should define a schema object', () => { expect(mentalHealthSupport.schema).to.be.an('object'); }); + + it('should have the correct title in uiSchema', () => { + const { container: uiTitleContainer } = render( +
{mentalHealthSupport.uiSchema['ui:title']}
, + ); + const renderedUITitleText = uiTitleContainer.textContent.trim(); + + const { container: titleWithTagContainer } = render( +
+ {titleWithTag(mentalHealthSupportPageTitle, form0781HeadingTag)} +
, + ); + const expectedTitleText = titleWithTagContainer.textContent.trim(); + + expect(renderedUITitleText).to.equal(expectedTitleText); + }); + + it('should have the correct description in uiSchema', () => { + expect(mentalHealthSupport.uiSchema['ui:description']).to.equal( + mentalHealthSupportDescription, + ); + }); + + it('should have correct schema structure', () => { + expect(mentalHealthSupport.schema) + .to.have.property('type') + .that.equals('object'); + expect(mentalHealthSupport.schema) + .to.have.property('properties') + .that.is.an('object'); + }); + + it('should not have additional properties in schema', () => { + const properties = Object.keys(mentalHealthSupport.schema.properties); + expect(properties).to.have.lengthOf(0); + }); }); diff --git a/src/applications/disability-benefits/all-claims/tests/pages/form0781/traumaticEventTypes.unit.spec.js b/src/applications/disability-benefits/all-claims/tests/pages/form0781/traumaticEventTypes.unit.spec.js index fbef9cd48c60..3898d0a97589 100644 --- a/src/applications/disability-benefits/all-claims/tests/pages/form0781/traumaticEventTypes.unit.spec.js +++ b/src/applications/disability-benefits/all-claims/tests/pages/form0781/traumaticEventTypes.unit.spec.js @@ -13,9 +13,15 @@ import formConfig from '../../../config/form'; import * as eventType from '../../../pages/form0781/traumaticEventTypes'; import { eventTypesPageTitle, + eventTypesDescription, eventTypesQuestion, } from '../../../content/traumaticEventTypes'; import { TRAUMATIC_EVENT_TYPES } from '../../../constants'; +import { + titleWithTag, + form0781HeadingTag, + mentalHealthSupportAlert, +} from '../../../content/form0781'; describe('Traumatic event types', () => { const { @@ -31,6 +37,32 @@ describe('Traumatic event types', () => { expect(eventType.schema).to.be.an('object'); }); + it('should have the correct title in uiSchema', () => { + const { container: uiTitleContainer } = render( +
{eventType.uiSchema['ui:title']}
, + ); + const renderedUITitleText = uiTitleContainer.textContent.trim(); + + const { container: titleWithTagContainer } = render( +
{titleWithTag(eventTypesPageTitle, form0781HeadingTag)}
, + ); + const expectedTitleText = titleWithTagContainer.textContent.trim(); + + expect(renderedUITitleText).to.equal(expectedTitleText); + }); + + it('should have the correct description in uiSchema', () => { + expect(eventType.uiSchema['ui:description']).to.equal( + eventTypesDescription, + ); + }); + + it('should render the mental health support alert description in uiSchema', () => { + expect( + eventType.uiSchema['view:mentalHealthSupportAlert']['ui:description'], + ).to.equal(mentalHealthSupportAlert); + }); + it('should render with all checkboxes', () => { const { container, getByText } = render( , diff --git a/src/applications/disability-benefits/all-claims/tests/pages/form0781/traumaticEventsIntro.unit.spec.js b/src/applications/disability-benefits/all-claims/tests/pages/form0781/traumaticEventsIntro.unit.spec.js index df2ef6baa319..6555fa5d7ddf 100644 --- a/src/applications/disability-benefits/all-claims/tests/pages/form0781/traumaticEventsIntro.unit.spec.js +++ b/src/applications/disability-benefits/all-claims/tests/pages/form0781/traumaticEventsIntro.unit.spec.js @@ -1,7 +1,18 @@ +import React from 'react'; +import { render } from '@testing-library/react'; import { expect } from 'chai'; import * as traumaticEvents from '../../../pages/form0781/traumaticEventsIntro'; +import { + eventsPageTitle, + eventsIntroDescription, +} from '../../../content/traumaticEventsIntro'; +import { + titleWithTag, + form0781HeadingTag, + mentalHealthSupportAlert, +} from '../../../content/form0781'; -describe('Traumatic events', () => { +describe('Traumatic events intro page', () => { it('should define a uiSchema object', () => { expect(traumaticEvents.uiSchema).to.be.an('object'); }); @@ -9,4 +20,50 @@ describe('Traumatic events', () => { it('should define a schema object', () => { expect(traumaticEvents.schema).to.be.an('object'); }); + + it('should have the correct title in uiSchema', () => { + const { container: uiTitleContainer } = render( +
{traumaticEvents.uiSchema['ui:title']}
, + ); + const renderedUITitleText = uiTitleContainer.textContent.trim(); + + const { container: titleWithTagContainer } = render( +
{titleWithTag(eventsPageTitle, form0781HeadingTag)}
, + ); + const expectedTitleText = titleWithTagContainer.textContent.trim(); + + expect(renderedUITitleText).to.equal(expectedTitleText); + }); + + it('should have the correct description in uiSchema', () => { + expect(traumaticEvents.uiSchema['ui:description']).to.equal( + eventsIntroDescription, + ); + }); + + it('should render the mental health support alert description in uiSchema', () => { + expect( + traumaticEvents.uiSchema['view:mentalHealthSupportAlert'][ + 'ui:description' + ], + ).to.equal(mentalHealthSupportAlert); + }); + + it('should have correct schema structure', () => { + expect(traumaticEvents.schema) + .to.have.property('type') + .that.equals('object'); + expect(traumaticEvents.schema) + .to.have.property('properties') + .that.is.an('object'); + expect(Object.keys(traumaticEvents.schema.properties)).to.have.lengthOf(1); + expect(traumaticEvents.schema.properties).to.have.property( + 'view:mentalHealthSupportAlert', + ); + }); + + it('should not have additional properties in schema', () => { + const properties = Object.keys(traumaticEvents.schema.properties); + expect(properties).to.have.lengthOf(1); + }); }); diff --git a/src/applications/disability-benefits/all-claims/utils/index.jsx b/src/applications/disability-benefits/all-claims/utils/index.jsx index 52b03243573c..93204dba2903 100644 --- a/src/applications/disability-benefits/all-claims/utils/index.jsx +++ b/src/applications/disability-benefits/all-claims/utils/index.jsx @@ -742,6 +742,17 @@ export const truncateDescriptions = data => {}, ); +/** + * Creates consistent form title tag + * @param {string} titleTag + * @returns {string} markup with h3 tag and consistent styling + */ +export const formTitleTag = titleTag => ( +

+ {`${titleTag} `} +

+); + /** * Creates consistent form title * @param {string} title