be-components 6.1.1 → 6.1.3

package/src/BetMatch/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Text, View } from "../Components/Themed";
+import { Button, 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 type { AthleteProps, EventProps, LeagueProps, MarketProps, MatchProps, MyPlayerProps, OrderProps, PlayerFilterProps, PlayerPremiumItem, PremiumItemProps, PublicPlayerProps, TeamProps, TournamentProps } from '../types';
 import { BetMatchApi } from './api';
-import { ActivityIndicator, FlatList, Modal, StyleSheet, TouchableWithoutFeedback } from 'react-native';
+import { ActivityIndicator, FlatList, StyleSheet, TouchableWithoutFeedback } from 'react-native';
 import BetMatchCardSmall from './components/BetMatchCardSmall';
 import { SocialOrderHelpers } from '../SocialComponents/api';
 import moment from 'moment-mini';
@@ -15,20 +15,23 @@ type BetMatchProps = {
     player_filter_id:string,
     style?:any,
     mode:'desktop'|'mobile',
-    player_id:string,
+    me?:MyPlayerProps,
     insets?:{ top:number, bottom:number, right?:number, left?:number }
     show_grades?:boolean,
     show_external_prices?:boolean,
     onViewPremium?:() => void,
+    callback_order?: { result: 'success'|'cancel', order_id:string },
+    onPurchasePremium:(ppi:PlayerPremiumItem) => void,
+    player_premium_items?:PlayerPremiumItem[],
+    premium_items?:PremiumItemProps[],
     onViewPlayer:(player:PublicPlayerProps) => void,
     onSelectGrade:(order:OrderProps) => void,
     onOrder:(order:OrderProps) => void
 }
 const sections = ['filter','orders', 'bet']
-const BetMatch = ({ player_filter_id, mode, insets, onViewPlayer, onSelectGrade, onOrder, onViewPremium }:BetMatchProps) => {
+const BetMatch = ({ me, player_filter_id, mode, insets, player_premium_items, premium_items, callback_order, onViewPlayer, onSelectGrade, onOrder, onPurchasePremium, onViewPremium }:BetMatchProps) => {
     const Colors = useColors();
     
-    const [ module_size, setModuleSize ] = useState({ width:0, height:0 });
     const [ viewing_order_index, setViewingOrderIndex ] = useState<number>(-1);
     const [ static_data, setStaticData ] = useState<{
         static_loading:boolean,
@@ -67,6 +70,18 @@ const BetMatch = ({ player_filter_id, mode, insets, onViewPlayer, onSelectGrade,
         getStaticData();
     },[player_filter_id]);
 
+    useEffect(() => {
+        if(!callback_order){ return }
+        //filter out the order!
+        setTimeout(() => {
+            if(callback_order.result == 'success'){
+                setFilterData({ ...filter_data, orders: orders.filter(o => o.order_id != callback_order.order_id), action_loading: false })
+            } else {
+                setFilterData({ ...filter_data, action_loading: false })
+            }
+        }, 500);
+    },[callback_order])
+
     const runFilter = async(id:string) => {
         setFilterData({ ...filter_data, loading: true });
         const pf = await BetMatchApi.getPlayerFilterById(id);
@@ -146,7 +161,6 @@ const BetMatch = ({ player_filter_id, mode, insets, onViewPlayer, onSelectGrade,
                     contest_title={title}
                     time_detail={time}
                     league={league}
-
                     order={data.item}
                     onOrder={() => setViewingOrderIndex(data.index)}
                 />
@@ -190,62 +204,75 @@ const BetMatch = ({ player_filter_id, mode, insets, onViewPlayer, onSelectGrade,
             default: return <></>
         }
     }
-
     const viewing_player = players.find(p => p.player_id == viewing_order?.player_id);
     const { team, athlete, league, title, time } = SocialOrderHelpers.getContestDetails(viewing_order, events, tournaments, matches, athletes, teams, leagues)
     return (
-        <View style={{ flex:1 }} onLayout={(ev) => {
-            const { width, height } = ev.nativeEvent.layout;
-            setModuleSize({ width, height })
-        }}>
+        <View style={{ flex:1 }}>
             <FlatList
                 data={sections}
                 key={'filter_sections'}
                 keyExtractor={item => item}
                 renderItem={renderSections}
             />
-            <Modal
-                style={styles.modalContainer}
-                animationType={mode=='desktop' ? 'fade' : 'slide'}
-                transparent
-                visible={viewing_order ? true : false}
-            >
+            {viewing_order ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0 }}>
                 <TouchableWithoutFeedback style={{ flex:1 }} onPress={() => setViewingOrderIndex(-1)}>
                     <View type="blur" style={mode=='desktop' ? styles.desktopContainer : { ...styles.viewContainer }}>
                         <TouchableWithoutFeedback>
-                            <View transparent style={mode=='desktop' ?{ width:500,maxHeight:750, borderRadius:22 }:{ flex:1, maxHeight:module_size.height }}>
+                            <View transparent style={mode=='desktop' ?{ width:500, maxHeight:750, borderRadius:22 }:{ flex:1, paddingTop:insets?.top ?? 0, paddingBottom:insets?.bottom ?? 0 }}>
                                 {viewing_order ?
-                                <View transparent style={{ padding:20 }}>
+                                <View transparent style={{ padding:10, paddingRight:20, paddingLeft:20, flex:1 }}>
                                     <BetMatchCard
                                         player={viewing_player}
                                         order={viewing_order}
                                         team={team}
+                                        player_premium_items={player_premium_items}
+                                        premium_items={premium_items}
+                                        me={me}
                                         athlete={athlete}
                                         league={league}
                                         action_loading={action_loading}
                                         time_detail={time}
                                         contest_title={title}
                                         onViewPlayer={onViewPlayer}
+                                        onPurchasePremium={onPurchasePremium}
                                         onViewPremium={onViewPremium}
                                         onSelectGrade={onSelectGrade}
-                                        onOrder={(order) => onOrder(order)}
+                                        onOrder={(order) => {
+                                            setFilterData({ ...filter_data, action_loading: true });
+                                            onOrder(order);
+                                        }}
                                         onReject={(order) => handleReject(order)}
                                     />
                                 </View>
                                 :<></>}
-                                <View style={{ padding:5, paddingBottom: (insets?.bottom ?? 0) + 5 }}>
-                                    <Pagination
-                                        pages={orders.length}
-                                        onNext={() => setViewingOrderIndex(viewing_order_index + 1)}
-                                        onPrevious={() => setViewingOrderIndex(viewing_order_index - 1)}
-                                        offset={viewing_order_index}
+                                <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:5, paddingBottom: (insets?.bottom ?? 0) + 5, borderRadius:8 }}>
+                                    <Button
+                                        float
+                                        title='X'
+                                        title_color={Colors.text.error}
+                                        style={{ borderRadius:100, height:35, width:35, padding:0, justifyContent:'center', alignItems:'center' }}
+                                        onPress={() => {
+                                            if(action_loading){ setFilterData({ ...filter_data, action_loading: false }) }
+                                            setViewingOrderIndex(-1)
+                                        }}
                                     />
+                                    <View transparent style={{ flex:1 }}>
+                                        <Pagination
+                                            pages={orders.length}
+                                            onSelectPage={(page) => setViewingOrderIndex(page)}
+                                            onNext={() => setViewingOrderIndex(viewing_order_index + 1)}
+                                            onPrevious={() => setViewingOrderIndex(viewing_order_index - 1)}
+                                            offset={viewing_order_index}
+                                        />
+                                    </View>
                                 </View>
                             </View>
                         </TouchableWithoutFeedback>
                     </View>
                 </TouchableWithoutFeedback>
-            </Modal>
+            </View>
+            :<></>}
         </View>
     )
 }

package/src/Components/AthleteLozenge.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import type { AthleteProps, LeagueProps } from '../types'
+import { Button, Text, View } from './Themed'
+import { useColors } from '../constants/useColors'
+import { AthleteImage } from './Jerseys'
+
+
+type AthleteLozengeProps = {
+    leagues:LeagueProps[],
+    athlete: AthleteProps,
+    is_active?:boolean,
+    abbr_only?:boolean,
+    text_size?:number,
+    onSelect: (athlete:AthleteProps) => void
+}
+export const AthleteLozenge = ({ leagues, athlete, text_size, is_active, abbr_only, onSelect }:AthleteLozengeProps) => {
+    const Colors = useColors();
+    const league = leagues.find(l => l.league_id == athlete.league_id);
+    const handleSelect = () => {
+        if(!onSelect){ return }
+        onSelect(athlete)
+    }
+    
+    return (
+        <Button float 
+            style={{ flexGrow:1, flexDirection:'row', alignItems:'center', margin:4, borderWidth:1, borderRadius:100, padding:0, borderColor:is_active ? Colors.text.success : Colors.borders.light }} onPress={() => handleSelect()}>
+            {abbr_only ?
+            <View transparent style={{ padding:10 }}>
+                <Text size={text_size??16}  theme='h2' color={is_active ? Colors.text.success : undefined}>{athlete.position}: {athlete.abbr_name}</Text>
+            </View>
+            :
+            <View transparent style={{ flexDirection:'row', padding:2 }}>
+                <AthleteImage
+                    athlete={athlete}
+                    league={league}
+                    size={(text_size ?? 16) * 2}
+                    number_size={8}
+                    
+                />
+                <View transparent style={{marginLeft:10, marginRight:10}}>
+                    <Text size={text_size??16} theme='h2' color={is_active ? Colors.text.success : undefined}>{athlete.abbr_name}</Text>
+                    {athlete.team ?
+                    <Text style={{ marginTop:3 }} size={10} color={is_active ? Colors.text.success : undefined}>{league?`${league.league_name}: `:''}{athlete.team.abbr}</Text>
+                    :<></>}
+                </View>
+            </View>
+            }
+        </Button>
+    )
+}
+
+export default AthleteLozenge

package/src/Components/Jerseys.tsx

@@ -24,15 +24,15 @@ const AthleteImage = ({ athlete, size, number_size, league }:AthleteImageProps)
         }
         switch(league.league_name){
             case 'UFC':
-                return <MMAJersey /> 
+                return <MMAJersey size={size} /> 
             case 'BOXING':
-                return <MMAJersey />
+                return <MMAJersey size={size} />
             case 'MLB':
-                return <MLBJersey jersey_fill={athlete.team?.primary_color ?? Colors.brand.midnight} stripe_fill={athlete.team?.secondary_color ?? Colors.brand.mint}/>
+                return <MLBJersey size={size} jersey_fill={athlete.team?.primary_color ?? Colors.brand.midnight} stripe_fill={athlete.team?.secondary_color ?? Colors.brand.mint}/>
             case 'PGA':
                 return <PGAJersey size={size}/>
             case 'NHL':
-                return <NHLJersey jersey_fill={athlete.team?.primary_color ?? Colors.brand.midnight} stripe_fill={athlete.team?.secondary_color ?? Colors.brand.mint}/>
+                return <NHLJersey size={size} jersey_fill={athlete.team?.primary_color ?? Colors.brand.midnight} stripe_fill={athlete.team?.secondary_color ?? Colors.brand.mint}/>
             case 'NBA':
                 return <NBAJersey size={size} jersey_fill={athlete.team?.primary_color ?? Colors.brand.midnight} stripe_fill={athlete.team?.secondary_color ?? Colors.brand.mint} />
             case 'HORSE':
@@ -151,9 +151,12 @@ const NBAJersey = ({ jersey_fill, stripe_fill, size }:{ size?:number, jersey_fil
     )
 }
 
-const MMAJersey = () => {
+const MMAJersey = ({size}:{size?:number}) => {
+    const ratio = 0.78
+    const height = size ?? 40
+    const width = height * ratio
     return (
-        <Svg width="39px" height="50px" viewBox="0 0 39 50">
+        <Svg  width={`${width}px`} height={`${height}px`} viewBox="0 0 39 50">
             <G id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                 <G id="MMA_Glove" fillRule="nonzero">
                     <Polygon id="Path" fill="#002A51" points="14.5902716 37.2615039 21.5487452 37.2615039 31.5375218 37.2615039 34.0066576 37.7104377 35.2973423 39.3378227 35.7462761 41.8630752 35.7462761 45.5667789 35.2973423 47.3063973 34.2311245 48.8215488 32.323156 49.5510662 15.9931896 49.5510662 13.5240538 48.372615 12.2894859 46.0718294 12.0089023 42.3681257 12.7384197 39.2255892"></Polygon>
@@ -211,9 +214,12 @@ const Horse = ({ size }:{size?:number}) => {
 }
 
 
-const NHLJersey = ({ jersey_fill, stripe_fill }:{ jersey_fill:string, stripe_fill:string }) => {
+const NHLJersey = ({ jersey_fill, stripe_fill, size }:{ jersey_fill:string, stripe_fill:string, size?:number }) => {
+    const ratio = 0.882
+    const height = size ?? 40
+    const width = height * ratio
     return (
-        <Svg width="45px" height="51px" viewBox="0 0 45 51">
+        <Svg width={`${width}px`} height={`${height}px`} viewBox="0 0 45 51">
             <G id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                 <G id="HockeyJerseyTemplate-1" transform="translate(1.000000, -0.000000)">
                     <Path d="M21.8934492,50.1075287 C29.7517492,50.1075287 33.7066492,46.6889287 33.7066492,46.6889287 C33.3190492,41.6757287 33.2352492,36.4133287 33.2352492,36.4133287 C33.8640492,39.2624287 36.6538492,46.4634287 36.6538492,46.4634287 C40.0629492,46.4927287 43.7955492,45.5499287 43.7955492,45.5499287 C43.7955492,44.3025287 41.4281492,20.0472287 39.4436492,12.6199287 C37.4590492,5.19268874 35.9657492,4.03390874 34.8069492,3.42485874 C33.6481492,2.81500874 26.2738492,0.185014644 26.2738492,0.185014644 L26.3577492,0.185014644 C26.3577492,0.185014644 21.4987492,1.60244874 17.4386492,0.185014644 L17.5225492,0.185014644 C17.5225492,0.185014644 10.1482492,2.81500874 8.9886592,3.42405874 C7.8290892,4.03311874 6.3365092,5.19268874 4.3519492,12.6191287 C2.3673892,20.0464287 0,44.3017287 0,45.5499287 C0,45.5499287 3.7334092,46.4927287 7.1417292,46.4634287 C7.1417292,46.4634287 9.9314992,39.2624287 10.5603492,36.4133287 C10.5603492,36.4133287 10.3538492,42.5631287 10.0889492,46.6889287 C10.0889492,46.6889287 14.0350492,50.1075287 21.8934492,50.1075287 Z" id="Path" fill={jersey_fill} fillRule="nonzero"></Path>
@@ -235,9 +241,12 @@ const NHLJersey = ({ jersey_fill, stripe_fill }:{ jersey_fill:string, stripe_fil
 }
 
 
-const MLBJersey = ({ jersey_fill, stripe_fill }:{ jersey_fill:string, stripe_fill:string }) => {
+const MLBJersey = ({ jersey_fill, stripe_fill, size }:{ jersey_fill:string, stripe_fill:string, size?:number }) => {
+    const ratio = 0.857
+    const height = size ?? 40
+    const width = height * ratio
     return (
-        <Svg width="42px" height="49px" viewBox="0 0 42 49">
+        <Svg width={`${width}px`} height={`${height}px`} viewBox="0 0 42 49">
             <G id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                 <G id="Baseball" transform="translate(1.000000, 0.000000)">
                     <Path d="M3.44369,25.7043763 L0,17.6691763 L1.1479,17.2386763 L9.18316,14.2254763 L13.40966,13.1688763 L16.18536,12.3883763 C18.36636,14.2256763 21.23606,15.3735763 23.99096,12.3887763 L26.97556,13.0775763 L31.56706,14.2254763 L39.02846,17.2386763 L40.17636,17.6691763 L36.73266,25.7043763 L35.43216,25.5418763 L32.14106,25.1304763 L33.19456,41.9868763 L33.28896,43.4967763 C31.94976,43.8793763 29.15656,44.8742763 28.69736,45.7925763 C28.23816,46.7108763 23.91446,47.7056763 21.80996,48.0883763 L18.94026,48.0883763 C17.21846,48.0883763 12.62686,46.9404763 11.47896,45.7925763 C10.56066,44.8742763 8.41786,43.8793763 7.46136,43.4967763 L7.51506,41.7754763 L8.03526,25.1304763 L4.7442,25.5418763 L3.44369,25.7043763 Z" id="Path" fill={jersey_fill} fillRule="nonzero"></Path>

package/src/Components/LeagueLozenge.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Image, type ViewStyle } from "react-native"
+import type { LeagueProps } from '../types'
+import { Button, Text } from './Themed'
+import { useColors } from '../constants/useColors'
+
+
+type LeagueLozengeProps = {
+    league: LeagueProps,
+    is_active?:boolean,
+    text_size?:number,
+    style?:ViewStyle,
+    onSelect: (league:LeagueProps) => void
+}
+export const LeagueLozenge = ({ league, style, is_active, text_size, onSelect }:LeagueLozengeProps) => {
+    const Colors = useColors();
+    const handleSelect = () => {
+        if(!onSelect){ return }
+        onSelect(league)
+    }
+    
+    return (
+        <Button float style={{ flexDirection:'row', alignItems:'center', margin:4, borderWidth:1, borderColor:is_active?Colors.text.success: Colors.borders.light, borderRadius:100, padding:10, paddingRight:text_size??20, paddingLeft:text_size??20, ...style }} onPress={() => handleSelect()}>
+            {league.league_image ?
+            <Image
+                source={{ uri: league.league_image }}
+                style={{ height:18, width:18, marginRight:5 }}
+                resizeMode='cover'
+            />
+            :<></>}
+            <Text size={text_size??16} color={is_active ? Colors.text.success : undefined} theme='h2'>{league.league_name}</Text>
+        </Button>
+    )
+}
+
+export default LeagueLozenge

package/src/Components/MarketLozenge.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Button, Text } from './Themed'
+import { useColors } from '../constants/useColors'
+import type { MarketProps } from '../types'
+import type { ViewStyle } from 'react-native'
+
+type MarketLozengeProps = {
+    market: MarketProps,
+    text_size?:number,
+    is_active?:boolean,
+    style?:ViewStyle,
+    onSelect: (market:MarketProps) => void
+}
+export const MarketLozenge = ({ style, market, text_size, is_active, onSelect }:MarketLozengeProps) => {
+    const Colors = useColors();
+    const handleSelect = () => {
+        if(!onSelect){ return }
+        onSelect(market)
+    }
+    
+    return (
+        <Button float style={{ flexDirection:'row', alignItems:'center', margin:4, borderWidth:1, borderColor:is_active?Colors.text.success: Colors.borders.light, borderRadius:100, padding:10, paddingRight:text_size??20, paddingLeft:text_size??20, ...style }} onPress={() => handleSelect()}>
+
+            <Text size={text_size??16} color={is_active ? Colors.text.success : undefined} theme='h2'>{market.stat_label?market.stat_label:market.type}</Text>
+        </Button>
+    )
+}
+
+export default MarketLozenge

package/src/Components/PlayerLozenge.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Button, Text, View } from './Themed'
+import { useColors } from '../constants/useColors'
+import type { PublicPlayerProps } from '../types'
+import { Image } from 'react-native'
+
+type PlayerLozengeProps = {
+    player: PublicPlayerProps,
+    is_active?:boolean,
+    hide_name?:boolean,
+    onSelect: (player:PublicPlayerProps) => void
+}
+export const PlayerLozenge = ({ player, hide_name, is_active, onSelect }:PlayerLozengeProps) => {
+    const Colors = useColors();
+    
+    const handleSelect = () => {
+        if(!onSelect){ return }
+        onSelect(player)
+    }
+    
+    return (
+        <Button float style={{ flexGrow:!hide_name ?1 : undefined,flexDirection:'row', alignItems:'center', margin:4, borderColor:is_active?Colors.text.success:Colors.borders.light, borderWidth:1, padding:2, borderRadius:100 }} onPress={() => handleSelect()}>
+            <Image
+                source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                style={{ height:36, width:36, borderRadius:100 }}
+                resizeMode='cover'
+            />
+            {!hide_name ?
+            <View transparent style={{ flexGrow:1, padding:10 }}>
+                <Text theme='h2' color={is_active ? Colors.text.success: undefined}>@{player.username}</Text>
+            </View>
+            :<></>}
+        </Button>
+    )
+}
+
+export default PlayerLozenge

package/src/Components/TeamLozenge.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Button, Text, View } from './Themed'
+import { useColors } from '../constants/useColors'
+import type { LeagueProps, TeamProps } from '../types'
+import { TeamImage } from './Jerseys'
+
+type TeamLozengeProps = {
+    team: TeamProps,
+    leagues:LeagueProps[],
+    is_active?:boolean,
+    abbr_only?:boolean,
+    onSelect: (team:TeamProps) => void
+}
+export const TeamLozenge = ({ team, leagues, is_active, abbr_only, onSelect }:TeamLozengeProps) => {
+    const Colors = useColors();
+
+    const league = leagues.find(l => l.league_id == team.league_id);
+    
+    const handleSelect = () => {
+        if(!onSelect){ return }
+        onSelect(team)
+    }
+    
+    return (
+        <Button float style={{ flexGrow:1, flexDirection:'row', alignItems:'center', margin:4, borderColor:is_active?Colors.text.success:undefined, borderWidth:1, padding:0, borderRadius:100 }} onPress={() => handleSelect()}>
+            {abbr_only ?
+            <Text size={16} theme='h2' color={is_active ? Colors.text.success: undefined}>{league?.league_name}: {team.market_name} {team.name}</Text>
+            :
+            <View transparent style={{ flex:1, flexDirection:'row', alignItems:'center', padding:2 }}>
+                <TeamImage
+                    league={league}
+                    team={team}
+                    size={16}
+                />
+                <View transparent style={{ flex:1, marginLeft:10, padding:10 }}>
+                    <Text theme='h1' color={is_active ? Colors.text.success: undefined}>{team.market_name} {team.name}</Text>
+                </View>
+            </View>
+            }
+        </Button>
+    )
+}
+
+export default TeamLozenge

package/src/Components/index.tsx

@@ -11,6 +11,10 @@ import Toggle from './Toggle';
 import ProgressBar from './ProgressBar';
 import AutoScrollingFlatList from './AutoScrollFlatList';
 import PremiumIcons from './PremiumIcons';
+import LeagueLozenge from './LeagueLozenge';
+import MarketLozenge from './MarketLozenge';
+import AthleteLozenge from './AthleteLozenge';
+import PlayerLozenge from './PlayerLozenge';
 
 export {
     Button,
@@ -18,11 +22,15 @@ export {
     Spring,
     AutoScrollingFlatList,
     Switch,
+    MarketLozenge,
     TextInput,
+    PlayerLozenge,
+    AthleteLozenge,
     ProgressBar,
     Checkbox,
     Toggle,
     Icons,
+    LeagueLozenge,
     PremiumIcons,
     ConfirmationModal,
     LinearDiagnal

package/src/Premium/api/index.ts

@@ -0,0 +1,32 @@
+import axios from "axios";
+import { APIOverrides } from "../../ApiOverrides";
+import type { PlayerPremiumItem, PremiumItemProps } from "../../types";
+
+let AUTH_SVC_API = ''
+
+export const PremiumApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+    },
+    purchasePremiumItem: async(premium_item_id:string, type:'day'|'month'):Promise<PlayerPremiumItem | undefined> => {
+        try {
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/players/premium/item/purchase`, { premium_item_id, type })
+            return resp.data.player_premium_item
+        } catch (e) {
+            console.log(e)
+            return undefined
+        }
+    }
+}
+
+export const PremiumHelpers = {
+    getItemFromIdentifer : (identifier:string, premium_items?:PremiumItemProps[], player_premium_items?:PlayerPremiumItem[]):{ player_premium_item?:PlayerPremiumItem, premium_item?:PremiumItemProps } => {
+        if(!premium_items){ return {} }
+        let premium_item = premium_items.find(pi => pi.identifier == identifier);
+        if(!premium_item){ return {} }
+        if(!player_premium_items){ return { premium_item } }
+        let player_premium_item = player_premium_items.find(ppi => ppi.premium_item_id == premium_item.premium_item_id);
+        return { premium_item, player_premium_item }
+    }
+}

package/src/Premium/components/ALaCartePremium.tsx

@@ -5,12 +5,17 @@ import type { MyPlayerProps, PlayerPremiumItem, PremiumItemProps } from '../../t
 import { Icons, PremiumIcons } from '../../Components';
 import { Button, Text, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
+import type { ViewStyle } from 'react-native';
+import { PremiumApi } from '../api';
 
 type ALaCartePremiumProps = {
     identifier: string,
+    style?:ViewStyle,
     player?:MyPlayerProps,
     premium_item:PremiumItemProps,
-    player_premium_item?:PlayerPremiumItem
+    player_premium_item?:PlayerPremiumItem,
+    onPurchaseItem:(player_premium_item:PlayerPremiumItem) => void,
+    onViewPremium:(premium_item_id?:string) => void
 }
 
 export const getIconByFeature = (pi:PremiumItemProps, color:string) => {
@@ -35,7 +40,7 @@ export const getIconByFeature = (pi:PremiumItemProps, color:string) => {
 
 }
 
-const ALaCartePremium = ({ player, premium_item, player_premium_item }:ALaCartePremiumProps) => {
+const ALaCartePremium = ({ style, player, premium_item, player_premium_item, onPurchaseItem, onViewPremium }:ALaCartePremiumProps) => {
     const Colors = useColors();
     const [ expanded, setExpanded ] = useState(false);
     const [ purchase_loading, setPurchaseLoading ] = useState(false);
@@ -49,7 +54,13 @@ const ALaCartePremium = ({ player, premium_item, player_premium_item }:ALaCarteP
         if(!premium_item){ return }
         if(player_premium_item){ return }//Already have this one
         setPurchaseLoading(true);
-        //await dispatch(player_purchasePremiumItem(premium_item.premium_item_id, selected_price))
+        PremiumApi.setEnvironment();
+        let ppi = await PremiumApi.purchasePremiumItem(premium_item.premium_item_id, selected_price);
+        if(!ppi){ 
+            alert('Unable to complete purchase')
+            return setPurchaseLoading(false) 
+        }
+        onPurchaseItem(ppi);
         setPurchaseLoading(false)
     }
 
@@ -60,55 +71,68 @@ const ALaCartePremium = ({ player, premium_item, player_premium_item }:ALaCarteP
 
     if(player_premium_item){ return <></> } //We already have this!
     return (
-        <View style={{ padding:10, borderRadius:4 }}>
-            <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setExpanded(!expanded)}>
-                <View style={{ padding:5 }}>
+        <View transparent style={{ ...style }}>
+            <Button float transparent style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:expanded?0:1, borderBottomRightRadius:expanded?0:8, borderBottomLeftRadius:expanded?0:8 }} onPress={() => setExpanded(!expanded)}>
+                <View transparent style={{ padding:5 }}>
                     {getIconByFeature(premium_item, Colors.text.gold)}
                 </View>
-                <View style={{ flex:1, marginLeft:10 }}>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
                     <Text size={14} theme='h1'>Unlock Premium Item</Text>
                     <Text size={14} theme='description'>{premium_item.name}</Text>
                 </View>
-                <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.text.h1} size={16} />
+                <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.text.h1} size={10} />
             </Button>
             {expanded ?
-            <View>
+            <View transparent style={{ borderWidth:1, borderRadius:8, borderTopRightRadius:0, borderTopLeftRadius:0, borderColor:Colors.borders.light }}>
                 <Text style={{ padding:10 }} theme='description'>{premium_item.description}</Text>
                 {selected_price ?
-                <View style={{ padding:10, borderRadius:4 }}>
+                <View transparent style={{ padding:10, borderRadius:4 }}>
                     <View style={{ flexDirection:'row', marginTop:5 }}>
-                        <Button style={{ flex:1, borderRadius:8, padding:10, marginRight:2 }} onPress={() => {
-                            setSelectedPrice(undefined)
-                            setALaCarteDiscliamer(false);
-                        }}>
-                            <Text size={12} theme='h1'>Cancel</Text>
-                        </Button>
-                        <Button disabled={a_la_carte_disclaimer?false:true} style={{ flex:2, opacity:a_la_carte_disclaimer?1:0.5, borderRadius:8, padding:10, backgroundColor:Colors.text.success, marginLeft:2, marginRight:2 }} onPress={() => handlePurchasePremiumItem()}>
-                            <Text size={12} theme='h1'>Confirm ${selected_price == 'day' ? premium_item.daily_price:premium_item.monthly_price}</Text>
+                        <Button 
+                            style={{ flex:1, marginRight:2 }} onPress={() => {
+                                setSelectedPrice(undefined)
+                                setALaCarteDiscliamer(false);
+                            }}
+                            type='error'
+                            title='CANCEL'
+                        />
+                        <Button 
+                            type='success'
+                            disabled={!a_la_carte_disclaimer || purchase_loading?true:false}
+                            loading={purchase_loading} 
+                            title={`Confirm ${selected_price == 'day' ? premium_item.daily_price:premium_item.monthly_price}`}
+                            style={{ flex:2, opacity:!a_la_carte_disclaimer||purchase_loading?0.5:1, marginLeft:2, marginRight:2 }} 
+                            onPress={() => handlePurchasePremiumItem()}>
                         </Button>
                     </View>
                     <Button style={{ flexDirection:'row', marginTop:10 }} onPress={() => setALaCarteDiscliamer(!a_la_carte_disclaimer)}>
-                        <View style={{ marginRight:5, height:20, width:20, borderRadius:4, borderWidth:2, justifyContent:'center', alignItems:'center' }}>
+                        <View style={{ marginRight:10, height:20, width:20, borderRadius:4, borderWidth:1, justifyContent:'center', alignItems:'center' }}>
                             {a_la_carte_disclaimer ?
-                            <View style={{ height:10, width:10 }} />
+                            <View style={{ height:12, width:12, backgroundColor:Colors.text.h1 }} />
                             :<></>}
                         </View>
-                        <Text size={14}>I understand this feature will be unlocked for the next {selected_price==='day'?'24 hours':'month'} and ${selected_price == 'day' ? premium_item.daily_price : premium_item.monthly_price} will be deducted from my wallet immediately.</Text>
+                        <Text size={14} theme='description'>I understand this feature will be unlocked for the next {selected_price==='day'?'24 hours':'month'} and ${selected_price == 'day' ? premium_item.daily_price : premium_item.monthly_price} will be deducted from my wallet immediately.</Text>
                     </Button>
                 </View>
                 :
-                <View style={{ padding:10, borderRadius:4 }}>
+                <View transparent style={{ padding:10, borderRadius:4 }}>
                     <Text size={14} weight='bold' textAlign='left'>Unlock Options</Text>
-                    <View style={{ flexDirection:'row', marginTop:5 }}>
-                        <Button style={{ flex:1, borderRadius:8, padding:10, marginRight:2 }} onPress={() => console.log('selected!!!')}>
-                            <Text size={12} textAlign='center' weight='semibold'>VIEW PREMIUM</Text>
-                        </Button>
-                        <Button style={{ flex:1, borderRadius:8, padding:10, marginLeft:2, marginRight:2 }} onPress={() => setSelectedPrice('day')}>
-                            <Text size={12}  textAlign='center' weight='semibold'>${premium_item.daily_price} - 24 Hours</Text>
-                        </Button>
-                        <Button style={{ flex:1, borderRadius:8, padding:10, marginLeft:2 }} onPress={() => setSelectedPrice('month')}>
-                            <Text size={12}  textAlign='center' weight='semibold'>${premium_item.monthly_price} - 1 Month</Text>
+                    <View transparent style={{ flexDirection:'row', marginTop:5 }}>
+                        <Button 
+                            float
+                            style={{ flex:1, borderRadius:8, padding:10, marginRight:2 }} onPress={() => onViewPremium(premium_item.premium_item_id)}>
+                            <Text size={12} textAlign='center' weight='semibold' color={Colors.text.action}>VIEW PREMIUM</Text>
                         </Button>
+                        <Button
+                            type='success'
+                            title={`${premium_item.daily_price} - 24 Hours`}
+                            style={{ flex:1, borderRadius:8, padding:10, marginLeft:2, marginRight:2, alignItems:'center' }} onPress={() => setSelectedPrice('day')}
+                        />
+                        <Button
+                            type='success'
+                            title={`${premium_item.monthly_price} - 1 Month`}
+                            style={{ flex:1, borderRadius:8, padding:10, marginLeft:2, justifyContent:'center' }} onPress={() => setSelectedPrice('month')}
+                        />
                     </View>
                 </View>
                 }