Feat standardize pay button by getusha · Pull Request #56838 · Expensify/App

getusha · 2025-02-13T15:38:16Z

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

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

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

MacOS: Desktop

hungvu193 · 2025-02-19T16:48:05Z

Hey @getusha, can you merge main?

hungvu193 · 2025-02-21T09:28:46Z

Let's merge main and address the linting @getusha 😄

melvin-bot · 2025-02-23T17:31:24Z

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

src/components/KYCWall/BaseKYCWall.tsx

src/components/KYCWall/types.ts

src/components/ReportActionItem/ReportPreview.tsx

src/components/SelectionList/Search/ActionCell.tsx

src/libs/actions/IOU.ts

src/libs/actions/Policy/Policy.ts

src/libs/actions/Search.ts

hungvu193 · 2025-02-24T06:39:45Z

src/types/onyx/LastPaymentMethod.ts

-    Iou: string;
+    iou: string;
    /** The lastPaymentMethod of an Expense */
-    Expense: string;
+    expense: string;
    /** The lastPaymentMethod of an Invoice */
-    Invoice: string;
+    invoice: string;


Oops, I thought I confirmed these property names with @grgia, may I know why you changed these property names? Is that something that's returned from our BE?

It's to fix type error:

App/src/components/SettlementButton/index.tsx

Line 88 in 0617e28

selector: (paymentMethod) => getLastPolicyPaymentMethod(policyIDKey, paymentMethod, iouReport?.type as keyof LastPaymentMethodType),

Not sure why we'd want them to be capitalized, aren't they keys?

hungvu193 · 2025-02-25T08:28:21Z

Also can you provide the test steps and complete the checklist? Ty

getusha · 2025-02-25T17:21:59Z

Also can you provide the test steps and complete the checklist? Ty

@hungvu193 thought i'll do that once the BE changes are deployed, so i can test it all together. wdyt?

hungvu193 · 2025-02-26T02:02:07Z

Got it. I posted on slack to move this forward

hungvu193 · 2025-03-03T15:46:23Z

Looks like we still have linting, can you fix it? @getusha

src/components/SettlementButton/index.tsx

hungvu193 · 2025-03-10T10:58:40Z

Friendly reminder that we also have this PR which also changes the SettlementButton

src/components/KYCWall/BaseKYCWall.tsx

src/components/SettlementButton/index.tsx

hungvu193 · 2025-03-13T03:03:18Z

Still have linting, can you just merge your PR with mine? and we start from there?

src/languages/en.ts

hungvu193 · 2025-03-14T15:08:39Z

@getusha What's being held on BE btw?

getusha · 2025-03-14T15:22:23Z

the new endpoint to move iou to existing policy

…

On Fri, 14 Mar 2025 at 6:09 PM Hans ***@***.***> wrote: @getusha <https://github.com/getusha> What's being held on BE btw? — Reply to this email directly, view it on GitHub <#56838 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AR4OEV6CUSWCVBRU2J2DBRD2ULWI5AVCNFSM6AAAAABXCPXWL6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMRUHE4DMNBZGI> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: hungvu193]*hungvu193* left a comment (Expensify/App#56838) <#56838 (comment)> @getusha <https://github.com/getusha> What's being held on BE btw? — Reply to this email directly, view it on GitHub <#56838 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AR4OEV6CUSWCVBRU2J2DBRD2ULWI5AVCNFSM6AAAAABXCPXWL6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMRUHE4DMNBZGI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

hungvu193 · 2025-03-14T15:24:35Z

Can you please also update on slack?

hungvu193 · 2025-03-17T06:38:00Z

src/components/SettlementButton/index.tsx

-    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    const policy = policies?.[policyID];


I think this one is incorrect because the policyID only includes the ID, not the policy_ part, we should probably keep the old code.

OR somethings like this:

const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`];

hungvu193

I've just found another issue while working on invoice feature.

hungvu193 · 2025-03-17T06:40:50Z

src/components/SettlementButton/index.tsx

-    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    const policy = policies?.[policyID];


OR somethings like this:

const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`];

github-actions · 2025-04-02T14:50:26Z

⚠️ This PR is possibly changing native code and/or updating libraries, it may cause problems with HybridApp. Please check if any patch updates are required in the HybridApp repo and run an AdHoc build to verify that HybridApp will not break. Ask Contributor Plus for help if you are not sure how to handle this. ⚠️

luacmartins · 2025-06-27T17:27:50Z

src/libs/SearchUIUtils.ts

+        // const isPolicyExpenseChat = !!reports.find((rp) => rp.policyID === transactionItem.policyID && rp.isPolicyExpenseChat);

+        // console.log({reports})
+        // console.log({isPolicyExpenseChat});


Why is all this code commented out? I see some more below here. We should not merge this kinda changes into main

Thread here https://expensify.slack.com/archives/C08CZDJFJ77/p1751048080518369

tgolen · 2025-06-27T17:36:47Z

src/libs/ReportUtils.ts

        const formattedAmount = convertToDisplayString(Math.abs(amount), currency) ?? '';

+        // This will be fixed as part of https://github.com/Expensify/Expensify/issues/507850
+        // eslint-disable-next-line deprecation/deprecation


Please do not add more usages of getPolicy(). It has been deprecated for a reason and adding more usages is just increasing the work that other people need to do.

github-actions · 2025-06-27T23:42:53Z

🚀 Deployed to staging by https://github.com/grgia in version: 9.1.72-0 🚀

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

github-actions · 2025-06-27T23:54:48Z

🚀 Deployed to staging by https://github.com/grgia in version: 9.1.72-0 🚀

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

github-actions · 2025-06-30T22:18:44Z

🚀 Deployed to production by https://github.com/puneetlath in version: 9.1.72-10 🚀

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

getusha force-pushed the feat-standardize-pay-button branch 2 times, most recently from 0a499a9 to 4edefdb Compare February 23, 2025 16:06

getusha marked this pull request as ready for review February 23, 2025 17:31

getusha requested a review from a team as a code owner February 23, 2025 17:31

melvin-bot bot requested review from hungvu193 and removed request for a team February 23, 2025 17:31

hungvu193 reviewed Feb 24, 2025

View reviewed changes

joekaufmanexpensify mentioned this pull request Feb 26, 2025

[Due for payment 2025-07-22] [Due for payment 2025-07-08] [HOLD FOR #56838] [Standardize the pay button] IOUs #55874

Closed

hungvu193 suggested changes Mar 5, 2025

View reviewed changes

src/components/SettlementButton/index.tsx Outdated Show resolved Hide resolved

src/components/SettlementButton/index.tsx Outdated Show resolved Hide resolved

hungvu193 suggested changes Mar 12, 2025

View reviewed changes

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

src/components/SettlementButton/index.tsx Outdated Show resolved Hide resolved

hungvu193 suggested changes Mar 13, 2025

View reviewed changes

src/languages/en.ts Outdated Show resolved Hide resolved

getusha force-pushed the feat-standardize-pay-button branch from 826b0ba to 2e0f923 Compare March 13, 2025 10:34

getusha changed the title ~~Feat standardize pay button~~ [HELD ON BE] Feat standardize pay button Mar 13, 2025

hungvu193 reviewed Mar 17, 2025

View reviewed changes

hungvu193 suggested changes Mar 17, 2025

View reviewed changes

getusha force-pushed the feat-standardize-pay-button branch from 78ea10d to 44f1336 Compare April 2, 2025 14:50

getusha requested a review from a team as a code owner April 2, 2025 14:50

This was referenced Jun 26, 2025

Add system message on report with bottom up flow #60482

Merged

[$250] Triage canBeMissing errors so they can be fixed by the original authors #65032

Closed

luacmartins reviewed Jun 27, 2025

View reviewed changes

tgolen reviewed Jun 27, 2025

View reviewed changes

mountiny mentioned this pull request Jun 27, 2025

Revert "Feat standardize pay button" #65088

Closed

51 tasks

getusha mentioned this pull request Jun 27, 2025

[No QA] remove redundant comment #65092

Merged

51 tasks

github-actions bot mentioned this pull request Jun 27, 2025

Deploy Checklist: New Expensify 2025-06-27 #65114

Closed

mitarachim mentioned this pull request Jun 28, 2025

Reports - Nothing happens after tapping Mark as paid #65118

Closed

8 tasks

This was referenced Jun 28, 2025

Reports - Invoice room does not change to B2B invoice room after paying as business in Reports #65122

Closed

Reports - "Marcar como pagado" button is positioned incorrectly and cut off #65125

Closed

mitarachim mentioned this pull request Jun 28, 2025

Expense - LHN shows "Paid x with bank account", expense report shows "paid with wallet" #65129

Closed

8 tasks

This was referenced Jun 28, 2025

Reports - "Pay" button changes size after paying expense for the first time. #65130

Closed

Expense - Pay with business account button is not responsive when all expenses are held #65141

Closed

jponikarchuk mentioned this pull request Jun 30, 2025

[$250] Expense - "started settling up" message is missing message sender and avatar #65162

Closed

8 tasks

mitarachim mentioned this pull request Jun 30, 2025

Reports - "Pay via workspace" option is missing in the Pay menu after app reset #65164

Closed

8 tasks

BlameGPT mentioned this pull request Jun 30, 2025

Bank - Inconsistent Bank icon between hybrid app and web when connecting #65152

Closed

8 tasks

DylanDylann mentioned this pull request Jun 30, 2025

[Due for payment 2025-08-01] [$250] Pay with Expensify-The app crashes after user has paid an expense in 1:1 chat with Expensify #64697

Closed

8 tasks

hungvu193 mentioned this pull request Jun 30, 2025

[CP Staging] Revert standardize pay button #65192

Merged

51 tasks

luacmartins mentioned this pull request Jun 30, 2025

Revert 56838 #65193

Closed

51 tasks

ikevin127 mentioned this pull request Jul 3, 2025

[$750] Click on the background should dismiss an active pop-over, not select the background #59939

Closed

getusha mentioned this pull request Jul 24, 2025

feat: standardize pay button for expenses and IOUs #66790

Merged

50 tasks

jmusial mentioned this pull request Feb 23, 2026

[No QA] Optimize ExpenseReportListItemRow - Split ActionCell into smaller components #83079

Merged

51 tasks

		const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
		const policy = policies?.[policyID];

Conversation

getusha commented Feb 13, 2025 • edited by marcaaron 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

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!

hungvu193 commented Feb 19, 2025

Uh oh!

hungvu193 commented Feb 21, 2025

Uh oh!

melvin-bot bot commented Feb 23, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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!

hungvu193 commented Feb 25, 2025

Uh oh!

getusha commented Feb 25, 2025

Uh oh!

hungvu193 commented Feb 26, 2025

Uh oh!

hungvu193 commented Mar 3, 2025

Uh oh!

Uh oh!

Uh oh!

hungvu193 commented Mar 10, 2025

Uh oh!

Uh oh!

Uh oh!

hungvu193 commented Mar 13, 2025

Uh oh!

Uh oh!

hungvu193 commented Mar 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

getusha commented Mar 14, 2025 via email

Uh oh!

hungvu193 commented Mar 14, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hungvu193 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 2, 2025

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

getusha commented Feb 13, 2025 •

edited by marcaaron

Loading

hungvu193 commented Mar 14, 2025 •

edited

Loading