fix: refactor modals part 1(TroubleshootPage, CardSection, SecuritySettingsPage, CloseAccountPage)#79556
Conversation
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
melvin-bot
bot
requested review from
ZhenjaHorbach and
joekaufmanexpensify
and removed request for
a team
|
@ZhenjaHorbach 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] |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| titleStyle={styles.textStrong} | ||
| onPress={viewPurchases} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
❌ PERF-8 (docs)
The async inline function in the onPress handler is being used to handle a user event. This creates unnecessary complexity and should be avoided.
Reasoning: Event handlers should handle events directly. Creating an async inline function makes the code harder to read and adds unnecessary indirection between the user action and the response.
Suggested fix: Extract the async logic into a named async function:
const handleRequestRefund = async () => {
const result = await showRequestRefundModal();
if (result.action !== ModalActions.CONFIRM) {
return;
}
requestRefund();
};
// Then in the MenuItem:
<MenuItem
shouldShowRightIcon
icon={expensifyIcons.Bill}
wrapperStyle={styles.sectionMenuItemTopDescription}
title={translate('subscription.cardSection.requestRefund')}
titleStyle={styles.textStrong}
disabled={isOffline}
onPress={handleRequestRefund}
/>
|
No product considerations. Removing my review |
|
@ZhenjaHorbach I addressed all your comments |
@truph01 |
|
@truph01 |
|
@ZhenjaHorbach I just fixed conflicts |
|
@truph01 you've got conflicts again here |
|
@truph01 |
|
@ZhenjaHorbach All good now! |
|
Sorry @truph01 we have conflicts here again |
|
@truph01 |
|
@ZhenjaHorbach All good now! |
roryabraham
left a comment
roryabraham
left a comment
There was a problem hiding this comment.
Going to approve and merge just to avoid conflicts, please create a follow-up PR to remove the lint suppression
| }); | ||
|
|
||
| useEffect(() => { | ||
| // eslint-disable-next-line react-hooks/set-state-in-effect |
There was a problem hiding this comment.
Do not suppress this - it's a warning not an error. If you had lint failing that likely means you introduced other warnings somewhere else. It just hides the warning, which isn't a good thing.
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚧 @roryabraham has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/roryabraham in version: 9.3.28-0 🚀
|
|
Hi @truph01. How can we get the 
cc @roryabraham |
|
@truph01 @roryabraham @ZhenjaHorbach How to get |
Unfortunately, I used mocks |
|
🚀 Deployed to staging by https://github.com/roryabraham in version: 9.3.30-0 🚀
|
|
🚀 Deployed to production by https://github.com/blimpich in version: 9.3.30-3 🚀
|
7 participants
Explanation of Change
Fixed Issues
$ #76693
PROPOSAL:
Tests
Test 1: CloseAccountPage
Test 2: TroubleshootPage
Test 3: SecuritySettingsPage
Requirement: Account has a few delegate accounts
Test 4: CardSection
Offline tests
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
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
Screen.Recording.2026-01-15.at.18.18.02.mov
Android: mWeb Chrome
Uploading Screen Recording 2026-01-15 at 18.14.40.mov…
iOS: Native
Screen.Recording.2026-01-15.at.18.12.58.mov
iOS: mWeb Safari
Screen.Recording.2026-01-15.at.18.09.12.mov
MacOS: Chrome / Safari
TroubleshootPage.tsx
Screen.Recording.2025-12-10.at.01.10.54.mov
CardSection.tsx
Screen.Recording.2025-12-10.at.01.14.05.mov
SecuritySettingsPage.tsx
Screen.Recording.2025-12-10.at.01.15.34.mov
CloseAccountPage.tsx