be-components 7.4.8 → 7.5.1

package/src/BetRouter/components/OpportunityDetailModal.tsx

@@ -0,0 +1,360 @@
+import React from 'react';
+import { Modal, ScrollView, ActivityIndicator, Dimensions } from 'react-native';
+import { Button, Text, View } from "../../Components/Themed";
+import type { BuyOpportunity, RouterContestProps, RouterMarketProps, RouterMarketSideProps, RouterPartnerProps } from '../types';
+import { showConfirmAlert } from '../../Components/ConfirmAlert';
+import { BetRouterApi } from '../api';
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+
+type OpportunityDetailModalProps = {
+    visible: boolean;
+    opportunity: BuyOpportunity | null;
+    router_contests: RouterContestProps[];
+    router_markets: RouterMarketProps[];
+    router_market_sides: RouterMarketSideProps[];
+    partners: RouterPartnerProps[];
+    onClose: () => void;
+    insets?: { top: number; bottom: number; left: number; right: number };
+    onBuyComplete?: (result: any, opportunity: BuyOpportunity) => void;
+}
+
+const OpportunityDetailModal = ({
+    visible,
+    opportunity,
+    router_contests,
+    router_markets,
+    router_market_sides,
+    partners,
+    onClose,
+    insets,
+    onBuyComplete
+}: OpportunityDetailModalProps) => {
+    const Colors = useColors();
+    const [buying, setBuying] = React.useState(false);
+
+    if (!opportunity) return null;
+
+    console.log('OpportunityDetailModal - opportunity:', opportunity);
+
+    const market = router_markets?.find(m => m.router_market_id === opportunity.router_market_id);
+    const contest = router_contests?.find(c => c.router_contest_id === opportunity.router_contest_id);
+
+    const confirmBuyAll = () => {
+        showConfirmAlert(
+            'Buy All Legs?',
+            `Are you sure you want to buy all ${opportunity.legs.length} legs of this opportunity?`,
+            () => handleBuy(opportunity),
+            () => console.log('cancelled')
+        );
+    };
+
+    const confirmBuyLeg = (legIndex: number) => {
+        const leg = opportunity.legs[legIndex];
+        if(!leg){ return alert('Unable to profess') }
+        const partner = partners.find(p => p.partner_id === leg.partner_id);
+        showConfirmAlert(
+            'Buy Single Leg?',
+            `Are you sure you want to buy only this leg from ${partner?.name}?`,
+            () => handleBuySingleLeg(legIndex),
+            () => console.log('cancelled')
+        );
+    };
+
+    const handleBuy = async(buy_opportunity: BuyOpportunity) => {
+        try {
+            setBuying(true);
+            const result = await BetRouterApi.BetRouter.OpportunityApi.buyOpportunity(buy_opportunity);
+            setBuying(false);
+
+            // Pass result to parent handler
+            if (onBuyComplete) {
+                onBuyComplete(result, buy_opportunity);
+            }
+
+            onClose();
+        } catch (error) {
+            setBuying(false);
+            console.error('Error buying opportunity:', error);
+            alert('Error placing bets: ' + (error as any).message);
+        }
+    };
+
+    const handleBuySingleLeg = async(legIndex: number) => {
+        const leg = opportunity.legs[legIndex];
+        if(!leg){ return alert('Unable to process') }
+
+        // Create a modified opportunity with only one leg
+        const singleLegOpp: BuyOpportunity = {
+            ...opportunity,
+            legs: [leg]
+        };
+
+        try {
+            setBuying(true);
+            const result = await BetRouterApi.BetRouter.OpportunityApi.buyOpportunity(singleLegOpp);
+            setBuying(false);
+
+            // Pass result to parent handler
+            if (onBuyComplete) {
+                onBuyComplete(result, singleLegOpp);
+            }
+
+            onClose();
+        } catch (error) {
+            setBuying(false);
+            console.error('Error buying single leg:', error);
+            alert('Error placing bet: ' + (error as any).message);
+        }
+    };
+
+    const getOpportunityIcon = () => {
+        if (opportunity.opportunity_type === 'arbitrage') {
+            return <Icons.BankIcon size={24} color={Colors.text.gold} />;
+        } else if (opportunity.opportunity_type === 'middle') {
+            return <Icons.TargetIcon size={24} color={Colors.text.action} />;
+        } else {
+            return <Icons.EmbedIcon size={24} color={Colors.text.warning} />;
+        }
+    };
+
+    const is_green = opportunity.opportunity_with_fee;
+
+    // Calculate available height respecting insets
+    const screenHeight = Dimensions.get('window').height;
+    const topInset = insets?.top || 0;
+    const bottomInset = insets?.bottom || 0;
+    const modalPadding = 40;
+    const maxModalHeight = screenHeight - topInset - bottomInset - modalPadding;
+
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="fade"
+            onRequestClose={onClose}
+        >
+            <View transparent style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.7)', justifyContent: 'center', alignItems: 'center', paddingTop: topInset, paddingBottom: bottomInset, paddingHorizontal: 20 }}>
+                <View float style={{ width: '100%', maxWidth: 1200, height: maxModalHeight, borderRadius: 12, overflow: 'hidden' }}>
+                    {/* Header */}
+                    <View type='header' style={{ padding: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <View transparent style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
+                            <View float style={{ padding: 8, marginRight: 12 }}>
+                                {getOpportunityIcon()}
+                            </View>
+                            <View transparent style={{ flex: 1 }}>
+                                <Text theme='h1' size={20}>
+                                    {opportunity.opportunity_type.charAt(0).toUpperCase() + opportunity.opportunity_type.slice(1).replace('_', ' ')} Opportunity
+                                </Text>
+                                <Text theme='description' style={{ marginTop: 4 }}>
+                                    {contest?.contest_label} - {market?.market_label}
+                                </Text>
+                            </View>
+                        </View>
+                        <Button
+                            title="✕"
+                            onPress={onClose}
+                            float
+                            style={{ padding: 10, minWidth: 40 }}
+                        />
+                    </View>
+
+                    {/* Content - wrap ScrollView in View with flex:1 for iOS */}
+                    <View style={{ flex: 1 }}>
+                        <ScrollView style={{ flex: 1 }}>
+                            {/* Profit Flow Section */}
+                        <View transparent style={{ padding: 20, paddingBottom: 10 }}>
+                            <Text theme='h2' size={16} style={{ marginBottom: 15 }}>
+                                Profit Breakdown
+                            </Text>
+                            <View transparent style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap' }}>
+                                <View transparent style={{ minWidth: 120, margin: 5 }}>
+                                    <Text theme='description' size={12}>Total Investment</Text>
+                                    <Text theme='h2' size={18}>${opportunity.investment.toFixed(2)}</Text>
+                                </View>
+                                <View transparent style={{ padding: 5 }}>
+                                    <Text theme='h1' size={20}>→</Text>
+                                </View>
+                                <View transparent style={{ minWidth: 120, margin: 5 }}>
+                                    <Text theme='description' size={12}>Max Win Amount</Text>
+                                    <Text theme='h2' size={18} color={Colors.text.success}>
+                                        ${(opportunity.total_potential_winnings ?? 0).toFixed(2)}
+                                    </Text>
+                                </View>
+                                <View transparent style={{ padding: 5 }}>
+                                    <Text theme='h1' size={20}>−</Text>
+                                </View>
+                                <View transparent style={{ minWidth: 120, margin: 5 }}>
+                                    <Text theme='description' size={12}>Total Fees</Text>
+                                    <Text theme='h2' size={18} color={Colors.text.warning}>
+                                        ${(opportunity.total_fees ?? 0).toFixed(2)}
+                                    </Text>
+                                </View>
+                                <View transparent style={{ padding: 5 }}>
+                                    <Text theme='h1' size={20}>=</Text>
+                                </View>
+                                <View transparent style={{ minWidth: 120, margin: 5 }}>
+                                    <Text theme='description' size={12}>Expected Value</Text>
+                                    <Text theme='h2' size={18} color={
+                                        (opportunity.expected_value ?? 0) > 0
+                                            ? Colors.text.success
+                                            : Colors.text.warning
+                                    }>
+                                        ${(opportunity.expected_value ?? 0).toFixed(2)}
+                                    </Text>
+                                </View>
+                            </View>
+                            {!is_green && (
+                                <View float style={{ padding: 12, marginTop: 15, borderRadius: 8, backgroundColor: Colors.text.warning + '20', borderWidth: 1, borderColor: Colors.text.warning }}>
+                                    <View transparent style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                        <Icons.AlertIcon size={16} color={Colors.text.warning} />
+                                        <Text theme='h2' size={14} color={Colors.text.warning} style={{ marginLeft: 8 }}>
+                                            Fees May Eliminate Profit
+                                        </Text>
+                                    </View>
+                                    <Text theme='light' size={12} style={{ marginTop: 6 }}>
+                                        This opportunity may not be profitable after considering partner fees. Review the profit breakdown carefully.
+                                    </Text>
+                                </View>
+                            )}
+                        </View>
+
+                        {/* Additional Stats */}
+                        <View transparent style={{ padding: 20, paddingTop: 10, flexDirection: 'row', flexWrap: 'wrap' }}>
+                            <View transparent style={{ minWidth: 150, margin: 5 }}>
+                                <Text theme='description' size={12}>Expected Profit (Before Fees)</Text>
+                                <Text theme='h1' size={20} color={(opportunity.expected_profit ?? 0) > 0 ? Colors.text.success : Colors.text.warning}>
+                                    ${(opportunity.expected_profit ?? 0).toFixed(2)}
+                                </Text>
+                            </View>
+                            <View transparent style={{ minWidth: 150, margin: 5 }}>
+                                <Text theme='description' size={12}>At Risk</Text>
+                                <Text theme='h2' size={18} color={(opportunity.at_risk ?? 0) > 0 ? Colors.text.warning : Colors.text.success}>
+                                    ${(opportunity.at_risk ?? 0).toFixed(2)}
+                                </Text>
+                            </View>
+                            <View transparent style={{ minWidth: 150, margin: 5 }}>
+                                <Text theme='description' size={12}>Win Probability</Text>
+                                <Text theme='h2' size={18}>
+                                    {((opportunity.win_probability ?? 0) * 100).toFixed(1)}%
+                                </Text>
+                            </View>
+                            <View transparent style={{ minWidth: 150, margin: 5 }}>
+                                <Text theme='description' size={12}>Loss Probability</Text>
+                                <Text theme='h2' size={18}>
+                                    {((opportunity.loss_probability ?? 0) * 100).toFixed(1)}%
+                                </Text>
+                            </View>
+                        </View>
+
+                        {/* Legs Section */}
+                        <View transparent style={{ padding: 20, paddingTop: 10 }}>
+                            <Text theme='h2' size={16} style={{ marginBottom: 15 }}>
+                                Opportunity Legs ({opportunity.legs.length})
+                            </Text>
+                            <View transparent style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
+                                {opportunity.legs.map((leg, index) => {
+                                    const partner = partners.find(p => p.partner_id === leg.partner_id);
+                                    const side = router_market_sides.find(rms => rms.market_side_id === leg.partner_market.market_side_id);
+                                    //const line = router_market_variables.find(rms => rms.router_market_variable_id === leg.partner_market.router_market_variable_id);
+
+                                    //let variable_label = (line?.variable ?? 0) > 0 ? `+${line?.variable}` : `${line?.variable}`;
+                                    //if (line?.variable_type === 'spread' && side?.side_key === 'away') {
+                                    //    let new_variable = line.variable * -1;
+                                    //    variable_label = new_variable > 0 ? `+${new_variable}` : `${new_variable}`;
+                                    //}
+
+                                    return (
+                                        <View
+                                            key={index}
+                                            float
+                                            style={{
+                                                width: '100%',
+                                                maxWidth: 400,
+                                                padding: 15,
+                                                borderRadius: 8,
+                                                borderWidth: 1,
+                                                borderColor: Colors.borders.light
+                                            }}
+                                        >
+                                            <View transparent style={{ marginBottom: 10 }}>
+                                                <Text theme='description' size={11}>LEG {index + 1} • {partner?.name}</Text>
+                                                <Text theme='h2' size={16} style={{ marginTop: 4 }}>
+                                                    {leg.title}
+                                                </Text>
+                                                {((side?.side_key === 'home' && opportunity.consensus_home_spread !== undefined) ||
+                                                  (side?.side_key === 'away' && opportunity.consensus_away_spread !== undefined)) && (
+                                                    <View transparent style={{ marginTop: 6, padding: 8, backgroundColor: Colors.views.header, borderRadius: 4 }}>
+                                                        <Text theme='description' size={10} style={{ marginBottom: 2 }}>Consensus Spread</Text>
+                                                        <Text theme='light' size={11}>
+                                                            {side?.side_key === 'home' && opportunity.consensus_home_spread !== undefined &&
+                                                                `${opportunity.consensus_home_spread > 0 ? '+' : ''}${opportunity.consensus_home_spread}`
+                                                            }
+                                                            {side?.side_key === 'away' && opportunity.consensus_away_spread !== undefined &&
+                                                                `${opportunity.consensus_away_spread > 0 ? '+' : ''}${opportunity.consensus_away_spread}`
+                                                            }
+                                                        </Text>
+                                                    </View>
+                                                )}
+                                            </View>
+
+                                            <View transparent style={{ flexDirection: 'row', marginBottom: 8 }}>
+                                                <View transparent style={{ flex: 1 }}>
+                                                    <Text theme='description' size={12}>Price</Text>
+                                                    <Text theme='h2' size={15}>${leg.price.toFixed(2)}</Text>
+                                                </View>
+                                                <View transparent style={{ flex: 1 }}>
+                                                    <Text theme='description' size={12}>Bet Amount</Text>
+                                                    <Text theme='h2' size={15}>${leg.bet_amount.toFixed(2)}</Text>
+                                                </View>
+                                            </View>
+
+                                            <View transparent style={{ flexDirection: 'row', marginBottom: 12 }}>
+                                                <View transparent style={{ flex: 1 }}>
+                                                    <Text theme='description' size={12}>Potential Payout</Text>
+                                                    <Text theme='h2' size={15}>${leg.potential_payout.toFixed(2)}</Text>
+                                                </View>
+                                                <View transparent style={{ flex: 1 }}>
+                                                    <Text theme='description' size={12}>Fee</Text>
+                                                    <Text theme='h2' size={15}>${leg.fee.toFixed(2)}</Text>
+                                                </View>
+                                            </View>
+
+                                            <Button
+                                                title="Buy This Leg"
+                                                type="action"
+                                                onPress={() => confirmBuyLeg(index)}
+                                                disabled={buying}
+                                                style={{ padding: 10 }}
+                                            />
+                                        </View>
+                                    );
+                                })}
+                            </View>
+                        </View>
+                        </ScrollView>
+                    </View>
+
+                    {/* Footer with Buy All Button */}
+                    <View type='header' style={{ padding: 20, borderTopWidth: 1, borderTopColor: Colors.borders.light, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <View transparent>
+                            <Text theme='description' size={12}>Total Investment</Text>
+                            <Text theme='h1' size={20}>${opportunity.investment.toFixed(2)}</Text>
+                        </View>
+                        <Button
+                            title={buying ? 'Processing...' : `Buy All ${opportunity.legs.length} Legs`}
+                            type="success"
+                            onPress={confirmBuyAll}
+                            disabled={buying}
+                            style={{ padding: 15, paddingHorizontal: 30 }}
+                        >
+                            {buying && <ActivityIndicator size="small" color={Colors.text.h1} style={{ marginRight: 10 }} />}
+                        </Button>
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+export default OpportunityDetailModal;