be-components 3.6.0 → 3.6.2

package/src/Wallet/components/ACHAddCard.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { View, TouchableOpacity, Image, ScrollView } from 'react-native';
+import { FlatList, Image } from 'react-native';
 import type { AccountProps, MyPlayerProps } from '../../types';
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
-import { button_styles } from '../../constants/styles';
+import { Icons } from '../../Components';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 type AccountAddProps = {
     player:MyPlayerProps,
@@ -14,89 +14,119 @@ type AccountAddProps = {
     onClose: () => void,
     onNext: (account:AccountProps) => void,
 }
-
+const ach_add_sections = ['header', 'sub_header', 'link','manual']
 const ACHAddCard = ({ accounts, onClose, onNext, onManualACH, onLinkACH }:AccountAddProps) => {
-    //const [ loading, setLoading ] = useState(false);
-    //const [ add_type, setAddType ] = useState('manual');
+    const Colors = useColors();
     const manual_account = accounts.find(a => a.ach_detail && a.ach_detail.ach_type == 'manual');
     const ibt_account = accounts.find(a => a.ach_detail && a.ach_detail.ach_type == 'ibf' && !a.ibt_placeholder);
 
-    return (
-        <View style={{ flex:1 }}>
-            <View style={{ padding:20 }}>
-                <Text size={26} color={Colors.brand.midnight} weight='bold'>GET ACCESS TO YOUR WINNINGS</Text>
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>At BettorEdge - we celebrate withdraws!  In order to move funds out of your BettorEdge account, you will need to add an eligible bank account.</Text>
-            </View>
-            <ScrollView style={{ flex:1, padding:20 }}>
-                <Text style={{ marginBottom:20 }} size={18} color={Colors.brand.midnight} weight='bold'>ACH ACCOUNT OPTIONS</Text>
-                <View style={{ padding:20, backgroundColor:Colors.shades.shade600, borderRadius:8 }}>
-                    <View style={{ flexDirection:'row' }}>
-                        <Icons.PlaidIcon size={35}/>
-                        <View style={{ flex:1, marginLeft:10 }}>
-                            <Text size={14} color={Colors.brand.midnight} weight='bold'>Link your account using PLAID</Text>
-                            <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>When you link an account you get access to both instant deposits and instant withdraws.</Text>
-                        </View>
+    const renderSections = (data:{item:string,index:number}) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View style={{ padding:20 }}>
+                        <Text theme='h1'>GET ACCESS TO YOUR WINNINGS</Text>
+                        <Text style={{ marginTop:5 }} theme='description'>At BettorEdge - we celebrate withdraws!  In order to move funds out of your BettorEdge account, you will need to add an eligible bank account.</Text>
+                    </View>
+                )
+            case 'sub_header':
+                return (
+                    <View style={{ padding:20 }}>
+                        <Text theme='h1'>ADD ACH ACCOUNT OPTIONS</Text>
                     </View>
-                    {!ibt_account ?
-                    <TouchableOpacity style={{ marginTop:20, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.shades.white }}
-                        onPress={() => onLinkACH()}>
-                        <View style={{  height:50, width:110, borderRadius:100, justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:Colors.brand.cobalt }}>
-                            <Image
-                                source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1695821528/1630344814441_wjq98b.png' }}
-                                style={{ width:50, height:30 }}
-                                resizeMode='cover'
-                            />
+                )
+            case 'link':
+                return (
+                    <View float style={{ padding:20, borderRadius:8 }}>
+                        <View transparent style={{ flexDirection:'row' }}>
+                            <View float style={{ backgroundColor:Colors.text.white, borderRadius:100, height:50, width:50, justifyContent:'center', alignItems:'center' }}>
+                                <Icons.PlaidIcon size={30}/>
+                            </View>
+                            <View transparent style={{ flex:1, marginLeft:10 }}>
+                                <Text size={14} theme='h1'>Link your account using PLAID</Text>
+                                <Text style={{ marginTop:3 }} size={12} theme='description'>When you link an account you get access to both instant deposits and instant withdraws.</Text>
+                            </View>
                         </View>
-                        <View style={{ flex:1 }}>
-                            <Text size={14} color={Colors.brand.cobalt} textAlign='center' weight='bold'>LINK ACH ACCOUNT</Text>
+                        {!ibt_account ?
+                        <Button float style={{ marginTop:20, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30 }}
+                            onPress={() => onLinkACH()}>
+                            <View transparent style={{  height:50, width:110, borderRadius:100, justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:Colors.borders.light }}>
+                                <Image
+                                    source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1695821528/1630344814441_wjq98b.png' }}
+                                    style={{ width:50, height:30 }}
+                                    resizeMode='cover'
+                                />
+                            </View>
+                            <View transparent style={{ flex:1, marginLeft:10 }}>
+                                <Text size={14} theme='h1' weight='bold'>LINK ACH ACCOUNT</Text>
+                            </View>
+                        </Button>
+                        :
+                        <View transparent style={{ position:'absolute', top:5, right:5, bottom:0}}>
+                            <Icons.TransactionSuccessIcon size={45}/>
                         </View>
-                    </TouchableOpacity>
-                    :
-                    <View style={{ position:'absolute', top:5, right:5, bottom:0}}>
-                        <Icons.TransactionSuccessIcon size={45}/>
+                        }
                     </View>
-                    }
-                </View>
-                <View style={{ marginTop:20, padding:20, backgroundColor:Colors.shades.shade600, borderRadius:8 }}>
-                    <View style={{ flexDirection:'row' }}>
-                        <Icons.BankIcon color={Colors.brand.midnight} size={34}/>
-                        <View style={{ flex:1, marginLeft:10 }}>
-                            <Text size={14} color={Colors.brand.midnight} weight='bold'>Manually add an account</Text>
-                            <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>Verify the account in 1-3 business days and start transacting.</Text>
+                )
+            case 'manual':
+                return (
+                    <View float style={{ marginTop:20, padding:20, borderRadius:8 }}>
+                    <View transparent style={{ flexDirection:'row' }}>
+                        <View float style={{ height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                            <Icons.BankIcon color={Colors.text.h1} size={30}/>
+                        </View>
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text size={14} theme='h1'>Manually add an account</Text>
+                            <Text style={{ marginTop:3 }} size={12} theme='description'>Verify the account in 1-3 business days and start transacting.</Text>
                         </View>
                         
                     </View>
                     {!manual_account ?
-                    <TouchableOpacity style={{ marginTop:20, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.brand.midnight }}
+                    <Button float style={{ marginTop:20, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30 }}
                     onPress={() => onManualACH()}>
-                        <View style={{  height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center', backgroundColor:Colors.shades.white }}>
-                            <Icons.BankIcon size={22} color={Colors.brand.midnight} />
+                        <View float style={{  height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                            <Icons.BankIcon size={22} color={Colors.text.h1} />
                         </View>
-                        <View style={{ flex:1 }}>
-                            <Text size={14} color={Colors.shades.white} textAlign='center' weight='bold'>ADD MANUAL ACH ACCOUNT</Text>
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text size={14} theme='h1'>ADD MANUAL ACH ACCOUNT</Text>
                         </View>
-                    </TouchableOpacity>
+                    </Button>
                     :
-                    <View style={{ position:'absolute', top:5, right:5, bottom:0, alignItems:'flex-end'}}>
+                    <View transparent style={{ position:'absolute', top:5, right:5, bottom:0, alignItems:'flex-end'}}>
                         <Icons.TransactionSuccessIcon size={45}/>
                         {manual_account?.status == 'verify' ?
-                        <View style={{ marginTop:-10, marginRight:20, padding:10, borderRadius:8, backgroundColor:Colors.highlights.highlight200 }}>
-                            <Text size={14} color={Colors.brand.midnight}>Manual ACH account is pending verification</Text>
+                        <View transparent style={{ marginTop:-10, marginRight:20, padding:10, borderRadius:8 }}>
+                            <Text size={14} theme='description'>Manual ACH account is pending verification</Text>
                         </View>
                         :<></>}
                     </View>
                     }
                 </View>
-            </ScrollView>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <FlatList
+                data={ach_add_sections}
+                key={'ach_add_sections'}
+                keyExtractor={(item) => item}
+                renderItem={renderSections}
+            />
+                
+                
             <View nativeID='action_row' style={{ flexDirection:'row', justifyContent:'space-between', padding:10 }}>
                 <Button
                     title={!ibt_account && !manual_account ? 'DO THIS LATER' : 'All Set!'}
-                    title_color={!ibt_account && !manual_account ? Colors.utility.error: Colors.utility.success}
+                    title_color={!ibt_account && !manual_account ? Colors.text.error: Colors.text.success}
                     backgroundColor='transparent'
                     onPress={() => onClose()}
                 />
-                <TouchableOpacity
-                    style={manual_account || ibt_account ? button_styles.wizard_valid : button_styles.wizard_invalid}
+                <Button
+                    float
+                    style={{ borderRadius:100, height:50, width:50, justifyContent:'center', alignItems:'center' }}
                     onPress={() => {
                         if(ibt_account) { return onNext(ibt_account) }
                         if(manual_account){ return onNext(manual_account) }
@@ -104,8 +134,8 @@ const ACHAddCard = ({ accounts, onClose, onNext, onManualACH, onLinkACH }:Accoun
                     }}
                     disabled={manual_account || ibt_account ? false : true}
                     >
-                    <Icons.ChevronIcon size={20} direction='right' color={Colors.brand.midnight}/>
-                </TouchableOpacity>
+                    <Icons.ChevronIcon size={20} direction='right' color={Colors.text.h1}/>
+                </Button>
             </View>
         </View>
     )

package/src/Wallet/components/AccountCard.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { View, TouchableOpacity } from "react-native";
 import type { AccountProps } from '../../types';
-import { Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
-import { view_styles } from '../../constants/styles';
+import { Icons } from '../../Components';
 import moment from 'moment-mini';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type AccountCardProps = {
     account:AccountProps,
@@ -13,12 +12,13 @@ type AccountCardProps = {
 }
 
 const AccountCard = ({ account, hide_status, onSelectAccount }: AccountCardProps) => {
+    const Colors = useColors();
 
     const getIcon = () => {
         switch(account.account_type){
             case 'ach':
-                if(account.ach_detail?.payment_provider == 'nuvei'){ return <Icons.BankInstantIcon size={28} color={Colors.brand.midnight}/> }
-                return <Icons.BankIcon size={28} color={Colors.utility.success} />
+                if(account.ach_detail?.payment_provider == 'nuvei'){ return <Icons.BankInstantIcon size={28} color={Colors.text.h1}/> }
+                return <Icons.BankIcon size={28} color={Colors.text.success} />
             case 'card':
                 return renderCardIcon(account.card_detail?.card_brand)
             case 'paypal':
@@ -39,17 +39,17 @@ const AccountCard = ({ account, hide_status, onSelectAccount }: AccountCardProps
             case 'discover':
                 return <Icons.DiscoverCardIcon size={28} />
             default:
-                return <Icons.CreditCardIcon size={22} color={Colors.brand.midnight}/>
+                return <Icons.CreditCardIcon size={22} color={Colors.text.h1}/>
         }
     }
 
     const getStatusColor = () => {
         switch(account.status){
-            case 'active': return Colors.utility.success
-            case 'inactive': return Colors.utility.error
-            case 'suspended': return Colors.utility.warning
-            case 'verify': return Colors.utility.warning
-            default: return Colors.brand.midnight
+            case 'active': return Colors.text.success
+            case 'inactive': return Colors.text.error
+            case 'suspended': return Colors.text.warning
+            case 'verify': return Colors.text.warning
+            default: return Colors.text.h1
         }
     }
 
@@ -69,25 +69,26 @@ const AccountCard = ({ account, hide_status, onSelectAccount }: AccountCardProps
     }
 
     return (
-        <TouchableOpacity 
-            style={{ borderRadius:8, backgroundColor:Colors.shades.white, ...view_styles.float }}
+        <Button 
+            style={{ padding:10 }}
+            float
             onPress={() => onSelectAccount(account)}    
         >
-            <View style={{ padding:10, flexDirection:'row' }}>
-                <View style={{ marginRight:10, justifyContent:'center', alignItems:'center' }}>
+            <View transparent style={{ flexDirection:'row' }}>
+                <View transparent style={{ marginRight:10, justifyContent:'center', alignItems:'center' }}>
                     {getIcon()}
                 </View>
-                <View style={{ flex:1 }}>
-                    <Text size={16} color={Colors.brand.midnight} weight='bold'>{account.account_label}</Text>
-                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.midnight} weight='regular'>{getDescriptionLabel()}</Text> 
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>{account.account_label}</Text>
+                    <Text style={{ marginTop:4 }} theme='description'>{getDescriptionLabel()}</Text> 
                 </View>
                 {!hide_status ?
-                <View>
+                <View transparent>
                     <Text size={12} color={getStatusColor()} weight='bold'>{account.status.toUpperCase()}</Text>
                 </View>
                 :<></>}
             </View>
-        </TouchableOpacity>
+        </Button>
     )
 }
 

package/src/Wallet/components/AccountLimitManager.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, TouchableOpacity, View, ScrollView } from 'react-native';
+import { FlatList } from 'react-native';
 import type { AccountLimitProps, AccountProps } from '../../types';
 import { WalletApi, WalletHelpers } from '../api';
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons, Toggle } from '../../Components';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 const limit_amount_options = [ 50, 100, 250, 500, 1000]
 const frequency_options = ['Daily', 'Weekly', 'Monthly']
@@ -15,8 +16,8 @@ type AccountLimitManagerProps = {
 }
 
 const AccountLimitManager = ({ account, onCancel, onSetLimit }: AccountLimitManagerProps ) => {
+    const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
-    const [ freq_width, setFreqWidth ] = useState(0);
     const [ disclaimer, setDisclaimer ] = useState(false);
     const [ dropdown_visible, setDropdownVisible ] = useState(false);
     const [ active_frequency, setActiveFrequency ] = useState('Daily')
@@ -102,41 +103,34 @@ const AccountLimitManager = ({ account, onCancel, onSetLimit }: AccountLimitMana
     const renderOptions = (data: { item:number, index:number }) => {
         //const selected = data.item == active_amount ? true : false
         return (
-            <TouchableOpacity style={{ padding:10 }} onPress={() => {
+            <Button style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => {
                 setActiveAmount(data.item);
                 setDropdownVisible(false);
             }}>
-                <Text color={Colors.brand.midnight} weight='semibold' size={14}>${data.item}</Text>
-            </TouchableOpacity>
+                <Text theme='h2'>${data.item}</Text>
+            </Button>
         )
     }
 
-    const renderFrequencies = (data: {item:string, index:number}) => {
-        const selected = data.item == active_frequency ? true : false
-        return (
-            <TouchableOpacity style={{ width:freq_width/3, backgroundColor:selected?Colors.shades.white:'transparent', borderRadius:4, padding:10 }} onPress={() => setActiveFrequency(data.item)}>
-                <Text size={14} color={Colors.brand.midnight} weight={selected?'bold':'regular'} textAlign='center'>{data.item}</Text>
-            </TouchableOpacity>
-        )
-    }
     const valid = active_amount && active_frequency ? true : false
     return (
         <View style={{ flex:1 }}>
             <View style={{ padding:20 }}>
-                <Text size={30} color={Colors.brand.midnight} weight='bold'>{account_limit?.status == 'active'?'Update Deposit Limits':'Deposit Limits'}</Text>
-                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Set your own limit for depositing.</Text>
+                <Text size={30} theme='h1'>{account_limit?.status == 'active'?'Update Deposit Limits':'Deposit Limits'}</Text>
+                <Text style={{ marginTop:15 }} size={16} theme='description'>Set your own limit for depositing.</Text>
             </View>
-            <ScrollView style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
                 <View style={{padding:16}}>
-                    <Text size={16} color={Colors.brand.cobalt} weight='semibold'>Amount</Text>
-                    <TouchableOpacity 
+                    <Text size={16} theme='h2'>Amount</Text>
+                    <Button 
+                    float
                     onPress={() => setDropdownVisible(!dropdown_visible)}
-                    style={{marginTop:8, flexDirection:'row', alignItems:'center', justifyContent:'space-between', padding:15, backgroundColor:Colors.shades.shade100}}>
-                        <Text color={Colors.brand.cobalt} size={14} weight='semibold'>{active_amount?`$${active_amount}`:'Select Limit'}</Text>
-                        <Icons.ChevronIcon direction='down' color={Colors.brand.cobalt} size={8} />
-                    </TouchableOpacity>
+                    style={{marginTop:8, flexDirection:'row', alignItems:'center', justifyContent:'space-between', padding:15 }}>
+                        <Text theme='h2'>{active_amount?`$${active_amount}`:'Select Limit'}</Text>
+                        <Icons.ChevronIcon direction='down' color={Colors.text.h1} size={8} />
+                    </Button>
                     {dropdown_visible ?
-                    <View style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10, borderWidth:1, borderTopWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10, borderWidth:1, borderTopWidth:1, borderColor:Colors.borders.light }}>
                         <FlatList
                             data={limit_amount_options}
                             renderItem={renderOptions}
@@ -145,53 +139,43 @@ const AccountLimitManager = ({ account, onCancel, onSetLimit }: AccountLimitMana
                     :<></>}
                 </View>
                 <View style={{ padding:16 }}>
-                    <Text size={16} color={Colors.brand.cobalt} weight='semibold'>Frequency</Text>
-                    <View style={{ marginTop:8, backgroundColor: '#e9e9e9', padding:2, borderRadius:4 }} onLayout={(ev) => {
-                        setFreqWidth(ev.nativeEvent.layout.width)
-                    }}>
-                        <FlatList
-                            data={frequency_options}
-                            renderItem={renderFrequencies}
-                            horizontal
-                            showsHorizontalScrollIndicator={false}
-                        />
-                    </View>
+                    <Text style={{ marginBottom:10 }} size={16} theme='h2'>Frequency</Text>
+                    <Toggle
+                        options={frequency_options.map(o => { return { key: o, label:o } })}
+                        selected_option={active_frequency}
+                        onSelectOption={(option) => setActiveFrequency(option)}
+                    />
                 </View>
                 {account_limit?.status == 'active' ?
-                    <View style={{ margin:10, borderRadius:8, backgroundColor:Colors.shades.shade600, padding:10 }}>
-                        <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign='center'>There is an active limit on this account of ${account_limit.limit_amount} every {account_limit.limit_days} days</Text>
+                    <View style={{ margin:10, borderRadius:8, backgroundColor:Colors.borders.light, padding:10 }}>
+                        <Text size={14} theme='h2' textAlign='center'>There is an active limit on this account of ${account_limit.limit_amount} every {account_limit.limit_days} days</Text>
                         <Button
                             style={{ marginTop:10 }}
                             title='REMOVE'
-                            title_color={Colors.shades.white}
-                            padding={15}
-                            backgroundColor={Colors.utility.error}
+                            type='error'
                             onPress={() => handleRemoveAccountLimit()}
                         />
                     </View>
                     :<></>}
-            </ScrollView>
+            </View>
             
             { valid ?
             <View nativeID='limit_disclaimer' style={{ margin:10 }}>
-                <TouchableOpacity style={{ flexDirection:'row', padding:5 }} onPress={() => setDisclaimer(!disclaimer)}>
-                    <View style={{ justifyContent:'center', marginRight:10, alignItems:'center', height:25, width:25, borderRadius:4, backgroundColor: disclaimer ? Colors.brand.midnight : 'transparent', borderWidth:1, borderColor:Colors.brand.midnight }}>
+                <Button style={{ flexDirection:'row', padding:5 }} onPress={() => setDisclaimer(!disclaimer)}>
+                    <View style={{ justifyContent:'center', marginRight:10, alignItems:'center', height:25, width:25, borderRadius:4, backgroundColor: disclaimer ? Colors.text.h1 : 'transparent', borderWidth:1, borderColor:Colors.text.h1 }}>
                         {disclaimer ?
-                        <Icons.CheckIcon color={Colors.shades.white} size={14} />
+                        <Icons.CheckIcon color={Colors.text.h1} size={14} />
                         :<></>}
                     </View>
-                    <Text size={14} color={Colors.brand.midnight} weight='regular'>I confirm I would like to the my deposit limit to {active_amount}, and deposit frequency to {active_frequency}</Text>
-                </TouchableOpacity>
+                    <Text size={14} theme='description'>I confirm I would like to the my deposit limit to {active_amount}, and deposit frequency to {active_frequency}</Text>
+                </Button>
             </View>
             :<></>}
             <View nativeID='action_row' style={{ flexDirection:'row', padding:20 }}>
                 <Button
                     style={{ flex:1, marginRight:5, opacity: 1 }}
                     title={'CLOSE'}
-                    title_color={Colors.brand.electric}
-                    borderColor={Colors.brand.electric}
-                    borderWidth={1}
-                    padding={15}
+                    type='close'
                     onPress={() => onCancel()}
                 />
                 <Button
@@ -199,9 +183,7 @@ const AccountLimitManager = ({ account, onCancel, onSetLimit }: AccountLimitMana
                     title={'SAVE LIMIT'}
                     disabled={!valid||!disclaimer}
                     loading={loading}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.electric}
-                    padding={15}
+                    type='success'
                     onPress={() => handleSetLimit()}
                 />
             </View>