be-components 1.4.9 → 1.5.0

package/src/CompetitionSeasonManager/components/SeasonSettingsForm.tsx

@@ -0,0 +1,185 @@
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, View, FlatList } from 'react-native';
+import { view_styles } from '../../constants/styles';
+import { Button, Icons, Switch, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import type { CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps } from '../../types';
+import { ManageSeasonHelpers } from '../api';
+import DropDown from '../../Components/Dropdown';
+
+type SeasonSettingsFormProps = {
+    width:number,
+    competition_season:CompetitionSeasonProps,
+    competition_types:CompetitionTypeProps[],
+    competition_result_types:CompetitionResultTypeProps[],
+    onSeasonUpdate: (cs:CompetitionSeasonProps) => void
+}
+
+const SeasonSettingsForm = ({ competition_season, width, competition_types, competition_result_types, onSeasonUpdate }:SeasonSettingsFormProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+    const [ draft_season, setDraftSeason ] = useState<CompetitionSeasonProps>();
+
+    const competition_type = competition_types.find(ct => ct.competition_type_id == draft_season?.competition_type_id);
+    const competition_result_type = competition_result_types.find(crt => crt.competition_result_type_id == draft_season?.competition_result_type_id);
+
+    useEffect(() => {
+        setDraftSeason(competition_season)
+    },[competition_season])
+
+    if(!draft_season){ return <></> }
+
+    const renderCompetitionTypes = (data:{ item:CompetitionTypeProps, index:number }) => {
+        if(!draft_season) { return <></> }
+        const selected = data.item.competition_type_id == draft_season.competition_type_id ? true : false
+        return (
+            <TouchableOpacity style={{ minWidth:75, margin:1, borderRadius:8, padding:10, backgroundColor:selected?Colors.brand.midnight:undefined }} onPress={() => onSeasonUpdate({ ...draft_season, competition_type_id: data.item.competition_type_id })}>
+                <Text textAlign="center"  color={selected?Colors.shades.white:Colors.brand.midnight} weight={selected?'bold':'regular'} size={14}>{data.item.type_label}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+    const is_changed = ManageSeasonHelpers.isSettingsChanged(competition_season, draft_season);
+    const is_valid = ManageSeasonHelpers.isSettingsValid(draft_season);
+    return (
+        <View style={{ ...view_styles.section }}>
+            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setExpanded(!expanded)}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>Season Settings</Text>
+                    <Text style={{ marginTop:3 }}>Update season settings</Text>
+                </View>
+                {is_changed ?
+                <Button
+                    title='SAVE'
+                    padding={10}
+                    style={{ opacity: is_valid ? 1 : 0.5 }}
+                    disabled={!is_valid}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => onSeasonUpdate(draft_season)}
+                />
+                :
+                <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} color={Colors.brand.midnight} size={8} />
+                }
+            </TouchableOpacity>
+            {expanded ?
+            <View style={{ ...view_styles.section_body }}>
+                 <View style={{ ...view_styles.body_row, maxWidth:width, borderBottomWidth:1, marginTop:10, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme="header_2">Ticket Price</Text>
+                        <Text style={{ marginTop:3 }}>How much does it cost to enter this season?</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, width:75, textAlign:'center' }}
+                        onChangeText={(text) => setDraftSeason({ ...draft_season, ticket_price: text })}
+                        placeholder="0"
+                        value={draft_season.ticket_price as string}
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+                <View style={{ ...view_styles.body_row, maxWidth:width, borderBottomWidth:1, marginTop:10, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme="header_2">Season Payout Allocation</Text>
+                        <Text style={{ marginTop:3 }}>How much of the total pot should be allocated to the season winners?  Remaining is paid out each competition.</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, width:75, textAlign:'center' }}
+                        onChangeText={(text) => setDraftSeason({ ...draft_season, payout_allocation: text })}
+                        placeholder="0"
+                        value={draft_season.payout_allocation as string}
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+                <View nativeID="competition_type" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme="header_2">Competition Type</Text>
+                        <Text style={{ marginTop:3 }} theme="body">{competition_type?competition_type.description:'Choose the type of competition this is.'}</Text>
+                    </View>
+                    <View style={{ margin:5, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                        <FlatList
+                            data={competition_types}
+                            renderItem={renderCompetitionTypes}
+                            keyExtractor={(item) => item.competition_type_id.toString()}
+                            horizontal
+                        />
+                    </View>
+                </View>
+                {competition_type?.type == 'pick' ?
+                <View style={{ ...view_styles.body_row, maxWidth:width, marginTop:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme="header_2">Max Picks</Text>
+                        <Text style={{ marginTop:3 }}>The total number of picks allowed by each participant.</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, width:75, textAlign:'center' }}
+                        onChangeText={(text) => setDraftSeason({ ...draft_season, max_picks: text })}
+                        placeholder="0"
+                        value={draft_season.max_picks as string}
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+                :<></>}
+                {competition_type?.type == 'wager' ?
+                <View style={{ ...view_styles.body_row, maxWidth:width, borderBottomWidth:1, marginTop:10, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme="header_2">Initial Balance</Text>
+                        <Text style={{ marginTop:3 }}>Initial balance that each player will start with at the beginning of the competition.</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, width:75, textAlign:'center' }}
+                        onChangeText={(text) => setDraftSeason({ ...draft_season, initial_balance: text })}
+                        placeholder="0"
+                        value={draft_season.initial_balance as string}
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+                :<></>}
+                {competition_type?.type == 'wager' ?
+                <View style={{ ...view_styles.body_row, maxWidth:width, borderBottomWidth:1, marginTop:10, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme="header_2">Rollover Balance</Text>
+                        <Text style={{ marginTop:3 }}>Should the wager balance for each player rollover from prior competitions?</Text>
+                    </View>
+                    <Switch
+                        value={draft_season.balance_rollover}
+                        switch_type="on_off"
+                        onChange={(value) => onSeasonUpdate({ ...draft_season, balance_rollover: value })}
+                    />
+                </View>
+                :<></>}
+                 <View nativeID="competition_payout" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme="header_2">Competition Payout Type</Text>
+                        <Text style={{ marginTop:3 }} theme="body">{competition_result_type?competition_result_type.description:'Choose the type of payout for this competition'}</Text>
+                    </View>
+                    <View style={{ justifyContent:'flex-end', margin:5, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                        <DropDown
+                            dropdown_options={[
+                                {value: 'competition_result_type_id', eligible_options: competition_result_types.filter(crt => crt.type != 'outpace').map(t => t.label)}
+                            ]}
+                            selected_value={competition_result_type?.label ?? ''}
+                            onOptionSelect={(type) => {
+                                const new_result_type = competition_result_types.find(crt => crt.label == type);
+                                if(!new_result_type){ return }
+                                onSeasonUpdate({ ...draft_season, competition_result_type_id: new_result_type.competition_result_type_id })
+                            }}
+                        />
+                    </View>
+                </View>
+                <View nativeID="invite_only" style={{ ...view_styles.body_row, flexWrap:'wrap', marginTop:10, borderBottomWidth:1, borderColor:Colors.shades.shade600  }}>
+                    <View style={{ flex:1, margin:5, marginRight:15 }}>
+                        <Text theme='header_2'>Allow Late Buy In</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Determines if a player can join the season after it has started.</Text>
+                    </View>
+                    <Switch
+                        value={draft_season.allow_late_buy_in}
+                        switch_type="on_off"
+                        onChange={(value) => onSeasonUpdate({ ...draft_season, allow_late_buy_in: value })}
+                    />
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SeasonSettingsForm

package/src/CompetitionSeasonManager/index.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import { View, ScrollView, ActivityIndicator } from 'react-native';
+import SeasonInfoForm from './components/SeasonInfoForm';
+import { ManageSeasonApi, ManageSeasonHelpers } from './api';
+import type { CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, MyPlayerProps } from '../types';
+import Colors from '../constants/colors';
+import CompetitionsForm from './components/CompetitionsForm';
+import SeasonSettingsForm from './components/SeasonSettingsForm';
+import CreateCompetitionForm from '../CompetitionManager/components/CreateCompetitionForm';
+import SeasonHeader from './components/SeasonHeader';
+
+type SeasonManagerProps = {
+    competition_season_id:string,
+    player_id?:string
+}
+
+const SeasonManager = ({ competition_season_id }:SeasonManagerProps) => {
+    const [ show_create_competition, setShowCreateCompetition ] = useState(false);
+    const [ module_size, setModuleSize ] = useState({ width: 0, height: 0 });
+    const [ season_data, setData ] = useState<{
+        loading: boolean,
+        action_loading:boolean,
+        player?:MyPlayerProps,
+        competition_season?:CompetitionSeasonProps,
+        competition_types:CompetitionTypeProps[],
+        competition_result_types:CompetitionResultTypeProps[],
+        competition_payout_types:CompetitionPayoutTypeProps[],
+        competitions:CompetitionProps[]
+    }>({
+        loading:false,
+        action_loading: false,
+        competition_payout_types:[],
+        competition_result_types: [],
+        competition_types:[],
+        competitions: []
+    })
+    const { action_loading, player, competition_types, competition_result_types, competition_season, competitions } = season_data;
+
+    useEffect(() => {
+        ManageSeasonApi.setEnvironment();
+        getDataFromServer(competition_season_id);
+    },[competition_season_id])
+
+    const getDataFromServer = async(id:string) => {
+        setData({ ...season_data, loading: true });
+        const cs = await ManageSeasonApi.getSeasonById(id);
+        const comps = await ManageSeasonApi.getCompetitionsBySeasonId(id);
+        const opts = await ManageSeasonApi.getCompetitionOptions();
+        const me = await ManageSeasonApi.getMyDetails();
+        setData({ 
+            ...season_data,
+            competition_season: cs,
+            competitions: comps,
+            player:me,
+            competition_payout_types: opts.competition_payout_types,
+            competition_result_types: opts.competition_result_types,
+            competition_types: opts.competition_types
+        })
+    }
+
+
+    if(!competition_season){
+        return (
+            <View style={{ flex:1 }}>
+                <ActivityIndicator size={'large'} color={Colors.brand.midnight} style={{ padding:20, alignSelf:'center' }} />
+            </View>
+        )
+    }
+
+    const errors = ManageSeasonHelpers.isSeasonValid(competition_season)
+
+
+    return (
+        <View style={{ flex:1 }}>
+            <ScrollView style={{ flex:1 }} onLayout={(ev) => {
+                const { width, height } = ev.nativeEvent.layout;
+                setModuleSize({ width, height })
+            }}>
+                <SeasonHeader
+                    competition_season={competition_season}
+                    width={module_size.width}
+                    action_loading={action_loading}
+                    season_valid={errors.length > 0 ? false : true}
+                    onActivate={async() => {
+                        setData({ ...season_data, action_loading: true })
+                        const new_cs = await ManageSeasonApi.activateSeason(competition_season.competition_season_id);
+                        setData({
+                            ...season_data,
+                            action_loading: false,
+                            competition_season:new_cs
+                        })
+                    }}
+                    onDelete={async() => {
+                        setData({ ...season_data, action_loading: true })
+                        const new_cs = await ManageSeasonApi.deleteSeason(competition_season.competition_season_id);
+                        setData({
+                            ...season_data,
+                            action_loading: false,
+                            competition_season:new_cs
+                        })
+                    }}
+                />
+                <SeasonInfoForm
+                    width={module_size.width}
+                    player={player}
+                    competition_season={competition_season}
+                    onSeasonUpdate={async(cs) => {
+                        setData({ ...season_data, action_loading: true })
+                        const new_s = await ManageSeasonApi.updateSeason(cs);
+                        setData({ ...season_data, action_loading: false, competition_season: new_s })
+                    }}
+                />
+                <SeasonSettingsForm
+                    width={module_size.width}
+                    competition_season={competition_season}
+                    competition_types={competition_types}
+                    competition_result_types={competition_result_types}
+                    onSeasonUpdate={async(cs) => {
+                        setData({ ...season_data, action_loading: true })
+                        const new_s = await ManageSeasonApi.updateSeason(cs);
+                        setData({ ...season_data, action_loading: false, competition_season: new_s })
+                    }}
+                />
+                <CompetitionsForm
+                    onAddCompetition={() => setShowCreateCompetition(true)}
+                    competitions={competitions}
+                    competition_season={competition_season}
+                    competition_result_types={competition_result_types}
+                    competition_types={competition_types}
+                />
+            </ScrollView>
+            {show_create_competition ?
+            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end' }}>
+                <CreateCompetitionForm
+                    width={module_size.width}
+                    competition_season={competition_season}
+                    onClose={() => setShowCreateCompetition(false)}
+                    onCreate={(competition) => {
+                        setData({
+                            ...season_data,
+                            competitions: competitions.concat(competition)
+                        })
+                    }}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SeasonManager

package/src/Components/Switch.tsx

@@ -6,9 +6,10 @@ import Colors from '../constants/colors';
 type SwitchProps = { 
     value: boolean, 
     switch_type: 'binary' | 'on_off', 
+    disabled?:boolean,
     onChange:(value:boolean) => void 
 }
-const Switch = ({ value, switch_type, onChange }:SwitchProps) => {
+const Switch = ({ value, disabled, switch_type, onChange }:SwitchProps) => {
 
     const handleChange = () => {
         if(onChange){
@@ -19,7 +20,9 @@ const Switch = ({ value, switch_type, onChange }:SwitchProps) => {
     return (
         <View style={{ flexDirection:'row', alignItems:'flex-start' }}>
             {switch_type == 'on_off' ?
-            <TouchableOpacity style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', backgroundColor:value?Colors.highlights.highlight400:Colors.brand.slate, padding:3, borderRadius:12, width:48,height:24}} onPress={() => handleChange()}>
+            <TouchableOpacity 
+            disabled={disabled}
+            style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', backgroundColor:value?Colors.highlights.highlight400:Colors.brand.slate, padding:3, borderRadius:12, width:48,height:24}} onPress={() => handleChange()}>
             { value ? 
                 <>
                 <View />
@@ -33,7 +36,9 @@ const Switch = ({ value, switch_type, onChange }:SwitchProps) => {
             }
         </TouchableOpacity>
         :
-        <TouchableOpacity style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', backgroundColor:Colors.shades.white, padding:3, borderRadius:12, width:48,height:24}} onPress={() => handleChange()}>
+        <TouchableOpacity 
+        disabled={disabled}
+        style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', backgroundColor:Colors.shades.white, padding:3, borderRadius:12, width:48,height:24}} onPress={() => handleChange()}>
             { value ? 
                 <>
                 <View />

package/src/Engage/index.tsx

@@ -56,6 +56,7 @@ const EngageModule = ({ onSelectBracketCompetition, onSelectCompetition, onSelec
     });
     const { loading, competitions, competition_result_types, squares_competitions, brackets, leagues, bracket_competitions, events, competition_types, companies, players } = module_data;
 
+
     useEffect(() => {
         EngageApi.setEnvironment();
         getDataFromServer()

package/src/index.tsx

@@ -22,7 +22,8 @@ import CompetitionManager from "./CompetitionManager";
 import CreateCompetitionForm from "./CompetitionManager/components/CreateCompetitionForm";
 import AdminCompetitionList from "./CompetitionManager/components/AdminCompetitionList";
 import EngageModule from "./Engage";
-
+import SeasonManager from "./CompetitionSeasonManager";
+import SeasonModule from "./CompetitionSeason";
 
 export {
   Authenticator,
@@ -44,7 +45,9 @@ export {
   PollCampaignApi,
   PollApi,
   CompetitionModule,
+  SeasonManager,
   CreateCompetitionForm,
+  SeasonModule,
   AdminCompetitionList,
   AdServer,
   AdProvider,

package/src/types.d.ts

@@ -1185,25 +1185,68 @@ export interface CompetitionResultProps {
 export interface CompetitionSeasonProps {
     competition_season_id:string;
     season_name: string;
-    season_description:string;
+    season_description: string;
     image?:{ url:string };
+    ticket_price:number | string;
+    ticket_revenue: number;
     payout_amt: number;
-    sponsor_id?:string;
-    competition_result_type_id:string;
+    promo_amt?:number | string;
+    max_picks: number | string;
+    initial_balance:number | string;
+    invite_only:boolean,
+    company_id?:string,
+    balance_rollover:boolean;
     admin_id:string;
+    unallocated_funds:number;
     template?:boolean;
+    competition_result_type_id:string;
+    competition_type_id:string;
+    sponsor_id?:string;
+    entered?:boolean;
+    expected_competition_count:number | string;
+    pacer_id?:string;
     following_season_id?:string;
-    payout_allocation:number;
+    payout_allocation:number | string;
     single_buy_in:boolean; //If true - then once you enter, you are automatically entered into all remaining competitions in season.  If false - you need to re-enter each week
     allow_late_buy_in:boolean; //If true - then you will allow users to buy in at later dates
     scheduled_datetime:any;
     league_id?:string,
-    status: 'active' | 'inactive' | 'pending';
+    status: 'active' | 'inactive' | 'closed'|'pending';
     market_type: 'FOR_MONEY' | 'FREE';
+    guaranteed_payout?:number,
+    tickets_sold:number,
+    tickets_available:number,
     create_datetime:any;
     last_update_datetime:any;
 }
 
+
+export interface CompetitionSeasonPlayerProps {
+    competition_season_player_id:string,
+    competition_season_id:string,
+    player_id:string,
+    status: 'active'|'inactive',
+    wins: number,
+    losses:number,
+    draws: number,
+    wager_based_balance:number,
+    earnings:number,
+    create_datetime:any,
+    last_update_datetime: any
+}
+
+export interface CompetitionSeasonResultProps {
+    competition_season_result_id:string,
+    competition_season_id:string,
+    place:number,
+    status:string,
+    winnings:number,
+    player_id:string,
+    processed:boolean,
+    create_datetime:any,
+    last_update_datetime:any
+}
+
 export interface CompetitionTypeProps {
     competition_type_id:string,
     type: string,