Merge pull request #13615 from woocommerce/13614-woo-posdesign-system…

…-implement-design-review-comments

[Woo POS][Design system] Implement design review comments

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/cashpayment/WooPosCashPaymentScreen.kt

@@ -3,6 +3,7 @@ package com.woocommerce.android.ui.woopos.cashpayment
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -93,17 +94,22 @@ private fun Collecting(
     onAmountChanged: (BigDecimal?) -> Unit,
     onCompleteOrderClicked: () -> Unit,
 ) {
+    val focusRequester = remember { FocusRequester() }
+    val keyboardController = LocalSoftwareKeyboardController.current
+
+    LaunchedEffect(Unit) {
+        focusRequester.requestFocus()
+        keyboardController?.show()
+    }
+
     ConstraintLayout(
-        modifier = Modifier.fillMaxSize()
+        modifier = Modifier
+            .fillMaxSize()
+            .imePadding()
     ) {
         val (input, total, error, changeDue, button) = createRefs()
-        val focusRequester = remember { FocusRequester() }
-        val keyboardController = LocalSoftwareKeyboardController.current
-
-        LaunchedEffect(Unit) {
-            focusRequester.requestFocus()
-            keyboardController?.show()
-        }
+        val standardMargin = WooPosSpacing.Medium.value.toAdaptivePadding()
+        val smallMargin = WooPosSpacing.Small.value.toAdaptivePadding()
 
         WooPosText(
             text = state.totalText,
@@ -118,7 +124,6 @@ private fun Collecting(
         var inputText by remember { mutableStateOf(state.enteredAmount) }
 
         val marginBetweenTotalAndInput = 48.dp.toAdaptivePadding()
-        val standardMargin = WooPosSpacing.Medium.value.toAdaptivePadding()
         WooPosMoneyInputField(
             modifier = Modifier
                 .focusRequester(focusRequester)
@@ -143,7 +148,6 @@ private fun Collecting(
             numberOfDecimals = state.numberOfDecimals,
         )
 
-        val smallMargin = WooPosSpacing.Small.value.toAdaptivePadding()
         WooPosText(
             text = state.changeDueText,
             style = WooPosTypography.BodySmall,
@@ -180,7 +184,7 @@ private fun Collecting(
             },
             modifier = Modifier
                 .constrainAs(button) {
-                    top.linkTo(input.bottom, margin = 96.dp)
+                    bottom.linkTo(parent.bottom, margin = WooPosSpacing.Medium.value)
                     end.linkTo(parent.end, margin = standardMargin)
                     start.linkTo(parent.start, margin = standardMargin)
                     width = Dimension.fillToConstraints

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

@@ -27,7 +27,7 @@ fun WooPosBackgroundOverlay(
         Box(
             modifier = modifier
                 .fillMaxSize()
-                .background(color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.2f))
+                .background(color = MaterialTheme.colorScheme.surfaceDim.copy(alpha = 0.8f))
                 .clickable(
                     indication = null,
                     interactionSource = remember { MutableInteractionSource() }

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

@@ -18,7 +18,7 @@ import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosThe
 @Composable
 fun WooPosShimmerBox(
     modifier: Modifier = Modifier,
-    color: Color = WooPosTheme.colors.onSurfaceVariantLowest.copy(alpha = 0.2f),
+    color: Color = WooPosTheme.colors.onSurfaceVariantLowest.copy(alpha = 0.35f),
 ) {
     val shimmerColors = listOf(
         color.copy(),

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/emailreceipt/WooPosEmailReceiptScreen.kt

@@ -2,7 +2,7 @@ package com.woocommerce.android.ui.woopos.emailreceipt
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -80,20 +80,23 @@ private fun EmailState(
     onEmailAddressChanged: (String) -> Unit,
     onSendReceiptClicked: () -> Unit,
 ) {
-    ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
-        val (email, error, button) = createRefs()
-
-        val focusRequester = remember { FocusRequester() }
-        val keyboardController = LocalSoftwareKeyboardController.current
+    val focusRequester = remember { FocusRequester() }
+    val keyboardController = LocalSoftwareKeyboardController.current
 
-        LaunchedEffect(Unit) {
-            focusRequester.requestFocus()
-            keyboardController?.show()
-        }
+    LaunchedEffect(Unit) {
+        focusRequester.requestFocus()
+        keyboardController?.show()
+    }
 
+    ConstraintLayout(
+        modifier = Modifier
+            .fillMaxSize()
+            .imePadding()
+    ) {
+        val (email, error, button) = createRefs()
         val standardMargin = WooPosSpacing.Medium.value.toAdaptivePadding()
         val topMargin = 72.dp.toAdaptivePadding()
-        val textFieldButtonMargin = 92.dp.toAdaptivePadding()
+
         WooPosInputField(
             value = state.email,
             onValueChange = onEmailAddressChanged,
@@ -105,11 +108,13 @@ private fun EmailState(
                 autoCorrectEnabled = false,
                 keyboardType = KeyboardType.Email
             ),
-            modifier = Modifier.constrainAs(email) {
-                top.linkTo(parent.top, margin = topMargin)
-                start.linkTo(parent.start)
-                end.linkTo(parent.end)
-            }.focusRequester(focusRequester),
+            modifier = Modifier
+                .constrainAs(email) {
+                    top.linkTo(parent.top, margin = topMargin)
+                    start.linkTo(parent.start)
+                    end.linkTo(parent.end)
+                }
+                .focusRequester(focusRequester),
         )
 
         if (state.errorMessage != null) {
@@ -135,7 +140,7 @@ private fun EmailState(
                 WooPosEmailReceiptState.Email.Button.Status.LOADING -> WooPosButtonState.LOADING
             },
             modifier = Modifier.constrainAs(button) {
-                top.linkTo(email.bottom, margin = textFieldButtonMargin)
+                bottom.linkTo(parent.bottom, margin = WooPosSpacing.Medium.value)
                 start.linkTo(parent.start, margin = standardMargin)
                 end.linkTo(parent.end, margin = standardMargin)
                 width = Dimension.fillToConstraints

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt

@@ -36,6 +36,7 @@ import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.BlendMode
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
@@ -179,7 +180,11 @@ fun CartBodyEmpty(modifier: Modifier = Modifier) {
         Image(
             imageVector = ImageVector.vectorResource(R.drawable.ic_woo_pos_empty_cart),
             contentDescription = stringResource(R.string.woopos_cart_empty_content_description),
-            modifier = Modifier.size(88.dp)
+            modifier = Modifier.size(88.dp),
+            colorFilter = ColorFilter.tint(
+                color = MaterialTheme.colorScheme.surface.copy(alpha = 0.4F),
+                blendMode = BlendMode.SrcAtop,
+            )
         )
         Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value.toAdaptivePadding()))
         WooPosText(

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

@@ -89,7 +89,7 @@ fun WooPosBanner(
                         contentDescription = stringResource(
                             id = R.string.woopos_banner_simple_products_info_content_description
                         ),
-                        tint = MaterialTheme.colorScheme.primary,
+                        tint = MaterialTheme.colorScheme.onSurface,
                         modifier = Modifier.align(Alignment.Center)
                     )
                 }

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

@@ -327,15 +327,37 @@ fun ItemsLoadingItem() {
                 .fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically
         ) {
-            Spacer(modifier = Modifier.weight(0.17f))
-            WooPosShimmerBox(
+            Box(
                 modifier = Modifier
-                    .weight(0.66f)
-                    .height(30.dp)
-                    .clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
+                    .size(112.dp)
+                    .background(WooPosTheme.colors.onSurfaceVariantLowest.copy(alpha = 0.35f))
             )
 
-            Spacer(modifier = Modifier.weight(0.17f))
+            Spacer(modifier = Modifier.width(WooPosSpacing.Medium.value))
+
+            Column(
+                modifier = Modifier.fillMaxWidth()
+                    .weight(1f),
+                verticalArrangement = Arrangement.Center,
+            ) {
+                WooPosShimmerBox(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(32.dp)
+                        .clip(RoundedCornerShape(WooPosCornerRadius.Medium.value))
+                )
+
+                Spacer(modifier = Modifier.size(WooPosSpacing.XSmall.value))
+
+                WooPosShimmerBox(
+                    modifier = Modifier
+                        .height(32.dp)
+                        .width(57.dp)
+                        .clip(RoundedCornerShape(WooPosCornerRadius.Medium.value))
+                )
+            }
+
+            Spacer(modifier = Modifier.weight(0.5f))
         }
     }
 }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/WooPosTotalsScreen.kt

@@ -154,27 +154,36 @@ private fun TotalsLoaded(
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center,
     ) {
-        if (!state.isFreeOrder) {
-            Column(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .weight(1.1f),
-                horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.Center,
-            ) {
-                when (val readerStatus = state.readerStatus) {
-                    is WooPosTotalsViewState.ReaderStatus.Disconnected -> {
-                        ReaderDisconnected(modifier = Modifier, status = readerStatus, onUIEvent = onUIEvent)
-                    }
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(1.1f),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+        ) {
+            when (val readerStatus = state.readerStatus) {
+                is WooPosTotalsViewState.ReaderStatus.Disconnected -> {
+                    ReaderDisconnected(modifier = Modifier, status = readerStatus, onUIEvent = onUIEvent)
+                }
 
-                    is WooPosTotalsViewState.ReaderStatus.Preparing,
-                    is WooPosTotalsViewState.ReaderStatus.CheckingOrder -> {
-                        PreparingReader(readerStatus)
-                    }
+                is WooPosTotalsViewState.ReaderStatus.Preparing -> {
+                    PreparingReader(
+                        title = readerStatus.title,
+                        subtitle = readerStatus.subtitle
+                    )
+                }
+                is WooPosTotalsViewState.ReaderStatus.CheckingOrder -> {
+                    PreparingReader(
+                        title = readerStatus.title,
+                        subtitle = readerStatus.subtitle
+                    )
+                }
 
-                    is WooPosTotalsViewState.ReaderStatus.ReadyForPayment -> {
-                        ReaderReadyForPayment(readerStatus)
-                    }
+                is WooPosTotalsViewState.ReaderStatus.ReadyForPayment -> {
+                    ReaderReadyForPayment(readerStatus)
+                }
+
+                is WooPosTotalsViewState.ReaderStatus.Unavailable -> {
                 }
             }
         }
@@ -216,23 +225,23 @@ private fun TotalsLoaded(
 }
 
 @Composable
-private fun PreparingReader(readerStatus: WooPosTotalsViewState.ReaderStatus) {
+private fun PreparingReader(title: String, subtitle: String) {
     WooPosCircularLoadingIndicator(modifier = Modifier.size(160.dp))
     Spacer(modifier = Modifier.height(WooPosSpacing.Large.value.toAdaptivePadding()))
     WooPosText(
-        text = readerStatus.title,
+        text = title,
         style = WooPosTypography.BodyLarge,
     )
     Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))
     WooPosText(
-        text = readerStatus.subtitle,
+        text = subtitle,
         style = WooPosTypography.Heading,
         fontWeight = FontWeight.Bold
     )
 }
 
 @Composable
-private fun ReaderReadyForPayment(readerStatus: WooPosTotalsViewState.ReaderStatus) {
+private fun ReaderReadyForPayment(readerStatus: WooPosTotalsViewState.ReaderStatus.ReadyForPayment) {
     val tapCardAnimation by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.woopos_card_ilustration))
     LottieAnimation(
         modifier = Modifier.size(256.dp),
@@ -431,7 +440,6 @@ fun WooPosTotalsScreenPreview(modifier: Modifier = Modifier) {
                     title = "Ready for payment",
                     subtitle = "Tap, swipe or insert card"
                 ),
-                isFreeOrder = false
             ),
             onUIEvent = {},
         )
@@ -455,7 +463,6 @@ fun WooPosTotalsScreenPreviewReaderNotConnected(modifier: Modifier = Modifier) {
                     subtitle = "To process this payment, please connect your reader.",
                     actionButtonLabel = "Connect to a reader",
                 ),
-                isFreeOrder = false
             ),
             onUIEvent = {},
         )
@@ -479,7 +486,6 @@ fun WooPosTotalsScreenPreviewWithCashPaymentAvailable() {
                     subtitle = "To process this payment, please connect your reader.",
                     actionButtonLabel = "Connect to a reader",
                 ),
-                isFreeOrder = false
             ),
             onUIEvent = {},
         )
@@ -498,12 +504,7 @@ fun WooPosTotalsScreenPreviewForFreeOrders() {
                     orderTotalText = "$462.00",
                     orderTaxText = "$42.00",
                 ),
-                readerStatus = WooPosTotalsViewState.ReaderStatus.Disconnected(
-                    title = "Reader not connected",
-                    subtitle = "To process this payment, please connect your reader.",
-                    actionButtonLabel = "Connect to a reader",
-                ),
-                isFreeOrder = true
+                readerStatus = WooPosTotalsViewState.ReaderStatus.Unavailable,
             ),
             onUIEvent = {},
         )
@@ -548,18 +549,17 @@ fun WooPosTotalsErrorScreenPreview() {
 @Composable
 @WooPosPreview
 fun PreparingReaderPReview() {
-    val readerStatus = WooPosTotalsViewState.ReaderStatus.Preparing(
-        title = "Getting ready",
-        subtitle = "Preparing reader for payment"
-    )
     WooPosTheme {
         Column(
             modifier = Modifier
                 .fillMaxWidth(),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center,
         ) {
-            PreparingReader(readerStatus)
+            PreparingReader(
+                title = "Getting ready",
+                subtitle = "Preparing reader for payment",
+            )
         }
     }
 }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/WooPosTotalsViewModel.kt

@@ -459,9 +459,13 @@ class WooPosTotalsViewModel @Inject constructor(
         val subtotalAmount = order.productsTotal
         val taxAmount = order.totalTax
         val totalAmount = order.total
-        val readerStatus = when (cardReaderFacade.readerStatus.value) {
-            is Connected -> buildPreparingReaderStatusState()
-            else -> buildTotalsReaderNotConnectedError()
+        val readerStatus = if (totalAmount.compareTo(BigDecimal.ZERO) == 0) {
+            WooPosTotalsViewState.ReaderStatus.Unavailable
+        } else {
+            when (cardReaderFacade.readerStatus.value) {
+                is Connected -> buildPreparingReaderStatusState()
+                else -> buildTotalsReaderNotConnectedError()
+            }
         }
         return WooPosTotalsViewState.Checkout(
             totals = Totals.Visible(
@@ -470,7 +474,6 @@ class WooPosTotalsViewModel @Inject constructor(
                 orderTotalText = priceFormat(totalAmount),
             ),
             readerStatus = readerStatus,
-            isFreeOrder = totalAmount.compareTo(BigDecimal.ZERO) == 0
         )
     }