From aaf2e944c4976a68b9628e173373be0bd0f35d8a Mon Sep 17 00:00:00 2001 From: Nikhil Vats Date: Sat, 26 Aug 2023 05:53:11 +0530 Subject: [PATCH 1/6] Add option to delete stop --- src/languages/en.js | 2 ++ src/languages/es.js | 2 ++ src/pages/iou/WaypointEditor.js | 34 +++++++++++++++++++++++++++++++-- 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index 5dcb84c4e487..8ef77089cdfb 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -1612,6 +1612,8 @@ export default { }, distance: { addStop: 'Add stop', + deleteStop: 'Delete stop', + deleteStopConfirmation: 'Are you sure you want to delete this stop?', address: 'Address', waypointEditor: 'Waypoint Editor', waypointDescription: { diff --git a/src/languages/es.js b/src/languages/es.js index 9cb91261cdd5..811c4bd1d924 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -2099,6 +2099,8 @@ export default { }, distance: { addStop: 'Agregar parada', + deleteStop: 'Delete stop', + deleteStopConfirmation: 'Are you sure you want to delete this stop?', address: 'Dirección', waypointEditor: 'Editor de puntos de ruta', waypointDescription: { diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js index a3f8f40f5372..cab239055abf 100644 --- a/src/pages/iou/WaypointEditor.js +++ b/src/pages/iou/WaypointEditor.js @@ -1,4 +1,4 @@ -import React, {useRef} from 'react'; +import React, {useRef, useState} from 'react'; import lodashGet from 'lodash/get'; import {View} from 'react-native'; import PropTypes from 'prop-types'; @@ -11,7 +11,10 @@ import ONYXKEYS from '../../ONYXKEYS'; import Form from '../../components/Form'; import styles from '../../styles/styles'; import compose from '../../libs/compose'; +import withWindowDimensions from '../../components/withWindowDimensions'; import CONST from '../../CONST'; +import * as Expensicons from '../../components/Icon/Expensicons'; +import ConfirmModal from '../../components/ConfirmModal'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import * as Transaction from '../../libs/actions/Transaction'; import * as ValidationUtils from '../../libs/ValidationUtils'; @@ -53,8 +56,9 @@ const defaultProps = { transaction: {}, }; -function WaypointEditor({transactionID, route: {params: {iouType = '', waypointIndex = ''} = {}} = {}, network, translate, transaction}) { +function WaypointEditor({transactionID, route: {params: {iouType = '', waypointIndex = ''} = {}} = {}, network, translate, transaction, windowWidth}) { const textInput = useRef(null); + const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false); const currentWaypoint = lodashGet(transaction, `comment.waypoints.waypoint${waypointIndex}`, {}); const waypointAddress = lodashGet(currentWaypoint, 'address', ''); @@ -96,6 +100,12 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType)); }; + const confirmDeleteStopAndHideModal = () => { + Transaction.removeWaypoint(transactionID, waypointIndex); + setIsDeleteStopModalOpen(false); + Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType)); + }; + const selectWaypoint = (values) => { const waypoint = { lat: values.lat, @@ -119,6 +129,25 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI onBackButtonPress={() => { Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType)); }} + shouldShowThreeDotsButton + threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)} + threeDotsMenuItems={[ + { + icon: Expensicons.Trashcan, + text: translate('distance.deleteStop'), + onSelected: () => setIsDeleteStopModalOpen(true), + }, + ]} + /> + setIsDeleteStopModalOpen(false)} + prompt={translate('distance.deleteStopConfirmation')} + confirmText={translate('common.delete')} + cancelText={translate('common.cancel')} + danger />
`${ONYXKEYS.COLLECTION.TRANSACTION}${props.transactionID}`, From 35432fe615aa66f711f12c5e90c142b7cbfb5d31 Mon Sep 17 00:00:00 2001 From: Nikhil Vats Date: Sat, 26 Aug 2023 06:30:56 +0530 Subject: [PATCH 2/6] Hide the menu on start and finish endpoint --- src/languages/en.js | 4 ++-- src/languages/es.js | 4 ++-- src/pages/iou/WaypointEditor.js | 12 ++++++++---- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index 8ef77089cdfb..5c8a13f4feeb 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -1612,8 +1612,8 @@ export default { }, distance: { addStop: 'Add stop', - deleteStop: 'Delete stop', - deleteStopConfirmation: 'Are you sure you want to delete this stop?', + deleteWaypoint: 'Delete waypoint', + deleteWaypointConfirmation: 'Are you sure you want to delete this waypoint?', address: 'Address', waypointEditor: 'Waypoint Editor', waypointDescription: { diff --git a/src/languages/es.js b/src/languages/es.js index 811c4bd1d924..bb8ec02ef65f 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -2099,8 +2099,8 @@ export default { }, distance: { addStop: 'Agregar parada', - deleteStop: 'Delete stop', - deleteStopConfirmation: 'Are you sure you want to delete this stop?', + deleteWaypoint: 'Delete waypoint', + deleteWaypointConfirmation: 'Are you sure you want to delete this waypoint?', address: 'Dirección', waypointEditor: 'Editor de puntos de ruta', waypointDescription: { diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js index cab239055abf..fd9b3c0d181e 100644 --- a/src/pages/iou/WaypointEditor.js +++ b/src/pages/iou/WaypointEditor.js @@ -1,3 +1,4 @@ +import _ from 'underscore'; import React, {useRef, useState} from 'react'; import lodashGet from 'lodash/get'; import {View} from 'react-native'; @@ -61,6 +62,9 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false); const currentWaypoint = lodashGet(transaction, `comment.waypoints.waypoint${waypointIndex}`, {}); const waypointAddress = lodashGet(currentWaypoint, 'address', ''); + const totalWaypoints = _.size(lodashGet(transaction, 'comment.waypoints', {})); + // Hide the menu when there is only start and finish waypoint + const shouldShowThreeDotsButton = totalWaypoints !== 2; const validate = (values) => { const errors = {}; @@ -129,22 +133,22 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI onBackButtonPress={() => { Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType)); }} - shouldShowThreeDotsButton + shouldShowThreeDotsButton={shouldShowThreeDotsButton} threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)} threeDotsMenuItems={[ { icon: Expensicons.Trashcan, - text: translate('distance.deleteStop'), + text: translate('distance.deleteWaypoint'), onSelected: () => setIsDeleteStopModalOpen(true), }, ]} /> setIsDeleteStopModalOpen(false)} - prompt={translate('distance.deleteStopConfirmation')} + prompt={translate('distance.deleteWaypointConfirmation')} confirmText={translate('common.delete')} cancelText={translate('common.cancel')} danger From 6cf66adc50b683f6d929d664f6fad0dad3d1a96b Mon Sep 17 00:00:00 2001 From: Nikhil Vats Date: Sun, 27 Aug 2023 23:54:36 +0530 Subject: [PATCH 3/6] Change method name --- src/pages/iou/WaypointEditor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js index fd9b3c0d181e..699100e229f5 100644 --- a/src/pages/iou/WaypointEditor.js +++ b/src/pages/iou/WaypointEditor.js @@ -104,7 +104,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType)); }; - const confirmDeleteStopAndHideModal = () => { + const deleteStopAndHideModal = () => { Transaction.removeWaypoint(transactionID, waypointIndex); setIsDeleteStopModalOpen(false); Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType)); @@ -146,7 +146,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI setIsDeleteStopModalOpen(false)} prompt={translate('distance.deleteWaypointConfirmation')} confirmText={translate('common.delete')} From ab468b14b6f536ff0fd464312cbc6ff0466b41f6 Mon Sep 17 00:00:00 2001 From: Nikhil Vats Date: Mon, 28 Aug 2023 14:15:30 +0530 Subject: [PATCH 4/6] Use hooks instead of HOC --- src/pages/iou/WaypointEditor.js | 45 +++++++++++++-------------------- 1 file changed, 18 insertions(+), 27 deletions(-) diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js index 699100e229f5..3c9c9ca918a2 100644 --- a/src/pages/iou/WaypointEditor.js +++ b/src/pages/iou/WaypointEditor.js @@ -11,17 +11,15 @@ import Navigation from '../../libs/Navigation/Navigation'; import ONYXKEYS from '../../ONYXKEYS'; import Form from '../../components/Form'; import styles from '../../styles/styles'; -import compose from '../../libs/compose'; -import withWindowDimensions from '../../components/withWindowDimensions'; +import useWindowDimensions from '../../hooks/useWindowDimensions'; +import useLocalize from '../../hooks/useLocalize'; +import useNetwork from '../../hooks/useNetwork'; import CONST from '../../CONST'; import * as Expensicons from '../../components/Icon/Expensicons'; import ConfirmModal from '../../components/ConfirmModal'; -import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import * as Transaction from '../../libs/actions/Transaction'; import * as ValidationUtils from '../../libs/ValidationUtils'; import ROUTES from '../../ROUTES'; -import {withNetwork} from '../../components/OnyxProvider'; -import networkPropTypes from '../../components/networkPropTypes'; import transactionPropTypes from '../../components/transactionPropTypes'; const propTypes = { @@ -41,11 +39,6 @@ const propTypes = { /** The optimistic transaction for this request */ transaction: transactionPropTypes, - - /** Information about the network */ - network: networkPropTypes.isRequired, - - ...withLocalizePropTypes, }; const defaultProps = { @@ -57,25 +50,28 @@ const defaultProps = { transaction: {}, }; -function WaypointEditor({transactionID, route: {params: {iouType = '', waypointIndex = ''} = {}} = {}, network, translate, transaction, windowWidth}) { +function WaypointEditor({transactionID, route: {params: {iouType = '', waypointIndex = ''} = {}} = {}, transaction}) { + const {windowWidth} = useWindowDimensions(); + const {translate} = useLocalize(); + const {isOffline} = useNetwork(); const textInput = useRef(null); const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false); const currentWaypoint = lodashGet(transaction, `comment.waypoints.waypoint${waypointIndex}`, {}); const waypointAddress = lodashGet(currentWaypoint, 'address', ''); const totalWaypoints = _.size(lodashGet(transaction, 'comment.waypoints', {})); // Hide the menu when there is only start and finish waypoint - const shouldShowThreeDotsButton = totalWaypoints !== 2; + const shouldShowThreeDotsButton = totalWaypoints > 2; const validate = (values) => { const errors = {}; const waypointValue = values[`waypoint${waypointIndex}`] || ''; - if (network.isOffline && waypointValue !== '' && !ValidationUtils.isValidAddress(waypointValue)) { + if (isOffline && waypointValue !== '' && !ValidationUtils.isValidAddress(waypointValue)) { errors[`waypoint${waypointIndex}`] = 'bankAccount.error.address'; } // If the user is online and they are trying to save a value without using the autocomplete, show an error message instructing them to use a selected address instead. // That enables us to save the address with coordinates when it is selected - if (!network.isOffline && waypointValue !== '') { + if (!isOffline && waypointValue !== '') { errors[`waypoint${waypointIndex}`] = 'distance.errors.selectSuggestedAddress'; } @@ -92,7 +88,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI // While the user is offline, the auto-complete address search will not work // Therefore, we're going to save the waypoint as just the address, and the lat/long will be filled in on the backend - if (network.isOffline && waypointValue) { + if (isOffline && waypointValue) { const waypoint = { address: waypointValue, }; @@ -167,7 +163,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI (textInput.current = e)} - hint={!network.isOffline ? translate('distance.errors.selectSuggestedAddress') : ''} + hint={!isOffline ? translate('distance.errors.selectSuggestedAddress') : ''} containerStyles={[styles.mt4]} label={translate('distance.address')} defaultValue={waypointAddress} @@ -194,14 +190,9 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI WaypointEditor.displayName = 'WaypointEditor'; WaypointEditor.propTypes = propTypes; WaypointEditor.defaultProps = defaultProps; -export default compose( - withLocalize, - withNetwork(), - withWindowDimensions, - withOnyx({ - transaction: { - key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.transactionID}`, - selector: (transaction) => (transaction ? {transactionID: transaction.transactionID, comment: {waypoints: lodashGet(transaction, 'comment.waypoints')}} : null), - }, - }), -)(WaypointEditor); +export default withOnyx({ + transaction: { + key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.transactionID}`, + selector: (transaction) => (transaction ? {transactionID: transaction.transactionID, comment: {waypoints: lodashGet(transaction, 'comment.waypoints')}} : null), + }, +})(WaypointEditor); From 52275f8c35fe773be59f2c6dd32e2ab9d193ec96 Mon Sep 17 00:00:00 2001 From: Nikhil Vats Date: Mon, 28 Aug 2023 20:44:58 +0530 Subject: [PATCH 5/6] Add translation for spanish --- src/languages/es.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/languages/es.js b/src/languages/es.js index 9ae6d9c7d867..8aa1d27930d8 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -2099,8 +2099,8 @@ export default { }, distance: { addStop: 'Agregar parada', - deleteWaypoint: 'Delete waypoint', - deleteWaypointConfirmation: 'Are you sure you want to delete this waypoint?', + deleteWaypoint: 'Eliminar punto de ruta', + deleteWaypointConfirmation: '¿Estás seguro de que quieres eliminar este punto de ruta?', address: 'Dirección', waypointEditor: 'Editor de puntos de ruta', waypointDescription: { From bdc6ca37abbf47849a1f560f26554814ac5cf569 Mon Sep 17 00:00:00 2001 From: Nikhil Vats Date: Mon, 28 Aug 2023 20:58:15 +0530 Subject: [PATCH 6/6] Destructure props --- src/pages/iou/WaypointEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js index 3c9c9ca918a2..2d130a4e7782 100644 --- a/src/pages/iou/WaypointEditor.js +++ b/src/pages/iou/WaypointEditor.js @@ -192,7 +192,7 @@ WaypointEditor.propTypes = propTypes; WaypointEditor.defaultProps = defaultProps; export default withOnyx({ transaction: { - key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.transactionID}`, + key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, selector: (transaction) => (transaction ? {transactionID: transaction.transactionID, comment: {waypoints: lodashGet(transaction, 'comment.waypoints')}} : null), }, })(WaypointEditor);