be-components 7.2.1 → 7.2.3

package/src/PartnerPortal/components/EmbedManager.tsx

@@ -22,7 +22,7 @@ type EmbedManagerProps = {
     company_id:string,
     onClose: () => void
 }
-const sections = ['header','embed','toggle','loading','name','properties','identifer','code']
+const sections = ['header','embed','action','toggle','loading','name','properties','identifer','code']
 const EmbedManager = ({ float, me, company_id, company_embed_id, onFocusPosition, onClose, header_style, footer_style }:EmbedManagerProps) => {
     const Colors = useColors();
     const [ size, setSize ] = useState({ height:0, width:0 });
@@ -45,6 +45,22 @@ const EmbedManager = ({ float, me, company_id, company_embed_id, onFocusPosition
     });
     const { loading, promos, player_referrals, embed, company_embed, embed_properties, draft_company_embed } = embed_data;
 
+    
+
+    const isValid = () => {
+        if(!company_embed){ return }
+        if(!company_embed.name){ return }
+        let valid = true
+        let props = company_embed.properties
+        embed_properties.map(p => {
+            if(!p.required){ return }
+            let exists = props[p.property]
+            if(!exists){ valid = false }
+        });
+        return valid
+    }
+    const is_valid = isValid();
+
     useEffect(() => {
         PartnerPortalApi.setEnvironment();
         getEmbedData(company_embed_id);
@@ -81,6 +97,48 @@ const EmbedManager = ({ float, me, company_id, company_embed_id, onFocusPosition
         setActionLoading(false);
     }
 
+    const activate = async() => {
+        if(!company_embed){ return }
+        if(!is_valid){ return alert('Please complete all properties before activating') }
+        setActionLoading(true);
+        const new_embed = await PartnerPortalApi.CompanyEmbedApi.activateCompanyEmbed(company_embed.company_embed_id);
+        if(!new_embed){ setActionLoading(false); return alert('Unable to activate at this time.  Please try again later') }
+        setEmbedData({
+            ...embed_data,
+            company_embed: new_embed,
+            draft_company_embed: new_embed
+        })
+        setActionLoading(false);
+    }
+
+    const archive = async() => {
+        if(!company_embed){ return }
+        setActionLoading(true);
+        const new_embed = await PartnerPortalApi.CompanyEmbedApi.archiveCompanyEmbed(company_embed.company_embed_id);
+        if(!new_embed){ setActionLoading(false); return alert('Unable to archive at this time.  Please try again later') }
+        setEmbedData({
+            ...embed_data,
+            company_embed: new_embed,
+            draft_company_embed: new_embed
+        })
+        setActionLoading(false);
+    }
+
+
+    const deactivate = async() => {
+        if(!company_embed){ return }
+        setActionLoading(true);
+        const new_embed = await PartnerPortalApi.CompanyEmbedApi.deActivateCompanyEmbed(company_embed.company_embed_id);
+        if(!new_embed){ setActionLoading(false); return alert('Unable to deactivate at this time.  Please try again later') }
+        setEmbedData({
+            ...embed_data,
+            company_embed: new_embed,
+            draft_company_embed: new_embed
+        })
+        setActionLoading(false);
+    }
+
+
     const renderProperties = (data:{ item:EmbedPropertyProps, index:number }) => {
         if(!company_embed || !draft_company_embed){ return <></> }
         const value:string | undefined = draft_company_embed.properties[data.item.property]
@@ -232,6 +290,66 @@ const EmbedManager = ({ float, me, company_id, company_embed_id, onFocusPosition
                         </View>
                     </ImageBackground>
                 )
+            case 'action':
+                if(!draft_company_embed){ return <></> }
+                switch(draft_company_embed.status){
+                    case 'pending':
+                        return (
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1, marginRight:5 }}>
+                                <Text theme='h1'>Pending</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Once ready - press activate for the embed to become usable</Text>
+                              </View>
+                              <Button
+                                title='ACTIVATE'
+                                type='success'
+                                loading={action_loading}
+                                style={{ padding:10, opacity: is_valid ? 1 : 0.5 }}
+                                onPress={() => activate()}
+                              />
+                            </View>
+                        )
+                    case 'inactive':
+                        return (
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1, marginRight:5 }}>
+                                <Text theme='h1'>Inactive</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Press activate to reactive it or archive it</Text>
+                              </View>
+                              <Button
+                                title='ACTIVATE'
+                                type='success'
+                                loading={action_loading}
+                                style={{ padding:10, marginRight:5 }}
+                                onPress={() => activate()}
+                              />
+                              <Button
+                                title='ARCHIVE'
+                                type='error'
+                                loading={action_loading}
+                                style={{ padding:10 }}
+                                onPress={() => archive()}
+                              />
+                            </View>
+                        )
+                    case 'active':
+                         return (
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1, marginRight:5 }}>
+                                <Text theme='h1'>Deactive</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Your embed is active! Press deactivate to stop it</Text>
+                              </View>
+                              <Button
+                                title='DEACTIVATE'
+                                type='error'
+                                loading={action_loading}
+                                style={{ padding:10 }}
+                                onPress={() => deactivate()}
+                              />
+                            </View>
+                        )
+                    default: return <></>
+                }
             case 'toggle':
                 return (
                     <View style={{ padding:10, paddingBottom:0 }}>
@@ -339,6 +457,13 @@ const EmbedManager = ({ float, me, company_id, company_embed_id, onFocusPosition
                 keyExtractor={item => item}
                 renderItem={renderSections}
             />
+            {company_embed?.status == 'archived' ? 
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                <View float style={{ height:200, width:200, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1' textAlign='center'>EMBED HAS BEEN ARCHIVED</Text>
+                </View>
+            </View>
+            :<></>}
             {draft_company_embed ? 
             <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, ...footer_style }}>
                 <Button
@@ -347,6 +472,7 @@ const EmbedManager = ({ float, me, company_id, company_embed_id, onFocusPosition
                     style={{ flex:1 }}
                     onPress={() => onClose()}
                 />
+                {is_changed}
                 <Button
                     title='SAVE'
                     type='success'

package/src/PartnerPortal/components/PromoSelector.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import type { PromoProps } from "../../types";
+import { useColors } from "../../constants/useColors";
+import { Button, Text, View } from "../../Components/Themed";
+import { FlatList } from "react-native";
+import { Icons } from "../../Components";
+import { PartnerPortalHelpers } from "../api";
+
+type PromoSelectorProps = {
+    promos:PromoProps[],
+    active_promo?:PromoProps,
+    max_value:number,
+    limited_type?:string,
+    onSelectPromo:(promo:PromoProps) => void
+}
+const PromoSelector = ({ active_promo, limited_type, max_value, promos, onSelectPromo}:PromoSelectorProps) => {
+    const Colors = useColors();
+    const [ visible, setVisible ] = useState(false);
+    let available_promos = promos.filter(p => p.amount <= max_value);
+    if(limited_type){ available_promos = available_promos.filter(p => p.type == limited_type) }
+    const renderPromos = (data:{ item:PromoProps, index:number }) => {
+        return (
+            <Button 
+                transparent 
+                style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }}
+                onPress={() => { setVisible(false); onSelectPromo(data.item) }}
+            >
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>{PartnerPortalHelpers.prettyKey(data.item.type)}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.description}</Text>
+                </View>
+            </Button>
+        )
+    }
+
+    return (
+        <View style={{ padding:15 }} float>
+            <Button transparent style={{ padding:0, flexDirection:'row', alignItems:'center' }} onPress={() => setVisible(!visible) }>
+                <View transparent style={{ flex:1, marginRight:10 }}>
+                    <Text theme='h1'>{active_promo? PartnerPortalHelpers.prettyKey(active_promo.type) : 'Select Referral'}</Text>
+                    {active_promo ?
+                    <Text theme="description" style={{ marginTop:3 }}>{active_promo.description}</Text>
+                    :<></>}
+                </View>
+                <Icons.ChevronIcon direction={visible?'up':'down'} color={Colors.text.h1} size={8} />
+            </Button>
+            {visible ?
+            <View transparent style={{ marginTop:20 }}>
+            <FlatList
+                data={available_promos.sort((a,b) => a.amount - b.amount)}
+                key={'promo_selector'}
+                keyExtractor={item => item.promo_id.toString()}
+                renderItem={renderPromos}
+            />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default PromoSelector

package/src/PartnerPortal/components/ReferralCodeManager.tsx

@@ -0,0 +1,303 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from "../../Components/Themed";
+import type { FocusPositionProps, PlayerReferralProps, PromoProps } from '../../types';
+import { PartnerPortalApi, PartnerPortalHelpers } from '../api';
+import { FlatList, ImageBackground, type ViewStyle } from 'react-native';
+import PromoSelector from './PromoSelector';
+import { useColors } from '../../constants/useColors';
+import { showConfirmAlert } from '../../Components/ConfirmAlert';
+
+type ReferralCodeManagerProps = {
+    player_referral_id?:string,
+    company_id?:string,
+    onFocusPosition?:(pos:FocusPositionProps) => void,
+    float?:boolean,
+    onClose: () => void,
+    header_style?:ViewStyle,
+    footer_style?:ViewStyle
+}
+const sections = ['header','info','code','promo','inactivate','activate','delete']
+const ReferralCodeManager = ({ float, player_referral_id, company_id, header_style, footer_style, onFocusPosition, onClose }:ReferralCodeManagerProps) => {
+    const Colors = useColors();
+    const [ action_loading, setActionLoading ] = useState(false);
+    const [ size, setSize ] = useState({ height:0, width:0 });
+    const [ state, setState ] = useState<{
+        checked:boolean,
+        available:boolean,
+        promos:PromoProps[],
+        player_referral?:PlayerReferralProps,
+        draft_referral?:PlayerReferralProps
+    }>({
+        draft_referral: undefined,
+        player_referral:undefined,
+        promos:[],
+        checked:false,
+        available:false
+    });
+    const { draft_referral, promos, player_referral, checked, available } = state;
+    const active_promo = promos.find(p => p.promo_id == draft_referral?.promo_id);
+    useEffect(() => {
+        PartnerPortalApi.setEnvironment();
+        getData(player_referral_id);
+    },[player_referral_id]);
+
+    const getData = async(id?:string) => {
+        const s_promos = await PartnerPortalApi.CompanyApi.getPromos();
+        let s_refer:PlayerReferralProps | undefined
+        if(id){
+            s_refer = await PartnerPortalApi.CompanyApi.getReferralById(id);
+            if(!s_refer){ return alert('Unable to get referral.  Please try again') }
+        } else {
+            s_refer = PartnerPortalHelpers.CompanyHelpers.generateNewReferral()
+        }
+        setState({
+            checked:id ? true : false,
+            available: id ? true : false,
+            promos:s_promos,
+            draft_referral: s_refer,
+            player_referral: id ? s_refer : undefined
+        })
+    }
+
+    const isValid = () => {
+        let errors:string[] = []
+        if(!draft_referral){ return ['Please complete this form'] }
+        if(!draft_referral.referral_code){ errors.push('Please enter a valid code') }
+        if(!checked){ errors.push('Please check if the referral code is available') }
+        if(!available){ errors.push('This code is not available to use') }
+        if(!active_promo){ errors.push('Add a promo code') }
+        return errors
+    }
+    const errors = isValid();
+
+    const checkAvailability = async(code:string) => {
+        if(action_loading){ return }
+        if(!code){ return alert('Please enter a code') }
+        setActionLoading(true);
+        const resp = await PartnerPortalApi.CompanyApi.getReferralByCode(code.toLowerCase());
+        setState({ ...state, checked: true, available: resp.player_referral ? false : true });
+        setActionLoading(false)
+    }
+
+    const deactivate = async() => {
+        if(!player_referral){ return }
+        if(action_loading){ return }
+        setActionLoading(true);
+        const new_code = await PartnerPortalApi.CompanyApi.deactivateCode(player_referral.player_referral_id);
+        if(!new_code){ return alert('Unable to process. Please try again later') }
+        setState({ ...state, player_referral: new_code, draft_referral:new_code })
+        setActionLoading(false);
+    }
+
+    const activate = async() => {
+        if(!player_referral){ return }
+        if(action_loading){ return }
+        setActionLoading(true);
+        const new_code = await PartnerPortalApi.CompanyApi.activateCode(player_referral.player_referral_id);
+        if(!new_code){ return alert('Unable to process. Please try again later') }
+        setState({ ...state, player_referral: new_code, draft_referral:new_code })
+        setActionLoading(false);
+    }
+
+    const deleteCode = async() => {
+        if(!player_referral){ return }
+        if(action_loading){ return }
+        setActionLoading(true);
+        const new_code = await PartnerPortalApi.CompanyApi.deleteCode(player_referral.player_referral_id);
+        if(!new_code){ return alert('Unable to process. Please try again later') }
+        setState({ ...state, player_referral: new_code, draft_referral:new_code })
+        setActionLoading(false);
+    }
+
+    const handleUpdate = async(dr:PlayerReferralProps) => {
+        if(action_loading){ return }
+        setActionLoading(true);
+        const new_referral = await PartnerPortalApi.CompanyApi.updateCodeOnReferral(dr);
+        if(!new_referral){ return alert('Unable to process at this time') }
+        setState({
+            ...state,
+            draft_referral: new_referral,
+            player_referral: new_referral
+        });
+        setActionLoading(false);
+    }
+
+    const handleCreate = async() => {
+        if(action_loading){ return }
+        if(!draft_referral){ return }
+        if(errors.length > 0){ return alert(errors.map(e => e)) }
+        setActionLoading(true);
+        const new_code = await PartnerPortalApi.CompanyApi.createCode({ ...draft_referral, company_id});
+        if(!new_code){ return alert('Unable to process. Please try again later') }
+        setState({ ...state, player_referral: new_code, draft_referral:new_code })
+        setActionLoading(false);
+    }
+
+    const renderSections = (data: { item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, ...header_style }}>
+                      <View transparent style={{ flex:1 }}>
+                        <Text theme='h1'>Manage Referral Code</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>Update or create your referral code below</Text>
+                      </View>
+                    </View>
+                )
+            case 'info':
+                return (
+                    <ImageBackground
+                        source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/w_1000,ar_16:9,c_fill,g_auto,e_sharpen/v1758727070/ChatGPT_Image_Sep_24_2025_10_17_44_AM_w39gdn.png' }}
+                        style={{ width: size.width, height:225, justifyContent:'flex-end', overflow:'hidden', ...header_style}}>
+                        <View type='dark_blur' style={{ padding:20 }}>
+                            <Text theme='h1' size={36}>Referral Code</Text>
+                            <Text theme='description' size={16} style={{ marginTop:3 }}>Track the users that sign up for BettorEdge with referral codes</Text>
+                        </View>
+                    </ImageBackground>
+                )
+            case 'code':
+                if(!draft_referral){ return <></> }
+                return (
+                    <View transparent style={{ padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                        <View transparent style={{ marginBottom:10 }}>
+                            <Text theme='h1'>Referral Code</Text>
+                            <Text theme='description' style={{ marginTop:4 }}>Enter the referral code and check its availability</Text>
+                        </View>
+                        <View transparent type='row'>
+                            <TextInput
+                                value={draft_referral.referral_code}
+                                onFocusPosition={onFocusPosition}
+                                editable={player_referral ? false : true}
+                                style={{ flex:1, marginLeft:5, textAlign:'center', borderColor:available?Colors.text.success:checked?Colors.text.error:Colors.text.warning }}
+                                onChangeText={(text) => setState({ ...state, checked:false, available: false, draft_referral: { ...draft_referral, referral_code: text } })}
+                            />
+                            {!player_referral ?
+                            <Button
+                                title='CHECK'
+                                type='success'
+                                loading={action_loading}
+                                disabled={checked || !draft_referral.referral_code}
+                                style={{ marginLeft:5, opacity: checked || !draft_referral.referral_code ? 0.5 : 1 }}
+                                onPress={() => checkAvailability(draft_referral.referral_code)}
+                            />
+                            :<></>}
+                        </View>
+                        {player_referral ?
+                        <Text theme='error' style={{ marginTop:4 }}>To change the referral code.  Please inactivate this one and create a new one</Text>
+                        :checked && available?
+                        <Text theme='success' style={{ marginTop:4 }}>Great! This code is available</Text>
+                        :checked && !available ?
+                        <Text theme='error' style={{ marginTop:4 }}>Sorry! This code is already taken</Text>
+                        :<></>}
+                    </View>
+                )
+            case 'promo':
+                if(!draft_referral){ return <></> }
+                return (
+                    <View transparent style={{ padding:20 }}>
+                        <View transparent style={{ marginBottom:10 }}>
+                            <Text theme='h1'>Promotion Type</Text>
+                            <Text theme='description' style={{ marginTop:4 }}>Select the type of promotion for this code</Text>
+                        </View>
+                        <PromoSelector 
+                            promos={promos}
+                            limited_type='promo_code'
+                            max_value={20}
+                            active_promo={active_promo}
+                            onSelectPromo={(promo) => setState({ ...state, draft_referral: { ...draft_referral, promo_id: promo.promo_id } })}
+                        />
+                    </View>
+                )
+            case 'inactivate':
+                if(!player_referral){ return <></> }
+                if(player_referral.status != 'pending'){ return <></> }
+                
+                return (
+                    <View transparent style={{ padding:20 }}>
+                        <Button
+                            title='DEACTIVATE CODE'
+                            loading={action_loading}
+                            type='error'
+                            onPress={() => deactivate()}
+                        />
+                    </View>
+                )
+            case 'activate':
+                if(!player_referral){ return <></> }
+                if(player_referral.status != 'inactive'){ return <></> }
+                return (
+                    <View transparent style={{ flexDirection:'row', padding:20 }}>
+                        <Button
+                            title='ARCHVE'
+                            loading={action_loading}
+                            type='error'
+                            style={{ flex:1, marginRight:5 }}
+                            onPress={() => {
+                                showConfirmAlert('Are You Sure?', 'Once archived the code can no longer be activated or used',
+                                    () => deleteCode(),
+                                    () => console.log('')
+                                )
+                            }}
+                        />
+                        <Button
+                            title='ACTIVATE CODE'
+                            loading={action_loading}
+                            type='success'
+                            style={{ flex:3 }}
+                            onPress={() => activate()}
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+    const is_changed = JSON.stringify(player_referral) != JSON.stringify(draft_referral) ? true : false
+    return (
+        <View float={float} style={{ flex:1 }} onLayout={(ev) => {
+            const { width, height } = ev.nativeEvent.layout
+            setSize({ width, height })
+        }}>
+            <FlatList
+                data={sections}
+                key='code_sections'
+                keyExtractor={item => item}
+                renderItem={renderSections}
+            />
+            {player_referral?.status == 'closed' ?
+             <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                <View float style={{ height:200, width:200, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1' textAlign='center'>CODE HAS BEEN ARCHIVED</Text>
+                </View>
+            </View>
+            :<></>}
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, ...footer_style }}>
+              <Button
+                title='CLOSE'
+                type='close'
+                style={{ flex:1 }}
+                onPress={() => onClose()}
+              />
+              {player_referral && draft_referral ?
+              <Button
+                title='SAVE CODE'
+                style={{ flex:3, marginLeft:5, opacity: is_changed && !action_loading ? 1 : 0.5 }}
+                loading={action_loading}
+                type='success'
+                disabled={!is_changed || action_loading}
+                onPress={() => handleUpdate(draft_referral)}
+              />
+              :
+                <Button
+                title='CREATE CODE'
+                style={{ flex:3, marginLeft:5, opacity: errors.length == 0 && !action_loading ? 1 : 0.5 }}
+                loading={action_loading}
+                type='success'
+                disabled={action_loading}
+                onPress={() => handleCreate()}
+              />
+              }
+            </View>
+        </View>
+    )
+}
+export default ReferralCodeManager