PaymentOptionControls.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.paymentoptions
import androidx.annotation.StringRes
import androidx.compose.foundation.layout.Arrangement
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.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
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.KeyboardArrowRight
import androidx.compose.material.icons.filled.Contactless
import androidx.compose.material.icons.filled.Link
import androidx.compose.material.icons.filled.LinkOff
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import net.taler.merchantpos.R
import net.taler.merchantpos.compose.PosOutlinedCard
internal val PaymentOptionControlShape = RoundedCornerShape(14.dp)
@Composable
internal fun statusLabel(status: PaymentOptionStatus): String =
stringResource(
when (status)
{
PaymentOptionStatus.Disabled -> R.string.payment_option_disabled
PaymentOptionStatus.Unavailable -> R.string.terminal_unavailable
PaymentOptionStatus.NotConfigured -> R.string.terminal_not_configured
PaymentOptionStatus.SignInRequired -> R.string.terminal_sign_in_required
PaymentOptionStatus.PermissionRequired -> R.string.terminal_permission_required
PaymentOptionStatus.NotPaired -> R.string.terminal_not_paired
PaymentOptionStatus.Disconnected -> R.string.terminal_disconnected
PaymentOptionStatus.Ready -> R.string.payment_option_ready
PaymentOptionStatus.Connected -> R.string.terminal_connected
},
)
@Composable
fun PaymentOptionsEntry(
summary: PaymentOptionsSummary,
onOpen: () -> Unit,
)
{
Text(
text = stringResource(R.string.payment_options_enabled_count, summary.enabledCount),
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
OutlinedButton(
onClick = onOpen,
modifier = Modifier.fillMaxWidth().heightIn(min = 48.dp),
shape = RoundedCornerShape(28.dp),
) {
Text(stringResource(R.string.payment_options_manage_action))
Spacer(Modifier.width(8.dp))
Icon(Icons.AutoMirrored.Filled.KeyboardArrowRight, contentDescription = null)
}
}
@Composable
fun PaymentOptionRow(
option: PaymentOption,
state: PaymentOptionState,
onEnabled: (Boolean) -> Unit,
)
{
val name = stringResource(option.nameRes)
val configured = option.isConfigured()
Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.fillMaxWidth()) {
Icon(
imageVector = option.icon,
contentDescription = null,
tint = statusTint(state.status, state.enabled),
)
Spacer(Modifier.width(12.dp))
Column(modifier = Modifier.weight(1f)) {
Text(name, style = MaterialTheme.typography.titleSmall)
if (option.id != TALER_OPTION_ID ||
!configured ||
state.status != PaymentOptionStatus.Ready)
{
Text(
text =
if (configured)
{
statusLabel(state.status)
}
else
{
statusLabel(PaymentOptionStatus.NotConfigured)
},
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
if (configured) DeviceLines(state.devices, MaterialTheme.typography.bodySmall)
}
if (!option.alwaysEnabled)
{
Switch(
checked = state.enabled,
onCheckedChange = onEnabled,
enabled = configured,
modifier = Modifier.semantics { contentDescription = name },
)
}
Spacer(Modifier.width(8.dp))
Icon(
imageVector = Icons.AutoMirrored.Filled.KeyboardArrowRight,
contentDescription = stringResource(R.string.payment_option_open, name),
tint = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
}
@Composable
private fun deviceName(device: PaymentDevice): String =
device.name ?: device.nameRes?.let { stringResource(it) } ?: device.id
@Composable
fun DeviceLines(
devices: List<PaymentDevice>,
style: TextStyle,
)
{
devices.forEach { device ->
Text(
text =
device.statusRes?.let { "${deviceName(device)} ${stringResource(it)}" } ?: stringResource(
if (device.connected)
{
R.string.payment_device_connected
}
else
{
R.string.payment_device_disconnected
},
deviceName(device),
),
style = style,
color =
if (device.connected)
{
MaterialTheme.colorScheme.primary
}
else
{
MaterialTheme.colorScheme.onSurfaceVariant
},
)
}
}
@Composable
fun ActivationNoticeDialog(
@StringRes noticeRes: Int,
onConfirm: () -> Unit,
onDismiss: () -> Unit,
)
{
AlertDialog(
onDismissRequest = onDismiss,
title = { Text(stringResource(R.string.payment_option_activation_title)) },
text = { Text(stringResource(noticeRes)) },
confirmButton = {
Button(onClick = onConfirm) {
Text(stringResource(R.string.payment_option_activation_confirm))
}
},
dismissButton = {
TextButton(onClick = onDismiss) { Text(stringResource(android.R.string.cancel)) }
},
)
}
@Composable
fun PaymentOptionDetails(state: PaymentOptionState)
{
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
if (state.id != TALER_OPTION_ID ||
state.status != PaymentOptionStatus.Ready)
{
Text(statusLabel(state.status), style = MaterialTheme.typography.bodyMedium)
}
state.account?.let {
Text(stringResource(R.string.terminal_account, it), style = MaterialTheme.typography.bodyMedium)
}
}
}
@Composable
fun DeviceCard(device: PaymentDevice)
{
PosOutlinedCard(contentPadding = PaddingValues(16.dp)) { contentPadding ->
Row(
modifier = Modifier.padding(contentPadding),
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
imageVector = Icons.Default.Contactless,
contentDescription = null,
tint =
if (device.connected)
{
MaterialTheme.colorScheme.primary
}
else
{
MaterialTheme.colorScheme.onSurfaceVariant
},
)
Spacer(Modifier.width(12.dp))
Column(
modifier = Modifier.weight(1f),
verticalArrangement = Arrangement.spacedBy(4.dp),
) {
Text(deviceName(device), style = MaterialTheme.typography.titleSmall)
Text(
text =
stringResource(
device.statusRes ?: if (device.connected)
{
R.string.payment_device_status_connected
}
else
{
R.string.payment_device_status_disconnected
},
),
style = MaterialTheme.typography.bodyMedium,
color =
if (device.connected)
{
MaterialTheme.colorScheme.primary
}
else
{
MaterialTheme.colorScheme.onSurfaceVariant
},
)
device.serialNumber?.let {
Text(
text = stringResource(R.string.terminal_serial, it),
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
device.batteryPercent?.let {
Text(
text = stringResource(R.string.payment_device_battery, it),
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
}
}
}
}
@Composable
private fun statusTint(
status: PaymentOptionStatus,
enabled: Boolean,
) = when
{
status == PaymentOptionStatus.Connected || status == PaymentOptionStatus.Ready ->
{
MaterialTheme.colorScheme.primary
}
enabled ->
{
MaterialTheme.colorScheme.error
}
else ->
{
MaterialTheme.colorScheme.onSurfaceVariant
}
}
@Composable
fun TerminalStatusIndicator(
status: PaymentOptionStatus,
states: List<Pair<PaymentOption, PaymentOptionState>>,
onOpenOptions: () -> Unit,
)
{
var showStatus by rememberSaveable { mutableStateOf(false) }
val connected = status == PaymentOptionStatus.Connected
IconButton(onClick = { showStatus = true }) {
Icon(
imageVector = if (connected) Icons.Default.Link else Icons.Default.LinkOff,
contentDescription = stringResource(R.string.terminal_indicator_description, statusLabel(status)),
tint = if (connected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.error,
)
}
if (showStatus)
{
AlertDialog(
onDismissRequest = { showStatus = false },
title = { Text(stringResource(R.string.payment_options_title)) },
text = {
Column(
modifier = Modifier.verticalScroll(rememberScrollState()),
verticalArrangement = Arrangement.spacedBy(12.dp),
) {
states.forEach { (option, state) ->
Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
Text(
stringResource(option.nameRes),
style = MaterialTheme.typography.titleSmall,
)
PaymentOptionDetails(state)
DeviceLines(state.devices, MaterialTheme.typography.bodyMedium)
}
}
}
},
confirmButton = {
TextButton(
onClick = {
showStatus = false
onOpenOptions()
}
) {
Text(stringResource(R.string.payment_options_button))
}
},
dismissButton = {
TextButton(onClick = { showStatus = false }) { Text(stringResource(R.string.terminal_close)) }
},
)
}
}