be-components 7.4.0 → 7.4.3

package/src/MyAction/components/FlashRow.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { PollOptionProps, PollProps, PollResponseProps } from "../../types"
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+import { FlatList } from 'react-native';
+
+type FlashRowProps = {
+    market_type:'FOR_MONEY'|'FREE',
+    poll:PollProps,
+    poll_responses:PollResponseProps[],
+    poll_options:PollOptionProps[],
+    width:number
+}
+
+const FlashRow = ({ market_type, poll, poll_options, poll_responses, width }:FlashRowProps) => {
+    const Colors = useColors();
+    const [ expanded, setExpanded ] = useState(false);
+
+    const cl = market_type == 'FOR_MONEY' ? '$' : 'E'
+    const risk = poll_responses.reduce((a,b) => a + parseFloat(b.stake as string), 0);
+    const settled = poll.status == 'closed' ? true : false
+    const winnings = poll_responses.reduce((a,b) => a + b.winnings, 0);
+
+    const renderResponses = (data:{ item:PollResponseProps, index:number }) => {
+        const option = poll_options.find(o => o.poll_option_id == data.item.poll_option_id);
+        if(!option){ return <></> }
+        return (
+            <View type='row' style={{ borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1' size={12}>{option.option_name}</Text>
+                </View>
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1' size={12}>{cl}{parseFloat(data.item.stake as string).toFixed(2)}</Text>
+                    <Text theme='light' size={12}>Risk</Text>
+                </View>
+            </View>
+        )
+    }
+
+    return (
+        <View>
+            <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, flexWrap:'wrap' }}>
+                <Icons.FlameIcon size={25} color={Colors.text.h1} />
+                <Button transparent style={{ borderRadius:0, padding:0, borderLeftWidth:1, borderColor:Colors.borders.light, flexGrow:1, marginLeft:6, paddingLeft:6, minWidth:75 }} onPress={() => setExpanded(!expanded)}>
+                    <Text theme='h1' style={{ maxWidth:width * 0.55 }}>{poll.poll_question}</Text>
+                    <Text theme='light' style={{ marginTop:3 }} color={Colors.text.action}>See {poll_responses.length} Responses</Text>
+                </Button>
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{risk.toFixed(2)}</Text>
+                    <Text theme='light'>Risk</Text>
+                </View>
+                {settled ?
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{winnings.toFixed(2)}</Text>
+                    <Text theme='light'>Winnings</Text>
+                </View>
+                :<></>}
+            </View>
+            {expanded ?
+            <View transparent style={{ padding:10 }}>
+                <FlatList
+                    data={poll_responses}
+                    keyExtractor={item => item.poll_response_id.toString()}
+                    renderItem={renderResponses}
+                    key={`flash_${poll.poll_id}_responses`}
+                    />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default FlashRow

package/src/MyAction/components/ParlayRow.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, ParlayPositionProps, ParlayProps, TeamProps, TournamentProps } from "../../types"
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+import { MyActionHelpers } from '../api';
+import { FlatList, Image } from 'react-native';
+import { AthleteImage, TeamImage } from '../../Components/Jerseys';
+import { MarketComponentHelpers } from '../../MarketComponents/api';
+
+type ParlayRowProps = {
+    market_type:'FOR_MONEY'|'FREE',
+    leagues:LeagueProps[],
+    events:EventProps[],
+    tournaments:TournamentProps[],
+    matches:MatchProps[],
+    athletes:AthleteProps[],
+    teams:TeamProps[],
+    parlay:ParlayProps,
+    parlay_orders:OrderProps[],
+    parlay_positions:ParlayPositionProps[]
+    width:number
+}
+
+const ParlayRow = ({ market_type, parlay, events, matches, tournaments, athletes, teams, parlay_orders, parlay_positions, leagues }:ParlayRowProps) => {
+    const Colors = useColors();
+    const [ expanded, setExpanded ] = useState(false);
+
+    const cl = market_type == 'FOR_MONEY' ? '$' : 'E'
+    const legs = parlay_orders.length
+    const { stake, result_ind, winnings, potential_winnings } = MyActionHelpers.aggregatePositions(parlay, parlay_positions);
+    const settled = result_ind ? true : false
+
+    const renderLegResult = (result_ind?:'win'|'lose'|'draw'|'inprogress') => {
+        switch(result_ind){
+            case 'win':
+                return <Icons.CheckIcon size={14} color={Colors.text.success} />
+            case 'lose':
+                return <Icons.CloseIcon size={14} color={Colors.text.error} />
+            case 'draw':
+                return <Icons.AlertIcon size={14} color={Colors.text.warning}/>
+            default:
+                return <Icons.ActivityIcon size={14} color={Colors.text.h1} />
+        }
+    }
+
+    const renderOrders = (data:{ item:OrderProps, index:number }) => {
+        const { contest_title, athlete, team, league } = MyActionHelpers.getDetailsForOrder(data.item, events, tournaments, matches, athletes, teams, leagues);
+        const result_ind = data.item.positions[0]?.result_ind
+        return (
+            <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    {team ?
+                    <TeamImage
+                        team={team}
+                        league={league}
+                        size={10}
+                    />
+                    :athlete ?
+                    <AthleteImage
+                        athlete={athlete}
+                        league={league}
+                        size={18}
+                    />
+                    :league ?
+                    <Image
+                        source={{ uri: league.league_image }}
+                        style={{ height:18, width:18 }}
+                        resizeMode="cover"
+                    />
+                    :<></>
+                    }
+                    
+                    <View transparent style={{ flex:1, marginLeft:8 }}>
+                        <Text theme='h2'>{data.item.title}</Text>
+                        <View transparent style={{ marginTop:3 }}>                            
+                            <Text theme="description">{contest_title}</Text>
+                        </View>
+                    </View>
+                    {data.item.resolution_status != 'closed' ?
+                    <Button transparent style={{  marginRight:4, marginLeft:4, padding:10, flexDirection:'row', justifyContent:'center', alignItems:'center' }} onPress={() => console.log('ehy')}>
+                        <Icons.ActivityIcon size={18} color={Colors.text.action} />
+                        <Text theme="action"> View</Text>
+                    </Button>
+                    :<></>}
+                    <View style={{ padding:10 }}>
+                        <Text theme="description">{MarketComponentHelpers.getOddsLabel(data.item.odds)}</Text>
+                    </View>
+                    {renderLegResult(result_ind)}
+                    {result_ind == 'draw' ? 
+                    <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center' }}>
+                        <View style={{ borderBottomWidth:1, borderColor:Colors.borders.light, marginRight:20, marginLeft:20 }} />
+                    </View>
+                    :<></>}
+                </View>
+        )
+    }
+
+
+    return (
+        <View transparent style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, borderWidth:expanded?1:undefined }}>
+            <View type='row' style={{ flexWrap:'wrap' }}>
+                <Icons.ParlayIcon size={20} color={Colors.text.h1} />
+                <Button transparent style={{ borderRadius:0, padding:0, borderLeftWidth:1, borderColor:Colors.borders.light, flexGrow:1, marginLeft:6, paddingLeft:6, minWidth:75 }} onPress={() => setExpanded(!expanded)}>
+                    <Text theme='h1'>{parlay.name}</Text>
+                    <Text theme='light' style={{ marginTop:3 }} color={Colors.text.action}>See {legs} legs</Text>
+                </Button>
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1' color={Colors.text.warning}>{cl}{stake.toFixed(2)}</Text>
+                    <Text theme='light' color={Colors.text.warning}>Risk</Text>
+                </View>
+                {settled ?
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{winnings.toFixed(2)}</Text>
+                    <Text theme='light'>Winnings</Text>
+                </View>
+                :
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{potential_winnings.toFixed(2)}</Text>
+                    <Text theme='light'>Potential</Text>
+                </View>
+                }
+            </View>
+            {expanded ?
+            <View transparent style={{ padding:10 }}>
+                <FlatList
+                    data={parlay_orders}
+                    keyExtractor={item => item.order_id.toString()}
+                    renderItem={renderOrders}
+                    key={`parlay_${parlay.parlay_id}_orders`}
+                    />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default ParlayRow

package/src/MyAction/components/SquaresRow.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { PlayerSquareProps, SquaresCompetitionProps } from "../../types"
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+import { FlatList } from 'react-native';
+
+type SquaresRowProps = {
+    market_type:'FOR_MONEY'|'FREE',
+    squares_competition:SquaresCompetitionProps,
+    width:number
+}
+
+const SquaresRow = ({ market_type, squares_competition, width }:SquaresRowProps) => {
+    const Colors = useColors();
+    const [ expanded, setExpanded ] = useState(false);
+    const cl = market_type == 'FOR_MONEY' ? '$' : 'E'
+
+    const renderSquares = (data:{item:PlayerSquareProps, index:number}) => {
+        console.log(data.item)
+        return (
+            <View>
+                <Text>SQUARE</Text>
+            </View>
+        )
+    }
+
+    return (
+        <View>
+            <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, flexWrap:'wrap' }}>
+                <Icons.SquaresIcon size={22} color={Colors.text.h1} />
+                <Button transparent style={{ borderRadius:0, padding:0, borderLeftWidth:1, borderColor:Colors.borders.light, flexGrow:1, marginLeft:6, paddingLeft:6, minWidth:75 }} onPress={() => setExpanded(!expanded)}>
+                    <Text theme='h1' style={{ maxWidth:width * 0.55 }}>{squares_competition.sq_comp_name}</Text>
+                    <Text theme='light' style={{ marginTop:3 }} color={Colors.text.action}>See My Squares</Text>
+                </Button>
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{(0).toFixed(2)}</Text>
+                    <Text theme='light'>Risk</Text>
+                </View>
+                
+            </View>
+            {expanded ?
+            <View transparent style={{ padding:10 }}>
+                <FlatList
+                    data={[]}
+                    renderItem={renderSquares}
+                    key={`square_${squares_competition.sq_comp_id}_list`}
+                    />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SquaresRow

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