Updated on 2026-08-14

This commit is contained in:
Tangem 2025-12-01 19:25:35 +04:00
parent d5da53f5d7
commit 8b205b27f1
6 changed files with 70 additions and 26 deletions

View file

@ -12,7 +12,8 @@ internal class TangemPayCardDetailsBlockStateFactory(
) {
fun getInitialState() = TangemPayCardDetailsUM(
number = "${StringsSigns.ASTERISK}$cardNumberEnd",
number = "",
numberShort = "${StringsSigns.ASTERISK}$cardNumberEnd",
expiry = "",
cvv = "",
buttonText = resourceReference(R.string.tangempay_card_details_reveal_text),

View file

@ -18,6 +18,7 @@ internal data class TangemPayDetailsUM(
internal data class TangemPayCardDetailsUM(
val number: String,
val numberShort: String,
val expiry: String,
val cvv: String,
val buttonText: TextReference = TextReference.EMPTY,

View file

@ -9,6 +9,12 @@ internal class DetailsHiddenStateTransformer(
) : Transformer<TangemPayCardDetailsUM> {
override fun transform(prevState: TangemPayCardDetailsUM): TangemPayCardDetailsUM {
return stateFactory.getInitialState().copy(cardFrozenState = prevState.cardFrozenState)
val initialState = stateFactory.getInitialState()
return prevState.copy(
buttonText = initialState.buttonText,
onClick = initialState.onClick,
isHidden = initialState.isHidden,
isLoading = initialState.isLoading,
)
}
}

View file

@ -183,7 +183,8 @@ private fun PreviewTangemPayAddToWalletScreen() {
),
cardDetailsBlockComponent = PreviewTangemPayCardDetailsBlockComponent(
TangemPayCardDetailsUM(
number = "•••• •••• •••• 1245",
number = "",
numberShort = "*1245",
expiry = "••/••",
cvv = "•••",
onCopy = {},

View file

@ -23,8 +23,9 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider
import androidx.compose.ui.unit.dp
import com.tangem.core.ui.components.PrimaryButton
import com.tangem.core.ui.components.SpacerWMax
import com.tangem.core.ui.components.buttons.common.TangemButton
import com.tangem.core.ui.components.buttons.common.TangemButtonIconPosition
import com.tangem.core.ui.components.buttons.common.TangemButtonSize
import com.tangem.core.ui.extensions.resourceReference
import com.tangem.core.ui.extensions.stringResourceSafe
@ -34,11 +35,13 @@ import com.tangem.domain.visa.model.TangemPayCardFrozenState
import com.tangem.features.tangempay.details.impl.R
import com.tangem.features.tangempay.entity.TangemPayCardDetailsUM
private val CustomCardBlockColor = Color(0x1F828282)
@Suppress("MagicNumber")
@Composable
internal fun TangemPayCard(state: TangemPayCardDetailsUM, modifier: Modifier = Modifier) {
val isCardFlipped = !state.isHidden
val animDuration = 900
val animDuration = 600
val zAxisDistance = 50f // distance between camera and Card
// rotate Y-axis with animation
@ -88,7 +91,7 @@ internal fun TangemPayCard(state: TangemPayCardDetailsUM, modifier: Modifier = M
TangemPayCardDetailsHiddenBlock(
cardFrozenState = state.cardFrozenState,
isLoading = state.isLoading,
shortCardNumber = state.number,
shortCardNumber = state.numberShort,
onShowDetails = state.onClick,
)
}
@ -144,11 +147,11 @@ private fun TangemPayCardDetailsHiddenBlock(
TangemPayCardFrozenState.Unfrozen -> Unit
}
SpacerWMax()
PrimaryButton(
TangemPayCardDetailsCustomButton(
modifier = Modifier.padding(bottom = 8.dp),
text = stringResourceSafe(id = R.string.tangempay_card_details_show_details),
showProgress = isLoading,
onClick = onShowDetails,
size = TangemButtonSize.Small,
showProgress = isLoading,
)
}
}
@ -168,23 +171,21 @@ private fun TangemPayCardDetailsShownBlock(
) {
Column(
modifier = modifier
.padding(8.dp)
.fillMaxSize(),
) {
CardDetailsTextContainer(
modifier = Modifier
.fillMaxWidth()
.weight(1f),
.padding(top = 16.dp, bottom = 12.dp, start = 16.dp, end = 16.dp)
.fillMaxWidth(),
title = stringResourceSafe(R.string.tangempay_card_details_card_number),
text = cardNumber,
onCopy = onCopyCardNumber,
)
HorizontalDivider(thickness = 1.dp, color = Color(0x1F828282)) // Hardcode since background is an image
Row(
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth()
.weight(1f)
.padding(top = 8.dp),
.weight(1f),
horizontalArrangement = Arrangement.spacedBy(12.dp),
) {
CardDetailsTextContainer(
@ -195,7 +196,6 @@ private fun TangemPayCardDetailsShownBlock(
text = expiry,
onCopy = onCopyExpiry,
)
VerticalDivider(thickness = 1.dp, color = Color(0x1F828282)) // Hardcode since background is an image
CardDetailsTextContainer(
modifier = Modifier
.weight(1f)
@ -207,10 +207,11 @@ private fun TangemPayCardDetailsShownBlock(
}
Row {
SpacerWMax()
PrimaryButton(
TangemPayCardDetailsCustomButton(
modifier = Modifier.padding(end = 16.dp, bottom = 8.dp),
text = stringResourceSafe(id = R.string.tangempay_card_details_hide_details),
onClick = onHideDetails,
size = TangemButtonSize.Small,
showProgress = false,
)
}
}
@ -219,11 +220,16 @@ private fun TangemPayCardDetailsShownBlock(
@Composable
private fun CardDetailsTextContainer(title: String, text: String, onCopy: () -> Unit, modifier: Modifier = Modifier) {
Row(
modifier = modifier.padding(12.dp),
modifier = modifier
.background(
color = CustomCardBlockColor,
shape = RoundedCornerShape(11.dp),
)
.padding(12.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
) {
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
Text(
text = title,
style = TangemTheme.typography.subtitle2,
@ -236,9 +242,7 @@ private fun CardDetailsTextContainer(title: String, text: String, onCopy: () ->
)
}
IconButton(
modifier = Modifier
.padding(end = TangemTheme.dimens.spacing12)
.size(TangemTheme.dimens.size32),
modifier = Modifier.size(TangemTheme.dimens.size32),
onClick = onCopy,
) {
Icon(
@ -251,6 +255,31 @@ private fun CardDetailsTextContainer(title: String, text: String, onCopy: () ->
}
}
@Composable
private fun TangemPayCardDetailsCustomButton(
text: String,
onClick: () -> Unit,
showProgress: Boolean,
modifier: Modifier = Modifier,
) {
TangemButton(
modifier = modifier,
text = text,
icon = TangemButtonIconPosition.None,
onClick = onClick,
colors = ButtonColors(
containerColor = CustomCardBlockColor,
contentColor = TangemTheme.colors.text.constantWhite,
disabledContainerColor = TangemTheme.colors.text.constantWhite,
disabledContentColor = TangemTheme.colors.text.constantWhite,
),
enabled = true,
showProgress = showProgress,
size = TangemButtonSize.Small,
textStyle = TangemTheme.typography.subtitle1,
)
}
@Preview(widthDp = 400, heightDp = 700, showBackground = true)
@Composable
private fun TangemPayCardDetailsBlockV2Preview(
@ -277,7 +306,8 @@ private class TangemPayCardDetailsUMProvider : CollectionPreviewParameterProvide
TangemPayCardDetailsUM(
isLoading = false,
onClick = {},
number = "*1245",
number = "1234 5678 9012 3456",
numberShort = "*3456",
expiry = "",
cvv = "",
buttonText = resourceReference(R.string.tangempay_card_details_show_details),
@ -288,7 +318,8 @@ private class TangemPayCardDetailsUMProvider : CollectionPreviewParameterProvide
TangemPayCardDetailsUM(
isLoading = false,
onClick = {},
number = "*1245",
number = "1234 5678 9012 3456",
numberShort = "*3456",
expiry = "",
cvv = "",
buttonText = resourceReference(R.string.tangempay_card_details_show_details),
@ -299,7 +330,8 @@ private class TangemPayCardDetailsUMProvider : CollectionPreviewParameterProvide
TangemPayCardDetailsUM(
isLoading = false,
onClick = {},
number = "*1245",
number = "1234 5678 9012 3456",
numberShort = "*3456",
expiry = "",
cvv = "",
buttonText = resourceReference(R.string.tangempay_card_details_show_details),
@ -314,6 +346,7 @@ private class TangemPayCardDetailsUMProvider : CollectionPreviewParameterProvide
onCopy = {},
isHidden = false,
number = "1234 5678 9012 3456",
numberShort = "*3456",
expiry = "12/34",
cvv = "123",
cardFrozenState = TangemPayCardFrozenState.Unfrozen,

View file

@ -302,6 +302,7 @@ private fun TangemPayDetailsScreenPreview(
cardDetailsBlockComponent = PreviewTangemPayCardDetailsBlockComponent(
TangemPayCardDetailsUM(
number = "•••• •••• •••• 1245",
numberShort = "*1245",
expiry = "••/••",
cvv = "•••",
onCopy = {},
@ -360,6 +361,7 @@ private fun TangemPayDetailsTxHistoryScreenPreview(
cardDetailsBlockComponent = PreviewTangemPayCardDetailsBlockComponent(
TangemPayCardDetailsUM(
number = "•••• •••• •••• 1245",
numberShort = "*1245",
expiry = "••/••",
cvv = "•••",
onCopy = {},