[No QA] Created IOU preview component within chat #2112

tugbadogan · 2021-03-26T18:23:58Z

@iwiznia @Julesssss

Details

Added IOU Preview component
Fetched required iou data from Onyx
Implemented the Quote section
Implemented IOU Preview UI

Fixed Issues

Fixes #2027

Tests

Logged in to account Tugba Oge and requested money from user Fadime Dogan.
Verified quote and preview box working as expected.
Paid money via API call.
Once IOU is settled, verified that there is a separate quoted message about settlement and there is no preview box.

QA Steps

For now, this is only testable internally. The cancel/decline cases will be tested as part of the IOU Details PR, which will introduce that functionality. For now, I have been testing this with API calls.

Login to user X
Create IOU transaction with user Y via UI or API call as mentioned in issue description [Chat] [IOU] Create Preview Component #2027
Open 1:1 chat with the person from transaction
Observe that there is a quoted message about the request and preview box with amount and Y owes X message.
Login to user Y
Open 1:1 chat with user X
Observe that there is a quoted message about the request and preview box with amount, Y owes X message and Pay button.
Pay the IOU transaction with API call
For both users, observe that there is a quoted message about the settlement. Make sure there is no preview box.
Create a new transaction
Cancel the transaction
For both users, the Preview component should not display

Tested On

Screenshots

Web

Owner / Manager Views

Group Chat View

Mobile Web

Owner / Manager Views

Desktop

Owner / Manager Views

iOS

Owner / Manager Views

Android

Owner / Manager Views

Julesssss · 2021-03-29T10:19:24Z

src/pages/home/report/ReportActionItem.js

+    report: PropTypes.shape({
+
+        // IOU report ID associated with current report
+        iouReportID: PropTypes.number,


Any reason not to just pass the reportID at this stage, and subscribe to the full report Onyx further down the Component chain?

Sure, I can pass just iouReportID here. 👍

I'm not sure this was addressed and I think @Julesssss was suggesting that we pass the iouReportID directly instead of subscribing to the entire report object.

src/components/ReportActionItemIOUQuote.js

Julesssss

Looking good so far.

Just to let you know, until now group chat IOU actions have been of type ADDCOMMENT, but we've changed this to be an IOU action, which should make it easier to render the Quote component in group chats.

[This change is currently on staging.expensify.com]

tugbadogan · 2021-03-29T10:39:17Z

Just to let you know, until now group chat IOU actions have been of type ADDCOMMENT, but we've changed this to be an IOU action, which should make it easier to render the Quote component in group chats.

Do we use the same API method for creating transactions in group chat? Should I worry about different transaction types, request money and split bill?

Julesssss · 2021-03-29T12:23:31Z

Do we use the same API method for creating transactions in group chat? Should I worry about different transaction types, request money and split bill?

Good question, sorry I didn't share this to begin with:

Creating a group split is done with this API request (you will first need to create a report for these users via this API and pass that reportID)
This simply creates creates a 1:1 IOU for each individual participant and the bill creator (so in the example above, 2 IOU reports are created: jules | jules+4, jules | jules+6)
No need to worry about different types, once the above request is made, you will still interact with IOUActions in a 1:1 report in the usual way
The exception is that within a group chat the IOUAction contains participant names -- which you can use to display all participants in the quote message. The Preview Component within group chats should look like the following (no View Details link, all participants listed):

tugbadogan · 2021-03-30T11:20:09Z

Hey @Julesssss

When I called PayIOU API method, iouReportId key is removed from report, hasOutstandingIOU key is set to true and reportIOUs_ object is deleted from Onyx. So, I cannot fetch state, status and I cannot display the paid amount on the preview box as I don't have access to the transactions anymore.

Is there anywhere else that I can find settled IOUs, so I can display the paid amount?

Julesssss · 2021-03-30T12:47:15Z

Is there anywhere else that I can find settled IOUs, so I can display the paid amount?

Hey @tugbadogan, we won't show the lower preview section (component B) if the balance is 0. Sorry, I forgot to mention this in the original description. This should resolve the problem of displaying the Paid amount.

However, I realise now that this same issue will apply to the view details link -- let me investigate and get back to you.

Julesssss · 2021-03-30T13:40:55Z

Actually ignore that last part, the view details link isn't part of this PR 🙃

tugbadogan · 2021-03-30T23:13:17Z

I updated the PR. It's ready for review.

Julesssss · 2021-03-31T14:25:27Z

Nice work! Here are some things I've noticed:

Once an IOU is settled we don't need to render the component
I think we need to check isMostRecentIOUReport AND report.hasOutstandingIOU

If you don't have a reason, we should remove the 'for': (Requested $9 from Jules for)

When a transaction is cancelled, we don't seem to be immediately updating other IOUs.
- the middle component should be hidden, (this happens after a refresh)
- the preview component should say $5, not $10 -- I can see the cachedTotal is correctly showing $5

Also, we should just show a users first name for the requested quote message (but this is a separate backend issue)

src/components/ReportActionItemIOUPreview.js

Julesssss · 2021-03-31T15:28:00Z

src/pages/home/report/ReportActionItem.js

+    report: {
+        key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+    },


If we already have reportID, isn't this unnecessary -- now that we simply pass reportID

This is chatReportID but we need iouReportID and we need to fetch chatReport first to use report.iouReportID in child component's withOnyx. I'm now passing report to use report.hasOutstandingIOU anyway.

Can we pass the iouReportID or anything else we need directly?

tugbadogan · 2021-03-31T20:36:26Z

Once an IOU is settled we don't need to render the component
I think we need to check isMostRecentIOUReport AND report.hasOutstandingIOU

👍

If you don't have a reason, we should remove the 'for': (Requested $9 from Jules for)

These action messages are generated on server side. Should I modify the message on the client side?

When a transaction is cancelled, we don't seem to be immediately updating other IOUs.

the middle component should be hidden, (this happens after a refresh)

the preview component should say $5, not $10 -- I can see the cachedTotal is correctly showing $5

I fixed these issues 👍

Also, we should just show a users first name for the requested quote message (but this is a separate backend issue)

Agreed, this is similar to 'for' issue. It is better to fix this on backend.

iwiznia · 2021-03-31T21:24:43Z

These action messages are generated on server side. Should I modify the message on the client side?

No, but after the for there should be the comment of the request, I think that we are not removing the for when there's no comment. I will make a PR to handle that

Also, we should just show a users first name for the requested quote message (but this is a separate backend issue)

Will handle this too.

src/libs/actions/Report.js

Julesssss · 2021-04-01T11:07:52Z

I ran through the full flow on web, Android, and iOS. I can see the last issues I mentioned have been fixed, but noticed one remaining issue:

When I pay/decline/create an IOU transaction I see the storage being updated locally. But, we're not updating the current page. I think this is because we're updating the wrong data store. I see the IOUReport being persisted as a regular report under reports_123, instead of reportIOUs_123.

Julesssss · 2021-04-01T15:57:55Z

Just wanted to leave the test flow that I ran though here, in case anyone else tests this over the UK easter bank holiday:

1 . Open report with 0 IOUs
2. No preview components should be visible
3. Create an IOU transaction 
4. Preview component should be visible
5. Create a second IOU transaction 
6. A quote message should appear for each, but the preview should only show on the most recent IOU transaction
7. Create a 3rd transaction
8. Cancel a transaction (as the user who created them)
9. Quote should read 'Cancelled'  
10. Decline a transaction (as the user who received them)
11. Quote should read 'Declined'   
12. Pay the IOU
13. Preview should not display

IOU API requests

CreateIOUReport
Requesting money from another person

curl --request POST \
  --url 'https://expensify.cash/api?command=CreateIOUTransaction' \
  --header 'Content-Type: multipart/form-data; boundary=---011000010111000001101001' \
  --cookie 'email=admin%2540verified.com; accountID=262; authToken=B2C581...DAE9A' \
  --form debtorEmail=jules+2@expensify.com \
  --form currency=USD \
  --form 'comment=Ice cream' \
  --form amount=299

CreateIOUSplit
Splitting bill of $15.00 between myself and two others -- must first create a chat with CreateChatReport if one doesn't already exist

curl --request POST \
  --url 'https://expensify.cash/api?command=CreateIOUSplit' \
  --header 'Content-Type: application/x-www-form-urlencoded' \
  --cookie 'email=jules%2540expensify.com; accountID=2; authToken=4FC46..817617' \
  --data reportID=712 \
  --data amount=1500 \
  --data currency=USD \
  --data 'splits=[{"amount":500,"email":"jules@expensify.com"},{"amount":500,"email":"jules+6@expensify.com"},{"amount":500,"email":"jules+5@expensify.com"}]'

CreateChatReport
Must occur prior to CreateIOUSplit if you don't already have the reportID

curl --request POST \
  --url 'https://expensify.cash/api?command=CreateChatReport' \
  --header 'Content-Type: application/x-www-form-urlencoded' \
  --cookie 'email=jules%2540expensify.com; accountID=2; authToken=4FC46...817617' \
  --data 'emailList=["jules+4@expensify.com","jules+6@expensify.com","jules+6@expensify.com","jules+5@expensify.com"]'

Pay IOU
Pay outstanding amount to close IOU

curl --request POST \
  --url 'https://expensify.cash/api?command=PayIOU' \
  --header 'Content-Type: multipart/form-data; boundary=---011000010111000001101001' \
  --cookie 'email=admin%2540verified.com; accountID=262; authToken=B2C581...DAE9A' \
  --form reportID=778 \
  --form paymentMethodType=Venmo

Decline IOU
Cancel or decline a single IOU transaction/request

curl --request POST \
  --url 'https://expensify.cash/api?command=RejectTransaction' \
  --header 'Content-Type: multipart/form-data; boundary=---011000010111000001101001' \
  --cookie 'email=admin%2540verified.com; accountID=262; authToken=B2C581...DAE9A' \
  --form reportID=776 \
  --form transactionID=4294967349 \
  --form 'comment='\''I dispute this!'\'''

Julesssss

Unfortunately there seems to have been a slight regression with the latest changes. As the user who creates a group chat, sends a message, and then an IOU split for that group, we should see the following Onyx data created for each individual 1:1

report_940
reportActions_940
reportIOUs_941       --> This is being created as reportIOUs_940

So we're creating the chat reports, but not creating or linking to the IOUReport. Other than this and the issue where IOUReports are not retrievable via the push data, everything else is testing well.

Julesssss · 2021-04-21T17:30:09Z

To round up the feedback:

The only remaining bug to fix is that the IOUReportID is being set to the ChatReportID
The messaging here should be updated, and the conditional check modified
Pod install should be run in root/iOS and the change committed

Once that's done I'll ping the remaining reviewers and run the test flows once more.

tugbadogan · 2021-04-21T23:43:36Z

Unfortunately there seems to have been a slight regression with the latest changes. As the user who creates a group chat, sends a message, and then an IOU split for that group, we should see the following Onyx data created for each individual 1:1

So we're creating the chat reports, but not creating or linking to the IOUReport. Other than this and the issue where IOUReports are not retrievable via the push data, everything else is testing well.

I tested split bill flow for a group chat. The problem is caused by push notification being sent with iouReportID for each report in the group instead of chatReportID. You solved this issue with 1:1 IOU report creation.

report_940
reportActions_940
reportIOUs_941       --> This is being created as reportIOUs_940

In this example 940 is iouReportID so reportIOUs_940 is created as expected. report_940 and reportActions_940 shouldn't be created with this id. If you can fix the push notifications being sent with chatReportIDs, this problem shouldn't occur.

tugbadogan · 2021-04-21T23:57:42Z

@Julesssss
This is request for IOU split action. I think it returns created IOU report IDs in reportIDList.

And we are getting push notifications for these IOU report IDs.

When we call Get API method for reportStuff we get details about IOU report as expected.

Julesssss · 2021-04-22T15:06:58Z

I tested split bill flow for a group chat. The problem is caused by push notification being sent with iouReportID for each report in the group instead of chatReportID. You solved this issue with 1:1 IOU report creation.

Great spot! Thanks for pointing this out... I've just fixed this and will report back once this change has gone live on prod.

ios/ExpensifyCash.xcodeproj/project.pbxproj

Merge

Julesssss

Looking good. Not sure what happened with the last commit, but thanks for reverting.

I've tested the flows against this internal Web-E PR which fixes the push notification problem we introduced. It also requires pulling the latest Auth changes and rebuilding.

I'll update the test steps to let QA know what is testable at this stage. I think for now this should be tested internally.

Julesssss · 2021-04-23T16:44:14Z

@NikkiWines @marcaaron @AndrewGable -- not much has changed since your previous reviews, but I'll leave the PR open for a couple of hours in case you have any last thoughts.

Out of date

iwiznia · 2021-04-23T18:49:08Z

Seems you've got conflicts @tugbadogan, can you resolve them please?

Merge

tugbadogan · 2021-04-23T18:54:23Z

Resolved the conflicts.

OSBotify · 2021-05-08T01:43:19Z

🚀 Deployed to production in version: 1.0.39-5🚀

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

Created IOU preview component within chat

d581791

tugbadogan requested a review from a team as a code owner March 26, 2021 18:23

botify requested review from NikkiWines and removed request for a team March 26, 2021 18:24

Added ReportActionItemIOUQuote component

1e7a1c9

Julesssss reviewed Mar 29, 2021

View reviewed changes

src/components/ReportActionItemIOUQuote.js Outdated Show resolved Hide resolved

Julesssss reviewed Mar 29, 2021

View reviewed changes

Added IOU Preview UI

095aad9

tugbadogan changed the title ~~[Draft] Created IOU preview component within chat~~ Created IOU preview component within chat Mar 30, 2021

Julesssss assigned tugbadogan Mar 31, 2021

Julesssss reviewed Mar 31, 2021

View reviewed changes

src/components/ReportActionItemIOUPreview.js Outdated Show resolved Hide resolved

Julesssss reviewed Mar 31, 2021

View reviewed changes

src/components/ReportActionItemIOUPreview.js Outdated Show resolved Hide resolved

Julesssss reviewed Mar 31, 2021

View reviewed changes

src/components/ReportActionItemIOUPreview.js Outdated Show resolved Hide resolved

Julesssss reviewed Mar 31, 2021

View reviewed changes

Fixed live update issues and addressing comments

8b2a0b4

Julesssss reviewed Apr 1, 2021

View reviewed changes

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

tugbadogan added 2 commits April 3, 2021 17:00

Created IOU preview component within chat

b04df47

Added ReportActionItemIOUQuote component

6870e69

Julesssss requested changes Apr 21, 2021

View reviewed changes

Updated comment and pod install

1ab7855

tugbadogan dismissed marcaaron’s stale review via 1ab7855 April 21, 2021 23:59

Julesssss reviewed Apr 23, 2021

View reviewed changes

ios/ExpensifyCash.xcodeproj/project.pbxproj Outdated Show resolved Hide resolved

tugbadogan and others added 3 commits April 23, 2021 17:22

Revert changes from pod install

6d3bfa3

Merge pull request #18 from Expensify/main

d16c1b2

Merge

Merge branch 'master' into tugbadogan-create-iou-preview-component

33ecad8

Julesssss previously approved these changes Apr 23, 2021

View reviewed changes

Julesssss requested review from NikkiWines, marcaaron and AndrewGable April 23, 2021 16:43

Julesssss changed the title ~~Created IOU preview component within chat~~ [No QA] Created IOU preview component within chat Apr 23, 2021

tugbadogan and others added 2 commits April 23, 2021 19:51

Merge pull request #19 from Expensify/main

a3a7063

Merge

Merge branch 'master' into tugbadogan-create-iou-preview-component

88989a6

tugbadogan dismissed Julesssss’s stale review via 88989a6 April 23, 2021 18:53

Julesssss approved these changes Apr 26, 2021

View reviewed changes

Julesssss merged commit ac3ca58 into Expensify:main Apr 26, 2021

OSBotify mentioned this pull request Apr 26, 2021

Deploy Checklist: Expensify.cash 2021-04-13 #2380

Closed

66 tasks

tugbadogan deleted the tugbadogan-create-iou-preview-component branch July 10, 2021 16:42

eVoloshchak mentioned this pull request Feb 28, 2023

[HOLD for payment 2023-03-17] [$1000] Pay option is not available from chat if send money flow is done after request money #15435

Closed

6 tasks

paultsimura mentioned this pull request Nov 15, 2023

[HOLD for payment 2023-11-29] [$125] Desktop - Avatars in split preview card too close to right edge #31394

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[No QA] Created IOU preview component within chat #2112

[No QA] Created IOU preview component within chat #2112

tugbadogan commented Mar 26, 2021 •

edited by Julesssss

Loading

Julesssss Mar 29, 2021

tugbadogan Mar 29, 2021

marcaaron Apr 15, 2021

Julesssss left a comment •

edited

Loading

tugbadogan commented Mar 29, 2021

Julesssss commented Mar 29, 2021

tugbadogan commented Mar 30, 2021

Julesssss commented Mar 30, 2021 •

edited

Loading

Julesssss commented Mar 30, 2021

tugbadogan commented Mar 30, 2021

Julesssss commented Mar 31, 2021

Julesssss Mar 31, 2021

tugbadogan Mar 31, 2021

marcaaron Apr 15, 2021

tugbadogan commented Mar 31, 2021

iwiznia commented Mar 31, 2021

Julesssss commented Apr 1, 2021

Julesssss commented Apr 1, 2021 •

edited

Loading

Julesssss left a comment

Julesssss commented Apr 21, 2021

tugbadogan commented Apr 21, 2021

tugbadogan commented Apr 21, 2021

Julesssss commented Apr 22, 2021

Julesssss left a comment

Julesssss commented Apr 23, 2021

iwiznia commented Apr 23, 2021

tugbadogan commented Apr 23, 2021

OSBotify commented May 8, 2021

[No QA] Created IOU preview component within chat #2112

[No QA] Created IOU preview component within chat #2112

Conversation

tugbadogan commented Mar 26, 2021 • edited by Julesssss Loading

Details

Fixed Issues

Tests

QA Steps

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

Julesssss Mar 29, 2021

Choose a reason for hiding this comment

tugbadogan Mar 29, 2021

Choose a reason for hiding this comment

marcaaron Apr 15, 2021

Choose a reason for hiding this comment

Julesssss left a comment • edited Loading

Choose a reason for hiding this comment

tugbadogan commented Mar 29, 2021

Julesssss commented Mar 29, 2021

tugbadogan commented Mar 30, 2021

Julesssss commented Mar 30, 2021 • edited Loading

Julesssss commented Mar 30, 2021

tugbadogan commented Mar 30, 2021

Julesssss commented Mar 31, 2021

Julesssss Mar 31, 2021

Choose a reason for hiding this comment

tugbadogan Mar 31, 2021

Choose a reason for hiding this comment

marcaaron Apr 15, 2021

Choose a reason for hiding this comment

tugbadogan commented Mar 31, 2021

iwiznia commented Mar 31, 2021

Julesssss commented Apr 1, 2021

Julesssss commented Apr 1, 2021 • edited Loading

IOU API requests

Julesssss left a comment

Choose a reason for hiding this comment

Julesssss commented Apr 21, 2021

tugbadogan commented Apr 21, 2021

tugbadogan commented Apr 21, 2021

Julesssss commented Apr 22, 2021

Julesssss left a comment

Choose a reason for hiding this comment

Julesssss commented Apr 23, 2021

iwiznia commented Apr 23, 2021

tugbadogan commented Apr 23, 2021

OSBotify commented May 8, 2021

tugbadogan commented Mar 26, 2021 •

edited by Julesssss

Loading

Julesssss left a comment •

edited

Loading

Julesssss commented Mar 30, 2021 •

edited

Loading

Julesssss commented Apr 1, 2021 •

edited

Loading