Merge pull request #14912 from woocommerce/issue/WOOMOB-1472-close-filters-dialog

[Bookings] Unsaved changes dialog to Filters screen

Author: irfano

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

@@ -29,6 +29,7 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import com.woocommerce.android.R
 import com.woocommerce.android.ui.bookings.filter.type.BookingTypeFilterRoute
+import com.woocommerce.android.ui.compose.Render
 import com.woocommerce.android.ui.compose.component.Toolbar
 import com.woocommerce.android.ui.compose.component.WCColoredButton
 import com.woocommerce.android.ui.compose.preview.LightDarkThemePreviews
@@ -73,6 +74,8 @@ fun BookingFilterListScreen(state: BookingFilterListUiState) {
                 .padding(innerPadding)
         )
 
+        state.dialogState?.Render()
+
         // The navigation is driven by the state, so we handle back navigation by calling onClose
         // We need to ensure that this called after NavHost to make sure we receive back events
         BackHandler {

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

@@ -5,6 +5,7 @@ import androidx.annotation.StringRes
 import com.woocommerce.android.R
 import com.woocommerce.android.model.UiString
 import com.woocommerce.android.ui.bookings.filter.type.titleRes
+import com.woocommerce.android.ui.compose.DialogState
 import org.wordpress.android.fluxc.network.rest.wpcom.wc.bookings.BookingFilters
 import org.wordpress.android.fluxc.network.rest.wpcom.wc.bookings.BookingsFilterOption
 
@@ -24,6 +25,7 @@ data class BookingFilterListUiState(
     val initialBookingFilters: BookingFilters? = null,
     val newBookingFilters: Set<BookingsFilterOption> = emptySet(),
     val currentPage: BookingFilterPage = BookingFilterPage.List,
+    val dialogState: DialogState? = null,
     val onClose: () -> Unit = {},
     val onShowBookings: () -> Unit = {},
     val openPage: (BookingFilterPage) -> Unit = {},

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

@@ -2,7 +2,10 @@ package com.woocommerce.android.ui.bookings.filter
 
 import androidx.lifecycle.SavedStateHandle
 import androidx.lifecycle.asLiveData
+import com.woocommerce.android.R
+import com.woocommerce.android.model.UiString
 import com.woocommerce.android.ui.bookings.filter.data.BookingFilterRepository
+import com.woocommerce.android.ui.compose.DialogState
 import com.woocommerce.android.viewmodel.MultiLiveEvent
 import com.woocommerce.android.viewmodel.ScopedViewModel
 import dagger.hilt.android.lifecycle.HiltViewModel
@@ -25,7 +28,7 @@ class BookingFilterListViewModel @Inject constructor(
             onClose = ::onClose,
             onShowBookings = ::onShowBookings,
             openPage = ::onOpenPage,
-            onUpdateFilterOption = ::onUpdateFilterOption,
+            onUpdateFilterOption = ::onUpdateFilterOption
         )
     )
     val uiState = _uiState.asLiveData()
@@ -66,8 +69,25 @@ class BookingFilterListViewModel @Inject constructor(
                 current.copy(currentPage = BookingFilterPage.List)
             }
         } else {
-            // TODO Verify unsaved changes and close
-            triggerEvent(MultiLiveEvent.Event.Exit)
+            if (hasUnsavedChanges()) {
+                _uiState.update { current ->
+                    current.copy(
+                        dialogState = DialogState(
+                            message = R.string.discard_message,
+                            positiveButton = DialogState.DialogButton(
+                                text = UiString.UiStringRes(R.string.discard),
+                                onClick = ::onDiscardChanges
+                            ),
+                            negativeButton = DialogState.DialogButton(
+                                text = UiString.UiStringRes(R.string.keep_changes),
+                                onClick = ::onDismissUnsavedChangesDialog
+                            ),
+                        )
+                    )
+                }
+            } else {
+                triggerEvent(MultiLiveEvent.Event.Exit)
+            }
         }
     }
 
@@ -77,6 +97,22 @@ class BookingFilterListViewModel @Inject constructor(
         }
         triggerEvent(MultiLiveEvent.Event.Exit)
     }
+
+    private fun onDismissUnsavedChangesDialog() {
+        _uiState.update { current -> current.copy(dialogState = null) }
+    }
+
+    private fun onDiscardChanges() {
+        // Hide dialog and exit without saving
+        _uiState.update { current -> current.copy(dialogState = null) }
+        triggerEvent(MultiLiveEvent.Event.Exit)
+    }
+
+    private fun hasUnsavedChanges(): Boolean {
+        val initial = _uiState.value.initialBookingFilters ?: BookingFilters()
+        val updated = _uiState.value.updatedBookingFilters
+        return updated != initial
+    }
 }
 
 private val BookingFilterListUiState.updatedBookingFilters: BookingFilters

WooCommerce/src/test/kotlin/com/woocommerce/android/ui/bookings/filter/BookingFilterListViewModelTest.kt

@@ -13,6 +13,7 @@ import org.junit.Test
 import org.mockito.kotlin.doReturn
 import org.mockito.kotlin.mock
 import org.wordpress.android.fluxc.network.rest.wpcom.wc.bookings.BookingFilters
+import org.wordpress.android.fluxc.network.rest.wpcom.wc.bookings.BookingsFilterOption
 
 @OptIn(ExperimentalCoroutinesApi::class)
 class BookingFilterListViewModelTest : BaseUnitTest() {
@@ -70,7 +71,7 @@ class BookingFilterListViewModelTest : BaseUnitTest() {
     }
 
     @Test
-    fun `given current page is List, when onClose, then Exit event is emitted`() {
+    fun `given current page is List, and no changes, when onClose, then Exit event is emitted`() {
         // GIVEN
         val events = mutableListOf<MultiLiveEvent.Event>()
         viewModel.event.observeForever { events.add(it) }
@@ -84,4 +85,58 @@ class BookingFilterListViewModelTest : BaseUnitTest() {
         assertThat(events).isNotEmpty
         assertThat(events.last()).isEqualTo(MultiLiveEvent.Event.Exit)
     }
+
+    @Test
+    fun `given unsaved changes on Filters, when onClose, then dialog becomes visible`() {
+        // GIVEN
+        val initial = viewModel.uiState.getOrAwaitValue()
+        // introduce a change different from initial filters (which are empty)
+        initial.onUpdateFilterOption(BookingsFilterOption.BookingType(BookingsFilterOption.BookingType.Type.SERVICE))
+        val changed = viewModel.uiState.getOrAwaitValue()
+
+        // WHEN
+        changed.onClose()
+
+        // THEN
+        val afterClose = viewModel.uiState.getOrAwaitValue()
+        assertThat(afterClose.dialogState).isNotNull()
+    }
+
+    @Test
+    fun `given dialog visible, when Keep Changes tapped, then dialog hides`() {
+        // GIVEN
+        val events = mutableListOf<MultiLiveEvent.Event>()
+        viewModel.event.observeForever { events.add(it) }
+        val initial = viewModel.uiState.getOrAwaitValue()
+        initial.onUpdateFilterOption(BookingsFilterOption.BookingType(BookingsFilterOption.BookingType.Type.SERVICE))
+        viewModel.uiState.getOrAwaitValue().onClose() // shows dialog
+
+        // WHEN: tap Keep Changes
+        val withDialog = viewModel.uiState.getOrAwaitValue()
+        withDialog.dialogState?.negativeButton?.onClick()
+
+        // THEN: dialog hidden
+        val afterDismiss = viewModel.uiState.getOrAwaitValue()
+        assertThat(afterDismiss.dialogState).isNull()
+    }
+
+    @Test
+    fun `given dialog visible, when Discard pressed, then dialog hides, and exit`() {
+        // GIVEN
+        val events = mutableListOf<MultiLiveEvent.Event>()
+        viewModel.event.observeForever { events.add(it) }
+        val initial = viewModel.uiState.getOrAwaitValue()
+        initial.onUpdateFilterOption(BookingsFilterOption.BookingType(BookingsFilterOption.BookingType.Type.SERVICE))
+        viewModel.uiState.getOrAwaitValue().onClose() // shows dialog
+
+        // WHEN: tap Discard
+        val withDialog = viewModel.uiState.getOrAwaitValue()
+        withDialog.dialogState?.positiveButton?.onClick()
+
+        // THEN: dialog hidden and Exit event emitted
+        val afterDiscard = viewModel.uiState.getOrAwaitValue()
+        assertThat(afterDiscard.dialogState).isNull()
+        assertThat(events).isNotEmpty
+        assertThat(events.last()).isEqualTo(MultiLiveEvent.Event.Exit)
+    }
 }