be-components 7.2.6 → 7.2.8

package/src/PartnerPortal/components/FlashCampaignManager.tsx

@@ -0,0 +1,214 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed";
+import type { FocusPositionProps, PollCampaignProps, PollOptionProps, PollProps, PollSummaryProps } from '../../types';
+import { PartnerPortalApi } from '../api';
+import { FlatList, Image, Platform } from 'react-native';
+import { Icons } from '../../Components';
+import { useColors } from '../../constants/useColors';
+
+type FlashCampaignManagerProps = {
+    company_id:string,
+    refresh_key?:string,
+    poll_campaign_id:string,
+    onCreateFlashMarket:(poll_campaign_id:string) => void,
+    onManageFlashMarket:(poll_id:string) => void,
+    onFocusPosition:(pos:FocusPositionProps) => void
+};
+
+const sections = ['header','markets']
+const MIN_MARKET_WIDTH = 300
+const MARKET_MARGIN = 5
+const FlashCampaignManager = ({ company_id, refresh_key, poll_campaign_id, onManageFlashMarket, onCreateFlashMarket }:FlashCampaignManagerProps) => {
+    const Colors = useColors();
+    const [ size, setSize ] = useState({ height:0, width:0 })
+    const [ state, setState ] = useState<{
+        loading: boolean,
+        flash_campaign?:PollCampaignProps,
+        flash_summaries:PollSummaryProps[],
+        flash_markets:PollProps[]
+    }>({
+        loading:false,
+        flash_markets:[],
+        flash_summaries: []
+    });
+    const market_count = Math.floor(size.width / MIN_MARKET_WIDTH);
+
+    //Now calc the width
+    const market_width = (size.width / market_count) - (MARKET_MARGIN * 2) - 5
+    const { loading, flash_markets, flash_campaign, flash_summaries } = state;
+    const filtered_markets = flash_markets.filter(fm => fm.status != 'inactive');
+    const total_base_stake = flash_markets.filter(fm => fm.status != 'pending').reduce((a,b) => a + (b.base_stake ?? 0), 0);
+    const total_stake = flash_summaries.reduce((a,b) => a + b.stake, 0) - total_base_stake
+    let total_responses = flash_summaries.reduce((a,b) => a + b.count, 0) - flash_markets.length
+    if(total_responses < 0){ total_responses = 0 }
+
+    useEffect(() => {
+        PartnerPortalApi.setEnvironment();
+        getData()
+    },[poll_campaign_id, company_id, refresh_key]);
+
+    const getData = async() => {
+        setState({ ...state, loading:true });
+        const resp = await PartnerPortalApi.EngagementApi.getFlashCampaignById(poll_campaign_id);
+        if(!resp){ return alert('Unable to get flash market at this time.  Please try again later') }
+        const p_resp = await PartnerPortalApi.EngagementApi.getFlashMarketsByCampaignId(poll_campaign_id);
+        if(!p_resp){ return alert('Unable to get flash market at this time.  Please try again later') }
+        let summaries:PollSummaryProps[] = []
+        p_resp.polls.map(p => p.poll_summaries?.map(s => summaries.push(s)));
+        setState({
+            ...state,
+            flash_campaign: resp.poll_campaign,
+            flash_markets: p_resp.polls,
+            flash_summaries: summaries,
+            loading: false
+        })
+    }
+
+    const renderOptions = (data: { item:PollOptionProps, index:number }) => {
+        return (
+            <View transparent type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h2'>{data.item.option_name}</Text>
+                </View>
+                {data.item.result_ind == 'win' ?
+                <Icons.CheckCirlceIcon size={16} color={Colors.text.success}/> 
+                :<></>}
+            </View>
+        )
+    }
+
+    const renderMarkets = (data:{ item:PollProps, index:number }) => {
+        let total_volume = data.item.poll_summaries?.reduce((a,b) => a + b.stake, 0) ?? 0
+        total_volume -= data.item.base_stake ?? 0
+        if(!data.item.poll_options){ return <></> }
+        return (
+            <View float style={{ width: market_width, margin:MARKET_MARGIN, flexGrow:1 }}>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                  {data.item.poll_image?.url ?
+                  <Image
+                    style={{ height:35, width:35 }}
+                    resizeMode='contain'
+                    source={{ uri: data.item.poll_image.url }}
+                  />
+                  :
+                  <Icons.FlameIcon size={35} color={Colors.text.error} />
+                  }
+                  <View transparent style={{ flex:1, marginLeft:5, paddingLeft:5, borderLeftWidth:1, borderColor:Colors.borders.light }}>
+                    <Text theme='h1'>{data.item.poll_question}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>${total_volume.toFixed(2)} Volume</Text>
+                  </View>
+                  <Button float style={{ padding:10 }} onPress={() => onManageFlashMarket(data.item.poll_id)}>
+                    <Icons.SettingsIcon size={16} color={Colors.text.action} />
+                    </Button>
+                </View>
+                <View style={{ flex:1 }}>
+                    <FlatList
+                        data={data.item.poll_options}
+                        renderItem={renderOptions}
+                        key={`options_${data.item.poll_id}`}
+                        keyExtractor={item => item.poll_option_id.toString()}
+                    />
+                </View>
+                <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                  <View transparent style={{ flex:1 }}>
+                    <Text theme='h2'>${total_volume.toFixed(2)} Volume</Text>
+                  </View>
+                <View float style={{ padding:10, borderRadius:22, backgroundColor:data.item.status == 'active' ? Colors.text.success : data.item.status == 'closed' ? Colors.text.error : Colors.text.warning }}>
+                    <Text theme='description' color={Colors.text.white}>{data.item.status.toUpperCase()}</Text>
+                </View>
+                </View>
+            </View>
+        )
+    }
+
+    const renderSections = (data:{item:string, index:number}) => {
+        switch(data.item){
+            case 'header':
+                if(!flash_campaign){ return <></> }
+                return (
+                    <View transparent style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        
+                        <View float nativeID='company_info' style={{ flexGrow:1, flexBasis:1, minWidth:200, margin:10 }}>
+                           <View transparent style={{ flexDirection:'row', padding:10 }}>
+                                <Image
+                                    source={{ uri: flash_campaign.campaign_image?.url }}
+                                    style={{ height:50, width:50 }}
+                                    resizeMode='cover'
+                                />
+                                <View transparent style={{ flex:1, marginLeft:10, paddingLeft:10, borderLeftWidth:1, borderColor:Colors.borders.light }}>
+                                    <Text theme='h1' size={20}>{flash_campaign.name}</Text>
+                                    <Text theme='description' size={16} style={{ marginTop:6 }}>Flash Market Campaign</Text>
+                                </View>
+                           </View>
+                        </View>
+
+                        <View float nativeID='player_count' style={{ flexGrow:1, minWidth: 100, margin:10 }}>
+                            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                                <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Total Volume</Text>
+                                </View>
+                            </View>
+                            <View transparent style={{ flexGrow:Platform.OS == 'web' ? 1 : undefined, justifyContent:'center', alignItems:'center', padding:10 }}>
+                                <Text theme='h1' size={60}>${total_stake.toFixed(2)}</Text>
+                            </View>
+                        </View>
+                        <View float nativeID='player_count' style={{ flexGrow:1, minWidth: 100, margin:10 }}>
+                            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                                <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Total Bets Placed</Text>
+                                </View>
+                            </View>
+                            <View transparent style={{ flexGrow:Platform.OS == 'web' ? 1 : undefined, justifyContent:'center', alignItems:'center', padding:10 }}>
+                                <Text theme='h1' size={60}>{total_responses.toFixed()}</Text>
+                            </View>
+                        </View>
+                    </View>
+                )
+            case 'markets':
+                return (
+                    <View transparent>
+                        <View transparent style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                            <View nativeID='company_competitions' style={{ flexGrow:1, flexBasis:1, minWidth:300, margin:10 }}>
+                                <View style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                                    <View transparent style={{ flex:1 }}>
+                                        <Text theme='h1'>Flash Markets</Text>
+                                        <Text theme='description' style={{ marginTop:3 }}>Flash Markets Associated with this campaign</Text>
+                                    </View>
+                                    <Button
+                                    title='CREATE NEW'
+                                    type='success'
+                                    style={{ padding:10 }}
+                                    onPress={() => onCreateFlashMarket(poll_campaign_id)}
+                                    />
+                                </View>
+                            </View>
+                        </View>
+                        <View transparent style={{ flexDirection:'row', flexWrap:'wrap', padding:5 }}>
+                            {filtered_markets.sort((a,b) => a.priority - b.priority).map((fm,i) => {
+                                return renderMarkets({ item: fm, index:i })
+                            })}
+                        </View>
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }} onLayout={(ev) => {
+            const { height, width } = ev.nativeEvent.layout
+            setSize({ height, width });
+        }}>
+            <FlatList
+                data={sections}
+                refreshing={loading}
+                onRefresh={() => getData()}
+                renderItem={renderSections}
+                key='flash_campign_sections'
+                keyExtractor={(item) => item}
+            />
+        </View>
+    )
+}
+
+export default FlashCampaignManager

package/src/PartnerPortal/index.tsx

@@ -365,7 +365,7 @@ const PartnerPortal = ({ me, company_id, refresh_key, onCreateEngagement, onSele
                                 <View transparent type='row'>
                                     <View transparent style={{ flex:1 }}>
                                         <Text theme='h1' size={32}>{company.company_name}</Text>
-                                        <Text theme='h2' style={{ marginTop:3, flexWrap:'wrap', flexShrink:1 }} size={14}>{company.company_description} with more long text</Text>
+                                        <Text theme='h2' style={{ marginTop:3, flexWrap:'wrap', flexShrink:1 }} size={14}>{company.company_description}</Text>
                                     </View>
                                     <ImageUploader onFinishUpload={(obj) => console.log(obj.secure_url)} public_id={`company_logo_${company_id}_${Math.random()*100000}`}>
                                         <Image

package/src/index.tsx

@@ -67,6 +67,8 @@ import PartnerPortal from './PartnerPortal';
 import EmbedManager from './PartnerPortal/components/EmbedManager';
 import CreateEmbed from './PartnerPortal/components/CreateEmbed';
 import ReferralCodeManager from './PartnerPortal/components/ReferralCodeManager';
+import FlashCampaignManager from './PartnerPortal/components/FlashCampaignManager';
+
 export {
   Authenticator,
   Observer,
@@ -75,6 +77,7 @@ export {
   CreateEngagement,
   DiscordConnectionManager,
   BEEventApi,
+  FlashCampaignManager,
   EmbedManager,
   RankingsCard,
   ManageFlashMarket,