be-components 1.9.8 → 1.9.9

package/src/MarketComponents/components/BetScopeIndicator.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View } from 'react-native';
+
+type BetScopeIndicatorProps = {
+    bet_scope_grade?: number
+}
+
+const BetScopeIndicator = ({ bet_scope_grade }:BetScopeIndicatorProps) => {
+    if(!bet_scope_grade || bet_scope_grade < 100){ return <></> }
+    return (
+        <View>
+            
+        </View>
+    )
+}
+
+export default React.memo(BetScopeIndicator, (left, right) => left.bet_scope_grade == right.bet_scope_grade)

package/src/MarketComponents/components/MarketButton/index.tsx

@@ -43,7 +43,7 @@ const MarketCard = ({ side_option, locked, show_grades, market, trade, order, on
             }, 600);
         }
     },[trade])
-    
+
     return (
         <TouchableOpacity 
             style={{ flex:1, backgroundColor:color, borderRadius:4}}
@@ -81,4 +81,7 @@ const MarketCard = ({ side_option, locked, show_grades, market, trade, order, on
     )
 }
 
-export default MarketCard
+export default React.memo(MarketCard, (left, right) => {
+    if(JSON.stringify(left) != JSON.stringify(right)){ return false }
+    return true
+})

package/src/MarketComponents/components/OrderGradeBar.tsx

@@ -68,7 +68,7 @@ const OrderGradeBar = ({ grade, view_type, mask, onSelectGrade }:OrderGradeBarPr
         if(!grade && grade !== 0){ return <></> }
         //Check if the grade is greater than the minumum of the box
         const filled = grade >= data.item.min ? true : false
-        const success = grade > 97.5 ? true : false
+        const success = grade > 100 ? true : false
         const locked = !premium ? true : false
 
         //Render the box
@@ -84,7 +84,7 @@ const OrderGradeBar = ({ grade, view_type, mask, onSelectGrade }:OrderGradeBarPr
     }
 
     if(view_type == 'market'){
-        const success = grade > 97.5 ? true : false
+        const success = grade > 100 ? true : false
         if(!premium){
             return (<></>)
         }

package/src/MarketComponents/components/TeamEventMarket/index.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { View, Image, FlatList, TouchableOpacity, ActivityIndicator, ScrollView } from 'react-native';
-import type { AthleteProps, BestAvailableOrderProps, CompetitionProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, OrderProps, SquaresCompetitionProps, TradeProps } from '../../../types';
+import type { AthleteProps, BestAvailableOrderProps, CompanyProps, CompetitionProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, OrderProps, SquaresCompetitionProps, TradeProps } from '../../../types';
 import { view_styles } from '../../../constants/styles';
 import { Button, Icons, LinearDiagnal, Text } from '../../../Components';
 import {TeamEventMarketHelpers} from './api';
@@ -11,6 +11,9 @@ import EventMarket from '../../components/EventMarket';
 
 import { MarketComponentApi, MarketComponentHelpers } from '../../api';
 import { MarketButtonHelpers } from '../MarketButton/api';
+import LinearGradient from 'react-native-linear-gradient';
+import { useIsInViewport } from '../../../Components/ViewportObserver';
+import type { BEEventProps } from '../../../Observer/api/types';
 
 type TeamEventMarketProps = {
     event:EventProps,
@@ -25,6 +28,7 @@ type TeamEventMarketProps = {
     default_price_view: 'last_trade'|'best_available',
     onView:(data:{ event_id:string, event_type:string, market_id:string, side_type?:string, side_id?:string }) => void,
     onOrder:(order:OrderProps) => void,
+    onEvent?:(be_event:BEEventProps) => void,
     onExpand?:(expanded:boolean) => void,
     show_grades?:boolean,
     onCompetitionSelect:(competition_id:string) => void,
@@ -34,7 +38,7 @@ type TeamEventMarketProps = {
     onActivate?:(event_id:string, event_type:string) => void
     activate_loading?:boolean
 }
-const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, competitions, squares_competition, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets, onTradeLongPress, onActivate }:TeamEventMarketProps) => {
+const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, competitions, squares_competition, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets, onTradeLongPress, onActivate, onEvent }:TeamEventMarketProps) => {
     const [ expanded_data, setExpandedData ] = useState<{
         expanded:boolean,
         loaded:boolean,
@@ -46,11 +50,12 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
         expanded:false,
         athletes:[]
     })
-    const [ sponsor, setSponsor ] = useState(false);
+    const [ sponsor, setSponsor ] = useState<CompanyProps|undefined>(undefined);
     const [ competitions_expanded, setCompetitionsExpanded ] = useState(false);
     const { expanded, athletes, loaded, loading } = expanded_data;
     const event_status = TeamEventMarketHelpers.getEventStatus(event);
-
+    const ref = useRef(null)
+    const isInViewport = useIsInViewport(ref)
 
     useEffect(() => {
         MarketComponentApi.setEnvironment();
@@ -58,6 +63,24 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
         if(event.sponsor_id){ getCompanyFromServer(event.sponsor_id) }
     },[])
 
+    useEffect(() => {
+        if(isInViewport && onEvent && event.sponsor_id){
+            let be_event:BEEventProps = {
+                event_name:'company_view',
+                event_data: {
+                    view_type: 'contest',
+                    view_location: 'list',
+                    contest_type:'team',
+                    contest_id:event.event_id,
+                    company_id: event.sponsor_id
+                },
+                level:2
+            }
+            onEvent(be_event)
+        }
+    },[isInViewport])
+
+
     const getCompanyFromServer = async(company_id:string) => {
         const resp = await MarketComponentApi.getCompanyById(company_id)
         if(!resp?.company){ return }
@@ -84,7 +107,9 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
          })
     }
     
-    const primary_markets = TeamEventMarketHelpers.getPrimaryMarkets(event, markets);
+    const primary_markets = useMemo(() => {
+        return TeamEventMarketHelpers.getPrimaryMarkets(event, markets)
+    }, [markets.length])
     
     const handleSelectCompetition = () => {
         if(!competitions || competitions.length == 0){ return }
@@ -146,7 +171,8 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
                 <Text size={12} color={Colors.brand.midnight} textAlign='center'>{data.item.type.toUpperCase()}</Text>
             </View>
         )
-    },[])
+    },[primary_markets.length])
+
 
     const renderNonPrimaryMarkets = useCallback((data: { item:EventOrderStatProps, index:number }) => {
         const market = markets.find(m => m.market_id == data.item.market_id);
@@ -219,12 +245,36 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
     if(!event.away || !event.home){ return <></> }
 
     const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats);
-    const { non_primary_markets, available } = TeamEventMarketHelpers.sortNonPrimaryMarkets(TeamEventMarketHelpers.getNonPrimaryMarkets(event, markets), event_order_stats, latest_trades)
+    const { non_primary_markets, available } = useMemo(() => TeamEventMarketHelpers.sortNonPrimaryMarkets(TeamEventMarketHelpers.getNonPrimaryMarkets(event, markets), event_order_stats, latest_trades),[])
+
     return (
-        <View style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+        <View ref={ref} style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600 }}>
             {sponsor ?
-            <Text>HEY</Text>
-            :<></>}
+            <LinearGradient style={{ marginTop:-1, marginLeft:-1, marginRight:-1, padding:10, flexDirection:'row', borderTopRightRadius:8, borderTopLeftRadius:8 }} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={[sponsor.brand_primary ?? Colors.brand.midnight, sponsor.brand_secondary ?? Colors.brand.cyan]}>
+                <View style={{ height:30, width:30, borderRadius:4, backgroundColor:Colors.shades.white }}>
+                    <Image
+                        source={{ uri: sponsor.company_image?.url }}
+                        style={{ height:30, width:30, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text size={12} color={Colors.shades.white} weight='bold'>Brought to you by {sponsor.company_name}</Text>
+                    <View style={{ marginTop:3, flexDirection:'row', alignItems:'center' }}>
+                        {show_id ?
+                        <Text style={{ marginLeft:2, marginRight:3 }} size={12} color={Colors.shades.white} weight='semibold' selectable>{event.event_id} </Text>
+                        :<></>}
+                        {event.event_sub_title ?
+                        <Text size={12} color={Colors.shades.white} weight='semibold'>{event.event_sub_title}</Text>
+                        :<></>}
+                    </View>
+                </View>
+                <View style={{ flexDirection:'row', alignItems:'center' }}>
+                    <Icons.TVIcon size={10} color={Colors.shades.white} />
+                    <Text style={{ marginLeft:8 }} size={12} color={Colors.shades.white} weight='semibold'>{event.info?.broadcast?.network}</Text>
+                </View>
+            </LinearGradient>
+            :
             <View nativeID='event_header_data' style={{ flexDirection:'row', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
                 {onActivate && event_status != 'closed' ?
                 <Button
@@ -250,6 +300,7 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
                     <Text style={{ marginLeft:8 }} size={12} color={Colors.brand.midnight} weight='semibold'>{event.info?.broadcast?.network}</Text>
                 </View>
             </View>
+            }
             <View nativeID='primary_markets' style={{ flexDirection:'row' }}>
                 <View nativeID='team_details' style={{ flex:1, padding:5, paddingRight:0 }}>
                     <View style={{ flexDirection:'row', alignItems:'center', marginTop:5, marginBottom:5, marginLeft:10 }}>
@@ -418,4 +469,7 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
     )
 }
 
-export default TeamEventMarket
+export default React.memo(TeamEventMarket, (left, right) => {
+    if(JSON.stringify(left) != JSON.stringify(right)){ return false }
+    return true
+})