be-components 3.6.0 → 3.6.1

package/src/Wallet/components/OrderManager.tsx

@@ -1,16 +1,19 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, View, ActivityIndicator, ScrollView } from 'react-native';
+import { FlatList, ActivityIndicator } from 'react-native';
 import { ItemOrderApi } from '../api';
 import type { ItemOrderProps, ItemProps } from '../../types';
 import ItemOrderCard from './ItemOrderCard';
-import { Button, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
+import Pagination from '../../Components/Pagination';
 
 type OrderManagerProps = {
     onClose: () => void
 }
-
+const order_sections = [ 'header', 'orders' ]
 const OrderManager = ({ onClose }:OrderManagerProps) => {
+    const Colors = useColors();
+
     const [ loading, setLoading ] = useState(false);
     const [ data, setData ] = useState<{
         offset: number,
@@ -47,47 +50,54 @@ const OrderManager = ({ onClose }:OrderManagerProps) => {
         )
     }
 
+    const renderSections = (data: {item:string, index:number}) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:15 }}>
+                        <View transparent style={{flex:1}}>
+                            <Text size={20} theme='h1'>MY ORDER HISTORY</Text>
+                            <Text style={{ marginTop:5}} theme='description'>Review your order history below.  Select an item to see the transaction details.</Text>
+                        </View>
+                    </View>
+                )
+            case 'orders':
+                return (
+                    <View>
+                        {loading ?
+                        <ActivityIndicator size='large' color={Colors.text.h1} />
+                        :<></>}
+                        <FlatList
+                            data={item_orders}
+                            renderItem={renderItemOrders}
+                            keyExtractor={(item) => item.item_order_id.toString()}
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
 
     return (
         <View style={{ flex:1 }}>
-           <View style={{ padding:20 }}>
-                <Text size={26} color={Colors.brand.midnight} weight='bold'>ORDER HISTORY</Text>
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Review your order history below.  Select an item to see the transaction details.</Text>
-            </View>
-            <ScrollView style={{ flex:1, padding:10 }}>
-                {loading ?
-                <ActivityIndicator size='large' color={Colors.brand.midnight} />
-                :<></>}
+            <View style={{ flex:1 }}>
                 <FlatList
-                    data={item_orders}
-                    renderItem={renderItemOrders}
-                    keyExtractor={(item) => item.item_order_id.toString()}
-                />
-            </ScrollView>
-            <View style={{ flexDirection:'row', alignItems:'center', padding:20, paddingBottom:0 }}>
-                <Button
-                    style={{ opacity: offset > 0 ? 1 : 0.5 }}
-                    title='PREV'
-                    disabled={offset == 0 ? true : false}
-                    title_color={Colors.brand.electric}
-                    backgroundColor='transparent'
-                    onPress={() => getDataFromServer(offset - 1)}
-                />
-                <View style={{ flex:1 }} />
-                <Button
-                    title='NEXT'
-                    title_color={Colors.brand.electric}
-                    backgroundColor='transparent'
-                    onPress={() => getDataFromServer(offset + 1)}
+                    data={order_sections}
+                    key={`order_history_sections`}
+                    keyExtractor={(item) => item}
+                    renderItem={renderSections}
                 />
             </View>
-            <View style={{ padding:20 }}>
+            <Pagination
+                onNext={() => getDataFromServer(offset + 1)}
+                onPrevious={() => getDataFromServer(offset - 1)}
+                offset={offset}
+            />
+            <View type='footer' style={{ flexDirection:'row', padding:20 }}>
                 <Button
                     title='BACK'
-                    title_color={Colors.brand.electric}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
-                    padding={15}
+                    type='close'
+                    style={{ flex:1 }}
                     onPress={() => onClose()}
                 />
             </View>

package/src/Wallet/components/RemoveAccount.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
 import type { AccountProps } from '../../types';
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons } from '../../Components';
 import { WalletApi } from '../api';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type UnlinkAccountCardProps = {
     account:AccountProps,
@@ -12,6 +12,7 @@ type UnlinkAccountCardProps = {
 }
 
 const RemoveAccountCard = ({ account, onCancel, onRemove }:UnlinkAccountCardProps) => {
+    const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ disclaimer, setDisclaimer ] = useState(false);
 
@@ -30,23 +31,21 @@ const RemoveAccountCard = ({ account, onCancel, onRemove }:UnlinkAccountCardProp
 
     return (
         <View style={{ flex:1 }}>
-            <View nativeID='snooze_disclaimer' style={{ flex:1, 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 }}>
+            <View nativeID='snooze_disclaimer' style={{ flex:1, margin:10, justifyContent:'flex-end' }}>
+                <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 size={14} color={Colors.shades.white} />
+                        <Icons.CheckIcon size={14} color={Colors.text.h1} />
                         :<></>}
                     </View>
-                    <Text size={14} color={Colors.brand.midnight} weight='regular'>I confirm my request to remove my account.  I understand that this will take up to 24 hours to come into effect. I understand that I will no longer be able to use this account to transact.</Text>
-                </TouchableOpacity>
+                    <Text style={{flex:1}} size={14} theme='description'>I confirm my request to remove my account.  I understand that this will take up to 24 hours to come into effect. I understand that I will no longer be able to use this account to transact.</Text>
+                </Button>
             </View>
             <View nativeID='action_row' style={{ flexDirection:'row', padding:20 }}>
                 <Button
                     style={{ flex:1, marginRight:5, opacity: 1 }}
                     title={'CANCEL'}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.brand.electric}
-                    padding={15}
+                    type='close'
                     onPress={() => onCancel()}
                 />
                 <Button
@@ -54,9 +53,7 @@ const RemoveAccountCard = ({ account, onCancel, onRemove }:UnlinkAccountCardProp
                     disabled={!disclaimer}
                     loading={loading}
                     title={'REMOVE ACCOUNT'}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.error}
-                    padding={15}
+                    type='error'
                     onPress={() => handleRemove()}
                 />
             </View>

package/src/Wallet/components/WalletActionSelector.tsx

@@ -1,10 +1,11 @@
 
 import React, { useState } from 'react';
-import { View, FlatList, ScrollView, TouchableOpacity, Image } from "react-native"
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { FlatList, TouchableOpacity, Image } from "react-native"
+import { Icons } from '../../Components';
 import type { AccountProps, MyPlayerProps, PlayerBalanceProps } from '../../types';
 import { WalletHelpers } from '../api';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type WalletActionSelectorProps ={
     player:MyPlayerProps,
@@ -16,38 +17,41 @@ type WalletActionSelectorProps ={
     onStartWalkthrough:(walkthrough:any, account?:AccountProps) => void
 }
 
-const sections = [
-    { 
-        section: 'accounts', label:'Account Actions', actions : [
-            { 
-                action :'my_accounts', label: "View My Accounts", icon:<Icons.ListIcon color={Colors.brand.midnight} size={12}/>, description: 'Manage your connected accounts.  Transact, snooze, set limits or remove an existing account.'
-            },
-            { 
-                action :'wallet_settings', label: "View My Settings", icon:<Icons.SettingsIcon color={Colors.brand.midnight} size={20}/>, description: 'View your current settings including your deposit and withdraw limits.'
-            },
-            
-        ] 
-    },
-    { 
-        section: 'transact', label:'Transact', actions : [
-            { 
-                action :'order_history', label: "View Order History", icon:<Icons.TransactionIcon size={20} color={Colors.brand.midnight} />, description: 'View and manage past orders made on BettorEdge'
-            },
-            { 
-                action :'deposit', label: "Make A Deposit", icon:<Icons.DepositIcon size={20} color={Colors.brand.midnight} />, description: 'Fund your BettorEdge real-money balance by making a deposit from an existing account or new one.'
-            },
-            { 
-                action :'withdraw', label: "Make A Withdrawal", icon:<Icons.WithdrawIcon size={20} color={Colors.brand.midnight} />, description: 'Move funds from your BettorEdge real-money balance to a connected ACH account.'
-            },
-            
-        ] 
-    }
-]
+
 
 const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accounts, onClose, onActionSelect, onStartWalkthrough }: WalletActionSelectorProps) => {
+    const Colors = useColors();
     const [ show_steps, setShowSteps ] = useState(false);
     const [ width, setWidth ] = useState(0);
 
+    const sections = [
+        { 
+            section: 'accounts', label:'Account Actions', actions : [
+                { 
+                    action :'my_accounts', label: "View My Accounts", icon:<Icons.ListIcon color={Colors.text.h1} size={12}/>, description: 'Manage your connected accounts.  Transact, snooze, set limits or remove an existing account.'
+                },
+                { 
+                    action :'wallet_settings', label: "View My Settings", icon:<Icons.SettingsIcon color={Colors.text.h1} size={20}/>, description: 'View your current settings including your deposit and withdraw limits.'
+                },
+                
+            ] 
+        },
+        { 
+            section: 'transact', label:'Transact', actions : [
+                { 
+                    action :'order_history', label: "View Order History", icon:<Icons.TransactionIcon size={20} color={Colors.text.h1} />, description: 'View and manage past orders made on BettorEdge'
+                },
+                { 
+                    action :'deposit', label: "Make A Deposit", icon:<Icons.DepositIcon size={20} color={Colors.text.h1} />, description: 'Fund your BettorEdge real-money balance by making a deposit from an existing account or new one.'
+                },
+                { 
+                    action :'withdraw', label: "Make A Withdrawal", icon:<Icons.WithdrawIcon size={20} color={Colors.text.h1} />, description: 'Move funds from your BettorEdge real-money balance to a connected ACH account.'
+                },
+                
+            ] 
+        }
+    ]
+
     const handleActionSelect = (action:any) => {
         switch(action.action){
             case 'deposit':
@@ -64,7 +68,7 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
 
     const renderActions = (data:{ item:any, index:number }) => {
         return (
-            <TouchableOpacity style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}
+            <Button style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderBottomColor:Colors.borders.light }}
             onPress={() => handleActionSelect(data.item)}>
 
                 <View style={{ flex:1, marginRight:10 }}>
@@ -72,19 +76,21 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
                         {data.item.icon?
                             data.item.icon
                         :<></>}
-                        <Text style={{ marginLeft:5 }} size={16} color={Colors.brand.midnight} weight='bold'>{data.item.label}</Text>
+                        <Text style={{ marginLeft:5 }} size={16} theme='h1'>{data.item.label}</Text>
                     </View>
-                    <Text style={{ padding:5 }} size={14} color={Colors.brand.midnight} weight='regular'>{data.item.description}</Text>
+                    <Text style={{ padding:5 }} size={14} theme='description'>{data.item.description}</Text>
                 </View>
-                <Icons.ChevronIcon direction='right' color={Colors.brand.midnight} size={12} />
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction='right' color={Colors.text.h1} size={12} />
+            </Button>
         )
     }
 
     const renderSections = (data: { item:any, index:number }) => {
         return (
-            <View style={{ padding:5 }}>
-                <Text size={16} color={Colors.brand.midnight} weight='regular'>{data.item.label.toUpperCase()}</Text>
+            <View style={{ marginTop:10 }}>
+                <View type='header' style={{ padding:15 }}>
+                    <Text theme='h1'>{data.item.label.toUpperCase()}</Text>
+                </View>
                 <View style={{ padding:5 }}>
                     <FlatList
                         key='actions'
@@ -99,7 +105,6 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
     }
 
     const handleStepSelect = (step:any, index:number) => {
-        console.log(step)
         switch(step.step){
             case 'deposit':
                 let default_account = accounts.find(a => a.default_account)
@@ -115,11 +120,11 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
     const renderSteps = (data: { item:any, index:number }) => {
         return (
             <TouchableOpacity
-                style={{ margin:5, padding:10, flexDirection:'row', alignItems:'center', borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8 }}
+                style={{ margin:5, padding:10, flexDirection:'row', alignItems:'center', borderWidth:1, borderColor:Colors.borders.light, borderRadius:8 }}
                 onPress={() => handleStepSelect(data.item, data.index)}>
-                <Icons.CheckCirlceIcon size={14} color={data.item.complete?Colors.utility.success:Colors.brand.slate}/>
-                <Text style={{ flex:1, marginLeft:10 }} size={14} color={Colors.brand.midnight}>{data.item.label}</Text>
-                <Icons.ChevronIcon direction='right' size={8} color={Colors.brand.midnight} />
+                <Icons.CheckCirlceIcon size={14} color={data.item.complete?Colors.text.success:Colors.text.success}/>
+                <Text style={{ flex:1, marginLeft:10 }} theme='description'>{data.item.label}</Text>
+                <Icons.ChevronIcon direction='right' size={8} color={Colors.text.h1} />
             </TouchableOpacity>
         )
     }
@@ -131,48 +136,47 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
             const { width } = ev.nativeEvent.layout
             setWidth(width)
         }}>
-            <View style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+            <View type='header' style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
                 <Image
                     source={{ uri: player.profile_pic }}
                     style={{ height:60, width:60, borderRadius:4 }}
                     resizeMode='cover'
                 />
-                <View style={{ flex:1, marginLeft:5 }}>
-                    <Text size={20} color={Colors.brand.midnight} weight='bold'>Wallet Balances</Text>
-                    <View style={{ flexDirection:'row' }}>
-                        <View style={{ margin:3, backgroundColor:Colors.brand.cobalt, padding:5, borderRadius:8 }}>
-                            <Text size={14} color={Colors.shades.white} weight='bold'>${WalletHelpers.formatBalance(player_balance.balance)}</Text>
+                <View transparent style={{ flex:1, marginLeft:15 }}>
+                    <Text size={20} theme='h1'>My Wallet Balances</Text>
+                    <View transparent style={{ flexDirection:'row', marginTop:5 }}>
+                        <View float style={{ margin:3, padding:8, borderRadius:8 }}>
+                            <Text size={14} theme='h1'>${WalletHelpers.formatBalance(player_balance.balance)}</Text>
                         </View>
-                        <View style={{ margin:3, backgroundColor:Colors.brand.cobalt, padding:5, borderRadius:8 }}>
-                            <Text size={14} color={Colors.shades.white} weight='bold'>P{WalletHelpers.formatBalance(player_balance.promo_balance)}</Text>
+                        <View float style={{ margin:3, padding:8, borderRadius:8 }}>
+                            <Text size={14} theme='h1'>P{WalletHelpers.formatBalance(player_balance.promo_balance)}</Text>
                         </View>
-                        <View style={{ margin:3, backgroundColor:Colors.brand.cyan, padding:5, borderRadius:8 }}>
-                        <Text size={14} color={Colors.shades.white} weight='bold'>E{WalletHelpers.formatBalance(player_balance.free_market_balance)}</Text>
+                        <View float style={{ margin:3, padding:8, borderRadius:8 }}>
+                            <Text size={14} theme='h1'>E{WalletHelpers.formatBalance(player_balance.free_market_balance)}</Text>
                         </View>
                     </View>
                 </View>
             </View>
-            <ScrollView style={{ flex:1 }}>
-
+            <View style={{ flex:1 }}>
                 {pct_complete < 1 ?
-                <View style={{ backgroundColor:Colors.shades.white, padding:10 }}>
+                <View style={{ padding:10 }}>
                     <View>
                         <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10 }} onPress={() => setShowSteps(!show_steps)}>
                             <View style={{ flex:1, marginRight:10 }}>
-                                <Text color={Colors.brand.midnight} size={14} weight='bold'>Setup your wallet</Text>
-                                <Text style={{ marginTop:3 }} color={Colors.brand.slate} size={14} weight='regular'>Complete all the steps below to have full access to move funds in and out of BettorEdge</Text>
+                                <Text theme='h1'>Setup your wallet</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Complete all the steps below to have full access to move funds in and out of BettorEdge</Text>
                             </View>
-                            <Icons.ChevronIcon direction={show_steps ? 'up' : 'down'} color={Colors.brand.midnight} size={10} />
+                            <Icons.ChevronIcon direction={show_steps ? 'up' : 'down'} color={Colors.text.h1} size={10} />
                         </TouchableOpacity>
                         <View style={{ flexDirection:'row', justifyContent:'center', alignItems:'center', }}>
                             <Text size={14} weight='bold'>{(pct_complete * 100).toFixed()}%</Text>
-                            <View style={{ marginLeft:20, height:10, width:width - 100, backgroundColor:Colors.brand.slate, borderRadius:15 }}>
-                                <View style={{ position:'absolute', top:0, left:0, bottom:0, width: (width-100)*pct_complete, backgroundColor:Colors.utility.success, borderRadius:15 }} />
+                            <View style={{ marginLeft:20, height:10, width:width - 100, borderRadius:15 }}>
+                                <View style={{ position:'absolute', top:0, left:0, bottom:0, width: (width-100)*pct_complete, backgroundColor:Colors.text.success, borderRadius:15 }} />
                             </View>
                         </View>
                     </View>
                     {show_steps ?
-                    <View style={{marginTop:5, borderTopWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{marginTop:5, borderTopWidth:1, borderColor:Colors.borders.light }}>
                         <FlatList
                             data={walkthrough_steps}
                             renderItem={renderSteps}
@@ -182,7 +186,7 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
                     :<></>}
                 </View>
                 :<></>}
-                <View style={{ padding:10 }}>
+                <View type='body' style={{ marginTop:5 }}>
                     <FlatList
                         key={'wallet_sections'}
                         data={sections}
@@ -190,18 +194,15 @@ const WalletActionSelector = ({ player, walkthrough_steps, player_balance, accou
                         keyExtractor={(item) => item.section}
                     />
                 </View>
-            </ScrollView>
-            <View nativeID='action_row' style={{ padding:20 }}>
+            </View>
+            <View nativeID='action_row' style={{ flexDirection:'row', alignItems:'center', padding:20 }}>
                 <Button
                     title='CLOSE'
-                    title_color={Colors.brand.electric}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
-                    padding={15}
+                    style={{ flex:1 }}
+                    type='close'
                     onPress={() => onClose()}
                 />
             </View>
-           
         </View>
     )
 }