be-components 7.3.0 → 7.3.2

package/lib/typescript/src/CreateEngagement/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { BracketCompetitionProps, CompetitionProps, FocusPositionProps, PollProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
+import type { BracketCompetitionProps, CompanyProps, CompetitionProps, FocusPositionProps, GroupProps, PollProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
 import { type ViewStyle } from 'react-native';
 type CreateEngagementProps = {
     player?: PublicPlayerProps;
@@ -11,12 +11,25 @@ type CreateEngagementProps = {
     header_style?: ViewStyle;
     flash_campaign_id?: string;
     footer_style?: ViewStyle;
+    bracket_id?: string;
     float?: boolean;
     onClose: () => void;
     init_engagement?: 'competition' | 'bracket' | 'squares' | 'flash';
     group_id?: string;
     company_id?: string;
 };
-declare const CreateEngagement: ({ float, player, flash_campaign_id, init_engagement, onFocusPostiion, group_id, company_id, header_style, footer_style, onClose, onCreateCompetition, onCreateBracketCompetition, onCreateSquaresCompetition, onCreateFlashMarket }: CreateEngagementProps) => React.JSX.Element;
+declare const CreateEngagement: ({ float, player, bracket_id, flash_campaign_id, init_engagement, onFocusPostiion, group_id, company_id, header_style, footer_style, onClose, onCreateCompetition, onCreateBracketCompetition, onCreateSquaresCompetition, onCreateFlashMarket }: CreateEngagementProps) => React.JSX.Element;
 export default CreateEngagement;
+type GroupSelectorProps = {
+    active_group?: GroupProps;
+    groups: GroupProps[];
+    onSelectGroup: (group?: GroupProps) => void;
+};
+export declare const GroupSelector: ({ active_group, groups, onSelectGroup }: GroupSelectorProps) => React.JSX.Element;
+type CompanySelectorProps = {
+    active_company?: CompanyProps;
+    companies: CompanyProps[];
+    onSelectCompany: (c?: CompanyProps) => void;
+};
+export declare const CompanySelector: ({ active_company, companies, onSelectCompany }: CompanySelectorProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/CreateEngagement/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/CreateEngagement/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,uBAAuB,EAA4C,gBAAgB,EAA2F,kBAAkB,EAA8C,SAAS,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AACpU,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQ/D,KAAK,qBAAqB,GAAG;IACzB,MAAM,CAAC,EAAC,iBAAiB,CAAC;IAC1B,eAAe,CAAC,EAAC,CAAC,GAAG,EAAC,kBAAkB,KAAK,IAAI,CAAC;IAClD,mBAAmB,EAAC,CAAC,WAAW,EAAC,gBAAgB,KAAK,IAAI,CAAC;IAC3D,0BAA0B,EAAC,CAAC,EAAE,EAAC,uBAAuB,KAAK,IAAI,CAAC;IAChE,0BAA0B,EAAC,CAAC,EAAE,EAAC,uBAAuB,KAAK,IAAI,CAAC;IAChE,mBAAmB,EAAC,CAAC,EAAE,EAAC,SAAS,KAAK,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAC,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAC,OAAO,CAAC;IACf,OAAO,EAAC,MAAM,IAAI,CAAC;IACnB,eAAe,CAAC,EAAC,aAAa,GAAC,SAAS,GAAC,SAAS,GAAC,OAAO,CAAA;IAC1D,QAAQ,CAAC,EAAC,MAAM,CAAC;IACjB,UAAU,CAAC,EAAC,MAAM,CAAA;CACrB,CAAA;AAcD,QAAA,MAAM,gBAAgB,GAAI,qOAAmO,qBAAqB,sBAmWjR,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/CreateEngagement/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,uBAAuB,EAAoD,YAAY,EAA8B,gBAAgB,EAA2F,kBAAkB,EAAE,UAAU,EAAkC,SAAS,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AACtX,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAS/D,KAAK,qBAAqB,GAAG;IACzB,MAAM,CAAC,EAAC,iBAAiB,CAAC;IAC1B,eAAe,CAAC,EAAC,CAAC,GAAG,EAAC,kBAAkB,KAAK,IAAI,CAAC;IAClD,mBAAmB,EAAC,CAAC,WAAW,EAAC,gBAAgB,KAAK,IAAI,CAAC;IAC3D,0BAA0B,EAAC,CAAC,EAAE,EAAC,uBAAuB,KAAK,IAAI,CAAC;IAChE,0BAA0B,EAAC,CAAC,EAAE,EAAC,uBAAuB,KAAK,IAAI,CAAC;IAChE,mBAAmB,EAAC,CAAC,EAAE,EAAC,SAAS,KAAK,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAC,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAC,MAAM,CAAC;IACnB,KAAK,CAAC,EAAC,OAAO,CAAC;IACf,OAAO,EAAC,MAAM,IAAI,CAAC;IACnB,eAAe,CAAC,EAAC,aAAa,GAAC,SAAS,GAAC,SAAS,GAAC,OAAO,CAAA;IAC1D,QAAQ,CAAC,EAAC,MAAM,CAAC;IACjB,UAAU,CAAC,EAAC,MAAM,CAAA;CACrB,CAAA;AAcD,QAAA,MAAM,gBAAgB,GAAI,iPAA+O,qBAAqB,sBAqX7R,CAAA;AAED,eAAe,gBAAgB,CAAA;AAqa/B,KAAK,kBAAkB,GAAG;IACtB,YAAY,CAAC,EAAC,UAAU,CAAC;IACzB,MAAM,EAAC,UAAU,EAAE,CAAC;IACpB,aAAa,EAAC,CAAC,KAAK,CAAC,EAAC,UAAU,KAAK,IAAI,CAAA;CAC5C,CAAA;AACD,eAAO,MAAM,aAAa,GAAI,yCAAwC,kBAAkB,sBA0CvF,CAAA;AAMD,KAAK,oBAAoB,GAAG;IACxB,cAAc,CAAC,EAAC,YAAY,CAAC;IAC7B,SAAS,EAAC,YAAY,EAAE,CAAC;IACzB,eAAe,EAAC,CAAC,CAAC,CAAC,EAAC,YAAY,KAAK,IAAI,CAAA;CAC5C,CAAA;AACD,eAAO,MAAM,eAAe,GAAI,gDAA+C,oBAAoB,sBA0ClG,CAAA"}

package/lib/typescript/src/FlashMarket/components/ManageFlashMarket.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ManageFlashMarket.d.ts","sourceRoot":"","sources":["../../../../../src/FlashMarket/components/ManageFlashMarket.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAsF,MAAM,aAAa,CAAC;AAWzJ,KAAK,sBAAsB,GAAG;IAC1B,OAAO,EAAC,MAAM,CAAC;IACf,MAAM,CAAC,EAAC,aAAa,CAAC;IACtB,KAAK,CAAC,EAAC,OAAO,CAAC;IACf,YAAY,CAAC,EAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAC,SAAS,CAAC;IACxB,OAAO,EAAC,MAAM,IAAI,CAAC;IACnB,eAAe,CAAC,EAAC,CAAC,GAAG,EAAC,kBAAkB,KAAK,IAAI,CAAA;CACpD,CAAA;AAGD,QAAA,MAAM,iBAAiB,GAAI,oEAAmE,sBAAsB,sBAquBnH,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"ManageFlashMarket.d.ts","sourceRoot":"","sources":["../../../../../src/FlashMarket/components/ManageFlashMarket.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAsF,MAAM,aAAa,CAAC;AAWzJ,KAAK,sBAAsB,GAAG;IAC1B,OAAO,EAAC,MAAM,CAAC;IACf,MAAM,CAAC,EAAC,aAAa,CAAC;IACtB,KAAK,CAAC,EAAC,OAAO,CAAC;IACf,YAAY,CAAC,EAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAC,SAAS,CAAC;IACxB,OAAO,EAAC,MAAM,IAAI,CAAC;IACnB,eAAe,CAAC,EAAC,CAAC,GAAG,EAAC,kBAAkB,KAAK,IAAI,CAAA;CACpD,CAAA;AAGD,QAAA,MAAM,iBAAiB,GAAI,oEAAmE,sBAAsB,sBAqyBnH,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "7.3.0",
+  "version": "7.3.2",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/Bracket/components/ManageBracketCompetitionForm.tsx

@@ -3,11 +3,13 @@ import { Button, Text, TextInput, View } from "../../Components/Themed"
 import { FlatList, Image, Platform } from 'react-native';
 import { Icons, Switch, Toggle } from '../../Components';
 import { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers } from '../api';
-import type { BracketCompetitionProps, BracketCompetitionScoringRuleProps, BracketProps, BracketRoundProps, CompetitionPlayerBracketProps, CompetitionResultTypeProps, LeagueProps } from '../../types';
+import type { BracketCompetitionProps, BracketCompetitionScoringRuleProps, CompanyProps, BracketProps, BracketRoundProps, CompetitionPlayerBracketProps, CompetitionResultTypeProps, LeagueProps, GroupProps } from '../../types';
 import { useColors } from '../../constants/useColors';
 import moment from 'moment-mini';
 import SearchBox from '../../Components/SearchBox';
 import ImageUploader from '../../Components/ImageUploader';
+import { CompanySelector, GroupSelector } from '../../CreateEngagement';
+import { CreateEngagementApi } from '../../CreateEngagement/api';
 
 const sections = ['header', 'share', 'toggle', 'select_bracket', 'info', 'scoring', 'settings'];
 
@@ -51,6 +53,8 @@ const ManageBracketCompetitionForm = ({ player_id, bracket_competition_id, onFai
         active_league?:LeagueProps,
         selected_bracket_rounds:BracketRoundProps[],
         leagues:LeagueProps[],
+        companies:CompanyProps[],
+        groups:GroupProps[],
         available_brackets:BracketProps[],
         draft_competition?:BracketCompetitionProps,
     }>({
@@ -58,9 +62,11 @@ const ManageBracketCompetitionForm = ({ player_id, bracket_competition_id, onFai
         available_brackets: [],
         competition_player_brackets:[],
         competition_result_types:[],
+        companies:[],
+        groups:[],
         selected_bracket_rounds:[]
     });
-    const { competition_result_types, bracket_competition, available_brackets, competition_player_brackets, active_league, selected_bracket_rounds, leagues, selected_bracket, draft_competition} = form_data;
+    const { competition_result_types, companies, groups, bracket_competition, available_brackets, competition_player_brackets, active_league, selected_bracket_rounds, leagues, selected_bracket, draft_competition} = form_data;
     const unique_league_ids = [ ...new Set(available_brackets.map(b => b.league_id)) ]
 
     let filtered_brackets = [...available_brackets]
@@ -74,9 +80,12 @@ const ManageBracketCompetitionForm = ({ player_id, bracket_competition_id, onFai
     const { info_valid, settings_valid, bracket_valid, scoring_valid } = BracketCompetitionHelpers.isBracketValid(bracket_scoring_rules, selected_bracket_rounds, competition_result_types, bracket_competition )
     const valid = info_valid && settings_valid && bracket_valid && scoring_valid ? true : false
     const can_delete = moment().isBefore(moment(bracket_competition?.scheduled_datetime)) && competition_player_brackets.length == 0 ? true : false
+    const active_company = companies.find(c => c.company_id == bracket_competition?.company_id);
+    const active_group = groups.find(g => g.group_id == bracket_competition?.group_id);
 
     useEffect(() => {
         BracketApi.setEnvironment();
+        CreateEngagementApi.setEnvironment();
         if(!bracket_competition_id){ return }
         getData(bracket_competition_id);
     },[bracket_competition_id])
@@ -98,6 +107,8 @@ const ManageBracketCompetitionForm = ({ player_id, bracket_competition_id, onFai
             bk_rounds = bracket_resp.bracket_rounds
         }
 
+        const s_companies = await CreateEngagementApi.getMyCompanies();
+        const s_groups = await CreateEngagementApi.getMyGroups(0);
         //Lets Check if we need to adjust scoring rules right away!
         let draft_rules = BracketCompetitionHelpers.checkRules(id, bk_rounds, bk_resp.bracket_competition_scoring_rules);
         if(JSON.stringify(draft_rules) != JSON.stringify(bk_resp.bracket_competition_scoring_rules)){
@@ -114,6 +125,8 @@ const ManageBracketCompetitionForm = ({ player_id, bracket_competition_id, onFai
             draft_competition: bk_resp.bracket_competition,
             competition_result_types: options.competition_result_types.filter(crt => crt.type != 'outpace'),
             leagues: lgs,
+            groups: s_groups.groups,
+            companies: s_companies.companies,
             competition_player_brackets: bk_resp.competition_player_brackets,
             available_brackets: bk_options.filter(bk => moment(bk.scheduled_datetime).isAfter(moment())),
             selected_bracket_rounds: bk_rounds,
@@ -544,6 +557,46 @@ const ManageBracketCompetitionForm = ({ player_id, bracket_competition_id, onFai
                                     })}
                                 />
                             </View>
+                            {groups.length > 0 ?
+                            <View style={{ padding:10 }}>
+                                <Text theme='h2' style={{ marginBottom:8 }}>Group</Text>
+                                <GroupSelector
+                                    groups={groups}
+                                    active_group={active_group}
+                                    onSelectGroup={async(g) => {
+                                        if(info_loading){ return }
+                                        setInfoLoading(true);
+                                        const new_bc = await BracketComeptitionApi.updateBracketCompetition({ ...draft_competition, group_id: g?.group_id });
+                                        setFormData({
+                                            ...form_data,
+                                            bracket_competition: new_bc,
+                                            draft_competition: new_bc
+                                        })
+                                        setInfoLoading(false);
+                                    }}
+                                />
+                            </View>
+                            :<></>}
+                            {companies.length > 0 ?
+                            <View style={{ padding:10 }}>
+                                <Text theme='h2' style={{ marginBottom:8 }}>Company</Text>
+                                <CompanySelector
+                                    companies={companies}
+                                    active_company={active_company}
+                                    onSelectCompany={async(c) => {
+                                        if(info_loading){ return }
+                                        setInfoLoading(true);
+                                        const new_bc = await BracketComeptitionApi.updateBracketCompetition({ ...draft_competition, company_id: c?.company_id });
+                                        setFormData({
+                                            ...form_data,
+                                            bracket_competition: new_bc,
+                                            draft_competition: new_bc
+                                        })
+                                        setInfoLoading(false);
+                                    }}
+                                />
+                            </View>
+                            :<></>}
                             <View type='row' style={{ padding:10 }}>
                                 <View transparent style={{ flex:1 }}>
                                     <Text theme='h2'>Start Time</Text>

package/src/CreateEngagement/api/index.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import type { CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, CreateEngagementStepProps, GroupPlayerProps, GroupProps, LeagueProps, PollCampaignProps, PollProps, SquaresCompetitionProps } from "../../types";
+import type { BracketCompetitionProps, BracketCompetitionScoringRuleProps, BracketGroupProps, BracketProps, BracketRoundProps, CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, CreateEngagementStepProps, GroupPlayerProps, GroupProps, LeagueProps, PollCampaignProps, PollProps, RoundEventProps, SquaresCompetitionProps } from "../../types";
 import { APIOverrides } from "../../ApiOverrides";
 import type { CompanyMemberProps } from "../../Authenticator/api/types";
 import moment from "moment-mini";
@@ -28,6 +28,22 @@ const CreateEngagementApi = {
             return []
         }
     },
+    getActiveBrackets: async():Promise<BracketProps[]> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/brackets/active`);
+            return resp.data.brackets   
+        } catch (e) {
+            return []
+        }
+    },
+    getBracketById: async(bracket_id:string):Promise<undefined | {bracket:BracketProps, bracket_rounds:BracketRoundProps[], round_events:RoundEventProps[], bracket_groups:BracketGroupProps[]}> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/brackets/bracket/${bracket_id}`);
+            return resp.data
+        } catch (e) {
+            return undefined
+        }
+    },
     getMyCompanies : async():Promise<{companies:CompanyProps[], company_members:CompanyMemberProps[]}> => {
         const resp = await axios.get(`${AUTH_SVC_API}/v1/companies/me`)
         const { companies, company_members } = resp.data
@@ -74,6 +90,7 @@ const CreateEngagementApi = {
             return undefined
         }
     },
+
     activateSquares: async(sq_comp_id:string) => {
         try {
             const resp = await axios.post(`${TP_SVC_API}/v1/squares/competition/activate`, { sq_comp_id });
@@ -89,6 +106,14 @@ const CreateEngagementApi = {
        } catch (e) {
             return undefined
        }
+    },
+    createBracketCompetition: async(bracket_competition:BracketCompetitionProps, bracket_competition_scoring_rules:BracketCompetitionScoringRuleProps[]):Promise<undefined|{bracket_competition:BracketCompetitionProps, bracket_competition_scoring_rules:BracketCompetitionScoringRuleProps[]}> => {
+        try {
+            const resp = await axios.post(`${TP_SVC_API}/v1/brackets/competition/create`, { bracket_competition, bracket_competition_scoring_rules });
+            return resp.data
+        } catch (e) {
+            return undefined
+        }
     },
      createPollCampaign: async(poll_campaign:PollCampaignProps):Promise<PollCampaignProps | undefined> => {
         try {
@@ -119,7 +144,7 @@ const CreateEngagementApi = {
 
 
 const CreateEngagementHelpers = {
-    isStepValid: (step:CreateEngagementStepProps, active_engagement?:string, draft_competition?:any, draft_squares?:SquaresCompetitionProps, draft_flash?:PollProps):string[] => {
+    isStepValid: (step:CreateEngagementStepProps, active_engagement?:string, draft_competition?:any, draft_squares?:SquaresCompetitionProps, draft_flash?:PollProps, draft_bracket?:BracketCompetitionProps):string[] => {
         let errors:string[] = []
         switch(step.step_key){
             case 'intro': return errors
@@ -146,6 +171,15 @@ const CreateEngagementHelpers = {
                         if(!draft_flash?.poll_question){ errors.push('Please add a poll question') }
                         if(!draft_flash?.poll_campaign_id){ errors.push('Please add to a compaign') }
                         break
+                    case 'bracket':
+                        if(!draft_bracket){ return ['Please complete the required steps'] }
+                        if(!draft_bracket.scheduled_datetime){ errors.push('Please select a valid bracket') }
+                        if(!draft_bracket.bracket_id){ errors.push('Please select a valid bracket') }
+                        if(!draft_bracket.competition_name){ errors.push('Please enter a valid competition name') }
+                        if(!draft_bracket.competition_description){ errors.push('Please enter a valid competition description') }
+                        if(!draft_bracket.competition_result_type_id){ errors.push('Please add a valid payout type') }
+                        if(moment().isAfter(moment(draft_bracket.scheduled_datetime))){ errors.push('The bracket selected has already started') }
+                        break
                     default: break
                 }
                 break
@@ -210,5 +244,29 @@ const CreateEngagementHelpers = {
             multi_responses_allowed: true,
             create_datetime: '', last_update_datetime:''
         }
+    },
+    generateBracketCompetition:():BracketCompetitionProps => {
+        return {
+            bracket_competition_id:'',
+            bracket_id: '',
+            max_brackets: 100,
+            max_brackets_per_player:1,
+            guaranteed_payout:0,
+            competition_code:'',
+            competition_name:'',
+            scoring_system:'progressive',
+            scheduled_datetime:'',
+            status:'pending',
+            buy_in: 0,
+            ticket_revenue:0,
+            tickets_sold:0,
+            competition_result_type_id: '',
+            admin_id:'',
+            market_type: 'FOR_MONEY',
+            invite_only: true,
+            create_datetime: '', last_update_datetime:'',
+            image: { url : '' },
+            competition_description: ''
+        }
     }
 }

package/src/CreateEngagement/index.tsx

@@ -1,6 +1,6 @@
 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, PollCampaignProps, PollProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
+import type { BracketCompetitionProps, BracketCompetitionScoringRuleProps, BracketProps, CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, CreateEngagementStepProps, EventProps, FocusPositionProps, GroupProps, LeagueProps, PollCampaignProps, PollProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
 import { FlatList, Image, type ViewStyle } from 'react-native';
 import { CreateEngagementApi, CreateEngagementHelpers } from './api';
 import { Icons } from '../Components';
@@ -8,6 +8,7 @@ import { useColors } from '../constants/useColors';
 import ImageUploader from '../Components/ImageUploader';
 import moment from 'moment-mini';
 import LeagueSchedule from '../MarketComponents/components/LeagueSchedule';
+import { BracketCompetitionHelpers } from '../Bracket/api';
 
 type CreateEngagementProps = {
     player?:PublicPlayerProps,
@@ -19,6 +20,7 @@ type CreateEngagementProps = {
     header_style?:ViewStyle,
     flash_campaign_id?:string,
     footer_style?:ViewStyle,
+    bracket_id?:string,
     float?:boolean,
     onClose:() => void,
     init_engagement?:'competition'|'bracket'|'squares'|'flash'
@@ -38,10 +40,11 @@ const steps:CreateEngagementStepProps[] = [
     { 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, flash_campaign_id, init_engagement, onFocusPostiion, group_id, company_id, header_style, footer_style, onClose, onCreateCompetition, onCreateBracketCompetition, onCreateSquaresCompetition, onCreateFlashMarket}:CreateEngagementProps) => {
+const CreateEngagement = ({ float, player, bracket_id, flash_campaign_id, 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 [ draft_bracket_competition, setDraftBracketCompetition ] = useState<BracketCompetitionProps | undefined>(undefined);
     const [ pending_engagement, setPendingEngagement ] = useState<{
         create_loading:boolean,
         competition?:CompetitionProps,
@@ -105,7 +108,7 @@ const CreateEngagement = ({ float, player, flash_campaign_id, init_engagement, o
             loading:false
         })
     }
-    const errors = CreateEngagementHelpers.isStepValid(active_step, active_engagment, draft_competition, draft_squares, draft_flash);
+    const errors = CreateEngagementHelpers.isStepValid(active_step, active_engagment, draft_competition, draft_squares, draft_flash, draft_bracket_competition);
 
     const handleNextStep = async() => {
         if(errors.length > 0){ return alert(errors.map(e => e)) }
@@ -174,6 +177,17 @@ const CreateEngagement = ({ float, player, flash_campaign_id, init_engagement, o
                         if(!new_flash_market){ return alert('Unable to process') }
                         setPendingEngagement({ ...pending_engagement, create_loading: false, poll: new_flash_market });
                         break
+                    case 'bracket':
+                        if(!draft_bracket_competition){ return alert('Unable to process') }
+                        if(errors.length > 0){ return alert(errors.map(e => e)) }
+                        setPendingEngagement({ ...pending_engagement, create_loading: true });
+                        const bracket_resp = await CreateEngagementApi.getBracketById(draft_bracket_competition.bracket_id);
+                        if(!bracket_resp){ return alert('Unable to process.  Please try again later') }
+                        const scoring = BracketCompetitionHelpers.getDefaultScoringRules('', bracket_resp.bracket_rounds);
+                        const comp_response = await CreateEngagementApi.createBracketCompetition({ ...draft_bracket_competition, image: draft_image, company_id: active_company?.company_id, group_id: active_group?.group_id }, scoring);
+                        if(!comp_response){ return alert('Unable to process') }
+                        setPendingEngagement({ ...pending_engagement, create_loading: false, bracket_competition:comp_response.bracket_competition });
+                        break
                     default: return //We cdont have one!
                 }
                 if(next_step){ setActiveStep(next_step)}
@@ -297,20 +311,24 @@ const CreateEngagement = ({ float, player, flash_campaign_id, init_engagement, o
             case 'groups':
                 if(active_step.step_key != 'group'){ return <></> }
                 return (
+                    <View transparent style={{ margin:20 }}>
                     <GroupSelector
                         groups={groups}
                         active_group={active_group}
                         onSelectGroup={(g) => setState({ ...state, active_group: g })}
                     />
+                    </View>
                 )
             case 'companies':
                 if(active_step.step_key != 'company'){ return <></> }
                 return (
+                    <View transparent style={{ margin:20 }}>
                     <CompanySelector 
                         companies={companies}
                         active_company={active_company}
                         onSelectCompany={(c) => setState({ ...state, active_company: c })}
                     />
+                    </View>
                 )
             case 'create':
                 if(active_step.step_key != 'create'){ return <></> }
@@ -322,6 +340,8 @@ const CreateEngagement = ({ float, player, flash_campaign_id, init_engagement, o
                         return <CreateSquares onUpdateDraft={(d) => setDraftSquares(d)} onFocusPosition={onFocusPostiion}/>
                     case 'flash':
                         return <CreateFlashMarket group={active_group} flash_campaign_id={flash_campaign_id} onUpdateDraft={(d) => setDraftFlash(d)} onFocusPosition={onFocusPostiion} company={active_company}/>
+                    case 'bracket':
+                        return <CreateBracketCompetition group={active_group} bracket_id={bracket_id} onUpdateDraft={(d) => setDraftBracketCompetition(d)} onFocusPosition={onFocusPostiion} company={active_company}/>
                     default: return <></>
                 }
             default: return <></>
@@ -407,6 +427,130 @@ const IntroInfo = () => {
         </View>
     )
 }
+type CreateBracketCompetitionProps = {
+    company?:CompanyProps,
+    group?:GroupProps,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
+    onUpdateDraft: (poll:BracketCompetitionProps) => void,
+    bracket_id?:string
+}
+const CreateBracketCompetition = ({ bracket_id, company, group, onFocusPosition, onUpdateDraft }:CreateBracketCompetitionProps) => {
+    const Colors = useColors();
+    const [ create_state, setCreateState ] = useState<{
+        brackets:BracketProps[],
+        leagues:LeagueProps[],
+        loading:boolean,
+        results_visible:boolean,
+        competition_result_types:CompetitionResultTypeProps[],
+        draft_bracket_competition:BracketCompetitionProps,
+        scoring:BracketCompetitionScoringRuleProps[]
+    }>({
+        brackets:[],
+        leagues: [],
+        results_visible: false,
+        competition_result_types:[],
+        scoring:[],
+        loading: false,
+        draft_bracket_competition: { ...CreateEngagementHelpers.generateBracketCompetition(), bracket_id:bracket_id??'', group_id:group?.group_id, company_id:company?.company_id }
+    });
+    const { brackets, leagues, results_visible, draft_bracket_competition, competition_result_types } = create_state;
+    const active_bracket = brackets.find(b => b.bracket_id == draft_bracket_competition.bracket_id);
+    const competition_result_type = competition_result_types.find(rt => rt.competition_result_type_id == draft_bracket_competition.competition_result_type_id);
+    
+    useEffect(() => {
+        getData()
+    },[]);
+
+    useEffect(() => {
+        onUpdateDraft(draft_bracket_competition);
+    },[JSON.stringify(draft_bracket_competition)]);
+
+
+    const getData = async() => {
+        setCreateState({ ...create_state, loading: true });
+        const s_leagues = await CreateEngagementApi.getLeagues();
+        const s_brackets = await CreateEngagementApi.getActiveBrackets();
+        let options = await CreateEngagementApi.getCompetitionOptions();
+        setCreateState({
+            ...create_state,
+            brackets: s_brackets,
+            competition_result_types: options.competition_result_types,
+            leagues: s_leagues,
+            loading:false
+        })
+    }
+
+    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={() => setCreateState({ ...create_state, results_visible: false, draft_bracket_competition: { ...draft_bracket_competition, competition_result_type_id: data.item.competition_result_type_id } })}
+            >
+                <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>
+            <View style={{ padding:10 }}>
+                <Text theme='h1' style={{ marginBottom:10 }}>Competition Name</Text>
+                <TextInput
+                    placeholder='Add Name here...'
+                    value={draft_bracket_competition.competition_name}
+                    onFocusPosition={onFocusPosition}
+                    style={{ borderColor:draft_bracket_competition.competition_name ? Colors.text.success : Colors.text.warning }}
+                    onChangeText={(text) => setCreateState({ ...create_state, draft_bracket_competition: { ...draft_bracket_competition, competition_name: text } })}
+                />
+            </View>
+            <View style={{ padding:10 }}>
+                <Text theme='h1' style={{ marginBottom:10 }}>Competition Description</Text>
+                <TextInput
+                    placeholder='Add Description here...'
+                    value={draft_bracket_competition.competition_description}
+                    onFocusPosition={onFocusPosition}
+                    style={{ borderColor:draft_bracket_competition.competition_description ? Colors.text.success : Colors.text.warning }}
+                    onChangeText={(text) => setCreateState({ ...create_state, draft_bracket_competition: { ...draft_bracket_competition, competition_description: text } })}
+                />
+            </View>
+            <View style={{ padding:10 }}>
+                <Text theme='h1' style={{ marginBottom:10 }}>Select a Bracket</Text>
+                <BracketSelector
+                    leagues={leagues}
+                    brackets={brackets.filter(b => moment().isBefore(moment(b.scheduled_datetime)))}
+                    active_bracket={active_bracket}
+                    onSelectBracket={(bracket) => {
+                        setCreateState({ ...create_state, draft_bracket_competition: { ...draft_bracket_competition, bracket_id: bracket?.bracket_id ?? '', scheduled_datetime: bracket?.scheduled_datetime } })
+                    }}
+                />
+            </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={() => setCreateState({ ...create_state, 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>
+    )
+
+}
 
 type CreateFlashMarketProps = {
     company?:CompanyProps,
@@ -606,7 +750,6 @@ const EngagementOptions = ({active_engagement, companies, onSelectEngagement}:En
                     <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>
-            {false ?
             <Button
                 key='bracket'
                 float
@@ -619,7 +762,6 @@ const EngagementOptions = ({active_engagement, companies, onSelectEngagement}:En
                     <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>
-            :<></>}
             {companies.length > 0 ?
             <Button
                 key='flash'
@@ -638,12 +780,68 @@ const EngagementOptions = ({active_engagement, companies, onSelectEngagement}:En
     )
 }
 
+
+
+type BracketSelectorProps = {
+    active_bracket?:BracketProps,
+    brackets:BracketProps[],
+    leagues:LeagueProps[],
+    onSelectBracket:(bracket?:BracketProps) => void
+}
+const BracketSelector = ({ active_bracket, brackets, leagues, onSelectBracket }:BracketSelectorProps) => {
+    const Colors = useColors();
+    const [ visible, setVisible ] = useState(false);
+
+    const renderBrackets = (data:{ item:BracketProps, index:number }) => {
+        const league = leagues.find(l => l.league_id == data.item.league_id);
+        if(!league){ return <></> }
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => { setVisible(false); onSelectBracket(data.item) }}
+            >
+                <Image
+                    source={{ uri: league.league_image }}
+                    style={{ height:40, width:40 }}
+                    resizeMode='cover'
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{data.item.bracket_name}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>Begins {moment(data.item.scheduled_datetime).format('MMM DD hh:mm a')}</Text>
+                </View>
+            </Button>
+        )
+    }
+
+    return (
+        <Button float style={{ borderColor:active_bracket ? Colors.text.success : Colors.text.warning }} onPress={() => { setVisible(!visible); onSelectBracket(undefined)}}>
+            <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                <Text style={{ flex:1, marginRight:10 }} theme='h1'>{active_bracket?.bracket_name ?? 'No Bracket'}</Text>
+                <Icons.ChevronIcon direction={visible?'up':'down'} color={Colors.text.h1} size={8} />
+            </View>
+            {visible ?
+            <View transparent style={{ marginTop:20 }}>
+            <FlatList
+                data={brackets.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
+                key={'bracket_selector'}
+                keyExtractor={item => item.bracket_id.toString()}
+                renderItem={renderBrackets}
+            />
+            </View>
+            :<></>}
+        </Button>
+    )
+}
+
+
+
 type GroupSelectorProps = {
     active_group?:GroupProps,
     groups:GroupProps[],
     onSelectGroup:(group?:GroupProps) => void
 }
-const GroupSelector = ({ active_group, groups, onSelectGroup }:GroupSelectorProps) => {
+export const GroupSelector = ({ active_group, groups, onSelectGroup }:GroupSelectorProps) => {
     const Colors = useColors();
     const [ visible, setVisible ] = useState(false);
 
@@ -668,7 +866,7 @@ const GroupSelector = ({ active_group, groups, onSelectGroup }:GroupSelectorProp
     }
 
     return (
-        <Button style={{ margin:20 }} float onPress={() => { setVisible(!visible); onSelectGroup(undefined)}}>
+        <Button 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} />
@@ -696,7 +894,7 @@ type CompanySelectorProps = {
     companies:CompanyProps[],
     onSelectCompany:(c?:CompanyProps) => void
 }
-const CompanySelector = ({ active_company, companies, onSelectCompany }:CompanySelectorProps) => {
+export const CompanySelector = ({ active_company, companies, onSelectCompany }:CompanySelectorProps) => {
     const Colors = useColors();
     const [ visible, setVisible ] = useState(false);
 
@@ -721,7 +919,7 @@ const CompanySelector = ({ active_company, companies, onSelectCompany }:CompanyS
     }
 
     return (
-        <Button style={{ margin:20 }} float onPress={() => { setVisible(!visible); onSelectCompany(undefined) }}>
+        <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} />