@onairos/react-native 3.0.57 → 3.0.58

package/src/components/DataRequestModal.tsx

@@ -1,187 +1,227 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-  Modal,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS, PLATFORMS } from '../constants';
-
-interface DataRequestModalProps {
-  visible: boolean;
-  onClose: () => void;
-  onAccept: () => void;
-  requestData: Record<string, Record<string, string>>;
-  AppName: string;
-}
-
-export const DataRequestModal: React.FC<DataRequestModalProps> = ({
-  visible,
-  onClose,
-  onAccept,
-  requestData,
-  AppName,
-}) => {
-  const renderPermissions = () => {
-    return Object.entries(requestData).map(([platform, permissions]) => {
-      const platformConfig = PLATFORMS[platform];
-      if (!platformConfig) return null;
-
-      return (
-        <View key={platform} style={styles.platformContainer}>
-          <View style={styles.platformHeader}>
-            <Icon name={platformConfig.icon} size={24} color={platformConfig.color} />
-            <Text style={styles.platformName}>{platformConfig.name}</Text>
-          </View>
-          <View style={styles.permissionsContainer}>
-            {Object.entries(permissions).map(([key, value]) => (
-              <Text key={key} style={styles.permissionText}>
-                • {key}: {value}
-              </Text>
-            ))}
-          </View>
-        </View>
-      );
-    });
-  };
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="slide"
-      onRequestClose={onClose}
-    >
-      <View style={styles.modalOverlay}>
-        <View style={styles.modalContent}>
-          <View style={styles.header}>
-            <Icon name="auto_awesome" size={24} color={COLORS.primary} />
-            <Text style={styles.headerTitle}>
-              {AppName} Data Request
-            </Text>
-            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-              <Icon name="close" size={24} color="#000" />
-            </TouchableOpacity>
-          </View>
-
-          <ScrollView style={styles.scrollContent}>
-            <Text style={styles.description}>
-              {AppName} is requesting access to the following data:
-            </Text>
-            {renderPermissions()}
-          </ScrollView>
-
-          <View style={styles.footer}>
-            <TouchableOpacity
-              style={[styles.button, styles.cancelButton]}
-              onPress={onClose}
-            >
-              <Text style={styles.cancelButtonText}>Cancel</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={[styles.button, styles.acceptButton]}
-              onPress={onAccept}
-            >
-              <Text style={styles.acceptButtonText}>Accept</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContent: {
-    backgroundColor: '#fff',
-    borderRadius: 16,
-    width: '90%',
-    maxHeight: '80%',
-    overflow: 'hidden',
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-    backgroundColor: COLORS.headerBg,
-  },
-  headerTitle: {
-    flex: 1,
-    fontSize: 18,
-    fontWeight: '600',
-    marginLeft: 12,
-    color: '#000',
-  },
-  closeButton: {
-    padding: 8,
-  },
-  scrollContent: {
-    padding: 16,
-  },
-  description: {
-    fontSize: 16,
-    color: COLORS.text.secondary,
-    marginBottom: 16,
-  },
-  platformContainer: {
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: COLORS.border,
-    borderRadius: 8,
-    padding: 12,
-  },
-  platformHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  platformName: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginLeft: 8,
-  },
-  permissionsContainer: {
-    marginLeft: 32,
-  },
-  permissionText: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginBottom: 4,
-  },
-  footer: {
-    flexDirection: 'row',
-    padding: 16,
-    borderTopWidth: 1,
-    borderTopColor: COLORS.border,
-    justifyContent: 'flex-end',
-  },
-  button: {
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-    borderRadius: 8,
-    marginLeft: 12,
-  },
-  cancelButton: {
-    backgroundColor: COLORS.border,
-  },
-  acceptButton: {
-    backgroundColor: COLORS.primary,
-  },
-  cancelButtonText: {
-    color: COLORS.text.secondary,
-    fontWeight: '600',
-  },
-  acceptButtonText: {
-    color: '#fff',
-    fontWeight: '600',
-  },
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Modal,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS, PLATFORMS } from '../constants';
+
+interface DataRequestModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onAccept: () => void;
+  requestData: Record<string, any>;
+  AppName: string;
+}
+
+export const DataRequestModal: React.FC<DataRequestModalProps> = ({
+  visible,
+  onClose,
+  onAccept,
+  requestData,
+  AppName,
+}) => {
+  const renderDataRequests = () => {
+    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;
+      
+      // Handle new format (personality_traits, sentiment_analysis)
+      if ('name' in data && 'description' in data && 'reward' in data) {
+        return (
+          <View key={key} style={styles.dataRequestContainer}>
+            <View style={styles.dataRequestHeader}>
+              <Icon 
+                name={key === 'personality_traits' ? 'psychology' : 'analytics'} 
+                size={24} 
+                color={COLORS.primary} 
+              />
+              <Text style={styles.dataRequestName}>{data.name}</Text>
+            </View>
+            <Text style={styles.dataRequestDescription}>{data.description}</Text>
+            <View style={styles.rewardContainer}>
+              <Icon name="star" size={16} color="#FFD700" />
+              <Text style={styles.rewardText}>{data.reward}</Text>
+            </View>
+          </View>
+        );
+      }
+      
+      // Handle old format (Small, Medium, Large) for backward compatibility
+      if ('type' in data && 'descriptions' in data && 'reward' in data) {
+        return (
+          <View key={key} style={styles.dataRequestContainer}>
+            <View style={styles.dataRequestHeader}>
+              <Icon name="data_usage" size={24} color={COLORS.primary} />
+              <Text style={styles.dataRequestName}>{key} - {data.type}</Text>
+            </View>
+            <Text style={styles.dataRequestDescription}>{data.descriptions}</Text>
+            <View style={styles.rewardContainer}>
+              <Icon name="star" size={16} color="#FFD700" />
+              <Text style={styles.rewardText}>{data.reward}</Text>
+            </View>
+          </View>
+        );
+      }
+      
+      return null;
+    });
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <View style={styles.modalOverlay}>
+        <View style={styles.modalContent}>
+          <View style={styles.header}>
+            <Icon name="auto_awesome" size={24} color={COLORS.primary} />
+            <Text style={styles.headerTitle}>
+              {AppName} Data Request
+            </Text>
+            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+              <Icon name="close" size={24} color="#000" />
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView style={styles.scrollContent}>
+            <Text style={styles.description}>
+              {AppName} is requesting access to the following data insights:
+            </Text>
+            {renderDataRequests()}
+          </ScrollView>
+
+          <View style={styles.footer}>
+            <TouchableOpacity
+              style={[styles.button, styles.cancelButton]}
+              onPress={onClose}
+            >
+              <Text style={styles.cancelButtonText}>Cancel</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.button, styles.acceptButton]}
+              onPress={onAccept}
+            >
+              <Text style={styles.acceptButtonText}>Accept</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    width: '90%',
+    maxHeight: '80%',
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: COLORS.headerBg,
+  },
+  headerTitle: {
+    flex: 1,
+    fontSize: 18,
+    fontWeight: '600',
+    marginLeft: 12,
+    color: '#000',
+  },
+  closeButton: {
+    padding: 8,
+  },
+  scrollContent: {
+    padding: 16,
+  },
+  description: {
+    fontSize: 16,
+    color: COLORS.text.secondary,
+    marginBottom: 16,
+  },
+  dataRequestContainer: {
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: COLORS.border,
+    borderRadius: 12,
+    padding: 16,
+    backgroundColor: '#f8f9fa',
+  },
+  dataRequestHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  dataRequestName: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginLeft: 12,
+    color: '#000',
+  },
+  dataRequestDescription: {
+    fontSize: 14,
+    color: COLORS.text.secondary,
+    marginBottom: 12,
+    lineHeight: 20,
+  },
+  rewardContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    padding: 8,
+    borderRadius: 8,
+    borderLeftWidth: 3,
+    borderLeftColor: '#FFD700',
+  },
+  rewardText: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginLeft: 6,
+    color: '#000',
+    flex: 1,
+  },
+  footer: {
+    flexDirection: 'row',
+    padding: 16,
+    borderTopWidth: 1,
+    borderTopColor: COLORS.border,
+    justifyContent: 'flex-end',
+  },
+  button: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 8,
+    marginLeft: 12,
+  },
+  cancelButton: {
+    backgroundColor: COLORS.border,
+  },
+  acceptButton: {
+    backgroundColor: COLORS.primary,
+  },
+  cancelButtonText: {
+    color: COLORS.text.secondary,
+    fontWeight: '600',
+  },
+  acceptButtonText: {
+    color: '#fff',
+    fontWeight: '600',
+  },
 }); 

package/src/components/OnairosButton.tsx

@@ -12,7 +12,7 @@ import {
 import { UniversalOnboarding } from './UniversalOnboarding';
 import { Overlay } from './Overlay';
 import { COLORS } from '../constants';
-import type { OnairosButtonProps } from '../types/index';
+import type { OnairosButtonProps } from '../types';
 import { hasCredentials, getCredentials, deleteCredentials as clearCredentials } from '../utils/secureStorage';
 import { onairosApi } from '../api';
 
@@ -26,6 +26,7 @@ export interface OnairosButtonRef {
  */
 export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
   AppName,
+  appIcon,
   requestData,
   returnLink,
   prefillUrl,
@@ -282,6 +283,7 @@ export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
             onRejection?.('User closed onboarding');
           }}
           AppName={AppName}
+          appIcon={appIcon}
           requestData={requestData as any}
           returnLink={returnLink || ''}
           onComplete={handleOnboardingComplete}

package/src/components/Overlay.tsx

@@ -22,21 +22,7 @@ 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}>;
-}
+import type { OverlayProps } from '../types';
 
 export const Overlay: React.FC<OverlayProps> = ({
   data,

package/src/components/UniversalOnboarding.tsx

@@ -50,6 +50,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   visible,
   onClose,
   AppName,
+  appIcon,
   requestData,
   returnLink,
   onComplete,
@@ -781,15 +782,9 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
 
                 {step === 'connect' && (
                   <>
-                    {/* Header with app icon and arrow to Onairos icon */}
+                    {/* Header with Onairos icon and arrow to app icon */}
                     <View style={styles.header}>
                       <View style={styles.headerContent}>
-                        <View style={styles.appIcon}>
-                          <Text style={styles.appIconText}>
-                            {AppName.charAt(0)}
-                          </Text>
-                        </View>
-                        <Icon name="arrow-forward" size={24} color="#666" style={styles.arrow} />
                         <View style={styles.onairosIcon}>
                           <Image 
                             source={require('../assets/images/onairos_logo.png')} 
@@ -797,6 +792,20 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                             resizeMode="contain"
                           />
                         </View>
+                        <Icon name="arrow-forward" size={24} color="#666" style={styles.arrow} />
+                        <View style={styles.appIcon}>
+                          {appIcon ? (
+                            <Image 
+                              source={appIcon} 
+                              style={styles.appIconImage} 
+                              resizeMode="contain"
+                            />
+                          ) : (
+                            <Text style={styles.appIconText}>
+                              {AppName.charAt(0)}
+                            </Text>
+                          )}
+                        </View>
                       </View>
                       
 
@@ -959,21 +968,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
           visible={showDataRequestModal}
           onClose={handleDataRequestDecline}
           onAccept={handleDataRequestAccept}
-          requestData={{
-            // Convert DataTier format to expected format
-            Small: {
-              description: requestData.Small?.descriptions || 'Basic data access',
-              type: requestData.Small?.type || 'basic'
-            },
-            Medium: {
-              description: requestData.Medium?.descriptions || 'Standard data access',
-              type: requestData.Medium?.type || 'standard'
-            },
-            Large: {
-              description: requestData.Large?.descriptions || 'Full data access',
-              type: requestData.Large?.type || 'full'
-            }
-          }}
+          requestData={requestData}
           AppName={AppName}
         />
       )}
@@ -1034,6 +1029,10 @@ const styles = StyleSheet.create({
     fontSize: 24,
     color: '#000',
   },
+  appIconImage: {
+    width: 32,
+    height: 32,
+  },
   arrow: {
     marginHorizontal: 16,
   },

package/src/types.ts

@@ -4,14 +4,26 @@ export interface DataTier {
   reward: string;
 }
 
+export interface DataRequest {
+  name: string;
+  description: string;
+  reward: string;
+}
+
 export interface UniversalOnboardingProps {
   visible: boolean;
   onClose: () => void;
   AppName: string;
+  appIcon?: any; // Optional app icon (React Native ImageSourcePropType)
   requestData: {
-    Small: DataTier;
-    Medium: DataTier;
-    Large: DataTier;
+    // Support both old format (for backward compatibility)
+    Small?: DataTier;
+    Medium?: DataTier;
+    Large?: DataTier;
+    // And new format
+    personality_traits?: DataRequest;
+    sentiment_analysis?: DataRequest;
+    [key: string]: DataTier | DataRequest | undefined;
   };
   returnLink: string;
   onComplete: (apiUrl: string, token: string, data: any) => void;
@@ -38,11 +50,17 @@ export interface OnairosButtonProps {
   returnLink?: string;
   prefillUrl?: string;
   AppName: string;
+  appIcon?: any; // Optional app icon (React Native ImageSourcePropType)
   buttonType?: 'normal' | 'pill';
   requestData?: {
-    Small: DataTier;
-    Medium: DataTier;
-    Large: DataTier;
+    // Support both old format (for backward compatibility)
+    Small?: DataTier;
+    Medium?: DataTier;
+    Large?: DataTier;
+    // And new format
+    personality_traits?: DataRequest;
+    sentiment_analysis?: DataRequest;
+    [key: string]: DataTier | DataRequest | undefined;
   };
   buttonWidth?: number;
   buttonHeight?: number;
@@ -135,15 +153,21 @@ export interface CredentialsResult {
 
 export interface OverlayProps {
   data: {
-    [key: string]: {
-      type: string;
-      descriptions: string;
-      reward: string;
-    };
+    // Support both old format (for backward compatibility)
+    Small?: DataTier;
+    Medium?: DataTier;
+    Large?: DataTier;
+    // And new format
+    personality_traits?: DataRequest;
+    sentiment_analysis?: DataRequest;
+    [key: string]: DataTier | DataRequest | undefined;
   };
   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 interface BiometricOptions {