be-components 3.6.1 → 3.6.2

package/src/Wallet/components/LinkAccountManager.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { TouchableOpacity, View, Linking } from "react-native"
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Linking, Modal } from "react-native"
+import { Icons } from '../../Components';
 import { WalletApi } from '../api';
 import type { AccountProps, PlayerAddressProps } from '../../types';
-import SpringView from '../../Components/Spring';
 import AddressManager from './AddressManager';
 import AddressCard from './AddressCard';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 type LinkAccountManagerProps = {
     ibt_placeholer_account:AccountProps,
@@ -16,6 +16,7 @@ type LinkAccountManagerProps = {
 }
 
 const LinkAccountManager = ({ player_addresses, ibt_placeholer_account, onCancel, onComplete }: LinkAccountManagerProps) => {
+    const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ try_counter, setTryCounter ] = useState(0);
     const [ show_addresses, setShowAddresses ] = useState<{
@@ -75,17 +76,19 @@ const LinkAccountManager = ({ player_addresses, ibt_placeholer_account, onCancel
 
     return (
         <View style={{ flex:1 }}>
-            <View style={{ padding:20 }}>
-                <Text size={26} color={Colors.brand.midnight} weight='bold'>LINK NEW ACCOUNT</Text>
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Link an account via instant bank transfer and get access to instant deposits and withdraws.</Text>
+            <View type='header' style={{ padding:20 }}>
+                <Text theme='h1'>LINK NEW ACCOUNT</Text>
+                <Text style={{ marginTop:10 }} size={16} theme='description'>Link an account via instant bank transfer and get access to instant deposits and withdraws.</Text>
             </View>
             <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
-                <Icons.IBTFLowIcon size={350} />
-                <View style={{backgroundColor:Colors.shades.shade100, padding:20, marginTop:20}}>
-                    <Text size={16} color={Colors.brand.cobalt} weight='light' textAlign='center' style={{marginBottom:2}}>Using <TouchableOpacity onPress={() => window.open('https://plaid.com/safety', '_blank')}><Text weight='bold' color={Colors.brand.electric} size={18}>Plaid</Text></TouchableOpacity>, you will be asked to securly login to your bank and select the account you wish to link and transact from.</Text>
+                <View float style={{ padding:10, backgroundColor:Colors.text.white }}>
+                    <Icons.IBTFLowIcon size={350} />
+                </View>
+                <View style={{ padding:20, marginTop:20}}>
+                    <Text size={16} theme='light' textAlign='center' style={{marginBottom:2}}>Using <Button style={{padding:0}} type='text' onPress={() => Linking.openURL('https://plaid.com/safety')}><Text weight='bold' color={Colors.text.action} size={18}>Plaid</Text></Button>, you will be asked to securly login to your bank and select the account you wish to link and transact from.</Text>
                     {show_addresses.selected_address ?
                     <View style={{ padding:20 }}>
-                        <Text style={{ marginBottom:10 }} textAlign='center' weight='bold' size={16} color={Colors.brand.midnight}>Billing Address</Text>
+                        <Text style={{ marginBottom:10 }} textAlign='center' theme='h1'>Billing Address</Text>
                         <AddressCard
                             address={show_addresses.selected_address}
                             hide_delete
@@ -93,22 +96,19 @@ const LinkAccountManager = ({ player_addresses, ibt_placeholer_account, onCancel
                             onSelect={() => setShowAddresses({ ...show_addresses, visible:true })}
                         />  
                     </View>
-
                     :<></>}
-                    </View>
+                </View>
             </View>
             
             {error?
-            <Text size={14} color={Colors.utility.warning}>{error}</Text>
+            <Text size={14} color={Colors.text.warning}>{error}</Text>
             :<></>}
             {show_addresses.selected_address && (!account || account.status == 'redirect') ?
             <View nativeID='link_actions' style={{ flexDirection:'row', padding:20  }}>
                 <Button
                     title='CANCEL'
                     style={{ flex:1, marginRight:5 }}
-                    title_color={Colors.brand.electric}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
+                    type='error'
                     onPress={() => onCancel()}
                 />
                 {!redirect_url ?
@@ -117,9 +117,7 @@ const LinkAccountManager = ({ player_addresses, ibt_placeholer_account, onCancel
                     disabled={loading || !valid}
                     title='START ACCOUNT LINK'
                     loading={loading}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.electric}
-                    padding={15}
+                    type='success'
                     onPress={() => handleStartLink()}
                 />
                 :
@@ -128,63 +126,59 @@ const LinkAccountManager = ({ player_addresses, ibt_placeholer_account, onCancel
                     disabled={linking}
                     title='FINISH WITH PLAID'
                     loading={linking}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.success}
-                    padding={15}
+                    type='success'
                     onPress={() => handleNavOut()}
                 />
                 }
             </View>
             :!show_addresses.selected_address ?
-            <View style={{ marginTop:10, borderRadius:8, backgroundColor:Colors.shades.shade600, padding:20 }}>
-                <Text size={14} color={Colors.brand.midnight} textAlign='center'>Before we continue, we will need get the billing address associated with the account to be linked</Text>
+            <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'}
-                    title_color={Colors.shades.white}
-                    padding={15}
-                    backgroundColor={Colors.brand.electric}
+                    type='success'
                     onPress={() => setShowAddresses({ ...show_addresses, visible:true })}
                 />
             </View>
             :<></>}
-            {show_addresses.visible ?
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end' }}>
-                <SpringView 
-                    slide='vertical'
-                    from={500}
-                    to={0}
-                    style={{ borderTopRightRadius:40, borderTopLeftRadius:40, backgroundColor:Colors.shades.white }}>
+            <Modal
+                visible={show_addresses.visible}
+                transparent
+                animationType='slide'
+                style={{flex:1}}
+            >
+                <View type='blur' style={{ flex:1 }}>
                     <AddressManager
                         player_addresses={player_addresses}
                         onSelect={(addy) => setShowAddresses({ visible:false, selected_address:addy })}
                         onAddAddress={(addy) => setShowAddresses({ visible:false, selected_address:addy })}
                         onCancel={() => setShowAddresses({ ...show_addresses, visible:false })}
                     />
-                </SpringView>
-            </View>
-            :<></>}
-            {account && account.status != 'redirect' ?
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end' }}>
-                <SpringView 
-                    slide='vertical'
-                    from={500}
-                    to={0}
-                    style={{ borderTopRightRadius:40, borderTopLeftRadius:40, backgroundColor:Colors.shades.white }}>
+                </View>
+            </Modal>
+            <Modal
+                visible={account && account.status != 'redirect' ? true : false}
+                transparent
+                animationType='slide'
+                style={{flex:1}}
+            >
+                {account && account.status != 'redirect' ?
+                <View type='blur' style={{ flex:1 }}>
                     {account.status == 'active' ?
                     <View style={{ flex:1, padding:10, paddingTop:30, paddingBottom:30, justifyContent:'center', alignItems:'center' }}>
                         <Icons.TransactionSuccessIcon  size={150} />
-                        <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.utility.success, marginTop:20 }}>
-                            <Text size={20} color={Colors.utility.success} weight='bold' textAlign='center'>Account Linked Successfully</Text>
-                            <Text style={{ marginTop:10 }} size={16} color={Colors.brand.cobalt} weight='regular' textAlign='center'>Your account has successfully been added. Please select close below to continue.</Text>
+                        <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.text.success, marginTop:20 }}>
+                            <Text size={20} color={Colors.text.success} weight='bold' textAlign='center'>Account Linked Successfully</Text>
+                            <Text style={{ marginTop:10 }} size={16} theme='description' textAlign='center'>Your account has successfully been added. Please select close below to continue.</Text>
                         </View>
                     </View>
                     : 
                     <View style={{ flex:1, padding:10, paddingTop:30, paddingBottom:30, justifyContent:'center', alignItems:'center' }}>
                         <Icons.TransactionErrorIcon  size={150} />
-                        <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.utility.error, marginTop:20 }}>
-                            <Text size={20} color={Colors.utility.error} weight='bold' textAlign='center'>Failed to Link Account</Text>
-                            <Text style={{ marginTop:10 }} size={16} color={Colors.brand.cobalt} weight='regular' textAlign='center'>Sorry, we were unable to link your account at this time.  Please try again or reach out to support for help.</Text>
+                        <View style={{ padding:20, borderRadius:8, borderWidth:1, borderColor:Colors.text.error, marginTop:20 }}>
+                            <Text size={20} color={Colors.text.error} weight='bold' textAlign='center'>Failed to Link Account</Text>
+                            <Text style={{ marginTop:10 }} size={16} theme='description' textAlign='center'>Sorry, we were unable to link your account at this time.  Please try again or reach out to support for help.</Text>
                         </View>
                     </View>
                     }
@@ -192,20 +186,16 @@ const LinkAccountManager = ({ player_addresses, ibt_placeholer_account, onCancel
                         <Button
                             style={{ flex:1, opacity:1 }}
                             title='CLOSE'
-                            //disabled={loading}
-                            title_color={Colors.utility.error}
-                            borderWidth={1}
-                            borderColor={Colors.utility.error}
-                            padding={15}
+                            type='error'
                             onPress={() => {
                                 if(account.status == 'active'){ return onComplete(account) }
                                 return onCancel()
                             }}
                         />
                     </View>
-                </SpringView>
-            </View>
-            :<></>}
+                </View>
+                :<></>}
+            </Modal>
         </View>
     )
 }

package/src/Wallet/components/ManualACHAdd.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
-import { View, TouchableOpacity, ScrollView } from "react-native";
-import { Button, Checkbox, Text, TextInput } from '../../Components';
-import Colors from '../../constants/colors';
+import { Checkbox } from '../../Components';
 import { WalletApi, WalletHelpers } from '../api';
 import type { AccountProps, MyPlayerProps } from '../../types';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
+import { FlatList, KeyboardAvoidingView, Platform } from 'react-native';
 const validator = require('us-bank-account-validator');
 
 type ManualACHAddProps = {
@@ -11,7 +12,10 @@ type ManualACHAddProps = {
     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 Colors = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ error, setError ] = useState<string>();
     const [ ach_account, setACHAccount ] = useState({
@@ -40,75 +44,101 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
         setLoading(false);
     }
 
+    const renderSections = (data:{item:string,index:number}) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ padding:20 }}>
+                        <Text theme='h1'>MANUAL ACH ACCOUNT</Text>
+                        <Text style={{ marginTop:4 }} theme='description'>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>
+                )
+            case 'name':
+                return (
+                    <View style={{ padding:10 }}>
+                        <Text size={14} theme='h2'>Name on account</Text>
+                        <TextInput 
+                            style={{ marginTop:10 }}
+                            value={`${player.first_name} ${player.last_name}`} 
+                            editable={false}
+                            onChangeText={() => console.log('ehy')}
+                        />
+                    </View>
+                )
+            case 'bank_name':
+                return (
+                    <View style={{ padding:10 }}>
+                        <Text size={14} theme='h2'>Bank Name</Text>
+                        <TextInput 
+                            style={{ marginTop:10 }}
+                            keyboardType='default' 
+                            placeholder={'Bank Name'} 
+                            value={ach_details.bank_name}
+                            autoFocus={true} 
+                            onChangeText={(e) => setACHAccount({ ...ach_account, ach_details: { ...ach_details, bank_name: e } })}
+                        />
+                        {!bank_valid ?
+                        <Text style={{ marginTop:5 }} size={14} color={Colors.text.warning}>Bank Name Is Not Valid</Text>
+                        :<></>}
+                    </View>
+                )
+            case 'routing_number':
+                return (
+                    <View style={{ padding:10 }}>
+                        <Text size={14} theme='h2'>Routing Number</Text>
+                        <TextInput 
+                            style={{ marginTop:10 }}
+                            keyboardType='number-pad'
+                            placeholder={'xxxxxx911'}
+                            value={ach_details.routing_number}
+                            onChangeText={(e) => setACHAccount({ ...ach_account, ach_details: { ...ach_details, routing_number: e } })}
+                        />
+                        {!routing_valid.isValid ?
+                        <Text style={{ marginTop:5 }} size={14} color={Colors.text.warning}>Routing Number Is Not Valid</Text>
+                        :<></>}
+                    </View>
+                )
+            case 'account_number':
+                return (
+                    <View style={{ padding:10, paddingBottom:150 }}>
+                        <Text size={14} theme='h2'>Account Number</Text>
+                        <TextInput 
+                            style={{ marginTop:10 }}
+                            keyboardType='number-pad'
+                            value={ach_details.account_number}
+                            placeholder={'xxxxxxxxx0000'}
+                            onChangeText={(e) => setACHAccount({ ...ach_account, ach_details: { ...ach_details, account_number: e } })}
+                        />
+                        {!account_valid.isValid ?
+                        <Text style={{ marginTop:5 }} size={14} color={Colors.text.warning}>Account Number Is Not Valid</Text>
+                        :<></>}
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
     return (
         <View style={{ flex:1 }}>
-            <View style={{ padding:20 }}>
-                <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>
-            <ScrollView style={{ flex:1, padding:20 }}>
-                <View style={{ marginTop:10 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>Name on account</Text>
-                    <TextInput 
-                        style={{ marginTop:10 }}
-                        value={`${player.first_name} ${player.last_name}`} 
-                        editable={false}
-                        onChangeText={() => console.log('ehy')}
-                    />
-                </View>
-                <View style={{ marginTop: 16 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>Bank Name</Text>
-                    <TextInput 
-                        style={{ marginTop:10 }}
-                        keyboardType='default' 
-                        placeholderTextColor={Colors.shades.shade600}
-                        placeholder={'Bank Name'} 
-                        value={ach_details.bank_name}
-                        autoFocus={true} 
-                        onChangeText={(e) => setACHAccount({ ...ach_account, ach_details: { ...ach_details, bank_name: e } })}
-                    />
-                    {!bank_valid ?
-                    <Text style={{ marginTop:5 }} size={14} color={Colors.utility.warning}>Bank Name Is Not Valid</Text>
-                    :<></>}
-                </View>
-                <View style={{ marginTop: 16 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>Routing Number</Text>
-                    <TextInput 
-                        style={{ marginTop:10 }}
-                        placeholderTextColor={Colors.shades.shade600}
-                        keyboardType='number-pad'
-                        placeholder={'xxxxxx911'}
-                        value={ach_details.routing_number}
-                        onChangeText={(e) => setACHAccount({ ...ach_account, ach_details: { ...ach_details, routing_number: e } })}
-                    />
-                    {!routing_valid.isValid ?
-                    <Text style={{ marginTop:5 }} size={14} color={Colors.utility.warning}>Routing Number Is Not Valid</Text>
-                    :<></>}
-                </View>
-                <View style={{ marginTop:16 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>Account Number</Text>
-                    <TextInput 
-                        style={{ marginTop:10 }}
-                        placeholderTextColor={Colors.shades.shade600}
-                        keyboardType='number-pad'
-                        value={ach_details.account_number}
-                        placeholder={'xxxxxxxxx0000'}
-                        onChangeText={(e) => setACHAccount({ ...ach_account, ach_details: { ...ach_details, account_number: e } })}
-                    />
-                    {!account_valid.isValid ?
-                    <Text style={{ marginTop:5 }} size={14} color={Colors.utility.warning}>Account Number Is Not Valid</Text>
-                    :<></>}
-                </View>
-            </ScrollView>
+            <KeyboardAvoidingView style={{ flex:1 }} behavior={Platform.OS == 'ios' ? 'padding' : 'height'}>
+
+                <FlatList
+                    key='manual_ach_sections'
+                    keyExtractor={(item) => item}
+                    data={ach_sections}
+                    renderItem={renderSections}
+                />
+            </KeyboardAvoidingView>
+
             <View>
-                <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', paddingLeft:20, paddingRight:20 }} onPress={() => setDisclaimer(!disclaimer)}>
+                <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} color={Colors.brand.midnight}>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>
-                </TouchableOpacity>
+                    <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.utility.warning} textAlign='center' weight='semibold'>{error}</Text>
+                <Text size={16} color={Colors.text.warning} textAlign='center' weight='semibold'>{error}</Text>
             </View>
             :<></>}
             {account.status == 'pending' ?
@@ -117,10 +147,7 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
                     title='CANCEL'
                     style={{ flex:1, marginRight:5, opacity:loading?0.5:1 }}
                     disabled={loading}
-                    title_color={Colors.brand.electric}
-                    padding={15}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
+                    type='error'
                     onPress={() => onCancel()}
                 />
                 <Button
@@ -128,9 +155,7 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
                     style={{ flex:3, opacity:valid&&!loading&&!error?1:0.5 }}
                     disabled={!valid || loading || error?true:false}
                     loading={loading}
-                    title_color={Colors.shades.white}
-                    padding={15}
-                    backgroundColor={Colors.utility.success}
+                    type='success'
                     onPress={() => handleAddAccount()}
                 />
             </View>
@@ -139,19 +164,14 @@ const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
                 <Button
                     title='CLOSE'
                     style={{ flex:1, marginRight:5 }}
-                    title_color={Colors.brand.electric}
-                    padding={15}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
+                    type='error'
                     onPress={() => onCancel()}
                 />
                 <Button
                     title='VERIFY TRANSACTIONS SENT'
                     style={{ flex:3 }}
                     disabled
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.slate}
-                    padding={15}
+                    backgroundColor={Colors.absolutes.brand.slate}
                     onPress={() => console.log('')}
                 />
             </View>