be-components 5.8.1 → 5.8.3

package/src/MarketComponents/api/index.ts

@@ -362,7 +362,21 @@ const MarketComponentHelpers = {
         if(match.time_detail == 'scheduled'){ return moment(match.scheduled_datetime).format('MMM DD hh:mm a') }
         return match.time_detail
     },
-    getOrderTitleForTeamEvent : (order:OrderProps, market:MarketProps, event:EventProps, athlete?:AthleteProps, exotic?:any):string | undefined => {
+    getOrderTitle: (order:OrderProps|BestAvailableOrderProps, market:MarketProps, event?:EventProps, tournament?:TournamentProps, match?:MatchProps, athlete?:AthleteProps, team?:TeamProps) => {
+        switch(order.event_type){
+            case 'team':
+                if(!event){ return undefined }
+                return MarketComponentHelpers.getOrderTitleForTeamEvent(order, market, event, athlete)
+            case 'tournament':
+                if(!tournament){return undefined }
+                return MarketComponentHelpers.getOrderTitleForTournament(order, market, tournament, athlete, team);
+            case 'match':
+                if(!match){ return undefined }
+                return MarketComponentHelpers.getOrderTitleForMatch(order, market, match, athlete, team);
+            default: return undefined
+        }
+    },
+    getOrderTitleForTeamEvent : (order:OrderProps|BestAvailableOrderProps, market:MarketProps, event:EventProps, athlete?:AthleteProps, exotic?:any):string | undefined => {
         let market_side = market.side_options.find(o => o.side == order.side)
         if(!market_side){ return undefined }
         var re = /({.*?})/;
@@ -410,7 +424,7 @@ const MarketComponentHelpers = {
         })
         return new_title
     },
-    getOrderTitleForMatch : (order:OrderProps, market:MarketProps, match:MatchProps, athlete?:AthleteProps, team?:TeamProps):string | undefined => {
+    getOrderTitleForMatch : (order:OrderProps|BestAvailableOrderProps, market:MarketProps, match:MatchProps, athlete?:AthleteProps, team?:TeamProps):string | undefined => {
         if(!match){ return undefined }
         let market_side = market.side_options.find(o => o.side == order.side)
         if(!market_side){ return order.side }

package/src/Ticker/index.tsx

@@ -1,27 +1,30 @@
 import React, { useEffect, useState } from 'react';
-import { Text, View } from "../Components/Themed"
+import { Button, Text, View } from "../Components/Themed"
 import type { AthleteProps, EventProps, ExternalPriceProps, LeagueProps, MarketProps, OrderProps, TeamProps, TournamentProps, TradeProps } from '../types';
-import { MarketComponentApi } from '../MarketComponents/api';
-import { FlatList, Image } from 'react-native';
+import { MarketComponentApi, MarketComponentHelpers } from '../MarketComponents/api';
+import { ActivityIndicator, Image } from 'react-native';
 import moment from 'moment-mini';
 import { useColors } from '../constants/useColors';
 import { FINALIZED_STATUSES } from '../Competition/api';
 import TradeText from './components/TradeText';
 import SocketManager from '../Socket';
 import { AthleteImage } from '../Components/Jerseys';
+import { MarketButtonHelpers } from '../MarketComponents/components/MarketButton/api';
+import { Icons } from '../Components';
 
 
 type TickerProps = {
     league_ids:string[],
     color_mode?:'light'|'dark',
     distinct_id?:string,
-    onOrders?:(orders:OrderProps[]) => void
+    onOrders?:(orders:OrderProps[]) => void,
+    onCreateOrder?:(order:OrderProps) => void
 }
 
-const MIN_SIZE = 350
+const MIN_SIZE = 365
 const MARGIN = 6
 
-const Ticker = ({ league_ids, color_mode, distinct_id, onOrders }:TickerProps) => {
+const Ticker = ({ league_ids, color_mode, distinct_id, onOrders, onCreateOrder }:TickerProps) => {
     const Colors = useColors({ mode: color_mode });
     const [ embed_size, setEmbedSize ] = useState({ height:0, width:0 });
     const [ needs_reload, setNeedsReload ] = useState(false);
@@ -32,8 +35,8 @@ const Ticker = ({ league_ids, color_mode, distinct_id, onOrders }:TickerProps) =
         markets:MarketProps[],
         events:EventProps[],
         athletes:AthleteProps[],
-        tournaments:TournamentProps[],
         teams:TeamProps[],
+        tournaments:TournamentProps[],
         leagues:LeagueProps[],
         trades:TradeProps[],
         animate:boolean,
@@ -50,7 +53,7 @@ const Ticker = ({ league_ids, color_mode, distinct_id, onOrders }:TickerProps) =
         leagues: [],
         external_prices: []
     });
-    const { trades, leagues, events, tournaments, athletes, animate, markets } = ticker_data;
+    const { loading, trades, leagues, events, tournaments, athletes, teams, animate, markets } = ticker_data;
     let sorted_events = events.sort((a,b) => {
         return moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix() || parseInt(a.event_id) - parseInt(b.event_id)
     });
@@ -64,10 +67,14 @@ const Ticker = ({ league_ids, color_mode, distinct_id, onOrders }:TickerProps) =
         //Check how many we can do min size
         let number_to_render = Math.floor(width / min_size)
         let width_no_margin = width / number_to_render
-        return width_no_margin - (margin*2)
+        return { tick_width: width_no_margin - (margin*2), num_columns:number_to_render }
     }
 
-    const tick_width = calcWidth(embed_size.width, MIN_SIZE, MARGIN);
+    const { tick_width, num_columns } = calcWidth(embed_size.width, MIN_SIZE, MARGIN);
+    let column_headers:{ number:number }[] = []
+    for (let i = 0; i < num_columns; i++) {
+        column_headers.push({number: i+1});
+    }
     useEffect(() => {
         startUp();
     },[]);
@@ -105,12 +112,12 @@ const Ticker = ({ league_ids, color_mode, distinct_id, onOrders }:TickerProps) =
     }
 
     const getData = async() => {
+        setTickerData({ ...ticker_data, loading: true })
         const lgs = await MarketComponentApi.getLeagues();
         const mks = await MarketComponentApi.getMarkets();
         let evs = await MarketComponentApi.getActiveEvents();
         let tns = await MarketComponentApi.getActiveTournaments();
         if(league_ids.length > 0){
-            console.log(tns.map(tn => tn.league_id))
             evs = evs.filter(e => league_ids.map(id => id.toString()).includes(e.league_id.toString()));
             tns = tns.filter(t => league_ids.map(id => id.toString()).includes(t.league_id.toString()));
         }
@@ -128,6 +135,7 @@ const Ticker = ({ league_ids, color_mode, distinct_id, onOrders }:TickerProps) =
         setTickerData({
             ...ticker_data,
             events: evs,
+            loading:false,
             animate:false,
             athletes: aths,
             teams: tms,
@@ -139,25 +147,51 @@ const Ticker = ({ league_ids, color_mode, distinct_id, onOrders }:TickerProps) =
     }
 
 
-    const renderTrades = (data: { item:MarketProps, index:number, event:EventProps, is_live:boolean }) => {
-        const ev_trades = trades.filter(t => t.event_type == 'team' && t.event_id == data.event.event_id && t.market_id == data.item.market_id);
+    const renderTrades = (data: { item:MarketProps, index:number, contest_type:string, contest_id:string, is_live:boolean, side_type?:string, side_id?:string }) => {
+        let ev_trades = trades.filter(t => t.event_type == data.contest_type && t.event_id == data.contest_id && t.market_id == data.item.market_id);
+        if(data.side_type){ ev_trades = ev_trades.filter(t => t.side_type == data.side_type && t.side_id == data.side_id) }
         const trade_side_trade = ev_trades.find(t => t.side == data.item.trade_side);
-        if(!trade_side_trade){ return <></> }
+        //if(!trade_side_trade){ return <></> }
+        
         return (
-            <TradeText
-                market={data.item}
-                trade={trade_side_trade}
-                width={tick_width / 2.5 / 3}
-                animate={animate}
-            />
+            <Button float={onCreateOrder?true : false} disabled={!onCreateOrder} transparent style={{ padding:0, margin:2, borderWidth:0, width:60, justifyContent:'center', alignItems:'center'}} onPress={() => {
+                if(!trade_side_trade){ return }
+                if(!onCreateOrder){ return }
+                const order = MarketButtonHelpers.getOrderFromTrade(trade_side_trade);
+                const market = markets.find(mk => mk.market_id == trade_side_trade.market_id);
+                if(!market){ return }
+                const tournament = tournaments.find(t => t.tournament_id == order.event_id);
+                const event = events.find(e => e.event_id == order.event_id);
+                const athlete = athletes.find(a => a.athlete_id == order.side_id);
+                const team = teams.find(t => t.team_id == order.side_id);
+                //const match = [].find(m => m.mark)
+                let title = MarketComponentHelpers.getOrderTitle(order, market, event, tournament, undefined, athlete, team);
+                if(!title){ return }
+                return onCreateOrder({ ...order, title });
+            }}>
+                {trade_side_trade ?
+                <TradeText
+                    market={data.item}
+                    trade={trade_side_trade}
+                    width={tick_width / 2.5 / 3}
+                    animate={animate}
+                />
+                :
+                <Icons.LockClosedIcon size={12} color={Colors.text.h1} />
+                }
+            </Button>
         )
     }
 
-    const renderAthletes = (data:{item:string, index:number, tournament:TournamentProps, league?:LeagueProps}) => {
+    const  renderAthletes = (data:{item:string, index:number, tournament:TournamentProps, league?:LeagueProps}) => {
         const athlete = athletes.find(a => a.athlete_id == data.item);
         if(!athlete){ return <></> }
+        let sup_markets = data.tournament.supported_markets ?? []
+        const supported_markets = markets.filter(pm => sup_markets.map(sm => sm.market_id.toString()).includes(pm.market_id.toString())).sort((a,b) => parseInt(a.market_id) - parseInt(b.market_id));
+        const is_live = moment().isAfter(moment(data.tournament.scheduled_datetime)) ? true : false
+        const is_closed = FINALIZED_STATUSES.includes(data.tournament.status) ? true : false
         return (
-            <View style={{ flexDirection:'row', alignItems:'center', padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+            <View key={data.item.toString()} style={{ width:tick_width-10, flexDirection:'row', alignItems:'center', margin:2, padding:5, borderBottomWidth:1, borderColor:is_closed?Colors.text.error:is_live?Colors.text.success:Colors.borders.light }}>
                 <View float style={{ padding:2, borderRadius:100 }}>
                     <AthleteImage
                         league={data.league}
@@ -165,10 +199,14 @@ const Ticker = ({ league_ids, color_mode, distinct_id, onOrders }:TickerProps) =
                         size={32}
                     />
                 </View>
-
                 <View transparent style={{ flex:1, marginLeft:10 }}>
                     <Text theme='h1'>{athlete.first_name} {athlete.last_name}</Text>
                 </View>
+                <View style={{ flexDirection:'row' }}>
+                {supported_markets.map((sm, i) => {
+                    return renderTrades({ item: sm, index:i, contest_type: 'tournament', contest_id:data.tournament.tournament_id, is_live, side_type:'athlete', side_id:data.item })
+                })}
+            </View>
             </View>
         )
     }
@@ -176,18 +214,36 @@ const Ticker = ({ league_ids, color_mode, distinct_id, onOrders }:TickerProps) =
     const renderTournaments = (data:{ item:TournamentProps, index:number }) => {
         const league = leagues.find(l => l.league_id == data.item.league_id)
         return (
-            <View key={data.item.tournament_id.toString()} style={{ width:tick_width, margin:5, padding:8 }}>
-                <View>
-                    <Text theme='h1'>{data.item.tournament_name}</Text>
+            <View key={data.item.tournament_id.toString()} style={{  width:embed_size.width }}>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                    <View transparent style={{flex:1}}>
+                        <Text theme='h1'>{data.item.tournament_name}</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>{moment(data.item.scheduled_datetime).format('MMM D hh:mm a')}</Text>
+                    </View>
+                </View>
+                <View style={{ flexDirection:'row', alignItems:'center', flexWrap:'wrap', paddingLeft:10, paddingRight:10 }}>
+                    {column_headers.map(c => {
+                        return (
+                            <View key={c.toString()} style={{ width:tick_width - 10, flexDirection:'row', alignItems:'center', paddingTop:10 }}>
+                                <View style={{ flex:1 }} />
+                                {data.item.supported_markets.map(sm => {
+                                    const market = markets.find(md => md.market_id == sm.market_id)
+                                    if(!market){ return <></> }
+                                    return (
+                                        <View transparent style={{ margin:2, width:60 }}>
+                                            <Text theme='h2' textAlign='center'>{market.type}</Text>
+                                        </View>
+                                    )
+                                })}
+                            </View>
+                        )
+                    })}
                 </View>
                 {data.item.participant_type == 'athlete' ?
-                <View>
-                    <FlatList
-                        data={data.item.participants}
-                        key={'tourney_athletes'}
-                        keyExtractor={(item) => item.toString()}
-                        renderItem={({ item ,index }) => renderAthletes({ item, index, tournament: data.item, league })}
-                    />
+                <View style={{ flexDirection:'row', flexWrap:'wrap', padding:10, paddingTop:0 }}>
+                    {data.item.participants.map((item, index) => {
+                        return renderAthletes({ item, index, tournament:data.item, league })
+                    })}
                 </View>
                 :<></>}
             </View>
@@ -214,7 +270,7 @@ const Ticker = ({ league_ids, color_mode, distinct_id, onOrders }:TickerProps) =
                     </View>
                     <View style={{ flexDirection:'row' }}>
                         {supported_markets.map((sm, i) => {
-                            return renderTrades({ item: sm, index:i, event:data.item, is_live })
+                            return renderTrades({ item: sm, index:i, contest_type: 'team', contest_id:data.item.event_id, is_live })
                         })}
                     </View>
                 </View>
@@ -232,7 +288,10 @@ const Ticker = ({ league_ids, color_mode, distinct_id, onOrders }:TickerProps) =
                 const { width, height } = ev.nativeEvent.layout;
                 setEmbedSize({ width, height });
             }}>
-                <View style={{ flexDirection:'row', flexWrap:'wrap', overflow:'scroll' }}>
+                {loading ?
+                <ActivityIndicator style={{ margin:20, alignSelf:'center' }} size='large' color={Colors.text.h1} />
+                :<></>}
+                <View style={{ flexDirection:'row' }}>
                     {sorted_tournaments.map((e,i) => {
                         return renderTournaments({ item:e, index:i })
                     })}

package/src/types.d.ts

@@ -697,6 +697,8 @@ export interface CampaignProps {
     sponsors?:bigint[],
     prize_description?:string,
     raffle_options?:string[],
+    poll_campaign_ids?:string[],
+    competition_ids?:string[],
     raffle_type?:string,
     ads?:{
         ad_type:string,
@@ -2294,6 +2296,7 @@ export interface OverallOrderAnalyticsProps {
     losses:number,
     draws:number
 }
+export type NewOverallAnalytics = OverallOrderAnalyticsProps&{roi_pct:number, win_pct:number, earnings:number}
 
 export interface OrderAnalyticsProps {
     day:string,