dates_missing in trips

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

@@ -14,24 +14,126 @@ 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';
 
-const TripItem = ({ item }: { item: TripsData }) => {
-  const navigation = useNavigation();
-  const [showAllRegions, setShowAllRegions] = useState(false);
+const formatDate = (dateString: string | null) => {
+  if (!dateString) return;
+  const date = moment(dateString);
+  const formattedDate = date.format('MMM DD');
+  const year = date.format('YYYY');
+
+  return (
+    <Text style={styles.alignCenter}>
+      <Text style={styles.tripDateText}>{formattedDate}</Text>
+      {'\n'}
+      <Text style={styles.tripDateText}>{year}</Text>
+    </Text>
+  );
+};
+
+const getValidDate = (value?: string | null) => {
+  if (!value) return null;
+
+  const date = moment(value);
+  return date.isValid() ? date : null;
+};
+
+const formatSingleLineDate = (dateString: string | null) => {
+  const date = getValidDate(dateString);
+  if (!date) return 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);
+
+  const fromYear = validFrom ? validFrom.format('YYYY') : null;
+  const toYear = validTo ? validTo.format('YYYY') : null;
+
+  if (item.dates_missing === 1) {
+    if (!fromYear && !toYear) return null;
+
+    if (fromYear && toYear && fromYear === toYear) {
+      return <Text style={[styles.tripDateText, { marginLeft: 8 }]}>{toYear}</Text>;
+    }
+
+    return (
+      <>
+        {fromYear ? <Text style={[styles.tripDateText, { marginLeft: 8 }]}>{fromYear}</Text> : null}
+
+        {fromYear && toYear ? <Text style={styles.tripDateText}>-</Text> : null}
+
+        {toYear ? <Text style={styles.tripDateText}>{toYear}</Text> : null}
+      </>
+    );
+  }
+
+  const hasValidFrom = !!validFrom;
+  const hasValidTo = !!validTo;
 
-  const formatDate = (dateString: string | null) => {
-    if (!dateString) return;
-    const date = moment(dateString);
-    const formattedDate = date.format('MMM DD');
-    const year = date.format('YYYY');
+  if (!hasValidFrom && !hasValidTo) return null;
 
+  if (hasValidFrom && !hasValidTo) {
     return (
-      <Text style={styles.alignCenter}>
-        <Text style={styles.tripDateText}>{formattedDate}</Text>
-        {'\n'}
-        <Text style={styles.tripDateText}>{year}</Text>
+      <Text style={[styles.tripDateText, { marginLeft: 8 }]}>
+        {formatSingleLineDate(item.date_from)}
       </Text>
     );
-  };
+  }
+
+  if (!hasValidFrom && hasValidTo) {
+    return (
+      <Text style={[styles.tripDateText, { marginLeft: 8 }]}>
+        {formatSingleLineDate(item.date_to)}
+      </Text>
+    );
+  }
+
+  if (validFrom && validTo && item.date_from === item.date_to) {
+    return (
+      <Text style={[styles.tripDateText, { marginLeft: 8 }]}>
+        {formatSingleLineDate(item.date_from)}
+      </Text>
+    );
+  }
+
+  return (
+    <>
+      <Text style={{ marginLeft: 8 }}>{formatDate(item.date_from)}</Text>
+      <Text style={styles.tripDateText}>-</Text>
+      {formatDate(item.date_to)}
+    </>
+  );
+};
+
+const TripItem = ({ item }: { item: TripsData }) => {
+  const navigation = useNavigation();
+  const [showAllRegions, setShowAllRegions] = useState(false);
 
   const MAX_VISIBLE_REGIONS = 3;
   const totalRegions = item.regions?.length || 0;
@@ -39,29 +141,29 @@ 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;
+  const shouldRenderWarningAbove = item.dates_missing === 1 && hasAnyValidDate;
+  const shouldRenderWarningInsteadOfDate = item.dates_missing === 1 && !hasAnyValidDate;
+
+  const tripDateLabel = getTripDateLabel(item);
+
   return (
     <View style={styles.tripItemContainer}>
-      {item.dates_missing === 1 ? (
-        <View style={{ flexDirection: 'row', gap: 6, alignItems: 'center', marginBottom: 10 }}>
-          <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>
-      ) : null}
+      {shouldRenderWarningAbove ? renderMissingDatesWarning(true) : null}
+
       <View style={styles.tripHeaderContainer}>
-        <View style={styles.tripDateContainer}>
-          {item.date_from || item.date_to ? (
-            <>
-              <CalendarIcon fill={Colors.DARK_BLUE} />
-              <Text style={[styles.tripDateText, { marginLeft: 8 }]}>
-                {formatDate(item.date_from)}
-              </Text>
-              <Text style={styles.tripDateText}>-</Text>
-              <Text style={styles.tripDateText}>{formatDate(item.date_to)}</Text>
-            </>
-          ) : null}
-        </View>
+        {shouldRenderWarningInsteadOfDate ? (
+          renderMissingDatesWarning(false)
+        ) : tripDateLabel ? (
+          <View style={styles.tripDateContainer}>
+            <CalendarIcon fill={Colors.DARK_BLUE} />
+            {tripDateLabel}
+          </View>
+        ) : null}
+
         <TouchableOpacity
           style={styles.editButton}
           onPress={() =>
@@ -74,7 +176,6 @@ const TripItem = ({ item }: { item: TripsData }) => {
           <Text style={styles.editButtonText}>Edit</Text>
         </TouchableOpacity>
       </View>
-
       <View style={styles.divider} />
 
       {item.description && (