@onairos/react-native 3.0.18 → 3.0.19

package/src/components/TrainingModal.tsx

@@ -1,132 +1,222 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS } from '../constants';
-import type { TrainingModalProps } from '../types';
-
-export const TrainingModal: React.FC<TrainingModalProps> = ({
-  progress,
-  eta,
-  onCancel,
-}) => {
-  const progressPercentage = Math.round(progress * 100);
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.content}>
-        <Icon name="auto_awesome" size={48} color={COLORS.primary} />
-        
-        <Text style={styles.title}>Training Your AI Model</Text>
-        <Text style={styles.subtitle}>
-          We're analyzing your social media data to create your personalized AI model
-        </Text>
-
-        <View style={styles.progressContainer}>
-          <View style={styles.progressBar}>
-            <View
-              style={[
-                styles.progressFill,
-                { width: `${progressPercentage}%` },
-              ]}
-            />
-          </View>
-          <Text style={styles.progressText}>{progressPercentage}%</Text>
-        </View>
-
-        <Text style={styles.etaText}>Estimated time remaining: {eta}</Text>
-
-        <View style={styles.loadingContainer}>
-          <ActivityIndicator size="small" color={COLORS.primary} />
-          <Text style={styles.loadingText}>Processing your data...</Text>
-        </View>
-
-        <TouchableOpacity
-          style={styles.cancelButton}
-          onPress={onCancel}
-        >
-          <Text style={styles.cancelButtonText}>Cancel</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 24,
-  },
-  content: {
-    width: '100%',
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-    marginTop: 24,
-    marginBottom: 8,
-    color: COLORS.text.primary,
-    textAlign: 'center',
-  },
-  subtitle: {
-    fontSize: 16,
-    color: COLORS.text.secondary,
-    textAlign: 'center',
-    marginBottom: 32,
-  },
-  progressContainer: {
-    width: '100%',
-    marginBottom: 16,
-  },
-  progressBar: {
-    height: 8,
-    backgroundColor: COLORS.border,
-    borderRadius: 4,
-    overflow: 'hidden',
-  },
-  progressFill: {
-    height: '100%',
-    backgroundColor: COLORS.primary,
-    borderRadius: 4,
-  },
-  progressText: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    textAlign: 'center',
-    marginTop: 8,
-  },
-  etaText: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginBottom: 24,
-  },
-  loadingContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 32,
-  },
-  loadingText: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginLeft: 8,
-  },
-  cancelButton: {
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: COLORS.border,
-  },
-  cancelButtonText: {
-    fontSize: 16,
-    color: COLORS.text.secondary,
-  },
-}); 
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+  Dimensions,
+  Modal,
+  Animated,
+  TouchableWithoutFeedback,
+  SafeAreaView,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS } from '../constants';
+import type { TrainingModalProps } from '../types';
+
+const { width, height } = Dimensions.get('window');
+
+export const TrainingModal: React.FC<TrainingModalProps> = ({
+  visible,
+  progress,
+  eta,
+  onCancel,
+  onComplete,
+  modelKey,
+  username,
+}) => {
+  const progressPercentage = Math.round(progress * 100);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={onCancel}
+    >
+      <TouchableWithoutFeedback>
+        <View style={styles.modalOverlay}>
+          <TouchableWithoutFeedback>
+            <View style={styles.bottomSheet}>
+              <View style={styles.handleContainer}>
+                <View style={styles.handle} />
+              </View>
+              
+              <SafeAreaView style={styles.container}>
+                <View style={styles.content}>
+                  <Icon name="auto_awesome" size={48} color={COLORS.primary} />
+                  
+                  <Text style={styles.title}>Training Your AI Model</Text>
+                  <Text style={styles.subtitle}>
+                    We're analyzing your social media data to create your personalized AI model
+                  </Text>
+
+                  <View style={styles.progressContainer}>
+                    <View style={styles.progressBar}>
+                      <View
+                        style={[
+                          styles.progressFill,
+                          { width: `${progressPercentage}%` },
+                        ]}
+                      />
+                    </View>
+                    <Text style={styles.progressText}>{progressPercentage}%</Text>
+                  </View>
+
+                  <Text style={styles.etaText}>Estimated time remaining: {eta}</Text>
+
+                  <View style={styles.loadingContainer}>
+                    <ActivityIndicator size="small" color={COLORS.primary} />
+                    <Text style={styles.loadingText}>Processing your data...</Text>
+                  </View>
+
+                  <View style={styles.footer}>
+                    <TouchableOpacity
+                      style={styles.cancelButton}
+                      onPress={onCancel}
+                    >
+                      <Text style={styles.cancelButtonText}>Cancel</Text>
+                    </TouchableOpacity>
+                    
+                    {progress >= 1 && (
+                      <TouchableOpacity
+                        style={styles.completeButton}
+                        onPress={onComplete}
+                      >
+                        <Text style={styles.completeButtonText}>Complete</Text>
+                      </TouchableOpacity>
+                    )}
+                  </View>
+                </View>
+              </SafeAreaView>
+            </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.6,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    overflow: 'hidden',
+  },
+  handleContainer: {
+    width: '100%',
+    alignItems: 'center',
+    paddingTop: 12,
+    paddingBottom: 8,
+  },
+  handle: {
+    width: 40,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: '#E0E0E0',
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  content: {
+    flex: 1,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+    marginTop: 24,
+    marginBottom: 8,
+    color: COLORS.text.primary,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: COLORS.text.secondary,
+    textAlign: 'center',
+    marginBottom: 32,
+  },
+  progressContainer: {
+    width: '100%',
+    marginBottom: 16,
+  },
+  progressBar: {
+    height: 8,
+    backgroundColor: COLORS.border,
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: COLORS.primary,
+    borderRadius: 4,
+  },
+  progressText: {
+    fontSize: 14,
+    color: COLORS.text.secondary,
+    textAlign: 'center',
+    marginTop: 8,
+  },
+  etaText: {
+    fontSize: 14,
+    color: COLORS.text.secondary,
+    marginBottom: 24,
+  },
+  loadingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  loadingText: {
+    fontSize: 14,
+    color: COLORS.text.secondary,
+    marginLeft: 8,
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+    paddingTop: 16,
+    paddingHorizontal: 24,
+    paddingBottom: 24,
+  },
+  cancelButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  cancelButtonText: {
+    fontSize: 16,
+    color: '#666',
+  },
+  completeButton: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#000',
+  },
+  completeButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#000',
+  },
+});

package/src/components/UniversalOnboarding.tsx

@@ -51,6 +51,9 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const platforms = [
     { id: 'instagram', name: 'Instagram', icon: require('../assets/images/instagram.png') },
     { id: 'youtube', name: 'YouTube', icon: require('../assets/images/youtube.png') },
+    { id: 'reddit', name: 'Reddit', icon: require('../assets/images/reddit.png') },
+    { id: 'pinterest', name: 'Pinterest', icon: require('../assets/images/pinterest.png') },
+    { id: 'email', name: 'Email', icon: require('../assets/images/email.png') },
   ];
 
   const {
@@ -271,13 +274,16 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                     minLength={8}
                     requireSpecialChar
                     requireNumber
+                    onBack={() => setStep('connect')}
                   />
                 )}
 
                 {step === 'training' && (
                   <TrainingModal
                     visible={step === 'training'}
-                    onClose={handleClose}
+                    progress={training.progress}
+                    eta={training.eta}
+                    onCancel={handleClose}
                     onComplete={() => {
                       onComplete('https://api2.onairos.uk', 'dummy-token', {
                         pin,
@@ -289,9 +295,6 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                     }}
                     modelKey="onairosTrainingModel"
                     username="demo_user"
-                    progress={training.progress}
-                    eta={training.eta}
-                    onCancel={handleClose}
                   />
                 )}
               </SafeAreaView>
@@ -313,7 +316,7 @@ const styles = StyleSheet.create({
   bottomSheet: {
     backgroundColor: '#fff',
     width: width,
-    height: height * 0.9,
+    height: height * 0.6,
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     overflow: 'hidden',