@onairos/react-native 3.1.17 → 3.2.0

package/src/components/DataRequestScreen.tsx

@@ -1,356 +1,356 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-  Image,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS } from '../constants';
-
-interface DataRequestScreenProps {
-  onAccept: () => void;
-  onDecline: () => void;
-  requestData: Record<string, any>;
-  AppName: string;
-  appIcon?: any;
-}
-
-export const DataRequestScreen: React.FC<DataRequestScreenProps> = ({
-  onAccept,
-  onDecline,
-  requestData,
-  AppName,
-  appIcon,
-}) => {
-  
-  // Basic data requests that are always shown
-  const basicRequests = [
-    {
-      key: 'basic_profile',
-      name: 'Basic Profile',
-      description: 'Your basic social media profile information',
-      reward: 'Personalized experience',
-      icon: 'person'
-    },
-    {
-      key: 'content_analysis',
-      name: 'Content Analysis',
-      description: 'Analysis of your posts and interactions',
-      reward: 'Better recommendations',
-      icon: 'analytics'
-    }
-  ];
-
-  const renderDataRequest = (data: any, key: string, isBasic = false) => {
-    let name, description, reward, icon;
-    
-    if (isBasic) {
-      ({ name, description, reward, icon } = data);
-    } else {
-      // Handle new format (personality_traits, sentiment_analysis)
-      if ('name' in data && 'description' in data && 'reward' in data) {
-        name = data.name;
-        description = data.description;
-        reward = data.reward;
-        icon = key === 'personality_traits' ? 'psychology' : 'analytics';
-      } else if ('type' in data && 'descriptions' in data && 'reward' in data) {
-        // Handle old format (Small, Medium, Large)
-        name = `${key} - ${data.type}`;
-        description = data.descriptions;
-        reward = data.reward;
-        icon = 'data_usage';
-      } else {
-        return null;
-      }
-    }
-
-    return (
-      <View key={key} style={styles.dataRequestContainer}>
-        <View style={styles.dataRequestHeader}>
-          <View style={styles.iconContainer}>
-            <Icon 
-              name={icon} 
-              size={24} 
-              color={COLORS.primary} 
-            />
-          </View>
-          <View style={styles.requestContent}>
-            <Text style={styles.dataRequestName}>{name}</Text>
-            <Text style={styles.dataRequestDescription}>{description}</Text>
-            <View style={styles.rewardContainer}>
-              <Icon name="star" size={16} color="#FFD700" />
-              <Text style={styles.rewardText}>{reward}</Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    );
-  };
-
-  const renderCustomRequests = () => {
-    return Object.entries(requestData).map(([key, data]) => {
-      // Skip if data is undefined or doesn't have the expected structure
-      if (!data || typeof data !== 'object') return null;
-      return renderDataRequest(data, key, false);
-    });
-  };
-
-  return (
-    <View style={styles.container}>
-      {/* Header */}
-      <View style={styles.header}>
-        <View style={styles.titleContainer}>
-          <Text style={styles.title}>Data Sharing Request</Text>
-          <Text style={styles.subtitle}>
-            {AppName} would like access to the following data
-          </Text>
-        </View>
-        
-        {/* App Icon Flow: Onairos → Your App */}
-        <View style={styles.iconFlow}>
-          <Image 
-            source={require('../assets/images/onairos_logo.png')} 
-            style={styles.onairosIcon}
-            resizeMode="contain"
-          />
-          <Icon name="arrow-forward" size={24} color="#666" style={styles.arrowIcon} />
-          {appIcon ? (
-            <Image 
-              source={appIcon} 
-              style={styles.appIcon}
-              resizeMode="contain"
-            />
-          ) : (
-            <View style={styles.appIconPlaceholder}>
-              <Text style={styles.appIconText}>
-                {AppName.charAt(0).toUpperCase()}
-              </Text>
-            </View>
-          )}
-        </View>
-      </View>
-
-      {/* Data Requests */}
-      <ScrollView 
-        style={styles.content}
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
-        {/* Basic Requests (always shown) */}
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Basic Data</Text>
-          {basicRequests.map((request) => renderDataRequest(request, request.key, true))}
-        </View>
-
-        {/* Custom Requests (from developer) */}
-        {Object.keys(requestData).length > 0 && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Additional Insights</Text>
-            {renderCustomRequests()}
-          </View>
-        )}
-
-        {/* Privacy Note */}
-        <View style={styles.privacyNote}>
-          <Icon name="security" size={20} color="#28a745" />
-          <Text style={styles.privacyText}>
-            Your data is encrypted and never shared with third parties
-          </Text>
-        </View>
-      </ScrollView>
-
-      {/* Footer Buttons */}
-      <View style={styles.footer}>
-        <TouchableOpacity
-          style={styles.declineButton}
-          onPress={onDecline}
-        >
-          <Text style={styles.declineButtonText}>Decline</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={styles.acceptButton}
-          onPress={onAccept}
-        >
-          <Text style={styles.acceptButtonText}>Accept & Continue</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  header: {
-    padding: 24,
-    paddingTop: 40,
-    backgroundColor: '#f8f9fa',
-    borderBottomWidth: 1,
-    borderBottomColor: '#e9ecef',
-  },
-  titleContainer: {
-    marginBottom: 20,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-  },
-  iconFlow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  onairosIcon: {
-    width: 32,
-    height: 32,
-  },
-  arrowIcon: {
-    marginHorizontal: 12,
-  },
-  appIcon: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-  },
-  appIconPlaceholder: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: COLORS.primary,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  appIconText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  content: {
-    flex: 1,
-  },
-  scrollContent: {
-    padding: 20,
-  },
-  section: {
-    marginBottom: 24,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#000',
-    marginBottom: 16,
-  },
-  dataRequestContainer: {
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: '#e9ecef',
-    borderRadius: 12,
-    padding: 16,
-    backgroundColor: '#fff',
-  },
-  dataRequestHeader: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  iconContainer: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: '#f0f8ff',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12,
-  },
-  requestContent: {
-    flex: 1,
-  },
-  dataRequestName: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#000',
-    marginBottom: 4,
-  },
-  dataRequestDescription: {
-    fontSize: 14,
-    color: '#666',
-    lineHeight: 20,
-    marginBottom: 8,
-  },
-  rewardContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#fff3cd',
-    padding: 6,
-    borderRadius: 6,
-    alignSelf: 'flex-start',
-  },
-  rewardText: {
-    fontSize: 12,
-    fontWeight: '500',
-    marginLeft: 4,
-    color: '#856404',
-  },
-  privacyNote: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#d4edda',
-    padding: 12,
-    borderRadius: 8,
-    marginTop: 8,
-  },
-  privacyText: {
-    fontSize: 14,
-    color: '#155724',
-    marginLeft: 8,
-    flex: 1,
-  },
-  footer: {
-    flexDirection: 'row',
-    padding: 20,
-    borderTopWidth: 1,
-    borderTopColor: '#e9ecef',
-    backgroundColor: '#fff',
-  },
-  declineButton: {
-    flex: 1,
-    paddingVertical: 16,
-    paddingHorizontal: 24,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#dc3545',
-    marginRight: 12,
-    alignItems: 'center',
-  },
-  declineButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#dc3545',
-  },
-  acceptButton: {
-    flex: 2,
-    paddingVertical: 16,
-    paddingHorizontal: 24,
-    borderRadius: 12,
-    backgroundColor: '#28a745',
-    alignItems: 'center',
-  },
-  acceptButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#fff',
-  },
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Image,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS } from '../constants';
+
+interface DataRequestScreenProps {
+  onAccept: () => void;
+  onDecline: () => void;
+  requestData: Record<string, any>;
+  AppName: string;
+  appIcon?: any;
+}
+
+export const DataRequestScreen: React.FC<DataRequestScreenProps> = ({
+  onAccept,
+  onDecline,
+  requestData,
+  AppName,
+  appIcon,
+}) => {
+  
+  // Basic data requests that are always shown
+  const basicRequests = [
+    {
+      key: 'basic_profile',
+      name: 'Basic Profile',
+      description: 'Your basic social media profile information',
+      reward: 'Personalized experience',
+      icon: 'person'
+    },
+    {
+      key: 'content_analysis',
+      name: 'Content Analysis',
+      description: 'Analysis of your posts and interactions',
+      reward: 'Better recommendations',
+      icon: 'analytics'
+    }
+  ];
+
+  const renderDataRequest = (data: any, key: string, isBasic = false) => {
+    let name, description, reward, icon;
+    
+    if (isBasic) {
+      ({ name, description, reward, icon } = data);
+    } else {
+      // Handle new format (personality_traits, sentiment_analysis)
+      if ('name' in data && 'description' in data && 'reward' in data) {
+        name = data.name;
+        description = data.description;
+        reward = data.reward;
+        icon = key === 'personality_traits' ? 'psychology' : 'analytics';
+      } else if ('type' in data && 'descriptions' in data && 'reward' in data) {
+        // Handle old format (Small, Medium, Large)
+        name = `${key} - ${data.type}`;
+        description = data.descriptions;
+        reward = data.reward;
+        icon = 'data_usage';
+      } else {
+        return null;
+      }
+    }
+
+    return (
+      <View key={key} style={styles.dataRequestContainer}>
+        <View style={styles.dataRequestHeader}>
+          <View style={styles.iconContainer}>
+            <Icon 
+              name={icon} 
+              size={24} 
+              color={COLORS.primary} 
+            />
+          </View>
+          <View style={styles.requestContent}>
+            <Text style={styles.dataRequestName}>{name}</Text>
+            <Text style={styles.dataRequestDescription}>{description}</Text>
+            <View style={styles.rewardContainer}>
+              <Icon name="star" size={16} color="#FFD700" />
+              <Text style={styles.rewardText}>{reward}</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  };
+
+  const renderCustomRequests = () => {
+    return Object.entries(requestData).map(([key, data]) => {
+      // Skip if data is undefined or doesn't have the expected structure
+      if (!data || typeof data !== 'object') return null;
+      return renderDataRequest(data, key, false);
+    });
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.titleContainer}>
+          <Text style={styles.title}>Data Sharing Request</Text>
+          <Text style={styles.subtitle}>
+            {AppName} would like access to the following data
+          </Text>
+        </View>
+        
+        {/* App Icon Flow: Onairos → Your App */}
+        <View style={styles.iconFlow}>
+          <Image 
+            source={require('../assets/images/onairos_logo.png')} 
+            style={styles.onairosIcon}
+            resizeMode="contain"
+          />
+          <Icon name="arrow-forward" size={24} color="#666" style={styles.arrowIcon} />
+          {appIcon ? (
+            <Image 
+              source={appIcon} 
+              style={styles.appIcon}
+              resizeMode="contain"
+            />
+          ) : (
+            <View style={styles.appIconPlaceholder}>
+              <Text style={styles.appIconText}>
+                {AppName.charAt(0).toUpperCase()}
+              </Text>
+            </View>
+          )}
+        </View>
+      </View>
+
+      {/* Data Requests */}
+      <ScrollView 
+        style={styles.content}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Basic Requests (always shown) */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Basic Data</Text>
+          {basicRequests.map((request) => renderDataRequest(request, request.key, true))}
+        </View>
+
+        {/* Custom Requests (from developer) */}
+        {Object.keys(requestData).length > 0 && (
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Additional Insights</Text>
+            {renderCustomRequests()}
+          </View>
+        )}
+
+        {/* Privacy Note */}
+        <View style={styles.privacyNote}>
+          <Icon name="security" size={20} color="#28a745" />
+          <Text style={styles.privacyText}>
+            Your data is encrypted and never shared with third parties
+          </Text>
+        </View>
+      </ScrollView>
+
+      {/* Footer Buttons */}
+      <View style={styles.footer}>
+        <TouchableOpacity
+          style={styles.declineButton}
+          onPress={onDecline}
+        >
+          <Text style={styles.declineButtonText}>Decline</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.acceptButton}
+          onPress={onAccept}
+        >
+          <Text style={styles.acceptButtonText}>Accept & Continue</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  header: {
+    padding: 24,
+    paddingTop: 40,
+    backgroundColor: '#f8f9fa',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e9ecef',
+  },
+  titleContainer: {
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#000',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+  iconFlow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  onairosIcon: {
+    width: 32,
+    height: 32,
+  },
+  arrowIcon: {
+    marginHorizontal: 12,
+  },
+  appIcon: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+  },
+  appIconPlaceholder: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: COLORS.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  appIconText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  content: {
+    flex: 1,
+  },
+  scrollContent: {
+    padding: 20,
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#000',
+    marginBottom: 16,
+  },
+  dataRequestContainer: {
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+    borderRadius: 12,
+    padding: 16,
+    backgroundColor: '#fff',
+  },
+  dataRequestHeader: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#f0f8ff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  requestContent: {
+    flex: 1,
+  },
+  dataRequestName: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#000',
+    marginBottom: 4,
+  },
+  dataRequestDescription: {
+    fontSize: 14,
+    color: '#666',
+    lineHeight: 20,
+    marginBottom: 8,
+  },
+  rewardContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff3cd',
+    padding: 6,
+    borderRadius: 6,
+    alignSelf: 'flex-start',
+  },
+  rewardText: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginLeft: 4,
+    color: '#856404',
+  },
+  privacyNote: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#d4edda',
+    padding: 12,
+    borderRadius: 8,
+    marginTop: 8,
+  },
+  privacyText: {
+    fontSize: 14,
+    color: '#155724',
+    marginLeft: 8,
+    flex: 1,
+  },
+  footer: {
+    flexDirection: 'row',
+    padding: 20,
+    borderTopWidth: 1,
+    borderTopColor: '#e9ecef',
+    backgroundColor: '#fff',
+  },
+  declineButton: {
+    flex: 1,
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#dc3545',
+    marginRight: 12,
+    alignItems: 'center',
+  },
+  declineButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#dc3545',
+  },
+  acceptButton: {
+    flex: 2,
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    backgroundColor: '#28a745',
+    alignItems: 'center',
+  },
+  acceptButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fff',
+  },
 });