@onairos/react-native 3.0.16 → 3.0.18

package/src/components/Overlay.tsx

@@ -11,10 +11,11 @@ import {
   Modal,
   Animated,
   TouchableWithoutFeedback,
-  StatusBar,
-  KeyboardAvoidingView,
   SafeAreaView,
+  Image,
+  Switch,
 } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
 import { onairosApi } from '../api';
 import { encryptModelKey } from '../utils/encryption';
 import { COLORS } from '../constants';
@@ -34,6 +35,7 @@ interface OverlayProps {
   onResolved: (apiUrl: string, accessToken: string, loginDetails: any) => void;
   appName?: string;
   darkMode?: boolean;
+  platforms?: Array<{id: string, name: string, icon: any}>;
 }
 
 export const Overlay: React.FC<OverlayProps> = ({
@@ -43,10 +45,15 @@ export const Overlay: React.FC<OverlayProps> = ({
   onResolved,
   appName = 'Your App',
   darkMode = false,
+  platforms = [
+    { id: 'instagram', name: 'Instagram', icon: require('../assets/images/instagram.png') },
+    { id: 'youtube', name: 'YouTube', icon: require('../assets/images/youtube.png') },
+  ],
 }) => {
   const [selections, setSelections] = useState<{ [key: string]: boolean }>({});
   const [details, setDetails] = useState<string>('');
   const [visible, setVisible] = useState(true);
+  const [platformToggles, setPlatformToggles] = useState<{[key: string]: boolean}>({});
   const bottomSheetAnim = useRef(new Animated.Value(0)).current;
 
   // Initialize selection state on mount
@@ -57,6 +64,14 @@ export const Overlay: React.FC<OverlayProps> = ({
       initialSelections[key] = false;
     });
     setSelections(initialSelections);
+    
+    // Initialize platform toggles
+    const initialToggles: { [key: string]: boolean } = {};
+    platforms.forEach((platform) => {
+      initialToggles[platform.id] = false;
+    });
+    setPlatformToggles(initialToggles);
+    
     getDetails();
 
     // Animate the bottom sheet sliding up
@@ -106,6 +121,13 @@ export const Overlay: React.FC<OverlayProps> = ({
     });
   }, [bottomSheetAnim]);
 
+  const togglePlatform = useCallback((platformId: string) => {
+    setPlatformToggles(prev => ({
+      ...prev,
+      [platformId]: !prev[platformId]
+    }));
+  }, []);
+
   const confirmSelection = useCallback(async () => {
     try {
       // Mock app identifier
@@ -119,7 +141,8 @@ export const Overlay: React.FC<OverlayProps> = ({
       if (__DEV__) {
         onResolved('https://api2.onairos.uk', 'mock-token', { 
           username,
-          selections
+          selections,
+          platforms: platformToggles
         });
         closeOverlay();
         return;
@@ -153,22 +176,24 @@ export const Overlay: React.FC<OverlayProps> = ({
           confirmations: selections,
           developerURL: 'devURL',
           EncryptedUserPin: encryptedModelKey,
-          account: username,
-          proofMode: false,
+          username: username,
+          platforms: platformToggles
         },
       });
 
-      if (response.data?.apiUrl && response.data?.token) {
-        onResolved(response.data.apiUrl, response.data.token, { 
+      if (response && response.data && response.data.APIUrl && response.data.token) {
+        onResolved(response.data.APIUrl, response.data.token, {
           username,
-          selections
+          selections,
+          platforms: platformToggles
         });
         closeOverlay();
       } else {
         // If response doesn't have expected format, use fallbacks
         onResolved('https://api2.onairos.uk', 'fallback-token', {
           username,
-          selections
+          selections,
+          platforms: platformToggles
         });
         closeOverlay();
       }
@@ -179,6 +204,7 @@ export const Overlay: React.FC<OverlayProps> = ({
         onResolved('https://api2.onairos.uk', 'error-fallback-token', { 
           username,
           selections,
+          platforms: platformToggles,
           error: true
         });
         closeOverlay();
@@ -186,130 +212,114 @@ export const Overlay: React.FC<OverlayProps> = ({
         showErrorModal('Failed to confirm selection. Please try again.');
       }
     }
-  }, [selections, username, modelKey, onResolved, closeOverlay]);
+  }, [selections, username, modelKey, onResolved, closeOverlay, platformToggles]);
 
   const showErrorModal = (errorMessage: string) => {
-    Alert.alert('Notice', errorMessage, [{ text: 'OK' }]);
+    Alert.alert('Error', errorMessage, [{ text: 'OK' }]);
   };
 
-  const selectedCount = Object.values(selections).filter(Boolean).length;
-  
-  // Calculate the maximum height of the bottom sheet (80% of screen height)
-  const maxSheetHeight = SCREEN_HEIGHT * 0.8;
-
-  // Main component rendering
   return (
     <Modal
       visible={visible}
-      transparent={true}
+      transparent
       animationType="none"
+      statusBarTranslucent
       onRequestClose={closeOverlay}
-      statusBarTranslucent={true}
     >
-      <TouchableOpacity 
-        style={styles.modalOverlay} 
+      <TouchableOpacity
+        style={styles.modalOverlay}
         activeOpacity={1}
         onPress={closeOverlay}
       >
-        <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
-          <Animated.View 
+        <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
+          <Animated.View
             style={[
               styles.bottomSheet,
               darkMode && styles.darkContainer,
               {
-                maxHeight: maxSheetHeight,
-                transform: [{
-                  translateY: bottomSheetAnim.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [SCREEN_HEIGHT, 0],
-                  })
-                }]
-              }
+                transform: [
+                  {
+                    translateY: bottomSheetAnim.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [SCREEN_HEIGHT, 0],
+                    }),
+                  },
+                ],
+              },
             ]}
           >
             <View style={styles.handleContainer}>
               <View style={[styles.handle, darkMode && styles.darkHandle]} />
             </View>
-          
-            <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>
+
+            <SafeAreaView style={[styles.container, darkMode && styles.darkContainer]}>
+              {/* Header with app icon and arrow to Onairos icon */}
+              <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]}>
+                      {appName.charAt(0)}
+                    </Text>
+                  </View>
+                  <Icon name="arrow_forward" size={24} color={darkMode ? '#999' : '#666'} style={styles.arrow} />
+                  <View style={[styles.onairosIcon, darkMode && styles.darkOnairosIcon]}>
+                    <Text style={[styles.onairosIconText, darkMode && styles.darkText]}>O</Text>
+                  </View>
                 </View>
               </View>
-              <Text style={[styles.appName, darkMode && styles.darkSubText]}>{appName}</Text>
-            </View>
 
-            <Text style={[styles.privacyMessage, darkMode && styles.darkSubText]}>
-              No one will ever see your raw app data
-            </Text>
+              <ScrollView style={styles.content}>
+                {/* Main title and description */}
+                <View style={styles.titleContainer}>
+                  <Text style={[styles.mainTitle, darkMode && styles.darkText]}>
+                    Connect your data to create a Persona of you, to connect to Cosmos
+                  </Text>
+                  <Text style={[styles.privacyMessage, darkMode && styles.darkSubText]}>
+                    None of your app data is shared with ANYONE
+                  </Text>
+                </View>
 
-            <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
-              {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}
+                {/* Platform connection options */}
+                <View style={styles.platformsContainer}>
+                  {platforms.map((platform) => (
+                    <View key={platform.id} style={[styles.platformItem, darkMode && styles.darkPlatformItem]}>
+                      <View style={styles.platformInfo}>
+                        <Image 
+                          source={platform.icon} 
+                          style={styles.platformIcon} 
+                          resizeMode="contain"
+                        />
+                        <Text style={[styles.platformName, darkMode && styles.darkText]}>
+                          {platform.name}
                         </Text>
-                      )}
+                      </View>
+                      <Switch
+                        value={platformToggles[platform.id]}
+                        onValueChange={() => togglePlatform(platform.id)}
+                        trackColor={{ false: '#767577', true: '#81b0ff' }}
+                        thumbColor={platformToggles[platform.id] ? '#2196F3' : '#f4f3f4'}
+                      />
                     </View>
-                  </TouchableOpacity>
+                  ))}
                 </View>
-              ))}
-            </ScrollView>
+              </ScrollView>
 
-            <KeyboardAvoidingView
-              behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            >
-              <SafeAreaView>
-                <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>
-              </SafeAreaView>
-            </KeyboardAvoidingView>
+              <View style={[styles.footer, darkMode && styles.darkFooter]}>
+                <TouchableOpacity
+                  style={styles.footerButtonCancel}
+                  onPress={closeOverlay}
+                >
+                  <Text style={[styles.footerButtonText, darkMode && styles.darkSubText]}>Cancel</Text>
+                </TouchableOpacity>
+
+                <TouchableOpacity
+                  style={[styles.footerButtonConfirm, darkMode && styles.darkFooterButtonConfirm]}
+                  onPress={confirmSelection}
+                >
+                  <Text style={[styles.footerButtonTextConfirm, darkMode && { color: '#000' }]}>Connect</Text>
+                </TouchableOpacity>
+              </View>
+            </SafeAreaView>
           </Animated.View>
         </TouchableWithoutFeedback>
       </TouchableOpacity>
@@ -384,12 +394,7 @@ const styles = StyleSheet.create({
     color: '#fff',
   },
   arrow: {
-    fontSize: 24,
     marginHorizontal: 16,
-    color: '#666',
-  },
-  darkArrow: {
-    color: '#999',
   },
   onairosIcon: {
     width: 48,
@@ -399,85 +404,67 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  darkOnairosIcon: {
+    backgroundColor: '#2A2A2A',
+  },
   onairosIconText: {
     fontSize: 24,
     color: '#000',
   },
-  appName: {
-    fontSize: 16,
-    color: '#666',
-  },
   darkSubText: {
     color: '#999',
   },
+  titleContainer: {
+    marginBottom: 30,
+  },
+  mainTitle: {
+    fontSize: 22,
+    fontWeight: '600',
+    color: '#000',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
   privacyMessage: {
     fontSize: 14,
     color: '#666',
     textAlign: 'center',
-    fontStyle: 'italic',
     marginBottom: 16,
   },
   content: {
     flex: 1,
     paddingHorizontal: 24,
   },
-  card: {
+  platformsContainer: {
+    marginTop: 16,
+  },
+  platformItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 16,
     backgroundColor: '#fff',
-    borderRadius: 20,
+    borderRadius: 16,
     marginBottom: 16,
     borderWidth: 1,
     borderColor: '#eee',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 8,
-    elevation: 2,
   },
-  darkCard: {
+  darkPlatformItem: {
     backgroundColor: '#2A2A2A',
     borderColor: '#333',
   },
-  checkboxContainer: {
+  platformInfo: {
     flexDirection: 'row',
-    padding: 16,
-    alignItems: 'flex-start',
-  },
-  checkbox: {
-    width: 24,
-    height: 24,
-    borderRadius: 4,
-    borderWidth: 2,
-    borderColor: '#2196F3',
-    marginRight: 12,
-    marginTop: 2,
-  },
-  darkCheckbox: {
-    borderColor: '#2196F3',
-  },
-  checkboxSelected: {
-    backgroundColor: '#2196F3',
+    alignItems: 'center',
   },
-  cardContent: {
-    flex: 1,
+  platformIcon: {
+    width: 32,
+    height: 32,
+    marginRight: 12,
   },
-  cardTitle: {
+  platformName: {
     fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 4,
-    color: '#333',
-  },
-  cardDescription: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 6,
-  },
-  cardReward: {
-    fontSize: 14,
-    color: '#4CAF50',
     fontWeight: '500',
-  },
-  darkReward: {
-    color: '#81C784',
+    color: '#000',
   },
   footer: {
     flexDirection: 'row',
@@ -520,10 +507,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '600',
   },
-  selectedCount: {
-    fontSize: 16,
-    color: '#666',
-  },
   lightBackground: {
     backgroundColor: '#fff',
   },