Skip to content

Commit ea4a483

Browse files
kidinovkidinov
authored
Merge pull request #14783 from woocommerce/woomob-1534-woo-poshistorical-orders-apply-final-design-to-the-order
[Woo POS][Historical Orders] Apply final design to the order details
2 parents b1afe27 + 74f1dfb commit ea4a483

File tree

7 files changed

+378
-904
lines changed

7 files changed

+378
-904
lines changed

‎Add_WooPosEmptyScreen_component_and_refactor_empty_list_handling.patch‎

Lines changed: 0 additions & 558 deletions
This file was deleted.

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersDetails.kt‎

Lines changed: 268 additions & 251 deletions
Large diffs are not rendered by default.

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersLoadingState.kt‎

Lines changed: 48 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,11 @@ import androidx.compose.runtime.Composable
2222
import androidx.compose.ui.Alignment
2323
import androidx.compose.ui.Modifier
2424
import androidx.compose.ui.draw.clip
25+
import androidx.compose.ui.res.stringResource
2526
import androidx.compose.ui.text.font.FontWeight
2627
import androidx.compose.ui.unit.dp
28+
import androidx.constraintlayout.compose.ConstraintLayout
29+
import com.woocommerce.android.R
2730
import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
2831
import com.woocommerce.android.ui.woopos.common.composeui.component.ShadowType
2932
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosCard
@@ -119,12 +122,7 @@ private fun OrdersListLoadingPane(modifier: Modifier = Modifier) {
119122
contentPadding = PaddingValues(WooPosSpacing.Medium.value)
120123
) {
121124
items(7) {
122-
WooPosCard(
123-
shape = RoundedCornerShape(WooPosCornerRadius.Medium.value),
124-
backgroundColor = MaterialTheme.colorScheme.surfaceContainerLowest,
125-
elevation = WooPosElevation.Medium,
126-
shadowType = ShadowType.Soft,
127-
) {
125+
WooPosCard(shadowType = ShadowType.Soft) {
128126
WooPosOrdersOrderLoadingRow()
129127
}
130128
}
@@ -151,7 +149,7 @@ private fun OrderDetailsLoadingPane(modifier: Modifier = Modifier) {
151149
.clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
152150
)
153151

154-
Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value))
152+
Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))
155153

156154
WooPosShimmerBox(
157155
modifier = Modifier
@@ -162,15 +160,6 @@ private fun OrderDetailsLoadingPane(modifier: Modifier = Modifier) {
162160

163161
Spacer(modifier = Modifier.height(WooPosSpacing.XSmall.value))
164162

165-
WooPosShimmerBox(
166-
modifier = Modifier
167-
.width(100.dp)
168-
.height(18.dp)
169-
.clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
170-
)
171-
172-
Spacer(modifier = Modifier.height(WooPosSpacing.Small.value))
173-
174163
WooPosShimmerBox(
175164
modifier = Modifier
176165
.width(80.dp)
@@ -187,22 +176,18 @@ private fun OrderDetailsLoadingPane(modifier: Modifier = Modifier) {
187176
)
188177
}
189178

190-
Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value))
179+
Spacer(modifier = Modifier.height(WooPosSpacing.Large.value))
191180

192181
Column(
193182
modifier = Modifier
194183
.fillMaxSize()
195184
) {
196-
WooPosCard(
197-
shape = RoundedCornerShape(WooPosCornerRadius.Medium.value),
198-
elevation = WooPosElevation.Medium,
199-
shadowType = ShadowType.Soft,
200-
) {
185+
WooPosCard(shadowType = ShadowType.Soft) {
201186
Column(
202187
modifier = Modifier.padding(WooPosSpacing.Medium.value)
203188
) {
204189
WooPosText(
205-
text = "Products",
190+
text = stringResource(R.string.woopos_orders_details_products_title),
206191
style = WooPosTypography.BodyXLarge,
207192
color = MaterialTheme.colorScheme.onSurface,
208193
fontWeight = FontWeight.Bold
@@ -214,14 +199,14 @@ private fun OrderDetailsLoadingPane(modifier: Modifier = Modifier) {
214199
ProductLoadingItem()
215200
if (it < 2) {
216201
Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))
217-
HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant,)
202+
HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant)
218203
Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))
219204
}
220205
}
221206
}
222207
}
223208

224-
Spacer(modifier = Modifier.height(WooPosSpacing.Large.value))
209+
Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))
225210

226211
WooPosCard(
227212
shape = RoundedCornerShape(WooPosCornerRadius.Medium.value),
@@ -232,7 +217,7 @@ private fun OrderDetailsLoadingPane(modifier: Modifier = Modifier) {
232217
modifier = Modifier.padding(WooPosSpacing.Medium.value)
233218
) {
234219
WooPosText(
235-
text = "Totals",
220+
text = stringResource(R.string.woopos_orders_details_totals_title),
236221
style = WooPosTypography.BodyXLarge,
237222
color = MaterialTheme.colorScheme.onSurface,
238223
fontWeight = FontWeight.Bold
@@ -257,42 +242,56 @@ private fun OrderDetailsLoadingPane(modifier: Modifier = Modifier) {
257242
}
258243

259244
@Composable
245+
@Suppress("DestructuringDeclarationWithTooManyEntries")
260246
private fun ProductLoadingItem() {
261-
Row(
262-
modifier = Modifier.fillMaxWidth(),
263-
horizontalArrangement = Arrangement.spacedBy(WooPosSpacing.Medium.value),
264-
verticalAlignment = Alignment.CenterVertically
247+
ConstraintLayout(
248+
modifier = Modifier
249+
.fillMaxWidth()
250+
.padding(vertical = WooPosSpacing.Small.value)
265251
) {
252+
val (image, nameShimmer, qtyShimmer, totalShimmer) = createRefs()
253+
266254
WooPosShimmerBox(
267255
modifier = Modifier
268-
.size(48.dp)
256+
.size(56.dp)
269257
.clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
258+
.constrainAs(image) {
259+
top.linkTo(parent.top)
260+
start.linkTo(parent.start)
261+
}
270262
)
271263

272-
Column(
273-
modifier = Modifier.weight(1f),
274-
verticalArrangement = Arrangement.spacedBy(WooPosSpacing.XSmall.value)
275-
) {
276-
WooPosShimmerBox(
277-
modifier = Modifier
278-
.fillMaxWidth(0.6f)
279-
.height(16.dp)
280-
.clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
281-
)
282-
Spacer(modifier = Modifier.height(WooPosSpacing.XSmall.value))
283-
WooPosShimmerBox(
284-
modifier = Modifier
285-
.fillMaxWidth(0.3f)
286-
.height(14.dp)
287-
.clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
288-
)
289-
}
264+
WooPosShimmerBox(
265+
modifier = Modifier
266+
.width(120.dp)
267+
.height(22.dp)
268+
.clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
269+
.constrainAs(nameShimmer) {
270+
top.linkTo(image.top)
271+
start.linkTo(image.end, margin = WooPosSpacing.Medium.value)
272+
}
273+
)
274+
275+
WooPosShimmerBox(
276+
modifier = Modifier
277+
.width(80.dp)
278+
.height(18.dp)
279+
.clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
280+
.constrainAs(qtyShimmer) {
281+
bottom.linkTo(image.bottom)
282+
start.linkTo(nameShimmer.start)
283+
}
284+
)
290285

291286
WooPosShimmerBox(
292287
modifier = Modifier
293288
.width(60.dp)
294289
.height(18.dp)
295290
.clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
291+
.constrainAs(totalShimmer) {
292+
top.linkTo(nameShimmer.top)
293+
end.linkTo(parent.end)
294+
}
296295
)
297296
}
298297
}

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersScreen.kt‎

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -163,14 +163,14 @@ private fun OrdersContent(
163163
modifier = Modifier
164164
.weight(0.3f)
165165
.fillMaxHeight()
166-
.background(MaterialTheme.colorScheme.surface)
166+
.background(MaterialTheme.colorScheme.surfaceBright)
167167
)
168168

169169
WooPosOrderDetails(
170170
modifier = Modifier
171171
.weight(0.7f)
172172
.fillMaxHeight()
173-
.background(MaterialTheme.colorScheme.surfaceContainerLow),
173+
.background(MaterialTheme.colorScheme.surface),
174174
details = state.selectedDetails,
175175
onEmailReceiptButtonClicked = onEmailReceiptButtonClicked
176176
)
@@ -340,7 +340,7 @@ private fun OrdersList(
340340

341341
Spacer(Modifier.height(WooPosSpacing.Small.value))
342342

343-
OrderStatusBadge(item.status)
343+
WooPosOrdersStatusBadge(item.status)
344344
}
345345

346346
WooPosText(
@@ -409,37 +409,6 @@ private fun OrdersPaginationErrorRow(onPaginationErrorTryAgain: () -> Unit) {
409409
)
410410
}
411411

412-
@Composable
413-
fun OrderStatusBadge(status: PosOrderStatus) {
414-
val bgColor = when (status.colorKey) {
415-
OrderStatusColorKey.COMPLETED -> WooPosTheme.colors.infoLowest
416-
OrderStatusColorKey.FAILED -> WooPosTheme.colors.errorLowest
417-
OrderStatusColorKey.PROCESSING,
418-
OrderStatusColorKey.ON_HOLD,
419-
OrderStatusColorKey.OTHER -> WooPosTheme.colors.default
420-
}
421-
422-
val textColor = when (status.colorKey) {
423-
OrderStatusColorKey.COMPLETED -> WooPosTheme.colors.onInfoLowest
424-
OrderStatusColorKey.FAILED -> WooPosTheme.colors.onErrorLowest
425-
OrderStatusColorKey.PROCESSING,
426-
OrderStatusColorKey.ON_HOLD,
427-
OrderStatusColorKey.OTHER -> WooPosTheme.colors.onDefault
428-
}
429-
430-
WooPosText(
431-
text = status.text,
432-
style = WooPosTypography.BodySmall,
433-
color = textColor,
434-
maxLines = 1,
435-
overflow = TextOverflow.Ellipsis,
436-
modifier = Modifier
437-
.clip(RoundedCornerShape(WooPosSpacing.Small.value))
438-
.background(bgColor)
439-
.padding(horizontal = WooPosSpacing.Small.value, vertical = WooPosSpacing.XSmall.value)
440-
)
441-
}
442-
443412
@WooPosPreview
444413
@Composable
445414
fun WooPosOrdersScreenPreview() {

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersStatusBadge.kt‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
package com.woocommerce.android.ui.woopos.orders
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.padding
5+
import androidx.compose.foundation.shape.RoundedCornerShape
6+
import androidx.compose.runtime.Composable
7+
import androidx.compose.ui.Modifier
8+
import androidx.compose.ui.draw.clip
9+
import androidx.compose.ui.text.style.TextOverflow
10+
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosText
11+
import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
12+
import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
13+
import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
14+
15+
@Composable
16+
fun WooPosOrdersStatusBadge(status: PosOrderStatus) {
17+
val bgColor = when (status.colorKey) {
18+
OrderStatusColorKey.COMPLETED -> WooPosTheme.colors.infoLowest
19+
OrderStatusColorKey.FAILED -> WooPosTheme.colors.errorLowest
20+
OrderStatusColorKey.PROCESSING,
21+
OrderStatusColorKey.ON_HOLD,
22+
OrderStatusColorKey.OTHER -> WooPosTheme.colors.default
23+
}
24+
25+
val textColor = when (status.colorKey) {
26+
OrderStatusColorKey.COMPLETED -> WooPosTheme.colors.onInfoLowest
27+
OrderStatusColorKey.FAILED -> WooPosTheme.colors.onErrorLowest
28+
OrderStatusColorKey.PROCESSING,
29+
OrderStatusColorKey.ON_HOLD,
30+
OrderStatusColorKey.OTHER -> WooPosTheme.colors.onDefault
31+
}
32+
33+
WooPosText(
34+
text = status.text,
35+
style = WooPosTypography.BodySmall,
36+
color = textColor,
37+
maxLines = 1,
38+
overflow = TextOverflow.Ellipsis,
39+
modifier = Modifier
40+
.clip(RoundedCornerShape(WooPosSpacing.Small.value))
41+
.background(bgColor)
42+
.padding(WooPosSpacing.Small.value)
43+
)
44+
}

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersViewModel.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,7 @@ class WooPosOrdersViewModel @Inject constructor(
336336
atWord = resourceProvider.getString(R.string.date_time_connector)
337337
),
338338
total = formatPrice(order.total),
339-
customerEmail = order.customer?.email,
339+
customerEmail = order.customer?.email ?: order.billingAddress.email,
340340
isSelected = order.id == selectedId,
341341
status = PosOrderStatus(
342342
text = statusText,
@@ -392,7 +392,7 @@ class WooPosOrdersViewModel @Inject constructor(
392392
dateTime = order.dateCreated.formatToMMMddYYYYAtHHmm(
393393
atWord = resourceProvider.getString(R.string.date_time_connector)
394394
),
395-
customerEmail = order.customer?.email,
395+
customerEmail = order.customer?.email ?: order.billingAddress.email,
396396
status = status,
397397
lineItems = lineItems,
398398
breakdown = breakdown,

‎WooCommerce/src/test/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersViewModelTest.kt‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ package com.woocommerce.android.ui.woopos.orders
22

33
import com.woocommerce.android.R
44
import com.woocommerce.android.model.Order
5+
import com.woocommerce.android.model.Refund
56
import com.woocommerce.android.ui.orders.OrderTestUtils
67
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosSearchInputState
78
import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosSearchUIEvent
@@ -26,6 +27,8 @@ import org.mockito.kotlin.any
2627
import org.mockito.kotlin.times
2728
import org.mockito.kotlin.verify
2829
import org.mockito.kotlin.whenever
30+
import java.math.BigDecimal
31+
import java.util.Date
2932
import java.util.Locale
3033

3134
@OptIn(ExperimentalCoroutinesApi::class)
@@ -39,10 +42,10 @@ class WooPosOrdersViewModelTest {
3942
private lateinit var viewModel: WooPosOrdersViewModel
4043

4144
private fun order(id: Long = 1L): Order = OrderTestUtils.generateTestOrder(orderId = id)
42-
private val resourceProvider: ResourceProvider = org.mockito.kotlin.mock()
43-
private val getProductById: WooPosGetProductById = org.mockito.kotlin.mock()
44-
private val formatPrice: WooPosFormatPrice = org.mockito.kotlin.mock()
45-
private val getOrderRefunds: WooPosGetOrderRefundsByOrderId = org.mockito.kotlin.mock()
45+
private val resourceProvider: ResourceProvider = mock()
46+
private val getProductById: WooPosGetProductById = mock()
47+
private val formatPrice: WooPosFormatPrice = mock()
48+
private val getOrderRefunds: WooPosGetOrderRefundsByOrderId = mock()
4649
private val providedLocale: Locale = Locale.US
4750

4851
private fun createViewModel(): WooPosOrdersViewModel {
@@ -641,20 +644,20 @@ class WooPosOrdersViewModelTest {
641644
flow { emit(LoadOrdersResult.SuccessRemote(listOf(testOrder))) }
642645
)
643646

644-
val refund1 = com.woocommerce.android.model.Refund(
647+
val refund1 = Refund(
645648
id = 1,
646-
dateCreated = java.util.Date(),
647-
amount = java.math.BigDecimal("10.00"),
649+
dateCreated = Date(),
650+
amount = BigDecimal("10.00"),
648651
reason = null,
649652
automaticGatewayRefund = false,
650653
items = emptyList(),
651654
shippingLines = emptyList(),
652655
feeLines = emptyList()
653656
)
654-
val refund2 = com.woocommerce.android.model.Refund(
657+
val refund2 = Refund(
655658
id = 2,
656-
dateCreated = java.util.Date(),
657-
amount = java.math.BigDecimal("5.00"),
659+
dateCreated = Date(),
660+
amount = BigDecimal("5.00"),
658661
reason = null,
659662
automaticGatewayRefund = false,
660663
items = emptyList(),

0 commit comments

Comments
 (0)