be-components 6.3.2 → 6.3.4

package/src/Campaign/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, Image, useWindowDimensions } from "react-native"
+import { ActivityIndicator, FlatList, Image, ImageBackground, useWindowDimensions } from "react-native"
 import { Button, Text, View } from '../Components/Themed';
-import type { AthleteProps, CampaignParticipantProps, CampaignProps, CompetitionProps, EventProps, LeagueProps, MarketProps, MatchProps, OrderAnalyticsProps, OrderProps, PollCampaignProps, PublicPlayerProps, TeamProps, TournamentProps } from '../types';
+import type { AthleteProps, CampaignParticipantProps, CampaignProps, CompanyProps, CompetitionProps, EventProps, LeagueProps, MarketProps, MatchProps, OrderAnalyticsProps, OrderProps, PollCampaignProps, PollOptionProps, PollProps, PublicPlayerProps, TeamProps, TournamentProps } from '../types';
 import { CampaignApi, CampaignHelpers } from '../Campaign/api';
 import { MarketComponentApi } from '../MarketComponents/api';
 import { useColors } from '../constants/useColors';
@@ -15,12 +15,16 @@ import CampaignAnalytics from './components/CampaignAnalytics';
 import SocketManager from '../Socket';
 import NewPlayerAlert from './components/NewPlayerAlert';
 import ActionList from './components/ActionList';
-import { Icons, Toggle } from '../Components';
+import { AutoScrollingFlatList, Icons, Toggle } from '../Components';
+import { PollApi, PollCampaignApi, PollOptionApi } from '../Poll/api';
+import FlashHolder from '../FlashMarket/FlashHolder';
+import GolferAlert from './components/GolferAlert';
 
 type CampaignAppProps = {
     player_id?:string,
     campaign_id:string,
     distinct_id:string,
+    mode?:'golf',
     color_mode?:'light'|'dark',
     onCreateOrder?:(order:OrderProps) => void,
     action_loading?:boolean,
@@ -37,9 +41,11 @@ type CampaignAppProps = {
 
 const HEADER_HEIGHT = 75
 const sections = ['header', 'prize', '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 golf_sections = ['header', 'closest_pin', 'sponsors']
+const Campaign = ({ player_id, campaign_id, insets, color_mode, mode, distinct_id, onSelectCompetition, onSelectPollCampaign, onCreateOrder, onViewProfile, onCheckedIn, onCheckedOut, onBetNow }:CampaignAppProps) => {
     const Colors = useColors();
     const [ needs_reload, setNeedsReload ] = useState(false);
+    const [ golf_leader_size, setGolfLeaderSize ] = useState({ height:0, width:0 })
     const [ new_player_alert, setNewPlayerAlert ] = useState<CampaignParticipantProps|undefined>(undefined);
     const [ new_bet_alert, setNewBetAlert ] = useState<OrderProps | undefined>(undefined);
     //const [ refresh, setRefresh ] = useState(0);
@@ -68,12 +74,15 @@ const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onS
         action_page:number,
         campaign_participants:CampaignParticipantProps[],
         teams:TeamProps[],
+        sponsors:CompanyProps[],
         athletes:AthleteProps[],
         leagues:LeagueProps[],
         tournaments:TournamentProps[],
         matches:MatchProps[],
         markets:MarketProps[],
         poll_campaigns:PollCampaignProps[],
+        flash_markets:PollProps[],
+        flash_options:PollOptionProps[],
         competitions:CompetitionProps[],
         orders:OrderProps[],
         events:EventProps[],
@@ -85,6 +94,9 @@ const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onS
         leagues:[],
         tournaments:[],
         poll_campaigns: [],
+        flash_options: [],
+        flash_markets:[],
+        sponsors: [],
         competitions: [],
         matches:[],
         athletes:[],
@@ -95,7 +107,7 @@ const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onS
         players:[],
         teams:[]
     });
-    const  { orders, events, tournaments, athletes, competitions, poll_campaigns, campaign, participant_page, action_page, leagues, campaign_participants, players, teams, } = embed_state;
+    const  { loading, orders, events, tournaments, flash_options, sponsors, athletes, competitions, flash_markets, 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 }
@@ -142,7 +154,16 @@ const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onS
         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) }
+        if(mode != 'golf' && new_player && new_player.player_id != player_id){ setNewPlayerAlert(new_player) }
+
+        if(mode == 'golf'){
+            //Old player
+            let exist = campaign_participants.find(cp => cp.campaign_participant_id == socket_participants[0]?.campaign_participant_id);
+            if(exist?.payload?.status == 'active' && campaign_participants[0]?.payload.status == 'closed'){
+                setNewPlayerAlert(new_player);
+            }
+        }
+
         //Ok! Now lets update the participants
         setEmbedState({
             ...embed_state,
@@ -197,7 +218,19 @@ const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onS
         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) }
+        let fls: PollProps[] = []
+        let opts: PollOptionProps[] = []
+        if(c_resp.campaign && c_resp.campaign.poll_campaign_ids){ 
+            pcs = await CampaignApi.getPollCampaignsByIds(c_resp.campaign.poll_campaign_ids)
+            let campaign_id = pcs[0]?.poll_campaign_id
+            if(campaign_id){ 
+                PollCampaignApi.setEnvironment();
+                let flash_resp = await PollApi.getPollsByCampaignId(campaign_id); 
+                fls = flash_resp.polls
+                let poll_ids = [ ...new Set(fls.map(p => p.poll_id)) ]
+                opts = await PollOptionApi.getPollOptionsByPollIds(poll_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
@@ -219,13 +252,16 @@ const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onS
         const tms = await MarketComponentApi.getTeamsByIds(tm_ids);
         const aths = await MarketComponentApi.getAthletesByIds(aths_ids);
         const lgs = await MarketComponentApi.getLeagues();
-
+        const spnsrs = await CampaignApi.getCompaniesByIds(c_resp.campaign?.sponsors ?? [])
         setEmbedState({
             ...embed_state,
             players:pls, 
             campaign: c_resp.campaign,
             campaign_participants: c_resp.campaign_participants,
             teams: tms,
+            sponsors: spnsrs,
+            flash_markets: fls,
+            flash_options: opts,
             leagues: lgs,
             competitions:comps,
             poll_campaigns: pcs,
@@ -236,7 +272,10 @@ const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onS
             events: evs,
             orders: vis_ords,
             loading:false
-        })
+        });
+        setTimeout(() => {
+            getData(campaign_id)
+        }, 240000); //Update every 4 minutes
     }
 
     const handleCheckIn = async() => {
@@ -311,6 +350,33 @@ const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onS
         )
     }
 
+    const renderGolfers = (data:{ item:CampaignParticipantProps, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        if(!player){ return <></> }
+        return (
+            <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                {data.item.payload.status == 'active' ?
+                <Icons.GolferIcon size={16} color={Colors.text.h1} />
+                : data.item.payload.status == 'pending' ?
+                <Icons.InProgressIcon size={16} color={Colors.text.h1} />
+                :
+                <Icons.LockClosedIcon size={16} color={Colors.text.h1} />
+                }
+                <View style={{ flex:1, flexDirection:'row', marginLeft:15 }}>
+                    <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}}
+                    />
+                    <View style={{ flex:1, marginLeft:10 }}>
+                        <Text theme='h1'>{player.first_name} {player.last_name}</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>@{player.username}</Text>
+                    </View>
+                </View>
+                <Text theme='h1'>{data.item.payload.pin_distance == 999 ? 'MISS' : data.item.payload.pin_distance}</Text>
+            </View>
+        )
+    }
+
     const renderEngagements = (data:{ item:{ id:string, type:string, scheduled_datetime:Moment }, index:number }) => {
         
         switch(data.item.type){
@@ -360,6 +426,79 @@ const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onS
         }
     }
 
+    const renderUpcomingGolfers = (data: { item:PollProps, index:number }) => {
+        const options = flash_options.filter(o => o.poll_id == data.item.poll_id);
+        return (
+            <View transparent style={{ flexDirection:'row', borderBottomWidth:1, borderColor:Colors.borders.light, borderBottomLeftRadius: 8 }}>
+                <View type='header' style={{ padding:20, justifyContent:'center', alignItems:'center', borderRightWidth:1, borderColor:Colors.borders.light }}>
+                    <Text theme='description' style={{ marginBottom:4 }}>Group</Text>
+                    <Text theme='h1'>{data.item.priority}</Text>
+                </View>
+                {options.sort((a,b) => a.priority - b.priority).map(o => {
+                    return (
+                        <View transparent style={{ flex:1, justifyContent:'center', alignItems:'center', padding:10, borderRightWidth:1, borderColor:Colors.borders.light }}>
+                            <Image 
+                                source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                                style={{ height:40, width:40 }}
+                                resizeMode='cover'
+                            />
+                            <Text theme='h2' style={{ marginTop:4 }} textAlign='center'>{o.option_name}</Text>
+                        </View>
+                    )
+                })}
+            </View>
+        )
+    }
+
+    const renderClosedGolfers = (data: { item:PollProps, index:number }) => {
+        const options = flash_options.filter(o => o.poll_id == data.item.poll_id);
+        return (
+            <View transparent style={{ flexDirection:'row', borderBottomWidth:1, borderColor:Colors.borders.light, borderBottomLeftRadius: 8 }}>
+                <View type='header' style={{ padding:20, justifyContent:'center', alignItems:'center', borderRightWidth:1, borderColor:Colors.borders.light }}>
+                    <Text theme='description' style={{ marginBottom:4 }}>Group</Text>
+                    <Text theme='h1'>{data.item.priority}</Text>
+                </View>
+                {options.sort((a,b) => a.priority - b.priority).map(o => {
+                    return (
+                        <View transparent style={{ flex:1, justifyContent:'center', alignItems:'center', padding:10, borderWidth:1, borderColor:o.result_ind=='win' ? Colors.text.success : Colors.borders.light }}>
+                            <Image 
+                                source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                                style={{ height:50, width:50 }}
+                                resizeMode='cover'
+                            />
+                            <Text theme='h2' style={{ marginTop:4 }} textAlign='center'>{o.option_name}</Text>
+                            
+                        </View>
+                    )
+                })}
+            </View>
+        )
+    }
+
+    const renderPastPoll = (data: { item:PollProps, index:number }) => {
+        return (
+            <View style={{ flexGrow:1, padding:10, flexDirection:'row', alignItems:'center' }}>
+                <Text theme='h1'>{data.item.poll_question}</Text>
+            </View>
+        )
+    }
+
+    const renderSponsors = (data: { item:CompanyProps, index:number }) => {
+        return (
+            <View float style={{ flexDirection:'row', alignItems:'center', minWidth:300, maxWidth:350, margin:10, padding:10 }}>
+                <Image
+                    source={{ uri: data.item.company_image?.url }}
+                    style={{ height:60, width:60, backgroundColor:Colors.text.white, borderRadius:8 }}
+                    resizeMode='center'
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.company_name}</Text>
+                    <Text theme='description' style={{ marginTop:4 }}>{data.item.company_description}</Text>
+                </View>
+            </View>
+        )
+    }
+
     const renderSections = (data:{ item:string, index:number }) => {
         switch(data.item){
             case 'header':
@@ -389,6 +528,92 @@ const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onS
                         :<></>}
                     </View>
                 )
+            case 'closest_pin':
+                const active_poll = flash_markets[0]//.find(m => m.flash_active);
+                const next_three = flash_markets.filter(m => m.priority > (active_poll?.priority??0)).sort((a,b) => a.priority - b.priority).slice(0,3);
+                return (
+                    <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        <View nativeID='pin_leaderboard' style={{ flex:1, minWidth:400 }}>
+                            <View>
+                                <Image
+                                    source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1752434537/a95a5b63614b60844f9612cce6cc985a2ed2879c-1600x1067_bfgn61.jpg' }}
+                                    style={{ height:400*0.6725, width:400 }}
+                                    resizeMode='cover'
+                                />
+                            </View>
+                        </View>
+                        <View style={{ minWidth:400 }}>
+                            <FlatList
+                                data={campaign_participants.filter(cp => cp.status == 'active').sort((a,b) => parseFloat((a.payload.pin_distance ?? 9999)) - parseFloat((b.payload.pin_distance ?? 9999)))}
+                                key={'closed_pin_leaders'}
+                                keyExtractor={(item) => item.campaign_participant_id}
+                                renderItem={renderGolfers}
+                            />
+                        </View>
+                        <View nativeID='flash' style={{ flex:4, borderLeftWidth:1, borderColor:Colors.borders.light }}>
+                            <View type='body' style={{ flex:1 }}>
+                                <View style={{ flexDirection:'row', flex:1 }}>
+                                    <View style={{ flex:1 }}>
+                                         
+                                            {active_poll ?
+                                            <FlashHolder
+                                                poll_id={active_poll?.poll_id}
+                                                init_expanded
+                                                hide_tabs
+                                                onRequestAuthenticate={() => console.log('')}
+                                                onRequestLocation={() => console.log('')}
+                                                onFocusPosition={() => console.log('')}
+                                            />
+                                            :<></>}
+                                    </View>
+                                    <View style={{ flex:1, borderLeftWidth:1, borderColor:Colors.borders.light }}>
+                                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                                            <View transparent style={{ flex:1 }}>
+                                                <Text theme='h1'>Upcoming Groups</Text>
+                                                <Text theme='description' style={{ marginTop:8 }}>Bet on who will get closest to the pin!</Text>
+                                            </View>
+                                        </View>
+                                        <View>
+                                            {next_three.map((p,i) => {
+                                                return renderUpcomingGolfers({ item: p, index:i })
+                                            })}
+                                        </View>
+                                    </View>
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                )
+            case 'last_ones':
+                const past_three = flash_markets.filter(m => m.priority > (active_poll?.priority??0)).sort((a,b) => b.priority - a.priority).slice(0,5);
+                return (
+                    <View style={{ flex:1, borderLeftWidth:1, borderColor:Colors.borders.light }}>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Upcoming Groups</Text>
+                                <Text theme='description' style={{ marginTop:8 }}>Bet on who will get closest to the pin!</Text>
+                            </View>
+                        </View>
+                        {past_three.map((p,i) => {
+                            return renderPastPoll({ item: p, index:i })
+                        })}
+                    </View>
+                )
+            case 'sponsors':
+                return (
+                    <View style={{ padding:10, borderTopWidth:1, borderColor:Colors.borders.light }}>
+                        <View>
+                            <Text theme='h1'>Sponsors</Text>
+                            <Text theme='description' style={{ marginTop:4 }}>A massive thank you to all the amazing sponsors</Text>
+                        </View>
+                        <AutoScrollingFlatList
+                            data={sponsors}
+                            renderItem={renderSponsors}
+                            horizontal
+                            speed={50}
+                        />
+                    </View>
+                )
             case 'prize':
                 if(!campaign?.prize_description){ return <></> }
                 return (
@@ -528,6 +753,207 @@ const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onS
     const new_bet_event = events.find(e => e.event_id == new_bet_alert?.event_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);
+    
+    if(mode == 'golf'){
+        const active_poll = flash_markets.filter(m => ['paused','active'].includes(m.status)).sort((a,b) => a.priority - b.priority)[0]
+        const next_three = flash_markets.filter(m => m.priority > (active_poll?.priority??0)).sort((a,b) => a.priority - b.priority).slice(0,3);
+        const past_three = flash_markets.filter(m => m.status == 'closed').sort((a,b) => b.priority - a.priority).slice(0,3)
+        const active_participant = campaign_participants.find(cp => cp.payload.status == 'active');
+        const active_golfer = players.find(p => p.player_id == active_participant?.player_id);
+        return (
+            <View style={{ flex:1 }}>
+                <ImageBackground
+                    style={{ flex:1 }}
+                    source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1752434537/a95a5b63614b60844f9612cce6cc985a2ed2879c-1600x1067_bfgn61.jpg' }}
+                >
+                        <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0 }} />
+                        <View transparent style={{flex:1, flexDirection:'row' }}>
+                            <View transparent style={{ flex:2, margin:10, minWidth:350 }} onLayout={(ev) => {
+                                const { height, width } = ev.nativeEvent.layout;
+                                setGolfLeaderSize({ height, width: width -2 });
+                            }}>
+                                <View float style={{ flex:1 }}>
+                                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                                        <View transparent style={{ flex:1 }}>
+                                            <Text theme='h1'>On the Tee Now!</Text>
+                                            <Text theme='description'>Below are the current betting probabilities for the group on the tee!</Text>
+                                        </View>
+                                    </View>
+                                    <View style={{ flex:1 }}>
+                                        {active_poll ?
+                                        <FlashHolder
+                                            poll_id={active_poll?.poll_id}
+                                            init_expanded
+                                            hide_tabs
+                                            hide_timer
+                                            hide_footer
+                                            no_highlight
+                                            onRequestAuthenticate={() => console.log('')}
+                                            onRequestLocation={() => console.log('')}
+                                            onFocusPosition={() => console.log('')}
+                                        />
+                                        :<></>}
+                                    </View>
+                                    <View transparent>
+                                        <Image
+                                            source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1752434537/a95a5b63614b60844f9612cce6cc985a2ed2879c-1600x1067_bfgn61.jpg' }}
+                                            style={{ height:golf_leader_size.width*0.6725, width:golf_leader_size.width, alignSelf:'center', borderBottomRightRadius:8, borderBottomLeftRadius:8 }}
+                                        />
+                                        <View transparent style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                                            <View float style={{ padding:20 }}>
+                                                <Text theme='h2' textAlign='center'>Windsong Farm South Course</Text>
+                                                <Text theme='h1' style={{ marginTop:10 }} textAlign='center'>Hole 16</Text>
+                                                <View transparent style={{ marginTop:10, padding:10, justifyContent:'center', alignItems:'center' }}>
+                                                    <QRCode
+                                                        value={`https://play.bettoredge.com/social/campaign/${campaign_id}`}
+                                                        size={100}
+                                                        style={{ backgroundColor:'transparent' }}
+                                                    />
+                                                </View>
+                                            </View>
+                                            
+                                        </View>
+                                    </View>
+                                </View>
+                            </View>
+                            <View float style={{ flex:3, minWidth:350, margin:10 }}>
+                                <View type='header' style={{ padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                                    <View transparent style={{ flex:1 }}>
+                                        <Text theme='h1'>Closest to the hole #16</Text>
+                                    </View>
+                                </View>
+                                {active_golfer ?
+                                <View style={{ backgroundColor:Colors.views.gold, padding:10 }}>
+                                    <Text theme='h2'>Now On The Tee</Text>
+                                    <View transparent style={{ flexDirection:'row', marginTop:5}}>
+                                        <Image
+                                            source={{ uri: active_golfer.profile_pic && active_golfer.profile_pic != '' ? active_golfer.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                                            style={{ height:35, width:35, borderRadius:100}}
+                                        />
+                                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                                            <Text theme='h1' color={Colors.text.white}>{active_golfer.first_name} {active_golfer.last_name}</Text>
+                                            <Text theme='description' style={{ marginTop:3 }}>@{active_golfer.username}</Text>
+                                        </View>
+                                        <Icons.GolferIcon size={28} color={Colors.text.white} />
+                                    </View>
+                                </View>
+                                :<></>}
+                                <View style={{ flex:1, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                                    <View style={{ flexDirection:'row' }}>
+                                        <View transparent style={{ padding:10 }}>
+                                            <Text theme='h1'>LEADERBOARD</Text>
+                                            <Text theme='description' style={{ marginTop:4 }}>Closest to the pin - distance in feet from the pin</Text>
+                                        </View>
+                                        {loading ?
+                                        <ActivityIndicator color={Colors.text.h1} size={14} />
+                                        :<></>}
+                                    </View>
+                                   
+                                    <FlatList
+                                        data={campaign_participants.filter(cp => cp.status == 'active').sort((a,b) => parseFloat((a.payload.pin_distance ? a.payload.pin_distance : 9999)) - parseFloat((b.payload.pin_distance ? b.payload.pin_distance : 9999)))}
+                                        key={'closed_pin_leaders'}
+                                        keyExtractor={(item) => item.campaign_participant_id}
+                                        renderItem={renderGolfers}
+                                    />
+                                </View>
+                                <View type='header' style={{ padding:10, borderTopWidth:1, borderColor:Colors.borders.light, overflow:'hidden', borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                                    <View transparent>
+                                        <Text theme='h1'>Sponsors</Text>
+                                        <Text theme='h2' style={{ marginTop:4 }}>A massive thank you to all the amazing sponsors</Text>
+                                    </View>
+                                    <AutoScrollingFlatList
+                                        data={sponsors}
+                                        renderItem={renderSponsors}
+                                        horizontal
+                                        speed={20}
+                                    />
+                                </View>
+                            </View>
+                            <View transparent style={{ flex:4 }}>
+                                <View float nativeID='next_up' style={{ flexGrow:1, margin:10 }}>
+                                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                                        <Icons.GolferIcon size={28} color={Colors.text.h1} />
+                                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                                            <Text theme='h1'>Upcoming Groups</Text>
+                                            <Text theme='description' style={{ marginTop:3 }}>Groups that are soon to be up!</Text>
+                                        </View>
+                                    </View>
+                                    <View style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                                        <FlatList
+                                            data={next_three.sort((a,b) => a.priority - b.priority)}
+                                            renderItem={renderUpcomingGolfers}
+                                            key={'next_up'}
+                                            keyExtractor={(item) => item.poll_id.toString()}
+                                        />
+                                    </View>
+                                </View>
+                                <View float nativeID='past' style={{ flexGrow:1, margin:10 }}>
+                                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                                        <Icons.GolferIcon size={28} color={Colors.text.h1} />
+                                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                                            <Text theme='h1'>Recently Completed Groups</Text>
+                                            <Text theme='description' style={{ marginTop:3 }}>Winners from past groups!</Text>
+                                        </View>
+                                    </View>
+                                    <View style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                                        <FlatList
+                                            data={past_three.sort((a,b) => b.priority - a.priority)}
+                                            renderItem={renderClosedGolfers}
+                                            key={'past_up'}
+                                            keyExtractor={(item) => item.poll_id.toString()}
+                                        />
+                                    </View>
+                                </View>
+                                {campaign ?
+                                    <View type='header' style={{ margin:10, flexDirection:'row', alignItems:'center', padding:10, borderRadius:8 }}>
+
+                                        <Image
+                                            source={{ uri: campaign.campaign_image?.url }}
+                                            style={{ height:80, width:80, borderRadius:8 }}
+                                            resizeMode='center'
+                                        />
+                                        <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>
+                                :<></>}
+                            </View>
+
+                        </View>
+                </ImageBackground>
+                {new_player_alert && new_player ?
+                <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, alignItems:'center', paddingTop:100 }}>
+                    <GolferAlert
+                        campaign_participant={new_player_alert}
+                        player={new_player}
+                        view_mode={view_mode}
+                        onViewProfile={onViewProfile}
+                        onClose={() => setNewPlayerAlert(undefined)}
+                    />
+                </View>
+                :<></>}
+                <SocketManager
+                    onConnect={() => {
+                        if(!needs_reload){ return }
+                    }}
+                    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>
+        )
+    }
+    
     return (
         <View style={{ flex:1 }}>
             <View style={{ flex:1 }}>
@@ -597,7 +1023,6 @@ const Campaign = ({ player_id, campaign_id, insets, color_mode, distinct_id, onS
             <SocketManager
                 onConnect={() => {
                     if(!needs_reload){ return }
-                    console.log('GET DATA!!!`')
                 }}
                 onDisconnect={() => setNeedsReload(true)}
                 subscribed_events={['UPDATE_CAMPAIGN_PARTICIPANTS']}

package/src/Checkout/components/AccountSummaryCard.tsx

@@ -3,9 +3,9 @@ import { Image } from "react-native";
 import { Checkbox, Icons } from '../../Components';
 import type { AccountProps, FocusPositionProps, ItemProps, PlayerAddressProps } from '../../types';
 import { CheckoutApi, CheckoutHelpers } from '../api';
-import moment from 'moment-mini';
 import { Button, Text, TextInput, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
+import { WalletHelpers } from '../../Wallet/api';
 
 type AccountSummaryCardProps = {
     selected_account?:AccountProps,
@@ -127,7 +127,7 @@ const AccountSummaryCard = ({ accounts, cvv, items, selected_account, billing_ad
                     <View style={{ flex:1, marginRight:5 }}>
                         <Text size={14} weight='bold'>{selected_account.account_label}</Text>
                         {selected_account.account_type == 'card' && selected_account.card_detail ?
-                            <Text style={{ marginTop:3 }} size={12} color={Colors.text.descriptionLight}>EXP: {moment(selected_account.card_detail.expiration_date).format('MM/YYYY')}</Text>
+                            <Text style={{ marginTop:3 }} size={12} color={Colors.text.descriptionLight}>EXP: {WalletHelpers.formateTimeToExpireDate(selected_account.card_detail.expiration_date)}</Text>
                         :<></>}   
                     </View>
                     <View style={{ flexDirection:'row', alignItems:'center' }}>

package/src/Components/Jerseys.tsx

@@ -71,7 +71,7 @@ const TeamImage = ({ team, league , size} : TeamImageProps) => {
     let image_size = size ?? 20
 
     return (
-        <View style={{ margin:5, alignSelf:'center', justifyContent:'center', alignItems:'center', borderRadius:100, backgroundColor:Colors.shades.white }}>
+        <View style={{ alignSelf:'center', justifyContent:'center', alignItems:'center', borderRadius:100, backgroundColor:Colors.shades.white }}>
             {team.image?.url ?
             <RN_Image source={{ uri: team.image.url }} style={{ height:image_size * 2, width:image_size * 2, borderRadius:100 }} resizeMode='center'/>