Migrate ExpensifyCard/ConfirmationPage to Navigation-Based Validation#76241
Conversation
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.
|
|
@aimane-chnaif 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] |
|
@mjasikowski 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] |
| sendValidateCode={() => requestValidateCodeAction()} | ||
| validateCodeActionErrorField={data?.cardType === CONST.EXPENSIFY_CARD.CARD_TYPE.PHYSICAL ? 'createExpensifyCard' : 'createAdminIssuedVirtualCard'} | ||
| handleSubmitForm={handleSubmit} | ||
| validateError={validateError} |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The inline function () => setValidateError({}) creates a new function instance on every render, which causes child components to recreate their memoized callbacks that depend on clearError. This can trigger unnecessary re-renders.
Wrap this function with useCallback:
const clearError = useCallback(() => setValidateError({}), []);Then pass it directly:
clearError={clearError}
src/pages/workspace/expensifyCard/issueNew/IssueNewCardConfirmMagicCodePage.tsx
Outdated
Show resolved
Hide resolved
src/pages/workspace/expensifyCard/issueNew/IssueNewCardConfirmMagicCodePage.tsx
Outdated
Show resolved
Hide resolved
|
I feel like PERF-4 sugesstions on this PR are an overkill, what do you think @aimane-chnaif ? |
first one seems overkill but others seem fine to me |
JmillsExpensify
left a comment
There was a problem hiding this comment.
Changes approved by product (though a product review isn't strictly required here).
|
@jmusial is there any way to skip onfido step?
|
|
After adding bank account, it doesn't go to Issue card step. Screen.Recording.2025-12-02.at.8.34.13.am.movAny way to test manually? |
You need to be on staging server & use those creds. Sometimes it does not work, then create a new account and add the bank there |
Maybe it's connected with |
Ok will add them for the latter 2 |
Onfido step was skipped using these credentials, and bank account was created successfully. |
Then dunno :( I had no issue with that |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppandroid.movAndroid: mWeb Chromemchrome.moviOS: HybridAppios.moviOS: mWeb SafariMacOS: Chrome / Safariweb.mov |
@jmusial how can I bypass this? Btw, there's regression from this PR. The error message with RBR doesn't show after input correct magic code. Screen.Recording.2025-12-04.at.9.59.00.am.movWorks fine on main:
|
Dunno about the domain :( |
|
@aimane-chnaif did you have the issue when here on account verification you get response like: |
yes, I just reproduced. |
Ok, I think I fixed that one, can you check plz? |
I got this now @jmusial how did you bypass? |
Didn't but found another error that weren't showing on this branch but visible on main and figured out what was the difference from there. |
|
@aimane-chnaif is there anything you need to finish reviewing here? |
|
Currently blocked testing by this backend bug - #76324 (comment) |
@jmusial your bug was reported here. |
|
I managed to test by bypassing blocked issues. Here's hardcoding steps:
|
|
🚀 Deployed to staging by https://github.com/mjasikowski in version: 9.2.75-0 🚀
|
|
🚀 Deployed to staging by https://github.com/mjasikowski in version: 9.2.75-0 🚀
|
|
🚀 Deployed to staging by https://github.com/mjasikowski in version: 9.2.77-0 🚀
|
|
🚀 Deployed to production by https://github.com/yuwenmemon in version: 9.2.77-1 🚀
|
| } | ||
| if (backTo && shouldUseBackToParam) { | ||
| Navigation.goBack(backTo); | ||
| } else { |
There was a problem hiding this comment.
Came from this issue
We have a bit specific case when app reopens Expensify Card page after issuing card and swiping right on ios
More context here







Explanation of Change
Refactor
ExpensifyCard/ConfirmationPageto use navigation based confirm modal page instead of modal based.Fixed Issues
$ #75871
PROPOSAL:
Tests
Offline tests
QA Steps
Same as tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand 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
Android: Native
0076.android.native.mov
Android: mWeb Chrome
0076.android.chrome.mov
iOS: Native
0076.ios.native.mov
iOS: mWeb Safari
0076.ios.safari.mov
MacOS: Chrome / Safari
0076.desktop.chrome.mov