[BONUS PAYOUT ONLY] [$1000] Chat - Redundant "Unexpected error" below the IOU" message after split from 2 devices

[kbecciv]

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. Log in with the same account in the main testing device and a secondary device
2. Disable the internet connection in the main testing device
3. In the secondary device Split a bill with 2 users, this should create a new group and 2 new 1:1 conversations
4. In the main testing device (should be offline) create the SAME split bill with the 2 users
5. Enable the internet connection in the main testing device. The split bill request will be sent and you will get an error in the main device only.
6. Duplicated chats are display in the LHN
7. Open any dup chat with red dot

Expected Result:

PR #18328
says "We shouldn't need to use a generic error message for failure data for the request money / send money flow when creating a New Chat, just like split bill. Otherwise, it will just be redundant with the error sent by the API.". And step 8 of the PR says "Make sure there is no "Unexpected error" below the IOU" (second error message).
In scenario above (steps) as chat is invalid then no need for second redundant message under IOU

Actual Result:

Second redundant "unexpected error" message under IOU is displayed.
is redundant, he second error message under IOU is redundant as chat is invalid and will be deleted.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.13.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6052638_video_45.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0136c6f52250bef4a6
• Upwork Job ID: 1658967606698582016
• Last Price Increase: 2023-06-09

[melvin-bot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[therealsujitk]

Proposal

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

The issue here is each ReportActionItem displays an error even if the report is invalid, in which case only one error is sufficient.

What is the root cause of that problem?

The problem is we are displaying the error without checking if the report is valid or not in the code below.

App/src/pages/home/report/ReportActionItem.js

Lines 352 to 357 in 9b48b8e

	<OfflineWithFeedback
	onClose={() => ReportActions.clearReportActionErrors(this.props.report.reportID, this.props.action)}
	pendingAction={this.props.draftMessage ? null : this.props.action.pendingAction}
	errors={this.props.action.errors}
	errorRowStyles={[styles.ml10, styles.mr2]}
	needsOffscreenAlphaCompositing={this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU}

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

To fix this, we simply check if the report is valid and use it to decide whether to display error messages or not.

const isReportValid = !lodashGet(this.props.report, 'errorFields.addWorkspaceRoom') && !lodashGet(this.props.report, 'errorFields.createChat');

<OfflineWithFeedback
    onClose={() => ReportActions.clearReportActionErrors(this.props.report.reportID, this.props.action)}
    pendingAction={this.props.draftMessage ? null : this.props.action.pendingAction}
    errors={this.props.action.errors}
    shouldShowErrorMessages={isReportValid}     // Added this line
    errorRowStyles={[styles.ml10, styles.mr2]}
    needsOffscreenAlphaCompositing={this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU}
>...</OfflineWithFeedback>

What alternative solutions did you explore? (Optional)

• We can remove the error field in failureData if a new report is being created but failed and create a forceOpacity prop in the OfflineWithFeedback component to force the opacity effect.
• We can set the error field's timestamp to null and render the error message if it is not null.

[mountiny]

cc @yuwenmemon would you be bale to handle this one since it seems like related to your PR, thanks!

[jliexpensify]

Not overdue, waiting on input from @yuwenmemon

[jliexpensify]

Not overdue, waiting on Yuwen's input

[yuwenmemon]

@therealsujitk's proposal seems good to me.