be-components 5.8.0 → 5.8.2

package/lib/module/Campaign/index.js

@@ -4,46 +4,65 @@ import { Button, Text, View } from '../Components/Themed';
 import { CampaignApi, CampaignHelpers } from '../Campaign/api';
 import { MarketComponentApi } from '../MarketComponents/api';
 import { useColors } from '../constants/useColors';
-import 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';
 const HEADER_HEIGHT = 75;
+const sections = ['header', 'participants', 'toggle', 'desktop_data', 'mobile_ticker', 'mobile_player', 'mobile_leaderboard', 'engagements'];
 const Campaign = ({
+  player_id,
   campaign_id,
   insets,
   color_mode,
-  auto,
   distinct_id,
-  my_participant,
-  action_loading,
-  onCheckIn,
+  onSelectCompetition,
+  onSelectPollCampaign,
+  onCreateOrder,
+  onViewProfile,
+  onCheckedIn,
+  onCheckedOut,
   onBetNow
 }) => {
   const Colors = useColors();
+  const [needs_reload, setNeedsReload] = useState(false);
+  const [new_player_alert, setNewPlayerAlert] = useState(undefined);
   const [new_bet_alert, setNewBetAlert] = useState(undefined);
   //const [ refresh, setRefresh ] = useState(0);
-  const [cta_type, setCTAType] = useState('participant');
-  const [selected_ad, setSelectedAd] = useState(undefined);
   const {
-    width,
-    height
+    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([]);
   const [selected_participant, setSelectedParticipant] = useState(undefined);
   const [new_event, setNewEvent] = useState(undefined);
+  const [new_tournaments, setNewTournaments] = useState(undefined);
   const [analytics, setAnalytics] = useState([]);
+  const [my_details, setMyDetails] = useState({
+    my_loading: false
+  });
+  const {
+    my_loading,
+    my_participant
+  } = my_details;
   const [embed_state, setEmbedState] = useState({
     loading: false,
     campaign_participants: [],
     events: [],
+    leagues: [],
+    tournaments: [],
+    poll_campaigns: [],
+    competitions: [],
+    matches: [],
     athletes: [],
     participant_page: 0,
     markets: [],
@@ -55,22 +74,85 @@ const Campaign = ({
   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 => {
+    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 => {
+    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 = [];
+    let plsers = [];
+    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;
@@ -81,6 +163,16 @@ const Campaign = ({
     });
     setNewEvent(undefined);
   }, [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 => {
     CampaignApi.setEnvironment();
     MarketComponentApi.setEnvironment();
@@ -105,12 +197,21 @@ const Campaign = ({
     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 = [];
+    let pcs = [];
+    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,6 +224,9 @@ const Campaign = ({
         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);
         }
@@ -132,14 +236,20 @@ const Campaign = ({
       }
     }
     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,
       players: pls,
       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,
@@ -148,235 +258,424 @@ const Campaign = ({
       loading: false
     });
   };
+  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 /*#__PURE__*/React.createElement(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]);
+              }
+              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 => {
+    switch (data.item.type) {
+      case 'competition':
+        let comp = competitions.find(c => c.competition_id == data.item.id);
+        if (!comp) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(Button, {
+          disabled: !onSelectCompetition,
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            borderBottomWidth: 1,
+            borderColor: Colors.borders.light
+          },
+          onPress: () => onSelectCompetition ? onSelectCompetition(comp) : console.log('')
+        }, /*#__PURE__*/React.createElement(Image, {
+          source: {
+            uri: comp.image?.url
+          },
+          style: {
+            height: 40,
+            width: 40,
+            borderRadius: 4
+          },
+          resizeMode: "cover"
+        }), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            marginLeft: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, comp.competition_name), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, comp.competition_description)), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+          direction: "right",
+          size: 12,
+          color: Colors.text.action
+        }));
+      case 'poll_campaign':
+        let pc = poll_campaigns.find(c => c.poll_campaign_id == data.item.id);
+        if (!pc) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(Button, {
+          disabled: !onSelectPollCampaign,
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            borderBottomWidth: 1,
+            borderColor: Colors.borders.light
+          },
+          onPress: () => onSelectPollCampaign ? onSelectPollCampaign(pc) : console.log('')
+        }, /*#__PURE__*/React.createElement(Image, {
+          source: {
+            uri: pc.campaign_image?.url
+          },
+          style: {
+            height: 40,
+            width: 40,
+            borderRadius: 4
+          },
+          resizeMode: "cover"
+        }), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            marginLeft: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, pc.name), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 3
+          }
+        }, pc.total_responders, " Players")), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+          direction: "right",
+          size: 12,
+          color: Colors.text.action
+        }));
+      default:
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+  };
   const renderSections = data => {
     switch (data.item) {
-      case 'ticker':
-        if (!ticker_visible) {
+      case 'header':
+        if (!campaign) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            height: HEADER_HEIGHT,
+            padding: 10,
+            paddingLeft: 20,
+            paddingRight: 20,
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderBottomWidth: 1,
+            borderColor: Colors.borders.light
+          }
+        }, /*#__PURE__*/React.createElement(Image, {
+          source: {
+            uri: campaign.campaign_image?.url
+          },
+          style: {
+            height: 55,
+            width: 55
+          },
+          resizeMode: "cover"
+        }), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            marginLeft: 20
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1",
+          size: 18
+        }, campaign.campaign_name), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          style: {
+            marginTop: 4
+          }
+        }, campaign.description)), view_mode == 'desktop' ? /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            marginRight: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1",
+          textAlign: "center"
+        }, "CHECK IN"), /*#__PURE__*/React.createElement(Text, {
+          theme: "h1",
+          textAlign: "center"
+        }, "HERE")), /*#__PURE__*/React.createElement(QRCode, {
+          value: `https://play.bettoredge.com/social/campaign/${campaign_id}`,
+          size: 65
+        })) : /*#__PURE__*/React.createElement(React.Fragment, null));
+      case 'participants':
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            borderBottomWidth: 3,
+            borderColor: Colors.borders.light
+          }
+        }, /*#__PURE__*/React.createElement(ParticipantsList, {
+          campaign_participants: campaign_participants,
+          players: players,
+          horizontal: true,
+          selected_participant: selected_participant?.campaign_participant_id,
+          onSelect: cp => setSelectedParticipant(cp),
+          onDeselect: () => setSelectedParticipant(undefined)
+        }));
+      case 'mobile_ticker':
+        if (view_mode != 'mobile') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        if (active_toggle != 'odds') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        if (selected_participant) {
           return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
         if (!campaign) {
           return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
-        return /*#__PURE__*/React.createElement(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;
-              }
-              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 /*#__PURE__*/React.createElement(View, null, renderTicker());
+      case 'toggle':
+        if (view_mode != 'mobile') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        if (selected_participant) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 10
           }
+        }, /*#__PURE__*/React.createElement(Toggle, {
+          selected_option: active_toggle,
+          onSelectOption: toggle => setActiveToggle(toggle),
+          options: [{
+            key: 'odds',
+            label: 'Live Odds'
+          }, {
+            key: 'leaderboard',
+            label: 'Leaderboard'
+          }, {
+            key: 'engagements',
+            label: 'Games'
+          }]
+        }));
+      case 'mobile_leaderboard':
+        if (view_mode != 'mobile') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        if (active_toggle != 'leaderboard') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(CampaignAnalytics, {
+          campaign_id: campaign_id,
+          players: players,
+          campaign_participants: campaign_participants
         });
-      case 'participant':
-        if (participants_location == 'left') {
+      case 'engagements':
+        if (view_mode != 'mobile') {
           return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
-        if (!selected_participant) {
+        if (active_toggle != 'engagements') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        const sorted_engagements = CampaignHelpers.sortEngagements(competitions, poll_campaigns);
+        return /*#__PURE__*/React.createElement(FlatList, {
+          data: sorted_engagements,
+          renderItem: renderEngagements,
+          keyExtractor: item => item.id.toString(),
+          key: 'engagement_list_campaign'
+        });
+      case 'mobile_player':
+        if (view_mode != 'mobile') {
           return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
-        const player = players.find(p => p.player_id == selected_participant.player_id);
-        if (!player) {
+        let mobile_selected_player = players.find(p => p.player_id == selected_participant?.player_id);
+        if (!selected_participant || !mobile_selected_player) {
           return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
-        return /*#__PURE__*/React.createElement(ParticipantCard, {
+        return /*#__PURE__*/React.createElement(View, {
+          type: "header"
+        }, /*#__PURE__*/React.createElement(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
-        });
+          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: []
+        }));
+      case 'desktop_data':
+        if (view_mode != 'desktop') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        if (!campaign) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        let selected_player = players.find(p => p.player_id == selected_participant?.player_id);
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            flexDirection: 'row'
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          nativeID: "recent_action",
+          style: {
+            width: 350,
+            borderRightWidth: 3,
+            borderColor: Colors.borders.light
+          }
+        }, selected_participant && selected_player ? /*#__PURE__*/React.createElement(View, {
+          type: "header"
+        }, /*#__PURE__*/React.createElement(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: []
+        })) : /*#__PURE__*/React.createElement(ActionList, {
+          orders: orders,
+          events: events,
+          tournaments: tournaments,
+          matches: [],
+          players: players
+        })), /*#__PURE__*/React.createElement(View, {
+          nativeID: "ticker",
+          style: {
+            flex: 1,
+            borderRightWidth: 3,
+            borderColor: Colors.borders.light
+          }
+        }, renderTicker()), /*#__PURE__*/React.createElement(View, {
+          nativeID: "leaderboard",
+          style: {
+            width: 350,
+            borderLeftWidth: 1,
+            borderColor: Colors.borders.light
+          }
+        }, /*#__PURE__*/React.createElement(CampaignAnalytics, {
+          campaign_id: campaign_id,
+          players: players,
+          campaign_participants: campaign_participants
+        })));
       default:
         return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
   };
-
-  /*
-  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>
-                  </View>
-                  {team ?
-                  <Image
-                      source={{ uri: team.image?.url }}
-                      style={{ height:35, width:35, borderRadius:100 }}
-                      resizeMode='cover'
-                  />
-                  :<></>}
-              </View>
-          </View>
-      )
-  }
-      */
-
+  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 /*#__PURE__*/React.createElement(View, {
     style: {
       flex: 1
     }
-  }, campaign ? /*#__PURE__*/React.createElement(View, {
-    type: "header",
-    style: {
-      height: HEADER_HEIGHT,
-      padding: 10,
-      paddingLeft: 20,
-      paddingRight: 20,
-      flexDirection: 'row',
-      alignItems: 'center',
-      borderBottomWidth: 1,
-      borderColor: Colors.borders.light
-    }
-  }, /*#__PURE__*/React.createElement(Image, {
-    source: {
-      uri: campaign.campaign_image?.url
-    },
-    style: {
-      height: 55,
-      width: 55
-    },
-    resizeMode: "cover"
-  }), /*#__PURE__*/React.createElement(View, {
-    transparent: true,
-    style: {
-      flex: 1,
-      marginLeft: 20
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "h1",
-    size: 18
-  }, campaign.campaign_name), /*#__PURE__*/React.createElement(Text, {
-    theme: "description",
+  }, /*#__PURE__*/React.createElement(View, {
     style: {
-      marginTop: 4
-    }
-  }, campaign.description)), /*#__PURE__*/React.createElement(View, {
-    transparent: true,
-    style: {
-      width: 250
-    }
-  }, /*#__PURE__*/React.createElement(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);
-    }
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(CampaignAnalytics, {
-    campaign_id: campaign_id
-  }), participants_location == 'top' ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      borderRightWidth: 1,
-      borderColor: Colors.borders.light
-    }
-  }, /*#__PURE__*/React.createElement(ParticipantsList, {
-    campaign_participants: campaign_participants,
-    players: players,
-    selected_participant: selected_participant?.campaign_participant_id,
-    horizontal: true,
-    onDeselect: () => setSelectedParticipant(undefined),
-    onSelect: cp => setSelectedParticipant(cp)
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      flexDirection: 'row'
-    }
-  }, participants_location == 'left' ? /*#__PURE__*/React.createElement(View, {
-    transparent: true,
-    style: {
-      width: 400
-    }
-  }, /*#__PURE__*/React.createElement(ParticipantsList, {
-    campaign_participants: campaign_participants,
-    players: players,
-    selected_participant: selected_participant?.campaign_participant_id,
-    onSelect: cp => setSelectedParticipant(cp),
-    onDeselect: () => setSelectedParticipant(undefined)
-  }), /*#__PURE__*/React.createElement(View, {
-    type: "header",
-    style: {
-      padding: 20,
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "h1",
-    style: {
-      marginBottom: 20
-    }
-  }, "SCAN TO CHECK IN NOW"), /*#__PURE__*/React.createElement(QRCode, {
-    size: 250,
-    value: `https://play.bettoredge.com/social/campaign/${campaign_id}`
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      height: height - HEADER_HEIGHT
+      flex: 1
     }
   }, /*#__PURE__*/React.createElement(FlatList, {
-    data: ['ticker', 'participant'],
-    key: 'list_items',
-    showsVerticalScrollIndicator: false,
-    keyExtractor: item => item,
-    renderItem: renderSections
-  })), campaign && participants_location == 'left' ? /*#__PURE__*/React.createElement(View, {
-    type: "header",
-    style: {
-      width: 400,
-      height: height - HEADER_HEIGHT
-    }
-  }, cta_type == 'participant' && selected_player && selected_participant ? /*#__PURE__*/React.createElement(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 ? /*#__PURE__*/React.createElement(View, {
-    transparent: true
-  }, /*#__PURE__*/React.createElement(Image, {
-    source: {
-      uri: selected_ad.url
-    },
-    style: {
-      width: (height - HEADER_HEIGHT) * 0.2857,
-      height: height - HEADER_HEIGHT,
-      alignSelf: 'center'
-    },
-    resizeMode: "contain"
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null)) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(View, {
+    data: sections,
+    renderItem: renderSections,
+    key: 'campaign_sections',
+    keyExtractor: item => item
+  })), view_mode == 'mobile' ? /*#__PURE__*/React.createElement(View, {
     type: "footer",
     style: {
       flexDirection: 'row',
@@ -393,24 +692,27 @@ const Campaign = ({
     title: 'Bet Now!',
     onPress: () => onBetNow()
   }) : /*#__PURE__*/React.createElement(React.Fragment, null), my_participant?.status == 'active' ? /*#__PURE__*/React.createElement(Button, {
-    type: "success",
+    type: "error",
     style: {
       flex: 2,
-      opacity: 0.5,
+      opacity: my_loading ? 0.5 : 1,
       alignItems: 'center'
     },
-    title: 'Checked In!',
-    disabled: true
-  }) : onCheckIn ? /*#__PURE__*/React.createElement(Button, {
+    title: 'Check Out',
+    loading: my_loading,
+    disabled: my_loading,
+    onPress: () => handleCheckOut()
+  }) : /*#__PURE__*/React.createElement(Button, {
     type: "success",
     style: {
-      flex: 2
+      flex: 2,
+      opacity: my_loading ? 0.5 : 1
     },
-    loading: action_loading,
-    disabled: action_loading,
+    loading: my_loading,
+    disabled: my_loading,
     title: "Check In Now",
-    onPress: () => onCheckIn()
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null)), new_bet_alert ? /*#__PURE__*/React.createElement(View, {
+    onPress: () => handleCheckIn()
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null), new_bet_alert ? /*#__PURE__*/React.createElement(View, {
     type: "blur",
     style: {
       position: 'absolute',
@@ -424,11 +726,51 @@ const Campaign = ({
   }, /*#__PURE__*/React.createElement(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,
     onClose: () => setNewBetAlert(undefined)
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null));
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null), new_player_alert && new_player ? /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      alignItems: 'center',
+      paddingTop: 100
+    }
+  }, /*#__PURE__*/React.createElement(NewPlayerAlert, {
+    campaign_participant: new_player_alert,
+    player: new_player,
+    view_mode: view_mode,
+    onViewProfile: onViewProfile,
+    onClose: () => setNewPlayerAlert(undefined)
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(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 => cp.campaign_id == campaign_id);
+          if (this_participants.length == 0) {
+            return;
+          }
+          return setSocketParticipants(event.campaign_participants);
+        default:
+          return;
+      }
+    }
+  }));
 };
 export default Campaign;
 //# sourceMappingURL=index.js.map