Compare commits
4 Commits
fb4c832476
...
ff2858d484
| Author | SHA1 | Date | |
|---|---|---|---|
|
ff2858d484 | ||
|
|
9d9ef95140 | ||
|
|
79ab7c0bae | ||
|
|
283d2d64ce |
@ -12,14 +12,9 @@ fun AmountRoute(
|
||||
onBack: () -> Unit,
|
||||
onNavigateCardWaiting: () -> Unit
|
||||
) {
|
||||
val canGoBack = !action.equals("Sale", ignoreCase = true)
|
||||
|
||||
AmountScreen(
|
||||
action = action,
|
||||
canGoBack = canGoBack,
|
||||
onBackClick = onBack,
|
||||
onCancelClick = onBack,
|
||||
onNextClick = { amount ->
|
||||
onChargeClick = { amount ->
|
||||
sharedViewModel.amount.value = amount
|
||||
sharedViewModel.setAmountExist(true)
|
||||
sharedViewModel.setCardDataExist(false)
|
||||
|
||||
@ -1,275 +1,203 @@
|
||||
package com.mob.utsmyanmar.ui.amount
|
||||
|
||||
import androidx.activity.compose.BackHandler
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.foundation.rememberScrollState
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.foundation.verticalScroll
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ButtonDefaults
|
||||
import androidx.compose.material3.CenterAlignedTopAppBar
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TopAppBarDefaults
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.rounded.KeyboardArrowLeft
|
||||
import androidx.compose.material3.*
|
||||
import androidx.compose.runtime.*
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.draw.shadow
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import com.mob.utsmyanmar.ui.theme.MOBPOSTheme
|
||||
import com.mob.utsmyanmar.ui.theme.Primary
|
||||
import com.mob.utsmyanmar.ui.theme.White
|
||||
import com.mob.utsmyanmar.R
|
||||
import com.mob.utsmyanmar.ui.preview.P2Preview
|
||||
import com.mob.utsmyanmar.ui.theme.Color
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun AmountScreen(
|
||||
action: String,
|
||||
canGoBack: Boolean = true,
|
||||
onBackClick: () -> Unit,
|
||||
onCancelClick: () -> Unit = {},
|
||||
onNextClick: (String) -> Unit = {}
|
||||
onBackClick: () -> Unit = {},
|
||||
onChargeClick: (String) -> Unit = {}
|
||||
) {
|
||||
BackHandler(enabled = canGoBack) {
|
||||
onBackClick()
|
||||
}
|
||||
var amount by remember { mutableStateOf("") }
|
||||
|
||||
var amount by remember {
|
||||
mutableStateOf("0")
|
||||
}
|
||||
val displayAmount = amount.ifEmpty { "0" }
|
||||
|
||||
Scaffold(
|
||||
topBar = {
|
||||
CenterAlignedTopAppBar(
|
||||
title = {
|
||||
Text(
|
||||
text = action.uppercase(),
|
||||
color = White,
|
||||
fontSize = 16.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
},
|
||||
navigationIcon = {
|
||||
if (canGoBack) {
|
||||
IconButton(onClick = onBackClick) {
|
||||
Icon(
|
||||
painter = painterResource(R.drawable.ic_left_arrow),
|
||||
contentDescription = "Back",
|
||||
modifier = Modifier.size(24.dp),
|
||||
tint = White
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
colors = TopAppBarDefaults.topAppBarColors(
|
||||
containerColor = Primary
|
||||
)
|
||||
)
|
||||
},
|
||||
containerColor = White
|
||||
) { paddingValues ->
|
||||
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(paddingValues)
|
||||
.background(White)
|
||||
.verticalScroll(rememberScrollState())
|
||||
.padding(horizontal = 24.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
AmountBox(
|
||||
amount = formatTypedAmount(amount),
|
||||
height = 134.dp
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(24.dp))
|
||||
|
||||
Keypad(
|
||||
buttonHeight = 74.dp,
|
||||
buttonSpacing = 12.dp,
|
||||
onKeyClick = { key ->
|
||||
amount = handleAmountInput(amount, key)
|
||||
}
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(18.dp))
|
||||
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.spacedBy(14.dp)
|
||||
) {
|
||||
|
||||
Button(
|
||||
onClick = {
|
||||
onNextClick(normalizeAmount(amount))
|
||||
},
|
||||
modifier = Modifier
|
||||
.weight(if (canGoBack) 1f else 2f)
|
||||
.height(68.dp),
|
||||
shape = RoundedCornerShape(18.dp),
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = Primary,
|
||||
contentColor = White
|
||||
)
|
||||
) {
|
||||
Text(
|
||||
text = "Enter",
|
||||
fontSize = 20.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
}
|
||||
|
||||
if (canGoBack) {
|
||||
Button(
|
||||
onClick = onCancelClick,
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.height(68.dp),
|
||||
shape = RoundedCornerShape(18.dp),
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = White,
|
||||
contentColor = Primary
|
||||
),
|
||||
border = ButtonDefaults.outlinedButtonBorder
|
||||
) {
|
||||
Text(
|
||||
text = "Cancel",
|
||||
fontSize = 20.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(12.dp))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun AmountBox(
|
||||
amount: String,
|
||||
height: Dp
|
||||
) {
|
||||
|
||||
Box(
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(height)
|
||||
.background(
|
||||
color = Primary,
|
||||
shape = RoundedCornerShape(20.dp)
|
||||
)
|
||||
.padding(horizontal = 24.dp),
|
||||
contentAlignment = Alignment.CenterEnd
|
||||
.fillMaxSize()
|
||||
.background(Color.IvoryBeige)
|
||||
.padding(horizontal = 20.dp)
|
||||
.navigationBarsPadding()
|
||||
.statusBarsPadding()
|
||||
) {
|
||||
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(56.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
IconButton(
|
||||
onClick = onBackClick,
|
||||
modifier = Modifier.align(Alignment.CenterStart)
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Icons.Rounded.KeyboardArrowLeft,
|
||||
contentDescription = "Back",
|
||||
tint = Color.LegacyRed
|
||||
)
|
||||
}
|
||||
|
||||
Text(
|
||||
text = amount,
|
||||
color = White,
|
||||
fontSize = 30.sp,
|
||||
text = "Amount",
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 14.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.width(14.dp))
|
||||
Spacer(modifier = Modifier.height(36.dp))
|
||||
|
||||
Box(
|
||||
Text(
|
||||
text = "Enter Amount",
|
||||
color = Color.Gray,
|
||||
fontSize = 11.sp,
|
||||
modifier = Modifier.align(Alignment.CenterHorizontally)
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
|
||||
Row(
|
||||
modifier = Modifier.align(Alignment.CenterHorizontally),
|
||||
verticalAlignment = Alignment.Bottom
|
||||
) {
|
||||
Text(
|
||||
text = "MMK",
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 13.sp,
|
||||
fontWeight = FontWeight.Medium,
|
||||
modifier = Modifier.padding(end = 10.dp, bottom = 6.dp)
|
||||
)
|
||||
|
||||
Text(
|
||||
text = formatAmount(displayAmount),
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 32.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(12.dp))
|
||||
|
||||
Text(
|
||||
text = "Enter the amount to charge",
|
||||
color = Color.Gray,
|
||||
fontSize = 11.sp,
|
||||
modifier = Modifier.align(Alignment.CenterHorizontally)
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(28.dp))
|
||||
|
||||
AmountKeypad(
|
||||
onNumberClick = { value ->
|
||||
if (amount.length < 9) {
|
||||
amount += value
|
||||
}
|
||||
},
|
||||
onDeleteClick = {
|
||||
amount = amount.dropLast(1)
|
||||
}
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.spacedBy(12.dp)
|
||||
) {
|
||||
Button(
|
||||
onClick = { },
|
||||
modifier = Modifier
|
||||
.background(
|
||||
color = White,
|
||||
shape = RoundedCornerShape(10.dp)
|
||||
)
|
||||
.padding(
|
||||
horizontal = 16.dp,
|
||||
vertical = 6.dp
|
||||
)
|
||||
.weight(1f)
|
||||
.height(56.dp),
|
||||
shape = RoundedCornerShape(8.dp),
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = Color.White,
|
||||
contentColor = Color.LegacyRed
|
||||
)
|
||||
) {
|
||||
Text("Cancel")
|
||||
}
|
||||
|
||||
Button(
|
||||
onClick = {
|
||||
if (amount.isNotEmpty()) {
|
||||
onChargeClick(amount)
|
||||
}
|
||||
},
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.height(56.dp),
|
||||
enabled = amount.isNotEmpty(),
|
||||
shape = RoundedCornerShape(8.dp),
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = Color.LegacyRed,
|
||||
contentColor = Color.White,
|
||||
disabledContainerColor = Color.LegacyRed.copy(alpha = 0.5f),
|
||||
disabledContentColor = Color.White
|
||||
)
|
||||
) {
|
||||
Text(
|
||||
text = "MMK",
|
||||
color = Primary,
|
||||
fontSize = 20.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
text = "Next",
|
||||
fontSize = 14.sp,
|
||||
fontWeight = FontWeight.Medium
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(18.dp))
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun Keypad(
|
||||
buttonHeight: Dp,
|
||||
buttonSpacing: Dp,
|
||||
onKeyClick: (String) -> Unit
|
||||
private fun AmountKeypad(
|
||||
onNumberClick: (String) -> Unit,
|
||||
onDeleteClick: () -> Unit
|
||||
) {
|
||||
|
||||
val keys = listOf(
|
||||
listOf("1", "2", "3"),
|
||||
listOf("4", "5", "6"),
|
||||
listOf("7", "8", "9"),
|
||||
listOf(".", "0", "DEL")
|
||||
listOf("", "0", "00")
|
||||
)
|
||||
|
||||
Column(
|
||||
verticalArrangement = Arrangement.spacedBy(buttonSpacing)
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
verticalArrangement = Arrangement.spacedBy(6.dp)
|
||||
) {
|
||||
|
||||
keys.forEach { row ->
|
||||
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp)
|
||||
horizontalArrangement = Arrangement.spacedBy(6.dp)
|
||||
) {
|
||||
|
||||
row.forEach { key ->
|
||||
|
||||
Button(
|
||||
onClick = {
|
||||
onKeyClick(key)
|
||||
},
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.height(buttonHeight),
|
||||
shape = RoundedCornerShape(18.dp),
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = Primary,
|
||||
contentColor = White
|
||||
),
|
||||
contentPadding = PaddingValues(0.dp)
|
||||
) {
|
||||
|
||||
if (key == "DEL") {
|
||||
|
||||
Text(
|
||||
text = "⌫",
|
||||
fontSize = 26.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
|
||||
} else {
|
||||
|
||||
Text(
|
||||
text = key,
|
||||
fontSize = 22.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
}
|
||||
if (key.isEmpty()) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.height(66.dp)
|
||||
)
|
||||
} else {
|
||||
KeypadButton(
|
||||
text = key,
|
||||
modifier = Modifier.weight(1f),
|
||||
onClick = { onNumberClick(key) }
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -277,96 +205,44 @@ private fun Keypad(
|
||||
}
|
||||
}
|
||||
|
||||
private fun handleAmountInput(
|
||||
current: String,
|
||||
key: String
|
||||
): String {
|
||||
|
||||
return when (key.uppercase()) {
|
||||
|
||||
"DEL" -> {
|
||||
current
|
||||
.dropLast(1)
|
||||
.ifEmpty { "0" }
|
||||
}
|
||||
|
||||
"." -> {
|
||||
if (current.contains(".")) {
|
||||
current
|
||||
} else {
|
||||
"${current.ifEmpty { "0" }}."
|
||||
}
|
||||
}
|
||||
|
||||
in "0".."9" -> {
|
||||
val sanitizedCurrent = if (current == "0") "" else current
|
||||
|
||||
if (sanitizedCurrent.contains(".")) {
|
||||
val decimal = sanitizedCurrent.substringAfter(".")
|
||||
|
||||
if (decimal.length >= 2) {
|
||||
current
|
||||
} else {
|
||||
sanitizedCurrent + key
|
||||
}
|
||||
} else {
|
||||
val nextValue = sanitizedCurrent + key
|
||||
nextValue.trimStart('0').ifEmpty { "0" }
|
||||
}
|
||||
}
|
||||
|
||||
else -> current
|
||||
}
|
||||
}
|
||||
|
||||
private fun normalizeAmount(value: String): String {
|
||||
if (value.isBlank()) return "0.00"
|
||||
|
||||
val normalized = if (value.endsWith(".")) {
|
||||
value.dropLast(1)
|
||||
} else {
|
||||
value
|
||||
}
|
||||
|
||||
return when {
|
||||
normalized.isBlank() -> "0.00"
|
||||
normalized.contains(".") -> {
|
||||
val whole = normalized.substringBefore(".").ifEmpty { "0" }
|
||||
val decimal = normalized.substringAfter(".")
|
||||
|
||||
when (decimal.length) {
|
||||
0 -> "$whole.00"
|
||||
1 -> "$whole.${decimal}0"
|
||||
else -> "$whole.${decimal.take(2)}"
|
||||
}
|
||||
}
|
||||
else -> "${normalized}.00"
|
||||
}
|
||||
}
|
||||
|
||||
private fun formatTypedAmount(value: String): String {
|
||||
if (!value.contains(".")) return "$value.00"
|
||||
|
||||
val whole = value.substringBefore(".").ifEmpty { "0" }
|
||||
val decimal = value.substringAfter(".")
|
||||
|
||||
return when (decimal.length) {
|
||||
0 -> "$whole."
|
||||
1 -> "$whole.${decimal}0"
|
||||
else -> "$whole.${decimal.take(2)}"
|
||||
}
|
||||
}
|
||||
|
||||
@Preview(showBackground = true)
|
||||
@Composable
|
||||
private fun AmountScreenPreview() {
|
||||
|
||||
MOBPOSTheme {
|
||||
|
||||
AmountScreen(
|
||||
action = "Amount",
|
||||
canGoBack = true,
|
||||
onBackClick = {}
|
||||
private fun KeypadButton(
|
||||
text: String,
|
||||
modifier: Modifier = Modifier,
|
||||
onClick: () -> Unit
|
||||
) {
|
||||
Box(
|
||||
modifier = modifier
|
||||
.height(66.dp)
|
||||
.shadow(
|
||||
elevation = 2.dp,
|
||||
shape = RoundedCornerShape(8.dp),
|
||||
clip = false
|
||||
)
|
||||
.background(
|
||||
color = Color.White,
|
||||
shape = RoundedCornerShape(8.dp)
|
||||
)
|
||||
.clickable { onClick() },
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Text(
|
||||
text = text,
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 24.sp,
|
||||
fontWeight = FontWeight.Normal,
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
private fun formatAmount(value: String): String {
|
||||
val number = value.toLongOrNull() ?: 0L
|
||||
return "%,d".format(number)
|
||||
}
|
||||
|
||||
@P2Preview
|
||||
@Composable
|
||||
fun PreviewAmountScreen() {
|
||||
AmountScreen { }
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
package com.mob.utsmyanmar.ui.cardwaiting
|
||||
|
||||
import androidx.activity.compose.BackHandler
|
||||
import androidx.compose.foundation.Image
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
@ -11,18 +12,22 @@ import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.navigationBarsPadding
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.statusBarsPadding
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ButtonDefaults
|
||||
import androidx.compose.material3.CenterAlignedTopAppBar
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.rounded.KeyboardArrowLeft
|
||||
import androidx.compose.material.icons.rounded.Wifi
|
||||
import androidx.compose.material3.CircularProgressIndicator
|
||||
import androidx.compose.material3.HorizontalDivider
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TopAppBarDefaults
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.DisposableEffect
|
||||
import androidx.compose.runtime.LaunchedEffect
|
||||
@ -30,23 +35,23 @@ import androidx.compose.runtime.collectAsState
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.alpha
|
||||
import androidx.compose.ui.draw.rotate
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import com.mob.utsmyanmar.R
|
||||
import com.mob.utsmyanmar.ui.theme.Black
|
||||
import com.mob.utsmyanmar.ui.theme.Primary
|
||||
import com.mob.utsmyanmar.ui.theme.White
|
||||
import com.mob.utsmyanmar.ui.preview.P2Preview
|
||||
import com.mob.utsmyanmar.ui.theme.Color
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun CardWaitingScreen(
|
||||
viewModel: CardWaitingViewModel,
|
||||
amount: String,
|
||||
onManualEntry: () -> Unit,
|
||||
onProcessingCard: () -> Unit,
|
||||
onTimeout: () -> Unit,
|
||||
onBack: () -> Unit,
|
||||
onMain: () -> Unit
|
||||
) {
|
||||
@ -57,9 +62,9 @@ fun CardWaitingScreen(
|
||||
when (event) {
|
||||
CardWaitingEvent.GoManualEntry -> onManualEntry()
|
||||
CardWaitingEvent.GoProcessingCard -> onProcessingCard()
|
||||
CardWaitingEvent.GoTimeout -> onTimeout()
|
||||
CardWaitingEvent.GoMain -> onMain()
|
||||
CardWaitingEvent.GoBack -> onBack()
|
||||
CardWaitingEvent.GoTimeout -> Unit
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -78,160 +83,360 @@ fun CardWaitingScreen(
|
||||
viewModel.onBackPressed()
|
||||
}
|
||||
|
||||
Scaffold(
|
||||
topBar = {
|
||||
CenterAlignedTopAppBar(
|
||||
title = {
|
||||
Text(
|
||||
text = "CARD CAPTURE",
|
||||
color = White,
|
||||
fontSize = 16.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
},
|
||||
navigationIcon = {
|
||||
if (uiState.canGoBack) {
|
||||
IconButton(onClick = onBack) {
|
||||
Icon(
|
||||
painter = painterResource(R.drawable.ic_left_arrow),
|
||||
contentDescription = "Back",
|
||||
tint = White
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
colors = TopAppBarDefaults.topAppBarColors(
|
||||
containerColor = Primary
|
||||
)
|
||||
)
|
||||
},
|
||||
containerColor = White
|
||||
) { paddingValues ->
|
||||
Column(
|
||||
CardWaitingScreenContent(
|
||||
amount = amount,
|
||||
uiState = uiState,
|
||||
onBackClick = viewModel::onBackPressed,
|
||||
onManualEntryClick = viewModel::onManualEntryClick
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun CardWaitingScreenContent(
|
||||
amount: String,
|
||||
uiState: CardWaitingUiState,
|
||||
onBackClick: () -> Unit,
|
||||
onManualEntryClick: () -> Unit
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.background(Color.IvoryBeige)
|
||||
.statusBarsPadding()
|
||||
.navigationBarsPadding()
|
||||
.padding(horizontal = 20.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(paddingValues)
|
||||
.background(White)
|
||||
.fillMaxWidth()
|
||||
.height(54.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.background(
|
||||
color = Primary,
|
||||
shape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp)
|
||||
)
|
||||
.padding(18.dp)
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
if (uiState.canGoBack) {
|
||||
IconButton(
|
||||
onClick = onBackClick,
|
||||
modifier = Modifier.align(Alignment.CenterStart)
|
||||
) {
|
||||
Box(
|
||||
Icon(
|
||||
imageVector = Icons.Rounded.KeyboardArrowLeft,
|
||||
contentDescription = "Back",
|
||||
tint = Color.LegacyRed
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
|
||||
Text(
|
||||
text = "AMOUNT TO PAY",
|
||||
color = Color.Black,
|
||||
fontSize = 10.sp,
|
||||
fontWeight = FontWeight.Medium
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(6.dp))
|
||||
|
||||
Row(verticalAlignment = Alignment.Bottom) {
|
||||
Text(
|
||||
text = amount,
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 30.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.width(6.dp))
|
||||
|
||||
Text(
|
||||
text = "MMK",
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 10.sp,
|
||||
fontWeight = FontWeight.Bold,
|
||||
modifier = Modifier.padding(bottom = 6.dp)
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(32.dp))
|
||||
|
||||
ContactlessCircle(isLoading = uiState.isLoading)
|
||||
|
||||
Spacer(modifier = Modifier.height(24.dp))
|
||||
|
||||
Text(
|
||||
text = when {
|
||||
uiState.isCardCaptured -> "Card Detected"
|
||||
uiState.isFallback -> "Swipe Your Card"
|
||||
else -> "Tap Your Card"
|
||||
},
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 13.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
|
||||
Text(
|
||||
text = if (uiState.isCardCaptured) {
|
||||
"Reader captured card data"
|
||||
} else {
|
||||
"Hold your card near the reader"
|
||||
},
|
||||
color = Color.Black,
|
||||
fontSize = 9.sp
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(14.dp))
|
||||
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
HorizontalDivider(
|
||||
modifier = Modifier.weight(1f),
|
||||
color = Color.Gray.copy(alpha = 0.4f)
|
||||
)
|
||||
|
||||
Text(
|
||||
text = "OR",
|
||||
modifier = Modifier.padding(horizontal = 12.dp),
|
||||
color = Color.Gray,
|
||||
fontSize = 10.sp
|
||||
)
|
||||
|
||||
HorizontalDivider(
|
||||
modifier = Modifier.weight(1f),
|
||||
color = Color.Gray.copy(alpha = 0.4f)
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(12.dp))
|
||||
|
||||
InsertCardRow()
|
||||
|
||||
Spacer(modifier = Modifier.height(18.dp))
|
||||
|
||||
Text(
|
||||
text = uiState.alertMessage,
|
||||
color = Color.Black,
|
||||
fontSize = 11.sp,
|
||||
textAlign = TextAlign.Center,
|
||||
lineHeight = 16.sp
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(18.dp))
|
||||
|
||||
StatusPanel(uiState = uiState)
|
||||
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
|
||||
ManualEntryAction(onManualEntryClick = onManualEntryClick)
|
||||
|
||||
Spacer(modifier = Modifier.height(18.dp))
|
||||
|
||||
CardLogoRow()
|
||||
|
||||
Spacer(modifier = Modifier.height(34.dp))
|
||||
|
||||
PoweredByMob()
|
||||
|
||||
Spacer(modifier = Modifier.height(12.dp))
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun ContactlessCircle(isLoading: Boolean) {
|
||||
Box(
|
||||
modifier = Modifier.size(190.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
CircleBorder(180, 0.1f)
|
||||
CircleBorder(150, 0.20f)
|
||||
|
||||
Surface(
|
||||
modifier = Modifier.size(108.dp),
|
||||
shape = CircleShape,
|
||||
color = Color.White,
|
||||
shadowElevation = 8.dp
|
||||
) {
|
||||
Box(contentAlignment = Alignment.Center) {
|
||||
if (isLoading) {
|
||||
CircularProgressIndicator(
|
||||
color = Color.LegacyRed,
|
||||
strokeWidth = 3.dp,
|
||||
modifier = Modifier.size(40.dp)
|
||||
)
|
||||
} else {
|
||||
Icon(
|
||||
imageVector = Icons.Rounded.Wifi,
|
||||
contentDescription = null,
|
||||
tint = Color.LegacyRed,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.background(
|
||||
color = White,
|
||||
shape = RoundedCornerShape(24.dp)
|
||||
)
|
||||
.padding(horizontal = 22.dp, vertical = 28.dp)
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(92.dp)
|
||||
.background(
|
||||
color = Primary.copy(alpha = 0.08f),
|
||||
shape = RoundedCornerShape(28.dp)
|
||||
),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(R.drawable.buy_ecommerce_finance_payment_pos_shop_svgrepo_com),
|
||||
contentDescription = "Card reader"
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(20.dp))
|
||||
|
||||
Text(
|
||||
text = if (uiState.isFallback) {
|
||||
"Swipe Card"
|
||||
} else {
|
||||
"Present Card"
|
||||
},
|
||||
color = Black,
|
||||
fontSize = 24.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(10.dp))
|
||||
|
||||
Text(
|
||||
text = uiState.alertMessage,
|
||||
color = Black,
|
||||
fontSize = 18.sp,
|
||||
lineHeight = 26.sp,
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.background(
|
||||
color = White.copy(alpha = 0.12f),
|
||||
shape = RoundedCornerShape(22.dp)
|
||||
)
|
||||
.padding(horizontal = 18.dp, vertical = 16.dp),
|
||||
horizontalArrangement = Arrangement.SpaceBetween,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Text(
|
||||
text = if (uiState.isLoading) {
|
||||
"Reader status"
|
||||
} else {
|
||||
"Ready for card"
|
||||
},
|
||||
color = White,
|
||||
fontSize = 16.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
|
||||
Text(
|
||||
text = if (uiState.isLoading) "Initializing" else "Waiting",
|
||||
color = White,
|
||||
fontSize = 15.sp
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
|
||||
Button(
|
||||
onClick = viewModel::onManualEntryClick,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(64.dp),
|
||||
shape = RoundedCornerShape(18.dp),
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = White,
|
||||
contentColor = Primary
|
||||
)
|
||||
) {
|
||||
Text(
|
||||
text = "Manual Entry",
|
||||
fontSize = 20.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
}
|
||||
.size(72.dp)
|
||||
.rotate(90f)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun CircleBorder(
|
||||
size: Int,
|
||||
alpha: Float
|
||||
) {
|
||||
Surface(
|
||||
modifier = Modifier
|
||||
.size(size.dp)
|
||||
.alpha(alpha),
|
||||
shape = CircleShape,
|
||||
border = BorderStroke(1.dp, Color.LegacyRed)
|
||||
) {}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun InsertCardRow() {
|
||||
Row(
|
||||
modifier = Modifier.height(44.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Icon(
|
||||
painter = painterResource(id = R.drawable.ic_insert_card),
|
||||
contentDescription = null,
|
||||
tint = Color.LegacyRed,
|
||||
modifier = Modifier.size(28.dp)
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.width(10.dp))
|
||||
|
||||
Column {
|
||||
Text(
|
||||
text = "Insert Your Card",
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 11.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
Text(
|
||||
text = "Chip facing up",
|
||||
color = Color.Black,
|
||||
fontSize = 9.sp
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun StatusPanel(uiState: CardWaitingUiState) {
|
||||
Surface(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
color = Color.White,
|
||||
shape = RoundedCornerShape(12.dp)
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 14.dp, vertical = 12.dp),
|
||||
horizontalArrangement = Arrangement.SpaceBetween,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Text(
|
||||
text = when {
|
||||
uiState.isCardCaptured -> "Reader status"
|
||||
uiState.isLoading -> "Reader status"
|
||||
else -> "Ready for card"
|
||||
},
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 12.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
|
||||
Text(
|
||||
text = when {
|
||||
uiState.isCardCaptured -> "Captured"
|
||||
uiState.isLoading -> "Initializing"
|
||||
else -> "Waiting"
|
||||
},
|
||||
color = Color.Gray,
|
||||
fontSize = 11.sp
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun ManualEntryAction(onManualEntryClick: () -> Unit) {
|
||||
Surface(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
color = Color.White,
|
||||
shape = RoundedCornerShape(12.dp)
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.background(Color.White)
|
||||
.clickable(onClick = onManualEntryClick)
|
||||
.padding(vertical = 16.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Text(
|
||||
text = "Manual Entry",
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 14.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun CardLogoRow() {
|
||||
Surface(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
color = Color.White,
|
||||
shape = RoundedCornerShape(3.dp)
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(42.dp)
|
||||
.padding(horizontal = 14.dp),
|
||||
horizontalArrangement = Arrangement.SpaceBetween,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Text("VISA", fontSize = 22.sp, fontWeight = FontWeight.Bold)
|
||||
Text("MC", fontSize = 18.sp, fontWeight = FontWeight.Bold)
|
||||
Text("MPU", fontSize = 20.sp, fontWeight = FontWeight.Bold)
|
||||
Text("UnionPay", fontSize = 12.sp, fontWeight = FontWeight.Bold)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun PoweredByMob() {
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
Text(
|
||||
text = "Powered by",
|
||||
color = Color.Gray,
|
||||
fontSize = 8.sp
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
|
||||
Text(
|
||||
text = "MOB",
|
||||
color = Color.Gray,
|
||||
fontSize = 9.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@P2Preview
|
||||
@Composable
|
||||
fun PreviewCardWaitingScreen() {
|
||||
CardWaitingScreenContent(
|
||||
amount = "50,000",
|
||||
uiState = CardWaitingUiState(),
|
||||
onBackClick = {},
|
||||
onManualEntryClick = {}
|
||||
)
|
||||
}
|
||||
|
||||
@ -4,5 +4,6 @@ data class CardWaitingUiState(
|
||||
val alertMessage: String = "Please insert, tap, or swipe card",
|
||||
val isLoading: Boolean = false,
|
||||
val isFallback: Boolean = false,
|
||||
val canGoBack: Boolean = true
|
||||
val canGoBack: Boolean = true,
|
||||
val isCardCaptured: Boolean = false
|
||||
)
|
||||
|
||||
@ -78,7 +78,17 @@ class CardWaitingViewModel(
|
||||
_uiState.update {
|
||||
it.copy(
|
||||
alertMessage = "Fallback!\nPlease stripe!",
|
||||
isFallback = true
|
||||
isFallback = true,
|
||||
isCardCaptured = false
|
||||
)
|
||||
}
|
||||
} else {
|
||||
_uiState.update {
|
||||
it.copy(
|
||||
alertMessage = "Please insert, tap, or swipe card",
|
||||
isFallback = false,
|
||||
isLoading = false,
|
||||
isCardCaptured = false
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -122,7 +132,8 @@ class CardWaitingViewModel(
|
||||
_uiState.update {
|
||||
it.copy(
|
||||
alertMessage = "Initializing card reader...",
|
||||
isLoading = true
|
||||
isLoading = true,
|
||||
isCardCaptured = false
|
||||
)
|
||||
}
|
||||
|
||||
@ -136,7 +147,8 @@ class CardWaitingViewModel(
|
||||
} else {
|
||||
"Please insert, tap, or swipe card"
|
||||
},
|
||||
isLoading = false
|
||||
isLoading = false,
|
||||
isCardCaptured = false
|
||||
)
|
||||
}
|
||||
setupCardReadProcess(isFallback)
|
||||
@ -210,6 +222,13 @@ class CardWaitingViewModel(
|
||||
}
|
||||
|
||||
viewModelScope.launch {
|
||||
_uiState.update {
|
||||
it.copy(
|
||||
alertMessage = "Card detected.",
|
||||
isLoading = false,
|
||||
isCardCaptured = true
|
||||
)
|
||||
}
|
||||
_events.send(CardWaitingEvent.GoProcessingCard)
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,6 +87,7 @@ fun AppNavGraph(
|
||||
|
||||
CardWaitingScreen(
|
||||
viewModel = cardWaitingViewModel,
|
||||
amount = formatAmountForDisplay(sharedViewModel.amount.value),
|
||||
onManualEntry = {},
|
||||
onProcessingCard = {
|
||||
navController.navigate(Routes.ProcessingCard.route) {
|
||||
@ -96,7 +97,6 @@ fun AppNavGraph(
|
||||
launchSingleTop = true
|
||||
}
|
||||
},
|
||||
onTimeout = { navController.popBackStack() },
|
||||
onBack = { navController.popBackStack() },
|
||||
onMain = {
|
||||
navController.navigate(Routes.Dashboard.route) {
|
||||
@ -207,3 +207,9 @@ fun AppNavGraph(
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private fun formatAmountForDisplay(amount: String?): String {
|
||||
val normalizedAmount = amount.orEmpty()
|
||||
val value = normalizedAmount.toLongOrNull() ?: return normalizedAmount.ifBlank { "0" }
|
||||
return "%,d".format(value)
|
||||
}
|
||||
|
||||
@ -21,4 +21,5 @@ object Color {
|
||||
val White = Color(0xFFFFFFFF)
|
||||
val Black = Color(0xFF000000)
|
||||
val Gray = Color(0xFF898989)
|
||||
val Success = Color(0xFF007E33)
|
||||
}
|
||||
@ -1,268 +1,289 @@
|
||||
package com.mob.utsmyanmar.ui.transaction_result
|
||||
|
||||
import androidx.activity.compose.BackHandler
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
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.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.ChevronLeft
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ButtonColors
|
||||
import androidx.compose.material3.Card
|
||||
import androidx.compose.material3.CardDefaults
|
||||
import androidx.compose.material3.CenterAlignedTopAppBar
|
||||
import androidx.compose.material3.CircularProgressIndicator
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.HorizontalDivider
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material.icons.filled.CalendarMonth
|
||||
import androidx.compose.material.icons.filled.Numbers
|
||||
import androidx.compose.material.icons.filled.Print
|
||||
import androidx.compose.material.icons.rounded.Check
|
||||
import androidx.compose.material3.*
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.blur
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.draw.shadow
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import com.mob.utsmyanmar.R
|
||||
import com.mob.utsmyanmar.ui.components.appbar.AppBar
|
||||
import com.mob.utsmyanmar.ui.theme.Black
|
||||
import com.mob.utsmyanmar.ui.theme.Primary
|
||||
import com.mob.utsmyanmar.ui.theme.White
|
||||
import com.mob.utsmyanmar.ui.preview.P2Preview
|
||||
import com.mob.utsmyanmar.ui.theme.Color
|
||||
import com.utsmyanmar.paylibs.print.PrintReceipt
|
||||
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun TransactionResultScreen(
|
||||
state: TransactionResultState,
|
||||
canGoBack: Boolean,
|
||||
onEvent: (TransactionResultEvent) -> Unit,
|
||||
) {
|
||||
BackHandler(enabled = !canGoBack) {}
|
||||
BackHandler(enabled = canGoBack) {
|
||||
onEvent(TransactionResultEvent.BackClick)
|
||||
}
|
||||
|
||||
Scaffold(
|
||||
topBar = {
|
||||
AppBar(
|
||||
title = "Transaction Results",
|
||||
icon = if (canGoBack) Icons.Default.ChevronLeft else null,
|
||||
onIconClick = if (canGoBack) {
|
||||
{ onEvent(TransactionResultEvent.BackClick) }
|
||||
} else {
|
||||
null
|
||||
}
|
||||
)
|
||||
}
|
||||
containerColor = Color.IvoryBeige
|
||||
) { paddingValues ->
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.padding(paddingValues)
|
||||
.fillMaxSize()
|
||||
.padding(16.dp),
|
||||
verticalArrangement = Arrangement.SpaceBetween
|
||||
.background(Color.IvoryBeige)
|
||||
.padding(paddingValues)
|
||||
.statusBarsPadding()
|
||||
.navigationBarsPadding()
|
||||
.padding(horizontal = 20.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
Column() {
|
||||
|
||||
Card(
|
||||
colors = CardDefaults.cardColors(
|
||||
containerColor = White
|
||||
),
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(200.dp),
|
||||
elevation = CardDefaults.cardElevation(
|
||||
defaultElevation = 6.dp
|
||||
)
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
) {
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
Icon(
|
||||
painter = painterResource(R.drawable.ic_success),
|
||||
modifier = Modifier.size(100.dp),
|
||||
tint = Primary,
|
||||
contentDescription = "success icon"
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Text(
|
||||
text = "Transaction Status",
|
||||
style = MaterialTheme.typography.bodyLarge.copy(
|
||||
fontSize = 18.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
),
|
||||
textAlign = TextAlign.Center,
|
||||
color = Black
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Text(
|
||||
text = state.message,
|
||||
style = MaterialTheme.typography.bodyLarge.copy(
|
||||
fontSize = 16.sp,
|
||||
fontWeight = FontWeight.Medium
|
||||
),
|
||||
textAlign = TextAlign.Center,
|
||||
color = Black
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
}
|
||||
}
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
|
||||
Spacer(Modifier.height(24.dp))
|
||||
SuccessIcon()
|
||||
|
||||
Card(
|
||||
colors = CardDefaults.cardColors(
|
||||
containerColor = Primary
|
||||
),
|
||||
modifier = Modifier.fillMaxWidth().height(250.dp),
|
||||
elevation = CardDefaults.cardElevation(
|
||||
defaultElevation = 6.dp
|
||||
)
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(16.dp),
|
||||
) {
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
Text(
|
||||
text = "Transaction Details",
|
||||
style = MaterialTheme.typography.bodyLarge.copy(
|
||||
fontSize = 18.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
),
|
||||
color = White
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.SpaceBetween
|
||||
) {
|
||||
Text(
|
||||
text = "Amount",
|
||||
style = MaterialTheme.typography.bodyLarge.copy(
|
||||
fontSize = 14.sp,
|
||||
fontWeight = FontWeight.Medium
|
||||
),
|
||||
color = White
|
||||
)
|
||||
Text(
|
||||
text = "1,000 MMK",
|
||||
style = MaterialTheme.typography.bodyLarge.copy(
|
||||
fontSize = 15.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
),
|
||||
color = White
|
||||
)
|
||||
}
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.SpaceBetween
|
||||
) {
|
||||
Text(
|
||||
text = "Transaction Type",
|
||||
style = MaterialTheme.typography.bodyLarge.copy(
|
||||
fontSize = 14.sp,
|
||||
fontWeight = FontWeight.Medium
|
||||
),
|
||||
color = White
|
||||
)
|
||||
Text(
|
||||
text = "MPU",
|
||||
style = MaterialTheme.typography.bodyLarge.copy(
|
||||
fontSize = 15.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
),
|
||||
color = White
|
||||
)
|
||||
}
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
HorizontalDivider(thickness = 1.dp, color = White)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Column(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
Text(
|
||||
text = "Transaction Amount",
|
||||
style = MaterialTheme.typography.bodyLarge.copy(
|
||||
fontSize = 14.sp,
|
||||
fontWeight = FontWeight.Medium
|
||||
),
|
||||
color = White
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Text(
|
||||
text = "500.00 MMMK",
|
||||
style = MaterialTheme.typography.bodyLarge.copy(
|
||||
fontSize = 22.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
),
|
||||
color = White
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Text(
|
||||
text = "Received",
|
||||
style = MaterialTheme.typography.bodyLarge.copy(
|
||||
fontSize = 13.sp,
|
||||
fontWeight = FontWeight.Normal
|
||||
),
|
||||
color = White
|
||||
)
|
||||
}
|
||||
}
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
}
|
||||
}
|
||||
Text(
|
||||
text = state.title,
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 24.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
|
||||
Button(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(50.dp),
|
||||
colors = ButtonColors(
|
||||
containerColor = Primary,
|
||||
contentColor = White,
|
||||
disabledContainerColor = Primary,
|
||||
disabledContentColor = White,
|
||||
Spacer(modifier = Modifier.height(6.dp))
|
||||
|
||||
Text(
|
||||
text = state.message.ifBlank { "Your payment has been processed successfully." },
|
||||
color = Color.Gray,
|
||||
fontSize = 13.sp,
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(28.dp))
|
||||
|
||||
AmountCard(amount = "50,000")
|
||||
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
InfoCard(
|
||||
date = "26 May 2026",
|
||||
time = "12:06 PM",
|
||||
transactionId = "1234568333"
|
||||
)
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun SuccessIcon() {
|
||||
Box(
|
||||
modifier = Modifier.size(132.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(132.dp)
|
||||
.background(
|
||||
color = Color.Success.copy(alpha = 0.12f),
|
||||
shape = CircleShape
|
||||
)
|
||||
)
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(96.dp)
|
||||
.background(
|
||||
color = Color.Success,
|
||||
shape = CircleShape
|
||||
),
|
||||
shape = RoundedCornerShape(12.dp),
|
||||
onClick = {}
|
||||
) {
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Icons.Rounded.Check,
|
||||
contentDescription = "Success",
|
||||
tint = Color.White,
|
||||
modifier = Modifier.size(64.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun AmountCard(
|
||||
amount: String
|
||||
) {
|
||||
Card(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(130.dp)
|
||||
.shadow(
|
||||
elevation = 6.dp,
|
||||
shape = RoundedCornerShape(22.dp),
|
||||
clip = false
|
||||
),
|
||||
shape = RoundedCornerShape(22.dp),
|
||||
colors = CardDefaults.cardColors(
|
||||
containerColor = Color.White
|
||||
)
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(vertical = 18.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
verticalArrangement = Arrangement.Center
|
||||
) {
|
||||
Text(
|
||||
text = "PAID AMOUNT",
|
||||
color = Color.Gray,
|
||||
fontSize = 15.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
|
||||
|
||||
Text(
|
||||
text = amount,
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 30.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(6.dp))
|
||||
|
||||
Text(
|
||||
text = "MMK",
|
||||
color = Color.LegacyRed,
|
||||
fontSize = 14.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun InfoCard(
|
||||
date: String,
|
||||
time: String,
|
||||
transactionId: String
|
||||
) {
|
||||
Card(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(130.dp)
|
||||
.shadow(
|
||||
elevation = 4.dp,
|
||||
shape = RoundedCornerShape(18.dp),
|
||||
clip = false
|
||||
),
|
||||
shape = RoundedCornerShape(18.dp),
|
||||
colors = CardDefaults.cardColors(
|
||||
containerColor = Color.White
|
||||
)
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(horizontal = 18.dp),
|
||||
verticalArrangement = Arrangement.SpaceAround
|
||||
) {
|
||||
InfoItem(
|
||||
icon = Icons.Default.CalendarMonth,
|
||||
title = "Date & Time",
|
||||
value = date,
|
||||
subValue = time,
|
||||
// modifier = Modifier.weight(1f)
|
||||
)
|
||||
InfoItem(
|
||||
icon = Icons.Default.Numbers,
|
||||
title = "Transaction ID",
|
||||
value = transactionId,
|
||||
subValue = "",
|
||||
// modifier = Modifier.weight(1f)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun InfoItem(
|
||||
icon: ImageVector,
|
||||
title: String,
|
||||
value: String,
|
||||
subValue: String,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
Row(
|
||||
modifier = modifier,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(46.dp)
|
||||
.background(
|
||||
color = Color.LegacyRed.copy(alpha = 0.1f),
|
||||
shape = CircleShape
|
||||
),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Icon(
|
||||
imageVector = icon,
|
||||
contentDescription = null,
|
||||
tint = Color.LegacyRed,
|
||||
modifier = Modifier.size(25.dp)
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.width(10.dp))
|
||||
|
||||
Column {
|
||||
Text(
|
||||
text = title,
|
||||
color = Color.Gray,
|
||||
fontSize = 11.sp
|
||||
)
|
||||
|
||||
Text(
|
||||
text = value,
|
||||
color = Color.Black,
|
||||
fontSize = 13.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
|
||||
if (subValue.isNotEmpty()) {
|
||||
Text(
|
||||
text = "Transaction Completed",
|
||||
style = MaterialTheme.typography.bodyLarge.copy(
|
||||
fontSize = 16.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
text = subValue,
|
||||
color = Color.Black,
|
||||
fontSize = 11.sp
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview(showBackground = true, showSystemUi = true)
|
||||
|
||||
@P2Preview
|
||||
@Composable
|
||||
fun TransactionResultScreenPreview() {
|
||||
fun PreviewTransactionResultScreen() {
|
||||
TransactionResultScreen(
|
||||
state = TransactionResultState(
|
||||
title = "Transaction Success",
|
||||
message = "Transaction Approved",
|
||||
isLoading = false
|
||||
"Success"
|
||||
),
|
||||
canGoBack = true,
|
||||
onEvent = {}
|
||||
onEvent = {},
|
||||
)
|
||||
}
|
||||
|
||||
24
app/src/main/res/drawable/ic_insert_card.xml
Normal file
24
app/src/main/res/drawable/ic_insert_card.xml
Normal file
@ -0,0 +1,24 @@
|
||||
<!--
|
||||
~ Copyright (C) 2026 The Android Open Source Project
|
||||
~
|
||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
||||
~ you may not use this file except in compliance with the License.
|
||||
~ You may obtain a copy of the License at
|
||||
~
|
||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
||||
~
|
||||
~ Unless required by applicable law or agreed to in writing, software
|
||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
~ See the License for the specific language governing permissions and
|
||||
~ limitations under the License.
|
||||
-->
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="800dp"
|
||||
android:height="800dp"
|
||||
android:viewportWidth="15.133"
|
||||
android:viewportHeight="15.133">
|
||||
<path
|
||||
android:pathData="M14.487,0H0.647C0.306,0 0.028,0.277 0.028,0.619v2.165c0,0.342 0.277,0.619 0.619,0.619h0.966h0.074h0.902l-0.726,10.54c0,0.654 0.532,1.186 1.186,1.188l9.033,0.002c0.653,0 1.188,-0.53 1.188,-1.187L12.552,3.402h0.891c0.005,0 0.008,-0.002 0.013,-0.002v0.002h1.031c0.341,0 0.618,-0.277 0.618,-0.619V0.619C15.105,0.277 14.828,0 14.487,0zM7.883,14.339L3.05,14.337c-0.218,0 -0.395,-0.178 -0.395,-0.396L3.441,2.518c0,-0.218 0.178,-0.395 0.396,-0.395l4.051,0.001L7.883,14.339zM12.084,14.339h-1.062L10.246,2.125h1.061c0.22,0 0.396,0.177 0.396,0.395l0.776,11.424C12.478,14.164 12.301,14.341 12.084,14.339zM12.524,2.963L12.524,2.963l-0.03,-0.442c0,-0.655 -0.531,-1.187 -1.188,-1.187L3.837,1.331c-0.654,0 -1.187,0.532 -1.187,1.186L2.62,2.965H2.619H1.717l0.006,-0.084c0.02,-1.148 0.96,-2.077 2.113,-2.077l7.47,0.003c0.564,0 1.096,0.22 1.496,0.62c0.391,0.392 0.609,0.908 0.617,1.459l0.006,0.077C13.425,2.963 12.524,2.963 12.524,2.963zM3.387,10.312l1.075,-0.009l0.025,3.125l-1.074,0.009L3.387,10.312z"
|
||||
android:fillColor="#030104"/>
|
||||
</vector>
|
||||
49
app/src/main/res/drawable/ic_wifi.xml
Normal file
49
app/src/main/res/drawable/ic_wifi.xml
Normal file
@ -0,0 +1,49 @@
|
||||
<!--
|
||||
~ Copyright (C) 2026 The Android Open Source Project
|
||||
~
|
||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
||||
~ you may not use this file except in compliance with the License.
|
||||
~ You may obtain a copy of the License at
|
||||
~
|
||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
||||
~
|
||||
~ Unless required by applicable law or agreed to in writing, software
|
||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
~ See the License for the specific language governing permissions and
|
||||
~ limitations under the License.
|
||||
-->
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="800dp"
|
||||
android:height="800dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24">
|
||||
<path
|
||||
android:pathData="M4.91,11.84C9.21,8.52 14.8,8.52 19.1,11.84"
|
||||
android:strokeLineJoin="round"
|
||||
android:strokeWidth="1.5"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#292D32"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M2,8.36C8.06,3.68 15.94,3.68 22,8.36"
|
||||
android:strokeLineJoin="round"
|
||||
android:strokeWidth="1.5"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#292D32"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M6.79,15.49C9.94,13.05 14.05,13.05 17.2,15.49"
|
||||
android:strokeLineJoin="round"
|
||||
android:strokeWidth="1.5"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#292D32"
|
||||
android:strokeLineCap="round"/>
|
||||
<path
|
||||
android:pathData="M9.4,19.15C10.98,17.93 13.03,17.93 14.61,19.15"
|
||||
android:strokeLineJoin="round"
|
||||
android:strokeWidth="1.5"
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#292D32"
|
||||
android:strokeLineCap="round"/>
|
||||
</vector>
|
||||
Loading…
Reference in New Issue
Block a user