diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/entity/TangemPayCardDetailsBlockStateFactory.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/entity/TangemPayCardDetailsBlockStateFactory.kt index 0d2e66653a..7904ea72d9 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/entity/TangemPayCardDetailsBlockStateFactory.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/entity/TangemPayCardDetailsBlockStateFactory.kt @@ -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), diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/entity/TangemPayDetailsUM.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/entity/TangemPayDetailsUM.kt index 3923a92fe7..6faa4a89ea 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/entity/TangemPayDetailsUM.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/entity/TangemPayDetailsUM.kt @@ -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, diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/transformers/DetailsHiddenStateTransformer.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/transformers/DetailsHiddenStateTransformer.kt index 0856ea376b..2bbd791ced 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/transformers/DetailsHiddenStateTransformer.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/transformers/DetailsHiddenStateTransformer.kt @@ -9,6 +9,12 @@ internal class DetailsHiddenStateTransformer( ) : Transformer { 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, + ) } } \ No newline at end of file diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddToWalletScreen.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddToWalletScreen.kt index c8faca06da..eb2a5831d4 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddToWalletScreen.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddToWalletScreen.kt @@ -183,7 +183,8 @@ private fun PreviewTangemPayAddToWalletScreen() { ), cardDetailsBlockComponent = PreviewTangemPayCardDetailsBlockComponent( TangemPayCardDetailsUM( - number = "•••• •••• •••• 1245", + number = "", + numberShort = "*1245", expiry = "••/••", cvv = "•••", onCopy = {}, diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayCardDetailsBlock.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayCardDetailsBlock.kt index 2370490f90..c1f0fb4eb8 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayCardDetailsBlock.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayCardDetailsBlock.kt @@ -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, diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayDetailsScreen.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayDetailsScreen.kt index d55d82db18..aa81c82ede 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayDetailsScreen.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayDetailsScreen.kt @@ -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 = {},