Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Payment Method Improvements] Create the "Mark Order as Complete" Button #11570

Merged
merged 10 commits into from
May 27, 2024
Merged

[Payment Method Improvements] Create the "Mark Order as Complete" Button #11570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
84b6ac4
Add string
backwardstruck May 22, 2024
ea1b9ea
Mark order as complete
backwardstruck May 22, 2024
81c807a
Mark order as complete button
backwardstruck May 22, 2024
cc675bc
Request keyboard
backwardstruck May 22, 2024
1dd1a7e
It doesn't crash
backwardstruck May 22, 2024
7bb9e96
Merge branch '11525-change-due-calculator-ui-part-3' into 11525-chang…
backwardstruck May 24, 2024
6af62c6
Restore the button
backwardstruck May 24, 2024
448e714
Detekt
backwardstruck May 24, 2024
958cadc
Merge branch '11525-change-due-calculator-ui-part-3' into 11525-chang…
backwardstruck May 24, 2024
f99dc1d
Pop the keyboard
backwardstruck May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion ...in/com/woocommerce/android/ui/payments/changeduecalculator/ChangeDueCalculatorFragment.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ class ChangeDueCalculatorFragment : BaseFragment() {
val uiState by viewModel.uiState.collectAsState()
ChangeDueCalculatorScreen(
uiState = uiState,
onNavigateUp = { viewModel.onBackPressed() }
onNavigateUp = { viewModel.onBackPressed() },
onCompleteOrderClick = {}
)
}
}
Expand Down
47 changes: 44 additions & 3 deletions ...tlin/com/woocommerce/android/ui/payments/changeduecalculator/ChangeDueCalculatorScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package com.woocommerce.android.ui.payments.changeduecalculator

import android.view.ViewGroup
import android.view.inputmethod.InputMethodManager
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
Expand All @@ -9,6 +10,7 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.LocalTextStyle
Expand All @@ -20,8 +22,14 @@ import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
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.platform.LocalContext
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
Expand All @@ -38,8 +46,11 @@ import java.math.BigDecimal
@Composable
fun ChangeDueCalculatorScreen(
uiState: ChangeDueCalculatorViewModel.UiState,
onNavigateUp: () -> Unit
onNavigateUp: () -> Unit,
onCompleteOrderClick: () -> Unit
) {
val context = LocalContext.current

WooThemeWithBackground {
Scaffold(
topBar = {
Expand Down Expand Up @@ -73,6 +84,17 @@ fun ChangeDueCalculatorScreen(

is ChangeDueCalculatorViewModel.UiState.Success -> {
val hintString = stringResource(R.string.cash_payments_cash_received)
var view: WCMaterialOutlinedCurrencyEditTextView? by remember { mutableStateOf(null) }

LaunchedEffect(view) {
view?.let {
it.requestFocus()
context.getSystemService(
InputMethodManager::class.java
).showSoftInput(it, InputMethodManager.SHOW_IMPLICIT)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like this to work the same as CustomAmountsFragment and pop the num pad but for some reason I'm seeing the full keyboard.

Copy link
Contributor

@kidinov kidinov May 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you considered using WCOutlinedTypedTextField the same as they do in OrderCreateEditProductDiscountScreen? There are quite a few advantages of not using "XML" views in compose, including that now preview doesn't work

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great suggestion. Indeed it broke the preview and I would prefer to use proper Compose views. I will change this today in this draft PR:
#11587

}
}

AndroidView(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In case you still would want to steak with AndroidView reuse here, I'd suggest to export that into a separate composable function for code simplification

factory = { ctx ->
WCMaterialOutlinedCurrencyEditTextView(ctx).apply {
Expand All @@ -87,6 +109,7 @@ fun ChangeDueCalculatorScreen(
supportsNegativeValues = false
hint = hintString
setValueIfDifferent(uiState.amountDue)
view = this
}
},
modifier = Modifier
Expand Down Expand Up @@ -121,6 +144,11 @@ fun ChangeDueCalculatorScreen(
.padding(top = 16.dp, bottom = 16.dp, start = 16.dp)
.fillMaxWidth()
)

MarkOrderAsCompleteButton(
onClick = onCompleteOrderClick,
modifier = Modifier.padding(top = 16.dp)
)
}

is ChangeDueCalculatorViewModel.UiState.Error -> {
Expand All @@ -137,9 +165,9 @@ fun ChangeDueCalculatorScreen(

@Composable
fun RecordTransactionDetailsNote(
modifier: Modifier = Modifier,
checked: Boolean = false,
onCheckedChange: (Boolean) -> Unit = {},
modifier: Modifier = Modifier
) {
Row(
modifier = modifier.fillMaxWidth(),
Expand All @@ -159,6 +187,18 @@ fun RecordTransactionDetailsNote(
}
}

@Composable
fun MarkOrderAsCompleteButton(onClick: () -> Unit, modifier: Modifier = Modifier) {
Button(
kidinov marked this conversation as resolved.
Show resolved Hide resolved
onClick = onClick,
modifier = modifier
.fillMaxWidth()
.padding(start = 16.dp, top = 8.dp, end = 16.dp)
) {
Text(text = stringResource(R.string.cash_payments_mark_order_as_complete))
}
}

@Composable
private fun getTitleText(uiState: ChangeDueCalculatorViewModel.UiState): String {
return when (uiState) {
Expand All @@ -179,6 +219,7 @@ fun ChangeDueCalculatorScreenSuccessPreview() {
amountDue = BigDecimal("666.00"),
change = BigDecimal("0.00")
),
onNavigateUp = {}
onNavigateUp = {},
onCompleteOrderClick = {}
)
}
1 change: 1 addition & 0 deletions WooCommerce/src/main/res/values/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -579,6 +579,7 @@
<string name="cash_payments_cash_received">Cash received</string>
<string name="cash_payments_change_due">Change due</string>
<string name="cash_payments_record_transaction_details">Record transaction details in order note</string>
<string name="cash_payments_mark_order_as_complete">Mark Order as Complete</string>

<!--
Custom Amounts
Expand Down
Loading