be-components 6.0.9 → 6.1.0

package/src/BetMatch/components/BetMatchCardSmall.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { AthleteProps, LeagueProps, OrderProps, PublicPlayerProps, TeamProps } from "../../types"
+import { useColors } from '../../constants/useColors';
+import { MarketComponentHelpers } from '../../MarketComponents/api';
+import { Image } from 'react-native';
+import { AthleteImage, TeamImage } from '../../Components/Jerseys';
+import OrderGradeBar from '../../MarketComponents/components/OrderGradeBar';
+
+type BetMatchCardSmallProps = {
+    player:PublicPlayerProps,
+    contest_title:string,
+    time_detail:string,
+    league?:LeagueProps,
+    team?:TeamProps,
+    athlete?:AthleteProps,
+    order:OrderProps,
+    onOrder:(order:OrderProps) => void
+}
+const BetMatchCardSmall = ({ contest_title, time_detail, team, athlete, league, order, onOrder }:BetMatchCardSmallProps) => {
+    const Colors = useColors();
+    return (
+        <Button float style={{ flex:1, padding:0 }} onPress={() => onOrder(order)}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:5, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <View float style={{ borderRadius:100, padding:2 }}>
+                {athlete ?
+                   <AthleteImage
+                    athlete={athlete}
+                    size={36}
+                   />
+                :team ?
+                <TeamImage
+                    team={team}
+                    size={14}
+                   />
+                :league ?
+                <Image
+                    source={{ uri: league.league_image }}
+                    style={{ height:36, width:36, borderRadius:100 }}
+                    resizeMode='cover'
+                />
+                :<></>
+                }
+                </View>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='description' size={12}>{order.title}</Text>
+                    <Text theme='h1' size={12} color={Colors.text.success} style={{ marginTop:3 }}>${order.open_amt.toFixed(2)} Available</Text>
+                </View>
+            </View>
+            <View type='body' style={{ flex:1 }}>
+                
+                <View transparent type='row' style={{ padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme='h2' size={12}>Offer Odds:</Text>
+                        <OrderGradeBar style={{ alignItems:'flex-start', marginTop:5 }} grade={order.grade} view_type='card' />
+                    </View>
+                    <Text theme='h1'>{MarketComponentHelpers.getOddsLabel(order.odds)}</Text>
+                </View>
+            </View>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', borderBottomLeftRadius:8, borderBottomRightRadius:8, padding:5 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h2'>{contest_title}</Text>
+                    <Text theme='light' style={{ marginTop:3 }}>{time_detail}</Text>
+                </View>
+            </View>
+        </Button>
+    )
+}
+
+export default BetMatchCardSmall

package/src/BetMatch/index.tsx

@@ -0,0 +1,192 @@
+import React, { useEffect, useState } from 'react';
+import { Text, View } from "../Components/Themed";
+import { MyOrdersHelpers } from '../MarketComponents/components/MyOrderList/api';
+import type { AthleteProps, EventProps, LeagueProps, MarketProps, MatchProps, OrderProps, PlayerFilterProps, PublicPlayerProps, TeamProps, TournamentProps } from '../types';
+import { BetMatchApi } from './api';
+import { ActivityIndicator, FlatList } from 'react-native';
+import BetMatchCardSmall from './components/BetMatchCardSmall';
+import { SocialOrderHelpers } from '../SocialComponents/api';
+import moment from 'moment-mini';
+import { useColors } from '../constants/useColors';
+import BetMatchCard from './components/BetMatchCard';
+
+type BetMatchProps = {
+    player_filter_id:string,
+    style?:any,
+    player_id:string
+}
+const sections = ['filter','orders', 'bet']
+const BetMatch = ({ player_filter_id }:BetMatchProps) => {
+    const Colors = useColors();
+    const [ module_size, setModuleSize ] = useState({ width:0, height:0 });
+    const [ viewing_order_id, setViewingOrderId ] = useState<string|undefined>(undefined);
+    const [ static_data, setStaticData ] = useState<{
+        static_loading:boolean,
+        leagues:LeagueProps[],
+        markets:MarketProps[],
+    }>({
+        static_loading: false, leagues:[], markets:[]
+    });
+    const { leagues } = static_data;
+    const [ filter_data, setFilterData ] = useState<{
+        loading:boolean,
+        player_filter?:PlayerFilterProps,
+        orders:OrderProps[],
+    }>({
+        loading:false, orders:[]
+    });
+    const { loading, player_filter, orders } = filter_data;
+    const viewing_order = orders.find(o => o.order_id == viewing_order_id);
+    const [ contest_data, setContestData ] = useState<{
+        contest_loading:boolean,
+        players:PublicPlayerProps[],
+        events:EventProps[],
+        tournaments:TournamentProps[],
+        matches:MatchProps[],
+        teams:TeamProps[],
+        athletes:AthleteProps[]
+    }>({
+        contest_loading: false, players: [], events: [], tournaments: [], matches: [], teams:[], athletes: []
+    });
+    const { players, events, tournaments, matches, teams, athletes } = contest_data;
+    
+    useEffect(() => {
+        BetMatchApi.setEnvironment()
+        runFilter(player_filter_id);
+        getStaticData();
+    },[player_filter_id]);
+
+    const runFilter = async(id:string) => {
+        setFilterData({ ...filter_data, loading: true });
+        const pf = await BetMatchApi.getPlayerFilterById(id);
+        if(!pf){ return }
+        const filter_orders = await BetMatchApi.runPlayerFilter(id);
+        setFilterData({
+            ...filter_data,
+            orders: filter_orders,
+            player_filter: pf,
+            loading: false
+        });
+        getContestData(filter_orders);
+    }
+
+    const getStaticData = async() => {
+        setStaticData({ ...static_data, static_loading:true });
+        const lgs = await BetMatchApi.getLeagues();
+        const makets = await BetMatchApi.getMarkets();
+        setStaticData({ 
+            ...static_data,
+            static_loading:true,
+            leagues: lgs,
+            markets: makets
+        });
+    }
+
+    const getContestData = async(orders:OrderProps[]) => {
+        setContestData({ ...contest_data, contest_loading:true });
+        const { event_ids, tournament_ids, match_ids, athlete_ids, team_ids, player_ids } = MyOrdersHelpers.getContestsFromOrders(orders);
+        const plyers = await BetMatchApi.getPlayersByPlayerIds(player_ids);
+        const evs = await BetMatchApi.getEventsByEventIds(event_ids);
+        const tourns = await BetMatchApi.getTournamentsByTournamentIds(tournament_ids);
+        const matchs = await BetMatchApi.getMatchesByMatchIds(match_ids);
+        const aths = await BetMatchApi.getAthletesByIds(athlete_ids);
+        const tms = await BetMatchApi.getTeamsByIds(team_ids);
+        setContestData({
+            ...contest_data,
+            players: plyers,
+            events: evs,
+            tournaments: tourns,
+            matches: matchs,
+            teams: tms,
+            athletes: aths
+        })
+    }
+
+    const renderOrders = (data:{ item:OrderProps, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        if(!player){ return <></> }
+        const { team, athlete, league, title, time } = SocialOrderHelpers.getContestDetails(data.item, events, tournaments, matches, athletes, teams, leagues)
+        return (
+            <View transparent key={data.item.order_id.toString()} style={{ width:150, maxWidth:250, flexGrow:1, margin:7 }}>
+                <BetMatchCardSmall
+                    player={player}
+                    team={team}
+                    athlete={athlete}
+                    contest_title={title}
+                    time_detail={time}
+                    league={league}
+                    order={data.item}
+                    onOrder={(order) => setViewingOrderId(order.order_id)}
+                />
+            </View>
+        )
+    }
+
+    const renderSections = (data:{item:string, index:number}) => {
+        switch(data.item){
+            case 'filter':
+                if(!player_filter){ return <></> }
+                if(viewing_order){ return <></> }
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                        <View transparent style={{ flex:1, marginRight:10 }}>
+                            <Text theme='h1'>{player_filter.name}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Created {moment(player_filter.create_datetime).fromNow()}</Text>
+                        </View>
+                        <View transparent style={{ alignItems:'flex-end' }}>
+                            <Text theme='h1'>{orders.length}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Offers</Text>
+                        </View>
+                    </View>
+                )
+            case 'orders':
+                if(viewing_order){ return <></> }
+                return (
+                    <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        {orders.map((item, index) => {
+                            return renderOrders({ item, index })
+                        })}
+                    </View>
+                )
+            case 'bet':
+                if(!viewing_order){ return <></> }
+                const player = players.find(p => p.player_id == viewing_order.player_id);
+                if(!player){ return <></> }
+                const { team, athlete, league, title, time } = SocialOrderHelpers.getContestDetails(viewing_order, events, tournaments, matches, athletes, teams, leagues)
+                return (
+                    <View style={{ flex:1, padding:20 }}>
+                        <BetMatchCard
+                            player={player}
+                            height={module_size.height - 60}
+                            order={viewing_order}
+                            team={team}
+                            athlete={athlete}
+                            league={league}
+                            time_detail={time}
+                            contest_title={title}
+                            onOrder={(order) => console.log(order)}
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+    return (
+        <View style={{ flex:1 }} onLayout={(ev) => {
+            const { width, height } = ev.nativeEvent.layout;
+            setModuleSize({ width, height })
+        }}>
+            {loading ?
+            <ActivityIndicator size='large' color={Colors.text.h1} />
+            :<></>}
+            <FlatList
+                data={sections}
+                key={'filter_sections'}
+                keyExtractor={item => item}
+                renderItem={renderSections}
+            />
+        </View>
+    )
+}
+
+export default BetMatch

package/src/Components/AutoScrollFlatList.tsx

@@ -0,0 +1,169 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  FlatList,
+  View,
+  type LayoutChangeEvent,
+  type ViewStyle,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  Platform,
+} from 'react-native';
+
+type AutoScrollingFlatListProps<T> = {
+  data: T[];
+  renderItem: ({ item, index }: { item: T; index: number }) => React.ReactElement;
+  horizontal?: boolean;
+  style?: ViewStyle;
+  speed: number; // pixels per second
+  minDuration?: number; // milliseconds (optional)
+  onCompleteScroll?: (completed: boolean) => void;
+  resetKey?: string | number; // used to reset internal state
+};
+
+const AutoScrollingFlatList = <T,>({
+  data,
+  renderItem,
+  horizontal = false,
+  style,
+  speed,
+  minDuration = 0,
+  onCompleteScroll,
+  resetKey,
+}: AutoScrollingFlatListProps<T>) => {
+  const listRef = useRef<FlatList<T>>(null);
+  const itemSizes = useRef<(number | undefined)[]>([]);
+  const totalSize = useRef(0);
+  const offset = useRef(0);
+  const scrollTimer = useRef<NodeJS.Timeout | null>(null);
+  const scrollStartTime = useRef<number | null>(null);
+
+  const [ready, setReady] = useState(false);
+  const [isPaused, setIsPaused] = useState(false); // replaces isHovered
+  const [containerSize, setContainerSize] = useState(0);
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    const size = horizontal
+      ? e.nativeEvent.layout.width
+      : e.nativeEvent.layout.height;
+    setContainerSize(size);
+  };
+
+  const updateItemLayout = (index: number, e: LayoutChangeEvent) => {
+    const size = horizontal
+      ? e.nativeEvent.layout.width
+      : e.nativeEvent.layout.height;
+
+    itemSizes.current[index] = size;
+
+    const allMeasured =
+      itemSizes.current.length === data.length &&
+      itemSizes.current.every((v) => typeof v === 'number');
+
+    if (allMeasured && !ready) {
+      totalSize.current = itemSizes.current
+        .filter((v): v is number => typeof v === 'number')
+        .reduce((acc, val) => acc + val, 0);
+      setReady(true);
+    }
+  };
+
+  const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const currentOffset = horizontal
+      ? e.nativeEvent.contentOffset.x
+      : e.nativeEvent.contentOffset.y;
+
+    offset.current = currentOffset;
+  };
+
+  useEffect(() => {
+    const isWeb = Platform.OS === 'web';
+
+    if (!ready || (isWeb && isPaused) || speed <= 0 || containerSize === 0) return;
+
+    const frameInterval = 16;
+    const pixelsPerFrame = (speed * frameInterval) / 1000;
+    scrollStartTime.current = Date.now();
+
+    scrollTimer.current = setInterval(() => {
+      offset.current += pixelsPerFrame;
+
+      const maxOffset = totalSize.current - containerSize;
+      const now = Date.now();
+      const reachedEnd = offset.current >= maxOffset;
+      const minTimeElapsed = now - (scrollStartTime.current ?? 0) >= minDuration;
+
+      if (reachedEnd) {
+        if (minTimeElapsed) {
+          offset.current = 0;
+          scrollStartTime.current = Date.now();
+          listRef.current?.scrollToOffset({ offset: 0, animated: false });
+          if (onCompleteScroll) onCompleteScroll(true);
+        } else {
+          offset.current = maxOffset;
+        }
+      } else {
+        listRef.current?.scrollToOffset({
+          offset: offset.current,
+          animated: false,
+        });
+      }
+    }, frameInterval);
+
+    return () => {
+      if (scrollTimer.current) clearInterval(scrollTimer.current);
+    };
+  }, [ready, speed, isPaused, containerSize, onCompleteScroll, minDuration]);
+
+  // Reset state/refs on resetKey change
+  useEffect(() => {
+    if (scrollTimer.current) clearInterval(scrollTimer.current);
+    offset.current = 0;
+    scrollStartTime.current = null;
+    itemSizes.current = [];
+    totalSize.current = 0;
+    setReady(false);
+    setIsPaused(false);
+  }, [resetKey]);
+
+  const wrappedRenderItem = ({ item, index }: { item: T; index: number }) => (
+    <View onLayout={(e) => updateItemLayout(index, e)} style={{ flexShrink: 0 }}>
+      {renderItem({ item, index })}
+    </View>
+  );
+
+  const wrapperProps =
+    Platform.OS === 'web'
+      ? {
+          onMouseEnter: () => setIsPaused(true),
+          onMouseLeave: () => setIsPaused(false),
+          onTouchStart: () => setIsPaused(true),   // pause on mobile tap
+          onTouchEnd: () => setIsPaused(false),
+        }
+      : {
+          onTouchStart: () => setIsPaused(true),
+          onTouchEnd: () => setIsPaused(false),
+        };
+
+  return (
+    <View
+      {...(wrapperProps as any)}
+      onLayout={handleLayout}
+      style={[{ overflow: 'hidden' }, style]}
+    >
+      <FlatList
+        ref={listRef}
+        data={data}
+        renderItem={wrappedRenderItem}
+        keyExtractor={(_, i) => i.toString()}
+        horizontal={horizontal}
+        scrollEnabled={true}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+      />
+    </View>
+  );
+};
+
+export default AutoScrollingFlatList;

package/src/Components/Icons.tsx

@@ -1534,6 +1534,22 @@ const GolferIcon = ({ color, size }:IconProps) => {
     )
 }
 
+const LocationIcon = ({ color, size }:IconProps) => {
+    const ratio = 0.833
+    const height = size ?? 18
+    const width = height * ratio
+
+    return (
+        <Svg width={`${width}px`} height={`${height}px`} viewBox="0 0 34 40">
+            <G id="app-icons" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <G id="location-1-svgrepo-com" fill={color ?? Colors.brand.midnight}>
+                    <Path d="M17.2995556,35.5411111 C17.0148889,35.75 16.7495556,35.9395556 16.5071111,36.1095556 C16.2484444,35.938 15.9615556,35.7406667 15.6504444,35.5182222 C14.1835556,34.4686667 12.2811111,32.928 10.4075111,31.0064444 C6.56448889,27.0648889 3.33333333,22.0335556 3.33333333,16.6666667 C3.33333333,9.30286667 9.30286667,3.33333333 16.6666667,3.33333333 C24.0304444,3.33333333 30,9.30286667 30,16.6666667 C30,21.976 26.6264444,26.9928889 22.6428889,30.9762222 C20.7102222,32.9091111 18.7653333,34.4664444 17.2995556,35.5411111 Z M33.3333333,16.6666667 C33.3333333,20.0320028 32.2715689,23.184986 30.6840192,26.0184205 C25.9817575,34.4109455 16.6666667,40 16.6666667,40 C15.8333333,40 0,30 0,16.6666667 C0,7.46191111 7.46191111,0 16.6666667,0 C25.8713333,0 33.3333333,7.46191111 33.3333333,16.6666667 Z M20,16.6666667 C20,18.5075556 18.5075556,20 16.6666667,20 C14.8257778,20 13.3333333,18.5075556 13.3333333,16.6666667 C13.3333333,14.8257111 14.8257778,13.3333333 16.6666667,13.3333333 C18.5075556,13.3333333 20,14.8257111 20,16.6666667 Z M23.3333333,16.6666667 C23.3333333,20.3486667 20.3486667,23.3333333 16.6666667,23.3333333 C12.9846667,23.3333333 10,20.3486667 10,16.6666667 C10,12.9847778 12.9846667,10 16.6666667,10 C20.3486667,10 23.3333333,12.9847778 23.3333333,16.6666667 Z" id="Shape"></Path>
+                </G>
+            </G>
+        </Svg>
+    )
+}
+
 export default {
     SearchIcon,
     LiquidityIcon,
@@ -1542,6 +1558,7 @@ export default {
     //BetScopeSuccessIcon,
     AlertIcon,
     GolferIcon,
+    LocationIcon,
     GIFIcon,
     QuestionIcon,
     BarstoolIcon,

package/src/Components/index.tsx

@@ -9,10 +9,13 @@ import Switch from './Switch';
 import ConfirmationModal from './ConfirmationModal';
 import Toggle from './Toggle';
 import ProgressBar from './ProgressBar';
+import AutoScrollingFlatList from './AutoScrollFlatList';
+
 export {
     Button,
     Text,
     Spring,
+    AutoScrollingFlatList,
     Switch,
     TextInput,
     ProgressBar,

package/src/FlashMarket/FlashHolder.tsx

@@ -137,13 +137,13 @@ const FlashHolder = ({ float, distinct_id, hide_tabs, league_id, player_id, play
 
     const loadData = async(options?:{ reload:boolean }) => {
         FlashMarketApi.setEnvironment();
+        setFlashData({ ...flash_data, holder_loading: true });
         if(poll_id){ 
             //need to grab the poll
-            setFlashData({ ...flash_data, loaded:true });
+            setFlashData({ ...flash_data, loaded:true, holder_loading: false });
             return handleSelectPoll(poll_id, options);
         }
         let found_polls:PollProps[] = []
-        setFlashData({ ...flash_data, holder_loading:true });
         if(league_id || contest_type || contest_id || side_type || side_id){
             found_polls = await FlashMarketApi.getActiveLinkedFlashMarkets(league_id, contest_type, contest_id, side_type, side_id);
         } else {
@@ -263,7 +263,7 @@ const FlashHolder = ({ float, distinct_id, hide_tabs, league_id, player_id, play
                             poll_summaries={poll_summaries}
                             poll_campaign={poll_campaign}
                             flash_market_fees={flash_market_fees}
-                            loading={loading}
+                            loading={loading || holder_loading}
                             hide_image
                             card_style={{ borderWidth:2, borderColor:Colors.text.success, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}
                             init_expanded

package/src/MarketComponents/components/MyOrderList/api/index.ts

@@ -8,7 +8,10 @@ export const MyOrdersHelpers = {
         let event_ids = [ ...new Set(orders.filter(o => o.event_type == 'team').map(o => o.event_id))]
         let tournament_ids = [ ...new Set(orders.filter(o => o.event_type == 'tournament').map(o => o.event_id))]
         let match_ids = [ ...new Set(orders.filter(o => o.event_type == 'match').map(o => o.event_id))]
-        return { event_ids, tournament_ids, match_ids }
+        let athlete_ids = [ ...new Set(orders.filter(o => o.side_type == 'athlete').map(o => o.side_id))]
+        let team_ids = [ ...new Set(orders.filter(o => o.side_type == 'team').map(o => o.side_id)) ]
+        let player_ids = [ ...new Set(orders.map(o => o.player_id)) ]
+        return { event_ids, tournament_ids, match_ids, athlete_ids, team_ids, player_ids }
     },
     getHedgesFromPositions: (orders:OrderProps[], markets:MarketProps[]):HedgeProps[] => {
         //1) Set up arrays to store hedges

package/src/MarketComponents/components/OrderGradeBar.tsx

@@ -17,13 +17,14 @@ type GradeBoxType = {
 
 type OrderGradeBarProps = {
     mask?:boolean,
+    style?:any,
     grade?: number,
     view_type: 'card'|'book'|'market',
     onSelectGrade?:() => void
 }
 
 //OrderGradeBar React Component
-const OrderGradeBar = ({ grade, view_type, mask, onSelectGrade }:OrderGradeBarProps ) => {
+const OrderGradeBar = ({ grade, view_type, style, mask, onSelectGrade }:OrderGradeBarProps ) => {
     const Colors = useColors();
 
     //Stage the boxes and set the min / max and colors
@@ -97,7 +98,7 @@ const OrderGradeBar = ({ grade, view_type, mask, onSelectGrade }:OrderGradeBarPr
     }
 
     return (
-        <View transparent>
+        <View transparent style={{ ...style }}>
             <Button style={{ padding:0 }} transparent disabled={onSelectGrade ? false : true} onPress={() => onSelectGrade ? onSelectGrade() : console.log('')}>
                 {view_type === 'card' ?
                 <FlatList style={{ alignSelf:'center' }} horizontal data={grade_boxes} renderItem={renderGradeBoxes} keyExtractor={(item) => item.min.toString()} />

package/src/index.tsx

@@ -50,6 +50,8 @@ import GolfScoreboard from './GolfScoreboard';
 import FlashMarket from './FlashMarket';
 import FlashHolder from './FlashMarket/FlashHolder';
 import BEPostHog from './PostHog';
+import BetMatch from './BetMatch';
+
 
 
 export {
@@ -57,6 +59,7 @@ export {
   Observer,
   BEEventApi,
   BELinkApi,
+  BetMatch,
   Ticker,
   LeaderboardCard,
   LocationTracker,

package/src/types.d.ts

@@ -2133,6 +2133,42 @@ export interface EventOrderStatProps {
     market_type: string;
 }
 
+
+export interface PlayerFilterProps {
+    player_filter_id:string,
+    player_id:string,
+    pinned:boolean,
+    name: string
+    premium?:boolean,
+    filter: OrderFilterProps,
+    status:'active'|'inactive'|'deleted',
+    create_datetime:any,
+    last_update_datetime:any
+}
+
+
+export interface OrderFilterProps {
+    market_type: 'FOR_MONEY'|'FREE'
+    order_id?:string, //If populated, then this overrides all other options
+    following_only:boolean,
+    custom_players?:boolean,
+    market_level?:string,
+    external_book?:string,
+    event_id?:string,
+    market_types?:string,
+    team_ids:string[],
+    minimum_grade:number,
+    athlete_ids:string[],
+    event_type?:'team'|'tournament'|'match',
+    market_ids:string[],
+    league_ids:string[],
+    live_only:boolean,
+    player_ids:string[],
+    location?:any,
+    location_range_miles?:number,
+    region?:string
+}
+
 export type EventNameTypes = 'generated_link' |'incoming_user' |'identify_user' |'visibility_on' |'visibility_off'|
 'page_hit'|'sign_up'|'game_view'|'game_join'|'game_result'|'order_create'|'order_result'|'vouch_start'|'vouch_attempt'|
 'account_add_start'|'account_add_result'|'transaction_attempt'|'transaction_result'|'message_support'|'room_view'|'view_social'|