@onairos/react-native 3.0.16 → 3.0.18

package/src/components/UniversalOnboarding.tsx

@@ -1,289 +1,455 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  Dimensions,
-  Platform,
-  Modal,
-  Animated,
-  SafeAreaView,
-  TouchableWithoutFeedback,
-} 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 {
-    connectPlatform,
-    disconnectPlatform,
-    getConnectionStatus,
-    isConnecting,
-  } = useConnections();
-
-  useEffect(() => {
-    if (visible) {
-      loadInitialStatus();
-      // Animate in
-      Animated.spring(slideAnim, {
-        toValue: 0,
-        useNativeDriver: true,
-        bounciness: 0,
-      }).start();
-      
-      // 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 handlePlatformToggle = useCallback(async (platform: string, connect: boolean) => {
-    try {
-      if (connect) {
-        await connectPlatform(platform);
-      } else {
-        await disconnectPlatform(platform);
-      }
-      await loadInitialStatus();
-    } catch (error) {
-      console.error(`Error toggling ${platform}:`, error);
-    }
-  }, [connectPlatform, disconnectPlatform, loadInitialStatus]);
-
-  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,
-          selectedTier,
-          tierData: requestData?.[selectedTier],
-        });
-      }
-    }, 1000);
-  }, [connections, onComplete, selectedTier, requestData]);
-
-  const canProceedToPin = useCallback(() => {
-    const connectedPlatforms = Object.values(connections).filter(Boolean).length;
-    return connectedPlatforms >= 2;
-  }, [connections]);
-
-  const renderHeader = () => (
-    <View style={styles.header}>
-      <Icon name="auto_awesome" size={24} color={COLORS.primary} />
-      <Text style={styles.headerTitle}>Connect with {AppName}</Text>
-      <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
-        <Icon name="close" size={24} color="#000" />
-      </TouchableOpacity>
-    </View>
-  );
-
-  const renderContent = () => {
-    switch (step) {
-      case 'connect':
-        return (
-          <PlatformList
-            connections={connections}
-            onToggle={handlePlatformToggle}
-            isLoading={isConnecting}
-            canProceed={canProceedToPin()}
-            onProceed={() => setStep('pin')}
-          />
-        );
-      case 'pin':
-        return (
-          <PinInput
-            onSubmit={handlePinSubmit}
-            minLength={8}
-            requireSpecialChar
-            requireNumber
-          />
-        );
-      case 'training':
-        return (
-          <TrainingModal
-            visible={step === 'training'}
-            onClose={handleClose}
-            onComplete={() => {
-              onComplete('https://api2.onairos.uk', 'dummy-token', {
-                pin,
-                connections,
-                selectedTier,
-                tierData: requestData?.[selectedTier],
-              });
-            }}
-            modelKey="onairosTrainingModel"
-            username="demo_user"
-            progress={training.progress}
-            eta={training.eta}
-            onCancel={handleClose}
-          />
-        );
-    }
-  };
-
-  if (!visible) return null;
-
-  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>
-                {renderHeader()}
-                {renderContent()}
-              </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: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-    backgroundColor: COLORS.headerBg,
-  },
-  headerTitle: {
-    flex: 1,
-    fontSize: 18,
-    fontWeight: '600',
-    marginLeft: 12,
-    color: '#000',
-  },
-  closeButton: {
-    padding: 8,
-  },
-}); 
+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',
+  },
+});