be-components 0.5.3 → 0.5.5

package/src/Wallet/index.tsx

@@ -25,20 +25,30 @@ import WalletActionSelector from './components/WalletActionSelector';
 import ACHAddCard from './components/ACHAddCard';
 import OrderManager from './components/OrderManager';
 import WalletSettings from './components/WalletSettings';
+import type { BEEventProps } from '../Observer/api/types';
 
 type MyWalletProps = {
     account_id?:string,
+    new_balance?:PlayerBalanceProps,
+    height?:number,
     onClose:() => void,
+    onEvent:(event:BEEventProps) => void
     onTransact: (item_order:ItemOrderProps, account_id?:string) => void
 }
 
 
-const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
+const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEvent }:MyWalletProps) => {
     const [ wallet_size, setWalletSize ] = useState({ height:0, width:0 });
-    const [ active_view, setActiveView ] = useState('wallet');
+    const [ view, setView ] = useState<{
+        active_view:string,
+        on_next_view?:string
+    }>({
+        active_view: 'wallet'
+    });
     const [ walkthrough, setWalkthrough ] = useState<{
         enabled:boolean,
-        active_step:string,
+        active_step?:string,
+        next_step?:string,
         steps:any[],
         step_action?:string,
     }>({
@@ -79,12 +89,23 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
         player_addresses:[],
         code_details: {}
     })
+    const { active_view } = view;
     const { my_referral, loaded, player, wallet_settings, player_balance, deposit_limit, code_details, withdraw_limit, accounts, player_addresses, my_orders } = wallet
     const ibt_placeholder_account = accounts.find(a => a.ibt_placeholder);
 
     useEffect(() => {
-        getData()
-    },[])
+        if(!loaded){ getData() }
+        if(loaded && new_balance){ setWallet({ ...wallet, player_balance:new_balance }) }
+    },[new_balance])
+
+    useEffect(() => {
+        if(onEvent){ onEvent({ event_name: 'wallet_view', event_data: { active_view, account_id:selected_account?.account_id }, level: 2 }) }
+    },[active_view])
+
+    useEffect(() => {
+        if(!walkthrough.enabled){ return }
+        if(onEvent){ onEvent({ event_name: 'wallet_walkthrough', event_data: { active_step: walkthrough.active_step, step_action: walkthrough.step_action }, level:1 }) }
+    },[walkthrough])
 
     const getData = async() => {
         WalletApi.setEnvironment();
@@ -103,8 +124,9 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
 
          
         const steps = WalletHelpers.genWalkthroughSteps(ws, accts, { item_orders, items })
-        setWalkthrough({ enabled:!ws.pin?true:false, active_step: 'add_ach_account', steps })
-    
+        setWalkthrough({ enabled:!ws.pin?true:false, active_step: 'welcome', steps, next_step: 'my_balance' })
+        if(!ws.pin && onEvent){ onEvent({ event_name: 'launch_wallet_wizard', event_data:{}, level:1 })}
+
         setWallet({
             ...wallet,
             loaded:true,
@@ -136,8 +158,8 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
     }
     const handleSelectAccount = async(account:AccountProps) => {
         setSelectedAccount(account)
-        if(account.status == 'verify'){ return setActiveView('verify') }
-        setActiveView('manage_account')
+        if(account.status == 'verify'){ return setView({active_view:'verify'}) }
+        setView({active_view:'manage_account'})
     }
 
     const renderWalkthroughProgress = (data:{ item:any, index:number }) => {
@@ -175,7 +197,7 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
 
     if(walkthrough.enabled){
         return (
-            <View style={{ flex:1 }}>
+            <View style={{ flex:1, height }}>
                 <View style={{ padding:10, marginRight:10, marginLeft:10, justifyContent:'center', alignItems:'center' }} onLayout={(ev) => {
                     const { height, width } = ev.nativeEvent.layout;
                     setWalletSize({ height, width })
@@ -196,27 +218,37 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
                 <WalletSetup
                     player={player}
                     wallet_settings={wallet_settings}
-                    onClose={() => setWalkthrough({ ...walkthrough, enabled:false })}
+                    onClose={() => {
+                        if(!wallet_settings.pin){ return onClose() }
+                        setWalkthrough({ ...walkthrough, enabled:false })
+                        if(onEvent){ onEvent({ event_name:'close_wallet_walkthrough', event_data: {}, level:1 }) }
+                    }}
                     onNext={() => {
                         if(WalletHelpers.isWalletAuthenticated(wallet_settings)){
-                            const steps = WalletHelpers.genWalkthroughSteps(wallet_settings, accounts, my_orders)
-                            setWalkthrough({ ...walkthrough, steps, active_step:'my_balance' })
+                            setWalkthrough({ ...walkthrough, active_step:walkthrough.next_step, next_step:'fund_account' })
                         }
                     }}
                     onSettingsUpdate={(ws) => {
                         setWallet({ ...wallet, wallet_settings: ws })
+                        if(WalletHelpers.isWalletAuthenticated(ws)){
+                            const steps = WalletHelpers.genWalkthroughSteps(ws, accounts, my_orders)
+                            setWalkthrough({ ...walkthrough, steps })
+                        }
                     }}
                 />
                 :walkthrough.active_step == 'my_balance' ?
                 <MyBalance
                     player={player}
                     player_balance={player_balance}
-                    onClose={() => setWalkthrough({ ...walkthrough, enabled:false })}
+                    onClose={() => {
+                        setWalkthrough({ ...walkthrough, enabled:false })
+                        if(onEvent){ onEvent({ event_name:'close_wallet_walkthrough', event_data: {}, level:1 }) }
+                    }}
                     onNext={() => {
-                        setWalkthrough({ ...walkthrough, active_step: 'add_ach_account' })
+                        setWalkthrough({ ...walkthrough, active_step: walkthrough.next_step, next_step: 'deposit' })
                     }}
                 />
-                :walkthrough.active_step == 'add_ach_account' ?
+                :walkthrough.active_step == 'fund_account' ?
                 <View style={{ flex:1 }}>
                     {!walkthrough.step_action ?
                     <FundAccountCard
@@ -225,9 +257,11 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
                         walkthrough
                         code_details={code_details}
                         onManualACH={() => setWalkthrough({ ...walkthrough, step_action:'manual_ach' })}
-                        onClose={() => setWalkthrough({ ...walkthrough, enabled:false })}
+                        onClose={() => {
+                            setWalkthrough({ ...walkthrough, enabled:false })
+                            if(onEvent){ onEvent({ event_name:'close_wallet_walkthrough', event_data: {}, level:1 }) }
+                        }}
                         onCard={(account) => {
-                            console.log(account)
                             if(account){
                                 setSelectedAccount(account)
                                 return setWalkthrough({ ...walkthrough, active_step:'deposit' })
@@ -236,15 +270,17 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
                         }}
                         onSelectAccount={(acct) => {
                             setSelectedAccount(acct);
+                            setWalkthrough({ ...walkthrough, active_step:'deposit' })
                         }}
                         onNext={() => {
-                            setWalkthrough({ ...walkthrough, active_step: 'deposit' })
                             let default_account = accounts.find(a => a.default_account)
                             if(!default_account){
                                 default_account = accounts.find(a => a.account_type == 'paypal');
                             }
-                            setSelectedAccount(default_account)
-                            setActiveView('deposit')
+                            if(default_account){
+                                setSelectedAccount(default_account)
+                                setWalkthrough({ ...walkthrough, active_step: walkthrough.next_step })
+                            }
                         }}
                     />
                     :walkthrough.step_action == 'manual_ach' ?
@@ -270,12 +306,51 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
                         player={player}
                         onAddAccount={(acct) => {
                             setWallet({ ...wallet, accounts: accounts.concat(acct) })
-                            setWalkthrough({ ...walkthrough, step_action: undefined })
+                            setSelectedAccount(acct)
+                            setWalkthrough({ ...walkthrough, step_action: undefined, active_step:'deposit' })
                         }}
                         onCancel={() => setWalkthrough({ ...walkthrough, step_action: undefined })}
                     />
                 :<></>}
                 </View>
+                : walkthrough.active_step == 'withdraw'?
+                <View style={{ flex:1 }}>
+                    {!walkthrough.step_action ?
+                    <ACHAddCard
+                    player={player}
+                    accounts={accounts}
+                    onManualACH={() => {
+                        setWalkthrough({ ...walkthrough, step_action: 'manual_ach' })
+                    }}
+                    onClose={() => {
+                        setWalkthrough({ ...walkthrough, enabled:false })
+                    }}
+                    onNext={() => {
+                        setWalkthrough({ ...walkthrough, enabled:false })
+                    }}
+                    onLinkACH={() => {
+                        setWalkthrough({ ...walkthrough, step_action: 'link_ach' })
+                    }}
+                />
+                :<></>}
+                {walkthrough.step_action == 'manual_ach' ?
+                    <ManualACHAdd
+                        player={player}
+                        onAddAccount={(acct) => setWallet({ ...wallet, accounts: accounts.concat(acct) })}
+                        onCancel={() => setWalkthrough({ ...walkthrough, step_action: undefined })}
+                    />
+                :walkthrough.step_action == 'link_ach' && ibt_placeholder_account ?
+                <LinkAccountManager
+                    ibt_placeholer_account={ibt_placeholder_account}
+                    onComplete={(acct) => {
+                        setWallet({ ...wallet, accounts: accounts.filter(a => a.account_id != acct.account_id).concat(acct) })
+                        setWalkthrough({ ...walkthrough, step_action:undefined });
+                    }}
+                    onCancel={() => setWalkthrough({ ...walkthrough, step_action:undefined })}
+                />
+                :<></>}
+                </View>
+                
                 : walkthrough.active_step == 'deposit' && selected_account ?
                 <DepositCard
                     player={player}
@@ -284,7 +359,7 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
                     code_details={code_details}
                     account={selected_account}
                     onCancel={() => {
-                        setWalkthrough({ ...walkthrough, active_step:'add_ach_account' })
+                        setWalkthrough({ ...walkthrough, active_step:'fund_account' })
                     }}
                     onTransact={(item_order) => onTransact(item_order, selected_account.account_id)}
                 />
@@ -293,17 +368,17 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
         )
     }
 
-
     return (
-        <View style={{ flex:1, backgroundColor:Colors.brand.midnight }}>
+        <View style={{ flex:1, height }}>
             {!WalletHelpers.isWalletAuthenticated(wallet_settings) ?
             <WalletSetup
                 player={player}
                 wallet_settings={wallet_settings}
+                onClose={() => onClose()}
                 onSettingsUpdate={(ws) => {
                     setWallet({ ...wallet, wallet_settings: ws })
                     if(WalletHelpers.isWalletAuthenticated(ws)){
-                        setActiveView('wallet') 
+                        setView({ active_view: 'wallet' })
                     }
                 }}
             />
@@ -313,10 +388,12 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
                 player={player}
                 player_balance={player_balance}
                 accounts={accounts}
-                onStartWalkthrough={(walkthrough) => setWalkthrough(walkthrough)}
+                onStartWalkthrough={(walkthrough, account) => {
+                    if(account){ setSelectedAccount(account) }
+                    setWalkthrough(walkthrough)
+                }}
                 onActionSelect={(action, account) => {
-                    setActiveView(action.action);
-                    console.log(action.action)
+                    setView({ active_view: action.action })
                     if(account){ setSelectedAccount(account) }
                 }}
                 onClose={onClose}
@@ -325,11 +402,11 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
             <AccountManager
                 accounts={accounts}
                 onSelectInstantBankTransfer={() => {
-                    setActiveView('add_ibt');
+                    setView({ active_view: 'add_ibt' });
                 }}
-                onClose={() => setActiveView('wallet')}
-                onSelectManualACH={() => setActiveView('add_ach')}
-                onSelectManualCard={() => setActiveView('add_card')}
+                onClose={() => setView({ active_view: 'wallet' })}
+                onSelectManualACH={() => setView({active_view:'add_ach'})}
+                onSelectManualCard={() => setView({active_view:'add_card'})}
                 onSelectAccount={(acct) => handleSelectAccount(acct)}
             />
             :active_view == 'addresses' ?
@@ -343,7 +420,7 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
             />
             :active_view == 'order_history' ?
             <OrderManager
-                onClose={() => setActiveView('wallet')}
+                onClose={() => setView({ active_view:'wallet' })}
 
             />
             :active_view == 'wallet_settings' ?
@@ -353,16 +430,20 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
                 deposit_limit={deposit_limit}
                 my_referral={my_referral}
                 onPremium={() => console.log('go premium')}
-                onClose={() => setActiveView('wallet')}
+                onClose={() => setView({active_view:'wallet'})}
             />
-            : active_view == 'add_ach_account' ?
+            : active_view == 'ach_add' ?
             <ACHAddCard
                 player={player}
                 accounts={accounts}
-                onManualACH={() => setActiveView('add_ach')}
-                onClose={() => setActiveView('wallet')}
-                onNext={() => console.log('NEXT!')}
-                onLinkACH={() => setActiveView('link_ach')}
+                onManualACH={() => setView({active_view:'add_ach'})}
+                onClose={() => setView({ active_view: 'wallet' })}
+                onNext={(account) => {
+                    setSelectedAccount(account);
+                    if(account.status == 'verify'){ return setView({active_view:'verify'}) }
+                    return setView({active_view:'wallet'})
+                }}
+                onLinkACH={() => setView({active_view:'add_ibt'})}
             />
             :active_view == 'account_limit' && selected_account ?
             <AccountLimitManager
@@ -391,7 +472,7 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
                 deposit_limit={deposit_limit}
                 withdraw_limit={withdraw_limit}
                 onAccountUpdate={(acct) => setWallet({ ...wallet, accounts: accounts.filter(a => a.account_id != acct.account_id) })}
-                onClose={() => setActiveView('my_accounts')}
+                onClose={() => setView({active_view:'my_accounts'})}
                 onTransact={onTransact}
             />
             :active_view == 'deposit' && selected_account ?
@@ -402,7 +483,7 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
                 account={selected_account}
                 code_details={code_details}
                 onCancel={() => {
-                    return setActiveView('wallet')
+                    return setView({active_view:'wallet'})
                     //return setActiveView('manage_account')
                 }}
                 onTransact={(item_order) => onTransact(item_order, selected_account.account_id)}
@@ -416,13 +497,13 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
                 deposit_limit={deposit_limit}
                 account={selected_account}
                 onTransact={(item_order) => onTransact(item_order, selected_account.account_id)}
-                onCancel={() => setActiveView('my_accounts')}
+                onCancel={() => setView({active_view:'my_accounts'})}
             />
             :active_view == 'verify' && selected_account ?
             <VerifyACHAccount
                 account={selected_account}
                 onClose={() => {
-                    setActiveView('my_accounts')
+                    setView({active_view:'my_accounts'})
                     setSelectedAccount(undefined); 
                 }}
                 onUpdateAccount={(acct) => {
@@ -433,23 +514,26 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
             :active_view == 'add_ibt' && ibt_placeholder_account?
             <LinkAccountManager
                 ibt_placeholer_account={ibt_placeholder_account}
-                onComplete={(account_id) => console.log(account_id)}
-                onCancel={() => setActiveView('my_accounts')}
+                onComplete={(acct) => {
+                    setWallet({ ...wallet, accounts: accounts.filter(a => a.account_id != acct.account_id).concat(acct) })
+                    setView({active_view:'my_accounts'});
+                }}
+                onCancel={() => setView({active_view:'my_accounts'})}
             />
             :active_view == 'add_ach'?
             <ManualACHAdd
                 player={player}
                 onAddAccount={(acct) => setWallet({ ...wallet, accounts: accounts.concat(acct) })}
-                onCancel={() => setActiveView('my_accounts')}
+                onCancel={() => setView({active_view:'my_accounts'})}
             />
             :active_view == 'add_card'?
             <ManualCardAdd
                 player={player}
                 onAddAccount={(acct) => {
                     setWallet({ ...wallet, accounts: accounts.concat(acct) })
-                    setActiveView('my_accounts')
+                    setView({active_view:'my_accounts'})
                 }}
-                onCancel={() => setActiveView('my_accounts')}
+                onCancel={() => setView({active_view:'my_accounts'})}
             />
             :active_view == 'add' ?
             <FundAccountCard
@@ -462,12 +546,12 @@ const MyWallet = ({ account_id, onTransact, onClose }:MyWalletProps) => {
                         setSelectedAccount(account)
                         return setWalkthrough({ ...walkthrough, step_action: 'deposit' })
                     }
-                    setActiveView('add_card')
+                    setView({active_view:'add_card'})
                 }}
-                onManualACH={() => setActiveView('add_ach')}
+                onManualACH={() => setView({active_view:'add_ach'})}
                 onSelectAccount={(acct) => {
                     setSelectedAccount(acct);
-                    setActiveView('deposit')
+                    setView({active_view:'deposit'})
                 }}
                 onNext={() => console.log('next')}
                 onClose={() => console.log('')}