feat: standardize pay button for expenses and IOUs by getusha · Pull Request #66790 · Expensify/App

getusha · 2025-07-21T11:20:36Z

Explanation of Change

Standardize pay button for IOUs and Expenses

Fixed Issues

$ #61744 #55874 #55875
PROPOSAL:

Tests

Paying IOU for the first time - preview

Account B: submits an expense to Account A (a US based account)
Account A: Navigate to the expense preview and press on Pay %amount% button
Verify you are presented with 3 options Pay with personal account, Pay with business account, Mark as paid
Press Pay with personal account
Verify that you are prompted to setup a PBA
Complete steps to add PBA
Press on Pay %amount% button
Verify Pay with business account is present
Press Pay with business account
Verify that a collect workspace is created and the IOU is moved to the new workspace chat
Verify that there is a system message that clarifies the IOU is moved
Navigate to the new workspace
Create a new IOU
Verify that there is Pay via %workspace name% option
Press the option in step 14
Verify that the IOU is moved to the existing workspace

Paid IOU before - preview

Account B: Submit an expense to Account A
Account A: Open the chat to Account B and pay the IOU using any payment method
Verify that the recently used payment method is selected
Account B: Submit another expense
Account A: Tap on the default option on the new IOU
Verify that the IOU is paid

Paying expense report for the first time - preview

Preconditions

Have a workspace with a preferred currency of USD
Steps
Submit an expense to the workspace
Login to the admin account and open the expense chat
Verify that the settlement button matches the design below
Press on the settlement button
Verify that there is Pay with business account and Mark as paid.
Verify the expense view has the same pattern

Paying expense report for the first time - held expense

Preconditions

A workspace with an expense that has held amount
Steps
Press on the settlement button
Verify that you're presented with a dropdown to select the payment method first
Press on any payment method
Verify you're presented with a modal to confirm whether you want to pay the full or not-held amount.

Paid expense report before - preview

Preconditions

A workspace chat with previously paid expenses using a BBA
A new expense report inside the workspace chat
Steps
Navigate to the workspace chat
Verify the settlement button matches the pattern below

Test 65118:

Go to workspace chat.
Create an expense.
Tap Submit and Approve.
Go to Reports.
Tap Pay.
Select Mark as paid.
Verify that you can pay the expense

Test 65118:

Navigate to "Workspaces" and create a new workspace.
Open "Workflows" and disable delayed submissions and approvals.
Navigate to workspace chat.
Submit a manual expense.
Navigate to "Reports"
Check the size of the "Pay" button.
Return to chat and mark the expense as paid.
Open the expense and cancel the payment.
Return to "Reports"
Verify that the "Pay" button has the same size as before.

Test 65125

Go to staging.new.expensify.com
[User A] Submit an expense to User B.
[User B] Pay the expense.
[User A] Submit another expense to User B.
[User B] Go to Account > Preferences > Language.
[User B] Change the language to Spanish or Dutch
[User B] Go to Reports.
Verify that you see the Pay button.

Test 65120

Precondition:
User B has paid an expense from User A at least once.

Go to staging.new.expensify.com
[User A] Submit an expense to User B.
[User B] Go to Reports > Expenses.
[User B] Go offline.
[User B] Verify that Pay button is disabled.

Verify that no errors appear in the JS console

Offline tests

N/a

QA Steps

Same as tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

MacOS: Chrome / Safari

Paying IOU for the first time - preview

Paid IOU before - preview

Paying expense report for the first time - preview

Paying expense report for the first time - held expense

Screen.Recording.2025-04-22.at.6.11.01.in.the.evening.mov

Paid expense report before - preview

…tton-expense-n-ious-2

melvin-bot · 2025-07-21T13:12:06Z

@rojiphil 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]

getusha · 2025-07-21T13:16:41Z

@hungvu193 will review this

github-actions · 2025-07-21T13:21:14Z

🚧 @joekaufmanexpensify has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2025-07-21T20:24:31Z

🚧 @joekaufmanexpensify has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2025-07-21T21:04:04Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪
Built from App PR #66790.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/66790/index.html	https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/66790/index.html

Desktop 💻	Web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/66790/NewExpensify.dmg	https://66790.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

hungvu193 · 2025-07-22T06:59:16Z

Still under reviewing 👀

src/styles/utils/index.ts

src/libs/actions/Search.ts

src/components/SettlementButton/index.tsx

hungvu193 · 2025-07-22T10:07:44Z

src/libs/IOUUtils.ts

+let lastUsedPaymentMethods: OnyxEntry<LastPaymentMethod>;
+Onyx.connect({
+    key: ONYXKEYS.NVP_LAST_PAYMENT_METHOD,
+    callback: (value) => (lastUsedPaymentMethods = value),
+});
+


I believe we avoid using Onyx.connect from now on and will remove it completely soon.

FYI: https://expensify.slack.com/archives/C05LX9D6E07/p1748457444774569

I also recently reviewed a PR related to this kind of issue (the function is not PURE function, so when Onyx.connect update the data, the component doesn't re-render).

Lets test it thoroughly this required a lot of change :/

Yes we stopped using Onyx.connect. We should avoid adding a new call to it in this PR

src/libs/IOUUtils.ts

src/components/KYCWall/BaseKYCWall.tsx

joekaufmanexpensify · 2025-07-22T21:15:56Z

Previously reported bugs supposed to be fixed here:

Expense - Long workspace name on the Pay button is not truncated: Retested and fixed 👍
Expense - Pay button still shows the deleted workspace name: Retested and fixed 👍
Expense - Unable to scroll the bottom modal More section on the Expense that needs approval: retested and fixed 👍
Expense - No top and bottom padding in More menu on small screen: Not quite sure this is fixed correctly. Discussing here.
Expense - Confirm modal appears with delay after selecting Mark as paid when expense is held: Retested and fixed 👍
Expense - Pay button does not update accordingly after changing workspace: retested and fixed 👍

joekaufmanexpensify · 2025-07-22T21:16:17Z

Reported another bug here

hungvu193 · 2025-07-23T01:26:38Z

Thanks @joekaufmanexpensify I'll check it today

src/components/PopoverMenu.tsx

src/libs/MoneyRequestReportUtils.ts

grgia · 2025-07-23T15:58:08Z

src/libs/actions/Policy/Policy.ts

+                                name: policyID,
+                            },
+                            lastUsed: {
+                                name: policyID,
+                            },


I don't think this is correct. Do we need this update at all?

We can pay with Policy, as I remember. that's why we saved it here

but the name key @hungvu193

@grgia could you elaborate? please

@getusha, shouldn't the name key be a type, not the policyID? ie. CONST.IOU.PAYMENT_TYPE

grgia · 2025-07-23T16:08:27Z

src/libs/actions/BankAccounts.ts

        ],
    };

+    if (personalPolicy?.id && !lastUsedPaymentMethod) {


We're not making BE updates for the Bank account creation or policy creation.

I opened a BE issue here https://github.com/Expensify/Expensify/issues/528452

This is the list of affected commands

ConnectBankAccountWithPlaid

AddPersonalBankAccount

RestartBankAccountSetUp

DeletePaymentBankAccount

DeleteWorkspace

MoveIOUReportToPolicyAndInviteSubmitter

MoveIOUReportToPolicy

Quick question: lastUsedPaymentMethod is object with several options. For example, if lastUsedPaymentMethod = {expense: CONST.IOU.PAYMENT_TYPE.EXPENSIFY}, don’t we want to update iou in this case?

So shouldn't it look like this?

if (personalPolicy?.id && !lastUsedPaymentMethod?.iou) {

Thanks @jnowakow!
@grgia any changes required here?

joekaufmanexpensify · 2025-07-23T18:21:54Z

Found one more bug where deleting a workspace is broken. Reported here.

grgia

🤞

Julesssss · 2025-08-01T19:08:07Z

I think this PR introduced the broken test check on main.

getusha · 2025-08-01T19:10:23Z

@Julesssss PR to fix it is up

github-actions · 2025-08-04T19:59:12Z

🚀 Deployed to staging by https://github.com/grgia in version: 9.1.89-1 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

grgia · 2025-08-06T15:03:14Z

Note follow up: #68027
There is bug on production that is unrelated to this PR that we are looking into

github-actions · 2025-08-06T19:30:08Z

🚀 Deployed to production by https://github.com/jasperhuangg in version: 9.1.89-21 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	failure ❌

eh2077 · 2025-08-15T15:16:55Z

src/components/SettlementButton/index.tsx

-                        savePreferredPaymentMethod(policyIDKey, option.value);
-                    }}
+                    options={paymentButtonOptions}
+                    onOptionSelected={(option) => handlePaymentSelection(undefined, option.value, triggerKYCFlow)}


This change caused

[Due for payment 2025-08-15] [RCA #66790] Expense - Mark as paid is registered twice when paying IOU report and error shows up #67835

We should only call handlePaymentSelection if paymentButtonOptions.length === 1

dominictb · 2025-09-29T16:40:09Z

src/components/SettlementButton/index.tsx

+            return {
+                text: title ?? '',
+                description: description ?? '',
+                icon: typeof icon === 'number' ? Bank : icon,


Hi @getusha, why do we need this change? Is SVG icon broken on native?

Yes strangely icon has a number value on android Native. Tried to investigate but i wasn't able to get far with the RCA.

Ollyws · 2025-10-09T08:06:08Z

src/components/Button/index.tsx

            <View style={[styles.alignItemsCenter, styles.flexColumn, styles.flexShrink1]}>
                {primaryText}
-                <Text style={[isLoading && styles.opacity0, styles.pointerEventsNone, styles.fontWeightNormal, styles.textDoubleDecker]}>{secondLineText}</Text>
+                <Text


We neglected to allow truncation here, so we fixed it in #70837

jayeshmangwani · 2025-10-09T09:54:00Z

src/components/SettlementButton/index.tsx

+        };
+
+        const approveButtonOption = {
+            text: translate('iou.approve', {formattedAmount}),


Hi @getusha @hungvu193 , do you know if there are any steps to follow to access this button on the UI? We’re working on a PR and need to remove the amount from the approve buttons when necessary. If we can see where this button appears in the app, it’ll be easier to determine whether we want to remove it or not.

ishpaul777 · 2025-10-14T20:08:12Z

src/components/SettlementButton/index.tsx

+                buttonOptions.push({
+                    text: latestBankItem.at(0)?.text ?? '',
+                    icon: latestBankItem.at(0)?.icon,
+                    value: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT,
+                    description: latestBankItem.at(0)?.description,


{BZ Checklist #71298 } We don't pass the iconStyles and iconSize here, so Bank account icon has the wrong style in the settlement button

ishpaul777 · 2025-11-19T12:45:53Z

src/components/KYCWall/BaseKYCWall.tsx

+                        if (!policyExpenseChatReportID) {
+                            const {policyExpenseChatReportID: newPolicyExpenseChatReportID} = moveIOUReportToPolicyAndInviteSubmitter(iouReport.reportID, policy.id, formatPhoneNumber) ?? {};
+                            savePreferredPaymentMethod(iouReport.policyID, policy.id, CONST.LAST_PAYMENT_METHOD.IOU, lastPaymentMethod?.[policy.id]);
+                            Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(newPolicyExpenseChatReportID));


{BZ CHECKLIST} there was a regression, the navigation occurs too soon—before the optimistic report from moveIOUReportToPolicyAndInviteSubmitter is fully merged into Onyx, this was fixed using setNavigationActionToMicrotaskQueue

revert the revert and apply fixes

6c7a985

getusha changed the title ~~revert the revert and apply fixes~~ feat: standardize pay button for expenses and ious Jul 21, 2025

getusha changed the title ~~feat: standardize pay button for expenses and ious~~ feat: standardize pay button for expenses and IOUs Jul 21, 2025

getusha added 3 commits July 21, 2025 14:38

Merge remote-tracking branch 'exfy/main' into feat-standardize-pay-bu…

281239f

…tton-expense-n-ious-2

fix: lint

3fea2cb

fix: more lint

cffc5e8

getusha marked this pull request as ready for review July 21, 2025 13:12

getusha requested review from a team as code owners July 21, 2025 13:12

melvin-bot bot requested review from rojiphil and removed request for a team July 21, 2025 13:12

joekaufmanexpensify requested review from hungvu193 and removed request for rojiphil July 21, 2025 13:18

fix: stale default payment method after workspace change

8fd601d

This comment has been minimized.

Sign in to view

hungvu193 suggested changes Jul 22, 2025

View reviewed changes

grgia self-requested a review July 22, 2025 13:01

grgia reviewed Jul 22, 2025

View reviewed changes

src/components/KYCWall/BaseKYCWall.tsx Outdated Show resolved Hide resolved

grgia reviewed Jul 23, 2025

View reviewed changes

fix: padding and add doc

8ebd03f

getusha requested a review from grgia August 1, 2025 16:48

grgia approved these changes Aug 1, 2025

View reviewed changes

grgia removed the request for review from marcaaron August 1, 2025 16:49

grgia merged commit 4515ef6 into Expensify:main Aug 1, 2025
19 checks passed

github-actions bot mentioned this pull request Aug 1, 2025

[Due for payment 2025-08-13] Investigate workflow job failing on main: typecheck / typecheck #67693

Closed

github-actions bot mentioned this pull request Aug 4, 2025

Deploy Checklist: New Expensify 2025-08-04 #67808

Closed

This was referenced Aug 5, 2025

[RCA #66790] Expense - LHN preview shows "workspace paid" instead of "workspace paid amount" #67830

Closed

[Due for payment 2025-08-15] [RCA #66790] Expense - Mark as paid is registered twice when paying IOU report and error shows up #67835

Closed

marcochavezf mentioned this pull request Aug 5, 2025

Revert "feat: standardize pay button for expenses and IOUs" #67893

Closed

mkzie2 mentioned this pull request Aug 5, 2025

[Due for payment 2025-08-15] [RCA #66790] Reports - App crash when employee send an expense to WS admin #67903

Closed

8 tasks

vincdargento mentioned this pull request Aug 5, 2025

[RCA #66790] Expense - Not here page opens when trying to pay IOU via workspace after reset app #67929

Closed

8 tasks

Julesssss mentioned this pull request Aug 5, 2025

Attempt to resolve HybridApp expired token race condition #67969

Closed

49 tasks

jponikarchuk mentioned this pull request Aug 6, 2025

[$250] Incorrect expense message: grammar + workspace context #68049

Closed

8 tasks

melvin-bot bot mentioned this pull request Aug 6, 2025

[Due for payment 2025-08-13] Fix system messages with MoveIOUReportToExistingPolicy command #61744

Closed

1 task

joekaufmanexpensify mentioned this pull request Aug 11, 2025

[Due for payment 2025-09-12] [Standardize the pay button] Add new pay pattern for expenses/IOUs on reports page #68283

Closed

eh2077 reviewed Aug 15, 2025

View reviewed changes

dominictb reviewed Sep 29, 2025

View reviewed changes

dominictb mentioned this pull request Sep 29, 2025

fix: bank account in settlement button has wrong style #71485

Merged

54 tasks

Ollyws reviewed Oct 9, 2025

View reviewed changes

jayeshmangwani reviewed Oct 9, 2025

View reviewed changes

jayeshmangwani mentioned this pull request Oct 9, 2025

Fix: Remove amount from Approve button in secondary actions menu #71441

Merged

52 tasks

ishpaul777 reviewed Oct 14, 2025

View reviewed changes

lanitochka17 mentioned this pull request Nov 6, 2025

[Due for payment 2025-11-26] Expense - When expense is paid with existing workspace, a new workspace is created #74208

Closed

16 tasks

ishpaul777 reviewed Nov 19, 2025

View reviewed changes

blazejkustra mentioned this pull request Feb 20, 2026

[BATCH 9] Needs more investigation/remaining usage of InteractionManager #83070

Open

Conversation

getusha commented Jul 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Paying IOU for the first time - preview

Paid IOU before - preview

Paying expense report for the first time - preview

Paying expense report for the first time - held expense

Paid expense report before - preview

Test 65118:

Test 65118:

Test 65125

Test 65120

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Paying IOU for the first time - preview

Paid IOU before - preview

Paying expense report for the first time - preview

Paying expense report for the first time - held expense

Paid expense report before - preview

Uh oh!

melvin-bot bot commented Jul 21, 2025

Uh oh!

getusha commented Jul 21, 2025

Uh oh!

github-actions bot commented Jul 21, 2025

Uh oh!

This comment has been minimized.

github-actions bot commented Jul 21, 2025

Uh oh!

github-actions bot commented Jul 21, 2025

Uh oh!

hungvu193 commented Jul 22, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

joekaufmanexpensify commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previously reported bugs supposed to be fixed here:

Uh oh!

joekaufmanexpensify commented Jul 22, 2025

Uh oh!

hungvu193 commented Jul 23, 2025

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jnowakow Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jnowakow Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

getusha commented Jul 21, 2025 •

edited

Loading

joekaufmanexpensify commented Jul 22, 2025 •

edited

Loading

jnowakow Jul 24, 2025 •

edited

Loading

jnowakow Jul 24, 2025 •

edited

Loading