be-components 7.4.7 → 7.5.1

package/src/BetRouter/components/ContestSelector.tsx

@@ -0,0 +1,179 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, Button } from "../../Components/Themed";
+import type { RouterLeagueProps, RouterContestProps } from '../types';
+import { FlatList } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import DropDown from '../../Components/Dropdown';
+import { SearchBox } from '../../Components';
+import Pagination from '../../Components/Pagination';
+import moment from 'moment-mini';
+
+type ContestSelectorProps = {
+    leagues: RouterLeagueProps[];
+    selectedLeague: RouterLeagueProps | null;
+    contests: RouterContestProps[];
+    selectedContest: RouterContestProps | null;
+    onSelectLeague: (league: RouterLeagueProps) => void;
+    onSelectContest: (contest: RouterContestProps) => void;
+};
+
+const ContestSelector = ({
+    leagues,
+    selectedLeague,
+    contests,
+    selectedContest,
+    onSelectLeague,
+    onSelectContest
+}: ContestSelectorProps) => {
+    const Colors = useColors();
+    const [contestSearchText, setContestSearchText] = useState('');
+    const [contestOffset, setContestOffset] = useState(0);
+    const contestsPerPage = 10;
+
+    // Reset pagination when league or search changes
+    useEffect(() => {
+        setContestOffset(0);
+    }, [selectedLeague, contestSearchText]);
+
+    // Filter and paginate contests
+    const searchFilteredContests = contestSearchText.trim()
+        ? contests.filter(c =>
+            c.contest_label.toLowerCase().includes(contestSearchText.toLowerCase())
+          )
+        : contests;
+
+    const paginatedContests = searchFilteredContests.slice(
+        contestOffset * contestsPerPage,
+        (contestOffset * contestsPerPage) + contestsPerPage
+    );
+
+    const totalContestPages = Math.ceil(searchFilteredContests.length / contestsPerPage);
+
+    return (
+        <View float style={{ margin: 10, flex: 1 }}>
+            <View type='header' style={{
+                padding: 10,
+                borderTopLeftRadius: 8,
+                borderTopRightRadius: 8
+            }}>
+                <Text theme='h1' style={{ fontSize: 16 }}>Contests</Text>
+                <Text theme='description' style={{ fontSize: 12, marginTop: 3 }}>
+                    {searchFilteredContests.length} of {contests.length} available
+                </Text>
+            </View>
+            <View type='body' style={{ flex: 1 }}>
+                {/* League Selector */}
+                <View transparent style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: Colors.borders.light }}>
+                    <DropDown
+                        selected_value={selectedLeague?.name || 'Select League'}
+                        dropdown_options={leagues.map(league => ({
+                            value: league.name,
+                            eligible_options: [league.name]
+                        }))}
+                        onOptionSelect={(leagueName) => {
+                            const league = leagues.find(l => l.name === leagueName);
+                            if (league) {
+                                onSelectLeague(league);
+                                setContestSearchText('');
+                                setContestOffset(0);
+                            }
+                        }}
+                    />
+                </View>
+
+                {!selectedLeague ? (
+                    <View transparent style={{ padding: 20, alignItems: 'center' }}>
+                        <Text theme='description' style={{ fontSize: 12, textAlign: 'center' }}>
+                            Select a league to view contests
+                        </Text>
+                    </View>
+                ) : contests.length === 0 ? (
+                    <View transparent style={{ padding: 20, alignItems: 'center' }}>
+                        <Text theme='description' style={{ fontSize: 12, textAlign: 'center' }}>
+                            No contests available for this league
+                        </Text>
+                    </View>
+                ) : (
+                    <>
+                        {/* Search Box */}
+                        <View transparent style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: Colors.borders.light }}>
+                            <SearchBox
+                                onChange={(text) => {
+                                    setContestSearchText(text);
+                                    setContestOffset(0);
+                                }}
+                                hide_search_button
+                            />
+                        </View>
+
+                        {/* Pagination */}
+                        {searchFilteredContests.length > contestsPerPage && (
+                            <View transparent style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: Colors.borders.light }}>
+                                <Pagination
+                                    offset={contestOffset}
+                                    onNext={() => {
+                                        if ((contestOffset + 1) < totalContestPages) {
+                                            setContestOffset(contestOffset + 1);
+                                        }
+                                    }}
+                                    onPrevious={() => {
+                                        if (contestOffset > 0) {
+                                            setContestOffset(contestOffset - 1);
+                                        }
+                                    }}
+                                />
+                            </View>
+                        )}
+
+                        {/* Contest List */}
+                        {searchFilteredContests.length === 0 ? (
+                            <View transparent style={{ padding: 20, alignItems: 'center' }}>
+                                <Text theme='description' style={{ fontSize: 12, textAlign: 'center' }}>
+                                    No contests match your search
+                                </Text>
+                            </View>
+                        ) : (
+                            <FlatList
+                                data={paginatedContests}
+                                keyExtractor={(item) => item.router_contest_id}
+                                renderItem={({ item }) => (
+                                    <Button
+                                        transparent
+                                        style={{
+                                            padding: 10,
+                                            borderBottomWidth: 1,
+                                            borderBottomColor: Colors.borders.light,
+                                            backgroundColor: selectedContest?.router_contest_id === item.router_contest_id
+                                                ? Colors.views.header
+                                                : 'transparent'
+                                        }}
+                                        onPress={() => onSelectContest(item)}
+                                    >
+                                        <View transparent style={{ flex: 1 }}>
+                                            <Text
+                                                theme='h1'
+                                                style={{ fontSize: 13 }}
+                                                numberOfLines={2}
+                                            >
+                                                {item.contest_label}
+                                            </Text>
+                                            <Text
+                                                theme='description'
+                                                style={{ fontSize: 11, marginTop: 2 }}
+                                                numberOfLines={1}
+                                            >
+                                                {moment(item.scheduled_datetime).format('ddd, MMM D [at] h:mm A')}
+                                            </Text>
+                                        </View>
+                                    </Button>
+                                )}
+                            />
+                        )}
+                    </>
+                )}
+            </View>
+        </View>
+    );
+};
+
+export default ContestSelector;

package/src/BetRouter/components/MyOpportunities.tsx

@@ -0,0 +1,279 @@
+import React, { useEffect, useState } from 'react';
+import type { OpportunityProps, OpportunityStatusLegProps, RouterOrderProps, RouterPartnerProps } from '../../types';
+import { Text, View } from '../../Components/Themed';
+import { BetRouterApi } from '../api';
+import { FlatList, TouchableOpacity } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import { SearchBox, Icons } from '../../Components';
+import Pagination from '../../Components/Pagination';
+import PlacedOpportunityModal from './PlacedOpportunityModal';
+
+type MyOpportunitiesProps = {
+    partners:RouterPartnerProps[];
+    compact?:boolean;
+    insets?: { top: number; bottom: number; left: number; right: number };
+    onBuyOpportunity?: (opportunity: any, legIndex?: number) => void;
+}
+
+const ITEMS_PER_PAGE = 5;
+
+const MyOpportunities = ({ partners, compact = false, insets }:MyOpportunitiesProps) => {
+    const Colors = useColors();
+
+    const [ state, setState ] = useState<{
+        loading:boolean,
+        opportunities:OpportunityProps[],
+        opportunity_status_legs: OpportunityStatusLegProps[],
+        router_orders:RouterOrderProps[],
+        searchText: string,
+        currentPage: number,
+        selectedOpportunity: OpportunityProps | null,
+        showDetailModal: boolean
+    }>({
+        loading:false,
+        opportunities:[],
+        opportunity_status_legs:[],
+        router_orders:[],
+        searchText: '',
+        currentPage: 0,
+        selectedOpportunity: null,
+        showDetailModal: false
+    });
+
+    const { loading, opportunities, router_orders, searchText, currentPage, selectedOpportunity, showDetailModal } = state;
+
+    useEffect(() => {
+        BetRouterApi.setEnvironment();
+        getOpportunities();
+    },[]);
+
+    const getOpportunities = async() => {
+        setState({ ...state, loading: true });
+        const opps = await BetRouterApi.BetRouter.OpportunityApi.getMyOpenOpportunities();
+        setState({
+            ...state,
+            router_orders: opps.router_orders,
+            opportunities: opps.opportunities,
+            opportunity_status_legs: opps.opportunity_status_legs,
+            loading: false
+        })
+    }
+
+    // Filter and paginate opportunities
+    const filteredOpportunities = opportunities.filter(opp => {
+        if (!searchText) return true;
+
+        // Search in opportunity type
+        if (opp.opportunity_type.toLowerCase().includes(searchText.toLowerCase())) return true;
+
+        // Search in order titles
+        const oppOrders = router_orders.filter(order => order.opportunity_id === opp.opportunity_id);
+        return oppOrders.some(order => order.title?.toLowerCase().includes(searchText.toLowerCase()));
+    });
+
+    const totalPages = Math.ceil(filteredOpportunities.length / ITEMS_PER_PAGE);
+    const paginatedOpportunities = filteredOpportunities.slice(
+        currentPage * ITEMS_PER_PAGE,
+        (currentPage + 1) * ITEMS_PER_PAGE
+    );
+
+    const handleOpenDetail = (opp: OpportunityProps) => {
+        setState({ ...state, selectedOpportunity: opp, showDetailModal: true });
+    };
+
+    const handleCloseDetail = () => {
+        setState({ ...state, selectedOpportunity: null, showDetailModal: false });
+    };
+
+
+    const renderOpportunityCard = (data:{ item:OpportunityProps, index:number }) => {
+        const opp = data.item;
+        const isProfitable = (opp.expected_profit || 0) > 0;
+        const oppOrders = router_orders.filter(order => order.opportunity_id === opp.opportunity_id);
+        const firstOrder = oppOrders[0];
+        const partner = partners.find(p => p.partner_id === firstOrder?.partner_id);
+
+        return (
+            <TouchableOpacity onPress={() => handleOpenDetail(opp)}>
+                <View type='row' style={{ padding: 12, borderBottomWidth: 1, borderBottomColor: Colors.borders.light, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <View transparent style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+                        {/* Type & Profit */}
+                        <View transparent style={{ minWidth: 60 }}>
+                            <Text theme='h2' size={11} numberOfLines={1}>
+                                {opp.opportunity_type.toUpperCase()}
+                            </Text>
+                            <Text
+                                theme='h2'
+                                size={13}
+                                color={isProfitable ? Colors.text.success : Colors.text.warning}
+                            >
+                                ${(opp.expected_profit || 0).toFixed(2)}
+                            </Text>
+                        </View>
+
+                        {/* Partner/Contest */}
+                        <View transparent style={{ flex: 1, minWidth: 0 }}>
+                            {firstOrder && (
+                                <Text theme='description' size={11} numberOfLines={1}>
+                                    {partner?.name || 'Unknown'}
+                                </Text>
+                            )}
+                            <Text theme='description' size={10} numberOfLines={1}>
+                                {oppOrders.length} leg{oppOrders.length !== 1 ? 's' : ''}
+                            </Text>
+                        </View>
+
+                        {/* Bet */}
+                        <View transparent style={{ minWidth: 40 }}>
+                            <Text theme='h2' size={11}>
+                                ${opp.total_bet_amount.toFixed(0)}
+                            </Text>
+                        </View>
+
+                        {/* ROI */}
+                        <View transparent style={{ minWidth: 45 }}>
+                            <Text theme='h2' size={11}>
+                                {opp.expected_roi.toFixed(1)}%
+                            </Text>
+                        </View>
+
+                        {/* Status */}
+                        <View transparent style={{ minWidth: 20 }}>
+                            <Text theme='h2' size={13}>
+                                {opp.fill_status === 'all_filled' ? '✓' :
+                                 opp.fill_status === 'partially_filled' ? '⚠' :
+                                 opp.fill_status === 'failed' ? '✗' : '⋯'}
+                            </Text>
+                        </View>
+                    </View>
+
+                    <Icons.ChevronIcon size={16} color={Colors.text.descriptionLight} direction="right" />
+                </View>
+            </TouchableOpacity>
+        );
+    };
+
+    const renderOpportunities = (data:{ item:OpportunityProps, index:number }) => {
+        const opp = data.item;
+        const isProfitable = (opp.expected_profit || 0) > 0;
+
+        // Get orders for this opportunity
+        const oppOrders = router_orders.filter(order => order.opportunity_id === opp.opportunity_id);
+
+        if (compact) {
+            // Compact mode for desktop sidebar - show minimal info, clickable
+            return (
+                <TouchableOpacity onPress={() => handleOpenDetail(opp)}>
+                    <View type='row' style={{ padding:10, borderBottomWidth:1, borderBottomColor: Colors.borders.light }}>
+                        <View transparent style={{ flex:1 }}>
+                            <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom:6 }}>
+                                <Text theme='h1' size={14} numberOfLines={1}>
+                                    {opp.opportunity_type.toUpperCase()}
+                                </Text>
+                                <Text
+                                    theme='h2'
+                                    size={14}
+                                    color={isProfitable ? Colors.text.success : Colors.text.warning}
+                                >
+                                    ${(opp.expected_profit || 0).toFixed(2)}
+                                </Text>
+                            </View>
+
+                            <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                                <Text theme='description' size={11}>
+                                    {oppOrders.length} leg{oppOrders.length !== 1 ? 's' : ''} • ${opp.total_bet_amount.toFixed(2)}
+                                </Text>
+                                <Text theme='description' size={11}>
+                                    ROI: {opp.expected_roi.toFixed(1)}%
+                                </Text>
+                            </View>
+                        </View>
+                    </View>
+                </TouchableOpacity>
+            );
+        }
+
+        // Mobile-friendly card layout
+        return renderOpportunityCard(data);
+    }
+
+    const displayData = compact ? opportunities : paginatedOpportunities;
+
+    return (
+        <View style={{ flex:1 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:compact ? 8 : 10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+              <View transparent style={{ flex:1 }}>
+                <Text theme='h1' style={{ fontSize: compact ? 14 : 16 }}>
+                    {compact ? 'My Bets' : 'My Active Opportunities'}
+                </Text>
+                {compact && (
+                    <Text theme='description' style={{ fontSize:11, marginTop:2 }}>
+                        {opportunities.length} active
+                    </Text>
+                )}
+              </View>
+            </View>
+
+            {/* Search - only show if not compact */}
+            {!compact && (
+                <View transparent style={{ padding: 12, paddingBottom: 0 }}>
+                    <SearchBox
+                        placeholder="Search by contest..."
+                        onChange={(text) => setState({ ...state, searchText: text, currentPage: 0 })}
+                        hide_search_button
+                    />
+                </View>
+            )}
+
+            <View type='body' style={{ flex:1 }}>
+                {loading ? (
+                    <View transparent style={{ padding:10 }}>
+                        <Text theme='description' style={{ fontSize: compact ? 11 : 13 }}>
+                            Loading...
+                        </Text>
+                    </View>
+                ) : filteredOpportunities.length === 0 ? (
+                    <View transparent style={{ padding:10 }}>
+                        <Text theme='description' style={{ fontSize: compact ? 11 : 13 }}>
+                            {searchText ? 'No opportunities match your search' : 'No active opportunities'}
+                        </Text>
+                    </View>
+                ) : (
+                    <>
+                        <FlatList
+                            key='my_opps_list'
+                            data={displayData}
+                            keyExtractor={(item) => item.opportunity_id}
+                            renderItem={renderOpportunities}
+                        />
+
+                        {/* Pagination - only show if not compact */}
+                        {!compact && totalPages > 1 && (
+                            <View transparent style={{ padding: 12 }}>
+                                <Pagination
+                                    offset={currentPage}
+                                    pages={totalPages}
+                                    onSelectPage={(page) => setState({ ...state, currentPage: page })}
+                                />
+                                <Text theme='description' size={11} style={{ marginTop: 8, textAlign: 'center' }}>
+                                    Showing {currentPage * ITEMS_PER_PAGE + 1}-{Math.min((currentPage + 1) * ITEMS_PER_PAGE, filteredOpportunities.length)} of {filteredOpportunities.length}
+                                </Text>
+                            </View>
+                        )}
+                    </>
+                )}
+            </View>
+
+            <PlacedOpportunityModal
+                visible={showDetailModal}
+                opportunity={selectedOpportunity}
+                orders={router_orders}
+                partners={partners}
+                onClose={handleCloseDetail}
+                insets={insets}
+            />
+        </View>
+    )
+}
+
+export default MyOpportunities