be-components 5.6.8 → 5.7.0

package/src/FlashMarket/index.tsx

@@ -0,0 +1,415 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from "../Components/Themed";
+import type { LocationProps, PollCampaignProps, PollOptionProps, PollProps, PollResponseProps, PollSummaryProps, PublicPlayerProps } from '../types';
+import { FlashMarketApi, FlashMarketHelpers } from './api';
+import { Icons } from '../Components';
+import { useColors } from '../constants/useColors';
+import { ActivityIndicator, FlatList, Image } from 'react-native';
+import FlashMarketHelp from './components/FlashMarketHelp';
+import SocketManager from '../Socket';
+import moment from 'moment-mini';
+
+
+type FlashMarketProps = {
+    poll_id:string,
+    init_expanded?:boolean,
+    location?:LocationProps,
+    header_style?:any,
+    footer_style?:any,
+    player_id?:string
+    player?:PublicPlayerProps,
+    onRequestLocation:() => void,
+    onFocusPosition?: (position:{ x:number, y:number, width:number, height:number }) => void,
+    onRequestAuthenticate: () => void
+}
+const FlashMarket = ({ poll_id, init_expanded, header_style, footer_style, location, player, player_id, onRequestAuthenticate, onFocusPosition, onRequestLocation }:FlashMarketProps) => {
+    const Colors = useColors();
+    const [ needs_reload, setNeedsReload ] = useState(false);
+    const [ socket_summaries, setSocketSummaries ] = useState<PollSummaryProps[]>([]);
+    const [ socket_campaign, setSocketCampaign ] = useState<PollCampaignProps|undefined>(undefined);
+    const [ socket_poll_options, setSocketPollOptions ] = useState<PollOptionProps[]>([]);
+    const [ socket_polls, setSocketPolls ] = useState<PollProps[]>([]);
+    const [ expanded, setExpanded ] = useState(false);
+    const [ show_help, setShowHelp ] = useState(false);
+    const [ action_loading, setActionLoading ] = useState(false);
+    const [ draft_data, setDraftData ] = useState<{
+        stake: string
+    }>({
+        stake: '0'
+    })
+    const [ market_data, setMarketData ] = useState<{
+        loading:boolean,
+        poll?:PollProps,
+        poll_campaign?:PollCampaignProps,
+        poll_options:PollOptionProps[],
+        poll_summaries:PollSummaryProps[]
+    }>({
+        loading:false,
+        poll_options:[],
+        poll_summaries:[]
+    }); 
+    const { loading, poll, poll_options, poll_summaries, poll_campaign } = market_data;
+    const cl = poll_campaign?.market_type == 'FOR_MONEY' ? '$' : 'E'
+    const [ my_data, setMyData ] = useState<{
+        me_loading:boolean,
+        my_response?:PollResponseProps
+    }>({
+        me_loading:false
+    });
+    const { me_loading, my_response } = my_data;
+    const [ selected_option, setSelectedOption ] = useState<PollOptionProps | undefined>(undefined);
+    
+    const allow_order = my_response || poll?.winning_option_id ? false : true
+    const potential_winnings = FlashMarketHelpers.calcPotentialWinnings(selected_option?.parimutuel_odds, draft_data.stake);
+    const order_valid = FlashMarketHelpers.isValid(poll, draft_data.stake);
+    const visible_options = poll_options.filter(po => po.status != 'inactive').sort((a,b) => a.priority - b.priority)
+    useEffect(() => {
+        FlashMarketApi.setEnvironment();
+        loadMarket(poll_id);
+    },[poll_id]);
+
+    useEffect(() => {
+        if(!poll || !player_id){ return }
+        loadMyData();
+    },[poll, player_id]);
+
+    useEffect(() => {
+        if(socket_summaries.length == 0){ return }
+        if(!poll){ return }
+        let same_options = socket_summaries.filter(p => p.poll_id == poll_id);
+        if(same_options.length == 0){ return }
+        //See if we have that poll!
+        setMarketData({ 
+            ...market_data, 
+            poll_summaries: poll_summaries.filter(po => !same_options.find(so => so.poll_option_id == po.poll_option_id)).concat(same_options)
+        })
+    },[JSON.stringify(socket_summaries)])
+
+    useEffect(() => {
+        if(!socket_campaign){ return }
+        if(!poll_campaign){ return }
+        if(poll_campaign.poll_campaign_id != socket_campaign.poll_campaign_id){ return }
+        setMarketData({
+            ...market_data,
+            poll_campaign: socket_campaign
+        })
+    },[socket_campaign]);
+
+    useEffect(() => {
+        if(socket_polls.length == 0){ return }
+        if(!poll){ return }
+        let same_poll = socket_polls.find(p => p.poll_id == poll.poll_id);
+        if(!same_poll){ return }
+        if(same_poll.status == 'active' && poll.status == 'pending'){ loadMarket(poll_id); return }
+        //See if we have that poll!
+        setMarketData({ ...market_data, poll: same_poll })
+    }, [JSON.stringify(socket_polls)])
+
+    useEffect(() => {
+        if(socket_poll_options.length == 0){ return }
+        if(!poll){ return }
+        let same_options = socket_poll_options.filter(p => p.poll_id == poll.poll_id);
+        if(same_options.length == 0){ return }
+        //See if we have that poll!
+        setMarketData({ 
+            ...market_data, 
+            poll_options: poll_options.filter(po => !same_options.find(so => so.poll_option_id == po.poll_option_id)).concat(same_options)
+        })
+    }, [JSON.stringify(socket_poll_options)])
+
+    const loadMarket = async(id:string) => {
+        setMarketData({ ...market_data, loading: true })
+        const pr = await FlashMarketApi.getPollById(id);
+        if(!pr){ return }
+        const pc = await FlashMarketApi.getPollCampaignById(pr.poll.poll_campaign_id);
+        setMarketData({
+            ...market_data,
+            poll: pr.poll,
+            poll_campaign:pc,
+            poll_options:pr.poll_options,
+            poll_summaries: pr.poll_summaries,
+            loading:false
+        });
+        setDraftData({ ...draft_data, stake: pr.poll.minimum_stake.toFixed(2) });
+        if(init_expanded){ setExpanded(true) }
+    }
+
+    const handleSubmit = async(poll_option:PollOptionProps) => {
+        if(!player_id){ return onRequestAuthenticate() }
+        if(!order_valid){ return }
+        if(action_loading){ return }
+        if(!poll_campaign){ return }
+        if(poll_campaign.market_type == 'FOR_MONEY'){
+            if(!location){ return onRequestLocation() }
+            if(!location.legal_ind){ return alert(`Real money flash markets are not available in your current location`) }
+        }
+        setActionLoading(true);
+        let stake_num = parseFloat(draft_data.stake);
+        const response = await FlashMarketApi.createPMOrder(poll_option.poll_option_id, stake_num);
+        if(!response){ return alert('Unable to process order') }
+        setMyData({
+            ...my_data,
+            my_response: response.poll_response
+        });
+        setSelectedOption(undefined);
+        setActionLoading(false)
+        
+    }
+
+    const generateResultIcon = (option:PollOptionProps) => {
+        switch(option.result_ind){
+            case 'win':
+                return (
+                    <Icons.CheckIcon color={Colors.text.success} size={18} />
+                )
+            case 'lose':
+                return (
+                    <Icons.CloseIcon color={Colors.text.error} size={14} />
+                )
+            case 'draw':
+                return (
+                    <Icons.AlertIcon color={Colors.text.h1} size={18}/>
+                )
+            default: return <></>
+        }
+    }
+
+    const generateStatusIcon = (poll:PollProps) => {
+        switch(poll.status){
+            case 'active': return <Icons.ActivityIcon size={18} color={Colors.text.success} />
+            case 'paused': return <Icons.PausedIcon size={18} color={Colors.text.h1} />
+            case 'closed': return <Icons.LockClosedIcon size={18} color={Colors.text.h1}/>
+            default: return <Icons.AlertIcon size={18} color={Colors.text.warning} />
+        }
+    }
+
+    const getColor = (number:number) => {
+        if(number > 0){ return Colors.text.success }
+        if(number < 0){ return Colors.text.error }
+        return Colors.text.h1
+    }
+
+    const loadMyData = async() => {
+        if(!poll){ return }
+        setMyData({ ...my_data, me_loading: true });
+        let responses = await FlashMarketApi.getMyCampaignResponses(poll.poll_campaign_id);
+        let response = responses.find(r => r.poll_id == poll_id);
+        setMyData({ ...my_data, me_loading: false, my_response:response })
+    }
+
+    const renderOptions = (data:{ item:PollOptionProps, index:number }) => {
+        const my_option = data.item.poll_option_id == my_response?.poll_option_id ? my_response : undefined
+        const response_stats = FlashMarketHelpers.getResponseStats(data.item, my_option);
+        const selected = selected_option?.poll_option_id == data.item.poll_option_id ? true : false
+        return (
+            <View transparent style={{ borderRadius:8, flexDirection:'row', alignItems:'center', borderWidth:my_option?1:0, borderColor:Colors.text.action, padding:10 }}>
+                {my_option ?
+                <View transparent style={{ marginRight:10 }}>
+                    {player ?
+                    <Image
+                        source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                        style={{ height:30, width:30, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                    :
+                    <Icons.UserIcon color={Colors.text.action} size={14} />
+                    }
+                </View>
+                :<></>}
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>{data.item.option_name}</Text>
+                    {selected && data.item.parimutuel_odds && data.item.parimutuel_odds > 0 ?
+                    <Text theme='h2' style={{ marginTop:3 }} color={Colors.text.action}>${draft_data.stake} to win ${potential_winnings.toFixed(2)}</Text>
+                    :<></>}
+                </View>
+                {!selected ?
+                <View transparent style={{ marginRight:10, marginLeft:10 }}>
+                    <Text theme='h1' color={Colors.text.action}>{((data.item.parimutuel_odds ?? 0)*100).toFixed(2)}%</Text>
+                </View>
+                :<></>}
+                {selected ?
+                <View transparent style={{ flexDirection:'row' }}>
+                    <TextInput
+                        onFocusPosition={onFocusPosition}
+                        onChangeText={(text) => setDraftData({ ...draft_data, stake: text })}
+                        style={{ width: 75, textAlign:'center', padding:10 }}
+                        value={draft_data.stake}
+                    />
+                    <Button
+                        type='success'
+                        disabled={!order_valid || action_loading}
+                        loading={action_loading}
+                        style={{ padding:10, marginLeft:10, opacity:order_valid && !action_loading?1:0.5 }}
+                        title='SUBMIT'
+                        onPress={() => handleSubmit(data.item)}
+                    />
+                    <Button
+                        title='X'
+                        style={{ padding:10, marginLeft:10 }}
+                        transparent
+                        title_color={Colors.text.error}
+                        onPress={() => setSelectedOption(undefined)}
+                    />
+                </View>
+                :
+                <View transparent>
+                    {!loading && !me_loading && allow_order ?
+                    <Button
+                        type='action'
+                        disabled={action_loading}
+                        style={{ padding:10 }}
+                        onPress={() => setSelectedOption(data.item)}
+                    >
+                        <Text theme='h1' color={Colors.text.white}>Buy</Text>
+                    </Button>
+                    :<></>}
+                </View>
+                }
+                {data.item.result_ind ?
+                <View transparent style={{ padding:10 }}>
+                    {generateResultIcon(data.item)}
+                </View>
+                :<></>}
+                {my_option?.result_ind ?
+                <View float style={{ justifyContent:'center', alignItems:'center', padding:5 }}>
+                    <Text theme='h2' textAlign='center' color={getColor(response_stats.earnings)}>{cl}{response_stats.earnings.toFixed(2)}</Text>
+                    <Text theme='description' textAlign='center' color={getColor(response_stats.earnings)}>Earnings</Text>
+                </View>
+                : my_option ?
+                <View float style={{ justifyContent:'center', alignItems:'center', padding:5 }}>
+                    <Text theme='h2' textAlign='center' color={Colors.text.h1}>{cl}{response_stats.stake.toFixed(2)} to win {cl}{response_stats.potential_winnings.toFixed(2)}</Text>
+                </View>
+                :<></>}
+                {me_loading ?
+                <ActivityIndicator size={'small'} color={Colors.text.h1} />
+                :<></>}
+            </View>
+        )
+    }
+
+    if(!poll || loading){ return <></> }
+    const stats = FlashMarketHelpers.getStats(poll_summaries);
+    return (
+        <View transparent>
+            <Button 
+            style={{ backgroundColor:Colors.views.header, padding:10, flexDirection:'row', alignItems:'center', ...header_style }}
+            onPress={() => setExpanded(!expanded)}>
+                {poll.poll_image ?
+                <Image
+                    source={{ uri: poll.poll_image?.url }}
+                    style={{ height:50, width:50 }}
+                    resizeMode='cover'
+                />
+                :
+                <Icons.FlameIcon color={Colors.text.warning} size={24} />
+                }
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{poll.poll_question}</Text>
+                    <Text theme='h2' style={{ marginTop:4 }}>Flash Market🔥🔥</Text>
+                </View>
+                {generateStatusIcon(poll)}
+                <Button
+                    transparent
+                    disabled
+                    onPress={() => console.log('')}
+                >
+                    <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} size={8} color={Colors.text.action} />
+                </Button>
+            </Button>
+            <View transparent type='body'>
+                {show_help ?
+                <View transparent>
+                    <FlashMarketHelp />
+                </View>
+                :
+                <View transparent>
+                    {expanded ?
+                    <View transparent type='body' style={{ padding:10, minHeight:100 }}>
+                        <FlatList
+                            data={visible_options}
+                            key={`poll_${poll_id}_options`}
+                            renderItem={renderOptions}
+                            keyExtractor={(item) => item.poll_option_id.toString()}
+                        />
+                         {['paused','pending'].includes(poll.status) ?
+                        <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                            <View float style={{ flexDirection:'row', alignItems:'center', padding:20 }}>
+                                <Icons.PausedIcon size={35} color={Colors.text.h1} />
+                                <View transparent style={{ marginLeft:20 }}>
+                                    <Text theme='h1'>Market Is Inactive</Text>
+                                    {poll.poll_open_time ?
+                                    <Text theme='warning'>Market opens at {moment(poll.poll_open_time).format('MMM DD hh:mm a')}</Text>
+                                    :<></>}
+                                </View>
+                            </View>
+                        </View>
+                        :<></>}
+                    </View>
+                    :<></>}
+                </View>
+                }
+            </View>
+            {expanded ?
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, ...footer_style }}>
+                <Button transparent style={{ justifyContent:'center', alignItems:'center', borderRadius:0, padding:5, paddingRight:10, marginRight:10, borderRightWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => setShowHelp(!show_help)}>
+                    <Icons.AlertIcon color={show_help?Colors.text.error:Colors.text.warning} size={18} />
+                    <Text style={{ marginTop:2 }} theme='description' color={show_help?Colors.text.error:Colors.text.warning} textAlign='center'>{show_help?'CLOSE':'HELP'}</Text>
+                </Button>
+                <View transparent style={{ justifyContent:'center', alignItems:'center', padding:5, paddingRight:10, marginRight:10, borderRightWidth:1, borderColor:Colors.borders.light }}>
+                    <Text theme='h1' color={Colors.text.action} textAlign='center'>${(poll.minimum_stake).toFixed(2)}</Text>
+                    <Text style={{ marginTop:2 }} theme='description' textAlign='center'>MIN STAKE</Text>
+                </View>
+                <View transparent style={{ justifyContent:'center', alignItems:'center', padding:5, paddingRight:10, marginRight:10, borderRightWidth:1, borderColor:Colors.borders.light }}>
+                    <Text theme='h1' color={Colors.text.action} textAlign='center'>${(poll.max_stake).toFixed(2)}</Text>
+                    <Text style={{ marginTop:2 }} theme='description' textAlign='center'>MAX STAKE</Text>
+                </View>
+                <View style={{ flex:1 }} />
+                <View transparent style={{ justifyContent:'center', alignItems:'center', padding:5 }}>
+                    <Text theme='h1' color={Colors.text.success} textAlign='center'>${stats.total_staked.toFixed(2)}</Text>
+                    <Text style={{ marginTop:2 }} theme='description' textAlign='center'>TOTAL</Text>
+                </View>
+            </View>
+            :<></>}
+            <SocketManager
+                onConnect={() => {
+                    if(needs_reload){
+                        setNeedsReload(false);
+                        return loadMarket(poll_id) 
+                    }
+                    return
+                }}
+                onDisconnect={() => setNeedsReload(true)}
+                onSocketEvent={(ev) => {
+                    switch(ev.type){
+                        case 'UPDATE_POLL_CAMPAIGNS':
+                            if(!poll_campaign){ return }
+                            let pc = ev.poll_campaigns.find((pc:PollCampaignProps) => pc.poll_campaign_id == poll_campaign.poll_campaign_id);
+                            if(!pc){ return }
+                            setSocketCampaign(pc)
+                            break;
+                        case 'UPDATE_POLLS':
+                            if(ev.polls.length == 0){ return }
+                            if(!ev.polls[0]){ return }
+                            setSocketPolls(ev.polls)
+                            break
+                        case 'UPDATE_POLL_OPTIONS':
+                            if(ev.poll_options.length == 0){ return }
+                            let these_options = ev.poll_options.filter((po:PollOptionProps) => po.poll_id == poll_id);
+                            setSocketPollOptions(these_options)
+                            break
+                        case 'UPDATE_POLL_SUMMARIES':
+                            if(ev.poll_summaries.length == 0){ return }
+                            let these_summaries = ev.poll_summaries.filter((ps:PollSummaryProps) => ps.poll_id == poll_id);
+                            setSocketSummaries(these_summaries);
+                            break
+                        default: break;
+                    }
+                }}
+                subscribed_events={['UPDATE_POLL_CAMPAIGNS', 'UPDATE_POLLS','UPDATE_POLL_OPTIONS', 'UPDATE_POLL_SUMMARIES']}
+            />
+        </View>
+    )
+}
+
+export default FlashMarket

package/src/index.tsx

@@ -47,6 +47,7 @@ import PlayerRecommender from './PlayerRecommender';
 import ContactsCard from './PlayerRecommender/components/ContactCard';
 import ContactsSelector from './PlayerRecommender/components/ContactsSelector';
 import GolfScoreboard from './GolfScoreboard';
+import FlashMarket from './FlashMarket';
 
 export {
   Authenticator,
@@ -56,6 +57,7 @@ export {
   Ticker,
   LeaderboardCard,
   LocationTracker,
+  FlashMarket,
   ContactsCard,
   PlayerRecommender,
   GolfScoreboard,

package/src/types.d.ts

@@ -728,6 +728,7 @@ export interface PollCampaignProps {
     company_id?:string,
     admins:string[],
     phone:string,
+    market_type:'FREE'|'FOR_MONEY',
     total_responses:number,
     prize_image?:any,
     prize_override?:string,
@@ -796,8 +797,11 @@ export interface PollProps {
     poll_question: string,
     market_type:'FOR_MONEY'|'FREE',
     status:string,
+    minimum_pool?:number,
+    poll_open_time?:any,
     coupon_campaign_id?:string,
     coupon_payout_type?:any,
+    max_stake:number,
     require_resolution?:boolean,
     tie_breaker?:boolean,
     poll_type: 'select'|'input',