@onairos/react-native 1.0.2 → 2.0.0

package/src/components/Overlay.tsx

@@ -1,272 +1,277 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
   ScrollView,
+  Alert,
   Platform,
-  Dimensions,
 } from 'react-native';
-import BottomSheet from '@gorhom/bottom-sheet';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import { BottomSheetModal, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import { COLORS } from '../constants';
+import { onairosApi } from '../api';
+import { encryptModelKey, getServerPublicKey } from '../utils/encryption';
+import * as PackageInfo from 'react-native-package-info';
 
 interface OverlayProps {
-  visible: boolean;
-  onClose: () => void;
-  onAccept: () => void;
-  AppName: string;
-  requestData: Record<string, Record<string, string>>;
-  biometricType?: 'FaceID' | 'TouchID' | 'BiometricID';
+  data: {
+    [key: string]: {
+      type: string;
+      descriptions: string;
+      reward: string;
+    };
+  };
+  username: string;
+  modelKey: string;
+  onResolved: (apiUrl: string, accessToken: string, loginDetails: any) => void;
 }
 
-const { height } = Dimensions.get('window');
-
 export const Overlay: React.FC<OverlayProps> = ({
-  visible,
-  onClose,
-  onAccept,
-  AppName,
-  requestData,
-  biometricType = Platform.OS === 'ios' ? 'FaceID' : 'BiometricID',
+  data,
+  username,
+  modelKey,
+  onResolved,
 }) => {
-  const bottomSheetRef = useRef<BottomSheet>(null);
-  const snapPoints = useMemo(() => ['85%'], []);
+  const [selections, setSelections] = useState<{ [key: string]: boolean }>({});
+  const [details, setDetails] = useState<string>('');
+  const bottomSheetRef = React.useRef<BottomSheetModal>(null);
 
-  // Expand or collapse the bottom sheet based on visibility
   useEffect(() => {
-    if (visible) {
-      bottomSheetRef.current?.expand();
-    } else {
-      bottomSheetRef.current?.close();
+    // Initialize selection state
+    const initialSelections: { [key: string]: boolean } = {};
+    Object.keys(data).forEach((key) => {
+      initialSelections[key] = false;
+    });
+    setSelections(initialSelections);
+    getDetails();
+  }, []);
+
+  const getDetails = async () => {
+    try {
+      const response = await onairosApi.post('getAccountInfo', {
+        Info: {
+          username: username,
+        },
+      });
+      setDetails(response.AccountInfo);
+    } catch (e) {
+      console.error('Error getting account info:', e);
     }
-  }, [visible]);
+  };
+
+  const closeOverlay = () => {
+    bottomSheetRef.current?.dismiss();
+  };
+
+  const confirmSelection = async () => {
+    try {
+      const packageInfo = await PackageInfo.getPackageInfo();
+      const serverPublicKey = await getServerPublicKey();
+      const encryptedModelKey = encryptModelKey(serverPublicKey, modelKey);
+
+      const response = await onairosApi.post('getAPIUrlMobile', {
+        Info: {
+          storage: 'local',
+          appId: packageInfo.packageName,
+          confirmations: selections,
+          developerURL: 'devURL',
+          EncryptedUserPin: encryptedModelKey,
+          account: username,
+          proofMode: false,
+        },
+      });
 
-  // Get the icon for the biometric type
-  const getBiometricIcon = useCallback(() => {
-    switch (biometricType) {
-      case 'FaceID':
-        return 'face';
-      case 'TouchID':
-        return 'fingerprint';
-      default:
-        return 'security';
+      if (response.apiUrl && response.token) {
+        onResolved(response.apiUrl, response.token, { username });
+        closeOverlay();
+      }
+    } catch (e) {
+      console.error('Error in confirmSelection:', e);
+      showErrorModal('Failed to confirm selection. Please try again.');
     }
-  }, [biometricType]);
+  };
 
-  // Render the requested data sections
-  const renderDataCategories = () => {
-    return Object.entries(requestData).map(([category, items]) => (
-      <View key={category} style={styles.categoryContainer}>
-        <Text style={styles.categoryTitle}>{category}</Text>
-        
-        {Object.entries(items).map(([item, description]) => (
-          <View key={item} style={styles.itemContainer}>
-            <Icon name="check-circle" size={20} color={COLORS.primary} />
-            <View style={styles.itemContent}>
-              <Text style={styles.itemTitle}>{item}</Text>
-              <Text style={styles.itemDescription}>{description}</Text>
-            </View>
-          </View>
-        ))}
-      </View>
-    ));
+  const showErrorModal = (errorMessage: string) => {
+    Alert.alert('Notice', errorMessage, [{ text: 'OK' }]);
   };
 
+  const selectedCount = Object.values(selections).filter(Boolean).length;
+
   return (
-    <BottomSheet
+    <BottomSheetModal
       ref={bottomSheetRef}
-      index={visible ? 0 : -1}
-      snapPoints={snapPoints}
-      enablePanDownToClose
-      onClose={onClose}
-      backdropComponent={({ animatedIndex }) => (
-        <View
-          style={[
-            styles.backdrop,
-            {
-              opacity: animatedIndex.interpolate({
-                inputRange: [0, 1],
-                outputRange: [0.5, 0],
-              }),
-            },
-          ]}
+      snapPoints={['80%']}
+      backdropComponent={(props) => (
+        <BottomSheetBackdrop
+          {...props}
+          appearsOnIndex={0}
+          disappearsOnIndex={-1}
         />
       )}
     >
       <View style={styles.container}>
         <View style={styles.header}>
-          <Icon name="shield" size={24} color={COLORS.primary} />
-          <Text style={styles.headerTitle}>Data Request</Text>
-          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-            <Icon name="close" size={24} color="#000" />
+          <Text style={styles.headerTitle}>Onairos</Text>
+          <TouchableOpacity onPress={closeOverlay}>
+            <Text style={styles.closeButton}>×</Text>
           </TouchableOpacity>
+          <Text style={styles.username}>{username}</Text>
         </View>
-        
+
         <ScrollView style={styles.content}>
-          <View style={styles.appInfoContainer}>
-            <Text style={styles.appName}>{AppName}</Text>
-            <Text style={styles.requestText}>
-              is requesting access to the following data:
-            </Text>
-          </View>
-          
-          {renderDataCategories()}
-          
-          <View style={styles.securityNotice}>
-            <Icon name="security" size={20} color="#666" />
-            <Text style={styles.securityText}>
-              Your data is securely processed and never shared with third parties.
-            </Text>
-          </View>
+          {Object.entries(data).map(([key, value]) => (
+            <View key={key} style={styles.card}>
+              <TouchableOpacity
+                style={styles.checkboxContainer}
+                onPress={() =>
+                  setSelections((prev) => ({
+                    ...prev,
+                    [key]: !prev[key],
+                  }))
+                }
+              >
+                <View
+                  style={[
+                    styles.checkbox,
+                    selections[key] && styles.checkboxSelected,
+                  ]}
+                />
+                <View style={styles.cardContent}>
+                  <Text style={styles.cardTitle}>{value.type} Insight</Text>
+                  <Text style={styles.cardDescription}>
+                    Description: {value.descriptions}
+                  </Text>
+                  {value.reward && (
+                    <Text style={styles.cardReward}>
+                      Reward: {value.reward}
+                    </Text>
+                  )}
+                </View>
+              </TouchableOpacity>
+            </View>
+          ))}
         </ScrollView>
-        
+
         <View style={styles.footer}>
           <TouchableOpacity
-            style={styles.cancelButton}
-            onPress={onClose}
+            style={styles.footerButton}
+            onPress={closeOverlay}
           >
-            <Text style={styles.cancelButtonText}>Deny</Text>
+            <Text style={styles.footerButtonText}>Cancel</Text>
           </TouchableOpacity>
-          
+          <Text style={styles.selectedCount}>Selected: {selectedCount}</Text>
           <TouchableOpacity
-            style={styles.acceptButton}
-            onPress={onAccept}
+            style={styles.footerButton}
+            onPress={confirmSelection}
           >
-            <Text style={styles.acceptButtonText}>Accept</Text>
-            <Icon name={getBiometricIcon()} size={20} color="#fff" style={styles.buttonIcon} />
+            <Text style={styles.footerButtonText}>Confirm</Text>
           </TouchableOpacity>
         </View>
       </View>
-    </BottomSheet>
+    </BottomSheetModal>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-  },
-  backdrop: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: '#000',
+    backgroundColor: COLORS.white,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
   },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between',
     padding: 16,
-    backgroundColor: COLORS.headerBg,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
+    backgroundColor: COLORS.primary,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
   },
   headerTitle: {
-    flex: 1,
-    fontSize: 18,
-    fontWeight: '600',
-    marginLeft: 12,
-    color: '#000',
+    fontSize: 24,
+    color: COLORS.white,
+    fontWeight: 'bold',
   },
   closeButton: {
+    fontSize: 24,
+    color: COLORS.white,
     padding: 8,
   },
+  username: {
+    fontSize: 18,
+    color: COLORS.primary,
+  },
   content: {
     flex: 1,
     padding: 16,
   },
-  appInfoContainer: {
-    marginBottom: 24,
-  },
-  appName: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    color: '#000',
-    marginBottom: 4,
-  },
-  requestText: {
-    fontSize: 16,
-    color: '#666',
-  },
-  categoryContainer: {
-    marginBottom: 20,
-  },
-  categoryTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#000',
+  card: {
+    backgroundColor: COLORS.white,
+    borderRadius: 8,
     marginBottom: 12,
+    shadowColor: COLORS.black,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
   },
-  itemContainer: {
+  checkboxContainer: {
     flexDirection: 'row',
-    marginBottom: 12,
-    paddingLeft: 8,
+    padding: 16,
+    alignItems: 'center',
   },
-  itemContent: {
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 4,
+    borderWidth: 2,
+    borderColor: COLORS.primary,
+    marginRight: 12,
+  },
+  checkboxSelected: {
+    backgroundColor: COLORS.primary,
+  },
+  cardContent: {
     flex: 1,
-    marginLeft: 12,
   },
-  itemTitle: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#000',
-    marginBottom: 2,
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 4,
   },
-  itemDescription: {
+  cardDescription: {
     fontSize: 14,
-    color: '#666',
-  },
-  securityNotice: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    backgroundColor: '#f5f5f5',
-    padding: 12,
-    borderRadius: 8,
-    marginBottom: 24,
+    color: COLORS.gray,
+    marginBottom: 4,
   },
-  securityText: {
-    flex: 1,
+  cardReward: {
     fontSize: 14,
-    color: '#666',
-    marginLeft: 8,
+    color: COLORS.success,
+    fontWeight: 'bold',
   },
   footer: {
     flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     padding: 16,
     borderTopWidth: 1,
-    borderTopColor: '#eee',
-  },
-  cancelButton: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 12,
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 25,
-    marginRight: 8,
+    borderTopColor: COLORS.lightGray,
   },
-  cancelButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#666',
-  },
-  acceptButton: {
-    flex: 2,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 12,
+  footerButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 8,
     backgroundColor: COLORS.primary,
-    borderRadius: 25,
-    marginLeft: 8,
   },
-  acceptButtonText: {
+  footerButtonText: {
+    color: COLORS.white,
     fontSize: 16,
     fontWeight: '600',
-    color: '#fff',
-    marginRight: 8,
   },
-  buttonIcon: {
-    marginLeft: 4,
+  selectedCount: {
+    fontSize: 16,
+    color: COLORS.gray,
   },
 });

package/src/components/UniversalOnboarding.tsx

@@ -25,14 +25,15 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   requestData,
   returnLink,
   onComplete,
-  embedd,
-  debug,
-  test,
+  embedd = false,
+  debug = false,
+  test = false,
 }) => {
   const bottomSheetRef = useRef<BottomSheet>(null);
   const [step, setStep] = useState<'connect' | 'pin' | 'training'>('connect');
   const [connections, setConnections] = useState<ConnectionStatus>({});
   const [pin, setPin] = useState<string>('');
+  const [selectedTier, setSelectedTier] = useState<keyof typeof requestData>('Medium');
   const [training, setTraining] = useState<{
     progress: number;
     eta: string;
@@ -90,10 +91,12 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         onComplete('https://api2.onairos.uk', 'dummy-token', {
           pin: userPin,
           connections,
+          selectedTier,
+          tierData: requestData[selectedTier],
         });
       }
     }, 1000);
-  }, [connections, onComplete]);
+  }, [connections, onComplete, selectedTier, requestData]);
 
   const canProceedToPin = useMemo(() => {
     const connectedPlatforms = Object.values(connections).filter(Boolean).length;

package/src/constants/index.ts

@@ -1,19 +1,23 @@
 import type { PlatformConfig } from '../types';
 
 export const COLORS = {
-  primary: '#00BFA5',
-  headerBg: '#E0F2F1',
+  primary: '#1BA9D4',
+  headerBg: '#F8F9FA',
   text: {
     primary: '#000000',
-    secondary: '#757575',
+    secondary: '#666666',
   },
-  border: '#EEEEEE',
-  success: '#4CAF50',
-  error: '#F44336',
-  instagram: '#E4405F',
-  pinterest: '#BD081C',
+  border: '#E5E5E5',
+  success: '#34C759',
+  error: '#FF3B30',
+  instagram: '#E1306C',
+  pinterest: '#E60023',
   reddit: '#FF4500',
   youtube: '#FF0000',
+  white: '#FFFFFF',
+  black: '#000000',
+  gray: '#666666',
+  lightGray: '#E5E5E5',
 };
 
 export const PLATFORMS: Record<string, PlatformConfig> = {

package/src/types/index.ts

@@ -1,34 +1,52 @@
+export interface DataTier {
+  type: string;
+  descriptions: string;
+  reward: string;
+}
+
 export interface OnairosButtonProps {
+  returnLink?: string;
+  prefillUrl?: string;
   AppName: string;
-  requestData: Record<string, Record<string, string>>;
-  returnLink: string;
-  embedd?: boolean;
+  buttonType?: 'normal' | 'pill';
+  requestData?: {
+    Small: DataTier;
+    Medium: DataTier;
+    Large: DataTier;
+  };
+  buttonWidth?: number;
+  buttonHeight?: number;
+  hasStroke?: boolean;
+  enabled?: boolean;
+  buttonForm?: 'default' | 'login' | 'signup';
+  onRejection?: () => void;
+  onResolved?: (apiUrl: string, token: string, userData: any) => void;
+  preCheck?: () => Promise<boolean>;
   color?: string;
-  icon?: string;
-  onResolved: (apiUrl: string, accessToken: string, loginDetails?: Record<string, any>) => void;
-  login?: boolean;
-  buttonType?: 'circle' | 'pill';
+  swerv?: boolean;
   debug?: boolean;
-  test?: boolean;
+  preferredPlatform?: string;
+  testMode?: boolean;
 }
 
 export interface UniversalOnboardingProps {
   visible: boolean;
   onClose: () => void;
   AppName: string;
-  requestData: Record<string, Record<string, string>>;
-  returnLink: string;
-  onComplete: (apiUrl: string, accessToken: string, data: any) => void;
-  embedd?: boolean;
+  requestData?: {
+    Small: DataTier;
+    Medium: DataTier;
+    Large: DataTier;
+  };
+  returnLink?: string;
+  onComplete: (apiUrl: string, token: string, userData: any) => void;
+  preferredPlatform?: string;
   debug?: boolean;
   test?: boolean;
 }
 
 export interface ConnectionStatus {
-  instagram?: { userName: string };
-  pinterest?: { userName: string };
-  reddit?: { userName: string };
-  youtube?: { userName: string };
+  [key: string]: boolean;
 }
 
 export interface PlatformListProps {

package/src/types.ts

@@ -0,0 +1,29 @@
+export interface DataTier {
+  type: string;
+  descriptions: string;
+  reward: string;
+}
+
+export interface UniversalOnboardingProps {
+  visible: boolean;
+  onClose: () => void;
+  AppName: string;
+  requestData: {
+    Small: DataTier;
+    Medium: DataTier;
+    Large: DataTier;
+  };
+  returnLink: string;
+  onComplete: (apiUrl: string, token: string, data: any) => void;
+  embedd?: boolean;
+  debug?: boolean;
+  test?: boolean;
+  buttonType?: 'default' | 'pill';
+  buttonForm?: 'signup' | 'login';
+}
+
+export interface ConnectionStatus {
+  [key: string]: boolean;
+}
+
+// ... rest of the existing types ... 

package/src/utils/encryption.ts

@@ -0,0 +1,25 @@
+import { RSA } from 'react-native-rsa-native';
+import { onairosApi } from '../api';
+
+export const encryptModelKey = async (publicKey: string, modelKey: string): Promise<string> => {
+  try {
+    const encrypted = await RSA.encrypt(modelKey, publicKey);
+    return encrypted;
+  } catch (error) {
+    console.error('Error encrypting model key:', error);
+    throw error;
+  }
+};
+
+export const getServerPublicKey = async (): Promise<string> => {
+  try {
+    const response = await onairosApi.get('public/getPublicKey');
+    if (response && response.publicKey) {
+      return response.publicKey;
+    }
+    throw new Error('Server response does not contain publicKey field');
+  } catch (error) {
+    console.error('Error getting server public key:', error);
+    throw error;
+  }
+};