Clarify Approval Options When Held Expenses Exist#70825
Clarify Approval Options When Held Expenses Exist#70825marcochavezf merged 68 commits intoExpensify:mainfrom
Conversation
|
@parasharrajat 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] |
|
Just to confirm, what line height are you using here? I believe it should be 16px, which is what we'd have in Figma. |
@shawnborton I use default font size label that used for existing similar places which is dynamic across devices with default value is 13 and maximum value is 19 |
src/languages/es.ts
Outdated
| keepAll: 'Mantener todos', | ||
| confirmApprove: 'Confirmar importe a aprobar', | ||
| confirmApprovalAmount: 'Aprueba sólo los gastos conformes, o aprueba todo el informe.', | ||
| confirmApprovalWithHeldAmount: 'El informe contiene gastos retenidos. ¿Aprobar sólo los gastos conformes, o aprobar todo el informe?', |
There was a problem hiding this comment.
There was a problem hiding this comment.
I have updated the correct translation
src/components/MoneyReportHeader.tsx
Outdated
| text={translate('iou.approve')} | ||
| /> | ||
| ); | ||
| })(), |
There was a problem hiding this comment.
Can you please a new component for this instead?
I'm talking about the line height. Can you confirm the line height size? |
src/libs/ApprovalUtils.ts
Outdated
| /** | ||
| * Generates dropdown options for approve button when there are held expenses | ||
| */ | ||
| function getApprovalDropdownOptions( |
There was a problem hiding this comment.
let's move this function to the new component
|
Hi @shawnborton, currently I don't set any line-height here, it will be default value based on font size. However, I see in our codebase, we have dynamic line height from 16 - 21. I could update to add it. The result will look like this. For my screen size, it uses 16px for line height 
|
|
@parasharrajat I have resolved all your comments. Kindly check again. Thanks |
| shouldUseOptionIcon?: boolean; | ||
|
|
||
| /** Used to apply styles specifically to the header text */ | ||
| headerStyles?: StyleProp<TextStyle>; |
There was a problem hiding this comment.
Rename this to be more suitable for the purpose it serves. Let's be clear whose header.
src/languages/es.ts
Outdated
| keepAll: 'Mantener todos', | ||
| confirmApprove: 'Confirmar importe a aprobar', | ||
| confirmApprovalAmount: 'Aprueba sólo los gastos conformes, o aprueba todo el informe.', | ||
| confirmApprovalWithHeldAmount: 'El informe contiene gastos retenidos. ¿Aprobar sólo los gastos conformes, o aprobar todo el informe?', |
| onPress={() => confirmApproval()} | ||
| /> | ||
| ), | ||
| [CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE]: (() => { |
There was a problem hiding this comment.
Does not look like you updated this?
src/components/ApprovalButton.tsx
Outdated
|
|
||
| return { | ||
| options, | ||
| menuHeaderText: translate('iou.confirmApprovalWithHeldAmount'), |
There was a problem hiding this comment.
Can you directly add this in component?
src/components/ApprovalButton.tsx
Outdated
| return { | ||
| options, | ||
| menuHeaderText: translate('iou.confirmApprovalWithHeldAmount'), | ||
| shouldShowDropdown, |
There was a problem hiding this comment.
Not needed. Let's just add the check directly where needed.
src/components/ApprovalButton.tsx
Outdated
| /** | ||
| * Generates dropdown options for approve button when there are held expenses | ||
| */ | ||
| function getApprovalDropdownOptions( |
src/components/ApprovalButton.tsx
Outdated
| onApprovePartial: () => void, | ||
| onApproveFull: () => void, |
There was a problem hiding this comment.
| onApprovePartial: () => void, | |
| onApproveFull: () => void, | |
| onPartialApprove: () => void, | |
| onFullApprove: () => void, |
src/components/MoneyReportHeader.tsx
Outdated
| }); | ||
| } | ||
| }} | ||
| onConfirmApproval={confirmApproval} |
There was a problem hiding this comment.
what is this doing now? Can we just use onApprove?
There was a problem hiding this comment.
I don't think so because they are for different purpose. However, pls let me know your thoughts?
|
@mkzie2 Please merge main and add offline testing steps. |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
| icon: illustrations.DocumentCheck, | ||
| onSelected: onFullApprove, | ||
| keyForList: APPROVE_FULL, | ||
| subMenuHeaderText: translate('iou.confirmApprovalWithHeldAmount'), |
|
BUG: Secondary menu does not close on approve action. 06.02.2026_18.27.41_REC.mp4 |
|
@parasharrajat Fixed the bug and addressed the comments. |
Screenshots🔲 iOS / native05.01.2026_16.01.42_REC.mp4🔲 iOS / Safari05.01.2026_16.14.30_REC.mp4🔲 MacOS / Chrome05.01.2026_16.17.00_REC.mp4🔲 Android / Chrome🔲 Android / native06.02.2026_21.49.44_REC.mp4 |
parasharrajat
left a comment
parasharrajat
left a comment
There was a problem hiding this comment.
Reviewer Checklist
- I have verified the author checklist is complete (all boxes are checked off).
- I verified the correct issue is linked in the
### Fixed Issuessection above - I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the
Testssection - I verified the steps for Staging and/or Production testing are in the
QA stepssection - I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
- I verified the steps for local testing are in the
- I checked that screenshots or videos are included for tests on all platforms
- I included screenshots or videos for tests on all platforms
- I verified tests pass on all platforms & I tested again on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
- If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
- I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e.
toggleReportand notonIconClick). - I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g.
myBool && <MyComponent />. - I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to
src/languages/*files and using the translation method - I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the
Waiting for Copylabel for a copy review on the original GH to get the correct copy. - I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in
STYLE.md) were followed
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e.
- If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
- I verified that this PR follows the guidelines as stated in the Review Guidelines
- I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like
Avatar, I verified the components usingAvatarhave been tested & I retested again) - I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
- I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
- If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a
/** comment above it */ - The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to
thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor) - Any internal methods bound to
thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick) - All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
- If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
- If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e.
StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
- If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
- If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like
Avataris modified, I verified thatAvataris working as expected in all cases) - If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
- If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
- If the PR modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added
Designlabel so the design team can review the changes.
- If a new page is added, I verified it's using the
ScrollViewcomponent to make it scrollable when more elements are added to the page. - If the
mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps. - I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.
🎀 👀 🎀 C+ reviewed
marcochavezf
left a comment
marcochavezf
left a comment
There was a problem hiding this comment.
Code Review: Clarify Approval Options When Held Expenses Exist
PR Summary: This PR changes the approval flow when held expenses exist on a report. Instead of showing a single "Approve" button that opens a modal dialog, it now presents the approval options directly in the button's dropdown menu, making the two choices (partial vs. full approval) visible before clicking.
Files changed: 22 files, ~330 additions, ~170 deletions
Architecture & Design
Well-structured extraction: The new ExpenseHeaderApprovalButton component is a clean extraction that encapsulates the conditional logic for rendering either a dropdown (when held expenses exist) or a simple button. The getApprovalDropdownOptions helper being exported separately and reused in MoneyReportHeader for secondary actions is a good pattern that avoids duplication.
Clean separation of concerns: Removing the approval logic from ProcessMoneyReportHoldMenu so it only handles the pay hold flow is a meaningful simplification. The component went from handling two concerns (approve + pay) to just one (pay), which removes several hooks (usePermissions, violation checks) that are no longer needed there.
Potential Issues & Questions
-
Fallback when
shouldShowDropdownis true butapprovalOptions.length <= 1:
InExpenseHeaderApprovalButton, whenshouldShowDropdownistruebut the options array has only one entry (the full-approval option becausehasOnlyHeldExpensesis true orhasValidNonHeldAmountis false), the code falls through to the plainButtonthat callsonApprove(true). This is correct behavior -- if all expenses are held, a dropdown with a single option would be awkward. However, theonApprovecallback inMoneyReportHeaderalways callsapproveMoneyRequestwith theisFullApprovalparameter directly, bypassing the oldconfirmApprovalpath. This means the delegate access check and the DWE modal check that exist inconfirmApprovalare not invoked through theExpenseHeaderApprovalButtonpath. TheisDelegateAccessRestrictedguard is insideExpenseHeaderApprovalButtoncontrolling whether to show the dropdown, but it does not prevent the plainButtonfrom firingonApprove(true)whenshouldShowDropdownis false. Is this intentional? The old code path routed throughconfirmApprovalwhich checked for DWE and delegate access. Please verify that the new flow does not bypass these checks when held expenses exist. -
onPress={() => {}}onButtonWithDropdownMenu:
InExpenseHeaderApprovalButton, theonPresshandler is an empty function() => {}. Looking atButtonWithDropdownMenu,onPressis typically invoked when the main button area is clicked. WithshouldAlwaysShowDropdownMenuset totrue, the dropdown always opens, so the emptyonPressis effectively a no-op. This works but is a minor code smell -- consider adding a comment explaining whyonPressis intentionally empty, or consider whether the component API could be improved to not require it. -
hasNonHeldExpensesprop removed fromProcessMoneyReportHoldMenurendering:
InMoneyRequestReportPreviewContent, theProcessMoneyReportHoldMenuno longer receiveshasNonHeldExpenses. Looking at the diff, it seemshasNonHeldExpenseswas removed from the JSX but is still expected by the component's type definition. Actually, I see it's not in the diff for that file -- let me re-check. It appearshasNonHeldExpenseswas removed in theMoneyRequestReportPreviewContentrendering but the component still accepts it. This is fine as it has no default, but please double-check that the payment hold modal still renders correctly withouthasNonHeldExpensesbeing passed. Edit: I see on closer inspection it is still not passed in the new code at line ~908. The component type still hashasNonHeldExpensesbut it's no longer passed. This could cause the prompt text to always show the "all held" message variant even when there are non-held expenses in the pay flow. -
PopoverMenu
currentHeaderTextcomputation traverses all sub-menu indexes:
TheuseMemoinPopoverMenuiterates throughenteredSubMenuIndexesto find the current header. This is correct for nested sub-menus, but the logicshouldAlwaysShowHeaderTextis set from the last traversed item'ssubMenuHeaderText. If a parent item hassubMenuHeaderTextbut a child does not,shouldAlwaysShowHeaderTextbecomes false. This seems intentional but could be fragile for deeper nesting scenarios. -
Key change in
renderHeaderText:
The key changed from"header-text"to a template literal\${currentHeaderText}_${shouldPutHeaderTextAfterBackButton}``. This will cause React to unmount/remount the Text component whenever the header text changes, rather than just updating it. This may cause a brief flash or animation reset. If the intent is to trigger a re-render, a comment explaining this would be helpful.
Minor Notes
- The SVG file
document-check.svgis missing a trailing newline. While this is cosmetic, it can cause "no newline at end of file" warnings. - The
lineHeightNormalstyle addition insrc/styles/index.tsis clean and follows the existing pattern. - Language file changes are consistent across all 10 locale files -- the old 3 keys (
confirmApprove,confirmApprovalAmount,confirmApprovalAllHoldAmount) are properly replaced with the singleconfirmApprovalWithHeldAmountkey.
Overall Assessment
This is a solid improvement to the UX. The approach of surfacing approval options directly in the dropdown rather than behind a modal is a meaningful usability win. The code is well-organized with the new ExpenseHeaderApprovalButton component. The main concern is around item (1) above -- ensuring the delegate access and DWE checks are not bypassed in the new approval flow when held expenses are present.
🤖 This comment was generated with the assistance of an AI tool.
![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: 0656dabff8
ℹ️ 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".
| const onApprove = (isFullApproval: boolean) => { | ||
| startApprovedAnimation(); | ||
| approveMoneyRequest(moneyRequestReport, policy, accountID, email ?? '', hasViolations, isASAPSubmitBetaEnabled, nextStep, betas, isFullApproval); | ||
| if (currentSearchQueryJSON) { |
There was a problem hiding this comment.
This callback now invokes approveMoneyRequest directly, bypassing the confirmApproval gating logic in the same component. As a result, approvals from this path no longer stop for dynamic external workflow accounts (hasDynamicExternalWorkflow && !isDEWBetaEnabled) or delegate-restricted users, so those users can trigger approval requests instead of seeing the expected blocking modal flow.
Useful? React with 👍 / 👎.
| onApprove={(isFullApproval) => { | ||
| startApprovedAnimation(); | ||
| approveMoneyRequest( | ||
| iouReport, |
There was a problem hiding this comment.
The preview approve handler now directly calls approveMoneyRequest instead of routing through confirmApproval, which means the dynamic external workflow check and delegate-access block are skipped on this screen. In DEW-nonbeta or delegate-restricted contexts, pressing Approve here can execute an approval request when the previous behavior was to show the corresponding modal restriction.
Useful? React with 👍 / 👎.
| <ProcessMoneyReportHoldMenu | ||
| nonHeldAmount={!hasOnlyHeldExpenses && hasValidNonHeldAmount ? nonHeldAmount : undefined} | ||
| fullAmount={fullAmount} | ||
| onClose={() => setIsHoldMenuVisible(false)} | ||
| isVisible={isHoldMenuVisible} |
There was a problem hiding this comment.
ProcessMoneyReportHoldMenu still uses hasNonHeldExpenses to decide whether to show the partial-payment option and non-held prompt, but this invocation no longer passes that prop. For reports that have both held and non-held expenses, the preview pay flow will now always render the "all held" variant and hide the "pay only" path.
Useful? React with 👍 / 👎.
|
I will check these things tomorrow. |
|
I applied the suggestions. |
|
🚧 @marcochavezf 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! 🧪🧪
|
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/marcochavezf in version: 9.3.25-0 🚀
|
|
🚀 Deployed to production by https://github.com/puneetlath in version: 9.3.25-13 🚀
|
9 participants
Explanation of Change
Fixed Issues
$ #70383
PROPOSAL: #70383 (comment)
Tests
Offline tests
QA Steps
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.mov
Android: mWeb Chrome
android-web.mov
iOS: Native
ios.mov
iOS: mWeb Safari
ios-web.mov
MacOS: Chrome / Safari
web.mov
MacOS: Desktop
desktop.mov