Updated on 2026-08-14

2022-02-18 12:42:00 +03:00 · 2022-02-18 12:42:00 +03:00 · 20421a758c
commit 20421a758c
parent 304bc23a3c
45 changed files with 1599 additions and 10 deletions
--- a/app/src/main/java/com/tangem/tap/common/extensions/Navigation.kt
+++ b/app/src/main/java/com/tangem/tap/common/extensions/Navigation.kt
@ -19,6 +19,7 @@ import com.tangem.tap.features.onboarding.products.otherCards.OnboardingOtherCar
 import com.tangem.tap.features.onboarding.products.twins.ui.TwinsCardsFragment
 import com.tangem.tap.features.onboarding.products.wallet.ui.OnboardingWalletFragment
 import com.tangem.tap.features.send.ui.SendFragment
+import com.tangem.tap.features.shop.ui.ShopFragment
 import com.tangem.tap.features.tokens.ui.AddTokensFragment
 import com.tangem.tap.features.wallet.ui.WalletDetailsFragment
 import com.tangem.tap.features.wallet.ui.WalletFragment
@ -69,6 +70,7 @@ fun FragmentActivity.addOnBackPressedDispatcher(
 private fun fragmentFactory(screen: AppScreen): Fragment {
    return when (screen) {
        AppScreen.Home -> HomeFragment()
+        AppScreen.Shop -> ShopFragment()
        AppScreen.OnboardingNote -> OnboardingNoteFragment()
        AppScreen.OnboardingWallet -> OnboardingWalletFragment()
        AppScreen.OnboardingTwins -> TwinsCardsFragment()
--- a/app/src/main/java/com/tangem/tap/common/redux/AppReducer.kt
+++ b/app/src/main/java/com/tangem/tap/common/redux/AppReducer.kt
@ -11,6 +11,7 @@ import com.tangem.tap.features.onboarding.products.otherCards.redux.OnboardingOt
 import com.tangem.tap.features.onboarding.products.twins.redux.TwinCardsReducer
 import com.tangem.tap.features.onboarding.products.wallet.redux.OnboardingWalletReducer
 import com.tangem.tap.features.send.redux.reducers.SendScreenReducer
+import com.tangem.tap.features.shop.redux.ShopReducer
 import com.tangem.tap.features.tokens.redux.TokensReducer
 import com.tangem.tap.features.wallet.redux.reducers.WalletReducer
 import org.rekotlin.Action
@ -32,7 +33,8 @@ fun appReducer(action: Action, state: AppState?): AppState {
        detailsState = DetailsReducer.reduce(action, state),
        disclaimerState = DisclaimerReducer.reduce(action, state),
        tokensState = TokensReducer.reduce(action, state),
-        walletConnectState = WalletConnectReducer.reduce(action, state.walletConnectState)
+        walletConnectState = WalletConnectReducer.reduce(action, state.walletConnectState),
+        shopState = ShopReducer.reduce(action, state.shopState),
    )
 }

--- a/app/src/main/java/com/tangem/tap/common/redux/AppState.kt
+++ b/app/src/main/java/com/tangem/tap/common/redux/AppState.kt
@ -23,6 +23,8 @@ import com.tangem.tap.features.onboarding.products.wallet.redux.OnboardingWallet
 import com.tangem.tap.features.onboarding.products.wallet.redux.OnboardingWalletState
 import com.tangem.tap.features.send.redux.middlewares.SendMiddleware
 import com.tangem.tap.features.send.redux.states.SendState
+import com.tangem.tap.features.shop.redux.ShopMiddleware
+import com.tangem.tap.features.shop.redux.ShopState
 import com.tangem.tap.features.tokens.redux.TokensMiddleware
 import com.tangem.tap.features.tokens.redux.TokensState
 import com.tangem.tap.features.wallet.redux.WalletState
@ -44,6 +46,7 @@ data class AppState(
    val disclaimerState: DisclaimerState = DisclaimerState(),
    val tokensState: TokensState = TokensState(),
    val walletConnectState: WalletConnectState = WalletConnectState(),
+    val shopState: ShopState = ShopState(),
 ) : StateType {

    companion object {
@ -62,7 +65,8 @@ data class AppState(
                DisclaimerMiddleware().disclaimerMiddleware,
                TokensMiddleware().tokensMiddleware,
                WalletConnectMiddleware().walletConnectMiddleware,
-                BackupMiddleware().backupMiddleware
+                BackupMiddleware().backupMiddleware,
+                ShopMiddleware().shopMiddleware,
            )
        }
    }
--- a/app/src/main/java/com/tangem/tap/common/redux/navigation/NavigationState.kt
+++ b/app/src/main/java/com/tangem/tap/common/redux/navigation/NavigationState.kt
@ -11,6 +11,7 @@ data class NavigationState(

 enum class AppScreen {
    Home,
+    Shop,
    Disclaimer,
    OnboardingNote, OnboardingWallet, OnboardingTwins, OnboardingOther,
    Wallet, WalletDetails,
--- a/app/src/main/java/com/tangem/tap/common/shop/TangemShopService.kt
+++ b/app/src/main/java/com/tangem/tap/common/shop/TangemShopService.kt
@ -0,0 +1,216 @@
+package com.tangem.tap.common.shop
+
+import android.app.Application
+import android.content.Intent
+import com.google.android.gms.wallet.PaymentData
+import com.shopify.buy3.Storefront
+import com.tangem.tap.common.shop.data.ProductType
+import com.tangem.tap.common.shop.data.TangemProduct
+import com.tangem.tap.common.shop.data.TotalSum
+import com.tangem.tap.common.shop.shopify.ShopifyShop
+import com.tangem.tap.common.shop.shopify.data.CheckoutItem
+import kotlinx.coroutines.async
+import kotlinx.coroutines.awaitAll
+import kotlinx.coroutines.coroutineScope
+import java.math.BigDecimal
+import java.util.*
+
+class TangemShopService(application: Application, shopifyShop: ShopifyShop) {
+
+    private val shopifyService = ShopifyService(application, shopifyShop)
+
+    private lateinit var product: Storefront.Product
+
+    private val checkouts = mutableMapOf<ProductType, Storefront.Checkout>()
+    private val variants = mutableMapOf<ProductType, Storefront.ProductVariant>()
+
+    private lateinit var googlePayService: GooglePayService
+
+    suspend fun getProducts(): Result<List<TangemProduct>> {
+        val result = shopifyService.getProducts()
+
+        result.onSuccess {
+            product = it.first {
+                val variantsSku = it.variants.edges.map { it.node.sku }
+                variantsSku.contains(ProductType.WALLET_2_CARDS.sku) && variantsSku.contains(
+                    ProductType.WALLET_3_CARDS.sku
+                )
+            }
+            product.variants.edges.map { it.node }
+                .forEach { variant ->
+                    if (variant.sku == ProductType.WALLET_2_CARDS.sku) {
+                        variants[ProductType.WALLET_2_CARDS] = variant
+                    } else if (variant.sku == ProductType.WALLET_3_CARDS.sku) {
+                        variants[ProductType.WALLET_3_CARDS] = variant
+                    }
+                }
+
+
+            val twoCardsProduct = TangemProduct(
+                type = ProductType.WALLET_2_CARDS,
+                totalSum = TotalSum(
+                    finalValue = variants[ProductType.WALLET_2_CARDS]?.priceV2?.format(),
+                    beforeDiscount = variants[ProductType.WALLET_2_CARDS]?.compareAtPriceV2?.format()
+                )
+            )
+            val threeCardsProduct = TangemProduct(
+                type = ProductType.WALLET_3_CARDS,
+                totalSum = TotalSum(
+                    finalValue = variants[ProductType.WALLET_3_CARDS]?.priceV2?.format(),
+                    beforeDiscount = variants[ProductType.WALLET_3_CARDS]?.compareAtPriceV2?.format()
+                )
+            )
+            createCheckouts()
+            return Result.success(listOf(twoCardsProduct, threeCardsProduct))
+        }
+        return Result.failure(result.exceptionOrNull()!!)
+    }
+
+    private suspend fun createCheckouts() {
+        variants.keys.map { coroutineScope { async { createCheckout(it) } } }.awaitAll()
+    }
+
+    private suspend fun createCheckout(productType: ProductType) {
+        val checkoutItem = CheckoutItem(variants[productType]!!.id, 1)
+        val result = shopifyService.createCheckout(listOf(checkoutItem))
+        result.onSuccess { checkout ->
+            checkouts[productType] = checkout
+        }
+    }
+
+    suspend fun checkIfGooglePayAvailable(googlePayService: GooglePayService): Result<Boolean> {
+        this.googlePayService = googlePayService
+        return googlePayService.checkIfGooglePayAvailable()
+    }
+
+    fun buyWithGooglePay(productType: ProductType) {
+        val totalPrice = checkouts[productType]!!.totalPriceV2.amount
+        googlePayService.payWithGooglePay(
+            totalPriceCents = totalPrice, currencyCode = checkouts[productType]!!.currencyCode.name,
+            merchantID = shopifyService.shop.merchantID
+        )
+    }
+
+//    fun subscribeToGooglePayResult(
+//        productType: ProductType,
+//        resultCallback: (Result<PaymentData>) -> Unit
+//    ) {
+//        googlePayService.responseCallback = { result ->
+//            result.onFailure { }
+//            result.onSuccess {
+//                completeTokenizedPayment(it, productType)
+//            }
+//        }
+//    }
+
+    suspend fun handleGooglePayResult(
+        resultCode: Int,
+        data: Intent?,
+        productType: ProductType
+    ): Result<Unit> {
+        val result = googlePayService.handleResponseFromGooglePay(resultCode, data)
+        result.onSuccess {
+            val finalizePaymentResult = completeTokenizedPayment(it, productType)
+            finalizePaymentResult.onSuccess {
+                return Result.success(Unit)
+            }
+            return Result.failure(finalizePaymentResult.exceptionOrNull()!!)
+        }
+        return Result.failure(result.exceptionOrNull()!!)
+    }
+
+    private suspend fun completeTokenizedPayment(
+        paymentData: PaymentData,
+        productType: ProductType
+    ): Result<Storefront.Checkout> {
+        val checkout = checkouts[productType]!!
+        val googlePayResponse =
+            googlePayService.parsePaymentData(paymentData)
+                ?: return Result.failure(Exception("cannot parse GPay result"))
+
+        val amount =
+            Storefront.MoneyInput(checkout.totalPriceV2.amount, checkout.totalPriceV2.currencyCode)
+        val idempotencyKey = UUID.randomUUID().toString()
+        val addressGPay = googlePayResponse.billingAddress
+
+        val address = Storefront.MailingAddressInput().apply {
+            lastName = addressGPay.name
+            address1 = addressGPay.address1
+            address2 = addressGPay.address2 + addressGPay.address3
+            province = addressGPay.administrativeArea
+            zip = addressGPay.postalCode
+            phone = addressGPay.phoneNumber
+        }
+
+
+        val payment = Storefront.TokenizedPaymentInputV3(
+            amount,
+            idempotencyKey,
+            address,
+            paymentData.toJson(),
+            Storefront.PaymentTokenType.GOOGLE_PAY
+        )
+            .setTest(true)
+
+        return shopifyService.completeWithTokenizedPayment(
+            payment = payment,
+            checkoutID = checkout.id
+        )
+    }
+
+    suspend fun applyPromoCode(promoCode: String): Result<List<TangemProduct>> {
+        val products = variants.keys
+            .map { coroutineScope { async { applyPromoCode(promoCode, it) } } }
+            .awaitAll()
+            .map { result -> result.getOrElse { return Result.failure(it) } }
+
+        return Result.success(products)
+    }
+
+    suspend fun applyPromoCode(promoCode: String, productType: ProductType): Result<TangemProduct> {
+        val checkout = checkouts[productType] ?: return Result.failure(Exception("No checkout"))
+
+        val result = if (promoCode.isBlank()) {
+            shopifyService.removeDiscount(checkout.id)
+        } else {
+            shopifyService.applyDiscount(promoCode, checkout.id)
+        }
+
+        result.onSuccess {
+            checkouts[productType] = it
+            return Result.success(
+                TangemProduct(
+                    productType,
+                    TotalSum(
+                        finalValue = it.totalPriceV2.format(),
+                        beforeDiscount = variants[productType]!!.compareAtPriceV2.format()
+                    ),
+                    appliedDiscount = it.getAppliedDiscount()
+                )
+
+            )
+        }
+        return Result.failure(result.exceptionOrNull()!!)
+    }
+
+    fun getCheckoutUrl(productType: ProductType): String {
+        return checkouts[productType]!!.webUrl
+    }
+
+    companion object {
+        const val TANGEM_WALLET_2_CARDS_SKU = "TG115x2"
+        const val TANGEM_WALLET_3_CARDS_SKU = "TG115x3"
+    }
+}
+
+private fun Storefront.MoneyV2.format(): String {
+    val currencySymbol = Currency.getInstance(currencyCode.name).symbol
+    val amountFormatted = BigDecimal(amount).setScale(2)
+    return currencySymbol + amountFormatted
+}
+
+private fun Storefront.Checkout.getAppliedDiscount(): String? {
+    val discountApplication =
+        discountApplications.edges.firstOrNull()?.node as? Storefront.DiscountCodeApplication
+    return discountApplication?.code
+}
--- a/app/src/main/java/com/tangem/tap/domain/configurable/config/ConfigManager.kt
+++ b/app/src/main/java/com/tangem/tap/domain/configurable/config/ConfigManager.kt
@ -2,6 +2,7 @@ package com.tangem.tap.domain.configurable.config

 import com.tangem.blockchain.common.BlockchainSdkConfig
 import com.tangem.common.extensions.VoidCallback
+import com.tangem.tap.common.shop.shopify.ShopifyShop
 import com.tangem.tap.domain.configurable.Loader

 /**
@ -16,7 +17,8 @@ data class Config(
    val isSendingToPayIdEnabled: Boolean = true,
    val isTopUpEnabled: Boolean = false,
    @Deprecated("Not relevant since version 3.23")
-    val isCreatingTwinCardsAllowed: Boolean = false
+    val isCreatingTwinCardsAllowed: Boolean = false,
+    val shopify: ShopifyShop? = null
 )

 class ConfigManager(
@ -52,10 +54,10 @@ class ConfigManager(
    fun resetToDefault(name: String) {
        when (name) {
            isSendingToPayIdEnabled -> config =
-                    config.copy(isSendingToPayIdEnabled = defaultConfig.isSendingToPayIdEnabled)
+                config.copy(isSendingToPayIdEnabled = defaultConfig.isSendingToPayIdEnabled)
            isTopUpEnabled -> config = config.copy(isTopUpEnabled = defaultConfig.isTopUpEnabled)
            isCreatingTwinCardsAllowed -> config =
-                    config.copy(isCreatingTwinCardsAllowed = defaultConfig.isCreatingTwinCardsAllowed)
+                config.copy(isCreatingTwinCardsAllowed = defaultConfig.isCreatingTwinCardsAllowed)
        }
    }

@ -87,6 +89,7 @@ class ConfigManager(
                infuraProjectId = values.infuraProjectId
            ),
            appsFlyerDevKey = values.appsFlyerDevKey,
+            shopify = values.shopify,
        )
        defaultConfig = defaultConfig.copy(
            coinMarketCapKey = values.coinMarketCapKey,
@ -99,6 +102,7 @@ class ConfigManager(
                infuraProjectId = values.infuraProjectId
            ),
            appsFlyerDevKey = values.appsFlyerDevKey,
+            shopify = values.shopify,
        )
    }

--- a/app/src/main/java/com/tangem/tap/domain/configurable/config/JsonModels.kt
+++ b/app/src/main/java/com/tangem/tap/domain/configurable/config/JsonModels.kt
@ -1,5 +1,7 @@
 package com.tangem.tap.domain.configurable.config

+import com.tangem.tap.common.shop.shopify.ShopifyShop
+
 /**
 [REDACTED_AUTHOR]
 */
@ -20,6 +22,7 @@ class ConfigValueModel(
        val blockcypherTokens: Set<String>?,
        val infuraProjectId: String?,
        val appsFlyerDevKey: String,
+        val shopify: ShopifyShop?
 )

 class ConfigModel(val features: FeatureModel?, val configValues: ConfigValueModel?) {
--- a/app/src/main/java/com/tangem/tap/features/home/redux/HomeMiddleware.kt
+++ b/app/src/main/java/com/tangem/tap/features/home/redux/HomeMiddleware.kt
@ -4,7 +4,6 @@ import com.tangem.tap.common.analytics.AnalyticsEvent
 import com.tangem.tap.common.analytics.AnalyticsParam
 import com.tangem.tap.common.analytics.GetCardSourceParams
 import com.tangem.tap.common.entities.IndeterminateProgressButton
-import com.tangem.tap.common.extensions.dispatchOpenUrl
 import com.tangem.tap.common.extensions.onCardScanned
 import com.tangem.tap.common.extensions.withMainContext
 import com.tangem.tap.common.post
@ -50,7 +49,7 @@ private val homeMiddleware: Middleware<AppState> = { dispatch, state ->
                }
                is HomeAction.ReadCard -> handleReadCard()
                is HomeAction.GoToShop -> {
-                    store.dispatchOpenUrl(HomeMiddleware.CARD_SHOP_URI)
+                    store.dispatch(NavigationAction.NavigateTo(AppScreen.Shop))
                    store.state.globalState.analyticsHandlers?.triggerEvent(
                        event = AnalyticsEvent.GET_CARD,
                        params = mapOf(AnalyticsParam.SOURCE.param to GetCardSourceParams.WELCOME.param)
--- a/app/src/main/java/com/tangem/tap/features/onboarding/products/wallet/ui/OnboardingWalletFragment.kt
+++ b/app/src/main/java/com/tangem/tap/features/onboarding/products/wallet/ui/OnboardingWalletFragment.kt
@ -32,7 +32,7 @@ class OnboardingWalletFragment : Fragment(R.layout.fragment_onboarding_wallet),
    StoreSubscriber<OnboardingWalletState>, FragmentOnBackPressedHandler {

    private var accessCodeDialog: AccessCodeDialog? = null
-    private lateinit var cardsWidget: BackupCardsWidget
+    private lateinit var cardsWidget: WalletCardsWidget

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
@ -48,7 +48,7 @@ class OnboardingWalletFragment : Fragment(R.layout.fragment_onboarding_wallet),
        super.onViewCreated(view, savedInstanceState)

        val leapfrog = LeapfrogWidget(fl_cards_container)
-        cardsWidget = BackupCardsWidget(leapfrog) { 200f }
+        cardsWidget = WalletCardsWidget(leapfrog) { 200f }
        startPostponedEnterTransition()

        view_pager_backup_info.adapter = BackupInfoAdapter()
--- a/app/src/main/java/com/tangem/tap/features/onboarding/products/wallet/ui/WalletCardsWidget.kt
+++ b/app/src/main/java/com/tangem/tap/features/onboarding/products/wallet/ui/WalletCardsWidget.kt
@ -10,7 +10,7 @@ import com.tangem.tangem_sdk_new.ui.widget.leapfrogWidget.LeapView
 import com.tangem.tangem_sdk_new.ui.widget.leapfrogWidget.LeapViewState
 import com.tangem.tangem_sdk_new.ui.widget.leapfrogWidget.LeapfrogWidget

-class BackupCardsWidget(
+class WalletCardsWidget(
    val leapfrogWidget: LeapfrogWidget,
    val getTopOfAnchorViewForActivateState: () -> Float,
 ) {
--- a/app/src/main/java/com/tangem/tap/features/shop/redux/ShopAction.kt
+++ b/app/src/main/java/com/tangem/tap/features/shop/redux/ShopAction.kt
@ -0,0 +1,38 @@
+package com.tangem.tap.features.shop.redux
+
+import android.content.Intent
+import com.tangem.tap.common.shop.GooglePayService
+import com.tangem.tap.common.shop.data.ProductType
+import com.tangem.tap.common.shop.data.TangemProduct
+import org.rekotlin.Action
+
+sealed class ShopAction : Action {
+
+    object LoadProducts : ShopAction() {
+        data class Success(val products: List<TangemProduct>) : ShopAction()
+    }
+
+    data class ApplyPromoCode(val promoCode: String) : ShopAction() {
+        data class Success(val promoCode: String?, val products: List<TangemProduct>) : ShopAction()
+        object InvalidPromoCode : ShopAction()
+    }
+
+    object BuyWithGooglePay : ShopAction() {
+        object UserCancelled : ShopAction()
+        data class HandleGooglePayResponse(val resultCode: Int, val data: Intent?) : ShopAction()
+
+        data class Failure(val exception: Throwable) : ShopAction()
+        object Success : ShopAction()
+    }
+
+    object StartWebCheckout : ShopAction()
+
+    data class CheckIfGooglePayAvailable(val googlePayService: GooglePayService) : ShopAction() {
+        object Success : ShopAction()
+        object Failure : ShopAction()
+    }
+
+    data class SelectProduct(val productType: ProductType) : ShopAction()
+
+    object ResetState : ShopAction()
+}
--- a/app/src/main/java/com/tangem/tap/features/shop/redux/ShopMiddleware.kt
+++ b/app/src/main/java/com/tangem/tap/features/shop/redux/ShopMiddleware.kt
@ -0,0 +1,116 @@
+package com.tangem.tap.features.shop.redux
+
+import com.tangem.tap.common.extensions.dispatchOnMain
+import com.tangem.tap.common.extensions.dispatchOpenUrl
+import com.tangem.tap.common.redux.AppState
+import com.tangem.tap.common.redux.navigation.AppScreen
+import com.tangem.tap.common.redux.navigation.NavigationAction
+import com.tangem.tap.scope
+import com.tangem.tap.shopService
+import com.tangem.tap.store
+import kotlinx.coroutines.launch
+import org.rekotlin.Action
+import org.rekotlin.Middleware
+
+class ShopMiddleware {
+
+    val shopMiddleware: Middleware<AppState> = { dispatch, state ->
+        { next ->
+            { action ->
+                handle(action)
+                next(action)
+            }
+        }
+    }
+}
+
+private fun handle(action: Action) {
+
+    val shopState = store.state.shopState
+
+    if (action is NavigationAction.NavigateTo && action.screen == AppScreen.Shop) {
+        store.dispatch(ShopAction.LoadProducts)
+    }
+
+    if (action !is ShopAction) return
+
+    when (action) {
+        is ShopAction.ApplyPromoCode -> {
+            scope.launch {
+                if (action.promoCode.isBlank() && shopState.promoCode == null) {
+                    store.dispatchOnMain(ShopAction.ApplyPromoCode.InvalidPromoCode)
+                    return@launch
+                }
+
+                val result = shopService.applyPromoCode(action.promoCode)
+
+                result.onSuccess { products ->
+                    store.dispatchOnMain(
+                        ShopAction.ApplyPromoCode.Success(
+                            promoCode = products.first { it.type == shopState.selectedProduct }.appliedDiscount,
+                            products = products
+                        )
+                    )
+                }
+                result.onFailure { store.dispatchOnMain(ShopAction.ApplyPromoCode.InvalidPromoCode) }
+            }
+        }
+        ShopAction.BuyWithGooglePay -> {
+            shopService.buyWithGooglePay(shopState.selectedProduct)
+//            shopService.subscribeToGooglePayResult(productType = shopState.selectedProduct) { result ->
+//                result.onSuccess {
+//                    store.dispatch(ShopAction.BuyWithGooglePay.Success)
+//                }
+//                result.onFailure { error ->
+//                    if (error is TangemSdkError.UserCancelled) {
+//                        store.dispatch(ShopAction.BuyWithGooglePay.UserCancelled)
+//                    } else {
+//                       store.dispatch(ShopAction.BuyWithGooglePay.Failure(error))
+//                    }
+//                }
+//            }
+        }
+        is ShopAction.BuyWithGooglePay.HandleGooglePayResponse -> {
+            scope.launch {
+                val result = shopService.handleGooglePayResult(
+                    action.resultCode,
+                    action.data,
+                    shopState.selectedProduct
+                )
+                result.onSuccess {
+                    store.dispatchOnMain(ShopAction.BuyWithGooglePay.Success)
+                }
+                result.onFailure {
+                    store.dispatchOnMain(ShopAction.BuyWithGooglePay.Failure(it))
+                }
+            }
+
+        }
+        ShopAction.LoadProducts -> {
+            scope.launch {
+                val result = shopService.getProducts()
+                result.onSuccess {
+                    store.dispatchOnMain(ShopAction.LoadProducts.Success(it))
+                }
+            }
+        }
+        is ShopAction.CheckIfGooglePayAvailable -> {
+            scope.launch {
+                val isAvailable =
+                    shopService.checkIfGooglePayAvailable(action.googlePayService).getOrNull()
+                        ?: false
+                val newAction = if (isAvailable) {
+                    ShopAction.CheckIfGooglePayAvailable.Success
+                } else {
+                    ShopAction.CheckIfGooglePayAvailable.Failure
+                }
+                store.dispatchOnMain(newAction)
+
+            }
+        }
+        ShopAction.StartWebCheckout -> {
+            store.dispatchOpenUrl(shopService.getCheckoutUrl(shopState.selectedProduct))
+        }
+    }
+
+}
--- a/app/src/main/java/com/tangem/tap/features/shop/redux/ShopReducer.kt
+++ b/app/src/main/java/com/tangem/tap/features/shop/redux/ShopReducer.kt
@ -0,0 +1,68 @@
+package com.tangem.tap.features.shop.redux
+
+import org.rekotlin.Action
+
+class ShopReducer {
+    companion object {
+        fun reduce(action: Action, state: ShopState): ShopState = internalReduce(action, state)
+    }
+}
+
+private fun internalReduce(action: Action, state: ShopState): ShopState {
+
+    if (action !is ShopAction) return state
+
+    return when (action) {
+        is ShopAction.ApplyPromoCode -> state.copy(
+            promoCode = action.promoCode,
+            promoCodeLoading = true
+        )
+        ShopAction.BuyWithGooglePay -> state
+        ShopAction.LoadProducts -> state
+        is ShopAction.LoadProducts.Success -> {
+            state.copy(
+                availableProducts = action.products,
+            )
+        }
+        ShopAction.StartWebCheckout -> state
+        ShopAction.ApplyPromoCode.InvalidPromoCode -> state.copy(
+            promoCode = null, promoCodeLoading = false
+        )
+        is ShopAction.ApplyPromoCode.Success -> {
+            state.copy(
+                promoCode = action.promoCode,
+                availableProducts = action.products,
+                promoCodeLoading = false
+
+            )
+        }
+        is ShopAction.SelectProduct -> {
+            state.copy(
+                selectedProduct = action.productType,
+            )
+        }
+        is ShopAction.CheckIfGooglePayAvailable -> {
+            state
+        }
+        ShopAction.CheckIfGooglePayAvailable.Failure -> {
+            state.copy(isGooglePayAvailable = false)
+        }
+        ShopAction.CheckIfGooglePayAvailable.Success -> {
+            state.copy(isGooglePayAvailable = false) // TODO: change when we add support for GPay
+
+        }
+        is ShopAction.BuyWithGooglePay.Failure -> {
+            state
+        }
+        is ShopAction.BuyWithGooglePay.HandleGooglePayResponse -> {
+            state
+        }
+        ShopAction.BuyWithGooglePay.Success -> {
+            state
+        }
+        ShopAction.BuyWithGooglePay.UserCancelled -> {
+            state
+        }
+        ShopAction.ResetState -> ShopState()
+    }
+}
--- a/app/src/main/java/com/tangem/tap/features/shop/redux/ShopState.kt
+++ b/app/src/main/java/com/tangem/tap/features/shop/redux/ShopState.kt
@ -0,0 +1,25 @@
+package com.tangem.tap.features.shop.redux
+
+import com.tangem.tap.common.shop.data.ProductType
+import com.tangem.tap.common.shop.data.TangemProduct
+import org.rekotlin.StateType
+
+data class ShopState(
+    val availableProducts: List<TangemProduct> = emptyList(),
+    val selectedProduct: ProductType = ProductType.WALLET_3_CARDS,
+    val promoCode: String? = null,
+    val promoCodeLoading: Boolean = false,
+    val isGooglePayAvailable: Boolean = false, // TODO: change when we add support for GPay
+) : StateType {
+    val total: String?
+        get() = availableProducts.firstOrNull { it.type == selectedProduct }?.totalSum?.finalValue
+
+    val priceBeforeDiscount: String?
+    get() {
+        val totalSum = availableProducts.firstOrNull { it.type == selectedProduct }?.totalSum
+        if (totalSum?.finalValue != totalSum?.beforeDiscount) {
+            return totalSum?.beforeDiscount
+        }
+        return null
+    }
+}
--- a/app/src/main/java/com/tangem/tap/features/shop/ui/ShopFragment.kt
+++ b/app/src/main/java/com/tangem/tap/features/shop/ui/ShopFragment.kt
@ -0,0 +1,167 @@
+package com.tangem.tap.features.shop.ui
+
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
+import android.content.Context
+import android.os.Bundle
+import android.view.View
+import android.view.View.OnFocusChangeListener
+import android.view.inputmethod.EditorInfo
+import android.view.inputmethod.InputMethodManager
+import androidx.activity.OnBackPressedCallback
+import com.tangem.tap.common.KeyboardObserver
+import com.tangem.tap.common.extensions.show
+import com.tangem.tap.common.redux.navigation.NavigationAction
+import com.tangem.tap.common.shop.data.ProductType
+import com.tangem.tap.features.BaseStoreFragment
+import com.tangem.tap.features.shop.redux.ShopAction
+import com.tangem.tap.features.shop.redux.ShopState
+import com.tangem.tap.store
+import com.tangem.wallet.R
+import kotlinx.android.synthetic.main.fragment_shop.*
+import org.rekotlin.StoreSubscriber
+
+
+class ShopFragment : BaseStoreFragment(R.layout.fragment_shop), StoreSubscriber<ShopState> {
+
+
+    override fun subscribeToStore() {
+        store.subscribe(this) { state ->
+            state.skipRepeats { oldState, newState ->
+                oldState.shopState == newState.shopState
+            }.select { it.shopState }
+        }
+        storeSubscribersList.add(this)
+    }
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        activity?.onBackPressedDispatcher?.addCallback(this, object : OnBackPressedCallback(true) {
+            override fun handleOnBackPressed() {
+                store.dispatch(NavigationAction.PopBackTo())
+                store.dispatch(ShopAction.ResetState)
+            }
+        })
+    }
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        setupCardsImages()
+        setupProductSelection()
+        setupPromoCodeEditText()
+
+        toolbar.setNavigationOnClickListener {
+            requireActivity().onBackPressed()
+        }
+
+
+        val keyboardObserver = KeyboardObserver(requireActivity())
+        keyboardObserver.registerListener { isVisible ->
+            fl_cards.show(!isVisible)
+        }
+    }
+
+    private fun setupCardsImages() {
+        imv_second.animate()
+            .translationY(70f)
+            .scaleX(0.9f)
+            .scaleY(0.9f)
+            .start()
+        imv_third.animate()
+            .translationY(140f)
+            .scaleX(0.8f)
+            .scaleY(0.8f)
+            .start()
+    }
+
+    private fun setupProductSelection() {
+        chip_product_1.setOnCheckedChangeListener { _, isChecked ->
+            if (isChecked) store.dispatch(ShopAction.SelectProduct(ProductType.WALLET_3_CARDS))
+        }
+        chip_product_2.setOnCheckedChangeListener { _, isChecked ->
+            if (isChecked) store.dispatch(ShopAction.SelectProduct(ProductType.WALLET_2_CARDS))
+        }
+    }
+
+    private fun setupPromoCodeEditText() {
+        et_promo_code.setOnEditorActionListener { view, actionId, event ->
+            if (actionId == EditorInfo.IME_ACTION_DONE) {
+                val imm: InputMethodManager =
+                    requireContext().getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
+                imm.hideSoftInputFromWindow(view.windowToken, 0)
+                view.clearFocus()
+                return@setOnEditorActionListener true
+            }
+            return@setOnEditorActionListener false
+        }
+
+        et_promo_code.onFocusChangeListener = OnFocusChangeListener { _, hasFocus ->
+            if (!hasFocus) {
+                store.dispatch(ShopAction.ApplyPromoCode(et_promo_code.text.toString()))
+            }
+        }
+    }
+
+    override fun newState(state: ShopState) {
+        if (activity == null) return
+
+        animateProductSelection(state.selectedProduct)
+        handlePriceState(state)
+        handlePromoCodeState(state)
+        handleButtonsState(state)
+    }
+
+    private fun animateProductSelection(selectedProduct: ProductType) {
+        val show = when (selectedProduct) {
+            ProductType.WALLET_2_CARDS -> false
+            ProductType.WALLET_3_CARDS -> true
+        }
+        showOrHideThirdCardWithAnimation(show)
+    }
+
+    private fun showOrHideThirdCardWithAnimation(show: Boolean) {
+        val translationY = if (show) 140f else 0f
+        if (show) imv_third.show()
+        imv_third.animate()
+            .translationY(translationY)
+            .setListener(object : AnimatorListenerAdapter() {
+                override fun onAnimationEnd(animation: Animator) {
+                    super.onAnimationEnd(animation)
+                    imv_third?.show(show)
+                }
+            })
+    }
+
+    private fun handlePriceState(state: ShopState) {
+        tv_total.text = state.total
+        tv_total_before_discount.text = state.priceBeforeDiscount
+
+        pb_price.show(state.total == null)
+
+    }
+
+    private fun handlePromoCodeState(state: ShopState) {
+        if (state.promoCode == null && !et_promo_code.hasFocus()) {
+            et_promo_code.setText("")
+        }
+        pb_promo_code.show(state.promoCodeLoading)
+    }
+
+    private fun handleButtonsState(state: ShopState) {
+        btn_pay_google_pay.show(state.isGooglePayAvailable)
+        btn_alternative_payment.show(state.isGooglePayAvailable)
+        btn_main_action.show(!state.isGooglePayAvailable)
+
+        if (state.total != null) {
+            btn_alternative_payment.setOnClickListener { store.dispatch(ShopAction.StartWebCheckout) }
+            btn_main_action.setOnClickListener { store.dispatch(ShopAction.StartWebCheckout) }
+            btn_pay_google_pay.setOnClickListener { store.dispatch(ShopAction.BuyWithGooglePay) }
+        }
+    }
+
+    override fun handleOnBackPressed() {
+        store.dispatch(ShopAction.ResetState)
+        super.handleOnBackPressed()
+    }
+}