@onairos/react-native 3.1.16 → 3.1.18

package/src/components/WelcomeScreen.tsx

@@ -1,473 +1,490 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  View,
-  StyleSheet,
-  Modal,
-  TouchableWithoutFeedback,
-  Animated,
-  Easing,
-  StatusBar,
-} from 'react-native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { triggerHaptic, HapticType } from '../utils/haptics';
-import { sendEmailVerificationCode, confirmEmailVerificationCode } from '../api';
-import { signInWithGoogle } from '../services/googleAuthService';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-
-// Import our new components
-import ModalSheet from './ModalSheet';
-import ModalHeader from './ModalHeader';
-import BrandMark from './BrandMark';
-import HeadingGroup from './HeadingGroup';
-import BodyText from './BodyText';
-import PrimaryButton from './PrimaryButton';
-import SignInStep from './SignInStep';
-import VerificationStep from './VerificationStep';
-import PlatformConnectorsStep from './PlatformConnectorsStep';
-
-// Type definitions for navigation
-export interface WelcomeScreenProps {
-  visible: boolean;
-  onClose: () => void;
-  onComplete?: (token: string, email?: string) => void;
-}
-
-type ModalStep = 'welcome' | 'signin' | 'verification' | 'platforms';
-
-const WelcomeScreen: React.FC<WelcomeScreenProps> = ({
-  visible,
-  onClose,
-  onComplete,
-}) => {
-  const [currentStep, setCurrentStep] = useState<ModalStep>('welcome');
-  const [userEmail, setUserEmail] = useState<string>('');
-  const [loading, setLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string>('');
-  
-  // Animation values
-  const slideAnim = useRef(new Animated.Value(1)).current; // Start from bottom
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-
-  // Animate in when visible (matching existing modal style)
-  useEffect(() => {
-    if (visible) {
-      Animated.parallel([
-        Animated.timing(slideAnim, {
-          toValue: 0,
-          duration: 400,
-          easing: Easing.out(Easing.cubic),
-          useNativeDriver: true,
-        }),
-        Animated.timing(fadeAnim, {
-          toValue: 1,
-          duration: 300,
-          useNativeDriver: true,
-        }),
-      ]).start();
-    } else {
-      slideAnim.setValue(1);
-      fadeAnim.setValue(0);
-    }
-  }, [visible]);
-
-  const handleClose = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    
-    // Reset to welcome step
-    setCurrentStep('welcome');
-    
-    Animated.parallel([
-      Animated.timing(slideAnim, {
-        toValue: 1,
-        duration: 300,
-        easing: Easing.in(Easing.cubic),
-        useNativeDriver: true,
-      }),
-      Animated.timing(fadeAnim, {
-        toValue: 0,
-        duration: 250,
-        useNativeDriver: true,
-      }),
-    ]).start(() => {
-      onClose();
-    });
-  };
-
-  const handleGetStarted = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    // Move to sign-in step instead of closing modal
-    setCurrentStep('signin');
-  };
-
-  const handleEmailSubmit = async (email: string) => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    setLoading(true);
-    setError('');
-    
-    try {
-      // Check for reviewer bypass
-      if (email === 'reviewer@bypass.com') {
-        console.log('🔍 Reviewer bypass detected in WelcomeScreen');
-        
-        try {
-          // Store the same markers as the old UI
-          await AsyncStorage.setItem('onairos_user', 'true');
-          await AsyncStorage.setItem('onairos_jwt_token', 'reviewer-bypass-token');
-          console.log('✅ Stored reviewer bypass markers for email bypass');
-          
-          // Store the reviewer email and skip directly to platforms
-          setUserEmail(email);
-          setCurrentStep('platforms');
-        } catch (error) {
-          console.error('❌ Failed to store reviewer bypass markers:', error);
-          // Continue to platforms even if storage fails
-          setUserEmail(email);
-          setCurrentStep('platforms');
-        }
-        
-        setLoading(false);
-        return;
-      }
-      
-      console.log('📧 Sending verification code to:', email);
-      
-      // Send verification code using the existing API
-      const result = await sendEmailVerificationCode(email);
-      
-      if (result.success) {
-        console.log('✅ Verification code sent successfully');
-        // Store the email and move to verification
-        setUserEmail(email);
-        setCurrentStep('verification');
-      } else {
-        console.log('❌ Failed to send verification code:', result.message);
-        setError(result.message || 'Failed to send verification code. Please try again.');
-      }
-    } catch (error) {
-      console.error('❌ Error sending verification code:', error);
-      setError('Network error. Please check your connection and try again.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleGoogleSignIn = async () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    setLoading(true);
-    setError('');
-    
-    try {
-      console.log('🔗 Initiating Google Sign-In');
-      
-      const result = await signInWithGoogle();
-      
-      if (result.success && result.user) {
-        console.log('✅ Google Sign-In successful:', result.user.email);
-        
-        // Store user information
-        setUserEmail(result.user.email);
-        
-        // Skip to platform connectors (user is already authenticated)
-        setCurrentStep('platforms');
-      } else if (result.cancelled) {
-        console.log('ℹ️ Google Sign-In cancelled by user');
-        // Don't show error for cancellation, just reset loading
-      } else {
-        console.log('❌ Google Sign-In failed:', result.message);
-        setError(result.message || 'Google Sign-In failed. Please try again.');
-      }
-    } catch (error) {
-      console.error('❌ Unexpected Google Sign-In error:', error);
-      setError('Google Sign-In failed. Please try again.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleContinue = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    // Move to verification step
-    setCurrentStep('verification');
-  };
-
-  const handleCodeSubmit = async (code: string) => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    setLoading(true);
-    setError('');
-    
-    try {
-      console.log('🔍 Verifying email code:', userEmail, code);
-      
-      // Verify the email code using the existing API
-      const result = await confirmEmailVerificationCode(userEmail, code);
-      
-      if (result.success) {
-        console.log('✅ Email verification successful');
-        // Move to platform connectors step
-        setCurrentStep('platforms');
-      } else {
-        console.log('❌ Email verification failed:', result.message);
-        setError(result.message || 'Invalid verification code. Please try again.');
-      }
-    } catch (error) {
-      console.error('❌ Error verifying email code:', error);
-      setError('Verification failed. Please try again.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleBackToSignIn = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    setError(''); // Clear any errors when going back
-    setCurrentStep('signin');
-  };
-
-  const handleBackToVerification = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    setCurrentStep('verification');
-  };
-
-  const handleResendCode = async () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    setLoading(true);
-    setError('');
-    
-    try {
-      console.log('🔄 Resending verification code to:', userEmail);
-      
-      // Resend verification code using the existing API
-      const result = await sendEmailVerificationCode(userEmail);
-      
-      if (result.success) {
-        console.log('✅ Verification code resent successfully');
-        // Could show a success message here if needed
-      } else {
-        console.log('❌ Failed to resend verification code:', result.message);
-        setError(result.message || 'Failed to resend verification code. Please try again.');
-      }
-    } catch (error) {
-      console.error('❌ Error resending verification code:', error);
-      setError('Network error. Please check your connection and try again.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handlePlatformUpdate = (connectedPlatforms: string[]) => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    console.log('Connected platforms:', connectedPlatforms);
-    
-    // Complete the onboarding flow
-    if (onComplete) {
-      // Return the stored token and email
-      AsyncStorage.getItem('onairos_jwt_token').then(token => {
-        onComplete(token || 'onboarding-complete-token', userEmail);
-      });
-    } else {
-      onClose();
-    }
-  };
-
-  const handlePlatformSkip = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    // Skip platform connections and complete onboarding
-    if (onComplete) {
-      // Return a skip token
-      onComplete('onboarding-skipped-token', userEmail);
-    } else {
-      onClose();
-    }
-  };
-
-  const handleReviewerBypass = async () => {
-    console.log('🔍 Reviewer bypass triggered from platforms screen');
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    
-    try {
-      // Store the same markers as the old UI
-      await AsyncStorage.setItem('onairos_user', 'true');
-      await AsyncStorage.setItem('onairos_jwt_token', 'reviewer-bypass-token');
-      console.log('✅ Stored reviewer bypass markers for new UI');
-      
-      // Complete the onboarding with bypass token
-      if (onComplete) {
-        onComplete('reviewer-bypass-token', 'reviewer@apple.com');
-      } else {
-        onClose();
-      }
-    } catch (error) {
-      console.error('❌ Failed to store reviewer bypass markers:', error);
-      // Still complete the onboarding even if storage fails
-      if (onComplete) {
-        onComplete('reviewer-bypass-token', 'reviewer@apple.com');
-      } else {
-        onClose();
-      }
-    }
-  };
-
-  const handleBackdropPress = () => {
-    // Optional: allow closing by tapping backdrop
-    handleClose();
-  };
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="slide" // Use built-in slide animation like existing modal
-      onRequestClose={handleClose}
-      statusBarTranslucent
-    >
-      <StatusBar backgroundColor="rgba(0,0,0,0.5)" barStyle="light-content" />
-      
-      {/* Backdrop */}
-      <Animated.View style={[styles.backdrop, { opacity: fadeAnim }]}>
-        <TouchableWithoutFeedback onPress={handleBackdropPress}>
-          <View style={styles.backdropTouchable} />
-        </TouchableWithoutFeedback>
-      </Animated.View>
-
-      {/* Modal Content */}
-      <Animated.View 
-        style={[
-          styles.modalContainer,
-          {
-            transform: [{
-              translateY: slideAnim.interpolate({
-                inputRange: [0, 1],
-                outputRange: [0, 600], // Slide from bottom
-              })
-            }]
-          }
-        ]}
-      >
-        <SafeAreaProvider>
-          <ModalSheet topPadding={0}>
-          <ModalHeader 
-            onClose={handleClose}
-            onBack={currentStep === 'verification' ? handleBackToSignIn : handleBackToVerification}
-            showBackButton={currentStep === 'verification' || currentStep === 'platforms'}
-          />
-          
-          {currentStep === 'welcome' && (
-            <View style={styles.content}>
-              {/* Brand Mark */}
-              <View style={styles.brandMarkContainer}>
-                <BrandMark />
-              </View>
-
-              {/* Heading Group */}
-              <View style={styles.headingContainer}>
-                <HeadingGroup />
-              </View>
-
-              {/* Body Text */}
-              <View style={styles.bodyContainer}>
-                <BodyText />
-              </View>
-
-              {/* Flexible Spacer */}
-              <View style={styles.spacer} />
-
-              {/* Primary Button */}
-              <View style={styles.buttonContainer}>
-                <PrimaryButton
-                  label="Get Started"
-                  onPress={handleGetStarted}
-                  testID="welcome-get-started-button"
-                />
-              </View>
-            </View>
-          )}
-
-          {currentStep === 'signin' && (
-            <SignInStep
-              onEmailSubmit={handleEmailSubmit}
-              onGoogleSignIn={handleGoogleSignIn}
-              onContinue={handleContinue}
-              loading={loading}
-              error={error}
-            />
-          )}
-
-          {currentStep === 'verification' && (
-            <VerificationStep
-              email={userEmail}
-              onCodeSubmit={handleCodeSubmit}
-              onBack={handleBackToSignIn}
-              loading={loading}
-              error={error}
-              onResendCode={handleResendCode}
-            />
-          )}
-
-          {currentStep === 'platforms' && (
-            <PlatformConnectorsStep
-              onUpdate={handlePlatformUpdate}
-              onSkip={handlePlatformSkip}
-              onReviewerBypass={handleReviewerBypass}
-            />
-          )}
-        </ModalSheet>
-        </SafeAreaProvider>
-      </Animated.View>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  backdrop: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'transparent', // Remove grey overlay
-  },
-  
-  backdropTouchable: {
-    flex: 1,
-  },
-  
-  modalContainer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: '85%', // Take most of the screen
-  },
-  
-  content: {
-    flex: 1,
-    alignItems: 'center',
-    paddingTop: 20,
-  },
-  
-  brandMarkContainer: {
-    marginBottom: 32,
-  },
-  
-  headingContainer: {
-    marginBottom: 24,
-  },
-  
-  bodyContainer: {
-    marginBottom: 32,
-    width: '100%',
-  },
-  
-  spacer: {
-    flex: 1,
-    minHeight: 20, // Ensure some minimum space
-  },
-  
-  buttonContainer: {
-    width: '100%',
-    paddingHorizontal: 24,
-    paddingBottom: 20,
-  },
-});
-
-export default WelcomeScreen;
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  Modal,
+  TouchableWithoutFeedback,
+  Animated,
+  Easing,
+  StatusBar,
+} from 'react-native';
+import { triggerHaptic, HapticType } from '../utils/haptics';
+import { sendEmailVerificationCode, confirmEmailVerificationCode } from '../api/index';
+import { signInWithGoogle } from '../services/googleAuthService';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// Import our new components
+import ModalSheet from './ModalSheet';
+import ModalHeader from './ModalHeader';
+import BrandMark from './BrandMark';
+import HeadingGroup from './HeadingGroup';
+import BodyText from './BodyText';
+import PrimaryButton from './PrimaryButton';
+import SignInStep from './SignInStep';
+import VerificationStep from './VerificationStep';
+// Temporarily remove PlatformConnectorsStep to avoid context dependency issues
+// import PlatformConnectorsStep from './PlatformConnectorsStep';
+
+// Type definitions for navigation
+export interface WelcomeScreenProps {
+  visible: boolean;
+  onClose: () => void;
+  onComplete?: (token: string, email?: string) => void;
+}
+
+type ModalStep = 'welcome' | 'signin' | 'verification' | 'platforms';
+
+const WelcomeScreen: React.FC<WelcomeScreenProps> = ({
+  visible,
+  onClose,
+  onComplete,
+}) => {
+  const [currentStep, setCurrentStep] = useState<ModalStep>('welcome');
+  const [userEmail, setUserEmail] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>('');
+  
+  // Animation values
+  const slideAnim = useRef(new Animated.Value(1)).current; // Start from bottom
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  // Animate in when visible (matching existing modal style)
+  useEffect(() => {
+    console.log('🔍 WelcomeScreen visibility changed:', visible);
+    if (visible) {
+      console.log('🎬 Starting WelcomeScreen animations');
+      Animated.parallel([
+        Animated.timing(slideAnim, {
+          toValue: 0,
+          duration: 400,
+          easing: Easing.out(Easing.cubic),
+          useNativeDriver: true,
+        }),
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        console.log('✅ WelcomeScreen animations completed');
+      });
+    } else {
+      console.log('🔄 Resetting WelcomeScreen animations');
+      slideAnim.setValue(1);
+      fadeAnim.setValue(0);
+    }
+  }, [visible]);
+
+  const handleClose = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    
+    // Reset to welcome step
+    setCurrentStep('welcome');
+    
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        toValue: 1,
+        duration: 300,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true,
+      }),
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      onClose();
+    });
+  };
+
+  const handleGetStarted = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    // Move to sign-in step instead of closing modal
+    setCurrentStep('signin');
+  };
+
+  const handleEmailSubmit = async (email: string) => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    setLoading(true);
+    setError('');
+    
+    try {
+      // Check for reviewer bypass
+      if (email === 'reviewer@bypass.com') {
+        console.log('🔍 Reviewer bypass detected in WelcomeScreen');
+        
+        try {
+          // Store the same markers as the old UI
+          await AsyncStorage.setItem('onairos_user', 'true');
+          await AsyncStorage.setItem('onairos_jwt_token', 'reviewer-bypass-token');
+          console.log('✅ Stored reviewer bypass markers for email bypass');
+          
+          // Store the reviewer email and skip directly to platforms
+          setUserEmail(email);
+          setCurrentStep('platforms');
+        } catch (error) {
+          console.error('❌ Failed to store reviewer bypass markers:', error);
+          // Continue to platforms even if storage fails
+          setUserEmail(email);
+          setCurrentStep('platforms');
+        }
+        
+        setLoading(false);
+        return;
+      }
+      
+      console.log('📧 Sending verification code to:', email);
+      
+      // Send verification code using the existing API
+      const result = await sendEmailVerificationCode(email);
+      
+      if (result.success) {
+        console.log('✅ Verification code sent successfully');
+        // Store the email and move to verification
+        setUserEmail(email);
+        setCurrentStep('verification');
+      } else {
+        console.log('❌ Failed to send verification code:', result.message);
+        setError(result.message || 'Failed to send verification code. Please try again.');
+      }
+    } catch (error) {
+      console.error('❌ Error sending verification code:', error);
+      setError('Network error. Please check your connection and try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGoogleSignIn = async () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    setLoading(true);
+    setError('');
+    
+    try {
+      console.log('🔗 Initiating Google Sign-In');
+      
+      const result = await signInWithGoogle();
+      
+      if (result.success && result.user) {
+        console.log('✅ Google Sign-In successful:', result.user.email);
+        
+        // Store user information
+        setUserEmail(result.user.email);
+        
+        // Skip to platform connectors (user is already authenticated)
+        setCurrentStep('platforms');
+      } else if (result.cancelled) {
+        console.log('ℹ️ Google Sign-In cancelled by user');
+        // Don't show error for cancellation, just reset loading
+      } else {
+        console.log('❌ Google Sign-In failed:', result.message);
+        setError(result.message || 'Google Sign-In failed. Please try again.');
+      }
+    } catch (error) {
+      console.error('❌ Unexpected Google Sign-In error:', error);
+      setError('Google Sign-In failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleContinue = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    // Move to verification step
+    setCurrentStep('verification');
+  };
+
+  const handleCodeSubmit = async (code: string) => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    setLoading(true);
+    setError('');
+    
+    try {
+      console.log('🔍 Verifying email code:', userEmail, code);
+      
+      // Verify the email code using the existing API
+      const result = await confirmEmailVerificationCode(userEmail, code);
+      
+      if (result.success) {
+        console.log('✅ Email verification successful');
+        // Move to platform connectors step
+        setCurrentStep('platforms');
+      } else {
+        console.log('❌ Email verification failed:', result.message);
+        setError(result.message || 'Invalid verification code. Please try again.');
+      }
+    } catch (error) {
+      console.error('❌ Error verifying email code:', error);
+      setError('Verification failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBackToSignIn = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    setError(''); // Clear any errors when going back
+    setCurrentStep('signin');
+  };
+
+  const handleBackToVerification = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    setCurrentStep('verification');
+  };
+
+  const handleResendCode = async () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    setLoading(true);
+    setError('');
+    
+    try {
+      console.log('🔄 Resending verification code to:', userEmail);
+      
+      // Resend verification code using the existing API
+      const result = await sendEmailVerificationCode(userEmail);
+      
+      if (result.success) {
+        console.log('✅ Verification code resent successfully');
+        // Could show a success message here if needed
+      } else {
+        console.log('❌ Failed to resend verification code:', result.message);
+        setError(result.message || 'Failed to resend verification code. Please try again.');
+      }
+    } catch (error) {
+      console.error('❌ Error resending verification code:', error);
+      setError('Network error. Please check your connection and try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePlatformUpdate = (connectedPlatforms: string[]) => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    console.log('Connected platforms:', connectedPlatforms);
+    
+    // Complete the onboarding flow
+    if (onComplete) {
+      // Return the stored token and email
+      AsyncStorage.getItem('onairos_jwt_token').then(token => {
+        onComplete(token || 'onboarding-complete-token', userEmail);
+      });
+    } else {
+      onClose();
+    }
+  };
+
+  const handlePlatformSkip = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    // Skip platform connections and complete onboarding
+    if (onComplete) {
+      // Return a skip token
+      onComplete('onboarding-skipped-token', userEmail);
+    } else {
+      onClose();
+    }
+  };
+
+  const handleReviewerBypass = async () => {
+    console.log('🔍 Reviewer bypass triggered from platforms screen');
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    
+    try {
+      // Store the same markers as the old UI
+      await AsyncStorage.setItem('onairos_user', 'true');
+      await AsyncStorage.setItem('onairos_jwt_token', 'reviewer-bypass-token');
+      console.log('✅ Stored reviewer bypass markers for new UI');
+      
+      // Complete the onboarding with bypass token
+      if (onComplete) {
+        onComplete('reviewer-bypass-token', 'reviewer@apple.com');
+      } else {
+        onClose();
+      }
+    } catch (error) {
+      console.error('❌ Failed to store reviewer bypass markers:', error);
+      // Still complete the onboarding even if storage fails
+      if (onComplete) {
+        onComplete('reviewer-bypass-token', 'reviewer@apple.com');
+      } else {
+        onClose();
+      }
+    }
+  };
+
+  const handleBackdropPress = () => {
+    // Optional: allow closing by tapping backdrop
+    handleClose();
+  };
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide" // Use built-in slide animation like existing modal
+      onRequestClose={handleClose}
+      statusBarTranslucent
+    >
+      <StatusBar backgroundColor="rgba(0,0,0,0.5)" barStyle="light-content" />
+      
+      {/* Backdrop */}
+      <Animated.View style={[styles.backdrop, { opacity: fadeAnim }]}>
+        <TouchableWithoutFeedback onPress={handleBackdropPress}>
+          <View style={styles.backdropTouchable} />
+        </TouchableWithoutFeedback>
+      </Animated.View>
+
+      {/* Modal Content */}
+      <Animated.View 
+        style={[
+          styles.modalContainer,
+          {
+            transform: [{
+              translateY: slideAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, 600], // Slide from bottom
+              })
+            }]
+          }
+        ]}
+      >
+        <ModalSheet topPadding={0}>
+          <ModalHeader 
+            onClose={handleClose}
+            onBack={currentStep === 'verification' ? handleBackToSignIn : handleBackToVerification}
+            showBackButton={currentStep === 'verification' || currentStep === 'platforms'}
+          />
+          
+          {currentStep === 'welcome' && (
+            <View style={styles.content}>
+              {/* Brand Mark */}
+              <View style={styles.brandMarkContainer}>
+                <BrandMark />
+              </View>
+
+              {/* Heading Group */}
+              <View style={styles.headingContainer}>
+                <HeadingGroup />
+              </View>
+
+              {/* Body Text */}
+              <View style={styles.bodyContainer}>
+                <BodyText />
+              </View>
+
+              {/* Flexible Spacer */}
+              <View style={styles.spacer} />
+
+              {/* Primary Button */}
+              <View style={styles.buttonContainer}>
+                <PrimaryButton
+                  label="Get Started"
+                  onPress={handleGetStarted}
+                  testID="welcome-get-started-button"
+                />
+              </View>
+            </View>
+          )}
+
+          {currentStep === 'signin' && (
+            <SignInStep
+              onEmailSubmit={handleEmailSubmit}
+              onGoogleSignIn={handleGoogleSignIn}
+              onContinue={handleContinue}
+              loading={loading}
+              error={error}
+            />
+          )}
+
+          {currentStep === 'verification' && (
+            <VerificationStep
+              email={userEmail}
+              onCodeSubmit={handleCodeSubmit}
+              onBack={handleBackToSignIn}
+              loading={loading}
+              error={error}
+              onResendCode={handleResendCode}
+            />
+          )}
+
+          {currentStep === 'platforms' && (
+            <View style={styles.content}>
+              <View style={styles.headingContainer}>
+                <HeadingGroup />
+              </View>
+              
+              <View style={styles.bodyContainer}>
+                <BodyText />
+              </View>
+              
+              <View style={styles.spacer} />
+              
+              <View style={styles.buttonContainer}>
+                <PrimaryButton
+                  label="Complete Setup"
+                  onPress={() => handlePlatformUpdate([])}
+                  testID="complete-setup-button"
+                />
+              </View>
+            </View>
+          )}
+        </ModalSheet>
+      </Animated.View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent', // Remove grey overlay
+  },
+  
+  backdropTouchable: {
+    flex: 1,
+  },
+  
+  modalContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: '85%', // Take most of the screen
+  },
+  
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    paddingTop: 20,
+  },
+  
+  brandMarkContainer: {
+    marginBottom: 32,
+  },
+  
+  headingContainer: {
+    marginBottom: 24,
+  },
+  
+  bodyContainer: {
+    marginBottom: 32,
+    width: '100%',
+  },
+  
+  spacer: {
+    flex: 1,
+    minHeight: 20, // Ensure some minimum space
+  },
+  
+  buttonContainer: {
+    width: '100%',
+    paddingHorizontal: 24,
+    paddingBottom: 20,
+  },
+});
+
+export default WelcomeScreen;