be-components 7.3.0 → 7.3.2

package/lib/module/CreateEngagement/index.js

@@ -7,6 +7,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';
 const sections = ['header', 'intro', 'step', 'info', 'groups', 'companies', 'create', 'image', 'success'];
 const steps = [{
   step_key: 'intro',
@@ -47,6 +48,7 @@ const steps = [{
 const CreateEngagement = ({
   float,
   player,
+  bracket_id,
   flash_campaign_id,
   init_engagement,
   onFocusPostiion,
@@ -66,6 +68,7 @@ const CreateEngagement = ({
     height: 0
   });
   const [draft_squares, setDraftSquares] = useState(undefined);
+  const [draft_bracket_competition, setDraftBracketCompetition] = useState(undefined);
   const [pending_engagement, setPendingEngagement] = useState({
     create_loading: false
   });
@@ -108,7 +111,7 @@ const CreateEngagement = ({
       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));
@@ -228,6 +231,37 @@ const CreateEngagement = ({
               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!
@@ -423,26 +457,36 @@ const CreateEngagement = ({
         if (active_step.step_key != 'group') {
           return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
-        return /*#__PURE__*/React.createElement(GroupSelector, {
+        return /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            margin: 20
+          }
+        }, /*#__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, {
+        return /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            margin: 20
+          }
+        }, /*#__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);
@@ -469,6 +513,14 @@ const CreateEngagement = ({
               onFocusPosition: onFocusPostiion,
               company: active_company
             });
+          case 'bracket':
+            return /*#__PURE__*/React.createElement(CreateBracketCompetition, {
+              group: active_group,
+              bracket_id: bracket_id,
+              onUpdateDraft: d => setDraftBracketCompetition(d),
+              onFocusPosition: onFocusPostiion,
+              company: active_company
+            });
           default:
             return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
@@ -612,6 +664,207 @@ const IntroInfo = () => {
     }
   }, "\uD83D\uDCCA Track & Compete \u2013 See results, leaderboards, and bragging rights update in real time"));
 };
+const CreateBracketCompetition = ({
+  bracket_id,
+  company,
+  group,
+  onFocusPosition,
+  onUpdateDraft
+}) => {
+  const Colors = useColors();
+  const [create_state, setCreateState] = useState({
+    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 => {
+    return /*#__PURE__*/React.createElement(Button, {
+      transparent: true,
+      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
+        }
+      })
+    }, /*#__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, 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_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
+      }
+    })
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    style: {
+      marginBottom: 10
+    }
+  }, "Competition Description"), /*#__PURE__*/React.createElement(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
+      }
+    })
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    style: {
+      marginBottom: 10
+    }
+  }, "Select a Bracket"), /*#__PURE__*/React.createElement(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
+        }
+      });
+    }
+  })), /*#__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: () => setCreateState({
+      ...create_state,
+      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))));
+};
 const CreateFlashMarket = ({
   company,
   group,
@@ -945,7 +1198,7 @@ const EngagementOptions = ({
     style: {
       marginTop: 4
     }
-  }, "Create an auction squares game.  Bid on squares until the auction ends.  Buy and sell squares throughout the game."))), false ? /*#__PURE__*/React.createElement(Button, {
+  }, "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: {
@@ -974,7 +1227,7 @@ const EngagementOptions = ({
     style: {
       marginTop: 4
     }
-  }, "Create a bracket.  Make picks until the championship. Pick more correctly and win!"))) : /*#__PURE__*/React.createElement(React.Fragment, null), companies.length > 0 ? /*#__PURE__*/React.createElement(Button, {
+  }, "Create a bracket.  Make picks until the championship. Pick more correctly and win!"))), companies.length > 0 ? /*#__PURE__*/React.createElement(Button, {
     key: "flash",
     float: true,
     style: {
@@ -1005,7 +1258,95 @@ const EngagementOptions = ({
     }
   }, "Create a custom flash market.  Players bet on the perimutuel outcomes, get it right and get paid!"))) : /*#__PURE__*/React.createElement(React.Fragment, null));
 };
-const GroupSelector = ({
+const BracketSelector = ({
+  active_bracket,
+  brackets,
+  leagues,
+  onSelectBracket
+}) => {
+  const Colors = useColors();
+  const [visible, setVisible] = useState(false);
+  const renderBrackets = data => {
+    const league = leagues.find(l => l.league_id == data.item.league_id);
+    if (!league) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    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);
+        onSelectBracket(data.item);
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      source: {
+        uri: league.league_image
+      },
+      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.bracket_name), /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      style: {
+        marginTop: 3
+      }
+    }, "Begins ", moment(data.item.scheduled_datetime).format('MMM DD hh:mm a'))));
+  };
+  return /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    style: {
+      borderColor: active_bracket ? Colors.text.success : Colors.text.warning
+    },
+    onPress: () => {
+      setVisible(!visible);
+      onSelectBracket(undefined);
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: {
+      flex: 1,
+      marginRight: 10
+    },
+    theme: "h1"
+  }, active_bracket?.bracket_name ?? 'No Bracket'), /*#__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: 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
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null));
+};
+export const GroupSelector = ({
   active_group,
   groups,
   onSelectGroup
@@ -1052,9 +1393,6 @@ const GroupSelector = ({
     }, data.item.description)));
   };
   return /*#__PURE__*/React.createElement(Button, {
-    style: {
-      margin: 20
-    },
     float: true,
     onPress: () => {
       setVisible(!visible);
@@ -1088,7 +1426,7 @@ const GroupSelector = ({
     renderItem: renderGroups
   })) : /*#__PURE__*/React.createElement(React.Fragment, null));
 };
-const CompanySelector = ({
+export const CompanySelector = ({
   active_company,
   companies,
   onSelectCompany
@@ -1135,9 +1473,6 @@ const CompanySelector = ({
     }, data.item.company_description)));
   };
   return /*#__PURE__*/React.createElement(Button, {
-    style: {
-      margin: 20
-    },
     float: true,
     onPress: () => {
       setVisible(!visible);