be-components 6.5.1 → 6.5.3

package/src/MarketComponents/components/TeamEventMarket/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Image, FlatList, ActivityIndicator, ScrollView } from 'react-native';
-import type { AthleteProps, BEEventProps, BestAvailableOrderProps, CompanyProps, CompetitionProps, EventOrderStatProps, EventProps, LeagueProps, MarketProps, MarketSideOptionProps, OrderProps, ParlayProps, PodcastProps, PollProps, SquaresCompetitionProps, TradeProps } from '../../../types';
+import type { AthleteProps, BEEventProps, BestAvailableOrderProps, CompanyProps, CompetitionProps, EventOrderStatProps, EventProps, GuideWrapProps, LeagueProps, MarketProps, MarketSideOptionProps, OrderProps, ParlayProps, PodcastProps, PollProps, SquaresCompetitionProps, TradeProps } from '../../../types';
 import { view_styles } from '../../../constants/styles';
 import { Icons, LinearDiagnal } from '../../../Components';
 import {TeamEventMarketHelpers} from './api';
@@ -19,12 +19,14 @@ import { Button, Text, View } from '../../../Components/Themed';
 import { useColors } from '../../../constants/useColors';
 import OrderGradeBar from '../OrderGradeBar';
 import moment from 'moment-mini';
+import { GuideView } from 'be-components';
 
 type TeamEventMarketProps = {
     event:EventProps,
     markets:MarketProps[],
     parlays?:ParlayProps[],
     init_expanded?:boolean,
+    guide?: GuideWrapProps,
     onViewMarketStats?:() => void,
     onSetMarket?:(market_id:string, side_type?:string, side_id?:string) => void,
     league?:LeagueProps,
@@ -61,7 +63,7 @@ type TeamEventMarketProps = {
     onActivate?:(event_id:string, event_type:string) => void
     activate_loading?:boolean
 }
-const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, flash_markets, league, float, style, init_expanded, hot_markets_direction, show_id, hide_liquidity, show_podcasts, activate_loading, competitions, squares_competitions, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onSetMarket, onTeamSelect, onFlashSelect, onParlaySelect, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onViewMarketStats, onView, onViewAdditionalMarkets, onTradeLongPress, onTVSelect, onActivate, onEvent, onShare, onPodcastSelect }:TeamEventMarketProps) => {
+const TeamEventMarket = ({ event, guide, parlays, hide_non_primary, disabled_markets, flash_markets, league, float, style, init_expanded, hot_markets_direction, show_id, hide_liquidity, show_podcasts, activate_loading, competitions, squares_competitions, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onSetMarket, onTeamSelect, onFlashSelect, onParlaySelect, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onViewMarketStats, onView, onViewAdditionalMarkets, onTradeLongPress, onTVSelect, onActivate, onEvent, onShare, onPodcastSelect }:TeamEventMarketProps) => {
     const C = useColors();
     const [ market_width, setMarketWidth ] = useState(180);
     const [ expanded_data, setExpandedData ] = useState<{
@@ -89,14 +91,13 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
 
     const ref = useRef(null)
     const isInViewport = useIsInViewport(ref)
-
     useEffect(() => {
         MarketComponentApi.setEnvironment();
         if(init_expanded){ 
             expandedEvent(); 
         }
         if(event.sponsor_id){ getCompanyFromServer(event.sponsor_id) }
-    },[])
+    },[init_expanded])
 
     useEffect(() => {
         if(isInViewport && onEvent && event.sponsor_id){
@@ -409,6 +410,8 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
     const { non_primary_markets, available } = useMemo(() => TeamEventMarketHelpers.sortNonPrimaryMarkets(TeamEventMarketHelpers.getNonPrimaryMarkets(event, markets), event_order_stats, latest_trades),[JSON.stringify(event_order_stats), JSON.stringify(latest_trades), markets.length, event.last_update_datetime])
     const tv_link = event.info?.broadcast?.link && onTVSelect ? event.info?.broadcast?.link : undefined
     return (
+        <GuideView guide={guide}>
+
         <View ref={ref} float={float} style={[style]}>
             {sponsor ?
             <LinearGradient style={{ marginTop:-1, marginLeft:-1, marginRight:-1, padding:10, flexDirection:'row', alignItems:'center', borderTopRightRadius:8, borderTopLeftRadius:8 }} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={[sponsor.brand_primary ?? C.text.h1, sponsor.brand_secondary ?? C.text.h1]}>
@@ -600,7 +603,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                     const { width } = ev.nativeEvent.layout
                     setMarketWidth(width);
                 }}>
-                    <View transparent style={{ marginTop:5, marginBottom:5 }}>
+                    <View nativeID='primary_market_headers' transparent style={{ marginTop:5, marginBottom:5 }}>
                         <FlatList
                             key={`${event.event_id}_market_headers`}
                             data={primary_markets}
@@ -610,6 +613,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                             renderItem={renderMarketHeaders}
                         />
                     </View>
+                    <View transparent nativeID='event_primary_markets'>
                     <FlatList
                         key={`${event.event_id}_primary_markets`}
                         data={primary_markets.sort((a,b) => parseInt(a.market_id) - parseInt(b.market_id))}
@@ -618,6 +622,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                         renderItem={renderPrimaryMarkets}
                         keyExtractor={(item) => item.market_id.toString()}
                     />
+                    </View>
                 </View>
                 : 
                 <Button 
@@ -668,6 +673,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
             <View type='footer' style={{ padding:10, flexDirection:'row', alignItems:'center', flexWrap:'wrap', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
                 {!hide_liquidity ?
                 <Button 
+                nativeID='team_event_liquidity'
                 style={{ flex:1, flexDirection:'row', minWidth:115, padding:0 }} 
                 type='text'
                 
@@ -688,6 +694,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                 <Button 
                     float
                     type='squares'
+                    nativeID='team_event_squares'
                     style={{ marginRight:3, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22 }}
                     onPress={() => handleSelectSquares()}>
                     <Icons.SquaresIcon size={18} color={C.text.white} />
@@ -709,6 +716,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                 <Button 
                     float
                     type='competition'
+                    nativeID='team_event_competitions'
                     style={{ marginRight:3, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22 }}
                     onPress={() => handleSelectCompetition()}>
                     <Icons.PickEmIcon size={14} color={C.text.white} />
@@ -720,6 +728,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                 {non_primary_markets.length > 0 && !hide_non_primary ?
                 <Button 
                     float
+                    nativeID='team_event_non_primary'
                     style={{ height:35, width:35, justifyContent:'center', borderRadius:100, alignItems:'center' }} 
                     onPress={() => expandedEvent()}
                 >
@@ -727,6 +736,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                 </Button>
                 :available && !expanded && !hide_non_primary ?
                 <Button
+                    nativeID='team_event_non_primary'
                     title='MORE'
                     type='info'
                     style={{ padding:10 }}
@@ -796,7 +806,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                 :<></>}
             </View>
             :<></>}
-            {expanded ?
+            {expanded && !hide_non_primary ?
             <View transparent>
                 <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
                     <View transparent style={{ flexGrow:1 }}>
@@ -849,6 +859,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
             </View>
             :<></>}
         </View>
+        </GuideView>
     )
 }
 

package/src/MarketComponents/components/TeamTournamentMarket/index.tsx

@@ -13,6 +13,7 @@ type TeamTournamentMarketProps = {
     tournament:TournamentProps,
     event_type:'team'|'tournament'|'match',
     team:TeamProps,
+    image_size?:number,
     hide_stat_banner?:boolean,
     width?:number,
     float?:boolean,
@@ -32,7 +33,7 @@ type TeamTournamentMarketProps = {
     onTradeLongPress:(trade:TradeProps) => void
 }
 
-const TeamTournamentMarket = ({ tournament, disabled_markets, float, direction, show_event, hide_liquidity, hide_stat_banner, style, team, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:TeamTournamentMarketProps) => {
+const TeamTournamentMarket = ({ tournament, image_size, disabled_markets, float, direction, show_event, hide_liquidity, hide_stat_banner, style, team, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:TeamTournamentMarketProps) => {
     const C = useColors();
     const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats);
     const is_locked = useMemo(() => MarketComponentHelpers.isTournamentMarketLocked(tournament, market.market_id),[JSON.stringify(tournament.supported_markets)])
@@ -87,7 +88,7 @@ const TeamTournamentMarket = ({ tournament, disabled_markets, float, direction,
                 <View transparent style={{ ...view_styles.section_body, flexDirection:direction == 'horizontal' ? 'row' : 'column', flexGrow:2, padding:0, justifyContent:'center', alignItems:'center' }}>
                     <TeamImage
                         team={team}
-                        size={24}
+                        size={image_size ?? 24}
                     />
                     <View transparent style={{ padding:10, paddingBottom:0 }}>
                         <Text theme='h2' textAlign='center'>{team.market_name} {team.name}</Text>

package/src/RankingsCard/api/index.ts

@@ -0,0 +1,80 @@
+import axios from 'axios';
+import { APIOverrides } from "../../ApiOverrides"
+import type { LeagueProps, TeamProps, TeamRankingProps, TeamRecordProps } from '../../types';
+
+
+let EVENT_SVC_API = ''
+//let AUTH_SVC_API = ''
+//let MK_SVC_API = ''
+//let SOCIAL_SVC_API = ''
+
+export { RankingsApi, RankingsHelpers }
+
+const RankingsApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        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;
+        //SOCIAL_SVC_API = endpoints['SOCIAL_SVC_API'] as string;
+    },
+    getLeagues: async():Promise<LeagueProps[]> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/leagues/all`);
+            return resp.data.leagues
+        } catch (e) {
+            return []
+        }
+    },
+    getStandingsByLeague: async(league_id:string, year:number):Promise<undefined|{ teams:TeamProps[], league:LeagueProps, team_rankings:TeamRankingProps[], team_records:TeamRecordProps[] }> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/teams/standings/league/${league_id}/${year}`);
+            return resp.data
+        } catch (e) {
+            return undefined
+        }
+    },
+    getTeamsByLeagueId:async(league_id:string):Promise<TeamProps[]> => {
+        try {
+            console.log('here')
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/teams/league/${league_id}`);
+            console.log(resp.data)
+            return resp.data.teams
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+    },
+}
+
+
+
+const RankingsHelpers = {
+    getWinPct: (wins:number, losses:number, draws:number) => {
+        const total = wins + losses + draws;
+        if (total === 0) return 0; // avoid divide by zero
+        return (wins + 0.5 * draws) / total;
+    },
+    getRankingTypeDescriptor: (ranking_type:string) => {
+        switch(ranking_type){
+            case 'PRE': return 'Preseason'
+            case 'REG': return 'Regular Season'
+            case 'PST': return 'Post Season'
+            default: return ranking_type
+        }
+    },
+    sortDivisions: (league_id:string, divisions:string[]) => {
+        switch(league_id){
+            case '2':
+                return ['I-A', 'I-AA', 'Division II', 'Division III']
+            default: return divisions.sort((a,b) => a.localeCompare(b))
+        }
+    },
+    getDivisionLabel: (division:string) => {
+        switch(division){
+            case 'I-A': return 'FBS (Division I-A)'
+            case 'I-AA': return 'FCS (Division I-AA)' 
+            default: return division
+        }
+    }
+}

package/src/RankingsCard/index.tsx

@@ -0,0 +1,398 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, View } from "../Components/Themed"
+import { RankingsApi, RankingsHelpers } from './api';
+import type { LeagueProps, TeamProps, TeamRankingProps, TeamRecordProps } from '../types';
+import { ActivityIndicator, FlatList, Image } from 'react-native';
+import moment from 'moment-mini';
+import { useColors } from '../constants/useColors';
+import { Icons } from '../Components';
+import { TeamImage } from '../Components/Jerseys';
+
+type RankingsCardProps = {
+    league_id:string,
+    team_id?:string
+}
+
+type RankingsStateProps = {
+    loading:boolean,
+    ranking_type:string,
+    ranking_types:string[],
+    years:number[],
+    active_division?:string,
+    active_sub_division?:string,
+    year:number,
+    league?:LeagueProps,
+    teams:TeamProps[],
+    sub_type:string,
+    team?:TeamProps,
+    team_ranking?:TeamRankingProps,
+    team_record?:TeamRecordProps,
+    leagues: LeagueProps[],
+    divisions:string[],
+    sub_divisions:string[],
+    team_records:TeamRecordProps[],
+    team_rankings: TeamRankingProps[]
+}
+
+const RankingsCard = ({ league_id, team_id }:RankingsCardProps) => {
+    const Colors = useColors();
+    const [ show_types, setShowTypes ] = useState(false);
+    const [ show_years, setShowYears ] = useState(false);
+    const [ show_sub_divisions, setShowSubDivisions ] = useState(false);
+    const [ rankings_state, setRankingsState ] = useState<RankingsStateProps>({
+        loading:false,
+        teams:[],
+        ranking_type: 'PRE',
+        active_division: '',
+        years: [2025,2024,2023],
+        year: 2025,
+        ranking_types: [],
+        sub_type:'sub_division',
+        leagues: [],
+        team_rankings: [],
+        team_records: [],
+        divisions: [],
+        sub_divisions:[],
+    });
+    const { loading, team, ranking_type, active_sub_division, active_division, years, year, ranking_types, league, sub_type, teams, team_rankings, team_records, divisions } = rankings_state;
+
+    const division_teams = teams.filter(t => t.division == active_division);
+    let available_sub_divisions = [ ...new Set(division_teams.map(t => t.sub_division ?? 'NA')) ].filter(sd => sd && sd != 'NA')
+    let visible_sub_divisions = [ ...available_sub_divisions ];
+    if(active_sub_division){
+        visible_sub_divisions = available_sub_divisions.filter(sd => sd == active_sub_division)
+    }
+
+    useEffect(() => {
+        getRankings(league_id)
+    },[league_id, team_id]);
+
+    const getRankings = async(id:string, local_year?:number) => {
+        RankingsApi.setEnvironment();
+        setRankingsState({ ...rankings_state, loading:true });
+        const api_leagues = await RankingsApi.getLeagues();
+        let api_league = api_leagues.find(l => l.league_id == id);
+        const st = await RankingsApi.getStandingsByLeague(league_id, local_year ?? api_league?.active_year ?? moment().year());
+        if(!st){ return alert('Unable to load standings at this time') }
+        const api_ranking_types = [ ...new Set(st.team_rankings.map(r => r.ranking_type))];
+        const api_ranking_type = st.league.active_season_type ?? 'REG'
+        let api_divisions = [ ...new Set(st.teams.map(t => t.division ?? 'NA')) ].filter(sd => sd && sd != 'NA');
+        let api_active_sub_division:string|undefined = undefined
+        let api_active_division:string|undefined = st.teams.find(t => t.team_id == team_id)?.division
+        if(!api_active_division && api_divisions.length > 2){
+            api_active_division = RankingsHelpers.sortDivisions(id, api_divisions)[0]
+        }
+        let api_sub_divisions = [ ...new Set(st.teams.map(t => t.sub_division ?? 'NA')) ].filter(sd => sd && sd != 'NA')
+        if(team_id){ api_active_sub_division = st.teams.find(T => T.team_id == team_id)?.sub_division }
+        let api_team = st.teams.find(t => t.team_id == team_id)
+        let api_team_record = st.team_records.find(r => r.team_id == team_id && r.record_type == api_ranking_type && r.sub_type == 'overall')
+        let api_team_ranking = st.team_rankings.find(r => r.team_id == team_id && r.ranking_type == api_ranking_type);
+        setRankingsState({
+            ...rankings_state,
+            loading:false,
+            ranking_type: api_ranking_type,
+            league: st.league,
+            team: api_team,
+            active_division: api_active_division,
+            active_sub_division: api_active_sub_division,
+            year: local_year ?? st.league.active_year ?? moment().year(),
+            team_records: st.team_records,
+            ranking_types: api_ranking_types,
+            team_rankings: st.team_rankings,
+            team_ranking: api_team_ranking,
+            team_record: api_team_record,
+            leagues: api_leagues,
+            teams:st.teams,
+            divisions: api_divisions,
+            sub_divisions: api_sub_divisions
+        });
+    }
+
+    const renderSubDivisionOptions = (data:{ item:string, index:number }) => {
+        return (
+            <Button style={{ borderRadius:0, padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, flexDirection:'row', alignItems:'center' }} onPress={() => {
+                setRankingsState({ ...rankings_state, active_sub_division: data.item });
+                setShowSubDivisions(false);
+            }}>
+                <Text theme='h2' textAlign='center'>{RankingsHelpers.getRankingTypeDescriptor(data.item)}</Text>
+            </Button>
+        )
+    }
+
+    const renderTypes = (data:{ item:string, index:number }) => {
+        return (
+            <Button style={{ borderRadius:0, padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, flexDirection:'row', alignItems:'center' }} onPress={() => {
+                setRankingsState({ ...rankings_state, ranking_type: data.item });
+                setShowTypes(false)
+            }}>
+                <Text theme='h2' textAlign='center'>{RankingsHelpers.getRankingTypeDescriptor(data.item)}</Text>
+            </Button>
+        )
+    }
+
+    const renderYears = (data:{ item:number, index:number }) => {
+        return (
+            <Button style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, flexDirection:'row', alignItems:'center' }} onPress={() => {
+                getRankings(league_id, data.item)
+                setShowYears(false)
+            }}>
+                <Text theme='h1'>{data.item.toString()}</Text>
+            </Button>
+        )
+    }
+
+    const renderDivisionOptions = (data:{ item:string, index:number }) => {
+        const active = active_division == data.item ? true : false
+        return (
+            <Button transparent style={{ borderRadius:0, flex:1, padding:10, alignItems:'center', justifyContent:'flex-end', borderBottomWidth:1, borderColor:active?Colors.text.success:Colors.borders.light }} onPress={() => setRankingsState({ ...rankings_state, active_division: data.item, active_sub_division: undefined })}>
+                <Text textAlign='center' color={active ? Colors.text.success: Colors.text.h1} theme={active ? 'h2' : 'description'}>{RankingsHelpers.getDivisionLabel(data.item)}</Text>
+            </Button>
+        )
+    }
+
+    const renderTeams = (data: { item:TeamRankingProps, index:number }) => {
+        const team = teams.find(t => t.team_id == data.item.team_id)
+        if(!team){ return <></> }
+        const team_record = team_records.find(tr => tr.record_type == ranking_type && tr.sub_type == 'overall' && tr.team_id == team.team_id);
+        const win_pct = RankingsHelpers.getWinPct(team_record?.wins ?? 0, team_record?.losses ?? 0, team_record?.draws ?? 0);
+        const active = data.item.team_id == team_id ? true : false
+        return (
+            <View type='row' style={{ borderBottomWidth:1, borderColor:Colors.borders.light, padding:5 }}>
+                <View transparent style={{ flex:1, padding:10 }}>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                        <TeamImage
+                            team={team}
+                            padding={2}
+                            size={14}
+                        />
+                        {team.rank ?
+                        <Text theme='h2' color={Colors.text.action} style={{ marginLeft:5 }}>{team.rank}</Text>
+                        :<></>}
+                        <Text theme='h1' size={12} style={{ marginLeft:5 }} color={active?Colors.text.success : Colors.text.h1}>{team.market_name} {team.name}</Text>
+                    </View>
+                </View>
+                {team_record ?
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme='h2' textAlign='center'>{team_record.wins}</Text>
+                    </View>
+                    <View style={{ flex:1 }}>
+                        <Text theme='h2' textAlign='center'>{team_record.losses}</Text>
+                    </View>
+                    <View style={{ flex:1 }}>
+                        <Text theme='h2' textAlign='center'>{team_record.draws}</Text>
+                    </View>
+                    <View style={{ flex:1 }}>
+                        <Text theme='h2' textAlign='center'>{(win_pct*100).toFixed(2)}%</Text>
+                    </View>
+                </View>
+                :<></>}
+            </View>
+        )
+    }
+
+    const renderSubDivisions = (data:{ item:string, index:number, teams:TeamProps[] }) => {
+        const sub_division_teams = data.teams.filter(t => t.sub_division == data.item);
+        const sub_division_rankings = team_rankings.filter(tr => sub_division_teams.map(dt => dt.team_id).includes(tr.team_id) && tr.ranking_type == ranking_type && tr.sub_type == sub_type);
+        if(sub_division_teams.length == 0){ return <></> }
+        if(sub_division_rankings.length == 0){ return <></> }
+        return (
+            <View>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center' }}>
+                    <View transparent style={{ flex:1, padding:10 }}>
+                        <Text theme='h1'>{data.item}</Text>
+                    </View>
+                    <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h2' textAlign='center'>W</Text>
+                        </View>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h2' textAlign='center'>L</Text>
+                        </View>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h2' textAlign='center'>D</Text>
+                        </View>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h2' textAlign='center'>PCT</Text>
+                        </View>
+                    </View>
+                </View>
+                <FlatList
+                    data={sub_division_rankings.sort((a,b) => a.rank - b.rank)}
+                    key={'sub_division_teams'}
+                    keyExtractor={item => item.team_ranking_id.toString()}
+                    renderItem={renderTeams}
+                />
+            </View>
+        )
+    }
+
+    const renderDivisions = (data:{ item:string, index:number }) => {
+        let division_teams = teams.filter(t => t.division == data.item);
+        let division_sub_divisions = [ ...new Set(division_teams.map(t => t.sub_division ?? 'NA')) ].filter(sd => sd && sd != 'NA')
+        return (
+            <View>
+                <View type='header' style={{ padding:10 }}>
+                    <Text>{data.item}</Text>
+                </View>
+                {division_sub_divisions.length > 0 ?
+                <FlatList
+                    key={'sub_division_list'}
+                    keyExtractor={item => item}
+                    renderItem={({ item, index }) => renderSubDivisions({ item, index, teams:division_teams })}
+                    data={division_sub_divisions}
+                />
+                :
+                <></>
+                }
+            </View>
+        )
+    }
+    if(!league){ return <></> }
+    return (
+        <View>
+            {team ?
+            <View style={{ flexDirection:'row' }}>
+                <TeamImage
+                    team={team}
+                    size={20}
+                />
+            </View>
+            :<></>}
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <Image
+                    source={{ uri: league.league_image }}
+                    style={{ height:35, width:35 }}
+                    resizeMode='contain'
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{league.league_name} {RankingsHelpers.getRankingTypeDescriptor(ranking_type)} {league.active_year ?? moment().year()}</Text>
+                </View>
+                <Button float style={{ padding:10, flexDirection:'row', alignItems:'center' }} onPress={() => setShowYears(true)}>
+                    <Text theme='h2' style={{ marginRight:10 }}>{year}</Text>
+                    <Icons.ChevronIcon direction='down' size={6} color={Colors.text.h1} />
+                </Button>
+                {active_division ?
+                <Button float style={{ padding:10, flexDirection:'row', alignItems:'center' }} onPress={() => setShowSubDivisions(true)}>
+                    <Text theme='h2' style={{ marginRight:10 }}>{active_sub_division ?? 'All Conferences'}</Text>
+                    <Icons.ChevronIcon direction='down' size={6} color={Colors.text.h1} />
+                </Button>
+                :
+                <Button float style={{ padding:10, flexDirection:'row', alignItems:'center' }} onPress={() => setShowTypes(true)}>
+                    <Text theme='h2' style={{ marginRight:10 }}>{RankingsHelpers.getRankingTypeDescriptor(ranking_type)}</Text>
+                    <Icons.ChevronIcon direction='down' size={6} color={Colors.text.h1} />
+                </Button>
+                }
+            </View>
+            <View type='body'>
+                {active_division ?
+                <View style={{ flexDirection:'row'  }}>
+                    {RankingsHelpers.sortDivisions(league_id,divisions).map((d,i) => {
+                        return renderDivisionOptions({ item:d, index:i })
+                    })}
+                </View>
+                :<></>}
+                {active_division ?
+                <FlatList
+                    data={visible_sub_divisions.sort((a,b) => a.localeCompare(b))}
+                    renderItem={({ item, index }) => renderSubDivisions({ item, index, teams:division_teams })}
+                    key={'division_list'}
+                    keyExtractor={item => item}
+                />
+                :
+                <FlatList
+                    data={divisions.sort((a,b) => a.localeCompare(b))}
+                    renderItem={renderDivisions}
+                    key={'division_list'}
+                    keyExtractor={item => item}
+                />
+                }
+            </View>
+            {show_types ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, paddingTop:20, alignItems:'center' }}>
+                <View float style={{ height:400, width:400 }}>
+                    <View type='header' style={{ padding:10, flexDirection:'row', borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Select Type</Text>
+                        </View>
+                    </View>
+                    <View transparent type='body' style={{ flex:1 }}>
+                        <FlatList
+                            data={ranking_types}
+                            key={'ranking_types'}
+                            keyExtractor={item => item}
+                            renderItem={renderTypes}
+                        />
+                    </View>
+                    <View type='footer' style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10 }}>
+                        <Button
+                            title='CLOSE'
+                            type='close'
+                            onPress={() => setShowTypes(false)}
+                        />
+                    </View>
+                </View>
+            </View>
+            :<></>}
+            {show_sub_divisions ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, paddingTop:20, alignItems:'center' }}>
+                <View float style={{ height:400, width:400 }}>
+                    <View type='header' style={{ padding:10, flexDirection:'row', borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Select Conference</Text>
+                        </View>
+                    </View>
+                    <View transparent type='body' style={{ flex:1 }}>
+                        <FlatList
+                            data={available_sub_divisions}
+                            key={'sub_division_options'}
+                            keyExtractor={item => item}
+                            renderItem={renderSubDivisionOptions}
+                        />
+                    </View>
+                    <View type='footer' style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10 }}>
+                        <Button
+                            title='CLOSE'
+                            type='close'
+                            onPress={() => setShowTypes(false)}
+                        />
+                    </View>
+                </View>
+            </View>
+            :<></>}
+            {show_years ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, paddingTop:20, alignItems:'center' }}>
+                <View float style={{ height:400, width:400 }}>
+                    <View type='header' style={{ padding:10, flexDirection:'row', borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Select Year</Text>
+                        </View>
+                    </View>
+                    <View transparent type='body' style={{ flex:1 }}>
+                        <FlatList
+                            data={years}
+                            key={'years_list'}
+                            keyExtractor={item => item.toString()}
+                            renderItem={renderYears}
+                        />
+                    </View>
+                    <View type='footer' style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10 }}>
+                        <Button
+                            title='CLOSE'
+                            type='close'
+                            onPress={() => setShowYears(false)}
+                        />
+                    </View>
+                </View>
+            </View>
+            :<></>}
+            {loading ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, paddingTop:20, alignItems:'center' }}>
+                <ActivityIndicator style={{ marginTop:50 }} size={30} color={Colors.text.h1} />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default RankingsCard

package/src/index.tsx

@@ -54,14 +54,17 @@ import BEClarity from './Clarity';
 import BetMatch from './BetMatch';
 import Premium from './Premium';
 import ManageFilter from './BetMatch/components/ManageFilter';
-
-
+import ClaritySmartEvents from './Clarity/SmartEvents';
+import RankingsCard from './RankingsCard';
+import GuideView from './Guide';
 
 export {
   Authenticator,
   Observer,
   BEEventApi,
+  RankingsCard,
   BELinkApi,
+  GuideView,
   BetMatch,
   ManageFilter,
   Ticker,
@@ -80,6 +83,7 @@ export {
   NotificationModule,
   FlashHolder,
   useNotifications,
+  ClaritySmartEvents,
   ProfileManager,
   CompetitionManager,
   Components,