@onairos/react-native 3.1.11 → 3.1.13

package/src/components/OnairosButton.tsx

@@ -1,359 +1,339 @@
-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; 
+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;