@onairos/react-native 3.1.16 → 3.1.18

package/src/components/Onairos.tsx

@@ -1,423 +1,423 @@
-import React, { forwardRef, useImperativeHandle, useState, useCallback, useEffect } from 'react';
-import {
-  StyleSheet,
-  View,
-  TouchableOpacity,
-  Text,
-  ViewStyle,
-  TextStyle,
-  Platform,
-  Image,
-  Alert,
-} from 'react-native';
-import { UniversalOnboarding } from './UniversalOnboarding';
-import { Overlay } from './Overlay';
-import { COLORS } from '../constants';
-import { hasCredentials, getCredentials, deleteCredentials } from '../utils/secureStorage';
-import { onairosApi } from '../api';
-import { Portal } from '../utils/Portal';
-import { DataTier, OnairosConfig, OnairosProps } from '../types';
-import { initializeApiKey, isApiKeyInitialized, getApiConfig } from '../services/apiKeyService';
-
-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;
-
-  const [showOverlay, setShowOverlay] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [initializationError, setInitializationError] = useState<string | null>(null);
-  const [isInitializing, setIsInitializing] = useState(false);
-
-  // Initialize API key when component mounts or API key changes
-  useEffect(() => {
-    let isMounted = true;
-
-    const initializeApi = async () => {
-      // Skip if already initializing
-      if (isInitializing) return;
-      
-      setIsInitializing(true);
-      setInitializationError(null);
-
-      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.');
-        }
-
-        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();
-    }
-
-    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) {
-        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 for existing credentials
-      if (enableLogging) {
-        console.log('🔍 Checking for existing credentials...');
-      }
-      
-      const hasExistingCredentials = await hasCredentials();
-      
-      if (hasExistingCredentials) {
-        if (enableLogging) {
-          console.log('🔑 Existing credentials found, attempting automatic resolution...');
-        }
-        
-        try {
-          const credentials = await getCredentials();
-          
-          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;
-          }
-        } catch (credentialsError) {
-          console.warn('⚠️ Failed to retrieve existing credentials:', credentialsError);
-          // Continue with normal flow
-        }
-      }
-
-      if (enableLogging) {
-        console.log('🎨 Opening Onairos overlay...');
-      }
-      
-      setShowOverlay(true);
-    } catch (error) {
-      console.error('❌ Error opening overlay:', error);
-      if (onRejection) {
-        onRejection(`Failed to open overlay: ${error.message}`);
-      }
-    }
-  }, [isInitialized, initializationError, preCheck, enableLogging, onRejection, onResolved]);
-
-  const handleCloseOverlay = useCallback((result?: any) => {
-    if (enableLogging) {
-      console.log('🔽 Closing Onairos overlay');
-    }
-    
-    setShowOverlay(false);
-    
-    if (result && onResolved) {
-      onResolved(result.apiUrl, result.token, result.userData);
-    }
-  }, [enableLogging, onResolved]);
-
-  const handleOverlayRejection = useCallback((error?: string) => {
-    if (enableLogging) {
-      console.log('❌ Overlay rejected:', error);
-    }
-    
-    setShowOverlay(false);
-    
-    if (onRejection) {
-      onRejection(error);
-    }
-  }, [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>
-    );
-  }
-
-  // Get button style based on type
-  const getButtonStyle = (): ViewStyle => {
-    const baseStyle: ViewStyle = {
-      width: buttonWidth,
-      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 getButtonText = (): string => {
-    switch (buttonForm) {
-      case 'connect':
-        return 'Connect with Onairos';
-      default:
-        return 'Continue with Onairos';
-    }
-  };
-
-  return (
-    <>
-      <TouchableOpacity
-        style={getButtonStyle()}
-        onPress={handleShowOverlay}
-        disabled={!enabled || isInitializing || !isInitialized}
-        activeOpacity={0.8}
-      >
-        <Image
-          source={require('../assets/images/onairos_logo.png')}
-          style={styles.logo}
-          resizeMode="contain"
-        />
-        <Text style={[styles.buttonText, { color: darkMode ? '#000' : '#fff' }]}>
-          {getButtonText()}
-        </Text>
-      </TouchableOpacity>
-
-      {showOverlay && (
-        <Portal>
-          <UniversalOnboarding
-            visible={showOverlay}
-            onClose={handleCloseOverlay}
-            AppName={AppName}
-            requestData={requestData || {}}
-            returnLink={returnLink}
-            onComplete={handleCloseOverlay}
-            embedd={false}
-            debug={debug}
-            testMode={testMode}
-            preferredPlatform={preferredPlatform}
-          />
-        </Portal>
-      )}
-    </>
-  );
-});
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  buttonContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  logo: {
-    width: 24,
-    height: 24,
-    marginRight: 8,
-  },
-  buttonText: {
-    fontSize: 16,
-    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',
-  },
+import React, { forwardRef, useImperativeHandle, useState, useCallback, useEffect } from 'react';
+import {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  Text,
+  ViewStyle,
+  TextStyle,
+  Platform,
+  Image,
+  Alert,
+} from 'react-native';
+import { UniversalOnboarding } from './UniversalOnboarding';
+import { Overlay } from './Overlay';
+import { COLORS } from '../constants';
+import { hasCredentials, getCredentials, deleteCredentials } from '../utils/secureStorage';
+import { onairosApi } from '../api';
+import { Portal } from '../utils/Portal';
+import { DataTier, OnairosConfig, OnairosProps } from '../types';
+import { initializeApiKey, isApiKeyInitialized, getApiConfig } from '../services/apiKeyService';
+
+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;
+
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [initializationError, setInitializationError] = useState<string | null>(null);
+  const [isInitializing, setIsInitializing] = useState(false);
+
+  // Initialize API key when component mounts or API key changes
+  useEffect(() => {
+    let isMounted = true;
+
+    const initializeApi = async () => {
+      // Skip if already initializing
+      if (isInitializing) return;
+      
+      setIsInitializing(true);
+      setInitializationError(null);
+
+      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.');
+        }
+
+        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();
+    }
+
+    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) {
+        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 for existing credentials
+      if (enableLogging) {
+        console.log('🔍 Checking for existing credentials...');
+      }
+      
+      const hasExistingCredentials = await hasCredentials();
+      
+      if (hasExistingCredentials) {
+        if (enableLogging) {
+          console.log('🔑 Existing credentials found, attempting automatic resolution...');
+        }
+        
+        try {
+          const credentials = await getCredentials();
+          
+          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;
+          }
+        } catch (credentialsError) {
+          console.warn('⚠️ Failed to retrieve existing credentials:', credentialsError);
+          // Continue with normal flow
+        }
+      }
+
+      if (enableLogging) {
+        console.log('🎨 Opening Onairos overlay...');
+      }
+      
+      setShowOverlay(true);
+    } catch (error) {
+      console.error('❌ Error opening overlay:', error);
+      if (onRejection) {
+        onRejection(`Failed to open overlay: ${error.message}`);
+      }
+    }
+  }, [isInitialized, initializationError, preCheck, enableLogging, onRejection, onResolved]);
+
+  const handleCloseOverlay = useCallback((result?: any) => {
+    if (enableLogging) {
+      console.log('🔽 Closing Onairos overlay');
+    }
+    
+    setShowOverlay(false);
+    
+    if (result && onResolved) {
+      onResolved(result.apiUrl, result.token, result.userData);
+    }
+  }, [enableLogging, onResolved]);
+
+  const handleOverlayRejection = useCallback((error?: string) => {
+    if (enableLogging) {
+      console.log('❌ Overlay rejected:', error);
+    }
+    
+    setShowOverlay(false);
+    
+    if (onRejection) {
+      onRejection(error);
+    }
+  }, [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>
+    );
+  }
+
+  // Get button style based on type
+  const getButtonStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      width: buttonWidth,
+      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 getButtonText = (): string => {
+    switch (buttonForm) {
+      case 'connect':
+        return 'Connect with Onairos';
+      default:
+        return 'Continue with Onairos';
+    }
+  };
+
+  return (
+    <>
+      <TouchableOpacity
+        style={getButtonStyle()}
+        onPress={handleShowOverlay}
+        disabled={!enabled || isInitializing || !isInitialized}
+        activeOpacity={0.8}
+      >
+        <Image
+          source={require('../assets/images/onairos_logo.png')}
+          style={styles.logo}
+          resizeMode="contain"
+        />
+        <Text style={[styles.buttonText, { color: darkMode ? '#000' : '#fff' }]}>
+          {getButtonText()}
+        </Text>
+      </TouchableOpacity>
+
+      {showOverlay && (
+        <Portal>
+          <UniversalOnboarding
+            visible={showOverlay}
+            onClose={handleCloseOverlay}
+            AppName={AppName}
+            requestData={requestData || {}}
+            returnLink={returnLink}
+            onComplete={handleCloseOverlay}
+            embedd={false}
+            debug={debug}
+            testMode={testMode}
+            preferredPlatform={preferredPlatform}
+          />
+        </Portal>
+      )}
+    </>
+  );
+});
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  buttonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logo: {
+    width: 24,
+    height: 24,
+    marginRight: 8,
+  },
+  buttonText: {
+    fontSize: 16,
+    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',
+  },
 });