Skip to content

Commit 4739c26

Browse files
touppertoupper
authored
Merge pull request #14695 from woocommerce/feat/WOOMOB-1149-pos-historical-orders-list-error
[POS Orders] Empty and Error states
2 parents 83f3c17 + 189e0a4 commit 4739c26

File tree

15 files changed

+869
-241
lines changed

15 files changed

+869
-241
lines changed

‎Add_WooPosEmptyScreen_component_and_refactor_empty_list_handling.patch‎

Lines changed: 558 additions & 0 deletions
Large diffs are not rendered by default.

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

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
package com.woocommerce.android.ui.woopos.common.composeui.component
2+
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.Spacer
8+
import androidx.compose.foundation.layout.fillMaxSize
9+
import androidx.compose.foundation.layout.height
10+
import androidx.compose.foundation.layout.size
11+
import androidx.compose.foundation.rememberScrollState
12+
import androidx.compose.foundation.verticalScroll
13+
import androidx.compose.runtime.Composable
14+
import androidx.compose.ui.Alignment
15+
import androidx.compose.ui.Modifier
16+
import androidx.compose.ui.graphics.painter.Painter
17+
import androidx.compose.ui.res.painterResource
18+
import androidx.compose.ui.text.font.FontWeight
19+
import androidx.compose.ui.text.style.TextAlign
20+
import androidx.compose.ui.unit.dp
21+
import com.woocommerce.android.R
22+
import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
23+
import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
24+
import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
25+
import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
26+
import com.woocommerce.android.ui.woopos.common.composeui.designsystem.toAdaptivePadding
27+
28+
@Composable
29+
fun WooPosEmptyScreen(
30+
modifier: Modifier = Modifier,
31+
title: String,
32+
message: String,
33+
contentDescription: String,
34+
icon: Painter = painterResource(R.drawable.ic_woo_pos_not_found),
35+
) {
36+
WooPosItemsEmptyListInternal(
37+
modifier = modifier,
38+
title = title,
39+
message = message,
40+
contentDescription = contentDescription,
41+
icon = icon,
42+
actionLabel = null,
43+
onActionClicked = null
44+
)
45+
}
46+
47+
@Composable
48+
fun WooPosEmptyScreen(
49+
modifier: Modifier = Modifier,
50+
title: String,
51+
message: String,
52+
contentDescription: String,
53+
icon: Painter = painterResource(R.drawable.ic_woo_pos_not_found),
54+
actionLabel: String,
55+
onActionClicked: (() -> Unit),
56+
) {
57+
WooPosItemsEmptyListInternal(
58+
modifier = modifier,
59+
title = title,
60+
message = message,
61+
contentDescription = contentDescription,
62+
icon = icon,
63+
actionLabel = actionLabel,
64+
onActionClicked = onActionClicked
65+
)
66+
}
67+
68+
@Composable
69+
private fun WooPosItemsEmptyListInternal(
70+
modifier: Modifier = Modifier,
71+
title: String,
72+
message: String,
73+
contentDescription: String,
74+
icon: Painter = painterResource(R.drawable.ic_woo_pos_not_found),
75+
actionLabel: String?,
76+
onActionClicked: (() -> Unit)? = null,
77+
) {
78+
Box(
79+
modifier = modifier.verticalScroll(rememberScrollState()),
80+
contentAlignment = Alignment.Center
81+
) {
82+
Column(
83+
horizontalAlignment = Alignment.CenterHorizontally,
84+
verticalArrangement = Arrangement.Center
85+
) {
86+
Image(
87+
modifier = Modifier.size(148.dp),
88+
painter = icon,
89+
contentDescription = contentDescription,
90+
)
91+
92+
Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value.toAdaptivePadding()))
93+
94+
WooPosText(
95+
text = title,
96+
style = WooPosTypography.Heading,
97+
fontWeight = FontWeight.Bold,
98+
)
99+
100+
Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))
101+
102+
WooPosText(
103+
text = message,
104+
style = WooPosTypography.BodyLarge,
105+
fontWeight = FontWeight.Normal,
106+
textAlign = TextAlign.Center
107+
)
108+
109+
Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value.toAdaptivePadding()))
110+
111+
if (onActionClicked != null && actionLabel != null) {
112+
WooPosButton(
113+
text = actionLabel,
114+
onClick = onActionClicked,
115+
modifier = WooPosErrorAndEmptyStateButtonModifier
116+
)
117+
}
118+
}
119+
}
120+
}
121+
122+
@WooPosPreview
123+
@Composable
124+
fun WooPosEmptyScreenPreview() {
125+
WooPosTheme {
126+
WooPosEmptyScreen(
127+
modifier = Modifier.fillMaxSize(),
128+
title = "Empty List",
129+
message = "This list is empty",
130+
contentDescription = ""
131+
)
132+
}
133+
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
package com.woocommerce.android.ui.woopos.common.composeui.component
2+
3+
import androidx.compose.foundation.layout.fillMaxWidth
4+
import androidx.compose.foundation.layout.height
5+
import androidx.compose.ui.Modifier
6+
import androidx.compose.ui.unit.dp
7+
8+
val WooPosErrorAndEmptyStateButtonModifier = Modifier
9+
.fillMaxWidth(0.3f)
10+
.height(80.dp)

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import androidx.compose.foundation.layout.Arrangement
44
import androidx.compose.foundation.layout.Column
55
import androidx.compose.foundation.layout.Spacer
66
import androidx.compose.foundation.layout.fillMaxSize
7-
import androidx.compose.foundation.layout.fillMaxWidth
87
import androidx.compose.foundation.layout.height
98
import androidx.compose.foundation.layout.padding
109
import androidx.compose.foundation.layout.size
@@ -38,7 +37,8 @@ fun WooPosErrorScreen(
3837
secondaryButton: Button? = null
3938
) {
4039
Column(
41-
modifier = modifier.fillMaxSize()
40+
modifier = modifier
41+
.fillMaxSize()
4242
.clip(RoundedCornerShape(WooPosCornerRadius.Medium.value))
4343
.padding(WooPosSpacing.XLarge.value.toAdaptivePadding()),
4444
horizontalAlignment = Alignment.CenterHorizontally,
@@ -77,19 +77,15 @@ fun WooPosErrorScreen(
7777
WooPosButton(
7878
text = it.text,
7979
onClick = it.click,
80-
modifier = Modifier
81-
.fillMaxWidth(.5f)
82-
.height(80.dp)
80+
modifier = WooPosErrorAndEmptyStateButtonModifier
8381
)
8482
}
8583
secondaryButton?.let {
8684
Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))
8785
WooPosOutlinedButton(
8886
text = it.text,
8987
onClick = it.click,
90-
modifier = Modifier
91-
.fillMaxWidth(.5f)
92-
.height(80.dp)
88+
modifier = WooPosErrorAndEmptyStateButtonModifier
9389
)
9490
}
9591
Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))

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

Lines changed: 0 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.PaddingValues
1111
import androidx.compose.foundation.layout.Row
1212
import androidx.compose.foundation.layout.Spacer
1313
import androidx.compose.foundation.layout.fillMaxHeight
14-
import androidx.compose.foundation.layout.fillMaxSize
1514
import androidx.compose.foundation.layout.fillMaxWidth
1615
import androidx.compose.foundation.layout.height
1716
import androidx.compose.foundation.layout.heightIn
@@ -21,9 +20,7 @@ import androidx.compose.foundation.layout.width
2120
import androidx.compose.foundation.layout.wrapContentHeight
2221
import androidx.compose.foundation.lazy.LazyListState
2322
import androidx.compose.foundation.lazy.items
24-
import androidx.compose.foundation.rememberScrollState
2523
import androidx.compose.foundation.shape.RoundedCornerShape
26-
import androidx.compose.foundation.verticalScroll
2724
import androidx.compose.material.icons.Icons
2825
import androidx.compose.material.icons.outlined.LocalOffer
2926
import androidx.compose.material3.MaterialTheme
@@ -36,7 +33,6 @@ import androidx.compose.ui.Alignment
3633
import androidx.compose.ui.Modifier
3734
import androidx.compose.ui.draw.clip
3835
import androidx.compose.ui.graphics.ColorFilter
39-
import androidx.compose.ui.graphics.painter.Painter
4036
import androidx.compose.ui.graphics.vector.ImageVector
4137
import androidx.compose.ui.layout.ContentScale
4238
import androidx.compose.ui.platform.LocalContext
@@ -46,15 +42,13 @@ import androidx.compose.ui.res.vectorResource
4642
import androidx.compose.ui.semantics.clearAndSetSemantics
4743
import androidx.compose.ui.semantics.contentDescription
4844
import androidx.compose.ui.text.font.FontWeight
49-
import androidx.compose.ui.text.style.TextAlign
5045
import androidx.compose.ui.text.style.TextOverflow
5146
import androidx.compose.ui.unit.dp
5247
import coil.compose.AsyncImage
5348
import coil.request.ImageRequest
5449
import com.woocommerce.android.R
5550
import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
5651
import com.woocommerce.android.ui.woopos.common.composeui.component.ShadowType
57-
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosButton
5852
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosCard
5953
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosLazyColumn
6054
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosShimmerBox
@@ -533,102 +527,6 @@ private fun ItemsLoadingItem() {
533527
}
534528
}
535529

536-
@Composable
537-
fun WooPosItemsEmptyList(
538-
modifier: Modifier = Modifier,
539-
title: String,
540-
message: String,
541-
contentDescription: String,
542-
icon: Painter = painterResource(R.drawable.ic_woo_pos_not_found),
543-
) {
544-
WooPosItemsEmptyListInternal(
545-
modifier = modifier,
546-
title = title,
547-
message = message,
548-
contentDescription = contentDescription,
549-
icon = icon,
550-
actionLabel = null,
551-
onActionClicked = null
552-
)
553-
}
554-
555-
@Composable
556-
fun WooPosItemsEmptyList(
557-
modifier: Modifier = Modifier,
558-
title: String,
559-
message: String,
560-
contentDescription: String,
561-
icon: Painter = painterResource(R.drawable.ic_woo_pos_not_found),
562-
actionLabel: String,
563-
onActionClicked: (() -> Unit),
564-
) {
565-
WooPosItemsEmptyListInternal(
566-
modifier = modifier,
567-
title = title,
568-
message = message,
569-
contentDescription = contentDescription,
570-
icon = icon,
571-
actionLabel = actionLabel,
572-
onActionClicked = onActionClicked
573-
)
574-
}
575-
576-
@Composable
577-
private fun WooPosItemsEmptyListInternal(
578-
modifier: Modifier = Modifier,
579-
title: String,
580-
message: String,
581-
contentDescription: String,
582-
icon: Painter = painterResource(R.drawable.ic_woo_pos_not_found),
583-
actionLabel: String?,
584-
onActionClicked: (() -> Unit)? = null,
585-
) {
586-
Box(
587-
modifier = modifier.verticalScroll(rememberScrollState()),
588-
contentAlignment = Alignment.Center
589-
) {
590-
Column(
591-
horizontalAlignment = Alignment.CenterHorizontally,
592-
verticalArrangement = Arrangement.Center
593-
) {
594-
Image(
595-
modifier = Modifier.size(148.dp),
596-
painter = icon,
597-
contentDescription = contentDescription,
598-
)
599-
600-
Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value.toAdaptivePadding()))
601-
602-
WooPosText(
603-
text = title,
604-
style = WooPosTypography.Heading,
605-
fontWeight = FontWeight.Bold,
606-
)
607-
608-
Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))
609-
610-
WooPosText(
611-
text = message,
612-
style = WooPosTypography.BodyLarge,
613-
fontWeight = FontWeight.Normal,
614-
textAlign = TextAlign.Center
615-
)
616-
617-
Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value.toAdaptivePadding()))
618-
619-
if (onActionClicked != null && actionLabel != null) {
620-
WooPosButton(
621-
text = actionLabel,
622-
onClick = onActionClicked,
623-
modifier = Modifier
624-
.fillMaxWidth(0.5f)
625-
.height(80.dp)
626-
)
627-
}
628-
}
629-
}
630-
}
631-
632530
@Composable
633531
private fun InfiniteListHandler(
634532
listState: LazyListState,
@@ -702,19 +600,6 @@ fun ItemListPreview() {
702600
}
703601
}
704602

705-
@WooPosPreview
706-
@Composable
707-
fun EmptyListPreview() {
708-
WooPosTheme {
709-
WooPosItemsEmptyList(
710-
modifier = Modifier.fillMaxSize(),
711-
title = "Empty List",
712-
message = "This list is empty",
713-
contentDescription = ""
714-
)
715-
}
716-
}
717-
718603
@WooPosPreview
719604
@Composable
720605
fun LoadingListPreview() {

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/coupons/WooPosCouponsScreen.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
1919
import com.woocommerce.android.R
2020
import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
2121
import com.woocommerce.android.ui.woopos.common.composeui.component.Button
22+
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosEmptyScreen
2223
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosErrorScreen
2324
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosPaginationErrorIndicator
2425
import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
2526
import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
2627
import com.woocommerce.android.ui.woopos.home.items.WooPosCouponsViewState
2728
import com.woocommerce.android.ui.woopos.home.items.WooPosItemList
2829
import com.woocommerce.android.ui.woopos.home.items.WooPosItemSelectionViewState
29-
import com.woocommerce.android.ui.woopos.home.items.WooPosItemsEmptyList
3030
import com.woocommerce.android.ui.woopos.home.items.WooPosItemsLoadingIndicator
3131
import com.woocommerce.android.ui.woopos.home.items.WooPosPaginationState
3232
import com.woocommerce.android.ui.woopos.home.items.WooPosPullToRefreshState
@@ -92,7 +92,7 @@ private fun WooPosCouponsScreen(
9292
modifier = Modifier.padding(top = WooPosSpacing.Large.value)
9393
)
9494

95-
is WooPosCouponsViewState.Empty -> WooPosItemsEmptyList(
95+
is WooPosCouponsViewState.Empty -> WooPosEmptyScreen(
9696
modifier = Modifier.fillMaxSize(),
9797
icon = painterResource(id = R.drawable.img_empty_coupon_list),
9898
title = stringResource(id = R.string.woopos_coupons_empty_list_title),

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/coupons/search/WooPosCouponsSearchScreen.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
2222
import com.woocommerce.android.R
2323
import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
2424
import com.woocommerce.android.ui.woopos.common.composeui.component.Button
25+
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosEmptyScreen
2526
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosErrorScreen
2627
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosPaginationErrorIndicator
2728
import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
2829
import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
2930
import com.woocommerce.android.ui.woopos.common.composeui.designsystem.toAdaptivePadding
3031
import com.woocommerce.android.ui.woopos.home.items.WooPosItemList
3132
import com.woocommerce.android.ui.woopos.home.items.WooPosItemSelectionViewState
32-
import com.woocommerce.android.ui.woopos.home.items.WooPosItemsEmptyList
3333
import com.woocommerce.android.ui.woopos.home.items.WooPosItemsLoadingIndicator
3434

3535
@Composable
@@ -96,7 +96,7 @@ private fun WooPosCouponsSearchScreen(
9696
}
9797

9898
WooPosCouponsSearchViewState.Empty::class.java -> {
99-
WooPosItemsEmptyList(
99+
WooPosEmptyScreen(
100100
modifier = Modifier
101101
.fillMaxSize()
102102
.padding(

0 commit comments

Comments
 (0)