[Bulk Update Orders] Enable multiple selection in Order List: Part II

[hafizrahman]

Part of: #13130, #13150

please do not merge until target is trunk

Description

This PR adds various UI-related updates to Orders list screen, related to the bulk update feature. Those updates are:

1. Adds a checkbox showing when an Order is selected in multi select mode, similar to how it works in Products screen.
2. Hides bottom nav bar when multi selection mode is active, similar to behavior on Products.
3. Disables filter button when selection mode is active, similar to behavior on Products.
4. Disables pull to refresh when selection mode is active, similar to behavior on Products.
5. Hides Create Order FAB when selection mode is active, similar to behavior on Products.
6. Disables navigation to Order details on edge cases, e.g: when using Talkback

Steps to reproduce

1. Build app, go to Orders,
2. Long press an Order to enable multiple selection, ensure it shows the checkbox image next to it.
3. Play around with selecting/deselecting other Orders.
4. Ensure that bottom nav bar is hidden when multiple selection is active.
5. Ensure "Filter" button is inactive when multiple selection is active.
6. Ensure pull to refresh can't be done when multiple selection is active.
7. Ensure Create Order FAB is hidden when multiple selection is active.

Testing information

Test this both in phone and tablet (2 panel) mode, the test items should apply to both.

The tests that have been performed

I've tested the steps above both on phone and tablet simulator, API 32 and 34.

Images/gif

Screen.Recording.2024-12-18.at.11.25.24.mov

• I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

• The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
• Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
• Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on big (tablet) and small (phone) in case of UI changes, and no regressions are added.

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce-Wear Android
	Platform	⌚️ Wear OS
	Flavor	Jalapeno
	Build Type	Debug
	Commit	96c8072
	Direct Download	woocommerce-wear-prototype-build-pr13151-96c8072.apk

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Commit	96c8072
	Direct Download	woocommerce-prototype-build-pr13151-96c8072.apk

[irfano]

Before starting to review code, I want to list issues I found while testing:

• In selection mode, when tapped the create order button, the title remains "`order selected"

Video

new-order.webm

• In selection mode, when changing the orientation, the title remains "`order selected".

Video

orientation.webm

• When Talkback is enabled, we can select the order with double tap but holding the second tap. In selection mode, I am able to open an order. I think I shouldn't be able to do it, as I can't do with the product list.

Video

talkback.webm

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 42.85714% with 8 lines in your changes missing coverage. Please review.

Project coverage is 40.52%. Comparing base (8ec2efc) to head (96c8072).
Report is 156 commits behind head on trunk.

Files with missing lines	Patch %	Lines
...merce/android/ui/orders/list/OrderListViewModel.kt	50.00%	5 Missing and 1 partial ⚠️
...erce/android/ui/orders/filters/OrderFiltersCard.kt	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff            @@
##              trunk   #13151   +/-   ##
=========================================
  Coverage     40.52%   40.52%           
- Complexity     6357     6358    +1     
=========================================
  Files          1343     1343           
  Lines         77165    77175   +10     
  Branches      10592    10593    +1     
=========================================
+ Hits          31269    31274    +5     
- Misses        43152    43156    +4     
- Partials       2744     2745    +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[hafizrahman]

Thanks for the check @irfano !

In selection mode, when tapped the create order button, the title remains "`order selected"

Like in Product, the create order button should be hidden in selection mode. Added in 2976ce6

In selection mode, when changing the orientation, the title remains "`order selected".

I haven't worked on persisting selection state during configuration change yet as it's a bit non-trivial. If you see there, the selected products are lost, too. I will work on this as a separate PR, the task is already tracked in #13130

When Talkback is enabled, we can select the order with double tap but holding the second tap. In selection mode, I am able to open an order. I think I shouldn't be able to do it, as I can't do with the product list.

I added a commit on 59aa27e to deal with this, it's a similar fix as Products in #7971

[hafizrahman]

@irfano

Thanks for your design reviews!

Do we have a Figma design for this checkbox?

The constraint for this project is that we don't have any specific design, we just want to follow Products list. As I worked on this, though, I noticed that there are differences between the two screens, so replicating it exactly is not possible. For example, Products screen always has a thumbnail area, which gets replaced by the checkbox in selection mode. Orders screen doesn't have this, so the checkbox will disrupt the layout more in comparison. This affects smaller things like divider lines, etc, which you noticed in the review.

As there's no specific design direction, I just opt to work on something that makes sense visually. I added a refactor commit bb014fd that incorporates your feedback, while also tries to make it more similar to Products. These includes:

• Checkbox size now matches the size in Products
• Checkbox horizontal spacing now matches the size in Products
• Checkbox is now vertically centered
• Order item divider now retains the original horizontal spacing at the start
• Checkbox now has no transparency because it makes no sense when there's nothing below it, unlike in Products

This is how it looks like now:

I think this would be a good starting point for further design discussion, so if you have more feedbacks, I'd love to hear it. Since we don't have specific design to follow, I think we can aim for something that is essentially usable and not confusing to merchants.

[irfano]

Thanks for explaining everything and sharing screenshots for edge cases, @hafizrahman! LGTM! I've just added a minor feedback. I believe we're good to merge after that. I’m pre-approving it. Great work! 🚀