be-components 3.6.1 → 3.6.2

package/src/Wallet/components/ManualCardAdd.tsx

@@ -1,18 +1,20 @@
 import React, { useState } from 'react';
-import { View, StyleSheet, ScrollView } from "react-native";
 import { WalletApi, WalletHelpers } from '../api';
-import { Button, Icons, Text, TextInput } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons } from '../../Components';
 import type { AccountProps, MyPlayerProps } from '../../types';
 import moment from 'moment-mini';
+import { Button, Text, TextInput, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
+import { FlatList } from 'react-native';
 
 type ManualCardAddProps = {
     player:MyPlayerProps,
     onAddAccount:(acct:AccountProps) => void,
     onCancel:() => void
 }
-
+const card_sections = ['header','card_number','first_name','last_name','expire_date']
 const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) => {
+    const Colors = useColors();
     const [ loading, setLoading ] = useState(false);
     const [ error, setError ] = useState<string>();
     const [ card_account, setCardAccount ] = useState({
@@ -20,7 +22,6 @@ const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) =>
         card_detail: { ...WalletHelpers.getEmptyCardDetails(), first_name: player.first_name, last_name: player.last_name }
     })
 
-
     const { account, card_detail } = card_account;
     const { valid, card_number, first_name, last_name, expiration_date } = WalletHelpers.isCardValid(card_detail);
 
@@ -58,107 +59,135 @@ const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) =>
             case 'DISCOVER':
                 return <Icons.DiscoverCardIcon size={30} />
             default:
-                return <Icons.CreditCardIcon size={22} color={Colors.brand.midnight}/>
+                return <Icons.CreditCardIcon size={22} color={Colors.text.h1}/>
         }
     }
 
-    return (
-        <View style={{ flex:1 }}>
-            <View style={{ padding:20 }}>
-                <Text size={26} color={Colors.brand.midnight} weight='bold'>NEW CARD ACCOUNT</Text>
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>Complete the form below to add a new card account. Once successfully added, you can transact immediately.</Text>
-            </View>
-            <ScrollView style={{ flex:1, padding:10, margin:10 }}>
-                <View nativeID='cc_input' style={{ marginTop:10 }}>
-                    <View nativeID='card_number' style={{ padding:5 }}>
-                        <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
-                            <Text style={{flex:1}} size={14} color={Colors.brand.midnight} weight='semibold'>Card Number</Text>
-                            <View style={{ flexDirection:'row', alignItems:'center' }}>
-                                <View style={local_styles.inactive_brand}>
-                                    <Icons.CreditCardIcon size={24} color={Colors.brand.midnight}/>
-                                </View>
-                                <View style={card_detail.card_brand == 'VISA' ? local_styles.active_brand : local_styles.inactive_brand}>
-                                    <Icons.VisaCardIcon size={30} />
-                                </View>
-                                <View style={card_detail.card_brand == 'MASTERCARD' ? local_styles.active_brand : local_styles.inactive_brand}>
-                                    <Icons.MasterCardIcon size={30} />
+    const renderSections = (data:{item:string, index:number}) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ padding:20 }}>
+                        <Text theme='h1'>NEW CARD ACCOUNT</Text>
+                        <Text style={{ marginTop:5 }} theme='description'>Complete the form below to add a new card account. Once successfully added, you can transact immediately.</Text>
+                    </View>
+                )
+            case 'card_number':
+                return (
+                    <View style={{padding:10}}>
+                        <View nativeID='card_number' style={{ padding:5 }}>
+                            <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                                <Text style={{flex:1}} size={14} theme='h2'>Card Number</Text>
+                                <View style={{ flexDirection:'row', alignItems:'center' }}>
+                                    <View>
+                                        <Icons.CreditCardIcon size={24} color={Colors.text.h1}/>
+                                    </View>
+                                    <View style={card_detail.card_brand == 'VISA' ? {} : {}}>
+                                        <Icons.VisaCardIcon size={30} />
+                                    </View>
+                                    <View style={card_detail.card_brand == 'MASTERCARD' ? {} : {}}>
+                                        <Icons.MasterCardIcon size={30} />
+                                    </View>
+                                    <View style={card_detail.card_brand == 'AMEX' ? {} : {}}>
+                                        <Icons.AmexCardIcon size={30} />
+                                    </View>
+                                    <View style={card_detail.card_brand == 'DISCOVER' ? {} : {}}>
+                                        <Icons.DiscoverCardIcon size={30} />
+                                    </View>
+                                    
                                 </View>
-                                <View style={card_detail.card_brand == 'AMEX' ? local_styles.active_brand : local_styles.inactive_brand}>
-                                    <Icons.AmexCardIcon size={30} />
+                            </View>
+                            <View type='input' style={{ flexDirection:'row' }}>
+                                <View style={{ justifyContent:'center', alignItems:'center', paddingLeft:10, paddingRight:10 }}>
+                                    {renderCardIcon(card_detail.card_brand)}
                                 </View>
-                                <View style={card_detail.card_brand == 'DISCOVER' ? local_styles.active_brand : local_styles.inactive_brand}>
-                                    <Icons.DiscoverCardIcon size={30} />
+                                <TextInput 
+                                    style={{ borderWidth:0, padding:15, flex:1 }}
+                                    placeholder='1234 5678 9876 5432'
+                                    keyboardType='decimal-pad'
+                                    value={WalletHelpers.formatCardNumber(card_detail.card_number)}
+                                    onChangeText={(e) => handleCardNumber(e)}
+                                />
                                 </View>
-                                
-                            </View>
-                        </View>
-                        <View style={{ flexDirection:'row', borderRadius:22, backgroundColor:Colors.shades.white }}>
-                        <View style={{ justifyContent:'center', alignItems:'center', paddingLeft:10, paddingRight:10 }}>
-                            {renderCardIcon(card_detail.card_brand)}
                         </View>
-                        <TextInput 
-                            style={{ borderWidth:0, padding:15, flex:1 }}
-                            placeholder='1234 5678 9876 5432'
-                            placeholderTextColor={Colors.shades.shade600}
-                            value={WalletHelpers.formatCardNumber(card_detail.card_number)}
-                            onChangeText={(e) => handleCardNumber(e)}
-                        />
+                        {card_detail.card_number && !card_number ?
+                            <Text size={14} color={Colors.text.warning} weight='semibold'>Card number is not valid</Text>
+                        :<></>}
+                    </View>
+                    
+                )
+            case 'first_name':
+                return (
+                    <View style={{padding:10}}>
+                        <View nativeID='first_name' style={{ padding:5 }}>
+                            <Text style={{ padding:10 }} size={14} theme='h2'>First Name</Text>
+                                <TextInput 
+                                    placeholder='Jonathan'
+                                    value={card_detail.first_name}
+                                    onChangeText={(e) => setCardAccount({ ...card_account, card_detail: { ...card_detail, first_name: e } })}
+                                />
                         </View>
+                        {!first_name ?
+                            <Text size={14} color={Colors.text.warning} weight='semibold'>First name is not valid</Text>
+                        :<></>}
                     </View>
-                    {card_detail.card_number && !card_number ?
-                        <Text size={14} color={Colors.utility.warning} weight='semibold'>Card number is not valid</Text>
-                    :<></>}
-                    <View nativeID='first_name' style={{ padding:5 }}>
-                        <Text style={{ padding:10 }} size={14} color={Colors.brand.midnight} weight='semibold'>First Name</Text>
+                )
+            case 'last_name':
+                return (
+                    <View style={{padding:10}}>
+                        <View nativeID='last_name' style={{ padding:5 }}>
+                            <Text size={14} theme='h2' style={{ padding:10 }}>Last Name</Text>
                             <TextInput 
-                                placeholder='Jonathan'
-                                placeholderTextColor={Colors.shades.shade600}
-                                value={card_detail.first_name}
-                                onChangeText={(e) => setCardAccount({ ...card_account, card_detail: { ...card_detail, first_name: e } })}
+                                placeholder='Smith'
+                                value={card_detail.last_name}
+                                onChangeText={(e) => setCardAccount({ ...card_account, card_detail: { ...card_detail, last_name: e } })}
                             />
+                        </View>
+                        {!last_name ?
+                            <Text size={14} color={Colors.text.warning} weight='semibold'>Last name is not valid</Text>
+                        :<></>}
                     </View>
-                    {!first_name ?
-                        <Text size={14} color={Colors.utility.warning} weight='semibold'>First name is not valid</Text>
-                    :<></>}
-                    <View nativeID='last_name' style={{ padding:5 }}>
-                        <Text size={14} color={Colors.brand.midnight} weight='semibold' style={{ padding:10 }}>Last Name</Text>
-                        <TextInput 
-                            placeholder='Smith'
-                            placeholderTextColor={Colors.shades.shade600}
-                            value={card_detail.last_name}
-                            onChangeText={(e) => setCardAccount({ ...card_account, card_detail: { ...card_detail, last_name: e } })}
-                        />
-                    </View>
-                    {!last_name ?
-                        <Text size={14} color={Colors.utility.warning} weight='semibold'>Last name is not valid</Text>
-                    :<></>}
-                    <View nativeID='expiration_date' style={{ padding:5 }}>
-                        <Text size={14} color={Colors.brand.midnight} weight='semibold' style={{ padding:10 }}>Expiration Date (MM/YYYY)</Text>
-                        <TextInput
-                            value={card_detail.expiration_date}
-                            placeholder={'MM/YYYY'}
-                            placeholderTextColor={Colors.shades.shade600}
-                            onChangeText={(e) => handleExpiry(e)}
-                        />
+                )
+            case 'expire_date':
+                return (
+                    <View style={{padding:10, paddingBottom:300}}>
+                        <View nativeID='expiration_date' style={{ padding:5 }}>
+                            <Text size={14} theme='h2' style={{ padding:10 }}>Expiration Date (MM/YYYY)</Text>
+                            <TextInput
+                                value={card_detail.expiration_date}
+                                placeholder={'MM/YYYY'}
+                                onChangeText={(e) => handleExpiry(e)}
+                            />
+                        </View>
+                        {card_detail.expiration_date && !expiration_date ?
+                            <Text size={14} color={Colors.text.warning} weight='semibold'>Expiration date is not valid</Text>
+                        :<></>}
+                        {error ?
+                        <View style={{ padding:10 }}>
+                            <Text size={16} color={Colors.text.warning} weight='bold' textAlign='center'>{error}</Text>
+                        </View>
+                        :<></>}
                     </View>
-                    {card_detail.expiration_date && !expiration_date ?
-                        <Text size={14} color={Colors.utility.warning} weight='semibold'>Expiration date is not valid</Text>
-                    :<></>}
-                </View>
-            </ScrollView>
-            {error ?
-            <View style={{ padding:10 }}>
-                <Text size={16} color={Colors.utility.warning} weight='bold' textAlign='center'>{error}</Text>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
+                <FlatList
+                    data={card_sections}
+                    key={'card_sections'}
+                    keyExtractor={(item) => item}
+                    renderItem={renderSections}
+                />
             </View>
-            :<></>}
             <View style={{ flexDirection:'row', padding:20 }}>
                 <Button
                     title='CANCEL'
                     style={{ flex:1, marginRight:5 }}
-                    title_color={Colors.brand.electric}
-                    padding={15}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
+                    type='error'
                     onPress={() => onCancel()}
                 />
                 <Button
@@ -166,9 +195,7 @@ const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) =>
                     style={{ flex:3, opacity:valid&&!loading?1:0.5 }}
                     disabled={!valid||loading}
                     loading={loading}
-                    title_color={Colors.shades.white}
-                    padding={15}
-                    backgroundColor={Colors.utility.success}
+                    type='success'
                     onPress={() => handleSaveCard()}
                 />
             </View>
@@ -176,9 +203,6 @@ const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) =>
     )
 }
 
-const local_styles = StyleSheet.create({
-    active_brand: { borderRadius:4, padding:3, borderWidth:2, borderColor:Colors.brand.midnight },
-    inactive_brand: { padding:3, borderWidth:2, borderColor:'transparent' }
-})
+
 
 export default ManualCardAdd

package/src/Wallet/components/MyBalance.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { View, TouchableOpacity, ScrollView } from "react-native"
 import type { AccountProps, MyPlayerProps, PlayerBalanceProps } 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 MyBalanceProps = {
     player:MyPlayerProps,
@@ -15,67 +14,66 @@ type MyBalanceProps = {
 }
 
 const MyBalance = ({ player_balance, onClose, onNext }:MyBalanceProps) => {
-
+    const Colors = useColors();
 
     return (
         <View style={{ flex:1 }}>
              <View style={{ padding:20 }}>
-                <Text size={26} color={Colors.brand.midnight} weight='bold'>BETTOREDGE BALANCES</Text>
-                <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='regular'>All order and competition activity goes in and out of your BettorEdge balances.  The specific balance depends on which app-mode you are in.</Text>
+                <Text size={26} theme='h1'>BETTOREDGE BALANCES</Text>
+                <Text style={{ marginTop:10 }} size={16} theme='description'>All order and competition activity goes in and out of your BettorEdge balances.  The specific balance depends on which app-mode you are in.</Text>
             </View>
-            <ScrollView style={{ flex:1, padding:10 }}>
+            <View style={{ flex:1, padding:10 }}>
                 <View style={{ padding:10, paddingBottom:0 }}>
-                    <Text size={18} color={Colors.brand.midnight} weight='bold' textAlign='left'>APP MODES</Text>
+                    <Text size={18} theme='h1' textAlign='left'>APP MODES</Text>
                 </View>
-                <View style={{ backgroundColor:Colors.brand.cobalt, padding:10, borderRadius:8, margin:10 }}>
-                    <View style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
-                        <Text style={{ flex:1 }} size={26} color={Colors.shades.white} weight='semibold'>Real-Money Mode</Text>
-                        <Icons.USDIcon size={30} color={Colors.shades.white} />
+                <View float style={{ padding:10, borderRadius:8, margin:10 }}>
+                    <View transparent style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1 }} size={26} theme='h2'>Real-Money Mode</Text>
+                        <Icons.USDIcon size={30} color={Colors.text.h1} />
                     </View>
-                    <View style={{ padding:5, paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.accents.accent200 }}>
-                        <Text size={14} weight='regular' color={Colors.shades.shade100}>When in real-money mode.  The app header will show as this dark blue color.  All activity when in this mode will use your real-money (USD) balance.</Text>
+                    <View transparent style={{ padding:5, paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.borders.light }}>
+                        <Text size={14} weight='regular' color={Colors.text.h1}>When in real-money mode.  The app header will show as this dark blue color.  All activity when in this mode will use your real-money (USD) balance.</Text>
                     </View>
-                    <View style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
-                        <Text style={{ flex:1 }} size={14} color={Colors.shades.white}>Real-Money / USD ($)</Text>
-                        <Text size={16} weight='bold' color={Colors.shades.white}>${player_balance.balance.toFixed(2)}</Text>
+                    <View transparent style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1 }} size={14} theme='description'>Real-Money / USD ($)</Text>
+                        <Text size={16} weight='bold' theme='h1'>${player_balance.balance.toFixed(2)}</Text>
                     </View>
-                    <View style={{ padding:10 }}>
-                        <View style={{ flexDirection:'row', alignItems:'center' }}>
-                            <Text style={{ flex:1 }} size={14} color={Colors.shades.white}>Promo (P)</Text>
-                            <Text size={16} weight='bold' color={Colors.shades.white}>P{player_balance.promo_balance.toFixed(2)}</Text>
+                    <View transparent style={{ padding:10 }}>
+                        <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                            <Text style={{ flex:1 }} size={14} theme='description'>Promo (P)</Text>
+                            <Text size={16} weight='bold' theme='h1'>P{player_balance.promo_balance.toFixed(2)}</Text>
                         </View>
-                        <Text style={{ marginTop:3 }} size={12} color={Colors.utility.warning} weight='semibold'>Promo balance can be used for all real-money activities. Winnings will be returned as Real-Money/USD ($).</Text>
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.text.warning} weight='semibold'>Promo balance can be used for all real-money activities. Winnings will be returned as Real-Money/USD ($).</Text>
                     </View>
                 </View>
                 
-                <View style={{ backgroundColor:Colors.brand.cyan, padding:10, borderRadius:8, margin:10 }}>
-                    <View style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
-                        <Text style={{ flex:1 }} size={26} color={Colors.shades.white} weight='semibold'>Demo Mode</Text>
-                        <Icons.EdgeCoinIcon size={30} color={Colors.shades.white} />
+                <View float style={{ padding:10, borderRadius:8, margin:10 }}>
+                    <View transparent style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1 }} size={26} theme='h2'>Demo Mode</Text>
+                        <Icons.EdgeCoinIcon size={30} color={Colors.text.h1} />
                     </View>
-                    <View style={{ padding:5, paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.accents.accent100 }}>
-                        <Text size={14} weight='regular' color={Colors.shades.shade100}>When in demo mode.  The app header will show as this light blue color.  All activity when in this mode will use your Edge Coin (E) balance.</Text>
+                    <View transparent style={{ padding:5, paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.borders.light }}>
+                        <Text size={14} theme='description'>When in demo mode.  The app header will show as this light blue color.  All activity when in this mode will use your Edge Coin (E) balance.</Text>
                     </View>
-                    <View style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
-                        <Text style={{ flex:1 }} size={14} color={Colors.shades.white}>Edge Coins (E)</Text>
-                        <Text size={16} weight='bold' color={Colors.shades.white}>E{player_balance.free_market_balance.toFixed(2)}</Text>
+                    <View transparent style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1 }} size={14} theme='description'>Edge Coins (E)</Text>
+                        <Text size={16} weight='bold' theme='h1'>E{player_balance.free_market_balance.toFixed(2)}</Text>
                     </View>
                 </View>
-            </ScrollView>
+            </View>
             <View nativeID='action_row' style={{ flexDirection:'row', justifyContent:'space-between', padding:10 }}>
                 <Button
                     title='EXIT SETUP'
-                    title_color={Colors.utility.error}
-                    backgroundColor='transparent'
+                    type='error'
                     onPress={() => onClose()}
                 />
-                <TouchableOpacity
-                    style={button_styles.wizard_valid}
+                <Button
+                    float
+                    style={{ borderRadius:100, height:50, width:50, justifyContent:'center', alignItems:'center' }}
                     onPress={() => onNext()}
-                    //disabled={loading}
                     >
-                    <Icons.ChevronIcon size={20} direction='right' color={Colors.brand.midnight}/>
-                </TouchableOpacity>
+                    <Icons.ChevronIcon size={18} direction='right' color={Colors.text.h1}/>
+                </Button>
             </View>
         </View>
     )