@onairos/react-native 3.1.18 → 3.2.1

package/lib/module/components/UniversalOnboarding.tsx.new

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