be-components 5.6.7 → 5.6.8

package/src/Engage/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, FlatList, Image, KeyboardAvoidingView, Modal, Platform } from 'react-native';
-import type { BEEventProps, BracketCompetitionProps, BracketProps, CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, EventProps, FocusPositionProps, LeagueProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
+import type { BEEventProps, BracketCompetitionProps, BracketProps, CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, EventProps, FocusPositionProps, LeagueProps, PollCampaignProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
 import { EngageApi, EngageHelpers } from './api';
 import CompetitionCard from './components/CompetitionCard';
 import { Icons, Toggle } from '../Components';
@@ -13,13 +13,14 @@ import EngageHeader from './components/EngageHeader';
 import PrivateCodePrompt from './components/PrivateCodePrompt';
 import { Button, Text, View } from '../Components/Themed';
 import { useColors } from '../constants/useColors';
+import PollCampaignCard from './components/PollCampaignCard';
 
 
 type EngageModuleProps = {
     player_id?:string,
     insets?: { top:number, bottom:number },
     view_mode?:'desktop'|'mobile'
-    init_engagement?:'competitions'|'brackets'|'squares',
+    init_engagement?:'competitions'|'brackets'|'squares'|'polls',
     onEvent?:(be_event:BEEventProps) => void,
     onFocusPosition?:(pos:FocusPositionProps) => void,
     onManage?:() => void,
@@ -31,13 +32,14 @@ type EngageModuleProps = {
     onCreateBracketCompetition?:() => void,
     onSelectCompetition:(c:CompetitionProps) => void,
     onSelectBracketCompetition:(bc:BracketCompetitionProps) => void,
+    onSelectPollCampaign:(pc:PollCampaignProps) => void,
     onSelectSquaresCompetition:(sc:SquaresCompetitionProps) => void,
     onSelectCompetitionSeason:(cs:CompetitionSeasonProps) => void
 }
 
 const engage_sections = ['header','toggle', 'private','engagements']
 const MIN_ENGAGEMENT_WIDTH = 325
-const EngageModule = ({ view_mode, insets, init_engagement, onBracketRoom, onSelectBracketCompetition, onSelectCompetition, onSelectSquaresCompetition, onSelectCompetitionSeason,
+const EngageModule = ({ view_mode, insets, init_engagement, onSelectPollCampaign, onBracketRoom, onSelectBracketCompetition, onSelectCompetition, onSelectSquaresCompetition, onSelectCompetitionSeason,
     onCreateSeason, onCreateCompetition, onCreateBracketCompetition, onCreateSquares, onFocusPosition, onManage, onEvent, onSelectCompany
  }:EngageModuleProps) => {
     const [ module_size, setModuleSize ] = useState({ width:0, height:0 });
@@ -52,6 +54,7 @@ const EngageModule = ({ view_mode, insets, init_engagement, onBracketRoom, onSel
     const [ module_data, setModuleData ] = useState<{
         loading:boolean,
         competitions:CompetitionProps[],
+        poll_campaigns:PollCampaignProps[],
         competition_seasons:CompetitionSeasonProps[],
         competition_types:CompetitionTypeProps[],
         competition_result_types:CompetitionResultTypeProps[],
@@ -68,6 +71,7 @@ const EngageModule = ({ view_mode, insets, init_engagement, onBracketRoom, onSel
         loading:false,
         competitions: [],
         competition_seasons:[],
+        poll_campaigns: [],
         companies:[],
         leagues:[],
         events:[],
@@ -79,7 +83,7 @@ const EngageModule = ({ view_mode, insets, init_engagement, onBracketRoom, onSel
         bracket_competitions:[],
         players:[]
     });
-    const { loading, competitions, selected_bracket, competition_seasons, competition_result_types, squares_competitions, brackets, leagues, bracket_competitions, events, competition_types, companies, players } = module_data;
+    const { loading, competitions, poll_campaigns, selected_bracket, competition_seasons, competition_result_types, squares_competitions, brackets, leagues, bracket_competitions, events, competition_types, companies, players } = module_data;
     const Colors = useColors();
 
     const visible_competitions = competitions.filter(c => moment().isBefore(moment(c.scheduled_datetime)))
@@ -112,10 +116,11 @@ const EngageModule = ({ view_mode, insets, init_engagement, onBracketRoom, onSel
         const comps = await EngageApi.getActivePublicCompetitions();
         const seasons = await EngageApi.getActivePublicSeasons();
         const brackets = await EngageApi.getActivePublicBrackets();
+        const pcs = await EngageApi.getActivePublicCampaigns();
         const squares = await EngageApi.getActivePublicSquares();
-        const company_ids = EngageHelpers.getCompanyIdsFromEngage(comps, squares, brackets);
+        const company_ids = EngageHelpers.getCompanyIdsFromEngage(comps, squares, brackets, pcs);
         const cpanys = await EngageApi.getCompaniesByIds(company_ids);
-        const player_ids = EngageHelpers.getPlayerIdsFromEngage(comps, squares, brackets);
+        const player_ids = EngageHelpers.getPlayerIdsFromEngage(comps, squares, brackets, pcs);
         const plyers = await EngageApi.getPlayersByPlayerIds(player_ids)
         const opts = await EngageApi.getCompetitionOptions();
         const event_ids = EngageHelpers.getEventIdsFromSquares(squares);
@@ -128,6 +133,7 @@ const EngageModule = ({ view_mode, insets, init_engagement, onBracketRoom, onSel
             loading:false,
             competitions:comps,
             competition_seasons: seasons,
+            poll_campaigns: pcs.filter(pc => (pc.active_polls??0) > 0),
             bracket_competitions:brackets,
             competition_types: opts.competition_types,
             competition_result_types: opts.competition_result_types,
@@ -238,6 +244,21 @@ const EngageModule = ({ view_mode, insets, init_engagement, onBracketRoom, onSel
         )
     }
 
+    const renderPollCampaigns = (data: { item:PollCampaignProps, index:number }) => {
+        const company = companies.find(c => c.company_id == data.item.company_id)
+        const admin = players.find(p => p.player_id == data.item.player_id);
+        return (
+            <View key={data.item.poll_campaign_id.toString()} transparent style={{ margin:10, width:engagement_width }}>
+                <PollCampaignCard 
+                    poll_campaign={data.item}
+                    company={company}
+                    admin={admin}
+                    onSelectPollCampaign={(c) => onSelectPollCampaign(c)}
+                />
+            </View>
+        )
+    }
+
     const renderSections = (data:{item:string, index:number}) => {
         switch(data.item){
             case 'header':
@@ -252,6 +273,12 @@ const EngageModule = ({ view_mode, insets, init_engagement, onBracketRoom, onSel
                 />
                 )
             case 'toggle':
+                let toggles = [
+                    {key:'competitions', label: 'Competitions'},
+                    {key:'brackets', label: 'Brackets'},
+                ]
+                if(poll_campaigns.length > 0){ toggles.push({ key: 'polls', label: 'Predict / Trivia' }) }
+                if(squares_competitions.length > 0){ toggles.push({ key: 'squares', label: 'Squares' }) }
                 return (
                     <View transparent style={{ margin:10 }}>
                         {onManage && view_mode == 'mobile' ?
@@ -265,11 +292,7 @@ const EngageModule = ({ view_mode, insets, init_engagement, onBracketRoom, onSel
                         <Toggle
                             background_color={Colors.views.header}
                             inactive_title_color={Colors.text.h1}
-                            options={[
-                                {key:'competitions', label: 'Competitions'},
-                                {key:'brackets', label: 'Brackets'},
-                                {key:'squares', label: 'Squares'}
-                            ]}
+                            options={toggles}
                             selected_option={active_tab}
                             onSelectOption={(option) => setActiveTab(option as any)}
                         />
@@ -365,6 +388,22 @@ const EngageModule = ({ view_mode, insets, init_engagement, onBracketRoom, onSel
                             })}
                             </View>
                         </View>
+                        :active_tab == 'polls' ?
+                        <View transparent>
+                            <View transparent style={{ marginBottom:15, marginTop:10 }}>
+                                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                                    <View transparent style={{ flex:1 }}>
+                                        <Text theme='h1'>Prediction / Trivia Games</Text>
+                                        <Text style={{ marginTop:3 }} theme='description'>Below are available prediction or trivia games.</Text>
+                                    </View>
+                                </View>
+                            </View>
+                            <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+                                {poll_campaigns.sort((a,b) => moment(b.create_datetime).unix() - moment(a.create_datetime).unix()).map((c, i) => {
+                                    return renderPollCampaigns({ item: c, index: i })
+                                })}
+                            </View>
+                        </View>
                         :active_tab == 'brackets' ?
                         <View transparent>
                             <View transparent>

package/src/Poll/api/index.ts

@@ -171,6 +171,15 @@ const PollCampaignGoalApi = {
 }
 
 const PollResponseApi = {
+    createPMOrder: async(poll_option_id:string, stake:number):Promise<{ poll_response:PollResponseProps, my_leader:PollCampaignLeaderProps, poll_campaign:PollCampaignProps } | undefined> => {
+        try {
+            const resp = await axios.post(`${AUTH_SVC_API}/v2/pm/action/order`, { poll_option_id, stake });
+            return resp.data
+        } catch (e) {
+            console.log(e);
+            return undefined
+        }
+    },
     createPollResponse : async(poll_response:PollResponseProps):Promise<PollResponseProps> => {
         const resp = await axios.post(`${AUTH_SVC_API}/v1/polls/poll/response/create`, { poll_response })
         return resp.data.poll_response

package/src/Poll/components/CampaignHeader.tsx

@@ -7,14 +7,23 @@ import { useColors } from '../../constants/useColors';
 
 type CampaignHeaderProps = {
     poll_campaign:PollCampaignProps,
+    onBack?:() => void,
     onSharePollCampaign:(pc:PollCampaignProps) => void
 }
 
-const CampaignHeader = ({ poll_campaign, onSharePollCampaign }:CampaignHeaderProps) => {
+const CampaignHeader = ({ poll_campaign, onSharePollCampaign, onBack }:CampaignHeaderProps) => {
     const Colors = useColors();
     return (
         <View>
             <View type='header' nativeID="competition_header" style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1 }}>
+                {onBack ?
+                <Button
+                    transparent
+                    style={{ paddingLeft:0, paddingRight:20 }}
+                >
+                    <Icons.ChevronIcon direction='left' color={Colors.text.h1} size={10} />
+                </Button>
+                :<></>}
                 <View transparent>
                     <Image
                         source={{ uri: poll_campaign.campaign_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}

package/src/Poll/components/CampaignLeaderboard.tsx

@@ -100,9 +100,9 @@ const CampaignLeaderboard = ({ poll_campaign, height, mode, view_mode, onShowFul
     }
 
     return (
-        <View float style={{ flex:1, borderRadius:22,  maxHeight: height-20, width: mode == 'desktop'?500:undefined  }}>
+        <View float style={{ flex:1,  maxHeight: height-20, width: mode == 'desktop'?500:undefined  }}>
             {my_leader && me ?
-            <View type='header' nativeID="my_results" style={{ padding:10, borderTopRightRadius:22, borderTopLeftRadius:22 }}>
+            <View type='header' nativeID="my_results" style={{ padding:10 }}>
                 <Text style={{ padding:10 }} size={14} theme='h1' weight='bold'>My Results</Text>
                 <View float style={{ flexDirection:'row', alignItems:'center', margin:4, padding:5, borderRadius:22 }}>
                     <View transparent nativeID="player" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>

package/src/Poll/index.tsx

@@ -17,14 +17,17 @@ type PollCampaignModuleProps = {
     player_id?:string,
     view_mode:'desktop'|'mobile',
     distinct_id:string,
+    insets?:{ top:number, bottom:number, left:number, right:number },
+    onBack?:() => void,
     onEvent?:(be_event:BEEventProps) => void,
     onRequestAuthenticate: (auth_strategy_id?:string, company_id?:string) => void,
     onSharePollCampaign: (poll_campaign:PollCampaignProps) => void,
     onComplete:() => void
+
 }
 
 const sections = ['header', 'progress', 'results','questions']
-const PollCampaign = ({ distinct_id, view_mode, poll_campaign_id, player_id, onRequestAuthenticate, onSharePollCampaign }: PollCampaignModuleProps ) => {
+const PollCampaign = ({ distinct_id, view_mode, poll_campaign_id, player_id, insets, onBack, onRequestAuthenticate, onSharePollCampaign }: PollCampaignModuleProps ) => {
     const [ needs_reload, setNeedsReload ] = useState(false);
     const [ socket_polls, setSocketPolls ] = useState<PollProps[]>([]);
     const [ socket_campaign, setSocketCampaign ] = useState<PollCampaignProps|undefined>(undefined);
@@ -96,12 +99,15 @@ const PollCampaign = ({ distinct_id, view_mode, poll_campaign_id, player_id, onR
     const handleSubmitResponse = async(pr:PollResponseProps) => {
         if(!player_id){ return onRequestAuthenticate(poll_campaign?.auth_strategy_id, poll_campaign?.company_id) }
         try {
+            if(!pr.poll_option_id || !pr.stake){ return }
             if(action_loading){ return }
             setMyData({ ...my_data, action_loading: true })
-            let new_pr = await PollResponseApi.createPollResponse(pr);
+            //let new_pr = await PollResponseApi.createPollResponse(pr);
+            let response = await PollResponseApi.createPMOrder(pr.poll_option_id, parseFloat(pr.stake as string))
+            if(!response){ return setMyData({ ...my_data, action_loading:false }) }
             setMyData({
                 ...my_data,
-                poll_responses: poll_responses.filter(pr => pr.poll_response_id != new_pr.poll_response_id).concat(new_pr)
+                poll_responses: poll_responses.filter(pr => pr.poll_response_id != response.poll_response.poll_response_id).concat(response.poll_response)
             })
         } catch (e) {
             alert('Unable to process!')
@@ -126,6 +132,7 @@ const PollCampaign = ({ distinct_id, view_mode, poll_campaign_id, player_id, onR
                 if(!poll_campaign){ return <></> }
                 return (
                     <CampaignHeader
+                        onBack={onBack}
                         poll_campaign={poll_campaign}
                         onSharePollCampaign={onSharePollCampaign}
                     />
@@ -191,7 +198,7 @@ const PollCampaign = ({ distinct_id, view_mode, poll_campaign_id, player_id, onR
                 transparent
                 visible={active_poll_id ? true : false}
                 >
-                <View type='blur' style={view_mode=='desktop'?{flex:1, justifyContent:'center', alignItems:'center'}:{ flex:1, justifyContent:'flex-end', padding:12 }}>
+                <View type='blur' style={view_mode=='desktop'?{flex:1, justifyContent:'center', alignItems:'center'}:{ flex:1, justifyContent:'flex-end', padding:12, paddingBottom:(insets?.bottom??0) + 12, paddingTop:(insets?.top??0) + 12 }}>
                     <PollCard
                         poll_id={active_poll_id}
                         action_loading={action_loading}
@@ -213,7 +220,7 @@ const PollCampaign = ({ distinct_id, view_mode, poll_campaign_id, player_id, onR
                 visible={full_leaderboard?true:false}
                 style={{ flex:1 }}
             >
-                <View type='blur' style={view_mode=='desktop'?{flex:1, justifyContent:'center', alignItems:'center'}:{ flex:1, justifyContent:'flex-end', padding:12 }}>
+                <View type='blur' style={view_mode=='desktop'?{flex:1, justifyContent:'center', alignItems:'center'}:{ flex:1, justifyContent:'flex-end', padding:12, paddingBottom:(insets?.bottom??0) + 12, paddingTop:(insets?.top??0) + 12 }}>
                         <CampaignLeaderboard
                             poll_campaign={poll_campaign}
                             view_mode='full'

package/src/types.d.ts

@@ -729,6 +729,8 @@ export interface PollCampaignProps {
     admins:string[],
     phone:string,
     total_responses:number,
+    prize_image?:any,
+    prize_override?:string,
     status: string,
     campaign_type: 'predict'|'trivia'|'feedback',
     active_polls?:number,
@@ -770,18 +772,24 @@ export interface PollCampaignGoalProps {
 }
 
 
+
 export interface PollCampaignLeaderProps {
     poll_campaign_leader_id:string,
     poll_campaign_id:string,
     player_id:string,
     place:number,
+    status: 'inprogress'|'closed',
     winnings:number,
-    stake:number,
+    potential_winnings:number,
+    staked:number,
     responses:number,
+    earnings:number,
+    resolved_datetime?:any,
     create_datetime:any,
     last_update_datetime:any
 }
 
+
 export interface PollProps {
     poll_id:string,
     poll_campaign_id:string,