new success screen
This commit is contained in:
moon
parent
9d9ef95140
commit
ff2858d484
@ -21,4 +21,5 @@ object Color {
|
|||||||
val White = Color(0xFFFFFFFF)
|
val White = Color(0xFFFFFFFF)
|
||||||
val Black = Color(0xFF000000)
|
val Black = Color(0xFF000000)
|
||||||
val Gray = Color(0xFF898989)
|
val Gray = Color(0xFF898989)
|
||||||
|
val Success = Color(0xFF007E33)
|
||||||
}
|
}
|
||||||
@ -1,268 +1,289 @@
|
|||||||
package com.mob.utsmyanmar.ui.transaction_result
|
package com.mob.utsmyanmar.ui.transaction_result
|
||||||
|
|
||||||
import androidx.activity.compose.BackHandler
|
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.Arrangement
|
||||||
import androidx.compose.foundation.layout.Box
|
import androidx.compose.foundation.shape.CircleShape
|
||||||
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.RoundedCornerShape
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||||
import androidx.compose.material.icons.Icons
|
import androidx.compose.material.icons.Icons
|
||||||
import androidx.compose.material.icons.filled.ChevronLeft
|
import androidx.compose.material.icons.filled.CalendarMonth
|
||||||
import androidx.compose.material3.Button
|
import androidx.compose.material.icons.filled.Numbers
|
||||||
import androidx.compose.material3.ButtonColors
|
import androidx.compose.material.icons.filled.Print
|
||||||
import androidx.compose.material3.Card
|
import androidx.compose.material.icons.rounded.Check
|
||||||
import androidx.compose.material3.CardDefaults
|
import androidx.compose.material3.*
|
||||||
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.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.ui.Alignment
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.draw.blur
|
import androidx.compose.ui.draw.shadow
|
||||||
import androidx.compose.ui.res.painterResource
|
import androidx.compose.ui.graphics.vector.ImageVector
|
||||||
import androidx.compose.ui.text.font.FontWeight
|
import androidx.compose.ui.text.font.FontWeight
|
||||||
import androidx.compose.ui.text.style.TextAlign
|
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.dp
|
||||||
import androidx.compose.ui.unit.sp
|
import androidx.compose.ui.unit.sp
|
||||||
import com.mob.utsmyanmar.R
|
import com.mob.utsmyanmar.ui.preview.P2Preview
|
||||||
import com.mob.utsmyanmar.ui.components.appbar.AppBar
|
import com.mob.utsmyanmar.ui.theme.Color
|
||||||
import com.mob.utsmyanmar.ui.theme.Black
|
import com.utsmyanmar.paylibs.print.PrintReceipt
|
||||||
import com.mob.utsmyanmar.ui.theme.Primary
|
|
||||||
import com.mob.utsmyanmar.ui.theme.White
|
|
||||||
|
|
||||||
@OptIn(ExperimentalMaterial3Api::class)
|
|
||||||
@Composable
|
@Composable
|
||||||
fun TransactionResultScreen(
|
fun TransactionResultScreen(
|
||||||
state: TransactionResultState,
|
state: TransactionResultState,
|
||||||
canGoBack: Boolean,
|
canGoBack: Boolean,
|
||||||
onEvent: (TransactionResultEvent) -> Unit,
|
onEvent: (TransactionResultEvent) -> Unit,
|
||||||
) {
|
) {
|
||||||
BackHandler(enabled = !canGoBack) {}
|
BackHandler(enabled = canGoBack) {
|
||||||
|
onEvent(TransactionResultEvent.BackClick)
|
||||||
|
}
|
||||||
|
|
||||||
Scaffold(
|
Scaffold(
|
||||||
topBar = {
|
containerColor = Color.IvoryBeige
|
||||||
AppBar(
|
|
||||||
title = "Transaction Results",
|
|
||||||
icon = if (canGoBack) Icons.Default.ChevronLeft else null,
|
|
||||||
onIconClick = if (canGoBack) {
|
|
||||||
{ onEvent(TransactionResultEvent.BackClick) }
|
|
||||||
} else {
|
|
||||||
null
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
) { paddingValues ->
|
) { paddingValues ->
|
||||||
Column(
|
Column(
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.padding(paddingValues)
|
|
||||||
.fillMaxSize()
|
.fillMaxSize()
|
||||||
.padding(16.dp),
|
.background(Color.IvoryBeige)
|
||||||
verticalArrangement = Arrangement.SpaceBetween
|
.padding(paddingValues)
|
||||||
|
.statusBarsPadding()
|
||||||
|
.navigationBarsPadding()
|
||||||
|
.padding(horizontal = 20.dp),
|
||||||
|
horizontalAlignment = Alignment.CenterHorizontally
|
||||||
) {
|
) {
|
||||||
Column() {
|
|
||||||
|
|
||||||
Card(
|
Spacer(modifier = Modifier.height(8.dp))
|
||||||
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.height(24.dp))
|
SuccessIcon()
|
||||||
|
|
||||||
Card(
|
Spacer(modifier = Modifier.height(16.dp))
|
||||||
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
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Button(
|
Text(
|
||||||
modifier = Modifier
|
text = state.title,
|
||||||
.fillMaxWidth()
|
color = Color.LegacyRed,
|
||||||
.height(50.dp),
|
fontSize = 24.sp,
|
||||||
colors = ButtonColors(
|
fontWeight = FontWeight.Bold
|
||||||
containerColor = Primary,
|
)
|
||||||
contentColor = White,
|
|
||||||
disabledContainerColor = Primary,
|
Spacer(modifier = Modifier.height(6.dp))
|
||||||
disabledContentColor = White,
|
|
||||||
|
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),
|
contentAlignment = Alignment.Center
|
||||||
onClick = {}
|
) {
|
||||||
) {
|
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(
|
||||||
text = "Transaction Completed",
|
text = subValue,
|
||||||
style = MaterialTheme.typography.bodyLarge.copy(
|
color = Color.Black,
|
||||||
fontSize = 16.sp,
|
fontSize = 11.sp
|
||||||
fontWeight = FontWeight.SemiBold
|
|
||||||
)
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Preview(showBackground = true, showSystemUi = true)
|
|
||||||
|
@P2Preview
|
||||||
@Composable
|
@Composable
|
||||||
fun TransactionResultScreenPreview() {
|
fun PreviewTransactionResultScreen() {
|
||||||
TransactionResultScreen(
|
TransactionResultScreen(
|
||||||
state = TransactionResultState(
|
state = TransactionResultState(
|
||||||
title = "Transaction Success",
|
"Success"
|
||||||
message = "Transaction Approved",
|
|
||||||
isLoading = false
|
|
||||||
),
|
),
|
||||||
canGoBack = true,
|
canGoBack = true,
|
||||||
onEvent = {}
|
onEvent = {},
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user