[HOLD for payment 2023-09-13] [HOLD for payment 2023-09-12] [$500] BUG: [distance] request next button is hidden on small height screens #26541

neil-marcellini · 2023-09-01T23:36:53Z

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

Action Performed:

Run App on latest main branch (for now)
Sign in with an account on the distance requests beta (or enable all betas)
Click green plus, request money, distance
Enter start and finish addresses
Open dev tools and set the responsive device dimensions to 400x400

Expected Result:

Let's hide the map and show the request button, unless anyone else had better ideas.

Actual Result:

The request button is hidden and you can't scroll down to it

Workaround:

Use a reasonably sized device / orientation. The only real scenario here is mobile web in landscape view.

Platforms:

Which of our officially supported platforms is this issue occurring on?
Idk let's check

Version Number: unreleased
Reproducible in staging?: Not yet
Reproducible in production?: Not yet
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
Notes/Photos/Videos: Originally reported by Hayata in a PR review here
Expensify/Expensify Issue URL:
Issue reported by: @hayata-suenaga
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693611241072219

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0131f651439d571fb4
Upwork Job ID: 1697755507566587904
Last Price Increase: 2023-09-01

melvin-bot · 2023-09-01T23:36:58Z

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

melvin-bot · 2023-09-01T23:37:00Z

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

melvin-bot · 2023-09-01T23:37:12Z

Job added to Upwork: https://www.upwork.com/jobs/~0131f651439d571fb4

melvin-bot · 2023-09-01T23:37:15Z

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

melvin-bot · 2023-09-01T23:37:21Z

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

neonbhai · 2023-09-02T01:15:05Z

Proposal

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

[distance] request next button is hidden on small height screens

What is the root cause of that problem?

New Feature

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

Solution 1:

We can get isExtraSmallScreenHeight using useWindowDimensions and only render MapView if the the screen is not extra small

App/src/components/DistanceRequest.js

Lines 228 to 230 in 8fbe6aa

    
           <View style={styles.mapViewContainer}> 
        
               {!isOffline && Boolean(mapboxAccessToken.token) ? ( 
        
                   <MapView

const {isExtraSmallScreenHeight} = useWindowDimensions();

and then render the mapView container conditionally:

{!isExtraSmallScreenHeight && <View style={styles.mapViewContainer}>

Solution 2:

we can add styles.displayNone to the mapViewContainer CSS itself if the view is small here:

App/src/styles/styles.js

Lines 3869 to 3875 in 8fbe6aa

    
           mapViewContainer: { 
        
               ...flex.flex1, 
        
               ...spacing.p4, 
        
               ...spacing.flex1, 
        
               minHeight: 300, 
        
               maxHeight: 500, 
        
           },

What alternative solutions did you explore? (Optional)

xx

RPSanchez · 2023-09-02T02:00:34Z

Proposal

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

[distance] request next button is hidden on small height screens

What is the root cause of that problem?

The code initially renders both the map and the request button without considering the available screen height.

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

Dimensions should be imported via React Native for screen dimensions.

import { Dimensions } from 'react-native';

Screen height should then be calculated.

const windowHeight = Dimensions.get('window').height;

Conditionally render the map and request button depending on the size of the screen. If it's smaller than 400px - for example - hide the map and adjust the size of the button to fit the screen.
<View style={[styles.flexRow, styles.justifyContentCenter, styles.pt1]}>
The button size itself can further be edited via innerStyles.

What alternative solutions did you explore? (Optional)

Rendering exclusively the map at a certain size, with user interaction then making the request button available.

melvin-bot · 2023-09-02T02:00:37Z

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

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>

RPSanchez · 2023-09-02T02:02:11Z

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01537b3cc571627ce8

melvin-bot · 2023-09-02T02:02:13Z

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

ZhenjaHorbach · 2023-09-02T09:07:39Z

Proposal

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

On small screens, the button is hidden under the map.

What is the root cause of that problem?

Since the map has a fixed height and the screen does not support scrolling, there is no place for the button.

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

Instead of hiding the map, we can add a ScrollView instead <></>
So that users can enjoy all the content.

App/src/components/DistanceRequest.js

Line 164 in 9701fbe

<>

Screen.Recording.2023-09-02.at.10.30.20.mov

What alternative solutions did you explore? (Optional)

NA

rizalalfandi123 · 2023-09-03T04:11:32Z

Proposal

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

request next button is hidden on small height screens

What is the root cause of that problem?

The screen below the distance tab is not scrollable, so when on a small screen it cannot fit all the content.

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

The best solution is to make the screen scrollable, so that all the content inside can be accessed by the user.
We can turn the React Fragment (<></>) into a ScrollView Component ().

App/src/components/DistanceRequest.js

Line 164 in d0b2772

<>

Screencast.from.2023-09-03.11-06-18.webm

Note: scroll is only visible when the screen cannot fit all the content.

What alternative solutions did you explore? (Optional)

None

melvin-bot · 2023-09-03T04:11:35Z

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

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>

rizalalfandi123 · 2023-09-03T04:13:57Z

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0184b429844e7f9abd

melvin-bot · 2023-09-03T04:13:59Z

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

mananjadhav · 2023-09-04T16:37:07Z

@hayata-suenaga @neil-marcellini @CortneyOfstad what are your thoughts on adding a ScrollView?

allroundexperts · 2023-09-04T21:12:51Z

Proposal

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

Next button is cut off when creating distance requests

What is the root cause of that problem?

We're not using a fixed footer for the next button.

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

We need to wrap this into ScrollView having style as flex: 1.

After that, we need to wrap this inside the FixedFooter component.

Result

Screen.Recording.2023-09-05.at.1.13.29.AM.mov

What alternative solutions did you explore? (Optional)

None

CortneyOfstad · 2023-09-15T12:55:52Z

So the issue was reported by @hayata-suenaga and the Contributor and C+ are both paid outside of Upwork, so no payments are needed at this time from me 👍

@mananjadhav / @allroundexperts any updates on the checklist above? Thanks!

mananjadhav · 2023-09-17T17:47:08Z

@CortneyOfstad I would like to request for a partial comp for C+ here. I did review the proposals, but due to urgency it was assigned on slack.

I am unsure at which point we should've added the Scroll behavior?

Was it when the component was created here
or this PR, where we added multiple waypoint handling for smaller screen.

I also don't think we need any regression steps here.

CortneyOfstad · 2023-09-18T15:15:56Z

@hayata-suenaga does that ^^^ sound good to you?

CortneyOfstad · 2023-09-20T12:56:20Z

Bump @hayata-suenaga

hayata-suenaga · 2023-09-21T08:01:12Z

ah sorry I missed this one.

@mananjadhav and @ntdiary both reviewed the PR. They both should get some amount of payments.

mananjadhav · 2023-09-21T09:20:48Z

@hayata-suenaga @CortneyOfstad Can you please update the payment summary so that I can raise a payment request.

ntdiary · 2023-09-21T10:30:29Z

ah sorry I missed this one.

@mananjadhav and @ntdiary both reviewed the PR. They both should get some amount of payments.

Ah, personally, I'd be happy to split the payments here with @mananjadhav, regardless of the total amount. 😄

Additionally, I'm not sure what the requirements are for NewDot payment. If possible, I'd like to apply for it in the future as well. : )

mananjadhav · 2023-09-21T17:55:49Z

Thanks @ntdiary. @CortneyOfstad Can you please update the payment summary here?

allroundexperts · 2023-09-21T20:41:54Z

@mananjadhav @ntdiary @hayata-suenaga Do we consider #26859 as a regression from this issue? If so, the payment should be halved!

hayata-suenaga · 2023-09-22T01:31:44Z

no I don't think we have to think that PR? as a regression

mananjadhav · 2023-09-24T15:01:01Z

Thanks for confirming @hayata-suenaga.

@CortneyOfstad considering this was assigned and merged within 3 days this is eligible for the speed bonus.

That being said, I think the payout summary would be:

@allroundexperts - 750$
@ntdiary - 500$ (full speed bonus to them as they reviewed the PR)
@mananjadhav - 250$

CortneyOfstad · 2023-09-26T12:08:45Z

Sorry for the delay here!

Just to confirm, @hayata-suenaga does that pay summary work for you as well? I feel like this is more than fair, but wanted a buddy-check before sending out payments 👍

hayata-suenaga · 2023-09-27T03:16:20Z

discussing the payment prices internally. thank you for your patience everyone 🙇

CortneyOfstad · 2023-09-27T15:39:08Z

To confirm @mananjadhav, the amounts you put include the bonuses, correct? Or does a bonus need to be added to the total you listed? Thanks!

mananjadhav · 2023-09-27T15:47:28Z

Yes @CortneyOfstad it includes the bonus.

CortneyOfstad · 2023-09-27T19:32:31Z

Thanks!

@mananjadhav @ntdiary and @allroundexperts — I've sent job offers to each of you in Upwork. Please accept them as soon as you can so I can get those paid out. Thanks for your patience with this, and always – if you have any questions, just let me know!

allroundexperts · 2023-09-27T19:34:05Z

Hi @CortneyOfstad!

I get paid through the app.

CortneyOfstad · 2023-09-27T19:35:09Z

No worries! I've withdrawn the offer in Upwork! Feel free to make the request in the app, and let me know if any additional info is needed on my part to get that paid!

CortneyOfstad · 2023-09-29T11:22:48Z

@ntdiary Contract has been paid, so you should be all set!

@mananjadhav It shows that the proposal in Upwork is still waiting for you to accept — please let me know as soon as you complete this. Thank you!

mananjadhav · 2023-10-02T14:41:54Z

@CortneyOfstad I will raise the request on NewDot. No upwork needed. Also can you confirm or acknowledge the posted payout summary? I'll need it for approval on the NewDot.

CortneyOfstad · 2023-10-03T15:29:40Z

@mananjadhav Sounds good!

The payment breakdown is shared below:

@allroundexperts - 750$ — TO BE PAID IN NEWDOT
@ntdiary - 500$ (they reviewed the PR) — ALREADY PAID IN UPWORK
@mananjadhav - 250$ — TO BE PAID IN NEWDOT

CortneyOfstad · 2023-10-03T15:30:24Z

@mananjadhav @allroundexperts once you are both paid in NewDot, please let me know here so I can then close this out. Thanks!

mananjadhav · 2023-10-03T16:34:25Z

I think we can close once @allroundexperts has raised. I've raised my request.

allroundexperts · 2023-10-03T18:54:39Z

I have raised mine as well. Thank you @mananjadhav and @CortneyOfstad!

JmillsExpensify · 2023-10-05T13:15:48Z

$750 payment approved for @allroundexperts based on BZ summary.

JmillsExpensify · 2023-10-05T20:59:20Z

$250 payment approved for @mananjadhav based on BZ summary.

neil-marcellini added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 1, 2023

neil-marcellini assigned hayata-suenaga Sep 1, 2023

melvin-bot bot assigned CortneyOfstad Sep 1, 2023

neil-marcellini added the External Added to denote the issue can be worked on by a contributor label Sep 1, 2023

melvin-bot bot changed the title ~~BUG: [distance] request next button is hidden on small height screens~~ [$500] BUG: [distance] request next button is hidden on small height screens Sep 1, 2023

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

melvin-bot bot assigned mananjadhav Sep 1, 2023

ZhenjaHorbach mentioned this issue Sep 3, 2023

Ensure multiple waypoints are visible on smaller screens #26610

Merged

59 tasks

melvin-bot bot added the Overdue label Sep 4, 2023

melvin-bot bot removed the Overdue label Sep 4, 2023

fedirjh mentioned this issue Sep 4, 2023

[$500] Next button is cut off when creating distance requests #26712

Closed

hayata-suenaga removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 4, 2023

sakluger removed their assignment Sep 14, 2023

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

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

CortneyOfstad closed this as completed Oct 5, 2023

[HOLD for payment 2023-09-13] [HOLD for payment 2023-09-12] [$500] BUG: [distance] request next button is hidden on small height screens #26541

[HOLD for payment 2023-09-13] [HOLD for payment 2023-09-12] [$500] BUG: [distance] request next button is hidden on small height screens #26541

Comments

neil-marcellini commented Sep 1, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Sep 1, 2023

melvin-bot bot commented Sep 1, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot bot commented Sep 1, 2023

melvin-bot bot commented Sep 1, 2023

melvin-bot bot commented Sep 1, 2023

neonbhai commented Sep 2, 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)

RPSanchez commented Sep 2, 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 Sep 2, 2023

RPSanchez commented Sep 2, 2023

melvin-bot bot commented Sep 2, 2023

ZhenjaHorbach commented Sep 2, 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)

rizalalfandi123 commented Sep 3, 2023 • edited Loading

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 Sep 3, 2023

rizalalfandi123 commented Sep 3, 2023

melvin-bot bot commented Sep 3, 2023

mananjadhav commented Sep 4, 2023

allroundexperts commented Sep 4, 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?

Result

What alternative solutions did you explore? (Optional)

CortneyOfstad commented Sep 15, 2023

mananjadhav commented Sep 17, 2023

CortneyOfstad commented Sep 18, 2023

CortneyOfstad commented Sep 20, 2023

hayata-suenaga commented Sep 21, 2023

mananjadhav commented Sep 21, 2023

ntdiary commented Sep 21, 2023

mananjadhav commented Sep 21, 2023

allroundexperts commented Sep 21, 2023

hayata-suenaga commented Sep 22, 2023

mananjadhav commented Sep 24, 2023

CortneyOfstad commented Sep 26, 2023 • edited Loading

hayata-suenaga commented Sep 27, 2023

CortneyOfstad commented Sep 27, 2023

mananjadhav commented Sep 27, 2023

CortneyOfstad commented Sep 27, 2023

allroundexperts commented Sep 27, 2023

CortneyOfstad commented Sep 27, 2023

CortneyOfstad commented Sep 29, 2023

mananjadhav commented Oct 2, 2023 • edited Loading

CortneyOfstad commented Oct 3, 2023

CortneyOfstad commented Oct 3, 2023

mananjadhav commented Oct 3, 2023

allroundexperts commented Oct 3, 2023

JmillsExpensify commented Oct 5, 2023

JmillsExpensify commented Oct 5, 2023

neil-marcellini commented Sep 1, 2023 •

edited by melvin-bot bot

Loading

neonbhai commented Sep 2, 2023 •

edited

Loading

RPSanchez commented Sep 2, 2023 •

edited

Loading

ZhenjaHorbach commented Sep 2, 2023 •

edited

Loading

rizalalfandi123 commented Sep 3, 2023 •

edited

Loading

CortneyOfstad commented Sep 26, 2023 •

edited

Loading

mananjadhav commented Oct 2, 2023 •

edited

Loading