@onairos/react-native 3.0.2 → 3.0.5

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
@@ -48,30 +54,45 @@ export const Overlay: React.FC<OverlayProps> = ({
     setSelections(initialSelections);
     getDetails();
     
-    // Present the bottom sheet when component mounts
+    // Expand the bottom sheet when component mounts
     setTimeout(() => {
-      bottomSheetRef.current?.present();
+      bottomSheetRef.current?.expand();
     }, 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 +101,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 +144,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 +180,306 @@ 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>
+    </View>
+  );
+
+  // Main component rendering - Use Modal at the root level
+  return (
+    <Modal
+      visible={visible}
+      animationType="fade"
+      transparent={true}
+      onRequestClose={closeOverlay}
+    >
+      <View style={styles.modalContainer}>
+        <BottomSheet
+          ref={bottomSheetRef}
+          snapPoints={snapPoints.current}
+          enablePanDownToClose
+          onClose={closeOverlay}
+          backgroundStyle={darkMode ? styles.darkBackground : styles.lightBackground}
+          handleIndicatorStyle={darkMode ? styles.darkHandle : styles.lightHandle}
+          index={0}
+        >
+          {renderContent()}
+        </BottomSheet>
       </View>
-    </BottomSheetModal>
+    </Modal>
   );
 };
 
-const { width: SCREEN_WIDTH } = Dimensions.get('window');
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
 
 const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
   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

@@ -150,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}

package/src/components/onboarding/OAuthWebView.tsx

@@ -10,25 +10,45 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
   platform,
   onComplete,
   onClose,
+  onSuccess,
 }) => {
   const [loading, setLoading] = useState(true);
 
   const handleNavigationStateChange = useCallback(
     (navState: WebViewNavigation) => {
       // Check if the URL includes our redirect URI
-      if (navState.url.startsWith('onairosreact://auth/')) {
-        // OAuth flow is complete - callback will be handled by the deep link handler
-        onComplete();
+      if (navState.url.startsWith('onairosanime://auth/')) {
+        // Extract the authorization code from the URL
+        const authCode = extractAuthCode(navState.url);
+        if (authCode) {
+          onSuccess(authCode);
+        }
+        
+        // OAuth flow is complete
+        if (onComplete) {
+          onComplete();
+        }
         return;
       }
     },
-    [onComplete]
+    [onComplete, onSuccess]
   );
 
   const handleLoadEnd = useCallback(() => {
     setLoading(false);
   }, []);
 
+  // Extract auth code from redirect URL
+  const extractAuthCode = (redirectUrl: string): string => {
+    try {
+      const url = new URL(redirectUrl);
+      return url.searchParams.get('code') || '';
+    } catch (error) {
+      console.error('Error extracting auth code:', error);
+      return '';
+    }
+  };
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.header}>
@@ -37,9 +57,9 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
         </TouchableOpacity>
         <View style={styles.titleContainer}>
           <Icon 
-            name={getPlatformIcon(platform)} 
+            name={getPlatformIcon(platform || 'default')} 
             size={20} 
-            color={getPlatformColor(platform)} 
+            color={getPlatformColor(platform || 'default')} 
           />
         </View>
       </View>
@@ -49,7 +69,7 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
         onNavigationStateChange={handleNavigationStateChange}
         onLoadEnd={handleLoadEnd}
         startInLoadingState={true}
-        renderLoading={() => null} // We'll handle our own loading UI
+        renderLoading={() => <View />}
         style={styles.webView}
       />