CheckoutAmountEntry.kt
/*
* This file is part of GNU Taler
* (C) 2026 Taler Systems S.A.
*
* GNU Taler is free software; you can redistribute it and/or modify it under the
* terms of the GNU General Public License as published by the Free Software
* Foundation; either version 3, or (at your option) any later version.
*
* GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
* A PARTICULAR PURPOSE. See the GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License along with
* GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
package net.taler.merchantpos.checkout
import androidx.compose.animation.Crossfade
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import net.taler.common.Amount
import net.taler.common.CurrencySpecification
import net.taler.merchantpos.R
import net.taler.merchantpos.compose.PaymentMethodTile
import java.math.RoundingMode
/** The caller must persist payment state. */
@Composable
internal fun CheckoutAmountEntry(
title: String,
remainingLabel: String,
amountLabel: String,
amount: String,
remainingAmount: Amount,
spec: CurrencySpecification?,
methodLabel: String,
methodIcon: ImageVector,
methodInstruction: String,
afterPaymentLabel: String,
helper: String,
helperIsError: Boolean = false,
submitLabel: String,
submitEnabled: Boolean,
onDigit: (Char) -> Unit,
onClear: () -> Unit,
onBackspace: () -> Unit,
onFractionAmount: (Int) -> Unit,
onSubmit: () -> Unit,
onDismiss: () -> Unit,
)
{
Column(Modifier.fillMaxSize()) {
Row(
modifier = Modifier.fillMaxWidth().heightIn(min = 64.dp),
verticalAlignment = Alignment.CenterVertically,
) {
IconButton(
onClick = onDismiss,
modifier = Modifier.size(width = 56.dp, height = 56.dp),
) {
Icon(
Icons.AutoMirrored.Filled.ArrowBack,
contentDescription = stringResource(R.string.navigation_back),
)
}
Text(
title,
style = MaterialTheme.typography.titleLarge.copy(fontSize = 20.sp),
fontWeight = FontWeight.SemiBold,
)
}
Surface(
modifier = Modifier.fillMaxWidth().height(1.dp),
color = MaterialTheme.colorScheme.outlineVariant,
) {}
BoxWithConstraints(Modifier.fillMaxSize()) {
val isLandscape = maxWidth > maxHeight
val isTablet = LocalConfiguration.current.smallestScreenWidthDp >= 600
when
{
isTablet && isLandscape ->
{
val contentWidth = maxWidth.coerceAtMost(1120.dp)
val dividerX = (contentWidth - 64.dp) * 0.598f + 31.5.dp
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.TopCenter) {
Box(Modifier.width(contentWidth).fillMaxHeight()) {
Surface(
modifier = Modifier.offset(x = dividerX).width(1.dp).fillMaxHeight(),
color = MaterialTheme.colorScheme.outlineVariant,
) {}
}
Row(
modifier =
Modifier
.widthIn(max = 1120.dp)
.fillMaxWidth()
.verticalScroll(rememberScrollState())
.padding(top = 40.dp, bottom = 24.dp),
horizontalArrangement = Arrangement.spacedBy(64.dp),
verticalAlignment = Alignment.Top,
) {
Column(Modifier.weight(0.598f)) {
PaymentMethodTile(
icon = methodIcon,
title = methodLabel,
detail = methodInstruction,
)
Spacer(Modifier.height(16.dp))
CheckoutNumberPad(
modifier = Modifier.fillMaxWidth(),
keyHeight = 80.dp,
keyGap = 12.dp,
actionGap = 20.dp,
submitLabel = submitLabel,
enabled = submitEnabled,
onDigit = onDigit,
onClear = onClear,
onBackspace = onBackspace,
onSubmit = onSubmit,
)
}
Column(Modifier.weight(0.402f)) {
AmountSummary(
remainingLabel,
amountLabel,
amount,
remainingAmount,
spec,
afterPaymentLabel,
helper = helper,
helperIsError = helperIsError,
landscape = true,
onFractionAmount = onFractionAmount,
)
}
}
}
}
isTablet ->
{
Column(
modifier =
Modifier
.widthIn(max = 640.dp)
.fillMaxWidth()
.align(Alignment.TopCenter)
.verticalScroll(rememberScrollState())
.padding(top = 40.dp, bottom = 24.dp),
) {
AmountSummary(
remainingLabel,
amountLabel,
amount,
remainingAmount,
spec,
afterPaymentLabel,
helper = null,
helperIsError = false,
landscape = false,
onFractionAmount = onFractionAmount,
)
Spacer(Modifier.height(50.dp))
CheckoutNumberPad(
modifier = Modifier.fillMaxWidth(),
keyHeight = 80.dp,
keyGap = 12.dp,
actionGap = 20.dp,
submitLabel = submitLabel,
enabled = submitEnabled,
onDigit = onDigit,
onClear = onClear,
onBackspace = onBackspace,
onSubmit = onSubmit,
)
Spacer(Modifier.height(24.dp))
Text(
helper,
style = MaterialTheme.typography.bodySmall,
color =
if (helperIsError)
{
MaterialTheme.colorScheme.error
}
else
{
MaterialTheme.colorScheme.onSurfaceVariant
},
)
}
}
isLandscape ->
{
Row(
modifier = Modifier.fillMaxSize().padding(horizontal = 24.dp, vertical = 20.dp),
horizontalArrangement = Arrangement.spacedBy(36.dp),
verticalAlignment = Alignment.Top,
) {
CheckoutNumberPad(
modifier = Modifier.weight(0.59f),
keyHeight = 48.dp,
keyGap = 8.dp,
actionGap = 16.dp,
submitLabel = submitLabel,
enabled = submitEnabled,
onDigit = onDigit,
onClear = onClear,
onBackspace = onBackspace,
onSubmit = onSubmit,
)
Column(Modifier.weight(0.41f).fillMaxHeight().verticalScroll(rememberScrollState())) {
AmountSummary(
remainingLabel,
amountLabel,
amount,
remainingAmount,
spec,
afterPaymentLabel,
helper = helper,
helperIsError = helperIsError,
landscape = true,
onFractionAmount = onFractionAmount,
)
}
}
}
else ->
{
Column(
modifier =
Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.padding(horizontal = 20.dp, vertical = 20.dp),
) {
AmountSummary(
remainingLabel,
amountLabel,
amount,
remainingAmount,
spec,
afterPaymentLabel,
helper = null,
helperIsError = false,
landscape = false,
onFractionAmount = onFractionAmount,
)
Spacer(Modifier.height(36.dp))
CheckoutNumberPad(
modifier = Modifier.fillMaxWidth(),
keyHeight = 60.dp,
keyGap = 12.dp,
actionGap = 20.dp,
submitLabel = submitLabel,
enabled = submitEnabled,
onDigit = onDigit,
onClear = onClear,
onBackspace = onBackspace,
onSubmit = onSubmit,
)
Spacer(Modifier.height(24.dp))
Text(
helper,
style = MaterialTheme.typography.bodySmall,
color =
if (helperIsError)
{
MaterialTheme.colorScheme.error
}
else
{
MaterialTheme.colorScheme.onSurfaceVariant
},
)
}
}
}
}
}
}
@Composable
private fun AmountSummary(
remainingLabel: String,
amountLabel: String,
amount: String,
remainingAmount: Amount,
spec: CurrencySpecification?,
afterPaymentLabel: String,
helper: String?,
helperIsError: Boolean,
landscape: Boolean,
onFractionAmount: (Int) -> Unit,
)
{
val amountScroll = rememberScrollState()
LaunchedEffect(amount) { amountScroll.scrollTo(amountScroll.maxValue) }
Text(
remainingLabel,
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
Spacer(Modifier.height(12.dp))
Text(amountLabel, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
Spacer(Modifier.height(5.dp))
Surface(
modifier =
Modifier.fillMaxWidth().heightIn(
min =
if (landscape &&
LocalConfiguration.current.smallestScreenWidthDp < 600)
{
66.dp
}
else
{
80.dp
},
),
shape = RoundedCornerShape(16.dp),
color = MaterialTheme.colorScheme.surface,
border = BorderStroke(1.dp, MaterialTheme.colorScheme.primary),
) {
Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.CenterStart) {
Row(
modifier = Modifier.horizontalScroll(amountScroll).padding(horizontal = 16.dp, vertical = 12.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Text(
amount,
style =
MaterialTheme.typography.headlineLarge.copy(
fontSize =
if (landscape &&
LocalConfiguration.current.smallestScreenWidthDp < 600)
{
32.sp
}
else
{
36.sp
},
),
fontWeight = FontWeight.SemiBold,
maxLines = 1,
softWrap = false,
)
}
}
}
Spacer(Modifier.height(12.dp))
val shortcutRows =
if (LocalDensity.current.fontScale > 1.3f)
{
listOf(listOf(2), listOf(3), listOf(4), listOf(1))
}
else
{
listOf(listOf(2, 3), listOf(4, 1))
}
shortcutRows.forEach { row ->
Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
row.forEach { denominator ->
val shortcut = remainingAmount.fractionAmount(denominator, spec)
val amountText = shortcut.shown(spec)
val accessibilityText =
stringResource(
when (denominator)
{
2 -> R.string.checkout_fraction_half_description
3 -> R.string.checkout_fraction_third_description
4 -> R.string.checkout_fraction_quarter_description
else -> R.string.checkout_fraction_remaining_description
},
amountText,
)
OutlinedButton(
onClick = { onFractionAmount(denominator) },
enabled = !shortcut.isZero(),
modifier =
Modifier
.weight(1f)
.heightIn(min = if (landscape) 48.dp else 44.dp)
.semantics { contentDescription = accessibilityText },
colors =
ButtonDefaults.outlinedButtonColors(
contentColor = MaterialTheme.colorScheme.primary,
),
contentPadding =
PaddingValues(
horizontal = 8.dp,
vertical = 5.dp,
),
) {
val visibleLabel =
if (denominator == 1)
{
stringResource(R.string.checkout_fraction_remaining)
}
else
{
"1/$denominator"
}
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(2.dp),
) {
Text(
visibleLabel,
textAlign = TextAlign.Center,
style = MaterialTheme.typography.labelMedium,
)
Text(
amountText,
textAlign = TextAlign.Center,
style = MaterialTheme.typography.labelSmall,
)
}
}
}
}
Spacer(Modifier.height(8.dp))
}
Spacer(Modifier.height(8.dp))
Crossfade(targetState = afterPaymentLabel, label = "after-payment-summary") { label ->
Text(
label,
modifier = Modifier.animateContentSize().heightIn(min = 44.dp),
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
helper?.let {
Spacer(Modifier.height(16.dp))
Text(
it,
style = MaterialTheme.typography.bodySmall,
color = if (helperIsError) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.onSurfaceVariant,
)
}
}
/** Returns a positive remaining-balance fraction rounded down to the currency's input precision. */
internal fun Amount.fractionAmount(
denominator: Int,
spec: CurrencySpecification?,
): Amount
{
require(denominator > 0)
if (denominator == 1) return withSpec(spec)
val decimals = (spec?.numFractionalInputDigits ?: Amount.DEFAULT_INPUT_DECIMALS).coerceIn(0, 8)
val fraction =
amountStr
.toBigDecimal()
.divide(denominator.toBigDecimal(), decimals, RoundingMode.DOWN)
return Amount.fromString(currency, fraction.stripTrailingZeros().toPlainString()).withSpec(spec)
}
@Composable
private fun CheckoutNumberPad(
modifier: Modifier,
keyHeight: Dp,
keyGap: Dp,
actionGap: Dp,
submitLabel: String,
enabled: Boolean,
onDigit: (Char) -> Unit,
onClear: () -> Unit,
onBackspace: () -> Unit,
onSubmit: () -> Unit,
)
{
val keyRows = listOf(listOf("1", "2", "3"), listOf("4", "5", "6"), listOf("7", "8", "9"))
Column(modifier) {
keyRows.forEachIndexed { index, row ->
if (index > 0) Spacer(Modifier.height(keyGap))
Row(Modifier.fillMaxWidth().height(keyHeight), horizontalArrangement = Arrangement.spacedBy(keyGap)) {
row.forEach { key -> CheckoutKey(key, Modifier.weight(1f), keyHeight, keyGap) { onDigit(key.first()) } }
}
}
Spacer(Modifier.height(keyGap))
Row(Modifier.fillMaxWidth().height(keyHeight), horizontalArrangement = Arrangement.spacedBy(keyGap)) {
CheckoutKey(stringResource(R.string.amount_entry_clear), Modifier.weight(1f), keyHeight, keyGap, onClear)
CheckoutKey("0", Modifier.weight(1f), keyHeight, keyGap) { onDigit('0') }
Button(
onClick = onBackspace,
modifier = Modifier.weight(1f).height(keyHeight),
shape = RoundedCornerShape(12.dp),
colors =
ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
),
contentPadding =
PaddingValues(0.dp),
) {
Icon(
painterResource(R.drawable.ic_backspace),
contentDescription = stringResource(R.string.amount_entry_backspace),
)
}
}
Spacer(Modifier.height(actionGap))
Button(
onClick = onSubmit,
enabled = enabled,
modifier = Modifier.fillMaxWidth().heightIn(min = 48.dp),
shape = RoundedCornerShape(24.dp),
colors =
ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.onPrimary,
disabledContainerColor = MaterialTheme.colorScheme.surfaceVariant,
disabledContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
),
contentPadding =
PaddingValues(horizontal = 12.dp, vertical = 8.dp),
) {
Text(
submitLabel,
textAlign = TextAlign.Center,
maxLines = 2,
overflow = TextOverflow.Ellipsis,
fontWeight = FontWeight.SemiBold,
)
}
}
}
@Composable
private fun CheckoutKey(
label: String,
modifier: Modifier,
keyHeight: Dp,
keyGap: Dp,
onClick: () -> Unit,
)
{
Button(
onClick = onClick,
modifier = modifier.height(keyHeight),
shape = RoundedCornerShape(12.dp),
colors =
ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
),
contentPadding =
PaddingValues(horizontal = keyGap, vertical = 0.dp),
) {
Text(
label,
textAlign = TextAlign.Center,
maxLines = 1,
softWrap = false,
overflow = TextOverflow.Ellipsis,
fontSize = if (label.length > 2) 14.sp else 24.sp,
fontWeight = FontWeight.SemiBold,
)
}
}