@onairos/react-native 3.4.0 → 3.5.4

package/src/components/Onairos.tsx

@@ -1,425 +0,0 @@
-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}
-            prefillUrl={prefillUrl}
-            onComplete={handleCloseOverlay}
-            embedd={false}
-            debug={debug}
-            testMode={testMode}
-            preferredPlatform={preferredPlatform}
-            config={getApiConfig() || undefined}
-          />
-        </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',
-  },
-});