be-components 6.8.1 → 6.8.3

package/src/SquaresManager/index.tsx

@@ -0,0 +1,395 @@
+import React, { useEffect, useState } from "react"
+import { SquaresManagerApi, SquaresManagerHelpers } from "./api";
+import { Button, Text, TextInput, View } from "../Components/Themed";
+import { FlatList, Image, type ViewStyle } from "react-native";
+import type { CompanyProps, EventProps, FocusPositionProps, GroupProps, LeagueProps, MyPlayerProps, SquaresCompetitionProps } from "../types";
+import { useColors } from "../constants/useColors";
+import LeagueSchedule from "../MarketComponents/components/LeagueSchedule";
+import { Icons, Switch, Toggle } from "../Components";
+import moment from "moment-mini";
+import ImageUploader from "../Components/ImageUploader";
+import GroupSelector from "../CompetitionManager/components/GroupSelector";
+import CompanySelector from "../CompetitionManager/components/CompanySelector";
+
+type SquaresManagerProps = {
+    sq_comp_id:string,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
+    float?:boolean,
+    player?:MyPlayerProps,
+    onActivate:(sq:SquaresCompetitionProps) => void,
+    onClose:() => void,
+    header_style?:ViewStyle,
+    footer_style?:ViewStyle
+}
+const sections = ['header','toggle','info','event']
+const SquaresManager = ({ sq_comp_id, float, player, header_style, onFocusPosition, footer_style, onClose, onActivate }:SquaresManagerProps) => {
+    const Colors = useColors();
+    const [ my_data, setMyData ] = useState<{
+            groups:GroupProps[],
+            companies:CompanyProps[]
+        }>({
+            groups: [],
+            companies: []
+        });
+        const { groups, companies } = my_data;
+    const [ sq_state, setState ] = useState<{
+        loading: boolean,
+        active_tab: 'info'|'event',
+        leagues_visible?:boolean,
+        active_event?:EventProps,
+        active_league?:LeagueProps,
+        min_square_price:string,
+        leagues:LeagueProps[],
+        league_schedule:boolean,
+        draft_competition?:SquaresCompetitionProps,
+        squares_competition?:SquaresCompetitionProps
+    }>({
+        loading:false,
+        active_tab: 'info',
+        leagues_visible:false,
+        leagues:[],
+        min_square_price: '0',
+        league_schedule: false
+    });
+    const { loading, squares_competition, min_square_price, active_tab, leagues, league_schedule, draft_competition, leagues_visible, active_event, active_league } = sq_state
+    const active_group = groups.find(g => g.group_id == draft_competition?.group_id)
+    const active_company = companies.find(c => c.company_id == draft_competition?.company_id);
+
+    useEffect(() => {
+        SquaresManagerApi.setEnvironment();
+        getData(sq_comp_id)
+        if(player){ getMyData() }
+    },[sq_comp_id, player]);
+
+    const errors = SquaresManagerHelpers.isValid(draft_competition);
+
+    const getMyData = async() => {
+        const my_groups = await SquaresManagerApi.getMyGroups(0);
+        const my_comps = await SquaresManagerApi.getMyCompanies();
+        setMyData({
+            ...my_data,
+            groups: my_groups.groups,
+            companies: my_comps.companies
+        });
+    }
+
+    const getData = async(id:string) => {
+        setState({ ...sq_state, loading: true });
+        const sq_data = await SquaresManagerApi.getSquareCompetitionById(id);
+        const lgs = await SquaresManagerApi.getLeagues();
+        if(!sq_data){ return alert('Unable to get Squares Details - please try again') }
+        let active_ev_id = sq_data.squares_competition.event_id
+        let active_ev:EventProps | undefined = undefined
+        if(active_ev_id){
+            const evs = await SquaresManagerApi.getEventsByEventIds([active_ev_id])
+            active_ev = evs[0]
+        }
+        let active_league = lgs.find(l => l.league_id == active_ev?.league_id);
+        setState({
+            ...sq_state,
+            loading: false,
+            leagues: lgs.filter(l => l.sport == 'Football'),
+            active_event: active_ev,
+            min_square_price: sq_data.squares_competition.minimum_square_price.toFixed(2),
+            active_league: active_league,
+            draft_competition: sq_data.squares_competition,
+            squares_competition: sq_data.squares_competition
+        })
+    }
+
+    const handleActivate = async() => {
+        if(!squares_competition || loading){ return }
+        if(errors.length > 0){ return alert(errors.map(e => e)) }
+        setState({ ...sq_state, loading: true });
+        const activate_resp = await SquaresManagerApi.activateSquares(squares_competition.sq_comp_id);
+        if(!activate_resp){ return alert('Unable to activate competition') }
+        setState({
+            ...sq_state, loading:false,
+            squares_competition: activate_resp.squares_competition,
+            draft_competition: activate_resp.squares_competition
+        });
+        onActivate(activate_resp.squares_competition)
+    }
+
+    const updateCompetition = async(sq_comp:SquaresCompetitionProps) => {
+        if(errors.length > 0){ return alert(errors.map(e => e)) }
+        if(loading){ return }//No mashy
+        setState({ ...sq_state, loading:true });
+        const new_comp = await SquaresManagerApi.updateSquaresCompetition({ ...sq_comp, minimum_square_price: parseFloat(min_square_price)});
+        if(!new_comp){ return alert('Unable to update squares competition') }
+        setState({
+            ...sq_state,
+            squares_competition: new_comp,
+            draft_competition: new_comp,
+            loading:false,
+
+        })
+    }
+
+        const renderLeagues = (data:{item:LeagueProps, index:number}) => {
+            const selected = active_league?.league_id == data.item.league_id ? true : false
+           
+            return (
+                <Button 
+                    transparent 
+                    style={{ flexDirection:'row', borderRadius:0, padding:10, alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}
+                    onPress={() => setState({ ...sq_state, active_league: selected?undefined : data.item, leagues_visible:false, league_schedule: selected?false:true })}
+                >
+                    <Image
+                        source={{ uri: data.item.league_image }}
+                        style={{ height:30, width:30 }}
+                        resizeMode='contain'
+                    />
+                    <View transparent style={{ flex:1, marginLeft:10 }}>
+                        <Text theme='h1'>{data.item.league_name}</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>{data.item.sport}</Text>
+                    </View>
+                </Button>
+            )
+        }
+    
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                if(!squares_competition || !draft_competition){ return <></> }
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, ...header_style }}>
+                        <ImageUploader style={{padding:0}} public_id={`sq_pic_${squares_competition.sq_comp_id}`} onFinishUpload={async(obj) => {
+                            updateCompetition({ ...draft_competition, image: { ...obj, url: obj.secure_url } })
+
+                        }}>
+                            <View transparent style={{ alignItems:'center' }}>
+                            {draft_competition.image?
+                            <Image
+                                source={{ uri: draft_competition.image?.url }}
+                                resizeMode="cover"
+                                style={{ height:40, width:40 }}
+                            />
+                            :
+                            <Icons.ImageIcon size={30} color={Colors.text.h1} />
+                            }
+                            </View>
+                            
+                            <Text theme="action" textAlign="center">{draft_competition.image?.url ? 'Change' : 'Add Image'}</Text>
+                        </ImageUploader>
+                        <View transparent style={{flex:1, marginLeft:10, marginRight:10}}>
+                            <Text theme='h1'>{squares_competition.sq_comp_name}</Text>
+                            <Text theme="description" style={{ marginTop:3 }}>{squares_competition.sq_comp_description}</Text>
+                        </View>
+                        <Button
+                            title="X"
+                            style={{ padding:10 }}
+                            float
+                            title_color={Colors.text.error}
+                            onPress={() => onClose()}
+                        />
+                    </View>
+                )
+            case 'toggle':
+                return (
+                    <View transparent>
+                    <Toggle
+                        border_radius={0}
+                        toggle_padding={10}
+                        padding={0}
+                        options={[
+                            { key: 'info', label: 'Info', icon: <Icons.MenuIcon size={14} color={Colors.text.warning} /> },
+                            { key: 'event', label: 'Event', icon: <Icons.ActivityIcon size={14} color={Colors.text.warning}  /> },
+                        ]}
+                        selected_option={active_tab}
+                        onSelectOption={(key) => setState({ ...sq_state, active_tab: key as 'info'|'event'})}
+                        title_renderer={(option) => {
+                            const selected = option.key == active_tab ? true : false
+                            return (
+                                <View transparent style={{ justifyContent:'center', alignItems:'center' }}>
+                                    <View transparent>
+                                        {option.icon}
+                                    </View>
+                                    <Text style={{ marginTop:5 }} theme={selected?'h2':'description'} color={selected?Colors.toggle.text.active : Colors.toggle.text.inactive}>{option.label}</Text>
+                                </View>
+                            )
+                        }}
+                    />
+                    </View>
+                )
+            case 'info':
+                if(!draft_competition){ return <></> }
+                if(active_tab != 'info'){ return <></> }
+                return (
+                    <View>
+                        <View style={{ padding:10 }}>
+                            <Text theme='h1' style={{ marginBottom:10 }}>Competition Name</Text>
+                            <TextInput
+                                placeholder='Add Name here...'
+                                value={draft_competition.sq_comp_name}
+                                onFocusPosition={onFocusPosition}
+                                style={{ borderColor:draft_competition.sq_comp_name ? Colors.text.success : Colors.text.warning }}
+                                onChangeText={(text) => setState({ ...sq_state, draft_competition: { ...draft_competition, sq_comp_name: text }})}
+                            />
+                        </View>
+                        <View style={{ padding:10 }}>
+                            <Text theme='h1' style={{ marginBottom:10 }}>Competition Description</Text>
+                            <TextInput
+                                placeholder='Add Decription here...'
+                                onFocusPosition={onFocusPosition}
+                                value={draft_competition.sq_comp_description}
+                                style={{ borderColor:draft_competition.sq_comp_description ? Colors.text.success : Colors.text.warning }}
+                                onChangeText={(text) => setState({ ...sq_state, draft_competition: { ...draft_competition, sq_comp_description: text } })}
+                            />
+                        </View>
+                        <View style={{ padding:10 }}>
+                            <Text theme='h1' style={{ marginBottom:10 }}>Minimum Squares Price</Text>
+                            <TextInput
+                                placeholder='1'
+                                onFocusPosition={onFocusPosition}
+                                value={min_square_price}
+                                style={{ textAlign:'center', borderColor:draft_competition.minimum_square_price <= 0 ? Colors.text.warning : Colors.text.success }}
+                                onChangeText={(text) => setState({ ...sq_state, min_square_price: text })}
+                            />
+                        </View>
+                         <View type='row' nativeID="invite_only" style={{ flexWrap:'wrap', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light  }}>
+                            <View style={{ flex:1, marginRight:15 }}>
+                                <Text theme='h1'>Make Private</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Only access this competition using an invite code.</Text>
+                            </View>
+                            <Switch
+                                value={draft_competition.invite_only_ind}
+                                switch_type="on_off"
+                                onChange={(value) => {
+                                    if(player?.role != 'admin'){ return alert('You do not have access to make public competitions at this time.') }
+                                    updateCompetition({ ...draft_competition, invite_only_ind: value })
+                                }}
+                            />
+                        </View>
+                        {draft_competition.invite_only_ind ?
+                        <View style={{ padding:10 }}>
+                            <Text theme='h1' style={{ marginBottom:10 }}>Competition Invite Code</Text>
+                            <TextInput
+                                placeholder='Add Invite Code here...'
+                                onFocusPosition={onFocusPosition}
+                                value={draft_competition.competition_code}
+                                style={{ borderColor:draft_competition.competition_code ? Colors.text.success : Colors.text.warning }}
+                                onChangeText={(text) => setState({ ...sq_state, draft_competition: { ...draft_competition, competition_code: text } })}
+                            />
+                        </View>
+                        :<></>}
+                        {groups.length > 0 ?
+                        <View style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View style={{ marginBottom:10 }}>
+                                <Text theme='h1'>My Groups</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Add this competition to a group that you are a member of</Text>
+                            </View>
+                            <GroupSelector
+                                active_group={active_group}
+                                groups={groups}
+                                onSelectGroup={(g) => updateCompetition({ ...draft_competition, group_id: g?.group_id })}
+                            />
+                        </View>
+                        :<></>}
+                        {companies.length > 0 ?
+                        <View style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                            <View style={{ marginBottom:10 }}>
+                                <Text theme='h1'>My Companies</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Add this competition to a company that you are a member of</Text>
+                            </View>
+                            <CompanySelector
+                                active_company={active_company}
+                                companies={companies}
+                                onSelectCompany={(c) => updateCompetition({ ...draft_competition, company_id: c?.company_id })}
+                            />
+                        </View>
+                        :<></>}
+                    </View>
+                )
+            case 'event':
+                if(active_tab != 'event'){ return <></> }
+                return (
+                    <View>
+                    <View style={{ padding:10 }}>
+                        <Text theme='h1' style={{ marginBottom:10 }}>Squares Event</Text>
+                        <Button float style={{ borderColor:active_league?Colors.text.success:Colors.text.warning }} onPress={() => setState({ ...sq_state, leagues_visible: !leagues_visible })}>
+                            <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                                <Text style={{ flex:1, marginRight:10 }} theme='h1'>{active_league?.league_name ?? 'Select League'}</Text>
+                                <Icons.ChevronIcon direction={leagues_visible?'up':'down'} color={Colors.text.h1} size={8} />
+                            </View>
+                            {leagues_visible ?
+                            <View transparent style={{ marginTop:20 }}>
+                            <FlatList
+                                data={leagues.sort((a,b) => a.priority - b.priority)}
+                                key={'competition_reult_types'}
+                                keyExtractor={item => item.league_id.toString()}
+                                renderItem={renderLeagues}
+                            />
+                            </View>
+                            :<></>}
+                        </Button>
+                    </View>
+                    <View float style={{ margin:10 }}>
+                        {active_league && league_schedule ?
+                        <LeagueSchedule
+                            onSelectEvent={(e) => {
+                                if(!draft_competition){ return }
+                                setState({ 
+                                    ...sq_state, 
+                                    active_event: e, 
+                                    league_schedule:false,
+                                    draft_competition: {
+                                        ...draft_competition,
+                                        sport: active_league?.league_name ?? draft_competition.sport,
+                                        begin_datetime: moment(e.scheduled_datetime).add(4, 'minutes'),
+                                        event_id: e.event_id
+                                    }
+                                });
+                            }}
+                            league={active_league}
+                            active_event={active_event?.event_id}
+                        />
+                        : active_event ?
+                        <Button style={{ borderColor:active_event?Colors.text.success:Colors.text.warning }} float onPress={() => setState({ ...sq_state, league_schedule: true })}>
+                            <Text theme='h1'>{active_event.event_title}</Text>
+                        </Button> 
+                        :<></>}
+                    </View>
+                    </View>
+                    
+                )
+            default: return <></>
+        }
+    }
+    const is_changed = JSON.stringify(squares_competition) != JSON.stringify(draft_competition) ? true : parseFloat(min_square_price) != draft_competition?.minimum_square_price ? true : false
+    return (
+        <View float={float} style={{ flex:1 }}>
+            <View transparent style={{ flex:1 }}>
+                <FlatList
+                    data={sections}
+                    key={'manage_squares'}
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
+                />
+            </View>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, ...footer_style }}>
+                <Button
+                    disabled={!is_changed}
+                    style={{ flex:1, opacity: !is_changed || loading || errors.length > 0 ? 0.5: 1 }}
+                    loading={loading}
+                    title="SAVE"
+                    type='action'
+                    onPress={() => draft_competition ? updateCompetition(draft_competition) : console.log('')}
+                />
+                {squares_competition?.status == 'pending' ?
+                <Button
+                    disabled={errors.length > 0 || loading ? true : false}
+                    style={{ flex:2, marginLeft:10, opacity: errors.length > 0 ? 0.5: 1 }}
+                    loading={loading}
+                    title="ACTIVATE!"
+                    type='success'
+                    onPress={() => handleActivate()}
+                />
+                :<></>}
+            </View>
+        </View>
+    )
+}
+
+export default SquaresManager

package/src/index.tsx

@@ -60,6 +60,7 @@ import GuideView from './Guide';
 import GroupComponent from './Group';
 import CreateGroupWizard from './Group/components/CreateGroupWizard';
 import CreateEngagement from './CreateEngagement';
+import SquaresManager from './SquaresManager';
 export {
   Authenticator,
   Observer,
@@ -67,6 +68,7 @@ export {
   BEEventApi,
   RankingsCard,
   BELinkApi,
+  SquaresManager,
   GuideView,
   BetMatch,
   ManageFilter,

package/src/types.d.ts

@@ -2205,7 +2205,7 @@ export interface SquaresCompetitionProps {
     market_type:'FOR_MONEY'|'FREE', potential_winnings:number, last_iteration_scored:number, competition_code?:string, available_squares?:number,
     begin_datetime:any, create_datetime:any, last_update_datetime:any, complete_datetime?:any, event_backup?:EventProps, guaranteed_payout?:number,
     sq_comp_description?:string, image?:{ url:string }, prize_override?:string, prize_image?:{url:string},
-    auth_strategy_id?:string, group_id?:string
+    auth_strategy_id?:string, group_id?:string, status?:string
 }
 
 export interface SquaresExpectedValueProps {