Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Creating shipping label: Total card #12831

Merged
merged 6 commits into from
Oct 25, 2024
Merged

Creating shipping label: Total card #12831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
49a1024
add shipping line summary
Oct 24, 2024
175d5b0
add items icon
Oct 24, 2024
a45386c
add inner modifier
Oct 24, 2024
5e5556d
add shipping line icon
Oct 24, 2024
b33404e
add total card
Oct 24, 2024
849d6ba
Merge remote-tracking branch 'origin/trunk' into issue/12281-creating…
Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 148 additions & 5 deletions ...ce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/ShipmentDetails.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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)
Expand Down Expand Up @@ -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)))
}
}

Expand All @@ -112,18 +121,29 @@ private fun ShipmentDetailsSectionTitlePreview() {

@Composable
private fun OrderDetailsSection(
modifier: Modifier = Modifier,
shipFrom: Address,
shipTo: Address,
totalItems: Int,
totalItemsCost: String,
shippingLines: List<ShippingLineSummary>,
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))
)
}
}
Expand Down Expand Up @@ -270,6 +290,117 @@ private fun AddressSectionPreview() {
}
}

@Composable
private fun TotalCard(
totalItems: Int,
totalItemsCost: String,
shippingLines: List<ShippingLineSummary>,
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<ShippingLineSummary>,
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",
Expand Down Expand Up @@ -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
)
9 changes: 6 additions & 3 deletions ...ain/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingProductsCard.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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))
Expand All @@ -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()
}
Expand Down
9 changes: 9 additions & 0 deletions WooCommerce/src/main/res/drawable/ic_shipping_label_items.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="19dp"
android:viewportWidth="20"
android:viewportHeight="19">
<path
android:pathData="M4.771,18.163C3.872,18.163 3.186,17.931 2.712,17.467C2.244,17.008 2.009,16.329 2.009,15.431V5.316H3.306V15.482C3.306,16.454 3.794,16.939 4.771,16.939H15.222C15.686,16.939 16.045,16.815 16.299,16.566C16.553,16.317 16.68,15.955 16.68,15.482V5.316H17.983V15.431C17.983,16.329 17.747,17.008 17.273,17.467C16.804,17.931 16.118,18.163 15.215,18.163H4.771ZM6.836,9.688C6.65,9.688 6.499,9.63 6.382,9.513C6.27,9.395 6.213,9.239 6.213,9.044V8.758C6.213,8.563 6.27,8.409 6.382,8.297C6.499,8.18 6.65,8.121 6.836,8.121H13.157C13.347,8.121 13.498,8.18 13.611,8.297C13.728,8.409 13.787,8.563 13.787,8.758V9.044C13.787,9.239 13.728,9.395 13.611,9.513C13.498,9.63 13.347,9.688 13.157,9.688H6.836ZM2.317,5.909C1.775,5.909 1.357,5.75 1.064,5.433C0.776,5.116 0.632,4.688 0.632,4.151V2.708C0.632,2.352 0.701,2.042 0.837,1.778C0.974,1.515 1.167,1.312 1.416,1.17C1.67,1.024 1.97,0.951 2.317,0.951H17.676C18.218,0.951 18.633,1.109 18.921,1.427C19.214,1.744 19.36,2.171 19.36,2.708V4.151C19.36,4.688 19.214,5.116 18.921,5.433C18.633,5.75 18.218,5.909 17.676,5.909H2.317ZM2.617,4.686H17.383C17.622,4.686 17.795,4.63 17.903,4.518C18.01,4.4 18.064,4.22 18.064,3.976V2.877C18.064,2.638 18.01,2.462 17.903,2.35C17.795,2.232 17.622,2.174 17.383,2.174H2.617C2.378,2.174 2.202,2.232 2.09,2.35C1.982,2.462 1.929,2.638 1.929,2.877V3.976C1.929,4.22 1.982,4.4 2.09,4.518C2.202,4.63 2.378,4.686 2.617,4.686Z"

Check warning

Code scanning / Android Lint

Long vector paths Warning

Very long vector path (1369 characters), which is bad for performance. Considering reducing precision, removing minor details or rasterizing vector.
android:fillColor="#000000"/>
</vector>
9 changes: 9 additions & 0 deletions WooCommerce/src/main/res/drawable/ic_shipping_label_shipping_line.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="28dp"
android:height="21dp"
android:viewportWidth="28"
android:viewportHeight="21">
<path
android:pathData="M2.896,18.115C2.062,18.115 1.429,17.898 1,17.463C0.57,17.034 0.355,16.404 0.355,15.574V3.335C0.355,2.5 0.57,1.868 1,1.438C1.429,1.008 2.062,0.793 2.896,0.793H16.6C17.435,0.793 18.067,1.011 18.497,1.445C18.927,1.875 19.142,2.505 19.142,3.335V16.467L17.845,17.207V3.357C17.845,2.937 17.735,2.622 17.516,2.412C17.301,2.197 16.988,2.09 16.578,2.09H2.918C2.503,2.09 2.188,2.197 1.974,2.412C1.759,2.622 1.651,2.937 1.651,3.357V15.544C1.651,15.964 1.759,16.279 1.974,16.489C2.188,16.704 2.503,16.812 2.918,16.812H4.808V18.115H2.896ZM18.409,7.319V6.016H21.778C22.218,6.016 22.596,6.079 22.914,6.206C23.236,6.328 23.529,6.536 23.792,6.829L27.015,10.454C27.176,10.635 27.303,10.813 27.396,10.989C27.489,11.16 27.552,11.35 27.586,11.56C27.625,11.765 27.645,12.009 27.645,12.292V15.574C27.645,16.404 27.43,17.034 27,17.463C26.571,17.898 25.941,18.115 25.111,18.115H23.683V16.812H25.081C25.501,16.812 25.816,16.704 26.026,16.489C26.241,16.279 26.349,15.964 26.349,15.544V12.263C26.349,12.083 26.315,11.902 26.246,11.721C26.183,11.536 26.085,11.37 25.953,11.223L22.928,7.825C22.748,7.624 22.56,7.49 22.364,7.422C22.169,7.353 21.942,7.319 21.683,7.319H18.409ZM20.87,12.307C20.646,12.307 20.465,12.241 20.328,12.109C20.196,11.977 20.13,11.797 20.13,11.567V8.279H21.441C21.593,8.279 21.729,8.31 21.852,8.374C21.979,8.437 22.093,8.525 22.196,8.638L25.008,11.802C25.081,11.88 25.138,11.955 25.177,12.029C25.221,12.102 25.243,12.195 25.243,12.307H20.87ZM7.254,20.781C6.815,20.781 6.402,20.698 6.017,20.532C5.636,20.371 5.299,20.144 5.006,19.851C4.713,19.558 4.483,19.219 4.317,18.833C4.156,18.452 4.076,18.042 4.076,17.603C4.076,17.168 4.156,16.758 4.317,16.372C4.483,15.991 4.713,15.657 5.006,15.369C5.299,15.076 5.636,14.846 6.017,14.68C6.402,14.514 6.815,14.431 7.254,14.431C7.689,14.431 8.097,14.514 8.478,14.68C8.863,14.846 9.203,15.076 9.496,15.369C9.789,15.657 10.016,15.991 10.177,16.372C10.343,16.758 10.426,17.168 10.426,17.603C10.426,18.042 10.343,18.452 10.177,18.833C10.016,19.219 9.789,19.558 9.496,19.851C9.203,20.144 8.863,20.371 8.478,20.532C8.097,20.698 7.689,20.781 7.254,20.781ZM7.254,19.675C7.63,19.675 7.975,19.58 8.287,19.39C8.6,19.204 8.849,18.955 9.034,18.642C9.22,18.33 9.313,17.983 9.313,17.603C9.313,17.226 9.22,16.88 9.034,16.562C8.849,16.25 8.6,16.001 8.287,15.815C7.975,15.63 7.63,15.537 7.254,15.537C6.874,15.537 6.527,15.63 6.214,15.815C5.902,16.001 5.65,16.25 5.46,16.562C5.274,16.88 5.182,17.226 5.182,17.603C5.182,17.983 5.274,18.33 5.46,18.642C5.65,18.955 5.902,19.204 6.214,19.39C6.527,19.58 6.874,19.675 7.254,19.675ZM20.951,20.781C20.511,20.781 20.099,20.698 19.713,20.532C19.332,20.371 18.995,20.144 18.702,19.851C18.414,19.558 18.187,19.219 18.021,18.833C17.855,18.452 17.772,18.042 17.772,17.603C17.772,17.168 17.855,16.758 18.021,16.372C18.187,15.991 18.414,15.657 18.702,15.369C18.995,15.076 19.332,14.846 19.713,14.68C20.099,14.514 20.511,14.431 20.951,14.431C21.39,14.431 21.8,14.514 22.181,14.68C22.567,14.846 22.904,15.076 23.192,15.369C23.485,15.657 23.712,15.991 23.873,16.372C24.039,16.758 24.122,17.168 24.122,17.603C24.122,18.042 24.039,18.452 23.873,18.833C23.712,19.219 23.485,19.558 23.192,19.851C22.904,20.144 22.567,20.371 22.181,20.532C21.8,20.698 21.39,20.781 20.951,20.781ZM20.951,19.675C21.331,19.675 21.678,19.58 21.991,19.39C22.303,19.204 22.55,18.955 22.73,18.642C22.916,18.33 23.009,17.983 23.009,17.603C23.009,17.226 22.916,16.88 22.73,16.562C22.545,16.25 22.296,16.001 21.983,15.815C21.671,15.63 21.327,15.537 20.951,15.537C20.57,15.537 20.223,15.63 19.911,15.815C19.598,16.001 19.349,16.25 19.164,16.562C18.978,16.88 18.885,17.226 18.885,17.603C18.885,17.983 18.978,18.33 19.164,18.642C19.349,18.955 19.598,19.204 19.911,19.39C20.223,19.58 20.57,19.675 20.951,19.675ZM9.818,18.115V16.812H18.46V18.115H9.818Z"
Dismissed Show dismissed Hide dismissed
android:fillColor="#000000"/>
</vector>
Loading