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

hayata-suenaga · 2023-08-24T21:48:01Z

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 · 2023-08-25T07:16:37Z

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

melvin-bot · 2023-08-25T07:16:40Z

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

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>

jeet-dhandha · 2023-08-25T17:03:59Z

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 · 2023-08-25T17:28:13Z

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

hayata-suenaga · 2023-08-25T17:41:33Z

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

hayata-suenaga · 2023-08-25T18:43:04Z

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 · 2023-08-25T18:50:31Z

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

melvin-bot · 2023-08-25T18:50:36Z

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

melvin-bot · 2023-08-25T18:50:41Z

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

melvin-bot · 2023-08-25T18:50:51Z

Upwork job price has been updated to $2000

hayata-suenaga · 2023-08-25T18:50:59Z

doubled the payout

dhairyasenjaliya · 2023-08-25T18:51:34Z

Proposal

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

Make it easier to delete waypionts

What is the root cause of that problem?

New feature request

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

Firstly We should add shouldShowThreeDotsButton to HeaderWithBackButton component that is being used in WaypointEditor.js
And then define below option and pass to HeaderWithBackButton
And then add

  {
        icon: Expensicons.Trashcan,
        text: 'delete',
        onSelected: () => {toggleConfirmModal()}, //example
    },

What alternative solutions did you explore? (Optional)

N/A
———————

hayata-suenaga · 2023-08-25T18:54:46Z

A proposal with the most details on how to implement this new flow will be selected

can i work on this ?

this won't work unfortunately

b4s36t4 · 2023-08-25T19:04:49Z

Proposal

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

Make it easier to delete waypionts

What is the root cause of that problem?

No RC, feature.

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

Introducing the three dot menu here

App/src/pages/iou/WaypointEditor.js

Line 116 in f48a208

<HeaderWithBackButton

in this component.
Have a variable to track weather waypoint exist or not which helps us to decide to show threeDots or not.
Register Delete Waypoint option using threedotmenuitems, on click would be starting the Confirmation flow.
Using ConfirmModal in side WayPointEditor.js
on click of confirm calling onConfirm function will be deleting waypoint data using TransactionUtils.
Once deletion Navigating user to back.
- Dismiss the modal(close)
- Navigation.goBack would take the user to back

Updates

We should also have this prop to make the popover look seamless in desktop too.
threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
We should add withWindowDimensions HOC for the above thing to work.

What alternative solutions did you explore? (Optional)

NA

allroundexperts · 2023-08-25T19:07:39Z

@hayata-suenaga I think @b4s36t4's proposal has all the necessary details. What's your opinion?

Nikhil-Vats · 2023-08-25T19:13:48Z

Proposal

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

Add option to delete waypoints

What is the root cause of that problem?

This is a new feature hence no root cause.

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

We need to make the following changes -

To add the three dots menu item, we need to pass the prop shouldShowThreeDotsButton and the threeDotsMenuItems which are the options (Delete waypoint) visible when we click on the menu here -

App/src/pages/iou/WaypointEditor.js

Lines 116 to 122 in ddb347b

    
           <HeaderWithBackButton 
        
               title={translate('distance.waypointEditor')} 
        
               shouldShowBackButton 
        
               onBackButtonPress={() => { 
        
                   Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType)); 
        
               }} 
        
           />

The menu item we need to pass is -

{
        icon: Expensicons.Trashcan,
        text: translate('common.delete'),
        onSelected: () => setIsDeleteModalOpen(true)
}

We need to use ConfirmModal in WaypointEditor with following props -

<ConfirmModal
    title={translate('distance.deleteStop')}
    isVisible={isDeleteModalOpen}
    onConfirm={confirmDeleteAndHideModal}
    onCancel={() => setIsDeleteModalOpen(false)}
    prompt={translate('distance.deleteStopConfirmation')}
    confirmText={props.translate('common.delete')}
    cancelText={props.translate('common.cancel')}
    danger
/>

In confirmDeleteAndHideModal, we can delete the waypoint using Transaction.removeWaypoint (the args we need to pass are transactionID and waypointIndex and they are already available as props in the component) -

App/src/libs/actions/Transaction.js

Line 92 in ddb347b

function removeWaypoint(transactionID, currentIndex) {

What alternative solutions did you explore? (Optional)

NA

Complete working solution video

We can create a new translation for waypoint delete confirmation -Are you sure you want to delete this stop? and for header/title of modal - Delete stop

waypoint_delete.mp4

b4s36t4 · 2023-08-25T19:16:24Z

@allroundexperts @hayata-suenaga Updated my proposal a bit.

Also a small demo of my implementation(might not cover all things, though).

Kapture.2023-08-26.at.00.45.17.mp4

Nikhil-Vats · 2023-08-25T19:16:36Z

@hayata-suenaga @allroundexperts the other proposals either don't mention how the waypoints will be deleted or mention the wrong function (which is the most important part of this issue I guess), I have correctly identified it by going through the code and checking what happens when we save an empty waypoint.

Almost, all the code needed is added exactly in my proposal so I can create a PR within 12 hours.

b4s36t4 · 2023-08-25T19:32:20Z

@Nikhil-Vats I don't feel right about your opinions. You can have your proposal very well formatted with all the details but please don't mention what is not in the others proposals. CP will decide the proposal depends on many things.

Also

Almost, all the code needed is added exactly in my proposal so I can create a PR within 12 hours.

I feel odd about this statement everyone here can do it with 2-3hrs, I have full working PR just right away with me :).

Hope I'm not making others uncomfortable here or no offense. Just trying for the equal opportunity here.

Thanks Hope you guys understand my point. :)

neonbhai · 2023-08-25T19:33:35Z

Proposal

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

Make it Easier to delete waypoints.

What is the root cause of that problem?

This is a new feature

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

Here are the steps we should take to implement this feature:

Add the shouldShowThreeDotsButton button to Header with back button component here, this will ensure we have the three dots menu.
Add a state variable on the page here to track if the modal is open. we will name it isModalVisible and set the default value false.
```
const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
```

Add the custom menu item to a const variable:

 const threeDotsMenuItems = {
     icon: Expensicons.Trashcan,
     translationKey: 'common.delete',
     action: () => setIsDeleteModalVisible(true)
 }

This has the common delete text and pressing it sets the Delete Modal Visibility to true. We will now pass this as a prop to HeaderWithBackButton:

 <HeaderWithBackButton
       threeDotsMenuItems={threeDotsMenuItems}
       ...
 />

Add the ConfirmModal component to the code here and make sure it is visible only while the variable we defined has the true value.
+

 {isDeleteModalVisible &&
 	<ConfirmModal
 		title={props.translate('waypoint.common.delete')}
 		isVisible={isDeleteModalOpen}
 		onConfirm={deleteWaypointAndHideModal}
 		onCancel={() => setIsDeleteModalVisible(false)}
 		prompt={props.translate('waypoint.common.deleteConfirmation')}
 		confirmText={props.translate('common.delete')}
 		cancelText={props.translate('common.cancel')}
 		danger
 	/>
 }

Now we will be defining the deleteWaypointAndHideModal function which will be using the removeWaypoint function from here (passing it the transactionID from props and the waypointIndex from the route params) and will hide the modal using setIsDeleteModalVisible(false)
We will be adding the translations here and here under a waypoint.common: key

What alternative solutions did you explore? (Optional)

xx

Nikhil-Vats · 2023-08-25T19:36:52Z

@hayata-suenaga @allroundexperts complete working video -
We can create a new translation for waypoint delete confirmation - Are you sure you want to delete this stop? and for header of modal also Delete stop.

waypoint_delete.mp4

PiyushChandra17 · 2023-08-30T09:24:12Z

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

melvin-bot · 2023-08-30T09:24:14Z

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

melvin-bot · 2023-08-31T00:33:45Z

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot · 2023-08-31T00:33:48Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.59-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Add option to delete stop #25984

If no regressions arise, payment will be issued on 2023-09-07. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

@allroundexperts does not require payment (Eligible for Manual Requests)
@Nikhil-Vats requires payment offer (Contributor)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

jeet-dhandha · 2023-08-31T18:00:48Z

@hayata-suenaga I apologise for my previous behaviour.

jeet-dhandha · 2023-08-31T18:01:31Z

Also i would love to know one thing if you are open to it then only. Like what was wrong in my proposal if you can tell me that.

So that moving forward i keep those things in mind.

hayata-suenaga · 2023-09-01T17:18:34Z

@hayata-suenaga I apologise for my previous behaviour.

No problem

Also i would love to know one thing if you are open to it then only. Like what was wrong in my proposal if you can tell me that.

We'd really love to give feedback to each proposal as we know how much effort contributors are putting to draft those. However, we simply don't have time to do so.

The most important part of internal engineer's job is to push features in a very fast manner. And we appreciate contributors' help with us in doing so 🙇

jeet-dhandha · 2023-09-01T17:26:59Z

@hayata-suenaga I apologise for my previous behaviour.

No problem

Also i would love to know one thing if you are open to it then only. Like what was wrong in my proposal if you can tell me that.

We'd really love to give feedback to each proposal as we know how much effort contributors are putting to draft those. However, we simply don't have time to do so.

The most important part of internal engineer's job is to push features in a very fast manner. And we appreciate contributors' help with us in doing so 🙇

I understand that and that’s why whenever you have time to review and comment on my proposal please do that, i will appreciate that.

allroundexperts · 2023-09-10T14:45:27Z

Checklist not needed here as this was a feature request.

allroundexperts · 2023-09-13T16:22:31Z

Can we have the payment summary?

Nikhil-Vats · 2023-09-19T20:42:39Z

@laurenreidexpensify this one is due for payments. Thanks :)

laurenreidexpensify · 2023-09-20T14:59:56Z

Sorry folks, I completely dropped the ball on this one. Reviewing for payment summary now.

laurenreidexpensify · 2023-09-20T15:03:26Z

Payment summary:

External issue reporter - N/A
Contributor that fixed the issue - @Nikhil-Vats - $2000, payment issued in Upwork
Contributor+ that helped on the issue and/or PR - @allroundexperts - $2000, please request in newdot

Thanks everyone!

Nikhil-Vats · 2023-09-20T15:04:07Z

@laurenreidexpensify this one also qualifies for 50% urgency bonus.

laurenreidexpensify · 2023-09-20T16:44:05Z

@Nikhil-Vats can you link the timestamp confirmation message? Thanks!

Nikhil-Vats · 2023-09-20T16:45:21Z

@laurenreidexpensify yes, this is the comment.

laurenreidexpensify · 2023-09-20T16:57:13Z

Thanks for confirming - sorry, there were a lot of off topic comments to review here!

External issue reporter - N/A
Contributor that fixed the issue - @Nikhil-Vats - $2000 + $1000 bonus, payment issued in Upwork
Contributor+ that helped on the issue and/or PR - @allroundexperts - $2000 + $1000 bonus, please request in newdot

JmillsExpensify · 2023-10-05T12:45:49Z

$3,000 payment for @allroundexperts approved based on BZ summary.

hayata-suenaga added the Daily KSv2 label Aug 24, 2023

hayata-suenaga added the Design label Aug 25, 2023

melvin-bot bot assigned shawnborton Aug 25, 2023

hayata-suenaga added Help Wanted Apply this label when an issue is open to proposals by contributors External Added to denote the issue can be worked on by a contributor labels Aug 25, 2023

melvin-bot bot changed the title ~~Make it easier to delete waypionts~~ [$1000] Make it easier to delete waypionts Aug 25, 2023

melvin-bot bot assigned laurenreidexpensify Aug 25, 2023

melvin-bot bot assigned allroundexperts Aug 25, 2023

hayata-suenaga changed the title ~~[$1000] Make it easier to delete waypionts~~ [$2000] Make it easier to delete waypionts Aug 25, 2023

Expensify locked as too heated and limited conversation to collaborators Aug 28, 2023

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Aug 28, 2023

melvin-bot bot unlocked this conversation Aug 28, 2023

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Aug 31, 2023

melvin-bot bot changed the title ~~[$2000] Make it easier to delete waypionts~~ [HOLD for payment 2023-09-07] [$2000] Make it easier to delete waypionts Aug 31, 2023

melvin-bot bot removed the Reviewing Has a PR in review label Aug 31, 2023

laurenreidexpensify closed this as completed Sep 20, 2023

laurenreidexpensify reopened this Sep 20, 2023

laurenreidexpensify closed this as completed Sep 20, 2023

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

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

Comments

hayata-suenaga commented Aug 24, 2023 • edited by melvin-bot bot Loading

iwint commented Aug 25, 2023

melvin-bot bot commented Aug 25, 2023

jeet-dhandha commented Aug 25, 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 Aug 25, 2023

hayata-suenaga commented Aug 25, 2023 • edited Loading

hayata-suenaga commented Aug 25, 2023

melvin-bot bot commented Aug 25, 2023

melvin-bot bot commented Aug 25, 2023

melvin-bot bot commented Aug 25, 2023

melvin-bot bot commented Aug 25, 2023

hayata-suenaga commented Aug 25, 2023

dhairyasenjaliya commented Aug 25, 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)

hayata-suenaga commented Aug 25, 2023 • edited Loading

A proposal with the most details on how to implement this new flow will be selected

b4s36t4 commented Aug 25, 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?

Updates

What alternative solutions did you explore? (Optional)

allroundexperts commented Aug 25, 2023

Nikhil-Vats commented Aug 25, 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)

Complete working solution video

b4s36t4 commented Aug 25, 2023

Nikhil-Vats commented Aug 25, 2023 • edited Loading

b4s36t4 commented Aug 25, 2023

neonbhai commented Aug 25, 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)

Nikhil-Vats commented Aug 25, 2023 • edited Loading

PiyushChandra17 commented Aug 30, 2023

melvin-bot bot commented Aug 30, 2023

melvin-bot bot commented Aug 31, 2023

melvin-bot bot commented Aug 31, 2023

jeet-dhandha commented Aug 31, 2023

jeet-dhandha commented Aug 31, 2023 • edited Loading

hayata-suenaga commented Sep 1, 2023

jeet-dhandha commented Sep 1, 2023

allroundexperts commented Sep 10, 2023

allroundexperts commented Sep 13, 2023

Nikhil-Vats commented Sep 19, 2023

laurenreidexpensify commented Sep 20, 2023

laurenreidexpensify commented Sep 20, 2023

Nikhil-Vats commented Sep 20, 2023

laurenreidexpensify commented Sep 20, 2023

Nikhil-Vats commented Sep 20, 2023

laurenreidexpensify commented Sep 20, 2023

JmillsExpensify commented Oct 5, 2023

hayata-suenaga commented Aug 24, 2023 •

edited by melvin-bot bot

Loading

jeet-dhandha commented Aug 25, 2023 •

edited

Loading

hayata-suenaga commented Aug 25, 2023 •

edited

Loading

dhairyasenjaliya commented Aug 25, 2023 •

edited

Loading

hayata-suenaga commented Aug 25, 2023 •

edited

Loading

b4s36t4 commented Aug 25, 2023 •

edited

Loading

Nikhil-Vats commented Aug 25, 2023 •

edited

Loading

Nikhil-Vats commented Aug 25, 2023 •

edited

Loading

neonbhai commented Aug 25, 2023 •

edited

Loading

Nikhil-Vats commented Aug 25, 2023 •

edited

Loading

jeet-dhandha commented Aug 31, 2023 •

edited

Loading