@onairos/react-native 3.4.0 → 3.5.4

package/src/components/DataRequestScreen.tsx

@@ -1,356 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-  Image,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS } from '../constants';
-
-interface DataRequestScreenProps {
-  onAccept: () => void;
-  onDecline: () => void;
-  requestData: Record<string, any>;
-  AppName: string;
-  appIcon?: any;
-}
-
-export const DataRequestScreen: React.FC<DataRequestScreenProps> = ({
-  onAccept,
-  onDecline,
-  requestData,
-  AppName,
-  appIcon,
-}) => {
-  
-  // Basic data requests that are always shown
-  const basicRequests = [
-    {
-      key: 'basic_profile',
-      name: 'Basic Profile',
-      description: 'Your basic social media profile information',
-      reward: 'Personalized experience',
-      icon: 'person'
-    },
-    {
-      key: 'content_analysis',
-      name: 'Content Analysis',
-      description: 'Analysis of your posts and interactions',
-      reward: 'Better recommendations',
-      icon: 'analytics'
-    }
-  ];
-
-  const renderDataRequest = (data: any, key: string, isBasic = false) => {
-    let name, description, reward, icon;
-    
-    if (isBasic) {
-      ({ name, description, reward, icon } = data);
-    } else {
-      // Handle new format (personality_traits, sentiment_analysis)
-      if ('name' in data && 'description' in data && 'reward' in data) {
-        name = data.name;
-        description = data.description;
-        reward = data.reward;
-        icon = key === 'personality_traits' ? 'psychology' : 'analytics';
-      } else if ('type' in data && 'descriptions' in data && 'reward' in data) {
-        // Handle old format (Small, Medium, Large)
-        name = `${key} - ${data.type}`;
-        description = data.descriptions;
-        reward = data.reward;
-        icon = 'data_usage';
-      } else {
-        return null;
-      }
-    }
-
-    return (
-      <View key={key} style={styles.dataRequestContainer}>
-        <View style={styles.dataRequestHeader}>
-          <View style={styles.iconContainer}>
-            <Icon 
-              name={icon} 
-              size={24} 
-              color={COLORS.primary} 
-            />
-          </View>
-          <View style={styles.requestContent}>
-            <Text style={styles.dataRequestName}>{name}</Text>
-            <Text style={styles.dataRequestDescription}>{description}</Text>
-            <View style={styles.rewardContainer}>
-              <Icon name="star" size={16} color="#FFD700" />
-              <Text style={styles.rewardText}>{reward}</Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    );
-  };
-
-  const renderCustomRequests = () => {
-    return Object.entries(requestData).map(([key, data]) => {
-      // Skip if data is undefined or doesn't have the expected structure
-      if (!data || typeof data !== 'object') return null;
-      return renderDataRequest(data, key, false);
-    });
-  };
-
-  return (
-    <View style={styles.container}>
-      {/* Header */}
-      <View style={styles.header}>
-        <View style={styles.titleContainer}>
-          <Text style={styles.title}>Data Sharing Request</Text>
-          <Text style={styles.subtitle}>
-            {AppName} would like access to the following data
-          </Text>
-        </View>
-        
-        {/* App Icon Flow: Onairos → Your App */}
-        <View style={styles.iconFlow}>
-          <Image 
-            source={require('../assets/images/onairos_logo.png')} 
-            style={styles.onairosIcon}
-            resizeMode="contain"
-          />
-          <Icon name="arrow-forward" size={24} color="#666" style={styles.arrowIcon} />
-          {appIcon ? (
-            <Image 
-              source={appIcon} 
-              style={styles.appIcon}
-              resizeMode="contain"
-            />
-          ) : (
-            <View style={styles.appIconPlaceholder}>
-              <Text style={styles.appIconText}>
-                {AppName.charAt(0).toUpperCase()}
-              </Text>
-            </View>
-          )}
-        </View>
-      </View>
-
-      {/* Data Requests */}
-      <ScrollView 
-        style={styles.content}
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
-        {/* Basic Requests (always shown) */}
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Basic Data</Text>
-          {basicRequests.map((request) => renderDataRequest(request, request.key, true))}
-        </View>
-
-        {/* Custom Requests (from developer) */}
-        {Object.keys(requestData).length > 0 && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Additional Insights</Text>
-            {renderCustomRequests()}
-          </View>
-        )}
-
-        {/* Privacy Note */}
-        <View style={styles.privacyNote}>
-          <Icon name="security" size={20} color="#28a745" />
-          <Text style={styles.privacyText}>
-            Your data is encrypted and never shared with third parties
-          </Text>
-        </View>
-      </ScrollView>
-
-      {/* Footer Buttons */}
-      <View style={styles.footer}>
-        <TouchableOpacity
-          style={styles.declineButton}
-          onPress={onDecline}
-        >
-          <Text style={styles.declineButtonText}>Decline</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={styles.acceptButton}
-          onPress={onAccept}
-        >
-          <Text style={styles.acceptButtonText}>Accept & Continue</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  header: {
-    padding: 24,
-    paddingTop: 40,
-    backgroundColor: '#f8f9fa',
-    borderBottomWidth: 1,
-    borderBottomColor: '#e9ecef',
-  },
-  titleContainer: {
-    marginBottom: 20,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-  },
-  iconFlow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  onairosIcon: {
-    width: 32,
-    height: 32,
-  },
-  arrowIcon: {
-    marginHorizontal: 12,
-  },
-  appIcon: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-  },
-  appIconPlaceholder: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: COLORS.primary,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  appIconText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  content: {
-    flex: 1,
-  },
-  scrollContent: {
-    padding: 20,
-  },
-  section: {
-    marginBottom: 24,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#000',
-    marginBottom: 16,
-  },
-  dataRequestContainer: {
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: '#e9ecef',
-    borderRadius: 12,
-    padding: 16,
-    backgroundColor: '#fff',
-  },
-  dataRequestHeader: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  iconContainer: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: '#f0f8ff',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12,
-  },
-  requestContent: {
-    flex: 1,
-  },
-  dataRequestName: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#000',
-    marginBottom: 4,
-  },
-  dataRequestDescription: {
-    fontSize: 14,
-    color: '#666',
-    lineHeight: 20,
-    marginBottom: 8,
-  },
-  rewardContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#fff3cd',
-    padding: 6,
-    borderRadius: 6,
-    alignSelf: 'flex-start',
-  },
-  rewardText: {
-    fontSize: 12,
-    fontWeight: '500',
-    marginLeft: 4,
-    color: '#856404',
-  },
-  privacyNote: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#d4edda',
-    padding: 12,
-    borderRadius: 8,
-    marginTop: 8,
-  },
-  privacyText: {
-    fontSize: 14,
-    color: '#155724',
-    marginLeft: 8,
-    flex: 1,
-  },
-  footer: {
-    flexDirection: 'row',
-    padding: 20,
-    borderTopWidth: 1,
-    borderTopColor: '#e9ecef',
-    backgroundColor: '#fff',
-  },
-  declineButton: {
-    flex: 1,
-    paddingVertical: 16,
-    paddingHorizontal: 24,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#dc3545',
-    marginRight: 12,
-    alignItems: 'center',
-  },
-  declineButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#dc3545',
-  },
-  acceptButton: {
-    flex: 2,
-    paddingVertical: 16,
-    paddingHorizontal: 24,
-    borderRadius: 12,
-    backgroundColor: '#28a745',
-    alignItems: 'center',
-  },
-  acceptButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#fff',
-  },
-}); 

package/src/components/EmailVerificationModal.tsx

@@ -1,364 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  Modal,
-  SafeAreaView,
-  TouchableWithoutFeedback,
-  TextInput,
-  Alert,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { requestEmailVerification, verifyEmailCode, checkEmailVerificationStatus } from '../services/platformAuthService';
-
-export interface EmailVerificationModalProps {
-  visible: boolean;
-  email: string;
-  onClose: () => void;
-  onVerificationComplete: (email: string, isExistingUser: boolean) => void;
-  onVerificationFailed: (error: string) => void;
-  testMode?: boolean;
-}
-
-export const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({
-  visible,
-  email,
-  onClose,
-  onVerificationComplete,
-  onVerificationFailed,
-  testMode = false,
-}) => {
-  const [step, setStep] = useState<'request' | 'verify'>('request');
-  const [verificationCode, setVerificationCode] = useState<string>('');
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [codeSent, setCodeSent] = useState<boolean>(false);
-
-  const handleRequestVerification = useCallback(async () => {
-    if (!email) {
-      Alert.alert('Error', 'Email address is required');
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      console.log('📧 Requesting email verification for:', email);
-      
-      // First check if there's already a pending verification
-      const statusCheck = await checkEmailVerificationStatus(email, testMode);
-      if (statusCheck.success && statusCheck.isPending) {
-        console.log('✅ Email verification already pending');
-        setCodeSent(true);
-        setStep('verify');
-        setIsLoading(false);
-        return;
-      }
-
-      // Request new verification code
-      const result = await requestEmailVerification(email, testMode);
-      
-      if (result.success) {
-        console.log('✅ Email verification code requested successfully');
-        setCodeSent(true);
-        setStep('verify');
-        Alert.alert(
-          'Verification Code Sent', 
-          result.message || 'Please check your email for the verification code.\n\nNote: In development mode, any 6-digit code will work.',
-          [{ text: 'OK', style: 'default' }]
-        );
-      } else {
-        console.error('❌ Failed to request verification code:', result.error);
-        Alert.alert('Error', result.error || 'Failed to send verification code');
-        onVerificationFailed(result.error || 'Failed to send verification code');
-      }
-    } catch (error) {
-      console.error('❌ Error requesting verification:', error);
-      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-      Alert.alert('Error', errorMessage);
-      onVerificationFailed(errorMessage);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [email, onVerificationFailed]);
-
-  const handleVerifyCode = useCallback(async () => {
-    if (!verificationCode.trim()) {
-      Alert.alert('Error', 'Please enter the verification code');
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      console.log('🔍 Verifying email code for:', email);
-      
-      const result = await verifyEmailCode(email, verificationCode.trim(), testMode);
-      
-      if (result.success) {
-        console.log('✅ Email verification successful');
-        
-        // Check if JWT token was received and stored
-        if (result.token) {
-          console.log('🎫 JWT token received and stored for user authentication');
-        }
-        
-        // Use the existingUser flag from the backend response
-        const isExistingUser = result.existingUser || false;
-        
-        Alert.alert(
-          'Email Verified', 
-          result.message || 'Your email has been verified successfully!\n\n' + 
-          (result.token ? 'You are now authenticated and can access user features.' : 'Authentication complete.'),
-          [{ 
-            text: 'Continue', 
-            onPress: () => {
-              onVerificationComplete(email, isExistingUser);
-            }
-          }]
-        );
-      } else {
-        console.error('❌ Email verification failed:', result.error);
-        Alert.alert('Verification Failed', result.error || 'Invalid verification code. Please try again.');
-      }
-    } catch (error) {
-      console.error('❌ Error verifying code:', error);
-      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-      Alert.alert('Error', errorMessage);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [email, verificationCode, onVerificationComplete]);
-
-  const handleResendCode = useCallback(async () => {
-    setVerificationCode('');
-    await handleRequestVerification();
-  }, [handleRequestVerification]);
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="slide"
-      statusBarTranslucent
-      onRequestClose={onClose}
-    >
-      <TouchableWithoutFeedback onPress={onClose}>
-        <View style={styles.modalOverlay}>
-          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
-            <View style={styles.modalContent}>
-              <SafeAreaView style={styles.container}>
-                <View style={styles.header}>
-                  <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-                    <Icon name="close" size={24} color="#666" />
-                  </TouchableOpacity>
-                  <Text style={styles.headerTitle}>Email Verification</Text>
-                  <View style={styles.placeholder} />
-                </View>
-
-                <View style={styles.content}>
-                  {step === 'request' ? (
-                    <>
-                      <View style={styles.iconContainer}>
-                        <Icon name="email" size={48} color="#4CAF50" />
-                      </View>
-                      
-                      <Text style={styles.title}>Verify Your Email</Text>
-                      <Text style={styles.subtitle}>
-                        We need to verify your email address to continue
-                      </Text>
-                      
-                      <View style={styles.emailContainer}>
-                        <Text style={styles.emailLabel}>Email Address:</Text>
-                        <Text style={styles.emailText}>{email}</Text>
-                      </View>
-
-                      <TouchableOpacity
-                        style={[styles.button, isLoading && styles.buttonDisabled]}
-                        onPress={handleRequestVerification}
-                        disabled={isLoading}
-                      >
-                        {isLoading ? (
-                          <ActivityIndicator size="small" color="#fff" />
-                        ) : (
-                          <Text style={styles.buttonText}>Send Verification Code</Text>
-                        )}
-                      </TouchableOpacity>
-                    </>
-                  ) : (
-                    <>
-                      <View style={styles.iconContainer}>
-                        <Icon name="verified" size={48} color="#4CAF50" />
-                      </View>
-                      
-                      <Text style={styles.title}>Enter Verification Code</Text>
-                      <Text style={styles.subtitle}>
-                        We've sent a 6-digit code to {email}
-                      </Text>
-                      
-                      {testMode && (
-                        <Text style={styles.testingNote}>
-                          🔍 Test Mode: Any 6-digit code will work for verification
-                        </Text>
-                      )}
-
-                      <TextInput
-                        style={styles.codeInput}
-                        value={verificationCode}
-                        onChangeText={setVerificationCode}
-                        placeholder="Enter 6-digit code"
-                        keyboardType="number-pad"
-                        maxLength={6}
-                        autoFocus
-                        textAlign="center"
-                      />
-
-                      <TouchableOpacity
-                        style={[styles.button, isLoading && styles.buttonDisabled]}
-                        onPress={handleVerifyCode}
-                        disabled={isLoading || !verificationCode.trim()}
-                      >
-                        {isLoading ? (
-                          <ActivityIndicator size="small" color="#fff" />
-                        ) : (
-                          <Text style={styles.buttonText}>Verify Code</Text>
-                        )}
-                      </TouchableOpacity>
-
-                      <TouchableOpacity
-                        style={styles.resendButton}
-                        onPress={handleResendCode}
-                        disabled={isLoading}
-                      >
-                        <Text style={styles.resendButtonText}>
-                          Didn't receive the code? Resend
-                        </Text>
-                      </TouchableOpacity>
-                    </>
-                  )}
-                </View>
-              </SafeAreaView>
-            </View>
-          </TouchableWithoutFeedback>
-        </View>
-      </TouchableWithoutFeedback>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContent: {
-    backgroundColor: '#fff',
-    borderRadius: 16,
-    width: '90%',
-    maxWidth: 400,
-    maxHeight: '80%',
-  },
-  container: {
-    padding: 24,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 24,
-  },
-  closeButton: {
-    padding: 8,
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#000',
-  },
-  placeholder: {
-    width: 40,
-  },
-  content: {
-    alignItems: 'center',
-  },
-  iconContainer: {
-    marginBottom: 16,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 24,
-  },
-  emailContainer: {
-    backgroundColor: '#f5f5f5',
-    padding: 16,
-    borderRadius: 8,
-    marginBottom: 24,
-    width: '100%',
-  },
-  emailLabel: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 4,
-  },
-  emailText: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#000',
-  },
-  testingNote: {
-    fontSize: 14,
-    color: '#FF9800',
-    textAlign: 'center',
-    marginBottom: 16,
-    backgroundColor: '#FFF3E0',
-    padding: 8,
-    borderRadius: 4,
-  },
-  codeInput: {
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 8,
-    padding: 16,
-    fontSize: 18,
-    fontWeight: '600',
-    letterSpacing: 4,
-    marginBottom: 24,
-    width: '100%',
-  },
-  button: {
-    backgroundColor: '#4CAF50',
-    paddingVertical: 16,
-    paddingHorizontal: 32,
-    borderRadius: 8,
-    width: '100%',
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  buttonDisabled: {
-    opacity: 0.5,
-  },
-  buttonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  resendButton: {
-    paddingVertical: 8,
-  },
-  resendButtonText: {
-    color: '#4CAF50',
-    fontSize: 14,
-    textDecorationLine: 'underline',
-  },
-});