[HOLD for payment 2025-02-06] [$250] Feature request: Allow for dragging and dropping a receipt file onto the expense without having to first click into the graphic.

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.66-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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
Expensify/Expensify Issue URL:
Issue reported by: @mallenexpensify
Slack conversation (hyperlinked to channel name): ts_external_expensify_open_source

Action Performed:

1. Create a manual expense
2. On submit expense page attempt to drag and drop a receipt

Expected Result:

User able to drag and drop receipt

Actual Result:

User have to click it first then add the receipt and unable to drag and drop

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Recording.796.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021861562318502187449
• Upwork Job ID: 1861562318502187449
• Last Price Increase: 2024-11-27
• Automatic offers:
• abzokhattab | Contributor | 105129004

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @strepanier03 (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-11-25 22:12:40 UTC.

Proposal

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

Allow for dragging and dropping a receipt file onto the expense without having to first click into the graphic

What is the root cause of that problem?

New Feature

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

we should embed the empty receipt component in the MoneyRequestConfirmationListFooter with DragAndDropProvider and DragAndDropConsumer

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 644 to 651 in d5e8710

	<ReceiptEmptyState
	onPress={() =>
	Navigation.navigate(
	ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRouteWithoutParams()),
	)
	}
	/>
	))}

similar to how it's done in the ImportSpreadsheet

App/src/components/ImportSpreadsheet.tsx

Lines 165 to 185 in 8d3f1db

	{({safeAreaPaddingBottomStyle}) => (
	<DragAndDropProvider setIsDraggingOver={setIsDraggingOver}>
	<View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
	<HeaderWithBackButton
	title={translate('spreadsheet.importSpreadsheet')}
	onBackButtonPress={() => Navigation.navigate(backTo)}
	/>
	<View style={[styles.flex1, styles.uploadFileView(isSmallScreenWidth)]}>
	{!(isDraggingOver ?? isDraggingOver) && desktopView}
	<DragAndDropConsumer
	onDrop={(e) => {
	const file = e?.dataTransfer?.files[0];
	if (file) {
	readFile(file);
	}
	}}
	>
	<View style={[styles.fileDropOverlay, styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter]}>
	<View style={styles.fileUploadImageWrapper(fileTopPosition)}>

optionally we can move that inside the ReceiptEmptyState itself so that we can have the same behaviour in the money request view as well

• in acheive that we need to add a new prop onDrop that will be called on the drop inside the DragAndDropConsumer
• then when calling the ReceiptEmptyState we should call the same function that is used in the scan (setReceiptAndNavigate) however this function navigates to the confirmation page again as show here which is not needed so to avoid that we can split it into two functions one will return the receipt and the other will set and navigate and we should use set receipt in this case.
• also the same drag and drop stylings can be used from the scan ReceiptDropUI and the drag provider inside the StepScreenDragAndDropWrapper

What alternative solutions did you explore? (Optional)

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-11-25 22:31:37 UTC.

Proposal

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

User have to click it first then add the receipt and unable to drag and drop

What is the root cause of that problem?

Feature request

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

Replace ScreenWrapper with StepScreenDragAndDropWrapper and use ReceiptDropUI similar to IOURequestStepScan

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 765 in e08c53a

<StepScreenDragAndDropWrapper

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Lines 774 to 776 in e08c53a

	<View style={[styles.flex1, !Browser.isMobile() && styles.uploadFileView(isSmallScreenWidth)]}>
	{!(isDraggingOver ?? isDraggingOverWrapper) && (Browser.isMobile() ? mobileCameraView() : desktopUploadView())}
	<ReceiptDropUI

1. Add more props for StepScreenDragAndDropWrapper to configure HeaderWithBackButton (threeDotsMenuItems-related)
2. Extract validateReceipt here which returns the error message if any
3. Extract these parts of setReceiptAndNavigate here to util file.

The overall code change might be like this:

<StepScreenDragAndDropWrapper>
  {(isDraggingOverWrapper) => (
    <>
      {isLoading && <FullScreenLoadingIndicator />}
      {!!gpsRequired && <LocationPermissionModal />}
      {!isDraggingOverWrapper && <MoneyRequestConfirmationList />}
      <ReceiptDropUI />
      <ConfirmModal />
    </>
  )}
</StepScreenDragAndDropWrapper>

[shawnborton]

This seems pretty straightforward to me, perhaps we can just reuse the same styles we get when you go to upload a receipt from the Scan flow?

[mkzie2]

Opps. I linked the wrong issue.

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

reuse the same styles we get when you go to upload a receipt from the Scan flow?

yeah, this makes sense and should make things a bit easier.

[shawnborton]

Let's see if adding the External label again re-adds a new engineer since Marc is OOO.

[melvin-bot]

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

[Ollyws]

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[shawnborton]

Thanks @Ollyws

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[luacmartins]

The PR was reverted, @abzokhattab let's work on v2 and fix the issues below:

• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - Pointer has a + icon when drag and drop file on scan and distance confirmation page #55933
• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - App crashes when drag and drop a large PDF file to confirmation page #55934
• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - No "Let it go" screen when drag and drop receipt to replace receipt on confirm page #55935
• [HOLD for payment 2025-02-07] [Due for payment 2025-02-06] Expense - No error modal when drag and drop an invalid file to replace current file #55937
• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - Can drag & drop image to replace image receipt but not pdf to replace image receipt #55938
• [HOLD for payment 2025-02-07] [HOLD for payment 2025-02-06] Expense - Receipt modal is stretched out #55931

[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 9.0.91-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Enabling Receipt drag and drop inside the confirmation step #53849

If no regressions arise, payment will be issued on 2025-02-06. 🎊

For reference, here are some details about the assignees on this issue:

• @Ollyws requires payment through NewDot Manual Requests
• @abzokhattab requires payment automatic offer (Contributor)

[melvin-bot]

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

• [@Ollyws] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@mallenexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[mallenexpensify]

Contributor: @ paid $ via Upwork
Contributor+: @Ollyws due $250 via NewDot

@Ollyws can you propose regression test steps plz?