@onairos/react-native 3.0.64 → 3.0.66

package/src/components/UniversalOnboarding.tsx

@@ -22,12 +22,12 @@ 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 { DataRequestScreen } from './DataRequestScreen';
 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 type { UniversalOnboardingProps, ConnectionStatus } from '../types';
+import type { UniversalOnboardingProps, ConnectionStatus, TestModeOptions } from '../types';
 
 // Optional Opacity SDK imports with error handling
 let opacityInit: any = null;
@@ -80,7 +80,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const [email, setEmail] = useState<string>('');
   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 and code inputs
@@ -88,14 +88,34 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const isMountedRef = useRef<boolean>(true);
   const codeInputRefs = useRef<Array<TextInput | null>>([]);
 
+  // Add state for showing additional platforms
+  const [showAllPlatforms, setShowAllPlatforms] = useState<boolean>(false);
+
+
+  // Parse test mode options
+  const testModeOptions = typeof test === 'object' ? test : {};
+  const isTestMode = test === true || (typeof test === 'object' && test !== null);
+  const showTestControls = (debug || isTestMode) && requestData;
+  
+  // Simple 2-flow system
+  const isExistingUserFlow = testModeOptions.existingUser || false;
+  const isNewUserFlow = testModeOptions.newUser || false;
+
   const platforms = [
     { id: 'instagram', name: 'Instagram', icon: require('../assets/images/instagram.png') },
     { id: 'youtube', name: 'YouTube', icon: require('../assets/images/youtube.png') },
+    { id: 'email', name: 'Gmail', icon: require('../assets/images/email.png') },
     { id: 'reddit', name: 'Reddit', icon: require('../assets/images/reddit.png') },
     { id: 'pinterest', name: 'Pinterest', icon: require('../assets/images/pinterest.png') },
-    { id: 'email', name: 'Gmail', icon: require('../assets/images/email.png') },
   ];
 
+  // Define primary platforms (shown by default)
+  const primaryPlatforms = platforms.slice(0, 3); // Instagram, YouTube, Gmail
+  const additionalPlatforms = platforms.slice(3); // Reddit, Pinterest
+
+  // Get platforms to display based on showAllPlatforms state
+  const platformsToDisplay = showAllPlatforms ? platforms : primaryPlatforms;
+
   const {
     connectPlatform,
     disconnectPlatform,
@@ -570,21 +590,41 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         throw new Error('Email verification service not available');
       }
       
+      // Test Mode: Use specific flows
+      if (isTestMode) {
+        console.log('🧪 Test mode verification - simulating success');
+        
+        if (isExistingUserFlow) {
+          // Flow 1: Existing User → Data Request → Close (return API URL)
+          console.log('🧪 Test Flow 1: Existing User → Show Data Request');
+          setIsExistingUser(true);
+          setStep('dataRequest');
+          return;
+        } else if (isNewUserFlow) {
+          // Flow 2: New User → Platform Connect → PIN → Training
+          console.log('🧪 Test Flow 2: New User → Platform Connect');
+          const emailPrefix = email.trim().split('@')[0] || 'TestUser';
+          setUsername(emailPrefix);
+          setStep('connect');
+          return;
+        }
+      }
+
+      // Real API call (production)
       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
+                 // Check if user exists in backend
+         const existingUser = (result as any).existingUser || false;
         setIsExistingUser(existingUser);
         
         if (existingUser) {
-          console.log('Existing user detected, showing data request modal');
-          setShowDataRequestModal(true);
+          console.log('👤 Existing user detected, showing data request screen');
+          setStep('dataRequest');
         } else {
-          console.log('New user, proceeding to platform connection');
+          console.log('🆕 New user, proceeding to platform connection');
           // Safely set username from email prefix
           try {
             const emailPrefix = email.trim().split('@')[0];
@@ -675,7 +715,6 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
 
   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', {
@@ -688,28 +727,27 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
 
   const handleDataRequestDecline = useCallback(() => {
     console.log('Data request declined');
-    setShowDataRequestModal(false);
     handleClose();
   }, [handleClose]);
 
   const canProceedToPin = useCallback(() => {
-    // For testing, allow proceeding without any platforms connected
-    if (debug || test) {
-      console.log('🧪 Testing mode: Allowing proceed without platform connections');
+    // Test mode: Always allow proceeding (simulates platform connections)
+    if (isTestMode || testModeOptions.skipRealConnections) {
+      console.log('🧪 Test mode: Allowing proceed without real platform connections');
       return true;
     }
     
-    // Check if at least one platform is toggled on
+    // Production: Check if at least one platform is connected
     const hasPlatformConnected = Object.values(platformToggles).some(value => value === true);
     
-    // If auto mode is enabled and partner is not "couplebible", require inferenceData
+    // Auto mode validation
     if (auto && partner !== 'couplebible' && !inferenceData) {
       console.warn('Auto mode enabled but no inference data provided (and partner is not couplebible)');
       return false;
     }
     
     return hasPlatformConnected;
-  }, [platformToggles, auto, partner, inferenceData, debug, test]);
+  }, [platformToggles, auto, partner, inferenceData, isTestMode, testModeOptions]);
 
   const handleProceed = () => {
     console.log('Proceeding to next step');
@@ -931,7 +969,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
 
                       {/* Platform connection options */}
                       <View style={styles.platformsContainer}>
-                        {platforms.map((platform) => (
+                        {platformsToDisplay.map((platform) => (
                           <TouchableOpacity 
                             key={platform.id} 
                             style={styles.platformItem}
@@ -964,7 +1002,71 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                             )}
                           </TouchableOpacity>
                         ))}
+                        
+                        {/* Show more/less platforms button */}
+                        {additionalPlatforms.length > 0 && (
+                          <TouchableOpacity 
+                            style={styles.expandButton}
+                            onPress={() => setShowAllPlatforms(!showAllPlatforms)}
+                          >
+                            <Icon 
+                              name={showAllPlatforms ? "expand_less" : "add"} 
+                              size={24} 
+                              color={COLORS.primary} 
+                            />
+                            <Text style={styles.expandButtonText}>
+                              {showAllPlatforms 
+                                ? "Show Less" 
+                                : `${additionalPlatforms.length} More Connectors`
+                              }
+                            </Text>
+                          </TouchableOpacity>
+                        )}
                       </View>
+
+                      {/* Test mode controls - Simple 2-flow system */}
+                      {showTestControls && (
+                        <View style={styles.testModeContainer}>
+                          <Text style={styles.testModeTitle}>🧪 Test Mode - 2 Main Flows</Text>
+                          
+                                                     <TouchableOpacity 
+                             style={styles.testExistingUserButton}
+                             onPress={() => {
+                               // Flow 1: Existing User
+                               setIsExistingUser(true);
+                               setStep('dataRequest');
+                             }}
+                           >
+                            <Icon name="person" size={20} color="#28a745" />
+                            <Text style={styles.testExistingUserButtonText}>
+                              Flow 1: Existing User (Email → Code → Data Request → Close)
+                            </Text>
+                          </TouchableOpacity>
+
+                          <TouchableOpacity 
+                            style={styles.testSkipToTrainingButton}
+                            onPress={() => {
+                              // Flow 2: New User - Skip to connect step
+                              setStep('connect');
+                            }}
+                          >
+                            <Icon name="person-add" size={20} color="#17a2b8" />
+                            <Text style={styles.testSkipToTrainingButtonText}>
+                              Flow 2: New User (Connect → PIN → Training)
+                            </Text>
+                          </TouchableOpacity>
+
+                          <TouchableOpacity 
+                            style={styles.testDataRequestButton}
+                            onPress={() => setStep('dataRequest')}
+                          >
+                            <Icon name="preview" size={20} color={COLORS.primary} />
+                            <Text style={styles.testDataRequestButtonText}>
+                              Preview Data Request Screen
+                            </Text>
+                          </TouchableOpacity>
+                        </View>
+                      )}
                     </ScrollView>
 
                     <View style={styles.footer}>
@@ -1038,6 +1140,17 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                     onComplete={handleTrainingComplete}
                     modelKey="onairosTrainingModel"
                     username={username}
+                    test={isTestMode}
+                  />
+                )}
+
+                {step === 'dataRequest' && (
+                  <DataRequestScreen
+                    onAccept={handleDataRequestAccept}
+                    onDecline={handleDataRequestDecline}
+                    requestData={requestData || {}}
+                    AppName={AppName}
+                    appIcon={appIcon}
                   />
                 )}
                 
@@ -1062,16 +1175,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         </View>
       </TouchableWithoutFeedback>
       
-      {/* Data Request Modal for existing users */}
-      {showDataRequestModal && requestData && (
-        <DataRequestModal
-          visible={showDataRequestModal}
-          onClose={handleDataRequestDecline}
-          onAccept={handleDataRequestAccept}
-          requestData={requestData}
-          AppName={AppName}
-        />
-      )}
+
     </Modal>
   );
 };
@@ -1420,4 +1524,89 @@ const styles = StyleSheet.create({
     color: '#666',
     fontSize: 16,
   },
+  // Expand button styles
+  expandButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 12,
+    backgroundColor: '#f8f9fa',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+    marginTop: 8,
+  },
+  expandButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: COLORS.primary,
+    marginLeft: 8,
+  },
+  // Test mode styles
+  testModeContainer: {
+    marginTop: 16,
+    paddingHorizontal: 16,
+    backgroundColor: '#f8f9fa',
+    borderRadius: 12,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+  },
+  testModeTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#495057',
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  testDataRequestButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 12,
+    backgroundColor: '#fff3cd',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#ffeaa7',
+    marginBottom: 8,
+  },
+  testDataRequestButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#856404',
+    marginLeft: 8,
+  },
+  testExistingUserButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 12,
+    backgroundColor: '#d4edda',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#c3e6cb',
+    marginBottom: 8,
+  },
+  testExistingUserButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#155724',
+    marginLeft: 8,
+  },
+  testSkipToTrainingButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 12,
+    backgroundColor: '#d1ecf1',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#bee5eb',
+  },
+  testSkipToTrainingButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#0c5460',
+    marginLeft: 8,
+  },
 });

package/src/index.ts

@@ -110,6 +110,7 @@ export { PlatformList } from './components/PlatformList';
 export { PinInput } from './components/PinInput';
 export { TrainingModal } from './components/TrainingModal';
 export { EmailVerificationModal } from './components/EmailVerificationModal';
+export { DataRequestScreen } from './components/DataRequestScreen';
 export { Overlay } from './components/Overlay';
 export { UniversalOnboarding } from './components/UniversalOnboarding';
 export { OnairosButton } from './components/OnairosButton';

package/src/types/index.d.ts

@@ -90,9 +90,14 @@ declare module '@onairos/react-native' {
   }
 
   export interface TrainingModalProps {
+    visible: boolean;
     progress: number;
     eta: string;
     onCancel: () => void;
+    onComplete?: () => void;
+    modelKey?: string;
+    username?: string;
+    test?: boolean; // Enable test mode for simulated training
   }
 
   export interface OAuthWebViewProps {

package/src/types/index.ts

@@ -33,6 +33,16 @@ export interface OnairosButtonProps {
   darkMode?: boolean;
 }
 
+export interface TestModeOptions {
+  // Simple 2-flow system
+  existingUser?: boolean; // Flow 1: Email → Code → Data Request → Close (return API URL)
+  newUser?: boolean; // Flow 2: Email → Code → Platform Connect → PIN → Training → Complete
+  
+  // Optional tweaks
+  fastTraining?: boolean; // Speed up training simulation
+  skipRealConnections?: boolean; // Allow mock platform connections
+}
+
 export interface UniversalOnboardingProps {
   visible: boolean;
   onClose: () => void;
@@ -48,7 +58,7 @@ export interface UniversalOnboardingProps {
   onComplete: (apiUrl: string, token: string, userData: any) => void;
   preferredPlatform?: string;
   debug?: boolean;
-  test?: boolean;
+  test?: boolean | TestModeOptions; // Enhanced test mode with options
   embedd?: boolean;
 }
 
@@ -83,6 +93,7 @@ export interface TrainingModalProps {
   onComplete?: () => void;
   modelKey?: string;
   username?: string;
+  test?: boolean; // Enable test mode for simulated training
 }
 
 export interface OAuthWebViewProps {

package/src/types.ts

@@ -10,6 +10,16 @@ export interface DataRequest {
   reward: string;
 }
 
+export interface TestModeOptions {
+  // Simple 2-flow system
+  existingUser?: boolean; // Flow 1: Email → Code → Data Request → Close (return API URL)
+  newUser?: boolean; // Flow 2: Email → Code → Platform Connect → PIN → Training → Complete
+  
+  // Optional tweaks
+  fastTraining?: boolean; // Speed up training simulation
+  skipRealConnections?: boolean; // Allow mock platform connections
+}
+
 export interface UniversalOnboardingProps {
   visible: boolean;
   onClose: () => void;
@@ -29,7 +39,7 @@ export interface UniversalOnboardingProps {
   onComplete: (apiUrl: string, token: string, data: any) => void;
   embedd?: boolean;
   debug?: boolean;
-  test?: boolean;
+  test?: boolean | TestModeOptions; // Enhanced test mode with options
   buttonType?: 'default' | 'pill';
   buttonForm?: 'signup' | 'login';
   preferredPlatform?: string;
@@ -120,6 +130,7 @@ export interface TrainingModalProps {
   onComplete?: () => void;
   modelKey?: string;
   username?: string;
+  test?: boolean; // Enable test mode for simulated training
 }
 
 export interface OAuthWebViewProps {