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.

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

fix: Distance – show "Add stop" button only when start & finish are filled #31017

Merged
merged 6 commits into from
Nov 10, 2023
Merged

fix: Distance – show "Add stop" button only when start & finish are filled #31017

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2970126
Show the "Add stop" button only if 2+ waypoints are filled
paultsimura Oct 30, 2023
561ef19
Merge branch 'main' into fix/29886-distance-stop-button
paultsimura Nov 7, 2023
b8d20d0
Align online & offline "Add stop" flows
paultsimura Nov 7, 2023
248b6b6
Merge branch 'main' into fix/29886-distance-stop-button
paultsimura Nov 7, 2023
d4fe698
Prevent from adding an extra stop from a deeplink;
paultsimura Nov 8, 2023
5671ea4
Rename waypoints -> waypoint
paultsimura Nov 8, 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
23 changes: 13 additions & 10 deletions src/components/DistanceRequest/DistanceRequestFooter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
const {translate} = useLocalize();

const numberOfWaypoints = _.size(waypoints);
const numberOfFilledWaypoints = _.size(_.filter(waypoints, (waypoint) => !_.isEmpty(waypoint)));
const lastWaypointIndex = numberOfWaypoints - 1;

const waypointMarkers = useMemo(
Expand Down Expand Up @@ -98,16 +99,18 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig

return (
<>
<View style={[styles.flexRow, styles.justifyContentCenter, styles.pt1]}>
<Button
small
icon={Expensicons.Plus}
onPress={() => navigateToWaypointEditPage(_.size(lodashGet(transaction, 'comment.waypoints', {})))}
text={translate('distance.addStop')}
isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
innerStyles={[styles.ph10]}
/>
</View>
{numberOfFilledWaypoints >= 2 && (
<View style={[styles.flexRow, styles.justifyContentCenter, styles.pt1]}>
<Button
small
icon={Expensicons.Plus}
onPress={() => navigateToWaypointEditPage(_.size(lodashGet(transaction, 'comment.waypoints', {})))}
text={translate('distance.addStop')}
isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
innerStyles={[styles.ph10]}
/>
</View>
)}
<View style={styles.mapViewContainer}>
{!isOffline && Boolean(mapboxAccessToken.token) ? (
<DistanceMapView
Expand Down
36 changes: 16 additions & 20 deletions src/pages/iou/WaypointEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const propTypes = {
geometry: PropTypes.shape({
/** Data about the location */
location: PropTypes.shape({
/** Lattitude of the location */
/** Latitude of the location */
lat: PropTypes.number,

/** Longitude of the location */
Expand Down Expand Up @@ -86,25 +86,29 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
const textInput = useRef(null);
const parsedWaypointIndex = parseInt(waypointIndex, 10);
const allWaypoints = lodashGet(transaction, 'comment.waypoints', {});
const waypointCount = _.keys(allWaypoints).length;
const currentWaypoint = lodashGet(allWaypoints, `waypoint${waypointIndex}`, {});

const wayPointDescriptionKey = useMemo(() => {
const waypointsCount = _.size(allWaypoints);
paultsimura marked this conversation as resolved.
Show resolved Hide resolved
const filledWaypointsCount = _.size(_.filter(allWaypoints, (waypoint) => !_.isEmpty(waypoint)));
paultsimura marked this conversation as resolved.
Show resolved Hide resolved

const waypointDescriptionKey = useMemo(() => {
switch (parsedWaypointIndex) {
case 0:
return 'distance.waypointDescription.start';
case waypointCount - 1:
case waypointsCount - 1:
return 'distance.waypointDescription.finish';
default:
return 'distance.waypointDescription.stop';
}
}, [parsedWaypointIndex, waypointCount]);
}, [parsedWaypointIndex, waypointsCount]);

const waypointAddress = lodashGet(currentWaypoint, 'address', '');
const isEditingWaypoint = Boolean(threadReportID);
const totalWaypoints = _.size(lodashGet(transaction, 'comment.waypoints', {}));
// Hide the menu when there is only start and finish waypoint
const shouldShowThreeDotsButton = totalWaypoints > 2;
const shouldShowThreeDotsButton = waypointsCount > 2;
const shouldDisableEditor =
isFocused &&
(Number.isNaN(parsedWaypointIndex) || parsedWaypointIndex < 0 || parsedWaypointIndex > waypointsCount || (filledWaypointsCount < 2 && parsedWaypointIndex >= waypointsCount));

const validate = (values) => {
const errors = {};
Expand All @@ -113,7 +117,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
ErrorUtils.addErrorMessage(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.
// 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 (!isOffline && waypointValue !== '' && waypointAddress !== waypointValue) {
ErrorUtils.addErrorMessage(errors, `waypoint${waypointIndex}`, 'distance.errors.selectSuggestedAddress');
Expand All @@ -122,15 +126,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
return errors;
};

const saveWaypoint = (waypoint) => {
if (parsedWaypointIndex < _.size(allWaypoints)) {
Transaction.saveWaypoint(transactionID, waypointIndex, waypoint);
} else {
const finishWaypoint = lodashGet(allWaypoints, `waypoint${_.size(allWaypoints) - 1}`, {});
Transaction.saveWaypoint(transactionID, waypointIndex, finishWaypoint);
Transaction.saveWaypoint(transactionID, waypointIndex - 1, waypoint);
}
};
const saveWaypoint = (waypoint) => Transaction.saveWaypoint(transactionID, waypointIndex, waypoint, isEditingWaypoint);

const submit = (values) => {
const waypointValue = values[`waypoint${waypointIndex}`] || '';
Expand Down Expand Up @@ -168,7 +164,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
address: values.address,
name: values.name,
};
Transaction.saveWaypoint(transactionID, waypointIndex, waypoint, isEditingWaypoint);
saveWaypoint(waypoint);

if (isEditingWaypoint) {
Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(threadReportID));
Expand All @@ -184,9 +180,9 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
shouldEnableMaxHeight
testID={WaypointEditor.displayName}
>
<FullPageNotFoundView shouldShow={(Number.isNaN(parsedWaypointIndex) || parsedWaypointIndex < 0 || parsedWaypointIndex > waypointCount) && isFocused}>
<FullPageNotFoundView shouldShow={shouldDisableEditor}>
<HeaderWithBackButton
title={translate(wayPointDescriptionKey)}
title={translate(waypointDescriptionKey)}
shouldShowBackButton
onBackButtonPress={() => {
Navigation.goBack(ROUTES.MONEY_REQUEST_DISTANCE_TAB.getRoute(iouType));
Expand Down
Loading