be-components 0.1.2 → 0.1.3

package/src/ProfileManager/Components/ProfilePicManager.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Image, View } from "react-native"
+import type { MyPlayerProps } from "../api/types"
+import { Button, Text } from '../../Components';
+import ImageUploader from '../../Components/ImageUploader';
+import Colors from '../../constants/colors';
+import { ProfileApi } from '../api';
+
+type ProfilePicManagerProps = {
+    player:MyPlayerProps,
+    walkthrough?:boolean,
+    onClose:() => void,
+    onNext:() => void,
+    onPlayerUpdate:(player:MyPlayerProps) => void
+}
+
+const ProfilePicManager = ({ player, onPlayerUpdate, walkthrough, onNext, onClose }:ProfilePicManagerProps) => {
+
+    const handleUpdatePic = async(profile_pic:string) => {
+        const new_player = await ProfileApi.updatePlayerPic(profile_pic)
+        onPlayerUpdate(new_player)
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View 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>
+                <View style={{ justifyContent:'center', alignItems:'center' }}>
+                <Image
+                    source={{ uri: player.profile_pic ? player.profile_pic :'https://res.cloudinary.com/hoabts6mc/image/upload/v1714408535/sports_avatar_wdzsxc.webp' }}
+                    style={{ height:400, width:400, borderRadius:4 }}
+                    resizeMode='cover'
+                />
+                <View style={{ position:'absolute', left:0, bottom:0, right: 0, padding:10 }}>
+                    <ImageUploader
+                        public_id={`${player.player_id}_${Math.random()}`}
+                        onStartUpload={() => console.log('STARTED!!!!')}
+                        onFinishUpload={(obj) => handleUpdatePic(obj.secure_url)}
+                    >
+                        <Button
+                            title={player.profile_pic ? 'CHANGE' : 'ADD PICTURE'}
+                            disabled
+                            title_color={Colors.brand.electric}
+                            borderWidth={1}
+                            borderColor={Colors.brand.electric}
+                            padding={15}
+                            onPress={() => console.log('NA')}
+                        />
+                    </ImageUploader>
+                </View>
+                </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={'SET MY PASSWORD'}
+                    style={{ flex:3 }}
+                    padding={15}
+                    //loading={loading}
+                    //disabled={!is_valid}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={() => onNext()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default ProfilePicManager

package/src/ProfileManager/Components/ProfileWelcome.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, Image } from 'react-native';
+import type { MyPlayerProps } from '../api/types';
+import Colors from '../../constants/colors';
+import { Button, Text } from '../../Components';
+
+
+type ProfileWelcomeProps = {
+    player:MyPlayerProps,
+    width:number,
+    onStartSetup: () => void,
+    onClose:() => void
+}
+
+const ProfileWelcome = ({ player, width, onStartSetup, onClose }:ProfileWelcomeProps) => {
+
+    return (
+        <View style={{ flex:1 }}>
+            <Image
+                source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1714506366/Welcome_James_pfzn7z.webp' }}
+                style={{ width, height:width }}
+                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>
+            <View style={{ flexDirection:'row', padding:10 }}>
+                <Button
+                    title='CLOSE'
+                    style={{ flex:1, marginRight:5 }}
+                    borderColor={Colors.brand.electric}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    padding={15}
+                    onPress={() => onClose()}
+                />
+                <Button
+                    title='UPDATE MY INFO'
+                    style={{ flex:3 }}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    padding={15}
+                    onPress={() => onStartSetup()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default ProfileWelcome

package/src/ProfileManager/Components/ProfileWizard.tsx

@@ -0,0 +1,385 @@
+import React, { useEffect, useState } from 'react';
+import { View, FlatList, TouchableOpacity, Image } from 'react-native';
+import type { MyPlayerProps, ProfileLevelProps, ProfileStepProps } from "../api/types"
+import { Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import BasicInfoManager from './BasicInfoManager';
+import PasswordManager from './PasswordManager';
+import EmailManager from './EmailManager';
+import PhoneManager from './PhoneManager';
+import BasicStatus from './BasicStatus';
+import DOBManager from './DOBManager';
+import VouchCard from './VouchCard';
+import ProfilePicManager from './ProfilePicManager';
+import ProfileWelcome from './ProfileWelcome';
+import CodeRedeem from './CodeRedeem';
+
+type ProfileWizardProps = {
+    player:MyPlayerProps,
+    width:number,
+    init_walkthrough?:boolean,
+    profile_attribute?:'basic'|'phone'|'email'|'dob'|'password'|'vouch',
+    onClose:() => void,
+    onSelectLevel:(level:ProfileLevelProps) => void,
+    onPlayerUpdate:(player:MyPlayerProps) => void
+}
+
+const ProfileWizard = ({  player, init_walkthrough, width, onPlayerUpdate, onSelectLevel, onClose }:ProfileWizardProps) => {
+    const [ draft_player, setDraftPlayer ] = useState(player);
+    const [ walkthrough, setWalkthrough ] = useState<boolean | undefined>(false);
+    const [ active_level, setActiveLevel ] = useState<ProfileLevelProps>()
+    const [ active_step, setActiveStep ] = useState<ProfileStepProps>()
+    const [ groups, setGroups ] = useState([
+        { 
+            priority: 1, key: 'profile', name: 'My Profile', profile_levels: [
+                {
+                    num: 1,
+                    label: 'Basic Information',
+                    description: 'Just enough information to get started playing our free to play games',
+                    identifier: 'basic',
+                    tracked:true,
+                    pct_complete: 0,
+                    profile_steps: [
+                        { num:1, check: 'basic', label: 'Basic Info', description: `Let's get some basic information about you!`, complete:false },
+                        { num:2, check: 'profile_pic', label: 'My Picture', description: `We initially created this based on your username using AI! Change it here!`, complete:false },
+                        { num:3, check: 'password', label: 'Password', description: `Lets set a password for additional security`, complete:false },
+                        { num:4, check: 'basic_review', label: 'Review', description: `Review your status!`, complete:false }
+                    ]
+                },
+                {
+                    num: 2,
+                    label: 'Security & Verification',
+                    description: 'Additional information needed to use real-money',
+                    identifier: 'verify',
+                    tracked:true,
+                    pct_complete: 0,
+                    profile_steps: [
+                        { num:1, check: 'email', label: 'Email', description: `Lets make sure you can access your account in case you forget your password`, complete:false },
+                        { num:2, check: 'phone', label: 'Phone', description: `Lets make sure you can access your account in case you forget your password`, complete:false },
+                        { num:3, check: 'dob', label: 'Date of Birth', description: `We need to ensure you are at least 18 to play`, complete:false },
+                        { num:4, check: 'vouch', label: 'Verify', description: `We need to ensure you are at least 18 to play`, complete:false },
+                        { num:5, check: 'code', label: 'Promo', description: `Lets get you started with some promo bucks!`, complete:false },
+        
+                    ]
+                }
+            ] 
+        },
+        {
+            priority: 2, key: 'preferences', name: 'Preferences', profile_levels: [
+                {
+                    num: 1,
+                    label: 'Profile Settings',
+                    description: 'Set your profile settings',
+                    identifier: 'settings',
+                    pct_complete: 1,
+                    tracked:false,
+                    profile_steps: [
+                        { num: 1, check: 'preferences', label: 'Profile Preferences', description: 'Set your profile preferences like unit size and more', complete: true },
+                        { num: 2, check: 'notification', label: 'Notification Settings', description: 'Set how and when you would like to be notified', complete:true },                        
+                    ]
+
+                }
+            ]
+        }
+    ])
+
+    useEffect(() => {
+        if(!player){ return }
+        setWalkthrough(init_walkthrough)
+        setDraftPlayer(player)
+        const groups = setupSteps(player)
+        setGroups(groups);
+    },[player])
+
+    const getStepColor = (step:ProfileStepProps, active?:boolean) => {
+        if(step.complete){ 
+            if(active){ return Colors.highlights.highlight400 }
+            return Colors.highlights.highlight400Faded 
+        } else {
+            if(active){ return Colors.brand.electric }
+            return Colors.shades.shade600
+        }
+    }
+
+
+    const setupSteps = (pl:MyPlayerProps):any[] => {
+
+        let new_groups = groups.map(g => {
+            g.profile_levels = g.profile_levels.map(level => {
+                level.profile_steps = level.profile_steps.map(s => {
+                    switch(s.check){
+                        case 'basic_review':
+                            if(!pl.no_password && !pl.auto_generated && pl.first_name && pl.last_name){ return { ...s, complete:true } }
+                            return s
+                        case 'basic':
+                            if(pl.first_name && pl.last_name){ return { ...s, complete:true } }
+                            return s
+                        case 'profile_pic':
+                            if(pl.profile_pic && pl.profile_pic != ''){ return { ...s, complete:true } }
+                            return s
+                        case 'password':
+                            if(!pl.no_password){ return { ...s, complete:true } }
+                            return s
+                        case 'email':
+                            if(pl.verified){ return { ...s, complete: true } }
+                            return s
+                        case 'dob':
+                            if(pl.dob && pl.dob != ''){ return { ...s, complete:true } }
+                            return s
+                        case 'vouch':
+                            if(pl.vouched_status == 'verified'){ return { ...s, complete:true } }
+                            return s
+                        case 'phone':
+                            if(pl.phone_verified){ return { ...s, complete: true } }
+                            return s
+                        default: return s
+                    }
+                })
+                if(level.tracked){
+                    let pct_complete = level.profile_steps.filter(s => s.complete).length / level.profile_steps.length
+                    level.pct_complete = pct_complete
+                }
+                return level
+            })
+            return g
+        })
+        
+        return new_groups
+    }
+
+    const renderLevels = (data: { item: ProfileLevelProps, index:number}) => {
+        return (
+            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }} onPress={() => {
+                setActiveLevel(data.item)
+                setActiveStep(data.item.profile_steps[0])
+            }}>
+                <View style={{ height:20, width:20, borderRadius:100, borderWidth:1, borderColor:Colors.brand.slate, backgroundColor:Colors.shades.white, justifyContent:'center', alignItems:'center' }}>
+                    {data.item.pct_complete == 1 ?
+                    <Icons.CheckIcon color={Colors.utility.success} size={14} />
+                    :<></>}
+                </View>
+                <View style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                    <Text size={16} color={Colors.brand.midnight} weight='bold'>{data.item.label}</Text>
+                    <Text style={{ marginTop:3 }} size={14} color={Colors.brand.midnight} weight='regular'>{data.item.description}</Text>
+                </View>
+                {data.item.pct_complete ?
+                <View style={{ marginRight:10 }}>
+                    <Text size={14} color={Colors.brand.midnight}>{(data.item.pct_complete*100).toFixed()}%</Text>
+                </View>
+                :<></>}
+                <Icons.ChevronIcon direction='right' size={10} color={Colors.brand.midnight} />
+            </TouchableOpacity>
+        )
+    }
+
+    const renderGroups = (data: { item:any, index:number }) => {
+        return (
+            <View>
+                <View style={{ padding: 10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                    <Text size={18} color={Colors.brand.midnight} weight='bold'>{data.item.name}</Text>
+                </View>
+                <FlatList
+                    data={data.item.profile_levels}
+                    renderItem={renderLevels}
+                    keyExtractor={(item) => item.identifier}
+                />
+            </View>
+        )
+    }
+
+    const renderSteps = (data:{ item: ProfileStepProps, index:number }) => {
+        const active = data.item.check == active_step?.check ? true : false
+        if(!active_level){ return <></> }
+        return (
+            <TouchableOpacity style={{ padding:10, width: width / active_level?.profile_steps.length, backgroundColor:getStepColor(data.item, active) }} onPress={() => setActiveStep(data.item)}>
+                <Text size={14} color={active?Colors.shades.white:Colors.brand.midnight} weight='bold' textAlign='center'>{data.item.label}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+
+    return (
+        <View style={{ flex:1 }}>
+            {!active_level ?
+            <View style={{ flex:1 }}>
+                <View style={{ flex:1 }}>
+                    <FlatList
+                        data={groups}
+                        renderItem={renderGroups}
+                        keyExtractor={(item) => item.key}
+                    />
+                </View>
+                <View style={{ justifyContent:'center', alignItems:'center' }}>
+                    <Image
+                        source={{ uri: require('../../Assets/images/powered_by_be.webp') }}
+                        style={{ width: width * 0.6, height: (width*0.6) / 3 }}
+                        resizeMode='center'
+                    />
+                </View>
+            </View>
+            :
+            <View style={{ flex:1 }}>
+            <TouchableOpacity style={{  flexDirection:'row', alignItems:'center', padding:10, borderTopWidth:2, borderColor:Colors.shades.shade600 }} onPress={() => {
+                setActiveLevel(undefined)
+                setActiveStep(undefined)
+            }}>
+                <Icons.ChevronIcon direction='left' size={10} color={Colors.brand.midnight} />
+                <View style={{ flex:1, marginLeft:20, marginRight:20 }}>
+                    <Text size={16} color={Colors.brand.midnight} weight='bold'>{active_level.label}</Text>
+                    <Text style={{ marginTop:3 }} size={14} color={Colors.brand.midnight} weight='regular'>{active_level.description}</Text>
+                </View>
+                {active_level.pct_complete ?
+                <View>
+                    <Text size={14} color={Colors.brand.midnight}>{(active_level.pct_complete*100).toFixed()}%</Text>
+                </View>
+                :<></>}
+            </TouchableOpacity>
+            <View style={{ borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:22 }}>
+                <FlatList
+                    data={active_level?.profile_steps}
+                    renderItem={renderSteps}
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    keyExtractor={(item) => item.check}
+                />
+            </View>
+            <View style={{ flex:1 }}>
+                {!active_step?
+                <ProfileWelcome
+                    player={draft_player}
+                    width={width}
+                    onStartSetup={() => {
+                        if(!active_level){ return }
+                        setWalkthrough(true);
+                        let next_step = active_level.profile_steps[0]
+                        setActiveStep(next_step)
+                    }}
+                    onClose={() => onClose()}
+                />
+                :active_step.check == 'basic' ?
+                <BasicInfoManager
+                    player={draft_player}
+                    walkthrough={walkthrough}
+                    onClose={onClose}
+                    onNext={() => {
+                        if(!active_level){ return }
+                        let next_step = active_level.profile_steps[1]
+                        setActiveStep(next_step)
+                    }}
+                    onPlayerUpdate={(player) => {
+                        onPlayerUpdate(player)
+                    }}
+                />
+                :active_step.check == 'profile_pic'?
+                <ProfilePicManager
+                    player={draft_player}
+                    walkthrough={walkthrough}
+                    onClose={onClose}
+                    onNext={() => {
+                        if(!active_level){ return }
+                        let next_step = active_level.profile_steps[2]
+                        setActiveStep(next_step)
+                    }}
+                    onPlayerUpdate={(player) => onPlayerUpdate(player)}
+                />
+                :active_step.check == 'password' ?
+                <PasswordManager
+                    player={draft_player}
+                    onClose={onClose}
+                    walkthrough={walkthrough}
+                    onNext={() => {
+                        if(!active_level){ return }
+                        let next_step = active_level.profile_steps[3]
+                        setActiveStep(next_step)
+                    }}
+                    onPlayerUpdate={(player) => onPlayerUpdate(player)}
+                />
+                :active_step.check == 'email' ?
+                <EmailManager
+                    player={draft_player}
+                    walkthrough={walkthrough}
+                    onClose={onClose}
+                    onNext={() => {
+                        if(!active_level){ return }
+                        let next_step = active_level.profile_steps[1]
+                        setActiveStep(next_step)
+                    }}
+                    onPlayerUpdate={(player) => onPlayerUpdate(player)}
+                />
+                :active_step.check == 'phone' ?
+                <PhoneManager
+                    player={draft_player}
+                    onClose={onClose}
+                    walkthrough={walkthrough}
+                    onNext={() => {
+                        if(!active_level){ return }
+                        let next_step = active_level.profile_steps[2]
+                        setActiveStep(next_step)
+                    }}
+                    onPlayerUpdate={(player) => onPlayerUpdate(player)}
+                />
+                :active_step.check == 'basic_review' ?
+                <BasicStatus
+                    player={draft_player}
+                    onClose={onClose}
+                    onVerify={() => {
+                        let new_level = groups[0]?.profile_levels[1]
+                        if(!new_level){return }
+                        setActiveLevel(new_level)
+                        onSelectLevel(new_level)
+                        setActiveStep(new_level.profile_steps[0])
+                    }}
+                />
+                :active_step.check == 'dob' ?
+                <DOBManager
+                    player={draft_player}
+                    onClose={onClose}
+                    walkthrough={walkthrough}
+                    onNext={() => {
+                        if(!active_level){ return }
+                        let next_step = active_level.profile_steps[3]
+                        setActiveStep(next_step)
+                    }}
+                    onPlayerUpdate={(player) => setDraftPlayer(player)}
+                />
+                :active_step.check == 'vouch' ?
+                <VouchCard
+                    player={draft_player}
+                    onClose={onClose}
+                />
+                :active_step.check == 'code' ?
+                <CodeRedeem
+                    player={draft_player}
+                    onNext={() => console.log('hey')}
+                    onClose={onClose}
+                    
+                />
+                :<></>}
+            </View>
+            </View>
+            }
+        </View>
+    )
+}
+
+export default ProfileWizard
+
+
+
+
+/*
+        {
+            num: 3,
+            label: 'Advanced',
+            description: 'Lets get your wallet ready to deposit / withdraw',
+            identifier: 'advance',
+            active_step: 'basic',
+            pct_complete: 0,
+            profile_steps: [
+                { num:1, check: 'deposit', label: 'Deposit', description: `Lets make your first deposit so you can use real money!`, complete:false },
+                { num:2, check: 'order', label: 'Order', description: `Create your first bet`, complete:false },
+                { num:3, check: 'pwa', label: 'Get the App', description: `Lets get the app installed`, complete:false },
+                { num:4, check: 'notifications', label: 'Get Notified', description: `Lets set up your notifications`, complete:false },
+            ]
+        }
+*/