be-components 0.1.1 → 0.1.3

package/src/ProfileManager/Components/VouchCard.tsx

@@ -0,0 +1,265 @@
+import React, { useEffect, useState } from 'react';
+import { View, Platform, TouchableOpacity, Image } from 'react-native';
+import { Button, Icons, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import type { MyPlayerProps } from '../api/types';
+import { ProfileApi } from '../api';
+import moment from 'moment-mini';
+
+type VouchCardProps = {
+    player:MyPlayerProps,
+    onClose:() => void
+}
+
+const VouchCard = ({ player, onClose }:VouchCardProps) => {
+    const [ vouching, setVouching ] = useState(false);
+    const [ vouched, setVouched ] = useState<any | undefined>(undefined)
+    const [ disclaimer_confirmed, setDisclaimerConfirmed ] = useState(false);
+    const [ id_disclaimer_confirmed, setIDDisclaimerConfirmed ] = useState(false);
+    const [ info_visible, setInfoVisible ] = useState(false);
+    
+
+    useEffect(() => {
+        initializeVouch()
+        if(!vouched){ return }
+        vouched.mount('#vouched-element')
+    },[vouched])
+
+    const initializeVouch = () => {
+        if(Platform.OS != 'web' || !window || !document){ return }
+        if(window.Vouched){ return }
+        let script = document.createElement('script');
+        script.id = 'vouch';
+        script.src = 'https://static.vouched.id/plugin/releases/latest/index.js'
+        script.async = true;
+        script.defer = true;
+        script.onload = () => console.log('loaded!!!')
+        script.onerror = (e) => console.log(e);
+        document.body.appendChild(script);
+    }
+
+    const verifyErrors = (p:MyPlayerProps) => {
+        let errors:string[] = []
+        if(!p.first_name || !p.last_name){ errors.push('Please include your name.  This must match your ID exactly.') }
+        if(!p.dob || p.dob == ''){ errors.push('Please include your date of birth. This must match your ID exactly.') }
+        if(p.dob){ 
+            let age_diff = moment().diff(moment(p.dob), 'years')
+            if(age_diff < 18){ errors.push('Must be over the age of 18 to participate in real money activities on BettorEdge') }
+        }
+        if(!p.verified){ errors.push('A valid and verified email must be associated with your account before we can verify') }
+        if(!p.phone_verified){ errors.push('A valid and verified phone number must be associated with your account before we can verify') }
+        if(p.no_password){ errors.push('Please add a password for your account before you continue to verify') }
+        return errors
+    }
+
+    const startVouchingPlayer = async() => {
+        if(vouching || !player){ return }
+        //1) Lets make sure vouched js script has been initialized
+        if(!window.Vouched){ return alert('not ready') }
+        setVouching(true)
+
+
+        setVouched(window.Vouched({
+            verification: {
+                // verify the user's information 
+                firstName: player.first_name,
+                lastName: player.last_name,
+                // used for the crosscheck feature
+                email: player.email,
+                phone: player.phone,
+                enableIPAddress: true
+              },
+              id: 'camera',
+              face: 'camera',
+              showUploadFirst: false,
+              //token:player_vouch_token?.token,
+              appId: ProfileApi.getVouchId(),
+              //appId: "adqEZph8t*_NBFy6u_l4!t~Hin6kpK", //SANDBOX
+              // your webhook for POST verification processing
+              callbackURL: 'NEED TO ADD CALLBACK WEBHOOK URL HERE',
+              sandbox: true,
+              // mobile handoff
+              crossDevice: true,
+              crossDeviceQRCode: true,
+              includeBackId: true,
+              //includeBarcode:true,
+              cameraScreenLabelBackId: 'Please turn ID over to capture back',
+              onInit: async({token, job}:any) => {
+                console.log(token, job)
+                // If crossDevice is true, a web token is created during initialization 
+                // Your backend will save and associate the token the user.
+                //fetch(`/yourapi/idv?job_token=${job.token}&&user=${user.id}`);
+                //let pvt:PlayerVouchTokenProps = {
+                //    player_vouch_token_id:'', player_id:player.player_id, token, create_datetime:'', last_update_datetime:'', status:'active'
+                //}
+                //await player_saveVouchToken(pvt)
+              },
+      
+              onDone: (job:any)=> {
+                // token used to query jobs
+                console.log("Scanning complete", { token: job.token });
+      
+                // An alternative way to update your system based on the results of the job.
+                // Your backend could perform the following:
+                // 1. query jobs with the token
+                // 2. store relevant job information such as the id and success property into the user's profile
+                //fetch(`/yourapi/idv?job_token=${job.token}`);
+                console.log('vouch complete!')
+                setVouched(undefined)
+                setTimeout(() => {
+                    setVouching(false)
+                }, 3000);
+                // Redirect to the next page based on the job success
+                if( job.result.success){
+                  //window.location.replace("https");
+                } else {
+                }
+              },
+              // theme
+              theme: {
+                name: 'verbose',
+              },
+          }));
+    }
+
+    if(Platform.OS != 'web'){ return <></> }
+
+    if(vouched){
+        return (
+            <View style={{ borderRadius:8, backgroundColor:Colors.shades.shade100, paddingBottom:10 }}>
+                <View nativeID='vouch_header' style={{ padding:10 }}>
+                    <Text size={16} color={Colors.brand.midnight} weight='semibold'>Verify your account</Text>
+                    <Text style={{ marginTop:3 }} color={Colors.brand.midnight} size={14} weight='light'>Follow the prompts below to verify your identity instantly.</Text>
+                </View>
+                <div style={{ height:650 }} id='vouched-element'/>
+            </View>
+            
+        )
+    }
+
+    const verify_errors = verifyErrors(player)
+
+
+    let scan_ready = disclaimer_confirmed && id_disclaimer_confirmed ? true : false
+    let dob = player?.dob ?? ''
+    let split_dob = dob.split('T')
+    if(split_dob[0]){
+        split_dob = split_dob[0].split('-')
+    }
+    let new_date = `${split_dob[1]}/${split_dob[2]}/${split_dob[0]}`
+
+    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>
+                <TouchableOpacity style={{padding:10, borderRadius:8, backgroundColor:Colors.highlights.highlight500Faded, marginLeft:15, marginRight:15, marginTop:10}} 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} />
+                    </View>
+                    {info_visible ?
+                    <Text size={12} weight='regular' color={Colors.brand.midnight} style={{ marginTop:4 }}>When betting with real money, legally, BettorEdge has to verify your identity to make sure you are old enough to bet and that you are who you say you are.</Text>
+                    :<></>}
+                </TouchableOpacity>
+                <View style={{ alignSelf:'center' }}>
+                    <Image 
+                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1640215120/h4_2_media_fyiuoy.webp' }} 
+                        style={{ height: 150, width:300 }}
+                        resizeMode='contain'
+                        />
+                </View>
+                {player.vouched_status == 'unverified' ? 
+                <View>
+                    <TouchableOpacity 
+                    style={{ flexDirection:'row', alignItems:'center', padding:10, marginLeft:15, marginRight:15, borderRadius:8, backgroundColor:Colors.shades.shade100, marginTop:5 }}
+                    onPress={() => setDisclaimerConfirmed(!disclaimer_confirmed)}>
+                        <View>
+                        <View style={{ justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:Colors.brand.midnight, borderRadius:4, height:20, width:20 }}>
+                            {disclaimer_confirmed ?
+                            <Icons.CheckIcon size={14} color={Colors.brand.midnight} />
+                            :<></>}
+                        </View>
+                    </View>
+                        <Text style={{ marginLeft:10 }} size={12} color={Colors.brand.midnight} weight='regular'>I confirm that my name is <Text size={12} weight='bold'>{player.first_name} {player.last_name}</Text> and that my date of birth is <Text size={12} weight='bold'>{new_date}</Text>. Mismatch will cause failure.</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity 
+                    style={{ flexDirection:'row', marginTop:5, alignItems:'center', padding:10, marginLeft:15, marginRight:15, borderRadius:8, backgroundColor:Colors.shades.shade100 }}
+                    onPress={() => setIDDisclaimerConfirmed(!id_disclaimer_confirmed)}
+                    >
+                    <View>
+                        <View style={{ justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:Colors.brand.midnight, borderRadius:4, height:20, width:20 }}>
+                            {id_disclaimer_confirmed ?
+                            <Icons.CheckIcon size={14} color={Colors.brand.midnight} />
+                            :<></>}
+                        </View>
+                    </View>
+                    <Text style={{ marginLeft:10 }} size={12} color={Colors.brand.midnight} weight='regular'>I confirm that I am using a valid <Text size={12} weight='bold'>(Not Expired)</Text> US government issued ID. Expired ID will cause failure.</Text>
+                    </TouchableOpacity>
+                </View>
+                :<></>}
+            </View>
+            {player.vouched_status == 'failed' ?
+            <View style={{ margin:10, borderRadius:8, padding:10, backgroundColor:Colors.utility.warning }}>
+                <Text  textAlign='center' size={14} weight='bold' color={Colors.shades.white}>We are currently reviewing your account.  If you do not hear from us within 48 hours, please reach out to support@bettoredge.com</Text>
+            </View>
+            :<></>}
+            <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'
+                    onPress={() => onClose()}
+                />
+                {player.vouched_status == 'unverified' ?
+                <Button
+                    title='SCAN MY ID'
+                    title_color={Colors.shades.white}
+                    loading={vouching}
+                    disabled={!scan_ready}
+                    style={{ flex:3, opacity:scan_ready && scan_ready&&!vouching?1:0.5 }}
+                    padding={15}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => startVouchingPlayer()}
+                />
+
+                : player.vouched_status == 'failed' ?
+                <View style={{ flex:3, margin:4, borderRadius: 8, padding:10, backgroundColor:Colors.shades.shade100 }}>
+                    <Text size={16} color={Colors.brand.midnight} textAlign='center' weight='semibold'>Account In Review</Text>
+                </View>
+                :
+                <View style={{ flex:3, margin:4, borderRadius: 8, padding:10, backgroundColor:Colors.highlights.highlight500 }}>
+                    <Text size={16} color={Colors.brand.midnight} textAlign='center' weight='semibold'>You are verified!</Text>
+                </View>
+                }
+            </View>
+            {verify_errors.length > 0 ?
+            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center', padding:20 }}>
+                <View style={{ backgroundColor:Colors.shades.white, padding:20, borderRadius:8 }}>
+                    <View style={{ padding:10 }}>
+                        <Text size={18} color={Colors.brand.midnight} weight='bold'>ERRORS:</Text>
+                        <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight}>Please fix the following before continuing to verify</Text>
+                    </View>
+                    <View style={{ padding:10, backgroundColor:Colors.shades.shade100, borderRadius:8 }}>
+                        {verify_errors.map((e,i) => {
+                            return (
+                                <View 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>
+    )
+}
+
+export default VouchCard

package/src/ProfileManager/api/index.ts

@@ -0,0 +1,250 @@
+import axios from 'axios';
+import type { CodeRequestProps, MyPlayerProps, PasswordStateProps, PlayerBalanceProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps } from './types';
+import { APIOverrides } from '../../ApiOverrides';
+
+let AUTH_SVC_API = '';
+let VOUCH_ID = '';
+
+const ProfileApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+        VOUCH_ID = endpoints['VOUCH_ID'] as string;
+    },
+    getVouchId:() => {
+        return VOUCH_ID
+    },
+    isAttributeValid: async(attribute:string, attribute_value:string) => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/attribute/valid`, { attribute, attribute_value })
+        return resp.data.valid
+    },
+    updatePlayerPic: async(profile_pic:any):Promise<MyPlayerProps> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/pic/update`, { profile_pic })
+        return resp.data.player
+    },
+    updatePlayerDOB: async(dob:any):Promise<MyPlayerProps> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/dob/update`, { dob })
+        return resp.data.player
+    },
+    updatePlayerName: async(first_name:string, last_name:string):Promise<MyPlayerProps> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/name/update`, { first_name, last_name })
+        return resp.data.player
+    },
+    updatePlayerUsername: async(username:string):Promise<MyPlayerProps> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/username/update`, { username })
+        return resp.data.player
+    },
+    updatePlayerEmail: async(email:string):Promise<void> => {
+        await axios.post(`${AUTH_SVC_API}/v1/players/player/email/update`, { email })
+        return
+    },
+    confirmPlayerEmail: async(token:string):Promise<MyPlayerProps> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/email/confirm`, { token })
+        return resp.data.player
+    },
+    updatePlayerPhone: async(phone:string):Promise<void> => {
+        await axios.post(`${AUTH_SVC_API}/v1/players/player/phone/update`, { phone })
+        return
+    },
+    confirmPlayerPhone: async(token:string):Promise<MyPlayerProps> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/phone/confirm`, { token })
+        return resp.data.player
+    },
+    getMyDetails : async():Promise<MyPlayerProps> => {
+        const resp = await axios.get(`${AUTH_SVC_API}/v1/players/player/me`)
+        return resp.data.player
+    },
+    getMyBalance: async():Promise<PlayerBalanceProps> => {
+        const resp = await axios.get(`${AUTH_SVC_API}/v1/players/player/balance/me`)
+        return resp.data.player_balance
+    },
+    getMyCodeDetails: async():Promise<{ code_request?:CodeRequestProps, promo?:PromoProps, player_referral?:PlayerReferralProps, referrer?:PublicPlayerProps, reward_option?:RewardOptionProps }> => {
+        const resp = await axios.get(`${AUTH_SVC_API}/v1/promos/request/me`)
+        return resp.data
+    },
+    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
+    },
+    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> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/password/create`, { password, re_password, current_password })
+        return resp.data.player
+    },
+    forgotUsername : async(attribute:string, attribute_value:string):Promise<void> => {
+        await axios.post(`${AUTH_SVC_API}/v1/players/player/forgot/username`, { attribute, attribute_value })
+        return
+    },
+    forgotPassword : async(attribute:string, attribute_value:string):Promise<void> => {
+        await axios.post(`${AUTH_SVC_API}/v1/players/player/forgot/password`, { attribute, attribute_value })
+        return
+    },
+    resetPassword : async(password:string, repassword:string, verify_code:string):Promise<void> => {
+        await axios.post(`${AUTH_SVC_API}/v1/players/player/reset/password`, { password, repassword, verify_code })
+        return
+    },
+}
+
+const ProfileHelpers = {
+    /**
+ * Takes a phone number string and returns a formatted verison of the phone number with - between numbers
+ * @param phone 
+ * @returns formatted phone string
+ */
+formatPhone : (phone?:string) => {
+    if(!phone){ return '' }
+    let splitPhone = phone.split('')
+    if(splitPhone.length === 0){ return '' }
+    if(splitPhone.length > 10 && splitPhone[0] == '1'){ splitPhone.splice(0,1) }
+    let newPhone = ''
+    splitPhone.map((c, i) => {
+        newPhone += c
+        if(i === 2 && splitPhone.length > 3){ newPhone += '-' }
+        if(i === 5 && splitPhone.length > 6){ newPhone += '-' }
+    })
+    return newPhone
+},
+isEmailValid : (email:string):{ valid:boolean, error?:string } => {
+    if(email === ''){ return { valid:false, error:'Please enter valid email' } }
+    // function that returns true if value is email, false otherwise
+    var emailRex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+      if (emailRex.test(email)) {
+        return { valid:true };
+      }
+      return { valid:false, error:'Must be a valid email' };
+},
+/**
+ * Removes - from a formatted phone string
+ * @param formatted_phone 
+ * @returns unformatted phone string
+ */
+unformatPhone : (formatted_phone:string) => {
+    let splitPhone = formatted_phone.split('-')
+    let newPhone = ''
+    splitPhone.map(c => {
+        newPhone += c
+    })
+    return newPhone
+},
+ fullUnformatPhone : (formatted_phone:string) => {
+    let unformatted_phone = ProfileHelpers.unformatPhone(formatted_phone)
+    let no_par = unformatted_phone.split('(')
+    unformatted_phone = no_par.join('')
+    no_par = unformatted_phone.split(')')
+    unformatted_phone = no_par.join('')
+    let no_plus = unformatted_phone.split('+1')
+    unformatted_phone = no_plus.join('')
+    let no_space = unformatted_phone.split(' ')
+    unformatted_phone = no_space.join('')
+    return unformatted_phone
+},
+
+isAttributeValid : (attribute:string, value:string, optional?:boolean):{ valid:boolean, error?:string } => {
+    if(optional){ return { valid:true } }
+    switch(attribute){
+        case 'phone':
+            return ProfileHelpers.isPhoneValid(value)
+        case 'email':
+            return ProfileHelpers.isEmailValid(value)
+        default:
+            if(!value || value == ''){ return { valid:false, error: 'Attribute must not be blank' } }
+            return { valid:true }
+    }
+},
+/**
+ * Checks if phone number is a vali US number
+ * @param phone 
+ * @returns 
+ */
+isPhoneValid : (phone:string):{ valid: boolean, error?:string } => {
+    if(!phone || phone === '') { return { valid: false, error:'Phone number must be entered' } }
+    let phoneasnum = parseInt(phone)
+    if(isNaN(phoneasnum)){ return { valid:false, error:'Phone number must be a US 10 digit number' } }
+    if(phone.length === 10){ return { valid:true } }
+    return { valid:false, error: 'Phone number must be a US 10 digit number' }
+},
+isPasswordValid : (password:string, validState:PasswordStateProps):PasswordStateProps => {
+    if(!password || password === ''){ return { ...validState, state:'not_started' } }
+    switch(validState.type){
+        case 'min_character':
+            if(password.length < 8){ return { ...validState, state:'invalid', error:`Password is only ${password.length} characters` } }
+            return { ...validState, state:'valid' }
+        case 'case':
+            if(ProfileHelpers.doesStringContainUpperAndLowercase(password)){ return { ...validState, state:'valid' } }
+            return { ...validState, state:'invalid', error:'Password does not contain upper and lower case' }
+        case 'number':
+            if(ProfileHelpers.doesStringContainDigit(password)){ return { ...validState, state:'valid' } }
+            return { ...validState, state:'invalid', error:'Password does not contain a number' }
+        case 'special':
+            if(ProfileHelpers.doesStringContainSpecialCharacter(password)) { return { ...validState, state:'valid' } }
+            return { ...validState, state:'invalid', error: 'Password does not contain a special character' }
+        default: return validState
+    }
+},
+
+/**
+ * Regex to check if string contains upper and lowercase letter
+ * @param text 
+ * @returns 
+ */
+doesStringContainUpperAndLowercase : (text:string) => {
+    if(/^(?=.*[a-z])(?=.*[A-Z])/.test(text)){ return true }
+    return false
+},
+
+/**
+ * Regex to check if string contains a number
+ * @param text 
+ * @returns 
+ */
+doesStringContainDigit : (text:string) => {
+    if(/^(?=.*\d)/.test(text)){ return true }
+    return false
+},
+
+/**
+ * Regext to check if string contains a special character
+ * @param value 
+ * @returns 
+ */
+doesStringContainSpecialCharacter : (value:string) => {
+    var reg = /^(?=.*[~!@#$%^&*()?.,';`])/;
+    if(reg.test(value)) {
+        return true
+    }
+    return false
+  },
+
+
+/**
+ * Checks if two password strings match
+ * @param account 
+ * @returns 
+ */
+doPasswordsMatch : (password:string, re_password:string):PasswordStateProps => {
+    if(!re_password){ return { attribute:'re_password', state:'not_started' } }
+    if(password == re_password){ return { attribute:'re_password', state:'valid' } }
+    return { attribute: 're_password', state:'invalid', error: 'Passwords do not match' }
+},
+getReferralDescription : (promo:PromoProps) => {
+    switch(promo.type){
+        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`
+        default: return ''
+    }
+} ,
+isChangeCodeAllowed :(code_request?:CodeRequestProps ) => {
+    if(!code_request){ return true }
+    if(['fulfilled','closed'].includes(code_request.status)){ return false }
+    return true
+}
+
+}
+
+export { ProfileApi, ProfileHelpers }

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

@@ -0,0 +1,138 @@
+declare global {
+    interface Window {
+        Vouched?:any;
+    }
+}
+
+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[]
+}
+
+export interface ProfileStepProps {
+    num:number, check:string, label:string, description: string, pct_complete?:number, complete?:boolean
+}
+
+export interface PasswordStateProps { 
+    type?:string, 
+    label?:string, 
+    attribute:string, 
+    state:'not_started'|'valid'|'invalid', 
+    error?:string
+}
+
+export interface CodeRequestProps {
+    code_request_id:string, 
+    player_id:string, 
+    referral_code:string, 
+    create_datetime:any, 
+    reward_option_id?:string,
+    status:'requested' | 'fulfilled' | 'invalid' | 'verified' | 'closed', 
+    last_update_datetime: any, 
+    referrer_id?:string, 
+    pending_deposit?:boolean
+}
+
+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 RewardOptionProps {
+    reward_option_id: string,
+    reward_type: string,
+    reward_value: number,
+    reward_name:string,
+    status: 'active' | 'inactive',
+    market_type: 'FOR_MONEY' | 'FREE' | 'PROMO',
+    award_quotient: number,
+    create_datetime: any,
+    last_update_datetime: any
+}
+
+
+export interface PlayerReferralProps {
+    player_referral_id:string, 
+    referrer_id:string, 
+    referred_phone?:number, 
+    referral_code:string,
+    referral_quality_quotient?:number, 
+    status:'pending' | 'closed' | 'inactive', 
+    promo_id: string, 
+    company_id?:string,
+    create_datetime?: any, 
+    description?:string, 
+    code_image?:string,
+    last_update_datetime?:any
+    promo?:PromoProps
+}
+
+
+export interface PromoProps {
+    promo_id:string,
+    description:string, 
+    type: 'referral_code' | 'promo_code' | 'promo_sweepstakes' | 'referral_sweepstakes', 
+    amount:number, 
+    amount_type:'FOR_MONEY'|'FREE', 
+    status: 'active' | 'inactive', 
+    expire_type: 'quantity' | 'time', 
+    available_codes: number, 
+    expire_datetime:any, 
+    create_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
+}