be-components 0.7.3 → 0.7.4

package/src/Poll/components/PollOptionCard.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import { TextInput, TouchableOpacity, View } from "react-native"
+import type { PollOptionProps, PollResponseProps, PollSummaryProps } from "../../types";
+import Colors from "../../constants/colors";
+import { Button, Icons, Text } from "../../Components";
+
+type PollOptionCardProps = {
+    poll_option:PollOptionProps,
+    draft_selected?:boolean,
+    show_result?:boolean,
+    poll_response?:PollResponseProps,
+    poll_summary?:PollSummaryProps,
+    show_summary:boolean,
+    onSelect: (PollOptionProps: PollOptionProps) => void
+}
+const PollOptionCard = ({ draft_selected, show_result, poll_option, poll_summary, show_summary, onSelect, poll_response } : PollOptionCardProps) => {
+    const [ option_width, setOptionWidth ] = useState(0);
+    const [ input_locked, setInputLocked ] = useState(false);
+    const [ input_value, setInputValue ] = useState('');
+
+    const getResultColor = (result_ind?:'win'|'lose'|'draw') => {
+        switch(result_ind){
+            case 'win': return Colors.utility.success
+            case 'lose': return Colors.utility.error
+            case 'draw': return Colors.utility.warning
+            default: return Colors.brand.slate
+        }
+    }
+
+    const getResultIcon = (result_ind:'win'|'lose'|'draw') => {
+        let color = getResultColor(result_ind)
+        switch(result_ind){
+            case 'win':
+                return <Icons.CheckIcon color={color} size={12} />
+            case 'lose':
+                return <Icons.CloseIcon color={color} size={12} />
+            default: return <></>
+        }
+    }
+   
+    return (
+        <View>
+            {poll_option.option_type == 'select' ?
+            <TouchableOpacity 
+                style={{ flex:1, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, borderWidth:1, borderColor:show_result?getResultColor(poll_option.result_ind):Colors.shades.shade600, backgroundColor:draft_selected?Colors.highlights.highlight500Faded:undefined }}
+                onPress={() => onSelect(poll_option)}
+                onLayout={(ev) => {
+                    const { width } = ev.nativeEvent.layout
+                    setOptionWidth(width)
+                }}
+                >
+                <Text style={{ flex:1 }} textAlign="center" size={14} color={show_result?getResultColor(poll_option.result_ind):Colors.brand.midnight} weight='bold'>{poll_option.option_name}</Text>
+                {show_result && poll_option.result_ind ?
+                <View>
+                    {getResultIcon(poll_option.result_ind)}
+                </View>
+                :<></>}
+                {show_summary && poll_summary?
+                <View style={{ position: 'absolute', left:0, top:0, bottom:0, width:poll_summary.pct*option_width, borderRadius:22, backgroundColor:Colors.highlights.highlight400Faded }} />
+                :<></>}
+                {show_summary && poll_summary ? 
+                <View style={{ position:'absolute', right:5, top:0, bottom:0, justifyContent:'center' }}>
+                    <Text weight='regular' size={10} color={Colors.brand.midnight}>{(poll_summary.pct * 100).toFixed(2)}%</Text>
+                </View>
+                :<></>}
+            </TouchableOpacity>  
+            :
+            <View style={{ flexDirection:'row' }}>
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center', paddingRight:10, borderRadius:22, borderWidth: 1, borderColor: show_result?getResultColor(poll_response?.result_ind):Colors.shades.shade600 }}>
+                <TextInput
+                    style={{ flex:1, textAlign:'center', fontSize:14, padding:10, color:getResultColor(poll_response?.result_ind) }}
+                    keyboardType={poll_option.input_type == 'number' ? 'decimal-pad' : 'default'}
+                    editable={show_result?false:true}
+                    placeholder="Input Answer"
+                    value={poll_response ? poll_response.input_value : input_value}
+                    placeholderTextColor={Colors.shades.shade600}
+                    onChangeText={(text) => {
+                        if(draft_selected){ onSelect(poll_option) }
+                        setInputValue(text)
+                        setInputLocked(false);
+                    }}
+                />
+                    {show_result && poll_response?.result_ind ?
+                    <View>
+                        {getResultIcon(poll_response.result_ind)}
+                    </View>
+                    :<></>}
+                </View>
+                {!show_result ?
+                <Button
+                    style={{ marginLeft:5 }}
+                    borderRadius={22}
+                    title={input_locked?'Locked In':'Lock It In'}
+                    backgroundColor={input_locked?Colors.brand.slate:Colors.brand.electric}
+                    title_color={Colors.shades.white}
+                    onPress={() => {
+                        if(!input_value || input_value == ''){ return alert('Please enter valid value') }
+                        setInputLocked(true)
+                        onSelect({ ...poll_option, option_value: input_value })
+                    }}
+                />
+                :<></>}
+            </View>
+
+                } 
+        </View>
+    )
+}
+
+export default PollOptionCard

package/src/Poll/components/PollSelectCard.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { TouchableOpacity, View } from "react-native"
+import type { PollCampaignProps, PollOptionProps, PollProps, PollResponseProps } from "../../types"
+import Colors from "../../constants/colors"
+import { Icons, Text } from "../../Components"
+
+type PollSelectCardProps = {
+    selected?:boolean,
+    poll_campaign:PollCampaignProps,
+    poll:PollProps,
+    disabled?:boolean,
+    index:number,
+    show_response?:boolean,
+    response_option?:PollOptionProps,
+    poll_response?:PollResponseProps,
+    onSelect:(poll:PollProps) => void
+}
+
+const PollSelectCard = ({ index, poll, disabled, selected, poll_campaign, poll_response, show_response, response_option, onSelect }:PollSelectCardProps) => {
+
+    const getResultColor = () => {
+        switch(poll_response?.result_ind){
+            case 'win': return Colors.utility.success
+            case 'lose': return Colors.utility.error
+            case 'draw': return Colors.utility.warning
+            default: return Colors.brand.slate
+        }
+    }
+
+    const getStatusColor = () => {
+        switch(poll.status) {
+            case 'closed': return Colors.highlights.highlight300Faded
+            case 'active': return Colors.highlights.highlight400Faded
+            default: return Colors.highlights.highlight500Faded
+        }
+    }
+
+
+    const getResultIcon = () => {
+        let color = getResultColor()
+        switch(poll_response?.result_ind){
+            case 'win':
+                return <Icons.CheckIcon color={color} size={16} />
+            case 'lose':
+                return <Icons.CloseIcon color={color} size={12} />
+            default: 
+                if(poll.status == 'closed'){
+                    return <Icons.CloseIcon color={color} size={10} />
+                }
+                return <></>
+        }
+    }
+
+    const getStatusIcon = () => {
+        //let color = getResultColor()
+        switch(poll.status){
+            case 'closed':
+                return <Icons.LockClosedIcon color={Colors.brand.midnight} size={14} />
+            case 'active':
+                return <Icons.InProgressIcon color={Colors.brand.midnight} size={14} />
+            default:
+                return <Icons.PausedIcon color={Colors.brand.midnight} size={14} />
+        }
+    }
+
+    return (
+        <TouchableOpacity disabled={disabled} style={{ padding:10, borderRadius:22, backgroundColor:selected?Colors.highlights.highlight500Faded:undefined, flexDirection:'row' }} onPress={() => onSelect(poll)}>
+        <View style={{ height:20, width:20, borderRadius:100, backgroundColor:Colors.shades.white, marginRight:10, justifyContent:'center' }}>
+            <Text size={12} color={Colors.brand.midnight} weight='bold' textAlign='center'>{(index + 1).toString()}</Text>
+        </View>
+        <View style={{ flex:1 }}>
+            {poll_campaign.campaign_type == 'trivia' && !poll_response && poll.status != 'closed' ? 
+            <Text size={14} color={Colors.brand.midnight} weight='bold'>{poll.hidden_clue?`Hint: ${poll.hidden_clue}`:`Question Hidden`}</Text>
+            :
+            <Text size={14} color={Colors.brand.midnight} weight='bold'>{poll.poll_question}</Text>
+            }
+            {poll.status == 'closed' || show_response ?
+            <View style={{ marginTop:10, flexDirection:'row' }}>
+                {response_option && poll.poll_type == 'select' ?
+                <Text style={{ flex:1 }} size={12} color={Colors.brand.slate}>My Answer: <Text size={12} color={Colors.brand.midnight} weight='semibold'>{response_option.option_name}</Text></Text>
+                : response_option && poll.poll_type == 'input' ?
+                <Text style={{ flex:1 }} size={12} color={Colors.brand.slate}>My Answer: <Text size={12} color={Colors.brand.midnight} weight='semibold'>{poll_response?.input_value}</Text></Text>
+                :poll.status == 'closed' || poll_response?.timed_out ?
+                <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='light'>TIMED OUT</Text>
+                :<></>}
+                <View style={{ marginLeft:5 }}>
+                    {getResultIcon()}
+                </View>
+            </View>
+            :
+            <View style={{flexDirection:'row', alignItems:'center'}}>
+                <Text style={{ flex:1 }} size={12} color={Colors.brand.midnight} weight='light'>{poll.poll_type == 'select' ? 'Multiple Choice': 'Type Answer'}</Text>
+                <View style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:getStatusColor(), borderRadius:22 }}>
+                    {getStatusIcon()}
+                    {poll.seconds_allowed && poll.status != 'closed' ? 
+                    <Text style={{ marginLeft:5 }} size={12} color={Colors.brand.midnight} weight='bold'>{poll.seconds_allowed} Sec</Text>
+                    :<></>}
+                </View>
+            </View>
+            }
+        </View>
+    </TouchableOpacity>
+    )
+}
+
+export default PollSelectCard

package/src/Poll/components/ResponseTimer.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react"
+import { View } from "react-native"
+import { Text } from "../../Components"
+import Colors from "../../constants/colors"
+
+type ResponseTimerProps = {
+    poll_id:string,
+    seconds: number,
+    onTimesUp: () => void
+}
+const ResponseTimer = ({ seconds, onTimesUp }:ResponseTimerProps) => {
+    const [ seconds_remaining, setSecondsRemaining ] = useState(seconds);
+    const [ times_up, setTimesUp ] = useState(false);
+
+    useEffect(() => {
+        if(seconds_remaining > 0){
+            setTimeout(() => setSecondsRemaining(seconds_remaining - 1), 1000);
+        } else {
+            setTimesUp(true)
+        }
+    },[seconds_remaining])
+
+    
+    useEffect(() => {
+        if(!times_up){ return }
+        onTimesUp()
+    },[times_up])
+
+    return (
+        <View style={{ width:50, padding:10, borderRadius:22, backgroundColor:seconds_remaining < 5 ? Colors.utility.error : seconds_remaining < 10 ? Colors.utility.warning  : Colors.utility.success }}>
+            <Text textAlign="center" size={14} color={Colors.shades.white} weight='bold'>{seconds_remaining}</Text>
+        </View>
+    )
+}
+
+export default ResponseTimer
+

package/src/Poll/components/WidgetHeader.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Image, TouchableOpacity, View } from "react-native"
+import { Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+
+type WidgetHeaderProps = {
+    back_visible?:boolean,
+    image?:{ url:string }
+    title:string,
+    sub_title?:string
+    onBack: () => void
+}
+
+const WidgetHeader = ({ back_visible, title, sub_title, image, onBack }:WidgetHeaderProps) => {
+
+    return (
+        <View style={{ flexDirection:'row' }}>
+                {back_visible ?
+                <TouchableOpacity style={{ justifyContent:'center', alignItems:'center', flex:1 }} onPress={() => onBack()}>
+                    <Icons.ChevronIcon direction="left" color={Colors.shades.white} size={12} />
+                </TouchableOpacity>
+                :<View style={{ flex:1 }} />}
+                <View nativeID="header" style={{ flex:8 }}>
+                    <View nativeID="company" style={{ padding:20 }}>
+                        <Text size={18} color={Colors.shades.white} weight='bold' textAlign="center">{title}</Text>
+                        {sub_title ?
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.shades.white} weight='regular' textAlign="center">{sub_title}</Text>
+                        :<></>}
+                    </View>
+                </View>
+                {image ?
+                <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                    <Image 
+                        source={{ uri: image.url }}
+                        style={{ height:30, width:30 }}
+                        resizeMode="contain"
+                        />
+                </View>
+                :
+                <View style={{ flex:1 }} />
+                }
+            </View>
+    )
+}
+
+export default WidgetHeader

package/src/Poll/index.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react';
+import CampaignPlay from "./components/CampaignPlay"
+import { PollCampaignApi } from './api';
+
+
+type PollCampaignModuleProps = {
+    poll_campaign_id:string
+}
+const PollCampaign = ({ poll_campaign_id }: PollCampaignModuleProps ) => {
+    const [ loaded, setLoaded ] = useState(false);
+    useEffect(() => {
+        PollCampaignApi.setEnvironment();
+        setLoaded(true)
+    },[])
+    if(!loaded){ return <></> }
+    return (
+        <CampaignPlay
+            onRequestAuthenticate={() => console.log('')}
+            poll_campaign_id={poll_campaign_id}
+            onFinished={() => console.log('finished!!')}
+        />
+    )
+}
+
+export default PollCampaign

package/src/ProfileManager/Components/BasicInfoManager.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { View, ActivityIndicator, TouchableOpacity, ScrollView } from 'react-native';
 import { Button, Icons, Text, TextInput } from '../../Components';
-import type { MyPlayerProps } from '../api/types';
 import Colors from '../../constants/colors';
 import { ProfileApi } from '../api';
 import { button_styles } from '../../constants/styles';
+import type { MyPlayerProps } from '../../types';
 
 type BasicInfoManagerProps = {
     player:MyPlayerProps,

package/src/ProfileManager/Components/BasicStatus.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import { View, Image, ScrollView } from 'react-native';
 import { Button, Icons, Text } from '../../Components';
 import Colors from '../../constants/colors';
-import type { CodeRequestProps, PlayerReferralProps, PromoProps, PublicPlayerProps } from '../../types';
+import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps, PublicPlayerProps } from '../../types';
 import { view_styles } from '../../constants/styles';
-import type { MyPlayerProps } from '../api/types';
 
 type BasicStatusProps = {
     player:MyPlayerProps,

package/src/ProfileManager/Components/CodeRedeem.tsx

@@ -3,17 +3,23 @@ import { ActivityIndicator, View, Image } from 'react-native';
 import { Button, Icons, Text, TextInput } from '../../Components';
 import Colors from '../../constants/colors';
 import { ProfileApi, ProfileHelpers } from '../api';
-import type { CodeRequestProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps } from '../../types';
-import type { MyPlayerProps } from '../api/types';
+import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps } from '../../types';
 
 type CodeRedeemProps = {
     player:MyPlayerProps,
     walkthrough?:boolean,
     onVerify:() => void,
+    onRedeemCode:(code_details:{
+        code_request?:CodeRequestProps,
+        promo?:PromoProps,
+        player_referral?:PlayerReferralProps,
+        reward_option?:RewardOptionProps,
+        referrer?:PublicPlayerProps
+    }) => void,
     onClose:() => void
 }
 
-const CodeRedeem = ({ walkthrough, onVerify, onClose }:CodeRedeemProps) => {
+const CodeRedeem = ({ walkthrough, onVerify, onClose, onRedeemCode }:CodeRedeemProps) => {
     const [ loading, setLoading ] = useState(false);
     const [ show_reward, setShowReward ] = useState(false);
     const [ action_loading, setActionLoading ] = useState(false);
@@ -58,6 +64,7 @@ const CodeRedeem = ({ walkthrough, onVerify, onClose }:CodeRedeemProps) => {
         setShowReward(true);
         setTimeout(() => {
             setData({ ...request_response })
+            onRedeemCode(request_response)
             setActionLoading(false);
         }, 2000);
     }

package/src/ProfileManager/Components/DOBManager.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import type { MyPlayerProps } from '../api/types';
 import moment from 'moment-mini';
 import { View, ActivityIndicator, TouchableOpacity } from 'react-native';
 import { Button, Icons, Text, TextInput } from '../../Components';
 import Colors from '../../constants/colors';
 import { ProfileApi } from '../api';
 import { button_styles } from '../../constants/styles';
+import type { MyPlayerProps } from '../../types';
 
 type DOBManagerProps = {
     player:MyPlayerProps,

package/src/ProfileManager/Components/EmailManager.tsx

@@ -3,9 +3,9 @@ import React, { useEffect, useState } from 'react';
 import { View, ActivityIndicator, TouchableOpacity } from 'react-native';
 import { Button, Icons, Text, TextInput } from '../../Components';
 import Colors from '../../constants/colors';
-import type { MyPlayerProps } from '../api/types';
 import { button_styles, view_styles } from '../../constants/styles';
 import { ProfileApi, ProfileHelpers } from '../api';
+import type { MyPlayerProps } from '../../types';
 
 
 type EmailManagerProps = {

package/src/ProfileManager/Components/PasswordManager.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { View, FlatList, TouchableOpacity } from 'react-native';
 import { Button, Icons, Text, TextInput } from '../../Components';
-import type { MyPlayerProps, PasswordStateProps } from '../api/types';
+import type { PasswordStateProps } from '../api/types';
 import Colors from '../../constants/colors';
 import { ProfileApi, ProfileHelpers } from '../api';
 import { button_styles } from '../../constants/styles';
+import type { MyPlayerProps } from '../../types';
 
 type PasswordManagerProps = {
     player:MyPlayerProps,

package/src/ProfileManager/Components/PhoneManager.tsx

@@ -3,9 +3,9 @@ import React, { useEffect, useState } from 'react';
 import { View, ActivityIndicator, TouchableOpacity } from 'react-native';
 import { Button, Icons, Text, TextInput } from '../../Components';
 import Colors from '../../constants/colors';
-import type { MyPlayerProps } from '../api/types';
 import { button_styles, view_styles } from '../../constants/styles';
 import { ProfileApi, ProfileHelpers } from '../api';
+import type { MyPlayerProps } from '../../types';
 
 
 type PhoneManagerProps = {

package/src/ProfileManager/Components/ProfilePicManager.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { Image, View, ScrollView, TouchableOpacity } from "react-native"
-import type { MyPlayerProps } from "../api/types"
 import { Button, Icons, Text } from '../../Components';
 import ImageUploader from '../../Components/ImageUploader';
 import Colors from '../../constants/colors';
 import { ProfileApi } from '../api';
 import { button_styles } from '../../constants/styles';
+import type { MyPlayerProps } from '../../types';
 
 type ProfilePicManagerProps = {
     player:MyPlayerProps, 

package/src/ProfileManager/Components/ProfileWelcome.tsx

@@ -3,9 +3,8 @@ import { View, Image, ScrollView } from 'react-native';
 import Colors from '../../constants/colors';
 import { Button, Icons, Text } from '../../Components';
 import { ProfileHelpers } from '../api';
-import type { CodeRequestProps, PlayerReferralProps, PromoProps, PublicPlayerProps } from '../../types';
+import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps, PublicPlayerProps } from '../../types';
 import { view_styles } from '../../constants/styles';
-import type { MyPlayerProps } from '../api/types';
 
 
 type ProfileWelcomeProps = {

package/src/ProfileManager/Components/ProfileWizard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { View, FlatList, TouchableOpacity, Image, Linking } from 'react-native';
-import type {MyPlayerProps, ProfileLevelProps, ProfileStepProps, SettingProps } from "../api/types"
+import type { ProfileLevelProps, ProfileStepProps, SettingProps } from "../api/types"
 import { Button, Icons, Text } from '../../Components';
 import Colors from '../../constants/colors';
 import BasicInfoManager from './BasicInfoManager';
@@ -13,7 +13,7 @@ import VouchCard from './VouchCard';
 import ProfilePicManager from './ProfilePicManager';
 import ProfileWelcome from './ProfileWelcome';
 import CodeRedeem from './CodeRedeem';
-import type { CodeRequestProps, PlayerReferralProps, PlayerSettingProps, PromoProps, PublicPlayerProps } from '../../types';
+import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PlayerSettingProps, PromoProps, PublicPlayerProps, RewardOptionProps } from '../../types';
 import SettingsManager from './SettingsManager';
 import { ProfileApi } from '../api';
 import { view_styles } from '../../constants/styles';
@@ -32,6 +32,13 @@ type ProfileWizardProps = {
     init_walkthrough?:{
         level: 'basic'|'verify'
     },
+    onRedeemCode:(code_details:{
+        code_request?:CodeRequestProps,
+        promo?:PromoProps,
+        player_referral?:PlayerReferralProps,
+        reward_option?:RewardOptionProps,
+        referrer?:PublicPlayerProps
+    }) => void,
     profile_attribute?:'basic'|'phone'|'email'|'dob'|'password'|'vouch'|'notification'|'preferences',
     onClose:() => void,
     onNextStep:(step:string) => void,
@@ -42,7 +49,7 @@ type ProfileWizardProps = {
 }
 //                        { num:5, check: 'code', label: 'Promo', description: `Lets get you started with some promo bucks!`, complete:false },
 
-const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, init_walkthrough, show_welcome, onVouching, onNextStep, profile_attribute, width, hidden_groups, hidden_levels, hidden_steps, onUpdatePlayerSetting, onPlayerUpdate, onSelectLevel, onClose, onLogout }:ProfileWizardProps) => {
+const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, onRedeemCode, init_walkthrough, show_welcome, onVouching, onNextStep, profile_attribute, width, hidden_groups, hidden_levels, hidden_steps, onUpdatePlayerSetting, onPlayerUpdate, onSelectLevel, onClose, onLogout }:ProfileWizardProps) => {
     const [ draft_player, setDraftPlayer ] = useState(player);
     const [ show_code_request, setShowCodeRequest ] = useState(false);
     const [ welcome_hidden, setWelcomeHidden ] = useState(false);
@@ -395,6 +402,10 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
                     walkthrough={false}
                     player={draft_player}
                     onClose={() => setShowCodeRequest(false)}
+                    onRedeemCode={(cd) => {
+                        setCodeDetails(cd)
+                        onRedeemCode(cd)
+                    }}
                     onVerify={() => {
                         let verify_level = groups[0]?.profile_levels[1]
                         if(!verify_level){ return }

package/src/ProfileManager/Components/SettingsManager.tsx

@@ -2,8 +2,8 @@ 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 { MyPlayerProps, SettingProps } from '../api/types';
-import type { PlayerSettingProps } from '../../types';
+import type { SettingProps } from '../api/types';
+import type { MyPlayerProps, PlayerSettingProps } from '../../types';
 import { ProfileApi } from '../api';
 
 type SettingsManagerProps = {

package/src/ProfileManager/Components/VouchCard.tsx

@@ -4,9 +4,8 @@ import { Button, Icons, Text } from '../../Components';
 import Colors from '../../constants/colors';
 import { ProfileApi, ProfileHelpers } from '../api';
 import moment from 'moment-mini';
-import type { CodeRequestProps, PlayerReferralProps, PromoProps, PublicPlayerProps } from '../../types';
+import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps, PublicPlayerProps } from '../../types';
 import { view_styles } from '../../constants/styles';
-import type { MyPlayerProps } from '../api/types';
 
 type VouchCardProps = {
     player:MyPlayerProps,

package/src/ProfileManager/api/index.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
-import type { MyPlayerProps, PasswordStateProps, PlayerBalanceProps, SettingProps } from './types';
+import type { PasswordStateProps, SettingProps } from './types';
 import { APIOverrides } from '../../ApiOverrides';
-import type { CodeRequestProps, PlayerReferralProps, PlayerSettingProps, PromoProps, PublicPlayerProps, RewardOptionProps } from '../../types';
+import type { CodeRequestProps, MyPlayerProps, PlayerBalanceProps, PlayerReferralProps, PlayerSettingProps, PromoProps, PublicPlayerProps, RewardOptionProps } from '../../types';
 
 let AUTH_SVC_API = '';
 let VOUCH_ID = '';

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

@@ -37,38 +37,3 @@ export interface SettingProps {
 }
 
 
-export interface PlayerBalanceProps {
-    player_balance_id:string,
-    player_id:string,
-    free_market_balance:number,
-    balance:number,
-    promo_balance:number,
-    create_datetime:any,
-    last_udpate_datetime:any
-}
-
-
-export interface MyPlayerProps {
-    player_id:string, 
-    profile_pic:string, 
-    username:string, 
-    first_name:string,
-    last_name:string, 
-    email:string, 
-    type:'premium'|'freemium',
-    anonymous:boolean,
-    role:'player'|'admin',
-    guide_me?:boolean,
-    dob?:string,
-    auto_generated:boolean,
-    no_password:boolean,
-    open_to_challenges:boolean,
-    verified:boolean, //Email verification 
-    phone:string, 
-    phone_verified:boolean, 
-    vouched_status: 'verified'|'unverified'|'failed', 
-    bio?:string,
-    terms_agreed_on?:any,
-    create_datetime:any, 
-    last_update_datetime:any
-}

package/src/ProfileManager/index.tsx

@@ -4,8 +4,8 @@ import Colors from '../constants/colors';
 import { Text } from '../Components';
 import ProfileWizard from './Components/ProfileWizard';
 import { ProfileApi } from './api';
-import type { MyPlayerProps, PlayerBalanceProps, SettingProps } from './api/types';
-import type { PlayerSettingProps } from '../types';
+import type { SettingProps } from './api/types';
+import type { CodeRequestProps, MyPlayerProps, PlayerBalanceProps, PlayerReferralProps, PlayerSettingProps, PromoProps, PublicPlayerProps, RewardOptionProps } from '../types';
 
 type ProfileOverviewProps = {
     width:number,
@@ -20,6 +20,13 @@ type ProfileOverviewProps = {
     onClose:() => void,
     onVouchStart?:() => void,
     onLogout:() => void,
+    onRedeemCode:(code_details:{
+        code_request?:CodeRequestProps,
+        promo?:PromoProps,
+        player_referral?:PlayerReferralProps,
+        reward_option?:RewardOptionProps,
+        referrer?:PublicPlayerProps
+    }) => void,
     onNextStep?:(step:string) => void,
     onPlayerUpdate?:(p:MyPlayerProps, attribute?:string) => void,
     profile_attribute?:'basic'|'phone'|'email'|'dob'|'password'|'vouch'|'notification'|'preferences',
@@ -28,7 +35,7 @@ type ProfileOverviewProps = {
     }
 }
 
-const ProfileManager = ({ profile_attribute, hide_profile_header, player, hide_powered_by, onPlayerUpdate, onNextStep, onVouchStart, show_welcome, hidden_groups, hidden_steps, hidden_levels, walkthrough, width, onClose, onLogout }: ProfileOverviewProps ) => {
+const ProfileManager = ({ profile_attribute, hide_profile_header, player, hide_powered_by, onRedeemCode, onPlayerUpdate, onNextStep, onVouchStart, show_welcome, hidden_groups, hidden_steps, hidden_levels, walkthrough, width, onClose, onLogout }: ProfileOverviewProps ) => {
     const [ loading, setLoading ] = useState(false);
     const [ vouching, setVouching ] = useState(false);
     const [ draft_player, setDraftPlayer ] = useState<MyPlayerProps>();
@@ -113,6 +120,7 @@ const ProfileManager = ({ profile_attribute, hide_profile_header, player, hide_p
                                 if(active && onVouchStart){ onVouchStart() }
                                 setVouching(active)
                             }}
+                            onRedeemCode={onRedeemCode}
                             settings={settings}
                             show_welcome={show_welcome}
                             hide_powered_by={hide_powered_by}