Expense - Unable to drag and drop receipt to Upload receipt RHP #49901

lanitochka17 · 2024-09-29T18:49:55Z

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.0.41-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

Go to staging.new.expensify.com
Go to DM
Submit an expense without receipt
Go to transaction thread
Click on Add receipt modal
Drag and drop an image to the RHP

Expected Result:

Image can be dragged and dropped to Upload receipt RHP

Actual Result:

Image cannot be dragged and dropped to Upload receipt RHP

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6618334_1727525236867.20240928_200433.mp4

View all open jobs on GitHub

github-actions · 2024-09-29T18:50:09Z

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

melvin-bot · 2024-09-29T18:50:10Z

Triggered auto assignment to @carlosmiceli (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

lanitochka17 · 2024-09-29T18:50:29Z

We think that this bug might be related to #wave-control

ishpaul777 · 2024-09-29T20:00:59Z

offending PR #47990

ishpaul777 · 2024-09-29T20:14:37Z

Edited by proposal-police: This proposal was edited at 2024-09-29 20:15:28 UTC.

Edits: Fix code links, added video

Proposal

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

Unable to drag and drop receipt to Upload receipt RHP

What is the root cause of that problem?

here we are explictly disable the drag and drop functionality when backTo route is not available.

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

Line 698 in 3047c1b

shouldShowWrapper={!!backTo}

in this PR #47990, we replaced getActiveRouteWithoutParams with getReportRHPActiveRoute which return empty string when report is not in RHP.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 538 in 3047c1b

Navigation.getReportRHPActiveRoute(),

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

Here, If getReportRHPActiveRoute return empty string then we should get the active route from getActiveRouteWithoutParams.

                      Navigation.navigate(
                                ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
                                   // rest of params
                                    Navigation.getReportRHPActiveRoute() || Navigation.getActiveRouteWithoutParams(),
                                ),
                            )

Screen.Recording.2024-09-30.at.1.47.38.AM.mov

Nodebrute · 2024-09-29T20:23:48Z

Edited by proposal-police: This proposal was edited at 2024-09-29 20:25:27 UTC.

Proposal

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

Unable to drag and drop receipt to Upload receipt RHP

What is the root cause of that problem?

We recently started using Navigation.getReportRHPActiveRoute() everywhere, but this issue only happens on Scan page

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

Line 698 in 3047c1b

shouldShowWrapper={!!backTo}

It's because shouldShowWrapper will be false and the top part will be cut off

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

Line 698 in 3047c1b

shouldShowWrapper={!!backTo}

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

We can create a new variable const isEditing = action === CONST.IOU.ACTION.EDIT and we can pass it here

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

Line 698 in 3047c1b

shouldShowWrapper={!!backTo}

            shouldShowWrapper={isEditing}

Optional: We can also fix this in IOURequestStepScan/index.native.tsx file
We should check for other pages too where we have this issue and fix it

What alternative solutions did you explore? (Optional)

Or we can do something like this here

         shouldShowWrapper={!!backTo || isEditing}

Alternative 2
Pass shouldShowWrapper here

 shouldShowWrapper

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

Line 698 in 3047c1b

shouldShowWrapper={!!backTo}

huult · 2024-09-30T02:39:48Z

Proposal

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

Android- expense - In camera screen receipt header is missing

What is the root cause of that problem?

The backTo is undefined, which prevents the wrapper from showing and causes this issue.

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

Line 698 in 3634670

shouldShowWrapper={!!backTo}

backTo is undefined because Navigation.getReportRHPActiveRoute() returns undefined when clicked from the money request view.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 538 in 3047c1b

Navigation.getReportRHPActiveRoute(),

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

We should check if getReportRHPActiveRoute returns undefined, and if so, use getActiveRouteWithoutParams.

// src/components/ReportActionItem/MoneyRequestView.tsx#L538
{shouldShowReceiptEmptyState && (
                    <ReceiptEmptyState
                        hasError={hasErrors}
                        disabled={!canEditReceipt}
                        onPress={() =>
                            Navigation.navigate(
                                ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
                                    CONST.IOU.ACTION.EDIT,
                                    iouType,
                                    transaction?.transactionID ?? '-1',
                                    report?.reportID ?? '-1',
-                                    Navigation.getReportRHPActiveRoute(),
+                                    Navigation.getReportRHPActiveRoute() || Navigation.getActiveRouteWithoutParams(),
                                ),
                            )
                        }
                    />
                )}

What alternative solutions did you explore? (Optional)

We used getActiveRouteWithoutParams instead of getReportRHPActiveRoute.

// src/components/ReportActionItem/MoneyRequestView.tsx#L538
{shouldShowReceiptEmptyState && (
                    <ReceiptEmptyState
                        hasError={hasErrors}
                        disabled={!canEditReceipt}
                        onPress={() =>
                            Navigation.navigate(
                                ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
                                    CONST.IOU.ACTION.EDIT,
                                    iouType,
                                    transaction?.transactionID ?? '-1',
                                    report?.reportID ?? '-1',
-                                    Navigation.getReportRHPActiveRoute(),
+                                    Navigation.getActiveRouteWithoutParams(),
                                ),
                            )
                        }
                    />
                )}

Note: Same as my proposal posted previously.

POC

Gonals · 2024-09-30T10:49:46Z

Not a Web-E blocker

carlosmiceli · 2024-09-30T13:37:35Z

I think @bernhardoj already fixed this here? Should I assign you to this one? I don't think this should be weekly btw, I'll change it to Hourly until we confirm this is solved today since it's a rough bug.

melvin-bot · 2024-09-30T14:31:28Z

⚠️ 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.

bernhardoj · 2024-09-30T14:36:22Z

@carlosmiceli yes, I'm fixing it in #49916. Not sure if I need to get assigned here though.

rayane-djouah · 2024-09-30T14:55:49Z

The linked PR fixes this blocker and is ready for merging and cherry-picking to staging

carlosmiceli · 2024-09-30T15:01:38Z

Since @luacmartins is reviewing that PR I'll let him decide, should @bernhardoj be assigned to this issue too?

luacmartins · 2024-09-30T18:36:29Z

Confirmed fix on staging.

luacmartins · 2024-09-30T18:36:41Z

This was a regression so I'm gonna close the issue.

lanitochka17 added DeployBlockerCash This issue or pull request should block deployment DeployBlocker Indicates it should block deploying the API labels Sep 29, 2024

github-actions bot added Engineering Hourly KSv2 labels Sep 29, 2024

melvin-bot bot assigned carlosmiceli Sep 29, 2024

github-actions bot mentioned this issue Sep 29, 2024

Deploy Checklist: New Expensify 2024-09-27 #49855

Open

melvin-bot bot mentioned this issue Sep 29, 2024

[$250][Search v2.1] Web - App navigates from search page to inbox when refreshing #46773

Open

6 tasks

melvin-bot bot mentioned this issue Sep 30, 2024

Android- expense - In camera screen receipt header is missing #49881

Closed

6 tasks

Gonals removed the DeployBlocker Indicates it should block deploying the API label Sep 30, 2024

bernhardoj mentioned this issue Sep 30, 2024

[CP Staging] Fix missing header in scan page #49916

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Hourly KSv2 labels Sep 30, 2024

carlosmiceli added Hourly KSv2 and removed Weekly KSv2 labels Sep 30, 2024

luacmartins removed the DeployBlockerCash This issue or pull request should block deployment label Sep 30, 2024

luacmartins self-assigned this Sep 30, 2024

luacmartins closed this as completed Sep 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expense - Unable to drag and drop receipt to Upload receipt RHP #49901

Expense - Unable to drag and drop receipt to Upload receipt RHP #49901

lanitochka17 commented Sep 29, 2024 •

edited

Loading

github-actions bot commented Sep 29, 2024

melvin-bot bot commented Sep 29, 2024

lanitochka17 commented Sep 29, 2024

ishpaul777 commented Sep 29, 2024

ishpaul777 commented Sep 29, 2024 •

edited

Loading

Nodebrute commented Sep 29, 2024 •

edited

Loading

huult commented Sep 30, 2024

Gonals commented Sep 30, 2024

carlosmiceli commented Sep 30, 2024

melvin-bot bot commented Sep 30, 2024

bernhardoj commented Sep 30, 2024

rayane-djouah commented Sep 30, 2024

carlosmiceli commented Sep 30, 2024

luacmartins commented Sep 30, 2024

luacmartins commented Sep 30, 2024

Expense - Unable to drag and drop receipt to Upload receipt RHP #49901

Expense - Unable to drag and drop receipt to Upload receipt RHP #49901

Comments

lanitochka17 commented Sep 29, 2024 • edited Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

github-actions bot commented Sep 29, 2024

melvin-bot bot commented Sep 29, 2024

lanitochka17 commented Sep 29, 2024

ishpaul777 commented Sep 29, 2024

ishpaul777 commented Sep 29, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

Nodebrute commented Sep 29, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

huult commented Sep 30, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Gonals commented Sep 30, 2024

carlosmiceli commented Sep 30, 2024

melvin-bot bot commented Sep 30, 2024

bernhardoj commented Sep 30, 2024

rayane-djouah commented Sep 30, 2024

carlosmiceli commented Sep 30, 2024

luacmartins commented Sep 30, 2024

luacmartins commented Sep 30, 2024

lanitochka17 commented Sep 29, 2024 •

edited

Loading

ishpaul777 commented Sep 29, 2024 •

edited

Loading

Nodebrute commented Sep 29, 2024 •

edited

Loading