[User Story] As a rider I want to request a ride so that I can get to my destination

[chriscoderdr]

User Story Description

• As a rider
• I want to request a ride
• So that I can get to my destination

tasks

• : Rider can input destination location on the main screen.

  • Description: The main screen for the rider will have a "Where to?" (destination location) input. When clicking, it will navigate to another screen.

• : Rider can input pickup and destination locations on the next screen.

  • Description: The screen will have two inputs on top (Pickup location, Where to?). Pickup location will be by default filled with the current location. When typing in "Where to", a list of nearby locations will appear. When changing focus to the current location, a different list with nearby locations will appear, independent of each other.

• : Rider can confirm the pickup location.

  • Description: After selecting both locations, the rider will navigate to a screen for confirming the pickup location. It will have a map showing the pickup location with a location pin and the user's current location with a puck, and a button at the bottom saying "Choose this location" or something similar.

• : Rider can confirm the booking with an estimated price.

  • Description: When clicking "Choose this location", the rider will navigate to a screen with a map showing a route between the pickup location and the destination. At the bottom, there will be a card with the estimated price information and a button for confirming the booking.

• : Rider can see the "Looking for a ride" status.

  • Description: After confirming the booking, the rider will see a screen "Looking for a ride" with a map showing the status of looking for a ride. This will send the request to the backend to look for a driver.

• : Rider gets an alert if no driver is found.

  • Description: If no driver is found, the rider will get an alert and can try to book again.

• : Rider can see the driver's route to the pickup point.

  • Description: If a driver is found, the rider will navigate to a screen with a map showing the route of the driver's current location to the pickup point. At the bottom, there will be the driver's information and a button to call the driver.

• : Rider sees the ongoing ride screen after being picked up.

  • Description: When the driver confirms he picked up the rider, the rider will see the ongoing ride screen with a map showing the driver's route to the destination.

• : Rider sees a summary screen after the ride is finished.

  • Description: When the driver confirms he finished the ride, the rider will see a summary screen with the price to pay.

Acceptance Criteria

• The main screen allows input of the destination location.
• The next screen allows input of both pickup and destination locations with default pickup location as the current location.
• Lists of nearby locations appear independently for each input field.
• Pickup location can be confirmed on a map.
• Estimated price and booking confirmation are shown on a map screen.
• "Looking for a ride" status is displayed while searching for a driver.
• An alert is shown if no driver is found, allowing the rider to try booking again.
• Driver's route to the pickup point is displayed once a driver is found.
• Driver's information and a call button are provided.
• Ongoing ride screen shows the driver's route to the destination after pickup.
• Summary screen shows the price to pay after the ride is finished.

Labels

• Feature: Ride Request
• Type: user-story
• Priority: High
• Status: In Progress

[chriscoderdr]

Let's use: https://docs.mapbox.com/mapbox-search-js/guides/

[chriscoderdr]

there is not ui already make for react native, so let's use https://docs.mapbox.com/mapbox-search-js/guides/#search-js-core and create our own components

[chriscoderdr]

rnmapbox/maps#3648