[Chat] [IOU] Create IOUConfirm step

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

---

Upwork Posting: https://www.upwork.com/jobs/~01744b3390e36e5f36

This issue builds on top of the existing IOU Modal, which was implemented in this PR. The IOU Confirm step page has already been created and is a controlled component (IOUModal manages its state).

The Confirm step allows users to confirm the ‘request money’ (1:1) or ‘bill split’(multiple participants) amount and the participants they are requesting payment from. To open the Modal, you can navigate to localhost:8080/iou/request AND localhost:8080/iou/split.

You can also 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)

Mobile & mobile web

Web & Desktop

Deliverables:

1. The title should match the title from the Participants step (step 2). This will be ‘Split’ or ‘Request’, followed by the amount. (for example: ‘Split $42.00’ || Request $42.00)
2. If the IOU flow is for a bill split, then we should display the current user under the ‘WHO PAID?’ title (this is not shown for the request money flow)
3. We then need to display all participants other than the current user. With the amount that they will need to pay (total amount, split equally between amount of participants)
   1. If ‘Bill split’ flow, then we should reuse the list from the IOUParticipantsSplit page
   2. If ‘Request money’ flow, then we simply display a single user under the ‘To’ heading
4. An input field should allow the user to input an optional comment for the IOU request
5. The button label should read ‘Request $[currency][amount]’ or ‘Split bill’ if there are multiple participants
6. A new API function should be created within API.js: createIOUTransaction, which will be called from IOUModal to create the IOU (details for this request can be found below).
7. When the user hits this button, we should pass the comment input string up to IOUModal via the existing onStepComplete callback (or something similar), and we should then call the new createIOUTransaction API function from within a new IOUAction function.
   1. We should show a loading indicator in the button (using ButtonWithLoader), by setting the Onyx IOU key to IOU: {loading:true}. We should display a loading indicator in the Button while this is true.
   2. Within this new IOUAction function we should await a successful response to createIOUTransaction, and then pass the returned reportID value to GetIOUReport, to retrieve the full IOUReport details
   3. Then, we should persist the simplified version of these details to Onyx, just like we are doing here
8. Finally, back in IOUModal we should subscribe to the reportIOU_ Onyx key. Once we notice that the new IOU data has been persisted to Onyx (when we persist the data in step 7, we should receive this in our Onyx subscription). Once this value is not null, we know that the report has successfully been created and persisted to Onyx, so we can close the IOU Modal.

CreateIOUTransaction API Example of the API which is used to create the IOU request / split.

curl --request POST \
  --url 'https://expensify-jules.ngrok.io/api?command=CreateIOUTransaction' \
  --header 'Content-Type: multipart/form-data; boundary=---011000010111000001101001' \
  --cookie 'email=jules%252B3%2540expensify.com; accountID=12; authToken=66ADF90...22AE918' \
  --form debtorEmail=[e-mail] \
  --form currency=USD \
  --form 'comment=Pizza 🍕' \
  --form amount=550

Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/157782

[barun1997]

I will take a look, thank you!

[Jag96]

Reopening this, it seems that there is still a regression related to the original fix. cc @barun1997