Add refunded items UI for POS order details

Add ProductsSection, RefundedProductsSection, and ProductsShimmer
composables to display refunded line items with loading state support.
Update previews to include refunded items sample data.

Author: samiuelson

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersScreen.kt

@@ -823,6 +823,7 @@ private fun sampleOrderDetails(
             )
         )
     ),
+    refundedLineItems = WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemsState.Loaded(emptyList()),
     breakdown = WooPosOrdersState.OrderDetailsViewState.Computed.Details.TotalsBreakdown(
         products = "$23.00",
         discount = "-$5.00",

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/details/WooPosOrderDetails.kt

@@ -91,10 +91,9 @@ fun WooPosOrderDetails(
 
         Spacer(Modifier.height(WooPosSpacing.Large.value))
 
-        val lineItemsState = details.lineItems
-        if (lineItemsState is WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemsState.Loaded) {
-            OrdersProducts(lineItems = lineItemsState.items)
-        }
+        ProductsSection(lineItems = details.lineItems)
+
+        RefundedProductsSection(refundedLineItems = details.refundedLineItems)
 
         Spacer(Modifier.height(WooPosSpacing.Medium.value))
 
@@ -164,11 +163,56 @@ private fun OrdersHeader(details: WooPosOrdersState.OrderDetailsViewState.Comput
 }
 
 @Composable
-private fun OrdersProducts(lineItems: List<WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemRow>) {
+private fun ProductsSection(
+    lineItems: WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemsState
+) {
+    when (lineItems) {
+        is WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemsState.Loading ->
+            ProductsShimmer(
+                title = stringResource(R.string.woopos_orders_details_products_title)
+            )
+        is WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemsState.Loaded ->
+            if (lineItems.items.isNotEmpty()) {
+                OrdersProducts(
+                    title = stringResource(R.string.woopos_orders_details_products_title),
+                    lineItems = lineItems.items
+                )
+            }
+    }
+}
+
+@Composable
+private fun RefundedProductsSection(
+    refundedLineItems: WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemsState
+) {
+    when (refundedLineItems) {
+        is WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemsState.Loading -> {
+            Spacer(Modifier.height(WooPosSpacing.Medium.value))
+            ProductsShimmer(
+                title = stringResource(R.string.woopos_orders_details_refunded_products_title)
+            )
+        }
+        is WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemsState.Loaded -> {
+            if (refundedLineItems.items.isNotEmpty()) {
+                Spacer(Modifier.height(WooPosSpacing.Medium.value))
+                OrdersProducts(
+                    title = stringResource(R.string.woopos_orders_details_refunded_products_title),
+                    lineItems = refundedLineItems.items
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun OrdersProducts(
+    title: String,
+    lineItems: List<WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemRow>
+) {
     WooPosCard(shadowType = ShadowType.Soft) {
         Column(Modifier.padding(WooPosSpacing.Medium.value)) {
             WooPosText(
-                text = stringResource(R.string.woopos_orders_details_products_title),
+                text = title,
                 style = WooPosTypography.BodyXLarge,
                 fontWeight = FontWeight.SemiBold,
             )
@@ -186,6 +230,55 @@ private fun OrdersProducts(lineItems: List<WooPosOrdersState.OrderDetailsViewSta
     }
 }
 
+@Composable
+private fun ProductsShimmer(title: String) {
+    WooPosCard(shadowType = ShadowType.Soft) {
+        Column(Modifier.padding(WooPosSpacing.Medium.value)) {
+            WooPosText(
+                text = title,
+                style = WooPosTypography.BodyXLarge,
+                fontWeight = FontWeight.SemiBold,
+            )
+
+            Spacer(Modifier.height(WooPosSpacing.Medium.value))
+
+            repeat(2) { index ->
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(vertical = WooPosSpacing.Small.value),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    WooPosShimmerBox(
+                        modifier = Modifier
+                            .size(56.dp)
+                            .clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
+                    )
+                    Spacer(Modifier.width(WooPosSpacing.Medium.value))
+                    Column(modifier = Modifier.weight(1f)) {
+                        WooPosShimmerBox(
+                            modifier = Modifier
+                                .fillMaxWidth(0.6f)
+                                .height(16.dp)
+                                .clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
+                        )
+                        Spacer(Modifier.height(WooPosSpacing.XSmall.value))
+                        WooPosShimmerBox(
+                            modifier = Modifier
+                                .fillMaxWidth(0.3f)
+                                .height(14.dp)
+                                .clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
+                        )
+                    }
+                }
+                if (index < 1) {
+                    DividerWithSpacing()
+                }
+            }
+        }
+    }
+}
+
 @Composable
 @Suppress("DestructuringDeclarationWithTooManyEntries")
 private fun OrderProductItem(row: WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemRow) {
@@ -493,7 +586,7 @@ fun WooPosOrderDetailsPreview() {
                 ),
                 WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemRow(
                     id = 103,
-                    name = "A vey tasty coffee that incidentally has a very long name " +
+                    name = "A very tasty coffee that incidentally has a very long name " +
                         "and should go over a few lines without overlapping anything",
                     attributesDescription = "Medium roast, Decaf",
                     qtyAndUnitPrice = "1 x $5.00",
@@ -513,6 +606,18 @@ fun WooPosOrderDetailsPreview() {
                 )
             )
         ),
+        refundedLineItems = WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemsState.Loaded(
+            listOf(
+                WooPosOrdersState.OrderDetailsViewState.Computed.Details.LineItemRow(
+                    id = 101,
+                    name = "Cup",
+                    attributesDescription = null,
+                    qtyAndUnitPrice = "1 x $4.00",
+                    lineTotal = "-$4.00",
+                    imageUrl = null
+                )
+            )
+        ),
         breakdown = WooPosOrdersState.OrderDetailsViewState.Computed.Details.TotalsBreakdown(
             products = "$23.00",
             discount = "-$5.00",

WooCommerce/src/main/res/values/strings.xml

@@ -3887,6 +3887,7 @@
     <string name="woopos_orders_details_placeholder_title">Select an order</string>
     <string name="woopos_orders_details_placeholder_message">Choose an order from the list to view details.</string>
     <string name="woopos_orders_details_products_title">Products</string>
+    <string name="woopos_orders_details_refunded_products_title">Refunded Products</string>
     <string name="woopos_orders_details_totals_title">Totals</string>
     <string name="woopos_orders_details_qty_unit_price_format">%1$d x %2$s</string>
     <string name="woopos_orders_details_breakdown_products_label">Products</string>