be-components 0.7.3 → 0.7.4

package/src/Competition/components/CompetitionSeasonCard.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Image, TouchableOpacity, View } from "react-native"
+import type { CompetitionResultTypeProps, CompetitionSeasonProps } from '../../types';
+import Colors from '../../constants/colors';
+import { Icons, Text } from '../../Components';
+
+type CompetitionSeasonCardProps = {
+    competition_season:CompetitionSeasonProps,
+    competition_result_type:CompetitionResultTypeProps
+    onSelect: (competition_seasons:CompetitionSeasonProps) => void
+}
+
+const CompetitionSeasonCard = ({ competition_season, competition_result_type, onSelect }: CompetitionSeasonCardProps) => {
+
+
+    const comp_colors = { backgroundColor:Colors.highlights.highlight300Faded, borderColor:Colors.highlights.highlight300 }
+
+    return (
+        <TouchableOpacity style={{ flex:1, borderRadius:8, borderWidth:1, borderColor:Colors.shades.shade600, flexShrink:0 }} onPress={() => onSelect(competition_season)}>
+            <View nativeID="comp_info">
+                <View style={{flexDirection:'row', alignItems:'center', padding:10 }}>
+                    <View nativeID="comp_image" style={{ marginRight:5 }}>
+                        <Image style={{height:35, width:35, borderRadius:4}} source={{ uri: competition_season.image?.url }} />
+                    </View>
+                    <View nativeID="comp_name_desc" style={{ flex:1 }}>
+                        <Text size={12} color={Colors.brand.midnight} weight='semibold'>{competition_season.season_name}</Text>
+                        <Text size={12} color={Colors.brand.midnight} weight='regular' style={{ marginTop:2 }}>{competition_season.season_description.substring(0,30)}...</Text>                       
+                    </View>
+                    <Icons.ChevronIcon direction="right" size={10} color={Colors.brand.midnight}/>
+                </View>
+                <View nativeID="comp_amounts" style={{ flexDirection:'row', padding:5 }}>
+                    <View style={{ flex:1, flexDirection:'row' }}>
+                        <View style={{ backgroundColor:comp_colors.backgroundColor, borderWidth:1, borderColor:comp_colors.borderColor, borderRadius:8, padding:5 }}>
+                            <Text size={10} color={comp_colors.borderColor} weight='semibold'>{competition_season.payout_allocation*100}%</Text>
+                        </View>
+                        {competition_result_type ?
+                        <View style={{ marginLeft: 5, backgroundColor:comp_colors.backgroundColor, borderWidth:1, borderColor:comp_colors.borderColor, borderRadius:8, padding:5 }}>
+                            <Text size={10} color={comp_colors.borderColor} weight='semibold'>{competition_result_type.label}</Text>
+                        </View>
+                        :<></>}
+                    </View>
+                </View>
+            </View>
+        </TouchableOpacity>
+    )
+}
+
+export default CompetitionSeasonCard

package/src/Competition/components/CompetitionSelector.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from "react"
+import { ActivityIndicator, FlatList, Image, View } from "react-native"
+import CompetitionCard from "./CompetitionCard"
+import type { CompanyProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps } from "../../types"
+import Colors from "../../constants/colors"
+import LinearGradient from "react-native-linear-gradient"
+import { CompetitionApi } from "../api"
+import { view_styles } from "../../constants/styles"
+import { Text } from "../../Components"
+
+
+type CompetitionSelectorProps = {
+    company?:CompanyProps,
+    competition_types:CompetitionTypeProps[],
+    competition_result_types:CompetitionResultTypeProps[],
+    onCompetitionSelect:(competition:CompetitionProps) => void
+}
+
+const CompetitionSelector = ({ company, competition_types, competition_result_types, onCompetitionSelect }:CompetitionSelectorProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ competitions, setCompetitions ] = useState<CompetitionProps[]>([]);
+
+    useEffect(() => {
+        getCompanyData(company);
+    },[company])
+
+    const getCompanyData = async(company?:CompanyProps) => {
+        setLoading(true)
+        if(!company){ return }
+        const competitions = await CompetitionApi.getCompetitionsByCompanyId(company.company_id, 0, 'active')
+        setCompetitions(competitions.filter(c => c.status == 'scheduled'))
+        setLoading(false);
+    }
+
+    const renderCompetitions = (data: {item:CompetitionProps, index:number} ) => {
+        const competition_type = competition_types.find(ct => ct.competition_type_id == data.item.competition_type_id);
+        const competition_result_type = competition_result_types.find(ct => ct.competition_result_type_id == data.item.competition_result_type_id);
+        if(!competition_type || !competition_result_type){ return <></> }
+        return (
+            <View style={{ margin:5, backgroundColor:Colors.shades.white, ...view_styles.float, borderRadius:8 }}>
+                <CompetitionCard 
+                    backup_image_url={company?.company_image?.url}
+                    competition={data.item}
+                    competition_type={competition_type}
+                    competition_result_type={competition_result_type}
+                    onSelect={onCompetitionSelect}
+                />
+            </View>
+        )
+    }
+    
+    return (
+        <LinearGradient 
+            colors={[Colors.shades.shade100, Colors.shades.white]} 
+            
+            style={{ flex:1, width:'100%', padding:10 }}>
+            {company ?
+            <View nativeID="company_details" style={{ flexDirection:'row', padding:10, marginBottom:15, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                <View>
+                    <Image 
+                        source={{ uri: company.company_image?.url }}
+                        style={{ height:75, width:75, borderRadius:8 }}
+                        resizeMode="center"
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:15 }}>
+                    <Text size={14} color={company?.brand_primary ?? Colors.brand.midnight} weight='bold'>{company.company_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} color={company?.brand_primary ?? Colors.brand.midnight} weight='semibold'>{company.company_description}</Text>
+                </View>
+            </View>
+            :<></>}
+            <View style={{ padding:10 }}>
+                <Text size={16} color={Colors.brand.midnight}>Available Competitions</Text>
+            </View>
+            {loading ?
+            <ActivityIndicator
+                color={Colors.brand.midnight}
+                size='large'
+                style={{ padding:20, alignSelf:'center' }}
+            />
+            :<></>}
+            <FlatList
+                data={competitions}
+                renderItem={renderCompetitions}
+                keyExtractor={(item) => item.competition_id}
+            />
+        </LinearGradient>
+    )
+}
+
+export default CompetitionSelector

package/src/Competition/components/CompetitionTypeCard.tsx

@@ -0,0 +1,211 @@
+import { FlatList, Image, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import type { CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, PublicPlayerProps } from '../../types';
+import { Button, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { CompetitionApi, CompetitionHelpers } from '../api';
+
+type CompetitionResultCardProps = {
+    visible: boolean,
+    competition:CompetitionProps,
+    competition_payout_types:CompetitionPayoutTypeProps[],
+    competition_type: CompetitionTypeProps,
+    init_view: 'type'|'result'
+    onClose:() => void,
+    competition_result_type: CompetitionResultTypeProps
+}
+type CompetitionNavProps = {
+    step: number,
+    view: 'type'|'result'|'payout'|'prize'
+    label:string
+}
+
+
+const CompetitionTypeCard = ({ competition, competition_payout_types, visible, onClose, competition_type, competition_result_type }:CompetitionResultCardProps) => {
+    const [ data, setData ] = useState<{
+        loading:boolean,
+        pacer?:PublicPlayerProps
+    }>({
+        loading:false,
+    })
+    const [ active_nav, setActiveNav ] = useState(1);
+    const { pacer } = data;
+    useEffect(() => {
+        if(!competition){ return }
+        getDataFromServer(competition)
+    },[competition])
+
+    const getDataFromServer = async(comp:CompetitionProps) => {
+        let pcer:PublicPlayerProps|undefined = undefined
+        if(comp.pacer_id){ 
+            let players  = await CompetitionApi.getPlayersByPlayerIds([comp.pacer_id])
+            pcer = players.find(p => p.player_id == comp.pacer_id) 
+        }
+        setData({
+            ...data,
+            loading:false,
+            pacer:pcer
+        })
+    }
+
+
+    let competition_navs:CompetitionNavProps[] = [
+        { step:1, view: 'type', label: 'Competition Type' },
+        { step:2, view: 'result', label: 'How are winners determined?' }
+        //{ step:3, view: 'payout', label: 'Payout Structure'}
+    ]
+
+    if(competition.prize_override){
+        competition_navs = competition_navs.map(cn => {
+            return { ...cn, step: cn.step+1 }
+        })
+        competition_navs.push({
+            step:1, view: 'prize', label:'Additional Prize!'
+        })
+    }
+
+
+    const renderPayouts = (data: {item: CompetitionPayoutTypeProps}) => {
+        return (
+            <View style={{ padding:5, borderBottomColor:Colors.shades.shade600, borderBottomWidth:1, flexDirection:'row', alignItems:'center', width:100 }}>
+                <Text size={14} color={Colors.brand.midnight}>{CompetitionHelpers.formatPlace(data.item.tier)}</Text>
+                <Text style={{ flex:1 }} textAlign='center' weight='bold' color={Colors.brand.midnight}>-</Text>
+                <Text size={14} color={Colors.brand.midnight}>{data.item.payout}%</Text>
+            </View>
+        )
+    }
+
+    const renderResult = (competition_result_type:CompetitionResultTypeProps) => {
+        switch(competition_result_type.type){
+            case 'battle_royale':
+                return (
+                    <Text style={{ marginTop:10 }} size={14} color={Colors.brand.midnight} weight='semibold' textAlign='center'>Winner takes all.  Ties for first will split the pot.</Text>
+                )
+            case 'double_up':
+                return (
+                    <Text style={{ marginTop:10 }} size={14} color={Colors.brand.midnight} weight='semibold' textAlign='center'>Finish in the top half of all participants and split total pot.</Text>
+                )
+            case 'outpace':
+                return (
+                    <View style={{ padding:5 }}>
+                        {pacer?
+                        <View nativeID='pacer'>
+                            <View nativeID='profile_pic' style={{ padding:5, justifyContent:'center', alignItems:'center' }}>
+                                <Image
+                                    source={{ uri: pacer.profile_pic }}
+                                    style={{ height:75, width:75, borderRadius:100 }}
+                                    resizeMode='cover'
+                                />
+                            </View>
+                            <View nativeID='username' style={{ marginTop:10 }}>
+                                <Text size={18} color={Colors.brand.midnight} weight='bold' textAlign='center'>@{pacer.username}</Text>
+                            </View>
+                        </View>
+                        :<></>}
+                        <Text style={{ marginTop:10 }} size={14} color={Colors.brand.midnight} weight='semibold' textAlign='center'>Split the pot with anyone who finishes above the pacer.  If the pacer wins, they take the whole pot!</Text>
+                    </View>
+                )
+            default: 
+                return (
+                    <View>
+                        <Text style={{ padding:10 }} size={14} color={Colors.brand.midnight} weight='bold' textAlign='center'>{competition_result_type.description}</Text>
+                        <View style={{ margin:5, padding:10, backgroundColor:Colors.highlights.highlight400Faded, borderRadius:8, alignItems:'center' }}>
+                            <Text style={{ marginBottom:10 }} size={14} color={Colors.brand.midnight} weight='bold'>Payout Tiers</Text>
+                            <FlatList
+                                data={competition_payout_types.sort((a,b) => a.tier - b.tier)}
+                                renderItem={renderPayouts}
+                                keyExtractor={(item) => item.competition_payout_type_id.toString()}
+                            />
+                        </View>
+                    </View>
+                )
+        }
+    }
+
+    if(!visible || !competition){ return <></> }
+    const viewing_nav = competition_navs.find(cnv => cnv.step == active_nav) ?? { view: '', label: '' }
+    return (
+        <View style={{ backgroundColor:Colors.shades.white, width:350, minHeight:450, borderRadius:8 }}>
+            <View nativeID='competition_header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomColor:Colors.shades.shade600, borderBottomWidth:1 }}>
+                <Text style={{ flex:1 }} size={16} color={Colors.brand.midnight} weight='bold' textAlign='left'>RULES</Text>
+                <Button
+                    title='X'
+                    title_color={Colors.utility.error}
+                    borderRadius={8}
+                    onPress={() => onClose()}
+                />
+                
+            </View>
+            <View nativeID='nav_details' style={{ flex:1 }}>
+                {viewing_nav.view == 'prize' ?
+                <View>
+                    <View nativeID='prize_image' style={{ justifyContent:'center', alignItems:'center' }}>
+                        <Image
+                            source={{ uri: competition.prize_image?.url }}
+                            style={{ height:350, width:350,  }}
+                            resizeMode='cover'
+                        />
+                    </View>
+                    <View style={{ position:'absolute', left:0, right:0, bottom:0, top:0, backgroundColor:Colors.shades.black_faded, padding:20, justifyContent:'center', alignItems:'center' }}>
+                        <View style={{ backgroundColor:Colors.shades.white, padding:20, borderRadius:8 }}>
+                        <Text size={16} color={Colors.brand.midnight} weight='bold' textAlign='center'>COMPETITION PRIZE!</Text>
+                        <Text style={{ marginTop:10 }} size={14} color={Colors.brand.midnight} weight='semibold' textAlign='center'>{competition.prize_override}</Text>
+
+                        </View>
+                    </View>
+                </View>
+                :<></>}
+                {viewing_nav.view == 'type' ?
+                <View nativeID='type_settings' style={{ padding:10 }}>
+                    <Text size={22} color={Colors.brand.midnight} weight='bold' textAlign='center'>{competition_type.type_label}</Text>
+                    {competition_type.type == 'pick' ?
+                    <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='semibold' textAlign='center'>Pick {competition.max_pick_count} separate outcomes across event or player level markets. Make more correct picks than other players in the competition to climb up the leaderboard.</Text>
+                    :competition_type.type == 'wager' ?
+                    <Text style={{ marginTop:10 }} size={16} color={Colors.brand.midnight} weight='semibold' textAlign='center'>Start with {competition.initial_balance} edge coins and use them to wager across event or player level markets.  Continue to rollover earnings until the competition is completed.  Earn more edge coins than other players to climb up the leaderboard</Text>
+                    :<></>}
+                </View>
+                :viewing_nav.view == 'result' ?
+                <View nativeID='result_settings' style={{ padding:10 }}>
+                    <Text size={22} color={Colors.brand.midnight} weight='bold' textAlign='center'>{competition_result_type.label}</Text>
+                    {renderResult(competition_result_type)}
+                </View>
+                :<></>}
+            </View>
+            <View nativeID='view_nav' style={{ padding:10, flexDirection:'row', alignItems:'flex-end', borderTopColor:Colors.shades.shade600, borderTopWidth:1 }}>
+                <Button
+                    title='PREV'
+                    title_size={12}
+                    title_weight='regular'
+                    title_color={Colors.brand.electric}
+                    onPress={() => {
+                        if(active_nav == 1){ return setActiveNav(competition_navs.length) }
+                        return setActiveNav(active_nav - 1)
+                    }}
+                />
+                <View style={{ flex:1 }}>
+                    <Text style={{ paddingBottom:5 }} size={14} color={Colors.brand.slate} weight='bold' textAlign='center'>{viewing_nav.label}</Text>
+                    <View style={{ flexDirection:'row', justifyContent:'center', alignItems:'center' }}>
+                        {competition_navs.map(n => {
+                            const active = n.step == active_nav ? true : false
+                            return (
+                                <View style={{ marginLeft:20, marginRight:20, height:10, width:10, borderRadius:100, backgroundColor:active?Colors.brand.electric:Colors.shades.shade300 }} />
+                            )
+                        })}
+                    </View>
+                </View>
+                <Button
+                    title='NEXT'
+                    title_size={12}
+                    title_weight='regular'
+                    title_color={Colors.brand.electric}
+                    onPress={() => {
+                        if(active_nav == competition_navs.length){ return setActiveNav(1) }
+                        return setActiveNav(active_nav + 1)
+                    }}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default CompetitionTypeCard

package/src/Competition/components/EnterCompetitionPrompt.tsx

@@ -0,0 +1,127 @@
+import { TouchableOpacity, View } from "react-native"
+
+import React, { useEffect, useState } from "react"
+import type { CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, MyPlayerProps, PlayerBalanceProps } from "../../types"
+import Colors from "../../constants/colors"
+import { Button, Icons, Text } from "../../Components"
+import { CompetitionHelpers } from "../api"
+import { view_styles } from "../../constants/styles"
+import moment from "moment-mini"
+
+type EnterCompetitionPromptProps = {
+    player?:MyPlayerProps,
+    player_balance?:PlayerBalanceProps,
+    competition:CompetitionProps,
+    competition_type:CompetitionTypeProps,
+    competition_result_type:CompetitionResultTypeProps,
+    width:number,
+    onVerify: () => void
+    onCancel:() => void,
+    onEnter: (promo_balance?:boolean) => void
+}
+
+const EnterCompetitionPrompt = ({ player, player_balance, competition, competition_type, competition_result_type, width, onCancel, onEnter, onVerify }:EnterCompetitionPromptProps) => {
+    const [ use_promo_balance, setUsePromoBalance ] = useState(false)
+
+    
+    useEffect(() => {
+        if(!player){ return }
+    },[])
+
+    const requires_verification = competition?.buy_in > 0 && competition?.market_type == 'FOR_MONEY' && player?.vouched_status != 'verified' ? true : false
+    const cl = competition.market_type == 'FOR_MONEY'?'$':'E'
+    return (
+        <View style={{ width, backgroundColor:Colors.shades.white, borderTopRightRadius:22, borderTopLeftRadius:22, paddingTop:22 }}>
+           <View nativeID="competition_info">
+            <Text size={16} color={Colors.brand.midnight} weight='bold' textAlign="center">Competition Details</Text>
+                {competition_type ?
+                <View style={{ flexDirection:'row', justifyContent:'center', margin:10 }}>
+                    <View style={{ padding:10, marginRight:4, backgroundColor: CompetitionHelpers.getCompColors(competition_type.type).borderColor, borderRadius:4 }}>
+                        <Text size={12} color={Colors.shades.white} weight='semibold'>{competition_type.type_label}</Text>
+                    </View>
+                    <View style={{ flexDirection:'row', alignItems:'center', padding:10, marginLeft:4, backgroundColor: Colors.shades.white, borderRadius:4, ...view_styles.float }}>
+                        <Text style={{ marginRight:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>{competition.invite_only?'Private':'Public'}</Text>
+                        {competition.invite_only ?
+                        <Icons.EyeOffIcon color={Colors.brand.midnight} size={14}/>
+                        :
+                        <Icons.EyeOnIcon color={Colors.brand.midnight} size={14}/>
+                        }
+                    </View>
+                </View>
+                :<></>}
+                <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign="center">{competition.competition_name}</Text>
+            </View>
+            <View>
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">{moment(competition.scheduled_datetime).format('MMM DD - hh:mm a')}</Text>
+                {competition.competition_description ?
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">{competition.competition_description}</Text>
+                :<></>}
+                {competition_result_type ?
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">{competition_result_type.label}</Text>
+                :<></>}
+                {competition_type?.type == 'pick' ?
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Picks: {competition.max_pick_count}</Text>
+                :<></>}
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Potential Winnings: {cl}{competition.ticket_revenue.toFixed(2)}</Text>
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Ticket Price: {cl}{competition.buy_in.toFixed(2)}</Text>
+                <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign="center">Entries: {competition.tickets_sold}/{competition.available_tickets}</Text>
+            </View>
+            <View nativeID="pick_actions" style={{ flexDirection:'row', padding:10 }}>
+                <Button
+                    style={{ flex:1, marginRight:3 }}
+                    borderRadius={4}
+                    borderWidth={1}
+                    borderColor={Colors.brand.electric}
+                    padding={10}
+                    title="Cancel"
+                    title_color={Colors.brand.electric}
+                    onPress={() => onCancel()}
+                />
+                {requires_verification ?
+                <Button
+                    borderRadius={4}
+                    style={{ flex:2, marginLeft:2 }}
+                    backgroundColor={Colors.utility.warning}
+                    padding={10}
+                    title={`Verify My Account`}
+                    title_color={Colors.shades.white}
+                    onPress={() => onVerify()}
+                />
+                :
+                 <Button
+                    borderRadius={4}
+                    style={{ flex:2, marginLeft:2 }}
+                    backgroundColor={Colors.utility.success}
+                    padding={10}
+                    title={`Enter Competition${competition.buy_in == 0 ? ``:` ${cl}${competition.buy_in}`}`}
+                    title_color={Colors.shades.white}
+                    onPress={() => onEnter(use_promo_balance)}
+                />
+                }
+            </View>
+            {player_balance && player_balance.promo_balance > 0 ?
+            <TouchableOpacity style={{ backgroundColor:Colors.incentive.gold, padding:10, flexDirection:'row', alignItems:'center' }} onPress={() => {
+                if(use_promo_balance){
+                    //Remove promo balance and open_amt
+                    setUsePromoBalance(false);
+                } else {
+                    setUsePromoBalance(true);                    
+                }
+            }}>
+                    <View style={{ marginRight:10, height:30, width:30, borderWidth:1, borderColor:Colors.brand.midnight, justifyContent:'center', alignItems:'center' }}>
+                        {use_promo_balance ?
+                        <View style={{ height:20, width:20, backgroundColor:Colors.brand.midnight }} />
+                        :<></>}
+                    </View>
+                    <View>
+                        <Text size={14} weight='bold' color={Colors.shades.white}>${player_balance?.promo_balance} Promotion Available</Text>
+                        <Text style={{ marginTop:2}} size={12} color={Colors.shades.white} weight='regular'>Press / Click here to use promo balance</Text>
+                    </View>
+                
+            </TouchableOpacity>
+            :<></>}
+        </View>
+    )
+}
+
+export default EnterCompetitionPrompt