[Woo POS][Refunds] Add Issue Refund button

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosIssueRefundDialog.kt

@@ -0,0 +1,88 @@
+package com.woocommerce.android.ui.woopos.orders
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import com.woocommerce.android.R
+import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
+import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosDialogWrapper
+import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosText
+import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
+import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
+import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
+
+@Composable
+fun WooPosIssueRefundDialog(
+    isVisible: Boolean,
+    orderId: Long,
+    onDismissRequest: () -> Unit
+) {
+    WooPosDialogWrapper(
+        isVisible = isVisible,
+        dialogBackgroundContentDescription = stringResource(
+            R.string.woopos_orders_issue_refund_content_description
+        ),
+        onDismissRequest = onDismissRequest
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(WooPosSpacing.Large.value),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            IconButton(
+                onClick = onDismissRequest,
+                modifier = Modifier.align(Alignment.End)
+            ) {
+                Icon(
+                    imageVector = Icons.Default.Close,
+                    contentDescription = stringResource(R.string.close),
+                    tint = MaterialTheme.colorScheme.onSurface
+                )
+            }
+
+            Spacer(Modifier.height(WooPosSpacing.Medium.value))
+
+            WooPosText(
+                text = stringResource(R.string.orderdetail_issue_refund_button),
+                style = WooPosTypography.Heading,
+                fontWeight = FontWeight.Bold,
+                color = MaterialTheme.colorScheme.onSurface
+            )
+
+            Spacer(Modifier.height(WooPosSpacing.Large.value))
+
+            WooPosText(
+                text = "Refund flow coming soon for order #$orderId",
+                style = WooPosTypography.BodyMedium,
+                color = WooPosTheme.colors.onSurfaceVariantHighest
+            )
+
+            Spacer(Modifier.height(WooPosSpacing.Large.value))
+        }
+    }
+}
+
+@WooPosPreview
+@Composable
+fun WooPosIssueRefundDialogPreview() {
+    WooPosTheme {
+        WooPosIssueRefundDialog(
+            isVisible = true,
+            orderId = 123L,
+            onDismissRequest = {}
+        )
+    }
+}

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersDetails.kt

@@ -1,5 +1,6 @@
 package com.woocommerce.android.ui.woopos.orders
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -16,9 +17,18 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Inventory2
+import androidx.compose.material.icons.outlined.MoreVert
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -43,7 +53,8 @@ import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTyp
 fun WooPosOrderDetails(
     modifier: Modifier = Modifier,
     details: OrderDetailsViewState.Computed.Details,
-    onEmailReceiptButtonClicked: (Long) -> Unit
+    onEmailReceiptButtonClicked: (Long) -> Unit,
+    onIssueRefundButtonClicked: (Long) -> Unit
 ) {
     Column(
         modifier = modifier
@@ -53,7 +64,6 @@ fun WooPosOrderDetails(
             .padding(
                 start = WooPosSpacing.Medium.value,
                 end = WooPosSpacing.Medium.value,
-                top = WooPosSpacing.XLarge.value,
                 bottom = WooPosSpacing.XLarge.value
             )
     ) {
@@ -70,8 +80,15 @@ fun WooPosOrderDetails(
             Spacer(Modifier.weight(1f))
 
             WooPosButtonSmall(
-                text = stringResource(R.string.woopos_orders_email_receipt),
-                onClick = { onEmailReceiptButtonClicked(details.id) },
+                text = stringResource(R.string.orderdetail_issue_refund_button),
+                onClick = { onIssueRefundButtonClicked(details.id) },
+            )
+
+            Spacer(Modifier.width(WooPosSpacing.Small.value))
+
+            OrderDetailsOverflowMenu(
+                orderId = details.id,
+                onEmailReceiptClicked = onEmailReceiptButtonClicked
             )
         }
 
@@ -333,6 +350,42 @@ private fun DividerWithSpacing() {
     Spacer(Modifier.height(WooPosSpacing.Medium.value))
 }
 
+@Composable
+private fun OrderDetailsOverflowMenu(
+    orderId: Long,
+    onEmailReceiptClicked: (Long) -> Unit
+) {
+    var showMenu by remember { mutableStateOf(false) }
+
+    Box {
+        IconButton(onClick = { showMenu = true }) {
+            Icon(
+                imageVector = Icons.Outlined.MoreVert,
+                contentDescription = stringResource(R.string.more_menu),
+                tint = MaterialTheme.colorScheme.onSurface
+            )
+        }
+
+        DropdownMenu(
+            expanded = showMenu,
+            onDismissRequest = { showMenu = false }
+        ) {
+            DropdownMenuItem(
+                text = {
+                    WooPosText(
+                        text = stringResource(R.string.woopos_orders_email_receipt),
+                        style = WooPosTypography.BodyMedium
+                    )
+                },
+                onClick = {
+                    showMenu = false
+                    onEmailReceiptClicked(orderId)
+                }
+            )
+        }
+    }
+}
+
 @WooPosPreview
 @Composable
 fun WooPosOrderDetailsPreview() {
@@ -371,7 +424,8 @@ fun WooPosOrderDetailsPreview() {
     WooPosTheme {
         WooPosOrderDetails(
             details = orderDetails,
-            onEmailReceiptButtonClicked = {}
+            onEmailReceiptButtonClicked = {},
+            onIssueRefundButtonClicked = {}
         )
     }
 }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersScreen.kt

@@ -108,7 +108,9 @@ fun WooPosOrdersScreen(
         onSearchErrorRetry = viewModel::onSearchErrorRetry,
         onOrdersEmptyActionClicked = viewModel::onOrdersEmptyActionClicked,
         onOrdersLoadingErrorRetryButtonClicked = viewModel::onOrdersLoadingErrorRetryButtonClicked,
-        onEmailReceiptButtonClicked = viewModel::onEmailReceiptButtonClicked
+        onEmailReceiptButtonClicked = viewModel::onEmailReceiptButtonClicked,
+        onIssueRefundButtonClicked = viewModel::onIssueRefundButtonClicked,
+        onIssueRefundDialogDismissed = viewModel::onIssueRefundDialogDismissed
     )
 }
 
@@ -127,6 +129,8 @@ private fun WooPosOrdersScreen(
     onOrdersEmptyActionClicked: () -> Unit,
     onOrdersLoadingErrorRetryButtonClicked: () -> Unit,
     onEmailReceiptButtonClicked: (Long) -> Unit,
+    onIssueRefundButtonClicked: (Long) -> Unit,
+    onIssueRefundDialogDismissed: () -> Unit,
 ) {
     BackHandler { onBackClicked() }
 
@@ -141,7 +145,9 @@ private fun WooPosOrdersScreen(
                 onPaginationErrorTryAgain = onPaginationErrorTryAgain,
                 onSearchEvent = onSearchEvent,
                 onSearchErrorRetry = onSearchErrorRetry,
-                onEmailReceiptButtonClicked = onEmailReceiptButtonClicked
+                onEmailReceiptButtonClicked = onEmailReceiptButtonClicked,
+                onIssueRefundButtonClicked = onIssueRefundButtonClicked,
+                onIssueRefundDialogDismissed = onIssueRefundDialogDismissed
             )
 
             is WooPosOrdersState.Empty -> OrdersEmpty(
@@ -175,7 +181,9 @@ private fun OrdersContent(
     onPaginationErrorTryAgain: () -> Unit,
     onSearchEvent: (WooPosSearchUIEvent) -> Unit,
     onSearchErrorRetry: () -> Unit,
-    onEmailReceiptButtonClicked: (Long) -> Unit
+    onEmailReceiptButtonClicked: (Long) -> Unit,
+    onIssueRefundButtonClicked: (Long) -> Unit,
+    onIssueRefundDialogDismissed: () -> Unit
 ) {
     Row(modifier = Modifier.fillMaxSize()) {
         OrdersListPane(
@@ -203,9 +211,21 @@ private fun OrdersContent(
                 modifier = Modifier
                     .fillMaxHeight(),
                 details = state.selectedDetails,
-                onEmailReceiptButtonClicked = onEmailReceiptButtonClicked
+                onEmailReceiptButtonClicked = onEmailReceiptButtonClicked,
+                onIssueRefundButtonClicked = onIssueRefundButtonClicked
+            )
+        }
+    }
+
+    when (val dialogState = state.dialogState) {
+        is WooPosOrdersState.Content.DialogState.IssueRefund -> {
+            WooPosIssueRefundDialog(
+                isVisible = true,
+                orderId = dialogState.orderId,
+                onDismissRequest = onIssueRefundDialogDismissed
             )
         }
+        WooPosOrdersState.Content.DialogState.Hidden -> Unit
     }
 }
 
@@ -564,7 +584,9 @@ fun WooPosOrdersScreenPreview() {
             onSearchErrorRetry = {},
             onOrdersEmptyActionClicked = {},
             onOrdersLoadingErrorRetryButtonClicked = {},
-            onEmailReceiptButtonClicked = {}
+            onEmailReceiptButtonClicked = {},
+            onIssueRefundButtonClicked = {},
+            onIssueRefundDialogDismissed = {}
         )
     }
 }
@@ -598,7 +620,9 @@ fun WooPosOrdersSearchErrorStatePreview() {
             onSearchErrorRetry = {},
             onOrdersEmptyActionClicked = {},
             onOrdersLoadingErrorRetryButtonClicked = {},
-            onEmailReceiptButtonClicked = {}
+            onEmailReceiptButtonClicked = {},
+            onIssueRefundButtonClicked = {},
+            onIssueRefundDialogDismissed = {}
         )
     }
 }
@@ -632,7 +656,9 @@ fun WooPosOrdersNothingFoundStatePreview() {
             onSearchErrorRetry = {},
             onOrdersEmptyActionClicked = {},
             onOrdersLoadingErrorRetryButtonClicked = {},
-            onEmailReceiptButtonClicked = {}
+            onEmailReceiptButtonClicked = {},
+            onIssueRefundButtonClicked = {},
+            onIssueRefundDialogDismissed = {}
         )
     }
 }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersState.kt

@@ -84,14 +84,20 @@ sealed class WooPosOrdersState {
         override val pullToRefreshState: WooPosPullToRefreshState,
         override val searchInputState: WooPosSearchInputState,
         val selectedDetails: OrderDetailsViewState.Computed.Details,
-        val paginationState: WooPosPaginationState
+        val paginationState: WooPosPaginationState,
+        val dialogState: DialogState = DialogState.Hidden
     ) : WooPosOrdersState() {
         sealed class Items {
             data class Loaded(val items: Map<OrderItemViewState, OrderDetailsViewState>) : Items()
             object Searching : Items()
             data class Error(val title: String, val message: String) : Items()
             data class NothingFound(val title: String, val message: String) : Items()
         }
+
+        sealed class DialogState {
+            data object Hidden : DialogState()
+            data class IssueRefund(val orderId: Long) : DialogState()
+        }
     }
 
     @Immutable

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersViewModel.kt

@@ -176,6 +176,20 @@ class WooPosOrdersViewModel @Inject constructor(
         }
     }
 
+    fun onIssueRefundButtonClicked(orderId: Long) {
+        val currentState = _state.value as? WooPosOrdersState.Content ?: return
+        _state.value = currentState.copy(
+            dialogState = WooPosOrdersState.Content.DialogState.IssueRefund(orderId)
+        )
+    }
+
+    fun onIssueRefundDialogDismissed() {
+        val currentState = _state.value as? WooPosOrdersState.Content ?: return
+        _state.value = currentState.copy(
+            dialogState = WooPosOrdersState.Content.DialogState.Hidden
+        )
+    }
+
     fun onOrdersEmptyActionClicked() {
         viewModelScope.launch {
             _openUrlEvent.emit(AppUrls.URL_LEARN_MORE_ORDERS)