be-components 6.7.8 → 6.8.0

package/src/CompetitionManager/components/CompetitionSettingsForm.tsx

@@ -12,7 +12,6 @@ type CompetitionSettingsFormProps = {
     player?: MyPlayerProps,
     competition: CompetitionProps,
     init_expanded?:boolean,
-    is_valid?:boolean,
     onFocusPosition?:(position:FocusPositionProps) => void,
     competition_result_types:CompetitionResultTypeProps[],
     onShowPacers:() => void,
@@ -21,7 +20,7 @@ type CompetitionSettingsFormProps = {
 
 const market_types = ['FOR_MONEY', 'FREE']
 
-const CompetitionSettingsForm = ({ is_valid, init_expanded, onFocusPosition, player, competition, competition_result_types, onCompetitionUpdate, onShowPacers }: CompetitionSettingsFormProps) => {
+const CompetitionSettingsForm = ({ init_expanded, onFocusPosition, player, competition, competition_result_types, onCompetitionUpdate, onShowPacers }: CompetitionSettingsFormProps) => {
     const [ expanded, setExpanded ] = useState(init_expanded ?? false);
     const [ draft_competition, setDraftCompetition ] = useState<CompetitionProps | undefined>(undefined);
     //const [ player_selector_visible, setPlayerSelectorVisible ] = useState(false);
@@ -55,25 +54,20 @@ const CompetitionSettingsForm = ({ is_valid, init_expanded, onFocusPosition, pla
 
     if(!competition || !draft_competition){ return <></> }
     const is_changed = JSON.stringify(competition) != JSON.stringify(draft_competition) ? true : false
-
     return (
         <View float style={{ flexGrow:1, borderRadius:0 }}>
             <Button 
                 disabled={init_expanded}
-            float style={{ flexDirection:'row', alignItems:'center', borderRadius:0 }} onPress={() => setExpanded(!expanded)}>
-                {is_valid ?
-                <Icons.CheckCirlceIcon size={16} color={Colors.text.success} />
-                :
-                <Icons.AlertIcon size={16} color={Colors.text.warning} />
-                }
+            float style={{ flexDirection:'row', alignItems:'center', borderRadius:0, padding:20, backgroundColor:Colors.toggle.button.active }} onPress={() => setExpanded(!expanded)}>
                 <View transparent style={{ flex:1, marginLeft:10 }}>
-                    <Text theme='h1'>Competition Settings</Text>
-                    <Text style={{ marginTop:3 }} theme='description'>Manage the high level information of this competition</Text>
+                    <Text theme='h1' color={Colors.toggle.text.active}>Competition Settings</Text>
+                    <Text style={{ marginTop:3 }} theme='description' color={Colors.toggle.text.active}>Manage the high level information of this competition</Text>
                 </View>
                 {is_changed ?
                 <Button
                     title='SAVE'
                     type='success'
+                    style={{ padding:10 }}
                     onPress={() => onCompetitionUpdate(draft_competition)}
                 />
                 : !init_expanded ?
@@ -84,7 +78,7 @@ const CompetitionSettingsForm = ({ is_valid, init_expanded, onFocusPosition, pla
             {expanded ?
             <View type='body' nativeID="competition_settings" style={{ flexGrow:1 }}>
                 
-                <View nativeID="competition_currency" style={{ padding:10, borderBottomWidth:1, borderBottomColor:Colors.borders.light }}>
+                <View nativeID="competition_currency" style={{ padding:20, borderBottomWidth:1, borderBottomColor:Colors.borders.light }}>
                     <View style={{  margin:5, minWidth:200 }}>
                         <Text theme="h1">Competition Currency</Text>
                         <Text style={{ marginTop:3 }} theme="description">Is the ticket price in real-money or edge coins?</Text>
@@ -100,17 +94,17 @@ const CompetitionSettingsForm = ({ is_valid, init_expanded, onFocusPosition, pla
                        
                     </View>
                 </View>
-                <View style={{borderBottomWidth:1, borderBottomColor:Colors.borders.light, padding:10}}>
+                <View style={{borderBottomWidth:1, borderBottomColor:Colors.borders.light, padding:20}}>
                 <View type='row' nativeID="competition_payout" style={{ flexWrap:'wrap' }}>
                     <View transparent style={{ flex:1, minWidth:200 }}>
                         <Text theme="h1">Competition Payout Type</Text>
                         <Text style={{ marginTop:3 }} theme="description">{competition_result_type?competition_result_type.description:'Choose the type of payout for this competition'}</Text>
                     </View>
-                    <View transparent style={{ flex:1, justifyContent:'flex-end', margin:5, borderRadius:8 }}>
+                    <View transparent style={{ flex:1, justifyContent:'flex-end', minWidth:100, margin:5, borderRadius:8 }}>
                         <DropDown
                             read_only={competition.competition_season_id ? true : false}
                             dropdown_options={[
-                                {value: 'competition_result_type_id', eligible_options: competition_result_types.map(t => t.label)}
+                                {value: 'competition_result_type_id', eligible_options: competition_result_types.sort((a,b) => a.label.localeCompare(b.label)).map(t => t.label)}
                             ]}
                             selected_value={competition_result_type?.label ?? ''}
                             onOptionSelect={(type) => {
@@ -160,55 +154,55 @@ const CompetitionSettingsForm = ({ is_valid, init_expanded, onFocusPosition, pla
                 </View>
                 :<></>}
                 </View>
-                <View type='row' nativeID="buy_in" style={{ flexWrap:'wrap', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <View type='row' nativeID="buy_in" style={{ flexWrap:'wrap', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                     <View style={{ flex:1, minWidth:200 }}>
                         <Text theme="h1">Ticket Price</Text>
                         <Text style={{ marginTop:3 }} theme="description">Set the amount required to purchase a ticket to participate</Text>
                     </View>
                     <TextInput
-                        style={{ flex:1, textAlign:'center', width:100  }}
+                        style={{ flexGrow:1, textAlign:'center', minWidth:100, margin:5, borderColor:competition.buy_in ? Colors.text.success: Colors.text.warning  }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, buy_in: text })}
                         placeholder="0"
                         onFocusPosition={onFocusPosition}
                         keyboardType="decimal-pad"
                         editable={competition.competition_season_id ? false : true}
-                        value={draft_competition.buy_in as string}
+                        value={draft_competition.buy_in.toString()}
                     />
                 </View>
                 {player?.role == 'admin' ?
-                <View type='row' nativeID="buy_in" style={{ flexWrap:'wrap', padding:10,  borderBottomWidth:1, borderColor:Colors.borders.light }}>
-                    <View style={{ flex:1, minWidth:200 }}>
+                <View type='row' nativeID="buy_in" style={{ flexWrap:'wrap', padding:20,  borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <View style={{ flexGrow:1, minWidth:100 }}>
                         <Text theme="h1">Guaranteed Payout</Text>
                         <Text style={{ marginTop:3 }} theme="description">ADMIN ONLY - How much is guaranteed to be paid out?</Text>
                     </View>
                     <TextInput
-                        style={{ flex:1, textAlign:'center', width:100 }}
+                        style={{ flexGrow:1, textAlign:'center', minWidth:100, margin:5 }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, guaranteed_payout: text })}
                         placeholder="0"
                         onFocusPosition={onFocusPosition}
                         keyboardType="decimal-pad"
                         editable={competition.competition_season_id ? false : true}
-                        value={draft_competition.guaranteed_payout as string}
+                        value={draft_competition.guaranteed_payout?.toString()}
                     />
                 </View>
                 :<></>}
                     
-                    <View type='row' nativeID="Max Tickets" style={{ flexWrap:'wrap', padding:10, borderBottomWidth:1, borderBottomColor:Colors.borders.light }}>
-                        <View style={{ flex:1, marginRight:5, minWidth:200 }}>
-                            <Text theme="h1">Max Tickets</Text>
-                            <Text style={{ marginTop:3 }} theme="description">Maximum number of tickets that can be sold</Text>
-                        </View>
-                        <TextInput
-                            style={{ flex:1, textAlign:'center', width:100 }}
-                            onChangeText={(text) => setDraftCompetition({ ...draft_competition, available_tickets: text })}
-                            placeholder="100"
-                            onFocusPosition={onFocusPosition}
-                            keyboardType="decimal-pad"
-                            editable={competition.competition_season_id ? false : true}
-                            value={draft_competition.available_tickets as string}
-                        />
+                <View type='row' nativeID="Max Tickets" style={{ flexWrap:'wrap', padding:20, borderBottomWidth:1, borderBottomColor:Colors.borders.light }}>
+                    <View style={{ flexGrow:1, marginRight:5, minWidth:100 }}>
+                        <Text theme="h1">Max Tickets</Text>
+                        <Text style={{ marginTop:3 }} theme="description">Maximum number of tickets that can be sold</Text>
                     </View>
+                    <TextInput
+                        style={{ flexGrow:1, textAlign:'center', minWidth:100, margin:5, borderColor:parseInt(competition.available_tickets as string) > 0 ? Colors.text.success : Colors.text.warning }}
+                        onChangeText={(text) => setDraftCompetition({ ...draft_competition, available_tickets: text })}
+                        placeholder="100"
+                        onFocusPosition={onFocusPosition}
+                        keyboardType="decimal-pad"
+                        editable={competition.competition_season_id ? false : true}
+                        value={draft_competition.available_tickets.toString()}
+                    />
                 </View>
+            </View>
             :<></>}
         </View>
     )

package/src/CompetitionManager/components/ContestSelector.tsx

@@ -158,8 +158,8 @@ const ContestSelector = ({ action_loading, leagues, selected_team_events, onClos
     }
 
     return (
-        <View style={{ margin:0, flex:1 }}>
-            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+        <View float style={{ flex:1 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                 {active_league ?
                 <Image
                     source={{ uri: active_league.league_image }}

package/src/CompetitionManager/components/ContestSettingsForm.tsx

@@ -10,7 +10,6 @@ import { useColors } from "../../constants/useColors";
 import { Button, Text, TextInput, View } from "../../Components/Themed";
 
 type ContestSettingsFormProps = {
-    is_valid?:boolean,
     competition:CompetitionProps,
     onFocusPosition?:(position:FocusPositionProps) => void,
     competition_matches:CompetitionMatchProps[],
@@ -23,7 +22,7 @@ type ContestSettingsFormProps = {
 
 const length_types:CompetitionProps['length_type'][] = ['event']
 
-const ContestSettingsForm = ({ is_valid, init_expanded, onFocusPosition, competition, competition_matches, competition_match_markets, competition_types, events, onCompetitionUpdate }:ContestSettingsFormProps) => {
+const ContestSettingsForm = ({ init_expanded, onFocusPosition, competition, competition_matches, competition_match_markets, competition_types, events, onCompetitionUpdate }:ContestSettingsFormProps) => {
     const Colors = useColors();
     const [ expanded, setExpanded ] = useState(init_expanded ?? false);
     const [ draft_competition, setDraftCompetition ] = useState<CompetitionProps | undefined>(undefined);
@@ -62,15 +61,11 @@ const ContestSettingsForm = ({ is_valid, init_expanded, onFocusPosition, competi
         <View float style={{ flexGrow:1, borderRadius:0 }}>
             <Button
                 disabled={init_expanded}
-                float style={{ flexDirection:'row', borderRadius:0, alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
-                {is_valid ?
-                <Icons.CheckCirlceIcon size={16} color={Colors.text.success} />
-                :
-                <Icons.AlertIcon size={16} color={Colors.text.warning} />
-                }
+                float style={{ flexDirection:'row', borderRadius:0, padding:20, alignItems:'center', backgroundColor:Colors.toggle.button.active }} onPress={() => setExpanded(!expanded)}>
+                <Icons.ChangeIcon size={24} color={Colors.toggle.text.active} />
                 <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
-                    <Text theme="h1">Contest Settings</Text>
-                    <Text style={{ marginTop:3 }} theme='description'>Manage the settings of how user will interact with the added contests</Text>
+                    <Text theme="h1" color={Colors.toggle.text.active}>Contest Settings</Text>
+                    <Text style={{ marginTop:3 }} theme='description' color={Colors.toggle.text.active}>Manage the settings of how user will interact with the added contests</Text>
                 </View>
                 {is_changed ?
                 <Button
@@ -84,8 +79,8 @@ const ContestSettingsForm = ({ is_valid, init_expanded, onFocusPosition, competi
                 }
             </Button>
             {expanded ?
-            <View type='body' style={{ padding:10 }}>
-                <View nativeID="competition_type" style={{ borderBottomWidth:1, borderColor:Colors.borders.light, padding:10 }}>
+            <View type='body'>
+                <View nativeID="competition_type" style={{ borderBottomWidth:1, borderColor:Colors.borders.light, padding:20 }}>
                     <View>
                         <Text theme="h1">Competition Type</Text>
                         <Text style={{ marginTop:3 }} theme="description">{competition_type?competition_type.description:'Choose the type of competition this is.'}</Text>
@@ -93,14 +88,14 @@ const ContestSettingsForm = ({ is_valid, init_expanded, onFocusPosition, competi
                     <View style={{ margin:5 }}>
                         <Toggle
                             options={competition_types.map(t => {
-                                return { key: t.competition_type_id, label: t.type }
+                                return { key: t.competition_type_id, label: t.type_label }
                             })}
                             selected_option={competition_type?.competition_type_id}
                             onSelectOption={(option) => onCompetitionUpdate({ ...draft_competition, competition_type_id: option })}
                         />
                     </View>
                 </View>
-                <View style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <View style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                     <View>
                         <Text theme="h1">Length Type</Text>
                         <Text style={{ marginTop:3 }}>Choose how long this competition will remain open.</Text>
@@ -116,52 +111,56 @@ const ContestSettingsForm = ({ is_valid, init_expanded, onFocusPosition, competi
                     </View>
                 </View>
                 {competition_type?.type == 'pick' ?
-                <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
-                    <View style={{ flex:1, minWidth:200, marginRight:10 }}>
+                <View type='row' style={{ flexWrap:'wrap', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <View style={{ flex:1, minWidth:100, marginRight:10 }}>
                         <Text theme="h1">Max Picks</Text>
                         <Text style={{ marginTop:3 }}>The total number of picks allowed by each participant.</Text>
                     </View>
                     <TextInput
                         editable={competition.competition_season_id ? false : true}
-                        style={{ flex:1, width:75, textAlign:'center' }}
+                        style={{ flex:1, minWidth:100, textAlign:'center', margin:5 }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, max_pick_count: text })}
                         placeholder="0"
                         onFocusPosition={onFocusPosition}
                         keyboardType="decimal-pad"
-                        value={draft_competition.max_pick_count as string}
+                        value={draft_competition.max_pick_count.toString()}
                     />
                 </View>
                 :<></>}
                 {competition_type?.type == 'wager' ?
-                <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
-                    <View style={{ flex:1, minWidth:200, marginRight:10 }}>
+                <View type='row' style={{ flexWrap:'wrap', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <View style={{ flex:1, minWidth:100, marginRight:10 }}>
                         <Text theme="h1">Initial Balance</Text>
                         <Text style={{ marginTop:3 }}>Initial balance that each player will start with at the beginning of the competition.</Text>
                     </View>
                     <TextInput
                         editable={competition.competition_season_id ? false : true}
-                        style={{  flex:1, width:75, textAlign:'center' }}
+                        style={{  flex:1, minWidth:100, textAlign:'center', margin:5 }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, initial_balance: text })}
                         placeholder="0"
                         onFocusPosition={onFocusPosition}
                         keyboardType="decimal-pad"
-                        value={draft_competition.initial_balance as string}
+                        value={draft_competition.initial_balance.toString()}
                     />
                 </View>
                 :<></>}
-                <View>
-                    <View type='row' style={{  padding:10 }}>
+                <View style={{ padding:20 }}>
+                    <View type='row'>
                         <View style={{ flex:1 }}>
                             <Text theme="h1">Start Time Options</Text>
                             <Text style={{ marginTop:3 }}>When should this competition stop allowing entrants.</Text>
                         </View>
                     </View>
-                    <View style={{ padding:10, borderRadius:4 }}>
+                    <View style={{ marginTop:10, borderRadius:4 }}>
+                        {start_time_options.length > 0 ?
                         <FlatList
                             data={start_time_options}
                             renderItem={renderStartTimeOptions}
                             keyExtractor={(item) => item.start_time}
                         />
+                        :
+                        <Text theme="warning">Please add contests and markets to see potential start times</Text>
+                        }
                     </View>
                 </View>
             </View>

package/src/CompetitionManager/components/GroupSelector.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { useColors } from "../../constants/useColors";
+import type { GroupProps } from "../../types";
+import { Button, Text, View } from "../../Components/Themed";
+import { FlatList, Image } from "react-native";
+import { Icons } from "../../Components";
+
+type GroupSelectorProps = {
+    active_group?:GroupProps,
+    groups:GroupProps[],
+    onSelectGroup:(group?:GroupProps) => void
+}
+const GroupSelector = ({ active_group, groups, onSelectGroup }:GroupSelectorProps) => {
+    const Colors = useColors();
+    const [ visible, setVisible ] = useState(false);
+
+    const renderGroups = (data:{ item:GroupProps, index:number }) => {
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => { setVisible(false); onSelectGroup(data.item) }}
+            >
+                <Image
+                    source={{ uri: data.item.group_image?.url }}
+                    style={{ height:40, width:40 }}
+                    resizeMode='cover'
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.name}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.description}</Text>
+                </View>
+            </Button>
+        )
+    }
+
+    return (
+        <Button float onPress={() => { setVisible(!visible); onSelectGroup(undefined)}}>
+            <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                <Text style={{ flex:1, marginRight:10 }} theme='h1'>{active_group?.name ?? 'No Group'}</Text>
+                <Icons.ChevronIcon direction={visible?'up':'down'} color={Colors.text.h1} size={8} />
+            </View>
+            {visible ?
+            <View transparent style={{ marginTop:20 }}>
+            <FlatList
+                data={groups}
+                key={'group_selector'}
+                keyExtractor={item => item.group_id.toString()}
+                renderItem={renderGroups}
+            />
+            </View>
+            :<></>}
+        </Button>
+    )
+}
+
+export default GroupSelector

package/src/CompetitionManager/components/MarketSelector.tsx

@@ -16,9 +16,9 @@ type MarketSelectorProps = {
 const MarketSelector = ({ markets, selected_markets, onSelectMarket, onDeselectMarket, onClose } : MarketSelectorProps) => {
     const [ search_value, setSearchValue ] = useState('');
     const Colors = useColors();
-    
-    const filtered_markets = markets.filter(m => `${m.type} ${m.description}`.toLowerCase().includes(search_value.toLowerCase()))
-
+    const filtered_markets = markets.filter(m => `${m.type} ${m.description}`.toLowerCase().includes(search_value.toLowerCase())).sort((a,b) => {
+        return Number(b.primary_market) - Number(a.primary_market)
+    })
 
     const renderMarkets = (data:{item:MarketProps, index:number}) => {
         const selected = selected_markets.includes(data.item.market_id) ? true : false
@@ -41,20 +41,21 @@ const MarketSelector = ({ markets, selected_markets, onSelectMarket, onDeselectM
     }
 
     return (
-        <View style={{ flex:1 }}>
-            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:20 }}>
+        <View float style={{ flex:1 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:20, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                 <View transparent style={{ flex:1 }}>
                     <Text theme='h1'>MANAGE MARKETS</Text>
+                    <Text theme='description'>Toggle markets to be included with the selected contest</Text>
                 </View>
+            </View>
+             <View style={{ padding:10 }}>
+                <SearchBox 
+                    onChange={(text) => setSearchValue(text)}
+                    hide_search_button
+                />
             </View>
             <View style={{ flex:1 }}>
                 <View type='body'>
-                    <View style={{ marginTop:0 }}>
-                        <SearchBox 
-                            onChange={(text) => setSearchValue(text)}
-                            hide_search_button
-                        />
-                    </View>
                     <FlatList
                         data={filtered_markets}
                         renderItem={renderMarkets}
@@ -62,8 +63,8 @@ const MarketSelector = ({ markets, selected_markets, onSelectMarket, onDeselectM
                     />
                 </View>
             </View>
-            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
-            <Button
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                <Button
                     title='CLOSE'
                     style={{ flex:1 }}
                     type='error'

package/src/CompetitionManager/components/PlayerSelector.tsx

@@ -67,7 +67,7 @@ const PlayerSelector = ({ onSelectPlayer, onClose }:PlayerSelectorProps) => {
                 </View>
             </View>
             <View style={{ flex:1 }}>
-                <View type='body'>
+                <View type='body' style={{ flex:1 }}>
                     <View style={{ marginTop:0 }}>
                         <SearchBox 
                             onSearch={() => searchPlayers(0)}