@onairos/react-native 3.0.16 → 3.0.17

package/lib/module/components/Overlay.tsx.new

@@ -0,0 +1,516 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Alert,
+  Platform,
+  Dimensions,
+  Modal,
+  Animated,
+  TouchableWithoutFeedback,
+  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';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+interface OverlayProps {
+  data: {
+    [key: string]: {
+      type: string;
+      descriptions: string;
+      reward: string;
+    };
+  };
+  username: string;
+  modelKey: string;
+  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> = ({
+  data,
+  username,
+  modelKey,
+  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
+  useEffect(() => {
+    // Initialize selection state
+    const initialSelections: { [key: string]: boolean } = {};
+    Object.keys(data).forEach((key) => {
+      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
+    Animated.spring(bottomSheetAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      bounciness: 0,
+    }).start();
+  }, []);
+
+  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,
+        },
+      });
+      // 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 = useCallback(() => {
+    // Animate the overlay sliding down
+    Animated.timing(bottomSheetAnim, {
+      toValue: 0,
+      duration: 250,
+      useNativeDriver: true,
+    }).start(() => {
+      setVisible(false);
+    });
+  }, [bottomSheetAnim]);
+
+  const togglePlatform = useCallback((platformId: string) => {
+    setPlatformToggles(prev => ({
+      ...prev,
+      [platformId]: !prev[platformId]
+    }));
+  }, []);
+
+  const confirmSelection = useCallback(async () => {
+    try {
+      // Mock app identifier
+      const appId = Platform.select({
+        ios: 'com.onairos.mock',
+        android: 'com.onairos.mock',
+        default: 'unknown'
+      });
+
+      // In development mode, use mock data
+      if (__DEV__) {
+        onResolved('https://api2.onairos.uk', 'mock-token', { 
+          username,
+          selections,
+          platforms: platformToggles
+        });
+        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: {
+          storage: 'local',
+          appId: appId,
+          confirmations: selections,
+          developerURL: 'devURL',
+          EncryptedUserPin: encryptedModelKey,
+          username: username,
+          platforms: platformToggles
+        },
+      });
+
+      if (response && response.data && response.data.APIUrl && response.data.token) {
+        onResolved(response.data.APIUrl, response.data.token, {
+          username,
+          selections,
+          platforms: platformToggles
+        });
+        closeOverlay();
+      } else {
+        // If response doesn't have expected format, use fallbacks
+        onResolved('https://api2.onairos.uk', 'fallback-token', {
+          username,
+          selections,
+          platforms: platformToggles
+        });
+        closeOverlay();
+      }
+    } catch (e) {
+      console.error('Error confirming selection:', e);
+      // In case of error, provide fallback (development mode)
+      if (__DEV__) {
+        onResolved('https://api2.onairos.uk', 'error-fallback-token', { 
+          username,
+          selections,
+          platforms: platformToggles,
+          error: true
+        });
+        closeOverlay();
+      } else {
+        showErrorModal('Failed to confirm selection. Please try again.');
+      }
+    }
+  }, [selections, username, modelKey, onResolved, closeOverlay, platformToggles]);
+
+  const showErrorModal = (errorMessage: string) => {
+    Alert.alert('Error', errorMessage, [{ text: 'OK' }]);
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={closeOverlay}
+    >
+      <TouchableOpacity
+        style={styles.modalOverlay}
+        activeOpacity={1}
+        onPress={closeOverlay}
+      >
+        <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
+          <Animated.View
+            style={[
+              styles.bottomSheet,
+              darkMode && styles.darkContainer,
+              {
+                transform: [
+                  {
+                    translateY: bottomSheetAnim.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [SCREEN_HEIGHT, 0],
+                    }),
+                  },
+                ],
+              },
+            ]}
+          >
+            <View style={styles.handleContainer}>
+              <View style={[styles.handle, darkMode && styles.darkHandle]} />
+            </View>
+
+            <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>
+
+              <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>
+
+                {/* 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>
+                  ))}
+                </View>
+              </ScrollView>
+
+              <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>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  bottomSheet: {
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    width: SCREEN_WIDTH,
+    overflow: 'hidden',
+  },
+  handleContainer: {
+    width: '100%',
+    alignItems: 'center',
+    paddingTop: 12,
+    paddingBottom: 8,
+  },
+  handle: {
+    width: 40,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: '#E0E0E0',
+  },
+  darkHandle: {
+    backgroundColor: '#666',
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  darkContainer: {
+    backgroundColor: '#1A1A1A',
+  },
+  header: {
+    padding: 24,
+    alignItems: 'center',
+  },
+  darkHeader: {
+    backgroundColor: '#1A1A1A',
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 16,
+  },
+  appIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 16,
+    backgroundColor: '#F5F5F5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  darkAppIcon: {
+    backgroundColor: '#2A2A2A',
+  },
+  appIconText: {
+    fontSize: 24,
+    color: '#000',
+  },
+  darkText: {
+    color: '#fff',
+  },
+  arrow: {
+    marginHorizontal: 16,
+  },
+  onairosIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 16,
+    backgroundColor: '#F5F5F5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  darkOnairosIcon: {
+    backgroundColor: '#2A2A2A',
+  },
+  onairosIconText: {
+    fontSize: 24,
+    color: '#000',
+  },
+  darkSubText: {
+    color: '#999',
+  },
+  titleContainer: {
+    marginBottom: 30,
+  },
+  mainTitle: {
+    fontSize: 22,
+    fontWeight: '600',
+    color: '#000',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  privacyMessage: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 24,
+  },
+  platformsContainer: {
+    marginTop: 16,
+  },
+  platformItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#eee',
+  },
+  darkPlatformItem: {
+    backgroundColor: '#2A2A2A',
+    borderColor: '#333',
+  },
+  platformInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  platformIcon: {
+    width: 32,
+    height: 32,
+    marginRight: 12,
+  },
+  platformName: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#000',
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 24,
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+    backgroundColor: '#fff',
+  },
+  darkFooter: {
+    backgroundColor: '#2A2A2A',
+    borderTopColor: '#333',
+  },
+  footerButtonCancel: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  darkFooterButton: {
+    backgroundColor: 'transparent',
+  },
+  footerButtonConfirm: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#000',
+  },
+  darkFooterButtonConfirm: {
+    backgroundColor: '#fff',
+    borderColor: '#fff',
+  },
+  footerButtonText: {
+    color: '#666',
+    fontSize: 16,
+  },
+  footerButtonTextConfirm: {
+    color: '#000',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  lightBackground: {
+    backgroundColor: '#fff',
+  },
+  darkBackground: {
+    backgroundColor: '#1A1A1A',
+  },
+});