be-components 0.7.2 → 0.7.4

package/src/Competition/components/MatchMarketCard.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { ActivityIndicator, FlatList, View } from "react-native"
+import MarketsCard from "./MarketsCard"
+import moment from 'moment-mini';
+import type { AthleteProps, CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionProps, CompetitionTypeProps, MarketProps, MatchProps, PlayerPickProps, TeamProps } from '../../types';
+import { CompetitionHelpers } from '../api';
+import { Text } from '../../Components';
+import Colors from '../../constants/colors';
+import LinearDiagnal from '../../Components/LinearDiagnal';
+import { AthleteImage } from '../../Components/Jerseys';
+
+
+type MatchMarketCardProps = {
+    match:MatchProps,
+    competition:CompetitionProps,
+    competition_type:CompetitionTypeProps,
+    home_athlete?:AthleteProps,
+    away_athlete?:AthleteProps,
+    home_team?:TeamProps,
+    away_team?:TeamProps,
+    markets:MarketProps[]
+    onPick:(pp:PlayerPickProps, event_title:string, event_start:string) => void
+    mode: 'view'|'play'
+    loading?:boolean,
+    //orientation:'horizontal'|'vertical',
+    player_picks:PlayerPickProps[],
+    competition_match:CompetitionMatchProps,
+    competition_match_markets:CompetitionMatchMarketProps[]
+}
+const MatchMarketCard = ({ match, home_athlete, away_athlete, competition_type, markets, competition_match, player_picks, competition_match_markets, mode, onPick, loading }:MatchMarketCardProps) => {
+    const wager_picks = player_picks.filter(pp => pp.stake > 0)
+    const market = markets.find(m => m.market_id == competition_match.market_id_override)
+    
+    const handleMarketSelect = async(mm:CompetitionMatchMarketProps, player_pick?:PlayerPickProps) => {
+        if(!match){ return }
+        if(match.participant_type != 'athlete'){ return alert('Not set up for team based matches') }
+        let market = markets.find(m => m.market_id == mm.market_id)
+        if(!match || !competition_type || !market || !away_athlete || !home_athlete){ return alert('Unable to process') }
+        if(moment(match.scheduled_datetime).isBefore(moment())){ return alert('This event has already started') }
+        if(player_pick){
+            return onPick(player_pick, match.match_title, match.scheduled_datetime)
+            //await CompetitionStoreActions.removePlayerPick(player_pick.player_pick_id)
+        } else {
+            let pp = CompetitionHelpers.createPickFromMatchMarket(competition_match.competition_id, mm)
+            let pick_title = CompetitionHelpers.getPickTitleForMatch(pp, market)
+            return onPick({ ...pp, pick_title }, match.match_title, match.scheduled_datetime)
+        }
+    }
+
+
+    const renderWagerPicks = (data: { item:PlayerPickProps, index:number }) => {
+        const locked = mode == 'view' && moment().isBefore(moment(match.scheduled_datetime)) ? true : false
+        return (
+            <View style={{ flexDirection:'row', marginTop:5 }}>
+                <Text style={{ flex:1 }} size={12} color={Colors.highlights.highlight200}>{locked?'WAGER LOCKED':data.item.pick_title}</Text>
+                <Text style={{ flex:1 }} size={12} color={Colors.highlights.highlight200} textAlign="right">{locked?'':`${data.item.stake.toFixed(2)} to win ${data.item.potential_winnings.toFixed(2)}`}</Text>
+            </View>
+        )
+    }
+
+    if(!match || !away_athlete || !home_athlete){ return <></> }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flexDirection:'row', alignItems:'center', borderTopRightRadius:8, borderTopLeftRadius:8, padding:10, backgroundColor:Colors.shades.shade100 }}>
+                <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>{match.match_title}</Text>
+                <Text size={12} color={Colors.brand.midnight} weight='regular'>{match.status == 'not_started'?moment(match.scheduled_datetime).format('MM/DD hh:mm a'):match.status}</Text>
+            </View>
+            {market ?
+                <LinearDiagnal 
+                label={market.stat_label ?? market.type}
+                label_size={10}
+                style={{  padding:5 }}
+                left_color={Colors.incentive.gold}
+                right_color={'#ebd197'}
+            />
+            :<></>}
+            <View style={{ flex:1, padding:10 }}>
+                {match.participant_type == 'athlete' ?
+                <View nativeID="event_details" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    <View nativeID="away_athlete" style={{ flex:1 }}>
+                        <AthleteImage size={24} athlete={away_athlete}/>
+                        <Text style={{ padding:10 }} size={14} color={Colors.brand.midnight} weight='bold' textAlign="center">{away_athlete.first_name} {away_athlete.last_name}</Text>
+                    </View>
+                    <Text size={14} color={Colors.brand.midnight} style={{ padding:20 }} weight='bold'>VS</Text>
+                    <View nativeID="away_athlete" style={{ flex:1 }}>
+                        <AthleteImage size={24} athlete={home_athlete}/>
+                        <Text style={{ padding:10 }} size={14} color={Colors.brand.midnight} weight='bold' textAlign="center">{home_athlete.first_name} {home_athlete.last_name}</Text>
+                    </View>
+                </View>
+                :<></>}
+                <View nativeID="market_details">
+                    <MarketsCard
+                        player_picks={player_picks}
+                        mode={mode}
+                        markets={markets}
+                        orientation="horizontal"
+                        disabled={moment().isAfter(moment(match.scheduled_datetime))?true:false}
+                        locked={mode == 'view' && moment().isBefore(moment(match.scheduled_datetime)) ? true : false}
+                        competition_match_markets={competition_match_markets}
+                        onMarketSelect={(mm, player_pick) => handleMarketSelect(mm, player_pick)}
+                    />
+                    {loading ?
+                    <View style={{ position:'absolute', top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                        <ActivityIndicator
+                            size='large'
+                            color={Colors.brand.midnight}
+                        />
+                    </View>
+                    :<></>}
+                </View>
+            </View>
+            {wager_picks.length > 0 ?
+            <View nativeID="wager_picks">
+                <FlatList
+                    data={wager_picks}
+                    renderItem={renderWagerPicks}
+                    keyExtractor={(item) => item.player_pick_id.toString()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default MatchMarketCard

package/src/Competition/components/NavOutPrompt.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Image, TouchableOpacity, View } from "react-native"
+import type { CodeRequestProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps } from '../../types';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { CompetitionHelpers } from '../api';
+
+
+
+type NavOutPromptProps = {
+    image_url?:string,
+    title:string
+    code_details: { 
+        promo?:PromoProps, 
+        code_request?: CodeRequestProps, 
+        player_referral?:PlayerReferralProps, 
+        referrer?:PublicPlayerProps, 
+        reward_option?:RewardOptionProps 
+    },
+    body:string,
+    max_width?:number
+    hide_accept?:boolean,
+    accept_title?:string,
+    cancel_title?:string,
+    onCancel:() => void,
+    onAccept: () => void
+}
+
+const NavOutPrompt = ({ image_url, code_details, accept_title, cancel_title, title, hide_accept, body, onCancel, onAccept, max_width }:NavOutPromptProps) => {
+
+    const { code_request, promo, referrer } = code_details;
+
+    return (
+        <View style={{ minWidth:350, borderRadius:8, maxWidth:max_width, backgroundColor:Colors.shades.white, minHeight:350 }}>
+            <View nativeID="title" style={{ padding:10, backgroundColor:Colors.shades.shade100, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <Text size={18} color={Colors.brand.midnight} textAlign="center" weight='bold'>{title}</Text>
+            </View>
+            <View nativeID="body_image" style={{ flex:1, padding:20 }}>
+                <View nativeID="image" style={{ justifyContent:'center', alignItems:'center' }}>
+                    <Image
+                        source={{ uri: image_url }}
+                        style={{ height:150, width:150, borderRadius:8 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View style={{ padding:10 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign="center">{body}</Text>
+                </View>
+            </View>
+            {code_request && !['closed','fulfilled'].includes(code_request.status) && promo ?
+            <TouchableOpacity style={{ margin:5, flexDirection:'row', backgroundColor:Colors.shades.white, borderRadius:8, shadowColor: "rgba(0, 0, 0, 0.06)", shadowOffset: { width: 0, height: 10 }, shadowRadius: 10, shadowOpacity: 1 }}
+            onPress={() => onAccept()}>
+                <View style={{ padding:10, justifyContent:'center' }}>
+                    <Icons.GiftIcon size={30} color={Colors.incentive.gold} />
+                </View>
+                <View style={{flex:1, backgroundColor:Colors.incentive.gold_faded, padding:10 }}>
+                    <Text style={{ paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }} size={16} color={Colors.brand.midnight} weight='bold'>@{referrer?.username} has a gift for you</Text>
+                    <Text style={{ paddingTop:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>{CompetitionHelpers.getReferralDescription(promo)}</Text>
+                </View>
+            </TouchableOpacity>
+            :<></>}
+            <View nativeID="action_row" style={{ borderTopWidth:1, borderColor:Colors.shades.shade600, padding:10, flexDirection:'row' }}>
+                <Button
+                    title={cancel_title ?? 'No Thanks'}
+                    style={{ flex:1, margin:2 }}
+                    title_color={Colors.brand.midnight}
+                    borderRadius={8}
+                    borderWidth={1}
+                    borderColor={Colors.brand.midnight}
+                    onPress={() => onCancel()}
+                />
+                {!hide_accept ?
+                <Button
+                    style={{flex:1, margin:2}}
+                    title={accept_title ?? 'Submit'}
+                    title_color={Colors.shades.white}
+                    borderRadius={8}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => onAccept()}
+                />
+                :<></>}
+            </View>
+        </View>
+    )
+}
+
+export default NavOutPrompt

package/src/Competition/components/SeasonInfoModal.tsx

@@ -0,0 +1,212 @@
+import React, { useEffect, useState } from "react"
+import { FlatList, Image, ScrollView, TouchableOpacity, View, ActivityIndicator } from "react-native"
+import CompetitionCard from "./CompetitionCard"
+import type { CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, PublicPlayerProps } from "../../types"
+import { CompetitionApi, CompetitionSeasonApi } from "../api"
+import { Button, Text } from "../../Components"
+import Colors from "../../constants/colors"
+import moment from "moment-mini"
+
+type SeasonInfoModalProps = {
+    competition_season:CompetitionSeasonProps,
+    competition_types:CompetitionTypeProps[],
+    competition_result_types:CompetitionResultTypeProps[],
+    width:number,
+    height:number,
+    onSelectCompetition: (competition:CompetitionProps) => void,
+    onClose:() => void
+}
+
+const SeasonInfoModal = ({ competition_season, competition_types, competition_result_types, width, height, onClose, onSelectCompetition }:SeasonInfoModalProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ active_view, setActiveView ] = useState('info');
+    const [ leaderboard, setLeaderboard ] = useState<{
+        players: PublicPlayerProps[],
+        leaders: any[]
+    }>({
+        players: [],
+        leaders: []
+    });
+    const [ competitions, setCompetitions ] = useState<CompetitionProps[]>([])
+
+    const { leaders, players } = leaderboard;
+
+    useEffect(() => {
+        if(!competition_season){ return }
+        getSeasonCompetitions(competition_season.competition_season_id)
+    },[competition_season])
+
+    useEffect(() => {
+        switch(active_view){
+            case 'competitions':
+                getSeasonCompetitions(competition_season.competition_season_id)
+                return
+            case 'leaderboard':
+                getSeasonLeaderboard(competition_season.competition_season_id);
+                return
+            default: return
+        }
+    },[active_view])
+
+    const getSeasonCompetitions = async(competition_season_id:string) => {
+        setLoading(true);
+        try {
+            let season_competitions = await CompetitionApi.getCompetitionsBySeasonId(competition_season_id)
+            setCompetitions(season_competitions)
+        } catch (e) {
+            console.log(e)
+        }
+        setLoading(false)
+    }
+
+    const getSeasonLeaderboard = async(competition_season_id:string) => {
+        setLoading(true);
+        try {
+            let season_leaderboard = await CompetitionSeasonApi.getLeaderboardBySeasonId(competition_season_id)
+            const player_ids:string[] = season_leaderboard.map((sl:any) => sl.player_id)
+            const leader_players = await CompetitionApi.getPlayersByPlayerIds(player_ids);
+            setLeaderboard({
+                leaders: season_leaderboard,
+                players: leader_players
+            })
+        } catch (e) {
+            console.log(e)
+        }
+        setLoading(false)
+    }
+
+    const renderCompetitions = (data: { item:CompetitionProps, index:number }) => {
+        const competition_type = competition_types.find(ct => ct.competition_type_id == data.item.competition_type_id);
+        const competition_result_type = competition_result_types.find(ct => ct.competition_result_type_id == data.item.competition_result_type_id);
+        if(!competition_type || !competition_result_type){ return <></> }
+        return (
+            <View style={{ margin:5 }}>
+                <CompetitionCard
+                    competition={data.item}
+                    competition_result_type={competition_result_type}
+                    competition_type={competition_type}
+                    onSelect={() => onSelectCompetition(data.item)}
+                />
+            </View>
+        )
+    }
+
+    const renderLeaders = (data: { item:any, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id)
+        if(!player){ return <></> }
+        return (
+            <View 
+                style={{ flexDirection:'row', margin:5, 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">{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>
+                    
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{data.item.wins} - {data.item.losses} - {data.item.draws} ({data.item.earnings.toFixed(2)} Earnings)</Text>
+                </View>
+                <View nativeID="winnings">
+                    <Text size={12} color={Colors.brand.slate} weight='regular'>Hey</Text>
+                </View>
+            </View>
+        )
+    }
+
+    if(!competition_season){ return }
+    const cl = competition_season.market_type == 'FOR_MONEY' ? '$' : 'E'
+    return (
+        <View style={{ height, width, backgroundColor:Colors.shades.white }}>
+            <ScrollView style={{ flex:1 }}>
+                {loading ?
+                <ActivityIndicator style={{ padding:20, alignSelf:'center' }} color={Colors.brand.midnight} size='large' />
+                :<></>}
+                <View nativeID="season_header" style={{ justifyContent:'center', alignItems:'center' }}>
+                    <Image
+                        source={{ uri: competition_season.image?.url }}
+                        style={{ width: width*0.75, height: (width*0.75) / 2 }}
+                        resizeMode='cover'
+                    />
+                    <View style={{ margin:10 }}>
+                        <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign="center">{competition_season.season_name}</Text>
+                        <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">{competition_season.season_description}</Text>
+                    </View>
+                </View>
+                <View style={{ margin:10, flexDirection:'row', padding:2, backgroundColor:Colors.shades.shade100, borderRadius:22 }}>
+                    <TouchableOpacity 
+                        onPress={() => setActiveView('leaderboard')}
+                        style={{ flex:1, padding:10, borderRadius:22, backgroundColor:active_view=='leaderboard'?Colors.shades.white:undefined }}>
+                        <Text size={14} color={Colors.brand.midnight} weight={active_view=='leaderboard'?'bold':'regular'} textAlign="center">Leaderboard</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity 
+                        onPress={() => setActiveView('info')}
+                        style={{ flex:1, padding:10, borderRadius:22, backgroundColor:active_view=='info'?Colors.shades.white:undefined }}>
+                        <Text size={14} color={Colors.brand.midnight} weight={active_view=='info'?'bold':'regular'} textAlign="center">Info</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity 
+                        onPress={() => setActiveView('competitions')}
+                        style={{ flex:1, padding:10, borderRadius:22, backgroundColor:active_view=='competitions'?Colors.shades.white:undefined }}>
+                        <Text size={14} color={Colors.brand.midnight} weight={active_view=='competitions'?'bold':'regular'} textAlign="center">Competitions</Text>
+                    </TouchableOpacity>
+                </View>
+                {active_view == 'info'?
+                <View nativeID="season_info" style={{ padding:20 }}>
+                    <View style={{ flexDirection:'row' }}>
+                        <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='regular'>Season Type</Text>
+                        <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='bold' textAlign="right">{competition_season.single_buy_in?'One Time Entry':'Each Competition Entry'}</Text>
+                    </View>
+                    <View style={{ flexDirection:'row', marginTop:10 }}>
+                        <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='regular'>Late Entry</Text>
+                        <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='bold' textAlign="right">{competition_season.allow_late_buy_in?'Allowed':'Not Allowed'}</Text>
+                    </View>
+                    <View style={{ flexDirection:'row', marginTop:10 }}>
+                        <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='regular'>Season Allocation</Text>
+                        <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='bold' textAlign="right">{(competition_season.payout_allocation*100).toFixed(2)}%</Text>
+                    </View>
+                    <View style={{ flexDirection:'row', marginTop:10 }}>
+                        <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='regular'>Each Competition Allocation</Text>
+                        <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='bold' textAlign="right">{((1-competition_season.payout_allocation)*100).toFixed(2)}%</Text>
+                    </View>
+                    <View style={{ flexDirection:'row', marginTop:10 }}>
+                        <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='regular'>Current Season Pot</Text>
+                        <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='bold' textAlign="right">{cl}{competition_season.payout_amt.toFixed(2)}</Text>
+                    </View>
+                </View>
+                :active_view == 'competitions' ?
+                <View nativeID="season_competitions" style={{ padding:10 }}>
+                    <FlatList
+                        data={competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
+                        renderItem={renderCompetitions}
+                        keyExtractor={(item) => item.competition_id.toString()}
+                    />
+                </View>
+                :active_view == 'leaderboard' ?
+                <View nativeID="season_leaderboard" style={{ padding:10, backgroundColor:Colors.shades.shade100 }}>
+                    <FlatList
+                        data={leaders.sort((a,b) => b.wins - a.wins)}
+                        renderItem={renderLeaders}
+                        keyExtractor={(item) => item.player_id.toString()}
+                    />
+                </View>
+                :<></>}    
+            </ScrollView>
+            <View nativeID="action_row" style={{ padding:10 }}>
+                <Button
+                    borderColor={Colors.brand.electric}
+                    title="Close"
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderRadius={22}
+                    onPress={() => onClose()}
+                />
+            </View>
+        </View>
+    )
+}
+export default SeasonInfoModal

package/src/Competition/components/TeamEventCard.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { ActivityIndicator, FlatList, Image, View } from "react-native"
+import type { CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionProps, CompetitionTypeProps, EventProps, MarketProps, PlayerPickProps } from "../../types"
+
+import MarketsCard from './MarketsCard';
+import { Text } from '../../Components';
+import Colors from '../../constants/colors';
+import moment from 'moment-mini';
+import { CompetitionHelpers, FINALIZED_STATUSES } from '../api';
+
+type TeamEventCardProps = {
+    competition:CompetitionProps,
+    competition_type:CompetitionTypeProps,
+    markets:MarketProps[],
+    event:EventProps,
+    onPick:(pp:PlayerPickProps, event_title:string, event_start:string) => void
+    mode: 'view'|'play'
+    loading?:boolean,
+    player_picks:PlayerPickProps[],
+    competition_match:CompetitionMatchProps,
+    competition_match_markets:CompetitionMatchMarketProps[]
+}
+
+const TeamEventCard = ({ loading, event, markets, competition_type, competition_match, competition_match_markets, player_picks, mode, onPick }:TeamEventCardProps) => {
+
+    const wager_picks = player_picks.filter(pp => pp.stake > 0)
+
+    const handleMarketSelect = async(mm:CompetitionMatchMarketProps, player_pick?:PlayerPickProps) => {
+        let market = markets.find(m => m.market_id == mm.market_id)
+        if(!event || !competition_type || !market){ return alert('Unable to process') }
+        if(moment(event.scheduled_datetime).isBefore(moment())){ return alert('This event has already started') }
+        if(FINALIZED_STATUSES.includes(event.status)){ return alert('This event is not eligible for picks') }
+        if(player_pick){
+            return onPick(player_pick, event.event_title, event.scheduled_datetime)
+            //await CompetitionStoreActions.removePlayerPick(player_pick.player_pick_id)
+        } else {
+            let pp = CompetitionHelpers.createPickFromMatchMarket(competition_match.competition_id, mm)
+            let pick_title = CompetitionHelpers.getPickTitleForTeamEvent(pp, market, event)
+            return onPick({ ...pp, pick_title }, event.event_title, event.scheduled_datetime)
+        }
+    }
+
+
+    const renderWagerPicks = (data: { item:PlayerPickProps, index:number }) => {
+        let locked = mode == 'view' && moment().isBefore(moment(event.scheduled_datetime)) ? true : false
+        return (
+            <View style={{ flexDirection:'row', marginTop:5 }}>
+                <Text style={{ flex:1 }} size={12} color={Colors.highlights.highlight200}>{locked?'WAGER LOCKED':data.item.pick_title}</Text>
+                <Text style={{ flex:1 }} size={12} color={Colors.highlights.highlight200} textAlign="right">{locked?'':`${data.item.stake.toFixed(2)} to win ${data.item.potential_winnings.toFixed(2)}`}</Text>
+            </View>
+        )
+    }
+
+    if(!event){ return <></> }
+    return (
+        <View style={{ padding:5 }}>
+            <View style={{ flexDirection:'row' }}>
+                <View nativeID="event_details" style={{ flex:1 }}>
+                    <View />
+                    <View nativeID="away_team" style={{ flex:1, flexDirection:'row', alignItems:'center', paddingRight:5 }}>
+                        <View style={{ flex:1, marginRight:5 }}> 
+                            <View style={{ flexDirection:'row', alignItems:'flex-start' }}>
+                                {event?.away?.rank ?
+                                <Text style={{ marginRight:4 }} size={12} color={Colors.brand.cyan} weight='bold'>{event.away.rank}</Text>
+                                :<></>}
+                                {event?.away?.image?.url?
+                                <Image
+                                    source={{ uri: event.away.image.url }}
+                                    style={{ height:18, width:18, marginRight:5 }}
+                                    resizeMode="cover"
+                                />
+                                :<></>}
+                                <Text size={12} color={Colors.shades.black} weight='semibold'>{event.away?.market_name} {event.away?.name}</Text>
+                            </View>                            
+                            {event?.away_sub_title ?
+                            <Text size={12} color={Colors.shades.black} weight='regular'>{event?.away_sub_title}</Text>
+                            :<></>}
+                        </View>
+                        <Text size={12} color={Colors.shades.black} weight='bold'>{event.away_team_score}</Text>
+                    </View>
+                    <View nativeID="home_team" style={{ flex:1, flexDirection:'row', alignItems:'center', paddingRight:5 }}>
+                        <View style={{ flex:1, marginRight:5 }}> 
+                            <View style={{ flexDirection:'row', alignItems:'flex-start' }}>
+                                {event?.home?.rank ?
+                                <Text style={{ marginRight:4 }} size={12} color={Colors.brand.cyan} weight='bold'>{event.home.rank}</Text>
+                                :<></>}
+                                {event?.home?.image?.url?
+                                <Image
+                                    source={{ uri: event.home.image.url }}
+                                    style={{ height:18, width:18, marginRight:5 }}
+                                    resizeMode="cover"
+                                />
+                                :<></>}
+                                <Text size={12} color={Colors.shades.black} weight='semibold'>{event.home?.market_name} {event.home?.name}</Text>
+                            </View>                            
+                            {event?.home_sub_title ?
+                            <Text size={12} color={Colors.shades.black} weight='regular'>{event?.home_sub_title}</Text>
+                            :<></>}
+                        </View>
+                        <Text size={12} color={Colors.shades.black} weight='bold'>{event.home_team_score}</Text>
+                    </View>
+                </View>
+                <View nativeID="market_details" style={{ flex:1 }}>
+                    <MarketsCard
+                        player_picks={player_picks}
+                        markets={markets}
+                        mode={mode}
+                        disabled={moment().isAfter(moment(event.scheduled_datetime)) || FINALIZED_STATUSES.includes(event.status) ? true : false}
+                        locked={mode == 'view' && moment().isBefore(moment(event.scheduled_datetime)) ? true : false}
+                        competition_match_markets={competition_match_markets}
+                        onMarketSelect={(mm, player_pick) => handleMarketSelect(mm, player_pick)}
+                    />
+                    {loading ?
+                    <View style={{ position:'absolute', top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                        <ActivityIndicator
+                            size='large'
+                            color={Colors.brand.midnight}
+                        />
+                    </View>
+                    :<></>}
+                </View>
+            </View>
+            {wager_picks.length > 0 ?
+            <View nativeID="wager_picks">
+                <FlatList
+                    data={wager_picks}
+                    renderItem={renderWagerPicks}
+                    keyExtractor={(item) => item.player_pick_id.toString()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default TeamEventCard