Description

In order to provide merchants the ability to update/delete orders quickly, we will allow them to enter the screen on Selection Mode, let them select multiple orders from the order list screen, and perform one of these two actions:

1. Update the selected order's status.
2. Delete the selected orders

1. Start the Selection Mode

To start selecting orders, the screen must enter in Selection Mode.
The order list screen will enter in selection mode when:

1. The merchant marks one of the list headers (all orders within this list header group will be marked as selected)
2. The merchant long press one of the orders (this order will be marked as selected)

2. Exit the Selection Mode

The screen will exit the Selection Mode when :

1. The merchant presses the cancel (cross icon) button in the Toolbar.
2. The merchant selects the action to perform with the orders selected ( update status/delete ).
3. The merchant unselects all orders.

3. List header selection

1. If the merchant marks one of the list headers, the order list screen will enter in Selection Mode, and all the orders within that group will be marked as selected.
2. If the screen is already on Selection Mode, some orders are selected within one list header group, and the merchant marks that list header group as selected, the rest of the orders within that list header will be marked as selected.
3. If the merchant marks all orders within a list header group, the list header group will be marked as selected
4. If a list header group is selected and the merchant unselects that header group, all orders inside that group will also be unselected.

4. Order selection

1. If a merchant taps on an unselected order in Selection Mode, the order will be selected
2. If a merchant taps on a selected order in Selection Mode, the order will be unselected

5. Selection count

1. When the screen is on Selection Mode, the Toolbar title will show the number of orders selected.

Images

Please note that the image below is meant for a detail reference and not as a final design