From 1df60a1fefdbabdacd864364132c62513b505bf5 Mon Sep 17 00:00:00 2001
From: Alejo <alejandro.torres.veiga@automattic.com>
Date: Sat, 19 Oct 2024 07:27:42 -0600
Subject: [PATCH 1/4] add bottom sheet

---
 .../WooShippingLabelCreationFragment.kt       |   4 +-
 .../WooShippingLabelCreationScreen.kt         | 105 ++++++++++++++----
 2 files changed, 87 insertions(+), 22 deletions(-)

diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationFragment.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationFragment.kt
index a21f77d5ca1..eadea6177e8 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationFragment.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationFragment.kt
@@ -7,9 +7,9 @@ import android.view.ViewGroup
 import androidx.compose.material.Surface
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
-import com.woocommerce.android.R
 import com.woocommerce.android.ui.base.BaseFragment
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
+import com.woocommerce.android.ui.main.AppBarStatus
 
 class WooShippingLabelCreationFragment : BaseFragment() {
     override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
@@ -25,5 +25,5 @@ class WooShippingLabelCreationFragment : BaseFragment() {
         }
     }
 
-    override fun getFragmentTitle() = getString(R.string.orderdetail_shipping_label_create_shipping_label)
+    override val activityAppBarStatus: AppBarStatus = AppBarStatus.Hidden
 }
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 8b204d3f4e6..61afc6b5154 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
@@ -3,21 +3,34 @@ package com.woocommerce.android.ui.orders.wooshippinglabels
 import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.BottomSheetScaffold
+import androidx.compose.material.Button
+import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
 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.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.colorResource
@@ -33,31 +46,83 @@ import com.woocommerce.android.R
 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 kotlinx.coroutines.launch
 
+@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun WooShippingLabelCreationScreen(
     modifier: Modifier = Modifier
 ) {
-    Column(modifier.verticalScroll(rememberScrollState())) {
-        val isExpanded = remember { mutableStateOf(false) }
-        ShippingProductsCard(
-            shippableItems = ShippableItems(
-                shippableItems = generateItems(6),
-                totalWeight = "8.5kg",
-                totalPrice = "$92.78"
-            ),
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(16.dp),
-            isExpanded = isExpanded.value,
-            onExpand = { isExpanded.value = it }
-        )
-        HazmatCard(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(start = 4.dp, end = 8.dp)
-        )
-        PackageCard(modifier = Modifier.padding(16.dp))
+    val scope = rememberCoroutineScope()
+    val scaffoldState = rememberBottomSheetScaffoldState()
+    BottomSheetScaffold(
+        sheetContent = {
+            Box(
+                Modifier
+                    .fillMaxWidth()
+                    .height(128.dp),
+                contentAlignment = Alignment.Center
+            ) {
+                Text("Swipe up to expand sheet")
+            }
+            Column(
+                Modifier
+                    .fillMaxSize()
+                    .padding(64.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Text("Sheet content")
+                Spacer(Modifier.height(20.dp))
+                Button(onClick = { scope.launch { scaffoldState.bottomSheetState.collapse() } }) {
+                    Text("Click to collapse sheet")
+                }
+            }
+        },
+        sheetPeekHeight = 128.dp,
+        scaffoldState = scaffoldState,
+        topBar = {
+            TopAppBar(
+                title = { Text(stringResource(id = R.string.shipping_label_create_title)) },
+                navigationIcon = {
+                    IconButton({}) {
+                        Icon(
+                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back)
+                        )
+                    }
+                },
+                backgroundColor = colorResource(id = R.color.color_toolbar),
+                elevation = 0.dp,
+            )
+        },
+    ) { innerPadding ->
+        Surface(
+            modifier
+                .fillMaxSize()
+                .padding(innerPadding)
+        ) {
+            Column(modifier.verticalScroll(rememberScrollState())) {
+                val isExpanded = remember { mutableStateOf(false) }
+                ShippingProductsCard(
+                    shippableItems = ShippableItems(
+                        shippableItems = generateItems(6),
+                        totalWeight = "8.5kg",
+                        totalPrice = "$92.78"
+                    ),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(16.dp),
+                    isExpanded = isExpanded.value,
+                    onExpand = { isExpanded.value = it }
+                )
+                HazmatCard(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(start = 4.dp, end = 8.dp)
+                )
+                PackageCard(modifier = Modifier.padding(16.dp))
+            }
+        }
     }
 }
 

From b8c98d62578c93d49a424916c938150d0b5f80ba Mon Sep 17 00:00:00 2001
From: Alejo <alejandro.torres.veiga@automattic.com>
Date: Wed, 23 Oct 2024 16:47:52 -0600
Subject: [PATCH 2/4] add resources

---
 WooCommerce/src/main/res/values/strings.xml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/WooCommerce/src/main/res/values/strings.xml b/WooCommerce/src/main/res/values/strings.xml
index c6a448ff6f4..62d943f4528 100644
--- a/WooCommerce/src/main/res/values/strings.xml
+++ b/WooCommerce/src/main/res/values/strings.xml
@@ -1260,6 +1260,8 @@
     <string name="shipping_label_select_package_button">Select a Package</string>
     <string name="shipping_label_select_package_title">Select a package to get shipping rates</string>
     <string name="shipping_label_select_package_description">Enter your package\'s dimensions or pick a carrier package option to see the available shipping rates.</string>
+    <string name="shipping_label_shipment_details_title">Shipment details</string>
+    <string name="shipping_label_shipment_details_order_details">Order details</string>
 
     <!--
     Shipping label package creation labels

From 35f62a8f45037558d6da8919b948dd9915ebde9c Mon Sep 17 00:00:00 2001
From: Alejo <alejandro.torres.veiga@automattic.com>
Date: Wed, 23 Oct 2024 16:48:31 -0600
Subject: [PATCH 3/4] make round corner box public

---
 .../ui/orders/wooshippinglabels/WooShippingProductsCard.kt   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingProductsCard.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingProductsCard.kt
index 2231503a3b9..374d89ed31b 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingProductsCard.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingProductsCard.kt
@@ -311,7 +311,8 @@ private fun ShippingProductDetails(
             if (weight.isNotEmpty()) {
                 ShippingProductInfo(
                     summary = weight,
-                    modifier = Modifier.padding(top = dimensionResource(R.dimen.minor_50)))
+                    modifier = Modifier.padding(top = dimensionResource(R.dimen.minor_50))
+                )
             }
         }
     }
@@ -388,7 +389,7 @@ internal fun QuantityBadgePreview() {
 }
 
 @Composable
-private fun RoundedCornerBoxWithBorder(
+fun RoundedCornerBoxWithBorder(
     modifier: Modifier = Modifier,
     content: @Composable BoxScope.() -> Unit = {},
 ) {

From d86f1a146836440f56d270fc2a011ad8ed7fd276 Mon Sep 17 00:00:00 2001
From: Alejo <alejandro.torres.veiga@automattic.com>
Date: Wed, 23 Oct 2024 16:48:49 -0600
Subject: [PATCH 4/4] create shipment details

---
 .../wooshippinglabels/ShipmentDetails.kt      | 301 ++++++++++++++++++
 .../WooShippingLabelCreationScreen.kt         |  30 +-
 2 files changed, 303 insertions(+), 28 deletions(-)
 create mode 100644 WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/ShipmentDetails.kt

diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/ShipmentDetails.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/ShipmentDetails.kt
new file mode 100644
index 00000000000..2cad8d9342f
--- /dev/null
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/ShipmentDetails.kt
@@ -0,0 +1,301 @@
+package com.woocommerce.android.ui.orders.wooshippinglabels
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.BottomSheetScaffoldState
+import androidx.compose.material.Divider
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.MoreHoriz
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+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.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.constraintlayout.compose.ConstraintLayout
+import com.woocommerce.android.R
+import com.woocommerce.android.model.Address
+import com.woocommerce.android.model.AmbiguousLocation
+import com.woocommerce.android.model.Location
+import com.woocommerce.android.ui.compose.component.BottomSheetHandle
+import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
+import kotlinx.coroutines.launch
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun ShipmentDetails(
+    scaffoldState: BottomSheetScaffoldState,
+    modifier: Modifier = Modifier,
+) {
+    val scope = rememberCoroutineScope()
+    Column(
+        modifier
+            .clickable(
+                onClick = {
+                    scope.launch {
+                        if (scaffoldState.bottomSheetState.isCollapsed) {
+                            scaffoldState.bottomSheetState.expand()
+                        } else {
+                            scaffoldState.bottomSheetState.collapse()
+                        }
+                    }
+                },
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null
+            )
+            .fillMaxWidth()
+            .padding(dimensionResource(R.dimen.minor_100)),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        BottomSheetHandle(modifier = Modifier.padding(top = dimensionResource(R.dimen.minor_100)))
+        AnimatedVisibility(visible = scaffoldState.bottomSheetState.isCollapsed) {
+            Text(
+                text = stringResource(R.string.shipping_label_shipment_details_title),
+                color = MaterialTheme.colors.primary,
+                modifier = Modifier
+                    .padding(top = dimensionResource(R.dimen.minor_100))
+            )
+        }
+    }
+    Column(
+        Modifier
+            .fillMaxSize()
+            .padding(dimensionResource(R.dimen.major_200))
+    ) {
+        OrderDetailsSection(
+            shipFrom = getShipFrom(),
+            shipTo = getShipTo()
+        )
+    }
+}
+
+@Composable
+private fun ShipmentDetailsSectionTitle(
+    title: String,
+    modifier: Modifier = Modifier
+) {
+    Text(
+        text = title.uppercase(),
+        style = MaterialTheme.typography.body1,
+        color = colorResource(R.color.color_on_surface_medium),
+        modifier = modifier
+    )
+}
+
+@Preview
+@Composable
+private fun ShipmentDetailsSectionTitlePreview() {
+    WooThemeWithBackground {
+        ShipmentDetailsSectionTitle(title = "Shipment Details")
+    }
+}
+
+@Composable
+private fun OrderDetailsSection(
+    modifier: Modifier = Modifier,
+    shipFrom: Address,
+    shipTo: Address,
+) {
+    Column(modifier.fillMaxWidth()) {
+        ShipmentDetailsSectionTitle(
+            title = stringResource(R.string.shipping_label_shipment_details_order_details)
+        )
+        Spacer(modifier = Modifier.height(dimensionResource(R.dimen.major_100)))
+        AddressSection(
+            shipFrom = shipFrom,
+            shipTo = shipTo
+        )
+    }
+}
+
+@Composable
+@Suppress("DestructuringDeclarationWithTooManyEntries")
+private fun AddressSection(
+    shipFrom: Address,
+    shipTo: Address,
+    modifier: Modifier = Modifier
+) {
+    RoundedCornerBoxWithBorder(modifier.fillMaxWidth()) {
+        ConstraintLayout {
+            val (
+                shipFromLabel,
+                shipFromValue,
+                shipFromSelect,
+                shipToLabel,
+                shipToValue,
+                shipToEdit,
+                divider
+            ) = createRefs()
+
+            val barrier = createEndBarrier(shipFromLabel, shipToLabel)
+
+            Text(
+                text = stringResource(id = R.string.orderdetail_shipping_label_item_shipfrom),
+                modifier = Modifier
+                    .constrainAs(shipFromLabel) {
+                        top.linkTo(parent.top)
+                        start.linkTo(parent.start)
+                    }
+                    .padding(
+                        start = dimensionResource(R.dimen.major_100),
+                        top = dimensionResource(R.dimen.major_100),
+                        bottom = dimensionResource(R.dimen.major_100)
+                    )
+
+            )
+            Text(
+                text = shipFrom.toShippingFromString().uppercase(),
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                color = MaterialTheme.colors.primary,
+                modifier = Modifier
+                    .constrainAs(shipFromValue) {
+                        top.linkTo(shipFromLabel.top)
+                        start.linkTo(shipFromLabel.end)
+                        end.linkTo(shipFromSelect.start)
+                        width = androidx.constraintlayout.compose.Dimension.fillToConstraints
+                    }
+                    .padding(
+                        top = dimensionResource(R.dimen.major_100),
+                        bottom = dimensionResource(R.dimen.major_100),
+                        start = dimensionResource(R.dimen.major_100),
+                        end = dimensionResource(R.dimen.minor_100)
+                    )
+            )
+            IconButton(
+                onClick = { },
+                modifier = Modifier
+                    .constrainAs(shipFromSelect) {
+                        top.linkTo(shipFromLabel.top)
+                        end.linkTo(parent.end)
+                        bottom.linkTo(shipFromLabel.bottom)
+                    }
+                    .padding(
+                        end = dimensionResource(R.dimen.minor_100)
+                    )
+            ) {
+                Icon(
+                    imageVector = Icons.Filled.MoreHoriz,
+                    contentDescription = null,
+                    tint = MaterialTheme.colors.primary
+                )
+            }
+            Divider(
+                modifier = Modifier.constrainAs(divider) {
+                    top.linkTo(shipFromLabel.bottom)
+                    start.linkTo(parent.start)
+                }
+            )
+            Text(
+                text = stringResource(id = R.string.orderdetail_shipping_label_item_shipto),
+                modifier = Modifier
+                    .constrainAs(shipToLabel) {
+                        top.linkTo(divider.bottom)
+                        start.linkTo(shipFromLabel.start)
+                    }
+                    .padding(
+                        start = dimensionResource(R.dimen.major_100),
+                        top = dimensionResource(R.dimen.major_100),
+                        bottom = dimensionResource(R.dimen.major_100)
+                    )
+            )
+            Text(
+                text = shipTo.toString(),
+                modifier = Modifier
+                    .constrainAs(shipToValue) {
+                        top.linkTo(shipToLabel.top)
+                        start.linkTo(barrier)
+                        end.linkTo(shipToEdit.start)
+                        width = androidx.constraintlayout.compose.Dimension.fillToConstraints
+                    }
+                    .padding(
+                        top = dimensionResource(R.dimen.major_100),
+                        bottom = dimensionResource(R.dimen.major_100),
+                        start = dimensionResource(R.dimen.major_100),
+                        end = dimensionResource(R.dimen.minor_100)
+                    )
+            )
+            IconButton(
+                onClick = { },
+                modifier = Modifier
+                    .constrainAs(shipToEdit) {
+                        top.linkTo(shipToLabel.top)
+                        end.linkTo(parent.end)
+                    }
+                    .padding(
+                        top = dimensionResource(R.dimen.major_100),
+                        end = dimensionResource(R.dimen.minor_100)
+                    )
+            ) {
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_edit_pencil),
+                    contentDescription = null,
+                    tint = MaterialTheme.colors.primary,
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun AddressSectionPreview() {
+    WooThemeWithBackground {
+        Box(modifier = Modifier.padding(dimensionResource(R.dimen.major_100))) {
+            AddressSection(
+                shipFrom = getShipFrom(),
+                shipTo = getShipTo()
+            )
+        }
+    }
+}
+
+private fun getShipFrom() = Address(
+    firstName = "first name",
+    lastName = "last name",
+    company = "Company",
+    phone = "",
+    address1 = "A huge address that should be truncated",
+    address2 = "",
+    city = "City",
+    postcode = "",
+    email = "email",
+    country = Location("US", "USA"),
+    state = AmbiguousLocation.Defined(Location("CA", "California", "USA"))
+)
+
+private fun getShipTo() = Address(
+    firstName = "first name",
+    lastName = "last name",
+    company = "Company",
+    phone = "",
+    address1 = "Another Address",
+    address2 = "",
+    city = "City",
+    postcode = "",
+    email = "email",
+    country = Location("US", "USA"),
+    state = AmbiguousLocation.Defined(Location("CA", "California", "USA"))
+)
+
+fun Address.toShippingFromString() = this.getEnvelopeAddress().replace("\n", " ")
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 46d9d7ed441..3e3d83750f8 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
@@ -3,19 +3,15 @@ package com.woocommerce.android.ui.orders.wooshippinglabels
 import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 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.BottomSheetScaffold
-import androidx.compose.material.Button
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
@@ -29,7 +25,6 @@ import androidx.compose.material.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.colorResource
@@ -45,39 +40,18 @@ import com.woocommerce.android.R
 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 kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun WooShippingLabelCreationScreen(
     modifier: Modifier = Modifier
 ) {
-    val scope = rememberCoroutineScope()
     val scaffoldState = rememberBottomSheetScaffoldState()
     BottomSheetScaffold(
         sheetContent = {
-            Box(
-                Modifier
-                    .fillMaxWidth()
-                    .height(128.dp),
-                contentAlignment = Alignment.Center
-            ) {
-                Text("Swipe up to expand sheet")
-            }
-            Column(
-                Modifier
-                    .fillMaxSize()
-                    .padding(64.dp),
-                horizontalAlignment = Alignment.CenterHorizontally
-            ) {
-                Text("Sheet content")
-                Spacer(Modifier.height(20.dp))
-                Button(onClick = { scope.launch { scaffoldState.bottomSheetState.collapse() } }) {
-                    Text("Click to collapse sheet")
-                }
-            }
+            ShipmentDetails(scaffoldState)
         },
-        sheetPeekHeight = 128.dp,
+        sheetPeekHeight = 64.dp,
         scaffoldState = scaffoldState,
         topBar = {
             TopAppBar(