Updated on 2026-08-14

features/promo-banners/api/src/main/kotlin/com/tangem/features/promobanners/api/PromoBannersBlockComponent.kt

@@ -20,6 +20,7 @@ interface PromoBannersBlockComponent {
     enum class Placeholder(val value: String) {
         MAIN("main"),
         FEED("shtorka"),
+        PAYMENT_ACCOUNT_MAIN("payment_account_main"),
     }
 
     interface Factory : ComponentFactory<Params, PromoBannersBlockComponent>

features/promo-banners/impl/src/main/kotlin/com/tangem/features/promobanners/impl/ui/PromoBannersBlock.kt

@@ -71,10 +71,13 @@ private fun bannerContainerColor(placeholder: Placeholder): Color = if (LocalRed
     when (placeholder) {
         Placeholder.MAIN -> TangemTheme.colors2.surface.level1
         Placeholder.FEED -> TangemTheme.colors2.surface.level3
+        Placeholder.PAYMENT_ACCOUNT_MAIN -> TangemTheme.colors3.bg.opaque.primary
     }
 } else {
     when (placeholder) {
-        Placeholder.MAIN -> TangemTheme.colors.background.primary
+        Placeholder.MAIN,
+        Placeholder.PAYMENT_ACCOUNT_MAIN,
+        -> TangemTheme.colors.background.primary
         Placeholder.FEED -> TangemTheme.colors.background.action
     }
 }

features/tangempay/details/impl/build.gradle.kts

@@ -31,6 +31,7 @@ dependencies {
     implementation(projects.features.tokenRecieve.api)
     implementation(projects.features.txhistory.api)
     implementation(projects.features.tokendetails.api)
+    implementation(projects.features.promoBanners.api)
 
     /** Domain */
     implementation(projects.domain.balanceHiding)

features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/components/DefaultTangemPayDetailsContainerComponent.kt

@@ -15,6 +15,7 @@ import com.tangem.core.decompose.context.AppComponentContext
 import com.tangem.core.decompose.context.childByContext
 import com.tangem.core.decompose.navigation.inner.InnerRouter
 import com.tangem.core.ui.decompose.ComposableContentComponent
+import com.tangem.features.promobanners.api.PromoBannersBlockComponent
 import com.tangem.features.tangempay.navigation.TangemPayAccountDetailsInnerRoute
 import com.tangem.features.tangempay.utils.userWalletId
 import com.tangem.features.tokendetails.ExpressTransactionsComponent
@@ -29,6 +30,7 @@ internal class DefaultTangemPayDetailsContainerComponent @AssistedInject constru
     private val tangemPayCardPageFactory: TangemPayCardPageComponent.Factory,
     private val tokenReceiveComponentFactory: TokenReceiveComponent.Factory,
     private val expressTransactionsComponentFactory: ExpressTransactionsComponent.Factory,
+    private val promoBannersBlockComponentFactory: PromoBannersBlockComponent.Factory,
 ) : AppComponentContext by appComponentContext, TangemPayDetailsContainerComponent {
 
     private val stackNavigation = StackNavigation<TangemPayAccountDetailsInnerRoute>()
@@ -65,6 +67,7 @@ internal class DefaultTangemPayDetailsContainerComponent @AssistedInject constru
             params = params,
             tokenReceiveComponentFactory = tokenReceiveComponentFactory,
             expressTransactionsComponentFactory = expressTransactionsComponentFactory,
+            promoBannersBlockComponentFactory = promoBannersBlockComponentFactory,
         )
         is TangemPayAccountDetailsInnerRoute.CardDetails -> tangemPayCardPageFactory.create(
             context = childByContext(componentContext = componentContext, router = innerRouter),

features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/components/TangemPayDetailsComponent.kt

@@ -4,6 +4,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.arkivanov.decompose.ComponentContext
 import com.arkivanov.decompose.extensions.compose.subscribeAsState
@@ -18,6 +19,7 @@ import com.tangem.core.ui.components.NavigationBar3ButtonsScrim
 import com.tangem.core.ui.decompose.ComposableBottomSheetComponent
 import com.tangem.core.ui.decompose.ComposableContentComponent
 import com.tangem.core.ui.res.LocalVisaRedesignEnabled
+import com.tangem.features.promobanners.api.PromoBannersBlockComponent
 import com.tangem.features.tangempay.components.txHistory.DefaultTangemPayTxHistoryComponent
 import com.tangem.features.tangempay.components.txHistory.TangemPayTxHistoryDetailsComponent
 import com.tangem.features.tangempay.entity.TangemPayDetailsNavigation
@@ -34,10 +36,20 @@ internal class TangemPayDetailsComponent(
     private val params: TangemPayDetailsContainerComponent.Params,
     private val tokenReceiveComponentFactory: TokenReceiveComponent.Factory,
     private val expressTransactionsComponentFactory: ExpressTransactionsComponent.Factory,
+    private val promoBannersBlockComponentFactory: PromoBannersBlockComponent.Factory,
 ) : AppComponentContext by appComponentContext, ComposableContentComponent {
 
     private val model: TangemPayDetailsModel = getOrCreateModel(params = params)
 
+    private val promoBannersBlockComponent: PromoBannersBlockComponent by lazy {
+        promoBannersBlockComponentFactory.create(
+            context = child("promoBannersBlockComponent"),
+            params = PromoBannersBlockComponent.Params(
+                placeholder = PromoBannersBlockComponent.Placeholder.PAYMENT_ACCOUNT_MAIN,
+            ),
+        )
+    }
+
     private val bottomSheetSlot = childSlot(
         source = model.bottomSheetNavigation,
         serializer = TangemPayDetailsNavigation.serializer(),
@@ -63,6 +75,7 @@ internal class TangemPayDetailsComponent(
     }
 
     init {
+        promoBannersBlockComponent.setVisibleOnScreen(true)
         lifecycle.subscribe(
             onPause = model::onPause,
             onResume = model::onResume,
@@ -73,6 +86,9 @@ internal class TangemPayDetailsComponent(
     override fun Content(modifier: Modifier) {
         val state by model.uiState.collectAsStateWithLifecycle()
         val bottomSheet by bottomSheetSlot.subscribeAsState()
+        val promoBannersBlock = ComposableContentComponent { promoModifier ->
+            promoBannersBlockComponent.ContentWithPadding(modifier = promoModifier, horizontalItemPadding = 16.dp)
+        }
         CompositionLocalProvider(LocalVisaRedesignEnabled provides model.isRedesignEnabled()) {
             NavigationBar3ButtonsScrim()
             if (LocalVisaRedesignEnabled.current) {
@@ -80,6 +96,7 @@ internal class TangemPayDetailsComponent(
                     state = state,
                     txHistoryComponent = txHistoryComponent,
                     expressTransactionsComponent = expressTransactionsComponent,
+                    promoBannersBlockComponent = promoBannersBlock,
                     modifier = modifier,
                 )
             } else {

features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayDetailsScreenV2.kt

@@ -37,6 +37,7 @@ import com.tangem.core.ui.components.containers.pullToRefresh.TangemPullToRefres
 import com.tangem.core.ui.components.notifications.NotificationConfig
 import com.tangem.core.ui.components.text.applyBladeBrush
 import com.tangem.core.ui.components.topFade
+import com.tangem.core.ui.decompose.ComposableContentComponent
 import com.tangem.core.ui.ds.button.*
 import com.tangem.core.ui.ds.image.TangemIconUM
 import com.tangem.core.ui.ds.message.TangemMessage
@@ -77,6 +78,7 @@ internal fun TangemPayDetailsScreenV2(
     state: TangemPayDetailsUM,
     txHistoryComponent: TangemPayTxHistoryComponent,
     expressTransactionsComponent: ExpressTransactionsComponent,
+    promoBannersBlockComponent: ComposableContentComponent,
     modifier: Modifier = Modifier,
 ) {
     val listState = rememberLazyListState()
@@ -116,6 +118,11 @@ internal fun TangemPayDetailsScreenV2(
                 ),
             ) {
                 payDetailsBody(state)
+                item("promoBannersBlock") {
+                    promoBannersBlockComponent.Content(
+                        modifier = Modifier.padding(vertical = 12.dp),
+                    )
+                }
                 with(expressTransactionsComponent) {
                     expressTransactionsContent(
                         state = expressState.transactionsToDisplay,
@@ -455,6 +462,7 @@ private fun TangemPayDetailsScreenPreview(
                 txHistoryUM = PreviewTangemPayTxHistoryComponent.contentUM,
             ),
             expressTransactionsComponent = PreviewEmptyExpressTransactionsComponent(),
+            promoBannersBlockComponent = ComposableContentComponent.EMPTY,
         )
     }
 }
@@ -469,6 +477,7 @@ private fun TangemPayDetailsTxHistoryScreenPreview(
             state = TangemPayDetailsUMProvider().values.first(),
             txHistoryComponent = PreviewTangemPayTxHistoryComponent(txHistoryUM = state),
             expressTransactionsComponent = PreviewEmptyExpressTransactionsComponent(),
+            promoBannersBlockComponent = ComposableContentComponent.EMPTY,
         )
     }
 }