@onairos/react-native 3.0.71 → 3.0.72

package/src/components/Onairos.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle, useState, useCallback } from 'react';
+import React, { forwardRef, useImperativeHandle, useState, useCallback, useEffect } from 'react';
 import {
   StyleSheet,
   View,
@@ -8,6 +8,7 @@ import {
   TextStyle,
   Platform,
   Image,
+  Alert,
 } from 'react-native';
 import { UniversalOnboarding } from './UniversalOnboarding';
 import { Overlay } from './Overlay';
@@ -15,7 +16,8 @@ import { COLORS } from '../constants';
 import { hasCredentials, getCredentials, deleteCredentials } from '../utils/secureStorage';
 import { onairosApi } from '../api';
 import { Portal } from '../utils/Portal';
-import { DataTier } from '../types';
+import { DataTier, OnairosConfig } from '../types';
+import { initializeApiKey, isApiKeyInitialized, getApiConfig } from '../services/apiKeyService';
 
 interface OnairosProps {
   returnLink?: string;
@@ -38,232 +40,354 @@ interface OnairosProps {
   darkMode?: boolean;
   preferredPlatform?: string;
   testMode?: boolean;
+  // API Key Configuration (REQUIRED)
+  apiKey: string;
+  environment?: 'production' | 'staging' | 'development';
+  enableLogging?: boolean;
+  timeout?: number;
+  retryAttempts?: number;
 }
 
-export interface OnairosRef {
-  trigger: () => Promise<void>;
-  reset: () => Promise<void>;
-}
+export const Onairos = forwardRef<any, OnairosProps>((props, ref) => {
+  const {
+    returnLink,
+    prefillUrl,
+    AppName,
+    buttonType = 'normal',
+    requestData,
+    buttonWidth = 200,
+    buttonHeight = 48,
+    hasStroke = false,
+    enabled = true,
+    buttonForm = 'default',
+    onRejection,
+    onResolved,
+    preCheck,
+    color = COLORS.primary,
+    debug = false,
+    darkMode = false,
+    preferredPlatform,
+    testMode = false,
+    // API Key props
+    apiKey,
+    environment = 'production',
+    enableLogging = true,
+    timeout = 30000,
+    retryAttempts = 3,
+  } = props;
 
-export const Onairos = forwardRef<OnairosRef, OnairosProps>(({
-  returnLink,
-  prefillUrl,
-  AppName,
-  buttonType = 'normal',
-  requestData,
-  buttonWidth = 180,
-  buttonHeight,
-  hasStroke = false,
-  enabled = true,
-  buttonForm = 'default',
-  onRejection,
-  onResolved,
-  preCheck,
-  color,
-  debug = false,
-  darkMode = false,
-  preferredPlatform,
-  testMode = false,
-}, ref) => {
-  const [showOnboarding, setShowOnboarding] = useState(false);
   const [showOverlay, setShowOverlay] = useState(false);
-  const [storedCredentials, setStoredCredentials] = useState<any>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isPressed, setIsPressed] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [initializationError, setInitializationError] = useState<string | null>(null);
+  const [isInitializing, setIsInitializing] = useState(false);
 
-  // Expose methods for external control
-  useImperativeHandle(ref, () => ({
-    trigger: async () => {
-      await handlePress();
-    },
-    reset: async () => {
-      await deleteCredentials();
-    }
-  }));
+  // Initialize API key when component mounts or API key changes
+  useEffect(() => {
+    let isMounted = true;
 
-  // Compute button text based on buttonForm
-  const getButtonText = () => {
-    if (buttonForm === 'connect') {
-      return 'Connect with Onairos';
-    } else {
-      return 'Sign in with Onairos';
-    }
-  };
+    const initializeApi = async () => {
+      // Skip if already initializing
+      if (isInitializing) return;
+      
+      setIsInitializing(true);
+      setInitializationError(null);
 
-  // Calculate background color based on props and state
-  const getBackgroundColor = (): string => {
-    if (!enabled) {
-      return darkMode ? '#3A3A3A' : '#e0e0e0';
-    }
-    
-    if (isPressed) {
-      return color ? 
-        (typeof color === 'string' ? `${color}80` : color) : 
-        (darkMode ? '#32323280' : '#f5f5f580');
-    }
-    
-    return color || (darkMode ? '#2A2A2A' : '#ffffff');
-  };
+      try {
+        console.log('🚀 Onairos SDK: Starting API key initialization...');
+        
+        if (!apiKey) {
+          throw new Error('API key is required. Please provide a valid API key from your Onairos dashboard.');
+        }
 
-  // Calculate text color based on background luminance
-  const getTextColor = (): string => {
-    if (!enabled) {
-      return darkMode ? '#777777' : '#AAAAAA';
-    }
-    
-    if (darkMode) {
-      return '#FFFFFF';
+        const config: OnairosConfig = {
+          apiKey,
+          environment,
+          enableLogging,
+          timeout,
+          retryAttempts,
+        };
+
+        // Initialize the API key service
+        await initializeApiKey(config);
+
+        if (isMounted) {
+          setIsInitialized(true);
+          setInitializationError(null);
+          
+          if (enableLogging) {
+            console.log('✅ Onairos SDK: API key initialization completed successfully');
+            console.log('📊 Configuration:', {
+              environment,
+              enableLogging,
+              timeout,
+              retryAttempts,
+              apiKeyLength: apiKey.length,
+            });
+          }
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Unknown initialization error';
+        
+        console.error('❌ Onairos SDK: API key initialization failed:', errorMessage);
+        
+        if (isMounted) {
+          setIsInitialized(false);
+          setInitializationError(errorMessage);
+          
+          // Show developer-friendly error
+          if (enableLogging) {
+            console.group('🔧 API Key Troubleshooting Guide');
+            console.log('1. Check that your API key is correct and not expired');
+            console.log('2. Verify you have the right permissions for your use case');
+            console.log('3. Ensure your environment setting matches your API key');
+            console.log('4. Check your internet connection');
+            console.log('5. Visit https://dashboard.onairos.uk to manage your API keys');
+            console.groupEnd();
+          }
+          
+          // Call rejection callback if provided
+          if (onRejection) {
+            onRejection(`SDK initialization failed: ${errorMessage}`);
+          }
+        }
+      } finally {
+        if (isMounted) {
+          setIsInitializing(false);
+        }
+      }
+    };
+
+    // Only initialize if we have an API key and aren't already initialized correctly
+    if (apiKey && (!isApiKeyInitialized() || getApiConfig()?.apiKey !== apiKey)) {
+      initializeApi();
     }
-    
-    const bgColor = getBackgroundColor();
-    // Simple luminance check - in a real app, this would use a proper algorithm
-    return bgColor === '#ffffff' || bgColor === '#f5f5f580' || bgColor.includes('#f') ? '#000000' : '#FFFFFF';
-  };
 
-  const handlePress = async () => {
-    if (!enabled || isLoading) return;
-    
-    setIsLoading(true);
-    
+    return () => {
+      isMounted = false;
+    };
+  }, [apiKey, environment, enableLogging, timeout, retryAttempts, onRejection]);
+
+  // Imperative methods
+  useImperativeHandle(ref, () => ({
+    openOverlay: handleShowOverlay,
+    closeOverlay: handleCloseOverlay,
+    isInitialized: () => isInitialized,
+    getApiConfig: () => getApiConfig(),
+  }));
+
+  const handleShowOverlay = useCallback(async () => {
     try {
+      // Check if SDK is initialized
+      if (!isInitialized) {
+        const errorMessage = initializationError || 'SDK not initialized. Please check your API key.';
+        console.error('❌ Cannot open overlay: SDK not initialized');
+        
+        if (onRejection) {
+          onRejection(errorMessage);
+        } else {
+          Alert.alert(
+            'SDK Error',
+            errorMessage,
+            [{ text: 'OK' }]
+          );
+        }
+        return;
+      }
+
+      // Run pre-check if provided
       if (preCheck) {
-        const shouldProceed = await preCheck();
-        if (!shouldProceed) {
-          onRejection?.('Precheck validation failed');
-          setIsLoading(false);
+        if (enableLogging) {
+          console.log('🔍 Running pre-check validation...');
+        }
+        
+        try {
+          const preCheckPassed = await preCheck();
+          if (!preCheckPassed) {
+            if (enableLogging) {
+              console.log('⛔ Pre-check failed, aborting overlay');
+            }
+            return;
+          }
+          
+          if (enableLogging) {
+            console.log('✅ Pre-check passed');
+          }
+        } catch (preCheckError) {
+          console.error('❌ Pre-check error:', preCheckError);
+          if (onRejection) {
+            onRejection(`Pre-check failed: ${preCheckError.message}`);
+          }
           return;
         }
       }
 
-      // Check if credentials exist
-      const hasStoredCreds = await hasCredentials();
+      // Check for existing credentials
+      if (enableLogging) {
+        console.log('🔍 Checking for existing credentials...');
+      }
       
-      if (hasStoredCreds) {
-        // If credentials exist, fetch them and verify
-        const credentials = await getCredentials();
-        
-        if (!credentials || !credentials.username) {
-          // Invalid credentials, clear and start fresh
-          await deleteCredentials();
-          setShowOnboarding(true);
-          setIsLoading(false);
-          return;
+      const hasExistingCredentials = await hasCredentials();
+      
+      if (hasExistingCredentials) {
+        if (enableLogging) {
+          console.log('🔑 Existing credentials found, attempting automatic resolution...');
         }
         
         try {
-          // Validate credentials with server
-          const isValid = await onairosApi.validateCredentials(credentials.username);
+          const credentials = await getCredentials();
           
-          if (!isValid) {
-            // Clear invalid credentials
-            await deleteCredentials();
-            setShowOnboarding(true);
-            setIsLoading(false);
+          if (credentials && onResolved) {
+            // For existing users, we can resolve immediately with cached data
+            const mockApiUrl = 'https://api2.onairos.uk/user/data';
+            const mockToken = 'existing_user_token';
+            
+            if (enableLogging) {
+              console.log('✅ Resolving with existing credentials');
+            }
+            
+            onResolved(mockApiUrl, mockToken, credentials);
             return;
           }
-          
-          // Store and display overlay with valid credentials
-          setStoredCredentials(credentials);
-          setShowOverlay(true);
-        } catch (validationError) {
-          console.warn('Validation error, proceeding to onboarding:', validationError);
-          setShowOnboarding(true);
+        } catch (credentialsError) {
+          console.warn('⚠️ Failed to retrieve existing credentials:', credentialsError);
+          // Continue with normal flow
         }
-      } else {
-        // If no credentials, show onboarding
-        setShowOnboarding(true);
       }
+
+      if (enableLogging) {
+        console.log('🎨 Opening Onairos overlay...');
+      }
+      
+      setShowOverlay(true);
     } catch (error) {
-      console.error('Error during button press flow:', error);
-      // Fall back to onboarding on error
-      setShowOnboarding(true);
-      onRejection?.(error instanceof Error ? error.message : 'Unknown error');
-    } finally {
-      setIsLoading(false);
+      console.error('❌ Error opening overlay:', error);
+      if (onRejection) {
+        onRejection(`Failed to open overlay: ${error.message}`);
+      }
     }
-  };
+  }, [isInitialized, initializationError, preCheck, enableLogging, onRejection, onResolved]);
 
-  const handleOnboardingComplete = useCallback((apiUrl: string, token: string, data: any) => {
-    setShowOnboarding(false);
-    if (onResolved) {
-      onResolved(apiUrl, token, data);
+  const handleCloseOverlay = useCallback((result?: any) => {
+    if (enableLogging) {
+      console.log('🔽 Closing Onairos overlay');
+    }
+    
+    setShowOverlay(false);
+    
+    if (result && onResolved) {
+      onResolved(result.apiUrl, result.token, result.userData);
     }
-  }, [onResolved]);
+  }, [enableLogging, onResolved]);
 
-  const handleOverlayResolved = useCallback((apiUrl: string, token: string, data: any) => {
+  const handleOverlayRejection = useCallback((error?: string) => {
+    if (enableLogging) {
+      console.log('❌ Overlay rejected:', error);
+    }
+    
     setShowOverlay(false);
-    if (onResolved) {
-      onResolved(apiUrl, token, data);
+    
+    if (onRejection) {
+      onRejection(error);
     }
-  }, [onResolved]);
+  }, [enableLogging, onRejection]);
+
+  // Show error state if initialization failed
+  if (initializationError && !isInitializing) {
+    return (
+      <View style={styles.errorContainer}>
+        <TouchableOpacity
+          style={[styles.errorButton, { backgroundColor: '#FF6B6B' }]}
+          onPress={() => {
+            Alert.alert(
+              'SDK Error',
+              `Onairos SDK initialization failed:\n\n${initializationError}\n\nPlease check your API key and try again.`,
+              [{ text: 'OK' }]
+            );
+          }}
+        >
+          <Text style={styles.errorButtonText}>⚠️ SDK Error</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  // Show loading state while initializing
+  if (isInitializing || !isInitialized) {
+    return (
+      <View style={styles.loadingContainer}>
+        <TouchableOpacity
+          style={[styles.loadingButton, { backgroundColor: '#999' }]}
+          disabled={true}
+        >
+          <Text style={styles.loadingButtonText}>🔄 Initializing...</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
 
-  // Apply custom styling based on props
-  const buttonStyle: ViewStyle[] = [
-    styles.button,
-    {
+  // Get button style based on type
+  const getButtonStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
       width: buttonWidth,
-      height: buttonHeight || 48,
-      backgroundColor: getBackgroundColor(),
-      borderWidth: hasStroke ? 1 : 0,
-      borderColor: darkMode ? '#555555' : '#000000',
-      borderRadius: buttonType === 'pill' ? 24 : 8,
-    },
-  ];
+      height: buttonHeight,
+      backgroundColor: color,
+      borderRadius: buttonType === 'pill' ? buttonHeight / 2 : 8,
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      opacity: enabled ? 1 : 0.6,
+    };
+
+    if (hasStroke) {
+      baseStyle.borderWidth = 2;
+      baseStyle.borderColor = darkMode ? '#fff' : '#000';
+    }
+
+    return baseStyle;
+  };
 
-  const textStyle: TextStyle = {
-    ...styles.buttonText,
-    color: getTextColor(),
-    opacity: enabled ? 1 : 0.7,
+  const getButtonText = (): string => {
+    switch (buttonForm) {
+      case 'connect':
+        return 'Connect with Onairos';
+      default:
+        return 'Continue with Onairos';
+    }
   };
 
   return (
     <>
       <TouchableOpacity
-        style={buttonStyle}
-        onPress={handlePress}
-        disabled={!enabled || isLoading}
-        accessibilityLabel="Sign in with Onairos"
-        onPressIn={() => setIsPressed(true)}
-        onPressOut={() => setIsPressed(false)}
+        style={getButtonStyle()}
+        onPress={handleShowOverlay}
+        disabled={!enabled || isInitializing || !isInitialized}
+        activeOpacity={0.8}
       >
-        <View style={styles.buttonContent}>
-          <Image 
-            source={require('../assets/images/onairos_logo.png')} 
-            style={styles.logo} 
-            resizeMode="contain" 
-          />
-          <Text style={textStyle}>{getButtonText()}</Text>
-        </View>
+        <Image
+          source={require('../assets/images/onairos_logo.png')}
+          style={styles.logo}
+          resizeMode="contain"
+        />
+        <Text style={[styles.buttonText, { color: darkMode ? '#000' : '#fff' }]}>
+          {getButtonText()}
+        </Text>
       </TouchableOpacity>
 
-      {/* Overlay and Onboarding components rendered outside the button */}
-      {showOnboarding && (
-        <UniversalOnboarding
-          visible={showOnboarding}
-          onClose={() => {
-            setShowOnboarding(false);
-            onRejection?.('User closed onboarding');
-          }}
-        AppName={AppName}
-          requestData={requestData as any}
-          returnLink={returnLink || ''}
-          onComplete={handleOnboardingComplete}
-          debug={debug}
-          test={testMode}
-        preferredPlatform={preferredPlatform}
-        />
-      )}
-      
-      {/* Overlay rendered through Portal to ensure it appears at root level */}
-      {showOverlay && storedCredentials && (
+      {showOverlay && (
         <Portal>
-          <Overlay
-            data={requestData || {}}
-            username={storedCredentials.username}
-            modelKey={storedCredentials.userPin || ''}
-            onResolved={handleOverlayResolved}
-            appName={AppName}
-            darkMode={darkMode}
+          <UniversalOnboarding
+            visible={showOverlay}
+            onClose={handleCloseOverlay}
+            AppName={AppName}
+            requestData={requestData || {}}
+            returnLink={returnLink}
+            prefillUrl={prefillUrl}
+            onComplete={handleCloseOverlay}
+            embedd={false}
+            debug={debug}
+            testMode={testMode}
+            preferredPlatform={preferredPlatform}
+            config={getApiConfig() || undefined}
           />
         </Portal>
       )}
@@ -299,4 +423,32 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     textAlign: 'center',
   },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorButton: {
+    padding: 16,
+    borderRadius: 8,
+  },
+  errorButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fff',
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingButton: {
+    padding: 16,
+    borderRadius: 8,
+  },
+  loadingButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fff',
+  },
 }); 

package/src/components/OnairosButton.tsx

@@ -288,7 +288,7 @@ export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
           returnLink={returnLink || ''}
           onComplete={handleOnboardingComplete}
           debug={debug}
-          test={testMode}
+          testMode={testMode}
           preferredPlatform={preferredPlatform}
         />
       )}

package/src/components/UniversalOnboarding.tsx

@@ -56,7 +56,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   onComplete,
   embedd = false,
   debug = false,
-  test = false,
+  testMode = false,
   preferredPlatform,
   inferenceData,
   auto = false,
@@ -93,8 +93,8 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
 
 
   // Parse test mode options
-  const testModeOptions = typeof test === 'object' ? test : {};
-  const isTestMode = test === true || (typeof test === 'object' && test !== null);
+  const testModeOptions = typeof testMode === 'object' ? testMode : {} as any;
+  const isTestMode = testMode === true || (typeof testMode === 'object' && testMode !== null);
   const showTestControls = (debug || isTestMode) && requestData;
   
   // Simple 2-flow system
@@ -169,7 +169,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         });
         
         // Pre-populate with mock connections in debug mode
-        if (test || Platform.OS === 'web') {
+        if (testMode || Platform.OS === 'web') {
           setConnections({
             instagram: { userName: 'instagram_user', connected: true },
             youtube: { userName: 'youtube_user', connected: true },
@@ -573,7 +573,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         Alert.alert('Error', 'An unexpected error occurred. Please try again.');
       }
     }
-  }, [email, isVerifyingCode, debug, test]);
+  }, [email, isVerifyingCode, debug, testMode]);
 
   // Function to handle verification code submission
   const handleVerificationSubmit = useCallback(async () => {
@@ -1157,7 +1157,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                         <Text style={styles.privacyMessage}>
                           None of your app data is shared with ANYONE
                         </Text>
-                        {(debug || test) && (
+                        {(debug || testMode) && (
                           <Text style={styles.developmentNote}>
                             🧪 Test Mode: You can proceed without connecting any platforms
                           </Text>