be-components 1.5.3 → 1.5.5

package/src/Engage/index.tsx

@@ -1,16 +1,18 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator, FlatList } from 'react-native';
+import { View, ActivityIndicator, FlatList, ScrollView } from 'react-native';
 import type { BracketCompetitionProps, BracketProps, CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, EventProps, LeagueProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
 import Colors from '../constants/colors';
 import { EngageApi, EngageHelpers } from './api';
 import CompetitionCard from './components/CompetitionCard';
 import { view_styles } from '../constants/styles';
-import { Button, Text } from '../Components';
+import { Button, Icons, Text } from '../Components';
 import SquaresCompetitionCard from './components/SquaresCompetitionCard';
 import BracketCompetitionCard from './components/BracketCompetitionCard';
 import moment from 'moment-mini';
 import SocketManager from '../Socket';
 import SeasonCard from './components/SeasonCard';
+import EngageHeader from './components/EngageHeader';
+import PrivateCodePrompt from './components/PrivateCodePrompt';
 
 
 type EngageModuleProps = {
@@ -29,6 +31,7 @@ const EngageModule = ({ onSelectBracketCompetition, onSelectCompetition, onSelec
     onCreateSeason, onCreateCompetition, onCreateBracketCompetition, onCreateSquares
  }:EngageModuleProps) => {
     const [ module_size, setModuleSize ] = useState({ width:0, height:0 });
+    const [ show_code_prompt, setShowCodePrompt ] = useState(false);
     const [ socket_state, setSocketState ] = useState<{
         connected:boolean,
         reload_needed?:boolean
@@ -67,7 +70,6 @@ const EngageModule = ({ onSelectBracketCompetition, onSelectCompetition, onSelec
     });
     const { loading, competitions, competition_seasons, competition_result_types, squares_competitions, brackets, leagues, bracket_competitions, events, competition_types, companies, players } = module_data;
 
-
     useEffect(() => {
         EngageApi.setEnvironment();
         getDataFromServer()
@@ -118,6 +120,7 @@ const EngageModule = ({ onSelectBracketCompetition, onSelectCompetition, onSelec
         })
     }
 
+
     const renderSquaresCompetitions = (data: { item:SquaresCompetitionProps, index:number }) => {
         const admin = players.find(p => p.player_id == data.item.admin_id);
         const company = companies.find(c => c.company_id == data.item.company_id);
@@ -200,152 +203,198 @@ const EngageModule = ({ onSelectBracketCompetition, onSelectCompetition, onSelec
     }
 
     return (
-        <View style={{ flex:1, backgroundColor:Colors.shades.white }} onLayout={(ev) => {
-            const { height, width } = ev.nativeEvent.layout;
-            setModuleSize({ width, height })
-        }}>
-            <View style={{ ...view_styles.body_row, margin:10, backgroundColor:Colors.shades.white, borderRadius:22, borderWidth:4, borderColor:Colors.shades.shade100}}>
-                <Button
-                    title='COMPETITIONS'
-                    title_color={active_tab == 'competitions' ? Colors.shades.white : Colors.brand.midnight}
-                    title_weight={active_tab == 'competitions' ? 'bold' : 'regular'}
-                    padding={15}
-                    title_size={12}
-                    style={{flex:1}}
-                    borderRadiusOverride={{
-                        borderTopLeftRadius: 22,
-                        borderBottomLeftRadius:22,
-                        borderTopRightRadius:0,
-                        borderBottomRightRadius:0
-                    }}
-                    backgroundColor={active_tab == 'competitions' ? Colors.brand.midnight : Colors.shades.white}
-                    onPress={() => setActiveTab('competitions')}
+        <View style={{ flex:1, backgroundColor:Colors.shades.white }} >
+            <ScrollView style={{ flex:1 }} onLayout={(ev) => {
+                const { height, width } = ev.nativeEvent.layout;
+                setModuleSize({ width, height })
+            }}>
+                <EngageHeader
+                    companies={companies}
+                    width={module_size.width}
                 />
-                <Button
-                    title='SQUARES'
-                    title_size={12}
-                    title_color={active_tab == 'squares' ? Colors.shades.white : Colors.brand.midnight}
-                    title_weight={active_tab == 'squares' ? 'bold' : 'regular'}
-                    padding={15}
-                    style={{flex:1}}
-                    borderRadius={0}
-                    backgroundColor={active_tab == 'squares' ? Colors.brand.midnight : Colors.shades.white}
-                    onPress={() => setActiveTab('squares')}
-                />
-                <Button
-                    title='BRACKETS'
-                    style={{flex:1}}
-                    title_size={12}
-                    title_color={active_tab == 'brackets' ? Colors.shades.white : Colors.brand.midnight}
-                    title_weight={active_tab == 'brackets' ? 'bold' : 'regular'}
-                    padding={15}
-                    borderRadiusOverride={{
-                        borderTopLeftRadius: 0,
-                        borderBottomLeftRadius:0,
-                        borderTopRightRadius:22,
-                        borderBottomRightRadius:22
-                    }}
-                    backgroundColor={active_tab == 'brackets' ? Colors.brand.midnight : Colors.shades.white}
-                    onPress={() => setActiveTab('brackets')}
-                />
-            </View>
-            {active_tab == 'competitions' ?
-            <View style={{ ...view_styles.section_body, justifyContent:'flex-start', padding:0 }}>
-                {competition_seasons.length > 0 ?
-                <View>
-                    <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0, marginBottom:10 }}>
-                        <View style={{ flex:1 }}>
-                            <Text theme='header'>Public Seasons</Text>
-                            <Text style={{ marginTop:3 }} theme='body'>Seasons are multi-competition contests. Payouts are split between each competition and the season long winners.</Text>
-                        </View>
-                        {onCreateSeason ?
-                        <Button
-                            title='NEW'
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.utility.success}
-                            onPress={() => onCreateSeason()}
-                        />
-                        :<></>}
+                <View style={{ ...view_styles.body_row, margin:10, backgroundColor:Colors.shades.white, borderRadius:22, borderWidth:4, borderColor:Colors.shades.shade100}}>
+                    <Button
+                        title='COMPETITIONS'
+                        title_color={active_tab == 'competitions' ? Colors.shades.white : Colors.brand.midnight}
+                        title_weight={active_tab == 'competitions' ? 'bold' : 'regular'}
+                        padding={15}
+                        title_size={12}
+                        style={{flex:1}}
+                        borderRadiusOverride={{
+                            borderTopLeftRadius: 22,
+                            borderBottomLeftRadius:22,
+                            borderTopRightRadius:0,
+                            borderBottomRightRadius:0
+                        }}
+                        backgroundColor={active_tab == 'competitions' ? Colors.brand.midnight : Colors.shades.white}
+                        onPress={() => setActiveTab('competitions')}
+                    />
+                    <Button
+                        title='SQUARES'
+                        title_size={12}
+                        title_color={active_tab == 'squares' ? Colors.shades.white : Colors.brand.midnight}
+                        title_weight={active_tab == 'squares' ? 'bold' : 'regular'}
+                        padding={15}
+                        style={{flex:1}}
+                        borderRadius={0}
+                        backgroundColor={active_tab == 'squares' ? Colors.brand.midnight : Colors.shades.white}
+                        onPress={() => setActiveTab('squares')}
+                    />
+                    <Button
+                        title='BRACKETS'
+                        style={{flex:1}}
+                        title_size={12}
+                        title_color={active_tab == 'brackets' ? Colors.shades.white : Colors.brand.midnight}
+                        title_weight={active_tab == 'brackets' ? 'bold' : 'regular'}
+                        padding={15}
+                        borderRadiusOverride={{
+                            borderTopLeftRadius: 0,
+                            borderBottomLeftRadius:0,
+                            borderTopRightRadius:22,
+                            borderBottomRightRadius:22
+                        }}
+                        backgroundColor={active_tab == 'brackets' ? Colors.brand.midnight : Colors.shades.white}
+                        onPress={() => setActiveTab('brackets')}
+                    />
+                </View>
+                <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade600, borderRadius:0, marginBottom:10 }}>
+                    <Icons.EyeOffIcon size={18} color={Colors.brand.midnight} />
+                    <View style={{ flex:1, marginLeft:10 }}>
+                        <Text theme='header'>Find Private</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Did you receive a private code? Enter it here.</Text>
                     </View>
-                    <FlatList
-                        data={competition_seasons.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
-                        horizontal
-                        keyExtractor={(item) => item.competition_season_id.toString()}
-                        renderItem={renderSeasons}
+                    <Button
+                        title='ENTER PRIVATE CODE'
+                        padding={15}
+                        title_color={Colors.shades.white}
+                        backgroundColor={Colors.utility.success}
+                        onPress={() => setShowCodePrompt(true)}
                     />
                 </View>
-                :<></>}
-                <View style={{ marginBottom:15, marginTop:10 }}>
-                    <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0 }}>
-                        <View style={{ flex:1 }}>
-                            <Text theme='header'>Public Competitions</Text>
-                            <Text style={{ marginTop:3 }} theme='body'>Below are available pick-em and wager based competitions.  All competitions are offered with 0 fees. All ticket sales are paid out to the winners!</Text>
+                {active_tab == 'competitions' ?
+                <View style={{ ...view_styles.section_body, justifyContent:'flex-start', padding:0 }}>
+                    {competition_seasons.length > 0 ?
+                    <View style={{ marginTop:10 }}>
+                        <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0, marginBottom:10 }}>
+                            <View style={{ flex:1 }}>
+                                <Text theme='header'>Public Seasons</Text>
+                                <Text style={{ marginTop:3 }} theme='body'>Seasons are multi-competition contests. Payouts are split between each competition and the season long winners.</Text>
+                            </View>
+                            {onCreateSeason ?
+                            <Button
+                                title='NEW'
+                                title_color={Colors.shades.white}
+                                backgroundColor={Colors.utility.success}
+                                onPress={() => onCreateSeason()}
+                            />
+                            :<></>}
                         </View>
-                        {onCreateCompetition ?
-                        <Button
-                            title='NEW'
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.utility.success}
-                            onPress={() => onCreateCompetition()}
+                        <FlatList
+                            data={competition_seasons.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
+                            horizontal
+                            keyExtractor={(item) => item.competition_season_id.toString()}
+                            renderItem={renderSeasons}
                         />
-                        :<></>}
                     </View>
+                    :<></>}
+                    <View style={{ marginBottom:15, marginTop:10 }}>
+                        <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0 }}>
+                            <View style={{ flex:1 }}>
+                                <Text theme='header'>Public Competitions</Text>
+                                <Text style={{ marginTop:3 }} theme='body'>Below are available pick-em and wager based competitions.  All competitions are offered with 0 fees. All ticket sales are paid out to the winners!</Text>
+                            </View>
+                            {onCreateCompetition ?
+                            <Button
+                                title='NEW'
+                                title_color={Colors.shades.white}
+                                backgroundColor={Colors.utility.success}
+                                onPress={() => onCreateCompetition()}
+                            />
+                            :<></>}
+                        </View>
+                    </View>
+                    <FlatList
+                        data={competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
+                        renderItem={renderCompetitions}
+                        keyExtractor={(item) => item.competition_id.toString()}
+                    />
                 </View>
-                <FlatList
-                    data={competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
-                    renderItem={renderCompetitions}
-                    keyExtractor={(item) => item.competition_id.toString()}
-                />
-            </View>
-            :active_tab == 'squares' ?
-            <View style={{ ...view_styles.section_body, padding:0 }}>
-                <View style={{ marginBottom:15, marginTop:10 }}>
-                    <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0 }}>
-                        <View style={{ flex:1 }}>
-                            <Text theme='header'>Public Auction Squares</Text>
-                            <Text style={{ marginTop:3 }} theme='body'>Below are available squares competitions.  Bid on squares until the auction period ends.  Win $ and prizes when your square hits at the end of each quarter!</Text>
+                :active_tab == 'squares' ?
+                <View style={{ ...view_styles.section_body, padding:0 }}>
+                    <View style={{ marginBottom:15, marginTop:10 }}>
+                        <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0 }}>
+                            <View style={{ flex:1 }}>
+                                <Text theme='header'>Public Auction Squares</Text>
+                                <Text style={{ marginTop:3 }} theme='body'>Below are available squares competitions.  Bid on squares until the auction period ends.  Win $ and prizes when your square hits at the end of each quarter!</Text>
+                            </View>
+                            {onCreateSquares ?
+                            <Button
+                                title='NEW'
+                                title_color={Colors.shades.white}
+                                backgroundColor={Colors.utility.success}
+                                onPress={() => onCreateSquares()}
+                            />
+                            :<></>}
                         </View>
-                        {onCreateSquares ?
-                        <Button
-                            title='NEW'
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.utility.success}
-                            onPress={() => onCreateSquares()}
-                        />
-                        :<></>}
                     </View>
+                    <FlatList
+                        data={squares_competitions.sort((a,b) => moment(a.begin_datetime).unix() - moment(b.begin_datetime).unix())}
+                        renderItem={renderSquaresCompetitions}
+                        keyExtractor={(item) => item.sq_comp_id.toString()}
+                    />
                 </View>
-                <FlatList
-                    data={squares_competitions.sort((a,b) => moment(a.begin_datetime).unix() - moment(b.begin_datetime).unix())}
-                    renderItem={renderSquaresCompetitions}
-                    keyExtractor={(item) => item.sq_comp_id.toString()}
-                />
-            </View>
-            :active_tab == 'brackets' ?
-            <View style={{ ...view_styles.section_body, padding:0 }}>
-                <View style={{ marginBottom:15, marginTop:10 }}>
-                    <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0 }}>
-                        <View style={{ flex:1 }}>
-                            <Text theme='header'>Public Bracket Competitions</Text>
-                            <Text style={{ marginTop:3 }} theme='body'>Below are available bracket competitions.  All competitions are offered with 0 fees. All ticket sales are paid out to the winners!</Text>
+                :active_tab == 'brackets' ?
+                <View style={{ ...view_styles.section_body, padding:0 }}>
+                    <View style={{ marginBottom:15, marginTop:10 }}>
+                        <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0 }}>
+                            <View style={{ flex:1 }}>
+                                <Text theme='header'>Public Bracket Competitions</Text>
+                                <Text style={{ marginTop:3 }} theme='body'>Below are available bracket competitions.  All competitions are offered with 0 fees. All ticket sales are paid out to the winners!</Text>
+                            </View>
+                            {onCreateBracketCompetition ?
+                            <Button
+                                title='NEW'
+                                title_color={Colors.shades.white}
+                                backgroundColor={Colors.utility.success}
+                                onPress={() => onCreateBracketCompetition()}
+                            />
+                            :<></>}
                         </View>
-                        {onCreateBracketCompetition ?
-                        <Button
-                            title='NEW'
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.utility.success}
-                            onPress={() => onCreateBracketCompetition()}
-                        />
-                        :<></>}
                     </View>
+                    <FlatList
+                        data={bracket_competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
+                        renderItem={renderBracketCompetitions}
+                        keyExtractor={(item) => item.bracket_competition_id.toString()}
+                    />
                 </View>
-                <FlatList
-                    data={bracket_competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
-                    renderItem={renderBracketCompetitions}
-                    keyExtractor={(item) => item.bracket_competition_id.toString()}
+                :<></>}
+            </ScrollView>
+            {show_code_prompt ?
+            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'flex-end', backgroundColor:Colors.shades.black_faded_heavy }}>
+                <PrivateCodePrompt
+                    width={module_size.width - 20}
+                    onFoundBracket={(b) => {
+                        onSelectBracketCompetition(b)
+                        setShowCodePrompt(false);
+                    }}
+                    onFoundCompetition={(c) => {
+                        onSelectCompetition(c)
+                        setShowCodePrompt(false);
+
+                    }}
+                    onFoundSeason={(s) => {
+                        onSelectCompetitionSeason(s)
+                        setShowCodePrompt(false);
+                    }} 
+                    onFoundSquaresCompetition={(sc) => {
+                        onSelectSquaresCompetition(sc)
+                        setShowCodePrompt(false);
+                    }}
+                    onClose={() => setShowCodePrompt(false)}
                 />
             </View>
             :<></>}
+
             <SocketManager
                 onConnect={() => setSocketState({ ...socket_state, connected: true })}
                 subscribed_events={[]}

package/src/types.d.ts

@@ -39,6 +39,7 @@ export interface CompanyProps {
         width?:number,
         height?:number
     },
+    company_url?:string,
     brand_primary?:string,
     brand_secondary?:string,
     advertising_enabled:boolean,