be-components 6.5.1 → 6.5.2

package/src/Components/AutoPageFlatList.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  FlatList,
+  StyleSheet,
+} from 'react-native';
+import { View } from './Themed';
+import Pagination from './Pagination';
+
+interface AutoPageFlatListProps<T> {
+  data: T[];
+  reset_key:string,
+  renderItem: ({ item }: { item: T }) => JSX.Element;
+  horizontal?: boolean;
+  time_on_page?: number; // seconds
+  itemHeight?: number;   // required for vertical paging
+  itemWidth?: number;    // required for horizontal paging
+}
+
+function AutoPageFlatList<T>({
+  reset_key,
+  data,
+  renderItem,
+  horizontal = false,
+  time_on_page,
+  itemHeight = 200,
+  itemWidth = 200,
+}: AutoPageFlatListProps<T>) {
+  const [page, setPage] = useState(0);
+  const [containerSize, setContainerSize] = useState<number>(0);
+
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const sizePerItem = horizontal ? itemWidth : itemHeight;
+  const itemsPerPage = containerSize ? Math.max(Math.floor(containerSize / sizePerItem), 1) : 1;
+  const totalPages = Math.ceil(data.length / itemsPerPage);
+
+  // Auto-advance effect
+  useEffect(() => {
+    if (!time_on_page || totalPages <= 1) return;
+
+    intervalRef.current = setInterval(() => {
+      setPage((prev) => (prev + 1) % totalPages);
+    }, time_on_page * 1000);
+
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [time_on_page, totalPages]);
+
+  useEffect(() => {
+      setPage(0)
+  },[reset_key])
+
+  const onContainerLayout = (e: any) => {
+    const size = horizontal ? e.nativeEvent.layout.width : e.nativeEvent.layout.height;
+    setContainerSize(size);
+  };
+
+  const currentData = data.slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage);
+
+  const nextPage = () => setPage((p) => Math.min(p + 1, totalPages - 1));
+  const prevPage = () => setPage((p) => Math.max(p - 1, 0));
+
+  return (
+    <View transparent style={styles.container} onLayout={onContainerLayout}>
+        <View transparent style={{ flex:1 }}>
+            <FlatList
+                data={currentData}
+                renderItem={renderItem}
+                keyExtractor={(_, idx) => String(idx)}
+                horizontal={horizontal}
+                showsHorizontalScrollIndicator={false}
+                showsVerticalScrollIndicator={false}
+            />
+        </View>
+      <View transparent>
+        <Pagination
+            pages={totalPages}
+            onNext={nextPage}
+            onPrevious={prevPage}
+            offset={page}
+        />
+        </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  controls: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 8,
+  },
+  arrow: { fontSize: 24, paddingHorizontal: 8 },
+  disabled: { color: '#ccc' },
+});
+
+export default AutoPageFlatList;

package/src/Components/AutoScrollFlatList.tsx

@@ -171,7 +171,6 @@ const AutoScrollingFlatList = <T,>({
         };
 
   const windowSize = Dimensions.get('window');
-
   return (
     <View
       {...(wrapperProps as any)}

package/src/Components/CircularFadeOut.tsx

@@ -0,0 +1,36 @@
+import React, { useRef, useEffect } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+
+interface Props {
+  start: boolean;
+  animationTime?: number; // seconds
+  onComplete?: () => void;
+  children?: React.ReactNode;
+}
+
+export default function FadeOutOverlay({
+  start,
+  animationTime = 2,
+  onComplete,
+  children,
+}: Props) {
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (start) {
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: animationTime * 1000,
+        useNativeDriver: true,
+      }).start(() => {
+        onComplete?.();
+      });
+    }
+  }, [start]);
+
+  return (
+    <Animated.View style={[StyleSheet.absoluteFill, { opacity }]}>
+      {children}
+    </Animated.View>
+  );
+}

package/src/Components/Jerseys.tsx

@@ -65,13 +65,15 @@ const AthleteImage = ({ athlete, size, number_size, league }:AthleteImageProps)
 type TeamImageProps = {
     team: TeamProps,
     league? :LeagueProps,
-    size:number
+    size:number,
+    padding?:number,
+    backgroundColor?:string
 }
-const TeamImage = ({ team, league , size} : TeamImageProps) => {
+const TeamImage = ({ team, league , size, padding, backgroundColor} : TeamImageProps) => {
     let image_size = size ?? 20
 
     return (
-        <View style={{ alignSelf:'center', justifyContent:'center', alignItems:'center', borderRadius:100, backgroundColor:Colors.shades.white }}>
+        <View style={{ alignSelf:'center', justifyContent:'center', alignItems:'center', borderRadius:100, backgroundColor:backgroundColor ?? Colors.shades.white, padding }}>
             {team.image?.url ?
             <RN_Image source={{ uri: team.image.url }} style={{ height:image_size * 2, width:image_size * 2, borderRadius:100 }} resizeMode='center'/>
 

package/src/Components/LinearDiagnal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, StyleSheet } from "react-native"
+import { View, StyleSheet, type ViewStyle } from "react-native"
 import {LinearGradient} from "expo-linear-gradient";
 import Colors from '../constants/colors';
 import Text from './Text';
@@ -8,16 +8,17 @@ type LinearDiagnalProps = {
     label?: string,
     label_size?:number,
     label_color?:string,
+    parent_style?:ViewStyle,
     left_color:string,
     right_color:string
     no_buffer?:boolean,
     style?:any,
     children?:any
 }
-const LinearDiagnal = ({ left_color, right_color, no_buffer, label, label_size, label_color, style, children }:LinearDiagnalProps) => {
+const LinearDiagnal = ({ left_color, right_color, parent_style, no_buffer, label, label_size, label_color, style, children }:LinearDiagnalProps) => {
     const [ height, setHeight ] = useState(0);
     return (
-        <View style={{ flexDirection:'row' }} onLayout={(ev) => {
+        <View style={{ flexDirection:'row', ...parent_style }} onLayout={(ev) => {
             const { height } = ev.nativeEvent.layout
             setHeight(height)
         }}>

package/src/Components/Pagination.tsx

@@ -9,8 +9,8 @@ type PaginationProps = {
     pages?:number,
     next_title?:string,
     previous_title?:string,
-    onPrevious: () => void,
-    onNext: () => void,
+    onPrevious?: () => void,
+    onNext?: () => void,
     onSelectPage?:(page:number) => void
 }
 
@@ -36,7 +36,7 @@ const Pagination = ({ offset, pages, onPrevious, onNext, next_title, previous_ti
 
     return (
         <View transparent style={{ flexDirection: 'row', alignItems:'center', ...style }}>
-            
+            {onPrevious ?
             <Button
                 disabled={offset == 0}
                 style={{ opacity: offset == 0 ? 0.4: 1 }}
@@ -44,7 +44,7 @@ const Pagination = ({ offset, pages, onPrevious, onNext, next_title, previous_ti
                 type='text'
                 onPress={() => onPrevious()}
             />
-            
+            :<></>}
             <View transparent style={{ flex:1 }} onLayout={(ev) => {
                 const { width } = ev.nativeEvent.layout;
                 setWidth(width);
@@ -59,6 +59,7 @@ const Pagination = ({ offset, pages, onPrevious, onNext, next_title, previous_ti
 
                 />
             </View>
+            {onNext ?
             <Button
                 title={next_title ?? 'NEXT'}
                 style={{ opacity: pages && pages == offset + 1  ? 0.4 : 1 }}
@@ -66,6 +67,7 @@ const Pagination = ({ offset, pages, onPrevious, onNext, next_title, previous_ti
                 type='text'
                 onPress={() => onNext()}
             />
+            :<></>}
         </View>
     )
 }

package/src/Components/Themed.tsx

@@ -99,13 +99,13 @@ export const View = forwardRef(({ ...props }:ViewProps, ref:any) => {
   let floated = (float || type=='input') ? color_mode == 'dark' ? MyViewStyles.floatDark : MyViewStyles.floatLight : {}
   let flexDirection:'row'|'column' = type == 'row' ? 'row' : 'column'
   let alignItems:'center'|undefined = type == 'row' ? 'center' : undefined
-
-  return <DefaultView ref={ref} style={[{ backgroundColor:color, borderRadius, borderColor: border_color, borderWidth: border_width, ...floated }, { flexDirection, alignItems }, style]} {...otherProps} />;
+  return <DefaultView nativeID={props.nativeID} ref={ref} style={[{ backgroundColor:color, borderRadius, borderColor: border_color, borderWidth: border_width, ...floated }, { flexDirection, alignItems }, style]} {...otherProps} />;
 })
 
 
 type BEButtonProps = {
   float?:boolean,
+  nativeID?:string,
   backgroundColor?:string,
   title?:string,
   loading?:boolean,
@@ -149,7 +149,8 @@ export const Button = (props:ButtonProps) => {
           return {
             background_color:C.buttons.background.action,
             text_color:C.text.white,
-            border_width:0
+            border_width:0,
+            border_color:'transparent'
           }
         case 'text':
           return {
@@ -199,7 +200,8 @@ let floated = float ? color_mode == 'dark' ? MyViewStyles.floatDark : MyViewStyl
 
   return (
     <TouchableOpacity 
-      style={[{ borderRadius:8, backgroundColor:!transparent?background_color:'transparent', borderColor:border_color, borderWidth: border_width, padding:15, opacity:loading?0.5:1, ...floated }, style]} 
+      nativeID={props.nativeID}
+    style={[{ borderRadius:8, backgroundColor:!transparent?background_color:'transparent', borderColor:border_color, borderWidth: border_width, padding:15, opacity:loading?0.5:1, ...floated }, style]} 
       disabled={loading || otherProps.disabled}
       { ...otherProps }
       >

package/src/Components/index.tsx

@@ -15,12 +15,16 @@ import LeagueLozenge from './LeagueLozenge';
 import MarketLozenge from './MarketLozenge';
 import AthleteLozenge from './AthleteLozenge';
 import PlayerLozenge from './PlayerLozenge';
+import AutoPageFlatList from './AutoPageFlatList';
+import CircularFadeOut from './CircularFadeOut';
 
 export {
     Button,
     Text,
     Spring,
     AutoScrollingFlatList,
+    CircularFadeOut,
+    AutoPageFlatList,
     Switch,
     MarketLozenge,
     TextInput,

package/src/EventComponents/TeamProfile/index.tsx

@@ -173,7 +173,6 @@ const TeamProfile = ({ team_id, height, distinct_id, show_grades, show_id, init_
                             onOrder={onOrder}
                             onViewEvent={onViewEvent}
                             onViewAdditionalMarkets={onViewAdditionalMarkets}
-
                         />
                     </View>
                 </View>

package/src/GuideView/index.tsx

@@ -0,0 +1,176 @@
+import React, { useRef, useState, useEffect } from "react";
+import { Platform, useWindowDimensions } from "react-native";
+import type { GuideWrapProps } from "../types";
+import { Button, Text, View } from "../Components/Themed";
+import { useColors } from "../constants/useColors";
+import { Icons } from "../Components";
+
+export type GuideWrapperProps = {
+  children: React.ReactNode;
+  guide?: GuideWrapProps;
+};
+
+type Layout = { x: number; y: number;  width: number; height: number };
+
+export default function GuideWrapper({ children, guide }: GuideWrapperProps) {
+    const Colors = useColors();
+  const wrapper_guid = guide ?? {};
+  const { tour, active, onComplete } = wrapper_guid;
+  const refs = useRef<{ [key: string]: any }>({});
+  const [currentStep, setCurrentStep] = useState(0);
+  const [layout, setLayout] = useState<Layout | null>(null);
+  const [ container_layout, setContainerLayout ] = useState({ height: 0, width:0, x:0, y:0 });
+    const { width } = useWindowDimensions();
+    //Check if it is negative
+    const MIN_WIDTH = 300
+    let right = false
+    if(layout){ 
+        let right_side = layout.x + MIN_WIDTH
+        if(right_side > container_layout.width){ right = true } 
+        //Check if it goes over the bottom
+    }
+
+  // Recursively attach refs to children with nativeID
+  const attachRefs = (nodes: React.ReactNode): React.ReactNode => {
+    return React.Children.map(nodes, (child: any) => {
+      if (!React.isValidElement(child)) return child;
+
+      const props = (child.props as any) || {};
+      const nativeID = props.nativeID;
+      const newChildren = props.children ? attachRefs(props.children) : props.children;
+
+      if (nativeID) {
+        return React.cloneElement(child, {
+          ref: (ref: any) => {
+            if (ref) refs.current[nativeID] = ref;
+          },
+          children: newChildren,
+        } as any);
+      } else if (newChildren !== props.children) {
+        return React.cloneElement(child, { children: newChildren } as any);
+      }
+
+      return child;
+    });
+  };
+
+  if (!tour || !active) return <>{children}</>;
+
+  const sortedTour = [...tour].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+  const step = sortedTour[currentStep];
+  if (!step) return <>{attachRefs(children)}</>;
+
+  const ref = refs.current[step.nativeID];
+  // Measure the current step element
+  useEffect(() => {
+    if (!step || !ref) return;
+
+    if (Platform.OS === "web") {
+      const rect = ref.getBoundingClientRect();
+      setLayout({ 
+            x: rect.left - container_layout.x, 
+            y: rect.top - container_layout.y,
+            width: rect.width,
+            height: rect.height 
+        });
+    } else if (ref && typeof ref.measure === "function") {
+      ref.measure(
+        (width: number, height: number, pageX: number, pageY: number) => {
+          setLayout({ x: pageX, y: pageY, width, height });
+        }
+      );
+    }
+  }, [currentStep, step, ref, container_layout.x]);
+
+  const handleNext = () => {
+    if (currentStep + 1 < sortedTour.length) {
+      setCurrentStep(currentStep + 1);
+    } else {
+      onComplete?.("complete");
+    }
+  };
+
+  const handlePrev = () => {
+    if (currentStep > 0) setCurrentStep(currentStep - 1);
+  };
+
+  if (!layout) return <>{attachRefs(children)}</>;
+  const isLastStep = currentStep === sortedTour.length - 1;
+  return (
+    <View style={{ flex: 1 }} onLayout={(ev) => {
+        const l = ev.nativeEvent.layout
+        setContainerLayout({ height:l.height, width: l.width, x: l.x, y:l.y })
+    }}>
+      {/* Attach refs to children */}
+      {attachRefs(children)}
+        
+      {/* Highlight border around active element */}
+      <View
+        transparent
+        style={{
+            position:'absolute',
+            zIndex: 9999999,
+            borderWidth:2,
+            borderColor:Colors.text.success,
+            borderRadius:4,
+            top: layout.y - 5,
+            left: layout.x - 5,
+            width: layout.width + 5,
+            height: layout.height + 10,
+          }}
+      >
+        <View
+            float
+            style={{
+                position:'absolute',
+                maxWidth: width - 10,
+                minWidth:300,
+                borderColor:Colors.text.success,
+                bottom: 0 + layout.height + 15,
+                left: right ? undefined : layout.x + 5,
+                right: right ? 5 : undefined
+            }}
+        >
+            {step.title ?
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <Icons.AlertIcon size={14} color={Colors.text.warning} />
+                <View transparent style={{flex:1, marginLeft:10, marginRight:10, borderLeftWidth:1, borderColor:Colors.borders.light}}>
+                    <Text theme="h1">{step.title}</Text>
+                </View>
+                <Button
+                    style={{ height:30, width:30, borderRadius:100, padding:0, justifyContent:'center', alignItems:'center' }}
+                    title="X"
+                    type="error"
+                    onPress={() => onComplete ? onComplete('cancelled') : console.log('')}
+                />
+            </View>
+            :<></>}
+            {step.body ?
+            <View type="body" style={{ padding:5 }}>
+                <Text theme="h2">{step.body}</Text>
+            </View>
+            :<></>}
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                {currentStep > 0 && (
+                <Button
+                    type='action' 
+                    onPress={handlePrev}
+                    style={{ padding:10, flex:1, margin:2 }}
+                    title="BACK"
+                />
+            )}
+            {!step.clickable && (
+                <Button 
+                    type='success'
+                    style={{ padding:10, flex:1, margin:2 }}
+                    onPress={handleNext}
+                    title={isLastStep ? "Done" : "Next"}
+                />
+            )}
+            </View>
+        </View>
+    </View>
+    </View>
+  );
+}
+

package/src/MarketComponents/api/index.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { APIOverrides } from "../../ApiOverrides"
-import type { AthleteProps, AthleteStatProps, BestAvailableOrderProps, BestAvailableResponseProps, ContestStatProps, EventOrderStatProps, EventProps, ExternalPriceProps, LeagueProps, MarketProps, MarketSideOptionProps, MarketStatsProps, MatchProps, MyPlayerProps, OrderProps, PodcastProps, PositionProps, PublicPlayerProps, TeamProps, TournamentProps, TradeProps } from "../../types"
+import type { AthleteProps, AthleteStatProps, BestAvailableOrderProps, BestAvailableResponseProps, ContestStatProps, EventOrderStatProps, EventProps, ExternalPriceProps, LeagueProps, MarketProps, MarketSideOptionProps, MarketStatsProps, MatchProps, MyPlayerProps, OrderProps, PodcastProps, PositionProps, PublicPlayerProps, TeamProps, TeamRankingProps, TeamRecordProps, TournamentProps, TradeProps } from "../../types"
 import moment, { type Moment } from 'moment-mini';
 import { MarketMaketHelpers } from '../../MarketMaker/api';
 
@@ -88,6 +88,22 @@ const MarketComponentApi = {
             return []
         }
     },
+    getScheduledTournamentsByTeams: async(team_ids:string):Promise<TournamentProps[]> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/tournaments/teams/${team_ids}`);
+            return resp.data.tournaments
+        } catch (e) {
+            return []
+        }
+    },
+    getScheduledTournamentsByAthletes: async(athlete_ids:string):Promise<TournamentProps[]> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/tournaments/athletes/${athlete_ids}`);
+            return resp.data.tournaments
+        } catch (e) {
+            return []
+        }
+    },
     getMarketStatsByEvent: async(event_id:string, event_type:string):Promise<MarketStatsProps[]> => {
         try {
             const resp = await axios.get(`${MK_SVC_API}/v1/markets/event/stats/${event_type}/${event_id}`);
@@ -248,6 +264,15 @@ const MarketComponentApi = {
         }
 
     },
+    getTeamById: async(team_id:string):Promise<undefined | { team:TeamProps, team_rankings:TeamRankingProps[], team_records:TeamRecordProps[], league:LeagueProps }> => {
+        try {
+            console.log('getting data')
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/teams/team/${team_id}`);
+            return resp.data
+        } catch (e) {
+            return undefined
+        }
+    },
     getLeagues:async():Promise<LeagueProps[]> => {
         try {
             const resp = await axios.get(`${EVENT_SVC_API}/v1/leagues`);

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

@@ -98,8 +98,8 @@ const AthleteMarket = ({ event, show_event, disabled_markets, float, image_size,
                     />
                     :<></>}
                     <View style={{ flexGrow:1, padding:10, paddingBottom:0 }}>
-                        <Text weight='bold' style={{ maxWidth:100 }} theme='h2' textAlign='center'>{athlete.first_name} {athlete.last_name}</Text>
-                        <Text style={{ marginTop:3 }} theme='description' textAlign='center' size={12}>{athlete.team?`${athlete.team.abbr}`:''} ({athlete.position})</Text>
+                        <Text weight='bold' style={{ maxWidth:100 }} theme='h2' textAlign={direction == 'horizontal' ?'left' :'center'}>{athlete.first_name} {athlete.last_name}</Text>
+                        <Text style={{ marginTop:3 }} theme='description' textAlign={direction == 'horizontal' ?'left' :'center'} size={12}>{athlete.team?`${athlete.team.abbr}`:''} ({athlete.position})</Text>
                     </View>
                 </View>
                 <View transparent style={{ flexGrow:1, justifyContent:direction=='vertical'?'center':'flex-end', padding:10 }}>

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Image, FlatList, ActivityIndicator, ScrollView } from 'react-native';
-import type { AthleteProps, BEEventProps, BestAvailableOrderProps, CompanyProps, CompetitionProps, EventOrderStatProps, EventProps, LeagueProps, MarketProps, MarketSideOptionProps, OrderProps, ParlayProps, PodcastProps, PollProps, SquaresCompetitionProps, TradeProps } from '../../../types';
+import type { AthleteProps, BEEventProps, BestAvailableOrderProps, CompanyProps, CompetitionProps, EventOrderStatProps, EventProps, GuideWrapProps, LeagueProps, MarketProps, MarketSideOptionProps, OrderProps, ParlayProps, PodcastProps, PollProps, SquaresCompetitionProps, TradeProps } from '../../../types';
 import { view_styles } from '../../../constants/styles';
 import { Icons, LinearDiagnal } from '../../../Components';
 import {TeamEventMarketHelpers} from './api';
@@ -19,12 +19,14 @@ import { Button, Text, View } from '../../../Components/Themed';
 import { useColors } from '../../../constants/useColors';
 import OrderGradeBar from '../OrderGradeBar';
 import moment from 'moment-mini';
+import { GuideView } from 'be-components';
 
 type TeamEventMarketProps = {
     event:EventProps,
     markets:MarketProps[],
     parlays?:ParlayProps[],
     init_expanded?:boolean,
+    guide?: GuideWrapProps,
     onViewMarketStats?:() => void,
     onSetMarket?:(market_id:string, side_type?:string, side_id?:string) => void,
     league?:LeagueProps,
@@ -61,7 +63,7 @@ type TeamEventMarketProps = {
     onActivate?:(event_id:string, event_type:string) => void
     activate_loading?:boolean
 }
-const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, flash_markets, league, float, style, init_expanded, hot_markets_direction, show_id, hide_liquidity, show_podcasts, activate_loading, competitions, squares_competitions, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onSetMarket, onTeamSelect, onFlashSelect, onParlaySelect, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onViewMarketStats, onView, onViewAdditionalMarkets, onTradeLongPress, onTVSelect, onActivate, onEvent, onShare, onPodcastSelect }:TeamEventMarketProps) => {
+const TeamEventMarket = ({ event, guide, parlays, hide_non_primary, disabled_markets, flash_markets, league, float, style, init_expanded, hot_markets_direction, show_id, hide_liquidity, show_podcasts, activate_loading, competitions, squares_competitions, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onSetMarket, onTeamSelect, onFlashSelect, onParlaySelect, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onViewMarketStats, onView, onViewAdditionalMarkets, onTradeLongPress, onTVSelect, onActivate, onEvent, onShare, onPodcastSelect }:TeamEventMarketProps) => {
     const C = useColors();
     const [ market_width, setMarketWidth ] = useState(180);
     const [ expanded_data, setExpandedData ] = useState<{
@@ -89,14 +91,13 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
 
     const ref = useRef(null)
     const isInViewport = useIsInViewport(ref)
-
     useEffect(() => {
         MarketComponentApi.setEnvironment();
         if(init_expanded){ 
             expandedEvent(); 
         }
         if(event.sponsor_id){ getCompanyFromServer(event.sponsor_id) }
-    },[])
+    },[init_expanded])
 
     useEffect(() => {
         if(isInViewport && onEvent && event.sponsor_id){
@@ -409,6 +410,8 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
     const { non_primary_markets, available } = useMemo(() => TeamEventMarketHelpers.sortNonPrimaryMarkets(TeamEventMarketHelpers.getNonPrimaryMarkets(event, markets), event_order_stats, latest_trades),[JSON.stringify(event_order_stats), JSON.stringify(latest_trades), markets.length, event.last_update_datetime])
     const tv_link = event.info?.broadcast?.link && onTVSelect ? event.info?.broadcast?.link : undefined
     return (
+        <GuideView guide={guide}>
+
         <View ref={ref} float={float} style={[style]}>
             {sponsor ?
             <LinearGradient style={{ marginTop:-1, marginLeft:-1, marginRight:-1, padding:10, flexDirection:'row', alignItems:'center', borderTopRightRadius:8, borderTopLeftRadius:8 }} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={[sponsor.brand_primary ?? C.text.h1, sponsor.brand_secondary ?? C.text.h1]}>
@@ -600,7 +603,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                     const { width } = ev.nativeEvent.layout
                     setMarketWidth(width);
                 }}>
-                    <View transparent style={{ marginTop:5, marginBottom:5 }}>
+                    <View nativeID='primary_market_headers' transparent style={{ marginTop:5, marginBottom:5 }}>
                         <FlatList
                             key={`${event.event_id}_market_headers`}
                             data={primary_markets}
@@ -610,6 +613,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                             renderItem={renderMarketHeaders}
                         />
                     </View>
+                    <View transparent nativeID='event_primary_markets'>
                     <FlatList
                         key={`${event.event_id}_primary_markets`}
                         data={primary_markets.sort((a,b) => parseInt(a.market_id) - parseInt(b.market_id))}
@@ -618,6 +622,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                         renderItem={renderPrimaryMarkets}
                         keyExtractor={(item) => item.market_id.toString()}
                     />
+                    </View>
                 </View>
                 : 
                 <Button 
@@ -668,6 +673,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
             <View type='footer' style={{ padding:10, flexDirection:'row', alignItems:'center', flexWrap:'wrap', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
                 {!hide_liquidity ?
                 <Button 
+                nativeID='team_event_liquidity'
                 style={{ flex:1, flexDirection:'row', minWidth:115, padding:0 }} 
                 type='text'
                 
@@ -688,6 +694,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                 <Button 
                     float
                     type='squares'
+                    nativeID='team_event_squares'
                     style={{ marginRight:3, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22 }}
                     onPress={() => handleSelectSquares()}>
                     <Icons.SquaresIcon size={18} color={C.text.white} />
@@ -709,6 +716,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                 <Button 
                     float
                     type='competition'
+                    nativeID='team_event_competitions'
                     style={{ marginRight:3, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22 }}
                     onPress={() => handleSelectCompetition()}>
                     <Icons.PickEmIcon size={14} color={C.text.white} />
@@ -720,6 +728,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                 {non_primary_markets.length > 0 && !hide_non_primary ?
                 <Button 
                     float
+                    nativeID='team_event_non_primary'
                     style={{ height:35, width:35, justifyContent:'center', borderRadius:100, alignItems:'center' }} 
                     onPress={() => expandedEvent()}
                 >
@@ -727,6 +736,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                 </Button>
                 :available && !expanded && !hide_non_primary ?
                 <Button
+                    nativeID='team_event_non_primary'
                     title='MORE'
                     type='info'
                     style={{ padding:10 }}
@@ -796,7 +806,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
                 :<></>}
             </View>
             :<></>}
-            {expanded ?
+            {expanded && !hide_non_primary ?
             <View transparent>
                 <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
                     <View transparent style={{ flexGrow:1 }}>
@@ -849,6 +859,7 @@ const TeamEventMarket = ({ event, parlays, hide_non_primary, disabled_markets, f
             </View>
             :<></>}
         </View>
+        </GuideView>
     )
 }