Skip to content

Commit 0539bd2

Browse files
kidinovkidinov
authored
Merge pull request #10562 from woocommerce/10488-tablet-orders-think-what-to-do-with-the-lock-icon
[Tablet Orders] Lock icons as per updated design
2 parents a25900b + 60d2160 commit 0539bd2

File tree

5 files changed

+216
-38
lines changed

5 files changed

+216
-38
lines changed

‎RELEASE-NOTES.txt

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
*** PLEASE FOLLOW THIS FORMAT: [<priority indicator, more stars = higher priority>] <description> [<PR URL>]
2+
17.3
3+
-----
4+
- [*] [Internal] Better displaying of the "locked" state of the buttons on the order creation screen. Fixed bug when it was possible to add "custom amount" even when the order is locked [https://github.com/woocommerce/woocommerce-android/pull/10562]
5+
26
17.2
37
-----
48
- [*] [Internal] Tracking of "country" and "currency" properties for entry and exit of the payments flows [https://github.com/woocommerce/woocommerce-android/pull/10528]

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/OrderCreateEditFormAddInfoButtonsStatusHelper.kt

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
package com.woocommerce.android.ui.orders.creation
2+
3+
import androidx.core.view.isVisible
4+
import com.woocommerce.android.databinding.FragmentOrderCreateEditFormBinding
5+
import javax.inject.Inject
6+
7+
class OrderCreateEditFormAddInfoButtonsStatusHelper @Inject constructor() {
8+
fun changeAddInfoButtonsEnabledState(
9+
binding: FragmentOrderCreateEditFormBinding,
10+
addInfoButtonsStateTransition: AddInfoButtonsStateTransition,
11+
) {
12+
binding.additionalInfoCollectionSection.run {
13+
root.post {
14+
when (val state = addInfoButtonsStateTransition.isAddShippingButtonState) {
15+
is AddInfoButtonsStateTransition.State.Change -> {
16+
addShippingButton.isEnabled = state.enabled
17+
if (addShippingButtonGroup.isVisible) {
18+
addShippingButtonLockIcon.isVisible = !state.enabled
19+
}
20+
}
21+
22+
AddInfoButtonsStateTransition.State.Keep -> {}
23+
}
24+
25+
when (val state = addInfoButtonsStateTransition.isAddCouponButtonState) {
26+
is AddInfoButtonsStateTransition.State.Change -> {
27+
addCouponButton.isEnabled = state.enabled
28+
if (addCouponButtonGroup.isVisible) {
29+
addCouponButtonLockIcon.isVisible = !state.enabled
30+
}
31+
}
32+
33+
AddInfoButtonsStateTransition.State.Keep -> {}
34+
}
35+
36+
when (val state = addInfoButtonsStateTransition.isAddGiftCardButtonState) {
37+
is AddInfoButtonsStateTransition.State.Change -> {
38+
addGiftCardButton.isEnabled = state.enabled
39+
if (addGiftCardButtonGroup.isVisible) {
40+
addGiftCardButtonLockIcon.isVisible = !state.enabled
41+
}
42+
}
43+
44+
AddInfoButtonsStateTransition.State.Keep -> {}
45+
}
46+
}
47+
}
48+
}
49+
}
50+
51+
data class AddInfoButtonsStateTransition(
52+
val isAddShippingButtonState: State = State.Keep,
53+
val isAddCouponButtonState: State = State.Keep,
54+
val isAddGiftCardButtonState: State = State.Keep
55+
) {
56+
sealed class State {
57+
data class Change(val enabled: Boolean) : State()
58+
object Keep : State()
59+
}
60+
}

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/OrderCreateEditFormFragment.kt

Lines changed: 78 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,9 @@ class OrderCreateEditFormFragment :
104104
@Inject
105105
lateinit var uiMessageResolver: UIMessageResolver
106106

107+
@Inject
108+
lateinit var uiHelper: OrderCreateEditFormAddInfoButtonsStatusHelper
109+
107110
private var createOrderMenuItem: MenuItem? = null
108111
private var progressDialog: CustomProgressDialog? = null
109112
private var orderUpdateFailureSnackBar: Snackbar? = null
@@ -363,13 +366,22 @@ class OrderCreateEditFormFragment :
363366
new.isIdle.takeIfNotEqualTo(old?.isIdle) { idle ->
364367
updateProgressBarsVisibility(binding, !idle)
365368
if (new.isEditable) {
366-
binding.additionalInfoCollectionSection.addCouponButton.isEnabled =
367-
new.isCouponButtonEnabled && idle
368-
binding.additionalInfoCollectionSection.addShippingButton.isEnabled =
369-
new.isAddShippingButtonEnabled && idle
369+
uiHelper.changeAddInfoButtonsEnabledState(
370+
binding,
371+
AddInfoButtonsStateTransition(
372+
isAddShippingButtonState = AddInfoButtonsStateTransition.State.Change(
373+
enabled = new.isAddShippingButtonEnabled && idle
374+
),
375+
isAddCouponButtonState = AddInfoButtonsStateTransition.State.Change(
376+
enabled = new.isCouponButtonEnabled && idle
377+
),
378+
isAddGiftCardButtonState = AddInfoButtonsStateTransition.State.Change(
379+
enabled = new.isAddGiftCardButtonEnabled && idle
380+
)
381+
)
382+
)
383+
370384
binding.productsSection.isEachAddButtonEnabled = idle
371-
binding.additionalInfoCollectionSection.addGiftCardButton.isEnabled =
372-
new.isAddGiftCardButtonEnabled && idle
373385
}
374386
}
375387
new.showOrderUpdateSnackbar.takeIfNotEqualTo(old?.showOrderUpdateSnackbar) { show ->
@@ -395,16 +407,37 @@ class OrderCreateEditFormFragment :
395407
}
396408
}
397409
new.isCouponButtonEnabled.takeIfNotEqualTo(old?.isCouponButtonEnabled) {
398-
binding.additionalInfoCollectionSection.addCouponButton.isEnabled = it
410+
uiHelper.changeAddInfoButtonsEnabledState(
411+
binding,
412+
AddInfoButtonsStateTransition(
413+
isAddCouponButtonState = AddInfoButtonsStateTransition.State.Change(
414+
enabled = it
415+
)
416+
)
417+
)
399418
}
400419
new.isAddShippingButtonEnabled.takeIfNotEqualTo(old?.isAddShippingButtonEnabled) {
401-
binding.additionalInfoCollectionSection.addShippingButton.isEnabled = it
420+
uiHelper.changeAddInfoButtonsEnabledState(
421+
binding,
422+
AddInfoButtonsStateTransition(
423+
isAddShippingButtonState = AddInfoButtonsStateTransition.State.Change(
424+
enabled = it
425+
)
426+
)
427+
)
402428
}
403429
new.isAddGiftCardButtonEnabled.takeIfNotEqualTo(old?.isAddGiftCardButtonEnabled) {
404-
binding.additionalInfoCollectionSection.addGiftCardButton.isEnabled = it
430+
uiHelper.changeAddInfoButtonsEnabledState(
431+
binding,
432+
AddInfoButtonsStateTransition(
433+
isAddGiftCardButtonState = AddInfoButtonsStateTransition.State.Change(
434+
enabled = it
435+
)
436+
)
437+
)
405438
}
406439
new.shouldDisplayAddGiftCardButton.takeIfNotEqualTo(old?.shouldDisplayAddGiftCardButton) {
407-
binding.additionalInfoCollectionSection.addGiftCardButton.isVisible = it
440+
binding.additionalInfoCollectionSection.addGiftCardButtonGroup.isVisible = it
408441
}
409442
new.taxRateSelectorButtonState.takeIfNotEqualTo(old?.taxRateSelectorButtonState) {
410443
binding.taxRateSelectorSection.isVisible = it.isShown
@@ -568,27 +601,27 @@ class OrderCreateEditFormFragment :
568601

569602
val firstShipping = newOrderData.shippingLines.firstOrNull { it.methodId != null }
570603
if (firstShipping != null) {
571-
additionalInfoCollectionSection.addShippingButton.hide()
604+
additionalInfoCollectionSection.addShippingButtonGroup.hide()
572605
} else {
573-
additionalInfoCollectionSection.addShippingButton.show()
606+
additionalInfoCollectionSection.addShippingButtonGroup.show()
574607
}
575608
}
576609

577610
private fun OrderCreationAdditionalInfoCollectionSectionBinding.bindGiftCardSubSection(newOrderData: Order) {
578611
when (viewModel.mode) {
579612
is Creation -> bindGiftCardForOrderCreation(newOrderData)
580-
is Edit -> addGiftCardButton.isVisible = false
613+
is Edit -> addGiftCardButtonGroup.isVisible = false
581614
}
582615
}
583616

584617
private fun OrderCreationAdditionalInfoCollectionSectionBinding.bindGiftCardForOrderCreation(
585618
newOrderData: Order
586619
) {
587620
if (newOrderData.selectedGiftCard.isNullOrEmpty()) {
588-
addGiftCardButton.isVisible = viewModel.isGiftCardExtensionEnabled
621+
addGiftCardButtonGroup.isVisible = viewModel.isGiftCardExtensionEnabled
589622
addGiftCardButton.setOnClickListener { viewModel.onAddGiftCardButtonClicked() }
590623
} else {
591-
addGiftCardButton.isVisible = false
624+
addGiftCardButtonGroup.isVisible = false
592625
}
593626
}
594627

@@ -1050,13 +1083,23 @@ class OrderCreateEditFormFragment :
10501083
isLocked = false
10511084
isEachAddButtonEnabled = true
10521085
}
1053-
additionalInfoCollectionSection.apply {
1054-
addShippingButton.isEnabled = true
1055-
addCouponButton.isEnabled = state.isCouponButtonEnabled
1056-
addGiftCardButton.isEnabled = state.isAddGiftCardButtonEnabled
1057-
}
1086+
uiHelper.changeAddInfoButtonsEnabledState(
1087+
this,
1088+
AddInfoButtonsStateTransition(
1089+
isAddShippingButtonState = AddInfoButtonsStateTransition.State.Change(
1090+
enabled = true
1091+
),
1092+
isAddCouponButtonState = AddInfoButtonsStateTransition.State.Change(
1093+
enabled = state.isCouponButtonEnabled
1094+
),
1095+
isAddGiftCardButtonState = AddInfoButtonsStateTransition.State.Change(
1096+
enabled = state.isAddGiftCardButtonEnabled
1097+
)
1098+
)
1099+
)
10581100
customAmountsSection.apply {
10591101
isLocked = false
1102+
isEachAddButtonEnabled = true
10601103
}
10611104
}
10621105

@@ -1066,13 +1109,23 @@ class OrderCreateEditFormFragment :
10661109
isLocked = true
10671110
isEachAddButtonEnabled = false
10681111
}
1069-
additionalInfoCollectionSection.apply {
1070-
addShippingButton.isEnabled = false
1071-
addCouponButton.isEnabled = false
1072-
addGiftCardButton.isEnabled = false
1073-
}
1112+
uiHelper.changeAddInfoButtonsEnabledState(
1113+
this,
1114+
AddInfoButtonsStateTransition(
1115+
isAddShippingButtonState = AddInfoButtonsStateTransition.State.Change(
1116+
enabled = false
1117+
),
1118+
isAddCouponButtonState = AddInfoButtonsStateTransition.State.Change(
1119+
enabled = false
1120+
),
1121+
isAddGiftCardButtonState = AddInfoButtonsStateTransition.State.Change(
1122+
enabled = false
1123+
)
1124+
)
1125+
)
10741126
customAmountsSection.apply {
10751127
isLocked = true
1128+
isEachAddButtonEnabled = false
10761129
}
10771130
}
10781131
}

‎WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/totals/OrderCreateEditTotalsFullView.kt

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import androidx.compose.material.MaterialTheme
3434
import androidx.compose.material.Text
3535
import androidx.compose.material.icons.Icons
3636
import androidx.compose.material.icons.filled.Edit
37+
import androidx.compose.material.icons.filled.Lock
3738
import androidx.compose.runtime.Composable
3839
import androidx.compose.runtime.getValue
3940
import androidx.compose.runtime.mutableStateOf
@@ -438,7 +439,7 @@ private fun TextWithIcon(
438439
)
439440
) {
440441
Icon(
441-
imageVector = Icons.Default.Edit,
442+
imageVector = if (isEnabled) Icons.Default.Edit else Icons.Default.Lock,
442443
contentDescription = null,
443444
tint = colorResource(id = R.color.color_primary),
444445
modifier = Modifier.size(20.dp)
@@ -452,7 +453,7 @@ private fun TextWithIcon(
452453
color = if (isEnabled) {
453454
colorResource(id = R.color.color_primary)
454455
} else {
455-
colorResource(id = R.color.color_on_surface_medium)
456+
colorResource(id = R.color.color_on_surface)
456457
},
457458
text = buildAnnotatedString {
458459
append(text)

‎WooCommerce/src/main/res/layout/order_creation_additional_info_collection_section.xml

Lines changed: 71 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,51 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
33
xmlns:app="http://schemas.android.com/apk/res-auto"
4+
xmlns:tools="http://schemas.android.com/tools"
45
style="@style/Woo.Card"
56
android:layout_width="match_parent"
67
android:layout_height="wrap_content">
78

8-
<LinearLayout
9+
<androidx.constraintlayout.widget.ConstraintLayout
910
android:layout_width="match_parent"
10-
android:layout_height="wrap_content"
11-
android:orientation="vertical">
11+
android:layout_height="wrap_content">
12+
13+
<androidx.constraintlayout.widget.Group
14+
android:id="@+id/add_shipping_button_group"
15+
app:constraint_referenced_ids="add_shipping_button, add_shipping_button_lock_icon"
16+
android:layout_width="wrap_content"
17+
android:layout_height="wrap_content"/>
1218

1319
<com.google.android.material.button.MaterialButton
1420
android:id="@+id/add_shipping_button"
1521
style="@style/Woo.Button.TextButton.Secondary"
16-
android:layout_width="match_parent"
22+
android:layout_width="0dp"
1723
android:layout_height="wrap_content"
1824
android:gravity="start|center_vertical"
1925
android:text="@string/order_creation_add_shipping"
2026
app:icon="@drawable/ic_add"
27+
app:layout_constraintEnd_toStartOf="@+id/add_shipping_button_lock_icon"
2128
app:layout_constraintStart_toStartOf="parent"
22-
app:layout_constraintTop_toBottomOf="@id/tax_label" />
29+
app:layout_constraintTop_toTopOf="parent" />
30+
31+
<ImageView
32+
android:id="@+id/add_shipping_button_lock_icon"
33+
android:layout_width="@dimen/image_minor_40"
34+
android:layout_height="@dimen/image_minor_40"
35+
android:layout_marginHorizontal="@dimen/major_100"
36+
android:contentDescription="@string/order_editing_locked_content_description"
37+
android:src="@drawable/ic_lock"
38+
android:visibility="gone"
39+
app:layout_constraintBottom_toBottomOf="@+id/add_shipping_button"
40+
app:layout_constraintEnd_toEndOf="parent"
41+
app:layout_constraintTop_toTopOf="@+id/add_shipping_button"
42+
tools:visibility="visible" />
43+
44+
<androidx.constraintlayout.widget.Group
45+
android:id="@+id/add_coupon_button_group"
46+
app:constraint_referenced_ids="add_coupon_button, add_coupon_button_lock_icon"
47+
android:layout_width="wrap_content"
48+
android:layout_height="wrap_content"/>
2349

2450
<com.google.android.material.button.MaterialButton
2551
android:id="@+id/add_coupon_button"
@@ -29,18 +55,52 @@
2955
android:gravity="start|center_vertical"
3056
android:text="@string/order_creation_add_coupon"
3157
app:icon="@drawable/ic_add"
32-
app:layout_constraintLeft_toLeftOf="parent"
33-
app:layout_constraintTop_toTopOf="parent" />
58+
app:layout_constraintEnd_toStartOf="@+id/add_coupon_button_lock_icon"
59+
app:layout_constraintStart_toStartOf="parent"
60+
app:layout_constraintTop_toBottomOf="@+id/add_shipping_button" />
61+
62+
<ImageView
63+
android:id="@+id/add_coupon_button_lock_icon"
64+
android:layout_width="@dimen/image_minor_40"
65+
android:layout_height="@dimen/image_minor_40"
66+
android:layout_marginHorizontal="@dimen/major_100"
67+
android:contentDescription="@string/order_editing_locked_content_description"
68+
android:src="@drawable/ic_lock"
69+
android:visibility="gone"
70+
app:layout_constraintBottom_toBottomOf="@+id/add_coupon_button"
71+
app:layout_constraintEnd_toEndOf="parent"
72+
app:layout_constraintTop_toTopOf="@+id/add_coupon_button"
73+
tools:visibility="visible" />
74+
75+
<androidx.constraintlayout.widget.Group
76+
android:id="@+id/add_gift_card_button_group"
77+
app:constraint_referenced_ids="add_gift_card_button, add_gift_card_button_lock_icon"
78+
android:layout_width="wrap_content"
79+
android:layout_height="wrap_content"/>
3480

3581
<com.google.android.material.button.MaterialButton
3682
android:id="@+id/add_gift_card_button"
3783
style="@style/Woo.Button.TextButton.Secondary"
3884
android:layout_width="match_parent"
39-
android:layout_height="wrap_content"
85+
android:layout_height="0dp"
4086
android:gravity="start|center_vertical"
4187
android:text="@string/order_creation_add_gift_card"
4288
app:icon="@drawable/ic_add"
43-
app:layout_constraintLeft_toLeftOf="parent"
44-
app:layout_constraintTop_toTopOf="parent" />
45-
</LinearLayout>
89+
app:layout_constraintEnd_toStartOf="@+id/add_gift_card_button_lock_icon"
90+
app:layout_constraintStart_toStartOf="parent"
91+
app:layout_constraintTop_toBottomOf="@+id/add_coupon_button" />
92+
93+
<ImageView
94+
android:id="@+id/add_gift_card_button_lock_icon"
95+
android:layout_width="@dimen/image_minor_40"
96+
android:layout_height="@dimen/image_minor_40"
97+
android:layout_marginHorizontal="@dimen/major_100"
98+
android:contentDescription="@string/order_editing_locked_content_description"
99+
android:src="@drawable/ic_lock"
100+
android:visibility="gone"
101+
app:layout_constraintBottom_toBottomOf="@+id/add_gift_card_button"
102+
app:layout_constraintEnd_toEndOf="parent"
103+
app:layout_constraintTop_toTopOf="@+id/add_gift_card_button"
104+
tools:visibility="visible" />
105+
</androidx.constraintlayout.widget.ConstraintLayout>
46106
</com.google.android.material.card.MaterialCardView>

0 commit comments

Comments
 (0)