Show progress indicator when cancelling the booking

Author: AdamGrzybkowski

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

@@ -10,6 +10,7 @@ import com.woocommerce.android.ui.bookings.compose.BookingCustomerDetailsModel
 import com.woocommerce.android.ui.bookings.compose.BookingPaymentDetailsModel
 import com.woocommerce.android.ui.bookings.compose.BookingStatus
 import com.woocommerce.android.ui.bookings.compose.BookingSummaryModel
+import com.woocommerce.android.ui.bookings.details.CancelState
 import com.woocommerce.android.ui.bookings.list.BookingListItem
 import com.woocommerce.android.util.CurrencyFormatter
 import com.woocommerce.android.viewmodel.ResourceProvider
@@ -56,7 +57,7 @@ class BookingMapper @Inject constructor(
         )
     }
 
-    fun Booking.toAppointmentDetailsModel(): BookingAppointmentDetailsModel {
+    fun Booking.toAppointmentDetailsModel(cancelState: CancelState): BookingAppointmentDetailsModel {
         val durationMinutes = Duration.between(start, end).toMinutes()
         return BookingAppointmentDetailsModel(
             date = detailsDateFormatter.format(start),
@@ -65,7 +66,8 @@ class BookingMapper @Inject constructor(
             staff = "Marianne Renoir",
             location = "238 Willow Creek Drive, Montgomery AL 36109",
             duration = "$durationMinutes min",
-            price = currencyFormatter.formatCurrency(cost, currency)
+            price = currencyFormatter.formatCurrency(cost, currency),
+            cancelState = cancelState,
         )
     }
 

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingAppointmentDetails.kt

@@ -7,8 +7,11 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -17,6 +20,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.woocommerce.android.R
+import com.woocommerce.android.ui.bookings.details.CancelState
 import com.woocommerce.android.ui.compose.component.WCOutlinedButton
 import com.woocommerce.android.ui.compose.preview.LightDarkThemePreviews
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
@@ -62,9 +66,17 @@ fun BookingAppointmentDetails(
                 colors = ButtonDefaults.outlinedButtonColors(
                     contentColor = MaterialTheme.colorScheme.onSurface
                 ),
-                onClick = onCancelBooking
+                onClick = onCancelBooking,
+                enabled = model.cancelButtonEnabled,
             ) {
-                Text(text = stringResource(R.string.booking_details_cancel_booking_button))
+                if (model.cancelInProgressShown) {
+                    CircularProgressIndicator(
+                        color = LocalContentColor.current,
+                        modifier = Modifier.size(24.dp)
+                    )
+                } else {
+                    Text(text = stringResource(R.string.booking_details_cancel_booking_button))
+                }
             }
             HorizontalDivider(thickness = 0.5.dp)
         }
@@ -103,8 +115,12 @@ data class BookingAppointmentDetailsModel(
     val staff: String,
     val location: String,
     val duration: String,
-    val price: String
-)
+    val price: String,
+    val cancelState: CancelState,
+) {
+    val cancelButtonEnabled: Boolean = cancelState != CancelState.InProgress
+    val cancelInProgressShown: Boolean = cancelState == CancelState.InProgress
+}
 
 @LightDarkThemePreviews
 @Composable
@@ -117,7 +133,8 @@ private fun BookingAppointmentDetailsPreview() {
                 staff = "Marianne Renoir",
                 location = "238 Willow Creek Drive, Montgomery AL 36109",
                 duration = "60 min",
-                price = "$55.00"
+                price = "$55.00",
+                cancelState = CancelState.Idle,
             ),
             onCancelBooking = {},
             modifier = Modifier.fillMaxWidth()

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/details/BookingDetailsScreen.kt

@@ -233,7 +233,8 @@ private fun BookingDetailsPreview() {
                         staff = "Marianne Renoir",
                         location = "238 Willow Creek Drive, Montgomery AL 36109",
                         duration = "60 min",
-                        price = "$55.00"
+                        price = "$55.00",
+                        cancelState = CancelState.Idle,
                     ),
                     bookingCustomerDetails = BookingCustomerDetailsModel(
                         name = "Margarita Nikolaevna",

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/details/BookingDetailsViewModel.kt

@@ -12,8 +12,11 @@ import com.woocommerce.android.viewmodel.ResourceProvider
 import com.woocommerce.android.viewmodel.ScopedViewModel
 import com.woocommerce.android.viewmodel.navArgs
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.combine
+import kotlinx.coroutines.launch
+import java.time.Duration
 import javax.inject.Inject
 
 @HiltViewModel
@@ -30,13 +33,15 @@ class BookingDetailsViewModel @Inject constructor(
 
     // Temporary, the booking status should come from the stored object
     private val bookingAttendanceStatus = MutableStateFlow<BookingAttendanceStatus?>(null)
+    private val cancelState = MutableStateFlow<CancelState>(CancelState.Idle)
     private val showCancelDialog = MutableStateFlow(false)
 
     val state: LiveData<BookingDetailsViewState> = combine(
         booking,
         bookingAttendanceStatus,
-        showCancelDialog
-    ) { booking, attendanceStatus, showDialog ->
+        showCancelDialog,
+        cancelState,
+    ) { booking, attendanceStatus, showDialog, cancel ->
         with(bookingMapper) {
             val cancelMessage = booking?.let {
                 buildCancelDialogMessage(booking, resourceProvider)
@@ -45,7 +50,11 @@ class BookingDetailsViewModel @Inject constructor(
                 toolbarTitle = booking?.id?.value?.let { id ->
                     resourceProvider.getString(R.string.booking_details_title, id)
                 } ?: "",
-                bookingUiState = if (booking != null) buildBookingUiState(booking, attendanceStatus) else null,
+                bookingUiState = if (booking != null) {
+                    buildBookingUiState(booking, attendanceStatus, cancel)
+                } else {
+                    null
+                },
                 onCancelBooking = ::onCancelBooking,
                 onAttendanceStatusSelected = ::onAttendanceStatusSelected,
                 showCancelBookingDialog = showDialog,
@@ -69,14 +78,18 @@ class BookingDetailsViewModel @Inject constructor(
         showCancelDialog.value = false
     }
 
-    private fun onConfirmCancelBooking() {
+    private fun onConfirmCancelBooking() = launch {
         // TODO Add logic to Cancel booking action
         showCancelDialog.value = false
+        cancelState.value = CancelState.InProgress
+        delay(Duration.ofSeconds(1).toMillis())
+        cancelState.value = CancelState.Idle
     }
 
     private suspend fun BookingMapper.buildBookingUiState(
         booking: Booking,
-        attendanceStatus: BookingAttendanceStatus?
+        attendanceStatus: BookingAttendanceStatus?,
+        cancelState: CancelState,
     ): BookingUiState = BookingUiState(
         orderId = booking.orderId,
         bookingSummary = booking.toBookingSummaryModel().let {
@@ -86,7 +99,7 @@ class BookingDetailsViewModel @Inject constructor(
                 it
             }
         },
-        bookingsAppointmentDetails = booking.toAppointmentDetailsModel(),
+        bookingsAppointmentDetails = booking.toAppointmentDetailsModel(cancelState),
         bookingCustomerDetails = booking.order.customerInfo.toCustomerDetailsModel(),
         bookingPaymentDetails = booking.order.paymentInfo?.toPaymentDetailsModel(booking.currency)
     )

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/details/BookingDetailsViewState.kt

@@ -27,3 +27,8 @@ data class BookingUiState(
     val bookingCustomerDetails: BookingCustomerDetailsModel,
     val bookingPaymentDetails: BookingPaymentDetailsModel?,
 )
+
+sealed interface CancelState {
+    object Idle : CancelState
+    object InProgress : CancelState
+}

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

@@ -4,6 +4,7 @@ import com.woocommerce.android.R
 import com.woocommerce.android.model.GetLocations
 import com.woocommerce.android.ui.bookings.compose.BookingAttendanceStatus
 import com.woocommerce.android.ui.bookings.compose.BookingStatus
+import com.woocommerce.android.ui.bookings.details.CancelState
 import com.woocommerce.android.util.CurrencyFormatter
 import com.woocommerce.android.viewmodel.BaseUnitTest
 import com.woocommerce.android.viewmodel.ResourceProvider
@@ -98,7 +99,7 @@ class BookingMapperTest : BaseUnitTest() {
         val expectedTime = "${timeFormatter.format(start)} - ${timeFormatter.format(end)}"
 
         // WHEN
-        val model = mapper.run { booking.toAppointmentDetailsModel() }
+        val model = mapper.run { booking.toAppointmentDetailsModel(CancelState.Idle) }
 
         // THEN
         assertThat(model.date).isEqualTo(expectedDate)
@@ -107,6 +108,7 @@ class BookingMapperTest : BaseUnitTest() {
         assertThat(model.location).isEqualTo("238 Willow Creek Drive, Montgomery AL 36109")
         assertThat(model.duration).isEqualTo("90 min")
         assertThat(model.price).isEqualTo("$55.00")
+        assertThat(model.cancelState).isEqualTo(CancelState.Idle)
     }
 
     @Test