@onairos/react-native 3.0.65 → 3.0.66

package/src/components/DataRequestScreen.tsx

@@ -0,0 +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',
+  },
+}); 

package/src/components/UniversalOnboarding.tsx

@@ -22,7 +22,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import { PlatformList } from './PlatformList';
 import { PinInput } from './PinInput';
 import { TrainingModal } from './TrainingModal';
-import { DataRequestModal } from './DataRequestModal';
+import { DataRequestScreen } from './DataRequestScreen';
 import { OAuthWebView } from './onboarding/OAuthWebView';
 import { useConnections } from '../hooks/useConnections';
 import { COLORS, DEEP_LINK_CONFIG } from '../constants';
@@ -80,7 +80,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const [email, setEmail] = useState<string>('');
   const [verificationCode, setVerificationCode] = useState<string>('');
   const [isVerifyingCode, setIsVerifyingCode] = useState<boolean>(false);
-  const [showDataRequestModal, setShowDataRequestModal] = useState<boolean>(false);
+
   const [isExistingUser, setIsExistingUser] = useState<boolean>(false);
   
   // Add refs for cleanup and code inputs
@@ -90,7 +90,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
 
   // Add state for showing additional platforms
   const [showAllPlatforms, setShowAllPlatforms] = useState<boolean>(false);
-  const [showTestDataRequest, setShowTestDataRequest] = useState<boolean>(false);
+
 
   // Parse test mode options
   const testModeOptions = typeof test === 'object' ? test : {};
@@ -598,7 +598,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
           // Flow 1: Existing User → Data Request → Close (return API URL)
           console.log('🧪 Test Flow 1: Existing User → Show Data Request');
           setIsExistingUser(true);
-          setShowDataRequestModal(true);
+          setStep('dataRequest');
           return;
         } else if (isNewUserFlow) {
           // Flow 2: New User → Platform Connect → PIN → Training
@@ -621,8 +621,8 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         setIsExistingUser(existingUser);
         
         if (existingUser) {
-          console.log('👤 Existing user detected, showing data request modal');
-          setShowDataRequestModal(true);
+          console.log('👤 Existing user detected, showing data request screen');
+          setStep('dataRequest');
         } else {
           console.log('🆕 New user, proceeding to platform connection');
           // Safely set username from email prefix
@@ -715,7 +715,6 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
 
   const handleDataRequestAccept = useCallback(() => {
     console.log('Data request accepted for existing user');
-    setShowDataRequestModal(false);
     
     // Complete onboarding for existing user
     onComplete('https://api2.onairos.uk', 'existing-session-token', {
@@ -728,7 +727,6 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
 
   const handleDataRequestDecline = useCallback(() => {
     console.log('Data request declined');
-    setShowDataRequestModal(false);
     handleClose();
   }, [handleClose]);
 
@@ -1031,14 +1029,14 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                         <View style={styles.testModeContainer}>
                           <Text style={styles.testModeTitle}>🧪 Test Mode - 2 Main Flows</Text>
                           
-                          <TouchableOpacity 
-                            style={styles.testExistingUserButton}
-                            onPress={() => {
-                              // Flow 1: Existing User
-                              setIsExistingUser(true);
-                              setShowDataRequestModal(true);
-                            }}
-                          >
+                                                     <TouchableOpacity 
+                             style={styles.testExistingUserButton}
+                             onPress={() => {
+                               // Flow 1: Existing User
+                               setIsExistingUser(true);
+                               setStep('dataRequest');
+                             }}
+                           >
                             <Icon name="person" size={20} color="#28a745" />
                             <Text style={styles.testExistingUserButtonText}>
                               Flow 1: Existing User (Email → Code → Data Request → Close)
@@ -1060,11 +1058,11 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
 
                           <TouchableOpacity 
                             style={styles.testDataRequestButton}
-                            onPress={() => setShowTestDataRequest(true)}
+                            onPress={() => setStep('dataRequest')}
                           >
                             <Icon name="preview" size={20} color={COLORS.primary} />
                             <Text style={styles.testDataRequestButtonText}>
-                              Preview Data Request Modal
+                              Preview Data Request Screen
                             </Text>
                           </TouchableOpacity>
                         </View>
@@ -1145,6 +1143,16 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                     test={isTestMode}
                   />
                 )}
+
+                {step === 'dataRequest' && (
+                  <DataRequestScreen
+                    onAccept={handleDataRequestAccept}
+                    onDecline={handleDataRequestDecline}
+                    requestData={requestData || {}}
+                    AppName={AppName}
+                    appIcon={appIcon}
+                  />
+                )}
                 
                 {step === 'oauth' && oauthUrl && (
                   <OAuthWebView
@@ -1167,30 +1175,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         </View>
       </TouchableWithoutFeedback>
       
-      {/* Data Request Modal for existing users */}
-      {showDataRequestModal && requestData && (
-        <DataRequestModal
-          visible={showDataRequestModal}
-          onClose={handleDataRequestDecline}
-          onAccept={handleDataRequestAccept}
-          requestData={requestData}
-          AppName={AppName}
-        />
-      )}
-      
-      {/* Test mode data request modal */}
-      {showTestDataRequest && requestData && (
-        <DataRequestModal
-          visible={showTestDataRequest}
-          onClose={() => setShowTestDataRequest(false)}
-          onAccept={() => {
-            setShowTestDataRequest(false);
-            Alert.alert('Test Mode', 'This is a preview of the data request. In actual implementation, this would proceed with the data sharing agreement.');
-          }}
-          requestData={requestData}
-          AppName={`${AppName} (Test Preview)`}
-        />
-      )}
+
     </Modal>
   );
 };

package/src/index.ts

@@ -110,6 +110,7 @@ export { PlatformList } from './components/PlatformList';
 export { PinInput } from './components/PinInput';
 export { TrainingModal } from './components/TrainingModal';
 export { EmailVerificationModal } from './components/EmailVerificationModal';
+export { DataRequestScreen } from './components/DataRequestScreen';
 export { Overlay } from './components/Overlay';
 export { UniversalOnboarding } from './components/UniversalOnboarding';
 export { OnairosButton } from './components/OnairosButton';