Repository: woocommerce/woocommerce-android
Pull request #13847: [Shipping Labels Revamp] Update purchase screen with HAZMAT data
Author: login: ThomazFB
Labels: name: type: task
description: An internally driven task.
name: feature: shipping labels
description: Related to creating, ordering, or printing shipping labels.
Created: 2025-03-26T15:07:49Z | Merged: 2025-04-07T17:11:19Z

Summary
==========
Fix issue #13841 by updating the Purchased screen with the Hazmat data. 

The Hazmat was already defined within the UI, but it wasn't carrying any data from the Creation form. To fix this, this PR updates the data wiring between the Creation form and Purchased screen to contain the selected Hazmat category. 

Also, it updates the Hazmat card inside the Purchased screen to follow the Figma designs.

Screen Capture
==========
https://github.com/user-attachments/assets/617004b3-d656-4e64-beb9-806f5dcb89cd

How to Test
==========
1. Open the Shipping Label creation form
2. Select a Hazmat category
3. Create the label
4. Verify that the Purchased screen correctly displays the selected Hazmat category

Update release notes:

- [x] I have considered if this change warrants user-facing release notes and have added them to `RELEASE-NOTES.txt` if necessary.

## Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

- [ ] The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
- [ ] Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
- [ ] Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on big (tablet) and small (phone) in case of UI changes, and no regressions are added.



Diff:
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationScreen.kt
index 50e658089dfd..8b6a9d061f22 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationScreen.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationScreen.kt
@@ -55,7 +55,6 @@ import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
@@ -83,7 +82,7 @@ import com.woocommerce.android.ui.orders.wooshippinglabels.address.AddressStatus
 import com.woocommerce.android.ui.orders.wooshippinglabels.address.getShipFrom
 import com.woocommerce.android.ui.orders.wooshippinglabels.address.getShipTo
 import com.woocommerce.android.ui.orders.wooshippinglabels.components.SuccessSnackbarHost
-import com.woocommerce.android.ui.orders.wooshippinglabels.hazmat.HazmatSelectionCard
+import com.woocommerce.android.ui.orders.wooshippinglabels.hazmat.HazmatCard
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.DestinationShippingAddress
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.OriginShippingAddress
 import com.woocommerce.android.ui.orders.wooshippinglabels.packages.components.ErrorMessageWithButton
@@ -493,51 +492,6 @@ private fun TopBar(onNavigateBack: () -> Unit) = TopAppBar(
     elevation = 0.dp,
 )
 
-@Composable
-internal fun HazmatCard(
-    modifier: Modifier = Modifier,
-    selectedCategory: ShippingLabelHazmatCategory? = null,
-    onClick: () -> Unit = {}
-) {
-    Row(modifier = modifier.clickable { onClick() }) {
-        Text(
-            text = stringResource(R.string.shipping_label_hazmat_title),
-            style = MaterialTheme.typography.subtitle1,
-            color = MaterialTheme.colors.onSurface,
-            modifier = Modifier
-                .weight(1f)
-                .padding(dimensionResource(id = R.dimen.major_100))
-                .align(Alignment.CenterVertically)
-        )
-
-        Text(
-            text = if (selectedCategory == null) stringResource(R.string.no) else stringResource(R.string.yes),
-            style = MaterialTheme.typography.subtitle1,
-            color = colorResource(id = R.color.color_on_surface_medium),
-            modifier = Modifier
-                .align(Alignment.CenterVertically)
-        )
-
-        Icon(
-            painter = painterResource(R.drawable.ic_arrow_right),
-            tint = colorResource(id = R.color.color_on_surface_medium),
-            contentDescription = stringResource(
-                id = R.string.shipping_label_package_details_items_expand_content_description
-            ),
-            modifier = Modifier
-                .align(Alignment.CenterVertically)
-                .padding(end = dimensionResource(R.dimen.minor_50))
-        )
-    }
-
-    if (selectedCategory != null) {
-        HazmatSelectionCard(
-            selectedCategory = selectedCategory,
-            modifier = Modifier.padding(dimensionResource(id = R.dimen.major_100))
-        )
-    }
-}
-
 @Composable
 private fun CustomsCard(
     customsState: CustomsState,
@@ -906,14 +860,6 @@ private fun WooShippingLabelCreationScreenPreview() {
     }
 }
 
-@Preview
-@Composable
-private fun HazmatCardPreview() {
-    WooThemeWithBackground {
-        HazmatCard(modifier = Modifier.padding(16.dp))
-    }
-}
-
 @Preview
 @Composable
 private fun PackageNotSelectedPreview() {
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationViewModel.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationViewModel.kt
index 5de070961f7e..a20b0d767730 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationViewModel.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationViewModel.kt
@@ -547,6 +547,7 @@ class WooShippingLabelCreationViewModel @Inject constructor(
             ?.let { purchasedLabel ->
                 val currentViewState = (viewState.value as? WooShippingViewState.DataState)
                 val selectedRate = selectedRate.value
+                val hazmatSelection = hazmatState.value.hazmatSelection
                 if (currentViewState != null && selectedRate != null) {
                     PurchasedShippingLabelData(
                         labelId = purchasedLabel.labelId,
@@ -556,7 +557,8 @@ class WooShippingLabelCreationViewModel @Inject constructor(
                         addresses = currentViewState.shippingAddresses,
                         items = currentViewState.shippableItems,
                         rateSummary = selectedRate.summary,
-                        shippingLines = currentViewState.shippingLines
+                        shippingLines = currentViewState.shippingLines,
+                        hazmatSelection = hazmatSelection
                     ).let { triggerEvent(LabelPurchased(purchaseData = it)) }
                 }
             }
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/hazmat/HazmatCard.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/hazmat/HazmatCard.kt
new file mode 100644
index 000000000000..4f7f54f59c3e
--- /dev/null
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/hazmat/HazmatCard.kt
@@ -0,0 +1,117 @@
+package com.woocommerce.android.ui.orders.wooshippinglabels.hazmat
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.woocommerce.android.R
+import com.woocommerce.android.ui.orders.shippinglabels.creation.ShippingLabelHazmatCategory
+
+typealias OnClick = () -> Unit
+
+@Composable
+internal fun HazmatCard(
+    modifier: Modifier = Modifier,
+    selectedCategory: ShippingLabelHazmatCategory? = null,
+    onClick: OnClick? = null
+) {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        val mainRowModifier = when {
+            onClick != null ->
+                modifier
+                    .clickable { onClick() }
+                    .padding(vertical = 16.dp)
+            else -> modifier
+        }
+
+        Row(modifier = mainRowModifier.padding(horizontal = 16.dp)) {
+            Text(
+                text = stringResource(R.string.shipping_label_hazmat_title),
+                style = MaterialTheme.typography.subtitle1,
+                color = MaterialTheme.colors.onSurface,
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(end = dimensionResource(id = R.dimen.major_100))
+                    .align(Alignment.CenterVertically)
+            )
+
+            Text(
+                text = if (selectedCategory == null) stringResource(R.string.no) else stringResource(R.string.yes),
+                style = MaterialTheme.typography.subtitle1,
+                color = colorResource(id = R.color.color_on_surface_medium),
+                modifier = Modifier.align(Alignment.CenterVertically)
+            )
+
+            if (onClick != null) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_arrow_right),
+                    tint = colorResource(id = R.color.color_on_surface_medium),
+                    contentDescription = stringResource(
+                        id = R.string.shipping_label_package_details_items_expand_content_description
+                    ),
+                    modifier = Modifier.align(Alignment.CenterVertically)
+                )
+            }
+        }
+
+        if (selectedCategory != null) {
+            HazmatSelectionCard(
+                selectedCategory = selectedCategory,
+                modifier = Modifier.padding(dimensionResource(id = R.dimen.major_100))
+            )
+        }
+    }
+}
+
+@Preview("Hazmat non-clickable without selection")
+@Composable
+private fun NonClickableWithoutSelectionPreview() {
+    Surface {
+        HazmatCard()
+    }
+}
+
+@Preview("Hazmat non-clickable with selection")
+@Composable
+private fun NonClickableWithSelectionPreview() {
+    Surface {
+        HazmatCard(
+            selectedCategory = ShippingLabelHazmatCategory.CLASS_1
+        )
+    }
+}
+
+@Preview("Hazmat clickable without selection")
+@Composable
+private fun ClickableWithoutSelectionPreview() {
+    Surface {
+        HazmatCard(
+            onClick = {}
+        )
+    }
+}
+
+@Preview("Hazmat clickable with selection")
+@Composable
+private fun ClickableWithSelectionPreview() {
+    Surface {
+        HazmatCard(
+            selectedCategory = ShippingLabelHazmatCategory.CLASS_1,
+            onClick = {}
+        )
+    }
+}
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/purchased/PurchasedShippingLabelData.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/purchased/PurchasedShippingLabelData.kt
index 9a06af637003..fac5b3345a08 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/purchased/PurchasedShippingLabelData.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/purchased/PurchasedShippingLabelData.kt
@@ -1,6 +1,7 @@
 package com.woocommerce.android.ui.orders.wooshippinglabels.purchased
 
 import android.os.Parcelable
+import com.woocommerce.android.ui.orders.shippinglabels.creation.ShippingLabelHazmatCategory
 import com.woocommerce.android.ui.orders.wooshippinglabels.ShippableItemsUI
 import com.woocommerce.android.ui.orders.wooshippinglabels.ShippingLineSummaryUI
 import com.woocommerce.android.ui.orders.wooshippinglabels.ShippingRateSummaryUI
@@ -17,6 +18,7 @@ data class PurchasedShippingLabelData(
     val addresses: WooShippingAddresses,
     val rateSummary: ShippingRateSummaryUI,
     val shippingLines: List<ShippingLineSummaryUI>,
+    val hazmatSelection: ShippingLabelHazmatCategory?
 ) : Parcelable
 
 @Parcelize
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/purchased/WooShippingLabelPurchasedScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/purchased/WooShippingLabelPurchasedScreen.kt
index 170fd646075b..e2204cf0d16e 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/purchased/WooShippingLabelPurchasedScreen.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/purchased/WooShippingLabelPurchasedScreen.kt
@@ -40,7 +40,6 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.stringResource
@@ -52,13 +51,14 @@ import com.woocommerce.android.R
 import com.woocommerce.android.ui.compose.component.ProgressDialog
 import com.woocommerce.android.ui.compose.component.WCColoredButton
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
-import com.woocommerce.android.ui.orders.wooshippinglabels.HazmatCard
+import com.woocommerce.android.ui.orders.shippinglabels.creation.ShippingLabelHazmatCategory
 import com.woocommerce.android.ui.orders.wooshippinglabels.RoundedCornerBoxWithBorder
 import com.woocommerce.android.ui.orders.wooshippinglabels.ShipmentDetails
 import com.woocommerce.android.ui.orders.wooshippinglabels.ShippableItemsUI
 import com.woocommerce.android.ui.orders.wooshippinglabels.ShippingProductsCard
 import com.woocommerce.android.ui.orders.wooshippinglabels.address.AddressStatus
 import com.woocommerce.android.ui.orders.wooshippinglabels.generateItems
+import com.woocommerce.android.ui.orders.wooshippinglabels.hazmat.HazmatCard
 import kotlinx.coroutines.launch
 
 @Composable
@@ -128,8 +128,105 @@ internal fun WooShippingLabelPurchasedWithBottomSheetScreen(
         Column(
             modifier = modifier
                 .padding(innerPadding)
-                .padding(start = 16.dp, end = 16.dp)
                 .verticalScroll(rememberScrollState())
+        ) {
+            Column(
+                modifier = modifier.padding(16.dp)
+            ) {
+                val (titleResId, messageResId) = when (isPurchaseFinished) {
+                    true -> Pair(
+                        R.string.shipping_label_purchased_success_title,
+                        R.string.shipping_label_purchased_success_message
+                    )
+
+                    false -> Pair(
+                        R.string.shipping_label_purchased_in_progress_title,
+                        R.string.shipping_label_purchased_in_progress_message
+                    )
+
+                    null -> Pair(
+                        R.string.shipping_label_purchased_failure_title,
+                        R.string.shipping_label_purchased_failure_message
+                    )
+                }
+
+                Text(
+                    text = stringResource(id = titleResId),
+                    style = MaterialTheme.typography.subtitle1,
+                    fontWeight = FontWeight.Bold,
+                    modifier = Modifier.padding(top = 16.dp)
+                )
+                Text(
+                    text = stringResource(id = messageResId),
+                    modifier = Modifier.padding(top = 8.dp),
+                    style = MaterialTheme.typography.subtitle1,
+                )
+                Spacer(modifier = Modifier.padding(top = 16.dp))
+                PrintShippingLabelCard(
+                    isPrintButtonEnabled = isPurchaseFinished == true,
+                    selectedLabelPaperSizeOption = selectedLabelPaperSizeOption,
+                    onLabelPaperSizeOptionSelected = onLabelPaperSizeOptionSelected,
+                    onPrintShippingLabelClicked = onPrintShippingLabelClicked,
+                    onTrackShipmentClicked = onTrackShipmentClicked,
+                    onSchedulePickUpClicked = onSchedulePickUpClicked,
+                    onRefundClicked = onRefundClicked,
+                    onLearnMoreClicked = onLearnMoreClicked,
+                )
+                Text(
+                    text = stringResource(id = R.string.shipping_label_purchased_note),
+                    style = MaterialTheme.typography.caption,
+                    color = colorResource(id = R.color.color_on_surface_medium),
+                    modifier = Modifier.padding(top = 8.dp),
+                )
+
+                val isExpanded = remember { mutableStateOf(false) }
+                shippingData?.let {
+                    ShippingProductsCard(
+                        shippableItems = shippingData.items,
+                        isExpanded = isExpanded.value,
+                        onExpand = { isExpanded.value = it },
+                        iconColor = MaterialTheme.colors.onSurface,
+                        modifier = Modifier.padding(top = 24.dp)
+                    )
+                }
+                Spacer(modifier = Modifier.padding(top = 16.dp))
+            }
+
+            HazmatCard(
+                selectedCategory = shippingData?.hazmatSelection
+            )
+
+            if (isLoading) {
+                ProgressDialog(
+                    title = stringResource(R.string.loading),
+                    subtitle = stringResource(R.string.please_wait),
+                )
+            }
+        }
+    }
+}
+
+@Composable
+internal fun WooShippingLabelPurchasedScreen(
+    isLoading: Boolean,
+    isPurchaseFinished: Boolean?,
+    shippingData: ShippableItemsUI?,
+    selectedLabelPaperSizeOption: WooShippingLabelPaperSize,
+    onLabelPaperSizeOptionSelected: (WooShippingLabelPaperSize) -> Unit,
+    onPrintShippingLabelClicked: () -> Unit,
+    onTrackShipmentClicked: () -> Unit,
+    onSchedulePickUpClicked: () -> Unit,
+    onRefundClicked: () -> Unit,
+    onLearnMoreClicked: () -> Unit,
+    modifier: Modifier = Modifier,
+    selectedHazmatCategory: ShippingLabelHazmatCategory? = null,
+) {
+    Column(
+        modifier = modifier
+            .verticalScroll(rememberScrollState())
+    ) {
+        Column(
+            modifier = modifier.padding(16.dp)
         ) {
             val (titleResId, messageResId) = when (isPurchaseFinished) {
                 true -> Pair(
@@ -152,7 +249,6 @@ internal fun WooShippingLabelPurchasedWithBottomSheetScreen(
                 text = stringResource(id = titleResId),
                 style = MaterialTheme.typography.subtitle1,
                 fontWeight = FontWeight.Bold,
-                modifier = Modifier.padding(top = 16.dp)
             )
             Text(
                 text = stringResource(id = messageResId),
@@ -177,10 +273,14 @@ internal fun WooShippingLabelPurchasedWithBottomSheetScreen(
                 modifier = Modifier.padding(top = 8.dp),
             )
 
-            val isExpanded = remember { mutableStateOf(false) }
-            shippingData?.let {
+            shippingData?.let { shippingData ->
+                val isExpanded = remember { mutableStateOf(false) }
                 ShippingProductsCard(
-                    shippableItems = shippingData.items,
+                    shippableItems = ShippableItemsUI(
+                        shippableItems = shippingData.shippableItems,
+                        formattedTotalWeight = shippingData.formattedTotalWeight,
+                        formattedTotalPrice = shippingData.formattedTotalPrice
+                    ),
                     isExpanded = isExpanded.value,
                     onExpand = { isExpanded.value = it },
                     iconColor = MaterialTheme.colors.onSurface,
@@ -188,113 +288,10 @@ internal fun WooShippingLabelPurchasedWithBottomSheetScreen(
                 )
             }
             Spacer(modifier = Modifier.padding(top = 16.dp))
-            HazmatCard(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .background(
-                        color = MaterialTheme.colors.background,
-                        shape = RoundedCornerShape(dimensionResource(R.dimen.corner_radius_large))
-                    )
-                    .clip(RoundedCornerShape(dimensionResource(R.dimen.corner_radius_large))),
-            )
-
-            if (isLoading) {
-                ProgressDialog(
-                    title = stringResource(R.string.loading),
-                    subtitle = stringResource(R.string.please_wait),
-                )
-            }
         }
-    }
-}
 
-@Composable
-internal fun WooShippingLabelPurchasedScreen(
-    isLoading: Boolean,
-    isPurchaseFinished: Boolean?,
-    shippingData: ShippableItemsUI?,
-    selectedLabelPaperSizeOption: WooShippingLabelPaperSize,
-    onLabelPaperSizeOptionSelected: (WooShippingLabelPaperSize) -> Unit,
-    onPrintShippingLabelClicked: () -> Unit,
-    onTrackShipmentClicked: () -> Unit,
-    onSchedulePickUpClicked: () -> Unit,
-    onRefundClicked: () -> Unit,
-    onLearnMoreClicked: () -> Unit,
-    modifier: Modifier = Modifier,
-) {
-    Column(
-        modifier = modifier
-            .padding(16.dp)
-            .verticalScroll(rememberScrollState())
-    ) {
-        val (titleResId, messageResId) = when (isPurchaseFinished) {
-            true -> Pair(
-                R.string.shipping_label_purchased_success_title,
-                R.string.shipping_label_purchased_success_message
-            )
-
-            false -> Pair(
-                R.string.shipping_label_purchased_in_progress_title,
-                R.string.shipping_label_purchased_in_progress_message
-            )
-
-            null -> Pair(
-                R.string.shipping_label_purchased_failure_title,
-                R.string.shipping_label_purchased_failure_message
-            )
-        }
-
-        Text(
-            text = stringResource(id = titleResId),
-            style = MaterialTheme.typography.subtitle1,
-            fontWeight = FontWeight.Bold,
-        )
-        Text(
-            text = stringResource(id = messageResId),
-            modifier = Modifier.padding(top = 8.dp),
-            style = MaterialTheme.typography.subtitle1,
-        )
-        Spacer(modifier = Modifier.padding(top = 16.dp))
-        PrintShippingLabelCard(
-            isPrintButtonEnabled = isPurchaseFinished == true,
-            selectedLabelPaperSizeOption = selectedLabelPaperSizeOption,
-            onLabelPaperSizeOptionSelected = onLabelPaperSizeOptionSelected,
-            onPrintShippingLabelClicked = onPrintShippingLabelClicked,
-            onTrackShipmentClicked = onTrackShipmentClicked,
-            onSchedulePickUpClicked = onSchedulePickUpClicked,
-            onRefundClicked = onRefundClicked,
-            onLearnMoreClicked = onLearnMoreClicked,
-        )
-        Text(
-            text = stringResource(id = R.string.shipping_label_purchased_note),
-            style = MaterialTheme.typography.caption,
-            color = colorResource(id = R.color.color_on_surface_medium),
-            modifier = Modifier.padding(top = 8.dp),
-        )
-
-        shippingData?.let { shippingData ->
-            val isExpanded = remember { mutableStateOf(false) }
-            ShippingProductsCard(
-                shippableItems = ShippableItemsUI(
-                    shippableItems = shippingData.shippableItems,
-                    formattedTotalWeight = shippingData.formattedTotalWeight,
-                    formattedTotalPrice = shippingData.formattedTotalPrice
-                ),
-                isExpanded = isExpanded.value,
-                onExpand = { isExpanded.value = it },
-                iconColor = MaterialTheme.colors.onSurface,
-                modifier = Modifier.padding(top = 24.dp)
-            )
-        }
-        Spacer(modifier = Modifier.padding(top = 16.dp))
         HazmatCard(
-            modifier = Modifier
-                .fillMaxWidth()
-                .background(
-                    color = MaterialTheme.colors.background,
-                    shape = RoundedCornerShape(dimensionResource(R.dimen.corner_radius_large))
-                )
-                .clip(RoundedCornerShape(dimensionResource(R.dimen.corner_radius_large))),
+            selectedCategory = selectedHazmatCategory
         )
 
         if (isLoading) {
@@ -494,6 +491,7 @@ internal fun WooShippingLabelPurchasedScreenPreview() {
                     formattedTotalPrice = "$92.78"
                 ),
                 selectedLabelPaperSizeOption = selectedLabelPaperSizeOption.value,
+                selectedHazmatCategory = ShippingLabelHazmatCategory.CLASS_1,
                 onLabelPaperSizeOptionSelected = { selectedLabelPaperSizeOption.value = it },
                 onPrintShippingLabelClicked = {},
                 onTrackShipmentClicked = {},
diff --git a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationViewModelTest.kt b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationViewModelTest.kt
index 16aace597c4f..350c452d0cae 100644
--- a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationViewModelTest.kt
+++ b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationViewModelTest.kt
@@ -768,7 +768,8 @@ class WooShippingLabelCreationViewModelTest : BaseUnitTest() {
             items = mock(),
             rateSummary = mock(),
             shippingLines = mock(),
-            addresses = mock()
+            addresses = mock(),
+            hazmatSelection = ShippingLabelHazmatCategory.CLASS_1
         )
 
         createViewModel()
diff --git a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/purchased/WooShippingLabelPurchasedViewModelTest.kt b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/purchased/WooShippingLabelPurchasedViewModelTest.kt
index ae518b92985b..cfd204cd52e2 100644
--- a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/purchased/WooShippingLabelPurchasedViewModelTest.kt
+++ b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/purchased/WooShippingLabelPurchasedViewModelTest.kt
@@ -1,5 +1,6 @@
 package com.woocommerce.android.ui.orders.wooshippinglabels.purchased
 
+import com.woocommerce.android.ui.orders.shippinglabels.creation.ShippingLabelHazmatCategory
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.ShippingLabelStatus.PurchaseInProgress
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.ShippingLabelStatus.Purchased
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.ShippingLabelStatus.Unknown
@@ -38,7 +39,8 @@ class WooShippingLabelPurchasedViewModelTest : BaseUnitTest() {
         addresses = mock(),
         rateSummary = mock(),
         shippingLines = emptyList(),
-        items = mock()
+        items = mock(),
+        hazmatSelection = ShippingLabelHazmatCategory.CLASS_1
     )
 
     private val navArgs = WooShippingLabelPurchasedFragmentArgs(


Reviews:
user: login: github-advanced-security[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-02T11:18:50Z
user: login: irfano
body: I verified the Hazmat selection on the purchased screen. LGTM! 👍🏻 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-07T15:55:32Z

Review comments:
diff_hunk: @@ -0,0 +1,117 @@
+package com.woocommerce.android.ui.orders.wooshippinglabels.hazmat
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Icon
path: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/hazmat/HazmatCard.kt
user: login: github-advanced-security[bot]
body: ## material and material3 are separate, incompatible design system libraries

Using a material import while also using the material3 library

[Show more details](https://github.com/woocommerce/woocommerce-android/security/code-scanning/68699)
created_at: 2025-04-02T11:18:49Z
author_association: NONE
diff_hunk: @@ -0,0 +1,117 @@
+package com.woocommerce.android.ui.orders.wooshippinglabels.hazmat
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
path: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/hazmat/HazmatCard.kt
user: login: github-advanced-security[bot]
body: ## material and material3 are separate, incompatible design system libraries

Using a material import while also using the material3 library

[Show more details](https://github.com/woocommerce/woocommerce-android/security/code-scanning/68700)
created_at: 2025-04-02T11:18:50Z
author_association: NONE
diff_hunk: @@ -0,0 +1,117 @@
+package com.woocommerce.android.ui.orders.wooshippinglabels.hazmat
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
path: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/hazmat/HazmatCard.kt
user: login: github-advanced-security[bot]
body: ## material and material3 are separate, incompatible design system libraries

Using a material import while also using the material3 library

[Show more details](https://github.com/woocommerce/woocommerce-android/security/code-scanning/68701)
created_at: 2025-04-02T11:18:50Z
author_association: NONE
diff_hunk: @@ -0,0 +1,117 @@
+package com.woocommerce.android.ui.orders.wooshippinglabels.hazmat
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
path: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/hazmat/HazmatCard.kt
user: login: github-advanced-security[bot]
body: ## material and material3 are separate, incompatible design system libraries

Using a material import while also using the material3 library

[Show more details](https://github.com/woocommerce/woocommerce-android/security/code-scanning/68702)
created_at: 2025-04-02T11:18:50Z
author_association: NONE

PR comments:
user: login: wpmobilebot
created_at: 2025-03-26T15:12:40Z
body: <!-- REUSE_ID: WooCommerce-Wear-prototype-build-link -->

<details><summary>📲 You can test the changes from this Pull Request in <b>WooCommerce-Wear Android</b> by scanning the QR code below to install the corresponding build.</summary>
<table>
<tr>
  <td rowspan='6' width='260px'><img src='https://api.qrserver.com/v1/create-qr-code/?size=500x500&qzone=4&data=https%3A%2F%2Fcdn.a8c-ci.services%2F70ad533e752cbd4dcd515ed6cfb9f823d6f9f819%2Fwoocommerce-wear-prototype-build-pr13847-b2944cf.apk' width='250' height='250' /></td>
  <td><b>App Name</b></td><td> WooCommerce-Wear Android</td>
</tr>
<tr><td><b>Platform</b></td><td>⌚️ Wear OS</td></tr>
<tr><td><b>Flavor</b></td><td>Jalapeno</td></tr>
<tr><td><b>Build Type</b></td><td>Debug</td></tr>
<tr><td><b>Commit</b></td><td>b2944cff2ca48eb2803d042d625372ffe164b8d6</td></tr>
<tr><td><b>Direct Download</b></td><td><a href='https://cdn.a8c-ci.services/70ad533e752cbd4dcd515ed6cfb9f823d6f9f819/woocommerce-wear-prototype-build-pr13847-b2944cf.apk'><code>woocommerce-wear-prototype-build-pr13847-b2944cf.apk</code></a></td></tr>
</table>

</details>

author_association: COLLABORATOR
user: login: wpmobilebot
created_at: 2025-03-26T15:23:31Z
body: <!-- REUSE_ID: WooCommerce-prototype-build-link -->

<p>📲 You can test the changes from this Pull Request in <b>WooCommerce Android</b> by scanning the QR code below to install the corresponding build.</p>
<table>
<tr>
  <td rowspan='6' width='260px'><img src='https://api.qrserver.com/v1/create-qr-code/?size=500x500&qzone=4&data=https%3A%2F%2Fcdn.a8c-ci.services%2Fa8b6e90d9d969f1b573b3c0dd090796761ee106e%2Fwoocommerce-prototype-build-pr13847-b2944cf.apk' width='250' height='250' /></td>
  <td><b>App Name</b></td><td> WooCommerce Android</td>
</tr>
<tr><td><b>Platform</b></td><td>📱 Mobile</td></tr>
<tr><td><b>Flavor</b></td><td>Jalapeno</td></tr>
<tr><td><b>Build Type</b></td><td>Debug</td></tr>
<tr><td><b>Commit</b></td><td>b2944cff2ca48eb2803d042d625372ffe164b8d6</td></tr>
<tr><td><b>Direct Download</b></td><td><a href='https://cdn.a8c-ci.services/a8b6e90d9d969f1b573b3c0dd090796761ee106e/woocommerce-prototype-build-pr13847-b2944cf.apk'><code>woocommerce-prototype-build-pr13847-b2944cf.apk</code></a></td></tr>
</table>


author_association: COLLABORATOR
user: login: codecov-commenter
created_at: 2025-04-02T02:50:52Z
body: ## [Codecov](https://app.codecov.io/gh/woocommerce/woocommerce-android/pull/13847?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) Report
Attention: Patch coverage is `5.71429%` with `66 lines` in your changes missing coverage. Please review.
> Project coverage is 38.29%. Comparing base [(`ed48b9f`)](https://app.codecov.io/gh/woocommerce/woocommerce-android/commit/ed48b9f227641a47bd3ef8928ede608dc29c510a?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) to head [(`b2944cf`)](https://app.codecov.io/gh/woocommerce/woocommerce-android/commit/b2944cff2ca48eb2803d042d625372ffe164b8d6?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce).
> Report is 31 commits behind head on trunk.

| [Files with missing lines](https://app.codecov.io/gh/woocommerce/woocommerce-android/pull/13847?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) | Patch % | Lines |
|---|---|---|
| [...d/ui/orders/wooshippinglabels/hazmat/HazmatCard.kt](https://app.codecov.io/gh/woocommerce/woocommerce-android/pull/13847?src=pr&el=tree&filepath=WooCommerce%2Fsrc%2Fmain%2Fkotlin%2Fcom%2Fwoocommerce%2Fandroid%2Fui%2Forders%2Fwooshippinglabels%2Fhazmat%2FHazmatCard.kt&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-V29vQ29tbWVyY2Uvc3JjL21haW4va290bGluL2NvbS93b29jb21tZXJjZS9hbmRyb2lkL3VpL29yZGVycy93b29zaGlwcGluZ2xhYmVscy9oYXptYXQvSGF6bWF0Q2FyZC5rdA==) | 0.00% | [66 Missing :warning: ](https://app.codecov.io/gh/woocommerce/woocommerce-android/pull/13847?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) |

<details><summary>Additional details and impacted files</summary>


```diff
@@             Coverage Diff              @@
##              trunk   #13847      +/-   ##
============================================
- Coverage     38.31%   38.29%   -0.03%     
  Complexity     9357     9357              
============================================
  Files          2088     2089       +1     
  Lines        115379   115448      +69     
  Branches      14743    14769      +26     
============================================
+ Hits          44206    44209       +3     
- Misses        67147    67213      +66     
  Partials       4026     4026              
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/woocommerce/woocommerce-android/pull/13847?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
</details>
author_association: NONE
user: login: ThomazFB
created_at: 2025-04-02T04:20:58Z
body: @irfano @atorresveiga during this PR progress, I've noticed that the Purchased screen contains a code repetition of the Purchased composable. One of them is used solely for Preview purposes. This can be verified by comparing the code of the `WooShippingLabelPurchasedWithBottomSheetScreen` and `WooShippingLabelPurchasedScreen` composables.

I understand the reasoning for the preview-only code, but this is causing a lot of confusion during development. More than once, I ran an entire Label purchase flow for tests and then noticed that I only updated the Preview composable, not the real one.

I'm inclined to refactor this in a separate PR so that the `WooShippingLabelPurchasedWithBottomSheetScreen` reuses the `WooShippingLabelPurchasedScreen` internally, so we remove this duplication. What do you folks think?
author_association: CONTRIBUTOR
user: login: dangermattic
created_at: 2025-04-02T10:53:06Z
body: <!--
  0 Errors
  1 Warning: This PR is larger than 300 lin...
  0 Messages
  0 Markdowns
-->
<table>
  <thead>
    <tr>
      <th width="50"></th>
      <th width="100%" data-danger-table="true" data-kind="Warning">
          1 Warning
      </th>
     </tr>
  </thead>
  <tbody>
    <tr>
      <td>:warning:</td>
      <td data-sticky="false">This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.</td>
    </tr>
  </tbody>
</table>

<p align="right" data-meta="generated_by_pr-check">
  Generated by :no_entry_sign: <a href="https://danger.systems/">Danger</a>
</p>

author_association: COLLABORATOR
user: login: irfano
created_at: 2025-04-07T16:20:32Z
body: > I'm inclined to refactor this in a separate PR so that the WooShippingLabelPurchasedWithBottomSheetScreen reuses the WooShippingLabelPurchasedScreen internally, so we remove this duplication. What do you folks think?

This makes sense, and we can do it in a separate PR. Opened an issue: WOOMOB-266
author_association: CONTRIBUTOR