From 935591acdbd0538c1a27baf258c00f33b463e54c Mon Sep 17 00:00:00 2001 From: truph01 Date: Fri, 20 Dec 2024 01:11:22 +0700 Subject: [PATCH 1/9] feat: add distance label --- .../DistanceRequest/DistanceRequestFooter.tsx | 1 + .../MapView/MapViewImpl.website.tsx | 32 +++++++++++++++++++ src/components/MapView/MapViewTypes.ts | 2 ++ src/libs/DistanceRequestUtils.ts | 6 ++++ 4 files changed, 41 insertions(+) diff --git a/src/components/DistanceRequest/DistanceRequestFooter.tsx b/src/components/DistanceRequest/DistanceRequestFooter.tsx index 8a4455e02bd6..d25037ec808a 100644 --- a/src/components/DistanceRequest/DistanceRequestFooter.tsx +++ b/src/components/DistanceRequest/DistanceRequestFooter.tsx @@ -114,6 +114,7 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig waypoints={waypointMarkers} styleURL={CONST.MAPBOX.STYLE_URL} overlayStyle={styles.mapEditView} + distance={TransactionUtils.getDistanceInMeters(transaction, 'km')} /> diff --git a/src/components/MapView/MapViewImpl.website.tsx b/src/components/MapView/MapViewImpl.website.tsx index 611c1b117fbf..31fdf0365a58 100644 --- a/src/components/MapView/MapViewImpl.website.tsx +++ b/src/components/MapView/MapViewImpl.website.tsx @@ -16,6 +16,7 @@ import usePrevious from '@hooks/usePrevious'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import DistanceRequestUtils from '@libs/DistanceRequestUtils'; import type {GeolocationErrorCallback} from '@libs/getCurrentPosition/getCurrentPosition.types'; import {GeolocationErrorCode} from '@libs/getCurrentPosition/getCurrentPosition.types'; import * as UserLocation from '@userActions/UserLocation'; @@ -42,6 +43,7 @@ const MapViewImpl = forwardRef( directionCoordinates, initialState = {location: CONST.MAPBOX.DEFAULT_COORDINATE, zoom: CONST.MAPBOX.DEFAULT_ZOOM}, interactive = true, + distance, }, ref, ) => { @@ -232,6 +234,20 @@ const MapViewImpl = forwardRef( }; }, [waypoints, directionCoordinates, interactive, currentPosition, initialState.zoom]); + const distanceSymbolCoorinate = useMemo(() => { + const length = directionCoordinates?.length; + // If the array is empty, return undefined + if (!length) { + return undefined; + } + + // Find the index of the middle element + const middleIndex = Math.floor(length / 2); + + // Return the middle element + return directionCoordinates.at(middleIndex); + }, [directionCoordinates]); + return !isOffline && !!accessToken && !!initialViewState ? ( ( )} + {!!distanceSymbolCoorinate && !!distance && ( + + + + {DistanceRequestUtils.getDistanceForDisplayLabel(distance, CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS)} + {DistanceRequestUtils.getDistanceForDisplayLabel(distance, CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES)} + + + + )} {waypoints?.map(({coordinate, markerComponent, id}) => { const MarkerComponent = markerComponent; if (utils.areSameCoordinate([coordinate[0], coordinate[1]], [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0]) && interactive) { diff --git a/src/components/MapView/MapViewTypes.ts b/src/components/MapView/MapViewTypes.ts index 41170694c9d2..14104f79779b 100644 --- a/src/components/MapView/MapViewTypes.ts +++ b/src/components/MapView/MapViewTypes.ts @@ -22,6 +22,8 @@ type MapViewProps = { onMapReady?: () => void; // Whether the map is interactable or not interactive?: boolean; + + distance?: number; }; type DirectionProps = { diff --git a/src/libs/DistanceRequestUtils.ts b/src/libs/DistanceRequestUtils.ts index fe40ea67f905..31d838af69d6 100644 --- a/src/libs/DistanceRequestUtils.ts +++ b/src/libs/DistanceRequestUtils.ts @@ -202,6 +202,11 @@ function getDistanceForDisplay( return `${distanceInUnits} ${unitString}`; } +function getDistanceForDisplayLabel(distanceInMeters: number, unit: Unit): string { + const distanceInUnits = getRoundedDistanceInUnits(distanceInMeters, unit); + return `${distanceInUnits} ${unit}`; +} + /** * @param hasRoute Whether the route exists for the distance expense * @param distanceInMeters Distance traveled @@ -394,6 +399,7 @@ export default { getUpdatedDistanceUnit, getRate, getRateByCustomUnitRateID, + getDistanceForDisplayLabel, }; export type {MileageRate}; From 988005f8e29ffdd12d90563f87d155ea018710cb Mon Sep 17 00:00:00 2001 From: truph01 Date: Wed, 15 Jan 2025 17:30:42 +0700 Subject: [PATCH 2/9] fix: style web --- src/components/MapView/MapViewImpl.website.tsx | 8 +++----- src/styles/index.ts | 10 ++++++++++ 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/MapView/MapViewImpl.website.tsx b/src/components/MapView/MapViewImpl.website.tsx index 31fdf0365a58..cdeee9b4b7da 100644 --- a/src/components/MapView/MapViewImpl.website.tsx +++ b/src/components/MapView/MapViewImpl.website.tsx @@ -280,11 +280,9 @@ const MapViewImpl = forwardRef( latitude={distanceSymbolCoorinate.at(1) ?? 0} > - - {DistanceRequestUtils.getDistanceForDisplayLabel(distance, CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS)} - {DistanceRequestUtils.getDistanceForDisplayLabel(distance, CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES)} + + {DistanceRequestUtils.getDistanceForDisplayLabel(distance, CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS)} + {DistanceRequestUtils.getDistanceForDisplayLabel(distance, CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES)} diff --git a/src/styles/index.ts b/src/styles/index.ts index d01aef6469f4..56146a0fa883 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4005,6 +4005,16 @@ const styles = (theme: ThemeColors) => paddingVertical: 8, borderRadius: variables.componentBorderRadiusMedium, }, + distanceLabelWrapper: { + backgroundColor: colors.green400, + paddingHorizontal: 8, + paddingVertical: 4, + borderRadius: 4, + textAlign: 'center', + fontSize: 13, + fontWeight: FontUtils.fontWeight.bold, + color: colors.productLight100, + }, productTrainingTooltipWrapper: { backgroundColor: theme.tooltipHighlightBG, From cbc63c1a690c9bc5555a71108ddc75b7e24c8476 Mon Sep 17 00:00:00 2001 From: truph01 Date: Tue, 21 Jan 2025 18:20:29 +0700 Subject: [PATCH 3/9] fix: toggle distance unit onpress --- .../DistanceRequest/DistanceRequestFooter.tsx | 20 ++++-- src/components/MapView/MapView.tsx | 67 ++++++++++++++++++- .../MapView/MapViewImpl.website.tsx | 31 +++++++-- src/components/MapView/MapViewTypes.ts | 7 +- .../request/step/IOURequestStepDistance.tsx | 1 + src/styles/index.ts | 2 + 6 files changed, 115 insertions(+), 13 deletions(-) diff --git a/src/components/DistanceRequest/DistanceRequestFooter.tsx b/src/components/DistanceRequest/DistanceRequestFooter.tsx index d25037ec808a..56539a998f94 100644 --- a/src/components/DistanceRequest/DistanceRequestFooter.tsx +++ b/src/components/DistanceRequest/DistanceRequestFooter.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useMemo} from 'react'; import type {ReactNode} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import Button from '@components/Button'; import DistanceMapView from '@components/DistanceMapView'; @@ -11,10 +11,12 @@ import type {WayPoint} from '@components/MapView/MapViewTypes'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import DistanceRequestUtils from '@libs/DistanceRequestUtils'; +import {getPersonalPolicy, getPolicy} from '@libs/PolicyUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {MapboxAccessToken} from '@src/types/onyx'; +import type {MapboxAccessToken, Policy} from '@src/types/onyx'; import type {WaypointCollection} from '@src/types/onyx/Transaction'; import type Transaction from '@src/types/onyx/Transaction'; import type IconAsset from '@src/types/utils/IconAsset'; @@ -35,16 +37,25 @@ type DistanceRequestFooterProps = DistanceRequestFooterOnyxProps & { /** The transaction being interacted with */ transaction: OnyxEntry; + + /** The policy */ + policy: OnyxEntry; }; -function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navigateToWaypointEditPage}: DistanceRequestFooterProps) { +function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navigateToWaypointEditPage, policy}: DistanceRequestFooterProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); + const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID); + const activePolicy = getPolicy(activePolicyID); const numberOfWaypoints = Object.keys(waypoints ?? {}).length; const numberOfFilledWaypoints = Object.values(waypoints ?? {}).filter((waypoint) => waypoint?.address).length; const lastWaypointIndex = numberOfWaypoints - 1; + const defaultMileageRate = DistanceRequestUtils.getDefaultMileageRate(policy ?? activePolicy); + const policyCurrency = (policy ?? activePolicy)?.outputCurrency ?? getPersonalPolicy()?.outputCurrency ?? CONST.CURRENCY.USD; + const mileageRate = TransactionUtils.isCustomUnitRateIDForP2P(transaction) ? DistanceRequestUtils.getRateForP2P(policyCurrency, transaction) : defaultMileageRate; + const {unit} = mileageRate ?? {}; const getMarkerComponent = useCallback( (icon: IconAsset): ReactNode => ( @@ -114,7 +125,8 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig waypoints={waypointMarkers} styleURL={CONST.MAPBOX.STYLE_URL} overlayStyle={styles.mapEditView} - distance={TransactionUtils.getDistanceInMeters(transaction, 'km')} + distanceInMeters={TransactionUtils.getDistanceInMeters(transaction, undefined)} + unit={unit} /> diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx index 6f1c7aaee458..9e1bfc462153 100644 --- a/src/components/MapView/MapView.tsx +++ b/src/components/MapView/MapView.tsx @@ -6,9 +6,12 @@ import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import * as Expensicons from '@components/Icon/Expensicons'; +import {PressableWithoutFeedback} from '@components/Pressable'; +import Text from '@components/Text'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as UserLocation from '@libs/actions/UserLocation'; +import DistanceRequestUtils from '@libs/DistanceRequestUtils'; import getCurrentPosition from '@libs/getCurrentPosition'; import type {GeolocationErrorCallback} from '@libs/getCurrentPosition/getCurrentPosition.types'; import {GeolocationErrorCode} from '@libs/getCurrentPosition/getCurrentPosition.types'; @@ -24,7 +27,7 @@ import responder from './responder'; import utils from './utils'; const MapView = forwardRef( - ({accessToken, style, mapPadding, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady, interactive = true}, ref) => { + ({accessToken, style, mapPadding, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady, interactive = true, distanceInMeters, unit}, ref) => { const [userLocation] = useOnyx(ONYXKEYS.USER_LOCATION); const navigation = useNavigation(); const {isOffline} = useNetwork(); @@ -39,6 +42,25 @@ const MapView = forwardRef( const shouldInitializeCurrentPosition = useRef(true); const [isAccessTokenSet, setIsAccessTokenSet] = useState(false); + const [distanceUnit, setDistanceUnit] = useState(unit); + useEffect(() => { + if (!unit || distanceUnit) { + return; + } + setDistanceUnit(unit); + }, [unit, distanceUnit]); + + const toggleDistanceUnit = useCallback(() => { + setDistanceUnit((currentUnit) => + currentUnit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS ? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES : CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS, + ); + }, []); + + const distanceLabelText = useMemo( + () => DistanceRequestUtils.getDistanceForDisplayLabel(distanceInMeters ?? 0, distanceUnit ?? CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS), + [distanceInMeters, distanceUnit], + ); + // Determines if map can be panned to user's detected // location without bothering the user. It will return // false if user has already started dragging the map or @@ -205,6 +227,26 @@ const MapView = forwardRef( const initCenterCoordinate = useMemo(() => (interactive ? centerCoordinate : undefined), [interactive, centerCoordinate]); const initBounds = useMemo(() => (interactive ? undefined : waypointsBounds), [interactive, waypointsBounds]); + const distanceSymbolCoorinate = useMemo(() => { + const length = directionCoordinates?.length; + // If the array is empty, return undefined + if (!length) { + return undefined; + } + + // Find the index of the middle element + const middleIndex = Math.floor(length / 2); + + // Return the middle element + return directionCoordinates.at(middleIndex); + }, [directionCoordinates]); + + console.log('>>>>>>>>>>'); + console.log('>>>>>>>>>>'); + console.log('>>>>>>>>>>'); + console.log('>>>>>>>>>>'); + console.log('>>>>>>>>>>', DistanceRequestUtils.getDistanceForDisplayLabel(distanceInMeters, distanceUnit)); + return !isOffline && isAccessTokenSet && !!defaultSettings ? ( ( /> )} - {waypoints?.map(({coordinate, markerComponent, id}) => { const MarkerComponent = markerComponent; if (utils.areSameCoordinate([coordinate[0], coordinate[1]], [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0]) && interactive) { @@ -276,6 +317,28 @@ const MapView = forwardRef( })} {!!directionCoordinates && } + {!!distanceSymbolCoorinate && !!distanceInMeters && !!distanceUnit && ( + + + + + {distanceLabelText} + + + + + )} {interactive && ( diff --git a/src/components/MapView/MapViewImpl.website.tsx b/src/components/MapView/MapViewImpl.website.tsx index cdeee9b4b7da..de59cae3df76 100644 --- a/src/components/MapView/MapViewImpl.website.tsx +++ b/src/components/MapView/MapViewImpl.website.tsx @@ -12,6 +12,7 @@ import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import * as Expensicons from '@components/Icon/Expensicons'; +import {PressableWithoutFeedback} from '@components/Pressable'; import usePrevious from '@hooks/usePrevious'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; @@ -43,7 +44,8 @@ const MapViewImpl = forwardRef( directionCoordinates, initialState = {location: CONST.MAPBOX.DEFAULT_COORDINATE, zoom: CONST.MAPBOX.DEFAULT_ZOOM}, interactive = true, - distance, + distanceInMeters, + unit, }, ref, ) => { @@ -51,6 +53,19 @@ const MapViewImpl = forwardRef( const {isOffline} = useNetwork(); const {translate} = useLocalize(); + const [distanceUnit, setDistanceUnit] = useState(unit); + useEffect(() => { + if (!unit || distanceUnit) { + return; + } + setDistanceUnit(unit); + }, [unit, distanceUnit]); + + const toggleDistanceUnit = useCallback(() => { + setDistanceUnit((currentUnit) => + currentUnit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS ? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES : CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS, + ); + }, []); const theme = useTheme(); const styles = useThemeStyles(); @@ -273,18 +288,22 @@ const MapViewImpl = forwardRef( )} - {!!distanceSymbolCoorinate && !!distance && ( + {!!distanceSymbolCoorinate && !!distanceInMeters && !!distanceUnit && ( - + - {DistanceRequestUtils.getDistanceForDisplayLabel(distance, CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS)} - {DistanceRequestUtils.getDistanceForDisplayLabel(distance, CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES)} + {DistanceRequestUtils.getDistanceForDisplayLabel(distanceInMeters, distanceUnit)} - + )} {waypoints?.map(({coordinate, markerComponent, id}) => { diff --git a/src/components/MapView/MapViewTypes.ts b/src/components/MapView/MapViewTypes.ts index 14104f79779b..2b706cd642a0 100644 --- a/src/components/MapView/MapViewTypes.ts +++ b/src/components/MapView/MapViewTypes.ts @@ -1,5 +1,6 @@ import type {ReactNode} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; +import {Unit} from '@src/types/onyx/Policy'; type MapViewProps = { // Public access token to be used to fetch map data from Mapbox. @@ -23,7 +24,11 @@ type MapViewProps = { // Whether the map is interactable or not interactive?: boolean; - distance?: number; + // Distance displayed on the map in meters. + distanceInMeters?: number; + + // Unit of measurement for distance + unit?: Unit; }; type DirectionProps = { diff --git a/src/pages/iou/request/step/IOURequestStepDistance.tsx b/src/pages/iou/request/step/IOURequestStepDistance.tsx index 2eba9759027e..920b2b576b2a 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.tsx +++ b/src/pages/iou/request/step/IOURequestStepDistance.tsx @@ -535,6 +535,7 @@ function IOURequestStepDistance({ waypoints={waypoints} navigateToWaypointEditPage={navigateToWaypointEditPage} transaction={transaction} + policy={policy} /> } /> diff --git a/src/styles/index.ts b/src/styles/index.ts index fc4eeaa9fb65..90c1976f8780 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4007,6 +4007,8 @@ const styles = (theme: ThemeColors) => paddingVertical: 4, borderRadius: 4, textAlign: 'center', + }, + distanceLabelText: { fontSize: 13, fontWeight: FontUtils.fontWeight.bold, color: colors.productLight100, From b1dd8bab93878963bf7d22fad6ac0de779fc569c Mon Sep 17 00:00:00 2001 From: truph01 Date: Wed, 22 Jan 2025 01:13:22 +0700 Subject: [PATCH 4/9] fix: lint --- src/components/MapView/MapView.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx index 9e1bfc462153..e4e10b61d3f7 100644 --- a/src/components/MapView/MapView.tsx +++ b/src/components/MapView/MapView.tsx @@ -6,7 +6,7 @@ import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import * as Expensicons from '@components/Icon/Expensicons'; -import {PressableWithoutFeedback} from '@components/Pressable'; +import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Text from '@components/Text'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -241,12 +241,6 @@ const MapView = forwardRef( return directionCoordinates.at(middleIndex); }, [directionCoordinates]); - console.log('>>>>>>>>>>'); - console.log('>>>>>>>>>>'); - console.log('>>>>>>>>>>'); - console.log('>>>>>>>>>>'); - console.log('>>>>>>>>>>', DistanceRequestUtils.getDistanceForDisplayLabel(distanceInMeters, distanceUnit)); - return !isOffline && isAccessTokenSet && !!defaultSettings ? ( ( coordinate={distanceSymbolCoorinate} id="distance-label" key="distance-label" - onTouchStart={toggleDistanceUnit} - onAccessibilityTap={toggleDistanceUnit} > Date: Wed, 22 Jan 2025 01:32:48 +0700 Subject: [PATCH 5/9] fix: lint --- .../DistanceRequest/DistanceRequestFooter.tsx | 28 +++++++------------ src/components/MapView/MapView.tsx | 6 ++-- .../MapView/MapViewImpl.website.tsx | 6 ++-- src/components/MapView/MapViewTypes.ts | 2 +- 4 files changed, 17 insertions(+), 25 deletions(-) diff --git a/src/components/DistanceRequest/DistanceRequestFooter.tsx b/src/components/DistanceRequest/DistanceRequestFooter.tsx index 56539a998f94..b3e58467f14a 100644 --- a/src/components/DistanceRequest/DistanceRequestFooter.tsx +++ b/src/components/DistanceRequest/DistanceRequestFooter.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useMemo} from 'react'; import type {ReactNode} from 'react'; import {View} from 'react-native'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import Button from '@components/Button'; import DistanceMapView from '@components/DistanceMapView'; @@ -13,22 +13,17 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import DistanceRequestUtils from '@libs/DistanceRequestUtils'; import {getPersonalPolicy, getPolicy} from '@libs/PolicyUtils'; -import * as TransactionUtils from '@libs/TransactionUtils'; +import { getDistanceInMeters, getWaypointIndex, isCustomUnitRateIDForP2P } from '@libs/TransactionUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {MapboxAccessToken, Policy} from '@src/types/onyx'; +import type {Policy} from '@src/types/onyx'; import type {WaypointCollection} from '@src/types/onyx/Transaction'; import type Transaction from '@src/types/onyx/Transaction'; import type IconAsset from '@src/types/utils/IconAsset'; const MAX_WAYPOINTS = 25; -type DistanceRequestFooterOnyxProps = { - /** Data about Mapbox token for calling Mapbox API */ - mapboxAccessToken: OnyxEntry; -}; - -type DistanceRequestFooterProps = DistanceRequestFooterOnyxProps & { +type DistanceRequestFooterProps = { /** The waypoints for the distance expense */ waypoints?: WaypointCollection; @@ -42,19 +37,20 @@ type DistanceRequestFooterProps = DistanceRequestFooterOnyxProps & { policy: OnyxEntry; }; -function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navigateToWaypointEditPage, policy}: DistanceRequestFooterProps) { +function DistanceRequestFooter({waypoints, transaction, navigateToWaypointEditPage, policy}: DistanceRequestFooterProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID); const activePolicy = getPolicy(activePolicyID); + const [mapboxAccessToken] = useOnyx(ONYXKEYS.MAPBOX_ACCESS_TOKEN); const numberOfWaypoints = Object.keys(waypoints ?? {}).length; const numberOfFilledWaypoints = Object.values(waypoints ?? {}).filter((waypoint) => waypoint?.address).length; const lastWaypointIndex = numberOfWaypoints - 1; const defaultMileageRate = DistanceRequestUtils.getDefaultMileageRate(policy ?? activePolicy); const policyCurrency = (policy ?? activePolicy)?.outputCurrency ?? getPersonalPolicy()?.outputCurrency ?? CONST.CURRENCY.USD; - const mileageRate = TransactionUtils.isCustomUnitRateIDForP2P(transaction) ? DistanceRequestUtils.getRateForP2P(policyCurrency, transaction) : defaultMileageRate; + const mileageRate = isCustomUnitRateIDForP2P(transaction) ? DistanceRequestUtils.getRateForP2P(policyCurrency, transaction) : defaultMileageRate; const {unit} = mileageRate ?? {}; const getMarkerComponent = useCallback( @@ -77,7 +73,7 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig return; } - const index = TransactionUtils.getWaypointIndex(key); + const index = getWaypointIndex(key); let MarkerComponent: IconAsset; if (index === 0) { MarkerComponent = Expensicons.DotIndicatorUnfilled; @@ -125,7 +121,7 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig waypoints={waypointMarkers} styleURL={CONST.MAPBOX.STYLE_URL} overlayStyle={styles.mapEditView} - distanceInMeters={TransactionUtils.getDistanceInMeters(transaction, undefined)} + distanceInMeters={getDistanceInMeters(transaction, undefined)} unit={unit} /> @@ -135,8 +131,4 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig DistanceRequestFooter.displayName = 'DistanceRequestFooter'; -export default withOnyx({ - mapboxAccessToken: { - key: ONYXKEYS.MAPBOX_ACCESS_TOKEN, - }, -})(DistanceRequestFooter); +export default DistanceRequestFooter; diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx index e4e10b61d3f7..ac202c1dc6a0 100644 --- a/src/components/MapView/MapView.tsx +++ b/src/components/MapView/MapView.tsx @@ -10,7 +10,7 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed import Text from '@components/Text'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as UserLocation from '@libs/actions/UserLocation'; +import {clearUserLocation, setUserLocation} from '@libs/actions/UserLocation'; import DistanceRequestUtils from '@libs/DistanceRequestUtils'; import getCurrentPosition from '@libs/getCurrentPosition'; import type {GeolocationErrorCallback} from '@libs/getCurrentPosition/getCurrentPosition.types'; @@ -72,7 +72,7 @@ const MapView = forwardRef( if (error?.code !== GeolocationErrorCode.PERMISSION_DENIED || !initialLocation) { return; } - UserLocation.clearUserLocation(); + clearUserLocation(); }, [initialLocation], ); @@ -96,7 +96,7 @@ const MapView = forwardRef( getCurrentPosition((params) => { const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude}; - UserLocation.setUserLocation(currentCoords); + setUserLocation(currentCoords); }, setCurrentPositionToInitialState); }, [isOffline, shouldPanMapToCurrentPosition, setCurrentPositionToInitialState]), ); diff --git a/src/components/MapView/MapViewImpl.website.tsx b/src/components/MapView/MapViewImpl.website.tsx index de59cae3df76..73d7abf8b21a 100644 --- a/src/components/MapView/MapViewImpl.website.tsx +++ b/src/components/MapView/MapViewImpl.website.tsx @@ -20,7 +20,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import DistanceRequestUtils from '@libs/DistanceRequestUtils'; import type {GeolocationErrorCallback} from '@libs/getCurrentPosition/getCurrentPosition.types'; import {GeolocationErrorCode} from '@libs/getCurrentPosition/getCurrentPosition.types'; -import * as UserLocation from '@userActions/UserLocation'; +import {clearUserLocation, setUserLocation} from '@userActions/UserLocation'; import CONST from '@src/CONST'; import useLocalize from '@src/hooks/useLocalize'; import useNetwork from '@src/hooks/useNetwork'; @@ -91,7 +91,7 @@ const MapViewImpl = forwardRef( if (error?.code !== GeolocationErrorCode.PERMISSION_DENIED || !initialLocation) { return; } - UserLocation.clearUserLocation(); + clearUserLocation(); }, [initialLocation], ); @@ -115,7 +115,7 @@ const MapViewImpl = forwardRef( getCurrentPosition((params) => { const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude}; - UserLocation.setUserLocation(currentCoords); + setUserLocation(currentCoords); }, setCurrentPositionToInitialState); }, [isOffline, shouldPanMapToCurrentPosition, setCurrentPositionToInitialState]), ); diff --git a/src/components/MapView/MapViewTypes.ts b/src/components/MapView/MapViewTypes.ts index 2b706cd642a0..11e90a78fffc 100644 --- a/src/components/MapView/MapViewTypes.ts +++ b/src/components/MapView/MapViewTypes.ts @@ -1,6 +1,6 @@ import type {ReactNode} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; -import {Unit} from '@src/types/onyx/Policy'; +import type {Unit} from '@src/types/onyx/Policy'; type MapViewProps = { // Public access token to be used to fetch map data from Mapbox. From aff2281d380092f44f788b9d0f130cb2785014a2 Mon Sep 17 00:00:00 2001 From: truph01 Date: Wed, 22 Jan 2025 01:41:39 +0700 Subject: [PATCH 6/9] fix: lint --- src/components/DistanceRequest/DistanceRequestFooter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DistanceRequest/DistanceRequestFooter.tsx b/src/components/DistanceRequest/DistanceRequestFooter.tsx index b3e58467f14a..7bf83f3b9b42 100644 --- a/src/components/DistanceRequest/DistanceRequestFooter.tsx +++ b/src/components/DistanceRequest/DistanceRequestFooter.tsx @@ -13,7 +13,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import DistanceRequestUtils from '@libs/DistanceRequestUtils'; import {getPersonalPolicy, getPolicy} from '@libs/PolicyUtils'; -import { getDistanceInMeters, getWaypointIndex, isCustomUnitRateIDForP2P } from '@libs/TransactionUtils'; +import {getDistanceInMeters, getWaypointIndex, isCustomUnitRateIDForP2P} from '@libs/TransactionUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {Policy} from '@src/types/onyx'; From 6f7a06f6519cb1b5fbb2ba9e438a19192568b641 Mon Sep 17 00:00:00 2001 From: truph01 Date: Wed, 22 Jan 2025 01:45:20 +0700 Subject: [PATCH 7/9] fix: remove unused change --- src/styles/index.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 90c1976f8780..383ffc888fa1 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3996,11 +3996,6 @@ const styles = (theme: ThemeColors) => ...wordBreak.breakWord, }, - reportActionComposeTooltipWrapper: { - backgroundColor: theme.tooltipHighlightBG, - paddingVertical: 8, - borderRadius: variables.componentBorderRadiusMedium, - }, distanceLabelWrapper: { backgroundColor: colors.green400, paddingHorizontal: 8, From 9f403a75224ab13c749148a9ebc0d7435e9c6ea3 Mon Sep 17 00:00:00 2001 From: truph01 Date: Tue, 28 Jan 2025 17:19:39 +0700 Subject: [PATCH 8/9] fix: update label color to green500 --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index dd6a4173305e..0001f5b77c3d 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3994,7 +3994,7 @@ const styles = (theme: ThemeColors) => }, distanceLabelWrapper: { - backgroundColor: colors.green400, + backgroundColor: colors.green500, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4, From dd95e24c778417ecbdf6f54b96c300eb4e03c476 Mon Sep 17 00:00:00 2001 From: truph01 Date: Wed, 5 Feb 2025 10:02:12 +0700 Subject: [PATCH 9/9] fix: use usePolicy instead of getPolicy --- src/components/DistanceRequest/DistanceRequestFooter.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/DistanceRequest/DistanceRequestFooter.tsx b/src/components/DistanceRequest/DistanceRequestFooter.tsx index 7bf83f3b9b42..a811face3340 100644 --- a/src/components/DistanceRequest/DistanceRequestFooter.tsx +++ b/src/components/DistanceRequest/DistanceRequestFooter.tsx @@ -9,10 +9,11 @@ import * as Expensicons from '@components/Icon/Expensicons'; import ImageSVG from '@components/ImageSVG'; import type {WayPoint} from '@components/MapView/MapViewTypes'; import useLocalize from '@hooks/useLocalize'; +import usePolicy from '@hooks/usePolicy'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import DistanceRequestUtils from '@libs/DistanceRequestUtils'; -import {getPersonalPolicy, getPolicy} from '@libs/PolicyUtils'; +import {getPersonalPolicy} from '@libs/PolicyUtils'; import {getDistanceInMeters, getWaypointIndex, isCustomUnitRateIDForP2P} from '@libs/TransactionUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -42,7 +43,7 @@ function DistanceRequestFooter({waypoints, transaction, navigateToWaypointEditPa const styles = useThemeStyles(); const {translate} = useLocalize(); const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID); - const activePolicy = getPolicy(activePolicyID); + const activePolicy = usePolicy(activePolicyID); const [mapboxAccessToken] = useOnyx(ONYXKEYS.MAPBOX_ACCESS_TOKEN); const numberOfWaypoints = Object.keys(waypoints ?? {}).length;