be-components 0.3.3 → 0.3.4

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 { CodeRequestProps, MyPlayerProps, PlayerReferralProps, ProfileLevelProps, ProfileStepProps, PromoProps, SettingProps } from "../api/types"
 import { Button, Icons, Text } from '../../Components';
 import Colors from '../../constants/colors';
 import BasicInfoManager from './BasicInfoManager';
@@ -13,8 +13,9 @@ import VouchCard from './VouchCard';
 import ProfilePicManager from './ProfilePicManager';
 import ProfileWelcome from './ProfileWelcome';
 import CodeRedeem from './CodeRedeem';
-import type { PlayerSettingProps } from '../../types';
+import type { PlayerSettingProps, PublicPlayerProps } from '../../types';
 import SettingsManager from './SettingsManager';
+import { ProfileApi } from '../api';
 
 type ProfileWizardProps = {
     player:MyPlayerProps,
@@ -26,7 +27,9 @@ type ProfileWizardProps = {
     hidden_groups?:string[],
     hidden_levels?:string[],
     hidden_steps?:string[],
-    init_walkthrough?:boolean,
+    init_walkthrough?:{
+        level: 'basic'|'verify'
+    },
     profile_attribute?:'basic'|'phone'|'email'|'dob'|'password'|'vouch'|'notification'|'preferences',
     onClose:() => void,
     onLogout:() => void,
@@ -34,11 +37,20 @@ type ProfileWizardProps = {
     onPlayerUpdate:(player:MyPlayerProps, attribute?:string) => void
     onUpdatePlayerSetting:(player_setting:PlayerSettingProps) => void
 }
+//                        { 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, profile_attribute, width, hidden_groups, hidden_levels, hidden_steps, onUpdatePlayerSetting, onPlayerUpdate, onSelectLevel, onClose, onLogout }:ProfileWizardProps) => {
     const [ draft_player, setDraftPlayer ] = useState(player);
+    const [ code_details, setCodeDetails ] = useState<
+    {
+        code_request?:CodeRequestProps,
+        referrer?:PublicPlayerProps,
+        promo?:PromoProps,
+        player_referral?:PlayerReferralProps
+    }
+    >({})
     const [ show_logout, setShowLogout ] = useState(false);
-    const [ walkthrough, setWalkthrough ] = useState<boolean | undefined>(false);
+    const [ walkthrough, setWalkthrough ] = useState<string | undefined>(undefined);
     const [ active_level, setActiveLevel ] = useState<ProfileLevelProps>()
     const [ active_step, setActiveStep ] = useState<ProfileStepProps>()
     const [ groups, setGroups ] = useState([
@@ -70,7 +82,6 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
                         { num:2, check: 'phone', label: 'Phone', description: `Lets make sure you can access your account in case you forget your password`, complete:false },
                         { num:3, check: 'dob', label: 'Date of Birth', description: `We need to ensure you are at least 18 to play`, complete:false },
                         { num:4, check: 'vouch', label: 'Verify', description: `We need to ensure you are at least 18 to play`, complete:false },
-                        { num:5, check: 'code', label: 'Promo', description: `Lets get you started with some promo bucks!`, complete:false },
         
                     ]
                 }
@@ -96,9 +107,25 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
         }
     ])
 
+    useEffect(() => {
+        getCodeFromServer()
+    },[])
+
+    const getCodeFromServer = async() => {
+        const request_resp = await ProfileApi.getMyCodeDetails()
+        setCodeDetails(request_resp)
+    }
+
+    useEffect(() => {
+        if(!init_walkthrough){ return }
+        setWalkthrough(init_walkthrough.level)
+        let walkthroughLevel = groups.find(g => g.profile_levels.find(l => l.identifier == init_walkthrough.level))?.profile_levels.find(l => l.identifier == init_walkthrough.level)
+        setActiveLevel(walkthroughLevel)
+        if(!show_welcome){ setActiveStep(walkthroughLevel?.profile_steps[0]) }
+    },[init_walkthrough])
+
     useEffect(() => {
         if(!player){ return }
-        setWalkthrough(init_walkthrough ? true : false)
         setDraftPlayer(player)
         const groups = setupSteps(player)
         setGroups(groups);
@@ -111,7 +138,6 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
             let profile_step:ProfileStepProps|undefined = undefined
             groups.map(g => g.profile_levels.map((l:ProfileLevelProps) => {
                 let step = l.profile_steps.find(ps => ps.check == profile_attribute)
-                console.log(step)
                 if(step){ 
                     profile_step = step 
                     profile_level = l
@@ -227,11 +253,25 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
     }
 
     const renderSteps = (data:{ item: ProfileStepProps, index:number }) => {
+        if(!active_level){ return <></> }
         const active = data.item.check == active_step?.check ? true : false
         if(!active_level){ return <></> }
         return (
-            <TouchableOpacity style={{ padding:10, width: width / active_level?.profile_steps.length, backgroundColor:getStepColor(data.item, active) }} onPress={() => setActiveStep(data.item)}>
-                <Text size={14} color={active?Colors.shades.white:Colors.brand.midnight} weight='bold' textAlign='center'>{data.item.label}</Text>
+            <TouchableOpacity 
+                style={{ 
+                    padding:10, 
+                    width: (width - 20) / active_level.profile_steps.length, 
+                    backgroundColor:getStepColor(data.item, active),
+                    borderTopRightRadius: data.index == active_level.profile_steps.length - 1 ? 22 : 0,
+                    borderBottomRightRadius: data.index == active_level.profile_steps.length - 1 ? 22 : 0,
+                    borderBottomLeftRadius: data.index == 0 ? 22: 0,
+                    borderTopLeftRadius: data.index == 0 ? 22: 0
+
+                }} 
+                onPress={() => setActiveStep(data.item)}>
+                {!walkthrough ?
+                <Text size={14} textAlign='center' color={active?Colors.shades.white:Colors.brand.midnight} weight={active?'bold':'regular'}>{data.item.label}</Text>
+                :<></>}
             </TouchableOpacity>
         )
     }
@@ -306,6 +346,7 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
             </View>
             :
             <View style={{ flex:1 }}>
+            {!walkthrough ?
             <TouchableOpacity style={{  flexDirection:'row', alignItems:'center', padding:10, borderTopWidth:2, borderColor:Colors.shades.shade600 }} onPress={() => {
                 setActiveLevel(undefined)
                 setActiveStep(undefined)
@@ -321,7 +362,8 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
                 </View>
                 :<></>}
             </TouchableOpacity>
-            <View style={{ borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:22 }}>
+            :<></>}
+            <View style={{ borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:22, margin:10 }}>
                 <FlatList
                     data={active_level?.profile_steps}
                     renderItem={renderSteps}
@@ -335,18 +377,20 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
                 <ProfileWelcome
                     player={draft_player}
                     width={width}
+                    code_details={code_details}
                     onStartSetup={() => {
                         if(!active_level){ return }
-                        setWalkthrough(true);
-                        let next_step = active_level.profile_steps[0]
-                        setActiveStep(next_step)
+                        if(walkthrough){
+                            let next_step = active_level.profile_steps[0]
+                            setActiveStep(next_step)   
+                        }
                     }}
                     onClose={() => onClose()}
                 />
                 :active_step?.check == 'basic' ?
                 <BasicInfoManager
                     player={draft_player}
-                    walkthrough={walkthrough}
+                    walkthrough={walkthrough == 'basic' ? true : false}
                     onClose={() => {
                         if(profile_attribute){ return onClose() }
                         return setActiveLevel(undefined)
@@ -363,7 +407,7 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
                 :active_step?.check == 'profile_pic'?
                 <ProfilePicManager
                     player={draft_player}
-                    walkthrough={walkthrough}
+                    walkthrough={walkthrough == 'basic' ? true : false}
                     onClose={() => {
                         if(profile_attribute){ return onClose() }
                         return setActiveLevel(undefined)
@@ -382,7 +426,7 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
                         if(profile_attribute){ return onClose() }
                         return setActiveLevel(undefined)
                     }}
-                    walkthrough={walkthrough}
+                    walkthrough={walkthrough == 'basic' ? true : false}
                     onNext={() => {
                         if(!active_level){ return }
                         let next_step = active_level.profile_steps[3]
@@ -393,7 +437,7 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
                 :active_step?.check == 'email' ?
                 <EmailManager
                     player={draft_player}
-                    walkthrough={walkthrough}
+                    walkthrough={walkthrough == 'verify' ? true : false}
                     onClose={() => {
                         if(profile_attribute){ return onClose() }
                         return setActiveLevel(undefined)
@@ -412,7 +456,7 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
                         if(profile_attribute){ return onClose() }
                         return setActiveLevel(undefined)
                     }}
-                    walkthrough={walkthrough}
+                    walkthrough={walkthrough == 'verify' ? true : false}
                     onNext={() => {
                         if(!active_level){ return }
                         let next_step = active_level.profile_steps[2]
@@ -423,13 +467,15 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
                 :active_step?.check == 'basic_review' ?
                 <BasicStatus
                     player={draft_player}
+                    code_details={code_details}
                     onClose={() => {
                         if(profile_attribute){ return onClose() }
                         return setActiveLevel(undefined)
                     }}
                     onVerify={() => {
-                        let new_level = groups[0]?.profile_levels[1]
+                        let new_level = groups[0]?.profile_levels.find(l => l.identifier == 'verify')
                         if(!new_level){return }
+                        setWalkthrough('verify')
                         setActiveLevel(new_level)
                         onSelectLevel(new_level)
                         setActiveStep(new_level.profile_steps[0])
@@ -442,7 +488,7 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
                         if(profile_attribute){ return onClose() }
                         return setActiveLevel(undefined)
                     }}
-                    walkthrough={walkthrough}
+                    walkthrough={walkthrough == 'verify' ? true : false}
                     onNext={() => {
                         if(!active_level){ return }
                         let next_step = active_level.profile_steps[3]
@@ -516,4 +562,6 @@ const ProfileWizard = ({  player, hide_powered_by, settings, player_settings, in
     )
 }
 
+
+
 export default ProfileWizard

package/src/ProfileManager/Components/VouchCard.tsx

@@ -160,11 +160,11 @@ const VouchCard = ({ player, onPlayerUpdate, onClose }:VouchCardProps) => {
     return (
         <View style={{ flex:1 }}>
             <View style={{ flex:1 }}>
-                <View nativeID='vouch_header' style={{ borderTopRightRadius: 8, borderTopLeftRadius: 8, backgroundColor:Colors.shades.shade100, padding:10 }}>
-                    <Text size={16} color={Colors.brand.midnight} weight='semibold'>Help us identify you</Text>
-                    <Text style={{ marginTop:3 }} color={Colors.brand.midnight} size={14} weight='light'>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 style={{ padding:20 }}>
+                    <Text size={30} color={Colors.brand.midnight} weight='bold'>Help us identify you</Text>
+                    <Text style={{ marginTop:15 }} size={16} color={Colors.brand.midnight} weight='regular'>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>
-                <TouchableOpacity style={{padding:10, borderRadius:8, backgroundColor:Colors.highlights.highlight500Faded, marginLeft:15, marginRight:15, marginTop:10}} onPress={() => setInfoVisible(!info_visible)}>
+                <TouchableOpacity style={{padding:10, borderRadius:8, backgroundColor:Colors.highlights.highlight500Faded, margin:20}} onPress={() => setInfoVisible(!info_visible)}>
                     <View style={{ flexDirection:'row', alignItems:'center' }}>
                         <Text style={{ flex:1 }} size={14} weight='semibold' color={Colors.brand.midnight}>Why is this step required?</Text>
                         <Icons.ChevronIcon direction={info_visible?'up':'down'} size={10} color={Colors.brand.midnight} />
@@ -181,7 +181,7 @@ const VouchCard = ({ player, onPlayerUpdate, onClose }:VouchCardProps) => {
                         />
                 </View>
                 {player.vouched_status == 'unverified' ? 
-                <View>
+                <View style={{ padding:10 }}>
                     <TouchableOpacity 
                     style={{ flexDirection:'row', alignItems:'center', padding:10, marginLeft:15, marginRight:15, borderRadius:8, backgroundColor:Colors.shades.shade100, marginTop:5 }}
                     onPress={() => setDisclaimerConfirmed(!disclaimer_confirmed)}>
@@ -217,12 +217,9 @@ const VouchCard = ({ player, onPlayerUpdate, onClose }:VouchCardProps) => {
             :<></>}
             <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>   
                 <Button
-                    padding={15}
-                    style={{ flex:1, marginRight:5 }}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
-                    title_color={Colors.brand.electric}
-                    title='CLOSE'
+                    title='EXIT SETUP'
+                    title_color={Colors.utility.error}
+                    backgroundColor='transparent'
                     onPress={() => onClose()}
                 />
                 {player.vouched_status == 'unverified' ?

package/src/ProfileManager/api/index.ts

@@ -251,7 +251,7 @@ getReferralDescription : (promo:PromoProps) => {
         case 'promo_code': return `Get ${promo.amount} promo bucks after you verify your account`
         case 'promo_sweepstakes': return `Have a chance at UP TO 500 promo bucks after you verify your account`
         case 'referral_code': return `Get ${promo.amount} promo bucks after you verify your account. Your referrer will get the same after you make your first deposit`
-        case 'referral_sweepstakes': return `Have a change at UP TO 500 promo bucks after you verify your account. Your referrer will get the same after you make your first deposit`
+        case 'referral_sweepstakes': return `Have a chance at UP TO 500 promo bucks after you verify your account. Your referrer will get the same after you make your first deposit`
         default: return ''
     }
 } ,

package/src/ProfileManager/index.tsx

@@ -11,6 +11,7 @@ type ProfileOverviewProps = {
     width:number,
     show_welcome?:boolean,
     //access_token:string,
+    hide_powered_by?:boolean,
     hidden_groups?:string[],
     hidden_steps?:string[],
     hidden_levels?:string[],
@@ -18,10 +19,12 @@ type ProfileOverviewProps = {
     onLogout:() => void,
     onPlayerUpdate?:(p:MyPlayerProps, attribute?:string) => void,
     profile_attribute?:'basic'|'phone'|'email'|'dob'|'password'|'vouch'|'notification'|'preferences',
-    walkthrough?:boolean
+    walkthrough?: {
+        level: 'verify' | 'basic'
+    }
 }
 
-const ProfileManager = ({ profile_attribute, onPlayerUpdate, show_welcome, hidden_groups, hidden_steps, hidden_levels, walkthrough, width, onClose, onLogout }: ProfileOverviewProps ) => {
+const ProfileManager = ({ profile_attribute, hide_powered_by, onPlayerUpdate, show_welcome, hidden_groups, hidden_steps, hidden_levels, walkthrough, width, onClose, onLogout }: ProfileOverviewProps ) => {
     const [ loading, setLoading ] = useState(false);
     const [ draft_player, setDraftPlayer ] = useState<MyPlayerProps>();
     const [ player_balance, setPlayerBalance ] = useState<PlayerBalanceProps>();
@@ -85,7 +88,7 @@ const ProfileManager = ({ profile_attribute, onPlayerUpdate, show_welcome, hidde
                     {player_balance ?
                     <View style={{ paddingRight:10 }}>
                         <Text size={16} color={Colors.brand.midnight} weight='bold' textAlign='right'>${player_balance.balance.toFixed(2)}</Text>
-                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular' textAlign='right'>Promo  {player_balance.promo_balance.toFixed(2)}</Text>
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} weight='regular' textAlign='right'>Promo {player_balance.promo_balance.toFixed(2)}</Text>
                     </View>
                     :<></>}
                 </View>
@@ -95,6 +98,7 @@ const ProfileManager = ({ profile_attribute, onPlayerUpdate, show_welcome, hidde
                             player_settings={player_settings}
                             settings={settings}
                             show_welcome={show_welcome}
+                            hide_powered_by={hide_powered_by}
                             width={width}
                             hidden_groups={hidden_groups}
                             hidden_steps={hidden_steps}

package/src/constants/styles.ts

@@ -14,6 +14,15 @@ export const view_styles = StyleSheet.create({
     }
 })
 
+export const button_styles = StyleSheet.create({
+    wizard_valid: {
+        backgroundColor:Colors.shades.white, height:50, width:50, justifyContent:'center', alignItems:'center', borderRadius:100, ...view_styles.float
+    },
+    wizard_invalid: {
+        backgroundColor:Colors.shades.white, height:50, width:50, justifyContent:'center', alignItems:'center', borderRadius:100, opacity:0.5
+    }
+})
+
 
 export const text_styles = StyleSheet.create({
     dark_heading_1: {