@onairos/react-native 3.0.56 → 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,
@@ -341,7 +327,7 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT * 0.6,
+    height: SCREEN_HEIGHT * 0.8,
     overflow: 'hidden',
   },
   handleContainer: {

package/src/components/TrainingModal.tsx

@@ -280,7 +280,7 @@ const styles = StyleSheet.create({
   bottomSheet: {
     backgroundColor: '#fff',
     width: width,
-    height: height * 0.6,
+    height: height * 0.8,
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     overflow: 'hidden',

package/src/components/UniversalOnboarding.tsx

@@ -50,6 +50,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   visible,
   onClose,
   AppName,
+  appIcon,
   requestData,
   returnLink,
   onComplete,
@@ -605,6 +606,12 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   }, [handleClose]);
 
   const canProceedToPin = useCallback(() => {
+    // For testing, allow proceeding without any platforms connected
+    if (debug || test) {
+      console.log('🧪 Testing mode: Allowing proceed without platform connections');
+      return true;
+    }
+    
     // Check if at least one platform is toggled on
     const hasPlatformConnected = Object.values(platformToggles).some(value => value === true);
     
@@ -615,7 +622,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     }
     
     return hasPlatformConnected;
-  }, [platformToggles, auto, partner, inferenceData]);
+  }, [platformToggles, auto, partner, inferenceData, debug, test]);
 
   const handleProceed = () => {
     console.log('Proceeding to next step');
@@ -775,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')} 
@@ -791,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>
                       
 
@@ -953,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}
         />
       )}
@@ -985,7 +986,7 @@ const styles = StyleSheet.create({
   bottomSheet: {
     backgroundColor: '#fff',
     width: width,
-    height: height * 0.6,
+    height: height * 0.8,
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     overflow: 'hidden',
@@ -1028,6 +1029,10 @@ const styles = StyleSheet.create({
     fontSize: 24,
     color: '#000',
   },
+  appIconImage: {
+    width: 32,
+    height: 32,
+  },
   arrow: {
     marginHorizontal: 16,
   },
@@ -1213,9 +1218,10 @@ const styles = StyleSheet.create({
   // Email input styles
   emailInputContainer: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
     alignItems: 'center',
     padding: 24,
+    paddingTop: 60,
   },
   emailHeader: {
     alignItems: 'center',