be-components 0.5.4 → 0.5.6

package/src/Wallet/components/ManualACHAdd.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, TouchableOpacity } from "react-native";
+import { View, TouchableOpacity, ScrollView } from "react-native";
 import { Button, Checkbox, Text, TextInput } from '../../Components';
 import type { MyPlayerProps } from '../../ProfileManager/api/types';
 import Colors from '../../constants/colors';
@@ -47,7 +47,7 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
                 <Text size={26} color={Colors.brand.midnight} weight='bold'>MANUAL ACH ACCOUNT</Text>
                 <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Complete the form below to add a new ACH account.  Once submitted, we will send 2 small deposits to the account to confirm ownership. This process can take up to 3 business days.</Text>
             </View>
-            <View style={{ flex:1, padding:20 }}>
+            <ScrollView style={{ flex:1, padding:20 }}>
                 <View style={{ marginTop:10 }}>
                     <Text size={14} color={Colors.brand.midnight} weight='semibold'>Name on account</Text>
                     <TextInput 
@@ -100,7 +100,7 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
                     <Text style={{ marginTop:5 }} size={14} color={Colors.utility.warning}>Account Number Is Not Valid</Text>
                     :<></>}
                 </View>
-            </View>
+            </ScrollView>
             <View>
                 <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', paddingLeft:20, paddingRight:20 }} onPress={() => setDisclaimer(!disclaimer)}>
                     <Checkbox size={30} checked={disclaimer} disabled onSelect={() => console.log('')}/>

package/src/Wallet/components/ManualCardAdd.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, ScrollView } from "react-native";
 import type { MyPlayerProps } from '../../ProfileManager/api/types';
 import { WalletApi, WalletHelpers } from '../api';
 import { Button, Icons, Text, TextInput } from '../../Components';
@@ -69,7 +69,7 @@ const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) =>
                 <Text size={26} color={Colors.brand.midnight} weight='bold'>NEW CARD ACCOUNT</Text>
                 <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Complete the form below to add a new card account. Once successfully added, you can transact immediately.</Text>
             </View>
-            <View style={{ flex:1, padding:10, margin:10 }}>
+            <ScrollView style={{ flex:1, padding:10, margin:10 }}>
                 <View nativeID='cc_input' style={{ marginTop:10 }}>
                     <View nativeID='card_number' style={{ padding:5 }}>
                         <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
@@ -146,7 +146,7 @@ const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) =>
                         <Text size={14} color={Colors.utility.warning} weight='semibold'>Expiration date is not valid</Text>
                     :<></>}
                 </View>
-            </View>
+            </ScrollView>
             {error ?
             <View style={{ padding:10 }}>
                 <Text size={16} color={Colors.utility.warning} weight='bold' textAlign='center'>{error}</Text>

package/src/Wallet/components/MyBalance.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, TouchableOpacity } from "react-native"
+import { View, TouchableOpacity, ScrollView } from "react-native"
 import type { MyPlayerProps, PlayerBalanceProps } from '../../ProfileManager/api/types';
 import type { AccountProps } from '../../types';
 import { Button, Icons, Text } from '../../Components';
@@ -24,7 +24,7 @@ const MyBalance = ({ player_balance, onClose, onNext }:MyBalanceProps) => {
                 <Text size={26} color={Colors.brand.midnight} weight='bold'>BETTOREDGE BALANCES</Text>
                 <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>All order and competition activity goes in and out of your BettorEdge balances.  The specific balance depends on which app-mode you are in.</Text>
             </View>
-            <View style={{ flex:1, padding:10 }}>
+            <ScrollView style={{ flex:1, padding:10 }}>
                 <View style={{ padding:10, paddingBottom:0 }}>
                     <Text size={18} color={Colors.brand.midnight} weight='bold' textAlign='left'>APP MODES</Text>
                 </View>
@@ -62,7 +62,7 @@ const MyBalance = ({ player_balance, onClose, onNext }:MyBalanceProps) => {
                         <Text size={16} weight='bold' color={Colors.shades.white}>E{player_balance.free_market_balance.toFixed(2)}</Text>
                     </View>
                 </View>
-            </View>
+            </ScrollView>
             <View nativeID='action_row' style={{ flexDirection:'row', justifyContent:'space-between', padding:10 }}>
                 <Button
                     title='EXIT SETUP'

package/src/Wallet/components/OrderManager.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, View, ActivityIndicator } from 'react-native';
+import { FlatList, View, ActivityIndicator, ScrollView } from 'react-native';
 import { ItemOrderApi } from '../api';
 import type { ItemOrderProps, ItemProps } from '../../types';
 import ItemOrderCard from './ItemOrderCard';
@@ -30,7 +30,6 @@ const OrderManager = ({ onClose }:OrderManagerProps) => {
 
     const getDataFromServer = async(offset:number) => {
         setLoading(true);
-        console.log(offset)
         const my_orders = await ItemOrderApi.getMyItemOrders(offset);
         setData({
             items:my_orders.items,
@@ -55,7 +54,7 @@ const OrderManager = ({ onClose }:OrderManagerProps) => {
                 <Text size={26} color={Colors.brand.midnight} weight='bold'>ORDER HISTORY</Text>
                 <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Review your order history below.  Select an item to see the transaction details.</Text>
             </View>
-            <View style={{ flex:1, padding:10 }}>
+            <ScrollView style={{ flex:1, padding:10 }}>
                 {loading ?
                 <ActivityIndicator size='large' color={Colors.brand.midnight} />
                 :<></>}
@@ -64,7 +63,7 @@ const OrderManager = ({ onClose }:OrderManagerProps) => {
                     renderItem={renderItemOrders}
                     keyExtractor={(item) => item.item_order_id.toString()}
                 />
-            </View>
+            </ScrollView>
             <View style={{ flexDirection:'row', alignItems:'center', padding:20, paddingBottom:0 }}>
                 <Button
                     style={{ opacity: offset > 0 ? 1 : 0.5 }}

package/src/Wallet/components/VerifyACHAccount.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import { Button, Text, TextInput } from '../../Components';
 import Colors from '../../constants/colors';
 import { WalletApi, WalletHelpers } from '../api';
@@ -59,7 +59,7 @@ const VerifyACHAccount = ({ account, onClose, onUpdateAccount }:VerifyACHWidgetP
                 <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>
             </View>
-            <View nativeID='verify_inputs' style={{ flex:1, margin:20 }}>
+            <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>
                     <TextInput 
@@ -88,7 +88,7 @@ const VerifyACHAccount = ({ account, onClose, onUpdateAccount }:VerifyACHWidgetP
                 <Text style={{ marginTop:10 }} textAlign='center' size={14} color={Colors.utility.warning} weight='bold'>{error}</Text>
                 :<></>}
 
-            </View>
+            </ScrollView>
             {account.status == 'verify' ?
             <View nativeID='verify_actions' style={{ flexDirection:'row', padding:20 }}>
                 <Button

package/src/Wallet/components/WalletActionSelector.tsx

@@ -14,7 +14,7 @@ type WalletActionSelectorProps ={
     onClose: () => void,
     walkthrough_steps:any[],
     onActionSelect:(action:any, account?:AccountProps) => void,
-    onStartWalkthrough:(walkthrough:any) => void
+    onStartWalkthrough:(walkthrough:any, account?:AccountProps) => void
 }
 
 const sections = [
@@ -56,8 +56,8 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
                 if(!default_account){ default_account = accounts.find(a => a.account_type == 'paypal')}
                 return onActionSelect(action, default_account)
             case 'withdraw':
-                let withdraw_account = accounts.find(a => !a.ibt_placeholder && a.account_type == 'ach')
-                if(!withdraw_account){ return onActionSelect({ action: 'add_ach_account' }) }
+                let withdraw_account = accounts.find(a => !a.ibt_placeholder && a.account_type == 'ach' && a.status == 'active')
+                if(!withdraw_account){ return onActionSelect({ action: 'ach_add' }) }
                 return onActionSelect(action, withdraw_account)
             default: onActionSelect(action)
         }
@@ -99,11 +99,25 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
         )
     }
 
+    const handleStepSelect = (step:any, index:number) => {
+        console.log(step)
+        switch(step.step){
+            case 'deposit':
+                let default_account = accounts.find(a => a.default_account)
+                if(!default_account){ default_account = accounts.find(a => a.account_type == 'paypal') }
+                if(!default_account){ return }
+                return onStartWalkthrough({ enabled:true, steps: walkthrough_steps, active_step: step.step, next_step: walkthrough_steps[index + 1]?.step}, default_account)
+            default:
+                return onStartWalkthrough({ enabled:true, steps: walkthrough_steps, active_step: step.step, next_step: walkthrough_steps[index + 1]?.step})
+        }
+        
+    }
+
     const renderSteps = (data: { item:any, index:number }) => {
         return (
             <TouchableOpacity
                 style={{ margin:5, padding:10, flexDirection:'row', alignItems:'center', borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8 }}
-                onPress={() => onStartWalkthrough({ enabled:true, steps: walkthrough_steps, active_step: data.item.step })}>
+                onPress={() => handleStepSelect(data.item, data.index)}>
                 <Icons.CheckCirlceIcon size={14} color={data.item.complete?Colors.utility.success:Colors.brand.slate}/>
                 <Text style={{ flex:1, marginLeft:10 }} size={14} color={Colors.brand.midnight}>{data.item.label}</Text>
                 <Icons.ChevronIcon direction='right' size={8} color={Colors.brand.midnight} />

package/src/Wallet/components/WalletSettings.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useState } from "react"
 import type { MyPlayerProps } from '../../ProfileManager/api/types';
 import type { PlayerDepositLimitProps, PlayerReferralProps, PlayerWithdrawLimitProps, PromoProps } from '../../types';
-import { View, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity, ScrollView } from 'react-native';
 import { Button, Icons, Text } from '../../Components';
 import Colors from '../../constants/colors';
 import { WalletHelpers } from '../api';
@@ -57,7 +57,7 @@ const WalletSettings = ({ player, my_referral, deposit_limit, withdraw_limit, on
                     <Text weight={active_tab == 'referral'?'bold':'regular'} textAlign="center" size={14} color={active_tab=='referral'?Colors.shades.white:Colors.brand.midnight}>Referral</Text>
                 </TouchableOpacity>
             </View>
-            <View nativeID="settings" style={{ flex:1, marginLeft:10, marginRight:10, borderRightWidth:1, borderLeftWidth:1, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+            <ScrollView nativeID="settings" style={{ flex:1, marginLeft:10, marginRight:10, borderRightWidth:1, borderLeftWidth:1, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
                 {active_tab == 'deposit' ?
                 <View>
                     {deposit_limit ?
@@ -197,7 +197,7 @@ const WalletSettings = ({ player, my_referral, deposit_limit, withdraw_limit, on
                     :<></>}
                 </View>
                 :<></>}
-            </View>
+            </ScrollView>
             {false && player?.type == 'freemium' ?
             <View style={{ backgroundColor:Colors.shades.shade600, borderRadius:8, padding:10, margin:10 }}>
                 <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign="center">Want better limits and higher referral awards?</Text>

package/src/Wallet/components/WalletSetup.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, Image, TouchableOpacity, Linking } from "react-native";
+import { View, Image, TouchableOpacity, Linking, ScrollView } from "react-native";
 import type { WalletSettingsProps } from '../../types';
 import { Button, Checkbox, Icons, Text, TextInput } from '../../Components';
 import Colors from '../../constants/colors';
@@ -64,6 +64,7 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                 <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Welcome to your wallet.  Please enter your security pin to continue!</Text>
                 }
             </View>
+            <ScrollView style={{ flex:1 }}>
             {!wallet_settings.agreed_to_terms ?
             <View style={{ flex:1, padding:20 }}>
                 <View>
@@ -170,7 +171,8 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                 </View>
             </View>
             }
-            <View style={{ flexDirection:'row', padding:10 }}>
+            </ScrollView>
+            <View style={{ flexDirection:'row', padding:20 }}>
                 {!wallet_settings.agreed_to_terms && onClose ?
                 <View style={{ flex:1, flexDirection:'row' }}>
                     <Button

package/src/Wallet/components/WithdrawCard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator, View, ScrollView } from "react-native";
 import type { AccountProps, ItemOrderProps, PlayerDepositLimitProps, PlayerWithdrawLimitProps, WalletSettingsProps } from '../../types';
 import { ItemOrderApi, ItemOrderHelpers } from '../api';
 import type { MyPlayerProps, PlayerBalanceProps } from '../../ProfileManager/api/types';
@@ -50,13 +50,14 @@ const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, wi
 
 
     let balance = Math.floor(player_balance.balance * 100) / 100
-
+    let limit_available = withdraw_limit.ach_daily_limit - withdraw_limit.last_days_ach_withdraws
     return (
         <View style={{ flex:1 }}>
             <View nativeID='deposit_rules' style={{ padding:10 }}>
                 <Text size={28} textAlign='center' weight='bold' color={Colors.brand.midnight}>Withdraw to your bank</Text>
                 <Text style={{ marginTop:10 }} size={14} textAlign='center' weight='regular' color={Colors.brand.midnight}>Withdraws can take up to 3 business days</Text>
             </View>
+            <ScrollView style={{ flex:1 }}>
             <View style={{ flex:1 }}>
                 <View nativeID='deposit_amount' style={{ justifyContent:'center', alignItems:'center', padding:20 }}>
                     <TextInput 
@@ -73,7 +74,7 @@ const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, wi
                 </View>
                 <View style={{ flexDirection:'row', alignItems:'center', padding:10, paddingTop:0 }}>
                     <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='semibold'>Available For Withdraw</Text>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{available_for_withdraw.toFixed(2)}</Text>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{Math.min(available_for_withdraw, limit_available).toFixed(2)}</Text>
                 </View>
                 <View style={{ marginTop:5, borderRadius:8, padding:10, backgroundColor:Colors.shades.shade600 }}>
                     <Text size={14} color={Colors.brand.midnight} textAlign='left' weight='semibold'>Determined by the LESSER OF</Text>
@@ -103,7 +104,7 @@ const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, wi
                         </View>
                         <View style={{ padding:5, flexDirection:'row', alignItems:'center' , borderTopWidth:1, borderTopColor:Colors.shades.shade600 }}>
                             <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>Limit Available</Text>
-                            <Text size={14} color={Colors.brand.midnight} weight='bold'>${(withdraw_limit.ach_daily_limit - withdraw_limit.last_days_ach_withdraws).toFixed(2)}</Text>
+                            <Text size={14} color={Colors.brand.midnight} weight='bold'>${(limit_available).toFixed(2)}</Text>
                         </View>
                     </View>
                 </View>
@@ -118,6 +119,7 @@ const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, wi
                 </View>
                 :<></>}
             </View>
+            </ScrollView>
             <View nativeID='action_row' style={{ flexDirection:'row', padding:20 }}>
                 <Button
                     style={{ flex:1, marginRight:5, opacity: 1 }}