be-components 5.3.4 → 5.3.7

package/src/ProfileManager/Components/VouchCard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { TouchableOpacity, Image, Modal, Alert, FlatList, Platform, useWindowDimensions } from 'react-native';
+import { Image, Modal, Alert, FlatList, Platform } from 'react-native';
 import { Icons } from '../../Components';
 import Colors from '../../constants/colors';
 import { ProfileApi, ProfileHelpers } from '../api';
@@ -36,7 +36,6 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
     const [ disclaimer_confirmed, setDisclaimerConfirmed ] = useState(false);
     const [ id_disclaimer_confirmed, setIDDisclaimerConfirmed ] = useState(false);
     const [ info_visible, setInfoVisible ] = useState(false);
-    const { height } = useWindowDimensions();
     const { code_request, promo } = code_details;
     useEffect(() => {
         getPlayerFromServer()
@@ -107,11 +106,10 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
     const renderSections = (data:{item:string, index:number}) => {
         switch(data.item){
             case 'header':
-                if(height < 830){ return <></> }
                 return (
                     <View style={{ padding:20 }}>
-                        <Text size={30} theme='h1'>Help us identify you</Text>
-                        <Text style={{ marginTop:15 }} size={16} theme='h2'>We need to take extra steps to verify your account. Scan your Driver's License or state issued ID and take a selfie for instant verification</Text>
+                        <Text size={26} theme='h1'>Help us identify you</Text>
+                        <Text style={{ marginTop:15 }} size={14} theme='h2'>We need to take extra steps to verify your account. Scan your Driver's License or state issued ID and take a selfie for instant verification</Text>
                     </View>
                 )
             case 'info':
@@ -140,8 +138,10 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
                 if(player.vouched_status != 'unverified'){ return <></> }
                 return (
                     <View style={{ padding:10 }}>
-                        <TouchableOpacity 
-                        onPress={() => setDisclaimerConfirmed(!disclaimer_confirmed)}>
+                        <Button 
+                            style={{ padding:0 }}
+                            onPress={() => setDisclaimerConfirmed(!disclaimer_confirmed)}
+                        >
                             <View float style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
                                 <View transparent style={{ justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:C.text.h1, borderRadius:4, height:20, width:20 }}>
                                     {disclaimer_confirmed ?
@@ -150,9 +150,11 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
                                 </View>
                                 <Text style={{ marginLeft:10, flex:1 }} theme='h2'>I confirm that my name is <Text size={14} theme='warning'>{player.first_name} {player.last_name}</Text> and that my date of birth is <Text size={14} theme='warning'>{new_date}</Text>. Mismatch will cause failure.</Text>
                             </View>
-                        </TouchableOpacity>
-                        <TouchableOpacity 
-                        onPress={() => setIDDisclaimerConfirmed(!id_disclaimer_confirmed)}
+                        </Button>
+                        <Button 
+                            onPress={() => setIDDisclaimerConfirmed(!id_disclaimer_confirmed)}
+                            style={{ padding:0 }}
+
                         >
                             <View float style={{  marginTop:10, padding:10, flexDirection:'row', alignItems:'center' }}>
                                 <View transparent style={{ justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:C.text.h1, borderRadius:4, height:20, width:20 }}>
@@ -162,7 +164,7 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
                                 </View>
                                 <Text style={{ marginLeft:10, flex:1 }} theme='h2'>I confirm that I am using a valid <Text size={14} theme='warning'>(Not Expired)</Text> US government issued ID. Expired ID will cause failure.</Text>
                             </View>
-                        </TouchableOpacity>
+                        </Button>
                     </View>
                 )
             case 'failed':
@@ -176,29 +178,39 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
                 if(!code_request || !promo){ return <></> }
                 if(['closed','fulfilled'].includes(code_request.status)){ return <></> }
                 return (
-                    <View float style={{ margin:10, flexDirection:'row', backgroundColor:Colors.incentive.gold }}>
-                        <View transparent style={{ padding:10, justifyContent:'center', alignItems:'center' }}>
-                            <Icons.GiftIcon size={40} color={C.text.white} />
-                            {player.vouched_status == 'verified' ? 
-                            <Text style={{ marginTop:5 }} textAlign='center' size={12} color={C.text.gold}>CLAIM NOW</Text>
-                            :<></>}
-                        </View>
-                        <View transparent style={{flex:1, padding:10 }}>
-                            <Text theme='h1'>{player.vouched_status == 'verified'?`Congrats! Press Here to claim your gift!`: 'Almost there! Last step to get your gift!'}</Text>
-                            <Text style={{ paddingTop:5 }} theme='h2'>{ProfileHelpers.getReferralDescription(promo)}</Text>
-                        </View>
+                    <View>
                         {player.vouched_status == 'verified' ?
-                        <TouchableOpacity 
+                        <Button 
+                            float
                             disabled={player.vouched_status!='verified' ? true : false}
                             onPress={() => onClaimGift()}
-                            style={{ position:'absolute', top: -60, right:0, left:0, justifyContent:'center', alignItems:'center' }}>
-                            <View float style={{ borderRadius:22, padding:10, marginBottom:7 }}>
+                            style={{flexDirection:'row', alignItems:'center', justifyContent:'center', alignSelf:'center' }}
+                            >
                                 <Text size={14} color={Colors.incentive.gold} weight='bold'>CLAIM ME NOW!</Text>
-                            </View>
-                            <Icons.ChevronIcon direction='down' size={8} color={Colors.incentive.gold} />
-                        </TouchableOpacity>
+                                <Icons.ChevronIcon direction='down' size={8} color={Colors.incentive.gold} />
+                        </Button>
                         :<></>}
+                        <Button 
+                            float 
+                            style={{ padding:0, margin:10, flexDirection:'row', backgroundColor:Colors.incentive.gold }}
+                            disabled={player.vouched_status != 'verified' ? true : false}
+                            onPress={() => onClaimGift()}
+                            >
+                        
+                            <View transparent style={{ padding:10, justifyContent:'center', alignItems:'center' }}>
+                                <Icons.GiftIcon size={40} color={C.text.white} />
+                                {player.vouched_status == 'verified' ? 
+                                <Text style={{ marginTop:5 }} textAlign='center' size={12} color={C.text.gold}>CLAIM NOW</Text>
+                                :<></>}
+                            </View>
+                            <View transparent style={{flex:1, padding:10 }}>
+                                <Text theme='h1'>{player.vouched_status == 'verified'?`Congrats! Press Here to claim your gift!`: 'Almost there! Last step to get your gift!'}</Text>
+                                <Text style={{ paddingTop:5 }} theme='h2'>{ProfileHelpers.getReferralDescription(promo)}</Text>
+                            </View>
+                            
+                        </Button>
                     </View>
+                   
                 )
             default: return <></>
         }
@@ -214,6 +226,26 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
                     renderItem={renderSections}
                 />
             </View>
+            {verify_errors.length > 0 ?
+            <View style={{ padding:10 }}>
+                <View type='footer' style={{ padding:20, borderRadius:8 }}>
+                    <View transparent style={{ padding:10 }}>
+                        <Text size={18} theme='h1'>ERRORS:</Text>
+                        <Text style={{ marginTop:5 }} theme='description'>Please fix the following before continuing to verify</Text>
+                    </View>
+                    <View float style={{ padding:10, borderRadius:8 }}>
+                        {verify_errors.map((e,i) => {
+                            return (
+                                <View transparent style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
+                                    <Text size={12} color={Colors.utility.warning} weight='bold'>{i+1} - {e}</Text>
+
+                                </View>
+                            )
+                        })}
+                    </View>
+                </View>
+            </View>
+            :<></>}
             <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>   
                 {walkthrough ?
                 <Button
@@ -234,8 +266,8 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
                 <Button
                     title={'START'}
                     loading={vouching || vouch_loading}
-                    disabled={!scan_ready || vouch_loading}
-                    style={{ flex:3, opacity:scan_ready && scan_ready&&!vouching?1:0.5 }}
+                    disabled={!scan_ready || vouch_loading || verify_errors.length > 0}
+                    style={{ flex:3, opacity:scan_ready && scan_ready&&!vouching&&verify_errors.length == 0?1:0.5 }}
                     type='success'
                     onPress={() => startVouchingPlayer()}
                 />
@@ -250,26 +282,7 @@ const VouchCard = ({ player, view_mode, walkthrough, insets, code_details, onVou
                 </View>
                 }
             </View>
-            {verify_errors.length > 0 ?
-            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center', padding:20 }}>
-                <View float style={{ padding:20, borderRadius:8 }}>
-                    <View transparent style={{ padding:10 }}>
-                        <Text size={18} theme='h1'>ERRORS:</Text>
-                        <Text style={{ marginTop:5 }} theme='description'>Please fix the following before continuing to verify</Text>
-                    </View>
-                    <View float style={{ padding:10, borderRadius:8 }}>
-                        {verify_errors.map((e,i) => {
-                            return (
-                                <View transparent style={{ padding:5, flexDirection:'row', alignItems:'center' }}>
-                                    <Text size={12} color={Colors.utility.warning} weight='bold'>{i+1} - {e}</Text>
-
-                                </View>
-                            )
-                        })}
-                    </View>
-                </View>
-            </View>
-            :<></>}
+            
             <Modal
                 visible={player?.vouched_status == 'unverified' && vouching ? true : false}
                 transparent

package/src/ProfileManager/api/index.ts

@@ -79,12 +79,10 @@ const ProfileApi = {
     },
     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  }> => {
@@ -93,7 +91,6 @@ const ProfileApi = {
     },
     tryCodeRequest: async(referral_code:string):Promise<{ result:'success'|'failed', error_message?:string, code_request?:CodeRequestProps, promo?:PromoProps, player_referral?:PlayerReferralProps, referrer?:PublicPlayerProps, reward_option?:RewardOptionProps }> => {
         const resp = await axios.post(`${AUTH_SVC_API}/v1/promos/request/try`, { referral_code })
-        console.log(resp.data)
         return resp.data
     },
     setPassword: async(password:string, re_password:string, current_password?:string):Promise<MyPlayerProps> => {

package/src/ProfileManager/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Image, ActivityIndicator, FlatList } from 'react-native';
+import { Image, ActivityIndicator } from 'react-native';
 import Colors from '../constants/colors';
 import ProfileWizard from './Components/ProfileWizard';
 import { ProfileApi } from './api';
@@ -12,6 +12,7 @@ type ProfileOverviewProps = {
     hide_powered_by?:boolean,
     hide_profile_header?:boolean,
     player?:MyPlayerProps,
+    keyboard_height:number,
     hidden_groups?:string[],
     insets?:{ top:number, bottom:number, left:number, right:number }
     hidden_steps?:string[],
@@ -36,7 +37,7 @@ type ProfileOverviewProps = {
     }
 }
 
-const ProfileManager = ({ profile_attribute, view_mode, hide_profile_header, insets, player, hide_powered_by, onRedeemCode, onPlayerUpdate, onNextStep, onFocusPosition, onVouchStart, show_welcome, hidden_groups, hidden_steps, hidden_levels, walkthrough, onClose, onLogout }: ProfileOverviewProps ) => {
+const ProfileManager = ({ profile_attribute, keyboard_height, view_mode, hide_profile_header, insets, player, hide_powered_by, onRedeemCode, onPlayerUpdate, onNextStep, onFocusPosition, onVouchStart, show_welcome, hidden_groups, hidden_steps, hidden_levels, walkthrough, onClose, onLogout }: ProfileOverviewProps ) => {
     const [ width, setModuleWidth ] = useState(400);
     const [ loading, setLoading ] = useState(false);
     const [ vouching, setVouching ] = useState(false);
@@ -79,46 +80,6 @@ const ProfileManager = ({ profile_attribute, view_mode, hide_profile_header, ins
         onClose()
     }
 
-    const renderProfile = (data:{ item:string, index:number }) => {
-        switch(data.item){
-            case 'profile':
-                if(!draft_player){ return <></> }
-                return (
-                    <ProfileWizard
-                        player={draft_player}
-                        player_settings={player_settings}
-                        onVouching={(active) => {
-                            if(active && onVouchStart){ onVouchStart() }
-                            setVouching(active)
-                        }}
-                        width={width}
-                        onRedeemCode={onRedeemCode}
-                        settings={settings}
-                        insets={insets}
-                        view_mode={view_mode}
-                        show_welcome={show_welcome}
-                        onFocusPosition={onFocusPosition}
-                        hide_powered_by={hide_powered_by}
-                        hidden_groups={hidden_groups}
-                        hidden_steps={hidden_steps}
-                        hidden_levels={hidden_levels}
-                        init_walkthrough={walkthrough}
-                        onNextStep={(step:string) => onNextStep ? onNextStep(step) : console.log()}
-                        onClose={() => onClose()}
-                        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) }
-                        }}
-                    />
-                )
-            default: return <></>
-        }
-    }
-
     if(!draft_player || loading){
         return (
             <View style={{ flex:1 }}>
@@ -154,15 +115,38 @@ const ProfileManager = ({ profile_attribute, view_mode, hide_profile_header, ins
                     :<></>}
                 </View>
                 :<></>}
-                <View style={{ flex:1 }}>
-                    <FlatList
-                        data={['profile']}
-                        key={'profile_list'}
-                        keyExtractor={item => item}
-                        renderItem={renderProfile}
+                <View style={{ flex:1, paddingBottom:keyboard_height }}>
+                    <ProfileWizard
+                        player={draft_player}
+                        player_settings={player_settings}
+                        onVouching={(active) => {
+                            if(active && onVouchStart){ onVouchStart() }
+                            setVouching(active)
+                        }}
+                        width={width}
+                        onRedeemCode={onRedeemCode}
+                        settings={settings}
+                        insets={insets}
+                        view_mode={view_mode}
+                        show_welcome={show_welcome}
+                        onFocusPosition={onFocusPosition}
+                        hide_powered_by={hide_powered_by}
+                        hidden_groups={hidden_groups}
+                        hidden_steps={hidden_steps}
+                        hidden_levels={hidden_levels}
+                        init_walkthrough={walkthrough}
+                        onNextStep={(step:string) => onNextStep ? onNextStep(step) : console.log()}
+                        onClose={() => onClose()}
+                        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) }
+                        }}
                     />
                 </View>
-
             </View>
         </View>
     )