be-components 4.2.0 → 4.2.2

package/src/Poll/components/PollSelectCard.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TouchableOpacity, View } from "react-native"
 import type { PollCampaignProps, PollOptionProps, PollProps, PollResponseProps } from "../../types"
-import Colors from "../../constants/colors"
-import { Icons, Text } from "../../Components"
+import { Icons } from "../../Components"
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 type PollSelectCardProps = {
     selected?:boolean,
@@ -15,29 +15,28 @@ type PollSelectCardProps = {
     onSelect:(poll:PollProps) => void
 }
 
-const PollSelectCard = ({ poll, disabled, selected, poll_campaign, poll_response, show_response, response_option, onSelect }:PollSelectCardProps) => {
-
+const PollSelectCard = ({ poll, disabled, poll_campaign, poll_response, show_response, response_option, onSelect }:PollSelectCardProps) => {
+    const Colors = useColors();
     const getResultColor = () => {
         switch(poll_response?.result_ind){
-            case 'win': return Colors.utility.success
-            case 'lose': return Colors.utility.error
-            case 'draw': return Colors.utility.warning
-            default: return Colors.brand.slate
+            case 'win': return Colors.text.success
+            case 'lose': return Colors.text.error
+            case 'draw': return Colors.text.warning
+            default: return Colors.text.h1
         }
     }
 
     const getStatusColor = () => {
         switch(poll.status) {
-            case 'closed': return Colors.highlights.highlight300Faded
-            case 'active': return Colors.highlights.highlight400Faded
-            default: return Colors.highlights.highlight500Faded
+            case 'closed': return Colors.absolutes.highlights.highlight300Faded
+            case 'active': return Colors.absolutes.highlights.highlight400Faded
+            default: return Colors.absolutes.highlights.highlight500Faded
         }
     }
 
 
     const getResultIcon = () => {
         let color = getResultColor()
-        console.log(poll_response)
         switch(poll_response?.result_ind){
             case 'win':
                 return <Icons.CheckIcon color={color} size={16} />
@@ -56,51 +55,51 @@ const PollSelectCard = ({ poll, disabled, selected, poll_campaign, poll_response
         //let color = getResultColor()
         switch(poll.status){
             case 'closed':
-                return <Icons.LockClosedIcon color={Colors.brand.midnight} size={14} />
+                return <Icons.LockClosedIcon color={Colors.text.h1} size={14} />
             case 'active':
-                return <Icons.InProgressIcon color={Colors.brand.midnight} size={14} />
+                return <Icons.InProgressIcon color={Colors.text.h1} size={14} />
             default:
-                return <Icons.PausedIcon color={Colors.brand.midnight} size={14} />
+                return <Icons.PausedIcon color={Colors.text.h1} size={14} />
         }
     }
 
     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'>{poll.priority}</Text>
-        </View>
-        <View style={{ flex:1 }}>
-            {poll_campaign.campaign_type == 'trivia' && !poll_response && poll.status != 'closed' ? 
-            <Text size={14} color={Colors.brand.midnight} weight='bold'>{poll.hidden_clue?`Hint: ${poll.hidden_clue}`:`Question Hidden`}</Text>
-            :
-            <Text size={14} color={Colors.brand.midnight} weight='bold'>{poll.poll_question}</Text>
-            }
-            {poll.status == 'closed' || show_response ?
-            <View style={{ marginTop:10, flexDirection:'row' }}>
-                {response_option && poll.poll_type == 'select' ?
-                <Text style={{ flex:1 }} size={12} color={Colors.brand.slate}>My Answer: <Text size={12} color={Colors.brand.midnight} weight='semibold'>{response_option.option_name}</Text></Text>
-                : response_option && poll.poll_type == 'input' ?
-                <Text style={{ flex:1 }} size={12} color={Colors.brand.slate}>My Answer: <Text size={12} color={Colors.brand.midnight} weight='semibold'>{poll_response?.input_value}</Text></Text>
-                :poll.status == 'closed' || poll_response?.timed_out ?
-                <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='light'>TIMED OUT</Text>
-                :<></>}
-                <View style={{ marginLeft:5 }}>
-                    {getResultIcon()}
-                </View>
+        <Button transparent disabled={disabled} style={{ padding:10, borderRadius:22, flexDirection:'row' }} onPress={() => onSelect(poll)}>
+            <View transparent style={{ height:20, width:20, borderRadius:100, marginRight:10, justifyContent:'center' }}>
+                <Text size={12} color={Colors.text.h1} weight='bold' textAlign='center'>{poll.priority}</Text>
             </View>
-            :
-            <View style={{flexDirection:'row', alignItems:'center'}}>
-                <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='light'>{poll.poll_type == 'select' ? 'Multiple Choice': 'Type Answer'}</Text>
-                <View style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:getStatusColor(), borderRadius:22 }}>
-                    {getStatusIcon()}
-                    {poll.seconds_allowed && poll.status != 'closed' ? 
-                    <Text style={{ marginLeft:5 }} size={12} color={Colors.brand.midnight} weight='bold'>{poll.seconds_allowed} Sec</Text>
+            <View transparent style={{ flex:1 }}>
+                {poll_campaign.campaign_type == 'trivia' && !poll_response && poll.status != 'closed' ? 
+                <Text size={14} color={Colors.text.h1} weight='bold'>{poll.hidden_clue?`Hint: ${poll.hidden_clue}`:`Question Hidden`}</Text>
+                :
+                <Text size={14} color={Colors.text.h1} weight='bold'>{poll.poll_question}</Text>
+                }
+                {poll.status == 'closed' || show_response ?
+                <View transparent style={{ marginTop:10, flexDirection:'row' }}>
+                    {response_option && poll.poll_type == 'select' ?
+                    <Text style={{ flex:1 }} size={12} color={Colors.text.h1}>My Answer: <Text size={12} color={Colors.text.h1} theme='h2'>{response_option.option_name}</Text></Text>
+                    : response_option && poll.poll_type == 'input' ?
+                    <Text style={{ flex:1 }} size={12} color={Colors.text.h1}>My Answer: <Text size={12} color={Colors.text.h1} theme='h2'>{poll_response?.input_value}</Text></Text>
+                    :poll.status == 'closed' || poll_response?.timed_out ?
+                    <Text style={{ flex:1 }} size={12} color={Colors.text.h1} weight='light'>TIMED OUT</Text>
                     :<></>}
+                    <View style={{ marginLeft:5 }}>
+                        {getResultIcon()}
+                    </View>
                 </View>
+                :
+                <View transparent style={{flexDirection:'row', alignItems:'center'}}>
+                    <Text style={{ flex:1 }} size={12} color={Colors.text.h1} weight='light'>{poll.poll_type == 'select' ? 'Multiple Choice': 'Type Answer'}</Text>
+                    <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:getStatusColor(), borderRadius:22 }}>
+                        {getStatusIcon()}
+                        {poll.seconds_allowed && poll.status != 'closed' ? 
+                        <Text style={{ marginLeft:5 }} size={12} color={Colors.text.h1} weight='bold'>{poll.seconds_allowed} Sec</Text>
+                        :<></>}
+                    </View>
+                </View>
+                }
             </View>
-            }
-        </View>
-    </TouchableOpacity>
+        </Button>
     )
 }
 

package/src/Poll/index.tsx

@@ -1,33 +1,31 @@
 import React, { useEffect, useState } from 'react';
 import { PollApi, PollCampaignApi, PollResponseApi } from './api';
-import { View, ScrollView, ActivityIndicator } from 'react-native';
+import { FlatList, Modal, useWindowDimensions, Alert } from 'react-native';
 import type { BEEventProps, PollCampaignGoalProps, PollCampaignProps, PollOptionProps, 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 } from '../Components';
-//import PollCard from './components/PollCard';
 import CampaignResult from './components/CampaignResult';
 import CampaignLeaderboard from './components/CampaignLeaderboard';
 import PollCard from './components/PollCard';
 import SocketManager from '../Socket';
+import { View } from '../Components/Themed';
 
 type PollCampaignModuleProps = {
     poll_campaign_id:string,
     poll_id?:string,
     player_id?:string,
     distinct_id:string,
-    height:number,
     onEvent?:(be_event:BEEventProps) => void,
     onRequestAuthenticate: (auth_strategy_id?:string, company_id?:string) => void,
     onSharePollCampaign: (poll_campaign:PollCampaignProps) => void,
     onComplete:() => void
 }
-const PollCampaign = ({ height, distinct_id, poll_campaign_id, player_id, onRequestAuthenticate }: PollCampaignModuleProps ) => {
+
+const sections = ['header', 'progress', 'results','questions']
+const PollCampaign = ({ distinct_id, poll_campaign_id, player_id, onRequestAuthenticate }: PollCampaignModuleProps ) => {
     const [ needs_reload, setNeedsReload ] = useState(false);
     const [ socket_polls, setSocketPolls ] = useState<PollProps[]>([]);
-    //const [ socket_poll_options, setSocketPollOptions ] = useState<PollOptionProps[]>([]);
     const [ socket_campaign, setSocketCampaign ] = useState<PollCampaignProps|undefined>(undefined);
     const [ module_data, setModuleData ] = useState<{
         loading: boolean,
@@ -49,10 +47,10 @@ const PollCampaign = ({ height, distinct_id, poll_campaign_id, player_id, onRequ
         poll_responses: []
     });
     const { poll_responses, action_loading } = my_data;
-    const { poll_campaign, polls, active_poll_id } = module_data;
+    const { loading, poll_campaign, polls, active_poll_id } = module_data;
     const active_response = poll_responses.find(r => r.poll_id == active_poll_id);
-    const active_polls = polls.filter(p => p.status != 'inactive').sort((a,b) => a.priority - b.priority);
-
+    const active_polls = polls.filter(p => !['inactive'].includes(p.status)).sort((a,b) => a.priority - b.priority);
+    const { width } = useWindowDimensions();
     useEffect(() => {
         PollCampaignApi.setEnvironment();
         getDataFromServer();
@@ -75,7 +73,6 @@ const PollCampaign = ({ height, distinct_id, poll_campaign_id, player_id, onRequ
     },[socket_campaign]);
 
     const getDataFromServer = async() => {
-        console.log('RELOADING DATA!!!')
         setModuleData({ ...module_data, loading:true });
         const pc = await PollCampaignApi.getPollCampaignById(poll_campaign_id);
         const ps_resp = await PollApi.getPollsByCampaignId(poll_campaign_id);
@@ -122,89 +119,102 @@ const PollCampaign = ({ height, distinct_id, poll_campaign_id, player_id, onRequ
         setModuleData({ ...module_data, active_poll_id: new_poll.poll_id })
     }
 
-    if(!poll_campaign){
-        return (
-            <View style={{ flex:1 }}>
-                <ActivityIndicator
-                    style={{ padding:20, alignSelf:'center' }}
-                    size='large'
-                    color={Colors.brand.midnight}
-                />
-            </View>
-        )
-    }
-
-    return (
-        <View style={{ backgroundColor:Colors.shades.white, height }}>
-            <CampaignHeader
-                poll_campaign={poll_campaign}
-                onSharePollCampaign={(pc) => console.log(pc)}
-            />
-            <ScrollView style={{ flex:1 }}>
-                <View style={{ backgroundColor:Colors.shades.shade100 }}>
-                    <CampaignProgressBar
-                        poll_campaign={poll_campaign}
-                        polls={active_polls}
-                        active_poll='0'
-                        onPollSelect={(p) => console.log(p)}
-                        poll_responses={poll_responses}
-                    />
-                </View>
-                <View nativeID='leaderboard'>
-                    <CampaignResult
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                if(!poll_campaign){ return <></> }
+                return (
+                    <CampaignHeader
                         poll_campaign={poll_campaign}
-                        onShowFullLeaderboard={() => setFullLeaderboard(true)}
+                        onSharePollCampaign={(pc) => console.log(pc)}
                     />
-                </View>
-                <View nativeID='poll_questions'>
+                )
+            case 'progress': 
+                if(!poll_campaign){ return <></> }
+                return (
+                    <View type='header' style={{ padding:10 }}>
+                        <CampaignProgressBar
+                            poll_campaign={poll_campaign}
+                            polls={active_polls}
+                            active_poll={active_poll_id ?? '0'}
+                            onPollSelect={(p) => console.log(p)}
+                            poll_responses={poll_responses}
+                        />
+                    </View>
+                )
+            case 'results':
+                if(!poll_campaign){ return <></> }
+                return (
+                    <View style={{ padding:10 }}>
+                        <CampaignResult
+                            poll_campaign={poll_campaign}
+                            onShowFullLeaderboard={() => setFullLeaderboard(true)}
+                        />
+                    </View>
+                )
+            case 'questions':
+                if(!poll_campaign){ return <></> }
+                return (
+                    <View style={{ padding:10 }}>
                         <PollQuestionsSection
                             poll_campaign={poll_campaign}
                             polls={active_polls}
                             poll_responses={poll_responses}
                             onSelectPoll={(p) => {
                                 if(!player_id){ return onRequestAuthenticate(poll_campaign.auth_strategy_id, poll_campaign.company_id) }
-                                if(p.status == 'paused'){ return alert('This question is currently paused. Please open when it becomes active') }
+                                if(['paused','pending','inactive'].includes(p.status)){ return Alert.alert('This question is not active. Please open when it becomes active') }
                                 setModuleData({ ...module_data, active_poll_id: p.poll_id })
                             }}
                         />
-                </View>
-            </ScrollView>
-            {active_poll_id ?
-            <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 }}
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+
+
+    return (
+        <View style={{ flex:1 }}>
+            <FlatList
+                data={sections}
+                refreshing={loading}
+                onRefresh={() => getDataFromServer()}
+                key='poll_sections'
+                keyExtractor={item => item}
+                renderItem={renderSections}
+            />
+            <Modal
+                style={{ flex:1 }}
+                animationType='slide'
+                transparent
+                visible={active_poll_id ? true : false}
                 >
+                <View type='blur' style={{ flex:1, justifyContent:'flex-end', padding:12 }}>
                     <PollCard
                         poll_id={active_poll_id}
                         action_loading={action_loading}
                         poll_response={active_response}
+                        width={width}
                         onSkip={() => handleNext()}
                         onCancel={() => setModuleData({ ...module_data, active_poll_id: undefined })}
                         onResponse={(response) => handleSubmitResponse(response)}
                         onShowAuthenticate={() => console.log('authenticate!!')}
                     />
-                </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>
+            </Modal>
+            {full_leaderboard && poll_campaign ?
+            <Modal
+                transparent
+                visible={full_leaderboard?true:false}
+                style={{ flex:1 }}
+            >
+                <CampaignLeaderboard
+                    poll_campaign={poll_campaign}
+                    view_mode='full'
+                    onClose={() => setFullLeaderboard(false)}
+                />
+            </Modal>
             :<></>}
             <SocketManager 
                 onConnect={() => {

package/src/Squares/index.tsx

@@ -23,6 +23,7 @@ import { useColors } from "../constants/useColors";
 type SquaresModuleProps = {
     player_id?:string,
     distinct_id:string,
+    view_mode:'desktop'|'mobile',
     sq_comp_id:string,
     insets?: { top:number, bottom:number },
     onRequestAuthenticate: (auth_strategy_id?:string) => void,
@@ -33,7 +34,7 @@ type SquaresModuleProps = {
 
 const squares_sections = ['header', 'toggle', 'event', 'board', 'board_stats', 'my_stats', 'results', 'my_squares', 'winners','hidden_prizes','details', 'owners']
 
-const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAuthenticate, onShareCompetition, onPlayerSelect }:SquaresModuleProps) => {
+const SquaresModule = ({ sq_comp_id, view_mode, insets, player_id, distinct_id, onRequestAuthenticate, onShareCompetition, onPlayerSelect }:SquaresModuleProps) => {
     const C = useColors();
     const [ active_tab, setActiveTab ] = useState('board');
     const [ needs_reload, setNeedsReload ] = useState(false);
@@ -354,7 +355,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                 )
             case 'toggle':
                 return (
-                    <View style={{ padding:8 }}>
+                    <View style={{ padding:8, width:view_mode == 'desktop'?800: undefined, alignSelf:view_mode == 'desktop'?'center':undefined }}>
                         <Toggle
                             options={toggle_options}
                             active_toggle_color={C.text.action}
@@ -377,13 +378,14 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
             case 'board_stats':
                 if(!squares_competition){ return <></> }
                 return (
-                    <BoardStats
-                        hidden={active_tab == 'stats' ? false : true}
-                        disable_collapse
-                        squares_competition={squares_competition}
-                        squares={squares}
-                        player_squares={player_squares}
-                    />
+                        <BoardStats
+                            hidden={active_tab == 'stats' ? false : true}
+                            disable_collapse
+                            squares_competition={squares_competition}
+                            squares={squares}
+                            player_squares={player_squares}
+                        />
+
                 )
             case 'my_stats':
                 if(!squares_competition){ return <></> }
@@ -421,6 +423,8 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                 )
             case 'hidden_prizes':
                 return (
+                    <View style={{ padding:10 }}>
+
                     <PrizeCard 
                         square_prizes={square_prizes}
                         squares={squares}
@@ -429,6 +433,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                         players={players}
                         event={event}
                     />
+                    </View>
                 )
             case 'details':
                 if(!squares_competition){ return <></> }
@@ -440,6 +445,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                         squares_payout_type={squares_payout_type}
                         squares_type={squares_type}
                     />
+                    
                 )
             case 'owners':
                 return (
@@ -453,7 +459,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
             case 'board':
                 if(!squares_competition){ return <></> }
                 return (
-                    <View style={{ paddingBottom:20 }}>
+                    <View style={{ alignItems:view_mode == 'desktop' ? 'center': undefined }}>
                         <SquaresBoard 
                             player_id={player_id}
                             hidden={active_tab == 'board' ? false : true}
@@ -476,6 +482,8 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
             case 'my_squares':
                 if(my_squares.length == 0){ return <></> }
                 return (
+                    <View style={{ padding:10 }}>
+
                     <MySquaresCard
                         player_squares={my_squares}
                         hidden={active_tab == 'my_squares' ? false : true}
@@ -488,6 +496,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                         comp_status={comp_status}
                         onSquareOffer={handleSquareOffer}
                     />
+                    </View>
                 )
             default: return <></>
         }
@@ -507,13 +516,12 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
             const { width, height } = ev.nativeEvent.layout
             setModuleSize({ width, height })
         }}>
-            <FlatList
-                key='squares_section'
-                data={squares_sections}
-                renderItem={renderSections}
-                keyExtractor={(item) => item}
-            />
-            
+                <FlatList
+                    key='squares_section'
+                    data={squares_sections}
+                    renderItem={renderSections}
+                    keyExtractor={(item) => item}
+                />            
             {square_offers.length > 0 ?
             <SquareOffersCard
                 player_squares={player_squares}
@@ -552,9 +560,10 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
             <Modal
                 transparent
                 visible={bid_form_expanded}
-                animationType='slide'
+                animationType={view_mode=='desktop' ? 'fade' : 'slide'}
             >
-            <View type='blur' style={{ flex:1, justifyContent:'flex-end', paddingBottom:insets?.bottom }}>
+            <View type='blur' style={view_mode=='desktop'?{ flex:1, justifyContent:'center', alignItems:'center' }:{ flex:1, justifyContent:'flex-end', paddingBottom:insets?.bottom }}>
+                <View style={view_mode=='desktop'?{ width:500 }:undefined}>
                 <BidForm
                     player_id={player_id}
                     player_balance={player_balance}
@@ -576,6 +585,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                     onSubmitBid={(promo_balance) => handleSubmitBid(promo_balance)}
                 />
                 </View>
+                </View>
             </Modal>
             <Modal
                 transparent