@octopus-community/react-native 1.0.0 → 1.0.3

package/android/src/main/java/com/octopuscommunity/octopusreactnativesdk/OctopusUIActivity.kt

@@ -4,68 +4,264 @@ import android.content.BroadcastReceiver
 import android.content.Context
 import android.content.Intent
 import android.content.IntentFilter
+import android.content.res.Configuration
+import android.graphics.BitmapFactory
 import android.os.Build
 import android.os.Bundle
+import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.graphics.painter.BitmapPainter
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.platform.LocalContext
 import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
-import com.octopuscommunity.sdk.ui.OctopusDestination
+import com.octopuscommunity.sdk.ui.OctopusDrawablesDefaults
+import com.octopuscommunity.sdk.ui.OctopusTheme
+import com.octopuscommunity.sdk.ui.OctopusTypographyDefaults
+import com.octopuscommunity.sdk.ui.OctopusTypography
+import com.octopuscommunity.sdk.ui.components.OctopusNavigationHandler
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+import com.octopuscommunity.sdk.ui.home.OctopusHomeScreen
 import com.octopuscommunity.sdk.ui.octopusComposables
+import com.octopuscommunity.sdk.ui.octopusDarkColorScheme
+import com.octopuscommunity.sdk.ui.octopusLightColorScheme
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+import java.net.URL
 
 class OctopusUIActivity : ComponentActivity() {
-  private val closeUIReceiver = object : BroadcastReceiver() {
-    override fun onReceive(context: Context?, intent: Intent?) {
-      finish()
+    private val closeUIReceiver = object : BroadcastReceiver() {
+        override fun onReceive(context: Context?, intent: Intent?) {
+            finish()
+        }
     }
-  }
 
-  override fun onCreate(savedInstanceState: Bundle?) {
-    super.onCreate(savedInstanceState)
-    registerCloseUIReceiver()
-    setContent {
-      OctopusUI()
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        registerCloseUIReceiver()
+        setContent {
+            OctopusUI(onBack = { finish() })
+        }
     }
-  }
 
-  override fun onDestroy() {
-    super.onDestroy()
-    unregisterReceiver(closeUIReceiver)
-  }
+    override fun onDestroy() {
+        super.onDestroy()
+        unregisterReceiver(closeUIReceiver)
+    }
 
-  private fun registerCloseUIReceiver() {
-    val intentFilter = IntentFilter(OctopusUIController.CLOSE_UI_ACTION)
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
-      registerReceiver(closeUIReceiver, intentFilter, Context.RECEIVER_NOT_EXPORTED)
-    } else {
-      @Suppress("UnspecifiedRegisterReceiverFlag")
-      registerReceiver(closeUIReceiver, intentFilter)
+    private fun registerCloseUIReceiver() {
+        val intentFilter = IntentFilter(OctopusUIController.CLOSE_UI_ACTION)
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+            registerReceiver(closeUIReceiver, intentFilter, Context.RECEIVER_NOT_EXPORTED)
+        } else {
+            @Suppress("UnspecifiedRegisterReceiverFlag")
+            registerReceiver(closeUIReceiver, intentFilter)
+        }
     }
-  }
 }
 
 @Composable
-private fun OctopusUI() {
-  Box(modifier = Modifier.fillMaxSize()) {
-    val navController = rememberNavController()
+private fun OctopusUI(onBack: () -> Unit) {
+    val context = LocalContext.current
+    
+    // Get theme config once when UI is created - no need for polling
+    val themeConfig = OctopusThemeManager.getThemeConfig()
+
+    // Function to detect if system is in dark mode
+    fun isSystemInDarkTheme(): Boolean {
+        return (context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES
+    }
+
+    // Determine base color scheme based on theme config or system theme
+    val baseColorScheme = if (themeConfig?.colorScheme == "dark") {
+        octopusDarkColorScheme()
+    } else if (themeConfig?.colorScheme == "light") {
+        octopusLightColorScheme()
+    } else if (isSystemInDarkTheme()) {
+        octopusDarkColorScheme()
+    } else {
+        octopusLightColorScheme()
+    }
+
+    // Apply custom colors if theme config is provided
+    val finalColorScheme = if (themeConfig != null) {
+        baseColorScheme.copy(
+            primary = themeConfig.primaryColor?.let {
+                Color(android.graphics.Color.parseColor(it))
+            } ?: baseColorScheme.primary,
+            primaryLow = themeConfig.primaryLowContrastColor?.let {
+                Color(android.graphics.Color.parseColor(it))
+            } ?: baseColorScheme.primaryLow,
+            primaryHigh = themeConfig.primaryHighContrastColor?.let {
+                Color(android.graphics.Color.parseColor(it))
+            } ?: baseColorScheme.primaryHigh,
+            onPrimary = themeConfig.onPrimaryColor?.let {
+                Color(android.graphics.Color.parseColor(it))
+            } ?: baseColorScheme.onPrimary
+        )
+    } else {
+        baseColorScheme
+    }
+
+    // Handle logo loading using built-in Android capabilities
+    var logoPainter by remember { mutableStateOf<Painter?>(null) }
+
+    LaunchedEffect(themeConfig) {
+        themeConfig?.logoSource?.let { logoSource ->
+            val uri = logoSource.getString("uri")
+            if (uri != null) {
+                logoPainter = loadImageFromUri(uri)
+            } else {
+                logoPainter = null
+            }
+        } ?: run {
+            // No theme config or no logo source
+            logoPainter = null
+        }
+    }
+
+    // Create drawables based on theme config
+    val drawables = if (logoPainter != null) {
+        OctopusDrawablesDefaults.drawables(logo = logoPainter)
+    } else {
+        OctopusDrawablesDefaults.drawables()
+    }
 
-    NavHost(
-      navController = navController,
-      startDestination = OctopusDestination.Home
+    // Create typography based on theme config
+    val typography = createCustomTypography(themeConfig)
+
+    // Apply theme with custom colors, logo, and typography
+    OctopusTheme(
+        colorScheme = finalColorScheme,
+        drawables = drawables,
+        typography = typography
     ) {
-      octopusComposables(
-        navController = navController,
-        onNavigateToLogin = {
-          OctopusEventEmitter.instance?.emitLoginRequired()
-        },
-        onNavigateToProfileEdit = { fieldToEdit ->
-          OctopusEventEmitter.instance?.emitEditUser(fieldToEdit)
+        OctopusUIContent(onBack = onBack)
+    }
+}
+
+private fun createCustomTypography(themeConfig: OctopusThemeConfig?): OctopusTypography {
+    val defaultTypography = OctopusTypographyDefaults.typography()
+    
+    if (themeConfig?.fonts == null) {
+        return defaultTypography
+    }
+    
+    val fontsConfig = themeConfig.fonts!!
+    val textStyles = fontsConfig.textStyles
+    
+    // Create custom typography based on new unified font configuration
+    if (textStyles != null && textStyles.isNotEmpty()) {
+        return OctopusTypographyDefaults.typography(
+            title1 = createTextStyle(textStyles["title1"], defaultTypography.title1),
+            title2 = createTextStyle(textStyles["title2"], defaultTypography.title2),
+            body1 = createTextStyle(textStyles["body1"], defaultTypography.body1),
+            body2 = createTextStyle(textStyles["body2"], defaultTypography.body2),
+            caption1 = createTextStyle(textStyles["caption1"], defaultTypography.caption1),
+            caption2 = createTextStyle(textStyles["caption2"], defaultTypography.caption2)
+        )
+    }
+    
+    
+    return defaultTypography
+}
+
+private fun createTextStyle(textStyleConfig: OctopusTextStyleConfig?, defaultStyle: TextStyle): TextStyle {
+    if (textStyleConfig == null) {
+        return defaultStyle
+    }
+    
+    val fontFamily = when (textStyleConfig.fontType) {
+        "serif" -> FontFamily.Serif
+        "monospace" -> FontFamily.Monospace
+        "default" -> FontFamily.Default
+        else -> FontFamily.Default
+    }
+    
+    val fontSize = textStyleConfig.fontSize?.let { 
+        // Use points directly as sp (1 point ≈ 1 sp on Android)
+        it.sp
+    } ?: defaultStyle.fontSize
+    
+    return defaultStyle.copy(
+        fontFamily = fontFamily,
+        fontSize = fontSize
+    )
+}
+
+
+@Composable
+private fun OctopusUIContent(onBack: () -> Unit) {
+    Box(modifier = Modifier.fillMaxSize()) {
+        val navController = rememberNavController()
+
+        NavHost(
+            navController = navController,
+            startDestination = "OctopusHome"
+        ) {
+            composable(route = "OctopusHome") {
+                OctopusNavigationHandler(
+                    navigateToLogin = {
+                        OctopusEventEmitter.instance?.emitLoginRequired()
+                    },
+                    navigateToProfileEdit = { fieldToEdit ->
+                        OctopusEventEmitter.instance?.emitEditUser(fieldToEdit)
+                    },
+                    navigateToClientObject = {
+                        // TODO : Bridge Post react
+                    }
+                ) {
+                    OctopusHomeScreen(
+                        navController = navController,
+                        backIcon = true,
+                        onBack = onBack
+                    )
+                }
+            }
+            octopusComposables(
+                navController = navController,
+                onNavigateToLogin = {
+                    OctopusEventEmitter.instance?.emitLoginRequired()
+                },
+                onNavigateToProfileEdit = { fieldToEdit ->
+                    OctopusEventEmitter.instance?.emitEditUser(fieldToEdit)
+                }
+            )
         }
-      )
     }
-  }
 }
+
+private suspend fun loadImageFromUri(uri: String): Painter? {
+    return withContext(Dispatchers.IO) {
+        try {
+            val url = URL(uri)
+            val inputStream = url.openStream()
+            val bitmap = BitmapFactory.decodeStream(inputStream)
+            inputStream.close()
+
+            if (bitmap != null) {
+                BitmapPainter(bitmap.asImageBitmap())
+            } else {
+                null
+            }
+        } catch (e: Exception) {
+            null
+        }
+    }
+}

package/ios/OctopusColorUtility.swift

@@ -0,0 +1,44 @@
+import UIKit
+
+/// A utility class for creating UIColor instances from hex strings.
+/// This avoids conflicts with other modules that might also extend UIColor.
+internal class OctopusColorUtility {
+  
+  /// Creates a UIColor from a hex string.
+  /// - Parameter hex: A hex color string (e.g., "#FF0000", "FF0000", "#FFF", etc.)
+  /// - Returns: A UIColor instance, or nil if the hex string is invalid
+  static func color(fromHex hex: String) -> UIColor? {
+    // Remove any whitespace and convert to lowercase
+    let hex = hex.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+    
+    // Remove # prefix if present
+    let cleanHex = hex.hasPrefix("#") ? String(hex.dropFirst()) : hex
+    
+    // Validate hex string contains only valid characters
+    guard cleanHex.range(of: "^[0-9a-f]+$", options: .regularExpression) != nil else {
+      return nil
+    }
+    
+    var int: UInt64 = 0
+    Scanner(string: cleanHex).scanHexInt64(&int)
+    
+    let a, r, g, b: UInt64
+    switch cleanHex.count {
+    case 3: // RGB (12-bit)
+      (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
+    case 6: // RGB (24-bit)
+      (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
+    case 8: // ARGB (32-bit)
+      (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
+    default:
+      return nil
+    }
+
+    return UIColor(
+      red: CGFloat(r) / 255,
+      green: CGFloat(g) / 255,
+      blue: CGFloat(b) / 255,
+      alpha: CGFloat(a) / 255
+    )
+  }
+}

package/ios/OctopusReactNativeSdk.mm

@@ -29,6 +29,14 @@ RCT_EXTERN_METHOD(cancelUserTokenRequest:(NSString *)requestId
 RCT_EXTERN_METHOD(disconnectUser:(RCTPromiseResolveBlock)resolve
                   withRejecter:(RCTPromiseRejectBlock)reject)
 
+RCT_EXTERN_METHOD(updateColorScheme:(NSString *)colorScheme
+                  withResolver:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(updateTheme:(NSDictionary *)themeOptions
+                  withResolver:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
 + (BOOL)requiresMainQueueSetup
 {
   return NO;

package/ios/OctopusReactNativeSdk.swift

@@ -5,37 +5,43 @@ import UIKit
 
 @objc(OctopusReactNativeSdk)
 class OctopusReactNativeSdk: RCTEventEmitter {
-  
+
   // MARK: - Properties
-  
+
   private var octopusSDK: OctopusSDK?
   private lazy var uiManager = OctopusUIManager()
   private lazy var eventManager = OctopusEventManager(eventEmitter: self)
   private let sdkInitializer = OctopusSDKInitializer()
   private var ssoAuthenticator: OctopusSSOAuthenticator?
-  
+  private var theme: OctopusTheme?
+  private var logoSource: [String: Any]?
+  private var fontConfiguration: [String: Any]?
+
   // MARK: - Initialization
-  
+
   @objc(initialize:withResolver:withRejecter:)
   func initialize(options: [String: Any], resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     do {
       self.octopusSDK = try sdkInitializer.initialize(options: options, eventManager: eventManager)
       self.ssoAuthenticator = OctopusSSOAuthenticator(octopusSDK: self.octopusSDK!, eventManager: eventManager)
+      self.theme = sdkInitializer.parseTheme(from: options)
+      self.logoSource = sdkInitializer.getLogoSource(from: options)
+      self.fontConfiguration = sdkInitializer.getFontConfiguration(from: options)
       resolve(nil)
     } catch {
       reject("INITIALIZE_ERROR", "Failed to initialize Octopus SDK: \(error.localizedDescription)", error)
     }
   }
-  
+
   // MARK: - User authentication
-  
+
   @objc(connectUser:withResolver:withRejecter:)
   func connectUser(params: [String: Any], resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     guard let authenticator = ssoAuthenticator else {
       reject("CONNECT_USER_ERROR", "SDK not initialized. Call initialize() first.", nil)
       return
     }
-    
+
     Task {
       do {
         try await authenticator.connectUser(params: params)
@@ -44,66 +50,66 @@ class OctopusReactNativeSdk: RCTEventEmitter {
         reject("CONNECT_USER_ERROR", "Failed to connect user: \(error.localizedDescription)", error)
       }
     }
-    
+
   }
-  
+
   @objc(completeUserTokenRequest:withToken:withResolver:withRejecter:)
   func completeUserTokenRequest(requestId: String, token: String, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     guard let authenticator = ssoAuthenticator else {
       reject("PROVIDE_TOKEN_ERROR", "SDK not initialized", nil)
       return
     }
-    
+
     authenticator.completeTokenRequest(requestId: requestId, token: token)
     resolve(nil)
   }
-  
+
   @objc(cancelUserTokenRequest:withResolver:withRejecter:)
   func cancelUserTokenRequest(requestId: String, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     guard let authenticator = ssoAuthenticator else {
       reject("PROVIDE_TOKEN_ERROR", "SDK not initialized", nil)
       return
     }
-    
+
     authenticator.cancelTokenRequest(requestId: requestId)
     resolve(nil)
   }
-  
+
   @objc(disconnectUser:withRejecter:)
   func disconnectUser(resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     guard let authenticator = ssoAuthenticator else {
       reject("DISCONNECT_USER_ERROR", "SDK not initialized. Call initialize() first.", nil)
       return
     }
-    
+
     do {
       try authenticator.disconnectUser()
       resolve(nil)
     } catch {
       reject("DISCONNECT_USER_ERROR", "Failed to disconnect user: \(error.localizedDescription)", error)
     }
-    
+
   }
-  
+
   // MARK: - UI management
-  
+
   @objc(openUI:withRejecter:)
   func openUI(resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     guard let octopus = octopusSDK else {
       reject("OPEN_UI_ERROR", "SDK not initialized. Call initialize() first.", nil)
       return
     }
-    
+
     DispatchQueue.main.async {
       do {
-        try self.uiManager.openUI(octopus: octopus)
+        try self.uiManager.openUI(octopus: octopus, theme: self.theme, logoSource: self.logoSource, fontConfiguration: self.fontConfiguration)
         resolve(nil)
       } catch {
         reject("OPEN_UI_ERROR", error.localizedDescription, error)
       }
     }
   }
-  
+
   @objc(closeUI:withRejecter:)
   func closeUI(resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
     DispatchQueue.main.async {
@@ -115,33 +121,51 @@ class OctopusReactNativeSdk: RCTEventEmitter {
       }
     }
   }
-  
+
+  @objc(updateColorScheme:withResolver:withRejecter:)
+  func updateColorScheme(colorScheme: String?, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
+    // iOS uses adaptive colors that automatically respond to system appearance changes
+    // No manual updates needed - the theme is applied when UI opens
+    resolve(nil)
+  }
+
+  @objc(updateTheme:withResolver:withRejecter:)
+  func updateTheme(themeOptions: [String: Any], resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
+    do {
+      self.theme = sdkInitializer.parseTheme(from: themeOptions)
+      resolve(nil)
+    } catch {
+      reject("UPDATE_THEME_ERROR", "Failed to update theme: \(error.localizedDescription)", error)
+    }
+  }
+
+
   // MARK: - Lifecycle management
-  
+
   deinit {
     cleanup()
   }
-  
+
   private func cleanup() {
     uiManager.cleanup()
     octopusSDK = nil
   }
-  
+
   @objc override func invalidate() {
     cleanup()
     super.invalidate()
   }
-  
+
   // MARK: - RCTEventEmitter overrides
-  
+
   @objc override func supportedEvents() -> [String]! {
     return eventManager.supportedEvents()
   }
-  
+
   @objc override func startObserving() {
     eventManager.startObserving()
   }
-  
+
   @objc override func stopObserving() {
     eventManager.stopObserving()
   }