Skip to content
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.

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

Modify MoneyRequestConfirmPage for Distance Request #25707

Merged
merged 116 commits into from
Sep 1, 2023
Merged
Show file tree
Hide file tree
Changes from 115 commits
Commits
Show all changes
116 commits
Select commit Hold shift + click to select a range
95f4998
feat: pass iou, iouType, report, and reportID
Aug 22, 2023
9bbd398
feat: render MapView on confirmation page
Aug 22, 2023
72015a7
chore: get transaction id
Aug 22, 2023
733a01c
feat: implement ConfirmedRoute
Aug 23, 2023
f54184b
fix: bring back transactionID prop
Aug 23, 2023
af2d584
fix: get transactionID in DistanceRequest
Aug 23, 2023
4ee061d
feat: use ConfirmedRoute in MoneyRequestConfirmPage
Aug 23, 2023
e9d3949
feat: add policyID to options object
Aug 23, 2023
ff4c5e1
Merge branch 'main' into hayata-map-on-confirmation-screen
Aug 23, 2023
4fe5ff3
Merge remote-tracking branch 'origin/main' into hayata-map-on-confirm…
Aug 23, 2023
34086ed
fix: complete ConfirmedRoute
Aug 24, 2023
9d2bcb5
feat: display distance requested items
Aug 24, 2023
e2d3d94
fix: remove map from ConfirmPage
Aug 24, 2023
eef6380
fix: check if the request is a distance request
Aug 24, 2023
ae13f9d
fix: navigation, translation, and amount calculation
Aug 24, 2023
5b8cd86
fix: change the button style
Aug 24, 2023
20b742c
refactor: create DistanceRequestUtils
Aug 24, 2023
5eb207b
refactor: clean up util functions
Aug 24, 2023
c4d139b
style: fix import path
Aug 24, 2023
2abd45c
style: remove unused import
Aug 24, 2023
837a04f
chore: mock distance request
Aug 24, 2023
3048b71
fix: add missing types to IOU
Aug 24, 2023
892d4c2
style: remove reportID from prop (get it from report)
Aug 24, 2023
73e19ee
refactor: check for distanceRequest in ParticipantsPage
Aug 24, 2023
4d72e7e
fix: remove unnecessary arguments
Aug 25, 2023
327c545
fix: add default prop value
Aug 25, 2023
972c2d0
fix: set report ID when participant is selected
Aug 25, 2023
58199fa
fix: check for distance request
Aug 25, 2023
9b1c8ec
style: change default rate to 0 for easy bug spot
Aug 25, 2023
57d6942
style: fix ESLint errors
Aug 25, 2023
3f31e60
style: extract logic for getting waypoint markers
Aug 25, 2023
fdb997c
style: fix ESLint error
Aug 25, 2023
ed4046e
style: fix ESLint warnings and errors
Aug 25, 2023
f2fcbce
feat: support offline
Aug 25, 2023
891c5e8
style: fix ESLint warning
Aug 25, 2023
55e0ba9
style: make function more readable
Aug 25, 2023
40dea40
style: use const
Aug 25, 2023
c0167aa
fix: use translation
Aug 25, 2023
656bec9
fix: remove inline style
Aug 25, 2023
66e4d1c
style: remove inline style
Aug 25, 2023
8199f92
fix: navigation on date
Aug 28, 2023
0cd7020
fix: navigation on description page
Aug 28, 2023
6fdaef8
Merge branch 'main' into hayata-map-on-confirmation-screen
Aug 28, 2023
540b3cd
fix: add back translation
Aug 28, 2023
53be182
fix: change url
Aug 28, 2023
d65ae30
fix: navigation on money amount page
Aug 28, 2023
7410a90
fix: check if distance request amount has been modified
Aug 28, 2023
f6d9144
style: use descriptive variable name
Aug 28, 2023
6665d0c
WIP call create distance request
neil-marcellini Aug 29, 2023
64ccf7d
Update params for create distance request
neil-marcellini Aug 29, 2023
61c34bd
fix: hide category
Aug 29, 2023
049d760
fix: margin
Aug 29, 2023
07b7045
style: use constants
Aug 29, 2023
ffb2597
style: use common translation keyword
Aug 29, 2023
103a7d6
fix: hide distance request if not in workspace
Aug 29, 2023
8eb66bd
fix: navigation issue on distance clicked
Aug 29, 2023
26289e5
fix: make currency uneditable
Aug 29, 2023
034131b
fix: close RHN after request save
Aug 29, 2023
3ab8897
fix: reset IOU on distance request save
Aug 30, 2023
531461b
fix: display Distance Request on global create
Aug 30, 2023
e93e94a
style: use reportID instead of report
Aug 30, 2023
031c040
style: fix ESLint error
Aug 30, 2023
35d0404
fix: add missing dependency
Aug 30, 2023
40e254e
Merge branch 'main' into hayata-map-on-confirmation-screen
Aug 30, 2023
605d1ad
fix: specify default tab
Aug 30, 2023
6000908
fix: import const
Aug 30, 2023
2a1c6f8
fix: add default ios value
Aug 30, 2023
151c98e
style: use const for map padding
Aug 30, 2023
d4d70d2
fix: move display language form const to en/es
Aug 30, 2023
d7ab640
refactor: use common translation
Aug 30, 2023
4aacd97
fix: import missing module
Aug 30, 2023
ab9de25
style: use const for marker size
Aug 30, 2023
4533e8b
fix: remove unnecessary ternary
Aug 30, 2023
bdc404d
fix: component name
Aug 30, 2023
f9dee21
style: use defined prop type
Aug 30, 2023
8e64620
fix: use enum type
Aug 30, 2023
febe630
fix: change a prop default value
Aug 30, 2023
2a9c100
fix: add comment for prop values
Aug 30, 2023
557d58a
doc: add jsdoc
Aug 30, 2023
82c9f70
doc: add jsdoc for convertDistanceUnit
Aug 30, 2023
da8c84e
style: cleanup convertDistanceUnit
Aug 30, 2023
9a90258
style: reuse existing propType
Aug 30, 2023
b1b5aea
style: cleanup selector page
Aug 30, 2023
ea1828f
fix: remove comment
Aug 30, 2023
a4ef2ce
style: clean up prop types and default props
Aug 30, 2023
edf051c
fix: change Spanish translation to the correct place
Aug 30, 2023
01877bf
fix: ESLint errors
Aug 30, 2023
c50ad59
fix: additional ESLint rules
Aug 30, 2023
fe1c429
fix: pass missing parameter
Aug 30, 2023
471b017
fix: account for null
Aug 30, 2023
8f28603
fix: don't set report
Aug 31, 2023
c3d1be3
fix: pass empty string if reportID is undefined
Aug 31, 2023
a2d946d
fix: get report id of workspace
Aug 31, 2023
b5689b6
Use goBack function to prevent modal closing
neil-marcellini Aug 31, 2023
470c54a
Enforce goBack route so that currency is set
neil-marcellini Aug 31, 2023
a8a102e
Remove extra dismiss modal call
neil-marcellini Aug 31, 2023
46437d7
Don't reset request to fix small screen dismiss
neil-marcellini Aug 31, 2023
de56adf
fix: address code review
Aug 31, 2023
2ad0edb
Merge branch 'main' into hayata-map-on-confirmation-screen
Aug 31, 2023
13adca8
Merge branch 'main' into hayata-map-on-confirmation-screen
Aug 31, 2023
872462c
Merchant and description are separate
neil-marcellini Aug 31, 2023
9117371
fix: error on text input
Aug 31, 2023
60580db
fix: participant page title
Aug 31, 2023
556b36c
fix: save calculated amount on iou
Aug 31, 2023
df9e8c8
fix: hidden button
Aug 31, 2023
4857735
Revert "fix: hidden button"
Aug 31, 2023
3aa090c
Format distance amount with currency
neil-marcellini Aug 31, 2023
82fa54e
Add getCurrencySymbol util
neil-marcellini Aug 31, 2023
12f358f
Fix distance string with currency symbol and rate
neil-marcellini Aug 31, 2023
04db489
More precise util name
neil-marcellini Aug 31, 2023
ddefdeb
fix: make amount of distance request not editable
Aug 31, 2023
1328bc4
fix: ESLint error
Aug 31, 2023
c4ad234
fix: address PR requests
Sep 1, 2023
fddfb85
fix: wrong import
Sep 1, 2023
6d687ff
Merge branch 'main' into hayata-map-on-confirmation-screen
Sep 1, 2023
b18b6d2
fix: address PR review
Sep 1, 2023
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
3 changes: 3 additions & 0 deletions src/CONST.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1370,6 +1370,9 @@ const CONST = {
MAKE_REQUEST_WITH_SIDE_EFFECTS: 'makeRequestWithSideEffects',
},

MAP_PADDING: 50,
hayata-suenaga marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This MAP_PADDING value caused the following issue:

Because the value was too high, on certain narrow layout devices (mobile) the value caused the app to crash when submitting a distance request. The issue was fixed by decreasing the value to 32 and removing / unifying the MAP_PADDING into using MAPBOX.PADDING variable instead. More details can be found in the issue / proposal.

MAP_MARKER_SIZE: 20,

QUICK_REACTIONS: [
{
name: '+1',
Expand Down
117 changes: 117 additions & 0 deletions src/components/ConfirmedRoute.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
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) => {
hayata-suenaga marked this conversation as resolved.
Show resolved Hide resolved
const numberOfWaypoints = _.size(waypoints);
const lastWaypointIndex = numberOfWaypoints - 1;
return _.filter(
_.map(waypoints, (waypoint, key) => {
if (!waypoint || waypoint.lng === undefined || waypoint.lat === undefined) {
hayata-suenaga marked this conversation as resolved.
Show resolved Hide resolved
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: () => (
<MarkerComponent
width={CONST.MAP_MARKER_SIZE}
height={CONST.MAP_MARKER_SIZE}
fill={theme.icon}
/>
),
};
}),
(waypoint) => waypoint,
);
};

function ConfirmedRoute({mapboxToken, transaction}) {
const {isOffline} = useNetwork();
const {translate} = useLocalize();
const {route0: route} = transaction.routes;
hayata-suenaga marked this conversation as resolved.
Show resolved Hide resolved
const waypoints = lodashGet(transaction, 'comment.waypoints', {});
const waypointMarkers = getWaypointMarkers(waypoints);

useEffect(() => {
MapboxToken.init();
return MapboxToken.stop;
}, []);

return (
<>
{!isOffline && mapboxToken ? (
<MapView
accessToken={mapboxToken}
mapPadding={CONST.MAP_PADDING}
pitchEnabled={false}
directionCoordinates={route.geometry.coordinates}
hayata-suenaga marked this conversation as resolved.
Show resolved Hide resolved
directionStyle={styles.mapDirection}
style={styles.mapView}
waypoints={waypointMarkers}
styleURL={CONST.MAPBOX_STYLE_URL}
/>
) : (
<View style={[styles.mapPendingView]}>
<BlockingView
icon={Expensicons.EmptyStateRoutePending}
title={translate('distance.mapPending.title')}
subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
shouldShowLink={false}
/>
</View>
)}
</>
);
}

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;
49 changes: 34 additions & 15 deletions src/components/DistanceRequest.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 with which the distance request is associated */
hayata-suenaga marked this conversation as resolved.
Show resolved Hide resolved
report: reportPropTypes,

/** The optimistic transaction for this request */
transaction: transactionPropTypes,
Expand All @@ -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);

Expand Down Expand Up @@ -95,8 +106,8 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
coordinate: [waypoint.lng, waypoint.lat],
markerComponent: () => (
<MarkerComponent
width={20}
height={20}
width={CONST.MAP_MARKER_SIZE}
height={CONST.MAP_MARKER_SIZE}
fill={theme.icon}
/>
),
Expand All @@ -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.
Expand All @@ -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]);

Expand Down Expand Up @@ -197,7 +208,7 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
<Button
small
icon={Expensicons.Plus}
onPress={() => Transaction.addStop(transactionID)}
onPress={() => Transaction.addStop(iou.transactionID)}
text={translate('distance.addStop')}
isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
innerStyles={[styles.ph10]}
Expand All @@ -207,7 +218,7 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
{!isOffline && Boolean(mapboxAccessToken.token) ? (
<MapView
accessToken={mapboxAccessToken.token}
mapPadding={MAP_PADDING}
mapPadding={CONST.MAP_PADDING}
pitchEnabled={false}
initialState={{
location: CONST.SF_COORDINATES,
Expand All @@ -230,6 +241,14 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
</View>
)}
</View>
<Button
success
style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
onPress={() => IOU.navigateToNextPage(iou, iouType, reportID, report)}
pressOnEnter
isDisabled={waypointMarkers.length < 2}
hayata-suenaga marked this conversation as resolved.
Show resolved Hide resolved
text={translate('common.next')}
/>
</>
);
}
Expand All @@ -239,7 +258,7 @@ DistanceRequest.propTypes = propTypes;
DistanceRequest.defaultProps = defaultProps;
export default withOnyx({
transaction: {
key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.transactionID}`,
key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.iou.transactionID}`,
},
mapboxAccessToken: {
hayata-suenaga marked this conversation as resolved.
Show resolved Hide resolved
key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
Expand Down
Loading