be-components 1.4.5 → 1.4.7

package/src/CompetitionManager/components/AdminCompetitionList.tsx

@@ -0,0 +1,144 @@
+import React, { useEffect, useState } from "react"
+import { View, FlatList, TouchableOpacity, Image, ActivityIndicator } from "react-native"
+import { ManageCompetitionApi } from "../api"
+import Colors from "../../constants/colors"
+import { view_styles } from "../../constants/styles"
+import { Button, Icons, Text } from "../../Components"
+import type { CompetitionProps } from "../../types"
+
+type AdminCompetitionListProps = {
+    width:number,
+    max_height?:number,
+    onSelectCompetition:(competition:CompetitionProps) => void,
+    onClose: () => void,
+    onCreateNew: () => void
+}
+
+const AdminCompetitionList = ({ width, max_height, onClose, onCreateNew, onSelectCompetition }:AdminCompetitionListProps) => {
+    const [ list_data, setData ] = useState<{
+        loading: boolean,
+        active_tab:'active'|'closed',
+        offset:number,
+        competitions:CompetitionProps[]
+    }>({
+        loading:false,
+        offset:0,
+        active_tab: 'active',
+        competitions: []
+    })
+    const { offset, active_tab, loading, competitions } = list_data;
+
+    useEffect(() => {
+        ManageCompetitionApi.setEnvironment();
+        getDataFromServer(0)
+    },[active_tab])
+
+    const getDataFromServer = async(offset:number) => {
+        setData({ ...list_data, loading:true });
+        const comps = await ManageCompetitionApi.getMyAdminCompetition(offset, active_tab);
+        setData({ 
+            ...list_data,  
+            loading: false, 
+            competitions: comps,
+            offset
+        })
+    }
+
+    const renderCompetitions = (data: { item:CompetitionProps, index:number }) => {
+        return (
+            <TouchableOpacity style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => onSelectCompetition(data.item)}>
+                <Image
+                    source={{ uri: data.item.image?.url }}
+                    style={{ height:30, width:30, borderRadius:4 }}
+                    resizeMode="cover"
+                />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="header_2">{data.item.competition_name}</Text>
+                    <Text style={{ marginTop:3 }} theme="body">{data.item.competition_description}</Text>
+                </View>
+                <Icons.ChevronIcon direction='right' size={8} color={Colors.brand.midnight}/>
+            </TouchableOpacity>
+        )
+    }
+
+    return (
+        <View style={{ maxWidth:width, minWidth:300, maxHeight:max_height ?? 700, backgroundColor:Colors.shades.white }}>
+            <View style={{ ...view_styles.section_header }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>MY COMPETITIONS</Text>
+                    <Text style={{ marginTop:3 }} theme="body">Below is a list of the competitions you have created</Text>
+                </View>
+                <Button
+                    title="CREATE"
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={() => onCreateNew()}
+                />
+            </View>
+            <View style={{ flexDirection:'row' }}>
+                <Button
+                    title="ACTIVE"
+                    title_color={active_tab == 'active' ? Colors.shades.white : Colors.brand.midnight}
+                    backgroundColor={active_tab == 'active' ? Colors.brand.midnight: Colors.shades.white}
+                    title_weight={active_tab == 'active' ? 'bold' : 'regular'}
+                    borderRadius={0}
+                    padding={15}
+                    style={{ flex:1 }}
+                    onPress={() => setData({ ...list_data, active_tab: 'active' })}
+                />
+                <Button
+                    title="CLOSED"
+                    title_color={active_tab == 'closed' ? Colors.shades.white : Colors.brand.midnight}
+                    backgroundColor={active_tab == 'closed' ? Colors.brand.midnight: Colors.shades.white}
+                    title_weight={active_tab == 'closed' ? 'bold' : 'regular'}
+                    borderRadius={0}
+                    padding={15}
+                    style={{ flex:1 }}
+                    onPress={() => setData({ ...list_data, active_tab: 'closed' })}
+                />
+            </View>
+            <View style={{ ...view_styles.section_body }}>
+                {loading ?
+                <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
+                :<></>}
+                <FlatList
+                    data={competitions}
+                    renderItem={renderCompetitions}
+                    keyExtractor={(item) => item.competition_id.toString()}
+                />
+            </View>
+            {active_tab == 'closed' ?
+            <View style={{ ...view_styles.section_footer }}>
+                {offset > 0 ?
+                <Button
+                    title='PREV'
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() =>  getDataFromServer(offset - 1)}
+                />
+                :<View/>}
+                <View style={{ flex:1 }} />
+                <Button
+                    title='NEXT'
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => getDataFromServer(offset + 1)}
+                />
+            </View>
+            :<></>}
+            <View style={{ ...view_styles.section_footer }}>
+                <Button
+                    title="CLOSE"
+                    title_color={Colors.shades.white}
+                    style={{ flex:1, marginRight:8 }}
+                    padding={15}
+                    backgroundColor={Colors.utility.error}
+                    onPress={() => onClose()}
+                />
+            </View>
+        </View>
+    )
+}
+
+
+export default AdminCompetitionList

package/src/Engage/api/index.ts

@@ -0,0 +1,124 @@
+import axios from 'axios';
+import { APIOverrides } from "../../ApiOverrides";
+import type { BracketCompetitionProps, BracketProps, CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, EventProps, LeagueProps, PublicPlayerProps, SquaresCompetitionProps } from '../../types';
+
+let AUTH_SVC_API = ''
+let TP_SVC_API = ''
+let EVENT_SVC_API = ''
+
+export { EngageApi, EngageHelpers }
+
+const EngageApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        TP_SVC_API = endpoints['TP_SVC_API'] as string;
+        EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+    },
+    getActivePublicCompetitions: async():Promise<CompetitionProps[]> => {
+        try {
+            const resp = await axios.get(`${TP_SVC_API}/v2/competitions/public`)
+            return resp.data.competitions
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+    },
+    getActivePublicSquares: async():Promise<SquaresCompetitionProps[]> => {
+        try {
+            const resp = await axios.get(`${TP_SVC_API}/v1/squares/public`)
+            return resp.data.squares_competitions
+        } catch (e) {
+            return []
+        }
+    },
+    getLeagues: async():Promise<LeagueProps[]> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/leagues`)
+            return resp.data.leagues
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+
+    },
+    getBracketsByIds: async(bracket_ids:string[]):Promise<BracketProps[]> => {
+        try {
+            if(bracket_ids.length == 0){ return [] }
+            const resp = await axios.post(`${EVENT_SVC_API}/v1/brackets/bulk/get`, { bracket_ids })
+            console.log(resp.data)
+            return resp.data.brackets
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+    },
+    getEventsByEventIds: async(event_ids:string[]):Promise<EventProps[]> => {
+        try {
+            if(event_ids.length == 0){ return [] }
+            const resp = await axios.post(`${EVENT_SVC_API}/v1/events/bulk/get`, { attribute:'event_id', values: event_ids })
+            return resp.data.events
+        } catch (e) {
+            return []
+        }
+    },
+    getCompetitionOptions: async():Promise<{competition_types:CompetitionTypeProps[], competition_result_types:CompetitionResultTypeProps[], competition_payout_types:CompetitionPayoutTypeProps[]}> => {
+        const resp = await axios.get(`${TP_SVC_API}/v1/competitions/options`)
+        return resp.data
+    },
+    getActivePublicBrackets: async():Promise<BracketCompetitionProps[]> => {
+        try {
+            const resp = await axios.get(`${TP_SVC_API}/v1/brackets/public`)
+            console.log(resp.data)
+            return resp.data.bracket_competitions
+        } catch (e) {
+            return []
+        }
+    },
+    getCompaniesByIds: async(company_ids:string[]):Promise<CompanyProps[]> => {
+        try {
+            if(company_ids.length == 0){ return [] }
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/companies/bulk/get`, { company_ids })
+            return resp.data.companies
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+    },
+    getPlayersByPlayerIds : async(player_ids:string[]):Promise<PublicPlayerProps[]> => {
+        try {
+            if(player_ids.length == 0){ return [] }
+
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/players/bulk/get`, { player_ids })
+            return resp.data.players 
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+    },
+}
+
+
+const EngageHelpers = {
+    getCompanyIdsFromEngage: (comps:CompetitionProps[], sq_comps:SquaresCompetitionProps[], brackets:BracketCompetitionProps[]) => {
+        let ids = comps.filter(c => c.company_id).map(c => c.company_id ?? '0')
+        ids = ids.concat(sq_comps.filter(s => s.company_id).map(s => s.company_id ?? '0'))
+        ids = ids.concat(brackets.filter(b => b.company_id).map(b => b.company_id ?? '0'))
+        return [ ...new Set(ids.map(id => id)) ]
+    },
+    getPlayerIdsFromEngage: (comps:CompetitionProps[], sq_comps:SquaresCompetitionProps[], brackets:BracketCompetitionProps[]) => {
+        let ids = comps.map(c => c.admin_id);
+        ids = ids.concat(comps.filter(c => c.pacer_id).map(c => c.pacer_id ?? '0'))
+        ids = ids.concat(sq_comps.map(s => s.admin_id))
+        ids = ids.concat(brackets.map(b => b.admin_id))
+        return [ ...new Set(ids.map(id => id)) ]
+    },
+    getEventIdsFromSquares: (squares:SquaresCompetitionProps[]) => {
+        const ids = squares.filter(s => s.event_id).map(s => s.event_id)
+        return [ ...new Set(ids.map(id => id)) ] 
+    },
+    getBracketIdsFromBracketComps: (bc:BracketCompetitionProps[]) => {
+        const ids = bc.map(c => c.bracket_id)
+        return [ ...new Set(ids.map(id => id)) ] 
+    }
+}

package/src/Engage/components/BracketCompetitionCard.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { View, Image, TouchableOpacity } from 'react-native';
+import type { BracketCompetitionProps, BracketProps, CompanyProps, CompetitionResultTypeProps, LeagueProps, PublicPlayerProps } from '../../types';
+import { view_styles } from '../../constants/styles';
+import Colors from '../../constants/colors';
+import { Icons, Text } from '../../Components';
+import moment from 'moment-mini';
+
+type BracketCompetitionCardProps = {
+    bracket_competition:BracketCompetitionProps,
+    competition_result_type:CompetitionResultTypeProps,
+    company?:CompanyProps,
+    admin?:PublicPlayerProps,
+    pacer?:PublicPlayerProps,
+    league?:LeagueProps,
+    bracket?:BracketProps,
+    onCompetitionSelect:(c:BracketCompetitionProps) => void
+}
+const BracketCompetitionCard = ({ bracket_competition, bracket, league, company, admin, onCompetitionSelect}:BracketCompetitionCardProps) => {
+    const cl = bracket_competition.market_type == 'FOR_MONEY' ? '$' : 'E'
+    let current_payout = bracket_competition.ticket_revenue
+    if(bracket_competition.promo_payout){ current_payout += bracket_competition.promo_payout }
+    if(bracket_competition.guaranteed_payout && bracket_competition.guaranteed_payout > current_payout){ current_payout = bracket_competition.guaranteed_payout }
+
+    const tickets_available = bracket_competition.max_brackets - bracket_competition.tickets_sold
+    const is_live = moment().isAfter(moment(bracket_competition.scheduled_datetime)) ? true : false
+    
+    return (
+        <TouchableOpacity style={{ ...view_styles.section, padding:0 }} onPress={() => onCompetitionSelect(bracket_competition)}>
+            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+                <Image
+                    source={{ uri: bracket_competition.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:45, width:45, borderRadius:4}}
+                    resizeMode='cover'
+                />
+                <View style={{ flex:1, marginLeft:10, marginRight:10, borderRightWidth:1, borderRightColor:Colors.shades.shade600 }}>
+                    <Text theme='header_2'>{bracket_competition.competition_name}</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>{bracket_competition.competition_description}</Text>
+                </View>
+                <Text size={20} color={Colors.brand.electric} weight='bold'>{cl}{bracket_competition.buy_in}</Text>
+            </View>
+            <View style={{ ...view_styles.section_body }}>
+                <View style={{ ...view_styles.body_row }}>
+                    {bracket && league ?
+                    <View style={{ flex:1, flexDirection:'row', alignItems:'center', marginRight:10 }}>
+                        <Image
+                            source={{ uri: league.league_image }}
+                            style={{ height:30, width:30, borderRadius:4 }}
+                            resizeMode='cover'
+                        />
+                        <View style={{ flex:1, marginLeft:10 }}>
+                            <Text theme='header_2'>{bracket.bracket_name}</Text>
+                        </View>
+                    </View>
+                    :<></>}
+                    {tickets_available > 0 ? 
+                    <View style={{ justifyContent:'center', alignItems:'center' }}>
+                        <Text size={18} color={Colors.brand.midnight} weight='bold'>{tickets_available}</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>TICKETS</Text>
+                    </View>
+                    :
+                    <View style={{ justifyContent:'center', alignItems:'center' }}>
+                        <Text size={18} color={Colors.utility.error} weight='bold'>FULL</Text>
+                    </View>
+                    }
+                </View>
+            </View>
+
+            <View style={{ ...view_styles.section_footer, backgroundColor:company?Colors.incentive.gold_faded:Colors.shades.shade100 }}>
+                {company ?
+                <Image
+                    source={{ uri: company.company_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:30, width:30, borderRadius:4}}
+                    resizeMode='cover'
+                />
+                :admin ?
+                <Image
+                    source={{ uri: admin.profile_pic && admin.profile_pic != '' ? admin.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:30, width:30, borderRadius:4}}
+                    resizeMode='cover'
+                />
+                :<></>}
+                {bracket_competition.prize_override ?
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center', marginLeft:10 }}>
+                    <View style={{ flex:1, marginRight:10}}>
+                        <Text size={12} weight='bold' color={Colors.brand.midnight}>ADDITIONAL PRIZE</Text>
+                        <Text style={{ marginTop:3 }} size={10} color={Colors.incentive.gold} weight='bold'>{bracket_competition.prize_override}</Text>
+                    </View>
+                    {bracket_competition.prize_image?.url ?
+                    <Image
+                        source={{ uri: bracket_competition.prize_image.url }}
+                        style={{ height:30, width:30, borderRadius:4}}
+                        resizeMode='cover'
+                    />
+                    :
+                    <Icons.AwardRibbonIcon size={24} color={Colors.incentive.gold} />
+                    }
+                </View>
+                :
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    <View style={{ flex:1, marginLeft:20, marginRight:20 }}>
+                        <Text theme='header_2'>CURRENT PAYOUT</Text>
+                        {is_live ? 
+                        <Text style={{ marginTop:3 }} color={Colors.utility.error} weight='bold' size={12}>IN PROGRESS</Text>
+                        :
+                        <Text style={{ marginTop:3 }} theme='body_2'>Join Until {moment(bracket_competition.scheduled_datetime).format('ddd hh:mm a')}</Text>
+                        }
+                    </View>
+                    <Text color={Colors.utility.success} size={20} weight='bold'>{cl}{current_payout.toFixed(2)}</Text>
+                </View>
+                }
+            </View>
+        </TouchableOpacity>
+    )
+}
+
+export default BracketCompetitionCard

package/src/Engage/components/CompetitionCard.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { View, Image, TouchableOpacity } from 'react-native';
+import type { CompanyProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, PublicPlayerProps } from '../../types';
+import { view_styles } from '../../constants/styles';
+import Colors from '../../constants/colors';
+import { Icons, Text } from '../../Components';
+import moment from 'moment-mini';
+
+type CompetitionCardProps = {
+    competition:CompetitionProps,
+    competition_type:CompetitionTypeProps,
+    competition_result_type:CompetitionResultTypeProps,
+    company?:CompanyProps,
+    admin?:PublicPlayerProps,
+    pacer?:PublicPlayerProps,
+    onCompetitionSelect:(c:CompetitionProps) => void
+}
+const CompetitionCard = ({ competition, competition_type, company, admin, onCompetitionSelect }:CompetitionCardProps) => {
+    const cl = competition.market_type == 'FOR_MONEY' ? '$' : 'E'
+    let current_payout = competition.ticket_revenue
+    if(competition.promo_payout){ current_payout += competition.promo_payout }
+    if(competition.guaranteed_payout && competition.guaranteed_payout > current_payout){ current_payout = competition.guaranteed_payout }
+
+    const tickets_available = parseFloat(competition.available_tickets as string) - competition.tickets_sold
+    const is_live = moment().isAfter(moment(competition.scheduled_datetime)) ? true : false
+    const getTypeIcon = () => {
+        switch(competition_type.type){
+            case 'pick':
+                return <Icons.SelectorIcon size={20} color={Colors.brand.midnight} />
+            default: return <></>
+        }
+    }
+    
+    return (
+        <TouchableOpacity style={{ ...view_styles.section, padding:0 }} onPress={() => onCompetitionSelect(competition)}>
+            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+                <Image
+                    source={{ uri: competition.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:45, width:45, borderRadius:4}}
+                    resizeMode='cover'
+                />
+                <View style={{ flex:1, marginLeft:10, marginRight:10, borderRightWidth:1, borderRightColor:Colors.shades.shade600 }}>
+                    <Text theme='header_2'>{competition.competition_name}</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>{competition.competition_description}</Text>
+                </View>
+                <Text size={20} color={Colors.brand.electric} weight='bold'>{cl}{competition.buy_in}</Text>
+            </View>
+            <View style={{ ...view_styles.section_body }}>
+                <View style={{ ...view_styles.body_row }}>
+                    
+                    {tickets_available > 0 ? 
+                    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                        <Text size={18} color={Colors.brand.midnight} weight='bold'>{tickets_available}</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>TICKETS</Text>
+                    </View>
+                    :
+                    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                        <Text size={18} color={Colors.utility.error} weight='bold'>FULL</Text>
+                    </View>
+                    }
+                    {competition_type.type == 'pick' ?
+                    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                        <Text size={18} color={Colors.brand.midnight} weight='bold'>{competition.max_pick_count}</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>PICKS</Text>
+                    </View>
+                    :
+                    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                        <Text size={18} color={Colors.brand.midnight} weight='bold' textAlign='center'>E{competition.initial_balance}</Text>
+                        <Text style={{ marginTop:3 }} size={14} color={Colors.brand.midnight} textAlign='center'>STARTING BALANCE</Text>
+                    </View>
+                    }
+                    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                        {getTypeIcon()}
+                        <Text style={{ marginTop:3 }} theme='body'>{competition_type.type_label.toUpperCase()}</Text>
+                    </View>
+                </View>
+            </View>
+            <View style={{ ...view_styles.section_footer, backgroundColor:company?Colors.incentive.gold_faded:Colors.shades.shade100 }}>
+                {company ?
+                <Image
+                    source={{ uri: company.company_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:30, width:30, borderRadius:4}}
+                    resizeMode='cover'
+                />
+                :admin ?
+                <Image
+                    source={{ uri: admin.profile_pic && admin.profile_pic != '' ? admin.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:30, width:30, borderRadius:4}}
+                    resizeMode='cover'
+                />
+                :<></>}
+                {competition.prize_override ?
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center', marginLeft:10 }}>
+                    <View style={{ flex:1, marginRight:10}}>
+                        <Text size={12} weight='bold' color={Colors.brand.midnight}>ADDITIONAL PRIZE</Text>
+                        <Text style={{ marginTop:3 }} size={10} color={Colors.incentive.gold} weight='bold'>{competition.prize_override}</Text>
+                    </View>
+                    {competition.prize_image?.url ?
+                    <Image
+                        source={{ uri: competition.prize_image.url }}
+                        style={{ height:30, width:30, borderRadius:4}}
+                        resizeMode='cover'
+                    />
+                    :
+                    <Icons.AwardRibbonIcon size={24} color={Colors.incentive.gold} />
+                    }
+                </View>
+                :
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    <View style={{ flex:1, marginLeft:20, marginRight:20 }}>
+                        <Text theme='header_2'>CURRENT PAYOUT</Text>
+                        {is_live ? 
+                        <Text style={{ marginTop:3 }} color={Colors.utility.error} weight='bold' size={12}>IN PROGRESS</Text>
+                        :
+                        <Text style={{ marginTop:3 }} theme='body_2'>Join Until {moment(competition.scheduled_datetime).format('ddd hh:mm a')}</Text>
+                        }
+                    </View>
+                    <Text color={Colors.utility.success} size={20} weight='bold'>{cl}{current_payout.toFixed(2)}</Text>
+                </View>
+                }
+            </View>
+        </TouchableOpacity>
+    )
+}
+
+export default CompetitionCard

package/src/Engage/components/SquaresCompetitionCard.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Image, View, TouchableOpacity } from 'react-native';
+import { view_styles } from '../../constants/styles';
+import { Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import type { CompanyProps, EventProps, PublicPlayerProps, SquaresCompetitionProps } from '../../types';
+import moment from 'moment-mini';
+
+type SquaresCompetitionCardProps = {
+    squares_competition:SquaresCompetitionProps,
+    admin?:PublicPlayerProps,
+    event?:EventProps
+    company?:CompanyProps,
+    onSelectCompetition:(sq:SquaresCompetitionProps) => void
+}
+
+const SquaresCompetitionCard = ({ squares_competition, admin, event, company, onSelectCompetition }:SquaresCompetitionCardProps) => {
+    let current_payout = squares_competition.potential_winnings
+    if(squares_competition.guaranteed_payout && squares_competition.guaranteed_payout > current_payout){ current_payout = squares_competition.guaranteed_payout }
+    const is_live = moment().isAfter(moment(squares_competition.begin_datetime)) ? true : false
+    return (
+        <TouchableOpacity style={{ ...view_styles.section, padding:0 }} onPress={() => onSelectCompetition(squares_competition)}>
+            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+                <Image
+                    source={{ uri: squares_competition.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:45, width:45, borderRadius:4}}
+                    resizeMode='cover'
+                />
+                <View style={{ flex:1, marginLeft:10, marginRight:10, borderRightWidth:1, borderRightColor:Colors.shades.shade600 }}>
+                    <Text theme='header_2'>{squares_competition.sq_comp_name}</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>{squares_competition.sq_comp_description}</Text>
+                </View>
+                <Text size={20} color={Colors.brand.electric} weight='bold'>${squares_competition.minimum_square_price}</Text>
+            </View>
+            <View style={{ ...view_styles.section_body, padding:10, paddingTop:20, paddingBottom:20 }}>
+                <View style={{ ...view_styles.body_row, padding:0 }}>
+                    {event ?
+                    <View style={{ flex:1, flexDirection:'row', marginRight:10, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
+                        <View style={{ flexDirection:'row', alignItems:'center' }}>
+                            <Image
+                                source={{ uri: event.away?.image?.url }}
+                                style={{ height:30, width:30 }}
+                                resizeMode='cover'
+                            />
+                            <Text style={{ padding:5 }} theme='header_2'>VS</Text>
+                            <Image
+                                source={{ uri: event.home?.image?.url }}
+                                style={{ height:30, width:30 }}
+                                resizeMode='cover'
+                            />
+                        </View>
+                        <View style={{ flex:1, marginLeft:10 }}>
+                            <Text theme='header_2'>{event.event_title}</Text>
+                            <Text style={{ marginTop:3 }} theme='body'>{event.time_detail == 'scheduled' ? moment(event.scheduled_datetime).format('MMM DD hh:mm a') : event.time_detail}</Text>
+                        </View>
+                    </View>
+                    :<></>}
+                    <View style={{ justifyContent:'center', alignItems:'center' }}>
+                        <Icons.SquaresIcon size={24} color={Colors.brand.midnight} />
+                        <Text style={{ marginTop:3 }} theme='header_2'>AUCTION</Text>
+                    </View>
+                </View>
+            </View>
+            <View style={{ ...view_styles.section_footer, backgroundColor:company?Colors.incentive.gold_faded:Colors.shades.shade100 }}>
+                {company ?
+                <Image
+                    source={{ uri: company.company_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:30, width:30, borderRadius:4}}
+                    resizeMode='cover'
+                />
+                :admin ?
+                <Image
+                    source={{ uri: admin.profile_pic && admin.profile_pic != '' ? admin.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:30, width:30, borderRadius:4}}
+                    resizeMode='cover'
+                />
+                :<></>}
+                <View style={{ flex:1, marginLeft:20, marginRight:20 }}>
+                    <Text theme='header_2'>CURRENT PAYOUT</Text>
+                    {is_live ? 
+                    <Text style={{ marginTop:3 }} color={Colors.utility.error} weight='bold' size={12}>AUCTION COMPLETE</Text>
+                    :
+                    <Text style={{ marginTop:3 }} theme='body_2'>Auction Ends {moment(squares_competition.begin_datetime).fromNow()}</Text>
+                    }
+                </View>
+                <Text color={Colors.utility.success} size={20} weight='bold'>${current_payout.toFixed(2)}</Text>
+            </View>
+        </TouchableOpacity>
+    )
+}
+
+export default SquaresCompetitionCard