be-components 0.2.7 → 0.2.9

package/src/ProfileManager/Components/SettingsManager.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import { ScrollView, View, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
+import { Button, Icons, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import type { SettingProps } from '../api/types';
+import type { PlayerSettingProps } from '../../types';
+import { ProfileApi } from '../api';
+
+type SettingsManagerProps = {
+    title: string,
+    description: string,
+    settings:SettingProps[],
+    icon:any,
+    player_settings: PlayerSettingProps[],
+    onUpdatePlayerSetting:(ps:PlayerSettingProps) => void
+}
+
+const SettingsManager = ({ title, description, icon, settings, player_settings, onUpdatePlayerSetting }:SettingsManagerProps) => {
+    const [ draft_setting, setDraftSetting ] = useState<PlayerSettingProps>()
+
+    const handleUpdateSetting = async(setting:SettingProps, option:string, status:'active'|'inactive', player_setting?:PlayerSettingProps) => {
+        if(player_setting){ player_setting.status = status }
+        else {
+            player_setting = {
+                player_setting_id:'',
+                player_id: '',
+                setting_id: setting.setting_id,
+                selected_option: option,
+                create_datetime: '', last_update_datetime: '',
+                status
+            }
+        }
+        player_setting = await ProfileApi.updatePlayerSetting(player_setting)
+        setDraftSetting(undefined)
+        onUpdatePlayerSetting(player_setting)
+    }
+
+    const renderPreferences = (data: { item:SettingProps, index:number }) => {
+        const my_settings = player_settings.filter(ps => ps.setting_id == data.item.setting_id);
+        const editing = data.item.setting_id == draft_setting?.setting_id ? true : false;
+        let shown_setting = editing ? draft_setting : my_settings[0]
+        const is_changed = shown_setting?.selected_option != my_settings[0]?.selected_option ? true : false
+
+        return (
+            <View style={local_styles.settings_container}>
+                <View style={{ padding:5, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{data.item.setting_label}</Text>
+                    <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight}>{data.item.setting_description}</Text>
+                </View>
+                <View>
+                    {data.item.option_type == 'number_input' ?
+                    <View>
+                        <View style={{flexDirection:'row', alignItems:'center', padding:10}}>
+                            <Text style={{ flex:1 }} size={14} color={Colors.brand.midnight} weight='bold'>My Setting</Text>
+                            <TextInput
+                                style={{ padding:10 }}
+                                editable={editing}
+                                value={shown_setting?.selected_option}
+                                onChangeText={(text) => {
+                                    if(!draft_setting){ return }
+                                    setDraftSetting({ ...draft_setting, selected_option: text })
+                                }}
+                            />
+                            {!editing ?
+                            <Button
+                                title='EDIT'
+                                style={{ marginLeft:5 }}
+                                title_color={Colors.shades.white}
+                                backgroundColor={Colors.brand.electric}
+                                onPress={() => setDraftSetting(my_settings[0])}
+                            />
+                            :
+                            <Button
+                                title='X'
+                                style={{ marginLeft:5 }}
+                                title_color={Colors.utility.error}
+                                borderColor={Colors.utility.error}
+                                borderWidth={1}
+                                onPress={() => setDraftSetting(undefined)}
+                            />
+                            }
+                        </View>
+                        {is_changed ?
+                        <Button
+                            title='SAVE'
+                            backgroundColor={Colors.utility.success}
+                            title_color={Colors.shades.white}
+                            onPress={() => {
+                                if(!shown_setting){ return }
+                                handleUpdateSetting(data.item, shown_setting.selected_option, 'active', shown_setting)}
+                            }
+                        />
+                        :<></>}
+                    </View>
+                    :data.item.option_type == 'select' ?
+                    <View nativeID='setting_options' style={{ padding:15, flexDirection:'row', justifyContent:'space-between' }}>
+                    {data.item.setting_options.map(so => {
+                        const my_setting = my_settings.find(ms => ms.selected_option == so)
+                        return (
+                            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center' }}
+                            onPress={() => handleUpdateSetting(data.item, so, my_setting?.status == 'active' ? 'inactive' : 'active', my_setting)}>
+                                <View style={{ height:20, width:20, justifyContent:'center', alignItems:'center', borderWidth:1, borderRadius:100, borderColor:Colors.brand.electric, backgroundColor:my_setting?.status == 'active' ? Colors.brand.electric : 'transparent' }}>
+                                    {my_setting?.status == 'active' ?
+                                    <Icons.CheckIcon color={Colors.shades.white} size={10} />
+                                    :<></>}
+                                </View>
+                                <Text style={{ marginLeft:10 }} size={12} color={Colors.brand.midnight} weight='semibold'>{so.toUpperCase()}</Text>
+                            </TouchableOpacity>
+                        )
+                    })}
+                </View>
+                    :<></>}
+                </View>
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <ScrollView style={{ flex:1 }}>
+                <View nativeID='preference_settings' style={{ padding:20 }}>
+                    <View nativeID='header' style={{ flexDirection:'row', alignItems:'center' }}>
+                        <View style={{ padding:10, backgroundColor:Colors.brand.electric, borderRadius:8 }}>
+                            {icon}
+                        </View>
+                        <View style={{ flex:1, marginLeft:5 }}>
+                            <Text size={16} color={Colors.brand.midnight} weight='bold'>{title}</Text>
+                            <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular'>{description}</Text>
+                        </View>
+                    </View>
+                    <View nativeID='notification_options' style={{ marginTop:20 }}>
+                        <FlatList
+                            data={settings}
+                            renderItem={renderPreferences}
+                            keyExtractor={(item) => item.setting_id.toString()}
+                        />
+                    </View>
+                </View>
+            </ScrollView>
+        </View>
+    )
+}
+
+const local_styles = StyleSheet.create({
+    settings_container: {
+        margin:3,
+        backgroundColor:Colors.shades.shade100,
+        padding:10
+    }
+})
+
+export default SettingsManager

package/src/ProfileManager/api/index.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
-import type { CodeRequestProps, MyPlayerProps, PasswordStateProps, PlayerBalanceProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps } from './types';
+import type { CodeRequestProps, MyPlayerProps, PasswordStateProps, PlayerBalanceProps, PlayerReferralProps, PromoProps, RewardOptionProps, SettingProps } from './types';
 import { APIOverrides } from '../../ApiOverrides';
+import type { PlayerSettingProps, PublicPlayerProps } from '../../types';
 
 let AUTH_SVC_API = '';
 let VOUCH_ID = '';
@@ -56,6 +57,7 @@ const ProfileApi = {
     },
     getMyDetails : async():Promise<MyPlayerProps> => {
         const resp = await axios.get(`${AUTH_SVC_API}/v1/players/player/me`)
+        console.log(resp.data)
         return resp.data.player
     },
     getMyBalance: async():Promise<PlayerBalanceProps> => {
@@ -66,6 +68,16 @@ const ProfileApi = {
         const resp = await axios.get(`${AUTH_SVC_API}/v1/promos/request/me`)
         return resp.data
     },
+    getMySettings: async():Promise<{ settings:SettingProps[], player_settings:PlayerSettingProps[] }> => {
+        const resp = await axios.get(`${AUTH_SVC_API}/v1/settings/me`)
+        console.log(resp.data)
+        return resp.data
+    },
+    updatePlayerSetting: async(player_setting:PlayerSettingProps):Promise<PlayerSettingProps> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/settings/player/update`, { player_setting })
+        console.log(resp.data)
+        return resp.data.player_setting
+    },
     redeemCode: async(code_request_id:string):Promise<{ code_request?:CodeRequestProps, promo?:PromoProps, player_referral?:PlayerReferralProps, referrer?:PublicPlayerProps, reward_option?:RewardOptionProps  }> => {
         const resp = await axios.post(`${AUTH_SVC_API}/v1/promos/request/redeem`, { code_request_id })
         return resp.data

package/src/ProfileManager/api/types.d.ts

@@ -4,31 +4,6 @@ declare global {
     }
 }
 
-export interface PublicPlayerProps {
-    player_id:string,
-    username:string,
-    email:string,
-    dob?:string,
-    first_name:string,
-    phone:number,
-    premium_tier_id?:string,
-    zip?:string;
-    last_name:string; 
-    type:string,
-    role:'admin'|'player'|'company'|'support'|'guest',
-    create_datetime:any,
-    verified:boolean,
-    home_location:string,
-    anonymous?:boolean,
-    auto_generated?:boolean,
-    no_password?:boolean,
-    show_name:string,
-    profile_pic?:string,
-    vouched_id?:string,
-    phone_verified:boolean,
-    bio?:string,
-    vouched_status:'unverified' | 'failed' | 'verified',
-}
 
 export interface ProfileLevelProps {
     num:number, label:string, description:string, identifier:string, pct_complete:number, profile_steps:ProfileStepProps[]
@@ -46,6 +21,21 @@ export interface PasswordStateProps {
     error?:string
 }
 
+export interface SettingProps {
+    setting_id:string,
+    setting: string,
+    setting_type: string,
+    setting_label: string,
+    setting_description: string,
+    setting_options: string[],
+    option_type: 'select'|'number_input'|'string_input',
+    status:string,
+    default_option: string,
+    multi_select:boolean,
+    create_datetime: any,
+    last_update_datetime: any
+}
+
 export interface CodeRequestProps {
     code_request_id:string, 
     player_id:string, 

package/src/ProfileManager/index.tsx

@@ -4,7 +4,8 @@ import Colors from '../constants/colors';
 import { Text } from '../Components';
 import ProfileWizard from './Components/ProfileWizard';
 import { ProfileApi } from './api';
-import type { MyPlayerProps, PlayerBalanceProps } from './api/types';
+import type { MyPlayerProps, PlayerBalanceProps, SettingProps } from './api/types';
+import type { PlayerSettingProps } from '../types';
 
 type ProfileOverviewProps = {
     width:number,
@@ -16,7 +17,7 @@ type ProfileOverviewProps = {
     onClose:() => void,
     onLogout:() => void,
     onPlayerUpdate?:(p:MyPlayerProps, attribute?:string) => void,
-    profile_attribute?:'basic'|'phone'|'email'|'dob'|'password'|'vouch',
+    profile_attribute?:'basic'|'phone'|'email'|'dob'|'password'|'vouch'|'notification'|'preferences',
     walkthrough?:boolean
 }
 
@@ -24,7 +25,9 @@ const ProfileManager = ({ profile_attribute, onPlayerUpdate, show_welcome, hidde
     const [ loading, setLoading ] = useState(false);
     const [ draft_player, setDraftPlayer ] = useState<MyPlayerProps>();
     const [ player_balance, setPlayerBalance ] = useState<PlayerBalanceProps>();
-    
+    const [ settings, setSettings ] = useState<SettingProps[]>([]);
+    const [ player_settings, setPlayerSettings ] = useState<PlayerSettingProps[]>([]);
+
     useEffect(() => {
         getPlayerFromServer()
     },[])
@@ -36,6 +39,9 @@ const ProfileManager = ({ profile_attribute, onPlayerUpdate, show_welcome, hidde
         try {
             const player = await ProfileApi.getMyDetails();
             const pb = await ProfileApi.getMyBalance();
+            const settings_response = await ProfileApi.getMySettings();
+            setSettings(settings_response.settings);
+            setPlayerSettings(settings_response.player_settings);
             setPlayerBalance(pb);
             setDraftPlayer(player);
         } catch (e) {
@@ -45,6 +51,7 @@ const ProfileManager = ({ profile_attribute, onPlayerUpdate, show_welcome, hidde
         setLoading(false);
     }
 
+
     const handleLogout = () => {
         setDraftPlayer(undefined);
         setPlayerBalance(undefined);
@@ -85,6 +92,8 @@ const ProfileManager = ({ profile_attribute, onPlayerUpdate, show_welcome, hidde
                 <View style={{ marginTop:10, flex:1 }}>
                         <ProfileWizard
                             player={draft_player}
+                            player_settings={player_settings}
+                            settings={settings}
                             show_welcome={show_welcome}
                             width={width}
                             hidden_groups={hidden_groups}
@@ -95,6 +104,7 @@ const ProfileManager = ({ profile_attribute, onPlayerUpdate, show_welcome, hidde
                             onLogout={() => handleLogout()}
                             profile_attribute={profile_attribute}
                             onSelectLevel={(level) => console.log(level)}
+                            onUpdatePlayerSetting={(new_ps) => setPlayerSettings(player_settings.filter(ps => ps.player_setting_id != new_ps.player_setting_id).concat(new_ps))}
                             onPlayerUpdate={(player, attribute) => {
                                 setDraftPlayer(player)
                                 if(onPlayerUpdate){ onPlayerUpdate(player, attribute) }

package/src/SocialComponents/PlayerCard.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import type { PlayerFollowerProps, PublicPlayerProps } from "../types";
+import { Image, View, TouchableOpacity, StyleSheet } from 'react-native';
+import Colors from '../constants/colors';
+import { Text } from '../Components';
+import { view_styles } from '../constants/styles';
+import PlayerFollowButton from './PlayerFollowButton';
+
+type PlayerCardProps = {
+    player:PublicPlayerProps,
+    width:number,
+    follow_loading?:boolean,
+    alignment?:'vertical'|'horizontal',
+    player_follower?:PlayerFollowerProps,
+    player_following?:PlayerFollowerProps,
+    show_follow?:boolean,
+    style?:any,
+    float?:boolean,
+    onSelectPlayer:(p:PublicPlayerProps) => void,
+    onFollowingUpdate:(pf:PlayerFollowerProps) => void
+}
+
+const PlayerCard = ({ player, width, follow_loading, alignment, style, float, show_follow, player_follower, player_following, onSelectPlayer, onFollowingUpdate }:PlayerCardProps) => {
+
+    let player_style = alignment == 'vertical' ? local_styles.player_vertical : local_styles.player_horizontal;
+    let container_style = { ...local_styles.container }
+    if(float){ container_style = { ...container_style, ...view_styles.float } }
+    return (
+        <View style={{ ...container_style, ...style, width }}>
+            <TouchableOpacity style={player_style} onPress={() => onSelectPlayer(player)}>
+                {alignment == 'vertical' ? 
+                <View>
+                    <Image
+                        source={{ uri: player.profile_pic }}
+                        style={{ height:width * 0.5, width:width, borderTopRightRadius:8, borderTopLeftRadius:8 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                :
+                <View style={{  }}>
+                    <Image
+                        source={{ uri: player.profile_pic }}
+                        style={{ height:55, width:55, borderTopLeftRadius:8, borderBottomLeftRadius:8}}
+                        resizeMode='cover'
+                    />
+                </View>
+                }
+                <View style={{ flex:1, padding:10 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold' textAlign={alignment == 'vertical' ? 'center' : 'left'}>{player.first_name} {player.last_name}</Text>
+                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.midnight} weight='regular' textAlign={alignment == 'vertical' ? 'center' : 'left'}>@{player.username}</Text>
+                </View>
+                {show_follow ?
+                <View style={{ padding:10, paddingTop:alignment=='vertical'?0:10 }}>
+                    <PlayerFollowButton
+                        loading={follow_loading}
+                        player_id={player.player_id}
+                        follower={player_follower}
+                        following={player_following}
+                        onFollowingUpdate={onFollowingUpdate}
+                    />
+                </View>
+                :<></>}
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+const local_styles = StyleSheet.create({
+    container: {
+        flex:1,
+        backgroundColor:Colors.shades.white,
+        borderRadius:8
+    },
+    player_vertical: {
+        flex:1,
+        flexDirection:'column',
+        //alignItems:'center'
+    },
+    player_horizontal: {
+        flex:1,
+        flexDirection: 'row',
+        alignItems:'center'
+    }
+})
+
+export default PlayerCard

package/src/SocialComponents/PlayerFollowButton.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Button } from "../Components"
+import Colors from "../constants/colors"
+import type { PlayerFollowerProps } from "../types"
+import { SocialComponentApi } from './api';
+
+type PlayerFollowButtonProps = {
+    player_id:string,
+    style?:any,
+    loading?:boolean,
+    follower?:PlayerFollowerProps,
+    following?:PlayerFollowerProps
+    onFollowingUpdate:(pf:PlayerFollowerProps) => void
+}
+
+const PlayerFollowButton = ({ player_id, loading, style, follower, following, onFollowingUpdate }:PlayerFollowButtonProps) => {
+
+
+    const handleAction = async(status:'following'|'not_following', player_follower?:PlayerFollowerProps) => {
+        if(!player_follower){
+            player_follower = {
+                player_follower_id:'',
+                player_id: '',
+                following_id: player_id,
+                status,
+                create_datetime:'', last_update_datetime:''
+            }
+        }
+        player_follower.status = status
+        const new_following = await SocialComponentApi.savePlayerFollower(player_follower)
+        onFollowingUpdate(new_following)
+    }
+
+
+    const getButtonType = () => {
+        let button_type = { type: 'follow', label: 'FOLLOW' };
+        if(follower?.status == 'following'){ button_type = { type: 'follow', label: 'FOLLOW BACK' } }
+        if(following?.status == 'following'){ button_type = { type: 'unfollow', label: 'UNFOLLOW' } }
+
+        switch(button_type.type){
+            case 'follow':
+                return (
+                    <Button
+                        style={{ ...style }}
+                        loading={loading}
+                        padding={10}
+                        title_size={12}
+                        disabled={loading}
+                        title={button_type.label}
+                        title_color={Colors.shades.white}
+                        backgroundColor={Colors.brand.electric}
+                        onPress={() => handleAction('following', following)}
+                    />
+                )
+            case 'unfollow':
+                return (
+                    <Button
+                        style={{ ...style }}
+                        title={button_type.label}
+                        title_size={12}
+                        padding={10}
+                        loading={loading}
+                        disabled={loading}
+                        title_color={Colors.brand.electric}
+                        borderWidth={1}
+                        borderColor={Colors.brand.electric}
+                        onPress={() => handleAction('not_following', following)}
+                    />
+                )
+            default: return <></>
+        }
+        
+    }
+
+    return getButtonType()
+
+    
+}
+
+export default PlayerFollowButton

package/src/SocialComponents/PlayerList.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet } from "react-native";
+import { SocialComponentApi } from './api';
+import PlayerCard from './PlayerCard';
+import type { PlayerFollowerProps, PublicPlayerProps } from '../types';
+
+type PlayerListProps = {
+    players:PublicPlayerProps[],
+    style?: any,
+    onPlayerSelect:(p:PublicPlayerProps) => void,
+    options: {
+        follow_status?:boolean,
+        direction: 'horizontal' | 'vertical',
+    }
+}
+
+const PlayerList = ({ players, style, options, onPlayerSelect }:PlayerListProps) => {
+    const [ size, setSize ] = useState({ width: 0, height:0 });
+    const [ follow_status_loading, setFollowStatusLoading ] = useState(false);
+    const [ player_followers, setPlayerFollowers ] = useState<PlayerFollowerProps[]>([]);
+
+    const { follow_status, direction } = options;
+
+    useEffect(() => { SocialComponentApi.setEnvironment() },[])
+
+    useEffect(() => {
+        if(players.length == 0){ return }
+        getListData();
+    },[players.length])
+
+    const getListData = async() => {
+        if(follow_status){
+            setFollowStatusLoading(true);
+            const player_followers = await SocialComponentApi.getBulkPlayerfollowers(players.map(p => p.player_id))
+            setPlayerFollowers(player_followers)
+            setFollowStatusLoading(false);
+        }
+    }
+    const new_style = direction == 'vertical' ? local_styles.container_vertical : local_styles.containter_horizontal
+    const alignment = direction == 'vertical' ? 'horizontal' : 'vertical'
+    const player_width = direction == 'vertical' ? size.width - 20: (size.width - 40) / 2
+    return (
+        <View style={{ ...new_style, ...style }} onLayout={(ev) => {
+            const { width, height } = ev.nativeEvent.layout
+            setSize({ width, height })
+        }}>
+            {players.map(p => {
+                let following = player_followers.find(pf => pf.following_id == p.player_id);
+                let follower = player_followers.find(pf => pf.player_id == p.player_id);
+                return (
+                    <View key={p.player_id.toString()} style={{ width: player_width, margin:8 }}>
+                        <PlayerCard
+                            width={player_width}
+                            style={{ borderRadius:8 }}
+                            player={p}
+                            float={true}
+                            alignment={alignment}
+                            player_following={following}
+                            player_follower={follower}
+                            show_follow={options.follow_status}
+                            follow_loading={follow_status_loading}
+                            onSelectPlayer={onPlayerSelect}
+                            onFollowingUpdate={(new_pf) => {
+                                setPlayerFollowers(player_followers.filter(pf => pf.player_follower_id != new_pf.player_follower_id).concat(new_pf))
+                            }}
+                        />
+                    </View>
+
+                )
+            })}
+        </View>
+    )
+}
+
+const local_styles = StyleSheet.create({
+    container_vertical: { flexDirection:'column', alignItems:'center' },
+    containter_horizontal: { flexDirection:'row', flexWrap: 'wrap', justifyContent:'center' }
+})
+
+
+export default PlayerList

package/src/SocialComponents/api/index.ts

@@ -0,0 +1,23 @@
+import axios from "axios";
+import { APIOverrides } from "../../ApiOverrides";
+import type { PlayerFollowerProps } from "../../types";
+
+let SOCIAL_SVC_API = '';
+
+export { SocialComponentApi }
+
+const SocialComponentApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        SOCIAL_SVC_API = endpoints['SOCIAL_SVC_API'] as string;
+
+    },
+    getBulkPlayerfollowers: async(player_ids:string[]) => {
+        const resp = await axios.post(`${SOCIAL_SVC_API}/v1/followers/bulk/get`, { player_ids })
+        return resp.data.player_followers
+    },
+    savePlayerFollower: async(player_follower:PlayerFollowerProps):Promise<PlayerFollowerProps> => {
+        const resp = await axios.post(`${SOCIAL_SVC_API}/v1/followers/player/create`, { player_follower })
+        return resp.data.player_follower
+    }
+}

package/src/SocialComponents/index.tsx

@@ -0,0 +1,8 @@
+import PlayerCard from "./PlayerCard";
+import PlayerList from "./PlayerList";
+
+
+export {
+    PlayerCard,
+    PlayerList
+}

package/src/constants/styles.ts

@@ -10,14 +10,7 @@ export const view_styles = StyleSheet.create({
         borderTopLeftRadius:22
     },
     float: {
-        shadowColor: "#000",
-        shadowOffset: { 
-            width: 0, 
-            height: 2 
-        },
-        shadowOpacity: 0.25,
-        shadowRadius: 3.84,
-        elevation: 5 
+        shadowColor: "rgba(0, 0, 0, 0.06)", shadowOffset: { width: 0, height: 10 }, shadowRadius: 10, shadowOpacity: 1
     }
 })
 

package/src/index.tsx

@@ -1,10 +1,12 @@
 import Authenticator from "./Authenticator";
 import ProfileManager from "./ProfileManager";
 import * as Components from './Components';
+import * as SocialComponents from './SocialComponents';
 import { APIOverrides } from "./ApiOverrides";
 import LinearGradient from "react-native-linear-gradient";
 import Colors from "./constants/colors";
 import Observer, { BEEventApi, BELinkApi } from './Observer';
+import BettorSearch from "./BettorSearch";
 
 
 export {
@@ -14,7 +16,9 @@ export {
   BELinkApi,
   ProfileManager,
   Components,
+  SocialComponents,
   APIOverrides,
   LinearGradient,
+  BettorSearch,
   Colors
 }