diff --git a/src/applications/survivor-dependent-education-benefit/22-5490/components/DirectDepositCustomReview.jsx b/src/applications/survivor-dependent-education-benefit/22-5490/components/DirectDepositCustomReview.jsx new file mode 100644 index 000000000000..baf55451fff4 --- /dev/null +++ b/src/applications/survivor-dependent-education-benefit/22-5490/components/DirectDepositCustomReview.jsx @@ -0,0 +1,77 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { obfuscate, titleCase } from '../helpers'; + +const DirectDepositCustomReview = ({ formData, editPage }) => { + const bankAccount = formData?.['view:directDeposit']?.bankAccount || {}; + const { accountType, routingNumber, accountNumber } = bankAccount; + + return ( +
+
+

+ Review your direct deposit information +

+ +
+
+
+
Account type
+
{titleCase(accountType) || 'Not provided'}
+
+
+
Bank routing number
+
+ + + Ending in {routingNumber?.slice(-4) || 'Not provided'} + +
+
+
+
Bank account number
+
+ + + Ending in {accountNumber?.slice(-4) || 'Not provided'} + +
+
+
+
+ ); +}; + +DirectDepositCustomReview.propTypes = { + editPage: PropTypes.func.isRequired, + formData: PropTypes.shape({ + 'view:directDeposit': PropTypes.shape({ + bankAccount: PropTypes.shape({ + accountType: PropTypes.string, + routingNumber: PropTypes.string, + accountNumber: PropTypes.string, + }), + }), + }).isRequired, + title: PropTypes.string.isRequired, +}; + +const mapStateToProps = state => ({ + formData: state.form?.data, +}); + +export default connect(mapStateToProps)(DirectDepositCustomReview); diff --git a/src/applications/survivor-dependent-education-benefit/22-5490/components/DirectDepositViewField.jsx b/src/applications/survivor-dependent-education-benefit/22-5490/components/DirectDepositViewField.jsx index 20d540cc7fd6..32a339c4aa08 100644 --- a/src/applications/survivor-dependent-education-benefit/22-5490/components/DirectDepositViewField.jsx +++ b/src/applications/survivor-dependent-education-benefit/22-5490/components/DirectDepositViewField.jsx @@ -2,52 +2,48 @@ import React from 'react'; import PropTypes from 'prop-types'; import { obfuscate, titleCase } from '../helpers'; -export default function DirectDepositViewField({ formData }) { +function DirectDepositViewField({ formData }) { const bankAccount = formData?.bankAccount || {}; - const { - accountType, - accountNumber, - // financialInstitutionName, - routingNumber, - } = bankAccount; + const { accountType, accountNumber, routingNumber } = bankAccount; const accountTypeDisplay = accountType ? `${titleCase(accountType)} account` : 'Account'; return ( - <> -

+

+

Note: Your bank account information is what we currently have on file for you. Please ensure it is correct.

-
{`${accountTypeDisplay}`}
-
- {/*
Bank name:
-
{financialInstitutionName}
*/} - -
+
{accountTypeDisplay}
+
+
Bank routing number:
-
- {obfuscate(routingNumber)} +
+ + Ending in {routingNumber.slice(-4)}
- -
+
Bank account number:
-
- {obfuscate(accountNumber)} +
+ + Ending in {accountNumber.slice(-4)}
- +
); } DirectDepositViewField.propTypes = { - // formData is expected to be an object formData: PropTypes.shape({ bankAccount: PropTypes.shape({ accountType: PropTypes.string, @@ -56,3 +52,5 @@ DirectDepositViewField.propTypes = { }), }).isRequired, }; + +export default DirectDepositViewField; diff --git a/src/applications/survivor-dependent-education-benefit/22-5490/components/ObfuscateReviewField.jsx b/src/applications/survivor-dependent-education-benefit/22-5490/components/ObfuscateReviewField.jsx index cf3c133d2377..ed8bd0bffbc6 100644 --- a/src/applications/survivor-dependent-education-benefit/22-5490/components/ObfuscateReviewField.jsx +++ b/src/applications/survivor-dependent-education-benefit/22-5490/components/ObfuscateReviewField.jsx @@ -3,11 +3,30 @@ import PropTypes from 'prop-types'; import { obfuscate } from '../helpers'; function ObfuscateReviewField({ children, uiSchema }) { + const { formData } = children.props; // Extract form data + const maskedValue = obfuscate(formData); // Generate obfuscated value + const visibleLastDigits = formData.slice(-4); // Extract last 4 digits for accessibility + return ( -
-
{uiSchema['ui:title']}
-
{obfuscate(children.props.formData)}
-
+
+
+ {uiSchema['ui:title']} +
+
+ + Ending in {visibleLastDigits} +
+
); } @@ -17,4 +36,5 @@ ObfuscateReviewField.propTypes = { 'ui:title': PropTypes.string.isRequired, }).isRequired, }; + export default ObfuscateReviewField; diff --git a/src/applications/survivor-dependent-education-benefit/22-5490/config/form.js b/src/applications/survivor-dependent-education-benefit/22-5490/config/form.js index 73e9d644e860..cc966b1dc74f 100644 --- a/src/applications/survivor-dependent-education-benefit/22-5490/config/form.js +++ b/src/applications/survivor-dependent-education-benefit/22-5490/config/form.js @@ -53,6 +53,7 @@ import PhoneReviewField from '../components/PhoneReviewField'; import MailingAddressViewField from '../components/MailingAddressViewField'; import LearnMoreAboutMilitaryBaseTooltip from '../components/LearnMoreAboutMilitaryBaseTooltip'; import PersonalInformationReviewField from '../components/PersonalInformationReviewField'; +import DirectDepositCustomReview from '../components/DirectDepositCustomReview'; const { fullName, ssn, date, dateRange, usaPhone } = commonDefinitions; @@ -1425,6 +1426,7 @@ const formConfig = { directDeposit: { path: 'direct-deposit', title: 'Enter your direct deposit information', + CustomPageReview: DirectDepositCustomReview, uiSchema: directDeposit.uiSchema, schema: directDeposit.schema, }, diff --git a/src/applications/survivor-dependent-education-benefit/22-5490/pages/directDeposit.js b/src/applications/survivor-dependent-education-benefit/22-5490/pages/directDeposit.js index 865fa42e79ba..73acce59490a 100644 --- a/src/applications/survivor-dependent-education-benefit/22-5490/pages/directDeposit.js +++ b/src/applications/survivor-dependent-education-benefit/22-5490/pages/directDeposit.js @@ -8,6 +8,17 @@ import * as ENVIRONMENTS from 'site/constants/environments'; import DirectDepositViewField from '../components/DirectDepositViewField'; import ObfuscateReviewField from '../components/ObfuscateReviewField'; +const shouldStartInEditMode = formData => { + const bankAccount = formData?.bankAccount; + const hasData = [ + bankAccount?.accountType, + bankAccount?.routingNumber, + bankAccount?.accountNumber, + ].some(field => field?.length > 0); + // Return false to not start in edit mode if any data is present + return !hasData; +}; + const checkImageSrc = (() => { const bucket = environment.isProduction() ? BUCKETS[ENVIRONMENTS.VAGOVPROD] @@ -32,7 +43,7 @@ const directDeposit = { itemNameAction: 'Update', reviewTitle: 'Direct deposit information', showFieldLabel: false, - startInEdit: true, + startInEdit: formData => shouldStartInEditMode(formData), viewComponent: DirectDepositViewField, volatileData: true, }, diff --git a/src/applications/survivor-dependent-education-benefit/22-5490/sass/survivor-dependent-education-benefit-22-5490.scss b/src/applications/survivor-dependent-education-benefit/22-5490/sass/survivor-dependent-education-benefit-22-5490.scss index fe2a54563536..a4a25ed0138e 100644 --- a/src/applications/survivor-dependent-education-benefit/22-5490/sass/survivor-dependent-education-benefit-22-5490.scss +++ b/src/applications/survivor-dependent-education-benefit/22-5490/sass/survivor-dependent-education-benefit-22-5490.scss @@ -120,3 +120,57 @@ $error-left-padding-width: 1.5rem; vertical-align: middle; padding-left: 2rem; } + +// Base styles for definition lists in Survivor Benefit Application +.survivor-benefit-definition-list { + margin: 0; + padding: 0; + + &::after { + content: ""; + display: table; + clear: both; + } + + & > dt { + float: left; + clear: left; + font-weight: bold; + margin: 0 0 0.125rem; // Further reduce bottom margin for tighter spacing + } + + & > dd { + float: left; + margin: 0 0 0.125rem 1em; // Further reduce bottom margin and adjust left spacing + white-space: nowrap; // Prevents wrapping for obfuscated text + } + + // Modifier for lighter-weight terms + &--normal > dt { + font-weight: normal; + } +} + +// Scoped styles for DirectDepositViewField +.survivor-benefit-direct-deposit { + .survivor-benefit-definition-list_term { + margin-bottom: 0.125rem; // Even tighter space between terms and definitions + } + + .survivor-benefit-definition-list_definition { + font-size: 1rem; + margin-bottom: 0.125rem; // Match the reduced spacing + } +} + +// Scoped styles for ObfuscateReviewField +.survivor-benefit-obfuscate-review { + .survivor-benefit-definition-list_term { + color: var(--vads-color-gray-dark); + } + + .survivor-benefit-definition-list_definition { + font-size: 1rem; + margin-bottom: 0.125rem; // Match the reduced spacing + } +} \ No newline at end of file