@bettoredge/calcutta 0.3.0 → 0.4.0

package/src/components/AuctionPausedOverlay.tsx

@@ -0,0 +1,154 @@
+import React, { useEffect, useRef } from 'react';
+import { StyleSheet, Animated, TouchableOpacity } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+
+export interface AuctionPausedOverlayProps {
+    visible: boolean;
+    isAdmin?: boolean;
+    onResume?: () => void;
+    resuming?: boolean;
+}
+
+export const AuctionPausedOverlay: React.FC<AuctionPausedOverlayProps> = ({
+    visible,
+    isAdmin,
+    onResume,
+    resuming,
+}) => {
+    const { theme } = useTheme();
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+    const pulseAnim = useRef(new Animated.Value(1)).current;
+
+    useEffect(() => {
+        if (visible) {
+            Animated.timing(opacityAnim, { toValue: 1, duration: 300, useNativeDriver: true }).start();
+            const loop = Animated.loop(
+                Animated.sequence([
+                    Animated.timing(pulseAnim, { toValue: 0.5, duration: 1200, useNativeDriver: true }),
+                    Animated.timing(pulseAnim, { toValue: 1, duration: 1200, useNativeDriver: true }),
+                ])
+            );
+            loop.start();
+            return () => loop.stop();
+        } else {
+            Animated.timing(opacityAnim, { toValue: 0, duration: 200, useNativeDriver: true }).start();
+        }
+    }, [visible]);
+
+    if (!visible) return null;
+
+    return (
+        <Animated.View style={[styles.overlay, { opacity: opacityAnim }]}>
+            <View variant="transparent" style={styles.backdrop} />
+            <View variant="transparent" style={styles.content}>
+                <Animated.View style={{ opacity: pulseAnim }}>
+                    <View variant="transparent" style={styles.iconCircle}>
+                        <Ionicons name="pause" size={48} color="#FFFFFF" />
+                    </View>
+                </Animated.View>
+
+                <Text style={styles.title}>Auction Paused</Text>
+                <Text style={styles.subtitle}>
+                    {isAdmin
+                        ? 'The auction is paused. Resume when ready.'
+                        : 'The host has paused the auction.\nBidding will resume shortly.'}
+                </Text>
+
+                {isAdmin && onResume && (
+                    <TouchableOpacity
+                        style={[styles.resumeButton, resuming && { opacity: 0.6 }]}
+                        onPress={onResume}
+                        disabled={resuming}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="play" size={20} color="#FFFFFF" />
+                        <Text style={styles.resumeText}>
+                            {resuming ? 'Resuming...' : 'Resume Auction'}
+                        </Text>
+                    </TouchableOpacity>
+                )}
+
+                {!isAdmin && (
+                    <View variant="transparent" style={styles.waitingRow}>
+                        <Animated.View style={{ opacity: pulseAnim }}>
+                            <View variant="transparent" style={styles.waitingDot} />
+                        </Animated.View>
+                        <Text style={styles.waitingText}>Waiting for host...</Text>
+                    </View>
+                )}
+            </View>
+        </Animated.View>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 999,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0,0,0,0.80)',
+    },
+    content: {
+        alignItems: 'center',
+        padding: 40,
+    },
+    iconCircle: {
+        width: 100,
+        height: 100,
+        borderRadius: 50,
+        backgroundColor: '#EF4444',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 24,
+    },
+    title: {
+        color: '#FFFFFF',
+        fontSize: 28,
+        lineHeight: 36,
+        fontWeight: '800',
+        marginBottom: 8,
+    },
+    subtitle: {
+        color: 'rgba(255,255,255,0.7)',
+        fontSize: 16,
+        textAlign: 'center',
+        lineHeight: 22,
+        marginBottom: 32,
+    },
+    resumeButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#10B981',
+        paddingHorizontal: 28,
+        paddingVertical: 14,
+        borderRadius: 12,
+    },
+    resumeText: {
+        color: '#FFFFFF',
+        fontSize: 17,
+        lineHeight: 24,
+        fontWeight: '700',
+        marginLeft: 10,
+    },
+    waitingRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    waitingDot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: '#F59E0B',
+        marginRight: 8,
+    },
+    waitingText: {
+        color: 'rgba(255,255,255,0.5)',
+        fontSize: 14,
+        lineHeight: 19,
+    },
+});

package/src/components/CalcuttaActionCard.tsx

@@ -0,0 +1,291 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaCompetitionProps } from '@bettoredge/types';
+import type { CalcuttaLifecycleState } from '../helpers/lifecycleState';
+import { formatCurrency } from '../helpers/formatting';
+import { CalcuttaCountdown } from './CalcuttaCountdown';
+
+export interface CalcuttaActionCardProps {
+    competition: CalcuttaCompetitionProps;
+    lifecycleState: CalcuttaLifecycleState;
+    hasJoined: boolean;
+    escrowBalance?: number;
+    activeBidCount?: number;
+    itemsWon?: number;
+    isAdmin?: boolean;
+    onJoin?: () => void;
+    onDepositEscrow?: () => void;
+    onManage?: () => void;
+    onStartAuction?: () => void;
+    joining?: boolean;
+}
+
+interface CardConfig {
+    icon: string;
+    title: string;
+    description: string;
+    accentColor: string;
+    ctaLabel?: string;
+    ctaColor?: string;
+    ctaAction?: () => void;
+    showCountdown?: 'start' | 'end';
+    loading?: boolean;
+}
+
+export const CalcuttaActionCard: React.FC<CalcuttaActionCardProps> = ({
+    competition,
+    lifecycleState,
+    hasJoined,
+    escrowBalance = 0,
+    activeBidCount = 0,
+    itemsWon = 0,
+    isAdmin,
+    onJoin,
+    onDepositEscrow,
+    onManage,
+    onStartAuction,
+    joining,
+}) => {
+    const { theme } = useTheme();
+    const isSweepstakes = competition.auction_type === 'sweepstakes';
+    const entryFee = Number(competition.entry_fee) || 0;
+    const isFree = entryFee === 0;
+
+    const getConfig = (): CardConfig => {
+        // Admin: can start auction
+        if (isAdmin && lifecycleState === 'scheduled' && onStartAuction) {
+            const participantCount = competition.participants?.length ?? 0;
+            return {
+                icon: 'play-circle-outline',
+                title: 'Ready to start?',
+                description: `${participantCount} player${participantCount !== 1 ? 's' : ''} have joined. Start the ${isSweepstakes ? 'competition' : 'auction'} when ready.`,
+                accentColor: theme.colors.primary.default,
+                ctaLabel: isSweepstakes ? 'Start Competition' : 'Start Auction',
+                ctaColor: theme.colors.primary.default,
+                ctaAction: onStartAuction,
+                showCountdown: 'start',
+            };
+        }
+
+        // Not joined — prompt to join
+        if (!hasJoined && (lifecycleState === 'scheduled' || (lifecycleState === 'auctioning' && !isSweepstakes))) {
+            return {
+                icon: 'enter-outline',
+                title: isSweepstakes ? 'Join for a random team!' : 'Join this auction',
+                description: isFree
+                    ? 'Free to enter'
+                    : `Entry fee: ${formatCurrency(entryFee, competition.market_type)}`,
+                accentColor: '#10B981',
+                ctaLabel: isFree ? 'Join Free' : `Join — ${formatCurrency(entryFee, competition.market_type)}`,
+                ctaColor: '#10B981',
+                ctaAction: onJoin,
+                showCountdown: 'start',
+                loading: joining,
+            };
+        }
+
+        // Joined + scheduled
+        if (hasJoined && lifecycleState === 'scheduled') {
+            // Sweepstakes — just waiting
+            if (isSweepstakes) {
+                return {
+                    icon: 'checkmark-circle',
+                    title: "You're in!",
+                    description: 'Your team will be assigned when the host starts the competition.',
+                    accentColor: '#10B981',
+                    showCountdown: 'start',
+                };
+            }
+            // No escrow — prompt to fund
+            if (escrowBalance <= 0) {
+                return {
+                    icon: 'wallet-outline',
+                    title: 'Fund your escrow',
+                    description: 'You need funds in your escrow to place bids when the auction opens.',
+                    accentColor: '#D97706',
+                    ctaLabel: 'Add Funds',
+                    ctaColor: '#D97706',
+                    ctaAction: onDepositEscrow,
+                    showCountdown: 'start',
+                };
+            }
+            // Has escrow — ready
+            return {
+                icon: 'checkmark-circle',
+                title: "You're ready!",
+                description: `Escrow: ${formatCurrency(escrowBalance, competition.market_type)} available`,
+                accentColor: '#10B981',
+                showCountdown: 'start',
+            };
+        }
+
+        // Auction active
+        if (lifecycleState === 'auctioning' && hasJoined) {
+            if (activeBidCount > 0) {
+                return {
+                    icon: 'trophy-outline',
+                    title: `You have ${activeBidCount} active bid${activeBidCount !== 1 ? 's' : ''}`,
+                    description: competition.auction_type === 'sealed_bid'
+                        ? 'Bids are sealed — results revealed when auction closes.'
+                        : 'Keep watching for outbid notifications.',
+                    accentColor: '#D97706',
+                    showCountdown: competition.auction_type === 'sealed_bid' ? 'end' : undefined,
+                };
+            }
+            return {
+                icon: 'flash-outline',
+                title: 'Auction is live!',
+                description: 'Start placing your bids now.',
+                accentColor: '#D97706',
+                showCountdown: competition.auction_type === 'sealed_bid' ? 'end' : undefined,
+            };
+        }
+
+        // Tournament in progress
+        if (lifecycleState === 'tournament') {
+            return {
+                icon: 'football-outline',
+                title: 'Tournament in progress',
+                description: itemsWon > 0
+                    ? `You own ${itemsWon} item${itemsWon !== 1 ? 's' : ''} — track results below.`
+                    : 'Follow the action below.',
+                accentColor: '#8B5CF6',
+            };
+        }
+
+        // Completed
+        if (lifecycleState === 'completed') {
+            return {
+                icon: 'ribbon-outline',
+                title: 'Competition complete',
+                description: itemsWon > 0
+                    ? `You owned ${itemsWon} item${itemsWon !== 1 ? 's' : ''}.`
+                    : 'This competition has ended.',
+                accentColor: theme.colors.text.tertiary,
+            };
+        }
+
+        // Admin manage fallback
+        if (isAdmin && onManage) {
+            return {
+                icon: 'settings-outline',
+                title: 'Manage Competition',
+                description: 'Configure settings, items, and payouts.',
+                accentColor: theme.colors.primary.default,
+                ctaLabel: 'Manage',
+                ctaColor: theme.colors.primary.default,
+                ctaAction: onManage,
+            };
+        }
+
+        // Default
+        return {
+            icon: 'information-circle-outline',
+            title: competition.competition_name,
+            description: 'Competition details',
+            accentColor: theme.colors.text.tertiary,
+        };
+    };
+
+    const config = getConfig();
+
+    return (
+        <View variant="transparent" style={[styles.card, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+            {/* Left accent strip */}
+            <View variant="transparent" style={[styles.accent, { backgroundColor: config.accentColor }]} />
+
+            <View variant="transparent" style={styles.content}>
+                {/* Icon + Text */}
+                <View variant="transparent" style={styles.topRow}>
+                    <View variant="transparent" style={[styles.iconCircle, { backgroundColor: config.accentColor + '18' }]}>
+                        <Ionicons name={config.icon as any} size={22} color={config.accentColor} />
+                    </View>
+                    <View variant="transparent" style={styles.textBlock}>
+                        <Text variant="body" bold>{config.title}</Text>
+                        <Text variant="caption" color="secondary" style={{ marginTop: 2 }}>{config.description}</Text>
+                    </View>
+                </View>
+
+                {/* Countdown */}
+                {config.showCountdown === 'start' && competition.scheduled_datetime && (
+                    <View variant="transparent" style={styles.countdownRow}>
+                        <CalcuttaCountdown
+                            targetDate={competition.scheduled_datetime}
+                            label="Auction starts"
+                            size="compact"
+                        />
+                    </View>
+                )}
+                {config.showCountdown === 'end' && competition.auction_end_datetime && (
+                    <View variant="transparent" style={styles.countdownRow}>
+                        <CalcuttaCountdown
+                            targetDate={competition.auction_end_datetime}
+                            label="Bidding closes"
+                            size="compact"
+                        />
+                    </View>
+                )}
+
+                {/* CTA Button */}
+                {config.ctaLabel && config.ctaAction && (
+                    <TouchableOpacity
+                        style={[styles.ctaButton, { backgroundColor: config.ctaColor || theme.colors.primary.default }]}
+                        onPress={config.ctaAction}
+                        activeOpacity={0.7}
+                        disabled={config.loading}
+                    >
+                        {config.loading ? (
+                            <ActivityIndicator size="small" color="#FFFFFF" />
+                        ) : (
+                            <Text variant="body" bold style={{ color: '#FFFFFF' }}>{config.ctaLabel}</Text>
+                        )}
+                    </TouchableOpacity>
+                )}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    card: {
+        borderRadius: 16,
+        borderWidth: 1,
+        flexDirection: 'row',
+        overflow: 'hidden',
+    },
+    accent: {
+        width: 4,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+    topRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+    },
+    iconCircle: {
+        width: 42,
+        height: 42,
+        borderRadius: 21,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    textBlock: {
+        flex: 1,
+        marginLeft: 12,
+        justifyContent: 'center',
+    },
+    countdownRow: {
+        marginTop: 10,
+    },
+    ctaButton: {
+        marginTop: 14,
+        height: 44,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});