be-components 1.9.6 → 1.9.8

package/src/Poll/components/PollCard.tsx

@@ -6,6 +6,7 @@ import type { PollOptionProps, PollProps, PollResponseProps, PollSummaryProps }
 import { PollApi, PollResponseApi } from '../api';
 import { Button, Icons, Text } from '../../Components';
 import Colors from '../../constants/colors';
+import { view_styles } from '../../constants/styles';
 
 type PollCardProps = {
     poll:PollProps,
@@ -182,7 +183,7 @@ const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, on
         return <></>
     }
     return (
-        <View nativeID='poll' style={{ flex:1 }} onLayout={(ev) => {
+        <View nativeID='poll' style={{ ...view_styles.section }} onLayout={(ev) => {
             const { width } = ev.nativeEvent.layout
             setPollWidth(width)
         }}>

package/src/Poll/components/PollQuestionsSection.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity, FlatList } from "react-native"
+import type { PollCampaignProps, PollProps, PollResponseProps } from "../../types"
+import { view_styles } from '../../constants/styles';
+import { Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import PollSelectCard from './PollSelectCard';
+
+type PollQuestionsSectionProps = {
+    poll_campaign:PollCampaignProps,
+    polls:PollProps[],
+    poll_responses:PollResponseProps[],
+    onSelectPoll:(p:PollProps) => void
+}
+
+const PollQuestionsSection = ({ poll_campaign, polls, onSelectPoll }:PollQuestionsSectionProps) => {
+    const [ section_data, setSectionData ] = useState<{
+        loading:boolean,
+        expanded:boolean,
+    }>({
+        loading: false,
+        expanded: true
+    });
+    const { expanded } = section_data;
+
+
+    const renderPolls = (data:{item:PollProps, index:number}) => {
+        return (
+            <View>
+                <PollSelectCard
+                    poll={data.item}
+                    disabled={false}
+                    selected={false}
+                    poll_campaign={poll_campaign}
+                    show_response={false}
+                    response_option={undefined}
+                    onSelect={(p) => onSelectPoll(p)}
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section }}>
+            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setSectionData({ ...section_data, expanded: !expanded })}>
+                <Icons.QuestionIcon size={18} color={Colors.brand.midnight} />
+                <View style={{flex:1, marginLeft:10}}>
+                    <Text theme='header'>Questions</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>Available questions can be found below</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8} />
+            </TouchableOpacity>
+            {expanded ?
+            <View style={{ ...view_styles.section_body }}>
+                <FlatList
+                    data={polls.sort((a,b) => a.priority - b.priority)}
+                    renderItem={renderPolls}
+                    keyExtractor={(item) => item.poll_id.toString()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default PollQuestionsSection

package/src/Poll/components/PollSelectCard.tsx

@@ -9,14 +9,13 @@ type PollSelectCardProps = {
     poll_campaign:PollCampaignProps,
     poll:PollProps,
     disabled?:boolean,
-    index:number,
     show_response?:boolean,
     response_option?:PollOptionProps,
     poll_response?:PollResponseProps,
     onSelect:(poll:PollProps) => void
 }
 
-const PollSelectCard = ({ index, poll, disabled, selected, poll_campaign, poll_response, show_response, response_option, onSelect }:PollSelectCardProps) => {
+const PollSelectCard = ({ poll, disabled, selected, poll_campaign, poll_response, show_response, response_option, onSelect }:PollSelectCardProps) => {
 
     const getResultColor = () => {
         switch(poll_response?.result_ind){
@@ -66,7 +65,7 @@ const PollSelectCard = ({ index, poll, disabled, selected, poll_campaign, poll_r
     return (
         <TouchableOpacity disabled={disabled} style={{ padding:10, borderRadius:22, backgroundColor:selected?Colors.highlights.highlight500Faded:undefined, flexDirection:'row' }} onPress={() => onSelect(poll)}>
         <View style={{ height:20, width:20, borderRadius:100, backgroundColor:Colors.shades.white, marginRight:10, justifyContent:'center' }}>
-            <Text size={12} color={Colors.brand.midnight} weight='bold' textAlign='center'>{(index + 1).toString()}</Text>
+            <Text size={12} color={Colors.brand.midnight} weight='bold' textAlign='center'>{poll.priority}</Text>
         </View>
         <View style={{ flex:1 }}>
             {poll_campaign.campaign_type == 'trivia' && !poll_response && poll.status != 'closed' ? 

package/src/Poll/index.tsx

@@ -1,54 +1,143 @@
 import React, { useEffect, useState } from 'react';
-import CampaignPlay from "./components/CampaignPlay"
-import { PollCampaignApi } from './api';
-import FlashMarket from './flashmarket';
-import { View, useWindowDimensions } from 'react-native';
+import { PollApi, PollCampaignApi } from './api';
+import { View, ScrollView, ActivityIndicator } from 'react-native';
+import type { PollCampaignGoalProps, PollCampaignProps, PollProps, PollResponseProps } from '../types';
+import Colors from '../constants/colors';
+import CampaignHeader from './components/CampaignHeader';
+import CampaignProgressBar from './components/CampaignProgressBar';
+import PollQuestionsSection from './components/PollQuestionsSection';
+import { Spring, Text } from '../Components';
+//import PollCard from './components/PollCard';
+import CampaignResult from './components/CampaignResult';
+import CampaignLeaderboard from './components/CampaignLeaderboard';
 
 
 type PollCampaignModuleProps = {
     poll_campaign_id:string,
     poll_id?:string,
     player_id?:string,
-    type: 'full' | 'mini',
+    height:number,
     onRequestAuthenticate: (auth_strategy_id?:string, company_id?:string) => void,
+    onSharePollCampaign: (poll_campaign:PollCampaignProps) => void,
     onComplete:() => void
 }
-const PollCampaign = ({ poll_campaign_id, poll_id, type, player_id, onRequestAuthenticate, onComplete }: PollCampaignModuleProps ) => {
-    const [ loaded, setLoaded ] = useState(false);
+const PollCampaign = ({ height, poll_campaign_id, player_id }: PollCampaignModuleProps ) => {
+    const [ module_data, setModuleData ] = useState<{
+        loading: boolean,
+        active_poll_id?:string,
+        poll_campaign?:PollCampaignProps,
+        polls:PollProps[],
+        poll_campaign_goals:PollCampaignGoalProps[]
+    }>({
+        loading: false,
+        polls: [],
+        poll_campaign_goals:[]
+    });
+    const [ full_leaderboard, setFullLeaderboard ] = useState(false);
+    const [ my_data ] = useState<{
+        poll_responses:PollResponseProps[]
+    }>({
+        poll_responses: []
+    });
+
+    const { poll_campaign, polls, active_poll_id } = module_data;
+    const active_poll = polls.find(p => p.poll_id == active_poll_id);
+    const { poll_responses } = my_data;
 
-    const dimensions = useWindowDimensions();
-    
     useEffect(() => {
         PollCampaignApi.setEnvironment();
-        setLoaded(true)
-    },[])
-    if(!loaded){ return <></> }
+        getDataFromServer();
+    },[poll_campaign_id, player_id])
+
+    const getDataFromServer = async() => {
+        setModuleData({ ...module_data, loading:true });
+        const pc = await PollCampaignApi.getPollCampaignById(poll_campaign_id);
+        const ps_resp = await PollApi.getPollsByCampaignId(poll_campaign_id);
 
-    if(type == 'full' && poll_campaign_id){
-        let widget_width = dimensions.width
-        if(widget_width > 600){ widget_width = 600 }
+        setModuleData({
+            ...module_data,
+            poll_campaign: pc,
+            polls: ps_resp.polls,
+            poll_campaign_goals: ps_resp.poll_campaign_goals, 
+            loading:false
+        })
+    }
+
+    if(!poll_campaign){
         return (
-            <View style={{ width: widget_width, alignSelf:'center', height:dimensions.height }}>
-                <CampaignPlay
-                    player_id={player_id}
-                    onRequestAuthenticate={onRequestAuthenticate}
-                    poll_campaign_id={poll_campaign_id}
-                    onFinished={onComplete}
+            <View style={{ flex:1 }}>
+                <ActivityIndicator
+                    style={{ padding:20, alignSelf:'center' }}
+                    size='large'
+                    color={Colors.brand.midnight}
                 />
             </View>
         )
     }
-    if(type == 'mini'){
-        return (
-            <FlashMarket
-                poll_campaign_id={poll_campaign_id}
-                poll_id={poll_id}
-                player_id={player_id}
-                onRequestAuthenticate={onRequestAuthenticate}
+
+    return (
+        <View style={{ backgroundColor:Colors.shades.white, height }}>
+            <CampaignHeader
+                poll_campaign={poll_campaign}
+                onSharePollCampaign={(pc) => console.log(pc)}
             />
-        )
-    }
-    return <></>
+            <ScrollView style={{ flex:1 }}>
+                <View style={{ backgroundColor:Colors.shades.shade100 }}>
+                    <CampaignProgressBar
+                        poll_campaign={poll_campaign}
+                        polls={polls}
+                        active_poll='0'
+                        onPollSelect={(p) => console.log(p)}
+                        poll_responses={poll_responses}
+                    />
+                </View>
+                <View nativeID='leaderboard'>
+                    <CampaignResult
+                        poll_campaign={poll_campaign}
+                        onShowFullLeaderboard={() => setFullLeaderboard(true)}
+                    />
+                </View>
+                <View nativeID='poll_questions'>
+                        <PollQuestionsSection
+                            poll_campaign={poll_campaign}
+                            polls={polls}
+                            poll_responses={poll_responses}
+                            onSelectPoll={(p) => setModuleData({ ...module_data, active_poll_id: p.poll_id })}
+                        />
+                </View>
+            </ScrollView>
+            {active_poll ?
+            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'flex-end', backgroundColor:Colors.shades.black_faded }}>
+                <Spring
+                    slide='vertical'
+                    to={0}
+                    from={500}
+                    style={{ maxHeight:height }}
+                >
+                    <Text>HEY</Text>
+                </Spring>
+            </View>
+            :<></>}
+            {full_leaderboard ?
+            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'flex-end', backgroundColor:Colors.shades.black_faded }}>
+                <Spring
+                    slide='vertical'
+                    to={0}
+                    from={500}
+                    style={{ maxHeight:height }}
+                >
+                    <CampaignLeaderboard
+                        height={height}
+                        poll_campaign={poll_campaign}
+                        view_mode='full'
+                        onClose={() => setFullLeaderboard(false)}
+                    />
+                </Spring>
+            </View>
+            :<></>}
+        </View>
+    )
+    
 
 }
 

package/src/types.d.ts

@@ -116,6 +116,7 @@ export interface EventProps {
     external_id:string,
     away_team_id: string,
     away?:TeamProps
+    sponsor_id?:string,
     away_sub_title?:string,
     home_team_id:string,
     home?:TeamProps,