be-components 0.7.3 → 0.7.5

package/src/Poll/components/CampaignProgressBar.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { FlatList, TouchableOpacity, View } from "react-native"
+import { useState } from "react"
+import type { PollCampaignProps, PollProps, PollResponseProps } from '../../types';
+import Colors from '../../constants/colors';
+import { Icons, Text } from '../../Components';
+
+type CampaignProgressBarProps = {
+    poll_campaign:PollCampaignProps,
+    polls:PollProps[],
+    poll_responses:PollResponseProps[],
+    active_poll:string,
+    onPollSelect:(poll:PollProps) => void
+}
+
+const CampaignProgressBar = ({ poll_responses, active_poll, polls, onPollSelect}:CampaignProgressBarProps) => {
+    const [ progress_width, setProgressWidth ] = useState(0)
+    
+    const getBarColor = (pr:PollResponseProps) => {
+        switch(pr.result_ind){
+            case 'win': return Colors.utility.success
+            case 'lose': return Colors.utility.error
+            default: return Colors.utility.warning
+        }
+    }
+    
+    const renderProgress = (data: {item: PollProps, index:number }) => {
+        let width = progress_width / polls.length
+        let color = Colors.shades.white
+        let response = poll_responses.find(pr => pr.poll_id == data.item.poll_id)
+        if(response){ color = getBarColor(response) }
+
+        const active = active_poll == data.item.poll_id ? true : false
+        return (
+            <TouchableOpacity
+                onPress={() => onPollSelect(data.item)} 
+                style={{ margin:2, borderWidth:active?2:0, borderColor:Colors.brand.midnight, borderRadius:4, height:20, width: width - 4, backgroundColor:color }} 
+            />
+        )
+    }
+
+    const questions_answered = poll_responses.length
+    const questions_unanswered = polls.length - questions_answered
+
+    return (
+        <View style={{ flexDirection:'row', alignItems:'center' }}>
+            <View nativeID="questions_answered" style={{ flexDirection:'row', alignItems:'center', margin:5, borderRadius:4, backgroundColor:Colors.highlights.highlight400, padding:5 }}>
+                <Icons.UserIcon color={Colors.shades.white} size={12} />
+                <Text style={{ marginLeft:5 }} size={12} color={Colors.shades.white} weight='semibold'>{questions_answered}</Text>
+            </View>
+            <View nativeID="progress_bar" style={{ flex:1 }} onLayout={(ev) => {
+                const { width } = ev.nativeEvent.layout;
+                setProgressWidth(width)
+            }}>
+                <FlatList
+                    data={polls}
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    renderItem={renderProgress}
+                />
+            </View>
+            <View nativeID="questions_answered" style={{ flexDirection:'row', alignItems:'center', margin:5, borderRadius:4, backgroundColor:Colors.utility.warning, padding:5 }}>
+                <Icons.ListIcon color={Colors.shades.white} size={12} />
+                <Text style={{ marginLeft:5 }} size={12} color={Colors.shades.white} weight='semibold'>{questions_unanswered}</Text>
+            </View>
+        </View>
+    )
+}
+
+export default CampaignProgressBar

package/src/Poll/components/CampaignResult.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { FlatList, Image, ScrollView, TouchableOpacity, View } from "react-native"
+import { useEffect, useState } from "react"
+import { PollCampaignApi } from "../api"
+import type { PollCampaignLeaderProps, PollCampaignProps, PollProps, PollResponseProps, PublicPlayerProps } from "../../types"
+import { Button, Icons, Text } from "../../Components"
+import Colors from '../../constants/colors';
+
+type CampaignResultProps = {
+    poll_campaign:PollCampaignProps,
+    polls:PollProps[],
+    onShare?:() => void,
+    hide_back?:boolean,
+    poll_responses:PollResponseProps[],
+    onClose: () => void
+}
+const CampaignResult = ({ poll_campaign, polls, poll_responses, hide_back, onClose, onShare } : CampaignResultProps) => {
+    const [ leaders_state, setLeadersState ] = useState<{
+        loading:boolean,
+        offset:number,
+        players:PublicPlayerProps[]
+        poll_campaign_leaders:PollCampaignLeaderProps[]
+    }>({ 
+        loading:false, 
+        offset:0,
+        poll_campaign_leaders:[],
+        players: []
+    });
+    const [ points_expanded, setPointsExpanded ] = useState(false);
+
+    const { players, poll_campaign_leaders } = leaders_state;
+
+    useEffect(() => {
+        getDataFromServer(poll_campaign.poll_campaign_id, 0)
+    },[poll_campaign.poll_campaign_id])
+
+    const getDataFromServer = async(poll_campaign_id:string, offset:number) => {
+        setLeadersState({ ...leaders_state, loading:true })
+        const leaders = await PollCampaignApi.getLeadersByCampaignId(poll_campaign_id, offset)
+        const player_ids = leaders.map(l => l.player_id);
+        const ps = await PollCampaignApi.getPlayersByPlayerIds(player_ids);
+        setLeadersState({ 
+            loading:false,
+            poll_campaign_leaders: leaders,
+            players: ps,
+            offset
+        })
+    }
+
+    const renderTrophy = (place:number) => {
+        switch(place){
+            case 1: return <Icons.TrophyIcon color={Colors.incentive.gold} size={16}/>
+            case 2: return <Icons.TrophyIcon color={Colors.incentive.silver} size={16}/>
+            case 3: return <Icons.TrophyIcon color={Colors.incentive.bronze} size={16}/>
+            default: return <></>
+        }
+    }
+
+    const renderLeaders = (data: {item:PollCampaignLeaderProps, index:number}) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        if(!player){ return <></> }
+        return (
+            <View style={{ flexDirection:'row', alignItems:'center', margin:4, padding:10, borderRadius:22, backgroundColor:Colors.shades.white }}>
+                <View nativeID="place" style={{ margin:5, height:20, width:20, justifyContent:'center', alignItems:'center', borderRadius:100, borderWidth:1, borderColor:Colors.brand.slate }}>
+                    <Text size={10} color={Colors.brand.midnight} weight='bold' textAlign="center">{data.index+1}</Text>
+                </View>
+                <View nativeID="player" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    <View nativeID="profile_pic" style={{ marginRight:10 }}>
+                        <Image
+                            source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1689262384/default-avatar_bbkn2t.png' }}
+                            style={{ height:40, width:40, borderRadius:100 }}
+                            resizeMode='cover'
+                        />
+                    </View>
+                    <View style={{ flex:1 }} nativeID="name">
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{player.username}</Text>
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{data.item.winnings.toFixed(2)} Points</Text>
+                    </View>
+                    <View>
+                        {renderTrophy(data.index + 1)}
+                    </View>
+                </View>
+            </View>
+        )
+    }
+
+
+    //const questions_answered = poll_responses.length
+    let correct_answers = poll_responses.filter(pr => pr.result_ind == 'win').length
+    //let incorrect_answers = poll_responses.filter(pr => pr.result_ind == 'lose').length
+    let ungraded_answers = poll_responses.filter(pr => !pr.result_ind).length
+    let points_earned = poll_responses.reduce((a,b) => a + b.winnings, 0)
+
+    return (
+        <View style={{ flex:1 }}>
+            <ScrollView style={{ flex:1, padding:10, marginBottom:10 }}>
+                <TouchableOpacity 
+                    style={{ flexDirection:'row', padding:10, paddingRight:15, paddingLeft:15, borderRadius:22, justifyContent:'center', alignItems:'center', marginBottom:10, backgroundColor:Colors.incentive.gold }}
+                    onPress={() => {
+                        if(onShare){ onShare() }
+                    }}
+                    >
+                    <Icons.ShareSocialIcon color={Colors.shades.white} size={14}/>
+                    <Text style={{ marginLeft:5 }} size={14} color={Colors.shades.white} weight='bold'>Share your results for a chance at a prize!</Text>
+                </TouchableOpacity>
+                <View nativeID="my_results">
+                    <Text style={{ margin:10 }} size={16} color={Colors.brand.midnight} weight='bold'>My Results</Text>
+                    <View style={{borderRadius:22, backgroundColor:Colors.shades.shade100, padding:20}}>
+                        <View nativeID="completion" style={{ flexDirection: 'row' }}>
+                            <View nativeID="total_questions" style={{ flex:1 }}>
+                                <Text size={12} color={Colors.brand.slate} weight='semibold'>TOTAL QUESTIONS</Text>
+                                <Text style={{ marginTop:5 }} size={16} color={Colors.brand.midnight} weight='bold'>{polls.length} Questions</Text>
+                            </View>
+                            <View nativeID="completion_pct" style={{ flex:1 }}>
+                                <Text size={12} color={Colors.brand.slate} weight='semibold'>COMPLETION</Text>
+                                <Text style={{ marginTop:5 }} size={16} color={Colors.brand.midnight} weight='bold'>{(((polls.length - ungraded_answers) / polls.length) * 100).toFixed()}%</Text>
+                            </View>
+                        </View>
+                        <View nativeID="performance" style={{ flexDirection: 'row', marginTop:10 }}>
+                            <View nativeID="total_questions" style={{ flex:1 }}>
+                                <Text size={12} color={Colors.brand.slate} weight='semibold'>SUCCESS RATE</Text>
+                                <Text style={{ marginTop:5 }} size={16} color={Colors.brand.midnight} weight='bold'>{((correct_answers / polls.length)*100).toFixed()}%</Text>
+                            </View>
+                            <View nativeID="completion_pct" style={{ flex:1 }}>
+                                <Text size={12} color={Colors.brand.slate} weight='semibold'>POINTS EARNED</Text>
+                                <Text style={{ marginTop:5 }} size={16} color={Colors.brand.midnight} weight='bold'>{points_earned.toFixed()} Points</Text>
+                            </View>
+                        </View>
+                        <View style={{ borderRadius:22, backgroundColor:Colors.highlights.highlight200Faded, padding:10, marginTop:10 }}>
+                            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setPointsExpanded(!points_expanded)}>
+                                <View style={{ flexDirection:'row', alignItems:'center', flex:1 }}>
+                                    <Icons.AlertIcon color={Colors.brand.midnight} size={14}/>
+                                    <Text style={{ marginLeft:5 }} size={14} color={Colors.brand.midnight} weight='semibold'>How are points calculated?</Text>
+                                </View>
+                                <Icons.ChevronIcon direction={points_expanded ? 'up' : 'down'} color={Colors.brand.midnight}/>
+                            </TouchableOpacity>
+                            {points_expanded ?
+                            <>
+                                <Text size={12} color={Colors.brand.midnight} style={{ marginTop:10 }} weight='regular'>Points are calculated based on the total responses by all participants.  Each response is worth 1 point.  The responders that selected the winning option will split the total point pool.</Text>
+                                <Text size={12} color={Colors.brand.midnight} style={{ marginTop:5 }} weight='regular'>Therefore, points earned will not be updated until the question is closed!</Text>
+                            </>
+                            :<></>}
+                        </View>
+                    </View>
+                </View>
+                <View nativeID="leader_header" style={{ margin:10, flexDirection:'row', alignItems:'center' }}>
+                    <Text style={{ flex:1 }} size={16} color={Colors.brand.midnight} weight='bold'>Leaderboard</Text>
+                    <View style={{ borderRadius:22, padding:10, backgroundColor:Colors.accents.accent100 }}>
+                        <Text size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">{poll_campaign.total_responders} Participants</Text>
+                    </View>
+                </View>
+                <View nativeID="leaderboard" style={{ flex:1, borderTopRightRadius:22, borderTopLeftRadius:22, padding:10, backgroundColor:Colors.shades.shade100}}>
+                    {poll_campaign.status == 'active' ?
+                    <Text size={12} color={Colors.utility.warning} textAlign="center">Points change as new responses come in</Text>
+                    :<></>}
+                    <FlatList
+                        data={poll_campaign_leaders}
+                        renderItem={renderLeaders}
+                        keyExtractor={((item) => item.player_id.toString())}
+                    />
+                </View>
+            </ScrollView>
+            {!hide_back ?
+            <View nativeID="result_actions" style={{ marginTop:5, padding:10 }}>
+                <Button
+                    title='Go Back'
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    padding={14}
+                    borderColor={Colors.brand.electric}
+                    onPress={() => onClose()}
+                    borderRadius={22}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default CampaignResult

package/src/Poll/components/CampaignSelector.tsx

@@ -0,0 +1,96 @@
+import { ActivityIndicator, FlatList, ScrollView, View } from "react-native"
+
+import React, { useEffect, useState } from "react"
+
+import PollCampaignCard from "./PollCampaignCard";
+import type { PollCampaignProps } from "../../types";
+import { PollCampaignApi } from "../api";
+import { Button, Text } from "../../Components";
+import Colors from "../../constants/colors";
+import moment from "moment-mini";
+
+type CampaignSelectorProps = {
+    company_short_name:string,
+    onCampaignSelect:(poll_campaign: PollCampaignProps) => void;
+}
+
+const CampaignSelector = ({ company_short_name, onCampaignSelect } : CampaignSelectorProps ) => {
+    const [ data, setData ] = useState<{
+        loading:boolean,
+        campaign_offset:number,
+        poll_campaigns:PollCampaignProps[]
+    }>({
+        loading:false,
+        campaign_offset:0,
+        poll_campaigns:[]
+    })
+    const [ selected_campaign, setSelectedCampaign ] = useState<PollCampaignProps | undefined>(undefined);
+    //Poll campaigns from redux store
+    const { loading, poll_campaigns } = data;
+
+    useEffect(() => {
+        getPollCampaignFromServer(company_short_name, 0)
+    },[company_short_name])
+
+    const getPollCampaignFromServer = async(code:string, offset:number) => {
+        setData({ ...data, loading:false });
+        const pcs = await PollCampaignApi.getPollCampaignsByCompanyCode(code, offset, 'active');
+        setData({
+            ...data,
+            campaign_offset:offset,
+            poll_campaigns: pcs
+        })
+    }
+
+
+    const renderPollCampaigns = (data:{ item:PollCampaignProps, index:number }) => {
+        const selected = selected_campaign?.poll_campaign_id == data.item.poll_campaign_id ? true : false
+        return (
+            <View style={{ margin:10, width:125 }}>
+                <PollCampaignCard
+                    selected={selected}
+                    poll_campaign={data.item}
+                    onSelect={(poll_campaign) => {
+                        if(selected){ setSelectedCampaign(undefined) } else { setSelectedCampaign(poll_campaign) }
+                    }}
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ flex:1, backgroundColor:Colors.shades.white, borderRadius:22 }}>
+            <ScrollView style={{ flex:1 }}>
+                <Text style={{ padding:10 }} textAlign="center" size={24} color={Colors.brand.midnight} weight='bold'>Select One!</Text>
+                <View nativeID="poll_campaigns" style={{ alignItems:'center' }}>
+                    <FlatList
+                        numColumns={2}
+                        data={poll_campaigns.sort((a,b) => moment(b.create_datetime).unix() - moment(a.create_datetime).unix())}
+                        renderItem={renderPollCampaigns}
+                    />
+                    {loading ?
+                    <View style={{ padding:20 }}>
+                        <ActivityIndicator style={{ alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
+                    </View>
+                    :<></>}
+                </View>
+            </ScrollView>
+            <View style={{ padding:10, borderRadius:22 }}>
+                <Button
+                    padding={10}
+                    disabled={selected_campaign?false:true}
+                    title={!selected_campaign?'Select Campaign':`Lets Go!`}
+                    title_color={Colors.shades.white}
+                    backgroundColor={selected_campaign ? Colors.brand.midnight : Colors.brand.slate}
+                    borderRadius={22}
+                    onPress={() => {
+                        if(!selected_campaign){ return }
+                        onCampaignSelect(selected_campaign)
+                    }}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default CampaignSelector

package/src/Poll/components/PollCampaignCard.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Image, TouchableOpacity, View } from "react-native"
+import type { PollCampaignProps } from "../../types"
+import { Text } from '../../Components';
+import Colors from '../../constants/colors';
+
+type PollCampaignCardProps = {
+    poll_campaign: PollCampaignProps,
+    selected?:boolean,
+    onSelect: (poll_campaign:PollCampaignProps) => void
+}
+
+const PollCampaignCard = ({ poll_campaign, onSelect, selected }: PollCampaignCardProps) => {
+
+    return (
+            <TouchableOpacity style={{  flex:1, padding:10, borderRadius:22, backgroundColor:selected?Colors.brand.midnight:Colors.shades.shade100 }}
+                onPress={() => onSelect(poll_campaign)}>
+                <View nativeID='campaign_details'>
+                    {poll_campaign.campaign_image?.url?
+                    <View style={{ justifyContent:'center', alignItems:'center', marginBottom:10 }}>
+                        <Image
+                            source={{ uri: poll_campaign.campaign_image.url }}
+                            style={{ height:35, width:50, borderRadius:8 }}
+                        />
+                    </View>
+                    :<></>}
+                    <Text textAlign="center" size={12} color={selected?Colors.shades.white:Colors.brand.midnight} weight='bold'>{poll_campaign.name}</Text>
+                    <Text style={{ marginTop:5 }} textAlign="center" size={10} color={selected?Colors.shades.white:Colors.brand.midnight} weight='bold'>{poll_campaign.campaign_type.toUpperCase()}</Text>
+                    <Text style={{ marginTop:5 }} textAlign="center" size={10} color={selected?Colors.shades.white:Colors.brand.midnight} weight='regular'>{poll_campaign.total_polls??0} Questions</Text>
+                </View>
+            </TouchableOpacity>
+    )
+}
+
+export default PollCampaignCard