[Shipping labels] Remove shipment sheet

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/split/RemoveShipmentBottomSheet.kt

@@ -0,0 +1,234 @@
+package com.woocommerce.android.ui.orders.wooshippinglabels.split
+
+import android.content.Context
+import android.content.res.Resources
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.ButtonDefaults.OutlinedBorderOpacity
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.intl.Locale
+import androidx.compose.ui.text.toLowerCase
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.woocommerce.android.R
+import com.woocommerce.android.ui.compose.component.WCModalBottomSheet
+import com.woocommerce.android.ui.compose.component.WCOutlinedButton
+import com.woocommerce.android.util.StringUtils
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun RemoveShipmentBottomSheet(
+    removeShipmentSheet: RemoveShipmentSheet,
+    onDismissRemoveSheet: () -> Unit,
+    onRemoveShipment: (Int, Int) -> Unit
+) {
+    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+    var selectedShipmentKeyState by rememberSaveable {
+        mutableIntStateOf(removeShipmentSheet.otherShipments.keys.first())
+    }
+
+    val multipleOtherShipments = removeShipmentSheet.otherShipments.size > 1
+    fun getDescription(context: Context) = if (multipleOtherShipments) {
+        StringUtils.getQuantityString(
+            context = context,
+            quantity = removeShipmentSheet.removingShipment.totalItemQuantity,
+            default = R.string.woo_shipping_split_shipment_bottom_sheet_desc_multiple_shipment_plural,
+            one = R.string.woo_shipping_split_shipment_bottom_sheet_desc_multiple_shipment_one,
+        )
+    } else {
+        context.getString(
+            R.string.woo_shipping_split_shipment_bottom_sheet_desc,
+            context.getString(
+                R.string.woo_shipping_split_shipment_shipment_name,
+                (removeShipmentSheet.otherShipments.keys.first() + 1).toString()
+            ).toLowerCase(Locale.current)
+        )
+    }
+
+    fun getRemoveButtonText(resources: Resources) = if (multipleOtherShipments) {
+        resources.getString(
+            R.string.woo_shipping_split_shipment_shipment_remove,
+            resources.getString(
+                R.string.woo_shipping_split_shipment_shipment_name,
+                (removeShipmentSheet.removingShipmentKey + 1).toString()
+            )
+        )
+    } else {
+        resources.getString(R.string.woo_shipping_split_shipment_bottom_sheet_remove_button)
+    }
+
+    WCModalBottomSheet(sheetState = sheetState, onDismissRequest = onDismissRemoveSheet) {
+        Column(
+            modifier = Modifier
+                .padding(start = 16.dp, end = 16.dp, bottom = 19.dp)
+                .verticalScroll(rememberScrollState())
+        ) {
+            Text(
+                text = stringResource(R.string.woo_shipping_split_shipment_bottom_sheet_title),
+                style = MaterialTheme.typography.h6,
+                color = MaterialTheme.colors.onSurface
+            )
+            Text(
+                modifier = Modifier.padding(top = 8.dp, bottom = 16.dp),
+                text = getDescription(LocalContext.current),
+                style = MaterialTheme.typography.subtitle1,
+                color = MaterialTheme.colors.onSurface
+            )
+            if (multipleOtherShipments) {
+                removeShipmentSheet.otherShipments.forEach {
+                    ShipmentCard(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(top = 8.dp)
+                            .clickable { selectedShipmentKeyState = it.key },
+                        shipment = it,
+                        isSelected = it.key == selectedShipmentKeyState,
+                    )
+                }
+                Spacer(modifier = Modifier.height(16.dp))
+            }
+            WCOutlinedButton(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 8.dp),
+                border = BorderStroke(1.dp, MaterialTheme.colors.error),
+                onClick = { onRemoveShipment(removeShipmentSheet.removingShipmentKey, selectedShipmentKeyState) }
+            ) {
+                Text(
+                    text = getRemoveButtonText(LocalContext.current.resources),
+                    color = MaterialTheme.colors.error
+                )
+            }
+            WCOutlinedButton(
+                modifier = Modifier.fillMaxWidth(),
+                text = stringResource(R.string.cancel),
+                colors = ButtonDefaults.outlinedButtonColors(contentColor = MaterialTheme.colors.onSurface),
+                onClick = onDismissRemoveSheet
+            )
+        }
+    }
+}
+
+@Composable
+private fun ShipmentCard(
+    modifier: Modifier,
+    shipment: Map.Entry<Int, SelectableShippableItemsUI>,
+    isSelected: Boolean = false
+) {
+    val borderWidth = if (isSelected) 2.dp else 0.5.dp
+    val borderColor = if (isSelected) {
+        MaterialTheme.colors.primary
+    } else {
+        MaterialTheme.colors.onSurface.copy(alpha = OutlinedBorderOpacity)
+    }
+    val containerColor = if (isSelected) R.color.color_item_selected else R.color.color_surface
+
+    val items = StringUtils.getQuantityString(
+        context = LocalContext.current,
+        quantity = shipment.value.totalItemQuantity,
+        default = R.string.shipping_label_package_details_items_count_many,
+        one = R.string.shipping_label_package_details_items_count_one,
+    )
+
+    Card(
+        modifier = modifier,
+        shape = RoundedCornerShape(8.dp),
+        colors = CardDefaults.cardColors(containerColor = colorResource(containerColor)),
+        border = BorderStroke(borderWidth, borderColor),
+    ) {
+        Row(modifier = Modifier.padding(16.dp), verticalAlignment = Alignment.CenterVertically) {
+            Icon(
+                imageVector = ImageVector.vectorResource(id = R.drawable.ic_arrow_return),
+                contentDescription = null,
+                tint = if (isSelected) borderColor else Color.Unspecified
+            )
+            Spacer(Modifier.padding(horizontal = 16.dp))
+            Column {
+                Text(
+                    text = stringResource(
+                        R.string.woo_shipping_split_shipment_shipment_name,
+                        shipment.key + 1
+                    ),
+                    style = MaterialTheme.typography.subtitle1,
+                    color = MaterialTheme.colors.onSurface
+                )
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.Absolute.SpaceBetween
+                ) {
+                    Text(
+                        text = items,
+                        style = MaterialTheme.typography.subtitle2,
+                        color = MaterialTheme.colors.onSurface
+                    )
+                    Text(
+                        text = stringResource(
+                            R.string.shipping_label_package_details_items_weight_price,
+                            shipment.value.formattedTotalWeight,
+                            shipment.value.formattedTotalPrice
+                        ),
+                        style = MaterialTheme.typography.subtitle2,
+                        color = MaterialTheme.colors.onSurface
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun ShipmentCardPreview() = ShipmentCard(
+    modifier = Modifier.fillMaxWidth(),
+    shipment = mapOf(
+        3 to SelectableShippableItemsUI(
+            shippableItems = emptyList(),
+            "550g",
+            "$50.00"
+        )
+    ).entries.first()
+)
+
+@Preview
+@Composable
+private fun ShipmentCardSelectedPreview() = ShipmentCard(
+    modifier = Modifier.fillMaxWidth(),
+    shipment = mapOf(
+        2 to SelectableShippableItemsUI(
+            shippableItems = emptyList(),
+            "825g",
+            "$75.00"
+        )
+    ).entries.first(),
+    isSelected = true
+)

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/split/WooShippingSplitShipmentScreen.kt

@@ -78,8 +78,10 @@ fun WooShippingSplitShipmentScreen(
             onDismissInstructions = viewModel::onDismissInstructions,
             onUpdateSelection = viewModel::onUpdateSelection,
             onUpdateShipment = viewModel::onUpdateShipment,
-            onUpdateSelectedShipment = viewModel::onUpdateSelectedShipment,
             onRemoveShipment = viewModel::onRemoveShipment,
+            onUpdateSelectedShipment = viewModel::onUpdateSelectedShipment,
+            onRemoveShipmentMenuTapped = viewModel::onRemoveShipmentMenuTapped,
+            onDismissRemoveSheet = viewModel::onDismissRemoveSheet,
             modifier = modifier
         )
     }
@@ -90,10 +92,12 @@ fun WooShippingSplitShipmentScreen(
     viewState: SplitShipmentViewState,
     onBack: () -> Unit,
     onDismissInstructions: () -> Unit,
-    onUpdateSelection: (shipmentKey: Int, index: Int, selectedIndexes: Set<Int>?) -> Unit,
+    onUpdateSelection: (index: Int, selectedIndexes: Set<Int>?) -> Unit,
     onUpdateShipment: (splitMovement: SplitMovement) -> Unit,
+    onRemoveShipment: (removingShipmentKey: Int, movingToShipmentKey: Int) -> Unit,
     onUpdateSelectedShipment: (shipmentKey: Int) -> Unit,
-    onRemoveShipment: (shipmentKey: Int) -> Unit,
+    onRemoveShipmentMenuTapped: (shipmentKey: Int) -> Unit,
+    onDismissRemoveSheet: () -> Unit,
     modifier: Modifier = Modifier
 ) {
     val snackbarHostState = remember { SnackbarHostState() }
@@ -143,7 +147,7 @@ fun WooShippingSplitShipmentScreen(
                         productsExtraPadding,
                         onUpdateSelectedShipment,
                         onUpdateSelection,
-                        onRemoveShipment,
+                        onRemoveShipmentMenuTapped,
                         modifier
                     )
 
@@ -171,7 +175,6 @@ fun WooShippingSplitShipmentScreen(
                     )
                 } else {
                     SelectableProductsSection(
-                        shipmentKey = viewState.selectableItems.keys.first(),
                         shipment = viewState.selectableItems.values.first(),
                         onUpdateSelection = onUpdateSelection,
                         extraBottomPadding = productsExtraPadding,
@@ -190,6 +193,10 @@ fun WooShippingSplitShipmentScreen(
                 }
             }
         }
+
+        viewState.removeShipmentSheet?.let { removeShipmentSheet ->
+            RemoveShipmentBottomSheet(removeShipmentSheet, onDismissRemoveSheet, onRemoveShipment)
+        }
     }
 
     val context = LocalContext.current
@@ -220,8 +227,8 @@ private fun MultipleShipments(
     shipments: List<Int>,
     productsExtraPadding: Dp,
     onUpdateSelectedShipment: (shipmentKey: Int) -> Unit,
-    onUpdateSelection: (shipmentKey: Int, index: Int, selectedIndexes: Set<Int>?) -> Unit,
-    onRemoveShipment: (shipmentKey: Int) -> Unit,
+    onUpdateSelection: (index: Int, selectedIndexes: Set<Int>?) -> Unit,
+    onRemoveShipmentMenuTapped: (shipmentKey: Int) -> Unit,
     modifier: Modifier
 ) {
     val pagerState = rememberPagerState { shipments.size }
@@ -289,7 +296,7 @@ private fun MultipleShipments(
                         ).toLowerCase(Locale.current)
                     )
                 },
-                onSelected = onRemoveShipment,
+                onSelected = onRemoveShipmentMenuTapped,
                 modifier = modifier.align(Alignment.CenterVertically)
             )
         }
@@ -302,7 +309,6 @@ private fun MultipleShipments(
         ) { page ->
             viewState.selectableItems.getValue(shipments[page]).let {
                 SelectableProductsSection(
-                    shipmentKey = shipments[page],
                     shipment = it,
                     onUpdateSelection = onUpdateSelection,
                     modifier = modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp),
@@ -465,9 +471,8 @@ private fun SplitMovements(
 
 @Composable
 fun SelectableProductsSection(
-    shipmentKey: Int,
     shipment: SelectableShippableItemsUI,
-    onUpdateSelection: (shipmentKey: Int, index: Int, selectedIndexes: Set<Int>?) -> Unit,
+    onUpdateSelection: (index: Int, selectedIndexes: Set<Int>?) -> Unit,
     extraBottomPadding: Dp,
     modifier: Modifier = Modifier
 ) {
@@ -493,13 +498,7 @@ fun SelectableProductsSection(
                             quantity = shippableItem.shippableItem.quantity,
                             imageUrl = shippableItem.shippableItem.imageUrl,
                             isSelected = shippableItem.isSelected,
-                            onSelectionChange = {
-                                onUpdateSelection(
-                                    shipmentKey,
-                                    index,
-                                    null
-                                )
-                            },
+                            onSelectionChange = { onUpdateSelection(index, null) },
                             modifier = Modifier.padding(vertical = 8.dp)
                         )
                     }
@@ -514,13 +513,7 @@ fun SelectableProductsSection(
                             quantity = shippableItem.shippableItem.quantity,
                             imageUrl = shippableItem.shippableItem.imageUrl,
                             isSelected = shippableItem.isSelected,
-                            onSelectionChange = {
-                                onUpdateSelection(
-                                    shipmentKey,
-                                    index,
-                                    null
-                                )
-                            },
+                            onSelectionChange = { onUpdateSelection(index, null) },
                             isExpanded = expanded,
                             onExpand = { expanded = !expanded },
                             singleWeight = shippableItem.innerShippableItem.formattedWeight,
@@ -530,11 +523,7 @@ fun SelectableProductsSection(
                                 val indexes = shippableItem.selectedIndexes.toMutableSet()
                                 if (isSelected) indexes.remove(innerIndex) else indexes.add(innerIndex)
 
-                                onUpdateSelection(
-                                    shipmentKey,
-                                    index,
-                                    indexes
-                                )
+                                onUpdateSelection(index, indexes)
                             },
                             modifier = Modifier.padding(vertical = 8.dp)
                         )
@@ -571,9 +560,11 @@ private fun WooShippingSplitShipmentScreenPreview() = WooThemeWithBackground {
         ),
         onBack = {},
         onDismissInstructions = {},
-        onUpdateSelection = { _, _, _ -> },
+        onUpdateSelection = { _, _ -> },
         onUpdateShipment = {},
+        onRemoveShipment = { _, _ -> },
         onUpdateSelectedShipment = {},
-        onRemoveShipment = {}
+        onRemoveShipmentMenuTapped = { _ -> },
+        onDismissRemoveSheet = {}
     )
 }