[InternalQA] Split screen drop zone by koko57 · Pull Request #62650 · Expensify/App

koko57 · 2025-05-23T13:51:04Z

Implementation of
Stage 4: Introduce a split-screen Attach/Scan drag-and-drop control
-> Update the drag-and-drop control to have two zones: Attach and Scan
-> Ensure the Attach zone works exactly like it currently does
-> Ensure the Scan zone triggers a single-receipt scan, exactly as if the user had dragged a receipt into Global Create > Create Expense > Scan, with the following special behaviors depending on which room it's in:

Explanation of Change

Fixed Issues

$ #59442
PROPOSAL: -

Tests

PREREQUISITES: all betas / newDotMultiFilesDragAndDrop beta enabled

Go to an Expense Report / Expense Chat / DM / Policy Expense Chat
Drag an image or pdf over the report screen
Verify that 2 dropzones are displayed
Verify that a white border appears when dragging over and the opacity changes
When dropping the file verify that:
-> for the Attachment zone the Attachment Modal appears
-> for the Scan Receipt:
Ensure the Scan zone triggers a single-receipt scan, exactly as if the user had dragged a receipt into Global Create > Create Expense > Scan, with the following special behaviors depending on which room it's in:

Workspace chat - Use this workspace, even if not default (ie, like Attach > Create Expense > Scan)
Expense report - Attach the scanned expense to this workspace, overriding any auto-reporting logic that might otherwise exist (ie, like Attach > Create Expense > Scan)
Expense chat - Replace the current receipt (ie, like Replace > Scan by clicking on the receipt in question and acting upon the overflow menu)
DM - Trigger an IOU (ie, just like Attach > Create Expense > Scan)

Verify that the dropzones are stacked vertically for smaller screens and for reports details on Reports Page

Verify that no errors appear in the JS console

Offline tests

QA Steps

// TODO: These must be filled out, or the issue title must include "[No QA]."

PREREQUISITES: all betas / newDotMultiFilesDragAndDrop beta enabled

Go to an Expense Report / Expense Chat / DM / Policy Expense Chat
Drag an image or pdf over the report screen
Verify that 2 dropzones are displayed
Verify that a white border appears when dragging over and the opacity changes
When dropping the file verify that:
-> for the Attachment zone the Attachment Modal appears
-> for the Scan Receipt:
Ensure the Scan zone triggers a single-receipt scan, exactly as if the user had dragged a receipt into Global Create > Create Expense > Scan, with the following special behaviors depending on which room it's in:

Workspace chat - Use this workspace, even if not default (ie, like Attach > Create Expense > Scan)
Expense report - Attach the scanned expense to this workspace, overriding any auto-reporting logic that might otherwise exist (ie, like Attach > Create Expense > Scan)
Expense chat - Replace the current receipt (ie, like Replace > Scan by clicking on the receipt in question and acting upon the overflow menu)
DM - Trigger an IOU (ie, just like Attach > Create Expense > Scan)

Verify that the dropzones are stacked vertically for smaller screens and for reports details on Reports Page

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Screen.Recording.2025-05-29.at.12.14.18.mp4

MacOS: Desktop

melvin-bot · 2025-05-23T14:46:07Z

@getusha Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

shawnborton · 2025-05-23T15:18:25Z

That's feeling pretty good! I could see an argument to make the hover styles a bit more distinct, as it's a bit subtle right now? But no strong feelings. cc @Expensify/design for thoughts on that

If we did try something else, I could see trying to make each zone's BG use a lighter opacity to start, and then the hover state would make the opacity darker?

dannymcclain · 2025-05-23T15:44:35Z

If we did try something else, I could see trying to make each zone's BG use a lighter opacity to start, and then the hover state would make the opacity darker?

I like that idea! We could also add a bit of a transition to the dotted outline showing up instead of it just blasting in. If we wanted to go REAL crazy we could apply a very small scale (like 1.05) to the tex/illustration lock up on hover too. But I think the opacity is a great idea to start.

We could try the static state at .7 opacity and bump it up to .9 on hover?

dubielzyk-expensify · 2025-05-26T01:18:06Z

Yeah, I'd also love a bit more distinction on background so curious to see how the values Danny suggested would look. Otherwise it's looking pretty great

koko57 · 2025-05-26T09:27:42Z

ok, I will try to apply these changes

koko57 · 2025-05-26T10:35:03Z

@shawnborton @dannymcclain @dubielzyk-expensify as I'll be working on a second PR for the Stage 4 - can I make these changes in the second PR?

shawnborton · 2025-05-26T14:16:44Z

That works for me 👍

koko57 · 2025-05-27T12:49:05Z

@getusha can we proceed with review?

getusha · 2025-05-27T14:19:03Z

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

+                                                }
+                                            }}
+                                        >
+                                            <DropZoneUI


is this how it's supposed to look?

no, I will fix it, thanks

getusha · 2025-05-27T14:30:40Z

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

+        if (isTransactionThreadView && transactionID) {
+            replaceReceipt({transactionID, file: file as File, source});
+        } else {
+            initMoneyRequest(newReportID, undefined, true, undefined, CONST.IOU.REQUEST_TYPE.SCAN);


Suggested change

initMoneyRequest(newReportID, undefined, true, undefined, CONST.IOU.REQUEST_TYPE.SCAN);

initMoneyRequest({reportID: newReportID, isFromGlobalCreate: true, newIouRequestType: CONST.IOU.REQUEST_TYPE.SCAN});

yes, I did this change in my other PR #62486

getusha · 2025-05-27T14:39:56Z

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

+        const file = e?.dataTransfer?.files[0];
+        if (file) {
+            file.uri = URL.createObjectURL(file);
+            setReceiptAndNavigate(file);


We should be navigating to the confirmation page on drop, not participants page.

yeah, but it will be done in the next PR. It seems easy but in fact it wasn't to set a participant correctly and navigate to the confirmation page. I wrote that for now it works like on the SearchPage

getusha · 2025-05-27T14:49:41Z

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

-                                            onDrop={(event: DragEvent) => {
+                                    {!!canUseMultiFilesDragAndDrop && shouldDisplayDualDropZone && (
+                                        <DualDropZone
+                                            isEditing={isTransactionThreadView}


I wonder if we should show a new copy like "Add a receipt" or "Scan receipts" when there is no receipt attached to the expense.

Screen.Recording.2025-05-27.at.5.48.24.in.the.afternoon.mov

we don't need a new copy - we have scan request, but I haven't added the condition when no receipt is attached

getusha · 2025-05-27T14:56:34Z

Out of the scope but we should have a system message when we replace a receipt @lakchote

Screen.Recording.2025-05-27.at.5.42.18.in.the.afternoon.mov

koko57 · 2025-05-27T16:25:16Z

Out of the scope but we should have a system message when we replace a receipt @lakchote

Screen.Recording.2025-05-27.at.5.42.18.in.the.afternoon.mov

we don't have it in the current version, so I guess it would also require some BE changes

lakchote

LGTM. Thanks for your thorough review @getusha, and thanks for your hard work on this @koko57.

koko57 · 2025-06-09T11:28:51Z

@lakchote do this need another round of review before it's merged?

lakchote · 2025-06-09T14:39:50Z

@lakchote do this need another round of review before it's merged?

I was waiting for @Valforte to take a look but they seem to be busy, so let's proceed with the merge since I've already reviewed it too as an internal engineer.

OSBotify · 2025-06-09T14:49:40Z

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

github-actions · 2025-06-09T16:54:33Z

🚀 Deployed to staging by https://github.com/lakchote in version: 9.1.63-0 🚀

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

nlemma · 2025-06-09T20:08:21Z

@koko57 This PR is failing because of #63791

MonilBhavsar · 2025-06-10T06:13:44Z

This PR seems to have caused #63809
@koko57 @getusha @lakchote could anyone please take a look

robertjchen · 2025-06-10T08:10:50Z

Potentially related to #63807 as well? 🙏

github-actions · 2025-06-10T22:40:49Z

🚀 Deployed to production by https://github.com/Julesssss in version: 9.1.63-6 🚀

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

dukenv0307 · 2025-09-15T08:42:15Z

src/components/DropZone/DualDropZone.tsx

+    const shouldStackVertically = shouldUseNarrowLayout || isMediumScreenWidth;
+
+    return (
+        <DragAndDropConsumer>


Coming from #69452, we should add the no-op onDrop to clean-up onDrop when switching between single and dual drop zone

koko57 added 8 commits May 21, 2025 20:58

refactor: remove the consumer from DropZoneUI

1fc9a0d

feat: create dual dropzone, refactor the hook

dab3b74

refactor: create validation hook

6211f2d

feat: minor improvements

a53b0d1

feat: do not display dualDropzone in rooms

4d92e4f

fix: resolve conflicts

a0d039d

fix: display dual dropzone only for selected chats

5673adf

fix: lint

a4a3027

koko57 marked this pull request as ready for review May 23, 2025 14:46

koko57 requested review from a team as code owners May 23, 2025 14:46

melvin-bot bot requested a review from getusha May 23, 2025 14:46

melvin-bot bot removed the request for review from a team May 23, 2025 14:46

koko57 mentioned this pull request May 23, 2025

[Due for payment 2025-06-17] [Multi-Files Drag-and-Drop] (Stage 4) Introduce a split-screen Attach/Scan drag-and-drop control #59442

Closed

Merge branch 'main' into feat/59442-split-screen-dropzone

3049a2a

koko57 added 3 commits May 27, 2025 10:22

feat: create logic for replacing receipt

02a2e29

feat: create logic for replacing receipt

83e087c

fix: resolve conflicts

29c55c5

getusha reviewed May 27, 2025

View reviewed changes

koko57 mentioned this pull request May 27, 2025

Fix redirection after iou #62486

Merged

50 tasks

lakchote previously approved these changes Jun 5, 2025

View reviewed changes

koko57 added 4 commits June 6, 2025 14:19

Merge branch 'main' into feat/59442-split-screen-dropzone

26779bf

Merge branch 'main' into feat/59442-split-screen-dropzone

05a3a44

fix: move hook out from a wrong folder

bd85b94

Merge branch 'main' into feat/59442-split-screen-dropzone

b68d313

koko57 dismissed lakchote’s stale review via b68d313 June 8, 2025 17:39

Merge branch 'main' into feat/59442-split-screen-dropzone

18501ad

lakchote approved these changes Jun 9, 2025

View reviewed changes

lakchote removed the request for review from Valforte June 9, 2025 14:39

lakchote merged commit 5f4cfaf into Expensify:main Jun 9, 2025
17 checks passed

github-actions bot mentioned this pull request Jun 9, 2025

Deploy Checklist: New Expensify 2025-06-09 #63762

Closed

77 tasks

nlemma mentioned this pull request Jun 9, 2025

[Due for payment 2025-06-23] [Multi-Files Drag-and-Drop] Expense Report - Unable to drag and drop file on narrow screen from Reports Page #63791

Closed

8 tasks

BlameGPT mentioned this pull request Jun 10, 2025

[$250] Scan - "Missing merchant" error is still displayed after paying the expense #63872

Closed

8 tasks

This was referenced Jul 1, 2025

Do not show dualdropzone on approved requests #65264

Merged

Change event target to counter to avoid extra rerenders #65327

Merged

lakchote mentioned this pull request Jul 16, 2025

[Due for payment 2025-08-05] [Due for payment 2025-07-30] [Due for payment 2025-07-25] [Due for payment 2025-07-22] [Multi-Files Drag-and-Drop] Follow-ups and code cleanup #65722

Closed

10 tasks

vincdargento mentioned this pull request Jul 17, 2025

[Due for payment 2025-09-19] [$250] Scan - Image can be dropped on scan zone in room when there are 2 members which leads to error #66643

Closed

8 tasks

lakchote mentioned this pull request Jul 21, 2025

[Multi Files Drag and Drop] Add a system message for when a receipt is replaced #66796

Closed

koko57 deleted the feat/59442-split-screen-dropzone branch August 28, 2025 08:30

dukenv0307 reviewed Sep 15, 2025

View reviewed changes

	initMoneyRequest(newReportID, undefined, true, undefined, CONST.IOU.REQUEST_TYPE.SCAN);
	initMoneyRequest({reportID: newReportID, isFromGlobalCreate: true, newIouRequestType: CONST.IOU.REQUEST_TYPE.SCAN});

Conversation

koko57 commented May 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot bot commented May 23, 2025

Uh oh!

shawnborton commented May 23, 2025

Uh oh!

dannymcclain commented May 23, 2025

Uh oh!

dubielzyk-expensify commented May 26, 2025

Uh oh!

koko57 commented May 26, 2025

Uh oh!

koko57 commented May 26, 2025

Uh oh!

shawnborton commented May 26, 2025

Uh oh!

koko57 commented May 27, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

getusha commented May 27, 2025

Uh oh!

koko57 commented May 27, 2025

Uh oh!

lakchote left a comment

Choose a reason for hiding this comment

Uh oh!

koko57 commented Jun 9, 2025

Uh oh!

lakchote commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

OSBotify commented Jun 9, 2025

Uh oh!

github-actions bot commented Jun 9, 2025

Uh oh!

nlemma commented Jun 9, 2025

Uh oh!

MonilBhavsar commented Jun 10, 2025

Uh oh!

robertjchen commented Jun 10, 2025

Uh oh!

github-actions bot commented Jun 10, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

koko57 commented May 23, 2025 •

edited

Loading

lakchote commented Jun 9, 2025 •

edited

Loading