Android - IOU - Composer is available when details are open

[kavimuru]

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. Open the App
2. Login with any account
3. Send money request to any user
4. Open the chat for the money request you just sent
5. Open details of money request

Expected Result:

Composer is not active, you can't send the comment

Actual Result:

Composer is focusing and you can write comments + open banner overlaps the text

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.16.5
Reproducible in staging?: y
Reproducible in production?: y
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

Bug6061291_Record_2023-05-19-20-10-22_4f9154176b47c00da84e32064abf1c48__1_.mp4

Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @maddylewis (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 ReportActionCompose component is not hidden on IOU reports.

What is the root cause of that problem?

The reason for this is because there's no condition to handle it. People would assume this isn't a bug, but since it's opened by the Internal team, I guess it has to be.

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

To fix this, we check for the type of report to decide whether to hide the composer similar to how we hide it if there are errors or the report is archived. For example using ReportUtils.isIOUReport() or something similar.

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

Lines 66 to 97 in 8180113

	render() {
	const isArchivedRoom = ReportUtils.isArchivedRoom(this.props.report);
	const hideComposer = isArchivedRoom || !_.isEmpty(this.props.errors);
	return (
	<>
	{(isArchivedRoom || hideComposer) && (
	<View style={[styles.chatFooter, this.props.isSmallScreenWidth ? styles.mb5 : null]}>
	{isArchivedRoom && <ArchivedReportFooter report={this.props.report} />}
	{!this.props.isSmallScreenWidth && (
	<View style={styles.offlineIndicatorRow}>{hideComposer && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}</View>
	)}
	</View>
	)}
	{!hideComposer && (this.props.shouldShowComposeInput || !this.props.isSmallScreenWidth) && (
	<View style={[this.getChatFooterStyles(), this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
	<SwipeableView onSwipeDown={Keyboard.dismiss}>
	<ReportActionCompose
	onSubmit={this.props.onSubmitComment}
	reportID={this.props.report.reportID.toString()}
	reportActions={this.props.reportActions}
	report={this.props.report}
	pendingAction={this.props.pendingAction}
	isComposerFullSize={this.props.isComposerFullSize}
	disabled={this.props.shouldDisableCompose}
	/>
	</SwipeableView>
	</View>
	)}
	</>
	);
	}

Note: It is also recommended to add a condition in the backend, i.e. give an error if a user attempts to add a comment where they shouldn't.

What alternative solutions did you explore? (Optional)

None.

[payal-lathidadiya]

Looks like this is intended feature, I could see this functionality was added as part of this MR #18981 with commit dc7d3bd as part of threads feature.

I think, we'll have to review UI and UX to bring better UI mocks for composer function inside send money threads.

Currently, when typing in text keyboard pops up and user experience is not great as Send money request detail section takes most of space on small screen.

cc: @mountiny

[mountiny]

Correct, this is intended, you can comment on the iou report same as on any other report

[mountiny]

@kavimuru noting this is not a bug but intended behaviour, users can comment on iou, expense and request details pages, they are all like threads