[HOLD for payment 2024-05-22] [$250] Submit expense - Floating 'Lets go' Above Upload Recipient Statement When Dragging and Dropping Files

[kbecciv]

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: v1.4.65-2
Reproducible in staging?: y
Reproducible in production?: y
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to FAB > Submit Expense > Choose Manual.
2. Add amount > Choose user > Click three dots in the right corner.
3. Drag and drop the file onto the recipient. Notice that the "Lets go" text floats above the upload recipient statement.

Expected Result:

When dragging and dropping files onto the recipient area, the "Let's Go" prompt should not float above the upload recipient statement. Instead, the upload recipient statement should be replaced by "Let's Go," similar to the behavior in the scan section.

Actual Result:

The "Lets go" text floats above the upload recipient statement when dragging and dropping the file onto the recipient. this causes inconsistency with Scan section.

Workaround:

n/a

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6460213_1713961786371.Screen_Recording_2024-04-24_at_5.16.47_AM.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01316df55587475e87
• Upwork Job ID: 1786433047739318272
• Last Price Increase: 2024-05-03
• Automatic offers:
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @miljakljajic

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

[kbecciv]

We think that this bug might be related to #vip-split

[kbecciv]

@alexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[bernhardoj]

Proposal

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

The intruction text is still visible when dragging over a file on a manual add receipt page.

What is the root cause of that problem?

We get the dragging state from the drag and drop context,

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

Line 65 in 9cceec8

const {isDraggingOver} = useContext(DragAndDropContext);

and hide the instruction text if we are dragging over a file.

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

Line 592 in 9cceec8

{!isDraggingOver && (Browser.isMobile() ? mobileCameraView() : desktopUploadView())}

This works for scan page in the first/start page because we wrap it with DragAndDropProvider.

App/src/pages/iou/request/IOURequestStartPage.tsx

Lines 132 to 148 in 9cceec8

	<DragAndDropProvider
	setIsDraggingOver={setIsDraggingOver}
	isDisabled={selectedTab !== CONST.TAB_REQUEST.SCAN}
	>
	<View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
	<HeaderWithBackButton
	title={tabTitles[iouType]}
	onBackButtonPress={navigateBack}
	/>
	{iouType !== CONST.IOU.TYPE.SEND && iouType !== CONST.IOU.TYPE.PAY ? (
	<OnyxTabNavigator
	id={CONST.TAB.IOU_REQUEST_TYPE}
	onTabSelected={resetIOUTypeIfChanged}
	tabBar={TabSelector}
	>
	<TopTab.Screen name={CONST.TAB_REQUEST.MANUAL}>{() => <IOURequestStepAmount route={route} />}</TopTab.Screen>
	<TopTab.Screen name={CONST.TAB_REQUEST.SCAN}>{() => <IOURequestStepScan route={route} />}</TopTab.Screen>

However, if we open the scan page from the Add receipt menu, the IOURequestStepScan isn't wrapped with a drag and drop provider, so getting the context will result in undefined value.

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

We can expose the dragging state from StepScreenDragAndDropWrapper and use it as the fallback if isDraggingOver is undefined.

{typeof children === 'function'
    ? children(isDraggingOver)
    : children}

<StepScreenDragAndDropWrapper
    headerTitle={translate('common.receipt')}
    onBackButtonPress={navigateBack}
    shouldShowWrapper={Boolean(backTo)}
    testID={IOURequestStepScan.displayName}
>
    {(isDraggingOver2) => (

or we can fully use isDraggingOver from StepScreenDragAndDropWrapper but we need to wrap this with DragAndDropProvider too.

App/src/pages/iou/request/step/StepScreenDragAndDropWrapper.tsx

Lines 32 to 34 in b0ec7b1

	if (!shouldShowWrapper) {
	return children;
	}

What alternative solutions did you explore? (Optional)

Create a wrapper component that will wrap IOURequestStepScan with the drag and drop provider.

[alexpensify]

This one is on my testing list, I should have an update soon.

[alexpensify]

No update yet, I've been focused on other GHs.

[alexpensify]

Closing - I'm unable to replicate the experience. The process loads correctly.

[bernhardoj]

@alexpensify you need to access the scan page from the manual confirmation page here (Add receipt)

The issue doesn't happen on the scan start page, but happens if you access it from the confirmation page

[alexpensify]

Heads up, I will be offline until Tuesday, May 7, 2024, and will not actively watch over this GitHub during that period.

If anything urgent is needed here, please ask for help in the #expensify-open-source Slack Room-- thanks!

---

I will test this one more when I get back online.

[alexpensify]

Thanks for clarifying this step:

Navigate to FAB > Submit Expense > Choose Manual.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @miljakljajic (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.

[alexpensify]

Heads up, I will be offline until Tuesday, May 28, 2024, and will not actively watch over this GitHub during that period.

@miljakljajic - While I'm offline, I need help here completing the payment process after this one clears the 7-day period on 2024-05-22. Thanks!

[miljakljajic]

@bernhardoj has been hired on the upwork job. @mollfpr do we pay you via manual request, or in upwork?

[mollfpr]

@miljakljajic I'll do a manual request, could you help with the payment summary? I'll finish the checklist ASAP. Thank you!

[miljakljajic]

Of course.

@mollfpr is owed 250 USD for their work reviewing this PR.

[mollfpr]

[@mollfpr] The PR that introduced the bug has been identified. Link to the PR:
[@mollfpr] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

No offending PR was found.

[@mollfpr] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

The regression step should be enough.

[@mollfpr] Determine if we should create a regression test for this bug.
[@mollfpr] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

1. Open FAB > Submit expense
2. Enter any amount and select any participant
3. Press 3-dot on the confirmation page and select Add receipt
4. Drag a file over the page
5. Verify the instruction text (drag a receipt onto this page...) and that the icon is hidden
6. 👍 or 👎

Only the web/desktop can drag a file
For mWeb/Android/iOS, verify you can still add a receipt

[alexpensify]

I'm back online and taking over as the BZ member here.

Tomorrow, I'll create the regression test GH based on today's update.

[alexpensify]

Closing - The QA request has been created for this one. Thanks!

[JmillsExpensify]

$250 approved for @mollfpr

[JmillsExpensify]

@miljakljajic this payment will end up going through New Expensify. I've closed out the Upwork job since payment wasn't issued. Do you mind adding a payment summary for @bernhardoj?

[miljakljajic]

Of course!

@bernhardoj is owed 250 USD for their work reviewing this issue.

[JmillsExpensify]

$250 approved for @bernhardoj