@momo-kits/native-kits 0.167.1-duo.2-debug → 0.167.1-duo.20-debug

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

@@ -17,31 +17,30 @@ import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.*
 import vn.momo.kits.modifier.conditional
 
+private val badgePrimaryColors = listOf(
+    Color(0xFFF0F0F0),
+    Color(0xFFEB2F96),
+    Color(0xFF962AF0),
+    Color(0xFF4E4BFF),
+    Color(0xFF007AFF),
+    Color(0xFF13C2C2),
+    Color(0xFF34C759),
+    Color(0xFFA0D911),
+    Color(0xFFFFCC00),
+    Color(0xFFFA8C16),
+    Color(0xFFFA541C),
+    Color(0xFFF5222D)
+)
+
+private val badgeNumberRegex = "^\\d+$".toRegex()
 
 @Composable
 fun Badge(label: String = "Label", backgroundColor: Color? = null, modifier: Modifier = Modifier) {
-    val primaryColors = listOf(
-        Color(0xFFF0F0F0),
-        Color(0xFFEB2F96),
-        Color(0xFF962AF0),
-        Color(0xFF4E4BFF),
-        Color(0xFF007AFF),
-        Color(0xFF13C2C2),
-        Color(0xFF34C759),
-        Color(0xFFA0D911),
-        Color(0xFFFFCC00),
-        Color(0xFFFA8C16),
-        Color(0xFFFA541C),
-        Color(0xFFF5222D)
-    )
-
-    fun isNumber(label: String): Boolean {
-        val numberRegex = "^\\d+$".toRegex()
-        return numberRegex.matches(label)
-    }
+    fun isNumber(label: String): Boolean = badgeNumberRegex.matches(label)
 
     fun formatTitle(label: String): String {
-        if (isNumber(label) && label.toInt() > 99) {
+        // Digits too long for Int are well over 99; toInt() would throw.
+        if (isNumber(label) && (label.toIntOrNull() ?: Int.MAX_VALUE) > 99) {
             return "99+"
         }
         return label
@@ -54,7 +53,7 @@ fun Badge(label: String = "Label", backgroundColor: Color? = null, modifier: Mod
             AppTheme.current.colors.warning.primary
         }
 
-    if (backgroundColor != null && primaryColors.contains(backgroundColor)) {
+    if (backgroundColor != null && badgePrimaryColors.contains(backgroundColor)) {
         badgeColor = backgroundColor
     }
     val scaleSize = scaleSize(16f)

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

@@ -146,7 +146,8 @@ fun RenderIcon(
 ) {
     val iconSize = remember(size) { getIconSize(size) }
     val margin = remember(size) { getIconSpace(size) }
-    val color = if (useTintColor) textColor else Color.Unspecified
+    // null = untinted; Color.Unspecified would tint with a transparent color and hide the icon.
+    val color = if (useTintColor) textColor else null
 
     val modifier = Modifier.padding(
         start = if (isIconLeft) 0.dp else margin,

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

@@ -43,6 +43,8 @@ fun Carousel(
     val pagerState = rememberPagerState(initialPage = startPage) { virtualPageCount }
 
     val realIndex: (Int) -> Int = { page -> page % itemCount }
+    val currentOnSnapToItem by rememberUpdatedState(onSnapToItem)
+    val currentOnScrollIndexChanged by rememberUpdatedState(onScrollIndexChanged)
 
     var isUserScrolling by remember { mutableStateOf(false) }
 
@@ -70,8 +72,8 @@ fun Carousel(
     LaunchedEffect(pagerState) {
         snapshotFlow { pagerState.currentPage }.collect { page ->
             val real = realIndex(page)
-            onSnapToItem(real)
-            onScrollIndexChanged(real)
+            currentOnSnapToItem(real)
+            currentOnScrollIndexChanged(real)
         }
     }
 

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

@@ -77,7 +77,7 @@ fun Chip(
         horizontalArrangement = Arrangement.spacedBy(iconSpacing.dp)
     ) {
         if (iconLeft != null) {
-            Icon(source = iconLeft, size = dims.iconSize.dp, color = leftTint)
+            Icon(source = iconLeft, size = iconSize.dp, color = leftTint)
         }
 
         if (!label.isNullOrEmpty()) {

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

@@ -19,6 +19,7 @@ import coil3.request.ImageRequest
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
+import vn.momo.kits.gifimage.GifImage
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.utils.Icons
 import vn.momo.kits.utils.noThemeIcons
@@ -41,7 +42,7 @@ fun Icon(
         }
     }
 
-    val iconColor = remember(color) {
+    val iconColor = remember(source, color) {
         if (noThemeIcons.contains(source)) null else color
     }
 
@@ -59,18 +60,27 @@ fun Icon(
             }
             .semantics { contentDescription = contentDesc }
     ) {
-        AsyncImage(
-            modifier = Modifier.matchParentSize(),
-            model = ImageRequest.Builder(context)
-                .data(iconUrl)
-                .size(
-                    coil3.size.Dimension.Undefined,
-                    coil3.size.Dimension.Undefined
-                )
-                .build(),
-            contentDescription = null,
-            contentScale = ContentScale.Fit,
-            colorFilter = colorFilter,
-        )
+        if (isGifUrl(iconUrl)) {
+            GifImage(
+                modifier = Modifier.matchParentSize(),
+                url = iconUrl,
+                contentDescription = null,
+                contentScale = ContentScale.Fit,
+            )
+        } else {
+            AsyncImage(
+                modifier = Modifier.matchParentSize(),
+                model = ImageRequest.Builder(context)
+                    .data(iconUrl)
+                    .size(
+                        coil3.size.Dimension.Undefined,
+                        coil3.size.Dimension.Undefined
+                    )
+                    .build(),
+                contentDescription = null,
+                contentScale = ContentScale.Fit,
+                colorFilter = colorFilter,
+            )
+        }
     }
 }

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

@@ -77,7 +77,7 @@ private fun getHostFromUrl(url: String): String? {
     }
 }
 
-private fun isGifUrl(url: String): Boolean {
+internal fun isGifUrl(url: String): Boolean {
     val path = url.substringBefore('#').substringBefore('?')
     return path.endsWith(".gif", ignoreCase = true)
 }

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

@@ -90,7 +90,7 @@ fun Information(
             width = 0.5.dp,
             shape = RoundedCornerShape(Radius.S),
             color = borderColor
-        ).background(color = backgroundColor)
+        ).background(color = backgroundColor, shape = RoundedCornerShape(Radius.S))
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }

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

@@ -16,6 +16,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.TextStyle
@@ -214,7 +215,7 @@ fun Input(
 
     // Memoized color calculations
     val theme = AppTheme.current
-    val colors = remember(disabled, theme) {
+    val colors = remember(disabled, theme, iconColor) {
         if (disabled) {
             val disabledColor = theme.colors.text.disable
             Triple(disabledColor, disabledColor, disabledColor)
@@ -241,8 +242,9 @@ fun Input(
     val lineHeight = 24.sp
     val scaleFontSize = scaleSize(fontSize)
     val scaleLineHeight = scaleSize(lineHeight)
+    val scaledHeight = scaleSize(size.values.height)
 
-    val textStyle = remember(textColor, fontWeight) {
+    val textStyle = remember(textColor, fontWeight, scaleFontSize, scaleLineHeight) {
         TextStyle(
             color = textColor,
             fontSize = scaleFontSize,
@@ -268,7 +270,7 @@ fun Input(
 
     val passwordFontFamily = getFontFamily(AppTheme.current.font, FontWeight.Normal)
     val passwordFontSize = scaleSize(24.sp)
-    val visualTransformation = remember(secureTextEntry, inputState.passHidden, passwordFontFamily) {
+    val visualTransformation = remember(secureTextEntry, inputState.passHidden, passwordFontFamily, passwordFontSize) {
         if (secureTextEntry && !inputState.passHidden)
             PasswordVisualTransformation(fontFamily = passwordFontFamily, fontSize = passwordFontSize)
         else
@@ -287,8 +289,9 @@ fun Input(
             textStyle = textStyle,
             visualTransformation = visualTransformation,
             keyboardOptions = keyboardOptionsConfig,
+            cursorBrush = SolidColor(theme.colors.primary),
             modifier = inputModifier
-                .height(scaleSize(size.values.height.value).dp)
+                .height(scaledHeight)
                 .onFocusChanged { focusState ->
                     val wasFocused = inputState.isFocused
                     inputState = inputState.copy(
@@ -313,7 +316,7 @@ fun Input(
                     floatingIcon = floatingIcon,
                     titleColor = floatingTitleColor,
                     iconColor = floatingIconTintColor,
-                    offsetY = -size.values.height / 2,
+                    offsetY = -scaledHeight / 2,
                     required = required,
                 )
 
@@ -359,7 +362,7 @@ fun Input(
                         }
 
                         // Clear button
-                        if (inputState.isFocused && text.value.isNotEmpty()) {
+                        if (!readOnly && inputState.isFocused && text.value.isNotEmpty()) {
                             Row(Modifier.padding(horizontal = Spacing.XS)) {
                                 Icon(
                                     source = "24_navigation_close_circle_full",

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

@@ -27,6 +27,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
@@ -43,7 +44,9 @@ import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFontFamily
+import vn.momo.kits.const.scaleSize
 import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
 
 private const val MONEY_CURRENCY = "đ"
 
@@ -134,7 +137,6 @@ fun InputMoney(
     val current = if (digitsOf(field.text) == digits) field else moneyDisplay(digits).let {
         TextFieldValue(it, TextRange(caretFromDigitIndex(it, digits.length)))
     }
-    var isBlurred = false
     val (textColor, placeholderColor, iconTintColor, floatingTitleColor, floatingIconTintColor) =
         getInputColors(disabled, iconColor, floatingValueColor, floatingIconColor)
 
@@ -153,19 +155,16 @@ fun InputMoney(
             value = current,
             textStyle = TextStyle(
                 color = textColor,
-                fontSize = 20.sp,
-                lineHeight = 24.sp,
+                fontSize = scaleSize(20.sp),
+                lineHeight = scaleSize(24.sp),
                 fontWeight = fontWeight.value,
                 fontFamily = getFontFamily(AppTheme.current.font, fontWeight.value)
             ),
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = keyboardType),
+            cursorBrush = SolidColor(AppTheme.current.colors.primary),
             modifier = Modifier.height(size.values.height).onFocusChanged {
+                if (it.isFocused) onFocus() else if (isFocused) onBlur()
                 isFocused = it.isFocused
-                if (it.isFocused) {
-                    onFocus()
-                }
-                if (!it.isFocused && isBlurred) onBlur()
-                if (it.isFocused && !isBlurred) isBlurred = true
             },
             onValueChange = { value ->
                 if (value.text == current.text) {
@@ -223,7 +222,7 @@ fun InputMoney(
                                 color = leadingIconColor
                             )
                         }
-                        Box(Modifier.weight(9f).padding(start = 0.dp)) {
+                        Box(Modifier.weight(9f), contentAlignment = Alignment.CenterStart) {
                             if (text.value.isEmpty()) {
                                 Text(
                                     text = placeholder,
@@ -234,9 +233,9 @@ fun InputMoney(
                                     ),
                                     color = placeholderColor
                                 )
-                            } else {
-                                innerTextField()
                             }
+                            // Composed even when empty so the caret shows over the placeholder.
+                            innerTextField()
                         }
                         if (isFocused && text.value.isNotEmpty()) {
                             Row {
@@ -252,7 +251,7 @@ fun InputMoney(
                                         },
                                         interactionSource = remember { MutableInteractionSource() },
                                         indication = null
-                                    )
+                                    ).setAutomationId("ic_clear")
                                 )
                             }
                         }

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

@@ -101,7 +101,6 @@ fun InputOTP(
 ) {
     val maxLength = length ?: 10
     var isFocused by remember { mutableStateOf(false) }
-    var isBlurred = false
 
     val handleChangeText: (String) -> Unit = { text ->
         if (text.length <= maxLength &&
@@ -127,13 +126,9 @@ 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 {
+                if (it.isFocused) onFocus() else if (isFocused) onBlur()
                 isFocused = it.isFocused
-                if (it.isFocused) {
-                    onFocus()
-                }
-                if (!it.isFocused && isBlurred) onBlur()
-                if (it.isFocused && !isBlurred) isBlurred = true
             },
             decorationBox = { innerTextField ->
                 Box {
@@ -207,11 +202,11 @@ fun InputOTP(
                                             style = Typography.headerDefaultBold,
                                             text = value[i].toString()
                                         )
-                                        if (i != value.length - 1 || (isFocused && value.length != MAX_LENGTH)) {
+                                        if (i != value.length - 1 || (isFocused && value.length != maxLength)) {
                                             Spacer(Modifier.width(Spacing.L))
                                         }
                                     }
-                                    if (isFocused && value.length != MAX_LENGTH) OTPCaret()
+                                    if (isFocused && value.length != maxLength) OTPCaret()
                                 }
                             }
                         }

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

@@ -89,7 +89,7 @@ fun InputPhoneNumber(
 
     // Memoized color calculations
     val theme = AppTheme.current
-    val colors = remember( theme) {
+    val colors = remember(theme, iconColor) {
             Triple(
                 theme.colors.text.default,      // textColor
                 theme.colors.text.hint,         // placeholderColor
@@ -173,7 +173,7 @@ fun InputPhoneNumber(
                             Box(
                                 modifier = Modifier.width(1.dp)
                                     .height(size.values.dividerHeight)
-                                    .background(Colors.black_04)
+                                    .background(theme.colors.border.default)
                             )
                         }
 

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

@@ -29,6 +29,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.graphics.takeOrElse
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
@@ -99,7 +100,8 @@ data class InputSearchProps(
     val loading: Boolean = false,
     val fontWeight: InputFontWeight = InputFontWeight.REGULAR,
     val keyboardType: KeyboardType = KeyboardType.Text,
-    val backgroundColor: Color = Colors.black_01,
+    // Unspecified resolves to the theme surface (white in the light theme).
+    val backgroundColor: Color = Color.Unspecified,
     val clearCondition: (() -> Boolean)? = null,
     val keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
     val keyboardActions: KeyboardActions = KeyboardActions.Default,
@@ -118,7 +120,6 @@ fun InputSearch(
     ),
 ) {
     var isFocused by remember { mutableStateOf(false) }
-    var isBlurred = false
     val disabledColor = AppTheme.current.colors.text.disable
     var textColor = AppTheme.current.colors.text.default
     var placeholderColor = AppTheme.current.colors.text.hint
@@ -134,7 +135,7 @@ fun InputSearch(
 
     val fontFamily = getFontFamily(AppTheme.current.font, inputSearchProps.fontWeight.value)
 
-    val textStyle = remember(textColor, inputSearchProps.fontWeight.value, fontFamily) {
+    val textStyle = remember(textColor, inputSearchProps.fontWeight.value, fontFamily, scaleFontSize) {
         TextStyle(
             color = textColor,
             fontSize = scaleFontSize,
@@ -167,13 +168,13 @@ fun InputSearch(
             textStyle = textStyle,
             keyboardOptions = inputSearchProps.keyboardOptions.copy(keyboardType = inputSearchProps.keyboardType),
             keyboardActions = inputSearchProps.keyboardActions,
+            cursorBrush = SolidColor(AppTheme.current.colors.primary),
+            // Transitions only: onFocusChanged also runs once on attach with isFocused = false.
             modifier = inputSearchProps.modifier.weight(1f).fillMaxHeight().onFocusChanged {
+                val wasFocused = isFocused
                 isFocused = it.isFocused
-                if (it.isFocused) {
-                    inputSearchProps.onFocus()
-                }
-                if (!it.isFocused && isBlurred) inputSearchProps.onBlur()
-                if (it.isFocused && !isBlurred) isBlurred = true
+                if (it.isFocused && !wasFocused) inputSearchProps.onFocus()
+                if (!it.isFocused && wasFocused) inputSearchProps.onBlur()
             },
             onValueChange = inputSearchProps.onChangeText,
             decorationBox = { innerTextField ->
@@ -186,7 +187,7 @@ fun InputSearch(
                             )
                         ).fillMaxHeight()
                             .background(
-                                inputSearchProps.backgroundColor,
+                                inputSearchProps.backgroundColor.takeOrElse { AppTheme.current.colors.background.surface },
                                 RoundedCornerShape(Radius.XL)
                             ),
                         horizontalArrangement = Arrangement.Start,

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

@@ -13,6 +13,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.Dp
@@ -56,7 +57,6 @@ fun InputTextArea(
     keyboardType: KeyboardType = KeyboardType.Text,
 ) {
     var isFocused by remember { mutableStateOf(false) }
-    var isBlurred = false
     val (textColor, placeholderColor, iconTintColor, floatingTitleColor, floatingIconTintColor) =
         getInputColors(disabled, iconColor, floatingValueColor, floatingIconColor)
 
@@ -81,13 +81,13 @@ fun InputTextArea(
                 fontFamily = getFontFamily(AppTheme.current.font, fontWeight.value)
             ),
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = keyboardType),
+            cursorBrush = SolidColor(AppTheme.current.colors.primary),
+            // Transitions only: onFocusChanged also runs once on attach with isFocused = false.
             modifier = Modifier.height(scaleHeight).onFocusChanged {
+                val wasFocused = isFocused
                 isFocused = it.isFocused
-                if (it.isFocused) {
-                    onFocus()
-                }
-                if (!it.isFocused && isBlurred) onBlur()
-                if (it.isFocused && !isBlurred) isBlurred = true
+                if (it.isFocused && !wasFocused) onFocus()
+                if (!it.isFocused && wasFocused) onBlur()
             },
             onValueChange = {
                 if (it.length <= maxLength) {

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

@@ -4,6 +4,8 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -20,7 +22,7 @@ import vn.momo.kits.application.LocalLocalize
 import vn.momo.kits.const.*
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.platform.getScreenDimensions
+import vn.momo.kits.layout.getScreenLayout
 import kotlin.math.min
 
 data class PopupAction(
@@ -34,9 +36,21 @@ enum class PopupActionDirection {
     AUTO
 }
 
-// Portrait width in landscape too, so aspect-ratio images don't push popups past the screen height.
+// Width of a system alert on the iPhone Duo inner display, in both orientations (RN Popup/utils.ts).
+private val DUO_POPUP_MAX_WIDTH = 440.dp
+
+// Card width cap plus the popup's own side padding; unbounded off iPhone Duo.
+@Composable
+internal fun popupMaxWidth(horizontalPadding: Dp): Dp =
+    if (getScreenLayout().isIPhoneDuoDevice) DUO_POPUP_MAX_WIDTH + horizontalPadding * 2 else Dp.Unspecified
+
+// Room left for a popup on iPhone Duo, where landscape is too short for it; null elsewhere.
 @Composable
-internal fun popupMaxWidth(): Dp = getScreenDimensions().let { minOf(it.width, it.height) }.dp
+internal fun popupMaxHeight(): Dp? {
+    val layout = getScreenLayout()
+    if (!layout.isIPhoneDuoDevice) return null
+    return layout.height - layout.duoTopInset - layout.insetBottom - Spacing.XL * 2
+}
 
 private fun heightForLines(
     layout: TextLayoutResult,
@@ -129,12 +143,15 @@ fun PopupNotify(
         callback?.invoke()
     }
 
+    val maxHeight = popupMaxHeight()
+    val bodyScrollState = rememberScrollState()
+
     Box(
         Modifier.setAutomationId("popup_notify"), contentAlignment = Alignment.TopEnd
     ) {
         Column(
             modifier = Modifier
-                .widthIn(max = popupMaxWidth())
+                .widthIn(max = popupMaxWidth(horizontalPadding = 12.dp))
                 .fillMaxWidth()
                 .padding(horizontal = 12.dp)
                 .clip(RoundedCornerShape(Radius.L))
@@ -145,31 +162,41 @@ fun PopupNotify(
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
                 }
+                .conditional(maxHeight != null) {
+                    heightIn(max = maxHeight ?: Dp.Unspecified)
+                }
         ) {
-            if(props.image.isNotEmpty()) {
-                Image(
-                    source = props.image,
-                    modifier = Modifier.fillMaxWidth().aspectRatio(1.777f),
-                    options = Options(alignment = Alignment.Center)
-                )
-            }
+            // scrolls when iPhone Duo landscape is too short; actions stay visible
+            Column(
+                Modifier.conditional(maxHeight != null) {
+                    weight(1f, fill = false).verticalScroll(bodyScrollState)
+                }
+            ) {
+                if(props.image.isNotEmpty()) {
+                    Image(
+                        source = props.image,
+                        modifier = Modifier.fillMaxWidth().aspectRatio(1.777f),
+                        options = Options(alignment = Alignment.Center)
+                    )
+                }
 
-            Column(modifier = Modifier.padding(Spacing.XL)) {
-                Text(
-                    style = Typography.headerDefaultBold,
-                    maxLines = 2,
-                    text = props.title,
-                    modifier = Modifier.setAutomationId("title_popup_permission")
-                )
-                content(Modifier.padding(top = Spacing.S))
-                if (props.error.isNotEmpty()) {
+                Column(modifier = Modifier.padding(Spacing.XL)) {
                     Text(
-                        text = LocalLocalize.current.translate("errorCode") + props.error,
-                        style = Typography.descriptionXsRegular,
-                        color = AppTheme.current.colors.text.hint,
-                        maxLines = 1,
-                        modifier = Modifier.padding(top = Spacing.S)
+                        style = Typography.headerDefaultBold,
+                        maxLines = 2,
+                        text = props.title,
+                        modifier = Modifier.setAutomationId("title_popup_permission")
                     )
+                    content(Modifier.padding(top = Spacing.S))
+                    if (props.error.isNotEmpty()) {
+                        Text(
+                            text = LocalLocalize.current.translate("errorCode") + props.error,
+                            style = Typography.descriptionXsRegular,
+                            color = AppTheme.current.colors.text.hint,
+                            maxLines = 1,
+                            modifier = Modifier.padding(top = Spacing.S)
+                        )
+                    }
                 }
             }
 
@@ -227,7 +254,7 @@ internal fun BuildAction(
     val closeAction = remember { mutableStateOf("button_action") }
     when (buttonDirection) {
         PopupActionDirection.AUTO -> {
-            if (secondary != null && (secondary.title.length > 12 || primary?.title?.length!! > 12)) {
+            if (secondary != null && (secondary.title.length > 12 || (primary?.title?.length ?: 0) > 12)) {
                 RenderColumn(
                     secondary = secondary,
                     onAction = onAction,

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

@@ -22,14 +22,24 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.utils.ifNotNull
 
+private const val ASPECT_RATIO = 0.72f
+private val CLOSE_ROW_HEIGHT = Spacing.S + 40.dp
+
 @Composable
 fun PopupPromotion(
     source: String = "",
     onPress: (() -> Unit) = {},
     onClose: (() -> Unit) = {},
 ) {
+    val maxHeight = popupMaxHeight()
+    var maxWidth = popupMaxWidth(horizontalPadding = Spacing.M)
+    if (maxHeight != null) {
+        // fit the portrait image by height when iPhone Duo leaves too little room
+        maxWidth = minOf(maxWidth, (maxHeight - CLOSE_ROW_HEIGHT) * ASPECT_RATIO + Spacing.M * 2)
+    }
+
     Column(Modifier
-        .widthIn(max = popupMaxWidth())
+        .widthIn(max = maxWidth)
         .padding(horizontal = Spacing.M)
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
@@ -39,7 +49,7 @@ fun PopupPromotion(
             Image(
                 source = source,
                 modifier = Modifier.fillMaxWidth()
-                    .aspectRatio(0.72f)
+                    .aspectRatio(ASPECT_RATIO)
                     .clickable(
                         interactionSource = remember { MutableInteractionSource() },
                         indication = null,