be-components 1.4.9 → 1.5.1

package/src/CompetitionSeason/index.tsx

@@ -0,0 +1,244 @@
+import React, { useEffect, useState } from 'react';
+import { View, ActivityIndicator, ScrollView } from 'react-native';
+import type { CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonPlayerProps, CompetitionSeasonProps, CompetitionSeasonResultProps, CompetitionTypeProps, MyPlayerProps, PlayerBalanceProps, PublicPlayerProps } from '../types';
+import Colors from '../constants/colors';
+import SeasonHeader from './components/SeasonHeader';
+import { SeasonApi } from './api';
+import CompetitionsSection from './components/CompetitionsSection';
+import SeasonSettingsSection from './components/SeasonSettingsSection';
+import EnterSeasonPrompt from './components/EnterSeasonPrompt';
+import SeasonLeaderboard from './components/SeasonLeaderboard';
+
+type SeasonModuleProps = {
+    competition_season_id:string,
+    onShareSeason: (competition_season:CompetitionSeasonProps) => void,
+    player_id?:string,
+    onRequestAuthenticate: (auth_strategy_id?:string) => void,
+    onCompetitionSelect: (c:CompetitionProps) => void
+}
+
+const SeasonModule = ({ competition_season_id, player_id, onShareSeason, onRequestAuthenticate, onCompetitionSelect }:SeasonModuleProps) => {
+    const [ module_size, setModuleSize ] = useState({ width:0, height:0 })
+    const [ show_leaderboard, setShowLeaderboard ] = useState(false);
+    const [ show_enter, setShowEnter ] = useState(false);
+    const [ my_data, setMyData ] = useState<{
+        my_loading: boolean,
+        player?:MyPlayerProps,
+        player_balance?:PlayerBalanceProps
+    }>({
+        my_loading: false
+    });
+    const [ module_data, setData ] = useState<{
+        loading:boolean,
+        action_loading:boolean,
+        competition_season?:CompetitionSeasonProps,
+        competitions:CompetitionProps[],
+        offset:number,
+        competition_types:CompetitionTypeProps[],
+        company?:CompanyProps,
+        admin?:PublicPlayerProps,
+        players:PublicPlayerProps[],
+        competition_season_players:CompetitionSeasonPlayerProps[],
+        competition_season_results:CompetitionSeasonResultProps[],
+        competition_result_types:CompetitionResultTypeProps[],
+        competition_payout_types:CompetitionPayoutTypeProps[]
+    }>({
+        loading:false,
+        action_loading:false,
+        competitions: [],
+        offset: 0,
+        competition_season_players:[],
+        competition_season_results: [],
+        competition_types:[],
+        players: [],
+        competition_result_types:[],
+        competition_payout_types:[]
+    });
+    const { action_loading, competition_season, competitions, competition_season_players, competition_season_results, competition_types, competition_payout_types, competition_result_types } = module_data;
+    const { player, player_balance } = my_data;
+    useEffect(() => {
+        if(!competition_season_id){ return }
+        SeasonApi.setEnvironment();
+        getSeasonData(competition_season_id)
+    },[competition_season_id])
+
+    useEffect(() => {
+        getMyDetails();
+    },[player_id])
+
+    const getMyDetails = async() => {
+        if(!player_id){ return setMyData({ ...my_data, player:undefined, player_balance: undefined }) }
+        setMyData({ ...my_data, my_loading: true })
+        let me = await SeasonApi.getMyDetails();
+        let pb = await SeasonApi.getMyBalance();
+        setMyData({
+            ...my_data,
+            my_loading: false,
+            player: me,
+            player_balance: pb
+        })
+    }
+
+    const getSeasonData = async(id:string) => {
+        setData({ ...module_data, loading:true })
+        const season = await SeasonApi.getSeasonById(id);
+        const comps = await SeasonApi.getCompetitionsBySeasonId(id)
+        const opts = await SeasonApi.getCompetitionOptions();
+        const season_player_resp = await SeasonApi.getSeasonPlayersBySeasonId(id, 0);
+        const players = await SeasonApi.getPlayersByPlayerIds([season.admin_id])
+        let cmpny:CompanyProps | undefined = undefined
+        if(season.company_id){
+            const companies = await SeasonApi.getCompaniesByIds([season.company_id])
+            cmpny = companies[0]
+        }
+        setData({
+            ...module_data,
+            loading:false,
+            competition_season: season,
+            competitions:comps,
+            admin: players[0],
+            company: cmpny,
+            competition_payout_types: opts.competition_payout_types,
+            competition_result_types: opts.competition_result_types,
+            competition_types: opts.competition_types,
+            competition_season_players: season_player_resp.competition_season_players,
+            competition_season_results: season_player_resp.competition_season_results
+        })
+    }
+
+    const handleJoin = async() => {
+        if(action_loading){ return } //No mashy
+        if(!player_id){ return onRequestAuthenticate() }
+        setData({ ...module_data, action_loading: true });
+        const resp = await SeasonApi.joinSeason(competition_season_id);
+        setData({
+            ...module_data,
+            action_loading: false,
+            competition_season: resp.competition_season,
+            competition_season_players: competition_season_players.filter(cp => cp.competition_season_player_id != resp.competition_season_player.competition_season_player_id).concat(resp.competition_season_player),
+            competition_season_results: competition_season_results.filter(cr => cr.competition_season_result_id != resp.competition_season_result.competition_season_result_id).concat(resp.competition_season_result),
+            competitions: competitions.filter(c => !resp.competitions.find(nc => nc.competition_id == c.competition_id)).concat(resp.competitions)
+        })
+    }
+
+    const handleLeave = async(competition_season_player_id:string) => {
+        if(action_loading){ return }
+        if(!player_id){ return onRequestAuthenticate() }
+        setData({ ...module_data, action_loading: true });
+        const resp = await SeasonApi.leaveSeason(competition_season_player_id);
+        setData({
+            ...module_data,
+            action_loading: false,
+            competition_season: resp.competition_season,
+            competition_season_players: competition_season_players.filter(cp => cp.competition_season_player_id != resp.competition_season_player.competition_season_player_id),
+            competition_season_results: competition_season_results.filter(cr => cr.competition_season_result_id != resp.competition_season_result.competition_season_result_id).concat(resp.competition_season_result),
+            competitions: competitions.filter(c => !resp.competitions.find(nc => nc.competition_id == c.competition_id)).concat(resp.competitions)
+        })
+    }
+
+    if(!competition_season){
+        return (
+            <View style={{ flex:1 }}>
+                <ActivityIndicator
+                    size='large'
+                    style={{ padding:20, alignSelf:'center' }}
+                    color={Colors.brand.midnight}
+                />
+            </View>
+        )
+    }
+
+    const selected_season_type = competition_types.find(ct => ct.competition_type_id == competition_season.competition_type_id);
+    const selected_season_result_type = competition_result_types.find(crt => crt.competition_result_type_id == competition_season.competition_result_type_id);
+    const authenticated_season_player = competition_season_players.find(csp => csp.player_id == player_id);
+    const authenticated_season_result = competition_season_results.find(csp => csp.player_id == player_id);
+
+    return (
+        <View style={{ flex:1 }}>
+            <ScrollView style={{ flex:1 }} onLayout={(ev) => {
+                const { width, height } = ev.nativeEvent.layout;
+                setModuleSize({ width, height });
+            }}>
+                <SeasonHeader
+                    competition_season={competition_season}
+                    competitions={competitions}
+                    action_loading={action_loading}
+                    authenticated_season_player={authenticated_season_player}
+                    onShareSeason={onShareSeason}
+                    onJoin={() => setShowEnter(true)}
+                    onLeave={(competition_season_player_id) => handleLeave(competition_season_player_id)}
+                />
+                {selected_season_type ?
+                <SeasonLeaderboard
+                    authenticated_player={player}
+                    authenticated_season_player={authenticated_season_player}
+                    authenticated_season_result={authenticated_season_result}
+                    width={module_size.width}
+                    onLeaderSelect={(p) => console.log(p)}
+                    view_mode='short'
+                    height={module_size.height}
+                    competition_season={competition_season}
+                    competition_type={selected_season_type}
+                    onSeeFull={() => setShowLeaderboard(true)}
+                />
+                :<></>}
+                {selected_season_type && selected_season_result_type ?
+                <SeasonSettingsSection
+                    competition_season={competition_season}
+                    competition_result_type={selected_season_result_type}
+                    competition_type={selected_season_type}
+                    competition_payouts={competition_payout_types}
+                    width={module_size.width}
+                />
+                :<></>}
+                {selected_season_type && selected_season_result_type ?
+                <CompetitionsSection
+                    competitions={competitions}
+                    competition_result_type={selected_season_result_type}
+                    competition_type={selected_season_type}
+                    onCompetitionSelect={(c) => onCompetitionSelect(c)}
+                    width={module_size.width}
+                />
+                :<></>}
+            </ScrollView>
+            {show_enter && selected_season_result_type && selected_season_type ?
+            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end' }}>
+                <EnterSeasonPrompt
+                    width={module_size.width}
+                    competition_season={competition_season}
+                    competition_result_type={selected_season_result_type}
+                    competition_type={selected_season_type}
+                    player_balance={player_balance}
+                    player={player}
+                    onEnter={(promo) => {
+                        console.log(promo)
+                        handleJoin()
+                        setShowEnter(false);
+                    }}
+                    onCancel={() => setShowEnter(false)}
+                    onVerify={() => console.log('VERIFY!')}
+                />
+            </View>
+            :<></>}
+            {show_leaderboard && selected_season_type ?
+            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded }}>
+                <SeasonLeaderboard
+                    authenticated_player={player}
+                    authenticated_season_player={authenticated_season_player}
+                    authenticated_season_result={authenticated_season_result}
+                    width={module_size.width}
+                    onLeaderSelect={(p) => console.log(p)}
+                    view_mode='full'
+                    height={module_size.height}
+                    competition_season={competition_season}
+                    competition_type={selected_season_type}
+                    onSeeFull={() => console.log('See full')}
+                    onClose={() => setShowLeaderboard(false)}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SeasonModule

package/src/CompetitionSeasonManager/api/index.ts

@@ -0,0 +1,127 @@
+import axios from "axios";
+import { APIOverrides } from "../../ApiOverrides";
+import type { CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, MyPlayerProps } from "../../types";
+import type { CompanyMemberProps } from "../../Authenticator/api/types";
+import moment from "moment-mini";
+
+
+let AUTH_SVC_API = ''
+let TP_SVC_API = ''
+//let EVENT_SVC_API = ''
+//let MK_SVC_API = ''
+
+
+export { ManageSeasonApi, ManageSeasonHelpers }
+
+const ManageSeasonApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        TP_SVC_API = endpoints['TP_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;
+    },
+    getCompetitionOptions: async():Promise<{competition_types:CompetitionTypeProps[], competition_result_types:CompetitionResultTypeProps[], competition_payout_types:CompetitionPayoutTypeProps[]}> => {
+        const resp = await axios.get(`${TP_SVC_API}/v1/competitions/options`)
+        return resp.data
+    },
+    getSeasonTemplates: async():Promise<CompetitionSeasonProps[]> => {
+        const resp = await axios.get(`${TP_SVC_API}/v2/competitions/seasons/templates`);
+        return resp.data.competition_seasons
+    },
+    getMyDetails: async():Promise<MyPlayerProps> => {
+        const resp = await axios.get(`${AUTH_SVC_API}/v1/players/player/me`)
+        return resp.data.player
+    },
+    getMyCompanies : async():Promise<{companies:CompanyProps[], company_members:CompanyMemberProps[]}> => {
+        const resp = await axios.get(`${AUTH_SVC_API}/v1/companies/me`)
+        const { companies, company_members } = resp.data
+        return { companies, company_members }
+    },
+    activateSeason: async(competition_season_id:string):Promise<CompetitionSeasonProps> => {
+        const resp = await axios.post(`${TP_SVC_API}/v2/competitions/season/activate`, { competition_season_id });
+        return resp.data.competition_season
+    },
+    deleteSeason: async(competition_season_id:string):Promise<CompetitionSeasonProps> => {
+        const resp = await axios.post(`${TP_SVC_API}/v2/competitions/season/delete`, { competition_season_id });
+        return resp.data.competition_season
+    },
+    getSeasonById: async(competition_season_id:string):Promise<CompetitionSeasonProps> => {
+        const resp = await axios.get(`${TP_SVC_API}/v2/competitions/seasons/season/${competition_season_id}`);
+        return resp.data.competition_season
+    },
+    getCompetitionsBySeasonId: async(competition_season_id:string):Promise<CompetitionProps[]> => {
+        const resp = await axios.get(`${TP_SVC_API}/v2/competitions/season/${competition_season_id}`);
+        return resp.data.competitions
+    },
+    createSeason: async(competition_season:CompetitionSeasonProps):Promise<CompetitionSeasonProps> => {
+        const resp = await axios.post(`${TP_SVC_API}/v2/competitions/seasons/season/create`, { competition_season });
+        console.log(resp.data)
+        return resp.data.competition_season
+    },
+    updateSeason: async(competition_season:CompetitionSeasonProps):Promise<CompetitionSeasonProps> => {
+        const resp = await axios.post(`${TP_SVC_API}/v2/competitions/seasons/season/update`, { competition_season })
+        return resp.data.competition_season
+    }
+}
+
+
+const ManageSeasonHelpers = {
+    getPendingSeason: ():CompetitionSeasonProps => {
+        return {
+            competition_season_id: '',
+            admin_id: '',
+            season_name:'',
+            season_description:'Pending Description',
+            invite_only: true,
+            ticket_revenue:0,
+            tickets_available: 10,
+            tickets_sold:0,
+            single_buy_in: true,
+            expected_competition_count: 1,
+            ticket_price:0,
+            max_picks: 0,
+            initial_balance: 1000,
+            balance_rollover: false,
+            unallocated_funds: 0,
+            competition_type_id: '1',
+            allow_late_buy_in: false,
+            payout_allocation: 1,
+            competition_result_type_id: '1',
+            payout_amt: 0,
+            scheduled_datetime: moment().add(1, 'week'),
+            status: 'pending',
+            market_type: 'FOR_MONEY',
+            create_datetime: '',
+            last_update_datetime:''
+        }
+    },
+    isSeasonValid: (cs:CompetitionSeasonProps):string[] => {
+        let errors:string[] = []
+        if(!cs.season_name){ errors.push('Please provide a valid name') }
+        if(!cs.competition_result_type_id){ errors.push('Please give a valid competition result type') }
+        return errors
+    },
+    isInfoChanged: (cs:CompetitionSeasonProps, ds:CompetitionSeasonProps) => {
+        let init_cs = JSON.stringify({ season_name: cs.season_name, season_description: cs.season_description, invite_only:cs.invite_only })
+        let draft_cs = JSON.stringify({ season_name: ds.season_name, season_description: ds.season_description, invite_only:ds.invite_only })
+        return draft_cs != init_cs ? true : false
+    },
+    isSettingsChanged: (cs:CompetitionSeasonProps, ds:CompetitionSeasonProps) => {
+        let init_cs = JSON.stringify({ ticket_price:cs.ticket_price, payout_allocation:cs.payout_allocation, competition_type_id:cs.competition_type_id, competition_result_type_id:cs.competition_result_type_id, max_picks: cs.max_picks, initial_balance: cs.initial_balance, allow_late_buy_in:cs.allow_late_buy_in })
+        let draft_cs = JSON.stringify({ ticket_price:ds.ticket_price, payout_allocation: ds.payout_allocation, competition_type_id:ds.competition_type_id, competition_result_type_id:ds.competition_result_type_id, max_picks: ds.max_picks, initial_balance: ds.initial_balance, allow_late_buy_in:ds.allow_late_buy_in })
+        return draft_cs != init_cs ? true : false
+    },
+    isSettingsValid: (ds:CompetitionSeasonProps) => {
+        if(!ds.competition_type_id){ return false }
+        if(!ds.competition_result_type_id){ return false }
+        let payout_allocation = parseFloat(ds.payout_allocation as string)
+        let ticket_price = parseFloat(ds.ticket_price as string)
+        if(isNaN(payout_allocation)){ return false }
+        if(isNaN(ticket_price)){ return false }
+        if(ticket_price < 0){ return false }
+        if(payout_allocation <= 0){ return false }
+        if(payout_allocation > 1){ return false }
+        return true
+    }
+}

package/src/CompetitionSeasonManager/components/CompetitionSelector.tsx

@@ -0,0 +1,2 @@
+
+

package/src/CompetitionSeasonManager/components/CompetitionsForm.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { TouchableOpacity, View, FlatList } from 'react-native';
+import { view_styles } from '../../constants/styles';
+import type { CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps } from '../../types';
+import CompetitionCard from '../../Engage/components/CompetitionCard';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import moment from 'moment-mini';
+
+type CompetitionsFormProps = {
+    competition_season:CompetitionSeasonProps,
+    competitions:CompetitionProps[],
+    competition_types:CompetitionTypeProps[],
+    competition_result_types:CompetitionResultTypeProps[],
+    onAddCompetition:() => void
+}
+
+const CompetitionsForm = ({ competition_season, competitions, competition_result_types, competition_types, onAddCompetition }:CompetitionsFormProps) => {
+    const [ expanded, setExpanded ] = useState(true);
+    const [ active_tab, setActiveTab ] = useState('active');
+
+    let filtered_comptitions = [ ...competitions ]
+    if(active_tab == 'active'){ filtered_comptitions = filtered_comptitions.filter(c => c.status != 'closed') }
+    else { filtered_comptitions = filtered_comptitions.filter(c => c.status == 'closed') }
+
+    const renderCompetitions = (data:{item:CompetitionProps, index:number}) => {
+        const competition_type = competition_types.find(ct => ct.competition_type_id == data.item.competition_type_id)
+        const competition_result_type = competition_result_types.find(crt => crt.competition_result_type_id == data.item.competition_result_type_id);
+        if(!competition_type || !competition_result_type){ return <></> }
+        return (
+            <View style={{ margin:4 }}>
+                <CompetitionCard
+                    competition={data.item}
+                    competition_result_type={competition_result_type}
+                    competition_type={competition_type}
+                    onCompetitionSelect={(comp) => console.log(comp)}
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section }}>
+            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setExpanded(!expanded)}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>Competitions</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>Below are the competitions that are included in this season</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} size={8} color={Colors.brand.midnight} />
+            </TouchableOpacity>
+            {expanded ?
+            <View style={{ ...view_styles.section_body, padding:0 }}>
+                <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme='header_2'>{active_tab == 'active' ? 'Active Competitions' : 'Closed Competitions'}</Text>
+                    </View>
+                    <Button
+                        title='ADD'
+                        style={{ opacity: competition_season.following_season_id ? 0.5: 1 }}
+                        title_color={Colors.shades.white}
+                        backgroundColor={Colors.utility.success}
+                        onPress={() => {
+                            if(competition_season.following_season_id){ return alert('Competitions are created based on the template season and cannot be customized') }
+                            onAddCompetition()
+                        }}
+                    />
+                </View>
+                <View style={{ ...view_styles.body_row, padding:0, margin:10, backgroundColor:Colors.shades.white, borderRadius:22, borderWidth:4, borderColor:Colors.shades.shade100}}>
+                <Button
+                    title='ACTIVE'
+                    title_color={active_tab == 'active' ? Colors.shades.white : Colors.brand.midnight}
+                    title_weight={active_tab == 'active' ? 'bold' : 'regular'}
+                    padding={15}
+                    title_size={12}
+                    style={{flex:1}}
+                    borderRadiusOverride={{
+                        borderTopLeftRadius: 22,
+                        borderBottomLeftRadius:22,
+                        borderTopRightRadius:0,
+                        borderBottomRightRadius:0
+                    }}
+                    backgroundColor={active_tab == 'active' ? Colors.brand.midnight : Colors.shades.white}
+                    onPress={() => setActiveTab('active')}
+                />
+                <Button
+                    title='CLOSED'
+                    title_size={12}
+                    title_color={active_tab == 'closed' ? Colors.shades.white : Colors.brand.midnight}
+                    title_weight={active_tab == 'closed' ? 'bold' : 'regular'}
+                    padding={15}
+                    style={{flex:1}}
+                    borderRadiusOverride={{
+                        borderTopLeftRadius: 0,
+                        borderBottomLeftRadius:0,
+                        borderTopRightRadius:22,
+                        borderBottomRightRadius:22
+                    }}
+                    backgroundColor={active_tab == 'closed' ? Colors.brand.midnight : Colors.shades.white}
+                    onPress={() => setActiveTab('closed')}
+                />
+            </View>
+                <FlatList
+                    data={filtered_comptitions.sort((a,b) => moment(b.scheduled_datetime).unix() - moment(a.scheduled_datetime).unix())}
+                    renderItem={renderCompetitions}
+                    keyExtractor={(item) => item.competition_id.toString()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default CompetitionsForm