be-components 7.3.8 → 7.4.0

package/src/FlashMarket/index.tsx

@@ -8,6 +8,7 @@ import { ActivityIndicator, Alert, FlatList, Image, type ViewStyle } from 'react
 import FlashMarketHelp from './components/FlashMarketHelp';
 import moment from 'moment-mini';
 import MarketTimer from './components/MarketTimer';
+import { MarketComponentHelpers } from '../MarketComponents/api';
 
 type FlashMarketProps = {
     loading:boolean,
@@ -18,6 +19,7 @@ type FlashMarketProps = {
     flash_market_fees:FlashMarketFeeProps[],
     hide_image?:boolean,
     location?:LocationProps,
+    wrap_options?:boolean,
     card_style?:any,
     onManageFlash?:(poll:PollProps) => void,
     init_expanded?:boolean,
@@ -32,8 +34,10 @@ type FlashMarketProps = {
     onFocusPosition?: (position:{ x:number, y:number, width:number, height:number }) => void,
     onRequestAuthenticate: () => void
 }
-const FlashMarket = ({ loading, poll, hide_footer, hide_timer, poll_options, poll_summaries, poll_campaign, flash_market_fees, hide_image, init_expanded, card_style, header_style, footer_style, onReload, location, player, player_id, onManageFlash, onRequestAuthenticate, onFocusPosition, onRequestLocation }:FlashMarketProps) => {
+const MIN_OPTION_WIDTH = 300
+const FlashMarket = ({ loading, poll, hide_footer, hide_timer, wrap_options, poll_options, poll_summaries, poll_campaign, flash_market_fees, hide_image, init_expanded, card_style, header_style, footer_style, onReload, location, player, player_id, onManageFlash, onRequestAuthenticate, onFocusPosition, onRequestLocation }:FlashMarketProps) => {
     const Colors = useColors();
+    const [ size, setSize ] = useState({ width:0, height:0 });
     const [ admin_action, setAdminActions ] = useState<{
         selected_option_id?:string,
         admin_loading:boolean
@@ -64,7 +68,9 @@ const FlashMarket = ({ loading, poll, hide_footer, hide_timer, poll_options, pol
     const potential_winnings = FlashMarketHelpers.calcPotentialWinnings(selected_option?.parimutuel_odds, draft_stake.toFixed(2));
     const order_valid = FlashMarketHelpers.isValid(my_responses, poll, draft_data.stake, selected_option?.poll_option_id);
     const visible_options = poll_options.filter(po => po.status != 'inactive').sort((a,b) => a.priority - b.priority)
+    const num_options_per_row = Math.floor((size.width-20) / MIN_OPTION_WIDTH)
     
+    const option_width = ((size.width-20) / num_options_per_row) - (4*num_options_per_row)
     const is_inactive = poll && ['pending','paused'].includes(poll?.status) ? true : false
     const is_upcoming = poll && poll.start_datetime && moment().isBefore(moment(poll.start_datetime)) ? true : false
     const is_admin = player?.role == 'admin' ? true : poll?.admins && poll.admins.includes(player?.player_id ?? '0') ? true : false
@@ -206,7 +212,9 @@ const FlashMarket = ({ loading, poll, hide_footer, hide_timer, poll_options, pol
         const selected = selected_option?.poll_option_id == data.item.poll_option_id ? true : false
         const admin_checked = selected_option_id == data.item.poll_option_id ? true : false
         return (
-            <View transparent style={{ borderRadius:8, flexDirection:'row', alignItems:'center', borderWidth:my_option?1:0, borderColor:Colors.text.action, padding:10 }}>
+            <View float style={{ width:option_width, margin:2, borderRadius:8,borderWidth:my_option?1:0, borderColor:Colors.text.action, padding:10  }}>
+
+            <View transparent key={data.item.poll_option_id.toString()} style={{ flexDirection:'row', alignItems:'center' }}>
                 {!selected && poll?.status != 'closed' && is_admin ?
                 <Checkbox
                     style={{ marginRight:5 }}
@@ -238,30 +246,14 @@ const FlashMarket = ({ loading, poll, hide_footer, hide_timer, poll_options, pol
                 </View>
                 {!selected ?
                 <View transparent style={{ marginRight:10, marginLeft:10, alignItems:'flex-end' }}>
-                    <Text theme='h1' color={Colors.text.action}>{((data.item.parimutuel_odds ?? 0)*100).toFixed(2)}%</Text>
-                    {my_option?.result_ind ?
-                        <Text style={{ marginTop:3 }} theme='h2' color={getColor(response_stats.earnings)}>{cl}{response_stats.earnings.toFixed(2)} Earned</Text>
-                    : my_option ?
-                        <Text style={{ marginTop:3 }} theme='h2' color={Colors.text.h1}>{cl}{response_stats.stake.toFixed(2)} to win {cl}{response_stats.potential_winnings.toFixed(2)}*</Text>
-                    :<></>}
+                    <View transparent style={{ alignItems:'flex-end' }}>
+                        <Text theme='h2'>{((data.item.parimutuel_odds ?? 0)*100).toFixed(2)}%</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>{MarketComponentHelpers.getOddsLabel(MarketComponentHelpers.calcAmericanOddsFromProbability(data.item.parimutuel_odds ?? 0))}</Text>
+                    </View>
                 </View>
                 :<></>}
                 {selected ?
-                <View transparent style={{ flexDirection:'row' }}>
-                    <TextInput
-                        onFocusPosition={onFocusPosition}
-                        onChangeText={(text) => setDraftData({ ...draft_data, stake: text })}
-                        style={{ width: 75, textAlign:'center', padding:10 }}
-                        value={draft_data.stake}
-                    />
-                    <Button
-                        type='success'
-                        disabled={!order_valid || action_loading}
-                        loading={action_loading}
-                        style={{ padding:10, marginLeft:10, opacity:order_valid && !action_loading?1:0.5 }}
-                        title='SUBMIT'
-                        onPress={() => handleSubmit(data.item)}
-                    />
+                <View transparent>
                     <Button
                         title='X'
                         style={{ padding:10, marginLeft:10 }}
@@ -279,7 +271,7 @@ const FlashMarket = ({ loading, poll, hide_footer, hide_timer, poll_options, pol
                         style={{ padding:10 }}
                         onPress={() => setSelectedOption(data.item)}
                     >
-                        <Text theme='h1' color={Colors.text.white}>{my_option ? 'ADD' : 'BUY'}</Text>
+                        <Text theme='h2' color={Colors.text.white}>{my_option ? 'ADD' : 'BUY'}</Text>
                     </Button>
                     :<></>}
                 </View>
@@ -290,6 +282,31 @@ const FlashMarket = ({ loading, poll, hide_footer, hide_timer, poll_options, pol
                 </View>
                 :<></>}
             </View>
+            {selected ?
+            <View transparent style={{ flexDirection:'row', alignItems:'center', marginTop:10 }}>
+                <TextInput
+                    onFocusPosition={onFocusPosition}
+                    onChangeText={(text) => setDraftData({ ...draft_data, stake: text })}
+                    style={{ flex:1, textAlign:'center', padding:10 }}
+                    value={draft_data.stake}
+                />
+                <Button
+                    type='success'
+                    disabled={!order_valid || action_loading}
+                    loading={action_loading}
+                    style={{ padding:10, marginLeft:10, opacity:order_valid && !action_loading?1:0.5 }}
+                    title='SUBMIT'
+                    onPress={() => handleSubmit(data.item)}
+                />
+            </View>
+            :my_option?.result_ind ? 
+                <Text style={{ marginTop:3 }} theme='h2' color={getColor(response_stats.earnings)}>{cl}{response_stats.earnings.toFixed(2)} Earned</Text>
+            :my_option ?
+                <Text style={{ marginTop:3 }} theme='h2' color={Colors.text.action}>{cl}{response_stats.stake.toFixed(2)} to win {cl}{response_stats.potential_winnings.toFixed(2)}*</Text>
+            :<></>
+            }
+            
+            </View>
         )
     }
 
@@ -297,7 +314,10 @@ const FlashMarket = ({ loading, poll, hide_footer, hide_timer, poll_options, pol
     //if(!poll.flash_active){ return <></> }
     const stats = FlashMarketHelpers.getStats(poll_summaries, flash_market_fees);
     return (
-        <View transparent style={{ ...card_style }}>
+        <View transparent style={{ ...card_style }} onLayout={(ev) => {
+            const { width, height } = ev.nativeEvent.layout;
+            setSize({ width, height });
+        }}>
             <Button 
             style={{ backgroundColor:Colors.views.header, padding:10, flexDirection:'row', alignItems:'center', ...header_style }}
             onPress={() => setExpanded(!expanded)}>
@@ -338,12 +358,20 @@ const FlashMarket = ({ loading, poll, hide_footer, hide_timer, poll_options, pol
                             onTimesUp={() => onReload()}
                         />
                         :<></>}
+                        {wrap_options ?
+                        <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+                            {visible_options.map((o,i) => {
+                                return renderOptions({ item:o,index:i })
+                            })}
+                        </View>
+                        :
                         <FlatList
                             data={visible_options}
                             key={`poll_${poll.poll_id}_options`}
                             renderItem={renderOptions}
                             keyExtractor={(item) => item.poll_option_id.toString()}
                         />
+                        }
                         {is_inactive && !is_admin ?
                         <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
                             <View float style={{ flexDirection:'row', alignItems:'center', padding:20 }}>

package/src/PartnerPortal/components/EmbedManager.tsx

@@ -6,7 +6,7 @@ import { ActivityIndicator, FlatList, ImageBackground, type ViewStyle } from 're
 import { useColors } from '../../constants/useColors';
 import ReferralSelector from './ReferralSelector';
 import LeagueSelector from './LeagueSelector';
-import { Toggle } from '../../Components';
+import { Switch, Toggle } from '../../Components';
 import * as Clipboard from 'expo-clipboard';
 import CompetitionSelector from './CompetitionSelector';
 import SquaresSelector from './SquaresSelector';
@@ -163,6 +163,25 @@ const EmbedManager = ({ float, me, company_id, company_embed_id, onFocusPosition
                     />
                 </View>
                 )
+            case 'switch':
+                //Switch is going to be either a 1 or a 0.  0 is off
+                const boolean_value = value && value == '1' ? true : false
+                return (
+                    <View transparent style={{ flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light, padding:10 }}>
+                        <View transparent style={{ flex:1, marginRight:10 }}>
+                            <Text theme='h1'>{data.item.label}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>{data.item.description}</Text>
+                        </View>
+                        <Switch
+                            value={boolean_value}
+                            switch_type='on_off'
+                            onChange={(val) => {
+                                let str_val = val ? '1' : '0'
+                                setEmbedData({ ...embed_data, draft_company_embed: { ...draft_company_embed, properties: { ...draft_company_embed.properties, [data.item.property]: str_val } } })
+                            }}
+                        />
+                    </View>
+                )
             case 'refer_selector':
                 const selected_referral = player_referrals.find(pr => pr.referral_code == value);
                 return (