[$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: @

[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.

[melvin-bot]

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

[mallenexpensify]

Automation got a lil funky here. @Ollyws can you review the above proposals plz? Thx

[Ollyws]

I don't think we want to use StepScreenDragAndDropWrapper here as it includes screenwrapper, @abzokhattab's proposal LGTM.
🎀👀🎀 C+ reviewed

[melvin-bot]

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

[mkzie2]

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?

@Ollyws As mentioned in #53089 (comment), we want it to be the same as the DnD UI in Scan page (and all the DnD flows in our app) so it should include the screen wrapper, not just the add receipt placeholder.

[melvin-bot]

📣 @abzokhattab 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

[shawnborton]

Not overdue, looks like we picked a proposal and we're waiting for a PR

[abzokhattab]

PR is in progress .. just updating the state

[melvin-bot]

@shawnborton, @Ollyws, @mallenexpensify, @marcaaron, @abzokhattab Huh... This is 4 days overdue. Who can take care of this?

[shawnborton]

Let us know when the PR is ready for review.

[abzokhattab]

Apologies for the late cover .. i had a bug where the receipt drop component was not working so it took sometime to fix it.

The PR is ready here please let me know if you have any comments