be-components 6.5.7 → 6.5.9

package/src/Guide/index.tsx

@@ -1,30 +1,32 @@
 import React, { useRef, useState, useEffect } from "react";
 import {
   Platform,
-  useWindowDimensions,
   UIManager,
   findNodeHandle,
   TouchableOpacity,
   TouchableHighlight,
   TouchableWithoutFeedback,
 } from "react-native";
-import type { GuideWrapProps } from "../types";
+import type { GuideResponseProps } 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;
+  active?:boolean,
+  prompt_location?:'bottom'|'top',
+  guide?: GuideResponseProps;
+  onComplete: (status:'cancelled'|'complete') => void
 };
 
 type Layout = { x: number; y: number; width: number; height: number };
 
-export default function GuideWrapper({ children, guide }: GuideWrapperProps) {
+export default function GuideWrapper({ active, prompt_location, children, guide, onComplete }: GuideWrapperProps) {
   const Colors = useColors();
-  const wrapper_guid = guide ?? {};
-  const { tour, active, onComplete } = wrapper_guid;
-
+  const wrapper_guid:GuideResponseProps = guide ?? { view_type: 'prompt' };
+  const { tour_prompts } = wrapper_guid;
+  const tour = tour_prompts ?? []
   const refs = useRef<{ [key: string]: any }>({});
   const containerRef = useRef<any>(null);
 
@@ -38,13 +40,11 @@ export default function GuideWrapper({ children, guide }: GuideWrapperProps) {
   });
   const [tooltipHeight, setTooltipHeight] = useState(0);
 
-  const { width: screenWidth } = useWindowDimensions();
-
   const sortedTour = tour
-    ? [...tour].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0))
+    ? [...tour].sort((a, b) => (a.tour_priority ?? 0) - (b.tour_priority ?? 0))
     : [];
   const step = sortedTour[currentStep];
-  const stepRef = step ? refs.current[step.nativeID] : undefined;
+  const stepRef = step ? refs.current[step.client_native_id] : undefined;
 
   const isTouchable = (child: any) => {
     const typeName = (child.type as any)?.displayName || child.type;
@@ -56,6 +56,12 @@ export default function GuideWrapper({ children, guide }: GuideWrapperProps) {
     );
   };
 
+  const handleDone = (status:'cancelled'|'complete') => {
+    setCurrentStep(0);
+    if(onComplete){ onComplete(status) }
+  }
+
+
   // Recursively attach refs to children with nativeID
   const attachRefs = (nodes: React.ReactNode): React.ReactNode => {
     return React.Children.map(nodes, (child) => {
@@ -140,7 +146,7 @@ export default function GuideWrapper({ children, guide }: GuideWrapperProps) {
     if (currentStep + 1 < sortedTour.length) {
       setCurrentStep(currentStep + 1);
     } else {
-      onComplete?.("complete");
+      handleDone('complete')
     }
   };
 
@@ -192,23 +198,22 @@ export default function GuideWrapper({ children, guide }: GuideWrapperProps) {
 
       {/* Tooltip: always above overlay */}
       <View
+        float
         onLayout={(ev) => setTooltipHeight(ev.nativeEvent.layout.height)}
         style={{
           position: "absolute",
-          maxWidth: screenWidth - 10,
-          minWidth: 300,
+          maxWidth: 330,
+          minWidth: 225,
           borderColor: Colors.text.success,
           borderWidth: 1,
-          borderRadius: 8,
-          padding: 10,
-          top: layout.y - tooltipHeight - 10, // 10px margin above overlay
+          top: prompt_location == 'bottom' ? layout.y + layout.height + 10 : layout.y - tooltipHeight - 10, // 10px margin above overlay
           left: right ? undefined : layout.x,
           right: right ? 5 : undefined,
           zIndex: 99999999,
         }}
       >
         {step.title && (
-          <View type='header' style={{ flexDirection: "row", alignItems: "center", marginBottom: 5, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+          <View type='header' style={{ flexDirection: "row", alignItems: "center", padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
             <Icons.AlertIcon size={14} color={Colors.text.warning} />
             <Text theme="h1" style={{ flex: 1, marginLeft: 10, marginRight: 10 }}>
               {step.title}
@@ -224,24 +229,22 @@ export default function GuideWrapper({ children, guide }: GuideWrapperProps) {
               }}
               title="X"
               type="error"
-              onPress={() => (onComplete ? onComplete("cancelled") : null)}
+              onPress={() => handleDone('cancelled')}
             />
           </View>
         )}
 
         {step.body && (
-          <View type='body' style={{ padding: 5 }}>
+          <View type='body' style={{ padding: 10 }}>
             <Text theme="h2">{step.body}</Text>
           </View>
         )}
 
-        <View type='footer' style={{ flexDirection: "row", alignItems: "center", marginTop: 5, borderBottomRightRadius:8,borderBottomLeftRadius:8 }}>
+        <View type='footer' style={{ flexDirection: "row", alignItems: "center", padding: 10, borderBottomRightRadius:8,borderBottomLeftRadius:8 }}>
           {currentStep > 0 && (
             <Button type="action" onPress={handlePrev} style={{ flex: 1, marginRight: 5 }} title="BACK" />
           )}
-          {!step.clickable && (
             <Button type="success" onPress={handleNext} style={{ flex: 1 }} title={isLastStep ? "Done" : "Next"} />
-          )}
         </View>
       </View>
     </View>

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, GuideWrapProps, LeagueProps, MarketProps, MarketSideOptionProps, OrderProps, ParlayProps, PodcastProps, PollProps, SquaresCompetitionProps, TradeProps } from '../../../types';
+import type { AthleteProps, BEEventProps, BestAvailableOrderProps, CompanyProps, CompetitionProps, EventOrderStatProps, EventProps, GuideResponseProps, 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';
@@ -20,13 +20,15 @@ import { useColors } from '../../../constants/useColors';
 import OrderGradeBar from '../OrderGradeBar';
 import moment from 'moment-mini';
 import { GuideView } from 'be-components';
+import GuideButton from '../../../Guide/GuideButton';
 
 type TeamEventMarketProps = {
     event:EventProps,
     markets:MarketProps[],
     parlays?:ParlayProps[],
     init_expanded?:boolean,
-    guide?: GuideWrapProps,
+    show_help?:boolean,
+    help_location?:'bottom'|'top',
     onViewMarketStats?:() => void,
     onSetMarket?:(market_id:string, side_type?:string, side_id?:string) => void,
     league?:LeagueProps,
@@ -63,9 +65,11 @@ type TeamEventMarketProps = {
     onActivate?:(event_id:string, event_type:string) => void
     activate_loading?:boolean
 }
-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 TeamEventMarket = ({ event, show_help, help_location, 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 [ guide_response, setGuide ] = useState<{guide_active:boolean, guide?:GuideResponseProps}>({ guide_active:false });
+    const { guide_active, guide } = guide_response;
     const [ expanded_data, setExpandedData ] = useState<{
         expanded:boolean,
         loaded:boolean,
@@ -410,9 +414,9 @@ const TeamEventMarket = ({ event, guide, parlays, hide_non_primary, disabled_mar
     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}>
+        <GuideView prompt_location={help_location} guide={guide} active={guide_active} onComplete={() => setGuide({ guide_active: false })}>
 
-        <View ref={ref} float={float} style={[style]}>
+        <View nativeID='team_event_market' 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]}>
                 {onActivate && event_status != 'closed' ?
@@ -503,7 +507,14 @@ const TeamEventMarket = ({ event, guide, parlays, hide_non_primary, disabled_mar
                         <Text theme='light' selectable>{event.event_id}</Text>
                         :<></>}
                     </View>
-                    
+                    {show_help ?
+                    <GuideButton
+                        onError={() => alert('Unable to get help')}
+                        onHelp={(guide) => { setGuide({ guide_active:true, guide })}}
+                        show_label
+                        client_native_id='team_event_market'
+                    />
+                    :<></>}
                 </View>
                 <Button transparent disabled={!tv_link} style={{ flexDirection:'row', alignItems:'center', padding:0 }}
                 onPress={() => tv_link && onTVSelect ? onTVSelect(tv_link) : console.log('')}>
@@ -637,7 +648,7 @@ const TeamEventMarket = ({ event, guide, parlays, hide_non_primary, disabled_mar
                 }
             </View>
             {flash_markets && onFlashSelect && flash_markets.length > 1 ?
-            <View style={{ borderTopWidth:1, borderColor:C.borders.light, paddingTop:5 }}>
+            <View  style={{ borderTopWidth:1, borderColor:C.borders.light, paddingTop:5 }}>
                 <FlatList
                     data={flash_markets.sort((a,b) => (a.total_responses??0) - (b.total_responses??0) || moment(a.end_datetime).unix() - moment(b.end_datetime).unix())}
                     key='flash_markets_event'
@@ -648,7 +659,7 @@ const TeamEventMarket = ({ event, guide, parlays, hide_non_primary, disabled_mar
             </View>
             :<></>}
             {onFlashSelect && upcoming_flash_market ?
-            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:C.borders.light }}>
+            <View nativeID='team_event_flash_markets' type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:C.borders.light }}>
                 {upcoming_flash_market.poll_image && flash_markets && flash_markets.length == 1 ?
                 <Image
                     source={{ uri: upcoming_flash_market.poll_image.url }}
@@ -670,7 +681,7 @@ const TeamEventMarket = ({ event, guide, parlays, hide_non_primary, disabled_mar
             </View>
             :<></>}
             {event_status == 'active' ?
-            <View type='footer' style={{ padding:10, flexDirection:'row', alignItems:'center', flexWrap:'wrap', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+            <View type='footer' nativeID='team_event_activities' style={{ padding:10, flexDirection:'row', alignItems:'center', flexWrap:'wrap', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
                 {!hide_liquidity ?
                 <Button 
                 nativeID='team_event_liquidity'

package/src/ProfileManager/Components/ProfileWizard.tsx

@@ -364,7 +364,7 @@ const ProfileWizard = ({  player, view_mode, settings, player_settings, insets,
                         type='error'
                         style={{ marginLeft:20 }}
                     >
-                        <Icons.LogoutIcon color={C.text.h1} size={20}/>
+                        <Icons.LogoutIcon color={C.text.white} size={20}/>
                     </Button>
                 </View>
                 {show_logout ?

package/src/types.d.ts

@@ -7,8 +7,68 @@ export interface ErrorProps {
     message: string
 }
 
+//HELP
+
+export interface HelpActionProps {
+    action_label:string, 
+    action_type:string, 
+    action_url?:string, 
+    internal_nav_options: { 
+        page_stack:string, 
+        page:string, 
+        page_params:any 
+    }, 
+    button_color:string, 
+    button_border_color:string, 
+    action_label_font:string
+}
+export interface HelpMediaObjProps {
+    media_url:string, 
+    height:string, 
+    width:string
+}
+export interface HelpTourProps {
+    help_tour_id:string, 
+    help_tour_name:string, 
+    help_tour_description:string, 
+    status:'active' | 'inactive', 
+    carousel_change_seconds:number, 
+    create_datetime:any, 
+    last_update_datetime:any
+}
+export interface HelpPromptProps {
+    help_prompt_id:string, 
+    client_native_id:string, 
+    help_tour_id?:string, 
+    tour_priority?:number, 
+    title:string, 
+    title_font_color?:string, 
+    body:string, 
+    body_font_color?:string, 
+    media_type?:'IMAGE'|'VIDEO', 
+    media_obj?:HelpMediaObjProps, 
+    footer?:string, 
+    footer_font_color?:string, 
+    help_background_color?:string, 
+    help_background_opacity_color:string, 
+    actions:HelpActionProps[], 
+    status:'active'|'inactive', 
+    create_datetime:any, 
+    last_update_datetime:any, 
+    prompt_type:string
+}
+
+export interface GuideResponseProps {
+    view_type:'prompt'|'tour', 
+    help_prompt?:HelpPromptProps,
+    help_tour?:HelpTourProps,
+    tour_prompts?:HelpPromptProps[],
+    active_tour_prompt?:string
+}
+
 export interface GuideWrapProps {
-    tour?:TourStepProps[],
+    tour?:HelpPromptProps[],
+    help_tour?:HelpTourProps,
     onComplete?:(state:'cancelled'|'complete') => void,
     active?:boolean
 }