[Chat] [IOU] Create Preview Component

If you haven’t already, check out our contributing guidelines for onboarding!

---

This issue builds on top of the existing IOU feature, allows users to create payment requests and group bill splits. The IOU data that you will be displaying is already being persisted here via Onyx.

The Preview Component will be displayed within 1:1 and group chats and displays the current state of the IOU between the users. Only the most recent IOU request Action will be displayed as the preview Component. All older actions will simply render the action as a quote message.

Mobile & mobile web

Web & Desktop

After report is paid

Creating an IOU

Creating an IOU transaction will open an IOU report. Multiple IOU transactions are associated with a single report.

The full IOU Modal flow is not yet complete. To get an idea of what the flow will look like, you can launch the IOUModal by temporarily modifying the routes in CreateMenu. Launch the request money flow with Navigation.navigate(ROUTES.IOU_REQUEST) and the bill split flow with Navigation.navigate(ROUTES.IOU_BILL). You could also navigate to Expensify.cash/iou/split or Expensify.cash/iou/request

For now, you can create, pay and decline IOUs with the following API requests (collect your authToken from web cookies):

CreateIOUReport

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=[e-mail] \
  --form currency=USD \
  --form 'comment=Ice cream' \
  --form amount=299

Pay 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

curl --request POST \
  --url 'https://expensify-jules.ngrok.io/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!'\'''

Deliverables

1. The ReportActionItemIOUPreview Component should be created which renders the IOU preview depending on the latest IOU data available within Onyx.
   1. Within Report.getSimplifiedIOUReport, we should add extra fields to the simplified object: chatReportId so that we can find the IOU report from the chat report ID, state, and status (used to determine state of the IOU report)
   2. ReportActionItemIOUPreview should take chatReportID, action, and isMostRecent as props
   3. Within the component, we should retrieve the IOU data for the current chatReportID via the reportIOUs_ Onyx key.
2. This Component will be rendered within a chat in place of ReportActionItemMessage each time the action type is equal to IOUACTION, here: ReportActionItemSingle or ReportActionItemGrouped.
3. The Component should consist of two parts, broken down into separate components:
   1. The Quote section (A): Displaying the action title in the style of a quote message, as well as a ‘View details’ link which has no function for the moment. This section will always be displayed.
   2. The IOU Preview UI (B): Displaying the IOU amount, currency, participants, and a button or message ‘Tom owes Shawn’ depending on who owes who. This section will only be displayed in 1:1 chats, if it is the most recent action for the associated IOU.
   3. If the outstanding report amount is NOT 0, then we should display the Pay button|Tom owes Shawn UI.
   4. If the amount is 0, and the IOReport state == 2, and status == 3, then the report has been settled and we should display the Tom paid Shawn UI
   5. Else, if the IOReport state == 1, and status == 1, then the transaction was cancelled and we should not display section B
4. If the IOU report is within a group chat, the preview component should not be rendered as the actionType is currently ‘TEXT’. If this changes while the work is in progress we will let you know!
5. Currently, currency will be in symbol form (‘GBP’, ‘USD’), for now this is fine but we may find a solution to this while the PR is still in progress.

Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/158104 Upwork URL: https://www.upwork.com/jobs/~0139b48473bd72cabb

[tugbadogan]

@iwiznia I linked my draft PR here.

[Julesssss]

do you want me to change it to store as reportIOUs_<ChatReportID> or do we need to keep it as is, add chatReportID to stored object and search all reportIOUs_ and filter by chatReportID from Onyx value?

The second method. We’ll need to keep using <IOUReportID> for the GetIOUReport key as we will depend on this elsewhere.