Añadido anuncio de crowdfunding con texto provisional

confusiontech · Sep 25, 2023 · e81156b · e81156b
1 parent 349c4c9
commit e81156b
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 11 deletions.
diff --git a/App.js b/App.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { NativeBaseProvider } from 'native-base';
 import 'react-native-gesture-handler';
 import ProgramContainer from './src/containers/program-container';
@@ -10,6 +10,7 @@ import SpaceProgramContainer from './src/containers/space-program-container';
 import SpaceListContainer from './src/containers/space-list-container';
 import InfoContainer from './src/containers/info-container';
 import ProgramUpdater from './src/services/program-updater';
+import Announcement from './src/components/announcement';
 import { ProgramContextProvider } from './src/services/program-context';
 import { NavigationContainer } from '@react-navigation/native';
 
@@ -18,9 +19,11 @@ import { createStackNavigator } from '@react-navigation/stack';
 const Stack = createStackNavigator();
 
 export default function App() {
+  const navigationRef = useRef(null);
+
   return (
     <NativeBaseProvider>
-      <NavigationContainer>
+      <NavigationContainer ref={navigationRef}>
         <ProgramContextProvider>
           <ProgramUpdater />
           <Stack.Navigator>
@@ -33,6 +36,7 @@ export default function App() {
             <Stack.Screen name='Espacios' component={SpaceListContainer} />
             <Stack.Screen name='Info' component={InfoContainer} />
           </Stack.Navigator>
+          <Announcement navigationRef={navigationRef} />
         </ProgramContextProvider>
       </NavigationContainer>
     </NativeBaseProvider>

diff --git a/src/components/announcement.js b/src/components/announcement.js
@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, TouchableHighlight, Linking } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { Center, Button, Modal } from 'native-base';
+import { CROWDFUNDING_URL, CROWDFUNDING_START, CROWDFUNDING_END } from '../event-properties';
+import { getNow } from '../helpers/program-helpers';
+import { getEsMoment } from '../helpers/date-helpers';
+
+import {
+  TOUCHABLE_UNDERLAY_COLOR,
+  LINK_COLOR
+} from '../styles/colors';
+
+import { iconsMap } from '../helpers/icon-helpers';
+
+const Announcement = ({ navigationRef }) => {
+  const [showAnnouncement, setShowAnnouncement] = useState(false);
+
+  const openInfo = () => {
+    setShowAnnouncement(false);
+    navigationRef.current.navigate('Info', {});
+  };
+
+  useEffect(() => {
+    const nowDt = getEsMoment(getNow());
+    if (nowDt >= getEsMoment(CROWDFUNDING_START) && nowDt < getEsMoment(CROWDFUNDING_END)) {
+      AsyncStorage.getItem('announcementHasBeenShown')
+        .then((value) => {
+          if (!value) {
+            setShowAnnouncement(true);
+            AsyncStorage.setItem('announcementHasBeenShown', 'true');
+          }
+        })
+        .catch((error) => {
+          console.error('Error getting announcement storage:', error);
+        });
+    }
+  }, []);
+
+  if (!showAnnouncement) {
+    return null;
+  }
+
+  return (
+    <Center>
+      <Modal isOpen={showAnnouncement} onClose={() => setShowAnnouncement(false)} size='lg'>
+        <Modal.Content>
+          <Modal.CloseButton />
+          <Modal.Header><Text style={styles.headerText}>Información Importante!</Text></Modal.Header>
+          <Modal.Body>
+            <Text style={styles.bodyText}>Este año tenemos crowdfunding...</Text>
+            <TouchableHighlight
+              activeOpacity={0.9}
+              underlayColor={TOUCHABLE_UNDERLAY_COLOR}
+              onPress={() => Linking.openURL(CROWDFUNDING_URL)}
+            >
+              <View style={styles.linkContainer}>
+                <Text> {iconsMap.get('crowdfunding', { color: LINK_COLOR })} </Text>
+                <Text style={styles.link}> Ir a Crowdfunding </Text>
+              </View>
+            </TouchableHighlight>
+
+            <Text style={styles.bodyText}>
+              Si no quieres visitar la página ahora, puedes encontrar el enlace en la pantalla de <Text style={styles.inlineLink} onPress={() => openInfo()}>Info {iconsMap.get('info', { size: 14, color: LINK_COLOR })}</Text>
+            </Text>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button.Group space={2}>
+              <Button style={styles.buttonText} onPress={() => setShowAnnouncement(false)}>Cerrar</Button>
+            </Button.Group>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+    </Center>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerText: {
+    fontWeight: 'bold',
+    fontSize: 22
+  },
+  bodyText: {
+    fontSize: 18
+  },
+  buttonText: {
+    color: LINK_COLOR,
+    fontWeight: 'bold',
+    letterSpacing: 0.5
+  },
+  linkContainer: {
+    flexDirection: 'row',
+    paddingVertical: 4,
+    alignItems: 'center'
+  },
+  link: {
+    fontWeight: 'bold',
+    color: LINK_COLOR,
+    fontSize: 16
+  },
+  inlineLink: {
+    color: LINK_COLOR
+  }
+});
+
+export default Announcement;
diff --git a/src/components/draw-attention-view.js b/src/components/draw-attention-view.js
@@ -5,17 +5,19 @@ import { Animated } from 'react-native';
 export default function DrawAttentionView(props) {
   const fadeAnim = useRef(new Animated.Value(0)).current;
 
+  const duration = props.duration || 666;
+
   useEffect(() => {
     Animated.loop(
       Animated.sequence([
         Animated.timing(fadeAnim, {
           toValue: 1,
-          duration: 666,
+          duration,
           useNativeDriver: true
         }),
         Animated.timing(fadeAnim, {
           toValue: 0.0,
-          duration: 666,
+          duration,
           useNativeDriver: true
         })
       ])

diff --git a/src/containers/info-container.js b/src/containers/info-container.js
@@ -1,17 +1,36 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, StyleSheet, Text, Linking, TouchableHighlight, ScrollView } from 'react-native';
 import PageLayout from './page-layout';
 import { iconsMap } from '../helpers/icon-helpers';
+import DrawAttentionView from '../components/draw-attention-view';
 
 import {
   LINK_COLOR,
   TOUCHABLE_UNDERLAY_COLOR
 } from '../styles/colors';
 
+import {
+  CROWDFUNDING_URL,
+  CROWDFUNDING_START,
+  CROWDFUNDING_END,
+  WEB_URL,
+  INSTAGRAM_URL,
+  YOUTUBE_URL
+} from '../event-properties';
+import { getEsMoment } from '../helpers/date-helpers';
+import { getNow } from '../helpers/program-helpers';
+
 const InfoContainer = ({ navigation }) => {
-  const WEB_URL = 'https://beniconfusionfest.es/es/inicio';
-  const INSTAGRAM_URL = 'https://www.instagram.com/benimacletconfusion/';
-  const YOUTUBE_URL = 'https://www.youtube.com/c/conFusi%C3%B3nfest/featured';
+  const [crowdfundintActive, setCrowdfundingActive] = useState(false);
+
+  useEffect(() => {
+    const nowDt = getEsMoment(getNow());
+    if (nowDt >= getEsMoment(CROWDFUNDING_START) && nowDt < getEsMoment(CROWDFUNDING_END)) {
+      setCrowdfundingActive(true);
+    } else {
+      setCrowdfundingActive(false);
+    }
+  });
 
   return (
     <PageLayout navigation={navigation}>
@@ -38,7 +57,7 @@ const InfoContainer = ({ navigation }) => {
             onPress={() => Linking.openURL(INSTAGRAM_URL)}
           >
             <View style={styles.linkContainer}>
-              <Text> {iconsMap.get('instagram', { color: LINK_COLOR })} </Text>
+              <Text>{iconsMap.get('instagram', { color: LINK_COLOR })}</Text>
               <Text style={styles.link}> @benimacletconfusion </Text>
             </View>
           </TouchableHighlight>
@@ -52,6 +71,17 @@ const InfoContainer = ({ navigation }) => {
               <Text style={styles.link}> Benimaclet conFusión </Text>
             </View>
           </TouchableHighlight>
+          {crowdfundintActive &&
+            <TouchableHighlight
+              activeOpacity={0.9}
+              underlayColor={TOUCHABLE_UNDERLAY_COLOR}
+              onPress={() => Linking.openURL(CROWDFUNDING_URL)}
+            >
+              <View style={styles.linkContainer}>
+                <DrawAttentionView duration='1000'><Text> {iconsMap.get('crowdfunding', { color: LINK_COLOR, size: 28 })} </Text></DrawAttentionView>
+                <Text style={styles.linkImportant}> Ayúdanos participando en el crowdfunding! </Text>
+              </View>
+            </TouchableHighlight>}
         </View>
         <View style={styles.textContainer}>
           <Text style={styles.normalText}>
@@ -106,6 +136,11 @@ const styles = StyleSheet.create({
     color: LINK_COLOR,
     fontSize: 14
   },
+  linkImportant: {
+    fontWeight: 'bold',
+    color: LINK_COLOR,
+    fontSize: 16
+  },
   linksContainer: {
     paddingHorizontal: 12,
     marginBottom: 12

diff --git a/src/event-properties.js b/src/event-properties.js
@@ -25,3 +25,11 @@ export const EVENT_CATEGORIES_INFO = [
 export const EVENT_CATEGORIES = EVENT_CATEGORIES_INFO.map(categoryInfo =>
   [categoryInfo.id, categoryInfo.name]
 );
+
+export const CROWDFUNDING_URL = 'https://vkm.is/confusion10';
+export const CROWDFUNDING_START = '2023-10-01';
+export const CROWDFUNDING_END = '2023-10-16';
+
+export const WEB_URL = 'https://beniconfusionfest.es/es/inicio';
+export const INSTAGRAM_URL = 'https://www.instagram.com/benimacletconfusion/';
+export const YOUTUBE_URL = 'https://www.youtube.com/c/conFusi%C3%B3nfest/featured';
diff --git a/src/helpers/icon-helpers.js b/src/helpers/icon-helpers.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Feather, FontAwesome5, MaterialCommunityIcons, AntDesign, Ionicons, Entypo } from '@expo/vector-icons';
+import { Feather, FontAwesome5, MaterialIcons, MaterialCommunityIcons, AntDesign, Ionicons, Entypo } from '@expo/vector-icons';
 
 const values = new Map([
   ['0', ({ size, color, styleClass }) => <FontAwesome5 name='theater-masks' size={size} color={color} style={styleClass} key='theater-masks' />],
@@ -27,7 +27,8 @@ const values = new Map([
   ['fusion', ({ size, color, styleClass }) => <FontAwesome5 name='users' size={size} color={color} style={styleClass} solid key='users' />],
   ['instagram', ({ size, color, styleClass }) => <FontAwesome5 name='instagram' size={size} color={color} style={styleClass} solid key='instagram' />],
   ['youtube', ({ size, color, styleClass }) => <Ionicons name='logo-youtube' size={size} color={color} style={styleClass} solid key='logo-youtube' />],
-  ['web', ({ size, color, styleClass }) => <MaterialCommunityIcons name='web' size={size} color={color} style={styleClass} solid key='web' />]
+  ['web', ({ size, color, styleClass }) => <MaterialCommunityIcons name='web' size={size} color={color} style={styleClass} solid key='web' />],
+  ['crowdfunding', ({ size, color, styleClass }) => <MaterialIcons name='volunteer-activism' size={size} color={color} style={styleClass} solid key='volunteer-activism' />]
 ]);
 
 export const iconsMap = {