From 54e1c9d12437e1170840867c5dd47a55be1f95aa Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Wed, 29 Jan 2025 17:25:35 +0100
Subject: [PATCH 1/2] =?UTF-8?q?Fix=20that=20clicking=20on=20the=20trip=20p?=
 =?UTF-8?q?review=20component=20doesn=E2=80=99t=20open=20the=20trip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReportActionItem/TripRoomPreview.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/TripRoomPreview.tsx b/src/components/ReportActionItem/TripRoomPreview.tsx
index d85c19d21ee03..71bd4a8c54481 100644
--- a/src/components/ReportActionItem/TripRoomPreview.tsx
+++ b/src/components/ReportActionItem/TripRoomPreview.tsx
@@ -136,6 +136,8 @@ function TripRoomPreview({action, chatReportID, containerStyles, contextMenuAnch
         );
     }, [currency, totalDisplaySpend, tripTransactions]);
 
+    const navigateToTrip = () => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(chatReportID));
+
     return (
         <OfflineWithFeedback
             pendingAction={action?.pendingAction}
@@ -144,6 +146,7 @@ function TripRoomPreview({action, chatReportID, containerStyles, contextMenuAnch
         >
             <View style={[styles.chatItemMessage, containerStyles]}>
                 <PressableWithoutFeedback
+                    onPress={navigateToTrip}
                     onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={() => ControlSelection.unblock()}
                     onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)}
@@ -184,7 +187,7 @@ function TripRoomPreview({action, chatReportID, containerStyles, contextMenuAnch
                         <Button
                             success
                             text={translate('travel.viewTrip')}
-                            onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(chatReportID))}
+                            onPress={navigateToTrip}
                         />
                     </View>
                 </PressableWithoutFeedback>

From 0c8068b1154ad838f3187ad6a3a6086644a714c8 Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Wed, 29 Jan 2025 17:42:39 +0100
Subject: [PATCH 2/2] Make trip room preview clickable and navigate to trip
 details

---
 .../ReportActionItem/TripRoomPreview.tsx         | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/ReportActionItem/TripRoomPreview.tsx b/src/components/ReportActionItem/TripRoomPreview.tsx
index 71bd4a8c54481..1df5e1f410020 100644
--- a/src/components/ReportActionItem/TripRoomPreview.tsx
+++ b/src/components/ReportActionItem/TripRoomPreview.tsx
@@ -53,9 +53,10 @@ type TripRoomPreviewProps = {
 
 type ReservationViewProps = {
     reservation: Reservation;
+    onPress?: () => void;
 };
 
-function ReservationView({reservation}: ReservationViewProps) {
+function ReservationView({reservation, onPress}: ReservationViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -102,7 +103,8 @@ function ReservationView({reservation}: ReservationViewProps) {
             wrapperStyle={[styles.taskDescriptionMenuItem, styles.p0]}
             shouldGreyOutWhenDisabled={false}
             numberOfLinesTitle={0}
-            interactive={false}
+            shouldRemoveBackground
+            onPress={onPress}
             iconHeight={variables.iconSizeSmall}
             iconWidth={variables.iconSizeSmall}
             iconStyles={[StyleUtils.getTripReservationIconContainer(true), styles.mr3]}
@@ -111,8 +113,6 @@ function ReservationView({reservation}: ReservationViewProps) {
     );
 }
 
-const renderItem = ({item}: ListRenderItemInfo<ReservationData>) => <ReservationView reservation={item.reservation} />;
-
 function TripRoomPreview({action, chatReportID, containerStyles, contextMenuAnchor, isHovered = false, checkIfContextMenuActive = () => {}}: TripRoomPreviewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -137,6 +137,12 @@ function TripRoomPreview({action, chatReportID, containerStyles, contextMenuAnch
     }, [currency, totalDisplaySpend, tripTransactions]);
 
     const navigateToTrip = () => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(chatReportID));
+    const renderItem = ({item}: ListRenderItemInfo<ReservationData>) => (
+        <ReservationView
+            reservation={item.reservation}
+            onPress={navigateToTrip}
+        />
+    );
 
     return (
         <OfflineWithFeedback
@@ -151,7 +157,7 @@ function TripRoomPreview({action, chatReportID, containerStyles, contextMenuAnch
                     onPressOut={() => ControlSelection.unblock()}
                     onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)}
                     shouldUseHapticsOnLongPress
-                    style={[styles.flexRow, styles.justifyContentBetween, styles.reportPreviewBox, styles.cursorDefault]}
+                    style={[styles.flexRow, styles.justifyContentBetween, styles.reportPreviewBox]}
                     role={CONST.ROLE.BUTTON}
                     accessibilityLabel={translate('iou.viewDetails')}
                 >