diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/components/TangemPayAddFundsComponent.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/components/TangemPayAddFundsComponent.kt index 77fda36811..e89cd44a45 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/components/TangemPayAddFundsComponent.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/components/TangemPayAddFundsComponent.kt @@ -9,6 +9,7 @@ import com.tangem.domain.models.wallet.UserWalletId import com.tangem.domain.pay.model.TangemPayTopUpData import com.tangem.features.tangempay.model.TangemPayAddFundsModel import com.tangem.features.tangempay.ui.TangemPayAddFundsContent +import com.tangem.features.tangempay.ui.TangemPayAddFundsContentV2 import java.math.BigDecimal internal class TangemPayAddFundsComponent( @@ -24,7 +25,11 @@ internal class TangemPayAddFundsComponent( @Composable override fun BottomSheet() { - TangemPayAddFundsContent(state = model.uiState) + if (model.isRedesignEnabled()) { + TangemPayAddFundsContentV2(state = model.uiState) + } else { + TangemPayAddFundsContent(state = model.uiState) + } } data class Params( diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/entity/TangemPayAddFundsUM.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/entity/TangemPayAddFundsUM.kt index 7702b0dbe9..652d8438f1 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/entity/TangemPayAddFundsUM.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/entity/TangemPayAddFundsUM.kt @@ -1,7 +1,7 @@ package com.tangem.features.tangempay.entity -import androidx.annotation.DrawableRes import com.tangem.core.ui.components.bottomsheets.message.MessageBottomSheetUM +import com.tangem.core.ui.ds.image.TangemIconUM import com.tangem.core.ui.extensions.TextReference import kotlinx.collections.immutable.ImmutableList @@ -12,7 +12,7 @@ internal data class TangemPayAddFundsUM( ) internal data class TangemPayAddFundsItemUM( - @DrawableRes val iconRes: Int, + val icon: TangemIconUM, val title: TextReference, val description: TextReference, val onClick: () -> Unit, diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/TangemPayAddFundsModel.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/TangemPayAddFundsModel.kt index 49a497f963..76a6cc91b1 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/TangemPayAddFundsModel.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/TangemPayAddFundsModel.kt @@ -7,6 +7,7 @@ import com.tangem.core.decompose.model.ParamsContainer import com.tangem.domain.models.ReceiveAddressModel import com.tangem.domain.models.ReceiveAddressModel.DisplayType import com.tangem.domain.pay.model.TangemPayTopUpData +import com.tangem.features.tangempay.TangemPayFeatureToggles import com.tangem.features.tangempay.components.TangemPayAddFundsComponent import com.tangem.features.tangempay.entity.TangemPayAddFundsUM import com.tangem.features.tangempay.model.transformers.TangemPayAddFundsUMConverter @@ -18,6 +19,7 @@ import javax.inject.Inject internal class TangemPayAddFundsModel @Inject constructor( paramsContainer: ParamsContainer, override val dispatchers: CoroutineDispatcherProvider, + private val tangemPayFeatureToggles: TangemPayFeatureToggles, ) : Model() { private val params = paramsContainer.require() @@ -38,9 +40,14 @@ internal class TangemPayAddFundsModel @Inject constructor( ), ), ) - return TangemPayAddFundsUMConverter(listener = params.listener).convert(data) + return TangemPayAddFundsUMConverter( + listener = params.listener, + isRedesignEnabled = tangemPayFeatureToggles.isRedesignEnabled, + ).convert(data) } + fun isRedesignEnabled(): Boolean = tangemPayFeatureToggles.isRedesignEnabled + fun onDismiss() { params.listener.onDismissAddFunds() } diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/transformers/TangemPayAddFundsUMConverter.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/transformers/TangemPayAddFundsUMConverter.kt index cc715b0fa4..f8d441ad8d 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/transformers/TangemPayAddFundsUMConverter.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/transformers/TangemPayAddFundsUMConverter.kt @@ -1,6 +1,11 @@ package com.tangem.features.tangempay.model.transformers +import com.tangem.core.ui.ds.image.TangemIconUM import com.tangem.core.ui.extensions.TextReference +import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.generated.icons.Icons +import com.tangem.core.ui.res.generated.icons.ic_card_20 +import com.tangem.core.ui.res.generated.icons.ic_logo_tangem_20 import com.tangem.domain.pay.model.TangemPayTopUpData import com.tangem.features.tangempay.components.AddFundsListener import com.tangem.features.tangempay.details.impl.R @@ -13,6 +18,7 @@ import kotlinx.collections.immutable.persistentListOf internal class TangemPayAddFundsUMConverter( val listener: AddFundsListener, + val isRedesignEnabled: Boolean, ) : Converter { override fun convert(value: TangemPayTopUpData?): TangemPayAddFundsUM { @@ -28,13 +34,41 @@ internal class TangemPayAddFundsUMConverter( TangemPayAddFundsUM( items = persistentListOf( TangemPayAddFundsItemUM( - iconRes = R.drawable.ic_exchange_vertical_24, + icon = if (isRedesignEnabled) { + TangemIconUM.Icon( + imageVector = Icons.ic_logo_tangem_20, + tintReference = { + TangemTheme.colors3.icon.brand + }, + ) + } else { + TangemIconUM.Icon( + iconRes = R.drawable.ic_exchange_vertical_24, + tintReference = { + TangemTheme.colors.icon.accent + }, + ) + }, title = TextReference.Res(R.string.tangempay_topup_swap_title), description = TextReference.Res(R.string.tangempay_topup_swap_body), onClick = { listener.onClickSwap(value) }, ), TangemPayAddFundsItemUM( - iconRes = R.drawable.ic_arrow_down_24, + icon = if (isRedesignEnabled) { + TangemIconUM.Icon( + imageVector = Icons.ic_card_20, + tintReference = { + TangemTheme.colors3.icon.brand + }, + ) + } else { + TangemIconUM.Icon( + iconRes = R.drawable.ic_arrow_down_24, + tintReference = { + TangemTheme.colors.icon.accent + }, + ) + }, title = TextReference.Res(R.string.tangempay_topup_receive_title), description = TextReference.Res(R.string.tangempay_topup_receive_body), onClick = { listener.onClickReceive(value) }, diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddFundsContent.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddFundsContent.kt index fdd8427f60..984595b25b 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddFundsContent.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddFundsContent.kt @@ -5,15 +5,12 @@ import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material3.Icon import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.key import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.vector.ImageVector -import androidx.compose.ui.res.vectorResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.util.fastForEach @@ -23,6 +20,8 @@ import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfigContent import com.tangem.core.ui.components.bottomsheets.message.MessageBottomSheetContent import com.tangem.core.ui.components.bottomsheets.modal.TangemModalBottomSheet import com.tangem.core.ui.components.bottomsheets.modal.TangemModalBottomSheetTitle +import com.tangem.core.ui.ds.image.TangemIcon +import com.tangem.core.ui.ds.image.TangemIconUM import com.tangem.core.ui.extensions.TextReference.Res import com.tangem.core.ui.extensions.resolveReference import com.tangem.core.ui.extensions.resourceReference @@ -102,11 +101,9 @@ private fun TangemPayTopUpItem(state: TangemPayAddFundsItemUM, modifier: Modifie ) .size(36.dp), ) { - Icon( + TangemIcon( modifier = Modifier.size(16.dp), - imageVector = ImageVector.vectorResource(id = state.iconRes), - contentDescription = null, - tint = TangemTheme.colors.icon.accent, + tangemIconUM = state.icon, ) } Column( @@ -135,13 +132,23 @@ private fun TangemPayAddFundsContentPreview() { state = TangemPayAddFundsUM( items = persistentListOf( TangemPayAddFundsItemUM( - iconRes = R.drawable.ic_exchange_vertical_24, + icon = TangemIconUM.Icon( + iconRes = R.drawable.ic_exchange_vertical_24, + tintReference = { + TangemTheme.colors.icon.accent + }, + ), title = Res(R.string.common_exchange), description = Res(R.string.exсhange_token_description), onClick = {}, ), TangemPayAddFundsItemUM( - iconRes = R.drawable.ic_arrow_down_24, + icon = TangemIconUM.Icon( + iconRes = R.drawable.ic_arrow_down_24, + tintReference = { + TangemTheme.colors.icon.accent + }, + ), title = Res(R.string.common_receive), description = Res(R.string.receive_token_description), onClick = {}, diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddFundsContentV2.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddFundsContentV2.kt new file mode 100644 index 0000000000..4cb06f07df --- /dev/null +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddFundsContentV2.kt @@ -0,0 +1,165 @@ +package com.tangem.features.tangempay.ui + +import android.content.res.Configuration +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.key +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.util.fastForEach +import com.tangem.core.ui.components.bottomsheets.TangemBottomSheet +import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig +import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfigContent +import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetType +import com.tangem.core.ui.components.bottomsheets.message.MessageBottomSheetContent +import com.tangem.core.ui.ds.image.TangemIcon +import com.tangem.core.ui.ds.image.TangemIconUM +import com.tangem.core.ui.ds.topbar.TangemTopBar +import com.tangem.core.ui.ds.topbar.TangemTopBarType +import com.tangem.core.ui.ds2.button.TangemButton +import com.tangem.core.ui.extensions.TextReference.Res +import com.tangem.core.ui.extensions.resolveReference +import com.tangem.core.ui.extensions.resourceReference +import com.tangem.core.ui.res.LocalRedesignEnabled +import com.tangem.core.ui.res.LocalVisaRedesignEnabled +import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.TangemThemePreviewRedesign +import com.tangem.core.ui.res.generated.icons.Icons +import com.tangem.core.ui.res.generated.icons.ic_card_20 +import com.tangem.core.ui.res.generated.icons.ic_logo_tangem_20 +import com.tangem.features.tangempay.details.impl.R +import com.tangem.features.tangempay.entity.TangemPayAddFundsItemUM +import com.tangem.features.tangempay.entity.TangemPayAddFundsUM +import kotlinx.collections.immutable.persistentListOf + +@Composable +internal fun TangemPayAddFundsContentV2(state: TangemPayAddFundsUM) { + TangemBottomSheet( + config = TangemBottomSheetConfig( + isShown = true, + onDismissRequest = state.dismiss, + content = TangemBottomSheetConfigContent.Empty, + ), + onBack = state.dismiss, + type = TangemBottomSheetType.Modal, + containerColor = TangemTheme.colors3.bg.secondary, + title = { + TangemTopBar( + title = resourceReference(R.string.tangempay_card_details_add_funds), + type = TangemTopBarType.BottomSheet, + endContent = { + TangemButton( + iconStart = TangemIconUM.Icon(iconRes = R.drawable.ic_close_24), + onClick = state.dismiss, + size = TangemButton.Size.X11, + variant = TangemButton.Variant.Material, + ) + }, + ) + }, + content = { + if (state.errorMessage != null) { + MessageBottomSheetContent(state.errorMessage) + } else { + Column( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = TangemTheme.dimens2.x4, vertical = TangemTheme.dimens2.x3), + ) { + state.items.fastForEach { item -> + key(item.title) { + TangemPayTopUpItem(state = item) + } + } + } + } + }, + ) +} + +@Composable +private fun TangemPayTopUpItem(state: TangemPayAddFundsItemUM, modifier: Modifier = Modifier) { + Row( + modifier = modifier + .fillMaxWidth() + .clickable(onClick = state.onClick) + .padding(vertical = TangemTheme.dimens2.x3), + horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens2.x3), + ) { + Box( + contentAlignment = Alignment.Center, + modifier = Modifier + .background( + color = TangemTheme.colors3.bg.status.infoSubtle, + shape = CircleShape, + ) + .size(TangemTheme.dimens2.x10), + ) { + TangemIcon( + modifier = Modifier.size(TangemTheme.dimens2.x5), + tangemIconUM = state.icon, + ) + } + Column(verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens2.x0_5)) { + Text( + text = state.title.resolveReference(), + style = TangemTheme.typography3.subheading.medium, + color = TangemTheme.colors3.text.primary, + ) + Text( + text = state.description.resolveReference(), + style = TangemTheme.typography3.caption.medium, + color = TangemTheme.colors3.text.secondary, + ) + } + } +} + +@Preview(showBackground = true) +@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) +@Composable +private fun TangemPayAddFundsContentPreview() { + TangemThemePreviewRedesign { + CompositionLocalProvider( + LocalVisaRedesignEnabled provides true, + LocalRedesignEnabled provides true, + ) { + TangemPayAddFundsContentV2( + state = TangemPayAddFundsUM( + items = persistentListOf( + TangemPayAddFundsItemUM( + icon = TangemIconUM.Icon( + imageVector = Icons.ic_logo_tangem_20, + tintReference = { + TangemTheme.colors3.icon.brand + }, + ), + title = Res(R.string.common_exchange), + description = Res(R.string.exсhange_token_description), + onClick = {}, + ), + TangemPayAddFundsItemUM( + icon = TangemIconUM.Icon( + imageVector = Icons.ic_card_20, + tintReference = { + TangemTheme.colors3.icon.brand + }, + ), + title = Res(R.string.common_receive), + description = Res(R.string.receive_token_description), + onClick = {}, + ), + ), + dismiss = {}, + errorMessage = null, + ), + ) + } + } +} \ No newline at end of file