be-components 6.7.7 → 6.7.9

package/src/MarketComponents/api/index.ts

@@ -948,5 +948,64 @@ const MarketComponentHelpers = {
             }
     
             return [ o_side_order, trade_side_order ]
-        }
+    },
+    getUniqueDatesFromEvents: (events:EventProps[]):string[] => {
+        const unique_dates = [ ...new Set(events.map(e => moment(e.scheduled_datetime).format('YYYY-MM-DD'))) ].sort((a,b) => moment(a).unix() - moment(b).unix())
+        return unique_dates.sort((a,b) => moment(a).unix() - moment(b).unix())
+    },
+    getClosestDay: (schedule_range:string[]):string => {
+        let closest:any|undefined;
+        let exact_day = schedule_range.find(d => moment(d).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD'))
+        if(exact_day){ return moment(exact_day).format('YYYY-MM-DD') }
+        schedule_range.map(d => {
+            if(!closest){ closest = moment(d) }
+            if(moment(d).isBefore(moment())){ return } //Day is in the past
+            let new_range = moment(d).diff(moment(), 'days')
+            let closest_range = closest.diff(moment(), 'days')
+            if(Math.abs(new_range) < Math.abs(closest_range)){ closest = moment(d) }
+        })
+        return closest.format('YYYY-MM-DD')
+    },
+    getUniqueTimesFromEvents: (events:EventProps[]) => {
+        const unique_times = [ ...new Set(events.map(e => moment(e.scheduled_datetime).format('h:mm a'))) ]
+        return unique_times.sort((a,b) => moment(a, 'h:mm a').unix() - moment(b, 'h:mm a').unix())
+    },
+    getUniqueDivisions: (events:EventProps[]):string[] => {
+        let away_divisions = events.map(e => e.away?.division ?? '')
+        let home_divisions = events.map(e => e.home?.division ?? '')
+        let divisions = away_divisions.concat(home_divisions)
+        let options = [ ...new Set(divisions.map(d => d)) ].sort((a,b) => a > b ? 1 : -1)
+        let ranks = events.find(e => e.away?.rank || e.home?.rank)
+        if(ranks){ options = ['Top25'].concat(options) }
+        return options
+    },
+    getUniqueSubDivisions: (events:EventProps[]):string[] => {    
+        let away_divisions = events.map(e => e.away?.sub_division ?? '')
+        let home_divisions = events.map(e => e.home?.sub_division ?? '')
+        return [ ...new Set(away_divisions.concat(home_divisions).map(d => d)) ].sort((a,b) => a > b ? 1 : -1)
+    },
+    getFinalizedStatuses:() => {
+        return [
+            'complete',
+            'closed',
+            'suspended',
+            'cancelled',
+            'canceled',
+            'not_necessary'
+        ]
+    },
+    FINALIZED_STATUSES: [
+        'closed',
+        'complete',
+        'cancelled',
+        'unnecessary',
+        'canceled',
+        'postponed',
+        'suspended'
+    ],
+    IN_PROGRESS_STATUSES: [
+        'inprogress',
+        'halftime',
+        'intermission'
+    ]
 }

package/src/MarketComponents/components/LeagueSchedule.tsx

@@ -0,0 +1,161 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Text, View } from '../../../src/Components/Themed';
+import type { EventProps, LeagueProps, TournamentProps } from '../../../src/types';
+import moment from 'moment-mini';
+import { MarketComponentApi, MarketComponentHelpers } from '../../../src/MarketComponents/api';
+import { FlatList } from 'react-native';
+import { useColors } from '../../../src/constants/useColors';
+import { Icons } from '../../../src/Components';
+import { TeamImage } from '../../../src/Components/Jerseys';
+
+type LeagueScheduleProps = {
+    league:LeagueProps,
+    active_event?:string,
+    onSelectEvent:(event:EventProps) => void
+}
+
+const LeagueSchedule = ({ league, active_event, onSelectEvent }:LeagueScheduleProps) => {
+    const Colors = useColors();
+    const [ date_data, setDateData ] = useState<{
+        active_date?:string,
+        unique_dates:string[],
+        selected_time?:string
+    }>({
+        unique_dates:[]
+    })
+    const { active_date, unique_dates } = date_data;
+    const [ league_data, setLeagueData ] = useState<{
+        loading:boolean,
+        events:EventProps[],
+        tournaments:TournamentProps[]
+    }>({
+        loading:false,
+        events:[],
+        tournaments: []
+    });
+    const {events} = league_data;
+    const dateRef = useRef<any>(null);
+
+    useEffect(() => {
+        if(!league){ return }
+        let today = moment().format('YYYY-MM-DD')
+        getDataFromServer(today)
+    },[league]);
+
+    const getDataFromServer = async(date:string) => {
+        setLeagueData({ ...league_data, loading:true });
+        //Get timezone
+        const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        console.log(league.league_id)
+        const { day, days, events } = await MarketComponentApi.getEventsByDate(league.league_id, date, timezone);
+        let unique_times = MarketComponentHelpers.getUniqueTimesFromEvents(events)
+        setDateData({
+            unique_dates: days,
+            active_date: day,
+            selected_time: unique_times[0]
+        })
+        setLeagueData({ 
+            ...league_data,
+            loading:false,
+            events
+        });
+        let active_date_index = days.findIndex(d => d === day);
+        if(active_date_index > -1){
+            setTimeout(() => {
+                dateRef.current?.scrollToIndex({ animated: true, index: active_date_index });
+            }, 250);      
+        }
+
+    }
+
+    const date_events = useMemo(() => events.filter(e => moment(e.scheduled_datetime).format('YYYY-MM-DD') == active_date),[events.length, active_date, league?.league_id]);
+    //let filtered_events = [ ...date_events ]
+    
+    //const unique_times = useMemo(() => MarketComponentHelpers.getUniqueTimesFromEvents(date_events),[date_events[0]?.event_id])
+    //const unique_divisions = useMemo(() => MarketComponentHelpers.getUniqueDivisions(date_events),[date_events.length])
+    //const unique_sub_divisions = useMemo(() => MarketComponentHelpers.getUniqueSubDivisions(filtered_events), [filtered_events.length])
+    //const league_tourneys = tournaments.filter(t => t.league_id == league.league_id).sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())
+
+    const renderDates = useCallback((data: { item:string, index:number }) => {
+        const formatted_date = moment(data.item, 'YYYY-MM-DD');
+        const selected = data.item == active_date ? true : false
+        
+        return (
+            <Button 
+                style={{ width:65, padding:5, borderRadius:22, alignItems:'center', margin:5 }} 
+                transparent
+                onPress={() => getDataFromServer(data.item)}
+                >
+                <Text theme={selected?'h1':'light'} size={14}>{formatted_date.format('ddd')}</Text>
+                <Text theme={selected?'h1':'light'} size={12} textAlign="center">{formatted_date.format('MMM DD')}</Text>
+            </Button>
+        )
+    },[active_date, league?.league_id]);
+
+    const renderEvents = (data:{ item: EventProps, index:number }) => {
+        const selected = active_event == data.item.event_id ? true : false
+        if(!data.item.away || !data.item.home){ return <></> }
+        return (
+            <Button transparent style={{ padding:10, borderRadius:0, borderWidth:1, borderColor:selected ? Colors.text.success : Colors.borders.light }}
+                onPress={() => onSelectEvent(data.item)}
+            >
+                <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                    <View style={{ flexDirection:'row', alignItems:'center' }}>
+                        <View nativeID='away'>
+                            <TeamImage 
+                                team={data.item.away}
+                                size={14}
+                                league={league}
+                            />
+                        </View>
+                        <Text theme='h2' color={selected?Colors.text.success:Colors.text.h1}> VS </Text>
+                        <View nativeID='home'>
+                            <TeamImage 
+                                team={data.item.home}
+                                size={14}
+                                league={league}
+                            />
+                        </View>
+                    </View>
+                    <View style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                        <Text theme='h2' color={selected?Colors.text.success:Colors.text.h1}>{data.item.event_title}</Text>
+                        <Text theme='light' color={selected?Colors.text.success:Colors.text.h1} size={10} style={{ marginTop:3 }}>{['scheduled','created'].includes(data.item.time_detail ?? '') ? moment(data.item.scheduled_datetime).format('MM/DD/YYYY hh:mm a'):data.item.time_detail}</Text>
+                    </View>
+                    <Icons.ChevronIcon color={selected?Colors.text.success:Colors.text.h1} size={12} direction='right'/>
+                </View>
+            </Button>
+        )
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View transparent>
+                <FlatList
+                    key={`${league.league_id}_dates_list`}
+                    ref={dateRef}
+                    data={unique_dates}
+                    extraData={[league_data.loading, league.league_id]}
+                    renderItem={renderDates}
+                    horizontal
+                    //estimatedItemSize={unique_dates.length ?? 5}
+                    windowSize={2}
+                    initialNumToRender={6}
+                    maxToRenderPerBatch={6}
+                    getItemLayout={(_, index) => ({length: 75, offset: 75 * index, index})}
+                    keyExtractor={item => `${league.league_id}_dates_${item}`}
+                />
+            </View>
+            <View type='body' style={{ flex:1 }}>
+                <FlatList
+                    data={date_events.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
+                    renderItem={renderEvents}
+                    key={'date_events'}
+                    extraData={[league.league_id]}
+                    keyExtractor={(item) => item.event_id.toString()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default LeagueSchedule

package/src/MarketComponents/components/OrderBookChart.tsx

@@ -39,7 +39,10 @@ const OrderBookChart = ({ order_book, market, active_var_1, onSelectVar1, away_l
                 return undefined
             })
         }
-
+        let o_side_width = width * (1 - (o_side_stat?.probability ?? 1))
+        let trade_side_width = width * (1 - (trade_side_stat?.probability ?? 1))
+        //if(o_side_width > MAX_WIDTH){ o_side_width = MAX_WIDTH }
+        //if(trade_side_width > MAX_WIDTH){ trade_side_width = MAX_WIDTH }
         return (
             <View float>
                 <Button 
@@ -50,34 +53,30 @@ const OrderBookChart = ({ order_book, market, active_var_1, onSelectVar1, away_l
                     :
                     <></>
                     }
-                    <View transparent style={{flexGrow:1, flexDirection:'row', alignItems:'center', justifyContent:'space-between'}} onLayout={(event) => {
+                    <View transparent style={{flex:1, flexDirection:'row', alignItems:'center', justifyContent:'space-between'}} onLayout={(event) => {
                         if(Math.abs(event.nativeEvent.layout.width - width) < 20){ return }
                         return setWidth(event.nativeEvent.layout.width)
                     }}>
                         {o_side_stat ?
-                        <View transparent style={{ width: width * (1 - o_side_stat.probability), height:25,  backgroundColor:Colors.text.highlight, borderRightWidth:1, borderRightColor:Colors.text.highlight,  borderTopLeftRadius:4, borderBottomLeftRadius:4, flexGrow:0 }}>
-                            {100 > -800 ?
+                        <View transparent style={{ width: o_side_width, height:25,  backgroundColor:Colors.text.highlight, borderRightWidth:1, borderRightColor:Colors.text.highlight,  borderTopLeftRadius:4, borderBottomLeftRadius:4, flexGrow:0 }}>
                             <View transparent style={{ position: 'absolute', paddingRight:5, top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'flex-end' }}>
                                 <Text size={12} textAlign='right' color={Colors.text.white} theme='h2'>{MarketComponentHelpers.getOddsLabel(MarketComponentHelpers.calcAmericanOddsFromProbability(o_side_stat.probability))}</Text>
                             </View>
-                            :<Text size={12} textAlign='right' style={{padding:8}} color={Colors.text.white} theme='h1'>-</Text> }
                         </View>
                         :
                         <View transparent style={{ flexDirection:'row', alignItems:'center', justifyContent:'space-between'}}>
-                            <Text size={12} textAlign='right' style={{padding:5}} theme='description'>No Orders</Text>
+                            <Text size={12} textAlign='right' style={{padding:5}} theme='description'>NA</Text>
                         </View>
                         }
                         {trade_side_stat ?
-                        <View transparent style={{  width: width * (1 -trade_side_stat.probability), height:25, backgroundColor:Colors.text.action, borderLeftWidth:1, borderLeftColor:Colors.text.action, borderTopRightRadius:4, borderBottomRightRadius:4, flexGrow:0 }}>
-                            {100 > -800 ?
+                        <View transparent style={{  width: trade_side_width, height:25, backgroundColor:Colors.text.action, borderLeftWidth:1, borderLeftColor:Colors.text.action, borderTopRightRadius:4, borderBottomRightRadius:4, flexGrow:0 }}>
                             <View transparent style={{ position: 'absolute', paddingLeft:5, top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'flex-start' }}>
                                 <Text size={12} textAlign='right' color={Colors.text.white} theme='h1'>{MarketComponentHelpers.getOddsLabel(MarketComponentHelpers.calcAmericanOddsFromProbability(trade_side_stat.probability))}</Text>
                             </View>
-                            :<Text size={12} textAlign='right' style={{padding:8}} color={Colors.text.white} theme='h2'>-</Text>}
                         </View>
                         :
                         <View transparent style={{ flexDirection:'row', alignItems:'center', justifyContent:'space-between'}}>
-                            <Text size={12} textAlign='left' style={{padding:5}} theme='description'>No Orders</Text>
+                            <Text size={12} textAlign='left' style={{padding:5}} theme='description'>NA</Text>
                         </View>
                         }
                     </View>

package/src/constants/useColors.tsx

@@ -93,7 +93,7 @@ export const useColors = (props?:UseColorProps) => {
         toggle:{
             background: Colors.shades.blackFadedHeavy,
             button: {
-                active: Colors.shades.white,
+                active: Colors.shades.shade600,
                 inactive: 'transparent'
             },
             text: {

package/src/index.tsx

@@ -59,9 +59,11 @@ import RankingsCard from './RankingsCard';
 import GuideView from './Guide';
 import GroupComponent from './Group';
 import CreateGroupWizard from './Group/components/CreateGroupWizard';
+import CreateEngagement from './CreateEngagement';
 export {
   Authenticator,
   Observer,
+  CreateEngagement,
   BEEventApi,
   RankingsCard,
   BELinkApi,

package/src/types.d.ts

@@ -796,7 +796,12 @@ export interface PlayerFollowerStatsProps {
 }
 
 //GROUPS
-
+export interface CreateEngagementStepProps {
+    step_key:string,
+    num:number,
+    title:string,
+    description:string
+}
 export interface GroupProps {
     group_id:string, 
     type: 'direct' | 'multiple', 
@@ -1676,6 +1681,7 @@ export interface CompetitionProps {
     competition_description:string,
     template?:boolean,
     buy_in:number | string,
+    group_id?:string,
     linked_event_id?:string,
     linked_event_ids?:string[],
     linked_event_type?:string,
@@ -2199,7 +2205,7 @@ export interface SquaresCompetitionProps {
     market_type:'FOR_MONEY'|'FREE', potential_winnings:number, last_iteration_scored:number, competition_code?:string, available_squares?:number,
     begin_datetime:any, create_datetime:any, last_update_datetime:any, complete_datetime?:any, event_backup?:EventProps, guaranteed_payout?:number,
     sq_comp_description?:string, image?:{ url:string }, prize_override?:string, prize_image?:{url:string},
-    auth_strategy_id?:string
+    auth_strategy_id?:string, group_id?:string
 }
 
 export interface SquaresExpectedValueProps {