event fixes

assets/icons/events/clock.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5122_43297)">
+<path d="M18.125 10C18.125 12.1549 17.269 14.2215 15.7452 15.7452C14.2215 17.269 12.1549 18.125 10 18.125C7.84512 18.125 5.77849 17.269 4.25476 15.7452C2.73102 14.2215 1.875 12.1549 1.875 10C1.875 7.84512 2.73102 5.77849 4.25476 4.25476C5.77849 2.73102 7.84512 1.875 10 1.875C12.1549 1.875 14.2215 2.73102 15.7452 4.25476C17.269 5.77849 18.125 7.84512 18.125 10ZM0 10C0 12.6522 1.05357 15.1957 2.92893 17.0711C4.8043 18.9464 7.34784 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C18.9464 15.1957 20 12.6522 20 10C20 7.34784 18.9464 4.8043 17.0711 2.92893C15.1957 1.05357 12.6522 0 10 0C7.34784 0 4.8043 1.05357 2.92893 2.92893C1.05357 4.8043 0 7.34784 0 10ZM9.0625 4.6875V10C9.0625 10.3125 9.21875 10.6055 9.48047 10.7812L13.2305 13.2812C13.6602 13.5703 14.2422 13.4531 14.5312 13.0195C14.8203 12.5859 14.7031 12.0078 14.2695 11.7188L10.9375 9.5V4.6875C10.9375 4.16797 10.5195 3.75 10 3.75C9.48047 3.75 9.0625 4.16797 9.0625 4.6875Z"/>
+</g>
+<defs>
+<clipPath id="clip0_5122_43297">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -98,6 +98,7 @@ export type EventData = SingleEvent & {
   photos: EventPhotos[];
   user_id: number | boolean;
   photo_available: 0 | 1;
+  photo_main: 0 | 1;
   photos_left: number;
 };
 

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

@@ -64,6 +64,7 @@ import { Dropdown } from 'react-native-searchable-dropdown-kj';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import Tooltip from 'react-native-walkthrough-tooltip';
 import WebView from 'react-native-webview';
+import ClockIcon from 'assets/icons/events/clock.svg';
 
 type TempFile = {
   filetype: string;
@@ -549,13 +550,60 @@ const EventScreen = ({ route }: { route: any }) => {
 
   const formatEventDate = (event: EventData) => {
     if (event.settings.date_from && event.settings.date_to) {
-      return `${moment(event.settings.date_from, 'YYYY-MM-DD').format('DD MMMM YYYY')} - ${moment(event.settings.date_to, 'YYYY-MM-DD').format('DD MMMM YYYY')}`;
+      return (
+        <View>
+          <Text
+            style={{
+              fontSize: getFontSize(12),
+              fontWeight: '600',
+              color: Colors.DARK_BLUE,
+              flex: 1
+            }}
+          >
+            {moment(event.settings.date_from, 'YYYY-MM-DD').format('DD MMMM YYYY')} -{' '}
+          </Text>
+          <Text
+            style={{
+              fontSize: getFontSize(12),
+              fontWeight: '600',
+              color: Colors.DARK_BLUE,
+              flex: 1
+            }}
+          >
+            {moment(event.settings.date_to, 'YYYY-MM-DD').format('DD MMMM YYYY')}
+          </Text>
+        </View>
+      );
     } else {
       let date = moment(event.settings.date, 'YYYY-MM-DD').format('DD MMMM YYYY');
-      if (event.time) {
-        date += `, ${event.time}`;
-      }
-      return date;
+
+      return (
+        <View>
+          <Text
+            style={{
+              fontSize: getFontSize(12),
+              fontWeight: '600',
+              color: Colors.DARK_BLUE
+            }}
+          >
+            {date}
+          </Text>
+          {event.time && (
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              <ClockIcon fill={Colors.DARK_BLUE} height={12} width={12} />
+              <Text
+                style={{
+                  fontSize: getFontSize(12),
+                  fontWeight: '600',
+                  color: Colors.DARK_BLUE
+                }}
+              >
+                {event.time}
+              </Text>
+            </View>
+          )}
+        </View>
+      );
     }
   };
 
@@ -590,15 +638,56 @@ const EventScreen = ({ route }: { route: any }) => {
     );
   };
 
-  const staticImgUrl =
-    event.type === 2
-      ? '/static/img/events/trip.webp'
-      : event.type === 3
-        ? '/static/img/events/conference.webp'
-        : '/static/img/events/meeting.webp';
-  const photoUrl = event.photo_available
-    ? API_HOST + '/webapi/events/get-main-photo/' + event.id
-    : API_HOST + staticImgUrl;
+  const openMap = () => {
+    const rawCoords = event.settings.location;
+    const coords =
+      typeof rawCoords === 'string' ? JSON.parse(rawCoords.replace(/'/g, '"')) : rawCoords;
+
+    const lat = coords.lat;
+    const lon = coords.lon;
+
+    const url =
+      Platform.OS === 'ios'
+        ? `http://maps.apple.com/?ll=${lat},${lon}`
+        : `geo:${lat},${lon}?q=${lat},${lon}`;
+
+    const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${lat},${lon}`;
+
+    Linking.canOpenURL(googleMapsUrl)
+      .then((supported) => {
+        if (supported) {
+          Linking.openURL(googleMapsUrl);
+        } else {
+          return Linking.canOpenURL(url).then((supportedFallback) => {
+            if (supportedFallback) {
+              Linking.openURL(url);
+            } else {
+              navigation.dispatch(
+                CommonActions.reset({
+                  index: 1,
+                  routes: [
+                    {
+                      name: NAVIGATION_PAGES.IN_APP_MAP_TAB,
+                      state: {
+                        routes: [
+                          {
+                            name: NAVIGATION_PAGES.MAP_TAB,
+                            params: { lat, lon }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                })
+              );
+            }
+          });
+        }
+      })
+      .catch((err) => console.error('Error opening event location', err));
+  };
+
+  const photoUrl = API_HOST + '/webapi/events/get-main-photo/' + event.id;
 
   return (
     <View style={styles.container}>
@@ -708,16 +797,7 @@ const EventScreen = ({ route }: { route: any }) => {
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, flex: 1 }}>
                 <CalendarIcon fill={Colors.DARK_BLUE} height={20} width={20} />
-                <Text
-                  style={{
-                    fontSize: getFontSize(12),
-                    fontWeight: '600',
-                    color: Colors.DARK_BLUE,
-                    flex: 1
-                  }}
-                >
-                  {formatEventDate(event)}
-                </Text>
+                {formatEventDate(event)}
               </View>
 
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, flex: 1 }}>
@@ -737,7 +817,11 @@ const EventScreen = ({ route }: { route: any }) => {
 
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
               {event.settings.address2 && (
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, flex: 1 }}>
+                <TouchableOpacity
+                  onPress={openMap}
+                  disabled={!event.settings.location}
+                  style={{ flexDirection: 'row', alignItems: 'center', gap: 4, flex: 1 }}
+                >
                   <LocationIcon fill={Colors.DARK_BLUE} height={20} width={20} />
                   <Text
                     style={{
@@ -749,7 +833,7 @@ const EventScreen = ({ route }: { route: any }) => {
                   >
                     {event.settings.address2}
                   </Text>
-                </View>
+                </TouchableOpacity>
               )}
 
               {event.settings.registrations_info !== 1 && (

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

@@ -21,6 +21,7 @@ import moment from 'moment';
 import { API_HOST } from 'src/constants';
 import { Grayscale } from 'react-native-color-matrix-image-filters';
 import { renderSpotsText } from './utils';
+import ClockIcon from 'assets/icons/events/clock.svg';
 
 const EventsScreen = () => {
   const token = (storage.get('token', StoreType.STRING) as string) ?? null;
@@ -62,11 +63,7 @@ const EventsScreen = () => {
     if (event.date_from && event.date_to) {
       return `${moment(event.date_from, 'YYYY-MM-DD').format('DD MMM YYYY')} - ${moment(event.date_to, 'YYYY-MM-DD').format('DD MMM YYYY')}`;
     } else {
-      let date = moment(event.date, 'YYYY-MM-DD').format('DD MMMM YYYY');
-      if (event.time) {
-        date += `, ${event.time}`;
-      }
-      return date;
+      return moment(event.date, 'YYYY-MM-DD').format('DD MMMM YYYY');
     }
   };
 
@@ -128,11 +125,21 @@ const EventsScreen = () => {
               {item.name}
             </Text>
 
-            <View style={styles.row}>
-              <CalendarIcon fill={Colors.DARK_BLUE} height={14} width={14} />
-              <Text style={styles.dateAndLocation} numberOfLines={1}>
-                {formatEventDate(item)}
-              </Text>
+            <View style={[styles.row]}>
+              <View style={styles.row}>
+                <CalendarIcon fill={Colors.DARK_BLUE} height={14} width={14} />
+                <Text style={[styles.dateAndLocation, { flex: 0 }]} numberOfLines={1}>
+                  {formatEventDate(item)}
+                </Text>
+              </View>
+              {item.time && (
+                <View style={styles.row}>
+                  <ClockIcon fill={Colors.DARK_BLUE} height={14} width={14} />
+                  <Text style={[styles.dateAndLocation, { flex: 0 }]} numberOfLines={1}>
+                    {item.time}
+                  </Text>
+                </View>
+              )}
             </View>
 
             <View style={styles.row}>

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

@@ -64,7 +64,8 @@ export const styles = StyleSheet.create({
   dateAndLocation: {
     fontSize: getFontSize(12),
     fontWeight: '600',
-    color: Colors.DARK_BLUE
+    color: Colors.DARK_BLUE,
+    flex: 1
   },
   spots: {
     fontSize: 14,