diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/components/TangemPayAddToWalletComponent.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/components/TangemPayAddToWalletComponent.kt index fd905dc50e..876e0818cd 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/components/TangemPayAddToWalletComponent.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/components/TangemPayAddToWalletComponent.kt @@ -13,6 +13,7 @@ import com.tangem.features.tangempay.components.cardDetails.DefaultTangemPayCard import com.tangem.features.tangempay.components.cardDetails.TangemPayCardDetailsBlockComponent import com.tangem.features.tangempay.model.TangemPayAddToWalletModel import com.tangem.features.tangempay.ui.TangemPayAddToWalletScreen +import com.tangem.features.tangempay.ui.TangemPayAddToWalletScreenV2 import com.tangem.features.tangempay.utils.userWalletId internal class TangemPayAddToWalletComponent( @@ -35,9 +36,13 @@ internal class TangemPayAddToWalletComponent( override fun Content(modifier: Modifier) { val state by model.uiState.collectAsStateWithLifecycle() BackHandler(onBack = router::pop) - TangemPayAddToWalletScreen( - state = state, - cardDetailsBlockComponent = cardDetailsBlockComponent, - ) + if (model.isRedesignEnabled()) { + TangemPayAddToWalletScreenV2(state = state) + } else { + TangemPayAddToWalletScreen( + state = state, + cardDetailsBlockComponent = cardDetailsBlockComponent, + ) + } } } \ No newline at end of file diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/TangemPayAddToWalletModel.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/TangemPayAddToWalletModel.kt index 0920d736e8..1bb10640db 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/TangemPayAddToWalletModel.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/model/TangemPayAddToWalletModel.kt @@ -5,6 +5,7 @@ import com.tangem.core.decompose.di.ModelScoped import com.tangem.core.decompose.model.Model import com.tangem.core.decompose.navigation.Router import com.tangem.core.ui.extensions.resourceReference +import com.tangem.features.tangempay.TangemPayFeatureToggles import com.tangem.features.tangempay.details.impl.R import com.tangem.features.tangempay.entity.TangemPayAddToWalletStepItemUM import com.tangem.features.tangempay.entity.TangemPayAddToWalletUM @@ -21,11 +22,14 @@ internal class TangemPayAddToWalletModel @Inject constructor( override val dispatchers: CoroutineDispatcherProvider, private val router: Router, private val googleWalletUtil: GoogleWalletUtil, + private val featureToggles: TangemPayFeatureToggles, ) : Model() { val uiState: StateFlow field = MutableStateFlow(getInitialState()) + fun isRedesignEnabled(): Boolean = featureToggles.isRedesignEnabled + @Suppress("MagicNumber") private fun getInitialState(): TangemPayAddToWalletUM { return TangemPayAddToWalletUM( diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddToWalletScreenV2.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddToWalletScreenV2.kt new file mode 100644 index 0000000000..e0022695ac --- /dev/null +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayAddToWalletScreenV2.kt @@ -0,0 +1,230 @@ +package com.tangem.features.tangempay.ui + +import android.content.res.Configuration +import androidx.compose.foundation.* +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import com.tangem.core.ui.ds.image.TangemIconUM +import com.tangem.core.ui.ds.topbar.TangemTopBar +import com.tangem.core.ui.ds2.button.TangemButton +import com.tangem.core.ui.extensions.TextReference +import com.tangem.core.ui.extensions.resolveReference +import com.tangem.core.ui.extensions.resourceReference +import com.tangem.core.ui.extensions.stringResourceSafe +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_cross_20 +import com.tangem.features.tangempay.details.impl.R +import com.tangem.features.tangempay.entity.TangemPayAddToWalletStepItemUM +import com.tangem.features.tangempay.entity.TangemPayAddToWalletUM +import kotlinx.collections.immutable.ImmutableList +import kotlinx.collections.immutable.persistentListOf + +@Composable +internal fun TangemPayAddToWalletScreenV2(state: TangemPayAddToWalletUM, modifier: Modifier = Modifier) { + val scrollState = rememberScrollState() + + Column( + modifier = modifier + .fillMaxSize() + .background(color = TangemTheme.colors3.bg.primary) + .systemBarsPadding(), + ) { + AddToWalletTopBar(onBackClick = state.onBackClick) + AddToWalletContent( + scrollState = scrollState, + steps = state.steps, + modifier = Modifier + .fillMaxWidth() + .weight(1f), + ) + AddToWalletBottomBar(state = state) + } +} + +@Composable +private fun AddToWalletTopBar(onBackClick: () -> Unit, modifier: Modifier = Modifier) { + TangemTopBar( + modifier = modifier, + endContent = { + TangemButton( + iconStart = TangemIconUM.Icon(imageVector = Icons.ic_cross_20), + onClick = onBackClick, + size = TangemButton.Size.X11, + variant = TangemButton.Variant.Material, + ) + }, + ) +} + +@Composable +private fun AddToWalletContent( + scrollState: ScrollState, + steps: ImmutableList, + modifier: Modifier = Modifier, +) { + Column( + modifier = modifier + .verticalScroll(scrollState) + .padding(horizontal = TangemTheme.dimens2.x6) + .padding(bottom = TangemTheme.dimens2.x3), + ) { + AddToWalletCardImage() + DynamicSpacer(scrollState = scrollState) + AddToWalletTitle() + AddToWalletSteps(steps = steps) + } +} + +@Composable +private fun AddToWalletCardImage(modifier: Modifier = Modifier) { + Image( + modifier = modifier + .fillMaxWidth() + .padding( + end = TangemTheme.dimens2.x22, + bottom = TangemTheme.dimens2.x25, + ), + painter = painterResource(R.drawable.img_tangem_pay_visa), + contentDescription = null, + ) +} + +@Composable +private fun AddToWalletTitle(modifier: Modifier = Modifier) { + Text( + modifier = modifier + .padding(vertical = TangemTheme.dimens2.x3) + .fillMaxWidth(), + text = stringResourceSafe(R.string.tangempay_card_details_open_wallet_title), + style = TangemTheme.typography3.heading.medium, + color = TangemTheme.colors3.text.primary, + ) +} + +@Composable +private fun AddToWalletSteps(steps: ImmutableList, modifier: Modifier = Modifier) { + Column(modifier = modifier) { + steps.forEachIndexed { idx, step -> + StepItem( + modifier = Modifier.padding( + top = if (idx == 0) TangemTheme.dimens2.x3 else TangemTheme.dimens2.x0, + bottom = if (idx < steps.lastIndex) { + TangemTheme.dimens2.x4 + } else { + TangemTheme.dimens2.x3 + }, + ), + stepNumber = step.count, + title = step.text, + ) + } + } +} + +@Composable +private fun AddToWalletBottomBar(state: TangemPayAddToWalletUM, modifier: Modifier = Modifier) { + Column(modifier = modifier) { + TangemButton( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = TangemTheme.dimens2.x4) + .padding(top = TangemTheme.dimens2.x3, bottom = TangemTheme.dimens2.x2), + variant = TangemButton.Variant.Secondary, + size = TangemButton.Size.X12, + text = resourceReference(R.string.common_got_it), + onClick = state.onBackClick, + ) + + if (state.showAddToWalletButton) { + TangemButton( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = TangemTheme.dimens2.x4) + .padding(bottom = TangemTheme.dimens2.x3), + text = resourceReference(R.string.tangempay_card_details_open_wallet_button), + size = TangemButton.Size.X12, + onClick = state.onClickOpenWallet, + ) + } + } +} + +@Composable +private fun ColumnScope.DynamicSpacer(scrollState: ScrollState) { + if (!scrollState.canScrollBackward && !scrollState.canScrollForward) { + Spacer(modifier = Modifier.weight(1f)) + } +} + +@Composable +private fun StepItem(stepNumber: Int, title: TextReference, modifier: Modifier = Modifier) { + Row( + modifier = modifier, + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens2.x3), + ) { + Box( + modifier = Modifier + .size(TangemTheme.dimens2.x4) + .background(color = TangemTheme.colors3.bg.inverse, shape = CircleShape), + contentAlignment = Alignment.Center, + ) { + Text( + text = stepNumber.toString(), + style = TangemTheme.typography3.caption.medium, + color = TangemTheme.colors3.text.inverse.primary, + ) + } + + Text( + text = title.resolveReference(), + style = TangemTheme.typography3.subheading.medium, + color = TangemTheme.colors3.text.primary, + ) + } +} + +@Preview(showBackground = true) +@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) +@Composable +private fun PreviewTangemPayAddToWalletScreen() { + TangemThemePreviewRedesign { + TangemPayAddToWalletScreenV2( + state = TangemPayAddToWalletUM( + steps = persistentListOf( + TangemPayAddToWalletStepItemUM( + count = 1, + text = resourceReference(R.string.tangempay_card_details_open_wallet_step_1), + ), + TangemPayAddToWalletStepItemUM( + count = 2, + text = resourceReference(R.string.tangempay_card_details_open_wallet_step_2), + ), + TangemPayAddToWalletStepItemUM( + count = 3, + text = resourceReference(R.string.tangempay_card_details_open_wallet_step_3), + ), + TangemPayAddToWalletStepItemUM( + count = 4, + text = resourceReference(R.string.tangempay_card_details_open_wallet_step_4), + ), + TangemPayAddToWalletStepItemUM( + count = 5, + text = resourceReference(R.string.tangempay_card_details_open_wallet_step_5), + ), + ), + showAddToWalletButton = true, + onBackClick = {}, + onClickOpenWallet = {}, + ), + ) + } +} \ No newline at end of file diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayChangePinCodeSuccessScreenV2.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayChangePinCodeSuccessScreenV2.kt index 6f0c1d5c40..b9669aef3c 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayChangePinCodeSuccessScreenV2.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayChangePinCodeSuccessScreenV2.kt @@ -26,7 +26,7 @@ import com.tangem.core.ui.res.generated.icons.ic_success_24 import com.tangem.core.ui.test.TangemPayTestTags import com.tangem.features.tangempay.details.impl.R -private const val BG_YELLOW_COLOR = 0x52DFAF12 +private const val BG_GREEN_COLOR = 0xFF9FC824 @Suppress("MagicNumber") @Composable @@ -41,7 +41,7 @@ internal fun TangemPayChangePinCodeSuccessScreenV2(onClose: () -> Unit, modifier drawRect( brush = Brush.radialGradient( colors = listOf( - Color(BG_YELLOW_COLOR), + Color(BG_GREEN_COLOR), Color.Transparent, ), center = Offset(w / 2f, -w * .1f),