be-components 7.4.8 → 7.5.1

package/src/BetRouter/components/AccountManager.tsx

@@ -0,0 +1,533 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Button } from "../../Components/Themed";
+import { BetRouterApi } from '../api';
+import type { RouterAccountProps, AccountPartnerProps, RouterPartnerProps } from '../types';
+import type { MyPlayerProps } from '../../types';
+import { ActivityIndicator, Modal, Image, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import PartnerCredentials from './PartnerCredentials';
+import { Icons } from '../../Components';
+
+type AccountManagerProps = {
+    me?: MyPlayerProps
+    onOpenAdminPortal?: () => void
+}
+
+/**
+ * This is where a user can manage their account.
+ * - Upon load it should grab the following data
+ * - getMyDetails - bettoredge auth-svc - this will contain the users profile information on BE
+ * - getMyAccount - should retrieve their router_account attached to their bettoredge id
+ * - getMyAccountPartners - should retrieve their account_partners (i.e., partner connections - bettoredge, kalshi, etc),
+ * - getMyBalances - should retrieve their balances and a combined balance amount
+ * @param param0
+ */
+const AccountManager = ({ me, onOpenAdminPortal }: AccountManagerProps) => {
+    const Colors = useColors();
+    const [loading, setLoading] = useState(false);
+    const [account, setAccount] = useState<RouterAccountProps | null>(null);
+    const [accountPartners, setAccountPartners] = useState<AccountPartnerProps[]>([]);
+    const [partners, setPartners] = useState<RouterPartnerProps[]>([]);
+    const [totalBalance, setTotalBalance] = useState(0);
+    const [error, setError] = useState<string | null>(null);
+    const [selectedAccountPartner, setSelectedAccountPartner] = useState<AccountPartnerProps | null>(null);
+    const [showCredentialsModal, setShowCredentialsModal] = useState(false);
+    const [showSettingsModal, setShowSettingsModal] = useState(false);
+    const [modalKey, setModalKey] = useState(0);
+
+    useEffect(() => {
+        if (me?.player_id) {
+            BetRouterApi.setEnvironment();
+            loadAccountData();
+        }
+    }, [me?.player_id]);
+
+    const loadAccountData = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            // Load all partners first so we can display names
+            const partnersData = await BetRouterApi.BetRouter.PartnerApi.getPartners();
+            setPartners(partnersData);
+
+            // Load account details
+            const accountData = await BetRouterApi.BetRouter.AccountApi.getMe();
+            
+            setAccount(accountData.account);
+
+            // Load account balances
+            const balanceData = await BetRouterApi.BetRouter.AccountApi.getMyBalance();
+            setAccountPartners(balanceData.account_partners);
+            setTotalBalance(balanceData.balance);
+        } catch (e) {
+            console.error('Error loading account data:', e);
+            setError('Failed to load account data');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleJoinRouter = async () => {
+        try {
+            setLoading(true);
+            const result = await BetRouterApi.BetRouter.AccountApi.join();
+            setAccount(result.account);
+        } catch (e) {
+            console.error('Error joining router:', e);
+            setError('Failed to join router');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleLeaveRouter = async () => {
+        try {
+            setLoading(true);
+            const result = await BetRouterApi.BetRouter.AccountApi.leave();
+            setAccount(result.account);
+        } catch (e) {
+            console.error('Error leaving router:', e);
+            setError('Failed to leave router');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleConnectPartner = async (partner_id: string) => {
+        try {
+            setLoading(true);
+            await BetRouterApi.BetRouter.AccountApi.connectPartner(partner_id);
+            await loadAccountData(); // Refresh data
+        } catch (e) {
+            console.error('Error connecting partner:', e);
+            setError('Failed to connect partner');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleDisconnectPartner = async (partner_id: string) => {
+        try {
+            setLoading(true);
+            await BetRouterApi.BetRouter.AccountApi.disconnectPartner(partner_id);
+            await loadAccountData(); // Refresh data
+        } catch (e) {
+            console.error('Error disconnecting partner:', e);
+            setError('Failed to disconnect partner');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleTestCredentials = async (partner_id: string) => {
+        try {
+            setLoading(true);
+            setError(null);
+            await BetRouterApi.BetRouter.AccountApi.testPartnerCredentials(partner_id);
+            await loadAccountData(); // Refresh to get updated status
+
+            // Show success message
+            const partner = partners.find(p => p.partner_id === partner_id);
+            alert(`✓ ${partner?.name || 'Partner'} credentials tested successfully! Status updated.`);
+        } catch (e: any) {
+            console.error('Error testing credentials:', e);
+            const errorMsg = e?.response?.data?.message || e?.message || 'Credential test failed. Please check your credentials and try again.';
+            setError(errorMsg);
+            alert(`✗ Credential test failed: ${errorMsg}`);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleUpdateBalance = async () => {
+        try {
+            setLoading(true);
+            await BetRouterApi.BetRouter.AccountApi.updateBalance();
+            await loadAccountData(); // Refresh data
+        } catch (e) {
+            console.error('Error updating balance:', e);
+            setError('Failed to update balance');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleUpdateCredentials = async (partner_id: string, credentials: Record<string, any>) => {
+        try {
+            await BetRouterApi.BetRouter.AccountApi.updatePartnerCredentials(partner_id, credentials);
+            await loadAccountData(); // Refresh data
+        } catch (e) {
+            console.error('Error updating credentials:', e);
+            throw e;
+        }
+    };
+
+    const handleOpenCredentials = (accountPartner: AccountPartnerProps) => {
+        setSelectedAccountPartner(accountPartner);
+        // Close settings modal first to avoid nested modals on iOS
+        setShowSettingsModal(false);
+        // Delay opening credentials modal to prevent crash
+        setTimeout(() => {
+            setShowCredentialsModal(true);
+        }, 300);
+    };
+
+    const handleCloseCredentials = () => {
+        setShowCredentialsModal(false);
+        setSelectedAccountPartner(null);
+        // Delay reopening settings modal to prevent crash
+        setTimeout(() => {
+            setShowSettingsModal(true);
+        }, 300);
+    };
+
+    const renderPartner = ({ item }: { item: RouterPartnerProps | AccountPartnerProps }) => {
+        // Check if this is an AccountPartnerProps (has account_partner_id) or just a RouterPartnerProps
+        const isAccountPartner = 'account_partner_id' in item;
+        const accountPartner = isAccountPartner ? item as AccountPartnerProps : accountPartners.find(ap => ap.partner_id === item.partner_id);
+        const partner = isAccountPartner
+            ? partners.find(p => p.partner_id === (item as AccountPartnerProps).partner_id)
+            : item as RouterPartnerProps;
+
+        // If no account_partner exists, show as "Not Connected"
+        if (!accountPartner) {
+            return (
+                <View style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: Colors.borders.light }}>
+                    <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <View transparent style={{ flex: 1 }}>
+                            <Text theme='h1'>{partner?.name || item.partner_id}</Text>
+                            <Text
+                                theme='description'
+                                style={{ marginTop: 3 }}
+                                color={Colors.text.description}
+                            >
+                                Status: Not Connected
+                            </Text>
+                        </View>
+                        <View transparent style={{ flexDirection: 'row', gap: 8 }}>
+                            <Button
+                                type='success'
+                                title='Connect'
+                                onPress={() => handleConnectPartner(item.partner_id)}
+                                disabled={loading}
+                            />
+                        </View>
+                    </View>
+                </View>
+            );
+        }
+
+        const isInactive = accountPartner.status === 'inactive';
+        const isConnected = accountPartner.status === 'active';
+        const isPending = accountPartner.status === 'inactive' && accountPartner.encrypted_credentials;
+        const isActive = accountPartner.status === 'active';
+        const hasCredentials = accountPartner.encrypted_credentials && accountPartner.encrypted_credentials.trim() !== '';
+
+        // Determine status color
+        let statusColor = Colors.text.error; // default for inactive/disconnected
+        if (isConnected || isActive) {
+            statusColor = Colors.text.success;
+        } else if (isPending) {
+            statusColor = Colors.text.warning;
+        }
+
+        return (
+            <View style={{ padding: 10, borderBottomWidth: 1, borderColor: Colors.borders.light }}>
+                <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <View transparent style={{ flex: 1 }}>
+                        <Text theme='h1'>{partner?.name || accountPartner.partner_id}</Text>
+                        <Text
+                            theme='description'
+                            style={{ marginTop: 3 }}
+                            color={statusColor}
+                        >
+                            Status: {accountPartner.status}
+                        </Text>
+                        {!isInactive && (
+                            <Text theme='description'>Balance: ${accountPartner.balance.toFixed(2)}</Text>
+                        )}
+                    </View>
+                    <View transparent style={{ flexDirection: 'row', gap: 8 }}>
+                        {isInactive ? (
+                            // Inactive partners - show different buttons based on credentials
+                            <>
+                                <Button
+                                    type='info'
+                                    title={hasCredentials ? 'Update Credentials' : 'Add Credentials'}
+                                    onPress={() => handleOpenCredentials(accountPartner)}
+                                />
+                                {hasCredentials && (
+                                    <Button
+                                        type='success'
+                                        title='Test'
+                                        onPress={() => handleTestCredentials(accountPartner.partner_id)}
+                                        disabled={loading}
+                                    />
+                                )}
+                            </>
+                        ) : (
+                            // Show management buttons for active/pending partners
+                            <>
+                                <Button
+                                    type='info'
+                                    title='Update'
+                                    onPress={() => handleOpenCredentials(accountPartner)}
+                                />
+                                {isPending && (
+                                    <Button
+                                        title='Test'
+                                        onPress={() => handleTestCredentials(accountPartner.partner_id)}
+                                        disabled={loading}
+                                    />
+                                )}
+                                <Button
+                                    type='error'
+                                    title='Disconnect'
+                                    onPress={() => handleDisconnectPartner(accountPartner.partner_id)}
+                                    disabled={loading}
+                                />
+                            </>
+                        )}
+                    </View>
+                </View>
+            </View>
+        );
+    };
+
+    if (loading && !account) {
+        return (
+            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                <ActivityIndicator size="large" />
+                <Text style={{ marginTop: 10 }}>Loading account...</Text>
+            </View>
+        );
+    }
+
+    if (!account) {
+        return (
+            <View style={{ flex: 1, padding: 20 }}>
+                <View float style={{ padding: 20 }}>
+                    <Text theme='h1' style={{ marginBottom: 10 }}>Welcome to BetRouter</Text>
+                    <Text theme='description' style={{ marginBottom: 20 }}>
+                        You don't have a router account yet. Join to start using BetRouter features.
+                    </Text>
+                    <Button
+                        title='Join Router'
+                        onPress={handleJoinRouter}
+                        disabled={loading}
+                    />
+                    {error && (
+                        <Text style={{ color: Colors.text.error, marginTop: 10 }}>{error}</Text>
+                    )}
+                </View>
+            </View>
+        );
+    }
+
+    const connectedCount = accountPartners.filter(ap => ap.status === 'active').length;
+
+    const formatCurrency = (value: number) => {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: 'USD'
+        }).format(value);
+    };
+
+    return (
+        <View style={{ flex: 1 }}>
+            {/* Compact Account Header */}
+            <View float style={{ margin: 10 }}>
+                <View type='body' style={{ padding: 12, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                    {/* Profile Section */}
+                    <View transparent style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
+                        {me?.profile_pic ? (
+                            <Image
+                                source={{ uri: me.profile_pic }}
+                                style={{ width: 48, height: 48, borderRadius: 24, marginRight: 12 }}
+                            />
+                        ) : (
+                            <View style={{
+                                width: 48,
+                                height: 48,
+                                borderRadius: 24,
+                                backgroundColor: Colors.buttons.background.action,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                marginRight: 12
+                            }}>
+                                <Text style={{ color: Colors.text.white, fontSize: 18, fontWeight: '600' }}>
+                                    {me?.username?.charAt(0).toUpperCase() || '?'}
+                                </Text>
+                            </View>
+                        )}
+                        <View transparent style={{ flex: 1 }}>
+                            <Text theme='h1' size={16}>{me?.username || 'User'}</Text>
+                            <Text theme='description' size={12} style={{ marginTop: 2 }}>
+                                {connectedCount} partner{connectedCount !== 1 ? 's' : ''} connected
+                            </Text>
+                        </View>
+                    </View>
+
+                    {/* Balance & Settings */}
+                    <View transparent style={{ alignItems: 'center', flexDirection: 'row', gap: 10 }}>
+                        <View transparent style={{ alignItems: 'flex-end', marginRight:10 }}>
+                            <Text theme='description' size={11}>Total Balance</Text>
+                            <Text theme='h1' size={18} color={Colors.text.success}>
+                                {formatCurrency(totalBalance)}
+                            </Text>
+                        </View>
+                        {me?.role === 'admin' && onOpenAdminPortal && (
+                            <Button
+                                type='action'
+                                float
+                                title='Admin'
+                                onPress={onOpenAdminPortal}
+                            />
+                        )}
+                        <Button
+                            type='info'
+                            float
+                            onPress={() => {
+                                setModalKey(prev => prev + 1);
+                                setShowSettingsModal(true);
+                            }}
+                        >
+                            <Icons.SettingsIcon size={14} color={Colors.text.h1} />
+                        </Button>
+                    </View>
+                </View>
+            </View>
+
+            {error && (
+                <View style={{ padding: 10, margin: 10 }}>
+                    <Text style={{ color: Colors.text.error }}>{error}</Text>
+                </View>
+            )}
+
+            {/* Settings Modal */}
+            <Modal
+                key={`settings-modal-${modalKey}`}
+                visible={showSettingsModal}
+                transparent={true}
+                animationType="none"
+                onRequestClose={() => setShowSettingsModal(false)}
+                statusBarTranslucent={true}
+            >
+                <View style={{
+                    flex: 1,
+                    backgroundColor: 'rgba(0,0,0,0.5)',
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }}>
+                    <TouchableOpacity
+                        activeOpacity={1}
+                        style={{
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0
+                        }}
+                        onPress={() => setShowSettingsModal(false)}
+                    />
+                    <View float style={{
+                        width: Math.min(Dimensions.get('window').width * 0.9, 600),
+                        maxHeight: Dimensions.get('window').height * 0.8,
+                        borderRadius: 8,
+                        overflow: 'hidden'
+                    }}>
+                            {/* Modal Header */}
+                            <View type='header' style={{
+                                padding: 15,
+                                borderTopLeftRadius: 8,
+                                borderTopRightRadius: 8,
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between'
+                            }}>
+                                <View transparent>
+                                    <Text theme='h1'>Account Settings</Text>
+                                    <Text theme='description' style={{ marginTop: 3 }}>
+                                        Manage partners and balances
+                                    </Text>
+                                </View>
+                                <Button
+                                    type='text'
+                                    title='Close'
+                                    onPress={() => setShowSettingsModal(false)}
+                                />
+                            </View>
+
+                            {/* Modal Body */}
+                            <ScrollView style={{ maxHeight: 500 }}>
+                                <View type='body' style={{ padding: 15 }}>
+                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 15 }}>
+                                        <View transparent>
+                                            <Text theme='description' size={12}>Account Status</Text>
+                                            <Text theme='h2'>{account?.status || 'N/A'}</Text>
+                                        </View>
+                                        <Button
+                                            title='Refresh Balance'
+                                            onPress={handleUpdateBalance}
+                                            disabled={loading}
+                                        />
+                                    </View>
+
+                                    <Text theme='h2' style={{ marginBottom: 10, marginTop: 10 }}>
+                                        All Partners ({partners.length})
+                                    </Text>
+
+                                    {partners.length === 0 ? (
+                                        <View transparent style={{ padding: 20, alignItems: 'center' }}>
+                                            <Text theme='description'>No partners available</Text>
+                                        </View>
+                                    ) : (
+                                        partners.map((partner) => (
+                                            <View key={partner.partner_id} transparent>
+                                                {renderPartner({ item: partner } as any)}
+                                            </View>
+                                        ))
+                                    )}
+                                    </View>
+                                </ScrollView>
+
+                                {/* Modal Footer */}
+                            <View type='footer' style={{
+                                padding: 15,
+                                borderBottomLeftRadius: 8,
+                                borderBottomRightRadius: 8,
+                                flexDirection: 'row',
+                                justifyContent: 'space-between'
+                            }}>
+                                {account?.status === 'active' && (
+                                    <Button
+                                        type='error'
+                                        style={{ flex:1 }}
+                                        title='Disconnect All'
+                                        onPress={async () => {
+                                            await handleLeaveRouter();
+                                            setShowSettingsModal(false);
+                                        }}
+                                        disabled={loading}
+                                    />
+                                )}
+                            </View>
+                    </View>
+                </View>
+            </Modal>
+
+            {/* Partner Credentials Modal */}
+            {selectedAccountPartner && (
+                <PartnerCredentials
+                    visible={showCredentialsModal}
+                    accountPartner={selectedAccountPartner}
+                    partner={partners.find(p => p.partner_id === selectedAccountPartner.partner_id)!}
+                    onClose={handleCloseCredentials}
+                    onUpdate={handleUpdateCredentials}
+                />
+            )}
+        </View>
+    );
+}
+
+export default AccountManager;

package/src/BetRouter/components/AdminPortal.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { View } from "../../Components/Themed";
+import DesktopAdminLayout from '../layouts/DesktopAdminLayout';
+import MobileAdminLayout from '../layouts/MobileAdminLayout';
+
+type AdminPortalProps = {
+    insets: { top: number; bottom: number; left: number; right: number };
+    onClose?: () => void;
+    initialContestId?: string; // Optional contest ID to deep link to
+    initialLeagueId?: string; // Optional league ID to deep link to
+};
+
+const AdminPortal = ({ insets, onClose, initialContestId, initialLeagueId }: AdminPortalProps) => {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const isDesktop = size.width > 768;
+
+    return (
+        <View
+            style={{ flex: 1 }}
+            onLayout={(ev) => {
+                const { height, width } = ev.nativeEvent.layout;
+                setSize({ height, width });
+            }}
+        >
+            {isDesktop ? (
+                <DesktopAdminLayout
+                    insets={insets}
+                    onClose={onClose}
+                    initialContestId={initialContestId}
+                    initialLeagueId={initialLeagueId}
+                />
+            ) : (
+                <MobileAdminLayout
+                    insets={insets}
+                    onClose={onClose}
+                    initialContestId={initialContestId}
+                    initialLeagueId={initialLeagueId}
+                />
+            )}
+        </View>
+    );
+};
+
+export default AdminPortal;