@onairos/react-native 3.1.15 → 3.1.17

package/src/components/OnairosButton.tsx

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