@onairos/react-native 3.4.1 → 3.5.4

package/src/components/OnairosButton.tsx

@@ -1,359 +0,0 @@
-import React, { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
-import { 
-  TouchableOpacity, 
-  Text, 
-  StyleSheet, 
-  View, 
-  ViewStyle, 
-  TextStyle,
-  ActivityIndicator,
-  Image,
-} from 'react-native';
-import { UniversalOnboarding } from './UniversalOnboarding';
-import { Overlay } from './Overlay';
-import { COLORS } from '../constants';
-import type { OnairosButtonProps } from '../types';
-import { hasCredentials, getCredentials, deleteCredentials as clearCredentials } from '../utils/secureStorage';
-import { onairosApi } from '../api';
-
-export interface OnairosButtonRef {
-  trigger: () => Promise<void>;
-  reset: () => Promise<void>;
-}
-
-/**
- * OnairosButton Component - A sign-in button similar to Google/Apple sign-in
- */
-export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
-  AppName,
-  appIcon,
-  requestData,
-  returnLink,
-  prefillUrl,
-  buttonType = 'normal',
-  buttonWidth = 180,
-  buttonHeight = 48,
-  hasStroke = false,
-  enabled = true,
-  buttonForm = 'default',
-  auto = false,
-  onRejection,
-  onResolved,
-  preCheck,
-  color,
-  swerv = false,
-  debug = false,
-  preferredPlatform,
-  testMode = false,
-  darkMode = 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);
-
-  // Expose methods via ref
-  useImperativeHandle(ref, () => ({
-    trigger: async () => {
-      await handlePress();
-    },
-    reset: async () => {
-      await clearCredentials();
-    }
-  }));
-
-  // Compute button text based on buttonForm
-  const getButtonText = () => {
-    if (buttonForm === 'connect' || buttonForm === 'signup') {
-      return 'Connect with Onairos';
-    } else {
-      return 'Sign in with Onairos';
-    }
-  };
-
-  // 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');
-  };
-
-  // Calculate text color based on background luminance
-  const getTextColor = (): string => {
-    if (!enabled) {
-      return darkMode ? '#777777' : '#AAAAAA';
-    }
-    
-    if (darkMode) {
-      return '#FFFFFF';
-    }
-    
-    const bgColor = getBackgroundColor();
-    // Simple luminance check
-    return bgColor === '#ffffff' || bgColor === '#f5f5f580' || bgColor.includes('#f') ? '#000000' : '#FFFFFF';
-  };
-  
-  const handlePress = async () => {
-    if (!enabled || isLoading) return;
-    
-    setIsLoading(true);
-    
-    try {
-      // If auto is enabled, make API call automatically and return result
-      if (auto) {
-        try {
-          // Check if credentials exist
-          const hasStoredCreds = await hasCredentials();
-          
-          if (hasStoredCreds) {
-            const credentials = await getCredentials();
-            
-            if (!credentials || !credentials.username) {
-              throw new Error('Invalid credentials');
-            }
-            
-            // Call the API directly and return result
-            const result = await fetch(`https://api2.onairos.uk/api/inference`, {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${credentials.userPin || ''}`
-              },
-              body: JSON.stringify({
-                username: credentials.username,
-                modelKey: credentials.userPin || '',
-                requestData: requestData || {},
-                appName: AppName
-              })
-            }).then(res => res.json());
-            
-            if (result && result.success) {
-              if (onResolved) {
-                onResolved(result.apiUrl || 'https://api2.onairos.uk', result.token || '', result.data || {});
-              }
-              setIsLoading(false);
-              return;
-            } else {
-              throw new Error(result?.error || 'API call failed');
-            }
-          } else {
-            // No credentials, proceed with normal flow
-            console.log('No credentials found, proceeding with normal flow');
-          }
-        } catch (automaticError) {
-          console.error('Automatic API call error:', automaticError);
-          // Fall back to normal flow on error
-        }
-      }
-      
-      if (preCheck) {
-        const shouldProceed = await preCheck();
-        if (!shouldProceed) {
-          onRejection?.('Precheck validation failed');
-          setIsLoading(false);
-          return;
-        }
-      }
-
-      // Check if credentials exist
-      const hasStoredCreds = await hasCredentials();
-      
-      if (hasStoredCreds) {
-        // If credentials exist, fetch them and verify
-        const credentials = await getCredentials();
-        
-        if (!credentials || !credentials.username) {
-          // Invalid credentials, clear and start fresh
-          await clearCredentials();
-          setShowOnboarding(true);
-          setIsLoading(false);
-          return;
-        }
-        
-        try {
-          // Validate credentials with server
-          const isValid = await onairosApi.validateCredentials(credentials.username);
-          
-          if (!isValid) {
-            // Clear invalid credentials
-            await clearCredentials();
-            setShowOnboarding(true);
-            setIsLoading(false);
-            return;
-          }
-          
-          // Store and display overlay with valid credentials
-          setStoredCredentials(credentials);
-          setShowOverlay(true);
-        } catch (validationError) {
-          console.warn('Validation error, proceeding to onboarding:', validationError);
-          setShowOnboarding(true);
-        }
-      } else {
-        // If no credentials, show onboarding
-        setShowOnboarding(true);
-      }
-    } catch (error) {
-      console.error('Error during button press flow:', error);
-      // Only call onRejection for actual errors, not when user cancels
-      // The onboarding component will handle user cancellation separately
-      setShowOnboarding(true);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleOnboardingComplete = useCallback((apiUrl: string, token: string, data: any) => {
-    setShowOnboarding(false);
-    if (onResolved) {
-      onResolved(apiUrl, token, data);
-    }
-  }, [onResolved]);
-  
-  const handleOverlayResolved = useCallback((apiUrl: string, token: string, data: any) => {
-    setShowOverlay(false);
-    if (onResolved) {
-      onResolved(apiUrl, token, data);
-    }
-  }, [onResolved]);
-
-  // Calculate button styles based on props
-  const buttonStyle: ViewStyle[] = [
-    styles.button,
-    buttonType === 'pill' && styles.pillButton,
-    hasStroke && styles.strokedButton,
-    { 
-      width: buttonWidth,
-      height: buttonHeight,
-      backgroundColor: getBackgroundColor(),
-      borderColor: darkMode ? '#555555' : '#000000',
-    },
-    swerv && styles.swervButton,
-    !enabled && styles.disabledButton
-  ].filter(Boolean) as ViewStyle[];
-
-  // Calculate button text color
-  const buttonTextColor = getTextColor();
-
-  // Render components
-  return (
-    <>
-      <TouchableOpacity
-        style={buttonStyle}
-        onPress={handlePress}
-        disabled={!enabled || isLoading}
-        accessibilityLabel={`Sign in with Onairos`}
-        onPressIn={() => setIsPressed(true)}
-        onPressOut={() => setIsPressed(false)}
-      >
-        {isLoading ? (
-          <ActivityIndicator 
-            size="small" 
-            color={buttonTextColor} 
-          />
-        ) : (
-          <View style={styles.buttonContent}>
-            <Image 
-              source={require('../assets/images/onairos_logo.png')} 
-              style={styles.logo} 
-              resizeMode="contain" 
-            />
-            <Text style={[styles.buttonText, { color: buttonTextColor }]}>
-              {getButtonText()}
-            </Text>
-          </View>
-        )}
-      </TouchableOpacity>
-
-      {/* Overlay and Onboarding components rendered outside the button */}
-      {showOnboarding && (
-        <UniversalOnboarding
-          visible={showOnboarding}
-          onClose={() => {
-            setShowOnboarding(false);
-            onRejection?.('User closed onboarding');
-          }}
-          AppName={AppName}
-          appIcon={appIcon}
-          requestData={requestData as any}
-          returnLink={returnLink || ''}
-          onComplete={handleOnboardingComplete}
-          debug={debug}
-          testMode={testMode}
-          preferredPlatform={preferredPlatform}
-        />
-      )}
-      
-      {/* Overlay rendered directly without Portal */}
-      {showOverlay && storedCredentials && (
-          <Overlay
-            data={requestData || {}}
-            username={storedCredentials.username}
-            modelKey={storedCredentials.userPin || ''}
-            onResolved={handleOverlayResolved}
-            appName={AppName}
-            darkMode={darkMode}
-          />
-      )}
-    </>
-  );
-});
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    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,
-  },
-  pillButton: {
-    borderRadius: 24,
-  },
-  strokedButton: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-  },
-  swervButton: {
-    transform: [{ rotate: '0deg' }],
-  },
-  disabledButton: {
-    opacity: 0.6,
-  },
-  buttonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-});
-
-// Add displayName for better debugging
-OnairosButton.displayName = 'OnairosButton';
-
-// Ensure the component is properly exported
-export default OnairosButton;