[HOLD for payment 2023-06-19] [$1000] Split Bill preview not showing correct description/currency

[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. Create a Split Bill request using currency A and no description
2. Start a new money request flow (send/request/split)
3. Choose currency B and set description to any text
4. Don't complete it and close the page
5. Press the Split Bill preview to see the detail

Expected Result:

The currency and description should show the currency and description used when creating the request

Actual Result:

The currency and description dynamically changes every time we set a new value from money request flow

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.20-3
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

Screen.Recording.2023-05-29.at.22.03.49.mov

Recording.818.mp4

Expensify/Expensify Issue URL:
Issue reported by: @bernhardoj
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1685369261418519

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012fa29a23a09e4f51
• Upwork Job ID: 1663824064534704128
• Last Price Increase: 2023-05-31

[melvin-bot]

Triggered auto assignment to @flaviadefaria (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 description in the split bill details page gets reset to the latest value saved in Onyx. Note that the same issue also occurs for the currency code.

What is the root cause of that problem?

The reason for this is because we are not getting these details from the report but rather from Onyx as shown in the code below.

App/src/components/MoneyRequestConfirmationList.js

Line 318 in 2157057

const formattedAmount = CurrencyUtils.convertToDisplayString(this.props.iouAmount, this.props.iou.selectedCurrencyCode);

App/src/components/MoneyRequestConfirmationList.js

Line 348 in 2157057

title={this.props.iou.comment}

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

To fix this these values have to passed down as props (undefined by default) from the SplitBillDetailsPage. If they are undefined, values from Onyx will be used.

...
const splitAmount = parseInt(lodashGet(reportAction, 'originalMessage.amount', 0), 10);
const splitCurrencyCode = lodashGet(reportAction, 'originalMessage.currency');
const splitComment = lodashGet(reportAction, 'originalMessage.comment');

<MoneyRequestConfirmationList
    ...
    iouAmount={splitAmount}
    iouCurrencyCode={splitCurrencyCode}
    iouComment={splitComment}
    iouType={CONST.IOU.MONEY_REQUEST_TYPE.SPLIT}
    isReadOnly
    shouldShowFooter={false}
/>

What alternative solutions did you explore? (Optional)

None.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~012fa29a23a09e4f51

[melvin-bot]

Current assignee @flaviadefaria is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

[melvin-bot]

Current assignee @Julesssss is eligible for the External assigner, not assigning anyone new.

[BhuvaneshPatil]

original proposal here - #19855 (comment)

Proposal

Please re-state the problem that we are trying to solve in this issue.

in Split bill detail page, the description shown is not matching with original

What is the root cause of that problem?

For MoneyRequestConfirmationList we are taking IOU from Onyx, that is global IOU.

App/src/components/MoneyRequestConfirmationList.js

Lines 361 to 372 in 0d1995a

	export default compose(
	withLocalize,
	withWindowDimensions,
	withCurrentUserPersonalDetails,
	withOnyx({
	iou: {key: ONYXKEYS.IOU},
	session: {
	key: ONYXKEYS.SESSION,
	},
	}),
	)(MoneyRequestConfirmationList);

example - When I try to create new Split Bill, the IOU will be using its description for the value. It's being set at below -

App/src/pages/iou/MoneyRequestDescriptionPage.js

Lines 53 to 56 in 0d1995a

	updateComment(value) {
	IOU.setMoneyRequestDescription(value.moneyRequestComment);
	Navigation.goBack();
	}

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

Like we are passing the iouAmount to MoneyRquestConfirmationList component, we can pass the new prop iouComment from SplitBillDetailsPage, this will cause a regression as mentioned in #19870 (comment), to avoid that, we can conditionally select the comment from props and onyx.

title={this.props.iouComment || this.props.iou.comment}

Similarly we can add another prop for currency as well.
The values for them can be grabbed from reportAction in SplitBillDetailsPage component.

Working Solution

Split.Bill.Description.Issue.-.Made.with.Clipchamp.mp4

What alternative solutions did you explore? (Optional)

• Updating IOU in ONYX using setMoneyRequestDescription() can be a alternative, however this change should be made carefully, because that value(IOU) is being used at many places. When we open the modal we can use setMoneyRequestDescription() to set the value of description and upon closing we can reset it to empty string.

• We can pass the reportAction as a prop as well, if there are multiple things we need to add from reportAction to MoneyRequestConfirmationLinks

[esh-g]

Proposal

Please re-state the problem that we are trying to solve in this issue

'Description' field displays blank content for split bill participants

What is the root cause of that problem?

The root cause is that we are using MoneyRequestConformationList component while creating the split bill as well as displaying details of the IOU reportAction. While creating bill, the this.props.iou.comment is defined and is passed to the description text but while viewing details, this.props.iou.comment is undefined because the viewing details come from the reportAction and not from ONYXKEYS.IOU which was the case while creating the bill.

App/src/components/MoneyRequestConfirmationList.js

Lines 346 to 353 in d661708

	<MenuItemWithTopDescription
	shouldShowRightIcon={!this.props.isReadOnly}
	title={this.props.iou.comment}
	description={this.props.translate('common.description')}
	onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION)}
	style={[styles.moneyRequestMenuItem, styles.mb2]}
	disabled={this.state.didConfirm || this.props.isReadOnly}
	/>

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

App/src/pages/iou/SplitBillDetailsPage.js

Lines 85 to 93 in d661708

	<MoneyRequestConfirmationList
	hasMultipleParticipants
	payeePersonalDetails={payeePersonalDetails}
	participants={participantsExcludingPayee}
	iouAmount={splitAmount}
	iouType={CONST.IOU.MONEY_REQUEST_TYPE.SPLIT}
	isReadOnly
	shouldShowFooter={false}
	/>

While rendering the MoneyRequestConformationList in SplitBillDetailsPage, we are passing the amount as a prop but not the comment. So, we need to pass a prop called iouComment which should be equal to lodashGet(reportAction, 'originalMessage.comment', '') Just like we do for amount on line 71.
Then in MoneyRequestConformationList we need to check if this.props.iouComment exists, then display that, otherwise display this.props.iou.comment like this: (in line 348, MoneyRequestConformationList.js)

title={this.props.iouComment || this.props.iou.comment}

After Applying:

Screen.Recording.2023-06-01.at.11.39.05.PM-1.mov

[esh-g]

Proposals of @therealsujitk and @BhuvaneshPatil will cause a regression because we are using MoneyRequestConformationList while displaying details as well as while creating a bill, and for that we cannot completely replace this.props.iou.comment like suggested in their proposals.

Screen.Recording.2023-06-02.at.1.18.39.AM.mov

[Julesssss]

Bumping for review @eVoloshchak

[eVoloshchak]

All of the proposals are quite similar, I think we should proceed with the first proposal that correctly identified the root cause.
Since #19870 is a dupe of this issue, I did review proposals in both.
@BhuvaneshPatil's proposal was posted first (here), It looks good to me

🎀👀🎀 C+ reviewed!
cc: @Julesssss

[melvin-bot]

📣 @BhuvaneshPatil You have been assigned to this job by @Julesssss!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[BhuvaneshPatil]

Hello, I have applied. PR will be ready by EOD. Thank you

[BhuvaneshPatil]

Hello, the PR is merged. What is next process?

[Julesssss]

We're still waiting for it to be deployed to production. We often don't deploy on Fridays, but you should see an automated comment on this issue either today or Monday.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.26-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• 19870 - Split bill description and currency is shown wrong #20115

If no regressions arise, payment will be issued on 2023-06-19. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@eVoloshchak] The PR that introduced the bug has been identified. Link to the PR:
• [@eVoloshchak] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@eVoloshchak] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@eVoloshchak] Determine if we should create a regression test for this bug.
• [@eVoloshchak] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@flaviadefaria] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/294930

[BhuvaneshPatil]

@eVoloshchak @Julesssss @flaviadefaria
friendly bump for further process.

[Julesssss]

This one is ready to pay once the checklists above are filled by @flaviadefaria and @eVoloshchak 👍

[flaviadefaria]

Waiting for @eVoloshchak to complete the checklist so that I can issue the following payments:
@bernhardoj $250
@BhuvaneshPatil $1000 (no bonus)
@eVoloshchak $1000 (no bonus)

[BhuvaneshPatil]

Hello @flaviadefaria , can you please share the timing of assignment and when the PR got merged, because there was a weekend in between.

[Julesssss]

I think our CI script failed to generate it for this PR. Removing the Saturday and Sunday I think is eligible:

Assigned

Merged

[flaviadefaria]

Cool, thanks for checking. So updated payments will be:
@bernhardoj $250
@BhuvaneshPatil $1000 + $500 bonus
@eVoloshchak $1000 + $500 bonus

I'll issue them as soon as @eVoloshchak completes the checklist above.

[eVoloshchak]

• The PR that introduced the bug has been identified. Link to the PR: N/A, that's how it was implemented initially in Create currency modal with react-native-permissions and geolocation #2194

• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: N/A

• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: Don't think there's anything we could add to our processes/docs, this was simply missed during the initial implementation

• Determine if we should create a regression test for this bug.
  Is it easy to test for this bug? Yes
  Is the bug related to an important user flow? Yes
  Is it an impactful bug? Yes

[eVoloshchak]

Regression Test Proposal

1. Press FAB -> Create a Split Bill request using currency A and no description
2. Start a new money request flow (send/request/split)
3. Choose another currency and enter a description
4. Don't complete it and close the page
5. Press the Split Bill preview to see the details of the first split bill
6. Verify currency and description arr correct for the first split bill

Do we agree 👍 or 👎

[BhuvaneshPatil]

@eVoloshchak
I have tested it, shows the correct currency and description. Sharing video soon

sample.regression.test.-.Made.with.Clipchamp.1.mp4

[Julesssss]

Hey @flaviadefaria, based on your last question, I think we are good to pay out now?

[flaviadefaria]

Yep, now we are. I'll handle the payment today.

[Julesssss]

Thanks

[flaviadefaria]

Offer sent!

[flaviadefaria]

All done so closing this GH.