be-components 6.7.2 → 6.7.4

package/src/Group/components/ManageGroupForm.tsx

@@ -6,8 +6,9 @@ import { Icons, Switch, Toggle } from '../../Components';
 import { GroupApi } from '../api';
 import ImageUploader from '../../Components/ImageUploader';
 import { useColors } from '../../constants/useColors';
+import { showConfirmAlert } from '../../Components/ConfirmAlert';
 
-const sections = ['header','toggle','image','information', 'settings', 'invite_button', 'invite', 'options']
+const sections = ['header','toggle','image','information', 'danger', 'settings', 'invite_button', 'invite', 'options']
 type ManageGroupFormProps = {
     group:GroupProps,
     onUpdateGroup:(group:GroupProps) => void,
@@ -46,6 +47,27 @@ const ManageGroupForm = ({ group, onFocusPosition, onUpdateGroup, onClose, onInv
         setState({ ...manage_state, loading:false })
     }
 
+    const handleConfirmDelete = () => {
+        showConfirmAlert('Are you sure?', 'Once deleted, the group can no longer be activated', 
+            async() => await handleDelete(),
+            () => console.log('')
+        )
+    }
+
+    const handleDelete = async() => {
+        if(!draft_group){ return }
+        if(draft_group.status == 'archived'){ return alert('Goup is already deleted') }
+        setState({ ...manage_state, loading: true });
+        let deleted_group = await GroupApi.deleteGroup(draft_group.group_id);
+        console.log(deleted_group)
+        if(!deleted_group){ 
+            setState({ ...manage_state, loading:false })
+            return alert('Unable to delete this group.  Please refresh and try again') 
+        }
+        onUpdateGroup(deleted_group);
+        setState({ ...manage_state, loading:false });
+    }
+
     const renderSections = (data:{ item:string, index:number }) => {
         switch(data.item){
             case 'header':
@@ -108,6 +130,24 @@ const ManageGroupForm = ({ group, onFocusPosition, onUpdateGroup, onClose, onInv
                         </View>
                     </View>
                 )
+            case 'danger':
+                return (
+                    <View float style={{ margin:10 }}>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>DELETE GROUP</Text>
+                                <Text theme='description' style={{ marginTop:4 }}>Inactivate and archive this group.</Text>
+                            </View>
+                            <Button
+                                title='DELETE'
+                                type='error'
+                                loading={loading}
+                                style={{ opacity:  !loading ? 1 : 0.5, padding:10 }}
+                                onPress={() => handleConfirmDelete()}
+                            />
+                        </View>
+                    </View>
+                )
             case 'image':
                 if(!draft_group){ return <></> }
                 if(active_toggle != 'information'){ return <></> }

package/src/Group/components/MySettingsForm.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed";
+import { FlatList } from 'react-native';
+import type { GroupPlayerProps } from '../../types';
+import { Switch } from '../../Components';
+import { GroupApi } from '../api';
+import { useColors } from '../../constants/useColors';
+
+const sections = ['header','settings']
+type MySettingsFormProps = {
+    group_player:GroupPlayerProps,
+    onUpdateGroupPlayer:(group_player:GroupPlayerProps) => void,
+    onClose:() => void
+}
+type GroupSettingProps = {
+    group_key:string, label: string, settings: SettingProps[]
+}
+type SettingProps = {
+    setting_key:string, label:string, description:string 
+}
+const settings = [
+    { 
+        group_key: 'settings', label: 'My Group Settings', settings: [
+            { setting_key: 'leaderboard', label: 'Leaderboard', description: "Allow your account to be included in the leaderboard" },
+            { setting_key: 'activity', label: 'Show Activity', description: "Show your BettorEdge activity under the activity tab" },
+        ]
+    },
+    { 
+        group_key: 'notifications', label: 'My Notification Settings', settings: [
+            { setting_key: 'chat_notifications', label: 'Chat', description: "Get notified of new messages in this chat" },
+            { setting_key: 'member_notifications', label: 'Members', description: "Get notified when new members join the group" },
+            { setting_key: 'activity_notifications', label: 'Activity', description: "Get notified of player activity in this group. Once enabled - you can select the individual members to follow from the group screen."}
+        ]
+    }
+]
+const MySettingsForm = ({ group_player, onUpdateGroupPlayer, onClose }: MySettingsFormProps ) => {
+    const Colors = useColors();
+    const [ manage_state, setState ] = useState<{
+        loading:string | undefined,
+    }>({
+        loading:undefined
+    });
+    const { loading } = manage_state;
+
+    const handleSave = async(gp:GroupPlayerProps, setting_key:string) => {
+        if(!gp){ return }
+        if(loading){ return }
+        setState({ ...manage_state, loading: setting_key });
+        let new_gp = await GroupApi.updateGroupPlayer(gp);
+        if(!new_gp){
+            alert('Unable to process request')
+            return setState({ ...manage_state, loading:undefined })
+        }
+        onUpdateGroupPlayer(new_gp);
+        setState({ ...manage_state, loading: undefined })
+    }
+
+    const renderSettings = (data:{ item: SettingProps, index:number }) => {
+        const setting = group_player[data.item.setting_key as keyof GroupPlayerProps]
+        const setting_value = setting ? true : false
+        const is_loading = loading == data.item.setting_key ? true : false
+        return (
+            <View transparent type='row' style={{ borderBottomWidth:1, borderColor:Colors.borders.light, padding:10 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>{data.item.label}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.description}</Text>
+                </View>
+                <Switch loading={is_loading} value={setting_value} switch_type='on_off' onChange={async(val) => {
+                    if(data.item.setting_key == 'activity_notifications'){
+                        let new_val = val ? [] : undefined
+                        console.log(new_val)
+                        return handleSave({ ...group_player, [data.item.setting_key]: new_val }, data.item.setting_key)
+                    }
+                    return handleSave({ ...group_player, [data.item.setting_key]: val }, data.item.setting_key)
+                }} />
+            </View>
+        )
+    }
+
+    const renderGroupSettings = (data:{ item:GroupSettingProps, index:number }) => {
+        return (
+            <View float style={{ margin:10 }}>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                    <View transparent style={{ flex:1 }}>
+                        <Text theme='h1'>{data.item.label}</Text>
+                    </View>
+                </View>
+                <View transparent style={{ padding:10 }}>
+                    <FlatList
+                        data={data.item.settings}
+                        key={`${data.item.group_key}_settings`}
+                        keyExtractor={item => item.setting_key}
+                        renderItem={renderSettings}
+                    />
+                </View>
+            </View>
+        )
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>MANAGE YOUR SETTINGS</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Use the form below to change your group settings</Text>
+                        </View>
+                        <Button
+                            title='X'
+                            float
+                            style={{ padding:10 }}
+                            onPress={() => onClose()}
+                        />
+                    </View>
+                )
+            case 'settings':
+                return (
+                    <View transparent>
+                        <FlatList
+                            data={settings}
+                            key={'player_settings'}
+                            keyExtractor={item => item.group_key}
+                            renderItem={renderGroupSettings}
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View float style={{ flex:1 }}>
+            <FlatList
+                data={sections}
+                key={'my_settings_sections_manage'}
+                keyExtractor={item => item}
+                renderItem={renderSections}
+            />
+        </View>
+    )
+}
+
+export default MySettingsForm

package/src/Group/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Text, View } from "../Components/Themed"
+import { Button, Text, TextInput, View } from "../Components/Themed"
 import { GroupApi, GroupHelpers } from './api';
-import type { CompetitionPayoutTypeProps, CompetitionPlayerProps, CompetitionProps, CompetitionRecordProps, CompetitionResultProps, CompetitionResultTypeProps, CompetitionTypeProps, EventProps, GroupMessageProps, GroupPlayerProps, GroupProps, MyPlayerProps, NewOverallAnalytics, OrderAnalyticsProps, OrderProps, PollCampaignProps, PostProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
+import type { CompetitionPayoutTypeProps, CompetitionPlayerProps, CompetitionProps, CompetitionRecordProps, CompetitionResultProps, CompetitionResultTypeProps, CompetitionTypeProps, EventProps, FocusPositionProps, GroupMessageProps, GroupPlayerProps, GroupProps, MyPlayerProps, NewOverallAnalytics, OrderAnalyticsProps, OrderProps, PollCampaignProps, PostProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
 import { ActivityIndicator, FlatList, Image } from 'react-native';
 import { Icons, Toggle } from '../Components';
 import { useColors } from '../constants/useColors';
@@ -15,11 +15,14 @@ import GroupCTAButton from './components/GroupCTAButton';
 import PollCampaignCard from '../Engage/components/PollCampaignCard';
 import SquaresCompetitionCard from '../Engage/components/SquaresCompetitionCard';
 import { showConfirmAlert } from '../Components/ConfirmAlert';
+import MySettingsForm from './components/MySettingsForm';
 
 type GroupComponentProps = {
     group_id:string,
     mode:'desktop'|'mobile',
+    init_invite_code?:string,
     refresh_key:string,
+    onFocusPosition:(pos:FocusPositionProps) => void,
     onSelectChat?:(group:GroupProps) => void
     onInvitePlayer:() => void,
     onNudgePlayer:(p:PublicPlayerProps, gp:GroupPlayerProps) => void,
@@ -36,7 +39,9 @@ type GroupStateProps = {
     group?:GroupProps,
     loading:boolean,
     editing:boolean,
+    invite_code:string,
     action_loading?:string,
+    join_loading:boolean,
     show_player_status:boolean,
     active_toggle:string,
     stats_expanded:boolean,
@@ -44,7 +49,8 @@ type GroupStateProps = {
     players:PublicPlayerProps[],
     active_stat?: { stat_key:string, label:string, multiplier:number, prefix?:string, suffix?:string },
     group_messages: GroupMessageProps[],
-    my_group_player?:GroupPlayerProps
+    my_group_player?:GroupPlayerProps,
+    editing_me:boolean
 }
 type TimeOptionProps = {
     to: number,
@@ -61,7 +67,7 @@ const member_stat_options:{ stat_key:string, label:string, multiplier:number, pr
     { stat_key: 'original_stake', label: 'Betting Volume', multiplier: 1, prefix: '$' }
 ]
 
-const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagement, onRequestAuthenticate, onShareGroup, onInvitePlayer, onSelectCompetition, onSelectChat, onSelectPlayer, onNudgePlayer, onSelectPollCampaign, onSelectSquaresCompetition } : GroupComponentProps) => {
+const GroupComponent = ({ refresh_key, group_id, player, mode, init_invite_code, onCreateEngagement, onRequestAuthenticate, onFocusPosition, onShareGroup, onInvitePlayer, onSelectCompetition, onSelectChat, onSelectPlayer, onNudgePlayer, onSelectPollCampaign, onSelectSquaresCompetition } : GroupComponentProps) => {
     const Colors = useColors();
     const leader_options:TimeOptionProps[] = [
         { to: moment().subtract(1, 'days').unix(), from: moment().unix(), option: '24_hours', label: '24 Hours'  },
@@ -125,14 +131,17 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
         loading: false,
         group_messages: [],
         editing:false,
+        editing_me: false,
         show_player_status:false,
         stats_expanded: false,
+        invite_code: '',
+        join_loading:false,
         active_toggle: 'members',
         active_stat: member_stat_options[0],
         group_players: [],
         players: []
     });
-    const { loading, group, action_loading, stats_expanded, active_toggle, editing,show_player_status, active_stat, group_messages, group_players, my_group_player, players } = group_data;
+    const { loading, group, join_loading, action_loading, stats_expanded, active_toggle, editing_me, invite_code, editing,show_player_status, active_stat, group_messages, group_players, my_group_player, players } = group_data;
     const admin = player?.player_id == group?.group_admin ? true : false;
     const { sorted_players, player_analytics } = GroupHelpers.sortMembers(group_players, order_analytics, active_stat?.stat_key);
     const sorted_engagements = GroupHelpers.sortCompetitionAction([], comp_data.active_competitions, [], comp_data.squares_competitions, comp_data.poll_campaigns);
@@ -211,6 +220,7 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
         })
     }
 
+    console.log(my_group_player)
     const getGroupAnalytics = async(id:string, time_option:TimeOptionProps) => {
         setGroupAnalytics({ ...group_analytics, loading: true });
         let analytics = await GroupApi.getGroupAnalytics(id, time_option.to, time_option.from);
@@ -232,15 +242,17 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
         }
         let player_ids = [ ...new Set(g_data.group_players.map(p => p.player_id).concat(g_data.group_messages.map(m => m.player_id)))]
         let plyers = await GroupApi.getPlayersByIds(player_ids);
+        let my_gp = g_data.my_group_player && g_data.my_group_player.status == 'inactive' ? undefined : g_data.my_group_player
         setGroupData({
             ...group_data,
             loading: false,
             players: plyers,
+            invite_code: init_invite_code ?? '',
             group: g_data.group,
-            show_player_status: !g_data.my_group_player ? true : g_data.my_group_player.status == 'active' ? false : true, //Show to join if we can
+            show_player_status: g_data.group.invite_only ? false : my_gp ? false : true, //Show to join if we can
             group_messages: g_data.group_messages,
             group_players: g_data.group_players,
-            my_group_player: g_data.my_group_player
+            my_group_player: my_gp
         });
     }
 
@@ -248,10 +260,14 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
         const pl = players.find(p => p.player_id == data.item.player_id);
         if(!pl){ return <></> }
         const player_analytic = player_analytics[data.item.player_id]
-        const analytic = player_analytic ? player_analytic[active_stat?.stat_key as keyof NewOverallAnalytics] : 0
+        const analytic = !data.item.leaderboard ? 0 : player_analytic ? player_analytic[active_stat?.stat_key as keyof NewOverallAnalytics] : 0
         const is_loading = action_loading == data.item.group_player_id ? true : false
+
+        const show_activity_check = player?.player_id == data.item.player_id ? false : my_group_player?.status == 'active' && my_group_player.activity_notifications && data.item.activity ? true : false
+        const following = my_group_player?.activity_notifications?.find(id => id == data.item.player_id) ? true : false
+
         return (
-            <Button transparent style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, borderRadius:0 }} onPress={() => onSelectPlayer(pl)}>
+            <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, borderRadius:0 }}>
                 {admin && data.item.player_id != player?.player_id?
                 <Button
                     title='X'
@@ -278,20 +294,40 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
                     }}
                 />
                 :<></>}
-                <View float style={{ borderRadius:100, padding:2 }}>
+                <Button 
+                    disabled={!show_activity_check || my_group_player?.player_id == data.item.player_id}
+                    onPress={async() => {
+                        if(!my_group_player){ return }
+                        let new_activity = my_group_player.activity_notifications ?? []
+                        if(!following){ new_activity = new_activity.concat(data.item.player_id) }
+                        else { new_activity = new_activity.filter(id => id != data.item.player_id) }
+                        let new_gp = await GroupApi.updateGroupPlayer({ ...my_group_player, activity_notifications: new_activity });
+                        if(!new_gp){ return alert('Unable to update') }
+                        setGroupData({
+                            ...group_data,
+                            group_players: group_players.filter(gp => gp.group_player_id != new_gp?.group_player_id).concat(new_gp),
+                            my_group_player: new_gp
+                        })
+                    }}
+                    float
+                    style={{ borderRadius:100, padding:2, borderColor:following?Colors.text.success:show_activity_check?Colors.text.warning:Colors.borders.light }}>
                     <Image
                         source={{ uri: pl.profile_pic }}
                         style={{ height:45, width:45, borderRadius:100 }}
                         resizeMode='contain'
                     />
-                </View>
-                <View transparent style={{ flex:1, marginLeft:10 }}>
+                </Button>
+                <Button transparent style={{ flex:1, marginLeft:10, padding:0 }}  onPress={() => onSelectPlayer(pl)}>
                     <Text theme='h1'>@{pl.username}</Text>
                     <Text theme='description' style={{ marginTop:3 }}>{data.item.status == 'active' ? 'Joined' : 'Invited'} {moment(data.item.last_update_datetime).fromNow()}</Text>
-                </View>
+                </Button>
                 {active_stat && player_analytic && data.item.status == 'active' ?
                 <View style={{ alignItems:'flex-end' }}>
+                    {data.item.leaderboard ?
                     <Text theme='h1'>{active_stat.prefix}{(parseFloat(analytic as string) * active_stat.multiplier).toFixed(2)}{active_stat.suffix}</Text>
+                    :
+                    <Icons.LockClosedIcon size={14} color={Colors.text.h1} />
+                    }
                     <Text theme='light' style={{ marginTop:3 }}>{active_stat.label}</Text>
                 </View>
                 :<></>}
@@ -328,7 +364,7 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
                     }}
                 />
                 :<></>}
-            </Button>
+            </View>
         )
     }
 
@@ -430,7 +466,14 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
                         <Button float style={{ padding:10, marginLeft:10 }} onPress={() => setGroupData({ ...group_data, editing:true })}>
                             <Icons.EditIcon size={14} color={Colors.text.h1} />
                         </Button>
-                        :<></>}
+                        :
+                        <Button
+                            type='success'
+                            style={{ padding:10, marginLeft:10 }}
+                            title='INVITE'
+                            onPress={() => onInvitePlayer()}
+                        />
+                        }
                     </View>
                 )
             case 'chat':
@@ -466,6 +509,7 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
                     </View>
                 )
             case 'me':
+                if(!group) { return <></> }
                 if(active_toggle != 'members'){ return <></> }
                 return (
                     <View type='row' style={{ padding:10 }}>
@@ -482,6 +526,11 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
                                 <Text theme='h1'>@{player.username}</Text>
                                 <Text theme='description' style={{ marginTop:3 }}>Member since {moment(player.create_datetime).format('MM/DD/YYYY')}</Text>
                             </View>
+                            {my_group_player?.status == 'active' ? 
+                            <Button float style={{ padding:10, marginRight:10 }} onPress={() => setGroupData({ ...group_data, editing_me: true })}>
+                                <Icons.SettingsIcon size={12} color={Colors.text.h1} />
+                            </Button>
+                            :<></>}
                             {my_group_player?.status == 'invited' ?
                                 <Button
                                     type='action'
@@ -585,6 +634,11 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
                             }}
                         />
                         </View>
+                        {my_group_player && my_group_player.activity_notifications ? 
+                        <View style={{ padding:10 }}>
+                            <Text theme='description' color={Colors.text.warning}>If a player is sharing their activity, their picture is outlined in orange. You can select the player's profile picture to get notified of their activity.</Text>
+                        </View>  
+                        :<></>}
                         <View style={{ padding:10 }}>
                             <FlatList
                                 data={sorted_players}
@@ -651,22 +705,38 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
             </View>
             {editing && group ?
             <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0 }}>
-                <View type='blur' style={mode == 'desktop'?{ justifyContent:'center', alignItems:'center', width: 500, height:500 }: { flex:1, justifyContent:'flex-end', padding:10 }}>
+                <View type='blur' style={mode == 'desktop'?{ alignSelf:'center', width: 500, height:500 }: { flex:1, justifyContent:'flex-end', padding:10 }}>
                     <ManageGroupForm
                         group={group}
+                        onFocusPosition={onFocusPosition}
                         onInvitePlayer={() => {
                             setGroupData({ ...group_data, editing: false })
                             onInvitePlayer();
                         }}
                         onClose={() => setGroupData({ ...group_data, editing: false })}
-                        onUpdateGroup={(g) => setGroupData({ ...group_data, group: g })}
+                        onUpdateGroup={(g) => setGroupData({ ...group_data, group: g, editing: g.status == 'archived' ? false : true })}
+                    />
+                </View>
+            </View>
+            :<></>}
+            {editing_me && group && my_group_player ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0 }}>
+                <View type='blur' style={mode == 'desktop'?{ alignSelf:'center', justifyContent:'center', width: 500, height:500 }: { flex:1, justifyContent:'flex-end', padding:10 }}>
+                    <MySettingsForm
+                        group_player={my_group_player}                        
+                        onClose={() => setGroupData({ ...group_data, editing_me: false })}
+                        onUpdateGroupPlayer={(gp) => setGroupData({ 
+                            ...group_data,
+                            group_players: group_players.filter(p => p.group_player_id != gp.group_player_id).concat(gp),
+                            my_group_player: { ...gp }
+                        })}
                     />
                 </View>
             </View>
             :<></>}
             {show_player_status && group && player ?
             <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0 }}>
-                <View type='blur' style={mode == 'desktop'?{ justifyContent:'center', alignItems:'center', width: 500, height:500 }: { flex:1, justifyContent:'flex-end', padding:10 }}>
+                <View type='blur' style={mode == 'desktop'?{ justifyContent:'center', alignSelf:'center', width: 500, height:500 }: { flex:1, justifyContent:'flex-end', padding:10 }}>
                     <GroupPlayerActionForm
                         group={group}
                         group_player={my_group_player}
@@ -676,7 +746,7 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
                             setGroupData({
                                 ...group_data,
                                 group_players: group_players.filter(gp => gp.group_player_id != new_gp.group_player_id).concat(new_gp),
-                                my_group_player: new_gp,
+                                my_group_player: new_gp.status == 'inactive' ? undefined: new_gp,
                                 show_player_status: false
                             })
                         }}
@@ -685,6 +755,65 @@ const GroupComponent = ({ refresh_key, group_id, player, mode, onCreateEngagemen
                 </View>
             </View>
             :<></>}
+            {group && group.status == 'archived' ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                <View float style={{ padding:10 }}>
+                    <Text theme='h1' textAlign='center'>GROUP NOT ACTIVE</Text>
+                    <Text theme='description' textAlign='center' style={{ marginTop:5 }}>This group have been deleted by the admin</Text>
+                </View>
+            </View>
+            :<></>}
+            {group && group.invite_only && !my_group_player ?
+            <View type='dark_blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'flex-end', margin:10 }}>
+                <View float>
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <Image
+                            source={{ uri: group.group_image?.url }}
+                            style={{ height:50, width:50 }}
+                            resizeMode='cover'
+                        />
+                        <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                            <Text theme='h1'>{group.name}</Text>
+                            <Text theme='warning' style={{ marginTop:3 }}>This is a private group</Text>
+                        </View>
+                        <Icons.LockClosedIcon size={20} color={Colors.text.error} />
+                    </View>
+                    <View transparent style={{ padding:20 }}>
+                        <Text theme='h1'>Have an Invite Code?</Text>
+                        <View transparent type='row' style={{ marginTop:10 }}>
+                            <TextInput
+                                style={{flex:1 }}
+                                onFocusPosition={onFocusPosition}
+                                placeholder='Enter Code Here...'
+                                value={invite_code}
+                                onChangeText={(code) => setGroupData({ ...group_data, invite_code: code })}
+                            />
+                            <Button
+                                type='success'
+                                title='JOIN'
+                                disabled={!invite_code}
+                                style={{ marginLeft:5, opacity: join_loading || !invite_code ? 0.5: 1 }}
+                                loading={join_loading}
+                                onPress={async() => {
+                                    setGroupData({ ...group_data, join_loading:true });
+                                    let new_player = await GroupApi.join(group_id, invite_code);
+                                    if(!new_player){
+                                        alert('The code entered is not valid.  Please reach out to the admin for the correct code');
+                                        return setGroupData({ ...group_data, join_loading: false })
+                                    }
+                                    setGroupData({
+                                        ...group_data,
+                                        join_loading: false
+                                    });
+                                    getGroupData(group_id);
+                                    //try to join this group!
+                                }}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </View>
+            :<></>}
         </View>
     )
 }

package/src/constants/useColors.tsx

@@ -59,6 +59,7 @@ export const useColors = (props?:UseColorProps) => {
             input: Colors.shades.white,
             disabled_input: Colors.shades.shade400,
             blur: 'rgba(242, 245, 247, 0.7)',
+            dark_blur: 'rgba(242, 245, 247, 0.9)',
             liquidMarket: Colors.highlights.highlight500Faded,
             illiquidMarket: Colors.shades.shade100
         },
@@ -139,6 +140,7 @@ export const useColors = (props?:UseColorProps) => {
             footer: Colors.shades.blackFadedHeavy, // **(NEW)** #222831,
             gold: Colors.incentive.goldDark,
             blur: 'rgba(17, 17, 17, 0.7)',
+            dark_blur: 'rgba(17, 17, 17, 0.9)',
             liquidMarket: Colors.highlights.highlight500,
             illiquidMarket: Colors.shades.shade500
 

package/src/types.d.ts

@@ -807,6 +807,7 @@ export interface GroupProps {
     invite_only: boolean, 
     invite_code?:string,
     group_image?:any, 
+    allow_member_invites?:boolean,
     order_alerts:boolean, 
     position_alerts:boolean, 
     leaderboard_ind:boolean, 
@@ -823,6 +824,12 @@ export interface GroupPlayerProps {
     group_player_id:string, 
     group_id:string, 
     player_id:string, 
+    banned?:boolean,
+    leaderboard?:boolean,
+    activity?:boolean,
+    chat_notifications?:boolean,
+    member_notifications?:boolean,
+    activity_notifications?:string[],
     create_datetime:any, 
     status:'invited'|'active'|'inactive', 
     last_update_datetime:any,