Merge pull request #12271 from woocommerce/12223-error-screens-ui-update

[Woo POS] Error screens UI updates
woocommerce · Aug 19, 2024 · 8384322 · 8384322
2 parents 3107fb1 + 5052dc6
commit 8384322
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 57 deletions.
diff --git a/...ocommerce/android/WooPosErrorStateTest.kt → ...commerce/android/WooPosErrorScreenTest.kt b/...ocommerce/android/WooPosErrorStateTest.kt → ...commerce/android/WooPosErrorScreenTest.kt
@@ -1,15 +1,13 @@
 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
 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/...n/composeui/component/WooPosErrorState.kt → .../composeui/component/WooPosErrorScreen.kt b/...n/composeui/component/WooPosErrorState.kt → .../composeui/component/WooPosErrorScreen.kt
@@ -1,28 +1,24 @@
 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
 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/...e/src/main/kotlin/com/woocommerce/android/ui/woopos/home/products/WooPosProductsScreen.kt b/...e/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/...merce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/WooPosTotalsScreen.kt b/...merce/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
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="64dp"
+    android:height="64dp"
+    android:viewportWidth="64"
+    android:viewportHeight="64">
+  <path
+      android:pathData="M32,0L32,0A32,32 0,0 1,64 32L64,32A32,32 0,0 1,32 64L32,64A32,32 0,0 1,0 32L0,32A32,32 0,0 1,32 0z"
+      android:fillColor="#F16618"/>
+  <path
+      android:pathData="M31.5,38.722C29.599,38.722 28.624,37.768 28.574,35.86L28.093,16.689C28.068,15.771 28.364,15.01 28.982,14.406C29.624,13.802 30.451,13.5 31.463,13.5C32.451,13.5 33.265,13.814 33.907,14.442C34.574,15.046 34.895,15.807 34.87,16.725L34.315,35.86C34.29,37.768 33.352,38.722 31.5,38.722ZM31.5,50.5C30.414,50.5 29.475,50.138 28.685,49.413C27.895,48.664 27.5,47.77 27.5,46.731C27.5,45.692 27.895,44.811 28.685,44.086C29.475,43.337 30.414,42.962 31.5,42.962C32.586,42.962 33.525,43.325 34.315,44.049C35.105,44.774 35.5,45.668 35.5,46.731C35.5,47.794 35.093,48.688 34.278,49.413C33.488,50.138 32.562,50.5 31.5,50.5Z"
+      android:fillColor="#ffffff"/>
+</vector>