Create IOU participant selection step. #1738

barun1997 · 2021-03-12T03:49:58Z

Details

Added request page for requesting funds from users.
Added split page for splitting bill amount.
Managed steps for the communication.

Tests

Performed UI tests on each of the platforms.
The search works well on each.
On selecting the options the logic for Next button to appear or the request amount page is well rendered.

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

github-actions · 2021-03-12T03:50:11Z

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

barun1997 · 2021-03-12T03:52:55Z

I have read the CLA Document and I hereby sign the CLA

barun1997 · 2021-03-12T03:55:06Z

recheck

shawnborton · 2021-03-12T09:38:24Z

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

+        return (
+            <View style={[styles.flex1, styles.w100]}>
+                <Text style={[styles.headerText, styles.pt3, styles.ph5]}>
+                    TO


Let's just make this To for now and use the style styles.formLabel

Thank you! will implement the change

Julesssss · 2021-03-12T19:52:33Z

Hey @barun1997, thanks for the submission! Unfortunately I completely missed this today, but look forward to reviewing first thing Monday.

AndrewGable

Just on my initial read, here are some style changes I'd recommend

src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js

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

roryabraham

Didn't get all the way through this, but had just a few comments.

src/pages/iou/IOUModal.js

src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js

roryabraham · 2021-03-13T01:42:18Z

src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js

+    personalDetails: PropTypes.objectOf(personalDetailsPropTypes).isRequired,
+
+    // All reports shared with the user
+    reports: PropTypes.shape({


Should this be PropTypes.arrayOf(PropTypes.shape({...})) ?

@roryabraham The prop (props.reports), in this case, is an object with the given shape. The getNewGroupOptions function maps it into an array.

src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js

barun1997 · 2021-03-13T04:15:47Z

Thank you @roryabraham for the comments. I will look into it and resolve the issues.

barun1997 · 2021-03-15T16:23:12Z

recheck

barun1997 · 2021-03-15T16:34:59Z

Hey @Julesssss, before the weekend, the file /libs/actions/Sidebar was in place, but looks like it was removed, should I implement the requirement on my own, or is there an alternative that we prefer over those functions?
That is the reason the tests are failing!

roryabraham · 2021-03-15T16:54:06Z

cc @marcaaron I think this might be related to the react-navigation switch?

src/pages/iou/IOUModal.js

src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js

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

Julesssss

Looking good!

The only other change I'd like suggest is that we keep the isLoading logic. The idea is that we'll reuse the IOU {loading} Onyx key for each page. Setting it to true via an Onyx Action. Please let me know if you have any questions or concerns about this.

barun1997 · 2021-03-16T07:24:26Z

@Julesssss I re-implemented the loading logic. Please kindly take a look into it, and let me know if you have any suggestions.

src/pages/iou/IOUModal.js

Julesssss

Thanks for addressing the feedback, I think there are a few more comments to work through.

As a final change, would it be possible to pass the participants back to IOUModal every time the selection changes, rather than on the button press? Then pass them back down to IOUParticipantsRequest|IOUParticipantsSplit via a participants prop. This would allow us to remember the selection if the user navigates back to the amount page from the participants selection.

Sorry for not making this clear in the initial issue!

barun1997 · 2021-03-16T15:44:09Z

@Julesssss Sure, no worries! I will implement the change first thing tomorrow.

barun1997 · 2021-03-17T05:02:47Z

As a final change, would it be possible to pass the participants back to IOUModal every time the selection changes, rather than on the button press? Then pass them back down to IOUParticipantsRequest|IOUParticipantsSplit via a participants prop. This would allow us to remember the selection if the user navigates back to the amount page from the participants selection.

Hi @Julesssss, I implemented the change as you requested. But I am a bit not sure how the UI for IOUParticipantsRequest will look in this case. For instance, when the user selects a participant, the current implementation navigates them immediately to the confirmation screen. If they navigate back to IOUParticipantsRequest, should we show a tick mark beside the previously selected participant? Or allow them to select a new participant (while holding the current participant state in IOUModal)?

If we don't have to show a tick mark beside the selected participant, in that case, perhaps it's not necessary to pass the participants prop onto IOUParticipantsRequest. We could only send a callback prop to add a participant to the state in IOUModal when an option is selected.

Julesssss · 2021-03-17T11:45:24Z

If they navigate back to IOUParticipantsRequest, should we show a tick mark beside the previously selected participant? Or allow them to select a new participant (while holding the current participant state in IOUModal)?

If we don't have to show a tick mark beside the selected participant, in that case, perhaps it's not necessary to pass the participants prop onto IOUParticipantsRequest. We could only send a callback prop to add a participant to the state in IOUModal when an option is selected.

Good point, I agree that we should not pass the prop into IOUParticipantsRequest, but only for IOUParticipantsSplit.

Julesssss

The rest of the PR looks good to me. Happy to approve once you remove the prop from IOUParticipantsRequest and add the missing comment.

Julesssss · 2021-03-17T11:49:46Z

@roryabraham there are some responses to your original comments, would you mind reviewing them?

Changes have been made to address your comments

AndrewGable · 2021-03-17T19:47:50Z

Looks great! 👍

Beamanator · 2021-05-19T13:57:35Z

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

+
+        if (this.state.userToInvite) {
+            sections.push(({
+                undefined,


What's this doing here? :D

:ohnothing:

Perhaps this was how we were hiding the title back then?

Perhaps? Idk why we'd want a property undefined set to undefined though 😅

barun1997 requested a review from a team as a code owner March 12, 2021 03:49

botify requested review from bondydaa and removed request for a team March 12, 2021 03:50

barun1997 changed the title ~~Create IOU particiapnt selection step.~~ Create IOU participant selection step. Mar 12, 2021

shawnborton reviewed Mar 12, 2021

View reviewed changes

Julesssss self-requested a review March 12, 2021 19:44

trjExpensify mentioned this pull request Mar 12, 2021

[Chat] [IOU] Create IOU Participant selection step #1694

Closed

iwiznia assigned barun1997 Mar 12, 2021

AndrewGable previously requested changes Mar 13, 2021

View reviewed changes

roryabraham reviewed Mar 13, 2021

View reviewed changes

Julesssss reviewed Mar 15, 2021

View reviewed changes

src/pages/iou/IOUModal.js Outdated Show resolved Hide resolved

Julesssss reviewed Mar 15, 2021

View reviewed changes

src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js Outdated Show resolved Hide resolved

marcaaron reviewed Mar 15, 2021

View reviewed changes

src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js Outdated Show resolved Hide resolved

marcaaron reviewed Mar 15, 2021

View reviewed changes

src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js Outdated Show resolved Hide resolved

marcaaron reviewed Mar 15, 2021

View reviewed changes

src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js Outdated Show resolved Hide resolved

Julesssss requested changes Mar 15, 2021

View reviewed changes

barun1997 force-pushed the feature/participants-select branch from 8905fe2 to 0edbd6c Compare March 16, 2021 06:58

barun1997 requested review from AndrewGable and Julesssss March 16, 2021 07:25

Julesssss reviewed Mar 16, 2021

View reviewed changes

src/pages/iou/IOUModal.js Outdated Show resolved Hide resolved

Julesssss requested changes Mar 16, 2021

View reviewed changes

barun1997 force-pushed the feature/participants-select branch from 0edbd6c to b27309a Compare March 17, 2021 05:46

Julesssss reviewed Mar 17, 2021

View reviewed changes

barun1997 added 6 commits March 17, 2021 18:22

Create IOU particiapnt selection step.

f242c79

Fix indentation issues.

8b83714

Resolve comments and add loader logic.

f8a25ce

Sends participants to IOU Modal when a selection is changed

8194f63

Fix line spacing for ParticipantsSplit

fb34951

Add comments to clarify indexOffset logic

f085f11

barun1997 force-pushed the feature/participants-select branch from e3e5087 to f085f11 Compare March 17, 2021 12:39

Julesssss approved these changes Mar 17, 2021

View reviewed changes

Julesssss merged commit 6c556f0 into Expensify:master Mar 17, 2021

github-actions bot locked and limited conversation to collaborators Mar 17, 2021

Beamanator reviewed May 19, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create IOU participant selection step. #1738

Create IOU participant selection step. #1738

barun1997 commented Mar 12, 2021 •

edited by Julesssss

Loading

github-actions bot commented Mar 12, 2021 •

edited

Loading

barun1997 commented Mar 12, 2021

barun1997 commented Mar 12, 2021

shawnborton Mar 12, 2021

barun1997 Mar 12, 2021

Julesssss commented Mar 12, 2021

AndrewGable left a comment

roryabraham left a comment

roryabraham Mar 13, 2021

barun1997 Mar 16, 2021 •

edited

Loading

barun1997 commented Mar 13, 2021

barun1997 commented Mar 15, 2021

barun1997 commented Mar 15, 2021

roryabraham commented Mar 15, 2021

Julesssss left a comment •

edited

Loading

barun1997 commented Mar 16, 2021

Julesssss left a comment

barun1997 commented Mar 16, 2021

barun1997 commented Mar 17, 2021 •

edited

Loading

Julesssss commented Mar 17, 2021

Julesssss left a comment

Julesssss commented Mar 17, 2021

AndrewGable commented Mar 17, 2021

Beamanator May 19, 2021

Julesssss May 19, 2021

Julesssss May 19, 2021

Beamanator May 19, 2021

Create IOU participant selection step. #1738

Create IOU participant selection step. #1738

Conversation

barun1997 commented Mar 12, 2021 • edited by Julesssss Loading

Details

Tests

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

github-actions bot commented Mar 12, 2021 • edited Loading

barun1997 commented Mar 12, 2021

barun1997 commented Mar 12, 2021

shawnborton Mar 12, 2021

Choose a reason for hiding this comment

barun1997 Mar 12, 2021

Choose a reason for hiding this comment

Julesssss commented Mar 12, 2021

AndrewGable left a comment

Choose a reason for hiding this comment

roryabraham left a comment

Choose a reason for hiding this comment

roryabraham Mar 13, 2021

Choose a reason for hiding this comment

barun1997 Mar 16, 2021 • edited Loading

Choose a reason for hiding this comment

barun1997 commented Mar 13, 2021

barun1997 commented Mar 15, 2021

barun1997 commented Mar 15, 2021

roryabraham commented Mar 15, 2021

Julesssss left a comment • edited Loading

Choose a reason for hiding this comment

barun1997 commented Mar 16, 2021

Julesssss left a comment

Choose a reason for hiding this comment

barun1997 commented Mar 16, 2021

barun1997 commented Mar 17, 2021 • edited Loading

Julesssss commented Mar 17, 2021

Julesssss left a comment

Choose a reason for hiding this comment

Julesssss commented Mar 17, 2021

AndrewGable commented Mar 17, 2021

Beamanator May 19, 2021

Choose a reason for hiding this comment

Julesssss May 19, 2021

Choose a reason for hiding this comment

Julesssss May 19, 2021

Choose a reason for hiding this comment

Beamanator May 19, 2021

Choose a reason for hiding this comment

barun1997 commented Mar 12, 2021 •

edited by Julesssss

Loading

github-actions bot commented Mar 12, 2021 •

edited

Loading

barun1997 Mar 16, 2021 •

edited

Loading

Julesssss left a comment •

edited

Loading

barun1997 commented Mar 17, 2021 •

edited

Loading