be-components 1.4.8 → 1.5.0

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

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