@momo-kits/native-kits 0.112.1-beta.15 → 0.112.1-beta.17

package/compose/src/commonMain/kotlin/vn/momo/kits/application/NavigationContainer.kt

@@ -6,14 +6,10 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.unit.Dp
-import kotlinx.coroutines.launch
-import kotlinx.serialization.json.Json
-import kotlinx.serialization.json.jsonObject
-import kotlinx.serialization.json.jsonPrimitive
+import vn.momo.kits.components.TrustBannerData
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Theme
@@ -64,39 +60,39 @@ val ApplicationContext = staticCompositionLocalOf<MiniAppContext?> {
     error("no context provided!")
 }
 
+val AppConfig = staticCompositionLocalOf<DesignSystemConfig?> {
+    error("no config provided!")
+}
+
+data class DesignSystemConfig(
+    val trustBanner: TrustBannerData? = null,
+    val headerBar: String? = null,
+    val headerGradient: String? = null
+)
+
 @Composable
 fun ApplicationContainer(
     theme: Theme = defaultTheme,
     composeApi: ComposeApi? = null,
     statusBarHeight: Dp? = null,
     applicationContext: MiniAppContext? = null,
+    config: DesignSystemConfig? = null,
     content: @Composable () -> Unit,
 ) {
     var appTheme by remember { mutableStateOf(theme) }
-    val coroutineScope = rememberCoroutineScope()
 
     LaunchedEffect(Unit) {
         try {
-            composeApi?.request("getConfig", "DESIGN_SYSTEM") {
-                val json = Json { ignoreUnknownKeys = true }
-                val response = json.parseToJsonElement(it).jsonObject["response"]
-                val headerBar = response
-                    ?.jsonObject
-                    ?.get("headerBar")
-                    ?.jsonPrimitive
-                    ?.content
-                if (headerBar != null && appTheme.assets.headerBackground == null) {
-                    coroutineScope.launch {
-                        appTheme = appTheme.copy(
-                            assets = ThemeAssets(
-                                headerBackground = headerBar
-                            )
-                        )
-                    }
-                }
+            val headerBar = config?.headerBar
+            if (headerBar != null && appTheme.assets.headerBackground == null) {
+                appTheme = appTheme.copy(
+                    assets = ThemeAssets(
+                        headerBackground = headerBar
+                    )
+                )
             }
         } catch (e: Exception) {
-            print("@@ == NavigationContainer fetch config error $e")
+            print("@@ == NavigationContainer get config error $e")
         }
     }
 
@@ -109,6 +105,7 @@ fun ApplicationContainer(
         AppNavigator provides Navigator(),
         AppStatusBar provides appStatusBarHeight,
         ApplicationContext provides applicationContext,
+        AppConfig provides config
     ) {
         content()
     }

package/compose/src/commonMain/kotlin/vn/momo/kits/components/TrustBanner.kt

@@ -19,12 +19,13 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import vn.momo.kits.application.AppConfig
 import vn.momo.kits.modifier.noFeedbackClickable
 
 val defaultBanner = TrustBannerData(
     content = mapOf(
-        "vi" to "Bảo mật thông tin & An toàn tài sản của bạn là ưu tiên hàng đầu của MoMo.",
-        "en" to "Your data security and money safety are MoMo's top priorities."
+        "vi" to "An toàn tài sản & Bảo mật thông tin của bạn là ưu tiên hàng đầu của MoMo.",
+        "en" to "Ensuring financial security and data privacy is MoMo's highest priority."
     ),
     subContent = mapOf(
         "vi" to "Tìm hiểu thêm",
@@ -47,25 +48,25 @@ const val contentColor = 0xFF484848
 const val subContentColor = 0xFFEB2F96
 
 data class TrustBannerData(
-    val content: Map<String, String>,
-    val subContent: Map<String, String>,
-    val pciImage: String,
-    val momoImage: String,
-    val sslImage: String,
-    val icons: List<String>,
-    val urlConfig: String
+    val content: Map<String, String> = mapOf("vi" to "", "en" to ""),
+    val subContent: Map<String, String> = mapOf("vi" to "", "en" to ""),
+    val pciImage: String? = null,
+    val momoImage: String? = null,
+    val sslImage: String? = null,
+    val icons: List<String>? = null,
+    val urlConfig: String = ""
 )
 
 @Composable
 fun TrustBanner(
-    trustBanner: TrustBannerData = defaultBanner,
     serviceName: String = "",
     screenName: String = "",
     onPress: ((Map<String, String>) -> Unit)? = null,
     trackEvent: ((String, Map<String, String>) -> Unit)? = null,
     language: String = "vi"
-
 ) {
+    val appConfig = AppConfig.current
+    val trustBanner = appConfig?.trustBanner ?: defaultBanner
     val trackParams = mapOf(
         "service_name" to serviceName,
         "screen_name" to screenName,
@@ -103,15 +104,17 @@ fun TrustBanner(
                 }
             )
     ) {
-        Image(
-            source = trustBanner.momoImage,
+        if (trustBanner.momoImage != null) {
+            Image(
+                source = trustBanner.momoImage,
+                modifier = Modifier
+                    .width(64.dp)
+                    .height(64.dp)
+            )
+        }
+        Column(
             modifier = Modifier
-                .width(64.dp)
-                .height(64.dp)
-        )
-        Column (
-          modifier = Modifier
-              .padding(start = 10.dp)
+                .padding(start = 10.dp)
         ) {
             Text(
                 text = trustBanner.content[language] ?: "",
@@ -121,10 +124,13 @@ fun TrustBanner(
                 color = Color(contentColor),
                 maxLines = 2
             )
-            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
-                Row (
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Row(
                     verticalAlignment = Alignment.CenterVertically,
-                )  {
+                ) {
                     Text(
                         text = trustBanner.subContent[language] ?: "",
                         lineHeight = 16.sp,
@@ -138,23 +144,27 @@ fun TrustBanner(
                     )
                 }
                 Row {
-                    Image(
-                        source = trustBanner.pciImage, modifier = Modifier
-                            .padding(end = 4.dp)
-                            .width(27.dp)
-                            .height(20.dp)
-                        ,options = Options(
-                            contentScale = ContentScale.Fit,
+                    if (trustBanner.pciImage != null) {
+                        Image(
+                            source = trustBanner.pciImage, modifier = Modifier
+                                .padding(end = 4.dp)
+                                .width(27.dp)
+                                .height(20.dp), options = Options(
+                                contentScale = ContentScale.Fit,
+                            )
                         )
-                    )
-                    Image(
-                        source = trustBanner.sslImage, modifier = Modifier
-                            .width(52.dp)
-                            .height(20.dp),
-                        options = Options(
-                            contentScale = ContentScale.Fit,
+                    }
+                    if (trustBanner.sslImage != null) {
+                        Image(
+                            source = trustBanner.sslImage, modifier = Modifier
+                                .width(52.dp)
+                                .height(20.dp),
+                            options = Options(
+                                contentScale = ContentScale.Fit,
+                            )
                         )
-                    )
+                    }
+
                 }
             }
         }

package/ios/Icon/Icon.swift

@@ -44,9 +44,7 @@ public struct Icon: View {
 
     public var body: some View {
         if let uri = iconSources[source]?.uri {
-            ImageView(uri)
-                .frame(width: size, height: size)
-                .foregroundColor(color)
+            ImageView(uri, color: color).frame(width: size, height: size)
         }
     }
 }

package/ios/Image/Image.swift

@@ -8,11 +8,12 @@ import SwiftUI
 public struct ImageView: View {
     // MARK: Lifecycle
 
-    public init(_ url: String, aspectRatio: CGFloat? = nil, contentMode: ContentMode = ContentMode.fit, placeholder: AnyView? = nil) {
+    public init(_ url: String, aspectRatio: CGFloat? = nil, contentMode: ContentMode = ContentMode.fit, placeholder: AnyView? = nil, color: Color? = nil) {
         self.url = url
         self.aspectRatio = aspectRatio
         self.contentMode = contentMode
         self.placeholder = placeholder
+        self.color = color
     }
 
     // MARK: Public
@@ -26,6 +27,7 @@ public struct ImageView: View {
                 error = false
             }
             .resizable()
+            .renderingMode(.template)
             .placeholder {
                 Rectangle().foregroundColor(.gray)
                 VStack(alignment: .center, content: {
@@ -47,6 +49,7 @@ public struct ImageView: View {
             .scaledToFit()
             .transition(.fade)
             .aspectRatio(aspectRatio, contentMode: contentMode)
+            .modifier(ColorMultiplyModifier(color: color))
     }
 
     // MARK: Internal
@@ -54,7 +57,20 @@ public struct ImageView: View {
     var aspectRatio: CGFloat?
     var contentMode: ContentMode
     var placeholder: AnyView?
+    var color: Color?
 
     @State var error: Bool = false
     var url: String
 }
+
+private struct ColorMultiplyModifier: ViewModifier {
+    let color: Color?
+    
+    func body(content: Content) -> some View {
+        if let color {
+            content.colorMultiply(color)
+        } else {
+            content
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.112.1-beta.15",
+  "version": "0.112.1-beta.17",
   "private": false,
   "dependencies": {},
   "devDependencies": {},