Skip to content

feat: DAH-3577 Forms EasyPost address verification #2866

Open
cliu02 wants to merge 5 commits intomainfrom
DAH-3577-address-verification
Open

feat: DAH-3577 Forms EasyPost address verification #2866
cliu02 wants to merge 5 commits intomainfrom
DAH-3577-address-verification

Conversation

@cliu02
Copy link
Copy Markdown
Collaborator

@cliu02 cliu02 commented Apr 17, 2026

Description

Creates the form engine page for address verification and API call to EasyPost to get a verified address.

Jira ticket

https://sfgovdt.jira.com/browse/DAH-3577

Before requesting eng review

Version Control

  • branch name begins with angular if it contains updates to Angular code
  • branch name contains the Jira ticket number
  • PR name follows type: TICKET-NUMBER Description format, use DAH-000 if it does not need a ticket
  • PR name follows urgent: Description format if it is urgent and does not need a ticket

Code quality

  • the set of changes is small
  • all automated code checks pass (linting, tests, coverage, etc.)
  • if the PR is a bugfix, there are tests and logs around the bug

Code conventions

  • web pages are formatted with .scss stylesheets and ui-seeds tokens, rather than inline styles or Tailwind

Review instructions

  • instructions specify which environment(s) it applies to
  • instructions work for PA testers
  • instructions have already been performed at least once

Request eng review

  • PR has needs review label
  • Use Housing Eng group to automatically assign reviewers, and/or assign specific engineers
  • If time sensitive, notify engineers in Slack

Before merging

Request product acceptance (PA) testing

  • PA tested in the review environment (use needs product acceptance label)
  • if PA testing cannot be done, changes are behind a feature flag

@alulabeshue-sfgov alulabeshue-sfgov temporarily deployed to dahlia-webap-dah-3577-a-orahjn April 17, 2026 00:05 Inactive
@cliu02 cliu02 changed the title feat: DAH-3577 Forms address EasyPost verification page feat: DAH-3577 Forms EasyPost address verification page Apr 17, 2026
@cliu02 cliu02 changed the title feat: DAH-3577 Forms EasyPost address verification page feat: DAH-3577 Forms EasyPost address verification Apr 17, 2026
}
case "HouseholdMemberVerifyAddress": {
return <VerifyAddress />
return <VerifyAddress fieldNames={{ verifiedAddress: "householdMemberAddress" }} />
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: to be implemented in https://sfgovdt.jira.com/browse/DAH-3589

@cliu02 cliu02 temporarily deployed to dahlia-webap-dah-3577-a-orahjn April 21, 2026 20:45 Inactive
@cliu02 cliu02 added needs review Pull request needs review labels Apr 21, 2026
@cliu02 cliu02 marked this pull request as ready for review April 21, 2026 21:50
@cliu02 cliu02 requested review from a team and Copilot April 21, 2026 21:50
@cliu02 cliu02 requested review from jimlin-sfgov and jtcaovan April 21, 2026 21:51
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds an address verification step to the form engine flow by calling a new frontend API helper that posts addresses to an /api/v1/addresses/validate.json endpoint and renders a “Verify Address” page for user confirmation.

Changes:

  • Introduces VerifyAddress page that fetches a verified address, displays it, and writes the verified values back to formData on confirmation.
  • Adds locateVerifiedAddress to formApiService plus supporting types and unit tests.
  • Adds a small address formatting utility and styles for the new verify-address UI.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
app/javascript/util/formEngineUtil.ts Adds getFormattedAddress helper for display formatting.
app/javascript/pages/form/components/household/HouseholdMemberMultiStepWrapper.tsx Passes address prop to VerifyAddress for household-member usage.
app/javascript/pages/form/components/VerifyAddress.tsx Implements the address verification UI + data writeback + API call.
app/javascript/pages/form/components/VerifyAddress.module.scss Styles layout for the verify address section.
app/javascript/pages/form/components/ListingApplyStepWrapper.module.scss Adds .no-back variant styling for step titles.
app/javascript/api/formApiService.ts Adds locateVerifiedAddress and response/request typing.
app/javascript/tests/pages/form/components/VerifyAddress.test.tsx Adds component tests for the verify address step UI/behavior.
app/javascript/tests/api/formApiService.test.ts Adds a unit test for locateVerifiedAddress.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread app/javascript/api/formApiService.ts
Comment thread app/javascript/__tests__/api/formApiService.test.ts
Comment thread app/javascript/pages/form/components/VerifyAddress.tsx
Comment thread app/javascript/pages/form/components/VerifyAddress.tsx
Copy link
Copy Markdown
Collaborator

@jimlin-sfgov jimlin-sfgov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some inter-page behaviors that are not the same as the Angular version:

  • when entering an invalid address, there is a browser alert, and then user is sent back to the contact page with no error messaging
  • when on the page after address verification, clicking "back" will go back to the address verification page

Also, some styling differences around spacing:
Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs review Pull request needs review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants