Skip to content

Add Remove button to Track distance > Map flow on web and mobile #80719

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mkzie2 wants to merge 5 commits into
base: main
Choose a base branch
from
+15 −58
Open

Add Remove button to Track distance > Map flow on web and mobile #80719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8db7da5
fix: add remove button
mkzie2 Jan 28, 2026
54146d6
Merge branch 'main' into mkzie2-issue/80278
mkzie2 Jan 29, 2026
550afdd
Merge branch 'main' into mkzie2-issue/80278
mkzie2 Jan 30, 2026
5bf6de7
fix: remove confirmation and translation
mkzie2 Jan 30, 2026
8d020c2
fix: remove unused threedots
mkzie2 Jan 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/languages/de.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7343,8 +7343,6 @@ Fordere Spesendetails wie Belege und Beschreibungen an, lege Limits und Standard
},
distance: {
addStop: 'Stopp hinzufügen',
deleteWaypoint: 'Wegpunkt löschen',
deleteWaypointConfirmation: 'Möchten Sie diesen Wegpunkt wirklich löschen?',
address: 'Adresse',
waypointDescription: {
start: 'Starten',
Expand Down
2 changes: 0 additions & 2 deletions src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7236,8 +7236,6 @@ const translations = {
},
distance: {
addStop: 'Add stop',
deleteWaypoint: 'Delete waypoint',
deleteWaypointConfirmation: 'Are you sure you want to delete this waypoint?',
address: 'Address',
waypointDescription: {
start: 'Start',
Expand Down
2 changes: 0 additions & 2 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7454,8 +7454,6 @@ ${amount} para ${merchant} - ${date}`,
},
distance: {
addStop: 'Añadir parada',
deleteWaypoint: 'Eliminar punto de ruta',
deleteWaypointConfirmation: '¿Estás seguro de que quieres eliminar este punto de ruta?',
address: 'Dirección',
waypointDescription: {
start: 'Comienzo',
Expand Down
2 changes: 0 additions & 2 deletions src/languages/fr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7355,8 +7355,6 @@ Exigez des informations de dépense comme les reçus et les descriptions, défin
},
distance: {
addStop: 'Ajouter un arrêt',
deleteWaypoint: 'Supprimer le point de passage',
deleteWaypointConfirmation: 'Êtes-vous sûr de vouloir supprimer ce point de passage ?',
address: 'Adresse',
waypointDescription: {
start: 'Commencer',
Expand Down
2 changes: 0 additions & 2 deletions src/languages/it.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7332,8 +7332,6 @@ Richiedi dettagli di spesa come ricevute e descrizioni, imposta limiti e valori
},
distance: {
addStop: 'Aggiungi fermata',
deleteWaypoint: 'Elimina punto intermedio',
deleteWaypointConfirmation: 'Sei sicuro di voler eliminare questo waypoint?',
address: 'Indirizzo',
waypointDescription: {
start: 'Inizia',
Expand Down
2 changes: 0 additions & 2 deletions src/languages/ja.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7270,8 +7270,6 @@ ${reportName}
},
distance: {
addStop: '経由地を追加',
deleteWaypoint: 'ウェイポイントを削除',
deleteWaypointConfirmation: 'このウェイポイントを削除してもよろしいですか？',
address: '住所',
waypointDescription: {
start: '開始',
Expand Down
2 changes: 0 additions & 2 deletions src/languages/nl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7315,8 +7315,6 @@ Vraag verplichte uitgavedetails zoals bonnetjes en beschrijvingen, stel limieten
},
distance: {
addStop: 'Stop toevoegen',
deleteWaypoint: 'Waypoint verwijderen',
deleteWaypointConfirmation: 'Weet je zeker dat je dit waypoint wilt verwijderen?',
address: 'Adres',
waypointDescription: {
start: 'Start',
Expand Down
2 changes: 0 additions & 2 deletions src/languages/pl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7303,8 +7303,6 @@ Wymagaj szczegółów wydatków, takich jak paragony i opisy, ustawiaj limity i
},
distance: {
addStop: 'Dodaj przystanek',
deleteWaypoint: 'Usuń punkt trasy',
deleteWaypointConfirmation: 'Czy na pewno chcesz usunąć ten punkt trasy?',
address: 'Adres',
waypointDescription: {
start: 'Start',
Expand Down
2 changes: 0 additions & 2 deletions src/languages/pt-BR.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7304,8 +7304,6 @@ Exija detalhes de despesas como recibos e descrições, defina limites e padrõe
},
distance: {
addStop: 'Adicionar parada',
deleteWaypoint: 'Excluir ponto de passagem',
deleteWaypointConfirmation: 'Tem certeza de que deseja excluir este ponto de passagem?',
address: 'Endereço',
waypointDescription: {
start: 'Iniciar',
Expand Down
2 changes: 0 additions & 2 deletions src/languages/zh-hans.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7143,8 +7143,6 @@ ${reportName}
},
distance: {
addStop: '添加站点',
deleteWaypoint: '删除航路点',
deleteWaypointConfirmation: '您确定要删除此途经点吗？',
address: '地址',
waypointDescription: {
start: '开始',
Expand Down
53 changes: 15 additions & 38 deletions src/pages/iou/request/step/IOURequestStepWaypoint.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,12 @@ import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import AddressSearch from '@components/AddressSearch';
import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
import Button from '@components/Button';
import FormProvider from '@components/Form/FormProvider';
import InputWrapperWithRef from '@components/Form/InputWrapper';
import type {FormOnyxValues} from '@components/Form/types';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import {ModalActions} from '@components/Modal/Global/ModalContext';
import ScreenWrapper from '@components/ScreenWrapper';
import useConfirmModal from '@hooks/useConfirmModal';
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useLocationBias from '@hooks/useLocationBias';
import useNetwork from '@hooks/useNetwork';
Expand Down Expand Up @@ -77,8 +75,6 @@ function IOURequestStepWaypoint({
const waypointCount = Object.keys(allWaypoints).length;
const filledWaypointCount = Object.values(allWaypoints).filter((waypoint) => !isEmptyObject(waypoint)).length;
const [caretHidden, setCaretHidden] = useState(false);
const {showConfirmModal} = useConfirmModal();
const expensifyIcons = useMemoizedLazyExpensifyIcons(['Trashcan'] as const);

const [userLocation] = useOnyx(ONYXKEYS.USER_LOCATION, {canBeMissing: true});
const [recentWaypoints] = useOnyx(ONYXKEYS.NVP_RECENT_WAYPOINTS, {selector: recentWaypointsSelector, canBeMissing: true});
Expand All @@ -95,8 +91,6 @@ function IOURequestStepWaypoint({

const locationBias = useLocationBias(allWaypoints, userLocation);
const waypointAddress = currentWaypoint.address ?? '';
// Hide the menu when there is only start and finish waypoint
const shouldShowThreeDotsButton = waypointCount > 2 && !!waypointAddress;
const shouldDisableEditor =
isFocused &&
(Number.isNaN(parsedWaypointIndex) || parsedWaypointIndex < 0 || parsedWaypointIndex > waypointCount || (filledWaypointCount < 2 && parsedWaypointIndex >= waypointCount));
Expand Down Expand Up @@ -153,26 +147,6 @@ function IOURequestStepWaypoint({
goBack();
};

const deleteStopAndHideModal = () => {
removeWaypoint(transaction, pageIndex, shouldUseTransactionDraft(action));
goBack();
};

const handleDeleteWaypoint = async () => {
const result = await showConfirmModal({
title: translate('distance.deleteWaypoint'),
prompt: translate('distance.deleteWaypointConfirmation'),
confirmText: translate('common.delete'),
cancelText: translate('common.cancel'),
shouldEnableNewFocusManagement: true,
danger: true,
});
if (result.action !== ModalActions.CONFIRM) {
return;
}
deleteStopAndHideModal();
};

const selectWaypoint = (values: Waypoint) => {
const waypoint = {
lat: values.lat,
Expand Down Expand Up @@ -215,18 +189,7 @@ function IOURequestStepWaypoint({
title={translate(waypointDescriptionKey)}
shouldShowBackButton
onBackButtonPress={goBack}
shouldShowThreeDotsButton={shouldShowThreeDotsButton}
shouldSetModalVisibility={false}
threeDotsMenuItems={[
{
icon: expensifyIcons.Trashcan,
text: translate('distance.deleteWaypoint'),
onSelected: () => {
handleDeleteWaypoint();
},
shouldCallAfterModalHide: true,
},
]}
/>
<FormProvider
style={[styles.flexGrow1, styles.mh5]}
Expand All @@ -239,6 +202,20 @@ function IOURequestStepWaypoint({
submitButtonText={translate('common.save')}
shouldHideFixErrorsAlert
onScroll={onScroll}
shouldRenderFooterAboveSubmit
footerContent={
!!waypointAddress && (
<Button
text={translate('common.remove')}
style={[styles.mb3]}
onPress={() => {
removeWaypoint(transaction, pageIndex, shouldUseTransactionDraft(action));
goBack();
}}
large
/>
)
}
>
<View>
<InputWrapperWithRef
Expand Down
Loading