be-components 6.2.6 → 6.2.8

package/src/MarketComponents/components/Parlay/ParlayCard.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { Button, Text, View } from "../../../Components/Themed"
+import type { AthleteProps, LeagueProps, OrderProps, ParlayPositionProps, ParlayProps, PublicPlayerProps, TeamProps } from '../../../types';
+import { FlatList, Image, type ViewStyle } from 'react-native';
+import { MarketComponentHelpers } from '../../api';
+import { useColors } from '../../../constants/useColors';
+import { Icons } from '../../../Components';
+import { AthleteImage, TeamImage } from '../../../Components/Jerseys';
+import OrderGradeBar from '../OrderGradeBar';
+import moment from 'moment-mini';
+import { ParlayHelpers } from './api';
+
+type ParlayCardProps = {
+    parlay:ParlayProps,
+    float?:boolean,
+    card_style?:ViewStyle,
+    header_style?:ViewStyle,
+    footer_style?:ViewStyle,
+    players:PublicPlayerProps[],
+    leagues:LeagueProps[],
+    teams:TeamProps[],
+    athletes:AthleteProps[],
+    parlay_positions:ParlayPositionProps[],
+    orders:OrderProps[]
+}
+
+const ParlayCard = ({ float, card_style, header_style, footer_style, teams, athletes, leagues, players, parlay, orders }:ParlayCardProps) => {
+    const Colors = useColors();
+    const parlay_owner = players.find(p => p.player_id == parlay.player_id);
+
+    const available = ParlayHelpers.calcAvailable(parlay);
+
+
+    const renderLegs = (data:{ item:OrderProps, index:number }) => {
+        const athlete = athletes.find(a => a.athlete_id == data.item.side_id);
+        const team = teams.find(t => t.team_id == data.item.side_id);
+        let league = leagues.find(l => l.league_id == team?.league_id);
+        if(data.item.side_type == 'athlete'){ league = leagues.find(l => l.league_id == athlete?.league_id) }
+        return (
+            <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                {data.item.side_type == 'team' && team ?
+                <TeamImage
+                    team={team}
+                    league={league}
+                    size={30}
+                />
+                :data.item.side_type == 'athlete' && athlete ?
+                <AthleteImage
+                    athlete={athlete}
+                    league={league}
+                    size={32}
+                />
+                :<></>}
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h2'>{data.item.title}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{(data.item.probability*100).toFixed()}% ({MarketComponentHelpers.getOddsLabel(data.item.odds)})</Text>
+                </View>
+                <OrderGradeBar grade={data.item.grade} view_type='book'/>
+            </View>
+        )
+    }
+
+    return (
+        <View float={float} style={{ ...card_style }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, ...header_style }}>
+                <Icons.ParlayIcon size={28} color={Colors.text.h1}/>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h2'>{parlay.name}</Text>
+                    <Text theme='light' style={{ marginTop:3 }}>Expires on {moment(parlay.expire_datetime).format('ddd hh:mm a')}</Text>
+                </View>
+                <View transparent style={{ alignItems:'flex-end' }}>
+                    <Text theme='h2'>{parlay.open_amt.toFixed(2)} to win {parlay.potential_winnings.toFixed(2)}</Text>
+                    <Text theme='light' style={{ marginTop:3 }}>{(parlay.probability*100).toFixed()}% ({MarketComponentHelpers.getOddsLabel(parlay.odds)})</Text>
+                </View>
+            </View>
+            <View type='body'>
+                <FlatList
+                    data={orders}
+                    renderItem={renderLegs}
+                    keyExtractor={(item) => item.order_id.toString()}
+                />
+            </View>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, ...footer_style }}>
+                {parlay.show_me && parlay_owner ?
+                <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                    <View float style={{ borderRadius:100, padding:2 }}>
+                        <Image
+                            source={{ uri: parlay_owner.profile_pic && parlay_owner.profile_pic != '' ? parlay_owner.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}    
+                            style={{ height:35, width:35, borderRadius:100 }}
+                            resizeMode='cover'
+                        />
+                    </View>
+                    <View transparent style={{ marginLeft:10 }}>
+                        <Text theme='light'>Created By</Text>
+                        <Text theme='h2' style={{ marginTop:2 }}>@{parlay_owner.username}</Text>
+                    </View>
+                </View>
+                :<></>}
+                <View transparent style={{ flex:1 }} />
+                <View transparent style={{ alignItems:'flex-end', marginRight:10 }}>
+                    <Text theme='h2' color={Colors.text.success}>{available.toFixed(2)}</Text>
+                    <Text style={{ marginTop:3 }} theme='light'>Available</Text>
+                </View>
+                {parlay.offer_side == 'taker' ?
+                <Button
+                    type='success'
+                    style={{ flexDirection:'row', alignItems:'center' }}
+                >
+                    <Icons.BankIcon color={Colors.text.h1} size={14} />
+                    <Text theme='h2' style={{ marginLeft:5 }} color={Colors.text.white}>House It</Text>
+                </Button>
+                :
+                 <Button
+                    type='success'
+                    style={{ flexDirection:'row', alignItems:'center' }}
+                >
+                    <Icons.USDIcon color={Colors.text.h1} size={14} />
+                    <Text theme='h2' style={{ marginLeft:5 }} color={Colors.text.white}>Take It</Text>
+                </Button>
+                }
+                
+            </View>
+        </View>
+    )
+}
+
+export default ParlayCard

package/src/MarketComponents/components/Parlay/api/index.ts

@@ -0,0 +1,11 @@
+import type { ParlayProps } from "../../../../types";
+
+export const ParlayHelpers = {
+    calcAvailable: (parlay:ParlayProps):number => {
+        if(parlay.offer_side == 'taker'){
+            return parlay.potential_winnings - parlay.open_amt
+        } else {
+            return parlay.open_amt
+        }
+    }
+}

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

@@ -27,6 +27,7 @@ type TeamEventMarketProps = {
     league?:LeagueProps,
     competitions?:CompetitionProps[],
     show_id?:string,
+    disabled_markets?:string[],
     hide_liquidity?:boolean,
     float?:boolean,
     hot_markets_direction?:'vertical'|'horizontal'
@@ -56,7 +57,7 @@ type TeamEventMarketProps = {
     onActivate?:(event_id:string, event_type:string) => void
     activate_loading?:boolean
 }
-const TeamEventMarket = ({ event, hide_non_primary, 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, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onViewMarketStats, onView, onViewAdditionalMarkets, onTradeLongPress, onTVSelect, onActivate, onEvent, onShare, onPodcastSelect }:TeamEventMarketProps) => {
+const TeamEventMarket = ({ event, 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, 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<{
@@ -214,6 +215,8 @@ const TeamEventMarket = ({ event, hide_non_primary, flash_markets, league, float
             trade = MarketButtonHelpers.getTradeFromMarket(data.market, event.event_id, 'team', data.item.side, data.item.id_source, side_details.side_id, side_details.reversed_side_id)
         }
         if(!trade){ return <></> }
+        let disabled = false
+        if(disabled_markets && disabled_markets.includes(data.market.market_id)){ disabled = true }
         return (
             <View transparent key={`${event.event_id}_${data.item.side}`} style={{ width:primary_width }}>
                 <View transparent style={{ height:50, margin:2 }}>
@@ -222,7 +225,7 @@ const TeamEventMarket = ({ event, hide_non_primary, flash_markets, league, float
                         market={data.market}
                         trade={trade}
                         order={ba_order}
-                        locked={data.is_locked}
+                        locked={disabled || data.is_locked}
                         show_grades={show_grades}
                         onLongPress={onTradeLongPress}
                         onPress={(order) => {
@@ -282,6 +285,7 @@ const TeamEventMarket = ({ event, hide_non_primary, flash_markets, league, float
                             event_type='team'
                             athlete={athlete}
                             float
+                            disabled_markets={disabled_markets}
                             style={{ flexGrow:1, margin:5 }}
                             direction={hot_markets_direction=='vertical' ? 'horizontal' : 'vertical'}
                             show_grades={show_grades}
@@ -306,6 +310,7 @@ const TeamEventMarket = ({ event, hide_non_primary, flash_markets, league, float
                             event={event}
                             market={market}
                             float
+                            disabled_markets={disabled_markets}
                             style={{ flexGrow:1, margin:5 }}
                             direction={hot_markets_direction=='vertical' ? 'horizontal' : 'vertical'}
                             hide_liquidity={hide_liquidity}

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

@@ -16,6 +16,7 @@ type TeamTournamentMarketProps = {
     hide_stat_banner?:boolean,
     width?:number,
     float?:boolean,
+    disabled_markets?:string[],
     market:MarketProps,
     direction?:'horizontal'|'vertical',
     show_event?:boolean,
@@ -31,7 +32,7 @@ type TeamTournamentMarketProps = {
     onTradeLongPress:(trade:TradeProps) => void
 }
 
-const TeamTournamentMarket = ({ tournament, 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, 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)])
@@ -44,13 +45,15 @@ const TeamTournamentMarket = ({ tournament, float, direction, show_event, hide_l
         if(!trade){
             trade = MarketButtonHelpers.getTradeFromMarket(market, tournament.tournament_id, 'team', data.item.side, data.item.id_source, side_details.side_id, side_details.reversed_side_id);
         }
+        let disabled = false
+        if(disabled_markets && disabled_markets.includes(data.market.market_id)){ disabled = true }
         return (
             <View key={`${tournament.tournament_id}_${team.team_id}_${data.item.side}`} style={{ margin:2, height:50, width:75 }}>
                 <MarketButton
                     side_option={data.item}
                     market={data.market}
                     trade={trade}
-                    locked={is_locked}
+                    locked={is_locked || disabled}
                     show_grades={show_grades}
                     order={ba_order}
                     onLongPress={onTradeLongPress}

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

@@ -23,6 +23,7 @@ type TournamentMarketProps = {
     hide_match_liquidity?:boolean,
     show_grades?:boolean,
     float?:boolean,
+    disabled_markets?:string[],
     hide_participant_liquidity?:boolean,
     activate_loading?:boolean,
     wrap_markets?:boolean,
@@ -44,7 +45,7 @@ type TournamentMarketProps = {
     onOrder:(order:OrderProps) => void
 }
 
-const TournamentMarket = ({ tournament, float, wrap_markets, width, style, market_selector_location, flash_markets, hide_match_liquidity, show_grades, hide_participant_liquidity, league, markets, latest_trades, hide_liquidity, best_available_orders, event_order_stats, match_available_orders, match_latest_trades, match_order_stats, activate_loading, onView, onTradeLongPress, onViewAdditionalMarkets, onViewMarketStats, onFlashSelect, onOrder, onActivate, onShare }:TournamentMarketProps) => {
+const TournamentMarket = ({ tournament, float, disabled_markets, wrap_markets, width, style, market_selector_location, flash_markets, hide_match_liquidity, show_grades, hide_participant_liquidity, league, markets, latest_trades, hide_liquidity, best_available_orders, event_order_stats, match_available_orders, match_latest_trades, match_order_stats, activate_loading, onView, onTradeLongPress, onViewAdditionalMarkets, onViewMarketStats, onFlashSelect, onOrder, onActivate, onShare }:TournamentMarketProps) => {
     const C = useColors();
     const [ search_value, setSearchValue ] = useState<string | undefined>(undefined);
     const [ tournament_data, setTournamentData ] = useState<{
@@ -156,6 +157,7 @@ const TournamentMarket = ({ tournament, float, wrap_markets, width, style, marke
                     match={data.item}
                     league={league}
                     float
+                    disabled_markets={disabled_markets}
                     style={{ flexGrow:1 }}
                     away_athlete={away_athlete}
                     home_athlete={home_athlete}
@@ -193,6 +195,7 @@ const TournamentMarket = ({ tournament, float, wrap_markets, width, style, marke
                     width={wrap_markets ? market_width : undefined}
                     show_grades={show_grades}
                     float
+                    disabled_markets={disabled_markets}
                     hide_liquidity={hide_participant_liquidity ? true : false}
                     tournament={tournament}
                     event_order_stats={team_order_stats}
@@ -220,6 +223,7 @@ const TournamentMarket = ({ tournament, float, wrap_markets, width, style, marke
                     onView={onView}
                     float
                     league={league}
+                    disabled_markets={disabled_markets}
                     style={{ flexGrow:1 }}
                     show_grades={show_grades}
                     hide_liquidity={hide_participant_liquidity ? true : false}

package/src/MarketComponents/index.tsx

@@ -15,6 +15,7 @@ import ExternalPriceComparison from './components/ExternalPriceComparison';
 import OrderGradeBar from './components/OrderGradeBar';
 import MarketManager from './components/MarketManager';
 import CreateMarketForm from './components/CreateMarketForm';
+import ParlayCard from './components/Parlay/ParlayCard';
 
 export default {
     TeamEventMarket,
@@ -24,6 +25,7 @@ export default {
     EventMarket,
     OrderBookCard,
     CreateMarketForm,
+    ParlayCard,
     MarketManager,
     OrderBookChart,
     AthleteTournamentMarket,

package/src/types.d.ts

@@ -2265,6 +2265,8 @@ export interface PositionProps {
     parlay_id?:string; //If the positions is created as the other side of a parlay, then this is the associated parlay id that needs to be reviewed for a win / loss
     status: 'inprogress' | 'closed'; //Current status of the order,
     legacy_id?:string,
+    parlay_id?:string,
+    parlay_position_id?:string,
     resolution_datetime?:any,
     purchased_grade?:number,
     commission:number,
@@ -2325,6 +2327,56 @@ export interface OrderStatsProps {
     last_update_datetime?:string
 }
 
+
+export interface ParlayProps {
+    parlay_id:string,
+    player_id:string,
+    name: string,
+    show_me?:boolean,
+    legs:number,
+    odds:number,
+    offer_side:'maker'|'taker',
+    winning_side?:'maker'|'taker',
+    probability:number,
+    status: 'approved'|'cancelled'|'closed',
+    expire_datetime: any,
+    cancel_type?: 'expired'|'manual',
+    resolution_status: 'inprogress'|'closed',
+    region:string,
+    market_type:'FOR_MONEY'|'FREE',
+    location:{ latitude: number, longitude: number },
+    no_bet?:boolean,
+    no_bet_reason?:string,
+    offer_amt:number,
+    open_amt:number,
+    potential_winnings:number,
+    called_amt:number,
+    commission_pct:number,
+    create_datetime:any,
+    last_update_datetime:any
+}
+
+
+export interface ParlayPositionProps {
+    parlay_position_id:string,
+    parlay_id:string,
+    player_id:string,
+    side: 'maker'|'taker',
+    status: 'inprogress'|'closed',
+    stake: number,
+    odds:number,
+    result_ind?:'win'|'lose'|'draw',
+    probability:number,
+    commission_pct:number,
+    commission:number,
+    net_winnings:number,
+    potential_winnings:number,
+    winnings:number,
+    create_datetime:any,
+    last_update_datetime:any
+}
+
+
 export interface OrderProps {
     order_id:string; //Primary key of the order
     player_id:string; //Id of the player creating the order