[Bookings] Type filter

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/filter/BookingFilterListItem.kt

@@ -0,0 +1,12 @@
+package com.woocommerce.android.ui.bookings.filter
+
+import androidx.annotation.StringRes
+
+/**
+ * UI model simple filter item
+ */
+data class BookingFilterListItem(
+    @StringRes val title: Int,
+    val value: String? = null,
+    val onClick: () -> Unit = {}
+)

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/filter/BookingFilterListScreen.kt

@@ -25,6 +25,8 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.unit.dp
 import com.woocommerce.android.R
+import com.woocommerce.android.ui.bookings.filter.type.BookingTypeFilterPage
+import com.woocommerce.android.ui.bookings.filter.type.DUMMY_BOOKING_TYPE_FILTER_UI_STATE
 import com.woocommerce.android.ui.compose.component.Toolbar
 import com.woocommerce.android.ui.compose.component.WCColoredButton
 import com.woocommerce.android.ui.compose.preview.LightDarkThemePreviews
@@ -85,8 +87,8 @@ fun BookingFilterListScreen(state: BookingFilterListUiState) {
                     BookingFilterRootPage(state.items)
                 }
 
+                BookingFilterPage.BookingType -> BookingTypeFilterPage(DUMMY_BOOKING_TYPE_FILTER_UI_STATE)
                 BookingFilterPage.AttendanceStatus,
-                BookingFilterPage.BookingType,
                 BookingFilterPage.Customer,
                 BookingFilterPage.Location,
                 BookingFilterPage.PaymentStatus,

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/filter/BookingFilterListUiState.kt

@@ -60,12 +60,6 @@ data class BookingFilterListUiState(
         }
 }
 
-data class BookingFilterListItem(
-    @StringRes val title: Int,
-    val value: String? = null,
-    val onClick: () -> Unit = {}
-)
-
 val BookingFilterPage.titleRes: Int
     @StringRes get() = when (this) {
         BookingFilterPage.TeamMember -> R.string.bookings_filter_title_team_member

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/filter/SingleChoiceFilterPage.kt

@@ -0,0 +1,74 @@
+package com.woocommerce.android.ui.bookings.filter
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.woocommerce.android.R
+
+@Composable
+fun SingleChoiceFilterPage(
+    items: List<BookingFilterListItem>,
+    selectedValue: String?,
+    modifier: Modifier = Modifier,
+) {
+    LazyColumn(modifier = modifier) {
+        items(items) { item ->
+            SingleChoiceRow(
+                text = stringResource(item.title),
+                selected = item.value == selectedValue,
+                onClick = { item.onClick() }
+            )
+        }
+    }
+}
+
+@Composable
+private fun SingleChoiceRow(
+    text: String,
+    selected: Boolean,
+    onClick: () -> Unit,
+) {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .defaultMinSize(minHeight = 64.dp)
+                .clickable(onClick = onClick)
+                .padding(horizontal = 16.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(
+                text = text,
+                style = MaterialTheme.typography.titleMedium,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.weight(1f)
+            )
+            if (selected) {
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_done_secondary),
+                    contentDescription = null,
+                    modifier = Modifier.size(26.dp),
+                    tint = MaterialTheme.colorScheme.primary
+                )
+            }
+        }
+        HorizontalDivider(thickness = 0.5.dp)
+    }
+}

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/filter/type/BookingTypeFilterPage.kt

@@ -0,0 +1,12 @@
+package com.woocommerce.android.ui.bookings.filter.type
+
+import androidx.compose.runtime.Composable
+import com.woocommerce.android.ui.bookings.filter.SingleChoiceFilterPage
+
+@Composable
+fun BookingTypeFilterPage(state: BookingTypeFilterUiState) {
+    SingleChoiceFilterPage(
+        items = state.items,
+        selectedValue = state.selectedType.filterValue,
+    )
+}

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/filter/type/BookingTypeFilterUiState.kt

@@ -0,0 +1,51 @@
+package com.woocommerce.android.ui.bookings.filter.type
+
+import androidx.annotation.StringRes
+import com.woocommerce.android.R
+import com.woocommerce.android.ui.bookings.filter.BookingFilterListItem
+
+sealed interface BookingFilterType {
+    data object Any : BookingFilterType
+    data object Service : BookingFilterType
+    data object Event : BookingFilterType
+}
+
+data class BookingTypeFilterUiState(
+    val selectedType: BookingFilterType = BookingFilterType.Any,
+    val onTypeSelected: (BookingFilterType) -> Unit = {},
+) {
+    val items: List<BookingFilterListItem> = availableBookingTypes().map { type ->
+        BookingFilterListItem(
+            title = type.titleRes,
+            value = type.filterValue,
+            onClick = { onTypeSelected(type) }
+        )
+    }
+
+    val BookingFilterType.titleRes: Int
+        @StringRes get() = when (this) {
+            BookingFilterType.Any -> R.string.bookings_filter_default
+            BookingFilterType.Service -> R.string.bookings_filter_type_service
+            BookingFilterType.Event -> R.string.bookings_filter_type_event
+        }
+
+    private fun availableBookingTypes(): List<BookingFilterType> = listOf(
+        BookingFilterType.Any,
+        BookingFilterType.Service,
+        BookingFilterType.Event,
+    )
+}
+
+val BookingFilterType.filterValue: String?
+    // TODO Update this with actual endpoint values
+    get() = when (this) {
+        BookingFilterType.Service -> "service"
+        BookingFilterType.Event -> "event"
+        BookingFilterType.Any -> null
+    }
+
+// TODO After refactoring navigation for the filter screens, replace this with a ViewModel-backed UI state.
+val DUMMY_BOOKING_TYPE_FILTER_UI_STATE = BookingTypeFilterUiState(
+    selectedType = BookingFilterType.Any,
+    onTypeSelected = {}
+)

WooCommerce/src/main/res/values/strings.xml

@@ -4240,6 +4240,8 @@
     <string name="bookings_filter_title_date">Date &amp; time</string>
     <string name="bookings_filter_title_service_event">Service / Event</string>
     <string name="bookings_filter_default">Any</string>
+    <string name="bookings_filter_type_service">Service</string>
+    <string name="bookings_filter_type_event">Event</string>
 
     <!-- Booking details view-->
     <string name="booking_details_title">Booking #%s</string>