-
Notifications
You must be signed in to change notification settings - Fork 128
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MBMS-71539 Setting up address validation flow for preneed integration (…
…#33435) * MBMS-71539 Setting up address validation flow for preneed integration * Redid address validation page, need to combine both custom pages still * MBMS-71539 fixed zip code error message * Renamed file * MBMS-71539 Dev Complete * MBMS-71539 Passed POR/UI/UX Review and added basic unit tests * MBMS-71359 Postal code error text for preparerContactDetails * MBMS-71539 Curvy punctuation * MBMS-71539 Revamped unit tests for suggested address pages
- Loading branch information
1 parent
0098df3
commit 3d58c33
Showing
16 changed files
with
1,216 additions
and
184 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
src/applications/pre-need-integration/components/SuggestedAddressRadio.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React from 'react'; | ||
| import { VaRadio } from '@department-of-veterans-affairs/component-library/dist/react-bindings'; | ||
| import { FIELD_NAMES } from '@@vap-svc/constants'; | ||
| import { formatSuggestedAddress } from '../utils/helpers'; | ||
| import { ValidateAddressTitle } from './PreparerHelpers'; | ||
|
|
||
| export default function SuggestedAddressRadio({ | ||
| title, | ||
| userAddress, | ||
| selectedAddress, | ||
| addressValidation, | ||
| onChangeSelectedAddress, | ||
| }) { | ||
| return ( | ||
| <div | ||
| className="va-profile-wrapper" | ||
| id={`edit-${FIELD_NAMES.MAILING_ADDRESS}`} | ||
| > | ||
| <ValidateAddressTitle title={title} /> | ||
| <p>We found a similar address to the one you entered.</p> | ||
| <VaRadio | ||
| label="Tell us which address you’d like to use." | ||
| onVaValueChange={onChangeSelectedAddress} | ||
| required | ||
| > | ||
| {userAddress && ( | ||
| <va-radio-option | ||
| key="userAddress" | ||
| name="addressGroup" | ||
| label="Address you entered:" | ||
| description={formatSuggestedAddress(userAddress)} | ||
| value={JSON.stringify(userAddress)} | ||
| tile | ||
| checked={ | ||
| JSON.stringify(selectedAddress) === JSON.stringify(userAddress) | ||
| } | ||
| /> | ||
| )} | ||
| {addressValidation?.confirmedSuggestions?.[0] && ( | ||
| <va-radio-option | ||
| key="suggestedAddress" | ||
| name="addressGroup" | ||
| label="Suggested address:" | ||
| description={formatSuggestedAddress( | ||
| addressValidation?.confirmedSuggestions?.[0], | ||
| )} | ||
| value={JSON.stringify(addressValidation?.confirmedSuggestions?.[0])} | ||
| tile | ||
| checked={ | ||
| JSON.stringify(selectedAddress) === | ||
| JSON.stringify(addressValidation?.confirmedSuggestions?.[0]) | ||
| } | ||
| /> | ||
| )} | ||
| </VaRadio> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
87 changes: 87 additions & 0 deletions
87
src/applications/pre-need-integration/config/pages/addressConfirmation.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import React from 'react'; | ||
| import { connect } from 'react-redux'; | ||
|
|
||
| function AddressConfirmation(/* { formData } */) { | ||
| const formDataUserAddress = { | ||
| street: '123 Test Street', | ||
| city: 'City', | ||
| state: 'MC', | ||
| postalCode: '28226', | ||
| country: 'USA', | ||
| }; | ||
|
|
||
| // Helper function to conditionally return a line with a break | ||
| const renderLine = content => { | ||
| return content ? ( | ||
| <> | ||
| {content} | ||
| <br /> | ||
| </> | ||
| ) : null; | ||
| }; | ||
|
|
||
| // For city/state/postalCode line, we build it conditionally: | ||
| const cityStatePostal = [ | ||
| formDataUserAddress?.city, | ||
| formDataUserAddress?.city && | ||
| (formDataUserAddress?.state || formDataUserAddress?.postalCode) | ||
| ? ',' | ||
| : '', | ||
| formDataUserAddress?.state, | ||
| formDataUserAddress?.state && formDataUserAddress?.postalCode ? ' ' : '', | ||
| formDataUserAddress?.postalCode, | ||
| ] | ||
| .join('') | ||
| .trim(); | ||
|
|
||
| return ( | ||
| <> | ||
| <va-alert | ||
| close-btn-aria-label="Close notification" | ||
| status="warning" | ||
| visible | ||
| > | ||
| <h2 slot="headline">Check the address you entered</h2> | ||
| <React.Fragment key=".1"> | ||
| <p className="vads-u-margin-y--0"> | ||
| We can’t confirm the address you entered with the U.S. Postal | ||
| Service. Check the address before continuing. | ||
| </p> | ||
| </React.Fragment> | ||
| </va-alert> | ||
| <h3 className="vads-u-font-size--h5" style={{ paddingTop: '2em' }}> | ||
| Check your mailing address | ||
| </h3> | ||
| <p style={{ marginTop: '1em' }}>You entered:</p> | ||
| <div className="blue-bar-block"> | ||
| <p className="va-address-block"> | ||
| {renderLine(formDataUserAddress?.street)} | ||
| {renderLine(formDataUserAddress?.street2)} | ||
| {cityStatePostal && renderLine(cityStatePostal)} | ||
| {renderLine(formDataUserAddress?.country)} | ||
| </p> | ||
| </div> | ||
| <p> | ||
| If the address is correct, you can continue. If you need to edit the | ||
| address, you can go back. | ||
| </p> | ||
| <va-additional-info trigger="Why we can't confirm the address you entered"> | ||
| <p> | ||
| The address you entered may not be in the U.S. Postal Service’s | ||
| system. Or, you may have entered an error or other incorrect | ||
| information. | ||
| </p> | ||
| </va-additional-info> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| const mapStateToProps = state => { | ||
| return { | ||
| state, | ||
| formData: state?.form?.data, | ||
| addressValidation: state?.vapService?.addressValidation, | ||
| }; | ||
| }; | ||
|
|
||
| export default connect(mapStateToProps)(AddressConfirmation); |
Oops, something went wrong.