Enable IOUPreview for bill splits #18143

Julesssss · 2023-04-28T12:45:59Z

Details

Enabled the IOUPreview to display within groups. Bill Splits amount, participant, comment, and currency data will show in the preview. Tapping it will open the group participants page for now.

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/270707

Tests

1) Request money from a single user

Locate any user chat
Request money from them via the FAB or ChatReport menu
An IOUPreview should display
It should show 'Cash' at the top of the component
The amount and currency should be displayed
If a description was added, it should display
Both user avatars should be displayed
Hovering over the avatars should display the participant emails
Tapping it should take you to the IOUDetails Modal

2) Split a bill with a group of users

Locate any group chat with 3 or more users
Split a bill with the group via the FAB or ChatReport menu
Multiple 1:1 requests should be created
An IOUPreview should display within the group chat
It should show 'Split' at the top of the component
The amount and currency should be displayed
If a description was added, it should display
One avatar should be displayed, with a counter displaying the number of other participants
Hovering over the avatars should display the participant emails
Tapping it should take you to the Details page, showing the list of other participants

Offline tests

Run the above tests. [FOR TEST 1 ONLY] In addition, you should see a 'Total will update when you're back online' message in the IOUPReview if your users are on different currencies. This doesn't apply to group splits as we don't have an associated iouReport to read from.

QA Steps

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

aimane-chnaif · 2023-05-05T15:54:22Z

doing final review now

mountiny

~~requesting $90 in a group of 3 people has split the amount as if it was a group of 4 people~~ all good I have added more people to the group than I wanted.... so its 4 actually

mountiny

All good, I am idiot.

luacmartins · 2023-05-05T17:36:59Z

Just waiting on final review by @aimane-chnaif! Thanks for the urgency on this one!

aimane-chnaif · 2023-05-05T18:42:26Z

All tests well.
Only one issue while offline testing (might happen on main as well)

reproducible step (as in video):

B has pending money request from A
Disable network on A
A split bill with B, C in group chat
B pay A's pending request
Enable network on A
Split fails showing "Unexpected error request money, please try again later"

Screen.Recording.2023-05-05.at.7.33.10.PM.mov

aimane-chnaif · 2023-05-05T19:32:52Z

I confirmed that above happens on main as well.
However, request/delete money always fails between 2 specific users. Send money works (tested on main)
Other users work fine all cases.

delete.failure.mov

request.failure.mov

As all of these already happen on main, not a blocker for this PR

aimane-chnaif · 2023-05-05T19:41:02Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android / native
- Android / Chrome
- iOS / native
- iOS / Safari
- MacOS / Chrome / Safari
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

split.offline.mov

Mobile Web - Chrome

Mobile Web - Safari

Desktop

desktop.mov

iOS

Android

melvin-bot · 2023-05-05T19:41:27Z

🎯 @aimane-chnaif, thanks for reviewing and testing this PR! 🎉

An E/App issue has been created to issue payment here: #18504.

Julesssss · 2023-05-05T19:50:47Z

Thanks for the detailed review @aimane-chnaif. You should claim the bug bounty for those other issues you found too 😉

OSBotify · 2023-05-05T19:53:18Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

aimane-chnaif · 2023-05-07T22:59:10Z

src/pages/workspace/WorkspaceInviteMessagePage.js

@@ -180,7 +169,7 @@ class WorkspaceInviteMessagePage extends React.Component {
                        <View style={[styles.mv4, styles.justifyContentCenter, styles.alignItemsCenter]}>
                            <MultipleAvatars
                                size={CONST.AVATAR_SIZE.LARGE}
-                                icons={this.getAvatars()}
+                                icons={OptionsListUtils.getAvatarsForLogins(this.props.invitedMembersDraft)}


We missed 2nd param - this.props.personalDetails
Here's follow-up PR: #18568

aimane-chnaif · 2023-05-07T23:17:53Z

src/components/ReportActionItem/IOUPreview.js

+                        </Text>
+                    )}
+
+                    <Text>{lodashGet(props.action, 'originalMessage.comment', '')}</Text>


I think we should use decoded comment here for html characters

Suggested change

<Text>{lodashGet(props.action, 'originalMessage.comment', '')}</Text>

<Text>{Str.htmlDecode(lodashGet(props.action, 'originalMessage.comment', ''))}</Text>

OSBotify · 2023-05-09T03:32:23Z

🚀 Deployed to staging by https://github.com/luacmartins in version: 1.3.12-0 🚀

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

OSBotify · 2023-05-09T04:04:22Z

🚀 Deployed to production by https://github.com/roryabraham in version: 1.3.12-0 🚀

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

OSBotify · 2023-05-09T04:05:42Z

🚀 Deployed to staging by https://github.com/luacmartins in version: 1.3.12-0 🚀

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

0xmiros · 2023-06-02T23:01:38Z

src/components/MoneyRequestConfirmationList.js

@@ -105,10 +106,10 @@ class MoneyRequestConfirmationList extends Component {
     */
    getSplitOrRequestOptions() {
        return [{
-            text: this.props.translate(
-                this.props.hasMultipleParticipants ? 'iou.split' : 'iou.request',
+            text: Str.recapitalize(this.props.translate(


Coming from #18823:
This change was overlooked. There's another case of letter needs to be uppercased as well as first letter.
i.e. "Request CA$6.00"
This could have been caught earlier if we had tested this copy change in Spanish.

eVoloshchak · 2023-06-06T18:05:06Z

src/components/ReportActionItem/IOUAction.js

                    chatReportID={props.chatReportID}
+                    isBillSplit={hasMultipleParticipants}


Coming from #18671.
We were using participants.length to determine if action is a split action, so the check would fail if you delete all of the participants from the workspace.
This was fixed by checking the original type of the action
const isSplitBillAction = lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT;

Julesssss added 5 commits April 27, 2023 15:20

locate iouReportID in ReportActionItem to simplify onyx report retrieval

570bc0c

pas requestReportID to IOUAction comp as string

dc1fe5b

Merge branch 'main' into jules-iouPreview-showForBillSplit

0cc25d7

always show iouPreview component

70579f1

implement launching of the chat participants page from the IOUPreview

2de4b4b

Julesssss self-assigned this Apr 28, 2023

IOUPreview now launches either the IOUDetailsPage or ParticipantsPage

e60913e

luacmartins self-requested a review April 28, 2023 13:47

mountiny self-requested a review April 28, 2023 23:31

Julesssss added 13 commits May 2, 2023 16:32

Merge branch 'main' into jules-iouPreview-showForBillSplit

2fb9ab4

improve iouPreview callback naming

7836e1f

for group split IOUPreview, use currency and total from action

605fce5

don't show IOUPreview paid icon for splits

c89d438

add isBillSplit prop to IOUPreview to selectively show content

0d21ffc

show correct amount for split IOUPreview

808d427

remove unused formatted 'send $amount' string

467959f

rename split amount string format

fd92e3c

display IOU type in IOUPreview component

10f1d6a

refactor and simplify iou format strings

5d778a6

replace temporary isGroupSplit condition

ef66bd7

refactor getAvatars to OptionListUtils helper function

dd89377

document OptionListUtils helper function and rename

8042ffb

Julesssss force-pushed the jules-iouPreview-showForBillSplit branch from 2eb522d to 8042ffb Compare May 3, 2023 10:05

Julesssss added 5 commits May 3, 2023 11:39

display split participant avatars in IOUPreview

87f468e

simplify IOUPreview participant avatar logic

2937138

remove 'x paid y' from IOUPreview

b3f0d25

display IOU description in IOUPreview

c741b6b

re-enable pending conversation message

74f6ca0

Julesssss changed the title ~~Update IOUPreview logic for groups and individual chats~~ Update IOUPreview and enable for IOU splits May 3, 2023

Julesssss changed the title ~~Update IOUPreview and enable for IOU splits~~ Enable IOUPreview for bill splits May 3, 2023

luacmartins approved these changes May 5, 2023

View reviewed changes

mountiny requested changes May 5, 2023

View reviewed changes

mountiny approved these changes May 5, 2023

View reviewed changes

aimane-chnaif approved these changes May 5, 2023

View reviewed changes

melvin-bot bot mentioned this pull request May 5, 2023

Payment issue for E/App PR#18143 #18504

Closed

luacmartins merged commit 689be6c into main May 5, 2023

luacmartins deleted the jules-iouPreview-showForBillSplit branch May 5, 2023 19:47

Prince-Mendiratta mentioned this pull request May 7, 2023

DEV: Requested or sent money message shows default profile picture #18550

Closed

6 tasks

aimane-chnaif mentioned this pull request May 7, 2023

fix avatars missing in IOU preview #18568

Merged

57 tasks

aimane-chnaif reviewed May 7, 2023

View reviewed changes

OSBotify mentioned this pull request May 9, 2023

Deploy Checklist: New Expensify 2023-05-09 #18627

Closed

26 tasks

kbecciv mentioned this pull request May 9, 2023

Split Bill - Incorrect Split participants list if Spit bill among part of the group #18646

Closed

6 tasks

marcaaron mentioned this pull request May 10, 2023

Request Money - Money request preview is displayed twice in chat if there are messages before payment #18696

Closed

6 tasks

wildan-m mentioned this pull request May 10, 2023

[$1000] Split bill - "Payment details not found" for a split with 1 person #18682

Closed

6 tasks

Pujan92 mentioned this pull request May 12, 2023

[$1000] Currency in Submit button in final confirmation page has lower case letter #18823

Closed

6 tasks

0xmiros reviewed Jun 2, 2023

View reviewed changes

eVoloshchak reviewed Jun 6, 2023

View reviewed changes

eVoloshchak mentioned this pull request Jun 6, 2023

[HOLD for payment 2023-06-02] [$1000] Split bill value reverts to NAN, and avatar is removed on removing members from workspace #18671

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable IOUPreview for bill splits #18143

Enable IOUPreview for bill splits #18143

Julesssss commented Apr 28, 2023 •

edited

Loading

aimane-chnaif commented May 5, 2023

mountiny left a comment •

edited

Loading

mountiny left a comment

luacmartins commented May 5, 2023

aimane-chnaif commented May 5, 2023

aimane-chnaif commented May 5, 2023

aimane-chnaif commented May 5, 2023

melvin-bot bot commented May 5, 2023

Julesssss commented May 5, 2023

OSBotify commented May 5, 2023

aimane-chnaif May 7, 2023

aimane-chnaif May 7, 2023

OSBotify commented May 9, 2023

OSBotify commented May 9, 2023

OSBotify commented May 9, 2023

0xmiros Jun 2, 2023

eVoloshchak Jun 6, 2023

	<Text>{lodashGet(props.action, 'originalMessage.comment', '')}</Text>
	<Text>{Str.htmlDecode(lodashGet(props.action, 'originalMessage.comment', ''))}</Text>

		chatReportID={props.chatReportID}
		isBillSplit={hasMultipleParticipants}

Enable IOUPreview for bill splits #18143

Enable IOUPreview for bill splits #18143

Conversation

Julesssss commented Apr 28, 2023 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

aimane-chnaif commented May 5, 2023

mountiny left a comment • edited Loading

Choose a reason for hiding this comment

mountiny left a comment

Choose a reason for hiding this comment

luacmartins commented May 5, 2023

aimane-chnaif commented May 5, 2023

aimane-chnaif commented May 5, 2023

aimane-chnaif commented May 5, 2023

Reviewer Checklist

Screenshots/Videos

melvin-bot bot commented May 5, 2023

Julesssss commented May 5, 2023

OSBotify commented May 5, 2023

aimane-chnaif May 7, 2023

Choose a reason for hiding this comment

aimane-chnaif May 7, 2023

Choose a reason for hiding this comment

OSBotify commented May 9, 2023

OSBotify commented May 9, 2023

OSBotify commented May 9, 2023

0xmiros Jun 2, 2023

Choose a reason for hiding this comment

eVoloshchak Jun 6, 2023

Choose a reason for hiding this comment

Julesssss commented Apr 28, 2023 •

edited

Loading

mountiny left a comment •

edited

Loading