be-components 0.3.3 → 0.3.5

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>
     )
 }

package/src/ProfileManager/Components/EmailManager.tsx

@@ -1,10 +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 Colors from '../../constants/colors';
 import type { MyPlayerProps } from '../api/types';
-import { view_styles } from '../../constants/styles';
+import { button_styles, view_styles } from '../../constants/styles';
 import { ProfileApi, ProfileHelpers } from '../api';
 
 
@@ -36,6 +36,7 @@ const EmailManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:E
     const is_changed = draft_player.email?.toLowerCase() != player.email?.toLowerCase() ? true : false
     const token_valid = verify_token.token != '' ? true : false
     const update_allowed = valid && is_changed ? true : false
+    
     const handleUpdatePlayer = async() => {
         try {
             setLoading(true);
@@ -55,6 +56,12 @@ const EmailManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:E
         }
     }
 
+    const handleNext = async() => {
+        if(valid && !update_allowed){ return onNext() }
+        if(!update_allowed){ return }
+        await handleUpdatePlayer()
+    }
+
     const handleVerifyEmail = async() => {
         try {
             setVerifyToken({ ...verify_token, loading:true });
@@ -66,7 +73,7 @@ const EmailManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:E
                     visible:false,
                     token: ''
                 })
-                if(onNext){ onNext() }
+                if(walkthrough){ onNext() } else { onClose() }
             }, 1000);
             onPlayerUpdate(player)
         } catch (e) {
@@ -82,12 +89,12 @@ const EmailManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:E
 
     return (
         <View style={{ flex:1 }}>
-                <View style={{ flex:1 }}>
-                <View style={{ padding:10 }}>
-                    <Text weight='bold' size={16} textAlign='left' color={Colors.brand.midnight}>My Email Address</Text>
-                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>A valid email is required to verify your account</Text>
+            <View style={{ flex:1 }}>
+                <View style={{ padding:20 }}>
+                    <Text size={30} color={Colors.brand.midnight} weight='bold'>Confirm Your Email</Text>
+                    <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Confirming your email will help secure your account and is required for real-money activities</Text>
                 </View>
-                <View style={{ padding:10 }}>
+                <View style={{ padding:30 }}>
                     <View style={{ backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
                         <View style={{ paddingLeft:15, paddingRight:15 }}>
                             <Icons.EmailIcon
@@ -121,46 +128,54 @@ const EmailManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:E
                         </View>
                     </View>
                     {error ?
-                    <Text size={14} color={Colors.utility.warning}>{error}</Text>
+                    <Text style={{ marginTop:10 }} size={14} color={Colors.utility.warning} weight='semibold' textAlign='center'>{error}</Text>
                     :<></>}
                     {update_error ?
-                    <Text size={14} color={Colors.utility.warning}>{update_error}</Text>
+                    <Text style={{ marginTop:10 }} size={14} color={Colors.utility.warning} weight='semibold' textAlign='center'>{update_error}</Text>
                     :<></>}
                 </View>
-                </View>
-
-
-            <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>
+            </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={valid && !loading ? button_styles.wizard_valid : button_styles.wizard_invalid}
+                    disabled={!valid || loading}
+                    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={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()}
                 />
-                {!is_changed && player.verified ?
                 <Button
-                    title='CONFIRM MY PHONE'
-                    style={{ flex:3 }}
+                    style={{ flex:3, opacity:valid && !loading && update_allowed ? 1:0.5 }}
+                    disabled={!valid || loading || !update_allowed}
+                    loading={loading}
+                    title='UPDATE'
                     padding={15}
-                    backgroundColor={Colors.utility.success}
                     title_color={Colors.shades.white}
-                    onPress={() => onNext()}
-                />
-                :
-                <Button
-                    title='NEXT'
-                    style={{ flex:3, opacity:update_allowed ? 1 : 0.5 }}
-                    padding={15}
-                    disabled={!update_allowed}
                     backgroundColor={Colors.utility.success}
-                    title_color={Colors.shades.white}
-                    onPress={() => handleUpdatePlayer()}
+                    onPress={async() => {
+                        await handleUpdatePlayer()
+                    }}
                 />
-                }
             </View>
+            }
             {verify_token.visible ?
                 <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
                     <View style={{ padding:20, backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}>

package/src/ProfileManager/Components/PasswordManager.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { View, FlatList } from 'react-native';
+import { View, FlatList, TouchableOpacity } from 'react-native';
 import { Button, Icons, Text, TextInput } from '../../Components';
 import type { MyPlayerProps, PasswordStateProps } from '../api/types';
 import Colors from '../../constants/colors';
 import { ProfileApi, ProfileHelpers } from '../api';
+import { button_styles } from '../../constants/styles';
 
 type PasswordManagerProps = {
     player:MyPlayerProps,
@@ -23,7 +24,7 @@ const PasswordManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
         re_password: ''
     })
  
-    const { loading, change_visible, password, re_password, current_password } = draft_password;
+    const { change_visible, password, re_password, current_password } = draft_password;
 
     useEffect(() => {
         setDraftPlayer(player)
@@ -85,18 +86,18 @@ const PasswordManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
         onPlayerUpdate(player);
         setTimeout(() => {
             setDraftPassword({ current_password:'', change_visible: false, loading:false, password: '', re_password: '' })
-            if(walkthrough){ onNext() }
+            if(walkthrough){ onNext() } else { onClose() }
         }, 500);
     }
 
     return (
         <View style={{ flex:1 }}>
+            <View style={{ padding:20 }}>
+                <Text size={30} color={Colors.brand.midnight} weight='bold'>Secure Your Account</Text>
+                <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Help up secure your account with a password. Once set, you can login using your username and password</Text>
+            </View>
             {draft_player.no_password || change_visible ?
-            <View style={{ flex:1 }}>
-                <View style={{ padding:10 }}>
-                    <Text weight='bold' size={16} textAlign='left' color={Colors.brand.midnight}>{draft_player.no_password ? 'SET MY PASSWORD': 'CHANGE MY PASSWORD'}</Text>
-                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>Help up secure your account with a password. Once set, you can login using your username and password</Text>
-                </View>
+            <View style={{ flex:1, padding:20 }}>
                 {!draft_player.no_password ?
                 <View style={{ margin:10, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
                     <View style={{ paddingLeft:15, paddingRight:15 }}>
@@ -170,27 +171,44 @@ const PasswordManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose
                 </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='EXIT SETUP'
+                    title_color={Colors.utility.error}
+                    backgroundColor='transparent'
+                    onPress={() => onClose()}
+                />
+                <TouchableOpacity 
+                    disabled={!is_valid}
+                    style={is_valid?button_styles.wizard_valid:button_styles.wizard_invalid}
+                    onPress={() => handleSetPassword()}
+                >
+                    <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={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={'NEXT'}
-                    style={{ flex:3, opacity:is_valid ? 1 : 0.5 }}
+                    style={{ flex:3, opacity:is_valid && password?1:0.5 }}
+                    disabled={!is_valid || !password}
+                    title='UPDATE'
                     padding={15}
-                    loading={loading}
-                    disabled={!is_valid}
-                    backgroundColor={Colors.utility.success}
                     title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
                     onPress={() => handleSetPassword()}
                 />
             </View>
+            }
         </View>
     )
 }

package/src/ProfileManager/Components/PhoneManager.tsx

@@ -1,10 +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 Colors from '../../constants/colors';
 import type { MyPlayerProps } from '../api/types';
-import { view_styles } from '../../constants/styles';
+import { button_styles, view_styles } from '../../constants/styles';
 import { ProfileApi, ProfileHelpers } from '../api';
 
 
@@ -61,6 +61,12 @@ const PhoneManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:P
         }
     }
 
+    const handleNext = async() => {
+        if(valid && !update_allowed){ return onNext() }
+        if(!update_allowed){ return }
+        await handleUpdatePlayer()
+    }
+
     const handleVerifyPhone = async() => {
         try {
             setVerifyToken({ ...verify_token, loading:true });
@@ -72,7 +78,7 @@ const PhoneManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:P
                     visible:false,
                     token: ''
                 })
-                if(onNext){ onNext() }
+                if(walkthrough){ onNext() } else { onClose() }
             }, 1000);
             onPlayerUpdate(player)
         } catch (e) {
@@ -90,80 +96,90 @@ const PhoneManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:P
     return (
         <View style={{ flex:1 }}>
             <View style={{ flex:1 }}>
-                    <View style={{ padding:10 }}>
-                        <Text weight='bold' size={16} textAlign='left' color={Colors.brand.midnight}>My Phone Number</Text>
-                        <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>A valid phone number is required to verify your account</Text>
+                    <View style={{ padding:20 }}>
+                        <Text size={30} color={Colors.brand.midnight} weight='bold'>Confirm Your Phone Number</Text>
+                        <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Confirming your phone number will help secure your account and is required for real-money activities</Text>
                     </View>
-                    <View style={{ padding:10 }}>
+                    <View style={{ padding:30 }}>
 
-                    <View style={{ backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
-                        <View style={{ paddingLeft:15, paddingRight:15 }}>
-                            <Icons.PhoneIcon
-                                color={Colors.brand.midnight}
-                                size={18}
+                        <View style={{ backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                            <View style={{ paddingLeft:15, paddingRight:15 }}>
+                                <Icons.PhoneIcon
+                                    color={Colors.brand.midnight}
+                                    size={18}
+                                />
+                            </View>
+                            <TextInput
+                                value={ProfileHelpers.formatPhone(draft_player.phone)}
+                                keyboardType='phone-pad'
+                                style={{ flex:1, borderRadius:0 }}
+                                onChangeText={(text) => handlePhoneChange(text)}
                             />
-                        </View>
-                        <TextInput
-                            value={ProfileHelpers.formatPhone(draft_player.phone)}
-                            keyboardType='phone-pad'
-                            style={{ flex:1, borderRadius:0 }}
-                            onChangeText={(text) => handlePhoneChange(text)}
-                        />
-                        <View style={{ paddingLeft:15, paddingRight:15 }}>
-                            {loading ?
-                            <ActivityIndicator size='small' color={Colors.brand.midnight}/>
-                            :
-                            <View>
-                                { valid ?
-                                <Icons.CheckIcon size={16} color={Colors.utility.success} />
-                                : verify_token.visible ?
-                                <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                            <View style={{ paddingLeft:15, paddingRight:15 }}>
+                                {loading ?
+                                <ActivityIndicator size='small' color={Colors.brand.midnight}/>
                                 :
-                                <Icons.CloseIcon size={14} color={Colors.utility.error} />
+                                <View>
+                                    { valid ?
+                                    <Icons.CheckIcon size={16} color={Colors.utility.success} />
+                                    : verify_token.visible ?
+                                    <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                                    :
+                                    <Icons.CloseIcon size={14} color={Colors.utility.error} />
+                                    }
+                                </View>
                                 }
                             </View>
-                            }
                         </View>
+                        {error ?
+                        <Text style={{ marginTop:10 }} size={14} color={Colors.utility.warning} weight='semibold' textAlign='center'>{error}</Text>
+                        :<></>}
+                        {update_error ?
+                        <Text style={{ marginTop:10 }} size={14} color={Colors.utility.warning} weight='semibold' textAlign='center'>{update_error}</Text>
+                        :<></>}
                     </View>
-                    </View>
-                    {error ?
-                    <Text size={14} color={Colors.utility.warning}>{error}</Text>
-                    :<></>}
-                    {update_error ?
-                    <Text size={14} color={Colors.utility.warning}>{update_error}</Text>
-                    :<></>}
                 </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()}
-                />
-                {!is_changed && player.phone_verified ?
-                <Button
-                    title='SET MY DATE OF BIRTH'
-                    style={{ flex:3 }}
-                    padding={15}
-                    backgroundColor={Colors.utility.success}
-                    title_color={Colors.shades.white}
-                    onPress={() => onNext()}
-                />
+                {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={valid && !loading ? button_styles.wizard_valid : button_styles.wizard_invalid}
+                        disabled={!valid || loading}
+                        onPress={() => handleNext()}
+                        >
+                        <Icons.ChevronIcon size={20} direction='right' color={Colors.brand.midnight}/>
+                    </TouchableOpacity>
+                </View>
                 :
-                <Button
-                    title='UPDATE'
-                    style={{ flex:3, opacity:update_allowed ? 1 : 0.5 }}
-                    padding={15}
-                    disabled={!update_allowed}
-                    backgroundColor={Colors.utility.success}
-                    title_color={Colors.shades.white}
-                    onPress={() => handleUpdatePlayer()}
-                />
+                <View nativeID='action_row' style={{ flexDirection:'row', justifyContent:'space-between', padding:10 }}>
+                    <Button
+                        style={{ flex:1, marginRight:5 }}
+                        title='BACK'
+                        padding={15}
+                        title_color={Colors.brand.electric}
+                        borderWidth={1}
+                        borderColor={Colors.brand.electric}
+                        onPress={() => onClose()}
+                    />
+                    <Button
+                        style={{ flex:3, opacity:valid && !loading && update_allowed ? 1:0.5 }}
+                        disabled={!valid || loading || !update_allowed}
+                        loading={loading}
+                        title='UPDATE'
+                        padding={15}
+                        title_color={Colors.shades.white}
+                        backgroundColor={Colors.utility.success}
+                        onPress={async() => {
+                            await handleUpdatePlayer()
+                        }}
+                    />
+                </View>
                 }
-            </View>
             {verify_token.visible ?
                 <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
                     <View style={{ padding:20, backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}>