be-components 7.4.8 → 7.5.2

package/src/BetRouter/layouts/MobileLayout.tsx

@@ -0,0 +1,325 @@
+import React, { useState } from 'react';
+import { View, Text } from "../../Components/Themed";
+import type {
+    RouterMarketProps,
+    RouterMarketSideProps,
+    RouterMarketVariableProps,
+    RouterContestProps,
+    RouterLeagueProps,
+    RouterPartnerProps,
+    PartnerMarketProps,
+    BuyOpportunity
+} from '../types';
+import type { MyPlayerProps, GetContestResponse } from '../../types';
+import { ScrollView, TouchableOpacity } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import BuyOpportunities from '../components/BuyOpportunities';
+import MyOpportunities from '../components/MyOpportunities';
+import OpportunityHistory from '../components/OpportunityHistory';
+import ContestLiquidity from '../components/ContestLiquidity';
+import ContestSelector from '../components/ContestSelector';
+import AccountManager from '../components/AccountManager';
+import { Icons } from '../../Components';
+
+type Tab = 'opportunities' | 'my-bets' | 'contests' | 'account';
+
+type MobileLayoutProps = {
+    me: MyPlayerProps;
+    partners: RouterPartnerProps[];
+    leagues: RouterLeagueProps[];
+    selectedLeague: RouterLeagueProps | null;
+    contests: RouterContestProps[];
+    filteredContests: RouterContestProps[];
+    selectedContest: RouterContestProps | null;
+    contestDetails: GetContestResponse | undefined;
+    opportunities: {
+        router_contests: RouterContestProps[];
+        contests_processed: number;
+        total_liquidity_count: number;
+        total_opportunities: number;
+        partner_markets: PartnerMarketProps[];
+        router_market_variables: RouterMarketVariableProps[];
+        router_markets: RouterMarketProps[];
+        router_market_sides: RouterMarketSideProps[];
+        partners: RouterPartnerProps[];
+        opportunities: BuyOpportunity[];
+    };
+    opps_loading: boolean;
+    size: { width: number; height: number };
+    insets: { top: number; bottom: number; left: number; right: number };
+    onSelectLeague: (league: RouterLeagueProps) => void;
+    onSelectContest: (contest: RouterContestProps) => void;
+    onOpenAdminPortal: (initialContestId?: string, initialLeagueId?: string) => void;
+    onBuyOpportunity: (opportunity: BuyOpportunity, legIndex?: number) => void;
+    onRefreshOpportunities?: () => Promise<void>;
+};
+
+const MobileLayout = ({
+    me,
+    partners,
+    leagues,
+    selectedLeague,
+    //contests,
+    filteredContests,
+    selectedContest,
+    //contestDetails,
+    opportunities,
+    opps_loading,
+    size,
+    insets,
+    onSelectLeague,
+    onSelectContest,
+    onOpenAdminPortal,
+    onBuyOpportunity,
+    onRefreshOpportunities
+}: MobileLayoutProps) => {
+    const Colors = useColors();
+    const [activeTab, setActiveTab] = useState<Tab>('opportunities');
+
+    const renderHeader = () => (
+        <View type='header' style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: 12,
+            borderBottomWidth: 1,
+            borderBottomColor: Colors.borders.light
+        }}>
+            <View transparent style={{ flex: 1 }}>
+                <Text theme='h1' size={16}>BetRouter</Text>
+                <Text theme='description' size={11} style={{ marginTop: 2 }}>
+                    {me.username || me.email}
+                </Text>
+            </View>
+            <View transparent style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+                <View transparent style={{
+                    paddingHorizontal: 8,
+                    paddingVertical: 4,
+                    backgroundColor: Colors.views.body,
+                    borderRadius: 12
+                }}>
+                    <Text theme='description' size={11}>
+                        {opportunities.total_opportunities} Opps
+                    </Text>
+                </View>
+                <TouchableOpacity
+                    onPress={() => onOpenAdminPortal()}
+                    style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 6,
+                        backgroundColor: Colors.text.success,
+                        borderRadius: 6
+                    }}
+                >
+                    <Text theme='h2' size={12} style={{ color: '#ffffff' }}>
+                        Admin
+                    </Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    );
+
+    const renderTabBar = () => (
+        <View type='header' style={{
+            flexDirection: 'row',
+            borderTopWidth: 1,
+            borderTopColor: Colors.borders.light,
+            paddingBottom: 8,
+            paddingTop: 8
+        }}>
+            <TouchableOpacity
+                onPress={() => setActiveTab('opportunities')}
+                style={{
+                    flex: 1,
+                    alignItems: 'center',
+                    paddingVertical: 8
+                }}
+            >
+                <Icons.TargetIcon
+                    size={20}
+                    color={activeTab === 'opportunities' ? Colors.text.success : Colors.text.descriptionLight}
+                />
+                <Text
+                    theme={activeTab === 'opportunities' ? 'h2' : 'description'}
+                    size={10}
+                    style={{ marginTop: 4 }}
+                >
+                    Opportunities
+                </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+                onPress={() => setActiveTab('my-bets')}
+                style={{
+                    flex: 1,
+                    alignItems: 'center',
+                    paddingVertical: 8
+                }}
+            >
+                <Icons.FilledStar
+                    size={20}
+                    color={activeTab === 'my-bets' ? Colors.text.success : Colors.text.descriptionLight}
+                />
+                <Text
+                    theme={activeTab === 'my-bets' ? 'h2' : 'description'}
+                    size={10}
+                    style={{ marginTop: 4 }}
+                >
+                    My Bets
+                </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+                onPress={() => setActiveTab('contests')}
+                style={{
+                    flex: 1,
+                    alignItems: 'center',
+                    paddingVertical: 8
+                }}
+            >
+                <Icons.TrophyIcon
+                    size={20}
+                    color={activeTab === 'contests' ? Colors.text.success : Colors.text.descriptionLight}
+                />
+                <Text
+                    theme={activeTab === 'contests' ? 'h2' : 'description'}
+                    size={10}
+                    style={{ marginTop: 4 }}
+                >
+                    Contests
+                </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+                onPress={() => setActiveTab('account')}
+                style={{
+                    flex: 1,
+                    alignItems: 'center',
+                    paddingVertical: 8
+                }}
+            >
+                <Icons.UserIcon
+                    size={20}
+                    color={activeTab === 'account' ? Colors.text.success : Colors.text.descriptionLight}
+                />
+                <Text
+                    theme={activeTab === 'account' ? 'h2' : 'description'}
+                    size={10}
+                    style={{ marginTop: 4 }}
+                >
+                    Account
+                </Text>
+            </TouchableOpacity>
+        </View>
+    );
+
+    return (
+        <View style={{ flex: 1, backgroundColor: Colors.views.header }}>
+            {renderHeader()}
+
+            <View style={{ flex: 1 }}>
+                {/* Opportunities Tab */}
+                {activeTab === 'opportunities' && (
+                    <View style={{ flex: 1 }}>
+                        <BuyOpportunities
+                            loading={opps_loading}
+                            router_markets={opportunities.router_markets}
+                            router_market_sides={opportunities.router_market_sides}
+                            router_market_variables={opportunities.router_market_variables}
+                            partner_markets={opportunities.partner_markets}
+                            buy_opportunities={opportunities.opportunities}
+                            width={size.width}
+                            partners={opportunities.partners}
+                            router_contests={opportunities.router_contests}
+                            insets={insets}
+                            onBuyOpportunity={onBuyOpportunity}
+                            onRefresh={onRefreshOpportunities}
+                        />
+                    </View>
+                )}
+
+                {/* My Bets Tab */}
+                {activeTab === 'my-bets' && (
+                    <ScrollView style={{ flex: 1 }}>
+                        <View transparent style={{ flex: 1 }}>
+                            {/* My Active Bets */}
+                            <View float style={{ marginBottom: 8 }}>
+                                <MyOpportunities
+                                    partners={partners}
+                                    compact={false}
+                                    insets={insets}
+                                    onBuyOpportunity={onBuyOpportunity}
+                                />
+                            </View>
+
+                            {/* History/Stats */}
+                            <View float style={{ marginBottom: 8 }}>
+                                <OpportunityHistory
+                                    me={me}
+                                    compact={false}
+                                    insets={insets}
+                                    partners={partners}
+                                />
+                            </View>
+                        </View>
+                    </ScrollView>
+                )}
+
+                {/* Contests Tab */}
+                {activeTab === 'contests' && (
+                    <View style={{ flex: 1 }}>
+                        {!selectedContest ? (
+                            <ContestSelector
+                                leagues={leagues}
+                                selectedLeague={selectedLeague}
+                                contests={filteredContests}
+                                selectedContest={selectedContest}
+                                onSelectLeague={onSelectLeague}
+                                onSelectContest={onSelectContest}
+                            />
+                        ) : (
+                            <View style={{ flex: 1 }}>
+                                {/* Back button */}
+                                <View type='header' style={{ padding: 12, flexDirection: 'row', alignItems: 'center', gap: 8, borderBottomWidth: 1, borderBottomColor: Colors.borders.light }}>
+                                    <TouchableOpacity onPress={() => onSelectContest(null as any)}>
+                                        <Icons.ChevronIcon size={24} color={Colors.text.h1} direction="left" />
+                                    </TouchableOpacity>
+                                    <View transparent style={{ flex: 1 }}>
+                                        <Text theme='h2' size={14}>{selectedContest.contest_label}</Text>
+                                    </View>
+                                </View>
+                                <ScrollView style={{ flex: 1 }}>
+                                    <ContestLiquidity
+                                        router_contest_id={selectedContest.router_contest_id}
+                                        include_opportunities={true}
+                                        onBuyOpportunity={onBuyOpportunity}
+                                        me={me}
+                                        onOpenAdminPortal={onOpenAdminPortal}
+                                    />
+                                </ScrollView>
+                            </View>
+                        )}
+                    </View>
+                )}
+
+                {/* Account Tab */}
+                {activeTab === 'account' && (
+                    <ScrollView style={{ flex: 1 }}>
+                        <View transparent style={{ flex: 1 }}>
+                            <View float>
+                                <AccountManager
+                                    me={me}
+                                    onOpenAdminPortal={onOpenAdminPortal}
+                                />
+                            </View>
+                        </View>
+                    </ScrollView>
+                )}
+            </View>
+
+            {renderTabBar()}
+        </View>
+    );
+};
+
+export default MobileLayout;