@onairos/react-native 3.1.18 → 3.2.1

package/src/components/OnairosButton.tsx

@@ -1,339 +1,359 @@
-import React, { useState, useCallback, forwardRef, useImperativeHandle, useEffect } from 'react';
-import { 
-  TouchableOpacity, 
-  Text, 
-  StyleSheet, 
-  View,
-  ActivityIndicator,
-  Dimensions,
-  Image,
-} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { UniversalOnboarding } from './UniversalOnboarding';
-import WelcomeScreen from './WelcomeScreen';
-
-export interface OnairosButtonProps {
-  AppName: string;
-  buttonType?: 'normal' | 'pill';
-  buttonWidth?: number;
-  buttonHeight?: number;
-  hasStroke?: boolean;
-  enabled?: boolean;
-  buttonForm?: 'default' | 'login' | 'signup' | 'connect';
-  onResolved?: (token: string, email?: string) => void;
-  onRejection?: (error: any) => void;
-  preCheck?: () => Promise<boolean>;
-  color?: string;
-  swerv?: boolean;
-  darkMode?: boolean;
-  returnLink?: string;
-  preferredPlatform?: string;
-  autoFetch?: boolean;
-  inferenceData?: any;
-  textLayout?: 'left' | 'right' | 'center';
-  textColor?: string;
-  proofMode?: boolean;
-  webpageName?: string;
-  debug?: boolean;
-  testMode?: boolean;
-  requestData?: any;
-  onPress?: () => void;
-  primaryAuthOnly?: boolean;
-  useNewWelcomeFlow?: boolean; // NEW: Enable the refreshed welcome screen experience
-}
-
-export interface OnairosButtonRef {
-  trigger: () => Promise<void>;
-  reset: () => Promise<void>;
-}
-
-const { width } = Dimensions.get('window');
-
-export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
-  AppName,
-  buttonType = 'normal',
-  buttonWidth = 180,
-  buttonHeight = 48,
-  hasStroke = false,
-  enabled = true,
-  buttonForm = 'default',
-  onResolved,
-  onRejection,
-  preCheck,
-  color = '#1BA9D4',
-  swerv = false,
-  darkMode = false,
-  returnLink,
-  preferredPlatform,
-  autoFetch = false,
-  inferenceData,
-  textLayout = 'right',
-  textColor = 'black',
-  proofMode = false,
-  webpageName,
-  debug = false,
-  testMode = false,
-  requestData,
-  onPress,
-  primaryAuthOnly = false,
-  useNewWelcomeFlow = false,
-}, ref) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [isPressed, setIsPressed] = useState(false);
-  const [showOnboarding, setShowOnboarding] = useState(false);
-  console.log('[OnairosButton] Initializing. Initial showOnboarding:', showOnboarding);
-
-  useEffect(() => {
-    console.log('[OnairosButton] LogEffect: showOnboarding state changed to:', showOnboarding);
-  }, [showOnboarding]);
-
-  // Expose methods via ref
-  useImperativeHandle(ref, () => ({
-    trigger: async () => {
-      await handlePress();
-      return Promise.resolve();
-    },
-    reset: async () => {
-      return Promise.resolve();
-    }
-  }));
-
-  const handlePress = async () => {
-    console.log('[OnairosButton] handlePress called.');
-    if (!enabled || isLoading) return;
-    
-    setIsLoading(true);
-    
-    try {
-      if (preCheck) {
-        const shouldProceed = await preCheck();
-        if (!shouldProceed) {
-          console.log('[OnairosButton] Precheck failed. Setting showOnboarding to false (indirectly, by not setting to true).');
-          onRejection?.('Precheck validation failed');
-          setIsLoading(false);
-          return;
-        }
-      }
-
-      console.log('[OnairosButton] handlePress: Setting showOnboarding to true.');
-      setShowOnboarding(true);
-      setIsLoading(false);
-    } catch (error) {
-      console.error('[OnairosButton] Error in handlePress:', error);
-      onRejection?.(error instanceof Error ? error.message : 'Unknown error');
-      setIsLoading(false);
-    }
-  };
-
-  // Compute button text based on buttonForm
-  const getButtonText = () => {
-    switch (buttonForm) {
-      case 'connect':
-        return 'Connect Onairos';
-      case 'login':
-        return 'Sign in with Onairos';
-      case 'signup':
-        return 'Sign up with Onairos';
-      default:
-        return 'Connect Onairos';
-    }
-  };
-
-  // Handle onboarding completion
-  const handleOnboardingComplete = useCallback((token: string, email?: string) => {
-    console.log('[OnairosButton] handleOnboardingComplete: Setting showOnboarding to false.');
-    setShowOnboarding(false);
-    
-    if (onResolved) {
-      // Call onResolved with the token and email
-      onResolved(token, email);
-    }
-    
-    if (onPress) {
-      onPress();
-    }
-  }, [onResolved, onPress]);
-
-  // Handle onboarding close
-  const handleOnboardingClose = useCallback(() => {
-    console.log('[OnairosButton] handleOnboardingClose: Setting showOnboarding to false.');
-    setShowOnboarding(false);
-    if (onRejection) {
-      onRejection('User closed onboarding');
-    }
-  }, [onRejection]);
-
-  console.log('[OnairosButton] Rendering JSX with props:', {
-    AppName,
-    buttonType,
-    buttonWidth,
-    buttonHeight,
-    hasStroke,
-    enabled,
-    buttonForm,
-    onResolved,
-    onRejection,
-    preCheck,
-    color,
-    swerv,
-    darkMode,
-    returnLink,
-    preferredPlatform,
-    autoFetch,
-    inferenceData,
-    textLayout,
-    textColor,
-    proofMode,
-    webpageName,
-    debug,
-    testMode,
-    requestData,
-    onPress,
-    primaryAuthOnly,
-    useNewWelcomeFlow,
-  });
-
-  return (
-    <>
-      <View>
-        <TouchableOpacity
-          style={[
-            styles.button,
-            buttonType === 'pill' && styles.pillButton,
-            hasStroke && styles.strokedButton,
-            { 
-              width: buttonWidth,
-              height: buttonHeight,
-            },
-            swerv && styles.swervButton,
-            !enabled && styles.disabledButton
-          ]}
-          onPress={handlePress}
-          disabled={!enabled || isLoading}
-          onPressIn={() => setIsPressed(true)}
-          onPressOut={() => setIsPressed(false)}
-        >
-          <LinearGradient
-            colors={['#f5e7c1', '#C7A047', '#8B6914']}
-            start={{x: 0, y: 0}}
-            end={{x: 1, y: 0}}
-            style={{
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
-              borderRadius: buttonType === 'pill' ? 24 : 8,
-            }}
-          />
-          
-          {isLoading ? (
-            <ActivityIndicator 
-              size="small" 
-              color="#FFFFFF" 
-            />
-          ) : (
-            <View style={styles.buttonContent}>
-              <View style={styles.logoContainer}>
-                <Image 
-                  source={require('../assets/images/onairos_logo.png')} 
-                  style={styles.logoImage} 
-                  resizeMode="contain"
-                />
-              </View>
-              <Text style={[styles.buttonText, { color: '#FFFFFF' }]}>
-                {getButtonText()}
-              </Text>
-            </View>
-          )}
-        </TouchableOpacity>
-      </View>
-
-      {/* Onboarding Modal - Choose between new WelcomeScreen or legacy UniversalOnboarding */}
-      {useNewWelcomeFlow ? (
-        <WelcomeScreen
-          visible={showOnboarding}
-          onClose={handleOnboardingClose}
-          onComplete={handleOnboardingComplete}
-        />
-      ) : (
-        <UniversalOnboarding
-          visible={showOnboarding}
-          onClose={handleOnboardingClose}
-          AppName={AppName}
-          requestData={requestData || {
-            Small: { type: 'Small', descriptions: 'Basic tier', reward: 'Free access' },
-            Medium: { type: 'Medium', descriptions: 'Standard tier', reward: 'Premium features' },
-            Large: { type: 'Large', descriptions: 'Premium tier', reward: 'Full personalization' }
-          }}
-          returnLink={returnLink || 'onairosevents://auth/callback'}
-          onComplete={handleOnboardingComplete}
-          debug={debug}
-          test={testMode}
-          preferredPlatform={preferredPlatform}
-          primaryAuthOnly={primaryAuthOnly}
-        />
-      )}
-    </>
-  );
-});
-
-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.2,
-    shadowRadius: 4,
-    elevation: 3,
-    overflow: 'hidden',
-  },
-  buttonContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  logoContainer: {
-    width: 24,
-    height: 24,
-    // borderRadius: 12, // Removed to eliminate circle shape
-    // backgroundColor: '#FFFFFF', // Removed to eliminate white background
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 4,
-  },
-  logoText: {
-    color: '#C7A047',
-    fontWeight: 'bold',
-    fontSize: 14,
-  },
-  logoImage: {
-    width: 20,
-    height: 20,
-  },
-  pillButton: {
-    borderRadius: 24,
-  },
-  strokedButton: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-  },
-  swervButton: {
-    transform: [{ rotate: '-2deg' }],
-  },
-  disabledButton: {
-    opacity: 0.6,
-  },
-  buttonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-});
-
-export default OnairosButton;
+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;