trips small fix

src/screens/InAppScreens/TravelsScreen/Components/TripItem/index.tsx

@@ -13,6 +13,7 @@ import CalendarIcon from 'assets/icons/travels-screens/calendar.svg';
 import EditIcon from 'assets/icons/travels-screens/pen-to-square.svg';
 import ArrowIcon from 'assets/icons/chevron-left.svg';
 import WarningIcon from 'assets/icons/warning.svg';
+import Tooltip from 'react-native-walkthrough-tooltip';
 
 const formatDate = (dateString: string | null) => {
   if (!dateString) return;
@@ -43,31 +44,6 @@ const formatSingleLineDate = (dateString: string | null) => {
   return `${date.format('MMM DD')} ${date.format('YYYY')}`;
 };
 
-const renderMissingDatesWarning = (withMarginBottom = true) => (
-  <View
-    style={{
-      flexDirection: 'row',
-      gap: 6,
-      alignItems: 'center',
-      marginBottom: withMarginBottom ? 10 : 0,
-      flex: 1
-    }}
-  >
-    <WarningIcon color={Colors.RED} width={16} height={16} />
-    <Text
-      style={{
-        flex: 1,
-        fontSize: 14,
-        fontWeight: '600',
-        color: Colors.RED,
-        paddingRight: 4
-      }}
-    >
-      Fill in exact dates to get accurate statistics.
-    </Text>
-  </View>
-);
-
 const getTripDateLabel = (item: TripsData) => {
   const validFrom = getValidDate(item.date_from);
   const validTo = getValidDate(item.date_to);
@@ -141,6 +117,7 @@ const getTripDateLabel = (item: TripsData) => {
 const TripItem = ({ item }: { item: TripsData }) => {
   const navigation = useNavigation();
   const [showAllRegions, setShowAllRegions] = useState(false);
+  const [toolTipVisible, setToolTipVisible] = useState(false);
 
   const MAX_VISIBLE_REGIONS = 3;
   const totalRegions = item.regions?.length || 0;
@@ -148,28 +125,59 @@ const TripItem = ({ item }: { item: TripsData }) => {
     ? item.regions
     : item.regions?.slice(0, MAX_VISIBLE_REGIONS);
 
-  const validFrom = getValidDate(item.date_from);
-  const validTo = getValidDate(item.date_to);
-
-  const hasAnyValidDate = !!validFrom || !!validTo || !!item.year;;
-  const shouldRenderWarningAbove = item.dates_missing === 1 && hasAnyValidDate;
-  const shouldRenderWarningInsteadOfDate = item.dates_missing === 1 && !hasAnyValidDate;
+  const shouldRenderWarning = item.dates_missing === 1;
 
   const tripDateLabel = getTripDateLabel(item);
 
+  const renderMissingDatesWarning = () => (
+    <Tooltip
+      isVisible={toolTipVisible}
+      content={
+        <Text
+          style={{
+            flex: 1,
+            fontSize: 14,
+            fontWeight: '600',
+            color: Colors.RED,
+            paddingRight: 4
+          }}
+        >
+          Fill in exact dates to get accurate statistics.
+        </Text>
+      }
+      contentStyle={{ backgroundColor: Colors.WHITE }}
+      placement="top"
+      onClose={() => setToolTipVisible(false)}
+      backgroundColor="transparent"
+      allowChildInteraction={false}
+    >
+      <TouchableOpacity
+        style={{
+          alignItems: 'center',
+          marginRight: 4
+        }}
+        onPress={() => setToolTipVisible(true)}
+        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+      >
+        <WarningIcon color={Colors.RED} width={18} height={18} />
+      </TouchableOpacity>
+    </Tooltip>
+  );
+
   return (
     <View style={styles.tripItemContainer}>
-      {shouldRenderWarningAbove ? renderMissingDatesWarning(true) : null}
-
       <View style={styles.tripHeaderContainer}>
-        {shouldRenderWarningInsteadOfDate ? (
-          renderMissingDatesWarning(false)
-        ) : tripDateLabel ? (
-          <View style={styles.tripDateContainer}>
-            <CalendarIcon fill={Colors.DARK_BLUE} />
-            {tripDateLabel}
-          </View>
-        ) : null}
+        <View style={styles.tripDateContainer}>
+          {shouldRenderWarning ? (
+            renderMissingDatesWarning()
+          ) : null}
+          {tripDateLabel ? (
+            <>
+              <CalendarIcon fill={Colors.DARK_BLUE} />
+              {tripDateLabel}
+            </>
+          ) : null}
+        </View>
 
         <TouchableOpacity
           style={styles.editButton}