be-components 7.0.5 → 7.0.6

package/src/Discord/api/index.ts

@@ -0,0 +1,57 @@
+
+import axios from 'axios';
+import { APIOverrides } from '../../ApiOverrides';
+import type { DiscordPlayerProps } from '../../types';
+
+//let SOCIAL_SVC_API = '';
+//let EVENT_SVC_API = '';
+//let MK_SVC_API = '';
+let AUTH_SVC_API = '';
+//let TP_SVC_API = ''
+
+export const DiscordPlayerApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        //SOCIAL_SVC_API = endpoints['SOCIAL_SVC_API'] as string;
+        //EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
+        //MK_SVC_API = endpoints['MK_SVC_API'] as string;
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+        //TP_SVC_API = endpoints['TP_SVC_API'] as string;
+    },
+    getMyDiscordConnection: async():Promise<DiscordPlayerProps | undefined> => {
+        try {
+            const resp = await axios.get(`${AUTH_SVC_API}/v1/players/discord/me`);
+            return resp.data.discord_player
+        } catch (e) {
+            console.log(e);
+            return undefined
+        }
+    },
+    startConnnection: async():Promise<DiscordPlayerProps | undefined> => {
+        try {
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/players/discord/connect`);
+            return resp.data.discord_player
+        } catch (e) {
+            console.log(e)
+            return undefined
+            
+        }
+    },
+    confirmConnection: async():Promise<DiscordPlayerProps | undefined> => {
+        try {
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/players/discord/confirm`);
+            return resp.data.discord_player
+        } catch (e) {
+            console.log(e);
+            return undefined
+        }
+    },
+    disconnect: async():Promise<DiscordPlayerProps | undefined> => {
+        try {
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/players/discord/disconnect`);
+            return resp.data.discord_player
+        } catch (e) {
+            return undefined
+        }
+    }
+}

package/src/Discord/index.tsx

@@ -0,0 +1,300 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, View } from "../Components/Themed"
+import { DiscordPlayerApi } from './api';
+import type { DiscordPlayerProps } from '../types';
+import { FlatList, Image, type ViewStyle } from 'react-native';
+import { Icons, Toggle } from '../Components';
+import { useColors } from '../constants/useColors';
+import * as Clipboard from 'expo-clipboard';
+
+type DiscordConnectionManagerProps = {
+    player_id?:string,
+    refresh_key?:string,
+    header_style?:ViewStyle,
+    float?:boolean,
+    footer_style?:ViewStyle,
+    onRequestAuthenticate: () => void
+}
+
+const sections = ['header','toggle', 'logo', 'success', 'step_1','step_2','step_3']
+const DiscordConnectionManager = ({ player_id, refresh_key, header_style, footer_style, float, onRequestAuthenticate }:DiscordConnectionManagerProps) => {
+    const Colors = useColors();
+    const [ state, setState ] = useState<{
+        loading:boolean,
+        discord_player?:DiscordPlayerProps,
+        active_step:string
+    }>({
+        loading: false,
+        active_step: 'step_1'
+    });
+    const { loading, discord_player, active_step } = state;
+
+    useEffect(() => {
+        DiscordPlayerApi.setEnvironment();
+        if(!player_id){ return onRequestAuthenticate() }
+        getData();
+    },[player_id, refresh_key]);
+
+    const getData = async() => {
+        setState({ ...state, loading:true });
+        const dp = await DiscordPlayerApi.getMyDiscordConnection();
+        if(!dp){ return alert('Unable to get your connection status') }
+        const step = dp.status == 'inactive' ? 'step_1' : dp.status == 'requested' ? 'step_2' : dp.status == 'pending' ? 'step_3' : 'step_1'
+        setState({
+            ...state,
+            loading:false,
+            discord_player: dp,
+            active_step: step
+        });
+    }
+
+    const handleStartConnection = async() => {
+        if(loading){ return }
+        setState({ ...state, loading:true });
+        const dp = await DiscordPlayerApi.startConnnection();
+        if(!dp){ 
+            alert('Unable to process at this time.  Please try again')
+            getData();
+            return
+        }
+        setState({
+            ...state,
+            discord_player: dp,
+            active_step: 'step_2',
+            loading:false
+        });
+    }
+
+    const handleConfirmConnection = async() => {
+        if(loading){ return }
+        setState({ ...state, loading:true });
+        const dp = await DiscordPlayerApi.confirmConnection();
+        if(!dp){ 
+            alert('Unable to process at this time.  Please try again')
+            getData();
+            return
+        }
+        setState({
+            ...state,
+            discord_player: dp,
+            loading:false
+        });
+    }
+
+    const handleDisconnect = async() => {
+        if(loading){ return }
+        setState({ ...state, loading:true });
+        const dp = await DiscordPlayerApi.disconnect();
+        if(!dp){ 
+            alert('Unable to process at this time.  Please try again')
+            getData();
+            return
+        }
+        setState({
+            ...state,
+            discord_player: dp,
+            loading:false
+        });
+    }
+
+
+    const renderSections = (data:{item:string, index:number}) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, ...header_style }}>
+                        <Image
+                            source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1758212751/discord_xkfzgw.jpg' }}
+                            style={{ height:40, width:40 }}
+                            resizeMode='contain'
+                        />
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text theme='h1'>Connect Your Discord!</Text>
+                            <Text theme='description'>Follow the instructions below to authenticate discord with your account</Text>
+                        </View>
+                        <Button float style={{ padding:10 }} onPress={() => getData()}>
+                            <Icons.RefreshIcon size={18} color={Colors.text.h1}/>
+                        </Button>
+                    </View>
+                )
+            case 'toggle':
+                if(discord_player?.status == 'active'){ return <></> }
+                return (
+                    <View style={{padding:10}}>
+                        <Toggle
+                            options={[
+                                { key: 'step_1', label: 'Step 1' },
+                                { key: 'step_2', label: 'Step 2' },
+                                { key: 'step_3', label: 'Step 3' }
+                            ]}
+                            selected_option={active_step}
+                            onSelectOption={(step) => setState({ ...state, active_step:step })}
+                        />
+                    </View>
+                )
+            case 'success':
+                if(discord_player?.status != 'active'){ return <></> }
+                return (
+                    <View style={{ padding:10 }}>
+                        <View float style={{ padding:2, backgroundColor: '#7289da', borderRadius:100, alignSelf:'center' }}>
+                            {discord_player.image?
+                            <Image
+                                source={{ uri: discord_player.image.url }}
+                                style={{ height:125, width:125, borderRadius:100 }}
+                                resizeMode='cover'
+                            />
+                            :
+                            <Image
+                                source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1758213727/discord-logo_zsufoi.png' }}
+                                style={{ height:125, width:125, borderRadius:100 }}
+                                resizeMode='cover'
+                            />
+                            }
+                        </View>
+                        <View float style={{ marginTop:40}}>
+                            <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10}}>
+                                {discord_player.image?
+                                <Image
+                                    source={{ uri: discord_player.image.url }}
+                                    style={{ height:50, width:50, borderRadius:100 }}
+                                    resizeMode='cover'
+                                />
+                                :
+                                <Image
+                                    source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1758213727/discord-logo_zsufoi.png' }}
+                                    style={{ height:50, width:50, borderRadius:100 }}
+                                    resizeMode='cover'
+                                />
+                                }
+                                <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                                    <Text theme='h1' size={18}>@{discord_player.username}</Text>
+                                    <Text theme='success' style={{ marginTop:5 }}>CONNECTED</Text>
+                                </View>
+                                <Icons.CheckCirlceIcon color={Colors.text.success} size={20} />
+                            </View>
+                        </View>
+                    </View>
+                )
+            case 'logo':
+                if(discord_player?.status == 'active'){ return <></> }
+                return (
+                    <View transparent style={{ flexDirection:'row', paddingLeft:10, paddingRight:10 }}>
+                        {active_step == 'step_2' ?
+                        <View style={{ flex:1 }} />
+                        :active_step == 'step_3' ?
+                        <View style={{ flex:2 }} />
+                        :<></>}
+                        <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                            <View float style={{ padding:10, backgroundColor: '#7289da', borderRadius:100 }}>
+                                <Image
+                                    source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1758213727/discord-logo_zsufoi.png' }}
+                                    style={{ height:50, width:50, borderRadius:100 }}
+                                    resizeMode='cover'
+                                />
+                            </View>
+                        </View>
+                        {active_step == 'step_1' ?
+                        <View style={{ flex:2 }} />
+                        :active_step == 'step_2' ?
+                        <View style={{ flex:1 }} />
+                        :<></>}
+                    </View>
+                )
+            case 'step_1':
+                if(active_step != 'step_1'){ return <></> }
+                if(discord_player && discord_player.status == 'active'){ return <></> }
+                return (
+                    <View float style={{ padding:20, margin:10, justifyContent:'center', alignItems:'center' }}>
+                        <Text theme='h1'  size={20} style={{ marginTop:20 }} textAlign='center'>Press Start Connection below</Text>
+                        <Text theme='h1' size={20} style={{ marginTop:20 }} textAlign='center'>You’ll get a temporary code valid for 10 minutes</Text>
+                        <Text theme='h1' size={20} style={{ marginTop:20 }} textAlign='center'>Keep this code handy—you’ll need it in Discord</Text>
+                    </View>
+                )
+            case 'step_2':
+                if(active_step != 'step_2' || !discord_player){ return <></> }
+                if(discord_player?.status == 'active'){ return <></> }
+                return (
+                    <View float style={{ padding:20, margin:10, justifyContent:'center', alignItems:'center' }}>
+                        <Text theme='h1'  size={20} style={{ marginTop:20 }} textAlign='center'>Open Discord where the bot is installed.</Text>
+                        <Text theme='h1' size={20} style={{ marginTop:20 }} textAlign='center'>Use the slash command{'\n'} /connect {discord_player.auth_code}</Text>
+                        <Text theme='h1' size={20} style={{ marginTop:20 }} textAlign='center'>Make sure to enter the code exactly as shown. It will expire in 10 minutes</Text>
+                    </View>
+                )
+            case 'step_3':
+                if(active_step != 'step_3' || !discord_player){ return <></> }
+                if(discord_player?.status == 'active'){ return <></> }
+                return (
+                    <View float style={{ padding:20, margin:10, justifyContent:'center', alignItems:'center' }}>
+                        <Text theme='h1'  size={20} style={{ marginTop:20 }} textAlign='center'>Once Validated, you can confirm the connection</Text>
+                        <Text theme='h1' size={20} style={{ marginTop:20 }} textAlign='center'>Press confirm connection below.</Text>
+                        <Text theme='h1' size={20} style={{ marginTop:20 }} textAlign='center'>Once confirmed, you can use authenticated commands in descord!</Text>
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View float={float} style={{ flex:1 }}>
+            <FlatList
+                data={sections}
+                key={'discord_connection_sections'}
+                keyExtractor={item => item}
+                renderItem={renderSections}
+            />
+            {discord_player ?
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, ...footer_style }}>
+                {discord_player.status == 'inactive' ?
+               <Button
+                    title='START CONNECTION'
+                    title_color={Colors.text.white}
+                    backgroundColor='#7289da'
+                    loading={loading}
+                    style={{ flex:1 }}
+                    onPress={() => handleStartConnection()}
+               />
+               :discord_player.status == 'requested' ?
+                <Button
+                    type='text'
+                    loading={loading}
+                    style={{ flex:1, alignItems:'center', justifyContent:'center' }}
+                    onPress={async() => {
+                        if(!discord_player.auth_code){ return }
+                            await Clipboard.setStringAsync(discord_player.auth_code)
+                            alert('Code copied to clipboard')
+                    }}>
+                        <Text theme='action' size={14}>Press to Copy: {discord_player.auth_code}</Text>
+                </Button>
+            :discord_player.status == 'pending' ?
+                <Button
+                    title='CONFIRM CONNECTION'
+                    type='success'
+                    loading={loading}
+                    style={{ flex:1 }}
+                    onPress={() => handleConfirmConnection()}
+               />
+            :discord_player.status == 'active'?
+                <Button
+                    title='DISCONNECT'
+                    type='error'
+                    loading={loading}
+                    style={{ flex:1 }}
+                    onPress={() => handleDisconnect()}
+                />
+            :<></>}
+            </View>
+            :
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, ...footer_style }}>
+               <Button
+                type='success'
+                style={{ flex:1 }}
+                title='LOG IN FIRST'
+                onPress={() => onRequestAuthenticate()}
+               />
+            </View>
+            }
+        </View>
+    )
+}
+
+export default DiscordConnectionManager

package/src/Squares/index.tsx

@@ -632,7 +632,6 @@ const SquaresModule = ({ sq_comp_id, info_header, view_mode, insets, player_id,
                         <View type='footer' style={{ padding:10 }}>
                             <Button
                                 title='CLOSE'
-                                style={{ flex:1 }}
                                 type='close'
                                 onPress={() => onClose()}
                             />

package/src/SquaresManager/index.tsx

@@ -403,7 +403,7 @@ const SquaresManager = ({ sq_comp_id, float, player, header_style, onFocusPositi
                             <View transparent style={{ marginTop:20 }}>
                             <FlatList
                                 data={leagues.sort((a,b) => a.priority - b.priority)}
-                                key={'competition_reult_types'}
+                                key={'competition_leagues_list'}
                                 keyExtractor={item => item.league_id.toString()}
                                 renderItem={renderLeagues}
                             />

package/src/index.tsx

@@ -61,10 +61,12 @@ import GroupComponent from './Group';
 import CreateGroupWizard from './Group/components/CreateGroupWizard';
 import CreateEngagement from './CreateEngagement';
 import SquaresManager from './SquaresManager';
+import DiscordConnectionManager from './Discord';
 export {
   Authenticator,
   Observer,
   CreateEngagement,
+  DiscordConnectionManager,
   BEEventApi,
   RankingsCard,
   BELinkApi,

package/src/types.d.ts

@@ -132,7 +132,21 @@ export interface PublicPlayerProps {
 }
 
 
-
+//DiscordPlayer
+export interface DiscordPlayerProps {
+    discord_player_id:string,
+    player_id:string,
+    discord_id?:string,
+    token?: string,
+    username?:string,
+    image?:{url:string},
+    refresh_token?:string,
+    status: 'active'|'inactive'|'requested'|'pending',
+    auth_code?: string,
+    expire_time?: any,
+    create_datetime:any,
+    last_update_datetime:any
+}
 
 export interface GolfLeaderProps {
     tournament_id:string,