@onairos/react-native 3.1.11 → 3.1.13

package/src/components/OnairosSignInButton.tsx

@@ -0,0 +1,166 @@
+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
+  },
+});