Merge pull request #55972 from software-mansion-labs/travel/click-on-…

…trip-preview Fix that clicking on the trip preview component doesn’t open the trip
Expensify · Jan 31, 2025 · 11bb6e3 · 11bb6e3
2 parents 48746d6 + 23db723
commit 11bb6e3
Showing 1 changed file with 15 additions and 6 deletions.
diff --git a/src/components/ReportActionItem/TripRoomPreview.tsx b/src/components/ReportActionItem/TripRoomPreview.tsx
@@ -54,9 +54,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();
@@ -103,7 +104,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]}
@@ -112,8 +114,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,14 @@ 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
             pendingAction={action?.pendingAction}
@@ -145,11 +153,12 @@ 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)}
                     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')}
                 >
@@ -185,7 +194,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>