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 index 2cad8d9342f..076abd0c213 100644 --- 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 @@ -6,11 +6,13 @@ 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.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.sizeIn import androidx.compose.material.BottomSheetScaffoldState import androidx.compose.material.Divider import androidx.compose.material.ExperimentalMaterialApi @@ -25,10 +27,12 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalContext 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.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.constraintlayout.compose.ConstraintLayout @@ -38,6 +42,7 @@ 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 com.woocommerce.android.util.StringUtils import kotlinx.coroutines.launch @OptIn(ExperimentalMaterialApi::class) @@ -80,12 +85,16 @@ fun ShipmentDetails( Column( Modifier .fillMaxSize() - .padding(dimensionResource(R.dimen.major_200)) + .padding(top = dimensionResource(R.dimen.major_200)) ) { OrderDetailsSection( shipFrom = getShipFrom(), - shipTo = getShipTo() + shipTo = getShipTo(), + totalItems = 5, + totalItemsCost = "$120.99", + shippingLines = getShippingLines(3) ) + Divider(modifier = Modifier.padding(horizontal = dimensionResource(R.dimen.major_100))) } } @@ -112,18 +121,29 @@ private fun ShipmentDetailsSectionTitlePreview() { @Composable private fun OrderDetailsSection( - modifier: Modifier = Modifier, shipFrom: Address, shipTo: Address, + totalItems: Int, + totalItemsCost: String, + shippingLines: List, + modifier: Modifier = Modifier, ) { Column(modifier.fillMaxWidth()) { ShipmentDetailsSectionTitle( - title = stringResource(R.string.shipping_label_shipment_details_order_details) + title = stringResource(R.string.shipping_label_shipment_details_order_details), + modifier = Modifier.padding(start = dimensionResource(R.dimen.major_100)) ) Spacer(modifier = Modifier.height(dimensionResource(R.dimen.major_100))) AddressSection( shipFrom = shipFrom, - shipTo = shipTo + shipTo = shipTo, + modifier = Modifier.padding(horizontal = dimensionResource(R.dimen.major_100)) + ) + TotalCard( + totalItems = totalItems, + totalItemsCost = totalItemsCost, + shippingLines = shippingLines, + modifier = Modifier.padding(dimensionResource(R.dimen.major_100)) ) } } @@ -270,6 +290,117 @@ private fun AddressSectionPreview() { } } +@Composable +private fun TotalCard( + totalItems: Int, + totalItemsCost: String, + shippingLines: List, + modifier: Modifier = Modifier +) { + Column(modifier) { + ItemsCost(totalItems, totalItemsCost) + ShippingLines(shippingLines) + } +} + +@Composable +private fun ItemsCost( + totalItems: Int, + totalItemsCost: String, + modifier: Modifier = Modifier +) { + val items = StringUtils.getQuantityString( + context = LocalContext.current, + quantity = totalItems, + default = R.string.shipping_label_package_details_items_count_many, + one = R.string.shipping_label_package_details_items_count_one, + ) + TotalItem( + title = items, + amount = totalItemsCost, + iconRes = R.drawable.ic_shipping_label_items, + modifier = modifier + ) +} + +@Preview +@Composable +private fun ItemsCostPreview() { + WooThemeWithBackground { + ItemsCost(totalItems = 2, totalItemsCost = "$12.99") + } +} + +@Composable +private fun ShippingLines( + shippingLines: List, + modifier: Modifier = Modifier +) { + Column(modifier) { + shippingLines.forEach { shippingLine -> + TotalItem( + title = shippingLine.title, + amount = shippingLine.amount, + iconRes = R.drawable.ic_shipping_label_shipping_line + ) + } + } +} + +@Preview +@Composable +private fun ShippingLinesPreview() { + WooThemeWithBackground { + ShippingLines( + shippingLines = getShippingLines() + ) + } +} + +@Composable +private fun TotalItem( + title: String, + amount: String, + iconRes: Int, + modifier: Modifier = Modifier +) { + Row( + modifier = modifier + .fillMaxWidth() + .padding(dimensionResource(R.dimen.minor_50)), + verticalAlignment = Alignment.CenterVertically + ) { + Box( + contentAlignment = Alignment.Center, + modifier = Modifier.sizeIn( + minHeight = dimensionResource(R.dimen.image_minor_80), + minWidth = dimensionResource(R.dimen.image_minor_100) + ) + ) { + Icon( + painter = painterResource(id = iconRes), + contentDescription = null, + tint = MaterialTheme.colors.onSurface + ) + } + Text( + text = title, + style = MaterialTheme.typography.body1, + fontWeight = FontWeight.Bold, + color = MaterialTheme.colors.onSurface, + modifier = Modifier + .weight(1f) + .padding(horizontal = dimensionResource(R.dimen.minor_100)) + ) + Text( + text = amount, + style = MaterialTheme.typography.body1, + color = MaterialTheme.colors.onSurface, + modifier = Modifier.padding(end = dimensionResource(R.dimen.minor_100)) + ) + } +} + private fun getShipFrom() = Address( firstName = "first name", lastName = "last name", @@ -298,4 +429,16 @@ private fun getShipTo() = Address( state = AmbiguousLocation.Defined(Location("CA", "California", "USA")) ) +private fun getShippingLines(number: Int = 3) = List(number) { i -> + ShippingLineSummary( + title = "Shipping $i", + amount = "$12.99" + ) +} + fun Address.toShippingFromString() = this.getEnvelopeAddress().replace("\n", " ") + +data class ShippingLineSummary( + val title: String, + val amount: String +) 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 374d89ed31b..81bfca77b38 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 @@ -221,7 +221,9 @@ private fun ShippingProduct( modifier: Modifier = Modifier, imageUrl: String? = null ) { - RoundedCornerBoxWithBorder(modifier.padding(dimensionResource(R.dimen.major_100))) { + RoundedCornerBoxWithBorder( + innerModifier = modifier.padding(dimensionResource(R.dimen.major_100)) + ) { ShippingProductDetails( title = title, description = description, @@ -391,10 +393,11 @@ internal fun QuantityBadgePreview() { @Composable fun RoundedCornerBoxWithBorder( modifier: Modifier = Modifier, + innerModifier: Modifier = Modifier, content: @Composable BoxScope.() -> Unit = {}, ) { Box( - modifier = Modifier + modifier = modifier .background( color = MaterialTheme.colors.surface, shape = RoundedCornerShape(dimensionResource(R.dimen.corner_radius_large)) @@ -404,7 +407,7 @@ fun RoundedCornerBoxWithBorder( color = colorResource(R.color.divider_color), shape = RoundedCornerShape(dimensionResource(R.dimen.corner_radius_large)) ) - .then(modifier) + .then(innerModifier) ) { content() } diff --git a/WooCommerce/src/main/res/drawable/ic_shipping_label_items.xml b/WooCommerce/src/main/res/drawable/ic_shipping_label_items.xml new file mode 100644 index 00000000000..846fa9b93ae --- /dev/null +++ b/WooCommerce/src/main/res/drawable/ic_shipping_label_items.xml @@ -0,0 +1,9 @@ + + + diff --git a/WooCommerce/src/main/res/drawable/ic_shipping_label_shipping_line.xml b/WooCommerce/src/main/res/drawable/ic_shipping_label_shipping_line.xml new file mode 100644 index 00000000000..7e8febe3bd0 --- /dev/null +++ b/WooCommerce/src/main/res/drawable/ic_shipping_label_shipping_line.xml @@ -0,0 +1,9 @@ + + +