fixes

src/modules/api/events/events-api.ts

@@ -28,6 +28,8 @@ export type SingleEvent = {
   photo: 0 | 1;
   available?: number;
   joined: 0 | 1;
+  joining: number;
+  interested: number;
   visible?: 0 | 1;
   archived: 0 | 1;
   time?: string;
@@ -78,6 +80,7 @@ export type EventSettings = {
     flag: string;
   };
   nm_region?: number;
+  nm_regions?: string;
 };
 
 export type EventAttachments = {

src/screens/InAppScreens/TravelsScreen/EventScreen/index.tsx

@@ -132,6 +132,8 @@ const EventScreen = ({ route }: { route: any }) => {
   const [isWarningModalVisible, setIsWarningModalVisible] = useState<boolean>(false);
 
   const { data: photosData } = useGetPhotosForRegionQuery(nmId ?? 0, nmId !== null);
+  const { mutateAsync: getPhotosForRegion } = usePostGetPhotosForRegionMutation();
+  const [regions, setRegions] = useState<any[]>([]);
 
   const [modalInfo, setModalInfo] = useState({
     visible: false,
@@ -142,6 +144,53 @@ const EventScreen = ({ route }: { route: any }) => {
     action: () => {}
   });
 
+  useEffect(() => {
+    if (regions && regions.length > 0 && event && event.type === 4) {
+      handleGetPhotosForAllRegions(regions);
+    } else {
+      setPhotosForRegion([]);
+    }
+  }, [regions, event]);
+
+  const handleGetPhotosForAllRegions = useCallback(
+    async (regionsArray: any[]) => {
+      if (!regionsArray || regionsArray.length === 0) {
+        setPhotosForRegion([]);
+        return;
+      }
+
+      const allPhotos: any[] = [];
+
+      try {
+        for (const region of regionsArray) {
+          await getPhotosForRegion(
+            { region_id: region },
+            {
+              onSuccess: (res) => {
+                if (res.photos && res.photos.length > 0) {
+                  allPhotos.push(...res.photos);
+                }
+              },
+              onError: (error) => {
+                console.log(`Error loading photos for region ${region}:`, error);
+              }
+            }
+          );
+        }
+
+        setPhotosForRegion(
+          allPhotos.map((item) => ({
+            uriSmall: `${API_HOST}/ajax/pic/${item}/small`,
+            uri: `${API_HOST}/ajax/pic/${item}/full`
+          }))
+        );
+      } catch (error) {
+        setPhotosForRegion([]);
+      }
+    },
+    [getPhotosForRegion, token]
+  );
+
   useEffect(() => {
     photosData &&
       setPhotosForRegion(
@@ -157,12 +206,16 @@ const EventScreen = ({ route }: { route: any }) => {
       setEvent(data.data);
       setJoined(data.data.joined);
       setNmId(data.data.settings.nm_region ?? null);
+      if (data.data.settings.nm_regions && data.data.type === 4) {
+        const ids = JSON.parse(data.data.settings.nm_regions);
+        setRegions(ids);
+      }
 
       setMyFiles(data.data.files ?? []);
       setPhotos(data.data.photos);
 
       const partisipantsWidth = contentWidth / 2;
-      setMaxVisibleParticipants(Math.floor(partisipantsWidth / 22));
+      setMaxVisibleParticipants(Math.floor(partisipantsWidth / 24));
       setMaxVisibleParticipantsWithGap(Math.floor(partisipantsWidth / 32));
       setFilteredParticipants(
         data.data.type === 4 ? data.data.participants_approved_data : data.data.participants_data
@@ -622,7 +675,7 @@ const EventScreen = ({ route }: { route: any }) => {
                 flex: 1
               }}
             >
-              {dateFrom} -{' '}
+              {dateFrom}{' '}
             </Text>
             <Text
               style={{
@@ -647,7 +700,7 @@ const EventScreen = ({ route }: { route: any }) => {
               flex: 1
             }}
           >
-            {moment(event.settings.date_from, 'YYYY-MM-DD').format('DD MMMM YYYY')} -{' '}
+            {moment(event.settings.date_from, 'YYYY-MM-DD').format('DD MMMM YYYY')}{' '}
           </Text>
           <Text
             style={{
@@ -800,9 +853,7 @@ const EventScreen = ({ route }: { route: any }) => {
       .catch((err) => console.error('Error opening event location', err));
   };
 
-  const photoUrl = event.photo
-    ? API_HOST + '/webapi/events/get-main-photo/' + event.id
-    : API_HOST + '/static/img/events/trip.webp';
+  const photoUrl = API_HOST + '/webapi/events/get-main-photo/' + event.id;
 
   return (
     <View style={styles.container}>
@@ -1043,10 +1094,13 @@ const EventScreen = ({ route }: { route: any }) => {
                 <View style={[styles.statItem, { justifyContent: 'flex-start' }]} />
               )}
 
-              {filteredParticipants.length > 0 ? (
+              {(filteredParticipants.length > 0 && event.type !== 4) ||
+              (filteredInterested.length === 0 &&
+                event.type === 4 &&
+                filteredParticipants.length > 0) ? (
                 <View style={{ gap: 8, flex: 1 }}>
                   <Text style={[styles.travelSeriesTitle, { fontSize: 12 }]}>
-                    Participants{` (${filteredParticipants.length})`}
+                    Joined{` (${filteredParticipants.length})`}
                   </Text>
 
                   <View style={[styles.statItem, { justifyContent: 'flex-start' }]}>
@@ -1129,13 +1183,11 @@ const EventScreen = ({ route }: { route: any }) => {
                     </View>
                   </View>
                 </View>
-              ) : (
-                <View style={[styles.statItem, { justifyContent: 'flex-end' }]} />
-              )}
-            </View>
+              ) : null}
 
-            {filteredInterested.length > 0 && event.type === 4 && (
-              <View>
+              {filteredParticipants.length === 0 &&
+              event.type === 4 &&
+              filteredInterested.length > 0 ? (
                 <View style={{ gap: 8, flex: 1 }}>
                   <Text style={[styles.travelSeriesTitle, { fontSize: 12 }]}>
                     Interested{` (${filteredInterested.length})`}
@@ -1219,8 +1271,194 @@ const EventScreen = ({ route }: { route: any }) => {
                     </View>
                   </View>
                 </View>
-              </View>
-            )}
+              ) : null}
+            </View>
+
+            {filteredInterested.length > 0 &&
+              filteredParticipants.length > 0 &&
+              event.type === 4 && (
+                <View style={styles.stats}>
+                  {filteredInterested.length > 0 ? (
+                    <View style={{ gap: 8, flex: 1 }}>
+                      <Text style={[styles.travelSeriesTitle, { fontSize: 12 }]}>
+                        Interested{` (${filteredInterested.length})`}
+                      </Text>
+
+                      <View style={[styles.statItem, { justifyContent: 'flex-start' }]}>
+                        <View style={styles.userImageContainer}>
+                          {(filteredInterested.length > maxVisibleParticipants
+                            ? filteredInterested.slice(0, maxVisibleParticipants - 1)
+                            : filteredInterested
+                          ).map((user, index) => (
+                            <Tooltip
+                              isVisible={tooltipInterested === index}
+                              content={
+                                <TouchableOpacity
+                                  onPress={() => {
+                                    setTooltipInterested(null);
+                                    navigation.navigate(
+                                      ...([
+                                        NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW,
+                                        { userId: user.uid }
+                                      ] as never)
+                                    );
+                                  }}
+                                >
+                                  <Text>{user.name}</Text>
+                                </TouchableOpacity>
+                              }
+                              contentStyle={{ backgroundColor: Colors.FILL_LIGHT }}
+                              placement="top"
+                              onClose={() => setTooltipInterested(null)}
+                              key={index}
+                              backgroundColor="transparent"
+                            >
+                              <TouchableOpacity
+                                style={index !== 0 ? { marginLeft: -10 } : {}}
+                                onPress={() => setTooltipInterested(index)}
+                              >
+                                {user.avatar ? (
+                                  <Image
+                                    key={index}
+                                    source={{ uri: API_HOST + user.avatar }}
+                                    style={[styles.userImage]}
+                                  />
+                                ) : (
+                                  <AvatarWithInitials
+                                    text={
+                                      user.name?.split(' ')[0][0] +
+                                      (user.name?.split(' ')[1][0] ?? '')
+                                    }
+                                    flag={API_HOST + user?.flag}
+                                    size={28}
+                                    fontSize={12}
+                                    borderColor={Colors.DARK_LIGHT}
+                                    borderWidth={1}
+                                  />
+                                )}
+                              </TouchableOpacity>
+                            </Tooltip>
+                          ))}
+                          <TouchableOpacity
+                            style={styles.userCountContainer}
+                            onPress={() =>
+                              navigation.navigate(
+                                ...([
+                                  NAVIGATION_PAGES.PARTICIPANTS_LIST,
+                                  {
+                                    participants: event.participants_full_data,
+                                    eventId: event.id,
+                                    isHost: event.settings.host_profile === +currentUserId,
+                                    interested: true,
+                                    isTrip: event.type === 4
+                                  }
+                                ] as never)
+                              )
+                            }
+                          >
+                            <View style={styles.dots}></View>
+                            <View style={styles.dots}></View>
+                            <View style={styles.dots}></View>
+                          </TouchableOpacity>
+                        </View>
+                      </View>
+                    </View>
+                  ) : (
+                    <View style={[styles.statItem, { justifyContent: 'flex-start' }]} />
+                  )}
+
+                  {filteredParticipants.length > 0 ? (
+                    <View style={{ gap: 8, flex: 1 }}>
+                      <Text style={[styles.travelSeriesTitle, { fontSize: 12 }]}>
+                        Joined{` (${filteredParticipants.length})`}
+                      </Text>
+
+                      <View style={[styles.statItem, { justifyContent: 'flex-start' }]}>
+                        <View style={styles.userImageContainer}>
+                          {(filteredParticipants.length > maxVisibleParticipants
+                            ? filteredParticipants.slice(0, maxVisibleParticipants - 1)
+                            : filteredParticipants
+                          ).map((user, index) => (
+                            <Tooltip
+                              isVisible={tooltipUser === index}
+                              content={
+                                <TouchableOpacity
+                                  onPress={() => {
+                                    setTooltipUser(null);
+                                    navigation.navigate(
+                                      ...([
+                                        NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW,
+                                        { userId: user.uid }
+                                      ] as never)
+                                    );
+                                  }}
+                                >
+                                  <Text>{user.name}</Text>
+                                </TouchableOpacity>
+                              }
+                              contentStyle={{ backgroundColor: Colors.FILL_LIGHT }}
+                              placement="top"
+                              onClose={() => setTooltipUser(null)}
+                              key={index}
+                              backgroundColor="transparent"
+                            >
+                              <TouchableOpacity
+                                style={index !== 0 ? { marginLeft: -10 } : {}}
+                                onPress={() => setTooltipUser(index)}
+                              >
+                                {user.avatar ? (
+                                  <Image
+                                    key={index}
+                                    source={{ uri: API_HOST + user.avatar }}
+                                    style={[styles.userImage]}
+                                  />
+                                ) : (
+                                  <AvatarWithInitials
+                                    text={
+                                      user.name?.split(' ')[0][0] +
+                                      (user.name?.split(' ')[1][0] ?? '')
+                                    }
+                                    flag={API_HOST + user?.flag}
+                                    size={28}
+                                    fontSize={12}
+                                    borderColor={Colors.DARK_LIGHT}
+                                    borderWidth={1}
+                                  />
+                                )}
+                              </TouchableOpacity>
+                            </Tooltip>
+                          ))}
+                          <TouchableOpacity
+                            style={styles.userCountContainer}
+                            onPress={() =>
+                              navigation.navigate(
+                                ...([
+                                  NAVIGATION_PAGES.PARTICIPANTS_LIST,
+                                  {
+                                    participants:
+                                      event.type === 4
+                                        ? event.participants_approved_full_data
+                                        : event.participants_full_data,
+                                    eventId: event.id,
+                                    isHost: event.settings.host_profile === +currentUserId,
+                                    isTrip: event.type === 4
+                                  }
+                                ] as never)
+                              )
+                            }
+                          >
+                            <View style={styles.dots}></View>
+                            <View style={styles.dots}></View>
+                            <View style={styles.dots}></View>
+                          </TouchableOpacity>
+                        </View>
+                      </View>
+                    </View>
+                  ) : (
+                    <View style={[styles.statItem, { justifyContent: 'flex-end' }]} />
+                  )}
+                </View>
+              )}
 
             {/* TO DO */}
             {event.settings.host_profile === +currentUserId &&

src/screens/InAppScreens/TravelsScreen/EventsScreen/utils.tsx

@@ -2,6 +2,35 @@ import { SingleEvent } from '@api/events';
 import { Text } from 'react-native';
 
 export const renderSpotsText = (e: SingleEvent) => {
+  if (e.type === 4) {
+    if (e.interested > 0 && e.joining > 0) {
+      return (
+        <Text>
+          <Text style={{ fontWeight: '700' }}>{e.interested}</Text> interested /{' '}
+          <Text style={{ fontWeight: '700' }}>{e.joining}</Text> joined
+        </Text>
+      );
+    } else if (e.interested > 0) {
+      return (
+        <Text>
+          <Text style={{ fontWeight: '700' }}>{e.interested}</Text> interested
+        </Text>
+      );
+    } else if (e.joining > 0) {
+      return (
+        <Text>
+          <Text style={{ fontWeight: '700' }}>{e.joining}</Text> joined
+        </Text>
+      );
+    }
+  }
+  if (e.type === 1 && e.joining > 0) {
+    return (
+      <Text>
+        <Text style={{ fontWeight: '700' }}>{e.joining}</Text> joined
+      </Text>
+    );
+  }
   switch (e.registrations_info) {
     case 2:
       return (

src/screens/InAppScreens/TravelsScreen/ParticipantsListScreen/index.tsx

@@ -83,7 +83,7 @@ const ParticipantsListScreen: FC<Props> = ({ navigation, route }) => {
   return (
     <PageWrapper>
       <Header
-        label={interested ? 'Interested' : 'Participants'}
+        label={interested ? 'Interested' : 'Joined'}
         rightElement={<FilterButton onPress={() => setModalVisible(!isModalVisible)} />}
       />
       <View style={styles.container}>