be-components 7.1.2 → 7.1.5

package/src/PartnerPortal/components/EmbedManager.tsx

@@ -0,0 +1,364 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from "../../Components/Themed"
+import type { CompanyEmbedProps, CompanyProps, EmbedPropertyProps, EmbedProps, FocusPositionProps, MyPlayerProps, PlayerReferralProps, PromoProps } from '../../types';
+import { PartnerPortalApi } from '../api';
+import { ActivityIndicator, FlatList, ImageBackground, type ViewStyle } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import ReferralSelector from './ReferralSelector';
+import LeagueSelector from './LeagueSelector';
+import { Toggle } from '../../Components';
+import * as Clipboard from 'expo-clipboard';
+import CompetitionSelector from './CompetitionSelector';
+import SquaresSelector from './SquaresSelector';
+import FlashSelector from './FlashSelector';
+
+type EmbedManagerProps = {
+    company_embed_id:string,
+    me:MyPlayerProps,
+    float?:boolean,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
+    header_style?:ViewStyle,
+    footer_style?:ViewStyle,
+    company_id:string,
+    onClose: () => void
+}
+const sections = ['header','embed','toggle','loading','name','properties','identifer','code']
+const EmbedManager = ({ float, me, company_id, company_embed_id, onFocusPosition, onClose, header_style, footer_style }:EmbedManagerProps) => {
+    const Colors = useColors();
+    const [ size, setSize ] = useState({ height:0, width:0 });
+    const [ active_toggle, setActiveToggle ] = useState('properties');
+    const [ action_loading, setActionLoading ] = useState(false);
+    const [ embed_data, setEmbedData ] = useState<{
+        loading:boolean,
+        company_embed?:CompanyEmbedProps,
+        draft_company_embed?:CompanyEmbedProps,
+        player_referrals:PlayerReferralProps[],
+        promos:PromoProps[],
+        company?:CompanyProps,
+        embed?:EmbedProps,
+        embed_properties:EmbedPropertyProps[]
+    }>({
+        loading:false,
+        embed_properties: [],
+        promos:[],
+        player_referrals: []
+    });
+    const { loading, promos, player_referrals, embed, company_embed, embed_properties, draft_company_embed } = embed_data;
+
+    useEffect(() => {
+        PartnerPortalApi.setEnvironment();
+        getEmbedData(company_embed_id);
+    },[company_embed_id, me.player_id]);
+
+    const getEmbedData = async(id:string) => {
+        setEmbedData({ ...embed_data, loading:true });
+        const s_resp = await PartnerPortalApi.CompanyEmbedApi.getCompanyEmbedById(id);
+        if(!s_resp){ setEmbedData({ ...embed_data, loading:false }); return }
+        const s_comp = await PartnerPortalApi.CompanyApi.getCompanyById(company_id);
+        const s_refer = await PartnerPortalApi.CompanyApi.getReferralCodesByCompanyId(company_id);
+        setEmbedData({
+            ...embed_data,
+            embed: s_resp.embed,
+            embed_properties: s_resp.embed_properties,
+            company_embed: s_resp.company_embed,
+            player_referrals: s_refer.player_referrals,
+            promos: s_refer.promos,
+            company: s_comp?.company,
+            draft_company_embed: s_resp.company_embed,
+            loading: false
+        });
+    }
+
+    const handleSave = async(de:CompanyEmbedProps) => {
+        setActionLoading(true);
+        const new_embed = await PartnerPortalApi.CompanyEmbedApi.updateCompanyEmbed(de);
+        if(!new_embed){ setActionLoading(false); return alert('Unable to update at this time.  Please try again later') }
+        setEmbedData({
+            ...embed_data,
+            company_embed: new_embed,
+            draft_company_embed: new_embed
+        })
+        setActionLoading(false);
+    }
+
+    const renderProperties = (data:{ item:EmbedPropertyProps, index:number }) => {
+        if(!company_embed || !draft_company_embed){ return <></> }
+        const value:string | undefined = draft_company_embed.properties[data.item.property]
+        switch(data.item.component){
+            case 'text_input':
+                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>
+                    <TextInput
+                        value={value}
+                        onFocusPosition={onFocusPosition}
+                        placeholder={data.item.property}
+                        style={{ marginTop:10 }}
+                        onChangeText={(text) => setEmbedData({ ...embed_data, draft_company_embed: { ...draft_company_embed, properties: { ...draft_company_embed.properties, [data.item.property]: text } } })}
+                    />
+                </View>
+                )
+            case 'refer_selector':
+                const selected_referral = player_referrals.find(pr => pr.referral_code == value);
+                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 }}>
+                            <ReferralSelector
+                                promos={promos}
+                                player_referrals={player_referrals}
+                                active_referral={selected_referral}
+                                onSelectReferral={(pr) => setEmbedData({ ...embed_data, draft_company_embed: { ...draft_company_embed, properties: { ...draft_company_embed.properties, [data.item.property]: pr?.referral_code } } })}
+                            />
+                        </View>
+                    </View>
+                )
+            case 'league_selector':
+                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 }}>
+                            <LeagueSelector
+                                active_league_id={value}
+                                onSelectLeague={(pr) => setEmbedData({ ...embed_data, draft_company_embed: { ...draft_company_embed, properties: { ...draft_company_embed.properties, [data.item.property]: pr?.league_id } } })}
+                            />
+                        </View>
+                    </View>
+                )
+            case 'flash_campaign_selector':
+                //Split out competition ids
+                let fl_ids_string = value
+                let fl_ids:string[] = fl_ids_string ? fl_ids_string.split(',') : []
+                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 }}>
+                            <FlashSelector
+                                company_id={company_id}
+                                active_competitions={fl_ids}
+                                onSelectCompetition={(competition) => {
+                                    let new_value = fl_ids.concat(competition.poll_campaign_id).join(',');
+                                    setEmbedData({ ...embed_data, draft_company_embed: { ...draft_company_embed, properties: { ...draft_company_embed.properties, [data.item.property]: new_value } } })
+                                }}
+                                onDeselectCompetition={(competition) => {
+                                    let new_value = fl_ids.filter(id => id != competition.poll_campaign_id).join(',')
+                                    setEmbedData({ ...embed_data, draft_company_embed: { ...draft_company_embed, properties: { ...draft_company_embed.properties, [data.item.property]: new_value } } })
+                                }}
+                            />
+                        </View>
+                    </View>
+                )
+            case 'squares_selector':
+                //Split out competition ids
+                let sq_ids_string = value
+                let sq_ids:string[] = sq_ids_string ? sq_ids_string.split(',') : []
+                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 }}>
+                            <SquaresSelector
+                                company_id={company_id}
+                                active_competitions={sq_ids}
+                                onSelectCompetition={(competition) => {
+                                    let new_value = sq_ids.concat(competition.sq_comp_id).join(',');
+                                    setEmbedData({ ...embed_data, draft_company_embed: { ...draft_company_embed, properties: { ...draft_company_embed.properties, [data.item.property]: new_value } } })
+                                }}
+                                onDeselectCompetition={(competition) => {
+                                    let new_value = sq_ids.filter(id => id != competition.sq_comp_id).join(',')
+                                    setEmbedData({ ...embed_data, draft_company_embed: { ...draft_company_embed, properties: { ...draft_company_embed.properties, [data.item.property]: new_value } } })
+                                }}
+                            />
+                        </View>
+                    </View>
+                )
+            case 'competition_selector':
+                //Split out competition ids
+                let comp_ids_string = value
+                let comp_ids:string[] = comp_ids_string ? comp_ids_string.split(',') : []
+                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 }}>
+                            <CompetitionSelector
+                                company_id={company_id}
+                                active_competitions={comp_ids}
+                                onSelectCompetition={(competition) => {
+                                    let new_value = comp_ids.concat(competition.competition_id).join(',');
+                                    setEmbedData({ ...embed_data, draft_company_embed: { ...draft_company_embed, properties: { ...draft_company_embed.properties, [data.item.property]: new_value } } })
+                                }}
+                                onDeselectCompetition={(competition) => {
+                                    let new_value = comp_ids.filter(id => id != competition.competition_id).join(',')
+                                    setEmbedData({ ...embed_data, draft_company_embed: { ...draft_company_embed, properties: { ...draft_company_embed.properties, [data.item.property]: new_value } } })
+                                }}
+                            />
+                        </View>
+                    </View>
+                )
+            default:
+                return <></>
+        }
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            
+            case 'header':
+                if(!embed){ return <></> }
+                return (
+                    <ImageBackground
+                        source={{ uri: embed.image.url }}
+                        style={{ width: size.width, height:225, justifyContent:'flex-end', overflow:'hidden', ...header_style}}>
+                        <View type='dark_blur' style={{ padding:20 }}>
+                            <Text theme='h1' size={36}>{embed.name}</Text>
+                            <Text theme='description' size={16} style={{ marginTop:3 }}>{embed.description}</Text>
+                        </View>
+                    </ImageBackground>
+                )
+            case 'toggle':
+                return (
+                    <View style={{ padding:10, paddingBottom:0 }}>
+                        <Toggle
+                            options={[
+                                { key: 'properties', label: 'Properties' },
+                                { key: 'embed', label: 'Embed It!' }
+                            ]}
+                            selected_option={active_toggle}
+                            onSelectOption={(key) => setActiveToggle(key)}
+                        />
+                    </View>
+                )
+            case 'name':
+                if(active_toggle != 'properties'){ return <></> }
+                if(!draft_company_embed){ return <></> }
+                return (
+                    <View transparent style={{ borderBottomWidth:1, borderColor:Colors.borders.light, padding:20 }}>
+                        <View transparent>
+                            <Text theme='h1'>Embed Name</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Give this embed a memorable name</Text>
+                        </View>
+                        <TextInput
+                            value={draft_company_embed?.name}
+                            onFocusPosition={onFocusPosition}
+                            placeholder={'Enter Embed Name...'}
+                            style={{ marginTop:10 }}
+                            onChangeText={(text) => setEmbedData({ ...embed_data, draft_company_embed: { ...draft_company_embed, name: text } })}
+                        />
+                    </View>
+                )
+            case 'properties':
+                if(active_toggle != 'properties'){ return <></> }
+                return (
+                    <View transparent style={{ padding:10 }}>
+                        <FlatList
+                            key='embed_properties'
+                            keyExtractor={item => item.embed_property_id.toString()}
+                            data={embed_properties.sort((a,b) => a.priority - b.priority)}
+                            renderItem={renderProperties}
+                        />
+                    </View>
+                )
+            case 'identifer':
+                if(active_toggle != 'embed'){ return <></> }
+                if(!company_embed){ return <></> }
+                return (
+                    <View transparent style={{ padding:20 }}>
+                        <Text theme='h1' size={18}>Your Embed Identifier</Text>
+                        <Text theme='description'>Each embed has a unique identifier. Paste this into the embed code or copy the entire snipped below</Text>
+                        <Button float style={{ padding:10, marginTop:10 }}>
+                            <Text theme='h1' selectable color={Colors.text.action}>{company_embed.identifier}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Press / click to copy</Text>
+                        </Button>
+                    </View>
+                )
+            case 'loading':
+                if(!loading){ return <></> }
+                return (
+                    <ActivityIndicator style={{ padding:20, alignSelf: 'center' }} size='large' />
+                )
+            case 'code':
+                if(active_toggle != 'embed'){ return <></> }
+                if(!company_embed){ return <></> }
+
+                const embed_code = `
+                    <div id='bettoredge' style='height:100%; width:100%;' data-identifier='${company_embed.identifier}'></div>
+                    <script src='https://embed.bettoredge.com/common.bundle.js'></script>
+                    <script src='https://embed.bettoredge.com/embed.bundle.js'></script>
+                `
+
+                return (
+                    <View transparent style={{ padding:20 }}>
+                        <Text theme='h1' size={18}>Your Embed Code</Text>
+                        <Text theme='description'>Copy the code below and add it to your website.  Adjust styling as you like.  Embeds will fill 100% of the parent container</Text>
+                        <Button 
+                            transparent style={{ marginTop:10, padding:10, backgroundColor:Colors.views.illiquidMarket }}
+                            onPress={async() => {
+                                await Clipboard.setStringAsync(embed_code);
+                                alert('Code copied successfully')
+                            }}
+                            >
+                            <Text theme='description' selectable>{`<div id='bettoredge' style='height:100%; width:100%;' data-identifier='${company_embed.identifier}'></div>`}</Text>
+                            <Text theme='description' style={{ marginTop:10 }} selectable>{`<script src='https://embed.bettoredge.com/common.bundle.js'></script>`}</Text>
+                            <Text theme='description' style={{ marginTop:3 }} selectable>{`<script src='https://embed.bettoredge.com/embed.bundle.js'></script>`}</Text>
+                            <Text theme='action' style={{ marginTop:25 }} selectable>Press / click to copy</Text>
+                        </Button>
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+    const is_changed = JSON.stringify(company_embed) != JSON.stringify(draft_company_embed) ? true : false
+    return (
+        <View float={float} style={{ flex:1 }} onLayout={(ev) => {
+            const { width, height } = ev.nativeEvent.layout;
+            setSize({ width, height });
+
+        }}>
+            <FlatList
+                data={sections}
+                key={'embed_sections'}
+                refreshing={loading}
+                onRefresh={() => getEmbedData(company_embed_id)}
+                keyExtractor={item => item}
+                renderItem={renderSections}
+            />
+            {draft_company_embed ? 
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, ...footer_style }}>
+                <Button
+                    title='CLOSE'
+                    type='close'
+                    style={{ flex:1 }}
+                    onPress={() => onClose()}
+                />
+                <Button
+                    title='SAVE'
+                    type='success'
+                    loading={action_loading}
+                    style={{ flex:3, marginLeft:5, opacity: is_changed && !action_loading ? 1 : 0.5 }}
+                    disabled={!is_changed || action_loading}
+                    onPress={() => handleSave(draft_company_embed)}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default EmbedManager

package/src/PartnerPortal/components/FlashSelector.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from "react";
+import type { PollCampaignProps } from "../../types";
+import { useColors } from "../../constants/useColors";
+import { Button, Text, View } from "../../Components/Themed";
+import { FlatList, Image } from "react-native";
+import { Checkbox, Icons, SearchBox } from "../../Components";
+import moment from "moment-mini";
+import { PartnerPortalApi } from "../api";
+
+type FlashSelectorProps = {
+    company_id:string,
+    active_competitions:string[],
+    onSelectCompetition:(campaign:PollCampaignProps) => void,
+    onDeselectCompetition:(campaign:PollCampaignProps) => void
+}
+const FlashSelector = ({ company_id, active_competitions, onSelectCompetition, onDeselectCompetition }:FlashSelectorProps) => {
+    const Colors = useColors();
+    const [ visible, setVisible ] = useState(false);
+    const [ competitions, setCompetitions ] = useState<PollCampaignProps[]>([])
+    const [ search, setSearch ] = useState('');
+
+    const filtered_competitions = competitions.filter(pr => pr.name.toLowerCase().includes(search.toLowerCase())).slice(0,10)
+
+    useEffect(() => {
+        getCompetitions()
+    },[company_id]);
+    
+    const getCompetitions = async() => {
+        PartnerPortalApi.setEnvironment();
+        const s_resp = await PartnerPortalApi.EngagementApi.getActiveFlashCampaigns(company_id);
+        setCompetitions(s_resp);
+    }
+
+    const renderCompetitions = (data:{ item:PollCampaignProps, index:number }) => {
+        const selected = active_competitions.includes(data.item.poll_campaign_id.toString());
+
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => {
+                    if(selected){ return onDeselectCompetition(data.item) }
+                    return onSelectCompetition(data.item);
+                }}
+            >
+                <Image
+                    source={{ uri: data.item.campaign_image?.url }}
+                    style={{ height: 35, width:35 }}
+                    resizeMode="cover"
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.name}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Flash Markets</Text>
+                </View>
+                <Checkbox
+                    checked={selected}
+                    disabled
+                    onSelect={() => console.log('')}
+                />
+            </Button>
+        )
+    }
+
+    return (
+        <View float style={{ padding:15 }}>
+            <Button transparent style={{ padding:0, flexDirection:'row', alignItems:'center' }} onPress={() => setVisible(!visible)}>
+                <Text style={{ flex:1, marginRight:10 }} theme='h1'>{active_competitions.length} Comeptitions</Text>
+                <Icons.ChevronIcon direction={visible?'up':'down'} color={Colors.text.h1} size={8} />
+            </Button>
+            {visible ?
+            <View transparent style={{ marginTop:20 }}>
+            <SearchBox
+                onChange={(text) => setSearch(text)}
+                hide_search_button
+            />
+            <FlatList
+                data={filtered_competitions.sort((a,b) => a.status.localeCompare(b.status) || moment(a.create_datetime).unix() - moment(b.create_datetime).unix())}
+                key={'comp_selector'}
+                keyExtractor={item => item.poll_campaign_id.toString()}
+                renderItem={renderCompetitions}
+            />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default FlashSelector

package/src/PartnerPortal/components/LeagueSelector.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from "react";
+import type { LeagueProps } from "../../types";
+import { useColors } from "../../constants/useColors";
+import { Button, Text, View } from "../../Components/Themed";
+import { FlatList, Image } from "react-native";
+import { Icons, SearchBox } from "../../Components";
+import { MarketComponentApi } from "../../MarketComponents/api";
+
+type LeagueSelectorProps = {
+    active_league_id?:string,
+    onSelectLeague:(league:LeagueProps | undefined) => void
+}
+const LeagueSelector = ({ active_league_id, onSelectLeague }:LeagueSelectorProps) => {
+    const Colors = useColors();
+    const [ visible, setVisible ] = useState(false);
+    const [ leagues, setLeagues ] = useState<LeagueProps[]>([])
+    const [ search, setSearch ] = useState('');
+
+    const filtered_leagues = leagues.filter(pr => pr.league_name.toLowerCase().includes(search.toLowerCase())).slice(0,10)
+    const active_league = leagues.find(l => l.league_id == active_league_id);
+
+    useEffect(() => {
+        getLeagues()
+    },[]);
+    
+    const getLeagues = async() => {
+        MarketComponentApi.setEnvironment();
+        const leagues = await MarketComponentApi.getLeagues();
+        setLeagues(leagues);
+    }
+
+    const renderLeagues = (data:{ item:LeagueProps, index:number }) => {
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => { setVisible(false); onSelectLeague(data.item) }}
+            >
+                <Image
+                    source={{ uri: data.item.league_image }}
+                    style={{ height: 35, width:35 }}
+                    resizeMode="cover"
+                />
+                <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>
+        )
+    }
+
+    return (
+        <View style={{ padding:15 }} float>
+            <Button transparent style={{ padding:0, flexDirection:'row', alignItems:'center' }} onPress={() => { setVisible(!visible); onSelectLeague(undefined)}}>
+                <Text style={{ flex:1, marginRight:10 }} theme='h1'>{active_league?.league_name ?? 'Select League'}</Text>
+                <Icons.ChevronIcon direction={visible?'up':'down'} color={Colors.text.h1} size={8} />
+            </Button>
+            {visible ?
+            <View transparent style={{ marginTop:20 }}>
+            <SearchBox
+                onChange={(text) => setSearch(text)}
+                hide_search_button
+            />
+            <FlatList
+                data={filtered_leagues.sort((a,b) => a.status.localeCompare(b.status) ||a.priority - b.priority)}
+                key={'league_selector'}
+                keyExtractor={item => item.league_id.toString()}
+                renderItem={renderLeagues}
+            />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default LeagueSelector

package/src/PartnerPortal/components/ReferralSelector.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import type { PlayerReferralProps, PromoProps } from "../../types";
+import { useColors } from "../../constants/useColors";
+import { Button, Text, View } from "../../Components/Themed";
+import { FlatList } from "react-native";
+import { Icons, SearchBox } from "../../Components";
+import moment from "moment-mini";
+
+type ReferralSelectorProps = {
+    player_referrals:PlayerReferralProps[],
+    active_referral?:PlayerReferralProps,
+    promos:PromoProps[],
+    onSelectReferral:(player_referral:PlayerReferralProps | undefined) => void
+}
+const ReferralSelector = ({ active_referral, promos, player_referrals, onSelectReferral }:ReferralSelectorProps) => {
+    const Colors = useColors();
+    const [ visible, setVisible ] = useState(false);
+    const [ search, setSearch ] = useState('');
+
+    const filtered_referral = player_referrals.filter(pr => pr.referral_code.toLowerCase().includes(search.toLowerCase())).slice(0,10)
+
+    const renderReferrals = (data:{ item:PlayerReferralProps, index:number }) => {
+        const promo = promos.find(p => p.promo_id == data.item.promo_id);
+        if(!promo){ return <></> }
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => { setVisible(false); onSelectReferral(data.item) }}
+            >
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.referral_code}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{promo.description}</Text>
+                </View>
+            </Button>
+        )
+    }
+
+    return (
+        <View style={{ padding:15 }} float>
+            <Button transparent style={{ padding:0, flexDirection:'row', alignItems:'center' }} onPress={() => { setVisible(!visible); onSelectReferral(undefined)}}>
+                <Text style={{ flex:1, marginRight:10 }} theme='h1'>{active_referral?.referral_code ?? 'Select Referral'}</Text>
+                <Icons.ChevronIcon direction={visible?'up':'down'} color={Colors.text.h1} size={8} />
+            </Button>
+            {visible ?
+            <View transparent style={{ marginTop:20 }}>
+            <SearchBox
+                onChange={(text) => setSearch(text)}
+                hide_search_button
+            />
+            <FlatList
+                data={filtered_referral.sort((a,b) => moment(a.create_datetime).unix() - moment(b.create_datetime).unix())}
+                key={'group_selector'}
+                keyExtractor={item => item.player_referral_id.toString()}
+                renderItem={renderReferrals}
+            />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default ReferralSelector