From 4faea2279d126e786aef4f6ba800e5e28dd3f12b Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 15:38:17 +0530 Subject: [PATCH 01/21] Add string resources for the new design --- WooCommerce/src/main/res/values/strings.xml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/WooCommerce/src/main/res/values/strings.xml b/WooCommerce/src/main/res/values/strings.xml index 2a39bfec8a6..3a13387f488 100644 --- a/WooCommerce/src/main/res/values/strings.xml +++ b/WooCommerce/src/main/res/values/strings.xml @@ -4310,8 +4310,9 @@ %1$d variations Back - Load more - "Failed to load more items. Please try again." + Try again + "Failed to load more items" + "An error occurred while loading products." "Failed to load more items. Double tap to try again." Error loading variations From 9512afbf4c3b02817703bd208494a7748afb2608 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 15:38:39 +0530 Subject: [PATCH 02/21] Expose text style in WooPosButton --- .../ui/woopos/common/composeui/component/WooPosButtons.kt | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt index 2544188965f..1d7deee0eea 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt @@ -15,6 +15,7 @@ import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview @@ -90,6 +91,7 @@ fun WooPosOutlinedButton( modifier: Modifier = Modifier, text: String, shape: RoundedCornerShape = RoundedCornerShape(4.dp), + style: TextStyle = MaterialTheme.typography.body2, onClick: () -> Unit, ) { Button( @@ -112,7 +114,7 @@ fun WooPosOutlinedButton( Text( text = text, color = MaterialTheme.colors.primary, - style = MaterialTheme.typography.body2, + style = style, fontWeight = FontWeight.SemiBold, ) } From 29d25b3c484dd1e3e231814d863e43b9245e6412 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 15:39:00 +0530 Subject: [PATCH 03/21] Use updated string resource in WooPosItemsScreen --- .../android/ui/woopos/home/items/WooPosItemsScreen.kt | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsScreen.kt index 4a69af40e21..ab82f589fb1 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsScreen.kt @@ -327,9 +327,10 @@ fun ProductsError(onRetryClicked: () -> Unit) { @Composable private fun ProductsPaginationError(onRetryClicked: () -> Unit) { WooPosPaginationErrorIndicator( - message = stringResource(id = R.string.woopos_items_pagination_error), + message = stringResource(id = R.string.woopos_items_pagination_error_title), + description = stringResource(id = R.string.woopos_items_pagination_error_description), primaryButton = Button( - text = stringResource(id = R.string.woopos_items_pagination_load_more_label), + text = stringResource(id = R.string.woopos_items_pagination_try_again_label), click = onRetryClicked ), ) From fc176500397d3958b30fc4cbb0cfaab302ea50e9 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 15:39:24 +0530 Subject: [PATCH 04/21] Update the WooPosPaginationErrorIndicator as per new design --- .../WooPosPaginationErrorIndicator.kt | 45 +++++++++++++------ 1 file changed, 31 insertions(+), 14 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt index a5580858822..a16e509a0b7 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt @@ -1,6 +1,7 @@ package com.woocommerce.android.ui.woopos.common.composeui.component import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height @@ -40,12 +41,14 @@ fun WooPosPaginationErrorIndicator( modifier: Modifier = Modifier, icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error), message: String, + description: String, primaryButton: Button, ) { WooPosPaginationErrorIndicatorContent( modifier = modifier, icon = icon, message = message, + description = description, primaryButton = primaryButton ) } @@ -55,6 +58,7 @@ private fun WooPosPaginationErrorIndicatorContent( modifier: Modifier, icon: Painter, message: String, + description: String, primaryButton: Button ) { val itemContentDescription = stringResource(id = R.string.woopos_items_pagination_error_content_description) @@ -80,27 +84,39 @@ private fun WooPosPaginationErrorIndicatorContent( modifier = Modifier.weight(1f) ) { Icon( - modifier = Modifier.size(24.dp), + modifier = Modifier + .padding( + start = 12.dp, + end = 12.dp + ) + .size(64.dp), painter = icon, contentDescription = stringResource(R.string.woopos_error_icon_content_description), tint = Color.Unspecified, ) - Text( - text = message, - style = MaterialTheme.typography.h5, - fontWeight = FontWeight.SemiBold, - color = MaterialTheme.colors.error, - modifier = Modifier.padding(start = 24.dp.toAdaptivePadding()) - ) + Column(modifier = Modifier.padding(start = 32.dp)) { + Text( + text = message, + style = MaterialTheme.typography.h5, + fontWeight = FontWeight.SemiBold, + ) + Text( + text = description, + style = MaterialTheme.typography.h5, + fontWeight = FontWeight.Normal, + modifier = Modifier.padding(top = 8.dp.toAdaptivePadding()) + ) + } } - WooPosButton( + WooPosOutlinedButton( text = primaryButton.text, onClick = primaryButton.click, modifier = Modifier - .weight(0.5f) - .height(50.dp) - .clip(RoundedCornerShape(16.dp)) + .weight(0.2f) + .size(80.dp), + shape = RoundedCornerShape(8.dp), + style = MaterialTheme.typography.h6 ) } } @@ -152,9 +168,10 @@ fun WooPosPaginationErrorScreenPreview() { onEndOfProductsListReached = {} ) { WooPosPaginationErrorIndicator( - message = stringResource(id = R.string.woopos_items_pagination_error), + message = stringResource(id = R.string.woopos_items_pagination_error_title), + description = stringResource(id = R.string.woopos_items_pagination_error_description), primaryButton = Button( - text = stringResource(id = R.string.woopos_items_pagination_load_more_label), + text = stringResource(id = R.string.woopos_items_pagination_try_again_label), click = {} ) ) From 85f2e7b5a7c57ea4c1c2e21ba9e447e51c827012 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 15:39:52 +0530 Subject: [PATCH 05/21] Include Variable product as well to be shown along with Simple products in the POS screen. --- .../ui/woopos/home/items/products/WooPosProductsDataSource.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/products/WooPosProductsDataSource.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/products/WooPosProductsDataSource.kt index df06b734a1b..94452eac158 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/products/WooPosProductsDataSource.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/products/WooPosProductsDataSource.kt @@ -37,7 +37,7 @@ class WooPosProductsDataSource @Inject constructor( val result = handler.loadFromCacheAndFetch( forceRefresh = forceRefreshProducts, searchType = ProductListHandler.SearchType.DEFAULT, - includeType = listOf(WCProductStore.IncludeType.Simple), + includeType = listOf(WCProductStore.IncludeType.Simple, WCProductStore.IncludeType.Variable), filters = mapOf(WCProductStore.ProductFilterOption.STATUS to ProductStatus.PUBLISH.value) ) From 51da978ee9ee204fee3d0476e540b03d4d171a0b Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 15:40:15 +0530 Subject: [PATCH 06/21] Use updated string resource in variations screen. --- .../woopos/home/items/variations/WooPosVariationsScreen.kt | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/variations/WooPosVariationsScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/variations/WooPosVariationsScreen.kt index 2c668fef7d5..caf554da89e 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/variations/WooPosVariationsScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/variations/WooPosVariationsScreen.kt @@ -189,9 +189,10 @@ fun VariationsError(modifier: Modifier, onRetryClicked: () -> Unit) { @Composable fun VariationsPaginationError(onRetryClicked: () -> Unit) { WooPosPaginationErrorIndicator( - message = stringResource(id = R.string.woopos_items_pagination_error), + message = stringResource(id = R.string.woopos_items_pagination_error_title), + description = stringResource(id = R.string.woopos_items_pagination_error_description), primaryButton = Button( - text = stringResource(id = R.string.woopos_items_pagination_load_more_label), + text = stringResource(id = R.string.woopos_items_pagination_try_again_label), click = onRetryClicked ), ) From 128a4850d90e584663735dce00e7619a45b38bb1 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 15:42:43 +0530 Subject: [PATCH 07/21] Remove unused import --- .../WooPosPaginationErrorIndicator.kt | 181 +----------------- 1 file changed, 1 insertion(+), 180 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt index a16e509a0b7..bdbd03f85e0 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt @@ -1,180 +1 @@ -package com.woocommerce.android.ui.woopos.common.composeui.component - -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Row -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.lazy.rememberLazyListState -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.semantics.contentDescription -import androidx.compose.ui.semantics.semantics -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.ShadowType -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 -import com.woocommerce.android.ui.woopos.home.items.PaginationState -import com.woocommerce.android.ui.woopos.home.items.WooPosItem.SimpleProduct -import com.woocommerce.android.ui.woopos.home.items.WooPosItem.VariableProduct -import com.woocommerce.android.ui.woopos.home.items.WooPosItemList -import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState - -@Composable -fun WooPosPaginationErrorIndicator( - modifier: Modifier = Modifier, - icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error), - message: String, - description: String, - primaryButton: Button, -) { - WooPosPaginationErrorIndicatorContent( - modifier = modifier, - icon = icon, - message = message, - description = description, - primaryButton = primaryButton - ) -} - -@Composable -private fun WooPosPaginationErrorIndicatorContent( - modifier: Modifier, - icon: Painter, - message: String, - description: String, - primaryButton: Button -) { - val itemContentDescription = stringResource(id = R.string.woopos_items_pagination_error_content_description) - WooPosCard( - modifier = modifier - .semantics { contentDescription = itemContentDescription }, - shape = RoundedCornerShape(8.dp), - backgroundColor = MaterialTheme.colors.surface, - elevation = 6.dp, - shadowType = ShadowType.Soft, - ) { - Row( - modifier = Modifier - .height(112.dp) - .fillMaxWidth() - .padding(16.dp), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween - ) { - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - modifier = Modifier.weight(1f) - ) { - Icon( - modifier = Modifier - .padding( - start = 12.dp, - end = 12.dp - ) - .size(64.dp), - painter = icon, - contentDescription = stringResource(R.string.woopos_error_icon_content_description), - tint = Color.Unspecified, - ) - Column(modifier = Modifier.padding(start = 32.dp)) { - Text( - text = message, - style = MaterialTheme.typography.h5, - fontWeight = FontWeight.SemiBold, - ) - Text( - text = description, - style = MaterialTheme.typography.h5, - fontWeight = FontWeight.Normal, - modifier = Modifier.padding(top = 8.dp.toAdaptivePadding()) - ) - } - } - - WooPosOutlinedButton( - text = primaryButton.text, - onClick = primaryButton.click, - modifier = Modifier - .weight(0.2f) - .size(80.dp), - shape = RoundedCornerShape(8.dp), - style = MaterialTheme.typography.h6 - ) - } - } -} - -@Composable -@WooPosPreview -fun WooPosPaginationErrorScreenPreview() { - val itemsState = - WooPosItemsViewState.Content( - items = listOf( - SimpleProduct( - 1, - name = "Product 1, Product 1, Product 1, " + - "Product 1, Product 1, Product 1, Product 1, Product 1" + - "Product 1, Product 1, Product 1, Product 1, Product 1", - price = "10.0$", - imageUrl = null, - ), - SimpleProduct( - 2, - name = "Product 2", - price = "2000.00$", - imageUrl = null, - ), - VariableProduct( - 3, - name = "Product 3", - price = "2000.00$", - imageUrl = null, - numOfVariations = 20, - variationIds = listOf() - ), - ), - paginationState = PaginationState.Error, - reloadingProductsWithPullToRefresh = true, - bannerState = WooPosItemsViewState.Content.BannerState( - isBannerHiddenByUser = true, - title = R.string.woopos_banner_simple_products_only_title, - message = R.string.woopos_banner_simple_products_only_message, - icon = R.drawable.info, - ), - ) - WooPosTheme { - WooPosItemList( - state = itemsState, - listState = rememberLazyListState(), - onItemClicked = {}, - onEndOfProductsListReached = {} - ) { - WooPosPaginationErrorIndicator( - message = stringResource(id = R.string.woopos_items_pagination_error_title), - description = stringResource(id = R.string.woopos_items_pagination_error_description), - primaryButton = Button( - text = stringResource(id = R.string.woopos_items_pagination_try_again_label), - click = {} - ) - ) - } - } -} +package com.woocommerce.android.ui.woopos.common.composeui.component import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row 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.lazy.rememberLazyListState 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.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.semantics.contentDescription import androidx.compose.ui.semantics.semantics 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.ShadowType 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 import com.woocommerce.android.ui.woopos.home.items.PaginationState import com.woocommerce.android.ui.woopos.home.items.WooPosItem.SimpleProduct import com.woocommerce.android.ui.woopos.home.items.WooPosItem.VariableProduct import com.woocommerce.android.ui.woopos.home.items.WooPosItemList import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState @Composable fun WooPosPaginationErrorIndicator( modifier: Modifier = Modifier, icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error), message: String, description: String, primaryButton: Button, ) { WooPosPaginationErrorIndicatorContent( modifier = modifier, icon = icon, message = message, description = description, primaryButton = primaryButton ) } @Composable private fun WooPosPaginationErrorIndicatorContent( modifier: Modifier, icon: Painter, message: String, description: String, primaryButton: Button ) { val itemContentDescription = stringResource(id = R.string.woopos_items_pagination_error_content_description) WooPosCard( modifier = modifier .semantics { contentDescription = itemContentDescription }, shape = RoundedCornerShape(8.dp), backgroundColor = MaterialTheme.colors.surface, elevation = 6.dp, shadowType = ShadowType.Soft, ) { Row( modifier = Modifier .height(112.dp) .fillMaxWidth() .padding(16.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { Row( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), modifier = Modifier.weight(1f) ) { Icon( modifier = Modifier .padding( start = 12.dp, end = 12.dp ) .size(64.dp), painter = icon, contentDescription = stringResource(R.string.woopos_error_icon_content_description), tint = Color.Unspecified, ) Column(modifier = Modifier.padding(start = 32.dp)) { Text( text = message, style = MaterialTheme.typography.h5, fontWeight = FontWeight.SemiBold, ) Text( text = description, style = MaterialTheme.typography.h5, fontWeight = FontWeight.Normal, modifier = Modifier.padding(top = 8.dp.toAdaptivePadding()) ) } } WooPosOutlinedButton( text = primaryButton.text, onClick = primaryButton.click, modifier = Modifier .weight(0.2f) .size(80.dp), shape = RoundedCornerShape(8.dp), style = MaterialTheme.typography.h6 ) } } } @Composable @WooPosPreview fun WooPosPaginationErrorScreenPreview() { val itemsState = WooPosItemsViewState.Content( items = listOf( SimpleProduct( 1, name = "Product 1, Product 1, Product 1, " + "Product 1, Product 1, Product 1, Product 1, Product 1" + "Product 1, Product 1, Product 1, Product 1, Product 1", price = "10.0$", imageUrl = null, ), SimpleProduct( 2, name = "Product 2", price = "2000.00$", imageUrl = null, ), VariableProduct( 3, name = "Product 3", price = "2000.00$", imageUrl = null, numOfVariations = 20, variationIds = listOf() ), ), paginationState = PaginationState.Error, reloadingProductsWithPullToRefresh = true, bannerState = WooPosItemsViewState.Content.BannerState( isBannerHiddenByUser = true, title = R.string.woopos_banner_simple_products_only_title, message = R.string.woopos_banner_simple_products_only_message, icon = R.drawable.info, ), ) WooPosTheme { WooPosItemList( state = itemsState, listState = rememberLazyListState(), onItemClicked = {}, onEndOfProductsListReached = {} ) { WooPosPaginationErrorIndicator( message = stringResource(id = R.string.woopos_items_pagination_error_title), description = stringResource(id = R.string.woopos_items_pagination_error_description), primaryButton = Button( text = stringResource(id = R.string.woopos_items_pagination_try_again_label), click = {} ) ) } } } \ No newline at end of file From 175da65d4a7004c649cd8cf9e563b425bbf718e9 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 19:45:01 +0530 Subject: [PATCH 08/21] Add WooPosButton compose component --- .../composeui/component/WooPosButtons.kt | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt index 1d7deee0eea..f0fe696d056 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt @@ -120,6 +120,40 @@ fun WooPosOutlinedButton( } } +@Composable +fun WooPosOutlinedButton( + modifier: Modifier = Modifier, + text: String, + onClick: () -> Unit, +) { + Button( + modifier = modifier + .fillMaxWidth() + .height(80.dp), + onClick = onClick, + border = BorderStroke(2.dp, MaterialTheme.colors.onBackground), + shape = RoundedCornerShape(8.dp), + colors = ButtonDefaults.buttonColors( + backgroundColor = MaterialTheme.colors.background, + contentColor = MaterialTheme.colors.onBackground, + ), + elevation = ButtonDefaults.elevation( + defaultElevation = 0.dp, + pressedElevation = 0.dp, + disabledElevation = 0.dp, + hoveredElevation = 0.dp, + focusedElevation = 0.dp + ) + ) { + Text( + text = text, + color = MaterialTheme.colors.onBackground, + style = MaterialTheme.typography.h5, + fontWeight = FontWeight.Bold, + ) + } +} + @Composable @WooPosPreview fun WooPosButtonsPreview() { From 995c606101e9897f2f875e65cf64adcb41c5b129 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 19:45:25 +0530 Subject: [PATCH 09/21] Minor changes to WooPosPaginationErrorIndicator to align with the design --- .../composeui/component/WooPosPaginationErrorIndicator.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt index bdbd03f85e0..4c67d04e91a 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt @@ -1 +1 @@ -package com.woocommerce.android.ui.woopos.common.composeui.component import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row 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.lazy.rememberLazyListState 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.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.semantics.contentDescription import androidx.compose.ui.semantics.semantics 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.ShadowType 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 import com.woocommerce.android.ui.woopos.home.items.PaginationState import com.woocommerce.android.ui.woopos.home.items.WooPosItem.SimpleProduct import com.woocommerce.android.ui.woopos.home.items.WooPosItem.VariableProduct import com.woocommerce.android.ui.woopos.home.items.WooPosItemList import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState @Composable fun WooPosPaginationErrorIndicator( modifier: Modifier = Modifier, icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error), message: String, description: String, primaryButton: Button, ) { WooPosPaginationErrorIndicatorContent( modifier = modifier, icon = icon, message = message, description = description, primaryButton = primaryButton ) } @Composable private fun WooPosPaginationErrorIndicatorContent( modifier: Modifier, icon: Painter, message: String, description: String, primaryButton: Button ) { val itemContentDescription = stringResource(id = R.string.woopos_items_pagination_error_content_description) WooPosCard( modifier = modifier .semantics { contentDescription = itemContentDescription }, shape = RoundedCornerShape(8.dp), backgroundColor = MaterialTheme.colors.surface, elevation = 6.dp, shadowType = ShadowType.Soft, ) { Row( modifier = Modifier .height(112.dp) .fillMaxWidth() .padding(16.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { Row( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), modifier = Modifier.weight(1f) ) { Icon( modifier = Modifier .padding( start = 12.dp, end = 12.dp ) .size(64.dp), painter = icon, contentDescription = stringResource(R.string.woopos_error_icon_content_description), tint = Color.Unspecified, ) Column(modifier = Modifier.padding(start = 32.dp)) { Text( text = message, style = MaterialTheme.typography.h5, fontWeight = FontWeight.SemiBold, ) Text( text = description, style = MaterialTheme.typography.h5, fontWeight = FontWeight.Normal, modifier = Modifier.padding(top = 8.dp.toAdaptivePadding()) ) } } WooPosOutlinedButton( text = primaryButton.text, onClick = primaryButton.click, modifier = Modifier .weight(0.2f) .size(80.dp), shape = RoundedCornerShape(8.dp), style = MaterialTheme.typography.h6 ) } } } @Composable @WooPosPreview fun WooPosPaginationErrorScreenPreview() { val itemsState = WooPosItemsViewState.Content( items = listOf( SimpleProduct( 1, name = "Product 1, Product 1, Product 1, " + "Product 1, Product 1, Product 1, Product 1, Product 1" + "Product 1, Product 1, Product 1, Product 1, Product 1", price = "10.0$", imageUrl = null, ), SimpleProduct( 2, name = "Product 2", price = "2000.00$", imageUrl = null, ), VariableProduct( 3, name = "Product 3", price = "2000.00$", imageUrl = null, numOfVariations = 20, variationIds = listOf() ), ), paginationState = PaginationState.Error, reloadingProductsWithPullToRefresh = true, bannerState = WooPosItemsViewState.Content.BannerState( isBannerHiddenByUser = true, title = R.string.woopos_banner_simple_products_only_title, message = R.string.woopos_banner_simple_products_only_message, icon = R.drawable.info, ), ) WooPosTheme { WooPosItemList( state = itemsState, listState = rememberLazyListState(), onItemClicked = {}, onEndOfProductsListReached = {} ) { WooPosPaginationErrorIndicator( message = stringResource(id = R.string.woopos_items_pagination_error_title), description = stringResource(id = R.string.woopos_items_pagination_error_description), primaryButton = Button( text = stringResource(id = R.string.woopos_items_pagination_try_again_label), click = {} ) ) } } } \ No newline at end of file +package com.woocommerce.android.ui.woopos.common.composeui.component import androidx.compose.foundation.layout.Arrangement 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.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.lazy.rememberLazyListState 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.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.semantics.contentDescription import androidx.compose.ui.semantics.semantics 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.ShadowType 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 import com.woocommerce.android.ui.woopos.home.items.PaginationState import com.woocommerce.android.ui.woopos.home.items.WooPosItem.SimpleProduct import com.woocommerce.android.ui.woopos.home.items.WooPosItem.VariableProduct import com.woocommerce.android.ui.woopos.home.items.WooPosItemList import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState @Composable fun WooPosPaginationErrorIndicator( modifier: Modifier = Modifier, icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error), message: String, description: String, primaryButton: Button, ) { WooPosPaginationErrorIndicatorContent( modifier = modifier, icon = icon, message = message, description = description, primaryButton = primaryButton ) } @Composable private fun WooPosPaginationErrorIndicatorContent( modifier: Modifier, icon: Painter, message: String, description: String, primaryButton: Button ) { val itemContentDescription = stringResource(id = R.string.woopos_items_pagination_error_content_description) WooPosCard( modifier = modifier .semantics { contentDescription = itemContentDescription }, shape = RoundedCornerShape(8.dp), backgroundColor = MaterialTheme.colors.surface, elevation = 6.dp, shadowType = ShadowType.Soft, ) { Row( modifier = Modifier .height(112.dp) .fillMaxWidth() .padding(16.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { Row( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), modifier = Modifier.weight(1f) ) { Box( modifier = Modifier .size(112.dp) ) { Icon( modifier = Modifier .size(54.dp) .align(Alignment.Center), painter = icon, contentDescription = stringResource(R.string.woopos_error_icon_content_description), tint = Color.Unspecified, ) } Spacer(modifier = Modifier.width(2.dp)) Column { Text( text = message, style = MaterialTheme.typography.h5, fontWeight = FontWeight.SemiBold, ) Text( text = description, style = MaterialTheme.typography.h5, fontWeight = FontWeight.Normal, modifier = Modifier.padding(top = 8.dp.toAdaptivePadding()) ) } } WooPosOutlinedButton( text = primaryButton.text, onClick = primaryButton.click, modifier = Modifier .weight(0.25f), ) } } } @Composable @WooPosPreview fun WooPosPaginationErrorScreenPreview() { val itemsState = WooPosItemsViewState.Content( items = listOf( SimpleProduct( 1, name = "Product 1, Product 1, Product 1, " + "Product 1, Product 1, Product 1, Product 1, Product 1" + "Product 1, Product 1, Product 1, Product 1, Product 1", price = "10.0$", imageUrl = null, ), SimpleProduct( 2, name = "Product 2", price = "2000.00$", imageUrl = null, ), VariableProduct( 3, name = "Product 3", price = "2000.00$", imageUrl = null, numOfVariations = 20, variationIds = listOf() ), ), paginationState = PaginationState.Error, reloadingProductsWithPullToRefresh = true, bannerState = WooPosItemsViewState.Content.BannerState( isBannerHiddenByUser = true, title = R.string.woopos_banner_simple_products_only_title, message = R.string.woopos_banner_simple_products_only_message, icon = R.drawable.info, ), ) WooPosTheme { WooPosItemList( state = itemsState, listState = rememberLazyListState(), onItemClicked = {}, onEndOfProductsListReached = {} ) { WooPosPaginationErrorIndicator( message = stringResource(id = R.string.woopos_items_pagination_error_title), description = stringResource(id = R.string.woopos_items_pagination_error_description), primaryButton = Button( text = stringResource(id = R.string.woopos_items_pagination_try_again_label), click = {} ) ) } } } \ No newline at end of file From 2d7b593b6ca7f3d082b68f06e99b37f9056147aa Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 20:24:39 +0530 Subject: [PATCH 10/21] Minor changes to WooPosPaginationErrorIndicator to align with the design --- .../composeui/component/WooPosPaginationErrorIndicator.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt index 4c67d04e91a..453d6d3b25e 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt @@ -1 +1 @@ -package com.woocommerce.android.ui.woopos.common.composeui.component import androidx.compose.foundation.layout.Arrangement 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.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.lazy.rememberLazyListState 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.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.semantics.contentDescription import androidx.compose.ui.semantics.semantics 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.ShadowType 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 import com.woocommerce.android.ui.woopos.home.items.PaginationState import com.woocommerce.android.ui.woopos.home.items.WooPosItem.SimpleProduct import com.woocommerce.android.ui.woopos.home.items.WooPosItem.VariableProduct import com.woocommerce.android.ui.woopos.home.items.WooPosItemList import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState @Composable fun WooPosPaginationErrorIndicator( modifier: Modifier = Modifier, icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error), message: String, description: String, primaryButton: Button, ) { WooPosPaginationErrorIndicatorContent( modifier = modifier, icon = icon, message = message, description = description, primaryButton = primaryButton ) } @Composable private fun WooPosPaginationErrorIndicatorContent( modifier: Modifier, icon: Painter, message: String, description: String, primaryButton: Button ) { val itemContentDescription = stringResource(id = R.string.woopos_items_pagination_error_content_description) WooPosCard( modifier = modifier .semantics { contentDescription = itemContentDescription }, shape = RoundedCornerShape(8.dp), backgroundColor = MaterialTheme.colors.surface, elevation = 6.dp, shadowType = ShadowType.Soft, ) { Row( modifier = Modifier .height(112.dp) .fillMaxWidth() .padding(16.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { Row( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), modifier = Modifier.weight(1f) ) { Box( modifier = Modifier .size(112.dp) ) { Icon( modifier = Modifier .size(54.dp) .align(Alignment.Center), painter = icon, contentDescription = stringResource(R.string.woopos_error_icon_content_description), tint = Color.Unspecified, ) } Spacer(modifier = Modifier.width(2.dp)) Column { Text( text = message, style = MaterialTheme.typography.h5, fontWeight = FontWeight.SemiBold, ) Text( text = description, style = MaterialTheme.typography.h5, fontWeight = FontWeight.Normal, modifier = Modifier.padding(top = 8.dp.toAdaptivePadding()) ) } } WooPosOutlinedButton( text = primaryButton.text, onClick = primaryButton.click, modifier = Modifier .weight(0.25f), ) } } } @Composable @WooPosPreview fun WooPosPaginationErrorScreenPreview() { val itemsState = WooPosItemsViewState.Content( items = listOf( SimpleProduct( 1, name = "Product 1, Product 1, Product 1, " + "Product 1, Product 1, Product 1, Product 1, Product 1" + "Product 1, Product 1, Product 1, Product 1, Product 1", price = "10.0$", imageUrl = null, ), SimpleProduct( 2, name = "Product 2", price = "2000.00$", imageUrl = null, ), VariableProduct( 3, name = "Product 3", price = "2000.00$", imageUrl = null, numOfVariations = 20, variationIds = listOf() ), ), paginationState = PaginationState.Error, reloadingProductsWithPullToRefresh = true, bannerState = WooPosItemsViewState.Content.BannerState( isBannerHiddenByUser = true, title = R.string.woopos_banner_simple_products_only_title, message = R.string.woopos_banner_simple_products_only_message, icon = R.drawable.info, ), ) WooPosTheme { WooPosItemList( state = itemsState, listState = rememberLazyListState(), onItemClicked = {}, onEndOfProductsListReached = {} ) { WooPosPaginationErrorIndicator( message = stringResource(id = R.string.woopos_items_pagination_error_title), description = stringResource(id = R.string.woopos_items_pagination_error_description), primaryButton = Button( text = stringResource(id = R.string.woopos_items_pagination_try_again_label), click = {} ) ) } } } \ No newline at end of file +package com.woocommerce.android.ui.woopos.common.composeui.component import androidx.compose.foundation.layout.Arrangement 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.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.lazy.rememberLazyListState 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.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.semantics.contentDescription import androidx.compose.ui.semantics.semantics 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.ShadowType 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 import com.woocommerce.android.ui.woopos.home.items.PaginationState import com.woocommerce.android.ui.woopos.home.items.WooPosItem.SimpleProduct import com.woocommerce.android.ui.woopos.home.items.WooPosItem.VariableProduct import com.woocommerce.android.ui.woopos.home.items.WooPosItemList import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState @Composable fun WooPosPaginationErrorIndicator( modifier: Modifier = Modifier, icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error), message: String, description: String, primaryButton: Button, ) { WooPosPaginationErrorIndicatorContent( modifier = modifier, icon = icon, message = message, description = description, primaryButton = primaryButton ) } @Composable private fun WooPosPaginationErrorIndicatorContent( modifier: Modifier, icon: Painter, message: String, description: String, primaryButton: Button ) { val itemContentDescription = stringResource(id = R.string.woopos_items_pagination_error_content_description) WooPosCard( modifier = modifier .semantics { contentDescription = itemContentDescription }, shape = RoundedCornerShape(8.dp), backgroundColor = MaterialTheme.colors.surface, elevation = 6.dp, shadowType = ShadowType.Soft, ) { Row( modifier = Modifier .height(112.dp) .fillMaxWidth() .padding(end = 16.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { Row( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), modifier = Modifier.weight(1f) ) { Box( modifier = Modifier .size(100.dp) ) { Icon( modifier = Modifier .size(54.dp) .align(Alignment.Center), painter = icon, contentDescription = stringResource(R.string.woopos_error_icon_content_description), tint = Color.Unspecified, ) } Spacer(modifier = Modifier.width(30.dp)) Column { Text( text = message, style = MaterialTheme.typography.h5, fontWeight = FontWeight.SemiBold, ) Text( text = description, style = MaterialTheme.typography.h5, fontWeight = FontWeight.Normal, modifier = Modifier.padding(top = 8.dp.toAdaptivePadding()) ) } } WooPosOutlinedButton( text = primaryButton.text, onClick = primaryButton.click, modifier = Modifier .weight(0.25f), ) } } } @Composable @WooPosPreview fun WooPosPaginationErrorScreenPreview() { val itemsState = WooPosItemsViewState.Content( items = listOf( SimpleProduct( 1, name = "Product 1, Product 1, Product 1, " + "Product 1, Product 1, Product 1, Product 1, Product 1" + "Product 1, Product 1, Product 1, Product 1, Product 1", price = "10.0$", imageUrl = null, ), SimpleProduct( 2, name = "Product 2", price = "2000.00$", imageUrl = null, ), VariableProduct( 3, name = "Product 3", price = "2000.00$", imageUrl = null, numOfVariations = 20, variationIds = listOf() ), ), paginationState = PaginationState.Error, reloadingProductsWithPullToRefresh = true, bannerState = WooPosItemsViewState.Content.BannerState( isBannerHiddenByUser = true, title = R.string.woopos_banner_simple_products_only_title, message = R.string.woopos_banner_simple_products_only_message, icon = R.drawable.info, ), ) WooPosTheme { WooPosItemList( state = itemsState, listState = rememberLazyListState(), onItemClicked = {}, onEndOfProductsListReached = {} ) { WooPosPaginationErrorIndicator( message = stringResource(id = R.string.woopos_items_pagination_error_title), description = stringResource(id = R.string.woopos_items_pagination_error_description), primaryButton = Button( text = stringResource(id = R.string.woopos_items_pagination_try_again_label), click = {} ) ) } } } \ No newline at end of file From a241bc7f6fbdb04342705080bbaa14bf0dd37d24 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 20:27:42 +0530 Subject: [PATCH 11/21] Revert changes --- .../ui/woopos/common/composeui/component/WooPosButtons.kt | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt index f0fe696d056..ef95b65bdf2 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt @@ -15,7 +15,6 @@ import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview @@ -91,7 +90,6 @@ fun WooPosOutlinedButton( modifier: Modifier = Modifier, text: String, shape: RoundedCornerShape = RoundedCornerShape(4.dp), - style: TextStyle = MaterialTheme.typography.body2, onClick: () -> Unit, ) { Button( @@ -114,7 +112,7 @@ fun WooPosOutlinedButton( Text( text = text, color = MaterialTheme.colors.primary, - style = style, + style = MaterialTheme.typography.body2, fontWeight = FontWeight.SemiBold, ) } From a94ebc36fb48d59ba08c4b28688c8d0bce9d0924 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 20:32:47 +0530 Subject: [PATCH 12/21] Windows line separator --- .../WooPosPaginationErrorIndicator.kt | 183 +++++++++++++++++- 1 file changed, 182 insertions(+), 1 deletion(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt index 453d6d3b25e..2f75e943eb1 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt @@ -1 +1,182 @@ -package com.woocommerce.android.ui.woopos.common.composeui.component import androidx.compose.foundation.layout.Arrangement 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.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.lazy.rememberLazyListState 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.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.semantics.contentDescription import androidx.compose.ui.semantics.semantics 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.ShadowType 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 import com.woocommerce.android.ui.woopos.home.items.PaginationState import com.woocommerce.android.ui.woopos.home.items.WooPosItem.SimpleProduct import com.woocommerce.android.ui.woopos.home.items.WooPosItem.VariableProduct import com.woocommerce.android.ui.woopos.home.items.WooPosItemList import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState @Composable fun WooPosPaginationErrorIndicator( modifier: Modifier = Modifier, icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error), message: String, description: String, primaryButton: Button, ) { WooPosPaginationErrorIndicatorContent( modifier = modifier, icon = icon, message = message, description = description, primaryButton = primaryButton ) } @Composable private fun WooPosPaginationErrorIndicatorContent( modifier: Modifier, icon: Painter, message: String, description: String, primaryButton: Button ) { val itemContentDescription = stringResource(id = R.string.woopos_items_pagination_error_content_description) WooPosCard( modifier = modifier .semantics { contentDescription = itemContentDescription }, shape = RoundedCornerShape(8.dp), backgroundColor = MaterialTheme.colors.surface, elevation = 6.dp, shadowType = ShadowType.Soft, ) { Row( modifier = Modifier .height(112.dp) .fillMaxWidth() .padding(end = 16.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { Row( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), modifier = Modifier.weight(1f) ) { Box( modifier = Modifier .size(100.dp) ) { Icon( modifier = Modifier .size(54.dp) .align(Alignment.Center), painter = icon, contentDescription = stringResource(R.string.woopos_error_icon_content_description), tint = Color.Unspecified, ) } Spacer(modifier = Modifier.width(30.dp)) Column { Text( text = message, style = MaterialTheme.typography.h5, fontWeight = FontWeight.SemiBold, ) Text( text = description, style = MaterialTheme.typography.h5, fontWeight = FontWeight.Normal, modifier = Modifier.padding(top = 8.dp.toAdaptivePadding()) ) } } WooPosOutlinedButton( text = primaryButton.text, onClick = primaryButton.click, modifier = Modifier .weight(0.25f), ) } } } @Composable @WooPosPreview fun WooPosPaginationErrorScreenPreview() { val itemsState = WooPosItemsViewState.Content( items = listOf( SimpleProduct( 1, name = "Product 1, Product 1, Product 1, " + "Product 1, Product 1, Product 1, Product 1, Product 1" + "Product 1, Product 1, Product 1, Product 1, Product 1", price = "10.0$", imageUrl = null, ), SimpleProduct( 2, name = "Product 2", price = "2000.00$", imageUrl = null, ), VariableProduct( 3, name = "Product 3", price = "2000.00$", imageUrl = null, numOfVariations = 20, variationIds = listOf() ), ), paginationState = PaginationState.Error, reloadingProductsWithPullToRefresh = true, bannerState = WooPosItemsViewState.Content.BannerState( isBannerHiddenByUser = true, title = R.string.woopos_banner_simple_products_only_title, message = R.string.woopos_banner_simple_products_only_message, icon = R.drawable.info, ), ) WooPosTheme { WooPosItemList( state = itemsState, listState = rememberLazyListState(), onItemClicked = {}, onEndOfProductsListReached = {} ) { WooPosPaginationErrorIndicator( message = stringResource(id = R.string.woopos_items_pagination_error_title), description = stringResource(id = R.string.woopos_items_pagination_error_description), primaryButton = Button( text = stringResource(id = R.string.woopos_items_pagination_try_again_label), click = {} ) ) } } } \ No newline at end of file +package com.woocommerce.android.ui.woopos.common.composeui.component + +import androidx.compose.foundation.layout.Arrangement +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.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.lazy.rememberLazyListState +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.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.semantics.contentDescription +import androidx.compose.ui.semantics.semantics +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.ShadowType +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 +import com.woocommerce.android.ui.woopos.home.items.PaginationState +import com.woocommerce.android.ui.woopos.home.items.WooPosItem.SimpleProduct +import com.woocommerce.android.ui.woopos.home.items.WooPosItem.VariableProduct +import com.woocommerce.android.ui.woopos.home.items.WooPosItemList +import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState + +@Composable +fun WooPosPaginationErrorIndicator( + modifier: Modifier = Modifier, + icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error), + message: String, + description: String, + primaryButton: Button, +) { + WooPosPaginationErrorIndicatorContent( + modifier = modifier, + icon = icon, + message = message, + description = description, + primaryButton = primaryButton + ) +} + +@Composable +private fun WooPosPaginationErrorIndicatorContent( + modifier: Modifier, + icon: Painter, + message: String, + description: String, + primaryButton: Button +) { + val itemContentDescription = stringResource(id = R.string.woopos_items_pagination_error_content_description) + WooPosCard( + modifier = modifier + .semantics { contentDescription = itemContentDescription }, + shape = RoundedCornerShape(8.dp), + backgroundColor = MaterialTheme.colors.surface, + elevation = 6.dp, + shadowType = ShadowType.Soft, + ) { + Row( + modifier = Modifier + .height(112.dp) + .fillMaxWidth() + .padding(end = 16.dp), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + modifier = Modifier.weight(1f) + ) { + Box( + modifier = Modifier + .size(100.dp) + ) { + Icon( + modifier = Modifier + .size(54.dp) + .align(Alignment.Center), + painter = icon, + contentDescription = stringResource(R.string.woopos_error_icon_content_description), + tint = Color.Unspecified, + ) + } + Spacer(modifier = Modifier.width(30.dp)) + Column { + Text( + text = message, + style = MaterialTheme.typography.h5, + fontWeight = FontWeight.SemiBold, + ) + Text( + text = description, + style = MaterialTheme.typography.h5, + fontWeight = FontWeight.Normal, + modifier = Modifier.padding(top = 8.dp.toAdaptivePadding()) + ) + } + } + + WooPosOutlinedButton( + text = primaryButton.text, + onClick = primaryButton.click, + modifier = Modifier + .weight(0.25f), + ) + } + } +} + +@Composable +@WooPosPreview +fun WooPosPaginationErrorScreenPreview() { + val itemsState = + WooPosItemsViewState.Content( + items = listOf( + SimpleProduct( + 1, + name = "Product 1, Product 1, Product 1, " + + "Product 1, Product 1, Product 1, Product 1, Product 1" + + "Product 1, Product 1, Product 1, Product 1, Product 1", + price = "10.0$", + imageUrl = null, + ), + SimpleProduct( + 2, + name = "Product 2", + price = "2000.00$", + imageUrl = null, + ), + VariableProduct( + 3, + name = "Product 3", + price = "2000.00$", + imageUrl = null, + numOfVariations = 20, + variationIds = listOf() + ), + ), + paginationState = PaginationState.Error, + reloadingProductsWithPullToRefresh = true, + bannerState = WooPosItemsViewState.Content.BannerState( + isBannerHiddenByUser = true, + title = R.string.woopos_banner_simple_products_only_title, + message = R.string.woopos_banner_simple_products_only_message, + icon = R.drawable.info, + ), + ) + WooPosTheme { + WooPosItemList( + state = itemsState, + listState = rememberLazyListState(), + onItemClicked = {}, + onEndOfProductsListReached = {} + ) { + WooPosPaginationErrorIndicator( + message = stringResource(id = R.string.woopos_items_pagination_error_title), + description = stringResource(id = R.string.woopos_items_pagination_error_description), + primaryButton = Button( + text = stringResource(id = R.string.woopos_items_pagination_try_again_label), + click = {} + ) + ) + } + } +} From c7f2c0a1e8e8996b316e51fa08f9a31a4a2ee28d Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 20:34:49 +0530 Subject: [PATCH 13/21] MacOS line separator --- .../WooPosPaginationErrorIndicator.kt | 364 +++++++++--------- 1 file changed, 182 insertions(+), 182 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt index 2f75e943eb1..c5eb33cb8a4 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt @@ -1,182 +1,182 @@ -package com.woocommerce.android.ui.woopos.common.composeui.component - -import androidx.compose.foundation.layout.Arrangement -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.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.lazy.rememberLazyListState -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.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.semantics.contentDescription -import androidx.compose.ui.semantics.semantics -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.ShadowType -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 -import com.woocommerce.android.ui.woopos.home.items.PaginationState -import com.woocommerce.android.ui.woopos.home.items.WooPosItem.SimpleProduct -import com.woocommerce.android.ui.woopos.home.items.WooPosItem.VariableProduct -import com.woocommerce.android.ui.woopos.home.items.WooPosItemList -import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState - -@Composable -fun WooPosPaginationErrorIndicator( - modifier: Modifier = Modifier, - icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error), - message: String, - description: String, - primaryButton: Button, -) { - WooPosPaginationErrorIndicatorContent( - modifier = modifier, - icon = icon, - message = message, - description = description, - primaryButton = primaryButton - ) -} - -@Composable -private fun WooPosPaginationErrorIndicatorContent( - modifier: Modifier, - icon: Painter, - message: String, - description: String, - primaryButton: Button -) { - val itemContentDescription = stringResource(id = R.string.woopos_items_pagination_error_content_description) - WooPosCard( - modifier = modifier - .semantics { contentDescription = itemContentDescription }, - shape = RoundedCornerShape(8.dp), - backgroundColor = MaterialTheme.colors.surface, - elevation = 6.dp, - shadowType = ShadowType.Soft, - ) { - Row( - modifier = Modifier - .height(112.dp) - .fillMaxWidth() - .padding(end = 16.dp), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween - ) { - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(8.dp), - modifier = Modifier.weight(1f) - ) { - Box( - modifier = Modifier - .size(100.dp) - ) { - Icon( - modifier = Modifier - .size(54.dp) - .align(Alignment.Center), - painter = icon, - contentDescription = stringResource(R.string.woopos_error_icon_content_description), - tint = Color.Unspecified, - ) - } - Spacer(modifier = Modifier.width(30.dp)) - Column { - Text( - text = message, - style = MaterialTheme.typography.h5, - fontWeight = FontWeight.SemiBold, - ) - Text( - text = description, - style = MaterialTheme.typography.h5, - fontWeight = FontWeight.Normal, - modifier = Modifier.padding(top = 8.dp.toAdaptivePadding()) - ) - } - } - - WooPosOutlinedButton( - text = primaryButton.text, - onClick = primaryButton.click, - modifier = Modifier - .weight(0.25f), - ) - } - } -} - -@Composable -@WooPosPreview -fun WooPosPaginationErrorScreenPreview() { - val itemsState = - WooPosItemsViewState.Content( - items = listOf( - SimpleProduct( - 1, - name = "Product 1, Product 1, Product 1, " + - "Product 1, Product 1, Product 1, Product 1, Product 1" + - "Product 1, Product 1, Product 1, Product 1, Product 1", - price = "10.0$", - imageUrl = null, - ), - SimpleProduct( - 2, - name = "Product 2", - price = "2000.00$", - imageUrl = null, - ), - VariableProduct( - 3, - name = "Product 3", - price = "2000.00$", - imageUrl = null, - numOfVariations = 20, - variationIds = listOf() - ), - ), - paginationState = PaginationState.Error, - reloadingProductsWithPullToRefresh = true, - bannerState = WooPosItemsViewState.Content.BannerState( - isBannerHiddenByUser = true, - title = R.string.woopos_banner_simple_products_only_title, - message = R.string.woopos_banner_simple_products_only_message, - icon = R.drawable.info, - ), - ) - WooPosTheme { - WooPosItemList( - state = itemsState, - listState = rememberLazyListState(), - onItemClicked = {}, - onEndOfProductsListReached = {} - ) { - WooPosPaginationErrorIndicator( - message = stringResource(id = R.string.woopos_items_pagination_error_title), - description = stringResource(id = R.string.woopos_items_pagination_error_description), - primaryButton = Button( - text = stringResource(id = R.string.woopos_items_pagination_try_again_label), - click = {} - ) - ) - } - } -} +package com.woocommerce.android.ui.woopos.common.composeui.component + +import androidx.compose.foundation.layout.Arrangement +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.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.lazy.rememberLazyListState +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.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.semantics.contentDescription +import androidx.compose.ui.semantics.semantics +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.ShadowType +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 +import com.woocommerce.android.ui.woopos.home.items.PaginationState +import com.woocommerce.android.ui.woopos.home.items.WooPosItem.SimpleProduct +import com.woocommerce.android.ui.woopos.home.items.WooPosItem.VariableProduct +import com.woocommerce.android.ui.woopos.home.items.WooPosItemList +import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState + +@Composable +fun WooPosPaginationErrorIndicator( + modifier: Modifier = Modifier, + icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error), + message: String, + description: String, + primaryButton: Button, +) { + WooPosPaginationErrorIndicatorContent( + modifier = modifier, + icon = icon, + message = message, + description = description, + primaryButton = primaryButton + ) +} + +@Composable +private fun WooPosPaginationErrorIndicatorContent( + modifier: Modifier, + icon: Painter, + message: String, + description: String, + primaryButton: Button +) { + val itemContentDescription = stringResource(id = R.string.woopos_items_pagination_error_content_description) + WooPosCard( + modifier = modifier + .semantics { contentDescription = itemContentDescription }, + shape = RoundedCornerShape(8.dp), + backgroundColor = MaterialTheme.colors.surface, + elevation = 6.dp, + shadowType = ShadowType.Soft, + ) { + Row( + modifier = Modifier + .height(112.dp) + .fillMaxWidth() + .padding(end = 16.dp), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + modifier = Modifier.weight(1f) + ) { + Box( + modifier = Modifier + .size(100.dp) + ) { + Icon( + modifier = Modifier + .size(54.dp) + .align(Alignment.Center), + painter = icon, + contentDescription = stringResource(R.string.woopos_error_icon_content_description), + tint = Color.Unspecified, + ) + } + Spacer(modifier = Modifier.width(30.dp)) + Column { + Text( + text = message, + style = MaterialTheme.typography.h5, + fontWeight = FontWeight.SemiBold, + ) + Text( + text = description, + style = MaterialTheme.typography.h5, + fontWeight = FontWeight.Normal, + modifier = Modifier.padding(top = 8.dp.toAdaptivePadding()) + ) + } + } + + WooPosOutlinedButton( + text = primaryButton.text, + onClick = primaryButton.click, + modifier = Modifier + .weight(0.25f), + ) + } + } +} + +@Composable +@WooPosPreview +fun WooPosPaginationErrorScreenPreview() { + val itemsState = + WooPosItemsViewState.Content( + items = listOf( + SimpleProduct( + 1, + name = "Product 1, Product 1, Product 1, " + + "Product 1, Product 1, Product 1, Product 1, Product 1" + + "Product 1, Product 1, Product 1, Product 1, Product 1", + price = "10.0$", + imageUrl = null, + ), + SimpleProduct( + 2, + name = "Product 2", + price = "2000.00$", + imageUrl = null, + ), + VariableProduct( + 3, + name = "Product 3", + price = "2000.00$", + imageUrl = null, + numOfVariations = 20, + variationIds = listOf() + ), + ), + paginationState = PaginationState.Error, + reloadingProductsWithPullToRefresh = true, + bannerState = WooPosItemsViewState.Content.BannerState( + isBannerHiddenByUser = true, + title = R.string.woopos_banner_simple_products_only_title, + message = R.string.woopos_banner_simple_products_only_message, + icon = R.drawable.info, + ), + ) + WooPosTheme { + WooPosItemList( + state = itemsState, + listState = rememberLazyListState(), + onItemClicked = {}, + onEndOfProductsListReached = {} + ) { + WooPosPaginationErrorIndicator( + message = stringResource(id = R.string.woopos_items_pagination_error_title), + description = stringResource(id = R.string.woopos_items_pagination_error_description), + primaryButton = Button( + text = stringResource(id = R.string.woopos_items_pagination_try_again_label), + click = {} + ) + ) + } + } +} From c6731eddb1c2165c6066d48b4c324432758655f5 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 20:36:02 +0530 Subject: [PATCH 14/21] Add toadaptivePadding --- .../composeui/component/WooPosPaginationErrorIndicator.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt index c5eb33cb8a4..8fa06459459 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt @@ -76,7 +76,7 @@ private fun WooPosPaginationErrorIndicatorContent( modifier = Modifier .height(112.dp) .fillMaxWidth() - .padding(end = 16.dp), + .padding(end = 16.dp.toAdaptivePadding()), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { From cad5232746ebc8845c9c1cb1fb8c2a2b5d8d692f Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Thu, 12 Dec 2024 20:44:55 +0530 Subject: [PATCH 15/21] Changes to padding --- .../component/WooPosPaginationErrorIndicator.kt | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt index 8fa06459459..600d5d7d8e4 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt @@ -75,10 +75,9 @@ private fun WooPosPaginationErrorIndicatorContent( Row( modifier = Modifier .height(112.dp) - .fillMaxWidth() - .padding(end = 16.dp.toAdaptivePadding()), + .fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween + horizontalArrangement = Arrangement.spacedBy(16.dp) ) { Row( verticalAlignment = Alignment.CenterVertically, @@ -87,7 +86,7 @@ private fun WooPosPaginationErrorIndicatorContent( ) { Box( modifier = Modifier - .size(100.dp) + .size(112.dp) ) { Icon( modifier = Modifier @@ -98,7 +97,7 @@ private fun WooPosPaginationErrorIndicatorContent( tint = Color.Unspecified, ) } - Spacer(modifier = Modifier.width(30.dp)) + Spacer(modifier = Modifier.width(18.dp)) Column { Text( text = message, @@ -118,6 +117,7 @@ private fun WooPosPaginationErrorIndicatorContent( text = primaryButton.text, onClick = primaryButton.click, modifier = Modifier + .padding(end = 16.dp.toAdaptivePadding()) .weight(0.25f), ) } From 528b3aabb40612f3d1f6352876e65dae2bce69b8 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Fri, 13 Dec 2024 09:53:15 +0530 Subject: [PATCH 16/21] Rename WooPosOutlinedButton to WooPosOutlinedButtonSmall --- .../ui/woopos/common/composeui/component/WooPosButtons.kt | 2 +- .../android/ui/woopos/home/cart/WooPosCartScreen.kt | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt index ef95b65bdf2..2b744586119 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt @@ -86,7 +86,7 @@ fun WooPosButtonLarge( } @Composable -fun WooPosOutlinedButton( +fun WooPosOutlinedButtonSmall( modifier: Modifier = Modifier, text: String, shape: RoundedCornerShape = RoundedCornerShape(4.dp), diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt index a862c337860..32d760d5a61 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt @@ -68,7 +68,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.WooPosButton import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosLazyColumn -import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosOutlinedButton +import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosOutlinedButtonSmall import com.woocommerce.android.ui.woopos.common.composeui.toAdaptivePadding @Composable @@ -380,7 +380,7 @@ private fun CartToolbar( } if (toolbar.isClearAllButtonVisible) { - WooPosOutlinedButton( + WooPosOutlinedButtonSmall( onClick = { onClearAllClicked() }, modifier = Modifier .constrainAs(clearAllButton) { From e2646c42fe1d20d624f8277f41da62f72b60ab45 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Fri, 13 Dec 2024 10:01:34 +0530 Subject: [PATCH 17/21] Make error title bold --- .../composeui/component/WooPosPaginationErrorIndicator.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt index 600d5d7d8e4..4385b0cb0e4 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt @@ -102,7 +102,7 @@ private fun WooPosPaginationErrorIndicatorContent( Text( text = message, style = MaterialTheme.typography.h5, - fontWeight = FontWeight.SemiBold, + fontWeight = FontWeight.Bold, ) Text( text = description, From 012670100d58ddc757e59f6b3e8387037c25067d Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Fri, 13 Dec 2024 16:40:51 +0530 Subject: [PATCH 18/21] Add filter to check virtual and downloadable --- .../woopos/home/items/variations/WooPosVariationsViewModel.kt | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/variations/WooPosVariationsViewModel.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/variations/WooPosVariationsViewModel.kt index 3349356f1ba..d761576f6a6 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/variations/WooPosVariationsViewModel.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/variations/WooPosVariationsViewModel.kt @@ -83,7 +83,9 @@ class WooPosVariationsViewModel @Inject constructor( val variations = result.result.getOrThrow() if (variations.isNotEmpty()) { WooPosVariationsViewState.Content( - items = variations.filter { it.price != null }.map { + items = variations.filter { + it.price != null && !it.isVirtual && !it.isDownloadable + }.map { WooPosItem.Variation( id = it.remoteVariationId, name = it.getName(getProductById(productId)), From e6d44874ba133f78d5e82ae350fca23bbaf5b5f9 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Fri, 13 Dec 2024 16:41:08 +0530 Subject: [PATCH 19/21] Add test to verify variations whose price is not set is not displayed --- .../WooPosVariationsViewModelTest.kt | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/variations/WooPosVariationsViewModelTest.kt b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/variations/WooPosVariationsViewModelTest.kt index e97133a768c..8733efcfb92 100644 --- a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/variations/WooPosVariationsViewModelTest.kt +++ b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/variations/WooPosVariationsViewModelTest.kt @@ -67,6 +67,30 @@ class WooPosVariationsViewModelTest { } } + @Test + fun `given variations from data source, when view model created, then filter variations that does not have price`() = runTest { + // GIVEN + val variations = listOf( + ProductTestUtils.generateProductVariation(1, 1, "10.0"), + ProductTestUtils.generateProductVariation(2, 1, "") + ) + whenever(variationsDataSource.fetchFirstPage(any(), any())).thenReturn( + flowOf(FetchResult.Remote(Result.success(variations))) + ) + + // WHEN + val viewModel = createViewModel() + viewModel.init(1L) + + viewModel.viewState.test { + // THEN + val state = awaitItem() as WooPosVariationsViewState.Content + assertThat(state.items).hasSize(1) + assertThat(state.items[0].id).isEqualTo(1) + assertThat(state.items[0].price).isEqualTo("$10.0") + } + } + @Test fun `given empty variations list returned, when view model created, then view state is empty`() = runTest { // GIVEN From aab5faaa56065a57e6b006dd0ad56db413811052 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Fri, 13 Dec 2024 16:43:04 +0530 Subject: [PATCH 20/21] Add test to verify variations which are virtual are not displayed --- .../android/ui/products/ProductTestUtils.kt | 4 ++++ .../WooPosVariationsViewModelTest.kt | 24 +++++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/products/ProductTestUtils.kt b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/products/ProductTestUtils.kt index ad18e4a54fe..07debfa46f6 100644 --- a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/products/ProductTestUtils.kt +++ b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/products/ProductTestUtils.kt @@ -118,6 +118,8 @@ object ProductTestUtils { productId: Long = 1L, variationId: Long = 1L, amount: String = "10.00", + isVirtual: Boolean = false, + isDownloadable: Boolean = false, ): ProductVariation { return WCProductVariationModel(2).apply { dateCreated = "2018-01-05T05:14:30Z" @@ -127,6 +129,8 @@ object ProductTestUtils { price = amount image = "" attributes = "" + virtual = isVirtual + downloadable = isDownloadable }.toAppModel().also { it.priceWithCurrency = "$10.00" } } diff --git a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/variations/WooPosVariationsViewModelTest.kt b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/variations/WooPosVariationsViewModelTest.kt index 8733efcfb92..08e8c693111 100644 --- a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/variations/WooPosVariationsViewModelTest.kt +++ b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/variations/WooPosVariationsViewModelTest.kt @@ -91,6 +91,30 @@ class WooPosVariationsViewModelTest { } } + @Test + fun `given variations from data source, when view model created, then filter variations that are virtual`() = runTest { + // GIVEN + val variations = listOf( + ProductTestUtils.generateProductVariation(1, 1, "10.0"), + ProductTestUtils.generateProductVariation(2, 1, "20.0", true) + ) + whenever(variationsDataSource.fetchFirstPage(any(), any())).thenReturn( + flowOf(FetchResult.Remote(Result.success(variations))) + ) + + // WHEN + val viewModel = createViewModel() + viewModel.init(1L) + + viewModel.viewState.test { + // THEN + val state = awaitItem() as WooPosVariationsViewState.Content + assertThat(state.items).hasSize(1) + assertThat(state.items[0].id).isEqualTo(1) + assertThat(state.items[0].price).isEqualTo("$10.0") + } + } + @Test fun `given empty variations list returned, when view model created, then view state is empty`() = runTest { // GIVEN From 86051f2164fd965a38777229ae0d95183eab0d25 Mon Sep 17 00:00:00 2001 From: AnirudhBhat Date: Fri, 13 Dec 2024 16:43:44 +0530 Subject: [PATCH 21/21] Add test to verify variations which are downloadable are not displayed --- .../WooPosVariationsViewModelTest.kt | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/variations/WooPosVariationsViewModelTest.kt b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/variations/WooPosVariationsViewModelTest.kt index 08e8c693111..243aee236b4 100644 --- a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/variations/WooPosVariationsViewModelTest.kt +++ b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/home/variations/WooPosVariationsViewModelTest.kt @@ -115,6 +115,30 @@ class WooPosVariationsViewModelTest { } } + @Test + fun `given variations from data source, when view model created, then filter variations that are downloadable`() = runTest { + // GIVEN + val variations = listOf( + ProductTestUtils.generateProductVariation(1, 1, "10.0"), + ProductTestUtils.generateProductVariation(2, 1, "20.0", isDownloadable = true) + ) + whenever(variationsDataSource.fetchFirstPage(any(), any())).thenReturn( + flowOf(FetchResult.Remote(Result.success(variations))) + ) + + // WHEN + val viewModel = createViewModel() + viewModel.init(1L) + + viewModel.viewState.test { + // THEN + val state = awaitItem() as WooPosVariationsViewState.Content + assertThat(state.items).hasSize(1) + assertThat(state.items[0].id).isEqualTo(1) + assertThat(state.items[0].price).isEqualTo("$10.0") + } + } + @Test fun `given empty variations list returned, when view model created, then view state is empty`() = runTest { // GIVEN