@onairos/react-native 3.0.51 → 3.0.53

package/src/components/UniversalOnboarding.tsx

@@ -16,6 +16,7 @@ import {
   Switch,
   Linking,
   Alert,
+  TextInput,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { PlatformList } from './PlatformList';
@@ -25,12 +26,23 @@ import { OAuthWebView } from './onboarding/OAuthWebView';
 import { useConnections } from '../hooks/useConnections';
 import { COLORS, DEEP_LINK_CONFIG } from '../constants';
 import { initiateOAuth, initiateNativeAuth, hasNativeSDK, isOAuthCallback, testApiConnectivity, handleOAuthCallbackUrl, refreshYouTubeTokens, requestEmailVerification, verifyEmailCode, checkEmailVerificationStatus, disconnectPlatform } from '../services/platformAuthService';
+import { EmailVerificationModal } from './EmailVerificationModal';
 import type { UniversalOnboardingProps, ConnectionStatus } from '../types';
-import {
-  init as opacityInit,
-  OpacityEnvironment,
-  get as opacityGet,
-} from '@opacity-labs/react-native-opacity';
+
+// Optional Opacity SDK imports with error handling
+let opacityInit: any = null;
+let OpacityEnvironment: any = null;
+let opacityGet: any = null;
+
+try {
+  const opacitySDK = require('@opacity-labs/react-native-opacity');
+  opacityInit = opacitySDK.init;
+  OpacityEnvironment = opacitySDK.OpacityEnvironment;
+  opacityGet = opacitySDK.get;
+} catch (error) {
+  console.warn('Opacity SDK not available:', error);
+  // Opacity SDK will be disabled if not available
+}
 
 const { height, width } = Dimensions.get('window');
 
@@ -49,7 +61,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   auto = false,
   partner,
 }) => {
-  const [step, setStep] = useState<'connect' | 'pin' | 'training' | 'oauth' | 'success'>('connect');
+  const [step, setStep] = useState<'email' | 'connect' | 'pin' | 'training' | 'oauth' | 'success'>('email');
   const [connections, setConnections] = useState<ConnectionStatus>({});
   const [pin, setPin] = useState<string>('');
   const [selectedTier, setSelectedTier] = useState<'Small' | 'Medium' | 'Large'>('Medium');
@@ -64,6 +76,8 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const [username, setUsername] = useState<string>('Avatar');
   const [isConnectingPlatform, setIsConnectingPlatform] = useState<boolean>(false);
   const [showLoginWebView, setShowLoginWebView] = useState<boolean>(false);
+  const [email, setEmail] = useState<string>('');
+  const [showEmailVerification, setShowEmailVerification] = useState<boolean>(false);
   
   // Add refs for cleanup
   const successTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -74,7 +88,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     { id: 'youtube', name: 'YouTube', icon: require('../assets/images/youtube.png') },
     { id: 'reddit', name: 'Reddit', icon: require('../assets/images/reddit.png') },
     { id: 'pinterest', name: 'Pinterest', icon: require('../assets/images/pinterest.png') },
-    { id: 'email', name: 'Email', icon: require('../assets/images/email.png') },
+    { id: 'email', name: 'Gmail', icon: require('../assets/images/email.png') },
   ];
 
   const {
@@ -223,8 +237,25 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         
         console.log('✅ API connectivity confirmed');
         
-        // Instagram: Use Opacity SDK exclusively
+        // Instagram: Use Opacity SDK exclusively (if available)
         if (platformId === 'instagram') {
+          // Check if Opacity SDK is available
+          if (!opacityInit || !OpacityEnvironment || !opacityGet) {
+            console.warn('⚠️ Opacity SDK not available, falling back to OAuth for Instagram');
+            // Fall back to OAuth flow for Instagram
+            const oauthUrl = await initiateOAuth(platformId, username, AppName);
+            
+            if (oauthUrl) {
+              console.log(`✅ Received OAuth URL for ${platformId}:`, oauthUrl);
+              setCurrentPlatform(platformId);
+              setOauthUrl(oauthUrl);
+              setStep('oauth');
+            } else {
+              throw new Error(`Failed to get authorization URL for ${platformId}. Please try again.`);
+            }
+            return;
+          }
+          
           console.log('🔌 Initializing Opacity SDK for Instagram...');
           
           // Initialize Opacity SDK with your API key
@@ -275,39 +306,39 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
           }
         } else {
           // For all other platforms (non-Instagram), check if they have native SDK
-          if (hasNativeSDK(platformId)) {
-            console.log(`📱 Using native SDK for ${platformId}`);
-            // Use native SDK for authentication
+        if (hasNativeSDK(platformId)) {
+          console.log(`📱 Using native SDK for ${platformId}`);
+          // Use native SDK for authentication
             const success = await initiateNativeAuth(platformId, username);
-            if (success) {
-              console.log(`✅ Native authentication successful for ${platformId}`);
-              // Update platform toggle state
-              setPlatformToggles(prev => ({
-                ...prev,
-                [platformId]: true
-              }));
-              
-              // Update connections state
-              setConnections(prev => ({
-                ...prev,
-                [platformId]: { userName: username, connected: true }
-              }));
+          if (success) {
+            console.log(`✅ Native authentication successful for ${platformId}`);
+            // Update platform toggle state
+            setPlatformToggles(prev => ({
+              ...prev,
+              [platformId]: true
+            }));
+            
+            // Update connections state
+            setConnections(prev => ({
+              ...prev,
+              [platformId]: { userName: username, connected: true }
+            }));
             } else {
               throw new Error(`Native authentication failed for ${platformId}`);
-            }
-          } else {
+          }
+        } else {
             // Use OAuth WebView flow
-            console.log(`🌐 Initiating OAuth flow for ${platformId}`);
+          console.log(`🌐 Initiating OAuth flow for ${platformId}`);
             
-            const oauthUrl = await initiateOAuth(platformId, username, AppName);
+          const oauthUrl = await initiateOAuth(platformId, username, AppName);
             
-            if (oauthUrl) {
-              console.log(`✅ Received OAuth URL for ${platformId}:`, oauthUrl);
-              setCurrentPlatform(platformId);
-              setOauthUrl(oauthUrl);
-              setStep('oauth');
-            } else {
-              console.error(`❌ No OAuth URL returned for ${platformId}`);
+          if (oauthUrl) {
+            console.log(`✅ Received OAuth URL for ${platformId}:`, oauthUrl);
+            setCurrentPlatform(platformId);
+            setOauthUrl(oauthUrl);
+            setStep('oauth');
+          } else {
+            console.error(`❌ No OAuth URL returned for ${platformId}`);
               throw new Error(`Failed to get authorization URL for ${platformId}. Please try again.`);
             }
           }
@@ -419,11 +450,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     setStep('connect');
   }, [currentPlatform, username]);
 
-  // Function to handle "Already have an account" button
-  const handleAlreadyHaveAccount = useCallback(() => {
-    console.log('Already have an account clicked - opening Onairos login WebView');
-    setShowLoginWebView(true);
-  }, []);
+
 
   // Function to check for existing account (spoofed for now)
   const checkExistingAccount = useCallback(async () => {
@@ -433,24 +460,50 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     return false;
   }, []);
 
-  // Function to handle login WebView completion
-  const handleLoginWebViewComplete = useCallback((result?: any) => {
-    console.log('Login WebView completed with result:', result);
-    setShowLoginWebView(false);
+  // Function to handle email submission
+  const handleEmailSubmit = useCallback(() => {
+    if (!email.trim()) {
+      Alert.alert('Error', 'Please enter your email address');
+      return;
+    }
     
-    // If login was successful (detected existing cookies/session)
-    if (result === 'onairos_login_success') {
-      console.log('Existing Onairos account detected, skipping onboarding');
-      // Skip the entire onboarding flow and call onComplete directly
+    // Basic email validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email.trim())) {
+      Alert.alert('Error', 'Please enter a valid email address');
+      return;
+    }
+    
+    console.log('📧 Email submitted:', email.trim());
+    setShowEmailVerification(true);
+  }, [email]);
+
+  // Function to handle email verification completion
+  const handleEmailVerificationComplete = useCallback((verifiedEmail: string, isExistingUser: boolean) => {
+    console.log('✅ Email verification completed:', { verifiedEmail, isExistingUser });
+    setShowEmailVerification(false);
+    
+    if (isExistingUser) {
+      console.log('Existing user detected, skipping onboarding');
       onComplete('https://api2.onairos.uk', 'existing-session-token', {
         existingAccount: true,
-        username: 'existing_user',
+        email: verifiedEmail,
         skipOnboarding: true,
       });
+    } else {
+      console.log('New user, proceeding to platform connection');
+      setUsername(verifiedEmail.split('@')[0]); // Use email prefix as username
+      setStep('connect');
     }
-    // If no existing account found, continue with normal onboarding
   }, [onComplete]);
 
+  // Function to handle email verification failure
+  const handleEmailVerificationFailed = useCallback((error: string) => {
+    console.error('❌ Email verification failed:', error);
+    setShowEmailVerification(false);
+    Alert.alert('Verification Failed', error);
+  }, []);
+
   const handlePinSubmit = useCallback(async (userPin: string) => {
     setPin(userPin);
     setStep('training');
@@ -575,6 +628,43 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                   <View style={styles.handle} />
                 </View>
                 
+                {step === 'email' && (
+                  <View style={styles.emailInputContainer}>
+                    <View style={styles.emailHeader}>
+                      <View style={styles.onairosIcon}>
+                        <Image 
+                          source={require('../assets/images/onairos_logo.png')} 
+                          style={styles.onairosLogo} 
+                          resizeMode="contain"
+                        />
+                      </View>
+                      <Text style={styles.emailTitle}>Welcome to Onairos</Text>
+                      <Text style={styles.emailSubtitle}>Enter your email to get started</Text>
+                    </View>
+                    
+                    <View style={styles.emailInputSection}>
+                      <TextInput
+                        style={styles.emailInput}
+                        value={email}
+                        onChangeText={setEmail}
+                        placeholder="Enter your email address"
+                        keyboardType="email-address"
+                        autoCapitalize="none"
+                        autoCorrect={false}
+                        autoFocus
+                      />
+                      
+                      <TouchableOpacity
+                        style={[styles.emailSubmitButton, !email.trim() && styles.emailSubmitButtonDisabled]}
+                        onPress={handleEmailSubmit}
+                        disabled={!email.trim()}
+                      >
+                        <Text style={styles.emailSubmitButtonText}>Continue</Text>
+                      </TouchableOpacity>
+                    </View>
+                  </View>
+                )}
+
                 {step === 'connect' && (
                   <>
                     {/* Header with app icon and arrow to Onairos icon */}
@@ -587,17 +677,15 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                         </View>
                         <Icon name="arrow-forward" size={24} color="#666" style={styles.arrow} />
                         <View style={styles.onairosIcon}>
-                          <Text style={styles.onairosIconText}>O</Text>
+                          <Image 
+                            source={require('../assets/images/onairos_logo.png')} 
+                            style={styles.onairosLogo} 
+                            resizeMode="contain"
+                          />
                         </View>
                       </View>
                       
-                      {/* Already have an account button */}
-                      <TouchableOpacity 
-                        style={styles.alreadyHaveAccountButton}
-                        onPress={handleAlreadyHaveAccount}
-                      >
-                        <Text style={styles.alreadyHaveAccountText}>Already have an account?</Text>
-                      </TouchableOpacity>
+
                     </View>
 
                     <ScrollView 
@@ -751,16 +839,17 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                   />
                 )}
                 
-                {/* Login WebView for existing account check */}
-                {showLoginWebView && (
-                  <OAuthWebView
-                    url="https://onairos.uk/signin" 
-                    platform="onairos"
-                    onClose={() => setShowLoginWebView(false)}
-                    onSuccess={handleLoginWebViewComplete}
-                    onComplete={handleLoginWebViewComplete}
+                {/* Email Verification Modal */}
+                {showEmailVerification && (
+                  <EmailVerificationModal
+                    visible={showEmailVerification}
+                    email={email.trim()}
+                    onClose={() => setShowEmailVerification(false)}
+                    onVerificationComplete={handleEmailVerificationComplete}
+                    onVerificationFailed={handleEmailVerificationFailed}
                   />
                 )}
+
               </SafeAreaView>
             </Animated.View>
           </TouchableWithoutFeedback>
@@ -838,6 +927,10 @@ const styles = StyleSheet.create({
     fontSize: 24,
     color: '#000',
   },
+  onairosLogo: {
+    width: 32,
+    height: 32,
+  },
   titleContainer: {
     marginBottom: 20,
   },
@@ -924,14 +1017,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '600',
   },
-  alreadyHaveAccountButton: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-  alreadyHaveAccountText: {
-    color: '#666',
-    fontSize: 16,
-  },
+
   successContainer: {
     flex: 1,
     justifyContent: 'center',
@@ -1008,4 +1094,56 @@ const styles = StyleSheet.create({
     color: '#000',
     marginLeft: 8,
   },
+  // Email input styles
+  emailInputContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  emailHeader: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  emailTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#000',
+    textAlign: 'center',
+    marginTop: 16,
+    marginBottom: 8,
+  },
+  emailSubtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+  emailInputSection: {
+    width: '100%',
+    maxWidth: 320,
+  },
+  emailInput: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 12,
+    padding: 16,
+    fontSize: 16,
+    marginBottom: 16,
+    backgroundColor: '#fff',
+  },
+  emailSubmitButton: {
+    backgroundColor: '#4CAF50',
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 12,
+    alignItems: 'center',
+  },
+  emailSubmitButtonDisabled: {
+    opacity: 0.5,
+  },
+  emailSubmitButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });

package/src/services/platformAuthService.ts

@@ -42,7 +42,7 @@ let PLATFORM_AUTH_CONFIG: Record<string, PlatformAuthConfig> = {
   },
   email: {
     hasNativeSDK: false,
-    authEndpoint: 'https://api2.onairos.uk/email/authorize',
+    authEndpoint: 'https://api2.onairos.uk/gmail/authorize',
     color: '#4285F4',
   },
 };
@@ -206,32 +206,40 @@ export const initiateOAuth = async (platform: string, username: string, appName?
  * @returns A Promise that resolves to the authentication result
  */
 export const initiateNativeAuth = async (platform: string, username?: string): Promise<boolean> => {
-  if (platform === 'youtube') {
+    if (platform === 'youtube') {
     console.log('🔗 Initiating native Google Sign-In for YouTube');
-    try {
-      // Import Google Sign-In dynamically to avoid errors if not installed
-      const { GoogleSignin, statusCodes } = require('@react-native-google-signin/google-signin');
-      
-      // Configure Google Sign-In
-      await GoogleSignin.configure({
+      try {
+        // Check if Google Sign-In package is available
+        let GoogleSignin, statusCodes;
+        try {
+          const googleSignInModule = require('@react-native-google-signin/google-signin');
+          GoogleSignin = googleSignInModule.GoogleSignin;
+          statusCodes = googleSignInModule.statusCodes;
+        } catch (importError) {
+          console.error('❌ Google Sign-In package not available:', importError);
+          throw new Error('Google Sign-In SDK not installed. Please install @react-native-google-signin/google-signin');
+        }
+        
+        // Configure Google Sign-In
+        await GoogleSignin.configure({
         webClientId: '1030678346906-lovkuds2ouqmoc8eu5qpo98spa6edv4o.apps.googleusercontent.com', // Replace with your web client ID
         iosClientId: '1030678346906-lovkuds2ouqmoc8eu5qpo98spa6edv4o.apps.googleusercontent.com', // Replace with your iOS client ID
-        scopes: ['https://www.googleapis.com/auth/youtube.readonly'],
+          scopes: ['https://www.googleapis.com/auth/youtube.readonly'],
         offlineAccess: true, // CRITICAL: This ensures we get refresh tokens
-        hostedDomain: '',
+          hostedDomain: '',
         forceCodeForRefreshToken: true, // CRITICAL: Force refresh token on first sign-in
         accountName: '', // Clear to avoid conflicts
-      });
-      
+        });
+        
       // Check if Google Play Services are available
-      await GoogleSignin.hasPlayServices();
-      
+        await GoogleSignin.hasPlayServices();
+        
       // Sign in with Google
-      const userInfo = await GoogleSignin.signIn();
+        const userInfo = await GoogleSignin.signIn();
       console.log('✅ Google Sign-In successful:', userInfo.user?.email);
-      
+        
       // Get access token for API calls
-      const tokens = await GoogleSignin.getTokens();
+        const tokens = await GoogleSignin.getTokens();
       console.log('🔑 Got Google tokens');
       
       // Get current user info with refresh token
@@ -371,23 +379,23 @@ export const initiateNativeAuth = async (platform: string, username?: string): P
         return false;
       }
       
-    } catch (error: any) {
+      } catch (error: any) {
       console.error('❌ Google Sign-In error:', error);
-      
-      const { statusCodes: StatusCodes } = require('@react-native-google-signin/google-signin');
-      
-      if (error.code === StatusCodes.SIGN_IN_CANCELLED) {
+        
+        const { statusCodes: StatusCodes } = require('@react-native-google-signin/google-signin');
+        
+        if (error.code === StatusCodes.SIGN_IN_CANCELLED) {
         console.log('User cancelled Google Sign-In');
-      } else if (error.code === StatusCodes.IN_PROGRESS) {
+        } else if (error.code === StatusCodes.IN_PROGRESS) {
         console.log('Google Sign-In already in progress');
-      } else if (error.code === StatusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
+        } else if (error.code === StatusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
         console.log('Google Play Services not available');
+        }
+        
+        return false;
       }
-      
-      return false;
     }
-  }
-
+    
   return false;
 };
 
@@ -626,7 +634,7 @@ export const requestEmailVerification = async (email: string): Promise<{
   try {
     console.log('📧 Requesting email verification for:', email);
     
-    const response = await fetch('https://api2.onairos.uk/email/verify', {
+    const response = await fetch('https://api2.onairos.uk/email/verification', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -666,36 +674,37 @@ export const verifyEmailCode = async (email: string, code: string): Promise<{
 }> => {
   try {
     console.log('🔍 Verifying email code for:', email);
+    console.log('🔍 Development mode: All codes will pass through for now');
     
-    const response = await fetch('https://api2.onairos.uk/email/verify/confirm', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ email, code }),
-    });
-    
-    const result = await response.json();
-    
-    if (response.ok && result.success) {
-      console.log('✅ Email verification successful');
-      console.log('🔍 Testing mode: Any code accepted for verification');
-      return {
-        success: true,
-        message: result.message || 'Email verified successfully',
-      };
-    } else {
-      console.error('❌ Email verification failed:', result.error);
-      return {
-        success: false,
-        error: result.error || 'Invalid verification code',
-      };
+    // For now, allow all codes to pass through
+    // Still make the API call to set up the routing, but don't rely on response
+    try {
+      const response = await fetch('https://api2.onairos.uk/email/verification', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email, code, action: 'verify' }),
+      });
+      
+      const result = await response.json();
+      console.log('📡 Email verification API response:', result);
+    } catch (apiError) {
+      console.warn('⚠️ Email verification API call failed, but continuing with bypass:', apiError);
     }
+    
+    // Always return success for now
+    console.log('✅ Email verification successful (bypass mode)');
+    return {
+      success: true,
+      message: 'Email verified successfully (development mode: all codes accepted)',
+    };
   } catch (error) {
     console.error('❌ Email verification error:', error);
+    // Even on error, return success for now
     return {
-      success: false,
-      error: error instanceof Error ? error.message : 'Network error',
+      success: true,
+      message: 'Email verified successfully (development mode: all codes accepted)',
     };
   }
 };
@@ -708,35 +717,37 @@ export const checkEmailVerificationStatus = async (email: string): Promise<{
 }> => {
   try {
     console.log('🔍 Checking email verification status for:', email);
+    console.log('🔍 Development mode: Always returning no pending verification');
     
-    const response = await fetch(`https://api2.onairos.uk/email/verify/status/${encodeURIComponent(email)}`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    
-    const result = await response.json();
-    
-    if (response.ok) {
-      console.log('✅ Email verification status retrieved');
-      return {
-        success: true,
-        isPending: result.isPending || false,
-        message: result.message || 'Status retrieved successfully',
-      };
-    } else {
-      console.error('❌ Email verification status check failed:', result.error);
-      return {
-        success: false,
-        error: result.error || 'Failed to check verification status',
-      };
+    // Make API call to set up routing, but don't rely on response for now
+    try {
+      const response = await fetch(`https://api2.onairos.uk/email/verification/status/${encodeURIComponent(email)}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      
+      const result = await response.json();
+      console.log('📡 Email verification status API response:', result);
+    } catch (apiError) {
+      console.warn('⚠️ Email verification status API call failed, but continuing with bypass:', apiError);
     }
+    
+    // For development, always return no pending verification
+    console.log('✅ Email verification status retrieved (bypass mode)');
+    return {
+      success: true,
+      isPending: false, // Always false so verification flow starts fresh
+      message: 'Status retrieved successfully (development mode)',
+    };
   } catch (error) {
     console.error('❌ Email verification status error:', error);
+    // Even on error, return success for development
     return {
-      success: false,
-      error: error instanceof Error ? error.message : 'Network error',
+      success: true,
+      isPending: false,
+      message: 'Status retrieved successfully (development mode)',
     };
   }
 };