From ff2858d484b8ba042f708d0f985323488236e6b3 Mon Sep 17 00:00:00 2001 From: moon <56061215+MgKyawLay@users.noreply.github.com> Date: Sat, 16 May 2026 13:45:17 +0630 Subject: [PATCH] new success screen --- .../java/com/mob/utsmyanmar/ui/theme/Color.kt | 1 + .../TransactionResultScreen.kt | 465 +++++++++--------- 2 files changed, 244 insertions(+), 222 deletions(-) diff --git a/app/src/main/java/com/mob/utsmyanmar/ui/theme/Color.kt b/app/src/main/java/com/mob/utsmyanmar/ui/theme/Color.kt index 1768367..ddfdb0e 100644 --- a/app/src/main/java/com/mob/utsmyanmar/ui/theme/Color.kt +++ b/app/src/main/java/com/mob/utsmyanmar/ui/theme/Color.kt @@ -21,4 +21,5 @@ object Color { val White = Color(0xFFFFFFFF) val Black = Color(0xFF000000) val Gray = Color(0xFF898989) + val Success = Color(0xFF007E33) } \ No newline at end of file diff --git a/app/src/main/java/com/mob/utsmyanmar/ui/transaction_result/TransactionResultScreen.kt b/app/src/main/java/com/mob/utsmyanmar/ui/transaction_result/TransactionResultScreen.kt index d528085..a1d5c8d 100644 --- a/app/src/main/java/com/mob/utsmyanmar/ui/transaction_result/TransactionResultScreen.kt +++ b/app/src/main/java/com/mob/utsmyanmar/ui/transaction_result/TransactionResultScreen.kt @@ -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)) - Button( - modifier = Modifier - .fillMaxWidth() - .height(50.dp), - colors = ButtonColors( - containerColor = Primary, - contentColor = White, - disabledContainerColor = Primary, - disabledContentColor = White, + Text( + text = state.title, + color = Color.LegacyRed, + fontSize = 24.sp, + fontWeight = FontWeight.Bold + ) + + 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 = {}, ) }