@onairos/react-native 3.1.12 → 3.1.14

package/src/components/ExistingUserDataConfirmation.tsx

@@ -0,0 +1,507 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Dimensions,
+  ActivityIndicator,
+  Alert,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { triggerHaptic, HapticType } from '../utils/haptics';
+
+const { width, height } = Dimensions.get('window');
+
+interface ExistingUserDataConfirmationProps {
+  visible: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  onAddMoreData: () => void;
+  accountInfo: any;
+  userEmail: string;
+}
+
+interface ConnectionInfo {
+  platform: string;
+  connectedAt: string;
+  status: 'active' | 'inactive' | 'expired';
+  hasData: boolean;
+  displayName?: string;
+}
+
+export const ExistingUserDataConfirmation: React.FC<ExistingUserDataConfirmationProps> = ({
+  visible,
+  onConfirm,
+  onCancel,
+  onAddMoreData,
+  accountInfo,
+  userEmail,
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [connections, setConnections] = useState<ConnectionInfo[]>([]);
+  const [dataStats, setDataStats] = useState({
+    connectionsCount: 0,
+    traitsCount: 0,
+    hasPersonalityData: false,
+    hasTrainedModel: false,
+    hasAvatar: false,
+  });
+
+  useEffect(() => {
+    if (visible && accountInfo) {
+      parseAccountInfo();
+    }
+  }, [visible, accountInfo]);
+
+  const parseAccountInfo = () => {
+    console.log('🔍 Parsing account info for existing user:', accountInfo);
+    
+    // Parse existing user data from backend response
+    const existingData = accountInfo.existingUserData || {};
+    const summary = existingData.summary || {};
+    const connectionsList = existingData.connections || [];
+    
+    // Set data statistics
+    setDataStats({
+      connectionsCount: summary.connectionsCount || 0,
+      traitsCount: summary.traitsCount || 0,
+      hasPersonalityData: summary.hasPersonalityData || false,
+      hasTrainedModel: summary.hasTrainedModel || false,
+      hasAvatar: summary.hasAvatar || false,
+    });
+    
+    // Parse connections
+    const parsedConnections: ConnectionInfo[] = connectionsList.map((conn: any) => ({
+      platform: conn.platform,
+      connectedAt: conn.connectedAt,
+      status: conn.status,
+      hasData: conn.hasData,
+      displayName: conn.displayName || conn.platform,
+    }));
+    
+    setConnections(parsedConnections);
+    
+    console.log('📊 Parsed data stats:', dataStats);
+    console.log('🔗 Parsed connections:', parsedConnections);
+  };
+
+  const handleConfirm = async () => {
+    setIsLoading(true);
+    triggerHaptic(HapticType.SUCCESS);
+    
+    try {
+      // Small delay for better UX
+      await new Promise<void>(resolve => setTimeout(() => resolve(), 500));
+      onConfirm();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    onCancel();
+  };
+
+  const handleAddMoreData = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    onAddMoreData();
+  };
+
+  const getPlatformEmoji = (platform: string): string => {
+    const emojiMap: { [key: string]: string } = {
+      'YouTube': '📺',
+      'Reddit': '🔴',
+      'Instagram': '📸',
+      'LinkedIn': '💼',
+      'Pinterest': '📌',
+      'Facebook': '📘',
+      'Gmail': '📧',
+      'Email': '✉️',
+    };
+    return emojiMap[platform] || '🔗';
+  };
+
+  const getStatusColor = (status: string): string => {
+    switch (status) {
+      case 'active': return '#10B981';
+      case 'expired': return '#F59E0B';
+      case 'inactive': return '#6B7280';
+      default: return '#6B7280';
+    }
+  };
+
+  if (!visible) return null;
+
+  return (
+    <View style={styles.overlay}>
+      <View style={styles.container}>
+        <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+          {/* Header */}
+          <View style={styles.header}>
+            <Text style={styles.headerTitle}>Welcome Back!</Text>
+            <Text style={styles.headerSubtitle}>
+              We found your existing Onairos account
+            </Text>
+          </View>
+
+          {/* User Info */}
+          <View style={styles.userInfoContainer}>
+            <View style={styles.userInfoRow}>
+              <Text style={styles.userInfoLabel}>Email:</Text>
+              <Text style={styles.userInfoValue}>{userEmail}</Text>
+            </View>
+            <View style={styles.userInfoRow}>
+              <Text style={styles.userInfoLabel}>Account Status:</Text>
+              <Text style={[styles.userInfoValue, { color: '#10B981' }]}>Verified</Text>
+            </View>
+          </View>
+
+          {/* Data Summary */}
+          <View style={styles.dataSummaryContainer}>
+            <Text style={styles.sectionTitle}>Your Existing Data</Text>
+            
+            <View style={styles.statsGrid}>
+              <View style={styles.statItem}>
+                <Text style={styles.statNumber}>{dataStats.connectionsCount}</Text>
+                <Text style={styles.statLabel}>Connections</Text>
+              </View>
+              <View style={styles.statItem}>
+                <Text style={styles.statNumber}>{dataStats.traitsCount}</Text>
+                <Text style={styles.statLabel}>Traits</Text>
+              </View>
+              <View style={styles.statItem}>
+                <Text style={styles.statNumber}>{dataStats.hasTrainedModel ? '✅' : '❌'}</Text>
+                <Text style={styles.statLabel}>AI Model</Text>
+              </View>
+            </View>
+          </View>
+
+          {/* Connected Platforms */}
+          {connections.length > 0 && (
+            <View style={styles.connectionsContainer}>
+              <Text style={styles.sectionTitle}>Connected Platforms</Text>
+              
+              {connections.map((connection, index) => (
+                <View key={index} style={styles.connectionItem}>
+                  <View style={styles.connectionLeft}>
+                    <Text style={styles.connectionEmoji}>
+                      {getPlatformEmoji(connection.platform)}
+                    </Text>
+                    <View style={styles.connectionInfo}>
+                      <Text style={styles.connectionName}>{connection.displayName}</Text>
+                      <Text style={styles.connectionDate}>
+                        Connected {new Date(connection.connectedAt).toLocaleDateString()}
+                      </Text>
+                    </View>
+                  </View>
+                  <View style={styles.connectionRight}>
+                    <View style={[
+                      styles.statusDot,
+                      { backgroundColor: getStatusColor(connection.status) }
+                    ]} />
+                    <Text style={[
+                      styles.statusText,
+                      { color: getStatusColor(connection.status) }
+                    ]}>
+                      {connection.status}
+                    </Text>
+                  </View>
+                </View>
+              ))}
+            </View>
+          )}
+
+          {/* Data Usage Explanation */}
+          <View style={styles.explanationContainer}>
+            <Text style={styles.explanationTitle}>Share Your Data with Enoch?</Text>
+            <Text style={styles.explanationText}>
+              Your existing personality data and connected accounts will be used to:
+            </Text>
+            <View style={styles.benefitsList}>
+              <Text style={styles.benefitItem}>• Create personalized experiences</Text>
+              <Text style={styles.benefitItem}>• Match you with compatible people</Text>
+              <Text style={styles.benefitItem}>• Provide AI-powered insights</Text>
+              <Text style={styles.benefitItem}>• Enhance your social connections</Text>
+            </View>
+            <Text style={styles.privacyNote}>
+              Your data remains secure and encrypted. You can manage your privacy settings anytime.
+            </Text>
+          </View>
+
+          {/* Action Buttons */}
+          <View style={styles.actionButtonsContainer}>
+            {/* Add More Data Button */}
+            <TouchableOpacity
+              style={styles.addMoreButton}
+              onPress={handleAddMoreData}
+              activeOpacity={0.8}
+            >
+              <Text style={styles.addMoreButtonText}>+ Add More Data</Text>
+            </TouchableOpacity>
+
+            {/* Main Action Buttons */}
+            <View style={styles.mainButtons}>
+              <TouchableOpacity
+                style={styles.cancelButton}
+                onPress={handleCancel}
+                activeOpacity={0.8}
+              >
+                <Text style={styles.cancelButtonText}>Not Now</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={styles.confirmButton}
+                onPress={handleConfirm}
+                activeOpacity={0.8}
+                disabled={isLoading}
+              >
+                <LinearGradient
+                  colors={['#D4A536', '#B8941F']}
+                  style={styles.confirmButtonGradient}
+                >
+                  {isLoading ? (
+                    <ActivityIndicator color="#FFFFFF" size="small" />
+                  ) : (
+                    <Text style={styles.confirmButtonText}>Share Data</Text>
+                  )}
+                </LinearGradient>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1000,
+  },
+  container: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    width: width * 0.9,
+    maxHeight: height * 0.8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 10,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  header: {
+    padding: 24,
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F3F4F6',
+  },
+  headerTitle: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#1F2937',
+    marginBottom: 8,
+  },
+  headerSubtitle: {
+    fontSize: 16,
+    color: '#6B7280',
+    textAlign: 'center',
+  },
+  userInfoContainer: {
+    padding: 20,
+    backgroundColor: '#F9FAFB',
+    marginHorizontal: 20,
+    marginTop: 20,
+    borderRadius: 12,
+  },
+  userInfoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  userInfoLabel: {
+    fontSize: 14,
+    color: '#6B7280',
+    fontWeight: '500',
+  },
+  userInfoValue: {
+    fontSize: 14,
+    color: '#1F2937',
+    fontWeight: '600',
+  },
+  dataSummaryContainer: {
+    padding: 20,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 16,
+  },
+  statsGrid: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    backgroundColor: '#F9FAFB',
+    borderRadius: 12,
+    padding: 16,
+  },
+  statItem: {
+    alignItems: 'center',
+  },
+  statNumber: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#D4A536',
+    marginBottom: 4,
+  },
+  statLabel: {
+    fontSize: 12,
+    color: '#6B7280',
+    fontWeight: '500',
+  },
+  connectionsContainer: {
+    padding: 20,
+  },
+  connectionItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 16,
+    backgroundColor: '#F9FAFB',
+    borderRadius: 12,
+    marginBottom: 8,
+  },
+  connectionLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  connectionEmoji: {
+    fontSize: 24,
+    marginRight: 12,
+  },
+  connectionInfo: {
+    flex: 1,
+  },
+  connectionName: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 2,
+  },
+  connectionDate: {
+    fontSize: 12,
+    color: '#6B7280',
+  },
+  connectionRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 6,
+  },
+  statusText: {
+    fontSize: 12,
+    fontWeight: '500',
+    textTransform: 'capitalize',
+  },
+  explanationContainer: {
+    padding: 20,
+    backgroundColor: '#F0F9FF',
+    marginHorizontal: 20,
+    borderRadius: 12,
+    marginBottom: 20,
+  },
+  explanationTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 12,
+  },
+  explanationText: {
+    fontSize: 14,
+    color: '#4B5563',
+    marginBottom: 12,
+    lineHeight: 20,
+  },
+  benefitsList: {
+    marginBottom: 12,
+  },
+  benefitItem: {
+    fontSize: 14,
+    color: '#4B5563',
+    marginBottom: 4,
+    lineHeight: 20,
+  },
+  privacyNote: {
+    fontSize: 12,
+    color: '#6B7280',
+    fontStyle: 'italic',
+    lineHeight: 16,
+  },
+  actionButtonsContainer: {
+    padding: 20,
+  },
+  addMoreButton: {
+    backgroundColor: '#F3F4F6',
+    borderRadius: 12,
+    padding: 16,
+    alignItems: 'center',
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+  },
+  addMoreButtonText: {
+    fontSize: 16,
+    color: '#4B5563',
+    fontWeight: '600',
+  },
+  mainButtons: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  cancelButton: {
+    flex: 1,
+    backgroundColor: '#F3F4F6',
+    borderRadius: 12,
+    padding: 16,
+    alignItems: 'center',
+  },
+  cancelButtonText: {
+    fontSize: 16,
+    color: '#6B7280',
+    fontWeight: '600',
+  },
+  confirmButton: {
+    flex: 2,
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  confirmButtonGradient: {
+    padding: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  confirmButtonText: {
+    fontSize: 16,
+    color: '#FFFFFF',
+    fontWeight: '700',
+  },
+}); 

package/src/components/GoogleButton.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { TouchableOpacity, Text, Image, StyleSheet, ViewStyle } from 'react-native';
+
+interface GoogleButtonProps {
+  onPress: () => void;
+  style?: ViewStyle;
+  disabled?: boolean;
+}
+
+const GoogleButton: React.FC<GoogleButtonProps> = ({ onPress, style, disabled = false }) => {
+  return (
+    <TouchableOpacity
+      style={[styles.button, style, disabled && styles.disabled]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <Image
+        source={require('../assets/images/Googlelogo.png')}
+        style={styles.icon}
+        resizeMode="contain"
+      />
+      <Text style={styles.text}>Continue with Google</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    borderRadius: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 8,
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#333333',
+  },
+});
+
+export { GoogleButton };
+export default GoogleButton;

package/src/components/HeadingGroup.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import { TEXT_STYLES } from '../theme';
+
+interface HeadingGroupProps {
+  kicker?: string;
+  title?: string;
+  style?: ViewStyle;
+}
+
+const HeadingGroup: React.FC<HeadingGroupProps> = ({
+  kicker = "Welcome to",
+  title = "Onairos",
+  style,
+}) => {
+  return (
+    <View style={[styles.container, style]}>
+      <Text style={styles.kicker}>{kicker}</Text>
+      <Text style={styles.title}>{title}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  
+  kicker: {
+    ...TEXT_STYLES.kicker,
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: '700', // Force bold weight
+    marginBottom: 4, // Small gap between kicker and title
+  },
+  
+  title: {
+    ...TEXT_STYLES.welcomeTitle,
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: '700', // Force bold weight
+  },
+});
+
+export { HeadingGroup };
+export default HeadingGroup;