be-components 3.6.1 → 3.6.3

package/src/Wallet/components/WalletSetup.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
-import { Image, Keyboard, Linking, TouchableWithoutFeedback } from "react-native";
+import { FlatList, Image, Linking } from "react-native";
 import type { MyPlayerProps, WalletSettingsProps } from '../../types';
 import { Checkbox, Icons } from '../../Components';
 import { WalletApi } from '../api';
 import moment from 'moment-mini';
-import { button_styles } from '../../constants/styles';
 import { useColors } from '../../constants/useColors';
 import { Button, Text, TextInput, View } from '../../Components/Themed';
 
@@ -15,7 +14,7 @@ type WalletSetupProps = {
     onClose?:() => void,
     onNext?:() => void
 }
-
+const setup_sections = ['header','auth','terms','set_pin', 'show_next']
 const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:WalletSetupProps) => {
     const Colors = useColors();
     const [ terms_agreed, setTermsAgreed ] = useState(false);
@@ -53,123 +52,149 @@ 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
 
-    return (
-        <TouchableWithoutFeedback style={{ flex:1 }} onPress={() => Keyboard.dismiss()}>
-        <View style={{ flex:1 }}>
-            <View style={{ padding:20 }}>
-                <Text size={26} theme='h1'>MY WALLET</Text>
-                {onNext ?
-                <Text style={{ marginTop:10 }} size={16} theme='description'>Welcome to your wallet.  Go through the wizard to get set up to deposit and withdraw!</Text>
-                :!wallet_settings.agreed_to_terms ?
-                <Text style={{ marginTop:10 }} size={16}  theme='description'>Welcome to your wallet.  This is where your sensitive account details are kept.  Please review our terms and conditions!</Text>
-                :
-                <Text style={{ marginTop:10 }} size={16}  theme='description'>Welcome to your wallet.  Please enter your security pin to continue!</Text>
-                }
-            </View>
-            <View style={{ flex:1 }}>
-            {!wallet_settings.agreed_to_terms ?
-            <View style={{ flex:1, padding:20 }}>
-                <View>
-                    <Text size={20} theme='h2' textAlign='center'>BettorEdge Wallet</Text>
-                    <Text style={{ marginTop:5 }} size={26} theme='h1' textAlign='center'>Terms and Conditions</Text>
-                </View>
-                <View style={{ justifyContent:'center', alignItems:'center' }}>
-                <Image
-                    source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1717098691/Signing_the_contract_stfvtj.png' }}
-                    style={{ width: 250, height:250 }}
-                    resizeMode='cover'
-                />
-                
-                </View>
-                <Button onPress={() => Linking.openURL('https://www.bettoredge.com/wallet-terms-of-use')}>
-                    <Text size={14} theme='description' textAlign='center'>Press here to review our <Text size={14} theme='action'>Wallet Terms of Use</Text>. To continue setting up your wallet please review and agree to the terms.</Text>
-                </Button>
-                <Button 
-                    style={{ marginTop:15, flexDirection:'row', alignItems:'center', padding:20, borderRadius:8 }}
-                    onPress={() => setTermsAgreed(!terms_agreed)}>
-                    <Text style={{ flex:1 }} size={16} theme='description'>I have read and agree to the terms</Text>
-                    <Checkbox size={30} checked={terms_agreed} disabled onSelect={() => console.log('')}/>
-                </Button>
-            </View>
-            : !wallet_settings.pin ?
-            <View style={{ flex:1, padding:20 }}>
-                <View>
-                    <Text size={20} theme='h1' textAlign='center'>BettorEdge Wallet</Text>
-                    <Text style={{ marginTop:5 }} size={26} theme='h1' textAlign='center'>{pin_view == 'set' ? 'Set' : 'Confirm'} Security PIN</Text>
-                </View>
-                <View style={{ justifyContent:'center', alignItems:'center' }}>
+    console.log(wallet_settings)
+    const renderSections = (data:{item:string,index:number}) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ padding:20 }}>
+                        <Text theme='h1'>MY WALLET</Text>
+                        {onNext ?
+                        <Text style={{ marginTop:5 }} theme='description'>Welcome to your wallet.  Go through the wizard to get set up to deposit and withdraw!</Text>
+                        :!wallet_settings.agreed_to_terms ?
+                        <Text style={{ marginTop:5 }} theme='description'>Welcome to your wallet.  This is where your sensitive account details are kept.  Please review our terms and conditions!</Text>
+                        :
+                        <Text style={{ marginTop:5 }} theme='description'>Welcome to your wallet.  Please enter your security pin to continue!</Text>
+                        }
+                    </View>
+                )
+            case 'terms':
+                if(wallet_settings.agreed_to_terms){ return <></> }
+                return (
+                <View style={{ flex:1, padding:20 }}>
+                    <View>
+                        <Text size={20} theme='h2' textAlign='center'>BettorEdge Wallet</Text>
+                        <Text style={{ marginTop:5 }} size={26} theme='h1' textAlign='center'>Terms and Conditions</Text>
+                    </View>
+                    <Button onPress={() => Linking.openURL('https://www.bettoredge.com/wallet-terms-of-use')}>
+                        <Text size={14} theme='description' textAlign='center'>Press here to review our <Text size={14} theme='action'>Wallet Terms of Use</Text>. To continue setting up your wallet please review and agree to the terms.</Text>
+                    </Button>
+                    <Button 
+                        style={{ marginTop:15, flexDirection:'row', alignItems:'center', padding:20, borderRadius:8 }}
+                        onPress={() => setTermsAgreed(!terms_agreed)}>
+                        <Text style={{ flex:1 }} size={16} theme='description'>I have read and agree to the terms</Text>
+                        <Checkbox size={30} checked={terms_agreed} disabled onSelect={() => console.log('')}/>
+                    </Button>
+                    <View style={{ justifyContent:'center', alignItems:'center' }}>
                     <Image
-                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1717099686/Secure_lock_and_key_successfully_unlocked_it6hy0.png' }}
+                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1717098691/Signing_the_contract_stfvtj.png' }}
                         style={{ width: 250, height:250 }}
                         resizeMode='cover'
                     />
+                    
+                    </View>
                 </View>
-                <View style={{ marginBottom:15 }}>
-                    <Text size={14} theme='description'>Let's secure your sensitive information. Before doing any activity in your wallet, you will be required to enter a pin.  Lets set it now.</Text>
+                )
+            case 'set_pin':
+                if(wallet_settings.pin || !wallet_settings.agreed_to_terms){ return <></> }
+                return (
+                <View style={{ flex:1, padding:20 }}>
+                    <View>
+                        <Text style={{ marginTop:5, marginBottom:10 }} size={26} theme='h1' textAlign='center'>{pin_view == 'set' ? 'Set' : 'Confirm'} Security PIN</Text>
+                        {pin_view == 'set' ?
+                            <TextInput
+                                style={{ width:200, alignSelf:'center', textAlign:'center' }}
+                                placeholder='HARDPIN'
+                                value={pin}
+                                onChangeText={(text) => setPinSettings({ ...pin_settings, pin: text })}
+                            />
+                            :
+                            <View>
+                                <TextInput
+                                    style={{ width:200, alignSelf:'center', textAlign:'center' }}
+                                    placeholder='RE-Enter PIN'
+                                    value={confirm_pin}
+                                    onChangeText={(text) => setPinSettings({ ...pin_settings, confirm_pin: text })}
+                                />
+                            </View>
+                            }
+                    </View>
+                    <View style={{ margin:15 }}>
+                        <Text size={14} theme='description' textAlign='center'>Let's secure your sensitive information. Before doing any activity in your wallet, you will be required to enter a pin.  Lets set it now.</Text>
+                    </View>
+                    <View style={{ justifyContent:'center', alignItems:'center' }}>
+                        <Image
+                            source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1717099686/Secure_lock_and_key_successfully_unlocked_it6hy0.png' }}
+                            style={{ width: 250, height:250 }}
+                            resizeMode='cover'
+                        />
+                    </View>
                 </View>
-                {pin_view == 'set' ?
-                <TextInput
-                    style={{ width:200, alignSelf:'center' }}
-                    placeholder='HARDPIN'
-                    value={pin}
-                    onChangeText={(text) => setPinSettings({ ...pin_settings, pin: text })}
-                />
-                :
-                <View>
+                )
+            case 'auth':
+                if(!auth_required || !wallet_settings.pin || !wallet_settings.agreed_to_terms){ return <></> }
+                return (
+                <View style={{ flex:1, padding:20, paddingBottom:400 }}>
+                    <View>
+                        <Text size={20} theme='h2' textAlign='center'>BettorEdge Wallet</Text>
+                        <Text style={{ marginTop:5 }} size={26} theme='h1' textAlign='center'>Enter Security PIN</Text>
+                    </View>
+                    <View style={{ justifyContent:'center', alignItems:'center' }}>
+                        <Image
+                            source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1717099686/Secure_lock_and_key_successfully_unlocked_it6hy0.png' }}
+                            style={{ width: 250, height:250 }}
+                            resizeMode='cover'
+                        />
+                    </View>
+                    <View style={{ marginBottom:15 }}>
+                        <Text size={14} theme='description'>Before you can continue to your wallet.  Please enter your security pin.</Text>
+                    </View>
                     <TextInput
                         style={{ width:200, alignSelf:'center' }}
-                        placeholder='RE-Enter PIN'
-                        value={confirm_pin}
-                        onChangeText={(text) => setPinSettings({ ...pin_settings, confirm_pin: text })}
-                    />
-                </View>
-                
-                }
-            </View>
-            :auth_required ?
-            <View style={{ flex:1, padding:20 }}>
-                <View>
-                    <Text size={20} theme='h2' textAlign='center'>BettorEdge Wallet</Text>
-                    <Text style={{ marginTop:5 }} size={26} theme='h1' textAlign='center'>Enter Security PIN</Text>
-                </View>
-                <View style={{ justifyContent:'center', alignItems:'center' }}>
-                    <Image
-                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1717099686/Secure_lock_and_key_successfully_unlocked_it6hy0.png' }}
-                        style={{ width: 250, height:250 }}
-                        resizeMode='cover'
+                        placeholder='ENTER PIN'
+                        value={pin}
+                        onChangeText={(text) => setPinSettings({ ...pin_settings, pin: text })}
                     />
+                    {auth_error ? 
+                    <View style={{ padding:10 }}>
+                        <Text size={14} color={Colors.text.warning} weight='bold' textAlign='center'>{auth_error}</Text>
+                    </View>
+                    :<></>}
                 </View>
-                <View style={{ marginBottom:15 }}>
-                    <Text size={14} theme='description'>Before you can continue to your wallet.  Please enter your security pin.</Text>
-                </View>
-                
-                <TextInput
-                    style={{ width:200, alignSelf:'center' }}
-                    placeholder='ENTER PIN'
-                    value={pin}
-                    onChangeText={(text) => setPinSettings({ ...pin_settings, pin: text })}
-                />
-                {auth_error ? 
-                <View style={{ padding:10 }}>
-                    <Text size={14} color={Colors.text.warning} weight='bold' textAlign='center'>{auth_error}</Text>
-                </View>
-                :<></>}
-            </View>
-            :
+                )
+            case 'show_next':
+                if(!wallet_settings.pin){ return <></> }
+                if(!wallet_settings.agreed_to_terms){ return <></> }
+                if(auth_required){ return <></> }
+                return (
+                    <View style={{ flex:1 }}>
+                        <View style={{ justifyContent:'center', alignItems:'center' }}>
+                            <Image
+                                source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1717099686/Secure_lock_and_key_successfully_unlocked_it6hy0.png' }}
+                                style={{ width: 250, height:250 }}
+                                resizeMode='cover'
+                            />
+                        </View>
+                        <View style={{ margin:15, borderRadius:8, padding:10 }}>
+                            <Text size={18} theme='h1' textAlign='center'>WALLET SECURED!</Text>
+                            <Text style={{ marginTop:5 }} size={14} theme='description' textAlign='center'>Select next to continue your wallet set up by adding a transaction account.</Text>
+                        </View>
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+
+    return (
+        <View style={{flex:1}}>
             <View style={{ flex:1 }}>
-                <View style={{ justifyContent:'center', alignItems:'center' }}>
-                    <Image
-                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1717099686/Secure_lock_and_key_successfully_unlocked_it6hy0.png' }}
-                        style={{ width: 250, height:250 }}
-                        resizeMode='cover'
-                    />
-                </View>
-                <View style={{ margin:15, borderRadius:8, padding:10 }}>
-                    <Text size={18} theme='h1' textAlign='center'>WALLET SECURED!</Text>
-                    <Text style={{ marginTop:5 }} size={14} theme='description' textAlign='center'>Select next to continue your wallet set up by adding a transaction account.</Text>
-                </View>
-            </View>
-            }
+                <FlatList
+                    data={setup_sections}
+                    key='setup_sections_wallet'
+                    keyExtractor={(item) => item}
+                    renderItem={renderSections}
+                />
             </View>
             <View style={{ flexDirection:'row', padding:20 }}>
                 {!wallet_settings.agreed_to_terms && onClose ?
@@ -226,22 +251,22 @@ const WalletSetup = ({ wallet_settings, onSettingsUpdate, onClose, onNext }:Wall
                 <View style={{ flex:1, flexDirection:'row', alignItems:'center', justifyContent:'space-between' }}>
                     <Button
                         title='EXIT SETUP'
-                        type='close'
+                        type='error'
                         onPress={() => onClose()}
                     />
                     <Button
-                        style={button_styles.wizard_valid}
+                        float
+                        style={{ borderRadius:100, height:50, width:50, justifyContent:'center', alignItems:'center' }}
                         onPress={() => onNext()}
                         //disabled={loading}
                         >
-                        <Icons.ChevronIcon size={20} direction='right' color={Colors.text.h1}/>
+                        <Icons.ChevronIcon size={18} direction='right' color={Colors.text.h1}/>
                     </Button>
                 </View>
                 :<></>
                 }
             </View>
         </View>
-        </TouchableWithoutFeedback>
     )
 }
 

package/src/Wallet/index.tsx

@@ -315,7 +315,7 @@ const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEven
                 </View>
                 : walkthrough.active_step == 'withdraw'?
                 <View style={{ flex:1 }}>
-                    {!walkthrough.step_action ?
+                {!walkthrough.step_action ?
                     <ACHAddCard
                     player={player}
                     accounts={accounts}
@@ -334,11 +334,11 @@ const MyWallet = ({ height, new_balance, account_id, onTransact, onClose, onEven
                 />
                 :<></>}
                 {walkthrough.step_action == 'manual_ach' ?
-                    <ManualACHAdd
-                        player={player}
-                        onAddAccount={(acct) => setWallet({ ...wallet, accounts: accounts.concat(acct) })}
-                        onCancel={() => setWalkthrough({ ...walkthrough, step_action: undefined })}
-                    />
+                <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}
@@ -368,7 +368,7 @@ 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) ?