be-components 0.7.3 → 0.7.5

package/src/Poll/components/PollCard.tsx

@@ -0,0 +1,335 @@
+import React from 'react';
+import { ActivityIndicator, FlatList, Image, ScrollView, TouchableOpacity, View } from 'react-native';
+import { useEffect, useState } from 'react';
+import PollOptionCard from './PollOptionCard';
+import ResponseTimer from './ResponseTimer';
+import type { PollOptionProps, PollProps, PollResponseProps, PollSummaryProps } from '../../types';
+import { PollApi, PollResponseApi } from '../api';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+
+type PollCardProps = {
+    poll:PollProps,
+    question_number?:number,
+    onCancel:() => void,
+    view?:string,
+    onResponse:(response:PollResponseProps) => void,
+    total_questions?:number,
+    onShowAuthenticate: () => void,
+    onSkip: () => void,
+    onSeeResults?: () => void
+}
+
+const DEFAULT_POLL_STATE = { server_checked:false, responded:false, poll_response:undefined, poll_options:[], poll_summaries:[] }
+
+const PollCard = ({ poll, question_number, total_questions, onSkip, onCancel, onSeeResults, onResponse }: PollCardProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ submit_loading, setSubmitLoading ] = useState(false);
+    const [ poll_width, setPollWidth ] = useState(0);
+    const [ option_selected, setOptionSelected ] = useState<undefined|PollOptionProps>(undefined);
+    const [ poll_data, setPollData ] = useState<{
+        server_checked?:boolean,
+        responded:boolean,
+        poll_response?:PollResponseProps,
+        poll_options:PollOptionProps[],
+        poll_summaries:PollSummaryProps[]
+    }>({
+        server_checked:false,
+        responded:false,
+        poll_options:[],
+        poll_summaries:[]
+    })
+    const { poll_options, poll_summaries, poll_response, responded, server_checked } = poll_data;
+    const total_responses = poll_summaries.reduce((a,b) => a + b.count, 0)
+
+    const correct_option = poll_options.find(po => po.result_ind == 'win')
+    const selected_option = poll_options.find(po => po.poll_option_id == poll_response?.poll_option_id)
+
+    const last_question = question_number && total_questions && question_number == total_questions ? true : false
+   
+    useEffect(() => {
+        if(!poll){ return }
+        getPollFromServer(poll.poll_id)
+    },[poll])
+
+    const getPollFromServer = async(poll_id:string) => {
+        setLoading(true);
+        let poll_response = await PollResponseApi.getResponseByPollId(poll_id)
+        const pos_resp = await PollApi.getPollById(poll_id)
+        setPollData({
+            server_checked: true,
+            responded: poll_response ? true : false,
+            poll_response,
+            poll_options:pos_resp.poll_options,
+            poll_summaries: pos_resp.poll_summaries
+        })
+        setLoading(false);
+    }
+
+    const handleCancel = () => {
+        setOptionSelected(undefined)
+
+        onCancel()
+    }
+
+    const handleSkip = () => {
+        //if(!is_authenticated){ return onShowAuthenticate() }
+        setPollData(DEFAULT_POLL_STATE)
+        setOptionSelected(undefined)
+        if(last_question && onSeeResults){ return onSeeResults() }
+        onSkip()
+
+    }
+
+    const handleSubmitResponse = async() => {
+        //if(!is_authenticated){ return onShowAuthenticate() }
+        if(submit_loading){ return }
+        if(!poll || !server_checked || !option_selected){ return }
+        if(responded || poll_response){ return }
+        let option = poll_options.find(po => po.poll_option_id == option_selected.poll_option_id)
+        if(!option){ return }
+        //We are good to log the response!
+        let draft_response:PollResponseProps = {
+            poll_id:poll.poll_id,
+            poll_option_id:option.poll_option_id,
+            stake: poll.minimum_stake,
+            market_type: 'FREE',
+            poll_response_id: '',
+            player_id: '',
+            winnings: 0,
+            response_body: {},
+            status: 'pending',
+            create_datetime: '',
+            last_update_datetime: ''
+        }
+        if(option.option_type == 'input'){
+            draft_response.input_value = option_selected.option_value
+        }
+        try {
+            setSubmitLoading(true)
+            let poll_response = await PollResponseApi.createPollResponse(draft_response)
+            onResponse(poll_response)
+            setPollData({
+                ...poll_data,
+                server_checked: true,
+                responded: poll_response?true:false,
+                poll_response
+            })
+
+            setOptionSelected(undefined)
+            setSubmitLoading(false)
+        } catch (e) {
+            setSubmitLoading(false)
+            setOptionSelected(undefined)
+        }
+    }
+
+    const handleTimesUp = async() => {
+        if(option_selected){
+            return handleSubmitResponse()
+        }
+        if(!poll || poll.status != 'active'){ return }
+        if(!server_checked){ return }
+        if(responded){ return }
+        const draft_response:PollResponseProps = {
+            poll_id:poll.poll_id,
+            poll_option_id:'0',
+            stake: poll.minimum_stake,
+            market_type: 'FREE',
+            poll_response_id: '',
+            player_id: '',
+            winnings: 0,
+            timed_out: true,
+            response_body: {},
+            status: 'pending',
+            create_datetime: '',
+            last_update_datetime: ''
+        }
+        setSubmitLoading(true)
+        let poll_response = await PollResponseApi.createPollResponse(draft_response)
+        onResponse(poll_response);
+        setSubmitLoading(false)
+        setPollData({
+            ...poll_data,
+            server_checked: true,
+            responded: poll_response ? true : false,
+            poll_response
+        })
+    }
+
+    const renderPollOptions = (data: { item:PollOptionProps, index:number }) => {
+        const poll_summary = poll_summaries.find(ps => ps.poll_option_id == data.item.poll_option_id);
+        const draft_selected = option_selected?.poll_option_id == data.item.poll_option_id ? true : false;
+        return (
+            <View style={{ margin:5, flex:1 }}>
+                <PollOptionCard
+                    poll_summary={poll_summary}
+                    draft_selected={draft_selected}
+                    poll_response={poll_response}
+                    poll_option={data.item}
+                    show_summary={(server_checked && responded) && poll.show_responses ? true : false}
+                    onSelect={(poll_option) => {
+                        if(responded){ return }
+                        if(poll?.status !== 'active'){ return }
+                        if(draft_selected){ setOptionSelected(undefined) }
+                        else { setOptionSelected(poll_option)} }
+                    }
+                />
+            </View>
+        )
+    }
+
+    if(!poll){
+        return <></>
+    }
+    return (
+        <View nativeID='poll' style={{ flex:1 }} onLayout={(ev) => {
+            const { width } = ev.nativeEvent.layout
+            setPollWidth(width)
+        }}>
+            <ScrollView style={{ flex:1 }}>
+                {server_checked && !responded ?
+                <View nativeID='question_image'>
+                    {poll?.poll_image?.url ?
+                    <Image
+                        source={{ uri:poll.poll_image.url, width:poll_width, height: poll_width*0.5 }}
+                        resizeMode='contain'
+                    />
+                    :<></>}
+                </View>
+                :<></>}
+            <View nativeID='question_details' style={{padding:20}}>
+                {question_number ?
+                <View nativeID='question_progress' style={{ marginBottom:10, flexDirection:'row' }}>
+                    <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='semibold'>Question {question_number}{total_questions?` of ${total_questions}`:''}</Text>
+                </View>
+                :<></>}
+                <View nativeID='question' style={{ marginBottom:10 }}>
+                    <Text size={16} color={Colors.brand.midnight} weight='bold'>{poll.poll_question}</Text>
+                </View>
+            </View>
+            { poll.status == 'active' && server_checked && !responded ?
+            <View nativeID='question_respond_options' style={{ flex:1 }}>
+                <FlatList
+                    data={poll_options.sort((a,b) => a.priority - b.priority)}
+                    renderItem={renderPollOptions}
+                    numColumns={2}
+                    keyExtractor={(item) => item.poll_option_id.toString()}
+                />
+            </View>
+            : server_checked ?
+            <View nativeID='question_answer' style={{ flex:1 }}>
+                {selected_option ?
+                <View nativeID='selected_option' style={{ marginBottom:10, padding:10 }}>
+                    <Text style={{ marginBottom:5 }} size={14} color={Colors.brand.slate} weight='semibold'>MY SELECTED ANSWER</Text>
+                    <PollOptionCard
+                        show_result={true}
+                        show_summary={false}
+                        poll_response={poll_response}
+                        onSelect={() => console.log('Hey')}
+                        poll_option={selected_option}
+                    />
+                </View>
+                : (!responded || poll_response?.timed_out) ?
+                <View style={{ marginBottom:10, padding:10 }}>
+                    <Text style={{ marginBottom:5 }} size={14} color={Colors.brand.slate} weight='semibold'>MY SELECTED ANSWER</Text>
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, borderWidth:1, borderColor:Colors.utility.error }}>
+                        <Text style={{ flex:1 }} size={14} color={Colors.utility.error} textAlign='center' weight='semibold'>Timed Out</Text>
+                        <Icons.CloseIcon color={Colors.utility.error} size={12}/>
+                    </View>
+                </View>
+                :<></>}
+                {poll.poll_type == 'select' && correct_option ? 
+                <View nativeID='selected_option' style={{ marginBottom:10, padding:10 }}>
+                    <Text style={{ marginBottom:5 }} size={14} color={Colors.brand.slate} weight='semibold'>CORRECT ANSWER</Text>
+                    <PollOptionCard
+                        show_summary={false}
+                        show_result={true}
+                        onSelect={() => console.log('Hey')}
+                        poll_option={correct_option}
+                    />
+                </View>
+                :poll.poll_type == 'input' && poll.winning_value ?
+                <View style={{ marginBottom:10, padding:10 }}>
+                    <Text style={{ marginBottom:5 }} size={14} color={Colors.brand.slate} weight='semibold'>CORRECT ANSWER</Text>
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, borderWidth:1, borderColor:Colors.utility.success }}>
+                        <Text style={{ flex:1 }} size={14} color={Colors.utility.success} textAlign='center' weight='semibold'>{poll.winning_value}</Text>
+                        <Icons.CheckIcon color={Colors.utility.success} size={12}/>
+                    </View>
+                </View>
+                :<></>}
+                {poll.poll_type == 'select' ?
+                <View nativeID='option_results' style={{ backgroundColor:Colors.shades.shade100, padding:10, borderRadius:8 }}>
+                    <View style={{ flexDirection:'row', alignItems:'center', marginBottom:5 }}>
+                        <Text style={{ flex:1 }} size={14} color={Colors.brand.slate} weight='semibold'>PUBLIC RESULTS</Text>
+                        <View style={{ borderRadius:22, padding:10, backgroundColor:Colors.accents.accent100 }}>
+                            <Text size={14} color={Colors.brand.midnight} weight='regular'>{total_responses} Responses</Text>
+                        </View>
+                    </View>
+                    {!poll.show_responses ?
+                    <Text style={{ marginBottom:5 }} color={Colors.utility.warning} size={12} >Responses are hidden until closed</Text>
+                    :<></>}
+                    <FlatList
+                        data={poll_options}
+                        renderItem={renderPollOptions}
+                        keyExtractor={(item) => item.poll_option_id.toString()}
+                    />
+                </View>
+                :<></>}
+            </View>
+            :
+            <View style={{ padding:20 }}>
+                <ActivityIndicator color={Colors.brand.midnight} size='large' style={{ alignSelf:'center' }}/>
+            </View>
+            }
+            </ScrollView>
+            {!loading ?
+            <View nativeID='question_actions' style={{ marginTop:20, borderRadius:22, flexDirection:'row', padding:10, backgroundColor:Colors.shades.shade100 }}>
+                {!poll.seconds_allowed || responded ?
+                <TouchableOpacity
+                    style={{ marginRight:10, justifyContent:'center', paddingLeft:20, paddingRight:20, backgroundColor:Colors.utility.warning, borderRadius:22, borderWidth:1, borderColor:Colors.utility.warning }}
+                    onPress={() => handleCancel()}
+                >
+                    <Icons.ListIcon size={18} color={Colors.shades.white} />
+                </TouchableOpacity>
+                :<></>}
+                {poll.status == 'active' && poll.seconds_allowed && server_checked && !responded ?
+                    <View style={{ marginRight:5 }}>
+                        <ResponseTimer
+                            poll_id={poll.poll_id}
+                            seconds={poll.seconds_allowed}
+                            onTimesUp={() => handleTimesUp()}
+                        />
+                    </View>
+                :
+                <Button
+                    style={{flex:1, marginRight:5}}
+                    title_color={Colors.brand.electric}
+                    title={responded?'Next':'Skip'}
+                    borderColor={Colors.brand.electric}
+                    backgroundColor={Colors.shades.white}
+                    borderRadius={22}
+                    borderWidth={1}
+                    padding={14}
+                    onPress={() => handleSkip()}
+                />
+                }
+                {server_checked && !responded ?
+                <Button
+                    style={{flex:2}}
+                    title_color={Colors.shades.white}
+                    disabled={option_selected&&!submit_loading?false:true}
+                    title={option_selected?`Submit!`:poll.status == 'active' ? 'Select Answer' : 'Not Active'}
+                    backgroundColor={option_selected&&!submit_loading?Colors.utility.success:Colors.brand.slate}
+                    borderRadius={22}
+                    onPress={() => handleSubmitResponse()}
+                />
+                :<></>}
+            </View>
+            :<></>}
+        </View>
+        
+    )
+}
+
+export default PollCard

package/src/Poll/components/PollOptionCard.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import { TextInput, TouchableOpacity, View } from "react-native"
+import type { PollOptionProps, PollResponseProps, PollSummaryProps } from "../../types";
+import Colors from "../../constants/colors";
+import { Button, Icons, Text } from "../../Components";
+
+type PollOptionCardProps = {
+    poll_option:PollOptionProps,
+    draft_selected?:boolean,
+    show_result?:boolean,
+    poll_response?:PollResponseProps,
+    poll_summary?:PollSummaryProps,
+    show_summary:boolean,
+    onSelect: (PollOptionProps: PollOptionProps) => void
+}
+const PollOptionCard = ({ draft_selected, show_result, poll_option, poll_summary, show_summary, onSelect, poll_response } : PollOptionCardProps) => {
+    const [ option_width, setOptionWidth ] = useState(0);
+    const [ input_locked, setInputLocked ] = useState(false);
+    const [ input_value, setInputValue ] = useState('');
+
+    const getResultColor = (result_ind?:'win'|'lose'|'draw') => {
+        switch(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
+        }
+    }
+
+    const getResultIcon = (result_ind:'win'|'lose'|'draw') => {
+        let color = getResultColor(result_ind)
+        switch(result_ind){
+            case 'win':
+                return <Icons.CheckIcon color={color} size={12} />
+            case 'lose':
+                return <Icons.CloseIcon color={color} size={12} />
+            default: return <></>
+        }
+    }
+   
+    return (
+        <View>
+            {poll_option.option_type == 'select' ?
+            <TouchableOpacity 
+                style={{ flex:1, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, borderWidth:1, borderColor:show_result?getResultColor(poll_option.result_ind):Colors.shades.shade600, backgroundColor:draft_selected?Colors.highlights.highlight500Faded:undefined }}
+                onPress={() => onSelect(poll_option)}
+                onLayout={(ev) => {
+                    const { width } = ev.nativeEvent.layout
+                    setOptionWidth(width)
+                }}
+                >
+                <Text style={{ flex:1 }} textAlign="center" size={14} color={show_result?getResultColor(poll_option.result_ind):Colors.brand.midnight} weight='bold'>{poll_option.option_name}</Text>
+                {show_result && poll_option.result_ind ?
+                <View>
+                    {getResultIcon(poll_option.result_ind)}
+                </View>
+                :<></>}
+                {show_summary && poll_summary?
+                <View style={{ position: 'absolute', left:0, top:0, bottom:0, width:poll_summary.pct*option_width, borderRadius:22, backgroundColor:Colors.highlights.highlight400Faded }} />
+                :<></>}
+                {show_summary && poll_summary ? 
+                <View style={{ position:'absolute', right:5, top:0, bottom:0, justifyContent:'center' }}>
+                    <Text weight='regular' size={10} color={Colors.brand.midnight}>{(poll_summary.pct * 100).toFixed(2)}%</Text>
+                </View>
+                :<></>}
+            </TouchableOpacity>  
+            :
+            <View style={{ flexDirection:'row' }}>
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center', paddingRight:10, borderRadius:22, borderWidth: 1, borderColor: show_result?getResultColor(poll_response?.result_ind):Colors.shades.shade600 }}>
+                <TextInput
+                    style={{ flex:1, textAlign:'center', fontSize:14, padding:10, color:getResultColor(poll_response?.result_ind) }}
+                    keyboardType={poll_option.input_type == 'number' ? 'decimal-pad' : 'default'}
+                    editable={show_result?false:true}
+                    placeholder="Input Answer"
+                    value={poll_response ? poll_response.input_value : input_value}
+                    placeholderTextColor={Colors.shades.shade600}
+                    onChangeText={(text) => {
+                        if(draft_selected){ onSelect(poll_option) }
+                        setInputValue(text)
+                        setInputLocked(false);
+                    }}
+                />
+                    {show_result && poll_response?.result_ind ?
+                    <View>
+                        {getResultIcon(poll_response.result_ind)}
+                    </View>
+                    :<></>}
+                </View>
+                {!show_result ?
+                <Button
+                    style={{ marginLeft:5 }}
+                    borderRadius={22}
+                    title={input_locked?'Locked In':'Lock It In'}
+                    backgroundColor={input_locked?Colors.brand.slate:Colors.brand.electric}
+                    title_color={Colors.shades.white}
+                    onPress={() => {
+                        if(!input_value || input_value == ''){ return alert('Please enter valid value') }
+                        setInputLocked(true)
+                        onSelect({ ...poll_option, option_value: input_value })
+                    }}
+                />
+                :<></>}
+            </View>
+
+                } 
+        </View>
+    )
+}
+
+export default PollOptionCard

package/src/Poll/components/PollSelectCard.tsx

@@ -0,0 +1,106 @@
+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"
+
+type PollSelectCardProps = {
+    selected?:boolean,
+    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 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
+        }
+    }
+
+    const getStatusColor = () => {
+        switch(poll.status) {
+            case 'closed': return Colors.highlights.highlight300Faded
+            case 'active': return Colors.highlights.highlight400Faded
+            default: return Colors.highlights.highlight500Faded
+        }
+    }
+
+
+    const getResultIcon = () => {
+        let color = getResultColor()
+        switch(poll_response?.result_ind){
+            case 'win':
+                return <Icons.CheckIcon color={color} size={16} />
+            case 'lose':
+                return <Icons.CloseIcon color={color} size={12} />
+            default: 
+                if(poll.status == 'closed'){
+                    return <Icons.CloseIcon color={color} size={10} />
+                }
+                return <></>
+        }
+    }
+
+    const getStatusIcon = () => {
+        //let color = getResultColor()
+        switch(poll.status){
+            case 'closed':
+                return <Icons.LockClosedIcon color={Colors.brand.midnight} size={14} />
+            case 'active':
+                return <Icons.InProgressIcon color={Colors.brand.midnight} size={14} />
+            default:
+                return <Icons.PausedIcon color={Colors.brand.midnight} 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'>{(index + 1).toString()}</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>
+            </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>
+            </View>
+            }
+        </View>
+    </TouchableOpacity>
+    )
+}
+
+export default PollSelectCard

package/src/Poll/components/ResponseTimer.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react"
+import { View } from "react-native"
+import { Text } from "../../Components"
+import Colors from "../../constants/colors"
+
+type ResponseTimerProps = {
+    poll_id:string,
+    seconds: number,
+    onTimesUp: () => void
+}
+const ResponseTimer = ({ seconds, onTimesUp }:ResponseTimerProps) => {
+    const [ seconds_remaining, setSecondsRemaining ] = useState(seconds);
+    const [ times_up, setTimesUp ] = useState(false);
+
+    useEffect(() => {
+        if(seconds_remaining > 0){
+            setTimeout(() => setSecondsRemaining(seconds_remaining - 1), 1000);
+        } else {
+            setTimesUp(true)
+        }
+    },[seconds_remaining])
+
+    
+    useEffect(() => {
+        if(!times_up){ return }
+        onTimesUp()
+    },[times_up])
+
+    return (
+        <View style={{ width:50, padding:10, borderRadius:22, backgroundColor:seconds_remaining < 5 ? Colors.utility.error : seconds_remaining < 10 ? Colors.utility.warning  : Colors.utility.success }}>
+            <Text textAlign="center" size={14} color={Colors.shades.white} weight='bold'>{seconds_remaining}</Text>
+        </View>
+    )
+}
+
+export default ResponseTimer
+

package/src/Poll/components/WidgetHeader.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Image, TouchableOpacity, View } from "react-native"
+import { Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+
+type WidgetHeaderProps = {
+    back_visible?:boolean,
+    image?:{ url:string }
+    title:string,
+    sub_title?:string
+    onBack: () => void
+}
+
+const WidgetHeader = ({ back_visible, title, sub_title, image, onBack }:WidgetHeaderProps) => {
+
+    return (
+        <View style={{ flexDirection:'row' }}>
+                {back_visible ?
+                <TouchableOpacity style={{ justifyContent:'center', alignItems:'center', flex:1 }} onPress={() => onBack()}>
+                    <Icons.ChevronIcon direction="left" color={Colors.shades.white} size={12} />
+                </TouchableOpacity>
+                :<View style={{ flex:1 }} />}
+                <View nativeID="header" style={{ flex:8 }}>
+                    <View nativeID="company" style={{ padding:20 }}>
+                        <Text size={18} color={Colors.shades.white} weight='bold' textAlign="center">{title}</Text>
+                        {sub_title ?
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.shades.white} weight='regular' textAlign="center">{sub_title}</Text>
+                        :<></>}
+                    </View>
+                </View>
+                {image ?
+                <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                    <Image 
+                        source={{ uri: image.url }}
+                        style={{ height:30, width:30 }}
+                        resizeMode="contain"
+                        />
+                </View>
+                :
+                <View style={{ flex:1 }} />
+                }
+            </View>
+    )
+}
+
+export default WidgetHeader