[HOLD for payment 2023-09-07] [$2000] Make it easier to delete waypionts

[hayata-suenaga]

On the waypoint editor, add the following flow: Dot menu icon -> menu pop up -> delete confirmation

Please refer to this comment for screenshots of the final design that should be achieved.

The following video demonstrates the current situation. You don't have a way to delete a waypoint (you can save a waypoint while the text input is empty to delete that waypoint, but it's not clear for the user that they can do so).

Screen.Recording.2023-08-24.at.9.56.23.AM.mov

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bd2d29975258985d
• Upwork Job ID: 1695146647097401344
• Last Price Increase: 2023-08-25
• Automatic offers:
• Nikhil-Vats | Contributor | 26332832

[iwint]

Hello @hayata-suenaga , This makes sense and I would like to contribute to it , Can you assign this task to me ?

[melvin-bot]

📣 @iwint! 📣
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. 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.
2. 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.
3. 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>

[jeet-dhandha]

Proposal

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

• There is no way to remove a unwanted stop from waypoints.

What is the root cause of that problem?

• We don't have any UI element to remove a stop from waypoints.

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

• To allow stop deletion from three dot menu from inside waypoint address enter screen:
  • On three-dot-menu press we will open a modal and show single option "Remove Stop".
  • On press of "Remove Stop" we will open a delete confirmation modal to confirm the deletion of the stop and we will call removeWaypoint function on confirmation.

(Not posting much details on code as its already gonna be the same.)

• To allow stop deletion from list of stops:

  • We can add a (-) minus circle icon instead of showing the Expensicons.DotIndicator icon.
  • We will also apply icon theme as theme.danger. To notify user that this is a remove icon.
  • Then we can make that icon pressable in MenuItem.js so that we can open a modal to confirm the deletion of the stop and we can call removeWaypoint function on confirmation.

• Why two different approaches?

  • As user might have added a stop by mistake and he wants to remove it and we don't want to make user go inside the address enter screen to remove the stop. So we are providing a way to remove stop from list of stops.

• Further Enhancements:

  • Also if we are calling same modal from two screens we can create a common delete stop modal file and use it in both the screens. To eliminate code duplication.

  • Further I was thinking of making a common modal where we can pass title, description and button names so that we can create functions for modal instead of writing code for ConfirmModal everywhere, we are doing a similar thing using ReportActionContextMenu.showDeleteModal which eliminates code duplication.

Video - UI for Delete from list of stops

MapStopIconRemove.mp4

What alternative solutions did you explore? (Optional)

• N/A

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[hayata-suenaga]

design discussion going on here: https://expensify.slack.com/archives/C05DWUDHVK7/p1692985501656569

[hayata-suenaga]

This is what we want to have.

Clicking the dot icon should display this kind of menu (with just "Delete" option)-> confirmation flow

"Delete receipt" should be "Delete waypoint"

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01bd2d29975258985d

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.