@bettoredge/calcutta 0.2.0

package/src/components/CalcuttaTemplateSelector.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, FlatList, ActivityIndicator } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaTemplateProps } from '@bettoredge/types';
+import { useCalcuttaTemplates } from '../hooks/useCalcuttaTemplates';
+
+export interface CalcuttaTemplateSelectorProps {
+    selectedTemplateId?: string;
+    onSelect: (template: CalcuttaTemplateProps | undefined) => void;
+}
+
+export const CalcuttaTemplateSelector: React.FC<CalcuttaTemplateSelectorProps> = ({
+    selectedTemplateId,
+    onSelect,
+}) => {
+    const { theme } = useTheme();
+    const { loading, templates } = useCalcuttaTemplates();
+
+    if (loading) {
+        return (
+            <View variant="transparent" style={styles.centered}>
+                <ActivityIndicator size="small" color={theme.colors.primary.default} />
+            </View>
+        );
+    }
+
+    if (templates.length === 0) {
+        return null;
+    }
+
+    return (
+        <View variant="transparent" style={styles.container}>
+            <Text variant="caption" style={{ color: theme.colors.text.secondary, marginBottom: 8 }}>
+                Use a Template (optional)
+            </Text>
+
+            {selectedTemplateId && (
+                <TouchableOpacity
+                    style={[styles.clearButton, { borderColor: theme.colors.border.subtle }]}
+                    onPress={() => onSelect(undefined)}
+                >
+                    <Ionicons name="close-circle-outline" size={16} color={theme.colors.text.secondary} />
+                    <Text variant="caption" style={{ color: theme.colors.text.secondary, marginLeft: 4 }}>
+                        Clear template
+                    </Text>
+                </TouchableOpacity>
+            )}
+
+            <FlatList
+                data={templates}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                keyExtractor={(item) => item.calcutta_template_id}
+                renderItem={({ item }) => {
+                    const isSelected = item.calcutta_template_id === selectedTemplateId;
+                    return (
+                        <TouchableOpacity
+                            style={[
+                                styles.card,
+                                {
+                                    borderColor: isSelected ? theme.colors.primary.default : theme.colors.border.subtle,
+                                    backgroundColor: isSelected ? theme.colors.primary.subtle : theme.colors.surface.elevated,
+                                },
+                            ]}
+                            activeOpacity={0.7}
+                            onPress={() => onSelect(isSelected ? undefined : item)}
+                        >
+                            <Ionicons
+                                name="copy-outline"
+                                size={20}
+                                color={isSelected ? theme.colors.primary.default : theme.colors.text.tertiary}
+                            />
+                            <Text
+                                variant="body"
+                                bold
+                                numberOfLines={1}
+                                style={{ marginTop: 4 }}
+                            >
+                                {item.template_name}
+                            </Text>
+                            {item.sport && (
+                                <Text variant="caption" style={{ color: theme.colors.text.secondary }}>
+                                    {item.sport}
+                                </Text>
+                            )}
+                            <Text variant="caption" style={{ color: theme.colors.text.tertiary, marginTop: 2 }}>
+                                {item.items?.length ?? '?'} items · {item.rounds?.length ?? '?'} rounds
+                            </Text>
+                        </TouchableOpacity>
+                    );
+                }}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        marginVertical: 8,
+    },
+    centered: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 16,
+    },
+    clearButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 12,
+        borderWidth: 1,
+        marginBottom: 8,
+    },
+    card: {
+        width: 140,
+        padding: 12,
+        borderRadius: 8,
+        borderWidth: 1.5,
+        marginRight: 10,
+    },
+});

package/src/components/sealed/AuctionResultsModal.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useRef } from 'react';
+import { StyleSheet, TouchableOpacity, Animated, Dimensions, FlatList } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaAuctionItemProps } from '@bettoredge/types';
+import { formatCurrency } from '../../helpers/formatting';
+
+interface AuctionResultsModalProps {
+    visible: boolean;
+    onDismiss: () => void;
+    wonItems: CalcuttaAuctionItemProps[];
+    market_type: string;
+}
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+export const AuctionResultsModal: React.FC<AuctionResultsModalProps> = ({
+    visible,
+    onDismiss,
+    wonItems,
+    market_type,
+}) => {
+    const { theme } = useTheme();
+    const scaleAnim = useRef(new Animated.Value(0.8)).current;
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        if (visible) {
+            Animated.parallel([
+                Animated.spring(scaleAnim, {
+                    toValue: 1,
+                    friction: 6,
+                    tension: 40,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(opacityAnim, {
+                    toValue: 1,
+                    duration: 300,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        } else {
+            scaleAnim.setValue(0.8);
+            opacityAnim.setValue(0);
+        }
+    }, [visible]);
+
+    if (!visible) return null;
+
+    const totalSpent = wonItems.reduce((s, i) => s + Number(i.winning_bid), 0);
+    const hasWins = wonItems.length > 0;
+
+    return (
+        <Animated.View style={[StyleSheet.absoluteFill, styles.overlay, { opacity: opacityAnim }]}>
+            <Animated.View
+                style={[
+                    styles.modal,
+                    {
+                        backgroundColor: theme.colors.surface.base,
+                        transform: [{ scale: scaleAnim }],
+                    },
+                ]}
+            >
+                {/* Header */}
+                <View variant="transparent" style={styles.header}>
+                    {hasWins ? (
+                        <>
+                            <Ionicons name="trophy" size={48} color="#F59E0B" />
+                            <Text variant="h2" bold style={{ marginTop: 12 }}>
+                                Congratulations!
+                            </Text>
+                            <Text variant="body" color="secondary" style={{ marginTop: 4, textAlign: 'center' }}>
+                                You won {wonItems.length} item{wonItems.length !== 1 ? 's' : ''} for {formatCurrency(totalSpent, market_type)}
+                            </Text>
+                        </>
+                    ) : (
+                        <>
+                            <Ionicons name="ribbon-outline" size={48} color={theme.colors.text.tertiary} />
+                            <Text variant="h2" bold style={{ marginTop: 12 }}>
+                                Auction Complete
+                            </Text>
+                            <Text variant="body" color="secondary" style={{ marginTop: 4, textAlign: 'center' }}>
+                                You didn't win any items this time. Better luck next auction!
+                            </Text>
+                        </>
+                    )}
+                </View>
+
+                {/* Won items list */}
+                {hasWins && (
+                    <View variant="transparent" style={styles.itemsList}>
+                        {wonItems.slice(0, 6).map(item => (
+                            <View
+                                key={item.calcutta_auction_item_id}
+                                variant="transparent"
+                                style={[styles.wonItem, { backgroundColor: theme.colors.status.successSubtle }]}
+                            >
+                                <Ionicons name="checkmark-circle" size={16} color={theme.colors.status.success} />
+                                <Text variant="body" bold style={{ flex: 1, marginLeft: 8 }} numberOfLines={1}>
+                                    {item.item_name}
+                                </Text>
+                                <Text variant="body" bold style={{ color: theme.colors.status.success }}>
+                                    {formatCurrency(item.winning_bid, market_type)}
+                                </Text>
+                            </View>
+                        ))}
+                        {wonItems.length > 6 && (
+                            <Text variant="caption" color="tertiary" style={{ textAlign: 'center', marginTop: 4 }}>
+                                +{wonItems.length - 6} more item{wonItems.length - 6 !== 1 ? 's' : ''}
+                            </Text>
+                        )}
+                    </View>
+                )}
+
+                {/* CTA */}
+                <TouchableOpacity
+                    style={[styles.ctaButton, { backgroundColor: theme.colors.primary.default }]}
+                    onPress={onDismiss}
+                    activeOpacity={0.7}
+                >
+                    <Text variant="body" bold style={{ color: '#FFFFFF' }}>
+                        {hasWins ? 'View My Items' : 'View Results'}
+                    </Text>
+                </TouchableOpacity>
+            </Animated.View>
+        </Animated.View>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+    },
+    modal: {
+        width: '100%',
+        maxWidth: 360,
+        borderRadius: 16,
+        padding: 24,
+        alignItems: 'center',
+    },
+    header: {
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    itemsList: {
+        width: '100%',
+        marginBottom: 20,
+        gap: 8,
+    },
+    wonItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+        borderRadius: 8,
+    },
+    ctaButton: {
+        width: '100%',
+        paddingVertical: 14,
+        borderRadius: 10,
+        alignItems: 'center',
+    },
+});

package/src/components/sealed/EscrowBottomSheet.tsx

@@ -0,0 +1,185 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+    StyleSheet,
+    TouchableWithoutFeedback,
+    Animated,
+    Dimensions,
+    Keyboard,
+    ScrollView,
+    Platform,
+} from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import type { CalcuttaEscrowProps } from '@bettoredge/types';
+import type { CalcuttaLifecycleState } from '../../helpers/lifecycleState';
+import { canManageEscrow } from '../../helpers/lifecycleState';
+import { CalcuttaEscrow } from '../CalcuttaEscrow';
+
+interface EscrowBottomSheetProps {
+    visible: boolean;
+    onDismiss: () => void;
+    calcutta_competition_id: string;
+    escrow?: CalcuttaEscrowProps;
+    market_type: string;
+    max_escrow?: number;
+    player_balance?: number;
+    onDepositFunds?: (amount: number) => void;
+    onUpdate: () => void;
+    lifecycleState: CalcuttaLifecycleState;
+}
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+export const EscrowBottomSheet: React.FC<EscrowBottomSheetProps> = ({
+    visible,
+    onDismiss,
+    calcutta_competition_id,
+    escrow,
+    market_type,
+    max_escrow,
+    player_balance,
+    onDepositFunds,
+    onUpdate,
+    lifecycleState,
+}) => {
+    const { theme } = useTheme();
+    const slideAnim = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+    const overlayAnim = useRef(new Animated.Value(0)).current;
+    const [keyboardHeight, setKeyboardHeight] = useState(0);
+    const readOnly = !canManageEscrow(lifecycleState);
+
+    useEffect(() => {
+        const showSub = Keyboard.addListener(
+            Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
+            (e) => setKeyboardHeight(e.endCoordinates.height),
+        );
+        const hideSub = Keyboard.addListener(
+            Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
+            () => setKeyboardHeight(0),
+        );
+        return () => {
+            showSub.remove();
+            hideSub.remove();
+        };
+    }, []);
+
+    useEffect(() => {
+        if (visible) {
+            Animated.parallel([
+                Animated.timing(slideAnim, {
+                    toValue: 0,
+                    duration: 300,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(overlayAnim, {
+                    toValue: 1,
+                    duration: 300,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        } else {
+            Keyboard.dismiss();
+            Animated.parallel([
+                Animated.timing(slideAnim, {
+                    toValue: SCREEN_HEIGHT,
+                    duration: 250,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(overlayAnim, {
+                    toValue: 0,
+                    duration: 250,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+    }, [visible]);
+
+    const handleDismiss = () => {
+        Keyboard.dismiss();
+        onDismiss();
+    };
+
+    if (!visible) return null;
+
+    return (
+        <View variant="transparent" style={StyleSheet.absoluteFill}>
+            {/* Overlay — tapping dismisses keyboard + modal */}
+            <TouchableWithoutFeedback onPress={handleDismiss}>
+                <Animated.View style={[styles.overlay, { opacity: overlayAnim }]} />
+            </TouchableWithoutFeedback>
+
+            {/* Sheet */}
+            <Animated.View
+                style={[
+                    styles.sheet,
+                    {
+                        backgroundColor: theme.colors.surface.base,
+                        transform: [{ translateY: slideAnim }],
+                        maxHeight: SCREEN_HEIGHT * 0.85,
+                        paddingBottom: Math.max(40, keyboardHeight),
+                    },
+                ]}
+            >
+                {/* Handle — tapping dismisses keyboard */}
+                <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+                    <View variant="transparent" style={styles.handleArea}>
+                        <View variant="transparent" style={[styles.handle, { backgroundColor: theme.colors.border.default }]} />
+                        <Text variant="body" bold style={styles.title}>
+                            {readOnly ? 'Escrow Balance' : 'Manage Escrow'}
+                        </Text>
+                    </View>
+                </TouchableWithoutFeedback>
+
+                <ScrollView
+                    keyboardShouldPersistTaps="handled"
+                    showsVerticalScrollIndicator={false}
+                    bounces={false}
+                >
+                    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+                        <View variant="transparent">
+                            <CalcuttaEscrow
+                                calcutta_competition_id={calcutta_competition_id}
+                                escrow={escrow}
+                                market_type={market_type}
+                                max_escrow={max_escrow}
+                                player_balance={player_balance}
+                                onDepositFunds={onDepositFunds}
+                                onUpdate={onUpdate}
+                                readOnly={readOnly}
+                            />
+                        </View>
+                    </TouchableWithoutFeedback>
+                </ScrollView>
+            </Animated.View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0,0,0,0.4)',
+    },
+    sheet: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+    },
+    handleArea: {
+        alignItems: 'center',
+        paddingTop: 10,
+        paddingBottom: 4,
+    },
+    handle: {
+        width: 36,
+        height: 4,
+        borderRadius: 2,
+    },
+    title: {
+        textAlign: 'center',
+        marginTop: 8,
+        marginBottom: 4,
+    },
+});