@onairos/react-native 3.0.1 → 3.0.4

package/src/components/Overlay.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import {
   View,
   Text,
@@ -8,8 +8,9 @@ import {
   Alert,
   Platform,
   Dimensions,
+  Modal,
 } from 'react-native';
-import { BottomSheetModal, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import BottomSheet from '@gorhom/bottom-sheet';
 // import DeviceInfo from 'react-native-device-info';  // Comment out device info import
 import { COLORS } from '../constants';
 import { onairosApi } from '../api';
@@ -26,6 +27,8 @@ interface OverlayProps {
   username: string;
   modelKey: string;
   onResolved: (apiUrl: string, accessToken: string, loginDetails: any) => void;
+  appName?: string;
+  darkMode?: boolean;
 }
 
 export const Overlay: React.FC<OverlayProps> = ({
@@ -33,11 +36,14 @@ export const Overlay: React.FC<OverlayProps> = ({
   username,
   modelKey,
   onResolved,
+  appName = 'Your App',
+  darkMode = false,
 }) => {
   const [selections, setSelections] = useState<{ [key: string]: boolean }>({});
   const [details, setDetails] = useState<string>('');
-  const bottomSheetRef = useRef<BottomSheetModal>(null);
-  const snapPoints = ['60%']; // Set to 60% of screen height
+  const [visible, setVisible] = useState(true);
+  const bottomSheetRef = useRef<BottomSheet>(null);
+  const snapPoints = useRef(['80%']);
 
   useEffect(() => {
     // Initialize selection state
@@ -47,31 +53,41 @@ export const Overlay: React.FC<OverlayProps> = ({
     });
     setSelections(initialSelections);
     getDetails();
-    
-    // Present the bottom sheet when component mounts
-    setTimeout(() => {
-      bottomSheetRef.current?.present();
-    }, 100);
   }, []);
 
   const getDetails = async () => {
     try {
+      // In Expo or development, use mock data
+      if (__DEV__) {
+        setDetails('Development mode - mock account info');
+        return;
+      }
+      
       const response = await onairosApi.post('getAccountInfo', {
         Info: {
           username: username,
         },
       });
-      setDetails(response.AccountInfo);
+      // Handle response data properly based on API structure
+      if (response && response.data) {
+        const accountInfo = typeof response.data === 'object' && response.data.AccountInfo
+          ? response.data.AccountInfo
+          : `User: ${username}`;
+        setDetails(accountInfo);
+      } else {
+        setDetails(`User: ${username}`);
+      }
     } catch (e) {
       console.error('Error getting account info:', e);
+      setDetails(`User: ${username}`);
     }
   };
 
-  const closeOverlay = () => {
-    bottomSheetRef.current?.dismiss();
-  };
+  const closeOverlay = useCallback(() => {
+    setVisible(false);
+  }, []);
 
-  const confirmSelection = async () => {
+  const confirmSelection = useCallback(async () => {
     try {
       // Mock app identifier
       const appId = Platform.select({
@@ -80,8 +96,36 @@ export const Overlay: React.FC<OverlayProps> = ({
         default: 'unknown'
       });
 
-      const serverPublicKey = await getServerPublicKey();
-      const encryptedModelKey = encryptModelKey(serverPublicKey, modelKey);
+      // In development mode, use mock data
+      if (__DEV__) {
+        onResolved('https://api2.onairos.uk', 'mock-token', { 
+          username,
+          selections
+        });
+        closeOverlay();
+        return;
+      }
+
+      // Get server public key for encryption
+      let serverPublicKey = 'mock-key';
+      try {
+        const keyResponse = await onairosApi.get('public/key');
+        if (keyResponse && keyResponse.data && typeof keyResponse.data === 'object') {
+          serverPublicKey = keyResponse.data.publicKey || 'mock-key';
+        }
+      } catch (e) {
+        console.error('Error getting server public key:', e);
+      }
+
+      // Encrypt the model key - only if the function exists and server key is valid
+      let encryptedModelKey = modelKey;
+      if (typeof encryptModelKey === 'function' && serverPublicKey) {
+        try {
+          encryptedModelKey = encryptModelKey(serverPublicKey, modelKey);
+        } catch (e) {
+          console.error('Error encrypting model key:', e);
+        }
+      }
 
       const response = await onairosApi.post('getAPIUrlMobile', {
         Info: {
@@ -95,15 +139,35 @@ export const Overlay: React.FC<OverlayProps> = ({
         },
       });
 
-      if (response.apiUrl && response.token) {
-        onResolved(response.apiUrl, response.token, { username });
+      if (response.data?.apiUrl && response.data?.token) {
+        onResolved(response.data.apiUrl, response.data.token, { 
+          username,
+          selections
+        });
+        closeOverlay();
+      } else {
+        // If response doesn't have expected format, use fallbacks
+        onResolved('https://api2.onairos.uk', 'fallback-token', {
+          username,
+          selections
+        });
         closeOverlay();
       }
     } catch (e) {
       console.error('Error confirming selection:', e);
-      showErrorModal('Failed to confirm selection. Please try again.');
+      // In case of error, provide fallback (development mode)
+      if (__DEV__) {
+        onResolved('https://api2.onairos.uk', 'error-fallback-token', { 
+          username,
+          selections,
+          error: true
+        });
+        closeOverlay();
+      } else {
+        showErrorModal('Failed to confirm selection. Please try again.');
+      }
     }
-  };
+  }, [selections, username, modelKey, onResolved]);
 
   const showErrorModal = (errorMessage: string) => {
     Alert.alert('Notice', errorMessage, [{ text: 'OK' }]);
@@ -111,191 +175,292 @@ export const Overlay: React.FC<OverlayProps> = ({
 
   const selectedCount = Object.values(selections).filter(Boolean).length;
 
-  return (
-    <BottomSheetModal
-      ref={bottomSheetRef}
-      snapPoints={snapPoints}
-      handleIndicatorStyle={styles.handleIndicator}
-      backdropComponent={(props) => (
-        <BottomSheetBackdrop
-          {...props}
-          appearsOnIndex={0}
-          disappearsOnIndex={-1}
-          opacity={0.7}
-        />
-      )}
-      enablePanDownToClose={true}
-      keyboardBehavior="interactive"
-      keyboardBlurBehavior="restore"
-    >
-      <View style={styles.container}>
-        <View style={styles.header}>
-          <Text style={styles.headerTitle}>Onairos</Text>
-          <TouchableOpacity onPress={closeOverlay}>
-            <Text style={styles.closeButton}>×</Text>
-          </TouchableOpacity>
-          <Text style={styles.username}>{username}</Text>
+  // Render content of the bottom sheet
+  const renderContent = () => (
+    <View style={[styles.container, darkMode && styles.darkContainer]}>
+      <View style={[styles.header, darkMode && styles.darkHeader]}>
+        <View style={styles.headerContent}>
+          <View style={[styles.appIcon, darkMode && styles.darkAppIcon]}>
+            <Text style={[styles.appIconText, darkMode && styles.darkText]}>A</Text>
+          </View>
+          <Text style={[styles.arrow, darkMode && styles.darkArrow]}>→</Text>
+          <View style={[styles.onairosIcon, darkMode && styles.darkAppIcon]}>
+            <Text style={[styles.onairosIconText, darkMode && styles.darkText]}>O</Text>
+          </View>
         </View>
+        <Text style={[styles.appName, darkMode && styles.darkSubText]}>{appName}</Text>
+      </View>
 
-        <ScrollView style={styles.content}>
-          {Object.entries(data).map(([key, value]) => (
-            <View key={key} style={styles.card}>
-              <TouchableOpacity
-                style={styles.checkboxContainer}
-                onPress={() =>
-                  setSelections((prev) => ({
-                    ...prev,
-                    [key]: !prev[key],
-                  }))
-                }
-              >
-                <View
-                  style={[
-                    styles.checkbox,
-                    selections[key] && styles.checkboxSelected,
-                  ]}
-                />
-                <View style={styles.cardContent}>
-                  <Text style={styles.cardTitle}>{value.type} Insight</Text>
-                  <Text style={styles.cardDescription}>
-                    Description: {value.descriptions}
+      <Text style={[styles.privacyMessage, darkMode && styles.darkSubText]}>
+        No one will ever see your raw app data
+      </Text>
+
+      <ScrollView style={styles.content}>
+        {Object.entries(data).map(([key, value]) => (
+          <View key={key} style={[styles.card, darkMode && styles.darkCard]}>
+            <TouchableOpacity
+              style={styles.checkboxContainer}
+              onPress={() =>
+                setSelections((prev) => ({
+                  ...prev,
+                  [key]: !prev[key],
+                }))
+              }
+            >
+              <View
+                style={[
+                  styles.checkbox,
+                  selections[key] && styles.checkboxSelected,
+                  darkMode && styles.darkCheckbox,
+                ]}
+              />
+              <View style={styles.cardContent}>
+                <Text style={[styles.cardTitle, darkMode && styles.darkText]}>
+                  {value.type} Insight
+                </Text>
+                <Text style={[styles.cardDescription, darkMode && styles.darkSubText]}>
+                  {value.descriptions}
+                </Text>
+                {value.reward && (
+                  <Text style={[styles.cardReward, darkMode && styles.darkReward]}>
+                    Reward: {value.reward}
                   </Text>
-                  {value.reward && (
-                    <Text style={styles.cardReward}>
-                      Reward: {value.reward}
-                    </Text>
-                  )}
-                </View>
-              </TouchableOpacity>
-            </View>
-          ))}
-        </ScrollView>
+                )}
+              </View>
+            </TouchableOpacity>
+          </View>
+        ))}
+      </ScrollView>
 
-        <View style={styles.footer}>
-          <TouchableOpacity
-            style={styles.footerButton}
-            onPress={closeOverlay}
-          >
-            <Text style={styles.footerButtonText}>Cancel</Text>
-          </TouchableOpacity>
-          <Text style={styles.selectedCount}>Selected: {selectedCount}</Text>
-          <TouchableOpacity
-            style={styles.footerButton}
-            onPress={confirmSelection}
-          >
-            <Text style={styles.footerButtonText}>Confirm</Text>
-          </TouchableOpacity>
-        </View>
+      <View style={[styles.footer, darkMode && styles.darkFooter]}>
+        <TouchableOpacity
+          style={[styles.footerButtonCancel, darkMode && styles.darkFooterButton]}
+          onPress={closeOverlay}
+        >
+          <Text style={[styles.footerButtonText, darkMode && styles.darkSubText]}>Cancel</Text>
+        </TouchableOpacity>
+        <Text style={[styles.selectedCount, darkMode && styles.darkSubText]}>
+          Selected: {selectedCount}
+        </Text>
+        <TouchableOpacity
+          style={[styles.footerButtonConfirm, darkMode && styles.darkFooterButtonConfirm]}
+          onPress={confirmSelection}
+        >
+          <Text style={[styles.footerButtonTextConfirm, darkMode && styles.darkText]}>
+            Confirm
+          </Text>
+        </TouchableOpacity>
       </View>
-    </BottomSheetModal>
+    </View>
+  );
+
+  // Main component rendering
+  return (
+    <BottomSheet
+      ref={bottomSheetRef}
+      snapPoints={snapPoints.current}
+      enablePanDownToClose
+      onClose={closeOverlay}
+      backgroundStyle={darkMode ? styles.darkBackground : styles.lightBackground}
+      handleIndicatorStyle={darkMode ? styles.darkHandle : styles.lightHandle}
+    >
+      {renderContent()}
+    </BottomSheet>
   );
 };
 
-const { width: SCREEN_WIDTH } = Dimensions.get('window');
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: COLORS.white,
-    width: SCREEN_WIDTH,
+    backgroundColor: '#fff',
   },
-  handleIndicator: {
-    backgroundColor: '#999',
-    width: 40,
-    height: 5,
+  darkContainer: {
+    backgroundColor: '#1A1A1A',
   },
   header: {
+    padding: 24,
+    alignItems: 'center',
+  },
+  darkHeader: {
+    backgroundColor: '#1A1A1A',
+  },
+  headerContent: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 16,
-    backgroundColor: COLORS.primary,
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
+    justifyContent: 'center',
+    marginBottom: 16,
+  },
+  appIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 16,
+    backgroundColor: '#F5F5F5',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  headerTitle: {
+  darkAppIcon: {
+    backgroundColor: '#2A2A2A',
+  },
+  appIconText: {
+    fontSize: 24,
+    color: '#000',
+  },
+  darkText: {
+    color: '#fff',
+  },
+  arrow: {
     fontSize: 24,
-    color: COLORS.white,
-    fontWeight: 'bold',
+    marginHorizontal: 16,
+    color: '#666',
   },
-  closeButton: {
+  darkArrow: {
+    color: '#999',
+  },
+  onairosIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 16,
+    backgroundColor: '#F5F5F5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  onairosIconText: {
     fontSize: 24,
-    color: COLORS.white,
-    padding: 8,
+    color: '#000',
+  },
+  appName: {
+    fontSize: 16,
+    color: '#666',
+  },
+  darkSubText: {
+    color: '#999',
   },
-  username: {
-    fontSize: 18,
-    color: COLORS.white,
+  privacyMessage: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    fontStyle: 'italic',
+    marginBottom: 16,
   },
   content: {
     flex: 1,
-    padding: 16,
+    padding: 24,
   },
   card: {
-    backgroundColor: COLORS.white,
-    borderRadius: 8,
-    marginBottom: 12,
-    shadowColor: COLORS.black,
+    backgroundColor: '#fff',
+    borderRadius: 20,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#eee',
+    shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  darkCard: {
+    backgroundColor: '#2A2A2A',
+    borderColor: '#333',
   },
   checkboxContainer: {
     flexDirection: 'row',
     padding: 16,
-    alignItems: 'center',
+    alignItems: 'flex-start',
   },
   checkbox: {
     width: 24,
     height: 24,
     borderRadius: 4,
     borderWidth: 2,
-    borderColor: COLORS.primary,
+    borderColor: '#2196F3',
     marginRight: 12,
+    marginTop: 2,
+  },
+  darkCheckbox: {
+    borderColor: '#2196F3',
   },
   checkboxSelected: {
-    backgroundColor: COLORS.primary,
+    backgroundColor: '#2196F3',
   },
   cardContent: {
     flex: 1,
   },
   cardTitle: {
-    fontSize: 18,
-    fontWeight: 'bold',
+    fontSize: 16,
+    fontWeight: '600',
     marginBottom: 4,
+    color: '#333',
   },
   cardDescription: {
     fontSize: 14,
-    color: COLORS.gray,
-    marginBottom: 4,
+    color: '#666',
+    marginBottom: 6,
   },
   cardReward: {
     fontSize: 14,
-    color: COLORS.success,
-    fontWeight: 'bold',
+    color: '#4CAF50',
+    fontWeight: '500',
+  },
+  darkReward: {
+    color: '#81C784',
   },
   footer: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
     alignItems: 'center',
-    padding: 16,
+    justifyContent: 'space-between',
+    padding: 24,
     borderTopWidth: 1,
-    borderTopColor: COLORS.lightGray,
+    borderTopColor: '#eee',
+    backgroundColor: '#fff',
   },
-  footerButton: {
+  darkFooter: {
+    backgroundColor: '#2A2A2A',
+    borderTopColor: '#333',
+  },
+  footerButtonCancel: {
     paddingVertical: 8,
     paddingHorizontal: 16,
-    borderRadius: 8,
-    backgroundColor: COLORS.primary,
+  },
+  darkFooterButton: {
+    backgroundColor: 'transparent',
+  },
+  footerButtonConfirm: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#000',
+  },
+  darkFooterButtonConfirm: {
+    backgroundColor: '#fff',
+    borderColor: '#fff',
   },
   footerButtonText: {
-    color: COLORS.white,
+    color: '#666',
+    fontSize: 16,
+  },
+  footerButtonTextConfirm: {
+    color: '#000',
     fontSize: 16,
     fontWeight: '600',
   },
   selectedCount: {
     fontSize: 16,
-    color: COLORS.gray,
+    color: '#666',
+  },
+  lightBackground: {
+    backgroundColor: '#fff',
+  },
+  darkBackground: {
+    backgroundColor: '#1A1A1A',
+  },
+  lightHandle: {
+    backgroundColor: '#ccc',
+  },
+  darkHandle: {
+    backgroundColor: '#666',
   },
 });

package/src/components/UniversalOnboarding.tsx

@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
   ActivityIndicator,
   Dimensions,
+  Platform,
 } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
 import Icon from 'react-native-vector-icons/MaterialIcons';
@@ -52,6 +53,18 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     if (visible) {
       bottomSheetRef.current?.expand();
       loadInitialStatus();
+      
+      // Debug mode for Expo Go
+      if (debug || Platform.OS === 'web') {
+        console.log('Debug mode enabled - Using mock data for onboarding');
+        // Pre-populate with mock connections in debug mode
+        if (test || Platform.OS === 'web') {
+          setConnections({
+            instagram: { userName: 'instagram_user', connected: true },
+            youtube: { userName: 'youtube_user', connected: true },
+          });
+        }
+      }
     } else {
       bottomSheetRef.current?.close();
     }
@@ -137,6 +150,18 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
       case 'training':
         return (
           <TrainingModal
+            visible={step === 'training'}
+            onClose={onClose}
+            onComplete={() => {
+              onComplete('https://api2.onairos.uk', 'dummy-token', {
+                pin,
+                connections,
+                selectedTier,
+                tierData: requestData?.[selectedTier],
+              });
+            }}
+            modelKey="onairosTrainingModel"
+            username="demo_user"
             progress={training.progress}
             eta={training.eta}
             onCancel={onClose}