be-components 0.3.3 → 0.3.5

package/src/ProfileManager/Components/VouchCard.tsx

@@ -2,28 +2,51 @@ import React, { useEffect, useState } from 'react';
 import { View, Platform, TouchableOpacity, Image, ScrollView } 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 type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps } from '../api/types';
+import { ProfileApi, ProfileHelpers } from '../api';
 import moment from 'moment-mini';
+import type { PublicPlayerProps } from '../../types';
+import { view_styles } from '../../constants/styles';
 
 type VouchCardProps = {
     player:MyPlayerProps,
+    walkthrough?:boolean,
+    code_details: {
+        code_request?:CodeRequestProps,
+        referrer?:PublicPlayerProps,
+        promo?:PromoProps,
+        player_referral?:PlayerReferralProps
+    }
     onPlayerUpdate:(player:MyPlayerProps) => void,
+    onClaimGift:() => void,
     onClose:() => void
 }
 
-const VouchCard = ({ player, onPlayerUpdate, onClose }:VouchCardProps) => {
+const VouchCard = ({ player, walkthrough, code_details, onPlayerUpdate, onClaimGift, onClose }:VouchCardProps) => {
     const [ vouching, setVouching ] = useState(false);
+    const [ job_complete, setJobComplete ] = 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);
     
+    const { code_request, promo } = code_details;
+
+    useEffect(() => {
+        getPlayerFromServer()
+    },[])
+
+    const getPlayerFromServer = async() => {
+        const me = await ProfileApi.getMyDetails();
+        onPlayerUpdate(me)
+    }
 
     useEffect(() => {
         initializeVouch()
         if(!vouched){ return }
         vouched.mount('#vouched-element')
+        const tokens = ProfileApi.getVouchKeys()
+        console.log(tokens)
     },[vouched])
 
     const initializeVouch = () => {
@@ -101,26 +124,16 @@ const VouchCard = ({ player, onPlayerUpdate, onClose }:VouchCardProps) => {
                 //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}`);
+              onDone: ()=> {
+
                 console.log('vouch complete!')
                 setVouched(undefined)
                 setTimeout(() => {
                     setVouching(false)
+                    setJobComplete(true);
                     checkPlayerStatus()
-                }, 5000);
+                }, 8000);
                 // Redirect to the next page based on the job success
-                if( job.result.success){
-                  //window.location.replace("https");
-                } else {
-                }
               },
               // theme
               theme: {
@@ -160,11 +173,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 +194,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)}>
@@ -210,27 +223,64 @@ const VouchCard = ({ player, onPlayerUpdate, onClose }:VouchCardProps) => {
                 </View>
                 :<></>}
             </View>
+            {code_request && !['fulfilled','closed'].includes(code_request.status) && promo ?
+            <TouchableOpacity 
+                disabled={player.vouched_status!='verified' ? true : false}
+                style={{ margin:15, marginTop:-50, backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}
+                onPress={() => onClaimGift()}
+                >
+                <View style={{ flexDirection:'row' }}>
+                    <View style={{ padding:10, justifyContent:'center', alignItems:'center' }}>
+                        <Icons.GiftIcon size={40} color={Colors.incentive.gold} />
+                        {player.vouched_status == 'verified' ? 
+                        <Text style={{ marginTop:5 }} textAlign='center' size={12} color={Colors.incentive.gold}>CLAIM NOW</Text>
+                        :<></>}
+                    </View>
+                    <View style={{flex:1, backgroundColor:Colors.incentive.gold_faded, padding:10 }}>
+                        <Text style={{ paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }} size={16} color={Colors.brand.midnight} weight='bold'>{player.vouched_status == 'verified'?`Congrats! Press Here to claim your gift!`: 'Almost there! Last step to get your gift!'}</Text>
+                        <Text style={{ paddingTop:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>{ProfileHelpers.getReferralDescription(promo)}</Text>
+                    </View>
+                </View>
+                {player.vouched_status == 'verified' ?
+                <View style={{ position:'absolute', top: -60, right:0, left:0, justifyContent:'center', alignItems:'center' }}>
+                    <View style={{ borderRadius:22, padding:10, marginBottom:7, backgroundColor:Colors.shades.white }}>
+                        <Text size={14} color={Colors.incentive.gold} weight='bold'>CLAIM ME NOW!</Text>
+                    </View>
+                    <Icons.ChevronIcon direction='down' size={8} color={Colors.incentive.gold} />
+                </View>
+                :<></>}
+            </TouchableOpacity>
+            :<></>}
             {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 }}>   
+                {walkthrough ?
+                <Button
+                    title='EXIT SETUP'
+                    title_color={Colors.utility.error}
+                    backgroundColor='transparent'
+                    onPress={() => onClose()}
+                />
+                :
                 <Button
-                    padding={15}
                     style={{ flex:1, marginRight:5 }}
+                    title='BACK'
+                    padding={15}
+                    title_color={Colors.brand.electric}
                     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={!job_complete ? 'SCAN MY ID' : 'REVIEWING ACCOUNT'}
                     title_color={Colors.shades.white}
                     loading={vouching}
-                    disabled={!scan_ready}
+                    disabled={!scan_ready || job_complete}
                     style={{ flex:3, opacity:scan_ready && scan_ready&&!vouching?1:0.5 }}
                     padding={15}
                     backgroundColor={Colors.utility.success}

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: {