@bettoredge/calcutta 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettoredge/calcutta",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Calcutta auction competition components for BettorEdge applications",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/CalcuttaActionCard.tsx

@@ -15,6 +15,7 @@ export interface CalcuttaActionCardProps {
     activeBidCount?: number;
     itemsWon?: number;
     isAdmin?: boolean;
+    participantCount?: number;
     onJoin?: () => void;
     onDepositEscrow?: () => void;
     onManage?: () => void;
@@ -30,8 +31,12 @@ interface CardConfig {
     ctaLabel?: string;
     ctaColor?: string;
     ctaAction?: () => void;
+    secondaryCtaLabel?: string;
+    secondaryCtaColor?: string;
+    secondaryCtaAction?: () => void;
     showCountdown?: 'start' | 'end';
     loading?: boolean;
+    secondaryLoading?: boolean;
 }
 
 export const CalcuttaActionCard: React.FC<CalcuttaActionCardProps> = ({
@@ -42,6 +47,7 @@ export const CalcuttaActionCard: React.FC<CalcuttaActionCardProps> = ({
     activeBidCount = 0,
     itemsWon = 0,
     isAdmin,
+    participantCount = 0,
     onJoin,
     onDepositEscrow,
     onManage,
@@ -56,8 +62,7 @@ export const CalcuttaActionCard: React.FC<CalcuttaActionCardProps> = ({
     const getConfig = (): CardConfig => {
         // Admin: can start auction
         if (isAdmin && lifecycleState === 'scheduled' && onStartAuction) {
-            const participantCount = competition.participants?.length ?? 0;
-            return {
+            const config: CardConfig = {
                 icon: 'play-circle-outline',
                 title: 'Ready to start?',
                 description: `${participantCount} player${participantCount !== 1 ? 's' : ''} have joined. Start the ${isSweepstakes ? 'competition' : 'auction'} when ready.`,
@@ -67,6 +72,14 @@ export const CalcuttaActionCard: React.FC<CalcuttaActionCardProps> = ({
                 ctaAction: onStartAuction,
                 showCountdown: 'start',
             };
+            // Admin hasn't joined yet — show join as secondary action
+            if (!hasJoined && onJoin) {
+                config.secondaryCtaLabel = isFree ? 'Join Free' : `Join — ${formatCurrency(entryFee, competition.market_type)}`;
+                config.secondaryCtaColor = '#10B981';
+                config.secondaryCtaAction = onJoin;
+                config.secondaryLoading = joining;
+            }
+            return config;
         }
 
         // Not joined — prompt to join
@@ -228,6 +241,22 @@ export const CalcuttaActionCard: React.FC<CalcuttaActionCardProps> = ({
                     </View>
                 )}
 
+                {/* Secondary CTA Button */}
+                {config.secondaryCtaLabel && config.secondaryCtaAction && (
+                    <TouchableOpacity
+                        style={[styles.ctaButton, { backgroundColor: config.secondaryCtaColor || '#10B981' }]}
+                        onPress={config.secondaryCtaAction}
+                        activeOpacity={0.7}
+                        disabled={config.secondaryLoading}
+                    >
+                        {config.secondaryLoading ? (
+                            <ActivityIndicator size="small" color="#FFFFFF" />
+                        ) : (
+                            <Text variant="body" bold style={{ color: '#FFFFFF' }}>{config.secondaryCtaLabel}</Text>
+                        )}
+                    </TouchableOpacity>
+                )}
+
                 {/* CTA Button */}
                 {config.ctaLabel && config.ctaAction && (
                     <TouchableOpacity

package/src/components/CalcuttaAuction.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
-import { StyleSheet, TouchableOpacity, ActivityIndicator, FlatList, ScrollView, Image, TextInput, Platform, useWindowDimensions } from 'react-native';
+import { StyleSheet, TouchableOpacity, ActivityIndicator, FlatList, ScrollView, Image, TextInput, Platform, useWindowDimensions, RefreshControl } from 'react-native';
 import { View, Text, useTheme } from '@bettoredge/styles';
 import { Ionicons } from '@expo/vector-icons';
 import type { CalcuttaEscrowProps } from '@bettoredge/types';
@@ -39,6 +39,8 @@ export interface CalcuttaAuctionProps {
     onManage?: () => void;
     onJoin?: () => void | Promise<void>;
     onLeave?: () => void | Promise<void>;
+    onRefresh?: () => void | Promise<void>;
+    onAuctionClosed?: () => void;
 }
 
 // Inner component for live auction (original layout)
@@ -54,12 +56,15 @@ const LiveAuction: React.FC<CalcuttaAuctionProps> = ({
     onNextItem,
     player_balance,
     onDepositFunds,
+    onRefresh,
+    onAuctionClosed: onAuctionClosedProp,
 }) => {
     const { theme } = useTheme();
     const { width: windowWidth } = useWindowDimensions();
     const [containerWidth, setContainerWidth] = useState(0);
     const measuredWidth = containerWidth || windowWidth;
     const isDesktop = Platform.OS === 'web' && measuredWidth >= 700;
+    const [refreshing, setRefreshing] = useState(false);
     const {
         loading,
         competition,
@@ -87,6 +92,13 @@ const LiveAuction: React.FC<CalcuttaAuctionProps> = ({
 
     const isAdmin = player_id != null && competition?.admin_id === player_id;
 
+    const handleRefresh = async () => {
+        setRefreshing(true);
+        try {
+            await Promise.all([refreshAuction(), fetchEscrow(), onRefresh?.()]);
+        } catch {} finally { setRefreshing(false); }
+    };
+
     // Auction complete overlay
     const [showAuctionComplete, setShowAuctionComplete] = useState(false);
 
@@ -94,7 +106,8 @@ const LiveAuction: React.FC<CalcuttaAuctionProps> = ({
         handleAuctionClosed(data);
         // Show complete overlay after a short delay (let last item celebration finish)
         setTimeout(() => setShowAuctionComplete(true), 1000);
-    }, [handleAuctionClosed]);
+        onAuctionClosedProp?.();
+    }, [handleAuctionClosed, onAuctionClosedProp]);
 
     // Celebration modal state
     const [celebrationData, setCelebrationData] = useState<{
@@ -535,7 +548,7 @@ const LiveAuction: React.FC<CalcuttaAuctionProps> = ({
                    Full width: Active item
                    Below: [Items (paginated)] [Players] [Info]
                    ═══════════════════════════════════════ */
-                <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
+                <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled" refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}>
                     {/* Top bar: escrow + admin */}
                     <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 12, zIndex: 200 }}>
                         <View variant="transparent" style={{ position: 'relative', zIndex: 200 }}>
@@ -666,6 +679,7 @@ const LiveAuction: React.FC<CalcuttaAuctionProps> = ({
                     keyboardShouldPersistTaps="handled"
                     contentContainerStyle={{ paddingBottom: 40 }}
                     style={{ backgroundColor: theme.colors.surface.base }}
+                    refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}
                     extraData={`${infoTab}-${items.map(i => `${i.calcutta_auction_item_id}:${i.status}:${i.current_bid}`).join(',')}-${my_bids.length}-${paused}-${escrow?.escrow_balance}`}
                     ListHeaderComponent={
                         <View variant="transparent">
@@ -745,12 +759,19 @@ const SweepstakesWaiting: React.FC<CalcuttaAuctionProps & { competition: any }>
     player_id,
     onClose,
     onManage,
+    onRefresh,
     competition,
 }) => {
     const { theme } = useTheme();
-    const { items, rounds, participants, item_results } = useCalcuttaCompetition(calcutta_competition_id);
+    const { items, rounds, participants, item_results, refresh } = useCalcuttaCompetition(calcutta_competition_id);
     const { images: itemImages } = useCalcuttaItemImages(items);
     const isAdmin = player_id != null && competition?.admin_id == player_id;
+    const [refreshing, setRefreshing] = useState(false);
+    const handleRefresh = async () => {
+        setRefreshing(true);
+        try { await Promise.all([refresh(), onRefresh?.()]); }
+        catch {} finally { setRefreshing(false); }
+    };
 
     // Build player lookup for owner usernames
     const ownerIds = items.filter(i => i.winning_player_id).map(i => i.winning_player_id!);
@@ -787,7 +808,7 @@ const SweepstakesWaiting: React.FC<CalcuttaAuctionProps & { competition: any }>
 
     return (
         <View variant="transparent" style={[styles.container, { backgroundColor: theme.colors.surface.base }]}>
-            <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ gap: 16, paddingBottom: Platform.OS === 'web' ? 300 : 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled">
+            <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ gap: 16, paddingBottom: Platform.OS === 'web' ? 300 : 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled" refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}>
                 {/* Hero with embedded title */}
                 <View style={{ position: 'relative' }}>
                     {competition.image?.url ? (
@@ -1078,13 +1099,6 @@ export const CalcuttaAuction: React.FC<CalcuttaAuctionProps> = (props) => {
         );
     }
 
-    // Post-auction: show results view for all types
-    const isPostAuction = ['auction_closed', 'inprogress', 'closed'].includes(competition.status);
-
-    if (competition.auction_type === 'sweepstakes' || isPostAuction) {
-        return <SweepstakesWaiting {...props} competition={competition} />;
-    }
-
     if (competition.auction_type === 'sealed_bid') {
         return <SealedBidAuction {...props} />;
     }