be-components 7.5.9 → 7.6.0

package/src/Checkout/api/index.tsx

@@ -164,9 +164,17 @@ const CheckoutHelpers = {
     },
     genItemOrder: (draft_order:ItemOrderProps, items:ItemProps[], account:AccountProps):ItemOrderProps => {
         let amount = parseFloat(draft_order.amount as string);
-        let fee_1 = 0
         let no_fee = items.find(i => i.no_fees) ? true : false
-        if(!no_fee){ fee_1 = Math.round(((account.transaction_fee * amount) + Number.EPSILON) * 100) / 100 }
+        let item_fees = draft_order.items.reduce((a,b) => {
+            let b_item = items.find(i => i.item_id == b.item_id);
+            let b_fee = b_item && b_item.processing_fee ? b_item.processing_fee * b.amount : 0
+            return a + b_fee
+        }, 0);
+        let account_fee = Math.round(((account.transaction_fee * amount) + Number.EPSILON) * 100) / 100 
+        let fee_1 = Math.max(item_fees, account_fee)
+        console.log('item fees are')
+        console.log(item_fees)
+        if(no_fee){ fee_1 = 0 }
         let total_amount = amount + fee_1
         return {
             ...draft_order,

package/src/Checkout/components/OrderSummaryCard.tsx

@@ -13,23 +13,23 @@ const OrderSummaryCard = ({ item_order }:OrderSummaryCardProps) => {
         <View>
             <View style={{ flexDirection:'row', padding:5, paddingRight:10, paddingLeft:10 }}>
                 <Text style={{ flex:1 }} size={14} theme='description'>Subtotal</Text>
-                <Text size={14} theme='description'>${item_order.amount}</Text>
+                <Text size={14} theme='description'>${Number(item_order.amount).toFixed(2)}</Text>
             </View>
             {item_order.fee_1 ?
             <View style={{ flexDirection:'row', padding:5, paddingRight:10, paddingLeft:10 }}>
                 <Text style={{ flex:1 }} size={14} theme='description'>{item_order.fee_1}</Text>
-                <Text size={14} theme='description'>${item_order.fee_1_amount}</Text>
+                <Text size={14} theme='description'>${item_order.fee_1_amount?.toFixed(2)}</Text>
             </View>
             :<></>}
             {item_order.fee_2 ?
             <View style={{ flexDirection:'row', padding:5, paddingRight:10, paddingLeft:10 }}>
                 <Text style={{ flex:1 }} size={14} theme='description'>{item_order.fee_2}</Text>
-                <Text size={14} theme='description'>${item_order.fee_2_amount}</Text>
+                <Text size={14} theme='description'>${item_order.fee_2_amount?.toFixed(2)}</Text>
             </View>
             :<></>}
             <View style={{ flexDirection:'row', padding:5, paddingRight:10, paddingLeft:10 }}>
                 <Text style={{ flex:1 }} size={14} theme='h1'>Total</Text>
-                <Text size={14} theme='h1'>${item_order.total_amount}</Text>
+                <Text size={14} theme='h1'>${item_order.total_amount.toFixed(2)}</Text>
             </View>
         </View>
     )

package/src/Checkout/index.tsx

@@ -156,7 +156,6 @@ const Checkout = ({ item_order, height, account_id, onCancel, onCompleteOrder, o
             setRedirectVisible(true);
             setLoading(false);
         }
-
     }
 
     const handleCancel = async() => {

package/src/Wallet/api/index.ts

@@ -114,6 +114,14 @@ const WalletApi = {
         const resp = await axios.post(`${WALLET_SVC_API}/v1/accounts/account/ach/add`, { account, ach_detail })
         return { account: resp.data.account, ach_detail: resp.data.ach_detail }
     },
+    addACHDetails: async(account_id:string, routing_number:string, account_number:string):Promise<ACHDetailProps | undefined> => {
+        try {
+            const resp = await axios.post(`${WALLET_SVC_API}/v1/accounts/account/ach/details/add`, { account_id, routing_number, account_number });
+            return resp.data.ach_details
+        } catch (e) {
+            return undefined
+        }
+    },
     verifyACHAccount: async(account_id:string, amount_1:number, amount_2:number):Promise<{ account:AccountProps, status:'success'|'fail' }> => {
         const resp = await axios.post(`${WALLET_SVC_API}/v1/accounts/account/ach/verify`, { account_id, amount_1, amount_2 })
         return { account: resp.data.account, status:resp.data.status }
@@ -308,7 +316,6 @@ const ItemOrderHelpers = {
             last_update_datetime: ''
         }
     },
-
     getDepositAvailable: (deposit_limit:PlayerDepositLimitProps, account:AccountProps) => {
         let deposit_available = 0
         if(deposit_limit){
@@ -502,10 +509,11 @@ const WalletHelpers = {
         if(!account){ console.log('') }
         return [
             { action_id: '1', action_type: 'deposit', action_title: 'Deposit Funds', action_description: 'Deposit to your BettorEdge balance using this account' },
-            { action_id: '2', action_type: 'withdraw', action_title: 'Withdraw Funds', action_description: 'Withdraw funds to this bank account from your BettorEdge balance' },
-            { action_id: '3', action_type: 'limits', action_title: 'Account Limits', action_description: 'Set personal deposit limits to manage how much you use BettorEdge' },
-            { action_id: '4', action_type: 'snoozes', action_title: 'Snooze Account', action_description: 'Set snooze for this account to take a break from BettorEdge' },
-            { action_id: '5', action_type: 'remove', action_title: 'Remove Account', action_description: 'Remove and delete this account from your profile' },
+            { action_id: '2', action_type: 'instant_withdraw', action_title: 'Instantly Withdraw Funds (with Fee)', action_description: 'Withdraw funds instantly to this bank account from your BettorEdge balance' },
+            { action_id: '3', action_type: 'withdraw', action_title: 'Withdraw Funds (Free)', action_description: 'Withdraw funds to this bank account from your BettorEdge balance' },
+            { action_id: '4', action_type: 'limits', action_title: 'Account Limits', action_description: 'Set personal deposit limits to manage how much you use BettorEdge' },
+            { action_id: '5', action_type: 'snoozes', action_title: 'Snooze Account', action_description: 'Set snooze for this account to take a break from BettorEdge' },
+            { action_id: '6', action_type: 'remove', action_title: 'Remove Account', action_description: 'Remove and delete this account from your profile' },
         ]
     },
     /**

package/src/Wallet/components/LinkAccountManager.tsx

@@ -134,12 +134,20 @@ const LinkAccountManager = ({ player_addresses, ibt_placeholer_account, onCancel
             :!show_addresses.selected_address ?
             <View style={{ marginTop:10, borderRadius:8, padding:20 }}>
                 <Text size={14} theme='description'>Before we continue, we will need get the billing address associated with the account to be linked</Text>
-                <Button
-                    style={{ marginTop:10 }}
-                    title={show_addresses.selected_address ?'CHANGE':'ADD BILLING ADDRESS'}
-                    type='success'
-                    onPress={() => setShowAddresses({ ...show_addresses, visible:true })}
-                />
+                <View transparent style={{ flexDirection:'row', alignItems:'center', marginTop:10 }}>
+                    <Button
+                        title='CANCEL'
+                        style={{ flex:1, marginRight:4 }}
+                        type='error'
+                        onPress={() => onCancel()}
+                    />
+                    <Button
+                        style={{ flex:2, marginLeft:4 }}
+                        title={show_addresses.selected_address ?'CHANGE':'ADD BILLING ADDRESS'}
+                        type='success'
+                        onPress={() => setShowAddresses({ ...show_addresses, visible:true })}
+                    />
+                </View>
             </View>
             :<></>}
             <Modal

package/src/Wallet/components/ManageAccountCard.tsx

@@ -29,13 +29,14 @@ const manage_sections = ['header','actions']
 const ManageAccountCard = ({ player, view_mode, insets, wallet_settings, player_balance, account, deposit_limit, withdraw_limit, onAccountUpdate, onTransact, onClose }:ManageAccountCardProps) => {
     const Colors = useColors();
     const [ active_action, setActiveAction ] = useState('select');
-
     const account_actions = WalletHelpers.getAccountOptions(account)
 
     const renderIcon = (action:AccountActionProps) => {
         switch(action.action_type){
             case 'deposit':
                 return <Icons.DepositIcon color={Colors.text.white} size={20} />
+            case 'instant_withdraw':
+                return <Icons.WithdrawIcon color={Colors.text.gold} size={20} />
             case 'withdraw':
                 return <Icons.WithdrawIcon color={Colors.text.white} size={20} />
             case 'limits':
@@ -55,7 +56,8 @@ const ManageAccountCard = ({ player, view_mode, insets, wallet_settings, player_
         if(data.item.action_type == 'remove' && account.ibt_placeholder){ return <></> }
         if(data.item.action_type == 'withdraw' && account.account_type == 'card'){ return <></> }
         if(data.item.action_type == 'remove' && account.account_type === 'paypal'){ return <></> }
-
+        if(data.item.action_type == 'instant_withdraw' && !account.ach_detail){ return <></> }
+        if(data.item.action_type == 'instant_withdraw' && !account.ach_detail?.instant_allowed){ return <></> }
         //if(data.item.action_type == 'deposit' && account.account_type == 'card' && account?.card_detail?.card_type != 'debit'){ return <></> }
         return (
             <Button float style={{ flex:1, minHeight:80, margin:8 }} onPress={() => setActiveAction(data.item.action_type)}>
@@ -84,6 +86,11 @@ const ManageAccountCard = ({ player, view_mode, insets, wallet_settings, player_
                             <Text style={{ marginTop:5}} theme='description'>Below are the available actions that can be performed on this account!</Text>
                             :<></>}
                         </View>
+                        {account.ach_detail && account.ach_detail.ach_type == 'ibf' ?
+                        <View transparent style={{ marginLeft:10 }}>
+                            <Icons.BankInstantIcon color={Colors.text.gold} size={20} />
+                        </View>
+                        :<></>}
                     </View>
                 )
             case 'actions':
@@ -144,6 +151,20 @@ const ManageAccountCard = ({ player, view_mode, insets, wallet_settings, player_
                         wallet_settings={wallet_settings}
                         player_balance={player_balance}
                         account={account}
+                        onAccountUpdate={onAccountUpdate}
+                        withdraw_limit={withdraw_limit}
+                        onTransact={onTransact}
+                        onCancel={() => setActiveAction('select')}
+                    />
+                    :active_action == 'instant_withdraw'?
+                    <WithdrawCard
+                        player={player}
+                        instant
+                        deposit_limit={deposit_limit}
+                        wallet_settings={wallet_settings}
+                        player_balance={player_balance}
+                        account={account}
+                        onAccountUpdate={onAccountUpdate}
                         withdraw_limit={withdraw_limit}
                         onTransact={onTransact}
                         onCancel={() => setActiveAction('select')}

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, FocusPositionProps, MyPlayerProps } from '../../types';
+import type { AccountProps, ACHDetailProps, 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,13 +9,15 @@ const validator = require('us-bank-account-validator');
 
 type ManualACHAddProps = {
     player:MyPlayerProps,
+    account_id?:string,
     onFocusPosition?:(pos:FocusPositionProps) => void,
+    onUpdateAchDetails:(ach_detail:ACHDetailProps) => void,
     onAddAccount:(account:AccountProps) => void,
     onCancel:() => void
 }
 
 const ach_sections = ['header','name','bank_name','routing_number','account_number','disclaimer']
-const ManualACHAdd = ({ player, onAddAccount, onCancel, onFocusPosition }:ManualACHAddProps) => {
+const ManualACHAdd = ({ player, account_id, onUpdateAchDetails, onAddAccount, onCancel, onFocusPosition }:ManualACHAddProps) => {
     const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ error, setError ] = useState<string>();
@@ -29,8 +31,10 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel, onFocusPosition }:Manual
     const bank_valid = ach_details.bank_name ? true : false;
     const routing_valid = validator.routingNumber(ach_details.routing_number);
     const account_valid = validator.accountNumber(ach_details.account_number);
-    const valid = bank_valid && routing_valid && account_valid && disclaimer ? true : false
-
+    let valid = routing_valid && account_valid ? true : false
+    if(!account_id && !bank_valid){ valid = false }
+    if(!account_id && !disclaimer){ valid = false }
+    
     const handleAddAccount = async() => {
         if(!valid || loading){ return }
         setLoading(true);
@@ -45,9 +49,27 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel, onFocusPosition }:Manual
         setLoading(false);
     }
 
+    const handleAddAchDetails = async() => {
+        if(!valid || loading || !account_id){ return }
+        if(!ach_details.account_number || !ach_details.routing_number){ return }
+        setLoading(true)
+        const new_ach_detail = await WalletApi.addACHDetails(account_id, ach_details.routing_number, ach_details.account_number);
+        if(!new_ach_detail){ setError('Sorry, we were not able to confirm this account.  Please try again.') }
+        else { onUpdateAchDetails(new_ach_detail) }
+        setLoading(false)
+    }
+
     const renderSections = (data:{item:string,index:number}) => {
         switch(data.item){
             case 'header':
+                if(account_id){
+                    return (
+                        <View type='header' style={{ padding:20 }}>
+                            <Text theme='h1'>CONFIRM ACCOUNT DETAILS</Text>
+                            <Text style={{ marginTop:4 }} theme='description'>Please confirm your account details below to continue.</Text>
+                        </View>
+                    )
+                }
                 return (
                     <View type='header' style={{ padding:20 }}>
                         <Text theme='h1'>MANUAL ACH ACCOUNT</Text>
@@ -68,6 +90,7 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel, onFocusPosition }:Manual
                     </View>
                 )
             case 'bank_name':
+                if(account_id){ return <></> }
                 return (
                     <View style={{ padding:10 }}>
                         <Text size={14} theme='h2'>Bank Name</Text>
@@ -126,7 +149,6 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel, onFocusPosition }:Manual
     return (
         <View style={{ flex:1 }}>
             <KeyboardAvoidingView style={{ flex:1 }} behavior={Platform.OS == 'ios' ? 'padding' : 'height'}>
-
                 <FlatList
                     key='manual_ach_sections'
                     keyExtractor={(item) => item}
@@ -134,13 +156,14 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel, onFocusPosition }:Manual
                     renderItem={renderSections}
                 />
             </KeyboardAvoidingView>
-
+            {!account_id ?
             <View>
                 <Button style={{ flexDirection:'row', alignItems:'center', paddingLeft:20, paddingRight:20 }} onPress={() => setDisclaimer(!disclaimer)}>
                     <Checkbox size={30} checked={disclaimer} disabled onSelect={() => console.log('')}/>
                     <Text style={{ marginLeft:10 }} size={14} theme='description'>I understand that by continuing, we will send 2 small deposits to this bank account to confirm ownership. Once received, I will enter the amounts here.</Text>
                 </Button>
             </View>
+            :<></>}
             {error?
             <View style={{ padding:10 }}>
                 <Text size={16} color={Colors.text.warning} textAlign='center' weight='semibold'>{error}</Text>
@@ -156,12 +179,12 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel, onFocusPosition }:Manual
                     onPress={() => onCancel()}
                 />
                 <Button
-                    title='ADD ACCOUNT'
+                    title={account_id? 'CONFIRM ACCOUNT': 'ADD ACCOUNT'}
                     style={{ flex:3, opacity:valid&&!loading&&!error?1:0.5 }}
                     disabled={!valid || loading || error?true:false}
                     loading={loading}
                     type='success'
-                    onPress={() => handleAddAccount()}
+                    onPress={() => account_id ? handleAddAchDetails() : handleAddAccount()}
                 />
             </View>
             : account.status == 'verify' ?

package/src/Wallet/components/WalletActionSelector.tsx

@@ -45,7 +45,10 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
                     action :'deposit', label: "Make A Deposit", icon:<Icons.DepositIcon size={20} color={Colors.text.h1} />, description: 'Fund your BettorEdge real-money balance by making a deposit from an existing account or new one.'
                 },
                 { 
-                    action :'withdraw', label: "Make A Withdrawal", icon:<Icons.WithdrawIcon size={20} color={Colors.text.h1} />, description: 'Move funds from your BettorEdge real-money balance to a connected ACH account.'
+                    action :'withdraw', label: "Withdraw Funds (FREE)", icon:<Icons.WithdrawIcon size={20} color={Colors.text.h1} />, description: 'Move funds from your BettorEdge real-money balance to a connected ACH account. (Up to 3 biz days)'
+                },
+                { 
+                    action :'instant_withdraw', label: "Instantly Withdraw Funds", icon:<Icons.WithdrawIcon size={20} color={Colors.text.h1} />, description: 'Instantly Move funds from your BettorEdge real-money balance to a connected ACH account.'
                 },
                 
             ] 
@@ -59,9 +62,16 @@ 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' && a.status == 'active')
+                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)
+            case 'instant_withdraw':
+                let instant_withdraw_account = accounts.find(a => a.status == 'active' && a.account_type == 'ach' && a.ach_detail?.ach_type == 'ibf');
+                if(instant_withdraw_account){ return onActionSelect(action, instant_withdraw_account) }
+                //Ok lets get the ibt_placeholder one!
+                let ibt_placeholder = accounts.find(a => a.ibt_placeholder);
+                if(ibt_placeholder){ return onActionSelect(action, ibt_placeholder) }
+                return //Dont do anything if we dont have an ibt acccount possible
             default: onActionSelect(action)
         }
     }

package/src/Wallet/components/WithdrawCard.tsx

@@ -5,6 +5,7 @@ import { ItemOrderApi, ItemOrderHelpers } from '../api';
 import { Button, Text, TextInput, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
 import { Icons } from '../../Components';
+import ManualACHAdd from './ManualACHAdd';
 
 
 type WithdrawCardProps = {
@@ -12,6 +13,8 @@ type WithdrawCardProps = {
     wallet_settings:WalletSettingsProps,
     player_balance:PlayerBalanceProps,
     account:AccountProps,
+    instant?:boolean,
+    onAccountUpdate:(account:AccountProps) => void,
     onFocusPosition?:(pos:FocusPositionProps) => void,
     deposit_limit:PlayerDepositLimitProps,
     withdraw_limit:PlayerWithdrawLimitProps,
@@ -19,26 +22,38 @@ type WithdrawCardProps = {
     onCancel:() => void
 }
 const sections = ['header','input','limits']
-const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, withdraw_limit, onFocusPosition, deposit_limit , onCancel}:WithdrawCardProps) => {
+const WithdrawCard = ({ player, wallet_settings, onTransact, instant, player_balance, account, withdraw_limit, onAccountUpdate, onFocusPosition, deposit_limit , onCancel}:WithdrawCardProps) => {
     const Colors = useColors();
     const [ draft_order, setDraftOrder ] = useState<ItemOrderProps>();
-
+    const [ confirm_ach, setConfirmAch ] = useState(false);
+    //const [ withdraw_item, setWithdrawItem ] = useState<ItemProps | undefined>(undefined);
     useEffect(() => {
         getItemFromServer()
     },[])
 
     const getItemFromServer = async() => {
-        const item = await ItemOrderApi.getItemByIdentifier('withdraw')
+        const item = await ItemOrderApi.getItemByIdentifier(instant?'instant_withdraw':'withdraw');
+        //setWithdrawItem(item);
         setDraftOrder(ItemOrderHelpers.genWithdrawOrder(item, account))
     }
 
-
+    
     const { errors, available_for_withdraw } = ItemOrderHelpers.isWithdrawOrderValid(account, withdraw_limit, deposit_limit, player_balance, wallet_settings, draft_order)
 
     const handleTransact = () => {
         if(!draft_order){ return }
         if(errors.length > 0){ return }
-        onTransact({ ...draft_order, total_amount: draft_order.amount as number })
+
+        //OK LETS CHECK THE ACCOUNT TYPE AND IF WE NEED ACCOUNT NUMBER INFORMATION
+        if(!instant){
+            if(!account.ach_detail?.account_number){
+                return setConfirmAch(true);
+            }
+        }
+        //Lets get the item
+        let draft_item = draft_order.items[0]
+        if(!draft_item){ return }
+        onTransact({ ...draft_order, total_amount: draft_order.amount as number, items: [{ ...draft_item, amount: draft_order.amount as number }] })
     }
 
 
@@ -51,7 +66,9 @@ const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, wi
                 return (
                     <View nativeID='deposit_rules' style={{ padding:10 }}>
                         <Text size={28} textAlign='center' theme='h1'>Withdraw to your bank</Text>
+                        {!instant ?
                         <Text style={{ marginTop:10 }} size={14} textAlign='center' theme='description'>Withdraws can take up to 3 business days</Text>
+                        :<></>}
                     </View>
                 )
             case 'input':
@@ -181,6 +198,25 @@ const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, wi
                     onPress={() => handleTransact()}
                 />
             </View>
+            {confirm_ach ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, flex:1, padding:20 }}>
+                <ManualACHAdd
+                    account_id={account.account_id}
+                    player={player}
+                    onAddAccount={(account) => console.log(account)}
+                    onUpdateAchDetails={(ach_detail) => {
+                        console.log('HERE!!!')
+                        let new_account = { ...account }
+                        new_account.ach_detail = ach_detail
+                        console.log(new_account) 
+                        onAccountUpdate(new_account);
+                        setConfirmAch(false);
+                    }}
+                    onCancel={() => setConfirmAch(false)}
+                    onFocusPosition={onFocusPosition}
+                />
+            </View>
+            :<></>}
         </View>
     )
 }

package/src/Wallet/index.tsx

@@ -291,6 +291,7 @@ const MyWallet = ({ height, new_balance, account_id, view_mode, insets, header_s
                     :walkthrough.step_action == 'manual_ach' ?
                     <ManualACHAdd
                         player={player}
+                        onUpdateAchDetails={(_) => console.log('')}
                         onFocusPosition={onFocusPosition}
                         onAddAccount={(acct) => {
                             setWallet({ ...wallet, accounts: accounts.concat(acct) })
@@ -343,6 +344,7 @@ const MyWallet = ({ height, new_balance, account_id, view_mode, insets, header_s
                 {walkthrough.step_action == 'manual_ach' ?
                 <ManualACHAdd
                     player={player}
+                    onUpdateAchDetails={(_) => console.log('')}
                     onFocusPosition={onFocusPosition}
                     onAddAccount={(acct) => setWallet({ ...wallet, accounts: accounts.concat(acct) })}
                     onCancel={() => setWalkthrough({ ...walkthrough, step_action: undefined })}
@@ -485,7 +487,10 @@ const MyWallet = ({ height, new_balance, account_id, view_mode, insets, header_s
                 account={selected_account}
                 deposit_limit={deposit_limit}
                 withdraw_limit={withdraw_limit}
-                onAccountUpdate={(acct) => setWallet({ ...wallet, accounts: accounts.filter(a => a.account_id != acct.account_id) })}
+                onAccountUpdate={(acct) => {
+                    setWallet({ ...wallet, accounts: accounts.filter(a => a.account_id != acct.account_id).concat(acct) })
+                    if(selected_account.account_id == acct.account_id){ setSelectedAccount(acct) }
+                }}
                 onClose={() => setView({active_view:'my_accounts'})}
                 onTransact={(o, account_id) => {
                     setView({ active_view: 'my_accounts' });
@@ -516,6 +521,27 @@ const MyWallet = ({ height, new_balance, account_id, view_mode, insets, header_s
                 wallet_settings={wallet_settings}
                 withdraw_limit={withdraw_limit}
                 deposit_limit={deposit_limit}
+                onAccountUpdate={(acct) => {
+                    setWallet({ ...wallet, accounts: accounts.filter(a => a.account_id != acct.account_id).concat(acct) })
+                    if(selected_account.account_id == acct.account_id){ setSelectedAccount(acct) }
+                }}
+                account={selected_account}
+                onTransact={(item_order) => onTransact(item_order, selected_account.account_id)}
+                onCancel={() => setView({active_view:'my_accounts'})}
+            />
+            :active_view == 'instant_withdraw' && selected_account ?
+            <WithdrawCard
+                player={player}
+                instant
+                onFocusPosition={onFocusPosition}
+                player_balance={player_balance}
+                wallet_settings={wallet_settings}
+                withdraw_limit={withdraw_limit}
+                deposit_limit={deposit_limit}
+                onAccountUpdate={(acct) => {
+                    setWallet({ ...wallet, accounts: accounts.filter(a => a.account_id != acct.account_id).concat(acct) })
+                    if(selected_account.account_id == acct.account_id){ setSelectedAccount(acct) }
+                }}
                 account={selected_account}
                 onTransact={(item_order) => onTransact(item_order, selected_account.account_id)}
                 onCancel={() => setView({active_view:'my_accounts'})}
@@ -546,6 +572,7 @@ const MyWallet = ({ height, new_balance, account_id, view_mode, insets, header_s
             :active_view == 'add_ach'?
             <ManualACHAdd
                 player={player}
+                onUpdateAchDetails={(_) => console.log('')}
                 onFocusPosition={onFocusPosition}
                 onAddAccount={(acct) => setWallet({ ...wallet, accounts: accounts.concat(acct) })}
                 onCancel={() => setView({active_view:'my_accounts'})}

package/src/types.d.ts

@@ -1303,6 +1303,8 @@ export interface ACHDetailProps {
     account_type: 'checking' | 'savings'
     routing_number?:string,
     account_number?:string,
+    manual_withdraw_allowed?:boolean,
+    instant_allowed?:boolean,
     encryption_iv?:string,
     session_id?:string,
     payment_provider:'nuvei' | 'payliance',
@@ -1492,6 +1494,7 @@ export interface ItemProps {
     color_options?: ColorOptionProps[], 
     price_editable?:boolean,
     location_required?:boolean,
+    processing_fee?:number,
     location_restricted?:boolean,
     locations_allowed?:string[],
     shipping_address_required:boolean,