@momo-kits/native-kits 0.163.1-beta.2 → 0.163.1-beta.20-debug

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

@@ -0,0 +1,34 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.layout.fillMaxWidth
+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
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.setAutomationId
+
+@Composable
+internal fun HeaderTitle(
+    title: String = "",
+    color: Color? = null,
+    modifier: Modifier = Modifier.fillMaxWidth(),
+    textAlign: TextAlign = TextAlign.Start,
+) {
+    Text(
+        modifier = modifier.zIndex(1f).setAutomationId("title_navigation_header"),
+        text = title,
+        textAlign = textAlign,
+        style = Typography.actionSBold.copy(
+            fontSize = 15.sp,
+            lineHeight = 22.sp,
+        ),
+        color = color,
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis
+    )
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/HeaderUser.kt

@@ -0,0 +1,360 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicText
+import androidx.compose.foundation.text.TextAutoSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import vn.momo.kits.components.Image
+import vn.momo.kits.components.Options
+import vn.momo.kits.components.Skeleton
+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.activeOpacityClickable
+import vn.momo.kits.navigation.component.HeaderTitle.User
+import vn.momo.kits.platform.getScreenDimensions
+
+@Composable
+internal fun HeaderUser(
+    data: HeaderTitle
+) {
+    if (data !is User) return
+
+    if (data.isLoading) {
+        return TitleUserShimmer()
+    }
+
+    val maxWidth = getScreenDimensions().width.dp - 172.dp
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = Spacing.XS)
+            .activeOpacityClickable(enabled = data.onPress != null, onClick = { data.onPress?.invoke() }),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Row(
+            modifier = Modifier.widthIn(max = maxWidth),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Box(modifier = Modifier.size(Spacing.XXL)) {
+                AvatarGroup(urls = AvatarUrls(data.image ?: listOf()), title = data.title)
+                if (data.dotColor != null) {
+                    Box(
+                        modifier = Modifier
+                            .align(Alignment.BottomEnd)
+                            .size(10.dp)
+                            .clip(CircleShape)
+                            .background(data.dotColor)
+                    )
+                }
+            }
+
+            Spacer(Modifier.width(6.dp))
+
+            Column(modifier = Modifier.weight(1f, fill = false)) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Text(
+                        text = data.title,
+                        color = data.tintColor,
+                        style = Typography.actionXsBold,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                    if (data.icons.isNotEmpty()) {
+                        Spacer(Modifier.width(6.dp))
+                        Row(verticalAlignment = Alignment.CenterVertically) {
+                            data.icons.forEach { icon ->
+                                RemoteIcon16(url = icon)
+                            }
+                        }
+                    }
+                }
+
+                if (!data.subTitle.isNullOrEmpty()) {
+                    Spacer(Modifier.height(2.dp))
+                    Text(
+                        text = data.subTitle,
+                        color = data.tintColor,
+                        style = Typography.descriptionXsRegular,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun TitleUserShimmer() {
+    val theme = AppTheme.current
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = Spacing.XS),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+            modifier = Modifier
+                .size(Spacing.XXL)
+                .clip(CircleShape)
+                .background(theme.colors.border.default)
+        ) {
+            Skeleton()
+        }
+        Spacer(Modifier.width(Spacing.M / 2))
+        Column(modifier = Modifier.fillMaxWidth()) {
+            Box(
+                modifier = Modifier
+                    .height(18.dp)
+                    .width(120.dp)
+                    .clip(RoundedCornerShape(8.dp))
+            ) { Skeleton() }
+            Spacer(Modifier.height(Spacing.XXS))
+            Box(
+                modifier = Modifier
+                    .height(12.dp)
+                    .width(120.dp)
+                    .clip(RoundedCornerShape(8.dp))
+            ) { Skeleton() }
+        }
+    }
+}
+
+@Composable
+private fun AvatarGroup(
+    urls: AvatarUrls?,
+    title: String? = null,
+    size: Dp = Spacing.XXL
+) {
+    val theme = AppTheme.current
+    val modifierBorder = remember {
+        Modifier.clip(CircleShape).border(width = (0.5).dp, color = theme.colors.border.default, shape = CircleShape)
+    }
+    val options = Options(
+        contentScale = ContentScale.Crop,
+        alignment = Alignment.Center
+    )
+
+    when (urls?.items?.size) {
+        0 -> InitialsAvatar(
+            modifier = modifierBorder,
+            name = title ?: "",
+            fallbackInitials = null,
+            size = size
+        )
+        1 -> SingleAvatar(options = options, modifier = modifierBorder, urls.items[0], size)
+        2 -> TwoAvatar(options = options, modifier = modifierBorder, urls, size)
+        3 -> ThreeAvatar(options = options, modifier = modifierBorder, urls, size)
+        4 -> FourAvatar(options = options, modifier = modifierBorder, urls, size)
+        else -> ManyAvatar(options = options, modifier = modifierBorder, urls!!, size)
+    }
+}
+
+@Composable
+private fun SingleAvatar(options: Options, modifier: Modifier = Modifier, url: String, size: Dp) {
+    Image(
+        source = url,
+        options = options,
+        modifier = modifier
+            .size(size)
+    )
+}
+
+@Composable
+private fun TwoAvatar(options: Options, modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
+    val child = 24.dp
+    Box(modifier = Modifier.size(size)) {
+        Image(
+            source = urls.items[0],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopEnd)
+        )
+        Image(
+            source = urls.items[1],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomStart)
+        )
+    }
+}
+
+@Composable
+private fun ThreeAvatar(options: Options, modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
+    val child = 16.dp
+    Box(modifier = Modifier.size(size).padding(2.dp)) {
+        Image(
+            source = urls.items[0],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomEnd)
+        )
+        Image(
+            source = urls.items[1],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopCenter)
+        )
+        Image(
+            source = urls.items[2],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomStart)
+        )
+    }
+}
+
+@Composable
+private fun FourAvatar(options: Options, modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
+    val child = 16.dp
+    Box(modifier = Modifier.size(size).padding(1.dp)) {
+        Image(
+            source = urls.items[0],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomStart)
+        )
+        Image(
+            source = urls.items[1],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomEnd)
+        )
+        Image(
+            source = urls.items[2],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopEnd)
+        )
+        Image(
+            source = urls.items[3],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopStart)
+        )
+    }
+}
+
+@Composable
+private fun ManyAvatar(options: Options, modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
+    val child = 16.dp
+    val more = urls.items.size - 3
+    Box(modifier = Modifier.size(size).padding(1.dp)) {
+        Image(
+            source = urls.items[0],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomStart)
+        )
+        Image(
+            source = urls.items[1],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopEnd)
+        )
+        Image(
+            source = urls.items[2],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopStart)
+        )
+        Box(
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomEnd)
+                .background(Colors.pink_09)
+                .padding(1.dp)
+                .clipToBounds(),
+            contentAlignment = Alignment.Center
+        ) {
+            BasicText(
+                text = "+$more",
+                style = TextStyle(
+                    color = Colors.pink_03
+                ),
+                maxLines = 1,
+                autoSize = TextAutoSize.StepBased(
+                    minFontSize = 1.sp,
+                    maxFontSize = 10.sp,
+                    stepSize = 1.sp
+                )
+            )
+        }
+    }
+}
+
+@Composable
+private fun InitialsAvatar(
+    modifier: Modifier = Modifier,
+    name: String,
+    fallbackInitials: String? = null,
+    size: Dp = Spacing.XXL
+) {
+    val initials = remember(name, fallbackInitials) {
+        fallbackInitials ?: run {
+            val words = name.trim().split(Regex("\\s+")).takeLast(2)
+            words.joinToString("") { it.firstOrNull()?.uppercase() ?: "" }
+        }
+    }
+    Box(
+        modifier = modifier
+            .size(size)
+            .background(Colors.pink_09),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = initials,
+            color = Colors.pink_03,
+            style = Typography.descriptionXsRegular
+        )
+    }
+}
+
+@Composable
+private fun RemoteIcon16(url: String) {
+    Image(
+        source = url,
+        options = Options(
+            contentScale = ContentScale.Crop
+        ),
+        modifier = Modifier
+            .size(16.dp)
+            .clip(RoundedCornerShape(4.dp)),
+    )
+}
+
+@Immutable
+private data class AvatarUrls(val items: List<String>)

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/SnackBar.kt

@@ -0,0 +1,132 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.offset
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.delay
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.modifier.conditional
+import kotlinx.coroutines.launch
+import vn.momo.kits.const.AppNavigationBar
+import vn.momo.kits.navigation.LocalFooterHeightPx
+import vn.momo.kits.navigation.LocalNavigator
+import vn.momo.kits.navigation.LocalOptions
+import vn.momo.kits.navigation.OverplayComponentRegistry
+import kotlin.time.Duration.Companion.milliseconds
+
+sealed class SnackBar(open val duration: Long? = null) {
+    data class Custom(
+        val content: @Composable () -> Unit,
+        override val duration: Long? = 3000L
+    ) : SnackBar(duration)
+
+    data class Toast(
+        override val duration: Long? = 3000L
+    ) : SnackBar(duration)
+}
+
+@Composable
+internal fun SnackBar(
+    data: SnackBar,
+    onDismiss: (() -> Unit)?
+) {
+    val navigator = LocalNavigator.current
+    val options = LocalOptions.current
+    val density = LocalDensity.current
+    val footerHeightPxState = LocalFooterHeightPx.current
+    val navigationBar = AppNavigationBar.current
+
+    val footerHeight = if (options.footerComponent != null) {
+        footerHeightPxState.value
+    } else {
+        with(density){ navigationBar.toPx() }
+    }.toInt()
+
+    var startPosition by remember { mutableStateOf(Float.MAX_VALUE) }
+    val targetPosition = 0f
+
+    var offsetY by remember { mutableStateOf(Animatable(startPosition)) }
+    val coroutineScope = rememberCoroutineScope()
+
+    suspend fun openEvent() {
+        offsetY.snapTo(startPosition)
+        offsetY.animateTo(
+            targetValue = targetPosition,
+            animationSpec = tween(
+                durationMillis = 350,
+            )
+        )
+    }
+
+    fun closeEvent() {
+        coroutineScope.launch {
+            offsetY.animateTo(
+                targetValue = startPosition,
+                animationSpec = tween(
+                    durationMillis = 200,
+                )
+            )
+            navigator.hideSnackBar()
+        }
+    }
+
+    LaunchedEffect(startPosition) {
+        if (startPosition != Float.MAX_VALUE){
+            openEvent()
+        }
+    }
+
+    LaunchedEffect(data.duration) {
+        val duration = data.duration
+        if (duration != null) {
+            delay(duration.milliseconds)
+            navigator.hideSnackBar()
+        }
+    }
+
+    DisposableEffect(Unit) {
+        OverplayComponentRegistry.bindClose {
+            closeEvent()
+        }
+        onDispose {
+            onDismiss?.invoke()
+        }
+    }
+
+    Box(
+        modifier = Modifier
+            .offset { IntOffset(0, offsetY.value.toInt() - footerHeight) }
+            .onGloballyPositioned {
+                if (startPosition != it.size.height.toFloat()) {
+                    startPosition = it.size.height.toFloat()
+                    offsetY = Animatable(startPosition)
+                }
+            }
+            .fillMaxWidth()
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+    ) {
+        when (data) {
+            is SnackBar.Custom -> data.content()
+            is SnackBar.Toast -> {}
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/tracking/ScreenTracker.kt

@@ -0,0 +1,127 @@
+package vn.momo.kits.navigation.tracking
+
+import vn.momo.kits.application.MiniAppContext
+import vn.momo.maxapi.IMaxApi
+import kotlin.time.Clock
+import kotlin.time.ExperimentalTime
+
+class ScreenTrackingState {
+    @OptIn(ExperimentalTime::class)
+    var time: Long = Clock.System.now().toEpochMilliseconds()
+    var releaseNavigated: Boolean = false
+    var releaseLoad: Boolean = false
+    var releaseInteraction: Boolean = false
+    var previousScreenName: String? = null
+    var action: String = "push"
+}
+
+object ScreenTracker {
+
+    private var lastScreenName: String? = null
+
+    fun trackScreenNavigated(
+        maxApi: IMaxApi?,
+        context: MiniAppContext?,
+        screenName: String,
+        action: String,
+        state: ScreenTrackingState
+    ) {
+        if (state.releaseNavigated) return
+
+        val previousScreen = lastScreenName
+        lastScreenName = screenName
+
+        maxApi?.track(
+            eventName = "auto_screen_navigated",
+            params = buildBaseParams(context, screenName).apply {
+                put("pre_screen_name", previousScreen)
+                put("state", "navigated")
+                put("action", action)
+            }
+        )
+
+        state.releaseNavigated = true
+        state.previousScreenName = previousScreen
+    }
+
+    fun trackScreenDisplayed(
+        maxApi: IMaxApi?,
+        context: MiniAppContext?,
+        screenName: String,
+        duration: Long,
+        state: ScreenTrackingState
+    ) {
+        if (state.releaseLoad) return
+
+        maxApi?.track(
+            eventName = "auto_screen_displayed",
+            params = buildBaseParams(context, screenName).apply {
+                put("state", "load")
+                put("duration", duration)
+            }
+        )
+
+        state.releaseLoad = true
+    }
+
+    fun trackScreenInteracted(
+        maxApi: IMaxApi?,
+        context: MiniAppContext?,
+        screenName: String,
+        duration: Long,
+        totalDuration: Long,
+        state: ScreenTrackingState
+    ) {
+        if (state.releaseInteraction) return
+
+        maxApi?.track(
+            eventName = "auto_screen_interacted",
+            params = buildBaseParams(context, screenName).apply {
+                put("state", "interaction")
+                put("duration", duration)
+                put("total_duration", totalDuration)
+            }
+        )
+
+        state.releaseInteraction = true
+    }
+
+    private fun buildBaseParams(
+        context: MiniAppContext?,
+        screenName: String,
+        componentName: String = "Screen"
+    ): MutableMap<String, Any?> {
+        return mutableMapOf(
+            "app_id" to context?.appId,
+            "feature_code" to context?.appCode,
+            "screen_name" to screenName,
+            "component_name" to componentName,
+            "tracking_source" to 1
+        )
+    }
+
+    fun trackPopupDisplayed(
+        maxApi: IMaxApi?,
+        context: MiniAppContext?,
+        parentScreenName: String?
+    ) {
+        maxApi?.track(
+            eventName = "auto_popup_displayed",
+            params = mutableMapOf<String, Any?>(
+                "screen_name" to parentScreenName,
+                "tracking_source" to 1,
+                "app_id" to context?.appId,
+                "feature_code" to context?.appCode,
+                "kits_version" to null,
+                "component_name" to "Modal"
+            )
+        )
+    }
+
+    fun getLastScreenName(): String? = lastScreenName
+
+    @Suppress("UNUSED")
+    fun reset() {
+        lastScreenName = null
+    }
+}