@onairos/react-native 3.0.54 → 3.0.56

package/src/components/UniversalOnboarding.tsx

@@ -22,11 +22,11 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import { PlatformList } from './PlatformList';
 import { PinInput } from './PinInput';
 import { TrainingModal } from './TrainingModal';
+import { DataRequestModal } from './DataRequestModal';
 import { OAuthWebView } from './onboarding/OAuthWebView';
 import { useConnections } from '../hooks/useConnections';
 import { COLORS, DEEP_LINK_CONFIG } from '../constants';
 import { initiateOAuth, initiateNativeAuth, hasNativeSDK, isOAuthCallback, testApiConnectivity, handleOAuthCallbackUrl, refreshYouTubeTokens, requestEmailVerification, verifyEmailCode, checkEmailVerificationStatus, disconnectPlatform } from '../services/platformAuthService';
-import { EmailVerificationModal } from './EmailVerificationModal';
 import type { UniversalOnboardingProps, ConnectionStatus } from '../types';
 
 // Optional Opacity SDK imports with error handling
@@ -61,7 +61,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   auto = false,
   partner,
 }) => {
-  const [step, setStep] = useState<'email' | 'connect' | 'pin' | 'training' | 'oauth' | 'success'>('email');
+  const [step, setStep] = useState<'email' | 'verify' | 'dataRequest' | 'connect' | 'pin' | 'training' | 'oauth' | 'success'>('email');
   const [connections, setConnections] = useState<ConnectionStatus>({});
   const [pin, setPin] = useState<string>('');
   const [selectedTier, setSelectedTier] = useState<'Small' | 'Medium' | 'Large'>('Medium');
@@ -77,7 +77,10 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const [isConnectingPlatform, setIsConnectingPlatform] = useState<boolean>(false);
   const [showLoginWebView, setShowLoginWebView] = useState<boolean>(false);
   const [email, setEmail] = useState<string>('');
-  const [showEmailVerification, setShowEmailVerification] = useState<boolean>(false);
+  const [verificationCode, setVerificationCode] = useState<string>('');
+  const [isVerifyingCode, setIsVerifyingCode] = useState<boolean>(false);
+  const [showDataRequestModal, setShowDataRequestModal] = useState<boolean>(false);
+  const [isExistingUser, setIsExistingUser] = useState<boolean>(false);
   
   // Add refs for cleanup
   const successTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -237,23 +240,12 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         
         console.log('✅ API connectivity confirmed');
         
-        // Instagram: Use Opacity SDK exclusively (if available)
+        // Instagram: Use Opacity SDK exclusively
         if (platformId === 'instagram') {
           // Check if Opacity SDK is available
           if (!opacityInit || !OpacityEnvironment || !opacityGet) {
-            console.warn('⚠️ Opacity SDK not available, falling back to OAuth for Instagram');
-            // Fall back to OAuth flow for Instagram
-            const oauthUrl = await initiateOAuth(platformId, username, AppName);
-            
-            if (oauthUrl) {
-              console.log(`✅ Received OAuth URL for ${platformId}:`, oauthUrl);
-              setCurrentPlatform(platformId);
-              setOauthUrl(oauthUrl);
-              setStep('oauth');
-            } else {
-              throw new Error(`Failed to get authorization URL for ${platformId}. Please try again.`);
-            }
-            return;
+            console.error('❌ Opacity SDK not available for Instagram');
+            throw new Error('Instagram connection requires the Opacity SDK. Please ensure @opacity-labs/react-native-opacity is properly installed and configured.');
           }
           
           console.log('🔌 Initializing Opacity SDK for Instagram...');
@@ -461,7 +453,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   }, []);
 
   // Function to handle email submission
-  const handleEmailSubmit = useCallback(() => {
+  const handleEmailSubmit = useCallback(async () => {
     if (!email.trim()) {
       Alert.alert('Error', 'Please enter your email address');
       return;
@@ -475,34 +467,60 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     }
     
     console.log('📧 Email submitted:', email.trim());
-    setShowEmailVerification(true);
+    
+    // Request verification code
+    try {
+      const result = await requestEmailVerification(email.trim());
+      if (result.success) {
+        console.log('✅ Verification code requested');
+        setStep('verify');
+      } else {
+        Alert.alert('Error', result.error || 'Failed to send verification code');
+      }
+    } catch (error) {
+      console.error('❌ Error requesting verification:', error);
+      Alert.alert('Error', 'Failed to send verification code');
+    }
   }, [email]);
 
-  // Function to handle email verification completion
-  const handleEmailVerificationComplete = useCallback((verifiedEmail: string, isExistingUser: boolean) => {
-    console.log('✅ Email verification completed:', { verifiedEmail, isExistingUser });
-    setShowEmailVerification(false);
+  // Function to handle verification code submission
+  const handleVerificationSubmit = useCallback(async () => {
+    if (!verificationCode.trim() || verificationCode.trim().length !== 6) {
+      Alert.alert('Error', 'Please enter a 6-digit verification code');
+      return;
+    }
     
-    if (isExistingUser) {
-      console.log('Existing user detected, skipping onboarding');
-      onComplete('https://api2.onairos.uk', 'existing-session-token', {
-        existingAccount: true,
-        email: verifiedEmail,
-        skipOnboarding: true,
-      });
-    } else {
-      console.log('New user, proceeding to platform connection');
-      setUsername(verifiedEmail.split('@')[0]); // Use email prefix as username
-      setStep('connect');
+    setIsVerifyingCode(true);
+    
+    try {
+      const result = await verifyEmailCode(email.trim(), verificationCode.trim());
+      
+      if (result.success) {
+        console.log('✅ Email verification successful');
+        
+        // For now, always treat as new users for testing (can be updated later)
+        // In production, this would check if user exists in database
+        const existingUser = false; // TODO: Check backend for existing user
+        setIsExistingUser(existingUser);
+        
+        if (existingUser) {
+          console.log('Existing user detected, showing data request modal');
+          setShowDataRequestModal(true);
+        } else {
+          console.log('New user, proceeding to platform connection');
+          setUsername(email.split('@')[0]); // Use email prefix as username
+          setStep('connect');
+        }
+      } else {
+        Alert.alert('Verification Failed', result.error || 'Invalid verification code');
+      }
+    } catch (error) {
+      console.error('❌ Error verifying code:', error);
+      Alert.alert('Error', 'Failed to verify code');
+    } finally {
+      setIsVerifyingCode(false);
     }
-  }, [onComplete]);
-
-  // Function to handle email verification failure
-  const handleEmailVerificationFailed = useCallback((error: string) => {
-    console.error('❌ Email verification failed:', error);
-    setShowEmailVerification(false);
-    Alert.alert('Verification Failed', error);
-  }, []);
+  }, [email, verificationCode, onComplete]);
 
   const handlePinSubmit = useCallback(async (userPin: string) => {
     setPin(userPin);
@@ -537,39 +555,54 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     } catch (error) {
       console.error('Failed to save session data:', error);
     }
+  }, [connections, selectedTier, platformToggles, username, AppName, auto, inferenceData, partner]);
+
+  const handleTrainingComplete = useCallback(() => {
+    console.log('🎉 Training completed successfully');
     
-    // Simulate training progress over 10 seconds
-    let progress = 0;
-    const interval = setInterval(() => {
-      progress += 0.1; // 10% every second for 10 seconds total
-      setTraining({
-        progress,
-        eta: `${Math.round((1 - progress) * 10)} seconds remaining`,
-      });
-      if (progress >= 1) {
-        clearInterval(interval);
-        
-        // Prepare completion data
-        const completionData = {
-          pin: userPin,
-          connections,
-          platformToggles,
-          selectedTier,
-          tierData: requestData?.[selectedTier],
-          sessionSaved: true,
-          // Add inference data if auto mode is enabled
-          ...(auto && inferenceData && { inferenceData }),
-          // Add partner info for special partners
-          ...(partner && { partner: partner === 'couplebible' ? 'CoupleBible' : partner }),
-        };
-        
-        console.log('Completion data prepared:', completionData);
-        
-        // Close overlay and call the original onComplete callback
-        onComplete('https://api2.onairos.uk', 'dummy-token', completionData);
-      }
-    }, 1000); // Update every 1 second
-  }, [connections, onComplete, selectedTier, requestData, platformToggles, username, AppName, auto, inferenceData, partner]);
+    // Prepare completion data
+    const completionData = {
+      pin,
+      connections,
+      platformToggles,
+      selectedTier,
+      tierData: requestData?.[selectedTier],
+      sessionSaved: true,
+      // Add inference data if auto mode is enabled
+      ...(auto && inferenceData && { inferenceData }),
+      // Add partner info for special partners
+      ...(partner && { partner: partner === 'couplebible' ? 'CoupleBible' : partner }),
+    };
+    
+    console.log('Completion data prepared:', completionData);
+    
+    // Close the modal first
+    handleClose();
+    
+    // Then call the completion callback
+    setTimeout(() => {
+      onComplete('https://api2.onairos.uk', 'dummy-token', completionData);
+    }, 100);
+  }, [pin, connections, platformToggles, selectedTier, requestData, auto, inferenceData, partner, handleClose, onComplete]);
+
+  const handleDataRequestAccept = useCallback(() => {
+    console.log('Data request accepted for existing user');
+    setShowDataRequestModal(false);
+    
+    // Complete onboarding for existing user
+    onComplete('https://api2.onairos.uk', 'existing-session-token', {
+      existingAccount: true,
+      email: email.trim(),
+      dataRequestAccepted: true,
+      requestData,
+    });
+  }, [email, onComplete, requestData]);
+
+  const handleDataRequestDecline = useCallback(() => {
+    console.log('Data request declined');
+    setShowDataRequestModal(false);
+    handleClose();
+  }, [handleClose]);
 
   const canProceedToPin = useCallback(() => {
     // Check if at least one platform is toggled on
@@ -665,6 +698,81 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                   </View>
                 )}
 
+                {step === 'verify' && (
+                  <View style={styles.emailInputContainer}>
+                    <View style={styles.emailHeader}>
+                      <View style={styles.onairosIcon}>
+                        <Image 
+                          source={require('../assets/images/onairos_logo.png')} 
+                          style={styles.onairosLogo} 
+                          resizeMode="contain"
+                        />
+                      </View>
+                      <Text style={styles.emailTitle}>Enter Verification Code</Text>
+                      <Text style={styles.emailSubtitle}>
+                        We've sent a 6-digit code to {email}
+                      </Text>
+                      <Text style={styles.developmentNote}>
+                        🔍 Development Mode: Any 6-digit code will work
+                      </Text>
+                    </View>
+                    
+                    <View style={styles.emailInputSection}>
+                      <View style={styles.codeInputContainer}>
+                        {[0, 1, 2, 3, 4, 5].map((index) => (
+                          <TextInput
+                            key={index}
+                            style={[
+                              styles.codeDigit,
+                              verificationCode.length === index && styles.codeDigitActive
+                            ]}
+                            value={verificationCode[index] || ''}
+                            onChangeText={(text) => {
+                              if (text.length <= 1 && /^\d*$/.test(text)) {
+                                const newCode = verificationCode.split('');
+                                newCode[index] = text;
+                                const updatedCode = newCode.join('').slice(0, 6);
+                                setVerificationCode(updatedCode);
+                                
+                                // Auto-focus next input
+                                if (text && index < 5) {
+                                  // Focus next input (would need refs for actual implementation)
+                                }
+                              }
+                            }}
+                            keyboardType="number-pad"
+                            maxLength={1}
+                            textAlign="center"
+                            autoFocus={index === 0}
+                          />
+                        ))}
+                      </View>
+                      
+                      <TouchableOpacity
+                        style={[
+                          styles.emailSubmitButton, 
+                          (verificationCode.length !== 6 || isVerifyingCode) && styles.emailSubmitButtonDisabled
+                        ]}
+                        onPress={handleVerificationSubmit}
+                        disabled={verificationCode.length !== 6 || isVerifyingCode}
+                      >
+                        {isVerifyingCode ? (
+                          <ActivityIndicator size="small" color="#fff" />
+                        ) : (
+                          <Text style={styles.emailSubmitButtonText}>Verify</Text>
+                        )}
+                      </TouchableOpacity>
+                      
+                      <TouchableOpacity
+                        style={styles.backButton}
+                        onPress={() => setStep('email')}
+                      >
+                        <Text style={styles.backButtonText}>← Back to email</Text>
+                      </TouchableOpacity>
+                    </View>
+                  </View>
+                )}
+
                 {step === 'connect' && (
                   <>
                     {/* Header with app icon and arrow to Onairos icon */}
@@ -812,15 +920,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                     progress={training.progress}
                     eta={training.eta}
                     onCancel={handleClose}
-                    onComplete={() => {
-                      onComplete('https://api2.onairos.uk', 'dummy-token', {
-                        pin,
-                        connections,
-                        platformToggles,
-                        selectedTier,
-                        tierData: requestData?.[selectedTier],
-                      });
-                    }}
+                    onComplete={handleTrainingComplete}
                     modelKey="onairosTrainingModel"
                     username={username}
                   />
@@ -839,22 +939,38 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                   />
                 )}
                 
-                {/* Email Verification Modal */}
-                {showEmailVerification && (
-                  <EmailVerificationModal
-                    visible={showEmailVerification}
-                    email={email.trim()}
-                    onClose={() => setShowEmailVerification(false)}
-                    onVerificationComplete={handleEmailVerificationComplete}
-                    onVerificationFailed={handleEmailVerificationFailed}
-                  />
-                )}
+
 
               </SafeAreaView>
             </Animated.View>
           </TouchableWithoutFeedback>
         </View>
       </TouchableWithoutFeedback>
+      
+      {/* Data Request Modal for existing users */}
+      {showDataRequestModal && requestData && (
+        <DataRequestModal
+          visible={showDataRequestModal}
+          onClose={handleDataRequestDecline}
+          onAccept={handleDataRequestAccept}
+          requestData={{
+            // Convert DataTier format to expected format
+            Small: {
+              description: requestData.Small?.descriptions || 'Basic data access',
+              type: requestData.Small?.type || 'basic'
+            },
+            Medium: {
+              description: requestData.Medium?.descriptions || 'Standard data access',
+              type: requestData.Medium?.type || 'standard'
+            },
+            Large: {
+              description: requestData.Large?.descriptions || 'Full data access',
+              type: requestData.Large?.type || 'full'
+            }
+          }}
+          AppName={AppName}
+        />
+      )}
     </Modal>
   );
 };
@@ -1146,4 +1262,42 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '600',
   },
+  // Verification code styles
+  developmentNote: {
+    fontSize: 14,
+    color: '#FF9800',
+    textAlign: 'center',
+    marginTop: 8,
+    backgroundColor: '#FFF3E0',
+    padding: 8,
+    borderRadius: 4,
+  },
+  codeInputContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 24,
+    paddingHorizontal: 20,
+  },
+  codeDigit: {
+    width: 45,
+    height: 55,
+    borderWidth: 2,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#000',
+    backgroundColor: '#fff',
+  },
+  codeDigitActive: {
+    borderColor: '#4CAF50',
+  },
+  backButton: {
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  backButtonText: {
+    color: '#666',
+    fontSize: 16,
+  },
 });

package/src/services/platformAuthService.ts

@@ -220,23 +220,51 @@ export const initiateNativeAuth = async (platform: string, username?: string): P
           throw new Error('Google Sign-In SDK not installed. Please install @react-native-google-signin/google-signin');
         }
         
-        // Configure Google Sign-In
-        await GoogleSignin.configure({
-        webClientId: '1030678346906-lovkuds2ouqmoc8eu5qpo98spa6edv4o.apps.googleusercontent.com', // Replace with your web client ID
-        iosClientId: '1030678346906-lovkuds2ouqmoc8eu5qpo98spa6edv4o.apps.googleusercontent.com', // Replace with your iOS client ID
-          scopes: ['https://www.googleapis.com/auth/youtube.readonly'],
-        offlineAccess: true, // CRITICAL: This ensures we get refresh tokens
-          hostedDomain: '',
-        forceCodeForRefreshToken: true, // CRITICAL: Force refresh token on first sign-in
-        accountName: '', // Clear to avoid conflicts
-        });
+        // Configure Google Sign-In with better error handling
+        try {
+          await GoogleSignin.configure({
+            webClientId: '1030678346906-lovkuds2ouqmoc8eu5qpo98spa6edv4o.apps.googleusercontent.com',
+            iosClientId: '1030678346906-lovkuds2ouqmoc8eu5qpo98spa6edv4o.apps.googleusercontent.com',
+            scopes: ['https://www.googleapis.com/auth/youtube.readonly'],
+            offlineAccess: true,
+            hostedDomain: '',
+            forceCodeForRefreshToken: true,
+            accountName: '',
+          });
+          console.log('✅ Google Sign-In configured successfully');
+        } catch (configError) {
+          console.error('❌ Google Sign-In configuration failed:', configError);
+          throw new Error(`Google Sign-In configuration failed: ${configError.message || configError}`);
+        }
         
-      // Check if Google Play Services are available
-        await GoogleSignin.hasPlayServices();
+        // Check if Google Play Services are available (Android only)
+        try {
+          await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
+          console.log('✅ Google Play Services available');
+        } catch (playServicesError) {
+          console.error('❌ Google Play Services error:', playServicesError);
+          throw new Error(`Google Play Services not available: ${playServicesError.message || playServicesError}`);
+        }
         
-      // Sign in with Google
-        const userInfo = await GoogleSignin.signIn();
-      console.log('✅ Google Sign-In successful:', userInfo.user?.email);
+        // Sign in with Google
+        let userInfo;
+        try {
+          userInfo = await GoogleSignin.signIn();
+          console.log('✅ Google Sign-In successful:', userInfo.user?.email);
+        } catch (signInError) {
+          console.error('❌ Google Sign-In failed:', signInError);
+          
+          // Handle specific error codes
+          if (signInError.code === statusCodes.SIGN_IN_CANCELLED) {
+            throw new Error('Google Sign-In was cancelled by user');
+          } else if (signInError.code === statusCodes.IN_PROGRESS) {
+            throw new Error('Google Sign-In already in progress');
+          } else if (signInError.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
+            throw new Error('Google Play Services not available or outdated');
+          } else {
+            throw new Error(`Google Sign-In failed: ${signInError.message || signInError}`);
+          }
+        }
         
       // Get access token for API calls
         const tokens = await GoogleSignin.getTokens();