'Settled' and 'cancelled' events should display in IOUDetails Modal

[Julesssss]

Details

As of the latest IOU Details issue, only IOU transaction events are displayed in the Modal, but not 'Settled' and 'Cancelled' events. This PR refactors the previous logic, enabling all reportComments of type IOU to be shown in the IOUDetails Modal.

This also fixes a bug caused by incorrect Number to String Javascript conversion.

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/164703
Fixes https://github.com/Expensify/Expensify/issues/164704

Tests

NOTE: If you see the This action was taken on old code and is not supported anymore message, the IOU was created from out-of-date Auth code. Please ensure Auth is pulled and rebuilt, then create a new IOU to perform the test.

1. As userA, create an IOU via 'Request Money' to userB
2. Within the chatReport with userB, you should see the following message:
   
3. Note that the full Preview Component might not display, due to this bug
4. Repeat step two, creating a second IOU transaction against the same user
   
5. Now, we need to cancel one of the transactions (QA should skip this step)
   5b. To find the **reportID**, click View Details and note the second route param
   
   5c. To locate the **transactionID**, open the Chrome dev tools Application/Local Storage tab, and search the reportID from 5b. Locate reportIOUs_XYZ where XYZ is the reportID.
   5d. Use one of the transactionID values in the API request in 5e
   
   5e. Make the following API call, replacing authToken, email, accountId, reportID, & transactionID

curl --request POST \
  --url 'https://expensify-jules.ngrok.io/api?command=RejectTransaction' \
  --header 'Content-Type: multipart/form-data; boundary=---011000010111000001101001' \
  --cookie 'email=user8%2540expensify.com; accountID=162; authToken=BCFB...04FAB' \
  --form reportID=1182 \
  --form transactionID=2212712

5f. You should see a new 'Declined/Cancelled the $12.34 request' message, depending on which used rejected the transaction

6. Now, log out and log back in as userB
7. Once logged in, refresh the page to avoid this bug
8. Navigate to the chatReport with userA

9. Click 'View Details'', or 'Pay'
10. Settle the IOU by tapping the 'I'll settle up elsewhere' button
    
11. You should see an event for each IOU action that we performed:
    • Requested $100.00
    • Requested $1.00
    • Declined the $1.00 request
    • Settled up elsewhere

QA Steps

Run above tests, but SKIP STEP 5!, as this is not yet possible.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[Julesssss]

Hi @MonilBhavsar, I've noticed that sometimes duplicate transactions are displayed in the Details page. Once I've resolved this issue I'll remove the WIP marker.

[Julesssss]

Alright @MonilBhavsar -- this is good to review on Monday. I fixed the duplicates issue.

[Julesssss]

CC @iwiznia you may be interested in reviewing, but no pressure

Out of date

[Julesssss]

Ready for another review @MonilBhavsar @iwiznia:

• Merged main
• Switched the list item key to sequenceNumber

[MonilBhavsar]

Screenshots left to be added.

[Julesssss]

Added the screenshots

[OSBotify]

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