[Woo POS] Products grid

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/cart/WooPosCartNavigation.kt

@@ -3,17 +3,20 @@ package com.woocommerce.android.ui.woopos.cart
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.compose.composable
+import com.woocommerce.android.ui.woopos.cart.products.ProductSelectorViewModel
 
 internal const val CART_ROUTE = "cart"
 
 internal fun NavGraphBuilder.cartScreen(
     onCheckoutClick: () -> Unit
 ) {
     composable(CART_ROUTE) {
-        val viewModel: WooPosCartViewModel = hiltViewModel()
+        val cartViewModel: WooPosCartViewModel = hiltViewModel()
+        val productsViewModel: ProductSelectorViewModel = hiltViewModel()
 
         WooPosCartScreen(
-            viewModel = viewModel,
+            cartViewModel = cartViewModel,
+            productsViewModel = productsViewModel,
             onCheckoutClick = onCheckoutClick
         )
     }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/cart/WooPosCartScreen.kt

@@ -1,48 +1,120 @@
 package com.woocommerce.android.ui.woopos.cart
 
+import android.annotation.SuppressLint
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Button
+import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
 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 com.woocommerce.android.ui.woopos.cart.products.ProductSelector
+import com.woocommerce.android.ui.woopos.cart.products.ProductSelectorViewModel
 import com.woocommerce.android.ui.woopos.util.WooPosPreview
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
 
 @Composable
 @Suppress("UNUSED_PARAMETER")
 fun WooPosCartScreen(
-    viewModel: WooPosCartViewModel,
+    cartViewModel: WooPosCartViewModel,
+    productsViewModel: ProductSelectorViewModel,
     onCheckoutClick: () -> Unit,
 ) {
     WooPosCartScreen(
-        onButtonClicked = onCheckoutClick
+        onButtonClicked = onCheckoutClick,
+        productsState = productsViewModel.viewState,
+        onLoadMore = productsViewModel::onLoadMore,
     )
 }
 
+@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
 @Composable
-private fun WooPosCartScreen(onButtonClicked: () -> Unit) {
+private fun WooPosCartScreen(
+    onButtonClicked: () -> Unit,
+    productsState: StateFlow<ProductSelectorViewModel.ViewState>,
+    onLoadMore: () -> Unit,
+) {
     Box(
         Modifier.fillMaxSize(),
         contentAlignment = Alignment.Center
     ) {
-        Column {
-            Text(
-                text = "Cart",
-                style = MaterialTheme.typography.h3,
-                color = MaterialTheme.colors.primary,
-            )
-            Button(onClick = onButtonClicked) {
-                Text("Checkout")
+        Scaffold(
+            topBar = {
+                TopAppBar(
+                    navigationIcon = {
+                        Icon(
+                            imageVector = Icons.Default.Close,
+                            contentDescription = "Close POS"
+                        )
+                    },
+                    title = {
+                        Text(
+                            modifier = Modifier.fillMaxWidth(),
+                            text = "⚠️ Reader not connected",
+                            style = MaterialTheme.typography.h5,
+                            color = MaterialTheme.colors.onPrimary,
+                            textAlign = TextAlign.Center,
+                        )
+                    },
+                    actions = {
+                        Text(text = "History")
+                    }
+                )
+            },
+        ) {
+            Row(
+                modifier = Modifier.padding(16.dp)
+            ) {
+                ProductSelector(productsState, onLoadMore)
+                Cart(onButtonClicked)
             }
         }
     }
 }
 
+@Composable
+private fun Cart(onButtonClicked: () -> Unit) {
+    Column {
+        Text(
+            text = "Cart",
+            style = MaterialTheme.typography.h3,
+            color = MaterialTheme.colors.primary,
+        )
+        Spacer(modifier = Modifier.weight(1f))
+        Button(
+            modifier = Modifier.fillMaxWidth(),
+            onClick = onButtonClicked,
+        ) {
+            Text("Checkout")
+        }
+    }
+}
+
 @Composable
 @WooPosPreview
 fun WooPosCartScreenPreview() {
-    WooPosCartScreen(onButtonClicked = {})
+    val productState = MutableStateFlow(
+        ProductSelectorViewModel.ViewState(
+            products = listOf(
+                ProductSelectorViewModel.ListItem(1, "Product 1"),
+                ProductSelectorViewModel.ListItem(2, "Product 2"),
+                ProductSelectorViewModel.ListItem(3, "Product 3"),
+            )
+        )
+    )
+    WooPosCartScreen(onButtonClicked = {}, productsState = productState, onLoadMore = {})
 }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/cart/products/ProductSelector.kt

@@ -0,0 +1,105 @@
+package com.woocommerce.android.ui.woopos.cart.products
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyGridState
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.rememberLazyGridState
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.ConstraintLayout
+import com.woocommerce.android.ui.woopos.util.WooPosPreview
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.filter
+
+@Composable
+fun ProductSelector(
+    productsState: StateFlow<ProductSelectorViewModel.ViewState>,
+    onLoadMore: () -> Unit,
+) {
+    ConstraintLayout(
+        modifier = Modifier.fillMaxWidth(0.7f)
+    ) {
+        val state = productsState.collectAsState()
+        val gridState = rememberLazyGridState()
+        LazyVerticalGrid(
+            columns = GridCells.Adaptive(minSize = 128.dp),
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+            verticalArrangement = Arrangement.spacedBy(4.dp),
+            state = gridState
+        ) {
+            items(
+                count = state.value.products.size,
+                key = { index -> state.value.products[index].productId }
+            ) { index ->
+                ProductItem(product = state.value.products[index])
+            }
+        }
+        InfiniteGridHandler(gridState) {
+            onLoadMore()
+        }
+    }
+}
+
+@Composable
+fun ProductItem(product: ProductSelectorViewModel.ListItem) {
+    ConstraintLayout(
+        modifier = Modifier.background(Color.Yellow)
+    ) {
+        Text(
+            text = product.title,
+            style = MaterialTheme.typography.body1,
+            color = MaterialTheme.colors.onSurface,
+        )
+    }
+}
+
+@Composable
+fun InfiniteGridHandler(gridState: LazyGridState, buffer: Int = 1, onLoadMore: () -> Unit) {
+    val loadMore = remember {
+        derivedStateOf {
+            val layoutInfo = gridState.layoutInfo
+            val totalItemsNumber = layoutInfo.totalItemsCount
+            val lastVisibleItemIndex = (layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0) + 1
+
+            lastVisibleItemIndex > (totalItemsNumber - buffer)
+        }
+    }
+
+    LaunchedEffect(loadMore) {
+        snapshotFlow { loadMore.value }
+            .distinctUntilChanged()
+            .filter { it }
+            .collect {
+                onLoadMore()
+            }
+    }
+}
+
+@Composable
+@WooPosPreview
+fun ProductSelectorPreview() {
+    val state = MutableStateFlow(
+        ProductSelectorViewModel.ViewState(
+            listOf(
+                ProductSelectorViewModel.ListItem(1, "Product 1"),
+                ProductSelectorViewModel.ListItem(2, "Product 2"),
+                ProductSelectorViewModel.ListItem(3, "Product 3"),
+            )
+        )
+    )
+    ProductSelector(productsState = state, onLoadMore = {})
+}

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/cart/products/ProductSelectorViewModel.kt

@@ -0,0 +1,50 @@
+package com.woocommerce.android.ui.woopos.cart.products
+
+import androidx.lifecycle.SavedStateHandle
+import com.woocommerce.android.viewmodel.ScopedViewModel
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class ProductSelectorViewModel @Inject constructor(
+    private val productsDataSource: ProductsDataSource,
+    savedStateHandle: SavedStateHandle,
+) : ScopedViewModel(savedStateHandle) {
+
+    val viewState: StateFlow<ViewState> = productsDataSource.products.map { products ->
+        ViewState(
+            products = products.map { product ->
+                ListItem(
+                    productId = product.remoteId,
+                    title = product.name,
+                    imageUrl = product.firstImageUrl
+                )
+            }
+        )
+    }.toStateFlow(ViewState(products = emptyList()))
+
+    init {
+        launch {
+            productsDataSource.loadProducts()
+        }
+    }
+
+    fun onLoadMore() {
+        launch {
+            productsDataSource.loadMore()
+        }
+    }
+
+    data class ViewState(
+        val products: List<ListItem>,
+    )
+
+    data class ListItem(
+        val productId: Long,
+        val title: String,
+        val imageUrl: String? = null,
+    )
+}

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/cart/products/ProductsDataSource.kt

@@ -0,0 +1,10 @@
+package com.woocommerce.android.ui.woopos.cart.products
+
+import com.woocommerce.android.model.Product
+import kotlinx.coroutines.flow.Flow
+
+interface ProductsDataSource {
+    val products: Flow<List<Product>>
+    suspend fun loadProducts()
+    suspend fun loadMore()
+}

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/cart/products/ProductsDataSourceImpl.kt

@@ -0,0 +1,18 @@
+package com.woocommerce.android.ui.woopos.cart.products
+
+import com.woocommerce.android.model.Product
+import com.woocommerce.android.ui.products.selector.ProductListHandler
+import kotlinx.coroutines.flow.Flow
+import javax.inject.Inject
+
+class ProductsDataSourceImpl @Inject constructor(private val handler: ProductListHandler) : ProductsDataSource {
+    override val products: Flow<List<Product>> = handler.productsFlow
+
+    override suspend fun loadProducts() {
+        handler.loadFromCacheAndFetch(searchType = ProductListHandler.SearchType.DEFAULT)
+    }
+
+    override suspend fun loadMore() {
+        handler.loadMore()
+    }
+}

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/di/POSModule.kt

@@ -0,0 +1,20 @@
+package com.woocommerce.android.ui.woopos.di
+
+import com.woocommerce.android.ui.products.selector.ProductListHandler
+import com.woocommerce.android.ui.woopos.cart.products.ProductsDataSource
+import com.woocommerce.android.ui.woopos.cart.products.ProductsDataSourceImpl
+import dagger.Module
+import dagger.Provides
+import dagger.hilt.InstallIn
+import dagger.hilt.components.SingletonComponent
+
+@InstallIn(SingletonComponent::class)
+@Module
+class POSModule {
+    @Provides
+    fun provideProductList(
+        handler: ProductListHandler
+    ): ProductsDataSource {
+        return ProductsDataSourceImpl(handler)
+    }
+}