From 4eaca8e87c213fb526b72ef3e3de549134726948 Mon Sep 17 00:00:00 2001 From: Midge-dev Date: Wed, 11 Sep 2024 14:14:50 -0700 Subject: [PATCH 01/15] Init --- .../686c-674-v2/components/ArrayViewField.jsx | 17 ++ .../additionalQuestionsView.js | 8 +- .../veteranAdditionalQuestionsView.js | 8 +- .../dependentAdditionalInformation.js | 76 +++++---- ...dependentAdditionalInformationPartThree.js | 61 +++++++ .../dependentAdditionalInformationPartTwo.js | 34 ++++ .../dependentAdditionalInformationView.js | 22 +++ .../helpers.js | 59 +++++++ .../dependentInformation.js | 158 ++++-------------- .../chapters/report-dependent-death/index.js | 11 +- .../686c-674-v2/config/form.js | 35 +++- .../686c-674-v2/config/helpers.js | 4 + 12 files changed, 329 insertions(+), 164 deletions(-) create mode 100644 src/applications/disability-benefits/686c-674-v2/components/ArrayViewField.jsx create mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartThree.js create mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartTwo.js create mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationView.js diff --git a/src/applications/disability-benefits/686c-674-v2/components/ArrayViewField.jsx b/src/applications/disability-benefits/686c-674-v2/components/ArrayViewField.jsx new file mode 100644 index 000000000000..045fae62520f --- /dev/null +++ b/src/applications/disability-benefits/686c-674-v2/components/ArrayViewField.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { capitalize } from 'lodash'; + +export default function SpouseViewField({ formData }) { + const { first, middle, last, suffix } = formData.fullName; + + return ( +
+

+ {capitalize(first)} {capitalize(middle && `${middle} `)} + {capitalize(last)} + {capitalize(suffix && `, ${suffix}`)} +

+
+
+ ); +} diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-add-a-spouse/current-spouse-marriage-history-details/additionalQuestionsView.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-add-a-spouse/current-spouse-marriage-history-details/additionalQuestionsView.js index bc29eb117c31..c4a5ceaa6ef1 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-add-a-spouse/current-spouse-marriage-history-details/additionalQuestionsView.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-add-a-spouse/current-spouse-marriage-history-details/additionalQuestionsView.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { generateTransition } from '../../../helpers'; export const schema = { type: 'object', @@ -12,10 +12,8 @@ export const schema = { export const uiSchema = { 'view:additionalQuestionsMessage': { - 'ui:description': ( -

- Now we’ll ask you about each of your spouse’s former marriages. -

+ 'ui:description': generateTransition( + 'Now we’ll ask you about each of your spouse’s former marriages.', ), 'ui:options': { hideOnReview: true, diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-add-a-spouse/veteran-marriage-history-details/veteranAdditionalQuestionsView.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-add-a-spouse/veteran-marriage-history-details/veteranAdditionalQuestionsView.js index ca38f7504335..d939f03d23c2 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-add-a-spouse/veteran-marriage-history-details/veteranAdditionalQuestionsView.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-add-a-spouse/veteran-marriage-history-details/veteranAdditionalQuestionsView.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { generateTransition } from '../../../helpers'; export const schema = { type: 'object', @@ -12,10 +12,8 @@ export const schema = { export const uiSchema = { 'view:additionalQuestionsMessage': { - 'ui:description': ( -

- Now we’ll ask you about each of your former marriages. -

+ 'ui:description': generateTransition( + 'Now we’ll ask you about each of your former marriages.', ), 'ui:options': { hideOnReview: true, diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformation.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformation.js index cd41db73e741..a85cd542baf1 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformation.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformation.js @@ -1,42 +1,56 @@ -import currentOrPastDateUI from 'platform/forms-system/src/js/definitions/currentOrPastDate'; -import environment from 'platform/utilities/environment'; -import { TASK_KEYS } from '../../../constants'; import { - isChapterFieldRequired, - PensionIncomeRemovalQuestionTitle, -} from '../../../helpers'; -import { deceasedDependents } from '../../../utilities'; -import DependentViewField from '../../../../components/DependentViewField'; -import { DependentNameHeader } from './helpers'; -import { locationUISchema } from '../../../location-schema'; + radioUI, + radioSchema, + checkboxGroupUI, + checkboxGroupSchema, +} from 'platform/forms-system/src/js/web-component-patterns'; +import { + childTypeEnums, + childTypeLabels, + DependentRelationshipH3, + relationshipEnums, + relationshipLabels, +} from './helpers'; -export const schema = - deceasedDependents.properties.dependentAdditionalInformation; +export const schema = { + type: 'object', + properties: { + deaths: { + type: 'array', + minItems: 1, + maxItems: 100, + items: { + type: 'object', + properties: { + dependentType: radioSchema(relationshipEnums), + childStatus: checkboxGroupSchema(childTypeEnums), + }, + }, + }, + }, +}; export const uiSchema = { deaths: { - 'ui:options': { viewField: DependentViewField }, items: { - 'ui:title': DependentNameHeader, - date: { - ...currentOrPastDateUI('Date of death'), - 'ui:required': formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - }, - location: locationUISchema( - 'deaths', - 'location', - true, - 'Place of death', - 'reportDeath', - ), - dependentIncome: { + 'ui:title': DependentRelationshipH3, + dependentType: radioUI({ + title: 'What was your relationship to the dependent?', + required: () => true, + labels: relationshipLabels, + }), + childStatus: { + ...checkboxGroupUI({ + title: 'What type of child?', + required: formData => formData?.dependentType === 'child', + labels: childTypeLabels, + }), + 'ui:required': (formData, index) => + formData?.deaths[index]?.dependentType === 'child', 'ui:options': { - hideIf: () => environment.isProduction(), - hideEmptyValueInReview: true, + expandUnder: 'dependentType', + expandUnderCondition: 'child', }, - 'ui:title': PensionIncomeRemovalQuestionTitle, - 'ui:widget': 'yesNo', }, }, }, diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartThree.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartThree.js new file mode 100644 index 000000000000..e16d9e62bd34 --- /dev/null +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartThree.js @@ -0,0 +1,61 @@ +import VaTextInputField from 'platform/forms-system/src/js/web-component-fields/VaTextInputField'; +import VaSelectField from 'platform/forms-system/src/js/web-component-fields/VaSelectField'; +import VaCheckboxField from 'platform/forms-system/src/js/web-component-fields/VaCheckboxField'; +import { customLocationSchema } from '../../../helpers'; +import { DependentDeceasedWhereH3 } from './helpers'; + +export const schema = { + type: 'object', + properties: { + deaths: { + type: 'array', + minItems: 1, + maxItems: 100, + items: { + type: 'object', + properties: { + dependentDeathLocation: customLocationSchema, + }, + }, + }, + }, +}; + +export const uiSchema = { + deaths: { + items: { + 'ui:title': DependentDeceasedWhereH3, + dependentDeathLocation: { + outsideUsa: { + 'ui:title': 'This occurred outside the U.S.', + 'ui:webComponentField': VaCheckboxField, + }, + location: { + city: { + 'ui:title': 'City', + 'ui:required': () => true, + 'ui:autocomplete': 'address-level2', + 'ui:errorMessages': { + required: 'Enter the city where you were married', + }, + 'ui:webComponentField': VaTextInputField, + }, + + state: { + 'ui:title': 'State', + 'ui:webComponentField': VaSelectField, + 'ui:required': (formData, index) => + !formData?.deaths[index]?.dependentDeathLocation?.outsideUsa, + 'ui:errorMessages': { + required: 'Select a state', + }, + 'ui:options': { + hideIf: (formData, index) => + formData?.deaths[index]?.dependentDeathLocation?.outsideUsa, + }, + }, + }, + }, + }, + }, +}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartTwo.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartTwo.js new file mode 100644 index 000000000000..ccb6bc78e2e2 --- /dev/null +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartTwo.js @@ -0,0 +1,34 @@ +import { + currentOrPastDateUI, + currentOrPastDateSchema, +} from 'platform/forms-system/src/js/web-component-patterns'; +import { DependentDeceasedWhenH3 } from './helpers'; + +export const schema = { + type: 'object', + properties: { + deaths: { + type: 'array', + minItems: 1, + maxItems: 100, + items: { + type: 'object', + properties: { + dependentDeathDate: currentOrPastDateSchema, + }, + }, + }, + }, +}; + +export const uiSchema = { + deaths: { + items: { + 'ui:title': DependentDeceasedWhenH3, + dependentDeathDate: currentOrPastDateUI({ + title: 'Date of death', + required: () => true, + }), + }, + }, +}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationView.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationView.js new file mode 100644 index 000000000000..56fd0b2c8dc8 --- /dev/null +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationView.js @@ -0,0 +1,22 @@ +import { generateTransition } from '../../../helpers'; + +export const schema = { + type: 'object', + properties: { + 'view:dependentsAdditionalInfo': { + type: 'object', + properties: {}, + }, + }, +}; + +export const uiSchema = { + 'view:dependentsAdditionalInfo': { + 'ui:description': generateTransition( + 'Now we’re going to ask you some follow-up questions about each of your dependents who have died. We’ll go through them one by one.', + ), + 'ui:options': { + hideOnReview: true, + }, + }, +}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/helpers.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/helpers.js index 32dacc302e60..65425b87d590 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/helpers.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/helpers.js @@ -1,4 +1,27 @@ import React from 'react'; +import { capitalize } from 'lodash'; + +export const relationshipEnums = ['spouse', 'parent', 'child']; +export const relationshipLabels = { + spouse: 'Spouse', + parent: 'Dependent parent', + child: 'Child', +}; + +export const childTypeEnums = [ + 'childUnder18', + 'stepChild', + 'adopted', + 'disabled', + 'childOver18InSchool', +]; +export const childTypeLabels = { + childUnder18: 'Child under 18', + stepChild: 'Stepchild', + adopted: 'Adopted child', + disabled: 'Child incapable of self-support', + childOver18InSchool: 'Child 18-23 and in school', +}; export const DependentNameHeader = ({ formData }) => { const { first, last } = formData.fullName; @@ -12,3 +35,39 @@ export const DependentNameHeader = ({ formData }) => { ); }; + +export const DependentRelationshipH3 = ({ formData }) => { + const { first, last } = formData.fullName; + + return ( + +

+ Your relationship to {capitalize(first)} {capitalize(last)} +

+ + ); +}; + +export const DependentDeceasedWhenH3 = ({ formData }) => { + const { first, last } = formData.fullName; + + return ( + +

+ When did {capitalize(first)} {capitalize(last)} die? +

+ + ); +}; + +export const DependentDeceasedWhereH3 = ({ formData }) => { + const { first, last } = formData.fullName; + + return ( + +

+ Where did {capitalize(first)} {capitalize(last)} die? +

+ + ); +}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js index 29917404ae19..86615de958c1 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js @@ -1,136 +1,52 @@ -import merge from 'lodash/merge'; -import currentOrPastDateUI from 'platform/forms-system/src/js/definitions/currentOrPastDate'; -import ssnUI from 'platform/forms-system/src/js/definitions/ssn'; -import { TASK_KEYS } from '../../../constants'; -import { isChapterFieldRequired } from '../../../helpers'; -import DependentViewField from '../../../../components/DependentViewField'; -import { validateName, deceasedDependents } from '../../../utilities'; +import { + titleUI, + fullNameNoSuffixUI, + fullNameNoSuffixSchema, + ssnUI, + ssnSchema, + currentOrPastDateUI, + currentOrPastDateSchema, +} from 'platform/forms-system/src/js/web-component-patterns'; +import ArrayViewField from '../../../../components/ArrayViewField'; -export const schema = deceasedDependents.properties.dependentInformation; +export const schema = { + type: 'object', + properties: { + deaths: { + type: 'array', + minItems: 1, + maxItems: 100, + items: { + type: 'object', + properties: { + fullName: fullNameNoSuffixSchema, + ssn: ssnSchema, + birthDate: currentOrPastDateSchema, + }, + }, + }, + }, +}; export const uiSchema = { + ...titleUI('Dependents who have died'), deaths: { 'ui:options': { - viewField: DependentViewField, - itemName: 'Deceased dependent', + viewField: ArrayViewField, + itemName: 'Dependent who has died', keepInPageOnReview: true, customTitle: ' ', }, items: { - 'ui:title': 'Dependent who is deceased', - fullName: { - 'ui:validations': [validateName], - first: { - 'ui:title': 'First name', - 'ui:errorMessages': { - required: 'Enter a first name', - pattern: 'This field accepts alphabetic characters only', - }, - 'ui:required': formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - 'ui:options': { - useDlWrap: true, - }, - }, - middle: { - 'ui:title': 'Middle name', - 'ui:options': { - useDlWrap: true, - hideEmptyValueInReview: true, - }, - 'ui:errorMessages': { - pattern: 'This field accepts alphabetic characters only', - }, - }, - last: { - 'ui:title': 'Last name', - 'ui:errorMessages': { - required: 'Enter a last name', - pattern: 'This field accepts alphabetic characters only', - }, - 'ui:required': formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - 'ui:options': { - useDlWrap: true, - }, - }, - suffix: { - 'ui:title': 'Suffix', - 'ui:options': { - widgetClassNames: 'form-select-medium', - useDlWrap: true, - hideEmptyValueInReview: true, - }, - }, - }, + fullName: fullNameNoSuffixUI(), ssn: { - ...ssnUI, - 'ui:title': 'Dependent’s Social Security number', - 'ui:required': formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - 'ui:options': { - useDlWrap: true, - widgetClassNames: 'usa-input-medium', - }, + ...ssnUI('Dependent’s Social Security number'), + 'ui:required': () => true, }, - birthDate: merge(currentOrPastDateUI('Dependent’s date of birth'), { - 'ui:required': formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - 'ui:options': { - useDlWrap: true, - }, + birthDate: currentOrPastDateUI({ + title: 'Dependent’s date of birth', + required: () => true, }), - dependentType: { - 'ui:title': "What was your dependent's status?", - 'ui:widget': 'radio', - 'ui:required': formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - 'ui:options': { - useDlWrap: true, - }, - }, - childStatus: { - 'ui:title': "Child's status (Check all that apply)", - 'ui:required': (formData, index) => - formData.deaths[`${index}`].dependentType === 'CHILD', - 'ui:options': { - expandUnder: 'dependentType', - expandUnderCondition: 'CHILD', - showFieldLabel: true, - keepInPageOnReview: true, - useDlWrap: true, - }, - childUnder18: { - 'ui:title': 'Child under 18', - 'ui:options': { - useDlWrap: true, - }, - }, - stepChild: { - 'ui:title': 'Stepchild', - 'ui:options': { - useDlWrap: true, - }, - }, - adopted: { - 'ui:title': 'Adopted child', - 'ui:options': { - useDlWrap: true, - }, - }, - disabled: { - 'ui:title': 'Child incapable of self-support', - 'ui:options': { - useDlWrap: true, - }, - }, - childOver18InSchool: { - 'ui:title': 'Child 18-23 and in school', - 'ui:options': { - useDlWrap: true, - }, - }, - }, }, }, }; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js index e8ceaf463670..98c385bbdc9b 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js @@ -1,4 +1,13 @@ import * as deceasedDependentInformation from './dependent-information/dependentInformation'; +import * as deceasedDependentAdditionalInformationView from './dependent-additional-information/dependentAdditionalInformationView'; import * as deceasedDependentAdditionalInformation from './dependent-additional-information/dependentAdditionalInformation'; +import * as deceasedDependentAdditionalInformationPartTwo from './dependent-additional-information/dependentAdditionalInformationPartTwo'; +import * as deceasedDependentAdditionalInformationPartThree from './dependent-additional-information/dependentAdditionalInformationPartThree'; -export { deceasedDependentInformation, deceasedDependentAdditionalInformation }; +export { + deceasedDependentInformation, + deceasedDependentAdditionalInformationView, + deceasedDependentAdditionalInformation, + deceasedDependentAdditionalInformationPartTwo, + deceasedDependentAdditionalInformationPartThree, +}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/form.js b/src/applications/disability-benefits/686c-674-v2/config/form.js index c7f62941e530..3629ea911681 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/form.js +++ b/src/applications/disability-benefits/686c-674-v2/config/form.js @@ -18,7 +18,10 @@ import { } from './chapters/report-divorce'; import { deceasedDependentInformation, + deceasedDependentAdditionalInformationView, deceasedDependentAdditionalInformation, + deceasedDependentAdditionalInformationPartTwo, + deceasedDependentAdditionalInformationPartThree, } from './chapters/report-dependent-death'; import { reportChildMarriage } from './chapters/report-marriage-of-child'; import { reportChildStoppedAttendingSchool } from './chapters/report-child-stopped-attending-school'; @@ -626,6 +629,7 @@ export const formConfig = { }, }, }, + deceasedDependents: { title: 'Information needed to remove a dependent who has died', pages: { @@ -637,18 +641,47 @@ export const formConfig = { uiSchema: deceasedDependentInformation.uiSchema, schema: deceasedDependentInformation.schema, }, + dependentAdditionalInformationView: { + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + title: 'Report the death of a dependent: Additional information', + path: '686-report-dependent-death/additional-information', + uiSchema: deceasedDependentAdditionalInformationView.uiSchema, + schema: deceasedDependentAdditionalInformationView.schema, + }, dependentAdditionalInformation: { depends: formData => isChapterFieldRequired(formData, TASK_KEYS.reportDeath), title: 'Report the death of a dependent: Additional information', - path: '686-report-dependent-death/:index/additional-information', + path: '686-report-dependent-death/:index/dependent-information', showPagePerItem: true, arrayPath: 'deaths', uiSchema: deceasedDependentAdditionalInformation.uiSchema, schema: deceasedDependentAdditionalInformation.schema, }, + dependentAdditionalInformationPartTwo: { + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + title: 'Report the death of a dependent: Additional information', + path: '686-report-dependent-death/:index/dependent-date-of-death', + showPagePerItem: true, + arrayPath: 'deaths', + uiSchema: deceasedDependentAdditionalInformationPartTwo.uiSchema, + schema: deceasedDependentAdditionalInformationPartTwo.schema, + }, + dependentAdditionalInformationPartThree: { + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + title: 'Report the death of a dependent: Additional information', + path: '686-report-dependent-death/:index/dependent-death-location', + showPagePerItem: true, + arrayPath: 'deaths', + uiSchema: deceasedDependentAdditionalInformationPartThree.uiSchema, + schema: deceasedDependentAdditionalInformationPartThree.schema, + }, }, }, + reportChildMarriage: { title: 'Remove one or more children who got married', pages: { diff --git a/src/applications/disability-benefits/686c-674-v2/config/helpers.js b/src/applications/disability-benefits/686c-674-v2/config/helpers.js index e89fa4329954..26817d16a206 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/helpers.js +++ b/src/applications/disability-benefits/686c-674-v2/config/helpers.js @@ -241,6 +241,10 @@ export const generateHelpText = (text, className = 'vads-u-color--gray') => { return {text}; }; +export const generateTransition = (text, className = 'vads-u-margin-y--6') => { + return

{text}

; +}; + export const marriageEnums = ['Death', 'Divorce', 'Annulment', 'Other']; export const spouseFormerMarriageLabels = { From 0e67b362026684cfad26b03ff5a512ab7cf4fd23 Mon Sep 17 00:00:00 2001 From: Midge-dev Date: Fri, 13 Sep 2024 12:08:43 -0700 Subject: [PATCH 02/15] broken array builder POC --- .../dependentAdditionalInformationIntro.js | 60 +++++++ .../dependentAdditionalInformationView.js | 22 --- .../dependentInformation.js | 117 +++++++++++--- .../dependent-options/dependentOptions.js | 22 +++ .../deceasedDependentSummary.js | 48 ++++++ .../chapters/report-dependent-death/index.js | 6 +- .../686c-674-v2/config/form.js | 147 ++++++++++++------ .../686c-674-v2/config/helpers.js | 5 +- 8 files changed, 329 insertions(+), 98 deletions(-) create mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationIntro.js delete mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationView.js create mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/dependentOptions.js create mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-summary/deceasedDependentSummary.js diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationIntro.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationIntro.js new file mode 100644 index 000000000000..ff5740a21658 --- /dev/null +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationIntro.js @@ -0,0 +1,60 @@ +import { + arrayBuilderItemFirstPageTitleUI, + // arrayBuilderItemSubsequentPageTitleUI, + // arrayBuilderYesNoSchema, + // arrayBuilderYesNoUI, + // currentOrPastDateSchema, + // currentOrPastDateUI, + // textUI, + // textSchema, +} from '~/platform/forms-system/src/js/web-component-patterns'; +// import { arrayBuilderPages } from '~/platform/forms-system/src/js/patterns/array-builder'; +// import { formatReviewDate } from 'platform/forms-system/src/js/helpers'; +// import { generateTransition } from '../../../helpers'; + +// export const schema = { +// type: 'object', +// properties: { +// 'view:dependentsAdditionalInfo': { +// type: 'object', +// properties: {}, +// }, +// }, +// }; + +// export const uiSchema = { +// 'view:dependentsAdditionalInfo': { +// 'ui:description': generateTransition( +// 'Now we’re going to ask you some follow-up questions about each of your dependents who have died. We’ll go through them one by one.', +// ), +// 'ui:options': { +// hideOnReview: true, +// }, +// }, +// }; + +export const schema = { + type: 'object', + properties: {}, +}; + +export const uiSchema = { + ...arrayBuilderItemFirstPageTitleUI( + 'Dependents who have died', + 'In the next few questions, we’ll ask you about your dependents who have died. You must add at least one dependent. You may add up to 5 dependents.', + ), +}; + +// /** @returns {PageSchema} */ +// export default { +// uiSchema: { +// ...arrayBuilderItemFirstPageTitleUI( +// 'Dependents who have died', +// 'In the next few questions, we’ll ask you about your dependents who have died. You must add at least one dependent. You may add up to 5 dependents.', +// ), +// }, +// schema: { +// type: 'object', +// properties: {}, +// }, +// }; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationView.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationView.js deleted file mode 100644 index 56fd0b2c8dc8..000000000000 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationView.js +++ /dev/null @@ -1,22 +0,0 @@ -import { generateTransition } from '../../../helpers'; - -export const schema = { - type: 'object', - properties: { - 'view:dependentsAdditionalInfo': { - type: 'object', - properties: {}, - }, - }, -}; - -export const uiSchema = { - 'view:dependentsAdditionalInfo': { - 'ui:description': generateTransition( - 'Now we’re going to ask you some follow-up questions about each of your dependents who have died. We’ll go through them one by one.', - ), - 'ui:options': { - hideOnReview: true, - }, - }, -}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js index 86615de958c1..c2bc8e90fec6 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js @@ -1,13 +1,65 @@ import { - titleUI, + // addressNoMilitarySchema, + // addressNoMilitaryUI, + // currentOrPastDateRangeSchema, + // currentOrPastDateRangeUI, + // titleUI, fullNameNoSuffixUI, fullNameNoSuffixSchema, ssnUI, ssnSchema, currentOrPastDateUI, currentOrPastDateSchema, + arrayBuilderItemFirstPageTitleUI, + // arrayBuilderYesNoSchema, + // arrayBuilderYesNoUI, + // arrayBuilderItemSubsequentPageTitleUI, } from 'platform/forms-system/src/js/web-component-patterns'; -import ArrayViewField from '../../../../components/ArrayViewField'; +// import { VaTextInputField } from 'platform/forms-system/src/js/web-component-fields'; +// import ArrayViewField from '../../../../components/ArrayViewField'; +import dependentOptions from '../dependent-options/dependentOptions'; + +// export const schema = { +// type: 'object', +// properties: { +// deaths: { +// type: 'array', +// minItems: 1, +// maxItems: 100, +// items: { +// type: 'object', +// properties: { +// fullName: fullNameNoSuffixSchema, +// ssn: ssnSchema, +// birthDate: currentOrPastDateSchema, +// }, +// }, +// }, +// }, +// }; + +// export const uiSchema = { +// ...titleUI('Dependents who have died'), +// deaths: { +// 'ui:options': { +// viewField: ArrayViewField, +// itemName: 'Dependent who has died', +// keepInPageOnReview: true, +// customTitle: ' ', +// }, +// items: { +// fullName: fullNameNoSuffixUI(), +// ssn: { +// ...ssnUI('Dependent’s Social Security number'), +// 'ui:required': () => true, +// }, +// birthDate: currentOrPastDateUI({ +// title: 'Dependent’s date of birth', +// required: () => true, +// }), +// }, +// }, +// }; export const schema = { type: 'object', @@ -29,24 +81,47 @@ export const schema = { }; export const uiSchema = { - ...titleUI('Dependents who have died'), - deaths: { - 'ui:options': { - viewField: ArrayViewField, - itemName: 'Dependent who has died', - keepInPageOnReview: true, - customTitle: ' ', - }, - items: { - fullName: fullNameNoSuffixUI(), - ssn: { - ...ssnUI('Dependent’s Social Security number'), - 'ui:required': () => true, - }, - birthDate: currentOrPastDateUI({ - title: 'Dependent’s date of birth', - required: () => true, - }), - }, + ...arrayBuilderItemFirstPageTitleUI({ + title: 'Dependent who has died', + nounSingular: dependentOptions.nounSingular, + }), + fullName: fullNameNoSuffixUI(), + ssn: { + ...ssnUI('Dependent’s Social Security number'), + 'ui:required': () => true, }, + birthDate: currentOrPastDateUI({ + title: 'Dependent’s date of birth', + required: () => true, + }), }; + +// /** @returns {PageSchema} */ +// const dependentInformation = { +// uiSchema: { +// ...arrayBuilderItemFirstPageTitleUI({ +// title: 'Dependent who has died', +// nounSingular: dependentOptions.nounSingular, +// }), +// fullName: fullNameNoSuffixUI(), +// ssn: { +// ...ssnUI('Dependent’s Social Security number'), +// 'ui:required': () => true, +// }, +// birthDate: currentOrPastDateUI({ +// title: 'Dependent’s date of birth', +// required: () => true, +// }), +// }, +// schema: { +// type: 'object', +// properties: { +// fullName: fullNameNoSuffixSchema, +// ssn: ssnSchema, +// birthDate: currentOrPastDateSchema, +// }, +// // required: ['name'], +// }, +// }; + +// export default dependentInformation; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/dependentOptions.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/dependentOptions.js new file mode 100644 index 000000000000..72bd8222f16f --- /dev/null +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/dependentOptions.js @@ -0,0 +1,22 @@ +/** @type {ArrayBuilderOptions} */ +const dependentOptions = { + arrayPath: 'deaths', + nounSingular: 'dependent', + nounPlural: 'dependents', + required: formData => formData?.arrayBuilderPatternFlowType === 'required', + isItemIncomplete: item => + !item?.fullName?.first || + !item?.fullName?.last || + !item?.ssn || + !item?.birthDate || + !item?.dependentType || + !item?.childStatus || + !item?.date, + maxItems: 5, + text: { + getItemName: item => item.name, + cardDescription: item => `${item?.birthDate} - ${item?.date}`, + }, +}; + +export default dependentOptions; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-summary/deceasedDependentSummary.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-summary/deceasedDependentSummary.js new file mode 100644 index 000000000000..d437cdffddca --- /dev/null +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-summary/deceasedDependentSummary.js @@ -0,0 +1,48 @@ +import { + // addressNoMilitarySchema, + // addressNoMilitaryUI, + // currentOrPastDateRangeSchema, + // currentOrPastDateRangeUI, + // titleUI, + // arrayBuilderItemFirstPageTitleUI, + arrayBuilderYesNoSchema, + arrayBuilderYesNoUI, + // arrayBuilderItemSubsequentPageTitleUI, +} from 'platform/forms-system/src/js/web-component-patterns'; +// import { VaTextInputField } from 'platform/forms-system/src/js/web-component-fields'; +import dependentOptions from '../dependent-options/dependentOptions'; + +/** @returns {PageSchema} */ +const deceasedDependentSummaryPage = { + uiSchema: { + 'view:completedDependent': arrayBuilderYesNoUI( + dependentOptions, + // { + // title: + // 'Do you have any employment, including self-employment for the last 5 years to report?', + // hint: + // 'Include self-employment and military duty (including inactive duty for training).', + // labels: { + // Y: 'Yes, I have employment to report', + // N: 'No, I don’t have employment to report', + // }, + // }, + { + title: 'Do you have another deceased dependent to report?', + labels: { + Y: 'Yes, I have another dependent to report', + N: 'No, I don’t have another dependent to report', + }, + }, + ), + }, + schema: { + type: 'object', + properties: { + 'view:hasEmployment': arrayBuilderYesNoSchema, + }, + required: ['view:completedDependent'], + }, +}; + +export default deceasedDependentSummaryPage; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js index 98c385bbdc9b..2ead1a2b71b3 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js @@ -1,13 +1,15 @@ import * as deceasedDependentInformation from './dependent-information/dependentInformation'; -import * as deceasedDependentAdditionalInformationView from './dependent-additional-information/dependentAdditionalInformationView'; +import * as deceasedDependentAdditionalInformationIntro from './dependent-additional-information/dependentAdditionalInformationIntro'; import * as deceasedDependentAdditionalInformation from './dependent-additional-information/dependentAdditionalInformation'; import * as deceasedDependentAdditionalInformationPartTwo from './dependent-additional-information/dependentAdditionalInformationPartTwo'; import * as deceasedDependentAdditionalInformationPartThree from './dependent-additional-information/dependentAdditionalInformationPartThree'; +import deceasedDependentSummary from './dependent-summary/deceasedDependentSummary'; export { deceasedDependentInformation, - deceasedDependentAdditionalInformationView, + deceasedDependentAdditionalInformationIntro, deceasedDependentAdditionalInformation, deceasedDependentAdditionalInformationPartTwo, deceasedDependentAdditionalInformationPartThree, + deceasedDependentSummary, }; diff --git a/src/applications/disability-benefits/686c-674-v2/config/form.js b/src/applications/disability-benefits/686c-674-v2/config/form.js index f806da9094dd..464f0b7f3d42 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/form.js +++ b/src/applications/disability-benefits/686c-674-v2/config/form.js @@ -1,5 +1,6 @@ import fullSchema from 'vets-json-schema/dist/686C-674-schema.json'; import environment from 'platform/utilities/environment'; +import { arrayBuilderPages } from 'platform/forms-system/src/js/patterns/array-builder'; import FormFooter from 'platform/forms/components/FormFooter'; import { externalServices } from 'platform/monitoring/DowntimeNotification'; import { VA_FORM_IDS } from 'platform/forms/constants'; @@ -16,12 +17,15 @@ import { formerSpouseInformation, formerSpouseInformationPartTwo, } from './chapters/report-divorce'; +import dependentOptions from './chapters/report-dependent-death/dependent-options/dependentOptions'; +// import deceasedDependentAdditionalInformationIntro from './chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationIntro'; import { deceasedDependentInformation, - deceasedDependentAdditionalInformationView, - deceasedDependentAdditionalInformation, - deceasedDependentAdditionalInformationPartTwo, - deceasedDependentAdditionalInformationPartThree, + // deceasedDependentAdditionalInformationIntro, + // deceasedDependentAdditionalInformation, + // deceasedDependentAdditionalInformationPartTwo, + // deceasedDependentAdditionalInformationPartThree, + deceasedDependentSummary, } from './chapters/report-dependent-death'; import { reportChildMarriage } from './chapters/report-marriage-of-child'; import { reportChildStoppedAttendingSchool } from './chapters/report-child-stopped-attending-school'; @@ -727,52 +731,95 @@ export const formConfig = { deceasedDependents: { title: 'Information needed to remove a dependent who has died', pages: { - dependentInformation: { - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - title: 'Report the death of a dependent: Basic information', - path: '686-report-dependent-death', - uiSchema: deceasedDependentInformation.uiSchema, - schema: deceasedDependentInformation.schema, - }, - dependentAdditionalInformationView: { - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - title: 'Report the death of a dependent: Additional information', - path: '686-report-dependent-death/additional-information', - uiSchema: deceasedDependentAdditionalInformationView.uiSchema, - schema: deceasedDependentAdditionalInformationView.schema, - }, - dependentAdditionalInformation: { - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - title: 'Report the death of a dependent: Additional information', - path: '686-report-dependent-death/:index/dependent-information', - showPagePerItem: true, - arrayPath: 'deaths', - uiSchema: deceasedDependentAdditionalInformation.uiSchema, - schema: deceasedDependentAdditionalInformation.schema, - }, - dependentAdditionalInformationPartTwo: { - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - title: 'Report the death of a dependent: Additional information', - path: '686-report-dependent-death/:index/dependent-date-of-death', - showPagePerItem: true, - arrayPath: 'deaths', - uiSchema: deceasedDependentAdditionalInformationPartTwo.uiSchema, - schema: deceasedDependentAdditionalInformationPartTwo.schema, - }, - dependentAdditionalInformationPartThree: { - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - title: 'Report the death of a dependent: Additional information', - path: '686-report-dependent-death/:index/dependent-death-location', - showPagePerItem: true, - arrayPath: 'deaths', - uiSchema: deceasedDependentAdditionalInformationPartThree.uiSchema, - schema: deceasedDependentAdditionalInformationPartThree.schema, - }, + ...arrayBuilderPages(dependentOptions, pageBuilder => ({ + // introPage needed for "required" flow + dependentAdditionalInformationIntro: pageBuilder.introPage({ + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + title: 'Report the death of a dependent: Additional information', + path: '686-report-dependent-death', + // uiSchema: deceasedDependentAdditionalInformationIntro.uiSchema, + // schema: deceasedDependentAdditionalInformationIntro.schema, + }), + dependentAdditionalInformationSummary: pageBuilder.summaryPage({ + title: 'Array with multiple page builder summary', + path: '686-report-dependent-death/dependent-summary', + uiSchema: deceasedDependentSummary.uiSchema, + schema: deceasedDependentSummary.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + }), + dependentAdditionalInformation: pageBuilder.itemPage({ + title: 'Employer name and address', + path: '686-report-dependent-death/:index/dependent-information', + uiSchema: deceasedDependentInformation.uiSchema, + schema: deceasedDependentInformation.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + }), + // dependentAdditionalInformationPartTwo: pageBuilder.itemPage({ + // title: 'Employer dates', + // path: 'array-multiple-page-builder/:index/dates', + // uiSchema: employersDatesPage.uiSchema, + // schema: employersDatesPage.schema, + // depends: formData => + // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + // }), + // dependentAdditionalInformationPartThree: pageBuilder.itemPage({ + // title: 'Employer dates', + // path: 'array-multiple-page-builder/:index/dates', + // uiSchema: employersDatesPage.uiSchema, + // schema: employersDatesPage.schema, + // depends: formData => + // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + // }), + })), + // dependentInformation: { + // depends: formData => + // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + // title: 'Report the death of a dependent: Basic information', + // path: '686-report-dependent-death', + // uiSchema: deceasedDependentInformation.uiSchema, + // schema: deceasedDependentInformation.schema, + // }, + // dependentAdditionalInformationView: { + // depends: formData => + // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + // title: 'Report the death of a dependent: Additional information', + // path: '686-report-dependent-death/additional-information', + // uiSchema: deceasedDependentAdditionalInformationView.uiSchema, + // schema: deceasedDependentAdditionalInformationView.schema, + // }, + // dependentAdditionalInformation: { + // depends: formData => + // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + // title: 'Report the death of a dependent: Additional information', + // path: '686-report-dependent-death/:index/dependent-information', + // showPagePerItem: true, + // arrayPath: 'deaths', + // uiSchema: deceasedDependentAdditionalInformation.uiSchema, + // schema: deceasedDependentAdditionalInformation.schema, + // }, + // dependentAdditionalInformationPartTwo: { + // depends: formData => + // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + // title: 'Report the death of a dependent: Additional information', + // path: '686-report-dependent-death/:index/dependent-date-of-death', + // showPagePerItem: true, + // arrayPath: 'deaths', + // uiSchema: deceasedDependentAdditionalInformationPartTwo.uiSchema, + // schema: deceasedDependentAdditionalInformationPartTwo.schema, + // }, + // dependentAdditionalInformationPartThree: { + // depends: formData => + // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + // title: 'Report the death of a dependent: Additional information', + // path: '686-report-dependent-death/:index/dependent-death-location', + // showPagePerItem: true, + // arrayPath: 'deaths', + // uiSchema: deceasedDependentAdditionalInformationPartThree.uiSchema, + // schema: deceasedDependentAdditionalInformationPartThree.schema, + // }, }, }, diff --git a/src/applications/disability-benefits/686c-674-v2/config/helpers.js b/src/applications/disability-benefits/686c-674-v2/config/helpers.js index 1fae2f697083..6bdb966ecb15 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/helpers.js +++ b/src/applications/disability-benefits/686c-674-v2/config/helpers.js @@ -247,13 +247,12 @@ export const generateHelpText = (text, className = 'vads-u-color--gray') => { return {text}; }; -<<<<<<< dependents-71248-remove-deceased export const generateTransition = (text, className = 'vads-u-margin-y--6') => { return

{text}

; -======= +}; + export const generateTitle = text => { return

{text}

; ->>>>>>> main }; export const marriageEnums = ['Death', 'Divorce', 'Annulment', 'Other']; From 4750d1204ade41de0ebdce69e014c1791a7df319 Mon Sep 17 00:00:00 2001 From: Midge-dev Date: Mon, 16 Sep 2024 13:47:39 -0700 Subject: [PATCH 03/15] array builder concept 1 --- .../deceasedDependentArrayPages.js | 202 ++++++++++++++++++ .../dependentInformation.js | 120 +++++------ .../dependent-intro/deceasedDependentIntro.js | 60 ++++++ ...Options.js => deceasedDependentOptions.js} | 4 +- .../deceasedDependentSummary.js | 2 +- .../chapters/report-dependent-death/index.js | 6 +- .../686c-674-v2/config/form.js | 134 +++++++----- 7 files changed, 412 insertions(+), 116 deletions(-) create mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js create mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-intro/deceasedDependentIntro.js rename src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/{dependentOptions.js => deceasedDependentOptions.js} (87%) diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js new file mode 100644 index 000000000000..2eb98857246a --- /dev/null +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js @@ -0,0 +1,202 @@ +import { + // addressNoMilitarySchema, + // addressNoMilitaryUI, + // currentOrPastDateRangeSchema, + // currentOrPastDateRangeUI, + titleUI, + arrayBuilderItemFirstPageTitleUI, + arrayBuilderYesNoSchema, + arrayBuilderYesNoUI, + arrayBuilderItemSubsequentPageTitleUI, + fullNameNoSuffixUI, + fullNameNoSuffixSchema, + radioUI, + radioSchema, + checkboxGroupUI, + checkboxGroupSchema, + ssnUI, + ssnSchema, + currentOrPastDateUI, + currentOrPastDateSchema, +} from 'platform/forms-system/src/js/web-component-patterns'; +// import { VaTextInputField } from 'platform/forms-system/src/js/web-component-fields'; +import { + relationshipEnums, + relationshipLabels, + childTypeEnums, + childTypeLabels, + // DependentRelationshipH3, +} from './dependent-additional-information/helpers'; + +/** @type {ArrayBuilderOptions} */ +export const deceasedDependentOptions = { + arrayPath: 'deaths', + nounSingular: 'dependent', + nounPlural: 'dependents', + required: true, + isItemIncomplete: item => + !item?.fullName?.first || + !item?.fullName?.last || + !item?.ssn || + !item?.birthDate, + // !item?.dependentType || + // !item?.childStatus || + // !item?.date, + maxItems: 5, + text: { + getItemName: item => `${item.fullName.first} ${item.fullName.last}`, + cardDescription: item => `${item?.birthDate} - ${item?.date}`, + }, +}; + +/** @returns {PageSchema} */ +export const deceasedDependentIntroPage = { + uiSchema: { + ...titleUI({ + title: 'Dependents who have died', + description: + 'In the next few questions, we’ll ask you about your dependents who have died. You must add at least one dependent. You may add up to 5 dependents.', + }), + }, + schema: { + type: 'object', + properties: {}, + }, +}; + +/** @returns {PageSchema} */ +export const deceasedDependentSummaryPage = { + uiSchema: { + 'view:completedDependent': arrayBuilderYesNoUI( + deceasedDependentOptions, + // { + // title: + // 'Do you have any employment, including self-employment for the last 5 years to report?', + // hint: + // 'Include self-employment and military duty (including inactive duty for training).', + // labels: { + // Y: 'Yes, I have employment to report', + // N: 'No, I don’t have employment to report', + // }, + // }, + { + title: 'Do you have another deceased dependent to report?', + labels: { + Y: 'Yes, I have another dependent to report', + N: 'No, I don’t have another dependent to report', + }, + }, + ), + }, + schema: { + type: 'object', + properties: { + 'view:completedDependent': arrayBuilderYesNoSchema, + }, + required: ['view:completedDependent'], + }, +}; + +/** @returns {PageSchema} */ +export const deceasedDependentPersonalInfoPage = { + uiSchema: { + ...arrayBuilderItemFirstPageTitleUI({ + title: 'Dependent who has died', + nounSingular: deceasedDependentOptions.nounSingular, + }), + fullName: fullNameNoSuffixUI(), + ssn: { + ...ssnUI('Dependent’s Social Security number'), + 'ui:required': () => true, + }, + birthDate: currentOrPastDateUI({ + title: 'Dependent’s date of birth', + required: () => true, + }), + }, + schema: { + type: 'object', + properties: { + fullName: fullNameNoSuffixSchema, + ssn: ssnSchema, + birthDate: currentOrPastDateSchema, + }, + }, +}; + +/** @returns {PageSchema} */ +export const deceasedDependentChildStatusPage = { + uiSchema: { + ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) => { + // console.log(formData); + const { first, last } = formData?.fullName; + return formData?.fullName + ? `Your relationship to ${first} ${last}` + : 'Your relationship to the deceased dependent'; + }), + // 'ui:title': DependentRelationshipH3, + dependentType: { + ...radioUI({ + title: 'What was your relationship to the dependent?', + required: () => true, + labels: relationshipLabels, + }), + }, + }, + schema: { + type: 'object', + properties: { + dependentType: radioSchema(relationshipEnums), + }, + }, +}; + +/** @returns {PageSchema} */ +export const deceasedDependentChildTypePage = { + uiSchema: { + ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) => { + // console.log(formData); + const { first, last } = formData?.fullName; + return formData?.fullName + ? `Your relationship to ${first} ${last}` + : 'Your relationship to the deceased dependent'; + }), + childStatus: { + ...checkboxGroupUI({ + title: 'What type of child?', + required: formData => formData?.dependentType === 'child', + labels: childTypeLabels, + }), + // 'ui:required': (formData, index) => + // formData?.deaths[index]?.dependentType === 'child', + }, + }, + schema: { + type: 'object', + properties: { + childStatus: checkboxGroupSchema(childTypeEnums), + }, + }, +}; + +export const deceasedDependentDateOfDeathPage = { + uiSchema: { + ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) => { + // console.log(formData); + const { first, last } = formData?.fullName; + return formData?.fullName + ? `When did ${first} ${last} die?` + : 'When did the dependent die?'; + }), + dependentDeathDate: currentOrPastDateUI({ + title: 'Date of death', + required: () => true, + }), + }, + schema: { + type: 'object', + properties: { + dependentDeathDate: currentOrPastDateSchema, + }, + }, +}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js index c2bc8e90fec6..255bfeafc6b2 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js @@ -17,7 +17,7 @@ import { } from 'platform/forms-system/src/js/web-component-patterns'; // import { VaTextInputField } from 'platform/forms-system/src/js/web-component-fields'; // import ArrayViewField from '../../../../components/ArrayViewField'; -import dependentOptions from '../dependent-options/dependentOptions'; +import dependentOptions from '../dependent-options/deceasedDependentOptions'; // export const schema = { // type: 'object', @@ -61,67 +61,67 @@ import dependentOptions from '../dependent-options/dependentOptions'; // }, // }; -export const schema = { - type: 'object', - properties: { - deaths: { - type: 'array', - minItems: 1, - maxItems: 100, - items: { - type: 'object', - properties: { - fullName: fullNameNoSuffixSchema, - ssn: ssnSchema, - birthDate: currentOrPastDateSchema, - }, - }, - }, - }, -}; - -export const uiSchema = { - ...arrayBuilderItemFirstPageTitleUI({ - title: 'Dependent who has died', - nounSingular: dependentOptions.nounSingular, - }), - fullName: fullNameNoSuffixUI(), - ssn: { - ...ssnUI('Dependent’s Social Security number'), - 'ui:required': () => true, - }, - birthDate: currentOrPastDateUI({ - title: 'Dependent’s date of birth', - required: () => true, - }), -}; - -// /** @returns {PageSchema} */ -// const dependentInformation = { -// uiSchema: { -// ...arrayBuilderItemFirstPageTitleUI({ -// title: 'Dependent who has died', -// nounSingular: dependentOptions.nounSingular, -// }), -// fullName: fullNameNoSuffixUI(), -// ssn: { -// ...ssnUI('Dependent’s Social Security number'), -// 'ui:required': () => true, +// export const schema = { +// type: 'object', +// properties: { +// deaths: { +// type: 'array', +// minItems: 1, +// maxItems: 100, +// items: { +// type: 'object', +// properties: { +// fullName: fullNameNoSuffixSchema, +// ssn: ssnSchema, +// birthDate: currentOrPastDateSchema, +// }, +// }, // }, -// birthDate: currentOrPastDateUI({ -// title: 'Dependent’s date of birth', -// required: () => true, -// }), // }, -// schema: { -// type: 'object', -// properties: { -// fullName: fullNameNoSuffixSchema, -// ssn: ssnSchema, -// birthDate: currentOrPastDateSchema, -// }, -// // required: ['name'], +// }; + +// export const uiSchema = { +// ...arrayBuilderItemFirstPageTitleUI({ +// title: 'Dependent who has died', +// nounSingular: dependentOptions.nounSingular, +// }), +// fullName: fullNameNoSuffixUI(), +// ssn: { +// ...ssnUI('Dependent’s Social Security number'), +// 'ui:required': () => true, // }, +// birthDate: currentOrPastDateUI({ +// title: 'Dependent’s date of birth', +// required: () => true, +// }), // }; -// export default dependentInformation; +/** @returns {PageSchema} */ +const dependentInformation = { + uiSchema: { + ...arrayBuilderItemFirstPageTitleUI({ + title: 'Dependent who has died', + nounSingular: dependentOptions.nounSingular, + }), + fullName: fullNameNoSuffixUI(), + ssn: { + ...ssnUI('Dependent’s Social Security number'), + 'ui:required': () => true, + }, + birthDate: currentOrPastDateUI({ + title: 'Dependent’s date of birth', + required: () => true, + }), + }, + schema: { + type: 'object', + properties: { + fullName: fullNameNoSuffixSchema, + ssn: ssnSchema, + birthDate: currentOrPastDateSchema, + }, + // required: ['name'], + }, +}; + +export default dependentInformation; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-intro/deceasedDependentIntro.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-intro/deceasedDependentIntro.js new file mode 100644 index 000000000000..48dc7c5efb0e --- /dev/null +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-intro/deceasedDependentIntro.js @@ -0,0 +1,60 @@ +import { + arrayBuilderItemFirstPageTitleUI, + // arrayBuilderItemSubsequentPageTitleUI, + // arrayBuilderYesNoSchema, + // arrayBuilderYesNoUI, + // currentOrPastDateSchema, + // currentOrPastDateUI, + // textUI, + // textSchema, +} from '~/platform/forms-system/src/js/web-component-patterns'; +// import { arrayBuilderPages } from '~/platform/forms-system/src/js/patterns/array-builder'; +// import { formatReviewDate } from 'platform/forms-system/src/js/helpers'; +// import { generateTransition } from '../../../helpers'; + +// export const schema = { +// type: 'object', +// properties: { +// 'view:dependentsAdditionalInfo': { +// type: 'object', +// properties: {}, +// }, +// }, +// }; + +// export const uiSchema = { +// 'view:dependentsAdditionalInfo': { +// 'ui:description': generateTransition( +// 'Now we’re going to ask you some follow-up questions about each of your dependents who have died. We’ll go through them one by one.', +// ), +// 'ui:options': { +// hideOnReview: true, +// }, +// }, +// }; + +// export const schema = { +// type: 'object', +// properties: {}, +// }; + +// export const uiSchema = { +// ...arrayBuilderItemFirstPageTitleUI( +// 'Dependents who have died', +// 'In the next few questions, we’ll ask you about your dependents who have died. You must add at least one dependent. You may add up to 5 dependents.', +// ), +// }; + +/** @returns {PageSchema} */ +export default { + uiSchema: { + ...arrayBuilderItemFirstPageTitleUI( + 'Dependents who have died', + 'In the next few questions, we’ll ask you about your dependents who have died. You must add at least one dependent. You may add up to 5 dependents.', + ), + }, + schema: { + type: 'object', + properties: {}, + }, +}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/dependentOptions.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/deceasedDependentOptions.js similarity index 87% rename from src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/dependentOptions.js rename to src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/deceasedDependentOptions.js index 72bd8222f16f..4cb5da7f2390 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/dependentOptions.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/deceasedDependentOptions.js @@ -1,5 +1,5 @@ /** @type {ArrayBuilderOptions} */ -const dependentOptions = { +const deceasedDependentOptions = { arrayPath: 'deaths', nounSingular: 'dependent', nounPlural: 'dependents', @@ -19,4 +19,4 @@ const dependentOptions = { }, }; -export default dependentOptions; +export default deceasedDependentOptions; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-summary/deceasedDependentSummary.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-summary/deceasedDependentSummary.js index d437cdffddca..fa39c001f503 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-summary/deceasedDependentSummary.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-summary/deceasedDependentSummary.js @@ -10,7 +10,7 @@ import { // arrayBuilderItemSubsequentPageTitleUI, } from 'platform/forms-system/src/js/web-component-patterns'; // import { VaTextInputField } from 'platform/forms-system/src/js/web-component-fields'; -import dependentOptions from '../dependent-options/dependentOptions'; +import dependentOptions from '../dependent-options/deceasedDependentOptions'; /** @returns {PageSchema} */ const deceasedDependentSummaryPage = { diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js index 2ead1a2b71b3..4d486d35039d 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js @@ -1,15 +1,17 @@ -import * as deceasedDependentInformation from './dependent-information/dependentInformation'; +import dependentInformation from './dependent-information/dependentInformation'; import * as deceasedDependentAdditionalInformationIntro from './dependent-additional-information/dependentAdditionalInformationIntro'; import * as deceasedDependentAdditionalInformation from './dependent-additional-information/dependentAdditionalInformation'; import * as deceasedDependentAdditionalInformationPartTwo from './dependent-additional-information/dependentAdditionalInformationPartTwo'; import * as deceasedDependentAdditionalInformationPartThree from './dependent-additional-information/dependentAdditionalInformationPartThree'; import deceasedDependentSummary from './dependent-summary/deceasedDependentSummary'; +import deceasedDependentIntro from './dependent-intro/deceasedDependentIntro'; export { - deceasedDependentInformation, + dependentInformation, deceasedDependentAdditionalInformationIntro, deceasedDependentAdditionalInformation, deceasedDependentAdditionalInformationPartTwo, deceasedDependentAdditionalInformationPartThree, deceasedDependentSummary, + deceasedDependentIntro, }; diff --git a/src/applications/disability-benefits/686c-674-v2/config/form.js b/src/applications/disability-benefits/686c-674-v2/config/form.js index 464f0b7f3d42..3d34172269db 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/form.js +++ b/src/applications/disability-benefits/686c-674-v2/config/form.js @@ -17,16 +17,23 @@ import { formerSpouseInformation, formerSpouseInformationPartTwo, } from './chapters/report-divorce'; -import dependentOptions from './chapters/report-dependent-death/dependent-options/dependentOptions'; -// import deceasedDependentAdditionalInformationIntro from './chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationIntro'; import { - deceasedDependentInformation, - // deceasedDependentAdditionalInformationIntro, - // deceasedDependentAdditionalInformation, - // deceasedDependentAdditionalInformationPartTwo, - // deceasedDependentAdditionalInformationPartThree, - deceasedDependentSummary, -} from './chapters/report-dependent-death'; + deceasedDependentOptions, + deceasedDependentIntroPage, + deceasedDependentSummaryPage, + deceasedDependentPersonalInfoPage, + deceasedDependentChildStatusPage, + deceasedDependentChildTypePage, + deceasedDependentDateOfDeathPage, +} from './chapters/report-dependent-death/deceasedDependentArrayPages'; +// dependentInformation, +// deceasedDependentAdditionalInformationIntro, +// deceasedDependentAdditionalInformation, +// deceasedDependentAdditionalInformationPartTwo, +// deceasedDependentAdditionalInformationPartThree, +// deceasedDependentIntro, +// deceasedDependentSummary, +// } from './chapters/report-dependent-death'; import { reportChildMarriage } from './chapters/report-marriage-of-child'; import { reportChildStoppedAttendingSchool } from './chapters/report-child-stopped-attending-school'; import { @@ -731,49 +738,74 @@ export const formConfig = { deceasedDependents: { title: 'Information needed to remove a dependent who has died', pages: { - ...arrayBuilderPages(dependentOptions, pageBuilder => ({ - // introPage needed for "required" flow - dependentAdditionalInformationIntro: pageBuilder.introPage({ - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - title: 'Report the death of a dependent: Additional information', - path: '686-report-dependent-death', - // uiSchema: deceasedDependentAdditionalInformationIntro.uiSchema, - // schema: deceasedDependentAdditionalInformationIntro.schema, + ...arrayBuilderPages( + deceasedDependentOptions, + (pageBuilder, helpers) => ({ + // introPage needed for "required" flow + dependentAdditionalInformationIntro: pageBuilder.introPage({ + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death', + uiSchema: deceasedDependentIntroPage.uiSchema, + schema: deceasedDependentIntroPage.schema, + }), + dependentAdditionalInformationSummary: pageBuilder.summaryPage({ + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death/dependent-summary', + uiSchema: deceasedDependentSummaryPage.uiSchema, + schema: deceasedDependentSummaryPage.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + }), + dependentAdditionalInformationPartOne: pageBuilder.itemPage({ + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death/:index/dependent-information', + uiSchema: deceasedDependentPersonalInfoPage.uiSchema, + schema: deceasedDependentPersonalInfoPage.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + }), + dependentAdditionalInformationPartTwo: pageBuilder.itemPage({ + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death/:index/child-status', + uiSchema: deceasedDependentChildStatusPage.uiSchema, + schema: deceasedDependentChildStatusPage.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + onNavForward: props => { + return props.formData.dependentType === 'child' + ? helpers.navForwardKeepUrlParams(props) // go to next page + : helpers.navForwardFinishedItem(props); // return to summary + }, + }), + dependentAdditionalInformationPartThree: pageBuilder.itemPage({ + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death/:index/child-type', + uiSchema: deceasedDependentChildTypePage.uiSchema, + schema: deceasedDependentChildTypePage.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + // formData?.dependentType === 'child', + }), + dependentAdditionalInformationPartFour: pageBuilder.itemPage({ + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death/:index/date-of-death', + uiSchema: deceasedDependentDateOfDeathPage.uiSchema, + schema: deceasedDependentDateOfDeathPage.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + }), + // dependentAdditionalInformationPartThree: pageBuilder.itemPage({ + // title: 'Employer dates', + // path: 'array-multiple-page-builder/:index/dates', + // uiSchema: employersDatesPage.uiSchema, + // schema: employersDatesPage.schema, + // depends: formData => + // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + // }), }), - dependentAdditionalInformationSummary: pageBuilder.summaryPage({ - title: 'Array with multiple page builder summary', - path: '686-report-dependent-death/dependent-summary', - uiSchema: deceasedDependentSummary.uiSchema, - schema: deceasedDependentSummary.schema, - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - }), - dependentAdditionalInformation: pageBuilder.itemPage({ - title: 'Employer name and address', - path: '686-report-dependent-death/:index/dependent-information', - uiSchema: deceasedDependentInformation.uiSchema, - schema: deceasedDependentInformation.schema, - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - }), - // dependentAdditionalInformationPartTwo: pageBuilder.itemPage({ - // title: 'Employer dates', - // path: 'array-multiple-page-builder/:index/dates', - // uiSchema: employersDatesPage.uiSchema, - // schema: employersDatesPage.schema, - // depends: formData => - // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - // }), - // dependentAdditionalInformationPartThree: pageBuilder.itemPage({ - // title: 'Employer dates', - // path: 'array-multiple-page-builder/:index/dates', - // uiSchema: employersDatesPage.uiSchema, - // schema: employersDatesPage.schema, - // depends: formData => - // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - // }), - })), + ), // dependentInformation: { // depends: formData => // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), From bfa5589257c20e545222ba3d4ee53b4ea980fe3a Mon Sep 17 00:00:00 2001 From: Midge-dev Date: Mon, 16 Sep 2024 15:28:19 -0700 Subject: [PATCH 04/15] array builder custom nav --- .../deceasedDependentArrayPages.js | 28 ++++ .../686c-674-v2/config/form.js | 145 ++++++++++-------- 2 files changed, 106 insertions(+), 67 deletions(-) diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js index 2eb98857246a..af2d62b373c9 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js @@ -3,6 +3,8 @@ import { // addressNoMilitaryUI, // currentOrPastDateRangeSchema, // currentOrPastDateRangeUI, + addressUI, + addressSchema, titleUI, arrayBuilderItemFirstPageTitleUI, arrayBuilderYesNoSchema, @@ -200,3 +202,29 @@ export const deceasedDependentDateOfDeathPage = { }, }, }; + +export const deceasedDependentLocationOfDeathPage = { + uiSchema: { + ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) => { + // console.log(formData); + const { first, last } = formData?.fullName; + return formData?.fullName + ? `Where did ${first} ${last} die?` + : 'Where did the dependent die?'; + }), + dependentDeathLocation: addressUI({ + labels: { + militaryCheckbox: 'This occurred outside of the U.S.', + }, + omit: ['street', 'street2', 'street3', 'country', 'postalCode'], + }), + }, + schema: { + type: 'object', + properties: { + dependentDeathLocation: addressSchema({ + omit: ['street', 'street2', 'street3', 'country', 'postalCode'], + }), + }, + }, +}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/form.js b/src/applications/disability-benefits/686c-674-v2/config/form.js index 3d34172269db..062afba99a5e 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/form.js +++ b/src/applications/disability-benefits/686c-674-v2/config/form.js @@ -1,5 +1,7 @@ import fullSchema from 'vets-json-schema/dist/686C-674-schema.json'; import environment from 'platform/utilities/environment'; +import { stringifyUrlParams } from '@department-of-veterans-affairs/platform-forms-system/helpers'; +import { getArrayIndexFromPathName } from 'platform/forms-system/src/js/patterns/array-builder/helpers'; import { arrayBuilderPages } from 'platform/forms-system/src/js/patterns/array-builder'; import FormFooter from 'platform/forms/components/FormFooter'; import { externalServices } from 'platform/monitoring/DowntimeNotification'; @@ -25,6 +27,7 @@ import { deceasedDependentChildStatusPage, deceasedDependentChildTypePage, deceasedDependentDateOfDeathPage, + deceasedDependentLocationOfDeathPage, } from './chapters/report-dependent-death/deceasedDependentArrayPages'; // dependentInformation, // deceasedDependentAdditionalInformationIntro, @@ -738,74 +741,82 @@ export const formConfig = { deceasedDependents: { title: 'Information needed to remove a dependent who has died', pages: { - ...arrayBuilderPages( - deceasedDependentOptions, - (pageBuilder, helpers) => ({ - // introPage needed for "required" flow - dependentAdditionalInformationIntro: pageBuilder.introPage({ - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - title: 'Information needed to remove a dependent who has died', - path: '686-report-dependent-death', - uiSchema: deceasedDependentIntroPage.uiSchema, - schema: deceasedDependentIntroPage.schema, - }), - dependentAdditionalInformationSummary: pageBuilder.summaryPage({ - title: 'Information needed to remove a dependent who has died', - path: '686-report-dependent-death/dependent-summary', - uiSchema: deceasedDependentSummaryPage.uiSchema, - schema: deceasedDependentSummaryPage.schema, - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - }), - dependentAdditionalInformationPartOne: pageBuilder.itemPage({ - title: 'Information needed to remove a dependent who has died', - path: '686-report-dependent-death/:index/dependent-information', - uiSchema: deceasedDependentPersonalInfoPage.uiSchema, - schema: deceasedDependentPersonalInfoPage.schema, - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - }), - dependentAdditionalInformationPartTwo: pageBuilder.itemPage({ - title: 'Information needed to remove a dependent who has died', - path: '686-report-dependent-death/:index/child-status', - uiSchema: deceasedDependentChildStatusPage.uiSchema, - schema: deceasedDependentChildStatusPage.schema, - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - onNavForward: props => { - return props.formData.dependentType === 'child' - ? helpers.navForwardKeepUrlParams(props) // go to next page - : helpers.navForwardFinishedItem(props); // return to summary - }, - }), - dependentAdditionalInformationPartThree: pageBuilder.itemPage({ - title: 'Information needed to remove a dependent who has died', - path: '686-report-dependent-death/:index/child-type', - uiSchema: deceasedDependentChildTypePage.uiSchema, - schema: deceasedDependentChildTypePage.schema, - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - // formData?.dependentType === 'child', - }), - dependentAdditionalInformationPartFour: pageBuilder.itemPage({ - title: 'Information needed to remove a dependent who has died', - path: '686-report-dependent-death/:index/date-of-death', - uiSchema: deceasedDependentDateOfDeathPage.uiSchema, - schema: deceasedDependentDateOfDeathPage.schema, - depends: formData => - isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - }), - // dependentAdditionalInformationPartThree: pageBuilder.itemPage({ - // title: 'Employer dates', - // path: 'array-multiple-page-builder/:index/dates', - // uiSchema: employersDatesPage.uiSchema, - // schema: employersDatesPage.schema, - // depends: formData => - // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - // }), + ...arrayBuilderPages(deceasedDependentOptions, pageBuilder => ({ + // introPage needed for "required" flow + dependentAdditionalInformationIntro: pageBuilder.introPage({ + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death', + uiSchema: deceasedDependentIntroPage.uiSchema, + schema: deceasedDependentIntroPage.schema, }), - ), + dependentAdditionalInformationSummary: pageBuilder.summaryPage({ + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death/dependent-summary', + uiSchema: deceasedDependentSummaryPage.uiSchema, + schema: deceasedDependentSummaryPage.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + }), + dependentAdditionalInformationPartOne: pageBuilder.itemPage({ + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death/:index/dependent-information', + uiSchema: deceasedDependentPersonalInfoPage.uiSchema, + schema: deceasedDependentPersonalInfoPage.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + }), + dependentAdditionalInformationPartTwo: pageBuilder.itemPage({ + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death/:index/child-status', + uiSchema: deceasedDependentChildStatusPage.uiSchema, + schema: deceasedDependentChildStatusPage.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + onNavForward: ({ + formData, + pathname, + urlParams, + goPath, + goNextPath, + }) => { + if (formData.dependentType !== 'child') { + const index = getArrayIndexFromPathName(pathname); + const urlParamsString = stringifyUrlParams(urlParams) || ''; + goPath( + `/686-report-dependent-death/${index}/date-of-death${urlParamsString}`, + ); + } else { + goNextPath(urlParams); + } + }, + }), + dependentAdditionalInformationPartThree: pageBuilder.itemPage({ + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death/:index/child-type', + uiSchema: deceasedDependentChildTypePage.uiSchema, + schema: deceasedDependentChildTypePage.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + }), + dependentAdditionalInformationPartFour: pageBuilder.itemPage({ + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death/:index/date-of-death', + uiSchema: deceasedDependentDateOfDeathPage.uiSchema, + schema: deceasedDependentDateOfDeathPage.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + }), + dependentAdditionalInformationPartFive: pageBuilder.itemPage({ + title: 'Information needed to remove a dependent who has died', + path: '686-report-dependent-death/:index/location-of-death', + uiSchema: deceasedDependentLocationOfDeathPage.uiSchema, + schema: deceasedDependentLocationOfDeathPage.schema, + depends: formData => + isChapterFieldRequired(formData, TASK_KEYS.reportDeath), + }), + })), // dependentInformation: { // depends: formData => // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), From 69f4cea25983230d30721a468b94596e3443edfe Mon Sep 17 00:00:00 2001 From: Midge-dev Date: Wed, 18 Sep 2024 10:45:50 -0700 Subject: [PATCH 05/15] Add array builder / Remove old files --- .../deceasedDependentArrayPages.js | 108 ++++++++------- .../dependentAdditionalInformation.js | 57 -------- .../dependentAdditionalInformationIntro.js | 60 --------- ...dependentAdditionalInformationPartThree.js | 61 --------- .../dependentAdditionalInformationPartTwo.js | 34 ----- .../helpers.js | 73 ---------- .../dependentInformation.js | 127 ------------------ .../dependent-information/helpers.js | 12 -- .../dependent-intro/deceasedDependentIntro.js | 60 --------- .../deceasedDependentOptions.js | 22 --- .../deceasedDependentSummary.js | 48 ------- .../report-dependent-death/helpers.js | 21 +++ .../chapters/report-dependent-death/index.js | 17 --- .../686c-674-v2/config/form.js | 55 -------- 14 files changed, 81 insertions(+), 674 deletions(-) delete mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformation.js delete mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationIntro.js delete mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartThree.js delete mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartTwo.js delete mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/helpers.js delete mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js delete mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/helpers.js delete mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-intro/deceasedDependentIntro.js delete mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/deceasedDependentOptions.js delete mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-summary/deceasedDependentSummary.js create mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/helpers.js delete mode 100644 src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js index af2d62b373c9..a0d49e46959b 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js @@ -1,10 +1,5 @@ +import format from 'date-fns-tz/format'; import { - // addressNoMilitarySchema, - // addressNoMilitaryUI, - // currentOrPastDateRangeSchema, - // currentOrPastDateRangeUI, - addressUI, - addressSchema, titleUI, arrayBuilderItemFirstPageTitleUI, arrayBuilderYesNoSchema, @@ -21,14 +16,16 @@ import { currentOrPastDateUI, currentOrPastDateSchema, } from 'platform/forms-system/src/js/web-component-patterns'; -// import { VaTextInputField } from 'platform/forms-system/src/js/web-component-fields'; +import VaTextInputField from 'platform/forms-system/src/js/web-component-fields/VaTextInputField'; +import VaSelectField from 'platform/forms-system/src/js/web-component-fields/VaSelectField'; +import VaCheckboxField from 'platform/forms-system/src/js/web-component-fields/VaCheckboxField'; import { relationshipEnums, relationshipLabels, childTypeEnums, childTypeLabels, - // DependentRelationshipH3, -} from './dependent-additional-information/helpers'; +} from './helpers'; +import { customLocationSchema } from '../../helpers'; /** @type {ArrayBuilderOptions} */ export const deceasedDependentOptions = { @@ -40,14 +37,23 @@ export const deceasedDependentOptions = { !item?.fullName?.first || !item?.fullName?.last || !item?.ssn || - !item?.birthDate, - // !item?.dependentType || - // !item?.childStatus || - // !item?.date, + !item?.birthDate || + !item?.dependentType || + !item?.dependentDeathLocation?.location?.city || + !item?.dependentDeathDate, maxItems: 5, text: { getItemName: item => `${item.fullName.first} ${item.fullName.last}`, - cardDescription: item => `${item?.birthDate} - ${item?.date}`, + cardDescription: item => { + const birthDate = item?.birthDate + ? format(new Date(item.birthDate), 'MM/dd/yyyy') + : 'Unknown'; + const dependentDeathDate = item?.dependentDeathDate + ? format(new Date(item.dependentDeathDate), 'MM/dd/yyyy') + : 'Unknown'; + + return `${birthDate} - ${dependentDeathDate}`; + }, }, }; @@ -69,26 +75,13 @@ export const deceasedDependentIntroPage = { /** @returns {PageSchema} */ export const deceasedDependentSummaryPage = { uiSchema: { - 'view:completedDependent': arrayBuilderYesNoUI( - deceasedDependentOptions, - // { - // title: - // 'Do you have any employment, including self-employment for the last 5 years to report?', - // hint: - // 'Include self-employment and military duty (including inactive duty for training).', - // labels: { - // Y: 'Yes, I have employment to report', - // N: 'No, I don’t have employment to report', - // }, - // }, - { - title: 'Do you have another deceased dependent to report?', - labels: { - Y: 'Yes, I have another dependent to report', - N: 'No, I don’t have another dependent to report', - }, + 'view:completedDependent': arrayBuilderYesNoUI(deceasedDependentOptions, { + title: 'Do you have another deceased dependent to report?', + labels: { + Y: 'Yes, I have another dependent to report', + N: 'No, I don’t have another dependent to report', }, - ), + }), }, schema: { type: 'object', @@ -130,13 +123,11 @@ export const deceasedDependentPersonalInfoPage = { export const deceasedDependentChildStatusPage = { uiSchema: { ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) => { - // console.log(formData); const { first, last } = formData?.fullName; return formData?.fullName ? `Your relationship to ${first} ${last}` : 'Your relationship to the deceased dependent'; }), - // 'ui:title': DependentRelationshipH3, dependentType: { ...radioUI({ title: 'What was your relationship to the dependent?', @@ -157,7 +148,6 @@ export const deceasedDependentChildStatusPage = { export const deceasedDependentChildTypePage = { uiSchema: { ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) => { - // console.log(formData); const { first, last } = formData?.fullName; return formData?.fullName ? `Your relationship to ${first} ${last}` @@ -169,8 +159,10 @@ export const deceasedDependentChildTypePage = { required: formData => formData?.dependentType === 'child', labels: childTypeLabels, }), - // 'ui:required': (formData, index) => - // formData?.deaths[index]?.dependentType === 'child', + // 'ui:required': formData => { + // console.log(formData); + // return formData?.dependentType === 'child'; + // }, }, }, schema: { @@ -184,7 +176,6 @@ export const deceasedDependentChildTypePage = { export const deceasedDependentDateOfDeathPage = { uiSchema: { ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) => { - // console.log(formData); const { first, last } = formData?.fullName; return formData?.fullName ? `When did ${first} ${last} die?` @@ -206,25 +197,46 @@ export const deceasedDependentDateOfDeathPage = { export const deceasedDependentLocationOfDeathPage = { uiSchema: { ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) => { - // console.log(formData); const { first, last } = formData?.fullName; return formData?.fullName ? `Where did ${first} ${last} die?` : 'Where did the dependent die?'; }), - dependentDeathLocation: addressUI({ - labels: { - militaryCheckbox: 'This occurred outside of the U.S.', + dependentDeathLocation: { + outsideUsa: { + 'ui:title': 'This occurred outside the U.S.', + 'ui:webComponentField': VaCheckboxField, }, - omit: ['street', 'street2', 'street3', 'country', 'postalCode'], - }), + location: { + city: { + 'ui:title': 'City', + 'ui:required': () => true, + 'ui:autocomplete': 'address-level2', + 'ui:errorMessages': { + required: 'Enter the city where the dependent died', + }, + 'ui:webComponentField': VaTextInputField, + }, + + state: { + 'ui:title': 'State', + 'ui:webComponentField': VaSelectField, + 'ui:required': itemData => + !itemData?.dependentDeathLocation?.outsideUsa, + 'ui:errorMessages': { + required: 'Select a state', + }, + 'ui:options': { + hideIf: itemData => itemData?.dependentDeathLocation?.outsideUsa, + }, + }, + }, + }, }, schema: { type: 'object', properties: { - dependentDeathLocation: addressSchema({ - omit: ['street', 'street2', 'street3', 'country', 'postalCode'], - }), + dependentDeathLocation: customLocationSchema, }, }, }; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformation.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformation.js deleted file mode 100644 index a85cd542baf1..000000000000 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformation.js +++ /dev/null @@ -1,57 +0,0 @@ -import { - radioUI, - radioSchema, - checkboxGroupUI, - checkboxGroupSchema, -} from 'platform/forms-system/src/js/web-component-patterns'; -import { - childTypeEnums, - childTypeLabels, - DependentRelationshipH3, - relationshipEnums, - relationshipLabels, -} from './helpers'; - -export const schema = { - type: 'object', - properties: { - deaths: { - type: 'array', - minItems: 1, - maxItems: 100, - items: { - type: 'object', - properties: { - dependentType: radioSchema(relationshipEnums), - childStatus: checkboxGroupSchema(childTypeEnums), - }, - }, - }, - }, -}; - -export const uiSchema = { - deaths: { - items: { - 'ui:title': DependentRelationshipH3, - dependentType: radioUI({ - title: 'What was your relationship to the dependent?', - required: () => true, - labels: relationshipLabels, - }), - childStatus: { - ...checkboxGroupUI({ - title: 'What type of child?', - required: formData => formData?.dependentType === 'child', - labels: childTypeLabels, - }), - 'ui:required': (formData, index) => - formData?.deaths[index]?.dependentType === 'child', - 'ui:options': { - expandUnder: 'dependentType', - expandUnderCondition: 'child', - }, - }, - }, - }, -}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationIntro.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationIntro.js deleted file mode 100644 index ff5740a21658..000000000000 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationIntro.js +++ /dev/null @@ -1,60 +0,0 @@ -import { - arrayBuilderItemFirstPageTitleUI, - // arrayBuilderItemSubsequentPageTitleUI, - // arrayBuilderYesNoSchema, - // arrayBuilderYesNoUI, - // currentOrPastDateSchema, - // currentOrPastDateUI, - // textUI, - // textSchema, -} from '~/platform/forms-system/src/js/web-component-patterns'; -// import { arrayBuilderPages } from '~/platform/forms-system/src/js/patterns/array-builder'; -// import { formatReviewDate } from 'platform/forms-system/src/js/helpers'; -// import { generateTransition } from '../../../helpers'; - -// export const schema = { -// type: 'object', -// properties: { -// 'view:dependentsAdditionalInfo': { -// type: 'object', -// properties: {}, -// }, -// }, -// }; - -// export const uiSchema = { -// 'view:dependentsAdditionalInfo': { -// 'ui:description': generateTransition( -// 'Now we’re going to ask you some follow-up questions about each of your dependents who have died. We’ll go through them one by one.', -// ), -// 'ui:options': { -// hideOnReview: true, -// }, -// }, -// }; - -export const schema = { - type: 'object', - properties: {}, -}; - -export const uiSchema = { - ...arrayBuilderItemFirstPageTitleUI( - 'Dependents who have died', - 'In the next few questions, we’ll ask you about your dependents who have died. You must add at least one dependent. You may add up to 5 dependents.', - ), -}; - -// /** @returns {PageSchema} */ -// export default { -// uiSchema: { -// ...arrayBuilderItemFirstPageTitleUI( -// 'Dependents who have died', -// 'In the next few questions, we’ll ask you about your dependents who have died. You must add at least one dependent. You may add up to 5 dependents.', -// ), -// }, -// schema: { -// type: 'object', -// properties: {}, -// }, -// }; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartThree.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartThree.js deleted file mode 100644 index e16d9e62bd34..000000000000 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartThree.js +++ /dev/null @@ -1,61 +0,0 @@ -import VaTextInputField from 'platform/forms-system/src/js/web-component-fields/VaTextInputField'; -import VaSelectField from 'platform/forms-system/src/js/web-component-fields/VaSelectField'; -import VaCheckboxField from 'platform/forms-system/src/js/web-component-fields/VaCheckboxField'; -import { customLocationSchema } from '../../../helpers'; -import { DependentDeceasedWhereH3 } from './helpers'; - -export const schema = { - type: 'object', - properties: { - deaths: { - type: 'array', - minItems: 1, - maxItems: 100, - items: { - type: 'object', - properties: { - dependentDeathLocation: customLocationSchema, - }, - }, - }, - }, -}; - -export const uiSchema = { - deaths: { - items: { - 'ui:title': DependentDeceasedWhereH3, - dependentDeathLocation: { - outsideUsa: { - 'ui:title': 'This occurred outside the U.S.', - 'ui:webComponentField': VaCheckboxField, - }, - location: { - city: { - 'ui:title': 'City', - 'ui:required': () => true, - 'ui:autocomplete': 'address-level2', - 'ui:errorMessages': { - required: 'Enter the city where you were married', - }, - 'ui:webComponentField': VaTextInputField, - }, - - state: { - 'ui:title': 'State', - 'ui:webComponentField': VaSelectField, - 'ui:required': (formData, index) => - !formData?.deaths[index]?.dependentDeathLocation?.outsideUsa, - 'ui:errorMessages': { - required: 'Select a state', - }, - 'ui:options': { - hideIf: (formData, index) => - formData?.deaths[index]?.dependentDeathLocation?.outsideUsa, - }, - }, - }, - }, - }, - }, -}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartTwo.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartTwo.js deleted file mode 100644 index ccb6bc78e2e2..000000000000 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/dependentAdditionalInformationPartTwo.js +++ /dev/null @@ -1,34 +0,0 @@ -import { - currentOrPastDateUI, - currentOrPastDateSchema, -} from 'platform/forms-system/src/js/web-component-patterns'; -import { DependentDeceasedWhenH3 } from './helpers'; - -export const schema = { - type: 'object', - properties: { - deaths: { - type: 'array', - minItems: 1, - maxItems: 100, - items: { - type: 'object', - properties: { - dependentDeathDate: currentOrPastDateSchema, - }, - }, - }, - }, -}; - -export const uiSchema = { - deaths: { - items: { - 'ui:title': DependentDeceasedWhenH3, - dependentDeathDate: currentOrPastDateUI({ - title: 'Date of death', - required: () => true, - }), - }, - }, -}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/helpers.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/helpers.js deleted file mode 100644 index 65425b87d590..000000000000 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-additional-information/helpers.js +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; -import { capitalize } from 'lodash'; - -export const relationshipEnums = ['spouse', 'parent', 'child']; -export const relationshipLabels = { - spouse: 'Spouse', - parent: 'Dependent parent', - child: 'Child', -}; - -export const childTypeEnums = [ - 'childUnder18', - 'stepChild', - 'adopted', - 'disabled', - 'childOver18InSchool', -]; -export const childTypeLabels = { - childUnder18: 'Child under 18', - stepChild: 'Stepchild', - adopted: 'Adopted child', - disabled: 'Child incapable of self-support', - childOver18InSchool: 'Child 18-23 and in school', -}; - -export const DependentNameHeader = ({ formData }) => { - const { first, last } = formData.fullName; - return ( -
-

- {first[0].toUpperCase()} - {first.slice(1).toLowerCase()} {last[0].toUpperCase()} - {last.slice(1).toLowerCase()} -

-
- ); -}; - -export const DependentRelationshipH3 = ({ formData }) => { - const { first, last } = formData.fullName; - - return ( - -

- Your relationship to {capitalize(first)} {capitalize(last)} -

- - ); -}; - -export const DependentDeceasedWhenH3 = ({ formData }) => { - const { first, last } = formData.fullName; - - return ( - -

- When did {capitalize(first)} {capitalize(last)} die? -

- - ); -}; - -export const DependentDeceasedWhereH3 = ({ formData }) => { - const { first, last } = formData.fullName; - - return ( - -

- Where did {capitalize(first)} {capitalize(last)} die? -

- - ); -}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js deleted file mode 100644 index 255bfeafc6b2..000000000000 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/dependentInformation.js +++ /dev/null @@ -1,127 +0,0 @@ -import { - // addressNoMilitarySchema, - // addressNoMilitaryUI, - // currentOrPastDateRangeSchema, - // currentOrPastDateRangeUI, - // titleUI, - fullNameNoSuffixUI, - fullNameNoSuffixSchema, - ssnUI, - ssnSchema, - currentOrPastDateUI, - currentOrPastDateSchema, - arrayBuilderItemFirstPageTitleUI, - // arrayBuilderYesNoSchema, - // arrayBuilderYesNoUI, - // arrayBuilderItemSubsequentPageTitleUI, -} from 'platform/forms-system/src/js/web-component-patterns'; -// import { VaTextInputField } from 'platform/forms-system/src/js/web-component-fields'; -// import ArrayViewField from '../../../../components/ArrayViewField'; -import dependentOptions from '../dependent-options/deceasedDependentOptions'; - -// export const schema = { -// type: 'object', -// properties: { -// deaths: { -// type: 'array', -// minItems: 1, -// maxItems: 100, -// items: { -// type: 'object', -// properties: { -// fullName: fullNameNoSuffixSchema, -// ssn: ssnSchema, -// birthDate: currentOrPastDateSchema, -// }, -// }, -// }, -// }, -// }; - -// export const uiSchema = { -// ...titleUI('Dependents who have died'), -// deaths: { -// 'ui:options': { -// viewField: ArrayViewField, -// itemName: 'Dependent who has died', -// keepInPageOnReview: true, -// customTitle: ' ', -// }, -// items: { -// fullName: fullNameNoSuffixUI(), -// ssn: { -// ...ssnUI('Dependent’s Social Security number'), -// 'ui:required': () => true, -// }, -// birthDate: currentOrPastDateUI({ -// title: 'Dependent’s date of birth', -// required: () => true, -// }), -// }, -// }, -// }; - -// export const schema = { -// type: 'object', -// properties: { -// deaths: { -// type: 'array', -// minItems: 1, -// maxItems: 100, -// items: { -// type: 'object', -// properties: { -// fullName: fullNameNoSuffixSchema, -// ssn: ssnSchema, -// birthDate: currentOrPastDateSchema, -// }, -// }, -// }, -// }, -// }; - -// export const uiSchema = { -// ...arrayBuilderItemFirstPageTitleUI({ -// title: 'Dependent who has died', -// nounSingular: dependentOptions.nounSingular, -// }), -// fullName: fullNameNoSuffixUI(), -// ssn: { -// ...ssnUI('Dependent’s Social Security number'), -// 'ui:required': () => true, -// }, -// birthDate: currentOrPastDateUI({ -// title: 'Dependent’s date of birth', -// required: () => true, -// }), -// }; - -/** @returns {PageSchema} */ -const dependentInformation = { - uiSchema: { - ...arrayBuilderItemFirstPageTitleUI({ - title: 'Dependent who has died', - nounSingular: dependentOptions.nounSingular, - }), - fullName: fullNameNoSuffixUI(), - ssn: { - ...ssnUI('Dependent’s Social Security number'), - 'ui:required': () => true, - }, - birthDate: currentOrPastDateUI({ - title: 'Dependent’s date of birth', - required: () => true, - }), - }, - schema: { - type: 'object', - properties: { - fullName: fullNameNoSuffixSchema, - ssn: ssnSchema, - birthDate: currentOrPastDateSchema, - }, - // required: ['name'], - }, -}; - -export default dependentInformation; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/helpers.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/helpers.js deleted file mode 100644 index a334b36db4af..000000000000 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-information/helpers.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -export function childInfo({ formData }) { - return ( -
- - {formData.first} {formData.last} - -
-
- ); -} diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-intro/deceasedDependentIntro.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-intro/deceasedDependentIntro.js deleted file mode 100644 index 48dc7c5efb0e..000000000000 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-intro/deceasedDependentIntro.js +++ /dev/null @@ -1,60 +0,0 @@ -import { - arrayBuilderItemFirstPageTitleUI, - // arrayBuilderItemSubsequentPageTitleUI, - // arrayBuilderYesNoSchema, - // arrayBuilderYesNoUI, - // currentOrPastDateSchema, - // currentOrPastDateUI, - // textUI, - // textSchema, -} from '~/platform/forms-system/src/js/web-component-patterns'; -// import { arrayBuilderPages } from '~/platform/forms-system/src/js/patterns/array-builder'; -// import { formatReviewDate } from 'platform/forms-system/src/js/helpers'; -// import { generateTransition } from '../../../helpers'; - -// export const schema = { -// type: 'object', -// properties: { -// 'view:dependentsAdditionalInfo': { -// type: 'object', -// properties: {}, -// }, -// }, -// }; - -// export const uiSchema = { -// 'view:dependentsAdditionalInfo': { -// 'ui:description': generateTransition( -// 'Now we’re going to ask you some follow-up questions about each of your dependents who have died. We’ll go through them one by one.', -// ), -// 'ui:options': { -// hideOnReview: true, -// }, -// }, -// }; - -// export const schema = { -// type: 'object', -// properties: {}, -// }; - -// export const uiSchema = { -// ...arrayBuilderItemFirstPageTitleUI( -// 'Dependents who have died', -// 'In the next few questions, we’ll ask you about your dependents who have died. You must add at least one dependent. You may add up to 5 dependents.', -// ), -// }; - -/** @returns {PageSchema} */ -export default { - uiSchema: { - ...arrayBuilderItemFirstPageTitleUI( - 'Dependents who have died', - 'In the next few questions, we’ll ask you about your dependents who have died. You must add at least one dependent. You may add up to 5 dependents.', - ), - }, - schema: { - type: 'object', - properties: {}, - }, -}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/deceasedDependentOptions.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/deceasedDependentOptions.js deleted file mode 100644 index 4cb5da7f2390..000000000000 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-options/deceasedDependentOptions.js +++ /dev/null @@ -1,22 +0,0 @@ -/** @type {ArrayBuilderOptions} */ -const deceasedDependentOptions = { - arrayPath: 'deaths', - nounSingular: 'dependent', - nounPlural: 'dependents', - required: formData => formData?.arrayBuilderPatternFlowType === 'required', - isItemIncomplete: item => - !item?.fullName?.first || - !item?.fullName?.last || - !item?.ssn || - !item?.birthDate || - !item?.dependentType || - !item?.childStatus || - !item?.date, - maxItems: 5, - text: { - getItemName: item => item.name, - cardDescription: item => `${item?.birthDate} - ${item?.date}`, - }, -}; - -export default deceasedDependentOptions; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-summary/deceasedDependentSummary.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-summary/deceasedDependentSummary.js deleted file mode 100644 index fa39c001f503..000000000000 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/dependent-summary/deceasedDependentSummary.js +++ /dev/null @@ -1,48 +0,0 @@ -import { - // addressNoMilitarySchema, - // addressNoMilitaryUI, - // currentOrPastDateRangeSchema, - // currentOrPastDateRangeUI, - // titleUI, - // arrayBuilderItemFirstPageTitleUI, - arrayBuilderYesNoSchema, - arrayBuilderYesNoUI, - // arrayBuilderItemSubsequentPageTitleUI, -} from 'platform/forms-system/src/js/web-component-patterns'; -// import { VaTextInputField } from 'platform/forms-system/src/js/web-component-fields'; -import dependentOptions from '../dependent-options/deceasedDependentOptions'; - -/** @returns {PageSchema} */ -const deceasedDependentSummaryPage = { - uiSchema: { - 'view:completedDependent': arrayBuilderYesNoUI( - dependentOptions, - // { - // title: - // 'Do you have any employment, including self-employment for the last 5 years to report?', - // hint: - // 'Include self-employment and military duty (including inactive duty for training).', - // labels: { - // Y: 'Yes, I have employment to report', - // N: 'No, I don’t have employment to report', - // }, - // }, - { - title: 'Do you have another deceased dependent to report?', - labels: { - Y: 'Yes, I have another dependent to report', - N: 'No, I don’t have another dependent to report', - }, - }, - ), - }, - schema: { - type: 'object', - properties: { - 'view:hasEmployment': arrayBuilderYesNoSchema, - }, - required: ['view:completedDependent'], - }, -}; - -export default deceasedDependentSummaryPage; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/helpers.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/helpers.js new file mode 100644 index 000000000000..83a2d7cf6e6e --- /dev/null +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/helpers.js @@ -0,0 +1,21 @@ +export const relationshipEnums = ['spouse', 'parent', 'child']; +export const relationshipLabels = { + spouse: 'Spouse', + parent: 'Dependent parent', + child: 'Child', +}; + +export const childTypeEnums = [ + 'childUnder18', + 'stepChild', + 'adopted', + 'disabled', + 'childOver18InSchool', +]; +export const childTypeLabels = { + childUnder18: 'Child under 18', + stepChild: 'Stepchild', + adopted: 'Adopted child', + disabled: 'Child incapable of self-support', + childOver18InSchool: 'Child 18-23 and in school', +}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js deleted file mode 100644 index 4d486d35039d..000000000000 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import dependentInformation from './dependent-information/dependentInformation'; -import * as deceasedDependentAdditionalInformationIntro from './dependent-additional-information/dependentAdditionalInformationIntro'; -import * as deceasedDependentAdditionalInformation from './dependent-additional-information/dependentAdditionalInformation'; -import * as deceasedDependentAdditionalInformationPartTwo from './dependent-additional-information/dependentAdditionalInformationPartTwo'; -import * as deceasedDependentAdditionalInformationPartThree from './dependent-additional-information/dependentAdditionalInformationPartThree'; -import deceasedDependentSummary from './dependent-summary/deceasedDependentSummary'; -import deceasedDependentIntro from './dependent-intro/deceasedDependentIntro'; - -export { - dependentInformation, - deceasedDependentAdditionalInformationIntro, - deceasedDependentAdditionalInformation, - deceasedDependentAdditionalInformationPartTwo, - deceasedDependentAdditionalInformationPartThree, - deceasedDependentSummary, - deceasedDependentIntro, -}; diff --git a/src/applications/disability-benefits/686c-674-v2/config/form.js b/src/applications/disability-benefits/686c-674-v2/config/form.js index 062afba99a5e..5eef845ff451 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/form.js +++ b/src/applications/disability-benefits/686c-674-v2/config/form.js @@ -29,14 +29,6 @@ import { deceasedDependentDateOfDeathPage, deceasedDependentLocationOfDeathPage, } from './chapters/report-dependent-death/deceasedDependentArrayPages'; -// dependentInformation, -// deceasedDependentAdditionalInformationIntro, -// deceasedDependentAdditionalInformation, -// deceasedDependentAdditionalInformationPartTwo, -// deceasedDependentAdditionalInformationPartThree, -// deceasedDependentIntro, -// deceasedDependentSummary, -// } from './chapters/report-dependent-death'; import { reportChildMarriage } from './chapters/report-marriage-of-child'; import { reportChildStoppedAttendingSchool } from './chapters/report-child-stopped-attending-school'; import { @@ -742,7 +734,6 @@ export const formConfig = { title: 'Information needed to remove a dependent who has died', pages: { ...arrayBuilderPages(deceasedDependentOptions, pageBuilder => ({ - // introPage needed for "required" flow dependentAdditionalInformationIntro: pageBuilder.introPage({ depends: formData => isChapterFieldRequired(formData, TASK_KEYS.reportDeath), @@ -817,52 +808,6 @@ export const formConfig = { isChapterFieldRequired(formData, TASK_KEYS.reportDeath), }), })), - // dependentInformation: { - // depends: formData => - // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - // title: 'Report the death of a dependent: Basic information', - // path: '686-report-dependent-death', - // uiSchema: deceasedDependentInformation.uiSchema, - // schema: deceasedDependentInformation.schema, - // }, - // dependentAdditionalInformationView: { - // depends: formData => - // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - // title: 'Report the death of a dependent: Additional information', - // path: '686-report-dependent-death/additional-information', - // uiSchema: deceasedDependentAdditionalInformationView.uiSchema, - // schema: deceasedDependentAdditionalInformationView.schema, - // }, - // dependentAdditionalInformation: { - // depends: formData => - // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - // title: 'Report the death of a dependent: Additional information', - // path: '686-report-dependent-death/:index/dependent-information', - // showPagePerItem: true, - // arrayPath: 'deaths', - // uiSchema: deceasedDependentAdditionalInformation.uiSchema, - // schema: deceasedDependentAdditionalInformation.schema, - // }, - // dependentAdditionalInformationPartTwo: { - // depends: formData => - // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - // title: 'Report the death of a dependent: Additional information', - // path: '686-report-dependent-death/:index/dependent-date-of-death', - // showPagePerItem: true, - // arrayPath: 'deaths', - // uiSchema: deceasedDependentAdditionalInformationPartTwo.uiSchema, - // schema: deceasedDependentAdditionalInformationPartTwo.schema, - // }, - // dependentAdditionalInformationPartThree: { - // depends: formData => - // isChapterFieldRequired(formData, TASK_KEYS.reportDeath), - // title: 'Report the death of a dependent: Additional information', - // path: '686-report-dependent-death/:index/dependent-death-location', - // showPagePerItem: true, - // arrayPath: 'deaths', - // uiSchema: deceasedDependentAdditionalInformationPartThree.uiSchema, - // schema: deceasedDependentAdditionalInformationPartThree.schema, - // }, }, }, From dc720bbc11095321c58bce4a2b843f16527152d8 Mon Sep 17 00:00:00 2001 From: Midge-dev Date: Thu, 19 Sep 2024 14:03:40 -0700 Subject: [PATCH 06/15] Array builder required checkboxes attempt 1 --- .../deceasedDependentArrayPages.js | 39 ++++++++++++------- .../deceasedDependentsArray.unit.spec.js | 0 2 files changed, 25 insertions(+), 14 deletions(-) create mode 100644 src/applications/disability-benefits/686c-674-v2/tests/config/chapters/report-dependent-death/deceasedDependentsArray.unit.spec.js diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js index a0d49e46959b..bdaf2a7ca27d 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js @@ -43,7 +43,8 @@ export const deceasedDependentOptions = { !item?.dependentDeathDate, maxItems: 5, text: { - getItemName: item => `${item.fullName.first} ${item.fullName.last}`, + getItemName: item => + `${item.fullName?.first || ''} ${item.fullName?.last || ''}`, cardDescription: item => { const birthDate = item?.birthDate ? format(new Date(item.birthDate), 'MM/dd/yyyy') @@ -123,8 +124,10 @@ export const deceasedDependentPersonalInfoPage = { export const deceasedDependentChildStatusPage = { uiSchema: { ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) => { - const { first, last } = formData?.fullName; - return formData?.fullName + const fullName = formData?.fullName || {}; + const { first = '', last = '' } = fullName; + + return first && last ? `Your relationship to ${first} ${last}` : 'Your relationship to the deceased dependent'; }), @@ -148,21 +151,25 @@ export const deceasedDependentChildStatusPage = { export const deceasedDependentChildTypePage = { uiSchema: { ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) => { - const { first, last } = formData?.fullName; - return formData?.fullName + const fullName = formData?.fullName || {}; + const { first = '', last = '' } = fullName; + + return first && last ? `Your relationship to ${first} ${last}` : 'Your relationship to the deceased dependent'; }), childStatus: { ...checkboxGroupUI({ title: 'What type of child?', - required: formData => formData?.dependentType === 'child', + required: formData => { + return formData?.dependentType === 'child'; + }, labels: childTypeLabels, }), - // 'ui:required': formData => { - // console.log(formData); - // return formData?.dependentType === 'child'; - // }, + // ...(window.location.search.includes('add=true') + // ? { 'ui:required': () => true } + // : {}), + // 'ui:required': () => true, }, }, schema: { @@ -176,8 +183,10 @@ export const deceasedDependentChildTypePage = { export const deceasedDependentDateOfDeathPage = { uiSchema: { ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) => { - const { first, last } = formData?.fullName; - return formData?.fullName + const fullName = formData?.fullName || {}; + const { first = '', last = '' } = fullName; + + return first && last ? `When did ${first} ${last} die?` : 'When did the dependent die?'; }), @@ -197,8 +206,10 @@ export const deceasedDependentDateOfDeathPage = { export const deceasedDependentLocationOfDeathPage = { uiSchema: { ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) => { - const { first, last } = formData?.fullName; - return formData?.fullName + const fullName = formData?.fullName || {}; + const { first = '', last = '' } = fullName; + + return first && last ? `Where did ${first} ${last} die?` : 'Where did the dependent die?'; }), diff --git a/src/applications/disability-benefits/686c-674-v2/tests/config/chapters/report-dependent-death/deceasedDependentsArray.unit.spec.js b/src/applications/disability-benefits/686c-674-v2/tests/config/chapters/report-dependent-death/deceasedDependentsArray.unit.spec.js new file mode 100644 index 000000000000..e69de29bb2d1 From 19d5fb359cffa6d0a3d5f2815e6836320e2f0176 Mon Sep 17 00:00:00 2001 From: Midge-dev Date: Fri, 20 Sep 2024 12:15:18 -0700 Subject: [PATCH 07/15] Custom location component scaffold --- .../686c-674-v2/components/CustomLocation.jsx | 57 +++++++++++ .../deceasedDependentArrayPages.js | 97 ++++++++++--------- 2 files changed, 108 insertions(+), 46 deletions(-) create mode 100644 src/applications/disability-benefits/686c-674-v2/components/CustomLocation.jsx diff --git a/src/applications/disability-benefits/686c-674-v2/components/CustomLocation.jsx b/src/applications/disability-benefits/686c-674-v2/components/CustomLocation.jsx new file mode 100644 index 000000000000..f354a12af08a --- /dev/null +++ b/src/applications/disability-benefits/686c-674-v2/components/CustomLocation.jsx @@ -0,0 +1,57 @@ +import React, { useState } from 'react'; +// import { useSelector, useDispatch } from 'react-redux'; +import constants from 'vets-json-schema/dist/constants.json'; +import { + VaTextInput, + VaSelect, + VaCheckbox, +} from '@department-of-veterans-affairs/component-library/dist/react-bindings'; + +const MILITARY_STATE_VALUES = constants.militaryStates.map( + state => state.value, +); +const filteredStates = constants.states.USA.filter( + state => !MILITARY_STATE_VALUES.includes(state.value), +); + +const STATE_VALUES = filteredStates.map(state => state.value); +const STATE_NAMES = filteredStates.map(state => state.label); + +export default function CustomLocation({ checkboxLabel }) { + // const dispatch = useDispatch(); + // const formData = useSelector(state => state.form.data); + + const [inert, setInert] = useState(false); + + const handleCheckboxChange = event => { + setInert(event.target.checked); + }; + + return ( + <> + + + + {STATE_NAMES.map((name, index) => ( + + ))} + + + ); +} diff --git a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js index bdaf2a7ca27d..96d2dbb3861c 100644 --- a/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js +++ b/src/applications/disability-benefits/686c-674-v2/config/chapters/report-dependent-death/deceasedDependentArrayPages.js @@ -1,4 +1,6 @@ +import React from 'react'; import format from 'date-fns-tz/format'; +import { capitalize } from 'lodash'; import { titleUI, arrayBuilderItemFirstPageTitleUI, @@ -16,16 +18,17 @@ import { currentOrPastDateUI, currentOrPastDateSchema, } from 'platform/forms-system/src/js/web-component-patterns'; -import VaTextInputField from 'platform/forms-system/src/js/web-component-fields/VaTextInputField'; -import VaSelectField from 'platform/forms-system/src/js/web-component-fields/VaSelectField'; -import VaCheckboxField from 'platform/forms-system/src/js/web-component-fields/VaCheckboxField'; +// import VaTextInputField from 'platform/forms-system/src/js/web-component-fields/VaTextInputField'; +// import VaSelectField from 'platform/forms-system/src/js/web-component-fields/VaSelectField'; +// import VaCheckboxField from 'platform/forms-system/src/js/web-component-fields/VaCheckboxField'; import { relationshipEnums, relationshipLabels, childTypeEnums, childTypeLabels, } from './helpers'; -import { customLocationSchema } from '../../helpers'; +// import { customLocationSchema } from '../../helpers'; +import CustomLocation from '../../../components/CustomLocation'; /** @type {ArrayBuilderOptions} */ export const deceasedDependentOptions = { @@ -41,10 +44,12 @@ export const deceasedDependentOptions = { !item?.dependentType || !item?.dependentDeathLocation?.location?.city || !item?.dependentDeathDate, - maxItems: 5, + maxItems: 7, text: { getItemName: item => - `${item.fullName?.first || ''} ${item.fullName?.last || ''}`, + `${capitalize(item.fullName?.first) || ''} ${capitalize( + item.fullName?.last, + ) || ''}`, cardDescription: item => { const birthDate = item?.birthDate ? format(new Date(item.birthDate), 'MM/dd/yyyy') @@ -128,7 +133,7 @@ export const deceasedDependentChildStatusPage = { const { first = '', last = '' } = fullName; return first && last - ? `Your relationship to ${first} ${last}` + ? `Your relationship to ${capitalize(first)} ${capitalize(last)}` : 'Your relationship to the deceased dependent'; }), dependentType: { @@ -155,21 +160,15 @@ export const deceasedDependentChildTypePage = { const { first = '', last = '' } = fullName; return first && last - ? `Your relationship to ${first} ${last}` + ? `Your relationship to ${capitalize(first)} ${capitalize(last)}` : 'Your relationship to the deceased dependent'; }), childStatus: { ...checkboxGroupUI({ title: 'What type of child?', - required: formData => { - return formData?.dependentType === 'child'; - }, + required: () => true, labels: childTypeLabels, }), - // ...(window.location.search.includes('add=true') - // ? { 'ui:required': () => true } - // : {}), - // 'ui:required': () => true, }, }, schema: { @@ -187,7 +186,7 @@ export const deceasedDependentDateOfDeathPage = { const { first = '', last = '' } = fullName; return first && last - ? `When did ${first} ${last} die?` + ? `When did ${capitalize(first)} ${capitalize(last)} die?` : 'When did the dependent die?'; }), dependentDeathDate: currentOrPastDateUI({ @@ -210,44 +209,50 @@ export const deceasedDependentLocationOfDeathPage = { const { first = '', last = '' } = fullName; return first && last - ? `Where did ${first} ${last} die?` + ? `Where did ${capitalize(first)} ${capitalize(last)} die?` : 'Where did the dependent die?'; }), - dependentDeathLocation: { - outsideUsa: { - 'ui:title': 'This occurred outside the U.S.', - 'ui:webComponentField': VaCheckboxField, - }, - location: { - city: { - 'ui:title': 'City', - 'ui:required': () => true, - 'ui:autocomplete': 'address-level2', - 'ui:errorMessages': { - required: 'Enter the city where the dependent died', - }, - 'ui:webComponentField': VaTextInputField, - }, + // dependentDeathLocation: { + // outsideUsa: { + // 'ui:title': 'This occurred outside the U.S.', + // 'ui:webComponentField': VaCheckboxField, + // }, + // location: { + // city: { + // 'ui:title': 'City', + // 'ui:required': () => true, + // 'ui:autocomplete': 'address-level2', + // 'ui:errorMessages': { + // required: 'Enter the city where the dependent died', + // }, + // 'ui:webComponentField': VaTextInputField, + // }, - state: { - 'ui:title': 'State', - 'ui:webComponentField': VaSelectField, - 'ui:required': itemData => - !itemData?.dependentDeathLocation?.outsideUsa, - 'ui:errorMessages': { - required: 'Select a state', - }, - 'ui:options': { - hideIf: itemData => itemData?.dependentDeathLocation?.outsideUsa, - }, - }, - }, + // state: { + // 'ui:title': 'State', + // 'ui:webComponentField': VaSelectField, + // 'ui:required': itemData => + // !itemData?.dependentDeathLocation?.outsideUsa, + // 'ui:errorMessages': { + // required: 'Select a state', + // }, + // }, + // }, + // }, + dependentDeathLocation: { + 'ui:description': ( + + ), }, }, schema: { type: 'object', properties: { - dependentDeathLocation: customLocationSchema, + // dependentDeathLocation: customLocationSchema, + dependentDeathLocation: { + type: 'object', + properties: {}, + }, }, }, }; From 24b07872fe8045bd34b1a178fb5f86c64a134b65 Mon Sep 17 00:00:00 2001 From: Midge-dev Date: Mon, 23 Sep 2024 11:49:53 -0700 Subject: [PATCH 08/15] Custom location component concept --- .../686c-674-v2/components/CustomLocation.jsx | 13 +++++++++++-- .../deceasedDependentArrayPages.js | 7 +++++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/applications/disability-benefits/686c-674-v2/components/CustomLocation.jsx b/src/applications/disability-benefits/686c-674-v2/components/CustomLocation.jsx index f354a12af08a..303bb0b10160 100644 --- a/src/applications/disability-benefits/686c-674-v2/components/CustomLocation.jsx +++ b/src/applications/disability-benefits/686c-674-v2/components/CustomLocation.jsx @@ -17,7 +17,7 @@ const filteredStates = constants.states.USA.filter( const STATE_VALUES = filteredStates.map(state => state.value); const STATE_NAMES = filteredStates.map(state => state.label); -export default function CustomLocation({ checkboxLabel }) { +export default function CustomLocation({ checkboxLabel, onChange }) { // const dispatch = useDispatch(); // const formData = useSelector(state => state.form.data); @@ -25,10 +25,17 @@ export default function CustomLocation({ checkboxLabel }) { const handleCheckboxChange = event => { setInert(event.target.checked); + onChange(); }; + // 1. onChange of any of these should POST current data to /v0/in_progress_forms/686C-674-V2 + // action: SET_AUTO_SAVE_FORM_STATUS + // 2. reset VaSelect to undefined upon going inert + // 3. hook up formData props to all + return ( <> + {/* property name: outsideUsa */} + {/* property name: location.city */} - + {/* property name: location.state */} + {STATE_NAMES.map((name, index) => (