@onairos/react-native 3.1.16 → 3.1.17

package/src/components/OnairosButton.tsx

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

package/src/components/OnairosSignInButton.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useCallback } from 'react';
 import { TouchableOpacity, Text, StyleSheet, View, Image } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import WelcomeScreen from './WelcomeScreen';
 import { triggerHaptic, HapticType } from '../utils/haptics';
 
-export interface OnairosSignInButtonProps {
+interface OnairosSignInButtonProps {
   AppName: string;
   buttonWidth?: number;
   buttonHeight?: number;
@@ -25,20 +26,39 @@ export const OnairosSignInButton: React.FC<OnairosSignInButtonProps> = ({
   autoFocusEmailInput = true,
 }) => {
   const [showWelcomeScreen, setShowWelcomeScreen] = useState(false);
+  const [userEmail, setUserEmail] = useState<string>('');
 
   const handleWelcomeComplete = useCallback((token: string, email?: string) => {
-    console.log('✅ OnairosSignInButton: Welcome flow completed!');
-    console.log('🔑 Token:', token);
-    console.log('📧 Email:', email);
+    console.log('🔍 OnairosSignInButton: handleWelcomeComplete called with:', { token, email });
     
+    // Check if we received a JWT token (real authentication) or just a placeholder token
+    const isJWTToken = token && token.includes('.') && token.split('.').length === 3;
+    
+    console.log('🔍 OnairosSignInButton: Is JWT token?', isJWTToken);
+    
+    // Close the welcome screen
     setShowWelcomeScreen(false);
+    
     if (onResolved) {
-      onResolved(token, email);
+      // For JWT tokens, use the provided email or get from storage
+      if (isJWTToken) {
+        console.log('🔑 Received JWT token from WelcomeScreen, completing sign-in');
+        AsyncStorage.getItem('user_email').then((storedEmail: string | null) => {
+          const emailToUse = email || storedEmail || userEmail;
+          console.log('🔑 OnairosSignInButton: Returning JWT token with email:', emailToUse);
+          onResolved(token, emailToUse);
+        });
+      } else {
+        // For placeholder tokens, still complete the flow with the provided email
+        console.log('🔑 Received placeholder token from WelcomeScreen, completing sign-in');
+        const emailToUse = email || userEmail;
+        console.log('🔑 OnairosSignInButton: Returning token with email:', emailToUse);
+        onResolved(token, emailToUse);
+      }
     }
-  }, [onResolved]);
+  }, [onResolved, userEmail]);
 
-  const handleWelcomeClose = useCallback(() => {
-    console.log('❌ OnairosSignInButton: Welcome flow cancelled');
+  const handleWelcomeCancel = useCallback(() => {
     setShowWelcomeScreen(false);
     if (onRejection) {
       onRejection('User closed welcome screen');
@@ -70,7 +90,7 @@ export const OnairosSignInButton: React.FC<OnairosSignInButtonProps> = ({
       </TouchableOpacity>
       <WelcomeScreen
         visible={showWelcomeScreen}
-        onClose={handleWelcomeClose}
+        onClose={handleWelcomeCancel}
         onComplete={handleWelcomeComplete}
       />
     </View>
@@ -107,4 +127,4 @@ const styles = StyleSheet.create({
   container: {
     // Add any necessary styles for the container
   },
-});
+});