be-components 3.6.3 → 3.6.5

package/src/Authenticator/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import StrategyForm from './Components/StrategyForm';
 import { AuthenticateApi } from './api';
-import { Image } from 'react-native';
+import { FlatList, Image } from 'react-native';
 import LoginForm from './Components/LoginForm';
 import { Text, View, Button } from '../Components/Themed';
 import type { AuthStrategyIdentifierProps, AuthStrategyProps, AuthenticatedProps } from './api/types';
@@ -26,9 +26,9 @@ type AuthenticateWizardProps = {
     onClose: () => void
 }
 
-const Authenticator = ({ visible, theme, show_referral, auth_strategy_id, default_view, company_id, source, referral_code, maxWidth, opt_in_url, onTryAuthenticate, onAuthenticated, onClose }:AuthenticateWizardProps) => {
+const auth_sections = ['header','strategy','login','actions']
+const Authenticator = ({ show_referral, auth_strategy_id, default_view, company_id, source, referral_code, maxWidth, opt_in_url, onTryAuthenticate, onAuthenticated, onClose }:AuthenticateWizardProps) => {
     const C = useColors();
-    const [ loaded, setLoaded ] = useState(false);
     const [ company, setCompany ] = useState<CompanyProps>();
     const [ distinct_id, setDistinctID ] = useState<string>();
     const [ active_view, setActiveView ] = useState(default_view ?? 'register')
@@ -73,64 +73,82 @@ const Authenticator = ({ visible, theme, show_referral, auth_strategy_id, defaul
             auth_strategy_identifiers,
             loading:false
         })
-        setLoaded(true);
     }
 
     const handleAuthenticated = async(auth_response:AuthenticatedProps) => {
         return onAuthenticated(auth_response)
     }
 
-    if(!loaded || !distinct_id){ return <></> }
-    if(!visible){ return <></> }
-    return (
-        <View style={{ maxWidth }}>
-            {company && theme != 'mini' ?
-            <View style={{ padding:20, flexDirection:'row', alignItems:'center', borderTopRightRadius:22, borderTopLeftRadius:22, borderBottomWidth:1, borderColor:C.borders.light }}>
-                <View style={{ flex:1, marginRight:10 }}>
-                    <Text size={28} weight='bold' color={C.text.h1}>{active_view == 'login' ? 'Log In!': 'Welcome!'}</Text>
-                    <Text theme='h2'>{active_view == 'login' ? 'Continue to login with':'Complete the form below to participate with'} {company?.company_name ?? 'Bettoredge'}</Text>
-                </View>
-                <View>
-                    <Image
-                        source={{ uri: company?.company_image?.url }}
-                        style={{ width: 50, height: 50, borderRadius:8 }}
-                        resizeMode='cover'
+    const renderSections = (data: { item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                if(!company){ return <></> }
+                return (
+                    <View type='header' style={{ padding:20, flexDirection:'row', alignItems:'center', borderTopRightRadius:40, borderTopLeftRadius:40, borderBottomWidth:1, borderColor:C.borders.light }}>
+                        <View transparent style={{ flex:1, marginRight:10 }}>
+                            <Text size={28} weight='bold' color={C.text.h1}>{active_view == 'login' ? 'Log In!': 'Welcome!'}</Text>
+                            <Text theme='h2'>{active_view == 'login' ? 'Continue to login with':'Complete the form below to participate with'} {company?.company_name ?? 'Bettoredge'}</Text>
+                        </View>
+                        <View float style={{ borderRadius:100, padding:10, backgroundColor:C.text.white }}>
+                            <Image
+                                source={{ uri: company?.company_image?.url }}
+                                style={{ width: 50, height: 50, borderRadius:8 }}
+                                resizeMode='cover'
+                            />
+                        </View>         
+                    </View>
+                )
+            case 'strategy':
+                return (
+                    <StrategyForm
+                        visible={active_view == 'register' ? true : false}
+                        maxWidth={maxWidth}
+                        company={company}
+                        strategy={strategy}
+                        onLogin={() => setActiveView('login')}
+                        auth_strategy_id={auth_strategy_id}
+                        company_id={company_id}
+                        show_referral={show_referral}
+                        distinct_id={distinct_id ?? ''}
+                        source={source}
+                        referral_code={referral_code ?? 'tipoff'}
+                        opt_in_url={opt_in_url}
+                        onAuthenticated={handleAuthenticated}
+                    />
+                )
+            case 'login':
+                return (
+                    <LoginForm
+                        maxWidth={maxWidth}
+                        visible={ active_view == 'login' ? true : false }
+                        onAuthenticated={handleAuthenticated}
+                        onTryAuthenticate={(attribute, result) => onTryAuthenticate ? onTryAuthenticate(attribute, result) : console.log()}
+                        onRegister={() => setActiveView('register')}
                     />
-                </View>         
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View transparent>
+            <View transparent>
+                <FlatList
+                    key='auth_section_list'
+                    keyExtractor={(item) => item}
+                    data={auth_sections}
+                    renderItem={renderSections}
+                />
             </View>
-            :<></>}
-            <StrategyForm
-                visible={active_view == 'register' ? true : false}
-                maxWidth={maxWidth}
-                company={company}
-                strategy={strategy}
-                onLogin={() => setActiveView('login')}
-                auth_strategy_id={auth_strategy_id}
-                company_id={company_id}
-                show_referral={show_referral}
-                distinct_id={distinct_id}
-                source={source}
-                referral_code={referral_code ?? 'tipoff'}
-                opt_in_url={opt_in_url}
-                onAuthenticated={handleAuthenticated}
-            />
-            <LoginForm
-                maxWidth={maxWidth}
-                visible={ active_view == 'login' ? true : false }
-                onAuthenticated={handleAuthenticated}
-                onTryAuthenticate={(attribute, result) => onTryAuthenticate ? onTryAuthenticate(attribute, result) : console.log()}
-                onRegister={() => setActiveView('register')}
-            />
-            {theme != 'mini' ?
-            <View style={{ padding:10 }}>
+            <View type='footer' style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
                 <Button
                     title='CLOSE'
                     title_color={C.text.error}
+                    style={{ flex:1 }}
                     type='close'
                     onPress={() => onClose()}
                 />
             </View>
-            :<></>}
         </View>
     )
 }

package/src/Components/Themed.tsx

@@ -95,11 +95,12 @@ export const View = forwardRef(({ ...props }:ViewProps, ref:any) => {
   const color = getColor();
   let border_color = type == 'input' ? C.borders.input : undefined
   let border_width = type == 'input' ? 1 : undefined
-  let floated = float ? color_mode == 'dark' ? MyViewStyles.floatDark : MyViewStyles.floatLight : {}
+  const borderRadius = type=='input' ? 8 : undefined
+  let floated = (float || type=='input') ? color_mode == 'dark' ? MyViewStyles.floatDark : MyViewStyles.floatLight : {}
   let flexDirection:'row'|'column' = type == 'row' ? 'row' : 'column'
   let alignItems:'center'|undefined = type == 'row' ? 'center' : undefined
 
-  return <DefaultView ref={ref} style={[{ backgroundColor:color, borderColor: border_color, borderWidth: border_width, ...floated }, { flexDirection, alignItems }, style]} {...otherProps} />;
+  return <DefaultView ref={ref} style={[{ backgroundColor:color, borderRadius, borderColor: border_color, borderWidth: border_width, ...floated }, { flexDirection, alignItems }, style]} {...otherProps} />;
 })
 
 
@@ -221,6 +222,7 @@ export const TextInput = (props:TextInputProps) => {
   const C = useColors();
   const { type, style, transparent, ...otherProps } = props;
   
+  const borderRadius = 8
   const background = transparent ? undefined : C.views.input
   const border = transparent ? undefined : C.borders.input
   const color = C.text.input
@@ -228,6 +230,6 @@ export const TextInput = (props:TextInputProps) => {
   const placeholder_color = C.text.placholder
 
   return (
-    <DefaultTextInput placeholderTextColor={placeholder_color} style={[{ padding:15, backgroundColor: background, borderColor: border, borderWidth, color }, style]} { ...otherProps }/>
+    <DefaultTextInput placeholderTextColor={placeholder_color} style={[{ padding:15, borderRadius, backgroundColor: background, borderColor: border, borderWidth, color }, style]} { ...otherProps }/>
   )
 }

package/src/constants/useColors.tsx

@@ -129,7 +129,7 @@ export const useColors = () => {
             background: 'rgba(17, 17, 17, 0.9)', // #111111
             header: Colors.shades.blackFadedHeavy, // **(NEW)** #222831
             body: Colors.shades.shade500,
-            input: Colors.shades.black_faded,
+            input: 'rgba(255, 255, 255, 0.05)',
             footer: Colors.shades.blackFadedHeavy, // **(NEW)** #222831,
             gold: Colors.incentive.goldDark,
             blur: 'rgba(17, 17, 17, 0.7)',
@@ -141,7 +141,7 @@ export const useColors = () => {
         borders: {
             light: Colors.shades.shade500, // Slightly lighter gray for subtle contrast in dark mode
             dark: Colors.accents.accent200, // Deeper accent color for strong contrast
-            input: Colors.shades.shade500
+            input: 'rgba(255, 255, 255, 0.1)'
         },
         text: {
             white:Colors.shades.white,