be-components 1.4.9 → 1.5.1

package/src/Competition/components/CompetitionSeasonCard.tsx

@@ -31,7 +31,7 @@ const CompetitionSeasonCard = ({ competition_season, competition_result_type, on
                 <View nativeID="comp_amounts" style={{ flexDirection:'row', padding:5 }}>
                     <View style={{ flex:1, flexDirection:'row' }}>
                         <View style={{ backgroundColor:comp_colors.backgroundColor, borderWidth:1, borderColor:comp_colors.borderColor, borderRadius:8, padding:5 }}>
-                            <Text size={10} color={comp_colors.borderColor} weight='semibold'>{competition_season.payout_allocation*100}%</Text>
+                            <Text size={10} color={comp_colors.borderColor} weight='semibold'>{parseFloat(competition_season.payout_allocation as string) * 100}%</Text>
                         </View>
                         {competition_result_type ?
                         <View style={{ marginLeft: 5, backgroundColor:comp_colors.backgroundColor, borderWidth:1, borderColor:comp_colors.borderColor, borderRadius:8, padding:5 }}>

package/src/Competition/components/SeasonCard.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Image, View } from 'react-native';
+import type { CompetitionPlayerProps, CompetitionSeasonProps } from "../../types"
+import { Button, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import moment from 'moment-mini';
+
+type SeasonCardProps = {
+    competition_season:CompetitionSeasonProps,
+    authenticated_competition_player?:CompetitionPlayerProps,
+    onViewSeason: (competition_season:CompetitionSeasonProps) => void
+}
+
+const SeasonCard = ({ competition_season, authenticated_competition_player, onViewSeason }:SeasonCardProps) => {
+    const can_join = moment().isBefore(moment(competition_season.scheduled_datetime)) ? true : false
+    return (
+        <View style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:Colors.brand.mint }}>
+            <Image
+                source={{ uri:competition_season.image?.url }}
+                style={{ height:50, width:50, borderRadius:4 }}
+                resizeMode='cover'
+            />
+            <View style={{ flex:1, marginLeft:10 }}>
+                <Text theme='header'>Season</Text>
+                <Text style={{ marginTop:3 }} theme='header_2'>{competition_season.season_name}</Text>
+            </View>
+            {!authenticated_competition_player && can_join ?
+            <Button
+                title='JOIN'
+                backgroundColor={Colors.utility.success}
+                title_color={Colors.shades.white}
+                onPress={() => onViewSeason(competition_season)}
+            />
+            :
+            <Button
+                title='VIEW'
+                backgroundColor={Colors.brand.electric}
+                title_color={Colors.shades.white}
+                onPress={() => onViewSeason(competition_season)}
+            />
+            }
+        </View>
+    )
+}
+
+export default SeasonCard

package/src/Competition/index.tsx

@@ -14,6 +14,7 @@ import EnterCompetitionPrompt from './components/EnterCompetitionPrompt';
 import moment from 'moment-mini';
 import LeaderPicks from './components/LeaderPicks';
 import NavOutPrompt from './components/NavOutPrompt';
+import SeasonCard from './components/SeasonCard';
 
 type CompetitionModuleProps = {
     player_id?:string,
@@ -22,10 +23,11 @@ type CompetitionModuleProps = {
     onEvent?:(event:BEEventProps) => void,
     onManageCompetition:(competition_id:string) => void,
     onRequestAuthentication:(auth_strategy_id?:string) => void,
-    onShareCompetition:(competition:CompetitionProps) => void
+    onShareCompetition:(competition:CompetitionProps) => void,
+    onViewCompetitionSeason:(cs:CompetitionSeasonProps) => void
 }
 
-const CompetitionModule = ({ competition_id, player_id, onManageCompetition, onRequestAuthentication, onShareCompetition, onClose }:CompetitionModuleProps) => {
+const CompetitionModule = ({ competition_id, player_id, onManageCompetition, onRequestAuthentication, onShareCompetition, onClose, onViewCompetitionSeason }:CompetitionModuleProps) => {
     const [ viewing_leader, setViewingLeader ] = useState<PublicPlayerProps|undefined>();
     const [ show_full_leaderboard, setShowFullLeaderboard ] = useState(false);
     const [ module_size, setModuleSize ] = useState({ width:0, height:0 });
@@ -111,6 +113,7 @@ const CompetitionModule = ({ competition_id, player_id, onManageCompetition, onR
         leagues,
         markets,
         events,
+        competition_season,
         athletes,
         teams,
         tournaments,
@@ -198,10 +201,14 @@ const CompetitionModule = ({ competition_id, player_id, onManageCompetition, onR
         if(athlete_ids.length > 0){ athletes = await CompetitionMatchApi.getAthletesByIds(athlete_ids) }
         if(team_ids.length > 0){ teams = await CompetitionMatchApi.getTeamsByIds(team_ids) }
         const cps = await CompetitionPlayerApi.getCompetitionPlayersByCompetition(competition_id, 0, 'active')
-        const c = await CompetitionApi.getCompetitionById(competition_id)
+        const c = await CompetitionApi.getCompetitionById(competition_id);
+        let comp_season:CompetitionSeasonProps | undefined = undefined
+        if(c.competition_season_id){ comp_season = await CompetitionApi.getSeasonById(c.competition_season_id) }
+
         setCompetitionData({
             loaded:true,
             competition: c,
+            competition_season: comp_season,
             competition_matches: cms_response.competition_matches,
             competition_match_markets: cms_response.competition_match_markets,
             events,
@@ -341,7 +348,13 @@ const CompetitionModule = ({ competition_id, player_id, onManageCompetition, onR
                             <Icons.ShareIcon color={Colors.brand.midnight} size={14} />
                         </TouchableOpacity>
                     </View>
-                    
+                    {competition_season ?
+                    <SeasonCard
+                        competition_season={competition_season}
+                        authenticated_competition_player={authenticated_competition_player}
+                        onViewSeason={(cs) => onViewCompetitionSeason(cs)}
+                    />
+                    :
                     <View style={{ flexDirection:'row', padding:10, backgroundColor:Colors.shades.shade100 }}>
                         <View style={{ flex:1 }}>
                             <Text size={12} color={Colors.brand.midnight} weight='regular'>{competition.status == 'closed' ? 'COMPLETED' : in_progress ? 'IN PROGRESS' : 'JOIN UNTIL'}</Text>
@@ -351,30 +364,35 @@ const CompetitionModule = ({ competition_id, player_id, onManageCompetition, onR
                             <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='bold'>{moment(competition.scheduled_datetime).format('MMM DD hh:mm a')}</Text>
                             }
                         </View>
-                        {!authenticated_competition_player ?
-                         <Button
-                            style={{ flex:1, opacity: can_join ? 1: 0.5 }}
-                            disabled={!can_join}
-                            loading={loading}
-                            title={`JOIN`}
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.utility.success}
-                            onPress={() => setShowEnterPrompt(true)}
-                        />
-                        : competition.status != 'closed' ?
-                        <Button
-                            style={{ flex:1, opacity: can_leave ? 1: 0.5 }}
-                            title='LEAVE'
-                            loading={loading}
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.utility.error}
-                            onPress={() => {
-                                if(!can_leave){ return alert('Please remove all picks and try again') }
-                                handleLeaveCompetition()
-                            }}
-                        />
-                        :<></>}
+                            {!authenticated_competition_player ?
+                            <Button
+                                style={{ flex:1, opacity: can_join ? 1: 0.5 }}
+                                disabled={!can_join}
+                                loading={loading}
+                                title={`JOIN`}
+                                title_color={Colors.shades.white}
+                                backgroundColor={Colors.utility.success}
+                                onPress={() => { 
+                                    if(competition.competition_season_id){ return alert('Please select the season to join!') }
+                                    setShowEnterPrompt(true)
+                                }}
+                            />
+                            : competition.status != 'closed' ?
+                            <Button
+                                style={{ flex:1, opacity: can_leave ? 1: 0.5 }}
+                                title='LEAVE'
+                                loading={loading}
+                                title_color={Colors.shades.white}
+                                backgroundColor={Colors.utility.error}
+                                onPress={() => {
+                                    if(competition.competition_season_id){ return alert('You can only leave via the season') }
+                                    if(!can_leave){ return alert('Please remove all picks and try again') }
+                                    handleLeaveCompetition()
+                                }}
+                            />
+                            :<></>}
                     </View>
+                    }
                 </View>
                 <CompetitionInfoCard
                     competition={competition}

package/src/CompetitionManager/api/index.ts

@@ -26,9 +26,7 @@ const ManageCompetitionApi = {
         return resp.data.players
     },
     getMyAdminCompetition:async(offset:number, status?:'active'|'closed'):Promise<CompetitionProps[]> => {
-        console.log(status)
         const resp = await axios.get(`${TP_SVC_API}/v2/competitions/admin?offset=${offset}&status=${status}`)
-        console.log(resp.data.competitions)
         return resp.data.competitions
     },
     getLeagues: async():Promise<LeagueProps[]> => {
@@ -95,11 +93,10 @@ const ManageCompetitionApi = {
     },
     getTemplateCompetitions: async():Promise<CompetitionProps[]> => {
         const resp = await axios.get(`${TP_SVC_API}/v2/competitions/templates`)
-        console.log(resp.data)
         return resp.data.competitions
     },
-    createCompetition: async(company_id?:string, sponsor_id?:string, competition_name?:string, template_competition_id?:string):Promise<CompetitionProps> => {
-        const resp = await axios.post(`${TP_SVC_API}/v2/competitions/competition/create`, { company_id, sponsor_id, competition_name, template_competition_id })
+    createCompetition: async(company_id?:string, sponsor_id?:string, competition_name?:string, template_competition_id?:string, competition_season_id?:string):Promise<CompetitionProps> => {
+        const resp = await axios.post(`${TP_SVC_API}/v2/competitions/competition/create`, { company_id, sponsor_id, competition_name, template_competition_id, competition_season_id })
         return resp.data.competition
     },
     updateCompetition: async(competition:CompetitionProps):Promise<CompetitionProps> => {

package/src/CompetitionManager/components/CompetitionInfoForm.tsx

@@ -105,6 +105,7 @@ const CompetitionInfoForm = ({ is_valid, player, competition, width, onCompetiti
                         <Text style={{ marginTop:3 }} theme='body'>Only access this competition using an invite code.</Text>
                     </View>
                     <Switch
+                        disabled={competition.competition_season_id ? true : false}
                         value={competition.invite_only}
                         switch_type="on_off"
                         onChange={(value) => onCompetitionUpdate({ ...draft_competition, invite_only: value })}
@@ -117,6 +118,7 @@ const CompetitionInfoForm = ({ is_valid, player, competition, width, onCompetiti
                         <Text style={{ marginTop:3 }} theme='body'>This will allow for other users to copy this competition and create it for themselves.</Text>
                     </View>
                     <Switch
+                    
                         value={competition.template ? true : false}
                         switch_type="on_off"
                         onChange={(value) => onCompetitionUpdate({ ...draft_competition, template: value })}
@@ -131,67 +133,3 @@ const CompetitionInfoForm = ({ is_valid, player, competition, width, onCompetiti
 
 export default CompetitionInfoForm
 
-
-/*
-{competition.prize_override || competition.prize_override == '' ?
-            <View nativeID="competition_info" style={{ margin:10, flex:4, flexGrow:4, minWidth:300, padding:10, borderRadius:4, marginRight:5, ...styles.float }}>
-                <View nativeID="header_row" style={{ flexDirection:'row', alignItems:'center', padding:5, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
-                    <Text style={{ flex:1, marginRight:10 }} size={22} color={Colors.brand.slate} weight='bold'>Competition Prize Details</Text>
-                </View>
-                <View nativeID="competition_prize" style={{ flexDirection:'row', flexWrap:'wrap', alignItems:'center', padding:10 }}>
-                    <View nativeID="prize_image">
-                        <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
-                        {competition.prize_image?.url ?
-                        <Image
-                            source={{ uri : competition.prize_image.url }}
-                            style={{ height: 100, width:100 }}
-                            resizeMode="center"
-                        />
-                        :
-                        <Text>NO IMAGE!!</Text>
-                        }
-                    </View>
-                    <ImageUploader
-                        public_id={`comp_prize_${competition.competition_id}_image_${Math.random()}`}
-                        label="Change Image"
-                        onFinishUpload={(obj) => onCompetitionUpdate({ ...competition, prize_image: { ...obj, url: obj.secure_url } })}
-                    />
-                    </View>
-                    <View style={{ flex:1, minWidth:200 }}>
-                        <View style={{ margin:5 }}>
-                            <Text size={16} color={Colors.brand.midnight} weight='bold'>Prize Override</Text>
-                            <Text size={14} color={Colors.brand.midnight} weight='regular'>Add details for the prize that will be delivered</Text>
-                        </View>
-                        <TextInput
-                            style={{ minWidth:300, margin:5, padding:10, borderRadius:8,borderWidth:1, borderColor:Colors.shades.shade600 }}
-                            onChangeText={(text) => onCompetitionUpdate({ ...competition, prize_override:text })}
-                            value={competition.prize_override}
-                            placeholder="Add a league name"
-                            placeholderTextColor={Colors.brand.slate}
-                        />
-                    </View>
-                </View>
-            </View>
-            :<></>}
-*/
-
-
-/*
-<View style={{ ...view_styles.body_row, flexWrap:'wrap' }}>
-    <View style={{ flex:1, margin:5, minWidth:250 }}>
-        <Text theme='header_2'>Authenticate Strategy</Text>
-        <Text style={{ marginTop:3 }} theme='body'>What data would you like to collect in order to participate in this competition?</Text>
-    </View>
-    <DropDown
-        dropdown_options={[
-            {value: 'Strategy', eligible_options: auth_strategies.map(as => as.name)}
-        ]}
-        selected_value={selected_strategy}
-        onOptionSelect={(option) => {
-            let strategy = auth_strategies.find(as => as.name == option)
-            if(competition.status != 'pending'){ return alert('Auth strategy cannot be changed after competition is activated') }
-            onCompetitionUpdate({ ...competition, auth_strategy_id: strategy.auth_strategy_id })
-        }}
-    />
-</View>
-*/

package/src/CompetitionManager/components/CompetitionSettingsForm.tsx

@@ -55,7 +55,9 @@ const CompetitionSettingsForm = ({ is_valid, player, width, competition, competi
         if(!draft_competition){ return <></> }
         const selected = data.item == competition.market_type ? true : false
         return (
-            <TouchableOpacity style={{ minWidth:75, margin:1, borderRadius:8, padding:10, backgroundColor:selected?Colors.brand.midnight:undefined }} onPress={() => onCompetitionUpdate({ ...draft_competition, market_type: data.item })}>
+            <TouchableOpacity 
+            disabled={competition.competition_season_id ? true : false}
+            style={{ minWidth:75, margin:1, borderRadius:8, padding:10, backgroundColor:selected?Colors.brand.midnight:undefined }} onPress={() => onCompetitionUpdate({ ...draft_competition, market_type: data.item })}>
                 <Text textAlign="center"  color={selected?Colors.shades.white:Colors.brand.midnight} weight={selected?'bold':'regular'} size={14}>{data.item == 'FOR_MONEY'?'USD':'EDGE COINS'}</Text>
             </TouchableOpacity>
         )
@@ -115,6 +117,7 @@ const CompetitionSettingsForm = ({ is_valid, player, width, competition, competi
                     </View>
                     <View style={{ justifyContent:'flex-end', margin:5, borderRadius:8, backgroundColor:Colors.shades.white }}>
                         <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)}
                             ]}
@@ -128,7 +131,9 @@ const CompetitionSettingsForm = ({ is_valid, player, width, competition, competi
                     </View>
                 </View>
                 {competition_result_type?.type == 'outpace' ?
-                <TouchableOpacity style={{ backgroundColor:Colors.shades.white, borderRadius:8, padding:10 }} onPress={() => onShowPacers()}>
+                <TouchableOpacity 
+                disabled={competition.competition_season_id ? true : false}
+                style={{ backgroundColor:Colors.shades.white, borderRadius:8, padding:10 }} onPress={() => onShowPacers()}>
                     {pacer ?
                     <View style={{ ...view_styles.body_row }}>
                         <Icons.PacerCarIcon size={24} color={Colors.brand.midnight} />
@@ -167,7 +172,8 @@ const CompetitionSettingsForm = ({ is_valid, player, width, competition, competi
                     <TextInput
                         style={{ ...view_styles.input, textAlign:'center', margin:5, width:100, backgroundColor:Colors.shades.white }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, buy_in: text })}
-                        placeholder="25"
+                        placeholder="0"
+                        editable={competition.competition_season_id ? false : true}
                         value={draft_competition.buy_in as string}
                         placeholderTextColor={Colors.brand.slate}
                     />
@@ -182,6 +188,7 @@ const CompetitionSettingsForm = ({ is_valid, player, width, competition, competi
                             style={{ ...view_styles.input, textAlign:'center', width:100, backgroundColor:Colors.shades.white }}
                             onChangeText={(text) => setDraftCompetition({ ...draft_competition, available_tickets: text })}
                             placeholder="100"
+                            editable={competition.competition_season_id ? false : true}
                             value={draft_competition.available_tickets as string}
                             placeholderTextColor={Colors.brand.slate}
                         />

package/src/CompetitionManager/components/ContestSettingsForm.tsx

@@ -38,7 +38,9 @@ const ContestSettingsForm = ({ is_valid, width, competition, competition_matches
         if(!draft_competition) { return <></> }
         const selected = data.item.competition_type_id == competition.competition_type_id ? true : false
         return (
-            <TouchableOpacity style={{ minWidth:75, margin:1, borderRadius:8, padding:10, backgroundColor:selected?Colors.brand.midnight:undefined }} onPress={() => onCompetitionUpdate({ ...draft_competition, competition_type_id: data.item.competition_type_id })}>
+            <TouchableOpacity 
+                disabled={competition.competition_season_id ? true : false}
+                style={{ minWidth:75, margin:1, borderRadius:8, padding:10, backgroundColor:selected?Colors.brand.midnight:undefined }} onPress={() => onCompetitionUpdate({ ...draft_competition, 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>
         )
@@ -48,7 +50,9 @@ const ContestSettingsForm = ({ is_valid, width, competition, competition_matches
         if(!draft_competition) { return <></> }
         const selected = data.item == competition?.length_type ? true : false
         return (
-            <TouchableOpacity style={{ minWidth:75, margin:1, borderRadius:8, padding:10, backgroundColor:selected?Colors.brand.midnight:undefined }} onPress={() => onCompetitionUpdate({ ...draft_competition, length_type: data.item })}>
+            <TouchableOpacity 
+            disabled={competition.competition_season_id ? true : false}
+            style={{ minWidth:75, margin:1, borderRadius:8, padding:10, backgroundColor:selected?Colors.brand.midnight:undefined }} onPress={() => onCompetitionUpdate({ ...draft_competition, length_type: data.item })}>
                 <Text textAlign="center"  color={selected?Colors.shades.white:Colors.brand.midnight} weight={selected?'bold':'regular'} size={14}>{data.item.toUpperCase()}</Text>
             </TouchableOpacity>
         )
@@ -135,6 +139,7 @@ const ContestSettingsForm = ({ is_valid, width, competition, competition_matches
                         <Text style={{ marginTop:3 }}>The total number of picks allowed by each participant.</Text>
                     </View>
                     <TextInput
+                        editable={competition.competition_season_id ? false : true}
                         style={{ ...view_styles.input, width:75, textAlign:'center' }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, max_pick_count: text })}
                         placeholder="0"
@@ -150,6 +155,7 @@ const ContestSettingsForm = ({ is_valid, width, competition, competition_matches
                         <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={{ ...view_styles.input, width:75, textAlign:'center' }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, initial_balance: text })}
                         placeholder="0"

package/src/CompetitionManager/components/CreateCompetitionForm.tsx

@@ -1,4 +1,4 @@
-import type { CompanyProps, CompetitionProps } from "../../types"
+import type { CompanyProps, CompetitionProps, CompetitionSeasonProps } from "../../types"
 import React, { useEffect, useState } from 'react';
 import { View, TouchableOpacity, Image, FlatList, ScrollView } from 'react-native';
 import { view_styles } from "../../constants/styles";
@@ -8,12 +8,13 @@ import Colors from "../../constants/colors";
 
 type CreateCompetitionFormProps = {
     width:number,
+    competition_season?:CompetitionSeasonProps,
     max_height?:number,
     onCreate: (competition:CompetitionProps) => void,
     onClose: () => void
 }
 
-const CreateCompetitionForm = ({ width, max_height, onCreate, onClose }:CreateCompetitionFormProps) => {
+const CreateCompetitionForm = ({ competition_season, width, max_height, onCreate, onClose }:CreateCompetitionFormProps) => {
     const [ action_loading, setActionLoading ] = useState(false);
     const [ draft_competition, setDraftCompetition ] = useState(ManageCompetitionHelpers.getEmptyCompetition())
     const [ form_data ,setFormData ] = useState<{
@@ -48,7 +49,9 @@ const CreateCompetitionForm = ({ width, max_height, onCreate, onClose }:CreateCo
 
     const handleCreate = async(comp:CompetitionProps) => {
         setActionLoading(true);
-        const created_competition = await ManageCompetitionApi.createCompetition(comp.company_id, selected_company?.legacy_id, comp.competition_name, comp.template_competition_id);
+        let company_id = comp.company_id
+        if(competition_season){ company_id = competition_season.company_id }
+        const created_competition = await ManageCompetitionApi.createCompetition(company_id, selected_company?.legacy_id, comp.competition_name, comp.template_competition_id, competition_season?.competition_season_id);
         onCreate(created_competition)
         setActionLoading(false)
     }
@@ -100,6 +103,19 @@ const CreateCompetitionForm = ({ width, max_height, onCreate, onClose }:CreateCo
                     <Text style={{ marginTop:3 }} theme="body">Give the competition a name!</Text>
                 </View>
             </View>
+            {competition_season ?
+            <View style={{ backgroundColor:Colors.incentive.gold_faded, flexDirection:'row', padding:10, alignItems:'center' }}>
+                <Image
+                    source={{ uri: competition_season.image?.url }}
+                    style={{ height:30, width:30, borderRadius:4 }}
+                    resizeMode="cover"
+                />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="header_2">Season:</Text>
+                    <Text style={{ marginTop:3 }} theme="header">{competition_season.season_name}</Text>
+                </View>
+            </View>
+            :<></>}
             <ScrollView style={{ ...view_styles.section_body, maxWidth:width, backgroundColor:Colors.shades.shade100 }}>
                 <View style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth: width }}>
                     <View style={{ flex:1, margin:5, minWidth:200 }}>
@@ -114,7 +130,7 @@ const CreateCompetitionForm = ({ width, max_height, onCreate, onClose }:CreateCo
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, competition_name:text })}
                     />
                 </View>
-                {companies.length > 0 ?
+                {!competition_season && companies.length > 0 ?
                 <View style={{ padding:10 }}>
                     <View style={{ flex:1, margin:5, minWidth:200 }}>
                         <Text theme="header">Company</Text>

package/src/CompetitionSeason/api/index.ts

@@ -0,0 +1,111 @@
+import axios from "axios";
+import { APIOverrides } from "../../ApiOverrides";
+import type { CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonPlayerProps, CompetitionSeasonProps, CompetitionSeasonResultProps, CompetitionTypeProps, MyPlayerProps, PlayerBalanceProps, PublicPlayerProps } from "../../types";
+import moment from "moment-mini";
+
+let AUTH_SVC_API = ''
+let TP_SVC_API = ''
+//let EVENT_SVC_API = ''
+//let MK_SVC_API = ''
+
+
+export { SeasonApi, SeasonHelpers }
+
+const SeasonApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        TP_SVC_API = endpoints['TP_SVC_API'] as string;
+        //EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
+        //MK_SVC_API = endpoints['MK_SVC_API'] as string;
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+    },
+    getPlayersByPlayerIds : async(player_ids:string[]):Promise<PublicPlayerProps[]> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/players/bulk/get`, { player_ids })
+        return resp.data.players
+    },
+    getCompaniesByIds: async(company_ids:string[]):Promise<CompanyProps[]> => {
+        try {
+            if(company_ids.length == 0){ return [] }
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/companies/bulk/get`, { company_ids })
+            return resp.data.companies
+        } catch (e) {
+            return []
+        }
+    },
+    getMyDetails: async():Promise<MyPlayerProps> => {
+        const resp = await axios.get(`${AUTH_SVC_API}/v1/players/player/me`)
+        return resp.data.player
+    },
+    getMyBalance: async():Promise<PlayerBalanceProps> => {
+        const resp = await axios.get(`${AUTH_SVC_API}/v1/players/player/balance/me`)
+        return resp.data.player_balance
+    },
+    getSeasonById: async(competition_season_id:string):Promise<CompetitionSeasonProps> => {
+        const resp = await axios.get(`${TP_SVC_API}/v2/competitions/seasons/season/${competition_season_id}`);
+        return resp.data.competition_season
+    },
+    getCompetitionsBySeasonId: async(competition_season_id:string):Promise<CompetitionProps[]> => {
+        const resp = await axios.get(`${TP_SVC_API}/v2/competitions/season/${competition_season_id}`);
+        return resp.data.competitions
+    },
+    getCompetitionOptions: async():Promise<{competition_types:CompetitionTypeProps[], competition_result_types:CompetitionResultTypeProps[], competition_payout_types:CompetitionPayoutTypeProps[]}> => {
+        const resp = await axios.get(`${TP_SVC_API}/v1/competitions/options`)
+        return resp.data
+    },
+    getSeasonPlayersBySeasonId: async(competition_season_id:string, offset:number):Promise<{ competition_season_players: CompetitionSeasonPlayerProps[], competition_season_results:CompetitionSeasonResultProps[]}> => {
+        const resp = await axios.get(`${TP_SVC_API}/v2/competitions/seasons/players/${competition_season_id}?offset=${offset}`);
+        return resp.data
+    },
+    joinSeason: async(competition_season_id:string):Promise<{ competition_season:CompetitionSeasonProps, competition_season_player:CompetitionSeasonPlayerProps, competition_season_result:CompetitionSeasonResultProps, competitions:CompetitionProps[] }> => {
+        const resp = await axios.post(`${TP_SVC_API}/v2/competitions/season/join`, { competition_season_id });
+        return resp.data
+    },
+    leaveSeason: async(competition_season_player_id:string):Promise<{ competition_season:CompetitionSeasonProps, competition_season_player:CompetitionSeasonPlayerProps, competition_season_result:CompetitionSeasonResultProps, competitions:CompetitionProps[] }> => {
+        const resp = await axios.post(`${TP_SVC_API}/v2/competitions/season/leave`, { competition_season_player_id });
+        return resp.data
+    }
+}
+
+const SeasonHelpers = {
+    canJoin: (competition_season:CompetitionSeasonProps, competitions:CompetitionProps[]):boolean => {
+        if(competitions.length == 0){ console.log('non') }
+        if(competition_season.status != 'active'){ return false }
+        let started = moment().isAfter(moment(competition_season.scheduled_datetime)) ? true : false
+        if(started && !competition_season.allow_late_buy_in){ return false }
+        return true
+    },
+    getPayoutAmounts: (competition_season:CompetitionSeasonProps) => {
+        let total_payout = competition_season.ticket_revenue
+        if(competition_season.promo_amt){ total_payout = total_payout + parseFloat(competition_season.promo_amt as string) }
+        if(competition_season.guaranteed_payout && competition_season.guaranteed_payout > total_payout){ total_payout = competition_season.guaranteed_payout }
+
+        let season_payout = parseFloat(competition_season.payout_allocation as string) * total_payout
+        let competition_payout = total_payout - season_payout
+        return { season_payout, competition_payout }
+    },
+    formatPlace :(place:number) => {
+        switch(place){
+            case 1:
+                return '1st'
+            case 2:
+                return '2nd'
+            case 3:
+                return '3rd'
+            case 4:
+                return '4th'
+            case 5:
+                return '5th'
+            case 6:
+                return '6th'
+            case 7:
+                return '7th'
+            case 8:
+                return '8th'
+            case 9:
+                return '9th'
+            default:
+                return `${place}`
+    
+        }
+    },
+}

package/src/CompetitionSeason/components/CompetitionsSection.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { FlatList, TouchableOpacity, View } from 'react-native';
+import type { CompanyProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, PublicPlayerProps } from "../../types"
+import { view_styles } from '../../constants/styles';
+import moment from 'moment-mini';
+import CompetitionCard from '../../Engage/components/CompetitionCard';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+
+type CompetitionsSectionProps = {
+    width:number,
+    competitions:CompetitionProps[],
+    competition_result_type:CompetitionResultTypeProps,
+    competition_type:CompetitionTypeProps,
+    admin?:PublicPlayerProps,
+    company?:CompanyProps,
+    onCompetitionSelect:(c:CompetitionProps) => void
+}
+
+const CompetitionsSection = ({ competitions, width, admin, company, competition_result_type, competition_type, onCompetitionSelect }:CompetitionsSectionProps) => {
+    const [ expanded, setExpanded ] = useState(true);
+    const [ active_tab, setActiveTab ] = useState('active');
+
+    let filtered_competitions = [ ...competitions ]
+    if(active_tab == 'active'){ filtered_competitions = filtered_competitions.filter(c => c.status != 'closed') }
+    if(active_tab == 'closed'){ filtered_competitions = filtered_competitions.filter(c => c.status == 'closed') }
+
+    const renderCompetitions = (data: { item:CompetitionProps, index:number }) => {
+        return (
+            <View>
+                <CompetitionCard
+                    competition={data.item}
+                    competition_result_type={competition_result_type}
+                    competition_type={competition_type}
+                    company={company}
+                    admin={admin}
+                    onCompetitionSelect={(c) => onCompetitionSelect(c)}
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section, maxWidth: width }}>
+            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setExpanded(!expanded)}>
+                <Icons.ListIcon size={12} color={Colors.brand.midnight} />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header'>Included Competitions</Text>
+                    <Text style={{ marginTop:3 }}>View the list of competitions that are included in this season.</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8} />
+            </TouchableOpacity>
+            {expanded ?
+            <View style={{ ...view_styles.section_body, padding:0 }}>
+                <View style={{ ...view_styles.body_row, margin:10, backgroundColor:Colors.shades.white, borderRadius:22, borderWidth:4, borderColor:Colors.shades.shade100}}>
+                <Button
+                    title='ACTIVE'
+                    title_color={active_tab == 'active' ? Colors.shades.white : Colors.brand.midnight}
+                    title_weight={active_tab == 'active' ? 'bold' : 'regular'}
+                    padding={15}
+                    title_size={12}
+                    style={{flex:1}}
+                    borderRadiusOverride={{
+                        borderTopLeftRadius: 22,
+                        borderBottomLeftRadius:22,
+                        borderTopRightRadius:0,
+                        borderBottomRightRadius:0
+                    }}
+                    backgroundColor={active_tab == 'active' ? Colors.brand.midnight : Colors.shades.white}
+                    onPress={() => setActiveTab('active')}
+                />
+                <Button
+                    title='CLOSED'
+                    style={{flex:1}}
+                    title_size={12}
+                    title_color={active_tab == 'closed' ? Colors.shades.white : Colors.brand.midnight}
+                    title_weight={active_tab == 'closed' ? 'bold' : 'regular'}
+                    padding={15}
+                    borderRadiusOverride={{
+                        borderTopLeftRadius: 0,
+                        borderBottomLeftRadius:0,
+                        borderTopRightRadius:22,
+                        borderBottomRightRadius:22
+                    }}
+                    backgroundColor={active_tab == 'closed' ? Colors.brand.midnight : Colors.shades.white}
+                    onPress={() => setActiveTab('closed')}
+                />
+            </View>
+                <FlatList
+                    data={filtered_competitions.sort((a,b) => moment(b.scheduled_datetime).unix() - moment(a.scheduled_datetime).unix())}
+                    renderItem={renderCompetitions}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default CompetitionsSection