be-components 0.4.9 → 0.5.1

package/src/Wallet/components/VerifyACHAccount.tsx

@@ -0,0 +1,140 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Button, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import { WalletApi, WalletHelpers } from '../api';
+import moment from 'moment-mini';
+import type { AccountProps } from '../../types';
+
+type VerifyACHWidgetProps = {
+    account:AccountProps,
+    onUpdateAccount:(account:AccountProps) => void,
+    onClose: () => void,
+}
+
+const VerifyACHAccount = ({ account, onClose, onUpdateAccount }:VerifyACHWidgetProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ verify_amount_1, setVerify1Amount ] = useState('')
+    const [ verify_amount_2, setVerify2Amount ] = useState('')
+    const [ error, setError ] = useState<string>();
+
+
+    let next_allowed = moment().subtract(1, 'minute')
+    if(account?.last_verify_attempt){
+        next_allowed = moment(account.last_verify_attempt).add(10, 'minutes');
+    }
+
+    const timedout = moment().isBefore(next_allowed)
+    let verify_allowed = verify_amount_1 && verify_amount_2 && !timedout ? true : false
+    
+
+    /**
+     * Try to verify the account
+     * @returns void
+     */
+    const handleVerify = async() => {
+        if(verify_amount_1 == '0' || verify_amount_2 == '0'){ return alert('Please enter verification amounts') }
+        if(account.status != 'verify'){ return } //Dont do anything
+        if(!verify_allowed){ return }
+        if(!WalletHelpers.isNumber(verify_amount_1)){ return alert('Amount 1 is not a valid number') }
+        if(!WalletHelpers.isNumber(verify_amount_2)){ return alert('Amount 2 is not a valid number') }
+        let amount_1 = parseFloat(verify_amount_1)
+        let amount_2 = parseFloat(verify_amount_2)
+        setLoading(true);
+        const resp = await WalletApi.verifyACHAccount(account.account_id, amount_1, amount_2);
+        if(resp.status == 'fail'){ 
+            setError('Entered amounts are invalid') 
+        }
+        onUpdateAccount(resp.account)
+        setLoading(false);
+
+    }
+
+
+    if(!account){ return <></> }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ padding:20 }}>
+                <Text size={30} color={Colors.brand.midnight} weight='bold'>VERIFY ACCOUNT</Text>
+                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Verify this account by entering the two deposit amounts received from Bettoredge when setting up the account.</Text>
+            </View>
+            <View nativeID='verify_inputs' style={{ flex:1, margin:20 }}>
+                <View style={{marginTop:30}}>
+                    <Text textAlign='center' size={16} color={Colors.brand.midnight} weight='semibold'>Deposit 1</Text>
+                    <TextInput 
+                        style={{ marginTop:5 }}
+                        value={verify_amount_1}
+                        editable={account.status == 'verify' ? true : false}
+                        placeholderTextColor={Colors.brand.slate}
+                        keyboardType='decimal-pad' 
+                        placeholder='0.00' 
+                        onChangeText={(e) => setVerify1Amount(e)} 
+                    />
+                </View>
+                <View style={{marginTop:20}}>
+                    <Text textAlign='center' size={16} color={Colors.brand.midnight} weight='semibold'>Deposit 2</Text>
+                    <TextInput 
+                        style={{ marginTop:5 }}
+                        editable={account.status == 'verify' ? true : false}
+                        value={verify_amount_2}
+                        placeholderTextColor={Colors.brand.slate}
+                        keyboardType='decimal-pad' 
+                        placeholder='0.00' 
+                        onChangeText={(e) => setVerify2Amount(e)} 
+                    />
+                </View>
+                {error ?
+                <Text style={{ marginTop:10 }} textAlign='center' size={14} color={Colors.utility.warning} weight='bold'>{error}</Text>
+                :<></>}
+
+            </View>
+            {account.status == 'verify' ?
+            <View nativeID='verify_actions' style={{ flexDirection:'row', padding:20 }}>
+                <Button
+                    style={{ flex:1, marginRight:5 }}
+                    title='CANCEL'
+                    title_color={Colors.brand.electric}
+                    padding={15}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    onPress={() => onClose()}
+                />
+                <Button
+                    style={{ flex:3, opacity:verify_allowed?1:0.5 }}
+                    disabled={!verify_allowed}
+                    loading={loading}
+                    title={timedout?`Try Again ${moment(next_allowed).fromNow()}`:'VERIFY ACCOUNT'}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    padding={15}
+                    onPress={() => handleVerify()}
+                />
+            </View>
+            :
+            <View nativeID='verify_actions' style={{ flexDirection:'row', padding:20 }}>
+                <Button
+                    style={{ flex:1, marginRight:5 }}
+                    title='CLOSE'
+                    title_color={Colors.brand.electric}
+                    padding={15}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    onPress={() => onClose()}
+                />
+                <Button
+                    style={{ flex:3, opacity:0.5 }}
+                    title='ACCOUNT VERIFIED!'
+                    title_color={Colors.shades.white}
+                    title_weight='bold'
+                    padding={15}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => onClose()}
+                />
+            </View>
+            }
+        </View>
+    )
+}
+
+export default VerifyACHAccount

package/src/Wallet/components/WalletSetup.tsx

@@ -0,0 +1,197 @@
+import React, { useState } from 'react';
+import { View, Image, TouchableOpacity, Linking } from "react-native";
+import type { WalletSettingsProps } from '../../types';
+import { Button, Checkbox, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import type { MyPlayerProps } from '../../ProfileManager/api/types';
+import { WalletApi } from '../api';
+import moment from 'moment-mini';
+
+type WalletSetupProps = {
+    player: MyPlayerProps,
+    wallet_settings: WalletSettingsProps,
+    onSettingsUpdate:(ws:WalletSettingsProps) => void,
+}
+
+const WalletSetup = ({ wallet_settings, onSettingsUpdate }:WalletSetupProps) => {
+    const [ terms_agreed, setTermsAgreed ] = useState(false);
+    const [ auth_error, setAuthError ] = useState<string>();
+    const [ pin_view, setPinView ] = useState<'set'|'confirm'>('set');
+    const [ pin_settings, setPinSettings ] = useState({
+        pin: '',
+        confirm_pin:''
+    })
+    const { pin, confirm_pin } = pin_settings;
+
+    const pin_valid = pin.length >= 4 ? true:false;
+    const go_valid = pin_valid && confirm_pin == pin ? true : false;
+    console.log(pin_valid)
+    const handleAgreeTerms = async() => {
+        const ws = await WalletApi.agreeToTerms()
+        onSettingsUpdate(ws)
+    }
+
+    const handleSetPin = async() => {
+        if(!pin_valid || !go_valid){ return }
+        const ws = await WalletApi.setPin(pin)
+        onSettingsUpdate(ws);
+    }
+
+    const handleAuthPin = async() => {
+        if(!pin_valid){ return }
+        try {
+            const ws = await WalletApi.authenticatePin(pin);
+            onSettingsUpdate(ws);
+        } catch (e) {
+            setAuthError('Invalid Pin - Please try again')
+        }
+    }
+
+    const auth_required = wallet_settings.auth_end_datetime && moment().isAfter(wallet_settings.auth_end_datetime) ? true : false
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ padding:20 }}>
+                <Text size={30} color={Colors.brand.midnight} weight='bold'>My Wallet!</Text>
+                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Welcome to your wallet.  Go through the wizard to get set up to deposit and withdraw!</Text>
+            </View>
+            {!wallet_settings.agreed_to_terms ?
+            <View style={{ flex:1, padding:20 }}>
+                <View>
+                    <Text size={20} color={Colors.brand.slate} weight='semibold' textAlign='center'>BettorEdge Wallet</Text>
+                    <Text style={{ marginTop:5 }} size={26} color={Colors.brand.midnight} weight='bold' textAlign='center'>Terms and Conditions</Text>
+                </View>
+                <View style={{ justifyContent:'center', alignItems:'center' }}>
+                <Image
+                    source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1717098691/Signing_the_contract_stfvtj.png' }}
+                    style={{ width: 250, height:250 }}
+                    resizeMode='cover'
+                />
+                
+                </View>
+                <TouchableOpacity onPress={() => Linking.openURL('https://www.bettoredge.com/wallet-terms-of-use')}>
+                    <Text size={14} color={Colors.brand.midnight} textAlign='center'>Press here to review our <Text size={14} color={Colors.brand.electric} weight='bold'>Wallet Terms of Use</Text>. To continue setting up your wallet please review and agree to the terms.</Text>
+                </TouchableOpacity>
+                <TouchableOpacity 
+                    style={{ marginTop:15, flexDirection:'row', alignItems:'center', backgroundColor:Colors.highlights.highlight400Faded, padding:20, borderRadius:8 }}
+                    onPress={() => setTermsAgreed(!terms_agreed)}>
+                    <Text style={{ flex:1 }} size={16} color={Colors.brand.midnight}>I have read and agree to the terms</Text>
+                    <Checkbox size={30} checked={terms_agreed} disabled onSelect={() => console.log('')}/>
+                </TouchableOpacity>
+            </View>
+            : !wallet_settings.pin ?
+            <View style={{ flex:1, padding:20 }}>
+                <View>
+                    <Text size={20} color={Colors.brand.slate} weight='semibold' textAlign='center'>BettorEdge Wallet</Text>
+                    <Text style={{ marginTop:5 }} size={26} color={Colors.brand.midnight} weight='bold' textAlign='center'>{pin_view == 'set' ? 'Set' : 'Confirm'} Security PIN</Text>
+                </View>
+                <View style={{ justifyContent:'center', alignItems:'center' }}>
+                    <Image
+                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1717099686/Secure_lock_and_key_successfully_unlocked_it6hy0.png' }}
+                        style={{ width: 250, height:250 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ marginBottom:15 }}>
+                    <Text size={14} color={Colors.brand.midnight} textAlign='center'>Let's secure your sensitive information. Before doing any activity in your wallet, you will be required to enter a pin.  Lets set it now.</Text>
+                </View>
+                {pin_view == 'set' ?
+                <TextInput
+                    style={{ width:200, alignSelf:'center' }}
+                    placeholder='HARDPIN'
+                    placeholderTextColor={Colors.brand.slate}
+                    value={pin}
+                    onChangeText={(text) => setPinSettings({ ...pin_settings, pin: text })}
+                />
+                :
+                <View>
+                    <TextInput
+                        style={{ width:200, alignSelf:'center' }}
+                        placeholder='RE-Enter PIN'
+                        placeholderTextColor={Colors.brand.slate}
+                        value={confirm_pin}
+                        onChangeText={(text) => setPinSettings({ ...pin_settings, confirm_pin: text })}
+                    />
+                </View>
+                
+                }
+            </View>
+            :auth_required ?
+            <View style={{ flex:1, padding:20 }}>
+                <View>
+                    <Text size={20} color={Colors.brand.slate} weight='semibold' textAlign='center'>BettorEdge Wallet</Text>
+                    <Text style={{ marginTop:5 }} size={26} color={Colors.brand.midnight} weight='bold' textAlign='center'>Enter Security PIN</Text>
+                </View>
+                <View style={{ justifyContent:'center', alignItems:'center' }}>
+                    <Image
+                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1717099686/Secure_lock_and_key_successfully_unlocked_it6hy0.png' }}
+                        style={{ width: 250, height:250 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ marginBottom:15 }}>
+                    <Text size={14} color={Colors.brand.midnight} textAlign='center'>Before you can continue to your wallet.  Please enter your security pin.</Text>
+                </View>
+                
+                <TextInput
+                    style={{ width:200, alignSelf:'center' }}
+                    placeholder='ENTER PIN'
+                    placeholderTextColor={Colors.brand.slate}
+                    value={pin}
+                    onChangeText={(text) => setPinSettings({ ...pin_settings, pin: text })}
+                />
+                {auth_error ? 
+                <View style={{ padding:10 }}>
+                    <Text size={14} color={Colors.utility.warning} weight='bold' textAlign='center'>{auth_error}</Text>
+                </View>
+                :<></>}
+            </View>
+            :<></>}
+            <View style={{ flexDirection:'row', padding:10 }}>
+                {!wallet_settings.agreed_to_terms ?
+                <Button
+                    title='I AGREE'
+                    style={{ flex:3, opacity:terms_agreed?1:0.5 }}
+                    disabled={!terms_agreed}
+                    backgroundColor={Colors.brand.electric}
+                    title_color={Colors.shades.white}
+                    padding={15}
+                    onPress={() => handleAgreeTerms()}
+                />
+                : !wallet_settings.pin && pin_view == 'set' ?
+                    <Button
+                        title='CONFIRM PIN'
+                        style={{ flex:3, opacity:pin_valid?1:0.5 }}
+                        disabled={!pin_valid}
+                        backgroundColor={Colors.utility.success}
+                        title_color={Colors.shades.white}
+                        padding={15}
+                        onPress={() => setPinView('confirm')}
+                    />
+                : !wallet_settings.pin && pin_view == 'confirm' ?
+                    <Button
+                        title='LETS GO!'
+                        style={{ flex:3, opacity:go_valid ? 1: 0.5}}
+                        disabled={!go_valid}
+                        backgroundColor={Colors.utility.success}
+                        title_color={Colors.shades.white}
+                        padding={15}
+                        onPress={() => handleSetPin()}
+                    />
+                : auth_required ?
+                    <Button
+                        title='SUBMIT'
+                        style={{ flex:3, opacity:pin_valid ? 1: 0.5}}
+                        disabled={!pin_valid}
+                        backgroundColor={Colors.utility.success}
+                        title_color={Colors.shades.white}
+                        padding={15}
+                        onPress={() => handleAuthPin()}
+                    />
+                :<></>}
+            </View>
+        </View>
+    )
+}
+
+export default WalletSetup

package/src/Wallet/components/WithdrawCard.tsx

@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, View } from "react-native";
+import type { AccountProps, ItemOrderProps, PlayerDepositLimitProps, PlayerWithdrawLimitProps, WalletSettingsProps } from '../../types';
+import { ItemOrderApi, ItemOrderHelpers } from '../api';
+import type { MyPlayerProps, PlayerBalanceProps } from '../../ProfileManager/api/types';
+import Colors from '../../constants/colors';
+import { Button, Text, TextInput } from '../../Components';
+import { view_styles } from '../../constants/styles';
+
+
+type WithdrawCardProps = {
+    player:MyPlayerProps,
+    wallet_settings:WalletSettingsProps,
+    player_balance:PlayerBalanceProps,
+    account:AccountProps,
+    deposit_limit:PlayerDepositLimitProps,
+    withdraw_limit:PlayerWithdrawLimitProps,
+    onTransact:(draft_order:ItemOrderProps) => void,
+    onCancel:() => void
+}
+const WithdrawCard = ({ wallet_settings, onTransact, player_balance, account, withdraw_limit, deposit_limit , onCancel}:WithdrawCardProps) => {
+    const [ draft_order, setDraftOrder ] = useState<ItemOrderProps>();
+
+    useEffect(() => {
+        getItemFromServer()
+    },[])
+
+    const getItemFromServer = async() => {
+        const item = await ItemOrderApi.getItemByIdentifier('withdraw')
+        setDraftOrder(ItemOrderHelpers.genWithdrawOrder(item, account))
+    }
+
+
+    const { errors, available_for_withdraw } = ItemOrderHelpers.isWithdrawOrderValid(account, withdraw_limit, deposit_limit, player_balance, wallet_settings, draft_order)
+
+    const handleTransact = () => {
+        if(!draft_order){ return }
+        if(errors.length > 0){ return }
+        onTransact({ ...draft_order, total_amount: draft_order.amount as number })
+    }
+
+
+    if(!draft_order){
+        return (
+            <View style={{ padding:20 }}>
+                <ActivityIndicator style={{ alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
+            </View>
+        )
+    }
+
+
+    let balance = Math.floor(player_balance.balance * 100) / 100
+
+    return (
+        <View style={{ flex:1 }}>
+            <View nativeID='deposit_rules' style={{ padding:10 }}>
+                <Text size={28} textAlign='center' weight='bold' color={Colors.brand.midnight}>Withdraw to your bank</Text>
+                <Text style={{ marginTop:10 }} size={14} textAlign='center' weight='regular' color={Colors.brand.midnight}>Withdraws can take up to 3 business days</Text>
+            </View>
+            <View style={{ flex:1 }}>
+                <View nativeID='deposit_amount' style={{ justifyContent:'center', alignItems:'center', padding:20 }}>
+                    <TextInput 
+                        placeholder='0'
+                        value={draft_order.amount as string}
+                        onChangeText={(text) => setDraftOrder({ ...draft_order, amount:text })}
+                    />
+                </View>
+            </View>
+            <View nativeID='withdraw_limits' style={{ backgroundColor:Colors.shades.shade100, padding:20 }}>
+                <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                    <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='semibold'>Weekly Withdraws Available</Text>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{withdraw_limit.withdraws_per_week - withdraw_limit.week_withdraw_count}</Text>
+                </View>
+                <View style={{ flexDirection:'row', alignItems:'center', padding:10, paddingTop:0 }}>
+                    <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='semibold'>Available For Withdraw</Text>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{available_for_withdraw.toFixed(2)}</Text>
+                </View>
+                <View style={{ marginTop:5, borderRadius:8, padding:10, backgroundColor:Colors.shades.shade600 }}>
+                    <Text size={14} color={Colors.brand.midnight} textAlign='left' weight='semibold'>Determined by the LESSER OF</Text>
+                    <View nativeID='available_to_withdraw_calculation' style={{ margin:5,  marginTop:10, padding:10, backgroundColor:Colors.shades.white, borderRadius:4 }}>
+                        <View style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
+                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='regular'>My Balance</Text>
+                            <Text size={14} color={Colors.brand.midnight} weight='semibold'>${balance}</Text>
+                        </View>
+                        <View style={{ padding:5, flexDirection:'row', alignItems:'center', paddingLeft:15 }}>
+                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='regular'>Instant Deposits (unsettled)</Text>
+                            <Text size={14} color={Colors.utility.error} weight='semibold'>${deposit_limit.instant_deposits.toFixed(2)}</Text>
+                        </View>
+                        <View style={{ padding:5, flexDirection:'row', alignItems:'center', borderTopWidth:1, borderTopColor:Colors.shades.shade600 }}>
+                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>Withdrawable Balance</Text>
+                            <Text size={14} color={Colors.brand.midnight} weight='bold'>${available_for_withdraw.toFixed(2)}</Text>
+                        </View>
+                    </View>
+
+                    <View nativeID='daily_limit' style={{ margin:5, padding:10, backgroundColor:Colors.shades.white, borderRadius:4 }}>
+                        <View style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
+                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='regular'>Daily Limit</Text>
+                            <Text size={14} color={Colors.brand.midnight} weight='semibold'>${withdraw_limit.ach_daily_limit.toFixed(2)}</Text>
+                        </View>
+                        <View style={{ padding:5, flexDirection:'row', alignItems:'center', paddingLeft:15}}>
+                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='regular'>Last Days Withdraws</Text>
+                            <Text size={14} color={Colors.utility.error} weight='semibold'>${withdraw_limit.last_days_ach_withdraws.toFixed(2)}</Text>
+                        </View>
+                        <View style={{ padding:5, flexDirection:'row', alignItems:'center' , borderTopWidth:1, borderTopColor:Colors.shades.shade600 }}>
+                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>Limit Available</Text>
+                            <Text size={14} color={Colors.brand.midnight} weight='bold'>${(withdraw_limit.ach_daily_limit - withdraw_limit.last_days_ach_withdraws).toFixed(2)}</Text>
+                        </View>
+                    </View>
+                </View>
+                {errors.length > 0 ?
+                <View style={{ position:'absolute', bottom:0, left:0, right:0, margin:20, borderRadius:8, padding:20, backgroundColor:Colors.shades.white, ...view_styles.float }}>
+                    <Text style={{ marginBottom:10 }} size={14} color={Colors.brand.midnight}>Please fix the following before continuing</Text>
+                    {errors.map(e => {
+                        return (
+                            <Text size={14} color={Colors.utility.warning}>{e}</Text>
+                        )
+                    })}
+                </View>
+                :<></>}
+            </View>
+            <View nativeID='action_row' style={{ flexDirection:'row', padding:20 }}>
+                <Button
+                    style={{ flex:1, marginRight:5, opacity: 1 }}
+                    title={'CANCEL'}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    padding={15}
+                    onPress={() => onCancel()}
+                />
+                <Button
+                    style={{ flex:3, opacity: errors.length > 0 ? 0.5: 1 }}
+                    disabled={errors.length > 0 ? true : false}
+                    title={'REVIEW WITHDRAW'}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.electric}
+                    padding={15}
+                    onPress={() => handleTransact()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default WithdrawCard