be-components 6.1.0 → 6.1.2

package/src/BetMatch/components/BetMatchCard.tsx

@@ -1,28 +1,37 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Button, Text, View } from "../../Components/Themed"
-import { FlatList, Image } from 'react-native';
-import type { AthleteProps, ExternalPriceProps, LeagueProps, OrderProps, PublicPlayerProps, TeamProps } from '../../types';
+import { ActivityIndicator, FlatList, Image } from 'react-native';
+import type { AthleteProps, ExternalPriceProps, LeagueProps, MyPlayerProps, OrderProps, PlayerPremiumItem, PremiumItemProps, PublicPlayerProps, TeamProps } from '../../types';
 import moment from 'moment-mini';
 import { AthleteImage, TeamImage } from '../../Components/Jerseys';
 import OrderGradeBar from '../../MarketComponents/components/OrderGradeBar';
 import { MarketComponentApi, MarketComponentHelpers } from '../../MarketComponents/api';
 import { Icons } from '../../Components';
 import { useColors } from '../../constants/useColors';
-import Pagination from '../../Components/Pagination';
+import { PremiumHelpers } from '../../Premium/api';
+import ALaCartePremium from '../../Premium/components/ALaCartePremium';
 
 type BetMatchCardProps = {
-    height:number,
-    player:PublicPlayerProps,
+    player?:PublicPlayerProps,
+    me?:MyPlayerProps,
     contest_title:string,
     time_detail:string,
     league?:LeagueProps,
     team?:TeamProps,
+    player_premium_items?:PlayerPremiumItem[],
+    premium_items?:PremiumItemProps[]
     athlete?:AthleteProps,
     order:OrderProps,
-    onOrder:(order:OrderProps) => void
+    action_loading:boolean,
+    onViewPremium?:(premium_item_id?:string) => void,
+    onSelectGrade:(order:OrderProps) => void,
+    onViewPlayer:(player:PublicPlayerProps) => void,
+    onOrder:(order:OrderProps) => void,
+    onReject:(order:OrderProps) => void,
+    onPurchasePremium:(ppi:PlayerPremiumItem) => void
 }
 const sections = ['header', 'page', 'offer', 'details','available', 'actions']
-const BetMatchCard = ({ order, height, player, contest_title, league, team, athlete }:BetMatchCardProps) => {
+const BetMatchCard = ({ me, premium_items, player_premium_items, order, action_loading, player, contest_title, league, team, athlete, onViewPremium, onViewPlayer, onPurchasePremium, onOrder, onReject }:BetMatchCardProps) => {
     const Colors = useColors();
     const [ betmatch, setBetMatch ] = useState<{
         loading:boolean,
@@ -30,14 +39,20 @@ const BetMatchCard = ({ order, height, player, contest_title, league, team, athl
     }>({
         loading:false
     })
-    const { external_price } = betmatch;
+    const { loading, external_price } = betmatch;
+
+    const premium_external_price = PremiumHelpers.getItemFromIdentifer('external_pricing', premium_items, player_premium_items);
+    const premium_order_grades = PremiumHelpers.getItemFromIdentifer('order_grades', premium_items, player_premium_items);
+    const show_external_prices = premium_external_price.player_premium_item?.status == 'active' || me?.type == 'premium' ? true : false
+    const show_grades = premium_order_grades.player_premium_item?.status == 'active' || me?.type == 'premium' ? true : false
 
     useEffect(() => {
         MarketComponentApi.setEnvironment();
         getExternalPrice()
-    },[order.order_id]);
+    },[order.order_id, show_external_prices]);
 
     const getExternalPrice = async() => {
+        if(!show_external_prices){ return }
         setBetMatch({ loading:true });
         let external_prices = await MarketComponentApi.getExternalPrices(order.event_type, order.event_id, order.market_id, order.side);
         if(order.side_type == 'athlete'){
@@ -49,13 +64,15 @@ const BetMatchCard = ({ order, height, player, contest_title, league, team, athl
         //Find consensus!
         let consensus_price = external_prices.find(p => p.external_name.toLowerCase() == 'consensus');
         if(!consensus_price){ consensus_price = external_prices[0] }
-        setBetMatch({
-            loading:false,
-            external_price: consensus_price
-        })
+        setTimeout(() => {
+            setBetMatch({
+                loading:false,
+                external_price: consensus_price
+            })
+        }, 250);
     }
 
-    const renderSections = (data:{ item:string, index:number }) => {
+    const renderSections = useCallback((data:{ item:string, index:number }) => {
         switch(data.item){
             case 'header':
                 return (
@@ -72,7 +89,7 @@ const BetMatchCard = ({ order, height, player, contest_title, league, team, athl
                 )
             case 'offer':
                 return (
-                    <View transparent type='row' style={{ margin:15 }}>
+                    <View transparent type='row' style={{ margin:10 }}>
                         <View float style={{ borderRadius:100, padding:2 }}>
                             {athlete ?
                             <AthleteImage
@@ -101,8 +118,8 @@ const BetMatchCard = ({ order, height, player, contest_title, league, team, athl
                 )
             case 'details':
                 return (
-                    <View transparent style={{ margin:15 }}>
-                        <View transparent type='row' style={{ padding:15 }}>
+                    <View transparent style={{ margin:10 }}>
+                        <View transparent type='row' style={{ padding:10 }}>
                             <View transparent style={{ flex:1 }}>
                                 <Text theme='description'>Offer Probability</Text>
                                 <Text theme='h1' size={18} style={{ marginTop:4 }}>{(order.probability * 100).toFixed(2)}%</Text>
@@ -112,22 +129,39 @@ const BetMatchCard = ({ order, height, player, contest_title, league, team, athl
                                 <Text theme='h1' size={18} style={{ marginTop:4 }}>{MarketComponentHelpers.getOddsLabel(order.odds)}</Text>
                             </View>
                         </View>
-                        {external_price ?
-                        <View transparent type='row' style={{ padding:15 }}>
+                        {show_external_prices ?
+                        <View transparent type='row' style={{ padding:10 }}>
                             <View transparent style={{ flex:1 }}>
                                 <Text theme='description'>External Price</Text>
-                                <Text theme='h1' size={18} style={{ marginTop:4 }}>{external_price.external_name}</Text>
+                                {loading ?
+                                <ActivityIndicator size={20} color={Colors.text.h1} style={{ alignSelf:'flex-start', marginTop:4 }} />
+                                : !show_external_prices ?
+                                <Text theme='error' size={14} style={{ marginTop:4 }}>{!show_external_prices ? 'External prices not enabled for account' : external_price ? external_price.external_name: 'Unable to find'}</Text>
+                                :
+                                <Text theme='h1' size={18} style={{ marginTop:4 }}>{external_price ? external_price.external_name: 'Unable to find'}</Text>
+                                }
                             </View>
                             <View transparent style={{ flex:1 }}>
                                 <Text theme='description'>Suggested Odds</Text>
-                                <Text theme='h1' size={18} style={{ marginTop:4 }}>{MarketComponentHelpers.getOddsLabel(external_price.odds)}</Text>
+                                <Text theme='h1' size={18} style={{ marginTop:4 }}>{external_price ? MarketComponentHelpers.getOddsLabel(external_price.odds): '...'}</Text>
                             </View>
                         </View>
+                        :premium_external_price.premium_item ?
+                            <ALaCartePremium
+                                style={{ margin:5 }}
+                                premium_item={premium_external_price.premium_item}
+                                player_premium_item={premium_external_price.player_premium_item}
+                                player={me}
+                                identifier='external_pricing'
+                                onPurchaseItem={onPurchasePremium}
+                                onViewPremium={(id) => onViewPremium ? onViewPremium(id) : console.log('')}
+                            />
                         :<></>}
-                        <View transparent type='row' style={{ padding:15 }}>
+                        {show_grades ?
+                        <View transparent type='row' style={{ padding:10 }}>
                             <View transparent style={{ flex:1 }}>
                                 <Text theme='description'>Offer Grade</Text>
-                                {!order?.grade ?
+                                {!order?.grade || !show_grades ?
                                 <Text style={{ marginTop:3 }} theme="h1">N/A</Text>
                                 :order.grade > 105 ?
                                 <Text style={{ marginTop:3 }} theme="h1" color={Colors.text.success}>Amazing Price!</Text>
@@ -140,8 +174,19 @@ const BetMatchCard = ({ order, height, player, contest_title, league, team, athl
                                 }
                                 <Text theme='h1' size={18} style={{ marginTop:4 }}></Text>
                             </View>
-                            <OrderGradeBar grade={order.grade} view_type='card' />
+                            <OrderGradeBar mask={!show_grades} grade={order.grade} view_type='card' onSelectGrade={() => console.log('')}/>
                         </View>
+                        :premium_order_grades.premium_item ?
+                            <ALaCartePremium
+                                style={{ margin:5 }}
+                                premium_item={premium_order_grades.premium_item}
+                                player_premium_item={premium_order_grades.player_premium_item}
+                                player={me}
+                                identifier='order_grades'
+                                onPurchaseItem={onPurchasePremium}
+                                onViewPremium={(id) => onViewPremium ? onViewPremium(id) : console.log('')}
+                            />
+                        :<></>}
                     </View>
                 )
             case 'available':
@@ -150,22 +195,22 @@ const BetMatchCard = ({ order, height, player, contest_title, league, team, athl
                         <View transparent type='row' style={{ padding:15 }}>
                             <View transparent style={{ flex:1 }}>
                                 <Text theme='description'>Available</Text>
-                                <Text theme='h1' size={18} style={{ marginTop:4 }}>${order.open_amt.toFixed(2)}</Text>
+                                <Text theme='h1' size={24} style={{ marginTop:4 }}>${order.open_amt.toFixed(2)}</Text>
                             </View>
                             <View transparent style={{ flex:1 }}>
                                 <Text theme='description'>Potential Winnings</Text>
-                                <Text theme='h1' size={18} style={{ marginTop:4 }}>${order.potential_winnings.toFixed(2)}</Text>
+                                <Text theme='h1' size={24} style={{ marginTop:4 }}>${order.potential_winnings.toFixed(2)}</Text>
                             </View>
                         </View>
                     </View>
                 )
             default: return <></>
         }
-    }
+    }, [JSON.stringify(external_price), order.order_id])
 
     return (
-        <View style={{ flex:1, height }}>
-            <View float transparent style={{ flex:1, marginBottom:30 }}>
+        <View float style={{ flex:1 }}>
+            <View float transparent style={{ marginBottom:30, flex:1 }}>
                 <View float type='footer' style={{ position:'absolute', left:0, right:0, bottom: -30, height:50, margin:0, borderRadius:8 }} />
                 <View float type='footer' style={{ position:'absolute', left:0, right:0, bottom: -15, height:50, margin:-5, borderRadius:8 }} />
                 <View transparent style={{ flex:1 }}>
@@ -177,23 +222,24 @@ const BetMatchCard = ({ order, height, player, contest_title, league, team, athl
                     />
                 </View>
                 <View type='footer' style={{ flexDirection:'row', padding:5 }}>
-                    <Button float style={{ flex:1, marginRight:4, flexDirection:'row', justifyContent:'center', alignItems:'center' }}>
+                    <Button float disabled={action_loading} loading={action_loading} style={{ flex:1, marginRight:4, flexDirection:'row', justifyContent:'center', alignItems:'center', opacity: action_loading?0.5:1 }} onPress={() => onReject(order)}>
                         <Icons.CloseIcon size={14} color={Colors.text.error}/>
                         <Text theme='h2' style={{ marginLeft:10 }} color={Colors.text.error}>Decline</Text>
                     </Button>
-                    <Button float style={{ flex:1, marginLeft:4, flexDirection:'row', justifyContent:'center', alignItems:'center' }}>
+                    <Button float disabled={action_loading} loading={action_loading} style={{ flex:1, marginLeft:4, flexDirection:'row', justifyContent:'center', alignItems:'center', opacity: action_loading?0.5:1 }} onPress={() => onOrder(order)}>
                         <Icons.CheckIcon size={14} color={Colors.text.success}/>
                         <Text theme='h2' style={{ marginLeft:10 }} color={Colors.text.success}>Accept</Text>
                     </Button>
                 </View>
+                {player ?
                 <View float type='footer' style={{ flexDirection:'row', alignItems:'center', borderRadius:8, margin:-10, marginTop:0, padding:10 }}>
-                    <View float style={{ padding:2, borderRadius:100 }}>
+                    <Button transparent float style={{ padding:2, borderRadius:100 }} onPress={() => onViewPlayer(player)}>
                         <Image
                             source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
                             style={{ height:40, width:40, borderRadius:100}}
                             resizeMode='cover'
                         />
-                    </View>
+                    </Button>
                     <View transparent style={{ flex:1, marginLeft:15 }}>
                         <Text theme='h1'>@{player.username}</Text>
                         <Text theme='description' style={{ marginTop:3 }}>Joined {moment(player.create_datetime).fromNow()}</Text>
@@ -203,15 +249,8 @@ const BetMatchCard = ({ order, height, player, contest_title, league, team, athl
                         <Text theme='h2'>{order.region}</Text>
                     </View>
                 </View>
-            </View>
-            <View transparent style={{ padding:5 }}>
-                <Pagination
-                    pages={10}
-                    onNext={() => console.log('')}
-                    onPrevious={() => console.log('')}
-                    offset={0}
-                />
-            </View>            
+                :<></>}
+            </View>   
         </View>
     )
 }