be-components 6.7.8 → 6.8.0

package/src/CompetitionManager/components/CompanySelector.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { Button, Text, View } from "../../Components/Themed";
+import { useColors } from "../../constants/useColors";
+import type { CompanyProps } from "../../types";
+import { FlatList, Image } from "react-native";
+import { Icons } from "../../Components";
+
+
+type CompanySelectorProps = {
+    active_company?:CompanyProps,
+    companies:CompanyProps[],
+    onSelectCompany:(c?:CompanyProps) => void
+}
+const CompanySelector = ({ active_company, companies, onSelectCompany }:CompanySelectorProps) => {
+    const Colors = useColors();
+    const [ visible, setVisible ] = useState(false);
+
+    const renderCompanies = (data:{ item:CompanyProps, index:number }) => {
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => { setVisible(false); onSelectCompany(data.item) }}
+            >
+                <Image
+                    source={{ uri: data.item.company_image?.url }}
+                    style={{ height:40, width:40 }}
+                    resizeMode='cover'
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.company_name}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.company_description}</Text>
+                </View>
+            </Button>
+        )
+    }
+
+    return (
+        <Button float onPress={() => { setVisible(!visible); onSelectCompany(undefined) }}>
+            <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                <Text style={{ flex:1, marginRight:10 }} theme='h1'>{active_company?.company_name ?? 'No Company'}</Text>
+                <Icons.ChevronIcon direction={visible?'up':'down'} color={Colors.text.h1} size={8} />
+            </View>
+            {visible ?
+            <View transparent style={{ marginTop:20 }}>
+            <FlatList
+                data={companies}
+                key={'company_selector'}
+                keyExtractor={item => item.company_id.toString()}
+                renderItem={renderCompanies}
+            />
+            </View>
+            :<></>}
+        </Button>
+    )
+}
+
+export default CompanySelector

package/src/CompetitionManager/components/CompetitionContestsForm.tsx

@@ -6,12 +6,11 @@ import CompetitionMatchMarketCard from './CompetitionMatchMarketCard';
 import moment from 'moment-mini';
 import { Button, Text, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
-
+import { showConfirmAlert } from '../../Components/ConfirmAlert';
 
 
 type CompetitionContestsFormProps = {
     action_loading:boolean,
-    is_valid?:boolean,
     competition:CompetitionProps,
     player?:MyPlayerProps,
     markets:MarketProps[],
@@ -40,8 +39,8 @@ type CompetitionContestsFormProps = {
 
 
 const CompetitionContestsForm = ({
-    is_valid,
     competition,
+    action_loading,
     primary_markets,
     events,
     athletes,
@@ -82,44 +81,68 @@ const CompetitionContestsForm = ({
         )
     }
     
-    const renderMarkets = (data: { item:string, index:number, event_id:string, event_type:string }) => {
+    const renderMarkets = (data: { item:string, index:number, event_id:string, event_type:string, visible_matches:CompetitionMatchProps[] }) => {
         const market = markets.find(m => m.market_id == data.item);
         if(!market){ return <></> }
         const show_details = show_match_markets.includes(`${data.event_type}:${data.event_id}:${data.item}`) ? true : false
-
+        const market_matches = competition_matches.filter(cm => cm.market_id_override == data.item && cm.side_id_override);
         return (
-            <Button float style={{ flex:1, borderRadius:8, borderWidth:1, borderColor:Colors.borders.light, padding:4, margin:3, minWidth:125 }}
-            onPress={() => {
-                if(show_details){ return setShowMatchMarkets(show_match_markets.filter(smm => smm != `${data.event_type}:${data.event_id}:${data.item}`)) }
-                return setShowMatchMarkets(show_match_markets.concat(`${data.event_type}:${data.event_id}:${data.item}`))
-            }}>
-                <View transparent style={{ flexDirection:'row', alignItems:'flex-start' }}>
+            <View style={{ flex:1, padding:0, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <Button transparent style={{ flexDirection:'row', alignItems:'center', padding:10 }} onPress={() => {
+                            if(show_details){ return setShowMatchMarkets(show_match_markets.filter(smm => smm != `${data.event_type}:${data.event_id}:${data.item}`)) }
+                            return setShowMatchMarkets(show_match_markets.concat(`${data.event_type}:${data.event_id}:${data.item}`))
+                        }}>
                     <Button
                         title='X'
-                        style={{padding:8}}
-                        type='error'
-                        onPress={async() => {
-                            const confirmed = await confirm('Are you sure you want to delete this market?')
-                            if(!confirmed){ return }
-                            onDeleteMarket(data.event_id, data.event_type, market);
+                        loading={action_loading}
+                        style={{padding:10}}
+                        transparent
+                        title_color={Colors.text.error}
+                        onPress={() => {
+                            showConfirmAlert('Are you sure?', 'This will remove any athlete / team props associated with this market as well.', 
+                                () => onDeleteMarket(data.event_id, data.event_type, market),
+                                () => console.log('')
+                            )
                         }}
                     />
                     <View transparent style={{ flex:1 }}>
-                        <Text size={14} theme='h1' weight="bold" textAlign="center">{market.stat_label ?? market.type}</Text>
-                        <Text style={{ marginTop:3 }} size={12} theme='description' textAlign="center">{market.description}</Text>
+                        <Text theme='h1'>{market.stat_label ?? market.type}</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>{market.description}</Text>
+                        {market.level != 'event' && market_matches.length == 0 ?
+                        <Text style={{ marginTop:3 }} theme='warning'>Please add at least 1 {market.level}</Text>
+                        :<></>}
                     </View>
-                </View>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center', padding:0 }}>
+                        {market.level != 'event' ?
+                        <View style={{ margin:5, justifyContent:'center', alignItems:'center' }}>
+                            <Text theme='h2' size={14} color={Colors.text.action}>{market_matches.length}</Text>
+                            <Text theme='description' color={Colors.text.action} style={{ marginTop:3 }}>{market.level.toUpperCase()}{market_matches.length == 1 ? '':'S'}</Text>
+                        </View>
+                        :
+                        <View>
+                            <Icons.ChevronIcon direction={show_details ? 'up' : 'down'} color={Colors.text.action} size={8} />
+                        </View>
+                        }
+                    </View>
+                </Button>
                 {market.level == 'athlete' && show_details ?
                 <Button
                     title="ADD ATHLETE"
-                    style={{ marginTop:5 }}
+                    style={{ padding:10 }}
                     type='success'
                     onPress={() => {
                         onShowAthletes(data.event_id, data.event_type, data.item);
                     }}
                 />
                 :<></>}
-            </Button>
+                {data.visible_matches.length > 0 && show_details ?
+                    <FlatList
+                        data={data.visible_matches}
+                        renderItem={renderCompetitionMatches}
+                        keyExtractor={(item) => item.competition_match_id.toString()}
+                    />
+                :<></>}
+            </View>
                 
         )
     }
@@ -153,7 +176,6 @@ const CompetitionContestsForm = ({
                 })
             }
         })
-            
         return show_cms
     }
        
@@ -189,10 +211,10 @@ const CompetitionContestsForm = ({
 
         const { image_url, header, description } = getMatchTitle(data.item, market)
         return (
-            <View transparent style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}>
+            <View transparent style={{ padding:10, flexDirection:'row', alignItems:'center', flexWrap:'wrap', borderBottomWidth:1, borderColor:Colors.borders.light }}>
                 <Button
                     title="X"
-                    style={{ marginRight:5 }}
+                    style={{ marginRight:5, padding:10 }}
                     type='error'
                     onPress={() => {
                         if(data.item.market_id_override){
@@ -210,7 +232,7 @@ const CompetitionContestsForm = ({
                     />
                 </View>
                 :<></>}
-                <View transparent style={{ flex:1, marginLeft:10, marginRight:5 }}>
+                <View transparent style={{ flexGrow:1, marginLeft:10, marginRight:5, minWidth:200 }}>
                     <Text size={14} weight='bold'>{header}</Text>
                     <Text style={{ marginTop:3 }} size={12} weight='bold'>{description}</Text>
                 </View>
@@ -240,8 +262,8 @@ const CompetitionContestsForm = ({
         const visible_matches = showDetails(data.item, 'team')
         const expanded = expanded_contests.includes(`${event.event_id}:team`) ? true : false
         return (
-            <View style={{ margin:8 }}>
-                <Button float style={{ flexDirection:'row', alignItems:'center', padding:15, zIndex:1}} onPress={() => {
+            <View float style={{ margin:8 }}>
+                <Button style={{ flexDirection:'row', alignItems:'center', padding:15, zIndex:1}} onPress={() => {
                     if(expanded){ return setExpandedContests(expanded_contests.filter(c => c != `${event.event_id}:team`)) }
                     else { return setExpandedContests(expanded_contests.concat(`${event.event_id}:team`)) }
                 }}>
@@ -271,33 +293,28 @@ const CompetitionContestsForm = ({
                     <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} size={8} color={Colors.text.h1} />
                 </Button>
                 {expanded ?
-                <View float style={{ borderRadius:0, padding:10 }}>
-                    <View transparent style={{ padding:10 }}>
-                        <View transparent style={{ flexDirection:'row', alignItems:'center', marginBottom:5 }}>
-                            <Text style={{ flex:1 }} size={16} weight='bold'>Selected Markets</Text>
-                            <Button
-                                title="Add Markets"
-                                type='info'
-                                onPress={() => {
-                                    onShowMarkets(data.item, 'team');
-                                }}
-                            />
+                <View transparent>
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                        <View transparent style={{ flex:1, marginRight:10 }}>
+                            <Text theme='h1'>Selected Markets</Text>
+                            <Text theme='description'>Select Add Markets to manage the markets for this contest</Text>
                         </View>
-                        <View transparent style={{ flexDirection:'row', flexWrap: 'wrap', padding:10 }}>
-                            {unique_market_ids.map((market_id, index) => {
-                                return (
-                                    renderMarkets({ item: market_id, index, event_id:data.item, event_type:'team' })
-                                )
-                            })}
-                        </View>
-                    </View>
-                    {visible_matches.length > 0 ?
-                        <FlatList
-                            data={visible_matches}
-                            renderItem={renderCompetitionMatches}
-                            keyExtractor={(item) => item.competition_match_id.toString()}
+                        <Button
+                            title="Add Markets"
+                            style={{ padding:10 }}
+                            type='action'
+                            onPress={() => {
+                                onShowMarkets(data.item, 'team');
+                            }}
                         />
-                    :<></>}
+                    </View>
+                    <View transparent style={{ padding:10 }}>
+                        {unique_market_ids.map((market_id, index) => {
+                            return (
+                                renderMarkets({ item: market_id, index, event_id:data.item, event_type:'team', visible_matches:visible_matches })
+                            )
+                        })}
+                    </View>
                 </View>
 
                 :<></>}
@@ -306,26 +323,34 @@ const CompetitionContestsForm = ({
         )
     }
 
-    console.log(unique_team_events)
-
-
     return (
-        <View float style={{ flexGrow:1, borderRadius:0 }}>
-            <Button float style={{ flexDirection:'row', alignItems:'center', borderRadius:0 }} onPress={() => setExpanded(!expanded)}>
-                {is_valid ?
-                <Icons.CheckCirlceIcon size={16} color={Colors.text.success} />
-                :
-                <Icons.AlertIcon size={16} color={Colors.text.warning} />
-                }
+        <View float style={{ borderRadius:0 }}>
+            <Button float style={{ flexDirection:'row', alignItems:'center', borderRadius:0, padding:20, backgroundColor:Colors.toggle.button.active }} onPress={() => setExpanded(!expanded)}>
                 <View transparent style={{ flex:1, marginRight:10, marginLeft:10 }}>
-                    <Text theme='h1'>Competition Contests</Text>
-                    <Text style={{ marginTop:3 }} theme='description'>Competitions require contests for users to make picks / wagers.  Select 'Add Contests' to get started.</Text>
+                    <Text theme='h1' color={Colors.toggle.text.active}>Competition Contests</Text>
+                    <Text style={{ marginTop:3 }} theme='description' color={Colors.toggle.text.active}>Competitions require contests for users to make picks / wagers.  Select 'Add Contests' to get started.</Text>
                 </View>
                 <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} size={8} color={Colors.text.h1} />
             </Button>
+            {player?.role == 'admin' ?
+            <View type='row' style={{  padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='h1'>Append To Events</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Should the competition show up on events that are included in this competition?</Text>
+                </View>
+                <Switch 
+                    value={append_to_events}
+                    onChange={(val) => {
+                        if(val){ return onUpdateCompetition({ ...competition, linked_event_type: 'team', linked_event_ids: unique_team_events }) }
+                        return onUpdateCompetition({ ...competition, linked_event_type: 'team', linked_event_ids: undefined }) 
+                    }}
+                    switch_type='on_off'
+                />
+            </View>
+            :<></>}
             {expanded ?
             <View type='body' style={{ padding:0 }}>
-                <View style={{flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light}}>
+                <View style={{flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light}}>
                     <Button style={{ flex:1, padding:0 }}>
                         <Text theme='h1'>Team Events</Text>
                         <Text style={{ marginTop:3 }} theme='description'>Select team based events to include in this competition</Text>
@@ -336,25 +361,12 @@ const CompetitionContestsForm = ({
                         onPress={() => onShowContests()}
                     />
                 </View>
-                {player?.role == 'admin' ?
-                <View type='row' style={{  padding:20 }}>
-                    <View style={{ flex:1 }}>
-                        <Text theme='h1'>Append To Events</Text>
-                        <Text style={{ marginTop:3 }} theme='description'>Should the 'Pick 6' button show up on events that are included in this competition?</Text>
+                <View transparent style={{ padding:20 }}>
+                    <View transparent>
+                        <Text theme='h1'>Primary Markets</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>The following markets can be added to all events</Text>
                     </View>
-                    <Switch 
-                        value={append_to_events}
-                        onChange={(val) => {
-                            if(val){ return onUpdateCompetition({ ...competition, linked_event_type: 'team', linked_event_ids: unique_team_events }) }
-                            return onUpdateCompetition({ ...competition, linked_event_type: 'team', linked_event_ids: undefined }) 
-                        }}
-                        switch_type='on_off'
-                    />
-                </View>
-                :<></>}
-                <View style={{ padding:10 }}>
-                    <Text style={{ padding:10 }} theme='h2'>The following markets can be added to all events</Text>
-                    <View style={{ padding:5 }}>
+                    <View transparent style={{ marginTop:10 }}>
                         <FlatList
                             data={primary_markets}
                             renderItem={renderPrimaryMarkets}

package/src/CompetitionManager/components/CompetitionHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Image } from 'react-native';
+import { Alert, Image, type ViewStyle } from 'react-native';
 import type { CompetitionProps, CompetitionSummaryProps } from '../../types';
 import { useColors } from '../../constants/useColors';
 import { Button, Text, View } from '../../Components/Themed';
@@ -7,6 +7,7 @@ import { Button, Text, View } from '../../Components/Themed';
 type CompetitionHeaderProps = {
     action_loading:boolean,
     competition:CompetitionProps,
+    header_style?:ViewStyle,
     competition_summaries:CompetitionSummaryProps[],
     competition_valid: {
         valid:boolean,
@@ -21,7 +22,7 @@ type CompetitionHeaderProps = {
     onActivate: () => void
 }
 
-const CompetitionHeader = ({ action_loading, competition_summaries, competition, competition_valid, onDelete, onActivate, onPause, onResume }:CompetitionHeaderProps) => {
+const CompetitionHeader = ({ header_style, action_loading, competition_summaries, competition, competition_valid, onDelete, onActivate, onPause, onResume }:CompetitionHeaderProps) => {
     const Colors = useColors();
     const handleActivate = () => {
         if(!competition_valid.valid){
@@ -38,8 +39,8 @@ const CompetitionHeader = ({ action_loading, competition_summaries, competition,
     }
     
     return (
-        <View style={{ minWidth:330 }}>
-            <View nativeID="competition_header" style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+        <View transparent>
+            <View nativeID="competition_header" style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, ...header_style }}>
                 <View>
                     <Image
                         source={{ uri: competition.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}

package/src/CompetitionManager/components/CompetitionInfoForm.tsx

@@ -1,22 +1,24 @@
 import React, { useEffect, useState } from 'react';
 import { Image } from "react-native"
-//import ImageUploader from '../../Components/ImageUploader';
-import type { CompetitionProps, FocusPositionProps, MyPlayerProps } from '../../types';
+import type { CompanyProps, CompetitionProps, FocusPositionProps, GroupProps, MyPlayerProps } from '../../types';
 import { Icons, Switch } from '../../Components';
 import ImageUploader from '../../Components/ImageUploader';
 import { Button, Text, TextInput, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
+import GroupSelector from './GroupSelector';
+import CompanySelector from './CompanySelector';
 
 type CompetitionInfoFormProps = {
     competition:CompetitionProps,
-    is_valid?:boolean,
     player?:MyPlayerProps,
+    groups:GroupProps[],
+    companies:CompanyProps[],
     onFocusPosition?:(position:FocusPositionProps) => void,
     init_expanded?:boolean,
     onCompetitionUpdate:(competition:CompetitionProps) => void
 }
 
-const CompetitionInfoForm = ({ is_valid, onFocusPosition, init_expanded, player, competition, onCompetitionUpdate }:CompetitionInfoFormProps) => {
+const CompetitionInfoForm = ({ onFocusPosition, init_expanded, player, competition, groups, companies, onCompetitionUpdate }:CompetitionInfoFormProps) => {
     const [ expanded, setExpanded ] = useState(init_expanded ?? false);
     const [ draft_competition, setDraftCompetition ] = useState<CompetitionProps | undefined>(undefined);
     const Colors = useColors();
@@ -25,21 +27,21 @@ const CompetitionInfoForm = ({ is_valid, onFocusPosition, init_expanded, player,
     },[competition])
 
     if(!draft_competition){ return <></> }
+    const active_group = groups.find(g => g.group_id == competition.group_id);
+    const active_company = companies.find(c => c.company_id == competition.company_id);
+
     const is_changed = JSON.stringify(draft_competition) != JSON.stringify(competition) ? true : false;
     return (
-        <View float style={{ flexGrow:1, borderRadius:0 }}>
+        <View style={{ borderRadius:0 }}>
             <Button 
                 disabled={init_expanded}
-            float style={{ flexDirection:'row', alignItems:'center', borderRadius:0}} onPress={() => setExpanded(!expanded)}>
-                {is_valid ?
-                <Icons.CheckCirlceIcon size={16} color={Colors.text.success} />
-                :
-                <Icons.AlertIcon size={16} color={Colors.text.warning} />
-                }
-                <View transparent style={{ flex:1, marginLeft:10 }}>
-                    <Text theme='h1'>Competition Information</Text>
-                    <Text style={{ marginTop:3 }} theme='description'>Manage the high level information of this competition</Text>
-                </View>
+                float 
+                style={{ flexDirection:'row', alignItems:'center', borderRadius:0, padding:20, backgroundColor:Colors.toggle.button.active}}
+                onPress={() => setExpanded(!expanded)}>
+                    <View transparent style={{ flex:1 }}>
+                        <Text theme='h1' color={Colors.toggle.text.active}>Competition Information</Text>
+                        <Text style={{ marginTop:3 }} theme='description' color={Colors.toggle.text.active}>Manage the high level information of this competition</Text>
+                    </View>
                 {is_changed ?
                 <Button
                     title='SAVE'
@@ -54,8 +56,8 @@ const CompetitionInfoForm = ({ is_valid, onFocusPosition, init_expanded, player,
             {expanded ?
             <View type='body' nativeID="competition_info">
                 
-                <View type='row' nativeID="competition_image" style={{ alignItems:'flex-start', borderBottomWidth:1, borderColor:Colors.borders.light, padding:10 }}>
-                    <View style={{ flex:1, margin:5 }}>
+                <View type='row' nativeID="competition_image" style={{ alignItems:'flex-start', borderBottomWidth:1, borderColor:Colors.borders.light, padding:20 }}>
+                    <View style={{ flex:1 }}>
                         <Text theme='h1'>Competition Image</Text>
                         <Text style={{ marginTop:3 }} theme='description'>Give this competition an image so it is recognizable to those trying to join.</Text>
                     </View>
@@ -72,8 +74,8 @@ const CompetitionInfoForm = ({ is_valid, onFocusPosition, init_expanded, player,
                     </ImageUploader>
                 </View>
 
-                <View type='row' nativeID="competition_name" style={{ flexWrap:'wrap', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
-                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                <View type='row' nativeID="competition_name" style={{ flexWrap:'wrap', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <View style={{ flex:1, minWidth:200 }}>
                         <Text theme='h1'>Competition Name</Text>
                         <Text style={{ marginTop:3 }} theme='description'>Give the competition a memorable name that aligns with the type and payout.</Text>
                     </View>
@@ -85,10 +87,9 @@ const CompetitionInfoForm = ({ is_valid, onFocusPosition, init_expanded, player,
                         placeholder="Competition Name"
                     />
                 </View>
-
-                <View type='row' nativeID="competition_description" style={{ flexWrap:'wrap', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
-                    <View style={{ flex:1, margin:5, minWidth:200  }}>
-                        <Text theme='h2'>Competition Description</Text>
+                <View type='row' nativeID="competition_description" style={{ flexWrap:'wrap', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <View style={{ flex:1, minWidth:200  }}>
+                        <Text theme='h1'>Competition Description</Text>
                         <Text style={{ marginTop:3 }} theme='description'>Give the competition a memorable description that would entice users to participate.</Text>
                     </View>
                     <TextInput
@@ -99,8 +100,8 @@ const CompetitionInfoForm = ({ is_valid, onFocusPosition, init_expanded, player,
                         placeholder="Pick 5 games ATS from NFL Week 6 matchups"
                     />
                 </View>
-                <View type='row' nativeID="invite_only" style={{ flexWrap:'wrap', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light  }}>
-                    <View style={{ flex:1, margin:5, marginRight:15 }}>
+                <View type='row' nativeID="invite_only" style={{ flexWrap:'wrap', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light  }}>
+                    <View style={{ flex:1, marginRight:15 }}>
                         <Text theme='h1'>Make Private</Text>
                         <Text style={{ marginTop:3 }} theme='description'>Only access this competition using an invite code.</Text>
                     </View>
@@ -108,13 +109,16 @@ const CompetitionInfoForm = ({ is_valid, onFocusPosition, init_expanded, player,
                         disabled={competition.competition_season_id ? true : false}
                         value={competition.invite_only}
                         switch_type="on_off"
-                        onChange={(value) => onCompetitionUpdate({ ...draft_competition, invite_only: value })}
+                        onChange={(value) => {
+                            if(player?.role != 'admin'){ return alert('You do not have access to make public competitions at this time.') }
+                            onCompetitionUpdate({ ...draft_competition, invite_only: value })
+                        }}
                     />
                 </View>
                 {player?.role == 'admin' ?
-                <View type='row' nativeID="invite_only" style={{ flexWrap:'wrap', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light  }}>
-                    <View style={{ flex:1, margin:5, marginRight:15 }}>
-                        <Text theme='h2'>Make Template</Text>
+                <View type='row' nativeID="invite_only" style={{ flexWrap:'wrap', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light  }}>
+                    <View style={{ flex:1, marginRight:15 }}>
+                        <Text theme='h1'>Make Template</Text>
                         <Text style={{ marginTop:3 }} theme='description'>This will allow for other users to copy this competition and create it for themselves.</Text>
                     </View>
                     <Switch
@@ -124,6 +128,32 @@ const CompetitionInfoForm = ({ is_valid, onFocusPosition, init_expanded, player,
                     />
                 </View>
                 :<></>}
+                {groups.length > 0 ?
+                <View style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <View style={{ marginBottom:10 }}>
+                        <Text theme='h1'>My Groups</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>Add this competition to a group that you are a member of</Text>
+                    </View>
+                    <GroupSelector
+                        active_group={active_group}
+                        groups={groups}
+                        onSelectGroup={(g) => onCompetitionUpdate({ ...draft_competition, group_id: g?.group_id })}
+                    />
+                </View>
+                :<></>}
+                {companies.length > 0 ?
+                <View style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <View style={{ marginBottom:10 }}>
+                        <Text theme='h1'>My Companies</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>Add this competition to a company that you are a member of</Text>
+                    </View>
+                    <CompanySelector
+                        active_company={active_company}
+                        companies={companies}
+                        onSelectCompany={(c) => onCompetitionUpdate({ ...draft_competition, company_id: c?.company_id })}
+                    />
+                </View>
+                :<></>}
             </View>
             :<></>}
         </View>

package/src/CompetitionManager/components/CompetitionMatchMarketCard.tsx

@@ -92,20 +92,15 @@ const CompetitionMatchMarketCard = ({ market, competition_match_markets, onUpdat
     if(!o_side || !trade_side){ return <></> }
 
     return (
-        <View style={{ flexDirection:'row' }}>
-            <View>
-                <TouchableOpacity disabled style={{ width:75, padding:5, backgroundColor:o_side.status == 'error' ? Colors.highlights.highlight300Faded :Colors.shades.shade600, borderRadius:4, marginRight:3 }} onPress={() => setDraftCompetitionMatchMarket(o_side)}>
-                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{o_side.side.toUpperCase()}{market.var_1_required?` ${ManageCompetitionHelpers.getVar1Label(o_side.var_1 as number, market)}`:''}</Text>
-                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{ManageCompetitionHelpers.getOddsLabel(o_side.odds as number)}</Text>
-                </TouchableOpacity>
-            </View>
-            <View>
-                <TouchableOpacity disabled style={{ width:75, padding:5, backgroundColor:trade_side.status == 'error' ? Colors.highlights.highlight300Faded :Colors.shades.shade600, borderRadius:4, marginLeft:3 }} onPress={() => setDraftCompetitionMatchMarket(trade_side)}>
-                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{trade_side.side.toUpperCase()}{market.var_1_required?` ${ManageCompetitionHelpers.getVar1Label(trade_side.var_1 as number, market)}`:''}</Text>
-                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{ManageCompetitionHelpers.getOddsLabel(trade_side.odds as number)}</Text>
-                </TouchableOpacity>
-            </View>
-            
+        <View style={{ flexGrow:1, flexDirection:'row', margin:5 }}>
+            <TouchableOpacity disabled style={{ flexGrow:1, minWidth:75, padding:10, backgroundColor:o_side.status == 'error' ? Colors.highlights.highlight300Faded :Colors.shades.shade600, borderRadius:4, marginRight:3 }} onPress={() => setDraftCompetitionMatchMarket(o_side)}>
+                <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{o_side.side.toUpperCase()}{market.var_1_required?` ${ManageCompetitionHelpers.getVar1Label(o_side.var_1 as number, market)}`:''}</Text>
+                <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{ManageCompetitionHelpers.getOddsLabel(o_side.odds as number)}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity disabled style={{ flexGrow:1, minWidth:75, padding:10, backgroundColor:trade_side.status == 'error' ? Colors.highlights.highlight300Faded :Colors.shades.shade600, borderRadius:4, marginLeft:3 }} onPress={() => setDraftCompetitionMatchMarket(trade_side)}>
+                <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{trade_side.side.toUpperCase()}{market.var_1_required?` ${ManageCompetitionHelpers.getVar1Label(trade_side.var_1 as number, market)}`:''}</Text>
+                <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{ManageCompetitionHelpers.getOddsLabel(trade_side.odds as number)}</Text>
+            </TouchableOpacity>            
         </View>
     )