Merge pull request #13111 from woocommerce/issue/handle-selected-package

[Shipping Labels Revamp] Handle Package selection on the main form

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

@@ -1,7 +1,7 @@
 package com.woocommerce.android.ui.orders.wooshippinglabels
 
 import com.woocommerce.android.R
-import com.woocommerce.android.ui.orders.wooshippinglabels.packages.datasource.PackageDAO
+import com.woocommerce.android.ui.orders.wooshippinglabels.packages.ui.PackageData
 import kotlinx.coroutines.delay
 import javax.inject.Inject
 import kotlin.random.Random
@@ -16,7 +16,7 @@ class GetShippingRates @Inject constructor() {
     }
 
     suspend operator fun invoke(
-        selectedPackage: PackageDAO,
+        selectedPackage: PackageData,
         sortOrder: ShippingSortOption
     ): Result<Map<Carrier, List<ShippingRateUI>>> {
         delay(1_000)

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

@@ -9,11 +9,14 @@ import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.fragment.app.viewModels
 import androidx.navigation.fragment.findNavController
+import com.woocommerce.android.extensions.handleResult
 import com.woocommerce.android.extensions.navigateSafely
 import com.woocommerce.android.ui.base.BaseFragment
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
 import com.woocommerce.android.ui.main.AppBarStatus
 import com.woocommerce.android.ui.orders.wooshippinglabels.WooShippingLabelCreationViewModel.StartPackageSelection
+import com.woocommerce.android.ui.orders.wooshippinglabels.packages.WooShippingLabelPackageCreationFragment.Companion.PACKAGE_SELECTION_RESULT
+import com.woocommerce.android.ui.orders.wooshippinglabels.packages.ui.PackageData
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
@@ -36,6 +39,7 @@ class WooShippingLabelCreationFragment : BaseFragment() {
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
         setupObservers()
+        setupResultHandlers()
     }
 
     override val activityAppBarStatus: AppBarStatus = AppBarStatus.Hidden
@@ -59,4 +63,10 @@ class WooShippingLabelCreationFragment : BaseFragment() {
             }
         }
     }
+
+    private fun setupResultHandlers() {
+        handleResult<PackageData>(PACKAGE_SELECTION_RESULT) {
+            viewModel.onPackageSelected(it)
+        }
+    }
 }

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

@@ -2,6 +2,7 @@ package com.woocommerce.android.ui.orders.wooshippinglabels
 
 import android.content.res.Configuration
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
@@ -26,6 +27,9 @@ import androidx.compose.material.Text
 import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Star
+import androidx.compose.material.icons.outlined.Star
 import androidx.compose.material.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -48,7 +52,11 @@ import com.woocommerce.android.model.Address
 import com.woocommerce.android.ui.compose.component.WCColoredButton
 import com.woocommerce.android.ui.compose.modifiers.dashedBorder
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
+import com.woocommerce.android.ui.orders.wooshippinglabels.WooShippingLabelCreationViewModel.PackageSelectionState
+import com.woocommerce.android.ui.orders.wooshippinglabels.WooShippingLabelCreationViewModel.PackageSelectionState.DataAvailable
+import com.woocommerce.android.ui.orders.wooshippinglabels.WooShippingLabelCreationViewModel.PackageSelectionState.NotSelected
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.OriginShippingAddress
+import com.woocommerce.android.ui.orders.wooshippinglabels.packages.ui.PackageData
 
 @Composable
 fun WooShippingLabelCreationScreen(viewModel: WooShippingLabelCreationViewModel) {
@@ -67,6 +75,7 @@ fun WooShippingLabelCreationScreen(viewModel: WooShippingLabelCreationViewModel)
                 shippingLines = viewState.shippingLines,
                 shippingAddresses = viewState.shippingAddresses,
                 shippingRatesState = viewState.shippingRates,
+                packageSelectionState = viewState.packageSelection,
                 onShippingFromAddressChange = viewModel::onShippingFromAddressChange,
                 onShippingToAddressChange = viewModel::onShippingToAddressChange,
                 onSelectedRateSortOrderChanged = viewModel::onSelectedRateSortOrderChanged,
@@ -87,6 +96,7 @@ fun WooShippingLabelCreationScreen(
     shippableItems: ShippableItemsUI,
     shippingLines: List<ShippingLineSummaryUI>,
     shippingRatesState: WooShippingLabelCreationViewModel.ShippingRatesState,
+    packageSelectionState: PackageSelectionState,
     shippingAddresses: WooShippingAddresses,
     onShippingFromAddressChange: (OriginShippingAddress) -> Unit,
     onShippingToAddressChange: (Address) -> Unit,
@@ -106,6 +116,7 @@ fun WooShippingLabelCreationScreen(
             shippingLines = shippingLines,
             shippingAddresses = shippingAddresses,
             shippingRatesState = shippingRatesState,
+            packageSelectionState = packageSelectionState,
             onShippingFromAddressChange = onShippingFromAddressChange,
             onShippingToAddressChange = onShippingToAddressChange,
             onSelectedRateSortOrderChanged = onSelectedRateSortOrderChanged,
@@ -145,6 +156,7 @@ private fun LabelCreationScreenWithBottomSheet(
     shippableItems: ShippableItemsUI,
     shippingLines: List<ShippingLineSummaryUI>,
     shippingRatesState: WooShippingLabelCreationViewModel.ShippingRatesState,
+    packageSelectionState: PackageSelectionState,
     onSelectPackageClick: () -> Unit,
     shippingAddresses: WooShippingAddresses,
     onShippingFromAddressChange: (OriginShippingAddress) -> Unit,
@@ -209,6 +221,7 @@ private fun LabelCreationScreenWithBottomSheet(
                 )
                 PackageCard(
                     modifier = Modifier.padding(16.dp),
+                    packageSelectionState = packageSelectionState,
                     onSelectPackageClick = onSelectPackageClick
                 )
                 WooShippingShippingRatesSection(
@@ -272,35 +285,6 @@ private fun WooShippingShippingRatesSection(
     }
 }
 
-@Preview(name = "dark", uiMode = Configuration.UI_MODE_NIGHT_YES, device = Devices.PIXEL)
-@Preview(name = "light", uiMode = Configuration.UI_MODE_NIGHT_NO, device = Devices.PIXEL)
-@Composable
-private fun WooShippingLabelCreationScreenPreview() {
-    WooThemeWithBackground {
-        WooShippingLabelCreationScreen(
-            shippableItems = ShippableItemsUI(
-                shippableItems = generateItems(6),
-                formattedTotalWeight = "8.5kg",
-                formattedTotalPrice = "$92.78"
-            ),
-            shippingLines = getShippingLines(),
-            modifier = Modifier.fillMaxSize(),
-            onSelectPackageClick = {},
-            onPurchaseShippingLabel = {},
-            shippingAddresses = WooShippingAddresses(
-                shipFrom = getShipFrom(),
-                shipTo = getShipTo(),
-                originAddresses = listOf(getShipFrom())
-            ),
-            shippingRatesState = WooShippingLabelCreationViewModel.ShippingRatesState.NoAvailable,
-            onShippingFromAddressChange = {},
-            onShippingToAddressChange = {},
-            onRefreshShippingRates = {},
-            onSelectedRateSortOrderChanged = {}
-        )
-    }
-}
-
 @Composable
 internal fun HazmatCard(
     modifier: Modifier = Modifier,
@@ -337,16 +321,27 @@ internal fun HazmatCard(
     }
 }
 
-@Preview
 @Composable
-private fun HazmatCardPreview() {
-    WooThemeWithBackground {
-        HazmatCard(modifier = Modifier.padding(16.dp))
+private fun PackageCard(
+    modifier: Modifier = Modifier,
+    packageSelectionState: PackageSelectionState,
+    onSelectPackageClick: () -> Unit
+) {
+    when (packageSelectionState) {
+        is NotSelected -> SelectPackageCard(
+            modifier = modifier,
+            onSelectPackageClick = onSelectPackageClick
+        )
+        is DataAvailable -> PackageSelectionAvailableCard(
+            modifier = modifier,
+            packageData = packageSelectionState.selectedPackage,
+            onSelectPackageClick = onSelectPackageClick
+        )
     }
 }
 
 @Composable
-private fun PackageCard(
+private fun SelectPackageCard(
     modifier: Modifier = Modifier,
     onSelectPackageClick: () -> Unit
 ) {
@@ -395,14 +390,86 @@ private fun PackageCard(
     }
 }
 
-@Preview
 @Composable
-private fun PackageCardPreview() {
-    WooThemeWithBackground {
-        PackageCard(
-            modifier = Modifier.padding(16.dp),
-            onSelectPackageClick = {}
-        )
+private fun PackageSelectionAvailableCard(
+    modifier: Modifier = Modifier,
+    packageData: PackageData,
+    onSelectPackageClick: () -> Unit
+) {
+    Column(modifier = modifier.background(color = MaterialTheme.colors.surface)) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(
+                text = stringResource(id = R.string.shipping_label_package_selected_title),
+                style = MaterialTheme.typography.subtitle1,
+                fontWeight = FontWeight.SemiBold
+            )
+            IconButton(
+                onClick = onSelectPackageClick
+            ) {
+                Icon(
+                    imageVector = Icons.Filled.Edit,
+                    tint = colorResource(id = R.color.color_icon_menu),
+                    contentDescription = stringResource(id = R.string.shipping_label_package_selected_description)
+                )
+            }
+        }
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .border(
+                    width = 1.dp,
+                    color = colorResource(id = R.color.divider_color),
+                    shape = RoundedCornerShape(8.dp)
+                )
+                .padding(dimensionResource(id = R.dimen.major_125)),
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.SpaceBetween,
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
+                    Text(
+                        text = packageData.groupName
+                            ?.takeIf { it.isNotEmpty() }
+                            ?: stringResource(id = packageData.descriptionResId),
+                        style = MaterialTheme.typography.caption,
+                        color = colorResource(id = R.color.color_on_surface_disabled)
+                    )
+                    Text(
+                        text = packageData.name
+                            .takeIf { it.isNotEmpty() }
+                            ?: stringResource(id = R.string.shipping_label_package_default_name),
+                        style = MaterialTheme.typography.body1
+                    )
+                    Text(
+                        text = packageData.weight
+                            .takeIf { it.isNotEmpty() }
+                            ?.let { "${packageData.dimensionForDisplay} • ${packageData.weightForDisplay}" }
+                            ?: packageData.dimensionForDisplay,
+                        style = MaterialTheme.typography.body2
+                    )
+                }
+
+                if (packageData.isPredefined) {
+                    Icon(
+                        tint = colorResource(id = R.color.woo_yellow_20),
+                        imageVector = Icons.Filled.Star,
+                        contentDescription = "Star",
+                    )
+                } else {
+                    Icon(
+                        tint = colorResource(id = R.color.color_on_surface_disabled),
+                        imageVector = Icons.Outlined.Star,
+                        contentDescription = "Star",
+                    )
+                }
+            }
+        }
     }
 }
 
@@ -422,3 +489,74 @@ data class ShippableItemsUI(
     val formattedTotalWeight: String,
     val formattedTotalPrice: String
 )
+
+@Preview(name = "dark", uiMode = Configuration.UI_MODE_NIGHT_YES, device = Devices.PIXEL)
+@Preview(name = "light", uiMode = Configuration.UI_MODE_NIGHT_NO, device = Devices.PIXEL)
+@Composable
+private fun WooShippingLabelCreationScreenPreview() {
+    WooThemeWithBackground {
+        WooShippingLabelCreationScreen(
+            shippableItems = ShippableItemsUI(
+                shippableItems = generateItems(6),
+                formattedTotalWeight = "8.5kg",
+                formattedTotalPrice = "$92.78"
+            ),
+            shippingLines = getShippingLines(),
+            modifier = Modifier.fillMaxSize(),
+            onSelectPackageClick = {},
+            onPurchaseShippingLabel = {},
+            shippingAddresses = WooShippingAddresses(
+                shipFrom = getShipFrom(),
+                shipTo = getShipTo(),
+                originAddresses = listOf(getShipFrom())
+            ),
+            shippingRatesState = WooShippingLabelCreationViewModel.ShippingRatesState.NoAvailable,
+            packageSelectionState = NotSelected,
+            onShippingFromAddressChange = {},
+            onShippingToAddressChange = {},
+            onRefreshShippingRates = {},
+            onSelectedRateSortOrderChanged = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun HazmatCardPreview() {
+    WooThemeWithBackground {
+        HazmatCard(modifier = Modifier.padding(16.dp))
+    }
+}
+
+@Preview
+@Composable
+private fun PackageNotSelectedPreview() {
+    WooThemeWithBackground {
+        PackageCard(
+            modifier = Modifier.padding(16.dp),
+            packageSelectionState = NotSelected,
+            onSelectPackageClick = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun PackageSelectedPreview() {
+    WooThemeWithBackground {
+        PackageCard(
+            modifier = Modifier.padding(16.dp),
+            packageSelectionState = DataAvailable(
+                selectedPackage = PackageData(
+                    name = "Package 1",
+                    dimensions = "10 x 10 x 10",
+                    weight = "1.5",
+                    isSelected = true,
+                    isLetter = false
+                ),
+                totalWeight = "1.5"
+            ),
+            onSelectPackageClick = {}
+        )
+    }
+}