be-components 0.4.9 → 0.5.1

package/src/Wallet/components/ManualACHAdd.tsx

@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity } from "react-native";
+import { Button, Checkbox, Text, TextInput } from '../../Components';
+import type { MyPlayerProps } from '../../ProfileManager/api/types';
+import Colors from '../../constants/colors';
+import { WalletApi, WalletHelpers } from '../api';
+import type { AccountProps } from '../../types';
+const validator = require('us-bank-account-validator');
+
+type ManualACHAddProps = {
+    player:MyPlayerProps,
+    onAddAccount:(account:AccountProps) => void,
+    onCancel:() => void
+}
+const ManualACHAdd = ({ player, onAddAccount, onCancel }:ManualACHAddProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ error, setError ] = useState<string>();
+    const [ ach_account, setACHAccount ] = useState({
+        account: WalletHelpers.getEmptyACHAccount(),
+        ach_details: WalletHelpers.getEmptyACHDetail()
+    })
+    const [ disclaimer, setDisclaimer ] = useState(false);
+
+    const { account, ach_details } = ach_account;
+    const bank_valid = ach_details.bank_name ? true : false;
+    const routing_valid = validator.routingNumber(ach_details.routing_number);
+    const account_valid = validator.accountNumber(ach_details.account_number);
+    const valid = bank_valid && routing_valid && account_valid && disclaimer ? true : false
+
+    const handleAddAccount = async() => {
+        if(!valid || loading){ return }
+        setLoading(true);
+        try {
+            const resp = await WalletApi.addACHAccount(account, ach_details)
+            setACHAccount({ account: resp.account, ach_details: resp.ach_detail })
+            onAddAccount({ ...resp.account, ach_detail: resp.ach_detail })
+        } catch (e) {
+            setError('Sorry, we were not able to add this account.  Please try again later.')
+        }
+        
+        setLoading(false);
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ padding:20 }}>
+                <Text size={30} color={Colors.brand.midnight} weight='bold'>MANUAL ACH ACCOUNT</Text>
+                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Complete the form below to add a new ACH account.  Once submitted, we will send 2 small deposits to the account to confirm ownership. This process can take up to 3 business days.</Text>
+            </View>
+            <View style={{ flex:1, padding:20 }}>
+                <View style={{ marginTop:10 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>Name on account</Text>
+                    <TextInput 
+                        style={{ marginTop:10 }}
+                        value={`${player.first_name} ${player.last_name}`} 
+                        editable={false}
+                        onChangeText={() => console.log('ehy')}
+                    />
+                </View>
+                <View style={{ marginTop: 16 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>Bank Name</Text>
+                    <TextInput 
+                        style={{ marginTop:10 }}
+                        keyboardType='default' 
+                        placeholderTextColor={Colors.shades.shade600}
+                        placeholder={'Bank Name'} 
+                        value={ach_details.bank_name}
+                        autoFocus={true} 
+                        onChangeText={(e) => setACHAccount({ ...ach_account, ach_details: { ...ach_details, bank_name: e } })}
+                    />
+                    {!bank_valid ?
+                    <Text style={{ marginTop:5 }} size={14} color={Colors.utility.warning}>Bank Name Is Not Valid</Text>
+                    :<></>}
+                </View>
+                <View style={{ marginTop: 16 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>Routing Number</Text>
+                    <TextInput 
+                        style={{ marginTop:10 }}
+                        placeholderTextColor={Colors.shades.shade600}
+                        keyboardType='number-pad'
+                        placeholder={'xxxxxx911'}
+                        value={ach_details.routing_number}
+                        onChangeText={(e) => setACHAccount({ ...ach_account, ach_details: { ...ach_details, routing_number: e } })}
+                    />
+                    {!routing_valid.isValid ?
+                    <Text style={{ marginTop:5 }} size={14} color={Colors.utility.warning}>Routing Number Is Not Valid</Text>
+                    :<></>}
+                </View>
+                <View style={{ marginTop:16 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='semibold'>Account Number</Text>
+                    <TextInput 
+                        style={{ marginTop:10 }}
+                        placeholderTextColor={Colors.shades.shade600}
+                        keyboardType='number-pad'
+                        value={ach_details.account_number}
+                        placeholder={'xxxxxxxxx0000'}
+                        onChangeText={(e) => setACHAccount({ ...ach_account, ach_details: { ...ach_details, account_number: e } })}
+                    />
+                    {!account_valid.isValid ?
+                    <Text style={{ marginTop:5 }} size={14} color={Colors.utility.warning}>Account Number Is Not Valid</Text>
+                    :<></>}
+                </View>
+            </View>
+            <View>
+                <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', paddingLeft:20, paddingRight:20 }} onPress={() => setDisclaimer(!disclaimer)}>
+                    <Checkbox size={30} checked={disclaimer} disabled onSelect={() => console.log('')}/>
+                    <Text style={{ marginLeft:10 }} size={14} color={Colors.brand.midnight}>I understand that by continuing, we will send 2 small deposits to this bank account to confirm ownership. Once received, I will enter the amounts here.</Text>
+                </TouchableOpacity>
+            </View>
+            {error?
+            <View style={{ padding:10 }}>
+                <Text size={16} color={Colors.utility.warning} textAlign='center' weight='semibold'>{error}</Text>
+            </View>
+            :<></>}
+            {account.status == 'pending' ?
+            <View style={{ flexDirection:'row', padding:20 }}>
+                <Button
+                    title='CANCEL'
+                    style={{ flex:1, marginRight:5, opacity:loading?0.5:1 }}
+                    disabled={loading}
+                    title_color={Colors.brand.electric}
+                    padding={15}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    onPress={() => onCancel()}
+                />
+                <Button
+                    title='ADD ACCOUNT'
+                    style={{ flex:3, opacity:valid&&!loading&&!error?1:0.5 }}
+                    disabled={!valid || loading || error?true:false}
+                    loading={loading}
+                    title_color={Colors.shades.white}
+                    padding={15}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => handleAddAccount()}
+                />
+            </View>
+            : account.status == 'verify' ?
+            <View style={{ flexDirection:'row', padding:20 }}>
+                <Button
+                    title='CLOSE'
+                    style={{ flex:1, marginRight:5 }}
+                    title_color={Colors.brand.electric}
+                    padding={15}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    onPress={() => onCancel()}
+                />
+                <Button
+                    title='VERIFY TRANSACTIONS SENT'
+                    style={{ flex:3 }}
+                    disabled
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.slate}
+                    padding={15}
+                    onPress={() => console.log('')}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default ManualACHAdd

package/src/Wallet/components/ManualCardAdd.tsx

@@ -0,0 +1,185 @@
+import React, { useState } from 'react';
+import { View, StyleSheet } from "react-native";
+import type { MyPlayerProps } from '../../ProfileManager/api/types';
+import { WalletApi, WalletHelpers } from '../api';
+import { Button, Icons, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import type { AccountProps } from '../../types';
+import moment from 'moment-mini';
+
+type ManualCardAddProps = {
+    player:MyPlayerProps,
+    onAddAccount:(acct:AccountProps) => void,
+    onCancel:() => void
+}
+
+const ManualCardAdd = ({ player, onAddAccount, onCancel }:ManualCardAddProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ error, setError ] = useState<string>();
+    const [ card_account, setCardAccount ] = useState({
+        account: WalletHelpers.getEmptyCardAccount(),
+        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);
+
+    const handleExpiry = (text:string) => {
+        setCardAccount({ ...card_account, card_detail: { ...card_detail, expiration_date: text } })
+    }
+
+    const handleCardNumber = (text:string) => {
+        let unformated_number = WalletHelpers.unformatCardNumber(text)
+        setCardAccount({ ...card_account, card_detail: { ...card_detail, card_number: unformated_number, card_brand: WalletHelpers.getCardBrandFromNumber(text) } })
+    }
+
+    const handleSaveCard = async() => {
+        if(!valid || loading){ return }
+        setLoading(true);
+        try {
+            const resp = await WalletApi.addCardAccount(account, { ...card_detail, expiration_date: moment(card_detail.expiration_date, 'MM/YYYY') })
+            //setCardAccount(resp)
+            onAddAccount({ ...resp.account, card_detail: resp.card_detail })
+            setError(undefined)
+        } catch (e) {
+            setError('Invalid card.  Please try again')
+        }
+        setLoading(false)
+    }
+
+    const renderCardIcon = (brand?:string) => {
+        switch(brand){
+            case 'AMEX':
+                return <Icons.AmexCardIcon size={30} />
+            case 'VISA':
+                return <Icons.VisaCardIcon size={30} />
+            case 'MASTERCARD':
+                return <Icons.MasterCardIcon size={30} />
+            case 'DISCOVER':
+                return <Icons.DiscoverCardIcon size={30} />
+            default:
+                return <Icons.CreditCardIcon size={22} color={Colors.brand.midnight}/>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ padding:20 }}>
+                <Text size={30} color={Colors.brand.midnight} weight='bold'>NEW CARD ACCOUNT</Text>
+                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Complete the form below to add a new card account. Once submitted and approve, you can transact immediately.</Text>
+            </View>
+            <View 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} />
+                                </View>
+                                <View style={card_detail.card_brand == 'AMEX' ? local_styles.active_brand : local_styles.inactive_brand}>
+                                    <Icons.AmexCardIcon size={30} />
+                                </View>
+                                <View style={card_detail.card_brand == 'DISCOVER' ? local_styles.active_brand : local_styles.inactive_brand}>
+                                    <Icons.DiscoverCardIcon size={30} />
+                                </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)}
+                        />
+                        </View>
+                    </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>
+                            <TextInput 
+                                placeholder='Jonathan'
+                                placeholderTextColor={Colors.shades.shade600}
+                                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.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)}
+                        />
+                    </View>
+                    {card_detail.expiration_date && !expiration_date ?
+                        <Text size={14} color={Colors.utility.warning} weight='semibold'>Expiration date is not valid</Text>
+                    :<></>}
+                </View>
+            </View>
+            {error ?
+            <View style={{ padding:10 }}>
+                <Text size={16} color={Colors.utility.warning} weight='bold' textAlign='center'>{error}</Text>
+            </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}
+                    onPress={() => onCancel()}
+                />
+                <Button
+                    title='ADD ACCOUNT'
+                    style={{ flex:3, opacity:valid?1:0.5 }}
+                    disabled={!valid}
+                    loading={loading}
+                    title_color={Colors.shades.white}
+                    padding={15}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => handleSaveCard()}
+                />
+            </View>
+        </View>
+    )
+}
+
+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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View, TouchableOpacity } from "react-native"
+import type { MyPlayerProps, PlayerBalanceProps } from '../../ProfileManager/api/types';
+import type { AccountProps } from '../../types';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { button_styles } from '../../constants/styles';
+
+type MyBalanceProps = {
+    player:MyPlayerProps,
+    player_balance:PlayerBalanceProps,
+    balance_account?:AccountProps,
+    walkthrough?:boolean,
+    onClose:() => void,
+    onNext:() => void
+}
+
+const MyBalance = ({ player, balance_account, player_balance, walkthrough, onClose, onNext }:MyBalanceProps) => {
+
+    console.log(player, player_balance, balance_account)
+
+
+    return (
+        <View style={{ flex:1 }}>
+             <View style={{ padding:20 }}>
+                <Text size={30} color={Colors.brand.midnight} weight='bold'>BettorEdge Balance</Text>
+                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>All order and game activity goes in and out of your BettorEdge balance.</Text>
+            </View>
+            <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                <View>
+                    <Text size={14} color={Colors.brand.midnight}>Your BettorEdge balance is made up of 3 currencies</Text>
+                </View>
+                <View>
+                    <Text>REAL MONEY (USD)</Text>
+                </View>
+                <View>
+                    <Text>PROMO</Text>
+                </View>
+                <View>
+                    <Text>EDGE COINS</Text>
+                </View>
+            </View>
+            {walkthrough ?
+            <View nativeID='action_row' style={{ flexDirection:'row', justifyContent:'space-between', padding:10 }}>
+                <Button
+                    title='EXIT SETUP'
+                    title_color={Colors.utility.error}
+                    backgroundColor='transparent'
+                    onPress={() => onClose()}
+                />
+                <TouchableOpacity
+                    style={button_styles.wizard_valid}
+                    onPress={() => onNext()}
+                    //disabled={loading}
+                    >
+                    <Icons.ChevronIcon size={20} direction='right' color={Colors.brand.midnight}/>
+                </TouchableOpacity>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default MyBalance

package/src/Wallet/components/PayPalOrderCapture.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { PayPalButtons } from "@paypal/react-paypal-js";
+import { View } from "react-native";
+import type { AccountProps, ItemOrderProps, ItemProps, TransactionProps } from '../../types';
+import { CheckoutApi, CheckoutHelpers } from '../../Checkout/api';
+
+type PayPalOrderCaptureProps = {
+    paypal_account:AccountProps,
+    items:ItemProps[],
+    region?:string,
+    coordinates?:any,
+    draft_item_order:ItemOrderProps,
+    button_height?:number,
+    order_valid?:boolean,
+    onOrderUpdate:(item_order:ItemOrderProps, transaction:TransactionProps) => void,
+    onCancel:() => void
+}
+
+const PayPalOrderCapture = ({ draft_item_order, region, coordinates, items, paypal_account, button_height, order_valid, onOrderUpdate, onCancel }:PayPalOrderCaptureProps) => {
+
+    const createOrder = async() => {
+        try {
+            const draft_transaction = CheckoutHelpers.genTransactionFromItemOrder(draft_item_order, items, paypal_account?.account_id, coordinates)
+            const { transaction } = await CheckoutApi.createOrder({ ...draft_item_order, region, location: coordinates }, draft_transaction)
+            return transaction.external_id as string //This should be the paypal order Id   
+        } catch (e) {
+            return ''
+        }
+    }
+
+    const onApprove = async(data:any) => {
+        const resp = await CheckoutApi.capturePayPalTransaction(data.orderID);
+        onOrderUpdate(resp.item_order, resp.transaction)
+    }
+
+    const handleCancel = async(data:any) => {
+        await CheckoutApi.cancelTransaction(undefined, data.orderID)
+        onCancel()
+
+    }
+    
+    let height = 55
+    if(button_height && button_height > 24 && button_height < 56){ height = button_height }
+
+    return (
+        <View style={{ flex:1 }}>
+            <PayPalButtons
+                disabled={!order_valid ? true : false}
+                style={{ layout: 'horizontal', shape:'pill', height }}
+                createOrder={createOrder}
+                onError={(e) => console.log(e)}
+                onApprove={onApprove}
+                onCancel={handleCancel}
+            />
+        </View>
+    )
+}
+
+export default PayPalOrderCapture

package/src/Wallet/components/RemoveAccount.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { 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 { WalletApi } from '../api';
+
+type UnlinkAccountCardProps = {
+    account:AccountProps,
+    onCancel: () => void,
+    onRemove: (acct:AccountProps) => void
+}
+
+const RemoveAccountCard = ({ account, onCancel, onRemove }:UnlinkAccountCardProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ disclaimer, setDisclaimer ] = useState(false);
+
+    //Player accounts
+    //Filter to ensure only this player and not inactive accounts
+
+    const handleRemove = async() => {
+        if(!account){ return }
+        if(loading){ return }
+        if(!disclaimer){ return }
+        setLoading(true);
+        const resp = await WalletApi.removeAccount(account.account_id)
+        onRemove(resp.account)
+        setLoading(false);
+    }
+
+    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 }}>
+                        {disclaimer ?
+                        <Icons.CheckIcon size={14} color={Colors.shades.white} />
+                        :<></>}
+                    </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>
+            </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}
+                    onPress={() => onCancel()}
+                />
+                <Button
+                    style={{ flex:3, opacity: !disclaimer||loading?0.5:1 }}
+                    disabled={!disclaimer}
+                    loading={loading}
+                    title={'REMOVE ACCOUNT'}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.error}
+                    padding={15}
+                    onPress={() => handleRemove()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default RemoveAccountCard