@bettoredge/calcutta 0.3.1 → 0.4.1

package/src/components/CalcuttaBidInput.tsx

@@ -11,7 +11,7 @@ export interface CalcuttaBidInputProps {
     auction_type: 'sealed_bid' | 'live';
     escrow_balance: number;
     existing_bid_amount?: number;
-    onSubmit: (amount: number) => void;
+    onSubmit: (amount: number) => void | Promise<void>;
     loading: boolean;
     disabled?: boolean;
 }
@@ -33,136 +33,129 @@ export const CalcuttaBidInput: React.FC<CalcuttaBidInputProps> = ({
         ? Math.max(Number(min_bid), Number(current_bid) + Number(bid_increment))
         : Number(min_bid);
 
-    const [amount, setAmount] = useState<string>(
-        existing_bid_amount ? existing_bid_amount.toString() : minimumAllowed.toString()
-    );
-    const [error, setError] = useState<string>('');
+    const step = Number(bid_increment) > 0 ? Number(bid_increment) : 1;
+    const available = escrow_balance;
+    const isHighestBidder = existing_bid_amount != null && existing_bid_amount >= Number(current_bid) && Number(current_bid) > 0;
+    const [raise, setRaise] = useState(0);
+    const [error, setError] = useState('');
+    const [submitting, setSubmitting] = useState(false);
 
-    useEffect(() => {
-        if (!existing_bid_amount) {
-            setAmount(minimumAllowed.toString());
-        }
-    }, [minimumAllowed, existing_bid_amount]);
+    // Total bid = minimum + raise
+    const totalBid = minimumAllowed + raise;
+    const canAfford = totalBid <= available;
 
-    const numericAmount = parseFloat(amount) || 0;
+    // Reset raise when minimum changes (new bid came in)
+    useEffect(() => {
+        setRaise(0);
+    }, [minimumAllowed]);
 
-    const validate = (): boolean => {
-        if (isNaN(parseFloat(amount)) || numericAmount <= 0) {
-            setError('Enter a valid bid amount');
-            return false;
-        }
-        if (numericAmount < minimumAllowed) {
-            setError(`Minimum bid is ${formatCurrency(minimumAllowed)}`);
-            return false;
-        }
-        if (auction_type === 'live' && Number(bid_increment) > 0 && (numericAmount - minimumAllowed) % Number(bid_increment) !== 0) {
-            setError(`Bid must be in increments of ${formatCurrency(Number(bid_increment))}`);
-            return false;
-        }
-        const available = escrow_balance + (existing_bid_amount || 0);
-        if (numericAmount > available) {
+    const handleSubmit = async () => {
+        if (!canAfford) {
             setError(`Insufficient escrow. Available: ${formatCurrency(available)}`);
-            return false;
+            return;
         }
+        setSubmitting(true);
         setError('');
-        return true;
+        try {
+            await onSubmit(totalBid);
+            setRaise(0);
+        } catch (e: any) {
+            setError(e?.message || 'Failed to place bid');
+        }
+        setSubmitting(false);
     };
 
-    const handleSubmit = () => {
-        if (validate()) {
-            onSubmit(numericAmount);
+    const bumpUp = () => {
+        const next = raise + step;
+        if (minimumAllowed + next <= available) {
+            setRaise(next);
+            setError('');
         }
     };
 
-    const adjustAmount = (direction: 'up' | 'down') => {
-        const step = Number(bid_increment) > 0 ? Number(bid_increment) : 1;
-        const current = numericAmount;
-        const newAmount = direction === 'up' ? current + step : Math.max(minimumAllowed, current - step);
-        setAmount(newAmount.toString());
+    const bumpDown = () => {
+        const next = raise - step;
+        setRaise(Math.max(0, next));
         setError('');
     };
 
     return (
         <View variant="transparent" style={styles.container}>
-            {/* Amount input row */}
-            <View variant="transparent" style={styles.inputRow}>
-                <TouchableOpacity
-                    style={[styles.adjustButton, { backgroundColor: theme.colors.surface.base, borderColor: theme.colors.border.subtle }]}
-                    onPress={() => adjustAmount('down')}
-                    disabled={numericAmount <= minimumAllowed}
-                >
-                    <Ionicons
-                        name="remove"
-                        size={18}
-                        color={numericAmount <= minimumAllowed ? theme.colors.text.tertiary : theme.colors.text.primary}
-                    />
-                </TouchableOpacity>
-
-                <TextInput
-                    style={[
-                        styles.input,
-                        {
-                            color: theme.colors.text.primary,
-                            backgroundColor: theme.colors.surface.input,
-                            borderColor: error ? theme.colors.status.error : theme.colors.border.subtle,
-                        },
-                    ]}
-                    value={amount}
-                    onChangeText={(text) => {
-                        setAmount(text);
-                        setError('');
-                    }}
-                    keyboardType="decimal-pad"
-                    placeholder={formatCurrency(minimumAllowed)}
-                    placeholderTextColor={theme.colors.text.tertiary}
-                />
-
-                <TouchableOpacity
-                    style={[styles.adjustButton, { backgroundColor: theme.colors.surface.base, borderColor: theme.colors.border.subtle }]}
-                    onPress={() => adjustAmount('up')}
-                >
-                    <Ionicons name="add" size={18} color={theme.colors.text.primary} />
-                </TouchableOpacity>
-            </View>
-
-            {/* Error message */}
-            {error !== '' && (
-                <Text variant="caption" style={[styles.errorText, { color: theme.colors.status.error }]}>
-                    {error}
-                </Text>
-            )}
-
-            {/* Min bid info */}
-            <Text variant="caption" color="tertiary" style={styles.minLabel}>
-                Min: {formatCurrency(minimumAllowed)}
-                {Number(bid_increment) > 0 && ` \u00B7 Increment: ${formatCurrency(Number(bid_increment))}`}
-            </Text>
-            <Text variant="caption" color="tertiary" style={styles.minLabel}>
-                Available: {formatCurrency(escrow_balance + (existing_bid_amount || 0))}
-            </Text>
-
-            {/* Submit button */}
             {disabled ? (
-                <View variant="transparent" style={[styles.submitButton, { backgroundColor: theme.colors.surface.base }]}>
-                    <Text variant="body" bold style={{ color: theme.colors.text.tertiary }}>
-                        Paused
-                    </Text>
+                <View variant="transparent" style={[styles.bidButton, { backgroundColor: theme.colors.surface.base }]}>
+                    <Text variant="body" bold style={{ color: theme.colors.text.tertiary }}>Paused</Text>
                 </View>
-            ) : (
-                <TouchableOpacity
-                    style={[styles.submitButton, { backgroundColor: theme.colors.primary.default }]}
-                    onPress={handleSubmit}
-                    disabled={loading}
-                    activeOpacity={0.7}
-                >
-                    {loading ? (
-                        <ActivityIndicator size="small" color="#FFFFFF" />
-                    ) : (
-                        <Text variant="body" bold style={styles.submitText}>
-                            {existing_bid_amount ? 'Update Bid' : 'Place Bid'}
+            ) : isHighestBidder ? (
+                <View variant="transparent" style={[styles.highestBidder, { backgroundColor: '#10B98115' }]}>
+                    <Ionicons name="checkmark-circle" size={20} color="#10B981" />
+                    <View variant="transparent" style={{ marginLeft: 10, flex: 1 }}>
+                        <Text variant="body" bold style={{ color: '#10B981' }}>You're the highest bidder</Text>
+                        <Text variant="caption" color="secondary">
+                            Your bid: {formatCurrency(existing_bid_amount)} · {formatCurrency(available)} available to raise
                         </Text>
-                    )}
-                </TouchableOpacity>
+                    </View>
+                </View>
+            ) : (
+                <>
+                    {/* Raise adjuster row */}
+                    <View variant="transparent" style={styles.raiseRow}>
+                        <TouchableOpacity
+                            style={[styles.adjustBtn, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle, opacity: raise <= 0 ? 0.4 : 1 }]}
+                            onPress={bumpDown}
+                            disabled={raise <= 0}
+                            activeOpacity={0.7}
+                        >
+                            <Ionicons name="remove" size={20} color={theme.colors.text.primary} />
+                        </TouchableOpacity>
+
+                        <View variant="transparent" style={styles.raiseDisplay}>
+                            {raise > 0 ? (
+                                <Text variant="caption" color="secondary">+{formatCurrency(raise)} more</Text>
+                            ) : (
+                                <Text variant="caption" color="tertiary">Minimum bid</Text>
+                            )}
+                            <Text variant="h3" bold>{formatCurrency(totalBid)}</Text>
+                        </View>
+
+                        <TouchableOpacity
+                            style={[styles.adjustBtn, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle, opacity: (minimumAllowed + raise + step > available) ? 0.4 : 1 }]}
+                            onPress={bumpUp}
+                            disabled={minimumAllowed + raise + step > available}
+                            activeOpacity={0.7}
+                        >
+                            <Ionicons name="add" size={20} color={theme.colors.text.primary} />
+                        </TouchableOpacity>
+                    </View>
+
+                    {/* Bid button */}
+                    <TouchableOpacity
+                        style={[styles.bidButton, { backgroundColor: canAfford ? theme.colors.primary.default : theme.colors.surface.elevated }]}
+                        onPress={handleSubmit}
+                        disabled={submitting || !canAfford}
+                        activeOpacity={0.7}
+                    >
+                        {submitting ? (
+                            <ActivityIndicator size="small" color="#FFFFFF" />
+                        ) : (
+                            <Text variant="body" bold style={{ color: canAfford ? '#FFFFFF' : theme.colors.text.tertiary }}>
+                                {existing_bid_amount ? 'Raise to' : 'Place Bid'} {formatCurrency(totalBid)}
+                            </Text>
+                        )}
+                    </TouchableOpacity>
+
+                    {/* Available */}
+                    <Text variant="caption" color="tertiary" style={{ marginTop: 4, textAlign: 'center' }}>
+                        {formatCurrency(available)} available
+                    </Text>
+                </>
+            )}
+
+            {/* Error */}
+            {error !== '' && (
+                <View variant="transparent" style={[styles.errorRow, { backgroundColor: theme.colors.status.error + '10' }]}>
+                    <Ionicons name="alert-circle" size={14} color={theme.colors.status.error} />
+                    <Text variant="caption" style={{ color: theme.colors.status.error, marginLeft: 6, flex: 1 }}>{error}</Text>
+                </View>
             )}
         </View>
     );
@@ -170,45 +163,43 @@ export const CalcuttaBidInput: React.FC<CalcuttaBidInputProps> = ({
 
 const styles = StyleSheet.create({
     container: {
-        paddingTop: 10,
+        paddingTop: 8,
     },
-    inputRow: {
+    raiseRow: {
         flexDirection: 'row',
         alignItems: 'center',
+        marginBottom: 8,
     },
-    adjustButton: {
-        width: 36,
-        height: 36,
-        borderRadius: 8,
+    adjustBtn: {
+        width: 44,
+        height: 44,
+        borderRadius: 10,
         borderWidth: 1,
         alignItems: 'center',
         justifyContent: 'center',
     },
-    input: {
+    raiseDisplay: {
         flex: 1,
-        height: 36,
-        borderRadius: 8,
-        borderWidth: 1,
-        marginHorizontal: 8,
-        paddingHorizontal: 12,
-        fontSize: 16,
-        textAlign: 'center',
-    },
-    errorText: {
-        marginTop: 4,
-        fontSize: 11,
-    },
-    minLabel: {
-        marginTop: 4,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
-    submitButton: {
-        marginTop: 10,
-        paddingVertical: 10,
-        borderRadius: 8,
+    bidButton: {
+        height: 46,
+        borderRadius: 10,
         alignItems: 'center',
         justifyContent: 'center',
     },
-    submitText: {
-        color: '#FFFFFF',
+    highestBidder: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 14,
+        borderRadius: 10,
+    },
+    errorRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 6,
+        padding: 8,
+        borderRadius: 8,
     },
 });

package/src/components/CalcuttaCountdown.tsx

@@ -0,0 +1,183 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { StyleSheet, Animated } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+
+export interface CalcuttaCountdownProps {
+    targetDate: string;
+    label?: string;
+    size?: 'compact' | 'normal';
+}
+
+type UrgencyTier = 'calm' | 'upcoming' | 'soon' | 'urgent' | 'critical' | 'imminent' | 'past';
+
+const getTier = (ms: number): UrgencyTier => {
+    if (ms <= 0) return 'past';
+    if (ms < 60_000) return 'imminent';       // < 1 min
+    if (ms < 600_000) return 'critical';       // < 10 min
+    if (ms < 3_600_000) return 'urgent';       // < 1 hour
+    if (ms < 86_400_000) return 'soon';        // < 24 hours
+    if (ms < 604_800_000) return 'upcoming';   // < 7 days
+    return 'calm';
+};
+
+const formatRemaining = (ms: number, tier: UrgencyTier): string => {
+    if (tier === 'past') return 'Now';
+
+    const totalSeconds = Math.floor(ms / 1000);
+    const days = Math.floor(totalSeconds / 86400);
+    const hours = Math.floor((totalSeconds % 86400) / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    switch (tier) {
+        case 'calm': {
+            const d = new Date(Date.now() + ms);
+            return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+        }
+        case 'upcoming':
+            return `${days}d ${hours}h`;
+        case 'soon':
+            return `${hours}h ${minutes}m`;
+        case 'urgent':
+            return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+        case 'critical':
+            return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+        case 'imminent':
+            return `0:${String(seconds).padStart(2, '0')}`;
+        default:
+            return '';
+    }
+};
+
+export const CalcuttaCountdown: React.FC<CalcuttaCountdownProps> = ({
+    targetDate,
+    label,
+    size = 'normal',
+}) => {
+    const { theme } = useTheme();
+    const [remaining, setRemaining] = useState(() => new Date(targetDate).getTime() - Date.now());
+    const pulseAnim = useRef(new Animated.Value(1)).current;
+    const tier = getTier(remaining);
+
+    // Live tick for urgent tiers
+    useEffect(() => {
+        const needsTick = ['urgent', 'critical', 'imminent'].includes(tier);
+        if (!needsTick) {
+            // Update every minute for less urgent tiers
+            const interval = setInterval(() => {
+                setRemaining(new Date(targetDate).getTime() - Date.now());
+            }, 60_000);
+            return () => clearInterval(interval);
+        }
+        const interval = setInterval(() => {
+            setRemaining(new Date(targetDate).getTime() - Date.now());
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [targetDate, tier]);
+
+    // Pulse animation for critical/imminent
+    useEffect(() => {
+        if (tier === 'critical' || tier === 'imminent') {
+            const loop = Animated.loop(
+                Animated.sequence([
+                    Animated.timing(pulseAnim, { toValue: 0.6, duration: 600, useNativeDriver: true }),
+                    Animated.timing(pulseAnim, { toValue: 1, duration: 600, useNativeDriver: true }),
+                ])
+            );
+            loop.start();
+            return () => loop.stop();
+        } else {
+            pulseAnim.setValue(1);
+        }
+    }, [tier]);
+
+    const getTierColor = () => {
+        switch (tier) {
+            case 'calm':
+            case 'upcoming':
+                return theme.colors.text.secondary;
+            case 'soon':
+                return theme.colors.primary.default;
+            case 'urgent':
+                return '#D97706'; // amber
+            case 'critical':
+            case 'imminent':
+                return theme.colors.status.error;
+            case 'past':
+                return theme.colors.text.tertiary;
+        }
+    };
+
+    const getTierBg = () => {
+        switch (tier) {
+            case 'critical':
+            case 'imminent':
+                return theme.colors.status.error + '15';
+            case 'urgent':
+                return '#D9770615';
+            default:
+                return 'transparent';
+        }
+    };
+
+    const isCompact = size === 'compact';
+    const timeColor = getTierColor();
+    const formatted = formatRemaining(remaining, tier);
+
+    if (tier === 'past') return null;
+
+    return (
+        <Animated.View style={[
+            styles.container,
+            isCompact && styles.containerCompact,
+            { backgroundColor: getTierBg(), opacity: tier === 'critical' || tier === 'imminent' ? pulseAnim : 1 },
+        ]}>
+            {label && (
+                <Text variant="caption" color="tertiary" style={isCompact ? styles.labelCompact : styles.label}>
+                    {label}
+                </Text>
+            )}
+            <View variant="transparent" style={styles.timeRow}>
+                <Ionicons
+                    name="time-outline"
+                    size={isCompact ? 14 : 16}
+                    color={timeColor}
+                    style={{ marginRight: 4 }}
+                />
+                <Text
+                    variant={isCompact ? 'caption' : 'body'}
+                    bold={tier !== 'calm' && tier !== 'upcoming'}
+                    style={{ color: timeColor }}
+                >
+                    {tier === 'calm' || tier === 'upcoming' ? formatted : formatted}
+                </Text>
+            </View>
+        </Animated.View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 8,
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        alignSelf: 'flex-start',
+    },
+    containerCompact: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    label: {
+        marginBottom: 2,
+    },
+    labelCompact: {
+        marginRight: 6,
+    },
+    timeRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+});