@onairos/react-native 3.4.1 → 3.5.4

package/src/components/UniversalOnboarding.tsx.new

@@ -1,455 +0,0 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  Dimensions,
-  Platform,
-  Modal,
-  Animated,
-  SafeAreaView,
-  TouchableWithoutFeedback,
-  ScrollView,
-  Image,
-  Switch,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { PlatformList } from './PlatformList';
-import { PinInput } from './PinInput';
-import { TrainingModal } from './TrainingModal';
-import { useConnections } from '../hooks/useConnections';
-import { COLORS } from '../constants';
-import type { UniversalOnboardingProps, ConnectionStatus } from '../types';
-
-const { height, width } = Dimensions.get('window');
-
-export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
-  visible,
-  onClose,
-  AppName,
-  requestData,
-  returnLink,
-  onComplete,
-  embedd = false,
-  debug = false,
-  test = false,
-  preferredPlatform,
-}) => {
-  const [step, setStep] = useState<'connect' | 'pin' | 'training'>('connect');
-  const [connections, setConnections] = useState<ConnectionStatus>({});
-  const [pin, setPin] = useState<string>('');
-  const [selectedTier, setSelectedTier] = useState<'Small' | 'Medium' | 'Large'>('Medium');
-  const [training, setTraining] = useState<{
-    progress: number;
-    eta: string;
-  }>({ progress: 0, eta: '' });
-  const [slideAnim] = useState(new Animated.Value(height));
-  const [platformToggles, setPlatformToggles] = useState<{[key: string]: boolean}>({});
-
-  const platforms = [
-    { id: 'instagram', name: 'Instagram', icon: require('../assets/images/instagram.png') },
-    { id: 'youtube', name: 'YouTube', icon: require('../assets/images/youtube.png') },
-  ];
-
-  const {
-    connectPlatform,
-    disconnectPlatform,
-    getConnectionStatus,
-    isConnecting,
-  } = useConnections();
-
-  useEffect(() => {
-    if (visible) {
-      loadInitialStatus();
-      // Animate in
-      Animated.spring(slideAnim, {
-        toValue: 0,
-        useNativeDriver: true,
-        bounciness: 0,
-      }).start();
-      
-      // Initialize platform toggles
-      const initialToggles: { [key: string]: boolean } = {};
-      platforms.forEach((platform) => {
-        initialToggles[platform.id] = false;
-      });
-      setPlatformToggles(initialToggles);
-      
-      // Debug mode for Expo Go
-      if (debug || Platform.OS === 'web') {
-        console.log('Debug mode enabled - Using mock data for onboarding');
-        // Pre-populate with mock connections in debug mode
-        if (test || Platform.OS === 'web') {
-          setConnections({
-            instagram: { userName: 'instagram_user', connected: true },
-            youtube: { userName: 'youtube_user', connected: true },
-          });
-        }
-      }
-      
-      // If there's a preferred platform, pre-connect
-      if (preferredPlatform && debug) {
-        setConnections(prev => ({
-          ...prev,
-          [preferredPlatform]: { userName: `${preferredPlatform}_user`, connected: true }
-        }));
-      }
-    } else {
-      // Animate out
-      Animated.timing(slideAnim, {
-        toValue: height,
-        duration: 250,
-        useNativeDriver: true,
-      }).start(() => {
-        // Reset state if needed
-      });
-    }
-  }, [visible, preferredPlatform]);
-
-  const handleClose = () => {
-    // Animate out and then call onClose
-    Animated.timing(slideAnim, {
-      toValue: height,
-      duration: 250,
-      useNativeDriver: true,
-    }).start(() => {
-      onClose();
-    });
-  };
-
-  const loadInitialStatus = useCallback(async () => {
-    const status = await getConnectionStatus();
-    setConnections(status);
-  }, [getConnectionStatus]);
-
-  const togglePlatform = useCallback((platformId: string) => {
-    setPlatformToggles(prev => ({
-      ...prev,
-      [platformId]: !prev[platformId]
-    }));
-  }, []);
-
-  const handlePinSubmit = useCallback(async (userPin: string) => {
-    setPin(userPin);
-    setStep('training');
-    // Simulate training progress
-    let progress = 0;
-    const interval = setInterval(() => {
-      progress += 0.1;
-      setTraining({
-        progress,
-        eta: `${Math.round((1 - progress) * 100)} seconds remaining`,
-      });
-      if (progress >= 1) {
-        clearInterval(interval);
-        onComplete('https://api2.onairos.uk', 'dummy-token', {
-          pin: userPin,
-          connections,
-          platformToggles,
-          selectedTier,
-          tierData: requestData?.[selectedTier],
-        });
-      }
-    }, 1000);
-  }, [connections, onComplete, selectedTier, requestData, platformToggles]);
-
-  const canProceedToPin = useCallback(() => {
-    // Check if at least one platform is toggled on
-    return Object.values(platformToggles).some(value => value === true);
-  }, [platformToggles]);
-
-  const handleProceed = () => {
-    if (canProceedToPin()) {
-      setStep('pin');
-    }
-  };
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="none"
-      statusBarTranslucent
-      onRequestClose={handleClose}
-    >
-      <TouchableWithoutFeedback onPress={handleClose}>
-        <View style={styles.modalOverlay}>
-          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
-            <Animated.View 
-              style={[
-                styles.bottomSheet,
-                {
-                  transform: [{ translateY: slideAnim }],
-                }
-              ]}
-            >
-              <SafeAreaView style={styles.container}>
-                <View style={styles.handleContainer}>
-                  <View style={styles.handle} />
-                </View>
-                
-                {step === 'connect' && (
-                  <>
-                    {/* Header with app icon and arrow to Onairos 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}>
-                          <Text style={styles.onairosIconText}>O</Text>
-                        </View>
-                      </View>
-                    </View>
-
-                    <ScrollView style={styles.content}>
-                      {/* Main title and description */}
-                      <View style={styles.titleContainer}>
-                        <Text style={styles.mainTitle}>
-                          Connect your data to create a Persona of you, to connect to Cosmos
-                        </Text>
-                        <Text style={styles.privacyMessage}>
-                          None of your app data is shared with ANYONE
-                        </Text>
-                      </View>
-
-                      {/* Platform connection options */}
-                      <View style={styles.platformsContainer}>
-                        {platforms.map((platform) => (
-                          <View key={platform.id} style={styles.platformItem}>
-                            <View style={styles.platformInfo}>
-                              <Image 
-                                source={platform.icon} 
-                                style={styles.platformIcon} 
-                                resizeMode="contain"
-                              />
-                              <Text style={styles.platformName}>
-                                {platform.name}
-                              </Text>
-                            </View>
-                            <Switch
-                              value={platformToggles[platform.id]}
-                              onValueChange={() => togglePlatform(platform.id)}
-                              trackColor={{ false: '#767577', true: '#81b0ff' }}
-                              thumbColor={platformToggles[platform.id] ? '#2196F3' : '#f4f3f4'}
-                            />
-                          </View>
-                        ))}
-                      </View>
-                    </ScrollView>
-
-                    <View style={styles.footer}>
-                      <TouchableOpacity
-                        style={styles.footerButtonCancel}
-                        onPress={handleClose}
-                      >
-                        <Text style={styles.footerButtonText}>Cancel</Text>
-                      </TouchableOpacity>
-
-                      <TouchableOpacity
-                        style={[
-                          styles.footerButtonConfirm,
-                          !canProceedToPin() && styles.footerButtonDisabled
-                        ]}
-                        onPress={handleProceed}
-                        disabled={!canProceedToPin()}
-                      >
-                        <Text style={styles.footerButtonTextConfirm}>Connect</Text>
-                      </TouchableOpacity>
-                    </View>
-                  </>
-                )}
-
-                {step === 'pin' && (
-                  <PinInput
-                    onSubmit={handlePinSubmit}
-                    minLength={8}
-                    requireSpecialChar
-                    requireNumber
-                  />
-                )}
-
-                {step === 'training' && (
-                  <TrainingModal
-                    visible={step === 'training'}
-                    onClose={handleClose}
-                    onComplete={() => {
-                      onComplete('https://api2.onairos.uk', 'dummy-token', {
-                        pin,
-                        connections,
-                        platformToggles,
-                        selectedTier,
-                        tierData: requestData?.[selectedTier],
-                      });
-                    }}
-                    modelKey="onairosTrainingModel"
-                    username="demo_user"
-                    progress={training.progress}
-                    eta={training.eta}
-                    onCancel={handleClose}
-                  />
-                )}
-              </SafeAreaView>
-            </Animated.View>
-          </TouchableWithoutFeedback>
-        </View>
-      </TouchableWithoutFeedback>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
-  bottomSheet: {
-    backgroundColor: '#fff',
-    width: width,
-    height: height * 0.9,
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    overflow: 'hidden',
-  },
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  handleContainer: {
-    width: '100%',
-    alignItems: 'center',
-    paddingTop: 12,
-    paddingBottom: 8,
-  },
-  handle: {
-    width: 40,
-    height: 5,
-    borderRadius: 3,
-    backgroundColor: '#E0E0E0',
-  },
-  header: {
-    padding: 24,
-    alignItems: 'center',
-  },
-  headerContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 16,
-  },
-  appIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 16,
-    backgroundColor: '#F5F5F5',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  appIconText: {
-    fontSize: 24,
-    color: '#000',
-  },
-  arrow: {
-    marginHorizontal: 16,
-  },
-  onairosIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 16,
-    backgroundColor: '#F5F5F5',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  onairosIconText: {
-    fontSize: 24,
-    color: '#000',
-  },
-  titleContainer: {
-    marginBottom: 30,
-  },
-  mainTitle: {
-    fontSize: 22,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  privacyMessage: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  content: {
-    flex: 1,
-    paddingHorizontal: 24,
-  },
-  platformsContainer: {
-    marginTop: 16,
-  },
-  platformItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 16,
-    backgroundColor: '#fff',
-    borderRadius: 16,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: '#eee',
-  },
-  platformInfo: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  platformIcon: {
-    width: 32,
-    height: 32,
-    marginRight: 12,
-  },
-  platformName: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#000',
-  },
-  footer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 24,
-    borderTopWidth: 1,
-    borderTopColor: '#eee',
-    backgroundColor: '#fff',
-  },
-  footerButtonCancel: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-  footerButtonConfirm: {
-    paddingVertical: 16,
-    paddingHorizontal: 32,
-    borderRadius: 16,
-    backgroundColor: '#fff',
-    borderWidth: 1,
-    borderColor: '#000',
-  },
-  footerButtonDisabled: {
-    opacity: 0.5,
-  },
-  footerButtonText: {
-    color: '#666',
-    fontSize: 16,
-  },
-  footerButtonTextConfirm: {
-    color: '#000',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-});