@onairos/react-native 2.0.9 → 3.0.0

package/src/components/OnairosButton.tsx

@@ -1,18 +1,34 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, Text, StyleSheet, View, ViewStyle, TextStyle } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import { 
+  TouchableOpacity, 
+  Text, 
+  StyleSheet, 
+  View, 
+  ViewStyle, 
+  TextStyle, 
+  Image,
+  ActivityIndicator,
+  Alert 
+} from 'react-native';
 import { UniversalOnboarding } from './UniversalOnboarding';
+import { Overlay } from './Overlay';
 import { COLORS } from '../constants';
 import type { OnairosButtonProps } from '../types';
+import { hasCredentials, getCredentials, clearCredentials } from '../utils/secureStorage';
+import { onairosApi } from '../api';
 
+/**
+ * OnairosButton Component - A sign-in button similar to Google/Apple sign-in
+ */
 export const OnairosButton: React.FC<OnairosButtonProps> = ({
   returnLink,
   prefillUrl,
   AppName,
   buttonType = 'normal',
   requestData,
-  buttonWidth = 180,
-  buttonHeight,
-  hasStroke = false,
+  buttonWidth = 240,
+  buttonHeight = 48,
+  hasStroke = true,
   enabled = true,
   buttonForm = 'default',
   onRejection,
@@ -25,40 +41,100 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
   testMode = false,
 }) => {
   const [showOnboarding, setShowOnboarding] = useState(false);
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [storedCredentials, setStoredCredentials] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
+  const isDarkMode = color === 'black' || (!color && !hasStroke);
+  
   const handlePress = async () => {
-    if (!enabled) return;
+    if (!enabled || isLoading) return;
+    
+    setIsLoading(true);
+    
+    try {
+      if (preCheck) {
+        const shouldProceed = await preCheck();
+        if (!shouldProceed) {
+          onRejection?.('Precheck validation failed');
+          return;
+        }
+      }
 
-    if (preCheck) {
-      const shouldProceed = await preCheck();
-      if (!shouldProceed) {
-        onRejection?.();
-        return;
+      // Check if credentials exist
+      const hasStoredCreds = await hasCredentials();
+      
+      if (hasStoredCreds) {
+        // If credentials exist, fetch them and verify
+        const credentials = await getCredentials();
+        
+        if (!credentials || !credentials.username || !credentials.userPin) {
+          // Invalid credentials, clear and start fresh
+          await clearCredentials();
+          setShowOnboarding(true);
+          return;
+        }
+        
+        // Validate credentials with server
+        const isValid = await onairosApi.validateCredentials(credentials.username);
+        
+        if (!isValid) {
+          // Clear invalid credentials
+          await clearCredentials();
+          setShowOnboarding(true);
+          return;
+        }
+        
+        // Store and display overlay with valid credentials
+        setStoredCredentials(credentials);
+        setShowOverlay(true);
+      } else {
+        // If no credentials, show onboarding
+        setShowOnboarding(true);
       }
+    } catch (error) {
+      console.error('Error during button press flow:', error);
+      Alert.alert('Error', 'An error occurred. Please try again later.');
+      onRejection?.(error instanceof Error ? error.message : 'Unknown error');
+    } finally {
+      setIsLoading(false);
     }
-
-    setShowOnboarding(true);
   };
 
-  const handleOnboardingComplete = (apiUrl: string, token: string, data: any) => {
+  const handleOnboardingComplete = useCallback((apiUrl: string, token: string, data: any) => {
     setShowOnboarding(false);
-    onResolved?.(apiUrl, token, data);
-  };
+    if (onResolved) {
+      onResolved(apiUrl, token, data);
+    }
+  }, [onResolved]);
+  
+  const handleOverlayResolved = useCallback((apiUrl: string, token: string, data: any) => {
+    setShowOverlay(false);
+    if (onResolved) {
+      onResolved(apiUrl, token, data);
+    }
+  }, [onResolved]);
 
+  // Calculate button styles based on props
   const buttonStyle: ViewStyle[] = [
     styles.button,
     buttonType === 'pill' && styles.pillButton,
     hasStroke && styles.strokedButton,
-    { width: buttonWidth },
-    buttonHeight ? { height: buttonHeight } : null,
+    { 
+      width: buttonWidth,
+      height: buttonHeight
+    },
     color ? { backgroundColor: color } : null,
+    isDarkMode ? styles.darkButton : styles.lightButton,
     swerv && styles.swervButton,
+    !enabled && styles.disabledButton
   ].filter(Boolean) as ViewStyle[];
 
+  // Calculate text styles based on props
   const textStyle: TextStyle[] = [
     styles.buttonText,
-    hasStroke && styles.strokedButtonText,
-    color ? styles.customColorText : null,
+    isDarkMode ? styles.lightText : styles.darkText,
+    !enabled && styles.disabledText
   ].filter(Boolean) as TextStyle[];
 
   return (
@@ -66,37 +142,62 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
       <TouchableOpacity
         style={buttonStyle}
         onPress={handlePress}
-        disabled={!enabled}
+        disabled={!enabled || isLoading}
+        accessibilityLabel={`Sign in with Onairos`}
       >
-        <Text style={textStyle}>{AppName}</Text>
+        {isLoading ? (
+          <ActivityIndicator 
+            size="small" 
+            color={isDarkMode ? '#fff' : '#000'} 
+          />
+        ) : (
+          <>
+            {/* Optional Onairos logo could be added here */}
+            <Text style={textStyle}>Sign in with Onairos</Text>
+          </>
+        )}
       </TouchableOpacity>
 
-      <UniversalOnboarding
-        visible={showOnboarding}
-        onClose={() => setShowOnboarding(false)}
-        AppName={AppName}
-        requestData={requestData}
-        returnLink={returnLink}
-        onComplete={handleOnboardingComplete}
-        preferredPlatform={preferredPlatform}
-        debug={debug}
-        test={testMode}
-      />
+      {showOnboarding && (
+        <UniversalOnboarding
+          visible={showOnboarding}
+          onClose={() => {
+            setShowOnboarding(false);
+            onRejection?.('User closed onboarding');
+          }}
+          AppName={AppName}
+          requestData={requestData}
+          returnLink={returnLink}
+          onComplete={handleOnboardingComplete}
+          preferredPlatform={preferredPlatform}
+          debug={debug}
+          test={testMode}
+        />
+      )}
+      
+      {showOverlay && storedCredentials && (
+        <Overlay
+          data={requestData || {}}
+          username={storedCredentials.username}
+          modelKey={storedCredentials.userPin || ''}
+          onResolved={handleOverlayResolved}
+        />
+      )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: '#000',
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    borderRadius: 8,
+    flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 4,
   },
   pillButton: {
-    borderRadius: 20,
+    borderRadius: 24,
   },
   strokedButton: {
     backgroundColor: 'transparent',
@@ -106,15 +207,29 @@ const styles = StyleSheet.create({
   swervButton: {
     transform: [{ rotate: '-2deg' }],
   },
+  darkButton: {
+    backgroundColor: '#000',
+    borderColor: '#000',
+  },
+  lightButton: {
+    backgroundColor: '#fff',
+    borderColor: '#000',
+  },
+  disabledButton: {
+    opacity: 0.6,
+  },
   buttonText: {
-    color: '#fff',
     fontSize: 16,
     fontWeight: '600',
+    textAlign: 'center',
+  },
+  lightText: {
+    color: '#fff',
   },
-  strokedButtonText: {
+  darkText: {
     color: '#000',
   },
-  customColorText: {
-    color: '#fff',
+  disabledText: {
+    opacity: 0.7,
   },
 }); 

package/src/components/Overlay.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   View,
   Text,
@@ -7,6 +7,7 @@ import {
   ScrollView,
   Alert,
   Platform,
+  Dimensions,
 } from 'react-native';
 import { BottomSheetModal, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 // import DeviceInfo from 'react-native-device-info';  // Comment out device info import
@@ -35,7 +36,8 @@ export const Overlay: React.FC<OverlayProps> = ({
 }) => {
   const [selections, setSelections] = useState<{ [key: string]: boolean }>({});
   const [details, setDetails] = useState<string>('');
-  const bottomSheetRef = React.useRef<BottomSheetModal>(null);
+  const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const snapPoints = ['60%']; // Set to 60% of screen height
 
   useEffect(() => {
     // Initialize selection state
@@ -45,6 +47,11 @@ export const Overlay: React.FC<OverlayProps> = ({
     });
     setSelections(initialSelections);
     getDetails();
+    
+    // Present the bottom sheet when component mounts
+    setTimeout(() => {
+      bottomSheetRef.current?.present();
+    }, 100);
   }, []);
 
   const getDetails = async () => {
@@ -107,14 +114,19 @@ export const Overlay: React.FC<OverlayProps> = ({
   return (
     <BottomSheetModal
       ref={bottomSheetRef}
-      snapPoints={['80%']}
+      snapPoints={snapPoints}
+      handleIndicatorStyle={styles.handleIndicator}
       backdropComponent={(props) => (
         <BottomSheetBackdrop
           {...props}
           appearsOnIndex={0}
           disappearsOnIndex={-1}
+          opacity={0.7}
         />
       )}
+      enablePanDownToClose={true}
+      keyboardBehavior="interactive"
+      keyboardBlurBehavior="restore"
     >
       <View style={styles.container}>
         <View style={styles.header}>
@@ -179,12 +191,18 @@ export const Overlay: React.FC<OverlayProps> = ({
   );
 };
 
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: COLORS.white,
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
+    width: SCREEN_WIDTH,
+  },
+  handleIndicator: {
+    backgroundColor: '#999',
+    width: 40,
+    height: 5,
   },
   header: {
     flexDirection: 'row',
@@ -207,7 +225,7 @@ const styles = StyleSheet.create({
   },
   username: {
     fontSize: 18,
-    color: COLORS.primary,
+    color: COLORS.white,
   },
   content: {
     flex: 1,

package/src/index.ts

@@ -1,7 +1,13 @@
-// Components
+/**
+ * Onairos React Native SDK
+ * A React Native implementation for Onairos personalized data integration
+ */
+
+// Main components
+export { Onairos } from './components/Onairos';
 export { OnairosButton } from './components/OnairosButton';
+export { Overlay as OnairosOverlay } from './components/Overlay';
 export { UniversalOnboarding } from './components/UniversalOnboarding';
-export { Overlay } from './components/Overlay';
 
 // Screen Components
 export { ConnectorScreen } from './components/screens/ConnectorScreen';
@@ -15,8 +21,8 @@ export { OnboardingHeader } from './components/onboarding/OnboardingHeader';
 export { PinInput } from './components/onboarding/PinInput';
 
 // Hooks
-export { useConnections } from './hooks/useConnections';
 export { useCredentials } from './hooks/useCredentials';
+export { useConnections } from './hooks/useConnections';
 
 // Utilities
 export { 
@@ -63,8 +69,10 @@ export {
 // Types
 export type {
   OnairosButtonProps,
+  DataTier,
   UniversalOnboardingProps,
   ConnectionStatus,
+  OnairosCredentials,
   PlatformListProps,
   PinInputProps,
   TrainingModalProps,
@@ -74,9 +82,15 @@ export type {
   ApiResponse,
 } from './types';
 
-export type { OnairosCredentials, StorageOptions } from './utils/secureStorage';
+export type { StorageOptions } from './utils/secureStorage';
 export type { OAuthConfig } from './services/oauthService';
 export type { ApiErrorType, ApiError } from './utils/onairosApi';
 
 // Constants
-export { COLORS, PLATFORMS, API_ENDPOINTS, STORAGE_KEYS, PIN_REQUIREMENTS, DEEP_LINK_CONFIG } from './constants';
+export { COLORS, PLATFORMS, API_ENDPOINTS, STORAGE_KEYS, PIN_REQUIREMENTS, DEEP_LINK_CONFIG } from './constants';
+
+// API and Services
+export { onairosApi } from './api';
+export { OAuthService } from './services/OAuthService';
+export * from './utils/secureStorage';
+export * from './utils/encryption';

package/src/services/oauthService.ts

@@ -1,6 +1,7 @@
 import { Linking, Platform } from 'react-native';
 import { updateCredentials, OnairosCredentials } from '../utils/secureStorage';
 import { sha256 } from '../utils/crypto';
+import { onairosApi } from '../api';
 
 // Define OAuth configuration types
 export interface OAuthConfig {
@@ -358,3 +359,176 @@ export const storePlatformConnection = async (
     return false;
   }
 };
+
+export interface AuthorizationData {
+  accountName: string;
+  authUrl: string;
+}
+
+export interface PlatformConnectionResult {
+  success: boolean;
+  userName?: string;
+  error?: string;
+}
+
+/**
+ * Service for handling OAuth connections to various platforms
+ */
+export const OAuthService = {
+  // Base API URL
+  _apiBaseUrl: 'https://api2.onairos.uk',
+  
+  /**
+   * Connect to a specific platform using OAuth
+   * @param platform The platform to connect to (e.g., 'instagram', 'youtube')
+   * @returns A promise that resolves to a connection result
+   */
+  connectPlatform: async (platform: string): Promise<PlatformConnectionResult> => {
+    try {
+      console.log(`[OAuth] Initiating connection to ${platform}`);
+      
+      // Get authorization data from API
+      const authData = await OAuthService._getAuthorizationData(platform);
+      
+      if (!authData || !authData.accountName) {
+        throw new Error(`Failed to get authorization data for ${platform}`);
+      }
+      
+      // Launch the OAuth flow in a WebView
+      const success = await OAuthService._launchOAuthFlow(
+        platform,
+        `${OAuthService._apiBaseUrl}/${authData.accountName}/authorize`,
+        `onairos://${platform.toLowerCase()}/callback`
+      );
+      
+      return {
+        success,
+        userName: success ? `User_${platform}` : undefined,
+        error: success ? undefined : `Failed to connect to ${platform}`
+      };
+    } catch (error) {
+      console.error(`${platform} connection error:`, error);
+      return { 
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error'
+      };
+    }
+  },
+  
+  /**
+   * Get authorization data for a platform from the API
+   * @param platform The platform to get authorization data for
+   * @returns Authorization data for the platform
+   */
+  _getAuthorizationData: async (platform: string): Promise<AuthorizationData> => {
+    try {
+      // For testing, we can use a mock app ID
+      let appId = 'com.onairos.mock';
+      
+      // In real implementation, we would get this from the app's package info
+      try {
+        // This would normally use react-native-device-info or similar
+        // appId = await DeviceInfo.getBundleId();
+      } catch (e) {
+        console.warn('Failed to get app identifier:', e);
+      }
+      
+      const response = await onairosApi.post('getOAuthData', {
+        platform,
+        appId: appId,
+        redirectUri: `onairos://${platform.toLowerCase()}/callback`,
+      });
+      
+      if (response && response.accountName) {
+        return {
+          accountName: response.accountName,
+          authUrl: `${OAuthService._apiBaseUrl}/${response.accountName}/authorize`,
+        };
+      } else {
+        throw new Error('Invalid response from getOAuthData');
+      }
+    } catch (error) {
+      console.error('Error getting authorization data:', error);
+      throw error;
+    }
+  },
+  
+  /**
+   * Launch the OAuth flow for a platform
+   * @param platform The platform to launch the OAuth flow for
+   * @param authUrl The URL to authorize with
+   * @param callbackUrlPattern The URL pattern to expect as a callback
+   * @returns A promise that resolves to true if the connection was successful
+   */
+  _launchOAuthFlow: async (
+    platform: string, 
+    authUrl: string, 
+    callbackUrlPattern: string
+  ): Promise<boolean> => {
+    try {
+      console.log(`[OAuth] Opening URL for ${platform}: ${authUrl}`);
+      
+      // For now, we'll use a simpler approach just to mock the flow
+      // In a real implementation, this would open a WebView in a modal
+      // and handle the OAuth callback
+      
+      // Check if we can open the URL
+      const canOpen = await Linking.canOpenURL(authUrl);
+      
+      if (!canOpen) {
+        throw new Error(`Cannot open URL: ${authUrl}`);
+      }
+      
+      // We'll simulate a successful connection after a delay
+      // In a real app, this would be handled by the WebView navigation
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      // Return success
+      return true;
+    } catch (error) {
+      console.error(`Error launching OAuth flow for ${platform}:`, error);
+      return false;
+    }
+  },
+  
+  /**
+   * Handle an OAuth callback URL
+   * @param url The callback URL to handle
+   * @returns The result of processing the callback
+   */
+  handleCallback: async (url: string): Promise<PlatformConnectionResult> => {
+    try {
+      console.log(`[OAuth] Handling callback URL: ${url}`);
+      
+      // Extract the platform and parameters from the URL
+      const urlParts = url.split('/');
+      const platform = urlParts[2]; // Assuming format is onairos://platform/callback
+      
+      // Extract query parameters
+      const params = new URLSearchParams(url.split('?')[1] || '');
+      const code = params.get('code');
+      
+      if (!code) {
+        return { 
+          success: false,
+          error: 'No authorization code found in callback URL'
+        };
+      }
+      
+      // In a real implementation, we would send the code to the API
+      // to get an access token
+      
+      // Simulate a successful connection
+      return { 
+        success: true,
+        userName: `User_${platform}` 
+      };
+    } catch (error) {
+      console.error('Error handling OAuth callback:', error);
+      return { 
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error'
+      };
+    }
+  }
+};

package/src/types/index.ts

@@ -19,7 +19,7 @@ export interface OnairosButtonProps {
   hasStroke?: boolean;
   enabled?: boolean;
   buttonForm?: 'default' | 'login' | 'signup';
-  onRejection?: () => void;
+  onRejection?: (error?: string) => void;
   onResolved?: (apiUrl: string, token: string, userData: any) => void;
   preCheck?: () => Promise<boolean>;
   color?: string;
@@ -81,13 +81,31 @@ export interface OAuthWebViewProps {
   onClose: () => void;
 }
 
-export interface CredentialsResult {
-  isValid: boolean;
-  credentials?: {
-    username?: string;
-    userPin?: string;
-    accessToken?: string;
+export interface OnairosCredentials {
+  username: string;
+  accessToken?: string;
+  refreshToken?: string;
+  userPin?: string;
+  platforms?: {
+    instagram?: { token: string; username: string };
+    youtube?: { token: string; username: string };
+    pinterest?: { token: string; username: string };
+    reddit?: { token: string; username: string };
   };
+  createdAt: number;
+}
+
+export interface OverlayProps {
+  data: {
+    [key: string]: {
+      type: string;
+      descriptions: string;
+      reward: string;
+    };
+  };
+  username: string;
+  modelKey: string;
+  onResolved: (apiUrl: string, accessToken: string, loginDetails: any) => void;
 }
 
 export interface PlatformConfig {
@@ -97,6 +115,19 @@ export interface PlatformConfig {
   description?: string;
 }
 
+export interface BiometricOptions {
+  title: string;
+  subtitle?: string;
+  description?: string;
+  cancelText?: string;
+}
+
+export interface PinRequirements {
+  minLength: number;
+  requireSpecialChar: boolean;
+  requireNumber: boolean;
+}
+
 export interface ApiResponse<T> {
   success: boolean;
   data?: T;