@momo-kits/native-kits 0.118.1-beta.2 → 0.120.0-beta.3

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

@@ -27,6 +27,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
@@ -167,9 +168,11 @@ fun Header(
                         HeaderTitle(
                             title = title,
                             color = tintIconColor,
-                            modifier = Modifier.semantics {
-                                testTag = "title_navigation_header"
-                            }
+                            modifier = Modifier
+                                .setAutomationId("title_navigation_header")
+                                .fillMaxWidth(fraction = if(titlePosition == TitlePosition.LEFT) 0.7f else 0.5f)
+                            ,
+                            textAlign = if(titlePosition == TitlePosition.LEFT) TextAlign.Start else TextAlign.Center
                         )
                     }
                 }

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

@@ -4,6 +4,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
 import vn.momo.kits.components.Text
@@ -25,6 +26,7 @@ fun HeaderTitle(
             lineHeight = 22.sp,
         ),
         color = color,
-        maxLines = 1
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis
     )
 }

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

@@ -200,9 +200,8 @@ fun Footer(footer: @Composable (() -> Unit)? = null, keyboardSize: Dp = 0.dp, bo
     Box(
         Modifier
             .offset(y = -keyboardSize)
-            .padding(bottom = bottom)
             .shadow(
-                Colors.black_20.copy(alpha = 0.1f),
+                Colors.black_20.copy(alpha = 0.2f),
                 borderRadius = 0.dp,
                 10f,
                 offsetX = 0.dp,
@@ -212,7 +211,9 @@ fun Footer(footer: @Composable (() -> Unit)? = null, keyboardSize: Dp = 0.dp, bo
             .background(AppTheme.current.colors.background.surface)
     ) {
         Box(
-            Modifier.fillMaxWidth().padding(vertical = Spacing.S, horizontal = Spacing.M)
+            Modifier.fillMaxWidth()
+                .padding(bottom = bottom)
+                .padding(vertical = Spacing.S, horizontal = Spacing.M)
         ) {
             footer?.invoke()
         }

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

@@ -2,10 +2,6 @@ package vn.momo.kits.components
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
@@ -14,8 +10,6 @@ import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
-import coil3.compose.AsyncImage
-import vn.momo.kits.const.AppTheme
 
 data class Options(
     val alignment: Alignment = Alignment.TopStart,
@@ -28,6 +22,47 @@ enum class ImageState {
     Loading, Success, Error
 }
 
+private val supportedDomains = setOf(
+    "static.momocdn.net",
+    "img.mservice.com.vn",
+    "cdn.mservice.com.vn",
+    "img.mservice.io",
+    "image.momocdn.net"
+)
+
+private val sizeChart = mapOf(
+    "XXS" to 64,
+    "XS" to 128,
+    "S" to 256,
+    "M" to 512,
+    "L" to 768,
+    "XL" to 1024,
+    "XXL" to 2048
+)
+
+private fun closestSizeForWidth(width: Float): String {
+    return sizeChart.minByOrNull { (_, value) ->
+        kotlin.math.abs(value - width)
+    }?.key ?: "M"
+}
+
+private fun getHostFromUrl(url: String): String? {
+    return try {
+        val noProtocol = url.substringAfter("//")
+        noProtocol.substringBefore("/").substringBefore(":")
+    } catch (_: Exception) {
+        null
+    }
+}
+
+private fun appendQueryParam(url: String, key: String, value: String): String {
+    val parts = url.split("#", limit = 2)
+    val base = parts[0]
+    val fragment = if (parts.size > 1) "#" + parts[1] else ""
+    val sep = if (base.contains("?")) "&" else "?"
+    return "$base$sep$key=$value$fragment"
+}
+
 @Composable
 fun Image(
     source: Any,
@@ -35,41 +70,59 @@ fun Image(
     options: Options? = null,
     loading: Boolean = true,
 ) {
-    var imageOptions = Options()
-    var imageState by remember { mutableStateOf(ImageState.Loading) }
+//    var imageOptions = Options()
+//    var imageState by remember { mutableStateOf(ImageState.Loading) }
+//    var urlToLoad by remember(source) { mutableStateOf(source) }
+//    val density = LocalDensity.current
 
     options?.let {
-        imageOptions = Options(
-            alignment = options.alignment,
-            contentScale = options.contentScale,
-            colorFilter = options.colorFilter,
-            alpha = DefaultAlpha,
-        )
+//        imageOptions = Options(
+//            alignment = options.alignment,
+//            contentScale = options.contentScale,
+//            colorFilter = options.colorFilter,
+//            alpha = DefaultAlpha,
+//        )
     }
 
-    Box(modifier = modifier.semantics { contentDescription = "img|$source" }) {
-        AsyncImage(
-            modifier = Modifier.matchParentSize(),
-            model = source,
-            contentDescription = null,
-            contentScale = imageOptions.contentScale,
-            alignment = imageOptions.alignment,
-            colorFilter = imageOptions.colorFilter,
-            alpha = imageOptions.alpha,
-            onLoading = { imageState = ImageState.Loading },
-            onSuccess = { imageState = ImageState.Success },
-            onError = { imageState = ImageState.Error },
-        )
-        when (imageState) {
-            ImageState.Loading -> if (loading) Skeleton()
-            ImageState.Error -> Icon(
-                source = "media_fail",
-                color = AppTheme.current.colors.text.disable,
-                modifier = modifier
-            )
-
-            ImageState.Success -> {}
-        }
+    Box(
+        modifier = modifier
+            .semantics { contentDescription = "img|$source" }
+//            .onSizeChanged { size ->
+//                val src = source as? String ?: return@onSizeChanged
+//                val host = getHostFromUrl(src)
+//                if (host != null && supportedDomains.contains(host)) {
+//                    val widthPx = size.width.toFloat()
+//                    val pixelRatio = density.density
+//                    val pixelFitForWidth = widthPx * pixelRatio
+//                    val sizeKey = closestSizeForWidth(pixelFitForWidth)
+//                    urlToLoad = appendQueryParam(src, "size", sizeKey)
+//                } else {
+//                    urlToLoad = src
+//                }
+//            }
+    ) {
+//        AsyncImage(
+//            modifier = Modifier.matchParentSize(),
+//            model = urlToLoad,
+//            contentDescription = null,
+//            contentScale = imageOptions.contentScale,
+//            alignment = imageOptions.alignment,
+//            colorFilter = imageOptions.colorFilter,
+//            alpha = imageOptions.alpha,
+//            onLoading = { imageState = ImageState.Loading },
+//            onSuccess = { imageState = ImageState.Success },
+//            onError = { imageState = ImageState.Error },
+//        )
+//        when (imageState) {
+//            ImageState.Loading -> if (loading) Skeleton()
+//            ImageState.Error -> Icon(
+//                source = "media_fail",
+//                color = AppTheme.current.colors.text.disable,
+//                modifier = modifier
+//            )
+//
+//            ImageState.Success -> {}
+//        }
     }
 
 }

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

@@ -57,6 +57,7 @@ fun PopupNotify(
     secondary: PopupAction? = null,
     buttonDirection: PopupActionDirection = PopupActionDirection.ROW,
     onIconClose: () -> Unit,
+    isShowCloseIcon: Boolean = true,
 ) {
     var isScroll by remember { mutableStateOf(false) }
     val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
@@ -107,13 +108,13 @@ fun PopupNotify(
                     RoundedCornerShape(Radius.L)
                 )
         ) {
-            image.ifNotNull(
+            if(image.isNotEmpty()) {
                 Image(
                     source = image,
                     modifier = Modifier.fillMaxWidth().aspectRatio(1.777f),
-                    options = Options(alignment =  Alignment.Center)
-                ), null
-            )
+                    options = Options(alignment = Alignment.Center)
+                )
+            }
 
             Column(modifier = Modifier.padding(Spacing.XL)) {
                 Text(
@@ -125,7 +126,7 @@ fun PopupNotify(
                 content(Modifier.padding(top = Spacing.S))
                 if (error.isNotEmpty()) {
                     Text(
-                        text = error,
+                        text = "Mã lỗi: " + error,
                         style = Typography.descriptionXsRegular,
                         color = AppTheme.current.colors.text.hint,
                         maxLines = 1,
@@ -144,34 +145,36 @@ fun PopupNotify(
             }
         }
 
-        Box(
-            Modifier
-                .width(22.dp)
-                .height(22.dp)
-                .offset(x = -(1).dp, y = (-11).dp)
-                .background(
-                    color = AppTheme.current.colors.text.default,
-                    shape = RoundedCornerShape(Radius.M)
-                )
-                .border(
-                    width = 2.dp,
+        if(isShowCloseIcon) {
+            Box(
+                Modifier
+                    .width(22.dp)
+                    .height(22.dp)
+                    .offset(x = -(1).dp, y = (-11).dp)
+                    .background(
+                        color = AppTheme.current.colors.text.default,
+                        shape = RoundedCornerShape(Radius.M)
+                    )
+                    .border(
+                        width = 2.dp,
+                        color = AppTheme.current.colors.background.surface,
+                        shape = RoundedCornerShape(Radius.M)
+                    )
+                    .clip(RoundedCornerShape(100))
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null,
+                        onClick = { onClose { onIconClose() } }
+                    ),
+                contentAlignment = Alignment.Center
+            ) {
+                Icon(
+                    source = "navigation_close",
                     color = AppTheme.current.colors.background.surface,
-                    shape = RoundedCornerShape(Radius.M)
+                    size = 16.dp,
+                    modifier = Modifier.setAutomationId("ic_popup_close")
                 )
-                .clip(RoundedCornerShape(100))
-                .clickable(
-                    interactionSource = remember { MutableInteractionSource() },
-                    indication = null,
-                    onClick = { onClose { onIconClose() } }
-                ),
-            contentAlignment = Alignment.Center
-        ) {
-            Icon(
-                source = "navigation_close",
-                color = AppTheme.current.colors.background.surface,
-                size = 16.dp,
-                modifier = Modifier.setAutomationId("ic_popup_close")
-            )
+            }
         }
     }
 }

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

@@ -24,6 +24,7 @@ import androidx.compose.ui.unit.dp
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
+import vn.momo.kits.utils.ifNotNull
 
 @Composable
 fun PopupPromotion(
@@ -32,7 +33,7 @@ fun PopupPromotion(
     onClose: (() -> Unit) = {},
 ) {
     Column(Modifier.semantics { testTag = "popup_notify" }) {
-        if (source.isNotEmpty()) {
+        source.ifNotNull(
             Image(
                 source = source,
                 modifier = Modifier.fillMaxWidth()
@@ -43,8 +44,8 @@ fun PopupPromotion(
                         onClick = onPress
                     ),
                 options = Options(alignment =  Alignment.Center, contentScale = ContentScale.Crop)
-            )
-        }
+            ), null
+        )
         Box(
             modifier = Modifier
                 .padding(top = Spacing.S)

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

@@ -17,6 +17,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
+import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.utils.ifTrue
 
 @Composable
@@ -24,6 +25,8 @@ fun Switch(
     value: Boolean = false,
     onChange: (Boolean) -> Unit = {},
     disabled: Boolean = false,
+    title: String? = "",
+    accessibilityId: String? = ""
 ) {
     val circleBackgroundColor = value.ifTrue(Colors.black_01, Colors.black_03)
     var backgroundColor = value.ifTrue(Colors.green_03, Colors.black_07)
@@ -32,27 +35,35 @@ fun Switch(
     }
 
     Box(
-        modifier = Modifier.then(
-            Modifier.width(38.dp).height(20.dp).border(
-                0.dp, Color.Unspecified,
-                RoundedCornerShape(20.dp)
-            ).background(backgroundColor, RoundedCornerShape(20.dp)).clip(RoundedCornerShape(20.dp))
-                .clickable(
-                    enabled = !disabled,
-                    onClick = { onChange(!value) }
-                )
-                .padding(horizontal = Spacing.XS)
-        ),
-        contentAlignment = value.ifTrue(Alignment.CenterEnd, Alignment.CenterStart)
+        modifier = Modifier.setAutomationId( accessibilityId ?: "toggle_${title ?: "unknown"}_${value}")
     ) {
         Box(
-            modifier = Modifier.size(14.dp)
-                .border(0.dp, Color.Unspecified, RoundedCornerShape(percent = 100))
-                .background(circleBackgroundColor, RoundedCornerShape(percent = 100)),
-            contentAlignment = Alignment.Center
-        )
-        {
-            Box(Modifier.size(6.dp).background(backgroundColor, RoundedCornerShape(percent = 100)))
+            modifier = Modifier.then(
+                Modifier.width(38.dp).height(20.dp).border(
+                    0.dp, Color.Unspecified,
+                    RoundedCornerShape(20.dp)
+                ).background(backgroundColor, RoundedCornerShape(20.dp))
+                    .clip(RoundedCornerShape(20.dp))
+                    .clickable(
+                        enabled = !disabled,
+                        onClick = { onChange(!value) }
+                    )
+                    .padding(horizontal = Spacing.XS)
+            ),
+            contentAlignment = value.ifTrue(Alignment.CenterEnd, Alignment.CenterStart)
+        ) {
+            Box(
+                modifier = Modifier.size(14.dp)
+                    .border(0.dp, Color.Unspecified, RoundedCornerShape(percent = 100))
+                    .background(circleBackgroundColor, RoundedCornerShape(percent = 100)),
+                contentAlignment = Alignment.Center
+            )
+            {
+                Box(
+                    Modifier.size(6.dp)
+                        .background(backgroundColor, RoundedCornerShape(percent = 100))
+                )
+            }
         }
     }
 }

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

@@ -8,6 +8,7 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.sp
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Typography
@@ -27,6 +28,9 @@ fun Text(
     textDecoration: TextDecoration? = null,
     onTextLayout: ((TextLayoutResult) -> Unit)? = null,
     fontFamily: String = "SFProText",
+    minLines: Int = 1,
+    letterSpacing: TextUnit = TextUnit.Unspecified,
+    softWrap: Boolean = true,
     accessibilityId: String? = null
 ) {
     val fontSize = scaleSize(style.fontSize.value).sp
@@ -41,8 +45,11 @@ fun Text(
         fontSize = fontSize,
         fontFamily = font,
         maxLines = maxLines,
+        softWrap = softWrap,
+        letterSpacing = letterSpacing,
+        minLines = minLines,
         textDecoration = textDecoration,
         onTextLayout = onTextLayout,
         overflow = overflow
     )
-}
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt

@@ -2,7 +2,6 @@ package vn.momo.kits.const
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
-import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
@@ -13,31 +12,17 @@ import org.jetbrains.compose.resources.FontResource
 import org.jetbrains.compose.resources.InternalResourceApi
 import org.jetbrains.compose.resources.ResourceItem
 import vn.momo.kits.platform.getScreenDimensions
-import kotlin.math.min
 
 const val DEFAULT_SCREEN_SIZE = 375f
-const val MAX_FONT_SCALE = 1.2f
-const val MAX_DEVICE_SCALE = 5
 
 @Composable
 fun scaleSize(size: Float): Float {
     val deviceWidth = getScreenDimensions().width
-    val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
-
-    val density = LocalDensity.current
-    val fontScale = density.fontScale
-
-    var fontSize = size / fontScale //To ignore OS scale
-
-    if (deviceScale > 1) {
-        fontSize = min(deviceScale * fontSize, fontSize + MAX_DEVICE_SCALE)
+    val scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE
+    if (scaleRate > 1) {
+        return if ((scaleRate * size) > (size + 5)) size + 5 else scaleRate * size
     }
-
-    if (fontScale > 1) {
-        fontSize = min(fontScale * fontSize, fontSize * MAX_FONT_SCALE)
-    }
-
-    return fontSize
+    return size
 }
 
 @OptIn(InternalResourceApi::class)
@@ -61,15 +46,15 @@ fun getFont(font: String): FontFamily {
 fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
     val key = "$fontFamily-${fontWeight?.weight}"
     val fontMap = mapOf(
-        "SFProText-100" to "sfprotext_thin.otf",
-        "SFProText-200" to "sfprotext_ultralight.otf",
+        "SFProText-100" to "sfprotext_thin.ttf",
+        "SFProText-200" to "sfprotext_ultralight.ttf",
         "SFProText-300" to "sfprotext_light.ttf",
         "SFProText-400" to "sfprotext_regular.ttf",
         "SFProText-500" to "sfprotext_medium.ttf",
         "SFProText-600" to "sfprotext_semibold.ttf",
         "SFProText-700" to "sfprotext_bold.ttf",
         "SFProText-800" to "sfprotext_heavy.ttf",
-        "SFProText-900" to "sfprotext_black.otf",
+        "SFProText-900" to "sfprotext_black.ttf",
 
         "MoMoSignature-100" to "momosignature.otf",
         "MoMoSignature-200" to "momosignature.otf",

package/ios/Application/Screen.swift

@@ -88,7 +88,8 @@ public struct Screen<Content: View>: View {
             let screenHeight = height + topInset + bottomInset
 
             ZStack {
-                (backgroundColor ?? Color.white).edgesIgnoringSafeArea(.all)
+                (backgroundColor ?? Color.white)
+                    .edgesIgnoringSafeArea(.top)
 
                 VStack(spacing: 0) {
                     ZStack(alignment: .top) {
@@ -184,6 +185,8 @@ struct Footer: View {
         VStack {
             footerView
         }
+        .padding(.vertical, Spacing.S)
+        .padding(.horizontal, Spacing.M)
         .padding(.bottom, keyboardSize)
         .background(Colors.black01)
     }

package/ios/Button/Button.swift

@@ -42,7 +42,7 @@ public struct Button: View {
         SwiftUI.Button(action: action) {
             HStack {
                 iconLeft
-                renderTitle(title: title, type: type, size: size)
+                renderTitle(title: title, type: type, size: size).lineLimit(1).truncationMode(.tail)
                 iconRight
             }
             .buttonSize(size)
@@ -123,15 +123,15 @@ private extension View {
         case .large:
             return self
                 .frame(maxWidth: .infinity, minHeight: 48, maxHeight: 48)
-                .padding([.leading, .trailing], Spacing.XS)
+                .padding([.leading, .trailing], Spacing.L)
         case .medium:
             return self
                 .frame(minWidth: 80, maxWidth: .infinity, minHeight: 36, maxHeight: 36)
-                .padding([.leading, .trailing], Spacing.XS)
+                .padding([.leading, .trailing], Spacing.M)
         case .small:
             return self
                 .frame(minWidth: 56, maxWidth: 76, minHeight: 28, maxHeight: 28)
-                .padding([.leading, .trailing], Spacing.XS)
+                .padding([.leading, .trailing], Spacing.S)
         }
     }
 }

package/ios/Popup/PopupDisplay.swift

@@ -21,7 +21,7 @@ public enum PopupButtonType {
 public struct PopupDisplay: View {
     // MARK: Lifecycle
 
-    public init(isPresented: Binding<Bool>, title: String = "", description: String = "", url: String = "", buttonDirection: PopupButtonDirection = .column, buttonType: PopupButtonType = .button, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, errorCode: String = "") {
+    public init(isPresented: Binding<Bool>, title: String = "", description: String = "", url: String = "", buttonDirection: PopupButtonDirection = .column, buttonType: PopupButtonType = .button, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, errorCode: String = "", isShowCloseIcon: Bool = true) {
         self._isPresented = isPresented
         self.title = title
         self.description = description
@@ -34,6 +34,7 @@ public struct PopupDisplay: View {
         self.closeButtonTitle = closeButtonTitle
         self.actionButtonTitle = actionButtonTitle
         self.errorCode = errorCode
+        self.isShowCloseIcon = isShowCloseIcon
     }
 
     // MARK: Public
@@ -48,17 +49,19 @@ public struct PopupDisplay: View {
 
         VStack(spacing: 12) {
             ZStack(alignment: .topTrailing) {
-                SwiftUI.Button(action: onClose) {
-                    Image(systemName: "xmark.circle.fill")
-                        .resizable()
-                        .frame(width: 22, height: 22)
-                        .overlay(RoundedRectangle(cornerRadius: Radius.L).stroke(Colors.black01, lineWidth: 2))
-                }.foregroundColor(Colors.black20)
-                    .background(Colors.black01.cornerRadius(15))
-                    .padding(.trailing, -11)
-                    .padding(.top, -11)
-                    .zIndex(1)
-                    .accessibility(identifier: "ic_popup_close")
+                if(isShowCloseIcon) {
+                    SwiftUI.Button(action: onClose) {
+                        Image(systemName: "xmark.circle.fill")
+                            .resizable()
+                            .frame(width: 22, height: 22)
+                            .overlay(RoundedRectangle(cornerRadius: Radius.L).stroke(Colors.black01, lineWidth: 2))
+                    }.foregroundColor(Colors.black20)
+                        .background(Colors.black01.cornerRadius(15))
+                        .padding(.trailing, -11)
+                        .padding(.top, -11)
+                        .zIndex(1)
+                        .accessibility(identifier: "ic_popup_close")
+                }
 
                 VStack {
                     if(!url.isEmpty) {
@@ -88,8 +91,7 @@ public struct PopupDisplay: View {
                                 ScrollView(showsIndicators: false) {
                                     Text(description)
                                         .font(.paragraph)
-                                        .foregroundColor(.black)
-                                        .opacity(0.6)
+                                        .foregroundColor(Colors.black17)
                                         .multilineTextAlignment(.leading)
                                         .background(GeometryReader { geo in
                                             Color.clear
@@ -102,8 +104,7 @@ public struct PopupDisplay: View {
                             } else {
                                 Text(description)
                                     .font(.paragraph)
-                                    .foregroundColor(.black)
-                                    .opacity(0.6)
+                                    .foregroundColor(Colors.black17)
                                     .multilineTextAlignment(.leading)
                                     .background(GeometryReader { geo in
                                         Color.clear
@@ -116,7 +117,7 @@ public struct PopupDisplay: View {
                         }.padding(.bottom, 8)
 
                         if(!errorCode.isEmpty) {
-                            Text(errorCode)
+                            Text("Mã lỗi: " + errorCode)
                                 .foregroundColor(Colors.black12)
                                 .font(.description_xs_regular)
                                 .lineLimit(1)
@@ -164,6 +165,7 @@ public struct PopupDisplay: View {
     var actionButtonTitle: String
     var closeButtonTitle: String
     var errorCode: String
+    var isShowCloseIcon: Bool
 
     var RowTextButtons: some View {
         HStack {
@@ -201,7 +203,9 @@ public struct PopupDisplay: View {
 
     var RowButtons: some View {
         HStack {
-            Button(title: closeButtonTitle, action: onPressCloseButton, type: .secondary, size: .medium).accessibility(identifier: "btn_popup_cancel")
+            if(!closeButtonTitle.isEmpty) {
+                Button(title: closeButtonTitle, action: onPressCloseButton, type: .secondary, size: .medium).accessibility(identifier: "btn_popup_cancel")
+            }
             Button(title: actionButtonTitle, action: onPressAction, size: .medium)
                 .accessibility(identifier: "btn_popup_allow")
         }
@@ -217,8 +221,9 @@ public struct PopupDisplay: View {
                 action: onPressAction,
                 size: .medium
             ).accessibility(identifier: "btn_popup_allow")
-            Button(title: closeButtonTitle, action: onPressCloseButton, type: .secondary, size: .medium).accessibility(identifier: "btn_popup_cancel")
-
+            if(!closeButtonTitle.isEmpty) {
+                Button(title: closeButtonTitle, action: onPressCloseButton, type: .secondary, size: .medium).accessibility(identifier: "btn_popup_cancel")
+            }
         }
         .frame(maxWidth: .infinity, alignment: .trailing)
         .padding(.horizontal, 24)

package/ios/Popup/PopupPromotion.swift

@@ -19,22 +19,26 @@ public struct PopupPromotion: View {
 
     public var body: some View {
         VStack(spacing: 8) {
-            WebImage(url: URL(string: imageUrl)!)
-                .resizable()
-                .placeholder {
-                    Color.gray
-                        .aspectRatio(0.72, contentMode: .fit)
-                        .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
-                        .clipped()
-                }
-                .scaledToFill()
-                .aspectRatio(0.72, contentMode: .fit)
-                .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2, alignment: .center)
-                .clipped()
-                .onTapGesture {
-                    onAction?()
-                }
-
+            if(imageUrl.isEmpty) {
+                Icon(source: "media_fail", size: UIScreen.main.bounds.width - Spacing.XL * 2)
+            }
+            else {
+                WebImage(url: URL(string: imageUrl)!)
+                    .resizable()
+                    .placeholder {
+                        Color.gray
+                            .aspectRatio(0.72, contentMode: .fit)
+                            .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
+                            .clipped()
+                    }
+                    .scaledToFill()
+                    .aspectRatio(0.72, contentMode: .fit)
+                    .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2, alignment: .center)
+                    .clipped()
+                    .onTapGesture {
+                        onAction?()
+                    }
+            }
             buildCloseIcon()
         }
         .accessibility(identifier: "popup_promotion")

package/ios/Typography/Text.swift

@@ -0,0 +1,113 @@
+import SwiftUI
+
+public enum TypographyStyle {
+    case headlineDefaultBold
+    case headerMBold
+    case headerDefaultBold
+    case headerSSemibold
+    case headerXsSemibold
+    case bodyDefaultRegular
+    case bodyDefaultRegularStrikethrough
+    case descriptionDefaultRegular
+    case descriptionDefaultRegularStrikethrough
+    case descriptionXsRegular
+    case descriptionXsRegularStrikethrough
+    case labelDefaultMedium
+    case labelSMedium
+    case labelXsMedium
+    case actionDefaultBold
+    case actionSBold
+    case actionXsBold
+    case actionXxsBold
+}
+
+public extension TypographyStyle {
+    var fontSize: CGFloat {
+        switch self {
+        case .headlineDefaultBold: return 24
+        case .headerMBold: return 18
+        case .headerDefaultBold: return 16
+        case .headerSSemibold: return 14
+        case .headerXsSemibold: return 12
+        case .bodyDefaultRegular, .bodyDefaultRegularStrikethrough: return 14
+        case .descriptionDefaultRegular, .descriptionDefaultRegularStrikethrough: return 12
+        case .descriptionXsRegular, .descriptionXsRegularStrikethrough: return 10
+        case .labelDefaultMedium: return 14
+        case .labelSMedium: return 12
+        case .labelXsMedium: return 10
+        case .actionDefaultBold: return 16
+        case .actionSBold: return 14
+        case .actionXsBold: return 12
+        case .actionXxsBold: return 10
+        }
+    }
+    var lineHeight: CGFloat {
+        switch self {
+        case .headlineDefaultBold: return 34
+        case .headerMBold: return 26
+        case .headerDefaultBold: return 22
+        case .headerSSemibold: return 20
+        case .headerXsSemibold: return 18
+        case .bodyDefaultRegular, .bodyDefaultRegularStrikethrough: return 20
+        case .descriptionDefaultRegular, .descriptionDefaultRegularStrikethrough: return 18
+        case .descriptionXsRegular, .descriptionXsRegularStrikethrough: return 14
+        case .labelDefaultMedium: return 20
+        case .labelSMedium: return 18
+        case .labelXsMedium: return 14
+        case .actionDefaultBold: return 22
+        case .actionSBold: return 20
+        case .actionXsBold: return 18
+        case .actionXxsBold: return 14
+        }
+    }
+    var fontWeight: Font.Weight {
+        switch self {
+        case .headlineDefaultBold, .headerMBold, .headerDefaultBold,
+             .actionDefaultBold, .actionSBold, .actionXsBold, .actionXxsBold:
+            return .bold
+        case .headerSSemibold, .headerXsSemibold:
+            return .semibold
+        case .bodyDefaultRegular, .bodyDefaultRegularStrikethrough,
+             .descriptionDefaultRegular, .descriptionDefaultRegularStrikethrough,
+             .descriptionXsRegular, .descriptionXsRegularStrikethrough:
+            return .regular
+        case .labelDefaultMedium, .labelSMedium, .labelXsMedium:
+            return .medium
+        }
+    }
+    var isStrikethrough: Bool {
+        switch self {
+        case .bodyDefaultRegularStrikethrough,
+             .descriptionDefaultRegularStrikethrough,
+             .descriptionXsRegularStrikethrough:
+            return true
+        default:
+            return false
+        }
+    }
+}
+
+public struct MomoText: View {
+    private let content: String
+    private let style: TypographyStyle
+    private let color: Color
+
+    public init(
+        _ content: String,
+        style: TypographyStyle = .bodyDefaultRegular,
+        color: Color = Colors.text
+    ) {
+        self.content = content
+        self.style = style
+        self.color = color
+    }
+
+    public var body: some View {
+        var text = SwiftUI.Text(content)
+            .font(.system(size: style.fontSize, weight: style.fontWeight))
+            .foregroundColor(color)
+            .lineSpacing(style.lineHeight - style.fontSize)
+
+        return text
+    }
+} 

package/ios/Typography/Typography.swift

@@ -2,28 +2,7 @@ import SwiftUI
 
 public extension Font {
     static func appFont(size: CGFloat) -> Font {
-        let defaultScreenSize: CGFloat = 375
-        let maxFontScale: CGFloat = 1.2
-        let maxDeviceScale: CGFloat = 5
-        
-        let deviceWidth = UIScreen.main.bounds.width
-        let deviceScale = deviceWidth / defaultScreenSize
-        
-        let defaultFont = UIFont.systemFont(ofSize: UIFont.labelFontSize)
-        let scaledFont = UIFontMetrics.default.scaledFont(for: defaultFont)
-        let fontScale = scaledFont.pointSize / defaultFont.pointSize
-
-        var fontSize = size
-
-        if deviceScale > 1 {
-            fontSize = min(fontSize * deviceScale, fontSize + maxDeviceScale)
-        }
-
-        if fontScale > 1 {
-            fontSize = min(fontSize * fontScale, fontSize * maxFontScale)
-        }
-
-        return Font.system(size: fontSize)
+        return Font.system(size: size)
     }
     
     // New supported typography styles

package/local.properties

@@ -4,5 +4,5 @@
 # Location of the SDK. This is only used by Gradle.
 # For customization when using a Version Control System, please read the
 # header note.
-#Tue Apr 08 11:13:31 ICT 2025
-sdk.dir=/Users/sonnguyen/Library/Android/sdk
+#Wed Aug 21 14:20:12 ICT 2024
+sdk.dir=/Users/huynhdung/Library/Android/sdk

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.118.1-beta.2",
+  "version": "0.120.0-beta.3",
   "private": false,
   "dependencies": {},
+  "devDependencies": {},
   "license": "MoMo"
 }