[HOLD for payment 2021-09-11] [Pay on 10th Sept] No feedback for the users to know about the maximum number of participants on Split Bill page

[parasharrajat]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Sudden Change in the list of users feels like an issue. Some kind of feedback is necessary to tell that you can only select 8 participants then the User will know.

Action Performed:

1. Open newDot on Mobile.
2. Click FAB button>split Bill.
3. Now enter the amount and continue.
4. On the participant page start selecting participants.

Expected Result:

Describe what you think should've happened

Actual Result:

Once you have selected 8 users selection list is trimmed but there is no way to know why other participants got vanished from the list. I was thinking of it as an issue and after checking the code I come to know.

Workaround:

None. UX issue.

Suggestion

I think it's good to add a number somewhere which indicates the count of the selected users.
for example:

• Please select a maximum of 8 participants.
• {count of currently selected}/8 Somewhere in the UI.

Platform:

Where is this issue occurring?

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

Version Number: 1.0.85.0
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

max-noti.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

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

[MelvinBot]

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

[tylerkaraszewski]

Sounds reasonable enough I guess? I don't have a strong opinion on this.

[shawnborton]

Sounds like this needs some kind of mockup from Design right?

In this particular case, I'm not entirely sure where is best to place the error message. Typically we might put an error message like this right below an input, but you don't need the input to select people on this page. That makes me think that we could place it near the green button (perhaps dock it right above it?) or even take advantage of some of that empty space in the top right next to the "To" field. Thoughts? cc @Expensify/design

[MelvinBot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[MelvinBot]

@shawnborton Eep! 4 days overdue now. Issues have feelings too...

[shawnborton]

On my radar...

[shawnborton]

Posted to Slack for discussion, but I think something like this would be great:

[parasharrajat]

Ok. Looking at slack, I agree. Let's go with this design. baking the proposal now. Meanwhile, you can forward the process.

[shawnborton]

Sounds good to me!

[parasharrajat]

Proposal

1. We have to show the text when participants' length reaches 8 here

   App/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js

   Line 251 in 5e883f3

   <FixedFooter>

   .

as

 {this.props.participants?.length >= CONST.REPORT.MAXIMUM_PARTICIPANTS
                            && <Text style={[styles.textLabelSupporting, styles.textAlignCenter, styles.mt1, styles.mb3]}>You&rsquo;ve selected the maximun number ({CONST.REPORT.MAXIMUM_PARTICIPANTS}) of participants</Text>}

3. This will be translated.

it looks like this.

[MelvinBot]

@shawnborton Huh... This is 4 days overdue. Who can take care of this?

[kevinksullivan]

here is the job @parasharrajat

https://www.upwork.com/jobs/~015f6d5bbb55036089

[MelvinBot]

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

[Julesssss]

@parasharrajat your proposal looks good 👍

@kevinksullivan please hire Rajat when you see this

[kevinksullivan]

All set.

[botify]

🚀 Deployed to staging by @Julesssss in version: 1.0.92-3 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

[botify]

🚀 Deployed to production by @roryabraham in version: 1.0.93-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[kevinksullivan]

Waiting for 7 days after deploying to prod + no regressions to pay.

[kevinksullivan]

Paid + bonus. Thanks @parasharrajat !

[parasharrajat]

@shawnborton I was wondering that maybe this feedback should be added to NewGroupPage as well. What do you think?

[shawnborton]

I think that makes total sense, yeah!

[parasharrajat]

Should I open another issue? @shawnborton and We can cover all the screens that should have it.

[shawnborton]

Actually it looks like we already handle this situation, albeit a bit differently:

[parasharrajat]

Great. Please let me know if any other component needs to have this. Also, I think the new workspace Invite page could be a candidate if there is a limit of users.
So it's better if that can be added to the requirements. #4775 (comment)

[shawnborton]

Sounds good - I don't think that one has a limit.