App: [HOLD https://github.com/Expensify/App/issues/19066] [$2000] IOU - IOU is duplicated after request errors

Daily update: I’ve read the whole thread above and now I’m checking the proposals of both @tienifr and @bernhardoj if we can go with one of them (fully or partially) - I’ll most likely post some insights about it tomorrow.

@burczu there is some overlap with the issue this PR is solving.

Also, the details view we are seeing is getting redone by “manual request”. I agree with @luacmartins about putting a HOLD until that is implemented.

I think that looks correct to me, but once again, calling on my offline pattern experts @trjExpensify and @JmillsExpensify for a second opinion here.

@aldo-expensify thanks for the information - please keep me posted when it’s possible to get back to this issue.

Sounds good to me @aimane-chnaif , thanks.

@burczu please start working on the PR.

Daily update: my proposal is under our internal review in the Callstack team. Should be posted here soon.

Daily update: I’ve checked both proposals and it seems they fix the issue only partially - I’m working on my own proposal and then we will see how similar it is to these proposals.

@tienifr @bernhardoj I requested Callstack’s help to move with this faster. If your solutions are used in the final implementation you will be compensated accordingly.

@aimane-chnaif checking in here, what do you think of the proposal? Otherwise we could get Callstack to help with this one

Let’s open for contributors 1-2 days if you agree since we cleared requirement recently.

@bfitzexpensify I’m reassigning as I’m ooo until Tues April 04 and this one will see some movement in that time.

Current Status:

• Upwork Job posted
• Proposals are being reviewed

When its time to make payments:

Issue reported by: Applause - Internal Team (no payment needed) Fix: TBD - a proposal hasn’t been officially accepted, assigned to this GH yet PR Review: will be done by @aimane-chnaif

@tienifr as per guideline, full proposal should be submitted only once. Following proposals should just be “Proposal updated”. If this is the one you’re proposing finally, delete old proposals or mark them as outdated.

Interesting point, I think I agree, @shawnborton ?

Yup, I agree.

@aimane-chnaif my take is that the expected results should be:

RHN, IOU details with failed “Settled up elsewhere”:

Notice the opacity change in the entry “Settled up elsewhere” and the alignment of the error. Don’t worry about the error message text content for now, I think that has to be fixed in the server.

When you dismiss the error the semi-transparent “Settled up elsewhere” entry should be removed too

Chat (⚠️ THIS IS OUTDATED - look at the GH issue’s body for the up to date version)

The failed “Settled up elsewhere” in the main chat should have less opacity and the error should be below it.

Dismissing the error should clear the “Settled up elsewhere” entry and return to what you initially had:

The failed “Settled up elsewhere” entries are not really stored in the server, if you log out and log in, they are not there anymore. This is why it makes sense for me that clearing the error should clear them too.

@shawnborton can you check if the above expected behaviour looks correct ^ 🙏

Proposal

Please re-state the problem that we are trying to solve in this issue.

Request money message is duplicated on main device after request error This is the problem from both be and fe side. As @aldo-expensify mentioned here

I’m thinking that the approach should be the same. The “Settled up elsewhere” should look a bit transparent on error and should disappear when the user clicks the X to dismiss the error.

We should transparent on error and disappear when user clicks the X button

What is the root cause of that problem?

In https://github.com/Expensify/App/blob/657b439007004a5a128fc76df00327cb14203915/src/components/OfflineWithFeedback.js#L88

we don’t make opacity for the iou error message

and in ReportActionItem we also don’t have the logic to delete settled up elsewhere

What changes do you think we should make in order to solve the problem?

we should have the new logic to transparent the iou error message in OfflineWithFeedback,js

    const isIUOError = hasErrors && props.actionName===CONST.BETAS.IOU
    const needsOpacity = (isOfflinePendingAction && !isUpdateOrDeleteError) || isAddError || isIUOError;

In ReportActionItem.js we should pass actionName and deleteOptimisticReportAction if actionName===IOU

onClose={() => {
    if (this.props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD || this.props.action.actionName === CONST.BETAS.IOU) {
    ReportActions.deleteOptimisticReportAction(this.props.report.reportID, this.props.action.reportActionID);
    } else {
    ReportActions.clearReportActionErrors(this.props.report.reportID, this.props.action.reportActionID);
  }
}}
pendingAction={this.props.draftMessage ? null : this.props.action.pendingAction}
errors={this.props.action.errors}
errorRowStyles={[styles.ml10, styles.mr2]}
actionName={this.props.action.actionName}

In https://github.com/Expensify/App/blob/acc4984ce41d21e0f89c1913053232a567598d8c/src/pages/iou/IOUDetailsModal.js#L146 we have to get pendingAction from reportActions in findPendingAction function because this function just returns reportActions. It may not related to this issue but we should do this to prevent unexpected error.

Result

https://user-images.githubusercontent.com/113963320/224228792-c2c44493-d559-4fc0-883a-d9c02b7e875b.mp4