be-components 3.7.0 → 3.7.2

package/src/Wallet/components/ManualACHAdd.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Checkbox } from '../../Components';
 import { WalletApi, WalletHelpers } from '../api';
-import type { AccountProps, MyPlayerProps } from '../../types';
+import type { AccountProps, FocusPositionProps, MyPlayerProps } from '../../types';
 import { useColors } from '../../constants/useColors';
 import { Button, Text, TextInput, View } from '../../Components/Themed';
 import { FlatList, KeyboardAvoidingView, Platform } from 'react-native';
@@ -9,12 +9,13 @@ const validator = require('us-bank-account-validator');
 
 type ManualACHAddProps = {
     player:MyPlayerProps,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
     onAddAccount:(account:AccountProps) => void,
     onCancel:() => void
 }
 
 const ach_sections = ['header','name','bank_name','routing_number','account_number','disclaimer']
-const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
+const ManualACHAdd = ({ player, onAddAccount, onCancel, onFocusPosition }:ManualACHAddProps) => {
     const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ error, setError ] = useState<string>();
@@ -59,6 +60,7 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
                         <Text size={14} theme='h2'>Name on account</Text>
                         <TextInput 
                             style={{ marginTop:10 }}
+                            onFocusPosition={onFocusPosition}
                             value={`${player.first_name} ${player.last_name}`} 
                             editable={false}
                             onChangeText={() => console.log('ehy')}
@@ -71,6 +73,7 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
                         <Text size={14} theme='h2'>Bank Name</Text>
                         <TextInput 
                             style={{ marginTop:10 }}
+                            onFocusPosition={onFocusPosition}
                             keyboardType='default' 
                             placeholder={'Bank Name'} 
                             value={ach_details.bank_name}
@@ -88,6 +91,7 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
                         <Text size={14} theme='h2'>Routing Number</Text>
                         <TextInput 
                             style={{ marginTop:10 }}
+                            onFocusPosition={onFocusPosition}
                             keyboardType='number-pad'
                             placeholder={'xxxxxx911'}
                             value={ach_details.routing_number}
@@ -104,6 +108,7 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
                         <Text size={14} theme='h2'>Account Number</Text>
                         <TextInput 
                             style={{ marginTop:10 }}
+                            onFocusPosition={onFocusPosition}
                             keyboardType='number-pad'
                             value={ach_details.account_number}
                             placeholder={'xxxxxxxxx0000'}

package/src/Wallet/components/ManualCardAdd.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { WalletApi, WalletHelpers } from '../api';
 import { Icons } from '../../Components';
-import type { AccountProps, MyPlayerProps } from '../../types';
+import type { AccountProps, FocusPositionProps, MyPlayerProps } from '../../types';
 import moment from 'moment-mini';
 import { Button, Text, TextInput, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
@@ -9,11 +9,12 @@ import { FlatList } from 'react-native';
 
 type ManualCardAddProps = {
     player:MyPlayerProps,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
     onAddAccount:(acct:AccountProps) => void,
     onCancel:() => void
 }
 const card_sections = ['header','card_number','first_name','last_name','expire_date']
-const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) => {
+const ManualCardAdd = ({ player, onAddAccount, onCancel, onFocusPosition }:ManualCardAddProps) => {
     const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ error, setError ] = useState<string>();
@@ -104,6 +105,7 @@ const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) =>
                                 <TextInput 
                                     style={{ borderWidth:0, padding:15, flex:1 }}
                                     placeholder='1234 5678 9876 5432'
+                                    onFocusPosition={onFocusPosition}
                                     keyboardType='decimal-pad'
                                     value={WalletHelpers.formatCardNumber(card_detail.card_number)}
                                     onChangeText={(e) => handleCardNumber(e)}
@@ -123,6 +125,7 @@ const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) =>
                             <Text style={{ padding:10 }} size={14} theme='h2'>First Name</Text>
                                 <TextInput 
                                     placeholder='Jonathan'
+                                    onFocusPosition={onFocusPosition}
                                     value={card_detail.first_name}
                                     onChangeText={(e) => setCardAccount({ ...card_account, card_detail: { ...card_detail, first_name: e } })}
                                 />
@@ -138,6 +141,7 @@ const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) =>
                         <View nativeID='last_name' style={{ padding:5 }}>
                             <Text size={14} theme='h2' style={{ padding:10 }}>Last Name</Text>
                             <TextInput 
+                                onFocusPosition={onFocusPosition}
                                 placeholder='Smith'
                                 value={card_detail.last_name}
                                 onChangeText={(e) => setCardAccount({ ...card_account, card_detail: { ...card_detail, last_name: e } })}
@@ -154,6 +158,7 @@ const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) =>
                         <View nativeID='expiration_date' style={{ padding:5 }}>
                             <Text size={14} theme='h2' style={{ padding:10 }}>Expiration Date (MM/YYYY)</Text>
                             <TextInput
+                                onFocusPosition={onFocusPosition}
                                 value={card_detail.expiration_date}
                                 placeholder={'MM/YYYY'}
                                 onChangeText={(e) => handleExpiry(e)}

package/src/Wallet/components/VerifyACHAccount.tsx

@@ -1,18 +1,20 @@
 import React, { useState } from 'react';
-import { View, ScrollView } from 'react-native';
-import { Button, Text, TextInput } from '../../Components';
-import Colors from '../../constants/colors';
+import { ScrollView } from 'react-native';
 import { WalletApi, WalletHelpers } from '../api';
 import moment from 'moment-mini';
-import type { AccountProps } from '../../types';
+import type { AccountProps, FocusPositionProps } from '../../types';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
 
 type VerifyACHWidgetProps = {
     account:AccountProps,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
     onUpdateAccount:(account:AccountProps) => void,
     onClose: () => void,
 }
 
-const VerifyACHAccount = ({ account, onClose, onUpdateAccount }:VerifyACHWidgetProps) => {
+const VerifyACHAccount = ({ account, onClose, onUpdateAccount, onFocusPosition }:VerifyACHWidgetProps) => {
+    const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ verify_amount_1, setVerify1Amount ] = useState('')
     const [ verify_amount_2, setVerify2Amount ] = useState('')
@@ -56,36 +58,35 @@ const VerifyACHAccount = ({ account, onClose, onUpdateAccount }:VerifyACHWidgetP
     return (
         <View style={{ flex:1 }}>
             <View style={{ padding:20 }}>
-                <Text size={26} color={Colors.brand.midnight} weight='bold'>VERIFY ACCOUNT</Text>
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Verify this account by entering the two deposit amounts received from Bettoredge when setting up the account.</Text>
+                <Text size={26} theme='h1'>VERIFY ACCOUNT</Text>
+                <Text style={{ marginTop:10 }} size={16} theme='description'>Verify this account by entering the two deposit amounts received from Bettoredge when setting up the account.</Text>
             </View>
             <ScrollView nativeID='verify_inputs' style={{ flex:1, margin:20 }}>
                 <View style={{marginTop:30}}>
-                    <Text textAlign='center' size={16} color={Colors.brand.midnight} weight='semibold'>Deposit 1</Text>
+                    <Text textAlign='center' size={16} theme='h2'>Deposit 1</Text>
                     <TextInput 
                         style={{ marginTop:5 }}
+                        onFocusPosition={onFocusPosition}
                         value={verify_amount_1}
                         editable={account.status == 'verify' ? true : false}
-                        placeholderTextColor={Colors.brand.slate}
                         keyboardType='decimal-pad' 
                         placeholder='0.00' 
                         onChangeText={(e) => setVerify1Amount(e)} 
                     />
                 </View>
                 <View style={{marginTop:20}}>
-                    <Text textAlign='center' size={16} color={Colors.brand.midnight} weight='semibold'>Deposit 2</Text>
+                    <Text textAlign='center' size={16} theme='h2'>Deposit 2</Text>
                     <TextInput 
                         style={{ marginTop:5 }}
                         editable={account.status == 'verify' ? true : false}
                         value={verify_amount_2}
-                        placeholderTextColor={Colors.brand.slate}
                         keyboardType='decimal-pad' 
                         placeholder='0.00' 
                         onChangeText={(e) => setVerify2Amount(e)} 
                     />
                 </View>
                 {error ?
-                <Text style={{ marginTop:10 }} textAlign='center' size={14} color={Colors.utility.warning} weight='bold'>{error}</Text>
+                <Text style={{ marginTop:10 }} textAlign='center' size={14} color={Colors.text.warning} weight='bold'>{error}</Text>
                 :<></>}
 
             </ScrollView>
@@ -94,10 +95,7 @@ const VerifyACHAccount = ({ account, onClose, onUpdateAccount }:VerifyACHWidgetP
                 <Button
                     style={{ flex:1, marginRight:5 }}
                     title='CANCEL'
-                    title_color={Colors.brand.electric}
-                    padding={15}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
+                    type='error'
                     onPress={() => onClose()}
                 />
                 <Button
@@ -105,9 +103,7 @@ const VerifyACHAccount = ({ account, onClose, onUpdateAccount }:VerifyACHWidgetP
                     disabled={!verify_allowed}
                     loading={loading}
                     title={timedout?`Try Again ${moment(next_allowed).fromNow()}`:'VERIFY ACCOUNT'}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.success}
-                    padding={15}
+                    type='success'
                     onPress={() => handleVerify()}
                 />
             </View>
@@ -116,19 +112,12 @@ const VerifyACHAccount = ({ account, onClose, onUpdateAccount }:VerifyACHWidgetP
                 <Button
                     style={{ flex:1, marginRight:5 }}
                     title='CLOSE'
-                    title_color={Colors.brand.electric}
-                    padding={15}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
-                    onPress={() => onClose()}
+                    type='close'
                 />
                 <Button
                     style={{ flex:3, opacity:0.5 }}
                     title='ACCOUNT VERIFIED!'
-                    title_color={Colors.shades.white}
-                    title_weight='bold'
-                    padding={15}
-                    backgroundColor={Colors.utility.success}
+                    type='success'
                     onPress={() => onClose()}
                 />
             </View>

package/src/Wallet/components/WalletSetup.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { FlatList, Image, Linking } from "react-native";
-import type { MyPlayerProps, WalletSettingsProps } from '../../types';
+import type { FocusPositionProps, MyPlayerProps, WalletSettingsProps } from '../../types';
 import { Checkbox, Icons } from '../../Components';
 import { WalletApi } from '../api';
 import moment from 'moment-mini';
@@ -11,11 +11,12 @@ type WalletSetupProps = {
     player: MyPlayerProps,
     wallet_settings: WalletSettingsProps,
     onSettingsUpdate:(ws:WalletSettingsProps) => void,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
     onClose?:() => void,
     onNext?:() => void
 }
 const setup_sections = ['header','auth','terms','set_pin', 'show_next']
-const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:WalletSetupProps) => {
+const WalletSetup = ({ wallet_settings, onSettingsUpdate, onFocusPosition, onClose, onNext }:WalletSetupProps) => {
     const Colors = useColors();
     const [ terms_agreed, setTermsAgreed ] = useState(false);
     const [ auth_error, setAuthError ] = useState<string>();
@@ -52,7 +53,6 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
 
     const auth_required = wallet_settings.auth_end_datetime && moment().isAfter(wallet_settings.auth_end_datetime) ? true : false
 
-    console.log(wallet_settings)
     const renderSections = (data:{item:string,index:number}) => {
         switch(data.item){
             case 'header':
@@ -105,6 +105,7 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                             <TextInput
                                 style={{ width:200, alignSelf:'center', textAlign:'center' }}
                                 placeholder='HARDPIN'
+                                onFocusPosition={onFocusPosition}
                                 value={pin}
                                 onChangeText={(text) => setPinSettings({ ...pin_settings, pin: text })}
                             />
@@ -113,6 +114,7 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                                 <TextInput
                                     style={{ width:200, alignSelf:'center', textAlign:'center' }}
                                     placeholder='RE-Enter PIN'
+                                    onFocusPosition={onFocusPosition}
                                     value={confirm_pin}
                                     onChangeText={(text) => setPinSettings({ ...pin_settings, confirm_pin: text })}
                                 />
@@ -152,6 +154,7 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                     <TextInput
                         style={{ width:200, alignSelf:'center' }}
                         placeholder='ENTER PIN'
+                        onFocusPosition={onFocusPosition}
                         value={pin}
                         onChangeText={(text) => setPinSettings({ ...pin_settings, pin: text })}
                     />

package/src/Wallet/components/WithdrawCard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, Keyboard, KeyboardAvoidingView, Platform, TouchableWithoutFeedback } from "react-native";
-import type { AccountProps, ItemOrderProps, MyPlayerProps, PlayerBalanceProps, PlayerDepositLimitProps, PlayerWithdrawLimitProps, WalletSettingsProps } from '../../types';
+import type { AccountProps, FocusPositionProps, ItemOrderProps, MyPlayerProps, PlayerBalanceProps, PlayerDepositLimitProps, PlayerWithdrawLimitProps, WalletSettingsProps } from '../../types';
 import { ItemOrderApi, ItemOrderHelpers } from '../api';
 import { Button, Text, TextInput, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
@@ -11,12 +11,13 @@ type WithdrawCardProps = {
     wallet_settings:WalletSettingsProps,
     player_balance:PlayerBalanceProps,
     account:AccountProps,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
     deposit_limit:PlayerDepositLimitProps,
     withdraw_limit:PlayerWithdrawLimitProps,
     onTransact:(draft_order:ItemOrderProps) => void,
     onCancel:() => void
 }
-const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, withdraw_limit, deposit_limit , onCancel}:WithdrawCardProps) => {
+const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, withdraw_limit, onFocusPosition, deposit_limit , onCancel}:WithdrawCardProps) => {
     const Colors = useColors();
     const [ draft_order, setDraftOrder ] = useState<ItemOrderProps>();
 
@@ -63,6 +64,7 @@ const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, wi
                     <TextInput 
                         style={{ flexGrow:1, width:200, textAlign:'center', color:Colors.text.success, fontSize:28 }}
                         placeholder='0'
+                        onFocusPosition={onFocusPosition}
                         keyboardType='decimal-pad'
                         value={draft_order.amount as string}
                         onChangeText={(text) => setDraftOrder({ ...draft_order, amount:text })}

package/src/Wallet/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, FlatList } from 'react-native';
 import { ItemOrderApi, WalletApi, WalletHelpers } from './api';
 import WalletSetup from './components/WalletSetup';
-import type { AccountProps, BEEventProps, CodeRequestProps, ItemOrderProps, ItemProps, MyPlayerProps, PlayerAddressProps, PlayerBalanceProps, PlayerDepositLimitProps, PlayerReferralProps, PlayerWithdrawLimitProps, PromoProps, PublicPlayerProps, RewardOptionProps, WalletSettingsProps } from '../types';
+import type { AccountProps, BEEventProps, CodeRequestProps, FocusPositionProps, ItemOrderProps, ItemProps, MyPlayerProps, PlayerAddressProps, PlayerBalanceProps, PlayerDepositLimitProps, PlayerReferralProps, PlayerWithdrawLimitProps, PromoProps, PublicPlayerProps, RewardOptionProps, WalletSettingsProps } from '../types';
 import MyBalance from './components/MyBalance';
 import ManualCardAdd from './components/ManualCardAdd';
 import DepositCard from './components/DepositCard';
@@ -29,12 +29,13 @@ type MyWalletProps = {
     account_id?:string,
     new_balance?:PlayerBalanceProps,
     height?:number,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
     onClose:() => void,
     onEvent:(event:BEEventProps) => void
     onTransact: (item_order:ItemOrderProps, account_id?:string) => void
 }
 
-const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEvent }:MyWalletProps) => {
+const MyWallet = ({ height, new_balance, account_id, onFocusPosition, onTransact, onClose, onEvent }:MyWalletProps) => {
     const Colors = useColors();
     const [ wallet_size, setWalletSize ] = useState({ height:0, width:0 });
     const [ view, setView ] = useState<{
@@ -217,6 +218,7 @@ const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEven
                 <WalletSetup
                     player={player}
                     wallet_settings={wallet_settings}
+                    onFocusPosition={onFocusPosition}
                     onClose={() => {
                         if(!wallet_settings.pin){ return onClose() }
                         setWalkthrough({ ...walkthrough, enabled:false })
@@ -285,6 +287,7 @@ const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEven
                     :walkthrough.step_action == 'manual_ach' ?
                     <ManualACHAdd
                         player={player}
+                        onFocusPosition={onFocusPosition}
                         onAddAccount={(acct) => {
                             setWallet({ ...wallet, accounts: accounts.concat(acct) })
                             setWalkthrough({ ...walkthrough, step_action: undefined })
@@ -336,6 +339,7 @@ const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEven
                 {walkthrough.step_action == 'manual_ach' ?
                 <ManualACHAdd
                     player={player}
+                    onFocusPosition={onFocusPosition}
                     onAddAccount={(acct) => setWallet({ ...wallet, accounts: accounts.concat(acct) })}
                     onCancel={() => setWalkthrough({ ...walkthrough, step_action: undefined })}
                 />
@@ -355,6 +359,7 @@ const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEven
                 : walkthrough.active_step == 'deposit' && selected_account ?
                 <DepositCard
                     player={player}
+                    onFocusPosition={onFocusPosition}
                     wallet_settings={wallet_settings}
                     deposit_limit={deposit_limit}
                     code_details={code_details}
@@ -368,12 +373,12 @@ const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEven
             </View>
         )
     }
-    console.log(WalletHelpers.isWalletAuthenticated(wallet_settings))
     return (
         <View style={{ flex:1, height }}>
             {!WalletHelpers.isWalletAuthenticated(wallet_settings) ?
             <WalletSetup
                 player={player}
+                onFocusPosition={onFocusPosition}
                 wallet_settings={wallet_settings}
                 onClose={() => onClose()}
                 onSettingsUpdate={(ws) => {
@@ -413,6 +418,7 @@ const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEven
             :active_view == 'addresses' ?
             <AddressManager
                 player={player}
+                onFocusPosition={onFocusPosition}
                 player_addresses={player_addresses}
                 onAddAddress={(addy) => setWallet({ ...wallet, player_addresses: player_addresses.concat(addy) })}
                 onRemoveAddress={(addy) => setWallet({ ...wallet, player_addresses: player_addresses.filter(pa => pa.player_address_id != addy.player_address_id) })}
@@ -479,6 +485,7 @@ const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEven
             :active_view == 'deposit' && selected_account ?
             <DepositCard
                 player={player}
+                onFocusPosition={onFocusPosition}
                 wallet_settings={wallet_settings}
                 deposit_limit={deposit_limit}
                 account={selected_account}
@@ -492,6 +499,7 @@ const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEven
             :active_view == 'withdraw' && selected_account ?
             <WithdrawCard
                 player={player}
+                onFocusPosition={onFocusPosition}
                 player_balance={player_balance}
                 wallet_settings={wallet_settings}
                 withdraw_limit={withdraw_limit}
@@ -503,6 +511,7 @@ const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEven
             :active_view == 'verify' && selected_account ?
             <VerifyACHAccount
                 account={selected_account}
+                onFocusPosition={onFocusPosition}
                 onClose={() => {
                     setView({active_view:'my_accounts'})
                     setSelectedAccount(undefined); 
@@ -525,12 +534,14 @@ const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEven
             :active_view == 'add_ach'?
             <ManualACHAdd
                 player={player}
+                onFocusPosition={onFocusPosition}
                 onAddAccount={(acct) => setWallet({ ...wallet, accounts: accounts.concat(acct) })}
                 onCancel={() => setView({active_view:'my_accounts'})}
             />
             :active_view == 'add_card'?
             <ManualCardAdd
                 player={player}
+                onFocusPosition={onFocusPosition}
                 onAddAccount={(acct) => {
                     setWallet({ ...wallet, accounts: accounts.concat(acct) })
                     setView({active_view:'my_accounts'})

package/src/constants/useColors.tsx

@@ -54,6 +54,7 @@ export const useColors = () => {
             footer: Colors.shades.shade100,
             gold: Colors.incentive.gold,
             input: Colors.shades.shade100,
+            disabled_input: Colors.brand.slate,
             blur: 'rgba(242, 245, 247, 0.7)',
             liquidMarket: Colors.highlights.highlight500Faded,
             illiquidMarket: Colors.shades.shade100
@@ -130,6 +131,7 @@ export const useColors = () => {
             header: Colors.shades.blackFadedHeavy, // **(NEW)** #222831
             body: Colors.shades.shade500,
             input: 'rgba(255, 255, 255, 0.05)',
+            disabled_input: Colors.shades.black_faded,
             footer: Colors.shades.blackFadedHeavy, // **(NEW)** #222831,
             gold: Colors.incentive.goldDark,
             blur: 'rgba(17, 17, 17, 0.7)',