Updated on 2026-08-14

This commit is contained in:
Tangem 2026-07-21 07:49:18 -07:00
parent 5c05c30adc
commit ee0baa5102

View file

@ -6,6 +6,7 @@ import androidx.compose.foundation.Image
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.*
import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PageSize
import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
@ -23,7 +24,7 @@ import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.util.fastForEach import androidx.compose.ui.util.fastForEach
import coil.compose.SubcomposeAsyncImage import coil.compose.AsyncImage
import coil.request.ImageRequest import coil.request.ImageRequest
import com.tangem.core.ui.ds.TangemPagerIndicator import com.tangem.core.ui.ds.TangemPagerIndicator
import com.tangem.core.ui.ds.topbar.TangemTopBar import com.tangem.core.ui.ds.topbar.TangemTopBar
@ -42,6 +43,11 @@ import kotlinx.collections.immutable.persistentListOf
import kotlinx.coroutines.flow.distinctUntilChanged import kotlinx.coroutines.flow.distinctUntilChanged
import com.tangem.core.ui.R as CoreUiR import com.tangem.core.ui.R as CoreUiR
private const val CARD_WIDTH = 266f
private const val CARD_HEIGHT = 172f
private const val CARD_SPACING = 12f
private const val SCREEN_MARGIN = 24f
@Composable @Composable
internal fun TangemPaySelectPlanScreen(state: TangemPaySelectPlanUM, modifier: Modifier = Modifier) { internal fun TangemPaySelectPlanScreen(state: TangemPaySelectPlanUM, modifier: Modifier = Modifier) {
Box( Box(
@ -110,16 +116,20 @@ private fun ColumnScope.SelectContent(state: TangemPaySelectPlanUM) {
.collect(state.onPlanSelected) .collect(state.onPlanSelected)
} }
HorizontalPager( BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
state = pagerState, val endPadding = (maxWidth - SCREEN_MARGIN.dp - CARD_WIDTH.dp).coerceAtLeast(0.dp)
modifier = Modifier HorizontalPager(
.fillMaxWidth() state = pagerState,
.padding(top = 12.dp), modifier = Modifier
contentPadding = PaddingValues(horizontal = 24.dp), .fillMaxWidth()
pageSpacing = 8.dp, .padding(top = 12.dp),
beyondViewportPageCount = 1, pageSize = PageSize.Fixed(CARD_WIDTH.dp),
) { page -> contentPadding = PaddingValues(start = SCREEN_MARGIN.dp, end = endPadding),
PlanCard(imageUrl = plans[page].imageUrl) pageSpacing = CARD_SPACING.dp,
beyondViewportPageCount = 1,
) { page ->
PlanCard(imageUrl = plans[page].imageUrl)
}
} }
if (plans.size > 1) { if (plans.size > 1) {
@ -193,15 +203,10 @@ private fun PlanPoint(point: TangemPaySelectPlanUM.PointUM, modifier: Modifier =
private fun ColumnScope.ConfirmContent(state: TangemPaySelectPlanUM, content: TangemPaySelectPlanUM.Content.Confirm) { private fun ColumnScope.ConfirmContent(state: TangemPaySelectPlanUM, content: TangemPaySelectPlanUM.Content.Confirm) {
val selectedPlan = state.plans.getOrNull(state.selectedIndex) ?: return val selectedPlan = state.plans.getOrNull(state.selectedIndex) ?: return
Box( PlanCard(
modifier = Modifier imageUrl = selectedPlan.imageUrl,
.fillMaxWidth() modifier = Modifier.padding(start = 24.dp, top = 12.dp),
.padding(horizontal = 24.dp) )
.padding(top = 12.dp),
contentAlignment = Alignment.Center,
) {
PlanCard(imageUrl = selectedPlan.imageUrl)
}
Spacer(modifier = Modifier.weight(1f)) Spacer(modifier = Modifier.weight(1f))
PlanDetails( PlanDetails(
title = content.title, title = content.title,
@ -263,13 +268,12 @@ private fun ConfirmFooter(content: TangemPaySelectPlanUM.Content.Confirm, modifi
} }
} }
@Suppress("MagicNumber")
@Composable @Composable
private fun PlanCard(imageUrl: String?, modifier: Modifier = Modifier) { private fun PlanCard(imageUrl: String?, modifier: Modifier = Modifier) {
Box( Box(
modifier = modifier modifier = modifier
.fillMaxWidth() .width(CARD_WIDTH.dp)
.aspectRatio(ratio = 266f / 172f), .aspectRatio(ratio = CARD_WIDTH / CARD_HEIGHT),
) { ) {
Image( Image(
modifier = Modifier.matchParentSize(), modifier = Modifier.matchParentSize(),
@ -277,14 +281,12 @@ private fun PlanCard(imageUrl: String?, modifier: Modifier = Modifier) {
contentDescription = null, contentDescription = null,
contentScale = ContentScale.FillBounds, contentScale = ContentScale.FillBounds,
) )
SubcomposeAsyncImage( AsyncImage(
modifier = Modifier.matchParentSize(), modifier = Modifier.matchParentSize(),
model = ImageRequest.Builder(LocalContext.current) model = ImageRequest.Builder(LocalContext.current)
.data(imageUrl) .data(imageUrl)
.crossfade(true) .crossfade(true)
.build(), .build(),
loading = {},
error = {},
contentScale = ContentScale.FillBounds, contentScale = ContentScale.FillBounds,
contentDescription = null, contentDescription = null,
) )