be-components 5.8.0 → 5.8.2

package/src/Campaign/components/BetAlert.tsx

@@ -1,7 +1,7 @@
 import { Image } from "react-native";
 import { Icons } from "../../Components";
 import { Text, View } from "../../Components/Themed";
-import type { AthleteProps, EventProps, OrderProps, PublicPlayerProps, TeamProps } from "../../types"
+import type { AthleteProps, EventProps, LeagueProps, OrderProps, PublicPlayerProps, TeamProps, TournamentProps } from "../../types"
 import React from 'react';
 import OrderGradeBar from "../../MarketComponents/components/OrderGradeBar";
 import { MarketComponentHelpers } from "../../MarketComponents/api";
@@ -9,19 +9,22 @@ import QRCode from "react-qr-code";
 import { useColors } from "../../constants/useColors";
 import moment from "moment-mini";
 import ProgressTimer from "./ProgressTimer";
+import { AthleteImage } from "../../Components/Jerseys";
 
 type BetAlertProps = {
     order:OrderProps,
+    league?:LeagueProps,
     team?:TeamProps,
     athlete?:AthleteProps,
     event?:EventProps,
+    tournament?:TournamentProps,
     player?:PublicPlayerProps,
     color_mode?:'light'|'dark'
     
     onClose:() => void
 }
 
-const BetAlert = ({ player, order, team, athlete, event, color_mode, onClose }:BetAlertProps) => {
+const BetAlert = ({ player, order, league, team, athlete, event, tournament, color_mode, onClose }:BetAlertProps) => {
     const Colors = useColors({ mode: color_mode });
     
     return (
@@ -52,6 +55,11 @@ const BetAlert = ({ player, order, team, athlete, event, color_mode, onClose }:B
                     <Text theme='h2'>{event.home?.market_name}</Text>
                 </View>
                 :<></>}
+            {tournament ?
+                <View style={{ flexDirection:'row', alignItems:'center', justifyContent:'center', padding:10 }}>
+                    <Text theme='h1' style={{ marginRight:20, marginLeft:20 }}>{tournament.tournament_name}</Text>
+                </View>
+                :<></>}
             {player ?
             <View>
                 <Image
@@ -68,10 +76,11 @@ const BetAlert = ({ player, order, team, athlete, event, color_mode, onClose }:B
                         resizeMode='cover'
                     />
                     :athlete ?
-                    <Image
-                        source={{ uri: athlete.image?.url }}
-                        style={{ height:60, width:60 }}
-                        resizeMode='cover'
+                    <AthleteImage
+                        athlete={athlete}
+                        size={40}
+                        number_size={18}
+                        league={league}
                     />
                     :<></>}
                     

package/src/Campaign/components/CampaignAnalytics.tsx

@@ -1,18 +1,24 @@
 import React, { useEffect, useState } from 'react';
-import { View } from "../../Components/Themed"
+import { Text, View } from "../../Components/Themed"
 import moment from 'moment-mini';
-import { CampaignApi } from '../api';
-import type { OrderAnalyticsProps } from '../../types';
+import { CampaignApi, CampaignHelpers } from '../api';
+import type { CampaignParticipantProps, NewOverallAnalytics, OrderAnalyticsProps, PublicPlayerProps } from '../../types';
+import { ActivityIndicator, FlatList, Image } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+import { CompetitionHelpers } from '../../Competition/api';
 
 
-type CampaignAnalyticsProps = {
-    campaign_id:string
+type CampaignLeaderboardProps = {
+    campaign_id:string,
+    players:PublicPlayerProps[],
+    campaign_participants:CampaignParticipantProps[]
 }
 
-const CampaignAnalytics = ({ campaign_id }:CampaignAnalyticsProps) => {
-    
+const CampaignLeaderboard = ({ campaign_id, players, campaign_participants }:CampaignLeaderboardProps) => {
+    const Colors = useColors();
     const time_options = [
-        { label: 'Last 7 Days', to: moment().unix(), from: moment().subtract(7, 'days').unix() }
+        { label: 'Last Year', to: moment().unix(), from: moment().subtract(365, 'days').unix() }
     ]
 
     const [ module_state, setModuleState ] = useState<{
@@ -20,11 +26,11 @@ const CampaignAnalytics = ({ campaign_id }:CampaignAnalyticsProps) => {
         time_option: any,
         analytics:OrderAnalyticsProps[]
     }>({
-        loading:false,
+        loading:true,
         time_option: time_options[0],
         analytics: []
     });
-    //const { analytics } = module_state;
+    const { loading, analytics } = module_state;
 
     useEffect(() => {
         let option = time_options[0]
@@ -34,20 +40,77 @@ const CampaignAnalytics = ({ campaign_id }:CampaignAnalyticsProps) => {
 
     const handleLoadAnalytics = async(option:{ label:string, to:number, from:number }) => {
         CampaignApi.setEnvironment();
+        setModuleState({ ...module_state, loading:true });
         const analytics = await CampaignApi.getCampaignAnalytics(campaign_id, option.to, option.from);
         setModuleState({
             ...module_state,
+            loading:false,
             time_option: option,
             analytics
         })
     }
 
-    //const agg = CampaignHelpers.aggregateAnalytics(analytics)
+    const renderLeaders = (data:{ item:NewOverallAnalytics, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        if(!player){ return <></> }
+        const participant = campaign_participants.find(cp => cp.player_id == data.item.player_id);
+        return (
+            <View style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <View transparent style={{ paddingRight:10, borderRightWidth:1, borderColor:Colors.borders.light }}>
+                    <Text theme='h1'>{CompetitionHelpers.formatPlace(data.index + 1)}</Text>
+                </View>
+                <Image
+                    source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:40, width:40, borderRadius:100, marginLeft:10 }}
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>@{player.username}</Text>
+                    {participant ?
+                    <Text theme='description' style={{ marginTop:3 }}>First checked in {moment(participant.create_datetime).fromNow()}</Text>
+                    :<></>}
+                </View>
+                <View>
+                    <Text theme='description' color={data.item.roi_pct >= 0 ? Colors.text.success : Colors.text.error}>{(data.item.roi_pct * 100).toFixed(2)}%</Text>
+                </View>
+            </View>
+        )
+    }
+
+    const leaders = CampaignHelpers.getCampaignLeaderboard(analytics);
     return (
         <View>
-
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <Icons.LeaderboardIcon size={28} color={Colors.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>Leaderboard</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Leaders based on action placed while checked in</Text>
+                </View>
+                <View transparent style={{ marginLeft:5 }}>
+                    <Text theme='action'>ROI %</Text>
+                </View>
+            </View>
+            <View transparent>
+                {loading ?
+                <ActivityIndicator style={{ margin:20 }} size='large' color={Colors.text.h1} />
+                :<></>}
+                {leaders.length > 0 ?
+                <FlatList
+                    data={leaders}
+                    key={'campaign_leaders'}
+                    keyExtractor={(item) => item.player_id.toString()}
+                    renderItem={renderLeaders}
+                />
+                : !loading ?
+                <View style={{ alignItems:'center', padding:10 }}>
+                    <View float style={{ height:120, width:120, borderRadius:8, padding:10, justifyContent:'center', alignItems:'center' }}>
+                        <Icons.LeaderboardIcon size={36} color={Colors.text.h1} />
+                        <Text theme='h1' style={{ marginTop:10 }} textAlign='center'>No Data Yet!</Text>
+                    </View>
+                </View>
+                :<></>}
+            </View>
         </View>
     )
 }
 
-export default CampaignAnalytics
+export default CampaignLeaderboard

package/src/Campaign/components/NewPlayerAlert.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { CampaignParticipantProps, PublicPlayerProps } from "../../types"
+import { Icons } from '../../Components';
+import { useColors } from '../../constants/useColors';
+import moment from 'moment-mini';
+import { Image } from 'react-native';
+import ProgressTimer from './ProgressTimer';
+import QRCode from 'react-qr-code';
+
+type NewPlayerAlertProps = {
+    view_mode:'desktop'|'mobile',
+    player:PublicPlayerProps,
+    campaign_participant:CampaignParticipantProps,
+    onViewProfile?:(player:PublicPlayerProps) => void
+    onClose:() => void
+}
+
+const NewPlayerAlert = ({ player, view_mode, campaign_participant, onClose, onViewProfile }:NewPlayerAlertProps) => {
+    const Colors = useColors();
+    return (
+        <View float style={{ width:350 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:18, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <Icons.BettorEdgeIcon size={18} color={Colors.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:20, marginRight:10 }}>
+                    <Text theme='h1'>NEW PLAYER ALERT!</Text>
+                    <Text theme='description' style={{ marginTop:5 }}>@{player?.username}  {`\u2022`} First Checked In {moment(campaign_participant.create_datetime).fromNow()}</Text>
+                </View>
+            </View>
+            <View type='body'>
+                <Image
+                    source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:200, width:350 }}
+                    resizeMode='cover'
+                />
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>    
+                    <View transparent style={{ flex:1, marginLeft:10 }}>
+                        <Text theme='h1'>@{player.username}</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>Joined BettorEdge {moment(player.create_datetime).fromNow()}</Text>
+                    </View>
+                </View>
+                {view_mode == 'desktop' ?
+                <View type='header' style={{alignItems:'center', padding:10}}>
+                    <QRCode
+                        size={100}
+                        value={`https://play.bettoredge.com/social/player/${campaign_participant.player_id}`}
+                    />
+                    <Text textAlign='center' theme='h2' style={{ marginTop:4 }}>CHECK OUT MY PROFILE</Text>
+                </View>
+                :<></>}
+            </View>
+            <View type='footer' style={{ borderBottomRightRadius:view_mode == 'desktop' ? 8: 0, borderBottomLeftRadius:view_mode == 'desktop'?8:0 }}>
+                <ProgressTimer
+                    onTimesUp={() => onClose()}
+                    time_id={campaign_participant.campaign_participant_id.toString()}
+                    total_time={15}
+                />
+            </View>
+            {view_mode == 'mobile' ?
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', borderBottomRightRadius:8, borderBottomLeftRadius:8, padding:10 }}>
+                {onViewProfile ?
+                <Button
+                    title='View Profile'
+                    type='success'
+                    style={{ flex:1, marginRight:3 }}
+                    onPress={() => onViewProfile(player)}
+                />
+                :<></>}
+                <Button
+                    title='CLOSE'
+                    type='error'
+                    style={{ flex:1, marginLeft:3 }}
+                    onPress={() => onClose()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default NewPlayerAlert

package/src/Campaign/components/ParticipantCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, View } from "../../Components/Themed"
-import type { CampaignParticipantProps, EventProps, OrderAnalyticsProps, OrderProps, PublicPlayerProps } from "../../types"
+import type { CampaignParticipantProps, EventProps, MatchProps, OrderAnalyticsProps, OrderProps, PublicPlayerProps, TournamentProps } from "../../types"
 import { Image } from 'react-native';
 import moment from 'moment-mini';
 import ActionList from './ActionList';
@@ -11,10 +11,12 @@ type ParticipantCardProps = {
     campaign_participant:CampaignParticipantProps,
     player:PublicPlayerProps,
     orders:OrderProps[],
+    tournaments:TournamentProps[],
+    matches:MatchProps[],
     analytics:OrderAnalyticsProps[],
     events:EventProps[]
 }
-const ParticipantCard = ({ player, campaign_participant, orders, events, analytics }:ParticipantCardProps) => {
+const ParticipantCard = ({ player, campaign_participant, orders, events, tournaments, matches, analytics }:ParticipantCardProps) => {
     const agg = CampaignHelpers.aggregateAnalytics(analytics);
     
     return (
@@ -67,6 +69,9 @@ const ParticipantCard = ({ player, campaign_participant, orders, events, analyti
                 </View>
                 <ActionList
                     orders={orders}
+                    hide_header
+                    tournaments={tournaments}
+                    matches={matches}
                     players={[player]}
                     events={events}
                 />

package/src/Campaign/components/ParticipantsList.tsx

@@ -44,7 +44,7 @@ const ParticipantsList = ({ campaign_participants, players, selected_participant
     }
 
     return (
-        <View type='header' style={{ flex:1 }}>
+        <View style={{ flex:1 }}>
             <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                 <View transparent style={{ flex:1, marginRight:10 }}>
                     <Text theme='h1'>Participants</Text>