[$500] "Hmm, it's not here page" when clicking "Description" in send money flow

[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: 1.4.42-2
Reproducible in staging?: y
Reproducible in production?: y
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: @jamesdeanexpensify
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1708042986840429

Action Performed:

1. Click on FAB and select "send money"
2. Enter amount and select a member
3. Click on "Description"

Expected Result:

Able to add the description

Actual Result:

"Hmm...it's not here." page appears

Workaround:

unknown

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

Recording.2742.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014d41934c99998d4c
• Upwork Job ID: 1758527199783079936
• Last Price Increase: 2024-03-08

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[ZhenjaHorbach]

#36342
Dupe

[force2008]

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

What is the root cause of that problem?

when click on the Description item in src\components\MoneyRequestConfirmationList.js , it navigates to the action of edit, which will check the transactionID, then cause FullPageNotFoundView show.

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

change action type will solve the issue

What alternative solutions did you explore? (Optional)

none

[melvin-bot]

📣 @force2008! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[dukenv0307]

Proposal

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

"Hmm...it's not here." page appears

What is the root cause of that problem?

Because of send money flow, transactionID is undefined. So it's displayed not found page by withFullTransactionOrNotFound .

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

We can implement send money flow by adding transactionID and reportID into the param of the route and use this to create the report and transaction as we do for request flow.

What alternative solutions did you explore? (Optional)

NA

[aneequeahmad]

Proposal

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

When click on Description in send money flow "Hmm, its not here page" appears

What is the root cause of that problem?

When Action performed Route isn't correct for Description Page

Reason:

• Route For Description page was updated for request amount flow which has a transactionID already created for new money request.

• Also if noticed the Route is like send/new/amount/ on send money flow confirmation page and when clicked on amount and when description option is clicked the url changes to edit/send/description/undefined/?backTo=%2Fsend%2Fnew%2Fconfirmation%2F which is isn't correct for send money flow.

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

Here need to check if it's send money flow if(props.iouType === CONST.IOU.TYPE.SEND) then Route should be like send/new/description/ like it used to be till app version v1.4.38-6

What alternative solutions did you explore? (Optional)

N/A

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[brandonhenry]

Problem Statement

When a user tries to add a description in the send money flow, they encounter a "Hmm...it's not here." page instead of being able to add the description.

Root Cause

The issue is related to the navigation route parameters passed to Navigation.navigate() in the MoneyRequestConfirmationList component. Specifically, we don't want to use ROUTES.MONEY_REQUEST_STEP_DESCRIPTION. This is the wrong route, this points to

App/src/libs/Navigation/linkingConfig/config.ts

Line 366 in 5427e8f

[SCREENS.MONEY_REQUEST.STEP_DESCRIPTION]: ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.route,

This results in an error because that specific routes expects a transaction and transaction.transactionID in order to build it. However, where we are calling that function (inside MoneyRequestCategoryPage / MoneyRequestConfirmationList), we are initializing transaction to {} and transactionID to ''.

ROUTES.MONEY_REQUEST_STEP_DESCRIPTION is actually tied to https://github.com/Expensify/App/blob/1806422ea2208540a89271da7026799a1ade9d69/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx#L90C28-L90C44

[SCREENS.MONEY_REQUEST.STEP_DESCRIPTION]: () => require('../../../pages/iou/request/step/IOURequestStepDescription').default as React.ComponentType,

That is a different route, specifically for when someone is requesting and not sending. So, we need a new screen for send description

Proposed Solution

1. Add a New Screen for Money Send Description:
   • Create a new screen SCREENS.MONEY_REQUEST_DESCRIPTION in the SCREENS constant file.
   • Define the corresponding route in the ROUTES constant file and the linking configuration.

const SCREENS = {
    ...
    MONEY_REQUEST_DESCRIPTION: 'MoneyRequestDescription',
    ...
};

const ROUTES = {
    ...
    MONEY_REQUEST_DESCRIPTION: {
        route: ':iouType/new/description/:reportID?',
        getRoute: (iouType: string, reportID = '') => `${iouType}/new/description/${reportID}` as const,
    },
    ...
};

2. Update Navigation in MenuItemWithTopDescription:
   • Replace the incorrect route ROUTES.MONEY_REQUEST_STEP_DESCRIPTION with the new route for SCREENS.MONEY_REQUEST_DESCRIPTION in the onPress callback.

Navigation.navigate(
    ROUTES.MONEY_REQUEST_DESCRIPTION.getRoute( // change here
        CONST.IOU.ACTION.EDIT,
        props.iouType,
        transaction.transactionID,
        props.reportID,
        Navigation.getActiveRouteWithoutParams(),
    ),
);

3. Implement the Description Screen:
   • Implement the Description screen based on how we have implemented screens in the past. For example src/pages/ious/steps/MoneyRequestCategoryPage.js

ab6a7ec#diff-6e896ede958248cb2e8e85d63852f3412c3cad4c9842fc87f1504f691a67f9b9

• Design screen based on IOUSRequestStepDescription.js

https://github.com/Expensify/App/blob/main/src/pages/iou/request/step/IOURequestStepDescription.js

4. Test the Flow:
   • Ensure that navigating to the description screen works correctly and that the user can add and save a description successfully.

[aneequeahmad]

@brandonhenry Isn't your proposal the duplicate of my proposal ? Thats the same root cause and solution that i have posted. You just explained what i proposed.

[melvin-bot]

@JmillsExpensify, @eVoloshchak Whoops! This issue is 2 days overdue. Let's get this updated quick!

[JmillsExpensify]

@eVoloshchak thoughts on the proposals so far?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[eVoloshchak]

Agree with @ZhenjaHorbach's comment, this is a duplicate of #36342 (which is on hold)

[eVoloshchak]

Not overdue, #36711 (comment)

[melvin-bot]

@JmillsExpensify @eVoloshchak this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[eVoloshchak]

@JmillsExpensify, I think we should close this since it's a duplicate of #36342

[srikarparsi]

Hey! Yup, this looks like a duplicate of #36342. I can take care of it in the other issue so I think we can close it out here @JmillsExpensify

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@JmillsExpensify @eVoloshchak this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[melvin-bot]

@JmillsExpensify, @eVoloshchak Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@JmillsExpensify, @eVoloshchak Still overdue 6 days?! Let's take care of this!

[JmillsExpensify]

Nice, thanks ya'll. Closing this one out.