Multiple page dependent children (#30681)

* Add multipage feature toggle * Add feature toggle to session storage * Add dependent child information * Add child household information * Skip keyboard only kitchen sink test * Update page titles * Update isItemIncomplete * Update prop types * Update summary title * Use advanced routing helper for conditional page * Revert page titles * Update view only field name
department-of-veterans-affairs · Jul 15, 2024 · df7e9b6 · df7e9b6
1 parent 7341364
commit df7e9b6
Show file tree

Hide file tree

Showing 15 changed files with 496 additions and 31 deletions.
diff --git a/src/applications/pensions/PensionsApp.jsx b/src/applications/pensions/PensionsApp.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
@@ -12,6 +12,9 @@ import { submit } from './config/submit';
 export default function PensionEntry({ location, children }) {
   const { useToggleValue, TOGGLE_NAMES } = useFeatureToggle();
   const pensionFormEnabled = useToggleValue(TOGGLE_NAMES.pensionFormEnabled);
+  const pensionMultiplePageResponse = useToggleValue(
+    TOGGLE_NAMES.pensionMultiplePageResponse,
+  );
   const pensionModuleEnabled = useToggleValue(
     TOGGLE_NAMES.pensionModuleEnabled,
   );
@@ -28,6 +31,18 @@ export default function PensionEntry({ location, children }) {
   // Add Datadog UX monitoring to the application
   useBrowserMonitoring();
 
+  useEffect(
+    () => {
+      if (!isLoadingFeatures) {
+        window.sessionStorage.setItem(
+          'showDependentsMultiplePage',
+          pensionMultiplePageResponse,
+        );
+      }
+    },
+    [isLoadingFeatures, pensionMultiplePageResponse],
+  );
+
   if (isLoadingFeatures !== false || redirectToHowToPage) {
     return <va-loading-indicator message="Loading application..." />;
   }

diff --git a/src/applications/pensions/components/FormAlerts/index.jsx b/src/applications/pensions/components/FormAlerts/index.jsx
@@ -120,7 +120,7 @@ const RequestFormAlert = ({ title, formName, formLink, children }) => {
 };
 
 RequestFormAlert.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   formLink: PropTypes.string.isRequired,
   formName: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,

diff --git a/src/applications/pensions/config/chapters/04-household-information/dependentChildAddress.js b/src/applications/pensions/config/chapters/04-household-information/dependentChildAddress.js
@@ -8,6 +8,7 @@ import {
   titleUI,
 } from 'platform/forms-system/src/js/web-component-patterns';
 import fullSchemaPensions from 'vets-json-schema/dist/21P-527EZ-schema.json';
+import { showDependentsMultiplePage } from '../../../helpers';
 import { getDependentChildTitle, dependentIsOutsideHousehold } from './helpers';
 import createHouseholdMemberTitle from '../../../components/DisclosureTitle';
 
@@ -19,7 +20,9 @@ const {
 export default {
   title: item => getDependentChildTitle(item, 'address'),
   path: 'household/dependents/children/address/:index',
-  depends: dependentIsOutsideHousehold,
+  depends: (formData, index) =>
+    !showDependentsMultiplePage() &&
+    dependentIsOutsideHousehold(formData, index),
   showPagePerItem: true,
   arrayPath: 'dependents',
   uiSchema: {

diff --git a/...plications/pensions/config/chapters/04-household-information/dependentChildInHousehold.js b/...plications/pensions/config/chapters/04-household-information/dependentChildInHousehold.js
@@ -4,6 +4,7 @@ import {
 } from 'platform/forms-system/src/js/web-component-patterns';
 import fullSchemaPensions from 'vets-json-schema/dist/21P-527EZ-schema.json';
 import createHouseholdMemberTitle from '../../../components/DisclosureTitle';
+import { showDependentsMultiplePage } from '../../../helpers';
 import { doesHaveDependents, getDependentChildTitle } from './helpers';
 
 const {
@@ -13,7 +14,8 @@ const {
 export default {
   title: item => getDependentChildTitle(item, 'household'),
   path: 'household/dependents/children/inhousehold/:index',
-  depends: doesHaveDependents,
+  depends: formData =>
+    !showDependentsMultiplePage() && doesHaveDependents(formData),
   showPagePerItem: true,
   arrayPath: 'dependents',
   uiSchema: {

diff --git a/...plications/pensions/config/chapters/04-household-information/dependentChildInformation.js b/...plications/pensions/config/chapters/04-household-information/dependentChildInformation.js
@@ -1,5 +1,4 @@
 import merge from 'lodash/merge';
-import moment from 'moment';
 import {
   radioSchema,
   radioUI,
@@ -15,13 +14,21 @@ import {
 import get from 'platform/utilities/data/get';
 import fullSchemaPensions from 'vets-json-schema/dist/21P-527EZ-schema.json';
 import createHouseholdMemberTitle from '../../../components/DisclosureTitle';
-import { DependentSeriouslyDisabledDescription } from '../../../helpers';
+import {
+  DependentSeriouslyDisabledDescription,
+  showDependentsMultiplePage,
+} from '../../../helpers';
 import {
   DisabilityDocsAlert,
   SchoolAttendanceAlert,
   AdoptionEvidenceAlert,
 } from '../../../components/FormAlerts';
-import { doesHaveDependents, getDependentChildTitle } from './helpers';
+import { childRelationshipLabels } from '../../../labels';
+import {
+  doesHaveDependents,
+  getDependentChildTitle,
+  isBetween18And23,
+} from './helpers';
 
 const {
   childPlaceOfBirth,
@@ -31,28 +38,12 @@ const {
   married,
 } = fullSchemaPensions.properties.dependents.items.properties;
 
-const childRelationshipOptions = {
-  BIOLOGICAL: "They're my biological child",
-  ADOPTED: "They're my adopted child",
-  STEP_CHILD: "They're my stepchild",
-};
-
-function isBetween18And23(childDOB) {
-  return moment(childDOB).isBetween(
-    moment()
-      .startOf('day')
-      .subtract(23, 'years'),
-    moment()
-      .startOf('day')
-      .subtract(18, 'years'),
-  );
-}
-
 /** @type {PageSchema} */
 export default {
   title: item => getDependentChildTitle(item, 'information'),
   path: 'household/dependents/children/information/:index',
-  depends: doesHaveDependents,
+  depends: formData =>
+    !showDependentsMultiplePage() && doesHaveDependents(formData),
   showPagePerItem: true,
   arrayPath: 'dependents',
   uiSchema: {
@@ -73,7 +64,7 @@ export default {
         },
         childRelationship: radioUI({
           title: "What's your relationship?",
-          labels: childRelationshipOptions,
+          labels: childRelationshipLabels,
         }),
         'view:adoptionDocs': {
           'ui:description': AdoptionEvidenceAlert,
@@ -142,7 +133,7 @@ export default {
             childSocialSecurityNumber: ssnSchema,
             'view:noSSN': { type: 'boolean' },
             childRelationship: radioSchema(
-              Object.keys(childRelationshipOptions),
+              Object.keys(childRelationshipLabels),
             ),
             'view:adoptionDocs': { type: 'object', properties: {} },
             attendingCollege,

diff --git a/src/applications/pensions/config/chapters/04-household-information/dependentChildren.js b/src/applications/pensions/config/chapters/04-household-information/dependentChildren.js
@@ -8,7 +8,11 @@ import {
   titleUI,
 } from 'platform/forms-system/src/js/web-component-patterns';
 import ListItemView from '../../../components/ListItemView';
-import { DependentsMinItem, formatFullName } from '../../../helpers';
+import {
+  DependentsMinItem,
+  formatFullName,
+  showDependentsMultiplePage,
+} from '../../../helpers';
 import { doesHaveDependents } from './helpers';
 
 const DependentNameView = ({ formData }) => (
@@ -25,7 +29,8 @@ DependentNameView.propTypes = {
 export default {
   title: 'Dependent children',
   path: 'household/dependents/add',
-  depends: doesHaveDependents,
+  depends: formData =>
+    !showDependentsMultiplePage() && doesHaveDependents(formData),
   uiSchema: {
     ...titleUI('Dependent children'),
     dependents: {