From 53895390af7d467c0379baabe4168e0993319a45 Mon Sep 17 00:00:00 2001 From: Robert Hasselle Date: Tue, 14 Jan 2025 13:31:07 -0600 Subject: [PATCH] 0966 followup changes for confirmation page --- .../21-0966/containers/ConfirmationPage.jsx | 241 +++++++++++++++--- .../containers/ConfirmationPage.unit.spec.jsx | 68 ++++- 2 files changed, 263 insertions(+), 46 deletions(-) diff --git a/src/applications/simple-forms/21-0966/containers/ConfirmationPage.jsx b/src/applications/simple-forms/21-0966/containers/ConfirmationPage.jsx index 1889373e7dba..3c7dfa1dfd28 100644 --- a/src/applications/simple-forms/21-0966/containers/ConfirmationPage.jsx +++ b/src/applications/simple-forms/21-0966/containers/ConfirmationPage.jsx @@ -28,6 +28,9 @@ import { } from '../definitions/constants'; import { useNewConfirmationPage } from '../config/features'; +const { COMPENSATION, PENSION } = veteranBenefits; +const { SURVIVOR } = survivingDependentBenefits; + const NextSteps = ({ formData }) => (

What are my next steps?

@@ -37,13 +40,15 @@ const NextSteps = ({ formData }) => (

{confirmationPageNextStepsParagraph(formData)}

) : ( -

- You should complete and file your claims as soon as possible. If you - complete and file your claim before the intent to file expires and we - approve your claim, you may be able to get retroactive payments. - Retroactive payments are payments for the time between when we processed - your intent to file and when we approved your claim. -

+ <> +

You should complete and file your claims as soon as possible.

+

+ If you complete and file your claim before the intent to file expires + and we approve your claim, you may be able to get retroactive + payments. Retroactive payments are payments for the time between when + we processed your intent to file and when we approved your claim. +

+ )}
); @@ -51,7 +56,7 @@ const NextSteps = ({ formData }) => ( const ActionLinksToCompleteClaims = ({ formData }) => ( <> {(hasActiveCompensationITF({ formData }) || - formData.benefitSelection[veteranBenefits.COMPENSATION]) && ( + formData.benefitSelection[COMPENSATION]) && (
(
)} {(hasActivePensionITF({ formData }) || - formData.benefitSelection[veteranBenefits.PENSION]) && ( + formData.benefitSelection[PENSION]) && (
( />
)} - {formData.benefitSelection[survivingDependentBenefits.SURVIVOR] && ( + {formData.benefitSelection[SURVIVOR] && (
( ); +const CompensationAction = () => ( +
+ +
+); + +const PensionAction = () => ( +
+ +
+); + +const SurvivorAction = () => ( +
+ +
+); + +const PensionExistingAction = ({ formData }) => ( +
+

+ Our records show that you already have an intent to file for pension + claims. Your intent to file for pension claims expires on{' '} + {format( + new Date(formData['view:activePensionITF'].expirationDate), + 'MMMM d, yyyy', + )} + . +

+ +
+); + +const CompensationExistingAction = ({ formData }) => ( +
+

+ Our records show that you already have an intent to file for disability + compensation. Your intent to file for disability compensation expires on{' '} + {format( + new Date(formData['view:activeCompensationITF'].expirationDate), + 'MMMM d, yyyy', + )} + . +

+ +
+); + +const newActionMap = { + [COMPENSATION]: CompensationAction, + [PENSION]: PensionAction, + [SURVIVOR]: SurvivorAction, +}; + +const existingActionMap = { + [COMPENSATION]: CompensationExistingAction, + [PENSION]: PensionExistingAction, +}; + +/** + * Returns a data only object of string constants like this: + * { + * actionsNew: ["compensation", "pension"], + * actionsExisting: ["compensation", "pension"] + * } + * + * This makes it easier to test the logic in isolation without rendering + */ +export const getNextStepsActionsPlaceholders = formData => { + const actionsExisting = []; + const actionsNew = []; + + const isCompensationApplicable = + hasActiveCompensationITF({ formData }) || + formData.benefitSelection?.[COMPENSATION]; + + const isPensionApplicable = + hasActivePensionITF({ formData }) || formData.benefitSelection?.[PENSION]; + + const isSurvivorApplicable = formData.benefitSelection?.[SURVIVOR]; + const hasCompensationExisting = hasActiveCompensationITF({ formData }); + const hasPensionExisting = hasActivePensionITF({ formData }); + + if (hasCompensationExisting) { + actionsExisting.push(COMPENSATION); + } else if (isCompensationApplicable) { + actionsNew.push(COMPENSATION); + } + + if (hasPensionExisting) { + actionsExisting.push(PENSION); + } else if (isPensionApplicable) { + actionsNew.push(PENSION); + } + + if (isSurvivorApplicable) { + actionsNew.push(SURVIVOR); + } + + return { actionsNew, actionsExisting }; +}; + +const NextStepsV2Actions = ({ formData }) => { + let { actionsNew, actionsExisting } = getNextStepsActionsPlaceholders( + formData, + ); + + // convert arrays of strings to arrays of JSX + // e.g. ["compensation", "pension"] => [, ] + actionsNew = actionsNew.map(action => { + const Component = newActionMap[action]; + return ; + }); + actionsExisting = actionsExisting.map(action => { + const Component = existingActionMap[action]; + return ; + }); + + return ( +
+ {actionsNew} + {actionsExisting} +
+ ); +}; + +const NextStepsV2 = ({ formData }) => { + return ( +
+

What are my next steps?

+ {confirmationPageNextStepsParagraph(formData) ? ( + <> +

You should complete and file your claims as soon as possible.

+

{confirmationPageNextStepsParagraph(formData)}

+ + ) : ( + <> +

You should complete and file your claims as soon as possible.

+

+ You should complete and file your claims as soon as possible. If you + complete and file your claim before the intent to file expires and + we approve your claim, you may be able to get retroactive payments. + Retroactive payments are payments for the time between when we + processed your intent to file and when we approved your claim. +

+ + )} + +
+ ); +}; + const AlreadySubmittedHeader = ({ formData }) => ( <> {!confirmationPageFormBypassed(formData) && ( <> {hasActiveCompensationITF({ formData }) && - formData.benefitSelection[veteranBenefits.PENSION] && ( + formData.benefitSelection[PENSION] && (

You’ve already submitted an intent to file for disability @@ -108,7 +277,7 @@ const AlreadySubmittedHeader = ({ formData }) => (

)} {hasActivePensionITF({ formData }) && - formData.benefitSelection[veteranBenefits.COMPENSATION] && ( + formData.benefitSelection[COMPENSATION] && (

You’ve already submitted an intent to file for pension claims @@ -142,14 +311,12 @@ export const ConfirmationPage = props => { const currentFormData = { ...data, benefitSelection: { - [veteranBenefits.COMPENSATION]: - data.benefitSelection?.[veteranBenefits.COMPENSATION] || + [COMPENSATION]: + data.benefitSelection?.[COMPENSATION] || data.benefitSelectionCompensation, - [veteranBenefits.PENSION]: - data.benefitSelection?.[veteranBenefits.PENSION] || - data.benefitSelectionPension, - [survivingDependentBenefits.SURVIVOR]: - data.benefitSelection?.[survivingDependentBenefits.SURVIVOR], + [PENSION]: + data.benefitSelection?.[PENSION] || data.benefitSelectionPension, + [SURVIVOR]: data.benefitSelection?.[SURVIVOR], }, }; @@ -183,6 +350,7 @@ export const ConfirmationPage = props => { expirationDate: submissionResponse?.expirationDate, confirmationNumber, })} + actions={<>} /> {!confirmationPageFormBypassed(formData) && ( <> @@ -191,34 +359,23 @@ export const ConfirmationPage = props => { /> - After we review your form, we’ll confirm next steps. Then - you’ll have 1 year to file your claim. + you’ll have (1) year to file your claim.

- ) : ( - <> -

- After we process your request, we’ll confirm next steps. - If we don’t already have a form showing that you’re - authorized as a signer, we’ll contact the Veteran or - family member who intends to file the claim. -

-

- If we need information after reviewing your form, we’ll - contact you -

- - ) - } - /> + } + item1Actions={<>} + /> + )} )} - - - + diff --git a/src/applications/simple-forms/21-0966/tests/containers/ConfirmationPage.unit.spec.jsx b/src/applications/simple-forms/21-0966/tests/containers/ConfirmationPage.unit.spec.jsx index 6e4e7d8efd4d..34508fd843a9 100644 --- a/src/applications/simple-forms/21-0966/tests/containers/ConfirmationPage.unit.spec.jsx +++ b/src/applications/simple-forms/21-0966/tests/containers/ConfirmationPage.unit.spec.jsx @@ -7,7 +7,9 @@ import thunk from 'redux-thunk'; import { expect } from 'chai'; import formConfig from '../../config/form'; import * as features from '../../config/features'; -import ConfirmationPage from '../../containers/ConfirmationPage'; +import ConfirmationPage, { + getNextStepsActionsPlaceholders, +} from '../../containers/ConfirmationPage'; const veteranData = { benefitSelection: { @@ -167,7 +169,6 @@ describe('Confirmation page V2', () => { getByText(/Jack/); getByText(/Your form submission was successful on/); getByText(/You have until/); - getByText(/After we process your request/); expect( container.querySelector( 'va-link-action[text="Complete your pension claim"]', @@ -219,7 +220,6 @@ describe('Confirmation page V2', () => { getByText(/Alternate/); getByText(/Your form submission was successful on/); getByText(/You have until/); - getByText(/After we process your request/); expect( container.querySelector( 'va-link-action[text="Complete your pension for survivors claim"]', @@ -261,7 +261,6 @@ describe('Confirmation page V2', () => { getByText(/Jack/); getByText(/Your form submission was successful on/); getByText(/You have until/); - getByText(/After we process your request/); expect( container.querySelector( 'va-link-action[text="Complete your pension claim"]', @@ -294,6 +293,65 @@ describe('Confirmation page V2', () => { ), ).to.exist; }); + + it('should return correct getNextStepsActionsPlaceholders for a veteran with new benefits', () => { + const formData = { + benefitSelection: { + compensation: true, + pension: true, + // survivor: true, + }, + // 'view:activePensionITF': responseExisting.pensionIntent, + // 'view:activeCompensationITF': responseExisting.compensationIntent + }; + const placeholders = getNextStepsActionsPlaceholders(formData); + expect(placeholders.actionsNew).to.deep.equal(['compensation', 'pension']); + expect(placeholders.actionsExisting).to.deep.equal([]); + }); + + it('should return correct getNextStepsActionsPlaceholders for a veteran with mixed benefits', () => { + const formData = { + benefitSelection: { + pension: true, + // survivor: true, + }, + // 'view:activePensionITF': responseExisting.pensionIntent, + 'view:activeCompensationITF': responseExisting.compensationIntent, + }; + const placeholders = getNextStepsActionsPlaceholders(formData); + expect(placeholders.actionsNew).to.deep.equal(['pension']); + expect(placeholders.actionsExisting).to.deep.equal(['compensation']); + }); + + it('should return correct getNextStepsActionsPlaceholders for a veteran with existing benefits', () => { + const formData = { + benefitSelection: {}, + 'view:activePensionITF': responseExisting.pensionIntent, + 'view:activeCompensationITF': responseExisting.compensationIntent, + }; + const placeholders = getNextStepsActionsPlaceholders(formData); + expect(placeholders.actionsNew).to.deep.equal([]); + expect(placeholders.actionsExisting).to.deep.equal([ + 'compensation', + 'pension', + ]); + }); + + it('should return correct getNextStepsActionsPlaceholders for a survivor', () => { + const formData = { + benefitSelection: { + survivor: true, + }, + 'view:activePensionITF': responseExisting.pensionIntent, + 'view:activeCompensationITF': responseExisting.compensationIntent, + }; + const placeholders = getNextStepsActionsPlaceholders(formData); + expect(placeholders.actionsNew).to.deep.equal(['survivor']); + expect(placeholders.actionsExisting).to.deep.equal([ + 'compensation', + 'pension', + ]); + }); }); describe('Confirmation page V1', () => { @@ -379,4 +437,6 @@ describe('Confirmation page V1', () => { 'va-link-action[text="Complete your pension for survivors claim"]', ); }); + + // confirmation v1 tests end });