be-components 0.1.1

package/src/AuthenticateWizard/api/index.ts

@@ -0,0 +1,164 @@
+import axios from "axios"
+import type { AuthExecutionRequestProps, AuthStrategyIdentifierProps, AuthStrategyProps, PlayerTokenProps, PublicPlayerProps } from "./types";
+
+const AUTH_ENDPOINTS = {
+    DEVELOPMENT: 'http://localhost:5000',
+    STAGING: 'https://stage-be-auth-svc.herokuapp.com',
+    PRODUCTION: 'https://api.players.bettoredge.com'
+}
+
+let AUTH_SVC_API = ''
+
+export {
+    AuthenticateApi,
+    AuthenticateHelpers
+}
+
+const AuthenticateApi = {
+    setEnvironment: (env:'PRODUCTION'|'STAGING'|'DEVELOPMENT') => {
+        AUTH_SVC_API = AUTH_ENDPOINTS[env];
+    },
+    authenticateLocal : async(username:string, password:string, device_id:string):Promise<{ access_token:string, refresh_token:string, expire_datetime:string }> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/authenticate`, { username, password, device_id })
+        return resp.data
+    },
+    refreshToken : async(refresh_token:string, device_id:string):Promise<{ access_token:string, refresh_token:string, expire_datetime:string }> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/players/tokens/token/refresh`, { refresh_token, device_id })
+        return resp.data
+    },
+    authenticatePhone : async(phone:string, device_id:string, referral_code?:string):Promise<void> => {
+        await axios.post(`${AUTH_SVC_API}/v1/players/player/phone/authenticate`, { phone, device_id, referral_code })
+    },
+    verifyPhoneAuthenticate : async(token:string, device_id:string):Promise<{ access_token:string, refresh_token:string, expire_datetime:string }> => {
+        let resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/phone/verify`, { token, device_id })
+        return resp.data
+    }, 
+    getMyDetails : async():Promise<PublicPlayerProps> => {
+        const resp = await axios.get(`${AUTH_SVC_API}/v1/players/player/me`)
+        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
+    },
+    getShortToken : async():Promise<PlayerTokenProps> => {
+        const resp = await axios.get(`${AUTH_SVC_API}/v1/players/tokens/short`)
+        return resp.data.player_token
+    },
+    getAuthStrategyById: async(auth_strategy_id:string):Promise<{ auth_strategy:AuthStrategyProps, auth_strategy_identifiers:AuthStrategyIdentifierProps[] }> => {
+        const resp = await axios.get(`${AUTH_SVC_API}/v1/authenticate/strategy/id/${auth_strategy_id}`)
+        return resp.data
+    },
+    executeAuthStrategy: async(auth_execution_request:AuthExecutionRequestProps):Promise<{ result:'success'|'fail', device_id:string, message:string, auth_strategy_id:string, verification_session_id:string, session_expire_datetime:any, auth_strategy_identifier_id:string }> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/authenticate/strategy/try`, { auth_execution_request })
+        console.log(resp.data)
+        return resp.data
+    },
+    verifyAuthStrategyIdentifier: async(auth_strategy_identifier_id:string, verification_session_id:string, token:string, device_id?:string):Promise<{ result: 'success'|'fail', access_token?:string, refresh_token?:string, expire_datetime?:any }> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/authenticate/strategy/identifier/verify`, { auth_strategy_identifier_id, verification_session_id, token, device_id });
+        console.log(resp.data)
+        return resp.data
+    },
+    getCompanyById: async(company_id:string) => {
+        const resp = await axios.get(`${AUTH_SVC_API}/v1/companies/company/id/${company_id}`)
+        console.log(resp.data)
+        return resp.data
+    }
+}
+
+const AuthenticateHelpers = {
+/**
+ * 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 = AuthenticateHelpers.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
+},
+ isStrategyValid : (auth_execution_request:AuthExecutionRequestProps) => {
+    let request_valid = true;
+    auth_execution_request.attributes.map(a => {
+        if(!request_valid){ return }
+        const { valid } = AuthenticateHelpers.isAttributeValid(a.attribute, a.value)
+        if(!valid){ request_valid = false }
+    })
+    return request_valid
+},
+isAttributeValid : (attribute:string, value:string, optional?:boolean):{ valid:boolean, error?:string } => {
+    if(optional){ return { valid:true } }
+    switch(attribute){
+        case 'phone':
+            return AuthenticateHelpers.isPhoneValid(value)
+        case 'email':
+            return AuthenticateHelpers.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' }
+}
+
+}

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

@@ -0,0 +1,134 @@
+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 PlayerTokenProps {
+    player_token_id:string, 
+    player_id:string|number, 
+    token:string, 
+    token_type:'refresh'|'phone_verify'|'email_verify'|'password_verify'|'short',
+    device_id:string, 
+    status:'active'|'inactive'|'rotated', 
+    create_datetime:any, 
+    last_update_datetime:any, 
+    expire_datetime:any
+}
+
+
+
+
+export interface AuthStrategyProps {
+    auth_strategy_id:string,
+    name: string,
+    description: string,
+    status:string,
+    allow_login?:boolean,
+    create_datetime: any,
+    last_update_datetime:any 
+}
+
+export interface AuthIdentifierProps {
+    auth_identifier_id:string,
+    attribute: string,
+    status:'active'|'inactive',
+    create_datetime: any,
+    last_update_datetime: any
+}
+
+export interface AuthStrategyIdentifierProps {
+    auth_strategy_identifier_id:string,
+    auth_strategy_id: string,
+    auth_identifier?:AuthIdentifierProps,
+    auth_identifier_id: string,
+    verify_required:boolean,
+    verify_label?:string,
+    priority:number,
+    optional?:boolean,
+    secure_text_entry?:boolean,
+    label:string,
+    token_required?:boolean,
+    description:string,
+    status: 'active'|'inactive',
+    create_datetime: any,
+    last_update_datetime:any
+}
+
+export interface AuthExecutionRequestProps {
+    auth_strategy_id:string,
+    device_id?:string,
+    source:string,
+    referral_code?:string,
+    attributes: {
+        attribute: string,
+        value: string,
+        pretty_value?:string
+    }[]
+}
+
+export interface AuthExecutionResponseProps { 
+    auth_strategy_id: string,
+    result: 'authenticated' | 'verify' | 'failed',
+    access_token?:string,
+    refresh_token?:string,
+    expire_datetime?:any
+}
+
+
+export interface CompanyProps {
+    company_id:string,
+    company_name: string,
+    company_code:string,
+    company_description: string,
+    type: string,
+    admin_id:string,
+    player_referrals?:PlayerReferralProps[],
+    short_name:string,
+    status: 'active'|'inactive',
+    company_image?: {
+        url: string,
+        width?:number,
+        height?:number
+    },
+    brand_primary?:string,
+    brand_secondary?:string,
+    advertising_enabled:boolean,
+    competitions_enabled:boolean,
+    catalog_enabled:boolean,
+    api_enabled:boolean,
+    legacy_id?:string,
+    create_datetime:any,
+    last_update_datetime: any
+}
+
+
+export interface CompanyMemberProps {
+    company_member_id:string,
+    company_id:string,
+    player_id:string,
+    status: 'active' | 'inactive',
+    role: 'admin'|'contributor',
+    create_datetime:any,
+    last_update_datetime:any
+}

package/src/AuthenticateWizard/index.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Spring } from '../Components';
+import Colors from '../constants/colors';
+import StrategyForm from './Components/StrategyForm';
+import { AuthenticateApi } from './api';
+
+
+type AuthenticateWizardProps = {
+    auth_strategy_id:string,
+    width:number,
+    company_id?:string,
+    device_id?:string,
+    source:string,
+    opt_in_url?:string,
+    referral_code?:string,
+    environment: 'PRODUCTION'|'STAGING'|'DEVELOPMENT',
+    onAuthenticated: (access_token:string, refresh_token:string, expire_datetime:any) => void
+}
+
+const AuthenticateWizard = ({ environment, auth_strategy_id, company_id, device_id, source, referral_code, width, opt_in_url, onAuthenticated }:AuthenticateWizardProps) => {
+    const [ loaded, setLoaded ] = useState(false);
+
+    useEffect(() => {
+        getWidgetData();
+    },[environment])
+
+    const getWidgetData = async() => {
+        AuthenticateApi.setEnvironment(environment)
+        setLoaded(true);
+    }
+
+    return (
+        <Spring
+            
+            to={0}
+            from={500}
+            slide='vertical'
+            style={{ width }}
+        >
+            <LinearGradient
+                style={{ flex:1, minHeight:500, borderTopRightRadius:30, borderTopLeftRadius:30 }}
+                nativeID='auth_widget'
+                colors={[Colors.shades.shade100, Colors.shades.shade600]}
+            >
+            <StrategyForm
+                visible={loaded?true:false}
+                width={width}
+                auth_strategy_id={auth_strategy_id}
+                company_id={company_id}
+                device_id={device_id}
+                source={source}
+                referral_code={referral_code}
+                opt_in_url={opt_in_url}
+                onAuthenticated={onAuthenticated}
+            />
+            </LinearGradient>
+        </Spring>
+    )
+}
+
+export default AuthenticateWizard
+
+/*
+        {authenticated ?
+                <Spring
+                    style={{ position:'absolute', backgroundColor:Colors.shades.white, borderTopRightRadius:22, borderTopLeftRadius:22, top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}
+                    to={0}
+                    from={500}
+                    slide="vertical"
+                >
+                        <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                            <View style={{ marginTop: 30 }}>
+                                <Image
+                                    source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1704746039/be_logo_2_idjbro.png' }}
+                                    style={{ height:width * 0.5, width:width * 0.5 }}
+                                    resizeMode="cover"
+                                />
+                            </View>
+                        </View>
+                </Spring>
+            :<></>}
+
+*/

package/src/Components/Button.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { ActivityIndicator, Image, TouchableOpacity, View } from "react-native"
+import { Text } from '.';
+import Colors from '../constants/colors';
+
+
+type ButtonProps = {
+    borderRadiusOverride?: { borderTopRightRadius:number, borderBottomRightRadius:number, borderTopLeftRadius:number, borderBottomLeftRadius:number }
+    title?:string, 
+    title_weight?:'bold'|'semibold'|'regular'|'light',
+    avatar_url?:string, 
+    icon_size?:number, 
+    icon_side?:'left'|'right', 
+    icon_name?:'chevron'|'list'|'trophy', 
+    loading?:boolean,
+    icon_direction?:'up'|'down'|'right'|'left'
+    borderRadius?:number, 
+    padding?:number,
+    title_color?:string, 
+    disabled?:boolean,
+    title_size?:number,
+    style?:any,
+    backgroundColor?:string, 
+    borderWidth?:number, 
+    borderColor?:string, 
+    onPress:any 
+}
+
+
+const Button = ({ title, style, title_weight, disabled, loading, title_size, padding, borderRadiusOverride, avatar_url, title_color, borderWidth, borderColor, backgroundColor, borderRadius, onPress }:ButtonProps) => {
+    let input_style = style ?? {}
+    const getBorderRadiusOverride = () => {
+        if(!borderRadiusOverride){ return { borderRadius: borderRadius??4 } }
+        return { ...borderRadiusOverride }
+    }
+
+    return (
+        <TouchableOpacity 
+            disabled={disabled}
+            style={{ ...getBorderRadiusOverride(), flexDirection:'row', alignItems:'center', padding:padding??8, backgroundColor:backgroundColor??Colors.shades.white, borderWidth:borderWidth??0, borderColor:borderColor??'transparent', ...input_style }} onPress={(ev) => onPress(ev)}>
+            {avatar_url ?
+            <Image 
+                source={{ uri: avatar_url }} 
+                style={{ height:28, width:28, borderRadius:100, marginRight:12 }} 
+                resizeMode='cover'
+            />
+            :<></>}
+            
+            {title ?
+            <View style={{ flex:1, marginLeft:5, marginRight:5 }}>
+                {!loading ? 
+                <Text size={title_size??14} weight={title_weight ?? 'bold'} textAlign="center" color={title_color??Colors.brand.midnight}>{title}</Text>
+                :
+                <ActivityIndicator style={{ alignSelf:'center' }} size='small' color={title_color??Colors.brand.midnight} />
+                }
+            </View>
+            :<></>}
+
+        </TouchableOpacity>
+    )
+}
+
+export default Button

package/src/Components/Checkbox.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import Colors from '../constants/colors';
+
+type CheckBoxProps = {
+    checked?:boolean,
+    size?:number
+    color?:string,
+    style?: any,
+    onSelect:(checked:boolean) => void
+}
+
+const Checkbox = ({ checked, size, color, onSelect, style }:CheckBoxProps) => {
+    const box_size = size ?? 20
+    const box_color = color ?? Colors.brand.midnight
+    return (
+        <TouchableOpacity 
+            style={{ height:box_size, width:box_size, borderWidth:1, borderRadius:4, borderColor:box_color, justifyContent:'center', alignItems:'center', ...style }}
+            onPress={() => onSelect(checked ? false : true)}
+            >
+            {checked ?
+            <View style={{ height:box_size*0.75, width:box_size*0.75, backgroundColor:box_color }} />
+            :<></>}
+        </TouchableOpacity>
+    )
+}
+
+export default Checkbox