[$500] Distance - Amount is not clickable on Distance final confirmation screen #29477

lanitochka17 · 2023-10-12T18:46:20Z

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: 1.3.83-3

Reproducible in staging?: Yes

Reproducible in production?: Yes

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: Applause - Internal Team

Slack conversation:

Action Performed:

Navigate to staging.new.expensify.com
Click on FAB> Request Money> Distance
Enter Start and Finish points and click Next
Select account
On the final confirmation page click Amount

Expected Result:

Since the cursor turn to Link pointer style the Amount option should be clickable and should lead to some link

Actual Result:

Amount option is not clickable/ button does not response

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

Windows: Chrome

Bug6234834_1697135624721.Recording__1237.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~017eb3167dc35c1a36
Upwork Job ID: 1714313588301926400
Last Price Increase: 2023-10-17

melvin-bot · 2023-10-12T18:46:25Z

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

melvin-bot · 2023-10-12T18:46:27Z

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

RadoslavLazarov · 2023-10-12T19:51:38Z

Proposal

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

Distance - Amount is not clickable on Distance final confirmation screen

What is the root cause of that problem?

Click event on button depends on isDistanceRequest state. Currently click event is disabled if it is distance request.

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

In MoneyRequestConfirmationList.js component on amount field:

<MenuItemWithTopDescription
       shouldShowRightIcon={!props.isReadOnly && !props.isDistanceRequest}
       title={formattedAmount}
       description={translate('iou.amount')}
       onPress={() => !props.isDistanceRequest && Navigation.navigate(ROUTES.MONEY_REQUEST_AMOUNT.getRoute(props.iouType, props.reportID))}
       style={[styles.moneyRequestMenuItem, styles.mt2]}
       titleStyle={styles.moneyRequestConfirmationAmount}
       disabled={didConfirm || props.isReadOnly}
 />

we can remove !props.isDistanceRequest statement from onPress event.

What alternative solutions did you explore? (Optional)

Screen.Recording.2023-10-12.at.23.18.35.mov

melvin-bot · 2023-10-12T19:51:42Z

📣 @RadoslavLazarov! 📣
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:

Make sure you've read and understood the contributing guidelines.
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.
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.
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>

RadoslavLazarov · 2023-10-12T20:00:20Z

Contributor details
Your Expensify account email: radoslav.lazarov93@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01a581051aa546efa9

melvin-bot · 2023-10-12T20:00:22Z

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

Krishna2323 · 2023-10-12T20:49:30Z

Proposal

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

Distance - Amount is not disabled when it is non-interactive on distance confirmation page.

What is the root cause of that problem?

We are not disabling MenuItemWithTopDescription for amount when it is a distance request but we are properly handling it to show/hide right arrow icon.

App/src/components/MoneyRequestConfirmationList.js

Lines 420 to 428 in 5c13816

    
           <MenuItemWithTopDescription 
        
               shouldShowRightIcon={!props.isReadOnly && !props.isDistanceRequest} 
        
               title={formattedAmount} 
        
               description={translate('iou.amount')} 
        
               onPress={() => !props.isDistanceRequest && Navigation.navigate(ROUTES.getMoneyRequestAmountRoute(props.iouType, props.reportID))} 
        
               style={[styles.moneyRequestMenuItem, styles.mt2]} 
        
               titleStyle={styles.moneyRequestConfirmationAmount} 
        
               disabled={didConfirm || props.isReadOnly} 
        
           />

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

Option 1

We can just add props.isDistanceRequest in disabled prop and it will solve the issue and if we don't want to grey out the distance item then we can also pass false to prop shouldGreyOutWhenDisabled.

Option 2

If we don't want the disabled cursor then we can just add propinteractive={!props.isDistanceRequest} or we can remove the disabled prop & just add propinteractive={!props.isReadOnly && !props.isDistanceRequest}.

Natnael-Guchima · 2023-10-12T20:51:41Z

Proposal

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

Amount option is not clickable even though the button doesn't seem to be disabled

What is the root cause of that problem?

We are returning when props.isDistanceRequest is true here

App/src/components/MoneyRequestConfirmationList.js

Lines 565 to 568 in a2f483d

    
           onPress={() => { 
        
               if (props.isDistanceRequest) { 
        
                   return; 
        
               }

And we are not disabling 'Amount' button here

App/src/components/MoneyRequestConfirmationList.js

Line 577 in a2f483d

disabled={didConfirm}

Since the button is not disabled the user gets a sense that the field is clickable even if clicking the field doesn't do anything.

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

We should disable the 'Amount' button when props.isDistanceRequest is true

                disabled={didConfirm || props.isDistanceRequest}

What alternative solutions did you explore? (Optional)

N/A

DylanDylann · 2023-10-13T07:57:49Z

Proposal

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

Amount is not clickable on Distance final confirmation screen

What is the root cause of that problem?

App/src/components/MoneyRequestConfirmationList.js

Lines 572 to 574 in 148f5b1

    
           if (props.isDistanceRequest) { 
        
               return; 
        
           }

We are checking if isDistanceRequest we will return

Note: Before we disable amount field on distance request. But this PR #26141 allow to edit amount field on distance request. But It seems the author forget to remove this condition

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

Remove this condition to check isDistanceRequest in

App/src/components/MoneyRequestConfirmationList.js

Line 572 in 148f5b1

if (props.isDistanceRequest) {

and

App/src/components/MoneyRequestConfirmationList.js

Line 567 in 148f5b1

shouldShowRightIcon={!props.isReadOnly && !props.isDistanceRequest}

What alternative solutions did you explore? (Optional)

melvin-bot · 2023-10-16T11:56:24Z

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

melvin-bot · 2023-10-17T16:13:07Z

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

melvin-bot · 2023-10-17T16:13:13Z

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

kevinksullivan · 2023-10-17T16:13:17Z

Sorry, I didn't realize this was missing proper labels. Moving forward.

kevinksullivan · 2023-10-17T16:13:26Z

@rushatgabhane lmk what you think about the proposal above

rushatgabhane · 2023-10-17T20:26:01Z

C+ reviewed 🎀 👀 🎀

I like @DylanDylann's proposal because they have clearly explained the root cause and provided a fix
#29477 (comment)

melvin-bot · 2023-10-17T20:26:07Z

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

Krishna2323 · 2023-10-17T20:38:24Z

@rushatgabhane, I don't think that at the time we allow modifying the distance amount. That PR was focused on editing the distance waypoints not amount input.

rushatgabhane · 2023-10-17T20:46:46Z

Thanks @Krishna2323! Asked about it on slack https://expensify.slack.com/archives/C01GTK53T8Q/p1697575566549679

rushatgabhane · 2023-10-17T21:30:40Z

As I recall we disabled that on purpose. The amount can be modified by changing the distance field.

Based on @neil-marcellini's comment on 🧵 , we should close this issue!

Krishna2323 · 2023-10-17T21:37:57Z

@rushatgabhane @AndrewGable, I think we should change the hover style like we do for shared to details, and it also changes its styles when clicked. That is the bug here I think.

Monosnap.screencast.2023-10-18.03-06-15.mp4

lanitochka17 added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Oct 12, 2023

melvin-bot bot assigned kevinksullivan Oct 12, 2023

melvin-bot bot added the Overdue label Oct 16, 2023

kevinksullivan added the External Added to denote the issue can be worked on by a contributor label Oct 17, 2023

melvin-bot bot changed the title ~~Distance - Amount is not clickable on Distance final confirmation screen~~ [$500] Distance - Amount is not clickable on Distance final confirmation screen Oct 17, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 17, 2023

melvin-bot bot assigned rushatgabhane Oct 17, 2023

melvin-bot bot removed the Overdue label Oct 17, 2023

melvin-bot bot assigned AndrewGable Oct 17, 2023

AndrewGable closed this as completed Oct 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$500] Distance - Amount is not clickable on Distance final confirmation screen #29477

[$500] Distance - Amount is not clickable on Distance final confirmation screen #29477

lanitochka17 commented Oct 12, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Oct 12, 2023

melvin-bot bot commented Oct 12, 2023

RadoslavLazarov commented Oct 12, 2023 •

edited

Loading

melvin-bot bot commented Oct 12, 2023

RadoslavLazarov commented Oct 12, 2023

melvin-bot bot commented Oct 12, 2023

Krishna2323 commented Oct 12, 2023 •

edited

Loading

Natnael-Guchima commented Oct 12, 2023 •

edited

Loading

DylanDylann commented Oct 13, 2023

melvin-bot bot commented Oct 16, 2023

melvin-bot bot commented Oct 17, 2023

melvin-bot bot commented Oct 17, 2023

kevinksullivan commented Oct 17, 2023

kevinksullivan commented Oct 17, 2023

rushatgabhane commented Oct 17, 2023

melvin-bot bot commented Oct 17, 2023

Krishna2323 commented Oct 17, 2023 •

edited

Loading

rushatgabhane commented Oct 17, 2023

rushatgabhane commented Oct 17, 2023

Krishna2323 commented Oct 17, 2023 •

edited

Loading

[$500] Distance - Amount is not clickable on Distance final confirmation screen #29477

[$500] Distance - Amount is not clickable on Distance final confirmation screen #29477

Comments

lanitochka17 commented Oct 12, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Oct 12, 2023

melvin-bot bot commented Oct 12, 2023

Bug0 Triage Checklist (Main S/O)

RadoslavLazarov commented Oct 12, 2023 • 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)

melvin-bot bot commented Oct 12, 2023

RadoslavLazarov commented Oct 12, 2023

melvin-bot bot commented Oct 12, 2023

Krishna2323 commented Oct 12, 2023 • 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?

Option 1

Option 2

Natnael-Guchima commented Oct 12, 2023 • 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)

DylanDylann commented Oct 13, 2023

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)

melvin-bot bot commented Oct 16, 2023

melvin-bot bot commented Oct 17, 2023

melvin-bot bot commented Oct 17, 2023

kevinksullivan commented Oct 17, 2023

kevinksullivan commented Oct 17, 2023

rushatgabhane commented Oct 17, 2023

melvin-bot bot commented Oct 17, 2023

Krishna2323 commented Oct 17, 2023 • edited Loading

rushatgabhane commented Oct 17, 2023

rushatgabhane commented Oct 17, 2023

Krishna2323 commented Oct 17, 2023 • edited Loading

lanitochka17 commented Oct 12, 2023 •

edited by melvin-bot bot

Loading

RadoslavLazarov commented Oct 12, 2023 •

edited

Loading

Krishna2323 commented Oct 12, 2023 •

edited

Loading

Natnael-Guchima commented Oct 12, 2023 •

edited

Loading

Krishna2323 commented Oct 17, 2023 •

edited

Loading

Krishna2323 commented Oct 17, 2023 •

edited

Loading