be-components 6.7.8 → 6.8.0

package/lib/module/CreateEngagement/index.js

@@ -0,0 +1,1392 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from "../Components/Themed";
+import { FlatList, Image } 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';
+const sections = ['header', 'intro', 'step', 'info', 'groups', 'companies', 'create', 'image', 'success'];
+const steps = [{
+  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
+}) => {
+  const Colors = useColors();
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0
+  });
+  const [draft_squares, setDraftSquares] = useState(undefined);
+  const [pending_engagement, setPendingEngagement] = useState({
+    create_loading: false
+  });
+  const [draft_competition, setDraftCompetition] = useState(undefined);
+  const [draft_image, setDraftImage] = useState(undefined);
+  const [active_step, setActiveStep] = useState(steps[0]);
+  const [state, setState] = useState({
+    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':
+        if (!next_step) {
+          return;
+        }
+        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':
+        if (!next_step) {
+          return;
+        }
+        return setActiveStep(next_step);
+      case 'image':
+        if (!next_step) {
+          return;
+        }
+        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!
+        }
+        if (next_step) {
+          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 => {
+    switch (data.item) {
+      case 'intro':
+        if (active_step.step_key != 'intro') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(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"
+        }));
+      case 'header':
+        return /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            ...header_style
+          }
+        }, draft_image?.url ? /*#__PURE__*/React.createElement(Image, {
+          source: {
+            uri: draft_image?.url
+          },
+          style: {
+            height: 50,
+            width: 50
+          },
+          resizeMode: "cover"
+        }) : active_engagment == 'competition' ? /*#__PURE__*/React.createElement(Icons.PickEmIcon, {
+          size: 20,
+          color: Colors.text.h1
+        }) : active_engagment == 'bracket' ? /*#__PURE__*/React.createElement(Icons.BracketIcon, {
+          size: 20,
+          color: Colors.text.h1
+        }) : active_engagment == 'squares' ? /*#__PURE__*/React.createElement(Icons.SquaresIcon, {
+          size: 20,
+          color: Colors.text.h1
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            marginLeft: 10,
+            marginRight: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Create ", active_engagment ? active_engagment : 'Engagement'), /*#__PURE__*/React.createElement(Text, {
+          theme: "description"
+        }, "Follow the steps below to create your engagement")), /*#__PURE__*/React.createElement(Button, {
+          title: "X",
+          float: true,
+          title_color: Colors.text.error,
+          onPress: () => onClose()
+        }));
+      case 'step':
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            padding: 20
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1",
+          size: 38
+        }, active_step.title), /*#__PURE__*/React.createElement(Text, {
+          theme: "description",
+          color: errors.length > 0 ? Colors.text.warning : Colors.text.success,
+          size: 16,
+          style: {
+            marginTop: 10
+          }
+        }, active_step.description));
+      case 'info':
+        switch (active_step.step_key) {
+          case 'intro':
+            return /*#__PURE__*/React.createElement(IntroInfo, null);
+          case 'options':
+            return /*#__PURE__*/React.createElement(View, {
+              style: {
+                padding: 10
+              }
+            }, /*#__PURE__*/React.createElement(EngagementOptions, {
+              active_engagement: active_engagment,
+              onSelectEngagement: e => {
+                if (e == active_engagment) {
+                  return setState({
+                    ...state,
+                    active_engagment: undefined
+                  });
+                }
+                return setState({
+                  ...state,
+                  active_engagment: e
+                });
+              }
+            }));
+          default:
+            return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+      case 'success':
+        if (active_step.step_key != 'success') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Image, {
+          source: {
+            uri: draft_image?.url
+          },
+          style: {
+            width: size.width,
+            height: size.width
+          },
+          resizeMode: "contain"
+        }));
+      case 'image':
+        if (active_step.step_key != 'image') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            justifyContent: 'center',
+            alignItems: 'center'
+          }
+        }, /*#__PURE__*/React.createElement(ImageUploader, {
+          public_id: `${(Math.random() * 10000000).toFixed()}_${active_engagment}_pic`,
+          onFinishUpload: obj => setDraftImage({
+            ...obj,
+            url: obj.secure_url
+          })
+        }, draft_image ? /*#__PURE__*/React.createElement(Image, {
+          source: {
+            uri: draft_image.url
+          },
+          style: {
+            width: size.width,
+            height: size.width
+          },
+          resizeMode: "cover"
+        }) : /*#__PURE__*/React.createElement(Icons.ImageIcon, {
+          size: 150,
+          color: Colors.text.h1
+        }), /*#__PURE__*/React.createElement(Text, {
+          textAlign: "center",
+          style: {
+            marginTop: 15
+          },
+          theme: "h1",
+          color: Colors.text.action
+        }, draft_image ? 'CHANGE IMAGE' : "ADD AN IMAGE")));
+      case 'groups':
+        if (active_step.step_key != 'group') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(GroupSelector, {
+          groups: groups,
+          active_group: active_group,
+          onSelectGroup: g => setState({
+            ...state,
+            active_group: g
+          })
+        });
+      case 'companies':
+        if (active_step.step_key != 'company') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(CompanySelector, {
+          companies: companies,
+          active_company: active_company,
+          onSelectCompany: c => setState({
+            ...state,
+            active_company: c
+          })
+        });
+      case 'create':
+        if (active_step.step_key != 'create') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        switch (active_engagment) {
+          case 'competition':
+            return /*#__PURE__*/React.createElement(CreateCompetition, {
+              onUpdateDraft: d => setDraftCompetition(d),
+              onFocusPosition: onFocusPostiion
+            });
+          case 'squares':
+            return /*#__PURE__*/React.createElement(CreateSquares, {
+              onUpdateDraft: d => setDraftSquares(d),
+              onFocusPosition: onFocusPostiion
+            });
+          default:
+            return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+      default:
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    float: float,
+    style: {
+      flex: 1
+    },
+    onLayout: ev => {
+      const {
+        height,
+        width
+      } = ev.nativeEvent.layout;
+      setSize({
+        height,
+        width
+      });
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: sections,
+    key: 'create_engagement_list',
+    keyExtractor: item => item,
+    renderItem: renderSections
+  })), active_step.step_key == 'intro' ? /*#__PURE__*/React.createElement(View, {
+    type: "footer",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10,
+      ...footer_style
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    style: {
+      flex: 1
+    },
+    title: "GET STARTED",
+    type: "success",
+    onPress: () => handleNextStep()
+  })) : active_step.step_key == 'success' ? /*#__PURE__*/React.createElement(View, {
+    type: "footer",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10,
+      ...footer_style
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    style: {
+      flex: 1
+    },
+    title: "GO TO YOUR ENGAGEMENT",
+    type: "success",
+    onPress: () => handleNextStep()
+  })) : /*#__PURE__*/React.createElement(View, {
+    type: "footer",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    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);
+    }
+  }, /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: "left",
+    size: 14,
+    color: Colors.text.h1
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    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' ? /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    color: errors.length > 0 ? Colors.text.warning : Colors.text.success
+  }, "CREATE") : /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: "right",
+    size: 14,
+    color: errors.length == 0 ? Colors.text.success : Colors.text.h1
+  }))));
+};
+export default CreateEngagement;
+const IntroInfo = () => {
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 20
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1"
+  }, "\uD83C\uDFAE Make It Yours \u2013 Create custom pick-ems, competitions, or games in just a few steps"), /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    style: {
+      marginTop: 20
+    }
+  }, "\uD83D\uDC65 Play With Friends \u2013 Invite your group or the whole BettorEdge community"), /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    style: {
+      marginTop: 20
+    }
+  }, "\uD83D\uDCCA Track & Compete \u2013 See results, leaderboards, and bragging rights update in real time"));
+};
+const EngagementOptions = ({
+  active_engagement,
+  onSelectEngagement
+}) => {
+  const Colors = useColors();
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Button, {
+    key: "competition",
+    float: true,
+    style: {
+      padding: 10,
+      margin: 10,
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderColor: active_engagement == 'competition' ? Colors.text.success : Colors.borders.light
+    },
+    onPress: () => onSelectEngagement('competition')
+  }, /*#__PURE__*/React.createElement(Icons.PickEmIcon, {
+    size: 50,
+    color: active_engagement == 'competition' ? Colors.text.success : Colors.text.h1
+  }), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1,
+      marginLeft: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    color: active_engagement == 'competition' ? Colors.text.success : Colors.text.h1
+  }, "BettorEdge Competition"), /*#__PURE__*/React.createElement(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"))), /*#__PURE__*/React.createElement(Button, {
+    key: "squares",
+    float: true,
+    style: {
+      padding: 10,
+      margin: 10,
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderColor: active_engagement == 'squares' ? Colors.text.success : Colors.borders.light
+    },
+    onPress: () => onSelectEngagement('squares')
+  }, /*#__PURE__*/React.createElement(Icons.SquaresIcon, {
+    size: 50,
+    color: active_engagement == 'squares' ? Colors.text.success : Colors.text.h1
+  }), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1,
+      marginLeft: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    color: active_engagement == 'squares' ? Colors.text.success : Colors.text.h1
+  }, "Auction Squares"), /*#__PURE__*/React.createElement(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."))), /*#__PURE__*/React.createElement(Button, {
+    key: "bracket",
+    float: true,
+    style: {
+      padding: 10,
+      margin: 10,
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderColor: active_engagement == 'bracket' ? Colors.text.success : Colors.borders.light
+    },
+    onPress: () => onSelectEngagement('bracket')
+  }, /*#__PURE__*/React.createElement(Icons.BracketIcon, {
+    size: 50,
+    color: active_engagement == 'bracket' ? Colors.text.success : Colors.text.h1
+  }), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1,
+      marginLeft: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    color: active_engagement == 'bracket' ? Colors.text.success : Colors.text.h1
+  }, "Bracket Challenge"), /*#__PURE__*/React.createElement(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!"))), /*#__PURE__*/React.createElement(Button, {
+    key: "flash",
+    float: true,
+    style: {
+      padding: 10,
+      margin: 10,
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderColor: active_engagement == 'flash' ? Colors.text.success : Colors.borders.light
+    },
+    onPress: () => onSelectEngagement('flash')
+  }, /*#__PURE__*/React.createElement(Icons.FlameIcon, {
+    size: 50,
+    color: active_engagement == 'flash' ? Colors.text.success : Colors.text.h1
+  }), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1,
+      marginLeft: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    color: active_engagement == 'flash' ? Colors.text.success : Colors.text.h1
+  }, "Custom Market"), /*#__PURE__*/React.createElement(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!"))));
+};
+const GroupSelector = ({
+  active_group,
+  groups,
+  onSelectGroup
+}) => {
+  const Colors = useColors();
+  const [visible, setVisible] = useState(false);
+  const renderGroups = data => {
+    return /*#__PURE__*/React.createElement(Button, {
+      transparent: true,
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+        borderRadius: 0,
+        borderBottomWidth: 1,
+        borderColor: Colors.borders.light
+      },
+      onPress: () => {
+        setVisible(false);
+        onSelectGroup(data.item);
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      source: {
+        uri: data.item.group_image?.url
+      },
+      style: {
+        height: 40,
+        width: 40
+      },
+      resizeMode: "cover"
+    }), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1,
+        marginLeft: 10
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, data.item.name), /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      style: {
+        marginTop: 3
+      }
+    }, data.item.description)));
+  };
+  return /*#__PURE__*/React.createElement(Button, {
+    style: {
+      margin: 20
+    },
+    float: true,
+    onPress: () => {
+      setVisible(!visible);
+      onSelectGroup(undefined);
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: {
+      flex: 1,
+      marginRight: 10
+    },
+    theme: "h1"
+  }, active_group?.name ?? 'No Group'), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: visible ? 'up' : 'down',
+    color: Colors.text.h1,
+    size: 8
+  })), visible ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      marginTop: 20
+    }
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: groups,
+    key: 'group_selector',
+    keyExtractor: item => item.group_id.toString(),
+    renderItem: renderGroups
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null));
+};
+const CompanySelector = ({
+  active_company,
+  companies,
+  onSelectCompany
+}) => {
+  const Colors = useColors();
+  const [visible, setVisible] = useState(false);
+  const renderCompanies = data => {
+    return /*#__PURE__*/React.createElement(Button, {
+      transparent: true,
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+        borderRadius: 0,
+        borderBottomWidth: 1,
+        borderColor: Colors.borders.light
+      },
+      onPress: () => {
+        setVisible(false);
+        onSelectCompany(data.item);
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      source: {
+        uri: data.item.company_image?.url
+      },
+      style: {
+        height: 40,
+        width: 40
+      },
+      resizeMode: "cover"
+    }), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1,
+        marginLeft: 10
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, data.item.company_name), /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      style: {
+        marginTop: 3
+      }
+    }, data.item.company_description)));
+  };
+  return /*#__PURE__*/React.createElement(Button, {
+    style: {
+      margin: 20
+    },
+    float: true,
+    onPress: () => {
+      setVisible(!visible);
+      onSelectCompany(undefined);
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: {
+      flex: 1,
+      marginRight: 10
+    },
+    theme: "h1"
+  }, active_company?.company_name ?? 'No Company'), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: visible ? 'up' : 'down',
+    color: Colors.text.h1,
+    size: 8
+  })), visible ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      marginTop: 20
+    }
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: companies,
+    key: 'company_selector',
+    keyExtractor: item => item.company_id.toString(),
+    renderItem: renderCompanies
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null));
+};
+const CreateSquares = ({
+  onFocusPosition,
+  onUpdateDraft
+}) => {
+  const Colors = useColors();
+  const [draft, setDraft] = useState(CreateEngagementHelpers.generateSquaresComp());
+  const [sq_data, setSQData] = useState({
+    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 => {
+    const selected = active_league?.league_id == data.item.league_id ? true : false;
+    return /*#__PURE__*/React.createElement(Button, {
+      transparent: true,
+      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
+      })
+    }, /*#__PURE__*/React.createElement(Image, {
+      source: {
+        uri: data.item.league_image
+      },
+      style: {
+        height: 30,
+        width: 30
+      },
+      resizeMode: "contain"
+    }), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1,
+        marginLeft: 10
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, data.item.league_name), /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      style: {
+        marginTop: 3
+      }
+    }, data.item.sport)));
+  };
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    style: {
+      marginBottom: 10
+    }
+  }, "Competition Name"), /*#__PURE__*/React.createElement(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
+    })
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    style: {
+      marginBottom: 10
+    }
+  }, "Competition Description"), /*#__PURE__*/React.createElement(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
+    })
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    style: {
+      marginBottom: 10
+    }
+  }, "Squares Event"), /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    style: {
+      borderColor: active_league ? Colors.text.success : Colors.text.warning
+    },
+    onPress: () => setSQData({
+      ...sq_data,
+      leagues_visible: !leagues_visible
+    })
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: {
+      flex: 1,
+      marginRight: 10
+    },
+    theme: "h1"
+  }, active_league?.league_name ?? 'Select League'), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: leagues_visible ? 'up' : 'down',
+    color: Colors.text.h1,
+    size: 8
+  })), leagues_visible ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      marginTop: 20
+    }
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: leagues.sort((a, b) => a.priority - b.priority),
+    key: 'competition_reult_types',
+    keyExtractor: item => item.league_id.toString(),
+    renderItem: renderLeagues
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(View, {
+    float: true,
+    style: {
+      margin: 10
+    }
+  }, active_league && league_schedule ? /*#__PURE__*/React.createElement(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 ? /*#__PURE__*/React.createElement(Button, {
+    style: {
+      borderColor: active_event ? Colors.text.success : Colors.text.warning
+    },
+    float: true,
+    onPress: () => setSQData({
+      ...sq_data,
+      league_schedule: true
+    })
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1"
+  }, active_event.event_title)) : /*#__PURE__*/React.createElement(React.Fragment, null)));
+};
+const CreateCompetition = ({
+  onFocusPosition,
+  onUpdateDraft
+}) => {
+  const Colors = useColors();
+  const [templates, setTemplates] = useState([]);
+  const [draft, setDraft] = useState({
+    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 => {
+    return /*#__PURE__*/React.createElement(Button, {
+      transparent: true,
+      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
+      })
+    }, /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, data.item.type_label), /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      style: {
+        marginTop: 3
+      }
+    }, data.item.description)));
+  };
+  const renderTemplates = data => {
+    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 /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return /*#__PURE__*/React.createElement(Button, {
+      transparent: true,
+      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
+      })
+    }, /*#__PURE__*/React.createElement(Image, {
+      source: {
+        uri: data.item.image?.url
+      },
+      style: {
+        height: 30,
+        width: 30
+      },
+      resizeMode: "contain"
+    }), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1,
+        marginLeft: 10
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, data.item.competition_name), /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      style: {
+        marginTop: 3
+      }
+    }, data.item.competition_description)));
+  };
+  const renderResultTypes = data => {
+    return /*#__PURE__*/React.createElement(Button, {
+      transparent: true,
+      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
+      })
+    }, /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, data.item.label), /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      style: {
+        marginTop: 3
+      }
+    }, data.item.description)));
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    style: {
+      marginBottom: 10
+    }
+  }, "Competition Name"), /*#__PURE__*/React.createElement(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
+    })
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    style: {
+      marginBottom: 10
+    }
+  }, "Competition Description"), /*#__PURE__*/React.createElement(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
+    })
+  })), templates.length > 0 ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    style: {
+      marginBottom: 10
+    }
+  }, "Templates"), /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    onPress: () => setDraft({
+      ...draft,
+      templates_visible: !templates_visible,
+      competition_template_id: undefined
+    })
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: {
+      flex: 1,
+      marginRight: 10
+    },
+    theme: "h1"
+  }, template?.competition_name ?? 'Select Template'), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: templates_visible ? 'up' : 'down',
+    color: Colors.text.h1,
+    size: 8
+  })), templates_visible ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      marginTop: 20
+    }
+  }, /*#__PURE__*/React.createElement(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
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    style: {
+      marginBottom: 10
+    }
+  }, "Competition Type"), /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    style: {
+      borderColor: competition_type ? Colors.text.success : Colors.text.warning
+    },
+    onPress: () => setDraft({
+      ...draft,
+      types_visible: !types_visible
+    })
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: {
+      flex: 1,
+      marginRight: 10
+    },
+    theme: "h1"
+  }, competition_type?.type_label ?? 'Select Type'), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: types_visible ? 'up' : 'down',
+    color: Colors.text.h1,
+    size: 8
+  })), types_visible ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      marginTop: 20
+    }
+  }, /*#__PURE__*/React.createElement(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
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    style: {
+      marginBottom: 10
+    }
+  }, "Payout Type"), /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    style: {
+      borderColor: competition_result_type ? Colors.text.success : Colors.text.warning
+    },
+    onPress: () => setDraft({
+      ...draft,
+      results_visible: !results_visible
+    })
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: {
+      flex: 1,
+      marginRight: 10
+    },
+    theme: "h1"
+  }, competition_result_type?.label ?? 'Select Payout'), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: results_visible ? 'up' : 'down',
+    color: Colors.text.h1,
+    size: 8
+  })), results_visible ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      marginTop: 20
+    }
+  }, /*#__PURE__*/React.createElement(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
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null))));
+};
+//# sourceMappingURL=index.js.map