be-components 0.4.9 → 0.5.1

package/src/Wallet/components/AccountCard.tsx

@@ -0,0 +1,92 @@
+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 moment from 'moment-mini';
+
+type AccountCardProps = {
+    account:AccountProps,
+    hide_status?:boolean,
+    onSelectAccount: (account:AccountProps) => void
+}
+
+const AccountCard = ({ account, hide_status, onSelectAccount }: AccountCardProps) => {
+    console.log(account)
+
+    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} />
+            case 'card':
+                return renderCardIcon(account.card_detail?.card_brand)
+            default: return <></>
+
+        }
+    }
+
+    const renderCardIcon = (brand?:string) => {
+        switch(brand?.toLowerCase()){
+            case 'amex':
+                return <Icons.AmexCardIcon size={28} />
+            case 'visa':
+                return <Icons.VisaCardIcon size={28} />
+            case 'mastercard':
+                return <Icons.MasterCardIcon size={28} />
+            case 'discover':
+                return <Icons.DiscoverCardIcon size={28} />
+            default:
+                return <Icons.CreditCardIcon size={22} color={Colors.brand.midnight}/>
+        }
+    }
+
+    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
+        }
+    }
+
+    const getDescriptionLabel = () => {
+        switch(account.account_type){
+            case 'ach':
+                if(!account.ach_detail){ return '' }
+                if(account.ibt_placeholder){ return `Securely link a new account and transact instantly` }
+                return account.ach_detail.account_type.toUpperCase()
+            case 'card':
+                if(!account.card_detail){ return '' }
+                return `EXP ${moment(account.card_detail.expiration_date).format('MM/YYYY')}`
+            default: return ''
+        }
+    }
+
+    return (
+        <TouchableOpacity 
+            style={{ borderRadius:8, backgroundColor:Colors.shades.white, ...view_styles.float }}
+            onPress={() => onSelectAccount(account)}    
+        >
+            <View style={{ padding:10, flexDirection:'row' }}>
+                <View 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>
+                {!hide_status ?
+                <View>
+                    <Text size={12} color={getStatusColor()} weight='bold'>{account.status.toUpperCase()}</Text>
+                </View>
+                :<></>}
+            </View>
+        </TouchableOpacity>
+    )
+}
+
+
+export default AccountCard

package/src/Wallet/components/AccountLimitManager.tsx

@@ -0,0 +1,212 @@
+import React, { useEffect, useState } from 'react';
+import { FlatList, TouchableOpacity, View } 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';
+
+const limit_amount_options = [ 50, 100, 250, 500, 1000]
+const frequency_options = ['Daily', 'Weekly', 'Monthly']
+
+type AccountLimitManagerProps = {
+    account: AccountProps,
+    onCancel: () => void,
+    onSetLimit: (account_limit:AccountLimitProps) => void
+}
+
+const AccountLimitManager = ({ account, onCancel, onSetLimit }: AccountLimitManagerProps ) => {
+    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')
+    const [ active_amount, setActiveAmount ] = useState<number | undefined>(undefined);
+    const [ account_limit, setAccountLimit ] = useState<AccountLimitProps>();
+
+    //Filter to ensure only this player and not inactive accounts
+
+    //Account Limits
+
+    /**
+     * Effect whenever the account_id changes. Need to get the data from server
+     */
+    useEffect(() => {
+        if(!account){ return }
+        getDataFromServer(account.account_id)
+    },[account])
+
+    useEffect(() => {
+        if(!account_limit){ return }
+        if(account_limit.status == 'active'){
+            setActiveFrequency(WalletHelpers.getFrequencyFromDays(account_limit.limit_days))
+            setActiveAmount(account_limit.limit_amount)
+        }
+    },[account_limit])    
+
+    /**
+     * Get data from the server
+     * @param account_id 
+     */
+    const getDataFromServer = async(account_id:string) => {
+        const al = await WalletApi.getLimitByAccountId(account_id)
+        setAccountLimit(al)
+        if(al){ onSetLimit(al) }
+    }
+
+    const handleSetLimit = async() => {
+        if(loading){ return alert('Hold your horses please.  Still updating') };
+        if(!active_amount || !active_frequency){ return alert('Invalid limit') };
+        let days = 0;
+        switch(active_frequency){
+            case 'Daily': 
+                days = 1
+                break
+            case 'Weekly':
+                days = 7
+                break
+            case 'Monthly':
+                days = 30
+                break
+            default: break
+        }
+        if(days == 0){ return alert('Invalid limit') }
+
+        let account_limit:AccountLimitProps = {
+            account_id:account.account_id,
+            account_limit_id: '',
+            limit_amount: active_amount,
+            limit_days: days,
+            create_datetime: '',
+            last_update_datetime: '',
+            status: 'active',
+            current_amount: 0,
+            reset_datetime: ''
+        }
+
+        setLoading(true)
+        const al = await WalletApi.createAccountLimit(account_limit)
+        setAccountLimit(al)
+        setLoading(false)
+    }
+
+    const handleRemoveAccountLimit = async() => {
+        if(!account_limit){ return }//There is no account limit
+        if(loading){ return alert('Still processing') }
+        setLoading(true)
+        const al = await WalletApi.removeAccountLimit(account_limit.account_limit_id)
+        setAccountLimit(al)
+        onSetLimit(al)
+        setLoading(false)
+    }
+
+    const renderOptions = (data: { item:number, index:number }) => {
+        //const selected = data.item == active_amount ? true : false
+        return (
+            <TouchableOpacity style={{ padding:10 }} onPress={() => {
+                setActiveAmount(data.item);
+                setDropdownVisible(false);
+            }}>
+                <Text color={Colors.brand.midnight} weight='semibold' size={14}>${data.item}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+    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>
+            </View>
+            <View style={{ flex:1 }}>
+                <View style={{padding:16}}>
+                    <Text size={16} color={Colors.brand.cobalt} weight='semibold'>Amount</Text>
+                    <TouchableOpacity 
+                    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>
+                    {dropdown_visible ?
+                    <View style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10, borderWidth:1, borderTopWidth:1, borderColor:Colors.shades.shade600 }}>
+                        <FlatList
+                            data={limit_amount_options}
+                            renderItem={renderOptions}
+                        />
+                    </View>
+                    :<></>}
+                </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>
+                </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>
+                        <Button
+                            style={{ marginTop:10 }}
+                            title='REMOVE'
+                            title_color={Colors.shades.white}
+                            padding={15}
+                            backgroundColor={Colors.utility.error}
+                            onPress={() => handleRemoveAccountLimit()}
+                        />
+                    </View>
+                    :<></>}
+            </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 }}>
+                        {disclaimer ?
+                        <Icons.CheckIcon color={Colors.shades.white} 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>
+            </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}
+                    onPress={() => onCancel()}
+                />
+                <Button
+                    style={{ flex:3, opacity: valid&&disclaimer?1:0.5 }}
+                    title={'SAVE LIMIT'}
+                    disabled={!valid||!disclaimer}
+                    loading={loading}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.electric}
+                    padding={15}
+                    onPress={() => handleSetLimit()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default AccountLimitManager

package/src/Wallet/components/AccountManager.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { FlatList, View, TouchableOpacity, Image } from 'react-native';
+import type { AccountProps } from '../../types';
+import AccountCard from './AccountCard';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+
+type AccountManagerProps = {
+    accounts:AccountProps[],
+    onClose:() => void,
+    onSelectAccount: (account:AccountProps) => void
+    onSelectManualACH: () => void,
+    onSelectManualCard: () => void,
+    onSelectInstantBankTransfer: () => void
+}
+
+const AccountManager = ({ accounts,  onSelectAccount, onSelectManualACH, onSelectManualCard, onSelectInstantBankTransfer , onClose}:AccountManagerProps) => {
+
+    const my_accounts = accounts.filter(a => !a.ibt_placeholder && !['bettoredge', 'paypal'].includes(a.account_type))
+    //const ibt_placeholder = accounts.find(a => a.ibt_placeholder);
+
+    const renderAccounts = (data:{item:AccountProps, index:number}) => {
+        return (
+            <View style={{ margin:5 }}>
+                <AccountCard
+                    account={data.item}
+                    onSelectAccount={(account) => onSelectAccount(account)}
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+             <View style={{ padding:20 }}>
+                <Text size={30} color={Colors.brand.midnight} weight='bold'>WALLET ACCOUNTS</Text>
+                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Below are the accounts we have on file for you.  Please select one to manage or transact!</Text>
+            </View>
+            <View style={{ flex:1, padding:10 }}>
+                {my_accounts.length > 0 ?
+                <View style={{ padding:10 }}>
+                    <Text size={16} color={Colors.brand.midnight} weight='bold'>MY ACCOUNTS</Text>
+                    <View style={{ marginTop:10 }}>
+                        <FlatList
+                            data={my_accounts}
+                            renderItem={renderAccounts}
+                            keyExtractor={(item) => item.account_id.toString()}
+                        />
+                    </View>
+                </View>
+                :<></>}
+                <View style={{ padding:10, marginTop:20 }}>
+                    <Text size={16} color={Colors.brand.midnight} weight='bold'>ADD NEW ACCOUNT</Text>
+                    <TouchableOpacity style={{ marginTop:10, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.shades.white }}
+                    onPress={() => onSelectInstantBankTransfer()}>
+                        <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'
+                            />
+                        </View>
+                        <View style={{ flex:1 }}>
+                            <Text size={14} color={Colors.brand.cobalt} textAlign='center' weight='bold'>LINK ACH ACCOUNT</Text>
+                        </View>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginTop:10, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.brand.midnight }}
+                    onPress={() => onSelectManualACH()}>
+                        <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>
+                        <View style={{ flex:1 }}>
+                            <Text size={14} color={Colors.shades.white} textAlign='center' weight='bold'>ADD MANUAL ACH ACCOUNT</Text>
+                        </View>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginTop:10, padding:3, flexDirection:'row', alignItems:'center', borderRadius:30, backgroundColor:Colors.brand.cyan }}
+                    onPress={() => onSelectManualCard()}>
+                        <View style={{  height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center', backgroundColor:Colors.shades.white }}>
+                            <Icons.CreditCardIcon size={22} color={Colors.brand.cyan} />
+                        </View>
+                        <View style={{ flex:1 }}>
+                            <Text size={14} color={Colors.shades.white} textAlign='center' weight='bold'>ADD NEW CARD ACCOUNT</Text>
+                        </View>
+                    </TouchableOpacity>
+                
+                </View>
+            </View>
+            <View nativeID='action_row' style={{ padding:20 }}>
+                <Button
+                    style={{ flex:1, opacity: 1 }}
+                    title={'CLOSE'}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    padding={15}
+                    onPress={() => onClose()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default AccountManager

package/src/Wallet/components/AccountSnoozeManager.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react';
+import { FlatList, TouchableOpacity, View } from 'react-native';
+import type { AccountProps, AccountSnoozeProps } from '../../types';
+import { WalletApi } from '../api';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import moment from 'moment-mini';
+
+const duration_options = [1,7,14,30]
+
+type AccountSnoozeManagerProps = {
+    account:AccountProps,
+    onCancel: () => void
+    onSnooze: (account_snooze?:AccountSnoozeProps) => void
+}
+
+const AccountSnoozeManager = ({ account, onCancel, onSnooze } : AccountSnoozeManagerProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ dropdown_visible, setDropdownVisible ] = useState(false);
+    const [ disclaimer, setDisclaimer ] = useState(false);
+    const [ active_duration, setActiveDuration ] = useState<number | undefined>(undefined);
+    const [ account_snooze, setAccountSnooze ] = useState<AccountSnoozeProps>()
+    /**
+     * Effect whenever the account_id changes. Need to get the data from server
+     */
+    useEffect(() => {
+        if(!account){ return }
+        getDataFromServer(account.account_id)
+    },[account])
+
+    useEffect(() => {
+        if(!account_snooze){ return }
+        if(account_snooze.status == 'active'){
+            //update
+        }
+    },[account_snooze])
+
+    /**
+     * Get data from the server
+     * @param account_id 
+     */
+    const getDataFromServer = async(account_id:string) => {
+        setLoading(true);
+        const as = await WalletApi.getSnoozeByAccountId(account_id)
+        setAccountSnooze(as)
+        onSnooze(as)
+        setLoading(false)
+    }
+
+    const handleSetSnooze = async() => {
+        if(account_snooze || !active_duration || loading){ return }
+        let snooze:AccountSnoozeProps = {
+            account_id:account.account_id,
+            account_snooze_id:'',
+            snooze_days: active_duration,
+            status: 'active',
+            create_datetime: '',
+            last_update_datetime: '',
+            end_datetime: ''
+        }
+        setLoading(true)
+        const new_snooze = await WalletApi.createAccountSnooze(snooze)
+        setAccountSnooze(new_snooze)
+        setLoading(false)
+    }
+
+    const renderOptions = (data: { item:number, index:number }) => {
+        return (
+            <TouchableOpacity style={{ padding:10 }} onPress={() => {
+                setActiveDuration(data.item);
+                setDropdownVisible(false);
+            }}>
+                <Text color={Colors.brand.midnight} weight='semibold' size={14}>{data.item} days</Text>
+            </TouchableOpacity>
+        )
+    }
+    const valid = active_duration ? true : false;
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ padding:20 }}>
+                <Text size={30} color={Colors.brand.midnight} weight='bold'>Snooze Account</Text>
+                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Take a break from the real money features of BettorEdge using this account.</Text>
+            </View>
+            <View style={{ flex:1, padding:16}}>
+                <Text size={16} color={Colors.brand.cobalt} weight='semibold'>Amount</Text>
+                <TouchableOpacity 
+                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_duration?`${active_duration} Days`:'Select Duration'}</Text>
+                    <Icons.ChevronIcon direction='down' color={Colors.brand.cobalt} size={8} />
+                </TouchableOpacity>
+                {dropdown_visible ?
+                <View style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10, borderWidth:1, borderTopWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <FlatList
+                        data={duration_options}
+                        renderItem={renderOptions}
+                    />
+                </View>
+                :<></>}
+            </View>
+            { valid ?
+            <View nativeID='snooze_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 }}>
+                        {disclaimer ?
+                        <Icons.CheckIcon color={Colors.shades.white} size={14} />
+                        :<></>}
+                    </View>
+                    <Text size={14} color={Colors.brand.midnight} weight='regular'>I confirm I wwould like to snooze my account for {active_duration} days. This cannot be undone!</Text>
+                </TouchableOpacity>
+            </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}
+                    onPress={() => onCancel()}
+                />
+                <Button
+                    style={{ flex:3, opacity: valid&&disclaimer?1:0.5 }}
+                    title={'SAVE SNOOZE'}
+                    disabled={!valid||!disclaimer}
+                    loading={loading}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.electric}
+                    padding={15}
+                    onPress={() => handleSetSnooze()}
+                />
+            </View>
+
+            {account_snooze ?
+            <View style={{ position:'absolute', top:0, right:0, left:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
+                <View style={{ backgroundColor:Colors.shades.white, borderRadius:8, padding:20}}>
+                    <View style={{ padding:10, backgroundColor:Colors.brand.cyan, borderRadius:8, alignSelf:'center' }}>
+                        <Icons.SnoozeIcon size={24} color={Colors.shades.white} />
+                    </View>
+                    <Text style={{ padding:10 }} size={18} weight='bold' textAlign='center'>Account is Snoozing</Text>
+                    <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign='center'>Snooze ends {moment(account_snooze.end_datetime).fromNow()}</Text>
+                    <TouchableOpacity style={{  marginTop:10, padding:10, borderWidth:1, borderColor:Colors.brand.electric, borderRadius:8 }} onPress={() => onCancel()}>
+                        <Text size={14} color={Colors.brand.electric} textAlign='center'>Go Back</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default AccountSnoozeManager

package/src/Wallet/components/AddressCard.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import type { PlayerAddressProps } from '../../types';
+import { Button, Text } from '../../Components';
+import Colors from '../../constants/colors';
+
+type AddressCardProps = {
+    address:PlayerAddressProps,
+    onDelete:(address:PlayerAddressProps) => void,
+    onSelect:(address:PlayerAddressProps) => void
+}
+
+const AddressCard = ({ address, onSelect, onDelete }:AddressCardProps) => {
+    return (
+        <View nativeID='address_info' style={{ padding:10, flexDirection:'row', alignItems:'center', borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8 }} >
+            <TouchableOpacity style={{ flex:1 }} onPress={() => onSelect(address)}>
+                <Text color={Colors.brand.midnight} weight='bold' size={16}>{address.name}</Text>
+                <Text style={{ marginTop:4 }} size={14} weight='regular'>{address.street}</Text>
+                <Text style={{ marginTop:2 }} size={14} weight='regular'>{address.city} {address.state} {address.zip}</Text>
+            </TouchableOpacity>
+            <Button
+                title='DELETE'
+                title_color={Colors.shades.white}
+                backgroundColor={Colors.utility.error}
+                onPress={() => onDelete(address)}
+            />
+        </View>
+    )
+}
+
+export default AddressCard