be-components 1.4.9 → 1.5.1

package/src/CompetitionSeasonManager/components/CreateSeasonForm.tsx

@@ -0,0 +1,238 @@
+import React, { useEffect, useState } from 'react';
+import { View, ScrollView, TouchableOpacity, Image, FlatList } from "react-native";
+import { view_styles } from '../../constants/styles';
+import { Button, Icons, Text, TextInput } from '../../Components';
+import type { CompanyProps, CompetitionSeasonProps } from '../../types';
+import { ManageSeasonApi, ManageSeasonHelpers } from '../api';
+import Colors from '../../constants/colors';
+
+type CreateSeasonFormProps = {
+    width:number,
+    max_height?:number,
+    onCreateSeason:(cs:CompetitionSeasonProps) => void,
+    onClose:() => void
+}
+
+const CreateSeasonForm = ({ width, max_height, onCreateSeason, onClose }:CreateSeasonFormProps) => {
+    const [ action_loading, setActionLoading ] = useState(false);
+    const [ draft_season, setDraftSeason ] = useState<CompetitionSeasonProps>(ManageSeasonHelpers.getPendingSeason());
+    const [ show_companies, setShowCompanies ] = useState(false);
+    const [ show_templates, setShowTemplates ] = useState(false);
+
+    const [ form_data, setFormData ] = useState<{
+        templates:CompetitionSeasonProps[],
+        companies:CompanyProps[]
+    }>({
+        templates: [],
+        companies: []
+    });
+    const { templates, companies } = form_data;
+
+    const selected_company = companies.find(c => c.company_id == draft_season.company_id);
+    const selected_template = templates.find(cs => cs.competition_season_id == draft_season.following_season_id)
+
+    useEffect(() => {
+        ManageSeasonApi.setEnvironment();
+        getFormData()
+    },[])
+
+    const getFormData = async() => {
+        const temps = await ManageSeasonApi.getSeasonTemplates();
+        const company_resp = await ManageSeasonApi.getMyCompanies();
+        setFormData({
+            ...form_data,
+            companies: company_resp.companies,
+            templates:temps
+        })
+    }
+
+    const handleCreate = async(season:CompetitionSeasonProps) => {
+        setActionLoading(true);
+        const new_season = await ManageSeasonApi.createSeason(season);
+        console.log(new_season)
+        onCreateSeason(new_season);
+        setActionLoading(false);
+    }
+
+    const renderCompanies = (data: { item:CompanyProps, index:number }) => {
+        return (
+            <TouchableOpacity style={{ ...view_styles.body_row, padding:10 }} onPress={() => {
+                setDraftSeason({ ...draft_season, company_id: data.item.company_id })
+                setShowCompanies(false)
+            }}>
+                <Image
+                    source={{ uri: data.item.company_image?.url }}
+                    style={{ height:50, width:50, borderRadius:4 }}
+                    resizeMode="cover"
+                />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="header_2">{data.item.company_name}</Text>
+                    <Text style={{ marginTop:3 }} theme="body">{data.item.company_description}</Text>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+
+
+    const renderTemplates = (data: { item:CompetitionSeasonProps, index:number }) => {
+        return (
+            <TouchableOpacity style={{ ...view_styles.body_row, padding:10 }} onPress={() => {
+                setDraftSeason({ ...draft_season, following_season_id: data.item.competition_season_id })
+                setShowTemplates(false)
+            }}>
+                <Image
+                    source={{ uri: data.item.image?.url }}
+                    style={{ height:50, width:50, borderRadius:4 }}
+                    resizeMode="cover"
+                />
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="header_2">{data.item.season_name}</Text>
+                    <Text style={{ marginTop:3 }} theme="body">{data.item.season_description}</Text>
+                </View>
+            </TouchableOpacity>
+        )
+    }
+
+
+
+    if(!draft_season){ return <></> }
+
+    const errors = ManageSeasonHelpers.isSeasonValid(draft_season);
+
+    return (
+        <View style={{ ...view_styles.section, width,  maxHeight:max_height ?? 700, }}>
+            <View style={{ ...view_styles.section_header }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>Create New Season</Text>
+                </View>
+            </View>
+            <ScrollView style={{ ...view_styles.section_body, flex:1 }}>
+                <View style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width }}>
+                    <View style={{ margin:5 }}>
+                        <Text theme='header_2'>Season Name</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Give your season a memorable name.</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, flex:1, margin:5 }}
+                        value={draft_season?.season_name}
+                        placeholder='Season Name'
+                        placeholderTextColor={Colors.brand.slate}
+                        onChangeText={(text) => setDraftSeason({ ...draft_season, season_name: text })}
+                    />
+                </View>
+                {companies.length > 0 ?
+                <View style={{ padding:10 }}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme="header">Company</Text>
+                        <Text style={{ marginTop:3 }} theme="body">Is this competition associated with one of your companies / brands?</Text>
+                    </View>
+                    <View style={{ padding:10, borderRadius:4, borderWidth:1, borderColor:Colors.shades.shade600, backgroundColor:Colors.shades.white }}>
+                        <TouchableOpacity style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setShowCompanies(!show_companies)}>
+                            {selected_company ?
+                            <View style={{ flex:1, flexDirection:'row' }}>
+                                <Image
+                                    source={{ uri: selected_company.company_image?.url }}
+                                    style={{ height:50, width:50, borderRadius:4 }}
+                                    resizeMode="cover"
+                                />
+                                <View style={{ flex:1, marginLeft:10 }}>
+                                    <Text theme="header_2">{selected_company.company_name}</Text>
+                                    <Text style={{ marginTop:3 }} theme="body">{selected_company.company_description}</Text>
+                                </View>
+                            </View>
+                            :
+                            <View style={{ flex:1 }}>
+                                <Text theme="header_2">View Companies</Text>
+                            </View>
+                            }
+                            <Icons.ChevronIcon direction={show_companies ? 'up' : 'down'} size={8} color={Colors.brand.midnight}/>
+                        </TouchableOpacity>
+                        {show_companies ?
+                        <View>
+                            <TouchableOpacity style={{ padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => {
+                                setDraftSeason({ ...draft_season, company_id:undefined })
+                                setShowCompanies(false);
+                            }}>
+                                <Text theme="header_2">NO COMPANY</Text>
+                            </TouchableOpacity>
+                            <FlatList
+                                data={companies}
+                                renderItem={renderCompanies}
+                                keyExtractor={(item) => item.company_id.toString()}
+                            />
+                        </View>
+                        :<></>}
+                    </View>
+                </View>
+                :<></>}
+                {templates.length > 0 ?
+                <View style={{ padding:10 }}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme="header">Create From Template</Text>
+                        <Text style={{ marginTop:3 }} theme="body">Optionally you can select a template to auto create this competition from</Text>
+                    </View>
+                    <View style={{ padding:10, borderRadius:4, borderWidth:1, borderColor:Colors.shades.shade600, backgroundColor:Colors.shades.white }}>
+                        <TouchableOpacity style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setShowTemplates(!show_templates)}>
+                            {selected_template ?
+                            <View style={{ flex:1, flexDirection:'row' }}>
+                                <Image
+                                    source={{ uri: selected_template.image?.url }}
+                                    style={{ height:50, width:50, borderRadius:4 }}
+                                    resizeMode="cover"
+                                />
+                                <View style={{ flex:1, marginLeft:10 }}>
+                                    <Text theme="header_2">{selected_template.season_name}</Text>
+                                    <Text style={{ marginTop:3 }} theme="body">{selected_template.season_description}</Text>
+                                </View>
+                            </View>
+                            :
+                            <View style={{ flex:1 }}>
+                                <Text theme="header_2">View Templates</Text>
+                            </View>
+                            }
+                            <Icons.ChevronIcon direction={show_templates ? 'up' : 'down'} size={8} color={Colors.brand.midnight}/>
+                        </TouchableOpacity>
+                        {show_templates ?
+                        <View>
+                            <TouchableOpacity style={{ padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => {
+                                setDraftSeason({ ...draft_season, following_season_id:undefined })
+                                setShowTemplates(false);
+                            }}>
+                                <Text theme="header_2">NO TEMPLATE</Text>
+                            </TouchableOpacity>
+                            <FlatList
+                                data={templates}
+                                renderItem={renderTemplates}
+                                keyExtractor={(item) => item.competition_season_id.toString()}
+                            />
+                        </View>
+                        :<></>}
+                    </View>
+            </View>
+            :<></>}
+            </ScrollView>
+            <View style={{ ...view_styles.section_footer }}>
+                <Button
+                    title="CLOSE"
+                    title_color={Colors.shades.white}
+                    style={{ flex:1, marginRight:8 }}
+                    padding={15}
+                    backgroundColor={Colors.utility.error}
+                    onPress={() => onClose()}
+                />
+                <Button
+                    title="CREATE SEASON"
+                    title_color={Colors.shades.white}
+                    loading={action_loading}
+                    backgroundColor={Colors.utility.success}
+                    padding={15}
+                    style={{ flex:2, opacity: !action_loading && errors.length == 0 ? 1 : 0.5 }}
+                    disabled={errors.length > 0 || action_loading ? true : false}
+                    onPress={() => handleCreate(draft_season)}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default CreateSeasonForm

package/src/CompetitionSeasonManager/components/SeasonHeader.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { View, Image } from 'react-native';
+import type { CompetitionSeasonProps } from '../../types';
+import { Button, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { view_styles } from '../../constants/styles';
+
+type CompetitionHeaderProps = {
+    width:number,
+    action_loading:boolean,
+    competition_season:CompetitionSeasonProps,
+    season_valid:boolean,
+    onDelete:() => void,
+    onActivate: () => void
+}
+
+const SeasonHeader = ({ width, action_loading, competition_season, season_valid, onDelete, onActivate }:CompetitionHeaderProps) => {
+    
+    const handleActivate = () => {
+        if(!season_valid){
+            return alert(`Please complete all the required sections before activating`)
+        }
+        onActivate()
+    }
+    
+    return (
+        <View style={{ backgroundColor:Colors.shades.white, flexGrow:1, minWidth:330, maxWidth:width }}>
+            <View nativeID="competition_header" style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View>
+                    <Image
+                        source={{ uri: competition_season.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}
+                        style={{ height:50, width:50, borderRadius:4 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header'>{competition_season.season_name}</Text>
+                    <Text style={{ marginTop:4 }} theme='header_2>'>{competition_season.season_description}</Text>
+                </View>
+                {competition_season.status == 'pending'?
+                <Button
+                    title={'ACTIVATE'}
+                    style={{ opacity:season_valid ? 1: 0.5 }}
+                    loading={action_loading}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => handleActivate()}
+                />
+                :<></>}
+            </View>
+            {competition_season.status == 'pending' ? 
+            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>SEASON IS PENDING</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>Complete each section and press 'ACTIVATE'.</Text>
+                </View>
+                <Button
+                    title='DELETE'
+                    style={{ opacity:!action_loading? 1: 0.5 }}
+                    loading={action_loading}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.error}
+                    onPress={async() => {
+                        const confirmed = await confirm(`Are you sure you would like to delete this competition?  This cannot be undone.`)
+                        if(!confirmed){ return }
+                        onDelete();
+                    }}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SeasonHeader

package/src/CompetitionSeasonManager/components/SeasonInfoForm.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, View, Image } from 'react-native';
+import { view_styles } from '../../constants/styles';
+import { Button, Icons, Switch, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import ImageUploader from '../../Components/ImageUploader';
+import type { CompetitionSeasonProps, MyPlayerProps } from '../../types';
+import { ManageSeasonHelpers } from '../api';
+
+type SeasonInfoFormProps = {
+    width:number,
+    player?:MyPlayerProps,
+    competition_season:CompetitionSeasonProps,
+    onSeasonUpdate: (cs:CompetitionSeasonProps) => void
+}
+
+const SeasonInfoForm = ({ competition_season, player, width, onSeasonUpdate }:SeasonInfoFormProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+    const [ draft_season, setDraftSeason ] = useState<CompetitionSeasonProps>();
+
+    useEffect(() => {
+        setDraftSeason(competition_season)
+    },[competition_season])
+
+    if(!draft_season){ return <></> }
+
+    const is_changed = ManageSeasonHelpers.isInfoChanged(competition_season, draft_season);
+
+    return (
+        <View style={{ ...view_styles.section }}>
+            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setExpanded(!expanded)}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>Season Info</Text>
+                    <Text style={{ marginTop:3 }}>Update high level information for this competition season</Text>
+                </View>
+                {is_changed ?
+                <Button
+                    title='SAVE'
+                    padding={10}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => onSeasonUpdate(draft_season)}
+                />
+                :
+                <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} color={Colors.brand.midnight} size={8} />
+                }
+            </TouchableOpacity>
+            {expanded ?
+            <View style={{ ...view_styles.section_body }}>
+                <View nativeID="competition_image" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme='header_2'>Competition Image</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Give this competition an image so it is recognizable to those trying to join.</Text>
+                    </View>
+                    <ImageUploader
+                        public_id={`season_image_${draft_season.competition_season_id}_${Math.random()}`}
+                        onFinishUpload={obj => onSeasonUpdate({ ...draft_season, image: { ...obj, url:obj.secure_url } })}
+                    >
+                        <Image
+                            source={{ uri: draft_season.image?.url }}
+                            style={{ height: 50, width:50, borderRadius:4 }}
+                            resizeMode='cover'
+                        />
+                        <Text size={12} color={Colors.brand.electric} textAlign='center'>CHANGE</Text>
+                    </ImageUploader>
+                </View>
+                <View nativeID="competition_name" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme='header_2'>Competition Name</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Give the competition a memorable name that aligns with the type and payout.</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, flexGrow:1, margin:5 }}
+                        onChangeText={(text) => setDraftSeason({ ...draft_season, season_name:text })}
+                        value={draft_season.season_name}
+                        placeholder="Competition Name"
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+
+                <View nativeID="competition_description" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width, marginTop:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1, margin:5, minWidth:200  }}>
+                        <Text theme='header_2'>Competition Description</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Give the competition a memorable description that would entice users to participate.</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, flexGrow:1, margin:5 }}
+                        onChangeText={(text) => setDraftSeason({ ...draft_season, season_description:text })}
+                        value={draft_season.season_description}
+                        placeholder="Pick 5 games ATS from NFL Week 6 matchups"
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+                {player?.role == 'admin' ?
+                <View nativeID="invite_only" style={{ ...view_styles.body_row, flexWrap:'wrap', marginTop:10, borderBottomWidth:1, borderColor:Colors.shades.shade600  }}>
+                    <View style={{ flex:1, margin:5, marginRight:15 }}>
+                        <Text theme='header_2'>Make Template</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Can this season be selected by others to replicate?  Any competition created in this competition will be extrapolated to others.</Text>
+                    </View>
+                    <Switch
+                        value={draft_season.template ?? false}
+                        switch_type="on_off"
+                        onChange={(value) => onSeasonUpdate({ ...draft_season, template: value })}
+                    />
+                </View>
+                :<></>}
+                <View nativeID="invite_only" style={{ ...view_styles.body_row, flexWrap:'wrap', marginTop:10, borderBottomWidth:1, borderColor:Colors.shades.shade600  }}>
+                    <View style={{ flex:1, margin:5, marginRight:15 }}>
+                        <Text theme='header_2'>Make Private</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Only access this competition using an invite code.</Text>
+                    </View>
+                    <Switch
+                        value={draft_season.invite_only}
+                        switch_type="on_off"
+                        onChange={(value) => onSeasonUpdate({ ...draft_season, invite_only: value })}
+                    />
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SeasonInfoForm

package/src/CompetitionSeasonManager/components/SeasonSettingsForm.tsx

@@ -0,0 +1,185 @@
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, View, FlatList } from 'react-native';
+import { view_styles } from '../../constants/styles';
+import { Button, Icons, Switch, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import type { CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps } from '../../types';
+import { ManageSeasonHelpers } from '../api';
+import DropDown from '../../Components/Dropdown';
+
+type SeasonSettingsFormProps = {
+    width:number,
+    competition_season:CompetitionSeasonProps,
+    competition_types:CompetitionTypeProps[],
+    competition_result_types:CompetitionResultTypeProps[],
+    onSeasonUpdate: (cs:CompetitionSeasonProps) => void
+}
+
+const SeasonSettingsForm = ({ competition_season, width, competition_types, competition_result_types, onSeasonUpdate }:SeasonSettingsFormProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+    const [ draft_season, setDraftSeason ] = useState<CompetitionSeasonProps>();
+
+    const competition_type = competition_types.find(ct => ct.competition_type_id == draft_season?.competition_type_id);
+    const competition_result_type = competition_result_types.find(crt => crt.competition_result_type_id == draft_season?.competition_result_type_id);
+
+    useEffect(() => {
+        setDraftSeason(competition_season)
+    },[competition_season])
+
+    if(!draft_season){ return <></> }
+
+    const renderCompetitionTypes = (data:{ item:CompetitionTypeProps, index:number }) => {
+        if(!draft_season) { return <></> }
+        const selected = data.item.competition_type_id == draft_season.competition_type_id ? true : false
+        return (
+            <TouchableOpacity style={{ minWidth:75, margin:1, borderRadius:8, padding:10, backgroundColor:selected?Colors.brand.midnight:undefined }} onPress={() => onSeasonUpdate({ ...draft_season, competition_type_id: data.item.competition_type_id })}>
+                <Text textAlign="center"  color={selected?Colors.shades.white:Colors.brand.midnight} weight={selected?'bold':'regular'} size={14}>{data.item.type_label}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+    const is_changed = ManageSeasonHelpers.isSettingsChanged(competition_season, draft_season);
+    const is_valid = ManageSeasonHelpers.isSettingsValid(draft_season);
+    return (
+        <View style={{ ...view_styles.section }}>
+            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setExpanded(!expanded)}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>Season Settings</Text>
+                    <Text style={{ marginTop:3 }}>Update season settings</Text>
+                </View>
+                {is_changed ?
+                <Button
+                    title='SAVE'
+                    padding={10}
+                    style={{ opacity: is_valid ? 1 : 0.5 }}
+                    disabled={!is_valid}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => onSeasonUpdate(draft_season)}
+                />
+                :
+                <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} color={Colors.brand.midnight} size={8} />
+                }
+            </TouchableOpacity>
+            {expanded ?
+            <View style={{ ...view_styles.section_body }}>
+                 <View style={{ ...view_styles.body_row, maxWidth:width, borderBottomWidth:1, marginTop:10, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme="header_2">Ticket Price</Text>
+                        <Text style={{ marginTop:3 }}>How much does it cost to enter this season?</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, width:75, textAlign:'center' }}
+                        onChangeText={(text) => setDraftSeason({ ...draft_season, ticket_price: text })}
+                        placeholder="0"
+                        value={draft_season.ticket_price as string}
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+                <View style={{ ...view_styles.body_row, maxWidth:width, borderBottomWidth:1, marginTop:10, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme="header_2">Season Payout Allocation</Text>
+                        <Text style={{ marginTop:3 }}>How much of the total pot should be allocated to the season winners?  Remaining is paid out each competition.</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, width:75, textAlign:'center' }}
+                        onChangeText={(text) => setDraftSeason({ ...draft_season, payout_allocation: text })}
+                        placeholder="0"
+                        value={draft_season.payout_allocation as string}
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+                <View nativeID="competition_type" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme="header_2">Competition Type</Text>
+                        <Text style={{ marginTop:3 }} theme="body">{competition_type?competition_type.description:'Choose the type of competition this is.'}</Text>
+                    </View>
+                    <View style={{ margin:5, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                        <FlatList
+                            data={competition_types}
+                            renderItem={renderCompetitionTypes}
+                            keyExtractor={(item) => item.competition_type_id.toString()}
+                            horizontal
+                        />
+                    </View>
+                </View>
+                {competition_type?.type == 'pick' ?
+                <View style={{ ...view_styles.body_row, maxWidth:width, marginTop:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme="header_2">Max Picks</Text>
+                        <Text style={{ marginTop:3 }}>The total number of picks allowed by each participant.</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, width:75, textAlign:'center' }}
+                        onChangeText={(text) => setDraftSeason({ ...draft_season, max_picks: text })}
+                        placeholder="0"
+                        value={draft_season.max_picks as string}
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+                :<></>}
+                {competition_type?.type == 'wager' ?
+                <View style={{ ...view_styles.body_row, maxWidth:width, borderBottomWidth:1, marginTop:10, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme="header_2">Initial Balance</Text>
+                        <Text style={{ marginTop:3 }}>Initial balance that each player will start with at the beginning of the competition.</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, width:75, textAlign:'center' }}
+                        onChangeText={(text) => setDraftSeason({ ...draft_season, initial_balance: text })}
+                        placeholder="0"
+                        value={draft_season.initial_balance as string}
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+                :<></>}
+                {competition_type?.type == 'wager' ?
+                <View style={{ ...view_styles.body_row, maxWidth:width, borderBottomWidth:1, marginTop:10, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme="header_2">Rollover Balance</Text>
+                        <Text style={{ marginTop:3 }}>Should the wager balance for each player rollover from prior competitions?</Text>
+                    </View>
+                    <Switch
+                        value={draft_season.balance_rollover}
+                        switch_type="on_off"
+                        onChange={(value) => onSeasonUpdate({ ...draft_season, balance_rollover: value })}
+                    />
+                </View>
+                :<></>}
+                 <View nativeID="competition_payout" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme="header_2">Competition Payout Type</Text>
+                        <Text style={{ marginTop:3 }} theme="body">{competition_result_type?competition_result_type.description:'Choose the type of payout for this competition'}</Text>
+                    </View>
+                    <View style={{ justifyContent:'flex-end', margin:5, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                        <DropDown
+                            dropdown_options={[
+                                {value: 'competition_result_type_id', eligible_options: competition_result_types.filter(crt => crt.type != 'outpace').map(t => t.label)}
+                            ]}
+                            selected_value={competition_result_type?.label ?? ''}
+                            onOptionSelect={(type) => {
+                                const new_result_type = competition_result_types.find(crt => crt.label == type);
+                                if(!new_result_type){ return }
+                                onSeasonUpdate({ ...draft_season, competition_result_type_id: new_result_type.competition_result_type_id })
+                            }}
+                        />
+                    </View>
+                </View>
+                <View nativeID="invite_only" style={{ ...view_styles.body_row, flexWrap:'wrap', marginTop:10, borderBottomWidth:1, borderColor:Colors.shades.shade600  }}>
+                    <View style={{ flex:1, margin:5, marginRight:15 }}>
+                        <Text theme='header_2'>Allow Late Buy In</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Determines if a player can join the season after it has started.</Text>
+                    </View>
+                    <Switch
+                        value={draft_season.allow_late_buy_in}
+                        switch_type="on_off"
+                        onChange={(value) => onSeasonUpdate({ ...draft_season, allow_late_buy_in: value })}
+                    />
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SeasonSettingsForm