@onairos/react-native 3.7.2 → 3.7.3

package/lib/module/components/VerificationStep.js

@@ -1 +1,168 @@
-function _0x39ce(){const _0x402a29=['ios','Enter\x20verification\x20code','We\x27ve\x20sent\x20a\x206-digit\x20code\x20to\x20','Continue','Back','Didn\x27t\x20receive\x20the\x20code?\x20','DjdoO','GFnAf','length','createElement','HVRSv','height','container','headingContainer','bojtS','subtitle','codeContainer','errorText','continueContainer','HDAdC','yWeMQ','backButtonDisabled','resendButton','resendLink','OnyqO','spacer','create','100%','700','left','400','grey600','Inter','#DC3545','center','row','500','#D4A536','underline','grey400','none','grey300'];_0x39ce=function(){return _0x402a29;};return _0x39ce();}import React,{useState}from'react';import{View,Text,StyleSheet,TouchableOpacity,KeyboardAvoidingView,Platform}from'react-native';function _0x5d4e(_0x39ce9d,_0x5d4e82){_0x39ce9d=_0x39ce9d-0x0;const _0x14ea18=_0x39ce();let _0x2d1fe8=_0x14ea18[_0x39ce9d];return _0x2d1fe8;}import{COLORS}from'../theme';import _0x41ad42 from'./CodeInput';import _0x113481 from'./PrimaryButton';const VerificationStep=({email:_0x1ba432,onCodeSubmit:_0x406604,onBack:_0x33deb7,loading:loading=![],error:error='',onResendCode:_0x447e99})=>{const _0x582174={'GFnAf':function(_0x31705a,_0x54003c){return _0x31705a===_0x54003c;},'DjdoO':function(_0x58096a,_0x4a88c8){return _0x58096a(_0x4a88c8);},'jMMDg':function(_0x514ef1,_0x5342c5){return _0x514ef1===_0x5342c5;},'HVRSv':_0x5d4e(0x0),'bojtS':_0x5d4e(0x1),'AVVww':_0x5d4e(0x2),'HDAdC':_0x5d4e(0x3),'yWeMQ':function(_0x37945d,_0xf94f16){return _0x37945d!==_0xf94f16;},'GtzQV':_0x5d4e(0x4),'TKeMI':_0x5d4e(0x5),'OnyqO':'Resend\x20Code'},[_0x5c5a8c,_0x3b328b]=_0x582174[_0x5d4e(0x6)](useState,''),_0x186c71=_0x43b114=>{_0x3b328b(_0x43b114);},_0x14595e=()=>{_0x582174[_0x5d4e(0x7)](_0x5c5a8c[_0x5d4e(0x8)],0x6)&&_0x582174[_0x5d4e(0x6)](_0x406604,_0x5c5a8c);};return React[_0x5d4e(0x9)](KeyboardAvoidingView,{'behavior':_0x582174['jMMDg'](Platform['OS'],_0x582174[_0x5d4e(0xa)])?'padding':_0x5d4e(0xb),'style':styles[_0x5d4e(0xc)]},React[_0x5d4e(0x9)](View,{'style':styles['content']},React[_0x5d4e(0x9)](View,{'style':styles[_0x5d4e(0xd)]},React[_0x5d4e(0x9)](Text,{'style':styles['title']},_0x582174[_0x5d4e(0xe)]),React[_0x5d4e(0x9)](Text,{'style':styles[_0x5d4e(0xf)]},_0x582174['AVVww'],_0x1ba432)),React[_0x5d4e(0x9)](View,{'style':styles[_0x5d4e(0x10)]},React[_0x5d4e(0x9)](_0x41ad42,{'length':0x6,'onCodeChange':_0x186c71}),error?React[_0x5d4e(0x9)](Text,{'style':styles[_0x5d4e(0x11)]},error):null),React[_0x5d4e(0x9)](View,{'style':styles[_0x5d4e(0x12)]},React[_0x5d4e(0x9)](_0x113481,{'label':_0x582174[_0x5d4e(0x13)],'onPress':_0x14595e,'disabled':loading||_0x582174[_0x5d4e(0x14)](_0x5c5a8c['length'],0x6),'loading':loading})),React[_0x5d4e(0x9)](TouchableOpacity,{'onPress':_0x33deb7,'disabled':loading,'style':styles['backButtonContainer']},React[_0x5d4e(0x9)](Text,{'style':[styles['backButtonText'],loading&&styles[_0x5d4e(0x15)]]},_0x582174['GtzQV'])),_0x447e99&&React[_0x5d4e(0x9)](View,{'style':styles['resendContainer']},React['createElement'](Text,{'style':styles['resendText']},_0x582174['TKeMI']),React['createElement'](TouchableOpacity,{'onPress':_0x447e99,'disabled':loading,'style':styles[_0x5d4e(0x16)]},React[_0x5d4e(0x9)](Text,{'style':[styles[_0x5d4e(0x17)],loading&&styles['resendLinkDisabled']]},_0x582174[_0x5d4e(0x18)]))),React[_0x5d4e(0x9)](View,{'style':styles[_0x5d4e(0x19)]})));},styles=StyleSheet[_0x5d4e(0x1a)]({'container':{'flex':0x1},'content':{'flex':0x1,'paddingTop':0x18,'paddingHorizontal':0x18},'headingContainer':{'width':_0x5d4e(0x1b),'marginBottom':0x28,'paddingHorizontal':0x0},'title':{'fontFamily':'IBM\x20Plex\x20Sans','fontWeight':_0x5d4e(0x1c),'fontSize':0x18,'lineHeight':0x20,'color':COLORS['grey800'],'textAlign':_0x5d4e(0x1d),'marginBottom':0x2},'subtitle':{'fontFamily':'Inter','fontWeight':_0x5d4e(0x1e),'fontSize':0x10,'lineHeight':0x18,'color':COLORS[_0x5d4e(0x1f)],'textAlign':_0x5d4e(0x1d),'marginBottom':0x8},'codeContainer':{'paddingHorizontal':0x10,'marginBottom':0x18},'spacer':{'flex':0x1,'minHeight':0x14},'continueContainer':{'paddingHorizontal':0x0,'marginBottom':0x18},'errorText':{'fontSize':0xe,'fontFamily':_0x5d4e(0x20),'fontWeight':_0x5d4e(0x1e),'color':_0x5d4e(0x21),'marginTop':0xc,'textAlign':_0x5d4e(0x22)},'resendContainer':{'flexDirection':_0x5d4e(0x23),'justifyContent':_0x5d4e(0x22),'alignItems':_0x5d4e(0x22),'marginTop':0x10,'paddingHorizontal':0x0},'resendText':{'fontSize':0xe,'fontFamily':'Inter','fontWeight':_0x5d4e(0x1e),'color':COLORS[_0x5d4e(0x1f)]},'resendButton':{},'resendLink':{'fontSize':0xe,'fontFamily':_0x5d4e(0x20),'fontWeight':_0x5d4e(0x24),'color':_0x5d4e(0x25),'textDecorationLine':_0x5d4e(0x26)},'resendLinkDisabled':{'color':COLORS[_0x5d4e(0x27)],'textDecorationLine':_0x5d4e(0x28)},'backButtonContainer':{'alignItems':_0x5d4e(0x22),'justifyContent':_0x5d4e(0x22),'paddingVertical':0x8,'marginTop':-0x8,'marginBottom':0x10},'backButtonText':{'fontSize':0xe,'fontFamily':'Inter','fontWeight':_0x5d4e(0x1e),'color':COLORS['grey500']},'backButtonDisabled':{'color':COLORS[_0x5d4e(0x29)]}});export{VerificationStep};export default VerificationStep;
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
+import { COLORS } from '../theme';
+import CodeInput from './CodeInput';
+import PrimaryButton from './PrimaryButton';
+const VerificationStep = ({
+  email,
+  onCodeSubmit,
+  onBack,
+  loading = false,
+  error = '',
+  onResendCode
+}) => {
+  const [code, setCode] = useState('');
+  const handleCodeChange = newCode => {
+    setCode(newCode);
+  };
+  const handleContinue = () => {
+    if (code.length === 6) {
+      onCodeSubmit(code);
+    }
+  };
+  return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+    behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.content
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.headingContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.title
+  }, "Enter verification code"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.subtitle
+  }, "We've sent a 6-digit code to ", email)), /*#__PURE__*/React.createElement(View, {
+    style: styles.codeContainer
+  }, /*#__PURE__*/React.createElement(CodeInput, {
+    length: 6,
+    onCodeChange: handleCodeChange
+  }), error ? /*#__PURE__*/React.createElement(Text, {
+    style: styles.errorText
+  }, error) : null), /*#__PURE__*/React.createElement(View, {
+    style: styles.continueContainer
+  }, /*#__PURE__*/React.createElement(PrimaryButton, {
+    label: "Continue",
+    onPress: handleContinue,
+    disabled: loading || code.length !== 6,
+    loading: loading
+  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: onBack,
+    disabled: loading,
+    style: styles.backButtonContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.backButtonText, loading && styles.backButtonDisabled]
+  }, "Back")), onResendCode && /*#__PURE__*/React.createElement(View, {
+    style: styles.resendContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.resendText
+  }, "Didn't receive the code? "), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: onResendCode,
+    disabled: loading,
+    style: styles.resendButton
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.resendLink, loading && styles.resendLinkDisabled]
+  }, "Resend Code"))), /*#__PURE__*/React.createElement(View, {
+    style: styles.spacer
+  })));
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    flex: 1,
+    paddingTop: 24,
+    paddingHorizontal: 24
+  },
+  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'
+  },
+  backButtonContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 8,
+    marginTop: -8,
+    marginBottom: 16
+  },
+  backButtonText: {
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey500
+  },
+  backButtonDisabled: {
+    color: COLORS.grey300
+  }
+});
+export { VerificationStep };
+export default VerificationStep;
+//# sourceMappingURL=VerificationStep.js.map