From 0d45c5564188fa63bf1eada357b11e8e3c7e60d9 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 24 Apr 2024 12:49:09 +0800
Subject: [PATCH] disable map interaction in money request preview

---
 src/components/ConfirmedRoute.tsx                           | 6 +++++-
 src/components/MapView/MapView.tsx                          | 4 ++--
 src/components/MapView/MapView.website.tsx                  | 2 ++
 src/components/MapView/MapViewTypes.ts                      | 2 ++
 .../MoneyRequestPreview/MoneyRequestPreviewContent.tsx      | 5 ++++-
 src/components/ReportActionItem/MoneyRequestView.tsx        | 5 ++++-
 6 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/ConfirmedRoute.tsx b/src/components/ConfirmedRoute.tsx
index 351129a5ee3e..d9cbbc8f248f 100644
--- a/src/components/ConfirmedRoute.tsx
+++ b/src/components/ConfirmedRoute.tsx
@@ -26,9 +26,12 @@ type ConfirmedRoutePropsOnyxProps = {
 type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & {
     /** Transaction that stores the distance expense data */
     transaction: OnyxEntry<Transaction>;
+
+    /** Whether the map is interactable or not */
+    interactive?: boolean;
 };
 
-function ConfirmedRoute({mapboxAccessToken, transaction}: ConfirmedRouteProps) {
+function ConfirmedRoute({mapboxAccessToken, transaction, interactive}: ConfirmedRouteProps) {
     const {isOffline} = useNetwork();
     const {route0: route} = transaction?.routes ?? {};
     const waypoints = transaction?.comment?.waypoints ?? {};
@@ -89,6 +92,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction}: ConfirmedRouteProps) {
 
     return !isOffline && Boolean(mapboxAccessToken?.token) ? (
         <DistanceMapView
+            interactive={interactive}
             accessToken={mapboxAccessToken?.token ?? ''}
             mapPadding={CONST.MAP_PADDING}
             pitchEnabled={false}
diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index bce241270d77..30cd82032a9d 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -20,7 +20,7 @@ import type {ComponentProps, MapViewOnyxProps} from './types';
 import utils from './utils';
 
 const MapView = forwardRef<MapViewHandle, ComponentProps>(
-    ({accessToken, style, mapPadding, userLocation: cachedUserLocation, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady}, ref) => {
+    ({accessToken, style, mapPadding, userLocation: cachedUserLocation, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady, interactive = true}, ref) => {
         const navigation = useNavigation();
         const {isOffline} = useNetwork();
         const {translate} = useLocalize();
@@ -145,7 +145,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         };
 
         return !isOffline && Boolean(accessToken) && Boolean(currentPosition) ? (
-            <View style={style}>
+            <View style={[style, !interactive ? styles.pointerEventsNone : {}]}>
                 <Mapbox.MapView
                     style={{flex: 1}}
                     styleURL={styleURL}
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index 70b781fcd5ea..e16289ee948d 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -38,6 +38,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
             userLocation: cachedUserLocation,
             directionCoordinates,
             initialState = {location: CONST.MAPBOX.DEFAULT_COORDINATE, zoom: CONST.MAPBOX.DEFAULT_ZOOM},
+            interactive = true,
         },
         ref,
     ) => {
@@ -195,6 +196,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     }}
                     style={StyleUtils.getTextColorStyle(theme.mapAttributionText)}
                     mapStyle={styleURL}
+                    interactive={interactive}
                 >
                     {waypoints?.map(({coordinate, markerComponent, id}) => {
                         const MarkerComponent = markerComponent;
diff --git a/src/components/MapView/MapViewTypes.ts b/src/components/MapView/MapViewTypes.ts
index 3fa52c54339b..40934308b0e1 100644
--- a/src/components/MapView/MapViewTypes.ts
+++ b/src/components/MapView/MapViewTypes.ts
@@ -20,6 +20,8 @@ type MapViewProps = {
     directionCoordinates?: Array<[number, number]>;
     // Callback to call when the map is idle / ready.
     onMapReady?: () => void;
+    // Whether the map is interactable or not
+    interactive?: boolean;
 };
 
 type DirectionProps = {
diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
index 7f70a3e538a9..5259b66492cd 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
@@ -230,7 +230,10 @@ function MoneyRequestPreviewContent({
                 >
                     {showMapAsImage && (
                         <View style={styles.reportActionItemImages}>
-                            <ConfirmedRoute transaction={transaction} />
+                            <ConfirmedRoute
+                                transaction={transaction}
+                                interactive={false}
+                            />
                         </View>
                     )}
                     {!showMapAsImage && hasReceipt && (
diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx
index 08bcc16cbbee..74cf0ed9ad88 100644
--- a/src/components/ReportActionItem/MoneyRequestView.tsx
+++ b/src/components/ReportActionItem/MoneyRequestView.tsx
@@ -338,7 +338,10 @@ function MoneyRequestView({
                     >
                         <View style={styles.moneyRequestViewImage}>
                             {showMapAsImage ? (
-                                <ConfirmedRoute transaction={transaction} />
+                                <ConfirmedRoute
+                                    transaction={transaction}
+                                    interactive={false}
+                                />
                             ) : (
                                 <ReportActionItemImage
                                     thumbnail={receiptURIs?.thumbnail}