be-components 7.4.8 → 7.5.2

package/src/BetRouter/components/BuyOpportunities.tsx

@@ -0,0 +1,491 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { BuyOpportunity, PartnerMarketProps, RouterContestProps, RouterMarketProps, RouterMarketSideProps, RouterMarketVariableProps, RouterPartnerProps } from '../types';
+import { showConfirmAlert } from '../../Components/ConfirmAlert';
+import { BetRouterApi } from '../api';
+import { useColors } from '../../constants/useColors';
+import { ActivityIndicator, FlatList, ScrollView, Dimensions, RefreshControl, TouchableOpacity } from 'react-native';
+import { Icons, SearchBox } from '../../Components';
+import Dropdown from '../../Components/Dropdown';
+import Pagination from '../../Components/Pagination';
+import moment from 'moment-mini';
+import OpportunityDetailModal from './OpportunityDetailModal';
+import BuyOpportunityCard from './BuyOpportunityCard';
+
+type BuyOpportunitiesProps = {
+    width:number,
+    loading?:boolean,
+    router_contests: RouterContestProps[],
+    router_markets: RouterMarketProps[];
+    router_market_sides: RouterMarketSideProps[];
+    router_market_variables: RouterMarketVariableProps[];
+    partner_markets: PartnerMarketProps[];
+    partners: RouterPartnerProps[];
+    buy_opportunities: BuyOpportunity[];
+    insets?: { top: number; bottom: number; left: number; right: number };
+    onBuyOpportunity?: (opportunity: BuyOpportunity, legIndex?: number) => void;
+    onRefresh?: () => Promise<void>;
+}
+ 
+
+const BuyOpportunities = ({ width, partners, loading, router_contests, buy_opportunities, router_market_variables, router_market_sides, router_markets, insets, onBuyOpportunity, onRefresh }: BuyOpportunitiesProps) => {
+    const Colors = useColors()
+    const [refreshing, setRefreshing] = useState(false);
+    const [ opportunity_type, setOpportunityType ] = useState('All');
+    const [ offset, setOffset ] = useState(0);
+    const [ expanded_opportunities, setExpandedOpportunities ] = useState<string[]>([]);
+    const [ search_text, setSearchText ] = useState('');
+    const [ selected_date, setSelectedDate ] = useState<string | null>(null);
+    const [ selected_opportunity, setSelectedOpportunity ] = useState<BuyOpportunity | null>(null);
+    const [ modal_visible, setModalVisible ] = useState(false);
+    const [ buying, setBuying ] = useState(false);
+    const [ buy_results, setBuyResults ] = useState<any>(null);
+    const [ show_results_modal, setShowResultsModal ] = useState(false);
+    const [ selected_partner_ids, setSelectedPartnerIds ] = useState<string[]>(partners.map(p => p.partner_id));
+
+    const confirmBuy = (buy_opportunity:BuyOpportunity, legIndex?: number) => {
+        showConfirmAlert('Are you sure?', '',
+            () => handleBuy(buy_opportunity, legIndex),
+            () => console.log('')
+        )
+    }
+
+    const all_expanded = width > 1800 ? true : false
+
+    // Ensure all partners are selected when partners list changes
+    React.useEffect(() => {
+        if (partners.length > 0 && selected_partner_ids.length === 0) {
+            setSelectedPartnerIds(partners.map(p => p.partner_id));
+        }
+    }, [partners]);
+
+    // Extract unique dates from opportunities (converted to local browser time)
+    const available_dates = Array.from(new Set(
+        buy_opportunities.map(opp => {
+            const contest = router_contests?.find(c => c.router_contest_id === opp.router_contest_id);
+            if (contest?.scheduled_datetime) {
+                // Convert timestamp to local browser time and get date string
+                return moment(contest.scheduled_datetime).format('YYYY-MM-DD');
+            }
+            return null;
+        }).filter(Boolean)
+    )).sort();
+
+    const filtered_opportunities = buy_opportunities
+        .filter(opp => {
+            // Filter by opportunity type
+            const type_match = opportunity_type === 'All' || opp.opportunity_type === opportunity_type.toLowerCase().replace(' ', '_');
+
+            const contest = router_contests?.find(c => c.router_contest_id === opp.router_contest_id);
+
+            // Filter by date (using local browser time)
+            let date_match = true;
+            if (selected_date && contest?.scheduled_datetime) {
+                const opp_date = moment(contest.scheduled_datetime).format('YYYY-MM-DD');
+                date_match = opp_date === selected_date;
+            }
+
+            // Filter by contest search
+            let search_match = true;
+            if (search_text && search_text.trim() !== '') {
+                search_match = contest?.contest_label?.toLowerCase().includes(search_text.toLowerCase()) || false;
+            }
+
+            // Filter by partner - exclude if ANY leg has a partner that's not selected
+            const partner_match = opp.legs.every(leg => selected_partner_ids.includes(leg.partner_id));
+
+            return type_match && date_match && search_match && partner_match;
+        })
+        .sort((a,b) => b.expected_value - a.expected_value)
+        .slice((offset * 6), (offset * 6) + 6)
+
+    const handleBuy = async(buy_opportunity:BuyOpportunity, legIndex?: number) => {
+        try {
+            setBuying(true);
+            const result = await BetRouterApi.BetRouter.OpportunityApi.buyOpportunity(buy_opportunity);
+            setBuyResults(result);
+            setShowResultsModal(true);
+
+            // Call parent handler if provided (for refreshing data, etc.)
+            if (onBuyOpportunity) {
+                onBuyOpportunity(buy_opportunity, legIndex);
+            }
+        } catch (error) {
+            console.error('Error buying opportunity:', error);
+            alert('Error placing bets: ' + (error as any).message);
+        } finally {
+            setBuying(false);
+        }
+    }
+
+    const handleRefresh = async () => {
+        console.log('handleRefresh called, onRefresh exists:', !!onRefresh);
+        if (!onRefresh) {
+            console.log('No onRefresh prop provided');
+            return;
+        }
+
+        setRefreshing(true);
+        console.log('Starting refresh...');
+        try {
+            await onRefresh();
+            console.log('Refresh completed');
+        } catch (error) {
+            console.error('Error refreshing opportunities:', error);
+        } finally {
+            setRefreshing(false);
+            console.log('Refresh state cleared');
+        }
+    };
+
+    const renderBuyOpportunity = (renderData: { item: BuyOpportunity, index: number }) => {
+        const expanded = expanded_opportunities.includes(renderData.item.opportunity_id) || all_expanded;
+
+        return (
+            <BuyOpportunityCard
+                opportunity={renderData.item}
+                router_markets={router_markets}
+                router_market_sides={router_market_sides}
+                router_market_variables={router_market_variables}
+                partners={partners}
+                router_contests={router_contests}
+                onBuy={(opp, legIndex) => {
+                    confirmBuy(opp, legIndex);
+                }}
+                expanded={expanded}
+                onToggleExpand={all_expanded ? undefined : () => {
+                    if (expanded) {
+                        setExpandedOpportunities(expanded_opportunities.filter(eo => eo !== renderData.item.opportunity_id));
+                    } else {
+                        setExpandedOpportunities([...expanded_opportunities, renderData.item.opportunity_id]);
+                    }
+                }}
+                onPress={() => {
+                    setSelectedOpportunity(renderData.item);
+                    setModalVisible(true);
+                }}
+            />
+        );
+    };
+
+    // Render Buy Results Modal
+    const renderBuyResultsModal = () => {
+        if (!show_results_modal || !buy_results) return null;
+
+        // Use the API's summary fields
+        const success_count = buy_results.successful_orders || 0;
+        const total_count = buy_results.total_legs || 0;
+        const all_success = buy_results.success && success_count === total_count;
+        const orders = buy_results.router_orders || [];
+
+        // Calculate available height respecting insets
+        const screenHeight = Dimensions.get('window').height;
+        const topInset = insets?.top || 0;
+        const bottomInset = insets?.bottom || 0;
+        const modalPadding = 40; // 20px top + 20px bottom
+        const maxModalHeight = screenHeight - topInset - bottomInset - modalPadding;
+
+        return (
+            <View
+                style={{
+                    position: 'absolute',
+                    top: topInset,
+                    left: 0,
+                    right: 0,
+                    bottom: bottomInset,
+                    backgroundColor: Colors.views.blur,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: 20,
+                    zIndex: 1000
+                }}
+            >
+                <View float style={{ maxWidth: 600, width: '100%', height: maxModalHeight }}>
+                    <View type='header' style={{ padding: 20, borderTopLeftRadius: 8, borderTopRightRadius: 8 }}>
+                        <View transparent style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                            {all_success ? (
+                                <Icons.CheckCirlceIcon color={Colors.text.success} size={24} />
+                            ) : (
+                                <Text style={{ fontSize: 24 }}>⚠️</Text>
+                            )}
+                            <Text theme='h1' style={{ fontSize: 18 }}>
+                                {all_success ? 'Bets Placed Successfully!' : 'Partial Success'}
+                            </Text>
+                        </View>
+                        <Text theme='description' style={{ marginTop: 5 }}>
+                            {success_count}/{total_count} legs placed successfully
+                        </Text>
+                    </View>
+
+                    <View style={{ flex: 1 }}>
+                        <ScrollView style={{ flex: 1 }}>
+                            <View type='body' style={{ padding: 20 }}>
+                                {orders.map((order: any, index: number) => {
+                                const partner = partners.find(p => p.partner_id === order.partner_id);
+                                const isSuccess = order.status === 'open';
+                                return (
+                                    <View
+                                        key={index}
+                                        style={{
+                                            padding: 15,
+                                            marginBottom: 10,
+                                            backgroundColor: Colors.views.body,
+                                            borderRadius: 8,
+                                            borderWidth: 1,
+                                            borderColor: isSuccess ? Colors.text.success : Colors.text.warning
+                                        }}
+                                    >
+                                        <View transparent style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 8 }}>
+                                            <Text style={{ fontSize: 16, marginRight: 4 }}>
+                                                {isSuccess ? '✓' : '✗'}
+                                            </Text>
+                                            <Text theme='h2' style={{ marginLeft: 4, fontSize: 14 }}>
+                                                {partner?.name || order.partner_id}
+                                            </Text>
+                                        </View>
+
+                                        <Text theme='description' style={{ marginTop: 3, fontSize: 12 }}>
+                                            {order.title || 'Bet placed'}
+                                        </Text>
+
+                                        {isSuccess ? (
+                                            <>
+                                                <Text theme='description' style={{ marginTop: 5, fontSize: 11 }}>
+                                                    Order ID: {order.router_order_id || 'N/A'}
+                                                </Text>
+                                                <Text theme='description' style={{ marginTop: 2, fontSize: 11 }}>
+                                                    Amount: ${order.amount?.toFixed(2) || '0.00'}
+                                                </Text>
+                                                <Text theme='description' style={{ marginTop: 2, fontSize: 11 }}>
+                                                    Status: {order.status}
+                                                </Text>
+                                            </>
+                                        ) : (
+                                            <Text style={{ marginTop: 5, fontSize: 11, color: Colors.text.error }}>
+                                                Status: {order.status} - {order.error || 'Failed to place bet'}
+                                            </Text>
+                                        )}
+                                    </View>
+                                );
+                            })}
+                            </View>
+                        </ScrollView>
+                    </View>
+
+                    <View type='footer' style={{ padding: 15, borderBottomLeftRadius: 8, borderBottomRightRadius: 8 }}>
+                        <Button
+                            title='Close'
+                            onPress={() => {
+                                setShowResultsModal(false);
+                                setBuyResults(null);
+                            }}
+                            type='action'
+                            style={{ width: '100%' }}
+                        />
+                    </View>
+                </View>
+            </View>
+        );
+    };
+
+    return (
+        <View transparent style={{ flex:1 }}>
+            {/* Loading Overlay */}
+            {buying && (
+                <View
+                    style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundColor: Colors.views.blur,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        zIndex: 999
+                    }}
+                >
+                    <View float style={{ padding: 30, alignItems: 'center' }}>
+                        <ActivityIndicator size='large' color={Colors.text.action} />
+                        <Text theme='h2' style={{ marginTop: 15, fontSize: 16 }}>
+                            Placing Bets...
+                        </Text>
+                        <Text theme='description' style={{ marginTop: 5, fontSize: 12 }}>
+                            This may take a few moments
+                        </Text>
+                    </View>
+                </View>
+            )}
+
+            {/* Buy Results Modal */}
+            {renderBuyResultsModal()}
+
+            <OpportunityDetailModal
+                visible={modal_visible}
+                opportunity={selected_opportunity}
+                router_contests={router_contests}
+                router_markets={router_markets}
+                router_market_sides={router_market_sides}
+                partners={partners}
+                onClose={() => {
+                    setModalVisible(false);
+                    setSelectedOpportunity(null);
+                }}
+                insets={insets}
+                onBuyComplete={(result, opportunity) => {
+                    // Show results modal
+                    setBuyResults(result);
+                    setShowResultsModal(true);
+
+                    // Call parent handler if provided
+                    if (onBuyOpportunity) {
+                        onBuyOpportunity(opportunity);
+                    }
+                }}
+            />
+            <View transparent style={{ flex: 1 }}>
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                      <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center', gap:10 }}>
+                        {(loading || refreshing) ?
+                        <ActivityIndicator style={{ padding:5 }} size='small' color={Colors.text.h1} />
+                        :
+                        <TouchableOpacity onPress={handleRefresh} style={{ padding:5 }}>
+                            <Icons.RefreshIcon
+                                size={20}
+                                color={Colors.text.action}
+                            />
+                        </TouchableOpacity>
+                        }
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Buy Opportunities</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>
+                                {buy_opportunities.length} opportunit{buy_opportunities.length !== 1 ? 'ies' : 'y'} found
+                            </Text>
+                        </View>
+                      </View>
+                      <View float style={{ width:200, margin:5 }}>
+                        <Dropdown
+                            dropdown_options={[
+                                { value: '', eligible_options: ['All', 'Arbitrage', 'Middle', 'Reverse Middle'] }
+                            ]}
+                            selected_value={opportunity_type}
+                            onOptionSelect={(option) => setOpportunityType(option)}
+                        />
+                      </View>
+                    </View>
+                    <ScrollView
+                        style={{ flex: 1 }}
+                        refreshControl={
+                            <RefreshControl
+                                refreshing={refreshing}
+                                onRefresh={handleRefresh}
+                                colors={[Colors.text.action]}
+                                tintColor={Colors.text.action}
+                            />
+                        }
+                    >
+                        <View transparent style={{ padding: 10 }}>
+                            <SearchBox
+                                onChange={(text) => setSearchText(text) }
+                                hide_search_button
+                            />
+
+                            {/* Partner Filter */}
+                            <View transparent style={{ marginTop: 10, marginBottom: 5 }}>
+                                <Text theme='description' style={{ marginBottom: 5, fontSize: 12 }}>
+                                    Filter by Partners:
+                                </Text>
+                                <ScrollView
+                                    horizontal
+                                    showsHorizontalScrollIndicator={false}
+                                    contentContainerStyle={{ paddingHorizontal: 5 }}
+                                >
+                                    {partners.map(partner => {
+                                        const isSelected = selected_partner_ids.includes(partner.partner_id);
+                                        return (
+                                            <Button
+                                                key={partner.partner_id}
+                                                title={partner.name}
+                                                title_color={isSelected ? Colors.text.success : Colors.text.h1}
+                                                onPress={() => {
+                                                    if (isSelected) {
+                                                        setSelectedPartnerIds(selected_partner_ids.filter(id => id !== partner.partner_id));
+                                                    } else {
+                                                        setSelectedPartnerIds([...selected_partner_ids, partner.partner_id]);
+                                                    }
+                                                    setOffset(0); // Reset pagination
+                                                }}
+                                                style={{
+                                                    padding: 10,
+                                                    margin: 5,
+                                                    borderWidth: 1,
+                                                    borderColor: isSelected ? Colors.text.success : Colors.borders.light,
+                                                    opacity: isSelected ? 1 : 0.5
+                                                }}
+                                            />
+                                        );
+                                    })}
+                                </ScrollView>
+                            </View>
+
+                            <ScrollView
+                                horizontal
+                                showsHorizontalScrollIndicator={false}
+                                style={{ marginVertical: 10 }}
+                                contentContainerStyle={{ paddingHorizontal: 5 }}
+                            >
+                                <Button
+                                    title="All Dates"
+                                    title_color={selected_date ? Colors.text.h1 : Colors.text.success}
+                                    onPress={() => setSelectedDate(null)}
+                                    style={{ padding:10, margin:5, borderWidth:1, borderColor: selected_date ? Colors.borders.light : Colors.text.success }}
+                                />
+                                {available_dates.map((date) => {
+                                    const dateObj = moment(date as any);
+                                    const today = moment().startOf('day');
+                                    const tomorrow = moment().add(1, 'day').startOf('day');
+
+                                    const isToday = dateObj.isSame(today, 'day');
+                                    const isTomorrow = dateObj.isSame(tomorrow, 'day');
+
+                                    let displayText = '';
+                                    if (isToday) {
+                                        displayText = 'Today';
+                                    } else if (isTomorrow) {
+                                        displayText = 'Tomorrow';
+                                    } else {
+                                        displayText = dateObj.format('MMM D');
+                                    }
+
+                                    return (
+                                        <Button
+                                            key={date}
+                                            title={displayText}
+                                            title_color={selected_date == date ? Colors.text.success : Colors.text.h1}
+                                            onPress={() => setSelectedDate(date)}
+                                            style={{ padding:10, margin:5, borderWidth:1, borderColor: selected_date == date ? Colors.text.success : Colors.borders.light }}
+                                        />
+                                    );
+                                })}
+                            </ScrollView>
+                            <Pagination
+                                offset={offset}
+                                onNext={() => setOffset(offset + 1)}
+                                onPrevious={() => setOffset(offset - 1)}
+                            />
+                            <FlatList
+                                data={filtered_opportunities}
+                                keyExtractor={(item) => item.opportunity_id}
+                                renderItem={renderBuyOpportunity}
+                                scrollEnabled={false}
+                            />
+                        </View>
+                    </ScrollView>
+                </View>
+        </View>
+    )
+
+}
+
+
+export default BuyOpportunities