be-components 6.7.8 → 6.7.9

package/src/CreateEngagement/index.tsx

@@ -0,0 +1,874 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from "../Components/Themed"
+import type { BracketCompetitionProps, CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, CreateEngagementStepProps, EventProps, FocusPositionProps, GroupProps, LeagueProps, PollProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
+import { FlatList, Image, type ViewStyle } from 'react-native';
+import { CreateEngagementApi, CreateEngagementHelpers } from './api';
+import { Icons } from '../Components';
+import { useColors } from '../constants/useColors';
+import ImageUploader from '../Components/ImageUploader';
+import moment from 'moment-mini';
+import LeagueSchedule from '../MarketComponents/components/LeagueSchedule';
+
+type CreateEngagementProps = {
+    player?:PublicPlayerProps,
+    onFocusPostiion?:(pos:FocusPositionProps) => void,
+    onCreateCompetition:(competition:CompetitionProps) => void,
+    onCreateBracketCompetition:(bc:BracketCompetitionProps) => void,
+    onCreateSquaresCompetition:(sc:SquaresCompetitionProps) => void,
+    onCreateFlashMarket:(fm:PollProps) => void,
+    header_style?:ViewStyle,
+    footer_style?:ViewStyle,
+    float?:boolean,
+    onClose:() => void,
+    init_engagement?:'competition'|'bracket'|'squares'|'flash'
+    group_id?:string,
+    company_id?:string
+}
+
+const sections = ['header','intro','step','info','groups','companies', 'create', 'image','success']
+
+
+const steps:CreateEngagementStepProps[] = [
+    { step_key: 'intro', num: 1, title: 'BettorEdge Engagements', description: 'Create an engagement and share with friends to play along' },
+    { step_key: 'options', num:2, title: 'Engagement Types', description: 'Select an engagement type below to get started!' },
+    { step_key: 'group', num:3, title: 'Add Group', description: 'Select one of your groups to add this engagement to!' },
+    { step_key: 'company', num:4, title: 'Add Company', description: 'Select one of your companie to add this engagement to!' },
+    { step_key: 'image', num:5, title:'Add an Image!', description: 'Add an image to your engagement to make it stand out!' },
+    { step_key: 'create', num:6, title: 'Create Engagement', description: 'Complete the step below to create this BettorEdge Engagement!' },
+    { step_key: 'success', num:7, title: 'Engagement Successfully Created!', description: 'Your engagement is in pending status. You can activate it when ready from your dashboard or the engagement screen!' }
+]
+
+const CreateEngagement = ({ float, player, init_engagement, onFocusPostiion, group_id, company_id, header_style, footer_style, onClose, onCreateCompetition, onCreateBracketCompetition, onCreateSquaresCompetition, onCreateFlashMarket}:CreateEngagementProps) => {
+    const Colors = useColors();
+    const [ size, setSize ] = useState({ width:0, height:0 });
+    const [ draft_squares, setDraftSquares ] = useState<SquaresCompetitionProps | undefined>(undefined);
+    const [ pending_engagement, setPendingEngagement ] = useState<{
+        create_loading:boolean,
+        competition?:CompetitionProps,
+        poll?:PollProps,
+        bracket_competition?:BracketCompetitionProps,
+        squares_competition?:SquaresCompetitionProps
+    }>({
+        create_loading: false
+    })
+    const [ draft_competition, setDraftCompetition ] = useState<undefined | {
+        loading:boolean,
+        types_visible:boolean,
+        results_visible: boolean,
+        competition_name:string,
+        competition_template_id?:string,
+        competition_type?:CompetitionTypeProps,
+        pacer_id?:string,
+        competition_result_type?:CompetitionResultTypeProps,
+        competition_description:string,
+        competition_types:CompetitionTypeProps[],
+        competition_payout_types:CompetitionPayoutTypeProps[],
+        competition_result_types:CompetitionResultTypeProps[]
+    }>(undefined);
+
+    const [ draft_image, setDraftImage ] = useState<any>(undefined);
+    const [ active_step, setActiveStep ] = useState<CreateEngagementStepProps>(steps[0] as CreateEngagementStepProps)
+    const [ state, setState ] = useState<{
+        loading: boolean,
+        active_engagment?:'competition'|'squares'|'flash'|'bracket',
+        active_group?:GroupProps,
+        active_company?:CompanyProps,
+        groups:GroupProps[],
+        companies:CompanyProps[]
+    }>({
+        loading:false,
+        groups: [],
+        companies: []
+    });
+
+    const { active_engagment, groups, companies, active_company, active_group } = state;
+
+    useEffect(() => {
+        CreateEngagementApi.setEnvironment();
+        loadStaticData();
+    },[player?.player_id])
+
+    const loadStaticData = async() => {
+        setState({ ...state, loading:true });
+        let my_grups = await CreateEngagementApi.getMyGroups(0);
+        let my_comps = await CreateEngagementApi.getMyCompanies();
+        let act_group = my_grups.groups.find(g => g.group_id == group_id);
+        let act_company = my_comps.companies.find(c => c.company_id == company_id);
+        setState({
+            ...state,
+            active_group: act_group,
+            active_engagment: init_engagement ? init_engagement : active_engagment,
+            active_company: act_company,
+            groups: my_grups.groups,
+            companies: my_comps.companies,
+            loading:false
+        })
+    }
+    const errors = CreateEngagementHelpers.isStepValid(active_step, active_engagment, draft_competition, draft_squares);
+
+    const handleNextStep = async() => {
+        if(errors.length > 0){ return alert(errors.map(e => e)) }
+        let next_step = steps[active_step.num]
+        if(!next_step){ return }
+        switch(active_step.step_key){
+            case 'intro':
+                return setActiveStep(next_step)
+            case 'options':
+                let group_step = steps.find(s => s.step_key == 'group');
+                let company_step = steps.find(s => s.step_key == 'company');
+                let create_step = steps.find(s => s.step_key == 'create');
+                if(group_step && groups.length > 0){ return setActiveStep(group_step) }
+                if(company_step && companies.length > 0){ return setActiveStep(company_step) }
+                if(!create_step){ return }
+                return setActiveStep(create_step)
+            case 'group':
+                let n_company_step = steps.find(s => s.step_key == 'company');
+                let n_create_step = steps.find(s => s.step_key == 'create');
+                if(n_company_step && companies.length > 0){ return setActiveStep(n_company_step) }
+                if(!n_create_step){ return }
+                return setActiveStep(n_create_step)
+            case 'company':
+                return setActiveStep(next_step)
+            case 'image':
+                return setActiveStep(next_step)
+            case 'create':
+                switch(active_engagment){
+                    case 'competition':
+                        if(!draft_competition){ return }
+                        if(errors.length > 0){ return alert(errors.map(e => e)) }
+                        if(!draft_competition.competition_type){ return }
+                        if(!draft_competition.competition_result_type){ return }
+                        setPendingEngagement({ ...pending_engagement, create_loading: true });
+                        
+                        let new_competition = await CreateEngagementApi.createCompetition(
+                            draft_competition.competition_name, 
+                            draft_competition.competition_description, 
+                            draft_competition.competition_type.competition_type_id,
+                            draft_competition.competition_result_type.competition_result_type_id,
+                            active_company?.company_id,
+                            active_group?.group_id,
+                            draft_competition.pacer_id,
+                            draft_competition.competition_template_id,
+                            undefined,
+                            draft_image
+                        )
+                        
+                        setPendingEngagement({ ...pending_engagement, create_loading: false, competition: new_competition });
+                        break
+                    case 'squares':
+                        if(!draft_squares){ return alert('Unable to process') }
+                        if(errors.length > 0){ return alert(errors.map(e => e)) }
+                        setPendingEngagement({ ...pending_engagement, create_loading:true })
+                        const new_squares_comp = await CreateEngagementApi.createSquaresCompetition({ ...draft_squares, image: draft_image, company_id: active_company?.company_id, group_id: active_group?.group_id});
+                        setPendingEngagement({ ...pending_engagement, create_loading: false, squares_competition: new_squares_comp });
+                        break
+                    default: return //We cdont have one!
+                }
+                setActiveStep(next_step)
+                return
+            case 'success':
+                switch(active_engagment){
+                    case 'competition':
+                        if(!pending_engagement.competition){ return alert('Unable to process') }
+                        return onCreateCompetition(pending_engagement.competition)
+                    case 'bracket':
+                        if(!pending_engagement.bracket_competition){ return alert('Unable to process') }
+                        return onCreateBracketCompetition(pending_engagement.bracket_competition)
+                    case 'squares':
+                        if(!pending_engagement.squares_competition){ return alert('Unable to process') }
+                        return onCreateSquaresCompetition(pending_engagement.squares_competition)
+                    case 'flash':
+                        if(!pending_engagement.poll){ return alert('Unable to process') }
+                        return onCreateFlashMarket(pending_engagement.poll);
+                    default: return alert('Unable to process')
+                }
+            default: return
+        }
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'intro':
+                if(active_step.step_key != 'intro'){ return <></> }
+                return (
+                    <View>
+                        <Image
+                            source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/w_1000,ar_16:9,c_fill,g_auto,e_sharpen/v1757428505/ChatGPT_Image_Sep_9_2025_09_34_28_AM_vzjage.png' }}
+                            style={{ width: size.width, height: size.width * 0.5 }}
+                            resizeMode='cover'
+                        />
+                    </View>
+                )
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, ...header_style }}>
+                        {draft_image?.url ?
+                        <Image
+                            source={{ uri: draft_image?.url }}
+                            style={{ height:50, width:50 }}
+                            resizeMode='cover'
+                        />
+                        : active_engagment == 'competition' ?
+                        <Icons.PickEmIcon size={20} color={Colors.text.h1} />
+                        : active_engagment == 'bracket' ?
+                        <Icons.BracketIcon size={20} color={Colors.text.h1} />
+                        : active_engagment == 'squares' ?
+                        <Icons.SquaresIcon size={20} color={Colors.text.h1} />
+                        : <></>}
+                        <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                            <Text theme='h1'>Create {active_engagment ? active_engagment : 'Engagement'}</Text>
+                            <Text theme='description'>Follow the steps below to create your engagement</Text>
+                        </View>
+                        <Button
+                            title='X'
+                            float
+                            title_color={Colors.text.error}
+                            onPress={() => onClose()}
+                        />
+                    </View>
+                )
+            case 'step':
+                return (
+                    <View style={{ padding:20 }}>
+                        <Text theme='h1' size={38}>{active_step.title}</Text>
+                        <Text theme='description' color={errors.length > 0 ? Colors.text.warning :Colors.text.success} size={16} style={{ marginTop:10 }}>{active_step.description}</Text>
+                    </View>
+                )
+            case 'info':
+                switch(active_step.step_key){
+                    case 'intro':
+                        return <IntroInfo />
+                    case 'options':
+                        return (
+                            <View style={{ padding:10 }}>
+                                <EngagementOptions active_engagement={active_engagment} onSelectEngagement={(e) => {
+                                    if(e == active_engagment){ return setState({ ...state, active_engagment: undefined }) }
+                                    return setState({ ...state, active_engagment: e })
+                                }}
+                                />
+                            </View>
+                        )
+                    default: return <></>
+                }
+            case 'success':
+                if(active_step.step_key != 'success'){ return <></> }
+                return (
+                    <View>
+                        <Image
+                            source={{ uri: draft_image?.url }}
+                            style={{ width: size.width, height: size.width }}
+                            resizeMode='contain'
+                        />
+                    </View>
+                )
+            case 'image':
+                if(active_step.step_key != 'image'){ return <></> }
+                return (
+                    <View style={{ justifyContent:'center', alignItems:'center' }}>
+                        <ImageUploader 
+                            public_id={`${(Math.random() * 10000000).toFixed()}_${active_engagment}_pic`}
+                            onFinishUpload={(obj) => setDraftImage({ ...obj, url: obj.secure_url })}
+                            >
+                            {draft_image ?
+                            <Image
+                                source={{ uri: draft_image.url }}
+                                style={{ width: size.width, height: size.width }}
+                                resizeMode='cover'
+                            />
+                            :
+                            <Icons.ImageIcon size={150} color={Colors.text.h1} />
+                            }
+                            <Text textAlign='center' style={{ marginTop:15 }} theme='h1' color={Colors.text.action}>{draft_image ? 'CHANGE IMAGE' : "ADD AN IMAGE"}</Text>
+                        </ImageUploader>
+                    </View>
+                )
+            case 'groups':
+                if(active_step.step_key != 'group'){ return <></> }
+                return (
+                    <GroupSelector
+                        groups={groups}
+                        active_group={active_group}
+                        onSelectGroup={(g) => setState({ ...state, active_group: g })}
+                    />
+                )
+            case 'companies':
+                if(active_step.step_key != 'company'){ return <></> }
+                return (
+                    <CompanySelector 
+                        companies={companies}
+                        active_company={active_company}
+                        onSelectCompany={(c) => setState({ ...state, active_company: c })}
+                    />
+                )
+            case 'create':
+                if(active_step.step_key != 'create'){ return <></> }
+                switch(active_engagment){
+                    case 'competition':
+                        return <CreateCompetition onUpdateDraft={(d) => setDraftCompetition(d)} onFocusPosition={onFocusPostiion} />
+                    case 'squares':
+                        return <CreateSquares onUpdateDraft={(d) => setDraftSquares(d)} onFocusPosition={onFocusPostiion}/>
+                    default: return <></>
+                }
+            default: return <></>
+        }
+    }
+
+    return (
+        <View float={float} style={{flex:1}} onLayout={(ev) => {
+            const { height, width } = ev.nativeEvent.layout;
+            setSize({ height, width });
+        }}>
+            <View style={{ flex:1 }}>
+                <FlatList
+                    data={sections}
+                    key={'create_engagement_list'}
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
+                />
+            </View>
+            {active_step.step_key == 'intro' ?
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, ...footer_style }}>
+                <Button
+                    style={{ flex:1 }}
+                    title='GET STARTED'
+                    type='success'
+                    onPress={() => handleNextStep()}
+                />
+            </View>
+            : active_step.step_key == 'success' ?
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, ...footer_style }}>
+                <Button
+                    style={{ flex:1 }}
+                    title='GO TO YOUR ENGAGEMENT'
+                    type='success'
+                    onPress={() => handleNextStep()}
+                />
+            </View>
+            :
+             <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <Button float style={{ height:50, width:50, padding:0, justifyContent:'center', alignItems:'center', borderRadius:100 }}
+                    onPress={() => {
+                        let prev_step = steps.find(s => s.num == active_step.num - 1)
+                        if(prev_step?.step_key == 'group' && groups.length == 0){
+                            prev_step = steps.find(s => s.step_key == 'options')
+                        }
+                        if(prev_step?.step_key == 'company' && companies.length == 0){
+                            prev_step = steps.find(s => s.step_key == 'options')
+                        }
+                        if(!prev_step){ return alert('Unable to do it') }
+                        setActiveStep(prev_step)
+                    }}
+                >
+                    <Icons.ChevronIcon direction='left' size={14} color={Colors.text.h1} />
+                </Button>
+                <View style={{ flex:1 }} />
+                <Button 
+                    float
+                    disabled={pending_engagement.create_loading ? true : false}
+                    loading={pending_engagement.create_loading}
+                    style={{ padding: active_step.step_key == 'create' ? 10 : 0, height:active_step.step_key == 'create' ? undefined : 50, width:active_step.step_key == 'create' ? undefined : 50, justifyContent:'center', alignItems:'center', borderRadius:100, opacity: errors.length == 0 && !pending_engagement.create_loading ? 1:0.5 }}
+                    onPress={() => handleNextStep()}>
+                    {active_step.step_key == 'create' ?
+                    <Text theme='h1' color={errors.length > 0 ? Colors.text.warning : Colors.text.success}>CREATE</Text>
+                    :
+                    <Icons.ChevronIcon direction='right' size={14} color={errors.length == 0 ? Colors.text.success : Colors.text.h1} />
+                    }
+                </Button>
+            </View>
+            }
+        </View>
+    )
+}
+
+export default CreateEngagement
+
+
+const IntroInfo = () => {
+    return (
+        <View style={{ padding:20 }}>
+            <Text theme='h1'>🎮 Make It Yours – Create custom pick-ems, competitions, or games in just a few steps</Text>
+            <Text theme='h1' style={{ marginTop:20 }}>👥 Play With Friends – Invite your group or the whole BettorEdge community</Text>
+            <Text theme='h1' style={{ marginTop:20 }}>📊 Track & Compete – See results, leaderboards, and bragging rights update in real time</Text>
+        </View>
+    )
+}
+
+type EngagementOptionProps = {
+    active_engagement?: 'competition'|'squares'|'flash'|'bracket',
+    onSelectEngagement: (engagement:'competition'|'squares'|'flash'|'bracket') => void
+}
+const EngagementOptions = ({active_engagement, onSelectEngagement}:EngagementOptionProps) => {
+    const Colors = useColors();
+    return (
+        <View>
+            <Button
+                key='competition'
+                float
+                style={{ padding:10, margin:10, flexDirection:'row', alignItems:'center', borderColor:active_engagement == 'competition' ? Colors.text.success: Colors.borders.light }}
+                onPress={() => onSelectEngagement('competition')}
+            >
+                <Icons.PickEmIcon size={50} color={active_engagement == 'competition' ? Colors.text.success :Colors.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1' color={active_engagement == 'competition' ? Colors.text.success : Colors.text.h1}>BettorEdge Competition</Text>
+                    <Text theme='description' color={active_engagement == 'competition' ? Colors.text.success : Colors.text.h1} style={{ marginTop:4 }}>Create a pick-em or wager based competition.  Players will pick or wager multiple outcomes.  Get more right and climb the leaderboard for large payouts</Text>
+                </View>
+            </Button>
+            <Button
+                key='squares'
+                float
+                style={{ padding:10, margin:10, flexDirection:'row', alignItems:'center', borderColor:active_engagement == 'squares' ? Colors.text.success: Colors.borders.light }}
+                onPress={() => onSelectEngagement('squares')}
+            >
+                <Icons.SquaresIcon size={50} color={active_engagement == 'squares' ? Colors.text.success :Colors.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1' color={active_engagement == 'squares' ? Colors.text.success : Colors.text.h1}>Auction Squares</Text>
+                    <Text theme='description' color={active_engagement == 'squares' ? Colors.text.success : Colors.text.h1} style={{ marginTop:4 }}>Create an auction squares game.  Bid on squares until the auction ends.  Buy and sell squares throughout the game.</Text>
+                </View>
+            </Button>
+            <Button
+                key='bracket'
+                float
+                style={{ padding:10, margin:10, flexDirection:'row', alignItems:'center', borderColor:active_engagement == 'bracket' ? Colors.text.success: Colors.borders.light }}
+                onPress={() => onSelectEngagement('bracket')}
+            >
+                <Icons.BracketIcon size={50} color={active_engagement == 'bracket' ? Colors.text.success :Colors.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1' color={active_engagement == 'bracket' ? Colors.text.success : Colors.text.h1}>Bracket Challenge</Text>
+                    <Text theme='description' color={active_engagement == 'bracket' ? Colors.text.success : Colors.text.h1} style={{ marginTop:4 }}>Create a bracket.  Make picks until the championship. Pick more correctly and win!</Text>
+                </View>
+            </Button>
+            <Button
+                key='flash'
+                float
+                style={{ padding:10, margin:10, flexDirection:'row', alignItems:'center', borderColor:active_engagement == 'flash' ? Colors.text.success: Colors.borders.light }}
+                onPress={() => onSelectEngagement('flash')}
+            >
+                <Icons.FlameIcon size={50} color={active_engagement == 'flash' ? Colors.text.success :Colors.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1' color={active_engagement == 'flash' ? Colors.text.success : Colors.text.h1}>Custom Market</Text>
+                    <Text theme='description' color={active_engagement == 'flash' ? Colors.text.success : Colors.text.h1} style={{ marginTop:4 }}>Create a custom flash market.  Players bet on the perimutuel outcomes, get it right and get paid!</Text>
+                </View>
+            </Button>
+        </View>
+    )
+}
+
+type GroupSelectorProps = {
+    active_group?:GroupProps,
+    groups:GroupProps[],
+    onSelectGroup:(group?:GroupProps) => void
+}
+const GroupSelector = ({ active_group, groups, onSelectGroup }:GroupSelectorProps) => {
+    const Colors = useColors();
+    const [ visible, setVisible ] = useState(false);
+
+    const renderGroups = (data:{ item:GroupProps, index:number }) => {
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => { setVisible(false); onSelectGroup(data.item) }}
+            >
+                <Image
+                    source={{ uri: data.item.group_image?.url }}
+                    style={{ height:40, width:40 }}
+                    resizeMode='cover'
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.name}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.description}</Text>
+                </View>
+            </Button>
+        )
+    }
+
+    return (
+        <Button style={{ margin:20 }} float onPress={() => { setVisible(!visible); onSelectGroup(undefined)}}>
+            <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                <Text style={{ flex:1, marginRight:10 }} theme='h1'>{active_group?.name ?? 'No Group'}</Text>
+                <Icons.ChevronIcon direction={visible?'up':'down'} color={Colors.text.h1} size={8} />
+            </View>
+            {visible ?
+            <View transparent style={{ marginTop:20 }}>
+            <FlatList
+                data={groups}
+                key={'group_selector'}
+                keyExtractor={item => item.group_id.toString()}
+                renderItem={renderGroups}
+            />
+            </View>
+            :<></>}
+        </Button>
+    )
+}
+
+
+
+
+
+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 style={{ margin:20 }} 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>
+    )
+}
+
+
+type SCProps = {
+    onFocusPosition?:(pos:FocusPositionProps) => void,
+    onUpdateDraft:(draft_sq_comp:SquaresCompetitionProps) => void
+}
+
+const CreateSquares = ({onFocusPosition, onUpdateDraft}:SCProps) => {
+    const Colors = useColors();
+    const [ draft, setDraft ] = useState<SquaresCompetitionProps>(CreateEngagementHelpers.generateSquaresComp());
+    const [ sq_data, setSQData ] = useState<{
+        leagues:LeagueProps[],
+        leagues_visible:boolean,
+        active_league?:LeagueProps,
+        league_schedule:boolean,
+        active_event?:EventProps,
+    }>({
+        leagues:[],
+        leagues_visible:false,
+        league_schedule: false
+    });
+    const { leagues, leagues_visible, league_schedule, active_league, active_event } = sq_data;
+
+    useEffect(() => {
+        getData()
+    },[]);
+
+    const getData = async() => {
+        const lgs = await CreateEngagementApi.getLeagues();
+        setSQData({ ...sq_data, leagues: lgs.filter(l => l.sport.toLowerCase() == 'football') });
+    }
+
+    useEffect(() => {
+        onUpdateDraft(draft);
+    },[JSON.stringify(draft)])
+
+    const renderLeagues = (data:{item:LeagueProps, index:number}) => {
+        const selected = active_league?.league_id == data.item.league_id ? true : false
+       
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', borderRadius:0, padding:10, alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => setSQData({ ...sq_data, active_league: selected?undefined : data.item, leagues_visible:false, league_schedule: selected?false:true })}
+            >
+                <Image
+                    source={{ uri: data.item.league_image }}
+                    style={{ height:30, width:30 }}
+                    resizeMode='contain'
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.league_name}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.sport}</Text>
+                </View>
+            </Button>
+        )
+    }
+
+    return (
+        <View>
+            <View style={{ padding:10 }}>
+                <Text theme='h1' style={{ marginBottom:10 }}>Competition Name</Text>
+                <TextInput
+                    placeholder='Add Name here...'
+                    value={draft.sq_comp_name}
+                    onFocusPosition={onFocusPosition}
+                    style={{ borderColor:draft.sq_comp_name ? Colors.text.success : Colors.text.warning }}
+                    onChangeText={(text) => setDraft({ ...draft, sq_comp_name: text })}
+                />
+            </View>
+            <View style={{ padding:10 }}>
+                <Text theme='h1' style={{ marginBottom:10 }}>Competition Description</Text>
+                <TextInput
+                    placeholder='Add Decription here...'
+                    onFocusPosition={onFocusPosition}
+                    value={draft.sq_comp_description}
+                    style={{ borderColor:draft.sq_comp_description ? Colors.text.success : Colors.text.warning }}
+                    onChangeText={(text) => setDraft({ ...draft, sq_comp_description: text })}
+                />
+            </View>
+            <View style={{ padding:10 }}>
+                <Text theme='h1' style={{ marginBottom:10 }}>Squares Event</Text>
+                <Button float style={{ borderColor:active_league?Colors.text.success:Colors.text.warning }} onPress={() => setSQData({ ...sq_data, leagues_visible: !leagues_visible })}>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1, marginRight:10 }} theme='h1'>{active_league?.league_name ?? 'Select League'}</Text>
+                        <Icons.ChevronIcon direction={leagues_visible?'up':'down'} color={Colors.text.h1} size={8} />
+                    </View>
+                    {leagues_visible ?
+                    <View transparent style={{ marginTop:20 }}>
+                    <FlatList
+                        data={leagues.sort((a,b) => a.priority - b.priority)}
+                        key={'competition_reult_types'}
+                        keyExtractor={item => item.league_id.toString()}
+                        renderItem={renderLeagues}
+                    />
+                    </View>
+                    :<></>}
+                </Button>
+            </View>
+            <View float style={{ margin:10 }}>
+                {active_league && league_schedule ?
+                <LeagueSchedule
+                    onSelectEvent={(e) => {
+                        setSQData({ ...sq_data, active_event: e, league_schedule:false });
+                        setDraft({ ...draft, sport: active_league?.league_name, begin_datetime: moment(e.scheduled_datetime).add(4, 'minutes'), event_id: e.event_id })
+                    }}
+                    league={active_league}
+                    active_event={active_event?.event_id}
+                />
+                : active_event ?
+                <Button style={{ borderColor:active_event?Colors.text.success:Colors.text.warning }} float onPress={() => setSQData({ ...sq_data, league_schedule: true })}>
+                    <Text theme='h1'>{active_event.event_title}</Text>
+                </Button>
+                :<></>}
+            </View>
+        </View>
+    )
+}
+
+type CCProps = {
+    onFocusPosition?:(pos:FocusPositionProps) => void,
+    onUpdateDraft:(draft: {
+        loading:boolean,
+        types_visible:boolean,
+        results_visible: boolean,
+        competition_name:string,
+        competition_type?:CompetitionTypeProps,
+        competition_result_type?:CompetitionResultTypeProps,
+        competition_description:string,
+        competition_types:CompetitionTypeProps[],
+        competition_payout_types:CompetitionPayoutTypeProps[],
+        competition_result_types:CompetitionResultTypeProps[]
+    }) => void
+}
+
+const CreateCompetition = ({ onFocusPosition, onUpdateDraft }:CCProps) => {
+    const Colors = useColors();
+    const [ templates, setTemplates ] = useState<CompetitionProps[]>([]);
+    const [ draft, setDraft ] = useState<{
+        loading:boolean,
+        templates_visible:boolean,
+        types_visible:boolean,
+        results_visible: boolean,
+        pacer_id?:string,
+        competition_template_id?:string,
+        competition_name:string,
+        competition_type?:CompetitionTypeProps,
+        competition_result_type?:CompetitionResultTypeProps,
+        competition_description:string,
+        competition_types:CompetitionTypeProps[],
+        competition_payout_types:CompetitionPayoutTypeProps[],
+        competition_result_types:CompetitionResultTypeProps[]
+    }>({
+        loading: false, templates_visible:false, types_visible:false, results_visible: false, competition_description:'', competition_name:'', competition_payout_types:[], competition_result_types:[], competition_types:[]
+    });
+    const { competition_name, competition_template_id, templates_visible, competition_description,competition_result_types, types_visible, competition_types, results_visible, competition_type, competition_result_type } = draft;
+    const template = templates.find(t => t.competition_id == competition_template_id)
+    useEffect(() => {
+        getData();
+    },[]);
+
+    useEffect(() => {
+        onUpdateDraft(draft)
+    },[JSON.stringify(draft)])
+
+    const getData = async() => {
+        setDraft({ ...draft, loading:true });
+        CreateEngagementApi.setEnvironment();
+        let options = await CreateEngagementApi.getCompetitionOptions();
+        let temps = await CreateEngagementApi.getTemplateCompetitions();
+        setDraft({
+            ...draft,
+            loading: false,
+            competition_result_types: options.competition_result_types,
+            competition_types: options.competition_types,
+            competition_payout_types:options.competition_payout_types,
+        });
+        setTemplates(temps)
+    }
+
+    const renderCompetitionTypes = (data:{item:CompetitionTypeProps, index:number}) => {
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', borderRadius:0, padding:10, alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => setDraft({ ...draft, competition_type: data.item, types_visible: false })}
+            >
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>{data.item.type_label}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.description}</Text>
+                </View>
+            </Button>
+        )
+    }
+
+    const renderTemplates = (data:{item:CompetitionProps, index:number}) => {
+        const selected = competition_template_id == data.item.competition_id ? true : false
+        const comp_type = competition_types.find(ct => ct.competition_type_id == data.item.competition_type_id)
+        const comp_result = competition_result_types.find(crt => crt.competition_result_type_id == data.item.competition_result_type_id);
+        if(!comp_type || !comp_result){ return <></> }
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', borderRadius:0, padding:10, alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => setDraft({ ...draft, competition_template_id: selected ? undefined : data.item.competition_id, templates_visible: false, competition_type:selected?undefined:comp_type, competition_result_type:selected ? undefined: comp_result })}
+            >
+                <Image
+                    source={{ uri: data.item.image?.url }}
+                    style={{ height:30, width:30 }}
+                    resizeMode='contain'
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.competition_name}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.competition_description}</Text>
+                </View>
+            </Button>
+        )
+    }
+
+    const renderResultTypes = (data:{item:CompetitionResultTypeProps, index:number}) => {
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', borderRadius:0, padding:10, alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => setDraft({ ...draft, competition_result_type: data.item, results_visible: false })}
+            >
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>{data.item.label}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.description}</Text>
+                </View>
+            </Button>
+        )
+    }
+
+    return (
+        <View style={{ padding:10 }}>
+            <View style={{ padding:10 }}>
+                <Text theme='h1' style={{ marginBottom:10 }}>Competition Name</Text>
+                <TextInput
+                    placeholder='Add Name here...'
+                    value={competition_name}
+                    onFocusPosition={onFocusPosition}
+                    style={{ borderColor:competition_name ? Colors.text.success : Colors.text.warning }}
+                    onChangeText={(text) => setDraft({ ...draft, competition_name: text })}
+                />
+            </View>
+            <View style={{ padding:10 }}>
+                <Text theme='h1' style={{ marginBottom:10 }}>Competition Description</Text>
+                <TextInput
+                    placeholder='Add Decription here...'
+                    value={competition_description}
+                    onFocusPosition={onFocusPosition}
+                    style={{ borderColor:competition_description ? Colors.text.success : Colors.text.warning }}
+                    onChangeText={(text) => setDraft({ ...draft, competition_description: text })}
+                />
+            </View>
+            {templates.length > 0 ?
+            <View style={{ padding:10 }}>
+                <Text theme='h1' style={{ marginBottom:10 }}>Templates</Text>
+                <Button float onPress={() => setDraft({ ...draft, templates_visible: !templates_visible, competition_template_id:undefined })}>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1, marginRight:10 }} theme='h1'>{template?.competition_name ?? 'Select Template'}</Text>
+                        <Icons.ChevronIcon direction={templates_visible?'up':'down'} color={Colors.text.h1} size={8} />
+                    </View>
+                    {templates_visible ?
+                    <View transparent style={{ marginTop:20 }}>
+                    <FlatList
+                        data={templates.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
+                        key={'templates_list'}
+                        keyExtractor={item => item.competition_id.toString()}
+                        renderItem={renderTemplates}
+                    />
+                    </View>
+                    :<></>}
+                </Button>
+            </View>
+            :<></>}
+            <View style={{ padding:10 }}>
+                <Text theme='h1' style={{ marginBottom:10 }}>Competition Type</Text>
+                <Button float style={{ borderColor:competition_type ? Colors.text.success: Colors.text.warning }} onPress={() => setDraft({ ...draft, types_visible: !types_visible })}>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1, marginRight:10 }} theme='h1'>{competition_type?.type_label ?? 'Select Type'}</Text>
+                        <Icons.ChevronIcon direction={types_visible?'up':'down'} color={Colors.text.h1} size={8} />
+                    </View>
+                    {types_visible ?
+                    <View transparent style={{ marginTop:20 }}>
+                    <FlatList
+                        data={competition_types.sort((a,b) => a.type_label.localeCompare(b.type_label))}
+                        key={'competition_types'}
+                        keyExtractor={item => item.competition_type_id.toString()}
+                        renderItem={renderCompetitionTypes}
+                    />
+                    </View>
+                    :<></>}
+                </Button>
+            </View>
+            <View style={{ padding:10 }}>
+                <Text theme='h1' style={{ marginBottom:10 }}>Payout Type</Text>
+                <Button float style={{ borderColor:competition_result_type ? Colors.text.success: Colors.text.warning }} onPress={() => setDraft({ ...draft, results_visible: !results_visible })}>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                        <Text style={{ flex:1, marginRight:10 }} theme='h1'>{competition_result_type?.label ?? 'Select Payout'}</Text>
+                        <Icons.ChevronIcon direction={results_visible?'up':'down'} color={Colors.text.h1} size={8} />
+                    </View>
+                    {results_visible ?
+                    <View transparent style={{ marginTop:20 }}>
+                    <FlatList
+                        data={competition_result_types.sort((a,b) => a.label.localeCompare(b.label))}
+                        key={'competition_reult_types'}
+                        keyExtractor={item => item.competition_result_type_id.toString()}
+                        renderItem={renderResultTypes}
+                    />
+                    </View>
+                    :<></>}
+                </Button>
+            </View>
+        </View>
+    )
+}