be-components 1.4.9 → 1.5.1

package/src/CompetitionSeason/components/EnterSeasonPrompt.tsx

@@ -0,0 +1,135 @@
+import { TouchableOpacity, View } from "react-native"
+
+import React, { useEffect, useState } from "react"
+import type { CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, MyPlayerProps, PlayerBalanceProps } from "../../types"
+import Colors from "../../constants/colors"
+import { Button, Icons, Text } from "../../Components"
+import { view_styles } from "../../constants/styles"
+import moment from "moment-mini"
+import { SeasonHelpers } from "../api"
+
+type EnterSeasonPromptProps = {
+    player?:MyPlayerProps,
+    player_balance?:PlayerBalanceProps,
+    competition_season:CompetitionSeasonProps,
+    competition_type:CompetitionTypeProps,
+    competition_result_type:CompetitionResultTypeProps,
+    width:number,
+    onVerify: () => void
+    onCancel:() => void,
+    onEnter: (promo_balance?:boolean) => void
+}
+
+const EnterSeasonPrompt = ({ player, player_balance, competition_season, competition_type, competition_result_type, width, onCancel, onEnter, onVerify }:EnterSeasonPromptProps) => {
+    const [ use_promo_balance, setUsePromoBalance ] = useState(false)
+
+    
+    useEffect(() => {
+        if(!player){ return }
+    },[])
+
+    const requires_verification = player && parseInt(competition_season?.ticket_price as string ?? 0) > 0 && competition_season?.market_type == 'FOR_MONEY' && player?.vouched_status != 'verified' ? true : false
+    const cl = competition_season.market_type == 'FOR_MONEY'?'$':'E'
+
+    const { season_payout, competition_payout } = SeasonHelpers.getPayoutAmounts(competition_season)
+
+    return (
+        <View style={{ width, backgroundColor:Colors.shades.white, borderTopRightRadius:22, borderTopLeftRadius:22, paddingTop:22 }}>
+           <View nativeID="competition_info">
+            <Text size={16} color={Colors.brand.midnight} weight='bold' textAlign="center">Season Details</Text>
+                {competition_type ?
+                <View style={{ flexDirection:'row', justifyContent:'center', margin:10 }}>
+                    <View style={{ padding:10, marginRight:4, backgroundColor: Colors.brand.midnight }}>
+                        <Text size={12} color={Colors.shades.white} weight='semibold'>{competition_type.type_label}</Text>
+                    </View>
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:10, marginLeft:4, backgroundColor: Colors.shades.white, borderRadius:4, ...view_styles.float }}>
+                        <Text style={{ marginRight:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>{competition_season.invite_only?'Private':'Public'}</Text>
+                        {competition_season.invite_only ?
+                        <Icons.EyeOffIcon color={Colors.brand.midnight} size={14}/>
+                        :
+                        <Icons.EyeOnIcon color={Colors.brand.midnight} size={14}/>
+                        }
+                    </View>
+                </View>
+                :<></>}
+                <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign="center">{competition_season.season_name}</Text>
+            </View>
+            <View>
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">{moment(competition_season.scheduled_datetime).format('MMM DD - hh:mm a')}</Text>
+                {competition_season.season_description ?
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">{competition_season.season_description}</Text>
+                :<></>}
+                {competition_result_type ?
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">{competition_result_type.label}</Text>
+                :<></>}
+                {competition_type?.type == 'pick' ?
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Picks: {competition_season.max_picks}</Text>
+                :<></>}
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Potential Season Winnings: {cl}{season_payout.toFixed(2)}</Text>
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Potential Competition Winnings: {cl}{competition_payout.toFixed(2)}</Text>
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Ticket Price: {cl}{(competition_season.ticket_price as number).toFixed(2)}</Text>
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Entries: {competition_season.tickets_sold}/{competition_season.tickets_available}</Text>
+            </View>
+            <View nativeID="pick_actions" style={{ flexDirection:'row', padding:10 }}>
+                <Button
+                    style={{ flex:1, marginRight:3 }}
+                    borderRadius={4}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    padding={10}
+                    title="Cancel"
+                    title_color={Colors.brand.electric}
+                    onPress={() => onCancel()}
+                />
+                {requires_verification ?
+                <Button
+                    borderRadius={4}
+                    style={{ flex:2, marginLeft:2 }}
+                    backgroundColor={Colors.utility.warning}
+                    padding={10}
+                    title={`Verify My Account`}
+                    title_color={Colors.shades.white}
+                    onPress={() => onVerify()}
+                />
+                :
+                 <Button
+                    borderRadius={4}
+                    style={{ flex:2, marginLeft:2 }}
+                    backgroundColor={Colors.utility.success}
+                    padding={10}
+                    title={`Enter Season${competition_season.ticket_price == 0 ? ``:` ${cl}${competition_season.ticket_price}`}`}
+                    title_color={Colors.shades.white}
+                    onPress={() => {
+                        if(player_balance && competition_season.market_type == 'FOR_MONEY' && player_balance.balance < parseFloat(competition_season.ticket_price as string)){ return alert('Not enough balance to enter. Please make a deposit before continuing') }
+                        
+                        onEnter(use_promo_balance)
+                    }}
+                />
+                }
+            </View>
+            {player_balance && player_balance.promo_balance > 0 ?
+            <TouchableOpacity style={{ backgroundColor:Colors.incentive.gold, padding:10, flexDirection:'row', alignItems:'center' }} onPress={() => {
+                if(use_promo_balance){
+                    //Remove promo balance and open_amt
+                    setUsePromoBalance(false);
+                } else {
+                    setUsePromoBalance(true);                    
+                }
+            }}>
+                    <View style={{ marginRight:10, height:30, width:30, borderWidth:1, borderColor:Colors.brand.midnight, justifyContent:'center', alignItems:'center' }}>
+                        {use_promo_balance ?
+                        <View style={{ height:20, width:20, backgroundColor:Colors.brand.midnight }} />
+                        :<></>}
+                    </View>
+                    <View>
+                        <Text size={14} weight='bold' color={Colors.shades.white}>${player_balance?.promo_balance} Promotion Available</Text>
+                        <Text style={{ marginTop:2}} size={12} color={Colors.shades.white} weight='regular'>Press / Click here to use promo balance</Text>
+                    </View>
+                
+            </TouchableOpacity>
+            :<></>}
+        </View>
+    )
+}
+
+export default EnterSeasonPrompt

package/src/CompetitionSeason/components/SeasonHeader.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { View, TouchableOpacity ,Image } from 'react-native'
+import Colors from '../../constants/colors';
+import type { CompetitionProps, CompetitionSeasonPlayerProps, CompetitionSeasonProps, MyPlayerProps } from '../../types';
+import { Button, Icons, Text } from '../../Components';
+import { SeasonHelpers } from '../api';
+import moment from 'moment-mini';
+
+type SeasonHeaderProps = {
+    competition_season:CompetitionSeasonProps,
+    competitions:CompetitionProps[],
+    player?:MyPlayerProps,
+    action_loading:boolean,
+    authenticated_season_player?:CompetitionSeasonPlayerProps,
+    onShareSeason:(cs:CompetitionSeasonProps) => void,
+    onJoin:(competition_season:CompetitionSeasonProps) => void,
+    onLeave:(competition_season_player_id:string) => void
+
+}
+const SeasonHeader = ({ action_loading, authenticated_season_player, competition_season, competitions, onShareSeason, onJoin, onLeave }:SeasonHeaderProps) => {
+
+    const can_join = SeasonHelpers.canJoin(competition_season, competitions);
+    const can_leave = true;
+
+    return (
+        <View style={{ backgroundColor:Colors.shades.white }}>
+            <View nativeID="competition_header" style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View>
+                    <Image
+                        source={{ uri: competition_season.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}
+                        style={{ height:50, width:50, borderRadius:4 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header'>{competition_season.season_name}</Text>
+                    <Text style={{ marginTop:4 }} theme='header_2>'>{competition_season.season_description}</Text>
+                </View>
+                <TouchableOpacity style={{ paddingLeft:10 }} onPress={() => onShareSeason(competition_season)}>
+                    <Icons.ShareIcon color={Colors.brand.midnight} size={14} />
+                </TouchableOpacity>
+            </View>
+            
+            <View style={{ flexDirection:'row', padding:10, backgroundColor:Colors.shades.shade100 }}>
+                <View style={{ flex:1 }}>
+                    <Text size={12} color={Colors.brand.midnight} weight='regular'>{competition_season.status == 'closed' ? 'COMPLETED' : competition_season.status == 'pending' ? 'UNDER CONSTRUCTION': can_join ? 'JOIN' : 'IN PROGRESS'}</Text>
+                    {competition_season.status == 'pending' ?
+                    <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='bold'>The admin is still working on this season</Text>
+                    : can_join ?
+                    <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='bold'>{competition_season.allow_late_buy_in ? 'anytime during the season' : `until ${moment(competition_season.scheduled_datetime).format('MMM DD hh:mm a')}`}</Text>
+                    :
+                    <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='bold'>{moment(competition_season.scheduled_datetime).format('MMM DD hh:mm a')}</Text>
+                    }
+                </View>
+                {!authenticated_season_player ?
+                <Button
+                    title='JOIN'
+                    disabled={action_loading}
+                    style={{ opacity: action_loading ? 0.5 : 1 }}
+                    loading={action_loading}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => onJoin(competition_season)}
+                />
+                :
+                <Button
+                    title='LEAVE'
+                    backgroundColor={Colors.utility.error}
+                    loading={action_loading}
+                    title_color={Colors.shades.white}
+                    style={{ opacity: can_leave && !action_loading ? 1: 0.5 }}
+                    disabled={!can_leave || action_loading}
+                    onPress={() => onLeave(authenticated_season_player.competition_season_player_id)}
+                />
+                }
+            </View>
+        </View>
+    )
+}
+
+export default SeasonHeader

package/src/CompetitionSeason/components/SeasonLeaderboard.tsx

@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from "react"
+import { FlatList, Image, ScrollView, TouchableOpacity, View, ActivityIndicator } from "react-native"
+import type { CompetitionSeasonPlayerProps, CompetitionSeasonProps, CompetitionSeasonResultProps, CompetitionTypeProps, MyPlayerProps, PublicPlayerProps } from "../../types"
+import { Button, Icons, Text } from "../../Components"
+import Colors from "../../constants/colors"
+import { view_styles } from "../../constants/styles"
+import { SeasonApi, SeasonHelpers } from "../api"
+
+type SeasonLeaderboardProps = {
+    competition_season:CompetitionSeasonProps,
+    competition_type:CompetitionTypeProps,
+    height: number,
+    authenticated_player?:MyPlayerProps,
+    authenticated_season_player?:CompetitionSeasonPlayerProps,
+    authenticated_season_result?:CompetitionSeasonResultProps,
+    width:number,
+    view_mode: 'short'|'full',
+    onClose?:() => void,
+    onSeeFull: () => void,
+    onLeaderSelect:(player:PublicPlayerProps) => void
+}
+
+const SeasonLeaderboard = ({ competition_season, authenticated_player, authenticated_season_player, authenticated_season_result, competition_type, width, height, view_mode, onSeeFull, onClose, onLeaderSelect }:SeasonLeaderboardProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+    const [ data, setData ] = useState<{
+        loading:boolean,
+        competition_season_results:CompetitionSeasonResultProps[],
+        competition_season_players:CompetitionSeasonPlayerProps[],
+        players:PublicPlayerProps[],
+        offset:number
+    }>({
+        loading:false,
+        competition_season_results:[],
+        competition_season_players:[],
+        players:[],
+        offset:0
+    })
+
+    const { loading, competition_season_results, competition_season_players, players, offset } = data
+    let results = [ ...competition_season_results ];
+
+    if(view_mode == 'short'){ results = results.filter((r,i) => r ? i < 3 : i < 3) }
+    const cl = competition_season?.market_type == 'FOR_MONEY' ? '$' : 'E'
+
+    useEffect(() => {
+        if(!competition_season){ return }
+        getLeaderboardFromServer(competition_season.competition_season_id, 0);
+    },[competition_season])
+
+    const getLeaderboardFromServer = async(season_id:string, offset:number) => {
+        setData({ ...data, loading:true })
+        const result_response = await SeasonApi.getSeasonPlayersBySeasonId(season_id, offset);
+        let player_ids = result_response.competition_season_players.map(cr => cr.player_id)
+        let players:PublicPlayerProps[] = []
+        if(player_ids.length > 0){ players = await SeasonApi.getPlayersByPlayerIds(player_ids) }
+        setData({
+            ...data,
+            players,
+            competition_season_players: result_response.competition_season_players,
+            competition_season_results: result_response.competition_season_results,
+            offset,
+
+        })
+    }
+
+    const renderResults = (data: {item:CompetitionSeasonResultProps, index:number}) => {
+        let player:PublicPlayerProps | undefined = players.find(p => p.player_id == data.item.player_id)
+        let record = competition_season_players.find(r => r.player_id == data.item.player_id)
+        if(!player || !record){ return <></> }
+
+        const is_pacer = competition_season.pacer_id == data.item.player_id ? true : false
+        return (
+            <TouchableOpacity 
+                onPress={() => onLeaderSelect(player)}
+                style={{ flexDirection:'row', margin:5, alignItems:'center', borderRadius:22, backgroundColor:is_pacer?Colors.highlights.highlight400Faded:Colors.shades.white, padding:8, paddingLeft:15, paddingRight:15}}>
+                {is_pacer ?
+                <View nativeID="pacer" style={{}}>
+                    <Icons.PacerCarIcon size={28}/>
+                </View>
+                :
+                <View nativeID="place" style={{ padding:5 }}>
+                    <Text size={12} color={Colors.brand.midnight} weight="bold">{SeasonHelpers.formatPlace(data.item.place)}</Text>
+                </View>
+                }
+                <View nativeID="image" style={{ paddingLeft:10, paddingRight:10 }}>
+                    <Image
+                        source={{ uri: player.profile_pic }}
+                        style={{ height:30, width:30, borderRadius:100 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View nativeID="details" style={{ flex:1 }}>
+                    <Text size={12} color={Colors.brand.midnight} weight='semibold'>{player.username}</Text>
+                    {competition_type?.type == 'wager' ?
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{record.earnings.toFixed(2)} Earned</Text>
+                    :
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{record.wins} - {record.losses} - {record.draws}</Text>
+                    }
+                </View>
+                <View nativeID="winnings">
+                    <Text size={12} color={Colors.brand.slate} weight='regular'>{cl}{data.item.winnings.toFixed(2)}</Text>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section, margin:view_mode == 'full'?0:10, minWidth:350, height:view_mode == 'full'?height:undefined, width: view_mode == 'full' ? width: undefined }}>
+            {view_mode == 'short' ?
+            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
+                <Icons.PodiumIcon size={18} color={Colors.brand.midnight} />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="header">Season Leaderboard</Text>
+                    <Text style={{ marginTop: 4 }} theme="body_2">Leaderboard showing current standings of this season.</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8} />
+            </TouchableOpacity>
+            :<></>}
+            {expanded || view_mode == 'full' ?
+            <View style={{ ...view_styles.section_body }}>
+            {authenticated_player && authenticated_season_player && authenticated_season_result ?
+            <View>
+                 <View style={{ backgroundColor:Colors.brand.midnight, padding:10, marginBottom:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                    <Text size={14} color={Colors.shades.white} weight='regular'>MY RESULTS</Text>
+                    <TouchableOpacity style={{ flexDirection:'row', marginTop:10, marginBottom:10, alignItems:'center', borderRadius:22, backgroundColor:Colors.shades.white, padding:8, paddingLeft:15, paddingRight:15}}>
+                        <View nativeID="place" style={{ padding:5 }}>
+                            <Text size={12} color={Colors.brand.midnight} weight="bold">{SeasonHelpers.formatPlace(authenticated_season_result.place)}</Text>
+                        </View>
+                        <View nativeID="image" style={{ paddingLeft:10, paddingRight:10 }}>
+                            <Image
+                                source={{ uri: authenticated_player.profile_pic }}
+                                style={{ height:30, width:30, borderRadius:100 }}
+                                resizeMode="cover"
+                            />
+                        </View>
+                        <View nativeID="details" style={{ flex:1 }}>
+                            <Text size={12} color={Colors.brand.midnight} weight='semibold'>{authenticated_player.username}</Text>
+                            {competition_type?.type == 'wager' ?
+                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{authenticated_season_player.earnings.toFixed(2)}</Text>
+                                :
+                                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{authenticated_season_player.wins} - {authenticated_season_player.losses} - {authenticated_season_player.draws}</Text>
+                            }
+                        </View>
+                        <View nativeID="winnings">
+                            <Text size={12} color={Colors.brand.slate} weight='regular'>{cl}{authenticated_season_result.winnings.toFixed(2)}</Text>
+                        </View>
+                    </TouchableOpacity>
+                </View>
+            </View>
+            :<></>}
+            <ScrollView style={{ backgroundColor:Colors.shades.shade100, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                {loading ?
+                <ActivityIndicator style={{ alignSelf:'center', padding:10 }} size='large' color={Colors.brand.midnight} /> 
+                :<></>}
+                <FlatList
+                    data={results}
+                    renderItem={renderResults}
+                    keyExtractor={(item) => item.competition_season_result_id.toString()}
+                />
+                
+            </ScrollView>
+            {view_mode == 'short' ?
+                <Button
+                    style={{ backgroundColor:undefined }}
+                    title='View Full Leaderboard'
+                    title_color={Colors.brand.electric}
+                    title_size={14}
+                    onPress={() => onSeeFull()}
+                />
+            :<></>}
+            {onClose ?
+            <View style={{ padding:10, ...view_styles.float }}>
+                <View style={{ padding:10, flexDirection:'row', alignItems:'center', justifyContent:'space-between' }}>
+                    {offset > 0 ?
+                    <Button
+                        title='PREV'
+                        title_color={Colors.brand.electric}
+                        backgroundColor='transparent'
+                        onPress={() => getLeaderboardFromServer(competition_season.competition_season_id, offset - 1)}
+                    />
+                    :<View/>}
+                    <Button
+                        title='NEXT'
+                        title_color={Colors.brand.electric}
+                        backgroundColor='transparent'
+                        onPress={() => getLeaderboardFromServer(competition_season.competition_season_id, offset + 1)}
+                    />
+                </View>
+                <Button
+                    title='Close'
+                    style={{ padding:15 }}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.error}
+                    onPress={() => onClose()}
+                />
+            </View>
+            :<></>}
+            </View>
+            :<></>}
+            
+        </View>
+    )
+}
+
+export default SeasonLeaderboard

package/src/CompetitionSeason/components/SeasonSettingsSection.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity, FlatList } from 'react-native';
+
+import type { CompetitionPayoutTypeProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps } from "../../types"
+import { view_styles } from '../../constants/styles';
+import { Icons, Text } from '../../Components';
+import { SeasonHelpers } from '../api';
+import Colors from '../../constants/colors';
+
+type SeasonSettingsSectionProps = {
+    width:number,
+    competition_season:CompetitionSeasonProps,
+    competition_type:CompetitionTypeProps,
+    competition_result_type:CompetitionResultTypeProps,
+    competition_payouts:CompetitionPayoutTypeProps[]
+}
+
+const SeasonSettingsSection = ({ width, competition_season, competition_type, competition_result_type, competition_payouts }:SeasonSettingsSectionProps) => {
+    const [ expanded, setExpanded ] = useState(true);
+
+    const { season_payout, competition_payout } = SeasonHelpers.getPayoutAmounts(competition_season)
+    const cl = competition_season.market_type == 'FOR_MONEY' ? '$' : 'E'
+
+    const renderPayouts = (data: { item:CompetitionPayoutTypeProps, index:number }) => {
+        return (
+            <View style={{ ...view_styles.body_row, padding:8, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <Text style={{ flex:1 }} theme='header_2'>{SeasonHelpers.formatPlace(data.item.tier)}{data.item.tier!= 1 ? ' Or Better': ''}</Text>
+                <Text theme='header_2'>Split {data.item.payout}%</Text>
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section, maxWidth: width }}>
+            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setExpanded(!expanded)}>
+                <Icons.SettingsIcon size={18} color={Colors.brand.midnight} />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header'>Season Details</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>View important details about this season.</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} size={8} color={Colors.brand.midnight} />
+            </TouchableOpacity>
+            {expanded ?
+            <View style={{ ...view_styles.section_body }}>
+                <View style={view_styles.body_row}>
+                    <View style={{ flex:1 }}>
+                        <Text theme='header_2'>Competition Type</Text>
+                        <Text style={{ marginTop:3 }} theme='body_2'>Each competition within this season will use this type</Text>
+                    </View>
+                    <Text theme='header'>{competition_type.type_label.toUpperCase()}</Text>
+                </View>
+                <View style={view_styles.body_row}>
+                    <View style={{ flex:1 }}>
+                        <Text theme='header_2'>Season Winner Allocation</Text>
+                        <Text style={{ marginTop:3 }} theme='body_2'>How much of the total pot is dedicated to the season winner?</Text>
+                    </View>
+                    <View style={{ justifyContent:'center', alignItems:'center' }}>
+                        <Text theme='header_2'>{cl}{season_payout.toFixed(2)}</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>{(parseFloat(competition_season.payout_allocation as string) * 100).toFixed(2)}%</Text>
+                    </View>
+                </View>
+                <View style={view_styles.body_row}>
+                    <View style={{ flex:1 }}>
+                        <Text theme='header_2'>Each Competition Allocation</Text>
+                        <Text style={{ marginTop:3 }} theme='body_2'>How much of the total pot is dedicated to each competition winner?</Text>
+                    </View>
+                    <View style={{ justifyContent:'center', alignItems:'center' }}>
+                        <Text theme='header_2'>{cl}{competition_payout.toFixed(2)}</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>{(( 1 - (parseFloat(competition_season.payout_allocation as string))) * 100).toFixed(2)}%</Text>
+                    </View>
+                </View>
+                <View style={view_styles.body_row}>
+                    <Text style={{flex:1}} theme="header_2">Payout Type</Text>
+                    <Text theme="header_2">{competition_result_type.label.toUpperCase()}</Text>
+                </View>
+                <View style={{ padding:10, borderRadius:8, backgroundColor:Colors.shades.shade100 }}>
+                    <Text style={{ padding:5 }} theme="header_2">{competition_result_type.description}</Text>
+                    <View style={{ padding:10 }}>
+                        <FlatList
+                            data={competition_payouts.filter(cp => cp.competition_result_type_id == competition_season.competition_result_type_id).sort((a,b) => b.tier - a.tier)}
+                            renderItem={renderPayouts}
+                            keyExtractor={(item) => item.competition_payout_type_id.toString()}
+                        />
+                    </View>
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SeasonSettingsSection