@onairos/react-native 1.0.0

package/src/components/OnairosButton.tsx

@@ -0,0 +1,182 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  Text,
+  Platform,
+  Linking,
+  Modal,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import * as Keychain from 'react-native-keychain';
+import { UniversalOnboarding } from './UniversalOnboarding';
+import { DataRequestModal } from './DataRequestModal';
+import { useCredentials } from '../hooks/useCredentials';
+import { validateCredentials } from '../utils/auth';
+import { COLORS } from '../constants';
+import type { OnairosButtonProps } from '../types';
+
+export const OnairosButton: React.FC<OnairosButtonProps> = ({
+  AppName,
+  requestData,
+  returnLink,
+  embedd = false,
+  color = '#00BFA5',
+  icon = 'auto_awesome',
+  onResolved,
+  login = false,
+  buttonType = 'circle',
+  debug = false,
+  test = false,
+}) => {
+  const [showOnboarding, setShowOnboarding] = useState(false);
+  const [showDataRequest, setShowDataRequest] = useState(false);
+  const { hasCredentials, getCredentials, validateCredentials } = useCredentials();
+  const [loading, setLoading] = useState(false);
+
+  const handlePress = useCallback(async () => {
+    setLoading(true);
+    try {
+      const hasExisting = await hasCredentials();
+      
+      if (!hasExisting) {
+        setShowOnboarding(true);
+        return;
+      }
+
+      const credentials = await getCredentials();
+      if (!credentials) {
+        setShowOnboarding(true);
+        return;
+      }
+
+      const validationResult = await validateCredentials(credentials.username);
+      if (!validationResult.isValid) {
+        setShowOnboarding(true);
+        return;
+      }
+
+      // If we have valid credentials, show data request modal
+      setShowDataRequest(true);
+    } catch (error) {
+      console.error('Error in button press:', error);
+      setShowOnboarding(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [hasCredentials, getCredentials, validateCredentials]);
+
+  const handleDataRequestAccept = useCallback(async () => {
+    try {
+      const credentials = await getCredentials();
+      if (credentials) {
+        onResolved(
+          'https://api2.onairos.uk',
+          credentials.accessToken,
+          credentials
+        );
+      }
+      setShowDataRequest(false);
+    } catch (error) {
+      console.error('Error handling data request accept:', error);
+    }
+  }, [getCredentials, onResolved]);
+
+  useEffect(() => {
+    // Setup deep linking
+    const handleDeepLink = ({ url }: { url: string }) => {
+      if (url.includes('onairosreact://authenticate')) {
+        // Handle authentication callback
+        const params = new URL(url).searchParams;
+        const nonce = params.get('nonce');
+        const callback = params.get('callback');
+        
+        if (nonce && callback) {
+          // Process authentication
+          setShowOnboarding(false);
+        }
+      }
+    };
+
+    Linking.addEventListener('url', handleDeepLink);
+
+    return () => {
+      // Cleanup deep linking
+      // Note: Remove event listener based on RN version
+      if (Platform.OS === 'android') {
+        Linking.removeEventListener('url', handleDeepLink);
+      }
+    };
+  }, []);
+
+  const buttonStyles = [
+    styles.button,
+    buttonType === 'pill' ? styles.pillButton : styles.circleButton,
+    { backgroundColor: color },
+  ];
+
+  return (
+    <>
+      <TouchableOpacity
+        style={buttonStyles}
+        onPress={handlePress}
+        disabled={loading}
+      >
+        <Icon name={icon} size={24} color="white" />
+        {buttonType === 'pill' && (
+          <Text style={styles.buttonText}>Connect with Onairos</Text>
+        )}
+      </TouchableOpacity>
+
+      <UniversalOnboarding
+        visible={showOnboarding}
+        onClose={() => setShowOnboarding(false)}
+        AppName={AppName}
+        requestData={requestData}
+        returnLink={returnLink}
+        onComplete={onResolved}
+        embedd={embedd}
+        debug={debug}
+        test={test}
+      />
+
+      <DataRequestModal
+        visible={showDataRequest}
+        onClose={() => setShowDataRequest(false)}
+        onAccept={handleDataRequestAccept}
+        requestData={requestData}
+        AppName={AppName}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 3,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+  },
+  circleButton: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+  },
+  pillButton: {
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 25,
+  },
+  buttonText: {
+    color: 'white',
+    marginLeft: 8,
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});