Refactor `payIOU` #12739

youssef-lr · 2022-11-15T16:37:17Z

Details

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/213712

Tests & QA

1. SendMoney

Offline

As User B, click on the global create menu +, select Send Money
Go through the prompt and select and account you have never chatted before, let's call it User A
In the last payment page, add a comment describing what the payment is for
Choose I'll settle up elsewhere option in the settlement button dropdown, if you have more options (otherwise you can only see this option)
Press the button to pay
Make sure you have been navigated to this new chat which is greyed out since it was optimistically created
Confirm there is IOU preview showing the correct amount you have sent with.
The report message says Sent $X for <comment>
Click on the payment details and the message and amount is also correct in the right hand side and greyed out.
Now click on the + in the chat report.
Select Send Money
Follow the prompt and send more money to User A
Confirm there has been another Sent $X for <comment> comment left and IOU preview with the correct amount
Now, click the global create + again and choose Send Money
This time choose account you have already chatted with before (User C)
Follow the prompts to sent money and choose I'll settle up elsewhere
Confirm you have been navigated to the correct report and the payment details are showing there greyed out

Online

Go back online
Confirm that the IOUPreview and the message are same and no longer greyed out in both of the chats
Click on the global create button + again, Send Money and choose either User A or User C
Follow the prompt and sent them money using the I'll settle up elsewhere option.
Confirm you have been navigated to the correct report and the payment details showed up correct, this time not greyed out.

Error

Login as User A and go offline
In other incognito window, login as User B
There is no previous chat between User A and User B
As User B, who is online, create chat with User A and send them a message
As User A, who is offline, click on the global create + button and select Send Money
Send money to User B and choose I'll settle elsewhere
Send the moeny and see new chat being created and greyed out.
As User A, go back online
See an error on the optimistically created chat
See the message from User B in a different report.
You are able to clear the stale report.

2. PayMoneyRequest

Offline

Pre-requisites:

Have a chat between User A and User B, such that User B owes money to User A
Have a chat between User B and User C, such that User B owes money User C

As User B, navigate to the chat with User A and you should see an IOU preview with Pay button
Press the Pay button
In the IOU Details page, choose I'll settle up elsewhere option in the dropdown and click the settlement button
Verify a greyed out Settled up elsewhere message displays immediately
Verify the IOU Preview at the top of the modal says You paid <name of the receiver> and the preview is greyed out
Click the X to close the modal and navigate away to a different chat and back again
Verify the IOUPreview and settled message in the chat view are greyed out
Click the IOUPreview to access the detailed view again
Verify that the message on the report and the IOUPreview in the header are still both greyed out

Online

Go back online
Confirm that the IOUPreview and the message don't change and are no longer greyed out.
Still as User B, navigate to the chat with User C
Click Pay in the IOU Details page, choose I'll settle up elsewhere option in the dropdown and click the settlement button
Verify the "Settled up elsewhere" message has immediately appeared in the IOU details modal and doesn't appear greyed out
Verify the IOU Preview reads You paid <name of the receiver> and is not greyed out.

Error

Login as User A
Request $10 from User B
Login as User B in another incognito window
Navigate to the chat report with User A
Go offline
Click Pay in the IOU Preview
As User A, go to the chat with User B and click on the IOU request details
Click Cancel on the $10 request
As User B, still offline, click the I'll settle up elsewhere button in the IOU details modal to pay it
Verify the greyed out "Settled up elsewhere" message has shown up and the report shows as paid.
Go back online
Verify you see an error message in-line because the request was cancelled before the payment was made offline.
Navigate back to the LHN
Verify you see a single red dot on the chat row that contains the failed settlement
Navigate into the chat
Verify you see an in-line error message on the failed settlement
Click/tap the X to dismiss the error message
Verify the error message disappears

PR Author Checklist

PR Reviewer Checklist

The reviewer will copy/paste it into a new comment and complete it after the author checklist is completed

Screenshots

Web

Offline - SendMoney
https://user-images.githubusercontent.com/9680864/204683072-6bde8506-963a-44fd-af41-585d907f230c.mov

Online - SendMoney
https://user-images.githubusercontent.com/9680864/204683025-253dbb7d-4a28-4ae5-8172-dc16ec40cc43.mov

Error - SendMoney

Error.mov

Error 2 - SendMoney

send.money.-.error.mov

PayMoneyRequest

PayMoneyRequest.mov

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

mountiny

@youssef-lr I think we should in a big part just reused the requestMoney here and then add what we need for this specific command.

Essentially the good thing about Send money request is that we dont have to update any of the totals etc since that is untouched, we will add a new report actions, that is requested and paid.

src/libs/actions/IOU.js

src/libs/ReportUtils.js

src/libs/actions/IOU.js

mountiny

@youssef-lr on a good track, just couple of comments

src/libs/ReportUtils.js

src/libs/actions/IOU.js

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>

src/libs/actions/IOU.js

mountiny

@youssef-lr Love the refactor, lets add videos and make this ready for a review as well as the Web-PR.

mountiny · 2022-11-28T08:42:50Z

src/libs/actions/IOU.js

+    } = getPayMoneyRequestParams(
+        chatReport, iouReport, recipient, CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
+    );


Suggested change

} = getPayMoneyRequestParams(

chatReport, iouReport, recipient, CONST.IOU.PAYMENT_TYPE.ELSEWHERE,

);

} = getPayMoneyRequestParams(chatReport, iouReport, recipient, CONST.IOU.PAYMENT_TYPE.ELSEWHERE);

src/libs/actions/IOU.js

youssef-lr · 2022-12-08T03:46:07Z

@luacmartins for the IOU Preview bug after an error, it's because of the check here which decides if we should show it or it. When we pay a cancelled request, the last IOU action (which is of type 'cancel') satisfies that check and we end up showing the preview. I fixed it in this commit by adding another check. Let me know what you think!

Screen.Recording.2022-12-08.at.03.55.18.mov

youssef-lr · 2022-12-08T03:48:17Z

src/components/ReportActionItem/IOUAction.js

+    const shouldShowIOUPreview = (
+        props.isMostRecentIOUReportAction
+        && Boolean(props.action.originalMessage.IOUReportID)
+        && props.chatReport.hasOutstandingIOU) || props.action.originalMessage.type === 'pay';


I think props.chatReport.hasOutstandingIOU || props.action.originalMessage.type === 'pay' alone might be enough.

@youssef-lr That will make the IOUPreview shown on every IOU report.

We should keep props.isMostRecentIOUReportAction to show IOUPreview for recent IOUReport.

@youssef-lr

I think props.chatReport.hasOutstandingIOU || props.action.originalMessage.type === 'pay' alone might be enough.

this wont be enough will it, you can send money no matter if you have existing pay request there

Yeah @mollfpr @mountiny sorry scratch that.

mollfpr · 2022-12-08T14:51:01Z

Are we ready for another round?

youssef-lr · 2022-12-08T16:10:18Z

@mollfpr Correct, but there's one bug/improvement I can't figure out yet.

src/libs/actions/IOU.js

mountiny · 2022-12-08T17:48:34Z

src/libs/actions/IOU.js

+            },
+        },
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,


@youssef-lr same here, we have paid this up and we included all the data about the iou report in here so we can use set can we not?

Suggested change

onyxMethod: CONST.ONYX.METHOD.MERGE,

onyxMethod: CONST.ONYX.METHOD.SET,

I think that we should use merge if the IOUReport is already stored in Onyx. The difference between this and sendMoney is that sendMoney creates an IOUReport that doesn't yet exist in Onyx.

I agree, here we already have an iouReport that we're settling up.

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>

youssef-lr · 2022-12-08T17:52:15Z

This is ready for another round!

luacmartins

LGTM and tests well! Awesome job @youssef-lr!

mountiny

@youssef-lr great job ❤️

mollfpr · 2022-12-08T20:18:10Z

Reviewer Checklist

Screenshots/Videos

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

12739.Desktop.SendMoney.Offline.mov

12739.Desktop.SendMoney.Online.mov

12739.Desktop.SendMoney.Error.mov

12739.Desktop.RequestMoney.Online.mov

12739.Desktop.RequestMoney.Error.mov

12739.Desktop.RequestMoney.Offline.mov

iOS

12739.iOS.SendMoney.Offline.mov

12739.iOS.SendMoney.Online.mov

12739.iOS.SendMoney.Error.mov

12739.iOS.RequestMoney.Offline.mov

12739.iOS.RequestMoney.Online.mov

Android

12739.Android.SendMoney.Offline.mov

12739.Android.SendMoney.Online.mov

12739.Android.SendMoney.Error.mov

12739.Android.RequestMoney.Offline.mov

12739.Android.RequestMoney.Online.mov

12739.Android.RequestMoney.Error.mov

mollfpr

LGTM tests well 👍

Checklist and scree records

luacmartins · 2022-12-08T20:26:46Z

Cool, we got the approvals. Let's merge this baby!

OSBotify · 2022-12-08T20:32:15Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

luacmartins · 2022-12-08T20:38:25Z

@laurenreidexpensify could you please pay @mollfpr for their review on this PR (once the regression period is over)?

mountiny · 2022-12-13T15:09:52Z

This has been deployed to staging

OSBotify · 2022-12-13T22:38:08Z

🚀 Deployed to production by @chiragsalian in version: 1.2.38-6 🚀

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

laurenreidexpensify · 2022-12-15T13:06:53Z

@mollfpr Upwork job here https://www.upwork.com/jobs/~01166169da982f6883 payment will be on 20 Dec

mollfpr · 2022-12-15T13:07:46Z

Accepted, thanks @laurenreidexpensify

laurenreidexpensify · 2022-12-20T11:12:07Z

Paid 🎉

MariaHCD · 2023-04-18T13:39:10Z

src/libs/actions/IOU.js

+    const successData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
+            value: {
+                [optimisticIOUReportAction.sequenceNumber]: {
+                    pendingAction: null,
+                },
+            },
+        },
+    ];


Just a note here that since we didn't clear the iouReportID in the successData here, it caused this: #16105

Oh, good find

rushatgabhane · 2023-08-02T08:46:09Z

src/libs/ReportUtils.js

+        case CONST.IOU.PAYMENT_TYPE.PAYPAL_ME:
+            paymentMethodMessage = 'using PayPal.me';
+            break;
+        default:


Hi, we missed a case CONST.IOU.PAYMENT_TYPE.VBBA causing a bug #21535

paultsimura · 2025-01-01T16:55:16Z

src/libs/actions/IOU.js

+            value: {
+                ...chatReport,
+                lastVisitedTimestamp: Date.now(),
+                lastActionCreated: optimisticIOUReportAction.created,


We've eventually moved the setting of lastActionCreated from chatReport to iouReport.
Context: #54401

Add SendMoneyElsewhere request

24e9948

youssef-lr changed the title ~~[WIP] Add SendMoneyElsewhere request~~ [WIP] Refactor payIOU Nov 15, 2022

mountiny reviewed Nov 15, 2022

View reviewed changes

src/libs/actions/IOU.js Outdated Show resolved Hide resolved

src/libs/actions/IOU.js Outdated Show resolved Hide resolved

src/libs/actions/IOU.js Outdated Show resolved Hide resolved

src/libs/actions/IOU.js Outdated Show resolved Hide resolved

mountiny assigned youssef-lr Nov 15, 2022

mountiny reviewed Nov 15, 2022

View reviewed changes

src/libs/actions/IOU.js Outdated Show resolved Hide resolved

youssef-lr added 9 commits November 16, 2022 16:01

Update logic in sendMoneyElsewhere

913ffbc

Cleanup

2ad8370

Use the new SendMoneyElseWhere command from IOUModal

d3311f4

Fix param type

2b31e3f

Allow sending money while offline

5374b91

Wrap IOUAction in OfflineWithFeedback

3f4a973

Reverse wrapping IOUAction in OfflineWithFeedback

2bac5e7

Add PayPalMe flow for sending money

1928a62

Create separate method for PayPal flow

a3ffc0d

mountiny reviewed Nov 21, 2022

View reviewed changes

src/libs/ReportUtils.js Outdated Show resolved Hide resolved

src/libs/ReportUtils.js Outdated Show resolved Hide resolved

src/libs/actions/IOU.js Show resolved Hide resolved

Add PayMoneyRequest command

2c48c72

mountiny reviewed Nov 22, 2022

View reviewed changes

src/libs/ReportUtils.js Outdated Show resolved Hide resolved

src/libs/actions/IOU.js Outdated Show resolved Hide resolved

youssef-lr and others added 4 commits November 22, 2022 17:09

Improve comment

6e72edc

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>

Add JSDocs to the new methods

f6d293a

Add clarifying comment

2776c3a

Merge branch 'main' into youssef_refactor_payiou

1c3a97b

bondydaa mentioned this pull request Nov 23, 2022

Money is sent/requested multiple times if the enter key is pressed multiple times reported by @adeel0202 #12714

Closed

youssef-lr added 2 commits November 24, 2022 17:49

Merge branch 'main' into youssef_refactor_payiou

3784707

Use a seperate function for each payment method

4f16c9e

youssef-lr commented Nov 25, 2022

View reviewed changes

src/libs/actions/IOU.js Show resolved Hide resolved

mountiny reviewed Nov 28, 2022

View reviewed changes

youssef-lr changed the title ~~[WIP] Refactor payIOU~~ Refactor payIOU Nov 28, 2022

youssef-lr marked this pull request as ready for review November 28, 2022 12:59

youssef-lr requested a review from a team as a code owner November 28, 2022 12:59

melvin-bot bot removed the request for review from a team November 28, 2022 13:00

youssef-lr commented Dec 8, 2022

View reviewed changes

mountiny reviewed Dec 8, 2022

View reviewed changes

Use SET in sendMoney to save the iouReport

eedccb1

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>

luacmartins approved these changes Dec 8, 2022

View reviewed changes

mountiny approved these changes Dec 8, 2022

View reviewed changes

mollfpr approved these changes Dec 8, 2022

View reviewed changes

luacmartins merged commit f036c7d into main Dec 8, 2022

luacmartins deleted the youssef_refactor_payiou branch December 8, 2022 20:26

luacmartins assigned laurenreidexpensify Dec 8, 2022

francoisl mentioned this pull request Dec 10, 2022

Deploy Checklist: New Expensify 2022-12-09 #13498

Closed

32 tasks

youssef-lr mentioned this pull request Dec 13, 2022

Add createdReportActionID to sendMoney and requestMoney #13502

Merged

53 tasks

adeel0202 mentioned this pull request Dec 26, 2022

IOU - infinite loading is displayed when select Pay as "I'll settle up elsewhere" #13017

Closed

MariaHCD reviewed Apr 18, 2023

View reviewed changes

MariaHCD mentioned this pull request Apr 18, 2023

[$1000] IOU - Request money flow breaks on second time after the 1st one paid #16105

Closed

6 tasks

rushatgabhane reviewed Aug 2, 2023

View reviewed changes

rushatgabhane mentioned this pull request Aug 2, 2023

[HOLD for payment 2023-07-24] [$1000] When paying an IOU with a gold wallet, the paid message says undefined #21535

Closed

6 tasks

paultsimura reviewed Jan 1, 2025

View reviewed changes

	onyxMethod: CONST.ONYX.METHOD.MERGE,
	onyxMethod: CONST.ONYX.METHOD.SET,

Refactor payIOU #12739

Refactor payIOU #12739

Uh oh!

Conversation

youssef-lr commented Nov 15, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests & QA

1. SendMoney

2. PayMoneyRequest

PR Author Checklist

PR Reviewer Checklist

Screenshots

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

Uh oh!

mountiny left a comment • 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

youssef-lr commented Dec 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

mollfpr commented Dec 8, 2022

Uh oh!

youssef-lr commented Dec 8, 2022

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!

youssef-lr commented Dec 8, 2022

Uh oh!

luacmartins left a comment

Choose a reason for hiding this comment

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

mollfpr commented Dec 8, 2022

Reviewer Checklist

Screenshots/Videos

Uh oh!

mollfpr left a comment

Refactor `payIOU` #12739

Refactor `payIOU` #12739

youssef-lr commented Nov 15, 2022 •

edited

Loading

mountiny left a comment •

edited

Loading

youssef-lr commented Dec 8, 2022 •

edited

Loading

luacmartins commented Dec 8, 2022 •

edited

Loading

laurenreidexpensify commented Dec 15, 2022 •

edited

Loading