[$250] Distance - Replace receipt zone is present when dragging an image over distance expense RHP

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.1.77-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #65327
Email or phone of affected tester (no customers): applausetester+0700798kh@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.5 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Log in with Expensifail account.

1. Go to staging.expensify.com
2. Go to workspace chat.
3. Create two distance expenses to the workspace chat.
4. Open transaction thread of any distance expense.
5. Drag and drop an image to Replace receipt zone on the expense thread RHP.

Expected Result:

Replace receipt zone should not appear when dragging an image over distance expense RHP.

Actual Result:

Replace receipt zone is present when dragging an image over distance expense RHP.
App shows error after dropping the image on Replace receipt zone on distance RHP.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6881261_1751965962351.20250708_170638.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021942739303022790580
• Upwork Job ID: 1942739303022790580
• Last Price Increase: 2025-07-09
• Automatic offers:
• truph01 | Contributor | 108009771

Issue Owner

Current Issue Owner: @alexpensify

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Burhan-Rashid]

Proposal

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

Distance - Replace receipt zone is present when dragging an image over distance expense RHP

What is the root cause of that problem?

We are using DualDropZone in ReportActionsCompose and we show it when shouldDisplayDualDropZone is true. But while calculating the shouldDisplayDualDropZone we are not considering the distance transaction which makes shouldDisplayDualDropZone as true for distance expenses as well.

App/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

Lines 223 to 235 in e8ee21b

	const shouldDisplayDualDropZone = useMemo(
	() =>
	!isChatRoom(report) &&
	!isUserCreatedPolicyRoom(report) &&
	!isAnnounceRoom(report) &&
	!isAdminRoom(report) &&
	!isConciergeChatReport(report) &&
	!isInvoiceReport(report) &&
	!isGroupChat(report) &&
	!isSettled(parentReport) &&
	!isSettled(report),
	[report, parentReport],
	);

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

We need to check if it is a distance expense and if it is a distance expense we don't need to show the dualDropZone, For that we need to make the change here

    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {canBeMissing: true});
const shouldDisplayDualDropZone = useMemo(
        () =>
            !isChatRoom(report) &&
            !isUserCreatedPolicyRoom(report) &&
            !isAnnounceRoom(report) &&
            !isAdminRoom(report) &&
            !isConciergeChatReport(report) &&
            !isInvoiceReport(report) &&
            !isGroupChat(report) &&
            !isSettled(parentReport) &&
            !isSettled(report) &&
            !isDistanceRequest(transaction),
        [report, parentReport, transaction],
    );

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[truph01]

Proposal

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

Distance - Replace receipt zone is present when dragging an image over distance expense RHP

What is the root cause of that problem?

The issue arises because we display the "Replace receipt" drop zone unconditionally, without verifying whether the user has permission to edit the receipt. This check is already in place on the Transaction Receipt page but is missing here.

• Logic displaying "Replace receipt" (without permission check):
  

  App/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

  Line 639 in e8ee21b

  {isBetaEnabled(CONST.BETAS.NEWDOT_MULTI_FILES_DRAG_AND_DROP) && shouldDisplayDualDropZone && (

App/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

Lines 223 to 235 in e8ee21b

	const shouldDisplayDualDropZone = useMemo(
	() =>
	!isChatRoom(report) &&
	!isUserCreatedPolicyRoom(report) &&
	!isAnnounceRoom(report) &&
	!isAdminRoom(report) &&
	!isConciergeChatReport(report) &&
	!isInvoiceReport(report) &&
	!isGroupChat(report) &&
	!isSettled(parentReport) &&
	!isSettled(report),
	[report, parentReport],
	);

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

We should apply the same permission logic in ReportActionCompose.tsx to determine whether the user can edit receipts.

1. Create a new canEditReceipt variable:

const parentReportAction = getReportAction(report?.parentReportID, report?.parentReportActionID);
const canUserPerformWriteAction = !!canUserPerformWriteActionReportUtils(report);
const canEditReceipt =
    canUserPerformWriteAction &&
    canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.RECEIPT) &&
    !transaction?.receipt?.isTestDriveReceipt;

2. Pass canEditReceipt as a prop to the DualDropZone component.

3.a. Use canEditReceipt to conditionally render the "Replace receipt" drop zone in DualDropZone.tsx:

App/src/components/DropZone/DualDropZone.tsx

Line 44 in e8ee21b

<DropZoneWrapper onDrop={onReceiptDrop}>

                {isEditing ? (
                    canEditReceipt && (
                        <DropZoneWrapper onDrop={onReceiptDrop}>
                            {({isDraggingOver}) => (
                                <DropZoneUI
                                    icon={Expensicons.ReplaceReceipt}
                                    dropTitle={translate(isEditing ? 'dropzone.replaceReceipt' : 'dropzone.scanReceipts')}
                                    dropStyles={styles.receiptDropOverlay(isDraggingOver)}
                                    dropTextStyles={styles.receiptDropText}
                                    dropInnerWrapperStyles={styles.receiptDropInnerWrapper(isDraggingOver)}
                                />
                            )}
                        </DropZoneWrapper>
                    )
                ) : (
                    <DropZoneWrapper onDrop={onReceiptDrop}>
                        {({isDraggingOver}) => (
                            <DropZoneUI
                                icon={Expensicons.SmartScan}
                                dropTitle={translate(isEditing ? 'dropzone.replaceReceipt' : 'dropzone.scanReceipts')}
                                dropStyles={styles.receiptDropOverlay(isDraggingOver)}
                                dropTextStyles={styles.receiptDropText}
                                dropInnerWrapperStyles={styles.receiptDropInnerWrapper(isDraggingOver)}
                            />
                        )}
                    </DropZoneWrapper>
                )}

3.b. If isEditing: true and canEditReceipt: true, display the "Replace receipt". Otherwise, display the "Scan receipt".

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• None

What alternative solutions did you explore? (Optional)

• We can update shouldDisplayDualDropZone so that it will be:

shouldDisplayDualDropZone = ... && canEditReceipt

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@akinwale, when you get a chance, please review if one of these proposals will fix the issue? Thanks!

[akinwale]

It should remain possible to update receipts for distance expenses, so @truph01's proposal works here.

🎀👀🎀 C+ reviewed.

[melvin-bot]

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