Repository navigation
[HOLD for payment 2023-12-06] [DISTANCE] [$500] HIGH: Automatically pan initial map based on current location #22704
Description
Activity
Eep! 4 days overdue now. Issues have feelings too...
6 days overdue. This is scarier than being forced to listen to Vogon poetry!
This issue has not been updated in over 15 days. eroding to Monthly issue.
P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!
On hold
- changed the title
[-][HOLD 22703] Automatic user location access for distance requests[/-][+]Automatic user location access for distance requests[/+]on Aug 21, 2023 66 remaining items
Summarizing payment on this issue:
- Contributor: @MaciejSWM, no payment required
- Contributor+: $500 - HOLD on BZ checklist, @mananjadhav can you please complete?
Upwork job is here
@stephanieelliott This was more of a feature request than a bug.
But I think we should add a regression test. The test steps from the PR are good to be added the regression tests.
Reacted by Stephanie Elliott$500 payment approved for @mananjadhav based on summary above.
@mananjadhav can you please paste the regression/TestRail steps as a comment in this issue?
Pending regression steps from C+
We have three scenarios for the regression test steps. @JmillsExpensify @stephanieelliott @thienlnam We can use the following scenarios to add to Testrail.
Regression Test Steps
Location Permission is not set
- Have the location access reset before you access the app.
- Login to the app
- Click on FAB -> Request Money -> Distance.
- Browser should ask if you want to grant location access. Map should stay in pending state until you choose something.
- Grant the permission. Map should navigate straight to your current location within 1-2 seconds.
- Repeat steps 1 to 4, but this time, block the location access. The map should redirect you to default San Francisco location.
Location Permission is enabled
- Load the application with the location access enabled.
- Start the request money flow by clicking
FAB -> Request Money -> Distance. - It should take you directly to your current location.
- Update the location in the Dev console by setting:
Onyx.set(ONYXKEYS.USER_LOCATION, { longitude: 12, latitude: 12 })- Repeat the steps 1 and 2. It should change the map location to your current location.
- Repeat steps 4 and 5, and before it can change to your current location, drag the map. This should keep you at [12, 12] coords and should stop the map from auto-panning to your current location.
Location Permission is disabled
- Load the application with the location access enabled.
- Start the request money flow by clicking
FAB -> Request Money -> Distance. - The map should redirect you to default San Francisco location.
- Refresh the page. You should land straight in the San Francisco location.
- Enable the location and refresh the page to cache the current location in ONYX.
- Then disable the location and refresh the page.
- You should land in this cached location instead of the default San Francisco location.
Reacted by Jack Nam and Stephanie ElliottThank you -- issue for regression test here: https://github.com/Expensify/Expensify/issues/349072
- moved this from HIGH to Done in [#whatsnext] Wave 05 - Deprecate Free
on Dec 13, 2023
Metadata
Metadata
Labels
Type
Projects
- StatusShow more project fieldsDone
Please follow the plan in the design doc. I have pasted the plan below for external viewers so some of the links might not work. Also, please note that contrary to the original plan below, we have already implemented the "Use current location" button, so please try to reuse as much of that code as possible.
Automatic user location access
The first time a user opens this page we will prompt them to enable location services and then show a map centered on their current location. We’re not going to get the location using the mapping libraries because rnmapbox/maps doesn’t provide a way to access the location permissions. For web, react-map-gl and the underlying Mapbox gl js library don’t provide a way to request the user’s location without forcing them to press a button.
To handle geolocation we will need to platform specific files because react-native-geolocation doesn’t support web. We will create a location folder with platform specific implementations for all the functions handling the user location. At the moment we only need getCurrentPosition.
On native at the top of the file we will set up the configuration via Geolocation.setRNConfiguration. In the config we’ll set skipPermissionRequests: false since we’ll be using this function to request permission, authorizationLevel: ‘whenInUse’ because we only need the location when the app is open, and locationProvider: ‘auto’.
getCurrentPosition(success, error, config) will call Geolocation.getCurrentPosition passing the callbacks config through. From the App side we’ll set up a default config with the timeout and the maximumAge set to one minute because it seems like a reasonable maximum time to wait for your location and it’s unlikely that a cached location will be out of date within one minute.
On web getCurrentPosition(success, error, config) will first check if navigator.geolocation exists. If not then we will call the error call back with a GeolocationPositionError object with code 2, POSITION_UNAVAILABLE. Otherwise, we’ll call navigator.geolocation.getCurrentPosition passing through the params.
After calling getCurrentPosition in the ExpensifyMap, in the success callback we will center the map on the user’s location. The error callback will do nothing for this location request, because if we fail to get the user’s location we’ll continue displaying the default map area of San Francisco. We can prompt the user to enable location permission when they ask for it more explicitly on the waypoint editor page.
On native to center the map we’ll use camera.flyTo([lon, lat]); on the Camera ref. The Camera component will be a child of the MapView as shown in this example.
On web we will call map.flyTo({center: [lon, lat]}); where the map comes from the useMap hook.
Upwork Automation - Do Not Edit