feat(card): prompt for personal details before virtual card reveal#91634
feat(card): prompt for personal details before virtual card reveal#91634DylanDylann wants to merge 17 commits into
Conversation
Reuses the existing MissingPersonalDetails flow for the virtual-card reveal entry point so users with incomplete details fill them in (name/DOB/address/phone) before viewing the card. ECUK virtual cards go through the SCA reveal scenario afterwards; US virtual cards go to the magic-code reveal page. PIN collection is already excluded for virtual cards by the existing selector. Adds a red dot on the wallet row and a home-page time-sensitive task as additional entry points. Implements Expensify#91461. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
Hey, I noticed you changed If you want to automatically generate translations for other locales, an Expensify employee will have to:
Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running: npx ts-node ./scripts/generateTranslations.ts --helpTypically, you'd want to translate only what you changed by running |
melvin-bot
Bot
requested review from
JmillsExpensify and
lakchote
and removed request for
a team
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.
|
Replaces the 4-API fan-out (updatePersonalDetailsForVirtualCard calling UPDATE_LEGAL_NAME / UPDATE_DATE_OF_BIRTH / UPDATE_PHONE_NUMBER / UPDATE_HOME_ADDRESS) with a single new WRITE_COMMAND modeled on SetPersonalDetailsAndShipExpensifyCards. Cleaner backend contract and keeps the submission atomic from the FE perspective. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
@chuckdries Would you like to take over this PR? |
🦜 Polyglot Parrot! 🦜Squawk! Looks like you added some shiny new English strings. Allow me to parrot them back to you in other tongues: View the translation diffdiff --git a/src/languages/de.ts b/src/languages/de.ts
index 26d5ace68bc..6c6f6240ae0 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -958,6 +958,11 @@ const translations: TranslationDeepObject<typeof en> = {
workspaceSubtitle: ({policyName}: {policyName: string}) => policyName,
personalSubtitle: 'Geldbörse',
},
+ addVirtualCardPersonalDetails: {
+ title: 'Fügen Sie Ihre persönlichen Daten hinzu',
+ subtitle: 'Fügen Sie Ihre Daten hinzu, um Ihre Expensify Karte anzusehen und zu verwenden.',
+ cta: 'Details hinzufügen',
+ },
},
announcements: 'Ankündigungen',
discoverSection: {
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 511d7baf7f4..52e08e15596 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -888,11 +888,7 @@ const translations: TranslationDeepObject<typeof en> = {
subtitle: 'Proporciona una dirección para recibir tu Tarjeta Expensify.',
cta: 'Añade dirección',
},
- addVirtualCardPersonalDetails: {
- title: 'Añade tus datos personales',
- subtitle: 'Añade tus datos para ver y empezar a usar tu Tarjeta Expensify.',
- cta: 'Añadir datos',
- },
+ addVirtualCardPersonalDetails: {title: 'Añade tus datos personales', subtitle: 'Añade tus datos para ver y empezar a usar tu Tarjeta Expensify.', cta: 'Añade detalles'},
addPaymentCard: {
title: 'Añade una tarjeta de pago para seguir usando Expensify',
subtitle: 'Cuenta > Suscripción',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index 079293757c4..23252d0d36b 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -961,6 +961,11 @@ const translations: TranslationDeepObject<typeof en> = {
workspaceSubtitle: ({policyName}: {policyName: string}) => policyName,
personalSubtitle: 'Portefeuille',
},
+ addVirtualCardPersonalDetails: {
+ title: 'Ajoutez vos informations personnelles',
+ subtitle: 'Ajoutez vos informations pour afficher et commencer à utiliser votre Carte Expensify.',
+ cta: 'Ajouter des détails',
+ },
},
announcements: 'Annonces',
discoverSection: {
diff --git a/src/languages/it.ts b/src/languages/it.ts
index 3feb94469cc..e5cb6ad3a59 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -959,6 +959,11 @@ const translations: TranslationDeepObject<typeof en> = {
workspaceSubtitle: ({policyName}: {policyName: string}) => policyName,
personalSubtitle: 'Portafoglio',
},
+ addVirtualCardPersonalDetails: {
+ title: 'Aggiungi i tuoi dati personali',
+ subtitle: 'Aggiungi i tuoi dati per visualizzare e iniziare a usare la tua Carta Expensify.',
+ cta: 'Aggiungi dettagli',
+ },
},
announcements: 'Annunci',
discoverSection: {
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 78c68061cdb..cde18967b15 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -942,6 +942,7 @@ const translations: TranslationDeepObject<typeof en> = {
workspaceSubtitle: ({policyName}: {policyName: string}) => policyName,
personalSubtitle: 'ウォレット',
},
+ addVirtualCardPersonalDetails: {title: '個人情報を追加してください', subtitle: 'Expensify カードを表示して使い始めるには、詳細情報を入力してください。', cta: '詳細を追加'},
},
announcements: 'お知らせ',
discoverSection: {
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index 1a3fc48f906..eb89d8ba9ad 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -957,6 +957,11 @@ const translations: TranslationDeepObject<typeof en> = {
workspaceSubtitle: ({policyName}: {policyName: string}) => policyName,
personalSubtitle: 'Portemonnee',
},
+ addVirtualCardPersonalDetails: {
+ title: 'Voeg je persoonlijke gegevens toe',
+ subtitle: 'Voeg je gegevens toe om je Expensify Kaart te bekijken en te gaan gebruiken.',
+ cta: 'Details toevoegen',
+ },
},
announcements: 'Aankondigingen',
discoverSection: {
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index 995aa727aeb..b265fd7409e 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -959,6 +959,7 @@ const translations: TranslationDeepObject<typeof en> = {
workspaceSubtitle: ({policyName}: {policyName: string}) => policyName,
personalSubtitle: 'Portfel',
},
+ addVirtualCardPersonalDetails: {title: 'Dodaj swoje dane osobowe', subtitle: 'Dodaj swoje dane, aby wyświetlić i zacząć używać swojej Karty Expensify.', cta: 'Dodaj szczegóły'},
},
announcements: 'Ogłoszenia',
discoverSection: {
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index 6fa49367a32..0cfb8f18448 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -957,6 +957,11 @@ const translations: TranslationDeepObject<typeof en> = {
workspaceSubtitle: ({policyName}: {policyName: string}) => policyName,
personalSubtitle: 'Carteira',
},
+ addVirtualCardPersonalDetails: {
+ title: 'Adicione seus dados pessoais',
+ subtitle: 'Adicione seus dados para visualizar e começar a usar seu Cartão Expensify.',
+ cta: 'Adicionar detalhes',
+ },
},
announcements: 'Comunicados',
discoverSection: {
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index 22ed75b0da0..00e60bf1f06 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -925,6 +925,7 @@ const translations: TranslationDeepObject<typeof en> = {
workspaceSubtitle: ({policyName}: {policyName: string}) => policyName,
personalSubtitle: '钱包',
},
+ addVirtualCardPersonalDetails: {title: '添加您的个人信息', subtitle: '添加您的详细信息以查看并开始使用 Expensify 卡。', cta: '添加详细信息'},
},
announcements: '公告',
discoverSection: {
Note You can apply these changes to your branch by copying the patch to your clipboard, then running |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: de5abedd4e
ℹ️ About Codex in GitHub
Codex has been enabled to automatically 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 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 57adf876f9
ℹ️ About Codex in GitHub
Codex has been enabled to automatically 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 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
@codex review |
|
@MelvinBot PLease review this PR |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 08d7567c97
ℹ️ About Codex in GitHub
Codex has been enabled to automatically 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 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
🤖 PR Review All CI checks pass. The overall approach is sound — new SCA scenario for UK/EU virtual cards, home page notification, wallet GBR, and the two code paths (biometrics/passkeys vs magic code) make sense. A few issues: 1. The home page hook ( 2. Unhandled promise rejection in magic code path (MissingPersonalDetailsMagicCodePage.tsx) setPersonalDetailsAndRevealExpensifyCard(values, countryCode, Number(cardID), validateCode).then((details) => {
if (!details) { return; }
...
});There's no 3. Minor style (CardUtils.ts) — missing blank line between Otherwise the implementation looks clean — the refactor from |
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1af90dcf4b
ℹ️ About Codex in GitHub
Codex has been enabled to automatically 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 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 4ad5703884
ℹ️ About Codex in GitHub
Codex has been enabled to automatically 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 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| iconHeight: variables.cardIconHeight, | ||
| isInactive: isCardInactive(card), | ||
| isCardFrozen: isCardFrozen(card), | ||
| shouldShowMissingPersonalDetailsAction: isExpensifyCard(card) && !!card?.nameValuePairs?.isVirtual && hasMissingPersonalDetails, |
There was a problem hiding this comment.
When the app is being used via delegated access, ExpensifyCardPage deliberately hides the virtual-card reveal button (isSignedInAsDelegate gates the right component), but this new wallet-row CTA is shown solely from card type plus missing details. In that delegated context, the user can start the missing-personal-details flow from the wallet list and potentially reach the reveal path that the card detail page suppresses, so this should include the same delegated-access guard before setting the action.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Same comment as below - it's possible we want to let delegates fill out the details but bail before we reveal the PAN. Not sure
There was a problem hiding this comment.
Delegated access can't bypass this flow, a magic code from the original account is still required to enroll the two biometric methods needed to reveal card details. As a result, they cannot complete the address update or reveal without the magic code from the original account
Same discussion here: #91634 (comment)
| if (isVirtualCard) { | ||
| if (personalDetailsMissing) { | ||
| virtualCardsNeedingPersonalDetails.push(card); |
There was a problem hiding this comment.
This adds virtual cards with missing personal details to the time-sensitive home section without checking delegated access. Since the card detail page hides reveal actions when account.delegatedAccess.delegate is set, a delegate can still be prompted from Home to enter the same add-details/reveal flow; gate this list with the same delegate condition so the sensitive card-details path is not advertised there.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Hm, this seems like a requirements question. If delegates are allowed to set personal details, we should probably prompt them here, even if the reveal isn't ultimately allowed? WDYT?
There was a problem hiding this comment.
Currently, this flow triggers the reveal card action, along with prompting for the personal details. If users are delegated access, they can't bypass this flow because a magic code from the original account is still required to enroll the two biometric methods needed to reveal card details. As a result, they cannot complete the address update and reveal card without the magic code from the original account. I can think of two options for delegated access users:
- Navigate them directly to the personal detail prompt flow without revealing the card (preferred)
- Hide the add detail button from them
I'd like to hear your thoughts on which approach works better.
joekaufmanexpensify
requested review from
joekaufmanexpensify
and removed request for
JmillsExpensify
rafecolton
requested review from
chuckdries and
rafecolton
and removed request for
lakchote
chuckdries
left a comment
chuckdries
left a comment
There was a problem hiding this comment.
Things are looking decent. A few questions, and can you please fill out some test steps for documentation purposes?
| setRevealedVirtualCardDetails(cardID, details); | ||
| clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM); | ||
| Navigation.closeRHPFlow(); | ||
| Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAIN_CARD.getRoute(cardID)); |
There was a problem hiding this comment.
Why do we close the RHP explicitly before navigating here?
There was a problem hiding this comment.
Closing RHPs is necessary to refresh the navigation stack after revealing card details
| const [areAllCardsShipped] = useOnyx(ONYXKEYS.CARD_LIST, {selector: areAllExpensifyCardsShipped}); | ||
| const targetCardSelector = useCallback((cardList: OnyxEntry<CardList>) => (cardID ? cardList?.[cardID] : undefined), [cardID]); | ||
| const [targetCard] = useOnyx(ONYXKEYS.CARD_LIST, {selector: targetCardSelector}); | ||
| const isVirtualCard = !!targetCard?.nameValuePairs?.isVirtual; |
There was a problem hiding this comment.
In this file, is there any chance of something bad happening if targetCard is temporarily undefined because it's still hydrating from onyx i.e. on reload?
There was a problem hiding this comment.
I tested accessing this page by deep link right after clearing the cache, but I didn't encounter any problem. Card data is only used after the confirm button is triggered. Even though the data is hydrating when users arrive, I believe that after they fill in the magic code and click the confirm button, the data will be available
| if (isVirtualCard) { | ||
| if (personalDetailsMissing) { | ||
| virtualCardsNeedingPersonalDetails.push(card); |
There was a problem hiding this comment.
Hm, this seems like a requirements question. If delegates are allowed to set personal details, we should probably prompt them here, even if the reveal isn't ultimately allowed? WDYT?
4 participants
Explanation of Change
Fixed Issues
$ #91461
PROPOSAL:
Tests
Offline tests
QA Steps
Assign to @joekaufmanexpensify for QA
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
EU/UK virtual card
Screen.Recording.2026-05-27.at.01.18.35.mov
US virtual card
Screen.Recording.2026-05-28.at.15.29.41.mov