be-components 7.4.0 → 7.4.2

package/src/MyAction/index.tsx

@@ -0,0 +1,316 @@
+/**
+ * My Action Components
+ * This is responsible for viewing all of your action in one spot
+ * @returns 
+ */
+import React, { useEffect, useState } from 'react';
+import { Text, View } from "../Components/Themed"
+import { FlatList } from 'react-native';
+import type { ActionListProps, AthleteProps, BracketCompetitionProps, CompetitionPlayerProps, CompetitionProps, CompetitionRecordProps, CompetitionResultProps, CompetitionResultTypeProps, CompetitionTypeProps, EventProps, LeagueProps, MatchProps, MyPlayerProps, OrderProps, ParlayPositionProps, ParlayProps, PollOptionProps, PollProps, PollResponseProps, SquaresCompetitionProps, TeamProps, TournamentProps } from '../types';
+import { MyActionApi, MyActionHelpers } from './api';
+//import { useColors } from '../constants/useColors';
+import ContestStatRow from './components/ContestStatRow';
+import ParlayRow from './components/ParlayRow';
+import FlashRow from './components/FlashRow';
+import SquaresRow from './components/SquaresRow';
+import CompetitionRow from './components/CompetitionRow';
+import BracketRow from './components/BracketRow';
+
+type MyActionProps = {
+    me:MyPlayerProps,
+    market_type:'FOR_MONEY'|'FREE'
+}
+
+
+const sections = [ 'header', 'action' ]
+const MyAction = ({ me, market_type }:MyActionProps) => {
+    //const Colors = useColors();
+    const [ size, setSize ] = useState({ width:0, height:0 });
+    const [ contest_state, setContestState ] = useState<{
+        loading:boolean,
+        leagues:LeagueProps[],
+        events:EventProps[],
+        tournaments:TournamentProps[],
+        matches:MatchProps[],
+        athletes:AthleteProps[],
+        teams:TeamProps[]
+    }>({
+        loading:false,
+        events:[],
+        matches:[],
+        leagues:[],
+        tournaments:[],
+        athletes: [],
+        teams:[]
+    });
+    const { events, tournaments, matches, teams, athletes, leagues } = contest_state;
+    const [ engagement_state, setEngagementState ] = useState<{
+        loading:boolean,
+        competitions:CompetitionProps[],
+        competition_players:CompetitionPlayerProps[],
+        competition_records:CompetitionRecordProps[],
+        competition_results:CompetitionResultProps[],
+        competition_types:CompetitionTypeProps[],
+        competition_result_types:CompetitionResultTypeProps[],
+        squares_competitions:SquaresCompetitionProps[],
+        bracket_competitions:BracketCompetitionProps[]
+    }>({
+        loading:false,
+        competitions:[],
+        competition_players:[],
+        competition_result_types:[],
+        competition_results:[],
+        competition_records:[],
+        competition_types:[],
+        squares_competitions:[],
+        bracket_competitions:[]
+    });
+    const { competition_players, competition_records, competition_result_types, competition_results, competition_types, competitions, squares_competitions, bracket_competitions } = engagement_state;
+    const [ active_flash_state, setActiveFlashState ] = useState<{
+        loading:boolean,
+        poll_responses:PollResponseProps[],
+        polls:PollProps[],
+        poll_options:PollOptionProps[],
+    }>({
+        loading: false,
+        poll_options:[],
+        poll_responses:[],
+        polls:[],
+    });
+    const { polls, poll_options, poll_responses } = active_flash_state;
+
+    const [ active_order_state, setActiveOrderState ] = useState<{
+        loading:boolean,
+        orders:OrderProps[],
+        parlays:ParlayProps[],
+        parlay_positions:ParlayPositionProps[],
+        parlay_orders:OrderProps[]
+    }>({
+        loading:false,
+        orders: [],
+        parlays:[],
+        parlay_positions:[],
+        parlay_orders:[]
+    });
+    const { orders, parlays, parlay_orders, parlay_positions } = active_order_state;
+
+    const action_list = MyActionHelpers.sortAction(orders, parlays, parlay_orders, polls, competitions, squares_competitions, bracket_competitions);
+    //const stats = MyActionHelpers.getActionStats(orders, parlays, parlay_positions, competitions, squares_competitions, bracket_competitions)
+
+    useEffect(() => {
+        if(!me){ return }
+        MyActionApi.setEnvironment();
+        getActiveOrderData();
+        getActiveFlashData();
+        getActiveEngagements();
+    },[me]);
+
+    const getActiveEngagements = async() => {
+        setEngagementState({ ...engagement_state, loading:true });
+        const options = await MyActionApi.EngagementApi.getCompetitionOptions();
+        const c_resp = await MyActionApi.EngagementApi.getMyActiveCompetitions();
+        const s_resp = await MyActionApi.EngagementApi.getMyActiveSquaresCompetitions();
+        const b_resp = await MyActionApi.EngagementApi.getMyActiveBracketCompetitions();
+        setEngagementState({
+            ...engagement_state,
+            loading:false,
+            competition_types: options.competition_types,
+            competition_result_types: options.competition_result_types,
+            competitions: c_resp.competitions,
+            competition_players: c_resp.competition_players,
+            competition_records: c_resp.competition_records,
+            competition_results: c_resp.competition_results,
+            squares_competitions: s_resp.squares_competitions,
+            bracket_competitions: b_resp.bracket_competitions
+        });
+    }
+
+    const getActiveFlashData = async() => {
+        setActiveFlashState({ ...active_flash_state, loading:true });
+        const sfa = await MyActionApi.FlashApi.getMyFlashAction();
+        setActiveFlashState({
+            ...active_flash_state,
+            polls: sfa.polls,
+            poll_responses: sfa.poll_responses,
+            poll_options: sfa.poll_options,
+            loading:false
+        })
+    }
+
+    const getActiveOrderData = async() => {
+        setActiveOrderState({ ...active_order_state, loading:true });
+        const soa = await MyActionApi.OrderApi.getMyAction();
+        setActiveOrderState({
+            ...active_order_state,
+            orders: soa.orders,
+            parlays: soa.parlays,
+            parlay_orders: soa.parlay_orders,
+            parlay_positions: soa.parlay_positions,
+            loading:false
+        });
+        getContestData(soa.orders.concat(soa.parlay_orders))
+    }
+
+    const getContestData = async(orders:OrderProps[]) => {
+        setContestState({ ...contest_state, loading:true });
+        const { event_ids, tournament_ids, match_ids, athlete_ids, team_ids } = MyActionHelpers.getContestsFromOrders(orders);
+        const s_contests = await MyActionHelpers.getContestsByIds(event_ids, tournament_ids, match_ids, athlete_ids, team_ids);
+        const s_leagues = await MyActionApi.ContestApi.getLeagues(); 
+        setContestState({
+            ...contest_state,
+            leagues: s_leagues,
+            events: s_contests.events,
+            tournaments: s_contests.tournaments,
+            matches: s_contests.matches,
+            athletes: s_contests.athletes,
+            teams: s_contests.teams,
+            loading:false
+        })
+    }
+
+    const renderAction = (data:{ item:ActionListProps, index:number }) => {
+        switch(data.item.type){
+            case 'contest':
+                if(!data.item.contest_type){ return <></> }
+                const event = events.find(e => data.item.contest_type == 'team' && e.event_id == data.item.id);
+                const tournament = tournaments.find(t => data.item.contest_type == 'tournament' && t.tournament_id == data.item.id);
+                const match = matches.find(m => data.item.contest_type == 'match' && m.match_id == data.item.id);
+                const { contest_title, scheduled_datetime } = MyActionHelpers.getContestDetails(data.item.contest_type, event, tournament, match);
+                return (
+                    <ContestStatRow 
+                        leagues={leagues}
+                        events={events}
+                        tournaments={tournaments}
+                        matches={matches}
+                        teams={teams}
+                        athletes={athletes}
+                        market_type={market_type} 
+                        width={size.width} 
+                        contest_label={contest_title} 
+                        time_detail={scheduled_datetime.format('MMM DD YYYY @ hh:mm a')} 
+                        orders={data.item.orders} 
+                    />
+                )
+            case 'parlay':
+                const parlay = parlays.find(p => p.parlay_id == data.item.id);
+                const p_orders = parlay_orders.filter(po => po.parlay_id == data.item.id);
+                const p_positions = parlay_positions.filter(pp => pp.parlay_id == data.item.id);
+                if(!parlay){ return <></> }
+                return (
+                    <ParlayRow
+                        parlay={parlay}
+                        leagues={leagues}
+                        events={events}
+                        tournaments={tournaments}
+                        matches={matches}
+                        athletes={athletes}
+                        teams={teams}
+                        parlay_orders={p_orders}
+                        parlay_positions={p_positions}
+                        market_type={market_type}
+                        width={size.width}
+                    />
+                )
+            case 'flash':
+                const poll = polls.find(p => p.poll_id == data.item.id);
+                if(!poll){ return <></> }
+                let responses = poll_responses.filter(pr => pr.poll_id == data.item.id);
+                let options = poll_options.filter(po => po.poll_id == data.item.id);
+                return (
+                    <FlashRow
+                        poll={poll}
+                        poll_options={options}
+                        poll_responses={responses}
+                        market_type={market_type}
+                        width={size.width}
+                    />
+                )
+            case 'squares':
+                const squares_competition = squares_competitions.find(sc => sc.sq_comp_id == data.item.id);
+                if(!squares_competition){ return <></> }
+                return (
+                    <SquaresRow
+                        squares_competition={squares_competition}
+                        market_type={market_type}
+                        width={size.width}
+                    />
+                )
+            case 'competition':
+                const competition = competitions.find(c => c.competition_id == data.item.id);
+                if(!competition){ return <></> }
+                const competition_type = competition_types.find(ct => ct.competition_type_id == competition.competition_type_id);
+                const competition_result_type = competition_result_types.find(crt => crt.competition_result_type_id == competition.competition_result_type_id);
+                const competition_player = competition_players.find(cp => cp.competition_id == data.item.id);
+                const competition_record = competition_records.find(cr => cr.competition_id == data.item.id);
+                const competition_result = competition_results.find(cr => cr.competition_id == data.item.id);
+                if(!competition_result_type || !competition_type ||!competition_player || !competition_record || !competition_result){ return <></> }
+                return (
+                    <CompetitionRow
+                        competition={competition}
+                        competition_player={competition_player}
+                        competition_record={competition_record}
+                        competition_result={competition_result}
+                        competition_result_type={competition_result_type}
+                        competition_type={competition_type}
+                        market_type={market_type}
+                        width={size.width}
+                    />
+                )
+            case 'bracket':
+                const bracket_competition = bracket_competitions.find(bc => bc.bracket_competition_id == data.item.id);
+                if(!bracket_competition){ return <></> }
+                return (
+                    <BracketRow
+                        bracket_competition={bracket_competition}
+                        width={size.width}
+                        market_type={market_type}
+                    />
+                )
+            default: return <></>
+        }
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <></>
+                )
+            case 'action':
+                return (
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                          <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>My Action</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Action List</Text>
+                          </View>
+                        </View>
+                        <FlatList
+                            data={action_list}
+                            key={'action_list'}
+                            keyExtractor={(item) => item.id.toString()}
+                            renderItem={renderAction}
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+
+    return (
+        <View transparent style={{ flex:1 }} onLayout={(ev) => {
+            const { width, height } = ev.nativeEvent.layout
+            setSize({ width, height });
+        }}>
+            <FlatList
+                data={sections}
+                key={'action_sections'}
+                keyExtractor={item => item}
+                renderItem={renderSections}
+            />
+        </View>
+    )
+}
+
+export default MyAction

package/src/PartnerPortal/components/EmbedManager.tsx

@@ -12,6 +12,7 @@ import CompetitionSelector from './CompetitionSelector';
 import SquaresSelector from './SquaresSelector';
 import FlashSelector from './FlashSelector';
 import FlashMarketSelector from './FlashMarketSelector';
+import StringSelector from './StringSelector';
 
 type EmbedManagerProps = {
     company_embed_id:string,
@@ -163,6 +164,25 @@ const EmbedManager = ({ float, me, company_id, company_embed_id, onFocusPosition
                     />
                 </View>
                 )
+            case 'string_selector':
+                if(!data.item.options){ return <></> }
+                return (
+                    <View transparent style={{ borderBottomWidth:1, borderColor:Colors.borders.light, padding:10 }}>
+                        <View transparent>
+                            <Text theme='h1'>{data.item.label}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>{data.item.description}</Text>
+                        </View>
+                        <View transparent style={{ marginTop:10 }}>
+                            <StringSelector
+                                active_value={value}
+                                options={data.item.options}
+                                onSelectOption={(option) => {
+                                    setEmbedData({ ...embed_data, draft_company_embed: { ...draft_company_embed, properties: { ...draft_company_embed.properties, [data.item.property]: option?.value } } })
+                                }}
+                            />
+                        </View>
+                    </View>
+                )
             case 'switch':
                 //Switch is going to be either a 1 or a 0.  0 is off
                 const boolean_value = value && value == '1' ? true : false

package/src/PartnerPortal/components/StringSelector.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import type { StringSelectorOptionProps } from "../../types";
+import { useColors } from "../../constants/useColors";
+import { Button, Text, View } from "../../Components/Themed";
+import { FlatList } from "react-native";
+import { Icons } from "../../Components";
+
+type StringSelectorProps = {
+    active_value?:string,
+    options: StringSelectorOptionProps[],
+    onSelectOption:(option:StringSelectorOptionProps | undefined) => void
+}
+const StringSelector = ({ active_value, options, onSelectOption }:StringSelectorProps) => {
+    const Colors = useColors();
+    const [ visible, setVisible ] = useState(false);
+
+    const active_option = options.find(o => o.value == active_value);
+
+
+    const renderLeagues = (data:{ item:StringSelectorOptionProps, index:number }) => {
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => { setVisible(false); onSelectOption(data.item) }}
+            >
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.label}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.description}</Text>
+                </View>
+            </Button>
+        )
+    }
+
+    return (
+        <View style={{ padding:15 }} float>
+            <Button transparent style={{ padding:0, flexDirection:'row', alignItems:'center' }} onPress={() => { setVisible(!visible); onSelectOption(undefined)}}>
+                <Text style={{ flex:1, marginRight:10 }} theme='h1'>{active_option?.label ?? 'Select Option'}</Text>
+                <Icons.ChevronIcon direction={visible?'up':'down'} color={Colors.text.h1} size={8} />
+            </Button>
+            {visible ?
+            <View transparent style={{ marginTop:20 }}>
+            <FlatList
+                data={options.sort((a,b) => a.value.localeCompare(b.value))}
+                key={'string_option_selector'}
+                keyExtractor={item => item.value.toString()}
+                renderItem={renderLeagues}
+            />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default StringSelector

package/src/index.tsx

@@ -68,10 +68,12 @@ import EmbedManager from './PartnerPortal/components/EmbedManager';
 import CreateEmbed from './PartnerPortal/components/CreateEmbed';
 import ReferralCodeManager from './PartnerPortal/components/ReferralCodeManager';
 import FlashCampaignManager from './PartnerPortal/components/FlashCampaignManager';
+import MyAction from './MyAction';
 
 export {
   Authenticator,
   Observer,
+  MyAction,
   CreateEmbed,
   ReferralCodeManager,
   CreateEngagement,

package/src/types.d.ts

@@ -2596,6 +2596,17 @@ export interface ParlayPositionProps {
     last_update_datetime:any
 }
 
+export interface ActionListProps {
+    id: string,
+    type: 'contest'|'order'|'parlay'|'competition'|'squares'|'bracket'|'flash',
+    contest_type?:'team'|'tournament'|'match',
+    orders:OrderProps[],
+    action_datetime:Moment
+}
+
+export interface StringSelectorOptionProps {
+     value:string, label:string, description:string
+}
 
 export interface OrderProps {
     order_id:string; //Primary key of the order
@@ -3125,6 +3136,7 @@ export interface EmbedPropertyProps {
     label:string,
     priority:number
     create_datetime: any,
+    options?: StringSelectorOptionProps[],
     last_update_datetime:any
 }