@onairos/react-native 3.1.15 → 3.1.17

package/src/components/OnairosSignInButton.tsx

@@ -1,166 +1,130 @@
-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 { TrainingModal } from './TrainingModal';
-import { UniversalOnboarding } from './UniversalOnboarding';
-import { triggerHaptic, HapticType } from '../utils/haptics';
-
-interface OnairosSignInButtonProps {
-  AppName: string;
-  buttonWidth?: number;
-  buttonHeight?: number;
-  color?: string;
-  textColor?: string;
-  onResolved?: (token: string, email?: string) => void;
-  onRejection?: (error: any) => void;
-  autoFocusEmailInput?: boolean;
-}
-
-export const OnairosSignInButton: React.FC<OnairosSignInButtonProps> = ({
-  AppName,
-  buttonWidth = 280,
-  buttonHeight = 44,
-  color = '#D4A536',
-  textColor = '#000',
-  onResolved,
-  onRejection,
-  autoFocusEmailInput = true,
-}) => {
-  const [showEmailModal, setShowEmailModal] = useState(false);
-  const [showOnboardingModal, setShowOnboardingModal] = useState(false);
-  const [userEmail, setUserEmail] = useState<string>('');
-
-  const handleEmailComplete = useCallback((emailOrToken: string) => {
-    console.log('🔍 OnairosSignInButton: handleEmailComplete called with:', emailOrToken);
-    
-    // Check if we received a JWT token (real authentication) or just an email
-    const isJWTToken = emailOrToken && emailOrToken.includes('.') && emailOrToken.split('.').length === 3;
-    
-    console.log('🔍 OnairosSignInButton: Is JWT token?', isJWTToken);
-    
-    if (isJWTToken) {
-      // We received a real JWT token from TrainingModal, complete the sign-in immediately
-      console.log('🔑 Received JWT token from TrainingModal, completing sign-in');
-      setShowEmailModal(false);
-      if (onResolved) {
-        // For JWT tokens, we need to get the email from storage since TrainingModal stored it
-        AsyncStorage.getItem('user_email').then((storedEmail: string | null) => {
-          const emailToUse = storedEmail || userEmail;
-          console.log('🔑 OnairosSignInButton: Returning JWT token with email:', emailToUse);
-          onResolved(emailOrToken, emailToUse);
-        });
-      }
-    } else {
-      // We received an email, continue to UniversalOnboarding platform connectors
-      console.log('📧 OnairosSignInButton: Received email, opening UniversalOnboarding platform connectors');
-      setUserEmail(emailOrToken);
-      setShowEmailModal(false);
-      setShowOnboardingModal(true);
-      console.log('📧 OnairosSignInButton: UniversalOnboarding modal should now be visible');
-    }
-  }, [onResolved, userEmail]);
-
-  const handleEmailCancel = useCallback(() => {
-    setShowEmailModal(false);
-    if (onRejection) {
-      onRejection('User closed email sign-in');
-    }
-  }, [onRejection]);
-
-  const handleOnboardingComplete = useCallback((token: string, email?: string) => {
-    // Use setTimeout to prevent state updates during component unmount
-    setTimeout(() => {
-      setShowOnboardingModal(false);
-      if (onResolved) {
-        onResolved(token, email || userEmail);
-      }
-    }, 16);
-  }, [onResolved, userEmail]);
-
-  const handleOnboardingCancel = useCallback(() => {
-    // Use setTimeout to prevent state updates during component unmount
-    setTimeout(() => {
-      setShowOnboardingModal(false);
-      if (onRejection) {
-        onRejection('User closed onboarding');
-      }
-    }, 16);
-  }, [onRejection]);
-
-  return (
-    <View style={styles.container}>
-      <TouchableOpacity
-        style={[
-          styles.button,
-          { width: buttonWidth, height: buttonHeight, backgroundColor: color },
-        ]}
-        onPress={() => {
-          triggerHaptic(HapticType.BUTTON_PRESS);
-          setShowEmailModal(true);
-        }}
-        activeOpacity={0.85}
-      >
-        <View style={styles.contentRow}>
-          <Image
-            source={require('../assets/images/onairos_logo.png')}
-            style={styles.logo}
-            resizeMode="contain"
-            accessibilityLabel="Onairos logo"
-          />
-          <Text style={[styles.buttonText, { color: textColor }]}>Sign in with Onairos</Text>
-        </View>
-      </TouchableOpacity>
-      <TrainingModal
-        visible={showEmailModal}
-        onCancel={handleEmailCancel}
-        onComplete={handleEmailComplete}
-        autoFocusEmailInput={autoFocusEmailInput}
-        isPrimaryAuth={true}
-      />
-      <UniversalOnboarding
-        visible={showOnboardingModal}
-        onClose={handleOnboardingCancel}
-        onComplete={handleOnboardingComplete}
-        AppName={AppName}
-        primaryAuthOnly={false}
-        requestData={{
-          Small: { type: "Small", descriptions: "Basic tier", reward: "1" },
-          Medium: { type: "Medium", descriptions: "Standard tier", reward: "2" },
-          Large: { type: "Large", descriptions: "Premium tier", reward: "3" }
-        }}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    borderRadius: 24,
-    justifyContent: 'center',
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 2,
-    marginVertical: 8,
-  },
-  contentRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  logo: {
-    width: 26,
-    height: 26,
-    marginRight: 10,
-  },
-  buttonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  container: {
-    // Add any necessary styles for the container
-  },
-});
+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';
+
+interface OnairosSignInButtonProps {
+  AppName: string;
+  buttonWidth?: number;
+  buttonHeight?: number;
+  color?: string;
+  textColor?: string;
+  onResolved?: (token: string, email?: string) => void;
+  onRejection?: (error: any) => void;
+  autoFocusEmailInput?: boolean;
+}
+
+export const OnairosSignInButton: React.FC<OnairosSignInButtonProps> = ({
+  AppName,
+  buttonWidth = 280,
+  buttonHeight = 44,
+  color = '#D4A536',
+  textColor = '#000',
+  onResolved,
+  onRejection,
+  autoFocusEmailInput = true,
+}) => {
+  const [showWelcomeScreen, setShowWelcomeScreen] = useState(false);
+  const [userEmail, setUserEmail] = useState<string>('');
+
+  const handleWelcomeComplete = useCallback((token: string, email?: string) => {
+    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) {
+      // 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, userEmail]);
+
+  const handleWelcomeCancel = useCallback(() => {
+    setShowWelcomeScreen(false);
+    if (onRejection) {
+      onRejection('User closed welcome screen');
+    }
+  }, [onRejection]);
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        style={[
+          styles.button,
+          { width: buttonWidth, height: buttonHeight, backgroundColor: color },
+        ]}
+        onPress={() => {
+          triggerHaptic(HapticType.BUTTON_PRESS);
+          setShowWelcomeScreen(true);
+        }}
+        activeOpacity={0.85}
+      >
+        <View style={styles.contentRow}>
+          <Image
+            source={require('../assets/images/onairos_logo.png')}
+            style={styles.logo}
+            resizeMode="contain"
+            accessibilityLabel="Onairos logo"
+          />
+          <Text style={[styles.buttonText, { color: textColor }]}>Sign in with Onairos</Text>
+        </View>
+      </TouchableOpacity>
+      <WelcomeScreen
+        visible={showWelcomeScreen}
+        onClose={handleWelcomeCancel}
+        onComplete={handleWelcomeComplete}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+    marginVertical: 8,
+  },
+  contentRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logo: {
+    width: 26,
+    height: 26,
+    marginRight: 10,
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  container: {
+    // Add any necessary styles for the container
+  },
+});