Show IOU preview component persistently regardless of state

[Christinadobrzyn]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Click the green + icon and select Request Money
2. Enter an amount and click next
3. Select an attendee and then Request $x to confirm
4. Log-in as the other user that received the request, click pay and I'll settle up elsewhere
5. Observe that there is a preview component on the settled IOU
6. Send another request
7. Observe that the preview component is removed from the previously settled IOU and displayed on the most recent request

Expected Result:

Continue displaying the preview component in the chat history when an IOU is in the reimbursed (settled) state, regardless of whether new IOU’s have been created thereafter.

Actual Result:

The preview component window is missing after the first payment to the same recipient. Here's a video from the recipient side.

Here's the missing preview component window:

Platform:

Where is this issue occurring?

X Web
X iOS
X Android
X Desktop App
X Mobile Web

Version Number: v1.0.68-4
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: SEE ABOVE
Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/166668

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @trjExpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[Christinadobrzyn]

Please ignore @trjExpensify! The label was automatically assigned when I created this post. I've got this one.

[Christinadobrzyn]

Posted in Upwork: https://www.upwork.com/jobs/~0144a12bd5dfca5c7e

[MelvinBot]

Triggered auto assignment to @roryabraham (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[tugbadogan]

Hi,

I would like to work on this issue. I added this component in the first place. Here is my proposal:

• This is the place where we decide to show IOU Preview component https://github.com/Expensify/Expensify.cash/blob/7931eea7ebffd328e3578c0287150413eb691f98/src/components/ReportActionItem/IOUAction.js#L50-L57

• We need to fix this prop for historical IOU Reports not only the most recent one.

• I will update updateMostRecentIOUReportActionNumber function to store the most recent sequence number for EACH IOU Report in an array.

https://github.com/Expensify/Expensify.cash/blob/2e81800fdcfd9432141385ca9377494f0ad1a0f4/src/pages/home/report/ReportActionsView.js#L298-L309

• Finally I need to change this condition to check max sequence number for current IOU Report ID
  https://github.com/Expensify/Expensify.cash/blob/2e81800fdcfd9432141385ca9377494f0ad1a0f4/src/pages/home/report/ReportActionsView.js#L374

[Julesssss]

Hey @tugbadogan, thanks for the proposal. While that solution should work, I wonder if it's possible to instead modify this condition:

{isMostRecentIOUReportAction && Boolean(action.originalMessage.IOUReportID) &&

To something like:

{(isMostRecentIOUReportAction && Boolean(action.originalMessage.IOUReportID)
   || the IOU is paid AND total != 0 ) && ...

If it's possible to make this check, then storing an array of recent sequence numbers might not be necessary.