be-components 0.3.2 → 0.3.4

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

package/src/ProfileManager/Components/ProfilePicManager.tsx

@@ -1,32 +1,37 @@
-import React from 'react';
-import { Image, View, ScrollView } from "react-native"
+import React, { useState } from 'react';
+import { Image, View, ScrollView, TouchableOpacity } from "react-native"
 import type { MyPlayerProps } from "../api/types"
-import { Button, Text } from '../../Components';
+import { Button, Icons, Text } from '../../Components';
 import ImageUploader from '../../Components/ImageUploader';
 import Colors from '../../constants/colors';
 import { ProfileApi } from '../api';
+import { button_styles } from '../../constants/styles';
 
 type ProfilePicManagerProps = {
-    player:MyPlayerProps,
+    player:MyPlayerProps, 
     walkthrough?:boolean,
     onClose:() => void,
     onNext:() => void,
     onPlayerUpdate:(player:MyPlayerProps) => void
 }
 
+
 const ProfilePicManager = ({ player, onPlayerUpdate, walkthrough, onNext, onClose }:ProfilePicManagerProps) => {
+    const [ loading, setLoading ] = useState(false);
 
     const handleUpdatePic = async(profile_pic:string) => {
         const new_player = await ProfileApi.updatePlayerPic(profile_pic)
+        setLoading(false);
         onPlayerUpdate(new_player)
     }
 
+
     return (
         <View style={{ flex:1 }}>
             <ScrollView style={{ flex:1 }}>
-                <View style={{ padding:10 }}>
-                    <Text size={16} weight='bold' color={Colors.brand.midnight}>MY PROFILE PICTURE</Text>
-                    <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight}>Your profile picture is how users will see you in leaderboards and activity feeds.</Text>
+                <View style={{ padding:20 }}>
+                    <Text size={30} color={Colors.brand.midnight} weight='bold'>Update Your Picture</Text>
+                    <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>Your profile picture is how users will see you in leaderboards and activity feeds.</Text>
                 </View>
                 <View style={{ justifyContent:'center', alignItems:'center' }}>
                 <Image
@@ -37,12 +42,14 @@ const ProfilePicManager = ({ player, onPlayerUpdate, walkthrough, onNext, onClos
                 <View style={{ position:'absolute', left:0, bottom:0, right: 0, padding:10 }}>
                     <ImageUploader
                         public_id={`${player.player_id}_${Math.random()}`}
-                        onStartUpload={() => console.log('STARTED!!!!')}
+                        onStartUpload={() => setLoading(true)}
+                        onCancelUpload={() => setLoading(false)}
                         onFinishUpload={(obj) => handleUpdatePic(obj.secure_url)}
                     >
                         <Button
                             title={player.profile_pic ? 'CHANGE' : 'ADD PICTURE'}
                             disabled
+                            loading={loading}
                             title_color={Colors.brand.electric}
                             borderWidth={1}
                             borderColor={Colors.brand.electric}
@@ -53,27 +60,35 @@ const ProfilePicManager = ({ player, onPlayerUpdate, walkthrough, onNext, onClos
                 </View>
                 </View>
             </ScrollView>
-            <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()}
                 />
+                <TouchableOpacity 
+                    style={loading?button_styles.wizard_invalid:button_styles.wizard_valid}
+                    onPress={() => onNext()}
+                    disabled={loading}
+                    >
+                    <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?'SET MY PASSWORD':'DONE'}
-                    style={{ flex:3 }}
+                    style={{ flex:1 }}
+                    title='BACK'
                     padding={15}
-                    //loading={loading}
-                    //disabled={!is_valid}
-                    backgroundColor={Colors.utility.success}
-                    title_color={Colors.shades.white}
-                    onPress={() => onNext()}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    onPress={() => onClose()}
                 />
             </View>
+            }
         </View>
     )
 }

package/src/ProfileManager/Components/ProfileWelcome.tsx

@@ -1,38 +1,57 @@
 import React from 'react';
 import { View, Image, ScrollView } from 'react-native';
-import type { MyPlayerProps } from '../api/types';
+import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps } from '../api/types';
 import Colors from '../../constants/colors';
-import { Button, Text } from '../../Components';
+import { Button, Icons, Text } from '../../Components';
+import { ProfileHelpers } from '../api';
+import type { PublicPlayerProps } from '../../types';
+import { view_styles } from '../../constants/styles';
 
 
 type ProfileWelcomeProps = {
     player:MyPlayerProps,
     width:number,
     onStartSetup: () => void,
+    code_details: {
+        code_request?:CodeRequestProps,
+        referrer?:PublicPlayerProps,
+        promo?:PromoProps,
+        player_referral?:PlayerReferralProps
+    }
     onClose:() => void
 }
 
-const ProfileWelcome = ({ player, width, onStartSetup, onClose }:ProfileWelcomeProps) => {
+const ProfileWelcome = ({ player, code_details, width, onStartSetup, onClose }:ProfileWelcomeProps) => {
 
+    const { code_request, promo, referrer } = code_details;
     return (
         <View style={{ flex:1 }}>
             <ScrollView style={{ flex:1 }}>
+                <View style={{ padding:20 }}>
+                    <Text size={30} color={Colors.brand.midnight} weight='bold'>Welcome @{player.username}!</Text>
+                    <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>We are so glad that you found us! Use the setup wizard to complete your account setup.</Text>
+                </View>
                 <Image
                     source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1714506366/Welcome_James_pfzn7z.webp' }}
-                    style={{ width, height:width }}
+                    style={{ width, height:width, opacity:0.6 }}
                     resizeMode='cover'
                 />
-                <View style={{ marginTop:-50, flex:1, backgroundColor:Colors.shades.black_faded_heavy }}>
-                    <View style={{ padding:10 }}>
-                        <Text size={24} color={Colors.shades.white} weight='bold'>Welcome @{player.username}</Text>
-                        <Text style={{ marginTop:10 }} size={14} color={Colors.shades.white} weight='bold'>We have randomly generated this username for you. Finish setting up your profile to change it!</Text>
-                    </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 style={{ flexDirection:'row', padding:10 }}>
                 <Button
-                    title='CLOSE'
-                    style={{ flex:1, marginRight:5 }}
+                    title={`DO IT LATER`}
+                    style={{ flex:3, marginRight:5 }}
                     borderColor={Colors.brand.electric}
                     title_color={Colors.brand.electric}
                     borderWidth={1}
@@ -40,8 +59,8 @@ const ProfileWelcome = ({ player, width, onStartSetup, onClose }:ProfileWelcomeP
                     onPress={() => onClose()}
                 />
                 <Button
-                    title='UPDATE MY INFO'
-                    style={{ flex:3 }}
+                    title='SET UP MY ACCOUNT'
+                    style={{ flex:5 }}
                     backgroundColor={Colors.utility.success}
                     title_color={Colors.shades.white}
                     padding={15}