be-components 0.1.1 → 0.1.3

package/src/ProfileManager/Components/BasicInfoManager.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import { Button, Icons, Text, TextInput } from '../../Components';
+import type { MyPlayerProps } from '../api/types';
+import Colors from '../../constants/colors';
+import { ProfileApi } from '../api';
+
+type BasicInfoManagerProps = {
+    player:MyPlayerProps,
+    walkthrough?:boolean,
+    onNext:() => void,
+    onClose:() => void,
+    onPlayerUpdate:(player:MyPlayerProps) => void 
+}
+
+const BasicInfoManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:BasicInfoManagerProps) => {
+    const [ draft_player, setDraftPlayer ] = useState<MyPlayerProps>(player)
+    const [ username_valid, setUsernameValid ] = useState<{
+        loading:boolean,
+        valid:boolean
+    }>({
+        loading:false,
+        valid:true
+    });
+
+    useEffect(() => {
+        setDraftPlayer(player)
+    },[player])
+
+
+    const is_changed = JSON.stringify(player) != JSON.stringify(draft_player) ? true : false
+
+
+    const handleUpdatePlayer = async() => {
+        if(username_valid.loading || !username_valid.valid) { return }
+        //Check if name needs updating
+        let new_player:MyPlayerProps = { ...draft_player };
+        if(`${draft_player.first_name.toLowerCase()}${draft_player.last_name.toLowerCase()}` != `${player.first_name.toLowerCase()}${player.last_name.toLowerCase()}`){
+            new_player = await ProfileApi.updatePlayerName(draft_player.first_name, draft_player.last_name)
+        }
+        if(draft_player.username.toLowerCase() != player.username.toLowerCase()){
+            new_player = await ProfileApi.updatePlayerUsername(draft_player.username)
+        }
+        onPlayerUpdate(new_player)
+        if(walkthrough){ onNext() }
+    }
+
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
+                <View style={{ padding:10 }}>
+                    <Text weight='bold' size={16} color={Colors.brand.midnight}>MY USERNAME</Text>
+                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>To start, we randomly generate a username for you!  Change it if you'd like here.</Text>
+                </View>     
+                <View style={{ margin:10, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                    <View style={{ paddingLeft:15, paddingRight:15 }}>
+                        <Text size={20} color={Colors.brand.midnight} weight='bold'>@</Text>
+                    </View>
+                    <TextInput
+                        value={draft_player.username}
+                        style={{ flex:1, borderRadius:0 }}
+                        onBlur={async() => {
+                            if(draft_player.username.toLowerCase() == player.username.toLowerCase()){ return }//USERNAME HAS NOT CHANGED
+                            setUsernameValid({ ...username_valid, loading:true })
+                            const is_valid = await ProfileApi.isAttributeValid('username', draft_player.username)
+                            setTimeout(() => {
+                                setUsernameValid({ loading: false, valid: is_valid });
+                            }, 500);
+                        }}
+                        onChangeText={(text) => {
+                            setDraftPlayer({ ...draft_player, username: text })
+                            if(text.toLowerCase() != player.username.toLowerCase()){
+                                setUsernameValid({ loading:false, valid:false })
+                            } else {
+                                setUsernameValid({ loading: false, valid:true });
+                            }
+                        }}
+                    />
+                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                        {username_valid.loading ?
+                        <ActivityIndicator size='small' color={Colors.brand.midnight}/>
+                        :
+                        <View>
+                            {username_valid.valid ?
+                            <Icons.CheckIcon size={16} color={Colors.utility.success} />
+                            :
+                            <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                            }
+                        </View>
+                        }
+                    </View>
+                </View>
+                
+
+                <View style={{ padding:10 }}>
+                    <Text weight='bold' size={16} textAlign='left' color={Colors.brand.midnight}>MY NAME</Text>
+                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>Add / Update your name below.  This is required to verify your account</Text>
+                </View> 
+                <View style={{ margin:10, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                    <View style={{ paddingLeft:15, paddingRight:15 }}>
+                        <Icons.UserIcon
+                            color={Colors.brand.midnight}
+                            size={18}
+                        />
+                    </View>
+                    <TextInput
+                        value={draft_player.first_name}
+                        placeholder='First Name'
+                        placeholderTextColor={Colors.brand.slate}
+                        editable={player.vouched_status != 'verified' ? true : false}
+                        style={{ flex:1, borderTopLeftRadius:0, borderBottomLeftRadius:0 }}
+                        onChangeText={(text) => setDraftPlayer({ ...draft_player, first_name: text })}
+                    />
+                </View>
+                <View style={{ margin:10, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                    <View style={{ paddingLeft:15, paddingRight:15 }}>
+                        <Icons.UserIcon
+                            color={Colors.brand.midnight}
+                            size={18}
+                        />
+                    </View>
+                    <TextInput
+                        value={draft_player.last_name}
+                        placeholder='Last Name'
+                        placeholderTextColor={Colors.brand.slate}
+                        editable={player.vouched_status != 'verified' ? true : false}
+                        style={{ flex:1, borderTopLeftRadius:0, borderBottomLeftRadius:0 }}
+                        onChangeText={(text) => setDraftPlayer({ ...draft_player, last_name: text })}
+                    />
+                </View>
+            </View>
+            <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>
+                <Button
+                    title={walkthrough ? 'SKIP' : 'CLOSE'}
+                    style={{ flex:1, marginRight:5 }}
+                    borderColor={Colors.brand.electric}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    padding={15}
+                    onPress={() => walkthrough ? onNext() : onClose()}
+                />
+                <Button
+                    title={walkthrough?'UPDATE MY PHOTO':is_changed ? 'UPDATE':'DONE'}
+                    style={{ flex:3 }}
+                    padding={15}
+                    //disabled={!update_allowed}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={() => handleUpdatePlayer()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default BasicInfoManager

package/src/ProfileManager/Components/BasicStatus.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { View, Image } from 'react-native';
+import { Button, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import type { MyPlayerProps } from '../api/types';
+
+type BasicStatusProps = {
+    player:MyPlayerProps,
+    onClose:() => void,
+    onVerify:() => void
+}
+
+const BasicStatus = ({ onVerify, player, onClose }:BasicStatusProps) => {
+
+
+    const getStatus = (p:MyPlayerProps) => {
+        let errors:string[] = []
+        if(!p.first_name || !p.last_name){ errors.push('A first and last name are required to use real money') }
+        if(p.no_password){ errors.push('A password is required to use real money') }
+        return errors
+    }
+
+    const errors = getStatus(player)
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
+                <View style={{ padding:10 }}>
+                    <Text weight='bold' size={16} color={Colors.brand.midnight}>FREE TO PLAY - ENGAGED!</Text>
+                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>Your profile is ready to go for play money betting and all our FREE TO PLAY games.</Text>
+                </View>  
+                <View style={{ justifyContent:'center', alignItems:'center' }}>
+                    <Image
+                        source={{ uri:'https://res.cloudinary.com/hoabts6mc/image/upload/v1714410165/Welcome_banner_bqu6cc.webp' }}
+                        style={{ width:400, height:400, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ padding:10, backgroundColor:Colors.shades.black_faded_super_heavy, marginTop:-40 }}>
+                    <Text weight='bold' size={16} color={Colors.shades.white}>WANT TO USE REAL MONEY?</Text>
+                    {errors.length == 0 ?
+                    <Text style={{ marginTop:5 }} color={Colors.shades.white} size={14} textAlign='left'>Continue on your journey and complete the verification steps in just a couple minutes.</Text>
+                    :
+                    <View style={{ marginTop:5 }}>
+                        <Text size={14} color={Colors.utility.warning} weight='bold'>FIX THE FOLLOWING BEFORE CONTINUING</Text>
+                        <View style={{ padding:10 }}>
+                            {errors.map((e,i) => {
+                                return (
+                                    <Text style={{ padding:2 }} size={14} color={Colors.utility.warning} weight='bold'>{i+1} - {e}</Text>
+                                )
+                            })}
+                        </View>
+                    </View>
+                    }
+                </View>  
+            </View>
+            <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>
+                <Button
+                    title='CLOSE'
+                    style={{ flex:1, marginRight:5 }}
+                    padding={15}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    title_color={Colors.brand.electric}
+                    onPress={() => onClose()}
+                />
+                <Button
+                    title='VERIFY ACCOUNT'
+                    style={{ flex:3, opacity: errors.length > 0 ? 0.5 : 1 }}
+                    padding={15}
+                    disabled={errors.length > 0}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={() => onVerify()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default BasicStatus

package/src/ProfileManager/Components/CodeRedeem.tsx

@@ -0,0 +1,234 @@
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, View, Image } from 'react-native';
+import { Button, Icons, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps } from '../api/types';
+import { ProfileApi, ProfileHelpers } from '../api';
+
+type CodeRedeemProps = {
+    player:MyPlayerProps,
+    walkthrough?:boolean,
+    onNext:() => void,
+    onClose:() => void
+}
+
+const CodeRedeem = ({ walkthrough, onNext, onClose }:CodeRedeemProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ show_reward, setShowReward ] = useState(false);
+    const [ action_loading, setActionLoading ] = useState(false);
+    const [ data, setData ] = useState<{
+        code_request?:CodeRequestProps,
+        promo?:PromoProps,
+        player_referral?:PlayerReferralProps,
+        reward_option?:RewardOptionProps,
+        referrer?:PublicPlayerProps
+    }>({})
+    const [ code_error, setCodeError ] = useState('');
+    const [ draft_code, setDraftCode ] = useState<string>('') 
+
+    const { code_request, promo, reward_option, referrer } = data;
+
+    useEffect(() => {
+        getDataFromServer()
+    },[])
+
+    const getDataFromServer = async() => {
+        setLoading(true);
+        const request_response = await ProfileApi.getMyCodeDetails();
+        setData({ ...request_response })
+        if(request_response.code_request){ setDraftCode(request_response.code_request.referral_code) }
+        setLoading(false);
+    }
+
+    const handleTryCodeRequest = async() => {
+        if(!draft_code){ setCodeError('Please enter a code') }
+        const request_response = await ProfileApi.tryCodeRequest(draft_code);
+        if(request_response.result == 'failed'){
+            return setCodeError(request_response.error_message ?? 'Unable to use this code')
+        }
+        setCodeError('');
+        return setData({ ...request_response })
+    }
+
+    const handleRedeemCode = async() => {
+        if(!code_request || action_loading){ return }
+        setActionLoading(true)
+        const request_response = await ProfileApi.redeemCode(code_request.code_request_id)
+        setShowReward(true);
+        setTimeout(() => {
+            setData({ ...request_response })
+            setActionLoading(false);
+        }, 2000);
+    }
+
+
+
+    if(loading){
+        return (
+            <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:40, alignSelf:'center' }} />
+        )
+    }
+
+    const is_changed = draft_code && draft_code != code_request?.referral_code ? true : false
+    const try_allowed = draft_code ? true : false
+    const change_allowed = !loading && ProfileHelpers.isChangeCodeAllowed(code_request) ? true : false
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
+            <View style={{ padding:10 }}>
+                <Text weight='bold' size={16} textAlign='left' color={Colors.brand.midnight}>Referral Code</Text>
+                <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>You can find the code used to sign up for your account below. Feel free to change it before redeeming.</Text>
+            </View>
+                <View style={{ padding:10 }}>
+                    <View style={{ backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                            <Icons.USDIcon
+                                color={Colors.brand.midnight}
+                                size={18}
+                            />
+                        </View>
+                        <TextInput
+                            value={draft_code}
+                            style={{ flex:1, borderRadius:0, backroundColor:change_allowed?Colors.shades.white:Colors.shades.shade100 }}
+                            placeholder='Add Code Here'
+                            editable={change_allowed}
+                            placeholderTextColor={Colors.brand.slate}
+                            onChangeText={(text) => setDraftCode(text)}
+                        />
+                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                            {loading ?
+                            <ActivityIndicator size='small' color={Colors.brand.midnight}/>
+                            :
+                            <View>
+                                { !is_changed && code_request ?
+                                <Icons.CheckIcon size={16} color={Colors.utility.success} />
+                                : !code_error ?
+                                <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                                :
+                                <Icons.CloseIcon size={14} color={Colors.utility.error} />
+                                }
+                            </View>
+                            }
+                        </View>
+                    </View>
+                    {code_error ?
+                    <Text style={{ padding:5 }} size={14} color={Colors.utility.error} textAlign='center'>{code_error}</Text>
+                    :<></>}
+                    {is_changed ?
+                        <Button
+                            title='Apply Code'
+                            style={{ marginTop:20, opacity:try_allowed?1:0.5 }}
+                            disabled={!try_allowed}
+                            padding={15}
+                            onPress={() => handleTryCodeRequest()}
+                            title_color={Colors.shades.white}
+                            backgroundColor={Colors.brand.electric}
+                        />
+                        :<></>}
+                    {false ?
+                    <Text size={14} color={Colors.utility.warning}>{'ERROR GOES HERE'}</Text>
+                    :<></>}
+                </View>
+                <View style={{ margin:10, padding:5, backgroundColor:Colors.shades.white, borderRadius:8 }}>
+                    {referrer ?
+                        <View nativeID='referrer_details' style={{ flexDirection:'row', padding:5, borderBottomColor:Colors.shades.shade600, borderBottomWidth:1 }}>
+                            <Image
+                                source={{ uri:referrer.profile_pic }}
+                                style={{ height:50, width:50, borderRadius:8 }}
+                                resizeMode='cover'
+                            />
+                            <View style={{ flex:1, marginLeft:20 }}>
+                                <Text size={16} weight='bold'>Referred By: {referrer.first_name} {referrer.last_name}</Text>
+                                <Text style={{ marginTop:5 }} size={14} weight='regular'>@{referrer.username}</Text>
+                            </View>
+
+                        </View>
+                    :<></>}
+                    {promo ?
+                    <View style={{ marginTop:5, padding:10 }}>
+                        <Text size={16} color={Colors.brand.midnight} weight='bold' textAlign='left'>Code Offer</Text>
+                        <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign='left'>{ProfileHelpers.getReferralDescription(promo)}</Text>
+                        {reward_option ?
+                        <View style={{ marginTop:10, backgroundColor:Colors.highlights.highlight400Faded, padding:10, borderRadius:8 }}>
+                            <Text size={14} color={Colors.brand.midnight} weight='bold'>AWARD REDEEMED: {reward_option.reward_name}</Text>
+                            {code_request && promo && ['referral_sweepstakes','referral_code'].includes(promo.type) ?
+                            <Text style={{ marginTop:4 }} size={14} color={Colors.brand.midnight} weight='bold'>KICKBACK STATUS: {code_request.status == 'fulfilled' ? 'Pending Deposit': 'Kickback received'}</Text>
+                            :<></>}
+                        </View>
+                        :<></>}
+                    </View>
+                    :<></>}
+                </View>
+            </View>
+            <View style={{ flexDirection:'row', padding:10 }}>
+                <Button
+                    title={walkthrough ? 'SKIP' : 'CLOSE'}
+                    style={{ flex:1, marginRight:5 }}
+                    borderColor={Colors.brand.electric}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    padding={15}
+                    onPress={() => walkthrough ? onNext() : onClose()}
+                />
+                {code_request?.status == 'requested' ?
+                    <Button
+                        title='VERIFY MY ACCOUNT'
+                        style={{ flex:3 }}
+                        backgroundColor={Colors.utility.warning}
+                        title_color={Colors.shades.white}
+                        padding={15}
+                        onPress={() => console.log('BERIFY')}
+                    />
+                    :code_request?.status == 'verified' ?
+                    <Button
+                        title='REDEEM CODE'
+                        style={{ flex:3 }}
+                        backgroundColor={Colors.utility.success}
+                        title_color={Colors.shades.white}
+                        padding={15}
+                        onPress={() => handleRedeemCode()}
+                    />
+                    :
+                    <Button
+                        title='CODE REDEEMED'
+                        style={{ flex:3 }}
+                        disabled
+                        backgroundColor={Colors.brand.slate}
+                        title_color={Colors.shades.white}
+                        padding={15}
+                        onPress={() => console.log('REDEEMED!!!')}
+                    />
+                    }
+                </View>
+                {show_reward ?
+                <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
+                    <View style={{ borderRadius:8, backgroundColor:Colors.shades.white, padding:20, minWidth:250, minHeight:200 }}>
+                        {reward_option ?
+                        <View>
+                            <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign='center'>CONGRATULATIONS!</Text>
+                            <Text style={{ marginTop:10 }} size={30} color={Colors.utility.success} weight='bold' textAlign='center'>{reward_option.reward_name}</Text>
+                            <Text style={{ marginTop:10 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign='center'>AWARD RECEIVED</Text>
+                            <Button
+                                title='CLOSE'
+                                title_color={Colors.shades.white}
+                                style={{ marginTop:20 }}
+                                padding={15}
+                                backgroundColor={Colors.brand.electric}
+                                onPress={() => setShowReward(false)}
+                            />
+                        </View>
+                        :
+                        <View>
+                            <Text size={14} color={Colors.brand.midnight} weight='semibold' textAlign='center'>GETTING YOUR REWARD...</Text>
+                            <ActivityIndicator size='large' color={Colors.brand.midnight} style={{alignSelf:'center', marginTop:20 }}/>
+                        </View>
+                        }
+                    </View>
+                    :<></>
+                </View>
+                :<></>}
+        </View>
+    )
+}
+
+export default CodeRedeem

package/src/ProfileManager/Components/DOBManager.tsx

@@ -0,0 +1,154 @@
+import React, { useEffect, useState } from 'react';
+import type { MyPlayerProps } from '../api/types';
+import moment from 'moment-mini';
+import { View, ActivityIndicator } from 'react-native';
+import { Button, Icons, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import { ProfileApi } from '../api';
+
+type DOBManagerProps = {
+    player:MyPlayerProps,
+    walkthrough?:boolean,
+    onNext:() => void,
+    onClose:() => void,
+    onPlayerUpdate:(player:MyPlayerProps) => void
+}
+
+const DOBManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }: DOBManagerProps ) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ dob, setDob ] = useState<string>('');
+    const [ error, setError ] = useState<undefined | string>(undefined)
+    const [ age_error, setAgeError ] = useState<undefined | string>(undefined)
+
+
+    useEffect(() => {
+        if(player.dob){ 
+            let split_dob = player.dob.split('T')
+            if(!split_dob[0]){ return }
+            split_dob = split_dob[0].split('-')
+            let new_date = `${split_dob[1]}/${split_dob[2]}/${split_dob[0]}`
+            let valid = moment(new_date, 'MM/DD/YYYY', true).isValid()
+            if(valid){ setDob(new_date) }
+            else { setDob(moment(player.dob).format('MM/DD/YYYY')) }
+            let age_diff = moment().diff(moment(player.dob), 'years')
+            if(age_diff < 18){
+                setAgeError('Must be over the age of 18 to participate in real money activities on BettorEdge')
+            } else {
+                setAgeError(undefined)
+            }
+        }
+    },[player])
+
+    const isUpdateNeeded = () => {
+        let new_dob = moment(dob).format('MM/DD/YYYY');
+        let old_dob = moment(player.dob).format('MM/DD/YYYY');
+        if(new_dob != old_dob){ return true }
+        return false
+    }
+
+    const handleDOBChange = (val:string) => {
+        let dob_moment = moment(val, 'MM/DD/YYYY', true)
+        if(val != '' && !dob_moment.isValid()){ 
+            setError('Invalid date format') 
+        } else { 
+            setError(undefined) 
+            let age_diff = moment().diff(dob_moment, 'years')
+            if(age_diff < 18){
+                setAgeError('Must be over the age of 18 to participate in real money activities on BettorEdge')
+            } else {
+                setAgeError(undefined)
+            }
+        }
+        setDob(val)
+    }
+
+    const handleUpdatePlayerDOB = async() => {
+        setLoading(true);
+        const new_player = await ProfileApi.updatePlayerDOB(dob);
+        onPlayerUpdate(new_player)
+        setLoading(false);
+    }
+
+    const update_allowed = isUpdateNeeded() && !error
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flex:1, justifyContent:'center'}}>
+                <View style={{ padding:10 }}>
+                    <Text weight='bold' size={16} textAlign='left' color={Colors.brand.midnight}>My Date of Birth</Text>
+                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>In order to participate in real-money gaming you must be over 18.</Text>
+                </View>
+                <View style={{ padding:10, flex:1 }}>
+                    <View style={{ backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                            <Icons.BirthdayIcon
+                                color={Colors.brand.midnight}
+                                size={18}
+                            />
+                        </View>
+                        <TextInput
+                            value={dob}
+                            placeholder='01/01/2005'
+                            editable={player.vouched_status == 'verified' ? false : true}
+                            placeholderTextColor={Colors.brand.slate}
+                            style={{ flex:1, borderRadius:0 }}
+                            onChangeText={(text) => handleDOBChange(text)}
+                        />
+                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                            {loading ?
+                            <ActivityIndicator size='small' color={Colors.brand.midnight}/>
+                            :
+                            <View>
+                                { player.dob && !error ?
+                                <Icons.CheckIcon size={16} color={Colors.utility.success} />
+                                :
+                                <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                                }
+                            </View>
+                            }
+                        </View>
+                    </View>
+                    {error ?
+                    <Text size={14} color={Colors.utility.warning}>{error}</Text>
+                    : age_error ?
+                    <Text size={14} color={Colors.utility.warning}>{age_error}</Text>
+                    :<></>}
+                </View>
+            </View>
+            <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>
+                <Button
+                    title={walkthrough ? 'SKIP' : 'CLOSE'}
+                    style={{ flex:1, marginRight:5 }}
+                    borderColor={Colors.brand.electric}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    padding={15}
+                    onPress={() => walkthrough ? onNext() : onClose()}
+                />
+                {!update_allowed && player.dob ?
+                <Button
+                    title='COMPLETE VERIFICATION'
+                    style={{ flex:3 }}
+                    padding={15}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={() => onNext()}
+                />
+                :
+                <Button
+                    title={'UPDATE'}
+                    style={{ flex:3, opacity:update_allowed?1:0.5 }}
+                    padding={15}
+                    loading={loading}
+                    disabled={!update_allowed}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={() => handleUpdatePlayerDOB()}
+                />
+                }
+            </View>
+        </View>
+    )
+}
+
+export default DOBManager