Add full form data to array builder

src/platform/forms-system/src/js/containers/FormPage.jsx

@@ -19,7 +19,7 @@
 } from '../components/FormNavButtons';
 import SchemaForm from '../components/SchemaForm';
 import { setData, uploadFile } from '../actions';
 import {
   getNextPagePath,
   getPreviousPagePath,
   checkValidPagePath,
@@ -349,6 +349,7 @@
             name={route.pageConfig.pageKey}
             title={route.pageConfig.title}
             data={data}
+            fullData={form.data}
             pagePerItemIndex={params ? params.index : undefined}
             onReviewPage={formContext?.onReviewPage}
             trackingPrefix={this.props.form.trackingPrefix}

src/platform/forms-system/src/js/patterns/array-builder/ArrayBuilderItemPage.jsx

@@ -40,8 +40,10 @@ export default function ArrayBuilderItemPage({
       schema: props.schema,
       uiSchema: props.uiSchema,
       data: props.data,
+      fullData: props.fullData,
       onChange: props.onChange,
       onSubmit: props.onSubmit,
+      index: props.index,
     });
 
     if (!props.onReviewPage && !isEdit && !isAdd) {
@@ -143,9 +145,11 @@ export default function ArrayBuilderItemPage({
     contentBeforeButtons: PropTypes.node,
     data: PropTypes.object,
     formContext: PropTypes.object,
+    fullData: PropTypes.object,
     getFormData: PropTypes.func,
     goBack: PropTypes.func,
     goToPath: PropTypes.func,
+    index: PropTypes.number,
     onChange: PropTypes.func,
     onContinue: PropTypes.func,
     onReviewPage: PropTypes.bool,

src/platform/forms-system/src/js/patterns/array-builder/helpers.js

@@ -43,8 +43,12 @@ export function initGetText({
   return (key, itemData, formData, index) => {
     const keyVal = getTextValues?.[key];
     if (key === 'getItemName' || key === 'cardDescription') {
-      return typeof keyVal === 'function' ? keyVal(itemData, index) : keyVal;
+      // pass in full form data into getItemName & cardDescription functions
+      return typeof keyVal === 'function'
+        ? keyVal(itemData, index, formData)
+        : keyVal;
     }
+
     return typeof keyVal === 'function'
       ? getTextValues?.[key]({
           ...getTextProps,

src/platform/forms-system/src/js/patterns/array-builder/tests/arrayBuilderCards.unit.spec.js

@@ -47,23 +47,26 @@ const mockRedux = ({
 };
 
 describe('ArrayBuilderCards', () => {
-  function setupArrayBuilderCards({ arrayData = [] }) {
+  function setupArrayBuilderCards({
+    arrayData = [],
+    cardDescription = 'cardDescription',
+    getItemName = (item, index) => `getItemName ${index + 1}`,
+  }) {
     const setFormData = sinon.spy();
     const goToPath = sinon.spy();
     const onRemoveAll = sinon.spy();
     const onRemove = sinon.spy();
     let getText = initGetText({
-      textOverrides: {
-        cardDescription: 'cardDescription',
-      },
+      textOverrides: { cardDescription },
       nounPlural: 'employers',
       nounSingular: 'employer',
-      getItemName: (item, index) => `getItemName ${index + 1}`,
+      getItemName,
     });
     getText = sinon.spy(getText);
     const { mockStore } = mockRedux({
       formData: {
         employers: arrayData,
+        otherData: 'test',
       },
       setFormData,
     });
@@ -136,4 +139,25 @@ describe('ArrayBuilderCards', () => {
     expect(setFormData.args[0][0].employers).to.eql([]);
     expect(onRemoveAll.called).to.be.true;
   });
+
+  it('should pass full data into cardDescription', () => {
+    const cardDescriptionSpy = sinon.spy();
+    const getItemNameSpy = sinon.spy();
+    const { getByText, getText } = setupArrayBuilderCards({
+      arrayData: [{ name: 'Test' }],
+      cardDescription: cardDescriptionSpy,
+      getItemName: getItemNameSpy,
+    });
+
+    expect(getByText('Edit')).to.exist;
+    expect(getText.calledWith('cardDescription')).to.be.true;
+    expect(getText.calledWith('getItemName')).to.be.true;
+    const functionArgs = [
+      { name: 'Test' },
+      0,
+      { employers: [{ name: 'Test' }], otherData: 'test' },
+    ];
+    expect(cardDescriptionSpy.args[0]).to.be.deep.equal(functionArgs);
+    expect(getItemNameSpy.args[0]).to.be.deep.equal(functionArgs);
+  });
 });

src/platform/forms-system/src/js/patterns/array-builder/tests/arrayBuilderSubsequentItemPage.unit.spec.js

@@ -133,6 +133,7 @@ describe('ArrayBuilderSubsequentItemPage', () => {
           schema={itemPage.schema}
           uiSchema={itemPage.uiSchema}
           data={data.employers[index]}
+          fullData={data}
           onChange={() => {}}
           onSubmit={() => {}}
           onReviewPage={false}

src/platform/forms-system/src/js/patterns/array-builder/tests/useEditOrAddForm.unit.spec.jsx

@@ -1,10 +1,11 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
 import sinon from 'sinon';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { expect } from 'chai';
 import { VaButton } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import { useEditOrAddForm } from '../useEditOrAddForm';
+import * as helpers from '../../../state/helpers';
 
 const mockSchema = {
   type: 'object',
@@ -33,11 +34,11 @@
     const Component = props => {
       const { data, schema, uiSchema, onChange, onSubmit } = useEditOrAddForm({
         isEdit: false,
         schema: props.schema,
         uiSchema: props.uiSchema,
         data: props.data,
         onChange: props.onChange,
         onSubmit: props.onSubmit,
       });
 
       return (
@@ -76,10 +77,10 @@
     const Component = props => {
       const { data, schema, uiSchema, onChange, onSubmit } = useEditOrAddForm({
         isEdit: true,
         schema: props.schema,
         uiSchema: props.uiSchema,
         data: props.data,
         onChange: props.onChange,
         onSubmit: props.onSubmit,
       });
 
@@ -111,4 +112,81 @@
     fireEvent.click(button);
     expect(mockOnSubmit.called).to.be.true;
   });
+
+  describe('updateSchemasAndData', () => {
+    let updateSchemasAndDataSpy;
+    let mockOnChange;
+    let mockOnSubmit;
+    beforeEach(() => {
+      mockOnChange = sinon.spy();
+      mockOnSubmit = sinon.spy();
+      updateSchemasAndDataSpy = sinon
+        .stub(helpers, 'updateSchemasAndData')
+        .returns({
+          data: mockData,
+          schema: mockSchema,
+          uiSchema: mockUiSchema,
+          onChange: mockOnChange,
+          onSubmit: mockOnSubmit,
+        });
+    });
+    afterEach(() => {
+      updateSchemasAndDataSpy.restore();
+    });
+
+    it('should call updateSchemasAndData when isEdit=true', async () => {
+      const fullData = { ...mockData, otherData: 'test' };
+      const Component = props => {
+        const { data, schema, uiSchema, onChange, onSubmit } = useEditOrAddForm(
+          {
+            isEdit: true,
+            schema: props.schema,
+            uiSchema: props.uiSchema,
+            data: props.data,
+            fullData,
+            onChange: props.onChange,
+            onSubmit: props.onSubmit,
+            index: 1,
+          },
+        );
+
+        return (
+          <form>
+            <label htmlFor="name">Name</label>
+            <input
+              id="name"
+              type="text"
+              onChange={onChange}
+              value={data?.name}
+            />
+            <VaButton onClick={onSubmit}>Submit</VaButton>
+          </form>
+        );
+      };
+
+      const { container } = render(
+        <Component
+          data={mockData}
+          fullData={fullData}
+          schema={mockSchema}
+          uiSchema={mockUiSchema}
+          onChange={mockOnChange}
+          onSubmit={mockOnSubmit}
+          index={1}
+        />,
+      );
+
+      waitFor(() => {
+        expect(updateSchemasAndDataSpy.called).to.be.true;
+        expect(updateSchemasAndDataSpy.args[0]).to.deep.equal([
+          mockSchema,
+          mockUiSchema,
+          mockData,
+          false,
+          fullData,
+          1,
+        ]);
+      });
+    });
+  });
 });

src/platform/forms-system/src/js/patterns/array-builder/useEditOrAddForm.jsx

@@ -11,7 +11,8 @@ import { updateSchemasAndData } from 'platform/forms-system/src/js/state/helpers
  *   isEdit: boolean,
  *   schema: SchemaOptions,
  *   uiSchema: UiSchemaOptions,
- *   data: Object,
+ *   data: Object, // form data scoped to the field
+ *   fullData: Object, // full form data
  *   onChange: Function,
  *   onSubmit: Function
  * }} props
@@ -28,8 +29,10 @@ export function useEditOrAddForm({
   schema,
   uiSchema,
   data,
+  fullData,
   onChange,
   onSubmit,
+  index,
 }) {
   // These states are only used in edit mode
   const [localData, setLocalData] = useState(null);
@@ -50,14 +53,16 @@ export function useEditOrAddForm({
           cloneDeep(schema),
           cloneDeep(uiSchema),
           cloneDeep(data),
+          false, // preserveHiddenData default
+          cloneDeep(fullData),
+          index,
         );
-
         setLocalData(initialData);
         setLocalSchema(initialSchema);
         setLocalUiSchema(initialUiSchema);
       }
     },
-    [data, schema, uiSchema, isEdit],
+    [data, fullData, schema, uiSchema, isEdit, index],
   );
 
   const handleOnChange = useCallback(
@@ -70,7 +75,14 @@ export function useEditOrAddForm({
           data: newData,
           schema: newSchema,
           uiSchema: newUiSchema,
-        } = updateSchemasAndData(localSchema, localUiSchema, updatedData);
+        } = updateSchemasAndData(
+          localSchema,
+          localUiSchema,
+          updatedData,
+          false,
+          fullData,
+          index,
+        );
         setLocalData(newData);
         setLocalSchema(newSchema);
         setLocalUiSchema(newUiSchema);
@@ -81,7 +93,7 @@ export function useEditOrAddForm({
         });
       }
     },
-    [isEdit, localSchema, localUiSchema, onChange, data],
+    [isEdit, localSchema, localUiSchema, onChange, data, fullData, index],
   );
 
   const handleOnSubmit = useCallback(

src/platform/forms-system/src/js/state/helpers.js

@@ -261,6 +261,7 @@ export function updateSchemaFromUiSchema(
   formData,
   index = null,
   path = [],
+  fullData,
 ) {
   if (!uiSchema) {
     return schema;
@@ -277,6 +278,7 @@ export function updateSchemaFromUiSchema(
           formData,
           index,
           path.concat(next),
+          fullData || formData,
         );
 
         if (current.properties[next] !== nextProp) {
@@ -303,6 +305,7 @@ export function updateSchemaFromUiSchema(
         formData,
         idx,
         path.concat(idx),
+        fullData || formData,
       ),
     );
 
@@ -324,6 +327,7 @@ export function updateSchemaFromUiSchema(
       uiSchema,
       index,
       path,
+      fullData || formData,
     );
 
     const newSchema = Object.keys(newSchemaProps).reduce((current, next) => {
@@ -348,6 +352,7 @@ export function updateSchemaFromUiSchema(
       uiSchema,
       index,
       path,
+      fullData || formData,
     );
 
     if (newSchema !== currentSchema) {
@@ -419,7 +424,7 @@ function mergeUiSchemasIfDifferent(uiSchema, newUiSchema) {
  * @param {Object} formData - The form data to based uiSchema updates on
  * @returns {UISchemaOptions} The new uiSchema object
  */
-export function updateUiSchema(schema, uiSchema, formData) {
+export function updateUiSchema(schema, uiSchema, formData, fullData) {
   if (!uiSchema) {
     return uiSchema;
   }
@@ -435,6 +440,7 @@ export function updateUiSchema(schema, uiSchema, formData) {
           schema.properties[key],
           modifiedUiSchema[key],
           formData,
+          fullData || formData,
         );
 
         if (modifiedUiSchema[key] !== nextProp) {
@@ -463,7 +469,7 @@ export function updateUiSchema(schema, uiSchema, formData) {
     return currentUiSchema;
   }
 
-  const newProps = uiSchemaUpdater(formData);
+  const newProps = uiSchemaUpdater(formData, fullData || formData);
   return mergeUiSchemasIfDifferent(currentUiSchema, newProps);
 }
 
@@ -614,6 +620,8 @@ export function updateSchemasAndData(
   uiSchema,
   formData,
   preserveHiddenData = false,
+  fullData,
+  index,
 ) {
   let newSchema = updateItemsSchema(schema, formData);
   newSchema = updateRequiredFields(newSchema, uiSchema, formData);
@@ -622,8 +630,20 @@ export function updateSchemasAndData(
   newSchema = setHiddenFields(newSchema, uiSchema, formData);
 
   // Update the uiSchema and  schema with any general updates based on the new data
-  const newUiSchema = updateUiSchema(newSchema, uiSchema, formData);
-  newSchema = updateSchemaFromUiSchema(newSchema, newUiSchema, formData);
+  const newUiSchema = updateUiSchema(
+    newSchema,
+    uiSchema,
+    formData,
+    fullData || formData,
+  );
+  newSchema = updateSchemaFromUiSchema(
+    newSchema,
+    newUiSchema,
+    formData,
+    index,
+    [], // path
+    fullData || formData,
+  );
 
   if (!preserveHiddenData) {
     // Remove any data that’s now hidden in the schema

src/platform/forms-system/src/js/web-component-fields/index.js

@@ -1,6 +1,7 @@
 export { default as SsnField } from './SsnField';
 export { default as VaCheckboxField } from './VaCheckboxField';
 export { default as VaFileInputField } from './VaFileInputField';
+export { default as VaDateField } from './VaDateField';
 export { default as VaMemorableDateField } from './VaMemorableDateField';
 export { default as VaRadioField } from './VaRadioField';
 export { default as VaSelectField } from './VaSelectField';