be-components 0.3.2 → 0.3.4

package/src/Components/LinearDiagnal.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View, StyleSheet } from "react-native"
+import { useState } from "react";
+import LinearGradient from "react-native-linear-gradient";
+import Text from "./Text";
+import Colors from '../constants/colors';
+
+type LinearDiagnalProps = {
+    label?: string,
+    label_size?:number,
+    label_color?:string,
+    left_color:string,
+    right_color:string
+    no_buffer?:boolean,
+    style?:any,
+    children?:any
+}
+const LinearDiagnal = ({ left_color, right_color, no_buffer, label, label_size, label_color, style, children }:LinearDiagnalProps) => {
+    const [ height, setHeight ] = useState(0);
+    return (
+        <View style={{ flexDirection:'row' }} onLayout={(ev) => {
+            const { height } = ev.nativeEvent.layout
+            setHeight(height)
+        }}>
+            <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={[left_color, right_color]} style={{ flex:4, padding:10, ...style }}>
+                {label ?
+                <Text size={label_size ?? 14} color={label_color ?? Colors.shades.white} weight='bold'>{label}</Text>
+                :<></>}
+                {children}
+            </LinearGradient>
+            <View style={{ ...local_styles.triangleCorner, flex:1/2, marginLeft:-1, borderTopWidth:height, borderTopColor:right_color }} />
+            {!no_buffer ?
+            <View style={{ flex:1 }}/>
+            :<></>}
+        </View>
+    )
+}
+
+const local_styles = StyleSheet.create({
+    triangleCorner: {
+        width: 0,
+        height: 0,
+        backgroundColor: "transparent",
+        borderStyle: "solid",
+        borderRightWidth: 20,
+        borderTopWidth: 20,
+        borderRightColor: "transparent",
+        //borderTopColor: "red",
+      }
+})
+
+export default LinearDiagnal

package/src/ProfileManager/Components/BasicInfoManager.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator } from 'react-native';
+import { View, ActivityIndicator, TouchableOpacity } 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';
+import { button_styles } from '../../constants/styles';
 
 type BasicInfoManagerProps = {
     player:MyPlayerProps,
@@ -15,6 +16,7 @@ type BasicInfoManagerProps = {
 
 const BasicInfoManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:BasicInfoManagerProps) => {
     const [ draft_player, setDraftPlayer ] = useState<MyPlayerProps>(player)
+    const [ loading, setLoading ] = useState(false);
     const [ username_valid, setUsernameValid ] = useState<{
         loading:boolean,
         valid:boolean
@@ -30,53 +32,64 @@ const BasicInfoManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
 
     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
+    const updatePlayer = async() => {
+        if(loading){ return }
+        setLoading(true)
         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()){
+        if(player.username.toLowerCase() != draft_player.username.toLowerCase()){
+            if(!username_valid.valid){ return }
             new_player = await ProfileApi.updatePlayerUsername(draft_player.username)
         }
         onPlayerUpdate(new_player)
-        if(walkthrough){ onNext() } else { onClose() }
+        setLoading(false);
+        return
+    }
+
+    const handleNext = async() => {
+        if(!is_changed){ return onNext() }
+        await updatePlayer()
+        return onNext()
     }
 
+    const allow_next = username_valid.valid && !username_valid.loading && draft_player.first_name && draft_player.last_name ? true : false
 
     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>
+                <View style={{ padding:20 }}>
+                    <Text size={30} color={Colors.brand.midnight} weight='bold'>Let's start with the basics</Text>
+                    <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>You can change this later, but will be required to verify your account.</Text>
+                </View>
+                <View style={{ padding:30 }}>
+                    <Text weight='bold' size={18} color={Colors.brand.midnight}>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={{ marginTop:20, 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}/>
@@ -89,67 +102,88 @@ const BasicInfoManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
                             }
                         </View>
                         }
+                        </View>
                     </View>
                 </View>
-                
 
-                <View style={{ padding:10 }}>
-                    <Text weight='bold' size={16} textAlign='left' color={Colors.brand.midnight}>MY NAME</Text>
+                <View style={{ padding:30 }}>
+                    <Text weight='bold' size={18} textAlign='left' color={Colors.brand.midnight}>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 style={{ marginTop:20, 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>
-                    <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 style={{ marginTop: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>
-                    <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>
+            {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 
+                    disabled={!allow_next}
+                    style={allow_next ? button_styles.wizard_valid : button_styles.wizard_invalid}
+                    onPress={() => handleNext()}
+                    >
+                    <Icons.ChevronIcon size={20} direction='right' color={Colors.brand.midnight}/>
+                </TouchableOpacity>
             </View>
-            <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>
+            :
+            <View nativeID='action_row' style={{ flexDirection:'row', justifyContent:'space-between', padding:10 }}>
                 <Button
-                    title={walkthrough ? 'SKIP' : 'CLOSE'}
                     style={{ flex:1, marginRight:5 }}
-                    borderColor={Colors.brand.electric}
+                    title='BACK'
+                    padding={15}
                     title_color={Colors.brand.electric}
                     borderWidth={1}
-                    padding={15}
-                    onPress={() => walkthrough ? onNext() : onClose()}
+                    borderColor={Colors.brand.electric}
+                    onPress={() => onClose()}
                 />
                 <Button
-                    title={walkthrough?'UPDATE MY PHOTO':is_changed ? 'UPDATE':'DONE'}
-                    style={{ flex:3 }}
+                    style={{ flex:3, opacity:allow_next && is_changed?1:0.5 }}
+                    disabled={!is_changed || !allow_next}
+                    title='UPDATE'
                     padding={15}
-                    //disabled={!update_allowed}
-                    backgroundColor={Colors.utility.success}
                     title_color={Colors.shades.white}
-                    onPress={() => handleUpdatePlayer()}
+                    backgroundColor={Colors.utility.success}
+                    onPress={async() => {
+                        await updatePlayer()
+                        onClose()
+                    }}
                 />
             </View>
+            }
         </View>
     )
 }

package/src/ProfileManager/Components/BasicStatus.tsx

@@ -1,17 +1,27 @@
 import React from 'react';
 import { View, Image, ScrollView } from 'react-native';
-import { Button, Text } from '../../Components';
+import { Button, Icons, Text } from '../../Components';
 import Colors from '../../constants/colors';
-import type { MyPlayerProps } from '../api/types';
+import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps } from '../api/types';
+import type { PublicPlayerProps } from '../../types';
+import { view_styles } from '../../constants/styles';
+import { ProfileHelpers } from '../api';
 
 type BasicStatusProps = {
     player:MyPlayerProps,
+    code_details: {
+        code_request?:CodeRequestProps,
+        referrer?:PublicPlayerProps,
+        promo?:PromoProps,
+        player_referral?:PlayerReferralProps
+    }
     onClose:() => void,
     onVerify:() => void
 }
 
-const BasicStatus = ({ onVerify, player, onClose }:BasicStatusProps) => {
+const BasicStatus = ({ onVerify, code_details, player, onClose }:BasicStatusProps) => {
 
+    const { code_request, promo, referrer } = code_details;
 
     const getStatus = (p:MyPlayerProps) => {
         let errors:string[] = []
@@ -25,10 +35,7 @@ const BasicStatus = ({ onVerify, player, onClose }:BasicStatusProps) => {
     return (
         <View style={{ flex:1 }}>
             <ScrollView 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' }}
@@ -36,28 +43,52 @@ const BasicStatus = ({ onVerify, player, onClose }:BasicStatusProps) => {
                         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 style={{ padding:10, backgroundColor:Colors.shades.black_faded_super_heavy, marginTop:-100 }}>
+                    <View style={{ padding:10, flexDirection:'row' }}>
+                        <Icons.CheckCirlceIcon color={Colors.utility.success} size={32}/>
+                        <View style={{ flex:1, marginLeft:20 }}>
+                            <Text weight='bold' size={16} color={Colors.shades.white}>FREE TO PLAY - ENGAGED!</Text>
+                            <Text style={{ marginTop:5 }} color={Colors.shades.white} size={14} textAlign='left'>Your profile is ready to go for play money betting and all our FREE TO PLAY games.</Text>
+                        </View>
+                    </View>  
+                    <View style={{ padding:10, flexDirection:'row' }}>
+                        <Icons.AlertIcon color={Colors.utility.warning} size={32}/>
+                        <View style={{ flex:1, marginLeft:20 }}>
+
+                        <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>  
             </ScrollView>
+            {code_request && promo ?
+            <View style={{ margin:15, marginTop:-50, flexDirection:'row', backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}>
+                <View style={{ padding:10, justifyContent:'center' }}>
+                    <Icons.GiftIcon size={40} color={Colors.incentive.gold} />
+                </View>
+                <View style={{flex:1, backgroundColor:Colors.incentive.gold_faded, padding:10 }}>
+                    <Text style={{ paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }} size={16} color={Colors.brand.midnight} weight='bold'>@{referrer?.username} has a gift for you</Text>
+                    <Text style={{ paddingTop:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>{ProfileHelpers.getReferralDescription(promo)}</Text>
+                </View>
+            </View>
+            :<></>}
             <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>
                 <Button
-                    title='CLOSE'
-                    style={{ flex:1, marginRight:5 }}
+                    title='DO IT LATER'
+                    style={{ flex:3, marginRight:5 }}
                     padding={15}
                     borderWidth={1}
                     borderColor={Colors.brand.electric}
@@ -66,7 +97,7 @@ const BasicStatus = ({ onVerify, player, onClose }:BasicStatusProps) => {
                 />
                 <Button
                     title='VERIFY ACCOUNT'
-                    style={{ flex:3, opacity: errors.length > 0 ? 0.5 : 1 }}
+                    style={{ flex:5, opacity: errors.length > 0 ? 0.5 : 1 }}
                     padding={15}
                     disabled={errors.length > 0}
                     backgroundColor={Colors.utility.success}

package/src/ProfileManager/Components/DOBManager.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import type { MyPlayerProps } from '../api/types';
 import moment from 'moment-mini';
-import { View, ActivityIndicator } from 'react-native';
+import { View, ActivityIndicator, TouchableOpacity } from 'react-native';
 import { Button, Icons, Text, TextInput } from '../../Components';
 import Colors from '../../constants/colors';
 import { ProfileApi } from '../api';
+import { button_styles } from '../../constants/styles';
 
 type DOBManagerProps = {
     player:MyPlayerProps,
@@ -62,24 +63,31 @@ const DOBManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }: DO
         setDob(val)
     }
 
+    const update_allowed = isUpdateNeeded() && !error
+
     const handleUpdatePlayerDOB = async() => {
         setLoading(true);
         const new_player = await ProfileApi.updatePlayerDOB(dob);
         onPlayerUpdate(new_player)
         setLoading(false);
-        if(walkthrough){ onNext() }
     }
 
-    const update_allowed = isUpdateNeeded() && !error
+    const handleNext = async() => {
+        if(!error && !isUpdateNeeded()){ return onNext() }
+        if(!update_allowed){ return }
+        await handleUpdatePlayerDOB()
+        return onNext()
+    }
+
 
     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 style={{ padding:20 }}>
+                    <Text size={30} color={Colors.brand.midnight} weight='bold'>Date Of Birth</Text>
+                    <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>In order to participate in real-money gaming you must be over 18.</Text>
                 </View>
-                <View style={{ padding:10, flex:1 }}>
+                <View style={{ padding:30, flex:1 }}>
                     <View style={{ backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
                         <View style={{ paddingLeft:15, paddingRight:15 }}>
                             <Icons.BirthdayIcon
@@ -116,38 +124,48 @@ const DOBManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }: DO
                     :<></>}
                 </View>
             </View>
-            <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>
+            {walkthrough ?
+            <View nativeID='action_row' style={{ flexDirection:'row', justifyContent:'space-between', 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()}
+                    title='EXIT SETUP'
+                    title_color={Colors.utility.error}
+                    backgroundColor='transparent'
+                    onPress={() => onClose()}
                 />
-                {!update_allowed && player.dob ?
+                <TouchableOpacity 
+                    style={!error && !loading ? button_styles.wizard_valid : button_styles.wizard_invalid}
+                    disabled={error || loading ? true : false}
+                    onPress={() => handleNext()}
+                    >
+                    <Icons.ChevronIcon size={20} direction='right' color={Colors.brand.midnight}/>
+                </TouchableOpacity>
+            </View>
+            :
+            <View nativeID='action_row' style={{ flexDirection:'row', justifyContent:'space-between', padding:10 }}>
                 <Button
-                    title='COMPLETE VERIFICATION'
-                    style={{ flex:3 }}
+                    style={{ flex:1, marginRight:5 }}
+                    title='BACK'
                     padding={15}
-                    backgroundColor={Colors.utility.success}
-                    title_color={Colors.shades.white}
-                    onPress={() => onNext()}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    onPress={() => onClose()}
                 />
-                :
                 <Button
-                    title={'UPDATE'}
                     style={{ flex:3, opacity:update_allowed?1:0.5 }}
-                    padding={15}
-                    loading={loading}
                     disabled={!update_allowed}
-                    backgroundColor={Colors.utility.success}
+                    loading={loading}
+                    title='UPDATE'
+                    padding={15}
                     title_color={Colors.shades.white}
-                    onPress={() => handleUpdatePlayerDOB()}
+                    backgroundColor={Colors.utility.success}
+                    onPress={async() => {
+                        await handleUpdatePlayerDOB()
+                        //onClose()
+                    }}
                 />
-                }
             </View>
+            }
         </View>
     )
 }