Merge pull request #13984 from woocommerce/wooprd-471-woo-posproduct-search-do-the-design-changes-for-empty-query

[WOOPRD-471][Woo POS][Product search] Do the design changes for empty query screen

Author: kidinov

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/data/WooPosPopularProductsProvider.kt

@@ -18,7 +18,7 @@ class WooPosPopularProductsProvider @Inject constructor(
     private val productsTypesFilterConfig: WooPosProductsTypesFilterConfig,
 ) {
     companion object {
-        private const val MAX_POPULAR_PRODUCTS = 3
+        private const val MAX_POPULAR_PRODUCTS = 10
     }
 
     private val mutex = Mutex()

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

@@ -17,15 +17,14 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.KeyboardArrowRight
-import androidx.compose.material.icons.automirrored.outlined.TrendingUp
-import androidx.compose.material.icons.filled.History
 import androidx.compose.material.icons.outlined.Search
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
@@ -50,6 +49,12 @@ fun WooPosItemsEmptySearchQueryStateScreen(
     onUIEvent: (WooPosItemsSearchUiEvent) -> Unit
 ) {
     val scrollState = rememberScrollState()
+    val focusManager = LocalFocusManager.current
+    LaunchedEffect(scrollState.isScrollInProgress) {
+        if (scrollState.isScrollInProgress) {
+            focusManager.clearFocus()
+        }
+    }
     Column(
         modifier
             .fillMaxHeight()
@@ -104,11 +109,10 @@ private fun PopularItemsSection(
     onPopularItemClicked: (WooPosItemSelectionViewState.Product) -> Unit,
 ) {
     SectionHeader(
-        icon = Icons.AutoMirrored.Outlined.TrendingUp,
         title = stringResource(R.string.woopos_search_popular_items_title)
     )
 
-    Spacer(modifier = Modifier.height(WooPosSpacing.Small.value.toAdaptivePadding()))
+    Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))
 
     popularItems.forEach { popularItem ->
         val itemContentDescription = stringResource(
@@ -134,11 +138,10 @@ private fun RecentSearchesSection(
     onRecentSearchClicked: (String) -> Unit,
 ) {
     SectionHeader(
-        icon = Icons.Filled.History,
         title = stringResource(R.string.woopos_search_recent_searches_title)
     )
 
-    Spacer(modifier = Modifier.height(WooPosSpacing.Small.value.toAdaptivePadding()))
+    Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))
 
     state.recentSearches.forEach { recentSearch ->
         WooPosCard(
@@ -189,29 +192,13 @@ private fun RecentSearchesSection(
 }
 
 @Composable
-private fun SectionHeader(
-    icon: ImageVector,
-    title: String
-) {
-    Row(
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Icon(
-            imageVector = icon,
-            contentDescription = null,
-            tint = MaterialTheme.colorScheme.onSurface,
-            modifier = Modifier.size(24.dp)
-        )
-
-        Spacer(modifier = Modifier.width(WooPosSpacing.Small.value.toAdaptivePadding()))
-
-        WooPosText(
-            text = title,
-            style = WooPosTypography.BodyMedium,
-            color = MaterialTheme.colorScheme.onSurface,
-            fontWeight = FontWeight.Bold,
-        )
-    }
+private fun SectionHeader(title: String) {
+    WooPosText(
+        text = title,
+        style = WooPosTypography.BodyMedium,
+        color = MaterialTheme.colorScheme.onSurface,
+        fontWeight = FontWeight.Bold,
+    )
 }
 
 @WooPosPreview

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

@@ -286,7 +286,7 @@ class WooPosItemsSearchViewModel @Inject constructor(
     }
 
     private companion object {
-        const val MAX_ITEMS_COUNT = 3
+        const val MAX_ITEMS_COUNT = 10
         const val SEARCH_DEBOUNCING_TIME = 500L
     }
 }

WooCommerce/src/main/res/values/strings.xml

@@ -4405,7 +4405,7 @@
     <string name="woopos_search_back_content_description">Back</string>
     <string name="woopos_search_clear_content_description">Clear</string>
     <string name="woopos_search_products">Search products</string>
-    <string name="woopos_search_popular_items_title">Popular items</string>
+    <string name="woopos_search_popular_items_title">Popular products</string>
     <string name="woopos_search_recent_searches_title">Recent searches</string>
     <string name="woopos_search_items_empty_title">Nothing found</string>
     <string name="woopos_search_empty_description">We couldn\'t find anything matching your search.</string>

WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/common/data/WooPosPopularProductsProviderTest.kt

@@ -63,7 +63,7 @@ class WooPosPopularProductsProviderTest {
             productStore.fetchProducts(
                 site = siteModel,
                 offset = 0,
-                pageSize = 3,
+                pageSize = 10,
                 filterOptions = emptyMap(),
                 includeTypes = emptyList(),
                 sortType = ProductSorting.POPULARITY_DESC
@@ -88,7 +88,7 @@ class WooPosPopularProductsProviderTest {
             productStore.fetchProducts(
                 site = siteModel,
                 offset = 0,
-                pageSize = 3,
+                pageSize = 10,
                 filterOptions = emptyMap(),
                 includeTypes = emptyList(),
                 sortType = ProductSorting.POPULARITY_DESC
@@ -122,7 +122,7 @@ class WooPosPopularProductsProviderTest {
             productStore.fetchProducts(
                 site = siteModel,
                 offset = 0,
-                pageSize = 3,
+                pageSize = 10,
                 filterOptions = emptyMap(),
                 includeTypes = emptyList(),
                 sortType = ProductSorting.POPULARITY_DESC
@@ -149,7 +149,7 @@ class WooPosPopularProductsProviderTest {
                 productStore.fetchProducts(
                     site = siteModel,
                     offset = 0,
-                    pageSize = 3,
+                    pageSize = 10,
                     filterOptions = emptyMap(),
                     includeTypes = emptyList(),
                     sortType = ProductSorting.POPULARITY_DESC
@@ -175,7 +175,7 @@ class WooPosPopularProductsProviderTest {
                 productStore.fetchProducts(
                     site = siteModel,
                     offset = 0,
-                    pageSize = 3,
+                    pageSize = 10,
                     filterOptions = emptyMap(),
                     includeTypes = emptyList(),
                     sortType = ProductSorting.POPULARITY_DESC

WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/items/search/WooPosItemsSearchViewModelTest.kt

@@ -145,11 +145,12 @@ class WooPosItemsSearchViewModelTest {
             val emptySearchQuery = value as WooPosItemsSearchViewState.EmptySearchQuery
             assertThat(emptySearchQuery.popularItems).hasSize(2)
             assertThat(emptySearchQuery.popularItems.map { it.id }).containsExactly(1, 2)
-            assertThat(emptySearchQuery.recentSearches).hasSize(3)
+            assertThat(emptySearchQuery.recentSearches).hasSize(4)
             assertThat(emptySearchQuery.recentSearches).containsExactly(
                 "Recent Search 1",
                 "Recent Search 2",
-                "Recent Search 3"
+                "Recent Search 3",
+                "Recent Search 4",
             )
         }
     }