diff --git a/WooCommerce/src/androidTest/kotlin/com/woocommerce/android/WooPosErrorStateTest.kt b/WooCommerce/src/androidTest/kotlin/com/woocommerce/android/WooPosErrorScreenTest.kt similarity index 88% rename from WooCommerce/src/androidTest/kotlin/com/woocommerce/android/WooPosErrorStateTest.kt rename to WooCommerce/src/androidTest/kotlin/com/woocommerce/android/WooPosErrorScreenTest.kt index e62943114d7..bc9804292fd 100644 --- a/WooCommerce/src/androidTest/kotlin/com/woocommerce/android/WooPosErrorStateTest.kt +++ b/WooCommerce/src/androidTest/kotlin/com/woocommerce/android/WooPosErrorScreenTest.kt @@ -1,7 +1,5 @@ package com.woocommerce.android -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Error import androidx.compose.ui.test.assertIsDisplayed import androidx.compose.ui.test.junit4.createComposeRule import androidx.compose.ui.test.onNodeWithText @@ -9,7 +7,7 @@ import androidx.compose.ui.test.performClick import androidx.test.ext.junit.runners.AndroidJUnit4 import com.woocommerce.android.ui.woopos.common.composeui.WooPosTheme import com.woocommerce.android.ui.woopos.common.composeui.component.Button -import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosErrorState +import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosErrorScreen import dagger.hilt.android.testing.HiltAndroidRule import dagger.hilt.android.testing.HiltAndroidTest import org.junit.Before @@ -19,7 +17,7 @@ import org.junit.runner.RunWith @HiltAndroidTest @RunWith(AndroidJUnit4::class) -class WooPosErrorStateTest { +class WooPosErrorScreenTest { @get:Rule(order = 0) val hiltRule = HiltAndroidRule(this) @@ -39,8 +37,7 @@ class WooPosErrorStateTest { composeTestRule.setContent { WooPosTheme { - WooPosErrorState( - icon = Icons.Default.Error, + WooPosErrorScreen( message = testMessage, reason = testReason ) @@ -63,8 +60,7 @@ class WooPosErrorStateTest { composeTestRule.setContent { WooPosTheme { - WooPosErrorState( - icon = Icons.Default.Error, + WooPosErrorScreen( message = "Test Message", reason = "Test Reason", primaryButton = primaryButton, diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosErrorState.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosErrorScreen.kt similarity index 58% rename from WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosErrorState.kt rename to WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosErrorScreen.kt index 252b6ea6de3..ca7e31028eb 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosErrorState.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosErrorScreen.kt @@ -1,8 +1,6 @@ package com.woocommerce.android.ui.woopos.common.composeui.component -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize @@ -10,19 +8,17 @@ 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.widthIn import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.Divider import androidx.compose.material.Icon import androidx.compose.material.MaterialTheme import androidx.compose.material.Text -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Error 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.vector.ImageVector +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.painter.Painter +import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp @@ -32,34 +28,32 @@ import com.woocommerce.android.ui.woopos.common.composeui.WooPosTheme import com.woocommerce.android.ui.woopos.common.composeui.toAdaptivePadding @Composable -fun WooPosErrorState( +fun WooPosErrorScreen( modifier: Modifier = Modifier, - icon: ImageVector = Icons.Default.Error, + icon: Painter = painterResource(id = R.drawable.woo_pos_ic_error), message: String, reason: String, primaryButton: Button? = null, - secondaryButton: Button? = null + secondaryButton: Button? = null, + adaptToScreenHeight: Boolean = false, ) { - Box( - modifier = modifier + Column( + modifier = modifier.fillMaxSize() .clip(RoundedCornerShape(16.dp)) - .background(MaterialTheme.colors.surface) - .padding(32.dp) + .padding(32.dp.toAdaptivePadding()), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, ) { Column( - modifier = modifier - .fillMaxSize() - .padding(16.dp), + modifier = Modifier.let { if (adaptToScreenHeight) it.weight(1f) else it }, horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center + verticalArrangement = Arrangement.Center, ) { - Spacer(modifier = Modifier.height(16.dp.toAdaptivePadding())) - Icon( modifier = Modifier.size(64.dp), - imageVector = icon, + painter = icon, contentDescription = stringResource(id = R.string.woopos_error_icon_content_description), - tint = WooPosTheme.colors.error, + tint = Color.Unspecified, ) Spacer(modifier = Modifier.height(40.dp.toAdaptivePadding())) @@ -70,49 +64,40 @@ fun WooPosErrorState( fontWeight = FontWeight.SemiBold ) - Divider( - color = MaterialTheme.colors.onSurface.copy(alpha = 0.5f), - thickness = 0.5.dp, - modifier = Modifier - .padding(vertical = 8.dp.toAdaptivePadding()) - .widthIn(min = 150.dp.toAdaptivePadding()) - ) + Spacer(modifier = Modifier.height(16.dp.toAdaptivePadding())) Text( text = reason, style = MaterialTheme.typography.h5 ) - Spacer(modifier = Modifier.height(40.dp.toAdaptivePadding())) } Column( horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier .fillMaxWidth() - .padding(horizontal = 16.dp, vertical = 32.dp) - .align(Alignment.BottomCenter) + .padding(top = 16.dp, end = 16.dp, start = 16.dp) ) { primaryButton?.let { WooPosButton( text = it.text, onClick = it.click, modifier = Modifier - .fillMaxWidth(0.7f) - .height(56.dp) + .fillMaxWidth() + .height(80.dp) ) - Spacer(modifier = Modifier.height(16.dp.toAdaptivePadding())) } - secondaryButton?.let { + Spacer(modifier = Modifier.height(16.dp.toAdaptivePadding())) WooPosButton( text = it.text, onClick = it.click, modifier = Modifier - .fillMaxWidth(0.7f) - .height(56.dp) + .fillMaxWidth() + .height(80.dp) ) - Spacer(modifier = Modifier.height(8.dp.toAdaptivePadding())) } + Spacer(modifier = Modifier.height(16.dp.toAdaptivePadding())) } } } @@ -126,8 +111,7 @@ data class Button( @WooPosPreview fun WooPosErrorStatePreview() { WooPosTheme { - WooPosErrorState( - icon = Icons.Default.Error, + WooPosErrorScreen( message = stringResource(R.string.woopos_totals_main_error_label), reason = "Reason", primaryButton = Button( @@ -141,3 +125,54 @@ fun WooPosErrorStatePreview() { ) } } + +@Composable +@WooPosPreview +fun WooPosErrorStateSingleButtonPreview() { + WooPosTheme { + WooPosErrorScreen( + message = stringResource(R.string.woopos_totals_main_error_label), + reason = "Reason", + primaryButton = Button( + text = stringResource(R.string.retry), + click = { } + ), + ) + } +} + +@Composable +@WooPosPreview +fun WooPosErrorStateSingleButtonAdaptToScreenHeightPreview() { + WooPosTheme { + WooPosErrorScreen( + message = stringResource(R.string.woopos_totals_main_error_label), + reason = "Reason", + primaryButton = Button( + text = stringResource(R.string.retry), + click = { } + ), + adaptToScreenHeight = true, + ) + } +} + +@Composable +@WooPosPreview +fun WooPosErrorStateAdaptToScreenHeightPreview() { + WooPosTheme { + WooPosErrorScreen( + message = stringResource(R.string.woopos_totals_main_error_label), + reason = "Reason", + primaryButton = Button( + text = stringResource(R.string.retry), + click = { } + ), + secondaryButton = Button( + text = stringResource(R.string.cancel), + click = { } + ), + adaptToScreenHeight = true, + ) + } +} diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/products/WooPosProductsScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/products/WooPosProductsScreen.kt index 51d13527ef9..ca34bf7208a 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/products/WooPosProductsScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/products/WooPosProductsScreen.kt @@ -64,7 +64,7 @@ import com.woocommerce.android.R import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview import com.woocommerce.android.ui.woopos.common.composeui.WooPosTheme import com.woocommerce.android.ui.woopos.common.composeui.component.Button -import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosErrorState +import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosErrorScreen import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosLazyColumn import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosShimmerBox import com.woocommerce.android.ui.woopos.common.composeui.toAdaptivePadding @@ -441,7 +441,7 @@ fun ProductsError(onRetryClicked: () -> Unit) { modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center, ) { - WooPosErrorState( + WooPosErrorScreen( modifier = Modifier.width(640.dp), message = stringResource(id = R.string.woopos_products_loading_error_title), reason = stringResource(id = R.string.woopos_products_loading_error_message), diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/WooPosTotalsScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/WooPosTotalsScreen.kt index 659052b67f0..6028c23a079 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/WooPosTotalsScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/WooPosTotalsScreen.kt @@ -22,8 +22,6 @@ import androidx.compose.foundation.verticalScroll import androidx.compose.material.Divider import androidx.compose.material.MaterialTheme import androidx.compose.material.Text -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Error import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.ui.Alignment @@ -39,7 +37,7 @@ import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview import com.woocommerce.android.ui.woopos.common.composeui.WooPosTheme import com.woocommerce.android.ui.woopos.common.composeui.component.Button import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosButtonLarge -import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosErrorState +import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosErrorScreen import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosShimmerBox import com.woocommerce.android.ui.woopos.common.composeui.toAdaptivePadding import com.woocommerce.android.ui.woopos.home.totals.payment.success.WooPosPaymentSuccessScreen @@ -251,14 +249,14 @@ private fun TotalsErrorScreen( errorMessage: String, onUIEvent: (WooPosTotalsUIEvent) -> Unit ) { - WooPosErrorState( - icon = Icons.Default.Error, + WooPosErrorScreen( message = stringResource(R.string.woopos_totals_main_error_label), reason = errorMessage, primaryButton = Button( text = stringResource(R.string.retry), click = { onUIEvent(WooPosTotalsUIEvent.RetryOrderCreationClicked) } - ) + ), + adaptToScreenHeight = true, ) } diff --git a/WooCommerce/src/main/res/drawable/woo_pos_ic_error.xml b/WooCommerce/src/main/res/drawable/woo_pos_ic_error.xml new file mode 100644 index 00000000000..d3eeab0989b --- /dev/null +++ b/WooCommerce/src/main/res/drawable/woo_pos_ic_error.xml @@ -0,0 +1,12 @@ + + + +