be-components 6.5.8 → 6.6.0

package/src/Authenticator/Components/LoginForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Keyboard, TouchableOpacity } from "react-native"
-import { Icons } from '../../Components';
+import { Icons, Toggle } from '../../Components';
 import Colors from '../../constants/colors';
 import { AuthenticateApi, AuthenticateHelpers } from '../api';
 import type { AuthenticatedProps } from '../api/types';
@@ -19,7 +19,6 @@ type LoginFormProps = {
 }
 
 
-const attribute_options = ['username', 'email', 'phone']
 const LoginForm = ({ maxWidth, visible, onRegister, onFocusPosition, onAuthenticated, onTryAuthenticate }:LoginFormProps) => {
     const C = useColors();
     const [ auth_check, setAuthCheck ] = useState<{
@@ -131,26 +130,16 @@ const LoginForm = ({ maxWidth, visible, onRegister, onFocusPosition, onAuthentic
                     <View>
                         <Text theme='h1'>Login Using My:</Text>
                     </View>
-                    <View nativeID='attribute_toggle' style={{ marginTop:10, flexDirection:'row', borderRadius:22, borderWidth:1, backgroundColor:Colors.shades.shade400, borderColor:Colors.shades.shade600 }}>
-                        {attribute_options.map((a,i) => {
-                            const selected = a == attribute ? true : false
-                            return (
-                                <Button
-                                    title={a.toUpperCase()}
-                                    style={{
-                                        flex:1,
-                                        padding:15,
-                                        borderTopLeftRadius: i == 0 ? 22 : 0,
-                                        borderBottomLeftRadius: i == 0 ? 22 : 0,
-                                        borderTopRightRadius: i == attribute_options.length -1 ? 22 : 0,
-                                        borderBottomRightRadius: i == attribute_options.length -1 ? 22 : 0,
-                                    }}
-                                    title_color={selected ? Colors.shades.white : Colors.brand.electric}
-                                    backgroundColor={selected ? Colors.brand.electric : 'transparent'}
-                                    onPress={() => setAuthCheck({ attribute:a as 'username'|'email'|'phone', value: '', loading:false })}
-                                />
-                            )
-                        })}
+                    <View style={{ marginTop:10 }}>
+                        <Toggle
+                            options={[
+                                { key: 'username', label: 'Username' },
+                                { key: 'email', label: 'Email'},
+                                { key: 'phone', label: 'Phone' }
+                            ]}
+                            selected_option={attribute}
+                            onSelectOption={(a) => setAuthCheck({ ...auth_check, attribute: a as 'username'|'email'|'phone' })}
+                        />
                     </View>
                 </View>
                 <View style={{ flexGrow:1 }}>

package/src/Guide/index.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useState, useEffect } from "react";
 import {
   Platform,
-  useWindowDimensions,
   UIManager,
   findNodeHandle,
   TouchableOpacity,
@@ -16,13 +15,14 @@ import { Icons } from "../Components";
 export type GuideWrapperProps = {
   children: React.ReactNode;
   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({ active, children, guide, onComplete }: GuideWrapperProps) {
+export default function GuideWrapper({ active, prompt_location, children, guide, onComplete }: GuideWrapperProps) {
   const Colors = useColors();
   const wrapper_guid:GuideResponseProps = guide ?? { view_type: 'prompt' };
   const { tour_prompts } = wrapper_guid;
@@ -40,8 +40,6 @@ export default function GuideWrapper({ active, children, guide, onComplete }: Gu
   });
   const [tooltipHeight, setTooltipHeight] = useState(0);
 
-  const { width: screenWidth } = useWindowDimensions();
-
   const sortedTour = tour
     ? [...tour].sort((a, b) => (a.tour_priority ?? 0) - (b.tour_priority ?? 0))
     : [];
@@ -58,6 +56,10 @@ export default function GuideWrapper({ active, children, guide, onComplete }: Gu
     );
   };
 
+  const handleDone = (status:'cancelled'|'complete') => {
+    setCurrentStep(0);
+    if(onComplete){ onComplete(status) }
+  }
 
 
   // Recursively attach refs to children with nativeID
@@ -144,7 +146,7 @@ export default function GuideWrapper({ active, children, guide, onComplete }: Gu
     if (currentStep + 1 < sortedTour.length) {
       setCurrentStep(currentStep + 1);
     } else {
-      onComplete?.("complete");
+      handleDone('complete')
     }
   };
 
@@ -200,11 +202,11 @@ export default function GuideWrapper({ active, children, guide, onComplete }: Gu
         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,
-          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,
@@ -227,7 +229,7 @@ export default function GuideWrapper({ active, children, guide, onComplete }: Gu
               }}
               title="X"
               type="error"
-              onPress={() => (onComplete ? onComplete("cancelled") : null)}
+              onPress={() => handleDone('cancelled')}
             />
           </View>
         )}

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

@@ -28,6 +28,8 @@ type TeamEventMarketProps = {
     parlays?:ParlayProps[],
     init_expanded?:boolean,
     show_help?:boolean,
+    onHelpToggle?:(visible:boolean) => void,
+    help_location?:'bottom'|'top',
     onViewMarketStats?:() => void,
     onSetMarket?:(market_id:string, side_type?:string, side_id?:string) => void,
     league?:LeagueProps,
@@ -64,7 +66,7 @@ type TeamEventMarketProps = {
     onActivate?:(event_id:string, event_type:string) => void
     activate_loading?:boolean
 }
-const TeamEventMarket = ({ event, show_help, 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, onHelpToggle, 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 });
@@ -413,7 +415,10 @@ const TeamEventMarket = ({ event, show_help, parlays, hide_non_primary, disabled
     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} active={guide_active} onComplete={() => setGuide({ guide_active: false })}>
+        <GuideView prompt_location={help_location} guide={guide} active={guide_active} onComplete={() => {
+            setGuide({ guide_active: false })
+            if(onHelpToggle){ onHelpToggle(false) }
+        }}>
 
         <View nativeID='team_event_market' ref={ref} float={float} style={[style]}>
             {sponsor ?
@@ -509,7 +514,10 @@ const TeamEventMarket = ({ event, show_help, parlays, hide_non_primary, disabled
                     {show_help ?
                     <GuideButton
                         onError={() => alert('Unable to get help')}
-                        onHelp={(guide) => { setGuide({ guide_active:true, guide })}}
+                        onHelp={(guide) => {
+                            setGuide({ guide_active:true, guide });
+                            if(onHelpToggle){ onHelpToggle(true) }
+                        }}
                         show_label
                         client_native_id='team_event_market'
                     />

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 ?