[Pay on 6/16] [$250] Inconsistent position of the maximum number of participants reached message on different screens - reported by @adeel0202

[mvtglobally]

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. Press + icon
2. Select New group
3. Choose 8 participants
4. Observe that the maximum number of participants reached message is on top
5. Press + icon
6. Select Split bill
7. Enter any amount and press Next
8. Choose 8 participants
9. Observe that the maximum number of participants reached message is on bottom

Expected Result:

The position of maximum number of participants reached message should be consistent

Actual Result:

The position of maximum number of participants reached message is not consistent

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.57-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @adeel0202
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1649272255080289

View all open jobs on GitHub

[melvin-bot]

A Contributor Manager will be assigned to issue payment via Upwork if we deploy an associated Pull Request to production. Per Contributing.md.

[melvin-bot]

A Contributor Manager will be assigned to issue payment via Upwork if we deploy an associated Pull Request to production. Per Contributing.md.

[melvin-bot]

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

[adeel0202]

Proposal (If External)
(Early as I reported the issue)

On NewChatPage, we can remove maxParticipantsReached from line 221

App/src/pages/NewChatPage.js

Lines 217 to 222 in f174c32

	const headerMessage = OptionsListUtils.getHeaderMessage(
	(this.state.personalDetails.length + this.state.recentReports.length) !== 0,
	Boolean(this.state.userToInvite),
	this.state.searchValue,
	maxParticipantsReached,
	);

And add the message text inside the FixedFooter component on line 271 like this

{maxParticipantsReached && (
    <Text style={[styles.textLabelSupporting, styles.textAlignCenter, styles.mt1, styles.mb3]}>
        {this.props.translate('iou.maxParticipantsReached', {count: CONST.REPORT.MAXIMUM_PARTICIPANTS})}
    </Text>
)}

We can also move the iou.maxParticipantsReached to common.maxParticipantsReached, so that the same error message is used on New group chat screen and Split bill screen. This will require replacing iou.maxParticipantsReached to common.maxParticipantsReached on IOUParticipantsSplit's line 239 as well.

[Tushu17]

Proposal

We have different message for maximum group participants. so instead of using iou.maxParticipantsReached we should use messages.maxParticipantsReached.

To solve the issue:-

We can remove message from the header by removing line 221

App/src/pages/NewChatPage.js

Lines 219 to 222 in fc3e13e

	Boolean(this.state.userToInvite),
	this.state.searchValue,
	maxParticipantsReached,
	);

then we just need to add

{maxParticipantsReached && (
<Text style={[styles.textLabelSupporting, styles.textAlignLeft, styles.mt1, styles.mb3]}> 
{this.props.translate('messages.maxParticipantsReached')}
</Text>
 )}

below line 270

App/src/pages/NewChatPage.js

Lines 269 to 271 in fc3e13e

	{this.props.isGroupChat && lodashGet(this.state, 'selectedOptions', []).length > 0 && (
	<FixedFooter>
	<Button

[melvin-bot]

Triggered auto assignment to @Beamanator (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Beamanator]

Confirmed this bug currently exists 👍 Marking External