vibefast-cli 1.3.0 → 1.3.1

package/recipes/screen-kits-finance/apps/native/src/features/screen-kits/finance/screens/send-modal.tsx

@@ -0,0 +1,420 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import React, { useState } from 'react';
+import {
+  LayoutAnimation,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Animated, {
+  FadeInUp,
+  useSharedValue,
+  withSequence,
+  withSpring,
+  ZoomIn,
+} from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+import { FINANCE_COLORS } from '../constants';
+
+const CONTACTS = [
+  { id: '1', name: 'Alice', initial: 'A', color: '#8B5CF6' },
+  { id: '2', name: 'Bob', initial: 'B', color: '#10B981' },
+  { id: '3', name: 'Charlie', initial: 'C', color: '#F59E0B' },
+  { id: '4', name: 'Diana', initial: 'D', color: '#EC4899' },
+  { id: '5', name: 'Ethan', initial: 'E', color: '#3B82F6' },
+];
+
+export default function SendModal() {
+  const router = useRouter();
+  const [amount, setAmount] = useState('');
+  const [selectedContact, setSelectedContact] = useState<string | null>(null);
+  const [step, setStep] = useState<'input' | 'success'>('input');
+
+  const scale = useSharedValue(1);
+
+  const handleSend = () => {
+    scale.value = withSequence(withSpring(0.9), withSpring(1));
+    setTimeout(() => {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      setStep('success');
+    }, 200);
+  };
+
+  const handleClose = () => {
+    router.back();
+  };
+
+  if (step === 'success') {
+    return (
+      <View style={styles.successContainer}>
+        <Animated.View
+          entering={ZoomIn.springify()}
+          style={styles.successContent}
+        >
+          <View style={styles.successIcon}>
+            <Ionicons name="checkmark" size={48} color="white" />
+          </View>
+          <Text style={styles.successTitle}>Sent!</Text>
+          <Text style={styles.successMessage}>
+            You successfully sent ${amount || '0'} to{' '}
+            {CONTACTS.find((c) => c.id === selectedContact)?.name || 'Unknown'}.
+          </Text>
+
+          <TouchableOpacity onPress={handleClose} style={styles.doneButton}>
+            <Text style={styles.doneButtonText}>Done</Text>
+          </TouchableOpacity>
+        </Animated.View>
+      </View>
+    );
+  }
+
+  const formatCurrency = (value: string) => {
+    const clean = value.replace(/[^0-9.]/g, '');
+    const parts = clean.split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return parts.join('.');
+  };
+
+  const handleAmountChange = (text: string) => {
+    if ((text.match(/\./g) || []).length > 1) return;
+    if (text === '') {
+      setAmount('');
+      return;
+    }
+    setAmount(formatCurrency(text));
+  };
+
+  const getFontSize = () => {
+    if (amount.length > 10) return 32;
+    if (amount.length > 7) return 48;
+    return 60;
+  };
+
+  const isValid = amount && selectedContact;
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
+          <Ionicons name="close" size={20} color="white" />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Send Money</Text>
+        <View style={styles.headerSpacer} />
+      </View>
+
+      <Animated.View
+        entering={FadeInUp.delay(200).springify()}
+        style={styles.content}
+      >
+        {/* Amount Input */}
+        <View style={styles.amountSection}>
+          <Text style={styles.amountLabel}>Enter Amount</Text>
+          <View style={styles.amountRow}>
+            <Text
+              style={[
+                styles.currencySymbol,
+                {
+                  fontSize: getFontSize() * 0.8,
+                  lineHeight: getFontSize() * 1.2,
+                },
+              ]}
+            >
+              $
+            </Text>
+            <TextInput
+              value={amount}
+              onChangeText={handleAmountChange}
+              placeholder="0"
+              placeholderTextColor="#52525b"
+              keyboardType="numeric"
+              style={[
+                styles.amountInput,
+                {
+                  fontSize: getFontSize(),
+                  lineHeight: getFontSize() * 1.2,
+                },
+              ]}
+              autoFocus
+            />
+          </View>
+          <Text style={styles.balanceText}>Balance: $42,593.00</Text>
+        </View>
+
+        {/* Quick Contacts */}
+        <Text style={styles.contactsTitle}>Recent Contacts</Text>
+        <View style={styles.contactsRow}>
+          <TouchableOpacity style={styles.addContactButton}>
+            <View style={styles.addContactIcon}>
+              <Ionicons name="add" size={24} color="white" />
+            </View>
+            <Text style={styles.addContactText}>Add</Text>
+          </TouchableOpacity>
+          {CONTACTS.map((contact, index) => (
+            <TouchableOpacity
+              key={contact.id}
+              onPress={() => setSelectedContact(contact.id)}
+              style={styles.contactItem}
+            >
+              <Animated.View
+                entering={FadeInUp.delay(300 + index * 50)}
+                style={[
+                  styles.contactAvatar,
+                  selectedContact === contact.id && {
+                    borderColor: FINANCE_COLORS.primary,
+                    backgroundColor: `${FINANCE_COLORS.primary}15`,
+                  },
+                ]}
+              >
+                <Text style={[styles.contactInitial, { color: contact.color }]}>
+                  {contact.initial}
+                </Text>
+                {selectedContact === contact.id && (
+                  <View style={styles.contactSelected}>
+                    <Ionicons name="checkmark" size={10} color="white" />
+                  </View>
+                )}
+              </Animated.View>
+              <Text
+                style={[
+                  styles.contactName,
+                  selectedContact === contact.id && styles.contactNameSelected,
+                ]}
+              >
+                {contact.name}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </Animated.View>
+
+      {/* Footer Button */}
+      <Animated.View entering={FadeInUp.delay(600)} style={styles.footer}>
+        <TouchableOpacity
+          onPress={handleSend}
+          disabled={!isValid}
+          style={[
+            styles.sendButton,
+            isValid
+              ? { backgroundColor: FINANCE_COLORS.primary }
+              : styles.sendButtonDisabled,
+          ]}
+        >
+          <Text
+            style={[
+              styles.sendButtonText,
+              !isValid && styles.sendButtonTextDisabled,
+            ]}
+          >
+            {isValid ? 'Send Now' : 'Enter details to send'}
+          </Text>
+          {isValid && <Ionicons name="arrow-forward" size={20} color="white" />}
+        </TouchableOpacity>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#09090b',
+    padding: 24,
+    paddingTop: 48,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 40,
+  },
+  closeButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#18181b',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerTitle: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 18,
+  },
+  headerSpacer: {
+    width: 40,
+  },
+  content: {
+    flex: 1,
+  },
+  amountSection: {
+    alignItems: 'center',
+    marginBottom: 48,
+  },
+  amountLabel: {
+    color: '#71717a',
+    fontWeight: '500',
+    marginBottom: 16,
+  },
+  amountRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  currencySymbol: {
+    color: '#ffffff',
+    fontWeight: '700',
+    marginRight: 4,
+    includeFontPadding: false,
+  },
+  amountInput: {
+    color: '#ffffff',
+    fontWeight: '700',
+    minWidth: 20,
+    textAlign: 'center',
+    includeFontPadding: false,
+  },
+  balanceText: {
+    color: '#52525b',
+    fontSize: 14,
+    fontWeight: '500',
+    marginTop: 8,
+  },
+  contactsTitle: {
+    color: '#ffffff',
+    fontWeight: '700',
+    marginBottom: 16,
+  },
+  contactsRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 16,
+    marginBottom: 32,
+  },
+  addContactButton: {
+    width: 64,
+    alignItems: 'center',
+    gap: 8,
+  },
+  addContactIcon: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: '#18181b',
+    borderWidth: 1,
+    borderColor: '#27272a',
+    borderStyle: 'dashed',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  addContactText: {
+    color: '#71717a',
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  contactItem: {
+    width: 64,
+    alignItems: 'center',
+    gap: 8,
+  },
+  contactAvatar: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 2,
+    borderColor: 'transparent',
+    backgroundColor: '#18181b',
+  },
+  contactInitial: {
+    fontWeight: '700',
+    fontSize: 18,
+  },
+  contactSelected: {
+    position: 'absolute',
+    bottom: -4,
+    right: -4,
+    backgroundColor: '#10b981',
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#000000',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  contactName: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: '#71717a',
+  },
+  contactNameSelected: {
+    color: '#ffffff',
+  },
+  footer: {
+    marginBottom: 32,
+  },
+  sendButton: {
+    height: 64,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 8,
+  },
+  sendButtonDisabled: {
+    backgroundColor: '#27272a',
+  },
+  sendButtonText: {
+    fontWeight: '700',
+    fontSize: 18,
+    color: '#ffffff',
+  },
+  sendButtonTextDisabled: {
+    color: '#71717a',
+  },
+  successContainer: {
+    flex: 1,
+    backgroundColor: '#000000',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  successContent: {
+    alignItems: 'center',
+  },
+  successIcon: {
+    width: 96,
+    height: 96,
+    borderRadius: 48,
+    backgroundColor: '#10b981',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 24,
+  },
+  successTitle: {
+    color: '#ffffff',
+    fontSize: 30,
+    fontWeight: '700',
+    marginBottom: 8,
+    lineHeight: 40,
+  },
+  successMessage: {
+    color: '#a1a1aa',
+    textAlign: 'center',
+    marginBottom: 32,
+  },
+  doneButton: {
+    backgroundColor: '#27272a',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 16,
+  },
+  doneButtonText: {
+    color: '#ffffff',
+    fontWeight: '700',
+  },
+});