Skip to content

Commit

Permalink
Merge pull request #10562 from woocommerce/10488-tablet-orders-think-…
Browse files Browse the repository at this point in the history 
…what-to-do-with-the-lock-icon

[Tablet Orders] Lock icons as per updated design
  • Loading branch information
@kidinov
kidinov authored Jan 19, 2024
2 parents a25900b + 60d2160 commit 0539bd2
Show file tree
Hide file tree
Showing 5 changed files with 216 additions and 38 deletions.
4 changes: 4 additions & 0 deletions RELEASE-NOTES.txt
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
*** PLEASE FOLLOW THIS FORMAT: [<priority indicator, more stars = higher priority>] <description> [<PR URL>]
17.3
-----
- [*] [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]

17.2
-----
- [*] [Internal] Tracking of "country" and "currency" properties for entry and exit of the payments flows [https://github.com/woocommerce/woocommerce-android/pull/10528]
Expand Down
60 changes: 60 additions & 0 deletions ...m/woocommerce/android/ui/orders/creation/OrderCreateEditFormAddInfoButtonsStatusHelper.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
package com.woocommerce.android.ui.orders.creation

import androidx.core.view.isVisible
import com.woocommerce.android.databinding.FragmentOrderCreateEditFormBinding
import javax.inject.Inject

class OrderCreateEditFormAddInfoButtonsStatusHelper @Inject constructor() {
fun changeAddInfoButtonsEnabledState(
binding: FragmentOrderCreateEditFormBinding,
addInfoButtonsStateTransition: AddInfoButtonsStateTransition,
) {
binding.additionalInfoCollectionSection.run {
root.post {
when (val state = addInfoButtonsStateTransition.isAddShippingButtonState) {
is AddInfoButtonsStateTransition.State.Change -> {
addShippingButton.isEnabled = state.enabled
if (addShippingButtonGroup.isVisible) {
addShippingButtonLockIcon.isVisible = !state.enabled
}
}

AddInfoButtonsStateTransition.State.Keep -> {}
}

when (val state = addInfoButtonsStateTransition.isAddCouponButtonState) {
is AddInfoButtonsStateTransition.State.Change -> {
addCouponButton.isEnabled = state.enabled
if (addCouponButtonGroup.isVisible) {
addCouponButtonLockIcon.isVisible = !state.enabled
}
}

AddInfoButtonsStateTransition.State.Keep -> {}
}

when (val state = addInfoButtonsStateTransition.isAddGiftCardButtonState) {
is AddInfoButtonsStateTransition.State.Change -> {
addGiftCardButton.isEnabled = state.enabled
if (addGiftCardButtonGroup.isVisible) {
addGiftCardButtonLockIcon.isVisible = !state.enabled
}
}

AddInfoButtonsStateTransition.State.Keep -> {}
}
}
}
}
}

data class AddInfoButtonsStateTransition(
val isAddShippingButtonState: State = State.Keep,
val isAddCouponButtonState: State = State.Keep,
val isAddGiftCardButtonState: State = State.Keep
) {
sealed class State {
data class Change(val enabled: Boolean) : State()
object Keep : State()
}
}
103 changes: 78 additions & 25 deletions ...src/main/kotlin/com/woocommerce/android/ui/orders/creation/OrderCreateEditFormFragment.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,9 @@ class OrderCreateEditFormFragment :
@Inject
lateinit var uiMessageResolver: UIMessageResolver

@Inject
lateinit var uiHelper: OrderCreateEditFormAddInfoButtonsStatusHelper

private var createOrderMenuItem: MenuItem? = null
private var progressDialog: CustomProgressDialog? = null
private var orderUpdateFailureSnackBar: Snackbar? = null
Expand Down Expand Up @@ -363,13 +366,22 @@ class OrderCreateEditFormFragment :
new.isIdle.takeIfNotEqualTo(old?.isIdle) { idle ->
updateProgressBarsVisibility(binding, !idle)
if (new.isEditable) {
binding.additionalInfoCollectionSection.addCouponButton.isEnabled =
new.isCouponButtonEnabled && idle
binding.additionalInfoCollectionSection.addShippingButton.isEnabled =
new.isAddShippingButtonEnabled && idle
uiHelper.changeAddInfoButtonsEnabledState(
binding,
AddInfoButtonsStateTransition(
isAddShippingButtonState = AddInfoButtonsStateTransition.State.Change(
enabled = new.isAddShippingButtonEnabled && idle
),
isAddCouponButtonState = AddInfoButtonsStateTransition.State.Change(
enabled = new.isCouponButtonEnabled && idle
),
isAddGiftCardButtonState = AddInfoButtonsStateTransition.State.Change(
enabled = new.isAddGiftCardButtonEnabled && idle
)
)
)

binding.productsSection.isEachAddButtonEnabled = idle
binding.additionalInfoCollectionSection.addGiftCardButton.isEnabled =
new.isAddGiftCardButtonEnabled && idle
}
}
new.showOrderUpdateSnackbar.takeIfNotEqualTo(old?.showOrderUpdateSnackbar) { show ->
Expand All @@ -395,16 +407,37 @@ class OrderCreateEditFormFragment :
}
}
new.isCouponButtonEnabled.takeIfNotEqualTo(old?.isCouponButtonEnabled) {
binding.additionalInfoCollectionSection.addCouponButton.isEnabled = it
uiHelper.changeAddInfoButtonsEnabledState(
binding,
AddInfoButtonsStateTransition(
isAddCouponButtonState = AddInfoButtonsStateTransition.State.Change(
enabled = it
)
)
)
}
new.isAddShippingButtonEnabled.takeIfNotEqualTo(old?.isAddShippingButtonEnabled) {
binding.additionalInfoCollectionSection.addShippingButton.isEnabled = it
uiHelper.changeAddInfoButtonsEnabledState(
binding,
AddInfoButtonsStateTransition(
isAddShippingButtonState = AddInfoButtonsStateTransition.State.Change(
enabled = it
)
)
)
}
new.isAddGiftCardButtonEnabled.takeIfNotEqualTo(old?.isAddGiftCardButtonEnabled) {
binding.additionalInfoCollectionSection.addGiftCardButton.isEnabled = it
uiHelper.changeAddInfoButtonsEnabledState(
binding,
AddInfoButtonsStateTransition(
isAddGiftCardButtonState = AddInfoButtonsStateTransition.State.Change(
enabled = it
)
)
)
}
new.shouldDisplayAddGiftCardButton.takeIfNotEqualTo(old?.shouldDisplayAddGiftCardButton) {
binding.additionalInfoCollectionSection.addGiftCardButton.isVisible = it
binding.additionalInfoCollectionSection.addGiftCardButtonGroup.isVisible = it
}
new.taxRateSelectorButtonState.takeIfNotEqualTo(old?.taxRateSelectorButtonState) {
binding.taxRateSelectorSection.isVisible = it.isShown
Expand Down Expand Up @@ -568,27 +601,27 @@ class OrderCreateEditFormFragment :

val firstShipping = newOrderData.shippingLines.firstOrNull { it.methodId != null }
if (firstShipping != null) {
additionalInfoCollectionSection.addShippingButton.hide()
additionalInfoCollectionSection.addShippingButtonGroup.hide()
} else {
additionalInfoCollectionSection.addShippingButton.show()
additionalInfoCollectionSection.addShippingButtonGroup.show()
}
}

private fun OrderCreationAdditionalInfoCollectionSectionBinding.bindGiftCardSubSection(newOrderData: Order) {
when (viewModel.mode) {
is Creation -> bindGiftCardForOrderCreation(newOrderData)
is Edit -> addGiftCardButton.isVisible = false
is Edit -> addGiftCardButtonGroup.isVisible = false
}
}

private fun OrderCreationAdditionalInfoCollectionSectionBinding.bindGiftCardForOrderCreation(
newOrderData: Order
) {
if (newOrderData.selectedGiftCard.isNullOrEmpty()) {
addGiftCardButton.isVisible = viewModel.isGiftCardExtensionEnabled
addGiftCardButtonGroup.isVisible = viewModel.isGiftCardExtensionEnabled
addGiftCardButton.setOnClickListener { viewModel.onAddGiftCardButtonClicked() }
} else {
addGiftCardButton.isVisible = false
addGiftCardButtonGroup.isVisible = false
}
}

Expand Down Expand Up @@ -1050,13 +1083,23 @@ class OrderCreateEditFormFragment :
isLocked = false
isEachAddButtonEnabled = true
}
additionalInfoCollectionSection.apply {
addShippingButton.isEnabled = true
addCouponButton.isEnabled = state.isCouponButtonEnabled
addGiftCardButton.isEnabled = state.isAddGiftCardButtonEnabled
}
uiHelper.changeAddInfoButtonsEnabledState(
this,
AddInfoButtonsStateTransition(
isAddShippingButtonState = AddInfoButtonsStateTransition.State.Change(
enabled = true
),
isAddCouponButtonState = AddInfoButtonsStateTransition.State.Change(
enabled = state.isCouponButtonEnabled
),
isAddGiftCardButtonState = AddInfoButtonsStateTransition.State.Change(
enabled = state.isAddGiftCardButtonEnabled
)
)
)
customAmountsSection.apply {
isLocked = false
isEachAddButtonEnabled = true
}
}

Expand All @@ -1066,13 +1109,23 @@ class OrderCreateEditFormFragment :
isLocked = true
isEachAddButtonEnabled = false
}
additionalInfoCollectionSection.apply {
addShippingButton.isEnabled = false
addCouponButton.isEnabled = false
addGiftCardButton.isEnabled = false
}
uiHelper.changeAddInfoButtonsEnabledState(
this,
AddInfoButtonsStateTransition(
isAddShippingButtonState = AddInfoButtonsStateTransition.State.Change(
enabled = false
),
isAddCouponButtonState = AddInfoButtonsStateTransition.State.Change(
enabled = false
),
isAddGiftCardButtonState = AddInfoButtonsStateTransition.State.Change(
enabled = false
)
)
)
customAmountsSection.apply {
isLocked = true
isEachAddButtonEnabled = false
}
}
}
5 changes: 3 additions & 2 deletions ...kotlin/com/woocommerce/android/ui/orders/creation/totals/OrderCreateEditTotalsFullView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.Lock
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
Expand Down Expand Up @@ -438,7 +439,7 @@ private fun TextWithIcon(
)
) {
Icon(
imageVector = Icons.Default.Edit,
imageVector = if (isEnabled) Icons.Default.Edit else Icons.Default.Lock,
contentDescription = null,
tint = colorResource(id = R.color.color_primary),
modifier = Modifier.size(20.dp)
Expand All @@ -452,7 +453,7 @@ private fun TextWithIcon(
color = if (isEnabled) {
colorResource(id = R.color.color_primary)
} else {
colorResource(id = R.color.color_on_surface_medium)
colorResource(id = R.color.color_on_surface)
},
text = buildAnnotatedString {
append(text)
Expand Down
82 changes: 71 additions & 11 deletions WooCommerce/src/main/res/layout/order_creation_additional_info_collection_section.xml
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,51 @@
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
style="@style/Woo.Card"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
android:layout_height="wrap_content">

<androidx.constraintlayout.widget.Group
android:id="@+id/add_shipping_button_group"
app:constraint_referenced_ids="add_shipping_button, add_shipping_button_lock_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<com.google.android.material.button.MaterialButton
android:id="@+id/add_shipping_button"
style="@style/Woo.Button.TextButton.Secondary"
android:layout_width="match_parent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start|center_vertical"
android:text="@string/order_creation_add_shipping"
app:icon="@drawable/ic_add"
app:layout_constraintEnd_toStartOf="@+id/add_shipping_button_lock_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tax_label" />
app:layout_constraintTop_toTopOf="parent" />

<ImageView
android:id="@+id/add_shipping_button_lock_icon"
android:layout_width="@dimen/image_minor_40"
android:layout_height="@dimen/image_minor_40"
android:layout_marginHorizontal="@dimen/major_100"
android:contentDescription="@string/order_editing_locked_content_description"
android:src="@drawable/ic_lock"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@+id/add_shipping_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/add_shipping_button"
tools:visibility="visible" />

<androidx.constraintlayout.widget.Group
android:id="@+id/add_coupon_button_group"
app:constraint_referenced_ids="add_coupon_button, add_coupon_button_lock_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<com.google.android.material.button.MaterialButton
android:id="@+id/add_coupon_button"
Expand All @@ -29,18 +55,52 @@
android:gravity="start|center_vertical"
android:text="@string/order_creation_add_coupon"
app:icon="@drawable/ic_add"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
app:layout_constraintEnd_toStartOf="@+id/add_coupon_button_lock_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/add_shipping_button" />

<ImageView
android:id="@+id/add_coupon_button_lock_icon"
android:layout_width="@dimen/image_minor_40"
android:layout_height="@dimen/image_minor_40"
android:layout_marginHorizontal="@dimen/major_100"
android:contentDescription="@string/order_editing_locked_content_description"
android:src="@drawable/ic_lock"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@+id/add_coupon_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/add_coupon_button"
tools:visibility="visible" />

<androidx.constraintlayout.widget.Group
android:id="@+id/add_gift_card_button_group"
app:constraint_referenced_ids="add_gift_card_button, add_gift_card_button_lock_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<com.google.android.material.button.MaterialButton
android:id="@+id/add_gift_card_button"
style="@style/Woo.Button.TextButton.Secondary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_height="0dp"
android:gravity="start|center_vertical"
android:text="@string/order_creation_add_gift_card"
app:icon="@drawable/ic_add"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
app:layout_constraintEnd_toStartOf="@+id/add_gift_card_button_lock_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/add_coupon_button" />

<ImageView
android:id="@+id/add_gift_card_button_lock_icon"
android:layout_width="@dimen/image_minor_40"
android:layout_height="@dimen/image_minor_40"
android:layout_marginHorizontal="@dimen/major_100"
android:contentDescription="@string/order_editing_locked_content_description"
android:src="@drawable/ic_lock"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@+id/add_gift_card_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/add_gift_card_button"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>

0 comments on commit 0539bd2

Please sign in to comment.