diff --git a/src/CONST.ts b/src/CONST.ts
index 57903e64abcd..9aef93f1a1b8 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1370,6 +1370,9 @@ const CONST = {
MAKE_REQUEST_WITH_SIDE_EFFECTS: 'makeRequestWithSideEffects',
},
+ MAP_PADDING: 50,
+ MAP_MARKER_SIZE: 20,
+
QUICK_REACTIONS: [
{
name: '+1',
diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
new file mode 100644
index 000000000000..07d0fdc6ca97
--- /dev/null
+++ b/src/components/ConfirmedRoute.js
@@ -0,0 +1,118 @@
+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import MapView from 'react-native-x-maps';
+import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
+import _ from 'underscore';
+import ONYXKEYS from '../ONYXKEYS';
+import CONST from '../CONST';
+import * as MapboxToken from '../libs/actions/MapboxToken';
+import * as Expensicons from './Icon/Expensicons';
+import theme from '../styles/themes/default';
+import styles from '../styles/styles';
+import transactionPropTypes from './transactionPropTypes';
+import BlockingView from './BlockingViews/BlockingView';
+import useNetwork from '../hooks/useNetwork';
+import useLocalize from '../hooks/useLocalize';
+
+const propTypes = {
+ /** Transaction that stores the distance request data */
+ transaction: transactionPropTypes,
+
+ /** Token needed to render the map */
+ mapboxToken: PropTypes.string,
+};
+
+const defaultProps = {
+ transaction: {},
+ mapboxToken: '',
+};
+
+const getWaypointMarkers = (waypoints) => {
+ const numberOfWaypoints = _.size(waypoints);
+ const lastWaypointIndex = numberOfWaypoints - 1;
+ return _.filter(
+ _.map(waypoints, (waypoint, key) => {
+ if (!waypoint || waypoint.lng === undefined || waypoint.lat === undefined) {
+ return;
+ }
+
+ const index = Number(key.replace('waypoint', ''));
+ let MarkerComponent;
+ if (index === 0) {
+ MarkerComponent = Expensicons.DotIndicatorUnfilled;
+ } else if (index === lastWaypointIndex) {
+ MarkerComponent = Expensicons.Location;
+ } else {
+ MarkerComponent = Expensicons.DotIndicator;
+ }
+
+ return {
+ coordinate: [waypoint.lng, waypoint.lat],
+ markerComponent: () => (
+
+ ),
+ };
+ }),
+ (waypoint) => waypoint,
+ );
+};
+
+function ConfirmedRoute({mapboxToken, transaction}) {
+ const {isOffline} = useNetwork();
+ const {translate} = useLocalize();
+ const {route0: route} = transaction.routes || {};
+ const waypoints = lodashGet(transaction, 'comment.waypoints', {});
+ const coordinates = lodashGet(route, 'geometry.coordinates', []);
+ const waypointMarkers = getWaypointMarkers(waypoints);
+
+ useEffect(() => {
+ MapboxToken.init();
+ return MapboxToken.stop;
+ }, []);
+
+ return (
+ <>
+ {!isOffline && mapboxToken ? (
+
+ ) : (
+
+
+
+ )}
+
+ );
+}
+
+export default withOnyx({
+ transaction: {
+ key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
+ },
+ mapboxToken: {
+ key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
+ selector: (mapboxAccessToken) => mapboxAccessToken && mapboxAccessToken.token,
+ },
+})(ConfirmedRoute);
+
+ConfirmedRoute.displayName = 'ConfirmedRoute';
+ConfirmedRoute.propTypes = propTypes;
+ConfirmedRoute.defaultProps = defaultProps;
diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 55e339b63382..9ba5fd76a95a 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -23,20 +23,28 @@ import useNetwork from '../hooks/useNetwork';
import useLocalize from '../hooks/useLocalize';
import Navigation from '../libs/Navigation/Navigation';
import ROUTES from '../ROUTES';
+import * as IOU from '../libs/actions/IOU';
+import reportPropTypes from '../pages/reportPropTypes';
import transactionPropTypes from './transactionPropTypes';
import DotIndicatorMessage from './DotIndicatorMessage';
import * as ErrorUtils from '../libs/ErrorUtils';
import usePrevious from '../hooks/usePrevious';
+import {iouPropTypes} from '../pages/iou/propTypes';
const MAX_WAYPOINTS = 25;
const MAX_WAYPOINTS_TO_DISPLAY = 4;
-const MAP_PADDING = 50;
const DEFAULT_ZOOM_LEVEL = 10;
const propTypes = {
- /** The transactionID of this request */
- transactionID: PropTypes.string,
+ /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+ iou: iouPropTypes,
+
+ /** Type of money request (i.e. IOU) */
+ iouType: PropTypes.oneOf(_.values(CONST.IOU.MONEY_REQUEST_TYPE)),
+
+ /** The report to which the distance request is associated */
+ report: reportPropTypes,
/** The optimistic transaction for this request */
transaction: transactionPropTypes,
@@ -52,18 +60,21 @@ const propTypes = {
};
const defaultProps = {
- transactionID: '',
+ iou: {},
+ iouType: '',
+ report: {},
transaction: {},
mapboxAccessToken: {},
};
-function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
+function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken}) {
const [shouldShowGradient, setShouldShowGradient] = useState(false);
const [scrollContainerHeight, setScrollContainerHeight] = useState(0);
const [scrollContentHeight, setScrollContentHeight] = useState(0);
const {isOffline} = useNetwork();
const {translate} = useLocalize();
+ const reportID = lodashGet(report, 'reportID', '');
const waypoints = lodashGet(transaction, 'comment.waypoints', {});
const numberOfWaypoints = _.size(waypoints);
@@ -95,8 +106,8 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
coordinate: [waypoint.lng, waypoint.lat],
markerComponent: () => (
),
@@ -115,12 +126,12 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
}, []);
useEffect(() => {
- if (!transactionID || !_.isEmpty(waypoints)) {
+ if (!iou.transactionID || !_.isEmpty(waypoints)) {
return;
}
// Create the initial start and stop waypoints
- Transaction.createInitialWaypoints(transactionID);
- }, [transactionID, waypoints]);
+ Transaction.createInitialWaypoints(iou.transactionID);
+ }, [iou.transactionID, waypoints]);
const updateGradientVisibility = (event = {}) => {
// If a waypoint extends past the bottom of the visible area show the gradient, else hide it.
@@ -133,8 +144,8 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
return;
}
- Transaction.getRoute(transactionID, waypoints);
- }, [shouldFetchRoute, transactionID, waypoints, isOffline]);
+ Transaction.getRoute(iou.transactionID, waypoints);
+ }, [shouldFetchRoute, iou.transactionID, waypoints, isOffline]);
useEffect(updateGradientVisibility, [scrollContainerHeight, scrollContentHeight]);
@@ -197,7 +208,7 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {