@onairos/react-native 3.0.25 → 3.0.27

package/src/components/UniversalOnboarding.tsx

@@ -52,9 +52,8 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const [platformToggles, setPlatformToggles] = useState<{[key: string]: boolean}>({});
   const [oauthUrl, setOauthUrl] = useState<string>('');
   const [currentPlatform, setCurrentPlatform] = useState<string>('');
-  const [userEmail, setUserEmail] = useState<string>('user@example.com'); // Use proper email instead of random username
+  const [username, setUsername] = useState<string>('Avatar');
   const [isConnectingPlatform, setIsConnectingPlatform] = useState<boolean>(false);
-  const [connectingPlatform, setConnectingPlatform] = useState<string | null>(null);
 
   const platforms = [
     { id: 'instagram', name: 'Instagram', icon: require('../assets/images/instagram.png') },
@@ -161,7 +160,6 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
       // Attempt to connect platform
       try {
         setIsConnectingPlatform(true);
-        setConnectingPlatform(platformId);
         console.log(`Initiating connection for ${platformId}`);
         
         // Check if platform has a native SDK
@@ -180,13 +178,13 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
             // Update connections state
             setConnections(prev => ({
               ...prev,
-              [platformId]: { userName: userEmail, connected: true }
+              [platformId]: { userName: username, connected: true }
             }));
           }
         } else {
           console.log(`Initiating OAuth flow for ${platformId}`);
           // Use OAuth flow through proxy server
-          const oauthUrl = await initiateOAuth(platformId, userEmail);
+          const oauthUrl = await initiateOAuth(platformId, username, AppName);
           if (oauthUrl) {
             console.log(`Received OAuth URL for ${platformId}: ${oauthUrl}`);
             setCurrentPlatform(platformId);
@@ -198,14 +196,8 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         }
       } catch (error) {
         console.error(`Error connecting ${platformId}:`, error);
-        // Reset toggle state on error
-        setPlatformToggles(prev => ({
-          ...prev,
-          [platformId]: false
-        }));
       } finally {
         setIsConnectingPlatform(false);
-        setConnectingPlatform(null);
       }
     } else {
       // Disconnect platform
@@ -222,7 +214,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         return newConnections;
       });
     }
-  }, [platformToggles, userEmail]);
+  }, [platformToggles, username]);
 
   /**
    * Handles OAuth callback URLs
@@ -238,7 +230,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         // Update connections state
         setConnections(prev => ({
           ...prev,
-          [platform]: { userName: userEmail, connected: true }
+          [platform]: { userName: username, connected: true }
         }));
         
         // Update platform toggles
@@ -253,7 +245,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     } catch (error) {
       console.error('Error handling OAuth callback:', error);
     }
-  }, [currentPlatform, userEmail]);
+  }, [currentPlatform, username]);
   
   /**
    * Handles completion of the OAuth flow
@@ -261,13 +253,13 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const handleOAuthSuccess = useCallback((code: string) => {
     console.log(`OAuth success for ${currentPlatform} with code: ${code}`);
     
-          // Update connections for the current platform
-      if (currentPlatform) {
-        // Update connections state
-        setConnections(prev => ({
-          ...prev,
-          [currentPlatform]: { userName: userEmail, connected: true }
-        }));
+    // Update connections for the current platform
+    if (currentPlatform) {
+      // Update connections state
+      setConnections(prev => ({
+        ...prev,
+        [currentPlatform]: { userName: username, connected: true }
+      }));
       
       // Update platform toggles
       setPlatformToggles(prev => ({
@@ -275,20 +267,14 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         [currentPlatform]: true
       }));
       
-      // In a real implementation, we would send the code to our server
-      // to exchange it for an access token and store it securely
-      console.log(`Simulating token exchange for ${currentPlatform}`);
-      
-      // For demo purposes, we'll just simulate a successful token exchange
-      if (debug || test) {
-        console.log('Debug mode: Simulating successful token exchange');
-      }
+      console.log(`Successfully connected ${currentPlatform} for user ${username}`);
     }
     
     // Close OAuth window and return to connect step
     setOauthUrl('');
+    setCurrentPlatform('');
     setStep('connect');
-  }, [currentPlatform, userEmail, debug, test]);
+  }, [currentPlatform, username]);
 
   const handlePinSubmit = useCallback(async (userPin: string) => {
     setPin(userPin);
@@ -296,16 +282,23 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     // Simulate training progress over 10 seconds
     let progress = 0;
     const interval = setInterval(() => {
-      progress += 1; // 10% progress every second for 1 seconds total
+      progress += 0.1; // 10% every second for 10 seconds total
       setTraining({
         progress,
         eta: `${Math.round((1 - progress) * 10)} seconds remaining`,
       });
       if (progress >= 1) {
         clearInterval(interval);
-        // Training complete - TrainingModal will handle email input and final completion
+        // Close overlay and call the original onResolved callback
+        onComplete('https://api2.onairos.uk', 'dummy-token', {
+          pin: userPin,
+          connections,
+          platformToggles,
+          selectedTier,
+          tierData: requestData?.[selectedTier],
+        });
       }
-    }, 1000); // 1 second intervals for 10 total seconds
+    }, 1000); // Update every 1 second
   }, [connections, onComplete, selectedTier, requestData, platformToggles]);
 
   const canProceedToPin = useCallback(() => {
@@ -373,41 +366,26 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
 
                       {/* Platform connection options */}
                       <View style={styles.platformsContainer}>
-                                              {platforms.map((platform) => (
-                        <View key={platform.id} style={[
-                          styles.platformItem,
-                          connections[platform.id]?.connected && styles.platformItemConnected
-                        ]}>
-                          <View style={styles.platformInfo}>
-                            <Image 
-                              source={platform.icon} 
-                              style={styles.platformIcon} 
-                              resizeMode="contain"
-                            />
-                            <View style={styles.platformTextContainer}>
+                        {platforms.map((platform) => (
+                          <View key={platform.id} style={styles.platformItem}>
+                            <View style={styles.platformInfo}>
+                              <Image 
+                                source={platform.icon} 
+                                style={styles.platformIcon} 
+                                resizeMode="contain"
+                              />
                               <Text style={styles.platformName}>
                                 {platform.name}
                               </Text>
-                              {connections[platform.id]?.connected && (
-                                <Text style={styles.connectedText}>Connected</Text>
-                              )}
                             </View>
+                            <Switch
+                              value={platformToggles[platform.id]}
+                              onValueChange={() => togglePlatform(platform.id)}
+                              trackColor={{ false: '#767577', true: '#81b0ff' }}
+                              thumbColor={platformToggles[platform.id] ? '#2196F3' : '#f4f3f4'}
+                            />
                           </View>
-                          <View style={styles.platformActions}>
-                            {connectingPlatform === platform.id ? (
-                              <ActivityIndicator size="small" color={COLORS.primary} />
-                            ) : (
-                              <Switch
-                                value={platformToggles[platform.id] || connections[platform.id]?.connected || false}
-                                onValueChange={() => togglePlatform(platform.id)}
-                                trackColor={{ false: '#767577', true: '#81b0ff' }}
-                                thumbColor={platformToggles[platform.id] || connections[platform.id]?.connected ? '#2196F3' : '#f4f3f4'}
-                                disabled={connectingPlatform !== null}
-                              />
-                            )}
-                          </View>
-                        </View>
-                      ))}
+                        ))}
                       </View>
                     </ScrollView>
 
@@ -456,11 +434,10 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                         platformToggles,
                         selectedTier,
                         tierData: requestData?.[selectedTier],
-                        userEmail,
                       });
                     }}
                     modelKey="onairosTrainingModel"
-                    username={userEmail}
+                    username={username}
                   />
                 )}
                 
@@ -601,24 +578,6 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: '#000',
   },
-  platformTextContainer: {
-    flex: 1,
-  },
-  connectedText: {
-    fontSize: 12,
-    color: '#4CAF50',
-    fontWeight: '500',
-    marginTop: 2,
-  },
-  platformActions: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  platformItemConnected: {
-    backgroundColor: '#F8F9FA',
-    borderColor: '#4CAF50',
-    borderWidth: 1,
-  },
   footer: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/onboarding/OAuthWebView.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback, useState } from 'react';
-import { View, StyleSheet, ActivityIndicator, SafeAreaView, TouchableOpacity, Text } from 'react-native';
+import { View, StyleSheet, ActivityIndicator, SafeAreaView, TouchableOpacity } from 'react-native';
 import { WebView, WebViewNavigation } from 'react-native-webview';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { COLORS } from '../../constants';
-import { isOAuthSuccess, handleOAuthCallback } from '../../services/platformAuthService';
 import type { OAuthWebViewProps } from '../../types';
 
 export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
@@ -14,56 +13,47 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
   onSuccess,
 }) => {
   const [loading, setLoading] = useState(true);
-  const [currentUrl, setCurrentUrl] = useState(url);
 
   const handleNavigationStateChange = useCallback(
     (navState: WebViewNavigation) => {
-      console.log(`[OAuthWebView] Navigation state changed for ${platform}:`, navState.url);
-      setCurrentUrl(navState.url);
+      console.log('Navigation state changed:', navState.url);
       
-      // Check for final redirect to onairos.uk/Home (indicates proxy has processed the callback)
-      if (navState.url.includes('onairos.uk/Home')) {
-        console.log(`[OAuthWebView] Detected final redirect to onairos.uk/Home for ${platform}`);
-        
-        // Add a small delay to ensure the redirect is fully processed
-        setTimeout(() => {
-          onSuccess('success');
-          if (onComplete) {
-            onComplete();
-          }
-        }, 500);
-        return;
-      }
+      // Check for the final redirect to onairos.uk/Home
+      const isFinalRedirect = navState.url.includes('onairos.uk/Home');
       
-      // Check for platform-specific success patterns using the service
-      if (platform && isOAuthSuccess(navState.url, platform)) {
-        console.log(`[OAuthWebView] Detected platform-specific success pattern for ${platform}`);
-        
-        // For YouTube/Google, wait for the final redirect
-        if (platform === 'youtube') {
-          console.log(`[OAuthWebView] YouTube success detected, waiting for final redirect...`);
-          // Don't close immediately for YouTube, wait for the onairos.uk/Home redirect
-          return;
-        }
-        
-        // For other platforms, close immediately
-        setTimeout(() => {
-          onSuccess('success');
-          if (onComplete) {
-            onComplete();
-          }
-        }, 300);
-        return;
-      }
+      // Check for Instagram-specific success patterns
+      const isInstagramSuccess = (
+        platform === 'instagram' && 
+        (navState.url.includes('instagram.com/oauth/authorize') || 
+         navState.url.includes('instagram.com/accounts/login') ||
+         navState.url.includes('code='))
+      );
+      
+      // Check for platform-specific success patterns
+      const isYouTubeSuccess = (
+        platform === 'youtube' && 
+        navState.url.includes('accounts.google.com/o/oauth2/approval')
+      );
+      
+      const isLinkedInSuccess = (
+        platform === 'linkedin' && 
+        navState.url.includes('linkedin.com/oauth/v2/authorization/success')
+      );
       
       // Check for callback URLs with authorization codes
-      if (navState.url.includes('/callback') || navState.url.includes('code=')) {
-        console.log(`[OAuthWebView] Detected callback URL for ${platform}:`, navState.url);
-        
+      const isCallbackUrl = navState.url.includes('/callback') || navState.url.includes('code=');
+      
+      // If we detect success, close the window and update connection status
+      if (isFinalRedirect || isInstagramSuccess || isYouTubeSuccess || isLinkedInSuccess) {
+        onSuccess('success');
+        if (onComplete) {
+          onComplete();
+        }
+        return;
+      } else if (isCallbackUrl) {
         // Extract the authorization code
-        const authCode = handleOAuthCallback(navState.url);
+        const authCode = extractAuthCode(navState.url);
         if (authCode) {
-          console.log(`[OAuthWebView] Extracted auth code for ${platform}:`, authCode);
           onSuccess(authCode);
           if (onComplete) {
             onComplete();
@@ -75,22 +65,27 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
     [platform, onComplete, onSuccess]
   );
 
-  const handleLoadStart = useCallback(() => {
-    setLoading(true);
-  }, []);
-
   const handleLoadEnd = useCallback(() => {
     setLoading(false);
   }, []);
 
-  const handleError = useCallback((syntheticEvent: any) => {
-    const { nativeEvent } = syntheticEvent;
-    console.error(`[OAuthWebView] WebView error for ${platform}:`, nativeEvent);
-    setLoading(false);
-  }, [platform]);
-
-  // Get iOS Safari user agent for better compatibility
-  const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1';
+  // Extract auth code from redirect URL
+  const extractAuthCode = (redirectUrl: string): string => {
+    try {
+      // First try to extract code from URL parameters
+      const codeMatch = redirectUrl.match(/code=([^&]+)/);
+      if (codeMatch && codeMatch[1]) {
+        return codeMatch[1];
+      }
+      
+      // If that fails, try parsing as URL
+      const url = new URL(redirectUrl);
+      return url.searchParams.get('code') || '';
+    } catch (error) {
+      console.error('Error extracting auth code:', error);
+      return '';
+    }
+  };
 
   return (
     <SafeAreaView style={styles.container}>
@@ -104,56 +99,31 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
             size={20} 
             color={getPlatformColor(platform || 'default')} 
           />
-          <Text style={styles.platformTitle}>
-            Connect {platform ? platform.charAt(0).toUpperCase() + platform.slice(1) : 'Account'}
-          </Text>
         </View>
-        <View style={styles.placeholder} />
       </View>
 
       <WebView
         source={{ uri: url }}
         onNavigationStateChange={handleNavigationStateChange}
-        onLoadStart={handleLoadStart}
         onLoadEnd={handleLoadEnd}
-        onError={handleError}
         startInLoadingState={true}
         renderLoading={() => <View />}
         style={styles.webView}
-        // Essential WebView configuration for OAuth
         javaScriptEnabled={true}
         domStorageEnabled={true}
-        cacheEnabled={true}
-        incognito={false} // Allow session persistence
-        sharedCookiesEnabled={true} // Critical for Google/YouTube OAuth
-        thirdPartyCookiesEnabled={true} // Required for OAuth flows
-        userAgent={userAgent} // iOS Safari for better compatibility
-        // Additional settings for better OAuth support
+        cacheEnabled={false}
+        incognito={false}
+        sharedCookiesEnabled={true}
+        thirdPartyCookiesEnabled={true}
         allowsInlineMediaPlayback={true}
         mediaPlaybackRequiresUserAction={false}
         allowsBackForwardNavigationGestures={true}
-        // Security settings
-        allowsLinkPreview={false}
-        allowFileAccess={false}
-        allowUniversalAccessFromFileURLs={false}
-        mixedContentMode="compatibility"
+        userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1"
       />
 
       {loading && (
         <View style={styles.loadingContainer}>
           <ActivityIndicator size="large" color={COLORS.primary} />
-          <Text style={styles.loadingText}>
-            Connecting to {platform ? platform.charAt(0).toUpperCase() + platform.slice(1) : 'platform'}...
-          </Text>
-        </View>
-      )}
-      
-      {/* Debug info in development */}
-      {__DEV__ && (
-        <View style={styles.debugContainer}>
-          <Text style={styles.debugText} numberOfLines={1}>
-            {currentUrl}
-          </Text>
         </View>
       )}
     </SafeAreaView>
@@ -173,8 +143,6 @@ const getPlatformIcon = (platform: string): string => {
       return 'push-pin';
     case 'reddit':
       return 'forum';
-    case 'email':
-      return 'email';
     default:
       return 'link';
   }
@@ -193,8 +161,6 @@ const getPlatformColor = (platform: string): string => {
       return '#E60023';
     case 'reddit':
       return '#FF4500';
-    case 'email':
-      return '#4285F4';
     default:
       return COLORS.primary;
   }
@@ -216,49 +182,21 @@ const styles = StyleSheet.create({
   },
   titleContainer: {
     flex: 1,
-    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
-  },
-  platformTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#000',
-    marginLeft: 8,
   },
   closeButton: {
     padding: 8,
-    width: 40,
-  },
-  placeholder: {
-    width: 40,
+    position: 'absolute',
+    left: 16,
+    zIndex: 10,
   },
   webView: {
     flex: 1,
   },
   loadingContainer: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  loadingText: {
-    fontSize: 16,
-    color: '#666',
-    marginTop: 16,
-    textAlign: 'center',
-  },
-  debugContainer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
-    padding: 8,
-  },
-  debugText: {
-    color: '#fff',
-    fontSize: 12,
-    fontFamily: 'monospace',
-  },
 });

package/src/constants/index.ts

@@ -77,7 +77,7 @@ export const PIN_REQUIREMENTS = {
 };
 
 export const DEEP_LINK_CONFIG = {
-  scheme: 'onairosevents',
-  host: 'auth',
-  redirectUri: 'onairosevents://auth/callback',
+  scheme: 'onairosanime',
+  host: 'authenticate',
+  redirectUri: 'onairosanime://auth/',
 };