@momo-kits/native-kits 0.155.1-hello.2 → 0.155.1-hello.2-debug

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

@@ -0,0 +1,217 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import vn.momo.kits.application.ApplicationContext
+import vn.momo.kits.application.MiniAppContext.Companion.isShowBaselineDebug
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
+
+enum class TitleType { Card, Section }
+enum class TitleSize { Small, Medium, Large }
+enum class IconAlign { Top, Center, Bottom }
+enum class ButtonSize { Small, Large }
+
+@Composable
+fun Title(
+    title: String,
+    type: TitleType = TitleType.Section,
+    size: TitleSize = TitleSize.Medium,
+    icon: String? = null,
+    iconColor: Color? = null,
+    iconAlign: IconAlign = IconAlign.Top,
+    showRightAction: Boolean = false,
+    showTrailingAction: Boolean = false,
+    badgeLabel: String? = null,
+    buttonTitle: String? = null,
+    buttonSize: ButtonSize = ButtonSize.Small,
+    onPressRightAction: () -> Unit = {},
+    onPressTrailingAction: () -> Unit = {},
+    textOnly: Boolean = false,
+    description: String? = null,
+    modifier: Modifier = Modifier
+) {
+    val theme = AppTheme.current
+    val textStyle: TextStyle = when (type) {
+        TitleType.Card -> when (size) {
+            TitleSize.Small -> TextStyle(fontSize = 14.sp, lineHeight = 20.sp)
+            TitleSize.Medium -> TextStyle(fontSize = 16.sp, lineHeight = 22.sp)
+            TitleSize.Large -> TextStyle(fontSize = 18.sp, lineHeight = 26.sp)
+        }
+
+        TitleType.Section -> when (size) {
+            TitleSize.Small -> TextStyle(
+                fontSize = 16.sp,
+                lineHeight = 24.sp,
+                fontWeight = FontWeight.Bold
+            )
+
+            TitleSize.Medium -> TextStyle(
+                fontSize = 18.sp,
+                lineHeight = 26.sp,
+                fontWeight = FontWeight.Bold
+            )
+
+            TitleSize.Large -> TextStyle(
+                fontSize = 20.sp,
+                lineHeight = 28.sp,
+                fontWeight = FontWeight.Bold
+            )
+        }
+    }
+
+    if (textOnly) {
+        Text(
+            text = title,
+            style = textStyle,
+            modifier = modifier
+        )
+        return
+    }
+
+    val application = ApplicationContext.current
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(IntrinsicSize.Min)
+            .conditional(application.isShowBaselineDebug()) {
+                border(1.dp, Colors.blue_03)
+            }
+            .padding(8.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        icon?.let {
+            Column(
+                modifier = Modifier.fillMaxHeight().padding(end = Spacing.S),
+                verticalArrangement = when (iconAlign) {
+                    IconAlign.Top -> Arrangement.Top
+                    IconAlign.Center -> Arrangement.Center
+                    IconAlign.Bottom -> Arrangement.Bottom
+                },
+            ) {
+                // Icon
+                Icon(
+                    source = it,
+                    color = iconColor ?: theme.colors.text.default,
+                    modifier = Modifier.size(24.dp)
+                )
+            }
+        }
+
+        Column(
+            modifier = Modifier.weight(1f)
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = if (showTrailingAction) Modifier else Modifier.weight(1f),
+                ) {
+                    Text(
+                        text = title,
+                        style = textStyle,
+                        maxLines = if (showTrailingAction || badgeLabel != null) 1 else 2,
+                    )
+
+                    // Badge
+                    badgeLabel?.let {
+                        Spacer(modifier = Modifier.width(4.dp))
+                        Badge(
+                            label = it
+                        )
+                    }
+
+                }
+
+                // Trailing action (icon)
+                if (showTrailingAction && !showRightAction) {
+                    Spacer(modifier = Modifier.width(8.dp))
+                    Box(
+                        modifier = Modifier
+                            .size(24.dp)
+                            .background(
+                                color = if (type == TitleType.Section) Colors.black_06.copy(0.6f) else Colors.black_06.copy(
+                                    0.3f
+                                ),
+                                shape = RoundedCornerShape(12.dp)
+                            )
+                            .clickable { onPressTrailingAction() },
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Icon(
+                            source = "arrow_chevron_right_small",
+                            size = 18.dp
+                        )
+                    }
+                }
+            }
+
+            // Description
+            description?.let {
+                Spacer(modifier = Modifier.height(4.dp))
+                Text(
+                    text = it,
+                    style = Typography.descriptionDefaultRegular,
+                    color = theme.colors.text.secondary
+                )
+            }
+        }
+
+        // Right action (button or icon)
+        if (showRightAction && !showTrailingAction) {
+            Spacer(modifier = Modifier.width(8.dp))
+            if (buttonTitle != null) {
+                Text(
+                    text = buttonTitle,
+                    style = if (buttonSize === ButtonSize.Small) Typography.actionXsBold else Typography.actionSBold,
+                    color = theme.colors.primary,
+                    modifier = Modifier.clickable { onPressRightAction() }
+                )
+            } else {
+                Box(
+                    modifier = Modifier
+                        .size(24.dp)
+                        .background(
+                            color = Colors.pink_03.copy(alpha = 0.1f),
+                            shape = RoundedCornerShape(12.dp)
+                        )
+                        .clickable { onPressRightAction() },
+                    contentAlignment = Alignment.Center
+                ) {
+                    Icon(
+                        source = "arrow_chevron_right_small",
+                        modifier = Modifier.size(22.dp),
+                        color = theme.colors.primary
+                    )
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,180 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.AppConfig
+import vn.momo.kits.application.AppLanguage
+import vn.momo.kits.application.ApplicationContext
+import vn.momo.kits.application.MiniAppContext.Companion.isShowBaselineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.noFeedbackClickable
+
+val defaultBanner = TrustBannerData(
+    content = mapOf(
+        "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",
+        "en" to "Learn more"
+    ),
+    pciImage = "https://static.momocdn.net/app/img/kits/trustBanner/pci_dss.png",
+    sslImage = "https://static.momocdn.net/app/img/kits/trustBanner/ssl.png",
+    urlConfig = "login_and_security",
+    icons = listOf(
+        "https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png",
+        "https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png",
+        "https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png",
+        "https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png"
+    ),
+    momoImage = "https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png"
+)
+
+const val backgroundBlue = 0xFFF2F8FF
+const val contentColor = 0xFF484848
+const val subContentColor = 0xFFEB2F96
+
+data class TrustBannerData(
+    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(
+    serviceName: String = "",
+    screenName: String = "",
+    onPress: ((Map<String, String>) -> Unit)? = null,
+    trackEvent: ((String, Map<String, String>) -> Unit)? = null
+) {
+    val appConfig = AppConfig.current
+    val language = AppLanguage.current ?: "vi"
+    val trustBanner = appConfig?.trustBanner ?: defaultBanner
+    val trackParams = mapOf(
+        "service_name" to serviceName,
+        "screen_name" to screenName,
+        "component_name" to "logo_trust",
+        "url_config" to trustBanner.urlConfig
+    )
+
+    val application = ApplicationContext.current
+
+    Row(
+        modifier = Modifier
+            .clip(RoundedCornerShape(12.dp))
+            .background(color = Color(backgroundBlue))
+            .conditional(application.isShowBaselineDebug()) {
+                border(1.dp, Colors.blue_03)
+            }
+            .padding(12.dp)
+            .then(
+                if (onPress != null) {
+                    Modifier.clickable {
+                        trackEvent?.invoke(
+                            "service_component_clicked", trackParams
+                        )
+
+                        onPress(
+                            mapOf(
+                                "service_name" to serviceName,
+                                "screen_name" to screenName,
+                                "url_config" to trustBanner.urlConfig,
+                            )
+                        )
+
+                    }
+                } else {
+                    Modifier.noFeedbackClickable {
+                        trackEvent?.invoke(
+                            "service_component_clicked", trackParams
+                        )
+                    }
+                }
+            )
+    ) {
+        if (trustBanner.momoImage != null) {
+            Image(
+                source = trustBanner.momoImage,
+                modifier = Modifier
+                    .width(64.dp)
+                    .height(64.dp)
+            )
+        }
+        Column(
+            modifier = Modifier
+                .padding(start = 10.dp)
+        ) {
+            Text(
+                text = trustBanner.content[language] ?: "",
+                modifier = Modifier.padding(bottom = 8.dp),
+                color = Color(contentColor),
+                style = Typography.descriptionDefaultRegular,
+                maxLines = 2
+            )
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Text(
+                        text = trustBanner.subContent[language] ?: "",
+                        color = Color(subContentColor),
+                        style = Typography.actionXsBold,
+                        maxLines = 2
+                    )
+                    Icon(
+                        source = "https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/16_arrow_chevron_right_small.png",
+                        color = Color(subContentColor),
+                    )
+                }
+                Row {
+                    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,
+                            )
+                        )
+                    }
+                    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/components/datetimepicker/DateTimePicker.kt

@@ -0,0 +1,208 @@
+package vn.momo.kits.components.datetimepicker
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.flow.collect
+import kotlinx.coroutines.flow.mapNotNull
+import kotlinx.coroutines.flow.onEach
+import kotlinx.datetime.LocalDateTime
+import kotlinx.datetime.number
+import vn.momo.kits.application.ApplicationContext
+import vn.momo.kits.application.MiniAppContext.Companion.isShowBaselineDebug
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
+
+private val datePickerHeight = 210.dp
+private val datePickerWithLabelsHeight = 238.dp
+
+@Composable
+fun DateTimePicker(
+    modifier: Modifier = Modifier,
+    format: String = "DD-MM-YYYY",
+    minuteInterval: Int = 1,
+    onChange: (LocalDateTime) -> Unit,
+    selectedValue: LocalDateTime? = null,
+    minDate: LocalDateTime? = null,
+    maxDate: LocalDateTime? = null,
+    arrayLabelTime: List<String> = emptyList()
+) {
+    val effectiveSelectedValue = remember(selectedValue) {
+        selectedValue ?: getCurrentDateTime()
+    }
+
+    val effectiveMinDate = remember(minDate) {
+        minDate ?: createRelativeDate(-10)
+    }
+
+    val effectiveMaxDate = remember(maxDate) {
+        maxDate ?: createRelativeDate(10)
+    }
+
+    val needCheckRange = remember(minDate, maxDate) {
+        minDate == null && maxDate == null
+    }
+
+    val initialValue = remember(effectiveMinDate, effectiveMaxDate, effectiveSelectedValue) {
+        when {
+            !needCheckRange -> effectiveSelectedValue
+            effectiveSelectedValue < effectiveMinDate -> effectiveMinDate
+            effectiveSelectedValue > effectiveMaxDate -> effectiveMaxDate
+            else -> effectiveSelectedValue
+        }
+    }
+
+    var currentDate by remember(initialValue) {
+        mutableStateOf(
+            PickerData(
+                day = initialValue.dayOfMonth,
+                month = initialValue.month.number,
+                year = initialValue.year,
+                hour = initialValue.hour,
+                minute = initialValue.minute
+            )
+        )
+    }
+
+    val onWheelChangeValue = remember(currentDate, effectiveMinDate, effectiveMaxDate) {
+        { name: String, value: String ->
+            var day = if (name == "day") value.toInt() else currentDate.day
+            var month = if (name == "month") value.toInt() else currentDate.month
+            val year = if (name == "year") value.toInt() else currentDate.year
+            val hour = if (name == "hour") value.toInt() else currentDate.hour
+            val minute = if (name == "minute") value.toInt() else currentDate.minute
+            val timeMode = if (name == "timeMode") value else currentDate.timeMode
+            if (name == "year") {
+                month = when (year) {
+                    effectiveMaxDate.year -> month.coerceIn(
+                        1,
+                        effectiveMaxDate.monthNumber
+                    )
+                    effectiveMinDate.year -> month.coerceIn(
+                        effectiveMinDate.monthNumber,
+                        12,
+                    )
+                    else -> month
+                }
+            }
+            if (name == "month" || name == "year") {
+                val maxDayOfMonth = when (month) {
+                    4, 6, 9, 11 -> 30
+                    2 -> if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) 29 else 28
+                    else -> 31
+                }
+
+                day = when {
+                    year == effectiveMaxDate.year && month == effectiveMaxDate.monthNumber ->
+                        day.coerceIn(1, effectiveMaxDate.dayOfMonth)
+
+                    year == effectiveMinDate.year && month == effectiveMinDate.monthNumber ->
+                        day.coerceIn(effectiveMinDate.dayOfMonth, maxDayOfMonth)
+
+                    day > maxDayOfMonth -> maxDayOfMonth
+                    else -> day
+                }
+            }
+            currentDate = PickerData(
+                day = day,
+                month = month,
+                year = year,
+                hour = hour,
+                minute = minute,
+                timeMode = timeMode,
+            )
+        }
+    }
+
+    LaunchedEffect(effectiveMinDate, effectiveMaxDate) {
+        snapshotFlow { currentDate }
+            .mapNotNull {
+                val dateTime = it.toLocalDateTime()
+                if (!needCheckRange || dateTime in effectiveMinDate..effectiveMaxDate) dateTime
+                else null
+            }
+            .onEach(onChange)
+            .collect()
+    }
+
+    val pickerHeight = if (arrayLabelTime.isNotEmpty())
+        datePickerWithLabelsHeight else
+        datePickerHeight
+
+    val application = ApplicationContext.current
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(pickerHeight)
+            .background(AppTheme.current.colors.background.surface)
+            .conditional(application.isShowBaselineDebug()) {
+                border(1.dp, Colors.blue_03)
+            }
+            .padding(horizontal = Spacing.M),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        val dateComponents = getDateComponents(
+            format,
+            currentDate,
+            effectiveMinDate,
+            effectiveMaxDate,
+            minuteInterval,
+        )
+        dateComponents.forEachIndexed { index, component ->
+            val hasLabel = index < arrayLabelTime.size && arrayLabelTime[index].isNotEmpty()
+
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+                modifier = Modifier.weight(1f)
+            ) {
+                if (hasLabel) {
+                    Text(
+                        text = arrayLabelTime[index],
+                        style = Typography.actionSBold,
+                        modifier = Modifier.padding(bottom = Spacing.S)
+                    )
+                }
+
+                WheelPicker(
+                    name = component.name,
+                    data = component.data,
+                    selectedData = when (component.name) {
+                        "day" -> paddingNum(currentDate.day)
+                        "month" -> paddingNum(currentDate.month)
+                        "year" -> currentDate.year.toString()
+                        "hour" -> paddingNum(currentDate.hour)
+                        "minute" -> paddingNum(currentDate.minute)
+                        "timeMode" -> currentDate.timeMode
+                        else -> ""
+                    },
+                    onChange = onWheelChangeValue,
+                )
+            }
+
+            if (index < dateComponents.size - 1) {
+                Spacer(modifier = Modifier.width(Spacing.M))
+            }
+        }
+    }
+} 

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

@@ -0,0 +1,29 @@
+package vn.momo.kits.components.datetimepicker
+
+import kotlinx.datetime.LocalDateTime
+
+data class PickerData(
+    var day: Int,
+    var month: Int,
+    var year: Int,
+    var hour: Int = 0,
+    var minute: Int = 0,
+    var timeMode: String = ""
+) {
+    fun toLocalDateTime(): LocalDateTime {
+        return LocalDateTime(
+            year = year,
+            monthNumber = month,
+            dayOfMonth = day,
+            hour = hour,
+            minute = minute,
+            second = 0,
+            nanosecond = 0
+        )
+    }
+}
+
+data class DateComponent(
+    val name: String,
+    val data: List<String>
+)