Replace individual private detail edit pages with unified form + magic code by jasperhuangg · Pull Request #87928 · Expensify/App

jasperhuangg · 2026-04-14T20:03:40Z

Explanation of Change

Replaces the four individual edit pages for private personal details (legal name, DOB, phone, address) with a single unified form that requires magic code verification when any field changes. This prevents session hijackers from silently modifying sensitive personal information.

New pages:

PrivatePersonalDetailsPage - Unified form showing all private detail fields, pre-populated from Onyx. Validates that previously-set fields aren't emptied. On submit, detects changes and navigates to magic code confirmation.
PrivatePersonalDetailsConfirmMagicCodePage - Uses ValidateCodeActionContent to collect a magic code, then calls updatePrivatePersonalDetails() to submit all changes in a single API call.

API changes:

New UPDATE_PRIVATE_PERSONAL_DETAILS write command with optimistic/success/failure data
New updatePrivatePersonalDetails() action in PersonalDetails.ts

Navigation changes:

ProfilePage updated so all four private detail rows navigate to the unified form
New routes, screens, linking config, and RHP relations registered

Depends on Auth PR and Web-Expensify PR.

Fixed Issues

part of https://github.com/Expensify/Expensify/issues/623849
PROPOSAL:

Tests

Go to Settings > Profile
Tap any of: Legal Name, Date of Birth, Phone Number, Address
Verify you're taken to the new unified Private Personal Details form
Verify all fields are pre-populated with your current data
Without changing anything, tap Save — verify no magic code is required
Change one or more fields, tap Save
Verify you're navigated to the magic code page
Enter a valid magic code
Verify details are updated and you're navigated back

Verify that no errors appear in the JS console

Offline tests

Go offline
Navigate to the unified Private Personal Details form
Verify the form loads with cached data from Onyx
Make a change and submit
Verify the optimistic update shows immediately
Go back online and verify the update syncs

QA Steps

Same as Tests section above.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Made with Cursor

Adds the API plumbing for the new unified personal details update: - UPDATE_PRIVATE_PERSONAL_DETAILS write command - UpdatePrivatePersonalDetailsParams type (all personal detail fields + validateCode) - updatePrivatePersonalDetails() action with optimistic/success/failure data that sets isLoading on PRIVATE_PERSONAL_DETAILS Part of Expensify/Expensify#623849. Made-with: Cursor

Registers two new screens in the Settings RHP: - PRIVATE_PERSONAL_DETAILS: unified edit form for all private fields - PRIVATE_PERSONAL_DETAILS_CONFIRM_MAGIC_CODE: magic code verification Adds routes, screen constants, navigation param types, linking config, and Settings-to-RHP relations. Part of Expensify/Expensify#623849. Made-with: Cursor

PrivatePersonalDetailsPage: single form with all private fields (legal name, DOB, phone, address). Pre-populates from PRIVATE_PERSONAL_DETAILS, validates that previously-set fields cannot be emptied, and navigates to magic code confirmation when any field changes. PrivatePersonalDetailsConfirmMagicCodePage: uses ValidateCodeActionContent to collect a magic code, then calls updatePrivatePersonalDetails() to submit all changes in a single validate-code-protected API call. Part of Expensify/Expensify#623849. Made-with: Cursor

All four private detail rows (legal name, DOB, phone, address) now navigate to the unified PrivatePersonalDetailsPage instead of individual edit pages. The individual pages are kept for backward compatibility with deep links. Part of Expensify/Expensify#623849. Made-with: Cursor

melvin-bot · 2026-04-14T20:03:47Z

@DylanDylann Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5a14d480bd

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

codecov · 2026-04-14T20:14:53Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
src/SCREENS.ts	`100.00% <ø> (ø)`
src/libs/API/types.ts	`100.00% <ø> (ø)`
...igation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts	`100.00% <ø> (ø)`
src/libs/Navigation/linkingConfig/config.ts	`76.92% <ø> (ø)`
src/ROUTES.ts	`17.63% <0.00%> (-0.02%)`	⬇️
...gation/AppNavigator/ModalStackNavigators/index.tsx	`6.78% <0.00%> (-0.02%)`	⬇️
src/pages/settings/Profile/ProfilePage.tsx	`94.94% <71.42%> (+5.52%)`	⬆️
src/libs/PersonalDetailsUtils.ts	`77.77% <0.00%> (-6.56%)`	⬇️
src/libs/actions/PersonalDetails.ts	`50.00% <0.00%> (-7.61%)`	⬇️
...ils/PrivatePersonalDetailsConfirmMagicCodePage.tsx	`0.00% <0.00%> (ø)`
... and 1 more
... and 10 files with indirect coverage changes

…vatePersonalDetails

Convert SETTINGS_PRIVATE_PERSONAL_DETAILS from a plain string to an object with getRoute(fieldToFocus?) so callers can specify which field to auto-focus when the form opens. Update the linking config and navigation types accordingly. Made-with: Cursor

Each private detail row in ProfilePage now passes its corresponding INPUT_ID so the form auto-focuses the tapped field: legal name, DOB, phone number, or address. Made-with: Cursor

Read the fieldToFocus query param and set autoFocus on the matching InputWrapper. For the DatePicker (DOB), autoFocus triggers the calendar modal to open immediately. Made-with: Cursor

After the private personal details update succeeds (isLoading transitions from true to false with no errors), navigate back to the Profile settings page instead of the intermediate form. Made-with: Cursor

When the user edits fields but navigates away without submitting, the draft values were persisted via shouldSaveDraft. Now we call clearDraftValues on unmount so the form always resets to the current saved values when reopened. Made-with: Cursor

Check both privatePersonalDetails.errors and validateCodeAction.errorFields before navigating back to Profile. Invalid magic code errors are stored on the validateCodeAction key, not privatePersonalDetails. Made-with: Cursor

The server sets validate code errors on PRIVATE_PERSONAL_DETAILS.errorFields.personalDetails via Onyx::handleException, but the component was reading from .errors which is never populated. Use getLatestErrorField to read from the correct path so errors are displayed and the success navigation doesn't fire on failure. Made-with: Cursor

jasperhuangg · 2026-04-15T16:47:15Z

@MelvinBot pull main on this PR

…ersonalDetails Co-authored-by: Jasper Huang <jasperhuangg@users.noreply.github.com>

MelvinBot · 2026-04-15T16:56:03Z

Merged main into this branch. ✅

- Add 'Basic details' and 'Address' section headers with sectionTitle style - Replace Country text input with CountrySelector picker component - Add basicDetails translation key to all language files Made-with: Cursor

rafecolton · 2026-05-12T04:24:12Z

Pretty sure that's the standard inline flow that that Jasper is now using. If you open up the new personal details form and zoom out so it all fits on one screen, the button is pinned to the bottom like that:

dubielzyk-expensify · 2026-05-12T05:09:03Z

Can you make the height smaller. I just wanna see how it'll look on mobile. It should be fixed to the bottom there

dannymcclain · 2026-05-12T12:59:08Z

Was just checking the Address form in private details and Add payment card form in subscription, and they both work the way this is currently implemented.

If the screen is long enough to create space between the form and the button, the button sticks to the footer
If the screen is too short, the button does not stick to the viewport bottom and instead just sits at the bottom of the form (beyond the scroll)

CleanShot.2026-05-12.at.07.57.04.mp4

Let's just stick with what we do elsewhere 👍

shawnborton · 2026-05-12T13:08:25Z

Makes sense to me 👍

dubielzyk-expensify · 2026-05-13T00:11:35Z

Sure, I'm up for that.

The reason why I wanted it sticky was because all the other forms are forms where you have to fill the entire thing so it makes sense to have it at the end as you have to ensure it's all correct.

For this new for, you might just wanna set the name or dob or edit them so having the save button visible made most sense to me. But happy to go with the consistency even though the forms works slightly different. Not a big deal.

rafecolton · 2026-05-13T00:19:51Z

@jasperhuangg I tried restarting the performance tests a couple times but they keep failing. I don't think it's related. Can you please try merging main?

jasperhuangg · 2026-05-13T22:19:17Z

@MelvinBot pull main on this PR

…ersonalDetails Co-authored-by: Jasper Huang <jasperhuangg@users.noreply.github.com>

MelvinBot · 2026-05-13T22:31:13Z

Merged main into this branch. No conflicts.

rafecolton · 2026-05-15T02:15:54Z

Web PR is in prod now, this is good to merge

github-actions · 2026-05-15T02:16:38Z

🚧 @rafecolton has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-05-15T02:20:58Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #87928.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-b984e6b-1898b9d-988f03df6ae3faa3250326d277a6fb86f80f2c6c/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-b984e6b-1898b9d-aec4e27cdfa1fac63828d75c0516b96ac6f9246d/index.html

Web 🕸️
https://87928.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-05-15T02:25:53Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2026-05-15T17:22:39Z

🚀 Deployed to staging by https://github.com/rafecolton in version: 9.3.74-7 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

Android
iOS

MelvinBot · 2026-05-15T17:27:26Z

Yes, help site changes are required. PR #87928 replaces the individual private detail edit pages with a unified form + magic code verification, which changes the documented user flow.

Draft PR created: #90803

Articles updated:

Account-Settings.md — Updated "Personal Information" and "Display or Legal Name" sections to describe the unified form and magic code step
Update-Your-Expensify-Card-Mailing-Address.md — Updated legal name and phone number update steps to include the magic code confirmation step

OSBotify · 2026-05-15T18:07:46Z

🚀 Deployed to production by https://github.com/Beamanator in version: 9.3.74-7 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

mitarachim · 2026-05-15T21:54:27Z

Deploy Blocker #90834 was identified to be related to this PR.

Julesssss · 2026-05-15T22:14:07Z

Reverted due to regression: #90834

IuliiaHerets · 2026-05-16T09:50:40Z

Hi @jasperhuangg. Apps don't ask for a magic code when editing a field as step 7 asks.
Do we need to use a beta account to see a new UI?

cc @rafecolton @chuckdries @mjasikowski

26-ios.mp4

chuckdries · 2026-05-18T17:20:24Z

@IuliiaHerets this PR was reverted, so the functionality described is not present in the app at this time

jasperhuangg added 4 commits April 14, 2026 13:01

jasperhuangg requested review from a team as code owners April 14, 2026 20:03

melvin-bot Bot assigned jasperhuangg Apr 14, 2026

melvin-bot Bot requested review from DylanDylann and removed request for a team April 14, 2026 20:03

melvin-bot Bot requested review from trjExpensify and removed request for a team April 14, 2026 20:03

chatgpt-codex-connector Bot reviewed Apr 14, 2026

View reviewed changes

Comment thread src/pages/settings/Profile/PersonalDetails/PrivatePersonalDetailsConfirmMagicCodePage.tsx Outdated

Comment thread src/pages/settings/Profile/PersonalDetails/PrivatePersonalDetailsPage.tsx Outdated

jasperhuangg added 6 commits April 14, 2026 14:50

Merge branch 'main' of github.com:Expensify/App into jasper-securePri…

dd507c3

…vatePersonalDetails

Pass fieldToFocus when navigating to private personal details

2f1b78d

Each private detail row in ProfilePage now passes its corresponding INPUT_ID so the form auto-focuses the tapped field: legal name, DOB, phone number, or address. Made-with: Cursor

Auto-focus field based on route param in private details form

dbb023f

Read the fieldToFocus query param and set autoFocus on the matching InputWrapper. For the DatePicker (DOB), autoFocus triggers the calendar modal to open immediately. Made-with: Cursor

Navigate back to Profile page after successful magic code validation

f610d0a

After the private personal details update succeeds (isLoading transitions from true to false with no errors), navigate back to the Profile settings page instead of the intermediate form. Made-with: Cursor

jasperhuangg marked this pull request as draft April 14, 2026 23:42

jasperhuangg removed request for DylanDylann and trjExpensify April 14, 2026 23:43

jasperhuangg added 2 commits April 14, 2026 16:50

Fix success navigation checking wrong error source

76ccff2

Check both privatePersonalDetails.errors and validateCodeAction.errorFields before navigating back to Profile. Invalid magic code errors are stored on the validateCodeAction key, not privatePersonalDetails. Made-with: Cursor

jasperhuangg changed the title ~~Replace individual private detail edit pages with unified form + magic code~~ [HOLD Web-Expensify#52112] Replace individual private detail edit pages with unified form + magic code Apr 15, 2026

Merge remote-tracking branch 'origin/main' into jasper-securePrivateP…

50f2a49

…ersonalDetails Co-authored-by: Jasper Huang <jasperhuangg@users.noreply.github.com>

Merge remote-tracking branch 'origin/main' into jasper-securePrivateP…

181f3e1

…ersonalDetails Co-authored-by: Jasper Huang <jasperhuangg@users.noreply.github.com>

rafecolton changed the title ~~[HOLD Web-Expensify#52112] Replace individual private detail edit pages with unified form + magic code~~ Replace individual private detail edit pages with unified form + magic code May 15, 2026

rafecolton merged commit b984e6b into main May 15, 2026
36 of 37 checks passed

rafecolton deleted the jasper-securePrivatePersonalDetails branch May 15, 2026 02:16

OSBotify mentioned this pull request May 15, 2026

Deploy Checklist: New Expensify 2026-05-15 #90795

Closed

MelvinBot mentioned this pull request May 15, 2026

Docs updates for E/A#87928 Unified private personal details form with magic code #90803

Closed

mitarachim mentioned this pull request May 15, 2026

Profile - Country is not auto populated, no address suggestion list #90834

Closed

7 tasks

Julesssss mentioned this pull request May 15, 2026

Revert "Replace individual private detail edit pages with unified form + magic code" #90835

Merged

50 tasks

MelvinBot mentioned this pull request May 16, 2026

[Due for payment 2026-05-26] [Due for payment 2026-05-26] [$250] Hmm.. it's not here page displayed after entering magic code #90880

Closed

7 tasks

jasperhuangg mentioned this pull request May 18, 2026

Re-apply secure private personal details + fix address autocomplete and country auto-fill #91000

Merged

62 tasks

jasperhuangg mentioned this pull request May 25, 2026

Re-apply secure private personal details + fix 4 blockers from previous revert #91646

Merged

61 tasks

Uh oh!

Conversation

jasperhuangg commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Apr 14, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

codecov Bot commented Apr 14, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jasperhuangg commented Apr 15, 2026

Uh oh!

MelvinBot commented Apr 15, 2026

Uh oh!

rafecolton commented May 12, 2026

Uh oh!

dubielzyk-expensify commented May 12, 2026

Uh oh!

dannymcclain commented May 12, 2026

Uh oh!

shawnborton commented May 12, 2026

Uh oh!

dubielzyk-expensify commented May 13, 2026

Uh oh!

rafecolton commented May 13, 2026

Uh oh!

jasperhuangg commented May 13, 2026

Uh oh!

MelvinBot commented May 13, 2026

Uh oh!

rafecolton commented May 15, 2026

Uh oh!

Uh oh!

github-actions Bot commented May 15, 2026

Uh oh!

github-actions Bot commented May 15, 2026

Uh oh!

OSBotify commented May 15, 2026

Uh oh!

OSBotify commented May 15, 2026

Uh oh!

MelvinBot commented May 15, 2026

Uh oh!

OSBotify commented May 15, 2026

Uh oh!

mitarachim commented May 15, 2026

Uh oh!

Julesssss commented May 15, 2026

Uh oh!

IuliiaHerets commented May 16, 2026

Uh oh!

chuckdries commented May 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

jasperhuangg commented Apr 14, 2026 •

edited

Loading

codecov Bot commented Apr 14, 2026 •

edited by github-actions Bot

Loading