[HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [$500] Request money - Description briefly displayed in preview after adding a receipt from a manual request

[izarutskaya]

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. Open a chat.
2. Navigate to the "" option.
3. Enter the desired amount and click "Next"
4. Click on the three dots menu and select "Add receipt" and select a file
5. Enter a description and save it.
6. Now send the request.

Expected Result:

The description should either be removed from the preview or not displayed at all

Actual Result:

The description is briefly displayed in the preview when adding a receipt from a manual request

Workaround:

Unknown

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: v1.3.74-2

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-09-25-at-110935-pm_hGxh7ohP.mp4

20230927_202141.mp4

Screen.Recording.2023-09-26.at.12.09.28.AM.mov

Screen.Recording.2023-09-26.at.12.05.01.AM.mov

20230926000212.mp4

Expensify/Expensify Issue URL:

Issue reported by: @ayazhussain79

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695666475040319

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a6766bd5a43af155
• Upwork Job ID: 1707332794345508864
• Last Price Increase: 2023-10-13
• Automatic offers:
• situchan | Contributor | 27104418
• s-alves10 | Contributor | 27104428

Issue Owner

Current Issue Owner: @peterdbarkerUK

Issue Owner

Current Issue Owner: @peterdbarkerUK

[melvin-bot]

Triggered auto assignment to @peterdbarkerUK (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01a6766bd5a43af155

[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

[melvin-bot]

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

[ikevin127]

Proposal

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

The description is briefly displayed in the preview when adding a receipt from a manual request.

What is the root cause of that problem?

The problem comes from the ReportPreview.js component:

{!isScanning && (numberOfRequests > 1 || hasReceipts) && (
    <View style={styles.flexRow}>
        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
            <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>
                {previewSubtitle || moneyRequestComment} // <- HERE
            </Text>
        </View>
    </View>
)}

This code block is supposed to render the previewSubtitle label which can be the merchant if only one receipt requests exists or the number of requests count if more than one receipt requests exist.

The problem is the OR operator between these two variables previewSubtitle || moneyRequestComment, initially previewSubtitle is empty while the above-mentioned calculation is determined hence why the description shows up because moneyRequestComment is being shown while previewSubtitle is being determined.

This changes as soon as previewSubtitle is not empty anymore and is replaced by either the merchant if only one receipt requests exists or the number of requests count if more than one receipt requests exist.

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

I would create another component below the existing one where we will always render the request description like so:

{!isScanning && (numberOfRequests > 1 || hasReceipts) && (
    <View style={styles.flexRow}>
        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
            <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>
                {previewSubtitle}
            </Text>
        </View>
    </View>
)}
+{moneyRequestComment && (
+   <View style={styles.flexRow}>
+       <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+           <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>
+               {moneyRequestComment}
+           </Text>
+       </View>
+   </View>
)}

What alternative solutions did you explore? (Optional)

N/A

Videos

web.mp4

[dummy-1111]

Proposal

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

When adding a receipt from a manual request, description is displayed for a brief moment

What is the root cause of that problem?

App/src/components/ReportActionItem/ReportPreview.js

Lines 216 to 222 in bfda42d

	{!isScanning && (numberOfRequests > 1 || hasReceipts) && (
	<View style={styles.flexRow}>
	<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
	<Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{previewSubtitle || moneyRequestComment}</Text>
	</View>
	</View>
	)}

As you can see above, we show previewSubtitle or moneyRequestComment(description).

Looking at the previewSubtitle, we show merchant info if the IOU report has only one request and it has receipt, or we show the number of money requests.

App/src/components/ReportActionItem/ReportPreview.js

Lines 126 to 131 in bfda42d

	const previewSubtitle = hasOnlyOneReceiptRequest
	? TransactionUtils.getMerchant(transactionsWithReceipts[0])
	: props.translate('iou.requestCount', {
	count: numberOfRequests,
	scanningReceipts: numberOfScanningReceipts,
	});

The problem is in the value of merchant. When we add a receipt, we set merchant to empty

App/src/pages/iou/ReceiptSelector/index.js

Line 120 in bfda42d

IOU.setMoneyRequestReceipt(filePath, file.name);

And when we create optimistic transaction, we also set merchant to empty

App/src/libs/TransactionUtils.js

Line 70 in bfda42d

const defaultMerchant = _.isEmpty(receipt) ? CONST.TRANSACTION.DEFAULT_MERCHANT : '';

But when the API returns, it has merchant value: Request.

This inconsistency causes the description displayed for a brief moment

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

We need to make consistent the optimistic data and API returns.

Solution 1
We can set default merchant when building optimistic transaction here because we need to make the optimistic data consistent with API returns

App/src/libs/TransactionUtils.js

Line 70 in bfda42d

const defaultMerchant = _.isEmpty(receipt) ? CONST.TRANSACTION.DEFAULT_MERCHANT : '';

    const defaultMerchant = CONST.TRANSACTION.DEFAULT_MERCHANT;

Solution 2
The backend should return empty merchant when receipt request with empty merchant is sent

Result

28380.mp4

What alternative solutions did you explore? (Optional)

[melvin-bot]

@ntdiary, @peterdbarkerUK Eep! 4 days overdue now. Issues have feelings too...