Add cart quantity controls and expose preload cache invalidate function (#140)

Author: kiftio

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 3.1.2 October 15 2024
 
 - Prevent entering recovery mode for single-use multipass URLs.
+- Add invalidate() function to interface to allow invalidating preloaded checkouts when necessary.
 
 ## 3.1.1 October 2, 2024
 

README.md

@@ -194,6 +194,12 @@ ShopifyCheckoutSheetKit.configure {
 ShopifyCheckoutSheetKit.preload(checkoutUrl) // no-op
 ```
 
+#### Invalidation
+
+To invalidate a preloaded checkout, call `ShopifyCheckoutSheetKit.invalidate()`. This function will be a no-op if no checkout is preloaded.
+
+You may wish to do this if the buyer changes shortly before entering checkout, e.g. by changing cart quantity on a cart view.
+
 #### Lifecycle management for preloaded checkout
 
 Preloading renders a checkout in a background webview, which is brought to foreground when `ShopifyCheckoutSheetKit.present()` is called. The content of preloaded checkout reflects the state of the cart when `preload()` was initially called. If the cart is mutated after `preload()` is called, the application is responsible for invalidating the preloaded checkout to ensure that up-to-date checkout content is displayed to the buyer:

lib/src/main/java/com/shopify/checkoutsheetkit/ShopifyCheckoutSheetKit.kt

@@ -68,6 +68,14 @@ public object ShopifyCheckoutSheetKit {
         CheckoutWebView.clearCache()
     }
 
+    /**
+     * Invalidate WebViews cached due to preload calls
+     */
+    @JvmStatic
+    public fun invalidate() {
+        CheckoutWebView.markCacheEntryStale()
+    }
+
     /**
      * Preloads a Shopify checkout in the background.
      *

lib/src/test/java/com/shopify/checkoutsheetkit/CheckoutWebViewContainerTest.kt

@@ -34,7 +34,6 @@ import org.mockito.kotlin.whenever
 import org.robolectric.Robolectric
 import org.robolectric.RobolectricTestRunner
 import org.robolectric.Shadows.shadowOf
-import kotlin.time.Duration.Companion.minutes
 
 @RunWith(RobolectricTestRunner::class)
 class CheckoutWebViewContainerTest {

lib/src/test/java/com/shopify/checkoutsheetkit/ShopifyCheckoutSheetKitTest.kt

@@ -76,6 +76,25 @@ class ShopifyCheckoutSheetKitTest {
         }
     }
 
+    @Test
+    fun `invalidate marks cache entry as stale meaning it will not be used when presenting`() {
+        Robolectric.buildActivity(ComponentActivity::class.java).use { activityController ->
+            withPreloadingEnabled {
+                val url = "https://shopify.dev"
+                ShopifyCheckoutSheetKit.preload(url, activityController.get())
+                ShadowLooper.shadowMainLooper().runToEndOfTasks()
+
+                ShopifyCheckoutSheetKit.invalidate()
+                ShadowLooper.shadowMainLooper().runToEndOfTasks()
+
+                assertThat(CheckoutWebView.cacheEntry).isNotNull()
+                val entry = CheckoutWebView.cacheEntry!!
+
+                assertThat(entry.isStale).isTrue()
+            }
+        }
+    }
+
     @Test
     fun `preload caches a new WebView, loads the URL, and destroys old view if cache is not empty`() {
         Robolectric.buildActivity(ComponentActivity::class.java).use { activityController ->

samples/MobileBuyIntegration/app/src/main/java/com/shopify/checkout_sdk_mobile_buy_integration_sample/cart/CartItem.kt

@@ -27,15 +27,26 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.Card
 import androidx.compose.material.Text
+import androidx.compose.material.TextButton
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 
 @Composable
-fun CartItem(title: String, vendor: String, quantity: Int, modifier: Modifier) {
+fun CartItem(
+    loading: Boolean,
+    title: String,
+    vendor: String,
+    quantity: Int,
+    setQuantity: (Int) -> Unit,
+    modifier: Modifier
+) {
     Card(
         elevation = 0.dp,
         modifier = modifier
@@ -44,12 +55,31 @@ fun CartItem(title: String, vendor: String, quantity: Int, modifier: Modifier) {
             horizontalArrangement = Arrangement.SpaceBetween,
             modifier = Modifier.fillMaxWidth(.9f).padding(10.dp),
         ) {
-            Column(Modifier.weight(.9f)) {
+            Column(Modifier.weight(.9f).align(Alignment.CenterVertically)) {
                 Text(title)
                 Text(vendor, fontSize = 10.sp)
             }
 
-            Text("$quantity")
+            Row {
+                TextButton(
+                    modifier = Modifier.width(40.dp),
+                    enabled = !loading,
+                    onClick = { setQuantity(quantity - 1) }) {
+                    Text("-")
+                }
+                Text(
+                    text = "$quantity",
+                    textAlign = TextAlign.Center,
+                    modifier = Modifier.align(Alignment.CenterVertically)
+                )
+                TextButton(
+                    modifier = Modifier.width(40.dp),
+                    enabled = !loading,
+                    onClick = { setQuantity(quantity + 1) }
+                ) {
+                    Text("+")
+                }
+            }
         }
     }
 }

samples/MobileBuyIntegration/app/src/main/java/com/shopify/checkout_sdk_mobile_buy_integration_sample/cart/CartState.kt

@@ -38,7 +38,7 @@ sealed class CartState {
 
 }
 
-data class CartLine(val title: String, val vendor: String, val quantity: Int)
+data class CartLine(val id: ID, val title: String, val vendor: String, val quantity: Int)
 data class CartTotals(val totalQuantity: Int, val totalAmount: Amount)
 data class Amount(val currency: String, val price: Double)
 

samples/MobileBuyIntegration/app/src/main/java/com/shopify/checkout_sdk_mobile_buy_integration_sample/cart/CartView.kt

@@ -36,13 +36,18 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.material.Button
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
+import androidx.compose.material.LinearProgressIndicator
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Delete
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
+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.platform.LocalContext
@@ -54,6 +59,7 @@ import com.shopify.checkout_sdk_mobile_buy_integration_sample.AppBarState
 import com.shopify.checkout_sdk_mobile_buy_integration_sample.common.toDisplayText
 import com.shopify.checkoutsheetkit.DefaultCheckoutEventProcessor
 import com.shopify.checkoutsheetkit.ShopifyCheckoutSheetKit
+import com.shopify.graphql.support.ID
 
 @Composable
 fun <T: DefaultCheckoutEventProcessor> CartView(
@@ -62,7 +68,10 @@ fun <T: DefaultCheckoutEventProcessor> CartView(
     checkoutEventProcessor: T,
 ) {
     val state = cartViewModel.cartState.collectAsState().value
+    val loading = cartViewModel.loadingState.collectAsState().value
+
     val activity = LocalContext.current as ComponentActivity
+    var mutableQuantity by remember { mutableStateOf<Map<String, Int>>(mutableMapOf()) }
 
     LaunchedEffect(state) {
         setAppBarState(
@@ -86,21 +95,32 @@ fun <T: DefaultCheckoutEventProcessor> CartView(
         }
     }
 
+    if (loading) {
+        LinearProgressIndicator(
+            modifier = Modifier.fillMaxWidth(),
+        )
+    }
+
     Column(
         Modifier
             .fillMaxSize()
             .padding(20.dp),
         verticalArrangement = Arrangement.SpaceBetween
     ) {
-        val activity = LocalContext.current as ComponentActivity
         when (state) {
             is CartState.Empty -> {
                 EmptyCartMessage(Modifier.fillMaxSize())
             }
 
             is CartState.Populated -> {
+                mutableQuantity = state.cartLines.associate {
+                    it.title to it.quantity
+                }
+
                 CartLines(
                     lines = state.cartLines,
+                    loading = loading,
+                    setQuantity = cartViewModel::updateCartQuantity,
                     modifier = Modifier.weight(1f, false)
                 )
                 CheckoutButton(
@@ -120,7 +140,7 @@ fun <T: DefaultCheckoutEventProcessor> CartView(
 }
 
 @Composable
-private fun CartLines(lines: List<CartLine>, modifier: Modifier = Modifier) {
+private fun CartLines(lines: List<CartLine>, loading: Boolean, setQuantity: (ID, Int) -> Unit, modifier: Modifier = Modifier) {
     LazyColumn(modifier) {
         items(lines) { item ->
             Row(
@@ -133,6 +153,8 @@ private fun CartLines(lines: List<CartLine>, modifier: Modifier = Modifier) {
                     title = item.title,
                     vendor = item.vendor,
                     quantity = item.quantity,
+                    setQuantity = { quantity -> setQuantity(item.id, quantity) },
+                    loading = loading,
                     modifier = Modifier
                         .fillMaxWidth(.9f)
                         .align(alignment = Alignment.CenterVertically)

samples/MobileBuyIntegration/app/src/main/java/com/shopify/checkout_sdk_mobile_buy_integration_sample/cart/CartViewModel.kt

@@ -22,6 +22,7 @@
  */
 package com.shopify.checkout_sdk_mobile_buy_integration_sample.cart
 
+import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
@@ -47,6 +48,9 @@ class CartViewModel(
     private val _cartState = MutableStateFlow<CartState>(CartState.Empty)
     val cartState: StateFlow<CartState> = _cartState.asStateFlow()
 
+    private val _loadingState = MutableStateFlow(false)
+    val loadingState: StateFlow<Boolean> = _loadingState
+
     private var demoBuyerIdentityEnabled = false
 
     init {
@@ -68,6 +72,21 @@ class CartViewModel(
         }
     }
 
+    fun updateCartQuantity(lineItemID: ID, quantity: Int) {
+        when (val state = _cartState.value) {
+            is CartState.Populated -> {
+                _loadingState.value = true
+                client.cartLinesUpdate(state.cartID, lineItemID, quantity, {
+                    // Invalidate any preload calls so checkout reflects latest quantity
+                    ShopifyCheckoutSheetKit.invalidate()
+                    _cartState.value = it.data?.cartLinesUpdate?.cart.toUiState()
+                    _loadingState.value = false
+                })
+            }
+            is CartState.Empty -> Log.e("CartViewModel", "attempting to update the quantity on an empty cart")
+        }
+    }
+
     fun clearCart() {
         _cartState.value = CartState.Empty
     }
@@ -111,8 +130,10 @@ class CartViewModel(
             return CartState.Empty
         }
         val cartLines = lines.nodes.mapNotNull { cartLine ->
+            val cartLineId = cartLine.id
             (cartLine.merchandise as? Storefront.ProductVariant)?.let {
                 CartLine(
+                    id = cartLineId,
                     title = it.product.title,
                     vendor = it.product.vendor,
                     quantity = cartLine.quantity

samples/MobileBuyIntegration/app/src/main/java/com/shopify/checkout_sdk_mobile_buy_integration_sample/common/client/StorefrontClient.kt

@@ -30,6 +30,7 @@ import com.shopify.buy3.Storefront
 import com.shopify.buy3.Storefront.CartBuyerIdentityInput
 import com.shopify.buy3.Storefront.CartInput
 import com.shopify.buy3.Storefront.CartLineInput
+import com.shopify.buy3.Storefront.CartLineUpdateInput
 import com.shopify.buy3.Storefront.CartQuery
 import com.shopify.buy3.Storefront.MutationQuery
 import com.shopify.buy3.Storefront.ProductVariantQuery
@@ -73,6 +74,29 @@ class StorefrontClient(private val client: GraphClient) {
         executeQuery(query, successCallback, failureCallback)
     }
 
+    fun cartLinesUpdate(
+        cartId: ID,
+        lineItemID: ID,
+        quantity: Int,
+        successCallback: (GraphResponse<Storefront.Mutation>) -> Unit,
+        failureCallback: ((GraphError) -> Unit)? = {},
+    ) {
+        val lineUpdateInput = CartLineUpdateInput(lineItemID).setQuantity(quantity)
+
+        val mutation =  Storefront.mutation { mutation ->
+            mutation.cartLinesUpdate(
+                cartId,
+                listOf(lineUpdateInput)
+            ) { cartLinesUpdate ->
+                cartLinesUpdate.cart { cartQuery ->
+                    cartQueryFragment(cartQuery)
+                }
+            }
+        }
+
+        executeMutation(mutation, successCallback, failureCallback)
+    }
+
     fun createCart(
         variant: Storefront.ProductVariant,
         buyerIdentity: CartBuyerIdentityInput?,
@@ -129,6 +153,7 @@ class StorefrontClient(private val client: GraphClient) {
             }
             .lines({ it.first(250) }) { lineQuery ->
                 lineQuery.nodes { line ->
+                    line.id()
                     line.quantity()
                     line.merchandise { merchandise ->
                         merchandise.onProductVariant { variant ->

samples/MobileBuyIntegration/app/src/main/java/com/shopify/checkout_sdk_mobile_buy_integration_sample/product/ProductView.kt

@@ -22,7 +22,6 @@
  */
 package com.shopify.checkout_sdk_mobile_buy_integration_sample.product
 
-import androidx.activity.ComponentActivity
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
@@ -39,11 +38,9 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import com.shopify.checkout_sdk_mobile_buy_integration_sample.AppBarState
 import com.shopify.checkout_sdk_mobile_buy_integration_sample.cart.CartViewModel
-import com.shopify.checkoutsheetkit.ShopifyCheckoutSheetKit
 import org.koin.androidx.compose.koinViewModel
 
 @Composable