be-components 1.5.4 → 1.5.5

package/src/Engage/components/EngageHeader.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react';
+import { View, Image, FlatList, TouchableOpacity, ActivityIndicator } from "react-native";
+import type { CompanyProps } from '../../types';
+import LinearGradient from 'react-native-linear-gradient';
+import Colors from '../../constants/colors';
+import { Icons, Text } from '../../Components';
+import { view_styles } from '../../constants/styles';
+import CompanyCard from './CompanyCard';
+import SearchBox from '../../Components/SearchBox';
+import { EngageApi } from '../api';
+
+type EngageHeaderProps = {
+    companies:CompanyProps[],
+    width:number
+}
+
+const EngageHeader = ({ companies, width }:EngageHeaderProps) => {
+    const [ active_company, setActiveComany ] = useState<number>(0);
+    const [ search, setSearch ] = useState<{
+        loading:boolean,
+        active: boolean,
+        value: string,
+        offset: number
+    }>({
+        loading:false,
+        active: false,
+        value: 'a',
+        offset:0
+    });
+    const [ found_companies, setFoundCompanies ] = useState<CompanyProps[]>([]);
+    const { active, loading, value } = search;
+
+    let filtered_companies = [ ...found_companies ]
+    filtered_companies = filtered_companies.filter(c => c.company_name.toLowerCase().includes(value.toLowerCase()))
+
+    useEffect(() => {
+        getCompaniesFromServer(0);
+    },[])
+
+    useEffect(() => {
+        if(companies.length == 0){ return }
+        setActiveComany(0)
+    },[companies.length])
+
+    useEffect(() => {
+        if(companies.length == 0){ return }
+        let next_company_index = active_company + 1
+        let next_company = companies[next_company_index]
+        if(!next_company){ next_company_index = 0 }
+        setTimeout(() => {
+            setActiveComany(next_company_index)
+        }, 3000);
+    },[active_company])
+
+    const getCompaniesFromServer = async(offset:number) => {
+        const cpnys = await EngageApi.searchCompanies(value, offset);
+        setSearch({ ...search, loading: false, offset })
+        setFoundCompanies(cpnys);
+    }
+
+    const renderCompanies = (data:{ item:CompanyProps, index:number }) => {
+        return (
+            <View>
+                <CompanyCard
+                    company={data.item}
+                    width={width / 2.5}
+                />
+            </View>
+        )
+    }
+
+    const company = companies[active_company]
+
+    return (
+        <View>
+            <LinearGradient colors={[Colors.brand.midnightTopGradient, Colors.brand.midnight ]} style={{ padding:20, flexDirection:'row', alignItems:'center' }}>
+                <View style={{ borderRadius:100, height:75, width:75, backgroundColor:Colors.shades.white, justifyContent:'center', alignItems:'center', ...view_styles.float }}>
+                    {company ?
+                    <Image
+                        source={{ uri: company.company_image?.url }}
+                        style={{ height:50, width:50 }}
+                        resizeMode='cover'
+                    />
+                    :<></>}
+                </View>
+                <View style={{ flex:1, marginLeft:20 }}>
+                    <Text size={20} weight='bold' color={Colors.shades.white}>Engage with our partners</Text>
+                    <Text style={{ marginTop:10 }} size={14} weight='regular' color={Colors.shades.white}>Competitions, squares, brackets are all brought to you without fees thanks to our amazing partners.</Text>
+                </View>
+            </LinearGradient>
+            <View nativeID='brands'>
+                <TouchableOpacity style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100, borderRadius:0, marginBottom:10 }} onPress={() => setSearch({ ...search, active: !active })}>
+                    <View style={{ flex:1, marginRight:10 }}>
+                        <Text theme='header'>{active?'Search':'Support'} Our Partners!</Text>
+                        {active ?
+                        <Text style={{ marginTop:3 }} theme='body'>Use the search box below to find a brand that you're interested in!</Text>
+                        :
+                        <Text style={{ marginTop:3 }} theme='body'>Below are brands that currently have availble competitions!</Text>
+                        }
+                    </View>
+                    {active ?
+                    <Icons.CloseIcon color={Colors.utility.error} size={18} />
+                    :
+                    <Icons.SearchIcon color={Colors.brand.midnight} size={18} />
+                    }
+                </TouchableOpacity>
+                {active ?
+                <View>
+                    <View style={{ marginBottom:10 }}>
+                        <SearchBox
+                            placeholder='Search our brands'
+                            onChange={(text) => setSearch({ ...search, value: text })}
+                            onSearch={() => getCompaniesFromServer(0)}
+                        />
+                    </View>
+                    {loading ?
+                    <ActivityIndicator size='large' color={Colors.brand.midnight} />
+                    :<></>}
+                    <FlatList
+                        data={filtered_companies}
+                        renderItem={renderCompanies}
+                        horizontal
+                        keyExtractor={(item) => item.company_id.toString()}
+                    />
+                </View>
+                :
+                <FlatList
+                    data={companies}
+                    renderItem={renderCompanies}
+                    horizontal
+                    keyExtractor={(item) => item.company_id}
+                />
+                }
+            </View>
+        </View>
+    )
+}
+
+export default EngageHeader

package/src/Engage/components/PrivateCodePrompt.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { View } from "react-native"
+import type { BracketCompetitionProps, CompetitionProps, CompetitionSeasonProps, SquaresCompetitionProps } from '../../types';
+import { view_styles } from '../../constants/styles';
+import { Button, Icons, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import { EngageApi } from '../api';
+
+type PrivateCodePromptProps = {
+    width:number,
+    onFoundCompetition:(c:CompetitionProps) => void,
+    onFoundSquaresCompetition:(sc:SquaresCompetitionProps) => void,
+    onFoundSeason:(cs:CompetitionSeasonProps) => void,
+    onFoundBracket:(b:BracketCompetitionProps) => void,
+    onClose:() => void
+}
+
+const PrivateCodePrompt = ({ width, onFoundCompetition, onFoundSquaresCompetition, onFoundSeason, onFoundBracket, onClose }:PrivateCodePromptProps) => {
+    const [ search, setSearch ] = useState<{
+        loading:boolean,
+        value: string,
+    }>({
+        loading:false,
+        value: ''
+    });
+    const [ error, setError ] = useState<string|undefined>();
+    const { loading, value } = search;
+
+    const handleSearch = async() => {
+        setSearch({ ...search, loading:true });
+        const result = await EngageApi.getPrivateEngage(value);
+        setSearch({ ...search, loading:false });
+        if(result.competition){ return onFoundCompetition(result.competition) }
+        if(result.competition_season){ return onFoundSeason(result.competition_season) }
+        if(result.bracket_competition){ return onFoundBracket(result.bracket_competition) }
+        if(result.squares_competition){ return onFoundSquaresCompetition(result.squares_competition) }
+        setError('Sorry! We could not find any competitions, squares, brackets with that code.')
+    }
+
+    const search_valid = value ? true : false
+    return (
+        <View style={{ ...view_styles.section, width }}>
+            <View style={{ ...view_styles.section_header, padding:15 }}>
+                <Icons.SearchIcon color={Colors.brand.midnight} size={20}/>
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header'>Find Private Competition!</Text>
+                </View>
+            </View>
+            <View style={{ ...view_styles.section_body }}>
+                <View style={{ borderRadius:8, backgroundColor:Colors.shades.shade100, padding:10 }}>
+                    <Text size={18} color={Colors.brand.midnight} textAlign='center' weight='bold'>Did you receive a private code?</Text>
+                    <Text style={{ marginTop:10 }} size={14} color={Colors.brand.midnight} textAlign='center' weight='regular'>Enter the code in the input section below and press FIND.  If we find the competition / squares / bracket, we will send you to it!</Text>
+
+                    <TextInput
+                        style={{ ...view_styles.input, marginTop:20, textAlign:'center', borderRadius:22, padding:15 }}
+                        placeholder='Enter Private Code'
+                        placeholderTextColor={Colors.brand.slate}
+                        onChangeText={(text) => {
+                            if(error){ setError(undefined) }
+                            setSearch({ ...search, value:text })
+                        }}
+                    />
+                    {error?
+                    <View style={{ marginTop:10, padding:10 }}>
+                        <Text size={14} color={Colors.utility.error} weight='bold' textAlign='center'>{error}</Text>
+                    </View>
+                    :<></>}
+                </View>
+            </View>
+            <View style={{ ...view_styles.section_footer }}>
+                <Button
+                    title='CANCEL'
+                    backgroundColor={Colors.utility.error}
+                    title_color={Colors.shades.white}
+                    style={{ marginRight:5 }}
+                    padding={15}
+                    onPress={() => onClose()}
+                />
+                <Button
+                    style={{ flex:1, opacity:search_valid&&!loading?1:0.5 }}
+                    padding={15}
+                    disabled={loading || !search_valid}
+                    loading={loading}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    title='FIND'
+                    onPress={async() => handleSearch()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default PrivateCodePrompt

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,