Adds Edit Mode and View Mode for Direc Deposit Component

src/applications/survivor-dependent-education-benefit/22-5490/components/DirectDepositViewField.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { obfuscate, titleCase } from '../helpers';
+
+export default function DirectDepositViewField({ formData }) {
+  const bankAccount = formData?.bankAccount || {};
+  const {
+    accountType,
+    accountNumber,
+    // financialInstitutionName,
+    routingNumber,
+  } = bankAccount;
+
+  const accountTypeDisplay = accountType
+    ? `${titleCase(accountType)} account`
+    : 'Account';
+
+  return (
+    <>
+      <p className="vads-u-margin-bottom--4">
+        <strong>Note</strong>: Your bank account information is what we
+        currently have on file for you. Please ensure it is correct.
+      </p>
+      <div className="va-address-block vads-u-margin-left--0">
+        <h5>{`${accountTypeDisplay}`}</h5>
+        <dl className="meb-definition-list">
+          {/* <dt>Bank name:</dt>
+          <dd>{financialInstitutionName}</dd> */}
+
+          <dt className="meb-definition-list_term toe-definition-list_term--normal">
+            Bank routing number:
+          </dt>
+          <dd className="meb-definition-list_definition">
+            {obfuscate(routingNumber)}
+          </dd>
+
+          <dt className="meb-definition-list_term toe-definition-list_term--normal">
+            Bank account number:
+          </dt>
+          <dd className="meb-definition-list_definition">
+            {obfuscate(accountNumber)}
+          </dd>
+        </dl>
+      </div>
+    </>
+  );
+}
+
+DirectDepositViewField.propTypes = {
+  // formData is expected to be an object
+  formData: PropTypes.shape({
+    bankAccount: PropTypes.shape({
+      accountType: PropTypes.string,
+      accountNumber: PropTypes.string,
+      routingNumber: PropTypes.string,
+    }),
+  }).isRequired,
+};

src/applications/survivor-dependent-education-benefit/22-5490/components/ObfuscateReviewField.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { obfuscate } from '../helpers';
+
+function ObfuscateReviewField({ children, uiSchema }) {
+  return (
+    <div className="review-row">
+      <dt>{uiSchema['ui:title']}</dt>
+      <dd>{obfuscate(children.props.formData)}</dd>
+    </div>
+  );
+}
+
+ObfuscateReviewField.propTypes = {
+  children: PropTypes.node.isRequired,
+  uiSchema: PropTypes.shape({
+    'ui:title': PropTypes.string.isRequired,
+  }).isRequired,
+};
+export default ObfuscateReviewField;

src/applications/survivor-dependent-education-benefit/22-5490/pages/directDeposit.js

@@ -1,10 +1,128 @@
-import directDepositDefinition from 'platform/forms-system/src/js/definitions/directDeposit';
-
-export default directDepositDefinition({
-  affectedBenefits: 'disability compensation',
-  unaffectedBenefits: 'pension and education',
-  optionalFields: {
-    declineDirectDeposit: true,
-    bankName: true,
+import React from 'react';
+import bankAccountUI from 'platform/forms/definitions/bankAccount';
+import ReviewCardField from 'platform/forms-system/src/js/components/ReviewCardField';
+import environment from 'platform/utilities/environment';
+import * as BUCKETS from 'site/constants/buckets';
+import * as ENVIRONMENTS from 'site/constants/environments';
+
+import DirectDepositViewField from '../components/DirectDepositViewField';
+import ObfuscateReviewField from '../components/ObfuscateReviewField';
+
+const checkImageSrc = (() => {
+  const bucket = environment.isProduction()
+    ? BUCKETS[ENVIRONMENTS.VAGOVPROD]
+    : BUCKETS[ENVIRONMENTS.VAGOVSTAGING];
+
+  return `${bucket}/img/check-sample.png`;
+})();
+
+const directDeposit = {
+  uiSchema: {
+    'view:directDeposit': {
+      'ui:title': (
+        <h4 className="vads-u-font-size--h5 vads-u-margin-top--0">
+          Direct deposit information
+        </h4>
+      ),
+      'ui:field': ReviewCardField,
+      'ui:options': {
+        editTitle: 'Direct deposit information',
+        hideLabelText: true,
+        itemName: 'account information',
+        itemNameAction: 'Update',
+        reviewTitle: 'Direct deposit information',
+        showFieldLabel: false,
+        startInEdit: true,
+        viewComponent: DirectDepositViewField,
+        volatileData: true,
+      },
+      'ui:description': (
+        <p>
+          <strong>Note:</strong> We make payments only through direct deposit,
+          also called electronic funds transfer (EFT).
+        </p>
+      ),
+      bankAccount: {
+        ...bankAccountUI,
+        'ui:order': ['accountType', 'routingNumber', 'accountNumber'],
+        routingNumber: {
+          ...bankAccountUI.routingNumber,
+          'ui:errorMessages': {
+            pattern: 'Please enter a valid 9-digit routing number',
+          },
+          'ui:reviewField': ObfuscateReviewField,
+        },
+        accountNumber: {
+          ...bankAccountUI.accountNumber,
+          'ui:errorMessages': {
+            pattern: 'Please enter a valid 5-17 digit bank account number',
+          },
+          'ui:reviewField': ObfuscateReviewField,
+        },
+      },
+    },
+    'view:learnMore': {
+      'ui:description': (
+        <va-additional-info
+          key="learn-more-btn"
+          trigger="Where can I find these numbers?"
+        >
+          <img
+            key="check-image-src"
+            style={{ marginTop: '0.625rem' }}
+            src={checkImageSrc}
+            alt="Example of a check showing where the account and routing numbers are"
+          />
+          <br />
+          <br />
+
+          <p key="learn-more-description">
+            The bank routing number is the first 9 digits on the bottom left
+            corner of a printed check. Your account number is the second set of
+            numbers on the bottom of a printed check, just to the right of the
+            bank routing number.
+          </p>
+          <br />
+          <p key="learn-more-additional">
+            If you don’t have a printed check, you can sign in to your online
+            banking institution for this information
+          </p>
+        </va-additional-info>
+      ),
+    },
+  },
+  schema: {
+    type: 'object',
+    properties: {
+      'view:directDeposit': {
+        type: 'object',
+        properties: {
+          bankAccount: {
+            type: 'object',
+            required: ['accountType', 'accountNumber', 'routingNumber'],
+            properties: {
+              accountNumber: {
+                type: 'string',
+                pattern: '^[*a-zA-Z0-9]{5,17}$',
+              },
+              accountType: {
+                type: 'string',
+                enum: ['checking', 'savings'],
+              },
+              routingNumber: {
+                type: 'string',
+                pattern: '^[\\d*]{5}\\d{4}$',
+              },
+            },
+          },
+        },
+      },
+      'view:learnMore': {
+        type: 'object',
+        properties: {},
+      },
+    },
   },
-});
+};
+
+export default directDeposit;