Implement in-app purchases with the slide to unlock

Author: skydoves

core/data/src/main/kotlin/com/revenuecat/articles/paywall/coredata/repository/PaywallsRepository.kt

@@ -15,8 +15,11 @@
  */
 package com.revenuecat.articles.paywall.coredata.repository
 
+import android.app.Activity
 import com.revenuecat.purchases.CustomerInfo
 import com.revenuecat.purchases.Offering
+import com.revenuecat.purchases.Package
+import com.revenuecat.purchases.PurchaseResult
 import com.skydoves.sandwich.ApiResponse
 import kotlinx.coroutines.flow.Flow
 
@@ -25,4 +28,9 @@ interface PaywallsRepository {
   fun fetchOffering(): Flow<ApiResponse<Offering>>
 
   fun fetchCustomerInfo(): Flow<CustomerInfo?>
+
+  fun awaitPurchases(
+    activity: Activity,
+    availablePackage: Package,
+  ): Flow<ApiResponse<PurchaseResult>>
 }

core/data/src/main/kotlin/com/revenuecat/articles/paywall/coredata/repository/PaywallsRepositoryImpl.kt

@@ -15,14 +15,18 @@
  */
 package com.revenuecat.articles.paywall.coredata.repository
 
+import android.app.Activity
 import com.revenuecat.articles.paywall.core.network.CatArticlesDispatchers
 import com.revenuecat.articles.paywall.core.network.Dispatcher
 import com.revenuecat.purchases.CustomerInfo
 import com.revenuecat.purchases.Offering
+import com.revenuecat.purchases.Package
+import com.revenuecat.purchases.PurchaseParams
 import com.revenuecat.purchases.Purchases
 import com.revenuecat.purchases.PurchasesException
 import com.revenuecat.purchases.awaitCustomerInfo
 import com.revenuecat.purchases.awaitOfferings
+import com.revenuecat.purchases.awaitPurchase
 import com.skydoves.sandwich.ApiResponse
 import kotlinx.coroutines.CoroutineDispatcher
 import kotlinx.coroutines.flow.Flow
@@ -54,4 +58,18 @@ internal class PaywallsRepositoryImpl @Inject constructor(
       emit(null)
     }
   }
+
+  override fun awaitPurchases(activity: Activity, availablePackage: Package) = flow {
+    try {
+      val result = Purchases.sharedInstance.awaitPurchase(
+        purchaseParams = PurchaseParams.Builder(
+          activity = activity,
+          packageToPurchase = availablePackage,
+        ).build(),
+      )
+      emit(ApiResponse.of { result })
+    } catch (e: Exception) {
+      emit(ApiResponse.exception(e))
+    }
+  }
 }

core/designsystem/src/main/res/values/strings.xml

@@ -20,4 +20,5 @@
   <string name="paywall_description">This article is available to members only. \nUnlock it to access exclusive member benefits.</string>
   <string name="paywall_cta">Join Cat Articles</string>
   <string name="entitlement_premium">premium</string>
+  <string name="slide_subscribe">Slide to subscribe</string>
 </resources>

feature/paywalls/build.gradle.kts

@@ -35,4 +35,5 @@ dependencies {
   implementation(libs.androidx.compose.foundation)
   implementation(libs.androidx.compose.material)
   implementation(libs.androidx.compose.runtime)
+  implementation(libs.compose.slidetounlock)
 }

feature/paywalls/src/main/kotlin/com/revenuecat/articles/paywall/paywalls/CatCustomPaywalls.kt

@@ -15,23 +15,29 @@
  */
 package com.revenuecat.articles.paywall.paywalls
 
+import android.app.Activity
 import android.widget.Toast
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.revenuecat.purchases.Offering
+import com.revenuecat.purchases.slidetounlock.HintTexts
+import com.revenuecat.purchases.slidetounlock.SlideToUnlock
 import com.revenuecat.purchases.ui.revenuecatui.Paywall
 import com.revenuecat.purchases.ui.revenuecatui.PaywallOptions
 import com.skydoves.compose.effects.RememberedEffect
@@ -41,21 +47,56 @@ public fun CatCustomPaywalls(
   viewModel: CustomCatPaywallsViewModel = hiltViewModel(),
 ) {
   val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+  val purchaseUiState by viewModel.purchaseUiState.collectAsStateWithLifecycle()
+
   var offering: Offering? by remember { mutableStateOf(null) }
+  var isSlided by remember { mutableStateOf(false) }
 
   HandleUiState(uiState = uiState) { offering = it }
 
+  HandlePurchaseUiState(
+    uiState = purchaseUiState,
+    onPurchaseSuccess = { viewModel.navigateUp() },
+    onPurchaseFailed = { isSlided = false },
+  )
+
   Box(
     modifier = Modifier
       .fillMaxSize()
-      .background(Color.White)
-      .padding(bottom = 100.dp),
+      .background(Color.White),
   ) {
     Paywall(
       options = PaywallOptions.Builder(
         dismissRequest = { viewModel.navigateUp() },
       ).setOffering(offering).build(),
     )
+
+    val availablePackage = offering?.availablePackages?.first()
+    val activity = (LocalContext.current as? Activity)
+
+    if (availablePackage != null && activity != null) {
+      SlideToUnlock(
+        modifier = Modifier
+          .align(Alignment.BottomCenter)
+          .fillMaxWidth()
+          .padding(bottom = 60.dp, start = 20.dp, end = 20.dp),
+        isSlided = isSlided,
+        hintTexts = HintTexts.defaultHintTexts().copy(
+          defaultText = stringResource(
+            com.revenuecat.articles.paywall.compose.core.designsystem.R.string.slide_subscribe,
+          ),
+        ),
+        onSlideCompleted = {
+          isSlided = true
+          viewModel.handleEvent(
+            PaywallEvent.Purchases(
+              activity = activity,
+              availablePackage = availablePackage,
+            ),
+          )
+        },
+      )
+    }
   }
 }
 
@@ -74,3 +115,24 @@ private fun HandleUiState(
     }
   }
 }
+
+@Composable
+private fun HandlePurchaseUiState(
+  uiState: PurchaseUiState,
+  viewModel: CustomCatPaywallsViewModel = hiltViewModel(),
+  onPurchaseSuccess: () -> Unit,
+  onPurchaseFailed: () -> Unit,
+) {
+  val context = LocalContext.current
+
+  RememberedEffect(key1 = uiState) {
+    if (uiState is PurchaseUiState.Success) {
+      onPurchaseSuccess.invoke()
+    } else if (uiState is PurchaseUiState.Error) {
+      onPurchaseFailed.invoke()
+      Toast.makeText(context, uiState.message, Toast.LENGTH_SHORT).show()
+    }
+
+    viewModel.handleEvent(PaywallEvent.None)
+  }
+}

feature/paywalls/src/main/kotlin/com/revenuecat/articles/paywall/paywalls/CustomCatPaywallsViewModel.kt

@@ -15,17 +15,24 @@
  */
 package com.revenuecat.articles.paywall.paywalls
 
+import android.app.Activity
 import androidx.compose.runtime.Stable
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.revenuecat.articles.paywall.core.navigation.AppComposeNavigator
 import com.revenuecat.articles.paywall.core.navigation.CatArticlesScreen
 import com.revenuecat.articles.paywall.coredata.repository.PaywallsRepository
 import com.revenuecat.purchases.Offering
+import com.revenuecat.purchases.Package
+import com.revenuecat.purchases.PurchaseResult
 import com.skydoves.sandwich.fold
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.flatMapLatest
+import kotlinx.coroutines.flow.flowOf
+import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.mapLatest
 import kotlinx.coroutines.flow.stateIn
 import javax.inject.Inject
@@ -36,12 +43,6 @@ class CustomCatPaywallsViewModel @Inject constructor(
   private val navigator: AppComposeNavigator<CatArticlesScreen>,
 ) : ViewModel() {
 
-  val customerInfo = repository.fetchCustomerInfo().stateIn(
-    scope = viewModelScope,
-    started = SharingStarted.WhileSubscribed(5000),
-    initialValue = null,
-  )
-
   val uiState: StateFlow<PaywallsUiState> = repository.fetchOffering()
     .mapLatest { response ->
       response.fold(
@@ -54,11 +55,49 @@ class CustomCatPaywallsViewModel @Inject constructor(
       initialValue = PaywallsUiState.Loading,
     )
 
+  val event: MutableSharedFlow<PaywallEvent> = MutableSharedFlow(replay = 1)
+  val purchaseUiState: StateFlow<PurchaseUiState> = event.flatMapLatest { event ->
+    when (event) {
+      PaywallEvent.None -> flowOf(PurchaseUiState.None)
+
+      is PaywallEvent.Purchases -> {
+        repository.awaitPurchases(
+          activity = event.activity,
+          availablePackage = event.availablePackage,
+        ).map { response ->
+          response.fold(
+            onSuccess = { PurchaseUiState.Success(it) },
+            onFailure = { PurchaseUiState.Error(it) },
+          )
+        }
+      }
+    }
+  }.stateIn(
+    scope = viewModelScope,
+    started = SharingStarted.WhileSubscribed(5000),
+    initialValue = PurchaseUiState.None,
+  )
+
+  fun handleEvent(event: PaywallEvent) {
+    this.event.tryEmit(event)
+  }
+
   fun navigateUp() {
     navigator.navigateUp()
   }
 }
 
+@Stable
+sealed interface PaywallEvent {
+
+  data object None : PaywallEvent
+
+  data class Purchases(
+    val activity: Activity,
+    val availablePackage: Package,
+  ) : PaywallEvent
+}
+
 @Stable
 sealed interface PaywallsUiState {
 
@@ -68,3 +107,13 @@ sealed interface PaywallsUiState {
 
   data class Error(val message: String?) : PaywallsUiState
 }
+
+@Stable
+sealed interface PurchaseUiState {
+
+  data object None : PurchaseUiState
+
+  data class Success(val purchaseResult: PurchaseResult) : PurchaseUiState
+
+  data class Error(val message: String?) : PurchaseUiState
+}

gradle/libs.versions.toml

@@ -24,6 +24,7 @@ okhttp = "5.1.0"
 landscapist = "2.6.0"
 retrofit = "3.0.0"
 sandwich = "2.1.3"
+slidetounlock = "1.0.2"
 baselineprofile = "1.4.1"
 spotless = "6.21.0"
 androidxJunit = "1.2.1"
@@ -56,6 +57,7 @@ androidx-test-rules = { group = "androidx.test", name = "rules", version.ref = "
 androidx-startup = { group = "androidx.startup", name = "startup-runtime", version.ref = "androidxStartup" }
 compose-stable-marker = { group = "com.github.skydoves", name = "compose-stable-marker", version.ref = "composeStableMarker" }
 compose-effects = { module = "com.github.skydoves:compose-effects", version.ref = "composeEffects" }
+compose-slidetounlock = { module = "com.revenuecat.purchases:slide-to-unlock", version.ref = "slidetounlock" }
 hilt-android = { group = "com.google.dagger", name = "hilt-android", version.ref = "hilt" }
 hilt-compiler = { group = "com.google.dagger", name = "hilt-android-compiler", version.ref = "hilt" }
 hilt-android-testing = { group = "com.google.dagger", name = "hilt-android-testing", version.ref = "hilt" }