be-components 0.7.4 → 0.7.6

package/src/Poll/flashmarket/index.tsx

@@ -0,0 +1,231 @@
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, View, Image, TouchableOpacity } from "react-native";
+import type { PollCampaignProps, PollOptionProps, PollProps, PollResponseProps, PollSummaryProps } from '../../types';
+import Colors from '../../constants/colors';
+import { Spring, Text, TextInput } from '../../Components';
+import { PollApi, PollCampaignApi, PollResponseApi, PollResponseHelpers } from '../api';
+import { view_styles } from '../../constants/styles';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+
+type FlashMarketProps = {
+    poll_id:string,
+    next_allowed?:boolean,
+    player_id?:string,
+    onRequestAuthenticate:() => void
+}
+
+const MAX_IMAGE_SIZE = 125
+const MAX_OPTION_WIDTH = 200
+
+const FlashMarket = ({ poll_id, player_id, onRequestAuthenticate }:FlashMarketProps) => {
+    const [ flash_size, setFlashSize ] = useState({ height:0, width:0 });
+    const [ data, setData ] = useState<
+    {
+        loading:boolean,
+        poll_campaign?:PollCampaignProps,
+        poll?:PollProps,
+        poll_options:PollOptionProps[],
+        poll_summaries: PollSummaryProps[],
+        poll_response?:PollResponseProps,
+        show_complete:boolean,
+    }
+    >({
+        loading:false,
+        poll_options: [],
+        poll_summaries: [],
+        show_complete: false
+    })
+
+    const { loading, poll, poll_options, poll_summaries, poll_response } = data;
+
+    let visible_options = poll_options
+    if(poll_response && poll_response.status == 'pending'){ visible_options = poll_options.filter(po => po.poll_option_id == poll_response.poll_option_id) }
+
+    let image_size = flash_size.width * 0.2
+    if(image_size > MAX_IMAGE_SIZE){ image_size = MAX_IMAGE_SIZE }
+    let option_width = (flash_size.width * 0.8 / 2) - 25
+    if(option_width > MAX_OPTION_WIDTH){ option_width = MAX_OPTION_WIDTH }
+
+    useEffect(( ) => {
+        getDataFromServer(poll_id)
+    },[poll_id, player_id])
+
+    const getDataFromServer = async(poll_id:string) => {
+        setData({ ...data, loading:true })
+        const resp = await PollApi.getPollById(poll_id);
+        const pc = await PollCampaignApi.getPollCampaignById(resp.poll.poll_campaign_id)
+        let my_response:PollResponseProps | undefined = undefined
+        //First if there is a player_id - lets grab from the server first
+        if(player_id){
+            my_response = await PollResponseApi.getResponseByPollId(poll_id)
+        }
+
+        if(!my_response){
+            //If no-response - check cache
+            let cached_response = await AsyncStorage.getItem(`response:${poll_id}`)
+            if(cached_response){
+                my_response = JSON.parse(cached_response);
+            }
+        }
+        setData({
+            loading:false,
+            poll_campaign: pc,
+            poll: resp.poll,
+            poll_options: resp.poll_options,
+            poll_summaries: resp.poll_summaries,
+            poll_response: my_response,
+            show_complete: my_response && my_response?.status != 'pending' ? true : false
+        })
+    }
+
+    const handleSelectOption = async(po:PollOptionProps) => {
+        if(!poll){ return }
+        if(poll_response && poll_response.status != 'pending'){ return setData({ ...data, show_complete: true }) }
+        let cached_response = await AsyncStorage.getItem(`response:${poll_id}`)
+        if(cached_response){
+            if(JSON.parse(cached_response).poll_option_id == po.poll_option_id){ 
+                await AsyncStorage.removeItem(`response:${poll_id}`)
+                return setData({ ...data, poll_response: undefined }) 
+            }
+        }
+        let stake = poll_response?.stake ?? poll.minimum_stake
+        let draft_response:PollResponseProps = {
+            poll_id:poll.poll_id,
+            poll_option_id:po.poll_option_id,
+            stake: stake,
+            market_type: 'FREE',
+            poll_response_id: '',
+            player_id: '',
+            winnings: 0,
+            response_body: {},
+            status: 'pending',
+            create_datetime: '',
+            last_update_datetime: ''
+        }
+        await AsyncStorage.setItem(`response:${poll_id}`, JSON.stringify(draft_response))
+        
+        setData({
+            ...data,
+            poll_response: draft_response
+        })
+    }
+    
+    const handleSubmit = async() => {
+        if(!poll_response){ return }
+        if(poll_response.status != 'pending'){ return }
+        if(!player_id){ return onRequestAuthenticate() }
+        let stake_number = parseFloat(poll_response.stake as string)
+        if(isNaN(stake_number)){ return }
+        const new_resp = await PollResponseApi.createPollResponse({ ...poll_response, stake: stake_number })
+        const updated_ps = PollResponseHelpers.updateSummariesWithResponse(new_resp, poll_summaries)
+        setData({
+            ...data,
+            poll_response: new_resp,
+            poll_summaries: updated_ps,
+            show_complete: true
+        })
+        await AsyncStorage.removeItem(`response:${poll_id}`)
+    }
+
+
+    //const selected_option = poll_options.find(po => po.poll_option_id == poll_response?.poll_option_id)
+    //const selected_summary = poll_summaries.find(ps => ps.poll_option_id == poll_response?.poll_option_id)
+    //const correct_option = poll_options.find(po => po.result_ind == 'win');
+    //const correct_summary = poll_summaries.find(ps => ps.poll_option_id == correct_option?.poll_option_id);
+
+    const renderPollOptions = (data:{item:PollOptionProps, show_summary?:boolean, index:number}) => {
+        const selected = data.item.poll_option_id == poll_response?.poll_option_id ? true : false
+        const poll_summary = poll_summaries.find(ps => ps.poll_option_id == data.item.poll_option_id);
+        const color = PollResponseHelpers.getOptionColor(data.item, poll_response)
+        return (
+            <View>
+                
+                <TouchableOpacity 
+                //disabled={poll_response && poll_response.status != 'pending' ? true : false}
+                style={{ flexDirection:'row', width:option_width, alignItems:'center', margin:5, borderRadius:22, padding:10, borderWidth:selected?1:0, borderColor:Colors.brand.midnight, backgroundColor:color, ...view_styles.float }}
+                onPress={() => handleSelectOption(data.item)}>
+                    {data.show_summary && poll_summary ?
+                    <View style={{ position:'absolute', top:0, left:0, bottom:0, borderRadius:22, backgroundColor:color, opacity:0.6, width: option_width * poll_summary.pct }}/>
+                    :<></>}
+                    <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight={'bold'} textAlign={data.show_summary?'left':'center'}>{data.item.option_name}</Text>
+                    {data.show_summary && poll_summary ?
+                    <Text style={{ marginLeft:10, padding:5, borderRadius:selected?100:0, backgroundColor:selected?Colors.shades.white:undefined, ...view_styles.float }} size={12} color={Colors.brand.midnight} weight='bold' >{(poll_summary.pct*100).toFixed()}%</Text>
+                    :<></>}
+                </TouchableOpacity>
+            </View>
+        )
+    }
+
+    if(loading || !poll){
+        return (
+            <View>
+                <ActivityIndicator size={'large'} color={Colors.brand.midnight}/>
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ backgroundColor:Colors.shades.white, flexDirection:'row' }} onLayout={(ev) => {
+            const { height, width } = ev.nativeEvent.layout;
+            setFlashSize({ height, width })
+        }}>
+                {!poll_response || poll_response.status != 'pending' ?
+                <View style={{ padding:10 }}>
+                    <Image
+                        source={{ uri: poll.poll_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1718979933/question_mark_ro0ac5.webp' }}
+                        style={{ height:image_size, width:image_size }}
+                        resizeMode='cover'
+                    />
+                </View>
+                :<></>}
+                <View style={{ flex:1 }} nativeID='question'>
+                    <View style={{ padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                        <Text size={16} color={Colors.brand.midnight} weight='bold'>{poll.poll_question}</Text>
+                    </View>
+                    <View nativeID='poll_options' style={{ flex:1, padding:5, flexDirection:'row', flexWrap:'wrap', justifyContent:'center', alignItems:'center'}}>
+                        {visible_options.sort((a,b) => a.priority - b.priority).map((po, i) => {
+                            return renderPollOptions({ item:po, index:i, show_summary:poll_response && poll_response.status != 'pending' ? true : false })
+                        })}
+                    </View>
+                </View>
+                {poll_response?.status == 'pending' ?
+                <Spring
+                    slide='horizontal'
+                    to={0}
+                    from={100}
+                >
+                    <View style={{justifyContent:'space-between', backgroundColor:Colors.shades.shade600 }}>
+                        <View style={{ padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade100 }}>
+                            <Text size={16} color={Colors.brand.midnight} textAlign='center' weight='bold'>{poll.confidence_allowed ? 'HOW MUCH?': 'ARE YOU SURE?'}</Text>
+                        </View>
+                        {poll.confidence_allowed ?
+                        <View style={{ flex:1, padding:5 }}>
+                            <View style={{flexDirection:'row', backgroundColor:Colors.shades.white, borderRadius:22 }}>
+                                <Text style={{ padding:10 }}>{poll.market_type == 'FOR_MONEY' ? '$' : 'E'}</Text>
+                                <TextInput
+                                    style={{ padding:10, borderWidth:0, borderTopLeftRadius:0, borderBottomLeftRadius:0, backgroundColor:'transparent', width: flash_size.width * 0.22,}}
+                                    autoFocus
+                                    value={poll_response.stake as string}
+                                    onChangeText={(text) => setData({
+                                        ...data,
+                                        poll_response: { ...poll_response, stake:text }
+                                    })}
+                                />
+                            </View>
+                        </View>
+                        :<View style={{flex:1}} />}
+                        <TouchableOpacity style={{ marginTop:10, backgroundColor:Colors.utility.success, padding:10, paddingLeft:20, paddingRight:20, justifyContent:'center', alignItems:'center' }}
+                        onPress={() => handleSubmit()}>
+                            <Text weight='bold' size={14} color={Colors.shades.white}>SUBMIT</Text>
+                        </TouchableOpacity>
+                    </View>
+                </Spring>
+                :<></>}
+            </View>
+        </View>
+    )
+}
+
+export default FlashMarket

package/src/Poll/index.tsx

@@ -1,25 +1,45 @@
 import React, { useEffect, useState } from 'react';
 import CampaignPlay from "./components/CampaignPlay"
 import { PollCampaignApi } from './api';
+import FlashMarket from './flashmarket';
 
 
 type PollCampaignModuleProps = {
-    poll_campaign_id:string
+    poll_campaign_id?:string,
+    poll_id?:string,
+    player_id?:string,
+    height?:number,
+    width?:number,
+    type: 'campaign' | 'poll',
+    onRequestAuthenticate: () => void
 }
-const PollCampaign = ({ poll_campaign_id }: PollCampaignModuleProps ) => {
+const PollCampaign = ({ poll_campaign_id, poll_id, type, player_id, onRequestAuthenticate }: PollCampaignModuleProps ) => {
     const [ loaded, setLoaded ] = useState(false);
     useEffect(() => {
         PollCampaignApi.setEnvironment();
         setLoaded(true)
     },[])
     if(!loaded){ return <></> }
-    return (
-        <CampaignPlay
-            onRequestAuthenticate={() => console.log('')}
-            poll_campaign_id={poll_campaign_id}
-            onFinished={() => console.log('finished!!')}
-        />
-    )
+    if(type == 'campaign' && poll_campaign_id){
+        return (
+            <CampaignPlay
+                onRequestAuthenticate={() => console.log('')}
+                poll_campaign_id={poll_campaign_id}
+                onFinished={() => console.log('finished!!')}
+            />
+        )
+    }
+    if(type == 'poll' && poll_id){
+        return (
+            <FlashMarket
+                poll_id={poll_id}
+                player_id={player_id}
+                onRequestAuthenticate={onRequestAuthenticate}
+            />
+        )
+    }
+    return <></>
+
 }
 
 export default PollCampaign

package/src/index.tsx

@@ -12,6 +12,7 @@ import Checkout from "./Checkout";
 import { usePlayerLocation } from "./LocationTracker/LocationStatus";
 import PollCampaign from "./Poll";
 import CompetitionModule from "./Competition";
+
 export {
   Authenticator,
   Observer,

package/src/types.d.ts

@@ -357,6 +357,7 @@ export interface PollProps {
     poll_id:string,
     poll_campaign_id:string,
     poll_question: string,
+    market_type:'FOR_MONEY'|'FREE',
     status:string,
     coupon_campaign_id?:string,
     coupon_payout_type?:any,
@@ -373,6 +374,7 @@ export interface PollProps {
     hidden_clue?:string,
     minimum_stake:number,
     priority: number,
+    confidence_allowed?: boolean,
     end_datetime: any,
     winning_option_id?:string,
     winning_value?:string,
@@ -423,7 +425,7 @@ export interface PollResponseProps {
     email?:string,
     device_id?:string,
     parimutuel_odds?:number,
-    stake:number,
+    stake:number|string,
     market_type: 'FREE' | 'FOR_MONEY',
     result_ind?:'win'|'lose'|'draw',
     winnings:number,