be-components 1.2.7 → 1.2.8

package/src/Components/Dropdown.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+import { View, TouchableOpacity, FlatList } from 'react-native';
+import Text from './Text';
+import Colors from '../constants/colors';
+import Icons from './Icons';
+
+type DropdownProps = {
+    selected_value:string,
+    invalid?: boolean,
+    errors?:string[],
+    dropdown_options: { value:string, eligible_options: string[] }[]
+    read_only?:boolean
+    onOptionSelect: (option:string) => void
+}
+const DropDown = ({ invalid, errors, read_only, selected_value, dropdown_options, onOptionSelect }:DropdownProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+    let options:string[] = []
+
+    dropdown_options.map(o => {
+        options = options.concat(o.eligible_options)
+    })
+
+    const handleOptionSelect = (option:string) => {
+        setExpanded(false);
+        onOptionSelect(option)
+    }
+
+
+    const renderErrors = (data : { item:string, index:number }) => {
+        return (
+            <Text style={{ margin:4 }} size={12} color={Colors.utility.error} weight='regular'>{data.item}</Text>
+        )
+    }
+
+
+    const renderOptions = (data: { item: string, index:number }) => {
+        const last_item = data.index == options.length - 1 ? true : false
+        return (
+            <TouchableOpacity style={{ paddingTop:10, paddingBottom:last_item?0:10, borderBottomWidth:last_item?0:1, borderColor:Colors.shades.shade600 }} onPress={() => handleOptionSelect(data.item)}>
+                <Text size={14} weight='regular' color={Colors.brand.midnight}>{data.item}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+    return (
+        <View>
+            <View style={{ borderRadius:8, borderWidth:1, borderColor:invalid?Colors.utility.error:Colors.shades.shade100, backgroundColor:Colors.shades.white }}>
+                <TouchableOpacity disabled={read_only} style={{ flexDirection:'row', alignItems:'center', padding:10 }} onPress={() => setExpanded(!expanded)}>
+                    <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight="semibold">{ selected_value ?? 'Select Value'}</Text>
+                    {!read_only ?
+                    <Icons.ChevronIcon
+                        direction={expanded?'up':'down'}
+                        color={Colors.brand.midnight}
+                        size={8}
+                    />
+                    :<></>}
+                </TouchableOpacity>
+                {expanded ?
+                <View style={{padding:10 }}>
+                    <FlatList
+                        data={options}
+                        renderItem={renderOptions}
+                    />
+                </View>
+                :<></>}
+            </View>
+            {invalid && errors && errors.length > 0 ?
+            <FlatList
+                data={errors}
+                renderItem={renderErrors}
+                keyExtractor={(item) => item}
+            />
+            :<></>}
+        </View>
+    )
+}
+
+export default DropDown

package/src/Components/Icons.tsx

@@ -46,7 +46,7 @@ const UnbidSquare = ({ color, secondary_color }:IconProps) => {
         </mask>
         <g mask="url(#mask0_720_125)">
         <rect y="0.5" width="50" height="50" rx="5.67771" fill={color??Colors.brand.midnight}/>
-        <rect x="-50.6396" y="53.9214" width="72.8366" height="71.825" transform="rotate(-45 -50.6396 53.9214)" fill={secondary_color??Colors.brand.cyan}/>
+        <rect x="-50.6396" y="53.9214" width="72.8366" height="71.825" transform="rotate(-45 -50.6396 53.9214)" fill={secondary_color}/>
         <rect x="0.300451" y="0.800451" width="49.3991" height="49.3991" rx="5.37725" stroke="#FCFCFC" stroke-width="0.600902"/>
         <rect x="-2.30176" y="0.5" width="52.9414" height="50.256" fill={secondary_color??Colors.brand.cyan} fill-opacity="0.4"/>
         <path d="M14.0734 29V18.4516H18.1562C19.3411 18.4516 20.2213 18.7049 20.7965 19.2115C21.3718 19.7095 21.6595 20.4007 21.6595 21.2851C21.6595 21.7574 21.5478 22.1781 21.3246 22.5473C21.1099 22.908 20.8266 23.1913 20.4746 23.3974C20.8695 23.5605 21.2259 23.8568 21.5436 24.2861C21.8613 24.7068 22.0201 25.2306 22.0201 25.8574C22.0201 26.7761 21.7239 27.5317 21.1314 28.1242C20.5389 28.7081 19.7189 29 18.6714 29H14.0734ZM16.2114 27.1711H18.3623C18.7401 27.1711 19.0707 27.0595 19.354 26.8362C19.646 26.613 19.7919 26.2867 19.7919 25.8574C19.7919 25.4624 19.6631 25.1361 19.4055 24.8785C19.1565 24.6124 18.7916 24.4793 18.3108 24.4793H16.2114V27.1711ZM16.2114 22.6761H17.9888C18.4267 22.6761 18.7744 22.5731 19.032 22.367C19.2982 22.1609 19.4313 21.8561 19.4313 21.4526C19.4313 20.6798 18.9633 20.2934 18.0274 20.2934H16.2114V22.6761ZM23.5399 29V18.4516H25.6779V29H23.5399ZM27.7 29V18.4516H30.9972C32.6372 18.4516 33.8865 18.911 34.7451 19.8297C35.6038 20.7399 36.0331 22.0364 36.0331 23.7194C36.0331 24.2603 35.9859 24.7669 35.8914 25.2392C35.8055 25.7114 35.6424 26.1837 35.402 26.6559C35.1702 27.1282 34.8696 27.5317 34.5004 27.8666C34.1398 28.2015 33.659 28.4762 33.0579 28.6909C32.4569 28.897 31.7699 29 30.9972 29H27.7ZM29.838 27.1969H30.7911C31.7957 27.1969 32.547 26.9221 33.045 26.3726C33.543 25.823 33.792 24.9386 33.792 23.7194C33.792 22.4658 33.5344 21.5771 33.0193 21.0533C32.5041 20.5295 31.7699 20.2676 30.8169 20.2676H29.838V27.1969Z" fill="white"/>

package/src/Markets/api/index.ts

@@ -0,0 +1,18 @@
+import type { MarketProps } from "../../types"
+
+
+export { MarketHelpers }
+
+const MarketHelpers = {
+    getVar1Label: (market:MarketProps, var_1:number) => {
+        if(market.type != 'Spread'){ return `${var_1}` }
+        if(var_1 < 0){ return `${var_1}` }
+        return `+${var_1}`
+    },
+    getOddsLabel: (odds:number, decimals?:number) => {
+        let new_odds = odds.toFixed()
+        if(decimals){ new_odds = odds.toFixed(decimals) }
+        if(odds < 0){ return `${new_odds}` }
+        return `+${new_odds}`
+    }
+}

package/src/Markets/components/MarketButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TouchableOpacity } from "react-native"
+import Text from '../../Components/Text';
+import type { BestAvailableOrderProps, MarketProps, MarketSideOptionProps, TradeProps } from '../../types';
+import { MarketHelpers } from '../api';
+
+type MarketButtonProps = {
+    market:MarketProps,
+    side_option:MarketSideOptionProps,
+    trade?:TradeProps,
+    order?:BestAvailableOrderProps
+}
+const MarketCard = ({ market, trade }:MarketButtonProps) => {
+    
+    return (
+        <TouchableOpacity style={{ padding:5 }}>
+            {trade && market.var_1_required ?
+            <Text theme='body'>{MarketHelpers.getVar1Label(market, trade.var_1)}</Text>
+            :<></>}
+        </TouchableOpacity>
+    )
+}
+
+export default MarketCard

package/src/Squares/api/index.ts

@@ -1,6 +1,6 @@
 import axios from "axios"
 import { APIOverrides } from "../../ApiOverrides"
-import type { BuySquaresResponseProps, EventProps, LeagueProps, OfferResponseProps, PlayerSquareProps, PublicPlayerProps, SquareOfferProps, SquareProps, SquareResultProps, SquaresCompetitionProps, SquaresPayoutProps, SquaresTypeProps, SquareValueProps } from "../../types"
+import type { BuySquaresResponseProps, EventProps, LeagueProps, OfferResponseProps, PlayerSquareProps, PublicPlayerProps, SquareOfferProps, SquarePrizeProps, SquareProps, SquareResultProps, SquaresCompetitionProps, SquaresPayoutProps, SquaresTypeProps, SquareValueProps } from "../../types"
 import moment from "moment-mini"
 
 let AUTH_SVC_API = ''
@@ -18,7 +18,7 @@ const SquaresApi = {
         //MK_SVC_API = endpoints['MK_SVC_API'] as string;
         AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
     },
-    getSquareCompetitionById: async(sq_comp_id:string):Promise<{ squares_competition:SquaresCompetitionProps, square_results:SquareResultProps[], squares:SquareProps[], player_squares:PlayerSquareProps[], square_offers:SquareOfferProps[], squares_type:SquaresTypeProps, squares_payout_type: SquaresPayoutProps, player_square_history:PlayerSquareProps[] }> => {
+    getSquareCompetitionById: async(sq_comp_id:string):Promise<{ squares_competition:SquaresCompetitionProps, square_results:SquareResultProps[], squares:SquareProps[], player_squares:PlayerSquareProps[], square_offers:SquareOfferProps[], squares_type:SquaresTypeProps, squares_payout_type: SquaresPayoutProps, player_square_history:PlayerSquareProps[], square_prizes:SquarePrizeProps[] }> => {
         const resp = await axios.get(`${TP_SVC_API}/tp/squares/comp/details/${sq_comp_id}`)
         return resp.data
     },

package/src/Squares/components/PrizeCard.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity, FlatList, Image } from 'react-native';
+import { view_styles } from '../../constants/styles';
+import { Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import type { EventProps, PublicPlayerProps, SquarePrizeProps, SquareProps } from '../../types';
+
+type PrizeCardProps = {
+    square_prizes:SquarePrizeProps[]
+    event?:EventProps,
+    squares: SquareProps[],
+    players:PublicPlayerProps[]
+}
+
+const PrizeCard = ({ event, square_prizes, players, squares }:PrizeCardProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+
+    const renderPrizes = (data: { item:SquarePrizeProps, index:number }) => {
+        const square = squares.find(s => s.sq_square_id == data.item.sq_square_id)
+        const winner = players.find(p => p.player_id == data.item.winner_id)
+        if(!square){ return <></> }
+        return (
+            <View style={{ ...view_styles.body_row, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                <Image
+                    source={{ uri: data.item.image.url }}
+                    style={{ height: 40, width:40, borderRadius:4 }}
+                    resizeMode='cover'
+                />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header_2'>{data.item.description}</Text>
+                    {winner ?
+                    <Text style={{marginTop:3}} size={12} color={Colors.incentive.gold} weight={'bold'}>Winner: @{winner.username}</Text>
+                    :<></>}
+                </View>
+                {data.item.status == 'active' ?
+                <View style={{ padding:10 }}>
+                    <Icons.UnbidSquare color={event?.home?.primary_color} secondary_color={event?.away?.primary_color} size={20} />
+                </View>
+                :data.item.status == 'awarded'?
+                <View style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                    {winner ?
+                    <Image
+                        source={{ uri: winner.profile_pic && winner.profile_pic != '' ? winner.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                        style={{ height:40, width:40, borderRadius:4, marginRight:10 }}
+                        resizeMode='cover'
+                    />
+                    :<></>}
+                    <View>
+                        <Icons.UnbidSquare color={Colors.shades.shade100} secondary_color={Colors.shades.shade100} size={20} />
+                        <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                            <Text>{square.square_score_x}, {square.square_score_y}</Text>
+                        </View>
+                    </View>
+                </View>
+                :<></>}
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section, minWidth:350 }}>
+            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
+                <Icons.AwardRibbonIcon size={18} color={Colors.incentive.gold} />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header'>HIDDEN PRIZES</Text>
+                    <Text style={{ marginTop:3 }} theme="body_2">This board contains some hidden prizes! Check them out here!</Text>
+                </View>
+                <Icons.ChevronIcon direction={true?'down':'up'} size={8} color={Colors.brand.midnight} />
+            </TouchableOpacity>
+            {expanded ?
+            <View style={view_styles.section_body}>
+                <FlatList
+                    data={square_prizes.sort((a,b) => parseInt(a.square_prize_id) - parseInt(b.square_prize_id))}
+                    renderItem={renderPrizes}
+                    keyExtractor={(item) => item.square_prize_id.toString()}
+                />
+                 <View style={{ marginTop:10, flexDirection:'row', alignItems:'center', borderRadius:8, backgroundColor:Colors.incentive.gold_faded, padding:10 }}>
+                    <Icons.AlertIcon color={Colors.brand.midnight} size={16} />
+                    <View style={{ flex:1, marginLeft:5 }}>
+                        <Text theme='header_2' color={Colors.brand.midnight}>Prizes are hidden behind random squares on the board. End up with this square after the auction period and win the prize!</Text>
+                        <Text style={{ marginTop:3 }} theme='body' color={Colors.brand.midnight}>Square will be visible once the auction period ends</Text>
+                    </View>
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default PrizeCard 

package/src/Squares/components/SquareCard.tsx

@@ -168,7 +168,6 @@ const SquareCard = ({ player_id, square, player_square, event, event_status, mar
     if(square_state === 'existing_buy_offer' && player_square?.player_id != player_id){ showSubText = 'OFFER' }
     if(square_state === 'existing_buy_offer' && player_square?.player_id == player_id){ showSubText = 'SELL' }
     if(square_state === 'existing_sell_offer' && player_square?.player_id != player_id){ showSubText = 'BUY' }
-
     return (
         <TouchableOpacity style={{ margin:3, height:40, width:40, borderRadius:4, justifyContent:'center', alignItems:'center', backgroundColor:getSquareBackgroundColor(square_state), borderWidth:getSquareBorderWidth(square_state), borderTopWidth:getSquareBorderTopWidth(square_state), borderColor:getSquareBorderColor(square_state) }} onPress={() => onSquareSelect(square, draft_player_square||draft_square_offer?'remove':'add')}>
             {isUserIconVisible(square_state) ? 

package/src/Squares/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { ActivityIndicator, View, Image, TouchableOpacity, ScrollView } from 'react-native';
-import type { BuySquaresResponseProps, EventProps, LeagueProps, OfferResponseProps, PlayerSquareProps, PublicPlayerProps, SquareOfferProps, SquareProps, SquareResultProps, SquaresCompetitionProps, SquaresPayoutProps, SquaresTypeProps } from "../types"
+import type { BuySquaresResponseProps, EventProps, LeagueProps, OfferResponseProps, PlayerSquareProps, PublicPlayerProps, SquareOfferProps, SquarePrizeProps, SquareProps, SquareResultProps, SquaresCompetitionProps, SquaresPayoutProps, SquaresTypeProps } from "../types"
 import Colors from "../constants/colors";
 import { SqauresHelpers, SquaresApi } from "./api";
 import { Button, Icons, Text } from "../Components";
@@ -18,6 +18,7 @@ import MySquaresCard from "./components/MySquaresCard";
 import { view_styles } from "../constants/styles";
 import MyStatsCard from "./components/MyStatsCard";
 import SquareOffersCard from "./components/SquareOffersCard";
+import PrizeCard from './components/PrizeCard';
 
 type SquaresModuleProps = {
     player_id?:string,
@@ -42,6 +43,7 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
         event?:EventProps,
         squares_competition?:SquaresCompetitionProps,
         squares:SquareProps[],
+        square_prizes:SquarePrizeProps[],
         league?:LeagueProps,
         players:PublicPlayerProps[],
         squares_payout_type?:SquaresPayoutProps,
@@ -56,6 +58,7 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
         squares:[],
         players:[],
         square_results: [],
+        square_prizes:[],
         square_offers: [],
         player_square_history: [],
         player_squares: []
@@ -71,7 +74,7 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
     });
 
     const { square_bids, draft_square_offers, submit_ready } = board_data;
-    const { loading, league, event, players, loaded, squares_competition, squares, squares_type, squares_payout_type, square_results, square_offers, player_square_history, player_squares } = module_data;
+    const { loading, league, event, players, loaded, squares_competition, square_prizes, squares, squares_type, squares_payout_type, square_results, square_offers, player_square_history, player_squares } = module_data;
 
     const squares_expected_value = SqauresHelpers.getMyExpectedValue(squares, [ ...player_squares.filter(ps => ps.status == 'active' && ps.player_id == player_id) ], squares_competition, player_id)
     const my_squares = player_squares.filter(ps => ps.status == 'active' && ps.player_id == player_id);
@@ -117,6 +120,7 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
             squares_payout_type: d.squares_payout_type,
             squares:d.squares,
             players:ps,
+            square_prizes: d.square_prizes,
             square_offers: d.square_offers,
             square_results: d.square_results,
             player_squares:d.player_squares.filter(ps => ps.status == 'active'),
@@ -351,6 +355,12 @@ const SquaresModule = ({ sq_comp_id, player_id, distinct_id, onRequestAuthentica
                 onRequestAuthenticate={() => onRequestAuthenticate(squares_competition.auth_strategy_id)}
             />
             :<></>}
+            <PrizeCard 
+                square_prizes={square_prizes}
+                squares={squares}
+                players={players}
+                event={event}
+            />
             <View>
                 <SquaresBoard 
                     player_id={player_id}

package/src/constants/styles.ts

@@ -4,6 +4,11 @@ import Colors from './colors';
 
 
 export const view_styles = StyleSheet.create({
+    wrapper: {
+        flexDirection:'row',
+        flexWrap: 'wrap'
+    },
+    input: { padding:10, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:4 },
     container: {
         backgroundColor:Colors.shades.white,
         borderTopRightRadius:22,

package/src/index.tsx

@@ -18,6 +18,7 @@ import BracketRoom from "./Bracket";
 import SocketManager from './Socket';
 import SquaresModule from "./Squares";
 import PromotedOrder from "./PromotedOrder";
+import CompetitionManager from "./CompetitionManager";
 
 export {
   Authenticator,
@@ -25,6 +26,7 @@ export {
   BEEventApi,
   BELinkApi,
   ProfileManager,
+  CompetitionManager,
   Components,
   SocialComponents,
   APIOverrides,

package/src/types.d.ts

@@ -957,6 +957,12 @@ export interface MarketProps {
     last_update_datetime: any;
 }
 
+export interface MarketSideOptionProps {
+    side: string,
+    label: string,
+    id_source: 'athlete' | 'team' | 'side' | 'exotic',
+    parseable_title: string
+}
 
 export interface TradeProps {
     trade_id: string;
@@ -994,7 +1000,8 @@ export interface CompetitionProps {
     auth_strategy_id:string,
     competition_name:string,
     competition_description:string,
-    buy_in:number,
+    buy_in:number | string,
+    league_name?:string,
     admin_id:string,
     admin?:PublicPlayerProps,
     guaranteed_payout?:number,
@@ -1016,7 +1023,7 @@ export interface CompetitionProps {
     promo_payout?:number,
     sponsor_id?:string,
     sponsor?:PublicPlayerProps,
-    available_tickets:number,
+    available_tickets:number | string,
     tickets_sold:number,
     market_ids:string[],
     ticket_revenue:number,
@@ -1041,6 +1048,7 @@ export interface CompetitionMatchProps {
     create_datetime:any,
     market_id_override?:string,
     side_type_override?:string,
+    competition_match_markets?:CompetitionMatchMarketProps[],
     side_id_override?:string,
     last_update_datetime:any,
     status: 'closed'|'inprogress'|'deleted',
@@ -1497,6 +1505,21 @@ export interface SquareResultProps  {
 export interface SquareOfferProps {
     sq_offer_id:string, sq_player_square_id:string, offerer_id:string, offeree_id:string, amount:number, buy_sell_ind:'buy'|'sell', sq_comp_id:string, market_type:'FREE'|'FOR_MONEY', status:'offered'|'accepted'|'rejected'|'withdrawn', create_datetime:any, last_update_datetime:any
 }
+export interface SquarePrizeProps { 
+    square_prize_id:string,
+    company_id:string,
+    sq_comp_id:string,
+    sq_square_id:string,
+    winner_id?:string,
+    sq_player_square_id?:string,
+    status: 'pending' | 'inactive' | 'active' | 'awarded' | 'claimed' | 'expired',
+    expire_datetime:any,
+    image: { url: string },
+    description: string,
+    company_coupon_id?:string,
+    create_datetime:any,
+    last_update_datetime: any
+}
 
 export type SquareStateProps = 'no_bid'|'existing_bid'|'bid_draft'|'outbid_draft'|'outbid'|'no_offer'|'draft_buy_offer'|'draft_sell_offer'|
                                 'existing_buy_offer'|'existing_sell_offer'
@@ -1505,6 +1528,7 @@ export type SquareStateProps = 'no_bid'|'existing_bid'|'bid_draft'|'outbid_draft
 
 
 
+
 //EVENTS
 export interface BestAvailableOrderProps {
     event_id:string,