@onairos/react-native 3.1.12 → 3.1.13

package/src/components/VerificationStep.tsx

@@ -0,0 +1,198 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { COLORS, SPACING } from '../theme';
+import CodeInput from './CodeInput';
+import PrimaryButton from './PrimaryButton';
+
+interface VerificationStepProps {
+  email: string;
+  onCodeSubmit: (code: string) => void;
+  onBack: () => void;
+  loading?: boolean;
+  error?: string;
+  onResendCode?: () => void;
+}
+
+const VerificationStep: React.FC<VerificationStepProps> = ({
+  email,
+  onCodeSubmit,
+  onBack,
+  loading = false,
+  error = '',
+  onResendCode,
+}) => {
+  const [code, setCode] = useState('');
+
+  const handleCodeChange = (newCode: string) => {
+    setCode(newCode);
+  };
+
+  const handleContinue = () => {
+    if (code.length === 6) {
+      onCodeSubmit(code);
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView 
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
+      <View style={styles.content}>
+        {/* Heading */}
+        <View style={styles.headingContainer}>
+          <Text style={styles.title}>Enter verification code</Text>
+          <Text style={styles.subtitle}>
+            We've sent a 6-digit code to {email}
+          </Text>
+        </View>
+
+        {/* Code Input */}
+        <View style={styles.codeContainer}>
+          <CodeInput
+            length={6}
+            onCodeChange={handleCodeChange}
+          />
+          {error ? (
+            <Text style={styles.errorText}>{error}</Text>
+          ) : null}
+        </View>
+
+        {/* Continue Button - positioned right below code inputs */}
+        <View style={styles.continueContainer}>
+          <PrimaryButton
+            label="Continue"
+            onPress={handleContinue}
+            disabled={loading || code.length !== 6}
+            loading={loading}
+          />
+        </View>
+
+        {/* Resend Code Link */}
+        {onResendCode && (
+          <View style={styles.resendContainer}>
+            <Text style={styles.resendText}>Didn't receive the code? </Text>
+            <TouchableOpacity 
+              onPress={onResendCode}
+              disabled={loading}
+              style={styles.resendButton}
+            >
+              <Text style={[styles.resendLink, loading && styles.resendLinkDisabled]}>
+                Resend Code
+              </Text>
+            </TouchableOpacity>
+          </View>
+        )}
+
+        {/* Spacer */}
+        <View style={styles.spacer} />
+      </View>
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  
+  content: {
+    flex: 1,
+    paddingTop: 8,
+    paddingHorizontal: 0,
+  },
+  
+
+  
+  headingContainer: {
+    width: '100%',
+    marginBottom: 40,
+    paddingHorizontal: 0,
+  },
+  
+  title: {
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: '700',
+    fontSize: 24,
+    lineHeight: 32,
+    color: COLORS.grey800,
+    textAlign: 'left',
+    marginBottom: 2,
+  },
+  
+  subtitle: {
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    fontSize: 16,
+    lineHeight: 24,
+    color: COLORS.grey600,
+    textAlign: 'left',
+    marginBottom: 8,
+  },
+  
+  codeContainer: {
+    paddingHorizontal: 16,
+    marginBottom: 24, // Reduced spacing to bring Continue button closer
+  },
+  
+  spacer: {
+    flex: 1,
+    minHeight: 20,
+  },
+  
+  continueContainer: {
+    paddingHorizontal: 0,
+    marginBottom: 24, // Add spacing below Continue button
+  },
+  
+  errorText: {
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: '#DC3545', // Red color for errors
+    marginTop: 12,
+    textAlign: 'center',
+  },
+  
+  resendContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 16,
+    paddingHorizontal: 0,
+  },
+  
+  resendText: {
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey600,
+  },
+  
+  resendButton: {
+    // No additional padding - let the text handle touch target
+  },
+  
+  resendLink: {
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '500',
+    color: '#D4A536', // Brand color
+    textDecorationLine: 'underline',
+  },
+  
+  resendLinkDisabled: {
+    color: COLORS.grey400,
+    textDecorationLine: 'none',
+  },
+});
+
+export { VerificationStep };
+export default VerificationStep;

package/src/components/WelcomeScreen.tsx

@@ -0,0 +1,473 @@
+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;

package/src/components/icons/Basicproficon.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Svg, {G, Rect, Path, Defs} from 'react-native-svg';
+/* SVGR has dropped some elements not supported by react-native-svg: filter */
+import type {SvgProps} from 'react-native-svg';
+const SvgBasicproficon = (props: SvgProps) => (
+  <Svg
+    width={32}
+    height={32}
+    fill="none"
+    viewBox="0 0 32 32"
+    {...props}>
+    <G filter="url(#basicproficon_svg__a)">
+      <Rect width={32} height={32} fill="#ECECED" rx={16} />
+      <G filter="url(#basicproficon_svg__b)">
+        <Path
+          fill="#1F242F"
+          d="M16 15.746c.952 0 1.776-.341 2.45-1.015a3.35 3.35 0 0 0 1.014-2.449c0-.952-.341-1.776-1.015-2.45A3.35 3.35 0 0 0 16 8.819c-.952 0-1.776.341-2.45 1.015a3.35 3.35 0 0 0-1.014 2.449c0 .952.341 1.776 1.015 2.45A3.35 3.35 0 0 0 16 15.745"
+        />
+      </G>
+      <G filter="url(#basicproficon_svg__c)">
+        <Path
+          fill="#1F242F"
+          d="M21.97 19.859a9 9 0 0 0-.116-.909 7 7 0 0 0-.223-.914 4.5 4.5 0 0 0-.376-.852 3.2 3.2 0 0 0-.566-.738 2.5 2.5 0 0 0-.814-.511 2.8 2.8 0 0 0-1.039-.188c-.147 0-.289.06-.563.239l-.586.378q-.285.18-.76.334c-.307.1-.62.15-.927.15q-.464 0-.929-.15a3.4 3.4 0 0 1-.758-.334q-.329-.21-.587-.379c-.274-.178-.416-.238-.563-.238q-.563 0-1.039.188c-.316.125-.59.297-.813.511a3.2 3.2 0 0 0-.567.738 4.5 4.5 0 0 0-.375.852c-.09.281-.165.589-.224.914a9 9 0 0 0-.116.91c-.02.274-.029.56-.029.849 0 .75.239 1.358.71 1.806.464.443 1.08.667 1.827.667h6.926c.748 0 1.363-.224 1.827-.667.471-.448.71-1.055.71-1.807q0-.436-.03-.85"
+        />
+      </G>
+    </G>
+    <Defs></Defs>
+  </Svg>
+);
+export default SvgBasicproficon;