@momo-kits/native-kits 0.167.1-beta.3 → 0.167.1-beta.3-debug

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

@@ -0,0 +1,498 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.Canvas
+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.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.PathEffect
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.*
+import androidx.compose.ui.window.Popup
+import androidx.compose.ui.window.PopupPositionProvider
+import androidx.compose.ui.window.PopupProperties
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.*
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+
+
+enum class TooltipPlacement {
+    TOP,
+    BOTTOM,
+    LEFT,
+    RIGHT,
+}
+enum class TooltipAlign {
+    START,
+    CENTER,
+    END,
+}
+data class TooltipButton(
+    val title: String? = null,
+    val icon: String? = null,
+    val onPress: (() -> Unit)? = null,
+)
+@Stable
+class TooltipState {
+    var isVisible by mutableStateOf(false)
+        private set
+
+    /** Shows the tooltip. */
+    fun show() {
+        isVisible = true
+    }
+
+    /** Hides the tooltip. */
+    fun hide() {
+        isVisible = false
+    }
+
+    /** Toggles the tooltip visibility. */
+    fun toggle() {
+        isVisible = !isVisible
+    }
+}
+@Composable
+fun rememberTooltipState(): TooltipState {
+    return remember { TooltipState() }
+}
+private val TOOLTIP_OFFSET = Spacing.S
+private val ARROW_SIZE = 6.dp
+private class TooltipPositionProvider(
+    private val placement: TooltipPlacement,
+    private val align: TooltipAlign,
+    private val offsetPx: Int,
+) : PopupPositionProvider {
+
+    override fun calculatePosition(
+        anchorBounds: IntRect,
+        windowSize: IntSize,
+        layoutDirection: LayoutDirection,
+        popupContentSize: IntSize,
+    ): IntOffset {
+        val anchorX = anchorBounds.left
+        val anchorY = anchorBounds.top
+        val anchorW = anchorBounds.width
+        val anchorH = anchorBounds.height
+        val popW = popupContentSize.width
+        val popH = popupContentSize.height
+
+        var x: Int
+        var y: Int
+
+        when (placement) {
+            TooltipPlacement.TOP -> {
+                y = anchorY - popH - offsetPx
+                x = alignHorizontal(anchorX, anchorW, popW)
+            }
+
+            TooltipPlacement.BOTTOM -> {
+                y = anchorY + anchorH + offsetPx
+                x = alignHorizontal(anchorX, anchorW, popW)
+            }
+
+            TooltipPlacement.LEFT -> {
+                x = anchorX - popW - offsetPx
+                y = alignVertical(anchorY, anchorH, popH)
+            }
+
+            TooltipPlacement.RIGHT -> {
+                x = anchorX + anchorW + offsetPx
+                y = alignVertical(anchorY, anchorH, popH)
+            }
+        }
+
+        return IntOffset(x, y)
+    }
+    private fun alignHorizontal(anchorX: Int, anchorW: Int, popW: Int): Int {
+        return when (align) {
+            TooltipAlign.START -> anchorX
+            TooltipAlign.END -> anchorX + anchorW - popW
+            TooltipAlign.CENTER -> anchorX + (anchorW - popW) / 2
+        }
+    }
+    private fun alignVertical(anchorY: Int, anchorH: Int, popH: Int): Int {
+        return when (align) {
+            TooltipAlign.START -> anchorY
+            TooltipAlign.END -> anchorY + anchorH - popH
+            TooltipAlign.CENTER -> anchorY + (anchorH - popH) / 2
+        }
+    }
+}
+
+@Composable
+fun Tooltip(
+    state: TooltipState,
+    title: String? = null,
+    description: String,
+    buttons: List<TooltipButton> = emptyList(),
+    placement: TooltipPlacement = TooltipPlacement.TOP,
+    align: TooltipAlign = TooltipAlign.CENTER,
+    onVisibleChange: ((Boolean) -> Unit)? = null,
+    onPressClose: (() -> Unit)? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val density = LocalDensity.current
+    val offsetPx = with(density) { (TOOLTIP_OFFSET + ARROW_SIZE).roundToPx() }
+
+    LaunchedEffect(state.isVisible) {
+        onVisibleChange?.invoke(state.isVisible)
+    }
+
+    Box(modifier = modifier) {
+        content()
+
+        if (state.isVisible) {
+            val positionProvider = remember(placement, align, offsetPx) {
+                TooltipPositionProvider(
+                    placement = placement,
+                    align = align,
+                    offsetPx = offsetPx,
+                )
+            }
+
+            Popup(
+                popupPositionProvider = positionProvider,
+                onDismissRequest = { state.hide() },
+                properties = PopupProperties(clippingEnabled = false),
+            ) {
+                TooltipPopupContent(
+                    title = title,
+                    description = description,
+                    buttons = buttons,
+                    placement = placement,
+                    align = align,
+                    onPressClose = onPressClose,
+                )
+            }
+        }
+    }
+}
+@Composable
+private fun TooltipPopupContent(
+    title: String?,
+    description: String?,
+    buttons: List<TooltipButton>,
+    placement: TooltipPlacement,
+    align: TooltipAlign,
+    onPressClose: (() -> Unit)? = null,
+) {
+    val tooltipMaxWidth = 300.dp
+    val tooltipShape = remember { RoundedCornerShape(Radius.S) }
+
+    Box(modifier = Modifier.wrapContentSize()) {
+        Column(
+            modifier = Modifier
+                .widthIn(max = tooltipMaxWidth)
+                .width(IntrinsicSize.Max)
+                .background(Colors.black_17, tooltipShape)
+                .clip(tooltipShape)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .padding(Spacing.M)
+        ) {
+            Row(Modifier.fillMaxWidth()) {
+                Column(modifier = Modifier.weight(1f)) {
+                    if (!title.isNullOrEmpty()) {
+                        Text(
+                            text = title,
+                            style = Typography.headerSSemibold,
+                            color = Colors.black_01,
+                            maxLines = 1,
+                            modifier = Modifier.padding(bottom = Spacing.XS),
+                            overflow = TextOverflow.Ellipsis,
+                        )
+                    }
+                    if (!description.isNullOrEmpty()) {
+                        Text(
+                            text = description,
+                            style = Typography.descriptionDefaultRegular,
+                            color = Colors.black_01,
+                            maxLines = 2,
+                            overflow = TextOverflow.Ellipsis,
+                        )
+                    }
+                }
+                if (onPressClose != null) {
+                    Spacer(Modifier.width(Spacing.M))
+                    Box(
+                        modifier = Modifier
+                            .size(20.dp)
+                            .activeOpacityClickable {
+                                onPressClose.invoke()
+                            }
+                    ) {
+                        Icon(
+                            source = "navigation_close",
+                            size = 20.dp,
+                            color = Colors.black_01,
+                        )
+                    }
+                }
+            }
+            if (buttons.isNotEmpty()) {
+                Spacer(Modifier.height(Spacing.M))
+                TooltipButtons(
+                    buttons = buttons,
+                    modifier = Modifier.align(Alignment.End),
+                )
+            }
+        }
+
+        TooltipArrow(
+            placement = placement,
+            align = align,
+            modifier = Modifier.matchParentSize(),
+        )
+    }
+}
+@Composable
+private fun TooltipArrow(
+    placement: TooltipPlacement,
+    align: TooltipAlign,
+    modifier: Modifier = Modifier,
+) {
+    val arrowWidth = ARROW_SIZE * 2
+    val arrowHeight = ARROW_SIZE
+    val arrowEdgeMargin = Spacing.M
+
+    val boxAlignment = when (placement) {
+        TooltipPlacement.TOP -> when (align) {
+            TooltipAlign.START -> Alignment.BottomStart
+            TooltipAlign.CENTER -> Alignment.BottomCenter
+            TooltipAlign.END -> Alignment.BottomEnd
+        }
+
+        TooltipPlacement.BOTTOM -> when (align) {
+            TooltipAlign.START -> Alignment.TopStart
+            TooltipAlign.CENTER -> Alignment.TopCenter
+            TooltipAlign.END -> Alignment.TopEnd
+        }
+
+        TooltipPlacement.LEFT -> when (align) {
+            TooltipAlign.START -> Alignment.TopEnd
+            TooltipAlign.CENTER -> Alignment.CenterEnd
+            TooltipAlign.END -> Alignment.BottomEnd
+        }
+
+        TooltipPlacement.RIGHT -> when (align) {
+            TooltipAlign.START -> Alignment.TopStart
+            TooltipAlign.CENTER -> Alignment.CenterStart
+            TooltipAlign.END -> Alignment.BottomStart
+        }
+    }
+
+    val canvasWidth = when (placement) {
+        TooltipPlacement.TOP, TooltipPlacement.BOTTOM -> arrowWidth
+        TooltipPlacement.LEFT, TooltipPlacement.RIGHT -> arrowHeight
+    }
+    val canvasHeight = when (placement) {
+        TooltipPlacement.TOP, TooltipPlacement.BOTTOM -> arrowHeight
+        TooltipPlacement.LEFT, TooltipPlacement.RIGHT -> arrowWidth
+    }
+
+    val arrowOverlap = 1.dp
+    val offsetX = when (placement) {
+        TooltipPlacement.LEFT -> arrowHeight - arrowOverlap
+        TooltipPlacement.RIGHT -> -arrowHeight + arrowOverlap
+        else -> when (align) {
+            TooltipAlign.START -> arrowEdgeMargin
+            TooltipAlign.END -> -arrowEdgeMargin
+            TooltipAlign.CENTER -> 0.dp
+        }
+    }
+    val offsetY = when (placement) {
+        TooltipPlacement.TOP -> arrowHeight - arrowOverlap
+        TooltipPlacement.BOTTOM -> -arrowHeight + arrowOverlap
+        else -> when (align) {
+            TooltipAlign.START -> arrowEdgeMargin
+            TooltipAlign.END -> -arrowEdgeMargin
+            TooltipAlign.CENTER -> 0.dp
+        }
+    }
+
+    val arrowColor = Colors.black_17
+
+    Box(modifier = modifier) {
+        Canvas(
+            modifier = Modifier
+                .align(boxAlignment)
+                .offset(x = offsetX, y = offsetY)
+                .size(width = canvasWidth, height = canvasHeight)
+        ) {
+            val w = size.width
+            val h = size.height
+            val path = Path().apply {
+                when (placement) {
+                    TooltipPlacement.TOP -> {
+                        moveTo(0f, 0f)
+                        lineTo(w, 0f)
+                        lineTo(w / 2f, h)
+                        close()
+                    }
+                    TooltipPlacement.BOTTOM -> {
+                        moveTo(0f, h)
+                        lineTo(w, h)
+                        lineTo(w / 2f, 0f)
+                        close()
+                    }
+                    TooltipPlacement.LEFT -> {
+                        moveTo(0f, 0f)
+                        lineTo(0f, h)
+                        lineTo(w, h / 2f)
+                        close()
+                    }
+                    TooltipPlacement.RIGHT -> {
+                        moveTo(w, 0f)
+                        lineTo(w, h)
+                        lineTo(0f, h / 2f)
+                        close()
+                    }
+                }
+            }
+            drawIntoCanvas { canvas ->
+                val paint = Paint().apply {
+                    color = arrowColor
+                    pathEffect = PathEffect.cornerPathEffect(2.dp.toPx())
+                }
+                canvas.drawPath(path, paint)
+            }
+        }
+    }
+}
+@Composable
+private fun TooltipButtons(buttons: List<TooltipButton>, modifier: Modifier = Modifier) {
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.End,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+
+        if (buttons.size == 1) {
+            val btn = buttons[0]
+            TooltipSingleButton(btn)
+        } else if (buttons.size == 2) {
+            val primary = buttons[0]
+            val secondary = buttons[1]
+            val bothIcons = primary.icon != null && secondary.icon != null
+
+            if (bothIcons) {
+                TooltipIconButton(
+                    icon = secondary.icon,
+                    onPress = secondary.onPress ?: {},
+                )
+                Spacer(modifier = Modifier.width(Spacing.S))
+                TooltipIconButton(
+                    icon = primary.icon,
+                    onPress = primary.onPress ?: {},
+                )
+            } else {
+                TooltipSecondaryButton(
+                    title = secondary.title ?: "",
+                    onPress = secondary.onPress ?: {},
+                    modifier = Modifier.weight(1f, fill = false),
+                )
+                Spacer(modifier = Modifier.width(Spacing.S))
+                TooltipPrimaryButton(
+                    title = primary.title ?: "",
+                    onPress = primary.onPress ?: {},
+                )
+            }
+        } else {
+            buttons.forEachIndexed { index, btn ->
+                if (index > 0) {
+                    Spacer(modifier = Modifier.width(Spacing.XXS))
+                }
+                TooltipSingleButton(btn)
+            }
+        }
+    }
+}
+
+@Composable
+private fun TooltipSingleButton(btn: TooltipButton) {
+    if (btn.icon != null) {
+        TooltipIconButton(
+            icon = btn.icon,
+            onPress = btn.onPress ?: {},
+        )
+    } else {
+        TooltipPrimaryButton(
+            title = btn.title ?: "",
+            onPress = btn.onPress ?: {},
+        )
+    }
+}
+private fun String.limitWithEllipsis(max: Int = 16): String {
+    return if (length > max) take(max) + "…" else this
+}
+@Composable
+private fun TooltipPrimaryButton(
+    title: String,
+    onPress: () -> Unit,
+) {
+    Button(
+        onClick = onPress,
+        title = title.limitWithEllipsis(),
+        type = ButtonType.SECONDARY,
+        size = Size.MEDIUM,
+        isFull = false,
+    )
+}
+@Composable
+private fun TooltipSecondaryButton(
+    title: String,
+    onPress: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier
+            .activeOpacityClickable {
+                onPress()
+            }
+            .padding(horizontal = Spacing.M, vertical = Spacing.S),
+    ) {
+        Text(
+            text = title.limitWithEllipsis(),
+            color = Colors.black_01,
+            style = Typography.actionSBold,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+        )
+    }
+}
+@Composable
+private fun TooltipIconButton(
+    icon: String,
+    onPress: () -> Unit,
+) {
+    val iconButtonSize = scaleSize(36f).dp
+
+    Box(
+        modifier = Modifier
+            .size(iconButtonSize)
+            .background(Colors.black_01, RoundedCornerShape(Radius.XL))
+            .clip(RoundedCornerShape(Radius.XL))
+            .clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null,
+                onClick = onPress,
+            ),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(source = icon)
+    }
+}

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

@@ -0,0 +1,176 @@
+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.LocalDesignSystemConfig
+import vn.momo.kits.application.LocalLocalize
+import vn.momo.kits.application.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 localize = LocalLocalize.current
+    val trustBanner = LocalDesignSystemConfig.current?.trustBanner ?: defaultBanner
+    val trackParams = mapOf(
+        "service_name" to serviceName,
+        "screen_name" to screenName,
+        "component_name" to "logo_trust",
+        "url_config" to trustBanner.urlConfig
+    )
+
+    Row(
+        modifier = Modifier
+            .clip(RoundedCornerShape(12.dp))
+            .background(color = Color(backgroundBlue))
+            .conditional(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 = localize.translateData(trustBanner.content),
+                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 = localize.translateData(trustBanner.subContent),
+                        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,
+                            )
+                        )
+                    }
+
+                }
+            }
+        }
+    }
+}