be-components 7.2.1 → 7.2.3

package/src/PartnerPortal/index.tsx

@@ -1,18 +1,21 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Text, View } from "../Components/Themed"
-import type { BracketCompetitionProps, CompanyEmbedProps, CompanyProps, CompetitionProps, EmbedPropertyProps, EmbedProps, ExternalKeyProps, MyPlayerProps, PollCampaignProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
+import type { BracketCompetitionProps, CompanyEmbedProps, CompanyPlayerProps, CompanyPlayerStatProps, CompanyProps, CompetitionProps, EmbedPropertyProps, EmbedProps, ExternalKeyProps, MyPlayerProps, PlayerReferralProps, PollCampaignProps, PromoProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
 import type { CompanyMemberProps } from '../Authenticator/api/types';
 import { PartnerPortalApi } from './api';
-import { FlatList, Image } from 'react-native';
+import { FlatList, Image, ScrollView } from 'react-native';
 import { useColors } from '../constants/useColors';
 import ImageUploader from '../Components/ImageUploader';
 import moment from 'moment-mini';
-import { Icons } from '../Components';
+import { Icons, SearchBox } from '../Components';
+import Pagination from '../Components/Pagination';
 
 type PartnerPortalProps = {
     me:MyPlayerProps,
     company_id:string,
+    refresh_key?:string,
     onCreateEmbed:() => void,
+    onManageReferral: (pr?:PlayerReferralProps) => void,
     onCreateEngagement: (init_engagement?:string) => void,
     onSelectCompanyEmbed: (company_embed:CompanyEmbedProps) => void,
     onSelectCompetition: (competition:CompetitionProps) => void,
@@ -21,9 +24,9 @@ type PartnerPortalProps = {
     onSelectFlashCampaign: (flash_campaign:PollCampaignProps) => void
 }
 
-const sections = ['top_row','second_row','third_row']
+const sections = ['top_row','stats','referrals','second_row','third_row']
 
-const PartnerPortal = ({ me, company_id, onCreateEngagement, onSelectBracketCompetition, onCreateEmbed, onSelectCompanyEmbed, onSelectCompetition, onSelectFlashCampaign, onSelectSquaresCompetition }:PartnerPortalProps) => {
+const PartnerPortal = ({ me, company_id, refresh_key, onCreateEngagement, onSelectBracketCompetition, onManageReferral, onCreateEmbed, onSelectCompanyEmbed, onSelectCompetition, onSelectFlashCampaign, onSelectSquaresCompetition }:PartnerPortalProps) => {
     const Colors = useColors();
     const [ engagement_state, setEngagementState ] = useState<{
         loading: boolean,
@@ -49,22 +52,35 @@ const PartnerPortal = ({ me, company_id, onCreateEngagement, onSelectBracketComp
         loading: boolean,
         company?:CompanyProps,
         my_member?:CompanyMemberProps,
+        company_player_stats:CompanyPlayerStatProps[],
+        company_players:CompanyPlayerProps[],
+        company_players_offset:number,
+        player_referrals:PlayerReferralProps[],
+        promos:PromoProps[],
         company_members:CompanyMemberProps[],
         external_keys:ExternalKeyProps[],
         players:PublicPlayerProps[],
     }>({
         loading:false,
         company_members: [],
+        company_players_offset: 0,
         external_keys: [],
+        player_referrals:[],
+        company_player_stats:[],
+        company_players:[],
+        promos:[],
         players: []
-    })
-    const { company, external_keys, players, company_members } = state;
-
+    });
+    const [ referral_search, setReferralSearch ] = useState('');
+    const [ player_search, setPlayerSearch ] = useState('');
+    const { company, promos, company_players_offset, company_player_stats, company_players, player_referrals, external_keys, players, company_members } = state;
+    const filtered_referrals = player_referrals.filter(r => r.referral_code.toLowerCase().includes(referral_search.toLowerCase())).slice(0,5);
+    const filtered_players = company_players.sort((a,b) => b.revenue - a.revenue).filter(p => p.username.toLowerCase().includes(player_search.toLowerCase())).slice(0,5);
     useEffect(() => {
         PartnerPortalApi.setEnvironment();
         getStateData();
         getActiveEngagementData();
-    },[me.player_id, company_id]);
+    },[me.player_id, company_id, refresh_key]);
 
     const getStateData = async() => {
         setState({ ...state, loading:true });
@@ -74,16 +90,32 @@ const PartnerPortal = ({ me, company_id, onCreateEngagement, onSelectBracketComp
         const s_playes = await PartnerPortalApi.getPlayersByPlayerIds(player_ids);
         const my_co_member = company_response?.company_members.find(cm => cm.player_id == me.player_id);
         const s_keys = await PartnerPortalApi.CompanyApi.getApiKeys(company_id);
+        const s_refer = await PartnerPortalApi.CompanyApi.getReferralCodesByCompanyId(company_id);
+        const s_stats = await PartnerPortalApi.CompanyApi.getCompanyPlayerStats(company_id);
+        const s_cps = await PartnerPortalApi.CompanyApi.getCompanyPlayers(company_id, 0);
         setState({
             ...state,
             loading: false,
             company: company_response?.company,
             external_keys: s_keys,
+            promos: s_refer.promos,
+            company_players: s_cps,
+            player_referrals: s_refer.player_referrals,
+            company_player_stats: s_stats,
             players: s_playes,
+            company_players_offset: 0,
             my_member:my_co_member,
             company_members: company_response?.company_members ?? []
         });
     }
+    const getAdditionalPlayers = async(page:number) => {
+        const s_cps = await PartnerPortalApi.CompanyApi.getCompanyPlayers(company_id, page);
+        setState({
+            ...state,
+            company_players: s_cps,
+            company_players_offset: page
+        })
+    }
 
     const getActiveEngagementData = async() => {
         setEngagementState({ ...engagement_state, loading:true });
@@ -211,6 +243,58 @@ const PartnerPortal = ({ me, company_id, onCreateEngagement, onSelectBracketComp
                     <Text theme='h1'>{data.item.name}</Text>
                     <Text theme='description' style={{ marginTop:3 }}>{embed.name}</Text>
                 </View>
+                <Text theme='description'>{data.item.status.toUpperCase()}</Text>
+            </Button>
+        )
+    }
+
+    const renderPlayers = (data:{ item:CompanyPlayerProps, index:number }) => {
+        return (
+            <View transparent type='row' style={{ padding:10, margin:4, minWidth:300, flexGrow:1, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <Image
+                    source={{ uri: data.item.profile_pic }}
+                    style={{ height:40, width:40, borderRadius:100 }}
+                    resizeMode='cover'
+                />
+                <View float style={{ marginRight:10, marginLeft:10, padding:5, borderRadius:22, backgroundColor:data.item.vouched_status == 'verified' ? Colors.text.success : data.item.vouched_status == 'unverified' ? Colors.text.action : Colors.text.error }}>
+                    <Text theme='h1' color={Colors.text.white}>{data.item.vouched_status.toUpperCase()}</Text>
+                </View>
+                <View transparent style={{ flex:1, minWidth:200, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.username}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Used Code {data.item.code_used}</Text>
+                </View>
+                <View float style={{ marginRight:25, padding:5, borderRadius:22, backgroundColor:data.item.verified ? Colors.text.success : Colors.text.error }}>
+                    <Text theme='h1' color={Colors.text.white}>Email</Text>
+                </View>
+                <View float style={{ marginRight:25, padding:5, borderRadius:22, backgroundColor:data.item.phone_verified ? Colors.text.success : Colors.text.error }}>
+                    <Text theme='h1' color={Colors.text.white}>Phone</Text>
+                </View>
+                <View transparent style={{ alignItems:'flex-end' }}>
+                    <Text theme='h1' color={Colors.text.success}>${data.item.revenue.toFixed(2)}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Revenue Generated</Text>
+                </View>
+            </View>
+        )
+    }
+
+    const renderReferrals = (data:{ item:PlayerReferralProps, index:number }) => {
+        const promo = promos.find(e => e.promo_id == data.item.promo_id);
+        if(!promo){ return <></> }
+        const stats = company_player_stats.filter(ps => ps.referral_code.toLowerCase() == data.item.referral_code.toLowerCase());
+        const players_generated = stats.reduce((a,b) => a + b.player_count, 0)
+        return (
+            <Button 
+                transparent 
+                style={{ padding:10, borderRadius:0, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => onManageReferral(data.item)}>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.referral_code}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.status == 'pending' ? 'ACTIVE':  data.item.status.toUpperCase()} - {promo.description}</Text>
+                </View>
+                <View transparent style={{ alignItems:'flex-end' }}>
+                    <Text theme='h1' color={Colors.text.action}>{players_generated}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Players Generated</Text>
+                </View>
             </Button>
         )
     }
@@ -233,6 +317,7 @@ const PartnerPortal = ({ me, company_id, onCreateEngagement, onSelectBracketComp
         )
     }
 
+    
     const renderSections = (data:{ item:string, index:number }) => {
         switch(data.item){
             case 'top_row':
@@ -312,6 +397,78 @@ const PartnerPortal = ({ me, company_id, onCreateEngagement, onSelectBracketComp
 
                     </View>
                 )
+            case 'stats':
+                const player_count = company_player_stats.reduce((a,b) => a + b.player_count, 0);
+                return (
+                    <View transparent style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        <View float nativeID='player_count' style={{ flexGrow:1, minWidth: 250, margin:10 }}>
+                            <View transparent style={{ justifyContent:'center', alignItems:'center', padding:10 }}>
+                                <Text theme='h1' size={40}>{player_count}</Text>
+                            </View>
+                            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                              <View transparent style={{ flex:1 }}>
+                                <Text theme='h1' color={Colors.text.success}>Users Generated</Text>
+                              </View>
+                            </View>
+                        </View>
+                        <View float nativeID='company_referrals' style={{ flexGrow:4,  minWidth:300, margin:10 }}>
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Players Generated</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>See all players that have joined BettorEdge using your referral code</Text>
+                              </View>
+                            </View>
+                            <View style={{ padding:10 }}>
+                                <SearchBox hide_search_button onChange={(text) => setPlayerSearch(text)} />
+                            </View>
+                           <ScrollView horizontal={true} contentContainerStyle={{ flexGrow: 1 }}>
+                                <View transparent type='body' style={{ flex:1 }}>
+                                    <FlatList
+                                    data={filtered_players}
+                                    key={'company_players'}
+                                    keyExtractor={item => item.player_id.toString()}
+                                    renderItem={renderPlayers}
+                                    />
+                                </View>
+                            </ScrollView>
+                            <Pagination offset={company_players_offset} onNext={() => getAdditionalPlayers(company_players_offset + 1)} onPrevious={() => getAdditionalPlayers(company_players_offset - 1)} />
+                        </View>
+                        <View />
+                    </View>
+                )
+            case 'referrals':
+                return (
+                    <View transparent style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        <View float nativeID='company_referrals' style={{ flexGrow:4, flexBasis:4, minWidth:300, margin:10 }}>
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Referral Codes</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Active Referral Codes</Text>
+                              </View>
+                              <View transparent style={{ padding:10 }}>
+                                <Text theme='h1' color={Colors.text.action}>{player_referrals.length}</Text>
+                              </View>
+                              <Button
+                                title='CREATE'
+                                type='success'
+                                style={{ padding:10 }}
+                                onPress={() => onManageReferral()}
+                              />
+                            </View>
+                            <View style={{ padding:10 }}>
+                                <SearchBox hide_search_button onChange={(text) => setReferralSearch(text)} />
+                            </View>
+                            <View transparent type='body'>
+                                <FlatList
+                                    data={filtered_referrals.sort((a,b) => moment(a.create_datetime).unix() - moment(b.create_datetime).unix())}
+                                    key={'company_referrals'}
+                                    keyExtractor={item => item.player_referral_id.toString()}
+                                    renderItem={renderReferrals}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                )
             case 'second_row':
                 const active_embeds = company_embeds.length
                 return (

package/src/index.tsx

@@ -66,10 +66,12 @@ import ManageFlashMarket from './FlashMarket/components/ManageFlashMarket';
 import PartnerPortal from './PartnerPortal';
 import EmbedManager from './PartnerPortal/components/EmbedManager';
 import CreateEmbed from './PartnerPortal/components/CreateEmbed';
+import ReferralCodeManager from './PartnerPortal/components/ReferralCodeManager';
 export {
   Authenticator,
   Observer,
   CreateEmbed,
+  ReferralCodeManager,
   CreateEngagement,
   DiscordConnectionManager,
   BEEventApi,

package/src/types.d.ts

@@ -436,6 +436,27 @@ export interface CompanyProps {
     last_update_datetime: any
 }
 
+export interface CompanyPlayerStatProps {
+    player_count: number,
+    referral_code:string,
+    vouched_status:string,
+    revenue: number
+}
+
+export interface CompanyPlayerProps {
+    player_id:string,
+    username:string,
+    email:string,
+    profile_pic?:string,
+    phone:number,
+    verified:boolean,
+    phone_verified:boolean,
+    vouched_status:'verified'|'unverified'|'failed'
+    code_used:string,
+    revenue:number,
+    create_datetime:any
+}
+
 export interface PlayerPodcastProps {
     player_podcast_id:string,
     player_id:string,
@@ -3097,6 +3118,7 @@ export interface EmbedPropertyProps {
     embed_id:string,
     property:string,
     description: string,
+    required?:boolean,
     status: 'active'|'archived',
     component:string,
     label:string,