[WooPos][Non Simple Product types] Retry UI for pagination errors on variations screens

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorScreen.kt

@@ -0,0 +1,112 @@
+package com.woocommerce.android.ui.woopos.common.composeui.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.woocommerce.android.R
+import com.woocommerce.android.ui.woopos.common.composeui.WooPosCard
+import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
+import com.woocommerce.android.ui.woopos.common.composeui.WooPosTheme
+import com.woocommerce.android.ui.woopos.common.composeui.toAdaptivePadding
+
+@Composable
+fun WooPosPaginationErrorScreen(
+    modifier: Modifier = Modifier,
+    icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error),
+    message: String,
+    primaryButton: Button,
+) {
+    WooPosCard {
+        WooPosPaginationErrorScreenContent(
+            modifier = modifier,
+            icon = icon,
+            message = message,
+            primaryButton = primaryButton
+        )
+    }
+}
+
+@Composable
+private fun WooPosPaginationErrorScreenContent(
+    modifier: Modifier,
+    icon: Painter,
+    message: String,
+    primaryButton: Button
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(112.dp)
+            .clip(RoundedCornerShape(16.dp))
+            .padding(16.dp.toAdaptivePadding()),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            modifier = Modifier.weight(1f)
+        ) {
+            Icon(
+                modifier = Modifier.size(24.dp),
+                painter = icon,
+                contentDescription = stringResource(R.string.woopos_error_icon_content_description),
+                tint = Color.Unspecified,
+            )
+
+            Spacer(modifier = Modifier.width(24.dp.toAdaptivePadding()))
+
+            Text(
+                text = message,
+                style = MaterialTheme.typography.h5,
+                fontWeight = FontWeight.SemiBold,
+                color = MaterialTheme.colors.error
+            )
+        }
+
+        Row(
+            modifier = Modifier.weight(0.5f)
+        ) {
+            WooPosButton(
+                text = primaryButton.text,
+                onClick = primaryButton.click,
+                modifier = Modifier
+                    .height(50.dp)
+                    .clip(RoundedCornerShape(16.dp))
+            )
+        }
+    }
+}
+
+@Composable
+@WooPosPreview
+fun WooPosPaginationErrorScreenPreview() {
+    WooPosTheme {
+        WooPosPaginationErrorScreen(
+            message = "Error loading products",
+            primaryButton = Button(
+                text = "Load more",
+                click = {}
+            )
+        )
+    }
+}

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosBaseViewState.kt

@@ -6,6 +6,12 @@ sealed class WooPosBaseViewState(
 
 interface ContentViewState {
     val items: List<WooPosItem>
-    val loadingMore: Boolean
     val reloadingProductsWithPullToRefresh: Boolean
+    val paginationState: PaginationState
+}
+
+sealed interface PaginationState {
+    data object None : PaginationState
+    data object Loading : PaginationState
+    data object Error : PaginationState
 }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsList.kt

@@ -58,6 +58,7 @@ fun ItemList(
     listState: LazyListState,
     onItemClicked: (item: WooPosItem) -> Unit,
     onEndOfProductsListReached: () -> Unit,
+    onErrorWhilePaginating: @Composable () -> Unit,
 ) {
     WooPosLazyColumn(
         verticalArrangement = Arrangement.spacedBy(8.dp),
@@ -95,9 +96,19 @@ fun ItemList(
             }
         }
 
-        if (state.loadingMore) {
-            item {
-                ItemsLoadingItem()
+        when (state.paginationState) {
+            PaginationState.Error -> {
+                item {
+                    onErrorWhilePaginating()
+                }
+            }
+            PaginationState.Loading -> {
+                item {
+                    ItemsLoadingItem()
+                }
+            }
+            PaginationState.None -> {
+                // no op
             }
         }
         item {

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsScreen.kt

@@ -48,6 +48,7 @@ import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
 import com.woocommerce.android.ui.woopos.common.composeui.WooPosTheme
 import com.woocommerce.android.ui.woopos.common.composeui.component.Button
 import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosErrorScreen
+import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosPaginationErrorScreen
 import com.woocommerce.android.ui.woopos.common.composeui.toAdaptivePadding
 import com.woocommerce.android.ui.woopos.home.items.WooPosItem.SimpleProduct
 import com.woocommerce.android.ui.woopos.home.items.WooPosItem.VariableProduct
@@ -169,7 +170,13 @@ private fun MainItemsList(
                             listState,
                             onItemClicked,
                             onEndOfItemListReached,
-                        )
+                        ) {
+                            ProductsPaginationError(
+                                onRetryClicked = {
+                                    onEndOfItemListReached()
+                                }
+                            )
+                        }
                     }
                 }
 
@@ -317,6 +324,17 @@ fun ProductsError(onRetryClicked: () -> Unit) {
     }
 }
 
+@Composable
+fun ProductsPaginationError(onRetryClicked: () -> Unit) {
+    WooPosPaginationErrorScreen(
+        message = stringResource(id = R.string.woopos_items_pagination_error),
+        primaryButton = Button(
+            text = stringResource(id = R.string.woopos_items_pagination_load_more_label),
+            click = onRetryClicked
+        ),
+    )
+}
+
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
 @WooPosPreview
@@ -353,7 +371,7 @@ fun WooPosItemsScreenPreview(modifier: Modifier = Modifier) {
                     imageUrl = null,
                 ),
             ),
-            loadingMore = true,
+            paginationState = PaginationState.Loading,
             reloadingProductsWithPullToRefresh = true,
             bannerState = WooPosItemsViewState.Content.BannerState(
                 isBannerHiddenByUser = true,
@@ -472,7 +490,6 @@ fun WooPosHomeScreenItemsWithSimpleProductsOnlyBannerPreview() {
                     imageUrl = null,
                 ),
             ),
-            loadingMore = false,
             reloadingProductsWithPullToRefresh = true,
             bannerState = WooPosItemsViewState.Content.BannerState(
                 isBannerHiddenByUser = false,
@@ -525,7 +542,6 @@ fun WooPosHomeScreenItemsWithInfoIconInToolbarPreview() {
                     imageUrl = null,
                 ),
             ),
-            loadingMore = false,
             reloadingProductsWithPullToRefresh = false,
             bannerState = WooPosItemsViewState.Content.BannerState(
                 isBannerHiddenByUser = true,

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsViewModel.kt

@@ -225,7 +225,7 @@ class WooPosItemsViewModel @Inject constructor(
                 )
             }
         },
-        loadingMore = false,
+        paginationState = PaginationState.None,
         reloadingProductsWithPullToRefresh = false,
         bannerState = WooPosItemsViewState.Content.BannerState(
             isBannerHiddenByUser = isBannerHiddenByUser(),
@@ -245,15 +245,15 @@ class WooPosItemsViewModel @Inject constructor(
             return
         }
 
-        _viewState.value = currentState.copy(loadingMore = true)
+        _viewState.value = currentState.copy(paginationState = PaginationState.Loading)
 
         loadMoreProductsJob?.cancel()
         loadMoreProductsJob = viewModelScope.launch {
             val result = productsDataSource.loadMore()
             _viewState.value = if (result.isSuccess) {
                 result.getOrThrow().toContentState()
             } else {
-                WooPosItemsViewState.Error()
+                currentState.copy(paginationState = PaginationState.Error)
             }
         }
     }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsViewState.kt

@@ -8,8 +8,8 @@ sealed class WooPosItemsViewState(
 ) : WooPosBaseViewState(reloadingProductsWithPullToRefresh) {
     data class Content(
         override val items: List<WooPosItem>,
-        override val loadingMore: Boolean,
         val bannerState: BannerState,
+        override val paginationState: PaginationState = PaginationState.None,
         override val reloadingProductsWithPullToRefresh: Boolean = false
     ) : WooPosItemsViewState(reloadingProductsWithPullToRefresh), ContentViewState {
         data class BannerState(

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosVariationsViewState.kt

@@ -6,8 +6,8 @@ sealed class WooPosVariationsViewState(
 
     data class Content(
         override val items: List<WooPosItem.Variation>,
-        override val loadingMore: Boolean,
         override val reloadingProductsWithPullToRefresh: Boolean = false,
+        override val paginationState: PaginationState = PaginationState.None,
     ) : WooPosVariationsViewState(reloadingProductsWithPullToRefresh), ContentViewState
 
     data class Loading(