@momo-kits/native-kits 0.113.1-beta.2 → 0.113.1-beta.4

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

@@ -62,11 +62,12 @@ fun Screen(
     onContentLayout: ((LayoutCoordinates) -> Unit)? = null,
     useAvoidKeyboard: Boolean = true,
     footer: @Composable (() -> Unit)? = null,
-    headerRight: @Composable (() -> Unit)? = null,
+    headerRight: @Composable (() -> Unit)? = { HeaderRight() },
     fabProps: FabProps? = null,
     animatedHeader: AnimatedHeader? = null,
     layoutOffset: Dp = 56.dp,
     inputSearchProps: InputSearchProps? = null,
+    useAnimationSearch: Boolean = false,
     content: @Composable () -> Unit,
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
@@ -83,7 +84,7 @@ fun Screen(
     val bottomPadding = min(indicator, 21.dp)
 
     val opacity by animateFloatAsState(
-        targetValue = ((scrollState.value / 114f)).coerceIn(0f, 1f)
+        targetValue = ((scrollState.value / 52f)).coerceIn(0f, 1f),
     )
 
     val headerAnimated =
@@ -93,13 +94,15 @@ fun Screen(
 
     Box(
         Modifier.fillMaxSize()
-            .background(backgroundColor ?: AppTheme.current.colors.background.default)
+            .background(backgroundColor ?: AppTheme.current.colors.background.surface)
     ) {
 
         if (animatedHeader === null) {
             HeaderBackground(
                 headerType = headerType,
                 scrollState = scrollState.value,
+                inputSearchProps= inputSearchProps,
+                useAnimationSearch = useAnimationSearch
             )
         } else {
             Box(
@@ -108,8 +111,11 @@ fun Screen(
                     .graphicsLayer { alpha = opacity }
             ) {
                 HeaderBackground(
+                    isBack = isBack,
                     headerType = headerType,
                     scrollState = scrollState.value,
+                    inputSearchProps= inputSearchProps,
+                    useAnimationSearch = useAnimationSearch
                 )
             }
         }
@@ -123,7 +129,8 @@ fun Screen(
             opacity = opacity,
             animatedHeader = animatedHeader,
             inputSearchProps = inputSearchProps,
-            scrollState = scrollState.value
+            scrollState = scrollState.value,
+            useAnimationSearch = useAnimationSearch
         )
 
         Column(
@@ -154,6 +161,10 @@ fun Screen(
                         if (animatedHeader !== null) {
                             Spacer(modifier = Modifier.padding(top = statusBarHeight + 52.dp + layoutOffset))
                         }
+
+                        if (useAnimationSearch && inputSearchProps != null) {
+                            Spacer(modifier = Modifier.padding(top = statusBarHeight))
+                        }
                         content()
                     }
                 }

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

@@ -17,9 +17,9 @@ enum class DotSize(val size: Int) {
 }
 
 @Composable
-fun BadgeDot(size: DotSize = DotSize.Large) {
+fun BadgeDot(size: DotSize = DotSize.Large, modifier: Modifier = Modifier) {
     Box(
-        modifier = Modifier
+        modifier = modifier
             .size(size.size.dp)
             .border(width = 1.dp, color = Colors.black_01, shape = RoundedCornerShape(Radius.S))
             .background(color = Colors.red_03, shape = RoundedCornerShape(Radius.S))

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

@@ -75,6 +75,7 @@ fun OTPCaret() {
 
 @Composable
 fun InputOTP(
+    value: String = "",
     length: Int? = null,
     errorMessage: String = "",
     errorSpacing: Boolean = false,
@@ -85,9 +86,9 @@ fun InputOTP(
     onBlur: () -> Unit = {},
     dataType: String = "number",
     accessibilityLabel: String? = null,
+    modifier: Modifier = Modifier
 ) {
     val MAX_LENGTH = 10
-    var value by remember { mutableStateOf("") }
     var isFocused by remember { mutableStateOf(false) }
     var isBlurred = false
 
@@ -96,7 +97,6 @@ fun InputOTP(
             (dataType != "number" || !text.any { !it.isDigit() }) &&
             (text.length < value.length || value.length < text.length)
         ) {
-            value = text
             onChangeText(text)
         }
     }
@@ -108,7 +108,7 @@ fun InputOTP(
             onValueChange = handleChangeText,
             singleLine = true,
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = if (dataType == "number") KeyboardType.Number else KeyboardType.Ascii),
-            modifier = Modifier.height(56.dp).onFocusChanged {
+            modifier = modifier.height(56.dp).onFocusChanged {
                 isFocused = it.isFocused
                 if (it.isFocused) {
                     onFocus()

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

@@ -31,6 +31,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import vn.momo.kits.const.AppTheme
@@ -98,7 +99,8 @@ data class InputSearchProps(
     val keyboardActions: KeyboardActions = KeyboardActions.Default,
     val modifier: Modifier = Modifier,
     val iconModifier: Modifier = Modifier,
-    val onClearPress: () -> Unit = {}
+    val onClearPress: () -> Unit = {},
+    val leftPosition: Dp? = null,
 )
 
 @Composable

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

@@ -115,14 +115,14 @@ fun PopupNotify(
             )
 
             Column(modifier = Modifier.padding(Spacing.XL)) {
-                Text(style = Typography.titleXs, maxLines = 2, text = title)
+                Text(style = Typography.titleXs, maxLines = 1, text = title)
                 content(Modifier.padding(top = Spacing.S))
                 if (error.isNotEmpty()) {
                     Text(
                         text = error,
                         style = Typography.descriptionXs,
                         color = AppTheme.current.colors.text.hint,
-                        maxLines = 2,
+                        maxLines = 1,
                         modifier = Modifier.padding(top = Spacing.S)
                     )
                 }

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/compose/src/commonMain/kotlin/vn/momo/kits/utils/Icons.kt

@@ -1318,5 +1318,10 @@ val Icons = mapOf(
     "ic_checked" to "https://img.mservice.com.vn/app/img/kits/checked_ic.png",
     "ic_minus" to "https://img.mservice.com.vn/app/img/kits/minus.png",
     "ic_navigation" to "https://static.momocdn.net/app/img/kits/ic_navigation.png",
-    "ic_money_bag" to "https://static.momocdn.net/app/img/kits/ic_money_bag.png"
+    "ic_money_bag" to "https://static.momocdn.net/app/img/kits/ic_money_bag.png",
+    "ic_support" to "https://static.momocdn.net/app/img/kits/ic_support.png",
+    "navigation_more_icon" to "https://static.momocdn.net/app/img/kits/navigation_more_icon.png",
+    "help_center" to "https://static.momocdn.net/app/img/kits/help-center.png",
+    "pin_star" to "https://static.momocdn.net/app/img/kits/pin_star.png",
+    "pin_star_checked" to "https://static.momocdn.net/app/img/kits/pin_star_checked.png"
 )

package/ios/Application/ApplicationEnvironment.swift

@@ -0,0 +1,34 @@
+import SwiftUI
+
+public protocol KitComposeApi {
+    func request(funcName: String, params: Any?) -> String
+    func request(funcName: String, params: Any?, onResponse: ((String) -> Void)?) -> String
+    func requestCallback(funcName: String, params: Any?, onResponse: ((String) -> Void)?)
+    func removeCallback(id: String)
+}
+
+public class MiniAppContext {
+    public var appId: String = ""
+    public var appCode: String = ""
+    public var appName: Any? = nil
+    public var appIcon: String = ""
+    public var description: Any? = nil
+    
+    public init(appId: String, appCode: String, appName: Any? = nil, appIcon: String, description: Any? = nil) {
+        self.appId = appId
+        self.appCode = appCode
+        self.appName = appName
+        self.appIcon = appIcon
+        self.description = description
+    }
+}
+
+public class ApplicationEnvironment: ObservableObject {
+    let applicationContext: MiniAppContext?
+    let composeApi: KitComposeApi
+    
+    public init(applicationContext: MiniAppContext?, composeApi: KitComposeApi) {
+        self.applicationContext = applicationContext
+        self.composeApi = composeApi
+    }
+}

package/ios/Application/Components.swift

@@ -105,7 +105,7 @@ public struct Header: View {
     var headerType: HeaderType = .default
     var titlePosition: TitlePosition
     var title: String
-    var headerRight: (() -> AnyView)?
+    var headerRight:  (()->any View)? = {HeaderRight()}
     var goBack: (() -> Void)?
     var opacity: CGFloat? = nil
     var animatedHeader: AnimatedHeader? = nil
@@ -118,7 +118,7 @@ public struct Header: View {
         headerType: HeaderType = .default,
         titlePosition: TitlePosition,
         title: String,
-        headerRight: (() -> AnyView)? = nil,
+        headerRight:  (()->any View)? = {HeaderRight()},
         goBack: (() -> Void)? = nil,
         opacity: CGFloat? = nil,
         animatedHeader: AnimatedHeader? = nil,
@@ -160,11 +160,12 @@ public struct Header: View {
                                 
                             }
                             
-                            Spacer() // Pushes headerRight to the right
+                            Spacer()
                             
-                            if let headerRight = headerRight {
-                                headerRight()
+                            if (headerRight != nil) {
+                                AnyView(headerRight!())
                             }
+                        
                         }
                         .frame(height: 52)
                         .padding(.horizontal)
@@ -204,12 +205,10 @@ public struct Header: View {
                                     .foregroundColor(tintIconColor)
                                     .frame(maxWidth: titlePosition == .center ? .infinity : nil, alignment: titlePosition == .center ? .center : .leading)
                             }
-                            
                             Spacer()
                         }
                         .frame(height: 52)
                         .padding(.horizontal)
-                        
                     }
                     .background(Color.clear)
                 }

package/ios/Application/ComposeApi.swift

@@ -0,0 +1,22 @@
+import Foundation
+
+public protocol ComposeApi {
+    func request(funcName: String, params: Any, _ completion: ((String) -> Void)?)
+    func request(funcName: String, params: Any) -> String
+}
+
+// Default implementation
+public class ComposeApiImpl: ComposeApi {
+    public static let shared = ComposeApiImpl()
+    
+    private init() {}
+    
+    public func request(funcName: String, params: Any, _ completion: ((String) -> Void)?) {
+        // Implement your API request logic here
+    }
+    
+    public func request(funcName: String, params: Any) -> String {
+        // Implement your API request logic here
+        return ""
+    }
+} 

package/ios/Application/HeaderRight.swift

@@ -0,0 +1,249 @@
+import SwiftUI
+import Foundation
+
+public struct HeaderRightData {
+    var useShortcut: Bool
+    var useMore: Bool
+    var tools: [ToolGroup]
+    var toolCallback: ((String) -> Void)?
+    
+    public init(
+        useShortcut: Bool = false,
+        useMore: Bool = false,
+        tools: [ToolGroup] = [],
+        toolCallback: ((String) -> Void)? = nil
+    ) {
+        self.useShortcut = useShortcut
+        self.useMore = useMore
+        self.tools = tools
+        self.toolCallback = toolCallback
+    }
+}
+
+public struct Tool {
+    var key: String
+    var icon: String
+    var showBadge: Bool
+    var name: [String: String]
+    
+    public init(
+        key: String,
+        icon: String,
+        name: [String: String] = [:],
+        showBadge: Bool = false
+    ) {
+        self.key = key
+        self.icon = icon
+        self.showBadge = showBadge
+        self.name = name
+    }
+    
+    func toMap() -> [String: Any] {
+        return [
+            "key": key,
+            "icon": icon,
+            "showBadge": showBadge,
+            "name": name
+        ]
+    }
+}
+
+public struct ToolGroup {
+    var title: [String: String]
+    var items: [Tool]
+    
+    public init(
+        title: [String: String] = [:],
+        items: [Tool]
+    ) {
+        self.title = title
+        self.items = items
+    }
+    
+    func toMap() -> [String: Any] {
+        return [
+            "title": title,
+            "items": items.map { $0.toMap() }
+        ]
+    }
+}
+
+struct NavigationButtonConfig {
+    let icon: String
+    let onPress: () -> Void
+}
+
+// MARK: - Components
+public struct HeaderRight: View {
+    public init(headerRight: HeaderRightData? = nil) {
+        self.headerRight = headerRight
+    }
+    var headerRight: HeaderRightData?
+    
+    public var body: some View {
+        HStack(alignment: .center) {
+            ToolkitHeaderRight(headerRight: headerRight)
+        }
+    }
+}
+
+struct ToolkitHeaderRight: View {
+    var headerRight: HeaderRightData?
+    @State private var isFavorite: Bool = false
+    @State private var isLoading: Bool = false
+    @EnvironmentObject private var environment: ApplicationEnvironment
+    
+    // MARK: - Actions
+    private func onPressShortcut() {
+        environment.composeApi.request(
+            funcName: "onToolAction",
+            params: ["item": ["key": "onFavorite"]]
+        ) { _ in
+            isFavorite.toggle()
+        }
+    }
+    
+    private func onPressHelpCenter() {
+        let context = environment.applicationContext
+        let paramMap: [String: Any] = [
+            "appId": context?.appId,
+            "code": context?.appCode,
+            "name": context?.appName,
+            "icon": context?.appIcon,
+            "description": context?.description
+        ]
+        environment.composeApi.request(
+            funcName: "showHelpCenter",
+            params: paramMap
+        ) { _ in }
+    }
+    
+    private func onPressClose() {
+        environment.composeApi.request(
+            funcName: "dismiss",
+            params: ""
+        ) { _ in }
+    }
+    
+    private func onPressMore() {
+        let context = environment.applicationContext
+        let params: [String: Any] = [
+            "tools": headerRight?.tools.map { $0.toMap() } ?? [],
+            "context": [
+                "appId": context?.appId,
+                "code": context?.appCode,
+                "name": context?.appName,
+                "icon": context?.appIcon,
+                "description": context?.description
+            ]
+        ]
+        environment.composeApi.request(
+            funcName: "showTools",
+            params: params
+        ) { response in
+            do {
+                if let jsonData = response.data(using: .utf8),
+                   let json = try JSONSerialization.jsonObject(with: jsonData) as? [String: Any],
+                   let toolResponse = json["response"] as? String {
+                    headerRight?.toolCallback?(toolResponse)
+                }
+            } catch {
+                print("Error parsing response:", error)
+            }
+        }
+    }
+    
+    private func getNavigationButtonConfig() -> NavigationButtonConfig {
+        let totalTools = headerRight?.tools.reduce(0) { $0 + $1.items.count } ?? 0
+        var icon = isFavorite ? "pin_star_checked" : "pin_star"
+        var onClickHandler: () -> Void = onPressShortcut
+        
+        if totalTools > 1 || headerRight?.useMore == true {
+            icon = "navigation_more_icon"
+            onClickHandler = onPressMore
+        } else if totalTools == 1, let singleTool = headerRight?.tools.first?.items.first {
+            icon = singleTool.icon
+            onClickHandler = {
+                headerRight?.toolCallback?(singleTool.key)
+            }
+        }
+        
+        return NavigationButtonConfig(icon: icon, onPress: onClickHandler)
+    }
+    
+    var body: some View {
+        let navButtonConfig = getNavigationButtonConfig()
+        let showBadge = headerRight?.tools.contains { group in
+            group.items.contains { $0.showBadge }
+        } ?? false
+        
+        HStack(alignment: .center) {
+            if headerRight?.useShortcut == true {
+                NavigationButton(
+                    disabled: isLoading,
+                    icon: navButtonConfig.icon,
+                    showBadge: showBadge,
+                    onClick: navButtonConfig.onPress
+                )
+            }
+            
+            HStack(alignment: .center, spacing: 0) {
+                Icon(source: "help_center", size: 20)
+                    .padding(4)
+                    .onTapGesture {
+                        onPressHelpCenter()
+                    }
+                
+                Rectangle()
+                    .fill(Colors.black20)
+                    .frame(width: 0.5, height: 12)
+                
+                Icon(source: "16_navigation_close_circle", size: 20, color: Colors.black17)
+                    .padding(4)
+                    .onTapGesture {
+                        onPressClose()
+                    }
+            }
+            .frame(width: 65, height: 28)
+            .background(Color.white.opacity(0.6))
+            .cornerRadius(14)
+            .overlay(
+                RoundedRectangle(cornerRadius: 14)
+                    .stroke(Color.black.opacity(0.2), lineWidth: 0.2)
+            )
+            .padding(.leading, Spacing.S)
+        }
+    }
+}
+
+struct NavigationButton: View {
+    var disabled: Bool
+    var icon: String
+    var showBadge: Bool
+    var onClick: () -> Void
+    
+    var body: some View {
+        ZStack {
+            Circle()
+                .fill(Color.white.opacity(0.6))
+                .overlay(
+                    Circle()
+                        .stroke(Color.black.opacity(0.2), lineWidth: 0.2)
+                )
+            
+            Icon(source: icon, size: 16)
+            
+            if showBadge {
+                BadgeDot(size: .small)
+                    .offset(x: -2, y: -2)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
+            }
+        }
+        .frame(width: 28, height: 28)
+        .onTapGesture {
+            if !disabled {
+                onClick()
+            }
+        }
+    }
+}