be-components 5.8.1 → 5.8.3

package/src/Campaign/index.tsx

@@ -1,52 +1,66 @@
 import React, { useEffect, useState } from 'react';
 import { FlatList, Image, useWindowDimensions } from "react-native"
 import { Button, Text, View } from '../Components/Themed';
-import type { AthleteProps, CampaignParticipantProps, CampaignProps, EventProps, MarketProps, OrderAnalyticsProps, OrderProps, PublicPlayerProps, TeamProps } from '../types';
+import type { AthleteProps, CampaignParticipantProps, CampaignProps, CompetitionProps, EventProps, LeagueProps, MarketProps, MatchProps, OrderAnalyticsProps, OrderProps, PollCampaignProps, PublicPlayerProps, TeamProps, TournamentProps } from '../types';
 import { CampaignApi, CampaignHelpers } from '../Campaign/api';
-
 import { MarketComponentApi } from '../MarketComponents/api';
 import { useColors } from '../constants/useColors';
-import moment from 'moment-mini';
+import { type Moment } from 'moment-mini';
 import QRCode from 'react-qr-code';
 import TickerApp from '../Ticker';
 import BetAlert from './components/BetAlert';
 import ParticipantsList from './components/ParticipantsList';
 import ParticipantCard from './components/ParticipantCard';
 import CampaignAnalytics from './components/CampaignAnalytics';
-import AutoManager from './components/AutoManager';
+import SocketManager from '../Socket';
+import NewPlayerAlert from './components/NewPlayerAlert';
+import ActionList from './components/ActionList';
+import { Icons, Toggle } from '../Components';
 
 type CampaignAppProps = {
     player_id?:string,
     campaign_id:string,
     distinct_id:string,
     color_mode?:'light'|'dark',
+    onCreateOrder?:(order:OrderProps) => void,
     action_loading?:boolean,
+    onSelectPollCampaign:(pc:PollCampaignProps) => void,
+    onSelectCompetition:(comp:CompetitionProps) => void,
     insets?:{ bottom:number, top:number, left:number, right:number },
     onBetNow?:() => void,
     onViewProfile?:(player:PublicPlayerProps) => void,
     onH2HChallenge?:(player:PublicPlayerProps) => void,
-    onCheckIn?:() => void,
-    my_participant?:CampaignParticipantProps
+    onCheckedIn?:(campaign_participant:CampaignParticipantProps) => void,
+    onCheckedOut?:(campaign_participant:CampaignParticipantProps) => void,
     auto?:boolean
 }
 
 const HEADER_HEIGHT = 75
-
-const Campaign = ({ campaign_id, insets, color_mode, auto, distinct_id, my_participant, action_loading, onCheckIn, onBetNow }:CampaignAppProps) => {
+const sections = ['header', 'participants', 'toggle', 'desktop_data', 'mobile_ticker', 'mobile_player', 'mobile_leaderboard', 'engagements']
+const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onSelectCompetition, onSelectPollCampaign, onCreateOrder, onViewProfile, onCheckedIn, onCheckedOut, onBetNow }:CampaignAppProps) => {
     const Colors = useColors();
+    const [ needs_reload, setNeedsReload ] = useState(false);
+    const [ new_player_alert, setNewPlayerAlert ] = useState<CampaignParticipantProps|undefined>(undefined);
     const [ new_bet_alert, setNewBetAlert ] = useState<OrderProps | undefined>(undefined);
     //const [ refresh, setRefresh ] = useState(0);
-    const [ cta_type, setCTAType ] = useState<'ad'|'participant'>('participant');
-    const [ selected_ad, setSelectedAd ] = useState<any>(undefined);
-    const { width, height } = useWindowDimensions();
+    const { width } = useWindowDimensions();
+    const view_mode = width > 710 ? 'desktop' : 'mobile';
+    const [ active_toggle, setActiveToggle ] = useState('odds');
     const time_options = CampaignHelpers.getTimeOptions();
-    const participants_location = width > 1200 ? 'left' : 'top';
     //const ad_location = width > 1200 ? 'right': 'bottom';
-    const ticker_visible = width > 1200 ? true : false
-
+    const [ socket_participants, setSocketParticipants ] = useState<CampaignParticipantProps[]>([]);
     const [ selected_participant, setSelectedParticipant ] = useState<CampaignParticipantProps|undefined>(undefined);
     const [ new_event, setNewEvent ] = useState<EventProps|undefined>(undefined);
+    const [ new_tournaments, setNewTournaments ] = useState<TournamentProps|undefined>(undefined);
     const [ analytics, setAnalytics ] = useState<OrderAnalyticsProps[]>([]);
+    const [ my_details, setMyDetails ] = useState<{
+        my_loading:boolean,
+        my_participant?:CampaignParticipantProps,
+
+    }>({
+        my_loading: false
+    });
+    const { my_loading, my_participant } = my_details;
     const [ embed_state, setEmbedState ] = useState<{
         loading:boolean,
         campaign?:CampaignProps,
@@ -55,7 +69,12 @@ const Campaign = ({ campaign_id, insets, color_mode, auto, distinct_id, my_parti
         campaign_participants:CampaignParticipantProps[],
         teams:TeamProps[],
         athletes:AthleteProps[],
+        leagues:LeagueProps[],
+        tournaments:TournamentProps[],
+        matches:MatchProps[],
         markets:MarketProps[],
+        poll_campaigns:PollCampaignProps[],
+        competitions:CompetitionProps[],
         orders:OrderProps[],
         events:EventProps[],
         players:PublicPlayerProps[]
@@ -63,6 +82,11 @@ const Campaign = ({ campaign_id, insets, color_mode, auto, distinct_id, my_parti
         loading:false,
         campaign_participants:[],
         events:[],
+        leagues:[],
+        tournaments:[],
+        poll_campaigns: [],
+        competitions: [],
+        matches:[],
         athletes:[],
         participant_page: 0,
         markets:[],
@@ -71,14 +95,61 @@ const Campaign = ({ campaign_id, insets, color_mode, auto, distinct_id, my_parti
         players:[],
         teams:[]
     });
-    const  { orders, events, athletes, campaign, participant_page, action_page, campaign_participants, players, teams, } = embed_state;
+    const  { orders, events, tournaments, athletes, competitions, poll_campaigns, campaign, participant_page, action_page, leagues, campaign_participants, players, teams, } = embed_state;
     //const visible_orders = orders.sort((a,b) => moment(b.create_datetime).unix() - moment(a.create_datetime).unix()).slice((action_page-1) * 5, ((action_page-1) * 5) + 5)
-
     useEffect(() => {
         if(!campaign_id){ return }
         startUp(campaign_id);
     },[campaign_id]);
 
+    useEffect(() => {
+        if(!player_id || !campaign_id){ return }
+        getMyData(campaign_id);
+    },[campaign_id, player_id])
+
+    const getMyData = async(id:string) => {
+        const resp = await CampaignApi.getMyCampaignParticipants();
+        //find this campaign
+        const this_cp = resp.campaign_participants.find(cp => cp.campaign_id == id);
+        setMyDetails({
+            ...my_details,
+            my_loading:false,
+            my_participant: this_cp
+        });
+        if(this_cp?.status == 'active' && onCheckedIn){ onCheckedIn(this_cp) }
+
+    }
+
+    useEffect(() => {
+        if(socket_participants.length == 0){ return }
+        handleNewParticipants(socket_participants);
+    }, [JSON.stringify(socket_participants)]);
+
+    const handleNewParticipants = async(cps:CampaignParticipantProps[]) => {
+        if(cps.length == 0){ return }
+        let mine = cps.find(cp => cp.player_id == player_id);
+        if(mine){
+            setMyDetails({ ...my_details, my_participant:mine })
+        }
+        //Do we have this player
+        let needed_player_ids:string[] = []
+        let plsers:PublicPlayerProps[] = []
+        cps.map(cp => {
+            let found = players.find(p => p.player_id == cp.player_id);
+            if(!found){ needed_player_ids.push(cp.player_id) }
+            else { plsers.push(found) }
+        });
+        plsers = plsers.concat(await CampaignApi.getPlayersByPlayerIds(needed_player_ids));
+        //Set new bettor!!
+        let new_player = cps.filter(cp => cp.status == 'active')[0]
+        if(new_player && new_player.player_id != player_id){ setNewPlayerAlert(new_player) }
+        //Ok! Now lets update the participants
+        setEmbedState({
+            ...embed_state,
+            players: players.filter(p => !plsers.find(np => np.player_id == p.player_id)).concat(plsers),
+            campaign_participants: campaign_participants.filter(cp => !cps.find(ncp => ncp.campaign_participant_id == cp.campaign_participant_id)).concat(cps)
+        })
+    }
 
     useEffect(() => {
         if(!new_event){ return }
@@ -87,7 +158,16 @@ const Campaign = ({ campaign_id, insets, color_mode, auto, distinct_id, my_parti
             events: events.filter(e => e.event_id != new_event.event_id).concat(new_event)
         })
         setNewEvent(undefined);
-    },[new_event])
+    },[new_event]);
+
+    useEffect(() => {
+        if(!new_tournaments){ return }
+        setEmbedState({
+            ...embed_state,
+            tournaments: tournaments.filter(e => e.tournament_id != new_tournaments.tournament_id).concat(new_tournaments)
+        })
+        setNewEvent(undefined);
+    },[new_tournaments]);
 
     const startUp = async(campaign_id:string) => {
         CampaignApi.setEnvironment();
@@ -110,10 +190,15 @@ const Campaign = ({ campaign_id, insets, color_mode, auto, distinct_id, my_parti
         const ords = await CampaignApi.getCampaignAction(campaign_id);
         let vis_ords = [ ...ords ]
         let ev_ids = ords.filter(o => o.event_type == 'team').map(o => o.event_id);
+        let tn_ids = ords.filter(o => o.event_type == 'tournament').map(o => o.event_id);
         const action_pages = Math.ceil(vis_ords.length / 5);
         const participant_pages = Math.ceil(c_resp.campaign_participants.length / 5);
         let next_participant_page = participant_page + 1
         if(next_participant_page > participant_pages){ next_participant_page = 1 }
+        let comps:CompetitionProps[] = []
+        let pcs: PollCampaignProps[] = []
+        if(c_resp.campaign && c_resp.campaign.poll_campaign_ids){ pcs = await CampaignApi.getPollCampaignsByIds(c_resp.campaign.poll_campaign_ids) }
+        if(c_resp.campaign && c_resp.campaign.competition_ids){ comps = await CampaignApi.getCompetitionsByIds(c_resp.campaign.competition_ids) }
 
         let next_action_page = action_page + 1
         if(next_action_page > action_pages){ next_action_page = 1 }
@@ -123,14 +208,17 @@ const Campaign = ({ campaign_id, insets, color_mode, auto, distinct_id, my_parti
             if(new_bet){
                 setNewBetAlert(new_bet);
                 if(new_bet.event_type == 'team'){ ev_ids.push(new_bet.event_id) }
+                if(new_bet.event_type == 'tournament'){ tn_ids.push(new_bet.event_id) }
                 if(new_bet.side_type == 'team'){ tm_ids.push(new_bet.side_id) }
                 if(new_bet.side_type == 'athlete'){ aths_ids.push(new_bet.side_id) }
             }
         }
         
         const evs = await MarketComponentApi.getEventsByEventIds(ords.filter(o => o.event_type == 'team').map(o => o.event_id));
+        const tns = await MarketComponentApi.getTournamentsByTournamentIds(tn_ids);
         const tms = await MarketComponentApi.getTeamsByIds(tm_ids);
         const aths = await MarketComponentApi.getAthletesByIds(aths_ids);
+        const lgs = await MarketComponentApi.getLeagues();
 
         setEmbedState({
             ...embed_state,
@@ -138,6 +226,10 @@ const Campaign = ({ campaign_id, insets, color_mode, auto, distinct_id, my_parti
             campaign: c_resp.campaign,
             campaign_participants: c_resp.campaign_participants,
             teams: tms,
+            leagues: lgs,
+            competitions:comps,
+            poll_campaigns: pcs,
+            tournaments: tns,
             athletes: aths,
             participant_page: next_participant_page,
             action_page: next_action_page,
@@ -145,193 +237,301 @@ const Campaign = ({ campaign_id, insets, color_mode, auto, distinct_id, my_parti
             orders: vis_ords,
             loading:false
         })
-        
     }
 
-    const renderSections = (data:{ item:string, index:number }) => {
-        switch(data.item){
-            case 'ticker':
-                if(!ticker_visible){ return <></> }
-                if(!campaign){ return <></> }
-                return (
-                    <TickerApp
-                        league_ids={campaign?.league_ids ?? []}
-                        distinct_id={distinct_id}
-                        color_mode={color_mode}
-                        onOrders={async(orders) => {
-                            //find if the orders are new!
-                            let new_bet = orders.find(o => o.campaign_id && moment().diff(moment(o.create_datetime), 'milliseconds') < 5000);
-                            if(new_bet){ 
-                                let og_bet = await MarketComponentApi.getOrderById(new_bet.order_id);
-                                if(!og_bet){ return }
+    const handleCheckIn = async() => {
+        setMyDetails({ ...my_details, my_loading: true })
+        const new_cp = await CampaignApi.joinCampaign(campaign_id);
+        setMyDetails({ 
+            ...my_details, 
+            my_participant: new_cp,
+            my_loading: false 
+        });
+        if(new_cp && onCheckedIn){ onCheckedIn(new_cp) }
+    }
+
+    const handleCheckOut = async() => {
+        if(!my_participant){ return }
+        setMyDetails({ ...my_details, my_loading: true })
+        const new_cp = await CampaignApi.leaveCampaign(my_participant.campaign_participant_id);
+        setMyDetails({ 
+            ...my_details, 
+            my_loading: false,
+            my_participant: new_cp
+        });
+        if(new_cp && onCheckedOut){ onCheckedOut(new_cp) }
+    }
+
+
+    const renderTicker = () => {
+        return (
+            <TickerApp
+                league_ids={campaign?.league_ids ?? []}
+                distinct_id={distinct_id}
+                onCreateOrder={onCreateOrder}
+                color_mode={color_mode}
+                onOrders={async(orders) => {
+                    //find if the orders are new!
+                    let new_bet = orders.find(o => o.campaign_id );
+                    if(new_bet){ 
+                        let og_bet = await MarketComponentApi.getOrderById(new_bet.order_id);
+                        if(!og_bet){ return }
+                        //Find the event
+                        switch(og_bet.event_type){
+                            case 'team':
                                 let ev = events.find(e => e.event_id == og_bet.event_id);
                                 if(!ev){
                                     let evs = await MarketComponentApi.getEventsByEventIds([new_bet.event_id]);
                                     setNewEvent(evs[0])
                                 }
-                                setNewBetAlert(og_bet) 
-                            }
-                        }}
-                    />
+                                return setNewBetAlert(og_bet) 
+                            case 'tournament':
+                                let tn = tournaments.find(tn => tn.tournament_id == og_bet.event_id);
+                                let ath = athletes.find(a => a.athlete_id == og_bet.side_id);
+                                let tm = teams.find(t => t.team_id == og_bet.side_id);
+                                if(!tn){
+                                    let evs = await MarketComponentApi.getTournamentsByTournamentIds([new_bet.event_id]);
+                                    setNewTournaments(evs[0])
+                                }
+                                if(og_bet.side_type == 'athlete' && !ath){
+                                    let athls = await MarketComponentApi.getAthletesByIds([new_bet.side_id]);
+                                    setEmbedState({ ...embed_state, athletes: athletes.concat(athls) })
+                                }
+                                if(og_bet.side_type == 'team' && !tm){
+                                    let tms = await MarketComponentApi.getTeamsByIds([new_bet.side_id]);
+                                    setEmbedState({ ...embed_state, teams: teams.concat(tms) })
+                                }
+                                return setNewBetAlert(og_bet);
+                            default: return
+                        }
+                        
+                    }
+                }}
+            />
+        )
+    }
+
+    const renderEngagements = (data:{ item:{ id:string, type:string, scheduled_datetime:Moment }, index:number }) => {
+        
+        switch(data.item.type){
+            case 'competition':
+                let comp = competitions.find(c => c.competition_id == data.item.id);
+                if(!comp){ return <></> }
+                return (
+                    <Button 
+                        disabled={!onSelectCompetition}
+                        style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                        onPress={() => onSelectCompetition ? onSelectCompetition(comp) : console.log('')}
+                    >
+                        <Image
+                            source={{ uri:comp.image?.url }}
+                            style={{ height:40, width:40, borderRadius:4 }}
+                            resizeMode='cover'
+                        />
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text theme='h1'>{comp.competition_name}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>{comp.competition_description}</Text>
+                        </View>
+                        <Icons.ChevronIcon direction='right' size={12} color={Colors.text.action} />
+                    </Button>
                 )
-            case 'participant':
-                if(participants_location == 'left'){ return <></> }
-                if(!selected_participant){ return <></> }
-                const player = players.find(p => p.player_id == selected_participant.player_id)
-                if(!player){ return <></> }
+            case 'poll_campaign':
+                let pc = poll_campaigns.find(c => c.poll_campaign_id == data.item.id);
+                if(!pc){ return <></> }
                 return (
-                    <ParticipantCard
-                        campaign_participant={selected_participant}
-                        player={player}
-                        analytics={analytics.filter(a => a.player_id == player.player_id)}
-                        orders={orders.filter(o => o.player_id == player.player_id)}
-                        events={events}
-                    />
+                    <Button 
+                        disabled={!onSelectPollCampaign}
+                        style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                        onPress={() => onSelectPollCampaign ? onSelectPollCampaign(pc) : console.log('')}
+                        >
+                        <Image
+                            source={{ uri:pc.campaign_image?.url }}
+                            style={{ height:40, width:40, borderRadius:4 }}
+                            resizeMode='cover'
+                        />
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text theme='h1'>{pc.name}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>{pc.total_responders} Players</Text>
+                        </View>
+                        <Icons.ChevronIcon direction='right' size={12} color={Colors.text.action} />
+                    </Button>
                 )
             default: return <></>
         }
     }
 
-    /*
-    const renderParticipants = (data: { item:CampaignParticipantProps, index:number }) => {
-        const player = players.find(p => p.player_id == data.item.player_id);
-        if(!player){ return <></> }
-        const team = teams.find(t => t.team_id == data.item.payload?.team_id);
-        return (
-            <View float style={{ margin:5, padding:5, borderRadius:100}}>
-                <View transparent style={{ flexDirection:'row' }}>
-                    <Image
-                        source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
-                        style={{ height:35, width:35, borderRadius:100 }}
-                        resizeMode='cover'
-                    />
-                    <View transparent style={{ flex:1, marginLeft:10 }}>
-                        <Text theme='h2'>@{player.username}</Text>
-                        <Text theme='description' style={{ marginTop:3 }}>Arrived @ {moment(data.item.create_datetime).format('MMM DD hh:mm a')}</Text>
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                if(!campaign){ return <></> }
+                return (
+                    <View type='header' style={{ height:HEADER_HEIGHT, padding:10, paddingLeft:20, paddingRight:20, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                        <Image
+                            source={{ uri: campaign.campaign_image?.url }}
+                            style={{ height:55, width:55 }}
+                            resizeMode='cover'
+                        />
+                        <View transparent style={{ flex:1, marginLeft:20 }}>
+                            <Text theme='h1' size={18}>{campaign.campaign_name}</Text>
+                            <Text theme='description' style={{ marginTop:4 }}>{campaign.description}</Text>
+                        </View>
+                        {view_mode == 'desktop' ?
+                        <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ marginRight:10 }}>
+                                <Text theme='h1' textAlign='center'>CHECK IN</Text>
+                                <Text theme='h1' textAlign='center'>HERE</Text>
+                            </View>
+                            <QRCode
+                                value={`https://play.bettoredge.com/social/campaign/${campaign_id}`}
+                                size={65}
+                            />
+                        </View>
+                        :<></>}
+                    </View>
+                )
+            case 'participants':
+                return (
+                    <View style={{ borderBottomWidth:3, borderColor:Colors.borders.light }}>
+                        <ParticipantsList
+                            campaign_participants={campaign_participants}
+                            players={players}
+                            horizontal
+                            selected_participant={selected_participant?.campaign_participant_id}
+                            onSelect={(cp) => setSelectedParticipant(cp)}
+                            onDeselect={() => setSelectedParticipant(undefined)}
+                        />
                     </View>
-                    {team ?
-                    <Image
-                        source={{ uri: team.image?.url }}
-                        style={{ height:35, width:35, borderRadius:100 }}
-                        resizeMode='cover'
+                )
+            case 'mobile_ticker':
+                if(view_mode != 'mobile'){ return <></> }
+                if(active_toggle != 'odds'){ return <></> }
+                if(selected_participant){ return <></> }
+                if(!campaign){ return <></> }
+                return (
+                    <View>                        
+                        {renderTicker()}
+                    </View>
+                )
+            case 'toggle':
+                if(view_mode != 'mobile'){ return <></> }
+                if(selected_participant){ return <></> }
+                return (
+                    <View style={{ padding:10 }}>
+                        <Toggle
+                            selected_option={active_toggle}
+                            onSelectOption={(toggle) => setActiveToggle(toggle)}
+                            options={[
+                                { key: 'odds', label: 'Live Odds' },
+                                { key: 'leaderboard', label: 'Leaderboard' },
+                                { key: 'engagements', label: 'Games' }
+                            ]}
+                        />
+                    </View>
+                )
+            case 'mobile_leaderboard':
+                if(view_mode != 'mobile'){ return <></> }
+                if(active_toggle != 'leaderboard'){ return <></> }
+                return (
+                    <CampaignAnalytics
+                        campaign_id={campaign_id}
+                        players={players}
+                        campaign_participants={campaign_participants}
                     />
-                    :<></>}
-                </View>
-            </View>
-        )
-    }
-        */
+                )
+            case 'engagements':
+                if(view_mode != 'mobile'){ return <></> }
+                if(active_toggle != 'engagements'){ return <></> }
+                const sorted_engagements = CampaignHelpers.sortEngagements(competitions, poll_campaigns);
+                return (
+                    <FlatList
+                        data={sorted_engagements}
+                        renderItem={renderEngagements}
+                        keyExtractor={(item) => item.id.toString()}
+                        key={'engagement_list_campaign'}
+                    />
+                )
+            case 'mobile_player':
+                if(view_mode != 'mobile'){ return <></> }
+                let mobile_selected_player = players.find(p => p.player_id == selected_participant?.player_id);
+                if(!selected_participant || !mobile_selected_player){ return <></> }
+                return (
+                    <View type='header'>
+                        <ParticipantCard
+                            campaign_participant={selected_participant}
+                            player={mobile_selected_player}
+                            analytics={analytics.filter(a => a.player_id == selected_participant.player_id)}
+                            orders={orders.filter(o => o.player_id == selected_participant.player_id)}
+                            events={events}
+                            tournaments={tournaments}
+                            matches={[]}
+                        />
+                    </View>
+                )
+            case 'desktop_data':
+                if(view_mode != 'desktop'){ return <></> }
+                if(!campaign){ return <></> }
+                let selected_player = players.find(p => p.player_id == selected_participant?.player_id);
+                return (
+                    <View style={{ flexDirection:'row' }}>
+                        <View nativeID='recent_action' style={{ width:350, borderRightWidth:3, borderColor:Colors.borders.light }}>
+                            {selected_participant && selected_player ?
+                            <View type='header'>
+                                <ParticipantCard
+                                    campaign_participant={selected_participant}
+                                    player={selected_player}
+                                    analytics={analytics.filter(a => a.player_id == selected_participant.player_id)}
+                                    orders={orders.filter(o => o.player_id == selected_participant.player_id)}
+                                    events={events}
+                                    tournaments={tournaments}
+                                    matches={[]}
+                                />
+                            </View>
+                            :
+                            <ActionList
+                                orders={orders}
+                                events={events}
+                                tournaments={tournaments}
+                                matches={[]}
+                                players={players}
+                            />
+                            }
+                        </View>
+                        <View nativeID='ticker' style={{ flex:1, borderRightWidth:3, borderColor:Colors.borders.light }}>
+                            {renderTicker()}
+                        </View>
+                        <View nativeID='leaderboard' style={{ width: 350, borderLeftWidth:1, borderColor:Colors.borders.light }}>
+                            <CampaignAnalytics
+                                campaign_id={campaign_id}
+                                players={players}
+                                campaign_participants={campaign_participants}
+                            />
+                        </View>
+                    </View>
+                )
+
 
+            default: return <></>
+        }
+    }
 
+    const new_player = players.find(p => p.player_id == new_player_alert?.player_id);
     const new_bet_player = players.find(p => p.player_id == new_bet_alert?.player_id);
     const new_bet_team = teams.find(t => t.team_id == new_bet_alert?.side_id);
     const new_bet_athlete = athletes.find(a => a.athlete_id == new_bet_alert?.side_id);
     const new_bet_event = events.find(e => e.event_id == new_bet_alert?.event_id);
-    //const new_bet_market = markets.find(m => m.market_id == new_bet_alert?.market_id);
-
-    const selected_player = players.find(p => p.player_id == selected_participant?.player_id);
-
+    const new_bet_tournament = tournaments.find(t => t.tournament_id == new_bet_alert?.event_id);
+    const new_bet_league = new_bet_event ? leagues.find(l => l.league_id == new_bet_event.league_id) : leagues.find(l => l.league_id == new_bet_tournament?.league_id);
     return (
         <View style={{ flex:1 }}>
-            {campaign ?
-            <View type='header' style={{ height:HEADER_HEIGHT, padding:10, paddingLeft:20, paddingRight:20, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}>
-                <Image
-                    source={{ uri: campaign.campaign_image?.url }}
-                    style={{ height:55, width:55 }}
-                    resizeMode='cover'
-                />
-                <View transparent style={{ flex:1, marginLeft:20 }}>
-                    <Text theme='h1' size={18}>{campaign.campaign_name}</Text>
-                    <Text theme='description' style={{ marginTop:4 }}>{campaign.description}</Text>
-                </View>
-                <View transparent style={{ width:250 }}>
-                    <AutoManager
-                        campaign_participants={campaign_participants}
-                        orders={orders}
-                        campaign={campaign}
-                        active={auto ? true : false}
-                        analytics={analytics}
-                        onChangeAd={(ad) => {
-                            setCTAType('ad');
-                            setSelectedAd(ad);
-                        }}
-                        onChangeParticipant={(cp) => {
-                            setCTAType('participant');
-                            setSelectedParticipant(cp)
-                        }}
-                    />
-                </View>
-            </View>
-            :<></>}
-            
-            <CampaignAnalytics
-                campaign_id={campaign_id}
-            />
-            {participants_location == 'top' ?
-            <View style={{ borderRightWidth:1, borderColor:Colors.borders.light }}>
-                <ParticipantsList
-                    campaign_participants={campaign_participants}
-                    players={players}
-                    selected_participant={selected_participant?.campaign_participant_id}
-                    horizontal
-                    onDeselect={() => setSelectedParticipant(undefined)}
-                    onSelect={(cp) => setSelectedParticipant(cp)}
+            <View style={{ flex:1 }}>
+                <FlatList
+                    data={sections}
+                    renderItem={renderSections}
+                    key={'campaign_sections'}
+                    keyExtractor={item => item}
                 />
             </View>
-            :<></>}
-            <View style={{ flex:1, flexDirection:'row' }}>
-                {participants_location == 'left' ?
-                <View transparent style={{ width:400 }}>
-                    <ParticipantsList
-                        campaign_participants={campaign_participants}
-                        players={players}
-                        selected_participant={selected_participant?.campaign_participant_id}
-                        onSelect={(cp) => setSelectedParticipant(cp)}
-                        onDeselect={() => setSelectedParticipant(undefined)}
-                    />
-                    <View type='header' style={{ padding:20, justifyContent:'center', alignItems:'center' }}>
-                        <Text theme='h1' style={{ marginBottom:20 }}>SCAN TO CHECK IN NOW</Text>
-                        <QRCode
-                            size={250}
-                            value={`https://play.bettoredge.com/social/campaign/${campaign_id}`}
-                            
-                        />
-                    </View>
-                </View>
-                :<></>}
-                <View style={{ flex:1, height:height - HEADER_HEIGHT }}>
-                    <FlatList
-                        data={['ticker','participant']}
-                        key={'list_items'}
-                        showsVerticalScrollIndicator={false}
-                        keyExtractor={item => item}
-                        renderItem={renderSections}
-                    />
-                </View>
-                
-                {campaign && participants_location == 'left' ?
-                <View type='header' style={{ width:400, height:height - HEADER_HEIGHT }}>
-                    {cta_type == 'participant' && selected_player && selected_participant ?
-                    <ParticipantCard
-                        campaign_participant={selected_participant}
-                        player={selected_player}
-                        events={events}
-                        analytics={analytics.filter(a => a.player_id == selected_participant.player_id)}
-                        orders={orders.filter(o => o.player_id == selected_participant.player_id)}
-                    />
-                    :cta_type == 'ad' && selected_ad?.url ?
-                    <View transparent>
-                        <Image
-                            source={{ uri: selected_ad.url }}
-                            style={{ width: (height-HEADER_HEIGHT) * 0.2857, height:height - HEADER_HEIGHT, alignSelf:'center'}}
-                            resizeMode='contain'
-                        />
-                    </View>
-                    :<></>}
-                </View>
-                :<></>}
-            </View>
-            
+            {view_mode == 'mobile' ?
             <View type='footer' style={{ flexDirection:'row', padding:10, paddingBottom:(insets?.bottom ?? 0) + 10}}>
                 {onBetNow ?
                 <Button
@@ -343,27 +543,32 @@ const Campaign = ({ campaign_id, insets, color_mode, auto, distinct_id, my_parti
                 :<></>}
                 {my_participant?.status == 'active' ?
                 <Button
-                    type='success'
-                    style={{ flex:2, opacity:0.5, alignItems:'center' }}
-                    title={'Checked In!'}
-                    disabled
+                    type='error'
+                    style={{ flex:2, opacity:my_loading?0.5:1, alignItems:'center' }}
+                    title={'Check Out'}
+                    loading={my_loading}
+                    disabled={my_loading}
+                    onPress={() => handleCheckOut()}
                 />
-                : onCheckIn ?
+                :
                 <Button
                     type='success'
-                    style={{ flex:2 }}
-                    loading={action_loading}
-                    disabled={action_loading}
+                    style={{ flex:2, opacity: my_loading?0.5:1 }}
+                    loading={my_loading}
+                    disabled={my_loading}
                     title="Check In Now"
-                    onPress={() => onCheckIn()}
+                    onPress={() => handleCheckIn()}
                 />
-                :<></>}
+                }
             </View>
+            :<></>}
             {new_bet_alert ?
             <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, alignItems:'center', paddingTop:100 }}>
                 <BetAlert
                     order={new_bet_alert}
                     event={new_bet_event}
+                    league={new_bet_league}
+                    tournament={new_bet_tournament}
                     player={new_bet_player}
                     team={new_bet_team}
                     athlete={new_bet_athlete}
@@ -371,6 +576,34 @@ const Campaign = ({ campaign_id, insets, color_mode, auto, distinct_id, my_parti
                 />
             </View>
             :<></>}
+            {new_player_alert && new_player ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, alignItems:'center', paddingTop:100 }}>
+                <NewPlayerAlert
+                    campaign_participant={new_player_alert}
+                    player={new_player}
+                    view_mode={view_mode}
+                    onViewProfile={onViewProfile}
+                    onClose={() => setNewPlayerAlert(undefined)}
+                />
+            </View>
+            :<></>}
+            <SocketManager
+                onConnect={() => {
+                    if(!needs_reload){ return }
+                    console.log('GET DATA!!!`')
+                }}
+                onDisconnect={() => setNeedsReload(true)}
+                subscribed_events={['UPDATE_CAMPAIGN_PARTICIPANTS']}
+                onSocketEvent={(event) => {
+                    switch(event.type){
+                        case 'UPDATE_CAMPAIGN_PARTICIPANTS':
+                            let this_participants = event.campaign_participants.filter((cp:CampaignParticipantProps) => cp.campaign_id == campaign_id);
+                            if(this_participants.length == 0){ return }
+                            return setSocketParticipants(event.campaign_participants);
+                        default: return
+                    }
+                }}
+            />
         </View>
     )
 }