Show Submit/Approve/Pay actions for selected transactions when all expenses are selected #78426
Conversation
…ons to selected transactions
- Fix type import in useSelectedTransactionsActions.ts (use 'import type') - Remove unused KYCPaymentMethod import in PaymentUtils.ts - Add ValueOf import and type assertion in ActionCell.tsx for PaymentData compatibility - Update SettlementButton to use object params for all onPress calls
melvin-bot
bot
requested review from
flaviadefaria,
heyjennahay and
situchan
and removed request for
a team
melvin-bot
bot
requested review from
JmillsExpensify,
joekaufmanexpensify and
trjExpensify
and removed request for
a team
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| <Button | ||
| success | ||
| onPress={confirmApproval} | ||
| onPress={() => confirmApproval()} |
There was a problem hiding this comment.
❌ PERF-4 (docs)
Creating inline arrow functions as props causes unnecessary re-renders because a new function reference is created on every render. React uses referential equality to determine if props changed, so even if the logic is identical, the new function instance triggers re-renders of child components.
Wrap this function in useCallback to preserve referential stability:
const handleConfirmApproval = useCallback(() => confirmApproval(), [confirmApproval]);
// Then use it in the Button:
onPress={handleConfirmApproval}Note: For this to be fully effective, confirmApproval itself should also be wrapped in useCallback.
| value: CONST.REPORT.SECONDARY_ACTIONS.APPROVE, | ||
| sentryLabel: CONST.SENTRY_LABEL.MORE_MENU.APPROVE, | ||
| onSelected: confirmApproval, | ||
| onSelected: () => confirmApproval(true), |
There was a problem hiding this comment.
❌ PERF-4 (docs)
Creating inline arrow functions in object literals that are recreated on every render causes unnecessary recomputations of dependent values. The secondaryActionsImplementation object is recreated on every render, and since applicableTransactionActions depends on it via useMemo, it will also be recreated, defeating the purpose of memoization.
To fix this, wrap secondaryActionsImplementation in useMemo or extract stable callback references:
const handleApproveWithSkipAnimation = useCallback(() => confirmApproval(true), [confirmApproval]);
// Then use in the object:
[CONST.REPORT.SECONDARY_ACTIONS.APPROVE]: {
text: translate(iou.approve),
icon: expensifyIcons.ThumbsUp,
value: CONST.REPORT.SECONDARY_ACTIONS.APPROVE,
sentryLabel: CONST.SENTRY_LABEL.MORE_MENU.APPROVE,
onSelected: handleApproveWithSkipAnimation,
}Alternatively, wrap the entire secondaryActionsImplementation object in useMemo with appropriate dependencies.
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.
|
1 participant
Explanation of Change
This PR adds support for displaying report-level actions (Submit, Approve, Pay) in the selected transactions dropdown when all expenses in a report are selected. This allows users to perform bulk report actions directly from the expense selection UI.
Key Changes
Fixed Issues
$ #72502
PROPOSAL: #72502 (comment)
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
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
Screen.Recording.2025-12-24.at.5.21.59.PM.mp4