@onairos/react-native 3.1.16 → 3.1.18

package/src/components/VerificationStep.tsx

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