be-components 5.8.1 → 5.8.2

package/lib/typescript/src/Ticker/index.d.ts

@@ -5,7 +5,8 @@ type TickerProps = {
     color_mode?: 'light' | 'dark';
     distinct_id?: string;
     onOrders?: (orders: OrderProps[]) => void;
+    onCreateOrder?: (order: OrderProps) => void;
 };
-declare const Ticker: ({ league_ids, color_mode, distinct_id, onOrders }: TickerProps) => React.JSX.Element;
+declare const Ticker: ({ league_ids, color_mode, distinct_id, onOrders, onCreateOrder }: TickerProps) => React.JSX.Element;
 export default Ticker;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/Ticker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Ticker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAA0E,UAAU,EAA0C,MAAM,UAAU,CAAC;AAW3J,KAAK,WAAW,GAAG;IACf,UAAU,EAAC,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAC,OAAO,GAAC,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAC,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAC,CAAC,MAAM,EAAC,UAAU,EAAE,KAAK,IAAI,CAAA;CAC1C,CAAA;AAKD,QAAA,MAAM,MAAM,GAAI,mDAAkD,WAAW,sBAsP5E,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Ticker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAA0E,UAAU,EAA0C,MAAM,UAAU,CAAC;AAY3J,KAAK,WAAW,GAAG;IACf,UAAU,EAAC,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAC,OAAO,GAAC,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAC,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAC,CAAC,MAAM,EAAC,UAAU,EAAE,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAC,CAAC,KAAK,EAAC,UAAU,KAAK,IAAI,CAAA;CAC5C,CAAA;AAKD,QAAA,MAAM,MAAM,GAAI,kEAAiE,WAAW,sBAoR3F,CAAA;AAED,eAAe,MAAM,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "5.8.1",
+  "version": "5.8.2",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/Campaign/api/index.ts

@@ -1,13 +1,14 @@
 
 import axios from 'axios';
-import type { CampaignParticipantProps, CampaignProps, OrderAnalyticsProps, OrderProps, OverallOrderAnalyticsProps, PublicPlayerProps } from '../../types';
+import type { CampaignParticipantProps, CampaignProps, CompetitionProps, EventProps, MatchProps, NewOverallAnalytics, OrderAnalyticsProps, OrderProps, PollCampaignProps, PublicPlayerProps, TournamentProps } from '../../types';
 import { APIOverrides } from '../../ApiOverrides';
-import moment from 'moment-mini';
+import moment, { type Moment } from 'moment-mini';
 
 //let SOCIAL_SVC_API = '';
 //let EVENT_SVC_API = '';
 let MK_SVC_API = '';
 let AUTH_SVC_API = '';
+let TP_SVC_API = ''
 
 export const CampaignApi = {
     setEnvironment: () => {
@@ -16,6 +17,7 @@ export const CampaignApi = {
         //EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
         MK_SVC_API = endpoints['MK_SVC_API'] as string;
         AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+        TP_SVC_API = endpoints['TP_SVC_API'] as string;
 
     },
     getPlayersByPlayerIds : async(player_ids:string[]):Promise<PublicPlayerProps[]> => {
@@ -35,6 +37,51 @@ export const CampaignApi = {
             return { campaign: undefined, campaign_participants:[]  }
         }
     },
+    getPollCampaignsByIds: async(poll_campaign_ids:string[]):Promise<PollCampaignProps[]> => {
+        try {
+            if(poll_campaign_ids.length == 0){ return [] }
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/polls/campaigns/bulk/get`, { poll_campaign_ids });
+            return resp.data.poll_campaigns
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+    },
+    getCompetitionsByIds: async(competition_ids:string[]):Promise<CompetitionProps[]> => {
+        try {
+            if(competition_ids.length == 0){ return [] }
+            const resp = await axios.post(`${TP_SVC_API}/v2/competitions/bulk/get`, { competition_ids });
+            return resp.data.competitions
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+    },
+    joinCampaign: async(campaign_id:string):Promise<CampaignParticipantProps|undefined> => {
+        try {
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/campaigns/campaign/join`, { campaign_id });
+            return resp.data.campaign_participant
+        } catch (e) {
+            console.log(e)
+            return undefined
+        }
+    },
+    leaveCampaign: async(campaign_participant_id:string):Promise<CampaignParticipantProps|undefined> => {
+        try {
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/campaigns/campaign/leave`, { campaign_participant_id });
+            return resp.data.campaign_participant
+        } catch (e) {
+            return undefined
+        }
+    },
+    getMyCampaignParticipants: async():Promise<{ campaigns:CampaignProps[], campaign_participants:CampaignParticipantProps[] }> => {
+        try {
+            const resp = await axios.get(`${AUTH_SVC_API}/v1/campaigns/participant/me`);
+            return resp.data
+        } catch (e) {
+            return { campaigns:[], campaign_participants:[] }
+        }
+    },
     getCampaignAction: async(campaign_id:string):Promise<OrderProps[]> => {
         try {
             const resp = await axios.get(`${MK_SVC_API}/v1/orders/campaign/action/${campaign_id}`);
@@ -53,9 +100,8 @@ export const CampaignApi = {
         }
     }
 }
-
 export const CampaignHelpers = {
-    aggregateAnalytics: (analytics:OrderAnalyticsProps[]):OverallOrderAnalyticsProps&{roi_pct:number, win_pct:number, earnings:number} => {
+    aggregateAnalytics: (analytics:OrderAnalyticsProps[]):NewOverallAnalytics => {
         const wins = analytics.reduce((a,b) => a + b.wins, 0);
         const losses = analytics.reduce((a,b) => a + b.losses, 0);
         const draws = analytics.reduce((a,b) => a + b.draws, 0);
@@ -82,11 +128,47 @@ export const CampaignHelpers = {
             roi_pct
         }
     },
+    getCampaignLeaderboard: (analytics:OrderAnalyticsProps[]):NewOverallAnalytics[] => {
+        let unique_player_ids = [ ...new Set(analytics.map(a => a.player_id)) ]
+        let overall_analytics:NewOverallAnalytics[] = []
+        unique_player_ids.map(id => {
+            let anals = analytics.filter(a => a.player_id == id);
+            let agg_analytics = CampaignHelpers.aggregateAnalytics(anals)
+            overall_analytics.push({ ...agg_analytics, player_id: id })
+        });
+        return overall_analytics.sort((a,b) => b.earnings - a.earnings);
+    },
     getTimeOptions: () => {
         const time_options = [
             { label: 'All Time', to: moment().unix(), from: moment().subtract(7, 'years').unix() },
             { label: 'Last 7 Days', to: moment().unix(), from: moment().subtract(7, 'days').unix() }
         ]
         return time_options
+    },
+    getContestDetails: (contest_type:'team'|'tournament'|'match', event?:EventProps, tournament?:TournamentProps, match?:MatchProps) => {
+        const default_response = { contest_title: '', contest_details:'' }
+        switch(contest_type){
+            case 'team':
+                if(!event){ return default_response }
+                let details = ['created','scheduled'].includes(event.status) ? moment(event.scheduled_datetime).format('MMM dd hh:mm a') : event.status
+                return { contest_title: event.event_title, contest_details: details }
+            case 'tournament':
+                if(!tournament){ return default_response }
+                return { contest_title:tournament.tournament_name, contest_details: moment(tournament.scheduled_datetime).format('MMM dd hh:mm a') }
+            case 'match':
+                if(!match){ return default_response }
+                return { contest_title:match.match_title, contest_details: moment(match.scheduled_datetime).format('MMM dd hh:mm a') }
+            default: return default_response
+        }
+    },
+    sortEngagements: (competitions:CompetitionProps[], poll_campaigns:PollCampaignProps[]) => {
+        let sorted_engagements: { id:string, type:'poll_campaign'|'competition', scheduled_datetime:Moment }[] = []
+        competitions.map(c => 
+            sorted_engagements.push({ id: c.competition_id, type:'competition', scheduled_datetime: moment(c.scheduled_datetime) })
+        )
+        poll_campaigns.map(pc => 
+            sorted_engagements.push({ id:pc.poll_campaign_id, type:'poll_campaign', scheduled_datetime:moment().add(2, 'hours')  })
+        )
+        return sorted_engagements.sort((a,b) => a.scheduled_datetime.unix() - b.scheduled_datetime.unix())
     }
 }

package/src/Campaign/components/ActionList.tsx

@@ -1,26 +1,36 @@
 import React from 'react';
 import { Text, View } from "../../Components/Themed"
-import type { EventProps, OrderProps, PublicPlayerProps } from "../../types"
+import type { EventProps, MatchProps, OrderProps, PublicPlayerProps, TournamentProps } from "../../types"
 import { FlatList, Image } from 'react-native';
 import moment from 'moment-mini';
 import OrderGradeBar from '../../MarketComponents/components/OrderGradeBar';
+import { CampaignHelpers } from '../api';
+import { MarketComponentHelpers } from '../../MarketComponents/api';
+import { Icons } from '../../Components';
+import { useColors } from '../../constants/useColors';
 
 type ActionListProps = {
     orders:OrderProps[],
     events:EventProps[],
+    tournaments:TournamentProps[],
+    matches:MatchProps[],
+    hide_header?:boolean,
     players:PublicPlayerProps[]
 }
 
-const ActionList = ({ orders, events, players }:ActionListProps) => {
-
+const ActionList = ({ orders, events, players, tournaments, matches, hide_header }:ActionListProps) => {
+    const Colors = useColors();
     const renderAction = (data:{ item:OrderProps, index:number }) => {
         const event = events.find(e => e.event_id == data.item.event_id);
-        if(!event){ return <></> }
+        const tournament = tournaments.find(t => t.tournament_id == data.item.event_id);
+        const match = matches.find(m => m.match_id == data.item.event_id);
+        const { contest_title } = CampaignHelpers.getContestDetails(data.item.event_type, event, tournament, match);
+
         const player = players.find(p => p.player_id == data.item.player_id)
         return (
-            <View float style={{ margin:10 }}>
+            <View float style={{ margin:5 }}>
                 <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:8, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
-                    <Text style={{ flex:1 }} theme='h2'>{event.event_title}</Text>
+                    <Text style={{ flex:1 }} theme='h2'>{contest_title}</Text>
                     <Text theme='action'>{moment(data.item.create_datetime).fromNow()}</Text>
                 </View>
                 <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
@@ -42,7 +52,11 @@ const ActionList = ({ orders, events, players }:ActionListProps) => {
                             view_type='book'
                         />
                     </View>
-                    :<></>}
+                    :
+                    <View transparent>
+                        <Text theme='h1'>{MarketComponentHelpers.getOddsLabel(data.item.odds)}</Text>
+                    </View>
+                    }
                 </View>
             </View>
         )
@@ -51,12 +65,23 @@ const ActionList = ({ orders, events, players }:ActionListProps) => {
 
     return (
         <View transparent style={{ flex:1 }}>
-            <FlatList
-                data={orders}
-                renderItem={renderAction}
-                keyExtractor={(item) => item.order_id.toString()}
-                key={'campaign_action'}
-            />
+            {!hide_header ?
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <Icons.ActivityIcon size={20} color={Colors.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>Recent Action</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Action placed while checked in</Text>
+                </View>
+            </View>
+            :<></>}
+            <View>
+                <FlatList
+                    data={orders}
+                    renderItem={renderAction}
+                    keyExtractor={(item) => item.order_id.toString()}
+                    key={'campaign_action'}
+                />
+            </View>
         </View>
     )
 }

package/src/Campaign/components/BetAlert.tsx

@@ -1,7 +1,7 @@
 import { Image } from "react-native";
 import { Icons } from "../../Components";
 import { Text, View } from "../../Components/Themed";
-import type { AthleteProps, EventProps, OrderProps, PublicPlayerProps, TeamProps } from "../../types"
+import type { AthleteProps, EventProps, LeagueProps, OrderProps, PublicPlayerProps, TeamProps, TournamentProps } from "../../types"
 import React from 'react';
 import OrderGradeBar from "../../MarketComponents/components/OrderGradeBar";
 import { MarketComponentHelpers } from "../../MarketComponents/api";
@@ -9,19 +9,22 @@ import QRCode from "react-qr-code";
 import { useColors } from "../../constants/useColors";
 import moment from "moment-mini";
 import ProgressTimer from "./ProgressTimer";
+import { AthleteImage } from "../../Components/Jerseys";
 
 type BetAlertProps = {
     order:OrderProps,
+    league?:LeagueProps,
     team?:TeamProps,
     athlete?:AthleteProps,
     event?:EventProps,
+    tournament?:TournamentProps,
     player?:PublicPlayerProps,
     color_mode?:'light'|'dark'
     
     onClose:() => void
 }
 
-const BetAlert = ({ player, order, team, athlete, event, color_mode, onClose }:BetAlertProps) => {
+const BetAlert = ({ player, order, league, team, athlete, event, tournament, color_mode, onClose }:BetAlertProps) => {
     const Colors = useColors({ mode: color_mode });
     
     return (
@@ -52,6 +55,11 @@ const BetAlert = ({ player, order, team, athlete, event, color_mode, onClose }:B
                     <Text theme='h2'>{event.home?.market_name}</Text>
                 </View>
                 :<></>}
+            {tournament ?
+                <View style={{ flexDirection:'row', alignItems:'center', justifyContent:'center', padding:10 }}>
+                    <Text theme='h1' style={{ marginRight:20, marginLeft:20 }}>{tournament.tournament_name}</Text>
+                </View>
+                :<></>}
             {player ?
             <View>
                 <Image
@@ -68,10 +76,11 @@ const BetAlert = ({ player, order, team, athlete, event, color_mode, onClose }:B
                         resizeMode='cover'
                     />
                     :athlete ?
-                    <Image
-                        source={{ uri: athlete.image?.url }}
-                        style={{ height:60, width:60 }}
-                        resizeMode='cover'
+                    <AthleteImage
+                        athlete={athlete}
+                        size={40}
+                        number_size={18}
+                        league={league}
                     />
                     :<></>}
                     

package/src/Campaign/components/CampaignAnalytics.tsx

@@ -1,18 +1,24 @@
 import React, { useEffect, useState } from 'react';
-import { View } from "../../Components/Themed"
+import { Text, View } from "../../Components/Themed"
 import moment from 'moment-mini';
-import { CampaignApi } from '../api';
-import type { OrderAnalyticsProps } from '../../types';
+import { CampaignApi, CampaignHelpers } from '../api';
+import type { CampaignParticipantProps, NewOverallAnalytics, OrderAnalyticsProps, PublicPlayerProps } from '../../types';
+import { ActivityIndicator, FlatList, Image } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+import { CompetitionHelpers } from '../../Competition/api';
 
 
-type CampaignAnalyticsProps = {
-    campaign_id:string
+type CampaignLeaderboardProps = {
+    campaign_id:string,
+    players:PublicPlayerProps[],
+    campaign_participants:CampaignParticipantProps[]
 }
 
-const CampaignAnalytics = ({ campaign_id }:CampaignAnalyticsProps) => {
-    
+const CampaignLeaderboard = ({ campaign_id, players, campaign_participants }:CampaignLeaderboardProps) => {
+    const Colors = useColors();
     const time_options = [
-        { label: 'Last 7 Days', to: moment().unix(), from: moment().subtract(7, 'days').unix() }
+        { label: 'Last Year', to: moment().unix(), from: moment().subtract(365, 'days').unix() }
     ]
 
     const [ module_state, setModuleState ] = useState<{
@@ -20,11 +26,11 @@ const CampaignAnalytics = ({ campaign_id }:CampaignAnalyticsProps) => {
         time_option: any,
         analytics:OrderAnalyticsProps[]
     }>({
-        loading:false,
+        loading:true,
         time_option: time_options[0],
         analytics: []
     });
-    //const { analytics } = module_state;
+    const { loading, analytics } = module_state;
 
     useEffect(() => {
         let option = time_options[0]
@@ -34,20 +40,77 @@ const CampaignAnalytics = ({ campaign_id }:CampaignAnalyticsProps) => {
 
     const handleLoadAnalytics = async(option:{ label:string, to:number, from:number }) => {
         CampaignApi.setEnvironment();
+        setModuleState({ ...module_state, loading:true });
         const analytics = await CampaignApi.getCampaignAnalytics(campaign_id, option.to, option.from);
         setModuleState({
             ...module_state,
+            loading:false,
             time_option: option,
             analytics
         })
     }
 
-    //const agg = CampaignHelpers.aggregateAnalytics(analytics)
+    const renderLeaders = (data:{ item:NewOverallAnalytics, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        if(!player){ return <></> }
+        const participant = campaign_participants.find(cp => cp.player_id == data.item.player_id);
+        return (
+            <View style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <View transparent style={{ paddingRight:10, borderRightWidth:1, borderColor:Colors.borders.light }}>
+                    <Text theme='h1'>{CompetitionHelpers.formatPlace(data.index + 1)}</Text>
+                </View>
+                <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:40, width:40, borderRadius:100, marginLeft:10 }}
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>@{player.username}</Text>
+                    {participant ?
+                    <Text theme='description' style={{ marginTop:3 }}>First checked in {moment(participant.create_datetime).fromNow()}</Text>
+                    :<></>}
+                </View>
+                <View>
+                    <Text theme='description' color={data.item.roi_pct >= 0 ? Colors.text.success : Colors.text.error}>{(data.item.roi_pct * 100).toFixed(2)}%</Text>
+                </View>
+            </View>
+        )
+    }
+
+    const leaders = CampaignHelpers.getCampaignLeaderboard(analytics);
     return (
         <View>
-
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <Icons.LeaderboardIcon size={28} color={Colors.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>Leaderboard</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Leaders based on action placed while checked in</Text>
+                </View>
+                <View transparent style={{ marginLeft:5 }}>
+                    <Text theme='action'>ROI %</Text>
+                </View>
+            </View>
+            <View transparent>
+                {loading ?
+                <ActivityIndicator style={{ margin:20 }} size='large' color={Colors.text.h1} />
+                :<></>}
+                {leaders.length > 0 ?
+                <FlatList
+                    data={leaders}
+                    key={'campaign_leaders'}
+                    keyExtractor={(item) => item.player_id.toString()}
+                    renderItem={renderLeaders}
+                />
+                : !loading ?
+                <View style={{ alignItems:'center', padding:10 }}>
+                    <View float style={{ height:120, width:120, borderRadius:8, padding:10, justifyContent:'center', alignItems:'center' }}>
+                        <Icons.LeaderboardIcon size={36} color={Colors.text.h1} />
+                        <Text theme='h1' style={{ marginTop:10 }} textAlign='center'>No Data Yet!</Text>
+                    </View>
+                </View>
+                :<></>}
+            </View>
         </View>
     )
 }
 
-export default CampaignAnalytics
+export default CampaignLeaderboard

package/src/Campaign/components/NewPlayerAlert.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { CampaignParticipantProps, PublicPlayerProps } from "../../types"
+import { Icons } from '../../Components';
+import { useColors } from '../../constants/useColors';
+import moment from 'moment-mini';
+import { Image } from 'react-native';
+import ProgressTimer from './ProgressTimer';
+import QRCode from 'react-qr-code';
+
+type NewPlayerAlertProps = {
+    view_mode:'desktop'|'mobile',
+    player:PublicPlayerProps,
+    campaign_participant:CampaignParticipantProps,
+    onViewProfile?:(player:PublicPlayerProps) => void
+    onClose:() => void
+}
+
+const NewPlayerAlert = ({ player, view_mode, campaign_participant, onClose, onViewProfile }:NewPlayerAlertProps) => {
+    const Colors = useColors();
+    return (
+        <View float style={{ width:350 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:18, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <Icons.BettorEdgeIcon size={18} color={Colors.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:20, marginRight:10 }}>
+                    <Text theme='h1'>NEW PLAYER ALERT!</Text>
+                    <Text theme='description' style={{ marginTop:5 }}>@{player?.username}  {`\u2022`} First Checked In {moment(campaign_participant.create_datetime).fromNow()}</Text>
+                </View>
+            </View>
+            <View type='body'>
+                <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:200, width:350 }}
+                    resizeMode='cover'
+                />
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>    
+                    <View transparent style={{ flex:1, marginLeft:10 }}>
+                        <Text theme='h1'>@{player.username}</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>Joined BettorEdge {moment(player.create_datetime).fromNow()}</Text>
+                    </View>
+                </View>
+                {view_mode == 'desktop' ?
+                <View type='header' style={{alignItems:'center', padding:10}}>
+                    <QRCode
+                        size={100}
+                        value={`https://play.bettoredge.com/social/player/${campaign_participant.player_id}`}
+                    />
+                    <Text textAlign='center' theme='h2' style={{ marginTop:4 }}>CHECK OUT MY PROFILE</Text>
+                </View>
+                :<></>}
+            </View>
+            <View type='footer' style={{ borderBottomRightRadius:view_mode == 'desktop' ? 8: 0, borderBottomLeftRadius:view_mode == 'desktop'?8:0 }}>
+                <ProgressTimer
+                    onTimesUp={() => onClose()}
+                    time_id={campaign_participant.campaign_participant_id.toString()}
+                    total_time={15}
+                />
+            </View>
+            {view_mode == 'mobile' ?
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10 }}>
+                {onViewProfile ?
+                <Button
+                    title='View Profile'
+                    type='success'
+                    style={{ flex:1, marginRight:3 }}
+                    onPress={() => onViewProfile(player)}
+                />
+                :<></>}
+                <Button
+                    title='CLOSE'
+                    type='error'
+                    style={{ flex:1, marginLeft:3 }}
+                    onPress={() => onClose()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default NewPlayerAlert

package/src/Campaign/components/ParticipantCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, View } from "../../Components/Themed"
-import type { CampaignParticipantProps, EventProps, OrderAnalyticsProps, OrderProps, PublicPlayerProps } from "../../types"
+import type { CampaignParticipantProps, EventProps, MatchProps, OrderAnalyticsProps, OrderProps, PublicPlayerProps, TournamentProps } from "../../types"
 import { Image } from 'react-native';
 import moment from 'moment-mini';
 import ActionList from './ActionList';
@@ -11,10 +11,12 @@ type ParticipantCardProps = {
     campaign_participant:CampaignParticipantProps,
     player:PublicPlayerProps,
     orders:OrderProps[],
+    tournaments:TournamentProps[],
+    matches:MatchProps[],
     analytics:OrderAnalyticsProps[],
     events:EventProps[]
 }
-const ParticipantCard = ({ player, campaign_participant, orders, events, analytics }:ParticipantCardProps) => {
+const ParticipantCard = ({ player, campaign_participant, orders, events, tournaments, matches, analytics }:ParticipantCardProps) => {
     const agg = CampaignHelpers.aggregateAnalytics(analytics);
     
     return (
@@ -67,6 +69,9 @@ const ParticipantCard = ({ player, campaign_participant, orders, events, analyti
                 </View>
                 <ActionList
                     orders={orders}
+                    hide_header
+                    tournaments={tournaments}
+                    matches={matches}
                     players={[player]}
                     events={events}
                 />

package/src/Campaign/components/ParticipantsList.tsx

@@ -44,7 +44,7 @@ const ParticipantsList = ({ campaign_participants, players, selected_participant
     }
 
     return (
-        <View type='header' style={{ flex:1 }}>
+        <View style={{ flex:1 }}>
             <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                 <View transparent style={{ flex:1, marginRight:10 }}>
                     <Text theme='h1'>Participants</Text>