@bettoredge/calcutta 0.2.0

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@bettoredge/calcutta",
+  "version": "0.2.0",
+  "description": "Calcutta auction competition components for BettorEdge applications",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "tsc",
+    "prepare": "tsc",
+    "prepublishOnly": "tsc"
+  },
+  "keywords": [
+    "react-native",
+    "calcutta",
+    "auction",
+    "bettorEdge"
+  ],
+  "author": "BettorEdge",
+  "license": "ISC",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@bettoredge/styles": "^0.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-native": "^0.73.0",
+    "typescript": "~5.8.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.1",
+    "react-native": ">=0.76.5",
+    "@expo/vector-icons": "*",
+    "@bettoredge/api": ">=0.8.0",
+    "@bettoredge/types": ">=0.5.0"
+  }
+}

package/src/components/CalcuttaAuction.tsx

@@ -0,0 +1,453 @@
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { StyleSheet, TouchableOpacity, ActivityIndicator, FlatList, ScrollView } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaEscrowProps } from '@bettoredge/types';
+import { useCalcuttaAuction } from '../hooks/useCalcuttaAuction';
+import { useCalcuttaCompetition } from '../hooks/useCalcuttaCompetition';
+import { useCalcuttaEscrow } from '../hooks/useCalcuttaEscrow';
+import { useCalcuttaBid } from '../hooks/useCalcuttaBid';
+import { useCalcuttaSocket, CalcuttaPresence, CalcuttaPresencePlayer } from '../hooks/useCalcuttaSocket';
+import { useCalcuttaItemImages } from '../hooks/useCalcuttaItemImages';
+import { formatCurrency, getStatusLabel } from '../helpers/formatting';
+import { CalcuttaAuctionItem } from './CalcuttaAuctionItem';
+import { CalcuttaEscrow } from './CalcuttaEscrow';
+import { SealedBidAuction } from './sealed/SealedBidAuction';
+
+export interface CalcuttaAuctionProps {
+    calcutta_competition_id: string;
+    player_id?: string;
+    onClose: () => void;
+    getSocket?: () => WebSocket | null;
+    getAccessToken?: () => string | undefined;
+    getDeviceId?: () => string | undefined;
+    player_data?: { username: string; profile_pic?: string };
+    onPauseAuction?: () => void;
+    onResumeAuction?: () => void;
+    onNextItem?: () => void;
+    player_balance?: number;
+    onDepositFunds?: (amount: number) => void;
+    onManage?: () => void;
+    onJoin?: () => void | Promise<void>;
+    onLeave?: () => void | Promise<void>;
+}
+
+// Inner component for live auction (original layout)
+const LiveAuction: React.FC<CalcuttaAuctionProps> = ({
+    calcutta_competition_id,
+    player_id,
+    onClose,
+    getSocket,
+    getAccessToken,
+    getDeviceId,
+    player_data,
+    onPauseAuction,
+    onResumeAuction,
+    onNextItem,
+    player_balance,
+    onDepositFunds,
+}) => {
+    const { theme } = useTheme();
+    const {
+        loading,
+        competition,
+        items,
+        my_bids,
+        paused,
+        stopPolling,
+        handleBidUpdate,
+        handleItemActive,
+        handleItemSold,
+        handleItemUnsold,
+        handleAuctionPaused,
+        handleAuctionResumed,
+        handleAuctionClosed,
+    } = useCalcuttaAuction(calcutta_competition_id, 5000, player_id);
+
+    const { escrow, fetchEscrow } = useCalcuttaEscrow(calcutta_competition_id);
+    const { placeBid, loading: bidLoading } = useCalcuttaBid();
+    const { images: itemImages } = useCalcuttaItemImages(items);
+
+    const isAdmin = player_id != null && competition?.admin_id === player_id;
+
+    // Socket connection for live auctions
+    const noopSocket = useCallback(() => null, []);
+    const noopString = useCallback(() => undefined, []);
+    const { connected, presence } = useCalcuttaSocket(
+        calcutta_competition_id,
+        player_data || { username: '' },
+        getSocket ? getSocket : noopSocket,
+        getAccessToken ? getAccessToken : noopString,
+        getDeviceId ? getDeviceId : noopString,
+        {
+            onBidUpdate: handleBidUpdate,
+            onItemActive: handleItemActive,
+            onItemSold: handleItemSold,
+            onItemUnsold: handleItemUnsold,
+            onAuctionPaused: handleAuctionPaused,
+            onAuctionResumed: handleAuctionResumed,
+            onAuctionClosed: handleAuctionClosed,
+        },
+    );
+
+    // For live auctions with socket, stop REST polling once connected
+    useEffect(() => {
+        if (connected) {
+            stopPolling();
+        }
+    }, [connected, stopPolling]);
+
+    useEffect(() => {
+        fetchEscrow();
+        return () => stopPolling();
+    }, [fetchEscrow, stopPolling]);
+
+    const handlePlaceBid = async (calcutta_auction_item_id: string, amount: number) => {
+        try {
+            await placeBid(calcutta_auction_item_id, amount);
+            fetchEscrow();
+        } catch {
+            // Error handled in hook
+        }
+    };
+
+    const [escrowExpanded, setEscrowExpanded] = useState(true);
+    const [hasAutoCollapsed, setHasAutoCollapsed] = useState(false);
+
+    // Auto-collapse escrow panel once funds are loaded
+    useEffect(() => {
+        if (!hasAutoCollapsed && escrow && Number(escrow.escrow_balance) > 0) {
+            setEscrowExpanded(false);
+            setHasAutoCollapsed(true);
+        }
+    }, [escrow, hasAutoCollapsed]);
+
+    // Presence bar visibility
+    const [showPresenceList, setShowPresenceList] = useState(false);
+
+    if (loading && !competition) {
+        return (
+            <View variant="transparent" style={styles.loadingContainer}>
+                <ActivityIndicator size="large" color={theme.colors.primary.default} />
+            </View>
+        );
+    }
+
+    if (!competition) {
+        return (
+            <View variant="transparent" style={styles.loadingContainer}>
+                <Text variant="body" color="secondary">Auction not found</Text>
+            </View>
+        );
+    }
+
+    return (
+        <View variant="transparent" style={styles.container}>
+            {/* Header */}
+            <View variant="transparent" style={[styles.header, { borderColor: theme.colors.border.subtle }]}>
+                <TouchableOpacity onPress={onClose} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+                    <Ionicons name="arrow-back" size={24} color={theme.colors.text.primary} />
+                </TouchableOpacity>
+                <View variant="transparent" style={styles.headerInfo}>
+                    <Text variant="body" bold numberOfLines={1}>
+                        {competition.competition_name}
+                    </Text>
+                    <Text variant="caption" color="tertiary">
+                        Live Auction
+                        {' \u00B7 '}
+                        {paused ? 'Paused' : getStatusLabel(competition.auction_status)}
+                    </Text>
+                </View>
+
+                {/* Admin controls for live auction */}
+                {isAdmin && competition.auction_status === 'in_progress' && (
+                    <View variant="transparent" style={styles.adminControls}>
+                        {onPauseAuction && (
+                            <TouchableOpacity
+                                style={[styles.adminButton, { backgroundColor: theme.colors.status.error + '20' }]}
+                                onPress={onPauseAuction}
+                            >
+                                <Ionicons name="pause" size={14} color={theme.colors.status.error} />
+                            </TouchableOpacity>
+                        )}
+                        {onNextItem && (
+                            <TouchableOpacity
+                                style={[styles.adminButton, { backgroundColor: theme.colors.primary.subtle, marginLeft: 6 }]}
+                                onPress={onNextItem}
+                            >
+                                <Ionicons name="play-skip-forward" size={14} color={theme.colors.primary.default} />
+                            </TouchableOpacity>
+                        )}
+                    </View>
+                )}
+                {isAdmin && paused && onResumeAuction && (
+                    <TouchableOpacity
+                        style={[styles.adminButton, { backgroundColor: theme.colors.status.success + '20' }]}
+                        onPress={onResumeAuction}
+                    >
+                        <Ionicons name="play" size={14} color={theme.colors.status.success} />
+                    </TouchableOpacity>
+                )}
+            </View>
+
+            {/* Presence bar (live mode) */}
+            {presence.count > 0 && (
+                <TouchableOpacity
+                    activeOpacity={0.7}
+                    onPress={() => setShowPresenceList(!showPresenceList)}
+                    style={[styles.presenceBar, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}
+                >
+                    <Ionicons name="people-outline" size={14} color={theme.colors.text.secondary} />
+                    <Text variant="caption" color="secondary" style={{ marginLeft: 6, marginRight: 8 }}>
+                        {presence.count} player{presence.count !== 1 ? 's' : ''} live
+                    </Text>
+                    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }}>
+                        {presence.players.slice(0, 20).map((p) => (
+                            <View
+                                key={p.player_id}
+                                variant="transparent"
+                                style={[styles.presenceAvatar, { backgroundColor: theme.colors.primary.subtle }]}
+                            >
+                                <Text variant="caption" style={{ fontSize: 9, color: theme.colors.primary.default }}>
+                                    {(p.username || '?').charAt(0).toUpperCase()}
+                                </Text>
+                            </View>
+                        ))}
+                    </ScrollView>
+                </TouchableOpacity>
+            )}
+
+            {/* Pause overlay */}
+            {paused && (
+                <View
+                    variant="transparent"
+                    style={[styles.pauseOverlayBar, { backgroundColor: theme.colors.status.error + '10', borderColor: theme.colors.border.subtle }]}
+                >
+                    <Ionicons name="pause-circle-outline" size={18} color={theme.colors.status.error} />
+                    <Text variant="caption" bold style={{ marginLeft: 8, color: theme.colors.status.error }}>
+                        Auction paused by host. Bidding will resume shortly.
+                    </Text>
+                </View>
+            )}
+
+            {/* Rules info card */}
+            {(competition.max_escrow || competition.min_spend_pct) && (
+                <View
+                    variant="transparent"
+                    style={[styles.rulesCard, { backgroundColor: theme.colors.primary.subtle, borderColor: theme.colors.border.subtle }]}
+                >
+                    <Ionicons name="information-circle-outline" size={16} color={theme.colors.primary.default} />
+                    <View variant="transparent" style={{ marginLeft: 8, flex: 1 }}>
+                        {competition.max_escrow != null && Number(competition.max_escrow) > 0 && (
+                            <Text variant="caption" style={{ color: theme.colors.text.secondary }}>
+                                {'\u2022 '}Player Budget: {formatCurrency(Number(competition.max_escrow), competition.market_type)} — each player can deposit up to this amount
+                            </Text>
+                        )}
+                        {competition.min_spend_pct != null && Number(competition.min_spend_pct) > 0 && (
+                            <Text variant="caption" style={{ color: theme.colors.text.secondary, marginTop: competition.max_escrow ? 4 : 0 }}>
+                                {'\u2022 '}Min Spend: {Number(competition.min_spend_pct)}% — you must bid at least {Number(competition.min_spend_pct)}% of your deposited funds or the shortfall is added to the pot
+                            </Text>
+                        )}
+                    </View>
+                </View>
+            )}
+
+            {/* Escrow balance - tappable */}
+            <TouchableOpacity
+                activeOpacity={0.7}
+                onPress={() => setEscrowExpanded(!escrowExpanded)}
+                style={[styles.escrowBar, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}
+            >
+                <Ionicons name="wallet-outline" size={16} color={theme.colors.text.secondary} />
+                <Text variant="caption" color="secondary" style={styles.escrowLabel}>
+                    Escrow Balance:
+                </Text>
+                <Text variant="body" bold>
+                    {escrow
+                        ? formatCurrency(escrow.escrow_balance, competition.market_type)
+                        : formatCurrency(0, competition.market_type)}
+                </Text>
+                {competition.max_escrow != null && Number(competition.max_escrow) > 0 && escrow && (
+                    <Text variant="caption" color="tertiary" style={styles.committedLabel}>
+                        / {formatCurrency(Number(competition.max_escrow), competition.market_type)} budget
+                    </Text>
+                )}
+                {escrow && escrow.committed_balance > 0 && !competition.max_escrow && (
+                    <Text variant="caption" color="tertiary" style={styles.committedLabel}>
+                        ({formatCurrency(escrow.committed_balance, competition.market_type)} committed)
+                    </Text>
+                )}
+                <Ionicons
+                    name={escrowExpanded ? 'chevron-up' : 'chevron-down'}
+                    size={14}
+                    color={theme.colors.text.tertiary}
+                    style={{ marginLeft: 'auto' }}
+                />
+            </TouchableOpacity>
+
+            {/* Inline escrow deposit/withdraw */}
+            {escrowExpanded && (
+                <CalcuttaEscrow
+                    calcutta_competition_id={calcutta_competition_id}
+                    escrow={escrow ?? undefined}
+                    market_type={competition.market_type}
+                    max_escrow={competition.max_escrow}
+                    player_balance={player_balance}
+                    onDepositFunds={onDepositFunds}
+                    onUpdate={(updated) => {
+                        fetchEscrow();
+                    }}
+                />
+            )}
+
+            {/* Items list */}
+            <FlatList
+                data={items}
+                keyExtractor={item => item.calcutta_auction_item_id}
+                renderItem={({ item }) => {
+                    const myBid = my_bids.find(
+                        b => b.calcutta_auction_item_id === item.calcutta_auction_item_id
+                    );
+                    const isActiveItem = competition.current_auction_item_id === item.calcutta_auction_item_id;
+                    return (
+                        <CalcuttaAuctionItem
+                            item={item}
+                            my_bid={myBid}
+                            auction_type="live"
+                            min_bid={competition.min_bid}
+                            bid_increment={competition.bid_increment}
+                            escrow_balance={escrow?.escrow_balance ?? 0}
+                            onPlaceBid={(amount) => handlePlaceBid(item.calcutta_auction_item_id, amount)}
+                            is_active_item={isActiveItem}
+                            is_paused={paused}
+                            itemImage={itemImages[item.item_id]}
+                        />
+                    );
+                }}
+                ListEmptyComponent={
+                    <Text variant="caption" color="tertiary" style={styles.emptyText}>
+                        No auction items available
+                    </Text>
+                }
+            />
+        </View>
+    );
+};
+
+// Main exported component — routes to sealed bid or live layout
+export const CalcuttaAuction: React.FC<CalcuttaAuctionProps> = (props) => {
+    const { theme } = useTheme();
+
+    // Peek at auction type to decide which layout to render.
+    // Use useCalcuttaCompetition for a single fetch (no polling).
+    const { loading, competition } = useCalcuttaCompetition(props.calcutta_competition_id);
+
+    if (loading && !competition) {
+        return (
+            <View variant="transparent" style={styles.loadingContainer}>
+                <ActivityIndicator size="large" color={theme.colors.primary.default} />
+            </View>
+        );
+    }
+
+    if (!competition) {
+        return (
+            <View variant="transparent" style={styles.loadingContainer}>
+                <Text variant="body" color="secondary">Auction not found</Text>
+            </View>
+        );
+    }
+
+    if (competition.auction_type === 'sealed_bid') {
+        return <SealedBidAuction {...props} />;
+    }
+
+    return <LiveAuction {...props} />;
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    loadingContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 40,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderBottomWidth: 1,
+    },
+    headerInfo: {
+        flex: 1,
+        marginLeft: 12,
+    },
+    adminControls: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    adminButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    presenceBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        borderBottomWidth: 1,
+    },
+    presenceAvatar: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 4,
+    },
+    pauseOverlayBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        borderBottomWidth: 1,
+    },
+    escrowBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+        borderBottomWidth: 1,
+    },
+    escrowLabel: {
+        marginLeft: 6,
+        marginRight: 4,
+    },
+    committedLabel: {
+        marginLeft: 6,
+    },
+    countdownBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        borderBottomWidth: 1,
+    },
+    rulesCard: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        padding: 10,
+        borderBottomWidth: 1,
+    },
+    emptyText: {
+        textAlign: 'center',
+        padding: 20,
+    },
+});